@import url('js/fancybox/jquery.fancybox.css');
@import url('swiper.css');
@font-face {
  font-family: "Verlag";
  src:
    url("../fonts/Verlag-Black.woff2") format("woff2"),
    url("../fonts/Verlag-Black.woff") format("woff"),
	url("../fonts/Verlag-Black.eot?#iefix") format("embedded-opentype"),
	url("../fonts/Verlag-Black.eot?#iefix") format("svg'"),
	url("../fonts/Verlag-Black.svg#Verlag-Black'") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Verlag";
  src:
   	url("../fonts/Verlag-Book.woff2") format("woff2"),
    url("../fonts/Verlag-Book.woff") format("woff"),
	url("../fonts/Verlag-Book.eot?#iefix") format("embedded-opentype"),
	url("../fonts/Verlag-Book.eot?#iefix") format("svg'"),
	url("../fonts/Verlag-Book.svg#Verlag-Book'") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


html, body { margin:0px; padding:0px; font-size:18px; font-weight: 400;  background-color:#fff;  font-family: "Verlag", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }


/*---common----*/

h1 { font-size:55px; letter-spacing:0px; color:#fff;  line-height: 55px;margin-bottom: 15px;text-align: left;margin-top: 0;text-transform: uppercase;font-family: "Verlag", sans-serif;font-weight: 900;}
h2 { font-size:25px; letter-spacing:0.05em; font-weight: 400; color:#fff; margin:0; box-sizing:border-box; line-height: 35px;text-align: left;font-family: "Verlag", sans-serif;}
p { font-size:18px;  color:#fff; margin:0; line-height:28px;letter-spacing: 0.05em;}
a { text-decoration:none; border:none;color:#fff;z-index: 2;}
img { border:0px none !important; }
.transition { -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}
.transition-2 { -webkit-transition:all 0.1s ease 0s; -moz-transition:all 0.1s ease 0s; -o-transition:all 0.1s ease 0s; transition:all 0.1s ease 0s;}


.shadow1 { opacity: 0;  transition: all 900ms ease 0s; position: absolute; width: 100%; height: 100%;z-index: 1;top: 0;background-image: -webkit-linear-gradient(top, rgba(00,00,00,0.3) 50%, rgba(00,00,00,0.6) 100%);pointer-events: none;}


/* ----- AGE GATE----- */

#age-gate {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.age-gate-box {
  background: #fff;
  padding: 30px;
  text-align: center;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  width: auto;
}

.age-gate-box h5 {
	margin: 15px;
	color:#1c1f4e;
	font-size: 25px;
}

.age-gate-box p {
	color:#1c1f4e;
}	

.age-buttons {
  margin: 20px 0;
}

.age-buttons button {
  padding: 15px 35px;
  margin: 0 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 19px;
}

.age-buttons button:first-child {
  background: #fff;
  color: #1c1f4e;
  border: 1px solid #1c1f4e;
}

.age-buttons button:last-child {
  background: #fff;
  color: #1c1f4e;
  border: 1px solid #1c1f4e;
}


/* ----- HEADER ----- */


.header { position:absolute; width:100%; left:0; top:0;  cursor:default; z-index: 12;height: 60px;transition: all 500ms ease 0s;opacity: 1;}
.header-scroll {background-color: #847566;}
.header-impressum {background-color: #4a443f;}
    .menu-button { right:15px; position:fixed; top: 9px;cursor: pointer; transition:all 400ms ease 0s; z-index: 13;display: none;}
    .menu-button-txt { color:#fff; position:relative; margin-bottom:5px; opacity: 1; font-size: 13px; left: -4px;}
    .menu-icon { width:30px; position:relative; float:left; }
    .menu-button-active .menu-button-txt {opacity: 0;}
    .menu-button-active {top: -12px;}
        .line {  display: block; height: 1px; margin: 0 auto; position: relative; width: 32px; float: right;background: #fff;}
        .line1 {}
        .line2 { margin:7px auto; width: 25px;}
        .line3 {}
        .menu-button-active .line1 { margin-bottom: 1px; margin-top: 29px; transform: rotate(45deg) translate(0px, 0px);background-color:#fff;}
        .menu-button-active .line2 { opacity: 0; width: 32px;background-color:#fff;}
        .menu-button-active .line3 { margin-bottom: 0; margin-top: -16px; transform: rotate(-45deg) translateX(2px); width: 32px;background-color:#fff;}
        .menu-button:hover .line2 { width: 32px;}

    .logo-header { left: 5%; top: 40px; width: auto; position: absolute; z-index: 13; transition: all 400ms ease 0s;}
    .header-scroll .logo-header {top: 30px;width: 160px;}        
    .header-scroll .menu-wrapper {}

/* ----- NAVIGATION ----- */
	
.navigation { position:absolute; width:100%; height:70px; transition:all 500ms ease 0s; z-index: 8;top: 50px;pointer-events: all;}
	.header-scroll .navigation {top: 15px;}  
	.header-impressum .navigation {top: 15px;}    
	.nav { position:absolute; transition: all 700ms ease 0s;height: 50px;right: 5%;}
	.navigation-open {left: 0 !important;}

	.header-scroll .icons {top: 11px;}
	.header-impressum .icons {top: 11px;}

	.menu-wrapper { position:relative;  width: auto;height: 60px;transition: all 400ms ease 0s;}
	.menu-wrapper li { display: block;position: relative;float: left;text-align: right;padding: 20px 25px 2px 25px;}





/* ----------- #OPENER BACKGROUND ----------- */

.opener-bg {position:relative;height:calc(100vh);background-color: #ffc001;pointer-events: none;}
.opener-bg-cans {position: absolute;top: 50%;right: 4%;transform: translate(-0%, -50%);width: calc(52%);max-width: 1300px;z-index: 2;}
.opener-bg-logo {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: calc(100%);z-index: 1;}
.opener-bg-cans img {width: calc(70%);}
.opener-bg-logo img {}



/* ----- TOP ----- */


.top { position:absolute; width:100%; height:calc(100vh); top:0; left:0; cursor:default; pointer-events: none;}
	.top-text {position: absolute;width: 840px;top: 45%;left: 10%;box-sizing: border-box;z-index: 2;max-width: 1000px;transform: translate(-0%, -50%);}
	.top-wave {position: relative;display: inline-block; box-sizing: unset;height: auto;margin-bottom: 33px;}
  .top-wave img {width: 50px;}	
  .top-txt-1 {font-size:45px; letter-spacing:0px; color:#fff;  line-height: 41px;margin-bottom: 20px;margin-top: 0;text-transform: uppercase;font-weight: 900;font-family: "Verlag", sans-serif;text-shadow: 2px 3px 8px #00000030;}
	.top-txt-2 {font-size:70px; letter-spacing:0px; color:#fff;  line-height: 55px;text-transform: uppercase;font-weight: 900;margin-bottom: 40px;font-family: "Verlag", sans-serif;text-shadow: 2px 3px 8px #00000030;}
	.scroll-button {position: relative;width: auto;}
	.scroll-button span {color: #fec107;position: absolute;height: 40px;line-height: 40px;padding: 5px 50px;font-size: 18px;cursor: pointer;background-color: #f1f1f1;margin: 30px auto 0;text-transform: uppercase;left: 50%;transform: translate(-50%, -50%);font-family: "Verlag", sans-serif;font-weight: 900;opacity: 1;transition: all 250ms ease 0s;border-radius: 25px;box-shadow: 2px 3px 8px #00000030;}
  	.scroll-button span:hover {opacity: 0.9;}

	.hero-content {position: absolute; width: 100%; height: calc(100vh);   overflow: hidden; z-index: 2;top: 0; text-align: center;}
	.header-icon {margin-top: 30px;}
	.contact-hero {display: flex; gap: 1rem; justify-content: center;  position: absolute; left: 39px; bottom: 56px;z-index: 4;}

	.wave {position: absolute;top: calc(0% + -45px);width: 100%;z-index: 1;}
	.wave img {width: 100%;}

/*------------logo-----------*/

.logo{height:auto; visibility: visible;}
	.logo a { width: auto; height: auto; margin: 0 auto; top: 0; position: absolute; left: 0;}
	.logo img{   width:180px; margin:0 auto;    box-sizing:border-box; transition: all 400ms ease 0s;}
	.logo-scroll {max-width: unset;transition: all 400ms ease 0s;}
	.header-scroll .logo img {width: 160px;}
	.header-impressum .logo-scroll {top: 35px;}

/* ----- MAIN ----- */	

.main {position:relative; display:block; width:100%; margin:0 auto; background-color: #fff;height: auto;}
	.main-impressum {position:relative; display:block; width:100%; margin:0px auto; background-color: #ffc001;height: auto;overflow: auto;box-sizing: border-box;padding: 200px 0;}
.main-inner {position: relative;display: block;margin: 0 auto;}
	.impressum {position: relative;display: block; margin: 0 auto;width: 80%;}
	.impressum a {color: #fff;}
	.impressum p {font-size: 23px;letter-spacing: 0;font-weight: 400;color: #fff;margin: 0;box-sizing: border-box;line-height: 35px;text-align: left;font-family: "Verlag", sans-serif;}
	.impressum h2 {margin-bottom: 50px;}		
	.impressum h3 {font-size: 25px;letter-spacing: 0.05em;font-weight: 400;color: #fff;box-sizing: border-box;line-height: 35px;text-align: left;font-family: "Verlag", sans-serif;margin: 30px auto;}
	.impressum strong {font-weight: 600;font-size: 23px;}

	
/* ----- PRODUCTS ----- */

.products_core {position:relative; display:block; width:100%; margin:0 auto; background-color: #fff;height: auto;}
	.pd-container { position: relative;width: 100%;text-align: center;display: block;margin: 0 auto;height: 100vh;background-color: #fff;padding: 50px 0;}    
	.pd-container1 {position: relative;display: table;width: 50%;box-sizing: border-box;text-align: center;float: left;height: 100%;background-position: center;background-size: cover;background-repeat: no-repeat;}
	.pd-container2 {position: relative;display: table;width: 50%;box-sizing: border-box;text-align: center;float: left;height: 100vh;background-position: center;background-size: cover;background-repeat: no-repeat;}
	#peach .pd-container2 {background-color: #fff;}
	.pd-inner {position: absolute;width: 550px;top: 50%;left: 15%;box-sizing: border-box;z-index: 2;max-width: 1000px;transform: translate(-0%, -50%);}
	.the {position: relative;width: 210px;margin-bottom: 25px;}
	.pd-titel {font-size:70px; letter-spacing:0px; color:#2d435a;  line-height: 45px;margin-bottom: 25px;text-align: left;margin-top: 0;text-transform: uppercase;font-family: "Verlag", sans-serif;font-weight: 900;}
	.pd-text {font-size:25px; letter-spacing:0.05em; font-weight: 400; color:#2d435a; margin:0; box-sizing:border-box; line-height: 35px;text-align: left;font-family: "Verlag", sans-serif;}

	.wave-products {position: relative;width: 100%;z-index: 1;background-color: #ffc001;display: unset;}
	.wave-products img {width: 100%;}
  
	/* ----- KEYS ----- */

	.keys_core {position:relative; display:block; width:100%; margin:0 auto; background-color: #faf4e6;height: auto;}
		.keys-container { position: relative;width: 100%;text-align: center;margin: 25px auto;height: 100px;}
		.keys {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
		.keys img {position: relative;display: block;height: 65px;margin: 0 15px;background-position: center;width: 90px;float: left;}
    .keys img:first-of-type {margin: 0 15px 0 0;}		
    .pd-button {position: relative;margin: 0 auto 0 0;width: 230px;}
	  .pd-button span {color: #fff;position: relative;display: block;height: 50px;line-height: 50px;padding: 0px 60px;font-size: 18px;cursor: pointer;letter-spacing: 0.5px;text-transform: uppercase;font-family: "Verlag", sans-serif;font-weight: 900;background-color: #2d435a;opacity: 1;transition: all 250ms ease 0s;border-radius: 25px;}
	  .pd-button span:last-of-type {/*! color: #f9a82c; */}
	  .pd-button span:hover {opacity: 0.8;}
	  .orange {/*! color: #ffc001 !important; */}


/* ----- INSTA ----- */

.insta-section {position:relative; display:table; width:100%; margin:0 auto; background-color: #faf9f6;box-sizing: unset;}
	.insta-container {width: 100%;text-align: center;margin: 0 auto;height: auto;position: relative;}
	.insta-inner {width: 100%;margin: 120px auto;position: relative;height: 100%;display: inline-table;}
	.insta-titel {font-size: 55px;letter-spacing: 0px;color: #2d435a;line-height: 55px;text-align: left;text-transform: uppercase;font-family: "Verlag", sans-serif;font-weight: 900;width: 80%;margin: 0px auto 90PX;}
  .insta-titel a {color: #2d435a;}	
  .insta-pic {position: relative;width: 32.64%;float: left;margin-right: 1%;height: 60vh;background-position: center;background-size: cover;}
	.insta-pic:last-of-type {margin-right: 0;}
	.cib {   transition:all 400ms ease 0s; /*! opacity: 0; */}
	.insta-pic:hover .cib{opacity: 1;}
	.core-item-button { width:30px; position:absolute;  right:30px;  height:55px;  border-radius: 50%; transition:all 250ms ease 0s; z-index: 2;/*! transform: translate(-50%, -50%); *//*! top: 50%; */bottom: 10px;}
	.core-item-ov { width:100%; height:100%; z-index:1; background-color:rgba(0,0,0,0.5); top:0px; left:0px; position:absolute; transition: all 250ms ease 0s;opacity: 0.2;}
	.insta-pic:hover .core-item-ov { opacity: 0.5;}

/* ----- Footer ----- */
	
.footer { position:relative; display:block;  margin:0 auto;   width: 100%;height: auto;overflow: auto;background-color: #1c1f4e;}
	.footer-inner { position:relative; width:80%;  margin:100px auto 60px; display:block; height: 500PX;}
		.footer-logo { position:absolute; width: 260px;top: 50%;left: 0;transform: translate(0%, -50%);}
		.footer-box {position:absolute; width: auto;top: 50%;right: 0;transform: translate(0%, -50%);}
		.contact-ul {text-align: right;}
		.ft-icon {position: relative;width: 35px;display: inline-block;margin: 0 0px 50px 25px;}
		.ft-email {font-size: 20px;letter-spacing: 0.05em;font-weight: 400;color: #fff;margin: 0;box-sizing: border-box;line-height: 30px;text-align: right;font-family: "Verlag", sans-serif;}
    .ft-email a {font-weight: 400;}

    .impressum_line { width:100%;  text-align:center; margin:0 auto; /*! background-color:#1c1f4e; */ /*! padding:15px 5% 0; */     position:relative; height: 45px;/*! border-top: 1px solid #ffffff2b; */font-size: 17px;letter-spacing: 0.05em;font-weight: 400;color: #fff;box-sizing: border-box;line-height: 20px;font-family: "Verlag", sans-serif;position: absolute;bottom: 50px;}
        .impressum_line a { color:#fff;}

	.wave-impressum {position: absolute;width: 100%;z-index: 1;bottom: 0;}
	.wave-impressum img {width: 100%;}



/*----- RESPONSIVE ------*/



@media screen and (max-width:1000px){
	
	.top-text {width: 80%;left: 50%;transform: translate(-50%, -50%);}
  .top-txt-1 {font-size: 35px;}
  .top-txt-2 {font-size: 55px;line-height: 40px;}
  
  .the {margin-bottom: 15px;width: 180px;}
  .pd-inner {width: 80%;}
  .pd-titel {font-size: 38px;line-height: 30px;margin-bottom: 20px;}
  .pd-text {font-size: 20px;line-height: 27px;}
  .keys img {height: 49px;width: 60px;}
  
  .insta-titel {font-size: 45px;}
  .insta-pic {width: 100%;}
	
}

@media screen and (max-width:800px){
	
  .logo-header {left: 50%;transform: translate(-50%, -0%);}
  .opener-bg-cans {top: unset;bottom: 0%;width: calc(90%);transform: translate(-50%, -35%);right: unset;left: 47%;}
  .top-wave {margin-bottom: 10px;}
  .top-wave img {width: 33px;}
	.top-text {font-size: 27px;margin-bottom: 0px;top: 35%;}
  .top-txt-1 {font-size: 27px;margin-bottom: 0px;}
  .top-txt-2 {font-size: 30px;line-height: 40px;}
  .scroll-button span {padding: 2px 30px;font-size: 15px;margin: 0px auto 0;}
  .wave {top: calc(0% + -10px);}
  
  .pd-container {padding: 0;height: auto;}
  .pd-container1 {width: 100%;height: 520px;}
  .pd-container2 {width: 100%;height: 70vh;}
  .pd-inner {left: 50%;transform: translate(-50%, -50%);}
  
  .insta-titel {font-size: 30px;line-height: 35px;}
  .insta-inner {margin: 80px auto 0;}
  .insta-pic {height: 50vh;}
  
  .footer-inner {height: 350px;}
  .ft-icon {display: none;}
  .footer-logo {width: 180px;left: 50%;transform: translate(-50%, -50%);top: 50px;}
  .ft-email {text-align: center;font-size: 17px;line-height: 25px;}
  
}

@media screen and (max-width:400px){
  
  .pd-container2 {width: 100%;height: 85vh;}
  .keys img {margin: 0 10px; height: 45px;width: 55px;}
  .keys img:first-of-type {margin: 0 10px 0 0;}		

  
}