/*
NOTES:
- vh polyfill
- cross browser animation
*/

* {
	outline:0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

@font-face {
  font-family: 'Bariol';
  src: url('fonts/Bariol-Light/Bariol-Light.eot');
  src: url('fonts/Bariol-Light/Bariol-Light.eot?#iefix') format('embedded-opentype'),
      url('fonts/Bariol-Light/Bariol-Light.woff') format('woff'),
      url('fonts/Bariol-Light/Bariol-Light.ttf')  format('truetype'),
      url('fonts/Bariol-Light/Bariol-Light.svg#svgFontName') format('svg');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Bariol';
  src: url('fonts/BariolThin-Italic/BariolThin-Italic.eot');
  src: url('fonts/BariolThin-Italic/BariolThin-Italic.eot?#iefix') format('embedded-opentype'),
      url('fonts/BariolThin-Italic/BariolThin-Italic.woff') format('woff'),
      url('fonts/BariolThin-Italic/BariolThin-Italic.ttf')  format('truetype'),
      url('fonts/BariolThin-Italic/BariolThin-Italic.svg#BariolThinItalic') format('svg');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Bariol';
  src: url('fonts/Bariol-Regular/Bariol-Regular.eot');
  src: url('fonts/Bariol-Regular/Bariol-Regular.eot?#iefix') format('embedded-opentype'),
      url('fonts/Bariol-Regular/Bariol-Regular.woff') format('woff'),
      url('fonts/Bariol-Regular/Bariol-Regular.ttf')  format('truetype'),
      url('fonts/Bariol-Regular/Bariol-Regular.svg#svgFontName') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Bariol';
  src: url('fonts/Bariol-Bold/Bariol-Bold.eot');
  src: url('fonts/Bariol-Bold/Bariol-Bold.eot?#iefix') format('embedded-opentype'),
      url('fonts/Bariol-Bold/Bariol-Bold.woff') format('woff'),
      url('fonts/Bariol-Bold/Bariol-Bold.ttf')  format('truetype'),
      url('fonts/Bariol-Bold/Bariol-Bold.svg#svgFontName') format('svg');
  font-weight: 700;
  font-style: normal;
}

.__hidden {display:none;}

body {
  padding:0;
  margin:0;
  background-color:white;
  font-family: 'Bariol';
  font-weight:400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.payment_stage {
  background-color:#f2f2f2;
}

._c {
  position:relative;
  top:50%;
  transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
}
._cs {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
}

.icc:before {
  font-size:15px;
  font-family: 'FontAwesome';
  content:"";
  display:block;
  font-size: inherit;
  color:inherit;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%) rotate(0deg);
  -ms-transform: translate(-50%,-50%) rotate(0deg);
  -webkit-transform: translate(-50%,-50%) rotate(0deg);

  transition:all .25s ease-in-out;
  -moz-transition:all .25s ease-in-out;
  -webkit-transition:all .25s ease-in-out;
}

.wrap {
  position:absolute;
  width:1280px;
  max-height: calc(100% - 80px);
  /* overflow-y: auto; */

  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
}
.wrap.nocenter {
  max-height: none;
  top:auto;
  transform:translate(-50%,0);
  -ms-transform:translate(-50%,0);
  -webkit-transform:translate(-50%,0);
}
#payment_stage .wrap {
  width:650px;
  background-color:white;
  box-sizing: border-box;
  padding:20px;
  top:100px;
  transform:translate(-50%,0);
  -ms-transform:translate(-50%,0);
  -webkit-transform:translate(-50%,0);
  border-radius: 10px;
}

.arrow {
  cursor:pointer;
  width:50px;
  height:50px;
  color:white;
  background-color:black;
  border-radius: 999px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);

  transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -webkit-transition:all .5s ease-in-out;
}
.arrow.left {left:40px;}
.arrow.left:before {content:'\f053';margin:1px 1px 0 0;}
.arrow.right {right:40px;}
.arrow.right:before {content:'\f054';margin:1px 0 0 1px;}
.arrow.disabled {background-color:#f2f2f2;}

.arrow.progress {
  background-color:rgb(101, 180, 0);
  color:white;
  width:100px;
  height:100px;
}
.arrow.progress:before {
  font-size:35px;
  animation: pulse-arrow .5s ease .5s infinite alternate;
}

.logo {
  position:absolute;
  width:400px;
  height:70px;
  margin:10px;
  background-image:url('img/logo.png');
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.block {
  width:100%;
  float:left;
}
.title {
  float:left;
  width:auto;
  height:80px;
  /* padding:0 20px; */
  width:100%;
  margin:20px 0;
  background-color:#A1CE83;
  text-align: center;
  color:black;
  font-weight: 700;
  font-size:20px;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
}

.logo {
  background-image:url('img/logo.png');
  background-size: contain;
  background-position: center center;
  width:350px;
  height:60px;
  position:absolute;
  left:50px;
  top:50px;
  z-index:99;
}

.box-section {
  box-sizing: border-box;
  cursor:pointer;
  float:left;
  width:50%;
  position:relative;
  height:100%;
  background-color:#f2f2f2;
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  border-right: solid 1px rgba(0,0,0,0.5);

  transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;

}
.box-contain .box-section:last-of-type {
  border:0;
}
.box-section.smaller {
  width:40%;
}
.box-section.hovered {
  width:60%;
  background-color:#c3c3c3;
}

.help-icon {
  cursor:pointer;
  z-index: 999;
  pointer-events: all;
  width:25px;
  height:25px;
  background-color:white;
  position:absolute;
  top:10px;
  right:10px;
  border-radius: 99px;

  transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
}
.help-icon:hover {background-color:#d6d6d6;}
.help-icon:before {
  content:'\f128';
  color:black;
}
.question {
  position:relative;
  width:100%;
  height:100px;
  margin-bottom:40px;
  text-align: center;
  padding:0 50px;
  box-sizing: border-box;
  color:white;
  background-color:white;
  border-radius: 8px;
  overflow: hidden;
}
.question.__fill {
  background-color:black;
  color:white;
}
._num {
  font-size:20px;
  font-weight:700;
}
._question {
  font-size:20px;
  font-weight: 400;
}
.choices {

}
.words {
  list-style-type: none;
  margin:0;
  padding:0;
  width:calc(100% + 40px);
}
.words li {
  box-sizing: border-box;
  width:25%;
  height:180px;
  float:left;
  padding: 0 40px 40px 0;
}
.words li .inner {
  position:relative;
  background-color:white;
  height:100%;
  text-align: center;
  cursor:pointer;
  border-radius: 8px;
  overflow: hidden;
  border:solid 2px;
  font-weight: 400;
  font-size: 20px;

  transition:all .15s ease-in-out;
  -moz-transition:all .15s ease-in-out;
  -webkit-transition:all .15s ease-in-out;
}
.words li .inner.active {
  color:white;
  background-color:black;
}
.words li .inner.active:after {
  content:'\f058';
  font-family: 'FontAwesome';
  position:absolute;
  font-size:25px;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
}

.overlay {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:99;
}
.question.pulse .overlay {animation: pulse-card 1.5s ease -0.6s infinite alternate;}
.question.pulse {background-color: white;}
.words.pulse li .inner {background-color:white;}
.words.pulse li:nth-of-type(1) .overlay,
.words.pulse li:nth-of-type(5) .overlay,
.words.pulse li:nth-of-type(9) .overlay
{animation: pulse-card 1.5s ease -0.6s infinite alternate;}
.words.pulse li:nth-of-type(2) .overlay,
.words.pulse li:nth-of-type(6) .overlay,
.words.pulse li:nth-of-type(10) .overlay
{animation: pulse-card 1.5s ease -0.4s infinite alternate;}
.words.pulse li:nth-of-type(3) .overlay,
.words.pulse li:nth-of-type(7) .overlay,
.words.pulse li:nth-of-type(11) .overlay
{animation: pulse-card 1.5s ease -0.2s infinite alternate;}
.words.pulse li:nth-of-type(4) .overlay,
.words.pulse li:nth-of-type(8) .overlay,
.words.pulse li:nth-of-type(12) .overlay
{animation: pulse-card 1.5s ease -0.0s infinite alternate;}

.page-frame {
  box-sizing: border-box;
  width:100%;
  padding:40px;
  background-color:white;
}

@keyframes pulse-card {
  0% {
    background-color:rgb(218, 218, 218);
  }
  100% {
    background-color:white;
  }
}

@keyframes pulse-arrow {
  0% {
    margin-left:1px;
  }
  100% {
    margin-left:20px
  }
}

#blackout {
  display:none;
  width:100%;
  height:100%;
  z-index:99;
  position: fixed;
  background-color:rgba(0,0,0,0.7);
}

#stage img {
  width:100%;
  max-width:100%;
}

.dialogue {
  display:none;
  width:300px;
  background-color:#f2f2f2;
  position:fixed;
  z-index: 999;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);

  overflow-y: auto;
  max-height: calc(100% - 0%);

  box-sizing: border-box;
  padding:20px;

  border-radius: 10px;
  text-align: center;
}

.__tick,
.__cross {
  width:50px;
  height:50px;
  background-color:black;
  color:white;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  border-radius: 999px;
  font-weight: normal;
  font-size: 30px;
}
.__tick:before {content:'\f058';}
.__cross:before {content:'\f00d';}

.dialogue .button {
  /* border-radius: 0 0 10px 10px; */
  border-radius: 10px;
}
.button {
  cursor:pointer;
  height:40px;
  background-color:black;
  color:white;
  transition:all .25s ease-in-out;
  -moz-transition:all .25s ease-in-out;
  -webkit-transition:all .25s ease-in-out;
}
.button:hover {
  background-color:#494848;
}
p.__small {font-size:12px;}
.__tips {
  text-align: left;
  box-sizing: border-box;
  padding:10px;
  background-color:white;
  border:solid 2px #2aade6;
  border-radius: 10px;
  margin-bottom:10px;
}
.__tips ul {
  margin:10px 0 0 0;
  padding:0 0 0 20px;
}
.__tips ul li {
  margin-bottom:5px;
}


.main_content {
  border-radius: 10px;
  background-color:#f2f2f2;
  width:100%;
  overflow-y: auto;
}
.main_content img {
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  object-fit: cover;
}
.result_stage .wrap {
  margin-top:20px;
  top:auto;
  transform:translate(-50%,0);
  -ms-transform:translate(-50%,0);
  -webkit-transform:translate(-50%,0);
}
.col._2 {
  width:50%;
  float:left;
}
.col._2 img {
  height:500px;
}
.description {
  box-sizing: border-box;
  width:100%;
  padding:20px;
  float:left;
}
form.payment {
  width:calc(100% + 20px);
}
.payment input {
  background-image:none !important;
  width:100%;
  box-sizing: border-box;
  outline: none;
  padding:10px;
  font-size:20px;
  font-family: 'Bariol';
  border:solid 2px #b5b5b5;
  border-radius: 10px;
}
.payment .field {
  box-sizing: border-box;
  width:100%;
  padding:0 20px 20px 0;
}
.payment .field.half {
  float:left;
  width:50%;
}

.field.has_label input {
  flex:1;
}

.field.error input {border-color:red;}
.field {
  float:left;
  position:relative;
}
.field.has_label {
  display:flex;
  width:100%;
  align-items: center;
}
.field .select-label {
  float:left;
  height:45px;
  background-color:#b5b5b5;
  color:white;
  padding:0 20px;
  border-radius: 10px 0 0 10px;
}
.field select {
	display:block;
}
.field .select-cont {
  flex:1;
  float:left;
  box-sizing: border-box;
  position:relative;
  height: 45px;
  overflow: hidden;
  background-color:white;
  border:solid 2px #b5b5b5;
  border-radius: 0 10px 10px 0;
}
.field .select-cont.error {border:solid 2px red;}
.field .select-cont:after {
  pointer-events: none;
  position:absolute;
  content:'\f13a';
  font-family: 'FontAwesome';
  color:#777777;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
}

.field .select-cont select {
  font-family: 'Bariol';
  font-size:20px;
  background: transparent;
  border: none;
  padding: 0 20px;
  height: 45px;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  color:#777777;
  outline: none;
}



.chk-container {
  height:13px;
  margin-left:20px;
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.chk-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkmark {
  border-radius: 6px;
  border:solid 2px rgba(0,0,0,0.5);
  /* box-sizing: border-box; */
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
.chk-container:hover input ~ .checkmark {
  background-color: #ccc;
}
.chk-container input:checked ~ .checkmark {
  background-color: #2196F3;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.chk-container input:checked ~ .checkmark:after {
  display: block;
}
.chk-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.form-submit {
  cursor:pointer;
  box-sizing: border-box;
  position:relative;
  color:white;
  background-color:black;
  text-decoration: none;
  text-align: center;
  width:auto;
  height:60px;
  margin-bottom:10px;
  padding:0px 20px;
  font-size: 14px;
  font-weight: 700;
  display:inline-block;
  text-transform: uppercase;
  float:right;
  right:20px;
  border-radius: 4px;

  transition:all .15s ease-in-out;
  -ms-transition:all .15s ease-in-out;
  -webkit-transition:all .15s ease-in-out;
}
.form-submit:hover {
  background-color:#3e3e3e;
}

.price-field {
  width:100%;
  box-sizing: border-box;
  padding:20px;
  background-color:#b5b5b5;
  color:white;
  float:left;
  border-radius: 10px;
}
.price-field span:first-of-type,
.price-field span:last-of-type {font-weight: 700;}

.loader.active {display:block;}
.loader {
  display:none;
  position:relative;
  width:100%;
  height:200px;
  font-size:30px;
}
.input-loader {
  width:48px;
  height:48px;
  position:absolute;
  top:0;
  right:20px;
}
.loader:before {content:'\f021';}
.loader.error:before {content:'\f00d'; color:#d14949;}
.loader.success:before {content:'\f00c'; color:#7dab59;}

.loader.error,
.loader.success {
  animation:none;
}

.status-message {
  width:100%;
  box-sizing: border-box;
  padding:20px;
  background-color:#fdfdfd;
  float:left;
  display:none;
}
.main_content .button {
  border-radius: 10px;
  padding:0 10px;
  text-transform: uppercase;
  float:left;
  position:relative;
  left:50%;
  transform:translate(-50%,0);
  -ms-transform:translate(-50%,0);
  -webkit-transform:translate(-50%,0);
  margin-bottom:20px;
}

.spin {animation: spin 2s linear infinite;}
@keyframes spin {
  from {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
  }
}

/* ---Animation---  */

.bp-anim-contain {
  width:200px;
  height:200px;
  /* background-color: #f2f2f2; */
  position:relative;
  left:50%;
  transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
}
.bp-anim-contain .icon {
  opacity:0;
  position:absolute;
  width:100px;
  height:100px;
  background-image:url('img/icons.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size:400px 300px;

  top:50%;
  left:-10px;
  transform:translate(0,-50%) scale(0.5);
  -ms-transform:translate(0,-50%) scale(0.5);
  -webkit-transform:translate(0,-50%) scale(0.5);

  transition: all .3s ease-in-out;
  transition-property: transform,left,right,opacity,z-index;
  -moz-transition: all .3s ease-in-out;
  -moz-transition-property: transform,left,right,opacity,z-index;
  -webkit-transition: all .3s ease-in-out;
  -webkit-transition-property: transform,left,right,opacity,z-index;
}
.bp-anim-contain .icon.noanimate {
  transition-property: none;
  -moz-transition-property: none;
  -webkit-transition-property: none;
}
.bp-anim-contain .icon.active {
  opacity:1;
  z-index:999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%) scale(1);
  -ms-transform: translate(-50%,-50%) scale(1);
  -webkit-transform: translate(-50%,-50%) scale(1);
}
.bp-anim-contain .icon.active-left {
  opacity:1;
  top:50%;
  left:-10px;
  transform:translate(0,-50%) scale(0.5);
  -ms-transform:translate(0,-50%) scale(0.5);
  -webkit-transform:translate(0,-50%) scale(0.5);
}
.bp-anim-contain .icon.active-right {
  opacity:1;
  top:50%;
  left:auto;
  right:-10px;
  z-index:99;
  transform:translate(0,-50%) scale(0.5);
  -ms-transform:translate(0,-50%) scale(0.5);
  -webkit-transform:translate(0,-50%) scale(0.5);
}
.bp-anim-contain .icon.active-right-old {
  opacity:0;
  top:50%;
  left:auto;
  right:-10px;
  transform:translate(0,-50%) scale(0.5);
  -ms-transform:translate(0,-50%) scale(0.5);
  -webkit-transform:translate(0,-50%) scale(0.5);
}
.bp-anim-contain .icon-1 {background-position: 0 0;}
.bp-anim-contain .icon-2 {background-position: -100px 0;}
.bp-anim-contain .icon-3 {background-position: -200px 0;}
.bp-anim-contain .icon-4 {background-position: -300px 0;}
.bp-anim-contain .icon-5 {background-position: 0px -100px;}
.bp-anim-contain .icon-6 {background-position: -100px -100px;}
.bp-anim-contain .icon-7 {background-position: -200px -100px;}
.bp-anim-contain .icon-8 {background-position: -300px -100px;}
.bp-anim-contain .icon-9 {background-position: 0px -200px;}
.bp-anim-contain .icon-10 {background-position: -100px -200px;}
.bp-anim-contain .icon-11 {background-position: -200px -200px;}
.bp-anim-contain .icon-12 {background-position: -300px -200px;}


/* --- STRIPE --- */
.StripeElement {
  background-color: white;
  height: 40px;
  padding: 10px 12px;
  border: solid 2px #b5b5b5;
  border-radius: 10px;
  width:100%;
  box-sizing: border-box;
}
.StripeElement--focus {

}
.StripeElement--invalid {
  border-color: #fa755a;
}
.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}
#card-errors {
  color:#ff7142;
  font-size:12px;
}









/*  */