@media only screen and (max-width:1200px){
  header, section, footer, #lastform .wrap{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  #intro h1, #intro h6 {
    margin-left: 4rem;
  }
  #advantages, #how{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  #deal .card h6 {
    margin: .75rem 0;
    width: -webkit-calc(50% - 1rem);
    width: -moz-calc(50% - 1rem);
    width: calc(50% - 1rem);
  }
  #deal .card h6:nth-child(4) img {
    margin-left: 0;
  }
  #deal .card button {
    margin-top: 1.5rem;
  }
  #presents .container .text {
    width: -webkit-calc(50% - 4rem);
    width: -moz-calc(50% - 4rem);
    width: calc(50% - 4rem);
  }
  #garanty .text {
    padding-left: 2rem;
  }
}
@media only screen and (max-width:1000px){
  section, #lastform .wrap{
    padding-left: .5rem;
    padding-right: .5rem;
  }
  header, footer{
    padding-left: 1rem;
    padding-right: 1rem;
  }
   #intro h1, #intro h6 {
    margin: 0 auto 1rem;
    text-align: center;
  }
  #presents .container form{
    width: -webkit-calc(50% - 4rem);
  width: -moz-calc(50% - 4rem);
  width: calc(50% - 4rem);
  }
  #special .container .row .image, #special .container .row .text{
    width: -webkit-calc(50% - 2rem);
  width: -moz-calc(50% - 2rem);
  width: calc(50% - 2rem);
  }
   #whywe .col{
    width: -webkit-calc(50% - 1rem);
  width: -moz-calc(50% - 1rem);
  width: calc(50% - 1rem);
  }
  #firstform .wrap .text, #firstform .wrap form, #presents .container .text, #presents .container form, #lastform .wrap .text, #lastform .wrap form, #whywe .mainimage {
    width: 100%;
  }
  #presents .container .text{
    margin-bottom: 1rem;
    padding: 2rem;
  }
  #lastform .wrap, #firstform .wrap, #presents .container form, #reviews{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  #advantages .container{
    -webkit-box-align: start;
    -webkit-align-items: start;
       -moz-box-align: start;
        -ms-flex-align: start;
                -ms-grid-row-align: start;
            align-items: start;
  }
  
  #whywe .col, #advantages .text{
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
       -moz-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  #advantages .text{
    width: 70%;
  }
  #advantages .image {
    text-align: left;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
       -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    width: 30%;
  }
  #garanty .text{
    max-width: 100%;
  }
  #presents .container .text .swiper-slide img {
    margin: auto;
    display: block;
  }
  #whywe .mainimage{
    aspect-ratio: 9/9;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
       -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  #how .container .card{
    margin-bottom: 2.5rem;
    width: -webkit-calc(30% - 3rem);
  width: -moz-calc(30% - 3rem);
  width: calc(30% - 3rem);
  }
  #whywe .container .card h6 {
    height: 4rem;
  }
  #how .container{
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
                -ms-grid-row-align: center;
            align-items: center;
  }
  #how .container svg{
    width: 1rem;
    margin: 1rem;
  }
  #lastform .image, #garanty, #intro{
    background-attachment:inherit;
  }
}
@media only screen and (max-width:767px){
  .importantfield {
    position: relative;
    margin-top: 2rem;
    text-align: right;
  }
  #special .container .row{
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    padding: .5rem;
  }
  #special .container .row .image, #special .container .row .text{
    width: 100%;
  }
  #special .container .row .text {
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 2rem;
  }
  #special .container .row:nth-child(2n) .text {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
     -moz-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
  #whywe{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #advantages .text {
    width: 100%;
    padding: 1rem;
  }
  #advantages .image {
    text-align: center;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
       -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    width: 90%;
  }
  #how .container .card {
    width: -webkit-calc(45% - 3rem);
    width: -moz-calc(45% - 3rem);
    width: calc(45% - 3rem);
  }
  header .wrap .contacts{
    -webkit-flex-flow: column;
        -ms-flex-flow: column;
            flex-flow: column;
    -webkit-box-align: end;
    -webkit-align-items: end;
       -moz-box-align: end;
        -ms-flex-align: end;
                -ms-grid-row-align: end;
            align-items: end;
  }
  header .wrap .contacts a{
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
       -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
      font-size: 1.143rem;
      line-height: 1.25rem;
  }
  header .wrap .contacts h6{
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
       -moz-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  #whywe .container .card h6 {
    height: auto;
  }
  #reviews .image {
    width: 16rem;
    height: 20rem;
  }
  #reviews .card {
    padding: 21.5rem 1.5rem 2.5rem 2rem;
    margin-top: -18rem;
    margin-left: 1.5rem;
  }
}
@media only screen and (max-width:500px){
   #deal .card h6, #whywe .col, #how .container .card{
    width: 100%;
   }
   #lastform .wrap, #firstform .wrap, #presents .container{
    padding-top: 2rem;
   }
   #how .container .card {
    margin-bottom: 0;
   }
  #how .container svg {
    width: 1rem;
    margin: 2rem;
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  #how, #lastform .wrap, #firstform .wrap, #presents .container form, #reviews {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #garanty .text {
    padding: 0 1rem;
  }
  header .wrap .contacts {
    display: none;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 0rem;
  }
  #presents .swiper-button-prev, #presents .swiper-button-next {
  width: 2rem;
  height: 2rem;
  }
  #presents .swiper-button-prev {
    margin-left: -1rem;
}
#presents .swiper-button-next {
    margin-right: -1rem;
}
header .wrap{
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
header #callmenu {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    cursor: pointer;
    position: relative;
  }
  header #callmenu svg{
    width: 2rem;
    margin-left: 1.5rem;
  }
header #callmenu g{
  fill: #3F488E;
}
header #callmenu svg:hover g{
  fill: #6D7BF4;
}
header a.logo img{
  max-height: 3rem;
}
}
@media only screen and (max-width:350px){
  html{
     font-size: 13px;
  }
  #reviews {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .popup-content {
    padding: 3rem 1rem 2rem 1rem;
  }
  .popup-content h4{
    font-size: 1.514rem;
  }
}