/*
	initial settings
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background-color: #f8f8f8;
    font-family: 'Montserrat', sans-serif;
    color: #3b3b3b;
    overflow: scroll;
}
a {
    color: #3b3b3b;
    text-decoration: none;
}
/* ul {
    list-style-type: none;
} */
.no_mobile {
	display: block;
}
.no_descktop {
	display: none;
}
*:focus {
    outline: 0;
    outline-offset: 0;
}
input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 50px #fff !important;
    -webkit-text-fill-color: #29272f !important;
    color: #29272f !important;
}
img {
    pointer-events: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    video {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }
}

ul, ol,
.for_case {
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 20px;
    line-height: 35px;
    /* list-style-type: disc; */
    margin-left: 50px;
    margin-bottom: 50px;
}

* {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/*
    order button
*/
.order_share {
    width: auto;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    right: calc(55px + (80 - 55) * ((100vw - 1300px) / (1920 - 1300)));
    bottom: 15px;
    z-index: 7;
    transition: 1000ms;
}
.order_share.active {
    display: none;
}
.order_share.new_bottom {
    bottom: 485px;
}
.share_button {
    margin-right: 35px;
    cursor: pointer;
}
.share_button img {
    width: 60px;
    height: 60px;
}
.order_button {
    width: calc(180px + (220 - 180) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(50px + (60 - 50) * ((100vw - 1300px) / (1920 - 1300)));
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #29272F;
    box-shadow: 0 0 5px rgba(255, 255, 255, .25);
    color: #ffffff;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    cursor: pointer;
    overflow: hidden;
    padding-bottom: 2px;
    border-radius: 40px;
    transition: 1000ms;
    position: relative;
}
.order_button:after {
    content: "";
    background: rgb(39,47,44);
    background: linear-gradient(180deg, rgba(39,47,44,0.2) 0%, rgba(241,247,245,0.6) 50%, rgba(244,247,246,0.6) 50%, rgba(39,47,44,0.2) 100%);
    position: absolute;
    top: 0;
    left: -95px;
    width: 200px;
    height: 88px;
    transform: translateX(-100px) rotate(134deg);
    animation: flash_button 5s .2s infinite;
}
.order_button:hover:after {
    animation: flash_button_hover 2s 0s infinite;
}
@keyframes flash_button {
    0% {
        left: -100px;
    }
    50%,
    100% {
        left: 150%;
    }
}
@keyframes flash_button_hover {
    0% {
        left: -100px;
    }
    100% {
        left: 150%;
    }
}

/*
	header
*/

.out {
    transform: translateY(-150%);
}
.in {
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25);
}
.header {
    display: flex;
    justify-content: center;
    padding: 0 calc(40px + (60 - 40) * ((100vw - 1300px) / (1920 - 1300)));
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: 500ms;
    z-index: 50;
    background-color: #f8f8f8;
}
.header__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(98px + (116 - 98) * ((100vw - 1300px) / (1920 - 1300)));
    width: 100%;
    max-width: 1920px;
}
.header__logo_phone {
    width: 85%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 1000ms;
}
.header__logo_phone.active {
    width: calc(626px + (1088 - 626) * ((100vw - 1300px) / (1920 - 1300)));
}
.header__logo {
    width: calc(78px + (96 - 78) * ((100vw - 1300px) / (1920 - 1300)));
}
.header__logo img {
    width: calc(51px + (63 - 51) * ((100vw - 1300px) / (1920 - 1300)));
    height: auto;
}
.header__phone {
    font-weight: 600;
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    white-space: nowrap;
    transition: 1000ms;
}
.header__phone.active {
    margin-top: 0;
    margin-right: calc(3px + (69 - 3) * ((100vw - 1300px) / (1920 - 1300)));
}
/* внешний контейнер бургера */
.header__burger {
    z-index: 3;
    cursor: pointer;
    width: calc(56px + (68 - 56) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(56px + (68 - 56) * ((100vw - 1300px) / (1920 - 1300)));
    /* border: 2px solid #dcdcdc; */
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* внешний контейнер бургера после нажатия на него */
.header__burger.active {
    border: 0;
    padding-top: 13px;
    padding-right: 2px;
    position: fixed;
    top: calc(22px + (24 - 22) * ((100vw - 1300px) / (1920 - 1300)));
    right: calc(40px + (60 - 40) * ((100vw - 1300px) / (1920 - 1300)));
    background-color: unset;
}
.header__burger:hover {
    /* border: 1px solid #29272F; */
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.25);
}
.header__burger.active:hover {
    border: 1px solid #ffffff;
    border-radius: 50%;
}
/* линии бургера */
.header__burger_lines {
    width: calc(34px + (41 - 34) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    position: relative;
}
.header__burger_lines:before {
    content: "";
    position: absolute;
    top: 0px;
    width: calc(34px + (41 - 34) * ((100vw - 1300px) / (1920 - 1300)));
    border-top: calc(5px + (6 - 5) * ((100vw - 1300px) / (1920 - 1300))) solid #29272f;
    transition: 1000ms;
}
.header__burger_lines:after {
    content: "";
    position: absolute;
    top: 14px;
    left: 4px;
    width: calc(28px + (35 - 28) * ((100vw - 1300px) / (1920 - 1300)));
    border-bottom: calc(5px + (6 - 5) * ((100vw - 1300px) / (1920 - 1300))) solid #29272f;
    transition: 1000ms;
}
/* поведение линий бургера при наведении мыши после нажатия */
.header__burger:hover .header__burger_lines.active:before {
    width: calc(34px + (41 - 34) * ((100vw - 1300px) / (1920 - 1300)));
    left: 0;
}
.header__burger:hover .header__burger_lines.active:after {
    width: calc(34px + (41 - 34) * ((100vw - 1300px) / (1920 - 1300)));
    left: 1px;
}
/* линии бургера после нажатия */
.header__burger_lines.active:before {
    width: calc(34px + (41 - 34) * ((100vw - 1300px) / (1920 - 1300)));
    transform: rotate(45deg);
    border-top-color: #ffffff;
    top: 0;
}
.header__burger_lines.active:after {
    width: calc(34px + (41 - 34) * ((100vw - 1300px) / (1920 - 1300)));
    transform: rotate(-45deg);
    border-bottom-color: #ffffff;
    top: 0;
    left: 1px;
}
.header__menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: calc(594px + (780 - 594) * ((100vw - 1300px) / (1920 - 1300)));
    height: 100%;
    overflow: auto;
    background-color: #29272f;
    padding-top: calc(92px + (110 - 92) * ((100vw - 1300px) / (1920 - 1300)));
    transition: 1000ms;
    text-align: left;
    z-index: 2;
    color: #f5f4f5;
}
.header__menu.active {
    right: 0;
    z-index: 1;
}
.header__menu_body {
    padding-left: calc(54px + (90 - 54) * ((100vw - 1300px) / (1920 - 1300)));
    padding-right: calc(40px + (60 - 40) * ((100vw - 1300px) / (1920 - 1300)));
}
.header__menu_menu {
    display: flex;
    justify-content: start;
    margin-bottom: calc(33px + (50 - 33) * ((100vw - 1300px) / (1920 - 1300)));
}
.menu_left,
.menu_right {
    width: calc(220px + (290 - 220) * ((100vw - 1300px) / (1920 - 1300)));
}
.menu_left {
    margin-right: 60px;
}
.menu_left_list li,
.menu_right_list li {
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid #78777e;
    transition: 1000ms;
}
.menu_left_list li:hover,
.menu_right_list li:hover {
    border-bottom: 1px solid #f4f5f4;
}
.menu_link {
    display: block;
    color: inherit;
}
.menu_features_list li {
    font-weight: 600;
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(20px + (40 - 20) * ((100vw - 1300px) / (1920 - 1300)));
}
#menu_order_design,
#menu_contacts {
    cursor: pointer;
}
.header__menu_order {
    width: calc(500px + (630 - 500) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: 150px;
}
/* .header__menu_order, */
.header__menu_contacts {
    display: none;
}
.header__menu_order.active,
.header__menu_contacts.active {
    display: block;
}
.header__menu_order,
.header__menu_contacts,
.header__menu_order a,
.header__menu_contacts a {
    color: #ffffff!important;
    font-weight: 400;
}
.header__menu_order_text h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 20px;
}
.header__menu_order_text p {
    font-weight: 400;
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: 13px;
    color: #ffffff
}
.header__menu_order_text p:last-child {
    margin-bottom: 0;
}
.header__menu_order .header__menu_order_phone {
    margin-top: 40px;
}
.header__menu_order_phone {
    font-weight: 600;
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    letter-spacing: 0.01em;
    margin-bottom: calc(20px + (28 - 20) * ((100vw - 1300px) / (1920 - 1300)));
}
.header__menu_order_socials {
    display: flex;
    width: calc(428px + (499 - 428) * ((100vw - 1300px) / (1920 - 1300)));
    font-weight: 400;
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (35 - 30) * ((100vw - 1300px) / (1920 - 1300)));
}
.header__menu_order_socials_left {
    margin-right: 50px;
}
.header__menu_order p,
.header__menu_contacts p {
    padding-top: 3px;
}
.header__menu_order_socials_vk a,
.header__menu_order_socials_telegram a,
.header__menu_order_socials_whatsapp a,
.header__menu_order_socials_email a {
    display: flex;
}
.header__menu_order_socials_vk a:hover,
.header__menu_order_socials_telegram a:hover,
.header__menu_order_socials_whatsapp a:hover,
.header__menu_order_socials_email a:hover {
    text-decoration: underline;
}
.header__menu_order_socials_vk img,
.header__menu_order_socials_telegram img,
.header__menu_order_socials_whatsapp img,
.header__menu_order_socials_email img {
    width: calc(26px + (30 - 26) * ((100vw - 1300px) / (1920 - 1300)));
    height: auto;
    margin-right: 10px;
    margin-bottom: 25px;
}

/*
    main
*/

.content {
    display: flex;
    justify-content: center;
    padding: 0 calc(40px + (60 - 40) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(98px + (116 - 98) * ((100vw - 1300px) / (1920 - 1300)));
    width: 100%;
    transition: 1000ms;
}
.content__body {
    width: 100%;
    max-width: 1920px;
}
.content.active {
    width: calc(706px + (1140 - 706) * ((100vw - 1300px) / (1920 - 1300)));
}
.content__body_title {
    margin-top: 20px;
    margin-bottom: 30px;
    font-weight: 600;
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    letter-spacing: 1px;
}

.content__body_categories {
    max-width: 1920px;
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
    flex-wrap: nowrap;
    margin-bottom: 40px;
}
.content__body_categories.bottom {
    margin-bottom: calc(120px + (150 - 120) * ((100vw - 1300px) / (1920 - 1300)));
}
.content__body_categories::-webkit-scrollbar {
    display: none;
}
.content__body_categories li {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 2px solid #f5f4f5; */
    background-color: #ffffff;
    margin-right: 15px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    border-radius: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.content__body_categories li:first-child {
    margin-left: 4px;
}
.content__body_categories li.current-cat {
    border: 2px solid #78777e;
}
.content__body_categories li.empty {
    border: none;
    color: #f8f8f8;
    background-color: #f8f8f8;
}
.content__body_categories li:last-child {
    margin-right: 0;
}
.content__body_categories li a {
    color: #78777e;
    display: block;
    padding: 13px 25px 17px 25px;
    cursor: pointer;
}

@media (hover: hover) {
    .content__body_categories li:hover {
        /* border: 2px solid #78777e; */
        box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.25);
    }
    .content__body_categories li.empty:hover {
        border: none;
    }
}


/*.swiper {
    width: 100%;
    margin-bottom: 30px;
}
.swiper.bottom {
    margin-bottom: calc(120px + (150 - 120) * ((100vw - 1300px) / (1920 - 1300)));
}
.swiper-wrapper {
    margin-bottom: 10px;
}
.swiper-slide {
    display: flex!important;
    justify-content: center;
    align-items: center;
    /*flex: 1 1 auto;
    min-width: 0;
    width: fit-content!important;*/
    /*border: 2px solid #f5f4f5;
    background-color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}*/
/*.swiper-slide.swiper-slide-active {
    border: 2px solid #78777e;
}*/
/*.swiper-slide a {
    color: #78777e;
    display: block;
    /*padding: 13px 25px 17px 25px;*/
    /*padding: 13px 0 17px 0;
}
@media (hover: hover) {
    .swiper-slide:hover {
        border: 2px solid #78777e;
    }
}*/

/*
    single
*/

.content__body_single {
    margin-top: 20px;
    margin-bottom: calc(110px + (150 - 110) * ((100vw - 1300px) / (1920 - 1300)));
}
.content__body_single h2 {
    font-weight: 600;
    font-size: calc(35px + (50 - 35) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(45px + (65 - 45) * ((100vw - 1300px) / (1920 - 1300)));
    letter-spacing: 0.01em;
    margin-bottom: 50px;
}
.content__body_single.active h2 {
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    letter-spacing: 0;
    margin-bottom: 30px;
}
.content__body_single p {
    /* margin-bottom: calc(80px + (100 - 80) * ((100vw - 1300px) / (1920 - 1300))); */
    font-weight: 400;
    font-size: 20px;
    line-height: 35px;
    margin-bottom: 20px;
}
.content__body_single.active p {
    font-size: 16px;
    line-height: 30px;
}
.case_text {
    width: calc(1221px + (1260 - 1221) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(70px + (100 - 70) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(70px + (100 - 70) * ((100vw - 1300px) / (1920 - 1300)));
}
.case_text.active {
    width: calc(624px + (900 - 624) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(50px + (80 - 50) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(50px + (80 - 50) * ((100vw - 1300px) / (1920 - 1300)));
}

.double-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.wp-block-columns {
    gap: 0;
    margin-bottom: calc(13px + (20 - 13) * ((100vw - 1300px) / (1920 - 1300)));
}
.wp-block-columns.active {
    margin-bottom: calc(-6px + (12 - -6) * ((100vw - 1300px) / (1920 - 1300)));
}
.wp-block-column.left_column {
    margin-right: calc(28px + (36 - 28) * ((100vw - 1300px) / (1920 - 1300)));
}
.wp-block-column.left_column.active {
    margin-right: calc(10px + (28 - 10) * ((100vw - 1300px) / (1920 - 1300)));
}
.single {
    margin-bottom: calc(28px + (36 - 28) * ((100vw - 1300px) / (1920 - 1300)));
}
.single.active {
    margin-bottom: calc(10px + (28 - 10) * ((100vw - 1300px) / (1920 - 1300)));
}
.croped.active img {
    width: calc(626px + (1020 - 626) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(626px + (1020 - 626) * ((100vw - 1300px) / (1920 - 1300)));
    object-fit: cover;
}
.wp-block-video {
    position: relative;
}

.wp-block-video,
.wp-block-image {
    margin-bottom: 32px;
}

.wp-block-video video,
.wp-block-image img {
    border-radius: 15px;
    width: 100%;
}

.wp-block-video.active video,
.wp-block-image.active img {
    border-radius: 10px;
}
.soundoff {
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 1;
}
.soundoff img {
    width: calc(100px + (110 - 100) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(100px + (110 - 100) * ((100vw - 1300px) / (1920 - 1300)));
}
.soundoff.active img {
    width: 70px;
    height: 70px;
}

.more-items {
    margin-bottom: calc(120px + (150 - 120) * ((100vw - 1300px) / (1920 - 1300)));
}

.more_projects {
    font-weight: 600;
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    letter-spacing: 0.01em;
    margin-bottom: 50px;
}
.more_projects.active {
    margin-bottom: 30px;
}

/*
    anonce
*/

.anonce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(60px + (100 - 60) * ((100vw - 1300px) / (1920 - 1300)));
    transition: 1000ms;
}
.anonce.active {
    margin-top: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(50px + (80 - 50) * ((100vw - 1300px) / (1920 - 1300)));
}
.anonce__text {
    width: calc(650px + (918 - 650) * ((100vw - 1300px) / (1920 - 1300)));
    transition: 1000ms;
}
.anonce__text.active {
    width: calc(319px + (560 - 319) * ((100vw - 1300px) / (1920 - 1300)));
}
.anonce__text h2 {
    font-weight: 600;
    font-size: calc(35px + (50 - 35) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(45px + (65 - 45) * ((100vw - 1300px) / (1920 - 1300)));
    letter-spacing: 0.01em;
    margin-bottom: calc(15px + (30 - 15) * ((100vw - 1300px) / (1920 - 1300)));
}
.anonce__text.active h2 {
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    letter-spacing: 0;
    margin-bottom: calc(10px + (15 - 10) * ((100vw - 1300px) / (1920 - 1300)));
}
.anonce__text h2:last-child,
.anonce__text.active h2:last-child {
    margin-bottom: 0;
}
.anonce__video {
    width: calc(404px + (587 - 404) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(70px + (102 - 70) * ((100vw - 1300px) / (1920 - 1300)));
    transition: 1000ms;
}
.anonce__video.active {
    width: calc(270px + (420 - 270) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: 0;
}
.anonce__video video {
    width: calc(393px + (587 - 393) * ((100vw - 1300px) / (1920 - 1300)));
    height: auto;
}
.anonce__video.active video {
    width: calc(252px + (393 - 252) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(252px + (393 - 252) * ((100vw - 1300px) / (1920 - 1300)));
}
.anonce__add {
    width: calc(1221px + (1260 - 1221) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: 24px;
}
.anonce__add.active {
    width: calc(624px + (900 - 624) * ((100vw - 1300px) / (1920 - 1300)));
}
.anonce__add p {
    font-weight: 400;
    font-size: 20px;
    line-height: 35px;
    margin-bottom: 20px;
}
.anonce__add.active p {
    font-size: 16px;
    line-height: 30px;
}
.misc_field_1 {
    width: calc(1221px + (1260 - 1221) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: 24px;
}
.misc_field_1.active {
    width: calc(624px + (1020 - 624) * ((100vw - 1300px) / (1920 - 1300)));
}
.misc_field_1 h2 {
    font-weight: 600;
    font-size: calc(35px + (50 - 35) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(45px + (65 - 45) * ((100vw - 1300px) / (1920 - 1300)));
    letter-spacing: 0.01em;
    margin-bottom: calc(40px + (50 - 40) * ((100vw - 1300px) / (1920 - 1300)));
}
.misc_field_1.active h2 {
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    letter-spacing: 0;
    margin-bottom: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
}
.misc_field_1 p {
    font-weight: 400;
    font-size: 20px;
    line-height: 35px;
    margin-bottom: 20px;
}
.misc_field_1.active p {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 15px;
}
.misc_field_1 p:last-child,
.misc_field_1.active p:last-child {
    margin-bottom: 0;
}
.to_about_page {
    text-decoration: underline;
}
.read_more {
    display: none;
}

/*
    about
*/

.about {
    transition: 1000ms;
    width: calc(1221px + (1260 - 1221) * ((100vw - 1300px) / (1920 - 1300)));
}
.about.active {
    width: calc(624px + (1020 - 624) * ((100vw - 1300px) / (1920 - 1300)));
}
.about figure {
    margin-bottom: calc(80px + (110 - 80) * ((100vw - 1300px) / (1920 - 1300)));
}
.about h2 {
    font-weight: 600;
    font-size: calc(35px + (50 - 35) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(45px + (65 - 45) * ((100vw - 1300px) / (1920 - 1300)));
    letter-spacing: 0.01em;
    margin-bottom: calc(40px + (50 - 40) * ((100vw - 1300px) / (1920 - 1300)));
}
.about.active h2 {
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    letter-spacing: 0;
    margin-bottom: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
}
.about p {
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 15px;
}
.about.active p {
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: 15px;
}
.about p:last-child {
    margin-bottom: calc(110px + (150 - 110) * ((100vw - 1300px) / (1920 - 1300)));
}
.about.active p:last-child {
    margin-bottom: calc(80px + (110 - 80) * ((100vw - 1300px) / (1920 - 1300)));
}

/*
    grid
*/

.items {
    width: 100%;
    max-width: 1920px;
    display: block;
}
/* main page first block (topics) */
.items_1 {
	display: grid;
	grid-template-areas: "item_11 item_21 item_31 item_31"  
						 "item_41 item_41 item_31 item_31"  
						 "item_41 item_41 item_51 item_61"; 
	grid-template-rows: repeat(3, 1fr);
	grid-template-columns: repeat(4, 1fr);
    row-gap: calc(23px + (32 - 23) * ((100vw - 1300px) / (1920 - 1300)));
    column-gap: calc(28px + (36 - 28) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(60px + (100 - 60) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(110px + (150 - 110) * ((100vw - 1300px) / (1920 - 1300)));
}
.items_1.active {
    grid-template-areas: "item_11 item_21"
                         "item_31 item_41"  
                         "item_51 item_61";
    grid-template-rows: unset;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: calc(80px + (110 - 80) * ((100vw - 1300px) / (1920 - 1300)));
}
.items_1 .item_11 {
	grid-area: item_11;
	overflow: hidden;
    position: relative;
}
.items_1 .item_21 {
	grid-area: item_21;
	overflow: hidden;
    position: relative;
}
.items_1 .item_31 {
	grid-area: item_31;
	overflow: hidden;
    position: relative;
}
.items_1 .item_41 {
	grid-area: item_41;
	overflow: hidden;
    position: relative;
}
.items_1 .item_51 {
	grid-area: item_51;
	overflow: hidden;
    position: relative;
}
.items_1 .item_61 {
	grid-area: item_61;
	overflow: hidden;
    position: relative;
}
/* main page second block (last projects) */
.items_2 {
    display: grid;
    grid-template-areas: "item_12 item_12 item_22 item_32"  
                         "item_12 item_12 item_62 item_62"  
                         "item_42 item_52 item_62 item_62"; 
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(4, 1fr);
    row-gap: calc(23px + (32 - 23) * ((100vw - 1300px) / (1920 - 1300)));
    column-gap: calc(28px + (36 - 28) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(120px + (150 - 120) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(27px + (36 - 27) * ((100vw - 1300px) / (1920 - 1300)));
}
.items_1.active,
.items_2.active,
.items_3.active {
    row-gap: calc(7px + (23 - 7) * ((100vw - 1300px) / (1920 - 1300)));
    column-gap: calc(10px + (28 - 10) * ((100vw - 1300px) / (1920 - 1300)));
}
.items_2.active {
    margin-top: calc(80px + (110 - 80) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(5px + (28 - 5) * ((100vw - 1300px) / (1920 - 1300)));
}
.items_3.active {
    margin-bottom: calc(80px + (110 - 80) * ((100vw - 1300px) / (1920 - 1300)));
}
.items_2 .item_12 {
    grid-area: item_12;
    overflow: hidden;
    position: relative;
}
.items_2 .item_22 {
    grid-area: item_22;
    overflow: hidden;
    position: relative;
}
.items_2 .item_32 {
    grid-area: item_32;
    overflow: hidden;
    position: relative;
}
.items_2 .item_42 {
    grid-area: item_42;
    overflow: hidden;
    position: relative;
}
.items_2 .item_52 {
    grid-area: item_52;
    overflow: hidden;
    position: relative;
}
.items_2 .item_62 {
    grid-area: item_62;
    overflow: hidden;
    position: relative;
}
/* main page third block (last projects and link to see more projects) */
.items_3 {
    display: grid;
    grid-template-areas: "item_13 item_13 item_23 item_33"  
                         "item_13 item_13 item_43 item_53";  
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    row-gap: calc(23px + (32 - 23) * ((100vw - 1300px) / (1920 - 1300)));
    column-gap: calc(28px + (36 - 28) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(120px + (150 - 120) * ((100vw - 1300px) / (1920 - 1300)));
}
.items_3 .item_13 {
    grid-area: item_13;
    overflow: hidden;
    position: relative;
}
.items_3 .item_23 {
    grid-area: item_23;
    overflow: hidden;
    position: relative;
}
.items_3 .item_33 {
    grid-area: item_33;
    overflow: hidden;
    position: relative;
}
.items_3 .item_43 {
    grid-area: item_43;
    overflow: hidden;
    position: relative;
}
.items_3 .item_53 {
    grid-area: item_53;
    overflow: hidden;
    position: relative;
}
.alm-btn-wrap {
    display: none;
}
.da-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
}
.da-video {
    width: 100%;
    border-radius: 15px;
}
.boxes {
    border-radius: 15px;
}
/* styles for overlays blocks */
.overlay_topics,
.overlay_posts {
    position: absolute;
    width: 100%;
    height: 99%;
    top: 0%;
    left: -100%;
    z-index: 3;
    border-radius: 15px;
}
.overlay_posts {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    cursor: pointer;
}
.da-image.active,
.boxes.active,
.overlay_topics.active,
.overlay_posts.active {
    border-radius: 10px;
}
.overlay_topics h3,
.overlay_posts h3,
.overlay_topics p,
.overlay_posts p {
    color: #ffffff;
    font-weight: 600;
}
.overlay_topics p a,
.overlay_posts p a {
    color: inherit;
    text-decoration: underline;
}
.topic_name {
    position: relative;
}
/* <h3> headers for items_1 small squares */
.item_11 .topic_name h3,
.item_21 .topic_name h3,
.item_51 .topic_name h3,
.item_61 .topic_name h3 {
    position: absolute;
    top: 0;
    left: 0;
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(20px + (40 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(15px + (40 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(15px + (20 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(5px + (15 - 5) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <h3> headers for items_1 big squares */
.item_31 .topic_name h3,
.item_41 .topic_name h3 {
    position: absolute;
    top: 0;
    left: 0;
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(25px + (40 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(40px + (50 - 40) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <h3> headers for items_1 big squares (open menu mode) */
.item_31 .topic_name.active h3,
.item_41 .topic_name.active h3 {
    position: absolute;
    top: 0;
    left: 0;
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(20px + (40 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(15px + (40 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(15px + (20 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(5px + (15 - 5) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <h3> headers for items_1 big squares (overlay mode) */
.item_31 .overlay_topics h3,
.item_41 .overlay_topics h3 {
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(25px + (40 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(40px + (50 - 40) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <h3> headers for items_1 small squares (overlay mode) */
.item_11 .overlay_topics h3,
.item_21 .overlay_topics h3,
.item_51 .overlay_topics h3,
.item_61 .overlay_topics h3 {
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(20px + (40 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(15px + (40 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(5px + (15 - 5) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <h3> headers for items_1 all squares (overlay and open menu mode) */
.item_11 .overlay_topics.active h3,
.item_21 .overlay_topics.active h3,
.item_31 .overlay_topics.active h3,
.item_41 .overlay_topics.active h3,
.item_51 .overlay_topics.active h3,
.item_61 .overlay_topics.active h3 {
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(20px + (40 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(15px + (40 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(15px + (20 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(5px + (15 - 5) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <p> for items_1 big squares (overlay mode) */
.item_31 .overlay_topics p,
.item_41 .overlay_topics p {
    font-size: 16px;
    line-height: 25px;
    margin-top: calc(10px + (30 - 10) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(30px + (132 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(40px + (50 - 40) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <p> for items_1 small squares (overlay mode) */
.item_11 .overlay_topics p,
.item_21 .overlay_topics p,
.item_51 .overlay_topics p,
.item_61 .overlay_topics p {
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (25 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: 0;
    margin-left: calc(15px + (40 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(15px + (20 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(9px + (30 - 9) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <p> for items_1 all squares (overlay and open menu mode) */
.item_11 .overlay_topics.active p,
.item_21 .overlay_topics.active p,
.item_31 .overlay_topics.active p,
.item_41 .overlay_topics.active p,
.item_51 .overlay_topics.active p,
.item_61 .overlay_topics.active p {
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (25 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(15px + (40 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(9px + (30 - 9) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <h3> headers for items_2, items_3 and alm-reveal big squares (overlay mode) */
.item_12 .overlay_posts h3,
.item_62 .overlay_posts h3,
.item_13 .overlay_posts h3,
.item_14 .overlay_posts h3,
.item_64 .overlay_posts h3,
.alm-reveal .item_12 .overlay_posts h3,
.alm-reveal .item_62 .overlay_posts h3,
.alm-reveal .item_13 .overlay_posts h3,
.alm-reveal .item_14 .overlay_posts h3,
.alm-reveal.items_add_4 .item_24 .overlay_posts h3,
.alm-reveal .item_64 .overlay_posts h3 {
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    width: calc(525px + (600 - 525) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(25px + (40 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(40px + (50 - 40) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <h3> headers for items_2, items_3 and alm-reveal small squares (overlay mode) */
.item_22 .overlay_posts h3,
.item_32 .overlay_posts h3,
.item_42 .overlay_posts h3,
.item_52 .overlay_posts h3,
.item_23 .overlay_posts h3,
.item_33 .overlay_posts h3,
.item_43 .overlay_posts h3,
.item_24 .overlay_posts h3,
.item_34 .overlay_posts h3,
.item_44 .overlay_posts h3,
.item_54 .overlay_posts h3,
.alm-reveal .item_22 .overlay_posts h3,
.alm-reveal .item_32 .overlay_posts h3,
.alm-reveal .item_42 .overlay_posts h3,
.alm-reveal .item_52 .overlay_posts h3,
.alm-reveal .item_23 .overlay_posts h3,
.alm-reveal .item_33 .overlay_posts h3,
.alm-reveal .item_43 .overlay_posts h3,
.alm-reveal .item_24 .overlay_posts h3,
.alm-reveal .item_34 .overlay_posts h3,
.alm-reveal .item_44 .overlay_posts h3,
.alm-reveal .item_54 .overlay_posts h3 {
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(20px + (40 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(15px + (40 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(5px + (15 - 5) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <h3> headers for items_2, items_3 and alm-reveal big squares (overlay and open menu mode) */
.item_12 .overlay_posts.active h3,
.item_62 .overlay_posts.active h3,
.item_13 .overlay_posts.active h3,
.item_14 .overlay_posts.active h3,
.item_64 .overlay_posts.active h3,
.alm-reveal .item_12 .overlay_posts.active h3,
.alm-reveal .item_62 .overlay_posts.active h3,
.alm-reveal .item_13 .overlay_posts.active h3,
.alm-reveal .item_14 .overlay_posts.active h3,
.alm-reveal.items_add_4 .item_24 .overlay_posts.active h3,
.alm-reveal .item_64 .overlay_posts.active h3 {
    width: calc(273px + (436 - 273) * ((100vw - 1300px) / (1920 - 1300)));
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(15px + (40 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(15px + (30 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(10px + (30 - 10) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <h3> headers for items_2, items_3 and alm-reveal small squares (overlay and open menu mode) */
.item_22 .overlay_posts.active h3,
.item_32 .overlay_posts.active h3,
.item_42 .overlay_posts.active h3,
.item_52 .overlay_posts.active h3,
.item_23 .overlay_posts.active h3,
.item_33 .overlay_posts.active h3,
.item_43 .overlay_posts.active h3,
.item_24 .overlay_posts.active h3,
.item_34 .overlay_posts.active h3,
.item_44 .overlay_posts.active h3,
.item_54 .overlay_posts.active h3,
.alm-reveal .item_22 .overlay_posts.active h3,
.alm-reveal .item_32 .overlay_posts.active h3,
.alm-reveal .item_42 .overlay_posts.active h3,
.alm-reveal .item_52 .overlay_posts.active h3,
.alm-reveal .item_23 .overlay_posts.active h3,
.alm-reveal .item_33 .overlay_posts.active h3,
.alm-reveal .item_43 .overlay_posts.active h3,
.alm-reveal .item_24 .overlay_posts.active h3,
.alm-reveal .item_34 .overlay_posts.active h3,
.alm-reveal .item_44 .overlay_posts.active h3,
.alm-reveal .item_54 .overlay_posts.active h3 {
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(15px + (30 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(15px + (25 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(5px + (20 - 5) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(34px + (54 - 34) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <p> for items_2, items_3 and alm-reveal big squares (overlay mode) */
.item_12 .overlay_posts p,
.item_62 .overlay_posts p,
.item_13 .overlay_posts p,
.item_14 .overlay_posts p,
.item_64 .overlay_posts p,
.alm-reveal .item_12 .overlay_posts p,
.alm-reveal .item_62 .overlay_posts p,
.alm-reveal .item_13 .overlay_posts p,
.alm-reveal .item_14 .overlay_posts p,
.alm-reveal .item_64 .overlay_posts p {
    font-size: 16px;
    line-height: 25px;
    margin-top: calc(10px + (30 - 10) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(30px + (132 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(40px + (50 - 40) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <p> for items_2, items_3 and alm-reveal small squares (overlay mode) */
.item_22 .overlay_posts p,
.item_32 .overlay_posts p,
.item_42 .overlay_posts p,
.item_52 .overlay_posts p,
.item_23 .overlay_posts p,
.item_33 .overlay_posts p,
.item_43 .overlay_posts p,
.item_24 .overlay_posts p,
.item_34 .overlay_posts p,
.item_44 .overlay_posts p,
.item_54 .overlay_posts p,
.alm-reveal .item_22 .overlay_posts p,
.alm-reveal .item_32 .overlay_posts p,
.alm-reveal .item_42 .overlay_posts p,
.alm-reveal .item_52 .overlay_posts p,
.alm-reveal .item_23 .overlay_posts p,
.alm-reveal .item_33 .overlay_posts p,
.alm-reveal .item_43 .overlay_posts p,
.alm-reveal .item_24 .overlay_posts p,
.alm-reveal .item_34 .overlay_posts p,
.alm-reveal .item_44 .overlay_posts p,
.alm-reveal .item_54 .overlay_posts p {
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (25 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: 0;
    margin-left: calc(15px + (40 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(15px + (20 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(9px + (30 - 9) * ((100vw - 1300px) / (1920 - 1300)));
}
/* <p> for items_2, items_3 and alm-reveal big squares (overlay  and open menu mode) */
.item_12 .overlay_posts.active p,
.item_62 .overlay_posts.active p,
.item_13 .overlay_posts.active p,
.item_14 .overlay_posts.active p,
.item_64 .overlay_posts.active p,
.alm-reveal .item_12 .overlay_posts.active p,
.alm-reveal .item_62 .overlay_posts.active p,
.alm-reveal .item_13 .overlay_posts.active p,
.alm-reveal .item_14 .overlay_posts.active p,
.alm-reveal .item_64 .overlay_posts.active p {
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (25 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: 0;
    margin-left: calc(15px + (30 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(30px + (30 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(9px + (30 - 9) * ((100vw - 1300px) / (1920 - 1300)));
}
.item_53 {
    display: flex;
    background-color: #ffffff;
    width: calc(284px + (423 - 284) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(284px + (423 - 284) * ((100vw - 1300px) / (1920 - 1300)));
    border-radius: 15px;
}
.item_53.active {
    flex-direction: column;
    width: calc(149px + (234 - 149) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(149px + (234 - 149) * ((100vw - 1300px) / (1920 - 1300)));
    border-radius: 10px;
}
.item_53 p {
    font-weight: 600;
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(30px + (50 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(20px + (40 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(16px + (24 - 16) * ((100vw - 1300px) / (1920 - 1300)));
}
.item_53.active p {
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(12px + (28 - 12) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(7px + (22 - 7) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: 0;
    margin-bottom: 0;
}
.item_53 img {
    width: calc(48px + (64 - 48) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(48px + (64 - 48) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: calc(22px + (43 - 22) * ((100vw - 1300px) / (1920 - 1300)));
}
.item_53.active img {
    width: calc(40px + (52 - 40) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(40px + (52 - 40) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: 0;
    margin-left: calc(7px + (22 - 7) * ((100vw - 1300px) / (1920 - 1300)));
}

/*
    projects
*/

.alm-reveal {
    display: grid;
    grid-template-areas: "item_14 item_14 item_24 item_34"  
                         "item_14 item_14 item_64 item_64"  
                         "item_44 item_54 item_64 item_64"; 
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(4, 1fr);
    row-gap: calc(23px + (32 - 23) * ((100vw - 1300px) / (1920 - 1300)));
    column-gap: calc(28px + (36 - 28) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(26px + (36 - 26) * ((100vw - 1300px) / (1920 - 1300)));
    /* margin-bottom: calc(-22px + ((30 * -1) - (22 * -1)) * ((100vw - 1300px) / (1920 - 1300))); */
}
/* classes for case when the last alm-reveal class div has not exactly 6 elements */
.alm-reveal.items_add_1,
.alm-reveal.items_add_2,
.alm-reveal.items_add_3,
.alm-reveal.items_add_5 {
    grid-template-areas: "item_14 item_14 item_24 item_34"  
                         "item_14 item_14 item_44 item_54"; 
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 40px;
}
.alm-reveal.items_add_4 {
    grid-template-areas: "item_14 item_14 item_24 item_24"  
                         "item_14 item_14 item_24 item_24"; 
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 40px;
}
.alm-reveal.active {
    row-gap: calc(7px + (23 - 7) * ((100vw - 1300px) / (1920 - 1300)));
    column-gap: calc(10px + (28 - 10) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(5px + (28 - 5) * ((100vw - 1300px) / (1920 - 1300)));
    /* margin-bottom: calc(-7px + ((20 * -1) - (7 * -1)) * ((100vw - 1300px) / (1920 - 1300))); */
}
.alm-reveal.items_add_1.active,
.alm-reveal.items_add_2.active,
.alm-reveal.items_add_3.active,
.alm-reveal.items_add_4.active,
.alm-reveal.items_add_5.active {
    row-gap: calc(7px + (23 - 7) * ((100vw - 1300px) / (1920 - 1300)));
    column-gap: calc(10px + (28 - 10) * ((100vw - 1300px) / (1920 - 1300)));
}
.alm-reveal.active:last-child {
    margin-bottom: 40px;
}
.alm-reveal .item_14 {
    grid-area: item_14;
    overflow: hidden;
    position: relative;
}
.alm-reveal .item_24 {
    grid-area: item_24;
    overflow: hidden;
    position: relative;
}
.alm-reveal .item_34 {
    grid-area: item_34;
    overflow: hidden;
    position: relative;
}
.alm-reveal .item_44 {
    grid-area: item_44;
    overflow: hidden;
    position: relative;
}
.alm-reveal .item_54 {
    grid-area: item_54;
    overflow: hidden;
    position: relative;
}
.alm-reveal .item_64 {
    grid-area: item_64;
    overflow: hidden;
    position: relative;
}

/*
    want design
*/

.want_design {
    display: flex;
    justify-content: center;
    padding: 0 calc(40px + (60 - 40) * ((100vw - 1300px) / (1920 - 1300)));
    width: 100%;
    transition: 1000ms;
    margin-bottom: calc(120px + (150 - 120) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(480px + (520 - 480) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design.active {
    width: calc(706px + (1140 - 706) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(570px + (650 - 570) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_body {
    width: 100%;
    max-width: 1920px;
    background-color: #ffffff;
    display: flex;
    flex-wrap: nowrap;
    border-radius: 15px;
}
.want_design_body.active {
    flex-wrap: unset;
    flex-direction: column;
    padding-left: calc(60px + (90 - 60) * ((100vw - 1300px) / (1920 - 1300)));
    border-radius: 10px;
}
.want_design_body_title,
.want_design_body_form {
    width: 50%;
}
.want_design_body_title.active,
.want_design_body_form.active {
    display: block;
    width: 100%;
}
.want_design_body_form.active {
    padding-left: 0;
}
.want_design_body_title h3 {
    margin-top: calc(70px + (90 - 70) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(30px + (50 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(78px + (153 - 78) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(30px + (50 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    font-weight: 600;
    font-size: calc(35px + (50 - 35) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(45px + (65 - 45) * ((100vw - 1300px) / (1920 - 1300)));
    width: calc(440px + (580 - 440) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_body_title.active h3 {
    margin-top: calc(50px + (60 - 50) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(10px + (30 - 10) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: 0;
    margin-right: calc(134px + (102 - 134) * ((100vw - 1300px) / (1920 - 1300)));
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    width: calc(432px + (828 - 432) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_body_title p {
    margin-left: calc(78px + (153 - 78) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(30px + (50 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    width: calc(440px + (580 - 440) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_body_title.active p {
    margin-left: 0;
    margin-right: calc(134px + (118 - 134) * ((100vw - 1300px) / (1920 - 1300)));
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    width: calc(432px + (828 - 432) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_body_form {
    padding-left: calc(34px + (94 - 34) * ((100vw - 1300px) / (1920 - 1300)));
}
.input_control {
    position: relative;
}
.wpcf7-form {
    position: relative;
}
.wpcf7-form label {
    position: absolute;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
}
#fldName_label {
    top: calc(51px + (84 - 51) * ((100vw - 1300px) / (1920 - 1300)));
    left: -1px;
}
#fldName_label.active,
#fldPhone_label.active {
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
}
#fldName_label.active {
    top: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
}
#fldPhone_label {
    top: -4px;
    left: -1px;
}
.wpcf7-form .input_name,
.wpcf7-form .input_phone {
    width: calc(476px + (644 - 476) * ((100vw - 1300px) / (1920 - 1300)));
    height: 60px;
    border: none;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    padding-left: 30px;
    border-radius: 40px;
    border: 1px solid gray;
}
.wpcf7-form .input_name.active,
.wpcf7-form .input_phone.active {
    width: calc(432px + (644 - 432) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(50px + (60 - 50) * ((100vw - 1300px) / (1920 - 1300)));
}
.wpcf7-form .input_name {
    margin-top: calc(55px + (89 - 55) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: 20px;
}
.wpcf7-form .input_name.active {
    margin-top: calc(25px + (35 - 25) * ((100vw - 1300px) / (1920 - 1300)));
}
.wpcf7-form .input_phone {
    margin-bottom: calc(30px + (35 - 30) * ((100vw - 1300px) / (1920 - 1300)));
}
.wpcf7-form .legal {
    font-weight: 400;
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(45px + (30 - 45) * ((100vw - 1300px) / (1920 - 1300)));
    width: calc(476px + (609 - 476) * ((100vw - 1300px) / (1920 - 1300)));
}
.wpcf7-form .legal.active {
    margin-bottom: 25px;
    width: calc(432px + (680 - 432) * ((100vw - 1300px) / (1920 - 1300)));
}
.wpcf7-response-output,
#notify_2 {
    display: none;
}
.wpcf7-not-valid-tip {
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    position: absolute;
    top: -51px;
    right: 0;
    color: #ff0000;
}
.wpcf7-not-valid-tip.active {
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    top: calc(118px + (136 - 118) * ((100vw - 1300px) / (1920 - 1300)));
    right: calc(135px + (287 - 135) * ((100vw - 1300px) / (1920 - 1300)));
}
#notify_2 {
    width: 100%;
    height: calc(400px + (430 - 400) * ((100vw - 1300px) / (1920 - 1300)));
    justify-content: space-between;
    align-items: center;
}
#notify_2.active {
    height: calc(400px + (550 - 400) * ((100vw - 1300px) / (1920 - 1300)));
}
.notify_2_message h3 {
    font-weight: 600;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: 0.01em;
    margin-left: calc(78px + (153 - 78) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: 40px;
}
.notify_2_message.active h3 {
    font-size: calc(35px + (50 - 35) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(45px + (65 - 45) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: 0;
    margin-bottom: calc(25px + (40 - 25) * ((100vw - 1300px) / (1920 - 1300)));
}
.notify_2_message p {
    font-weight: 600;
    font-size: 35px;
    line-height: 45px;
    letter-spacing: 0.01em;
    margin-bottom: 15px;
    margin-left: calc(78px + (153 - 78) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: 20px;
}
.notify_2_message.active p {
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: 0;
    margin-right: 0;
}
.notify_2_video img {
    width: calc(400px + (430 - 400) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(400px + (430 - 400) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(70px + (274 - 70) * ((100vw - 1300px) / (1920 - 1300)));
}
.notify_2_video.active img {
    width: calc(300px + (430 - 300) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(300px + (430 - 300) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(20px + (50 - 20) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_form_button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 60px;
    border: unset;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.25);
    background-color: #ffffff;
    color: #78777e;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 35px;
    cursor: pointer;
    transition: 1000ms;
    padding-bottom: 2px;
    border-radius: 40px;
}
.readytosend {
    background-color: #29272F;
    color: #ffffff;
    overflow: hidden;
    position: relative;
}
.readytosend:after {
    content: "";
    background: rgb(39,47,44);
    background: linear-gradient(180deg, rgba(39,47,44,0.2) 0%, rgba(241,247,245,0.6) 50%, rgba(244,247,246,0.6) 50%, rgba(39,47,44,0.2) 100%);
    position: absolute;
    top: 0;
    left: -95px;
    width: 200px;
    height: 88px;
    transform: translateX(-100px) rotate(134deg);
}
.readytosend:hover:after {
    animation: flash_button_hover 2s 0s infinite;
}
.want_design_form_button.active {
    width: calc(180px + (220 - 180) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(50px + (60 - 50) * ((100vw - 1300px) / (1920 - 1300)));
}

/*
    articles
*/

.articles {
    display: flex;
    justify-content: center;
    padding: 0 calc(40px + (60 - 40) * ((100vw - 1300px) / (1920 - 1300)));
    width: 100%;
    transition: 1000ms;
    margin-bottom: calc(120px + (166 - 120) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(328px + (480 - 328) * ((100vw - 1300px) / (1920 - 1300)));
}
.articles.active {
    width: calc(706px + (1140 - 706) * ((100vw - 1300px) / (1920 - 1300)));
}
.articles_body {
    max-width: 1920px;
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
    flex-wrap: nowrap;
}
.articles_body::-webkit-scrollbar {
    display: none;
}
.articles_body_item {
    flex: 0 0 auto;
    width: calc(328px + (480 - 328) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(328px + (480 - 328) * ((100vw - 1300px) / (1920 - 1300)));
    border: 3px solid #f5f4f5;
    margin-right: calc(22px + (36 - 22) * ((100vw - 1300px) / (1920 - 1300)));
}
.articles_body_item:last-child {
    margin-right: 0;
}
.articles_body_go {
    flex: 0 0 auto;
    display: flex;
    width: calc(328px + (480 - 328) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(328px + (480 - 328) * ((100vw - 1300px) / (1920 - 1300)));
    border: 3px solid #f5f4f5;
    padding-top: calc(30px + (50 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    padding-left: calc(20px + (27 - 20) * ((100vw - 1300px) / (1920 - 1300)));
}
.articles_img img {
    width: 100%;
    height: auto;
}
.articles_desc h3 {
    margin-top: calc(15px + (20 - 15) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: 10px;
    margin-left: calc(14px + (25 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(14px + (20 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    font-weight: 600;
    font-size: calc(14px + (20 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
}
.articles_desc p {
    margin-left: calc(14px + (25 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(14px + (20 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    font-weight: 400;
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
}
.articles_body_go p {
    font-weight: 600;
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-top: 8px;
    margin-right: calc(16px + (24 - 16) * ((100vw - 1300px) / (1920 - 1300)));
}
.articles_body_go img {
    width: calc(48px + (64 - 48) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(48px + (64 - 48) * ((100vw - 1300px) / (1920 - 1300)));
}

/*
	footer
*/

.footer {
    display: flex;
    flex-direction: column;
    padding: 0 calc(40px + (60 - 40) * ((100vw - 1300px) / (1920 - 1300)));
    width: 100%;
    transition: 1000ms;
}
.footer__line {
    border-top: 2px solid #29272f;
    width: calc(1220px + (1800 - 1220) * ((100vw - 1300px) / (1920 - 1300)));
    height: 2px;
}
.footer__line.active {
    width: calc(626px + (1020 - 626) * ((100vw - 1300px) / (1920 - 1300)));
}
.footer__body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 73px;
    padding-top: 60px;
    width: calc(880px + (1140 - 880) * ((100vw - 1300px) / (1920 - 1300)));
}
.footer__body.active {
    width: calc(626px + (760 - 626) * ((100vw - 1300px) / (1920 - 1300)));
}
.footer__logo {
    margin-top: -8px;
    transition: 1000ms;
}
.footer__body.active .footer__logo {
    display: none;
}
.footer__logo img {
    width: 63px;
    height: auto;
}
.footer__logo a {
    display: block;
}
.footer__features {
    transition: 1000ms;
}
.footer__menu {
    transition: 1000ms;
}
.footer__lists,
.menu_left_list,
.menu_right_list {
    list-style: none;
}
.footer__lists li {
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 15px;
}
.footer__lists li a {
    color: inherit;
    cursor: pointer;
}
.footer__lists li a:hover {
    text-decoration: underline;
}
.footer__lists .current-cat {
    font-weight: 600;
}
#footer__lists_contacts {
    cursor: pointer;
    color: #000000;
}
#footer__lists_contacts:hover {
    text-decoration: underline;
}
.footer__phone {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 30px;
}
.footer__socials {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}
.footer__socials svg {
    fill: #29272f;
}
.footer__socials svg:hover {
    fill: #78777e;
}
.footer__copy {
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
}
.footer__legal {
    font-weight: 400;
    font-size: 12px;
    line-height: 13px;
    color: #78777E;
    margin-bottom: calc(12px + (25 - 12) * ((100vw - 1300px) / (1920 - 1300)));
    /*width: calc(888px + (1340 - 888) * ((100vw - 1300px) / (1920 - 1300)));*/
    text-align: justify;
}
.footer__legal.active {
    width: calc(626px + (1020 - 626) * ((100vw - 1300px) / (1920 - 1300)));
}

/*
.want_design {
    display: flex;
    justify-content: center;
    padding: 0 calc(40px + (60 - 40) * ((100vw - 1300px) / (1920 - 1300)));
    width: 100%;
    transition: 1000ms;
    margin-bottom: calc(120px + (150 - 120) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(480px + (520 - 480) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design.active {
    width: calc(706px + (1140 - 706) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(570px + (650 - 570) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_body {
    width: 100%;
    max-width: 1920px;
    background-color: #f5f4f5;
    display: flex;
    flex-wrap: nowrap;
}
.want_design_body.active {
    flex-wrap: unset;
    flex-direction: column;
    padding-left: calc(60px + (90 - 60) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_body_title,
.want_design_body_form {
    width: 50%;
}
.want_design_body_title.active,
.want_design_body_form.active {
    display: block;
    width: 100%;
}
.want_design_body_form.active {
    padding-left: 0;
}
.want_design_body_title h3 {
    margin-top: calc(70px + (90 - 70) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(30px + (50 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: calc(78px + (153 - 78) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(30px + (50 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    font-weight: 600;
    font-size: calc(35px + (50 - 35) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(45px + (65 - 45) * ((100vw - 1300px) / (1920 - 1300)));
    width: calc(440px + (580 - 440) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_body_title.active h3 {
    margin-top: calc(50px + (60 - 50) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(10px + (30 - 10) * ((100vw - 1300px) / (1920 - 1300)));
    margin-left: 0;
    margin-right: calc(134px + (102 - 134) * ((100vw - 1300px) / (1920 - 1300)));
    font-size: calc(20px + (35 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(30px + (45 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    width: calc(432px + (828 - 432) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_body_title p {
    margin-left: calc(78px + (153 - 78) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(30px + (50 - 30) * ((100vw - 1300px) / (1920 - 1300)));
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    width: calc(440px + (580 - 440) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_body_title.active p {
    margin-left: 0;
    margin-right: calc(134px + (118 - 134) * ((100vw - 1300px) / (1920 - 1300)));
    font-size: calc(16px + (20 - 16) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(25px + (30 - 25) * ((100vw - 1300px) / (1920 - 1300)));
    width: calc(432px + (828 - 432) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_body_form {
    padding-left: calc(34px + (94 - 34) * ((100vw - 1300px) / (1920 - 1300)));
}
.input_control {
    position: relative;
}
.want_design_form {
    position: relative;
}
.want_design_form label {
    position: absolute;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
}
#fldName_label {
    top: calc(50px + (83 - 50) * ((100vw - 1300px) / (1920 - 1300)));
    left: 0;
}
#fldName_label.active {
    top: calc(17px + (30 - 17) * ((100vw - 1300px) / (1920 - 1300)));
}
#fldPhone_label {
    top: -29px;
    left: 0;
}
.want_design_form .input_name,
.want_design_form .input_phone {
    width: calc(476px + (644 - 476) * ((100vw - 1300px) / (1920 - 1300)));
    height: 60px;
    border: none;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    padding-left: 30px;
}
.want_design_form .input_name.active,
.want_design_form .input_phone.active {
    width: calc(432px + (644 - 432) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(50px + (60 - 50) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_form .input_name {
    margin-top: calc(80px + (113 - 80) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: 45px;
}
.want_design_form .input_name.active {
    margin-top: calc(50px + (60 - 50) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_form .input_phone {
    margin-bottom: calc(30px + (35 - 30) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_form .legal {
    font-weight: 400;
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: calc(45px + (30 - 45) * ((100vw - 1300px) / (1920 - 1300)));
    width: calc(476px + (609 - 476) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_form .legal.active {
    margin-bottom: 35px;
    width: calc(432px + (680 - 432) * ((100vw - 1300px) / (1920 - 1300)));
}
#notify,
#notify_2 {
    display: none;
}
.error {
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    position: absolute;
    top: calc(156px + (190 - 156) * ((100vw - 1300px) / (1920 - 1300)));
    right: calc(102px + (163 - 102) * ((100vw - 1300px) / (1920 - 1300)));
    color: #ff0000;
}
.error.active {
    font-size: calc(14px + (16 - 14) * ((100vw - 1300px) / (1920 - 1300)));
    line-height: calc(20px + (30 - 20) * ((100vw - 1300px) / (1920 - 1300)));
    top: calc(118px + (136 - 118) * ((100vw - 1300px) / (1920 - 1300)));
    right: calc(135px + (287 - 135) * ((100vw - 1300px) / (1920 - 1300)));
}
#notify_2 {
    width: 100%;
    height: calc(400px + (430 - 400) * ((100vw - 1300px) / (1920 - 1300)));
    justify-content: space-between;
    align-items: center;
}
.notify_2_message h3 {
    font-weight: 600;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: 0.01em;
    margin-left: calc(78px + (153 - 78) * ((100vw - 1300px) / (1920 - 1300)));
    margin-bottom: 40px;
}
.notify_2_message p {
    font-weight: 600;
    font-size: 35px;
    line-height: 45px;
    letter-spacing: 0.01em;
    margin-bottom: 15px;
    margin-left: calc(78px + (153 - 78) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: 20px;
}
.notify_2_video img {
    width: calc(400px + (430 - 400) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(400px + (430 - 400) * ((100vw - 1300px) / (1920 - 1300)));
    margin-right: calc(70px + (274 - 70) * ((100vw - 1300px) / (1920 - 1300)));
}
.want_design_form_button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 60px;
    border: 1px solid #78777e;
    background-color: #f5f4f5;
    color: #78777e;
    font-weight: 600;
    font-size: 20px;
    line-height: 35px;
    cursor: pointer;
    transition: 1000ms;
    padding-bottom: 2px;
}
.want_design_form_button.readytosend {
    border: 1px solid #efeef2;
    background-color: #78777e;
    color: #ffffff;
}
.want_design_form_button.readytosend:hover {
    border: unset;
}
.want_design_form_button.active {
    width: calc(180px + (220 - 180) * ((100vw - 1300px) / (1920 - 1300)));
    height: calc(50px + (60 - 50) * ((100vw - 1300px) / (1920 - 1300)));
}*/