:root {
	--eclipse: #000A29;
	--midnight: #000f3a;
	--magenta: #f11cf7;
	--yellow: #ffec00;
	--blue: #12fff8;
  }
  
  @font-face {
	  font-family: 'Acumin'; /*a name to be used later*/
	  src: url('fonts/Acumin-BdPro.otf'); /*URL to font*/
	  font-weight: normal;
	  font-style: normal;
  }
  
  @font-face {
	  font-family: 'Acumin'; /*a name to be used later*/
	  src: url('fonts/Acumin-BdPro.otf'); /*URL to font*/
	  font-weight: 400;
	  font-style: normal;
  }
  
  @font-face {
	  font-family: 'Acumin'; /*a name to be used later*/
	  src: url('fonts/Acumin-BdPro.otf'); /*URL to font*/
	  font-weight: 400;
	  font-style: italic;
  }
  
  @font-face {
	  font-family: 'Acumin'; /*a name to be used later*/
	  src: url('fonts/Acumin-BdPro.otf'); /*URL to font*/
	  font-variant: small-caps;
  }
  
  @font-face {
	  font-family: 'Acumin'; /*a name to be used later*/
	  src: url('fonts/Acumin-BdPro.otf'); /*URL to font*/
	  font-weight: 200;
	  font-style: normal;
  }
  
  @font-face {
	  font-family: 'Acumin'; /*a name to be used later*/
	  src: url('fonts/Acumin-BdPro.otf'); /*URL to font*/
	  font-weight: 600;
	  font-style: normal;
  }
  
  @font-face {
	  font-family: 'AcuminLight'; /*a name to be used later*/
	  src: url('fonts/AcuminVariableConcept.otf'); /*URL to font*/
	  font-weight: 100;
  }
  
  @font-face {
	  font-family: 'AcuminLight'; /*a name to be used later*/
	  src: url('fonts/AcuminVariableConcept.otf'); /*URL to font*/
	  font-weight: 200;
  }
  
  @font-face {
	  font-family: 'AcuminLight'; /*a name to be used later*/
	  src: url('fonts/AcuminVariableConcept.otf'); /*URL to font*/
	  font-weight: 300;
  }
  
  @font-face {
	  font-family: 'AcuminLight'; /*a name to be used later*/
	  src: url('fonts/AcuminVariableConcept.otf'); /*URL to font*/
	  font-weight: 400;
  }
  
  @font-face {
	  font-family: 'AcuminLight'; /*a name to be used later*/
	  src: url('fonts/AcuminVariableConcept.otf'); /*URL to font*/
	  font-weight: 500;
  }
  
  @font-face {
	  font-family: 'AcuminLight'; /*a name to be used later*/
	  src: url('fonts/AcuminVariableConcept.otf'); /*URL to font*/
	  font-weight: 600;
  }
  
  @font-face {
	  font-family: 'AcuminLight'; /*a name to be used later*/
	  src: url('fonts/AcuminVariableConcept.otf'); /*URL to font*/
	  font-weight: 700;
  }
  
  @font-face {
	  font-family: 'AcuminSlant'; /*a name to be used later*/
	  src: url('fonts/Acumin-BdItPro.otf'); /*URL to font*/
  }
  
  html,
  body {
	  overflow: hidden;
	  position: relative;
	  height: 100%;
  }
  
  a:hover{
	  text-decoration:none;
  }
  
  canvas {
	outline: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
  }
  
  .js-loading{
	  animation-play-state: paused !important;
  }
  
  .buttonA:hover{
	  opacity: .7 !important;
	  cursor: pointer;
  }
  
  .colorDeleted{
	  /*This class intentionally left blank*/
  }
  
  .AcuminLight{
	  font-family: "AcuminLight", Arial, Helvetica, sans-serif;
	  /*font-variant: small-caps;*/
	  font-size:75%;
	  text-transform: uppercase;
  }
  
  .AcuminLightNumbers{
	  /*font-size:75%;*/
  }
  
  .AcuminLight a{
	  color: var(--midnight);
	  transition: color .125s;
  }
  
  .AcuminLight a:hover{
	  color: var(--magenta);
  }
  
  .polaroidContainer{
	  background-color: white;
	  width: 100%;
	  padding: 10px;
	  margin: 10px;
	  border: 2px solid #fafafa;
	  border-radius: 5px;
	  display: flex;
	  flex-wrap: wrap;
  }
  
  .polaroidTitle{
	  font-family: 'AcuminLight';
  }
  
  .polaroidInputContainer{
	  display: flex;
	  flex-flow: row;
	  flex-wrap: wrap;
	  align-content: baseline;
	  padding: 10px;
  }
  
  input[type=file].polaroidInput{
	  width: max(50%, 100px);
	  margin: 5px;
  }
  
  textarea.polaroidInput{
	  width: 100%;
	  margin: 5px;
	  height: 2.5em;
  }
  
  .polaroidInputContainer.textType{
	  width: 100%;
  }
  
  .polaroidInputContainer.textType > .polaroidThumbnailContainer{
	  width: 100%;
  }
  
  .font-sizenumber{
	  width: 3.1em !important;
  }
  
  .polaroidSelect{
	  border: 2px solid var(--blue);
  }
  
  .polaroidThumbnail{
	  height: 98px;
	  width: 98px;
	  display: none;
  }
  
  .polaroidThumbnailContainer{
	  border: 1px solid black;
	  background-color: #fafafa;
	  width: 100px;
	  height: 100px;
	  margin: 5px;
	  display: flex;
	  justify-content: center;
		  background-size: contain;
		  background-repeat: no-repeat;
		  background-position: center;
  }
  
  .measurements{
	  width: 100%;
	  padding: 10px;
	  display: flex;
	  flex-wrap: wrap;
  }
  
  .eachMeasure{
	  padding: 0 2%;
	  margin: 5px 0;
	  display: flex;
	  align-self: center;
  }
  
  .eachMeasureFullWidth{
	  width: 98%;
  }
  
  .eachMeasure > label{
	  flex-grow: 0;
	  margin-right: 5px;
	  align-self: flex-end;
  }
  
  .eachMeasure > input{
	  flex-grow: 1;
	  height: 1.5em;
  }
  
  .eachMeasure > select{
	  height: 1.5em;
  }
  
  input[type="range"]:enabled {
   -webkit-appearance: none;
  }
  
  input[type="range"]:focus {
   outline: none;
  }
  
  input[type="range"]:enabled::-webkit-slider-runnable-track {
   background: #f6a2f9;
   height: 5px;
  }
  
  input[type="range"]:enabled::-moz-range-track {
   background: #f6a2f9;
   height: 5px;
  }
  
  input[type="range"]:disabled::-webkit-slider-runnable-track {
   background: #d6d6d6;
   height: 5px;
  }
  
  input[type="range"]:disabled::-moz-range-track {
   background: #d6d6d6;
   height: 5px;
  }
  
  /* Special styling for WebKit/Blink */
  input[type="range"]:enabled::-webkit-slider-thumb{
	-webkit-appearance: none;
	  height: 15px;
	  width: 15px;
	  background: var(--magenta);
	  margin-top: -5px;
	  border-radius: 50%;
	  cursor: pointer;
  }
  
  /* Special styling for WebKit/Blink */
  input[type="range"]:disabled::-webkit-slider-thumb{
	-webkit-appearance: none;
	  height: 15px;
	  width: 15px;
	  background: #A9A9A9;
	  margin-top: -5px;
	  border-radius: 50%;
	  cursor: pointer;
  }
  
  /* All the same stuff for Firefox */
  input[type="range"]:enabled::-moz-range-thumb {
	  
	  height: 15px;
	  width: 15px;
	  background: var(--magenta);
	  margin-top: -5px;
	  border-radius: 50%;
	  cursor: pointer;
	  
  }
  
  /* All the same stuff for Firefox */
  input[type="range"]:disabled::-moz-range-thumb {
	  
	  height: 15px;
	  width: 15px;
	  background: #A9A9A9;
	  margin-top: -5px;
	  border-radius: 50%;
	  cursor: pointer;
	  
  }
  
  /* All the same stuff for IE */
  input[type="range"]:enabled::-ms-thumb {
	  
	  height: 15px;
	  width: 15px;
	  background: var(--magenta);
	  margin-top: -5px;
	  border-radius: 50%;
	  cursor: pointer;
	  
  }
  
  /* All the same stuff for IE */
  input[type="range"]:disabled::-ms-thumb {
	  
	  height: 15px;
	  width: 15px;
	  background: #A9A9A9;
	  margin-top: -5px;
	  border-radius: 50%;
	  cursor: pointer;
	  
  }
  /*width*/
  /* Special styling for WebKit/Blink */
  input.Widthrange[type="range"]:enabled::-webkit-slider-thumb{
	  background: var(--blue);
  }
  
  /* Special styling for WebKit/Blink */
  input.Widthrange[type="range"]:enabled::-moz-range-thumb{
	  background: var(--blue);
  }
  
  /* Special styling for WebKit/Blink */
  input.Widthrange[type="range"]:enabled::-ms-thumb{
	  background: var(--blue);
  }
  
  input.Widthrange[type="range"]:enabled::-webkit-slider-runnable-track {
   background: #8df4f1;
   height: 5px;
  }
  
  input.Widthrange[type="range"]:enabled::-moz-range-track {
   background: #8df4f1;
   height: 5px;
  }
  
  /*height*/
  
  /* Special styling for WebKit/Blink */
  input.Heightrange[type="range"]:enabled::-webkit-slider-thumb{
	  background: var(--magenta);
  }
  
  /* Special styling for WebKit/Blink */
  input.Heightrange[type="range"]:enabled::-moz-range-thumb{
	  background: var(--magenta);
  }
  
  /* Special styling for WebKit/Blink */
  input.Heightrange[type="range"]:enabled::-ms-thumb{
	  background: var(--magenta);
  }
  
  input.Heightrange[type="range"]:enabled::-webkit-slider-runnable-track {
   background: #f6a2f9;
   height: 5px;
  }
  
  input.Heightrange[type="range"]:enabled::-moz-range-track {
   background: #f6a2f9;
   height: 5px;
  }
  
  
  /*rotation*/
  
  /* Special styling for WebKit/Blink */
  input.Rotationrange[type="range"]:enabled::-webkit-slider-thumb{
	  background: var(--yellow);
  }
  
  /* Special styling for WebKit/Blink */
  input.Rotationrange[type="range"]:enabled::-moz-range-thumb{
	  background: var(--yellow);
  }
  
  /* Special styling for WebKit/Blink */
  input.Rotationrange[type="range"]:enabled::-ms-thumb{
	  background: var(--yellow);
  }
  
  input.Rotationrange[type="range"]:enabled::-webkit-slider-runnable-track {
   background: #fff791;
   height: 5px;
  }
  
  input.Rotationrange[type="range"]:enabled::-moz-range-track {
   background: #fff791;
   height: 5px;
  }
  
  .buttonsContainer{
	  width: 100%;
	  padding: 10px;
	  display: flex;
	  flex-wrap: wrap;
	  flex-direction: row;
  }
  
  .buttonsContainer button{
	  margin: 3px;
  }
  
  #progressBar{
	  width: 100%;
	  height: 20px;
	  margin: 20px 0;
	  border: solid 2px black;
	  background-color: white;
  }
  
  #progressFill{
	  position: relative;
	  left: 0;
	  width: 0;
	  height: 100%;
	  background-color: green;
  }
  
  #switchSideButton{
	  position: absolute;
	  bottom: 5px;
	  left: 5px;
	  height: 100px;
	  width: auto;	
	  z-index: 1;
  }
  
  #mainCont{
	  position: absolute;
	  width: 100%;
	  height: 100%;
  }
  
  #startLogoDiv{
	  display: flex;
	  align-items: center;
	  align-content: center;
	  justify-content: center;
	  flex-direction: row;
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom:0;
	  left:0;
  }
  
  #startLogo{
	  position: absolute;
	  height: 383px;
	  width: 212px;
	  
	  z-index: 13;
	  opacity: 1;
	  -moz-opacity: 1; /* Firefox and Mozilla browsers */
	  -webkit-opacity: 1; /* WebKit browser e.g. Safari */
	  filter: alpha(opacity=100); /* For IE8 and earlier */
	  
	  background-image: url("logoWhite.png");
	  animation: 4s logo forwards;
	  -webkit-animation: 4s logo forwards;
  }
  
  #loadingText{
	  position: absolute;
	  text-align: center;
	  width: 100%;
	  bottom: -55px;
	  font-size: 40px;
	  color: white;
	  font-weight: 300;
	  font-family: 'Changa', Arial;
	  
		  opacity: 0;
		  -moz-opacity: 0; /* Firefox and Mozilla browsers */
		  -webkit-opacity: 0; /* WebKit browser e.g. Safari */
		  filter: alpha(opacity=0); /* For IE8 and earlier */
	  
	  animation: 3s fadeIn 2s infinite alternate;
	  -webkit-animation: 3s fadeIn 2s infinite alternate;
  }
  
  @keyframes fadeIn{
	  0%{
		  opacity: 0;
		  -moz-opacity: 0; /* Firefox and Mozilla browsers */
		  -webkit-opacity: 0; /* WebKit browser e.g. Safari */
		  filter: alpha(opacity=0); /* For IE8 and earlier */
	  }
	  
	  100%{
		  opacity: 1;
		  -moz-opacity: 1; /* Firefox and Mozilla browsers */
		  -webkit-opacity: 1; /* WebKit browser e.g. Safari */
		  filter: alpha(opacity=100); /* For IE8 and earlier */
	  }
  }
  
  @-webkit-keyframes fadeIn{
	  0%{
		  opacity: 0;
		  -moz-opacity: 0; /* Firefox and Mozilla browsers */
		 -webkit-opacity: 0; /* WebKit browser e.g. Safari */
		  filter: alpha(opacity=0); /* For IE8 and earlier */
	  }
	  
	  100%{
		  opacity: 1;
		  -moz-opacity: 1; /* Firefox and Mozilla browsers */
		 -webkit-opacity: 1; /* WebKit browser e.g. Safari */
		  filter: alpha(opacity=100); /* For IE8 and earlier */
	  }
  }
  
  
  #loadingLogo{
	  position: absolute;
	  height: 383px;
	  width: 212px;
	  
	  z-index: 14;
	  opacity: 0;
	  -moz-opacity: 0; /* Firefox and Mozilla browsers */
	 -webkit-opacity: 0; /* WebKit browser e.g. Safari */
	  filter: alpha(opacity=0); /* For IE8 and earlier */
	  
	  background-image: url("logoWhite.png");
	  animation: 4s loadingLogo forwards;
	  -webkit-animation: 4s loadingLogo forwards;
  }
  
  @keyframes loadingLogo{
	  0%{
			  opacity: 0;
			  -moz-opacity: 0; /* Firefox and Mozilla browsers */
			 -webkit-opacity: 0; /* WebKit browser e.g. Safari */
			  filter: alpha(opacity=0); /* For IE8 and earlier */
	  }
	  5%{
		  opacity: 0;
		  -moz-opacity: 0; /* Firefox and Mozilla browsers */
		 -webkit-opacity: 0; /* WebKit browser e.g. Safari */
		  filter: alpha(opacity=0); /* For IE8 and earlier */
	  }
	  
	  15%{
		  opacity: 1;
		  -moz-opacity: 1; /* Firefox and Mozilla browsers */
		 -webkit-opacity: 1; /* WebKit browser e.g. Safari */
		  filter: alpha(opacity=100); /* For IE8 and earlier */
	  }
	  
	  100%{
		  opacity: 1;
		  -moz-opacity: 1; /* Firefox and Mozilla browsers */
		 -webkit-opacity: 1; /* WebKit browser e.g. Safari */
		  filter: alpha(opacity=100); /* For IE8 and earlier */
	  }
  }
  
  @-webkit-keyframes loadingLogo{
		  0%{
			  opacity: 0;
			  -moz-opacity: 0; /* Firefox and Mozilla browsers */
			 -webkit-opacity: 0; /* WebKit browser e.g. Safari */
			  filter: alpha(opacity=0); /* For IE8 and earlier */
	  }
	  5%{
		  opacity: 0;
		  -moz-opacity: 0; /* Firefox and Mozilla browsers */
		 -webkit-opacity: 0; /* WebKit browser e.g. Safari */
		  filter: alpha(opacity=0); /* For IE8 and earlier */
	  }
	  
	  15%{
		  opacity: 1;
		  -moz-opacity: 1; /* Firefox and Mozilla browsers */
		 -webkit-opacity: 1; /* WebKit browser e.g. Safari */
		  filter: alpha(opacity=100); /* For IE8 and earlier */
	  }
	  
	  100%{
		  opacity: 1;
		  -moz-opacity: 1; /* Firefox and Mozilla browsers */
		 -webkit-opacity: 1; /* WebKit browser e.g. Safari */
		  filter: alpha(opacity=100); /* For IE8 and earlier */
	  }
  }
  
  #triangleTL{
	  z-index: 10;
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom:0;
	  left:0;
	  
	  background-color:black;
	border-right: 100vw solid transparent;
	border-top: 100vh solid black;
	
	/*animation-delay: 10s slideOutTL;*/
	animation: .7s ease-in 4s 1 slideOutTL forwards;
	-webkit-animation: .7s ease-in 4s 1 slideOutTL forwards; /* for less modern browsers */
		  
  }
  
  #triangleBR{
	  z-index: 11;
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom:0;
	  left:0;
	  
	border-left: 100vw solid transparent;
	border-bottom: 100vh solid black;
	
	  animation: .7s ease-in 4s 1 slideOutBR forwards;
	-webkit-animation: .7s ease-in 4s 1 slideOutBR forwards;
  }
  
  @keyframes slideOutTL {
	from {
		  transform: translateX(0vw) translateY(0vh);
		  background-color: transparent;
	}
  
	to {
		  transform: translateX(-100vw) translateY(-100vh);
		  background-color: transparent;
		  display: none;
	}
  }
  
  @-webkit-keyframes slideOutTL {
	from {
		  -webkit-transform: translateX(0vw) translateY(0vh);
		  background-color: transparent;
	}
  
	to {
		  -webkit-transform: translateX(-100vw) translateY(-100vh);
		  background-color: transparent;
		  display: none;
	}
  }
  
  @-webkit-keyframes slideOutBR {
	from {
		  -webkit-transform: translateX(0vw) translateY(0vh);
	}
  
	to {
		  -webkit-transform: translateX(100vw) translateY(100vh);
		  display: none;
	}
  }
  
  #header{
	  position: fixed;
	  display: flex;
	  flex-direction: row;
	  flex-wrap: nowrap;
	  align-items: center;
	  justify-content: space-between;
	  width: 100%;
	  background-color: var(--midnight);
	  height: 70px;
	  z-index: 2;
  }
  
  .navChild{
	  display:flex;
	  flex-direction: row;
	  flex-wrap: nowrap;
	  align-items: center;
	  justify-content: center;
	  width: 30%;
  }
  
  .navChild.rightBTN{
	  display:flex;
	  flex-direction: row;
	  flex-wrap: nowrap;
	  align-items: center;
	  justify-content: right;
  }
  
  #smooveIndex{
	  display: flex;
	  text-align: center;
	  color: var(--light);
	  font-family: 'AcuminLight', Arial, sans-serif;
	  font-variant: all-small-caps;	
	  justify-content: center;
	  align-items: center;
  }
  
  #smooveIndex img{
	  position: relative;
	  top: 0;
  }
  
  .navBTN{
	  display: flex;
	  flex-direction: row;
	  flex-wrap: nowrap;
	  align-items: center;
	  justify-content: center;
  }
  
  #login{
	  /*border: 2px solid #515e6e;*/
	  transition: color .5s, border-color .75s;
	  height: 40px;
	  width: 80px;
  }
  
  .navChild.rightBTN a{
	  color: var(--light);
  }
  
  #login:hover{
	  color: var(--light) !important; 
	  border: 2px solid var(--light);
  }
  
	/* Style the button that is used to open the sidepanel */
  #cartBTNWrapper {
	  height: 100%;
	  width: 70px;
	  cursor: pointer;
	  display: flex;
	  align-content: center;
	  justify-content: center;
	  align-items: center;
	  box-sizing:border-box;
	  border-radius:2px;
  }
  
  #cartImage {
	  height: 40px;
	  width: 40px;
	  position: relative;
	  background: url(./images/realcart.svg) no-repeat;
	  background-size: cover;
	  transition: filter .5s;
  }
  
  #cartImage.open{
	  filter: invert(95%) sepia(84%) saturate(6358%) hue-rotate(118deg) brightness(101%) contrast(101%);
  }
  
  #cartImage.closed{
	  filter: invert(75%) sepia(91%) saturate(822%) hue-rotate(1deg) brightness(110%) contrast(103%);
  }
  
  #cartBTNWrapper:hover #cartImage{
	  animation: shake 0.6s, colorChange .75s;
	  animation-iteration-count: infinite;
  }
  
  #cartBTNWrapper:active{
	  /*border: 2px solid var(--light);*/
	  background-color: var(--eclipse);
  }
  
  #cartBTNWrapper:active #cartImage{
	  animation-play-state: paused;
  }
  
  @keyframes colorChange {
	  33% { filter: invert(75%) sepia(91%) saturate(822%) hue-rotate(1deg) brightness(110%) contrast(103%); }
	  66% { filter: invert(22%) sepia(74%) saturate(2561%) hue-rotate(281deg) brightness(121%) contrast(123%); }
	  100% { 	filter: invert(95%) sepia(84%) saturate(6358%) hue-rotate(118deg) brightness(101%) contrast(101%);	}
  }
  
  @keyframes shake {
	  0% { transform: translate(1px, 1px) rotate(0deg); }
	  10% { transform: translate(-1px, -2px) rotate(-2deg); }
	  20% { transform: translate(-2px, 0px) rotate(2deg); }
	  30% { transform: translate(2px, 2px) rotate(0deg); }
	  40% { transform: translate(1px, -1px) rotate(2deg); }
	  50% { transform: translate(-1px, 2px) rotate(-1deg); }
	  60% { transform: translate(-2px, 1px) rotate(0deg); }
	  70% { transform: translate(2px, 1px) rotate(-1deg); }
	  80% { transform: translate(-1px, -1px) rotate(2deg); }
	  90% { transform: translate(1px, 2px) rotate(0deg); }
	  100% { transform: translate(1px, -2px) rotate(-2deg); }
	}
  
  
  /* The sidepanel menu */
	#sidepanel {
	  z-index:2;
	}

	#moqWarning{
		position: relative;
		font-family: 'AcuminLight', Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: white;
		background-color: var(--magenta);
		width: 100%;
		padding: 4px;
	}
  
	#checkoutSidePanel {
	  z-index:3;
	  background-color: var(--midnight);
	  color: #ffffff;
	}
  
	.sidePanel{
	  display: flex;
	  flex-direction: column;
	  align-content: center;
	  width: 30%; /* 0 width - change this with JavaScript */
	  position: absolute;
	  top: 70px;
	  bottom: 0;
	  right: 0;
	  background-color: #dcddde;
	  overflow-x: hidden; /* Disable horizontal scroll */
	  overflow-y: auto;
	  transition: transform 0.3s ease-in; /* 0.5 second transition effect to slide in the sidepanel */
	}
  
	#checkoutButton{
	  height: 50px;
	  width: 90px;
	  align-self: flex-end;
	  margin: 15px;
	}

	.disabledCheckoutButton{
		pointer-events: none;
		opacity: .4;
	}
  
  .openSidePanel{
	  transform: translate(0);
  }
  
  .closedSidePanel{
	  transform: translateX(100%);
	  transition: transform 0.3s ease-in .12s;
  }
  
  .panelNav{
	  position: relative;
	  width: 100%;
	  top: 0;
	  display: flex;
	  flex-direction: row-reverse;
	  justify-content: space-between;
  }
  
  
  
  .closeSidePanelButton{
	  position: relative;
	  display: flex;
		  justify-content: center;
		  align-items: center;
	  width: 50px;
	  height: 50px;
	  font-size: 20px;
	  right: 0;
	  top: 0;
	  padding: 10px;
	  cursor: pointer;
	  transition: font-size .125s ease-in;
  }
  
  #closeSidePanelButton:hover{
	  font-size: 22px;
  }
  
  #closeSidePanelButton:active{
	  color: var(--magenta);
	  transition: font-size .125s ease-in;
	  font-size: 0;
  }
  
  .closedSidePanel #closeSidePanelButton, .closedSidePanel #closeSidePanelButton:hover{
	  font-size: 0;
  }
  
  #panelContent{
	  position: relative;
	  width: 100%;
	  display: flex;
	  box-sizing:border-box;
	  /*flex-grow: 2;*/
	  padding: 0 4px 10px 4px;
	  /*overflow-y: auto;*/
  }
  
  #cartQuantity{
	  position: relative;
	  font-weight: bold;
	  font-size: 18px;
	  margin: 10px;
  }
  
  #designCartCardContainers{
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  font-size: 18px;
  }
  
  #designCartCardContainers .AcuminLight{
	  font-weight: 700;
  }
  
  .thisDesign{
	  order: 1 !important;
  }
  
  .designCardInCart{
	  display: flex;
	  flex-direction: column;
	  position: relative;
	  max-width: 400px;
	  margin: 2px 5px 10px 5px;
	  padding: 10px;
		box-shadow: 1px 4px var(--eclipse);
	  background-color: #f5f5f5;
	  border-radius: 3px;
	  border: 2px solid var(--eclipse);
	  transition: background-color .1s, box-shadow .15s, transform .25s, cursor .5s;
	  order: 2;
  }
  
  .designCardInCart:hover{
	  /*box-shadow: 2px 6px var(--magenta);*/
	  /*box-shadow: 4px 6px 1px 3px #002ba7;
	  box-shadow: 6px 6px var(--yellow), -0px -2px var(--magenta), -6px 0px var(--blue);
	  */
	  background-color: #fafafa;
  }
  
  .neuBrutalistButton{
	  font-family: 'AcuminLight', Arial, Helvetica, sans-serif;
	  font-variant: small-caps;
	  font-weight: 700;
	  padding: 10px;
		box-shadow: 1px 4px var(--eclipse);
	  background-color: #f5f5f5;
	  border-radius: 3px;
	  border: 2px solid var(--eclipse);
	  transition: background-color .1s, box-shadow .15s, transform .25s, cursor .5s;
	  text-align: center;
  }
  
  .neuBrutalistButton:hover{
	  box-shadow: 6px 6px var(--yellow), -0px -2px var(--magenta), -6px 0px var(--blue);
	  border-radius: 3px;
	  background-color: #fafafa;
	  cursor: pointer;
  }
  
  .sizes{
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  flex-wrap: nowrap;
	  align-self: center;
	  margin: 2px 10px;
	  padding: 5px;
	  border-radius: 5px;
  }
  
  .size{
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;	
	  justify-content: space-around;
	  align-items: center;
	  font-size: 16px;
	  margin: 2px 0;
	  width: auto;
	  padding: 4px;
	  background-color: #dcddde;
	  border: 1px solid var(--eclipse);
	  border-radius: 5px;
	  font-family: 'AcuminLight', Arial, Helvetica, sans-serif;
	  font-variant: small-caps;
	  font-weight: bold;
  }
  
  .size div{
	  margin: 0 5px;
  }
  
  .sizeButton{
	  display: flex;
	  width: fit-content;
  }
  
  .sizeButton:hover{
	  cursor: pointer;
  }
  
  .removeSizeButton{
	  justify-self: flex-end;
  }
  
  input[type=number]::-webkit-inner-spin-button, 
  input[type=number]::-webkit-outer-spin-button {  
  
	 opacity: 1;
  
  }
  
  .itemCard{
	  position: relative;
	  width: 100%;
	  height: 100px;
	  display: flex;
	  color: var(--light);
  }
  
  .tax{
	  font-size:.75em;
  }
	
  #saveStatus{
	  position: absolute;
	  height: auto;
	  top: 10px;
	  right: 10px;
	  text-align: left;
	  color: var(--midnight);
	  z-index: 2;
  }
  
  .lightbox{
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0,0,0,.5);
	  z-index: 2;
  }
  
  .lightbox > div{
	  position: relative;
	  width: 50%;
	  left: 25%;
	  right: 25%;
	  opacity: 1;
	  background-color: #fafafa;
	  margin: 5% 0;
  }
  
  .closeLightBoxButton{
	  position: absolute;
	  right: 0;
	  top: 0;
	  font-size: 24px;
	  line-height: 18px;
	  padding: 5px;
	  cursor: pointer;
  }
  
  .closeLightBoxButton:hover{
	  opacity: .7;
  }
  
  .closedLightbox{
	 display: none; 
  }
  
  .openLightbox{
	  display: flex;
	  position: fixed;
  }
  
  #back{
	  position: absolute;
	  left: 0;
	  top: 0;
	  z-index:3;
	  color: #c9c9c9;
	  padding: 20px 10px;
	  font-size: 20px;
  }
  
  #back:hover{
	  color:white;
  }
  
  #save{
	  position: absolute;
	  right: 0;
	  top: 0;
	  z-index:3;
	  color: #c9c9c9;
	  padding: 20px 10px;
	  font-size: 20px;
  }
  
  #save:hover{
	  color: white;
	  text-decoration: underline;
  }
  
  #savePanel{
	  display: none;
	  flex-flow: row wrap;
	  align-items: center;
	  justify-content: center;
	  align-content: center;
	  position: absolute;
	  top: 20%;
	  width: 60%;
	  height: 60%;
	  margin: 0 20%;
	  background-color: white;
  }
  
  #submitPanel{
	  display: none;
	  flex-flow: row wrap;
	  align-items: center;
	  justify-content: center;
	  align-content: center;
	  position: absolute;
	  top: 20%;
	  width: 60%;
	  height: 60%;
	  margin: 0 20%;
	  background-color: white;
  }
  
  
  #savePanel h2{
	  position: relative;
	  width: 100%;
	  margin-bottom: 30px;
  }
  
  #saveButtonsRow{
	  position: relative;
	  width: 100%;
	  display: flex;
	  flex-flow: row wrap;
	  justify-content: space-around;
  }
  
  #submitButtonsRow{
	  position: relative;
	  width: 100%;
	  display: flex;
	  flex-flow: row wrap;
	  justify-content: space-around;
  }
  
  .saveButton{
	  background-color: black;
	  color: white;
	  padding: 0 5px;
	  font-size: 1.25em;
	  text-align: center;
	  min-width: 100px;
  }
  
  #undo{
	  position: absolute;
	  left: 0;
	  top: 70px;
	  z-index:3;
	  color: black;
	  padding: 20px 10px;
	  font-size: 20px;
  }
  
  #redo{
	  position: absolute;
	  left: 0;
	  top: 120px;
	  z-index:3;
	  color: black;
	  padding: 10px;
	  font-size: 20px;
  }
  
  #colors{
	  position: relative;
	  width: 100%;
  }
  
  #renderCanvas {
	  position: relative;
  }
  
  .containCanvas{
	  position: absolute;
	  top: 70px;
	  width: 70%;
	  left: 0;
	  bottom: 0;
  }
  
  #colorAddCont{
	  position: absolute;
	  top: 164px;
	  height: 40px;
	  right: 0;
	  width: 30%;
	  z-index: 1;
	  background-color: white;
  }
  
  #addColorButton{
	  position: absolute;
	  height: 24px;
	  width: 24px;
	  right: 8px;
	  top: 8px;
	  text-align: right;
	  font-size: 12px;
  }
  
  #addColorButton:hover{
	  opacity: .7;
	  cursor: pointer !important;
  }
  
  #addColorButton:hover, #addColorButton i{
	  cursor: pointer !important;
  }
  
  .color-picker.no-alpha .color-picker\:a {
	display: none;
  }
  
  .containSwatches{
	  background-color: #f5f5f5;
	  position: absolute;
	  overflow-y: auto;
	  width: 30%;
	  right: 0;
	  /*add an extra 40 px space
	  top: 164px; */
	  top: 204px;
	  bottom: 0;
	  display: flex;
	  flex-direction: column;
  }
  
  #workCanvas{
	  display: none;
  }
  
  .colorsImage{
	  width: 75%;
	  height: 75%;
	  border-bottom: 2px white solid;
  }
  
  #selectedName{
	  font-family: 'Changa', Arial;
	  font-weight: light;
	  color: black;
	  font-size: 2.5em;
	  position: relative;
	  margin: 0 10px;
	  width: 100%; 
	  height: 70px;
	  padding: 10px 0;
	  text-align: center;
	  
	  border-bottom: 2px solid var(--dark);
  }
  
  .colorSwatches{
	  min-height: 60px; 
	  position: relative; 
	  width: 100%; 
	  cursor: pointer;
	  z-index: 1;
	  box-sizing: border-box;
	  border-bottom: solid 1px black;
	  color: #ffffff;
  }
  
  .colorLabel{
	  position: relative;
	  opacity: 0;
	  top: 15px;
	  left: 10px;
	  transition: opacity .5s;
	  border-radius: 5px;
	  border-color: #e3e3e3;
  }
  
  .color-picker{
	  z-index: 5;
  }
  
  .zTop{
	  position: relative;
	  opacity: 1;
	  z-index: 5;
  }
  
  #colorEditOverlay{
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  overflow: hidden;
	  width: 100%;
	  height: 100%;
	  background-color: #e3e3e3;
	  opacity: .5;
	  z-index: 4;
  }
  
  .colorSwatches:hover .colorLabel, .colorSwatches:hover .removeButton, .colorSwatches:hover .moveUpButton, .colorSwatches:hover .moveDownButton{
	  opacity: 1;
  }
  
  .colorInputEdited{
	  opacity: 1;
  }
  
  .removeButton{
	  position: absolute;
	  width: 24px;
	  height: 24px;
	  right: 8px;
	  top: 18px;
	  opacity: 0;
	  transition: opacity .5s;
	  cursor: pointer;
	  color: inherit;
  }
  
  .moveUpButton{
	  position: absolute;
	  width: 24px;
	  height: 24px;
	  right: 40px;
	  top: 8px;
	  opacity: 0;
	  transition: opacity .5s;
	  cursor: pointer;
	  color: inherit;
  }
  
  .moveDownButton{
	  position: absolute;
	  width: 24px;
	  height: 24px;
	  right: 40px;
	  bottom: 8px;
	  opacity: 0;
	  transition: opacity .5s;
	  cursor: pointer;
	  color: inherit;
  }
  
  .samplerButton{
	  visibility: hidden;
	  position: absolute;
	  width: 24px;
	  height: 24px;
	  left: 112px;
	  top: 18px;
	  opacity: 0;
	  transition: opacity .5s;
	  cursor: pointer;
	  color: inherit;
  }
  
  
  .containModeButtons{
	  background-color: white;
	  position: absolute;
	  overflow-y:auto;
	  width: 30%;
	  right: 0;
	  top: 70px;
	  height: 92px;
	  z-index:1;
  }
  
  #line{
	  top: 162px;
  }
  
  #line2{
	  top: 252px;
  }
  
  .continerModeButtonsLine{
	  position: absolute;
	  overflow-y:auto;
	  width: 30%;
	  right: 0;
	  z-index: 2;
  }	
  
  .modeLine{
	  border-bottom: 2px solid black;
  }
  
  #addPolaroidButton{
	  text-align: right;
	  padding: 10px;
  }
  
  #addPolaroidButton:hover{
	  cursor: pointer;
  }
  
  #modeSelectionID{
	  justify-content: space-around;
  }
  
  .modeSelectButton{
	  position: relative; 
	  width: 90px;
	  height: 90px;
  }
  
  .modeSelectButton img{
	  position: relative;
	  width: 100%;
	  overflow-y: hidden;
	  
	transition: filter .225s, -webkit-filter .25s;
	transition-timing-function: ease;
  }
  
  #palatteCanvas{
	  width: 100%;
  }
  
  .bandw{
	  opacity: 1;
  }
  
  .bandw:hover{
	  opacity: .7;
  }
  
  #images.modeSelectButton img{
	  background-color: white;
	  transition: background-color .5s;
	  transition-timing-function: ease;
  }
  
  #images.modeSelectButton img:hover{
	  background-color: rgba(255,255,255, 0);
	  background: rgb(255,236,0);
	  background: -moz-linear-gradient(90deg, rgba(255,236,0,1) 25%, rgba(241,28,247,1) 50%, rgba(18,255,248,1) 75%);
	  background: -webkit-linear-gradient(90deg, rgba(255,236,0,1) 25%, rgba(241,28,247,1) 50%, rgba(18,255,248,1) 75%);
	  background: linear-gradient(90deg, rgba(255,236,0,1) 25%, rgba(241,28,247,1) 50%, rgba(18,255,248,1) 75%);
	  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffec00",endColorstr="#12fff8",GradientType=1);
  }
  
  #text.modeSelectButton img{
	  display: none;
	  
	  background-color: white;
	  background-image: url('images/text.png');
	  background-repeat: no-repeat;
	  background-position: center;
	  background-size: contain;
  }
  
  #text.modeSelectButton img:hover{
	  background-image: url('images/text.gif');
  }
  
  #colorWheel.modeSelectButton{
	  overflow: hidden;
  }
  
  #colorWheel.modeSelectButton canvas{
	  transition: transform 2s ease-in-out;
	  overflow: hidden;
  }
  
  #colorWheel.modeSelectButton canvas:hover {
	transform: rotate(3600deg);
  }
  
  .modeSelectButton:hover{
	  cursor: pointer;
  }
  
  .styleSelectShoe{
	  max-height: 300px; 
	  max-width: 300px;
	  min-width: 100px;
	  min-height: 100px;
	  padding: 2%;
  }
  
  .styleSelectShoe:hover{
	  background-color: #E8E8E8;
	  cursor: pointer;
  }
  
  .styleSelectShoe img{
	  width: 96%;
  }
  
  .display-none{
	  display: none;
  }
  
  #static{
	  position: fixed;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
  
	  z-index: 2;
	  background-image: url('static.png');
	  animation: static .5s steps(10) infinite;
  }
  
  @keyframes static{
	  0%
	  {
		  background-position: 0 0;
	  }
	  
	  100%
	  {
		  background-position: 100% 100%;
	  }
  }
  @-webkit-keyframes static{
	  0%
	  {
		  background-position: 0 0;
	  }
	  
	  100%
	  {
		  background-position: 100% 100%;
	  }
  }
  
  
  /*this query for smaller screens regardless of orientation.
	Is overwritten by portrait query if portrait
  */
  
  .editGroup{
	  
  }
  
  
  @media only screen and (max-width: 900px) {
	  #rightHeaderButtons{
		  flex-direction: column;
		  align-items: center;
		  justify-content: flex-end;
		  
		  width: auto;
	  }
	  
	  #rightHeaderButtons div{
		border: none;
		padding: 0px;
		width: auto;
		height: auto;
		color: #fafafa;
	  }
	  
	  #rightHeaderButtons a{
		  width:100%;
	  }
	
	 #header:hover #rightHeaderButtons div{
		border: none;
		padding: 0px;
	}
  
	#sidepanel, #checkoutSidePanel{
	  width: 100%;
	  left:0;
	  right:0;
	}
  }
  
  /*@media only screen and (max-width: 800px) {
  
  @media only screen and (max-width: 800px) and (orientation: portrait) {
  */
  
  @media only screen and (orientation: portrait){
	#back {
	  top: 70px;
	  color: black;
	}
	#back:hover{
		color: black;
	}
	#undo {
		top: 120px;
	}
	#redo{
		top: 170px;
	}
	
	/*additional responsive behavior*/
	#header{
		  display: flex;
		  flex-flow: column;
		  height: 100px;
		  align-items: center;
	}
	#header:hover #rightHeaderButtons div{
		border: none;
		padding: 5px;
	}
	#rightHeaderButtons{
		position: relative;
		width:100%;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	  }
	#rightHeaderButtons > a{
		padding:0;
	}
	#rightHeaderButtons > a > div{
		padding: 5px;
		border:none;
		opacity: .75;
	}
	#accountName{
		display:none;
	}
	#modeSelectionID{
		top:100px;
		width: 100%;
		left:0;
		right:0;
		height:unset;
		justify-content: flex-end;
	  }
	.modeSelectButton{
		height: 40px;
		width: 40px;
		margin:10px;
	}
	#palatteCanvas{
		height:40px;
		width:40px;
	}
	.containCanvas{
		width: 100% !important;
		top: 100px !important;
	}
	#renderCanvas{
		height: 60% !important;
	}
	#containSwatchesID{
		width:100%;
		height:40%;
		top: unset;
		overflow-y: scroll;
		bottom: 0;
	}
	#colorAddCont{
		top:calc(60% - 34px);
		right: 10px;
		height: 24px;
		width: 24px;
		background-color: white;
		border-radius:24px;
	}
	#addPolaroidButton{
		padding:0;
	}
	#saveStatus{
		top:60px;
	}
	#sidepanel, #checkoutSidePanel{
	  top:100px;
	}
	
  }
  
  @media only screen and (min-width: 480px) {
	  
  }
  
  
  
  
  
  /*
  
  INSTRUCTIONS
  
  */

  #infoButton{
	color: var(--midnight);
	position: absolute;
	margin: 10px;
	left: 0;
	bottom: 0;
  }
  
  #instructions{
	  pointer-events: none;
	  display: block;
	  
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left:0;
	  height:100%;
	  width:100%;
	  z-index:10;
	  
	  font-size:12px;
	  font-family: 'Acumin', Arial, Helvetica, sans-serif;
	  color: white;
	  text-align: center;
	  
	  background-color: rgba(255, 255, 255, .5);
  }

  .instruction-popup {
	width: 120px;
	height: 80px;
	background: var(--midnight);
	position: absolute;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 4px;
  }
  
  .left.instruction-popup:before {
	content: "";
	position: absolute;
	right: 100%;
	top: 26px;
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-right: 26px solid var(--midnight);
	border-bottom: 13px solid transparent;
  }

  .right.instruction-popup:before {
	content: "";
	position: absolute;
	left: 100%;
	top: 26px;
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-left: 26px solid var(--midnight);
	border-bottom: 13px solid transparent;
  }
  
  .instruction-content {
	margin-bottom: 10px;
  }
  
  .instruction-content h2 {
	font-size: 1.5em;
	font-weight: bold;
	margin: 0;
  }
  
  .instruction-content p {
	font-size: 1em;
	margin: 5px 0;
  }