html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
object{ outline: 0; }
strong, b, strong *, b * { font-weight: bold; }
em, i, em *, i * { font-style: normal !important; }
a:focus, input:focus{ outline-style: none; }
textarea{ outline: none; }
*{ box-sizing: border-box; }

@font-face { font-family: 'clarika'; src: url('fonts/ClarikaProGrot-Rg.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'clarika-bold'; src: url('fonts/ClarikaProGeo-Bd.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'clarika-geo'; src: url('fonts/ClarikaProGeo-Rg.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'clarika-light'; src: url('fonts/ClarikaProGeo-Lt.woff') format('woff'); font-weight: normal; font-style: normal; }

html{ scroll-behavior: smooth; }
body{ background: #171717; color: #fff; font-size: 16px; line-height: 28px; min-height: 100vh; padding: 0; font-family: 'clarika'; overflow-x: hidden; }

@keyframes moveup{ 0% { transform: translateY(16px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes moveup-rev{ 0% { transform: translateY(0); opacity: 1 } 100% { transform: translateY(16px); opacity: 0 } }
@keyframes rotate{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes homeappear{ 0% { transform: scale3d(.8,.8,.8); opacity: 0; } 100% { transform: scale3d(1,1,1); opacity: .3; } }
@keyframes homebg{ 0% { transform: rotate3d(1, 1, 1, -12deg) scale3d(1.1, 1.1, 1.1); } 50% { transform: rotate3d(1, 1, 1, 12deg) scale3d(1.4, 1.4, 1.4); } 100% { transform: rotate3d(1, 1, 1, -12deg) scale3d(1.1, 1.1, 1.1); } }
@keyframes fadein{ 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes cornerappear{ 0% { transform: translateY(-400px) } 100% { transform: translateY(0) } }
@keyframes bgreveal{ 0% { background-position-x: 100vw;  } 100% { background-position-x: 0vw;  } }
@keyframes bgrevealinner{ 0% { background-position-x: -100vw;  } 100% { background-position-x: 0vw;  } }
@keyframes subappear{ 0% { width: 0;  } 100% { width: 64px;  } }
@keyframes dialogboxin{ 0% { transform: scale(1.2, 1.2); opacity: 0;  } 100% { transform: scale(1, 1); opacity: 1; } }
@keyframes dialogbgin{ 0% { background: rgba(0,0,0,0)  } 100% { background: rgba(0,0,0,0.8) } }
@keyframes fadein{ 0% { opacity: 0;  } 100% { opacity: 1; } }

.mt-1{ margin-top: 8px; }
.mt-2{ margin-top: 16px; }
.mt-3{ margin-top: 32px; }
.mt-4{ margin-top: 48px; }
.mt-5{ margin-top: 64px; }

.move-up{ transform: translateY(16px); opacity: 0; animation: moveup .3s; animation-fill-mode: both; }

.delay-1{ animation-delay: 1.3s; }
.delay-2{ animation-delay: 1.6s; }
.delay-3{ animation-delay: 1.9s; }
.delay-4{ animation-delay: 2.2s; }
.delay-5{ animation-delay: 2.5s; }
.delay-6{ animation-delay: 2.8s; }
.delay-7{ animation-delay: 3.1s; }
.delay-8{ animation-delay: 3.4s; }
.delay-9{ animation-delay: 3.7s; }
.delay-10{ animation-delay: 4s; }
.delay-11{ animation-delay: 4.3s; }
.delay-12{ animation-delay: 4.6s; }
.delay-13{ animation-delay: 4.9s; }

.q-delay-1{ animation-delay: .3s; }
.q-delay-2{ animation-delay: .6s; }
.q-delay-3{ animation-delay: .9s; }
.q-delay-4{ animation-delay: 1.2s; }
.q-delay-5{ animation-delay: 1.5s; }
.q-delay-6{ animation-delay: 1.8s; }
.q-delay-7{ animation-delay: 2.1s; }
.q-delay-8{ animation-delay: 2.4s; }
.q-delay-9{ animation-delay: 2.7s; }
.q-delay-10{ animation-delay: 3s; }
.q-delay-11{ animation-delay: 3.3s; }
.q-delay-12{ animation-delay: 3.6s; }
.q-delay-13{ animation-delay: 3.9s; }


.menu-toggle{ transition: .3s; position: absolute; background: transparent; top: 64px; right: calc(50% - 600px); font-size: 14px; z-index: 11; cursor: pointer; display: flex; align-items: center; }
    .menu-toggle.open{ position: fixed; }
    .menu-toggle:hover{ opacity: .5; }
    .menu-toggle .icon{ width: 20px; height: 20px; position: relative; }
    .menu-toggle .icon div{ width: 18px; height: 2px; background: #fff; position: absolute; transition: .3s; }
    .menu-toggle .line-1{ top: 0; left: 0; }
    .menu-toggle .line-2{ top: 8px; left: 0; }
    .menu-toggle.open .icon .line-1{ transform: rotateZ(45deg); top: 2px }
    .menu-toggle.open .icon .line-2{ transform: rotateZ(-45deg); top: 2px }
    .menu-toggle .label{ font-family: 'clarika-bold'; transform: translateY(-5px); margin-left: 8px; text-transform: uppercase; letter-spacing: 2px; font-size: 15px; }

.page-logo{ width: 96px; cursor: pointer; transition: .3s; }
    .page-logo:hover{ opacity: .8; }
    .page-logo img{ width: 100%; }

.width{ max-width: 1200px; margin: auto; }
    .width.medium{ max-width: 1080px; margin: auto; }
    .width.padded{ padding: 36px 0; }

.menu{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; padding: 64px; overflow: hidden; }
    .menu .bg-1{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: #333; transition: .5s ease-in-out; opacity: 0; }
    .menu .bg-2{ position: absolute; top: 0; left: 0; width: 200%; height: 100%; z-index: 2; background: linear-gradient(135deg, rgba(0,0,0,0) 30%, #171717 30%); transform: translateX(100%); transition: 1.5s ease-in-out; }
    .menu .bg-3{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; background: linear-gradient(135deg, rgba(0,0,0,0) 60%, #202020 60%); transform: translateX(200%); transition: 1.5s ease-in-out; }
    .menu.on .bg-1{ opacity: .8; }
    .menu.on .bg-2{ transform: translateX(-50%); }
    .menu.on .bg-3{ transform: translateX(0); }
    .menu a{ color: #fff; text-decoration: none; }
    .menu .inner{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; transition: .3s; }
        .menu.closing .inner{ opacity: 0; }
        .menu .width{ min-height: 100vh; padding: 64px 0; display: flex; flex-direction: column; justify-content: space-between; }
    .menu .links{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 32px; }

.menu-item{ display: flex; }
    .menu-item .no{ font-size: 16px; margin-right: 12px; opacity: .5; transition: .3s; }
        .menu-item:hover .no{ color: #F32828; opacity: 1; }
    .menu-item .label{ font-size: 36px; transition: .3s; font-family: 'clarika-light'; }
        .menu-item:hover .label{ text-shadow: 0 0 3px #fff; }
    .menu-item .sub{ width: 36px; height: 1px; background: #4F4F4F; margin-top: 18px; }
        .menu-item .sub .fill{ width: 0; height: 1px; background: #F32828; transition: .3s; }
        .menu-item:hover .sub .fill{ width: 100%; }

.menu .logo img{ width: 120px; opacity: 0; transition: .6s; transition-delay: 1s; }
    .menu.on .logo img{ opacity: 1; }
.menu .bottom{ opacity: 0; transition: .6s; transition-delay: 1s; display: flex; align-items: flex-end; }
    .menu.on .bottom{ opacity: 1; }
    .menu.on .lang{ margin-left: auto; }

.lang a{ opacity: .7; color: #fff; text-decoration: none; }
    .lang a:hover{ opacity: 1; }

.loader{ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9; background: #171717; display: flex; align-items: center; justify-content: center; animation: fadein; animation-duration: .3s; animation-fill-mode: forwards; }
    .loader .inner{ width: 360px; height: 360px; position: relative; transition: .8s; transition-delay: .5s; }
        .loader.hiding .inner{ opacity: 0; }
    .loader .spinner{ position: absolute; top: 0; left: 0; width: 360px; height: 360px; border: transparent 3px solid; border-radius: 50%; border-left-color: red; display: flex; align-items: center; justify-content: center; animation: rotate 1.5s linear infinite; }
    .loader .circle{ position: absolute; top: 1px; left: 1px; width: 358px; height: 358px; border: #555 1px dotted; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .loader .corner{ animation-name: cornerappear; transform: translateY(-400px); animation-fill-mode: both; animation-duration: .5s; position: absolute; top: 0; width: 400px; height: 400px; background: #ccc; transition: .8s; }
        .loader.hiding .corner{ animation-name: cornearappear; animation-direction: reverse; animation-duration: 1s; }
        .loader .corner.left{ left: 0; background: linear-gradient(-45deg, transparent 50%, #1F1F1F 50%) }
        .loader .corner.right{ right: 0; background: linear-gradient(45deg, transparent 50%, #1F1F1F 50%) }

.page-bg{ min-height: 100vh; background: linear-gradient(-45deg,  #202020 0%, #202020 40%, transparent 40%) no-repeat; animation-name: bgreveal; animation-duration: 1s; animation-fill-mode: both; }
.page-bg-inner{ min-height: 100vh; background: linear-gradient(-45deg,  transparent 0%, transparent 80%, #202020 80%) no-repeat; animation-name: bgrevealinner; animation-duration: 1s; animation-fill-mode: both; }

.txt{ font-size: 18px; line-height: 30px; color: #828282; }
    .txt p{ margin-top: 12px; }
    .txt p:first-child{ margin-top: 0; }
 
.hider{ position: fixed; width: 300%; height: 100%; top: 0; left: 100%; transition: 1s; background: linear-gradient(45deg,  transparent 0%, transparent 20%, #000 20%, #000 40%, #171717 40%, #171717 100%); z-index: 1000; }
    .hider.hiding{ left: -150%; }

.home-tiles{ width: 100%; height: 100vh; overflow: hidden; z-index: 0; position: absolute; top: 0; left: 0; z-index: 0; }
    .home-images{ animation-name: homebg; animation-timing-function: linear; animation-duration: 20s; animation-iteration-count: infinite; animation-fill-mode: forwards; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; transform: rotate3d(1, 1, 1, 12deg) scale3d(1.1, 1.1, 1.1); } 
        .home-images img{ width: 100%; transition: .5s; }
        .home-appear{ animation-name: homeappear; animation-timing-function: ease-out; animation-duration: .5s; animation-fill-mode: both; }
        .home-images img.fully-visible{ opacity: .8 !important; }

.top-fade{ background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0)); animation-name: fadein; animation-duration: .5s; animation-fill-mode: both; position: absolute; top: 0; left: 0; width: 100%; height: 50%; }

.home-main{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; }
    .hero-text{ margin-top: 30px; font-size: 48px; line-height: 1.2; font-family: 'clarika-bold'; text-align: center; }
        .hero-text .sm{ margin-top: 16px; font-size: 24px; letter-spacing: 5px; text-transform: uppercase; line-height: 1.2; font-family: 'clarika-bold'; text-align: center; }
    .home-main .logo{ text-align: center; }
    .home-main .logo img{ margin: auto; }
    .home-main .action{ margin-top: 64px; text-align: center; }

.btn{ background: rgba(0,0,0,0); display: inline-block; position: relative; padding: 14px 36px; cursor: pointer; text-transform: uppercase; font-size: 14px; font-family: 'clarika-bold'; letter-spacing: 2px; color: #fff; transition: .3s; }
    .btn.small{ padding: 8px 24px; }
    .btn .square{ width: 12px; height: 12px; position: absolute; border: #fff 2px solid; border-radius: 4px; transition: .3s; }
    .btn .sq-1{ top: 0; left: 0;  border-bottom-color: transparent; border-right-color: transparent; border-radius: 4px 0 0 0; }
    .btn .sq-2{ top: 0; right: 0;  border-bottom-color: transparent; border-left-color: transparent; border-radius: 0 4px 0 0; }
    .btn .sq-3{ bottom: 0; right: 0; border-top-color: transparent; border-left-color: transparent; border-radius: 0 0 4px 0; }
    .btn .sq-4{ bottom: 0; left: 0; border-top-color: transparent; border-right-color: transparent; border-radius: 0 0 0 4px; }

    .btn:hover{ color: red; text-shadow: 0 0 4px red; }
    .btn:hover .sq-1{ transform: translate(-3px, -3px); border-left-color: red; border-top-color: red }
    .btn:hover .sq-2{ transform: translate(3px, -3px); border-right-color: red; border-top-color: red }
    .btn:hover .sq-3{ transform: translate(3px, 3px); border-right-color: red; border-bottom-color: red }
    .btn:hover .sq-4{ transform: translate(-3px, 3px); border-left-color: red; border-bottom-color: red }
    
.masonry{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 64px; margin-top: 32px; margin-bottom: 130px; }
    .masonry > div:nth-child(odd){ grid-row-end: span 2; height: 325px; }
    .masonry > div:nth-child(even){ grid-row-end: span 2; }
    .masonry .big-title{ grid-row-end: span 1 !important; display: flex; align-items: center; }
    .masonry img{ width: 100%; display: block; }

.big-title h1{ font-family: 'clarika-light'; font-size: 80px; line-height: 1; }
    .big-title .sub{ width: 64px; height: 2px; background: red; margin-top: 18px; }
    .big-title h5{ width: 56px; font-size: 30px; opacity: .3; }

.med-title h1{ font-family: 'clarika-light'; font-size: 60px; line-height: 1; }
    .med-title .sub{ width: 64px; height: 2px; background: red; margin-top: 18px; }

.center-title h1{ text-align: center; font-family: 'clarika-light'; font-size: 60px; line-height: 1; }
    .center-title .sub{ width: 64px; height: 2px; background: red; margin: 18px auto auto auto; }

.sub-appear{ animation-name: subappear; animation-duration: .6s; animation-delay: 1s; animation-fill-mode: both; }

.film img{ cursor: pointer; border: #313131 16px solid; transition: .2s; }
    .film img:hover{ border-color: #4c4c4c; border-width: 24px; }

.item-grid{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 64px; }
    .item-grid img{ width: 100%; border: #313131 16px solid; }

.back{ color: #828282; transition: .3s; cursor: pointer; }
    .back svg{ margin-right: 8px; }
    .back:hover{ color: #fff; }

.service{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 64px; align-items: center; }
    .service img{ cursor: pointer; border: #313131 16px solid; transition: .2s; width: 100%; }
    .service img:hover{ border-color: #4c4c4c; }
    .service h2{ font-family: 'clarika-bold'; font-size: 30px; }
    .service .sub{ background: red; width: 32px; height: 2px; margin-top: 16px; }
    .service .action{ color: #fff; font-family: 'clarika-bold'; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; transition: .3s; cursor: pointer; }
        .service .action svg{ margin-right: 4px; }
        .service .action:hover { opacity: .5; }

.services{ display: grid; grid-template-columns: 1fr; grid-gap: 64px; }
    .services > div:nth-child(odd) > div:first-child{ grid-column: 2; grid-row: 1; }
    .services > div:nth-child(odd) > div:last-child{ grid-column: 1; grid-row: 1; padding-left: 64px; }
    .services > div:nth-child(even) > div:last-child{ padding-right: 64px; }

.about-item{ margin-top: 48px; padding: 48px 206px; }
    .about-item:nth-child(odd){ background: #FDFDFD; }
    .about-item:nth-child(odd) h2{ color: #000; }
    .about-item h2{ font-size: 30px; font-family: 'clarika-bold'; position: relative; }
    .about-item .txt{ margin-top: 32px; }
    .about-item .line{ position: absolute; left: -80px; top: 16px; width: 48px; height: 1px; background: red; }

.team{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 32px; }
    .team .member{ background: #2C2C2C; transition: .3s; cursor: pointer; transform: translateY(0); }
        .team .member:hover{ box-shadow: 0 8px 16px #000; transform:scale(1.02, 1.02); }
    .team .member img{ width: 100%; display: block; }
    .team .info{ padding: 24px 32px; }
    .team h2{ font-size: 24px; font-family: 'clarika-bold'; }
    .team .txt{ margin-top: 8px; }
    .team .more{ margin-top: 4px; text-transform: uppercase; font-family: 'clarika-bold'; letter-spacing: 1px; font-size: 13px; color: red; cursor: pointer; transition: .3s; }
        .team .more:hover{ color: #fff; }


.products{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 32px; }
    .products .product{ background: #2C2C2C; transition: .3s; cursor: pointer; transform: translateY(0); }
        .products .product:hover{ box-shadow: 0 8px 16px #000; transform:scale(1.02, 1.02); }
    .products .product img{ width: 100%; display: block; }
    .products .info{ padding: 24px 32px; }
    .products h2{ font-size: 16px; font-family: 'clarika-bold'; }
    .products .txt{ margin-top: 8px; }
    .products .more{ margin-top: 4px; text-transform: uppercase; font-family: 'clarika-bold'; letter-spacing: 1px; font-size: 13px; color: red; cursor: pointer; transition: .3s; }
        .products .more:hover{ color: #fff; }


.dialog{ position: fixed; overflow-y: auto; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.8); display: flex; align-items: flex-start; justify-content: center; padding: 64px; z-index: 30; animation: dialogbgin; animation-duration: .5s; animation-fill-mode: forwards; }
    .dialog .box{ background: #FDFDFD; max-width: 1080px; position: relative; animation: dialogboxin; animation-duration: .8s; animation-fill-mode: forwards; }
    .dialog .close{ position: absolute; top: 14px; right: 24px; cursor: pointer; color: #828282; font-size: 30px; }
        .dialog .close:hover{ color: #000; }

.member-details{ display: grid; grid-template-columns: 2fr 3fr; grid-gap: 32px; padding: 32px 48px; color: #000; }
    .member-details img{ width: 100%; }
    .member-details h2{ font-family: 'clarika-bold'; font-size: 30px; }
    .member-details .txt{ margin-top: 32px; }


.contact h2{ font-size: 24px; font-family: 'clarika-bold'; }

.send-message{ max-width: 640px; margin: auto; }
.contact-details{ max-width: 640px; margin: auto; }

.field{ display: block; width: 100%; font-family: 'clarika'; font-size: 16px; padding: 12px 24px; background: #111; border: #333 1px solid; color: #fff; transition: .3s; }
    .field:focus{ border-color: #666; background: #000; }
    textarea{ height: 200px; }
    .form label{ font-size: 16px; }
    .form .field{ margin-top: 8px; }

.footer{ background: #000; margin-top: 128px; padding: 64px 0; }
    .footer img{ width: 120px; }
    .footer .width{ display: grid; grid-template-columns: 1fr 3fr; }
    .footer .right{ display: flex; justify-content: end; }
        .footer .right > div{ margin-left: auto; }
    .footer .links span{ margin-right: 36px; font-size: 18px; }

    .footer .links span, .legal span{ opacity: .5; cursor: pointer; transition: .3s; }
        .footer .links span:hover, .legal span:hover{ opacity: 1; }

    .footer .bottom{ display: flex; align-items: flex-end; }
    .footer .lang{ margin-left: auto; }

    .legal{ font-size: 14px; } 
        .legal h3{ text-transform: uppercase; font-family: 'clarika-bold'; letter-spacing: 2px; }

.text-page{ background: #FDFDFD; margin-top: 48px; padding: 48px 206px; }

.soon{ text-align: center; font-size: 30px; padding: 128px; color: #666 }

.coming-soon{ text-align: center; font-size: 24px; text-transform: uppercase; letter-spacing: 4px; }

@media (max-width: 960px){

    .width, .width.padded{ padding-left: 24px; padding-right: 24px; }
    
    .home-main{ width: 100vw; height: 100vh; }
    .hero-text{ font-size: 24px; margin-top: 24px; }
    .home-main .logo img{ width: 100px; }
    .home-main .action{ margin-top: 30px; }
    .home-images{ grid-template-columns: 1fr 1fr; }

    .menu-toggle{ right: 24px; top: 24px; }

    .menu .width{ padding: 24px; }
    .menu .logo img{ width: 80px; }
    .menu .links{ grid-template-columns: 1fr; grid-gap: 12px; }
    .menu-item .sub{ margin-top: 8px; }
    .menu-item .label{ font-size: 24px; font-family: 'clarika';}
    .menu-item .no{ font-size: 13px; }
    .menu-toggle .label{ display: none; }

    .masonry{ display: block; margin-bottom: 0; }
    .masonry > div:nth-child(odd){ height: auto;}
    .masonry > div:nth-child(even){ height: auto;}
    .masonry > div{ margin-top: 24px; }
    .masonry .big-title{ display: block; }

    .page-logo{ width: 60px; }

    .big-title h1{ font-size: 30px; font-family: 'clarika-bold'; text-align: center; }
    .big-title .sub{ margin-left: auto; margin-right: auto; }

    .item-grid{ grid-template-columns: 1fr; grid-gap: 24px; }

    .med-title h1{ font-size: 30px; }

    .service{ grid-template-columns: 1fr; grid-gap: 18px; }
    .services > div:nth-child(odd) > div:first-child{ grid-column: 1; grid-row: 1; }
    .services > div:nth-child(odd) > div:last-child{ grid-column: 1; grid-row: 2; padding-left: 0; }

    .center-title h1{ font-size: 36px; }

    .team{ grid-template-columns: 1fr; }
    .products{ grid-template-columns: 1fr; }

    .about-item{ padding: 24px 32px; }
    .about-item h2{ line-height: 1.3; }
    .about-item .line{ display: block; position: static; margin-top: 12px; height: 2px }

    .dialog{ padding: 0; display: block; }
        .dialog .close{ top: 0; right: 12px; }

    .member-details{ grid-template-columns: 1fr; padding: 32px; }

    .btn{ padding: 8px 24px; font-size: 13px; }

    .loader .inner{ width: 180px; height: 180px;  }
    .loader .spinner{ width: 180px; height: 180px; }
    .loader .circle{ width: 178px; height: 178px; }
        .loader .corner{ display: none; }
        .loader img{ width: 80px; }

    .hider{ background: linear-gradient(66deg,  transparent 0%, transparent 20%, #000 20%, #000 40%, #171717 40%, #171717 100%); }

    .page-bg{ background: transparent;  }
        .page-bg-inner{ background: transparent; }

    .menu .bg-2{ background: transparent; }
    .menu .bg-3{ background: transparent; }
    .menu .bg-1{ transition: .5s ease-in-out; opacity: 0;}
        .menu.on .bg-1{ opacity: 1; }

    .footer{ padding: 24px 0; }
    .footer .width{ grid-template-columns: 1fr; }
        .footer .logo{ display: none; }
        .footer .links{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; }

        .text-page{ padding: 24px 32px; }

        .coming-soon{ text-align: center; font-size: 18px; text-transform: uppercase; letter-spacing: 3px; }

}