:not(:defined) > * {display: none;}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
html{  margin: 0;  padding: 0;  width: 100%;  height: 100%;}
body {
  margin: 0;
  padding: 0;
  width: 100%; height: calc(100vh - calc(100vh - 100%));
  font-family: 'Noto Sans', Helvetica Neue, sans-serif;
  font-size: 10px; font-weight:400; letter-spacing:0em;
  color:#eee; overflow:hidden;
  background: rgb(225,225,225);
  text-align:left;
  background-image:url('silver_metal_background_2.jpg'); 
  background-size:cover;
  background-repeat: no-repeat;
}
model-viewer {width: 100%;height: 100%;background:transparent;background-color:none;}
.progress-bar {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute; z-index:99999;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 1px;
  border: none;
  background-color: #eeeeee;
}
.progress-bar.hide {visibility: hidden;transition: visibility 0.5s;}
.update-bar {
  background-color: #00805A;
  width: 0%;
  height: 100%;
  border-radius: 1px;
  float: left;
  transition: width 0.3s;
}
div {box-sizing: border-box;text-align:left;}
a{
	letter-spacing:0em;white-space:nowrap;font-size:0.9em;
	text-decoration:none;opacity:0.6;
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}
a:hover{opacity:1;color:white;}
#logo1 a{
	letter-spacing:0em;white-space:nowrap;font-size:0.9em;font-weight:700;padding:8px 10px;margin:8px -10px;border-radius:1px;
	text-decoration:none;opacity:1;color:#00805A;
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}
#logo1 a:hover{opacity:1;color:#009e75;}
#ar-button{position:fixed; z-index:1000;right:40px; top:60px;}


.buttonHolderTop{position:fixed;z-index:100;top:30px;right:40px; display:flex;flex-direction:row;align-items:flex-start;justify-content:center;font-size:1.2em;}
.buttonHolderBottom{position:fixed;bottom:15px;width:100%; display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;font-size:1.2em; }
.buttonA, #ar-button{
	letter-spacing:0em;white-space:nowrap;font-size:1em;font-weight:700;padding:5px 10px;border-radius:1px; cursor:pointer;
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}
.buttonL{
	letter-spacing:0em;white-space:nowrap;font-size:1em;font-weight:700;padding:0 0;border-radius:1px; cursor:pointer;
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
} 
.buttonA, .buttonL{
	min-height:26px; min-width:28px;
}



#anim_1{display:block;}
#anim_1_rev{display:none;}
#anim_2{display:block;}
#anim_2_rev{display:none;}
#anim_3{display:block;}
#anim_4{display:none;}{display:none;}
#anim_5{display:none;}
#anim_6{display:none;}
#anim_7{display:none;}



#langSelected {position: relative; }
#langSelected::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;transform:translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid white;
}


.navbar {position: relative;z-index: 999;}
.navbar ul {list-style-type: none;margin: 0;padding: 0;text-align:right!important;}
.navbar li {color: white; display: inline-block;margin: 0;padding: 0;}
.navbar li a, .navbar li span{color: white;display: block;text-decoration: none; padding:5px 10px;}
.navbar ul li span{ padding-left:28px;}
/* Style the dropdown menu */
.navbar ul ul {display: none;margin:10px 0;padding: 0;}
.navbar ul ul li {display: block; margin: 0;padding: 0;}
.navbar li:hover ul {display: block;}
/* Change the background color of dropdown links on hover */
.navbar ul ul li a:hover {}
	
	
	
.buttonA, .buttonL, #ar-button {background-color:#00573D;border:none;color:white;margin:2px; }
.buttonA:hover, .buttonL:hover, #ar-button:hover{color:white; background-color:#00805A;}
.selected { text-decoration:none; background:white; border:1px solid #00805A; color:#00805A;}
.selectedHints { text-decoration:line-through; color:white; background-color:#00573D;}
.productTitle{font-size:2em;margin:0;margin-bottom:8px;color:#00573D;}
.productSubTitle{font-size:1.3em;}
#logo1{position:fixed;top:30px;left:40px;}
#logo2{position:fixed;z-index:-1;bottom:20px;right:40px;}
#logo2 img{width:150px;}
#productName{font-size:1.8em;font-weight:400;margin-top:8px;color:#00805A;}


#bt1{display:none;}
#bt2{display:block;}


#overlay{
	position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);opacity:1;display:block;
	-webkit-transition: opacity 0.35s ease;
	-moz-transition: opacity 0.35s ease;
	-o-transition: opacity 0.35s ease;
	transition: opacity 0.35s ease;
}
@keyframes circle {
  from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}
@keyframes elongate {
  from { transform: translateX(100px); }
  to   { transform: translateX(-100px); }
}
model-viewer > #ar-prompt {
  position: absolute;
  left: 50%;
  bottom: 60px;
  animation: elongate 2s infinite ease-in-out alternate;
  display: none;
}
model-viewer[ar-status="session-started"] > #ar-prompt { display: block;}
model-viewer > #ar-prompt > img {animation: circle 4s linear infinite;}
ul {list-style-position: outside;color:black;margin:0 5px 10px 5px;padding-left:30px;}
ul li{margin:0;padding:0;}
.Hotspot, .Hotspot:focus {
     background:transparent;
	 /* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); */
     height: 28px; width: 28px; border-radius: 14px;
     padding:0;
     position: relative;
	 border: 0;
     box-sizing: border-box;
     background-image:url('dot2.png'); 
     background-position:center bottom;
     background-repeat: no-repeat;
     background-size: 100%;
	 cursor:pointer;
     -webkit-transition: all 0.35s ease;
     -moz-transition: all 0.35s ease;
     -o-transition: all 0.35s ease;
     transition: all 0.35s ease;

}
.Hotspot:hover {background:#00573D;background-image:url('dot2.png'); }
.Hotspot:not([data-visible]) {
    background:#ADADAD;
    border: 1px solid #fff;
    box-shadow: none;transform: scale(0.5);
    pointer-events: none;
    opacity:0.25;
}
.Hotspot > *  {opacity: 1;transform: translateY(0);}
.HotspotAnnotation {
	pointer-events: none;
	border-radius: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	display:block; 
	display: flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;
	cursor:pointer; color:red;
	padding: 0; margin:0;
	position: absolute;top:0;
	opacity:0;
	-webkit-transition: opacity 0.35s ease;
	-moz-transition: opacity 0.35s ease;
	-o-transition: opacity 0.35s ease;
	transition: opacity 0.35s ease;
	font-family: 'Noto Sans', Helvetica Neue, sans-serif;
}
.left{left: 20px;}
.right{right: 20px;}
.HotspotAnnotation .title, .HotspotContentAnnotation .title{
	font-size:1.4em;font-weight:700;margin:0;margin-bottom:5px;padding:10px 20px;line-height:1.2em;color:white;
	width:100%; padding:10px 15px 10px 15px; background: rgb(0,87,61);
	background: -moz-linear-gradient(45deg, rgba(0,87,61,1) 0%, rgba(0,128,90,1) 100%);
	background: -webkit-linear-gradient(45deg, rgba(0,87,61,1) 0%, rgba(0,128,90,1) 100%);
	background: linear-gradient(45deg, rgba(0,87,61,1) 0%, rgba(0,128,90,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00573D",endColorstr="#00805A",GradientType=1);
}
.HotspotAnnotation .text, .HotspotContentAnnotation .text{
	font-size:1em;line-height:1.5em;margin:0;margin-bottom:5px;padding:10px 20px; color:black;}
.HotspotAnnotation .boxinfo, .HotspotContentAnnotation .boxinfo {
	padding:0;flex-grow:1;overflow-wrap: break-word; background: white;
}
.Hotspot:not([data-visible]) > * {
  opacity: 0;pointer-events: none;transform: translateY(calc(-50% + 4px));transition: transform 0.3s, opacity 0.3s;
}
.HotspotContent{display:none;position:fixed;z-index:100;border:none; bottom:0;left:0;width:100vw;padding:0;margin:0;font-size:1.6em;}
.HotspotContentAnnotation{
	background: #fff;width:100%;min-height:14vh;
	border-radius:0;
	display: flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:center;
	cursor:pointer;position:absolute;
	padding:0; font-size:0.9em;
	transform:translateY(0%);
	-webkit-transition: transform 0.35s ease;
	-moz-transition: transform 0.35s ease;
	-o-transition: transform 0.35s ease;
	transition: transform 0.35s ease;
}
.closeButton{
	position:absolute;top:0;left:0;right:auto;padding:5px 15px;transform:translateY(0);font-size:0.8em;font-weight:bold;border-radius:0 5px 0 0;background-color:white;color:#00805A;
    -webkit-transition: transform 0.35s ease;
    -moz-transition: transform 0.35s ease;
    -o-transition: transform 0.35s ease;
    transition: transform 0.35s ease;
}




.fade-in-image {
  animation: fadeIn 1s;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}




	
	
sup{font-size:0.6em;}
table{width:100%; border-collapse: collapse; border:none;}
table tr {border:none;border-bottom:thin solid black;}
table tr:last-child{border-bottom: none;}
table img{max-width:24px;}
table tr td {padding:2px 0; min-width:30px;}
@media (max-width: 920px) {
	.HotspotAnnotation {display: none;}
	.HotspotContent {display: block;}
	#ar-button{right:20px; top:47px;}
	.buttonHolderTop{top:20px;right:20px;font-size:1em; }
	.buttonHolderBottom{bottom:10px;font-size:1em; } 
	#logo1{top:20px;left:20px;width:50%;}
	#logo2{bottom:15px;right:20px;}
	#logo2 img{width:120px;}
	#productName{font-size:1.3em;margin-top:4px;}	
}
@media (max-width: 700px) {
	#logo1{top:20px;left:20px;width:40%;}
}
@media (max-width: 540px) {
	#logo1{top:100px;left:50%;transform:translateX(-50%);width:80%;text-align:center!important;}
	#logo2{bottom:60px; right:50%; transform:translateX(55%);}
    #logo2 img{width:90px;}
}