/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #333;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html {-webkit-font-smoothing: antialiased; 	overflow-x:hidden;}

body{
	font-family: "hausbau2", Arial, Helvetica, sans-serif; 
	font-size:14px;
	line-height:20px;
	color:#333;
	margin:0;
	padding:0;
	background-color:#8A8A8A;
	font-style:normal;
	font-weight:normal;
	}	

h1,h2,h3,h4,p,a,input,label,select,span
{font-family: "hausbau2", Arial, Helvetica, sans-serif; font-style:normal; font-weight:normal; margin:0; padding:0;}

h1{font-family: "hausbau", Arial, Helvetica, sans-serif; font-size:25px;line-height:28px; letter-spacing:-1px;}
h2{font-size:20px; line-height:26px;}
h3{font-size:18px; line-height:24px;}
h4{font-size:14px; line-height:20px;}
p{font-size:14px; line-height:20px;}

a {
	color:#333;
	text-decoration:none;
	/*transition: opacity .2s ease-out;
	-moz-transition: opacity .2s ease-out;
	-webkit-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;*/
}

em {font-style:normal;}

img, img a, img a:hover {border:0;}

strong {font-family: "hausbau", Arial, Helvetica, sans-serif;  font-style:normal; font-weight:bold;}

.clear {margin:0!important;}

@font-face {
    font-family: 'hausbau';
    src: url('../fonts/hausbau.eot');
    src: url('../fonts/hausbau.eot?#iefix') format('embedded-opentype'),
         url('../fonts/hausbau.woff2') format('woff2'),
         url('../fonts/hausbau.woff') format('woff'),
         url('../fonts/hausbau.ttf') format('truetype'),
         url('../fonts/hausbau.svg#hausbau') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'hausbau2';
    src: url('../fonts/hausbau2.eot');
    src: url('../fonts/hausbau2.eot?#iefix') format('embedded-opentype'),
         url('../fonts/hausbau2.woff2') format('woff2'),
         url('../fonts/hausbau2.woff') format('woff'),
         url('../fonts/hausbau2.ttf') format('truetype'),
         url('../fonts/hausbau2.svg#hausbau2') format('svg');
    font-weight: normal;
    font-style: normal;
}



div, ul, li{
	display:block;
	margin:0;
	padding:0;
	list-style:none;
}
	
.container {
	width:100%;
	max-width:1024px;
	margin:auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

#header {
	position:relative;
	display:inline-block;
	float:left;
	margin:0;
	padding:0;
	width:100%;
	height:auto;
	background-color:#EFEFEF;
	z-index:100;
}

#header .hausbau {width:50%; float:left; background-color:#72D074;}
#header .hausbau ul {margin:5%; float:left;}
#header .hausbau li {float:left;}
#header .hausbau li.logo a {width:240px; height:20px; background-image:url(../img/hausbau.png); background-size:cover; display:block;}
#header .hausbau li.logo a:hover {opacity:0.5}

#header .menu {position:absolute; width:50%; right:0; z-index:100;}
#header .menu ul {display:block; margin:5% 12.5% 5% 5%; float:right; overflow:hidden; white-space: nowrap; height:20px;}

#header .menu .links {display:none;}
#header .menu .links li {display:inline-block; height:20px;}
#header .menu .links li a{
	display: inline-block;
	width:auto;	
	margin-right:15px;
	font-size:15px;
	line-height:20px;
	color:#37363B;
	transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-webkit-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;	
}

#header .menu .links li a:hover{color:#72D074; text-decoration:none;}

#header .menu-control {position:relative; float:right; width:50%;}
#header .open, #header .close {position:relative; margin:5%; display:block; width:20px; height:20px; cursor:pointer; float:right; z-index:150;}

#header .open {background-image:url(../img/menu.png); background-position: center; background-size:cover;}
#header .close {background-image:url(../img/close.png); background-position: center;  background-size:cover; display:none;}


/* ==========================================================================
   Content
   ========================================================================== */

#content {
	position:relative;
	display:inline-block;
	float:left;
	margin:0;
	padding:0;
	width:100%;
	height:auto;	
	background-color:#72D074;
}

/* ==========================================================================
   Boxes
   ========================================================================== */
   
.box{
    position: relative;
    overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	float:left;
	color:#37363B;
	background-color:#EFEFEF;
	text-align:left;
	transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-webkit-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
}

.box .wrapper {
	display: table;
	width: 100%;
	height: 100%;
}

.box .wrapper .cover {
    display: table-cell;
    vertical-align: middle;
}

.apertura {width:50%; background-color:#37363B; color:#FFF;}
.apertura:before {content: ""; display: block;padding-top:45%;}

.cierre {width:50%; background-color:#EFEFEF; color:#333;}
.cierre:before {content: ""; display: block;padding-top:45%;}

.simple {width:50%; background-color:#AAA;}
.simple:before{content: ""; display: block; padding-top:90%; }

.texto {width:50%;}
.texto:before{content: ""; display: block;padding-top:45%;}

.half {width:50%;}
.half:before{content: ""; display: block; padding-top:45%; }

.wide {width:100%;}
.wide:before{content: ""; display: block; padding-top:25%; }

.tall {width:50%;}
.tall:before{content: ""; display: block; padding-top:112.5%; }

.green {background-color:#72D074; color:#FFF;}
.darkgrey {background-color: #37363B; color:#FFF;}
.lightgrey {background-color: #EFEFEF; color:#333;}

.box-content{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;	
	-webkit-transition: opacity .2s ease-out;
	-moz-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;
	transition: opacity .2s ease-out;
	background-size:cover;
	background-position:center center;
	background-color:rgba(0,0,0,0.0);
}

/*.box h1, .box h2, .box h3, .box p {position:absolute; top:0; margin:5% 20% 5% 5%;}*/

.box .margin {margin:5% 8% 5% 5%;}

a.box-content h2 {position:absolute; top:0;}

.box h2 {
	display:block;
	width:35%;
	height:15%;
	background-color:rgba(58,57,62,0.9);
	margin:0;
	padding:5% 10% 5% 5%;
	color:#FFF;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;
	z-index:50}

.right {left:auto!important; right:0;}
.bottom {top:auto!important; bottom:0;}

.box-content .hover {
	display:table;
	width:100%;
	height:100%;
    vertical-align:middle;
	text-align:left;
	-webkit-transition: opacity .2s ease-out;
	-moz-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;
	transition: opacity .2s ease-out;
	background-size:cover;
	background-position:center center;
	background-color:rgba(114,208,116,0.8);
	color:#FFF;
	opacity:0;}	
	
.box-content:hover > h2 {background-color:#72D074;}

.cierre a:hover {color:#72D074;}


#map {
    position: relative;
	width:100%;
}

#map_canvas {
  	  position: absolute;
	  width:100%!important;
	  height:auto!important;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
}

#map_canvas:before {
	content: "";
	display: block;
	padding-top: 90%;
}

/* ==========================================================================
   Sections
   ========================================================================== */

#home #header .hausbau {background-color:#72D074;}
#nosotros #header .hausbau {background-color:#37363B;}
#contacto #header .hausbau {background-color:#37363B;}

#proceso .simple:before {padding-top:67.5%;}
#obras .simple:before {padding-top:78.8%;}
#obras .apertura:before {padding-top:67.5%;}

#nosotros #content .apertura {background-color:#37363B;}
/*#nosotros .apertura:before {padding-top:90%;}*/
#nosotros .simple:before {padding-top:45%;}
#nosotros .texto:before {padding-top:45%;}
#nosotros .cierre:before {padding-top:45%;}
#nosotros .cierre a {color:#72D074;}
#nosotros .cierre a:hover {color:#72D074; text-decoration:underline;}

#contacto #content .cierre {color:#FFF; background-color:#72D074;}
#contacto .apertura:before {padding-top:45%;}
#contacto .simple:before {padding-top:0%;}
#contacto .cierre:before {padding-top:45%;}
#contacto .cierre a {color:#FFF;}
#contacto .cierre a:hover {color:#FFF; text-decoration:underline;}

/* ==========================================================================
   Footer
   ========================================================================== */

#footer {
	position:relative;
	display:inline-block;
	float:left;
	margin:0;
	padding:0;
	width:100%;
	height:auto;
	background-color:#8A8A8A;
}

#footer .hausbau {width:50%; float:left;}
#footer .hausbau ul {margin:5%; float:left;}
#footer .hausbau li {float:left;}
#footer .hausbau li.logo a {width:102px; height:20px; background-image:url(../img/hausbau.png); background-size:cover; display:block; opacity:0.5}
#footer .hausbau li.logo a:hover {opacity:0.25}


#footer .copyright {
	width:50%;
	float:left;
	font-size:14px;
	line-height:20px;
	color:#CCC;
}
#footer .copyright ul {margin:5%; float:left;}
#footer .copyright li {float:left;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media only screen and (min-width: 1380px) {
#header .hausbau li.logo a {width:300px; height:25px;}
#header .open, #header .close {width:25px; height:25px;}
#header .menu .links li a {font-size:20px; line-height:25px;}
#footer .hausbau li.logo a {width:130px; height:25px;}
h1{font-size:30px;line-height:33px; letter-spacing:-1px; }
h2{font-size:25px; line-height:30px;}
h3{font-size:25px; line-height:30px;}
p{font-size:20px; line-height:25px;}
#footer .copyright p {font-size:14px;}
}

@media only screen and (max-width: 1024px) {
h1{font-size:19px;line-height:22px; letter-spacing:-1px;}
h3{font-size:14px;line-height:20px;}
p{font-size:13px; line-height:18px;}
#header .menu .links li a {font-size:13px; line-height:18px;}

}

@media only screen and (max-width: 768px) {
h1{font-size:16px;line-height:21px; letter-spacing:0px;}
h2{font-size:14px; line-height:20px;}
h3{font-size:13px; line-height:20px;}
.box h1 {margin-right:10%;}
.box h3 {margin-right:10%;}
p{font-size: 11px; line-height: 16px; letter-spacing: 0px;}

#header .hausbau {width:100%; background-color:#37363B!important}
#header .hausbau ul {margin:20px;}

#header .menu {display:block; position:absolute; top:60px; left:0; width:100%; background-color:rgba(51,51,51,0.8); z-index:150}
#header .menu .links {float:left; clear:both; width:100%; height:auto; margin:0;}
#header .menu .links li {display:block; width:auto; height:auto; margin:0 20px; border-bottom:1px solid #FFF;}
#header .menu .links li a{
	display:block;
	width:100%;
	height:50px;
	font-size:18px;	
	line-height:50px;
	color:#FFF;	
}

#header .menu .links li:first-child {margin-top:10px;}
#header .menu .links li:last-child {border:none;  margin-bottom:15px;}

#header .menu-control {position:absolute; width:60px; height:60px; right:0; background-color:#EFEFEF;}
#header .open, #header .close {margin:20px;}
#header .open {background-image:url(../img/menu.png); background-position: center; background-size:cover;}
#header .close {background-image:url(../img/close.png); background-position: center;  background-size:cover; display:none;}

#nosotros .apertura:before {padding-top:110%;}
#nosotros .simple:before {padding-top:82.5%;}
#nosotros .half:before {padding-top:55%;}
#nosotros .texto:before {padding-top:82.5%;}
#nosotros .cierre:before {padding-top:55%;}

.fancybox-title-float-wrap .child {position:fixed; top:30px; left:30px; font-size:22px!important; line-height:20px!important; letter-spacing:0;}


}

@media only screen and (max-width:480px) {
	
.texto:before{display:none}
.box-content{position:relative;	top:auto; left:auto; bottom:auto; right:auto;}
.box h1, .box h2, .box h3, .box p {position:relative; top:auto; bottom:auto; margin:30px 20px;}

.box-content h2{margin:0px;}
	
.apertura {width:100%;}
.apertura:before {display:none}

.cierre {width:100%;}
.cierre:before {display:none}

.simple {width:100%;}
.simple:before{padding-top:90%; }

.texto {width:100%;}

.half {width:100%;}
.half:before{padding-top:90%; }

.wide {width:100%;}
.wide:before{padding-top:90%; }

.tall {width:100%;}
.tall:before{padding-top:90%; }

#footer .hausbau {display:none}
#footer .copyright {width:auto;}
#footer .copyright ul {margin:20px;}

.box-content .hover {opacity:1; background-color:#}	

.fancybox-title-float-wrap .child {font-size:18px!important; line-height:20px!important; white-space:normal!important; letter-spacing:0; width:200px;}

}

@media only screen and (max-width: 320px) {
#header .hausbau li.logo a {width:102px; height:20px;}
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}