html{box-sizing:border-box;}
*,*:after,*:before{box-sizing:inherit;}
div{box-sizing: border-box; }

body{font-family: sans-serif; background-image: linear-gradient(45deg,#CEE007,#339E35);
background: -webkit-linear-gradient(45deg,#CEE007,#339E35);
background: -moz-linear-gradient(45deg,#CEE007,#339E35);
background: -o-linear-gradient(45deg,#CEE007,#339E35);
 padding: 1rem;}
 
aside{width: 20%; background-color: white; float: left; position: relative; box-shadow: 3px 3px 3px black; padding: 1rem;}
aside a {text-decoration: none; color: white;}
aside a:visited{color: white;}
#panel{width:100%; margin: 0 auto; clear: both;}
.boton{color: white; width: 85%; margin: 10px auto; padding: .7rem; background-color: #339E35; border-radius:10px; box-shadow:3px 3px 3px black;}
.boton:hover{background-color:#cee007;}
.redes{width: 40%; margin: 10px auto;}
.contacto-por-whatsapp-movil{display: none;}

h1{font-size:2rem; text-align: center; color: #279989; font-weight: bolder;}
h2{font-size: 1.6rem; text-align: center;}
h3{text-align: center;clear: both; font-size: 1rem; margin-top:2em;}
h4{font-size:.9rem; text-align: center; }
h5{font-size:1.2rem; text-align: center; color: #279989; clear: both;}
p{font-size: 1rem; margin-left: 1rem; margin-right: 1rem; text-align: center; line-height: 1.5rem;}
span{font-weight: bolder; font-size: 1.2rem;}



header{ width: 75%; float: right; padding-top: 1rem; padding-bottom: 1rem; background-color: white;}


#panel p{color: #279989; font-weight: bolder;}

section{width: 75%; float: right; background-color: white; overflow: hidden; }
#logo-servicios{width: 100%; overflow: hidden; background-image: url(../imagenes/fondo.jpg); background-size: cover;}
.elemento-logo{width: 25%; float: left; padding: .5rem;}
.elemento-logo a{text-decoration: none;}
.elemento-logo img:hover{opacity: .5;}

.contacto-por-whatsapp{ text-align: center;}
.contacto-por-whatsapp a{text-decoration: none;}
.contacto-por-whatsapp p{color: #279989; font-weight: bolder;}
.en-contacto{display: inline; }
.logo-whats{display: inline; }
.contacto-por-whatsapp-movil{ text-align: center;}
.contacto-por-whatsapp-movil a{text-decoration: none;}
.contacto-por-whatsapp-movil p{color: #279989; font-weight: bolder;}

.elemento-logo h5{background-color:#E6E6E6; padding: .3rem 0; border-radius: 8px; box-shadow: 2px 2px 2px gray;}

#menu-pie{width: 95%; overflow: hidden; background-color: white; margin: 2rem auto;}
#menu-pie a{text-decoration: none; color: white;}
.menu-alterno{width: 25%; float: left; background-color: #279989; color:white; border-radius: 8px; padding: .4rem 0 .4rem 0; border:2px solid white;}
.menu-alterno p{font-size: .8rem;}
#menu-redes{width: 95%; overflow: hidden; margin: 0 auto;}
#face,#twitter,#link{width: 33%; text-align: center; float: left;}
#face img,#twitter img,#link img{width: 40%;}

footer{width: 75%; float: right; background-color: white; border: 2px solid white; box-sizing: border-box;}
.area-banners{width: 100%; overflow: hidden; }
#animacion{width: 50%; margin: 0 auto;}
.mini-banner{width: 33%; float: left; padding: 1rem;}
#formato-contacto{margin: 3rem auto; clear:both; width:65%; }
fieldset{border:2px solid #279989; border-style: groove; padding:1rem; box-sizing:border-box;}
fieldset p{text-align:left; margin-bottom: 0;}
legend{font-weight:700; color:#279989;}
#selector{margin-top: 1rem; margin-bottom: 1rem;}
#selector p:first-child{display: inline;}
input{width:95%; min-height:30px; padding:.5rem;}
textarea{width:95%; padding:1rem;}
input[type=submit]{width:50%; float: left;}
input[type=reset]{width:50%;}
#btn-form{text-align:center;}

#menu-redes,#menu-pie{display: none;}

/*AREA DE DECORACION*/

#video-solo{width: 75%; margin: 0 auto;}
.linea{width: 100%; overflow: hidden; margin: 1rem auto; background-color: white;}
.ejemplo-h{width: 50%; float: left; padding: 1rem;}
.ejemplo-v{width: 33%; float: left; padding: 1rem;}
#foto-sola-centrada{width: 65%; margin: 1rem auto;}
.elemento-vertical{width: 50%; float: left; padding: 2rem;}
.linea p{line-height: 1.5rem; text-align: justify; color: #666;}
.linea hr{width:85%; margin: 1rem auto;}
.linea h3{color: #666;}
#nota-aclaratoria,#prov{background-color: white;}

/*NOSOTROS*/
#descripcion{padding: 1rem; background-color: white; clear: both;}
#descripcion p{text-align: justify;}
#la_foto{width: 65%; margin: 0 auto;} 
#los_puntos{padding: 1rem;}
#los_puntos h2 span{font-size: 2rem;}
.video-int{width: 65%;}
#nota-aclaratoria{width: 65%; border: 2px groove green; margin: 0 auto; padding: 1rem; }
#nosotros{background-color: white;}
#desarrollo{width: 100%; background-color: white;}
#tabla-1{overflow: hidden; padding: 1rem;}
#tabla-1 img{width: 8rem; height: 8rem;}
#tabla-1 table tr td{background-color: #F0F0F0; text-align: center; vertical-align: middle;}
#tabla-1 table{float: right;}
#tabla-2{padding: 1rem;}
#tabla-2 img{width: 8rem; height: 8rem;}
#tabla-2 table tr td{background-color: #F0F0F0; text-align: center; vertical-align: middle;}
hr{width: 70%; border: 15px; }

/* MENSAJE DE CONTACTO RECIBIDO*/

#mensaje_recibido{width: 100%; background-color: white; margin-bottom: 2rem;}
.medios_contacto{width: 100%; background-color:white;}
.recibido{width: 60%; padding: 2rem; margin: 0 auto; line-height: 2rem;}
.recibido h2{color: #666; font-weight: bolder;}
.logo{width: 100%; text-align: center; margin-bottom: 2rem;}
.medio{ width: 50px; height: 50px; display: inline-block; margin-right: 1rem;}
.todos_medios{padding: 1rem; overflow: hidden;  width: 50%; margin: 0 auto; text-align: center;}
button{color: white; background-color: #666; padding: 1rem; border: 1px solid #666; border-radius: 8px; font-weight: bolder;}
button:hover{background-color: black;}

/*EVENTOS*/
.dos-fotos{text-align: center; overflow: hidden; width: 50%; float: left; box-sizing: border-box; padding: 1rem;}
.cinto{width: 100; background-color: #279989; padding: 1rem 0; color: white;}
.pie-de-foto{color: white; background-color: #211C1C; width: 100%; margin: 0 auto;}


/*BANNER PROMOCIONAL*/
#baner-promo{width: 100%; padding: 1rem; margin: 0 auto;}
·baner-promo img{box-shadow: 2px 2px 5px black;}


/*VIDEO TEMPORAL*/

.video-solo{width: 60%; margin: 0 auto;}

/*******************************************************************************************************************************/


@media screen and (max-width:930px)
{
    body{padding: 0;}
    .elemento-logo a span h5{font-size: 1rem;}
    .boton{width:100%;}
    #animacion{float: none; width: 100%}
    .mini-banner{float: none; width: 70%; margin: 0 auto;}
    .recibido{width: 90%;}
    .dos-fotos{width: 100%; float: none;}
    .video-solo{width: 100%;}
}


@media screen and (max-width:768px)
{
    aside{display: none;}
    .contacto-por-whatsapp-movil{display: block;}
    .contacto-por-whatsapp-movil p{font-size: 1.3rem;}
    
    #menu-pie,#menu-redes{display: block;}
    header,section,footer{float: none; width:85%; margin: 0 auto;}
    #formato-contacto{width:75%;}
    
    .elemento-logo a span h5{font-size: .8rem;}
    
    input[type=submit]{width:33%; float: left;}
    input[type=reset]{width:33%;}
    
    
    .ejemplo-h,.ejemplo-v{width:85%; float: none; margin: 0 auto;}
    #foto-sola-centrada{width: 85%;}
    
    #la_foto{width: 95%;}
    
}

@media screen and (max-width:525px)
{
    header,section,footer{width: 90%; margin: 0 auto;}
    .elemento-logo{width: 50%;}
    #formato-contacto{width: 95%;}
    legend{font-weight: 500;}
    .menu-alterno{width: 50%;}
    #formato p{font-size: .8rem;}
    .elemento-vertical{float: none; width: 85%; margin: 0 auto;}
    .linea{padding: .5rem; }
    .linea{padding: 0;}
    #video-solo{width: 90%;}
    .elemento-vertical{width: 90%;  padding: .5rem;}
    .ejemplo-h{ padding: .5 rem 0;}
    
    
}