#expop { top: 10px; width: 650px; margin-left: -500px; left: 50%; display: none; position: absolute; z-index: 100000 }
.expop_style { background-color: #fff; border: 5px solid #960505; padding: 10px 15px; font-size: 12pt; width: 980px; height: 650px }
.expop_style h1, .expop_style h2, .expop_style h3 { margin: 5px 0; padding: 0 }
#expop_dim { background-color: #3c4043; opacity: .8; filter: alpha(opacity=80); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; z-index: 99999 }
.expop_bottom_links { margin-top: 10px; text-align: center }
.expop_round_tr { -moz-border-radius-topright: 35px; -khtml-border-radius-topright: 35px; -webkit-border-top-right-radius: 35px; border-top-right-radius: 35px }
.expop_round_tl { -moz-border-radius-topleft: 35px; -khtml-border-radius-topleft: 35px; -webkit-border-top-left-radius: 35px; border-top-left-radius: 35px }
.expop_round_br { -moz-border-radius-bottomright: 35px; -khtml-border-radius-bottomright: 35px; -webkit-border-bottom-right-radius: 35px; border-bottom-right-radius: 35px }
.expop_round_bl { -moz-border-radius-bottomleft: 35px; -khtml-border-radius-bottomleft: 35px; -webkit-border-bottom-left-radius: 35px; border-bottom-left-radius: 35px }
.expop_skew { -webkit-transform: translate(0, 50px)rotate(15deg) skew(-8deg, -8deg) scaleY(1.1); -moz-transform: translate(0, 50px)rotate(15deg) skew(-8deg, -8deg) scaleY(1.1); transform: translate(0, 50px)rotate(15deg) skew(-8deg, -8deg) scaleY(1.1) }
* { margin: 0; padding: 0; box-sizing: border-box }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; height: 100% }
body { position: relative; min-height: 100%; font-size: 1.7rem; font-family: myriadpro, Arial, sans-serif; color: #000; line-height: 1.1 }
p { margin-bottom:.5rem}
.bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; animation: bgMove 15s linear infinite; -webkit-animation: bgMove 15s linear infinite }
.content_wrap { padding: 1% 0; height: 100% }
.content { background: #fff; max-width: 112.5rem; border-radius: 12px; padding: 5rem 4.5rem; width: 96%; margin: auto }
.left_side { position: relative; width: 37%; display: inline-block; vertical-align: top }
.ss2{ width: auto !important; }
.slidem { width: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity linear 1s; text-align: center }
.slidem.active { position: relative; z-index: 2; opacity: 1 }
.slidem img { max-width: 100%; border: 1rem solid #000 }
.right_side { width: 62%; display: inline-block; vertical-align: top; padding-left: 4%; text-align: center }
.step { display: none }
.title_text { color: #007eff; font-weight: 700; text-transform: uppercase; font-size: 7.6rem }
.large_text { font-size: 3rem; text-transform: uppercase; font-weight: 700; margin-bottom: 1.3rem }
.text { margin-bottom: 1rem }
.text span { font-weight: 700 }
.first_step { display: block }
.first_step .title_text { font-size: 10.8rem }
.first_step .text { font-size: 2.7rem; text-transform: uppercase }
.first_step .large_text { font-size: 4rem }
.q_block { display: none }
.q_block1 { display: block }
.question { color: #007eff; font-size: 3rem; font-weight: 700; margin-bottom: 1.8rem }
.question_text { margin-bottom: 1.7rem }
.choice_block { width: 70%; display: block; margin: 0 auto 1rem }
.choice_block li { display: inline-block; vertical-align: middle; font-size: 1.2em; margin-bottom: 1rem; padding: 0 15px 0 25px; cursor: pointer; position: relative; width: 49%; text-align: left }
.choice_block li:before { content: ""; width: 14px; height: 14px; border: 1px solid #959595; display: block; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; transition: all .3s linear }
.choice_block li.active:before { background: #007eff; border-color: #007eff }
.loading_block { display: none }
.progress_bar { width: 100%; border-radius: 4px; height: 4rem; background: #e8e8e8; margin: 0 auto 1.5rem auto; position: relative; border-radius: 5px }
.progress_bar:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 5; animation: progress 6s ease-in-out forwards; -webkit-animation: progress 6s ease-in-out forwards; background: #3398ff; border-radius: 5px }
.run_load { display: none }
.run_load:first-child { display: block }
.final_step>* { display: none }
.f_title { font-size: 5.1rem; color: #007eff; text-transform: uppercase; font-weight: 700 }
.f_large_text { font-size: 3.2rem; font-weight: 700 }
.green_color { font-weight: 700; color: #609f4e }
.red_color { font-size: 2.4rem; color: #ff0600; font-weight: 700 }
.rules { text-align: left; font-weight: 700; margin-bottom: 2rem }
.rules li { padding: 1rem 0 1rem 5rem; list-style-type: none; position: relative }
.rules li span { width: 4rem; height: 4rem; color: #fff; border-radius: 50%; background: #ff0600; line-height: 4rem; text-align: center; font-size: 3.8rem; position: absolute; left: 0; top: 0; bottom: 0; margin: auto }
.button { background: #fff; color: #d82d2d; text-transform: uppercase; border-radius: 5rem; border:.8rem solid #d82d2d;
text-decoration: none; padding: 1.5rem 2.5rem; font-size: 4.9rem; font-weight: 700; min-width: 40%; display: inline-block; transition: all .2s linear; margin: 0 5px }
.button:hover { background: #ffe1e1; color: #d82d2d; text-decoration: none; }
.ok_button, .yes_btn { text-shadow: 0 3px 3px rgba(0,66,134,.75); background: #d82d2d; color: #fff !important }
.ok_button:hover, .yes_btn:hover { background: #ff3a3a }
@-webkit-keyframes bgMove { from {
background-position:0 0
}
to { background-position: 0 1080px }
}
@keyframes bgMove { from {
background-position:0 0
}
to { background-position: 0 1080px }
}
@keyframes progress { from {
width:0
}
to { width: 100% }
}
@-webkit-keyframes progress { from {
width:0
}
to { width: 100% }
}
@media screen and (max-width:1200px) {
html { font-size: 55.5% }
}
@media screen and (max-width:1000px) {
html { font-size: 45.5% }
}
@media screen and (max-width:780px) {
html { font-size: 35% }
body { font-size: 2.5rem }
.content { max-width: 450px; padding: 2rem }
.left_side, .right_side { display: block; margin: auto; width: 100%; padding: 0 }
.slide img { max-height: 40rem }
.choice_block { width: 100% }
.f_title { font-size: 3.1rem }
.first_step .title_text, .title_text { font-size: 5rem }
#expop { top: 10px; width: 650px; margin-left: -500px; left: 50%; display: none; position: absolute; z-index: 100000 }
.expop_style { background-color: #fff; border: 5px solid #960505; padding: 10px 15px; font-size: 12pt; width: 980px; height: 650px }
.expop_style h1, .expop_style h2, .expop_style h3 { margin: 5px 0; padding: 0 }
#expop_dim { background-color: #3c4043; opacity: .8; filter: alpha(opacity=80); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; z-index: 99999 }
.expop_bottom_links { margin-top: 10px; text-align: center }
.expop_round_tr { -moz-border-radius-topright: 35px; -khtml-border-radius-topright: 35px; -webkit-border-top-right-radius: 35px; border-top-right-radius: 35px }
.expop_round_tl { -moz-border-radius-topleft: 35px; -khtml-border-radius-topleft: 35px; -webkit-border-top-left-radius: 35px; border-top-left-radius: 35px }
.expop_round_br { -moz-border-radius-bottomright: 35px; -khtml-border-radius-bottomright: 35px; -webkit-border-bottom-right-radius: 35px; border-bottom-right-radius: 35px }
.expop_round_bl { -moz-border-radius-bottomleft: 35px; -khtml-border-radius-bottomleft: 35px; -webkit-border-bottom-left-radius: 35px; border-bottom-left-radius: 35px }
.expop_skew { -webkit-transform: translate(0, 50px)rotate(15deg) skew(-8deg, -8deg) scaleY(1.1); -moz-transform: translate(0, 50px)rotate(15deg) skew(-8deg, -8deg) scaleY(1.1); transform: translate(0, 50px)rotate(15deg) skew(-8deg, -8deg) scaleY(1.1) }
* { margin: 0; padding: 0; box-sizing: border-box }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; height: 100% }
body { position: relative; min-height: 100%; font-size: 1.7rem; font-family: myriadpro, Arial, sans-serif; color: #000; line-height: 1.1 }
p { margin-bottom:.5rem
}
.bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; animation: bgMove 15s linear infinite; -webkit-animation: bgMove 15s linear infinite }
.content_wrap { padding: 1% 0; height: 100% }
.content { background: #fff; max-width: 112.5rem; border-radius: 12px; padding: 5rem 4.5rem; width: 96%; margin: auto }
.left_side { position: relative; width: 37%; display: inline-block; vertical-align: top }
.slide { width: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity linear 1s; text-align: center }
.slide.active { position: relative; z-index: 2; opacity: 1 }
.slide img { max-width: 100%; border: 1rem solid #000 }
.right_side { width: 62%; display: inline-block; vertical-align: top; padding-left: 4%; text-align: center }
.step { display: none }
.title_text { color: #ff0600; font-weight: 700; text-transform: uppercase; font-size: 7.6rem }
.large_text { font-size: 3rem; text-transform: uppercase; font-weight: 700; margin-bottom: 1.3rem }
.text { margin-bottom: 1rem }
.text span { font-weight: 700 }
.first_step { display: block }
.first_step .title_text { font-size: 10.8rem }
.first_step .text { font-size: 2.7rem; text-transform: uppercase }
.first_step .large_text { font-size: 4rem }
.q_block { display: none }
.q_block1 { display: block }
.question { color: #007eff; font-size: 3rem; font-weight: 700; margin-bottom: 1.8rem }
.question_text { margin-bottom: 1.7rem }
.choice_block { width: 70%; display: block; margin: 0 auto 1rem }
.choice_block li { display: inline-block; vertical-align: middle; font-size: 1.2em; margin-bottom: 1rem; padding: 0 15px 0 25px; cursor: pointer; position: relative; width: 49%; text-align: left }
.choice_block li:before { content: ""; width: 14px; height: 14px; border: 1px solid #959595; display: block; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; transition: all .3s linear }
.choice_block li.active:before { background: #007eff; border-color: #007eff }
.loading_block { display: none }
.progress_bar { width: 100%; border-radius: 4px; height: 4rem; background: #e8e8e8; margin: 0 auto 1.5rem auto; position: relative; border-radius: 5px }
.progress_bar:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 5; animation: progress 6s ease-in-out forwards; -webkit-animation: progress 6s ease-in-out forwards; background: #3398ff; border-radius: 5px }
.run_load { display: none }
.run_load:first-child { display: block }
.final_step>* { display: none }
.f_title { font-size: 5.1rem; color: #007eff; text-transform: uppercase; font-weight: 700 }
.f_large_text { font-size: 3.2rem; font-weight: 700 }
.green_color { font-weight: 700; color: #609f4e }
.red_color { font-size: 2.4rem; color: #ff0600; font-weight: 700 }
.rules { text-align: left; font-weight: 700; margin-bottom: 2rem }
.rules li { padding: 1rem 0 1rem 5rem; list-style-type: none; position: relative }
.rules li span { width: 4rem; height: 4rem; color: #fff; border-radius: 50%; background: #ff0600; line-height: 4rem; text-align: center; font-size: 3.8rem; position: absolute; left: 0; top: 0; bottom: 0; margin: auto }
.button { background: #fff; color: #8d8d8d; text-transform: uppercase; border-radius: 5rem; border:.8rem solid #d9d9d9;
text-decoration: none; padding: 1.5rem 2.5rem; font-size: 4.9rem; font-weight: 700; min-width: 40%; display: inline-block; transition: all .2s linear; margin: 0 5px }
.button:hover { background: #d9d9d9 }
.ok_button, .yes_btn { text-shadow: 0 3px 3px rgba(0,66,134,.75); background: #DB4B2C; color: #fff }
.ok_button:hover, .yes_btn:hover { background: #3398ff }
@-webkit-keyframes bgMove { from {
background-position:0 0
}
to { background-position: 0 1080px }
}
@keyframes bgMove { from {
background-position:0 0
}
to { background-position: 0 1080px }
}
@keyframes progress { from {
width:0
}
to { width: 100% }
}
@-webkit-keyframes progress { from {
width:0
}
to { width: 100% }
}
@media screen and (max-width:1200px) {
html { font-size: 55.5% }
}
@media screen and (max-width:1000px) {
html { font-size: 45.5% }
}
@media screen and (max-width:780px) {
html { font-size: 35% }
body { font-size: 2.5rem }
.content { max-width: 450px; padding: 2rem }
.left_side, .right_side { display: block; margin: auto; width: 100%; padding: 0 }
.slide img { max-height: 40rem }
.choice_block { width: 100% }
.f_title { font-size: 3.1rem }
.first_step .title_text, .title_text { font-size: 5rem }
}
}
























@import url(https://fonts.google.com/specimen/PT+Sans);
body{
  overflow-x:hidden;
  font-family: "PT Sans", Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.4;
  color:#333}
h1,h2,h3,h4,h5,h6{
  text-transform:uppercase}
h1{
  font-size:2.5rem;
  color:#76ff89;
}
h2{
  font-size:2rem}
h3{
  font-size:2.2rem}

h5,h6{
  font-size:1.6rem}
p{
  font-size:1.8rem;
  text-align:justify;
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box}
html{
  font-size:62.5%}
body,html{
  width:100%;
  height:100%}
body{
  min-width:320px;
  background:#fff;
  z-index:0}
ul{
  list-style-type:none;
  margin:0;
  padding:0}
.clearfix:after{
  content:"";
  display:block;
  clear:both}
.btn,.transition{
  transition:all .25s ease}
img{
  display:block;
  max-width:100%;
  height:auto}
.main{
  position: fixed;
  background: rgba(0,0,0,.5);
  width:100%;
  height:100%;
  z-index:1}
.crumbs{
  display: flex;
  align-items: center;
  position:fixed;
  z-index:3;
  left:50%;
  top:0;
  transform:translateX(-50%)}
.crumbs li{
  display:inline-block;
  width: 1rem;
  height: 4rem;
  margin: 1rem;
  transition:all .25s ease;
  border-radius: 10px;
  background:#fff;
}
.crumbs li.active{
  width:2rem;
  height: 4rem;
  background:#76ff89;
}
@keyframes a{
  0%{
    opacity:0;
    transform:translate3d(0,10rem,0)}
  to{
    opacity:1;
    transform:translateZ(0)}
}
.fadeInUp{
  animation:a .4s}
.btnbox{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-pack:distribute;
  justify-content:space-around;
  -ms-flex-align:center;
  align-items:center}
.btn{
  width:100%;
  height:6rem;
  line-height:6rem;
  padding:0 2rem;
  position:relative;
  display:inline-block;
  color:#000;
  font-size:1.6rem;
  text-decoration:none;
  text-transform:uppercase;
  text-align:center;
  border-radius:.8rem;
  cursor:pointer;
  margin-bottom:1rem}
.btn--primary{
  color: #fff;
  background: linear-gradient(to right, #85e7ff,#76ff8a);
  font-weight: 900;
  border-radius: 3px 30px 30px 30px;
  box-shadow: 5px 5px 5px #76ff8a;
}
.btn--primary:hover{
  background: #85e7ff;
  box-shadow: 5px 5px 5px #85e7ff;
}
.btn--accent{
  color:#fff;
  background: linear-gradient(to right, #979797,#3a3a3a);
  border-radius: 3px 30px 30px 30px;
  box-shadow: 5px 5px 5px #979797;
}
.btn--accent:hover{
  background: #979797;
}
.stepbox{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2}
.step,.stepbox{
  width:100%;
  height:100%}
.step{
  position:relative;
  display:none;
  color:#333;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50%}
.step:first-child{
  display:block}
.step__inner{
  width:100%;
  max-width:50rem;
  height:100%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:-ms-flexbox;
  display:flex;
  -ms-flex-pack:center;
  justify-content:center;
  -ms-flex-direction:column;
  flex-direction:column}
.step__header,.step__inner{
  position:relative}
.step__header svg{
  fill:hsla(0,0%,100%,.75);
  position:absolute;
  width:100%;
  left:0;
  top:-5rem;
  height:5rem}
.step__header .avatar{
  width: 8rem;
  height: 8rem;
  border-radius: 8rem;
  border-right: 8px solid #76ff89;
  border-bottom: 8px solid #76ff89;
  overflow: hidden;
  margin: 0 auto;
  margin-bottom: 1rem;
}
.step__header .avatar img{
  width:100%;
  display:block}
.step__body{
  position:relative;
  padding:1rem 1.5rem;
  color: #fff;
  text-align: center;
  border: 0px solid #000000;
}
.step__body p{
  margin-bottom:2rem;
  margin-top: 25px;
}
.step__footer{
  position:relative;
  margin-bottom:5rem}
.step__footer svg{
  fill:hsla(0,0%,100%,.75);
  position:absolute;
  width:100%;
  left:0;
  bottom:-5rem;
  height:5rem}
.bg{
  position:fixed!important}
.bg,.bg:after{
  width:100%;
  height:100%;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:0}
.bg:after{
  content:"";
  display:block;
  position:fixed;
  background:linear-gradient(rgba(0,0,0,.4) 5%,transparent)}
.bg__item{
  display:none;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50%;
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  right:0;
  bottom:0}
.bg__item.active{
  display:block}
@media (min-width:320px) and (max-width:374px){
  .step__inner{
    -ms-flex-pack:end;
    justify-content:flex-end}
  .step__header .avatar,.step__header svg{
    display:none}
  .step__footer{
    margin-bottom:0}
  .step__footer svg{
    display:none}
}
@media (min-width:375px) and (max-width:767px){
  html{
    font-size:62.5%}
  .step__inner{
    -ms-flex-pack:end;
    justify-content:flex-end}
}
@media (min-width:768px){
  html{
    font-size:80%}
}
@media (min-width:992px){
  .step__inner{
    left:60%}
}
@media screen and (min-width:320px) and (max-width:992px) and (orientation:landscape){
  html{
    transform:rotate(-90deg);
    transform-origin:left top;
    width:100vh;
    height:100vw;
    overflow-x:hidden;
    position:absolute;
    top:100%;
    left:0}
}