/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/


/* reset */

* {
    box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* start editing from here */

a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}


/* text align right */

.txt-lt {
    text-align: left;
}


/* text align left */

.txt-center {
    text-align: center;
}


/* text align center */

.float-rt {
    float: right;
}


/* float right */

.float-lt {
    float: left;
}


/* float left */

.clear {
    clear: both;
}


/* clear float */

.pos-relative {
    position: relative;
}


/* Position Relative */

.pos-absolute {
    position: absolute;
}


/* Position Absolute */

.vertical-base {
    vertical-align: baseline;
}


/* vertical align baseline */

.vertical-top {
    vertical-align: top;
}


/* vertical align top */

nav.vertical ul li {
    display: block;
}


/* vertical menu */

nav.horizontal ul li {
    display: inline-block;
}


/* horizontal menu */

img {
    max-width: 100%;
}


/*end reset*/

html,
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font-family: 'Source Sans Pro', sans-serif;
}

body a {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    text-decoration: none;
}

body a:hover {
    text-decoration: none;
}

body a:focus,
a:hover {
    text-decoration: none;
}

select,
input[type="email"],
input[type="text"],
input[type=password],
input[type="button"],
input[type="submit"],
textarea {
    font-family: 'Source Sans Pro', sans-serif;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
    letter-spacing: 1px;
}

p {
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
    font-family: 'Source Sans Pro', sans-serif;
}

ul {
    margin: 0;
    padding: 0;
}


/*-- //Reset-Code --*/


/*--background --*/

body {
    position: relative;
    background: url(../images/b1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    box-sizing: border-box;
    min-height: 100vh;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-attachment: fixed;
}

h1.header-w3ls {
    /*text-transform: capitalize;*/
    color: #ffffff;
    text-shadow: 2px 3px rgba(0, 0, 0, 0.42);
    font-family: serif;
}

.main-header div{
    /*border: 1px solid white;*/
}

.main-header img{
    padding: 10px 0 10px 0px;
}
.main-header #left-text{
    /*text-transform: capitalize;*/
    color: #ffffff;
    text-shadow: 2px 3px rgba(0, 0, 0, 0.42);
    font-family: serif;
    font-size: 1.8em;
    float: right;
    padding-top: 30px;
    /*padding-left: 1px;*/
}
.main-header #center-text{
    /*text-transform: capitalize;*/
    color: #ffffff;
    text-shadow: 2px 3px rgba(0, 0, 0, 0.42);
    font-family: serif;
    font-size: 2.5em;
    padding-top: 30px;
    text-align: center;
}

.main-header #right-text{
    text-transform: capitalize;
    color: #BC921C;
    text-shadow: 2px 3px rgba(0, 0, 0, 0.42);
    font-family: serif;
    font-size: 1em;
    padding-top: 40px;
    text-align: center;
}

.art-left-w3ls h2{
    text-transform: capitalize;
    color: #BC921C;
    text-shadow: 2px 3px rgba(0, 0, 0, 0.42);
}

.mid-class {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.art-right-w3ls {
    flex-basis: 60%;
    -webkit-flex-basis: 60%;
    box-sizing: border-box;
}

.art-left-w3ls {
    flex-basis: 40%;
    -webkit-flex-basis: 40%;
    box-sizing: border-box;
    /*min-height: 100vh;*/
    background: #122b40;
    box-sizing: border-box;
    margin: 10px;
}

.right-side-forget a, .w3layouts_more-buttn h3, .art-right-w3ls h2{
    color: white !important;
    text-shadow: 2px 2px 4px #000000;
}

.art-right-w3ls h1{
    color: white !important;
    text-shadow: 2px 2px 4px #000000;
    font-size: 40px;
    margin-bottom: 30px;
}


.form-left-to-w3l input[type="email"],
.form-left-to-w3l input[type="password"],
.form-left-to-w3l input[type="text"] {
    width: 100%;
    color: #000;
    outline: none;
    border: none;
    border-bottom: #BC921C 2px solid;
    -webkit-appearance: none;
    background: #ffffff96;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    box-sizing: border-box;
}



.icon {
    padding: 10px;
    background: #122b40;
    color: white;
    min-width: 50px;
    text-align: center;
}

.input-field {
    width: 100%;
    padding: 10px;
    outline: none;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: #000;
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: #000;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: #000;
}

.art-right-w3ls h2 {
    font-weight: 500;
    color: #ffffff;
}

#mensajes, #mensaje{
    font-size: 1.2em;
    display: none;
    /*color: darkred;*/
    color: white; 
    /* text-shadow: black 0.1em 0.1em 0.2em; */
    background-color: darkred;
    padding: 10px;
}

button[type=button], #entrar, button[type="submit"] {
    background: #122b40;
    outline: none;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    border: none;
    padding: 11px 20px;
    letter-spacing: 1px;
    text-transform: capitalize;
    cursor: pointer;
    transition: 0.5s all;
    margin: 0px;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    border-radius: 5px;
    opacity: 0.8;
}

button[type=button]:hover , #entrar:hover, button[type="submit"]:hover{
    opacity: 1;
}

.remenber-me,
a.for {
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
    text-transform: capitalize;
    font-weight: bold;
}

.remenber-me {
    padding-left: 22px;
}

.left-side-forget {
    float: left;
    position: relative;
}

.right-side-forget {
    float: right;
}

input.checked {
    display: inline-block;
    position: absolute;
    top: 5px;
    margin: 0px;
    cursor: pointer;
}

.w3layouts_more-buttn h3 {
    font-size: 18px;
    color: #fff;
    margin-top: 35px;
    font-weight: 500;
}

.w3layouts_more-buttn a {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
    text-transform: capitalize;
    display: inline-block;
    letter-spacing: 2px;
    outline: none;
}

.w3layouts_more-buttn span{
    background: linear-gradient(180deg, #d4a82e 0%, #BC921C 50%, #a67a0f 100%);
    padding: 15px;
    color: #FFFFFF;
    font-weight: bolder;
    font-size: 18px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4),
                0 2px 4px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.2);
    display: inline-block;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.w3layouts_more-buttn span:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45),
                0 3px 8px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.w3layouts_more-buttn span:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35),
                inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.textoDatosPersonales{
    font-size:30px;
    color:#0B1938;
    text-align:left;
    margin: 0px;
    display: inline-block;
    float: left;
    margin-top: 50px;
}

.tabla_reg{
    width:96%;
    margin:auto;
}

.tabla_reg2{
    width:950px;
    /*margin-left:5px; 	color:#0B1938; font-size:20px; font-weight:lighter;*/

}

.tabla_reg2 b{
    color:#0B1938; font-size:20px; font-weight:lighter;

}	

.tabla_reg input{
    height:30px;
    width:300px;
    font-size:16px;
    /*border:3px solid black;*/
    text-align:center;
    /*font-weight:bold;*/ 
    color: #444;
}

.tabla_reg2 select{
    height:30px;
    width:250px; 
    font-size:16px; 
    /*border:3px solid black;*/
    text-align:left; 
    /*font-weight:bold;*/ 
    color: #444;
    /*font-family:SegoeWP;*/
}	

.tabla_reg select{
    height:30px; 
    width:300px; 
    font-size:16px; 
    /*border:3px solid black;*/ 
    text-align:left; 
    /*font-weight:bold;*/
    color: #444;
    /*font-family:SegoeWP;*/
}	

.tabla_reg b{
    color:#0B1938; font-size:20px; font-weight:lighter;
}	

/*.regi_td{
        width:33%;
        text-align:left;
        }*/

.regi_td2{
    width:50%;

}

.regi2{
    width:500px; 
    text-align:center;
    -moz-box-shadow: 5px 5px 5px #ccc;
    -webkit-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px #ccc;
    padding-top:5px;
    padding-bottom:5px;
    border-radius: 10px;
    margin-right:auto; 
    margin-left:auto;
    color:white;
}

.tabla_reg3{
    width:900px;
    margin-left:5px;

}
#calle, #numero_casa_aspir,#numero_interior_casa_aspir,#cruzamientos_aspir{
    width:150px;
}

.checks_examen{
    width:24px !important;
    height:15px !important;
}

.right-side-forget img{
    width: 20px;
    vertical-align: middle !important;
}

/* Tooltip container */
.tooltip2 {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip2 .tooltiptext {
    top: -35px;
    left: 150%;
    visibility: hidden;
    width: 200px;
    background-color: white;
    color: #122b40;
    text-align: justify;
    padding: 5px 0;
    border-radius: 6px;
    font-size: .8em;
    padding: 10px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext {
    visibility: visible;
}

.tooltip2 .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent white transparent transparent;
}

#divBotonSalir{
    right:0;
    top: 50%;
    position: fixed;
    border: 2px solid #ccc;
    width:80px;
    height:100px;
    background-color:white;
    z-index:10000;
    border-radius: 25px 0 25px 25px;
}

#tusuario, #tpass{
    margin: 10px 0;
    font-weight: 600;
    font-size:20px; 
    margin-right: 5px;
    width: 100%;  
    text-align: center;
}
#susuario, #spass{
    font-size:25px;
    font-weight: 600;
    border-radius:5px;
    background-color:#C90; 
    padding: 0 10px;                    
}
#tprograma, #tcoord, #ttelefono, #tcorreo {
    margin: 10px 0;
    font-weight: 300;
    font-size:20px; 
    margin-right: 5px;
    width: 100%;  
    text-align: center;
}
#programa, #coord, #telefono, #correo{
    font-size:20px;
    font-weight: 600;
    border-radius:5px;
    /*background-color:#C90;*/ 
    padding: 0 10px;                    
}

#text1{
    margin-top: 20px;
}

.center-text{
    text-align: center;
}

/* @group Blink */

.blink {
    font-size: 20px;
    -webkit-animation: blink 1.5s linear infinite;
    -moz-animation: blink 1.5s linear infinite;
    -ms-animation: blink 1.5s linear infinite;
    -o-animation: blink 1.5s linear infinite;
    animation: blink 1.5s linear infinite;
}

@-webkit-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-moz-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-ms-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-o-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

/* @end */

#encuestafrm{
    text-align: center;
}

#encuestafrm select{
    height:40px; 
    width:300px; 
    font-size:16px; 
    text-align:left; 
    color: #444;
}


/*-- modal loader --*/
#wait {
    display: none;
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 20% 0; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 3; /* Add a z-index if needed */
    left: 0;  /*Center the snackbar */
    top: 0;  /*30px from the bottom */
    background-color: rgba(51, 51, 51, 0.4);
    width: 100%;
    height: 100%;
}


/**-- Hide and show side nav --/

/* Style the links inside the sidenav */
#mySidenav a {
    position: fixed; /* Position them relative to the browser window */  
    left: -95px; /* Position them outside of the screen */
    transition: 0.3s; /* Add transition on hover */
    padding: 15px; /* 15px padding */
    width: 140px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
    font-size: 20px; /* Increase font size */
    color: white; /* White text color */
    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
    left: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
/*#about {
  top: 20px;
  background-color: #4CAF50;
}

#blog {
  top: 80px;
  background-color: #2196F3;  Blue 
}

#projects {
  top: 140px;
  background-color: #f44336;  Red 
}*/

#contact {
    top: 300px;
    background-color: goldenrod; /* Light Black */
}


/**-- upper.php--*/
#upload-wrapper {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    /*margin-top: 50px;*/
    background: #F5F5F5;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 1px 1px 3px #AAA;
    margin-bottom: 50px;
}
#upload-wrapper h3 {
    padding: 0px 0px 10px 0px;
    margin: 0px 0px 20px 0px;
    margin-top: -30px;
    border-bottom: 1px dotted #DDD;
}
#upload-wrapper input[type=file] {
    border: 1px solid #DDD;
    padding: 6px;
    background: #FFF;
    border-radius: 5px;
}
#upload-wrapper #submit-btn {
    border: none;
    padding: 10px;
    background: #61BAE4;
    border-radius: 5px;
    color: #FFF;
    cursor: pointer;
}

#output{
    padding: 5px;
    font-size: 12px;
}
#output img {
    border: 1px solid #DDD;
    padding: 5px;
}

.textoFoto1, .textoFoto2, .textoFoto0{
    font-size: 18px;
    text-align: center;
    margin-top: 0px;
}

.textoFoto0{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    margin-top: 0px;
}

#fotosubida{
    margin-bottom: 30px;
}


/*-- Aviso foto--*/
.fotoAviso{
    margin: auto;
    width: 290px;
    height: 350px;
    text-align: center;
}

.foto{
    margin: 20px;
}

.textoFoto{
    font-size: xx-large;    
}

.textoAvisoFoto{
    padding:0 100px;
    text-align: justify;    
}

/* popup */

.popup-effect {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(152, 152, 152, 0.7);
    transition: opacity 0ms;
    visibility: hidden;
    opacity: 0;
    z-index: 99;
}

.popup-effect:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    background: #eaeaeabf;
    border-radius: 4px;
    max-width: 430px;
    position: relative;
    margin: 11em auto;
    padding: 3em 2em;
    z-index: 999;
    text-align: center;
}

.popup .close {
    position: absolute;
    top: 5px;
    right: 15px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}

.popup .close:hover {
    color: #686de0;
}


/* //popup */

.bottem-wthree-footer {
    position: absolute;
    bottom: 52px;
    width: 100%;
}

.bottem-wthree-footer p {
    text-align: center;
    font-size: 14px;
    color: #fff;
    letter-spacing: 2px;
}

.bottem-wthree-footer p a {
    color: #ff5e00;
    font-size: 14px;
}

.bottem-wthree-footer p a:hover {
    color: #fff;
}


/*AVISO DE PRIVACIDAD*/
.contenedor-principal{
    /*border: 1px solid black;*/
    width: 100%;
    background-color:  whitesmoke;
    min-height: 360px;
    -webkit-box-shadow: -7px -5px 12px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: -7px -5px 12px -1px rgba(0,0,0,0.75);
    box-shadow: -7px -5px 12px -1px rgba(0,0,0,0.75);
    margin-bottom: 40px;
    padding: 30px;
    text-align: justify;
}

.tituloContenido{
    padding:0px 10px 10px 10px;
    color:#0B1938;
    font-size:30px;
    text-align: center;
}

.img-flag{
    text-align: center;
}

.img-flag img{
    cursor: pointer;
}
#mex{
    width:200px; height:200px; background:none; background-image:url(../../img/mex.png); font-size:0px; 
    cursor: pointer;
}	

#mex:hover, #extra:hover{
    border:3px solid #e87b10; border-radius:20px;
}

#extra{
    width:213px; height:213px; background:none;  background-image:url(../../img/band.png); font-size:0px;  margin-left:60px;
    cursor: pointer;
}

#form-nac{
    text-align: center;
}

#textoMexicano{
    margin-left:-20px;
    color:#0B1938;
    font-size:25px;
    font-weight:lighter; 
}

#textoExtranjero{
    margin-left:30px;
    color:#0B1938;
    font-size:25px;
    font-weight:lighter;
}

#cualseleccionar{
    cursor: pointer;
    background-color: navy;
    padding: 5px;
    color: white;
    font-weight: bolder;
    width: 200px;
    margin: auto;
    border-radius:5px;
    text-align: center;
}

#cualseleccionar:hover{
    /*cursor: pointer;*/
    background-color: #BC921C;
    /*padding: 5px;*/
    color: white;
    /*font-weight: bolder;*/
    /*    width: 150px;
        margin: auto;
        border-radius:5px;*/
}

/* ESTILOS PARA LA ENCUESTA SOCIOECONÓMICA */
.li_encuestalic, .text-subsection{
    font-size: .9em;
}

/*ESTILOS PARA LA PÁGINA QUE GENERA EL QR DEL COMPROBANTE DE REGISTRO*/

.main{
    padding: 0px; 
}

.cardAspir{
    position: relative; 
    margin-top: 10px; 
    margin-bottom: 0px; 
    padding: 5px; 
    padding-bottom: 0px;
    text-align: center; 
    font-size: 1.3em; 
    border: 5px solid lightgray;
}

.hr{
    margin-top: 5px; 
    margin-bottom: 15px; 
    border-color: lightgray;
}

#nombreAspir{
    font-size: .95em;
}

#imgAspir{
    width:70%; 
    margin-top: 10px;
}

#escudoUady{
    position: absolute;
    top: 20px;
    left: 55px;
    opacity: .5;
}


/*FOOTER*/
footer{
    width: 100%;
}
footer p{
    text-align: center;
}


/*--responsive--*/

@media(max-width:1920px) {
    .form-left-to-w3l input[type="email"],
    .form-left-to-w3l input[type="password"],
    .form-left-to-w3l input[type="text"] {
        font-size: 16px;
        padding: 1em 1em;
        margin: 0px 0px 30px;
    }
    .art-right-w3ls {
        padding: 6em 24em 0em 4em;
    }
    .art-left-w3ls {
        padding: 5.5em 5em 31em;
    }
    .art-right-w3ls h2 {
        font-size: 30px;
        margin-bottom: 0px;
    }
    h1.header-w3ls {
        font-size: 55px;
        letter-spacing: 3px;
    }
}

@media(max-width:1680px) {
    h1.header-w3ls {
        font-size: 53px;
    }
    .art-right-w3ls h2 {
        font-size: 28px;
    }
    .form-left-to-w3l input[type="email"],
    .form-left-to-w3l input[type="password"],
    .form-left-to-w3l input[type="text"] {
        font-size: 15px;
        margin: 0px 0px 26px;
    }
}

@media(max-width:1600px) {
    .art-right-w3ls {
        padding: 12em 24em 8em 4em;
    }
    .art-left-w3ls {
        padding: 20em 5em 21em;
    }
    h1.header-w3ls {
        font-size: 50px;
        letter-spacing: 3px;
        line-height: 66px;
    }
    .form-left-to-w3l input[type="email"],
    .form-left-to-w3l input[type="password"],
    .form-left-to-w3l input[type="text"] {
        font-size: 18px;
        padding: .5em 1em;
        margin: 0px 0px 10px;
    }
    .margin-zero input[type="password"] {
        margin: 0px !important;
    }
    .art-right-w3ls h2 {
        font-size: 28px;
        margin-bottom: 47px;
    }
}

@media(max-width:1440px) {
    .art-left-w3ls {
        padding: 3em 4em 8em;
    }
    .art-right-w3ls {
        padding: 2em 10em 2em 4em;
    }
    h1.header-w3ls {
        font-size: 48px;
    }
    .art-right-w3ls h2 {
        font-size: 26px;
        margin-bottom: 20px;
    }
}

@media(max-width:1366px) {
    button[type=button], #entrar, button[type="submit"] {
        margin: 10px 0px 0px;
    }
    .w3layouts_more-buttn h3 {
        font-size: 17px;
        margin-top: 10px;
    }
    .popup {
        margin: 8em auto;
    }
}

@media(max-width:1280px) {
    .art-left-w3ls {
        padding: 11em 3em 30.7em;
    }
    .art-left-w3ls {
        padding: 10em 3em 19.2em;
    }
    h1.header-w3ls {
        font-size: 46px;
        letter-spacing: 2px;
    }
}

@media(max-width:1080px) {
    .art-left-w3ls {
        order: 1;
        padding: 1.5em 3em 1.5em;
        text-align: center;
        min-height: 0vh;
    }
    .mid-class {
        flex-direction: column;
    }
    .art-right-w3ls {
        order: 2;
        padding: 2em 27em 2em 3em;
    }
    button[type=button], #entrar, button[type="submit"] {
        margin: 46px 0px 0px;
    }
    .art-right-w3ls h2 {
        font-size: 24px;
        margin-bottom: 41px;
    }
    .bottem-wthree-footer {
        bottom: 30px;
    }
}

@media(max-width:1050px) {
    h1.header-w3ls {
        font-size: 44px;
    }
    .w3layouts_more-buttn h3 {
        font-size: 16px;
        margin-top: 31px;
    }
}

@media(max-width:1024px) {
    .art-right-w3ls {
        padding: 3em 27em 6em 4em;
    }
    .popup {
        margin: 3em auto;
    }
    .form-left-to-w3l input[type="email"],
    .form-left-to-w3l input[type="password"],
    .form-left-to-w3l input[type="text"] {
        padding: .7em .9em;
        margin: 0px 0px 22px;
    }
}

@media(max-width:991px) {
    h1.header-w3ls {
        font-size: 41px;
        line-height: 63px;
    }
    button[type=button], #entrar, button[type="submit"] {
        margin: 42px 0px 0px;
    }
}

@media(max-width:900px) {
    .form-left-to-w3l input[type="email"],
    .form-left-to-w3l input[type="password"],
    .form-left-to-w3l input[type="text"] {
        padding: .7em .7em;
    }
    .art-right-w3ls h2 {
        margin-bottom: 36px;
    }
}

@media(max-width:800px) {
    .art-right-w3ls {
        padding: 3em 19em 6em 4em;
    }
    h1.header-w3ls {
        font-size: 39px;
        line-height: 40px;
        letter-spacing: 1px;
    }
}

@media(max-width:768px) {
    .w3layouts_more-buttn h3 {
        font-size: 15px;
        margin-top: 28px;
    }
}

@media(max-width:767px) {
    button[type=button] , #entrar, button[type="submit"]{
        padding: 10px 18px;
    }
    h1.header-w3ls {
        font-size: 37px;
    }
}

@media(max-width:736px) {
    .form-left-to-w3l input[type="email"],
    .form-left-to-w3l input[type="password"],
    .form-left-to-w3l input[type="text"] {
        margin: 0px 0px 20px;
    }
    .bottem-wthree-footer p {
        letter-spacing: 1px;
    }
}

@media(max-width:667px) {
    .art-right-w3ls {
        padding: 3em 13em 6em 3em;
    }
    .art-left-w3ls {
        padding: 1.2em 3em 1.2em;
    }
}

@media(max-width:640px) {
    h1.header-w3ls {
        font-size: 35px;
    }
    .w3layouts_more-buttn h3 {
        margin-top: 25px;
    }
}

@media(max-width:600px) {
    .art-right-w3ls {
        padding: 3em 3em 6em 3em;
    }
    .art-right-w3ls h2 {
        font-size: 23px;
    }
}

@media(max-width:568px) {
    .form-left-to-w3l input[type="email"],
    .form-left-to-w3l input[type="password"],
    .form-left-to-w3l input[type="text"] {
        margin: 0px 0px 17px;
    }
}

@media(max-width:480px) {
    .bottem-wthree-footer p {
        line-height: 28px;
        padding: 0px 10px;
    }
    .art-left-w3ls {
        padding: 1.2em 1em 1.2em;
    }
    .art-right-w3ls {
        padding: 2.5em 6em 5em 3em;
    }
    button[type=button], #entrar, button[type="submit"] {
        margin: 37px 0px 0px;
    }
    .popup {
        max-width: 350px;
    }
    h1.header-w3ls {
        line-height: 54px;
    }
}

@media(max-width:440px) {
    h1.header-w3ls {
        font-size: 32px;
    }
    .art-right-w3ls h2 {
        margin-bottom: 31px;
    }
}

@media(max-width:414px) {
    .art-right-w3ls {
        padding: 2.5em 4em 4em 2em;
    }
    h1.header-w3ls {
        line-height: 41px;
        font-size: 30px;
    }
    .popup {
        max-width: 296px;
    }
}

@media(max-width:384px) {
    h1.header-w3ls {
        line-height: 46px;
        font-size: 28px;
    }
    .popup {
        max-width: 267px;
    }
}

@media(max-width:375px) {
    .art-right-w3ls h2 {
        font-size: 21px;
    }
}

@media(max-width:320px) {
    h1.header-w3ls {
        line-height: 42px;
    }
    .art-right-w3ls {
        padding: 2.5em 2em 4em 1em;
    }
    .popup {
        max-width: 239px;
        padding: 3em 1.5em;
    }
}


/*--//responsive--*/

/* reCAPTCHA invisible: badge por encima del cuadro azul */
.grecaptcha-badge {
    z-index: 99999 !important;
}