@charset "utf-8";
/* bauhutte additions outside skeleton CSS framework */
/* last update 01.12.2015 */

	/* heading */

	.heading {
	  width: 100%;
	  max-width: 960px;
	  margin: 0 auto;
	  padding: 50px 0 0;	
  	}

	/* sticky footer */
	
	* {
	  margin: 0;
	}
	
	html, body {
	  height: 100%;
	}
	
	.page-wrap {
	  min-height: 100%;
	  /* equal to footer height */
	  margin-bottom: -6.5em; 
	}
	
	.page-wrap:after {
	  content: "";
	  display: block;
	}
	
	.site-footer, .page-wrap:after {
	  height: 6.5em; 
	}
	
	.site-footer {
	  background: #fff;
	  text-align: center;
  }
	
	/* Sections */

	.section-small-1 {
	  padding: 11rem 0 7rem;
	  text-align: left;
	}
	
	.section-small-2 {
	  padding: 0rem 0 7rem;
	  text-align: left;
	}		
	
	.section-small-3 {
	  padding: 8rem 0 7rem;
	  text-align: left;
	}	
	
	.section-small-4 {
	  padding: 3rem 0 7rem;
	  text-align: left;
	}		
		
	.section {
	  padding: 22rem 0 7rem;
	  text-align: left;
	}
	
	.section-two {
	  padding: 70rem 0 7rem;
	  text-align: left;
	}	
	
	.section-three {
	  padding: 5rem 0 7rem;
	  text-align: left;
	}
	
	.section-four {
	  padding: 5rem 0 7rem;
	  text-align: left;
	}	
	
	.section-contact-one {
	  padding: 15rem 0 7rem;
	  text-align: left;
	}
	
	.section-contact-two {
	  padding: .1rem 0 7rem;
	  text-align: center;
	}
		
	.section-heading,
	.section-description {
	  margin-bottom: 1.2rem;
	}
	
	.right {
		text-align:right;
		font-size: .8em;
		font-weight: 400;
		font-family: 'Montserrat';
		color: #222; 
	}
		
	/* sticky footer */
	
	#logo img{
    	max-width: 100%;
    	height: auto;
	}

	#headerImage img {
		max-width: 100%;
		height: auto;
	}	
		
	#headerImage-right{
		float:right;
		max-width: 100%;
		height: auto;
	}	
	
	/* mh menu */
		
	.mh-menu{
		max-width: 100%;
		height: auto;
		float:left;
		position: relative;
	}
	
	.mh-menu li{
		max-width: 100%;
		height:auto;
		list-style-type:none;
	}
	
	.mh-menu li a{
		display: block;
		/*compliant with bauhutte website make width same as .mh-menu li img left! + .mh-menu li img*/
		width: 522px;
		text-align: left;
		position: relative;
		z-index: 10;
		height: 50px;
	}
	
	.mh-menu li:hover a{
		color:#000;
	}
	
	.mh-menu li a span{
		display:block;
	}
	
	.mh-menu li a span:first-child{
		font-family: 'Montserrat', sans-serif;
		font-weight:400;
		font-size:14px;
		letter-spacing:1px;
		color: #86754d;
	}
	
	.mh-menu li a span:nth-child(2){
		font-weight: 400;
		font-style: italic;
		font-size: 28px;
		font-family: 'Alegreya SC', Georgia, serif;
		-webkit-transition: color 0.2s linear;
		-moz-transition: color 0.2s linear;
		-o-transition: color 0.2s linear;
		-ms-transition: color 0.2s linear;
		transition: color 0.2s linear;
	}
	
	.mh-menu li:nth-child(1):hover span:first-child{
		color: #000;
	}
	
	.mh-menu li:nth-child(2):hover span:first-child{
		color: #000;
	}
	
	.mh-menu li:nth-child(3):hover span:first-child{
		color: #000;
	}
	
	.mh-menu li:nth-child(4):hover span:first-child{
		color: #000;
	}
	
	.mh-menu li img{
		position: absolute;
		z-index: 1;
		/*compliant with bauhutte website make width same as .mh-menu li img left! + .mh-menu li img*/
		left:522px;
		top: 0px;
		opacity: 0;
		-webkit-transition: opacity .75s ;
		-moz-transition: opacity .75s ;
		-o-transition: opacity .75s ;
		-ms-transition: opacity .75s ;
		transition: opacity .75s ;
	}
	
	.mh-menu li:hover img{
		/*compliant with bauhutte website make width same as .mh-menu li img left! + .mh-menu li img*/
		left: 522px;
		opacity: 1;
	}
	
	/* top scroll */
	
	.scrolltotop{
		width:60px; 
		height:60px;
		position:fixed;
		bottom:40px;
		right:40px;
		display:none;
		z-index:100;
		opacity:0.5;
		cursor:pointer;
	}
	
	.top-arrow {
		width:60px; 
		height:60px;
		background: #86754d;
		background-image:url(images/top_arrow.png);
		background-size:22px 12px;
		background-repeat:no-repeat;
		background-position:center center;
		opacity:0.5;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	
	.scrolltotop:hover .top-arrow {
		opacity:1;
	}
	
	 
	p.indent-1 {
	  margin-left: 2em;
	 }
	 
	p.indent-2 {
	  margin-left: 4em;
	 }
	 
	p.indent-3 {
	  margin-left: 6em;
	 } 
	 
	p.projecten {
	  margin-top:0;
	  font-size: 1em; /* currently ems cause chrome bug misinterpreting rems on body element */
	  line-height: 2.35em;
	  font-weight: 400;
	  font-family: 'Montserrat';
	  color: #222; 
	  letter-spacing: .12em;
  	 } 	 
	 
	.color-bauhutte {
		color: #86754d;
	}
	
	div.box div.overlay-placeholder {
		display:block;
		width:100%;
		height:50px;
	}
	
	div.box:hover div.overlay-placeholder {
		display:block;  
	}
	
	div.box div.overlay-1 {
		display:none;
		width:100%;
		height:50px;
	}
	
	div.box:hover div.overlay-1 {
		display:block;  
		margin-top:-54px;
	}
		
	div.box div.overlay-2 {
		display:none;
		width:100%;
		height:50px;
	}
	
	div.box:hover div.overlay-2 {
		display:block;  
		margin-top:-108px;
	}
	
	div.box div.overlay-3 {
		display:none;
		width:100%;
		height:50px;
	}
	
	div.box:hover div.overlay-3 {
		display:block;  
		margin-top:-162px;
	}
	
	div.box div.overlay-4 {
		display:none;
		width:100%;
		height:50px;
	}
	
	div.box:hover div.overlay-4 {
		display:block;  
		margin-top:-216px;
	}
		
	div.box div.overlay-5 {
		display:none;
		width:100%;
		height:50px;
	}
	
	div.box:hover div.overlay-5 {
		display:block;  
		margin-top:-270px;
	}
	
	div.box div.overlay-6 {
		display:none;
		width:100%;
		height:50px;
	}
	
	div.box:hover div.overlay-6 {
		display:block;  
		margin-top:-324px;
	}
	
	div.box div.overlay-7 {
		display:none;
		width:100%;
		height:50px;
	}
	
	div.box:hover div.overlay-7 {
		display:block;  
		margin-top:-378px;
	}
	
	#column-content {
	  display: inline-block;
	}
	img {
	  vertical-align: middle;
	}
	span {
	  display: inline-block;
	  vertical-align: middle;
	}