/*HOJA DE ESTILO PARA WEB*/
@font-face {
    font-family: 'entyporegular';
    src: url('../font/Entypo-webfont.eot');
    src: url('../font/Entypo-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Entypo-webfont.woff') format('woff'),
         url('../font/Entypo-webfont.ttf') format('truetype'),
         url('../font/Entypo-webfont.svg#entyporegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'roboto_slabbold';
    src: url('../font/RobotoSlab-Bold-webfont.eot');
    src: url('../font/RobotoSlab-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/RobotoSlab-Bold-webfont.woff') format('woff'),
         url('../font/RobotoSlab-Bold-webfont.ttf') format('truetype'),
         url('../font/RobotoSlab-Bold-webfont.svg#roboto_slabbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_slabregular';
    src: url('../font/RobotoSlab-Regular-webfont.eot');
    src: url('../font/RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/RobotoSlab-Regular-webfont.woff') format('woff'),
         url('../font/RobotoSlab-Regular-webfont.ttf') format('truetype'),
         url('../font/RobotoSlab-Regular-webfont.svg#roboto_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_slabthin';
    src: url('../font/RobotoSlab-Thin-webfont.eot');
    src: url('../font/RobotoSlab-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/RobotoSlab-Thin-webfont.woff') format('woff'),
         url('../font/RobotoSlab-Thin-webfont.ttf') format('truetype'),
         url('../font/RobotoSlab-Thin-webfont.svg#roboto_slabthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotothin';
    src: url('../font/Roboto-Thin-webfont.eot');
    src: url('../font/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Roboto-Thin-webfont.woff') format('woff'),
         url('../font/Roboto-Thin-webfont.ttf') format('truetype'),
         url('../font/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotomedium';
    src: url('../font/Roboto-Medium-webfont.eot');
    src: url('../font/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Roboto-Medium-webfont.woff') format('woff'),
         url('../font/Roboto-Medium-webfont.ttf') format('truetype'),
         url('../font/Roboto-Medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'roboto_slablight';
    src: url('../font/RobotoSlab-Light-webfont.eot');
    src: url('../font/RobotoSlab-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/RobotoSlab-Light-webfont.woff') format('woff'),
         url('../font/RobotoSlab-Light-webfont.ttf') format('truetype'),
         url('../font/RobotoSlab-Light-webfont.svg#roboto_slablight') format('svg');
    font-weight: normal;
    font-style: normal;

}
* {
    
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
}

body {
    font-size: 10px;
    font-family:;
    margin: 0;
    padding: 0;
    background-color: #ededec;
    width: 100vw;

}

a {
    text-decoration: none;
}

h2,
h3 {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}


img {
    max-width: 100%;
    height: auto;
}


#logo-ext img{
    display: block;
    height: 4.5em;
}

header{
   
    background-color: #ededec;
    box-shadow: 0 0.3em 1em 0.3em rgba(0, 0, 0, 0.2);
    padding: 1em;
    text-align: center;
    height: 5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 5;
    flex: 0 1 auto;
}
.navegador{
    display: flex;
    
    
}
.navegador li{
    float: left;
    margin: 0 4em;
    width: auto;
    padding: 0.5em;
    
}
.navegador li a, .btn{
    font-family: 'roboto_slabregular';
    font-size: 1.4em;
    color: #656565;  
}

.navegador li a, .btn:hover{
    color: #d101d1;
  

}
.navegador li a, .btn:active{
    color: #0381b5;   
    transform: scale(1.08);
}

main{
    padding: 0.5em;
    margin-top: 4.1em;
    
}

section {
    padding: 0.5em;
}


/* flexbox */

.contenedor {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;

}


/*FIN DE REGLAS GENERALES*/
/*HOME*/


.contenido{
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    z-index: 2;
    
}

.video{
   width: 100vw;
    display: flex;
    align-items: center;  
}

video{
   width: 100vw;
   min-width: 100%;
   min-height: 100%;
   margin: auto;
   opacity: 0.9; 
}
.txt{
    width: 100%;
    display: flex;
    position: absolute;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 20em auto;
   z-index: 4;
}
.fle{
    width: 7em;
    margin: 0;
    transform: rotate(90deg);
    cursor: pointer;
    padding-left: 1.5em;
}
.fle a{
    padding: 0;
    font-family: 'roboto_slablight';
    color: rgba(255, 255, 255, 0.7);
    font-size: 10em;
    text-align: center;
    
    margin: 0;
    
}
.parrafo .fle2 {
     width: 7em;
    margin: 0;
    transform: rotate(90deg);
    cursor: pointer;
    padding-left: 1.5em;
}
.parrafo .fle2 a{
    color:#656565;
    margin: auto;
    font-size: 10em;
  padding: 0;
    font-family: 'roboto_slablight';
    text-align: center;
}
h1{
    font-family: 'roboto_slablight';
    font-size: 6em;
    color: #ededec;
    text-align: center;
    width:  100%;
    margin: auto;
    text-shadow: 1px 1px 1px #606060;
}
.vervideo{
    
    font-family: 'roboto_slablight';
    font-size: 2.8em;
    text-align: center;
    padding: 0.1em;
    margin: auto;
    margin-top: 2em;
    margin-bottom: 0;
    background-color: rgba(0,0,0,0.9);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 0.4em;
    width: 7em;

}
.vervideo a{
    color: rgba(255, 255, 255, 0.7);
}
.video .vervideo:hover{
    color: aqua;
}
#paraque, .pasos{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 0.5em;
    margin: auto;
    padding: 0 3em;
}
#paraque>div{
    display: flex;
    align-content: center;
    justify-content: space-around;
    margin: 1em auto 0 auto;
    padding: 2em;
    
    
}
.titulo1 {
    width: 100%;
    text-align: center;
    font-size: 4em;
    letter-spacing: -0.05em;
    font-family: 'roboto_slabregular';
    padding: 0;
    padding-bottom: 0.1em;
    margin: 0.8em 1em 0.3em 1em;
}

.parrafo{
    width: 50%;
    padding-bottom: 3em;
}
.parrafo .titulo{
    font-size: 3em;
    letter-spacing: -0.05em;
    font-family: 'roboto_slabregular'; 
   
    padding: 0 0 0.4em 0;
}

.parrafo p{
    font-family: 'robotothin';
    font-size: 2em;
}
.pasos .parrafo{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: auto;
    flex-direction: row;
    flex-wrap: wrap;
    
}
.pasos .parrafo .titulo{
    width: 100%;
    display: block;
     margin: 1.4em;
    margin-left:  3.5em;
}
.pasos .parrafo>div{
    width: 25%;
    margin: 0 2em;
    display: flex;
    flex-wrap: wrap;
}
.pasos .parrafo div div{
     width: 80%;
    
}
.pasos .numero{
    font-family: 'roboto_slablight';
    font-size: 4em;
    width: 10%;
}
.pasos .subti{
    font-family: 'roboto_slablight';
    font-size: 3em;
    padding: 0;
   
}
.mob{
    width: 5%;
    margin-top: 2em; 
}
#mobile{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 29%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    
}
#mobile img{
    padding: 0;
    margin: 0;
    width: 100%;
}

#btn-sesion{
    display: none;
}

#fom-sesion{
    display: flex;
    flex-direction: column;
    top: 4em;
    right: 10em;
    padding: 0.2em;
    position: absolute;
    transition: all 1s;
    transform: translateY(-180%);
    width: 30em;
    z-index: 1;
     opacity: 0;
    }
    #btn-sesion:checked~#fom-sesion{
        transform: translateY(0%);
        opacity: 1;
        
    
    }
#cont-in{
    width: 100%;
    padding: 1em;
    margin:0;
    background-color: #ededec;
}
#fom-sesion input{
    width: 100%;
    margin: 0.3em 0;
    font-size: 1.08em;
    
}
.recor{
    width: 100%;
    height: auto;
    padding: 0.3em;
    display: flex;
    justify-content: center;
    align-items:center;  
    font-size: 1.3em;
    margin-top: 0.2em;
    color:#656565;
}
.recor #recordarme{
    margin:0 0.5em;
    padding: 0 ;
    width: 1em;

    
}
#olvide{
 color:blue;
 font-size: 1.1em; 
}

.form-btn a{
    display: flex;
    justify-content: center;
    padding: 0.5em;
    margin: 0;
    width: 100%;
    font-size: 1em;
}
.boton-ingresar {
    width: 100%;
    border-radius: 0.4em;
    box-shadow: 0px 2px 4px 0px;
    color: #656565;
    display: block;
    padding: 0.2em 1.5em;
    letter-spacing: 0.1em;
    text-align: center;
    height: 1.8em;
    cursor: pointer;
    font-family: 'robotothin';
}
.boton-ingresar:hover {
    background-color: #ff56aa;   
}
.boton-ingresar:active{
    transform: scale(1.08);
}
.descarga{
   
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 5em 3em 0 3em;
    background-color: black;
}
.mock{
    width: 60%;
    margin: auto;
    display: flex;
    
}

.codigo{
    display: flex;
    flex-direction: column;
    align-content: center;
    margin: auto;
    padding: 0;
    width: 30%;
}
.parrafo3{
    width: 100%;
    padding: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.parrafo3 *{
    width: 100%;
    padding: 0;
    margin: 0;
}
.qr{
    width: 50%;
    padding: 0;
    margin: auto;
}
.qr img{
    width: 100%;
    height: 100%;
}
.titulo3{
    width: 100%;
    text-align: center;
    font-size: 3em;
    letter-spacing: -0.05em;
    font-family: 'roboto_slabthin';
    padding-bottom:0.3em;
    padding-top: 0.3em;
    margin: auto;
    color: #ededec;
}
.codigo .titulo3:hover {
    color: #ff56aa;   
}
.codigo .titulo3:active{
    transform: scale(1.08);
     color: #0381b5;
}
/*fin de reglas para slider*/
/*FIN DE HOME*/