/* preorder form */
.starter-title{
   width: 100%;
   text-align: center;
   margin-bottom: 20px;
}
.question_title{
   background: #b6eafb;
   border: 1px solid #e2e2e2;
   text-align: center;
   font-size: 20px;
   margin-bottom: 10px;
   padding: 20px;
   width: 100%;
}
.d-none, 
.preorder-form .question,
.preorder-form .review{
   display: none;
}
.preorder-form .question input{
   width: 100%;
   margin-top: 10px;
   padding: 10px;
}
.preorder{
   display: flex;
   flex-wrap: wrap;
}
.preorder-form{
   width: 50%;
}
.preorder-form.is-active{
   width: 100%;
   flex: 100%;
   display: flex;
   flex-wrap: wrap;
}
.preorder-form>*{
   order: 1;
   width: 100%;
}
.preorder-form .navigator{
   order: 0;
   margin-bottom: 10px;
}
.variants{
   display: flex;
   flex-wrap: wrap;
}
.variants input[type="text"]{
   margin: 10px 0
}
.preorder-form .buttons>*,
.form-row button{
   padding: 5px 20px;
   display: inline-block;
   cursor: pointer;
   font-family: 'Roboto';
}
.variant{
   padding: 20px

}
.variant,
.usage{
   background: #fff;
   padding: 3px;
   border: 1px solid #e2e2e2;
   width: 50%;
   cursor: pointer;
}
.variants.count-1 .variant,
.usage{
   width: 100%;
}
.usage{
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px;
}
.variant.active{
   background: #f0fbff;
}
.var_title,
.usage_title{
   font-size: 15px;
   text-align: center;
}
.var_icon,
.usage_icon{
   max-width: 50px;
   margin: 0 auto;
}
.var_icon img,
.usage_icon img{
   max-width: 100%;
   height: auto
}
.variant .var_desc{
   font-size: 12px;
   text-align: center;
   color: #afafaf;
}
.preorder-form .buttons{
   display: flex;
   justify-content: center;
   margin: 10px 0;
}
.preorder-form .buttons>*{
   min-width: 100px;
}
.preorder-form .buttons>*:first-child{
   margin-right: 10px;
}
.preorder-form .back{
   background: transparent;
   border: 1px solid;
   color: #00b0ea;
}
.preorder-form .buttons>*[disabled]{
   background: #ddd;
   color: #717171;
}
.review{
   flex-wrap: wrap;
}
.review h3{
   width: 100%;
   padding: 10px
}
.review label{
   min-width: 20%;
}
.preorder-result{
   display: none;
}
.review .result,
.preorder-result{
   width: 100%;
   background: #fff;
   padding: 15px;
   font-size: 14px;
   line-height: normal;
}
.review .result{
   background-color: transparent;
}

.navigator{
   display: none;
   justify-content: left;
   flex-wrap: wrap;
   width: 100%;
   position: relative;
}
.preorder-form.is-active .navigator{
   display: flex;
}
.navigator .title{
   width: 100%;
   text-align: center;
}
.navigator p{
   text-transform: uppercase;
   margin-bottom: 10px;
   margin-top: 30px;
   text-align: center;
   border-bottom: 1px solid #ddd;
   display: inline-block;
}
.navigator .line{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
   height: 1px;
   background-color: #dcdcdc;
}
.navigator .item{
   width: auto;
   padding: 10px 15px;
   background: #efefef;
   font-size: 12px;
   line-height: normal;
   text-transform: uppercase;
   transition: cubic-bezier(0.075, 0.82, 0.165, 1);
   position: relative;
   z-index: 1;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
}
/* .navigator .item::after{
   width: 0; 
   height: 0; 
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
   border-left: 20px solid #efefef;
} */
.navigator .item .fas{
   display: none;
   margin-right: 5px;
}
.navigator .item.pre-active:not(.active) .fas{
   display: inline-block;
}
.navigator .item.active.item-temp,
.navigator .item.active.item-salinity{
   background: #b6eafb;
}
.navigator .item.active.item-source,
.navigator .item.active.item-study{
   background: #CDDC39;
}
.navigator .item.active.item-use,
.navigator .item.active.item-report{
   background: #FFC107;
}
.navigator .item.active.item-production,
.navigator .item.active.item-dist{
   background: #a5e857;
}
.navigator .item.active.item-dis{
   background: #94d0ca;
}
.navigator .item.active.item-energy,
.navigator .item.active.item-rights{
   background: #c4a9f5;
}
.navigator .item.active.item-quality{
   background: #ffb8d0;
}
.navigator .item.active.item-review{
   background: #a2b0ff;
}
.question-next:not(:disabled),
.form-row button:not(:disabled){
   background: #00b0ea;
   border-color: #00b0ea;
   color: #fff;
}
.form-row button.form-back{
   background-color: #fff;
   border-color: #00b0ea;
   color: #00b0ea;
}
 
.swiper-container.swiper-team {width: 100%;height: 100%;}

.review .result{
   padding: 40px;
}
.review .result span{
   background-color: #fff;
   padding: 3px;
   font-weight: bold;
}

@media(min-width: 768px){
   h1{font-size: 4rem;}
   h2{font-size: 2.3rem;}
   h3{font-size: 2rem;}
   h4{font-size: 1.5rem;}
   
   .team:not(.swiper-wrapper){display: flex; flex-wrap: wrap; justify-content: space-evenly;}
   .team .item{width: 48%;}
   .team .title{font-size: 1.4em;}
   
   .sh-posts{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
   }
   .sh-posts .sh-post{
      width: 20%;
      margin: 20px;
   }
   
   .preorder-form{
      flex: 1;
   }
   .variant{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
   }
   .var_title, .usage_title{
      font-size: 18px;
      min-height: 44px;
   }
   .var_icon, .usage_icon {
      max-width: 100px;
      margin: 0 auto;
  }
   .preorder .type_of_de .select-block .var_icon img{
      height: 125px;
      width: auto;
   }
   .review{
      justify-content: space-between;
   }
   .review .result,
   .review .form-left{
      width: 48%;
      background-color: #e6f8fd;
      padding: 40px;
   }

}

.review .form-left input[type="text"],
.review .form-left input[type="email"],
.review .form-left input[type="tel"],
.review .form-left textarea{
   margin: 0 auto;
   display: block;
   width: 100%;
   margin-bottom: 5px;
   border: none;
   font-size: 15px;
   padding: 10px;
}