* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html{
	max-height: 100%;
	max-width: 100%;
	overflow-x: clip;
	overflow-y: clip;
	font-size: 15px;
}
body {
  width: 100%;
  height: 100%;
  margin: 0%;
  padding: 0%;
	background: #ffffff;
	font-family: exo;
}
header{
	width:100%;
	height: 10%;
	background: var(--primarysitecolor);
}

.maintitle {
	width: 50%;
	height: 10%;
	position: absolute;
	top: 0%;
	left: 25%;
}
.maintitle img{
	width: 80%;
	position: absolute;
	left: 10%;
	bottom: 0%;
}

.hamburgerbutton, .nohamburgerbutton {
	height: 80%;
	aspect-ratio: 1/1;
	border: none;
	color: white;
	background: transparent;
	position: absolute;
	top: 10%;
	right: -15%;
	cursor: pointer;
}

.hamburgerbutton{
	visibility: var(--nonavigationvis);
}

.nohamburgerbutton{
	visibility: var(--navigationvis);
}

.menu{
	visibility: var(--navigationvis);
	font-family: exo;
	font-weight: bold;
	text-align: center;
	font-size: 2rem;
	padding-top: 0.5%;
	color: white;
	background: var(--tertiarysitecolor);
	width: 100%;
	height: 7%;
	top: 14%;
	position: absolute;
	filter: drop-shadow(#000000 0px 10px 10px);
}

.faqbutton:hover, .custombutton:hover, .contactbutton:hover, .shopbutton:hover{
	opacity: 0.7;
}

.faqbutton{
	height: 20%;
	width: 20%;
	border: none;
	color: white;
	background: transparent;
	position: absolute;
	top: 0%;
	left: 2%;
	font-family: exo;
	font-size: 1.66rem;
	cursor: pointer;
}

.custombutton{
	height: 20%;
	width: 20%;
	border: none;
	color: white;
	background: transparent;
	position: absolute;
	top: 0%;
	left: 25%;
	font-family: exo;
	font-size: 2rem;
	cursor: pointer;
}

.contactbutton{
	height: 20%;
	width: 20%;
	border: none;
	color: white;
	background: transparent;
	position: absolute;
	top: 0%;
	right: 25%;
	font-family: exo;
	font-size: 2rem;
	cursor: pointer;
}

.shopbutton{
	height: 20%;
	width: 20%;
	border: none;
	color: white;
	background: transparent;
	position: absolute;
	top: 0%;
	right: 2%;
	font-family: exo;
	font-size: 2rem;
	cursor: pointer;
}

.infobar{
	font-family: exo;
	font-weight: bold;
	text-align: center;
	font-size: 1.5rem;
	padding-top: 0.5%;
	color: white;
	background: var(--secondarysitecolor);
	width: 100%;
	height:4%;
	top: 10%;
	position: absolute;
}

.bruce{
	width: 12%;
	height: 37%;
	position: absolute;
	background: transparent;
	left: var(--brucel);
	top: var(--brucet);
	visibility: var(--brucevis);
}

.bruceimages{
	position: absolute;
	width: 100%;
	height: 66%;
	top: 0%;
}
.bruceimages img{
	width: 100%;
	top: 0%;
	position: absolute;
	left: 0%;
}
.brucetop img{
	margin-left: 0.3%;
	margin-top: 0.7%;
}
.brucepopimages img{
	width: 100%;
	top: 0%;
	position: absolute;
	left: 0%;
}
.brucepoptop img{
	margin-left: 0.3%;
	margin-top: 0.7%;
}
.brucetext{
	position: absolute;
	bottom: 0%;
	height: 33%;
	border: none;
	background: white;
	border-radius: 0.66rem;
	padding-left: 5%;
	padding-right: 5%;
	filter: drop-shadow(#000000 3px 3px 10px);

}
.brucetext p{
	font-size: var(--brucefont);
	text-align: center;
	padding-top: 5%;
	color: black;
	font-family: exo;
}

.brucebutton{
	position: absolute;
	height: 10%;
	width: 40%;
	font-size: 1rem;
	text-align: center;
	padding-top: 1%;
	color: black;
	background: white;
	font-family: exo;
	top: 45%;
	left: 2%;	
}

.hidingbruce{
	position: fixed;
	background: transparent;
	width: 10%;
	aspect-ratio: 2/1;
	left: 10%;
	top: -1%;
	border: none;
	visibility: var(--brucehiddenvis);
}

.hidingbrucebutton img{
	width: 100%;
	height: 100%;
}

.hidingbrucebutton{
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
}

@font-face {
  font-family: college;
  src: url(fonts/college.bold.ttf);
}
@font-face {
  font-family: exo;
  src: url(fonts/exo.extra-bold.otf);
}
@font-face {
  font-family: cc ultimatum;
  src: url(fonts/CCUltimatumMass-Heavy.otf);
}
@font-face {
  font-family: garute;
  src: url(fonts/garute.black.ttf);
}
@font-face {
  font-family: yeasty flavors;
  src: url(fonts/yeasty-flavors.regular.ttf);
}
@font-face {
  font-family: playball;
  src: url(fonts/playball.regular.ttf);
}
@font-face {
  font-family: sf sports night;
  src: url(fonts/sf-sports-night.regular.ttf);
}
@font-face {
  font-family: pricedown;
  src: url(fonts/pricedown.bl-regular.otf);
}
@font-face {
  font-family: ethnocentric;
  src: url(fonts/ethnocentric.rg-regular.otf);
}
@font-face {
  font-family: serpentine;
  src: url(fonts/serpentineEF-Bolditalic.otf);
}
@font-face {
  font-family: aurach;
  src: url(fonts/aurach.heavy.ttf);
}
@font-face {
  font-family: fortuner;
  src: url(fonts/FortunerHeavy-jEMyR.otf);
}
@font-face {
  font-family: cowboy;
  src: url(fonts/cowboy.otf);
}
@font-face {
  font-family: streetwear;
  src: url(fonts/streetwear.regular.otf);
}

:root {
	--brucevis: visible;
	--brucehiddenvis: hidden;
	--brucel: 20%;
	--brucet: 3%;
	--brucefont: 1rem;

	--navigationvis: hidden;
	--nonavigationvis: visible;

	--styleback: var(--tertiarysitecolor);
	--colorback: var(--primarysitecolor);
	--logoback: var(--primarysitecolor);
	--textureback: var(--primarysitecolor);
	--addonback: var(--primarysitecolor);
	--completeback: var(--primarysitecolor);

	--detailsback: var(--tertiarysitecolor);
	--helmetback: var(--primarysitecolor);
	--cageback: var(--primarysitecolor);
	--strapsback: var(--primarysitecolor);

	--topback: var(--tertiarysitecolor);	
	--bottomback: var(--tertiarysitecolor);	
	--leftback: var(--tertiarysitecolor);	
	--rightback: var(--tertiarysitecolor);	
	--backback: var(--tertiarysitecolor);	

	--topaddonback: var(--tertiarysitecolor);	
	--bottomaddonback: var(--tertiarysitecolor);	
	--leftaddonback: var(--tertiarysitecolor);	
	--rightaddonback: var(--tertiarysitecolor);	
	--backaddonback: var(--tertiarysitecolor);	

	--styleback2: 4px solid white;
	--colorback2: 0px solid white;
	--logoback2: 0px solid white;
	--textureback2: 0px solid white;
	--addonback2: 0px solid white;
	--completeback2: 0px solid white;

	--topaddvis: hidden;
	--bottomaddvis: hidden;
	--leftaddvis: hidden;
	--rightaddvis: hidden;
	--backaddvis: hidden;

	--topborder: 1.5px 1.5px 0px white, -1.5px 1.5px 0px white, 1.5px -1.5px 0px white, -1.5px -1.5px 0px white,
	6px 6px 0px #000000, -6px 6px 0px #000000, 6px -6px 0px #000000, -6px -6px 0px #000000,
	6px 0px 0px #000000,  0px 6px 0px #000000, 0px -6px 0px #000000, -6px 0px 0px #000000,
	6px 3px 0px #000000, -3px 6px 0px #000000, 6px -3px 0px #000000, -3px -6px 0px #000000,
	3px 0px 0px #000000,  0px 3px 0px #000000, 0px -3px 0px #000000, -3px 0px 0px #000000;

	--bottomborder: 1.5px 1.5px 0px white, -1.5px 1.5px 0px white, 1.5px -1.5px 0px white, -1.5px -1.5px 0px white,
	6px 6px 0px #000000, -6px 6px 0px #000000, 6px -6px 0px #000000, -6px -6px 0px #000000,
	6px 0px 0px #000000,  0px 6px 0px #000000, 0px -6px 0px #000000, -6px 0px 0px #000000,
	6px 3px 0px #000000, -3px 6px 0px #000000, 6px -3px 0px #000000, -3px -6px 0px #000000,
	3px 0px 0px #000000,  0px 3px 0px #000000, 0px -3px 0px #000000, -3px 0px 0px #000000;

	--leftborder: 1.5px 1.5px 0px white, -1.5px 1.5px 0px white, 1.5px -1.5px 0px white, -1.5px -1.5px 0px white,
	6px 6px 0px #000000, -6px 6px 0px #000000, 6px -6px 0px #000000, -6px -6px 0px #000000,
	6px 0px 0px #000000,  0px 6px 0px #000000, 0px -6px 0px #000000, -6px 0px 0px #000000,
	6px 3px 0px #000000, -3px 6px 0px #000000, 6px -3px 0px #000000, -3px -6px 0px #000000,
	3px 0px 0px #000000,  0px 3px 0px #000000, 0px -3px 0px #000000, -3px 0px 0px #000000;

	--rightborder: 1.5px 1.5px 0px white, -1.5px 1.5px 0px white, 1.5px -1.5px 0px white, -1.5px -1.5px 0px white,
	6px 6px 0px #000000, -6px 6px 0px #000000, 6px -6px 0px #000000, -6px -6px 0px #000000,
	6px 0px 0px #000000,  0px 6px 0px #000000, 0px -6px 0px #000000, -6px 0px 0px #000000,
	6px 3px 0px #000000, -3px 6px 0px #000000, 6px -3px 0px #000000, -3px -6px 0px #000000,
	3px 0px 0px #000000,  0px 3px 0px #000000, 0px -3px 0px #000000, -3px 0px 0px #000000;

	--backborder: 1.5px 1.5px 0px white, -1.5px 1.5px 0px white, 1.5px -1.5px 0px white, -1.5px -1.5px 0px white,
	6px 6px 0px #000000, -6px 6px 0px #000000, 6px -6px 0px #000000, -6px -6px 0px #000000,
	6px 0px 0px #000000,  0px 6px 0px #000000, 0px -6px 0px #000000, -6px 0px 0px #000000,
	6px 3px 0px #000000, -3px 6px 0px #000000, 6px -3px 0px #000000, -3px -6px 0px #000000,
	3px 0px 0px #000000,  0px 3px 0px #000000, 0px -3px 0px #000000, -3px 0px 0px #000000;

	--invperc: 19%;
	--sepperc: 33%;
	--satperc: 3255%;
	--briperc: 96%;
	--conperc: 96%;
	--hueperc: 249deg;

	--invperc2: none;
	--sepperc2: 0%;
	--satperc2: 0%;
	--briperc2: 0%;
	--conperc2: 0%;
	--hueperc2: 0deg;

	--invperc3: 0%;
	--sepperc3: 0%;
	--satperc3: 0%;
	--briperc3: 0%;
	--conperc3: 0%;
	--hueperc3: 0deg;

	--invhel: 100%;
	--sephel: 0%;
	--sathel: 1166%;
	--brihel: 114%;
	--conhel: 101%;
	--huehel: 5deg;

 	--primarycolor: #572A84;
 	--secondarycolor: black;
 	--tertiarycolor: #717073;

 	--primarysitecolor: #572A84;
 	--secondarysitecolor: black;
 	--tertiarysitecolor: #717073; 	

 	--outlinenobvis: hidden;
 	--outlinenobblackvis: hidden;
 	--strapscanvasvis: hidden;

 	--stylevis: visible;
 	--colorvis: hidden;
 	--logovis: hidden;
 	--texturevis: hidden;
 	--addonvis: hidden;
 	--completevis: hidden;

 	--detailsvis: visible;
 	--helmetvis: hidden;
 	--cagevis: hidden;
 	--strapsvis: hidden;

 	--brandselect: white;

 	--bauervis: hidden;
 	--ccmvis: hidden;
 	--warriorvis: hidden;
 	--othermodelvis: hidden;

 	--easyfieldvis: visible;
 	--mediumfieldvis: hidden;
 	--hardfieldvis: hidden;

 	--yearvis: hidden;

 	--measurementsvis: hidden;

  --topfieldvis: hidden;
  --bottomfieldvis: hidden;
  --leftfieldvis: hidden;
  --rightfieldvis: hidden;
  --backfieldvis: hidden;

  --horizontalback: var(--tertiarysitecolor);
  --verticalback: var(--primarysitecolor);

  --leftflip: 1;
  --rightflip: 1;

 	--topdim: 50%;
 	--topt: 10%;
 	--topl2: 25%;
 	--topt2: 26%;
 	--toprot2: -35deg;
 	--toprot3: 35deg;

 	--topspacingvar: 0px;

 	--bottomdim: 50%;
 	--bottomt: 40%;
 	--bottoml2: 28%;
 	--bottomt2: 63%;
 	--bottomrot2: 10deg;
 	--bottomrot3: -10deg;

 	--bottomspacingvar: 0px;

 	--leftdim: 66.6%;
 	--leftt: 37.5%;
 	--leftl: 0%;
 	--leftrot: 0%;

 	--rightdim: 62.5%;
 	--rightt: 37.5%;
 	--rightl: 0%;
 	--rightrot: 0%;

 	--backdim: 66.66%;
 	--backl: 40%;
 	--backt: 69%;

 	--tlogooptvis: hidden;
 	--ttextoptvis: hidden;

 	--toplogovis: hidden;
 	--toptextvis: hidden;

 	--topfontcolor: var(--primarysitecolor);

 	--topfont: exo;

 	--topfontsize: 15px;

 	--topfontvert: horizontal-lr;

 	--blogooptvis: hidden;
 	--btextoptvis: hidden;

 	--bottomlogovis: hidden;
 	--bottomtextvis: hidden;

 	--bottomfontcolor: var(--primarysitecolor);

 	--bottomfont: exo;

 	--bottomfontsize: 20px;

  --llogooptvis: hidden;
 	--ltextoptvis: hidden;

 	--leftlogovis: hidden;
 	--lefttextvis: hidden;

 	--leftfontcolor: var(--primarysitecolor);

 	--leftfont: exo;

 	--leftfontsize: 50px;

  --rlogooptvis: hidden;
 	--rtextoptvis: hidden;

 	--rightlogovis: hidden;
 	--righttextvis: hidden;

 	--rightfontcolor: var(--primarysitecolor);

 	--rightfont: exo;

 	--rightfontsize: 50px;

  --balogooptvis: hidden;
 	--batextoptvis: hidden;

 	--backlogovis: hidden;
 	--backtextvis: hidden;

 	--backfontcolor: var(--primarysitecolor);

 	--backfont: exo;

 	--backfontsize: 125%;

 	--completepopup: hidden;

 	--top1: 40%;
 	--top2: 20%;
 	--top3: 50%;
 	
 	--top4: -8%;
 	--top5: -8%;
 	--top6: 72%;

	--left2: 2%;
 	--left2: 5%;
 	--left3: 20%;
 	--left4: 38%;
 	--left6: 35%;

 	--rot1: 0deg;
 	--rot3: 30deg;
 	--rot4: -10deg;
 	--rot6: -10deg;

 	--topaddprimary: var(--primarysitecolor);
 	--topaddsec: var(--secondarysitecolor);
 	--topaddtert: var(--tertiarysitecolor);

 	--bottomaddprimary: var(--primarysitecolor);
 	--bottomaddsec: var(--secondarysitecolor);
 	--bottomaddtert: var(--tertiarysitecolor);

  --leftaddprimary: var(--primarysitecolor);
 	--leftaddsec: var(--secondarysitecolor);
 	--leftaddtert: var(--tertiarysitecolor);

  --rightaddprimary: var(--primarysitecolor);
 	--rightaddsec: var(--secondarysitecolor);
 	--rightaddtert: var(--tertiarysitecolor);

  --backaddprimary: var(--primarysitecolor);
 	--backaddsec: var(--secondarysitecolor);
 	--backaddtert: var(--tertiarysitecolor);

	--topinvpercadd: var(--invperc);
	--topseppercadd: var(--sepperc);
	--topsatpercadd: var(--satperc);
	--topbripercadd: var(--briperc);
	--topconpercadd: var(--conperc);
	--tophuepercadd: var(--hueperc);

	--topinvpercadd2: var(--invperc2);
	--topseppercadd2: var(--sepperc2);
	--topsatpercadd2: var(--satperc2);
	--topbripercadd2: var(--briperc2);
	--topconpercadd2: var(--conperc2);
	--tophuepercadd2: var(--hueperc2);

	--topinvpercadd3: var(--invperc3);
	--topseppercadd3: var(--sepperc3);
	--topsatpercadd3: var(--satperc3);
	--topbripercadd3: var(--briperc3);
	--topconpercadd3: var(--conperc3);
	--tophuepercadd3: var(--hueperc3);

	--bottominvpercadd: var(--invperc);
	--bottomseppercadd: var(--sepperc);
	--bottomsatpercadd: var(--satperc);
	--bottombripercadd: var(--briperc);
	--bottomconpercadd: var(--conperc);
	--bottomhuepercadd: var(--hueperc);

	--bottominvpercadd2: var(--invperc2);
	--bottomseppercadd2: var(--sepperc2);
	--bottomsatpercadd2: var(--satperc2);
	--bottombripercadd2: var(--briperc2);
	--bottomconpercadd2: var(--conperc2);
	--bottomhuepercadd2: var(--hueperc2);

	--bottominvpercadd3: var(--invperc3);
	--bottomseppercadd3: var(--sepperc3);
	--bottomsatpercadd3: var(--satperc3);
	--bottombripercadd3: var(--briperc3);
	--bottomconpercadd3: var(--conperc3);
	--bottomhuepercadd3: var(--hueperc3);

	--leftinvpercadd: var(--invperc);
	--leftseppercadd: var(--sepperc);
	--leftsatpercadd: var(--satperc);
	--leftbripercadd: var(--briperc);
	--leftconpercadd: var(--conperc);
	--lefthuepercadd: var(--hueperc);

	--leftinvpercadd2: var(--invperc2);
	--leftseppercadd2: var(--sepperc2);
	--leftsatpercadd2: var(--satperc2);
	--leftbripercadd2: var(--briperc2);
	--leftconpercadd2: var(--conperc2);
	--lefthuepercadd2: var(--hueperc2);

	--leftinvpercadd3: var(--invperc3);
	--leftseppercadd3: var(--sepperc3);
	--leftsatpercadd3: var(--satperc3);
	--leftbripercadd3: var(--briperc3);
	--leftconpercadd3: var(--conperc3);
	--lefthuepercadd3: var(--hueperc3);

	--rightinvpercadd: var(--invperc);
	--rightseppercadd: var(--sepperc);
	--rightsatpercadd: var(--satperc);
	--rightbripercadd: var(--briperc);
	--rightconpercadd: var(--conperc);
	--righthuepercadd: var(--hueperc);

	--rightinvpercadd2: var(--invperc2);
	--rightseppercadd2: var(--sepperc2);
	--rightsatpercadd2: var(--satperc2);
	--rightbripercadd2: var(--briperc2);
	--rightconpercadd2: var(--conperc2);
	--righthuepercadd2: var(--hueperc2);

	--rightinvpercadd3: var(--invperc3);
	--rightseppercadd3: var(--sepperc3);
	--rightsatpercadd3: var(--satperc3);
	--rightbripercadd3: var(--briperc3);
	--rightconpercadd3: var(--conperc3);
	--righthuepercadd3: var(--hueperc3);

	--backinvpercadd: var(--invperc);
	--backseppercadd: var(--sepperc);
	--backsatpercadd: var(--satperc);
	--backbripercadd: var(--briperc);
	--backconpercadd: var(--conperc);
	--backhuepercadd: var(--hueperc);

	--backinvpercadd2: var(--invperc2);
	--backseppercadd2: var(--sepperc2);
	--backsatpercadd2: var(--satperc2);
	--backbripercadd2: var(--briperc2);
	--backconpercadd2: var(--conperc2);
	--backhuepercadd2: var(--hueperc2);

	--backinvpercadd3: var(--invperc3);
	--backseppercadd3: var(--sepperc3);
	--backsatpercadd3: var(--satperc3);
	--backbripercadd3: var(--briperc3);
	--backconpercadd3: var(--conperc3);
	--backhuepercadd3: var(--hueperc3);

	--cageinvperc: 100%;
	--cagesepperc: 0%;
	--cagesatperc: 1166%;
	--cagebriperc: 114%;
	--cageconperc: 101%;
	--cagehueperc: 5deg;

	--strapsinvperc: 100%;
	--strapssepperc: 0%;
	--strapssatperc: 1166%;
	--strapsbriperc: 114%;
	--strapsconperc: 101%;
	--strapshueperc: 5deg;

	--bucklesinvperc: 100%;
	--bucklessepperc: 0%;
	--bucklessatperc: 1166%;
	--bucklesbriperc: 114%;
	--bucklesconperc: 101%;
	--buckleshueperc: 5deg;

	--cateyevis: visible;
	--certifiedvis: hidden;
	--straightvis: hidden;

	--930vis: visible;
	--nmevis: hidden;
	--a19vis: hidden;
	--xfvis: hidden;
	--f2vis: hidden;

	--otherback: #e1e1e1;

	--guideback: white;

	--mainfilter: 1, 2, 3;
}
/*titles*/
.styletitle, .colortitle, .logotitle, .texturetitle, .addontitle, .completetitle, .detailtitle, .helmettitle, .cagetitle, .strapstitle{
	width: 100%;
	height: 10%;
	margin-top: 5px;
	text-align: center;
	font-weight: bold;
	font-size: 2rem;
	font-family: exo;
	color: var(--primarysitecolor);
}

/*customization areas*/
.styleopt, .coloropt, .logoopt, .textureopt, .addonopt, .completeopt{
	position: absolute;
	text-align: center;
	right: 0%;
	top: 14%;
	width: 20%;
	height:86%;
	background: white;
	color:black;
	font-weight: bold;
}

.details, .helmet, .cage, .straps{
	background: white;
	position: fixed;
	left: 0%;
	top: 14%;
	width:20%;
	height:86%;
}

/*goalie name and team inputs*/
.nameinput, .teaminput{
	position: absolute;
	width: 100%;
	height: 10%;
	top: 10%;
	left: 0%;
}

.teaminput{
	top: 23%;
}

.nameinput input, .teaminput input, .emailinput input{
	width: 90%;
	height:50%;
	position: absolute;
	top: 30%;
	left: 5%;
	border: none;
	background: #ededed;
	border-radius: 1.33rem;
	padding-left: 5%;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	outline: none;
	font-size: 1rem;
}

.nameinput input:hover, .teaminput input:hover, .brandother input:hover, .modelselects:hover, .emailinput input:hover{
	opacity: 0.7;
}

.teaminput{
	top: 23%;
}

/*logo inputs*/
.logoinput {
	position: absolute;
	width: 100%;
	aspect-ratio: 2/1;
	top: 35%;
	left:0%;
	color: black;
}

.logoinputarea, .logoinputarea1, .logoinputarea2, .logoinputarea3{
  display: block;
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  background-color: #ffffff;
  transition: border-color 0.3s ease;
  height: 80%;
  top: 15%;
  left: 5%;
  aspect-ratio: 1/1;
  border-radius: 10%;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

.toplogoinputarea, .bottomlogoinputarea, .leftlogoinputarea, .rightlogoinputarea, .backlogoinputarea{
  display: block;
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  background-color: #ffffff;
  transition: border-color 0.3s ease;
  width: 60%;
  top: 15%;
  left: 20%;
  aspect-ratio: 1/1;
  border-radius: 10%;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}


.logoinputarea1 {
	height: 65%;
}

.logoinputarea2 {
	height: 65%;
	left: 36%;
}

.logoinputarea3 {
	height: 65%;
	left: 67%;
}

.logoinputarea:hover, .logoinputarea1:hover, .logoinputarea2:hover, .logoinputarea3:hover,
.toplogoinputarea:hover, .bottomlogoinputarea:hover, .leftlogoinputarea:hover, .rightlogoinputarea:hover, .backlogoinputarea:hover{
  opacity: 0.7;
}

.logoinputarea img, .logoinputarea1 img, .logoinputarea2 img, .logoinputarea3 img,
.toplogoinputarea img, .bottomlogoinputarea img, .leftlogoinputarea img, .rightlogoinputarea img, .backlogoinputarea img{
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
	align-items: center;
	justify-content: center;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/*backplate design control*/
.backplatecontrol{
	position: absolute;
	top: 65%;
	left: 0%;
	width: 100%;
	height: 20%;
}

/* The switch container */
.switch {
  position: absolute;
  top: 20%;
  left: 5%;
  display: inline-block;
  width: 100px;
  height: 48px;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

/* Hide default checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider:hover {
	opacity: 0.7;
	transition: 0s;
}

/* The slider background */
.slider {
  position: absolute;
  cursor: pointer;
  background-color: #d9d9d9;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: .4s;
}

/* The toggle knob */
.slider:before {
  position: absolute;
  content: "";
  height: 36px;       /* 18 × 2 */
  width: 36px;        /* 18 × 2 */
  left: 6px;          /* 3 × 2 */
  bottom: 6px;        /* 3 × 2 */
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}

/* Checked state */
input:checked + .slider {
  background-color: var(--primarysitecolor);
}

input:checked + .slider:before {
  transform: translateX(52px);  /* 26 × 2 */
}

/*helmet page*/

.helmetprofile{
	position: absolute;
	top: 8%;
	left: 5%;
	width: 90%;
	height: 5%;
	border: none;
	background: #e1e1e1;
	border-radius: 1.33rem;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

.helmetprofile p{
	position: absolute;
	left: 0%;
	top: 10%;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 1rem;
	text-transform: uppercase;
	padding-top: 2%;
	color: black;
}

.helmetcolorfield{
	position: absolute;
	left: -17%;
	top: 20%;
	height: 60%;
	width: 100%;
}

.helmetcolor button{
	width: 15%;
}

.helmetcolor, .brandopt, .modelopt, .helmetdivisionopt, .helmetsizeopt{
	position: absolute;
	width: 100%;
	height: 13%;
	left: 0%;
	top: 17%;
	padding-left: 5%;	
}

.brandopt{
	top: 33%;
	height: 20%;
}

.modelopt{
	top: 56%;
	height: 12%;
}

.helmetdivisionopt{
	top: 71%;
	height: 12%;
}

.helmetsizeopt{
	top: 86%;
	height: 12%;
}

.brandbuttons, .divisionbuttons, .sizebuttons{
	position: absolute;
	left: 5%;
	top: 20%;
	width: 90%;
	height: 50%;
}

.brandbuttons button, .helmetsizeopt button, .helmetdivisionopt button{
	border: none;
	background: var(--primarysitecolor);
	width: 25%;
	margin: 1.5%;
	aspect-ratio: 2/1;
	color: white;
	font-family: exo;
	font-size: 0.8rem;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	border-radius: 0.66rem;
}

.brandtitle, .helmetdivisiontitle, .helmetsizetitle, .modeltitle,
.nametitle, .teamtitle, .logodetailtitle, .backplatetitle, .strapscolortitle,
.bucklescolortitle, .cagestyletitle, .cagecolortitle, .strapscontroltitle,
.highlighttitle, .commenttitle, .emailtitle{
	position: absolute;
	width: 90%;
	height: 5%;
	left: 5%;
	top: 5%;
	font-size: 1rem;
	font-family: exo;
	float:left;
	color: var(--secondarysitecolor);	
}

.highlighttitle{
	left: -30%;
}

.commenttitle{
	left: -25%;
}

.emailtitle{
	left: -35%;
}

.brandother{
	position: absolute;
	width: 100%;
	height: 25%;
	top: 65%;
	left: 0%;
}

.brandother button{
	height: 100%;
	aspect-ratio: 1/1;
	position: absolute;
	top: -10%;
	left: 5%;
	border: none;
	background: var(--otherback);
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	border-radius: 0.66rem;
}

.brandother input{
	width: 75%;
	height:100%;
	position: absolute;
	top: 0%;
	left: 22%;
	border: none;
	background: #ededed;
	border-radius: 1.33rem;
	padding-left: 5%;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	outline: none;
}

.modelselects{
	position: absolute;
	top: 30%;
	width: 90%;
	height: 50%;
}

.modelselects select, .modelselects input{
	width: 75%;
	height:100%;
	position: absolute;
	top: 0%;
	left: 0%;
	border: none;
	background: #ededed;
	border-radius: 2rem;
	padding-left: 5%;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	outline: none;
}

.helmetsizeopt button{
	width: 22%;
}

.bauermodels{
	visibility: var(--bauervis);
}

.ccmmodels{
	visibility: var(--ccmvis);
}

.warriormodels{
	visibility: Var(--warriorvis);
}

.othermodels{
	visibility: var(--othermodelvis);
}

.canvas{
	background: white;
	border: 5px solid var(--secondarysitecolor);
	position: absolute;
	top: 17%;
	left: 27%;
	width: 46%;
	aspect-ratio: 1/1;
}
.canvaslogos{
	aspect-ratio: 1/1;
}
.primarycolors img, .secondarycolors img, .tertiarycolors img,
.blank-helmets img, .helmetoutline img, .helmetoutlinenob img,
.helmetoutlinenobblack img, .helmetborder img, .strapstop img, .strapsbottom img, .extrastufftop img, .extrastuffbottom img,
.holesnme img, .holes930 img, .holesa19 img, .holesxf img, .holesf2 img,
.strapshelmet img, .strapshelmettop img, .buckles img, .cateyetop img, .cateyebottom img, .certifiedtop img, .certifiedbottom img,
.straighttop img, .straightbottom img,
.top-block-box img, .bottom-block-box img, .left-block-box img, .right-block-box img, .back-block-box img, .back-block img, 
.top-primary img, .top-secondary img, .top-tertiary img, .top-extra img,
.bottom-primary img, .bottom-secondary img, .bottom-tertiary img, .bottom-extra img,
.left-primary img, .left-secondary img, .left-tertiary img, .left-extra img,
.right-primary img, .right-secondary img, .right-tertiary img, .right-extra img,
.back-primary img, .back-secondary img, .back-tertiary img, .back-extra img,
.primaryhelmetlogo img, .secondaryhelmetlogo img, .primaryhelmetlogokang img,
.secondaryhelmetlogokang img, .helmetlogoback img, .measurements img, .texture-box img, .highlights-box img,
.primary-styles img, .secondary-styles img, .tertiary-styles img, .extra-styles img, .block-styles img,
.top-highlights-box img, .bottom-highlights-box img, .left-highlights-box img, .right-highlights-box img, .back-highlights-box img{
	left: 0%;
	top: 0%;
	position: absolute;
	background:transparent;
	height: 100%;
}

.texture-1, .texture-2, .texture-3,
.texture-4, .texture-5, .texture-6,
.texture-7, .texture-8, .texture-9, .texture-10{
	position: absolute;
	width: 15%;
	height: 30%;
	opacity: 0.7;
}
/*left helmet*/
.texture-1{
	left: var(--left1);
	top: var(--top1);
	transform: rotate(var(--rot1));
}
.texture-2{
	left: var(--left2);
	top: var(--top2);
	transform: rotate(280deg);
}
.texture-3{
	left: var(--left3);
	top: var(--top3);
	transform: rotate(var(--rot3));
}

/*right helmet*/
.texture-8{
	right: var(--left1);
	top: var(--top1);
	transform: scaleX(-1) rotate(var(--rot1));
}
.texture-9{
	right: var(--left2);
	top: var(--top2);
	transform: scaleX(-1) rotate(100deg);
}
.texture-10{
	right: var(--left3);
	top: var(--top3);
	transform: scaleX(-1) rotate(var(--rot3));
}

/*top helmet*/
.texture-4{
	left: var(--left4);
	top: var(--top4);
	transform: rotate(var(--rot4));
}
.texture-5{
	right: var(--left4);
	top: var(--top5);
	transform: scaleX(-1) rotate(var(--rot4));
}

/*bottom helmet*/
.texture-6{
	left: var(--left6);
	top: var(--top6);
	transform: rotate(var(--rot6));
}
.texture-7{
	right: var(--left6);
	top: var(--top6);
	transform: scaleX(-1) rotate(var(--rot6));
}

.texture-1 img, .texture-2 img, .texture-3 img,
.texture-4 img, .texture-5 img, .texture-6 img,
.texture-7 img, .texture-8 img, .texture-9 img, .texture-10 img{
	width: 100%;
	height: 100%;
}

.strapstop img, .strapsbottom img{
	visibility: var(--strapscanvasvis);
}

.sodhelmetlogo{
	visibility: var(--defaultlogovis);
}

.measurements{
	visibility: var(--measurementsvis);
}

.primarycolors img, .primarylogocolors img, .primaryhelmetlogo img, .bruceprimary img, .sodlongprimary img, .primary-styles img{
	filter: invert(var(--invperc)) sepia(var(--sepperc)) saturate(var(--satperc))
	brightness(var(--briperc)) contrast(var(--conperc)) hue-rotate(var(--hueperc));
}
.secondarycolors img, .secondarylogocolors img, .secondaryhelmetlogo img, .brucesecondary img,
.hamburgerbutton img, .nohamburgerbutton img, .sodlongsecondary img, .secondary-styles img{
	filter: invert(var(--invperc2)) sepia(var(--sepperc2)) saturate(var(--satperc2))
	brightness(var(--briperc2)) contrast(var(--conperc2)) hue-rotate(var(--hueperc2));
}
.tertiarycolors img, .tertiary-styles img{
	filter: invert(var(--invperc3)) sepia(var(--sepperc3)) saturate(var(--satperc3))
	brightness(var(--briperc3)) contrast(var(--conperc3)) hue-rotate(var(--hueperc3));
}

.top-primary img{
	filter: invert(var(--topinvpercadd)) sepia(var(--topseppercadd)) saturate(var(--topsatpercadd))
	brightness(var(--topbripercadd)) contrast(var(--topconpercadd)) hue-rotate(var(--tophuepercadd));
}
.top-secondary img{
	filter: invert(var(--topinvpercadd2)) sepia(var(--topseppercadd2)) saturate(var(--topsatpercadd2))
	brightness(var(--topbripercadd2)) contrast(var(--topconpercadd2)) hue-rotate(var(--tophuepercadd2));
}
.top-tertiary img{
	filter: invert(var(--topinvpercadd3)) sepia(var(--topseppercadd3)) saturate(var(--topsatpercadd3))
	brightness(var(--topbripercadd3)) contrast(var(--topconpercadd3)) hue-rotate(var(--tophuepercadd3));
}

.bottom-primary img{
	filter: invert(var(--bottominvpercadd)) sepia(var(--bottomseppercadd)) saturate(var(--bottomsatpercadd))
	brightness(var(--bottombripercadd)) contrast(var(--bottomconpercadd)) hue-rotate(var(--bottomhuepercadd));
}
.bottom-secondary img{
	filter: invert(var(--bottominvpercadd2)) sepia(var(--bottomseppercadd2)) saturate(var(--bottomsatpercadd2))
	brightness(var(--bottombripercadd2)) contrast(var(--bottomconpercadd2)) hue-rotate(var(--bottomhuepercadd2));
}
.bottom-tertiary img{
	filter: invert(var(--bottominvpercadd3)) sepia(var(--bottomseppercadd3)) saturate(var(--bottomsatpercadd3))
	brightness(var(--bottombripercadd3)) contrast(var(--bottomconpercadd3)) hue-rotate(var(--bottomhuepercadd3));
}

.left-primary img{
	filter: invert(var(--leftinvpercadd)) sepia(var(--leftseppercadd)) saturate(var(--leftsatpercadd))
	brightness(var(--leftbripercadd)) contrast(var(--leftconpercadd)) hue-rotate(var(--lefthuepercadd));
}
.left-secondary img{
	filter: invert(var(--leftinvpercadd2)) sepia(var(--leftseppercadd2)) saturate(var(--leftsatpercadd2))
	brightness(var(--leftbripercadd2)) contrast(var(--leftconpercadd2)) hue-rotate(var(--lefthuepercadd2));
}
.left-tertiary img{
	filter: invert(var(--leftinvpercadd3)) sepia(var(--leftseppercadd3)) saturate(var(--leftsatpercadd3))
	brightness(var(--leftbripercadd3)) contrast(var(--leftconpercadd3)) hue-rotate(var(--lefthuepercadd3));
}

.right-primary img{
	filter: invert(var(--rightinvpercadd)) sepia(var(--rightseppercadd)) saturate(var(--rightsatpercadd))
	brightness(var(--rightbripercadd)) contrast(var(--rightconpercadd)) hue-rotate(var(--righthuepercadd));
}
.right-secondary img{
	filter: invert(var(--rightinvpercadd2)) sepia(var(--rightseppercadd2)) saturate(var(--rightsatpercadd2))
	brightness(var(--rightbripercadd2)) contrast(var(--rightconpercadd2)) hue-rotate(var(--righthuepercadd2));
}
.right-tertiary img{
	filter: invert(var(--rightinvpercadd3)) sepia(var(--rightseppercadd3)) saturate(var(--rightsatpercadd3))
	brightness(var(--rightbripercadd3)) contrast(var(--rightconpercadd3)) hue-rotate(var(--righthuepercadd3));
}

.back-primary img{
	filter: invert(var(--backinvpercadd)) sepia(var(--backseppercadd)) saturate(var(--backsatpercadd))
	brightness(var(--backbripercadd)) contrast(var(--backconpercadd)) hue-rotate(var(--backhuepercadd));
}
.back-secondary img{
	filter: invert(var(--backinvpercadd2)) sepia(var(--backseppercadd2)) saturate(var(--backsatpercadd2))
	brightness(var(--backbripercadd2)) contrast(var(--backconpercadd2)) hue-rotate(var(--backhuepercadd2));
}
.back-tertiary img{
	filter: invert(var(--backinvpercadd3)) sepia(var(--backseppercadd3)) saturate(var(--backsatpercadd3))
	brightness(var(--backbripercadd3)) contrast(var(--backconpercadd3)) hue-rotate(var(--backhuepercadd3));
}
.top-block-box img, .bottom-block-box img, .left-block-box img, .right-block-box img,
.back-block-box img, .block-styles img, .helmetlogoback img, .blank-helmets img, .back-block img{
	filter: invert(var(--invhel)) sepia(var(--sephel)) saturate(var(--sathel))
	brightness(var(--brihel)) contrast(var(--conhel)) hue-rotate(var(--huehel));
}

.topdesignclass img, .topdesignclass p, .bottomdesignclass img, .bottomdesignclass p, 
.topdesignclass2 img, .topdesignclass2 p, .bottomdesignclass2 img, .bottomdesignclass2 p, 
.topdesignclass3 img, .topdesignclass3 p, .bottomdesignclass3 img, .bottomdesignclass3 p, 
.leftdesignclass img, .leftdesignclass p, .rightdesignclass img, .rightdesignclass p,
.backdesignclass img, .backdesignclass p{
		position: absolute;
  	top: 50%;
  	left: 50%;
  	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
}

.topdesignclass{
	background: transparent;
	width: 17%;
	aspect-ratio: 1/1;
	position: absolute;
	left: 41.5%;
	top: var(--topt);
}
.topdesignclass img{
	visibility: var(--toplogovis);
	background: transparent;
	width: var(--topdim);
	position: absolute;
}
.topdesignclass p{
	white-space: nowrap;
	visibility: var(--toptextvis);
	font-family: var(--topfont);
	font-size: var(--topfontsize);
	position: absolute;
	text-align: center;
	vertical-align: middle;
	float: center;
	color: var(--topfontcolor);
	writing-mode: var(--topfontvert);
	text-orientation: upright;
	letter-spacing: var(--topspacingvar);
	text-shadow: var(--topborder);
}

.topdesignclass2{
	background: transparent;
	width: 20%;
	aspect-ratio: 1/1;
	position: absolute;
	left: var(--topl2);
	top: var(--topt2);
	transform: rotate(var(--toprot2)) scale(0.7, 1);
	text-align: left;
}
.topdesignclass2 img{
	visibility: var(--toplogovis);
	background: transparent;
	width: var(--topdim);
}

.topdesignclass2 p{
	white-space: nowrap;
	visibility: var(--toptextvis);
	font-family: var(--topfont);
	font-size: var(--topfontsize);
	color: var(--topfontcolor);
	writing-mode: var(--topfontvert);
	position: absolute;
	text-orientation: upright;
	letter-spacing: var(--topspacingvar);
	text-shadow: var(--topborder);
}

.topdesignclass3{
	background: transparent;
	width: 20%;
	aspect-ratio: 1/1;
	position: absolute;
	right: var(--topl2);
	top: var(--topt2);
	transform: rotate(var(--toprot3)) scale(0.7, 1);
}
.topdesignclass3 img{
	visibility: var(--toplogovis);
	width: var(--topdim);
}

.topdesignclass3 p{
	white-space: nowrap;
	visibility: var(--toptextvis);
	font-family: var(--topfont);
	font-size: var(--topfontsize);
	color: var(--topfontcolor);
	writing-mode: var(--topfontvert);
	text-orientation: upright;
	position: absolute;
	letter-spacing: var(--topspacingvar);
	text-shadow: var(--topborder);
}

.bottomdesignclass{
	background: transparent;
	width: 15%;
	aspect-ratio: 1/1;
	position: absolute;
	left: 42.5%;
	top: var(--bottomt);
}
.bottomdesignclass img{
	visibility: var(--bottomlogovis);
	background: transparent;
	width: var(--bottomdim);
}
.bottomdesignclass p{
	white-space: nowrap;
	visibility: var(--bottomtextvis);
	font-family: var(--bottomfont);
	font-size: var(--bottomfontsize);
	text-align: center;
	color: var(--bottomfontcolor);
	letter-spacing: var(--bottomspacingvar);
	text-shadow: var(--bottomborder);
}

.bottomdesignclass2{
	background: transparent;
	width: 15%;
	aspect-ratio: 1/1;
	position: absolute;
	left: var(--bottoml2);
	top: var(--bottomt2);
	transform: rotate(var(--bottomrot2)) scale(0.7, 1);

}
.bottomdesignclass2 img{
	visibility: var(--bottomlogovis);
	background: transparent;
	width: var(--bottomdim);
}
.bottomdesignclass2 p{
	white-space: nowrap;
	visibility: var(--bottomtextvis);
	font-family: var(--bottomfont);
	font-size: var(--bottomfontsize);
	color: var(--bottomfontcolor);
	position: absolute;
	letter-spacing: var(--bottomspacingvar);
	text-shadow: var(--bottomborder);
}
.bottomdesignclass3{
	background: transparent;
	width: 15%;
	aspect-ratio: 1/1;
	position: absolute;
	right: var(--bottoml2);
	top: var(--bottomt2);
	transform: rotate(var(--bottomrot3)) scale(0.7, 1);
}
.bottomdesignclass3 img{
	background: transparent;
	width: var(--bottomdim);
	visibility: var(--bottomlogovis);
}
.bottomdesignclass3 p{
	white-space: nowrap;
	visibility: var(--bottomtextvis);
	font-family: var(--bottomfont);
	font-size: var(--bottomfontsize);
	color: var(--bottomfontcolor);
	position: absolute;
	letter-spacing: var(--bottomspacingvar);
	text-shadow: var(--bottomborder);
}

.leftdesignclass {
    width: 28%;
    aspect-ratio: 1/1;
    position: absolute;
    left: var(--leftl);
    top: var(--leftt);
    transform: rotate(var(--leftrot)) scaleX(var(--leftflip));
    text-align: center;
}

.leftdesignclass img{
	visibility: var(--leftlogovis);
	background: transparent;
	width: var(--leftdim);
}

.leftdesignclass p{
	white-space: nowrap;
	visibility: var(--lefttextvis);
	font-family: var(--leftfont);
	font-size: var(--leftfontsize);
	color: var(--leftfontcolor);
	text-shadow: var(--leftborder);
}

.rightdesignclass {
    width: 28%;
    aspect-ratio: 1/1;
    position: absolute;
    right: var(--rightl);
    top: var(--rightt);
    transform: scaleX(var(--rightflip)) rotate(var(--rightrot));
    text-align: center;
}
.rightdesignclass img{
	visibility: var(--rightlogovis);
	background: transparent;
	width: var(--rightdim);
}

.rightdesignclass p{
	white-space: nowrap;
	visibility: var(--righttextvis);
	font-family: var(--rightfont);
	font-size: var(--rightfontsize);
	text-align: center;
	color: var(--rightfontcolor);
	text-shadow: var(--rightborder);
}

.backdesignclass{
	background: transparent;
	width: 20%;
	aspect-ratio: 1/1;
	position: absolute;
	left: var(--backl);
	top: var(--backt);
}
.backdesignclass img{
	visibility: var(--backlogovis);
	background: transparent;
	width: var(--backdim);
}

.backdesignclass p{
	white-space: nowrap;
	visibility: var(--backtextvis);
	font-family: var(--backfont);
	font-size: var(--backfontsize);
	text-align: center;
	color: var(--backfontcolor);
	text-shadow: var(--backborder);
}

.logoletters img, .primarylogocolors img, .secondarylogocolors img{
	background: transparent;
	position: absolute;
	top: 2%;
	left: 6%;
	width: 23%;
	height: 23%;
}
.canvaslogoclass{
	object-fit: contain;
	width: 23%;
	height: 23%;
	position: absolute;
	right: 6%;
	top: 2%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.canvaslogoclass img{
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}
.canvasdetails{
	width: 35%;
	height: 15%;
	position: absolute;
	right: 0%;
	bottom: 2%;
	display: block;
}
.canvasname{
	height: 32%;
	text-align: center;
	font-family: exo;
	font-weight: bold;
	color: black;
	font-size: 1.5rem;
	text-transform: uppercase;
}
.canvasteam{
	height: 32%;
	text-align: center;
	font-family: exo;
	font-weight: bold;
	color: black;
	font-size: 1.5rem;
	text-transform: uppercase;
}
.canvasyear{
	visibility: var(--yearvis);
	height: 32%;
	text-align: center;
	font-family: exo;
	font-weight: bold;
	color: black;
	font-size: 1.5rem;
	text-transform: uppercase;
}

.navigation2{
	position: absolute;
	top: 14%;
	left: 20%;
	width: 5%;
	height: 86%;
	background: var(--secondarysitecolor);
}

.navigation{
	display: block;
	position: absolute;
	top: 14%;
	right: 20%;
	width: 5%;
	height: 86%;
	background: var(--secondarysitecolor);
}

.navigation input, .navigation2 input{
	text-align: center;
	font-family: exo;
	float: left;
	font-size: 1rem;
	width: 60%;
	height: 14%;
	font-weight: bold;
	margin-left: 20%;
	margin-top: 20%;
	background: var(--primarysitecolor);
	text-align: center;
	color: white;
	cursor: pointer;
	padding-left: 15%;
	writing-mode: vertical-lr;
	border: none;
	filter: drop-shadow(#000 3px 3px 2px);
}
.navigation2 input{
	height: 22.5%;
}

.detailsbutton input{
	background: var(--detailsback);
	outline: none;
}

.helmetbutton input{
	background: var(--helmetback);
	outline: none;
}

.cagebutton input{
	background: var(--cageback);
	outline: none;
}

.strapsbutton input{
	background: var(--strapsback);
	outline: none;
}

.navigation input:hover ,.navigation2 input:hover{
	background: var(--tertiarysitecolor);
	transition-duration: 0.4s;
}

.style input{
	background: var(--styleback);
}
.color input{
	background: var(--colorback);
}
.logo input{
	background: var(--logoback);
}
.texture input{
	background: var(--textureback);
}
.addon input{
	background: var(--addonback);
}
.complete input{
	background: var(--completeback);
}

.details{
	visibility: var(--detailsvis);
}
.helmet{
	visibility: var(--helmetvis);
}
.cage{
	visibility: var(--cagevis);
}
.straps{
	visibility: var(--strapsvis);
}

.cageopt{
	position: absolute;
	width: 100%;
	height: 20%;
	left: 0%;
	top: 10%;
}

.cagecolor{
	position: absolute;
	width: 100%;
	height: 35%;
	left: 0%;
	top: 25%;
}

.strapscolor{
	position: absolute;
	width: 100%;
	height: 35%;
	left: 0%;
	top: 10%;
}

.bucklescolor{
	position: absolute;
	width: 100%;
	height: 35%;
	left: 0%;
	top: 45%;
}

.strapscontrol{
	position: absolute;
	top: 85%;
	left: 0%;
	width: 100%;
	height: 20%;
}

.cagebuttons, .cagecolorbuttons, .strapscolorbuttons, .bucklescolorbuttons{
	position: absolute;
	width: 100%;
	height: 50%;
	top: 15%;
	left: 5%;
}

.cagebuttons button{
	border: none;
	background: var(--primarysitecolor);
	width: 25%;
	margin: 1.5%;
	aspect-ratio: 2/1;
	color: white;
	font-family: exo;
	font-size: 1rem;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	border-radius: 1rem;
}

.cageopt button:hover, .brandopt button:hover, .brandother button:hover, .helmetsizeopt button:hover, .helmetdivisionopt button:hover,
.cagecolorbuttons button:hover, .strapscolorbuttons button:hover, .bucklescolorbuttons button:hover{
	opacity: 0.7;
}

.cagecolorbuttons button, .strapscolorbuttons button, .bucklescolorbuttons button{
	border: none;
	width: 25%;
	margin: 1.5%;
	aspect-ratio: 1/1;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	border-radius: 1.33rem;
}

button img{
	width: 100%;
  aspect-ratio: 1 / 1;
	align-items: center;
	justify-content: center;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.cageprimary{
	background: var(--primarysitecolor);
}
.cagesecondary{
	background: var(--secondarysitecolor);
}
.cagetertiary{
	background: var(--tertiarysitecolor);
}
.cagewhite{
	background: white;
}
.cageblack{
	background: black;
}
.cagesilver{
	background: #C1C6C8;
}
.strapsprimary{
	background: var(--primarysitecolor);
}
.strapssecondary{
	background: var(--secondarysitecolor);
}
.strapstertiary{
	background: var(--tertiarysitecolor);
}
.strapswhite{
	background: white;
}
.strapsblack{
	background: black;
}
.strapsbeige{
	background: #E3D8C2;
}

.bucklesprimary{
	background: var(--primarysitecolor);
}
.bucklessecondary{
	background: var(--secondarysitecolor);
}
.bucklestertiary{
	background: var(--tertiarysitecolor);
}
.buckleswhite{
	background: white;
}
.bucklesblack{
	background: black;
}

.cateyetop, .cateyebottom{
	visibility: var(--cateyevis);
}

.certifiedtop, .certifiedbottom{
	visibility: var(--certifiedvis);
}

.straighttop, .straightbottom{
	visibility: var(--straightvis);
}

.cateyebottom img, .certifiedbottom img, .straightbottom img{
	filter: invert(var(--cageinvperc)) sepia(var(--cagesepperc)) saturate(var(--cagesatperc))
	brightness(var(--cagebriperc)) contrast(var(--cageconperc)) hue-rotate(var(--cagehueperc));
}

.strapshelmet img, .strapsbottom img{
	filter: invert(var(--strapsinvperc)) sepia(var(--strapssepperc)) saturate(var(--strapssatperc))
	brightness(var(--strapsbriperc)) contrast(var(--strapsconperc)) hue-rotate(var(--strapshueperc));
}

.buckles img{
	filter: invert(var(--bucklesinvperc)) sepia(var(--bucklessepperc)) saturate(var(--bucklessatperc))
	brightness(var(--bucklesbriperc)) contrast(var(--bucklesconperc)) hue-rotate(var(--buckleshueperc));
}

.holesnme{
	visibility: var(--nmevis);
}

.holes930{
	visibility: var(--930vis);
}
.holesa19{
	visibility: var(--a19vis);
}
.holesxf{
	visibility: var(--xfvis);
}
.holesf2{
	visibility: var(--f2vis);
}

.texturecontrol button{
	position: absolute;
	top: 20%;
	left: 2%;
	width: 15%;
}

.texturecontrol{
	position: absolute;
	top: 8%;
	left: 2%;
	width: 90%;
	height: 10%;
}

.styleopt{
	visibility: var(--stylevis);
	padding-left: 5px;
}
.coloropt{
	visibility: var(--colorvis);
}
.logoopt{
	visibility: var(--logovis);
}
.textureopt{
	visibility: var(--texturevis);
}
.addonopt{
	visibility: var(--addonvis);
}
.completeopt{
	visibility: var(--completevis);
}

.texturefield{
	width: 90%;
	height: 80%;
	position: absolute;
	top:10%;
	left: 5%;
}

.texturefield li{
	cursor: pointer;
	border: none;
	background: var(--primarysitecolor);
  margin: 6px;
  width: 20%;
  aspect-ratio: 1/1;
  border-radius: 1.33rem;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

.highlightcontrol{
	position: absolute;
	top: 75%;
	left: 0%;
	width: 100%;
	height: 20%;
}

.texture-image{
    width: 100%;
    height: 100%;
    opacity: .7;
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.topaddonbuttons li, .bottomaddonbuttons li, .leftaddonbuttons li, .rightaddonbuttons li, .backaddonbuttons li{
	cursor: pointer;
	border: none;
	background: none;
  margin: 5px;
  width: 16%;
  position: relative;
  aspect-ratio: 1/1;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

.rightaddonbuttons li img{
	transform: scaleX(-1);
}

.addon-image {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.designselect, .addonselect{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 8%;
	left: 0%;
	top: 7%;
	background: var(--secondarysitecolor);
	padding-top: 5px;
}
.designselect input, .addonselect input{
	width: 18%;
	height: 66%;
	display: inline-block;
	font-family: exo;
	color: white;
	cursor: pointer;
	border: none;
	text-align: center;
	float: left;
	margin-left: 1.5%;
	margin-top: 1%;
	border-radius: 1rem;
	outline: none;
}
.designselect button:hover, .addonselect button:hover{
	background: var(--primarysitecolor);
	transition-duration: 0.4s;
}
.toplogobutton input{
	background: var(--topback);
}
.bottomlogobutton input{
	font-size: 0.66rem;
	background: var(--bottomback);
}
.leftlogobutton input{
	background: var(--leftback);
}
.rightlogobutton input{
	background: var(--rightback);
}
.backlogobutton input{
	background: var(--backback);
}

.topaddonbutton input{
	background: var(--topaddonback);
}
.bottomaddonbutton input{
	font-size: 0.66rem;
	background: var(--bottomaddonback);
}
.leftaddonbutton input{
	background: var(--leftaddonback);
}
.rightaddonbutton input{
	background: var(--rightaddonback);
}
.backaddonbutton input{
	background: var(--backaddonback);
}
.topfield, .bottomfield, .leftfield, .rightfield, .backfield{
	width: 100%;
	height: 85%;
	position: absolute;
	top: 15%;
	color: black;
	visibility: hidden;
	overflow-y: hidden;
	overflow-x: hidden;
}
.toparrows, .bottomarrows, .leftarrows, .rightarrows, .backarrows{
  position: absolute;
  top: 56%;
  left: 5%;
  width: 90%;
  height: 9%;
}
.toptextarrows, .bottomtextarrows, .lefttextarrows, .righttextarrows, .backtextarrows{
  position: absolute;
  top: 52%;
  left: 5%;
  width: 90%;
  height: 9%;
}

.leftarrows button, .rightarrows button, .backarrows button,
.lefttextarrows button, .righttextarrows button, .backtextarrows button{
  background-color: var(--primarysitecolor);
  border: none;
  width: 25%;
  aspect-ratio: 1/1;
  cursor: pointer;
  margin: 2px;
  border-radius: 1.33rem;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
  }

.toparrows button, .toptextarrows button, .bottomarrows button, .bottomtextarrows button{
  background-color: var(--primarysitecolor);
  border: none;
  width: 45%;
  height: 100%;
  padding: 10px;
  margin: 5px;
  cursor: pointer;
  border-radius: 1.33rem;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}
.toparrows button img, .toptextarrows button img, .bottomarrows button img, .bottomtextarrows button img{
	height: 75%;
	width: 75%;
}
.toparrows button:hover, .toptextarrows button:hover, .bottomarrows button:hover, .bottomtextarrows button:hover,
.lefttextarrows button:hover, .righttextarrows button:hover, .backtextarrows button:hover,
.leftarrows button:hover, .rightarrows button:hover, .backarrows button:hover{
	opacity: 0.7;
}
.topfield, .topdesignselect{
	visibility: var(--topfieldvis);
}
.bottomfield, .bottomdesignselect{
	visibility: var(--bottomfieldvis);
}
.leftfield, .leftdesignselect{
	visibility: var(--leftfieldvis);
}
.rightfield, .rightdesignselect{
	visibility: var(--rightfieldvis);
}
.backfield, .backdesignselect{
	visibility: var(--backfieldvis);
}
.logoflufffield{
	visibility: hidden;
}

.topdesignselect, .bottomdesignselect, .leftdesignselect,
.rightdesignselect, .backdesignselect, .difficultyselect{
	width: 100%;
	height: 10%;
	position: absolute;
	left: 0%;
	top: 2%;
}

.topdesignselect button, .bottomdesignselect button, .leftdesignselect button,
.rightdesignselect button, .backdesignselect button, .difficultyselect button{
	width: 30%;
	margin-left: 2%;
	height: 90%;
	font-family: exo;
	color: white;
	background: var(--secondarysitecolor);
	border: none;
	font-size: 1.33rem;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	border-radius: 1.33rem;
}
.difficultytitle{
	position: absolute;
	width: 100%;
	height: 5%;
	font-size: 1.25rem;
	top: 7%;
	color: var(--secondarysitecolor);
}
.difficultyselect{
	top: 10%;
	height: 8%;
}

ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

li:hover{
    opacity: .7;
}

li {
    margin: 10px;
    width: 25%;
    position: relative;
}

.style-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    cursor: pointer;
}

.easyfield, .mediumfield, .hardfield{
	width: 90%;
	height: 80%;
	position: absolute;
	top:20%;
	left: 5%;
}

.easyfield button, .mediumfield button, .hardfield button{
	float: left;
	width: 30%;
	aspect-ratio: 1/1;
	margin-top: 5%;
	cursor: pointer;
	background: transparent;
	border: none;
}

.easyfield{
	visibility: var(--easyfieldvis);
}
.mediumfield{
	visibility: var(--mediumfieldvis);
}
.hardfield{
	visibility: var(--hardfieldvis);
}


select{
	border: none;
	border-radius: 1.33rem;
	font-family: exo;
	background: whtie;
	background: #e1e1e1;
	height: 100%;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

.toplogoopt{
	visibility: var(--tlogooptvis);
}
.toptextopt{
	visibility: var(--ttextoptvis);
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}

.toptextopt select{
	width: 90%;
	position: absolute;
	left: 4%;
}
.toptextopt select, .bottomtextopt select, .lefttextopt select, .righttextopt select, .backtextopt select{
	width: 90%;
	position: absolute;
	left: 4%;
}
.topfontselect, .bottomfontselect, .leftfontselect, .rightfontselect, .backfontselect{
	left: 0%;
	top: 67%;
	width: 100%;
	height:5%;
	position: absolute;
}

.toptextslidecontainer, .bottomtextslidecontainer, .lefttextslidecontainer, .righttextslidecontainer, .backtextslidecontainer{
	left: 2.5%;
	bottom: 15%;
	position: absolute;
	width: 90%;
	height: 10%;
}

.topfontcolors, .topbordercolors, .bottomfontcolors, .bottombordercolors, .leftfontcolors,
.leftbordercolors, .rightfontcolors, .rightbordercolors, .backfontcolors, .backbordercolors{
	position: absolute;
	width: 48%;
	height: 15%;
	top: 26%;
	left: 2%;
}
.topbordersize, .topwhiteborder, .bottombordersize, .bottomwhiteborder, .leftbordersize, .leftwhiteborder, .rightbordersize, .rightwhiteborder, .backbordersize, .backwhiteborder{
	position: absolute;
	width: 48%;
	height: 16%;
	top: 40%;
	left: 2%;
}

.topslidecontainer, .bottomslidecontainer, .leftslidecontainer, .rightslidecontainer, .backslidecontainer{
	top: 35%;
	left: 0%;
	width: 90%;
	position: absolute;
}

.topbordercolors, .bottombordercolors, .leftbordercolors, .rightbordercolors, .backbordercolors,
.topwhiteborder, .bottomwhiteborder, .leftwhiteborder, .rightwhiteborder, .backwhiteborder{
	left: 50%;
}

.topfontcolorstitle, .topbordercolorstitle, .bottomfontcolorstitle, .bottombordercolorstitle, .leftfontcolorstitle,
.leftbordercolorstitle, .rightfontcolorstitle, .rightbordercolorstitle, .backfontcolorstitle, .backbordercolorstitle,
.topwhitetitle, .topbordersizetitle, .bottomwhitetitle, .bottombordersizetitle, .leftwhitetitle, .leftbordersizetitle,
.rightwhitetitle, .rightbordersizetitle, .backwhitetitle, .backbordersizetitle{
	position: absolute;
	left: 0%;
	top: 0%;
	text-align: left;
	color: var(--secondarysitecolor);
	font-weight: bold;
	font-family: exo;
	font-size: 1.33 rem;
	width: 100%;
}

.topfontcolorbuttons, .topfontcolorbuttons2, .bottomfontcolorbuttons, .bottomfontcolorbuttons2, .leftfontcolorbuttons,
.leftfontcolorbuttons2, .rightfontcolorbuttons, .rightfontcolorbuttons2, .backfontcolorbuttons, .backfontcolorbuttons2{
	position: absolute;
	left: 0%;
	top: 20%;
	width: 100%;
	height: 80%;
	display: inline-block;
}

.topfontcolorbuttons button, .topfontcolorbuttons2 button, .bottomfontcolorbuttons button, .bottomfontcolorbuttons2 button, .leftfontcolorbuttons button, .leftfontcolorbuttons2 button,
.rightfontcolorbuttons button, .rightfontcolorbuttons2 button, .backfontcolorbuttons button, .backfontcolorbuttons2 button, .topaddoncolorbuttons button, 
.bottomaddoncolorbuttons button, .leftaddoncolorbuttons button, .rightaddoncolorbuttons button, .backaddoncolorbuttons button{
	border: none;
	width: 26%;
	margin: 1.5%;
	aspect-ratio: 1/1;	
  border-radius: 0.66rem;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}
.topfontcolorbuttons button:hover, .topfontcolorbuttons2 button:hover, .bottomfontcolorbuttons button:hover, .bottomfontcolorbuttons2 button:hover, .leftfontcolorbuttons button:hover, .leftfontcolorbuttons2 button:hover,
.rightfontcolorbuttons button:hover, .rightfontcolorbuttons2 button:hover, .backfontcolorbuttons button:hover, .backfontcolorbuttons2 button:hover, .topaddoncolorbuttons button:hover, 
.bottomaddoncolorbuttons button:hover, .leftaddoncolorbuttons button:hover, .rightaddoncolorbuttons button:hover, .backaddoncolorbuttons button:hover{
	opacity: 0.7;
}

.topdisplaybuttons{
  top: 88%;
  left: 5%;
  width: 90%;
  height: 9%;
  position: absolute;
}
.topdisplaybuttons button{
	color: white;
	font-family: exo;
	font-size: 1rem;
  background-color: var(--primarysitecolor);
  border: none;
  width: 45%;
  height: 100%;
  padding: 10px;
  margin: 5px;
  cursor: pointer;
  border-radius: 1.33rem;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

.tophorizontal:hover, .topvertical:hover{
	opacity: 0.7;
}

.tophorizontal{
	background: var(--horizontalback);
}
.topvertical{
	background: var(--verticalback);
}

.toptextbox input, .bottomtextbox input, .lefttextbox input, .righttextbox input, .backtextbox input{
	position: absolute;
	left: 2.5%;
	top: 15%;
	width: 95%;
	height: 7%;
	border: none;
	background: #e1e1e1;
	border-radius: 2rem;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	padding-left: 5%;
	outline: none;
}

.topprimary, .topprimary2, .bottomprimary,
.bottomprimary2, .leftprimary, .leftprimary2,
.rightprimary, .rightprimary2, .backprimary,
.backprimary2{
	background: var(--primarysitecolor);
}
.topsecondary, .topsecondary2, .bottomsecondary,
.bottomsecondary2, .leftsecondary, .leftsecondary2, 
.rightsecondary, .rightsecondary2, .backsecondary,
.backsecondary2{
	background: var(--secondarysitecolor);
}
.toptertiary, .toptertiary2, .bottomtertiary,
.bottomtertiary2, .lefttertiary, .lefttertiary2,
.righttertiary, .righttertiary2, .backtertiary,
.backtertiary2{
	background: var(--tertiarysitecolor);
}

.leftrotatebuttons, .rightrotatebuttons, .leftfontrotatebuttons, .rightfontrotatebuttons{
	position: absolute;
	right: 5%;
	top: 82%;
	width: 50%;
	height: 10%;
}

.leftfontrotatebuttons, .rightfontrotatebuttons{
	left: 25%;
	top: 85%;
}

.leftrotatebuttons button, .rightrotatebuttons button, .leftfontrotatebuttons button, .rightfontrotatebuttons button{
	width: 40%;
	aspect-ratio: 1/1;
	margin: 5%;
	background: var(--primarysitecolor);
	border: none;
	border-radius: 50%;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

.leftrotatebuttons button img, .rightrotatebuttons button img, .leftfontrotatebuttons button img, .rightfontrotatebuttons button img{
	width: 100%;
	height: 100%;
}

.leftrotatebuttons button:hover, .rightrotatebuttons button:hover, .leftfontrotatebuttons button:hover, .rightfontrotatebuttons button:hover{
	opacity: 0.7;
}

.logoinputbutton:hover{
	border: 5px solid var(--secondarysitecolor);
	transition-duration: 0.4s;
}

.topsizecontainer, .bottomsizecontainer, .leftsizecontainer, .rightsizecontainer, .backsizecontainer{
	left: 5%;
	top: 73%;
	position: absolute;
	width: 90%;
	height: 15%;	
}

.leftsizecontainer, .rightsizecontainer, .backsizecontainer{
	top: 70%;
}

.topfontsizecontainer, .bottomfontsizecontainer, .leftfontsizecontainer, .rightfontsizecontainer, .backfontsizecontainer{
	left: 5%;
	top: 76%;
	position: absolute;
	width: 90%;
	height: 15%;
}



.topsizecontainer p, .bottomsizecontainer p, .leftsizecontainer p, .rightsizecontainer p, .backsizecontainer p,
.topfontsizecontainer p, .bottomfontsizecontainer p, .leftfontsizecontainer p, .rightfontsizecontainer p, .backfontsizecontainer p{
	position: absolute;
	left: 0%;
	top:0%;
	height: 30%;
	width: 50%;
	font-size: 1rem;
}

.topsizecontainer input,.bottomsizecontainer input, .leftsizecontainer input, .rightsizecontainer input, .backsizecontainer input,
.topfontsizecontainer input,.bottomfontsizecontainer input, .leftfontsizecontainer input, .rightfontsizecontainer input, .backfontsizecontainer input{
	position: absolute;
	top: 40%;
	outline: none;
}

.leftflipbutton, .rightflipbutton{
	left: 7%;
	top: 84%;
	position: absolute;
	width: 30%;
	height: 10%;
	border: none;	
	border-radius: 1.33rem;
	background: var(--primarysitecolor);
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
}
.leftflipbutton img, .rightflipbutton img{
	width: 100%;
	height: 100%;
}

/*Size Ranges for logos*/

input[type=range].slider {
  -webkit-appearance: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: var(--secondarysitecolor);
  background: var(--primarysitecolor);
  height: 15px;
  border-radius: 0.66rem; 
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

input[type=range].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 35px;
  height: 35px;
  background: white;
  border: 5px solid var(--primarysitecolor);
  cursor: pointer;
  border-radius: 50%; 
}

input[type=range].slider:before {
	opacity: 0;
}

.topslidecontainer p, .bottomslidecontainer p, .toptextslidecontainer p, .bottomtextslidecontainer p,
.leftslidecontainer p, .rightslidecontainer p, .lefttextslidecontainer p, .righttextslidecontainer p,
.backslidecontainer p, .backtextslidecontainer p{
	font-size: 1.66rem;
	font-family: exo;
	position: absolute;
	top: 0;
	left: 0;
}
.topsizecontainer p, .bottomsizecontainer p, .leftsizecontainer p, .rightsizecontainer p, .backsizecontainer p{
	font-size: 1.25rem;
	font-family: exo;
	position: absolute;
	top: 0;
	right: 0;
}

.topfontsizecontainer p, .bottomfontsizecontainer p, .leftfontsizecontainer p, .rightfontsizecontainer p, .backfontsizecontainer p{
	font-size: 1.25rem;
	font-family: exo;
	position: absolute;
	top: 0;
	right: 0;
}

.topimage img, .bottomimage img, .leftimage img, .rightimage img, .backimage img{
	max-width: 100%;
}

.leftimage img{
	-webkit-transform: scaleX(var(--leftflip));
	transform: scaleX(var(--leftflip));
}

.rightimage img{
	-webkit-transform: scaleX(var(--rightflip));
	transform: scaleX(var(--rightflip));
}

.bottomlogoopt{
	visibility: var(--blogooptvis);
	background: black;
}
.bottomtextopt{
	display: inline-block;
	visibility: var(--btextoptvis);
}

.leftlogoopt{
	visibility: var(--llogooptvis);
	background: black;
}
.lefttextopt{
	display: inline-block;
	visibility: var(--ltextoptvis);
}

.rightlogoopt{
	visibility: var(--rlogooptvis);
	background: black;
}
.righttextopt{
	display: inline-block;
	visibility: var(--rtextoptvis);
}

.backlogoopt{
	visibility: var(--balogooptvis);
	background: black;
}
.backtextopt{
	display: inline-block;
	visibility: var(--batextoptvis);
}

.primarycolortitle, .secondarycolortitle, .tertiarycolortitle{
	padding-left: 5%;
	text-align: left;
	color: var(--secondarysitecolor);
	font-weight: bold;
	font-family: exo;
	font-size: 1rem;
	width: 85%;
	position: absolute;
}
.primarycolortitle{
	top: 7%;
}
.secondarycolortitle{
	top: 39%;
}
.tertiarycolortitle{
	top: 71%;
}
.primarycolorfield, .secondarycolorfield, .tertiarycolorfield{
	width: 95%;
	height: 27%;
	position: absolute;
}

.primarycolorfield{
	top: 10%;
}
.secondarycolorfield{
	top: 42%;
}
.tertiarycolorfield{
	top: 74%;
}

button {
	float: left;
	aspect-ratio: 1/1;
	margin: 1%;
	border: none;
	cursor: pointer;
}

.topaddon, .bottomaddon, .leftaddon, .rightaddon, .backaddon{
	position: absolute;
	width: 100%;
	height: 80%;
	left: 0%;
	top:20%;
}
.topaddon{
	visibility: var(--topaddvis)
}
.bottomaddon{
	visibility: var(--bottomaddvis);
}
.leftaddon{
	visibility: var(--leftaddvis);
}
.rightaddon{
	visibility: var(--rightaddvis);
}
.backaddon{
	visibility: var(--backaddvis);
}


.topaddoncolorbuttons, .bottomaddoncolorbuttons, .leftaddoncolorbuttons, .rightaddoncolorbuttons, .backaddoncolorbuttons{
	position: absolute;
	left: 0%;
	bottom:0%;
	width: 100%;
	height: 45%;
}
.topaddoncolorbuttons button, .bottomaddoncolorbuttons button, .leftaddoncolorbuttons button, .rightaddoncolorbuttons button, .backaddoncolorbuttons button{
	width: 7%;
}
.topaddonbuttons, .bottomaddonbuttons, .leftaddonbuttons, .rightaddonbuttons, .backaddonbuttons{
	float: left;
	position: absolute;
	width: 100%;
	height: 70%;
	top: 0%;
	font-size: 1rem;
}

.topaddonbuttons button, .bottomaddonbuttons button, .leftaddonbuttons button, .rightaddonbuttons button, .backaddonbuttons button{
	width: 20%;
	margin: 2%;
	margin-top: 2%;
	margin-bottom: 1%;
	aspect-ratio: 1/1;
}

.topaddonbuttons button:hover, .bottomaddonbuttons button:hover, .leftaddonbuttons button:hover, .rightaddonbuttons button:hover, .backaddonbuttons button:hover{
	border: 5px solid var(--primarysitecolor);
	transition-duration: 0.4s;
}

.topaddonbuttons button img, .bottomaddonbuttons button img, .leftaddonbuttons button img, .rightaddonbuttons button img, .backaddonbuttons button img{
	width: 95%;
	aspect-ratio: 1/1;
}


.topcolor1, .bottomcolor1, .leftcolor1, .rightcolor1, .backcolor1{
	height: 30%;
	width: 90%;
	position: absolute;
	top: 0%;
	left: 5%;
}

.topcolor2, .bottomcolor2, .leftcolor2, .rightcolor2, .backcolor2{
	height: 30%;
	width: 90%;
	position: absolute;
	top: 35%;
	left: 5%;
}

.topcolor3, .bottomcolor3, .leftcolor3, .rightcolor3, .backcolor3{
	height: 30%;
	width: 90%;
	position: absolute;
	top: 70%;
	left: 5%;
}

.topcolor1title, .bottomcolor1title, .leftcolor1title, .rightcolor1title, .backcolor1title,
.topcolor2title, .bottomcolor2title, .leftcolor2title, .rightcolor2title, .backcolor2title,
.topcolor3title, .bottomcolor3title, .leftcolor3title, .rightcolor3title, .backcolor3title{
	position: absolute;
	top: -20%;
	left: 5%;
	font-size: 1rem;
}

.topcolor1buttons, .topcolor2buttons, .topcolor3buttons, .
.bottomcolor1buttons, .bottomcolor2buttons, .bottomcolor3buttons, 
.leftcolor1buttons, .leftcolor2buttons, .leftcolor3buttons, 
.rightcolor1buttons, .rightcolor2buttons, .rightcolor3buttons,
.backcolor1buttons, .backcolor2buttons, .backcolor3buttons{
	position: absolute;
	bottom: 0%;
	left: 0%;
	width: 100%;
	height: 60%;
}

.topcolor1buttons button, .topcolor2buttons button, .topcolor3buttons button,
.bottomcolor1buttons button, .bottomcolor2buttons button, .bottomcolor3buttons button,
.leftcolor1buttons button, .leftcolor2buttons button, .leftcolor3buttons button,
.rightcolor1buttons button, .rightcolor2buttons button, .rightcolor3buttons button,
.backcolor1buttons button, .backcolor2buttons button, .backcolor3buttons button{
	border: none;
	width: 13%;
	margin: 1.5%;
	aspect-ratio: 1/1;
	border-radius: 0.66rem;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

.topsecondaryadd3, .bottomsecondaryadd3, .leftsecondaryadd3, .rightsecondaryadd3, .backsecondaryadd3,
.topsecondaryadd2, .bottomsecondaryadd2, .leftsecondaryadd2, .rightsecondaryadd2, .backsecondaryadd2,
.topsecondaryadd, .bottomsecondaryadd, .leftsecondaryadd, .rightsecondaryadd, .backsecondaryadd{
	background: var(--secondarysitecolor);
}

.topprimaryadd3, .bottomprimaryadd3, .leftprimaryadd3, .rightprimaryadd3, .backprimaryadd3,
.topprimaryadd2, .bottomprimaryadd2, .leftprimaryadd2, .rightprimaryadd2, .backprimaryadd2,
.topprimaryadd, .bottomprimaryadd, .leftprimaryadd, .rightprimaryadd, .backprimaryadd{
	background: var(--primarysitecolor);
}

.toptertiaryadd2, .bottomtertiaryadd2, .lefttertiaryadd2, .righttertiaryadd2, .backtertiaryadd2,
.toptertiaryadd, .bottomtertiaryadd, .lefttertiaryadd, .righttertiaryadd, .backtertiaryadd,
.toptertiaryadd3, .bottomtertiaryadd3, .lefttertiaryadd3, .righttertiaryadd3, .backtertiaryadd3{
	background: var(--tertiarysitecolor);
}

.topblack, .topblack2, .topblack3,
.bottomblack, .bottomblack2, .bottomblack3,
.leftblack, .leftblack2, .leftblack3,
.rightblack, .rightblack2, .rightblack3,
.backblack, .backblack2, .backblack3{
	background: black;
}

.topwhite, .topwhite2, .topwhite3,
.bottomwhite, .bottomwhite2, .bottomwhite3,
.leftwhite, .leftwhite2, .leftwhite3,
.rightwhite, .rightwhite2, .rightwhite3,
.backwhite, .backwhite2, .backwhite3{
	background: white;
}

.comments{
	position: absolute;
	width: 100%;
	height: 40%;
	top: 5%;
	left: 0%;
}

.commentbox{
	width: 90%;
	height:80%;
	position: absolute;
	top: 15%;
	left: 5%;
}

.commentbox textarea{
	width: 100%;
	height: 100%;
	border: none;
	background: #ededed;
	border-radius: 1.33rem;
	padding-left: 5%;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	padding: 5%;
	outline: none;
	font-size: 1rem;
}

.commentbox textarea:hover, .commentimagebutton1:hover{
	opacity: 0.7;
}

.commentimages{
	position: absolute;
	width: 100%;
	height: 20%;
	top: 45%;
	left: 0%;
}

.email{
	width: 100%;
	height: 10%;
	position: absolute;
	top: 65%;
	left: 0%;
}

.id{
	width: 100%;
	position: absolute;
	bottom: 11.5%;
	left: 0%;
}
.id p{
	font-size: 2rem;
}
.submitbutton{
	position: absolute;
	width: 95%;
	height: 10%;
	color: white;
	background: var(--primarysitecolor);
	border: none;
	font-size: 1.66rem;
	font-family: exo;
	bottom: .5%;
	left: 1.5%;
	filter: drop-shadow(10px 10px);
	border-radius: 1.33rem;
}

.submitbutton:hover{
	width: 98%;
	height: 12%;
	left: 0px;
	bottom: 0px;
	transition-duration: 0.4s;
}

.popupblur{
	visibility: var(--completepopup);
	position: fixed;
	left: 0px;
	top: 0px;
	background: black;
	opacity: 40%;
	height: 100%;
	width: 100%;
	overflow-x: clip;
	overflow-y: clip;
}
.popupblur button{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0%;
	top: 0%;
	background: transparent;
	border: none;
}
.flippopup{
	visibility: hidden;
	width: 80%;
	aspect-ratio: 1/1;
	background: var(--primarysitecolor);
	border: none;
	position: absolute;
	left: 10%;
	top: 25%;
	border-radius: 1.33rem;
	filter: drop-shadow(#000 5px 5px 10px);
}
.flippopup img{
	height: 100%;
	width: 100%;
	object-fit: contain;
}
.completepopup{
	visibility: var(--completepopup);
	width: 35%;
	aspect-ratio: 2/2;
	background: white;
	border: none;
	position: absolute;
	left: 32.5%;
	top: 10%;
	border-radius: 1.33rem;
	filter: drop-shadow(#000 5px 5px 10px);
}
.popuptitle{
	width: 90%;
	height: 14%;
	position: absolute;
	top: 5%;
	left: 5%;
	font-family: exo;
	color: var(--primarysitecolor);
	text-align: center;
	font-size: 2rem;
}

.completestepscontainer{
	width: 85%;
	height: 50%;
	left: 8%;
	top: 17%;
	position: absolute;
}

.completestepscontainer p{
	line-height: 97%;
	font-size: 1.35rem;
}

.completeshopbutton{
	width: 60%;
	height: 20%;
	position: absolute;
	top: 75%;
	left: 20%;
	background: var(--primarysitecolor);
	border: none;
	border-radius: 1.5rem;
	filter: drop-shadow(#8f8f8f 5px 5px 5px);
	cursor: pointer;
	text-align: center;
	font-size: 2rem;
	color: white;
}

.completebackbutton{
	width: 10%;
	height: 20%;
	position: absolute;
	left: 2%;
	bottom: 2%;
	font-size: 2rem;
	color: var(--primarysitecolor);
	border: none;
	background: none;
	cursor: pointer;
	font-family: exo;
}

.completebackbutton h1{
	font-size: 2rem;
	color: white;
}

.completeshopbutton:hover, .completebackbutton:hover{
	opacity: 0.7;
}

.completeid{
	width: 50%;
	position: absolute;
	bottom: 2%;
	right: 0%;
}
.completeid p{
	font-size: 3rem;
	color: var(--primarysitecolor);
}
@media screen and (max-width: 440px) and (orientation: portrait){
	.popupblur{
		position: fixed;
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
		visibility: visible;
	}
	.flippopup{
		visibility: visible;
	}
}


/*small phones*/
@media screen and (max-width: 940px) and (orientation: landscape){
	html{
		font-size: 8px;
	}
	header{
		visibility: hidden;
	}
	body{
		position: fixed;
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
	}
	input {
  	border-radius: 0;
	}
	.details, .cage, .straps, .helmet{
		height: 100%;
		top: 0%;
	}
	.styleopt, .coloropt, .logoopt, .textureopt, .addonopt, .completeopt{
		height: 100%;
		top: 0%;
	}
	.styleopt li {
    margin: 3px;
    width: 25%;
	}	
	.canvas{
		top: 2.5%;
		width: 40%;
		left: 30%;
		aspect-ratio: 1/1;
	}
	.bruce{
		visibility: hidden;
	}
	.navigation{
		height: 100%;
		top: 0%;
	}
	.navigation input:hover{
		padding-left: 0%;
		transition-duration: 0.4s;
	}
	.navigation2{
		height: 100%;
		top: 0%;
	}
	.texturefield li{
	  margin: 3px;
	  width: 20%;
	}
	.designselect input, .addonselect input{
		font-size: 0.8rem;
	}
	.leftarrows button, .rightarrows button, .backarrows button,
	.lefttextarrows button, .righttextarrows button, .backtextarrows button{
	  width: 20%;
	  padding: 2px;	
	  }

	 .toparrows button img, .toptextarrows button img, .bottomarrows button img, .bottomtextarrows button img{
	}

	.commenttitle{
		visibility: hidden;
	}

	.toparrows button, .toptextarrows button, .bottomarrows button, .bottomtextarrows button{
		margin: 3px;
		padding: 2px;	
	}
	.switch {
	  width: 50px;
	  height: 24px;
	}
	.slider {
	  border-radius: 34px;
	}

	/* The toggle knob */
	.slider:before {
	  height: 18px;       /* 18 × 2 */
	  width: 18px;        /* 18 × 2 */
	  left: 3px;          /* 3 × 2 */
	  bottom: 3px;        /* 3 × 2 */
	  filter: none;
	}
	input:checked + .slider:before {
	  transform: translateX(26px);  /* 26 × 2 */
	}

	input[type=range].slider::-webkit-slider-thumb {
	  width: 25px;
	  height: 25px;
	  border: 3px solid var(--primarysitecolor);
	  filter: none;
	}
	input[type=range].slider {
	  height: 10px;
	  filter: none;
	}
	.logoinputarea1, .logoinputarea2, .logoinputarea3{
		height: 60%;
	}
	.logoinputarea, .logoinputarea1, .logoinputarea2, .logoinputarea3, .toplogoinputarea,
	.bottomlogoinputarea, .leftlogoinputarea, .rightlogoinputarea, .backlogoinputarea{
	  filter: none;
	}
	.brandtitle, .helmetdivisiontitle, .helmetsizetitle, .modeltitle,
	.nametitle, .teamtitle, .logodetailtitle, .backplatetitle, .strapscolortitle,
	.bucklescolortitle, .cagestyletitle, .cagecolortitle, .strapscontroltitle,
	.highlighttitle, .commenttitle, .emailtitle{
		top: 0%;
	}
	.highlighttitle{
		left: -25%;
	}	
	.helmetprofile p{
		padding-top: 0%;
	}
	.difficultytitle{
		font-size: 1rem;
	}
	.topcolor1title, .bottomcolor1title, .leftcolor1title, .rightcolor1title, .backcolor1title,
	.topcolor2title, .bottomcolor2title, .leftcolor2title, .rightcolor2title, .backcolor2title,
	.topcolor3title, .bottomcolor3title, .leftcolor3title, .rightcolor3title, .backcolor3title{
		top: -25%;
	}
	.topaddonbuttons, .bottomaddonbuttons, .leftaddonbuttons, .rightaddonbuttons, .backaddonbuttons{
		top: -5%;
	}
	.commentbox textarea{
		filter:none;
	}
	.completeshopbutton{
		font-size: 1.25rem;
		line-height: 0.9;
		padding-top: 2%;
	}
	.topfontcolorstitle, .topbordercolorstitle, .bottomfontcolorstitle, .bottombordercolorstitle, .leftfontcolorstitle,
	.leftbordercolorstitle, .rightfontcolorstitle, .rightbordercolorstitle, .backfontcolorstitle, .backbordercolorstitle,
	.topwhitetitle, .topbordersizetitle, .bottomwhitetitle, .bottombordersizetitle, .leftwhitetitle, .leftbordersizetitle,
	.rightwhitetitle, .rightbordersizetitle, .backwhitetitle, .backbordersizetitle{
		top: -3%;
	}
	.topsizecontainer p, .bottomsizecontainer p, .leftsizecontainer p, .rightsizecontainer p, .backsizecontainer p,
	.topfontsizecontainer p, .bottomfontsizecontainer p, .leftfontsizecontainer p, .rightfontsizecontainer p, .backfontsizecontainer p{
		font-size: 1rem;
	}
	.topdisplaybuttons button{
	  width: 43%;
	  padding: 2px;	
	  margin: 2px;
	}
}

/*tablets landscape*/
@media screen and (min-width: 940px) and (max-width: 1200px) and (orientation: landscape){
	html{
		font-size: 12px;
	}
	.styleopt li {
    margin: 5px;
    width: 25%;
	}	
	.leftarrows button, .rightarrows button, .backarrows button,
	.lefttextarrows button, .righttextarrows button, .backtextarrows button{
	  width: 22%;
	  }
	.texturefield li{
	  margin: 3px;
	  width: 21%;
	}
	.logoinputarea1, .logoinputarea2, .logoinputarea3{
		height: 45%;
	}
	.commenttitle{
	left: -17%;
	}
	.brandtitle, .helmetdivisiontitle, .helmetsizetitle, .modeltitle,
	.nametitle, .teamtitle, .logodetailtitle, .backplatetitle, .strapscolortitle,
	.bucklescolortitle, .cagestyletitle, .cagecolortitle, .strapscontroltitle,
	.highlighttitle, .commenttitle, .emailtitle{
		top: 0%;
	}
	.highlighttitle{
		left: -25%;
	}	
	input[type=range].slider::-webkit-slider-thumb {
	  filter: none;
	}
	input[type=range].slider {
	  filter: none;
	}
	.logoinputarea, .logoinputarea1, .logoinputarea2, .logoinputarea3, .toplogoinputarea,
	.bottomlogoinputarea, .leftlogoinputarea, .rightlogoinputarea, .backlogoinputarea{
	  filter: none;
	}
	.topsizecontainer p, .bottomsizecontainer p, .leftsizecontainer p, .rightsizecontainer p, .backsizecontainer p,
	.topfontsizecontainer p, .bottomfontsizecontainer p, .leftfontsizecontainer p, .rightfontsizecontainer p, .backfontsizecontainer p{
		font-size: 1rem;
	}
	.completeshopbutton{
		font-size: 1.25rem;
		line-height: 0.9;
		padding-top: 2%;
	}
	.commentbox textarea{
		filter:none;
	}
}

/*desktop*/
@media screen and (min-width: 1800px){
	html{
		font-size: 15px;
	}
	.brandbuttons button, .helmetsizeopt button, .helmetdivisionopt button{
		font-size: 1rem;
	}
	.navigation, .navigation2{
		width: 4%;
	}
	.canvas{
		width: 40%;
		left: 30%;
	}
	.lefttextarrows button, .righttextarrows button, .backtextarrows button{
		width: 20%;
		margin: 8px;
	}

	.leftarrows button, .rightarrows button, .backarrows button{
		width: 18%;
		margin: 11px;
	}

	.easyfield button, .mediumfield button, .hardfield button{
		float: left;
		width: 30%;
		aspect-ratio: 1/1;
		margin-top: 5%;
		cursor: pointer;
		background: transparent;
		border: none;
	}
	.texturefield{
		position: absolute;
		left: 5%;
		width: 90%;
	}
}