@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Crimson+Text:wght@700&display=swap');
:root {
	--color-primary: #70846e;
	--color-secondary: #293028;
	--color-transition: #293028;
	--color-text1: #b2c397;
	--color-text2: #f3ede4;
	--color-text3: #f8e6da;
	--color-text4: #e1c5b4;
	--color-alt-text-light: #e2c7a1;
	--color-logo-green: #3b6b39;
	--color-logo-orange: #b6853f;
	--color-logo: #181a1e;
}
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	font-size: 14px;
	width: 100vw;
	height: 100vh;
}
body{
	min-width: 100%;
	min-height: 100dvh;
	-webkit-user-select: none;
	user-select: none;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	background: #f0f9f9;
}
.usa{
	width: 150px;
	height: 150px;
	display: flex;
	position: absolute;
	left: 5%;
	top: 43%;
	z-index: 20;
}
.certifications{
	width:13%;
	height: 4%;
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 3%;
	top: 79%;
	font-size: 1.8rem;
	z-index: 20;
	color: var(--color-alt-text-light);
	text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
.page-container{
	width: 100%;
	height: 100dvh;
	overflow: hidden;
	position:relative;
}
@keyframes fade-out{
	0%{
		height: 140%;
	}
	100%{
		height: 0;
	}
}
.transition-wipe{
	width: 100%;
	height: 0;
	background-color: var(--color-transition);
	-webkit-mask-image: linear-gradient(transparent, var(--color-transition) 20%);
	mask-image: linear-gradient(transparent, var(--color-transition) 20%);
	z-index: 50;
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	animation: fade-out 1s;
}
#audioId{
	display: flex;
	position: absolute;
	top: 1rem;
	right: 0;
	z-index: 40;
}
.logo-menu-panel{
	width: 100%;
	background: var(--color-secondary);
	height: 80px;
	position: relative;
	display: flex;
	justify-content: center;
	z-index: 30;
}
.menu-bar{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	align-items: center;
	justify-content: center;
	padding-left: 1rem;
	display: flex;
	gap: 4px;
}
.menuBtn{
	width: 100px;
	height: 40px;
	font-weight: bold;
	font-family: 'Crimson Text', sans-serif;
	color: var(--color-text1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 300ms ease;
	font-size: 18px;
}
.menuBtn:hover{
	cursor: pointer;
	font-size: 21px;
	color: var(--color-logo-green);
}
.menuBtn.selected{
	color: var(--color-logo-green);
}
.menuBtn img{
	width: 12px;
	height: 10px;
}
.top-menu-separator{
	width: 1px;
	height: 20px;
	background: var(--color-text1);
}
.hide {
	display: none;
}
.menu-container {
	position: absolute;
	margin-left: 10%;
	background: rgba(112,132,110,0.9);
	height: 350px;
	width: 80%;
	z-index: 25;
	top: 2rem;
	border-radius: 2rem;
	border: 4px solid var(--color-secondary);
	animation: slide-down .5s ease;
}
@keyframes slide-down{
	0%{
		top: -35%;
	}
	100%{
		top: 2rem;
	}
}
@keyframes slide-up{
	from{
		top: 2rem;
	}
	to{
		top: -35%;
	}
}
.who-info-container{
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 26;
}
.who-info-container.show{
	display: block;
}
.who-info{
	width: 92%;
	height: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	position: absolute;
	top: 3rem;
	left: 4rem;
	overflow: hidden;
}
.who-info h1{
	color: var(--color-text1);
	font-weight: bold;
	font-size: 3rem;
	display: flex;
	position: absolute;
	top: 2rem;
	text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
.who-info p{
	color: var(--color-secondary);
	font-weight: bold;
	font-size: 1.4rem;
	display: flex;
	position: absolute;
	top: 7rem;
}
.next-btn{
	width: 54px;
	height: 36px;
	display: flex;
	position: absolute;
	right: 1%;
	bottom: 4%;
	transition: all 300ms ease;
	cursor: pointer;
	z-index: 27;
	animation: pulse-size 1s linear infinite;
	transition: all 300ms ease;
}
.next-btn:hover{
	margin-right: 4px;
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	-o-animation-play-state:paused;
	animation-play-state:paused;
}
@keyframes pulse-size{
	0%{
		transform: scale(1);
	}50%{
		transform: scale(1.2);
	}100%{
		transform: scale(1);
	}
}
.prev-btn{
	width: 54px;
	height: 36px;
	display: flex;
	position: absolute;
	left: 1%;
	bottom: 4%;
	transition: all 300ms ease;
	cursor: pointer;
	z-index: 27;
	animation: pulse-size 1s linear infinite;
	transition: all 300ms ease;
}
.prev-btn:hover{
	margin-left: 4px;
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	-o-animation-play-state:paused;
	animation-play-state:paused;
}
.who-info2{
	width: 45%;
	height: 88%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	position: absolute;
	top: 3rem;
	left: 4rem;
	overflow: hidden;
}
.who-info2 p{
	color: var(--color-secondary);
	font-weight: bold;
	font-size: 1.2rem;
	display: flex;
	position: absolute;
	top: 3rem;
}
.who-info2 ul{
	list-style-type: circle;
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 4rem;
	color: var(--color-secondary);
	font-weight: bold;
	font-size: 1.2rem;
	margin-left: 2rem;
}
.who-info2 .ul2{
	display: flex;
	position: absolute;
	left: 50%;
}
.naics-codes-container{
	width: 40%;
	height: 88%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	position: absolute;
	top: 3rem;
	right: 4%;
	font-size: 1.2rem;
	font-weight: bold;
	overflow: hidden;
}
.naics-codes-container span{
	color: var(--color-text1);
	text-shadow: 1px 1px 2px rgba(0,0,0,.7);
}
.naics-codes-container p{
	color: var(--color-secondary);
	padding-bottom: .4rem;
}
.naics-codes{
	width: 150px;
	height: 150px;
	background: var(--color-secondary);
	display: flex;
	position: absolute;
	top: 34%;
	right: 80px;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	color: var(--color-text1);
	font-size: 1.5rem;
	font-weight: bold;
	text-shadow: 2px 2px 2px rgba(0,0,0,1);
}
.what-info-container{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 27;
}
.what-info{
	width: 92%;
	height: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	position: absolute;
	top: 3rem;
	left: 4rem;
	overflow: hidden;
}
.what-info h1{
	color: var(--color-text1);
	font-weight: bold;
	font-size: 3rem;
	display: flex;
	position: absolute;
	top: 2rem;
	text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
.what-info p{
	color: var(--color-secondary);
	font-weight: bold;
	font-size: 1.4rem;
	display: flex;
	position: absolute;
	top: 7rem;
}
.why-info-container{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 28;
}
.why-info{
	width: 92%;
	height: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	position: absolute;
	top: 3rem;
	left: 4rem;
	overflow: hidden;
}
.why-info h1{
	color: var(--color-text1);
	font-weight: bold;
	font-size: 3rem;
	display: flex;
	position: absolute;
	top: 2rem;
	text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
.why-info p{
	color: var(--color-secondary);
	font-weight: bold;
	font-size: 1.4rem;
	display: flex;
	position: absolute;
	top: 7rem;
}
.where-info-container{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 29;
}
.where-info{
	width: 92%;
	height: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	position: absolute;
	top: 3rem;
	left: 4rem;
	overflow: hidden;
}
.where-info h1{
	color: var(--color-text1);
	font-weight: bold;
	font-size: 3rem;
	display: flex;
	position: absolute;
	top: 2rem;
	text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
.where-info p{
	color: var(--color-secondary);
	font-weight: bold;
	font-size: 1.4rem;
	display: flex;
	position: absolute;
	top: 7rem;
}
.logo-img-panel{
	width: 200px;
	height: 80px;
	display: flex;
	align-items: center;
	position: absolute;
	left: 10px;
}
.logo-img{
	width: 200px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.logo-img img{
	width: 200px;
	height: 60px;
}
.mobile-logo-img{
	display: none;
}
.main-section-container{
	width: 100%;
	height: 80vh;
	display: flex;
	justify-content: center;
	position: relative;
	flex-direction: column;
}
.logo-container{
	width: 100%;
	height: 29%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50px;
}
.img-array{
	position: absolute;
	max-width: 100%;
	width: auto\9;
	height: auto;
	list-style: none;
	padding: 0;
	top: -500px;
	left: 0;
	background-color: white;
	z-index: -20;
}
.img-array .image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	opacity: 0;
	transform: scale(1);
}
.img-array .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.img-array .image:nth-child(1){
	z-index: -19;
	animation: fade 30s linear infinite;
}
.img-array .image:nth-child(2){
	z-index: -18;
	animation: fade 30s 6s linear infinite;
}
.img-array .image:nth-child(3){
	z-index: -17;
	animation: fade 30s 12s linear infinite;
}
.img-array .image:nth-child(4){
	z-index: -16;
	animation: fade 30s 18s linear infinite;
}
.img-array .image:nth-child(5){
	z-index: -15;
	animation: fade 30s 24s linear infinite;
}
@keyframes fade{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	5%{
		opacity: .4;
	}
	20%{
		opacity: .4;
		transform: scale(1.1);
	}
	25%{
		opacity: 0;
		transform: scale(1.125);
	}
}
#logo{
	display: flex;
	position: absolute;
	justify-content: center;
	align-items: center;
	z-index: 20;
}
.main-options-container{
	background: var(--color-primary);
	width: 100%;
	height: 52%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10rem;
	position: absolute;
	bottom: 0;
}
.swoosh-svg {
  position: absolute;
  width: 0;
  height: 0;
}
.swoosh {
  width: 90%;
  height: 130%;
  display: flex;
  position: absolute;
  right: 0;
  background: var(--color-logo-orange);
  background-size: cover;
  -webkit-clip-path: url(#swoosh-clip-path);
  clip-path: url(#swoosh-clip-path);
  z-index: 11;
}
.main-option-panel{
	background: var(--color-secondary);
	width: 20rem;
	height: 20rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	z-index: 13;
	text-shadow: 2px 2px 4px rgba(0,0,0,.7);
	background-size: 6.3rem;
	transform-style: preserve-3d;
	transform: perspective(1000px);
}
.main-option-panel:nth-child(1){
	background-image: url(./images/ISO_mfg_for.svg);
}
.main-option-panel:nth-child(3){
	background-image: url(./images/ISO_mfg_by.svg);
}
.main-option-panel:nth-child(5){
	background-image: url(./images/Brand_Icon.svg);
}
.main-option-panel:hover{
	cursor: pointer;
}
.main-option-panel p{
	color: var(--color-text1);
	font-size: 2.5rem;
	text-align: center;
	font-weight: bold;
	transform: translateZ(50px);
	animation: shadow-fade 1s;
}
.circle-shadow-1{
	width: 25rem;
	height: 25rem;
	display: flex;
	position: absolute;
	margin-left: -840px;
	z-index: 12;
	animation: shadow-fade 1s;
}
.circle-shadow-2{
	width: 25rem;
	height: 25rem;
	display: flex;
	position: absolute;
	margin-left: 0px;
	z-index: 12;
	animation: shadow-fade 1s;
}
.circle-shadow-3{
	width: 25rem;
	height: 25rem;
	display: flex;
	position: absolute;
	margin-left: 840px;
	z-index: 12;
	animation: shadow-fade 1s;
}
@keyframes shadow-fade{
	0%{
		opacity: 0;
	}
	90%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
#contract{
	animation: pop-in 1s;
}
@keyframes pop-in{
	0%{
		width: 0;
		height: 0;
	}
	70%{
		width: 0;
		height: 0;
	}
	98%{
		width: 21rem;
		height: 21rem;
	}
	100%{
		width: 20rem;
		height: 20rem;
	}
}
#private{
	animation: pop-in 1s;
}
#brands{
	animation: pop-in 1s;
}
.contract-popup h2, .private-popup h2, .brands-popup h2{
	font-size: 2rem;
	margin-bottom: 20px;
}
.contract-popup p, .private-popup p, .brands-popup p{
	font-size: 1.6rem;
	padding: 0.2rem;
}
.popup-left{
	max-width: 40%;
	position: absolute;
	left: 20%;
	top:18%;
}
.popup-right{
	max-width: 40%;
	position: absolute;
	right: 20%;
	top: 18%;
}
.popup-bottom{
	position: absolute;
	bottom: 0;
	padding: 50px;
}
.contract-popup, .private-popup, .brands-popup{
	width: 650px;
	height: 400px;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	position: absolute;
	border-radius: 20px;
	border: 2px solid white;
	color: white;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
	text-align: center;
	padding: 20px;
	z-index: 20;
	opacity: 0;
	transform: scale(0.95) translateY(20px);
	pointer-events: none;
	transition: all 300ms ease;
}
.contract-popup{
	top: 40px;
	left: 12%;
}
.private-popup{
	top: 40px;
	left: 33%;
}
.brands-popup{
	top: 40px;
	left: 55%;
}
.contract-popup.show, .private-popup.show, .brands-popup.show {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
}
#transition-circle-select{
	width: 100%;
	height: 0;
	background-color: var(--color-transition);
	-webkit-mask-image: linear-gradient(transparent, var(--color-transition) 20%);
	mask-image: linear-gradient(transparent, var(--color-transition) 20%);
	z-index: 50;
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	transition: all 1000ms ease;
}
#transition-circle-select.active{
	height: 140%;
}
@keyframes backBtn-anim{
	0%{
		transform: translateX(-60px);
	}
	50%{
		transform: translateX(-60px);
	}
	100%{
		transform: translateX(0);
	}
}
.backButton{
	width: 40px;
	height: 40px;
	display: none;
	position: absolute;
	top: 6.2rem;
	left: 1rem;
	cursor: pointer;
	z-index: 10;
	transition: all 300ms ease;
	animation: backBtn-anim 2s;
}
.backButton.active{
	display: flex;
}
.backButton:hover{
	width: 45px;
	height: 45px;
}
@keyframes backToPrivateBtn-anim{
	0%{
		transform: translateX(-80px);
	}
	50%{
		transform: translateX(-80px);
	}
	100%{
		transform: translateX(0);
	}
}
.back-toPrivateBtn{
	width: 40px;
	height: 40px;
	display: none;
	position: absolute;
	top: 6.2rem;
	left: 1rem;
	cursor: pointer;
	z-index: 10;
	background: var(--color-secondary);
	color: var(--color-text1);
	justify-content: center;
	align-items: center;
	border-radius: 500px;
	font-size: 3rem;
	transition: all 300ms ease;
	animation: backToPrivateBtn-anim 2s;
}
.back-toPrivateBtn p{
	margin-bottom: 9px;
	margin-right: 4px;
}
.back-toPrivateBtn.active{
	display: flex;
}
.back-toPrivateBtn:hover{
	width: 45px;
	height: 45px;
}
.back-toContractBtn{
	width: 40px;
	height: 40px;
	display: none;
	position: absolute;
	top: 6.2rem;
	left: 1rem;
	cursor: pointer;
	z-index: 10;
	background: var(--color-secondary);
	color: var(--color-text1);
	justify-content: center;
	align-items: center;
	border-radius: 500px;
	font-size: 3rem;
	transition: all 300ms ease;
	animation: backToPrivateBtn-anim 2s;
}
.back-toContractBtn p{
	margin-bottom: 9px;
	margin-right: 4px;
}
.back-toContractBtn.active{
	display: flex;
}
.back-toContractBtn:hover{
	width: 45px;
	height: 45px;
}
.contract-circle-btn, .private-circle-btn, .brands-circle-btn{
	width: 100px;
	height: 100px;
	background: var(--color-primary);
	background-size: 6rem;
	position: absolute;
	top: 30px;
	border: 2px solid var(--color-text1);
	border-radius: 500px;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 1.6rem;
	color: var(--color-text1);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
	cursor: pointer;
	transition: all 200ms ease;
}
#contract-circle-btn2, #private-circle-btn1{
	left: 18%;
}
#brands-circle-btn1, #private-circle-btn2{
	right: 18%;
}
#contract-circle-btn1{
	left: 28%;
}
#brands-circle-btn2{
	right: 28%;
}
.private-circle-btn:hover, .brands-circle-btn:hover, .contract-circle-btn:hover{
	color: var(--color-text2);
	border: 2px solid var(--color-text2);
	font-size: 1.8rem;
}
.contract-section-container{
	width: 100%;
	height: 80vh;
	background: var(--color-primary);
	display: flex;
	justify-content: center;
	position: relative;
	flex-direction: column;
	display: none;
	background-size: 6rem;
	background-image: url(./images/ISO_mfg_for_light.svg);
	z-index: 1;
}
@keyframes header-fade-in{
	0%{
		opacity: 0;
	}
	30%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.contract-header{
	width: 100%;
	height: 150px;
	color: var(--color-text3);
	font-size: 2rem;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	text-shadow: 2px 2px 3px rgba(0,0,0,.6);
	animation: header-fade-in 2s;
}
.contract-info-container{
	width: 100%;
	height: 83%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 150px;
}
@keyframes capabilities-slide{
	from{
		left: -800px;
	}
	to{
		left: 0;
	}
}
.capabilities-container{
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: absolute;
	left: 0;
	background: var(--color-primary);
	animation: capabilities-slide 1.5s;
	z-index: 2;
}
.contract-separator{
	width: 1px;
	height: 88%;
	display: flex;
	position: absolute;
	left: 50%;
	background: var(--color-text1);
	z-index: 3;
	top: 5%;
	animation: header-fade-in 2s;
}
@keyframes automation-slide{
	from{
		right: -800px;
	}
	to{
		right: 0;
	}
}
.automation-container{
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: absolute;
	right: 0;
	background: var(--color-primary);
	animation: automation-slide 1.5s;
	z-index: 2;
}
.capabilities-header{
	width: 30%;
	height: 100px;
	display: flex;
	position: absolute;
	top: 0;
	left: 25%;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 2rem;
	color: var(--color-alt-text-light);
	text-shadow: 2px 2px 4px rgba(0,0,0,.6);
}
.under-cap-header{
	width: 65%;
	height: 500px;
	display: flex;
	position: absolute;
	top: 80px;
	left: 2%;
}
.cap-info-default{
	width: 100%;
	height: 100%;
	color: var(--color-text2);
	font-size: 2rem;
	padding: 14%;
	text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
.cap-info{
	display: none;
	width: 100%;
	height: 100%;
	animation: cap-info-slide-in 1.5s;
}
@keyframes cap-info-slide-in{
	from{
		transform: translateX(-700px);
	}
	to{
		transform: translateX(0);
	}
}
.cap-info-upper{
	width: 100%;
	height: 34%;
	position: absolute;
	top: 0;
}
.cap-info-upper p{
	font-size: 1.3rem;
	color: var(--color-text3);
	padding: 2%;
	text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
.cap-info-lower{
	width: 100%;
	height: 66%;
	position: absolute;
	bottom: 0;
	left: 10px;
	display: flex;
	align-items: center;
}
.cap-info-lower img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.previous-image-btn{
	width: 5%;
	height: 15%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0.5%;
	font-size: 2rem;
	background: var(--color-secondary);
	border-radius: 600px;
	color: white;
	opacity: 60%;
	border: 2px solid white;
	cursor: pointer;
}
.previous-image-btn p{
	padding-bottom: 0.4rem;
}
.next-image-btn{
	width: 5%;
	height: 15%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 0.5%;
	font-size: 2rem;
	background: var(--color-secondary);
	border-radius: 600px;
	color: white;
	opacity: 60%;
	border: 2px solid white;
	cursor: pointer;
}
.next-image-btn p{
	padding-bottom: 0.4rem;
}
.dots-container {
	width: 100%;
	position: absolute;
	bottom: -20px;
	text-align: center;
}

.dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	background-color: #bbb;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s;
}

.dot.active {
	background-color: #333;
}
.cap-category {
  cursor: pointer;
  color: var(--color-secondary);
  font-size: 1.8rem;
  text-align: right;
  transition: all 300ms ease;
  border-bottom: 1px solid var(--color-text1);;
}
.cap-category:hover{
	color: var(--color-text1);
	padding-right: 0.6rem;
	text-shadow: 1px 1px 2px rgba(0,0,0,.6);
}
.cap-category.active{
	color: var(--color-text3);
	text-shadow: 1px 1px 2px rgba(0,0,0,.6);
}
.cap-options-list {
  display: none;
  margin-bottom: 1rem;
}
.cap-category.active + .cap-options-list {
  display: flex;
  flex-direction: column;
}
.cap-content{
	width: 240px;
	height: 88%;
	display: flex;
	flex-direction: column;
	margin-top: 1em;
	position: absolute;
	top: 20px;
	right: 20px;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
}
.cap-option{
	font-size: 1.5rem;
	padding-bottom: 0.2rem;
	color: var(--color-secondary);
	cursor: pointer;
	transition: all 300ms ease;
}
.cap-option:hover{
	color: var(--color-text1);
	padding-right: 0.6rem;
	text-shadow: 1px 1px 2px rgba(0,0,0,.6);
}
.cap-option.chosen{
	color: var(--color-alt-text-light);
}
.anodize-star{
	width: 20px;
	height: 20px;
}
.automation-header{
	width: 30%;
	height: 100px;
	display: flex;
	position: absolute;
	top: 0;
	right: 25%;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 2rem;
	color: var(--color-alt-text-light);
	text-shadow: 2px 2px 4px rgba(0,0,0,.6);
}
.under-auto-header{
	width: 65%;
	height: 500px;
	display: flex;
	position: absolute;
	top: 80px;
	right: 2%;
}
.auto-info-default{
	width: 100%;
	height: 100%;
	color: var(--color-text2);
	font-size: 2rem;
	padding: 14%;
	text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
.auto-info{
	display: none;
	width: 100%;
	height: 100%;
	animation: auto-info-slide-in 1.5s;
}
@keyframes auto-info-slide-in{
	from{
		transform: translateX(700px);
	}
	to{
		transform: translateX(0);
	}
}
.auto-info-upper{
	width: 100%;
	height: 34%;
	position: absolute;
	top: 0;
}
.auto-info-upper p{
	font-size: 1.3rem;
	color: var(--color-text3);
	padding: 2%;
	text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
.auto-info-lower{
	width: 100%;
	height: 66%;
	position: absolute;
	bottom: 0;
	right: 10px;
	display: flex;
	align-items: center;
}
.auto-info-lower img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.auto-content{
	width: 260px;
	height: 80%;
	display: flex;
	flex-direction: column;
	margin-top: 1em;
	position: absolute;
	top: 10px;
	left: 20px;
	font-weight: bold;
	font-size: 1.8rem;
	text-align: left;
}
.auto-option{
	padding-bottom: 0.2rem;
	color: var(--color-secondary);
	cursor: pointer;
	transition: all 300ms ease;
}
.auto-option:hover{
	color: var(--color-text1);
	padding-left: 0.6rem;
	text-shadow: 1px 1px 2px rgba(0,0,0,.6);
}
.auto-option.chosen{
	color: var(--color-alt-text-light);
}
.playBtn{
	width: 100px;
	height: 30px;
	border-radius: 250px;
	border: 2px solid var(--color-text2);
	background: var(--color-secondary);
	color: var(--color-text2);
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	cursor: pointer;
	transition: all 300ms ease;
}
.playBtn:hover{
	border: 2px solid var(--color-secondary);
	background: var(--color-text2);
	color: var(--color-primary);
}
.playBtn:hover .playIcon{
	background: var(--color-secondary);
	color: var(--color-text2);
}
.playIcon{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-text2);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-secondary);
	font-size: 1.8rem;
	padding-bottom: 0.4rem;
	padding-left: 0.2rem;
	transition: all 300ms ease;
}
#machineDesign-playBtn{
	position: absolute;
	right: 5%;
	top: -10%;
}
#plasmaCutting-playBtn, #polish-playBtn, #fibercut-playBtn, #inspect-playBtn{
	position: absolute;
	left: 5%;
	top: -10%;
}
#videoModal1{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 15px 30px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	border: none;
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.modal{
	width: 100vw;
	height: 100vh;
	display: none;
	z-index: 45;
	background: rgba(0,0,0,.7);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
}
.modal-content{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.close{
	color: white;
	font-size: 2rem;
	margin-left: 550px;
	cursor: pointer;
}
video{
	width: 560px;
	height: 315px;
}
.machine-specs-circle-container{
	display: flex;
	position: absolute;
	bottom: 30%;
	margin-left: 250px;
	z-index: 10;
	animation: header-fade-in 4s;
}
.machine-specs-circle{
	width: 100px;
	height: 100px;
	background: var(--color-text3);
	border-radius: 500px;
	color: var(--color-primary);
	font-size: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.machine-specs-circle-container img{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 55%;
	left: -84%;
	filter: brightness(140%);
	transform: rotateX(180deg) rotateY(180deg) rotateZ(60deg);
}
.machine-specs{
	width: 120px;
	height: 30px;
	font-size: 1.4rem;
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 15%;
	left: 52%;
	background: linear-gradient(90deg, var(--color-text1) 50%, transparent 50%), linear-gradient(90deg, var(--color-text1) 50%, transparent 50%), linear-gradient(0deg, var(--color-text1) 50%, transparent 50%), linear-gradient(0deg, var(--color-text1) 50%, transparent 50%);
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	background-size: 15px 3px, 15px 3px, 3px 15px, 3px 15px;
	background-position: left top, right bottom, left bottom, right top;
	cursor: pointer;
	animation: border-dance 500ms infinite linear;
	z-index: 5;
}
@keyframes border-dance {
	0% {
		background-position: left top, right bottom, left bottom, right top;
	}

	100% {
		background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px;
	}
}
.machine-specs p{
	color: var(--color-text1);
	text-shadow: 0px 0px 4px black;
	transition: all 300ms ease;
}
.machine-specs p:hover{
	color: var(--color-text2);
}
.instructions a{
	color: var(--color-primary);
	text-decoration: none;
	transition: all 300ms ease;
}
.instructions a:hover{
	color: var(--color-text2);
}
.machine-specs .tooltip-ms, .instructions .tooltip-ms, .mask-instructions .tooltip-ms{
	visibility: hidden;
	width: 180px;
	height: 30px;
	background: black;
	color: var(--color-text2);
	text-align: center;
	border-radius: 10px;
	position: absolute;
	top: -35px;
	left: 0;
}
.machine-specs:hover .tooltip-ms, .instructions:hover .tooltip-ms, .mask-instructions:hover .tooltip-ms{
	visibility: visible;
}
.tooltip-ms .tipTip{
	width: 10px;
	height: 10px;
	background: black;
	transform: rotate(45deg);
	position: absolute;
	bottom: -5px;
	left: 14px;
}
.private-section-container{
	width: 100%;
	height: 80vh;
	background: var(--color-primary);
	display: flex;
	justify-content: center;
	position: relative;
	flex-direction: column;
	display: none;
	background-size: 6rem;
	background-image: url(./images/ISO_mfg_by_light.svg);
	z-index: 1;
}
.private-header{
	width: 100%;
	height: 150px;
	color: var(--color-text3);
	font-size: 2rem;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	text-shadow: 2px 2px 3px rgba(0,0,0,.6);
	animation: header-fade-in 2s;
}
.private-info-container{
	width: 100%;
	height: 83%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 150px;
	background: var(--color-text3);
}
.private-prophy-container{
	width: 80%;
	height: 38%;
	display: flex;
	position: absolute;
	top: 5%;
	right: 2%;
	cursor: pointer;
}
.private-mask-container{
	width: 80%;
	height: 38%;
	display: flex;
	position: absolute;
	top: 50%;
	left: 2%;
	cursor: pointer;
}
.private-prophy-bg{
	width: 70%;
	height: 100%;
	background: var(--color-primary);
	border-radius: 500px;
	display: flex;
	align-items: center;
	justify-content: left;
	position: absolute;
	left: 0;
}
.private-prophy-bg p{
	font-size: 5rem;
	color: var(--color-text3);
	margin-left: 4%;
}
.private-prophy-capsule{
	width: 70%;
	height: 102%;
	background: var(--color-text1);
	border-radius: 500px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	position: absolute;
	right: 0;
	top: -1%;
	animation: prophy-capsule-slide 2s ease;
}
@keyframes prophy-capsule-slide{
	0%{
		transform: translateX(-450px);
	}10%{
		transform: translateX(-450px);
	}100%{
		transform: translateX(0);
	}
}
.private-mask-bg{
	width: 70%;
	height: 100%;
	background: var(--color-primary);
	border-radius: 500px;
	display: flex;
	align-items: center;
	justify-content: right;
	position: absolute;
	right: 0;
}
.private-mask-bg p{
	font-size: 5rem;
	color: var(--color-text3);
	margin-right: 10%;
}
.private-mask-capsule{
	width: 70%;
	height: 102%;
	background: var(--color-text1);
	border-radius: 500px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	position: absolute;
	left: 0;
	top: -1%;
	animation: mask-capsule-slide 2s ease;
}
@keyframes mask-capsule-slide{
	0%{
		transform: translateX(450px);
	}10%{
		transform: translateX(450px);
	}100%{
		transform: translateX(0);
	}
}
@keyframes circle-arrow-fade-in{
	0%{
		opacity: 0;
	}80%{
		opacity: 0;
	}100%{
		opacity: 1;
	}
}
.prophy-circle-arrow-container{
	width: 10%;
	height: 100%;
	position: absolute;
	left: -11%;
	top: -28%;
	animation: circle-arrow-fade-in 2s ease;
}
.prophy-circle-arrow-container img{
	width: 150px;
	height: 150px;
	position: absolute;
	top: 55%;
	right: 10%;
	transform: rotateX(180deg) rotateY(180deg) rotateZ(-20deg);
}
.private-prophy-circle{
	width: 150px;
	height: 150px;
	background: var(--color-text1);
	border-radius: 50%;
	border: 4px solid var(--color-text3);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-text2);
	text-shadow: 1px 1px 3px rgba(0,0,0,1);
	font-size: 1.4rem;
	position: absolute;
	right: 40%;
	top: 0;
}
.mask-circle-arrow-container{
	width: 10%;
	height: 100%;
	position: absolute;
	right: -11%;
	bottom: -25%;
	animation: circle-arrow-fade-in 2s ease;
}
.mask-circle-arrow-container img{
	width: 150px;
	height: 150px;
	position: absolute;
	bottom: 61%;
	left: 10%;
	transform: rotateZ(-20deg);
}
.private-mask-circle{
	width: 150px;
	height: 150px;
	background: var(--color-text1);
	border-radius: 50%;
	border: 4px solid var(--color-text3);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-text2);
	text-shadow: 1px 1px 3px rgba(0,0,0,1);
	font-size: 1.4rem;
	position: absolute;
	left: 40%;
	bottom: 6%;
}
.private-prophy-capsule img{
	transform: rotateZ(20deg);
}
.prophy-img-1{
	width: 60px;
	height: 50%;
}
.prophy-img-2{
	width: 70px;
	height: 60%;
}
.prophy-img-3{
	width: 80px;
	height: 70%;
}
.prophy-img-4{
	width: 100px;
	height: 80%;
}
.mask-img-1{
	width: 300px;
	height: 90%;
}
.mask-img-2{
	width: 250px;
	height: 75%;
}
.mask-img-3{
	width: 200px;
	height: 60%;
}
.mask-img-4{
	width: 150px;
	height: 45%;
}
.private-prophy-content-container, .private-mask-content-container{
	width: 100%;
	height: 80vh;
	background: var(--color-primary);
	display: flex;
	justify-content: center;
	position: relative;
	flex-direction: column;
	display: none;
	background-size: 6rem;
	background-image: url(./images/ISO_mfg_by_light.svg);
	z-index: 1;
}
.private-prophy-header{
	width: 100%;
	height: 150px;
	color: var(--color-text3);
	font-size: 2rem;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	text-shadow: 2px 2px 3px rgba(0,0,0,.6);
	animation: header-fade-in 2s;
}
.prophy-vid-btn{
	width: 100px;
	height: 100px;
	display: flex;
	background: var(--color-logo-orange);
	border-radius: 500px;
	position: absolute;
	top: 25px;
	right: 10%;
	border: 2px solid white;
	color: var(--color-text3);
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1.7rem;
	cursor: pointer;
	transition: all 300ms ease;
}
.prophy-vid-btn:hover{
	background: var(--color-text1);
}
.private-prophy-info-container{
	width: 100%;
	height: 83%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 150px;
	background: var(--color-text1);
	overflow: hidden;
	z-index: 0;
}
.private-prophy-package-container{
	width: 50%;
	height: 100%;
	position: absolute;
	right: 0;
	display: flex;
	flex-direction: column;
}
.private-prophy-customize-container{
	width: 50%;
	height: 100%;
	position: absolute;
	left: 0;
	display: flex;
	justify-content: center;
}
.skewed-div-panel{
	width: 63%;
	height: 1200px;
	background: var(--color-text3);
	transform: rotateZ(20deg);
	position: absolute;
	top: -500px;
	left: -17.4%;
	box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
	z-index: 0;
}
.private-prophy-customize-container h1{
	font-size: 4rem;
	margin-right: 15%;
	color: var(--color-primary);
}
.private-prophy-package-container h1{
	font-size: 4rem;
	margin-left: 22%;
	color: var(--color-primary);
}
.select-color-circle-container{
	width: 300px;
	height: 300px;
	position: absolute;
	top: 0;
	right: -4%;
}
.select-color-circle-container img{
	width: 120px;
	height: 120px;
	transform: rotateZ(-90deg);
	position: absolute;
	top: 35%;
	left: 0;
}
.select-color-circle{
	width: 150px;
	height: 150px;
	background: var(--color-primary);
	border-radius: 500px;
	color: var(--color-text3);
	font-size: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: absolute;
	right: 8%;
	top: 25%;
}
.select-color-circle p{
	margin-bottom: 10%;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
.prophy-product-container{
	position: absolute;
    width: 200px;
    height: 470px;
    display: inline-block;
	top: 100px;
	left: 200px;
	transform: rotateZ(20deg);
}
.base-image{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.background-layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.color-layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 2;
}
#bodyColorLayer{
  mask-image: url('./images/prophy-body-mask.png');
  -webkit-mask-image: url('./images/prophy-body-mask.png');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: #707070;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
#tipColorLayer{
  mask-image: url('./images/prophy-tip-mask.png');
  -webkit-mask-image: url('./images/prophy-tip-mask.png');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: #E6E6E6;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}
.controls{
	width: 20%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	left: 50%;
	top: 0;
	color: var(--color-primary);
	font-size: 1.5rem;
	z-index: 10;
}
input{
	cursor: pointer;
}
.body-color{
	position: absolute;
	right: -10%;
	top: 60%;
}
.tip-color{
	position: absolute;
	right: -40%;
	top: 40%;
}
.preview-wrapper{
    position: relative;
    display: inline-block;
    width: 600px;
	margin-left: 16%;
	pointer-events: none;
}

canvas{
    position: absolute;
    top: 12%;
    left: 13%;
    width: 68%;
    height: 75%;
}

#whiteLayerCanvas{
    z-index: 2;
    mix-blend-mode: normal;
}

#colorLayerCanvas{
    z-index: 1;
    mix-blend-mode: multiply;
}

#baseImage{
    width: 100%;
    z-index: 3;
    position: relative;
    display: block;
}

.tolerance-controls{
    max-width: 600px;
    text-align: center;
	position: absolute;
	top: -25%;
}
#toleranceRange{
	cursor: pointer;
}

.tolerance-controls label{
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
	color: var(--color-primary);
}

.slider-value{
    font-weight: bold;
}
.private-prophy-package-container a{
	text-decoration: none;
	display: flex;
	text-align: center;
	align-items: center;
	cursor: pointer;
}
.dlul-options-container{
	width: 500px;
	height: 180px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	position: absolute;
	bottom: 5%;
	right: 26.5%;
}
.private-prophy-package-container .button-link{
	width: 120px;
	height: 60%;
	border: none;
	position: absolute;
	left: 2%;
	background: var(--color-primary);
	border-radius: 10px;
	font-size: 1.8rem;
	font-weight: bold;
	color: var(--color-text3);
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	transition: all 300ms ease;
	z-index: 4;
}
.private-prophy-package-container .button-link:hover{
	background: var(--color-text3);
	color: var(--color-primary);
}
.package-example{
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: var(--color-text3);
	border-radius: 500px;
	font-size: 1.4rem;
	color: var(--color-primary);
	cursor: pointer;
	z-index: 20;
	position: relative;
	top: 45%;
	left: -1%;
	transition: all 300ms ease;
}
.package-example:hover{
	background: var(--color-primary);
	color: var(--color-text3);
}
.upload-btn{
	width: 120px;
	height: 60%;
	background: var(--color-primary);
	cursor: pointer;
	border-radius: 10px;
	font-size: 1.8rem;
	color: var(--color-text3);
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 2%;
	transition: all 300ms ease;
}
.upload-btn:hover{
	background: var(--color-text3);
	color: var(--color-primary);
}
#upload{
	display: none;
}
.prophy-package-btn-separator{
	width: 200px;
	height: 200px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}
.top-arrow, .bottom-arrow{
	width: 50%;
	height: 50%;
}
.top-arrow{
	position: absolute;
	top: 40px;
	left: 90px;
	transform: rotateY(180deg);
}
.bottom-arrow{
	position: absolute;
	bottom: 40px;
	right: 90px;
	transform: rotateX(180deg);
}
.dl-upload-circle{
	width: 100px;
	height: 100px;
	background: var(--color-text3);
	border-radius: 500px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-primary);
	font-size: 1.2rem;
	z-index: 3;
	pointer-events: none;
}
.instructions{
	width: 140px;
	height: 32px;
	font-size: 1.3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 16%;
	left: -9.5%;
	background: linear-gradient(90deg, var(--color-primary) 50%, transparent 50%), linear-gradient(90deg, var(--color-primary) 50%, transparent 50%), linear-gradient(0deg, var(--color-primary) 50%, transparent 50%), linear-gradient(0deg, var(--color-primary) 50%, transparent 50%);
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	background-size: 15px 3px, 15px 3px, 3px 15px, 3px 15px;
	background-position: left top, right bottom, left bottom, right top;
	animation: border-dance 500ms infinite linear;
	z-index: 4;
}
.instructions p{
	width: 140px;
	display: flex;
	justify-content: center;
}
.private-mask-info-container{
	width: 100%;
	height: 83%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 150px;
	background: var(--color-text1);
	overflow: hidden;
}
.skewed-div-panel-green{
	width: 1500px;
	height: 1200px;
	background: var(--color-primary);
	transform: rotateZ(50deg);
	position: absolute;
	bottom: -650px;
	right: 30%;
}
.private-mask-box-header{
	font-size: 4rem;
	margin-left: 35%;
	color: var(--color-primary);
}
.mask-options-container{
	width: 500px;
	height: 180px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	position: absolute;
	bottom: 5%;
	right: 5%;
}
.maskBox-upload-btn{
	width: 120px;
	height: 60%;
	background: var(--color-primary);
	cursor: pointer;
	border-radius: 10px;
	font-size: 1.8rem;
	color: var(--color-text3);
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 2%;
	transition: all 300ms ease;
}
#maskUpload{
	display: none;
}
.maskBox-upload-btn:hover{
	background: var(--color-text3);
	color: var(--color-primary);
}

.mask-package-btn-separator{
	width: 200px;
	height: 200px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}
.private-mask-info-container .button-link{
	width: 120px;
	height: 60%;
	border: none;
	cursor: pointer;
	position: absolute;
	left: 2%;
	text-decoration: none;
	display: flex;
	align-items: center;
	text-align: center;
	background: var(--color-primary);
	border-radius: 10px;
	font-size: 1.8rem;
	font-weight: bold;
	color: var(--color-text3);
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	transition: all 300ms ease;
}
.private-mask-info-container .button-link:hover{
	background: var(--color-text3);
	color: var(--color-primary);
}
.scene{
	position: absolute;
	right: 8%;
	bottom: 50%;
	perspective: 1000px;
}
.scaler{
	transform-origin: center;
	display: inline-block;
	perspective: 1000px;
}
.box-wrapper{
	transform-origin: center center;
	transform-style: preserve-3d;
	transition: transform 0.05s ease-out;
	transform: rotateX(-20deg) rotateY(0deg);
	cursor: grab;
}
.box{
    position: relative;
    width: 400px;
    height: 175px;
    transform-style: preserve-3d;
    animation: rotate 12s linear infinite;
}
@keyframes rotate{
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}
.box.paused{
	animation-play-state: paused;
}
.face{
    position: absolute;
    overflow: hidden;
    background: #333;
}
.face img{
	position: absolute;
	object-fit: none;
	top: 0;
	left: 0;
}
.front, .back{
    width: 400px;
    height: 175px;
}
.front{
    transform: translateZ(100px);
}
.back{
    transform: rotateY(180deg) translateZ(100px);
}
.left, .right{
    width: 200px;
    height: 175px;
}
.right{
    transform: rotateY(90deg) translateZ(300px);
}
.left{
    transform: rotateY(-90deg) translateZ(100px);
}
.top{
    width: 400px;
    height: 200px;
    transform: rotateX(-90deg) rotateY(180deg) translateZ(100px);
}
.mask-instructions{
	width: 140px;
	height: 32px;
	font-size: 1.3rem;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 16%;
	right: -10%;
	background: linear-gradient(90deg, var(--color-primary) 50%, transparent 50%), linear-gradient(90deg, var(--color-primary) 50%, transparent 50%), linear-gradient(0deg, var(--color-primary) 50%, transparent 50%), linear-gradient(0deg, var(--color-primary) 50%, transparent 50%);
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	background-size: 15px 3px, 15px 3px, 3px 15px, 3px 15px;
	background-position: left top, right bottom, left bottom, right top;
	animation: border-dance 500ms infinite linear;
	z-index: 4;
}
.mask-instructions p{
	padding-top: 4px;
}
.mask-instructions a{
	color: var(--color-primary);
	text-decoration: none;
	transition: all 300ms ease;
}
.mask-instructions a:hover{
	color: var(--color-text2);
	text-shadow: 0px 0px 4px black;
}
.box-example{
	width: 100px;
	height: 100px;
	background: var(--color-text3);
	border-radius: 500px;
	position: absolute;
	top: 12%;
	right: 44%;
	display: flex;
	text-align: center;
	align-items: center;
	font-size: 1.2rem;
	color: var(--color-primary);
	cursor: pointer;
	transition: 300ms;
}
.box-example:hover{
	background: var(--color-primary);
	color: var(--color-text3);
}
.mask-image-container{
	width: 300px;
	height: 230px;
	position: absolute;
	right: 42%;
	bottom: 6%;
	z-index: 10;
}
.mask-image-container img{
	width: 100%;
	height: 100%;
	transition: opacity 300ms ease-in-out;
}
.private-mask-leftside{
	width: 40%;
	height: 90%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}
.private-mask-leftside h1{
	font-size: 4rem;
	position: absolute;
	right: 5%;
	color: var(--color-primary);
}
.select-color-wrapper p{
	font-size: 2rem;
	color: var(--color-primary);
	padding-left: 50px;
	padding-top: 6px;
	position: absolute;
	top: 15%;
	right: 55%;
}
.private-mask-select-color{
	width: 60%;
	height: 50px;
	overflow: hidden;
	position: absolute;
	top: 15%;
}
.private-mask-select-color-skewed{
	width: 400px;
	height: 400px;
	background: var(--color-text1);
	transform: rotateZ(25deg);
	position: absolute;
	right: 60px;
	top: -220px;
}
.private-mask-colors{
	width: 90%;
	height: 75%;
	position: absolute;
	bottom: 0;
	display: flex;
	padding: 20px;
	flex-wrap: wrap;
}
.mask-color-container{
	width: 200px;
	height: 20px;
	display: flex;
	align-items: center;
	text-align: center;
	font-size: 1.5rem;
	color: var(--color-primary);
	justify-content: right;
	cursor: pointer;
}
.mask-color-container:hover{
	color: var(--color-secondary);
}
.private-mask-color{
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: 1px solid var(--color-secondary);
}
.mask-color-selected{
	border: 2px solid var(--color-text3);
}
.mask-color-selected.selected{
	border-radius: 5px;
	border: 2px solid red;
}
.mask-color1{
	background: #460e14;
}
.mask-color2{
	background: #d3bce6;
}
.mask-color3{
	background: #b2dcee;
}
.mask-color4{
	background: #dff06c;
}
.mask-color5{
	background: #fff0bb;
}
.mask-color6{
	background: #3d6846;
}
.mask-color7{
	background: #292929;
}
.mask-color8{
	background: #008acb;
}
.mask-color9{
	background: #9ac2ec;
}
.mask-color10{
	background: white;
}
.mask-color11{
	background: #c7ccc2;
}
.mask-color12{
	background: #fee259;
}
.mask-color13{
	background: #ffcecb;
}
.brands-section-container{
	width: 100%;
	height: 80vh;
	background: var(--color-primary);
	display: flex;
	justify-content: center;
	position: relative;
	flex-direction: column;
	display: none;
	background-size: 6rem;
	background-image: url(./images/Brand_Icon_light.svg);
	z-index: 1;
}
.brands-header{
	width: 100%;
	height: 150px;
	color: var(--color-text3);
	font-size: 2rem;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	text-shadow: 2px 2px 3px rgba(0,0,0,.6);
	animation: header-fade-in 2s;
}
.brands-info-container{
	width: 100%;
	height: 83%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 150px;
	background: var(--color-text3);
}
.brands-prophy-container{
	width: 80%;
	height: 38%;
	display: flex;
	position: absolute;
	top: 5%;
	right: 2%;
	cursor: pointer;
}
.brands-mask-container{
	width: 80%;
	height: 38%;
	display: flex;
	position: absolute;
	top: 50%;
	left: 2%;
	cursor: pointer;
}
.brands-prophy-bg{
	width: 70%;
	height: 100%;
	background: var(--color-primary);
	border-radius: 500px;
	display: flex;
	align-items: center;
	justify-content: left;
	position: absolute;
	left: 0;
}
.brands-mask-bg{
	width: 70%;
	height: 100%;
	background: var(--color-primary);
	border-radius: 500px;
	display: flex;
	align-items: center;
	justify-content: right;
	position: absolute;
	right: 0;
}
.brands-mask-bg p{
	font-size: 3rem;
	color: var(--color-text2);
	margin-right: 115px;
	margin-top: 120px;
}
.brand-prophy-logo{
	width: 220px;
	height: 220px;
	margin-left: 5%;
}
.brand-mask-logo{
	width: 300px;
	height: 120px;
	margin-right: 5%;
	position: absolute;
	top: 18%;
	right: 0;
}
.h1-title{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    position: absolute;
    top: 100px;
    margin: auto;
    font-weight: bold;
    color: var(--color-text3);
    text-shadow: 2px 2px 3px rgba(0,0,0,.6);
}
#categories, #machines, #specs {
    overflow-y: auto;
    padding: 20px;
    font-size: 1.2rem;
    color: var(--color-secondary);
    transition: all 0.3s ease;
}

#categories h3, #machines h3, #specs h3 {
    font-size: 1.8rem;
    color: var(--color-logo-orange);
}

#categories {
    width: 200px;
    background: var(--color-text3);
    border-right: 1px solid var(--color-primary);
}

#machines {
    width: 0;
    background: var(--color-text2);
    border-right: 1px solid var(--color-primary);
    opacity: 0;
    pointer-events: none;
}

#specs {
    flex-grow: 1;
    background: var(--color-text2);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
}

#specs h3 {
    margin-bottom: 20px;
}

.spec-section-container ul {
    list-style: none;
    padding: 0;
}

.spec-section-container li {
    padding: 10px;
    border-bottom: 1px solid var(--color-secondary);
    cursor: pointer;
}

.spec-section-container li:hover {
    background-color: var(--color-text4);
}

.spec-section-container li.active {
    background-color: var(--color-primary);
    color: var(--color-text2);
}

#spec-text {
    flex: 1;
    padding-bottom: 10px;
}

#spec-image img {
    max-width: 700px;
    max-height: 700px;
    border: 1px solid #ccc;
    padding: 5px;
}

.spec {
    margin-bottom: 10px;
 }
.machine-specs-section-container{
	width: 100%;
	height: 80vh;
	display: none;
	justify-content: center;
    flex-direction: column;
	background: var(--color-primary);
}
.spec-section-container{
    width: 100%;
    display: flex;
    flex-direction: row;
}
.footer{
	background: var(--color-secondary);
	width: 100%;
	height: 12.6vh;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	font-weight: bold;
	color: var(--color-alt-text-light);
	font-size: 1.2rem;
	position: absolute;
	bottom: 0;
	z-index: 10;
}
.separator{
	width: 1px;
	height: 100px;
	background: var(--color-text1);
}
.foot-block4{
	display: flex;
	flex-direction: column;
}
.darker-text{
	color: var(--color-logo-orange);
}
.footer p{
	opacity: 60%;
}
.footer a{
	color: var(--color-alt-text-light);
	text-decoration: none;
	display: flex;
	margin: 0.2rem;
}
.footer img{
	width: 2rem;
	height: 2rem;
	position: relative;
	bottom: .3rem;
}
@media screen and (min-width: 2560px) { /*2K*/
	
}
@media screen and (max-width: 1660px){
	.certifications{
		font-size: 1.5rem;
		position: absolute;
		left: 1%;
		top: 82%;
	}
	.naics-codes{
		right: 30px;
	}
	.mask-image-container{
		width: 250px;
		height: 180px;
		right: 43%;
	}
	.mask-options-container{
		width: 400px;
		height: 180px;
		bottom: 5%;
		right: 5%;
	}
	.maskBox-upload-btn{
		width: 100px;
		height: 50%;
	}
	.private-mask-info-container .button-link{
		width: 100px;
		height: 50%;
	}
	.instructions{
		left: -20%;
	}
	.prophy-product-container{
		left: 15%;
	}
	.mask-img-1{
		display: none;
	}
	.private-prophy-bg p{
		font-size: 4rem;
	}
	.private-mask-bg p{
		font-size: 4rem;
		margin-right: 4%;
	}
	.dlul-options-container{
		right: 18%;
	}
	.cap-info-upper p{
		font-size: 1.2rem;
	}
	.auto-info-upper p{
		font-size: 1.2rem;
	}
	.cap-content{
		width: 200px;
	}
	.cap-category, .auto-content{
		font-size: 1.5rem;
	}
	.cap-option{
		font-size: 1.2rem;
	}
}
@media screen and (max-width: 1440px){
	html{
		font-size: 14px;
		width: 100vw;
		height: auto;
		overflow-x: hidden;
	}
	body{
		background: var(--color-primary);
		width: 100%;
		min-height: 100%;
		overflow-x: hidden;
	}
	.page-container{
		width: 102%;
		height: auto;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	@keyframes mobile-fade-out{
		0%{
			width: 140%;
		}
		100%{
			width: 0;
		}
	}
	.machine-specs-circle-container{
		display: none;
	}
	.mobile-transition-wipe{
		width: 0;
		height: 100%;
		background-color: var(--color-transition);
		-webkit-mask-image: linear-gradient(to left, transparent, var(--color-transition) 20%);
		mask-image: linear-gradient(to left, transparent, var(--color-transition) 20%);
		z-index: 50;
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		animation: mobile-fade-out 1s;
	}
	#transition-circle-select{
		width: 0;
		height: 100%;
		background-color: var(--color-transition);
		-webkit-mask-image: linear-gradient(to left, transparent, var(--color-transition) 20%);
		mask-image: linear-gradient(to left, transparent, var(--color-transition) 20%);
		z-index: 50;
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		transition: all 1s ease;
	}
	#transition-circle-select.active{
		width: 140%;
	}
	.logo-menu-panel{
		height: 80px;
	}
	.mobile-logo-img{
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mobile-logo-img img{
		width: 60px;
		height: 60px;
	}
	#audioId, .logo-img, .usa, .certifications, .img-array, .swoosh, .circle-shadow-1, .circle-shadow-2, .circle-shadow-3, .main-option-panel br, .footer, .transition-wipe{
		display: none;
	}
	.logo-container{
		width: 500px;
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 20px;
		z-index: 11;
		pointer-events: none;
	}
	.mobile-logo-container{
		background: white;
		width: 2000px;
		height: 2000px;
		transform: rotateZ(-40deg);
		position: absolute;
		top: -1500px;
		left: -1100px;
		z-index: 10;
	}
	.main-options-container{
		background: none;
		width: 1000px;
		height: 500px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 50px;
		right: 0;
		z-index: 9;
		animation: options-fade-in 1.5s;
	}
	@keyframes options-fade-in{
		0%{
			opacity: 0;
		}70%{
			opacity: 0;
		}100%{
			opacity: 1;
		}
	}
	.main-option-panel{
		background: var(--color-secondary);
		width: 1500px;
		height: 100px;
		display: flex;
		justify-content: right;
		padding-right: 60px;
		padding-bottom: 12px;
		align-items: center;
		text-align: center;
		border-radius: 20px;
		z-index: 13;
		text-shadow: 2px 2px 4px rgba(0,0,0,.7);
		background-size: 7rem;
		box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
	}
	.main-option-panel p{
		color: var(--color-text1);
		font-size: 5rem;
		font-weight: bold;
	}
	.main-option-panel:hover p{
		color: var(--color-text3);
	}
	#contract{
		position: absolute;
		right: 50px;
		top: 450px;
	}
	#private{
		position: absolute;
		right: 50px;
		top: 250px;
	}
	#brands{
		position: absolute;
		right: 50px;
		top: 50px;
	}
	.mobile-swoosh-container{
		width: 800px;
		height: 600px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 50px;
		right: -2%;
		z-index: 8;
	}
	.mobile-swoosh-1, .mobile-swoosh-2, .mobile-swoosh-3{
		width: 500px;
	    height: 150px;
	    display: flex;
		transform: rotateZ(-10deg);
	    background: var(--color-logo-orange);
	    background-size: cover;
	    -webkit-clip-path: url(#swoosh-clip-path);
	    clip-path: url(#swoosh-clip-path);
	}
	.mobile-swoosh-1{
	    position: absolute;
	    right: 0;
		top: 60px;
	}
	.mobile-swoosh-2{
	    position: absolute;
	    right: 0;
		top: 260px;
	}
	.mobile-swoosh-3{
	    position: absolute;
	    right: 0;
		top: 460px;
	}
	.mobile-footer{
		background: var(--color-secondary);
		width: 100%;
		height: 800px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		font-weight: bold;
		color: var(--color-alt-text-light);
		font-size: 2rem;
		position: relative;
		bottom: 0;
		z-index: 10;
	}
	.mobile-separator-vertical{
		width: 1px;
		height: 55%;
		background: var(--color-text1);
		position: absolute;
		left: 51%;
		top: 5%;
	}
	.mobile-separator-horizontal-1{
		width: 80%;
		height: 1px;
		background: var(--color-text1);
		position: absolute;
		top: 30%;
	}
	.mobile-separator-horizontal-2{
		width: 80%;
		height: 1px;
		background: var(--color-text1);
		position: absolute;
		top: 60%;
	}
	.mobile-foot-block1{
		position: absolute;
		top: 35%;
		left: 10%;
	}
	.mobile-foot-block2{
		position: absolute;
		bottom: 15%;
		left: 10%;
	}
	.mobile-foot-block3{
		position: absolute;
		top: 12%;
		right: 10%;
	}
	.mobile-foot-block4{
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 35%;
		right: 10%;
	}
	.mobile-footer p{
		opacity: 60%;
	}
	.mobile-footer a{
		color: var(--color-alt-text-light);
		text-decoration: none;
		display: flex;
		margin: 0.2rem;
	}
	.mobile-footer img{
		width: 2rem;
		height: 2rem;
		position: relative;
		bottom: -.2rem;
	}
	.mobile-usa img{
		width: 200px;
		height: 200px;
		position: absolute;
		bottom: 10%;
		right: 10%;
	}
	.mobile-certifications{
		position: absolute;
		top: 8%;
		left: 10%;
	}
	.naics-codes{
		width: 100px;
		height: 100px;
		top: 48%;
		right: 1%;
		font-size: 1.2rem;
	}
	.contract-section-container{
		width: 100%;
		height: 1800px;
		position: relative;
	}
	#contract-circle-btn2, #private-circle-btn1{
		left: 10%;
	}
	#brands-circle-btn1, #private-circle-btn2{
		right: 10%;
	}
	#contract-circle-btn1{
		left: 20%;
	}
	#brands-circle-btn2{
		right: 20%;
	}
	.contract-separator{
		width: 100%;
		height: 16px;
		top: 48%;
		left: 0;
		background: var(--color-secondary);
	}
	.contract-info-container{
		height: 92%;
	}
	@keyframes mobile-capabilities-slide{
		from{
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
	.capabilities-container{
		width: 100%;
		height: 48%;
		background: var(--color-text3);
		animation: mobile-capabilities-slide 1.5s;
	}
	@keyframes mobile-automation-slide{
		from{
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
	.automation-container{
		width: 100%;
		height: 52%;
		top: 48%;
		background: var(--color-text3);
		animation: mobile-automation-slide 1.5s;
	}
	.mobile-contract-bg{
		width: 400px;
		height: 100%;
		background: var(--color-text1);
		position: absolute;
		left: 15%;
		top: 0;
		overflow: hidden;
	}
	.mobile-contract-bg-auto{
		width: 400px;
		height: 100%;
		background: var(--color-text1);
		position: absolute;
		right: 15%;
		top: 0;
		overflow: hidden;
	}
	.sphere1{
		width: 4000px;
		height: 4000px;
		background: var(--color-text3);
		border-radius: 4000px;
		position: absolute;
		top: -1600px;
		left: -3950px;
	}
	.sphere2{
		width: 4000px;
		height: 4000px;
		background: var(--color-text3);
		border-radius: 4000px;
		position: absolute;
		top: -1600px;
		right: -3950px;
	}
	#plasmaCutting-playBtn, #polish-playBtn, #inspect-playBtn{
		left: auto;
		right: 1%;
	}
	.capabilities-header{
		width: 400px;
		left: 15%;
		color: var(--color-primary);
		text-shadow: none;
	}
	.under-cap-header{
		width: 50%;
		height: 550px;
		position: absolute;
		right: 4%;
		left: auto;
	}
	.cap-info-default{
		color: var(--color-text1);
	}
	@keyframes cap-info-slide-in{
		from{
			transform: translateX(700px);
		}
		to{
			transform: translateX(0);
		}
	}
	.cap-info-upper p{
		font-size: 1.5rem;
		color: var(--color-logo-green);
		text-shadow: none;
	}
	.cap-info-lower{
		bottom: -10%;
		border: 1px solid black;
	}
	.cap-info-upper, .cap-info-lower{
		z-index: 4;
	}
	.cap-category {
	  font-size: 1.8rem;
	  text-align: center;
	  border-bottom: 1px solid var(--color-text3);;
	}
	.cap-category:hover{
		color: var(--color-text2);
		padding-right: 0;
		padding-left: 0.6rem;
	}
	.cap-content{
		width: 400px;
		top: 100px;
		left: 15%;
		text-align: center;
	}
	.cap-option{
		font-size: 1.5rem;
		padding-bottom: 0.4rem;
		color: var(--color-secondary);
	}
	.cap-option:hover{
		color: var(--color-text2);
		padding-right: 0;
		padding-left: 0.6rem;
		text-shadow: 1px 1px 2px rgba(0,0,0,.6);
	}
	.cap-option.chosen{
		color: var(--color-logo-orange);
	}
	.automation-header{
		width: 400px;
		right: 15%;
		color: var(--color-primary);
		text-shadow: none;
	}
	.under-auto-header{
		width: 50%;
		height: 550px;
		position: absolute;
		left: 2%;
		right: auto;
	}
	.auto-info-default{
		color: var(--color-text1);
	}
	@keyframes auto-info-slide-in{
		from{
			transform: translateX(-700px);
		}
		to{
			transform: translateX(0);
		}
	}
	.auto-info-upper p{
		font-size: 1.5rem;
		color: var(--color-logo-green);
		text-shadow: none;
	}
	.auto-info-lower{
		bottom: -10%;
		border: 1px solid black;
	}
	.auto-content{
		font-size: 1.8rem;
		width: 400px;
		top: 100px;
		right: 15%;
		left: auto;
		text-align: center;
	}
	.auto-option{
		padding-bottom: 0.4rem;
		color: var(--color-secondary);
	}
	.auto-option:hover{
		color: var(--color-text2);
		padding-left: 0;
		padding-right: 0.6rem;
		text-shadow: 1px 1px 2px rgba(0,0,0,.6);
	}
	.auto-option.chosen{
		color: var(--color-logo-orange);
	}
	.machine-specs{
		top: 2%;
		z-index: 15;
	}
	.machine-specs p{
		color: var(--color-logo-green);
		text-shadow: none;
	}
	.machine-specs p:hover{
		color: var(--color-text2);
		text-shadow: 0px 0px 4px black;
	}
	.private-prophy-container{
		right: 4%;
	}
	.private-prophy-bg p{
		font-size: 3.5rem;
	}
	.private-mask-bg p{
		font-size: 3.5rem;
		margin-right: 4%;
	}
	.prophy-img-1{
		width: 60px;
		height: 50%;
	}
	.prophy-img-2{
		width: 70px;
		height: 60%;
	}
	.prophy-img-3{
		width: 80px;
		height: 70%;
	}
	.prophy-img-4{
		display: none;
	}
	.mask-img-1{
		display: none;
	}
	.mask-img-2{
		display: none;
	}
	.mask-img-3{
		width: 200px;
		height: 60%;
	}
	.mask-img-4{
		width: 150px;
		height: 45%;
	}
	.prophy-circle-arrow-container{
		left: -5%;
	}
	.mask-circle-arrow-container{
		right: -5%;
	}
	.prophy-circle-arrow-container img{
		top: 60%;
		right: 60%;
	}
	.mask-circle-arrow-container img{
		bottom: 66%;
		left: 60%;
	}
	.select-color-circle-container{
		right: -10%;
	}
	.private-prophy-customize-container h1{
		font-size: 3rem;
	}
	.private-prophy-package-container h1{
		font-size: 3rem;
		margin-right: 20%;
		margin-left: auto;
		white-space: nowrap;
	}
	.prophy-product-container{
		left: 10%;
	}
	.preview-wrapper{
		width: 500px;
		margin-left: auto;
		margin-right: 5%;
		margin-top: 3%;
	}
	.instructions{
		bottom: 34%;
		left: -18%;
	}
	.mask-image-container{
		width: 250px;
		height: 180px;
		right: 43.5%;
	}
	.select-color-wrapper{
		white-space: nowrap;
	}
	.mask-options-container{
		width: 400px;
		height: 180px;
		bottom: 5%;
		right: 2%;
	}
	.maskBox-upload-btn{
		width: 100px;
		height: 50%;
	}
	.private-mask-info-container .button-link{
		width: 100px;
		height: 50%;
	}
	.brands-prophy-container{
		right: 4%;
	}
	.brands-mask-bg p{
		margin-right: 70px;
	}
	.brand-mask-logo{
		right: -25px;
	}
}
@media screen and (max-width: 1200px){
	.naics-codes{
		display: none;
	}
	.who-info2 p, .who-info2 ul, .naics-codes-container{
		font-size: 1.1rem;
	}
	.where-info p{
		font-size: 1.3rem;
	}
	.mask-image-container{
		width: 190px;
		height: 130px;
		right: 45%;
	}
	.select-color-wrapper{
		white-space: nowrap;
	}
	.select-color-wrapper p{
		right: 60%;
	}
	.select-color-circle-container{
		top: 6%;
	}
	.select-color-circle-container img{
		width: 80px;
		height: 80px;
		top: 35%;
		left: 15%;
	}
	.select-color-circle{
		width: 120px;
		height: 120px;
		font-size: 1.8rem;
		right: 16%;
	}
	.private-prophy-bg p{
		font-size: 3.2rem;
	}
	.private-mask-bg p{
		font-size: 3.2rem;
		margin-right: 4%;
	}
	.brands-mask-bg p{
		font-size: 2.8rem;
		margin-right: 60px;
		margin-top: 100px;
	}
	.brand-mask-logo{
		width: 280px;
		height: 100px;
		margin-right: 4%;
		top: 20%;
		right: -25px;
	}
	.dlul-options-container{
		right: 10%;
	}
	.box-example{
		background: var(--color-text1);
		top: 25%;
		right: 58%;
		z-index: 20;
	}
}
@media screen and (max-width: 1080px){
	.who-info, .what-info, .why-info, .where-info{
		width: 88%;
		overflow: visible;
	}
	.who-info h1, .what-info h1, .why-info h1, .where-info h1{
		font-size: 2.5rem;
	}
	.who-info2 p, .who-info2 ul, .naics-codes-container{
		font-size: 1.1rem;
	}
	.who-info2 .ul2{
		left: 56%;
	}
	.where-info p{
		font-size: 1.1rem;
	}
	.mobile-logo-container{
		left: -1300px;
	}
	.logo-container{
		width: 300px;
		height: 100px;
		top: 50px;
		left: 80px;
	}
	#logo{
		transform: scale(0.8);
	}
	.capabilities-header, .cap-content, .mobile-contract-bg{
		left: 0;
	}
	.automation-header, .auto-content, .mobile-contract-bg-auto{
		right: 0;
	}
	.cap-info-upper p, .auto-info-upper p{
		font-size: 1.3rem;
	}
	.private-circle-btn, .brands-circle-btn, .contract-circle-btn{
		width: 80px;
		height: 80px;
		top: 40px;
		font-size: 1.3rem;
	}
	.private-circle-btn:hover, .brands-circle-btn:hover, .contract-circle-btn:hover{
		font-size: 1.5rem;
	}
	#private-circle-btn1{
		left: 6%;
	}
	#brands-circle-btn1{
		right: 6%;
	}
	.machine-specs{
		top: 2%;
		left: 47%;
	}
	.select-color-circle-container{
		top: 6%;
	}
	.select-color-circle-container img{
		width: 80px;
		height: 80px;
		top: 35%;
		left: 15%;
	}
	.select-color-circle{
		width: 120px;
		height: 120px;
		font-size: 1.8rem;
		right: 16%;
	}
	.mask-options-container{
		width: 400px;
		height: 180px;
		bottom: 5%;
		right: 2%;
	}
	.maskBox-upload-btn{
		width: 80px;
		height: 35%;
		font-size: 1.4rem;
		right: 8%;
	}
	.private-mask-info-container .button-link{
		width: 80px;
		height: 35%;
		font-size: 1.4rem;
		left: 8%;
	}
	.prophy-circle-arrow-container{
		left: -2%;
	}
	.prophy-circle-arrow-container img{
		width: 80px;
		height: 80px;
		top: 55%;
		left: -125%;
		right: 0;
	}
	.mask-circle-arrow-container{
		width: 10%;
		height: 100%;
		position: absolute;
		right: -2%;
		bottom: -25%;
		animation: circle-arrow-fade-in 2s ease;
	}
	.mask-circle-arrow-container img{
		width: 80px;
		height: 80px;
		bottom: 61%;
		left: 95%;
	}
	#contract-circle-btn1{
		left: 18%;
		z-index: 15;
	}
	#brands-circle-btn2{
		right: 18%;
	}
	.private-prophy-bg p{
		font-size: 2.2rem;
	}
	.private-mask-bg p{
		font-size: 2.8rem;
		margin-right: 4%;
	}
	.brands-mask-bg p{
		font-size: 2.2rem;
		margin-right: 40px;
		margin-top: 60px;
	}
	.brand-prophy-logo{
		width: 150px;
		height: 150px;
		margin-left: 5%;
	}
	.brand-mask-logo{
		width: 240px;
		height: 60px;
		margin-right: 2%;
		top: 30%;
	}
	.private-mask-box-header{
		margin-left: 45%;
	}
	.machine-specs-section-container {
		height: auto;
	}
	.h1-title {
		font-size: 1.3rem;
		padding-bottom: 20px;
		text-align: center;
	}
	.spec-section-container {
		flex-direction: column;
	}
	#categories {
		margin-top: 100px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-right: none;
		background: var(--color-text3);
		padding: 0;
	}
	#categories h3 {
		display: block;
		font-size: 2rem;
		padding: 10px;
		margin: 0;
		width: 100%;
		text-align: center;
	}
	#categories ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding-bottom: 10px;
		padding-right: 5px;
		justify-content: center;
	}
	#categories li {
		white-space: nowrap;
		border: 1px solid var(--color-primary);
		border-radius: 4px;
	}
	#machines {
		width: 100%;
		opacity: 1 !important;
		pointer-events: auto !important;
		background: var(--color-text2);
		border-right: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
	}
	#machines h3 {
		font-size: 2rem;
		margin-bottom: 10px;
		text-align: center;
		width: 100%;
	}
	#machine-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 8px;
		padding: 0;
		list-style: none;
	}
	#machines li {
		white-space: nowrap;
		border: 1px solid var(--color-primary);
		border-radius: 4px;
	}
	#specs {
		flex-direction: column;
		gap: 20px;
	}
	#spec-image img {
		max-width: 100%;
		height: auto;
	}
	#spec-text {
		flex: none;
	}
}
@media screen and (max-width: 780px){
	.who-info, .what-info, .why-info, .where-info, .who-info2{
		top: 2rem;
		left: 3rem;
	}
	.who-info p{
		font-size: 1.2rem;
	}
	.who-info2{
		width: 50%;
		overflow: visible;
	}
	.who-info2 p, .who-info2 ul{
		font-size: 0.9rem;
	}
	.who-info2 ul{
		left: -10%;
	}
	.naics-codes-container{
		width: 35%;
		font-size: 0.7rem;
	}
	.who-info2 .ul2{
		left: 50%;
	}
	.brands-mask-bg p{
		font-size: 2.2rem;
		margin-right: 40px;
		margin-top: 60px;
	}
	.brand-prophy-logo{
		width: 140px;
		height: 140px;
		margin-left: 5%;
	}
	.brand-mask-logo{
		width: 240px;
		height: 60px;
		margin-right: 2%;
		top: 30%;
	}
	.under-cap-header{
		width: 45%;
	}
	.cap-info-lower, .auto-info-lower{
		height: 50%;
	}
	.dlul-options-container{
		width: 400px;
		height: 140px;
	}
	.top-arrow, .bottom-arrow{
		width: 35%;
		height: 35%;
	}
	.dl-upload-circle{
		width: 80px;
		height: 80px;
		font-size: 1rem;
	}
	.preview-wrapper{
		width: 350px;
		margin-top: 20%;
	}
	.instructions{
		bottom: 40%;
		left: 20%;
	}
	.private-prophy-info-container h1{
		font-size: 2.2rem;
	}
	.select-color-circle-container{
		width: 180px;
		height: 180px;
	}
	.select-color-circle-container img{
		width: 50px;
		height: 50px;
		left: 0;
	}
	.select-color-circle{
		width: 100px;
		height: 100px;
		font-size: 1.4rem;
	}
	.prophy-product-container{
		width: 100px;
		height: 240px;
		top: 320px;
		left: 80px;
	}
	.controls{
		width: 50%;
		left: 15%;
		top: 0;
	}
	.body-color{
		right: 0;
		top: 35%;
	}
	.tip-color{
		right: 0;
		top: 25%;
	}
	.tolerance-controls{
		top: -45%;
	}
	.mask-options-container{
		right: -4%;
	}
	.maskBox-upload-btn{
		right: 15%;
	}
	.private-mask-info-container .button-link{
		left: 15%;
	}
	.private-mask-colors{
		width: 60%;
	}
	.scene{
		right: 2%;
	}
	.scaler{
		transform: scale(0.7);
	}
	.private-mask-select-color-skewed{
		right: 10px;
	}
	.select-color-wrapper p{
		right: 50%;
	}
	.mask-image-container{
		right: 47.5%;
	}
	.box-example{
		right: 60%;
	}
}
@media screen and (max-width: 600px){
	body{
		background: var(--color-secondary);
	}
	#audioId{
		top: 82px;
	}
	.menuBtn{
		width: 80px;
		font-size: 16px;
	}
	.menuBtn:hover{
		font-size: 19px;
	}
	.main-section-container{
		height: 550px;
		background: var(--color-primary);
	}
	.logo-menu-panel{
		height: 80px;
	}
	.mobile-logo-img img{
		width: 40px;
		height: 40px;
	}
	.menu-container{
		height: 80vh;
	}
	@keyframes slide-down{
		0%{
			top: -50%;
		}
		100%{
			top: 2rem;
		}
	}
	@keyframes slide-up{
		from{
			top: 2rem;
		}
		to{
			top: -50%;
		}
	}
	.who-info, .what-info, .why-info, .where-info, .who-info2{
		top: 5%;
		left: 6%;
	}
	.who-info p{
		font-size: 1.7rem;
	}
	.who-info2{
		width: 90%;
	}
	.who-info2 p, .who-info2 ul{
		font-size: 1.4rem;
	}
	.who-info2 p{
		top: 46%;
	}
	.who-info2 ul{
		left: 15%;
		bottom: 5%;
	}
	.naics-codes-container{
		width: 90%;
		font-size: 1.2rem;
		top: -18%;
	}
	.who-info2 .ul2{
		left: 15%;
		bottom: -2%;
	}
	.what-info p, .why-info p{
		font-size: 1.8rem;
	}
	.where-info p{
		font-size: 1.5rem;
	}
	.logo-container{
		top: 0;
		left: 20px;
		pointer-events: none;
	}
	.logo-container img{
		width: 320px;
		height: 80px;
		left: -70px;
		top: 50px;
	}
	.mobile-logo-container{
		left: -1600px;
	}
	.main-option-panel{
		width: 1000px;
		height: 80px;
		background-size: 5.5rem;
	}
	.main-option-panel p{
		font-size: 3rem;
	}
	#contract{
		right: 30px;
		top: 320px;
	}
	#private{
		right: 30px;
		top: 180px;
	}
	#brands{
		right: 30px;
		top: 30px;
	}
	.contract-popup h2, .private-popup h2, .brands-popup h2{
		font-size: 1.5rem;
	}
	.contract-popup p, .private-popup p, .brands-popup p{
		font-size: 1.3rem;
	}
	.popup-left{
		left: 15%;
		top:22%;
	}
	.popup-right{
		right: 15%;
		top: 22%;
	}
	.popup-bottom{
		padding: 30px;
	}
	.contract-popup, .private-popup, .brands-popup{
		width: 350px;
	}
	.contract-popup, .private-popup, .brands-popup{
		top: 60px;
		left: 12%;
	}
	.contract-popup.show, .private-popup.show, .brands-popup.show {
		pointer-events: none;
	}
	.mobile-swoosh-1, .mobile-swoosh-2, .mobile-swoosh-3{
		width: 300px;
	    height: 120px;
	}
	.mobile-swoosh-1{
		top: 40px;
	}
	.mobile-swoosh-2{
		top: 190px;
	}
	.mobile-swoosh-3{
		top: 330px;
	}
	.mobile-footer{
		font-size: 1.2rem;
	}
	.mobile-foot-block1{
		top: 38%;
	}
	.mobile-foot-block2{
		bottom: 15%;
	}
	.mobile-foot-block4{
		top: 38%;
	}
	.mobile-footer img{
		width: 30px;
		height: 30px;
		padding-bottom: 5px;
	}
	.mobile-usa img{
		width: 150px;
		height: 150px;
		position: absolute;
		bottom: 18%;
		right: 5%;
	}
	.mobile-certifications{
		top: 12%;
	}
	.contract-header{
		font-size: 0.9rem;
	}
	.contract-section-container{
		height: 1880px;
	}
	.mobile-contract-bg, .mobile-contract-bg-auto{
		width: 100%;
		height: 50%;
	}
	.capabilities-header{
		left: auto;
	}
	.cap-content{
		width: 200px;
		top: 90px;
		right: 0;
		left: 2%;
	}
	.cap-category-group {
		display: flex;
		flex-direction: row;
	}
	.cap-category{
		font-size: 1.6rem;
		flex-shrink: 0;
		text-align: left;
	}
	.cap-options-list {
		position: absolute;
		top: 0;
		left: 220px;
		display: none;
		flex-direction: column;
		padding: 0.1rem;
		z-index: 20;
	}
	.cap-options-list.show {
		display: flex;
	}
	.cap-category.active + .cap-options-list {
		display: none;
	}
	.cap-option:hover{
		padding-left: 0;
		padding-right: 0;
	}
	.under-cap-header, .under-auto-header{
		width: 90%;
		height: 40%;
		top: 50%;
		right: auto;
		left: 2%;
	}
	.cap-info-lower{
		bottom: -18%;
	}
	.machine-specs{
		top: 6px;
		left: 2%;
		background: linear-gradient(90deg, var(--color-logo-green) 50%, transparent 50%), linear-gradient(90deg, var(--color-logo-green) 50%, transparent 50%), linear-gradient(0deg, var(--color-logo-green) 50%, transparent 50%), linear-gradient(0deg, var(--color-logo-green) 50%, transparent 50%);
		background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
		background-size: 15px 3px, 15px 3px, 3px 15px, 3px 15px;
	}
	.automation-header{
		right: auto;
	}
	.auto-content{
		width: 300px;
		height: 100px;
		top: 90px;
		right: auto;
		left: auto;
	}
	.auto-info-lower{
		left: 2%;
		bottom: -18%;
	}
	#machineDesign-playBtn{
		right: auto;
	}
	video{
		width: 320px;
		height: 197.5px;
	}
	.close{
		margin-left: 300px;
	}
	.sphere1, .sphere2{
		display: none;
	}
	#contract-circle-btn2, #private-circle-btn1{
		left: 8%;
	}
	#brands-circle-btn1, #private-circle-btn2{
		right: 8%;
	}
	#contract-circle-btn1{
		left: 8%;
	}
	#brands-circle-btn2{
		right: 8%;
	}
	.private-header{
		font-size: 1.6rem;
	}
	.private-mask-container{
		width: 95%;
		height: 200px;
		left: 2%;
	}
	.private-prophy-container{
		width: 95%;
		height: 200px;
		top: 10%;
		right: 3%;
	}
	@keyframes prophy-capsule-slide{
		0%{
			transform: translateX(-150px);
		}10%{
			transform: translateX(-150px);
		}100%{
			transform: translateX(0);
		}
	}
	@keyframes mask-capsule-slide{
		0%{
			transform: translateX(150px);
		}10%{
			transform: translateX(150px);
		}100%{
			transform: translateX(0);
		}
	}
	.private-prophy-bg p{
		font-size: 1.5rem;
	}
	.private-mask-bg p{
		font-size: 1.8rem;
	}
	.prophy-img-1{
		width: 60px;
		height: 130px;
	}
	.prophy-img-2{
		width: 70px;
		height: 160px;
	}
	.prophy-img-3{
		display: none;
	}
	.mask-img-3{
		width: 200px;
		height: 140px;
	}
	.mask-img-4{
		display: none;
	}
	.prophy-circle-arrow-container{
		top: -70%;
		left: 30%;
		pointer-events: none;
	}
	.mask-circle-arrow-container{
		bottom: -70%;
		right: 30%;
		pointer-events: none;
	}
	.private-prophy-circle{
		width: 100px;
		height: 100px;
		font-size: 0.9rem;
		top: 40px;
	}
	.private-mask-circle{
		width: 100px;
		height: 100px;
		font-size: 0.9rem;
		bottom: 40px;
	}
	.prophy-circle-arrow-container img{
		width: 60px;
		height: 60px;
		top: 80px;
		right: 0;
		left: -120px;
		transform: rotateZ(240deg);
	}
	.mask-circle-arrow-container img{
		width: 60px;
		height: 60px;
		bottom: 80px;
		left: 106px;
		transform: rotateZ(-300deg);
	}
	.private-prophy-header{
		font-size: 1.4rem;
	}
	.prophy-vid-btn{
		width: 80px;
		height: 80px;
		top: 35px;
		right: 35px;
		font-size: 1.5rem;
	}
	.skewed-div-panel{
		display: none;
	}
	.package-example{
		width: 80px;
		height: 80px;
		font-size: 1rem;
		top: 78%;
		left: -35%;
	}
	.private-prophy-content-container{
		height: 1200px;
	}
	.private-prophy-info-container{
		height: 88%;
	}
	.private-prophy-customize-container{
		width: 100%;
		height: 50%;
		background: var(--color-text3);
		box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
	}
	.private-prophy-package-container{
		width: 100%;
		height: 50%;
		top: 50%;
		align-items: center;
	}
	.select-color-circle-container{
		right: 0;
	}
	.select-color-circle-container img{
		width: 60px;
		height: 60px;
		top: 60%;
		left: 0;
		transform: rotateZ(-120deg);
	}
	.controls{
		width: 40%;
		left: 50%;
		top: 20%;
	}
	.private-prophy-customize-container h1{
		font-size: 2rem;
		position: absolute;
		top: 10px;
		margin-left: 60px;
	}
	.private-prophy-package-container h1{
		font-size: 2rem;
		margin-top: 10px;
		margin-right: 0;
		margin-left: 0;
		white-space: nowrap;
	}
	.prophy-product-container{
		width: 120px;
		height: 260px;
		top: 25%;
		left: 15%;
	}
	.preview-wrapper{
		width: 350px;
		margin-left: auto;
		margin-right: 13%;
		margin-top: 3%;
		pointer-events: none;
	}
	.instructions{
		bottom: 45%;
		left: 4%;
	}
	.private-mask-content-container{
		height: 1400px;
	}
	.private-mask-info-container{
		height: 90%;
	}
	.skewed-div-panel-green{
		background: none;
	}
	.private-mask-leftside{
		width: 100%;
		height: 50%;
		background: var(--color-text3);
		box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
	}
	.private-mask-box-header{
		font-size: 3rem;
		margin-left: 0;
		position: absolute;
		bottom: 45%;
	}
	.private-mask-leftside h1{
		font-size: 3rem;
		right: 0;
		left: 30%;
	}
	.scene{
		right: 10%;
		bottom: 22%;
	}
	.mask-image-container{
		width: 200px;
		height: 150px;
		right: 5%;
		bottom: 0;
		top: 22%;
		z-index: 20;
	}
	.private-mask-colors{
		left: -50px;
	}
	.mask-options-container{
		width: 400px;
		height: 180px;
		bottom: 2%;
		right: 10%;
	}
	.mask-package-btn-separator{
		pointer-events: none;
	}
	.mask-instructions{
		top: 17%;
		right: 10%;
	}
	.box-example{
		background: var(--color-text3);
		top: 53%;
		right: 0;
		left: 5%;
		font-size: 1.2rem;
		color: var(--color-primary);
	}
	.box-example:hover{
		background: var(--color-primary);
		color: var(--color-text3);
	}
	.brands-prophy-container{
		width: 95%;
		height: 200px;
		right: 3%;
	}
	.brands-prophy-bg img{
		width: 120px;
		height: 120px;
	}
	.brands-mask-container{
		width: 95%;
		height: 200px;
		left: 2%;
	}
	.brands-mask-bg p{
		font-size: 26px;
		margin-right: 22px;
	}
	.brand-mask-logo{
		right: -50px;
	}
}
@media screen and (min-width: 360px) and (max-width: 590px) and (orientation: portrait){
	body{
		background: var(--color-secondary);
	}
	.main-section-container{
		background: var(--color-primary);
	}
	.menuBtn{
		width: 60px;
		font-size: 14px;
	}
	.menuBtn:hover{
		font-size: 17px;
	}
	.who-info p{
		font-size: 1.3rem;
	}
	.who-info2 p, .who-info2 ul{
		font-size: 1rem;
	}
	.who-info2 p{
		top: 46%;
	}
	.who-info2 ul{
		left: 15%;
		bottom: 5%;
	}
	.naics-codes-container{
		font-size: 0.8rem;
		top: -18%;
	}
	.who-info2 .ul2{
		left: 15%;
		bottom: -2%;
	}
	.what-info p, .why-info p{
		font-size: 1.3rem;
	}
	.where-info p{
		font-size: 1.1rem;
	}
	.mobile-logo-img{
		width: 40px;
		height: 40px;
	}
	.main-option-panel{
		width: 1000px;
		height: 60px;
		background-size: 4rem;
	}
	.main-option-panel p{
		font-size: 2rem;
	}
	#contract{
		top: 300px;
	}
	#private{
		top: 180px;
	}
	#brands{
		top: 60px;
	}
	.mobile-swoosh-1, .mobile-swoosh-2, .mobile-swoosh-3{
		right: -10%;
	}
	.mobile-swoosh-1{
		top: 70px;
	}
	.mobile-swoosh-2{
		top: 190px;
	}
	.mobile-swoosh-3{
		top: 310px;
	}
	.mobile-footer{
		font-size: 0.9rem;
	}
	.contract-circle-btn, .private-circle-btn, .brands-circle-btn{
		width: 50px;
		height: 50px;
		top: 50px;
		font-size: 1rem;
	}
	#contract-circle-btn2, #private-circle-btn1{
		left: 5%;
	}
	#brands-circle-btn1, #private-circle-btn2{
		right: 5%;
	}
	#contract-circle-btn1{
		left: 5%;
	}
	#brands-circle-btn2{
		right: 5%;
	}
	.cap-info-upper p, .auto-info-upper p{
		font-size: 1.1rem;
	}
	.cap-content{
		width: 180px;
	}
	.cap-options-list {
		width: 200px;
		top: 70px;
		left: 150px;
		text-align: right;
		justify-content: right;
	}
	.prophy-circle-arrow-container{
		top: -140px;
		left: 35%;
	}
	.prophy-circle-arrow-container img{
		top: 80px;
		right: 0;
		left: -125px;
	}
	.mask-circle-arrow-container{
		right: 35.6%;
		bottom: -140px;
	}
	.mask-circle-arrow-container img{
		left: 100px;
	}
	.private-prophy-bg p{
		font-size: 1.3rem;
	}
	.private-mask-container{
		height: 120px;
		top: 44%;
	}
	.private-prophy-container{
		height: 120px;
		top: 15%;
	}
	.private-mask-bg p{
		font-size: 1.6rem;
	}
	.prophy-img-1{
		width: 38px;
		height: 80px;
	}
	.prophy-img-2{
		width: 46px;
		height: 100px;
	}
	.mask-img-3{
		width: 150px;
		height: 100px;
	}
	.brands-prophy-container{
		height: 120px;
		top: 15%;
	}
	.brands-mask-container{
		height: 120px;
		top: 44%;
	}
	.brands-prophy-bg img{
		width: 85px;
		height: 85px;
	}
	.brand-mask-logo{
		width: 210px;
		height: 45px;
		right: -55px;
	}
	.brands-mask-bg p{
		font-size: 18px;
		margin-right: 18px;
	}
	.private-prophy-header{
		font-size: 1.3rem;
	}
	.prophy-vid-btn{
		width: 60px;
		height: 60px;
		top: 45px;
		right: 20px;
		font-size: 1.2rem;
	}
	.select-color-circle-container{
		top: 60%;
		right: 0;
	}
	.select-color-circle-container img{
		top: 15px;
		left: 10px;
		transform: rotateZ(-45deg) rotateY(180deg);
	}
	.controls{
		width: 60%;
		left: auto;
		right: 5%;
		top: 20%;
	}
	.preview-wrapper{
		margin-right: 3%;
	}
	.dlul-options-container{
		width: 360px;
		right: 5px;
	}
	.tolerance-controls{
		top: -40px;
	}
	.instructions{
		left: auto;
	}
	.private-mask-leftside h1{
		right: auto;
		left: 25%;
	}
	.mask-instructions{
		right: 10px;
	}
	.mask-instructions .tooltip-ms{
		left: -50px;
	}
	.mask-instructions .tooltip-ms .tipTip{
		left: 130px;
	}
	.scene{
		right: auto;
	}
	.mask-options-container{
		right: auto;
	}
	.box-example{
		width: 60px;
		height: 60px;
		top: 55%;
		font-size: 0.9rem;
	}
}