@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap&subset=cyrillic,cyrillic-ext');
*{
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box}
:focus{
  outline:0}
img{
  border:none;
  display:block}
ol,ul{
  list-style:none}
iframe{
  border:none !important;
  width:0 !important;
  height:0 !important}
a{
  text-decoration:none;
  cursor:pointer !important}
html{
  font-size:62.5%;
  -webkit-text-size-adjust:100%;
  position:relative}
body{
  font-family:'Open Sans', Arial, sans-serif;
  color:#000;
  line-height:1.3;
  font-size:2.4rem;
  background:#fff9f6;
  min-width:320px}
.slider-block{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:-1}
.slider-item{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:cover;
  opacity:0;
  transition:opacity 0.3s linear}
.slider-item.active{
  opacity:1}
.slider-item.item-1.preload{
  background-image:url(../img/step1.jpg)}
.slider-item.item-2.preload{
  background-image:url(../img/step2.jpg)}
.slider-item.item-3.preload{
  background-image:url(../img/step3.jpg)}
.slider-item.item-4.preload{
  background-image:url(../img/step4.jpg)}
.slider-item.item-5.preload{
  background-image:url(../img/step5.jpg)}
.slider-item.item-6.preload{
  background-image:url(../img/step6.jpg)}
.slider-item.item-7.preload{
  background-image:url(../img/step7.jpg)}
.slider-item.item-8.preload{
  background-image:url(../img/step8.jpg)}
.slider-item.item-9.preload{
  background-image:url(../img/step9.jpg)}
.slider-item.item-10.preload{
  background-image:url(../img/step10.jpg)}
.slider-item.item-11.preload{
  background-image:url(../img/step11.jpg)}
.step-block{
  height:100vh;
  min-height:500px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row nowrap;
  flex-flow:row nowrap;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center}
.step-item{
  display:none;
  text-align:center;
  width:90%;
  max-width:360px}
.step-item.visible{
  display:block}
.step-title{
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:1rem}
.checkbox-block{
  margin-top:2rem;
  text-align:left}
.checkbox-item{
  display:block;
  position:relative;
  padding:0 0 0 5rem;
  margin:0 0 1.5rem 1rem;
  line-height:1;
  cursor:pointer;
  -webkit-transition:all 0.3s linear;
  transition:all 0.3s linear;
  font-size:2.4rem}
.checkbox-item:before{
  content:"";
  position:absolute;
  width:2.2rem;
  height:2.2rem;
  line-height:2.2rem;
  border:1px solid #000;
  top:0;
  left:0;
  z-index:1;
  color:#fff;
  border-radius:5px;
  font-family:Arial, sans-serif;
  font-weight:bold;
  font-size:1.8rem;
  text-align:center;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row nowrap;
  flex-flow:row nowrap;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  color:#fff}
.checkbox-item.checked:before{
  content:"\2713";
  background-color:#594999;
  border-color:#594999}
.buttons-block{
  text-align:center;
  padding:7rem 0 2rem;
  font-size:0}
.step-btn{
  background:#594999;
  display:inline-block;
  width:40%;
  max-width:200px;
  margin:1rem;
  padding:1rem 1.5rem;
  cursor:pointer;
  transition:all 0.3s linear;
  font-size:2.4rem;
  color:#fff;
  border-radius:5px;
  font-weight:700}
.step-btn:hover{
  background:#4a3d80}
.step-btn:active{
  background:#3c3166}
.submit-btn{
  width:100%}
.final-step{
  max-width:700px}
.final-step .step-title{
  text-transform:initial}
@media (max-width:600px),(max-height:500px){
  html{
    font-size:50%}
  .checkbox-item{
    display:block;
    margin:2rem 0}
  .step-btn{
    width:100%;
    margin:1rem 0}
}
@media (max-height:650px){
  .step-block{
    height:auto;
    min-height:initial;
    padding-top:3rem}
}
