#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 "css.css";
* { margin: 0; padding: 0 }
:focus { outline: 0 }
img { border: 0 }
html, body { -webkit-text-size-adjust: none }
body { background: url(../img/bg.jpg) center top no-repeat #131217; -webkit-background-size: cover; background-size: cover; font-family: 'Open Sans', sans-serif; font-size: 24px; color: #fff; min-width: 320px }
ol, ul { list-style: none }
a { color: #fff }
.wrap { position: relative; padding: 0 15px }
.slogan-box { padding: 20px 0; text-align: center; max-width: 900px; margin: 0 auto }
.slogan-box h3 { font-size: 30px; color: #f51d7f; margin-bottom: 10px; text-transform: uppercase; font-weight: normal }
.slogan-box p {
font-size:; font-weight: 300 }
.pics { text-align: center }
.pics img { margin: 10px; border: 1px solid #a2bf2e; border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; -webkit-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.75); box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.75) }
.pics img:hover { box-shadow: none }
.step { display: none }
.step:first-child { display: block }
.question { text-align: center; padding: 10px 0 50px }
.question h3 { font-size: 24px; color: #fff; font-weight: 300; margin-bottom: 25px }
.btn { min-width: 120px; display: inline-block; border-radius: 3px; padding: 10px 30px; font-size: 20px; font-weight: bold; color: #fff; cursor: pointer; text-decoration: none; transition: all .1s ease 0s; text-shadow: 1px 1px 1px #db582c; background: rgba(255,121,84,1); background: -moz-linear-gradient(-45deg, rgba(255,121,84,1) 0, rgba(253,38,124,1) 100%); background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,121,84,1)), color-stop(100%, rgba(253,38,124,1))); background: -webkit-linear-gradient(-45deg, rgba(255,121,84,1) 0, rgba(253,38,124,1) 100%); background: -o-linear-gradient(-45deg, rgba(255,121,84,1) 0, rgba(253,38,124,1) 100%); background: -ms-linear-gradient(-45deg, rgba(255,121,84,1) 0, rgba(253,38,124,1) 100%); background: linear-gradient(135deg, rgba(255,121,84,1) 0, rgba(253,38,124,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7954', endColorstr='#fd267c', GradientType=1)
}
.btn:hover { background-color: #e95d2f }
.btn.btn-no { background: #fff!important; color: #f51d7f; font-weight: normal; margin-right: 20px; border-radius: 3px }
.btn.btn-no:hover { background-color: #f0f0f0 }
.final-step { max-width: 700px; margin: 30px auto 0; padding-bottom: 30px; text-align: center }
.final-step h3 { font-size: 24px; font-weight: 300; margin-bottom: 15px; line-height: 1 }
.final-step ul { margin-bottom: 15px; text-align: left; max-width: 90%; margin: auto; list-style-image: url(arrow.png) }
.final-step ul li { font-size: 20px; font-weight: 300; margin-bottom: 5px; list-style: disc outside }
.terms { font-size: 14px; color: #636473; margin-bottom: 15px; font-weight: 300 }
@media(max-width:770px) {
body { font-size: 18px }
.pics img { width: 250px }
.question h3 { font-size: 24px }
.btn { font-size: 24px; margin: 10px 0 0 0!important }
}
@media(max-width:415px) {
body { font-size: 18px }
.pics img { width: 155px; margin: 3px; border-width: 2px }
.question h3 { font-size: 18px; margin-bottom: 10px }
.final-step h3 { font-size: 18px }
.final-step ul li { font-size: 12px }
.terms { font-size: 11px }
}