/**{outline: 1px solid red;}*/
font-family: 'Roboto', sans-serif;

.portada{ width: 100%;}
.hero{
  background-image: url('../img/ninos_slider3.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
}
.hero .hoverAll{background: rgba(6,28,38,.5); height:100vh;}

body{font-family: 'Roboto', sans-serif;}
#map { width: 100%; height: 256px;}

.padding{padding: 30px;}
.datos-contacto{background: transparent;}
.datos-contacto .button{
  float: right;
  background: transparent;
  color:#fff; 
  padding:2px 30px; 
  border: 1px solid #fff; 
  margin: 15px auto;
}
.datos-contacto .button:hover{background-color: rgba(251,65,65,.8);}
.datos-contacto p{color: white;}
.datos-contacto .fa-cogs{
  font-size: 40px;
  padding: 20px 0;
  background: rgb(251,65,65);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 } 
.datos-ubicacion .fa-map-marker{width: 20px;}
.title{border-bottom: 1px solid #fff;padding-bottom: 5px; width: 100%; text-shadow: 0 1px 1px #000; color: #fff; }
.datos-ubicacion h3{margin:15px 20px 22px 20px; font-size: 2em; font-weight: 100; text-shadow: 0 1px 1px #000;}
.form-control, textarea{border: 1px  solid rgb(67, 86, 99); color: #000; margin-bottom: 15px;}
textarea{padding:6px 12px; border-radius:4px;  }
.mi-input:-webkit-input-placeholder { color: white;}
.datos-ubicacion{background: rgba(50,57,70,.7);  color: #fff; padding: 30px 30px 60px 30px;}
.redes a{ font-size:20px; color: rgb(255,255,255); text-decoration: none;}
.social{ margin: 25px auto 0; padding: 10px 0;}
.social .redes i{font-size: 23px; margin: auto; padding: 10px 5px; color: #fff; text-shadow: 0 1px 1px #000;}
.social .redes .facebook i{padding: 10px 15px;}
.redes li{height: 45px; width: 45px; border-radius: 50%; background: transparent; border: 1px solid #fff; margin-right: 7px;}
.redes li:hover{background: rgba(251,65,65,.8);}


@media (max-width: 2560px) { 
  .contacto-form{margin-top: 25%;}
  .title{font-size: 4.5rem; font-weight: bold; letter-spacing: 1px;}
  p{font-size: 17px;} 
  .datos-ubicacion h3{font-size:2.2em;}
}
@media only screen and (max-width: 1950px) { 
  .contacto-form{margin-top: 17%;}
  p{font-size: 16px;}
  .datos-ubicacion h3{font-size:2.2em; font-weight: 400;}
} 
@media only screen and (max-width: 1536px){
.contacto-form{margin-top: 13%;}
}
@media only screen and (max-width: 1440px) { 
  .contacto-form{margin-top: 8.5%;}
  p{font-size: 15px;}
  .datos-ubicacion {padding: 20px 30px 40px 30px;}
}
@media only screen and (max-width: 1366px) { 
  .contacto-form{margin-top: 10.5%;}
  .title{font-size: 3.5rem;}
  p{font-size: 14px;} 
  .datos-ubicacion h3{font-size:2em;}
 } 
@media only screen and (max-width: 1093px)  { 
  .contacto-form{margin-top: 7.2%;} 
  .datos-contacto{padding-top: 5px;}
  .title{font-size: 3.5rem;}
  .form-control{margin-bottom:7px;}
  .datos-contacto .button{margin:5px auto;}
  .datos-contacto .fa-cogs{font-size:35px;}
  .datos-ubicacion {padding: 5px 20px;}
 }
@media only screen and (max-width: 1024px) {
  .contacto-form{margin-top: 9.1%;}
  .title{font-size: 3.5rem;}
  .datos-ubicacion h3 {margin:15px 20px;}
  .datos-ubicacion {padding: 20px 20px 30px 20px;}
  .datos-contacto{padding: 0px; padding-right: 19px; padding-top: 5px;}
}
@media (max-width: 991px) {
  .hero{
  background-image: url('../img/ninos_slider3.jpg');
  background-size: cover;
  background-position:left;
  width: 100%;
  height: 100%;}
  .hero .hoverAll{background: rgba(6,28,38,.5); height:100%;}
  .datos-ubicacion{margin: 20px 0px 0px; padding: 20px 15px; }
  .datos-contacto{padding-top: 30px; padding-right: 15px; padding-left: 15px;}
} 
@media (max-width: 425px){
  .social .redes-web{padding: 0;}
  .social .col-xs-6{width: 100%; text-align: center;}
  .title{font-size: 3rem;}
  .datos-contacto{padding-top: 50px;}
}