/* :::::::::::::::::::::::: VIEWPORT :::::::::::::::::::::::: */
	#viewport { 
		position:fixed; 
		bottom:100px;
		left:0px; 
		display: block; 
		display: none;
		z-index: 9999; 
	}
	#viewport div {  
		color: #fff;
		font-size: 12px;
		background: #000;
		padding: 15px; 
	}
	
	
	@media only screen and (max-width: 1899px) { 
		
	}
	
	@media only screen and (max-width: 1599px) { 
	
		h1 { font-size: 4rem; }
		h2 { font-size: 2.8rem; }
		h3, #page-link h3 { font-size: 1.6rem; }
		h4 { font-size: 1.2rem; }
		
		h1.headline { padding-bottom: 1.5rem;}
		
	}
	
	@media only screen and (max-width: 1439px) { 
	  
	   h2.headline, 
	   h3.headline {padding-bottom: 1rem;}
		
		/* color-box */	
		#colorbox #colormodul p,
		#colorbox #outer p { font-size: 1rem; }
		#colorbox #colormodul h3 {font-size: 1.5rem;}
		
		#page-link h3 { font-size: 1.4rem; }
	}
		
	@media only screen and (max-width: 1279px) { 
		
		/* color-box */	
		#colorbox #colormodul p, 
		#colorbox #outer p {font-size: .9rem;}
		
	}
	
	@media only screen and (max-width: 1159px) { 
			
	}
	
	@media only screen and (max-width: 1023px) { 
	   
	   h1 { font-size: 3.5rem; }
	   h2 { font-size: 2.4rem; }
	   h3 { font-size: 1.4rem; }
	   h4 { font-size: 1rem; }
		
	}
	@media only screen and (max-width: 939px) { 
		
	}
	
	@media only screen and (max-width: 849px) {
		
	   h1 { font-size: 3rem; }
	   h2 { font-size: 2rem; }
	   h3 { font-size: 1.6rem; }
	   h4 { font-size: .9rem; }
	   
	   #page-link h3 { font-size: 1.2rem; }
		
	   p, a,
	   footer a,
	   footer h3,
	   footer p { font-size: 18px;}
	   
	   /* download */
	   #download p.small { font-size: .9rem; }
	   #download p.small br {display: none}
		
	}
	
	@media only screen and (max-width: 766px) {
		
		
	}
	
	@media only screen and (max-width: 599px) { 
	
	   h1 { font-size: 2.5rem; }
	   #heroimage-box h1 {font-size: 2.0rem;}
	   h2 { font-size: 1.6rem; }
	   h3 { font-size: 1.3rem; } 
	   h4 { font-size: .8rem; }
	  
	}
	
	@media only screen and (max-width: 479px) {
	   
	   #heroimage-box h1 br { display: none; }
		
	   #page-link h3 {font-size: 1.1rem;}

	   footer a,
	   footer h3,
	   footer p { font-size: 15px;}
	}
	
	@media only screen and (max-width: 359px) { }
	
	
	
	
	
	/* > 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, .portrait-view, .landscape-view   { 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, .portrait-view, .landscape-view   { 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, .portrait-view, .landscape-view   { 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, .portrait-view, .landscape-view  { display: none }
		.l_1440  { display: block;  }
	}	
	/* 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, .portrait-view, .landscape-view  { 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, .portrait-view, .landscape-view  { display: none }
		.l_1160  { display: block;  }
	}
	/* 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, .portrait-view, .landscape-view  { display: none }
		.l_1024  { display: block;  }
	}
	/* 940 */
	@media only screen and (max-width: 939px) { 
		.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, .portrait-view, .landscape-view  { display: none }
		.l_940  { display: block;  }
	}
	/* 850 */
	@media only screen and (max-width: 850px) { 
		.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, .portrait-view, .landscape-view  { display: none }
		.l_850  { display: block;  }	
	}
	
	/* ipad landscape / portrait */
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px)
	and (-webkit-min-device-pixel-ratio: 2) {	
	}

	/* ipad landscape */
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : landscape) {
		.portrait-view, 
		.landscape-view { display: none }
		.landscape-view  { display: block;  }
	}
	
	/* ipad portrait */
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : portrait)
	and (-webkit-min-device-pixel-ratio: 2) { 
		.portrait-view, 
		.landscape-view { display: none }
		.portrait-view  { display: block;  }	
	}
	 
	/* 767 */
	@media only screen and (max-width: 767px) { 
		.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, .portrait-view, .landscape-view { display: none }
		.l_767  { display: block;  }
	}
	/* 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, .portrait-view, .landscape-view  { display: none }
		.l_600  { display: block;  }
	} 
	/* 480 (bis iPhone8 Portrait) */
	@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, .portrait-view, .landscape-view  { display: none }
		.l_480  { display: block;  }
	}
	
	/* 360 (SE Portrait) */
	@media only screen and (max-width: 359px) { 
		.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, .portrait-view, .landscape-view  { display: none }
		.l_360  { display: block;  }
	}