@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');


.mes{font-size: 1.5rem;
color: #645c8e;
font-weight: 600;
letter-spacing: 0.2rem;
text-align: center;}

/*calendario*/
.calendario {
      display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
    overflow: auto;
     overflow-x: scroll;    
    
}


.dentrocalendario{
     margin: 0rem auto;
    padding: 0rem;
    max-width: 100%;
    text-transform: uppercase;
     padding: 1rem;
    padding-bottom: 2rem;
    border-right: 0.01rem solid rgba(193, 186, 224, 0.38);
     border-left: 0.01rem solid rgba(193, 186, 224, 0.38);
    font-size: 0.7rem;
    border-bottom: 0.1rem solid rgba(193, 186, 224, 0.38);
        color: #2f2254;
    font-weight: 500;
    padding-top: 0.5rem;
    line-height: 1.2rem;
}

.dentrocalendario .mas{
    font-weight: 200;
 
}

.dentrocalendario .mas2{
     
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #c5bfe2;
    border-bottom: 0.2rem solid;
    padding-bottom: 0.6rem;
}

/**/
    


h4{
   font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    margin-top: 0.4rem;
    letter-spacing: 0.15rem;
    color: #9696c1;
        line-height: 1.1rem;
    margin-top: .6rem;
}



.h6-0{ font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    margin-top: 0.4rem;
    letter-spacing: 0.15rem;
    color: #d3c6ff;
        line-height: 0.8rem;
   margin-top: .8rem;}

.h6-1{ font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    margin-top: 0.4rem;
    letter-spacing: 0.15rem;
    color: #ffaf61;
        line-height: 0.8rem;
    margin-top: .6rem;}

.h6-2{ font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    margin-top: 0.4rem;
    letter-spacing: 0.15rem;
    color: #ff6da6;
         line-height: 1.1rem; }
.h6-3{ font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    margin-top: 0.4rem;
    letter-spacing: 0.15rem;
    color: #47d2dd;
        }

/*Mensaje mail*/
.aviso {margin-top: 0.5rem; 
    font-size: 0.5rem;
    letter-spacing: 0.1rem;
    color: #281257; 
    text-transform: uppercase;
    width:30rem;
    text-align: center;
    line-height: 0.9rem;
    font-weight: 600;
color:#9797c3;}

/*iniciar seción*/

.registrarse {margin-top: 1.5rem; letter-spacing: 0.2rem;
    text-align: center;
font-size: 0.8rem;
    font-weight: 600;
    padding-bottom: 1.2rem;
color: #fdb15b;
border-bottom:  0.05rem solid #fdb15b;
width: 20rem;}

.log {margin-top: 0.4rem;
    letter-spacing: 0.2rem;
    text-align: center;
font-size: 0.8rem;
    font-weight: 600;
    padding-bottom: 1.2rem;
color: #3da7b9;
border-bottom:  0.05rem solid #3da7b9;
width: 20rem;}

/*formulario datos*/

.titulo {letter-spacing: 0.2rem;
    text-align: center;
font-size: 0.7rem;
    font-weight: 700;
    padding-bottom: 1.2rem;
color: #fdb15b;}

.titulo2 {letter-spacing: 0.2rem;
    text-align: center;
font-size: 0.7rem;
    font-weight: 700;
    padding-bottom: 1.2rem;
color: #fa6f68;}



/*título*/
.h1-1 {margin: auto;
padding: 0rem;
max-width: 100%;
text-align: center;
color: #dbdbed;
    letter-spacing: -0.1rem;
font-size: 6rem;
    font-family:  'Abril Fatface', cursive;
 font-weight: 200;
    padding-bottom: 0.4rem;
}

h2{
    margin: auto;
padding: 0rem;
max-width: 100%;
text-align: center;
  font-family: 'Lato', sans-serif;
    letter-spacing: 0.3rem;
    font-size: 0.8rem;
    font-weight: 900;
    color:#645c8e;
}




.h2-2{
    margin: auto;
padding: 0rem;
max-width: 100%;
text-align: center;
  font-family: 'Lato', sans-serif;
    letter-spacing: 0.3rem;
    font-size: 1.2rem;
    font-weight: 900;
    color:#fbbf73;
}

/*formulario*/

.formulario {
    text-align: center;
    margin:  0rem auto;
    
    
}

.formulario .campo{
    margin-top: 0.5rem;
    align-content: center;
    text-align: center;
padding: 0rem;
      max-width: 100%;
    margin: 0rem auto;
    width:16.5rem; 
    border-radius: 1rem; 
    border: 0; 
    padding: 0.6rem; 
    background: #767693; 
color: white; 
    font-size: 0.7rem; 
    letter-spacing: 0.2rem; 
    font-weight: 500;}


.formulario .campo2{
    align-content: center;
    text-align: center;
padding: 0rem;
      max-width: 100%;
    margin: 0rem auto;
    width:7.5rem; 
    border-radius: 1rem; 
    border: 0; 
    padding: 0.6rem;
    padding-top: 0.7rem;
    background: #767693; 
color: white; 
    font-size: 0.7rem; 
    letter-spacing: 0.2rem; 
    font-weight: 500;}

.formulario .btn{ 
 background: #89cad5;
    border: 0;
    padding: 0.8rem;
    font-size: 0.7rem;
    letter-spacing: 0.2rem;
    width: 5rem;
    font-weight: 600;
    border-radius: 1.2rem;
    color: #fff;
    max-width: 100%;
    margin: 0rem auto;}

.formulario label {padding: 0rem;
    text-align: center;
    color:#75ccda;
    font-size: 0.7rem;
    letter-spacing: 0.2rem;
font-weight: 500;
       max-width: 100%;
    margin: 0rem auto;
}


.imagen-header{
  padding-top: 0.5rem;
    padding-bottom: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0rem auto;
    max-width: 100%;
    background-color: #f4f2fd;
  }

.imagen-2{
  padding-top: 0.8rem;
    padding-bottom: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0rem auto;
    max-width: 100%;
  }

/*links*/

a{color: white;
letter-spacing: 0.2rem;
    transition:all 0.4s ease-out; 
     -webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out; }



a:hover, a:active {
   color: #e2af80;
    transition:all 0.4s ease-out;  
     -webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out; }
    

/*centrado*/
.pagina{width: 100%; max-width: 30rem; margin: 0 auto; }

/*--------------titulo------------------*/

h1 {font-family:'Abril Fatface', cursive;
text-align: center;
    font-weight: 200;
    padding-top: 0.2rem;
font-size: 1.8rem;
    color: #423b63;}


.icono{ 
   padding-left: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0rem auto;
    margin-right: 0.9rem;
    max-width: 100%;
    margin-top:9rem;}


.bajada p{margin-top: 1rem; 
    color:#534d60;
letter-spacing:0.24rem;
font-size: 0.7rem;
text-align: center;
}

.bajada p strong{
    font-weight: 700;
color:#534d60;}

.subir{
    font-weight: 600;
    margin: 0rem auto;
    padding: 0;
    font-size: 0.7rem;
    letter-spacing: 0.2rem;
    color: #fff;
    text-decoration: none;
    text-align: center;}

a{text-decoration: none;
  }


ul li {list-style-type: none;
    text-decoration: none;
}

/*carga*/
.progress-bar {
    height: 0.9375rem;
    padding: 0.3125rem;
    width: 15rem;
    border: 0.01rem solid #ffc8c7;
    border-radius: 0.3rem;         
}

.progress-bar span {
  display: inline-block;
  height: 100%;
  border-radius: 0.1875rem;
  box-shadow: 0  0.0625rem 0 rgba(255, 255, 255, .5) inset;
  transition: width .4s ease-in-out; 
  background-color: #ccc;   
}

/**** GRADIENTS ****/

.orange span {
  background-color: #fa6f68;
  background-image: linear-gradient(top, #fa6f68, #fa6f68);  
}   


/**** RAYAS ****/
.stripes span {
  background-size: 1.875rem 1.875rem;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
    transparent 75%, transparent);            

  animation: animate-stripes 3s linear infinite;             
}

@keyframes animate-stripes {
  0% {background-position: 0 0;} 100% {background-position: 3.75rem 0;}
}

/**** BRILLO ****/
.shine span {
  position: relative;
}

.shine span::after {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  border-radius: 0.1875rem;
  animation: animate-shine 2s ease-out infinite;             
}

@keyframes animate-shine {
  0% {opacity: 0; width: 0;}
  50% {opacity: .5;}
  100% {opacity: 0; width: 95%;}
}

/**** GLOW ****/
.glow span {
  box-shadow: 0 0.3125rem 0.3125rem rgba(255, 255, 255, .7) inset, 0 -0.3125rem 0.3125rem  rgba(255, 255, 255, .7) inset;    
  animation: animate-glow 1s ease-out infinite;          
}

@keyframes animate-glow {
  0% { box-shadow: 0 0.3125rem 0.3125rem rgba(255, 255, 255, .7) inset, 0 -0.3125rem 0.3125rem rgba(255, 255, 255, .7) inset;} 
  50% { box-shadow: 0 0.3125rem 0.3125rem rgba(255, 255, 255, .3) inset, 0 -0.3125rem 0.3125rem rgba(255, 255, 255, .3) inset;} 
  100% { box-shadow: 0 0.3125rem 0.3125rem rgba(255, 255, 255, .7) inset, 0 -0.3125rem 0.3125rem rgba(255, 255, 255, .7) inset;}
}


/*scroll barra*/

/* hola qué tal */
::-webkit-scrollbar {
    width: 0.75rem;
    height: .5rem;
    margin-top: 1rem;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 .5rem rgba(0,0,0,0.3); 
    -webkit-border-radius: .5rem;
    border-radius: .5remp;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0.5rem;
    border-radius: 0.625rem;
    background: #312d3a; 
    -webkit-box-shadow: inset 0 0 .5rem rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}

/*pagina*/

*{margin: 0rem auto;
padding:0rem;
	font-family:'Montserrat', sans-serif;
    color:#65626b;}


footer{ font-size: 0.49rem;
    max-width: 100%;
    margin: 0rem auto;
    text-align: center;
text-transform: uppercase;
font-size: 0.4rem;
line-height: 0.8rem;
padding: 1rem;
font-weight: 700;
    color: #484450;
letter-spacing: 0.05rem;}

html, body{
      font-family: 'Lato', sans-serif; 
margin:0 auto;
padding:0;
background-attachment:fixed;
background-position:center center;
    background-color: #fff;
}

.pantalla{
    max-width: 30%;
    margin:0 auto;
padding:0;
}








/*barrita arriba*/


div#barra-lateral{
	position:inline;
	width:1.3rem;
	height:1.3rem;
	background-color:#413b63;
	overflow:hidden;
    -webkit-transition: width 0.9s cubic-bezier(0, 0.97, 0.99, 0.99);
}

div#barra-lateral:hover{
	width:100%;
}

div#logo-menu{
	width:1.3rem;
	height:1.3rem;
	margin:0.625rem;

}

div#contenedor-logos-primero{
	margin-top:-3.125rem;
    text-align: center;
    width: 100%;
}

div.contenedor-logos{
	margin-top:1.25rem;
	width:8.125rem;
	height:2.5rem;
}

div.logo{
      width: 1.2rem;
    height: 1.4rem;
    float: left;
    font-family:'Lato', sans-serif;
    font-weight:700;
    color: #fff;
    font-size: 1.1rem;
    margin-top: 0.6rem;
    padding: 0.05rem;
}

p.title-menu{
    line-height: 2.4rem;
    font-family: 'Lato', sans-serif;
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight:400;
    color: white;
    background-color: #413b63;
    max-width: 100%;
}

@media (max-width:30rem){
    .calendario {max-width: 30rem;}

.dentrocalendario{max-width: 30rem;}

.dentrocalendario .mas{max-width: 30rem;}

.dentrocalendario .mas2{max-width: 30rem;}
 .menu {max-width: 30rem;}
    
    .log {max-width: 15rem;}
    .registrarse{max-width: 15rem;}
    .formulario .campo {max-width: 15rem;}
    .aviso {max-width: 20rem;}
    .imagen{max-width: 30rem;}
    .h1-2 {font-size: 0.5rem;}

}