/* ========= 360 Viewer ========= */
.viewer-360{
	position: relative;
}

/* ========= 360 Viewer > Preloader ========= */
.viewer-360-preloader{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	width: 140px;
	height: 140px;
}
.viewer-360-preloader__circle{
	position: absolute;
	display: flex;
   align-items: center;
   justify-content: center;
	width: 48%;
	height: 48%;
	background: #fff;
	border-radius: 100%;
	
}
.viewer-360-preloader__text{
	font-size: 18px;
   font-weight: 800;
}

/* Hide Pace.js Preloader */
.pace{
	display: none !important;
}

/* SVG Preloader */
svg.preloader{
  height: auto;
  max-width: 100%;
  padding: 1em;
  transform: rotate(-90deg);
  width: 100%;
}
svg.preloader circle{
  fill: rgba(0,0,0,0);
  stroke: #AB2626;
  stroke-dashoffset: 219.91148575129; 
  stroke-width: 7;
}
svg.preloader circle.preloader__incomplete{ 
	stroke: #fff;
	stroke-width: 10;
}
svg.preloader circle.preloader__complete{ 
	stroke-dasharray: 219.91148575129; 
}



/* ========= 360 Viewer > Model ========= */
.viewer-360-model{
	position: relative;
	width: 100vw;
	max-height: 100vh;
	opacity: 0;
	visibility: hidden;
	background: #eee;
}
.viewer-360-model.active{
	opacity: 1;
	visibility: visible;
}
.viewer-360-model:before{
	content: '';
	display: block;
	position: relative;
	padding-top: 53%;
}
.viewer-360-model__image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: ew-resize;
	overflow: hidden;
}
.viewer-360-model__image img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	object-fit: containt;
	object-position: center;
}



/* ========= 360 Viewer > Navigation ========= */
.viewer-360-nav{
	position: absolute;
	display: flex;
	flex-direction: column;
	width: 100%;
   bottom: 20px;
   left: 0;
   z-index: 300;
}
.viewer-360-nav .container{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.viewer-360-nav__inner{
	display: flex;
	flex-direction: column;
	font-size: 16px;
}
.viewer-360-nav__active{
	margin: 0 0 1em 0;
	text-transform: uppercase;
   font-size: 1em;
   font-weight: bold;
   color: #000;
}
.viewer-360-nav__colors{
	display: flex;
	font-size: 1em;
}
.viewer-360-nav__item{
	display: block;
	width: 4.375em;
	height: 1.8em;
	border-bottom: 0 !important;
}
.viewer-360-nav__item:not(:last-child){
	margin: 0 1.25em 0 0;
}
.viewer-360-nav__item img{
	width: 100%;
	height: 100%;
	transition: 0.5s ease;
}
.viewer-360-nav__item.active img{
	transform: translateY(-15%);
}
.viewer-360-nav__item:not(.active):hover img{
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

/* ========= 360 Viewer > Arrows ========= */
.viewer-360-model .viewer-360-nav__arrows{
	display: none;
}
.viewer-360-nav__arrows{
	position: relative;
	top: 10px;
	align-items: center;
	display: flex;
	font-size: 16px;
	text-transform: uppercase;
   font-weight: bold;
   color: #000;
   transition: 0.3s ease;
}
.viewer-360-nav__arrows:before{
	content: '';
	position: relative;
	display: block;
	width: 4.0625em;
	height: 1.875em;
	background: url(../img/arrow-360.svg) 0 0 / 100% 100%;
	margin: 0 0.8em 0 0;
	top: -0.6em;
	font-size: 0.8em;
}
.viewer-360-nav__arrows:after{
	content: '';
	position: relative;
	display: block;
	width: 4.0625em;
	height: 1.875em;
	background: url(../img/arrow-360.svg) 0 0 / 100% 100%;
	margin: 0 0 0 0.8em;
	top: -0.6em;
	font-size: 0.8em;
	transform: rotateY(180deg);
}




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

	/* Viewer 360 Nav*/
	.viewer-360-nav__active,
	.viewer-360-nav__arrows{
		font-size: 15px;
	}
	.viewer-360-nav__colors{
		font-size: 14px;
	}
}

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

	.viewer-360-nav__colors{
		font-size: 13px;
	}
	.viewer-360-nav__arrows:before,
	.viewer-360-nav__arrows:after{
		font-size: 0.7em;
	}
}

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

	.viewer-360-nav__colors{
		font-size: 12px;
	}
}

@media only screen and (max-width: 1140px){
	.viewer-360-nav{
		position: relative;
		bottom: 0;
		top: 25px;
	}

	.viewer-360-nav .viewer-360-nav__arrows{
		display: none !important;
	}

	.viewer-360-model{
		display: flex;
		justify-content: center;
	}
	.viewer-360-model .viewer-360-nav__arrows{
		position: absolute;
		display: flex;
		top: unset;
		height: 1em;
		bottom: 20px;
		z-index: 300;
	}

	.farbspektrum {
    	padding: 30px 0 80px;
	}
}

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

	.viewer-360-nav .container{
		padding-left: 20px;
		padding-right: 20px;
	}

	.viewer-360-model .viewer-360-nav__arrows{
		font-size: 12px;
		bottom: 15px;
	}

	.viewer-360-nav__colors{
		font-size: 10px;
	}

	.viewer-360-preloader{
		width: 120px;
    	height: 120px;
	}
	.viewer-360-preloader__text{
		font-size: 14px;
	}
	svg.preloader circle.preloader__incomplete{
		stroke-width: 8px;
	}
	svg.preloader circle.preloader__complete{
		stroke-width: 5px;
	}
}

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

	.viewer-360-model .viewer-360-nav__arrows{
		font-size: 11px;
		bottom: 10px;
	}
	.viewer-360-nav__arrows:before,
	.viewer-360-nav__arrows:after{
		font-size: 0.6em;
	}


	.viewer-360-nav__colors{
		font-size: 8px;
	}	
}

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

	.viewer-360-model .viewer-360-nav__arrows{
		font-size: 10px;
	}
	.viewer-360-model .viewer-360-nav__arrows:before,
	.viewer-360-model .viewer-360-nav__arrows:after{
		font-size: 0.5em;
	}

	.viewer-360-nav__active{
		margin: 0 0 0.7em 0;
	}
	.viewer-360-nav__active, .viewer-360-nav__arrows{
		font-size: 14px;
	}
	
	.viewer-360-nav .container{
		padding-left: 15px;
		padding-right: 15px;
	}

	.viewer-360-nav__colors{
		font-size: 6.5px;
	}		
}

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

	.viewer-360-nav{
		top: 20px;
	}
	.viewer-360-nav__active{
		font-size: 12px;
	}
	.viewer-360-nav__colors{
		font-size: 5.5px;
	}		
}
    

@media only screen and (min-width: 1280px){

	.viewer-360-nav__inner{
		width: 50%;
	}
	.viewer-360-nav__item{
		display: flex;
		align-items: center;
		width: auto;
		height: auto;
		-webkit-box-flex: 0;
	    -ms-flex: 0 1 10%;
	    flex: 0 1 10%;
	}
	.viewer-360-nav__item img{
		width: 100%;
		height: 70%;
	}
}