/*  Autor: Jacob Kielhorn
    
    
    *****************************************
  */






    
/*------------------------ ALLGEMEIN ------------------------*/

	* {
	  box-sizing: border-box;
	  font-family: 'Lato', sans-serif;
	
	}
	
	body {
	  background: #fff;
	 
	 
	}
	
	
	html {
		 overflow: -moz-scrollbars-vertical;
		 overflow: scroll;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	
	
	img {
		margin:0;
		width:100%;
	}
	
	
	h1, h2, h3, h4, h5, h6 {
	  color: #000;
	  font-family: "Lato", arial;
	  letter-spacing: 1.0px;
	  text-align:center;
	}
	
	h1 {
	  font-size: 2em;
	  margin: 0.67em 0;
	}
	
	h2 {
	  font-size: 1.3em;
	  margin: 0.75em 0;
	}
	
	h3 {
	  font-size: 1.17em;
	  margin: 0.83em 0;
	}
	
	h5 {
	  font-size: .83em;
	  margin: 1.5em 0;
	}
	
	h6 {
	  font-size: .75em;
	  margin: 1.67em 0;
	}
	
	h1, h2, h3, h4,
	h5, h6 {
	  font-weight: bolder;
	}
	
	
	.clearfix:before,
	.clearfix:after {
	  content: " ";
	  display: table;
	}
	
	.clearfix:after {
	  clear: both;
	}
	
	.clearfix {
	  *zoom: 1;
	}
	
	
	.clear {
		clear:both;
		}


	.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
	text-align:center;
		}


	.weiss{

		position:absolute;
		width:100%;
		height:110%;
		background:#fff;
		z-index:999999;
		top:-10%;
		}

	.weiss2{

		position:absolute;
		width:100%;
		height:100%;
		background:#fff;
		z-index:999999;
		top:190px;
		}


	.weiss3{

		position:absolute;
		width:100%;
		height:100%;
		background:#fff;
		z-index:999999;
		top:0px;
		}
/*------------------------ END: ALLGEMEIN ------------------------*/



/*------------------------ MAIN  ------------------------*/
	.main {
	  width: 100%;
	  height: 100%;
	  padding:0;
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  box-sizing: border-box;
	  position: relative;
	  z-index: 55;
	  background: #fff;
	  clear: both;
	}
/*------------------------END: MAIN ------------------------*/








/*--------------------------------------------- HEADER -----------------------------------------------*/

	header {
		width:1150px;
		height: auto;
		position: relative;
		margin-left:auto;
		margin-right:auto;
		z-index: 999;
		background-color:#fff;
		clear:both;
		text-align:center;
		margin-top: 60px;
		padding-top: 0px;
	}
	  
/*------------------------END: HEADER ------------------------*/  



/*------------------------HEADER NAME FADE IN OUT ------------------------*/

	header .name{
				height:80px;
				position:absolute;
				left: 313px;
				width:524px;
				text-align:center;
				background:#fff;
				margin-left:auto;
				margin-right:auto;
				z-index:99999;
				padding-top:20px;
	
			}
	
	header .name h1{
				font-weight:800;
				letter-spacing: 10.8px;
				font-size: 40px;
				margin: 0px 0px;
				text-align:center;
				padding-top:0px;
				background:#fff;
		}
		
	header .name h1 span{
			letter-spacing: 4px;
		}
		
	.leer{	
			font-size: 17px;
		}



		
/*------------------------END: HEADER NAME FADE IN OUT ------------------------*/
	
	
	

/*------------------------HEADER-LOGO ------------------------*/
	header .logo {
			height:50px;
			position:relative;
			width:50px;
			text-align:center;
			background:#000;
			margin-left:auto;
			margin-right:auto;
			margin-top:60px;
			margin-bottom:30px;
	
		}
	
		
	header .logo a img {
			width:50px;
			height:50px;
	}



/*------------------------END: HEADER-LOGO ------------------------*/	



/*------------------------HEADER-LOGO: FARBEN (ARBEIT) ------------------------*/	
	header .fstart{
	background:#000;
		}
	header .fking{
	background:#434f69;	
		}
	header .ftuya{
	background:#664c3b;	
		}
	header .ferkhii{
	background:#000;	
		}		
	header .foben{
	background:#5e663f;	
		}	
	header .fmuster{
	background:#663b1c;	
		}	
	header .fwalser{
	background:#5a5866;	
		}	
		
	header .feis{
	background:#5a5866;	
		}
	header .faura{
	background:#66244f;	
		}		
	header .fpuppen{
	background:#2e4065;	
		}	
	header .fkette{
	background:#663927;	
		}		
	header .ftiger{
	background:#663a22;	
		}	
	header .fcollage{
	background:#6b3d48;	
		}	
	header .fautoren{
	background:#66543d;	
		}	
	header .ftiere{
	background:#664e46;	
		}		
	header .fthiel{
	background:#66231f;	
		}	
	header .ffenster{
	background:#476367;	
		}		
	header .flaterne{
	background:#66571f;	
		}
	header .fmini{
	background:#2f4266;	
		}	
	header .fskizzen{
	background:#2f4266;	
		}
	header .fbildungsratgeber{
	background:#55661a;	
		}
	header .flr{
	background:#2a4766;	
		}
	header .fclp{
	background:#000;	
		}	
	header .fring{
	background:#3e4967;	
		}		
	header .fimp{
	background:#000;	
		}
		header .fkolo{
	background:#4b3a66;	
		}	
		
		
		
/*------------------------END:HEADER-LOGO: FARBEN (ARBEIT) ------------------------*/	

/*--------------------------------------------- END: HEADER -----------------------------------------------*/







/*------------------------MENU ------------------------*/



	.menu {
		display: block;
		height: 50px;
		width: 1150px;
		position: relative;
		margin-left: auto;
		margin-right: auto;

		text-align: center;
		padding-top: 9px;
		background: #fff;
		
		

		}



	.menu1{
		width: auto;
		position: relative;
		float: left;
		height: auto;
		padding-top: 20px;
		display: inline-block;
			}	

	.menu2{
		width: auto;
		float:right;
		position: relative;
		height: auto;
		padding-top: 20px;
		display: inline-block;
		
			}

		.menu3{
		width: auto;
		float:right;
		position: relative;
		height: auto;
		padding-top: 20px;
		display: inline-block;
			padding-right: 20px;
		
			}
		

			
			
	
.menu a{
		margin:0px 0px 0 0px;
		font-family: 'Lato', sans-serif;
		font-weight: 400;
		padding-top:20px;
		padding-bottom:10px;
		color:#000;
		

		}
		

	.menu a:hover{
	
		
		font-weight: 700;
		cursor: pointer;
		
			}



		
	.menu a.current { 
		font-family: 'Lato', sans-serif;
		   font-weight:700;
		}
	.menu a::after {
		display:block; 
		content:attr(name); 
		font-weight:700; 
		visibility: hidden; 
		overflow: hidden; 
		height: 0px; 
		} 



			
	

/*------------------------END: MENU ------------------------*/	







/*------------------------ISOTOPE GRID ------------------------*/

	.portfolioContainer{
		text-align:center;
		width:1200px;
		background:#fff;
		margin-top:5px;
		margin-left:auto;
		margin-right:auto;
		
		
		}

	.isotope-item {
			z-index: 2;
		
	}
	.isotope-hidden.isotope-item {
		pointer-events: none;
		z-index: 1;
	}
	
				
	
	
	.item, .photo, .illu, .layout, .andere .all {
			
			width:33.33333%;
			padding:25px;
			line-height:0;
			
			}

		
/*---------------BILDUNTERSCHRIFTEN ---------------*/
		
	.portfolioContainer p {
		display:none;
		letter-spacing: .1px;
		font-weight: 700;
		font-size: 14px;
		text-align: right;
		color: #000;
		margin-top: 3%;
		line-height: 1.2;
		margin-right: 3.2%;
		
	}
		
		.portfolioContainer p span{

		font-size: 14px;
			font-weight: 400;
		font-style: italic;
		color:	#7f7f7f;

		
	}	
		
		
/*------------------------END: ISOTOPE GRID ------------------------*/




/*------------------------LINKS,OVERLAY ISOTOPE ------------------------*/
	

	.caption {
	  position: absolute;
	  display: block;
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  background: #fff;
	  opacity: 0;
	  padding:25px;
		
	  
	}
	
	
	a .caption {
	  transition: all .4s linear;
	  -webkit-transition: all .4s linear;
	  -moz-transition: all .4s linear;
	  -o-transition: all .4s linear;
		
	}
	
	
	a:hover .caption {
		opacity: 0.96;
		}
	
	
	.caption .work_title {
		display: block;
		width: 100%;
		position: absolute;
		text-align: center;
		top: 42%;
		margin-top: -45px;
		line-height: 1.35;
		left: 0;
		right: 0;
		}
	
	
	.caption h1 {
	  position: relative;
	  display: inline-block;
		text-align: center;
	  max-width: 90%;
	  padding: 20px 0;
	  z-index: 77;
	  color: #454545;
	  font-family: "lato", arial;
	  font-size: 16px;
	  letter-spacing: .5px;
	  opacity: 0.6;
	
	}

	.caption h1 span{

	 line-height: 1.2;
		font-style: italic;
	  font-size: 16px;
	font-weight: 400;
			
	}





/*------------------------END: LINKS,OVERLAY ISOTOPE ------------------------*/





/*------------------------SCROLL UP ------------------------*/
	.scroll_up{
		display:block;
		width:100%;
		height:40px;
		position:relative;
		float:left;
		margin-left:0;
		margin-right:0;
		margin-bottom: 40px;
		z-index:9999;
		}
	

	.cd-top {
		display: inline-block;
		height: 40px;
		width: 101%;
		position: relative;
		float:left;

		/* image replacement properties */
		overflow: hidden;
		text-indent: 100%;
		/*white-space: nowrap;*/
		background: url(../img/cd-top-arrow02.svg) no-repeat center 50%;
		visibility:visible;
		opacity: 0.5;

		}


	.cd-top2 {
		display: inline-block;
		height: 40px;
		width: 101%;
		position: relative;
		float:left;

		/* image replacement properties */
		overflow: hidden;
		text-indent: 100%;
		/*white-space: nowrap;*/
		background: url(../img/cd-top-arrow03.svg) no-repeat center 50%;
		visibility:visible;
		opacity: 0.5;

		}
	
	.no-touch .cd-top2:hover {  
	  opacity: 1;	 
	}

	
	.no-touch .cd-top:hover {  
	  opacity: 1;	 
	}
/*------------------------END: SCROLL UP ------------------------*/










/*------------------------            ARBEIT-SEITE               ------------------------*/


.black{
		background: #000;
		color:#fff;
		}





/*------------------------ARBEIT-NAVIGATION ------------------------*/
	.arbeitnav {
		position:relative;
		width:54px;
		float:right;
		text-align:center;
	
		font-size:14px;
		margin-right:2.2%;
		padding-top:7px;
		line-height: 1.5;
		}


	.arbeitnav a{
	
		font-family: 'Lato', sans-serif;
		font-weight:400;

		transition: font-weight .3s ease-in-out;
		}
	
	
	
	.arbeitnav a:hover{
		font-weight: 700;
		transition: font-weight .3s ease-in-out;
		}


	.arbeitnav a::after {
		display:block;
		content:attr(name); 
		font-weight:700; 
		visibility: hidden; 
		overflow: hidden; 
		height: 0px;
		} 

/*------------------------END: ARBEIT-NAVIGATION ------------------------*/






/*------------------------ INHALT ------------------------*/
	.container{
	
		position:relative;
		text-align:center;
		width:1200px;
		height:auto;

		margin-top:70px;
		margin-left:auto;
		margin-right:auto;
		overflow:hidden;
		}

	.container2{
	
		position:relative;
		text-align:center;
		width:1200px;
		height:auto;
		
		margin-top:0px;
		margin-left:auto;
		margin-right:auto;
		overflow:hidden;
		}



	.text{
		width:524px;
		float:left;
		margin-left:2.2%;
		margin-right:auto;
	
		}
	


	
	.text p {
		padding-top:10px;
		text-align:left;
		font-size:14px;
		letter-spacing: 1.0px;
		line-height:1.5;
	
		}
	
	.text p span{
		font-size:14px;
		font-style:italic;
		text-align:left;
		color:#000;
		font-weight:600;
		}
			
	.text a{
		text-decoration:underline;
		}

	.text  h2 {
	
	  font-family: "Lato", arial;
	  text-align:left;
	  line-height:0;
	  }
/*------------------------ END: INHALT ------------------------*/

	



/*------------------------VIDEO ------------------------*/

	.video {
		width: 100%;
		}

	.wrapper{
		display:table;
		
		position:relative;
		width:100%;
		cursor: pointer;
		}
	
	.playpause {
		background-image:url("../img/play.png");
		background-repeat:no-repeat;
		width:70px;
		height:70px;
		position:absolute;
		left:0%;
		right:0%;
		top:0%;
		bottom:0%;
		margin:auto;
		background-size:contain;
		background-position: center;
		}
/*------------------------END: VIDEO ------------------------*/








/*------------------------BILDCONTAINER ------------------------*/

	.bild{
		position:relative;
		float:left;
		height:auto;
		padding-left:25px;
		padding-right:25px;	
		margin-bottom:50px;
		margin-top:25px;
		width:100%;
		line-height:0;
		}
		
	.bild p {
		font-size:14px;
		font-style:italic;
		text-align:right;
		color:#7f7f7f;
		margin-top:10px;
		margin-right:15px;
		line-height: 1.5;
		}
		
	.bild p span{
	color:#8D8D8D;
		}
	
		
		
	.breit{
		display:block;
		}
	.schmal{
		display:none;
		}
	
	
	.halb{
		width:50%;	
		}
	
	.zweidrittel{
		width:65.3%;	
		}

	.drittel{
		width:34.7%;	
		}

	.drittelb{
		width:33.333%;	
		}
	
	.viertel{
		width:25%;	
		}

#image-reel {
    width: 100%;
    height: 100%;
}

/*------------------------END: BILDCONTAINER ------------------------*/







/*------------------------ JS-SLIDER ------------------------*/


/*------- SLIDER-S_1 ------*/


	.sliderwrapper-s {

		width: 500px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		}



	.slider-s {
	  position: relative;
	  overflow: hidden;
	  margin: 20px auto 0 auto;
		width: 100%;
		height: auto;
		}


	.slider-s img{
	width:350px;
		}


	.slider-s ul {
	  position: relative;
	  margin: 0;
	  padding: 0;
	  height: 200px;
	  list-style: none;
	}

	.slider-s ul li {
	  position: relative;
	  display: block;
	  float: left;
	  margin: 0;
	  padding: 0;
	  width: 350px;
	  height: 700px;
	  background: #ccc;
	  text-align: center;
	  line-height:700px;
		-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0);
	}

	a.control_prev-s, a.control_next-s {
	  position: absolute;
	  top: 50%;
	  z-index: 999;
	  display: block;
	  padding: 30px 30px;
	  width: auto;
	  height: auto;
	  /*background: #2a2a2a;*/
	  color: #fff;
	  text-decoration: none;
	  font-weight: 600;
	  font-size: 22px;
	  opacity: 0.7;
	  cursor: pointer;
	}

	.no-touch a.control_prev-s:hover, .no-touch a.control_next-s:hover {
	  opacity: 1;
	  -webkit-transition: all 0.2s ease;
	}



	a.control_next-s {
	 margin-left:425px;

	}




/*------- SLIDER-M_1 ------*/

	.sliderwrapper-m  {

		width: 850px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
z-index:9999;
		
	}




	.slider-m {
	  position: relative;
	  overflow: hidden;
	  margin: 20px auto 0 auto;
		width: 100%;
		height: auto;
		z-index:9999;
		
			
		
	}


	.slider-m img{
	width:700px;
		

	}



	.slider-m ul {
	  position: relative;
	  margin: 0;
	  padding: 0;
	  height: 200px;
	  list-style: none;
	}

	.slider-m ul li {
	  position: relative;
	  display: block;
	  float: left;
	  margin: 0;
	  padding: 0;
	  width: 700px;
	  height: 700px;
	  background: #ccc;
	  text-align: center;
	  line-height:700px;
		-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0);
	}

	a.control_prev-m, a.control_next-m {
	 position: absolute;
	  top: 50%;
	  z-index: 999;
	  display: block;
	  padding: 30px 30px;
	  width: auto;
	  height: auto;
	  /*background: #2a2a2a;*/
	  color: #fff;
	  text-decoration: none;
	  font-weight: 600;
	  font-size: 22px;
	  opacity: 0.7;
	  cursor: pointer;
	}

	.no-touch a.control_prev-m:hover, .no-touch a.control_next-m:hover {
	  opacity: 1;
	  -webkit-transition: all 0.2s ease;
	}



	a.control_next-m {
	margin-left:775px;
	}







/*------- SLIDER-XS_1 ------*/


	.sliderwrapper-xs {

		width: 284px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}



	.slider-xs {
	  position: relative;
	  overflow: hidden;
	  margin: 20px auto 0 auto;
		width: 100%;
		height: auto;
	}


	.slider-xs img{
	width:284px;

	}


	.slider-xs ul {
	  position: relative;
	  margin: 0;
	  padding: 0;
	  height: 200px;
	  list-style: none;
	}

	.slider-xs ul li {
	  position: relative;
	  display: block;
	  float: left;
	  margin: 0;
	  padding: 0;
	  width: 284px;
	  height: 568px;
	  background: #ccc;
	  text-align: center;
	  line-height:568px;
		-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0);
	}

	a.control_prev-xs, a.control_next-xs {
	  position: absolute;
	  top: 45%;
	  z-index: 999;
		left:0px;
	  display: block;
	  padding: 30px 10px;

	  width: auto;
	  height: auto;
	  /*background: #2a2a2a;*/
	  color: #fff;
	  text-decoration: none;
	  font-weight: 600;
	  font-size: 22px;
	  opacity: 0.7;
	  cursor: pointer;
	}

	.no-touch a.control_prev-xs:hover, .no-touch a.control_next-xs:hover {
	  opacity: 1;
	  -webkit-transition: all 0.2s ease;
	}



	a.control_next-xs {
	left:250px;

	}







/*------- SLIDER-S_2 ------*/



	.sliderwrapper-s2 {

		width: 500px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}



	.slider-s2 {
	  position: relative;
	  overflow: hidden;
	  margin: 20px auto 0 auto;
		width: 100%;
		height: auto;
	}


	.slider-s2 img{
	width:350px;
	
	}


	.slider-s2 ul {
	  position: relative;
	  margin: 0;
	  padding: 0;
	  height: 200px;
	  list-style: none;
	}

	.slider-s2 ul li {
	  position: relative;
	  display: block;
	  float: left;
	  margin: 0;
	  padding: 0;
	  width: 350px;
	  height: 688px;
	  background: #ccc;
	  text-align: center;
	  line-height:688px;
			-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0);
	}

	a.control_prev-s2, a.control_next-s2 {
	  position: absolute;
	  top: 50%;
	  z-index: 999;
	  display: block;
	  padding: 30px 30px;
	  width: auto;
	  height: auto;
	  /*background: #2a2a2a;*/
	  color: #fff;
	  text-decoration: none;
	  font-weight: 600;
	  font-size: 22px;
	  opacity: 0.7;
	  cursor: pointer;
	}

	.no-touch a.control_prev-s2:hover, .no-touch a.control_next-s2:hover {
	  opacity: 1;
	  -webkit-transition: all 0.2s ease;
	}



	a.control_next-s2 {
	 margin-left:425px;

	}





/*------- SLIDER-M_2 ------*/



	.sliderwrapper-m2  {

		width: 850px;
		height: auto;
		margin-left: auto;
		margin-right: auto;

	}




	.slider-m2 {
	  position: relative;
	  overflow: hidden;
	  margin: 20px auto 0 auto;
		width: 100%;
		height: auto;
	}


	.slider-m2 img{
	width:700px;

	}


	.slider-m2 ul {
	  position: relative;
	  margin: 0;
	  padding: 0;
	  height: 200px;
	  list-style: none;
	}

	.slider-m2 ul li {
	  position: relative;
	  display: block;
	  float: left;
	  margin: 0;
	  padding: 0;
	  width: 700px;
	  height: 688px;
	  background: #ccc;
	  text-align: center;
	  line-height:688px;
		-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0);
	}

	a.control_prev-m2, a.control_next-m2 {
	 position: absolute;
	  top: 50%;
	  z-index: 999;
	  display: block;
	  padding: 30px 30px;
	  width: auto;
	  height: auto;
	  /*background: #2a2a2a;*/
	  color: #fff;
	  text-decoration: none;
	  font-weight: 600;
	  font-size: 22px;
	  opacity: 0.7;
	  cursor: pointer;
	}

	.no-touch a.control_prev-m2:hover, .no-touch a.control_next-m2:hover {
	  opacity: 1;
	  -webkit-transition: all 0.2s ease;
	}



	a.control_next-m2 {
	margin-left:775px;
	}





/*------- SLIDER-XS_2 ------*/


	.sliderwrapper-xs2 {

		width: 284px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		}



	.slider-xs2 {
	  position: relative;
	  overflow: hidden;
	  margin: 20px auto 0 auto;
		width: 100%;
		height: auto;
		}


	.slider-xs2 img{
		width:284px;
	
		}


	.slider-xs2 ul {
	  position: relative;
	  margin: 0;
	  padding: 0;
	  height: 200px;
	  list-style: none;
		}

	.slider-xs2 ul li {
	  position: relative;
	  display: block;
	  float: left;
	  margin: 0;
	  padding: 0;
	  width: 284px;
	  height: 558px;
	  background: #ccc;
	  text-align: center;
	  line-height:558px;
		-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0);
		}

	a.control_prev-xs2, a.control_next-xs2 {
	  position: absolute;
	  top: 45%;
	  z-index: 999;
		left:0px;
	  display: block;
	  padding: 30px 10px;

	  width: auto;
	  height: auto;
	  /*background: #2a2a2a;*/
	  color: #fff;
	  text-decoration: none;
	  font-weight: 600;
	  font-size: 22px;
	  opacity: 0.7;
	  cursor: pointer;
	}

	.no-touch a.control_prev-xs2:hover, .no-touch a.control_next-xs2:hover {
	  opacity: 1;
	  -webkit-transition: all 0.2s ease;
	}



	a.control_next-xs2 {
	left:250px;

	}



/*------- SLIDER ANZEIGEN-AUSLBENDEN------*/

	.slide-m{
		display:block;
		}

	.slide-s{
		display:none;
		}
	.slide-xs{
		display:none;
		}


/*------------------------ END: JS-SLIDER ------------------------*/





/*------------------------       END: ARBEIT-SEITE           ------------------------*/




/*----       KONTAKT-SEITE          ----*/
.kontakt{
    width: 95.6%;
	height: auto;
	margin-top:2.2%;
	margin-left: 2.2%;
	margin-right: 2.2%;
	float: left;
	background-color: #f5f5f5;
	padding:20px;
	}

.kontakt img{
    width: 60%;
	float:left;
	}

.mail{
	width: 35%;
	display: table-cell;
	vertical-align: middle;
	padding-top:90%;
	color:#000;
	padding-bottom: 0px;
	padding-left: 40px;
	text-align:left;

    }


.mail h1{

	font-size: 20.8px;
	color:#000;
	padding-bottom: 0px;
	padding-left: 0px;
	font-weight: 700;
	letter-spacing:2.1px;
	text-align: left;
	margin:  0px;

    }

.kontakt2{
    width: 95.6%;
	height: auto;
	margin-top:20px;
	margin-left: 2.2%;
	margin-right: 2.2%;
	float: left;
	

	
}

.kontakt2 p{
    width: 100%;
	text-align: center;
	float:left;
	color: #959595;
	margin-top: 10px;
	margin-bottom: 80px;
	
	line-height: 1.26;

	
}

.kontakt2 p a{
text-decoration: underline;
	color: #959595;
	
}

.kontakt2 p a:hover{

	color: #000;
	-webkit-transition:color 300ms ease-in-out;
	-moz-transition:color 300ms ease-in-out;
	-o-transition:color 300ms ease-in-out;
	transition:color 300ms ease-in-out;
	
}



.mail a{
      width: 100%;
    font-weight: 400;
    float: left;
    text-align: left;
    padding-left: 0px;
    text-decoration: none;
    color: #000;
    font-size: 20.8px;
    line-height: 1.6;
	

	-webkit-transition:color 300ms ease-in-out;
	-moz-transition:color 300ms ease-in-out;
	-o-transition:color 300ms ease-in-out;
	transition:color 300ms ease-in-out;
    
}

.mail a:hover{
	font-weight: 400;

	color:#e53f02;
   	-webkit-transition:color 300ms ease-in-out;
	-moz-transition:color 300ms ease-in-out;
	-o-transition:color 300ms ease-in-out;
	transition:color 300ms ease-in-out;
	
    
}

.mail span a{
    width: 100%;
	font-weight: 400;
	float:left;
	text-align: left;
	padding-left:0px;
	text-decoration: none;
	color:#000;
	
	font-size: 16px;
	line-height: 1.6;
	-webkit-transition:color 300ms ease-in-out;
	-moz-transition:color 300ms ease-in-out;
	-o-transition:color 300ms ease-in-out;
	transition:color 300ms ease-in-out;
    
}

.mail span a:hover{
	font-weight: 400;

	color:#e53f02;
	-webkit-transition:color 300ms ease-in-out;
	-moz-transition:color 300ms ease-in-out;
	-o-transition:color 300ms ease-in-out;
	transition:color 300ms ease-in-out;

    
}




/*----       END: KONTAKT-SEITE          ----*/











/*------------------------        IMPRESSUM-SEITE           ------------------------*/


	.imp{
		position:relative;
		height:auto;
		overflow:hidden;
		float:left;
		width:100%;
		padding-top:25px;
		padding-bottom:25px;
		background:#fff;
		}

	.imp h3{
	text-align: left;
		font-size: 16px;
		margin-left: 2.2%;
			color:#7f7f7f;
		}
	.imp a{
	text-align: left;
		font-size: 12px;
		text-decoration: underline;
	
			color:#7f7f7f;
		}

	.imp a:hover {
	text-align: left;
		font-size: 12px;
		text-decoration: underline;
	
			color:#000;
		}
	
	.textimp{
		width:33.333%;
		float:left;
		padding-left:2.2%;
		padding-right:2.2%;
		background:#fff;
		padding-bottom:25px;
		height:auto;
		}
		
	.textimp p {
		text-align:left;
		font-style:italic;
		font-size:12px;
		letter-spacing: 1.0px;
		line-height:1.5;
		background:#fff;
		color:#7f7f7f;
		}

	.textimp  h2 {
		  color: #000;
		  font-family: "Lato", arial;
		  text-align:left;
		  line-height:0;
		  }
		  
	.textimp  h6 {
		color:#7f7f7f;
		  font-family: "Lato", arial;
		  font-weight:400;
		  text-align:left;
		  line-height:1.5;
		  margin:0px;
		  }


	
	


/*------------------------       END: IMPRESSUM-SEITE           ------------------------*/	
	
	
	
	
	
/*------------------------       ÜBER MICH-SEITE           ------------------------*/



	.ich{
		position:relative;
		height:auto;
		overflow:hidden;
		float:left;
		width:95.6%;
		margin:2.2%;
		padding:20px;
		background:#f5f5f5;
		}
	

	.ich img{
		width:50%;
		position:relative;
		float:left;
		line-height:1.3;
	
		}


	.ich p{
		text-align:left;
		width:50%;
		position:relative;
		float:left;
		padding-left:50px;

		
		font-size:16px;
		line-height:1.5;
		
		}
		
	.ich h2{
		
		font-size:20.8px;
		text-align: left;
		width:auto;
		position:relative;
		float:left;
		padding-left:50px;
		
	
		line-height:1.5;
		margin-top:0px;
		
		}
	

	.ich a{
		/*font-weight: 700;*/
		text-decoration: underline;	
		color:#000;
		
		-webkit-transition:color 400ms ease-in-out;
		-moz-transition:color 400ms ease-in-out;
		-o-transition:color 400ms ease-in-out;
		transition:color 400ms ease-in-out;

		}



	.ich a:hover{
		color:#D4D4D4;
		
		text-decoration: underline;
		

		}



	.kontakt2{
		width: 95.6%;
		height: auto;
		margin-top:20px;
		margin-left: 2.2%;
		margin-right: 2.2%;
		float: left;



	}

	.kontakt2 p{
		width: 100%;
		text-align: center;
		float:left;
		color: #959595;
		margin-top: 10px;
		margin-bottom: 80px;

		line-height: 1.26;


	}

	.kontakt2 p a{
	text-decoration: underline;
		color: #959595;
		-webkit-transition:color 400ms ease-in-out;
		-moz-transition:color 400ms ease-in-out;
		-o-transition:color 400ms ease-in-out;
		transition:color 400ms ease-in-out;

	}

	.kontakt2 p a:hover{

		color: #000;
		

	}





/*------------------------       END: ÜBER MICH-SEITE           ------------------------*/




@media (max-width: 1250px) {
	
	
		
	
	header {
		width:100%;
		height: auto;
		position: relative;
		margin-left:auto;
		margin-right:auto;
		z-index: 999;
		background:#fff;
		clear:both;
		text-align:center;
		}

	
	
	header .name{
		height:80px;
		position:absolute;
		left:0;
		right:0;
		width:100%;
		text-align:center;
		background:#fff;
		margin-left:auto;
		margin-right:auto;
		z-index:99999;
		}

	header .name h1{
		font-weight:800;
		letter-spacing: 10.8px;
		font-size: 40px;
		margin: 0px 0px;
		text-align:center;
		padding-top:0px;
		background-color: #fff;
		}
		
	header .name h1 span{	
		letter-spacing: 4px;
		}
	
	
	.menu {
	
		width:91.2%;
		}
	
	
	
	
	
	.leer{	
		 font-size: 17px;
		}
	
	
	
	.portfolioContainer{
		text-align:center;
		width:95.6%;
		background:#fff;
		margin-top:5px;
		margin-left:auto;
		margin-right:auto;
		}

	
	.item, .photo, .illu, .layout, .andere .all {
		
		width:33.33333%;
		padding:2.2%;
		line-height:0;
		
		}	
	

	.caption {
		 padding:4.4%;
		 }


	.container{
		position:relative;
		text-align:center;
		width:95.6%;
		height:auto;

		margin-top:70px;
		margin-left:auto;
		margin-right:auto;
		overflow:hidden;
		}

	.container2{
		position:relative;
		text-align:center;
		width:95.6%;
		height:auto;
	
		margin-top:0px;
		margin-left:auto;
		margin-right:auto;
		overflow:hidden;
		}

	
	.bild{
		position:relative;
		float:left;
		height:auto;
		padding-left:2.2%;
		padding-right:2.2%;	
		margin-bottom:4.4%;
		margin-top:2.2%;
		width:100%;
		line-height:0;
	}
	

	
	.halb{
		width:50%;	
		}
		
		
		
	.zweidrittel{
		width:65.3%;	
		}
	
	.drittel{
		width:34.7%;	
		}
	
	.drittelb{
		width:33.33333%;	
		}
		
		
	.viertel{
		width:25%;	
		}
	
	

}




@media (max-width: 1024px) {
	
	
	
	
	.portfolioContainer p {
		display:block;
	}
	
	.caption{
		display:none;
		}
 


	.slide-m{
		display:none;
		}

	.slide-s{
		display:block;
		}
	.slide-xs{
		display:none;
		}
	

}




@media (max-width: 880px) {
	
	

	
	header {	
	  width:100%;
	  height:auto;
	  position: relative;
	  margin-left:auto;
	  margin-right:auto;
	  z-index: 999;
	  background:#fff;
	  clear:both;
	  text-align:center;
		margin-top: 60px;
	  }
	
	
	
	
	header .name{
		height: 120px;
		width:286px;
		position: absolute;
		left: 0px;
		right: 0;
		text-align: center;
		background: #fff;
		margin-left: auto;
		margin-right: auto;
		z-index: 99999;
		top: -85px;
		line-height:1.1;
		padding-top:0px;
		}

	header .name h1{
		font-weight: 800;
		letter-spacing: 12px;
		font-size: 40px;
		margin: 0px 0px;
		padding-top: 78px;
		background: #fff;
		text-align: center;
		width: 100%;
		}
		
	header .name h1 span{
		letter-spacing:0px;
		}
	
	.leer{
		letter-spacing: 0px;
 		font-size: 0px;
		}
	
	header .logo{
		margin-top:0px;
		margin-bottom:30px;
	
		}
	

	
	
	
	


	.text{
		width:80%;
		float:left;
		margin-left:2.2%;
		margin-right:auto;
		
		}
	
	

	
	.mail{
		width: 35%;
		padding-top: 90%;
		display: table-cell;
		vertical-align: middle;
		}
	
	
		

}




@media (max-width: 800px) 

{
	.item, .photo, .illu, .layout, .andere .all {
		width:50%;
			padding-bottom: 4%;
		padding-left:2.2%;
		padding-right:2.2%;
		padding-top:2.2%;
		line-height:0;
		}
	
	
	
	
		.ich p{
			padding-left:20px;
		
	
			}
		.ich h2{
			padding-left:20px;
		
	
			}
	
	
		
	.menu {
		height:50;
		width:286px;
		position:relative;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		background:#fff;
		margin-bottom:15px;
		}
		
	
	.menu1{
		width: 33.333%;
		position: relative;
		float: left;
		height: 50px;
		padding-top: 20px;
		display: inline-block;
		text-align: left;
		}

	.menu2{
		width: 33.333%;
		position: relative;
		height: 50px;
		padding-top: 20px;
		padding-right: 0px;
		display: inline-block;
		text-align: right
			}


	.menu3{
		width: 33.333%;
		position: relative;
		height: 50px;
		padding-top: 20px;
		display: inline-block;
		padding-right: 0px;
		padding-left: 0px;
		}
	
	
		header {
	
			margin-top:40px;
			
	}
	/* .mail a{
		font-size: 16px;
		 line-height: 2;
		}
	*/		
			
			
		
	}

@media (max-width: 730px) 

{
	

	
	
	
	
	
/*------------------------       ÜBER MICH-SEITE           ------------------------*/
	
	.kontakt2 p{


		font-size:14px;


		}	
	
	
	
	
	.ich h2{

		padding-top:30px;
		margin-bottom: 0px;
		padding-left:0px;
		
		}
		

	.ich{
		position:relative;
		height:auto;
		overflow:hidden;
		float:left;
	

		width:95.6%;
		margin:2.2%;
	
		
		}
	

	.ich img{
		width:100%;
		position:relative;
		float:left;
		line-height:1.3;
		
			}


	.ich p{
		text-align:left;
		width:100%;
		position:relative;
		float:left;
		padding-left:0px;
		font-size:16px;
		line-height:1.5;
		padding-top:3%;
		padding-bottom:3%;
		}
	
/*------------------------       END: ÜBER MICH-SEITE           ------------------------*/
		
	
	
	

	
	
	/*.ich img{
		width: 46%;
		}
 	*/
	
	}

@media (max-width: 667px) 

{
	
	
	

	
	.breit{
		display:none;
		}

	.schmal{
		display:block;
		}



 	
	
	.imptext{
		width:auto;
		float:left;
		margin-left:2.2%;
		margin-right:auto;
		background:#fff;
		}
	
	


 
	 .bild{
		position:relative;
		float:left;
		height:auto;
		padding-left:2.2%;
		padding-right:2.2%;	
		margin-bottom:6.4%;
		margin-top:2.2%;
		width:100%;
		line-height:0;
		}
		


	.bild p {
		 font-size: 14px;
		font-style: italic;
		text-align: right;
		color: #7f7f7f;
		margin-top: 4%;
		margin-right: 3%;
		}









	



	.playpause {
		
		width:50px;
		height:50px;
		
		}




	

	
	.mail span a {
		font-size: 14px;
		line-height: 2.2;
		}
	
	
	.kontakt p{
		font-size: 14px;
		}


}


	
		

@media (max-width: 630px) 

{
	
	

	.item, .photo, .illu, .layout, .andere .all {
		width:50%;
			padding-bottom: 4%;
		padding-left:2.2%;
		padding-right:2.2%;
		padding-top:2.2%;
		line-height:0;
		}
	
	
	.kontakt img {
		width:100%;

		}
	
	.mail{
		padding-top:25px;
		padding-bottom: 25px;
		padding-left:8px;
		


		}


	
}
@media (max-width: 524px) {
	

	.slide-m{
		display:none;
		}

	.slide-s{
		display:none;
		}
	.slide-xs{
		display:block;
		}

	






/*------------------------       IMPRESSUM-SEITE           ------------------------*/

	.textimp {
		width: 100%;
		float: left;
		padding-left: 2.2%;
		padding-right: 2.2%;
		background: #fff;
		padding-bottom: 25px;
		height: auto;
	}

/*------------------------       END: IMPRESSUM           ------------------------*/

}

 
 
 
 @media (max-width: 460px) {
	 
	 
	 .menu {
		margin-bottom:15px;
			}

	 	 .mail a{
		font-size:16px;
			 line-height: 2;
		
			}
	 
	.kontakt2 p{
		font-size: 14px;

		}

	 
	 .weiss2{
		top:170px;
		} 
	 
	 
	 
	 

	header .logo:not(.fstart) {display:none;}


	.arbeitnav {
		position: relative;
		width: auto;
		float: right;
		text-align: left;
	
		font-size: 12px;
		margin-right: 2.2%;
		padding-top: 5px;
		margin-left: 2.2%;
		line-height: 1.5;
		margin-bottom: -24px;
			}
	

	
	.text{
		width:93.2%;
		float:left;
		margin-left:2.2%;
		margin-right:2.2%;
		margin-bottom: 5%;
	
		}
	 
	 
	 .text p{
		padding-top: 0px;
		}
	
	 .text h2 {
		
		font-family: "Lato", arial;
		text-align: left;
		line-height: 1.2;
		width: 80%;
		margin-top: 0px;
		}
	 
	 
	 
	.item, .photo, .illu, .layout, .andere .all {
		width:100%;
		padding-bottom: 8%;
		padding-left:2.2%;
		padding-right:2.2%;
		padding-top:2.2%;
		line-height:0;
		}
		

	
		.portfolioContainer p {

    margin-top: 2.5%;

    margin-right: 3.2%;
	
}
	
	 
/*------------------------HEADER ------------------------*/	
	header {
		width: 100%;
		height: auto;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		z-index: 999;
		background: #fff;
		clear: both;
		text-align: center;
		margin-top: 29px;
		}
	
 


	header .logo {
		height: 50px;
		position: relative;
		width: 50px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		/*margin-bottom: 30px;*/
		}
	
	
	header .logo a img {
		width:50px;
		height:50px;
		}
/*------------------------END: HEADER ------------------------*/
 
	 


	/*.ich{
	
			padding-top:2.2%;
		padding-bottom: 6%;
		padding-left:2.2%;
		padding-right:2.2%;
			
		}*/
	 
	 .container{
		 margin-top:0px;
		 }

}