/* hind-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/hind-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* hind-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/hind-v16-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


 :root {
--menu: #000;
/* --bodyBG: #eeeeee  alt*/
/* --bodyBG: #f4f3f2;   */
--copper:#777373;
--gold: #ccc;
--blue:#132949;
--blueLight:#193f77;
--blueButton:#1d3f71;
--cyan: #107789;
--light: #95918c;
--offwhite:#b9b9b9;
--lightgray:#9e9e9e;
--gray: #747474;


--text:#7f7d7d;







--beige: #FCF9F6; 
--white: #fff;
--roundCorner:0px;

--body: 'Hind', sans serif;
--head: 'Hind', sans serif;
--sans: 'Hind', sans serif;
} 





/* Spacing
-----------------------------------------------------------------*/

.grid-container { 
    max-width: 100rem ; 
	/* max-width: 86.875rem ; */
}



.padding { padding: 40px 20px; }

.paddingContent { padding: 30px; }
.paddingLink  { padding: 20px 0px; }

.paddingRight { padding-right: 40px; }
.paddingLeft { padding-left: 40px; }

.paddingTop { padding-top: 20px; }
.paddingBottom { padding-bottom: 40px; }

.paddingColBottom  { padding-bottom: 1.95rem; }
.paddingColTop  { padding-Top: 1.95rem; }

.noPadding { padding: 0!important; }
.noPaddingTop { padding-Top: 0!important; }  
.noPaddingBottom { padding-bottom: 0!important; }
.noPaddingRight { padding-right: 0!important; }
.noPaddingLeft { padding-left: 0!important; }


@media only screen and (max-width: 40em) {
.noPaddingSmall { padding-left: 0!important; padding-right: 0!important;}
.paddingSmall { padding: 40px 20px; } }


.marginTop { margin-top: 80px; }
.marginBottom { margin-bottom: 80px; }
.marginRight { margin-right: 40px; }

.noMargin { margin: 0!important; }







   
/* Text Specific
-----------------------------------------------------------------*/
body {
	font-size:14px;
	

}

.smallText 	{font-size: 0.688rem;	}
.demiText 	{font-size: 1rem;	}
.largeText 	{font-size:calc(1rem + .2vw); line-height: 1.6;} 
.uppercase 	{text-transform: uppercase; font-size:0.75rem} 



/* Dividers
-----------------------------------------------------------------*/

.divider,
.dividerCenter,
.dividerBlack,
.dividerCenterBlack,
.dividerWhite,
.dividerCenterWhite,
.dividerColor,
.dividerCenterColor {
	width: 40px;
	height: 2px;
	background-color:#88784d;
	margin: 1.375rem 0;
}




.dividerCenter,
.dividerCenterBlack  {
	margin: 1.375rem auto;
}

.sectionSeparator {
	width: 100%;
	background: transparent;
	border-bottom: 1px solid var(--light);
	margin-bottom: 20px;
}

.dividerContainer {
  position: relative;
  width: 300px;
  height: 3px;
  margin: 0.5rem auto
}

.divider2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 1px;
  background-color: #a4a4a4; /* Farbe der ersten Linie */

 
}




.dividerVertical  {
	height: 100%;
	
	margin-left:1.5rem; 
	border-left: 1px solid var(--blue)}



/* ==============================================================
							TYPOGRAPHY
================================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
table,
p,
a { -moz-osx-font-smoothing: greyscale; line-height:1.6 }

table, p, span, li { 
	
	-ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -khtml-hyphens: auto;
  hyphens: auto; 
  letter-spacing:0.0625rem;
 
  }  

p, span { text-align: justify;}
 
 
.noHyph { hyphens: none; }

h1,
h2,
h3,

h5,
h6,
input,
.label,
label,
.button,
.form-error,
.mfp-title,
.skillName,
.button span,
.authorName,
.postNav a,
.blogTitle a,

.shareBtns p,
div.folioNav a,
#primaryMenu a,
.counters .timer,
.skillName .timer,
.folioMeta li span,
.breadcrumbs > li a,
.overlayMenu ul li a, 
.pricing-table .title,
.imageBoxesTitle span,
.tabs-title > a,
.uf-title,
.pricing-table .bullet-item,
#primaryMenu ul li.megaMenuTitle,

.folioMasonry-mixed .gallery-item .imageHover p {
	font-family: var(--head);
	
}


#primaryMenu a, 
.button,
.subline,
.button.hollow,
.service-headline span,
h4,
h5,
 a.link-in,  a.link-out, a.link  {
	font-family: var(--sans); letter-spacing:0.06rem; color:var(--copper);
	font-size: 0.75rem; text-transform:uppercase;
	
}




#primaryMenu a, 
.subline,
.folioDesc p, .folioDesc span,
.service-headline span,
#filters a, .filter-group a {	 color:var(--text);	}

h5 {	 color:var(--blue);	}

a.link-in, a.call, a.link-out, a.link {
  display: inline-block; /* Damit width und height wirken */
  position: relative; /* Damit das background-image relativ zum <a>-Element positioniert wird */
  padding-left: 16px; /* Platz für das chain.svg */
 
  line-height: 1; /* Zur Korrektur der vertikalen Ausrichtung */
  background-repeat: no-repeat;
  background-position: left center; /* Position des chain.svg im <a>-Element */
  text-transform:uppercase;
  color:var(--copper);
}


a.link-in::before,
a.call::before,
a.link-out::before {
  content: ""; /* Pseudoelement für das chain.svg */
  position: absolute;
  top: 50%; /* Vertikal zentrieren */
  left: 0;
  width: 11px; /* Größe des chain.svg */
  height: 11px;
  background-image: url(../img/link.png); /* Pfad zum chain.svg anpassen */
  background-size: contain; /* Größe des chain.svg anpassen */
   fill: currentColor;  /* Setzen Sie die Farbe des chain.svg auf die Farbe des Textes */
  transform: translateY(-50%); /* Korrektur für vertikale Ausrichtung */
}

a.call::before {width:15px;  height: 15px;}

.bgBlack a, .bgCG a {color:var(--white) }

.bgBlack a.link-in::before, .bgCG a.link-in::before  { background-image: url(../img/link-w.png);}
.bgBlack a.link-out::before   { background-image: url(../img/link-out-w.png);  color:var(--white);}
.bgBlack a.call::before { background-image: url(../img/call.svg); color:var(--white);}
 a.link-out::before { background-image: url(../img/link-out.png);}


h1, h2, h3, h4 {  text-transform:uppercase; letter-spacing:0.15rem;}


h1 { font-size: 1rem;   line-height:1.5; color:var(--blue); margin: 0rem;
 position: relative;
  display: inline-block;}



h2 { font-size: 1rem;   color:var(--offwhite); margin-bottom:1rem;   }
  
.headline h2 {  display: flex;  align-items: center;  }
  
.subline, .subline p { font-size: 0.75rem; line-height:1.2rem; letter-spacing:0.065rem; margin:0px;      }



h4, .uf-list #uf-separator,.uf-list #uf-empty { font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1rem;
line-height: 1.3rem;
color: var(--lightgray); }



h3, .uf-title {
  position: relative;
  padding-bottom:  10px;
  margin:0;
  font-size: 0.6875rem;  font-weight:400; letter-spacing:0.25rem; color:var(--offwhite);
}





b, strong {
    font-weight: 700;
}

p,
li,
blockquote,
strong,
table,

.testimonContent p,
.testimonMeta,
.accordion-title,
.pricing-table .price {
	font-family: var(--body);
}

h5,
h6,
.button,
.blogTitle,
.shareBtns p,
.pricing-table .title,
.imageBoxesTitle span,
.top-bar-section ul li > a,
#primaryMenu ul li.megaMenuTitle {
	text-transform: uppercase;
}

.underline {text-decoration:underline;}


.bgBlack h1,
.bgBlack li,
.bgBlack h4, .bgHeader h4, .bgMain h4,
.bgBlack p, .bgCG p, .bgMain p,
.bgBlack .service,
.bgBlack .contact a  {color:var(--offwhite) }
.bgHeader h4 {font-weight:400}

.bgBlack .subline {color:var(--gold) }



/* .bgBlack  p, .bgCG  p,  .bgBlack li {font-size:0.875rem} */


.service {font-family: var(--sans); letter-spacing: 0.06rem;  } 

.bgBlack .h2line, .bgBlack h3::before {  
  background-color: var(--gold);
}

.bgDark .h2line::before,
.bgBlack .h2line::before {    background-color:var(--light);}



a:focus, 
a:hover { color: var(--blue);   }

.bgBlack a:focus, 
.bgBlack a:hover { color: #fff;   }

:last-child:not(.is-active) > .accordion-title {
    border-bottom: 1px solid rgba(42, 43, 47, 0.2);
    
}

.folioDesc p, .shop .name {    color: var(--gray);  }


body,

.bgLight p,
.bgLight2 p,
.bgLight p > a,
.accordion-content
 {color: var(--text);}
 
.bgLight p >  a:hover { color:#88784d;}



.blueText {color: var(--blue) !important;}
.bgLight .blueText   {color:#003B7B !important}
.warmText {color: var(--copper) !important;}
.bgBlack .warmText {color: var(--gold) !important;}
.whiteText {color: var(--white) !important;}


/* ==============================================================
							BASIC COLORS
================================================================= */

::-moz-selection { /* Code for Firefox */
    color: #f8f8f8;    background:#918c7f;}

::selection {    color: #f8f8f8;    background:#918c7f;}  


.bgBody   { background: var(--bgBlack);}





/* ==============================================================
							GENERAL STYLES
================================================================= */
html {
    margin-right: 0 !important;
    overflow: visible !important;
}

.round {border-radius:var(--roundCorner)}

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	height: auto; 
	
	background: linear-gradient(29deg, rgb(64, 63, 63) 0%, rgba(0,0,0,1) 60%); 
}



.inline-list {
  	list-style: none;
  	margin-top: 0;
  	margin-bottom: 1.0625rem;
  	margin-left: -1.375rem;
  	margin-right: 0;
  	overflow: hidden;
  	padding: 0; 
}

.inline-list > li {
	display: block;
    float: left;
    list-style: none;
    margin-left: 0; 
}

.inline-list > li > * { display: block; }

.inline-list > li:not(:last-child) { margin-right: 15px; }


p + h4   { margin-top: 60px; } 

h4 + p, 
h4 + ul { margin-top: 10px; }

ul + h4, h2 + p:not(.subline) , h2 + ul{ margin-top: 30px; }




.ctaBtns { margin-top: 40px; }

pre {
	display: block;
  	padding: 15px;
  	font-size: 14px;
  	line-height: 1.42857143;
  	word-break: break-all;
  	word-wrap: break-word;
  	color: #575a5d;
  	background-color: #f5f5f5;
  	border: 1px solid #cccccc;
  	margin-top: 40px;
}

.label { color: white; }

ul.no-bullet { margin-bottom: 0; }

ul.socialLinks,
ul.contactList,
ul.portfolio,
ul.projects,
ul.folioMeta,
ul.blogMasonry,
.commentList ul,
ul.clientsGrid,
ul.testimonialsGrid,
ul.solidBox,
ul.blogGrid,
ul.service,
ul.lightboxGallery,
ul.pricing-table {
	list-style: none;
	position: relative;
}


.ul-list__item {
  position: relative;
  padding-bottom: 15px;
 padding-left: 5px;
  color: inherit;
}

ul.socialLinks {list-style:inline;}

ul.service li::before {
  content: "\2014";
  margin-left: -20px;
  margin-right: 8px;
  
}


.contactList li:not(:last-child) { margin-bottom: 10px; }



.menuItem { padding-top: 30px; }

.menuItem span {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	padding-bottom: 10px;
	font-family: 'Merriweather', serif;
}


/* Transitions
-----------------------------------------------------------------*/

a,
.link,
.button,
.blogTitle a,
.shareBtns a,
.pricing-table,
.clientsGrid li img,
input[type="submit"],
.teamPlain .memberBio,
.link [class*="icon-"],
.comingSoonNav .inline-list a span,
frameBox:hover
{
	outline: none;
	
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}




/* ==============================================================
					 		LAYOUT STYLES
================================================================= */

/* .boxed .headerWrapper,
.boxed .heroWrapper,
.boxed .mainWrapper,
.boxed .footerWrapper {
	width: 100%;
	max-width: 89.5em;
	margin: 0 auto;
	height: auto;
	padding: 0;
} */

.fullWidth .headerWrapper,
.fullWidth .heroWrapper,
.fullWidth .mainWrapper,
.fullWidth .footerWrapper,
.fullWidth .stretched {
	
	max-width: 100%;
	width: 100%;
	height: auto;
}


/* ==============================================================
					 	HEADER & MENU STYLES
================================================================= */

header {
	height: auto;
	z-index: 100;
}

.headerWrapper,
.navWrapper,
.navWrapper nav {
	height: 100%;
}

.navWrapper { padding: 0; }

#logo img {height:15px; width:auto; margin-top:4px;}
#logo_footer img {height:60px; width:auto; opacity:0.9; }



/* Mega Menu (Mobile + Tablet Versions)
-----------------------------------------------------------------*/

#mobileMenuTrigger {
	  position: absolute;
	  width: 42px;
	  cursor: pointer;
	  top: -100px;
	  right: 0;
	  padding-top: 16px;
}


#mobileMenuTrigger [class^="icon-"] {
	display: block;
	line-height: 100px;
	font-size: 1.5rem;
	text-align: center;
}

#primaryMenu, 
#primaryMenu * {
	margin: 0;
	padding: 0;
	list-style: none;
}

#primaryMenu .label { 
	padding: 2px 5px;
	line-height: 1.2;
	margin-left: 5px;
	font-weight: bold; 
}

#primaryMenu { 
	float: none;
	padding: 0px 0 20px 0;
	display: none; 
	
}

#primaryMenu ul {
	display: block;
	float: none;
	margin-bottom: 0;
	width: 100%;	
	background: #fff;
	padding-left:20px;
}

#primaryMenu.show {
	display: block;
	height: auto !important;
}

#primaryMenu a {
	display: block;
	position: relative;


}

.navWrapper,
#primaryMenu > ul {
	/* background: transparent; */
	line-height: 100px;
}

@media only screen and (min-width: 64em) {
.navWrapper,
#primaryMenu > ul {
	background: none;
	line-height: 100px;
}
}

#primaryMenu > ul li {
	float: none;
	position: relative;
}

#primaryMenu ul ul > li.dropDown:after {
	content: '\232A';
	display: block;
	position: absolute;
	top: 0;
    right: 0;
    color: rgba(0, 0, 0, 0.3);
    line-height: 50px;
    padding: 0 1.125rem;
}

#primaryMenu > ul li.megaMenu { position: static; }

#primaryMenu ul li a,
#primaryMenu ul li.megaMenuTitle {
	line-height: 50px;
	height: 50px;
	padding: 0;
	zoom: 1;
	
	
}

#primaryMenu ul li.megaMenuTitle {
	margin: 0;
	color: rgba(42, 43, 47, 0.6);
	font-size: 0.75rem;
}

#primaryMenu > ul > li > a { color: var(--menu) }

/* .transparentHeader #primaryMenu > ul > li > a {
	text-shadow: 1px 1px 1px rgba(42, 43, 47, 0.1);
} */

#primaryMenu ul li a:hover,
.bgBlack #primaryMenu ul li a:hover,
#primaryMenu > ul > li.current > a {
	color:var(--copper)
}
	
#primaryMenu ul ul {
	position: relative;
    width: auto;
    background-color: transparent;
    border: 0;
    border-top: 1px solid #EEE;
    z-index: 1;
    top: 0;
    padding-left: 15px;
}

#primaryMenu ul ul li {
	float: none;
	margin: 0;
}

#primaryMenu ul ul li a:hover { background-color: rgba(0, 0, 0, 0.02); }

#primaryMenu ul ul a {
	
  	height: 50px !important;
  	line-height: 50px !important;
  	color: rgba(42, 43, 47, 0.9);
  	padding: 0 1.125rem;
	position: relative;
	
}


#primaryMenu ul ul a::before {
  content: "";
  position: absolute;
  left: -15px; /* Platzierung der Linie vor dem <a>-Element */
  top: 50%; /* Zentriert die Linie vertikal */
  transform: translateY(-50%); /* Korrektur, um die Linie tatsächlich zu zentrieren */
  width: 10px;
  height: 2px;
  background-color: var(--copper);
}

#primaryMenu ul ul ul {
	top: -2px;
	left: 0;
}

#primaryMenu .megaMenuContent {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	float: none;
	top: 100%;
	right: -1px;
	z-index: 99;
}

#primaryMenu ul li .megaMenuContent ul {
	display: block;
	position: relative;
	top: 0;
	box-shadow: none;
}



/* ==============================================================
						PORTFOLIO STYLES
================================================================= */



/* ==============================================================
							BUTTONS
================================================================= */

.button .iconLeft { margin-right: 8px; }

.button .iconRight { margin-left: 8px; }

.button { 
	/* font-size: 0.875rem;
	letter-spacing: 1px; */
	border-radius: 5px;
	background-color: var(--blueButton);
	border: 1px solid var(--blueButton);
	color:#fff;
	/* margin: 0; */
}

.button:not(.expanded) { 
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.button:hover,
.button:focus,
.button:active { 
background-color: var(--body);
border: 1px solid var(--copper);
color: var(--copper); }

/* Solid Buttons
-----------------------------------------------------------------*/

.button.btnBlack { background-color: #575a5d; }

.button.btnBlack:hover,
.button.btnBlack:focus,
.button.btnBlack:active { background-color: rgb(154, 146, 124); }

.button.btnWhite {
	background-color: rgba(255,255,255,1);
	color: #575a5d;
}

.button.btnWhite:hover,
.button.btnWhite:focus,
.button.btnWhite:active { background-color: rgba(255,255,255,0.8); }




table tbody td,
table tbody th {
padding: 0px ;
padding-bottom: 5px ;
	
}

table {
    width: auto;
   
}

table tbody tr:nth-child(even) {

background-color:transparent;
}

table tbody,
table tfoot,
table thead {
 border:none;
background-color:transparent;}




/* ==============================================================
					 		FOOTER STYLES
================================================================= */



#footer h2, 
#footer a, #footer p, #footer .subline {color: var(--offwhite)} 
#footer a:hover {color: var(--gold)} 
#copyrights  a {color: var(--copper)}


#footer p {opacity: 0.8;  }
#footer .subline  {opacity: 0.5;  }
#footer img {padding-left:15px;}

#footer .dividerVertical  {
	height: 100%;
	padding:0px;	
	margin-left:0; 
	border-left: none;}

#footer .connect {padding-right:30px;}





/* ==============================================================
							MEDIA QUERIES
================================================================= */
@media (max-width: 1200px) {
	.bgImage { position: relative; }

	.bgImage div { z-index: 1; }

	.bgImage:after {
		background-color: #fff;
	    content: "";
	    height: 100%;
	    left: 0;
	    opacity: 0.7;
	    position: absolute;
	    top: 0;
	    width: 100%;
	    z-index: 0;
	}
}




@media only screen and (min-width: 40.063em) {

	/* General Styles
	----------------------------------------*/

	.padding { padding: 40px 40px; }
	.paddingContent { padding: 40px; }
	.paddingBottom { padding-bottom: 60px; }
	
	
	.padding30 { padding: 30px; }
	.ziech .padding30 { padding: 30px !important; }
	.paddingTop { padding-top: 50px; }
	.paddingBottom { padding-bottom: 50px; }
	.link { margin-bottom: 0; }
	.lead { font-size: 160%; opacity: 0.8; }
		
	.splitImg,.splitImg > div {	min-height: 300px;}
	
	#logo img, #logo_footer img {margin-top:-6px;}

	#primaryMenu a, 
	.button,
	.subline,	
	.button.hollow,
	.service-headline span,
	h4,
	h5,
	a  { 	letter-spacing:0.09rem; }
	
	.projects .project-item { padding-left: 1rem;  padding-right: 1rem;   }
	.projects img,  .float img , .cardButton{
	box-shadow: rgba(50, 50, 50, 0.45) 0px 25px 50px -20px, rgba(0, 0, 0, 0.6) 0px 30px 60px -30px;  
	padding:0.6vw;	}

	.folioDesc {margin-top: 10px;  margin-bottom: 50px;}
	.folioDesc p, .folioDesc span  {display:block;}


	.h1-divider { margin-left: 120px; }
	.h1-p  { margin-left: 120px; }
	.h1line {width: 50px;}
	.h1line::before {  left: 50px;  width: 60px;}

.hero-headline > div {padding: 2rem !important;}

.bgHome {   
 
  background-position: 60% bottom !important; 
  background: url("../img/header/bg_home.webp");
   background-size:  60%;    
   background-repeat: no-repeat; 
	}


	/* Counter Styles
	----------------------------------------*/

	.countdown-section {
	  display: inline-block;
	  padding: 0;
	  border-top: 0;
	  border-left: 1px solid rgba(42, 43, 47, 0.2);
	}

	.countdown-section:first-child { border-left: 0; }


	/* Blog Styles
	----------------------------------------*/

	.blogStacked .blogStackedText,
	.blogStacked .stackedImageWrap {
	   	display: inline-block;
	   	vertical-align: middle;
	   	float: none!important;
	}

	.blogStacked .stackedImageWrap { 
		margin-left: 6%;
		margin-top: 0; 
	}
	
	
	
	
	#footer .dividerVertical {
		 padding-right: 10px;
		 margin: 0;
		 border-left: none;
		}
}



@media only screen and (min-width: 64em) {

	.padding { padding: clamp(80px, 5vw, 100px) 40px; }
	.paddingBottom { padding-bottom: 5vw; }
	.padding-lr-40 { padding-left: 40px; padding-right: 40px; }
	.paddingContent {   padding: 4vw;}
	#footer .padding {   padding: 40px 40px; }
	
	p:last-child { margin-bottom: 0; }

	
h1,h2,h3,h4,h5,h6,table,p,a { -moz-osx-font-smoothing: greyscale; line-height:1.5 }
	
table,p,a { -moz-osx-font-smoothing: greyscale; line-height:2 }

	.pricing-table { margin-bottom: 0; }

	.error404 { font-size: 8.5rem; }

	.mediaBox > div,
	.plainBox > div { padding-bottom: 0; }
	
	.padding30 { padding: 40px; }
	
	.gallery-content {     padding: 25px; }
	

	.dividerVertical  {	
		margin-left:1.5rem !important; 
		padding-left:2.4375rem !important;
		border-left: 1px solid var(--blue);
		padding-bottom:20px; padding-top:20px;
	}
	
	.bgHome {
   background-position: 55% bottom !important; 
   background-size:  50%;  
  
	}
	


	

#footer img {padding-left:0;}
#footer .connect {padding-right:0;}
#footer .dividerVertical {
		 margin-left:1.5rem; 
		 padding: 5px 0;
		 border-left: 1px solid var(--gold);
		}


 .projects img, .float img {   
 padding: 0.5vw; 
display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5; /* Seitenverhältnis 500px:660px */
  object-fit: cover; /* Bild skalieren, ohne das Seitenverhältnis zu verzerren */ }



	
	.folioDesc  {margin-top: 15px;  margin-bottom: 4vw;}


	/* Header Styles
	----------------------------------------*/

	header { height: 100px;  }

.hero-headline { 	left:auto; bottom:16%; }

	.verticalCenter,
	.horizontalCenter { min-width: 100%; }

	/* Auto Hide Nav Styles
	----------------------------------------*/

	.fixedHeader {
		position: fixed;
	  	z-index: 10;
	  	right: 0;
	  	left: 0;
	  	top: 0;
	}



	.slide, .projektSlide {
	  	-webkit-transition:all 0.4s ease-in-out;
	  	-moz-transition:all 0.4s ease-in-out;
	  	-o-transition:all 0.4s ease-in-out;
	  	transition:all 0.4s ease-in-out;
	}

	.slideReset {
	  	-webkit-transform:translateY(0);
	  	-ms-transform:translateY(0);
	  	transform:translateY(0);
	}

	.slideUp {
	  -webkit-transform:translateY(-100%);
	  -ms-transform:translateY(-100%);
	  transform:translateY(-100%);
	}
	
	.projektSlide {
	  	margin-top:100px;
	}
	

	.fixedHeader.headroom--not-top {		
		 transition:all 0.4s ease-in-out;
		 background-color:var(--bodyBG);
	}
	



	/* Mega Menu Styles
	----------------------------------------*/

	.navWrapper,
	#primaryMenu > ul {
		line-height:100px;
	}

	/* .boxed .navWrapper { padding: 0; } */

	/* .fullWidth .navWrapper { padding: 0 40px; } */
	

	#primaryMenu { 
		float: right;
		display: block;
		padding: 0;
	}

	#primaryMenu ul,
	#primaryMenu > ul li { float: left; }

	#primaryMenu ul ul > li.dropDown:after { line-height: 42px; }

	#primaryMenu ul li a,
	#primaryMenu ul li.megaMenuTitle,
	.bgBlack #primaryMenu ul li a,
	.bgBlack #primaryMenu ul li.megaMenuTitle {
	  	line-height: 100px;
	  	height: 100px;
	  	padding: 0 1.125rem;
	  	border-bottom: 0;
	}
	
  #primaryMenu ul ul a::before {
   display: none;
}

	
	
	
	
	#primaryMenu ul li:last-child a {
  
  padding-right: 0px; 
}

	#primaryMenu ul li.megaMenuTitle,
	.bgBlack #primaryMenu ul li.megaMenuTitle {
		margin: 30px 0 20px;
		line-height: 12px;
		height: 12px;
	}

	#primaryMenu ul li a.navButton,
	.bgBlack #primaryMenu ul li a.navButton {
		line-height: 2;
		height: auto;
		background-color: transparent;
		border: 1px solid#918c7f;
		color:#918c7f;
		margin-top: 35px;
	}

	#primaryMenu ul li:hover a.navButton,
	.bgBlack #primaryMenu ul li:hover a.navButton {
		color: #ffffff;
		background-color:#918c7f;
	}
	
	#primaryMenu ul ul {
		display: none;
		position: absolute;
		width: 220px;
		top: 100%;
		left: 0;
		z-index: 99;
		height: auto;
		margin: 0;
		padding-left: 0;
		background-color: #fff;
		box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
  		border-top: 2px solid#918c7f;
		
		}
	
		#primaryMenu ul li:last-child ul {
			left: auto;
			right: 0;
		}
	
	

	.bgBlack #primaryMenu ul ul { 
		background-color: #474a4c;
		border-top: 2px solid var(--copper); 
	}

	#primaryMenu ul ul a {
  		height: 42px !important;
  		line-height: 42px !important;	
	}

	#primaryMenu ul ul li:hover > a { padding-left: 1.25rem; }

	#primaryMenu ul ul ul {
		top: -2px;
		left: 100%;
	}

	#primaryMenu .megaMenuContent {
		display: none;
	  	position: absolute;
	  	width: 85%;
	  	float: left;
	  	box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
	}

	#primaryMenu ul li .megaMenuContent ul:not(:last-child) {
		border-right: 1px solid rgba(42, 43, 47, 0.1);
	}

	.bgBlack #primaryMenu ul li .megaMenuContent ul:not(:last-child) {
		border-right: 1px solid rgba(0, 0, 0, 0.2);
	}

	#primaryMenu ul li .megaMenuContent.cols2 > ul {
		width: 50%;
	}

	#primaryMenu ul li .megaMenuContent.cols3 > ul {
		width: 33.3333%;
	}

	#primaryMenu ul li .megaMenuContent.cols4 > ul {
		width: 25%;
	}

	#primaryMenu ul li .megaMenuContent.cols5 > ul {
		width: 20%;
	}

	.menuInvert {
		left: -100%!important;
	}
	
	
	
	
	
	

.noiseBG {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation 1s infinite;
  opacity: .7;
  visibility: visible;
  z-index: -10;
}



@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}


  @keyframes slow-shine {
            0% {
                background-position: 100% 100%;
            }
            100% {
                background-position: 0% 0%;
            }
        }
		
		
		
		
	/* Styling für das Overlay */
    .black {
      position: fixed; /* Über den gesamten Inhalt legen */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: black; /* Schwarzer Hintergrund */
      z-index: 1000; /* Immer im Vordergrund */
      opacity: 1; /* Start: Voll sichtbar */
      transition: opacity 250ms ease-out; /* Übergang für Transparenz */
    }

    /* Unsichtbar machen */
    .black.hidden {
      opacity: 0; /* Transparenz */
      pointer-events: none; /* Klicks durchlassen */
    }