* { padding: 0; margin: 0; font-family: sans-serif; }
header { padding-top: 20px; height: 100px; background-color: rgb(237,73,132); }
#resolucion { margin-left: auto; margin-right: auto; height: auto; }
#buscador { padding: 5px; margin-top: 22px; float: right; background-color: rgb(227,63,122); }
#buscador form { margin-right: 10px; float: left; }
#buscador img { float: right; }
input[type=buscar] { background-color: rgb(217,53,112); height: 30px; width : 200px; margin: 0; border: none; color: white; font: 17px sans-serif; }
#social { float: right; margin-right: 15px; margin-top: 20px; }
#social img { opacity: 0.8; padding: 5px; }
#social img:hover { opacity: 1; padding: 5px; }
nav { height: auto; padding-top: 15px; padding-bottom: 15px; background-color: rgb(39,42,43); }
nav ul { text-align: left; display: inline; margin: 0; padding: 15px 0px 17px 0; list-style: none; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); }
nav ul li { display: inline-block; font: bold 12px/18px sans-serif; margin-right: -4px; position: relative; padding: 15px 20px; background: background-color: rgb(39,42,43); cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; color: white; border-style: solid; border-width: 2px; margin-right: 10px; border-radius: 15px;}
nav ul li a { color: white; text-decoration: none; font-style: none; }
nav ul li:hover { background: #555; color: #fff; }
nav ul li ul { padding-top: 7px; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; }
nav ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; }
nav ul li ul li:hover { background: #989191; }
nav ul li:hover ul { display: block; opacity: 1; visibility: visible; }
main { height: auto; }
#slideshow { color: white; height: 350px; background-color: rgb(6,7,9); background-image: url(img/img2.png); background-repeat: no-repeat;  }
#horarios { min-height: 100px; width: auto; background-color: rgb(87,93,93); }
#horarios ul { min-width: 400px; }
#horarios li { height: auto; width: auto; color: white; padding: 10px; float: left; list-style: none; height: auto; }
#horarios li:hover { border-width: 0px 3px 0px 3px; border-style: solid; }
video { width:100%; height:auto; }
#resolucion #programas { background-color: rgb(39,42,43); }
#resolucion #programas #titulo { margin-top: 10px; color: white; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; background-color: rgb(237,73,132); }
#resolucion #programas iframe { width: 96%; height: auto; padding: 10px; }
#resolucion #agenda #titulo { margin-top: 10px; color: white; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; background-color: rgb(237,73,132); }
#resolucion #agenda { color: white; background-color: rgb(39,42,43); }
#resolucion #agenda img { padding: 10px; width: 97%; }
#resolucion #agenda img:hover { background: rgb(237,73,132); }
#resolucion #agenda figcaption { margin-left: 10px; }
#contacto { text-align: right; color: white; margin-top: 40px; padding-top: 40px; background-color: rgb(87,93,93); min-height: 380px; }
#contacto #resolucion input[type=nombre] { background-color: rgb(97,103,103); height: 30px; width : 300px; margin: 0; border: none; color: white; font: 17px sans-serif; margin-bottom: 5px; }
#contacto #resolucion input[type=email] { background-color: rgb(97,103,103); height: 30px; width : 300px; margin: 0; border: none; color: white; font: 17px sans-serif; margin-bottom: 5px; }
#contacto #resolucion textarea { background-color: rgb(97,103,103); height: 200px; width : 300px; margin: 0; border: none; color: white; font: 14px sans-serif; margin-bottom: 5px; }
#contacto #mapa { display: block; float: right; height: 305px; width: 500px; }
footer { padding-top: 20px; text-align: left; width: auto; background-color: rgb(51,52,54) }
#legales { float: left; height: auto; width: 400px; }
#legales p { margin-top: 6px; color: white;font-size: 10px; }
footer img { float: left; }
#direccion { margin-left: 50px;  color: white; float: left; }
#direccion h4 { color: white; margin-bottom: -6px; font-size: 12px; }
#direccion p { font-size: 14px; margin-right: 10px; margin-bottom: -6px; }
h4 { color: white; margin-bottom: 10px; }
footer ul { float: right; margin-right: 30px;  }
footer li { list-style: none;  margin-bottom: 5px; }
footer li a { opacity: 0.8; color: white; text-decoration: none; }
footer li a:hover { opacity: 1; color: white; text-decoration: none; }


main section #resolucion article { min-height: 300px;; min-width: 290px; margin-top: 20px; margin-bottom: 60px; border-width: 0px 0px 5px 0px; border-style: solid; border-color: rgb(227,63,122); }
main section #resolucion article #titulo { padding-bottom: 10px;padding-top: 10px; color: white; background-color: rgb(227,63,122); }
main section #resolucion h5, h6 { padding-left: 10px; }
main section #resolucion p { padding:10px; }
main section #resolucion article img { margin-top: 30px; padding: 10px; float: right; height: 200px;  }
main section #resolucion article #imagen img { float: none; width: auto; height: 470px; }
main #formulario1 { text-align: left; padding: 50px; margin-right: auto; margin-left: auto; width: 200px; height: 400px; }
main #formulario1 form { color: white; background-color: rgb(237,73,132); margin-left:20px; margin-right:20px; margin-bottom: 10px; } 
main #formulario1 textarea { margin-left: 20px; }
main #formulario1 input[type=image] { margin-left: 20px; }
#mensajes #mensaje { float: right; background-image: url(img/burbuja.jpg); background-size: 250px; height: 211px; width: 250px; margin-right: 20px; margin-bottom: 20px; margin-top: 40px; }
#mensajes #mensaje p { font-size: 12px; padding-left: 20px;  padding-top: 50px; width: 200px; }





/*low resolution, 480px and below */
@media only screen and (max-width: 756px) {
#resolucion { max-width: 90%; }
header { text-align: center; }
#buscador { display: none; }
#social { display: none; }
nav ul li { font-size: 18px; text-align: center; margin-bottom: 10px; display: block; }
nav ul li ul li { display: none; }
#slideshow { text-align: center; }
#horarios { height: 7%; min-height: 210px; }
#horarios li{ text-align: center; }
#horarios h4 { font-size: 20px; }
#horarios p { font-size: 16px; }
#resolucion #programas iframe { width: 95%; height: auto; float: none; }
#resolucion #agenda img { height: auto; }
#contacto #resolucion #mapa { display: none; }
footer { height: 250px; }
footer #direccion { display: none; }
footer ul { display: none; }
#legales { text-align: center; width: auto; }
#legales img { height: 150px; float: none; }
main section #resolucion article #imagen img { width: 95%; height: auto; }
main section #resolucion article img { float: none; margin-top: 0px;  }
main iframe { width: 100%; height: auto; } 
#mensajes { min-height: 1630px; }
}


/*medium resolution, 481px to 1023px */
@media only screen and (min-width: 757px) {
#resolucion { max-width: 90%; }
#social { display: none; }
#resolucion #programas video { width:47%; float: right; }
#resolucion #agenda img { height: auto; }
#resolucion #programas { height: auto; }
main iframe { width: 100%; height: 540px; }
#contacto #resolucion #formulario { text-align:  float: none; }
#contacto #resolucion #formulario {  text-align: center; }
#contacto #resolucion #mapa { display: none; }
footer { height: 150px; }
footer ul { display: none; }
#resolucion #agenda { min-height: 500px; }
#mensajes { min-height: 830px; }
}
    

/*high resolution,2014px and above */
@media only screen and (min-width: 1024px) {
#resolucion { max-width: 960px; }
#social { display: block }
nav ul li { font-size: 12px; } 
h4 { font-size: 16px; }
#contacto #resolucion #formulario { float: left; text-align: right; }
#contacto #resolucion #mapa { display: block }
footer { height: 170px; }
footer li { font-size: 12px; }
footer ul { display:block } 
#resolucion #programas iframe { padding: 10px; width:22%; float: right; }
#resolucion #programas { height: 200px; }
#resolucion #agenda { min-height: 360px; }
#resolucion #agenda img { width: 300px; height: 190px; }
#resolucion #agenda article { float: right; width: 320px; }
#resolucion #programas { height: 220px; }
main iframe { width: 100%; height: 540px; }
main #contacto iframe { width: 100%; height: 310px; }
#mensajes { min-height: 550px; }

}