@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900');

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;}

.tecTexto { color:#29BAF0 }
.encabezadoTabla{background-color: #D9D9D9; font-weight: bold;}
.fh,.fh2{background-color: #2F75B5; font-weight: bold; color:white; text-align: center}

/*-------------------------------------------------------
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;  }
/*.barraSecundaria .menuSecundario {margin: 0px 0px 0px 250px; padding:0px; list-style: none;}
.barraSecundaria .menuSecundario li { float: left; padding: 25px 3px;   margin-right: 10px;}
.barraSecundaria .menuSecundario li a { text-decoration: none; color: #333; font-weight: bold; font-size: 7.5pt;}*/

/* Cuerpo */

#dosColumnas {padding:60px 80px;background-color: #fff; overflow:auto  }
#dosColumnas .contenedorInformacion { width:65%; float:left; margin-right:0px;  }
#dosColumnas .contenedorInformacion .tema { overflow:auto;    }
#dosColumnas .contenedorInformacion .tema div { float: left; margin-left:5px;    }
#dosColumnas .contenedorInformacion .tema div:nth-child(2){margin-top:15px; font-weight:bold;  }
#dosColumnas .contenedorInformacion .tema .tituloTema { text-transform: uppercase; margin-top:15px; font-weight:bold  }
#dosColumnas .contenedorInformacion .infoEvento { padding-left:60px; padding-top:10px;    }
#dosColumnas .contenedorInformacion .infoEvento .datosHorizontal { margin-top:20px; overflow:auto   }
#dosColumnas .contenedorInformacion .infoEvento .titulo { font-weight:bold; font-size:15pt;    }
#dosColumnas .contenedorInformacion .infoEvento .tipo {  font-size:15pt;    }
#dosColumnas .contenedorInformacion .infoEvento .fecha{ width:50px; margin-right:50px; float:left }
#dosColumnas .contenedorInformacion .infoEvento .fecha .dia {background-color: #989898; padding:10px; font-size: 19pt; font-weight: bold; color:#fff  }
#dosColumnas .contenedorInformacion .infoEvento .fecha .mes{color: #989898; padding:5px 0px; text-align: center;font-size: 10pt; font-weight: bold; text-transform: uppercase }
#dosColumnas .contenedorInformacion .infoEvento .horario{ width:90px; float:left; font-size:10pt; }
#dosColumnas .contenedorInformacion .infoEvento .duracion{ width:90px; float:left; font-size:10pt; border-left: 1px black solid; padding-left:20px; }
#dosColumnas .contenedorInformacion .infoEvento .requisitos{ width:160px; float:left; font-size:10pt; border-left: 1px black solid; padding-left:10px; }
#dosColumnas .contenedorInformacion .infoEvento .reproductorEnVivo {margin-top:20px; width:480px; height:300px;    }
/*#dosColumnas .contenedorInformacion .infoEvento .impartidoPor, #dosColumnas .contenedorInformacion .infoEvento .lugar, #dosColumnas .contenedorInformacion .infoEvento .cupo { font-size:10pt; margin-top:20px;  }*/
#dosColumnas .contenedorInformacion .infoEvento .seccion { font-size:10pt; margin-top:20px;  }
#dosColumnas .contenedorInformacion .infoEvento .seccion a { color:#29AAE1    }
#dosColumnas .contenedorInformacion .infoEvento .inscripcion { margin-top:20px;  }
#dosColumnas .eventos { width:30%; float:right; overflow:auto; }
#dosColumnas .eventos .tituloSeccionEventos {font-size:07pt; font-weight:bold; margin-bottom:20px; }
#dosColumnas .eventos .listadoEventos { width:260px;  }
#dosColumnas .eventos .listadoEventos .evento {overflow:auto; margin-top:05px;   }
#dosColumnas .eventos .fecha{ width:40px; float:left }
#dosColumnas .eventos .fecha .dia {background-color: #989898; padding:5px; font-size: 19pt; font-weight: bold; color:#fff  }
#dosColumnas .eventos .fecha .mes{color: #989898; padding:5px 0px; text-align: center;font-size: 10pt; font-weight: bold; text-transform: uppercase }
#dosColumnas .eventos .listadoEventos .info { width:200px; float:right; margin-bottom:10px; }
#dosColumnas .eventos .listadoEventos .info .titulo a, #dosColumnas .eventos a{ color:#989898; font-size:08pt; font-weight:bold}
#dosColumnas .eventos .listadoEventos .info .modalidad { margin-top:5px; color:#989898; font-size:08pt;}

#cronograma td{width:5%}
.a1{background-color: #548235; }
.a2{background-color: #00B0F0; }
.a3{background-color:#C65911}
.a4{background-color:#BF8F00 }
.a5{background-color: #0070C0}
.a1, .a2, .a3, .a4, .a5{color:white; font-size: 08pt;}
/*Sección Enlaces a areas*/
#areas { background-color:#E5E5E5; padding: 20px 80px;  }
#areas img { width: 40px;  }
#areas .contenedorAreas { overflow:auto; }
#areas .contenedorAreas .area { overflow:auto; float:left; width: 230px; margin-bottom:10px;}
#areas .contenedorAreas .area .logoArea{ float:left; margin-right:10px;   }
#areas .contenedorAreas .area .infoArea .tituloArea a{ color:#000; font-size:08pt; font-weight:bold; text-transform:uppercase  }
#areas .contenedorAreas .area .infoArea .descripcionArea {color:#000; font-size:08pt;   }
/*Suscripción y redes socaiales*/
#registro {padding: 30px 80px; background-color: #fff; overflow: auto}
#registro div{float:left}
#registro .registro{ width: 800px;color: #666;font-size: 10pt;font-weight: bold;margin: 0 auto; }
#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:40px; }
#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: 80px;}
.barraSecundaria .logoAcademica { float:right; margin-right:80px; margin-top:15px;}
.barraSecundaria .logoAcademica img { width:240px;  }
.barraSecundaria .menuSecundario {margin: 0px 0px 0px 250px; padding:0px; list-style: none;}
.barraSecundaria .menuSecundario li { float: left; padding: 25px 3px;   margin-right: 10px;}
.barraSecundaria .menuSecundario li a { text-decoration: none; color: #333; font-weight: bold; font-size: 7.5pt;}
/* Cuerpo */

#dosColumnas {padding:60px 20px;background-color: #fff; overflow:auto  }
#dosColumnas .contenedorInformacion { width:65%; float:left; margin-right:30px;  }
#dosColumnas .contenedorInformacion .tema { overflow:auto;    }
#dosColumnas .contenedorInformacion .tema div { float: left; margin-left:5px;    }
#dosColumnas .contenedorInformacion .tema div:nth-child(2){margin-top:15px; font-weight:bold;  }
#dosColumnas .contenedorInformacion .tema .tituloTema { text-transform: uppercase; margin-top:15px; font-weight:bold  }
#dosColumnas .contenedorInformacion .infoEvento { padding-left:60px; padding-top:10px;    }
#dosColumnas .contenedorInformacion .infoEvento .datosHorizontal { margin-top:20px; overflow:auto   }
#dosColumnas .contenedorInformacion .infoEvento .titulo { font-weight:bold; font-size:15pt;    }
#dosColumnas .contenedorInformacion .infoEvento .tipo {  font-size:15pt;    }
#dosColumnas .contenedorInformacion .infoEvento .fecha{ width:50px; margin-right:50px; float:left }
#dosColumnas .contenedorInformacion .infoEvento .fecha .dia {background-color: #989898; padding:10px; font-size: 19pt; font-weight: bold; color:#fff  }
#dosColumnas .contenedorInformacion .infoEvento .fecha .mes{color: #989898; padding:5px 0px; text-align: center;font-size: 10pt; font-weight: bold; text-transform: uppercase }
#dosColumnas .contenedorInformacion .infoEvento .horario{ width:90px; float:left; font-size:10pt; }
#dosColumnas .contenedorInformacion .infoEvento .duracion{ width:80px; float:left; font-size:10pt; border-left: 1px black solid; padding-left:10px; }
#dosColumnas .contenedorInformacion .infoEvento .requisitos{ width:160px; float:left; font-size:10pt; border-left: 1px black solid; padding-left:10px; }
#dosColumnas .contenedorInformacion .infoEvento .reproductorEnVivo {margin-top:20px; width:480px; height:300px;    }
/*#dosColumnas .contenedorInformacion .infoEvento .impartidoPor, #dosColumnas .contenedorInformacion .infoEvento .lugar, #dosColumnas .contenedorInformacion .infoEvento .cupo { font-size:10pt; margin-top:20px;  }*/
#dosColumnas .contenedorInformacion .infoEvento .seccion { font-size:10pt; margin-top:20px;  }
#dosColumnas .contenedorInformacion .infoEvento .seccion a { color:#29AAE1    }
#dosColumnas .contenedorInformacion .infoEvento .inscripcion { margin-top:20px;  }
#dosColumnas .eventos { width:260px; float:right; overflow:auto; }
#dosColumnas .eventos .tituloSeccionEventos {font-size:07pt; font-weight:bold; margin-bottom:20px; }
#dosColumnas .eventos .listadoEventos { width:260px; float:right; }
#dosColumnas .eventos .listadoEventos .evento {overflow:auto; margin-top:05px;   }
#dosColumnas .eventos .fecha{ width:40px; float:left }
#dosColumnas .eventos .fecha .dia {background-color: #989898; padding:5px; font-size: 19pt; font-weight: bold; color:#fff  }
#dosColumnas .eventos .fecha .mes{color: #989898; padding:5px 0px; text-align: center;font-size: 10pt; font-weight: bold; text-transform: uppercase }
#dosColumnas .eventos .listadoEventos .info { width:200px; float:right; margin-bottom:10px; }
#dosColumnas .eventos .listadoEventos .info .titulo a, #dosColumnas .eventos a{ color:#989898; font-size:08pt; font-weight:bold}
#dosColumnas .eventos .listadoEventos .info .modalidad { margin-top:5px; color:#989898; font-size:08pt;}

#cronograma td{width:5%}
.a1{background-color: #548235; }
.a2{background-color: #00B0F0; }
.a3{background-color:#C65911}
.a4{background-color:#BF8F00 }
.a5{background-color: #0070C0}
.a1, .a2, .a3, .a4, .a5{color:white; font-size: 07pt;}

/*Sección Enlaces a areas*/
#areas { background-color:#E5E5E5; padding: 20px 20px;  }
#areas img { width: 40px;  }
#areas .contenedorAreas { overflow:auto; }
#areas .contenedorAreas .area { overflow:auto; float:left; width: 230px; margin-bottom:10px;}
#areas .contenedorAreas .area .logoArea{ float:left; margin-right:10px;   }
#areas .contenedorAreas .area .infoArea .tituloArea a{ color:#000; font-size:08pt; font-weight:bold; text-transform:uppercase  }
#areas .contenedorAreas .area .infoArea .descripcionArea {color:#000; font-size:08pt;   }

/*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 */

#dosColumnas {padding:60px 20px;background-color: #fff; overflow:auto  }
#dosColumnas .contenedorInformacion {  float:left; margin-right:30px; margin-bottom: 30px; }
#dosColumnas .contenedorInformacion .tema { overflow:auto;    }
#dosColumnas .contenedorInformacion .tema div { float: left; margin-left:5px;    }
#dosColumnas .contenedorInformacion .tema div:nth-child(2){margin-top:15px; font-weight:bold;  }
#dosColumnas .contenedorInformacion .tema .tituloTema { text-transform: uppercase; margin-top:15px; font-weight:bold  }
#dosColumnas .contenedorInformacion .infoEvento { padding: left 30px; padding-top:10px;    }
#dosColumnas .contenedorInformacion .infoEvento .datosHorizontal { margin-top:20px; overflow:auto   }
#dosColumnas .contenedorInformacion .infoEvento .titulo { font-weight:bold; font-size:15pt;    }
#dosColumnas .contenedorInformacion .infoEvento .tipo {  font-size:15pt;    }
#dosColumnas .contenedorInformacion .infoEvento .fecha{ width:50px; margin-right:50px; float:left }
#dosColumnas .contenedorInformacion .infoEvento .fecha .dia {background-color: #989898; padding:10px; font-size: 19pt; font-weight: bold; color:#fff  }
#dosColumnas .contenedorInformacion .infoEvento .fecha .mes{color: #989898; padding:5px 0px; text-align: center;font-size: 10pt; font-weight: bold; text-transform: uppercase }
#dosColumnas .contenedorInformacion .infoEvento .horario{ width:80px; float:left; font-size:10pt; }
#dosColumnas .contenedorInformacion .infoEvento .duracion{ width:80px; float:left; font-size:10pt; border-left: 1px black solid; padding-left:10px; }
#dosColumnas .contenedorInformacion .infoEvento .requisitos{ width:160px; float:left; font-size:10pt; border-left: 1px black solid; padding-left:10px; }
#dosColumnas .contenedorInformacion .infoEvento .reproductorEnVivo {margin-top:20px; width:480px; height:300px;    }
/*#dosColumnas .contenedorInformacion .infoEvento .impartidoPor, #dosColumnas .contenedorInformacion .infoEvento .lugar, #dosColumnas .contenedorInformacion .infoEvento .cupo { font-size:10pt; margin-top:20px;  }*/
#dosColumnas .contenedorInformacion .infoEvento .seccion { font-size:10pt; margin-top:20px;  }
#dosColumnas .contenedorInformacion .infoEvento .seccion a { color:#29AAE1    }
#dosColumnas .contenedorInformacion .infoEvento .inscripcion { margin-top:20px;  }
#dosColumnas .eventos { width:95%; margin: 50px auto; overflow:auto; }
#dosColumnas .eventos .tituloSeccionEventos {font-size:10pt; font-weight:bold; margin-bottom:20px; }
#dosColumnas .eventos .listadoEventos { width:100%;  }
#dosColumnas .eventos .listadoEventos .evento {overflow:auto; margin-top:05px; float:left  }
#dosColumnas .eventos .fecha{ width:40px; float:left }
#dosColumnas .eventos .fecha .dia {background-color: #989898; padding:5px; font-size: 19pt; font-weight: bold; color:#fff  }
#dosColumnas .eventos .fecha .mes{color: #989898; padding:5px 0px; text-align: center;font-size: 10pt; font-weight: bold; text-transform: uppercase }
#dosColumnas .eventos .listadoEventos .info { width:200px; float:right; margin-bottom:10px;margin-left: 10px; }
#dosColumnas .eventos .listadoEventos .info .titulo a, #dosColumnas .eventos a{ color:#989898; font-size:08pt; font-weight:bold}
#dosColumnas .eventos .listadoEventos .info .modalidad { margin-top:5px; color:#989898; font-size:08pt;}

#cronograma td{width:4.5%}
.a1{background-color: #548235; }
.a2{background-color: #00B0F0; }
.a3{background-color:#C65911}
.a4{background-color:#BF8F00 }
.a5{background-color: #0070C0}
.a1, .a2, .a3, .a4, .a5{color:white; font-size: 07pt;}

/*Sección Enlaces a areas*/
#areas { background-color:#E5E5E5; padding: 20px 20px;  }
#areas img { width: 40px;  }
#areas .contenedorAreas { overflow:auto; }
#areas .contenedorAreas .area { overflow:auto; float:left; width: 230px; margin-bottom:10px;}
#areas .contenedorAreas .area .logoArea{ float:left; margin-right:10px;   }
#areas .contenedorAreas .area .infoArea .tituloArea a{ color:#000; font-size:08pt; font-weight:bold; text-transform:uppercase  }
#areas .contenedorAreas .area .infoArea .descripcionArea {color:#000; font-size:08pt;   }

/*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}
}