/* ==========================================================
   RESPONSIVE.CSS
   Bute Developments
   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(.90);

        transform-origin:
            left center;

        left: -10px;

    }

}


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

@media (min-width: 1440px) and (max-width: 1679px) {

    .logo-lockup {

        transform:
            translateY(-3vh)
            scale(.82);

        transform-origin:
            left center;

        left: -20px;

    }

}


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

@media (min-width: 1280px) and (max-width: 1439px) {

    .logo-lockup {

        transform:
            translateY(-3vh)
            scale(.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(.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;

    }


    /* ======================================================
       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: .5rem;

        margin-bottom: .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: .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:
            .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;

    }

}