@font-face {
	font-family: 'DINPro-Bold';
    src: url('fonts/din-bold/original_DINPro-Bold.eot?#iefix') format('embedded-opentype'), 
         url('fonts/din-bold/original_DINPro-Bold.woff') format('woff'),
         url('fonts/din-bold/original_DINPro-Bold.ttf') format('truetype'),
         url('fonts/din-bold/original_DINPro-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'DINPro-Light';
    src: url('fonts/din-light/original_DINPro-Light_4.eot?#iefix') format('embedded-opentype'), 
         url('fonts/din-light/original_DINPro-Light_4.woff') format('woff'),
         url('fonts/din-light/original_DINPro-Light_4.ttf') format('truetype'),
         url('fonts/din-light/original_DINPro-Light_4.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
*{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
body{margin: 0;}
#container{width: 100%;overflow: hidden; clear: both;}
#header{width: 100%; position: fixed; height: 130px; z-index: 500;background-color: rgba(255,255,255,0.8); }
#menu{width: 90%; height:130px; margin: 0 auto; margin-top: 24px;}
#logo{width: 248px; height: 74px; float:left;}
#webmail{padding: 5px 13px; font-family: 'DINPro-Bold'; font-size: 12px; color: #fff; width: 80px; background: url(../images/back-webmail.png) no-repeat; height: 27px; float: right; margin-top: 14px;}
ul#botonera{display:block; height:20px; float: right; font-family: 'DINPro-Bold'; font-size: 16px; list-style: none; color: #3A7BAF; margin:0; margin-top:40px; margin-right: -113px; margin-left: 30px;}
#botonera li{ float: left; margin: 10px;}
#botonera li a{text-decoration: none; color: #3A7BAF;}
#botonera li a:hover{text-decoration: none; color: #265377;}
#banner-imagen {position: relative;}
#banner-imagen img{width: 100%;}
#scroll-clientes{z-index: 999; width:100%; bottom:0; background: url(../images/back-clientes.png) no-repeat; background-size: cover; height: 106px; position: absolute; bottom: 62px;}
#logos-clientes{width: 1031px; height: 90px; margin: 0 auto;}
#logos-clientes img{width: auto; margin: 15px;}
.text-banner{text-shadow: 2px 2px 8px #000; font-family: 'DINPro-Bold'; font-size: 35px; position: absolute; top: 34%; color: #fff; margin: 5%;}
.linea1{content: ''; border-left: 30px solid transparent; border-right: 30px solid transparent; left: 50%; margin-left: -30px; position: absolute; z-index: 1; background: url(../images/grey-invert-arrow.png) center bottom no-repeat; border: none;bottom: 0;height: 42px;left: 0;margin: 0; width: 100%; z-index: 99;}
.linea2{content: ''; border-left: 30px solid transparent; border-right: 30px solid transparent; left: 50%; margin-left: -30px; position: absolute; z-index: 1; background: url(../images/grey-invert-arrow2.png) center bottom no-repeat; border: none;bottom: 0;height: 42px;left: 0;margin: 0; width: 100%;}
.linea3{content: ''; border-left: 30px solid transparent; border-right: 30px solid transparent; left: 50%; margin-left: -30px; position: absolute; z-index: 1; background: url(../images/grey-invert-arrow3.png) center bottom no-repeat; border: none;bottom: 0;height: 42px;left: 0;margin: 0; width: 100%;}
.linea4{content: ''; border-left: 30px solid transparent; border-right: 30px solid transparent; left: 50%; margin-left: -30px; position: absolute; z-index: 1; background: url(../images/grey-invert-arrow4.png) center bottom no-repeat; border: none;bottom: 0;height: 42px;left: 0;margin: 0; width: 100%;}
#quienes-somos{position:relative; overflow: hidden; margin: auto; width: 90%; padding: 5%; padding-top: 150px; clear: both; padding-bottom: 8%;}
#quienes-somos h2{margin: 0; margin-bottom: 60px; background: url(../images/back-linea1.png) no-repeat top; background-size: inherit; font-family: 'DINPro-Light'; font-size: 40px; color: #3A7BAF; text-align: center;}
p{font-family: 'DINPro-Light'; margin: 0;}
#texto-quienes-somos{width: 45%; font-size: 20px; text-align: center; float: left; font-family: 'DINPro-Light'; color: #000;}
#texto-quienes-somos span{font-family: 'DINPro-Bold'; color: #3379B1; font-size: 24px;}
#img-quienes-somos{width: 50%; float: right;}
#img-quienes-somos img{width: 100%;}
#flecha2{}
#ingenieria{position: relative; overflow: hidden; margin: auto; width: 90%; padding: 5%; background: #3379B1; padding-top: 160px; padding-bottom: 8%;}
#ingenieria h2{margin: 0; margin-bottom: 10px; background: url(../images/back-linea1.png) no-repeat top; background-size: inherit; font-family: 'DINPro-Light'; font-size: 40px; color: #fff; text-align: center;}
#ingenieria p{font-family: 'DINPro-Light'; color: #fff; text-align: center; margin-bottom: 40px;}
#cuadro-ingenieria1{width: 27%; float:left; background: rgba(255,255,255,0.7); padding: 2%; margin: 1%;}
#cuadro-ingenieria2{width: 31%; float:left; margin: 1%;}
#cuadro-ingenieria3{width: 31%; float:left; margin: 1%;}
#cuadro-ingenieria1 p{font-family: 'DINPro-Light'; color: #000; text-align: left; margin: 0;}
ul.ingenieria-text{font-family: 'DINPro-Light'; color: #000; padding: 0; padding-left: 18px;}
ul.ingenieria-text li{list-style-image: url(../images/vineta.png);}
#cuadro-ingenieria2 .text-ing{font-family: 'DINPro-Bold'; font-size: 16px; margin: 10px 0 10px 0; margin-bottom: 20px;}
#cuadro-ingenieria3 .text-ing{font-family: 'DINPro-Bold'; font-size: 16px; margin: 10px 0 10px 0; margin-bottom: 20px;}
#gerencia{position: relative; overflow: hidden; margin: auto; width: 90%; padding: 5%; background: #ddd; padding-top: 160px; padding-bottom: 8%;}
#gerencia h2{margin: 0; margin-bottom: 10px; background: url(../images/back-linea2.png) no-repeat center; background-size: inherit; font-family: 'DINPro-Light'; font-size: 40px; color: #000; text-align: center;}
#gerencia p{font-family: 'DINPro-Light'; color: #000; text-align: center; margin-bottom: 40px;}
#cuadro-gerencia1{width: 31%; float:left; margin: 1%;}
#cuadro-gerencia2{width: 31%; float:left; margin: 1%;}
#cuadro-gerencia3{width: 31%; float:left; margin: 1%;}
#cuadro-gerencia1 .text-ing{font-family: 'DINPro-Bold'; font-size: 16px; margin: 10px 0 10px 0; margin-bottom: 20px;}
#cuadro-gerencia2 .text-ing{font-family: 'DINPro-Bold'; font-size: 16px; margin: 10px 0 10px 0; margin-bottom: 20px;}
#cuadro-gerencia3 .text-ing{font-family: 'DINPro-Bold'; font-size: 16px; margin: 10px 0 10px 0; margin-bottom: 20px;}
#clientes{position: relative; overflow: hidden; margin: auto; width: 90%; padding: 5%; background: url(../images/back-clientes2.jpg); background-size:cover; padding-top: 160px; padding-bottom:6%;}
#clientes h2{margin: 0; margin-bottom: 10px; background: url(../images/back-linea1.png) no-repeat top; font-family: 'DINPro-Light'; font-size: 40px; color: #fff; text-align: center;}
#clientes p{font-family: 'DINPro-Light'; color: #fff; text-align: center; margin-bottom: 40px;}
/*ESTO ES TEMPORAL HASTA QUE HALLA MAS CLIENTES*/
#clientes-logos{margin: 0 auto; height: 400px; width: 593px;}
#clientes-logos img{margin: 10px; float: left;}
/*ESTO ES TEMPORAL HASTA QUE HALLA MAS CLIENTES*/
#contacto{position: relative; overflow: hidden; margin: auto; width: 90%; padding: 5%; background: #fff; padding-top: 160px; padding-bottom: 8%;}
#contacto h2{margin: 0; margin-bottom: 10px; background: url(../images/back-linea1.png) no-repeat top; background-size: inherit; font-family: 'DINPro-Light'; font-size: 40px; color: #000; text-align: center;}
.iframe-contac{height: 416px;margin-top: 50px;}
#formulario{clear: both; overflow: hidden;}
#form1{ float: right; width: 60%;}
#form2{ float: right; margin-top: -231px; width: 50%;}
#form3{ float: left; width: 350px; padding: 0 40px 0 26px; position: relative; border-right: 1px solid #ccc;}
form#form_contacto{ float: left; width: 59%;}
.textos_form, .textos_form2, .textos_form3, .textos_form4{ margin-top: 15px;  width: 50%;}
.textos_form5{ width: 48%; float: right; margin-top: -236px;}
input#nombres, input#email, input#tema{ border-radius: 5px; border: #3579B1 solid 1px; padding: 10px; width: 90%; font-size: 12px; font-weight: normal; margin: 5px 0 5px 0;}
textarea{border-radius: 5px; border: #3579B1 solid 1px; padding: 10px; width: 95%; font-size: 12px; font-weight: normal; margin: 5px 0 5px 0; height: 209px; }
.btn-enviar{ background-color:#3579B1; border-radius:5px; border: 0; padding: 10px 30px 10px 30px; font-family: 'DINPro-Bold'; font-size: 20px; color: #fff; text-transform: uppercase;}
#ico-direccion{ width: 11px; height: 18px; position: absolute; left: 6px; top: 19px;}
#ico-telefono{ width: 19px; height: 14px; left: 0; top: 52px; position: absolute;}
#ico-mail{ width: 19px; height: 14px; left: 0; top: 91px; position: absolute;}
p.contac{ margin: 15px 0 15px 0; font-family:'DINPro-Light'}
p.contac a{ color: #000; text-decoration: none;}
#form3 .mapa{margin-left: -20px; margin-top: 10px;}
footer{ background: #3579B1; height: 89px;}
#footer{ width: 90%;margin: 0 auto;padding-top: 18px;}
#footer1{width: 520px; color: #fff; float: left;}
#footer1 p{color: #fff; font-size: 14px; line-height: 1.3;}
#footer1 p a{color: #fff;}
#footer2{color: #fff; line-height: 1.3; text-align: right; width: 330px; float: right;margin-top: 11px;}
#footer2 p{color: #fff; font-size: 14px; line-height: 1.3; text-align: right}
#logo-footer{float: left;}




@media screen and (max-width: 1150px){
    #header{height: 100px;}
    #menu{height: 77px;}
    #logo{width: 165px; height: 50px;}
    #logo img{width: 190px; height: 58px;}
    #scroll-clientes{background-size: 100% 80%; height: 106px; bottom: 39px;}
    #quienes-somos{padding-top: 110px; padding-bottom: 9%;}
    #ingenieria{padding-top: 110px;  padding-bottom: 10%;}
    ul.ingenieria-text{font-size: 14px;}
    #cuadro-ingenieria1 p{font-size: 14px;}
    #webmail{margin-top: 0; height: 17px; margin-left: 46px;}
    ul#botonera{font-size: 15px; margin-right: 0px; margin-top: -23px; padding: 0; margin-left: 0px; clear: both;}
    #botonera li{margin: 5px;}
    #texto-quienes-somos{font-size: 18px;}
    #texto-quienes-somos span{font-family: 'DINPro-Bold'; color: #3379B1; font-size: 20px;}
    #gerencia{padding-top: 110px; padding-bottom: 70px;}
    #clientes{padding-top: 110px;  padding-bottom: 50px;}
    #contacto{padding-top: 130px;}
    #form1{width: 49%;}
    .textos_form5{ width: 95%; float: none; margin-top: 0;}
    .textos_form, .textos_form2, .textos_form3, .textos_form4{ margin-top: 10px;  width: 100%;}
    textarea{height: 53px;}
    .iframe-contac{height: 410px;}

}

@media screen and (max-width: 700px) {
    #container{overflow: none;}
    #header{height: 83px; width: 100%;}
    #menu{width: 82%; margin-top: 24px; margin-right: 3%; float: right; margin-top: 15px;}
    #logo{width: 140px; height: 42px;}
    #logo img{width: 140px; height: 42px;}
    #banner-imagen img{height: 68%; width: 200%;}
    ul#botonera{display:none; }
    #webmail{margin-top: 14px; height: 17px; margin-left: 0;}
    #texto-quienes-somos{width: 100%; font-size: 20px; float: none;}
    #quienes-somos{padding-top: 40px; padding-bottom: 80px;}
    #quienes-somos h2{margin: 0; margin-bottom: 18px; background: url(../images/back-linea1.png) no-repeat top; font-size: 30px;}
    #texto-quienes-somos{font-size: 16px;}
    #texto-quienes-somos span{font-family: 'DINPro-Bold'; color: #3379B1; font-size: 18px;}
    #img-quienes-somos{width: 100%; float: none; margin-top: 40px;}
    #ingenieria{padding-top: 80px; overflow: hidden; margin: auto; width: 90%; padding: 5%; background: #3379B1; background-size: 100%; padding-top: 70px; padding-bottom: 80px;}
    #ingenieria h2{ margin: 0; margin-bottom: 18px; background: url(../images/back-linea1.png) no-repeat top; font-size: 30px;}
    #cuadro-ingenieria1{width: 92%; float: none; padding: 4%; margin-bottom: 20px;}
    #cuadro-ingenieria2{width: 100%; float: none;}
    #cuadro-ingenieria3{width: 100%; float: none;}
    #cuadro-gerencia1{width: 100%; float: none;}
    #cuadro-gerencia2{width: 100%; float: none;}
    #cuadro-gerencia3{width: 100%; float: none;}
    #gerencia{padding-top: 80px; padding-bottom: 80px;}
    #gerencia h2{ font-size: 30px;}
    #clientes{padding-top: 70px; padding-bottom: 110px;}
    #clientes h2{ font-size: 30px;}
    #scroll-clientes{display: none;}
    /*ESTO ES TEMPORAL HASTA QUE HALLA MAS CLIENTES*/
    #clientes-logos{margin: 0 auto; height: 590px; width: 100%;}
    #clientes-logos img{margin: 10px; float: left;}
    /*ESTO ES TEMPORAL HASTA QUE HALLA MAS CLIENTES*/
    #contacto{padding-top: 80px; position: relative;}
    #contacto h2{font-size: 30px;}
    .iframe-contac{height: 935px; margin-top: 10px; width: 100%;}
    #form3{width: 100%; margin-bottom: 30px;}
    #form1{float: none; width: 100%;}
    footer{height: 189px;}
    #footer1{width: 100%;}
    #footer1 p{font-size: 12px; text-align: center; margin-top: 6px;}
    #footer2{width: 100%;} 
    #footer2 p{font-size: 12px; text-align: center;} 
    #logo-footer{float: none; margin: 0 auto; width: 160px;}

}