/* ------------------------ 
	  MAIN
	  ------------------------ */
	  html {
		 -webkit-text-size-adjust: 100%;
		text-rendering: optimizeLegibility;
	   -webkit-font-smoothing: subpixel-antialiased;
	   -webkit-font-smoothing: antialiased;
	   -moz-osx-font-smoothing: grayscale;
	
		margin-top: 0px !important;
	  }
	  
	  body {
		  padding: 0px;
		  margin: 0 auto;
		  text-rendering: geometricPrecision;
		  overflow-x: hidden;
	  }
	
	  /* ------------------------ 
	  HELPERS 
	  ------------------------ */	
	 /* #text-image.individuell { background: yellow; }
	  #text-image.individuell.left-empty { background: orange; }
	  #text-image.repeat { background: lightblue; }
	  
	  #image_grid { background: DarkKhaki; }*/
	   
	  /* ------------------------ 
	  GRID
	  ------------------------ */	
	  #the_content,
	  section { vertical-align: top; }
	  
	  #wrapper { position: relative; }
	  section .inner {padding: 0 3em;}
	  
	  .page #page-link { padding: 4rem 0; }
	  
	  
	  /* ------------------------ 
	  HEADER 
	  ------------------------ */
	  #header { 
		  position: fixed;
		  top: 0px;
		  left: 0px; 
		  z-index: 2;
		  background: #fff; 
		  width: 100%;
		  height: 50px; 
		  border-bottom: 1px solid #cfcfcf;
	  }
	  
	  #the_content {  
		  width: calc(100% - 270px); 
		  overflow: hidden;
		  padding-bottom: 0px;
		  position: relative;
		  height: auto;
		  margin-left: 270px;
		  margin-top: 50px;
	  }
	  
	  footer.bg-black { 
		  z-index: 5; 
		  position: relative;  
		  display: block;
	  }
	
	 /* ------------------------ 
	  border-Style
	  ------------------------ */	
	  #header .brandguide {  border-left: 1px solid #cfcfcf; }
	  #the_content {  border-left: 1px solid #cfcfcf; }
	  
	  /* ------------------------ 
	  Spacer
	  ------------------------ */	
	  #separatorbox	.spacer.small { height: 1.5rem; }
	  #separatorbox .spacer.default  { padding: 2.5rem;  }
	  #separatorbox .spacer.big { padding: 4rem;  }
	  
	  /* ------------------------ 
	  Toptext
	  ------------------------ */	
	  #heroimage-box #toptext .headline { padding-top: 1rem; }
	 
	  /* ------------------------ 
	  select
	  ------------------------ */
	  #select section h2 { 
	  	padding: 30px 50px; 
	 	border-top: 1px solid #cfcfcf;
	  } 
	  
	  /* ------------------------ 
	  notebox
	  ------------------------ */
	  #notebox.inner-img { margin-top: 7px;}
	  #text-image.repeat #notebox.inner-img {margin-top: 3px;}
	  
	  #notebox.default {
		  background: #f4f4f4;
		  padding: 15px 30px 15px;
		  margin-top: 30px;
		  width: auto;
		  border-radius: 15px;
	  }
	  
	  /* ------------------------ 
	  download but
	  ------------------------ */
	  #download a.button { 
	  	background: #222;
		display: inline-block;
		margin-bottom: 10px;
	  }
	  #download a:hover { background: #666; }
	  #download .button p { padding: 25px 50px; }
	 
	 
	  /* ------------------------ 
	  ALL IMAGES
	  ------------------------ */
	  .imagebox .description { padding-top: 1rem;}
	  
	  /* ------------------------ 
	  HEROIMAGE 
	  ------------------------ */	
	  /* border round + square */
	/*  body #heroimage-box video,*/
	  body #heroimage-box .image, 
	  
	  body #heroimage-box video.round,
	  body #heroimage-box video.square,
	   
	  body #heroimage-box .image.round, 
	  body #heroimage-box .image.square  { 
		  margin: 0 50px; 
		  width: calc(100% - 100px);
	  }
	  
	  body #heroimage-box video.fullwidth,
	  body #heroimage-box .image.fullwidth  {
		  margin: 0 auto; 
		  width: 100%;
	  }
	  
	  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: 4rem;
	 } 
	
	 /* wrap*/
	  #heroimage-box .image-wrap,
	  #heroimage-box .video-wrap { position: relative; }
	  #heroimage-box .image-wrap .copy { 
		  position: absolute;
		  bottom: 4rem;
		  left: 4rem;
	  }

	 
	  /* ------------------------ 
	  IMAGE *Columns
	  ------------------------ */
	  #image_grid .col-12,
	  #image_grid .col-6,
	  #image_grid .col-4 { vertical-align: top; } 
	  
	  /* columns */
	  #image_grid  #two_column {
		width: calc(100% + 2rem);
		margin-left: -1rem;
	  }
	  
	  #image_grid  #three_column { 
	   	width: calc(100% + 3rem);
		margin-left: -1.5rem;
	  } 
	  
	  /* offset */
	  #image_grid #three_column.offset-center,
	  #image_grid #three_column.offset-leftright { padding-bottom: 17rem;}
	  
	  #image_grid #three_column.offset-center .col-4,
	  #image_grid #three_column.offset-leftright .col-4 { vertical-align: middle; }
	 
	  #image_grid #three_column.offset-center .col-4:nth-child(3n-2),
	  #image_grid #three_column.offset-center .col-4:nth-child(3n) { margin-bottom: -17rem; }
	  #image_grid #three_column.offset-leftright .col-4:nth-child(3n-1) { margin-bottom: -17rem; }


	  /* ------------------------ 
	  TEXT IMAGE *individuell
	  ------------------------ */
	   /*grid*/
	   #text-image .grid.left.col-6  { padding-right: 1rem; } 
	   #text-image .grid.right.col-6  { padding-left: 1rem; }

	   #text-image .grid.left.col-8 { padding-right: 2.5rem; }
	   #text-image .grid.right.col-8 { padding-left: 2.5rem; }
	   
	   /* offset*/
	   #text-image .box-left.offset {padding-top: 13rem;}

	   /*textbox*/
	   #text-image .textbox.space-top { padding-top: 6rem; }
	   #text-image #box-repeater h3 { padding-bottom: 1.5rem;}
	   
	   
	   /* ------------------------ 
	   TEXT IMAGE *repeater
	   ------------------------ */
	   #text-image.repeat .col-6 { vertical-align: top;}
	   
	   #text-image.repeat #box-repeater .col-6:first-child {padding-right: 1.5rem;}
	   #text-image.repeat #box-repeater .col-6:last-child {padding-left: 1.5rem;}
	   
	   
	   /* ------------------------ 
	   PADDING
	   ------------------------ */
	  section { padding-bottom: 4rem; }
	  section#heroimage-box { padding-bottom: 6rem; }
	  section#sliderbox { padding: 2rem 0 6rem; }
	  section#separatorbox { padding: 0rem; }
	  
	   h1.headline { padding-bottom: 2.5rem;}
	   h2.headline { padding-bottom: 2rem;}
	   h3.headline { padding-bottom: 1.5rem;}
	  
	   #download,
	   .topspace { padding-top: 2rem;}
	  
	  /* TOPTEXT */
	  #text-image #toptext, 
	  #heroimage-box #toptext,
	  #colorbox #toptext,
	  #image_grid #toptext { padding-bottom: 2rem; }
	  
	  #toptext h1:last-child,
	  #toptext h2:last-child,
	  #toptext h3:last-child,
	  #toptext p:last-child { padding-bottom: 0rem; }
	  
	  /* IMAGE *columns*/
	  /* one *columns */
	  #image_grid #one_column .image,
	  #image_grid #one_column .video-wrap { padding: 1rem 0; }
	  /* two *columns */
	  #image_grid #two_column .image,
	  #image_grid #two_column .video-wrap { padding: 1rem; }
	  /* three *columns */
	  #image_grid #three_column .image,
	  #image_grid #three_column .video-wrap { padding: .75rem;}
	  
	  /* TEXT-IMAGE *individuell */
	  #text-image .image,
	  #text-image .textbox {padding: 1rem 0 ;}
	  
	  /* TEXT-IMAGE *repeat */
	  #text-image.repeat .inner #box-repeater,
	  #text-image.repeat .image,
	  #text-image.repeat .textbox {padding: 1rem 0;}
	  
	  /*last-child */
	  #text-image .imagebox:last-child .image,
	  #text-image .textbox:last-child { padding-bottom: 0px; }
	  
	  /* BUTTONBOX + LINKBOX */
	  #buttonbox .inner .but-style:last-child,
	  #linkbox .inner .link-style:last-child { padding-bottom: 0px; }
	  
	  /* SLIDER */
	  #sliderbox .swiper-container {
		  padding: 2rem 20px 60px;
	  }
	   
	   
	  /* ------------------------ 
	  SLIDERBOX
	  ------------------------ */
	  #sliderbox .note.col-11 { padding: 0 4rem;}
	  
	  /* ------------------------ 
	  TEXT BOX
	  ------------------------ */
	  #textbox .copy-repeater { padding-bottom: 4rem;}
	  #textbox .copy-repeater:last-child { padding-bottom: 0rem;}
	  
	  /* ------------------------ 
	  QUOTE BOX
	  ------------------------ */	
	  #quotebox h1 { padding: .3em 0; }
	  #quotebox h2,
	  #quotebox h3 { padding: .5em 0; }
	  
	  /* ------------------------ 
	  TYPO BOX
	  ------------------------ */	
	  /*#typobox h2 { padding: .7em 0; }*/
	  
	  /* ------------------------ 
	  COLOR BOX
	  ------------------------ */	
	  #colorbox #outer { margin: 2rem 0; }
	  #colorbox .col-color { width: 11.5%; }
	  #colorbox .col-3 { width: 31%; }
	  
	  #colorbox .colorvalue.top p { 
	 	padding: 10px 0 5px; 
	 }
	 
	  #colorbox #colormodul { 
		border-top: 1px solid #d7d7d7;
		border-bottom: 0px;
	 }
	 #colorbox #colormodul .col-color { 
	 	border-bottom: 1px solid #d7d7d7; 
	 }
	 #colorbox .colorvalue div:nth-child(2n+2) {
		 background: #F8F8F8;
	 }
	 
	 
	 #colorbox #colormodul #boxcolor,
	 #colorbox #colormodul .col-color { 
	 	position: relative; 
		height: 110px; 
	 }
	
	 #colorbox #colormodul .col-color p { 
		margin: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	 
	 /*boxcolor*/
	 #colorbox #boxcolor .boxtext { 
	 	position: absolute; 
		top: 15px;
		left: 10px;
	 }
	 #colorbox #boxcolor .boxtext h3 { 
	 	padding: 0 10px 0 0;
		line-height: 1em;
	 }
	 
	 /*rectangle / mobile */
	 #colorbox #colormodul .rectangle { display: none; }
	.rectangle {
		position: absolute;
		top: 5px;
		right: 20px;
		width: 2.5rem;
		height: 2.5rem;
	}
	.rectangle span {
		position: absolute;
		top: 20px;
		width: 1.5rem;
		height: .1rem;
		
		background: #fff;
		display: inline-block;
		transition: all .2s ease;
	}
	.rectangle span:first-of-type {
		left: 0;
		transform: rotate(45deg);
	}
	.rectangle span:last-of-type {
		right: 0;
		transform: rotate(-45deg);
	}
	
	/* hover / active */
	#colorbox #colormodul #boxcolor:hover .rectangle span:first-of-type,
	.rectangle:hover span:first-of-type,
	.accordion__item.active .rectangle span:first-of-type { transform: rotate(-45deg);}
	
	#colorbox #colormodul #boxcolor:hover .rectangle span:last-of-type,
	.rectangle:hover span:last-of-type,
	.accordion__item.active .rectangle span:last-of-type { transform: rotate(45deg);}
	
	 #colorbox .colorvalue div:nth-child(2n+2) {
		background: #F8F8F8;
		padding-bottom: 1px;
	}
	 
	 /* ------------------------ 
	  BUTTON BOX
	  ------------------------ */	
	  #buttonbox #ver1 #notebox:last-child,
	  #buttonbox #ver2 #notebox:first-child,
	  #linkbox #ver1 #notebox:last-child,
	  #linkbox #ver2 #notebox:first-child { display: none; }
	  
	  
	  /* ------------------------ 
	  404
	  ------------------------ */	
	  .error404 .databox { 
	  	padding: 4rem 0; 
		height: calc(100vh - 200px);
	 }
	 .error404 .databox a.underline { 
	  	text-decoration: underline; 
	 }
	
	  /*logo*/
	  .protected-area .company-logo,
	  .error404 .company-logo { 
		max-width: 450px;
	  }
	  .protected-area .company-logo img,
	  .error404 .company-logo img { 
	   	border-radius: 0px !important; 
		box-shadow: none !important;  
	  }
	  .error404 .company-logo { 
	   	padding-bottom: 4rem; 
	  }
	  
	  @media only screen and (max-width: 1439px) { 
		   /*logo*/
		  .error404 .company-logo {
			max-width: 400px;
		  }
	  }
	  
	  @media only screen and (max-width: 1279px) { 
		
		/*content*/
		#the_content {
			width: 100%;
			border-left: 0px; 
			margin-left: 0px; 
		} 
	 }
	  
	  @media only screen and (max-width: 766px) { 
		  body.error404 #the_content { 
			height: auto; 
			min-height: 100vh;
		  }
		  /*logo*/
		  .error404 .company-logo { 
		  padding-bottom: 2rem; 
		  }
	  }
	  
	  @media only screen and (max-width: 599px) { 
		/*logo*/
	   .error404 #content .company-logo {max-width: 300px;}
	  }
	  
	  @media only screen and (max-width: 479px) {  
	    /*logo*/
	   .error404 .company-logo {max-width:280px; display: none; }
	   .error404 .databox {
		  width: 90%;
		  margin: auto;
	   }
	  
	   .error404 .databox h2 br{display: none; }
	  }
	  
	  
	  /* ---------- OVERLAY STYLE ---------- */
	 .protected-area #page-pass,
	 .protected-area #page-pass.overlay { position: relative;}
	 .the-overlay { 
		  position: fixed;
		  display: block;
		  width: 100%;
		  height: 100%;
		  top: 0; 
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: rgba(0,0,0,0.85); 
		  z-index: 10;
		  cursor: pointer;
	 }
	 /* FORM Overlay */
	 .protected-area #page-pass.overlay  section.the_form {padding: 0;}
	 .protected-area #page-pass.overlay .company-logo { padding-bottom: 1rem;}
	 
	  /* close */
	  .close {
		  position: fixed;
		  z-index: 11;
		  top: 25px;
		  right: 25px;
		  width: 50px;
		  height: 50px;
		  opacity: 1;
	   }
	  .close:hover { opacity: .7;}
	  .close:before, 
	  .close:after {
		  position: absolute;
		  left: 25px;
		  content: ' ';
		  height: 50px;
		  width: 2px;
		  background-color: #fff;
	  }
	  .close:before {transform: rotate(45deg);}
	  .close:after { transform: rotate(-45deg);}
	 
	 
	 /* ------------------------ 
	  USER AREA
	  ------------------------ */	
	   body.protected-area.first-login #the_content,
	   body.protected-area #page-pass  { 
		  min-height: 100vh; 
	  }
	  
	 /* Logo*/
	  .protected-area .company-logo { 
	   	padding-bottom: 2rem;
	  }
	  
	   /* FORM */
	  .protected-area .the_form { padding-bottom: 0rem;}
	  .protected-area #contain-form { 
		  z-index: 11; 
		  position:absolute; 
		  top:45%; 
		  left: calc(50% - 135px); 
		  transform:translate(-50%, -50%); 
		  
		  padding: 3.5rem 1rem;
		  background: #fff; 
		  border: 1px solid #222;
		  border-radius: 20px;
		  box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.15);
	  }
	  .protected-area h2 {  
	   	padding: .3em 0; 
		font-size: 3.2rem;
	   }
	  .protected-area form p { 
	  		text-align: center; 
			padding: 5px 0; 
	   }
	  .protected-area #private-area-message,
	  .protected-area .txt-newpass { line-height: 1.2em;  }
	  .protected-area .txt-newpass { padding-top: 35px; }
	 
	   /* FORM input*/
	   .protected-area form input { 
		  padding: 3px 20px; 
		  margin: 10px 0 0 10px; 
		  border-radius: 20px;
		  line-height: 0px;
		  height: 40px; 
	  }
	  .protected-area form input[type="password"] {
		  border: 1px solid #aaa; 
		  background: #F5F5F5; 
		  color: #000; 
	   }
	   .protected-area form input[type="submit"] {
		  border: 1px solid #222; 
		  background: #222; 
		  color: #fff; 
		  cursor: pointer; 
		 
	   }
	   .protected-area form input[type="submit"]:hover {
		  border: 1px solid #666; 
		  background: #666; 
		  
	   }
	   
	   /* --- CONTENT --- */
	   /* move .contain */
	  .protected-area #page-pass .contain-content { 
	  		transition: .5s ease all;
			-moz-transition: .5s ease all;
			-webkit-transition: .5s ease all;
			margin-left: -100%;
			width: 100%;
			display: block; 
	  }
	  .protected-area #page-pass .contain-content.open { margin-left: 0%;}
	  
	  .protected-area #page-pass {padding: .5rem 0 4rem;}
	  .protected-area .the_form {min-width: 530px;}
	
	  /* textbox */
	  .protected-area section#logo,
	  .protected-area section#textbox,
	  .protected-area section#textbox .headline {padding-bottom: 0px;}
	  .protected-area section#textbox p { padding: 1rem 0; }
	  
	  /* downloads */
	  .protected-area section#downloads {padding-bottom: 3rem; }
	  
	  
	   @media only screen and (max-width: 1439px) { 
		/*form*/
		.protected-area #contain-form {
			top: 70px;
			transform:translate(-50%, 0%); 
			padding: 3rem 1rem;
		}
		/*.chrome.protected-area #contain-form {
			transform:translate(-50%, 50px); 
		}*/
			
		.protected-area h2 {  font-size: 2.8rem; }
         
		 /*logo*/
		.protected-area .company-logo {
		  max-width: 400px;
		}
		.protected-area .company-logo {
		  padding-bottom: 1rem;
		}
	  }
	  
	   @media only screen and (max-width: 1279px) { 
		  /*form*/
		.protected-area #contain-form {
			left: 50%;
			transform:translate(-50%, 0%); 
		}
		   
		   /* close*/
		   .close {top: 35px; }
	  }
		
	  @media only screen and (max-width: 766px) { 
	  	 
		body.protected-area.first-login #the_content,
		body.protected-area #page-pass  { 
		  height: auto; 
		  min-height: 100vh;
		}	
	  }
	  
	  @media only screen and (max-width: 599px) { 
	  	.protected-area #page-pass {min-height: 600px;}
		
		 /*logo*/
		.protected-area .company-logo {max-width: 300px;}
		
		/* form */
		.protected-area .the_form {min-width: 100%;}
		.protected-area #contain-form {
			top: 50px;
			width: 400px; 
			margin: auto; 
			padding: 2rem 1rem;
	     }
		 
		.protected-area h2 {font-size: 2.4rem;}
		
		.protected-area label,
		.protected-area input {
			width: 100%;
			display: block;  
	     }
		.protected-area form input {
			margin: 10px auto;
		}
		.protected-area form input[type="submit"] {
			  max-width: 100px;
			  margin: 10px auto;
		 }
		 
	  }
	  
	  @media only screen and (max-width: 479px) { 
	  	
		/*logo*/
		.protected-area .company-logo  {max-width: 90%;} 
		
		/*form*/
		.protected-area #contain-form {
			width: 90%; 
	     }
		.protected-area h2 {
			 padding: .2em 0;
			 font-size: 2.2rem;
		}
		.protected-area .txt-newpass {padding-top: 25px;}
		.protected-area .m-brake {
		   white-space: pre; 
		   display: block;
		}

	  }