/* ---------- variable ---------- */
@import url("https://redtoucan-admin.azurewebsites.net/media/uvdovbjb/variable.css");

/* ---------- mobile ---------- */
header {
    background-image: url("https://redtoucan-admin.azurewebsites.net/media/mq0jrmxt/mobile-hero-background.jpg");
    min-height: 102vh;
    background-size: cover;
    background-position: center;
    background-clip: border-box;
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
    display: flex;
    color: var(--color-white);
    justify-content: center;
}

header .strategy-branding {
    /* position: absolute; */
    /* top: 38vh; */
    padding: 1rem;
    margin-top: 45vh;
}

header .strategy-branding object {
    margin-bottom: 1rem;
    width: 100%;
}

header .strategy-branding .svg-animation-desktop {
    display: none;
}

header .strategy-animated-title-desktop {
    display: none;
}

header .strategy-branding svg {
    margin-bottom: 1rem;
}

header .strategy-branding hr {
    border: none;
    border-top: .75rem solid var(--color-orange);
    width: 33.33333%;
    margin: 0 auto;
    margin-bottom: 1rem;
    margin-top: -1rem;
}

header .strategy-branding p {
    margin-top: 1rem;
}

/* ---------- tablet ---------- */
@media screen and (min-width: 48rem) {
    header {
        background-color: var(--color-orange);
        background-image: url("https://redtoucan-admin.azurewebsites.net/media/1vnp4pkg/desktop-hero-background.jpg");
    }

    header .strategy-branding {
        /* top: 42vh; */
        max-width: 66.66666%;
        margin: 45vh auto 1rem auto;
    }

    header .strategy-branding h1 {
        word-spacing: normal;
    }
}

@media screen and (min-width: 62rem) {
    header .strategy-animated-title-desktop {
        display: block;
    }

    header .strategy-animated-title-mobile {
        display: none;
    }

    .mobile-only-return {
        display: none;
    }
}

/* ---------- desktop ---------- */
@media screen and (min-width: 62rem) {
    header .strategy-branding {
        max-width: 100%;
        padding-bottom: 6rem;
    }

    header .strategy-branding hr {
        max-width: 33.33333%;
        margin: 1rem auto !important;
    }

    header .strategy-branding .svg-animation-desktop {
        display: block;
        padding: 0 2rem;
    }

    header .strategy-branding object {
        margin-bottom: -.5rem;
    }

    header .strategy-branding .svg-animation-mobile {
        display: none;
    }
}