@import url('../../css');

body{margin:0px; font-family: 'Montserrat', sans-serif;background-color:#F2F2F2 }
a{text-decoration: none; color:white}

.gsc-input-box  { border: none!important;outline: none;}
.gsc-input-box-hover{ border: none!important;outline: none;}
.cse .gsc-control-cse, .gsc-control-cse {padding:2px!important;}

input[type=submit] { background-color:#2C77B2; color: #fff; border:none; width:150px; height: 30px; border-radius:5px;}
/*-------------------------------------------------------
Estilos para pantallas entre 1025 y 1280 pixels;
---------------------------------------------------------*/
@media screen and  (min-width: 1025px) /* and (max-width: 1280px) */
{
/* Encabezado*/
.centrado{ width:1100px; margin: 0 auto; }
.barraPrincipal{color:#fff; position:relative; background-color: #1B1464}
.barraPrincipal .logoSA{width: 150px; height:150px; background-color: #1B1464; position: absolute; left:80px; z-index:1000; }
.barraPrincipal .logoSA img{ margin-left:25px; margin-top:5px; height:140px;  }
.contenedorMenuP{ margin: 0 26.7%; width:650px; overflow: auto;}
.menuPrincipal{ margin: 0px; padding:0px; list-style: none}
.menuPrincipal li{float: left; padding: 10px 20px}
.menuPrincipal li a{text-decoration: none; color: #fff;  font-size: 7.5pt;}
.menuPrincipal li a:hover{color: #29AAE1; }
.botonMenuMovil{display:none}
.barraSecundaria{ background-color: #fff; height: 70px;}
.barraSecundaria .logoAcademica { float:right; margin-right:80px; margin-top:15px;}
.barraSecundaria .logoAcademica img { width:240px;  }
/* Cuerpo */
#promocion{background-color: #fff; padding:30px 75px; position:relative;}
#promocion .contenedorBanners{width:66%; overflow: auto }
#promocion .contenedorBanners div{ float: left; width: 288px;font-size: 8pt;}
/*#promocion .contenedorBanners div:first-child{ margin-right: 20px;}*/
#promocion .contenedorBanners div:nth-child(odd){ margin-right: 20px;}
#promocion .contenedorBanners .titulo{ font-weight: bold; font-size: 10pt; padding:10px 0px}

#promocion .contenedorBanners .bannerLargo { margin-top:20px; width:50%    }

#promocion .contenedorAreas{ width: 330px; height:500px; background-color:#E5E5E5; position: absolute; top:30px; left:700px; padding:10px 20px;  }
#promocion .contenedorAreas .titulo{font-weight: bold; font-size: 15pt; color:#666; border-bottom: #666 1px solid; padding-bottom:5px;}
#promocion .contenedorAreas .areas .area {margin-top:10px;overflow: auto}
#promocion .contenedorAreas .areas .area .logoArea img{width:40px;}
#promocion .contenedorAreas .areas .area .logoArea{float:left; width:40px; margin-right:20px;}
#promocion .contenedorAreas .areas .area .infoArea{float:left; width:200px;}
#promocion .contenedorAreas .areas .area .infoArea .tituloArea{font-weight: bold;font-size:9pt; text-transform: uppercase}
#promocion .contenedorAreas .areas .area .infoArea .descripcionArea{font-size:08pt; margin-top:5px}

#promocion .contenedorYT{width: 330px; height: 180px; background-color: #E5E5E5; position: absolute; top: 550px; left: 700px}
/* Eventos */
#eventos{ background-color: #989898; padding:30px 75px;}
#eventos .contenedorEventos{width:66%; overflow: auto }
#eventos .contenedorEventos .titulo {color: #fff; font-weight: bolder; font-size: 15pt; margin-bottom:20px;}
#eventos .contenedorEventos .evento{width:280px; overflow: auto; float: left; margin-bottom:30px;margin-right: 30px; }
#eventos .contenedorEventos .evento .fecha{ width:50px; margin-right:10px; float: left; height: 114px;}
#eventos .contenedorEventos .evento .dia{background-color: #fff; padding:10px; font-size: 19pt; font-weight: bold; color:#989898}
#eventos .contenedorEventos .evento .mes{color: #fff; padding:5px 0px; text-align: center;font-size: 10pt; font-weight: bold; text-transform: uppercase }
#eventos .contenedorEventos .evento .info .titulo{ color: #fff; font-weight: bolder; font-size: 10pt;margin-bottom: 10px;}
#eventos .contenedorEventos .evento .info .titulo a { color:#fff; text-decoration:none    }
#eventos .contenedorEventos .evento .info .descripcion{ color: #fff;  font-size: 9pt;margin-bottom: 15px;}
#eventos .contenedorEventos .evento .info .modalidad{ color: #fff;  font-size: 7pt;}
#eventos .masEventos{float:right; margin-right:50px;  color:#fff; text-transform: uppercase; font-size: 10pt; }
#eventos .masEventos a{text-decoration: none; color:white}
/*Suscripción y redes socaiales*/
#registro {padding: 30px 70px; background-color: #fff; overflow: auto}
#registro div{float:left}
#registro .registro{ width: 790px; color: #666; font-size: 10pt; font-weight: bold; }
#registro .registro .formulario{ overflow: auto; margin-top:20px;}
#registro .registro .formulario div{float:left; margin-right:20px;}
#registro .registro .formulario input[type=email]{background-color: #E5E5E5; border: none; padding:7px; width:250px; height:50px; }
#registro .registro .formulario input[type=submit] {height: 50px;    }

#registro .registro .formulario .g-recaptcha {transform:scale(0.7);-webkit-transform:scale(0.7);transform-origin:0 0;-webkit-transform-origin:0 0;        }
#registro .registro .formulario .contenedorBoton{position:relative; left:-110px}
#registro .redesSociales{ width: 150px; height:50px; padding:30px 0px}
#registro .redesSociales img{width: 45px}
/* Pie de página */
footer{ background-color: #333333; color: #fff; }
.pie{ padding:40px 65px; overflow:auto}
.pie .contenedorTexto{ width: 250px; FLOAT:LEFT; margin-right:0px; }
.pie .texto{font-size: 7pt; font-weight: bold}
.pie .titulo{ border-bottom: 3px #29AAE1 solid; font-size: 8pt; font-weight: bolder; margin-bottom:5px; width:150px; margin-bottom:15px; padding-bottom:5px;}
.pie .logoSAME{width:295px; float: left;}
}

/*-------------------------------------------------------
Estilos para pantallas entre 680 y 1024 pixels;
---------------------------------------------------------*/
@media screen and  (min-width: 681px)  and (max-width: 1024px) 
{
/*Encabezado*/
.centrado{ width:100%; margin: 0 auto; }
.barraPrincipal{color:#fff; position:relative; background-color: #1B1464}
.barraPrincipal .logoSA{width: 150px; height:150px; background-color: #1B1464; position: absolute; left:30px; z-index:1000; }
.barraPrincipal .logoSA img{margin-left:25px; margin-top:5px;  height:140px;  }
.contenedorMenuP{ margin: 0 30%; width:470px; overflow: auto;}
.menuPrincipal{ margin: 0px; padding:0px; list-style: none}
.menuPrincipal li{float: left; padding: 10px 5px}
.menuPrincipal li a{text-decoration: none; color: #fff; font-size: 7.5pt;}
.menuPrincipal li a:hover{color: #29AAE1; }
.botonMenuMovil{display:none}
.barraSecundaria{ background-color: #fff;  height: 70px;}
.barraSecundaria .logoAcademica { float:right; margin-right:80px; margin-top:15px;}
.barraSecundaria .logoAcademica img { width:240px;  }
/* Cuerpo */
#promocion{background-color: #fff; padding:30px 20px; overflow:auto}
#promocion .contenedorBanners{width:50%; overflow: auto; float:left }
#promocion .contenedorBanners div{ width:300px; font-size: 8pt; margin:0 auto;}
#promocion .contenedorBanners .titulo{ font-weight: bold; font-size: 10pt; padding:10px 0px}

#promocion .contenedorBanners .bannerLargo { width:300px;  }
#promocion .contenedorBanners .bannerLargo a img { width:300px; margin-top:20px;    }

#promocion .contenedorAreas{ width: 330px; height:440px; background-color:#E5E5E5; float:right; padding:10px 20px;  }
#promocion .contenedorAreas .titulo{font-weight: bold; font-size: 15pt; color:#666; border-bottom: #666 1px solid; padding-bottom:5px;}
#promocion .contenedorAreas .areas .area {margin-top:10px;overflow: auto}
#promocion .contenedorAreas .areas .area .logoArea img{width:40px;}
#promocion .contenedorAreas .areas .area .logoArea{float:left; width:40px; margin-right:20px;}
#promocion .contenedorAreas .areas .area .infoArea{float:left; width:200px;}
#promocion .contenedorAreas .areas .area .infoArea .tituloArea{font-weight: bold;font-size:9pt; text-transform: uppercase}
#promocion .contenedorAreas .areas .area .infoArea .descripcionArea{font-size:08pt; margin-top:5px}

#promocion .contenedorYT{width: 330px; height: 180px; background-color: #E5E5E5; float: right; margin-top:20px;}
/* Eventos */
#eventos{ background-color: #989898; padding:30px 30px;}
#eventos .contenedorEventos{width:100%; overflow: auto }
#eventos .contenedorEventos .titulo {color: #fff; font-weight: bolder; font-size: 15pt; margin-bottom:20px;}
#eventos .contenedorEventos .evento{width:45%; overflow: auto; float: left; margin-bottom:60px; height:150px; }
/*#eventos .contenedorEventos .evento:nth-child(even){margin-right: 50px;}*/
#eventos .contenedorEventos .evento{margin-right: 20px;}
#eventos .contenedorEventos .evento .fecha{ width:50px; margin-right:10px; float: left; height: 150px;}
#eventos .contenedorEventos .evento .dia{background-color: #fff; padding:10px; font-size: 19pt; font-weight: bold; color:#989898}
#eventos .contenedorEventos .evento .mes{color: #fff; padding:5px 0px; text-align: center;font-size: 10pt; font-weight: bold; text-transform: uppercase }
#eventos .contenedorEventos .evento .info .titulo{ color: #fff; font-weight: bolder; font-size: 10pt;margin-bottom: 10px;}
#eventos .contenedorEventos .evento .info .titulo a { color:#fff; text-decoration:none    }
#eventos .contenedorEventos .evento .info .descripcion{ color: #fff;  font-size: 9pt;margin-bottom: 15px;}
#eventos .contenedorEventos .evento .info .modalidad{ color: #fff;  font-size: 7pt;}
#eventos .masEventos{float:right;  color:#fff; text-transform: uppercase; font-size: 10pt; width: 100%;}
#eventos .masEventos a{text-decoration: none; color:white}
/*Suscripción y redes socaiales*/
#registro {padding: 30px 20px; background-color: #fff; overflow: auto}
#registro .registro{  color: #666; font-size: 10pt; font-weight: bold; }
#registro .registro .formulario{ overflow: auto; margin-top:20px;}
#registro .registro .formulario div{margin:0 auto; width: 300px;}
#registro .registro .formulario input[type=email]{background-color: #E5E5E5; border: none; padding:7px; width:300px; }
input[type=submit] { width:300px;}
#registro .registro .formulario .g-recaptcha {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; margin-top:10px;       }
#registro .registro .formulario .contenedorBoton{width:300px;}
#registro .redesSociales{ width: 150px; height:50px; margin: 20px auto;}
#registro .redesSociales img{width: 45px}
/* Pie de página */
footer{ background-color: #333333; color: #fff; }
.pie{ padding:40px 65px; overflow:auto}
.pie .contenedorTexto{ width: 250px; FLOAT:LEFT; margin-right:20px; }
.pie .texto{font-size: 7pt; font-weight: bold}
.pie .titulo{ border-bottom: 3px #29AAE1 solid; font-size: 8pt; font-weight: bolder; margin-bottom:5px; width:150px; margin-bottom:15px; padding-bottom:5px;}
.pie .logoSAME{width:200px; height: 76; float:left; margin-top:20px;}
.pie .logoSAME img{width: 200px;}
}

/*-------------------------------------------------------
Estilos para pantallas entre 1 y 679 pixels;
---------------------------------------------------------*/
@media screen and  (min-width: 0px)  and (max-width: 680px) 
{
.centrado{ width:100%; margin: 0 auto; }
.barraPrincipal{color:#fff; position:relative; background-color: #1B1464; height: 39px;}
.barraPrincipal .logoSA{width: 100px; height:120px; background-color: #1B1464; position: absolute; left:20px; z-index:1000; }
.barraPrincipal .logoSA img{ width: 80px; margin-left: 10px; margin-top:10px; }
.contenedorMenuP{display: none}
.barraPrincipal .menuMovil{float: right;}
#menuResponsivo{display:none}
.iconoMenu{width:30px; height:26px; float:right; margin-top:5px;margin-right:15px;}
.iconoMenu:before{position: relative;top: 5px; left:5px; display: block;height: 2px;width: 20px;border-top: 1px solid #dddddd;background: #dddddd;content: '';}
.iconoMenu:after{position: relative;top: 10px; left:5px; display: block;height: 4px;width: 20px;border-top: 3px solid #dddddd;border-bottom: 3px solid #dddddd;content: '';}
.menuMovil{position:absolute; top:0px; left: 0; width: 100%; height: 100vh; background: rgba(51,51,51,0.9); transition: all 0.5s; transform: translateX(-100%);z-index:10000}
.menuMovil a{display: block; color:#fff; height: 50px;text-decoration: none; padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.3); text-align: right;}
.menuMovil a:hover{background: rgba(255,255,255,0.3)}
#menuResponsivo:checked ~ .menuMovil{transform: translateX(-15%) }
.barraSecundaria{ background-color: #fff;  height: 45px;}
.barraSecundaria .logoAcademica { float:right; margin-right:20px; margin-top:10px;}
.barraSecundaria .logoAcademica img { width:150px;  }

/* Cuerpo */
#promocion{background-color: #fff; padding:30px 20px; overflow:auto}
#promocion .contenedorBanners{width:300px; overflow: auto; margin:0 auto;}
#promocion .contenedorBanners div{ width:300px; font-size: 8pt; margin:10px auto;}
#promocion .contenedorBanners .titulo{ font-weight: bold; font-size: 10pt; padding:10px 0px}

#promocion .contenedorBanners .bannerLargo { width:300px;  }
#promocion .contenedorBanners .bannerLargo a img { width:300px; margin-top:20px;    }

#promocion .contenedorAreas{ width: 330px; height:450px; background-color:#E5E5E5; padding:10px 20px; margin:0 auto }
#promocion .contenedorAreas .titulo{font-weight: bold; font-size: 15pt; color:#666; border-bottom: #666 1px solid; padding-bottom:5px;}
#promocion .contenedorAreas .areas .area {margin-top:10px;overflow: auto}
#promocion .contenedorAreas .areas .area .logoArea img{width:40px;}
#promocion .contenedorAreas .areas .area .logoArea{float:left; width:40px; margin-right:20px;}
#promocion .contenedorAreas .areas .area .infoArea{float:left; width:200px;}
#promocion .contenedorAreas .areas .area .infoArea .tituloArea{font-weight: bold;font-size:9pt; text-transform: uppercase}
#promocion .contenedorAreas .areas .area .infoArea .descripcionArea{font-size:08pt; margin-top:5px}

#promocion .contenedorYT{width: 330px; height: 180px; background-color: #E5E5E5;  margin:20px auto;}
/* Eventos */
#eventos{ background-color: #989898; padding:30px 15px;}
#eventos .contenedorEventos{width:100%; overflow: auto }
#eventos .contenedorEventos .titulo {color: #fff; font-weight: bolder; font-size: 15pt; margin-bottom:20px;}
#eventos .contenedorEventos .evento{width:280px; overflow: auto; float: left; margin-bottom:60px; }
/*#eventos .contenedorEventos .evento:nth-child(even){margin-right: 50px;}*/
#eventos .contenedorEventos .evento{margin-right: 20px; height:150px;}
#eventos .contenedorEventos .evento .fecha{ width:50px; margin-right:10px; float: left; height: 150px;}
#eventos .contenedorEventos .evento .dia{background-color: #fff; padding:10px; font-size: 19pt; font-weight: bold; color:#989898}
#eventos .contenedorEventos .evento .mes{color: #fff; padding:5px 0px; text-align: center;font-size: 10pt; font-weight: bold;  text-transform: uppercase}
#eventos .contenedorEventos .evento .info .titulo{ color: #fff; font-weight: bolder; font-size: 10pt;margin-bottom: 10px;}
#eventos .contenedorEventos .evento .info .titulo a { color:#fff; text-decoration:none    }
#eventos .contenedorEventos .evento .info .descripcion{ color: #fff;  font-size: 9pt;margin-bottom: 15px;}
#eventos .contenedorEventos .evento .info .modalidad{ color: #fff;  font-size: 7pt;}
#eventos .masEventos{float:right;  color:#fff; text-transform: uppercase; font-size: 10pt; width: 100%;}
#eventos .masEventos a{text-decoration: none; color:white}
/*Suscripción y redes socaiales*/
#registro {padding: 30px 20px; background-color: #fff; overflow: auto}
#registro .registro{  color: #666; font-size: 10pt; font-weight: bold; }
#registro .registro .formulario{ overflow: auto; margin-top:20px;}
#registro .registro .formulario div{margin:0 auto; width: 300px;}
#registro .registro .formulario input[type=email]{background-color: #E5E5E5; border: none; padding:7px; width:300px; }
input[type=submit] { width:300px;}
#registro .registro .formulario .g-recaptcha {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; margin-top:10px;       }
#registro .registro .formulario .contenedorBoton{width:300px;}
#registro .redesSociales{ width: 150px; height:50px; margin: 20px auto;}
#registro .redesSociales img{width: 45px}
/* Pie de página */
footer{ background-color: #333; color: #fff; }
.pie{ padding:20px 25px; overflow:auto}
.pie .contenedorTexto{ width: 240px; FLOAT:LEFT; margin-right:30px; margin-top:25px; }
.pie .texto{font-size: 7pt; font-weight: bold}
.pie .titulo{ border-bottom: 3px #29AAE1 solid; font-size: 8pt; font-weight: bolder; margin-bottom:5px; width:150px; margin-bottom:15px; padding-bottom:5px;}
.pie .logoSAME{width:295px; height: 76; float:left; margin-top:20px;}
.pie .logoSAME img{max-width: 150px; min-width:144px}
}