@media (max-width: 1240px) { .form-text { max-width: 850px; height: 360px; margin: 30px; padding-left: 150px; } .form { max-width: 240px; } .form > p { margin: 20px 20px 20px; } .form > input, select { width: 190px; height: 45px; margin-left: 20px; } .form-button { margin: 5px 0 0 95px; width: 115px; } .text-on-fone { min-width: 480px; margin-top: 40px; } .text-on-fone > h1 { font-size: 43px; } .text-on-fone > p { font-size: 37px; } .block3-boxs { display: flex; justify-content: space-around; } .block3 { margin: -100px 0 10px; } .box-info { margin: 0 10px 20px; } .box-info > img { width: 40%; } .box-text { margin-left: 200px; } .box-text > h1 { padding-top: 15px; font-size: 18px; } .box-text > blockquote { margin-top: 10px; font-size: 13px; } .box-text > cite { font-size: 13px; } .gallery > img { width: 25%; height: 25%; } .about-us { width: 100%; margin-top: -70px; flex-direction: column; align-items: center; } .about-us-text { text-align: center; padding-bottom: 50px; } .yoga-gallery { margin-left: 0; } .features { margin: -40px 0; display: flex; justify-content: center; } .features-boxs { margin: 0 0 40px 30px; } .box-prices h1 { padding: 30px 110px; } .box-prices sub { position: relative; bottom: 52px; } .box-prices p { padding-top: 45px; } .box-prices a { margin: 45px 0; } .six-content { height: 950px; } } @media (max-width: 1060px) { .form-text { min-width: 600px; height: 360px; margin: 30px 0; padding-left: 0; justify-content: center; } .text-on-fone { max-width: 400px; margin-top: 40px; } .text-on-fone > h1 { font-size: 37px; width: 100%; } .text-on-fone > p { font-size: 35px; } .block3-boxs { max-width: 850px; } .block3 { min-height: 1400px; margin: -30px 0 -10px; } .box-info { margin: 0 10px 30px; min-height: 520px; } .box-info > img { width: 100%; float: none; } .box-text { margin-left: 10px; display: flex; flex-direction: column; align-items: center; } .box-text > h1 { font-size: 18px; } .box-text > blockquote { font-size: 14px; } .box-text > cite { font-size: 14px; } .box-prices h1 { font-size: 60px; padding: 20px 90px; } .box-prices sub { position: relative; bottom: 40px; left: 80px; font-size: 16px; } .box-prices a { margin: 35px 0; } .boxs-bloquotes { height: 370px; position: relative; } .bloquotes { display: flex; flex-direction: column; align-items: center; } .bloquotes img { width: 290px; height: 250px; margin: -20px 0 -30px; } .bloquotes blockquote { padding: 0 0 30px; max-width: 500px; font-size: 16px; } .bloquotes blockquote::before { top: -20px; left: -30px; } .bloquotes blockquote::after { top: 60px; right: -20px; } .bloquotes cite { margin-left: -350px; } .bloquotes cite::before { display: none; } .icon-left a { padding-bottom: 20px; } .icon-left li { min-height: 160px; padding: 60px 0 0; display: flex; flex-direction: column; } } @media (max-width: 860px) { .six-content { min-height: 1900px; } .boxs-prices { display: flex; flex-direction: column; align-items: center; } .box-prices { max-width: 306px; margin: -40px 0 60px; } .box-prices h1 { padding: 20px 110px; } .box-prices p::after { content: ""; width: 80px; height: 1px; background: #d7d7d7; display: block; position: relative; top: 20px; left: 30%; } } @media (max-width: 750px) { .logo { padding-left: 60px; } .menu__btn > span, .menu__btn > span::before, .menu__btn > span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: #5b6ceb; transition: transform 0.2s; } .menu__btn > span::before { content: ""; top: -8px; } .menu__btn > span::after { content: ""; top: 8px; } .menu__box { position: fixed; visibility: hidden; top: 0; left: -100%; width: 250px; height: 100%; padding: 70px 0; text-align: center; background-color: #d6d6da; z-index: 2; box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2); transition: all 0.5s; display: flex; flex-direction: column; } .menu__item { line-height: 3; color: #333; font-size: 25px; font-weight: 600; text-decoration: none; } #menu__toggle:checked ~ .menu__btn > span { transform: rotate(45deg); transition: transform 0.5s; } #menu__toggle:checked ~ .menu__btn > span::before { top: 0; transform: rotate(0); transition: transform 0.5s; } #menu__toggle:checked ~ .menu__btn > span::after { top: 0; transform: rotate(90deg); transition: transform 0.5s; } #menu__toggle:checked ~ .menu__box { visibility: visible; left: 0; } .menu__btn2 > span, .menu__btn2 > span::before, .menu__btn2 > span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: #5b6ceb; transition: transform 0.2s; } .menu__btn2 > span::before { content: ""; top: -8px; } .menu__btn2 > span::after { content: ""; top: 8px; } .menu__box2 { position: fixed; visibility: hidden; top: 0; right: -100%; width: 250px; height: 100%; margin: 0; padding: 70px 0; text-align: center; background-color: #d6d6da; z-index: 2; box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2); transition: all 0.5s; display: flex; flex-direction: column; } .menu__item2 { line-height: 3; color: #333; font-size: 25px; font-weight: 600; text-decoration: none; } #menu__toggle2:checked ~ .menu__btn2 > span { transform: rotate(45deg); transition: transform 0.5s; } #menu__toggle2:checked ~ .menu__btn2 > span::before { top: 0; transform: rotate(0); transition: transform 0.5s; } #menu__toggle2:checked ~ .menu__btn2 > span::after { top: 0; transform: rotate(90deg); transition: transform 0.5s; } #menu__toggle2:checked ~ .menu__box2 { visibility: visible; right: 0; } .first-content { min-height: 850px; } .form-text { min-width: 300px; margin: 200px 0 0; padding-left: 0; justify-content: center; align-items: center; flex-direction: column-reverse; } .form { min-width: 300px; margin-top: 50px; } .form > p { font-size: 28px; padding: 15px 0; } .form > input, select { min-width: 250px; } .form-button { margin: 17px 0 20px 95px; min-width: 170px; } .text-on-fone { min-width: 300px; } .text-on-fone > h1 { font-size: 40px; width: 100%; } .text-on-fone > p { font-size: 38px; } .block3-boxs { max-width: 570px; } .block3 { min-height: 2600px; margin: -40px 0 20px; } .box-info { margin: 0 10px 30px; min-height: 500px; padding: 0 26px; border-radius: 10px 10px 0 0; display: flex; flex-direction: column; align-items: center; } .box-info > img { border-radius: 10px 10px 0 0; width: 120%; float: none; } .box-text > h1 { font-size: 20px; } .box-text > cite { font-size: 14px; padding-bottom: 10px; } .gallery { max-height: 1100px; display: flex; flex-wrap: wrap; } .gallery-img { width: 50%; } .gallery-img > img { width: 100%; } .boxs-bloquotes { height: 370px; position: relative; } .bloquotes img { width: 280px; height: 240px; } .bloquotes blockquote { max-width: 300px; } .bloquotes blockquote::after { top: 90px; } .bloquotes cite { margin-left: -150px; } } @media (max-width: 470px) { .first-content { min-height: 850px; } .form-text { max-width: 300px; margin: 200px 0 0; padding-left: 0; justify-content: center; align-items: center; flex-direction: column-reverse; } .form { min-width: 140px; } .form > input, select { min-width: 150px; } .form-button { margin: 5px 0 20px 95px; min-width: 90px; } .text-on-fone { max-width: 100px; } .text-on-fone > h1 { font-size: 34px; } .text-on-fone > p { font-size: 32px; } .block3-text { max-width: 240px; } .block3-boxs { max-width: 330px; } .block3 { min-height: 2450px; } .box-info { min-height: 500px; padding: 0 0; } .box-info > img { width: 100%; } .footer-decoration { min-height: 600px; } .decoration { display: flex; flex-direction: column; } .about > p { padding: 40px 0 50px; } .contacts { margin: 50px 0 0; } .icon-left li { min-height: 160px; padding: 40px 0 0; margin-right: 0; display: flex; flex-direction: column; } .five-content { max-height: 2420px; } .features-boxs { margin-left: 0; } .slick-next { right: -1px; } .slick-prev { left: -16px; } .slick-prev::before, .slick-next::before { font-size: 35px; } .six-content { min-height: 1800px; } .boxs-prices { display: flex; flex-direction: column; align-items: center; } .box-prices { max-width: 270px; margin: -40px 0 60px; } .box-prices h1 { padding: 20px 90px; } .boxs-bloquotes { margin: 10px 0 0; height: 390px; position: relative; } .bloquotes img { width: 260px; height: 220px; } .bloquotes blockquote { max-width: 220px; } .bloquotes blockquote::before { top: -20px; left: -20px; } .bloquotes blockquote::after { top: 120px; } .bloquotes cite { margin-left: -80px; } .copyright { padding: 30px 0; } .copyright > p { font-size: 14px; } }