#contenedor{width:1050px; min-height:1000px; margin:0 auto; /*background-color:pink */}
/*botonera*/
*a{text-decoration:none;}
#botonera{width:1050px;min-height:55px; float:left;background-color:#0F1226;}
 
#linea{width:1050px;height:10px;float:left; background-color:#2bb573;}

.bot *{list-style:none; text-decoration:none; margin:0px; padding:1; color:white; font-family:verdana;font-size:10px}
.bot > li {float:left;}
.bot li a {display: block;padding:10px 12px; width:150;text-align:center}
.bot li a:hover {background:white ;color:#2b2c82; border-radius:5px;}
.bot li ul {display:none}
/*
#rrss{width:300px;min-height:50px; float:left;}
#facebook{width:60px;height:5px;background-image:url(../img/facebook.png); background-size:cover;float:left; padding:5px ; background-color:red}
#twitter {width:60px;height:25px;background-image:url(../img/twitter.png); background-size:cover;float:left;padding:5px 0}

#facebook:hover{ transform:scale(1.4);opacity(0.8)}
#twitter:hover{transform:scale(1.4)}
*/

/*fin botonera */



#cabecera{width:1050px;min-height:100px; float:left;background-color:white; padding:10px 0px;} 
#logo{width:300px;min-height:100px; float:left;}
#logo a:hover{opacity:.7}

#frase1{width:500px;min-height:100px;float:left;padding:0px 10px 0px 20px; position:relative}
#slogan{font-family:'Merriweather', seri;font-size:25px;color:#2bb573; position:relative; top:15px; letter-spacing:3px;}
#acceso{width:150px;height:40px; float:left; background-color:#2bb573; border-radius:25px; position:relative; top:10px; right:-50px}
#clientes{font-size:15px; color:white;text-align:center; position:relative; top:3px}
#flecha{position:relative;left:135px;bottom:25px;}


/* slider */
 #slider{width:1050px;min-height:400px; float:left;}

 /*  fin slider */
 
 /* caja */ 
 #caja{width:1050px;min-height:150px; float:left;padding:10px 0px}
 #cajita{width:85px;min-height:150px; float:left; background-color:#2bb573}
 #frase{width:955px;min-height:150px;float:left;background-color:#F2F4F4  ; margin:0px 0px 0px 10px;}
 .texto{font-size:40px; color:#2bb573; font-family: 'Merriweather', seri; line-height:50px;position:relative; top:20px; right:-12px}
 .rical{font-size:40px; color:#2b2c82;font-family: 'Merriweather', seri; position:relative; top:20px; right:-18px;}
 #slogan2{font-size:30px; color:#2bb573; padding: 10px 15px; font-family: 'Merriweather', seri; letter-spacing:5px; line-height:80px}
 /*fin caja*/
 /*cotenido*/
 
 
 
 
 #contenido{width:1050px; height:300px; background-color:#2bb573; float:left; margin:10px 0;}
 #comunidades{width:200px;height:150px;float:left;  margin:80px 30px 25px 100px;}
 #servicios{width:200px; height:150px; float:left; margin:80px 30px 25px 100px; }
 #presupuesto{width:200px; height:150px; float:left;margin:80px 30px 25px 100px;} 
 .txt{font-size:15px; font-family: 'Merriweather', seri; color:white;  text-align:center;}
 .txt1{font-size:15px;  font-family: 'Merriweather', seri;color:white; text-align:center;}


.iconoind:hover{animation-name:animacioniconos; animation-duration:3s;}


 /*fin de contenido */
 #pp{width:1050px;height:55px; float:left; background-color: #0F1226;color:#E6E6E6}
 #pie {color:#E6E6E6; font-family: 'Merriweather', seri; font-size:12px; position:relative; top:10px; line-height:18px;}
 #linea2{width:1050px;height:10px;float:left; background-color:#2bb573; position:relative; top:18px}
 
 
#ventana-flotante {
width: 1050px;  /* Ancho de la ventana */
height: 90px;  /* Alto de la ventana */
background:#0F1226 ;  /* Color de fondo */
position:fixed;
bottom:0px;
left: 50%;
margin-left:-526px;
border: 1px solid white;  /* Borde de la ventana */
box-shadow: 5 5px 25px rgba(0,0,0,.1);  /* Sombra */
z-index:999;
}
#ventana-flotante #contenedorcookies {
padding: 25px 10px 10px 10px;
}
#ventana-flotante .cerrar {
float: right;
border-bottom: 1px solid #884EA0;
border-left:1px solid #884EA0;
color: #999;
background: white;
line-height: 17px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 18px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#ventana-flotante .cerrar:hover {
background: #ff6868;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#ventana-flotante #contenedorcookies .contenidocookies {
width:900px;
height:90px;
padding: 10px;
box-shadow: inset 1px 1px white;
background: white;  /* Fondo del mensaje */
border: 1px solid :#E6E6E6;  /* Borde del mensaje */
font-size: 15px;  /* Tamaño del texto del mensaje */
color: #555;  /* Color del texto del mensaje */
text-shadow: 1px 1px white;
margin: 0 auto;
border-radius:4px;
}
 
 
 .oculto{transition:3s;opacity:0;}

 
 /* adminitrador*/ 
 
 #contenido1{width:1050px; min-height:500px;float:left; margin:10px 0;}
 .titulo {width:1050px; height:60px;float:left;font-size:30px; color:white;text-align:center; font-family: 'Merriweather', seri; background-color:#2bb573;}
 .titu{position:relative; top:10px}
 #logocolegio{width:450px;height:450px; float:left; background-color:#F2F4F4;margin:10px 0}
 #img{position:relative; top:120px}
 #ex{width:600px; height:450px; float:left;background-color:#F2F4F4;margin:10px 0;line-height:25px;}
 #uno {text-align:left; font-family: 'Merriweather', seri;color:#0F1226;;font-size:20px;background-color:#F2F4F4; margin:15px 15px;}
 #dos {text-align:left;font-family:'Merriweather', seri;color:#0F1226;;margin:20px 15px;font-size:15px;background-color:#F2F4F4;line-height:25px;}
 #tres {text-align:left;font-family:'Merriweather', seri;color:#0F1226;;margin:20px 15px;font-size:15px;background-color:#F2F4F4;line-height:25px;}
 #cuatro{text-align:left;font-family:'Merriweather', seri;color:#0F1226;;margin:20px 15px;font-size:15px;background-color:#F2F4F4;line-height:25px;}
 #logoad{width:600px; height:380px; float:left; background-color:#F2F4F4; margin:10px 0;}
 #ex2{width:450px; height:380px; float:left; background-color:#F2F4F4; margin:10px 0;}
 #img1{position:relative; right:-50px;top:50px}
/*servicios*/

#contenidoservicios{width:1050px;min-height:800px;float:left; margin:10px 0; background-color:#F2F4F4;}
.titcon{font-family:'Merriweather', seri; font-size:15px;}
.titcon2{font-family:'Merriweather', seri; font-size:15px;color:white;  line-height:25px;}
#economica {width:240px;height:250px; float:left;background-color:#F2F4F4;overflow:hidden; border:1px solid #2bb573; border-radius:120px; margin:30px 10px;}
#economica1{ width:240px;height:270px;position:relative;top:80px;transition:all 1s; background-color:#2bb573;  } 
#economica:hover #economica1{top:-140px;}

#morosidad {width:240px;height:250px; float:left;background-color:#F2F4F4;overflow:hidden; border:1px solid #2bb573; border-radius:120px; margin:30 10px;}
#morosidad1{ width:240px;height:270px;position:relative;top:80px;transition:all 1s; background-color:#2bb573; } 
#morosidad:hover #morosidad1{top:-140px;}

#averias {width:240px;height:250px; float:left;background-color:#F2F4F4;overflow:hidden; border:1px solid #2bb573; border-radius:120px; margin:30 10px;}
#averias1{ width:240px;height:270px;position:relative;top:80px;transition:all 1s; background-color:#2bb573; } 
#averias:hover #averias1{top:-140px;}

.presu {width:240px;height:250px; float:left;background-color:#F2F4F4;overflow:hidden; border:1px solid #2bb573; border-radius:120px; margin:30px 10px;}
.presu1{ width:240px;height:270px;position:relative;top:80px;transition:all 1s; background-color:#2bb573; } 
.presu:hover .presu1{top:-140px;}

/* Contacto */

#contenidocont{width:1050px;min-height:600px;float:left; margin:5px 0; background-color:#F2F4F4;}
#datos{width:525px; height:500px; float:left; margin:10px 0;}
.titulodatos{width:520px; height:60px;float:left;font-size:30px; color:white;text-align:center; font-family: 'Merriweather', seri; background-color:#2bb573; margin:0px 0px 5px 0px;}
#direccion{width: 525px; height:150px; float:left;margin: 30px 0; }
#telefono{width: 200px; height:200px; float:left;margin:0 20px 0px 40px;}
#email{width: 200px; height:200px; float:left; margin:0 20px 0px 20px;}
.email{text-decoration:none;}
.dir {font-family:'Merriweather', seri; font-size:15px; color:#2bb573 }

.dir2{font-family:'Merriweather', seri; font-size:15px; color:#0F1226; }
.iconos:hover{animation-name:animacioniconos; animation-duration:3s}

@keyframes animacioniconos { 

50% {transform:rotate(10deg) scale(1.2);}
100% {transform:rotate(-10deg) scale(1.1);} }
#orde{position:relative; top:-25px;border-radius:20px;}
#formulario1{width:525px; height:820px;float:left;}
#formulario{width:525px; height:60px; float:left; margin:10px 0;}

#presupuesto2{width:490px; height:820px;float:left; position:relative; top:0px; left:20px;}
#datoscontactos{width:200px;color:#2bb573; font-size:20px;text-align:center; font-family: 'Merriweather', seri;}
fieldset{border-radius:30px; border: 2px solid #2bb573}

input,textarea{width:450px;padding:5px;border-radius:5px;} 

.ser{width:20px; background-color:yellow;}
input:focus{border:2px solid #2bb573; background-color:#2bb573;color:white}
.lf{font-size:20px; color:#2bb573}
#boton{width:122px;margin:10px}


/*validacion de formulario */

input:focus:invalid + span:after{
    content: ' ✖ ';
    color: red;
    position: relative;
    bottom:25px;
    left: 452px;
	
}

input:valid + span:after{
    content: ' ✔︎';
     color: green;
    position: relative;
    top: -20px;
    left:452px;