$usel(none){-moz-user-select:&a;-ms-user-select:&a;-webkit-user-select:&a;user-select: &a;}

/***** FONTS *****/
/* PRIMARY: 300, 500, 600, 700 */
$primaryFont(300) {font-family: "Open Sans", sans-serif; font-weight: &a;}

/***** FONT SIZE *****/
$bfont! {
    if (css.vars.w()>980) "18px";
    else "16px";
}

/**** FLEX *****/
$order(1){order:&a;-webkit-order:&a;}
$flex {display: -webkit-flexbox;display: -ms-flexbox;display: flex;}
$flexCenter {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
$flexContentEnd {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
$flexContentStart {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
$flexContentCenter {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
$flexItemCenter {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
$flexItemStart {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start}
$flexItemEnd {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
$flexColumn {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
$flexColumnR {-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}
$flexRow {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}
$flexRowR{-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
$flexContentSpaceBetween {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
$flexContentSpaceEvenly {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-evenly;}
$flexContentSpaceAround {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-around;}
$flexW(1) {-webkit-box-flex:&a;-ms-flex:&a;flex:&a;}
$flexWrap {flex-wrap: wrap;}

/****** ABSOLUTE POSITIONING *********/
$xCenter {left: 50%; transform: translateX(-50%);}
$yCenter {top: 50%; transform: translateY(-50%);}
$centerAll {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

/****** PSEUDO ELEMENTS ********/
$psDefault {content: ''; position: absolute; display: block;}

/****** COLORS ******/
$darkGrey {#4D4D4D}
$bordo {#10038D}
$dark {#212525}
$blue {#7B9EC1}

/***** GLOBAL *****/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body,
html {
    $primaryFont(300);
    font-size: $bfont!;
}
a, div {-webkit-tap-highlight-color: transparent;}
a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}
a {text-decoration: none;}
.container {
    width: calc(100% - 2rem);
    max-width: 1364px;
    margin: 0 auto;
}
.content {
    width: calc(100% - 2rem);
    max-width: 913px;
    margin: 0 auto;
}
.secPadding {padding: 7.2rem 0;}
h1 {
    $primaryFont(300);
    font-size: 4.5rem;
    line-height: 5.4rem;
    color: $darkGrey;
}
h2 {
    $primaryFont(300);
    font-size: 2.5rem;
    line-height: 3.4rem;
    color: $darkGrey;
}
h3 {
    $primaryFont(400);
    font-size: 1.5rem;
    line-height: 2rem;
    color: $bordo;
}
h4 {
    $primaryFont(400);
    font-size: 1.4rem;
    line-height: 1.7rem;
    text-transform: uppercase;
    letter-spacing: 0.13rem;
    color: $darkGrey;
}
p {
    $primaryFont(300);
    font-size: 1.15rem;
    line-height: 2rem;
    color: $darkGrey;
}

a {
    color: #4d4d4d; /* Text color */
    background-color: transparent; /* Avoid setting a white background */
    text-decoration: none;
}
a:visited {
    color: #4d4d4d; /* Same color for visited links */
}
a:active {
    color: #4d4d4d; /* Same color for active links */
}

/*** COLOR CLASSES ***/
.wh {color:#fff}
.dg {color: $darkGrey;}
.da {color: $darkGrey;}
.bor {color: $bordo;}

.sr-only {
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
}

/***** HEADER *****/
header {
    & {
        width: 100%;
        position: fixed;
        background-color: transparent;
        transition: background-color .3s ease;
        z-index: 101;
    }
    .container {
        $flex;
        $flexContentSpaceBetween;
        $flexItemCenter;
        padding: 1rem 0;
        position: relative;
    }
    .logo {
        display: block;
        width: 250px;
        height: 85px;
        background: url(/i/logo.svg) no-repeat center/contain;
        position: relative;
        z-index: 10;
    }
    nav {
        a, .login {
            $primaryFont(400);
            display: inline-block;
            font-size: 14px;
            line-height: 23px;
            margin-left: 1.4rem; 
            letter-spacing: 0.2rem;
            text-transform: uppercase;
            color: $darkGrey;
            position: relative;
            cursor: pointer;
            transition: color .3s ease;
        }
        a::after {
            $psDefault;
            width: 0;
            height: 1px;
            background: $darkGrey;
            bottom: 0;
            left: -2px;
            transition: width .3s ease;
        }
        a.current::after, a:hover::after {width: 100%;}
        br {display: none;}
    }
    /* Mobile */
    .menu_container {
        & {
            display: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
        }
        #menu_btn {
            & {
                background: none; 
                border: none; 
                outline: none;
                cursor: pointer;
                position: relative;
                color: #53555A;
                width: 44px;
                height: 20px;
            }
            i {
                transition-delay: .6s;
                transition: all 0.2s ease-out;
                height: 2px;
                width: 45px;
                background-color: #53555A;
                position: absolute; 
                border-radius: 2px;
                left: 0;
            }
            i:nth-child(1){top: 0;}
            i:nth-child(2){top: 9px;}
            i:nth-child(3){top: 18px;}
        } 
    }
}

header.scroll:not(.active) {background: #fff;}
header.sel {background: #fff;}

/****** HEADER ACTIVE ******/
header.active {
    nav {
        & {
            opacity: 1;
            visibility: visible;
            width: 100%;
            height: 100vh;
            min-height: -webkit-fill-available;
            position: fixed;
            top: 0;
            left: 0;
            background: #fff;
        }
        .wrapper {
            $centerAll;
            top: 50%;
            width: 100%;
            $flexColumn;
            $flexContentCenter;
            $flexItemCenter;
        }
        a, .login {
            display: inline-block;
            text-align: center;
            font-size: 1.2rem;
            line-height: 2rem;
            margin-bottom: 2.3rem;
            margin-left: 0;
            opacity: 0;
            visibility: hidden;
            transform: translate(0%,100%);
            position: relative;
            transition: opacity .3s ease, transform .3s ease;
        }
        a.fade, .login.fade {
            opacity: 1;
            visibility: visible;
            transform: translateX(0%);
        }
        br {display: block;}
    }
    #menu_btn {
        i:nth-child(1) {transform:rotate(45deg); width: 40px; top: 5px;}
        i:nth-child(3) {transform:rotate(-45deg); width: 40px; top: 5px;}
        i:nth-child(2) {display: none;}
    }
} 

/***** HERO *****/
.inner .s1 {
    & {$flex;}
    > div {
        width: 50%;
        height: 100vh;
        max-height: 850px;
    }
    .wrap {
        & {
            background: rgb(83 85 90 / 6%);
            text-align: left;
            position: relative;
        }
        > div > div:nth-child(1) {
            position: absolute;
            top: 45%;
            left: 0;
            transform: translateY(-50%);
            max-width: 636px;
            margin: 0 1rem 0 3.8rem;
        }
        > div > div:nth-child(2) {
            position: absolute;
            bottom: 46px;
            left: 0;
            max-width: 636px;
            margin: 0 1rem 0 3.8rem;
        }
        h1 {margin-bottom: 1.5rem; opacity: 0;}
        h3 {margin-bottom: 1rem;}

        .header-link {
            display: block;
            $primaryFont(400);
            font-size: 1.25rem;
            line-height: 2rem;
            color: $bordo;
            margin-top: 2rem;
        }

        .header-link:hover {
            text-decoration: underline;
        }
    }
}

#about #container .s1 {
    .bg {background: url(/i/aboutus-hero.png) no-repeat center/cover;}
    a {
        display: block;
        font-weight: 500;
        color: #4D4D4D;
        margin-top: 2rem;
        transition: color .3s ease;
    }
    a:hover {color: #10038D;}
    .wrap > div > div:nth-child(1) {top: 35%;}
}
#team #container .s1 .bg {background: url(/i/team-hero.png) no-repeat center/cover;}
#services #container .s1 {
    .wrap > div > div:nth-child(1) {top: 38%;}
    .bg {background: url(/i/IC-hero.png) no-repeat center/cover;}
    strong {font-weight: 500;}
}
#news #container .s1 .bg {background: url(/i/news-img.png) no-repeat center/cover;}
#contact #container .s1 {
    .bg {background: url(/i/contact-hero.png) no-repeat center/cover;}
    .wrap h1 {
        opacity: 1;
        display: block;
    }
}
#portfolio #container .s1 {
    .bg {background: url(/i/aboutus-hero.png) no-repeat center/cover;}
    a {
        display: block;
        font-weight: 500;
        color: #4D4D4D;
        margin-top: 2rem;
        transition: color .3s ease;
    }
    a:hover {color: #10038D;}
    .wrap > div > div:nth-child(1) {top: 35%;}
}
#portfolio #container 
{
    .s2 
    {
        h2 {margin:50px 0 80px 0;text-align:left;}
        .wrap:first-of-type {margin-bottom: 5rem;}
        .wrap 
        {
            & {$flex; $flexWrap;gap: .75rem 1%;}
            .company_box
            {
                & {text-align: left;border: solid 1px #000; $flexW; max-width: 32.667%; min-width: 24.25%;}
                .details-wrapper {padding: 1.8rem 1rem;border-top: solid 1px #10038D; $flex; $flexColumn; $flexContentSpaceBetween; height: calc(100% - 200px);}
                .details {$flex; $flexColumn; $flexContentSpaceBetween; gap: 2rem; height: 100%;}
                p.title {font-size: 1.25rem; font-weight: 600; color:#4D4D4D;border-bottom: solid 1px #4D4D4D; padding-bottom: 1rem; display: inline-block;}
                p.invest-date {font-size: 0.9rem; line-height: 1.6rem; font-weight: 400; margin-bottom: 5px;}
                p.strat {font-weight: 400; font-size: 1.3rem;}
                p.sector{font-size: .9rem; font-weight: 400; margin-bottom: 1.8rem;}
                p.desc {font-size: .9rem; line-height: 1.45em;}
                p.date {font-size: .85rem; font-weight: 400;}
                p {margin-bottom: .5rem; line-height: 1.2em;}
                .link-off {display: block;font-weight: 500;color: #4D4D4D;margin-top: 2rem;transition: color .3s ease;}
                .link-off:hover {color: #10038D;}
            }
        }
        .img-wrap {
            & {width: 100%; height: 200px; padding: .75rem; display: flex; justify-content: center; align-items: center;}
            img {display: block;width: 100%; height: 100%; max-height: 120px; object-fit: contain; margin: auto;}
        }
        .wrap.--past .company_box {max-width: none; min-width: auto; width: 24.25%; $flexW(none);}
        .wrap.--past .company_box img {padding: 1.5rem;}
        p.investment-disclaimer {font-size: .9rem; margin-top: 2rem;}
        p.investment-disclaimer sup {font-size: .5rem; line-height: 1em;}
        .filters-wrapper
        {
            &{margin-bottom: 2.5rem;}
            p {color: #4D4D4D;}
            p.label {font-size: 1.5rem; font-weight: 400; margin-bottom: .5rem;}
            .filters {$flex; gap: 1rem;}
            p.filter-btn {transition: color .3s ease; cursor: pointer;}
            p.filter-btn:hover {color: #10038D;}
            p.filter-btn.sel {font-weight: 500; color: #4D4D4D !important;}
        }
    }
}

/***** HOME ******/
#home #container {
    .s1 {
        & {
            height: 100vh;
            position: relative;
            overflow: hidden;
        }
        .swiper {
            & {
                width: 100vw;
                height: 100vh;
            }
            video {
                min-height: 100vh;
                min-width: 100vw;
                object-position: right;
            }
        }
        .swiper-button-prev, .swiper-button-next {
            z-index: 100;
            cursor: pointer;
        }
        .container {
            $centerAll;
            top: 60%;
            text-align: left;
            z-index: 10;
            padding: 250px 0;
        }
        h2 {
            font-size: 4.5rem;
            line-height: 5rem;
            position: relative;
            padding-bottom: 2rem;
            margin-bottom: 2rem;
        }
        h2::after {
            $psDefault;
            width: 180px;
            height: 2px;
            background: #53555A;
            bottom: 0;
            left: 0;
        }

        .home-banner 
        {
            & {width: 100%; background-color: #7B9EC1; padding: 1.6rem 0; position: absolute; left: 0; bottom: 0; z-index: 11;}
            * {color: #fff; text-align: center;}
            .banner-container {$flex; $flexContentSpaceBetween; gap: 1rem; $flexItemCenter;width: calc(100% - 2rem);max-width: 1364px;margin: 0 auto;}
            .numbers {width: 30%;}
            .number {$flex; $flexContentCenter;}
            .number p {font-size: 4.5rem; line-height: .8em;}
            .number p.--small {font-size: 3rem;}
            .number p.align-top {align-self: self-start;}
            .number p.align-center {align-self: center;}
            .number p.align-bot {align-self: self-end;}
            p.subtext {font-size: 1.27rem; max-width: 260px; margin: .5rem auto 0; line-height: 1.4em;}
            .v-line {width: 1px; height: 90px; background-color: #fff;}

        }
    }
    .s1::before {
        $psDefault;
        width: 100%;
        height: 100%;
        background: #ffffff99;
        top: 0;
        left: 0;
        z-index: 10;
    }
}

/***** ABOUT *****/
#about #container {
    .s2 {
        & {padding-top: 2.15rem;}
        h2 {margin: 0 1rem 2.15rem 1rem;}
        .wrap {
            & {
                background: url(/i/about-bg1.jpg) no-repeat center/cover fixed;
                padding: 4rem 0;
                $flex;
            }
            > div {
                width: 33.33%;
                min-height: 350px;
                position: relative;
                padding: 3rem 1rem;
            }
            > div:nth-child(2) {
                border-left: solid 1px #ffffff80;
                border-right: solid 1px #ffffff80;
            }
            > div > div {
                /* $centerAll; */
                width: 100%;
                max-width: 470px;
                text-align: left;
            }
            h3 {
                margin-bottom: 1.5rem;
                color: #fff;
            }
            ul {
                & {list-style: none;}
                li {
                    display: inline-block;
                    position: relative;
                    padding-left: 10px;
                    color: #fff;
                    margin-bottom: 10px;
                }
                li::before {
                    $psDefault;
                    width: 4px;
                    height: 4px;
                    background: #fff;
                    top: 10px;
                    left: 0;
                }
            }
        }
    }
}

/***** TEAM *****/
#team #container {
    .s2 {
        & {padding: 7.2rem 0 5rem 0;}
        h2 {margin: 0 1rem 3.75rem 1rem;}
        .wrap {
            & {
                $flex; flex-wrap: wrap;
                max-width: 1000px;
                justify-content: center;
                gap: 3%;
            }
            a {
                & {max-width: 300px; width: 30%;}
                img {width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;}
                h3 {
                    $primaryFont(400);
                    color: $dark;
                }
                > div {margin-top: 1rem;}
                .arrow {
                    width: 50px;
                    height: 50px;
                    background: url(/i/right-arrow.png) no-repeat center/contain;
                    opacity: 0;
                    visibility: hidden;
                    transition: opacity .3s ease;
                }
            }
            a:hover .arrow {
                opacity: 1;
                visibility: visible;
            }
        }
    }
}

#bio header {border-bottom: solid 1px #24242480;}
#bio header .team::after {width: 100%;}
#bio #container {
	p.bio a { text-decoration: underline; }
    .s2 {
        & {padding: 10rem 0 5rem 0;}
        .back-btn {
            & {
                font-size: 1.25rem;
                color: $bordo;
                $flex;
                align-items: center;
                gap: 1rem;
            }
            .arrow {
                width: 61px;
                height: 61px;
                background: url(/i/left-arrow.png) no-repeat center/contain;
            }
        }
        .wrap {
            & {
                $flex;
                $flexContentSpaceBetween;
                align-items: flex-start;
                gap: 2rem;
                margin-top: 2.1rem;
            }
            img {
                width: 100%;
                max-width: 483px;
            }
            .main {
                & {
                    max-width: 812px;
                    text-align: left;
                }
                h2 {margin-bottom: 1.1rem;}
                h4 {margin-bottom: 3rem;}
                a {color: #10048D; text-decoration: none;}
                a:hover {text-decoration: underline;}
            }
        }
    }
}

/***** SERVICES *****/
#services #container {
    .s1 {
    	.flow {
		display: flex; /* Enables horizontal layout */
		align-items: bottom; /* Vertically aligns items, optional */
		gap: 20px; /* Adds space between f1 and f2 */
	}
	.f2 { font-weight:400; text-decoration:underline; }
	.f2 a { color:#10038D; }

    }
    .s3 {
        & {padding-top: 8.75rem;}
        .intro {
            & {
                width: calc(100% - 2rem);
                max-width: 850px;
                margin: 0 auto 3rem auto;
            }
            h2 {margin-bottom: 1rem;}
            p {max-width: 754px;}
        }
        .fx-accordion {
            & {
                background: url(/i/services-bg1.jpg) no-repeat center/cover fixed;
                text-align: left;
                position: relative;
            }
            .fx-nav {
                & {
                    z-index: 1;
                    position: relative;
                    padding: 7.75rem 0;
                    border-bottom: solid 1px #ffffff4d;
                }
                > div {
                    width: calc(100% - 2rem);
                    max-width: 1364px;
                    margin: 0 auto;
                    position: relative;
                }
                h3 {color: #fff;}
            }
            .fx-nav > div::after {
                $psDefault;
                width: 60px;
                height: 60px;
                background: url(/i/plus.svg) no-repeat center/contain;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
            .fx-nav.fx-on {
                & {
                    border-bottom: none;
                    padding-bottom: 3rem;
                }
                > div::after {background-image: url(/i/minus.svg);}
            }
            .fx-slide {
                .content {
                    width: 100%;
                    max-width: none;
                    z-index: 1;
                    position: relative;
                    border-bottom: solid 1px #ffffff4d;
                }
                .content > div {
                    width: calc(100% - 2rem);
                    max-width: 1364px;
                    margin: 0 auto;
                }
                .content > div > div  {
                    max-width: 1250px;
                    border-top: solid 1px #ffffff4d;
                    margin-right: auto;
                    $flex;
                    padding: 3rem 0 4.5rem 0;
                }
                .content > div > div > div {
                    & {
                        position: relative;
                        border-right: solid 1px #ffffff4d;
                        padding: 0 2rem;
                    }
                    p {
                        max-width: 350px;
                        color: #fff;
                    }
                    p:first-of-type {
                        font-size: 1.4rem;
                        line-height: 2.2rem;
                        text-transform: uppercase;
                        letter-spacing: 0.13rem;
                        margin-bottom: 1rem;
                    }
                    ul {
                        & {list-style: none;}
                        li {
                            font-size: 1.15rem;
                            line-height: 1.4rem;
                            position: relative;
                            padding-left: 12px;
                            color: #fff;
                            margin-bottom: 14px;
                        }
                        li span {
                            position: relative;
                            font-size: 0.9rem;
                            top: -15px;
                        }
                        li::before {
                            $psDefault;
                            width: 4px;
                            height: 4px;
                            background: #fff;
                            left: 0;
                            top: 12px;
                        }
                    }
                }
                .content > div > div > div:nth-child(1) {padding-left: 0;}
                .content > div > div > div:nth-child(3) {border-right: none; padding-right: 0;}
            }
        }
        .fx-accordion::before {
            $psDefault;
            width: 100%;
            height: 100%;
            background: #242424a6;
            top: 0;
            left: 0;
        }
    }
    .s4 {
        & {padding: 8.75rem 0 3.5rem 0;}
        .container {max-width: 760px;}
        h2, h4 {margin-bottom: 1rem;}
        h4 {margin-top: 5.85rem;}
    }
    .s5 {
        & {
            background: url(/i/services-bg2.jpg) no-repeat center/cover;
            position: relative;
            $flex;
        }
        > div {
            & {
                width: 33.33%;
                position: relative;
                height: 600px;
                border-right: solid 1px #ffffff4d;
                text-align: left;
            }
            > div {
                $centerAll;
                width: calc(100% - 2rem);
                max-width: 470px;
            }
            h3 {
                color: #fff;
                margin-bottom: 1rem;
            }
            ul {
                & {list-style: none;}
                li {
                    font-size: 1.15rem;
                    line-height: 1.5rem;
                    position: relative;
                    padding-left: 12px;
                    color: #fff;
                    margin-bottom: 14px;
                }
                li span {
                    position: relative;
                    font-size: 0.9rem;
                    top: -15px;
                }
                li::before {
                    $psDefault;
                    width: 4px;
                    height: 4px;
                    background: #fff;
                    left: 0;
                    top: 12px;
                }
            }
        }
        > div:last-of-type {border-right: none;}
    }
    .s5::before {
        $psDefault;
        width: 100%;
        height: 100%;
        background: #242424a6;
        top: 0;
        left: 0;
    }
}

/***** NEWS *****/
#news #container {
    .s2 {
        & {padding: 12rem 0 6rem 0;}
        .container {
            & {
                display: grid;
                grid-template-columns: repeat(3, 385px);
                justify-content: space-between;
                gap: 2rem;
            }
            a {
                & {
                    display: none;
                    /* height: 393px; */
                    background: #F7F9FA;
                    padding: 3.9rem 2rem;
                    text-align: left;
                    position: relative;
                    transition: background-color .2s ease;
                }
                .type {
                    font-size: 0.9rem;
                    line-height: 1.6rem;
                    text-transform: uppercase;
                    letter-spacing: 0.27rem;
                    color:  $darkGrey;
                    margin-bottom: 14px;
                    transition: color .3s ease;
                }
                h3 {
                    $primaryFont(400);
                    color: $darkGrey;
                    transition: color .3s ease;
                }
                p.date {
                    font-size: 0.9rem;
                    line-height: 1.6rem;
                    color: $bordo;
                    margin-top: 1.4rem;
                    transition: color .3s ease;
                }
                .arrow {
                    display: block;
                    width: 61px;
                    height: 61px;
                    background: url(/i/right-arrow.png) no-repeat center/contain;
                    position: absolute;
                    right: 2rem;
                    bottom: 2rem;
                }
            }
            a:nth-child(-n+6) {display: block;}
            a:hover {
                & {background: #10038D;}
                .type, h3 {color: #fff;}
                .date {color: #fff;}
                .arrow {background-image: url(/i/right-arrow-wh.png);}
            }
            a.visible {display: block;}
        }
        .load-more {
            & {
                $flex;
                align-items: center;
                justify-content: center;
                gap: 1rem;
                font-size: 1.25rem;
                margin-top: 5rem;
                color: #34524B;
                cursor: pointer;
            }
            .arrow {
                width: 61px;
                height: 61px;
                background: url(/i/down-arrow.png) no-repeat center/contain;
            }
        }
    }
}

/****** ARTICLE ******/
#article header {border-bottom: solid 1px #24242480;}
#article header .news::after {width: 100%;}
#article #container {
    .s2 {
        & {
            padding: 13rem 0 5rem 0;
            background: #fff;
            position: relative;
        }
        .container {
            & {
                position: relative;
                max-width: 1100px;
                text-align: left;
            }
            .back-btn {
                & {
                    font-size: 1.25rem;
                    color: #34524B;
                    $flex;
                    align-items: center;
                    gap: 1rem;
                }
                .arrow {
                    width: 61px;
                    height: 61px;
                    background: url(/i/left-arrow.png) no-repeat center/contain;
                }
            }
            .wrap {
                & {
                    $flex;
                    gap: 3rem;
                    margin-top: 5rem;
                }
                .social {
                    & {list-style-type: none;}
                    li {
                        cursor: pointer; 
                        margin-bottom: 1rem;
                    }
                    a {
                        display: block;
                        width: 35px;
                        height: 35px;
                        transition: all .3s ease;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: contain;
                    }
                    #linkedin-btn {
                        & {
                            width: 35px;
                            height: 35px;
                            transition: all .3s ease;
                        }
                        .IN-widget {opacity: 0;}
                        button {
                            padding: 0 !important;
                            height: 35px !important;
                            background-color: transparent !important;
                        }
                    }
                }
                .main {
                    h4 {
                        font-size: 1rem;
                        line-height: 1.7rem;
                    }
                    h2 {margin: 2rem 0;}
                    img {
                        display: block;
                        width: 100%;
                        height: auto;
                        margin: 2.23rem auto 0 auto;
                    }
                    > ce {
                        $primaryFont(300);
                        font-size: 1.15rem;
                        line-height: 2rem;
                        color: $darkGrey;
                    }
                    a {
                        color: $darkGrey;
                        transition: color .3s ease;
                    }
                    a:hover {color: $bordo;}
                    strong {font-weight: 400;}
                    iframe {
                        display: block;
                        width: 100%;
                        margin-bottom: 2rem;
                    }
                    ul {
                        & {
                            list-style-type: none;
                            margin: 1rem 0;
                        }
                        li {
                            $primaryFont(300);
                            font-size: 1.15rem;
                            line-height: 2rem;
                            position: relative;
                            color: $darkGrey;
                            padding-left: 15px;
                            margin-bottom: 10px;
                        }
                        li::before {
                            $psDefault;
                            width: 4px;
                            height: 4px;
                            border-radius: 50%;
                            background: $darkGrey;
                            position: absolute;
                            top: 20px;
                            transform: translateY(-50%);
                            left: 0;
                        }
                    }
                    ol {
                        li {
                            $primaryFont(300);
                            font-size: 1.15rem;
                            line-height: 2rem;
                            position: relative;
                            color: $darkGrey;
                            padding-left: 15px;
                            margin-bottom: 10px;
                        }
                    }
                }
            }
        }
    }
}

/***** CONTACT *****/
#contact #container {
    .s1 {
        .bg a {
            display: block;
            width: 100%; 
            height: 100%;
        }
        > div:nth-child(2) {
            p {
                margin-top: 1rem;
                color: #052944;
            }
            h4 {
                letter-spacing: 0.42rem;
                color: #052944;
            }
            a {
                display: block;
                font-weight: 400;
                color: #34524B;
                margin-top: 1rem;
                transition: color .3s ease;
            }
            a:hover {color: $blue;}
        }
    }
    .s2 {
        & {
            padding: 7.2rem 1rem;
            $flex;
            text-align: left;
            overflow: hidden;
        }
        > div {
            width: 100%;
            position: relative;
        }
        .left {
            > div {
                max-width: 636px;
                position: absolute;
                right: 0;
            }
            h2 {margin-bottom: 1rem;margin-top:-17px;}
        }
        .right {
            > div {
                width: 100%;
                max-width: 578px;
                position: relative;
                left: 3.8rem;
            }
            h4 {
                letter-spacing: 0.42rem;
                margin-bottom: 1rem;
            }
            form {
                & {width: 100%;}
                input {
                    width: 100%;
                    display: block;
                    $primaryFont(400);
                    font-size: 0.95rem;
                    line-height: 1.4rem;
                    color: #052944;
                    border: none;
                    border: none;
                    padding: 20px;
                    -webkit-appearance: none;
                    margin-bottom: 12px;
                    background: #F7F9FA;
                }
                ::placeholder {
                    $primaryFont(400);
                    font-size: 0.95rem;
                    line-height: 1.4rem;
                    text-transform: uppercase;
                    letter-spacing: 1.8px; 
                    color: #052944;
                }
                textarea {
                    display: block;
                    width: 100%;
                    height: 160px;
                    $primaryFont(400);
                    font-size: 0.95rem;
                    line-height: 1.4rem;
                    color: #052944;
                    background: #F7F9FA;
                    border: none;
                    padding: 20px;
                    background: #F7F9FA;
                    -webkit-appearance: none;
                    margin-bottom: 2rem;
                    resize: none;
                }
                input:focus, textarea:focus, button:focus, select:focus {outline: none;}
                input:focus::placeholder, textarea:focus::placeholder, button:focus::placeholder, select:focus::placeholder {opacity: 0;}
                .submit-btn {
                    & {
                        $primaryFont(300);
                        font-size: 1.25rem;
                        color: #10038D;
                        background: none;
                        outline: none;
                        border: none;
                        $flex;
                        align-items: center;
                        gap: 1.2rem;
                        margin-top: 2rem;
                        cursor: pointer;
                    }
                    div {
                        width: 61px;
                        height: 61px;
                        background: url(/i/right-arrow.png) no-repeat center / contain;
                    }
                }
            }
            .response {
                margin-top: 2rem;
                text-align: center;
            }
        }
    }
}

footer {
    & {
        background: #07023C;
        padding: 5.5rem 0;
    }
    .container {
        & {
            $flex;
            $flexContentSpaceBetween;
            $flexItemCenter;
        }
        .logo {
            display: block;
            width: 250px;
            height: 85px;
            background: url(/i/logo-wh.svg) no-repeat center/contain;
        }
        > div {
            & {
                text-align: left;
                $flex;
                align-items: center;
                gap: 1rem;
            }
            p {
                font-size: 13px;
                line-height: 21px;
                color: #fff;
            }
            a {
                color: #fff;
                transition: color .3s ease;
            }
            a:hover {color: $blue;}
            span {
                display: inline-block;
                margin: 0 10px;
            }
        }
    }
}

/******* UPDATE PSW *******/
#update_pw #logo,#reset_pw #logo {display: block; max-width: 300px;}
#update_pw #logo img,#reset_pw #logo img {width: 100%;}
#update_pw header,#reset_pw header {background:#fff; margin-top: 0; padding: 20px 0;}
#update_pw header::after, #reset_pw header::after {display: none;}
#update_pw section h1,#reset_pw section h1 {margin-bottom: 0.6em; font-size: 2rem;line-height: 1em; text-align: left; display: inline-block; color: $dark;}
#update_pw section p,#reset_pw section p {font-size: 1rem; line-height: 1.5rem;}
#update_pw section .content,#reset_pw section .content {max-width:1100px; margin: 8rem 1rem 0 1rem;}
#update_pw section .form-buttons a,#reset_pw section .form-buttons a {cursor: pointer; transition: all 0.25s ease; display: inline-block; padding: 1em 2em; color: $dark; border: 1px solid $dark; margin-right: 2em; font-weight: 400; text-transform: uppercase; font-size: 1em; letter-spacing: 0.075em}
#update_pw section .form-buttons a:last-of-type,#reset_pw section .form-buttons a:last-of-type {margin-right: 0;}
#update_pw section .form-buttons a:hover,#reset_pw section .form-buttons a:hover {color:#fff; background: $bordo; border: solid 1px $bordo;}
#update_pw section .form-buttons,#reset_pw section .form-buttons {margin-top: 2rem;}
#update_pw section .fx-field input,#reset_pw section .fx-field input,#update_pw section .fx-field textarea,#reset_pw section .fx-field textarea {border: 1px solid #abb7c4; font-size: 1rem; padding: 0.5em; width:100%; color: #000;}
#update_pw section .fx-field,#reset_pw section .fx-field {margin-right: 5%; margin-bottom: 1.5rem;}
#update_pw section label,#reset_pw section label {font-size: 1rem; color:#abb7c4; background:#fff; left: 0.5em; padding: 0 0.25em;}
#update_pw section textarea,#reset_pw section textarea {resize:none; height: 10em;}
#update_pw section .fx-msg,#reset_pw section .fx-msg {left: 0 !important; top: 100% !important; color:#ff0000; font-size: 0.875em;}
#update_pw section .fx-input:focus ~ label,#reset_pw section .fx-input:focus ~ label,#update_pw section .fx-input.hasData ~ label,#reset_pw section .fx-input.hasData ~ label {left: 0.75em;}
#update_pw section,#reset_pw section {padding: 3em 0;}
#update_pw,#reset_pw {background:#fff;}
.fx-field label {top: 11px;}

.cookie-disclaimer
{
	&{background:#fff !important;border-radius:10px;bottom:20px !important;color:#403f41;width:90% !important;max-width:1320px !important;left:50% !important;transform:translate(-50%,0);}
	.btn-close{background-image:url(/i/btn-close.svg) !important;}
	.c-disclaimer.c-on
	{
		& {display:flex !important;justify-content:space-between;align-items:center;flex-direction:row;}
		.btn-agree{padding:0.75em 1em !important;min-width:200px;text-align:center;margin:0 10px 0 0!important;color:$blue !important;text-transform:none !important;font-size:0.8em;background:#285b771a !important;border:1px solid $blue;}
		.btn-preferences{padding:0.75em 1em !important;min-width:180px;text-align:center;margin:0 !important;color:$blue !important;text-transform:none !important;font-size:0.8em;background:transparent !important;border:1px solid $blue;}
		.btn-agree:hover,.btn-preferences:hover{opacity:1 !important}
		p {font-size: 1rem; line-height: 1.6rem; margin:0 20px 0 0;}
	}
	.c-nav
	{
		li.c-on 
		{
			&{background-color:transparent !important;}
			a{color:$blue}
		}	
		li
		{
			&{background-color:transparent !important;border-bottom:1px solid #D6D5D0}
			a{color:#a9a9a9;font-size:0.75em;padding:0.75em 1em !important}
		}
		li.btn-close-pref
		{
			&{background-color:transparent !important;border-bottom:0;}
			a{padding:0.75em 1em !important;width:fit-content;color:#403f41;border:1px solid $blue;background:transparent;text-transform:none;font-size:0.8em;}
			a:hover{opacity:1}
		}
		li.btn-close-pref:hover{background-color:transparent !important;}
	}
    	 
	.c-content
	{
		h2{margin-bottom:1.5em !important;color:#14120f;font-size:0.9em;line-height:2em;$primaryFont(500);letter-spacing:0.1em;display:inline-block;padding-right:20px;}
		h3.c-on{display:inline-block !important;float:right;margin:0 !important;}
        p {font-size: 1rem; line-height: 1.6rem; color:#403f41;}
		a:nth-child(5),a:nth-child(6){color:#403f41 !important;text-decoration:none;border:1px solid $blue;background-color:transparent !important;text-transform:none !important}
		.c-on div{color:#403f41;font-size:0.9em;letter-spacing:0.01em;line-height:1.35rem;$primaryFont(300);}
		h3:nth-child(2){letter-spacing:0.1em;width:fit-content;padding:0.5em 3em 0.5em 1em;text-transform:uppercase;color:#fff !important;font-size:0.75em;line-height:2em;border-radius:25px;background-color: #10038D;position:relative;}
		h3:nth-child(2)::after{content:"";position:absolute;border-radius:50%;width:24px;height:24px;position:absolute;right:8px;top:50%;transform:translateY(-50%);background:#fff;}
		h3:nth-child(3){letter-spacing:0.1em;width:fit-content;padding:0.5em 1em 0.5em 3em;text-transform:uppercase;color:#fff !important;font-size:0.75em;line-height:2em;border-radius:25px;background-color:#403F41;position:relative;}
		h3:nth-child(3)::after{content:"";position:absolute;border-radius:50%;width:24px;height:24px;position:absolute;left:8px;top:50%;transform:translateY(-50%);background:#fff;}
		a:nth-child(5):hover,a:nth-child(6):hover{opacity:1 !important}
	}
}

/***** MEDIA *****/
@media screen and (max-width: 1375px) {
    .inner .s1 {
        & {$flexColumnR;}
        > div {
            width: 100%;
            height: 700px;
        }
        .bg {height: 400px;}
        .wrap {
            > div {
                $centerAll;
                top: 55%;
                width: calc(100% - 2rem);
            }
            > div > div:nth-child(1), > div > div:nth-child(2) {
                position: relative;
                top: auto;
                bottom: auto;
                left: auto;
                transform: none;
                margin: 0;
                max-width: none;
            }
            > div > div:nth-child(1) {margin-bottom: 2rem;}
        }
    }

    #about #container .s1 .bg {background-position: center 26%;}

    #contact #container {
        .s2 {
            & {$flexColumn;}
            > div {width: 100%;}
            .left {
                & {margin-bottom: 3rem;}
                > div {
                    position: relative;
                }
            }  
            .right {
                > div {
                    max-width: none;
                    left: 0;
                }
                form {width: 100%;}
            }  
        }
    }

    #news #container .s1 .bg {background-position: center 35%;}
}
@media screen and (max-width: 1200px) {
	header {
        .menu_container {display: block;}
        nav {
            width: 0;
            height: 0;
            opacity: 0;
            visibility: hidden;
        }
    }
	
}
@media screen and (max-width: 1100px) {
    #home #container {
        .s1 {
            .swiper video {
                position: relative;
                left: -90%;
            }
        }
    }

    #about #container {
        .s2 {
            & {padding-top: 2.15rem;}
            .wrap {
                & {
                    $flexColumn;
                    padding: 0 1rem;
                    background-attachment: scroll;
                }
                h3 br {display: none;}
                > div {
                    width: 100%;
                    height: auto; min-height: auto;
                    padding: 5rem 0;
                }
                > div > div {
                    position: relative;
                    top: auto;
                    left: auto;
                    transform: none;
                }
                > div:nth-child(2) {
                    border-left: none;
                    border-right: none;
                    border-top: solid 1px #ffffff80;
                    border-bottom: solid 1px #ffffff80;
                }
                ul li::before {top: 8px;}
            }
        }
    }

    #team #container {
        .s2 {
            .wrap {flex-wrap: wrap; max-width: 700px;}
            .wrap a {width: calc(50% - 1rem); max-width: 50%;}
            .wrap a .arrow { opacity: 1; visibility: visible; }
        }
    }

    #bio #container {
        .s2 {
            .wrap {
                & {$flexColumn;}
                .main {max-width: none;}
            }
        }
    }

    #news #container {
        .s1 {
            .wrap h1 br {display: none;}
        }
        .s2 {
            .container {
                & {grid-template-columns: repeat(2,1fr);}
            }
        }
    }

    #services #container {
        .s3 {
            .fx-accordion {
                & {background-attachment: scroll;}
                .fx-nav {padding: 5rem 0;}
                .fx-nav > div::after {
                    width: 40px;
                    height: 40px;
                }
                .fx-slide {
                    .content > div > div > div {
                        border-right: none;
                        border-bottom: solid 1px #ffffff4d;
                        padding: 2rem 0;
                    }
                    .content > div > div > div:last-of-type {border-bottom: none;}
                    .content > div > div {$flexColumn; padding: 0;}
                }
            }
        }
        .s5 {
            & {$flexColumn;}
            > div {
                width: 100%; 
                height: 400px;
                border-right: none;
                border-bottom: solid 1px #ffffff4d;
            }
            > div:last-of-type {border-bottom: none;}
        }
    }

    footer {
        .container {
            & {
                $flexColumn;
                gap: 2rem;
            }
            .logo {
                width: 160px;
                height: 51px;
            }
            > div {
                & {
                    text-align: center;
                    flex-direction: column;
                    gap: 10px;
                }
                span {display: none;}
                a {
                    display: block;
                    margin-bottom: 5px;
                }
            }
        }
    }
    
    #portfolio #container 
		{
		    .s2 
		    {
		        .wrap 
		        {
		            .company_box
		            {
		                & {max-width: 49%;}
		            }
		        }
		    }
		}
}

@media screen and (max-width: 980px), (max-height: 770px) {
    #home #container {
        .s1 {
            & {background: url(/i/Homepage-tablet.png) no-repeat bottom;}
            .container {top: 40%;}
            h2 {padding-bottom: 0; margin-bottom: 0;}
            h2::after {display: none;}
            .swiper {display: none;}
            .home-banner .banner-container
            {
                .number p {font-size: 3rem;}
                .number.--small {font-size: 2rem;}
                p.subtext {font-size: 1rem;}
            }
        }
    }
}

@media screen and (max-width: 980px) {
    #article #container {
        .s2 {
            .container {
                .wrap {
                    & {$flexColumn;}
                    .main ul li::before {top: 16px;}
                    .social {
                        $flex;
                        align-items: center;
                        gap: 10px;
                    }
                }
            }
        }
    }

    .cookie-disclaimer {
		& {left:0 !important;width:100% !important;transform:none !important;bottom:0 !important}
		p,.c-content .c-on div{font-size:0.75rem;line-height:1.35em;}
		.c-disclaimer.c-on
		{
			&{display:block !important;}
			a.btn-agree,a.btn-preferences{margin:1em 0 0 0 !important;}
		}
		.c-nav li.btn-close-pref a{margin-left:0 !important;}
		.c-content h3:nth-child(2)::after{width:16px;height:16px;}
        .c-content h3:nth-child(3)::after{width:16px;height:16px;}
    }
}

@media screen and (max-width: 767px) {
    h1 {
        font-size: 2.8rem;
        line-height: 3.6rem;
    }
    h2 {
        font-size: 1.8rem;
        line-height: 2.3rem;
    }
    h3 {
        font-size: 1.3rem;
        line-height: 1.8rem;
    }
    h4 {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .inner .s1 {
        .bg {height: 350px;}
        .wrap {
            & {
                height: auto; 
                max-height: none;
                padding: 9rem 1rem 5rem 1rem;
            }
            > div {
                position: relative;
                top: auto;
                left: auto;
                transform: none;
                width: auto;
            }
            h1 {display: none;}
        }
    }
  

    header {
        .menu_container {
            & {width: 30px;}
            #menu_btn i {width: 30px;}
            #menu_btn i:nth-child(2) {top: 7px;}
            #menu_btn i:nth-child(3) {top: 14px;}
        }
        .logo {
            width: 160px;
            height: 51px;
        }
    }

    header.active {
        .menu_container {
            #menu_btn i {width: 30px;}
            #menu_btn i:nth-child(3) {top: 5px;}
        }

        nav {
            a, .login {
                font-size: 1rem;
                line-height: 1.7rem;
                margin-bottom: 1.6rem;
            }   
        }
    }

    #home #container {
        .s1 {
            .swiper video {
                position: relative;
                left: -200%;
            }
            h2 {
                font-size: 2.3rem;
                line-height: 3rem;
            }
            h2::after {width: 80px;}
            h2 br {display: none;}
        }
    }
		#portfolio #container 
		{
		    .s2 
		    {
		        .wrap 
		        {
		            .company_box
		            {
		                & {max-width: 100%;}
		            }
		        }
		    }
		}
    #team #container {
        .s2 {
            & {padding-top: 5rem;}
            .wrap {
                flex-direction:column;
                max-width: 320px;
                gap: 3rem;
            }
            .wrap a {width: 100%; max-width: 100%;}
            .wrap a .arrow {
                width: 40px;
                height: 40px;
            }
        }
    }

    #bio #container {
        .s2 {
            .back-btn {
                & {font-size: 1.1rem;}
                .arrow {width: 40px; height: 40px;}
            }
            .wrap {
                .main h4 {margin-bottom: 2rem;}
                .main h4 br {display: none;}
            }
        }
    }

    #services #container {
        .s3 {
            & {padding-top: 5rem;}
            h3 {
                font-size: 1.1rem; 
                line-height: 1.6rem;
                padding-right: 2.3rem;
            }
            .fx-accordion {
                .fx-nav {padding: 3rem 0;}
                .fx-nav > div::after {
                    width: 30px;
                    height: 30px;
                }
            }
        }
        .s4 {
            & {padding-top: 5rem;}
            h4 {margin-top: 3rem;}
        }
        .s5 {
            > div {
                & {
                    height: auto;
                    padding: 5rem 1rem;
                }
                > div {
                    position: relative;
                    top: auto;
                    left: auto;
                    transform: none;
                    width: auto;
                    max-width: none;
                }
            }
        }
    }

    #news #container {
        .s2 {
            & {padding: 8rem 0 5rem;}
            .container {
                & {grid-template-columns: repeat(1, 1fr);}
                a {
                    & {height: 300px;}
                    .arrow {
                        width: 40px;
                        height: 40px;
                    }
                }
            }
            .load-more {
                & {font-size: 1.1rem;}
                .arrow {width: 40px; height: 40px;}
            }
        }
    }

    #article #container {
        .s2 {
            & {padding: 10rem 0 5rem 0;}
            .container {
                .back-btn {
                    & {font-size: 1.1rem;}
                    .arrow {width: 40px; height: 40px;}
                }
                .wrap {margin-top: 3rem;}
            }
        }
    }

    #contact #container {
        .s2 {
            & {padding: 5rem 1rem 3rem 1rem;}
            .right .form .submit-btn {
                & {font-size: 1.1rem;}
                div {width: 40px; height: 40px;}
            }
        }
    }

    #update_pw #logo, #reset_pw #logo {max-width: 200px;}
    #update_pw section .form-buttons a,
    #reset_pw section .form-buttons a {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    #portfolio #container .s2 .wrap {
        & {flex-direction: column;}
        .company_box img {height: 180px;}
    }
}

/* @media screen and (max-width: 500px), (max-height: 500px) {
    #home #container {
        .s1 {
            & {background: url(/i/Homepage-mobile.png) no-repeat bottom;}
            .container {top: 40%;}
            h2 {padding-bottom: 0; margin-bottom: 0;}
            h2::after {display: none;}
            .swiper {display: none;}
        }
    }
} */

@media screen and (max-width: 600px) {
    #home #container .s1 
    {
        .home-banner .banner-container
        {
            & {$flexColumn; gap: .75rem;}
            .v-line {height: 1px; width: 50%;}
            .numbers {width: 100%;}
            .number p {font-size: 2rem;}
            .number p.--small {font-size: 1.4rem;}
            p.subtext {font-size: .9rem; max-width: 100%;}
        }
    }
}

@media screen and (max-width: 500px) {
    #home #container {
		.s1 {
			.container { top:30%; }
		}
    }
}

@media screen and (max-height: 500px) {
    #home #container {
        .s1 {
            & {
                height: auto;
                padding: 10rem 0;
                overflow: visible;
            }
            .container {
                position: relative;
                top: auto;
                left: auto;
                transform: none;
		top:30%;
            }
        }
    }
}