@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Cormorant+Unicase:wght@400&family=Poiret+One&family=Ephesis&family=Jost:wght@300&display=swap');
body{font-family: 'Poiret One', cursive; font-size: 24px; color: #000000; -webkit-tap-highlight-color: transparent;}
#scroll-wrapper{width: 100%; top: 0; left: 0; padding-top: 90px;}
#top-menu{position: fixed; top: -90px; background: #fff; z-index: 4; width: 100%; transition: 0.5s; transition-delay: 0.5s;}
#top-menu.active{top: 0;}
#menu-wrapper{z-index: 5; position: relative;}
a{cursor: pointer;}
.frame{width: 80vw; margin-left: auto; margin-right: auto; max-width: unset;}
.line-after:after{content: ""; display: inline-block; width: 100px; height: 1px; background-color: #920f0c; vertical-align: middle; margin-left: 10px;}

* {scrollbar-width: thin;scrollbar-color: #b79275 #555555;}
body::-webkit-scrollbar {width: 13px;}
body::-webkit-scrollbar-track {background: #555555;}
body::-webkit-scrollbar-thumb {background-color: #b79275;}

.font-1{font-family: 'Cormorant Unicase', serif;}
.font-2{font-family: 'Poiret One', cursive;}
.font-3{font-family: 'Bad Script', cursive;}
.font-4{font-family: 'Ephesis', cursive;}
.font-5{font-family: 'Jost', sans-serif;}

.font-size-16{font-size: 16px;}
.font-size-18{font-size: 18px;}
.font-size-20{font-size: 20px;}
.font-size-24{font-size: 24px;}
.font-size-36{font-size: 36px;}
.font-size-48{font-size: 48px;}
.font-size-72{font-size: 72px;}
.heading-medium{font-size: 60px;  line-height: 64px;}
.heading-big{font-size: 100px;  line-height: 110px;}
.long-text, #site-menu .menu-item{transition: 0.5s letter-spacing ease-in; cursor: pointer;}
.long-text:hover, #site-menu .menu-item:hover{letter-spacing: 3px;}
.line-show{position: absolute; width: 0; height: 1px; top: 0; transition: 0.5s ease-in width;}
.active .line-show{width: 100%;}
.overflow-hidden{overflow: hidden;}
.vh-100{height: 100vh;}
.half-width{width: 50%;}

.show-left, .show-bottom, .show-right, .image-show{overflow: hidden;}

.show-left > * {transform: translateX(-100%);}
.animate .show-left > *, .active .show-left > * {animation: show-left 0.5s ease-in forwards; }
@keyframes show-left{to {transform: translateX(0);}}

.show-right > * {transform: translateX(100%);}
.animate .show-right > *, .active .show-right > * {animation: show-right 0.5s ease-in forwards; }
@keyframes show-right{to {transform: translateX(0);}}

.show-bottom > * {transform: translateY(100%);}
.animate .show-bottom > *, .active .show-bottom > * {animation: show-bottom 0.5s ease-in forwards;}
@keyframes show-bottom{to {transform: translateY(0);}}

.color-1{color: #920f0c;}
.color-1-bg{background-color: #920f0c;}
.color-2{color: #3c605e;}
.color-2-bg{background-color: #3c605e;}
.color-3{color: #4f6471;}
.color-3-bg{background-color: #4f6471;}
.color-4{color: #b79275;}
.color-4-bg{background-color: #b79275;}
.color-5{color: #594e41;}
.color-5-bg{background-color: #594e41;}
.color-6{color: #b27a8b;}
.color-6-bg{background-color: #b27a8b;}
.color-7{color: #e5e1db;}
.color-7-bg{background-color: #e5e1db;}
.color-8{color: #ffe699;}
.color-8-bg{background-color: #ffe699;}
.color-9{color: #3b3838;}
.color-9-bg{background-color: #3b3838;}

/* HEADER */
#header{ font-size: 24px; z-index: 5; position: relative;}
#header #top-menu{padding-top: 10px; border-bottom: 1px solid #cfcfcf;}
#header-logo .File{width: 240px; margin: 0 auto;}
/*#header-logo:after{content: ""; display: block; background-color: #000000; width: 60%; transform: translateX(64%); height: 2px;}*/
#menu-icon{width: 40px; margin-top: -2px;}
#menu-open ellipse{transition: 0.5s transform ease-in; stroke: #000000; stroke-width: 0.6; fill: none;}
#header .sticky-menu ellipse{ stroke: #ffffff; stroke-width: 0.5;}
#menu-open:hover ellipse:nth-child(1){transform: translateY(-2px);}
#menu-open:hover ellipse:nth-child(2){transform: translateY(-1px);}
#menu-open:hover ellipse:nth-child(3){transform: translateY(1px);}
#menu-open:hover ellipse:nth-child(4){transform: translateY(2px);}
#header-slogan{letter-spacing: 3px;}
.logger a{margin: 0 5px;}
#menu-control > *{margin: 0 30px;}
#top-menu .languages{position: absolute; top: 10px; right: 10px;}
.languages > a{margin: 0 2px; color: #555555}
.languages > .active{color: #b79275;}

#site-menu{visibility: hidden; pointer-events: none; position: fixed; right: 0; width: 60vw; top: 0; height: 100vh; overflow: auto;}
#site-menu {scrollbar-width: thin;scrollbar-color: #b79275 #555555;}
#site-menu::-webkit-scrollbar {width: 0;}
#site-menu::-webkit-scrollbar-track {background: #555555;}
#site-menu::-webkit-scrollbar-thumb {background-color: #b79275;}

.active #site-menu{visibility: visible; pointer-events: initial;}
#site-menu-background{opacity: 0; left: unset; transition: 0.5s ease-out; position: fixed; right: -20%; width: 60vw;}
.active #site-menu-background{opacity: 1; right: 0;}
#site-menu .menu-item{margin: 20px 0; display: block;}
#site-menu .menu-item a:after{content: ""; display: block; position: absolute; transition: 0.5s ease-out; width: 0; height: 1px; bottom: 0; left: -60px; background-color: #000000;}
.active #site-menu .active-menu a:after, #site-menu .menu-item:hover a:after{width: 100%;}
#splide-menu-wrapper{width: 0; transition: 0.5s width; overflow: hidden; opacity: 0;}
.active #site-menu #splide-menu-wrapper{width: 100%; transition-delay: 0.5s ease-out; opacity: 1;}
#line-show-menu{right: -60px;}
#menu-bottom{margin-top: 50px;}
.social-element{font-size: 18px; margin: 0 5px;}

/* REQUEST FORM */
.form-line{ position: relative; margin: 20px 0; border-bottom: 1px solid #000000;}
.form-line span{position: absolute; z-index: 2; font-size: 14px; color: #000000; top: 10px; left: 5px;}
.line-filled span{top: -15px;}
.form-line input, .form-line textarea{border: unset; position: relative; width: 100%; outline: none; font-size: 18px; background: none; color: #000000;}
.form-line input{padding: 5px 10px;}
.form-line textarea{padding: 5px 10px; height: 100px;}
#request-close{top: 0; right: 0; width: 40px; padding: 5px 0px;}
.checkbox-line{font-size: 16px;}
.data-agreement{font-size: 13px; max-width: 300px;}

/* SPLIDE */
.splide__pagination{position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);}
.splide__pagination .splide__pagination__page{height: 15px; width: 15px; border-radius: 100%; margin: 0 3px; border: 1px solid #fff;  opacity: 0.5;}
.splide__pagination .splide__pagination__page.is-active{opacity: 1; background-color: #fff;}
.splide__track, .splide__list{height: 100%;}
.splide .splide__arrow{ display: none; height: 40px; width: 40px; position: absolute; top: 50%; right: 5%; transform: translateY(-50%);}
.splide .splide__arrow--prev{left: 5%; transform: translateY(-50%) rotate(180deg);}
.splide .splide__pagination{display: inline-block; width: auto; vertical-align: middle; max-width: 70%; margin: 0 20px;}

/* INDEX */
#index{overflow-x: hidden;}
#mouse-circle{width: 25px; height: 25px; position: fixed; border: 1px solid #e5e1db; border-radius: 100%; z-index: 2; top: 0; left: 0; transition: 0.1s transform ease-out; pointer-events: none;}
.anchor #mouse-circle{border: unset; background-color: #e5e1db; width: 45px; height: 45px; margin: -10px 0 0 -10px; opacity: 0.1;}

/* HOME */
    /* banner */
    #banner{height: 100vh;}
    #collection{height: 400px; width: 80%; left: 10%;}
    #brand-collection-files{filter: brightness(0.7);}
    .brand-collection-item .collection-logo{width: 30px; height: 30px;}
    .brand-collection-content > .flex{justify-content: center;}
    .brand-collection-item.active .brand-collection-content > .flex{display: block;}
    .brand-collection-item.active .collection-logo{width: 100px; height: 80px; margin: 0 auto; filter: invert(1); margin-bottom: 30px;}

    .brand-collection-file{opacity: 0; z-index: 1; pointer-events: none; height: calc(100% - 100px); top: 0;}
    .brand-collection-file.active{opacity: 1; z-index: 2; pointer-events: initial;}
    #brand-collection-file-1{left: 25%; width: 75%;}
    #brand-collection-file-5{width: 75%;}
    #first-colection-text-2{position: absolute; width: 18%; height: 100%;}
    #second-colection-text-2{position: absolute; left: 45%; width: 55%; height: 100%;}
    #first-colection-text-3{position: absolute; width: 35%; height: 100%;}
    #second-colection-text-3{position: absolute; left: 65%; width: 35%; height: 100%;}
    #first-colection-text-4{position: absolute;  width: 55%; height: 100%;}
    #second-colection-text-4{position: absolute; left: 82%; width: 18%; height: 100%;}
    #promotions{top: 70vh; right: 20px;}
    .promotions-item{height: 70px;}
    .promotions-item .File{width: 70px; padding: 7px 5px;}
    .promotions-admin{height: 150px; width: fit-content;}
    
    
    #brand-collection-line:before, #brand-collection-line:after{content: ""; position: absolute; display: inline-block; width: 50%; background-color: #000; height: 1px; left: -80px; top: 15px;}
    #brand-collection-line:after{left: 50%; transform: translateX(80px);}
    #brand-collection-items{z-index: 2; bottom: 0; max-width: unset; font-size: 18px;}
    #brand-collection-items .brand-collection-item{ padding: 1px; height: 70px; width: 20%;}
    #brand-collection-items .brand-collection-item .brand-collection-content{  position: absolute; bottom: 0; width: 100%; }
    #brand-collection-items .brand-collection-item .brand-collection-background{ height: 2px; top: unset; bottom: 0; transition: 0.5s;}
    #brand-collection-items .brand-collection-item.active{color: #fff;}
    .brand-collection-title{padding-left: 10px; font-size: 20px; transition: 0.5s;;}
    .brand-collection-item.active .brand-collection-title{font-size: 24px;}
    #brand-collection-items .brand-collection-item.active .brand-collection-title{ margin: 0; padding-left: 0;}
    #brand-collection-items .brand-collection-item.active .brand-collection-background{ height: 400px;}
    #brand-collection-items .brand-collection-item.active .brand-collection-text{ display: block;}
    #brand-collection-items .brand-collection-item.active .brand-collection-content{bottom: 200px; transform: translateY(50%);}
    #brand-collection-title {top: 240px; right: -200px; line-height: 26px; width: max-content; z-index: 2; opacity: 0.5; font-weight: bold; font-size: 26px; transform: rotate(90deg);}
    #brand-collection-title.bg{top: 260px; right: -230px;}
    .learn-more{width: 60px;}
    
    /* trait */
    #home-trait-content{margin-bottom: -100px;}
    #home-trait h1{font-size: 120px; letter-spacing: 2px; font-weight: normal;}
    #home-trait-experience > * {padding: 0 5px;}
    #home-trait-experience .show-right{font-size: 34px;}
    #trait-file-1{z-index: 2; padding: 30px; position: relative;}
    #trait-file-1 .image{box-shadow: 3px 3px 13px #555;}
    #trait-file-2{position: relative; top: -200px; width: 100%; left: 10%;}
    
    
    .trait-file .background{padding: 7px; left: -7px; top: -7px;}
    .trait-file .File{width: 0%; height: 100%; opacity: 0; left: 50%; top: 50%; position: absolute; transform: translate(-150%, -25%);}
    .trait-file .animate .File{animation: trait-file 0.7s linear forwards;}
    @keyframes trait-file{to{width: 100%; opacity: 1; transform: translate(-50%, -50%);}}
    .trait-file .animate .tb-animate{height: 1px; animation: tb-animate 1.5s linear;}
    .trait-file .animate .rb-animate{width: 1px; animation: rb-animate 1.5s linear;}
    .trait-file .animate .bb-animate{height: 1px; animation: bb-animate 1.5s linear;}
    .trait-file .animate .lb-animate{width: 1px; animation: lb-animate 1.5s linear;}
   
    
    /* project */
    #project{ padding: 100px 0 150px;}
    #project .project-file{ height: 100%;}
    #home-projects, #home-projects .project-item{height: 800px;}
    #home-projects .project-overlay {width: 34%; border: 50px solid; height: 102%; top: -1%; box-sizing: border-box; pointer-events: none;}
    #home-projects #overlay-1 {left: 0;}
    #home-projects #overlay-2 {left: 66%;}
    #home-projects .splide__slide {overflow: hidden;}
    #home-projects .splide__slide .image{width: 120%; height: 120%; transform: translate(-10%, -10%); position: relative; transition: 1s ease-out;}
    #home-projects .splide__list .current-item .image{width: 100%; height: 100%; transform: translate(0, 0);}
    #home-projects #projects-text {width: 320px;  right: 33%; bottom: 50px;}
    #home-projects #projects-text{height: 280px;}
    #home-projects #projects-text .project-text{width: 100%; height: calc(100% - 40px);}
    #home-projects #projects-text .project-text .project-title, #home-projects #projects-text .project-text .project-text-content {transform: translateY(100%); opacity: 0; pointer-events: none; transition: 1s;}
    #home-projects #projects-text .active .project-title, #home-projects #projects-text .active .project-text-content {transform: translateY(0); opacity: 1; pointer-events: default; transition-delay: 0.8s; transition-timing-function: cubic-bezier(0,0.75,0.75,1);}
    #home-projects #projects-text .after .project-title, #home-projects #projects-text .after .project-text-content {transform: translateY(-100%); transition-timing-function: cubic-bezier(1,0.75,0.5,1);}
    .project-text-content{font-size: 22px; line-height: 22px;}
    .project-title{font-size: 28px; font-weight: bold;}
    #home-projects #projects-text .counter-line { bottom: 0; left: 100%; transform: translateX(0); height: 2px; width: 0;}
    #home-projects #projects-text .active .counter-line {transform: translateX(-100px); width: 100px; transition: 5s; transition-timing-function: ease-in;}
    /* #home-projects #projects-text .after .counter-line {transform: translateX(-100px); width: 0; transition-timing-function: ease-out;} */
    #home-projects #projects-text #project-counter { bottom: 10px; position: absolute; right: 0; margin: 0;}


/* PORTFOLIO */
#gallery {overflow-x: hidden; height: 90vh;}
#gallery .image{box-shadow: 5px 5px 10px #333333;}
.gallery-listing {height: 80vh; width: fit-content; transform: translateY(-72px); position: relative; top: 10vh; transition: 0.5s;}
.gallery-listing > div {width: 80vw; box-sizing: border-box; padding: 40px;}
.gallery-listing > div:first-child{width: 23vw; padding: 24px;}
.two-horizontal-photos {display: flex; flex-direction: column;}
.two-vertical-photos {display: flex;}
.two-horizontal-photos > div, .two-vertical-photos > div{ flex: 1 1 100%; box-sizing: border-box; padding: 20px;}
.four-photos, .four-photos-text {display: grid; grid-template-columns: auto auto; grid-template-rows: 50% 50%; gap: 10px;}
.six-photos {display: grid; grid-template-columns: auto auto auto; grid-template-rows: 50% 50%; gap: 10px;}

/* COLLECTION */
#collection-page #texts{width: 40vw; margin: 100px auto; text-align: justify;}
#collection-page #preview {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
#collection-page #preview-text {width: 300px; margin: 0 auto;}
#collection-page .brand-collection-item {overflow: hidden;}
#collection-page .brand-collection-item .brand-collection-title {transform: translateY(70px); transition: 0.5s;}
#collection-page .brand-collection-item:hover .brand-collection-title {transform: translateY(0);}
#collection-page .brand-collection-item .brand-collection-text {opacity: 0; transition: 0.5s; transform: translateX(-100px);}
#collection-page .brand-collection-item:hover .brand-collection-text {opacity: 1; transform: translateX(0);}
#collection-page #essence .image{height: auto; width: 60%; margin: 0 auto;}
#collection-page #essence #essence-text{width: 60%;}
#collection-page #quote{height: 600px;}
#collection-page #quote-text{bottom: 10%; left: 30%; width: 20%;}
.collection-text{font-size: 18px; line-height: 20px; align-items: center;}
.collection-text > *, #first-colection-text-5{flex: 1;}
.collection-text > .File{width: 270px; height: 270px; flex: unset;}
.collection-text .Text{padding: 10px;}
#first-colection-text-1,
#first-colection-text-2 .Text,
#second-colection-text-4 .Text,
#second-colection-text-5 .Text{display: none;}
#brand-collection-file-3 .File{width: 200px;}
#brand-collection-file-5{display: flex; flex-direction: row;}
#second-colection-text-5{width: 270px;}

/* ABOUT */
#big-pic h2{font-size: 8vw;}
#essence > div:first-child{width: 75%;}
#essence > div:last-child{width: 25%;}
#essence > div:last-child .File{width: 180%; transform: translate(-50%, -30%);}
#essence-text{padding: 60px 40% 60px 40px;}
#big-things{width: 95vw; margin: 0 auto; z-index: 2; position: relative;}
#big-things h1{font-size: 8vw; line-height: 8.5vw; z-index: 2; position: relative;}
#big-things-image{transform: translateY(-10vw);}
#going-further{transform: translateY(-20vw); position: relative; z-index: 2;}
#going-further h2{width: 60%; padding: 13vw 80px 100px; font-size: 60px;}
#going-further-image-1{width: 60%; left: 40%; position: relative; height: 70vh;}
#going-further-image-2{width: 60%; margin-top: -10vw; height: 70vh;}
#going-further-image-2 .image{height: 120%;}
#true-story h1{font-size: 25vw; margin: 0;}
#something-more > div:first-child{align-self: self-end;}
#something-more > div:nth-child(2){align-self: self-start;}
#something-more .File{height: 35vh;}
#something-more > div:last-child{width: 50%;}
#timeline:hover{cursor: grab;}
#timeline:active{cursor: grabbing;}
#timeline .splide__track{padding-bottom: 300px;}
#timeline .splide__slide .timeline-year-year, #timeline .splide__slide .timeline-text{opacity: 0.5;}
#timeline .splide__slide.is-active{font-weight: bold;}
#timeline .splide__slide.is-active .timeline-year-year, #timeline .splide__slide.is-active .timeline-text{opacity: 1;}
/* .timeline-year:before{content: ""; display: block; width: 100px; height: 1px; background-color: #000000; position: absolute; top: 50%; left: -30%;} */
.timeline-year-year{padding: 0 15px;}
.timeline-year-line{flex: 1; height: 0.5px; background-color: #3c605e;}
.timeline-year-line.after:after{content: ""; display: block; width: 20px; height: 1px; background-color: #000000; position: relative; left: 100%;}
#timeline .splide__slide .timeline-text{ transform: rotate(45deg) translate(158px, 23px); width: 500px;}

/* CONTACT */
#contact-image{width: 70vw;}
#contact-data{width: 30vw; align-self: flex-end; padding-bottom: 15vh;}
#contact-data #contact-file-1 .File{height: 280px;}
#contact-data #contact-file-2 .image{height: 200px; width: 300px; margin: 0 auto; box-shadow: 3px 3px 7px #555;}
#contacts-form{padding: 20px 50px; width: 115%;transform: translateX(-10%);}
#keep-in-touch{font-size: 8vw; transform: translateX(60px); z-index: 2;}
#menu-catalogue i{display: inline-block; transition: 0.5s transform ease-in; font-weight: bold;}
#menu-catalogue:hover i{transform: rotate(-90deg);}

/* BRAND */
#splide-brand .brand-item{width: 25%;}
.brand-icon{width: 250px; height: auto; margin: 0 auto;}
#brand-title{margin-bottom: 60px;}
.brand-item .brand-file{height: 130px; margin: 0 auto 40px;}

/* architecture */
#architecture-banner{height: 400px; padding: 100px 0;}
.banner-text-bg{width: 45%; top: 50%; transform: translateY(-50%); right: 150px; padding: 60px; position: absolute;}
#architecture-sketch-2{width: 80%; padding-left: 20%;}
#architecture-stage-one > div{ padding: 40px; border-right: 1px solid #999; }
#architecture-stage-one > div p{font-size: 18px; font-weight: bold;}
#production-heading{height: 400px;}
#production-heading-text{left: 50%; top: 50%; transform: translate(-50%, -50%)}
#production-heading-text .background{width: 150px; height: 150px; border-radius: 100%; left: -7px; top: -57px;}
#production-service-text{padding: 0 20% 0 5%;}
#factory-image{height: 80vh;}
#supervise-image{height: 100vh;}
#guarantee-file{width: 55%; flex: unset;}
#sustainability-text{padding-left: 30%;}
#social-responsibility{height: 600px; padding: 100px 0;}
#social-responsibility .banner-text-bg{width: 40%; height: auto; top: 50%; transform: translateY(-50%); padding: 50px;}
#sketch-three{height: 450px; z-index: 2;}
.sketch-three-1 .image{height: 80%; top: 20%; position: relative;}
#sketch-three .image{object-position: bottom;}
#sketch-four{height: 450px;}
#architecture-file-2{transform: translate(150px, -150px);}

.patchwork-image{padding: 20px; box-sizing: border-box; height: 50vh;}
.patchwork-image .File{width: 80%; height: 80%;}
#patchwork-2 .File, #patchwork-4 .File{position: relative; left: 20%;}
#patchwork .background{filter: brightness(1.3); }
#patchwork-3 .File, #patchwork-4 .File{position: relative; top: 20%;}
#multiapartment-logo{width: 40%; margin: 0 auto;}
#multiapartment-projects{height: 140px; width: 35%; flex: unset;}
#multiapartment-1{height: 60vh; transform: scaleX(1.3)}
#multiapartment-2{height: 40vh; width: 60%; top: 5vh; position: relative;}
#multiapartment-3{height: 20vh;}
#multiapartment-4{height: 30vh;}
#multiapartment-5{height: 50vh;}
#architecture-philosophy{height: 140vh; margin-top: 100px;}
.page-30 #index{margin-bottom: -400px;}

/* FOOTER */
#footer{margin-top: 80px; position: relative;}
#footer-main{width: 82%; align-items: flex-end;}
#footer-branding{flex: 1; justify-content: space-evenly;}
#footer-main h1{width: 70%;}
#footer-main #footer-image{width: 30%;}
#footer-text{width: 40%;}
#footer-text table td{padding-right: 10px;}
#footer-text:after{content: ""; display: block; width: 100%; height: 1px; background-color: #ffffff; position: absolute; bottom: -5px; right: -50px;}

@media (max-width: 1480px) {
    #brand-collection-file-3 .File{width: 150px;} 
    #footer-text{width: 60%;}
    #home-trait{width: 100vw;}
    #site-menu, #site-menu-background{width: 100%;}
}

@media (max-width: 1280px) {
    #brand-collection-file-3 .File{display: none;}
    .collection-text > .File{width: 170px; height: auto;}
    #home-trait-content{ margin-bottom: 0;}
}

@media (max-width: 1080px) {
    #home-trait-content{display: block;}
    .heading-medium{font-size: 48px; line-height: 50px;}

    #collection{width: 100%; left: 0;height: 500px;}
    .brand-collection-file{height: calc(100% - 120px); margin-top: 120px; box-sizing: border-box;}
    .collection-text{height: fit-content;}
    #brand-collection-items{width: 100vw;}
    #brand-collection-items{top: 0; bottom: unset; z-index: 3;}
    #brand-collection-items > .flex{display: block;}
    #brand-collection-items .brand-collection-item.active{width: 100%;}
    #brand-collection-items .brand-collection-item.active .brand-collection-background{height: 100%;}
    #brand-collection-items .brand-collection-item.active .brand-collection-content{bottom: 50%;}
    .brand-collection-item.active .brand-collection-content > .flex{display: flex; justify-content: center; width: fit-content; margin: 0 auto;}
    .brand-collection-item.active .collection-logo{width: 60px; height: 60px; margin-bottom: 0;}
    #brand-collection-file-1{top: 20%;}
    #first-colection-text-2 {display: none;}
    #second-colection-text-2{left: 25%; width: 75%; top: 45%; height: fit-content;}
    #first-colection-text-3{position:absolute;width:75%;left:25%; height: fit-content; bottom: 65%;}
    #second-colection-text-3{position:absolute;left:25%;width:75%; height: fit-content; top:65%}
    #first-colection-text-4{position:absolute;width:75%;height:60%;left:25%;top:0;}
    #second-colection-text-4{position:absolute;left:50%;width:50%;height:40%;top:77%}
    #brand-collection-file-5{left:25%;top:15%}
    #second-colection-text-5{display: none;}
    #first-colection-text-5 .image{height: 127px; object-position: right 20px;}
    #menu-header-items-wrapper{display: flex;}
    #brand-collection-line{margin: 50px auto; width: 40%;}
    #contacts-panel{display: block;}
    #contacts-panel > *{width: 100vw;}
    #contact-data{display: flex; justify-content: space-evenly;}
    #footer{margin-top: 30px;}
    #footer-branding{display: block;}
    #footer-main h1{width: 100%;}
    #footer-main #footer-image{width: 100%;}
    #footer-text{align-self: flex-end; width: 55%;}
    .brand-collection-file{justify-content: flex-start;}
    .brand-collection-item .collection-logo{display: none;}
    .brand-collection-item.active .collection-logo{display: block;}
    #footer-main{display: block;}
    #footer-text{width: 100%; padding-top: 20px; padding-left: 0; text-align: right;}
    #footer-text table{display: inline-block;}
    #footer-text table td{padding-right: 0;}
    #contacts-form{width: auto; transform: unset;}
    #architecture-banner{height: auto; padding: 0;}
    #architecture-banner .background{position: relative;}
    #architecture-banner .banner-text-bg{position: relative; width: 100%; top: 0; transform: unset; right: 0;}
    .architecture-home-trait #home-trait-text{padding: 40px;}
    #architecture-philosophy{height: 80vh;}
    #multiapartment-1{transform: scaleX(1.2);}
}


@media (max-width: 768px){
    .frame{width: 100%;}
    #top-menu{top: -120px;}
    #top-menu > .frame, #menu-control{display: block;}
    .heading-medium{font-size: 32px; line-height: 36px;}
    #menu-open{position: absolute; top: 10px; right: 0;}
    #top-menu .languages{right: 30px; top: 40px;}
    #header-slogan{font-size: 17px; letter-spacing: 1px; text-align: left; margin: 0;}
    
    #banner{height: 71vh;}
    .splide .splide__pagination{width: 100%;}
    .brand-collection-file{height: calc(100% - 249px); margin-top: 120px; box-sizing: border-box;}
    .brand-collection-file .File{display: none;}
    #splide-brand{justify-content: center;}
    #splide-brand .brand-item{width: 50%;}
    .brand-item .brand-file{height: 100px; margin: 0 auto 20px;}
    #collection{height: 600px;}
    .brand-collection-title{font-size: 16px; padding-left: 5px;}
    #brand-collection-items .brand-collection-item{width: 25%;}
    .collection-text{font-size: 16px;}
    #brand-collection-file-1{top: 17%;}
    #first-colection-text-2{top: 0;}
    #first-colection-text-3{bottom: 60%;}
    #second-colection-text-3{top: 60%;}
    #first-colection-text-5{position:absolute;position: absolute; bottom: 20%;}
    #first-colection-text-4{bottom: 48%; top: unset;}
    #brand-collection-file-5{top: 0;}
    #trait-file-2{top: 0; left: 0;}
    
    #first-colection-text-5{display: block;}
    #second-colection-text-5{display: none;}
    #first-colection-text-2 .File, #second-colection-text-4 .File, #brand-collection-file-5 .File{display: block; height: fit-content;}
    #first-colection-text-2{left: 61%; height: 18%;}
    #second-colection-text-4 {left: 31%; width: 66%; height: 22%; top: 83%;}
    #first-colection-text-5 .File{margin: 0 auto;}
    #menu-header-items-wrapper{display: block;}
    #contact-image{height: 70vh;}
    #contact-data{display: block;}
    #contact-data-files{display: flex;}
    #contact-data-files > *{width: 50%;}
    #contact-data #contact-file-1 .File{height: 100%;}
    #contact-data-files .image, #contact-data-files #contact-file-2 .image{width: 100%; height: 100px;}
    #contact-data{padding: 30px 0;}
    #contact-us-panel{display: block;}
    #keep-in-touch{font-size: 58px;transform: unset; text-align: center; z-index: 2; position: relative;}
    #contact-data-texts{text-align: center;}

    #architecture-banner .banner-text-bg{padding: 30px;}
    #sketch-three, #sketch-four{height: 250px;}
    #architecture-file-2{transform: translate(50px, -50px);}
    #patchwork{height: auto;}
    #patchwork .flex{flex-direction: column;}
    #multiapartment-2{width: 100%;}
    #multiapartment-3{flex-direction: column; z-index: 2; position: relative;}
    #multiapartment-projects{width: 65%; left: 35%; position: relative;}
    #multiapartment-4{transform: translate(20px, 40px);}
    .page-30 #index{margin-bottom: -200px;}
    .heading-big{font-size: 60px; line-height: 65px;}
    .top-brands {flex-wrap: wrap;}
    .top-brands > *, .top-brands .File{width: 50vw; padding: 0;}
    #promotions{top: unset; bottom: 100px;}
    .promotions-item{height: 50px; font-size: 14px;}
}

@media (max-width: 568px){
    #footer-text table td, #footer-bottom{display: block;}
    #footer-bottom > *{text-align: center;}
}