/* Custom Scrollbar */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: white;
	width:2px !important;
}

::-webkit-scrollbar-thumb {
	background: rgb(166, 144, 81);
}

::-webkit-scrollbar-thumb:hover {
	background: rgb(166, 144, 81);
}

/**
 Allgemein
 */
* {
	box-sizing:border-box;
}
a {
	color:rgb(166, 144, 81);
	text-shadow:1px 1px rgba(35,31,32,0.1);
	font-weight:bold;
}



body,html {
	margin:0;
	padding:0;
	box-shadow: inset 0px 0px 50px 0px rgba(0,0,0,0.2);
	width:100vw;
	max-width:100vw;
}
body:after {
	background: url(./bg.jfif) center center no-repeat;
	width: 100%;
	height: 100%;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	background-size: cover;
	filter: blur(2em) brightness(1) invert(1);
	opacity: 0.2;
	box-shadow: inset 0px 0px 23px 0px rgb(35, 31, 32);
	z-index:1;
}
.button:hover {
	border:2px solid #0e0c0d;
	background:#0e0c0d;
	color:#fff;cursor:pointer;
	font:arial,sans-seif;
}
.hidden {
	display:none;
}

/**
 LOGO
 */
 .logo {
	 width: 100%;
	 max-width: 100%;
	 max-height:50%;
	 position: relative;
	 z-index:999;
}
 .logo path:nth-child(n+2) {
	 opacity: 0;
}
 .logo .soundline {
	 fill: url('#logo-gradient') !important;
}

/**
 Sites
 */
#page1,#page2,#page3 {
	max-width:100vw;
	max-height:100vh;
	height:100vh;
	width:100vw;
	overflow:hidden;
	display:flex;
	align-item:center;
	justify-content:center;
	flex-direction: column;
	align-items: center;
	overflow-y:hidden;
	margin:0;
	padding:0;

}
#page2 {
	background:#231f20;
	color:#fff;
	text-align:center;
}
#page2 *{
	z-index:3;
}
#page1 *:not(:after){
	z-index:5;
}

#page2:after {
	background: url(./bg2.jpg) center center no-repeat;
	width: 100%;
	height: 100%;
	content: "";
	display: block;
	position: absolute;
	top: 100vh;
	background-size: cover;
	filter: blur(15px) brightness(20%);
	opacity: 1;
	box-shadow: inset 0px 0px 23px 0px rgb(35, 31, 32);
	z-index:1;
}
#page3 {
	height:unset;
	max-height:unset !important;
	padding:5em 0 !important;
}
#page3:after {
	background: url(./bg.jfif) center center no-repeat;
	width: 100%;
	height: 100%;
	content: "";
	display: block;
	position: absolute;
	top: 200%;
	background-size: cover;

	filter: blur(20px) brightness(100%);
	opacity: 0.1;
	box-shadow: inset 0px 0px 23px 0px rgb(255,255,255);
	z-index:1;
}
#page2 svg {
	width:100%;
}
#page2 path {
	fill:#fff;
	border:2px solid #0e0c0d;
}

 /**
 elemente
  */

#coming_soon {
	width:100%;
}
#coming_soon,#stay_tuned {
	z-index:9;
	font-size:1em;
}
#stay_tuned {
	font-size:initial;
	color:rgba(0,0,0,0.9);
	font-family:arial;
	text-shadow: 1px 1px #FFF;
	padding:0 2em;
	text-align:center;
	margin-top:2em;
}
#notify_me {
	text-align:center;
	display:flex;
	justify-content: center;
	align-items:center;
	margin-top:1em;
	flex-direction:row;
}

#notify_me input,#notify_me button {
	padding:1em 2em;
	border:1px solid rgba(0,0,0,0.7);
	border-radius:0;
	box-shadow:0px 0.4em 3em -1em rgba(255,255,255,0.4);
	font-size:0.8em;
	display:block;
	text-align:center;
	width:100%;
}
#notify_me input {
	font-size:1em;
}
#notify_me.finish input {
	margin-right: -100%;
	transition: all 0.5s ease-out;
}
#notify_me button {
	border-left:0;
	background:rgb(35, 31, 32);
	color:#fff;
	-webkit-transition: all 0.5s 0s ease;
	-moz-transition: all 0.2s 0s ease;
	-o-transition: all 0.2s 0s ease;
	transition: all 0.2s 0s ease;
	font-size:1em;
}
#notify_me button:hover {
	background:rgb(166 144 81);
	border-color:rgb(166 144 81);
	
}
#circle {
	box-shadow:0px 300px 300px 0px rgba(255,0,0,1);
}
#page2 .sub {
	color:rgb(166, 144, 81);
	font-size:2em;
	font-weight:900;
	text-transform: uppercase;
	font-style:italic;
	margin-top:2em;
	display:block;
	font-family: 'Anton', sans-serif;
	text-shadow: 1px 1px rgb(35, 31, 32);

}
#page2 .text {
	color:rgb(255,255,255);
	font-size:2em;
	font-weight:300;
	margin-top:1em;
	display:block;
	font-family: 'Anton', sans-serif;

}
#page2 .text {
	color:rgb(255,255,255);
	font-size:2em;
	font-weight:300;
	margin-top:1em;
	display:block;
	font-family: 'Anton', sans-serif;
	text-align:center;

}
#page2 strong {

	color:#fff;
}
#page2 .text span {
	font-family: 'Titan One', cursive;
}
#page2 .text strong {
	display:block;
	margin-top:1em;
}

#page2 form.contact {
	border:5px solid rgb(166, 144, 81);
	display:inline-block;
	margin-top:1em;
	padding:2em 3em;
	border-radius:5px;
	margin-top:7em;
}
#page2 form .more_infos {
	text-transform:uppercase;
	color:rgb(166, 144, 81);
	background:0;
	border:0;
	font-size:3em;
}
 .coming-soon {
	 opacity: 0;
	 animation: draw;
	 animation-duration: 1s;
	 z-index: 99999 !important;
	 animation-delay: 2s;
}

 #contact-us {
	 z-index: 10;
	 width:33%;
	 display: flex;
	 align-content: center;
	 align-items: center;
	 flex-direction: column;
 }
#contact-form {
	width:100%;
}
#contact-form .input{
	display: flex;
	flex-direction: column;
	width:100%;

 }
#contact-form .field label {
	font-weight:bold;
}
#contact-form .field textarea{
	height:10em;
}
#contact-form .field button{
	width:100%;
	background: rgb(166, 144, 81);
	color:#fff;
}

#coming_soon path,polygon {
	fill:rgb(35, 31, 32) !important;
}

.section{
  min-height: 100vh !important;
}

footer {
	background:rgb(35, 31, 32);
	color:#fff;
	padding:2em;
	text-align:center;
	font-size:1em;
}
footer ul {
	list-style:none;
}

footer ul li{
	display:inline-block;
	padding:2em 1em;
	color:rgba(255,255,255,0.2);
}
footer h1 {
	font-weight:bold;
	font-size:2em;
	margin-bottom:20px;
}
footer h2 {
	font-weight:bold;
	font-size:1.4em;
	margin-bottom:10px;
	margin-top:10px;
	
}

footer #content {
	display:flex;
	align-items:center;
	justify-content: center;
	text-align:left;
}
footer #content div {
	width:50%;
}
footer #content ul {
	display:block;
	list-style:unset;
}
footer #content li:before {
	content:"-";
    display: inline-block;
    padding: 0;
}
footer #content li {
    display: inherit;
    padding: 0;
	color:#fff;
}
#datenschutzLabel {
	align-items:center;
	display:flex;
	align-items:left;
	display:block;
}
#datenschutzLabel div:nth-child(0) {
	flex-shrink:1;
}
#datenschutzLabel div:nth-child(1) {
	flex-grow:1;
	font-size:1em;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #efc705; /* Black background color */
  color: #000; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 100000; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

 @keyframes draw {
	 from {
		 opacity: 0;
	}
	 to {
		 opacity: 1;
	}
}



@media only screen and (max-device-width: 480px) {

	.logo {
		width: 100%;
		max-width: 90%;
	}
	#coming_soon {
		width:100%;
	}	

	#stay_tuned,#page2 .text {
		font-size:3em;
	}
	#notify_me {
		flex-direction: column;
		font-size:1em;
	}
	#page2 .sub {
		font-size:3em;
	}
	#page2 .text span {
		font-size:3em;
	}
	#datenschutzLabel {
		font-size:1em !important;
		align-items:center;
	}
	#contact-us .field input,
	#contact-us .field button,
	#contact-us .field textarea {
		width:80%;
		font-size:3em !important;
		width:100%;
	}
}
@media only screen and (max-device-width: 820px) {
	#stay_tuned,#page2 .text {
		font-size:3em;
	}
	.logo {
		width: 100%;
		max-width: 80%;
	}
	#notify_me {
		flex-direction: column;
		font-size:1em;
	}
	#page2 .sub {
		font-size:2em;
	}
	#page2 .text span {
		font-size:2em;
	}

}@media only screen and (max-device-width: 960px) {
	#page3 {
		height:unset;
		max-height:unset !important;
		padding:2em 5em;
	}
	#contact-us {
		width:80%;
		font-size:2em !important;
	}	
	#contact-us .title,#contact-us .title svg {
		width: 100%;
		height: 10vh;
	}
	#contact-us .field input,
	#contact-us .field button,
	#contact-us .field textarea {
		width:80%;
		font-size:1em !important;
		width:100%;
	}
	#stay_tuned,#page2 .text {
		font-size:2em;
	}
	.logo {
		width: 100%;
		max-width: 80%;
	}
	#notify_me {
		flex-direction: column;
		font-size:1em;
	}
	#page2 .sub {
		font-size:2em;
	}
	#page2 .text span {
		font-size:2em;
	}
	#datenschutzLabel {
		font-size:14px;
		align-items:center;
	}
	#datenschutzLabel input {
		font-size:14px;
		width: 20%;
	}
	footer {
		font-size:1.6em;
		word-break: break-word;
	}
	footer #content div {
		width:90%;
		font-size:1.2em;
	}
}



.content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.content p {
	margin: 0 0 20px;
}
/* Arrow &
 Hover Animation */
#more-arrows {
	width: 75px;
	height: 65px;
}
#more-arrows:hover polygon {
	fill: rgb(35, 31, 32);
	transition: all 0.2s ease-out;
}
#more-arrows:hover polygon.arrow-bottom {
	transform: translateY(-18px);
}
#more-arrows:hover polygon.arrow-top {
	transform: translateY(18px);
}
polygon {
	fill: #fff;
	transition: all 0.2s ease-out;
}
polygon.arrow-middle {
	opacity: 0.75;
}
polygon.arrow-top {
	opacity: 0.5;
}