@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,600,700;1,300;1,400;1,700&display=swap');

html { 
  background: url(images/fondo_ok.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
p {font-family: 'Roboto Condensed', sans-serif; font-size:18px; color:#000; font-weight:400;}
p a {font-family: 'Roboto Condensed', sans-serif; font-size:18px; color:#000; font-weight:400; text-decoration:none;}
p a:hover {color:#333;}

h1 {font-family: 'Roboto Condensed', sans-serif; font-size:30px; color:#000; font-weight:700; background-color:#ce5075; padding-top:5px; padding-bottom:5px; border-radius:10px;}

.clear {clear:both;}

#div_central {width:90%; padding:3%; margin-left:auto; margin-right:auto; border-radius:20px; background-color:#FFF; opacity:0.9; }
#div_formulario {width:100%; margin-left:auto; margin-right:auto; margin-top:30px;}
#div_cronograma {width:100%; margin-left:auto; margin-right:auto; margin-top:30px;}

#menu_gral {width:90%; margin-left:auto; margin-right:auto;}
#menu_der {display:none;}
#menu_der img {width:100%; max-width:125px;}
#menu_izq {width:100%;}

#formulario {width:100%; text-align:center;}
input { width:90%; height:50px; background-color:#FFF; border: 1px solid #666; margin-bottom:20px; border-radius:5px; margin-left:auto; margin-right:auto;}
select { width:90%; height:50px; background-color:#FFF; border: 1px solid #666; margin-bottom:20px; border-radius:5px; margin-left:auto; margin-right:auto;}
textarea { width:90%;  background-color:#FFF; border: 1px solid #666; margin-bottom:20px; border-radius:5px; margin-left:auto; margin-right:auto;}
.btnsubmit {border:none; background-color:#c2457d; color:#FFF; padding:10px; cursor:pointer;width:50%; height:60px; margin-left:auto; margin-right:auto; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-family: 'Roboto Condensed', sans-serif; color:#FFF; font-size:24px; }

#crono {width:100%; border-top:1px dashed #000; padding-top:10px; padding-bottom:10px;}
#crono_der {width:100%; text-align:center;}
#crono_der p {font-weight:600;}
#crono_izq {width:100%; text-align:center;}
#crono_conten {width:100%; margin-bottom:50px;}
#crono_conten_der {width:33%; float:left;}
#crono_conten_der  img {width:90%; border-radius:10px;}
#crono_conten_izq {width:64%; margin-right:3; float:left; font-family: 'Roboto Condensed', sans-serif; font-size:18px; color:#000; font-weight:400;}

#boton {width:220px; margin-left:auto; margin-right:auto; background-color:#5cb499; padding:8px; border-radius:10px; text-align:center; margin-top:30px;}

#actividades {width:100%; margin-bottom:50px; text-align:center; font-family: 'Roboto Condensed', sans-serif; font-size:22px; color:#000; font-weight:600;}
#actividades img {width:85%; text-align:center; border-radius:10px;}

#izquierda {width:80%; text-align:center; margin-left:auto; margin-right:auto; margin-bottom:30px; font-family: 'Roboto Condensed', sans-serif; font-size:30px; color:#000; font-weight:700}
#izquierda img {width:100%; max-width:588px; border-radius:20px;} 

#derecha {width:80%; text-align:center; margin-left:auto; margin-right:auto; margin-bottom:30px; font-family: 'Roboto Condensed', sans-serif; font-size:30px; color:#000; font-weight:700}
#derecha img {width:100%; max-width:588px; border-radius:20px;}

.logo_whatts{position:fixed;bottom:5px;right:10px;z-index:10;}

@media screen and (min-width:34em) {
#actividades {width:50%; float:left; text-align:center;}  
#crono_conten_der {width:23%;} 
#crono_conten_izq {width:74%;}
}

@media screen and (min-width:50em) {
#izquierda {width:50%; float:left;}
#derecha {width:50%; float:left;}
}

@media screen and (min-width:63em) {
#div_formulario {width:60%; margin-top:50px;}
#div_cronograma {margin-top:50px;}
#menu_der {display:block; width:20%; float:left;}
#crono_der p {font-weight:400;}
#menu_izq {display:block; width:80%; float:left;}
#crono_der {width:20%; float:left; text-align:center;font-weight:400;}
#crono_izq {width:75%; padding-left:5%; float:left; text-align:left;}
#actividades {width:33%;}
#crono_conten {width:50%; float:left;}
#crono_conten_izq {font-size:20px; padding-top:10px;}
input { width:50%;}
select { width:50%; }
textarea { width:50%; }
}