* {margin: 0; padding: 0; user-select: none;}

html, body {height: 100vh; overflow: hidden; height: -webkit-fill-available;}

body {
	color: #E6E6E6; 
	margin: 0px;
	font-family: "Noto Sans";
	 background-repeat: repeat;
	 background-image:  linear-gradient(180deg, #CF9899 0%, #DAB9B4 50%);
	 
	 overflow: hidden;
}

/* body[data-layer="one"] {}
body[data-layer="two"] {} */
body[data-layer="one"] {background-image: linear-gradient(180deg, #95a699 0%, #B0BDB9 50%);}

body[data-layer="two"] {}
body[data-layer="three"] {background-image: linear-gradient(180deg, #95a699 0%, #B0BDB9 50%);}
body[data-layer="four"] {background-image: #bc9b9a;}
body[data-layer="five"] {background-image: linear-gradient(180deg, #95a699 0%, #B0BDB9 50%);}
body[data-layer="six"] {background-image:  #bc9b9a;}
body[data-layer="seven"] {background-image:  linear-gradient(180deg, #95a699 0%, #B0BDB9 50%);}
body[data-layer="eight"] {background-image:  #bc9b9a;}
body[data-layer="nine"] {background-image:  linear-gradient(180deg, #95a699 0%, #B0BDB9 50%);}
body[data-layer="ten"] {background-image:  #bc9b9a;}


#container {
	overflow-y: scroll;
	height: 100vh;
	height: -webkit-fill-available;
	scroll-snap-type: y mandatory;
}

h3 {
	font-family: "Noto Sans";
	font-size: 1.5rem;
	margin: -15px auto 0;
	text-align: center;
	opacity: 0.6;
	width: 50%;
}

ul {
	margin-bottom: 20px;
}

ul li {
	color: #3D5261;
	font-family: 'Libre Franklin', sans-serif;
	line-height: 2rem;
	font-Size: 1rem;
	background: #FFF;
	margin-bottom: 8px;
	border-radius: 30px;
	display: inline-block;
	padding: 3px 13px;
	list-style: none;
	margin-left: -2px;
	margin-right: 6px;
}

.button {
	background: #3D5261;
	border: 0px solid #FFF;
	color: #FFF;
	padding: 7px 30px;
	border-radius: 45px;
	text-decoration: none;
	margin: 10px 0 0;
	display: inline-table;
	text-align: center;
	line-height: 2rem;
	font-weight: 300;
	font-size: 1.2rem;
	letter-spacing: 0.01rem;
	font-family: 'Libre Franklin', sans-serif;
	cursor: pointer;
	transition: background 2s;
}

.button:hover {
	background: #FFF;
	color: #4c5575;
	border: 0px solid #FFF;
}

.flex {display: flex; justify-content: space-between; flex-wrap: wrap;}

.wavy-letters {
	animation: wavy 1s ease-in-out infinite alternate both;
	display: inline-block;
}

h3.wavyText {
	/* text-shadow: 6px 5px 6px rgb(0 0 0 / 30%); */
	position: relative;
	text-align: left;
	top: 90px;
	left: 10vw;
	font-size: 2rem;
	font-weight: 800;
	color: #000000;
	width: auto;
	margin: 0;
	width: 70vw;
	font-family: Roboto;
	text-transform: uppercase;
	letter-spacing: 1px;
}

h2.productName {
	position: fixed;
	top: 70px;
	left: 70px;	z-index: 1;
	font-size: 3.5rem;
	color: #5E5E5E;
}


/* - - - - MODEL VIEWER - - - - */

model-viewer {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	animation: fadeIn ease 4s;
}

model-viewer#reveal {
	--poster-color: transparent;
  }
  
  model-viewer::part(default-progress-mask) {
	  display: none;
  }

.Hotspot {
	--border-width: 3px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.1rem;
	color: #3D515F;
	background: white;
	padding: 7px 15px;
	border-radius: 20px;
	border: none;
}

main model-viewer .annotation {background-color: rgba(255, 255, 255, 0.8); position: absolute; transform: translate(10px, 10px); border-radius: 5px; padding: 15px 15px 10px 15px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); font-size: 0.8rem; width: 120px;}
model-viewer #annotation .ordernow {display: block; background: red; border-radius: 5px; padding: 5px 10px; color: #FFF;}
/* This keeps child nodes hidden while the element loads */
main model-viewer :not(:defined) > * {display: none;}		
				

.ar-button {
	background: #3D5261 url(../icons/iconArkitGlyph.svg) 6% 50% no-repeat;
	background-size: 20px 20px;
	color: #fff;
	cursor: pointer;
	border-radius: 80px;
	display: inline-block;
	padding: 10px 12px 9px 40px;
	font-weight: 500;
	box-shadow: 0 0 8px rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,.25);
	position: absolute;
	left: 50%;
	top: 20px;
	transform: translate3d(-50%, 0, 0);
	z-index: 100;
	font-size: 13px;
	border: none;
	display:none;
}
.ar-button:hover {
	background-color: #888888;
	color: #FFF;
}

.ar-button.to-ar {
	}

.zwergperten-logo {
	position: absolute;
	left: 19vw;
	top: 8vw;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 18vw;
	height: auto;
	 z-index:2000000000;
}


/* - - - - CONFIGURATORS - - - - */	

.group {
	padding: 0 3px;
	border-radius: 100px;
	margin-bottom: 7px;
}
.group button:first-child {margin-top: 5px;}
.group button:last-child {margin-bottom: 5px;}	  
	
.group .subgroup {
	padding: 5px;
	background: #FFF40;
	border-radius: 10px;
	width: 35px;
	left: 5px;
	position: relative;
	border-radius: 30px;
}	

.group .subgroup button {
	width: 25px;
	height: 25px;
	margin: 2px 5px;
}
	
.color-configurator {
	position: absolute;
	top: 50%;
	transform: translateY(-50%); 		
	left: 0vw;
	width: 60px;
	text-align: center;
	z-index: 10;
	animation: fadeIn ease 6s;
	opacity: 1;
}

.page-stepper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%); 		
	right: 6vw;
	width: 60px;
	text-align: center;
	z-index: 10;
	animation: fadeIn ease 6s;
	opacity: 1;		
}

.color-configurator button, .page-stepper button {
	width: 43px;
	height: 43px;
	cursor: pointer;
	margin: 15px 5px;
	box-shadow: 0 0 10px #fff;
	border: 3px solid #fff;
	border-radius: 100%;	
	transition: all .1s ease-in-out;
	background-color: #FFF;
	background-repeat: no-repeat;
	background-position: center;
}

.color-configurator button:hover, .page-stepper button:hover {
	border-color: #AAA;
	transform: scale(1);	
	border: 0px solid rgba(0, 0, 0, 0.2);
} 		

.color-configurator button {margin: 7px 0;}
.color-configurator button:hover {border-color: #AAA; transform: scale(1);} 	
.color-configurator button:hover, .page-stepper button:hover  {border-color: #FFF; transform: scale(1.2);}

button:hover,
button:focus {outline:0; animation: pulse 0.8s; box-shadow: 0 0 0 0.2rem #5e5e5e26;}

button.amesh {background: rgb(49,79,115); background-image: url(../display/mesh-fabric.svg), linear-gradient(50deg, #313544 0%, #545f70 100%);
	background-size: 25%;}
button.amesh:hover::after {content: "Anthracite Mesh";}

button.pmesh {background: #000; background: 
	url(../display/mesh-fabric.svg),
	linear-gradient(50deg, #6F7C84 0%, #B5BDC1 100%);
	background-size: 25%;} 
button.pmesh:hover::after {content: "Peak Mesh";}

button.fbc {background: #f9f9f9; background: linear-gradient(50deg, #000000 0%, #434347 100%);}
button.fbc:hover::after {content: "Fresh Black Cab";}
button.pcib {background: #fde3d7; background: linear-gradient(50deg, #201F26 0%, #555555 100%);} 
button.pcib:hover::after {content: "Premium Car Interior Black";}
button.mm {background: #96cde0; background: linear-gradient(50deg, #2E2C33 0%, #715b6b 100%);} 
button.mm:hover::after {content: "Metallic Mélange";}
button.sgm {background: #96cde0; background: linear-gradient(50deg, #687B7A 0%, #92A1A0 100%);} 
button.sgm:hover::after {content: "Sea Green Mélange";}
button.cm {background: #96cde0; background: linear-gradient(50deg, #4A576A 0%, #6D7789 100%);} 
button.cm:hover::after {content: "Cloud Mélange";}


.page-stepper button  {
	border-color: #FFF;
	font-size: 1rem;
	font-weight: 300;
	background: linear-gradient(45deg, #3D5261 0%, #3D525F 100%);
	color: #FFF;
	position: relative;
	z-index: 10;
	font-family: 'Libre Franklin', sans-serif;	
}
	
.page-stepper .group:after  {
	width: 3px;
	display: block;
	background: rgba(255, 255, 255, 0.7);
	margin-left: 26px;
	content: "";
	position: absolute;
	z-index: 0;
	height: 82%;
	top: 16%;
}
	
.group button.one::after {content: "Der Stretch"; right: 70px; left: auto; background: none; box-shadow: none;}	
.group button.two::after {content: "Funktionen"; right: 70px; left: auto; background: none; box-shadow: none;}	
.group button.three::after {content: "Farben & Bezüge"; right: 70px; left: auto; background: none; box-shadow: none;}	

.group button.four::after {content: "Einbau"; right: 70px; left: auto; background: none; box-shadow: none;}	
.group button.five::after {content: "SIP+ & Beinfreiheit"; right: 70px; left: auto; background: none; box-shadow: none;}	
.group button.six::after {content: "Stützfuß & Gurt"; right: 70px; left: auto; background: none; box-shadow: none;}	
.group button.seven::after {content: "Haltegurte"; right: 70px; left: auto; background: none; box-shadow: none;}	
.group button.eight::after {content: "Einstellung"; right: 70px; left: auto; background: none; box-shadow: none;}	

.group button.nine::after {content: "Stretch in AR"; right: 70px; left: auto; background: none; box-shadow: none;}	
.group button.ten::after {content: "Händler finden"; right: 70px; left: auto; background: none; box-shadow: none;}	

.group button:after {display: none;opacity: 0;}
.group button:hover::after {
	display: block;
	position: absolute;
	white-space: nowrap;
	font-weight: 400;
	right: 60px;
	color: #3D5261;
	box-shadow: none;
	z-index: 0;
	font-size: 0.9rem;
	top: 5px;
	opacity: 1;
	padding: 5px 10px;
	background: #FFF;
	border-radius: 5px;
	display: inline-table;
} 

.color-configurator .group button:hover::after {left: 70px;}


@keyframes fadeIn {
	0% { opacity: 0; }
	 100% { opacity: 1; }
}	
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 #AAA; }
}


@keyframes animate {
	20% { background: #fff; }
	 50% { background: #DDE1E6;}
	 80% {background: #fff; }	 
}


	/* - - - - - - - - - - - ORBITS & LAYERS - - - - - - - - */	

div.orbit {position: absolute; top: 50vh; height: 100px;}

	.layer {height: 100vh; scroll-snap-align: start; position: relative; animation: blur 1.5s; height: -webkit-fill-available;}
	.layer circle, .layer path {stroke: #4c5575;}
	

	/* - - - - - - - - - - - ZERO - - - - - - - - */	

.page-stepper button.zero {
	margin-top: 5px;
	width: 100px;
	margin-left: -22px;
	border: none;
	background: none;
	font-size: 1.3rem;
	letter-spacing: 1px;
	box-shadow: none;
}

	.zero, .ten {
		/* background-image: url(display/ZP-landscapeWhite.svg), linear-gradient(
		135deg
		, #7de9a8 0%, #146d8f 100%); */
		z-index: 10000;
		width: 100%;
		display: block;
		background-position: -20px 102%;
		background-size: 140%;
		background-repeat: no-repeat;
		z-index: 1;
	}	
	
	.zero h1 {
		font-size: 6rem;
		color: #FFF;
	}
	
	.zero .besafe-logo {
		width: 220px;
		margin: 30px 0 30px 2px;
		display: block;
	}

	.zero .stretch-logo {
		margin-bottom: 40px;
	}
	
	.zero .window {
		top: 54%;
	}
	
	.zero .window p {
		font-weight: 600;
		font-family: 'Libre Franklin', sans-serif;
		line-height: 3.4rem;
		letter-spacing: 0.5px;
		font-size: 2.5rem;
		margin-bottom: 40px;
	}
	
	.zero p.byarkid {
		font-size: 0.8rem;
		color: #FFF;
		position: absolute;
		top: 20px;
		right: 20px;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-family: Roboto;
		font-weight: 700;
		width: 85px;
		text-align: center;
	}

	.zero p.byarkid a:link, .zero p.byarkid a:visited {
		color: #FFF !important;
		text-decoration: none;
	}

  .zero p.byarkid img {
	 width: 60px;
	 margin-top: 10px;
 }
	
	.button {
		-webkit-animation: buttonpulse 2.5s infinite;
	}
	
@keyframes buttonpulse {
  0% {
	transform: scale(.9);
  }
  70% {
	transform: scale(1);
	box-shadow: 0 0 0 50px rgba(#5a99d4, 0);
  }
	100% {
	transform: scale(.9);
	box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
  }
}

/* - - - - - - - - - - - 1 - - - - - - - - */

	.one  {	background-image: linear-gradient( 135deg, rgb(255 227 208) 0%, rgb(255 178 102 / 0%) 38%);}
	.one p {font-size: 1.1rem; color: #fff; text-align: center;}
	.one:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-size: 100%; z-index: -2; content: " ";/*! right: 50px; */}	
	
/* - - - - - - - - - - - 2 - - - - - - - - */	
	
	
	.two  {	background-image: linear-gradient( 135deg, rgb(255 227 208) 0%, rgb(255 178 102 / 0%) 38%);}
	.two:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-size: 100%; z-index: -2; content: " ";}			
	.two .window.right {
	}
	
	
/* - - - - - - - - - - - 3 - - - - - - - - */	
	
	.three  {	background-image: linear-gradient( 135deg, rgb(255 227 208) 0%, rgb(255 178 102 / 0%) 38%);}
	.three:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-size: 100%; z-index: -2; content: " ";}		
		.three .window.left {
			padding-left: 15vw;
		}
		
		body[data-layer="three"] model-viewer {
			left: 13vw;
		}

/* - - - - - - - - - - - 4 - - - - - - - - */	

.four {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCI+CjxmaWx0ZXIgaWQ9Im4iIHg9IjAiIHk9IjAiPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC43IiBudW1PY3RhdmVzPSIxMCIgc3RpdGNoVGlsZXM9InN0aXRjaCI+PC9mZVR1cmJ1bGVuY2U+CjwvZmlsdGVyPgo8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzAwMCI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIwLjQiPjwvcmVjdD4KPC9zdmc+");
background-image: linear-gradient( 
	135deg
	 , rgb(247 232 191) 0%, rgb(255 178 102 / 0%) 38%);
	}
	
	.four  {	background-image: linear-gradient( 135deg, rgb(255 227 208) 0%, rgb(255 178 102 / 0%) 38%);}
	.four:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%;  text-align: center; background-size: 100%; z-index: -2; content: " ";}		

/* - - - - - - - - - - - 5 - - - - - - - - */	

	.five {background-image: linear-gradient( 135deg, rgb(255 227 208) 0%, rgb(255 178 102 / 0%) 38%);}
	.five:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-size: 100%; z-index: -2; content: " ";}


/* - - - - - - - - - - - 6 - - - - - - - - */	

	.six {background-image: linear-gradient( 135deg, rgb(255 227 208) 0%, rgb(255 178 102 / 0%) 38%);}
	.six:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-size: 100%; z-index: -2; content: " ";}

/* - - - - - - - - - - - 7 - - - - - - - - */

.seven {background-image: linear-gradient( 135deg, rgb(255 227 208) 0%, rgb(255 178 102 / 0%) 38%);}
.seven:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-size: 100%; z-index: -2; content: " ";}

/* - - - - - - - - - - - 8 - - - - - - - - */

.eight {background-image: linear-gradient( 135deg, rgb(255 227 208) 0%, rgb(255 178 102 / 0%) 38%);}
.eight:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-size: 100%; z-index: -2; content: " ";}

/* - - - - - - - - - - - 9 - - - - - - - - */

.nine {background-image: linear-gradient( 135deg, rgb(255 227 208) 0%, rgb(255 178 102 / 0%) 38%);}
.nine .window.left {width: 48vw;}
.nine .window a {
	color: #3D5261;
}
.nine .desktop img {
	width: 300px;
}
.nine .window a.experience strong {
	background: url(../icons/iconArkitGlyph-blue.svg);
	padding-left: 30px;
	background-size: 19px;
	background-repeat: no-repeat;
	background-position: 2px 0px;
}
.nine .window .experience {text-decoration-color: #3D5261; text-decoration-thickness: 0.21rem; text-underline-offset: 3px; display: block;}
.nine .mobile  {display: none;}

/* - - - - - - - - - - - TEN - - - - - - - - */	

.ten {background-image: linear-gradient( 135deg, rgb(255 227 208) 0%, rgb(255 178 102 / 0%) 38%);}
.ten .flex {display: flex !important;}

.ten h2, .ten p {width: 46vw;}

.ten .zwergperten-logo {
	position: relative;
	display: block;
	left: auto;
	transform: inherit;
	top: auto;
	margin-top: 10vh;
}

.ten .window {
	padding: 0 14vw 0 10vw;
}

.ten .flex div {
	width: 46%;
	}

.ten ul li {background: none; margin-bottom: 3px; padding: 3px 2px;}
/* .ten ul li:first-child {
	text-transform: uppercase;
	font-weight: 900;
	border-bottom: 3px solid #FFF;
	border-radius: 0;
	display: block;
	padding-bottom: 0px;
	text-indent: 10px;
	margin-bottom: 19px;
	color: #FFF;
} */

.ten summary {
	text-transform: uppercase;
	font-weight: 900;
	border-bottom: 3px solid #FFF;
	border-radius: 0;
	display: block;
	padding-bottom: 0px;
	text-indent: 10px;
	margin-bottom: 22px;
	color: #FFF;
	line-height: 2rem;
	font-Size: 1rem;
	font-family: 'Libre Franklin', sans-serif;
}

.ten ul li a:link, .ten ul li a:visited {
	background: #3D5261;
	color: #FFF;
	font-family: 'Libre Franklin', sans-serif;
	line-height: 2rem;
	font-Size: 0.9rem;
	margin-bottom: 0px;
	border-radius: 30px;
	display: inline-block;
	padding: 0px 13px;
	list-style: none;
	text-decoration: none;
}

.ten ul li a:hover {
	background: #FFF;
	color: #3D5261;
}

summary {
	cursor: pointer;
}

summary:hover {
	color: #3D5261;
	border-color: #3D5261;
}

details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

.ten .flexa.onlybesafepage {
	display: flex;
	justify-content: space-between;
}

.ten .flexa.onlybesafepage div {
	width: 29%;
	align-self: end;
}

.ten .window.onlybesafepage {
	width: 75%;
}

.ten .flexa.onlybesafepage p, .ten .flexa.onlybesafepage h2 {
	width: 100%;
}

 .ten .flexa.onlybesafepage h2 {
	line-height: 2.5rem;
	margin-top: 80px;
}

@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}


@keyframes wavy { 0% { transform: translate3D(0px, -4px, 0.1px); } 100% { transform: translate3D(0px, 4px, 0.1px); } }
@keyframes blur {  0% { filter: blur(4px); } 100% { filter: blur(0px); } }

.window {
	background: transparent;
	height: auto;
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	padding: 0 10vw 0 10vw; 
 }	
 .phone {margin-left: -10vw;}

.window h2 {color: #FFF; top: 0; margin-bottom: 30px; text-align: left; font-weight: 700; font-family: 'Libre Franklin', sans-serif; line-height: 3.5rem; letter-spacing: 0.5px; font-size: 2.7rem;}
.window p {line-height: 2rem; color: #FFF; text-align: left; margin-bottom: 20px; font-family: 'Libre Franklin', sans-serif; font-Size: 1.2rem; font-weight: 300;}

.window h2:after {border-bottom: 3px solid #000; content: " ";}

.window.left {width: 26vw;}
.window.right {padding: 0; right: 18vw; width: 27vw;}


.window .flex {justify-content: space-between; display: flex !important; flex-wrap: wrap;}
.window .flex p {width: 24%;}
		
.scrollbutton {
	width: 55px;
	height: 55px;
	position: absolute;
	bottom: 50px;
	right: 25%;
	left: 50%;
	margin-left: -30px;
	border: none;
	border-radius: 100%;
	background: transparent;
	background: url(https://arkid.app/_clients/ergobaby/icons/arrowDown2.svg) center center no-repeat;
	cursor: pointer;
	opacity: 0.7;
}	

.scrollbutton:hover {opacity: 1;}

.scrollbutton.top {
	top: 40px;
	background: url(https://arkid.app/_clients/ergobaby/icons/arrowUp2.svg) center center no-repeat;
	z-index:100;
}


/* Audio */

.audio {margin: 70px auto 60px; text-align: center;  line-height: 2.5rem;}


/* - - - - - - Made With ARkid - - - - - - */

.madewith {font-family: Helvetica; font-size: 0.7rem;  line-height: 1.2rem; position: relative; display: block; z-index: 100; text-align: center; letter-spacing: 1px;  position: fixed; right: 100px; bottom: 80px;}
	.arkidlogo {display: block; margin: 10px auto 10px; width: 65px;}
	
	.madewith a:link, 	.madewith a:visited {display: block; margin-top: 0px; font-weight: 400; text-transform: uppercase; color: rgb(77 91 109 / 0.7); text-decoration: none;}
	.madewith a:hover {color: rgb(77 91 109 / 1);}		


/* - - - - - - - - - Page Loader - - - - - - - -*/

.loader-wrapper {
  --line-width: 5px;
  --curtain-color: #3D5264;
  --outer-line-color: rgba(255, 255, 255, 0.8);
  --middle-line-color: rgba(255, 255, 255, 0.5);
  --inner-line-color: rgba(255, 255, 255, 0.2);
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1000000000;
}

.loader {
  display:block;
  position: relative;
  top:50%;
  left:50%;
/*   transform: translate(-50%, -50%); */
  width:150px;
  height:150px;
  margin:-75px 0 0 -75px; 
  border:var(--line-width) solid transparent;
  border-top-color: var(--outer-line-color);
  border-radius:100%;
  -webkit-animation: spin 2s linear infinite;
		  animation: spin 2s linear infinite;
  z-index:1001;
}

.loader:before {
  content:"";
  position: absolute;
  top:4px;
  left:4px;
  right:4px;
  bottom:4px;
  border:var(--line-width) solid transparent;
  border-top-color: var(--inner-line-color);
  border-radius:100%;
  -webkit-animation: spin 3s linear infinite;
		  animation: spin 3s linear infinite;
}

.loader:after {
  content:"";
  position: absolute;
  top:14px;
  left:14px;
  right:14px;
  bottom:14px;
  border:var(--line-width) solid transparent;
  border-top-color: var(--middle-line-color);
  border-radius:100%;
  -webkit-animation: spin 1.5s linear infinite;
		  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0%   { 
	-webkit-transform: rotate(0deg); 
	  -ms-transform: rotate(0deg); 
		  transform: rotate(0deg);
  }
  100% { 
	-webkit-transform: rotate(360deg); 
	  -ms-transform: rotate(360deg); 
		  transform: rotate(360deg);
  }
}
@keyframes spin {
  0%   { 
	-webkit-transform: rotate(0deg); 
	  -ms-transform: rotate(0deg); 
		  transform: rotate(0deg);
  }
  100% { 
	-webkit-transform: rotate(360deg); 
	  -ms-transform: rotate(360deg); 
		  transform: rotate(360deg);
  }
}

.loader-wrapper .loader-section {
  position:fixed;
  top:0;
  background: #3D5264;
  width:51%;
  height:100%;
  z-index:1000;
}

.loader-wrapper .loader-section.section-left {
  left:0
}
.loader-wrapper .loader-section.section-right {
  right:0;
}

/*Loaded Styles */ 

.loaded .loader-wrapper .loader-section.section-left {
  transform: translateX(-100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .loader-wrapper .loader-section.section-right {
  transform: translateX(100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .loader {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.loaded .loader-wrapper {
  visibility: hidden;
  transform:translateY(-100%);
  transition: all .3s 1s ease-out;
}


/*- - - - - - FadeIn Color Buttons - - - - - - */

.color-configurator {
	opacity: 0;
	transition: opacity 2s;
	background: linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
	background-size: 400% 400%;
	animation: color-gradient 3s ease infinite;
	border-radius: 40px;
}

.color-configurator .group {
	margin-top: 7px;
}

body[data-layer="three"] .color-configurator {
	opacity: 1;
	left: 7vw;
	transition: all 2s;
}

@keyframes color-gradient {
	0% {
		background-position: 50% 0%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 50% 0%;
	}
}

/*- - - - - - Active State of Pagestepper Buttons - - - - - - */

body[data-layer="one"] button.one,
body[data-layer="two"] button.two,
body[data-layer="three"] button.three,
body[data-layer="four"] button.four,
body[data-layer="five"] button.five,
body[data-layer="six"] button.six,
body[data-layer="seven"] button.seven,
body[data-layer="eight"] button.eight,
body[data-layer="nine"] button.nine,
body[data-layer="ten"] button.ten {
	background: #FFF !important;
	color: #3D5261 !important;
}

.Hotspot {opacity: 0;}

body[data-layer="five"] #hotspotOne, body[data-layer="five"] #hotspotTwo {
	opacity: 1;
}

body[data-layer="six"] #hotspotThree, body[data-layer="six"] #hotspotFour, body[data-layer="six"] #hotspotFive {
	opacity: 1;
}

body[data-layer="seven"] #hotspotSix {
	opacity: 1;
}

body[data-layer="eight"] #hotspotSeven, body[data-layer="eight"] #hotspotEight, body[data-layer="eight"] #hotspotNine, body[data-layer="eight"] #hotspotTen {
	opacity: 1;
}


.copyright {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.9rem;
	color: #856364;
	position: absolute;
	bottom: 50px;
	left: auto;
	right: 7vw;
}

/* .window, .window.left, .window.right {opacity: 0; transition: opacity 2s;}
body[data-layer="one"] .window, body[data-layer="two"] .window, body[data-layer="three"] .window {	opacity: 1; transition: opacity 2s;} */


@keyframes moveGradient {
  50% {
	background-position: 100% 50%;
  }
}


@media only screen and (min-width: 801px) and (max-width: 1599px)  {
	
	h3.wavyText {
		font-size: 1.5rem;
	}
	
	.window {
		width: 28vw;
	}
	
	.window h2 {
		line-height: 3rem;
		letter-spacing: 0.5px;
		font-size: 2.3rem;
	}
	
	.window p {
		line-height: 1.8rem;
		font-Size: 1.1rem;
	}
	
	.zero .window {
		width: 35vw;
	}
	
	.zero .window p {
		font-weight: 700;
		font-family: 'Libre Franklin', sans-serif;
		line-height: 3rem;
		letter-spacing: 0.5px;
		font-size: 2.2rem;
	}
	
	.six .window {width: 28vw;}
	
	.nine .desktop img {
		margin-bottom: -45px;
		margin-top: 0px;
	}
	
}

@media only screen and (min-width: 801px) and (max-width: 1350px)  {

	.window {
		width: 30vw;
	}
	
	.window h2 {
		line-height: 2.6rem;
		letter-spacing: 0.5px;
		font-size: 2rem;
		margin-bottom: 20px;
	}
	
	.window p {
		line-height: 1.5rem;
		font-Size: 1rem;
	}
	
	.zero .stretch-logo {
		width: 320px;
	}
	
	.zero .window p {
		font-size: 2rem;
		margin-bottom: 10px;
	}
	
	.two li {
		font-Size: 0.95rem;
	}
	
	.three .window.left {
		padding-left: 16vw;
	}
	
}


@media screen and (max-width: 800px) {
		
	#container {min-height: 100vh; /* scroll-snap-type: y proximity; */}
	
	div.orbit {height: 0px;}
	
	.zero p.byarkid {
		font-size: 0.7rem;
		letter-spacing: 0;
		width: 60px;
		}
	
	  .zero p.byarkid img {width: 45px; margin-top: 8px;}
	
	
	.layer {
		min-height: 100vh; /* min-height: 130vh; */
		height: auto;
		scroll-snap-align: none;
	}
	
	model-viewer {
		margin-top: 0vh;
		height: 50vh;
	}
	
	ul li {
		font-size: 0.82rem;
		padding: 3px 10px;
	}
	
	.two .window ul li {
		padding: 0px 13px;
	}
	
	.scrollbutton {
		bottom: 30px;
		width: 36px;
		height: 36px;
		display: none;
	}
	
	.scrollbutton.top {
		top: 30px;
	}
	
	.button {
		padding: 5px 20px;
		font-size: 1rem;
	}
	
	.zwergperten-logo {
		left: 6vw;
		top: 6vw;
		-webkit-transform: initial;
		transform: initial;
		width: 35vw;
	}
	
	.zero .window {
		top: 50%;
		width: 30vw;
	}
	
	.zero .besafe-logo {
		width: 35vw;
	}
	
	.zero .stretch-logo {
		width: 60vw;
	}
	
	.color-configurator {
		left: -20vw;
		margin-top: 60px;
	}	
	
	.page-stepper {
		right: 18px;
	}
	.color-configurator button, .page-stepper button {
		width: 33px;
		height: 33px;
		cursor: pointer;
		margin: 5px 0 5px 0px;
		font-size: 0.9rem;
		border: 2px solid #fff;
	}
	
	.page-stepper .group button:last-child {
		margin-left: 11px;
	}
	
	.page-stepper .subgroup button:last-child {
		margin-left: 4px;
	}
	
	h3.wavyText {
		top: 35px;
		left: 6vw;
		font-size: 1rem;
		letter-spacing: 0;
		width: 75vw;
	}
	
	.window {
		top: 45vh;
		width: 70vw;
		transform: inherit;
	}
	
	.window button {display: none;}
	.window .color-configurator button {display: block;}
	
	.window.left {
		padding: 0 0 0 6vw;
		width: 70vw;
	}
	.phone {margin-left: -6vw;}
	
	.window.right {
		padding: 0 0 0 6vw;
		right: auto;
		width: 70vw;
	}
	
	.window h2 {
		line-height: 2.2rem;
		font-size: 1.4rem;
		margin-bottom: 15px;
	}
	
	.window p {
		line-height: 1.6rem;
		font-Size: 1rem;
		margin-bottom: 15px;
	}

	
	.page-stepper button.zero {
		margin-left: -21px;
		font-size: 1rem;
	}
	
	.group button:hover::after {
		position: absolute;
		right: 40px;
		top: 1px;
		opacity: 1;
		font-size: 0.9rem;
		padding: 5px 10px;
		background: rgba(255, 255, 255, 0.9);
		z-index: 100000000000;
		letter-spacing: 1px;
	} 
	
	/* Segments */

	body[data-layer="zero"] {
		
	}
	
	body[data-layer="three"] {background-image: linear-gradient(180deg, #95a699 0%, #B0BDB9 50%);}
	body[data-layer="three"] .color-configurator {
		opacity: 1;
		left: 0vw;
		transition: all 2s;
		width: fit-content;
		display: block;
		position: relative;
		margin-top: 60px;
	}
	
	body[data-layer="three"] model-viewer {
		left: 0vw;
	}
	
	.color-configurator .group {
		margin-top: 7px;
		flex-wrap: nowrap;
		display: flex;
		justify-content: space-between;
		width: 68vw;
	}
	.color-configurator button {margin: 5px 1% 5px 1%;}
	.color-configurator button:hover, .page-stepper button:hover {	transform: scale(1.0);}
	.color-configurator .group button:hover::after {left: 60px; animation: fadeAway 2s; animation-iteration-count: 1; opacity: 1;}
	
	@keyframes fadeAway {
	 0% {
		 opacity: 1;
	 }
	  100% {
		opacity: 0;
	  }
	}
	
	body[data-layer="four"] {background-image: #bc9b9a;}
	body[data-layer="five"] {background-image: linear-gradient(180deg, #95a699 0%, #B0BDB9 50%);}
	body[data-layer="six"] {background-image:  #bc9b9a;}
	body[data-layer="seven"] {background-image:  linear-gradient(180deg, #95a699 0%, #B0BDB9 50%);}
	body[data-layer="eight"] {background-image:  #bc9b9a;}
	body[data-layer="nine"] {background-image:  linear-gradient(180deg, #95a699 0%, #B0BDB9 50%);}
	body[data-layer="ten"] {background-image:  #bc9b9a;}
	
	body[data-layer="nine"] .button.ar-button {
		  display: block;
		  z-index: 1000000000000;
		  position: absolute;
		  top: 40vh;
		left: 0;
		line-height: 1.7rem;
		display: table-cell;
		padding: 10px 30px 10px 50px;
		width: auto;
		color: #FFF;
		font-size: 0.9rem;
	  }
	  
	  body[data-layer="nine"] button .haendler {
		  margin-top: 200px;
	  }
	
	.zero .window p {
		line-height: 1.8rem;
		font-Size: 1.4rem;
		text-transform: none;
		margin-bottom: 0px;
	}
	
	
	
	.three 	model-viewer {
		margin-top: -170px;
		margin-left: -90px;
	}
	
	.three .window.left {
		padding: 0 0 0 6vw;
	}
	
	.nine .window.left {
		width: 73vw;
	}
	
	.nine .desktop  {display: none;}
	.nine .mobile  {display: block;}
	
	.ten .flexa {
		display: block !important;
		padding-bottom: 150px;
	}
	
	.ten .flexa.onlybesafepage {
		display: block;
	}
	
	.ten .flexa.onlybesafepage div {
		width: 100%;
	}
	
	.ten .flexa.onlybesafepage h2 {
		margin-top: 50px;
		line-height: 1.9rem;
		font-size: 1.1rem !important;
	}
	
	.ten .window {
		padding-bottom: 100px;
		padding: 0 14vw 0 6vw;
	}
	
	.ten h2, .ten p {
		width: 100%;
	}
	
	.ten .zwergperten-logo{
	width: 45vw;	
	}

	.ten ul li {
		margin-right: 3px;
	}
	
	.ten .zwergperten-logo {
		margin-bottom: 50px;
	}
	
	.ten .flex div {
		width: 100%;
	}
	
	.Hotspot {
		font-size: 0.85rem;
		background: #ffffff52;
		padding: 5px 10px;
		color: #FFF;
	}
	
	#hotspotNine {display: none;}
	
	/* Last Fixes for Mobile - Overwriting Above */
	
	.layer {
			background-image: linear-gradient( 155deg, rgb(255 227 208) 0%, rgb(255 178 102 / 0%) 28%);
	}
	
	.layer {
		min-height: auto;
		height: auto;
		display: block;
		padding-top: 320px;
		padding-bottom: 60px;
	}
	
	h3.wavyText {
		top: -290px;
		left: 6vw;
		font-size: 1rem;
		letter-spacing: 0;
		width: 75vw;
	}
	
	.window {
		transform: inherit;
		position: unset;
		top: 300px;
		display: block;
	}
	
	.color-configurator .group button:hover::after {
		/* left: 60px; */
		left: -20vw;
		position: absolute;
		top: -50px;
	}
	
	.copyright {
		font-size: 0.85rem;
		bottom: 60px;
		text-align: center;
		left: auto;
		right: auto;
		width: 100%;
	}
	
}