/* -------------------------------- */
	#viewport { 
		position:fixed; 
		top:200px; 
		left:0px; 
		display: block; 
		display: none;
		z-index: 9999; 
	}
	#viewport div {  
		color: #fff;
		font-size: 14px;
		background: #000;
		padding: 2px 10px 0px;
	}
	
	/* -------------------------------- */
	/* > 1900 */
	@media only screen and (min-width: 1900px) { 
		.bigger_1900, .l_1900, .l_1600, .l_1440, .l_1280, .l_1160, .l_1024, .l_940, .l_850, .l_767, .l_600, .l_480, .l_360, .l_320   { display: none }
		.bigger_1900  { display: block;  }
	}
	
	/* 1900 */
	@media only screen and (max-width: 1900px) { 
		.bigger_1900, .l_1900, .l_1600, .l_1440, .l_1280, .l_1160, .l_1024, .l_940, .l_850, .l_767, .l_600, .l_480, .l_360, .l_320   { display: none }
		.l_1900  { display: block;  }	
	}
	
	/* 1600 */
	@media only screen and (max-width: 1599px) { 
		.bigger_1900, .l_1900, .l_1600, .l_1440, .l_1280, .l_1160, .l_1024, .l_940, .l_850, .l_767, .l_600, .l_480, .l_360, .l_320   { display: none }
		.l_1600  { display: block;  }
	}
	
	/* < 1440 */
	@media only screen and (max-width: 1439px) { 
		.bigger_1900, .l_1900, .l_1600,  .l_1440, .l_1280, .l_1160, .l_1024, .l_940, .l_850, .l_767, .l_600, .l_480, .l_360, .l_320  { display: none }
		.l_1440  { display: block;  }
		
		/* PROJECT */
		#tp-project {margin-top: 190px;}
		#tp-project #image.one.col-1.spacer {display: none;}
		
		/* MODUL two images */
		.project-detail #image.two .hoch {margin: auto; width: 100%; }
		
		.project-detail #image.two .quer .col-5,
		.project-detail #image.two .hoch .col-4 { width: 40% }
		
		.project-detail #image.two .quer .col-1.spacer,
		.project-detail #image.two .hoch .col-2.spacer {width: 10%}
		
		.project-detail #image.two .quer .col-1.spacer,
		.project-detail #image.two .hoch .col-2.spacer {-background: orange; height: 50px; display: inline-block;}
		
		/* MODUL textbox */
		/*center*/
		.project-detail #image.center.textbox .col-1.spacer.right { diplay: none !important; width: 0px;}
		
		/*right quer*/
		.project-detail #image.right.textbox .textbox.quer {padding-left: 5%;}

		
	}
		
	/* 1280 */
	@media only screen and (max-width: 1279px) { 
		.bigger_1900, .l_1900, .l_1600,  .l_1440, .l_1280, .l_1160, .l_1024, .l_940, .l_850, .l_767, .l_600, .l_480, .l_360, .l_320  { display: none }
		.l_1280  { display: block;  }
		
	}
	
	/* 1160 */
	@media only screen and (max-width: 1159px) { 
		.bigger_1900, .l_1900, .l_1600, .l_1440, .l_1280, .l_1160, .l_1024, .l_940, .l_850, .l_767, .l_600, .l_480, .l_360, .l_320  { display: none }
		.l_1160  { display: block;  }
		
		/* NAV */
		#sub-nav-mobile.open {display: none; }
		
		/* OTHERS */
		#tp-others .col-6 {width: 60%; }
		#tp-others .col-2.right {width: 8%; }
		
	}
	
	/* 1024 */
	@media only screen and (max-width: 1023px) { 
		.bigger_1900, .l_1900, .l_1600, .l_1440, .l_1280, .l_1160, .l_1024, .l_940, .l_850, .l_767, .l_600, .l_480, .l_360, .l_320  { display: none }
		.l_1024  { display: block;  }
		
		/* NAV */
		.subnav {display: none !important; }
		#main-nav-mobile {display: none; }
		.project-detail #burger,
		#sub-nav-mobile,
		#sub-nav-mobile.open {display: block; }
		
		/* GRID */
		.col-1,
		.col-2 { 
			display: none; 
			width: 0px; 
		}
		
		.col-10,
		.col-8,
		.col-6,
		#tp-others .col-6 {
			width: 100%;
			padding-right: calc(10% - 10px);
			padding-left: calc(10% - 10px);
		}
		
		/*tp-position */
		#tp-project {margin-top: 120px;}
		
		/* PROJECTS OVERVIEW */
		#tp-overview #image {margin: 50px 0;}
		#tp-overview #image.left .subline {text-align:left;}
		#tp-overview #image .subline {padding-top: 10px;}
		
		/* PROJECTS */
		/* MODUL two images */
		.project-detail #image.two .quer .col-6.no-padding { width: 50%; padding: 0px; }
	
		/* MODUL textbox */
		/*right*/
		.project-detail #image.right.textbox .textbox.quer,
		.project-detail #image.right.textbox .textbox.hoch {
			padding-left: calc(10% - 10px);
			margin-top: 20px
		}
		
		/* only textbox */
		.project-detail .col-4.textbox { width: 100%; }
		.project-detail .left .textbox { 
			margin-top: 20px;
			padding-left: calc(10% - 10px);
		}
		.project-detail .left .textbox .headline,
		.project-detail .left .textbox .subhead {
		     padding-left: 75px;
		 }
		  
		 /* CONTACT */
		 .contact .copy { padding-left: 215px; }

		/* 404 */
		.error404 #tp-others .col-6 {padding-left: calc(10% + 205px); }
	
		
		/*FOOTER*/
		.profile footer .totop {display: inline-block; }
		footer .totop { 
			left: auto; 
			right: calc(10% - 10px);
		}
		
	}
	
	/* 767 */
	@media only screen and (max-width: 766px) { 
		.bigger_1900, .l_1900, .l_1600, .l_1440, .l_1280, .l_1160, .l_1024, .l_940, .l_850, .l_767, .l_600, .l_480, .l_360, .l_320  { display: none }
		.l_767  { display: block;  }
		
		/* HEADER / NAV */
		#topnav { padding-top: 20px;}
		#logo { padding-top: 0px;}
		/*#burger {top: 10px; }*/
		
		/*#main-nav-mobile ul.sub-menu {padding: 4px 0 6px 40px;}*/
	
		/* display */
		header .main-navigation,
		#sub-nav-mobile {display: none !important; }
		
		#burger,
		#main-nav-mobile,
		#main-nav-mobile.open {display: block;}
		
		/* tp-position */
		#tp-overview,
		#tp-project {margin-top: 80px;}
		#tp-others {margin-top: 60px;}
		
		
		/* OVERVIEW */
		#tp-overview #image {margin: 30px 0;}
		#tp-overview #image .subline { padding-top: 8px;}
		
		/* PROJECTS */
		#tp-project #image {margin: 35px 0;}
		
		/* MODUL two images */
		.project-detail #image.two .inline { display: block; }
		
		.project-detail #image.two .quer .col-1.spacer,
		.project-detail #image.two .hoch .col-2.spacer {display: none; }
		
		.project-detail #image.two .quer .col-6.no-padding,
		.project-detail #image.two .quer .col-5,
		.project-detail #image.two .hoch .col-4 { 
			width: 100%; 
			margin: 35px auto; 
			padding-right: calc(10% - 10px);
			padding-left: calc(10% - 10px);
		}
		.project-detail #image.two .padding img {padding: 0px; }
		
		/* only textbox */
		.textbox .headline,
		.textbox .subhead {padding-left: 0px !important;}

		/* CONTACT */
		.contact .copy { padding-left: 98px; }
		.contact .copy.chrome,
		.contact .copy.firefox { padding-left: 104px; }
		
		/* OTHERS */
		.textbox ul li { padding: 0px;}
		
		/* 404 */
		.error404 #tp-others .col-6 {padding-left: calc(10% - 10px); }
		
		/*FOOTER*/
		.contact footer {position: absolute;}
		footer .totop {bottom: 50px;}
		#footer-nav {
			display: block;  
			margin-left: -4px;
			padding: 5px 0 0px;
		}
			
	}
	
	
	/* 600 */
	@media only screen and (max-width: 599px) { 
		.bigger_1900, .l_1900, .l_1600, .l_1440, .l_1280, .l_1160, .l_1024, .l_940, .l_850, .l_767, .l_600, .l_480, .l_360, .l_320  { display: none }
		.l_600  { display: block;  }
		
		/* HEADER */
		header {width: 100%; }
		#burger {right: 15px; /*width: 50px; height: 35px;*/}
		#logo { padding-left: 15px;}
		
		/*NAV */
		/* resp menu  (first version) */
		#main-nav-mobile { left: 10px;}
		.arrow-container {left: calc(10% + 250px);}
		
		/* GRID */
		#main-nav-mobile,
		#tp-overview .col-8,
		#tp-project .col-8,
		#tp-project .col-6,
		#tp-others .col-6,
		.col-10.footerline {
			padding-right: 15px;
			padding-left: 15px;
		}
		
		/* OVERVIEW */
		#tp-overview #image .subline { padding-top: 5px;}
		
		/* PROJECTS */
		/* MODUL two images */
		.project-detail #image.two .quer .col-6.no-padding,
		.project-detail #image.two .quer .col-5,
		.project-detail #image.two .hoch .col-4 { 
			padding-right: 15px;
			padding-left: 15px;
		}
	
		/* OTHERS */
		#tp-others #spacer-bottom {height: 100px;}
		#tp-others section.textbox .copy {text-align: left;}
		
		/* 404 */
		.error404 #tp-others .col-6 {padding-left: 15px; }

		/* FOOTER */
		#footer-nav {
			display: block;  
			margin-left: -4px;
		}
		
	} 
	
	/* 480 */
	@media only screen and (max-width: 479px) { 
		.bigger_1900, .l_1900, .l_1600, .l_1440, .l_1280, .l_1160, .l_1024, .l_940, .l_850, .l_767, .l_600, .l_480, .l_360, .l_320  { display: none }
		.l_480  { display: block;  }
		
		/*NAV */
		/* resp menu  (first version) */
		.arrow-container {left: auto; right: 25px;}
		
		/* PROJECTS */
		#tp-project .col-6, 
		.project-detail #tp-project .col-6.textbox,
		.project-detail #tp-project .col-6.textbox.firefox,
		.project-detail #tp-project .col-6.textbox.chrome{
			padding-right: 15px;
			padding-left: 15px;
		}
		
		/* CONTACT */
		.contact .copy,
		.contact .copy.chrome,
		.contact .copy.firefox  { padding-left: 0px; }
	
		
		/*contact*/
		.contact footer {position: fixed;}
	}
	
	/* 320 */
	@media only screen and (max-width: 319px) { 
		.bigger_1900, .l_1900, .l_1600, .l_1440, .l_1280, .l_1160, .l_1024, .l_940, .l_850, .l_767, .l_600, .l_480, .l_360, .l_320  { display: none }
		.l_320  { display: block;  }
		
		/*NAV */
		/* resp menu  (first version) */
		#main-nav-mobile ul.sub-menu {margin-left: -110px;}
	
	}