@charset "UTF-8";

/**
 * Theme Name: Atelier m3
 * Theme URI: atelier-m3.de
 * Description:
 * Version: 1.0
 * Author: Thomas Schürmann
 * Author URI: https://tripleorange.de
 * November 2019
 */


/**
* colors 
* blue 	  #003799 	rgba(0,55,153)
* orange  #FF8F00	rgba(255,143,0)
*/


/* fonts */

@font-face {
    font-family: 'josefinsans';
    src: url('fonts/josefinsans-bold-webfont.woff2') format('woff2'),
         url('fonts/josefinsans-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}

@font-face {
    font-family: 'josefinsans';
    src: url('fonts/josefinsans-regular-webfont.woff2') format('woff2'),
         url('fonts/josefinsans-regular-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}


* {
    box-sizing: 				border-box;
}

/* disables chrome and other browsers outline on focus */

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
    outline: none !important;
	margin:0;
	padding:0;
	list-style:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
} 

/* Make HTML 5 elements display block-level for consistent styling */
main, header, nav, article, footer, address { 
    display: block; 
}


html {
    scroll-behavior: smooth;
}

body {
    padding:                		2em 0 0 0;
    margin:                		 	0;
    color:                  		#000;
    font-family:            		'montserrat','helvetica', 'calibri', 'arial', sans-serif;
	font-weight: 					400;
	font-size:              		15px;
	line-height: 					1.7;
    height:                 		100%;
    background-color:       		#fff;
	font-synthesis: 				none;
}

main {
	padding-top: 					1em;
}

/* helper classes */

.d--none,
.d-xs-none,
.d-sm-block,
.d-md-block,
.d-lg-block,
.d-xs-none {
	display:                		none;
}

.d-xs-block {
	display: 						block;
}

.img--resp {
	width: 							100%;
	height: 						auto;
}

.text--hide {
    font: 							0/0 a;
    color: 							transparent;
    text-shadow: 					none;
    background-color: 				transparent;
    border: 						0;
}

.align--right {
	text-align: 					right;
}

.groot {
	background-color:  				#ff9900;
}

.goot {
	background-color: 				#00ff99;
}

.link--skip {
	background-color:  				#ff8a00;
	color: 							#000;
	padding: 						6px;
	display: 						block;
	position: 						absolute;
	top: 							-50px;
	-webkit-transition: 			all 300ms ease-out;
	-moz-transition: 				all 300ms ease-out;
	-o-transition: 					all 300ms ease-out;
	transition: 					all 300ms ease-out;
}
		
.link--skip:focus {
	top: 							0px;
}


		
/* barlow styled */

h1,
h2,
h3,
h4,
h5,
.menu--main a  {
    font-family: 					'josefinsans', 'helvetica', 'calibri', 'arial', sans-serif;
	font-weight: 					300;
	color: 							#003799;
	text-transform:                 uppercase;
}

h1 > span,
h1 > a > span,
h2 > span,
h3 > span,
h4 > span,
h5 > span{
    font-family: 					'josefinsans', 'helvetica', 'calibri', 'arial', sans-serif;
	font-weight: 					700;
}

h1 a {
	text-decoration: 				none;
	-webkit-transition: 			all 300ms ease-out;
	-moz-transition: 				all 300ms ease-out;
	-o-transition: 					all 300ms ease-out;
	transition: 					all 300ms ease-out;
	color:  						#003799;
	text-transform: 				uppercase;
}

h1 {
	font-size: 						1.5em;
	font-weight: 					700;
	line-height: 					1.5;
}

h1 a:hover {
    color: 							#FF8F00;
}

h4 {
	color: 							#FF8F00;
	margin-top: 					3em;
	margin-bottom: 					0.2em;
	font-size: 						
}


p {
	
}

strong {
	font-weight: 					600;
}

i {
	font-style: 					italic;
}

a {
	color: 							#003799;
}

a:hover {
	color: 							 #003799;	
}

section p,
article p {
	margin-bottom: 1em;
}

ul {
	list-style:                     none;
}

address {
	font-style: 					normal;
}

article ul,
section ul {
	margin-bottom:                  1em;
	margin-left: 					2em;
}

article ul > li,
section ul > li {
	margin-bottom:                  3px;
}

.footnote {
	text-align: 					right;
	color: 							#666;
	font-weight: 					300;
}

/* @see https://bennettfeely.com/clippy/ */ 

article ul > li::before,
section ul > li::before {
	content: 						"";
	-webkit-clip-path: 				polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
	clip-path:  					polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
	display: 						inline-block;
	background-color: 				#FF8F00;
	width: 							14px;
	height: 						14px;
	margin: 					    0 8px -1px -18px;
}

article ul.lSPager  > li::before,
article ul#content-slider  > li::before {
	display: none;
}


/* header */

body > header {
	width:       						100%;
	min-height: 						120px;
}

body > header  .menu--outer {				/* generate full width toggle menu */
	padding-left: 						0;
	padding-right: 						0;
}

.logo,
.logo--white {
	display: block;
	text-decoration:none;
	color: #000;
	line-height: 1;
}

.logo {
	width: 170px;
	height: 60px;
	margin: 0 0 40px 0;
	background: transparent url("img/atelier-m3-logo-xs.png") no-repeat top left;
	border: 2px solid #fff;
}

.logo:focus {
	border: 								2px dotted #FF8F00;
}

.logo--white {
	width: 									150px;
	height: 								50px;
	margin: 								30px 0 0 0;
	background: 							transparent url("img/atelier-m3-logo-white-xs.png") no-repeat top left; 
}
	
body > header #mobile-menu-container {
	position: 								relative;
	min-height: 							32px;
	background-color: 						rgba(255,255,255,1);
}
	
.menu--mobile li {
	float: 									left;
	padding: 								5px 13px 4px;
	position: 								relative;
	display: 								inline-block;
	line-height: 							1.4;
}
	
.menu--mobile li.active a {	
	font-weight: 							700;
	font-size: 								15.5px;
}
	
.menu--mobile li a {
	color: 									#000;
	text-transform:  						uppercase;
	font-size: 								15px;
	text-decoration: 						none;
}

/* menu */

.menu {
	padding: 								0;
	margin: 								0 0 1em;
}

.menu > li {
	padding: 								0;
	margin: 								0;
}

.menu > li > a {
	text-decoration: 						none;
	color: 									#333;
}


/* main menu */

.menu--main {
	width: 									100%;

	margin-top: 							5px;
	padding-top: 							5px;
	padding-bottom: 						5px;
}

.menu--main li {
	float: 									left;
	width: 									100%;
	position: 								relative;
}

.menu--main a {
	display: 								block;
	height: 								100%;
	width: 									100%;
	padding:  								11px 13px;
	font-size:  							15px;
	text-transform: 						uppercase;
	line-height: 							1.3;
	text-decoration: 						none;
	color: 									#fff;
	-webkit-transition: 					all 400ms ease-out;
	-moz-transition: 						all 400ms ease-out;
	-o-transition: 							all 400ms ease-out;
	transition: 							all 400ms ease-out;
	background-color:                       rgba(255,143,0,1);	
}
	
.menu--main li:last-of-type a {
		border-bottom: 						1px dashed rgba(255,143,0,1);
}

.menu--main a:hover {
	color: 									#003799;
	text-decoration: 						none;
}
	
.menu--main > ul > li.active > a {	
	font-weight: 700;
	font-size: 16px;
}

.menu--main > ul > li:hover > a {	
	text-decoration: none;
}


/* home */



.js .menu--main {
	display: 								none;
}

.js .sub-menu {
	display: 								none;
}
	
.sub-menu li a {
	text-indent: 							18px;
}

.sub-menu li:last-of-type {
	padding-bottom: 						0;
}
	
.sub-menu li:last-of-type a {
	border-bottom: 							none;
}

.sub-menu a {
	background: 							rgba(255,255,255,0.8);
}

/* toggles */

.toggle-menu--main {
	display: 							block;
	position: 							absolute;
	right: 								0;
	top: 								1px;
	padding: 							2px 8px 2px;
	color: 								#000;
	cursor: 							pointer;
	font-weight: 						400;
	text-transform: 					uppercase;
	font-size: 							15px;
	-webkit-transition: 	 			all 0.6s ease-out;
	-moz-transition: 		 			all 0.6s ease-out;
	-o-transition: 			 			all 0.6s ease-out;
	-ms-transition: 					all 0.6s ease-out;
	transition: 						all 0.6s ease-out;
}
	
.toggle-menu--main > span::before {
	content: 							"\2261 ";
	display: 							inline-block;
	padding-right: 						6px;
	padding-bottom: 					2px;
	font-size: 							24px;
	line-height: 						0;
	vertical-align: 					middle;
}

/* buttons */

.button,
.pagination li,
.button--reverse,
.pagination li a {
	webkit-transition: 				all 500ms ease-out;
	-moz-transition: 				all 500ms ease-out;
	-o-transition: 					all 500ms ease-out;
	transition: 					all 500ms ease-out;
}

.button {
	background-color: 				#000;
	border:                         2px solid #000;
	font-size: 						15px;
	color: 							#fff;
	padding: 						11px 17px 11px 11px;
	line-height: 					1;
	text-decoration: 				none;
	display: 						inline-block;
	position: relative;
}

.button:hover {
	background-color: 				#003799;
	border:                         2px solid #003799;
}

.button:focus {
	border: 						2px dotted #FF8F00;
}

.button > span {
	-webkit-clip-path: 				polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
	clip-path:  					polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
	background-color: 				rgba(255,255,255,1);
	width: 							15px;
	height: 15px;
	display: inline-block;
	margin-bottom: -2px;
	margin-left: 2px;
}
	
/* frontpage barrierefrei */

.fp__barrierefrei {
	background: 					transparent url("img/barrierfrei-teaser-bg-xs.jpg");
	background-size: 				cover;
 	padding-top: 					7em;
	padding-bottom: 				2em;
}

.fp__b__teaser {
	-webkit-clip-path: 				polygon(0% 0%, 85% 0, 100% 50%, 85% 100%, 0 100%);	
	 clip-path:  					polygon(0% 0%, 85% 0, 100% 50%, 85% 100%, 0 100%);	
	 width: 						100%;
 	 height: 						auto;
	 background-color: 				rgba(255,143,0,0.8);
	 padding: 						1.5em 1em 1em 1em;
}

.fp__b__teaser h1,
.fp__b__teaser h1 > a,
.fp__b__teaser h1 > a > span {
	color: 							#fff;
	text-transform: 				uppercase;
	font-size: 						17px;
	line-height: 					1.4em;
}

.fp__b__teaser p:first-of-type {
	margin-top: 					0.5em;
	padding-right: 					2em;
	color: 							#fff;
	line-height: 					1.4;
}


/* frontpage genehmigungen */

.fp__genehmigungen {
	position: 						relative;
	overflow-x:                     hidden;
}


.fp__g__teaser {
	padding-top: 3em;
}

.fp__g__dart a {
	-webkit-clip-path: 				polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
	clip-path:  					polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
	display: 						block;
	background-color: 				#FF8F00;
	width: 							130px;
	height: 						180px;
	position: 						absolute;
	top: 							90px;
	left: 							10%;
	webkit-transition: 				all 500ms ease-out;
	-moz-transition: 				all 500ms ease-out;
	-o-transition: 					all 500ms ease-out;
	transition: 					all 500ms ease-out;
	z-index:                        1000;
	border: 						2px solid #FF8F00;
	
}

.fp__g__dart a:hover,
.fp__g__dart a:focus {
	background-color: 				#003799;
	width: 							150px;
	height: 						180px;
	border: 						2px solid #003799;
}

.fp__g__dart {
	overflow: 						hidden;
	position: 						relative;
	min-height: 					300px;
}

.fp__g__photo {
	padding:                        0;
	position: 						absolute;
	width:                          496px;
	height:                         280px;
	bottom: 						0;
	right: 							-100px;
}

/* pagination */

article ul.pagination,
section ul.pagination {
	margin-left: 0;
	margin-top: 2em;
}

.pagination li {
	float: left;
	padding: 3px 9px;
	margin-right: 10px;
}

.pagination li a {
	color: #003799;
	text-decoration: none;
	font-size: 18px;
	text-transform: uppercase;
}

.pagination li a,
.pagination li a {
	color: 							#003799;
}

.pagination li:hover {
	background-color: 				#003799;
}

.pagination li.active {
	background-color:  				#FF8F00;
}

.pagination li.active a {
	color: 			 				#fff;
}

.pagination li:hover a,
.pagination li:hover a {
	color: 							#fff;
}

article ul.pagination > li::before,
section ul.pagination > li::before {
	content: 						"";
	-webkit-clip-path: 				none;
	clip-path:  					none;
	display: 						none;

}

/* pages overviews */

.page,
.overview {
	margin-top: 					3em;
}

.projects__listing {
	margin-top: 					3em;
}

.page h1.singletitle {
	margin-bottom: 					1.5em;
}

.page h2 {
	margin-bottom:                  1.5em;
}

.page h3 {
	margin-top: 					1.5em;
}

	
/* project cards */

.project__columns {
	padding-top: 2em;
}

.projects__card {
	margin-top: 					0.2rem;
	margin-bottom: 					2.8rem;
}
	
.projects__card h2 {
	font-size: 16px;
	padding: 0;
	color: #000;
	font-weight: 700;
}	

.card__body {
	-ms-flex: 						1 1 auto;
	flex: 							1 1 auto;
	padding: 						1.25rem 0.25rem;
}

.card__link {
	text-align: 					right;
}

.card__link a {
	text-transform: 				uppercase;
	text-decoration: 				none;
	font-weight: 					400;
	display: 						inline-block;
	padding:                        3px 6px;
	webkit-transition: 				all 500ms ease-out;
	-moz-transition: 				all 500ms ease-out;
	-o-transition: 					all 500ms ease-out;
	transition: 					all 500ms ease-out;
}

.card__link a > span {
	-webkit-clip-path: 				polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
	clip-path:  					polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
	background-color: 				#FF8F00;
	width: 							15px;
	height: 						15px;
	display: 						inline-block;
	margin-bottom: 					-2px;
	margin-left: 					6px;
}

.card__link a:hover {
	background-color:               #003799;
	color:                          #fff;
}

.card__link a:focus { 
	border: 						1px dotted #FF8F00;
}	
	


/* project single   */

.pp__content {
	margin-top: 					2em;
}

.lSSlideOuter .lSPager.lSpg > li a {
    background-color: 				#FF8F00;
}

.lSSlideOuter .lSPager.lSpg > li:hover a,
.lSSlideOuter .lSPager.lSpg > li.active a {
    background-color: 				#003799;
}

.lSAction > a {
    display: 						block;
    top: 							50%;
	width: 							40px;
    height: 						40px;
	-webkit-clip-path: 				polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
	clip-path: 						polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
	display: 						block;
	background-color: 				#FF8F00;
	background-image: 				none;

    cursor: 						pointer;
    position: 						absolute;
    z-index: 						99;
    margin-top: 					-20px;
    opacity: 						1;
	webkit-transition: 				all 500ms ease-out;
	-moz-transition: 				all 500ms ease-out;
	-o-transition: 					all 500ms ease-out;
	transition: 					all 500ms ease-out;
}

.lSAction > .lSPrev {
	transform: 						rotate(180deg);	
	left: 							-10px;
}

.lSAction > a:hover {
	background-color: 				#003799;
}


/* main pages */

.p__ma__header {
	background: 					transparent url("img/bf-page-teaser-bg-xs.jpg");
	background-size: 				cover;
 	padding-top: 					7em;
	padding-bottom: 				2em;
}

.p__ma__teaser {
	-webkit-clip-path: 				polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
	clip-path: 						polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
	background-color: 				rgba(255,143,0,0.8);
	padding: 						3em 3em 3em 1em;
}

.p__ma__teaser h1,
.p__ma__teaser h1 > a {
	color: 							#fff;
	text-transform: 				uppercase;
	font-size: 						24px;
	line-height: 					1.4em;
}

.p__ma__content {
	margin-top: 					3em;
}

/* footer */

.pp__footer {
	margin-top: 						2em;
}

.section__sponsoring--footer,
.section__social {
	padding-top: 						1em;
	background-repeat: 					no-repeat;
	background-position: 				top center;
	background-size: 					contain;
}



/* footer main site footer */

.site__footer {
	margin-top: 3em;
	background-color:  #ff8f00;
	padding-bottom: 2em;
}

.site__footer h2 {
	color: 								#fff;
	font-size: 							21px;
	text-transform: 					uppercase;
	margin: 					   		2em 0 1em;
	font-weight: 						700;
}

.site__footer ul,
.site__footer ul li {
	padding-left: 						0;
	margin-left: 						0;
	color: #fff;
}

.site__footer a {
	color: #fff;
	text-decoration: none;
}

.menu--service {
	margin-top:                     	30px;
}


.site__footer p {
	color: #fff;
}	
	
.site__footer ul li a {
	display: 							block;
	border-bottom: 						1px dashed #fff;
	padding: 							2px 0 3px 0;
	color: #fff;
	text-decoration: none;
	-webkit-transition: 				all 500ms ease-out;
	-moz-transition: 					all 500ms ease-out;
	-o-transition: 						all 500ms ease-out;
	transition: 						all 500ms ease-out;
	text-transform: 					uppercase;
}

.site__footer ul li a:hover {
	color: #003799;
	text-decoration: none;
}

.site__footer a:focus,
.site__footer ul li a:focus {
	color: #003799;
	border-bottom: 1px dashed #003799;
}


.site__legacy > .row {
	margin: 0; padding: 0;
}

.site__legacy {
	background-color: #000;
	padding: 15px 0;
}

.site__legacy p {
	color: #fff;
}









































@media (max-width: 768px) { 
	
.p__ma__header {
	background: 					transparent url("img/bf-page-teaser-bg-sm.jpg");
	background-size: 				cover;
 	padding-top: 					7em;
	padding-bottom: 				2em;
}

}
/*  - - - - -   max 768    - - - - -  */
 


@media only screen and (min-height: 600px) {
	
} 
/*  - - - - -  end max 620    - - - - -  */
  


@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
       
}
/*  - - - - -  end max ratio 3    - - - - -  */
 



/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	
	.container { 
		width: 								736px;
	}
	
	#menu--main-container > div > .container {
		width: 								100%;
	}	

	
	.d-xs-block,
	.d-md-block,
	.d-lg-block,
	.d-sm-none {
		display: 							none;
	}
	
	.d-sm-block,
	.d-xs-none,
	.d-md-none,
	.d-lg-none {
		display: 							block;
	}
	
	/* header */
	
	body > header {
		width:       						100%;
		min-height: 						150px;
	}

	.toggle-menu--main {
        right: 								10px;
	}

	
	/* main */
	
	.fp__barrierefrei {
		background: transparent url(img/barrierfrei-teaser-bg-sm.jpg);
		background-size: cover;
		padding-top: 8em;
		padding-bottom: 2em;
	}
	
	.fp__b__teaser h1, 
    .fp__b__teaser h1 > a, 
    .fp__b__teaser h1 > a > span {
		font-size: 18px;
		line-height: 1.4em;
	}
	
	.fp__g__dart a {
		top: 							90px;
		left: 							30%;
	}
	
	.fp__g__photo {
		width:                          662px;
		height:                         374px;
		right:                         -200px;
	}
	
	/* pages overviews */
	
	.projects__header {
		position: 						relative;
		overflow-x: 					hidden;
		background:                     transparent url("img/plan-md-neu.png") no-repeat -425px 0;
		background-size:                auto 350px;
		min-height:                     350px;
	}
	
	
	.projects__header::before {
		content: 						"";
		display: 						block;
		position: 						absolute;
		top: 							0;
		left: 							70px;
		-webkit-clip-path: 				polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
		clip-path:  					polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
		display: 						block;
		background-color: 				#FF8F00;
		width: 							140px;
		height: 						350px;
	}
	
	.project__columns {
		-webkit-column-count: 			2;
		-moz-column-count: 				2;
		column-count: 					2;
		-webkit-column-gap: 			1.2rem;
		-moz-column-gap: 				1.2rem;
		column-gap: 					1.2rem;
		orphans: 						1;
		widows: 						1;
		overflow: 						visible;
	}
	
	.projects__card {
		position: 						relative;
		display: 						inline-block;
		width: 							100%;
		-ms-flex-direction: 			column;
		flex-direction: 				column;
		min-width: 						0;
		word-wrap: 						break-word;
		background-color: 				#fff;
		background-clip: 				border-box;
		border: 						1px solid rgba(0,55,153,1);
		-webkit-box-shadow: 			3px 6px 5px 0 #ddd;
		-moz-box-shadow: 				3px 6px 5px 0 #ddd;
		box-shadow: 					3px 6px 5px 0 #ddd;
		margin-bottom: 					1.8rem;
	}
	
	.card__body {
		padding: 						1.25rem;
	}
	
	.page--simple {
		position: 						relative;
		padding-bottom: 				2em;
	}
	
	.ps__content {
		position: relative;
	}
	
	.page--simple .ps__content::before {
		content: 						"";
		display: 						block;
		position: 						absolute;
		top: 							1em;
		left: 							-100px;
		-webkit-clip-path: 				polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
		clip-path:  					polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
		display: 						block;
		background-color: 				#FF8F00;
		width: 							140px;
		height: 						350px;
	}	
	
	.ps__image {
		margin-bottom: 3em;
	}
	
	
	/* project pages */
	
	.pp__footer {
		min-height: 480px;
		padding-top: 100px;
		padding-bottom: 100px;
		margin-bottom: -6em;
		position: relative;
		background: url("img/page-footer-bg-md.png") 75% 278px no-repeat;
	}
	
	.lSAction > a {
		display: 						block;
		top: 							50%;
		width: 							80px;
		height: 						80px;
		-webkit-clip-path: 				polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
		clip-path: 						polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
		display: 						block;
		background-color: 				#FF8F00;
		background-image: 				none;

		cursor: 						pointer;
		position: 						absolute;
		z-index: 						99;
		margin-top: 					-40px;
		opacity: 						1;
		webkit-transition: 				all 500ms ease-out;
		-moz-transition: 				all 500ms ease-out;
		-o-transition: 					all 500ms ease-out;
		transition: 					all 500ms ease-out;
	}

	.lSAction > .lSPrev {
		transform: 						rotate(180deg);	
		left: 							calc(-10px - 1em);
	}

	.lSAction > a:hover {
		background-color: 				#003799;
	}
	
	#content-slider > li {
		padding: 						0 2em 0 2em;
	}

	/* main pages */
	
	.p__ma__header {
		background: 					transparent url("img/bf-page-teaser-bg-sm.jpg");
		background-size: 				cover;
		padding-top: 					6em;
		padding-bottom: 				2em;
	}

	
	
	
	
	
	/* footer */

	.site__footer {
		overflow: hidden;
		background-image: url("img/footer-bg.png");
		background-position: 75% -158px;
		background-repeat: no-repeat;
	}
	
	.menu--service {
		margin-top:                     	98px;
	}

	
}
/* end media 768px */




































/* - - - - - Large devices (desktops, 992px and up) - - - - -  */
@media screen and (min-width: 992px) {
	
	body {
	    padding-top: 3em;
	}
	
	
	.container,
	#menu--main-container > div > .container  {
		width: 								976px;
	}

	.d-xs-block,
	.d-sm-block,
	.d-lg-block,
	.d-md-none {
		display: 							none;
	}
	
	.d-md-block,
	.d-xs-none,
	.d-sm-none  {
		display: 							block;
	}
	

	/* header */
	
	body > header {
		width:       						100%;
		min-height: 						150px;
	}
	
	body > header #mobile-menu-container {
		min-height: 35px;
	}

	body > header  .menu--outer {			/* generate full width toggle menu */
		padding-left: 						1rem;
		padding-right: 						1rem;
	}	
	

	/* main menu */
	
	.menu--main {
		width: 								auto;
		display: 							block !important;
	}

	.menu--main a {
		border: 							none;
		padding: 							4px 22px 3px;
		font-size: 							15px;
		color:                              #333;
		background-color:                   transparent;
		border: 							2px solid #fff;
	}
	
	



	
	.menu--main a:hover {
		text-decoration: 					none;
	}
	
	.menu--main a::before {
		content: 							">";
		-webkit-clip-path: 					polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
		clip-path:  						polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
		display: 							inline-block;
		background-color: 					#fff;
		width: 								2px;
		height: 							17px;
		left: 								13px;
		padding-left:                       14px;
		-webkit-transition: 				all 300ms ease-out;
		-moz-transition: 					all 300ms ease-out;
		-o-transition: 						all 300ms ease-out;
		transition: 						all 300ms ease-out;
	}
	
	.menu--main li {
		width: 								auto;
		padding: 							0 0 0 0;
		height: 							29px;
	}
	
	.menu--main li:first-of-type a {
		padding-left:                       0;
	}
	
	.menu--main li:last-of-type a {
		border-bottom: 						1px solid #fff;
	}



	.menu--main > ul > li.active > a::before,	
	.menu--main > ul > li:hover  > a::before,	
	.menu--main > ul > li:focus  > a::before {	
		background-color: 					#FF8F00;
	}
	
	.menu--main a:focus,
	.menu--main li:last-of-type a:focus {
		border: 							1px dotted #FF8F00;
	}
	
	
	
	
	/* home */

	.menu--main > ul > li:first-of-type {
		display: block;
	}
	
	.toggle-menu--main,
	.toggle-sub-menu {
		display: 							none !important;	
	}
	
	/* main */
	
	.fp__barrierefrei {
		background: 						transparent url(img/barrierfrei-teaser-bg-md.jpg);
		background-size: 					cover;
		padding-top: 						15em;
		padding-bottom: 					2em;
	}
	
	.fp__b__teaser {
		padding: 1.5em 1em 1em 1.5em;
	}
	
	.fp__b__teaser h1 {
		margin: 							0.5em 0 1em;	
	}
	
	.fp__b__teaser p:first-of-type {
		line-height: 						1.5em;
	}
	
	.fp__b__teaser p:last-of-type {
		text-align: 						right;
		margin-right:                       70px;
	}
	
	.fp__b__teaser h1, .fp__b__teaser h1 > a,
	.fp__b__teaser h1 > a > span {
		font-size: 							21px;
		line-height: 						1.3em;
	}
	
	.fp__genehmigungen {
		min-height:                         400px;
		background-size:                    50%;
		background-position: 				550px bottom;
	}
	
	.fp__g__teaser h1 {
		font-size: 							24px;
	}
	
	.fp__g__dart {
		min-height:                          450px;
	}
	
	.fp__g__dart a {
		top: 								200px;
		left: 								0;
	}
	
	.fp__g__photo {
		right:                         		-50px;
	}
	
	/* pages overviews */
	
	.projects__header {
		background-position:            -350px 0;
		background-size:                auto 350px;
		min-height:                     350px;
	}
	
	.projects__header::before {
		left: 							150px;
	}
	
	.project__columns {
		-webkit-column-count: 			3;
		-moz-column-count: 				3;
		column-count: 					3;
		-webkit-column-gap: 			1.2rem;
		-moz-column-gap: 				1.2rem;
		column-gap: 					1.2rem;
		orphans: 						1;
		widows: 						1;
		overflow: 						visible;
	}
	
	.projects__card {
		-webkit-transition: 			all .2s ease-in-out;
		-moz-transition: 				all .2s ease-in-out;
		-o-transition: 					all .2s ease-in-out;
		transition: 					all .2s ease-in-out;
		margin-top:                     1rem;
	}
	
	.projects__card:hover { 
		transform: 						scale(1.02);
	}
	
	.projects__card:focus { 
		border: 						1px solid #FF8F00;
	}	
	
	
	.card__title {
		margin:  						.2em 0;
	}
	
	.page--simple .ps__content::before {
		top:   							0;
		left: 							-140px;
	}		

	.page--simple .ps__content::after {
		content: 						"";
		display: 						block;
		position: 						absolute;
		bottom: 						10%;
		right: 							-40%;
		-webkit-clip-path: 				polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
		clip-path:  					polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
		display: 						block;
		background-color: 				#FF8F00;
		width: 							300px;
		height: 						250px;
		transform: 						rotate(10deg);
	}	
	
	/* project pages */
	
	.pp__footer {
		background-position: 280px 278px;

	}
	
	/* main pages */
	
	.p__ma__header {
		background: 					transparent url("img/bf-page-teaser-bg-md.jpg");
		background-size: 				cover;
		padding-top: 					14em;
		padding-bottom: 				4em;
	}
	
	.p__ma__teaser {
		padding-bottom: 				4em;
	}

	.ps__image {
		margin-bottom: 3em;
	}
	
	/* footer */
	
	.site__footer {
		background-position: 280px -158px;
	}
	
	.logo--white {
		margin: 30px 0 30px 0;
	}
}
/* end media 992px */


	

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	
	body {
    	font-size: 17px;
	}
	
	.container,
	.container, #menu--main-container > div > .container {
		width: 				1134px;
	}
	
	/* helpers */
	
	.d-xs-block,
	.d-sm-block,
	.d-lg-none {
		display: 							none;
	}
	
	.d-xs-none,
	.d-sm-none  {
		display: 							block;
	}
	
		/* header */
	
	body > header {
		min-height: 						170px;
	}
	
	.logo {
		margin: 							0 0 48px 0;
		width: 								315px;
		height: 							80px;
		background: 						transparent url("img/atelier-m3-logo-lg.png") no-repeat top left; 
	}
	
		/* main menu */
	
	#menu--main-container {
		min-height: 37px;
	}

	.menu--main li {
		height: 								37px;
	}
	
	.menu--main a {
		font-size: 								16px;
		padding: 								7px 30px 3px 30px;
		line-height: 							1.4;
		letter-spacing:                         0.03em;
		border: 								2px solid #fff;
	}

	.has-sub-menu a {
		padding-right: 							13px;
	}

	.has-sub-menu:after {
		display: 								none;
	}
	
	/* main */
	
	.fp__b__teaser h1,
	.fp__b__teaser h1 > a,
	.fp__b__teaser h1 > a > span {
		font-size: 							24px;
		line-height: 						1.3em;
	}
	
	.fp__barrierefrei {
		background: transparent url(img/barrierfrei-teaser-bg-lg.jpg);
		background-size: 						cover;
		padding-top: 							18em;
		padding-bottom: 						3em;
	}
	
	
	.fp__genehmigungen {
		min-height: 590px;
		background-size: 40%;
		background-position:  right bottom;
	}
	
	.fp__g__teaser h1 {
    	font-size: 28px;
	}
	
	.fp__g__dart a {
		-webkit-clip-path: polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
		clip-path: polygon(30% 0, 65% 50%, 30% 100%, 0% 100%, 35% 50%, 0% 0%);
		display: block;
		background-color: #FF8F00;
		width: 150px;
		height: 220px;
		position: absolute;
		top: 240px;
		left: auto;
		webkit-transition: all 500ms ease-out;
		-moz-transition: all 500ms ease-out;
		-o-transition: all 500ms ease-out;
		transition: all 500ms ease-out;
	}
	
	.fp__g__dart a:hover {
		background-color: 				#003799;
		width: 							180px;
		height: 						220px;
	}
	
	.fp__g__photo {
		width:                          900px;
		height:                         458px;
		right:                          -50px;
	}
	
	/* pages overviews */
	
	.pages,
	.overview {
		margin-top: 					2em;
	}
	
	.projects__header p:first-of-type {
		margin: 						1em 0;
	}
	
	.projects__listing h1 {
   		margin-top:                     2em;
		margin-bottom: 					1em;
	}
	
	.projects__header {
		background-position:            -390px 0;
		background-size:                auto 400px;
		min-height:                     400px;
	}
	
	.projects__header::before {
		left: 							150px;
		width: 							200px;
		height: 						400px;
	}
	
	.project__columns {
		padding-top:        			0;
		-webkit-column-gap: 			2rem;
		-moz-column-gap: 				2rem;
		column-gap: 					2rem;
	}

	/* single project */
	
	main {
		z-index: 0;
	}
	
	.pp__content {
		margin-top:                     2em;
	}
	
	.pp__footer {
		background: url(img/page-footer-bg.png) 70% 248px no-repeat;
	}

	#content-slider > li {
		padding: 						0 3em 0 3em;
	}

	.lSAction > .lSNext {
		background-position: -32px 0;
		right: -26px;
	}
	
	/* main pages */
	
	
	.p__ma__header {
		min-height: 					300px;
	}
	
	.p__ma__header-bf {
		background: 					transparent url("img/bf-page-teaser-bg-lg.jpg");
		background-size: 				cover;
		background-position: 			-4em center;
		padding-top: 					16em;
		padding-bottom: 				3em;
	}
	
	.p__ma__teaser h1,
	.p__ma__teaser h1 > a {
		font-size: 							36px;
		line-height: 						1.3em;
	}
	
	.p__ma__teaser {
		padding: 						3em 1em 6em 2.5em;
	}
	
	.p__ma__content {
		padding-top: 					6em;
	}
	
	.p__ma__content h3 {
		font-size: 						1.5em;
    	font-weight: 					700;
    	line-height: 					1.5;
		margin-bottom: 					1em;
	}
	
	/* simple page header */
	
	.ps__image {
		margin-bottom: 5em;
	}
	
	/* footer */
	
	.site__footer {
		z-index: 1000;
		overflow: hidden;
		background-image: url(img/footer-bg-lg.png);
		background-position: 70% -232px;
		background-size: 837px 884px;
		background-repeat: no-repeat;
		padding-bottom:  6em;
		margin-top: 6em;
	}
	


}
/* end media 1200px */

/* Extra extra large devices (large desktops, 1200px and up) */
@media (min-width: 1400px) { 

	.fp__g__photo {
		width:                         1061px;
		height:                         450px;
		right:                          -80px;
	}
	
	.projects__header {
		background-position:            -340px 0;
	}
	
	.projects__header::before {
		left: 							200px;
	}
	
	.page--simple .ps__content::before {
		top: 							0;
		left: 							0;
	}	
	
	#content-slider > li {
		padding: 						0 4em 0 6em;
	}
	
}

/* XXX large devices (large desktops, 1200px and up) */
@media (min-width: 1600px) { 

	.projects__header {
		background-position:            -190px 0;
	}
	
	.projects__header::before {
		left: 							350px;
	}
	
	.page--simple .ps__content::before {
		left: 							0;
	}	
}

/* XXX large devices (large desktops, 1200px and up) */
@media (min-width: 1800px) { 

	.projects__header {
		background-position:            -100px 0;
	}
	
	.projects__header::before {
		left: 							460px;
	}

	.page--simple .ps__content::before {
		
		left: 							-160px;
	}	
}


/* XXX large devices (large desktops, 1200px and up) */
@media (min-width: 1940px) { 

	.fp__g__photo {
		right:                          0px;
	}
	
	.projects__header {
		background-position:            -40px 0;
	}
	
	.projects__header::before {
		left: 							500px;
	}
	
}