/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* --fonts -- */

@font-face {
    font-family: 'Biko';
    src: url('../fonts/Biko.eot?') format('eot'), 
         url('../fonts/Biko.otf')  format('opentype'),
         url('../fonts/Biko.woff') format('woff'), 
         url('../fonts/Biko.ttf')  format('truetype'),
         url('../fonts/Biko.svg#Biko') format('svg');
}


@font-face {
    font-family: 'Biko-Bold';
    src: url('../fonts/Biko-Bold.eot?') format('eot'), 
         url('../fonts/Biko-Bold.otf')  format('opentype'),
         url('../fonts/Biko-Bold.woff') format('woff'), 
         url('../fonts/Biko-Bold.ttf')  format('truetype'),
         url('../fonts/Biko-Bold.svg#Biko-Bold') format('svg');
}

@font-face {
    font-family: 'TitilliumText22L-Light';
    src: url('../fonts/TitilliumText22L-Light.eot?') format('eot'), 
         url('../fonts/TitilliumText22L-Light.otf')  format('opentype'),
         url('../fonts/TitilliumText22L-Light.woff') format('woff'), 
         url('../fonts/TitilliumText22L-Light.ttf')  format('truetype'),
         url('../fonts/TitilliumText22L-Light.svg#TitilliumText22L-Light') format('svg');
}


body{ font-size: 16px; font-family: 'TitilliumText22L-Light'; color: #484848; background-color: #fff; overflow-x: hidden; position: relative;}

h1, h2, h3, h4, h5, h6{font-family: 'Biko-Bold';}

p{ line-height: 120%; color: #484848;}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.clear{ clear: both; }


/*-- menu -- */
.menu .cont  {position: absolute; top: 0px; z-index: 2; padding: 10px 0 0 0; min-width: 980px;}
.menu {width: 980px; margin: 0 auto;}
.menu .cont .logo {float: left; padding-left: 10px;}
.menu .cont nav {float: left; margin-left: 75px; padding-top: 60px;}
.menu .cont nav a {float: left; margin-right: 40px; position: relative; color: #fff; text-transform: uppercase; text-decoration: none;}
.menu .cont nav a:hover {text-decoration: underline;}
.menu .cont nav a:after {content: ''; display: block; height: 15px; width: 1px; background: #fff; position: absolute; right: -20px; top: 0px;}
.menu .cont nav a:last-child:after {display: none;}

.menu .cont .telefono p {color: #fff; margin: 20px auto; width: 270px;} 
.menu .cont .telefono {width: 270px; float: right; font-size: 14px; text-align: right; margin-top: 0px; }
.menu .cont .telefono ul {float: right; margin: 0 -20px 0 0;}
.menu .cont .telefono  li{float: left; margin-right: 20px; position: relative; color: #fff;}
.menu .cont .telefono li:after {content: ''; display: block; height: 15px; width: 1px; background: #fff; position: absolute; top: 0px; right: -10px;}
.menu .cont .telefono li:last-child:after {display: none;}


h1 {position: relative; text-transform: uppercase;}
h1:after {content: ''; display: block; height: 6px; width: 90px; background: #7DDCE9; position: absolute; bottom: -15px;}

/*--inicio --*/

.flex-control-nav {display: none;}

.flexslider {position: relative; min-width: 980px;}
.flexslider .slides {position: relative; z-index: 0;}
.flexslider .caption{width: 100%; position: absolute; top: 25%; left: 0px; z-index: 10;}
.flexslider .caption .scont{width: 980px; margin: 0 auto;}
.flexslider .caption .scont .sconts{position: relative; }
.flexslider .caption h1{font-size: 80px;  font-family: 'Biko'; color: #fff; padding-left: 0px; margin-bottom: 40px;}
.flexslider .caption p{color: #fff; font-size: 24px; padding-left: 0px; margin-bottom: 40px; width: 750px;}

.inicio {position: relative;}

#inicio {position: absolute;top: 0px;}


.info {height: 450px; width: 100%; position: relative; background: url(../images/fondo.jpg)center no-repeat; background-size: cover;}

#empresa {position: absolute; top: -65px;}

.cont {width: 980px; margin: 0 auto; position: relative;}
.info .cont .text {width: 570px; float: left;}
.info .cont img {position: absolute; top: -50px; right: 0px; z-index: 2;}

h5 {font-size: 34px; color: #484848; margin-top: 80px; margin-bottom: 30px;}
.info .cont .text p {font-size: 18px; line-height: 180%; width: 550px;}
.cont p a {text-decoration: none; color: #484848;}
.cont p a:hover {text-decoration: underline;}

.servicios {position: relative; height: 1080px;}
.servicios .banner {height: 296px; min-width: 980px; background: url(../images/banner-expertos.jpg) center top no-repeat; background-size: cover; text-align: center;}
.servicios .banner .cont {width: 980px; margin: 0 auto;}
h2 {color: #fff; font-size: 30px; line-height: 210%; text-align: center; text-transform: uppercase; font-family: 'Biko'; padding-top: 90px;}

 #servicios {position: absolute; top: 297px;}

.servicios h1 {font-size: 36px; padding-top: 90px; margin-bottom: 50px;}

.servicios .bloque {width: 175px; margin-left: 17px; float: left; text-align: center; margin-top: 70px; position: relative;}
.servicios .bloque:after {content: ''; display: block; height: 70px; width: 1px; background:#D5D5D5; position: absolute; top: 110px; right: -10px;}
.servicios .bloque:last-child:after {display: none;}
.servicios .bloque img {margin-bottom: 50px;-webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
h4 {height: 50px;-webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.servicios .bloque p {font-size: 14px;}

.servicios .bloque a {text-decoration: none; color:#6B6C6C;}
.servicios .bloque a:hover h4 {font-size: 22px; text-shadow: 1px 2px 3px #BCBCBC; }
.servicios .bloque a:hover img {-webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5);}

.proyectos {position: relative; padding-bottom: 100px;}
.hide {display: none;}

#proyectos {position: absolute; top: 0px;}
.proyectos .banner {height: 296px; background: url(../images/banner-recomendacion02.jpg)center top no-repeat ; background-size: cover; min-width: 980px;}

.proyectos h1 {font-size: 36px; padding-top: 90px; margin-bottom: 50px;}

.galeria {margin-top: 70px;}
.galeria a {float: left; margin-bottom: -4px; position: relative;}
.galeria .info {background: rgba(255, 255, 255, .8); height:130px;position: absolute; bottom: -150px;  -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; opacity: 0;}

.example-image-link {position: relative;}

/*.infouno {display: none;}
.infodos {display: none;}
.infotres {display: none;}
.infocuatro {display: none;}
.infocinco {display: none;}
.infoseis {display: none;}
.infosiete {display: none;}
.infoocho {display: none;}
.infonueve {display: none;}
.infodiez {display: none;}
.infoonce {display: none;}
.infodoce {display: none;}
.infotrece {display: none;}*/

h3 {font-size: 18px; padding: 30px 0 0 15px; color: #484848; text-transform: uppercase; position: relative; margin-bottom: 25px;}
h3:after {content: ''; display: block; height: 2px; width: 120px; background: #7DDCE9; position: absolute; bottom: -10px;}

.galeria .info p {font-size: 14px; padding: 0 0 0 15px;}

.uno:hover .info{bottom: 0px; opacity: 1;}
.dos:hover .info{bottom: 0px; opacity: 1;}
.tres:hover .info{bottom: 0px; opacity: 1;}
.cuatro:hover .info{bottom: 0px; opacity: 1;}
.cinco:hover .info{bottom: 0px; opacity: 1;}
.seis:hover .info{bottom: 0px; opacity: 1;}
.siete:hover .info{bottom: 0px; opacity: 1;}
.ocho:hover .info{bottom: 0px; opacity: 1;}
.nueve:hover .info{bottom: 0px; opacity: 1;}
.diez:hover .info{bottom: 0px; opacity: 1;}
.once:hover .info{bottom: 0px; opacity: 1;}
.doce:hover .info{bottom: 0px; opacity: 1;}
.trece:hover .info{bottom: 0px; opacity: 1;}


.contacto .error{ color: #fff; }
.contacto {position: relative;}
#contacto {position: absolute;}

.contacto .info {min-height: 600px; min-width: 980px; background: url(../images/banner-contacto.jpg)center no-repeat; background-size: cover; padding-top: 40px;}

.contacto h1 {font-size: 36px; color: #fff; padding-top: 60px; margin-bottom: 70px;}
.contacto .colum {width: 230px; float: left; margin-right: 15px;}
h6 {font-size: 18; color: #fff; text-transform: uppercase; margin-bottom: 10px; padding-top: 30px;}
.contacto .colum p {color: #fff; font-size: 14px; }
.contacto .colum .telefono {float: left; margin-right: 20px; position: relative;}
.contacto .colum .telefono:after {content: ''; display: block; height: 15px; width: 1px; background: #fff; position: absolute; top: 0px; right: -10px;}
.contacto .colum .telefono:last-child:after {display: none;}


.contacto form {width: 430px; position: relative; float: left;}
.contacto .forma p{position:relative;  margin-bottom: 10px;}
.contacto .forma label{position:absolute; top:9px; left:10px; font-size: 14px; color: #5F5F5F; }

.contacto .forma input{outline: none; padding: 5px; margin-bottom: 3px;  font-size: 14px; color: #5F5F5F; width: 210px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; background: #fff;}

.contacto .forma .message {position: absolute; top: 1px; right: -50px;}
.contacto .forma textarea{outline: none; padding: 8px;  font-size: 14px; color: #5F5F5F; width: 210px; height: 153px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;  background: #fff;}



.contacto .forma #submit{background: #5298B8; color: #fff; width: 130px; height: 33px; border: none; font-size: 16px; cursor: pointer; /*position: absolute;*/ bottom: -35px; right: 0px; font-family: 'Biko'; }
.contacto .forma #submit:hover{background: #364B5A;}
.contacto .forma .error_box{margin-bottom: 10px; color: #FA3E3E;}



.msggracias {text-align: center; padding: 15px 0; color: #fff; background: #87CF47; position: absolute; width: 100%; top: 0px; left: 0px; z-index: 100; font-family: 'Biko'; font-size: 18px; display: none; }
.msgnoenviado {text-align: center; padding: 15px 0; color: #fff; background: #FA3E3E; position: absolute; width: 100%; top: 0px; left: 0px; z-index: 100; font-family: 'Biko'; font-size: 18px; display: none; }


.map-cont {height: 400px; width: 100%; min-width: 980px;}



.footer {height: 270px; width: 100%; background: #364B5A; min-width: 980px;}
.footer .cont {width: 980px; margin: 0 auto; text-align: center; }
.footer .cont img {padding-top: 80px;}
.footer .cont p {color: #fff; margin: 20px auto; width: 270px; padding-top: 30px;}
.footer .cont .telefono {margin: 20px auto; width: 270px; text-align: center; padding-left: 30px;}
.footer .cont .telefono  li{float: left; margin-right: 20px; position: relative; color: #fff;}
.footer .cont .telefono li:after {content: ''; display: block; height: 15px; width: 1px; background: #fff; position: absolute; top: 0px; right: -10px;}
.footer .cont .telefono li:last-child:after {display: none;}