@charset "UTF-8";

/* == CSS Framework "Dipra 9" by German Bodunov (v 1.0 - 27.02.2023) == */
html {scroll-behavior: smooth;}
body {margin: 0; padding: 0; font: 300 14px/20px 'Noto Sans Display', sans-serif;}

/*``````````````Text``````````````````````````*/
h1 {font: 600 52px/64px 'Montserrat', sans-serif;}
h2 {font: 600 32px/40px 'Montserrat', sans-serif; text-align: center;}
h3 {font: 600 20px/26px 'Montserrat', sans-serif;}
p {font: 300 14px/20px 'Noto Sans Display', sans-serif;}
a {font: 300 14px/20px 'Noto Sans Display', sans-serif;}
ul {padding: 0; list-style-type: none;}
li {font: 300 14px/24px 'Noto Sans Display', sans-serif;}
span {font: 300 14px/20px 'Noto Sans Display', sans-serif;}
button {/*background: #280b25;*/ background: #ff0076; box-shadow: white 5px 5px; text-transform: uppercase; color: white; border: none; width: 460px; height: 60px; display: grid; place-content: center; padding-bottom: 5px; border-radius: 30px; font: 600 20px/20px 'Noto Sans Display', sans-serif; transition: all 0.3s ease; animation: actn-button 10s infinite ease-in-out;}
button:hover {transform: scale(1.03); background: #6f1f67; will-change: auto; animation-play-state: paused;}
details {background: white; margin-bottom: 15px; padding: 15px 40px; border-radius: 25px;}
summary {font: 600 18px/24px 'Montserrat', sans-serif; cursor: pointer;}
details p {font: 300 16px/24px 'Noto Sans Display', sans-serif;}
/*----Custom Text-----*/
.screen_area.first_screen p {font: 300 20px/26px 'Noto Sans Display', sans-serif; max-width: 510px;}

/*```````````Main Blocks``````````````````````*/
header {height: 120px; width: 1200px; padding: 0 calc((100% - 1200px) / 2); display: flex; align-items: center; position: fixed; top: 60px; left: 0; z-index: 100; transition: all 0.3s ease;}
.logotype {width: 120px; transition: all 0.3s ease;}
.logotype a {display: flex; width: 100%; height: 100%;}
.logotype img {width: 100%;}
.left_head {margin-left: 60px; width: 100%;}
.kont {display: flex; align-items: center; color: slategray;}
.kont a.phone {padding-right: 20px; margin: 0 20px 0 0; border-right: 2px solid black; font: 400 18px/18px 'Noto Sans Display', sans-serif;}
.kont p.email {font: 400 16px/16px 'Noto Sans Display', sans-serif; padding-right: 20px; margin: 0 20px 0 0; border-right: 2px solid black;}
.kont a {color: slategray; text-decoration: none;}
.messengers {width: 65px; display: flex; justify-content: space-between; align-items}
.messengers a {display: flex;}
.messengers img {width: 25px;}
nav.menu {margin-top: 15px;}
nav.menu a {font: 600 18px/18px 'Montserrat', sans-serif; text-decoration: none; color: black; margin-right: 20px; transition: all 0.1s ease; background: black url(/images/grdnt.jpg) no-repeat; background-position: left, left; background-size: 0 100%, 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
nav.menu a:hover {background-size: 100% 100%, 100%;}
header.head_small {height: 45px; top: 0; background: hsl(0 0% 99% / 1); border-bottom: 2px solid; border-image: linear-gradient(to right, transparent 25%, #7fc2e6, #e06dd5) 2;}
header.head_small .logotype {width: 50px;}
header.head_small .left_head {display: flex; justify-content: space-between;}
header.head_small .left_head nav.menu {margin-top: 0; order: 1;}
header.head_small .left_head .kont {order: 2;}
header.head_small nav.menu a {font: 600 14px/14px 'Montserrat', sans-serif;}
footer {width: 100%;}
.foot_top {background: linear-gradient(160deg, hsl(201 68% 97% / 1) 70%, hsl(307 68% 97% / 1)); width: 1200px; padding: 40px calc((100% - 1200px) / 2); height: 45vh; display: flex; justify-content: space-between; align-items: center;}
.foot_left {display: flex; align-items: center;}
.foot_left p {font: 600 22px / 40px "Noto Sans Display", sans-serif;}
.logofoot {width: 160px; margin-right: 50px;}
.logofoot img {outline: 10px solid white;}
.foot_right {color: dimgray; text-align: right;}
a.foot_phone {font: 700 28px/34px 'Montserrat', sans-serif; margin: 0; text-decoration: none; color: black;}
p.foot_mail {font: 600 18px/22px 'Montserrat', sans-serif;}
.foot_bottom {width: 1200px; padding: 10px calc((100% - 1200px) / 2); height: 60px; display: flex; justify-content: space-between; align-items: center; color: white; background: #150414;}
.foot_bottom p {font: 400 14px/20px 'Noto Sans Display', sans-serif; margin: 0;}
.create {text-align: center; display: flex; align-items: center;}
.create p {font: 400 12px/20px 'Noto Sans Display', sans-serif; margin-right: 10px;}
.create img {width: 60px;}
.screen_area {width: 100%; height: auto; display: flex; justify-content: center; align-items: center;}
.content_area {width: 1200px; min-height: 450px; height: auto;}

/*```````````Articles`````````````````````````*/
.screen_area.first_screen {height: 75vh; align-items: flex-end; position: relative; margin-bottom: 5vh;}
.screen_area.first_screen .content_area {padding: 40px 0; z-index: 1;}
.screen_area.first_screen button {margin-top: 8vh;}
.promo_block {background: url(/images/first_back.png) no-repeat; background-position: bottom center; position: absolute; top: 0; right: calc((100% - 1200px) / 2 - 10vw); height: 100%; width: 800px;}
.prblock {display: grid; place-content: center; background: linear-gradient(45deg, #eaf5fb, #f8ecf9); width: 90px; height: 90px; border-radius: 45px; font: 600 36px/36px 'Noto Sans Display', sans-serif; position: absolute; transition: translate 0.3s linear;}
.prmess-1 {top: 32vh; left: 95px; animation: anm-mess-1 6s infinite ease-in-out;}
.prmess-2 {top: 22vh; left: 640px; animation: anm-mess-2 6.5s infinite ease-in-out; animation-delay: 0.5s;}
.prmess-3 {top: 55vh; left: 655px; animation: anm-mess-3 5.5s infinite ease-in-out; animation-delay: 0.7s;}
.promo_line {height: 20vh; background: url(/images/logo_button.png) no-repeat, linear-gradient(160deg, hsl(201 68% 97% / 1) 70%, hsl(307 68% 97% / 1)); background-size: auto 120%; background-position: right center; width: 1200px; padding: 0 calc((100% - 1200px) / 2); display: flex; justify-content: space-between; align-items: center;}
.prline {height: 45px;}
.prline img {height: 100%;}
.prline p {text-align: center; font: 400 14px/20px 'Noto Sans Display', sans-serif; margin: 0;}
.animback { background: linear-gradient(140deg, hsl(305 65% 90% / 1), hsl(290 53% 90% / 1), hsl(234 51% 90% / 1), hsl(201 67% 90% / 1)); background-size: 200% 100%; animation: animgradient 10s ease infinite;}
.content_area.preim {display: flex; justify-content: space-between; align-items: center; margin: 100px 0;}
.preim_column {width: 28%;}
.preim_column:nth-child(2) {width: 35%;}
.preim_img {position: relative; width: 100%; height: 360px; display: flex; justify-content: center; align-items: center; margin: 40px 0;}
.preim_img img {position: absolute;}
.preim_img img:nth-child(2) {width: 150px; height: 150px; transform: translate(-90px, -70px);}
.preim_img img:nth-child(3) {width: 170px; height: 170px; transform: translate(90px, -100px);}
.preim_img img:nth-child(4) {width: 160px; height: 160px; transform: translate(-75px, 105px);}
.preim_img img:nth-child(5) {width: 140px; height: 140px; transform: translate(95px, 70px);}
.preim_zag {text-align: center;}
.preim_zag p {font: 800 22px/28px 'Montserrat', sans-serif;}
.preim_zag mark {background: url(/images/grdnt.jpg) no-repeat; background-position: left, left; background-size: 100% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 32px;}
.preim_cont {display: flex; justify-content: center; align-items: center; padding: 10px 30px; width: calc(100% - 60px); text-align: center; border-radius: 20px; box-shadow: #bcdff2 4px 4px 0 4px; margin: 30px 0;}
.preim_cont p {font: 400 20px/26px 'Noto Sans Display', sans-serif;}
.screen_area.animback {padding: 60px 0;}
.screen_area.animback h2 {color: white;}
.program {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 100px; position: relative;}
.program.progtable-1:before {content: "ДОШКОЛЬНИКАМ"; position: absolute; font: 900 120px/90px 'Montserrat', sans-serif; text-align: center; color: white; opacity: 0.2; top: -85px; z-index: 1;}
.program.progtable-2:before {content: "ШКОЛЬНИКАМ"; position: absolute; font: 900 145px/105px 'Montserrat', sans-serif; text-align: center; color: white; opacity: 0.2; top: -90px; z-index: 1;}
.program.progtable-3:before {content: "ВЗРОСЛЫМ"; position: absolute; font: 900 185px/135px 'Montserrat', sans-serif; text-align: center; color: white; opacity: 0.2; top: -105px; z-index: 1;}
.prog {background: white; border-radius: 25px; margin-bottom: 20px; padding: 15px 30px; z-index: 2;}
.program.progtable-1 .prog {width: 530px;}
.program.progtable-2 .prog:nth-child(1) {width: 225px;}
.program.progtable-2 .prog:nth-child(2) {width: 225px;}
.program.progtable-2 .prog:nth-child(3) {width: 225px;}
.program.progtable-2 .prog:nth-child(4) {width: 225px;}
.program.progtable-2 .prog:nth-child(5) {width: 290px;}
.program.progtable-2 .prog:nth-child(6) {width: 290px;}
.program.progtable-2 .prog:nth-child(7) {width: 400px;}
.program.progtable-2 .prog:nth-child(8) {width: 530px;}
.program.progtable-2 .prog:nth-child(9) {width: 530px;}
.program.progtable-3 .prog:nth-child(1) {width: 290px;}
.program.progtable-3 .prog:nth-child(2) {width: 290px;}
.program.progtable-3 .prog:nth-child(3) {width: 400px;}
.prog_tag {border-radius: 8px; color: white; width: fit-content; padding: 1px 8px 4px 8px; font: 500 13px / 16px 'Noto Sans Display', sans-serif;}
.ptag-1 {background: #33d4ff;}
.ptag-2 {background: #ff33a9;}
.ptag-3 {background: #9f50e2;}
.razline {width: 100px; height: 2px; background: lightgray;}
.prog_cont {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end;}
.program.progtable-1 .prog ul {width: 50%;}
p.prog_price {margin: 0; font: 500 14px / 26px 'Noto Sans Display', sans-serif; width: 100%; text-align: right;}
p.prog_price b {font: 600 20px/20px 'Montserrat', sans-serif; color: limegreen;}
.program.progtable-2 .prog:nth-child(8) h3 {font: 700 26px/26px 'Montserrat', sans-serif;}
.program.progtable-2 .prog:nth-child(9) h3 {font: 700 26px/26px 'Montserrat', sans-serif;}
.program.progtable-3 .prog:nth-child(3) h3 {font: 700 24px/26px 'Montserrat', sans-serif;}
.screen_area.screen_8 {padding: 100px 0;}
.content_area.otzivy {display: flex; flex-wrap: wrap; justify-content: space-between;}
.content_area.otzivy h2 {width: 100%;}
.otziv {padding: 15px 30px; width: calc(380px - 60px); border-radius: 20px; outline: 4px solid black; margin-bottom: 30px; box-shadow: #57afde 12px 12px;}
.otziv_head {display: flex; align-items: center;}
.otziv_head img {margin-right: 20px;}
.otziv_name h4 {font: 600 18px/18px 'Montserrat', sans-serif; margin: 0;}
.otziv_name p {margin: 5px 0 0 0; font-weight: 500;}
.screen_area.screen_9 {padding: 100px 0;}

/*```````````Modules``````````````````````````*/
.callback_left {height: 600px; padding: 0 0 0 calc((100% - 1200px) / 2); width: 600px; background: url(/images/logo_back.svg) no-repeat; background-size: 90%; background-position-y: center; display: flex; align-items: center;}
.callback_left b {font-family: 'Montserrat', sans-serif; font-weight: 900;}
b.c_zag_b-1 {font-size: 74px; line-height: 65px;}
b.c_zag_b-2 {font-size: 54px; line-height: 78px;}
b.c_zag_b-3 {font-size: 50px; line-height: 46px;}
b.c_zag_b-4 {font-size: 88px; line-height: 93px;}
b.c_zag_b-5 {font-size: 46px; line-height: 54px;}
.callback_right {height: 600px; padding: 0 calc((100% - 1200px) / 2) 0 0; width: 600px; background: linear-gradient(135deg, #db57cc, #82b9e3); border-radius: 160px 0 0 160px; display: flex; justify-content: center; align-items: center;}
.callback_conts {width: 70%;}
.callback_conts h3 {color: white; font: 600 20px/32px 'Montserrat', sans-serif;}
a.phone_callback {font: 600 45px / 45px Montserrat, sans-serif; display: block; margin: 40px 0; color: white; text-decoration: none;}
a.mess_button {display: flex; width: 100%; justify-content: center; align-items: center; margin: 20px 0; border-radius: 30px; text-decoration: none; color: white; box-shadow: white 5px 5px; transition: all 0.2s ease;}
a.mess_button:hover {transform: translate(5px, 5px); box-shadow: white 0 0; filter: brightness(0.95);}
a.mess_button.telega {background: #2998d4;}
a.mess_button.whatspp {background: #00ce46;}
a.mess_button img {width: 35px; margin-right: 20px;}
a.mess_button p {font: 500 18px/18px 'Montserrat', sans-serif;}
.callback_right form {display: flex; flex-direction: column; justify-content: space-between; height: 60%;}
.callback_right form input {height: 50px; border-radius: 15px; border: none; padding-left: 20px; font: 500 20px/20px 'Noto Sans Display', sans-serif;}
button.callback-button {margin-top: 25px;}
.moduletable.pop {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 101; display: flex; justify-content: center; align-items: center; background: #0000009e; transition: all 0.2s ease; transform: translateX(100vw); opacity: 0;}
.moduletable.pop.vipad {transform: translateX(0); opacity: 1;}
div#mod-custom111 {height: 600px; padding: 20px; width: 600px; background: linear-gradient(135deg, #db57cc, #82b9e3); border-radius: 100px; display: flex; justify-content: center; align-items: center;}
form.pop_callback {display: flex; flex-direction: column; justify-content: space-between; height: 60%;}
form.pop_callback input {height: 50px; border-radius: 15px; border: none; padding-left: 20px; font: 500 20px/20px 'Noto Sans Display', sans-serif;}
form.pop_callback button.pop_callback-button {margin-top: 25px;}

/*```````````Modificators`````````````````````*/
.flex_row {display: flex; flex-direction: row;}
.flex_column {display: flex; flex-direction: column;}
.gray_back {background: #f7f7f7;}

/*````````````Graphics```````````````````````````*/
.back_img-1 {background: url(/images/img.jpg) no-repeat; background-size: cover;}

/*````````````Animations`````````````````````````*/
@keyframes anm-mess-1 {
	from {transform: translate(0, 0) rotate(10deg);}
	50% {transform: translate(-35px, 45px) rotate(-20deg);}
	to {transform: translate(0, 0) rotate(10deg);}
}
@keyframes anm-mess-2 {
	from {transform: translate(0, 0) rotate(-20deg);}
	50% {transform: translate(25px, 45px) rotate(10deg);}
	to {transform: translate(0, 0) rotate(-20deg);}
}
@keyframes anm-mess-3 {
	from {transform: translate(0, 0) rotate(10deg);}
	50% {transform: translate(5px, -45px) rotate(-10deg);}
	to {transform: translate(0, 0) rotate(10deg);}
}

@keyframes animgradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

@keyframes actn-button {
	from {transform: rotate(0deg);}
	37% {transform: rotate(0deg);}
	40% {transform: rotate(-1deg);}
	43% {transform: rotate(1deg);}
	46% {transform: rotate(-2deg);}
	48% {transform: rotate(2deg);}
	50% {transform: rotate(-3deg);}
	51% {transform: rotate(3deg);}
	53% {transform: rotate(-2deg);}
	55% {transform: rotate(2deg);}
	58% {transform: rotate(-1deg);}
	61% {transform: rotate(1deg);}
	64% {transform: rotate(0deg);}
	to {transform: rotate(0deg);}
}

/*```````````Responsive`````````````````````````*/
@media only screen and (min-width : 320px) and (max-width : 1600px) and (orientation: portrait) {
  body {margin: 0; padding: 0; font: 300 3.2vw/4vw 'Noto Sans Display', sans-serif;}
  p {font: 300 2.6vw/4vw 'Noto Sans Display', sans-serif;}
  header {width: calc(100% - 20px); padding: 0 10px; height: 10vh; top: 0;}
  .logotype {width: 25vw;}
  .left_head {margin-left: 3vw;}
  .kont a.phone {font: 400 3.6vw/4vw 'Noto Sans Display', sans-serif; padding-right: 2vw; margin: 0 2vw 0 0; border-right: 1px solid black;}
  .kont p.email {font: 400 3.2vw/4vw 'Noto Sans Display', sans-serif; display: none;}
  .messengers {width: 10vw;}
  .messengers img {width: 4vw;}
  nav.menu a {font: 600 3vw/3vw 'Montserrat', sans-serif; margin-right: 2vw;}
  header.head_small {height: 5vh;}
  header.head_small .logotype {width: 10vw;}
  header.head_small .left_head {flex-direction: column-reverse;}
  header.head_small nav.menu a {font: 600 2.8vw/3vw 'Montserrat', sans-serif;}
  header.head_small .kont a.phone {font: 400 3.2vw/3.8vw 'Noto Sans Display', sans-serif;}
  header.head_small .kont p.email {font: 400 3vw/3.8vw 'Noto Sans Display', sans-serif;}
  .screen_area.first_screen {width: calc(100% - 20px); padding: 0 10px; height: 80vh; align-items: flex-start;}
  .screen_area.first_screen .content_area {height: 30vh; min-height: auto; margin-top: 50vh; padding: 0; text-align: center;}
  h1 {font: 600 6vw/7vw 'Montserrat', sans-serif;}
  .screen_area.first_screen p {font: 300 3.2vw / 4.2vw 'Noto Sans Display', sans-serif; max-width: 100%;}
  button {width: 80vw; height: 15vw; font: 600 3.8vw / 4.4vw 'Noto Sans Display', sans-serif; border-radius: 10vh;}
  .screen_area.first_screen button {margin: 2vh auto 0 auto;}
  .promo_block {width: 100%; height: 40vh; right: auto; top: 10vh; background-size: 80vw; background-position: center center;}
  .prblock {width: 10vw; height: 10vw; border-radius: 5vw; font: 600 4vw / 4vw 'Noto Sans Display', sans-serif;}
  .prblock.prmess-1 {left: 20vw; top: 25vw;}
  .prblock.prmess-2 {left: 75vw; top: 15vw;}
  .prblock.prmess-3 {left: 82vw; top: 60vw;}
  .promo_line {width: calc(100% - 20px); height: 10vh; padding: 1vh 10px; flex-wrap: wrap;}
  .prline {height: 6vw; max-width: 30vw;}
  .prline:last-child {max-width: 100%; width: 100%; height: fit-content;}
  .content_area {width: 100%;}
  .screen_area.animback {padding: 4vw 10px; width: calc(100% - 20px);}
  .program.progtable-1:before {font: 900 9.6vw/9.6vw 'Montserrat', sans-serif; top: -9vw;}
  .program.progtable-2:before {font: 900 11.5vw/11.5vw 'Montserrat', sans-serif; top: -10vw;}
  .program.progtable-3:before {font: 900 14.6vw/14.6vw 'Montserrat', sans-serif; top: -12vw;}
  .program.progtable-1 {margin-top: 15vw;}
  .program {margin-top: 15vw;}
  .prog {border-radius: 25px; margin-bottom: 3vw; padding: 4vw 3vw;}
  .program.progtable-1 .prog {width: calc(48% - 6vw);}
  .program.progtable-2 .prog:nth-child(1) {width: calc(48% - 6vw);}
  .program.progtable-2 .prog:nth-child(2) {width: calc(48% - 6vw);}
  .program.progtable-2 .prog:nth-child(3) {width: calc(48% - 6vw);}
  .program.progtable-2 .prog:nth-child(4) {width: calc(48% - 6vw);}
  .program.progtable-2 .prog:nth-child(5) {width: calc(48% - 6vw);}
  .program.progtable-2 .prog:nth-child(6) {width: calc(48% - 6vw);}
  .program.progtable-2 .prog:nth-child(7) {width: calc(100% - 6vw);}
  .program.progtable-2 .prog:nth-child(8) {width: calc(100% - 6vw);}
  .program.progtable-2 .prog:nth-child(9) {width: calc(100% - 6vw);}
  .program.progtable-3 .prog:nth-child(1) {width: calc(48% - 6vw);}
  .program.progtable-3 .prog:nth-child(2) {width: calc(48% - 6vw);}
  .program.progtable-3 .prog:nth-child(3) {width: calc(100% - 6vw);}
  .prog_tag {font: 500 2.3vw / 3.3vw 'Noto Sans Display', sans-serif;}
  .prog h3 {font: 600 3.2vw/4vw 'Montserrat', sans-serif; margin: 3vw 0;}
  .program.progtable-2 .prog:nth-child(8) h3 {font: 700 6vw/6vw 'Montserrat', sans-serif;}
  .program.progtable-2 .prog:nth-child(9) h3 {font: 700 6vw/6vw 'Montserrat', sans-serif;}
  .program.progtable-3 .prog:nth-child(3) h3 {font: 700 5vw/6vw 'Montserrat', sans-serif;}
  .program.progtable-1 .prog ul {width: 100%;}
  .prog li {font: 300 2.8vw/3.4vw 'Noto Sans Display', sans-serif;}
  p.prog_price {font: 600 1.8vw/3.4vw 'Noto Sans Display', sans-serif;}
  p.prog_price b {font: 600 3.3vw/3.8vw 'Montserrat', sans-serif;}
  .screen_area.screen_8 {padding: 5vw 20px; width: calc(100% - 40px);}
  .otziv {padding: 2vw 3vw; width: calc(100% - 6vw); box-shadow: #57afde 2.5vw 2.5vw; outline: 3px solid black; margin-bottom: 7vw;}
  .otziv_head img {width: 10vw; margin-right: 2vw;}
  .otziv_name h4 {font: 600 4vw/4vw 'Montserrat', sans-serif;}
  .screen_area.screen_9 {padding: 6vh 10px; width: calc(100% - 20px);}
  details {margin-bottom: 3vw; padding: 2vw 5vw; border-radius: 5vw;}
  summary {font: 600 3.2vw/4vw 'Montserrat', sans-serif;}
  details p {font: 300 2.8vw/4.2vw 'Noto Sans Display', sans-serif;}
  .screen_area.callback_screen {flex-direction: column;}
  b.c_zag_b-1 {font-size: 14.6vw; line-height: 15vw;}
  b.c_zag_b-2 {font-size: 10.6vw; line-height: 12vw;}
  b.c_zag_b-3 {font-size: 9.8vw; line-height: 13vw;}
  b.c_zag_b-4 {font-size: 17.3vw; line-height: 14vw;}
  b.c_zag_b-5 {font-size: 9vw; line-height: 11vw;}
  .screen_area.screen_1 {width: calc(100% - 20px); padding: 0 10px;}
  .content_area.preim {margin: 8vh 0; flex-direction: column;}
  .preim_column {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
  .preim_column:nth-child(2) {width: 100%; margin: 4vw 0;}
  .preim_cont {padding: 1vw 2vw; width: calc(48% - 4vw); margin: 2vw 0; box-shadow: #bcdff2 3px 3px 0 3px;}
  .preim_cont p {font: 400 3vw/3.4vw 'Noto Sans Display', sans-serif;}
  .preim_zag p {font: 800 4vw/4.6vw 'Montserrat', sans-serif;}
  .preim_zag mark {font-size: 6vw;}
  .preim_img {height: 25vh; margin: 1vw 0;}
  .preim_img img:nth-child(1) {width: 25vw;}
  .preim_img img:nth-child(2) {width: 20vw; height: 20vw; transform: translate(-13vw, -13vw);}
  .preim_img img:nth-child(3) {width: 26vw; height: 26vw; transform: translate(13vw, -14vw);}
  .preim_img img:nth-child(4) {width: 24vw; height: 24vw; transform: translate(-12vw, 11vw);}
  .preim_img img:nth-child(5) {width: 18vw; height: 18vw; transform: translate(12vw, 10vw);}
  h2 {font: 600 6vw/7vw 'Montserrat', sans-serif; text-align: center;}
  .callback_left {width: calc(100% - 20px); padding: 0 10px; height: 40vh; background-size: 100%;}
  .callback_right {width: calc(100% - 20px); padding: 0 10px; height: 40vh; border-radius: 100px 100px 0 0;}
  .callback_right form {width: 75%;}
  .callback_right form input {width: calc(100% - 3vw); font: 500 4vw/4vw 'Noto Sans Display', sans-serif; height: 8vw; padding-left: 3vw;}
  .callback_right button.callback-button {width: 100%;}
  .callback_conts {width: 90%;}
  .callback_conts h3 {font: 600 3vw/5vw 'Montserrat', sans-serif; text-align: center;}
  a.phone_callback {font: 700 5.2vw / 5.2vw Montserrat, sans-serif; margin: 3vh 0; text-align: center;}
  a.mess_button {margin: 2vh 0;}
  a.mess_button img {width: 6vw; margin-right: 2vw;}
  a.mess_button p {font: 500 3.3vw/5vw 'Montserrat', sans-serif;}
  .foot_top {width: calc(100% - 20px); padding: 40px 10px; flex-direction: column; height: 25vh;}
  .logofoot {width: 50%; margin-right: 10vw;}
  .logofoot img {width: 100%;}
  .foot_left {width: calc(100% - 10vw); padding: 0 5vw;}
  .foot_left p {font: 600 3.6vw / 4.4vw "Noto Sans Display", sans-serif;}
  .foot_left p br {display: none;}
  .foot_right {text-align: left; width: calc(100% - 10vw); padding: 0 5vw;}
  a.foot_phone {font: 700 7vw/7vw 'Montserrat', sans-serif;}
  p.foot_mail {font: 600 5vw/5vw 'Montserrat', sans-serif; margin: 3vw 0;}
  .foot_bottom {width: calc(100% - 20px); padding: 3vw 10px; flex-direction: column; height: 11vh; text-align: center;}
  .foot_bottom p {font: 400 2.4vw/4vw 'Noto Sans Display', sans-serif;}
  .create {margin-top: 2vw;}
  .create img {width: 12vw; margin-top: 1vw;}
  div#mod-custom111 {width: calc(80% - 10vw); padding: 5vw; border-radius: 15vw; height: 40vh;}
  form.pop_callback {width: 100%;}
  form.pop_callback input {height: 10vw; border-radius: 5vw; border: none; padding-left: 20px; font: 500 3.4vw / 4vw 'Noto Sans Display', sans-serif;}
  form.pop_callback button.pop_callback-button {margin-top: 5vw; width: 100%; height: 6vh;}
}

@media only screen and (min-width : 1449px) and (max-width : 1620px) and (orientation: landscape) {
/* стили */
}

@media only screen and (min-width : 1020px) and (max-width : 1448px) and (orientation: landscape) {
/* стили */
}

@media only screen and (min-width : 341px) and (max-width : 1019px) and (orientation: landscape) {
/* стили */
}