@charset "UTF-8";
/* CSS Document */


@media screen and (min-width: 1100px) {
	
	.flip-card-content:hover .flip-card-side-a, .myPost:hover .flip-card-side-a{
    -ms-transform: rotateX(-90deg) translateZ(27px);
    -moz-transform: rotateX(-90deg) translateZ(27px);
    -webkit-transform: rotateX(-90deg) translateZ(27px);
    -o-transform: rotateX(-90deg) translateZ(27px);
    transform: rotateX(-90deg) translateZ(27px);
	
}

.flip-card-content:hover .flip-card-side-b, .myPost:hover .flip-card-side-b {
    -ms-transform: rotateX(0deg) translateZ(27px);
    -moz-transform: rotateX(0deg) translateZ(27px);
    -webkit-transform: rotateX(0deg) translateZ(27px);
    -o-transform: rotateX(0deg) translateZ(27px);
    transform: rotateX(0deg) translateZ(27px);
}

	.myContainer{width: 1100px; margin: 0 auto;}
	#footer-wrapper{width: 1100px; margin: 0 auto!important;}
	.referenzenTextX{padding: 0%!important;}
	

	
	.image {
    width: 11000px;
    cursor:move;
	background-attachment: fixed;
	left: 0;
	transition: all 0.6s;
	}
	
	.nhood {
		width: 1100px;
		position: relative;
		
	}
	
	.nhood h2:before{display:inline-block; content:""; width: 7px; height: 15px; background:url(../images/next.png); margin: 0px 15px 4px -15px;}
	.nhood h2:after{display:inline-block; content:""; width: 7px; height: 15px; background:url(../images/prev.png);     margin: 0px -15px 4px 15px;}
	.nhood h2{background: #f2f2f2; display: inline; padding: 0 10px;}
	.nhood  img{max-width: inherit;}
	.nhood  table {border-top: 30px solid #f2f2f2; margin: 0!important;}
	.yearText{padding-top: 41px;}
	.nhood  table td{vertical-align: top; background-image: url(../images/line.jpg); background-repeat:repeat-x; background-position: 0 85px}
	.nhood  table td p{ margin: 1.6em;}
	
	.yearNav{width: 100%; padding: 20px 0;}
	.yearNav a{color: #A8A8A8;}
	.yearNav a:hover{cursor: pointer;}
	.historyContainer {background-image: url(../images/clouds3.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; margin: 0!important;}
	.nhood  table:hover{
   		cursor: url(../images/cursor.png), auto;
	}
	
	.galleryBut{width: 49%; text-align: right; float: right;}


	#header{height: 100vh; width: 100%; transition: all 0.5s;}
	.js .main-nav .menu li:hover{
		width: 300px;
	}
	.js .main-nav{width: 300px!important;}
}

@media screen and (max-width: 1100px) {
	.yearNav{display: none;}
	.nhood  img{max-width: inherit;}	
	.nhood  table td{display: block; border-bottom: 1px solid #CDCDCD;}
	.yearBild{display: none!important;}
    
	.myContainer{padding: 0 4%;}
	span.wp-easy-gallery{margin-top: 20px;}
	#header{/*height: 50vh!important;*/ width: 100%; transition: all 0.5s;}
	#header .myContainer{/*height: 50vh!important;*/ padding: 0 0%!important;}
  
	
}




@media screen and (min-width: 700px) {
	
	.columnLeft, .columnRight{width: 40%; float: left; padding: 0 5%;}
    .column{padding: 0 5%;}

	
}


@media screen and (min-width: 1000px) {
	.postBild, .postText {float: left;}
	.postBild{width: 55%;}
	.postText {width: 45%; text-align: right;}
	
	.myPost:nth-child(odd) .postBild, .myPost:nth-child(even) .postText{float: right; text-align: left;}
	.myPost:nth-child(odd) .flip-card-content{float: right; margin-right: 42px;}
	
	.myPost .flip-card-content{float: left;}
	 #header .myContainer p{font-size: 2em;}
    .contactBanner h3{font-size: 2rem!important;}	    
}

@media screen and (max-width: 1100px) {
	.nhood table td:nth-child(4n+2){background-color: #f1efec;}
}


@media screen and (min-width: 900px) {
	
	#header .myContainer{height: 100vh; padding: 0 30%!important; font-size: 20px!important;}
	.myBanner{height: 100vh;}
	.referenzenText{width: 50%;}
	.step{width: 49%; float: right; margin-bottom: 2%;}
	.steps .step:nth-child(2){margin: 30% 1% 0 0; float: left;
    
    }

	
}

@media screen and (min-width: 800px) {
	.postText{padding: 40px; box-sizing:border-box;}
	.contactBanner h3{width: 50%}
}


@media screen and (min-width: 700px) {
	.js .main-nav{width: 300px; box-sizing: border-box;}
	.plane{width: 50%; float: left;}
	.uberUnsTeaser{width: 50%; float: left; text-align: right;}
	
}

@media screen and (min-width: 470px){
    
    	.js .main-nav{width: 170px; box-sizing: border-box;}
}