.loader {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    z-index: 999;
    display: block;
}
@keyframes ldio-v6g4je6oqv {
  0% {
    top: 70.5px;
    left: 70.5px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 17.25px;
    left: 17.25px;
    width: 106.5px;
    height: 106.5px;
    opacity: 0;
  }
}

.ldio-v6g4je6oqv div {
  position: absolute;
  border-width: 4.5px;
  border-style: solid;
  opacity: 1;
  border-radius: 50%;
  animation: ldio-v6g4je6oqv 1s cubic-bezier(0,0.2,0.8,1) infinite;
}

.ldio-v6g4je6oqv div:nth-child(1) {
  border-color: #faa734
}

.ldio-v6g4je6oqv div:nth-child(2) {
  border-color: #332a86;
  animation-delay: -0.5s;
}

.loadingio-spinner-ripple-rf50obiksdm {
  width: 150px;
  height: 150px;
  display: inline-block;
  overflow: hidden;
  background: none;
  position:absolute;
  top:50%; left:50%; z-index:99; position:fixed; transform: translate(-50%, -50%);
}
.ldio-v6g4je6oqv {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-v6g4je6oqv div { box-sizing: content-box; }
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@font-face {
      font-family: 'Gotham-Light' !important;
      src: url('font/Gotham-Light.eot');
      src: url('font/Gotham-Light.eot?#iefix') format('embedded-opentype'),
           url('font/Gotham-Light.woff2') format('woff2'),
           url('font/Gotham-Light.woff') format('woff'),
           url('font/Gotham-Light.ttf') format('truetype'),
           url('font/Gotham-Light.svg#besom_2regular') format('svg');
      font-weight: 300;
      font-style: normal;
  }
@font-face {
      font-family: 'Gotham-Medium' !important;
      src: url('font/Gotham-Medium.eot');
      src: url('font/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
           url('font/Gotham-Medium.woff2') format('woff2'),
           url('font/Gotham-Medium.woff') format('woff'),
           url('font/Gotham-Medium.ttf') format('truetype'),
           url('font/Gotham-Medium.svg#besom_2regular') format('svg');
      font-weight: 500;
      font-style: normal;
  }
@font-face {
      font-family: 'Gotham-Bold' !important;
      src: url('font/Gotham-Bold.eot');
      src: url('font/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
           url('font/Gotham-Bold.woff2') format('woff2'),
           url('font/Gotham-Bold.woff') format('woff'),
           url('font/Gotham-Bold.ttf') format('truetype'),
           url('font/Gotham-Bold.svg#besom_2regular') format('svg');
      font-weight: 700;
      font-style: normal;
  }
@font-face {
      font-family: 'Gotham-Book' !important;
      src: url('font/Gotham-Book.eot');
      src: url('font/Gotham-Book.eot?#iefix') format('embedded-opentype'),
           url('font/Gotham-Book.woff2') format('woff2'),
           url('font/Gotham-Book.woff') format('woff'),
           url('font/Gotham-Book.ttf') format('truetype'),
           url('font/Gotham-Book.svg#besom_2regular') format('svg');
      font-weight: 900;
      font-style: normal;
  }


html{height:100%; width:100%; -webkit-appearance: none; -moz-appearance:none; appearance:none; }
body{margin:0; padding:0; height:100%; width:100%; font-family: "Lato", sans-serif; font-size:10px; font-style: normal; line-height:1; color:#1e439b; display:flex; justify-content:center;  align-items: center; }
input, a{-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
a, a:hover, input, .template img{text-decoration:none;}
h1, h2{margin:0; padding:0; line-height:1;}
input:focus{outline: 0px none #fff !important;}
label.error{color:#F00; font-size:12px; width:100%; text-align:left; margin:0; margin-top:-20px; display:block;}
input.error{border:1px solid #F00 !important; }
::placeholder {
  color: #0033a1;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: #0033a1;
}
.bt{cursor:pointer;}
a.textlink{color:#2e3192; text-decoration:underline;}
a.textlink:hover{color:#f7941d; text-decoration:underline;}
.btsubmit{background:url(../images/bt-submit.png); width:112px; height:44px; padding:0; margin:0; border:none; cursor:pointer;}
iframe{width:100%; height:100%; border:none; position:absolute; top:0; left:0; z-index:1;}
.iframebt{position:absolute; top:85px; right:10px; z-index:2;}

.iframebt button{background-color:#d1d3d3; color:#000; margin-right:15px; border:none; font-size:150%; font-weight:500; padding:5px 7px; border-radius:5px;}

.container{width:1024px; height:768px; position:relative; background-color:#fff; border-radius:8px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; }

.screen{width:1024px; height:768px; position:relative; background-position:center; background-repeat:no-repeat; background-size:cover; }
.screen1{background-image:url(../images/screen1.jpg);}
.screen1 h1{width:100%; position:absolute; top:142px; left:0; text-align:center; color:#1c439d; font-size:430%; text-transform:uppercase; font-weight: 900;}
.screen1 p{width:100%; position:absolute; top:270px; left:0; text-align:center; color:#676767; font-size:250%; line-height:1.1;}
.screen1 .form{width:424px; position:absolute;top:524px; left:50%; transform:translateX(-50%);}
.screen1 label{width:100%;  color:#1e439b; display:block; margin-bottom:5px;}
.screen1 label table{border-collapse:collapse; padding:0; margin:0;}

.screen1 label span{display:inline-block; background-color:#fff; padding-right:5px; font-size:250%;  font-weight:500; white-space:nowrap;}
.screen1 label input{display:inline-block; width:100%; border:none; border-bottom:1px solid #1e439b; font-size:250%;  font-weight:500; color:#1e439b;}
/*Index eod*/
h1.common{width:90%; padding:0 5%; margin-top:115px;  text-align:center; color:#1c439d; font-size:400%; text-transform:uppercase; font-weight: 900; display:inline-block;}
h1.common sup{font-size:60%;}
.product .img-product{width:100%; position:absolute; top:234px; left:0; }
.product a.productlink{position:absolute; display:block;}
.product a.productlink.mintop{top:350px; left:226px; height:340px; width:130px;}
.product a.productlink.tint{top:373px; left:538px; height:324px; width:121px;}
.product a.productlink.mineral{top:360px; left:668px; height:339px; width:132px;}
.product a.productlink.aqua{top:452px; left:813px; height:243px; width:110px;}


div.mintop{background:url(../images/bg-mintop.jpg) no-repeat -50px bottom; }
.quiz{position:absolute; left:432px; top:350px;}
.quiz h3{display:inline-block; border-radius:10px; background-color:#231f20; color:#fff; font-size:300%; font-weight:900; line-height:1; text-transform:uppercase; margin:0; padding:10px 15px; margin-bottom:25px;}
.radiodiv{width:500px;}

.step2 .quiz{position:absolute; left:564px; top:300px;}
.quizbt{margin:30px 0; cursor:pointer}


.audiosection{position:absolute; top:260px; left:400px;}
.audiosection .audiobutton{display:block;}
.audiosection .audiobutton button, #afterUpload button{background-color:#d1d3d3; color:#000; margin-right:15px; border:none; font-size:180%; font-weight:500; padding:5px 7px; border-radius:7px;}
.audiosection .audiobutton button.active, #afterUpload button.active{color:#fff; background-color:#1c439d;}
#player{margin:20px 0;}
#timer{font-size:220%; color:#1c439d;}
#transcriptBox{font-size:220%; color:#1c439d; display:none; position:relative; }
#transcript{width:300px; height:150px; border:1px solid #333; font-family: "Lato", sans-serif; font-size:80%; color:#1c439d}
.scriptloader{position:absolute; top:0; left:0; width:100%; height:100%; background-color:#FFF; display:none;}
.scriptloader .text{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:80%; text-align:center; color:#333; animation: fadeinout 1s linear forwards infinite;}
@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
#afterUpload{margin-top:20px;}

.thankyoupop{width:984px; height:728px; position:absolute; top:20px; left:20px;  border-radius:10px; z-index:1}
.thankyoupop .content{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%;}
.thankyoupop .content p{font-size:800%; color:#FFF; font-weight:700; text-align:center; margin-bottom:100px;}
.thankyoupop .content a{float:left; display:block; margin:0 20px;}

div.mintop .thankyoupop{background-color:rgba(30,67,155,0.95);}

.hide{display:none !important;}
.logo{position:absolute; top:33px; right:38px}
.fotter{position:absolute; bottom:60px; right:60px}


/* The container */
.radio label {
  display: block;
  position: relative;
  padding-left:70px;
  margin-bottom:25px;
  cursor: pointer;
  color:#231f20;
  font-size:260%;  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    line-height: 54px;
}

/* Hide the browser's default radio button */
.radio label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.radio label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height:54px;
  width: 54px;
  background:url(../images/radio.png) center; background-size:cover;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio label:hover input ~ .checkmark {
   background:url(../images/radio-active.png) center; background-size:cover;
}

/* When the radio button is checked, add a blue background */
.radio label input:checked ~ .checkmark {
  background:url(../images/radio-active.png) center; background-size:cover;
}

.radio label.half{width:30%; display:inline-block;  line-height:54px;}
.radio label.small{padding-left:65px; line-height:45px;}
.radio label.small .checkmark{width:45px; height:45px;}

.yesno{top:304px; left:565px;}
.yesno label{display: block;
  position: relative;  
  margin-bottom:50px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; width:239px; height:93px;}
.yesno label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.yesno label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  width: 100%; background-color:#FFF;
   background-size:cover;
}
.yesno label:nth-child(1) .checkmark {background-image:url(../images/bt-yes.png);}
.yesno label:nth-child(2) .checkmark {background-image:url(../images/bt-no.png);}
.yesno label:nth-child(1) input:checked ~ .checkmark {background-image:url(../images/bt-yes_active.png);}
.yesno label:nth-child(2) input:checked ~ .checkmark {background-image:url(../images/bt-no_active.png);}

.aware{top:327px; left:450px;}
.aware .options{width:516px;}
.aware label{display: block;
  position: relative;  
  margin-bottom:0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; width:208px; height:115px; float:left; margin-right:50px;}
.aware label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.aware label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  width: 100%; background-color:#FFF;
   background-size:cover;
}
.aware label:nth-child(1) .checkmark {background-image:url(../images/aware-yes.png);}
.aware label:nth-child(2) .checkmark {background-image:url(../images/aware-no.png);}
.aware label:nth-child(1) input:checked ~ .checkmark {background-image:url(../images/aware-yes_active.png);}
.aware label:nth-child(2) input:checked ~ .checkmark {background-image:url(../images/aware-no_active.png);}
label small{font-size:70%;}

div.aqua{background:url(../images/bg-aqua.jpg) no-repeat 0 bottom; }
div.aqua h1.common{color:#00b9ac}
div.aqua .quiz{top:275px;}
div.aqua .quiz.yesno{top:320px;}
div.aqua .quiz.aware{top:350px;}
div.aqua .quiz h3{margin-bottom:15px; padding:5px 10px; font-size:250%;}
div.aqua .options{width:100%;}
div.aqua .radio label:hover input ~ .checkmark {background:url(../images/radio_aqua.png) center; background-size:cover;}
div.aqua .radio label input:checked ~ .checkmark {background:url(../images/radio_aqua.png) center; background-size:cover;}
div.aqua .radio label{font-size:210%;}
div.aqua .radio label{padding-left:50px; line-height:40px; font-size:210%; margin-right:0; float:left; width:100%; margin-bottom:15px;}
div.aqua .radio label .checkmark{width:40px; height:40px;}
div.aqua .radio label.small{padding-left:50px; line-height:40px; font-size:240%; width:auto !important; margin-right:25px; float:left; margin-bottom:35px;}
div.aqua .radio label.small .checkmark{width:40px; height:40px;}
div.aqua .yesno label:nth-child(1) input:checked ~ .checkmark {background-image:url(../images/yes_aqua.png);}
div.aqua .yesno label:nth-child(2) input:checked ~ .checkmark {background-image:url(../images/no_aqua.png);}
div.aqua .aware label:nth-child(1) input:checked ~ .checkmark {background-image:url(../images/aware-yes_aqua.png);}
div.aqua .aware label:nth-child(2) input:checked ~ .checkmark {background-image:url(../images/aware-no_aqua.png);}
div.aqua .audiosection{left:450px;}
div.aqua #timer, div.aqua #transcriptBox,div.aqua #transcript{color:#00b9ac;}
div.aqua .audiosection .audiobutton button.active, div.aqua #afterUpload button.active{background-color:#00b9ac;}
div.aqua .thankyoupop{background-color:rgba(0,185,173,0.95);}

div.mineral{background:url(../images/bg-mineral.jpg) no-repeat 0 bottom; }
div.mineral h1.common{color:#fa7800}
div.mineral .quiz{top:275px;}
div.mineral .quiz.yesno{top:320px;}
div.mineral .quiz.aware{top:350px;}
div.mineral .quiz h3{margin-bottom:15px; padding:5px 10px; font-size:250%;}
div.mineral .options{width:100%;}
div.mineral .radio label:hover input ~ .checkmark {background:url(../images/radio_mineral.png) center; background-size:cover;}
div.mineral .radio label input:checked ~ .checkmark {background:url(../images/radio_mineral.png) center; background-size:cover;}
div.mineral .radio label{font-size:210%;}
div.mineral .radio label{padding-left:50px; line-height:40px; font-size:210%; margin-right:0; float:left; width:100%; margin-bottom:15px;}
div.mineral .radio label .checkmark{width:40px; height:40px;}
div.mineral .radio label.small{    padding-left: 50px;
    line-height: 1;
    font-size: 240%;
    width: auto !important;
    margin-right: 25px;
    float: left;
    margin-bottom: 20px;
    padding-top:8px;}
div.mineral .radio label.small .checkmark{width:40px; height:40px;}
div.mineral .yesno label:nth-child(1) input:checked ~ .checkmark {background-image:url(../images/yes_mineral.png);}
div.mineral .yesno label:nth-child(2) input:checked ~ .checkmark {background-image:url(../images/no_mineral.png);}
div.mineral .aware label:nth-child(1) input:checked ~ .checkmark {background-image:url(../images/aware-yes_mineral.png);}
div.mineral .aware label:nth-child(2) input:checked ~ .checkmark {background-image:url(../images/aware-no_mineral.png);}
div.mineral .audiosection{left:450px;}
div.mineral #timer, div.mineral #transcriptBox,div.mineral #transcript{color:#fa7800;}
div.mineral .audiosection .audiobutton button.active, div.mineral #afterUpload button.active{background-color:#fa7800;}
div.mineral .thankyoupop{background-color:rgba(250,120,0,0.95);}

div.tint{background:url(../images/bg-tint.jpg) no-repeat 0 bottom ; }
div.tint h1.common{color:#a84f16}
div.tint .quiz{top:275px;}
div.tint .quiz.yesno{top:320px;}
div.tint .quiz.aware{top:350px;}
div.tint .quiz h3{margin-bottom:15px; padding:5px 10px; font-size:250%;}
div.tint .options{width:100%;}
div.tint .radio label:hover input ~ .checkmark {background:url(../images/radio_tint.png) center; background-size:cover;}
div.tint .radio label input:checked ~ .checkmark {background:url(../images/radio_tint.png) center; background-size:cover;}
div.tint .radio label{font-size:210%;}
div.tint .radio label{padding-left:50px; line-height:40px; font-size:210%; margin-right:0; float:left; width:100%; margin-bottom:15px;}
div.tint .radio label .checkmark{width:40px; height:40px;}
div.tint .radio label.small{padding-left: 50px;
    line-height: 1;
    font-size: 240%;
    width: auto !important;
    margin-right: 25px;
    float: left;
    margin-bottom: 20px;
    padding-top: 10px;}
div.tint .radio label.minwidth{padding-left: 50px;
    line-height: 1;
    font-size: 240%;
    width: auto !important;
    margin-right: 25px;
    float: left;
    margin-bottom: 20px;
    padding-top: 10px; min-width:50%;}
div.tint .radio label.small .checkmark{width:40px; height:40px;}
div.tint .yesno label:nth-child(1) input:checked ~ .checkmark {background-image:url(../images/yes_tint.png);}
div.tint .yesno label:nth-child(2) input:checked ~ .checkmark {background-image:url(../images/no_tint.png);}
div.tint .aware label:nth-child(1) input:checked ~ .checkmark {background-image:url(../images/aware-yes_tint.png);}
div.tint .aware label:nth-child(2) input:checked ~ .checkmark {background-image:url(../images/aware-no_tint.png);}
div.tint .audiosection{left:450px;}
div.tint #timer, div.tint #transcriptBox, div.tint #transcript{color:#a84f16;}
div.tint .audiosection .audiobutton button.active, div.tint #afterUpload button.active{background-color:#a84f16;}
div.tint .thankyoupop{background-color:rgba(168,79,22,0.95);}