@keyframes slide-in-left-custom {
    0% {
        left: -500px;
    }

    100% {
        left: 0;
    }
}

@keyframes slide-in-right-custom {
    0% {
        right: -500px;
    }

    100% {
        right: 0;
    }
}

@keyframes mouseArrowBounce {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0px, 8px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.heading + .text {
    margin: 60px;
}

body.header-02-lg main#site-content {
    overflow-x: clip;
}

body.header-02-lg header#site-header nav.main > ul > li:hover a {
    color: #00b8a5;
    text-decoration: none;
}

section.mainBanner div.item {
    z-index: 0;
    max-height: var(--takeover-banner);
}

    section.mainBanner div.item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.2);
        z-index: -1;
    }

section.mainBanner .item div.image {
    filter: brightness(0.8);
}

section.mainBanner .item div.image img {
    min-height: 400px;
    object-fit: cover;
}

section.mainBanner .item .inner div.info {
    margin-bottom: 130px !important;
}

section.mainBanner .scroll-prompt {
    width: 100%;
}

    section.mainBanner .scroll-prompt::before {
        content: "Learn More";
        text-transform: uppercase;
        font-size: 13.5pt;
        width: max-content;
        position: absolute;
        bottom: 80px;
        transform: translate(-50%)
    }

    section.mainBanner .scroll-prompt::after {
        content: "";
        width: 100%;
        height: 50px;
        position: absolute;
        bottom: 25px;
        left: 0;
        background-image: url(/images/Trebert/mouse-arrow.svg);
        background-repeat: no-repeat;
        background-size: contain;
        transform: translate(0);
        background-position: center;
        animation: mouseArrowBounce ease-in-out 2s infinite;
        cursor: pointer;
    }

    section.mainBanner .scroll-prompt .scroll-link {
        display: none;
    }

section.logoCta.component.usn_cmp_ctastrip .text-center .info {
    padding-top: 40px;
    padding-bottom: 90px;
}

section.logoCta:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 0vw solid white;
    border-right: 50vw solid transparent;
    border-bottom: 120px solid white;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
}

section.logoCta:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 50vw solid transparent;
    border-right: 0vw solid white;
    border-bottom: 120px solid white;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
}

section.aboutUs:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 40px solid white;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    position: absolute;
    right: 50%;
    bottom: 0;
    z-index: 1000;
    transform: translate(40px, 100%);
}

section.nikkiBanner div.component-inner {
    padding-top: 100px;
    padding-bottom: 110px;
}

section.nikkiBanner .item .inner div.image {
    position: relative;
    overflow: visible;
}

    section.nikkiBanner .item .inner div.image::before {
        content: "";
        left: 50%;
        top: 50%;
        transform: translate(-50%, -30%);
        position: absolute;
        background-position: center;
        background-image: url(/images/Trebert/KeyholeBackground.svg);
        background-repeat: no-repeat;
        height: 230%;
        width: 230%;
        max-height: 920px;
        max-width: 600px;
        background-size: contain;
        z-index: 0;
    }

section.nikkiBanner .item .inner div.image + div.info {
    position: relative;
}

.repeatable.accordion {
    border-bottom: 2px solid #00B8A5;
}

    .repeatable.accordion .tab {
        border-top: 2px solid #00B8A5;
        margin-top: 0 !important;
        clear: both;
    }

    .repeatable.accordion.tab-buttons .tab a.nav-link {
        border: 0px;
        font-weight: 600;
        font-size: 22.5pt;
        padding: 35px 30px 35px 0;
        line-height: 100%;
    }

section.ourServices:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 40px solid #DAF3F1;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    position: absolute;
    right: 50%;
    bottom: 0;
    z-index: 1000;
    transform: translate(40px, 100%);
}

section.keysComponent {
    padding-bottom: 100px !important;
}

    section.keysComponent .keysImage img {
        filter: drop-shadow(4px 8px 8px black);
        padding: 14px 0;
    }

section.testimonials .item .inner {
    display: flex;
    align-items: center;
}

section.testimonials .item .inner div.info {
    display: flex;
    justify-content: center;
}

section.testimonials .item .inner .info div.text {
    max-width: 1000px;
}

section.testimonials .item .inner .info div.text p {
    margin: var(--base-spacing) 0;
}

section.testimonials:before {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 40px solid #00405E;
    border-right: 40px solid transparent;
    border-left: calc(50vw - 20px) solid #00405E;
    position: absolute;
    right: 50%;
    top: 0;
    z-index: 1000;
    transform: translate(0, -100%);
}

section.testimonials:after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 40px solid #00405E;
    border-left: 40px solid transparent;
    border-right: calc(50vw - 40px) solid #00405E;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1000;
    transform: translate(0, -100%);
}

.slick-slider .slick-prev, .row.slides.slick-slider:not(.listing_no-spacing) .slick-prev {
    height: 72px;
    width: 72px;
    border: 2px solid;
    border-radius: 100%;
    bottom: -50px;
    top: unset;
    left: calc(50% - 175px);
}

    .slick-slider .slick-prev i.icon {
        font-size: 30px;
    }

        .slick-slider .slick-prev i.icon::before {
            font-size: 30px;
        }

.slick-slider .slick-next, .row.slides.slick-slider:not(.listing_no-spacing) .slick-next {
    height: 72px;
    width: 72px;
    border: 2px solid;
    border-radius: 100%;
    bottom: -50px;
    top: unset;
    right: calc(50% - 175px);
}

    .slick-slider .slick-next i.icon {
        font-size: 30px;
    }

        .slick-slider .slick-next i.icon::before {
            font-size: 30px;
        }

.slick-slider ul.slick-dots {
    margin: 80px 0 0 0;
}

.form > .inner {
    padding: var(--base-spacing) 0;
}

footer#site-footer nav.social {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    footer#site-footer nav.social ul {
        display: flex;
        justify-content: center;
        gap: 55px;
    }

footer#site-footer nav.footer-navigation {
    padding-top: 20px;
    border-top: 1px solid #00B8A5;
    display: flex;
    justify-content: center;
}

    footer#site-footer nav.footer-navigation ul li {
        padding: 0 10px;
        margin: 0;
        text-align: center;
    }

        footer#site-footer nav.footer-navigation ul li a {
            color: #fff !important;
        }

@media(max-width: 767px) {
    .component.usn_cmp_banner .item.item_scale-banner .inner {
        position: absolute !important;
    }

    footer#site-footer .footer-text {
        text-align: center;
    }

    footer#site-footer .footer-navigation .rights-reserved {
        display: block;
    }
}

@media(min-width: 768px) {
    html:not(.reveal-out) body.homePage #scrollIndicator {
        position: fixed;
        top: 50%;
        right: 50px;
        transform: translate(0,-50%);
        z-index: 1000;
        width: 20px;
    }

        html:not(.reveal-out) body.homePage #scrollIndicator a {
            height: 30px;
            width: 20px;
            display: block;
            margin: 0px 0 20px 0;
            left: 0;
            z-index: 10;
            background-size: 20px 30px;
            background-repeat: no-repeat;
            background-position: center;
            filter: drop-shadow(0px 0px 0.5px #00405e);
        }

            html:not(.reveal-out) body.homePage #scrollIndicator a.selected {
                filter: brightness(1.3);
            }

            html:not(.reveal-out) body.homePage #scrollIndicator a:nth-child(2) {
                top: 0%;
            }

            html:not(.reveal-out) body.homePage #scrollIndicator a:nth-child(3) {
                top: 25%;
            }

            html:not(.reveal-out) body.homePage #scrollIndicator a:nth-child(4) {
                top: 50%;
            }

            html:not(.reveal-out) body.homePage #scrollIndicator a:nth-child(5) {
                top: 75%;
            }

            html:not(.reveal-out) body.homePage #scrollIndicator a:last-child {
                margin-bottom: 0;
            }

        html:not(.reveal-out) body.homePage #scrollIndicator a {
            background-image: url(/images/Trebert/KeyIcon.svg);
        }

        html:not(.reveal-out) body.homePage #scrollIndicator span {
            position: absolute;
            top: 0;
            left: 0;
            height: 40px;
            width: 40px;
            display: none;
            z-index: 11;
            transition: top 0.2s;
            backdrop-filter: brightness(1.3);
        }

    section.mainBanner .item .inner div.info {
        margin-bottom: 0px !important;
    }

    section.mainBanner .scroll-prompt::before {
        bottom: 122px;
    }

    section.mainBanner .scroll-prompt::after {
        height: 80px;
        bottom: 36px;
    }

    section.logoCta.component.usn_cmp_ctastrip .text-center .info {
        padding-bottom: 60px;
    }

    footer#site-footer nav.footer-navigation ul li:not(:first-child) {
        border-left: 1px solid #fff;
    }

    footer#site-footer nav.footer-navigation {
        margin-top: 50px;
    }
}

@media(max-width: 1284px) {
    section.testimonials .item .inner .info div.text p {
        font-size: 20px;
    }

    section.testimonials .component-introduction .info div.text {
        max-height: var(--base-spacing);
    } 
}

@media(min-width: 1285px) {
    section.testimonials div.component-inner:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        right: 0;
        background-position: left;
        transform: translate(150px, 0);
        background-size: 180px 133px;
        background-image: url(/images/Trebert/QuotesLeft.svg);
        background-repeat: no-repeat;
        animation: slide-in-left-custom linear forwards;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }

    section.testimonials div.component-inner:after {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        right: 0;
        background-position: right;
        transform: translate(-150px, 0);
        background-size: 180px 133px;
        background-image: url(/images/Trebert/QuotesRight.svg);
        background-repeat: no-repeat;
        animation: slide-in-right-custom linear forwards;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }

    section.testimonials .item .inner .info div.text p {
        margin: calc(var(--base-spacing) * 2) 0;
    }

    .slick-slider ul.slick-dots {
        margin-top: 150px;
    }
}

@media(min-width: 1455px) {
    section.nikkiBanner:before {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
        background-position: left;
        background-size: contain;
        background-image: url(/images/Trebert/KeyholeLeft.svg);
        background-repeat: no-repeat;
        animation: slide-in-left-custom linear forwards;
        animation-timeline: view();
        animation-range: entry 0% cover 50%;
    }

    section.nikkiBanner:after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
        background-position: right;
        background-size: contain;
        background-image: url(/images/Trebert/KeyholeRight.svg);
        background-repeat: no-repeat;
        animation: slide-in-right-custom linear forwards;
        animation-timeline: view();
        animation-range: entry 0% cover 50%;
    }
}

@media(min-width: 1585px) {
    html.nav-down:not(.reached-top) body.header-02-lg header#site-header, html.nav-up:not(.reached-top) body.header-02-lg header#site-header, body:not(.homePage) header#site-header {
        height: 90px !important;
        transition: 0.5s;
        background: #00405e;
    }

    body.header-02-lg header#site-header {
        transition: 0.5s;
    }

    html.nav-down:not(.reached-top) header#site-header div#logo, html.nav-up:not(.reached-top) header#site-header div#logo, body:not(.homePage) header#site-header div#logo {
        height: auto;
        padding-top: 15px;
        padding-bottom: 0px;
        transition: 0.5s;
    }

    header#site-header div#logo {
        transition: 0.5s;
    }

    header#site-header #logo img {
        transition: 0.5s;
    }

    html.nav-down:not(.reached-top) header#site-header #logo img, html.nav-up:not(.reached-top) header#site-header #logo img, body:not(.homePage) header#site-header #logo img {
        height: 60px;
        transition: 0.5s;
    }

    body.header-02-lg header#site-header nav.main {
        margin-right: 0;
    }

        body.header-02-lg header#site-header nav.main > ul > li > span > a {
            padding: 0 0 0 40px;
            line-height: unset;
            margin-top: 60px;
            transition: 0.5s;
        }

            body.header-02-lg header#site-header nav.main > ul > li > span > a:focus {
                text-decoration: none;
            }

    html.nav-down:not(.reached-top) body.header-02-lg header#site-header nav.main > ul > li > span > a, html.nav-up:not(.reached-top) body.header-02-lg header#site-header nav.main > ul > li > span > a, body.header-02-lg:not(.homePage) header#site-header nav.main > ul > li > span > a {
        margin-top: 30px;
        line-height: 30px;
        transition: 0.5s;
    }

    body.header-02-lg header#site-header nav.main > ul > li > span:before {
        height: 4px !important;
        width: calc(100% - 40px) !important;
        top: 30px;
        left: 40px;
        background: #00B8A5;
    }

    body.header-02-lg header#site-header nav.main > ul > li:focus-within > span:before {
        height: 4px;
    }

    html.no-touch body.header-02-lg header#site-header nav.main > ul > li:hover > span::before {
        opacity: 1;
    }

    body.header-02-lg header#site-header nav.main > ul > li.active:not(:hover) > span::before {
        opacity: 0;
    }

    section.mainBanner .item .inner div.info {
        margin-top: 100px;
    }
}