/* normalize */
*,*::before,*::after                            { -webkit-box-sizing: inherit; box-sizing: inherit; }
html,body,div                                   { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }


/* Allgemein */
body 											{ margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 16px; color: #707070; font-weight: 400; }
img 											{ max-width: 100%; height: auto; }
.content 										{ padding: 40px; }



/* Schriften */
h1,h2,h3,h4,h5,h6 								{ text-transform: uppercase; font-weight: 300; display: block; line-height: 1.1; margin: 0; }
h1 												{ font-size: 40px; }
h2 												{ font-size: 36px; }
h3 												{ font-size: 28px; }
h4 												{ font-size: 24px; }
h5 												{ font-size: 18px; font-weight: 400; }
h6 												{ font-size: 16px; font-weight: 400; }
a 												{ text-decoration: none; color: #707070; }
.btn 											{ color: #DBBC7E; display: inline-block; font-weight: 400; }


/* Logo & Nav */ 
#header 										{ position: fixed; width: 100%; top: 0; z-index: 1000; }
#logo 											{ position: absolute; top: 40px; left: 40px; max-width: 100px; }
#main-nav 										{ position: absolute; right: 40px; top: 40px; width: 200px; }
#main-nav ul 									{ display: block; text-align: right; margin: 0; padding: 0; }
#main-nav li 									{ list-style: none; }
#main-nav li a 									{ display: block; font-size: 24px; font-weight: 300; padding: .5em 1em; padding-right: 0; letter-spacing: 3px; text-transform: uppercase; position: relative; }

#main-nav li.current-menu-item a 				{ opacity: 1; }
#main-nav li a 									{ opacity: .5; transition: opacity .2s; }
.desktop #main-nav li:hover a 					{ opacity: 1; }

#main-nav li a:after 							{ position: absolute; top: 35px; right: 4px; width: 0px; height: 1px; background: #111; content: ''; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; }
.desktop #main-nav li a:hover::after, 
.desktop #main-nav li a:focus::after  			{ width: 25%; }
#main-nav li a:after							{ max-width: 25%; }
#main-nav li.current-menu-item a:after, #mn li.current-page-ancestor a:after { width: 25%; }



/* Allgemein */
.col 											{ position: absolute; }
.col-2 											{ width: 20%; }
.col-6 											{ width: 60%; }
.col-8 											{ width: 70%; }
.col.center 									{ left: 50%; transform: translateX(-50%); }
.col.intro 										{ position: fixed; left: 0; height: 100%; }
.col.intro .content 							{ position: relative; padding: 40px; top: 50%; transform: translateY(-50%); }
.col.outro 										{ right: 0; }
.padding-top 									{ padding-top: 100px; }


/* Startseite: Projektteaser */
.project-teaser 								{ height: 100%; padding: 5% 15%; background-repeat: no-repeat !important; background-position: center center !important; background-size: 70% !important; z-index: 1; }
.project-teaser .project-list .project 			{ padding: 5px; line-height: 0; width: 33.333%; display: inline-block; overflow: hidden; }
.project-teaser .project-list .project > a 		{ display: block; transform: scale(1); transition: transform .2s; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.21); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.21); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.21); }
.project-teaser img.mobile 						{ display: none; }
.project-teaser .project-list .title  			{ display: none; }
.project-teaser .project-list .title a 			{ display: block; height: 100%; width: 100%; }


/* Projektseite */ 
.single-project .project-images .content		{ padding: 40px 80px; }				
.single-project .image 							{ line-height: 0; }
.single-project .image img, .single-project .video { width: 100%; padding: 5px; }
.single-project .two-images img 				{ height: auto; width: 50%; align-self: center; }
.single-project .col-6 							{ width: 50%; }
.single-project .more-text 						{ padding: 0 5px; padding-top: 20px; }
.single-project .text 							{ padding: 20px; }


/* Startseite Footer */
#footer 										{ position: fixed; bottom: 0; width: 100%; z-index: 0; }
#footer .content 								{ width: 100%; position: relative; }
#footer a 										{ padding: 1em 0; }
#footer .col-6 									{ width: 30%; display: inline-block; position: relative; }
#footer .col-6 + .col-6 						{ right: 40px; position: absolute; text-align: right; }
#footer .social 								{ display: inline-block; width: 30px; height: 30px; background: grey; position: relative; transform: scale(1); transition: transform .2s; }
#footer .social + .social 						{ margin-left: 5px; }
#footer .social a 								{ display: block; }
#footer .imprint a 								{ top: 20px; position: relative; opacity: .4; font-size: 13px; transition: opacity .2s; }
#footer .imprint a:hover 						{ opacity: 1; }
#footer .social img 							{ position: absolute; max-width: 20px; top:50%; left: 50%; transform: translate(-50%,-50%); }
#footer .social.vimeo img 						{ max-width: 16px; }
#footer .social.instagram img 					{ max-width: 18px; }


/* fixed contact */
.fixed-contact 									{ z-index: 100; position: fixed; right: -127px; top: 50%; transform: translateY(-50%); /* background: #DBBC7E; */ background: #000; color: #DBBC7E !important; transition: right .3s; }
.fixed-contact a 								{ color: #DBBC7E; display: inline-block; padding: .2em 1.5em .2em 57px; font-size: 16px; position: relative; }
.fixed-contact a:before 						{ content: url(../img/envelope.svg?cache=181020); position: absolute; width: 20px; height: auto; margin-left: -37px; top: 20px; }
.fixed-contact:hover 							{ right: 0; }

.mobile-contact 								{ display: none; position: fixed; right: 20px; bottom: 20px; z-index: 100; background: #000; width: 60px; height: 60px; -webkit-box-shadow: 10px 5px 35px 0px rgba(0,0,0,0.21); -moz-box-shadow: 10px 5px 35px 0px rgba(0,0,0,0.21); box-shadow: 10px 5px 35px 0px rgba(0,0,0,0.21); }
.mobile-contact a 								{ display: block; width: 100%; height: 100%; position: relative; }
.mobile-contact a img 							{ position: absolute; width: 35px; height: 35px; top: 50%; left: 50%; transform: translate(-50%,-50%); }


/* Media Queries */

@media screen and (min-width: 1800px) {

	.project-teaser .project-list .project img 	{ width: 100%; height: 100%; }

}

@media screen and (min-width: 1500px){
	
	.col-2 										{ width: 16.6666%; }
	.col-6 										{ width: 49.9998%; }
	.col-8 										{ width: 66.6664%; }	
	
}


@media screen and (min-width: 1440px){

	.project-teaser .project-list .title .content 			{ padding: 40px; }
	.project-teaser .project-list .title h4					{ font-size: 24px; }

}

@media screen and (max-width: 1280px){ 

	h1 											{ font-size: 28px; }
	h2 											{ font-size: 24px; }
	h3 											{ font-size: 22px; }
	h4 											{ font-size: 20px; }

	.col-2 										{ width: 25%; }

	.single-project .col-6 						{ width: 55%; }
	.single-project .col.intro .content 		{ padding-right: 20px; } 
	.single-project .project-images .content	{ padding: 40px; }
}	


@media screen and (min-width: 768px){

	.project-teaser .project-list 					{ top: 50%; transform: translateY(-50%); position: relative; width: auto; height: auto; }
	/* .project-teaser .project-list .project:hover a 	{ transform: scale(1.025); } */
	.desktop #footer .social:hover 					{ transform: scale(1.05); }

	.project-teaser .project-list .title 					{ display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: -150%; padding: 5px; transition: bottom .5s; }
	.project-teaser .project-list .title .content 			{ padding: 10px; margin: 0; transform: none; background: rgba(0,0,0,.7); width: 100%; height: 100.5%; }
	.project-teaser .project-list .title h4					{ text-align: center; font-size: 15px; color: #fff; position: relative; top: 50%; transform: translateY(-50%); }
	.project-teaser .project-list .project:hover .title		{ bottom: 0px; }

}


@media screen and (min-width: 1280px){

	.project-teaser .project-list .title .content 			{ padding: 20px; }
	.project-teaser .project-list .title h4					{ font-size: 18px; }

}

@media screen and (max-width: 768px){

	.home .intro 								{ display: none; }
	.project-teaser 							{ width: 100%; padding: 5% 40px; background-size: 90%; }
	.project-teaser img.mobile 					{ display: block; }
	.project-teaser img.desktop 				{ display: none; }

	.single-project #header 					{ position: relative; top: 0; left: 0; height: 150px; }
	.single-project .col 						{ width: 100%; position: relative; } 
	.single-project .content 					{ padding: 40px; }
	.single-project #footer 					{ position: relative; }
	.single-project .col.intro .content 		{ top: 0; transform: none; width: 75%; margin: 0 auto; }
	.single-project .text 						{ padding: 20px 5px; }

	#main-nav li a:after 						{ top: 30px; }

	.fixed-contact 								{ display: none; }
	.mobile-contact 							{ display: block; }

}

@media screen and (max-width: 767px){

	body  										{ font-size: 16px; line-height: 1.2; }							

	#header 									{ position: relative; top: 0; left: 0; height: 100px; }
	#logo 										{ left: 20px; top: 20px; max-width: 65px; }
	#main-nav 									{ right: 20px; top: 20px; }
	#main-nav ul 								{ margin: 0; }
	#main-nav li a								{ font-size: 20px; padding: .35em .5em; padding-right: 0; line-height: 1; }

	.content 									{ padding: 20px; }
	.col  										{ position: relative; width: 100%; transform: none; }
	.project-teaser  							{ padding: 20px; transform: none !important; top: 0; background: none; left: 0 !important; }
	.project-teaser .project-list 				{ display: flex; -webkit-box-flex: 0; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; flex-wrap: wrap; } 
	.project-teaser .project-list .project 		{ width: 100%; padding: 0; }
	.project-teaser .project-list .project + .project 	{ margin-top: 10px; }
	.project-teaser .project-list .project img 	{ width: 100%; }

	.col.center 								{ left: 0; transform: none; padding: 20px; }

	.home .intro 								{ display: block; position: relative; width: 100%; height: auto; }
	.home .intro .content 						{ top: 0; transform: none; padding: 20px; }

	.single-project .project-images .content 	{ padding: 15px; }	
	.single-project .col.center 				{ padding: 0; }
	.single-project #header 					{ height: 100px; }
	.single-project .col.intro .content 		{ width: 100%; margin: 0; padding: 20px; }


	#footer 									{ position: relative; }
	#footer .content 							{ padding: 20px; }
	#footer a 									{ display: block; }
	#footer .col-6 								{ width: 100%; display: block; position: relative; }
	#footer .col-6 + .col-6 					{ position: relative; left: 0; right: auto; text-align: left; margin-top: 5px; }
	#footer .social 							{ transform: scale(1.5); margin-left: 8px; }
	#footer .social + .social 					{ margin-left: 20px; }


}


.animated 										{ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.fadeInUp 										{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
.fadeInLeft										{ -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }
@-webkit-keyframes fadeInLeft 					{ from { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes fadeInLeft 							{ from { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@-webkit-keyframes fadeInUp 					{ from { opacity: 0; -webkit-transform: translate3d(0, 1%, 0); transform: translate3d(0, 1%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes fadeInUp 							{ from { opacity: 0; -webkit-transform: translate3d(0, 1%, 0); transform: translate3d(0, 1%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }