@font-face {
	font-family: "DIN-Reg";
	src: url(./DIN-Reg.woff) format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "DIN-Bold";
	src: url(./DIN-Bold.woff) format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "DINPro-Medium";
	src: url(./DINPro-Medium.woff) format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0
}

.mb-row {
	display: flex;
	flex-direction: row;
	padding: .15em 0
}

.mb-row.mb-spc-btw {
	justify-content: space-between;
	padding-left: 15px;
	margin-bottom: 8px
}

.mb-row.mb-spc-btw.mb-spc-btw-img {
	padding-left: 0;
	margin-bottom: 0
}

.mb-col {
	display: flex;
	flex-direction: column
}

.mb-col img {
	width: 360px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px
}

.buttonContainer {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%
}

.buttonContainer button {
	display: none
}

.buttonContainer button.btn {
	font-family: "DINPro-Medium";
	background-color: #00ff12;
	color: #000;
	border: none;
	border-radius: 30px;
	padding: .1em .7em .2em;
	margin: .5em;
	font-size: 25px;
	cursor: pointer
}

@media only screen and (max-width:425px) {
	.buttonContainer button.btn {
		font-size: 18px;
		line-height: 34px
	}

}

@media only screen and (max-width:320px) {
	.buttonContainer button.btn {
		font-size: 16px
	}

}

.buttonContainer button.btn#reset {
	display: flex;
	color: #fff;
	background-color: #446b94;
	align-items: center
}

.buttonContainer button.btn#reset img {
	margin-top: .15em;
	width: 28px;
	height: 28px
}

@media only screen and (max-width:320px) {
	.buttonContainer button.btn#reset img {
		width: 16px;
		height: 16px
	}

}

.buttonContainer button.btn#reset .txt {
	padding-right: 10px;
	white-space: nowrap
}

@media only screen and (max-width:425px) {
	.buttonContainer button.btn#reset {
		font-size: 17px
	}

}

@media only screen and (max-width:320px) {
	.buttonContainer button.btn#reset {
		font-size: 16px;
		min-width: 97.58px
	}

}

.ready .buttonContainer button {
	display: flex
}

.mobileInfoBoxContainer {
	position: absolute;
	display: flex;
	bottom: 0;
	left: 0;
	height: 160px;
	width: 100%;
	justify-content: center;
	align-items: center;
	z-index: -1
}

@media only screen and (max-width:1300px) {
	.mobileInfoBoxContainer {
		height: 280px
	}

}

@media only screen and (max-width:1024px) {
	.mobileInfoBoxContainer {
		height: 280px
	}

}

@media only screen and (max-width:425px) {
	.mobileInfoBoxContainer {
		height: 160px
	}

}

#mb-model-viewer #mb-bonemine {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #ededed;
	poster-color: #ededed
}

#mb-model-viewer #mb-bonemine button {
	width: 20px;
	height: 20px;
	border-radius: 16px;
	border: none;
	background-image: url(./info-icon.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #000;
	cursor: pointer;
	box-sizing: border-box;
	--min-hotspot-opacity: 0
}

#mb-model-viewer #mb-bonemine button #mb-annotation {
	font-family: "DINPro-Medium";
	background-color: #f1f1f1;
	position: absolute;
	transform: translate(10px, 10px);
	border: 3px solid #446B94;
	border-radius: 16px;
	text-align: left;
	display: none
}

#mb-model-viewer #mb-bonemine button #mb-annotation.mb-img {
	background-color: #fff
}

#mb-model-viewer #mb-bonemine button #mb-annotation.mb-img-connections {
	background-color: #fff
}

#mb-model-viewer #mb-bonemine button #mb-annotation.mb-img-connections img {
	width: 460px
}

#mb-model-viewer #mb-bonemine button #mb-annotation h2 {
	color: #fff;
	background-color: #446b94;
	margin: -2px -2px .4em;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	padding: .1em 0 .3em 1.1em
}

#mb-model-viewer #mb-bonemine button #mb-annotation ul {
	padding-left: 1em;
	margin-top: .1em;
	line-height: 1.5em
}

#mb-model-viewer #mb-bonemine button #mb-annotation ul li {
	list-style: none
}

#mb-model-viewer #mb-bonemine button #mb-annotation ul li:before {
	content: "- "
}

#mb-model-viewer #mb-bonemine button #mb-annotation p {
	margin: 0 0 .8em 1em
}

#mb-model-viewer #mb-bonemine button #mb-annotation #performance {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-items: center;
	margin-bottom: .5em;
	padding-left: .8em;
	padding-right: .8em
}

#mb-model-viewer #mb-bonemine button #mb-annotation #performance .grid-item {
	display: flex;
	justify-content: center;
	width: 92.8%;
	background-color: #a5b48d;
	padding: .5em;
	margin-bottom: 2px
}

#mb-model-viewer #mb-bonemine button #mb-annotation #performance .grid-item p {
	margin: 0
}

#mb-model-viewer #mb-bonemine button #mb-annotation #performance .grid-item:nth-child(odd) {
	border-right: 3px solid #2F4E6C
}

#mb-model-viewer #mb-bonemine button #mb-annotation #performance .grid-item:nth-child(even) {
	display: flex;
	justify-content: flex-end
}

#mb-model-viewer #mb-bonemine button #mb-annotation #performance .grid-item:nth-child(n+3):nth-child(-n+4) {
	background-color: #bba2a5
}

#mb-model-viewer #mb-bonemine button #mb-annotation #performance .grid-item:nth-child(n+5):nth-child(-n+6) {
	background-color: #b1a8bb
}

#mb-model-viewer #mb-bonemine button #mb-annotation #connections {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	justify-items: center;
	margin-bottom: .5em;
	padding-left: .8em;
	padding-right: .8em
}

#mb-model-viewer #mb-bonemine button #mb-annotation #connections .grid-item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 84%;
	background-color: #a5b48d;
	padding: .5em;
	margin-bottom: 2px
}

#mb-model-viewer #mb-bonemine button #mb-annotation #connections .grid-item p {
	margin: 0
}

#mb-model-viewer #mb-bonemine button #mb-annotation #connections .grid-item:nth-child(1) {
	background-color: #bba2a5
}

#mb-model-viewer #mb-bonemine button #mb-annotation #connections .grid-item:nth-child(2) {
	background-color: #b1a8bb
}

#mb-model-viewer #mb-bonemine button #mb-annotation .infoIcon {
	position: absolute;
	background-image: url(./info-icon.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	padding: .7em;
	border-radius: 12px;
	border: 3px solid white;
	transform: translate(-11px, -12px)
}

#mb-model-viewer #mb-bonemine button[slot=hotspot-1] {
	opacity: 0
}

#mobileWrapper {
	font-family: "DINPro-Medium"
}

#mobileWrapper div[id^=mb-annotation-mobile] {
	background-color: #f1f1f1;
	position: absolute;
	transform: translate(10px, 10px);
	border: 3px solid #446B94;
	border-radius: 16px;
	text-align: left;
	display: none
}

#mobileWrapper div[id^=mb-annotation-mobile].mb-img {
	background-color: #fff
}

#mobileWrapper div[id^=mb-annotation-mobile].mb-img-connections {
	background-color: #fff
}

#mobileWrapper div[id^=mb-annotation-mobile].mb-img-connections img {
	width: 460px
}

#mobileWrapper div[id^=mb-annotation-mobile] h2 {
	color: #fff;
	background-color: #446b94;
	margin: -2px -2px .4em;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	padding: .1em 0 .3em 1.1em
}

#mobileWrapper div[id^=mb-annotation-mobile] ul {
	padding-left: 1em;
	margin-top: .1em;
	line-height: 1.5em
}

#mobileWrapper div[id^=mb-annotation-mobile] ul li {
	list-style: none
}

#mobileWrapper div[id^=mb-annotation-mobile] ul li:before {
	content: "- "
}

#mobileWrapper div[id^=mb-annotation-mobile] p {
	margin: 0 0 .8em 1em
}

#mobileWrapper div[id^=mb-annotation-mobile] #performance {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-items: center;
	margin-bottom: .5em;
	padding-left: .8em;
	padding-right: .8em
}

#mobileWrapper div[id^=mb-annotation-mobile] #performance .grid-item {
	display: flex;
	justify-content: center;
	width: 92%;
	background-color: #a5b48d;
	padding: .5em;
	margin-bottom: 2px
}

#mobileWrapper div[id^=mb-annotation-mobile] #performance .grid-item p {
	margin: 0
}

#mobileWrapper div[id^=mb-annotation-mobile] #performance .grid-item:nth-child(odd) {
	border-right: 3px solid #2F4E6C
}

#mobileWrapper div[id^=mb-annotation-mobile] #performance .grid-item:nth-child(even) {
	display: flex;
	justify-content: flex-end
}

#mobileWrapper div[id^=mb-annotation-mobile] #performance .grid-item:nth-child(n+3):nth-child(-n+4) {
	background-color: #bba2a5
}

#mobileWrapper div[id^=mb-annotation-mobile] #performance .grid-item:nth-child(n+5):nth-child(-n+6) {
	background-color: #b1a8bb
}

#mobileWrapper div[id^=mb-annotation-mobile] #connections {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	justify-items: center;
	margin-bottom: .5em;
	padding-left: .8em;
	padding-right: .8em
}

#mobileWrapper div[id^=mb-annotation-mobile] #connections .grid-item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 84%;
	background-color: #a5b48d;
	padding: .5em;
	margin-bottom: 2px
}

#mobileWrapper div[id^=mb-annotation-mobile] #connections .grid-item p {
	margin: 0
}

#mobileWrapper div[id^=mb-annotation-mobile] #connections .grid-item:nth-child(1) {
	background-color: #bba2a5
}

#mobileWrapper div[id^=mb-annotation-mobile] #connections .grid-item:nth-child(2) {
	background-color: #b1a8bb
}

#mobileWrapper div[id^=mb-annotation-mobile] .infoIcon {
	position: absolute;
	background-image: url(./info-icon.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	padding: .7em;
	border-radius: 12px;
	border: 3px solid white;
	transform: translate(-11px, -12px)
}

@media only screen and (max-width:425px) {
	#mobileWrapper div[id^=mb-annotation-mobile] {
		transform: scale(.6)
	}

}

@media only screen and (max-width:320px) {
	#mobileWrapper div[id^=mb-annotation-mobile] {
		transform: scale(.55)
	}

}

@media only screen and (max-width:1024px) {
	#mobileWrapper div[id=mb-annotation-mobile-1]>.infoIcon>img {
		transform: translate(-11px, -11px)
	}

}