@import url("css.css");
* { margin: 0px; padding: 0px; }
img { display: block; }
html { height: 100%; font-size: 62.5%; }
body { font-size: 2rem; background-color: rgb(59, 89, 153); text-align: center; color: rgb(0, 51, 151); height: 100%; font-family: "Raleway",Arial,Helvetica,sans-serif; }
#main_bg { position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center center; background-size: cover; transition: all 0.5s linear 0s; }
#main_bg.slide1 { background-image: url("slide1.jpg"); background-position: left center; }
#main_bg.slide2 { background-image: url("slide2.jpg"); background-position: right center; }
#main_bg.slide3 { background-image: url("slide3.jpg"); background-position: left center; }
.toggleDiv > h2 { font-size: 4rem; margin-bottom: 27px; }
h2 { display: block; font-size: 3rem; color: rgb(100, 100, 160); margin-bottom: 15px; text-align: center; font-weight: 400; text-transform: uppercase; }
#popup-wrapper-click { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 999; }
.wrap { height: 100%; }
.wrap::before { display: inline-block; content: ""; height: 100%; vertical-align: middle; }
#container { display: inline-block; vertical-align: middle; position: relative; width: 95%; max-width: 565px; min-width: 300px; margin: 20px auto; }
#second_page.toggleDiv { padding: 32px 0px 38px; }
.toggleDiv { display: none; width: 100%; padding: 0px 0px 38px; color: rgb(85, 85, 97); background-color: rgba(255, 255, 255, 0.8); box-sizing: border-box; }
#first_page { color: rgb(139, 139, 147); display: block; width: 528px; height: auto; margin: 0px auto; padding: 30px 0px 38px; text-align: center; background-color: rgb(255, 255, 255); }
#first_page h2 { font-size: 4rem; margin-bottom: 26px; margin-top: 0px; color: rgb(100, 100, 160); font-weight: 500; padding: 0px 25px; }
#first_page p { padding: 0px 0px 20px; text-align: center; }
#first_page .btnyes { position: relative; margin-top: 10px; z-index: 9999; }
#intro-image { max-width: 247px; margin: 0px auto 27px; padding-left: 29px; }
#second_page .btns { margin-top: 35px; text-transform: none; }
p { line-height: 1.2; font-size: 2.3rem; text-align: left; padding: 0px 4rem; font-weight: 300; }
p > b { text-decoration: underline; }
.choose_answer { font-size: 2.4rem; text-align: left; color: rgb(100, 100, 160); font-weight: 400; margin-bottom: 10px; }
.answers { text-align: left; padding: 5px 40px; min-width: 280px; margin: 0px auto; }
.answer_box { position: relative; font-size: 2.2rem; line-height: 1.8; cursor: pointer; overflow: hidden; color: rgb(85, 85, 97); font-weight: 300; }
.answer_box::before { content: ""; width: 18px; height: 0px; top: 0px; left: 0px; display: inline-block; margin: 0px 5px 0px 0px; vertical-align: middle; position: relative; font: 18px/0 FontAwesome; }
.answer_box.selected::before { content: ""; }
.answer_box.selected, .answer_box:hover { color: rgb(51, 51, 60); }
.answer_box:hover::before {  }
.question_header { font-size: 2.2rem; font-weight: bold; width: 100%; text-align: center; margin-bottom: 3.7rem; color: rgb(100, 100, 160); text-transform: uppercase; border-bottom: 1px solid rgb(220, 220, 222); }
.question_header.question_numbers { line-height: 5rem; }
.question_header .question { font-size: 2.2rem; color: rgb(100, 100, 160); text-align: center; font-weight: 400; padding: 15px 0px; }
.number { font-family: "Open Sans",sans-serif; font-size: 1.4rem; font-weight: bold; padding: 0px; width: 2.4rem; line-height: 2.4rem; color: rgb(100, 100, 160); background: transparent none repeat scroll 0% 0%; border: 1px solid rgb(100, 100, 160); border-radius: 15px; display: inline-block; margin: 0px 11px; }
.number_active { background: rgb(100, 100, 160) none repeat scroll 0% 0%; color: rgb(255, 255, 255); font-weight: 400; }
.btns { font-weight: normal; font-size: 1.8rem; line-height: 4.7rem; width: 40%; max-width: 193px; display: inline-block; margin: 0px auto; border-radius: 4px; cursor: pointer; text-decoration: none; z-index: 10; text-align: center; color: rgb(255, 255, 255); background: rgb(100, 100, 160) none repeat scroll 0% 0%; box-sizing: border-box; }
.btns:hover { opacity: 0.8; }
.btnyes { margin-top: 29px; background-color: rgb(100, 100, 160); border: 2px solid rgb(100, 100, 160); }
.toggleDiv.choose .question_header { margin: 0px 0px 3.3rem; }
.toggleDiv.choose .choose_answer { font-size: 2.1rem; }
.toggleDiv.choose .btns { margin-top: 20px; }
.btnno { background: transparent none repeat scroll 0% 0%; margin-left: 39px; color: rgb(100, 100, 160); border: 2px solid rgb(100, 100, 160); }
#results { padding: 20px; }
#final { padding-top: 34px; }
#final, #v1, #v2, #v3, #v4, #v5, #checking, #results { display: none; }
.validate {  }
.progress { display: inline-block; width: 90%; height: 14px; border: 1px solid rgb(100, 100, 160); border-radius: 15px; margin-top: 25px; }
.progress > #progress_bar { width: 0px; height: 100%; transition: all 0.5s linear 0s; animation: 2s linear 0s normal none infinite running progress-bar-stripes; border-radius: 15px 0px 0px 15px; background-color: rgb(100, 100, 160); }
@keyframes progress-bar-stripes {
0% { background-position: 40px 0px; }
100% { background-position: 0px 0px; }
}
@keyframes progress-bar-stripes {
0% { background-position: 40px 0px; }
100% { background-position: 0px 0px; }
}
#final p { text-align: center; }
#final .validate p { font-weight: 300; text-align: center; margin: 10px 0px; }
#final h3 { font-size: 3rem; text-transform: uppercase; margin-bottom: 20px; }
#final #results p { font-size: 2rem; margin: 15px 0px; text-align: left; padding: 0px 20px; }
#final p.bold { font-weight: 700; font-size: 2rem; }
@media screen and (max-width: 440px) {
  html { font-size: 55%; }
  #first_page { width: 94%; min-width: 300px; height: auto; }
}
@media screen and (max-width: 375px) {
  html { font-size: 50%; }
  .progress { height: 30px; }
}
@media screen and (max-width: 375px) {
  html { font-size: 45%; }
  #first_page { padding: 2%; }
  #first_page p { padding-bottom: 5px; }
}
@media screen and (max-width: 767px) {
  #first_page h2 { font-size: 3rem; margin-bottom: 10px; }
  #intro-image { max-width: 247px; margin: 0px auto 15px; }
}
@media screen and (max-width: 360px) {
  #intro-image { max-width: 220px; }
}
.unsubscribe { font-size: 14px; text-align: center; position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 10; padding: 10px; }
.unsubscribe a { color: rgb(255, 255, 255); text-decoration: underline; }
@media (max-height: 567px) {
  .unsubscribe { position: static; }
}