/* custom style BU 2018*/
	
/* @import
-------------------------------------------------- */
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/fa-brands-400.eot");
  src: url("../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.woff") format("woff"), url("../fonts/fa-brands-400.ttf") format("truetype"), url("../fonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }
	
	
	html {margin-left: 5%;margin-right: 5%;}
	body{font-family: 'Montserrat', Helvetica, sans-serif; font-size: 16px; font-size: 100%; margin-top: 40px;}
	.row{margin-bottom: 5%;}
	
	/* helper */
	.w-33{width: 33%;}
	.mt-7{margin-top: 7rem;}
	.level-up-01{z-index: 16;}
	#artproject01{z-index: 18;}
	.line-height-01{line-height: 1.5;}
	
	
	.top-left {left:0%; top: 0%;}
	.bottom-left{left:0%; bottom: 0%;}
	.top-right{right:0%;}
	.bottom-right{right:0%; bottom: 0%;}
	.pos-01{top:65%; left: 40%;}
	.pos-02{top:5%; left: 7%;}
	.pos-03{top:55%; left: 65%;}
	.pos-04{top:15%; left: 65%;}
	
	
	/* deko artproject */
	body.artproject{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/common/graphic-drawing-02.jpg"),url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: 45%, 5%, 155%; background-position-y: 15%, 44%, 84%; 
		background-size: 50%;}
	body.highlander{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: 45%, -25%; background-position-y: 30%, 85%; background-size: 50%;}
	body.blackandwhite{background-image: url("../img/common/graphic-drawing-02.jpg"), url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: 5%, 115%; background-position-y: 36%, 60%; background-size: 50%,35%;}
	body.fetishgoesfashion{background-image: url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: 35%; background-position-y: 35%; background-size: 50%;}
	body.bladerunning{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: -25%, 145%; background-position-y: 32%, 95%; background-size: 50%,35%;}
	body.kraftwerk{background-image: url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: 45%; background-position-y: 30%; background-size: 55%;}
	body.diamondsareforever{background-image: url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: -15%; background-position-y: 43%; background-size: 45%;}
	body.arsen{background-image: url("../img/common/graphic-drawing-01.jpg"),url("../img/common/graphic-drawing-02.jpg"), url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: 45%,75%,-25%; background-position-y: 32%,65%, 85%; background-size: 50%;}
	body.eyeforaneye{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/scommon/graphic-drawing-02.jpg"),url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: 45%, 2%, 155%; background-position-y: 30%, 53%, 84%; background-size: 50%;}
	body.brodybooking{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: 45%, -25%; background-position-y: 30%, 85%; background-size: 50%;}
	
	/* deko references */
	body.references-lines{background-image:url("../img/common/graphic-drawing-02.jpg"), url("../img/common/graphic-drawing-01.jpg"); background-repeat: no-repeat; background-position-x: 75%, -54%; background-position-y: 8%, 85%; background-size: 40%;}
	
	
	/* deko commercial */
	body.commercial{background-image:url("../img/common/graphic-drawing-02.jpg"), url("../img/common/graphic-drawing-01.jpg"),url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: 55%, 43%, 47%; background-position-y: 22%, 50%, 87%; background-size: 50%,50%,40%;}

	
	/* deko campaign */
	body.campaign{background-image: url("../img/common/graphic-drawing-02.jpg"), url("../img/common/graphic-drawing-03.jpg"), url("../img/common/graphic-drawing-01.jpg"); background-repeat: no-repeat; background-position-x: 70%, 150%, 2%; background-position-y: 16%, 38%, 60%; background-size: 50%;}
	body.hellagutmann{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/common/graphic-drawing-02.jpg"); background-repeat: no-repeat; background-position-x: 65%, 50%; background-position-y: 28%, 58%; background-size: 40%;}
	body.plougs{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/common/graphic-drawing-02.jpg"); background-repeat: no-repeat; background-position-x: 10%, 46%; background-position-y: 35%, 69%; background-size: 50%; 55%;}
	body.naturitas-fine{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/common/graphic-drawing-02.jpg"),url("../img/common/graphic-drawing-03.jpg"),url("../img/common/graphic-drawing-01.jpg"); background-repeat: no-repeat; background-position-x: 45%, -10%, 155%,85%; 
		background-position-y: 18%, 44%, 78%,38%; background-size: 50%;}
	body.beyer-dynamic{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/common/graphic-drawing-02.jpg"),url("../img/common/graphic-drawing-03.jpg"),url("../img/common/graphic-drawing-01.jpg"); background-repeat: no-repeat; background-position-x: -15%, 10%, 145%,45%; 
		background-position-y: 23%, 44%, 73%,48%; background-size: 50%;}
	body.nightwatch{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/common/graphic-drawing-02.jpg"); background-repeat: no-repeat; background-position-x: 66%, 16%; background-position-y: 35%, 73%; background-size: 50%; 55%;}
	
	/* deko setdesign */
	body.setdesign{background-image: url("../img/common/graphic-drawing-03.jpg"), url("../img/common/graphic-drawing-01.jpg"); background-repeat: no-repeat; background-position-x: 60%, 198%; background-position-y: 43%, 88%;  background-size: 40%, 50%;}
	body.phillygod{background-image: url("../img/common/graphic-drawing-03.jpg"), url("../img/common/graphic-drawing-01.jpg"); background-repeat: no-repeat; background-position-x: 60%, 198%; background-position-y: 39%, 68%;  background-size: 40%, 50%;}
	body.burgwaescherschloss{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: 45%, -25%; background-position-y: 30%, 85%; background-size: 50%;}
	body.tischundtafel{background-image: url("../img/common/graphic-drawing-01.jpg"), url("../img/common/graphic-drawing-03.jpg"); background-repeat: no-repeat; background-position-x: 65%, -25%; background-position-y: 45%, 80%; background-size: 50%, 30%;}
	
	
	/* fonts */
	h1 {font-family: 'Amiri'; font-size: 3rem; text-align: center; position: relative;}
	h2 {font-family: 'Amiri'; font-size: 1.25rem; }
	h3 {font-family: 'Amiri'; font-size: 1.125rem; }
	h1:after{background-color:black;bottom:0px;content: " ";height: 3px; width: 60px; left: 48%; margin-left: -15px; position: absolute; text-align: center;}
	.lead {font-family: 'Amiri'; font-size: 1rem; text-align: center; width: 75%; margin: 0 auto; padding-top: 10px;}
	.lead a{text-transform: none !important; display: inline !important; font-weight: normal !important; }
	.small {font-family: 'Amiri'; font-size: 0.875rem; text-align: left; width: 75%;  padding-top: 10px;}
	.mainheadline h1{margin-top: 50%;}
	.mainheadline a {text-transform: uppercase; font-weight: 600; color: black; text-decoration: underline; text-align: center; display: block; padding-top: 1rem; cursor: pointer;}
	
	.mainheadline-video {margin-bottom: 0%;}
	.mainheadline-video h1 {margin-top: 10%;}
	.mainheadline-video h1:after{background-color:black;bottom:0px;content: " ";height: 3px; width: 60px; left: 49%; margin-left: -15px; position: absolute; text-align: center;}
	.mainheadline-video a {text-transform: uppercase; font-weight: 600; color: black; text-decoration: underline; text-align: center; display: block; padding-top: 1rem; cursor: pointer;}
	.impressum a {color: black; text-decoration: underline;}
	.impressum p > a:hover {color: #6c6767;}
	.impressum p {font-family: 'Amiri'; font-size: 0.75rem;  margin: 0 auto;}
	.impressum b {font-family: 'Montserrat', Helvetica, sans-serif;  font-size: 0.75rem; font-weight: 500; margin: 0 auto; padding-top: 10px; padding-bottom:2px;}
	
	/* logo */
	.logo-intro {position: fixed;top: 50%;left: 50%; transform: translate(-50%, -50%); z-index: 99; width: 25%;}
	.logo-intro  p {font-family: 'Amiri', serif; color: black; font-size: 0.75rem; padding-top: 0.75rem;}
	.logo-intro-link{text-decoration: underline; display: inline-block;}
	.logo-intro-link a {color: black; text-decoration: underline !important; display: inline-flex;}
	.logo-intro-link h2 {font-family: 'Montserrat', Helvetica, sans-serif; font-weight: 600; font-size: 1rem; color: black; text-transform: uppercase; margin-left: 10px; margin-right: 10px;}
	.logo-intro-link h2:hover {color: rgba(82, 204, 248, 1); }
	.logo {margin-top: 3%;display:inline-flex; }
	.logo > img {height: 50px; width: 225px; display:inline-flex; z-index: 1999;}
	
	/* tagline */
	.tagline {z-index: 13; position: relative; border-bottom: 1px dotted black; top: -35px; left: 230px; overflow: hidden; width: 100%; display: inline-block;}
	.tagline p {font-family: 'Amiri', serif; color: black; font-size: 0.75rem;}
	
	.brand{position: absolute; top: 50px; width: 20%;}
	
	/* nav */
	.nav{position: absolute;top: 150px;}
	ul.nav-triggers {padding-left: 0;z-index:11;}
	ul.nav-triggers li {list-style: none; padding-top: 1rem;}
	ul.nav-triggers li a{color: rgba(30, 28, 28, 1); font-size: 1rem}
	
	.modal{z-index: 2000;}
	.modal-content{position: absolute; display: block;}
	.modal-footer{position: relative; display: block; left: 4%; width: 90%;}
	.menu-toggle > img {height: 20px; width: 20px;}
	.menu-toggle {cursor: pointer;}
	.modal-header {border: none; padding: 0px; margin-bottom: 30px;}
	.modal-header .close {font-family: 'Montserrat', Helvetica, sans-serif; margin-left: 6%; margin-top: 3%;  font-size: 0.75rem; font-weight: 400; padding-top: 23px;padding-bottom: 13px; text-shadow: none; text-transform: uppercase; background: black; opacity: 1; color: white; }
	
	.modal-header .close:hover {color: rgba(82, 204, 248, 1);}
	.modal-dialog {max-width: 100%;}
	.modal-footer a{font-size: 0.75rem;}
	.fullscreen .modal-dialog 	{margin: 0 0 0 0; width: 100%; height: 100%; min-height: 100%; padding: 0; color: #333;}
	.fullscreen .modal-content 	{height: 100%; min-height: 100%; border-radius: 0; color: #333; background: rgba(255, 255, 255, 1);overflow:auto;}
	
	ul.nav-items {padding-left: 4%;}
	ul.nav-items li {list-style: none;}
	ul.nav-items li a {font-family: 'Montserrat', Helvetica, sans-serif; font-weight: 600; font-size: 2rem; color: rgba(30, 28, 28, 1); text-transform: uppercase;}
	ul.nav-items li a.nav-items-active {color: rgba(82, 204, 248, 1); text-decoration: underline;}
	
	.modal-footer {border: 0;}
	.modal-footer a {color: rgba(30, 28, 28, 1);}
	
	
	/* table */
	td > p {font-size: 0.75rem;}
	
	/* video */
	video {width: 100% !important; height: auto   !important; z-index:9; object-fit:cover;}
	.intro-video{position:absolute; top:0; bottom: 0; left: 0; background: white; display: flex;}
	.videocredits {font-family: 'Amiri', serif; color: black; margin-top: 5%; margin-bottom: 5%; text-align: center; line-height: 1;}
	.videocredits-icon{height: 40px; width: 40px; margin: 0 auto; margin-bottom: 2%;}
	
			
	/* description */
	.description {margin-top: 5rem;}
	.description-text {padding-top: 5rem;}
	.description-text h2 {font-family: 'Amiri'; font-size: 1.65rem;}
	.description-text h3 {font-family: 'Amiri'; font-size: 1.25rem;}
	.description-text p {font-family: 'Amiri'; font-size: 1rem; margin-bottom: 0rem;}
	.description-text a {color: black;}
	.zitat {margin-top: 5rem; padding: 5rem;}
	.zitat h2 {font-family: 'Amiri'; font-size: 2.2rem; padding: 2rem;}
	

	
	
	
	/* footer */
	footer{border-top: 1px dotted black;}
	footer h5{font-family: 'Montserrat', Helvetica, sans-serif; font-size: 1rem; }
	footer a{font-size: 0.825rem; color: rgba(0, 0, 0, 1);font-weight: 300;}
	footer a:hover{color: rgba(0, 0, 0, 1);}
	
	/* mediaqueries */
	@media (max-width: 575px){ 
	html {margin-left: 1%;margin-right: 1%;}
	h1:after{left:44%;}
	.logo-intro{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;width: 60%;}

	
	.brand{width: 85%; top: 20px;}
	
	.nav{top: 125px;}
	ul.nav-items li a{font-size: 1.5rem;}
	.modal-header .close {margin-left: 6%; font-size: 0.5rem; padding-top: 12px;font-weight: 400; padding-bottom: 0px; text-shadow: none; text-transform: uppercase; background: black; opacity: 1; color: white; }
	.modal-footer a{font-size: 0.75rem;}
	.tagline {top: 0; left: 0;width: 100%; display: inline-block;}
	.mainheadline {margin-bottom: 15%; padding-left: 10%;padding-right: 10%;}	
	.mainheadline h1{margin-top: 125px; padding-bottom: 2%; font-size: 2rem; padding-left: 2%; padding-right: 2%;}
	.mainheadline h2{padding-left: 2%; padding-right: 2%;}		
	.mainheadline-video h1 {margin-top: 125px; padding-bottom: 2%; font-size: 2rem; padding-left: 2%; padding-right: 2%;}
	.mainheadline-video h1:after{left: 44%;}
	.mainheadline-video > .lead{width: 90%;padding-left: 3%; padding-right: 3%}
	.lead{width: 100%;padding-left: 3%; padding-right: 3%}
	.zitat{padding: 1rem;}
	.zitat h2 {font-size: 1.125rem;}
	.mt-xsm-5{margin-top: 5%;}
	.pt-extra {padding-top: 5%;}
	footer{padding-left: 2%; padding-right: 2%; margin-left: 2%; margin-right: 2%;}
		}
	
	/* Small devices (landscape phones, 576px and up)*/
	@media (min-width: 576px) and (max-width: 768px){ 
	.logo-intro{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;width: 60%;}
	
	.brand{width: 50%;}
	.mainheadline {margin-bottom: 5%; margin-top: 5%; padding-left: 10%;padding-right: 10%;}	
	.mainheadline h1{margin-top: 20%;}		
	.mainheadline-video h1 {margin-top: 20%;}
	.zitat{padding: 3rem;}
	.pt-extra {padding-top: 5%;}
	}

	/* Medium devices (tablets, 768px and up)*/
	@media (min-width: 768px) and (max-width: 991px){ 
	.logo-intro{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;width: 30%;}
	ul.nav-items li a {font-family: 'Montserrat', Helvetica, sans-serif; font-weight: 600; font-size: 2rem; color: rgba(30, 28, 28, 1); text-transform: uppercase;}
	.brand{width: 58%;}
	.mainheadline {margin-bottom: 5%; padding-left: 10%;padding-right: 10%;}	
	.mainheadline h1{margin-top: 25%;}	
	.mainheadline-video h1 {margin-top: 15%;}
	.pt-extra {padding-top: 5%;}
	.modal-header .close {padding-bottom: 0px;padding-top: 12px; }

		 }

	/* Large devices (desktops, 992px and up)*/
	@media (min-width: 992px) and (max-width: 1199px) {
	.logo-intro{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;width: 30%;}
	.zitat{padding: 3rem;}
	.zitat h2 {font-size: 1.5rem;}
	.modal-header .close {padding-bottom: 0px;padding-top: 12px; }
	
	}

	/* Extra large devices (large desktops, 1200px and up)*/
	@media (min-width: 1200px) { 
	.circle{height: auto;width: 75%;}
	ul.nav-items li a {font-size: 3.5rem !important; }
	.modal-header .close {margin-left: 5%; padding-bottom: 0px;padding-top: 12px; }
	}