@media (max-width: 1200px) {
body{
    font-size: 16px;
  }
.container {
    width: 767px;
  }
.hap-button-bg,
.hap-button-transparent,
header .head-nav li a,
.main-image-content .items .buttons p {
    font-size: 14px;
  }
.main-image-content .items .item {
    width: 100%;
  }
.main-image-content .items h1,
.text-description .items h2,
.fact .items .item.right p,
.section_title,
.good-news .item h3 span {
    font-size: 28px;
  }
.main-image-content .items .buttons a {
    max-width: 180px;
  }
.numbers .items {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
.numbers .items .item {
    width: 48%;
    margin: 0 0 4% 0;
  }
.how-started .items .text {
    font-size: 20px;
    margin-bottom: 20px;
  }
.how-started .items .hap-button-bg {
    display: block;
    max-width: 260px;
    margin: 0 auto;
  }
.how-started .items {
    height: auto;
    padding: 25px;
    text-align: center;
    display: block;
  }
.how-work .w-1-4,
.how-work .w-1-2 {
    width: 48%;
    height: 240px;
    margin-bottom: 4%;
  }
.how-work .video-item img.mockup_iphone-2 {
    right: -90px;
  }
.how-work .video-item img.mockup_iphone-1 {
    right: 20px;
  }
.how-work .video-item img.play_button {
    width: 60px;
    z-index: 5;
  }
.how-work .question-item img {
    top: auto;
    width: 50%;
    bottom: 0;
  }
.user-experience .tabs .tab-content .tab-item .left {
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px 0 0 8px;
    width: 550px;
    padding: 50px 50px 20px 50px;
  }
.user-experience .tabs .tab-content .tab-item .right {
    width: calc(100% - 550px);
  }
.screen-description .items .item {
    width: 48%;
  }
.screen-description .items .item p {
    position: relative;
  }
.screen-description .items .item img {
    bottom: -73px;
    width: 200px;
  }
.how-work .question-item img {
    width: 50%;
    top: auto;
    bottom: 0;
    right: 0;
  }
.what-gen .tabs .tab-content .tab-item .hap-screen-2 {
    width: 30%;
    top: auto;
    bottom: 0;
  }
.what-gen .tabs .tab-content .tab-item .hap-screen-1 {
    width: 19%;
    top: auto;
    right: 25%;
    bottom: 0;
  }
.choose-plan .items {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
.choose-plan .items .plan-column {
    width: 100%;
  }
.choose-plan .items .plan-column > p {
    margin-top: 0;
    margin-bottom: 30px;
  }
.choose-plan .items .select-plan,
.choose-plan .items .free-plan {
    width: 48%;
  }
.faq .spoiler {
    font-size: 20px;
  }
.faq .spoiler.active p {
    font-size: 16px;
  }
}
@media (max-width: 800px) {
.container {
    width: 95%;
    margin: 0 auto;
  }

.main-image-content .items,
.text-description .items,
.fact .items {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
.text-description .items .item {
    width: 100%;
  }
.text-description .items p {
    margin-top: 30px;
  }
.fact .items .item.left {
    width: 100%;
  }
.fact .items .item.right {
    width: 100%;
    margin-top: 20px;
  }
.numbers .items .item {
    width: 100%;
    margin: 0 0 30px 0;
  }
.how-work .w-1-4,
.how-work .w-1-2 {
    width: 100%;
  }
.tab-nav {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
.tab-nav div.tab {
    text-align: left;
    padding: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 2px solid #f2f4f1;
    border-right: none;
  }
.tab-nav div.tab:last-child {
    border-bottom: none;
  }
.user-experience .tabs .tab-content .tab-item {
    height: auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
  }
.user-experience .tabs .tab-content .tab-item .left {
    border-radius: 8px 8px 0 0;
    width: 100%;
    padding: 25px;
  }
.user-experience .tabs .tab-content .tab-item .left img {
    width: 60px;
  }
.user-experience .tabs .tab-content .tab-item .right {
    width: 100%;
    border-radius: 0px 0px 8px 8px;
    border: 2px solid #F2F4F1;
    border-top: none;
    padding: 25px;
  }
.good-news .item h3 {
    font-size: 26px;
  }
.screen-description .items {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
.screen-description .items .item {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
  }
.screen-description .items .item:last-child {
    margin-bottom: 0;
  }
.screen-description .items .item img {
    bottom: -73px;
    width: 200px;
    position: static;
    padding: 14px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

.what-gen .tabs .tab-nav .tab .icon {
      display: none;
  }
.what-gen .tabs .tab-content .tab-item {
      height: auto;
      padding: 25px;
  }
.what-gen .tabs .tab-content .tab-item .hap-screen-1,
.what-gen .tabs .tab-content .tab-item .hap-screen-2{
    display: none;
  }

.choose-plan .items .select-plan, .choose-plan .items .free-plan {
    width: 100%;
}

.choose-plan .items .free-plan{
  margin-top: 30px;
}

.partners .logos{
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
}

.partners .logos img {
    max-height: initial;
    margin-right: 15px;
    margin-bottom: 15px;
}

.partners {
    padding: 30px 0 15px 0;
    height: auto;
}

.how-started .items .hap-button-bg{
  max-width: 100%;
}

.main-image-content .items .buttons {
    height: auto;
    flex-direction: column;
        align-items: flex-start;

}
.main-image-content .items .buttons p {
    text-align: left;
    width: auto;
    margin-top: 15px;
    margin-left: 0;
}

header .head-nav{
  display: none;
}


header .hamburg{
  display: flex;
  width: 32px;
  height: 22px;
  flex-direction: column;
align-items: center;
    justify-content: space-between;
}

header .hamburg span{
  width: 100%;
  height: 3px;
  background: #51c0cb;
}



header .head-nav.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 0;
    top: 0;
    bottom:0;
    background: conic-gradient(from 268.29deg at 106.47% 109.82%, #59D0DB 0deg, #072630 275.62deg, #59D0DB 360deg);
    width: 90%;
    height: 110vh;
    overflow: hidden;
    margin: 0;
    z-index: 5555555;
    padding: 0;
}

header .head-nav.active li{
  margin: 30px 0;
}

header .head-nav.active li a {
    margin-left: 0;
    font-size: 24px !important;
    color: #fff;
    font-weight: 700;
}

header .head-nav.active .hap-button-transparent {

    border-color: #fff;
    background-color: #fff;
    color: #59D0DB !important;
}


header .head-nav.active .close-button{
    width: 30px;
    height: 30px;
    z-index: 555;
    position: absolute;
    top: 30px;
    right: 30px;
    margin: 0;
    display: block;
}

header .head-nav.active .close-button svg{
  width: 100%;
}

}