	
	
	 
	@media only screen and (max-width: 1899px) { 
	
		section .inner {padding: 0 2em;}
		
		/* ------------------------ 
	    HERO IMAGE
	    ------------------------ */
		section#heroimage-box {padding-bottom: 4rem;}
		
	}
	
	@media only screen and (max-width: 1599px) { 
	
		/* ------------------------ 
		PAGE LINK
		------------------------ */
		#page-link h3.left { margin-left: 100px; }
		#page-link h3.right { margin-right: 100px; }
		
		#page-link h3.right:after {right: -60px;}
		#page-link h3.left:after {left: -60px;}
	  
	}
	
	@media only screen and (max-width: 1439px) { 
	  
		/*section*/
		section#heroimage-box {padding-bottom: 3rem;}
		
		/*textgrid*/
		#textgrid .col-10 { width: 95%; }
		#textgrid .col-6 { width: 75%; }
		
		/*shadow*/
		body.img-shadow #one_image img, 
		body.img-shadow #two_image img, 
		body.img-shadow #image_text_extra img, 
		body.img-shadow #sliderbox .slick-slide img, 
		body.img-shadow .swiper-slide img { box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.20);}
		
		/* ------------------------ 
		HREO IMAGE
		------------------------ */
		body #heroimage-box .image-wrap video.round, 
		body #heroimage-box .image-wrap video.square, 
		body #heroimage-box .image-wrap .copy.round, 
		body #heroimage-box .image-wrap .copy.square {
		  left: 3rem;
		}
		
		/* ------------------------ 
		IMAGE TEXT *INDIVIDUELL
		------------------------ */
		#text-image.left-empty .grid.left.col-6 { display: none; }
		
		#text-image.left-empty .inner { padding: 0 1em;}
		#text-image.left-empty .grid.right { 
			width: 100%; 
			padding-left: 0rem;
		}
		
		#text-image.left-empty .grid.right.col-8 .box-right .imagebox,
		#text-image.left-empty .grid.right.col-8 .box-right .textbox { 
			width: 75%; 
		}
		#text-image.left-empty .grid.right.col-6 .box-right .imagebox,
		#text-image.left-empty .grid.right.col-6 .box-right .textbox  { 
			width: 50%; 
			display: inline-block; 
			vertical-align: top; 
			padding: 0 1.5rem
		}
		#text-image.left-empty .grid.right.col-6 .box-right .topspace { display: none; }
		
		/*#text-image .box-left.offset {padding-top: 0rem;}*/
	 
	 
	   /* ------------------------ 
	   PADDING
	   ------------------------ */
	   h1.headline { padding-bottom: 2rem;}
	   h2.headline { padding-bottom: 1.5rem;}
	   h3.headline { padding-bottom: 1rem;}
	   
	   /* TOPTEXT */
	   #colorbox #toptext { padding-bottom: 1rem; }
	 
	  /* ------------------------ 
	  PAGE LINK
	  ------------------------ */
	  #page-link h3.left { margin-left: 90px; }
	  #page-link h3.right { margin-right: 90px; }
	  
	  #page-link h3.right:after {right: -55px;}
 	  #page-link h3.left:after {left: -55px;}
	  
	  #page-link h3.left:after {transform: scale(.8); }
	  #page-link h3.right:after {transform: scale(.8) rotate(180deg); }
	  
	}
	
	@media only screen and (max-width: 1279px) { 
		
	  /* ------------------------ 
	  BREAK / ALL FOR ALL
	   ------------------------ */
	  /*header*/
	  #header { border-bottom: 1px solid #cfcfcf; }
	  
	  /*grid*/
	  #the_content, 
	  .col-11,
	   #textbox .col-6 { width: 100%; }
	   #image_grid .col-4 { width: 50%; }
	   
	  /*content*/
	  #the_content {border-left: 0px;}
	  
	  /* ------------------------ 
	  SEPARATOR
	  ------------------------ */
	  #separatorbox	.spacer.small { height: .75rem; }
	  #separatorbox .spacer.default  { padding: 1.5rem;  }
	  #separatorbox .spacer.big { padding: 2.5rem;  }
	  
	  /* ------------------------ 
	  HERO-IMAGE BOX
	  ------------------------ */
	  body #heroimage-box .image-wrap video.round, 
	  body #heroimage-box .image-wrap video.square, 
	  body #heroimage-box .image-wrap .copy.round, 
	  body #heroimage-box .image-wrap .copy.square {
		left: 2rem;
	  }
	 
	  /* ------------------------ 
	  IMAGE BOX
	  ------------------------ */
	  #image_grid #three_column {
		width: calc(100% + 2rem);
		margin-left: -1rem;
	 }

	  /* ------------------------ 
	  IMAGE TEXT *INDIVIDUELL
	  ------------------------ */
	  #text-image.left-empty .grid.right.col-8 .box-right > div { 
		 width: 85%; 
	  }
	  
	  /* ------------------------ 
	  COLORBOX
	  ------------------------ */
	  #colorbox .colorvalue.top p { margin-bottom: 1px; }
	
	  
	}
	
	@media only screen and (max-width: 1159px) {
	 	
 	}
	
	@media only screen and (max-width: 1023px) { 
	  .page-template section .inner {padding: 0 2em;}
	  
	  /* ------------------------ 
	  IMAGE *Columns
	  ------------------------ */
	  #image_grid #two_column {
		width: calc(100% + 1.5rem);
		margin-left: -.75rem;
	  }
	  #image_grid #two_column .image, 
	  #image_grid #two_column .video-wrap {
		padding: .75rem;
	  }
	  
	  /* ------------------------ 
	  SLIDER
	  ------------------------ */
	  .page-template section#sliderbox .note.col-11 {padding: 0 2.5rem;}
	  
	}
	
	@media only screen and (max-width: 939px) {  
	   
	  /* ------------------------ 
	  BUTTON / LINK
	  ------------------------ */
	  #buttonbox .col-3 { width: 50%; }
	  
	  /* ------------------------ 
	  COLORBOX
	  ------------------------ */
	 #colorbox .col-3 {width: 100%;}
	 #colorbox .col-color {width: 16.66%;}
	 
	  #colorbox .colorvalue.desktop { display: none; }
	  #colorbox #colormodul .colorvalue .col-color .mobile {display: inline-block;}
	  #colorbox #colormodul .rectangle { display: block; }

	  #colorbox .col-color {width: 100%; }
	  #colorbox #colormodul .colorvalue .col-color .mobile {width: 100px; }
	 
	  #colorbox #colormodul .boxtext p {font-size: 1.2rem;} 
	  #colorbox #colormodul .colorvalue p {font-size: 1rem;}
      
	  #colorbox #colormodul #boxcolor { cursor: pointer;}
	  
	  /* inactive */
	  #colorbox #colormodul .colorvalue .col-color { 
		height: 0px; 
		border-bottom: 0px solid #d7d7d7; 
		
		transition: .3s ease all;
		-moz-transition: .3s ease all;
		-webkit-transition: .3s ease all; 
		padding: 0px;
	  }
	  #colorbox #colormodul .colorvalue .col-color p { 
		display: none; 
		transform: none; 
		position: relative;
		text-align: left;
		
		left: 30px;
		top: 20px; 
		transform: none; 
		
	  }
	  #colorbox #colormodul .boxtext { position: relative;} 
	  
	  /* active */
	  #colorbox #colormodul .colorvalue.active .col-color { height: 60px;}
	  #colorbox #colormodul .colorvalue.active .col-color { border-bottom: 0px solid #d7d7d7;}
	  #colorbox #colormodul .colorvalue.active .col-color p { display: block;}
	
	}
	
	@media only screen and (max-width: 766px) {
	  .page-template section .inner {padding: 0 1em;}
	  
	  /* ------------------------ 
	  BRAKE
	  ------------------------ */
	  .page-template section .inner {padding: 0 1.5em;}
	  
	  /* grid */
	  #text-image .col-4,
	  #text-image .col-6,
	  #text-image .col-8,
	  #text-image .col-10,
	  #textgrid .col-10,
	  #textgrid .col-6,
	  .textbox .col-10 {width: 100%;}
	  
	  #text-image.left-empty .grid.right.col-6 .box-right .imagebox, 
	  #text-image.left-empty .grid.right.col-6 .box-right .textbox,
	  #text-image.left-empty .grid.right.col-8 .box-right .imagebox, 
	  #text-image.left-empty .grid.right.col-8 .box-right .textbox { width: 100%;}
	  
	  /* download */
	  #download { padding-bottom: 1.5rem; }

	  
	  /*padding images*/
	  #two_image .image-repeater,
	  #three_image .image-repeater {
		width: calc(100% + 1rem);
		margin-left: -.5rem;
	  }
	  
	  /* ------------------------ 
	  HERO-IMAGE BOX
	  ------------------------ */
	  body #heroimage-box .image-wrap video.round, 
	  body #heroimage-box .image-wrap video.square, 
	  body #heroimage-box .image-wrap .copy.round, 
	  body #heroimage-box .image-wrap .copy.square {
		left: 1rem;
	 }

	  /* ------------------------ 
	  TEXT IMAGE *individuell
	  ------------------------ */
	  #text-image.left-empty .grid.right.col-6 .box-right .topspace {display: block;}
	  #text-image .grid.right.col-8,
	  #text-image .grid.left.col-8,
	  #text-image .grid.right.col-4,
	  #text-image .grid.left.col-4, 
	  #text-image .grid.right.col-6,
	  #text-image .grid.left.col-6 { padding: 0;} 
	  
	  #text-image .box-left.offset {padding-top: 0rem;}
	  #text-image.repeat #box-repeater .col-6:last-child {padding-left: 0rem;}

	  #text-image .image,
	  #text-image.left-empty .grid.right.col-6 .box-right > div, 
	  #text-image.left-empty .grid.right.col-8 .box-right > div, 
	  #text-image .image img {
		  width: 100%; 
	  } 
	  
	   #text-image .button { margin-top: 0px; }
	 
	  
	  /* ------------------------ 
	  TEXT IMAGE *repeater
	  ------------------------ */
	   #text-image.repeat .col-6 {width : 100%; }
	   
	  /* ------------------------ 
	  IMAGE portrait
	  ------------------------ */
	   #text-image .imagebox.portrait .image,
	   #text-image.repeat .col-6 .portrait .image {width : 75%; }
	   
	  /* ------------------------ 
	  PADDING
	  ------------------------ */
	  section {padding-bottom: 2rem;}
	  section#sliderbox {padding: 0rem 0 6rem;}
	  section#quotebox {padding-bottom: 1rem;}
	  
	  #download, 
	  .topspace {padding-top: 1rem;}
	  
	  #colorbox #toptext, 
	  #image_grid #toptext {padding-bottom: 1rem;}
	  
	 /* #text-image */
	  #text-image .grid.right.col-6 .box-right .imagebox, 
	  #text-image .grid.right.col-6 .box-right .textbox {padding-top: 1.5rem;}

	  #text-image.left-empty .grid.right.col-6 .box-right .imagebox, 
	  #text-image.left-empty .grid.right.col-6 .box-right .textbox {padding: 1.5rem 0;}
	  
	  #text-image .imagebox:last-child .image, 
	  #text-image .textbox:last-child {padding: 1rem 0;}

	  /* ------------------------ 
	  PAGE LINK
	  ------------------------ */
	  #page-link h3.left { margin-left: 80px; }
	  #page-link h3.right { margin-right: 80px; }
	    	
	}
	
	
	@media only screen and (max-width: 599px) {
	  .page-template section .inner {padding: 0 .75em;}
	  
	  /* grid */
	  #image_grid .col-6,
	  #image_grid #three_column,
	  #image_grid .col-4 { width: 100%; } 
	  
	  /* ------------------------ 
	  SEPARATOR
	  ------------------------ */
	  #separatorbox	.spacer.small { height:0rem; }
	  #separatorbox .spacer.default  { padding: .75rem;  }
	  #separatorbox .spacer.big { padding: 1.5rem;  }

	  /* ------------------------ 
	  HERO-IMAGE BOX
	  ------------------------ */
	 #heroimage-box .image-wrap .copy {bottom: 2rem;}

	  body #heroimage-box .image-wrap video.round, 
	  body #heroimage-box .image-wrap video.square, 
	  body #heroimage-box .image-wrap .copy.round, 
	  body #heroimage-box .image-wrap .copy.square {
		left: .75rem;
		margin-right: .75rem;
	 }
	
	 /* ------------------------ 
	  IMAGE
	  ------------------------ */
	  #image_grid #three_column {
		width: 100%;
		margin-left: 0rem;
	  }
	
	  #image_grid #three_column .image, 
	  #image_grid #three_column .video-wrap,
	  #image_grid #three_column .image img, 
	  #image_grid #three_column .video-wrap img { width: 100%; }
	  
	  #image_grid #three_column .image, 
	  #image_grid #three_column .video-wrap {
		  padding: 1rem 0rem;
	  }
	   
	  /* ------------------------ 
	  IMAGE TEXT *INDIVIDUELL
	  ------------------------ */
	  #text-image .image,
	  #text-image.repeat .col-6 .image,
	  #text-image.left-empty .grid.right.col-6 .box-right > div,
	  #text-image.left-empty .grid.right.col-8 .box-right > div {width: 100%;}
	  
	  /* ------------------------ 
	  IMAGE portrait
	  ------------------------ */
	  #image_grid .image-repeater .portrait .image,
	  #image_grid #three_column .portrait .image {width : 75%; }
	  
	  /* ------------------------ 
	  PADDING
	  ------------------------ */
	  #text-image.left-empty .grid.right.col-6 .box-right .imagebox, 
	  #text-image.left-empty .grid.right.col-6 .box-right .textbox {padding: 1rem 0;}
	  
	  /* ------------------------ 
	  COLORBOX
	  ------------------------ */
	  #colorbox #outer {margin: 1rem 0;}
	   
	  /* ------------------------ 
	  PAGE LINK
	  ------------------------ */
	  .page #page-link {padding: 2rem 0 4rem;}
	  
	  #page-link h3.left { margin-left: 60px; }
	  #page-link h3.right { margin-right: 60px; }
	  
	  #page-link h3.left:after {
		  transform: scale(.6);
		  left: -50px;
	  }
	  #page-link h3.right:after {
		  transform: scale(.6) rotate(180deg);
		  right: -50px;
	  }
	   
	}
	
	@media only screen and (max-width: 479px) { 
	  
	  /* ------------------------ 
	  PADDING
	  ------------------------ */
	  section {padding-bottom: 1rem;}
	  section#heroimage-box {padding-bottom: 2.5rem;}
	  section#sliderbox {padding: 0 0 4rem;}

	  /* #text-image */
	  #text-image.left-empty .grid.right.col-6 .box-right .imagebox, 
	  #text-image.left-empty .grid.right.col-6 .box-right .textbox {padding: 0;}
	  
	  #text-image .imagebox:last-child .image, 
	  #text-image .textbox:last-child {padding: 0 0 1rem;}
	  
	  /* #toptext */
	  #text-image #toptext, 
	  #heroimage-box #toptext, 
	  #colorbox #toptext, 
	  #image_grid #toptext {
			padding-bottom: 0rem;
	  }

	  /* ------------------------ 
	  IMAGE portrait
	  ------------------------ */
	  #text-image .imagebox.portrait .image, 
	  #text-image.repeat .col-6 .portrait .image {
		width: 100%;
	   }
	  
	  .rectangle {
		top: auto;
		bottom: 10px;
	  }
	  
	  /* ------------------------ 
	  PAGE LINK
	  ------------------------ */
	  .page #page-link {padding: 2rem 0;}
	  
	  #page-link h3.left { margin-left: 50px; }
	  #page-link h3.right { margin-right: 50px; }
	 	
	}
	
	@media only screen and (max-width: 359px) { }
	