body,
    h1,
    html,
    li,
    p,
    ul {
        margin: 0;
        padding: 0
    }
  li,
    ul {
        list-style: none
    }

    p {
        letter-spacing: .25px
    }
:root {
    --themeblack: #3F3F3F;
    --white: #ffffff;
}

/* Fonts */
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Bold.woff') format('woff2'),
        url('../fonts/Gilroy-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Heavy.woff2') format('woff2'), url('../fonts/Gilroy-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-ExtraBold.woff2') format('woff2'), url('../fonts/Gilroy-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

a svg,
body.transitioning {
    pointer-events: none
}

body {
    overflow: hidden
}

#style-header img,
body,
html {
    max-width: 100%
}

#text_list li a,
#section_wrapper a {
    text-decoration: none
}

::selection {
    background-color: var(--selection-color, rgba(0, 0, 0, .25));
    color: #1b1b1b
}

.notification_head p {
    color: #fff;
}

body,
html {
    font-family: 'Gilroy';
    font-weight: 400;
    -webkit-font-smoothing: subpixel-antialiased;
    overflow-x: hidden;
    position: relative
}

#text_list .project-name span,
#menu-button.opened div:nth-child(2),
body.fonts-loading {
    opacity: 0
}
a:focus {
    outline: 0
}

#ribbon {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh
}

#ribbon.case-detail-mode {
    position: absolute;
    height: 112.5vw;
    min-height: 1600px
}

#follow-bar a,
#footer #social a,
#menu li a,
#menu ul,
#menu ul li ul {
    position: relative
}

#main_main_main_main_main_main_main_main_wrapper {
    width: 100%;
    transform-origin: center 50vh
}

h2.desktop_hiddn {
    font-size: 40px;
    margin: 0px 0px 12px 0px;
    color: #38ABB9;
    display: none;
}
/*
.container,
.section-content {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    position: relative
}
*/
.section {
    width: 108.108108%;
    margin-left: -4.05%
}

.section.dark {
    color: #fff
}

/* Admin css */
#text_list li {
    font-size: 23px;
    font-family: 'Gilroy';
    line-height: 1.17em;
}

canvas#ribbon {
    display: none;
}

#section_wrapper .arrow img {
    width: 14px;
}

ul#desktop_hiddn {
    width: 90%;
    margin: 0 auto;
    padding: 60px 0px;
}

ul#desktop_hiddn li.page.mobile_sec {
    margin-bottom: 50px;
}

ul#desktop_hiddn {
    display: none;
}

@media only screen and (min-width:1600px) {
    .section {
        width: 100vw;
        margin-left: calc(-50vw + 740px)
    }
}

@media only screen and (max-width:1280px) {
    .section-content {
        width: 90%
    }

    .section {
        width: 111.111111%;
        margin-left: -5.5555555%
    }
}

@media only screen and (max-width:768px) {

    .container,
    .section-content {
        width: 88%
    }

    .section {
        width: 113.636364%;
        margin-left: -6.818182%
    }
}

@media only screen and (max-width:580px) {
    #text_list {
        display: none;
    }

    .container,
    .section-content {
        width: 75%
    }

    #section_wrapper {
        width: 100%;
        margin: 0px;
    }

    ul#desktop_hiddn {
        display: block;
    }
}

.inner_wrap {
    z-index: 0
}

#text_list {
    width: 400px;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    position: fixed;
    left: calc(20.772563% - 200px);
    top: calc(50vh + 35px);
    transform: translateY(-200px);
    color: #1b1b1b;
    font-weight: 600
}

#text_list li,
#text_list li a,
#case-styles,
#section_wrapper,
#section_wrapper a,
.case,
.case .lazy-main_main_main_main_main_main_main_main_wrapper,
.case-title,
.desktop-layout {
    position: relative
}

#text_list.absolute {
    position: absolute;
    left: calc(16.21621622% - 200px)
}

#text_list li {
    margin: 48px 0;
    z-index: 1
}

#text_list li a {
    color: #000000;
        transition: unset;
}

#text_list .project-name {
    display: none;
    position: absolute;
    left: 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: .2em;
    padding-top: 10px;
    transform: translateY(-10px);
    width: var(--initial-width, auto);
    transition: width .25s;
    opacity: var(--initial-opacity, 0)
}

#text_list a:hover .project-name {
    opacity: 1;
    width: var(--full-width, 500%)
}

#text_list li.closing a:hover .project-name,
#text_list li.make_attece a:hover .project-name {
    width: var(--initial-width, 0%)
}

#section_wrapper {
    margin-left: 42%;
    padding: 0;
    transition: filter .5s
}

#section_wrapper li {
    height: 100vh
}

#section_wrapper a {
    display: block;
    color: #1b1b1b;
    top: 50%;
    transform: translateY(-50%)
}

#section_wrapper h3 {
    margin: 0 0 18px;
    font-family: 'Gilroy';
    font-size: 23px;
}

.notification_head {
    text-align: center;
    background: #ff601f;
    padding: 8px;
    position: relative;
    z-index: 999;
}

#section_wrapper .hide_wrap h2 {
    padding-top: 0
}

ul#text_list li,
ul#text_list li span {
    position: relative;
    z-index: 1;
    text-align: left;
}

ul#desktop_hiddn .flx_wrap h2.desktop_hiddn {
    margin: 0;
}

ul#desktop_hiddn li.page.mobile_sec h3 {
    margin: 5px 0 15px 0px;
}

.arrow_mobile a {
    display: block;
}

.contain_wrap {
    width: 55%;
}

.flx_wrap,
.arrow_mobile a {
    display: flex;
    gap: 15px;
    align-items: center;
}

#section_wrapper p {
    font-size: 16px;
    line-height: 1.59em;
    font-family: 'Gilroy';
    font-weight: 500;
    color: var(--themeblack);
}

#section_wrapper .arrow {
    display: block;
    position: absolute;
    height: 86px;
    width: 16.959064%;
    bottom: 0;
    right: 16.900585%
}

#section_wrapper .arrow img {
    position: absolute;
    right: 2px;
    top: 31px
}

#section_wrapper .arrow .spine {
    background: #1b1b1b;
    height: 2px;
    top: 42px;
    left: 0;
    right: 4px;
    position: absolute;
    transition: left .25s cubic-bezier(.475, -.020, .010, 1.005)
}

#section_wrapper a .arrow .spine.transitioning,
#section_wrapper a:hover .arrow .spine {
    left: 13.836478%
}

#section_wrapper a:hover .arrow .circle {
    opacity: 1
}

@media only screen and (max-width:1280px) {
    #text_list {
        width: 300px;
    }

    .contain_wrap {
        width: 55%;
    }

    #text_list {
        left: calc(24.416667% - 200px)
    }

    #text_list.absolute {
        left: calc(21.5625% - 200px)
    }

    #section_wrapper {
        margin-left: 42%;
    }

    #section_wrapper .arrow {
        right: 8.4%;
        width: 25.4%
    }

    #section_wrapper a .arrow .spine.transitioning,
    #section_wrapper a:hover .arrow .spine {
        left: 16.860465%
    }
}

@media only screen and (max-width:992px) {
    #section_wrapper .arrow {
        left: 0px;
        top: 100%;
    }

    #section_wrapper {
        margin-left: 55%;
    }

    #text_list {
        left: calc(35% - 200px);
    }

    .contain_wrap {
        width: 100%;
        padding-right: 40px;
    }

    #text_list {
        width: 260px;
    }
}

@media only screen and (max-width:768px) {
    #text_list {
        left: calc(37% - 200px);
    }

    #section_wrapper {
        margin-left: 45%;
    }

    #section_wrapper a .arrow .spine.transitioning,
    #section_wrapper a:hover .arrow .spine {
        left: 16.346154%
    }

    #section_wrapper p {
        font-size: 14px;
    }

    #text_list li {
        margin: 30px 0;
    }

    .container {
        width: 85%;
    }

    #text_list li a {
        padding-right: 20px;
    }

    .contain_wrap {
        padding: 0;
    }
}

@media only screen and (max-width:580px) {
    #text_list {
        left: calc(67% - 200px);
    }

    #text_list li {
        margin: 15px 0;
    }

    .container {
        width: 95%;
    }

    #text_list li {
        transition: opacity 325ms linear
    }

    #text_list li.above {
        opacity: 0
    }

    #section_wrapper {
        margin-left: 0%;
        width: 100%;
    }

    h2.desktop_hiddn {
        display: block;
        font-size: 32px;
        line-height: 1.2;
    }

    #section_wrapper,
    .supp {
        display: none;
    }
}

#section_wrapper .arrow .circle.transitioning,
#section_wrapper .arrow .spine.transitioning,
#section_wrapper .arrow img.transitioning,
#section_wrapper a .arrow .circle.transitioning,
#section_wrapper h3.transitioning,
#section_wrapper p.transitioning {
    transition: opacity .75s cubic-bezier(.19, 1, .22, 1), transform .75s cubic-bezier(.19, 1, .22, 1)
}

#section_wrapper h3.transition-in,
#section_wrapper h3.transition-out,
#section_wrapper p.transition-in,
#section_wrapper p.transition-out {
    opacity: 0;
    transform: translate3d(-50vw, 0, 0) scale(.1);
    transition-delay: 0
}

#section_wrapper .arrow .circle.transition-in,
#section_wrapper .arrow .circle.transition-out,
#section_wrapper .arrow .spine.transition-in,
#section_wrapper .arrow .spine.transition-out,
#section_wrapper .arrow img.transition-in,
#section_wrapper .arrow img.transition-out,
#section_wrapper a:hover .arrow .circle.transition-in,
#section_wrapper a:hover .arrow .circle.transition-out {
    opacity: 0;
    transform: translate3d(25vw, 0, 0) scale(.5);
    transition-delay: 0
}

    html, body {
    scroll-behavior: unset;
}

#section_wrapper li:nth-child(1) a {
        transform: translateY(-90%);
    }

        body .header-section {
            margin: 0px;
        }

@media only screen and (max-width: 768px) {
        body .header-section {
            margin-top: 53px !important;
        }

        body #text_list li a {
            padding: 0;
        }

        .header-inner.flex {
            left: 0px;

        }
 		#wrapper .container {
                padding: 0px;
            }

            #section_wrapper li a {
                transform: translateY(-90%);
                top: 50%;
            }

    }