/* ==========================================================
   RESPONSIVE.CSS
   Nicholls
   Final Responsive Layout
========================================================== */

/* ==========================================================
   GLOBAL RESPONSIVE SAFETY
========================================================== */

html,
body,
.hero {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
}

/* ==========================================================
   LARGE DESKTOP
   1920px+
========================================================== */

@media (min-width: 1920px) {
    .logo-lockup {
        transform: translateY(-3vh) scale(1);

        transform-origin: left center;

        left: 0;
    }
}

/* ==========================================================
   DESKTOP
   1680px – 1919px
========================================================== */

@media (min-width: 1680px) and (max-width: 1919px) {
    .logo-lockup {
        transform: translateY(-3vh) scale(0.9);

        transform-origin: left center;

        left: -10px;
    }
}

/* ==========================================================
   LARGE LAPTOP
   1440px – 1679px
========================================================== */

@media (min-width: 1440px) and (max-width: 1679px) {
    .logo-lockup {
        transform: translateY(-3vh) scale(0.82);

        transform-origin: left center;

        left: -20px;
    }
}

/* ==========================================================
   LAPTOP
   1280px – 1439px
========================================================== */

@media (min-width: 1280px) and (max-width: 1439px) {
    .logo-lockup {
        transform: translateY(-3vh) scale(0.75);

        transform-origin: left center;

        left: -30px;
    }
}

/* ==========================================================
   SMALL LAPTOP
   1024px – 1279px
========================================================== */

@media (min-width: 1024px) and (max-width: 1279px) {
    .logo-lockup {
        transform: translateY(-3vh) scale(0.67);

        transform-origin: left center;

        left: -40px;
    }
}

/* ==========================================================
   TABLET + MOBILE
   1023px AND BELOW

   Overall lockup = 90vw

   SVG = 20vw
   Content = 70vw
========================================================== */

@media (max-width: 1023px) {
    /* ======================================================
       MAIN LOCKUP
    ====================================================== */

    .logo-lockup {
        width: 90vw;
        max-width: 90vw;

        position: relative;

        display: flex;

        flex-direction: row;

        align-items: flex-start;

        justify-content: flex-start;

        transform: translateY(-3vh);

        transform-origin: left center;

        left: -5px;

        margin-left: 0px;
    }

    /* ======================================================
       TEXT / IMAGE COLUMN
    ====================================================== */

    .logo-text {
        width: 70vw;

        flex: 0 0 70vw;

        position: relative;

        top: 0;

        margin: 0;

        margin-left: 20vw;

        padding: 0;

        display: block;

        transform-origin: left top;
    }

    /* ======================================================
       CONSTRUCTION MESSAGE
    ====================================================== */

    .construction-banner {
        width: 100%;

        margin-top: 0.5rem;

        margin-bottom: 0.5rem;

        padding-left: 0;

        padding-bottom: 20px;

        line-height: 1.4;
    }

    /* ======================================================
       MAIN LOGO IMAGE

       Extra space added below construction text.
    ====================================================== */

    .logo-text img {
        display: block;

        width: 100%;

        max-width: 100%;

        height: auto;

        margin-top: 12px;

        margin-right: 0;

        margin-bottom: 0;

        margin-left: 0;

        padding: 0;

        transform: none;
    }

    /* ======================================================
       CONTACT INFORMATION
    ====================================================== */

    .contact-banner {
        width: 100%;

        margin-bottom: 0.5rem;

        padding-left: 0;

        line-height: 1.45;
    }

    /* ======================================================
       SVG CONTAINER
    ====================================================== */

    .logo {
        position: absolute;

        left: 0;

        top: 0;

        width: 20vw;

        height: auto;

        margin: 0;

        padding: 0;

        display: block;

        transform: none;

        transform-origin: left top;

        z-index: 5;
    }

    /* ======================================================
       SVG
    ====================================================== */

    .logo-svg {
        display: block;

        width: 100%;

        height: auto;

        margin: 0;

        padding: 0;

        transform: none;
    }
}

/* ==========================================================
   TABLET LANDSCAPE
   768px – 1023px
========================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    .construction-banner,
    .contact-banner {
        font-size: clamp(17px, 2.1vw, 20px);

        letter-spacing: 1.4px;
    }

    .logo-text img {
        margin-top: 12px;
    }
}

/* ==========================================================
   TABLET PORTRAIT
   600px – 767px
========================================================== */

@media (min-width: 600px) and (max-width: 767px) {
    .construction-banner,
    .contact-banner {
        font-size: clamp(17px, 2.7vw, 20px);

        letter-spacing: 1.3px;
    }

    .logo-text img {
        margin-top: 13px;
    }
}

/* ==========================================================
   LARGE MOBILE
   480px – 599px
========================================================== */

@media (min-width: 480px) and (max-width: 599px) {
    .construction-banner,
    .contact-banner {
        font-size: clamp(16px, 3.2vw, 19px);

        letter-spacing: 1.1px;
    }

    .logo-text img {
        margin-top: 14px;
    }
}

/* ==========================================================
   MOBILE
   375px – 479px
========================================================== */

@media (min-width: 375px) and (max-width: 479px) {
    .construction-banner,
    .contact-banner {
        font-size: clamp(16px, 3.8vw, 19px);

        letter-spacing: 1px;
    }

    .logo-text img {
        margin-top: 14px;
    }
}

/* ==========================================================
   SMALL MOBILE
   BELOW 375px
========================================================== */

@media (max-width: 374px) {
    .construction-banner,
    .contact-banner {
        font-size: clamp(15px, 4vw, 18px);

        letter-spacing: 0.9px;
    }

    .logo-text img {
        margin-top: 16px;
    }
}

/* ==========================================================
   SHORT LANDSCAPE
   HEIGHT BELOW 700px
========================================================== */

@media (orientation: landscape) and (max-height: 700px) {
    .logo-lockup {
        transform: translateY(-2vh);
    }

    .construction-banner,
    .contact-banner {
        font-size: clamp(14px, 1.9vw, 17px);

        line-height: 1.35;
    }
}

/* ==========================================================
   VERY SHORT LANDSCAPE
   HEIGHT BELOW 600px
========================================================== */

@media (orientation: landscape) and (max-height: 600px) {
    .logo-lockup {
        transform: translateY(-1.5vh);
    }

    .construction-banner,
    .contact-banner {
        font-size: clamp(13px, 1.8vw, 16px);

        line-height: 1.3;
    }
}

/* ==========================================================
   EXTREMELY SHORT LANDSCAPE
   HEIGHT BELOW 500px
========================================================== */

@media (orientation: landscape) and (max-height: 500px) {
    .logo-lockup {
        transform: translateY(-1vh);
    }

    .construction-banner,
    .contact-banner {
        font-size: clamp(12px, 1.7vw, 15px);

        line-height: 1.25;
    }
}

/* ==========================================================
   VIDEO
========================================================== */

.hero-video {
    width: 100vw;

    min-width: 100%;

    min-height: 100%;

    object-fit: cover;
}

/* ==========================================================
   DESKTOP VIDEO
========================================================== */

@media (min-width: 1024px) {
    .hero-video {
        transform: translate(-50%, -35%) scale(1.75);
    }
}

/* ==========================================================
   TABLET VIDEO
========================================================== */

@media (min-width: 600px) and (max-width: 1023px) {
    .hero-video {
        transform: translate(-50%, -35%) scale(1.5);
    }
}

/* ==========================================================
   MOBILE VIDEO
========================================================== */

@media (max-width: 599px) {
    .hero-video {
        transform: translate(-50%, -35%) scale(1.35);
    }
}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .piece1,
    .piece2,
    .piece3,
    .piece4,
    .logo-text {
        animation: none !important;

        opacity: 1;

        transform: none !important;
    }
}