body{
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  box-sizing: border-box;
  color: #3772ba;
  font-size: 1em;
  font-family: gbo;
}
/*Letras*/
h1{
  font-size: 1.5em;
  color: #3772ba;

}
h2{
  text-transform: uppercase;
  color: #3772ba;
}
/*Importar las letras*/
@font-face {
  font-family: gbd;
  src: url(./../fonts/GothamRnd-Bold.otf);
}
@font-face {
  font-family: gbo;
  src: url(./../fonts/GothamRnd-Book.otf);
}
@font-face {
  font-family: glt;
  src: url(./../fonts/GothamRnd-Light.otf);
}
@font-face {
  font-family: gmd;
  src: url(./../fonts/GothamRnd-Medium.otf);
}
@font-face {
  font-family: mvr;
  src: url(./../fonts/MyriadVariableConcept-Roman.otf);
}
@font-face {
  font-family: dulc;
  src: url(./../fonts/DINNextLTPro-UltraLightCond.otf);
}

/*Menu Hamburguesa*/
.menup{
	width:100%; 
	background:#10c4a6; 
	height:50px; 
	line-height:60px;
  border-bottom:1px solid #dddddd;
  position: relative;
  border: 0;
}
.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:2.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:7px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:4em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
  display: none;
}
.menu {
  z-index: 1000000;
  font-weight: bold;
  font-size: 0.8em;
  width: 13%;
  background: #10c4a6;
  position: absolute;
  text-align: left;
  font-size: 12px;
  right: 0;
  color: white;
  font-family: glt;
  display: none;
  font-weight: 100;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}

.menu li {
  display: block;
  padding: 0.5em 15px;
  border-bottom: #183f8a 1px solid;
  margin: 0 0.5em;
  font-size: 16px;
}
.menu li:hover{
  cursor: pointer;
}

.menu li:hover {
  display: block;
  background: #aad4ff;;
  padding: 0.5em 15px;
  border-bottom: #dddddd 1px solid;
}

.menu ul li a {
  text-decoration: none;
  margin: 0px;
  color: #fff;
}

.menu ul li a:hover {
  color: #fff;
  text-decoration: none;
}

.menu a {
  text-decoration: none;
  color: #fff;
}

.menu a:hover {
  text-decoration: none;
  color: #fff;
}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}
/*Pagina*/

/*estructura*/
.idioma{
  height: 2.5em;
  width: 100%;
  background-color: #aad4ff;
  padding: 0.5em 1em;
  color: #3772ba;
  font-family: glt;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.idiom{
  color:#fff;
}
.idiom>span{
  margin: 0 0.3em;
}
.idiom>.active{
  color: #3772ba;
}
footer{
  background: url(./../img/fondodivision.png);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0em 0.4em;
  background-size: 0.5em;
  padding-top: 1.5em;
  background-repeat: repeat-x;
  background-color: #fff;
  position: relative;
}
footer>div>a{
  text-decoration: none;
}
footer>div>a>img{
  height: 2em;
  margin: 0.4em;
}
.language-btn{
  cursor: pointer;
}
.contenido{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;

}
/*Home Page*/
.content{
  height: 100%;
  position: relative;

}
.home{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: url(./../img/fondo_2019.png);
  /*background-position-x: 14vw;*/
  background-repeat: no-repeat;
  background-position-y: -15vh;
  background-size: cover;
  /*background-size: 87%;*/
}

.imghome{
  width: 35%;
}
/*Resto estructura*/
.nohome{
  display: none;
  position: relative;
  width: 100%;
}
.side{
    min-width: 260px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 36%;
}
.footside{
  background: #3772ba;
    color: white;
    padding: 0.4em 0;
    text-align: center;
    font-size: 2.3em;
    font-family: glt;
}
.cilogo{
  width: 100%;
}
.vis{
  padding: 1em;
  min-height: 64vh;
}
.vista{
  width: 100%;
}
/**/
.bienvenida{
  flex-direction: column;
  align-items: center;
}
.bienvenida>img{
  width: 20%;
  max-width: 160px;

}
.carta{
  font-style: italic;
  padding: 2em 6em;
  text-align: justify;
}
/* Solo para carta de shet*/
.orga{
  display: none;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pic{
  width: 30%;
}

/*Programa*/
.programacion{
  align-items: flex-start;
}
.dia{
  width: 100%;
  background-color: #BEE3FC;
  display: flex;
  padding: 1em;
  color: #3772ba;
  margin-bottom: 1em;
}
.numdia{
  width: 25%;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #3772ba;
}
.actividades{
  width: 75%;
  position: relative;
}
.actividad{
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0em 1em;
  box-sizing: border-box;
}
.horario{
  border-right: 1px solid #3772ba;
  padding-right: 1em;
  padding-top: 1em;
  width: 17%;
  text-align: center;
}
.nombre{
  border-right: 1px solid #3772ba;
  padding: 1em 1em 0em 1em;
  width: 50%;
  text-align: center;
}
.salones{
  margin-top: -1em;
  padding: 1em 1em 0em 1em;
}
.dia_sem{
  font-size:1.5em;
}
.numfecha{
  font-size: 8em;
  line-height: 0.8em;
}

/*Inscripcion*/
.inscripcion{

}
.tablas{
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 3em;
}
.tabla{
  width: 47%;
  position: relative;
  margin: 0.5em;
  font-size: 0.9em;
}
.cabeza{
  display: flex;
  width: 100%;
  position: relative;
}
.evento{
  width: 34%;
  background-color: #5f8ec5;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  color:white;
  margin-right: 0.1em;
}
.resto{
  width: 66%;
  position: relative;
  text-align: center;
 
}
.member{
  background-color: #3a74b8;
  color: white;
  font-size: 0.9em;
  padding: 0.6em 0;
}
.periodos{
  display: flex;
  width: 100%;
  position: relative;
  font-size: 0.7em;
  margin-top: 0.01em;
}
.per1,.per2{
  width: 50%;
  color:white;
  padding: 0.2em 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #4e8dc6;
  
}
.per1{
  background-color: #4f92d7;
}
.per2{
  background-color: #3471aa;
}
.datos{
  margin-top: 1px;
  display: flex;
  width: 100%;
  position: relative;
  text-align: center;
  box-sizing: border-box;
}
.nom{
  background-color: #3a74b8;
  color: white;
  width: 34%;
  font-size: 0.9em;
  padding: 0.5em 0;
  margin-right: 0.1em;

}
.dato1{
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #a8cfef;
}
.dato2{
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dbecf8;
}
/*Sede*/
.sede{
  margin-top: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 1em;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.sede>img{
  width: 100%;
}
.sedesc{
  background-color: #aad4ff;
  padding: 1em;
  color: #3772ba;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.hote{
  padding: 0.6em 3em;
  background-color: #3772ba;
  color: white;
  border: none;
  margin-right: 1em;
}
.hote:hover{
  cursor: pointer;
}
/*hoteles*/
.hotelesi{
  width: 100%;
  position: relative;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.hotelesi>a{
  width: 30%;
  position: relative;
}
.imghot{
  width: 30%;
}

/*tRANSPORTE*/

.transp{
  width: 100%;
  position: relative;
  margin-bottom: 1.5em;
}
.tipo{
  font-size: 1.2em;
  color:#3772ba;
  border-bottom: 1px solid #3772ba;
}
.recursos{
  display: flex;
  padding: 0.5em 2em;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.recurso{
  padding: 0.7em;
  background: #3772ba;
  margin: 0.5em;
  width: 11em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
}
.recurso>a{
  color:white;
  text-decoration: none;
}

/*Sponsor*/
.sponsors{
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.marco{
  border: 1px solid #3772ba;
  background-color: white;
  width: 30%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*recomendaciones*/
.recomendaciones{
  padding-right: 0;
  padding-top: 2.8em;
}
.recomendacion{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 5em;
  margin-bottom: 2em;
  background: #4f92d7;
  color: white;
  padding: 0em 5em;
  margin-left: 8em;
}
/*Turismo*/
.imgtur {
  width: 24%;
  margin: 0.2em;
}

/*POP UP CONTACTO*/
.popup-overlay{
  /*Hides pop-up when there is no "active" class*/
  visibility:hidden;
  position:absolute;
  background:#ffffff;
  border:3px solid #666666;
  width:50%;
  height:50%;
  left:25%; 
  text-align: center;
}
.popup-overlay.active{
  /*displays pop-up when "active" class is present*/
  visibility:visible;

}

.popup-content {
  /*Hides pop-up content when there is no "active" class */
 visibility:hidden;
}

.popup-content.active {
  /*Shows pop-up content when "active" class is present */
  visibility:visible;
}

.buttonp{
  display:inline-block;
  vertical-align:middle;
  border-radius:30px;
  margin:.20rem;
  font-size: 1rem;
  color:#666666;
  background:   #ffffff;
  border:1px solid #666666;  
}

.buttonp:hover{
  border:1px solid #666666;
  background:#666666;
  color:#ffffff;
  cursor: pointer;
}

/*Formulario*/
.formu{
  border: 0px solid #4f92d7;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
.formu>input, .formu>textarea{
  border: 1px solid #10c4a6;
  margin: auto;
  width: 90%;
  padding: 0.8em;
  box-sizing: border-box;
}
.formu>button{
  border: none;
  background: #10c4a6;
  padding: 0.7em 2em;
  color: white;
  margin: auto;
  margin-top: -1.7em;
}
.formu>button:hover{
  cursor: pointer;
}
::placeholder { 
  color: #3772ba;
  font-family: gbo;
 }

 /* Smartphones (portrait & landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.contenido{
  height: 100vh;
}
.content{
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: inherit;
}
 .home{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: url(./../img/fondo_2019.png);
  background-position-x: -115vw;
  background-repeat: no-repeat;
  background-position-y: 81%;
  background-size: inherit;
  background-size: 290%;
  height: -webkit-fill-available;
 }
 .imghome {
  width: 67%;
}
.menu{
  left: 0;
  width: 100%;
}
footer{
  position: fixed;
  bottom: 0;
  flex-direction: column;
  width: 96%;
  position: relative;
}
footer>div{
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.nohome{
  flex-wrap: wrap;
}
.carta{
  padding: 1em;
  margin-bottom: 3em;
}
.side{
  width: 100%;
}

.recomendacion {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 6em;
  margin-bottom: 2em;
  background: #4f92d7;
  color: white;
  padding: 0em 1em;
  margin-left: 0em; 

}

.vis{
  margin-bottom: 3em;
}

/*programacion*/
.dia{
  flex-wrap: wrap;
  padding: 0;
}
.numdia{
  border-right: 0;
  width: 100%;
}
.actividades {
  width: 100%;
  position: relative;
  margin-top: 1em;
}
.horario{
  border-right: 1px solid #3772ba;
  padding-right: 0.5em;
  padding-top: 1em;
  width: 17%;
  text-align: center;
  padding-left: 0.5em;
}
.actividad{
  padding: 0;
}
.tabla{
  width: 100%;
}
.imghot{
  width: 100%;
}
.hoteles{
  margin-bottom: 4em;
}
.recurso{
  width: 100%;
}
.imgtur {
  width: 47%;
  margin: 0.2em;
}
.marco{
  width: 47%;
  margin: 4px;
}
.sponsors{
  margin-bottom: 4em;
}


}