@import url(https://fonts.googleapis.com/css?family=Lato|Raleway:100,200,300,300i,400,400i,500,500i,600,600i,700,800,900);

.wrapper{width:100%;height: auto;}
.margen{position: relative; width: 100%;height: auto;max-width: 1100px;min-width: 320px;min-height: 100%;margin: 0 auto;}
.img-responsive{display: block;max-width: 100%;height: auto;}
#header .header{width: 100%;min-height: 380px;background: black;position: absolute;top:0;left: 0;z-index: 1;}
#header .encabezado{position: relative;z-index: 2;width: 100%;height: auto;min-height: 125px;}
#header .encabezado .columna{float: left;width: 50%;min-height: 125px;position: relative;}
#header .encabezado .columna #logotipo{bottom: 8%;left:5%;max-width: 400px;position: absolute;}
#header .encabezado .columna .datos{width: 100%;text-align: right;position: absolute;top: 30%;font-family: '',sans-serif;}
#header .encabezado .columna .datos #contacto{font-family: 'Raleway',sans-serif;font-weight: 300;color: #1ca9e2;font-size: 1.1em;background: url("../images/linea.png");
    background-repeat: no-repeat;
    background-position: right bottom;min-height: 24px;}
#header .encabezado .columna .datos #telefono{font-family: 'Lato',sans-serif;color: #fff;font-weight: 300;font-size: 1.1em;}
#header .encabezado .columna .datos #telefono p{margin: 3px 0 8px 0;}
#header .encabezado .columna .datos #telefono .bold{font-weight: 500;font-size: 1.2em;}
.margenBanner{position: relative; width: 100%;height: auto;max-width: 1250px;min-width: 320px;min-height: 100%;margin: 0 auto;z-index: 2;background: #fff;}
.margenBanner .navbar{width: 100%;background: #fff;text-align: center;min-height: 45px;}
.margenBanner .navbar .menu{list-style: none;padding-top:1%;position: relative;text-align: center;margin: 0;padding: 11px 0 0 0;}
.margenBanner .navbar .menu li{display: inline-block;padding: 0 10px;}
.margenBanner .navbar .menu li.separacion{display: inline-block;padding: 0px;}
.margenBanner .navbar .menu li a{font-family: 'Raleway',sans-serif;font-weight: 600;color: #002749;text-decoration: none;}
.margenBanner .navbar .menu li a.active{font-weight: 800;}
.margenBanner .navbar .menu li a:hover{font-weight: 800;}

.margenBanner .navbar .responsivo{position: absolute;right: 10px;top: 0px;cursor: pointer;margin-top: 5px;display: none;}
.margenBanner .navbar .responsivo .boton{float:left;width: 25px;cursor: pointer;display: block;z-index: 3;border:1px solid #000;padding:8px 7px 5px 7px;overflow:hidden;}
.margenBanner .navbar .responsivo .boton .linea{background: #000;height: 3px;margin-bottom: 3px;}

.margenBanner .banner{width: 100%;min-height: 640px;height: 100%;background: url("../images/backgroundBanner.jpg");background-repeat: no-repeat;
background-position: center center;background-size: cover;}
.margenBanner .banner .contenido{width: 100%;position: relative;padding-top: 8%;}
.margenBanner .banner .contenido h2{font-size: 2em;margin:10px 0;font-family: 'Raleway',sans-serif;font-weight: 500;color: #fff;/*text-shadow: 1px 5px 7px rgba(0, 0, 0, 0.71);*/text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);}
.margenBanner .banner .contenido h1{font-size: 2.8em;margin: 0;font-family: 'Raleway',sans-serif;font-weight: 600;color: #ffdf06;/*text-shadow: 1px 5px 7px rgba(0, 0, 0, 0.71);*/text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);}
.margenBanner .banner .form-contacto{width: 100%;max-width: 300px;position: absolute;background: #fff;min-height: 400px;margin-top:5%;-webkit-box-shadow: 7px 7px 27px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 7px 27px 0px rgba(0,0,0,0.75);
box-shadow: 7px 7px 27px 0px rgba(0,0,0,0.75);}
.margenBanner .banner .form-contacto .form{padding: 20px;}
.margenBanner .banner .form-contacto .form h1{font-family: 'Raleway',sans-serif;font-weight: 500;margin: 0;letter-spacing: 1px;color: #383838;text-align: center;}
.margenBanner .banner .form-contacto .form p{font-family: 'Raleway',sans-serif;font-weight:300;color: #383838;text-align: center;padding-bottom: 4px;}
.margenBanner .banner .form-contacto .form .campo{width: 100%;height: auto;min-height: 40px;border: 0; border-bottom: 2px solid #d7d7d7;}
.margenBanner .banner .form-contacto .form .campo input{width: 100%;border:0;padding-top: 15px;font-family: 'Raleway',sans-serif;font-weight: 600;font-size: .9em;}
.margenBanner .banner .form-contacto .form .campo span {color:#898989;font-family: 'Raleway',sans-serif;font-weight: 600;font-size: .9em;}
.margenBanner .banner .form-contacto .form .campo label{ color: red;}
.margenBanner .banner .form-contacto .form .campoBoton{width: 100%;height: auto;min-height: 40px;text-align: center;padding-top:10%;position: relative;}
.margenBanner .banner .form-contacto .form .campoBoton input.boton{padding:12px 60px;background-color: #002a4e;    border: 0;color: #fff;font-family: 'Raleway',sans-serif;
border-radius: 5px;font-weight: 500;cursor: pointer;}
.margenBanner .banner .form-contacto .form .campoBoton input.boton:hover{background-color: #03335d;}

#somos{top: 7em;position: relative;min-height: 250px;width: 100%;background: url("../images/backgroundSomos.png");background-repeat: no-repeat;
background-position: center center;background-size: cover;}
#somos .contenido{text-align: center;}
#somos .contenido h1{margin:0;position:relative;color:#fff;padding-top:5%;font-family: 'Raleway',sans-serif;font-weight: 800;}
#somos .contenido p{font-family: 'Raleway',sans-serif;font-weight: 300;color: #fff;padding: 1% 12%;}

#proyectos{top: 6em;position: relative;min-height: 560px;width: 100%;background: url("../images/backgroundProyectos.jpg");background-repeat: no-repeat;
background-position: center center;background-size: cover;}
#proyectos .contenido{text-align: center;}
#proyectos .contenido h1{margin:0;position:relative;color:#00284a;padding-top:5%;font-family: 'Raleway',sans-serif;font-weight: 800;}
#proyectos .contenido p{font-family: 'Raleway',sans-serif;font-weight: 300;color: #002a4e;padding: 1% 12%;margin: 0;}
#proyectos .contenido ul{list-style: none;padding-top:4%;position: relative;text-align: center;margin: 0;}
#proyectos .contenido ul li{display: inline-block;margin: 0px 15px;background: #fff;color:#002a4e;padding: 5px 15px}
#proyectos .contenido ul li:hover{background: #1ca9e2;color:#fff;padding: 5px 15px}
#proyectos .contenido ul li a{color:#002a4e;text-decoration: none;font-family: 'Lato',sans-serif;font-weight: 700;}
#proyectos .contenido ul li:hover a{color:#fff;}

#proyectos .contenido ul li.active,  #proyectos .contenido ul li.active a {background: #1ca9e2;color:#fff;}

#proyectos .proyectos{width: 100%;height:auto;position: relative;}

#proyectos .proyectos#proyectos1{display: block;}
#proyectos .proyectos#proyectos2{display: none;}
#proyectos .proyectos#proyectos3{display: none;}

#proyectos .proyectos .proyecto{float:left;width: 33.333333%;}

#proyectos .proyectos .proyecto .circulo{margin:0 auto;border:0;border-radius: 50%;width: 100%; max-width: 300px; min-height: 300px;position: relative;}
#proyectos .proyectos .proyecto .circulo2{overflow: hidden;background-color: rgba(89,28,169,.226);opacity: .7;}
#proyectos .proyectos .proyecto .circulo2:hover{}

#proyectos .proyectos .proyecto .circulo#project1{background: url("../images/proyecto1.png");background-repeat: no-repeat;background-size: 100% 100%;background-position: 0 0;}
#proyectos .proyectos .proyecto .circulo#project2{background: url("../images/proyecto2.png");background-repeat: no-repeat;background-size: 100% 100%;background-position: 0 0;}
#proyectos .proyectos .proyecto .circulo#project3{background: url("../images/proyecto3.png");background-repeat: no-repeat;background-size: 100% 100%;background-position: 0 0;}
.clearfix{width: 100%;height: 50px;position: relative;}

.outer-box {border-radius: 50%;width: 100%;height: auto;display: block;position: relative;margin: 15px;background: black;max-width: 270px;min-height: 270px;}
.outer-box .inner-box {border-radius: 50%;overflow: hidden;background-color: rgba(28,169,226,.75);height: 100%;width: 100%;opacity: .8;top: 0;left: 0;position: absolute;padding: 0;transition: opacity .5s;}
.outer-box .inner-box p {color: #fff;text-align: center;font-size: 1em;
font-family: 'Raleway',sans-serif;font-weight:500;padding: 0 10px;text-shadow:  1px 1px 1px #000;margin: 0px;
position: relative;top:44%;}
.outer-box:hover .inner-box {opacity: 0;transition: opacity .5s;z-index: 99;}
.outer-box  a{display: none;color: #fff;left: 38%;top: 2em;position: relative;
	text-decoration: none;z-index: 999; border: 2px solid #fff;width: 65px;height: 65px;text-align: center;border-radius: 50%;font-size: 3em;}
.outer-box:hover a{display: block;}

.outer-box#project1{background-image: url('../images/proyectos/proyecto1.jpg');background-size: cover;margin: 0 auto;}
.outer-box#project2{background-image: url('../images/proyectos/proyecto-jala.jpg');background-size: cover;margin: 0 auto;background-position: -120px 0;}
.outer-box#project3{background-image: url('../images/proyectos/proyecto3.jpg');background-size: cover;margin: 0 auto;}
.outer-box#project4{background-image: url('../images/proyectos/proyecto4.jpg');background-size: cover;margin: 0 auto;}
.outer-box#project5{background-image: url('../images/proyectos/proyecto5.jpg');background-size: cover;margin: 0 auto;}
.outer-box#project6{background-image: url('../images/proyectos/proyecto6.jpg');background-size: cover;margin: 0 auto;}
.outer-box#project7{background-image: url('../images/proyectos/proyecto7.jpg');background-size: cover;margin: 0 auto;}
.outer-box#project8{background-image: url('../images/proyectos/proyecto8.jpg');background-size: cover;margin: 0 auto;}
.outer-box#project9{background-image: url('../images/proyectos/proyecto9.jpg');background-size: cover;margin: 0 auto;}




#datos{top:6em;position: relative;width: 100%;min-width: 250px;}
#datos .franja{background: #1ca9e2;width: 100%;min-height: 15px;}
#datos .datos{background: url("../images/backgroundDatos.png");background-repeat: no-repeat;
background-position: center center;background-size: cover;min-height: 235px;position: relative;}
#datos .contenido{width: 100%;position: relative;min-height: 235px;}
#datos .contenido .dato{width: 33.333333%;float: left;position: relative;min-height: 200px;}

#datos .contenido .dato img{width: 100px;margin: 0 auto;top:10%;padding-top: 13%;}
#datos .contenido .dato .datoCircular{border:6px solid #fff; margin: 0 auto; width: 150px;min-height: 150px;border-radius: 50%;margin-top: 2em;text-align: center;}
#datos .contenido .dato .datoCircular h1{color:#00a9e3;font-family: 'Lato',sans-serif;font-weight: 900;font-size: 3em;margin-bottom: 3px;margin-top: 25px;}
#datos .contenido .dato .datoCircular p{color:#fff;font-family: 'Raleway',sans-serif;font-weight: 700;font-size: .8em;margin:0;padding: 0 15px;}



#hacemos{top:6em;position: relative;min-height: 650px;width: 100%;}
#hacemos .contenido{text-align: center;}
#hacemos .contenido h1{font-family: 'Raleway',sans-serif;font-size: 2.3em;padding-top: 5%;font-weight: 800;color: #00294b;margin-bottom: 0;}
#hacemos .contenido p{font-family: 'Raleway',sans-serif;font-size: 1em;padding-top: 5%;font-weight: 300;color: #4a4a4a;padding:2em 10em;}
#hacemos .servicios{width: 70%;margin: 0 auto;position: relative;}
#hacemos .servicios .servicio{position: relative;width: 100%;float: none;height: 300px;}
#hacemos .servicios .servicio .box{width: 90%;margin: 0 auto;position: relative;overflow: hidden;height: 100%;
    min-height: 350px;}


#hacemos .servicios .servicio .box img{position: relative;left: 0;  -webkit-transition: all 300ms ease-out;-moz-transition: all 300ms ease-out;-o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;transition: all 300ms ease-out;width: 100%;height: 350px;}
#hacemos .servicios .servicio .box .overbox {
  background-color: #00294c;position: absolute;top: 0;left: 0;color: #fff;z-index: 100;
  -webkit-transition: all 300ms ease-out;-moz-transition: all 300ms ease-out;-o-transition: all 300ms ease-out;-ms-transition: all 300ms ease-out;transition: all 300ms ease-out;opacity: 0;  width: 100%;height: 100%;text-align: center;
}

#hacemos .servicios .servicio .box .overbox a{color: #fff; text-decoration: none;width: 45px;  height: 45px;position: relative;
	border: 2px solid #fff;border-radius: 50%;padding: 2% 4%;}


#hacemos .servicios .servicio .box:hover .overbox { opacity: .8; }

#hacemos .servicios .servicio .box .overtext{ -webkit-transition: all 300ms ease-out;-moz-transition: all 300ms ease-out;-o-transition: all 300ms ease-out;-ms-transition: all 300ms ease-out;transition: all 300ms ease-out;transform: translateY(40px);-webkit-transform: translateY(40px);}

#hacemos .servicios .servicio .box .title {font-size: 2.5em;text-transform: uppercase;opacity: 0;transition-delay: 0.1s;transition-duration: 0.2s;
	    font-family: 'Arial',sans-serif;font-size: 3em;}

#hacemos .servicios .servicio .box:hover .title,.box:focus .title {top: 32%;position: relative;opacity: 1;  transform: translateY(0px); -webkit-transform: translateY(0px);}
#hacemos .servicios .servicio .box .tagline {top: 40%;position: relative;font-size: 1.2em; font-family: 'Raleway',sans-serif; opacity: 0;transition-delay: 0.2s;transition-duration: 0.2s;}
#hacemos .servicios .servicio .box:hover .tagline,.box:focus .tagline {opacity: 1;transform: translateX(0px);-webkit-transform: translateX(0px);}
#llamada{top:6em;position: relative;min-height: 575px;width: 100%;background: url("../images/backgroundLlamada.png");background-repeat: no-repeat;background-size: 100% 100%;background-position: 0 0;}
#llamada #logotipo{max-width: 400px;padding: 70px 10px 20px 10px;margin-bottom: 1em;}

#llamada h1{font-family: "Raleway",sans-serif; font-size:4em !important;color: #ffdf06;margin:2px 0;font-weight: 500; text-shadow: 2px 2px 2px #000;}
#llamada span{color: #fff;}

#llamada a{background: #fff;color: #004078;padding: 15px 55px;text-decoration: none;font-family: 'Raleway';    font-weight: 800;
    border-radius: 4px;position: relative;top: 2em;font-size: 1.7em;}

#llamada a:hover{background: #ffdf06;}

#llamada #inge{max-width: 350px;float: right;bottom: -210px;position: absolute;right: 10PX;}

#footer{top:5em;position: relative;min-height: 60px;background: black; text-align: center;}
#footer p{font-family: "Raleway",sans-serif;font-weight: 300;color: #fff;padding-top: 2%;}
#footer p span{font-weight: 700;color: #fff;}
#footer p a{font-weight: 700;color: #fff;text-decoration: none;}

.slider-wrap {
position: relative;
margin: 0px auto;
width: 100%;}
.slider {position: relative;width: 90%;margin: auto;}
ul {margin: 0;padding: 0;}
ul li {list-style: none;text-align: center;}
ul li span {display: inline-block;vertical-align: middle;width: 300px;height: 300px;background: black;}
.slider-arrow {position: absolute;top: 122px;width: 20px;height: 20px;background: black;color: #fff;text-align: center;text-decoration: none;border-radius: 50%;}
.sa-left {left: 10px;}
.sa-right {right: 10px;}

.modal-contacto{width: 100%;
    max-height: 550px;
    height: 100%;
    min-height: 400px;
    overflow: hidden;}
.modal-contacto .formulario {
    width: 100%;
    height: inherit;
    float: left;
    background: #fff;
    text-align: left;
}

.modal-contacto .formulario p.texto {
    color: #000;
    font-family: 'Raleway',sans-serif;
    font-weight: 300;
    font-size: 1.2em;
    padding-left: 20px;
    padding-top: 10px;
    text-align: center;text-align: center;
}



.modal-contacto .formulario h3 {
    color: #000;
    font-family: 'Raleway',sans-serif;
    font-weight: 700;
    padding-left: 20px;
    padding-top: 10px;
    text-align: center;
}
.remodal {
    max-width: 900px !important;
}

.modal-contacto .formulario {
    width: 100%;
    height: inherit;
    float: center;
    background: #fff;
    text-align: left;
}

.modal-contacto .formulario form .campos {
    padding-left: 20px;
    padding-right: 20px;
    width: 97%;
}

.modal-contacto .formulario form .campo1{
    width: 50%;
    float: left;
    padding-bottom: 20px;
}

.modal-contacto .formulario form .campo2{
    width: 100%;
    float: none;
    padding-bottom: 20px;
}

.modal-contacto .formulario form .campos .formCampo {
    width: 95%;
    border: 0;
    height: 35px;
    font-family: 'Raleway',serif;
    font-weight: 400;
    font-size: 1em;
    background: #f4f4f4;
    padding-left: 5px;
}

.modal-contacto .formulario form .campos .formCampoTA {
    width: 97.5%;
    border: 0;
    height: 35px;
    font-family: 'Raleway',serif;
    font-weight: 400;
    font-size: 1em;

    background: #f4f4f4;
    padding-left: 5px;
}

.modal-contacto .formulario form .campos .campo2 textarea{
  height: 80px;
}

.modal-contacto .formulario form .campos .btn-link{
padding: 10px 90px;
border: 0;
background: #3d72e5;
color: #fff;
font-family: 'Raleway',sans-serif;
}

.modal-contacto .formulario form .campos .btn-link:hover{
    background: #477ae8;
    }

 .modal-contacto .formulario form .campos .error {
    font-size: .8em;
    color: #fb5662;
    display: inline-block;
}