/home/bdqbpbxa/demo-subdomains/uvitme.goodface.com.ua/wp-content/themes/uvitme/css/adaptive.css
@media screen and (max-width: 1350px) {
.container {
max-width: 1200px;
}
.container.padding {
padding: 0;
}
}
@media screen and (max-width: 1250px) {
/* general */
.container {
max-width: 688px;
}
.page {
padding-top: 0;
overflow: hidden;
}
/* header */
.header {
height: 60px;
border-radius: 0px 0px 20px 20px;
}
.header__logo {
height: 15px;
}
.header__nav {
display: none;
}
.header__right-block .btn-small__fill {
display: none;
}
.header__btn {
margin-right: 0;
}
/* main section */
section.main-section {
padding-top: 100px;
padding-bottom: 60px;
min-height: auto;
overflow: hidden;
-webkit-border-radius: 0 0 40px 40px;
border-radius: 0 0 40px 40px;
}
section.main-section:after {
display: none;
}
.main-section .container {
width: 100%;
}
.main-section__header-block {
max-width: none;
width: 688px;
margin: 0 auto;
}
.change-words:before,
.change-words:after {
display: none;
}
.main-section__header-description {
margin-top: 18px;
}
.main-section__btn-box {
margin-top: 240px;
width: 100%;
}
.main-section__btn {
width: 100%;
}
.main-img-block__text-box {
top: 30px;
right: 30px;
}
.circular {
width: 95px;
height: 95px;
}
.main-section__img-block,
.main-section__img-box,
.main-section__img-box video {
-webkit-border-radius: 0 0 40px 40px;
border-radius: 0 0 40px 40px;
}
/* control section */
.control-section {
border-radius: 40px 40px 0 0;
margin-top: 30px;
}
.control-section .container {
width: 100%;
padding-top: 430px;
padding-bottom: 100px;
margin-bottom: 0;
}
.control-section__text {
width: 100%;
max-width: none;
}
.control-text__description {
margin-top: 20px;
}
.control-text__description em {
margin-top: 20px;
}
.control-section__img {
left: 0;
}
.control-section__img picture {
display: block;
height: 100%;
width: 100%;
}
.control-section__img picture img {
width: 100%;
}
/* approach section */
.approach-section {
padding: 80px 0;
border-radius: 40px 40px 0 0;
margin: -40px 0 40px;
}
.approach-section .container {
max-width: 100%;
}
.approach-section__content-block {
flex-direction: column;
}
.approach-block__box {
width: 100%;
max-width: 100%;
}
.approach-block__box:nth-child(1) {
padding-bottom: 80px;
-webkit-border-radius: 40px 40px 0 0;
-moz-border-radius: 40px 40px 0 0;
border-radius: 40px 40px 0 0;
}
.approach-block__box:nth-child(2) {
margin-top: -40px;
}
.approach-section__btn {
margin-left: 40px;
margin-right: 40px;
}
.approach-section + .eighth-section {
display: flex;
display: -webkit-flex;
flex-direction: column;
align-items: normal;
padding: 80px 0 100px;
margin-top: -40px;
border-radius: 40px 40px 0 0;
-webkit-border-radius: 40px 40px 0 0;
}
.approach-section + .eighth-section .container {
order: 1;
}
.approach-section + .eighth-section .container + .heading {
display: block;
text-align: center;
}
.approach-section + .eighth-section .heading + .image {
margin-top: 40px;
}
.approach-section + .eighth-section .image {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
}
.approach-section + .eighth-section .image img {
height: auto;
max-height: 300px;
border-radius: 40px 40px 0 0;
-webkit-border-radius: 40px 40px 0 0;
}
.approach-section + .eighth-section .col {
min-height: auto;
display: block;
flex-basis: 100%;
max-width: 100%;
padding: 0 15px;
}
.approach-section + .eighth-section .col .heading {
display: none;
}
/* how-do section */
.how-do-section {
border-radius: 40px 40px 0 0;
margin: -40px 0 40px;
padding: 80px 0;
}
.how-do-block__content-box {
margin-bottom: 80px;
}
.how-do-box__img-box {
width: 330px;
}
.how-do-box__img-box img {
max-height: 220px;
}
.how-do-box-img__bg {
height: 160px;
}
.how-do-box__text-box {
max-width: 330px;
}
/* info section */
.info-section {
margin-top: -40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px 40px 0 0;
}
.info-section .container {
padding: 80px 0 120px;
}
.info-section__info-box {
max-width: 330px;
}
.info-section__form-container {
max-width: 100%;
padding: 330px 40px 80px;
}
.info-form__text-block {
width: 100%;
}
.info-form__img {
left: 0;
max-height: 300px;
}
.info-form__img picture {
width: 100%;
height: 100%;
}
.right-form-section {
border-radius: 40px 40px 0 0;
margin-top: -40px;
}
/* features section */
.features-section {
border-radius: 40px 40px 0px 0px;
padding: 80px 0 120px;
margin-top: -40px;
}
.features-content__box {
max-width: 330px;
}
/* video section */
.video-section {
border-radius: 40px 40px 0px 0px;
padding: 80px 0 120px;
margin: -40px 0 0;
}
.video-section .container {
flex-direction: column-reverse;
align-items: stretch;
justify-content: flex-start;
width: 100%;
}
.video-section__text-block {
max-width: 688px;
margin: 0 auto;
}
.video-section__text-block br {
display: none;
}
.video-section__video-block {
width: 100%;
max-height: 450px;
-webkit-border-radius: 40px 40px 0 0;
-moz-border-radius: 40px 40px 0 0;
border-radius: 40px 40px 0 0;
margin-bottom: 60px;
}
.video-section__btn {
max-width: 100%;
}
.pop-up-video .pop-up-content video,
.pop-up-video .pop-up-content iframe {
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
.pop-up-video .pop-up-content {
height: 500px;
}
/* questions section */
.questions-section {
border-radius: 40px 40px 0px 0px;
padding: 60px 40px 100px;
margin-top: -40px;
}
.questions-section__block {
max-width: 100%;
}
.questions-box__question p,
.questions-box__answer {
max-width: 520px;
}
/* slider section */
.slider-section {
padding: 80px 0 120px;
border-radius: 40px 40px 0px 0px;
margin: -40px 0 0;
}
.slider .slick-slide {
max-width: 600px;
}
.slide__left-box {
max-width: 300px;
padding: 30px;
}
.slider__btns {
position: relative;
}
.slider__arrows-block {
position: absolute;
right: 0;
z-index: 2;
}
.slider-section .container:before {
width: calc(50vw - 384px);
left: calc(-50vw + 344px);
}
.left-form-section {
border-radius: 40px 40px 0 0;
margin-top: -40px;
}
/* form section */
.form-section {
margin-top: 80px;
}
.form-section .info-section__form-container {
flex-direction: column;
width: 100%;
}
.left-form-section .form-section__img {
right: 0;
max-height: 300px;
}
.left-form-section .form-section__form-container {
max-width: 100%;
padding: 330px 40px 80px;
}
/* footer */
.footer {
border-radius: 40px 40px 0px 0px;
margin-top: -40px;
}
.footer__top-block {
flex-direction: column;
align-items: flex-start;
}
.footer-top__right-block {
margin-top: 30px;
}
/* pop-up */
.pop-up-content {
padding: 60px;
max-width: 688px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
.pop-up-content__btn input {
width: 100%;
}
.pop-up-thanks .pop-up-content {
padding: 60px;
padding-bottom: 0;
}
.pop-up-content__img {
width: 180px;
margin-right: 40px;
}
.amount .subtitle {
font-size: 12px;
}
}
@media screen and (max-width: 750px) and (orientation: portrait) {
/* ui kit */
.h1 {
font-size: 25px;
line-height: 130%;
letter-spacing: 0.002em;
}
.h2 {
font-size: 25px;
line-height: 145%;
letter-spacing: 0.002em;
}
.h3 {
font-size: 18px;
line-height: 137%;
letter-spacing: 0.01em;
}
.body-regular {
font-size: 14px;
line-height: 140%;
}
/* general */
.container {
width: 100%;
padding-right: 30px;
padding-left: 30px;
}
.container.padding {
padding-left: 30px;
padding-right: 30px;
}
/* header */
.header__logo {
display: block;
}
.header .container {
padding: 0;
margin: 0 30px;
overflow: hidden;
}
/* main section */
section.main-section {
display: flex;
padding-bottom: 30px;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
.main-section .container {
align-items: stretch;
justify-content: center;
}
.main-section__header-block {
display: flex;
flex-direction: column;
}
.change-words {
line-height: 1.5;
}
.change-words > div {
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
.change-words div.top {
-webkit-transform: translate3d(0, -25px, 0);
transform: translate3d(0, -25px, 0);
}
.change-words div img {
max-width: 20px;
max-height: 20px;
}
.main-section__header-description br {
display: none;
}
.main-section__btn-box {
margin-top: auto;
}
.main-section__btn {
padding: 0 15px;
}
.main-img-block__text-box .main-img-block__img {
width: 22px;
height: 22px;
}
.main-section__img-block,
.main-section__img-box,
.main-section__img-box video {
-webkit-border-radius: 0 0 40px 40px;
border-radius: 0 0 40px 40px;
}
/* control section */
.control-section .container {
padding: 330px 30px 80px;
}
.control-text__description p {
font-size: 18px;
line-height: 137%;
letter-spacing: 0.01em;
}
.control-text__description em {
font-size: 14px;
line-height: 140%;
}
.control-section__img picture img {
width: 100%;
height: 300px;
object-fit: cover;
}
/* approach section */
.approach-section {
padding: 40px 0;
}
.approach-section .container {
padding: 0;
}
.approach-section__content-block {
margin-top: 30px;
}
.approach-box__img-header img {
width: 30px;
height: 30px;
}
.approach-box__img-header p {
font-size: 14px;
line-height: 140%;
}
.approach-block__box {
padding: 30px;
}
.approach-block__box:nth-child(1) {
padding-bottom: 60px;
}
.approach-block__box:nth-child(2) {
margin-top: -30px;
}
.approach-box__more-btn {
margin-top: 20px;
display: block;
font-weight: 500;
}
.approach-block__box h3 {
font-weight: 500;
font-size: 18px;
line-height: 137%;
letter-spacing: 0.01em;
color: #202020;
}
.approach-box__text {
position: relative;
overflow: hidden;
height: 40px;
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-ms-transition: 0.7s;
-o-transition: 0.7s;
transition: 0.7s;
}
.approach-box__text:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: -30px;
width: 100vw;
height: 40px;
background: linear-gradient(180deg, rgba(233, 245, 238, 0) 0%, #E9F5EE 100%);
-webkit-transition: 1.2s;
-moz-transition: 1.2s;
-ms-transition: 1.2s;
-o-transition: 1.2s;
transition: 1.2s;
}
.approach-block__box.red .approach-box__text:after {
background: linear-gradient(180deg, rgba(253, 244, 244, 0) 0%, #FDF4F4 100%);
}
.approach-box__text.active:after {
opacity: 0;
pointer-events: none;
}
.approach-section__btn {
margin-top: 30px;
padding: 0 15px;
margin-right: 30px;
margin-left: 30px;
}
.approach-section + .eighth-section {
padding: 40px 0 80px;
}
.approach-section + .eighth-section .heading + .image {
margin-top: 30px;
}
/* how-do section */
.how-do-section {
padding: 40px 0;
}
.how-do-section__content-block {
margin-top: 40px;
}
.how-do-block__content-box {
margin-bottom: 60px;
flex-direction: column;
}
.how-do-block__content-box:nth-child(even) {
flex-direction: column;
}
.how-do-box__img-box {
width: 100%;
margin-bottom: 15px;
}
.how-do-box__text-box {
width: 100%;
max-width: none;
margin-top: 0;
}
.how-do-box__text-box h1,
.how-do-box__text-box h2,
.how-do-box__text-box h3,
.how-do-box__text-box h4,
.how-do-box__text-box h5,
.how-do-box__text-box h6 {
font-size: 18px;
line-height: 137%;
letter-spacing: 0.01em;
}
.how-do-box__text-box p {
margin-top: 5px;
font-size: 14px;
line-height: 140%;
}
.how-do-text-box__logo-box {
margin-top: 20px;
}
.how-do-text-box__logo {
height: 25px;
margin-right: 25px;
}
/* info section */
.info-section .container {
padding: 40px 30px 80px;
}
.info-section__form-container {
padding: 330px 30px 80px;
}
.info-section__main-container .h1 {
text-align: center;
}
.info-section__info-block {
margin-top: 30px;
}
.info-section__info-box {
margin-bottom: 40px;
max-width: 100%;
}
.info-section__info-box:nth-last-child(-n+2) {
margin-bottom: 40px;
}
.info-section__info-box:last-child {
margin-bottom: 0;
}
.info-section__img {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.info-section__text h1,
.info-section__text h2,
.info-section__text h3,
.info-section__text h4,
.info-section__text h5,
.info-section__text h6 {
font-size: 18px;
line-height: 137%;
letter-spacing: 0.01em;
}
.info-section__text p {
margin-top: 5px;
font-size: 14px;
line-height: 140%;
}
.info-form__form {
margin-top: 40px;
}
.info-form__text-block .h2 {
font-size: 18px;
line-height: 137%;
}
.info-form__header-description {
margin-top: 20px;
}
.info-form__form .info-form__btn input[type="submit"] {
padding: 0 15px;
min-width: auto;
}
/* features section */
.features-section {
padding: 40px 0 80px;
}
.features-section__content-block {
margin-top: 30px;
}
.features-content__box {
flex-direction: column;
align-items: flex-start;
margin-bottom: 30px;
max-width: 46%;
flex-grow: 1;
}
.features-content__box:nth-child(odd) {
margin-right: 25px;
}
.features-content__img {
width: 30px;
height: 30px;
margin-right: 0;
margin-bottom: 5px;
}
.features-content__box p {
font-size: 14px;
line-height: 140%;
}
.features-content__box p br {
display: none;
}
.features-content__description {
margin-bottom: 30px;
}
.features-content__description br {
display: none;
}
.features-content__btn {
padding: 0 15px;
}
/* video section */
.video-section {
padding: 0 0 80px;
}
.video-section .container {
padding-right: 0;
padding-left: 0;
}
.video-section__text-block {
max-width: 100%;
padding-right: 30px;
padding-left: 30px;
}
.video-section__text-block .h2 img {
width: 15px;
height: auto;
}
.video-section__video-block {
max-height: 260px;
margin-bottom: 30px;
}
.video-poster__btn {
justify-content: flex-start;
bottom: 20px;
left: 30px;
}
.video-poster__btn img,
.video-poster__btn svg {
width: 60px;
height: 60px;
}
.video-section__text-block .h2 {
font-weight: 500;
font-size: 18px;
line-height: 137%;
letter-spacing: 0.01em;
}
.video-text__box {
margin-top: 20px;
}
.video-text__box strong {
font-weight: normal;
font-size: 18px;
line-height: 137%;
}
.video-text__box p {
font-size: 14px;
line-height: 140%;
}
.video-section__btn {
margin-top: 30px;
}
.video-section__btn p:before {
margin-right: 15px;
}
.pop-up-video .pop-up-content {
height: 300px;
}
.pop-up-video .pop-up-content video, .pop-up-video .pop-up-content iframe {
object-fit: none;
}
/* questions section */
.questions-section {
padding: 40px 0 80px;
}
.questions-section .container {
padding: 0 30px;
}
.questions-section__block {
margin-top: 30px;
}
.questions-box__question {
padding: 20px;
min-height: 60px;
}
.questions-box__question p {
max-width: 77%;
font-weight: normal;
}
.questions-box__lines {
width: 10px;
height: 10px;
}
.questions-line {
width: 10px;
height: 2px;
}
.questions-box__answer {
padding: 20px;
max-width: 100%;
}
.questions-box__answer p {
margin-top: -25px;
}
.questions-block__btn {
padding: 0 15px;
}
/* slider section */
.slider-section {
padding: 40px 0 80px;
}
.slider-section .container:before {
display: none;
}
.slider-section .container:after {
left: 0;
width: 30px;
}
.slide-content {
flex-direction: column-reverse;
justify-content: flex-end;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.slider .slick-slide {
max-width: 255px;
margin: 0 15px;
}
.slide:before {
left: 25px;
}
.slide__left-box {
padding: 15px;
flex-grow: 1;
}
.slide__text p {
font-size: 14px;
line-height: 140%;
}
.slide__social {
margin-top: 5px;
}
.slide__social:before {
width: 15px;
height: 15px;
margin-right: 8px;
}
.slide__img-box {
height: 145px;
margin: 0;
}
.slide__img-box:nth-child(2) {
display: none;
}
.dot__user,
.slider__dots-number {
width: 60px;
height: 60px;
}
.slider__dots-number {
-webkit-transform: translateX(180px);
transform: translateX(180px);
}
.slider__btns {
display: flex;
align-items: flex-start;
flex-direction: column;
}
.dots-slider {
max-width: 275px;
}
.dots-slider .slick-current .dots-slide {
-webkit-transform: translateX(-90px);
transform: translateX(-90px);
}
.dots-slider .slick-current + .slick-slide .dots-slide {
-webkit-transform: translateX(-110px);
transform: translateX(-110px);
}
.dots-slider .slick-current + .slick-slide + .slick-slide .dots-slide {
-webkit-transform: translateX(-130px);
transform: translateX(-130px);
}
.dots-slider .slick-current + .slick-slide + .slick-slide + .slick-slide .dots-slide {
-webkit-transform: translateX(-150px);
transform: translateX(-150px);
}
.dots-slider .slick-current + .slick-slide + .slick-slide + .slick-slide + .slick-slide .dots-slide {
-webkit-transform: translateX(-170px);
transform: translateX(-170px);
}
.slider__arrows-block {
display: none;
}
/* form section */
.left-form-section .form-section__form-container {
padding: 330px 30px 80px;
}
.form-section .info-form__form {
margin-top: 40px;
}
/* footer */
.footer {
padding-top: 35px;
padding-bottom: 40px;
}
.footer a.mob {
display: none;
}
.footer__top-block .body-regular {
font-size: 18px;
line-height: 137%;
}
.footer-top__left-block {
margin-top: 20px;
order: 2;
}
.footer-link__img {
margin-right: 8px;
}
.footer-top__right-block {
margin-top: 0;
flex-direction: column;
align-items: flex-start;
order: 1;
}
.footer-top-right__link {
margin-left: 0;
margin-top: 20px;
}
.footer-top-right__link p {
font-weight: normal;
}
.footer-top-right__link:first-child {
margin-top: 0;
}
.footer-top__mob-block {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 20px;
order: 3;
}
.footer-top__mob-block a {
font-size: 18px;
line-height: 137%;
}
.footer__bot-block {
margin-top: 40px;
flex-direction: column;
align-items: flex-start;
}
.footer__bot-block p {
margin-bottom: 20px;
}
.footer__bot-block p:last-child {
margin-bottom: 0;
}
/* pop-up */
.pop-up-content {
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
padding: 30px;
}
.pop-up-content__btn.input input[type="submit"] {
padding: 0 15px;
width: 100%;
min-width: auto;
}
.pop-up-content form {
margin-top: 30px;
}
.pop-up-thanks .pop-up-content {
padding: 30px;
}
.pop-up-content__img-block {
margin-top: 60px;
flex-direction: column;
}
.pop-up-content__img {
margin: 0;
}
.pop-up-content .checkbox .wpcf7-list-item-label,
.pop-up-content .checkbox .wpcf7-list-item-label a {
font-size: 16px;
}
.pop-up-thanks .pop-up-content__btn {
padding: 0 15px;
width: 100%;
}
.close-pop-up {
top: -40px;
right: 30px;
}
.main-section__header img {
max-width: 20px;
max-height: 20px;
}
.pop-up-content__description {
font-size: 18px;
line-height: 137%;
}
.amount .subtitle {
font-size: 14px;
}
}