/* CSS files add styling rules to your content */

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  background-color: grey;
}

h1 {
  font-style: italic;
  color: #373fff;
}
@font-face {
      font-family: myFont;
      src: url("https://s0.2mdn.net/ads/richmedia/studio/37322719/cadillacsansbook.woff");
    }
    @font-face {
      font-family: myFont2;
      src: url("https://s0.2mdn.net/ads/richmedia/studio/37322719/cadillacsansmedium.woff");
    }
#cta {
  width: 100%;

}
#bottomNav {
  display: flex;
  flex-direction: column;
  position: absolute;
    bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 2000;
}
#topNav {
  display: flex;
  justify-content: center;
  position: absolute;
    top: 0px;
  left: 0px;
  width: 100%;
  z-index: 2000;
  pointer-events: none;
}
#logo {
  width: 300px;
  height: 112px;
}
#toggle1 {
  width: 100%;
}
#toggle2 {
  width: 100%;
  display: none;
}
#discBtn {
   width: 100%;
}
#colorizer {
  height: 50px;
  display: flex;
  justify-content: center;
}
.colors {
  border-radius: 50px;
   width: 30px;
  height: 30px;  
display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px;
  transform: scale(.8);
}
.checks {
  width: 38px;
  height: 38px;
}
#c1 {
  background: #b52a2c;
  border: 1px solid #ffffff;
}
#check1 {
  opacity: 0;
}
#c2 {
  background: #d9e1e4;
  border: 1px solid #ffffff;
}
#check2 {
  opacity: 0;
}
#c3 {
  background: #0c0c0c;
  border: 1px solid #ffffff;
}
#check3 {
  opacity: 0;
}
#c4 {
  background: #414d58;
  border: 1px solid #ffffff;
}
#check4 {
  opacity: 0;
}
#c5 {
  background: #402b2f;
  border: 1px solid #ffffff;
}
#check5 {
  opacity: 0;
}
#c6 {
  background: #1b2b43;
  border: 1px solid #ffffff;
}
#check6 {
  opacity: 0;
}
#c7 {
  background: #83898b;
  border: 1px solid #ffffff;
}
#check7 {
  opacity: 0;
}
#c8 {
  background: #677674;
  border: 1px solid #ffffff;
}
#check8 {
  opacity: 0;
}
#colorName {
  text-align: center;
  color: #ffffff;
  font-family: myFont;
  padding-bottom: 10px;
}

#tapPlace {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  z-index: 5000;
  position: absolute;
    top: 0px;
  left: 0px;
  pointer-events: none;
}
#tapImg {
  width: 50%;
  pointer-events: none;
  
}
#gestures {
  position: absolute;
    bottom: 0px;
  left: 0px;
  width: 100%;

}

#disclaimer {
  position: absolute;
    bottom: 0px;
  left: 0px;
  width: 100%;
  display: none;
  z-index: 5000;
}

/* 8thwall loader*/

#requestingCameraPermissions {
  color: black !important;
  font-family: myFont !important;
  background-color: white;
}
#requestingCameraIcon {
  /* This changes the image from white to black */
  filter: invert(1);
}
/*
#loadImageConatiner {
  display: flex !important;

  justify-content: center !important;
  align-items: center !important;
}
#loadImage {
  -webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
  
 left: 20% !important;
  position:  !important;
    margin-top: 0px!important;
    margin-left: 0px !important;
    top: 50%;
    
    height:  300px !important;
    width: 360px !important;
   
}
*/
.prompt-box-8w {
  background-color: white;
  color: #00FF00;
}
.prompt-button-8w {
  background-color: #0000FF;
}

.button-primary-8w {
  background-color: #7611B7;
}

#currentSize {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 6000;
  display: none;
}
#camYvalue {
  position: absolute;
  left: 0px;
  top: 50px;
  z-index: 6000;
  display: none;
}

#distance {
  position: absolute;
  left: 0px;
  top: 100px;
  z-index: 6000;
  display: none;
}