@charset "utf-8";
	
.Hotspot, .HotspotValue {
    background: #ff6e00;
	-webkit-border-radius:100%;
    border-radius: 100%;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    height: 18px;
    position: relative;
    transition: opacity 0.3s;
    width: 18px;
	display:block;
	padding:0;
	margin:0;	
}
.Hotspot:not([data-visible]), .HotspotValue:not([data-visible]){
    background: transparent;
    border: 2px solid #ff6e00;
    box-shadow: none;
    height: 18px;
    pointer-events: none;
    width: 18px;
}
.Hotspot:not([data-visible])>*, .HotspotValue:not([data-visible])>* {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-50%));
    transition: transform 0.3s, opacity 0.3s;
}
.Hotspot:focus, .HotspotValue:focus {
   	background:#ff6e00;
	position: relative;
	height: 18px;
    outline: none;
    width: 18px;
}
.active{
	background:#ff6e00;
	position: relative;
    outline: none;
	-webkit-border-radius:100%;
	border-radius: 100%;
	height: 18px;
    width: 18px;
	}
		
.active::before{
  	content:'';
	position: absolute;
	background-color: transparent;
	width: 32px;
	-webkit-border-radius:100%;
	border-radius: 100%;
  	height: 32px;
	border:2px solid #ff6e00;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);		
	animation: pulse 1s infinite;
	-moz-animation: pulse 1s infinite;
	-webkit-animation: pulse 1s infinite;
	transition: 0.55s; 
	-moz-transition: 0.55s;
	animation-delay: -1s;	
}		
.Hotspot>*,.HotspotValue>* {
    opacity: 1;
    transform: translateY(-50%);
}


:host([data-js-focus-visible]:focus:not(.focus-visible)), :host([data-js-focus-visible]) :focus:not(.focus-visible) {
    outline: none!important;
}

model-viewer {
	--progress-bar-color: #ff6e00;
	--progress-bar-mask:transparent;
	--poster-color:#eaeaea;	
	--min-hotspot-opacity:0.4;
	--max-hotspot-opacity:1;
}

.contentHotspots {
	display: flex;
	position:relative;
	z-index:1;
	margin-top:20px;
    width: 100%;
}	

model-viewer{
	width: 100%;
	min-height:400px;
    background-color: #eaeaea;	
	display: flex;
	align-items: center;
	justify-content: center;
	z-index:2;
}
@media only screen and (max-width:400px){

model-viewer{
	min-height:400px;
}
	}
	
@media only screen and (min-width:400px) and (max-width:481px){
model-viewer{
	min-height:350px;
}	
	}

#noSupport{
    position: absolute;
    text-align: center;
    width: 100%;
	height:100%;
    z-index: 999;
    background: #eaeaea;
	padding-top:200px;
	display:none;
}
	
.contentHotspots.for3d .img-right img{
  display: block;
  max-width: 100%;
  height: auto;
}



.contentHotspots.for3d .content.has-img{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
  animation: textin .5s 1;
  position: relative;
  top: 0;
  z-index: 1;
}

.contentHotspots.for3d .content.no-img{
  display: block;
  animation: textin .5s 1;
  position: relative;
  top: 0;
  z-index: 1;
}

@media (max-width: 600px){
  .contentHotspots.for3d .content{
    grid-template-columns: 1fr 40%;
  }
}
.content:not(:first-child) {
    display: none;
}
:not(:defined) > * {
	display: none;
}
.content.is-hidden {
	display: none !important;
}

@keyframes textin{
	0% {
    opacity: 0;}
	100% {
    opacity: 1;}
	0% {
    top:-200px;}
}

@keyframes pulse {
  0% {
	  box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
  }
  70% { 
	  box-shadow: 0 0 0 1.2vw rgba(255,0,0, 0);
  }
  100% {
	  box-shadow: 0 0 0 0 rgba(255,0,0, 0);
  }
}

.contentHotspots.for3d p:has(a.ifm-button){
	margin-top: 10px;
}
.contentHotspots.for3d .ifm-button{
	margin-bottom:0;
}