/* =========================================================
   TYPOGRAPHY
========================================================= */

:root {
    --font-heading: "minion-3", serif;
    --font-heading-weight: 400;

    --font-body: "Poppins", sans-serif;
}


/* =========================================================
   GLOBAL TYPOGRAPHY
========================================================= */

body,
p,
a,
span,
button,
input,
textarea,
select,
label {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
}


/* =========================================================
   FADE IN
========================================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.splitword,
.splitter,
.fadeco,
.fading,
.predot,
.growco {
    visibility: hidden;
}


.t-d1-fluid.ticker-line,
.containersvg {
    animation: fadeIn 1s ease-in forwards;
}


/* =========================================================
   RESPONSIVE VISIBILITY
========================================================= */

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

    .cooffice-app {
        display: none;
    }

}


@media screen and (min-width: 990px) {

    .mobileco-toggle,
    .mobileco {
        display: none;
    }

}


/* =========================================================
   PRELOADER DESKTOP
========================================================= */

@media screen and (min-width: 990px) {

    .t-d1-fluid {
        margin-top: 0;
        margin-bottom: 0;

        font-family: var(--font-body);
        font-weight: 400;

        color: #1e4c3b;

        line-height: 0.95em;
        letter-spacing: -0.01em;
    }


    .t-d1-fluid.ticker-line {
        position: absolute;

        top: 50%;
        left: 0;

        width: 100%;
        height: 30px;

        margin-left: auto;
        margin-right: auto;

        transform: translateY(-50%);

        white-space: nowrap;
        overflow: hidden;

        font-family: var(--font-body);
        font-size: 2rem;
        font-weight: 400;

        z-index: 999999;
    }


    .c-ticker {
        display: flex;
        align-items: center;
        justify-content: center;

        margin-bottom: 1.5em;

        overflow: hidden;
    }


    .c-ticker_title {
        position: relative;

        flex: 1;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        margin: 0 auto;
    }


    .c-ticker_side {
        flex: 1;

        max-width: 10em;

        padding-bottom: 0.2em;
    }


    .loaderStaggersContainers {
        position: absolute;

        left: 0;
        bottom: 0;

        display: flex;

        width: 100vw;
        height: 100vh;
    }


    .loaderStaggersContainers > div {
        width: 33.3333333vw;
        height: 100vh;

        background-color: #d7e5cc;

        z-index: 992992;
    }


    .containersvg {
        display: flex;
        justify-content: center;

        overflow: hidden;

        z-index: 9929979;
    }


    #homepage {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;

        height: 100vh;

        z-index: 9;
    }


    .start-filler {
        fill: #1e4c3b5a;
    }


    .anim-filler {
        fill: #1e4c3b;
    }


    .co-herovid {
        position: absolute;

        top: 0;
        left: 0;

        width: 100vw;
        height: 100vh;

        object-fit: cover;

        filter: brightness(60%);

        z-index: 1;
    }


    .co-title {
        position: absolute;

        left: 5vw;
        bottom: 7vh;

        max-width: 1200px;

        margin: 0;

        font-family: var(--font-heading);
        font-size: 9rem;
        font-weight: var(--font-heading-weight);

        line-height: 1.18;
        letter-spacing: -0.045em;

        color: #ffffff;

        z-index: 9;
    }


    .splitwordco {
        overflow: hidden;
    }

}


/* =========================================================
   PRELOADER MOBILE
========================================================= */

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

    .t-d1-fluid {
        margin-top: 0;
        margin-bottom: 0;

        font-family: var(--font-body);
        font-weight: 400;

        color: #1e4c3b;

        line-height: 0.95em;
        letter-spacing: -0.01em;
    }


    .t-d1-fluid.ticker-line {
        position: absolute;

        top: 50%;
        left: 0;

        width: 100%;
        height: 30px;

        margin-left: auto;
        margin-right: auto;

        transform: translateY(-50%);

        white-space: nowrap;
        overflow: hidden;

        font-family: var(--font-body);
        font-size: 2rem;
        font-weight: 400;

        z-index: 999999;
    }


    .c-ticker {
        display: flex;
        align-items: center;
        justify-content: center;

        margin-bottom: 3.5em;

        overflow: hidden;
    }


    .c-ticker_title {
        position: relative;

        flex: 1;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        margin: 0 auto;
    }


    .c-ticker_side {
        flex: 1;

        max-width: 10em;

        padding-bottom: 0.2em;
    }


    .loaderStaggersContainers {
        position: absolute;

        left: 0;
        bottom: 0;

        display: flex;

        width: 100vw;
        height: 100vh;
    }


    .loaderStaggersContainers > div {
        width: 33.3333333vw;
        height: 100vh;

        background-color: #1a2528;

        z-index: 992992;
    }


    .containersvg {
        display: flex;
        justify-content: center;

        overflow: hidden;

        z-index: 9929979;
    }


    #homepage {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;

        height: 100vh;

        z-index: 9;
    }


    .start-filler {
        fill: #1e4c3b5a;
    }


    .anim-filler {
        fill: #1e4c3b;
    }


    .co-herovid {
        position: absolute;

        top: 0;
        left: 0;

        width: 100vw;
        height: 100vh;

        object-fit: cover;

        filter: brightness(60%);

        z-index: 1;
    }


    .co-title {
        position: absolute;

        left: 5vw;
        bottom: 7vh;

        max-width: 1000px;

        margin: 0;

        font-family: var(--font-heading);
        font-size: 11vw;
        font-weight: var(--font-heading-weight);

        line-height: 1.08;
        letter-spacing: -0.045em;

        color: #ffffff;

        z-index: 9;
    }


    .splitwordco {
        overflow: hidden;
    }

}