/* ******************************** UNIVERSAL ******************************** */
@media screen and (max-width: 850px) {
    /* tablet */
    :root {
        font-size: 0.6em !important;

        --default-sub-content-width: 93% !important;
        --home-sub-content-width: 93% !important;
        --gallery-sub-content-width: 85% !important;
        --contact-sub-content-width: 96% !important;
    }
}
@media screen and (max-width: 400px) {
    /* mobile */
    :root {
        font-size: 0.5em !important;

        --default-sub-content-width: 90% !important;
        --home-sub-content-width: 97% !important;
        --gallery-sub-content-width: 90% !important;
        --contact-sub-content-width: 96% !important;
    }
}

@media screen and (orientation:landscape) {
    #landing-container {
        background-image: url('/img/downmiddle_edit_16_8landscape.webp');
    }
    #frontdoor-window {
        background-image: url('/img/glsshopfront.webp');
    }
        /* TABLET */
    @media only screen and (max-width: 1370px) and (min-width: 1020px)  {
        #landing-container {
            background-image: url('/img/chairside.webp');
        }
        #frontdoor-window {
            background-image: url('/img/shopfromt_landscapetablet2.webp');
        }
    }
    #landing-container > #landing-content {
        bottom: 15%;
		right: 13%;
        font-size: 1.4em;
    }
}

@media screen and (orientation:portrait) {
    #landing-container {
        background-image: url('/img/scissorsportrait_mobile.webp');
    }
    #frontdoor-window {
        background-image: url('/img/shopfront_portrait_mobile.webp');
    }
        /* TABLET */
    @media only screen and (max-width: 1190px) and (min-width: 760px)  {
        #landing-container {
            background-image: url('/img/scissorsleather_portrait_tablet.webp');
        }
        #frontdoor-window {
            background-image: url('/img/shopfront_tablet2.webp');
        }
    }
    #landing-container > #landing-content {
        bottom: 30%;
		right: 13%;
        font-size: 2em;
    }
}

/* ******************************** LANDING ******************************** */
/* BG ALIGNMENT */
/* @media screen and (max-width: 1350px) {
    #landing-container > .bg-landing {
        height: 100% !important;
        height: 100% !important;
    }
} */

/* ABOUT */
@media screen and (max-width: 1100px) {
    #about {
        flex-direction: column !important;
        /* text-align: center; */
        /* justify-items: center; */
        padding: 5% 5% !important;
    }
    #about #about-img {
        width: 24em !important;
        margin: 0 auto 0 auto !important;
    }
    #about > #about-text {
        font-size: 1.3em !important;
        padding: 0 4% !important;
    }
}
@media only screen and (max-width: 1370px) and (min-width: 1020px)  {
    #about > #about-text {
        font-size: 1.3em !important;
    }
}

/* LOYALTY */
@media screen and (max-width: 600px) {
    #loyalty-container {
        flex-direction: column-reverse !important;
        padding: 5% 7% !important;
    }
    #loyalty-container #loyalty-img {
        height: auto !important;
        width: 16em;
        margin: 0 auto 1em auto !important;
        float: right;
        padding-left: 0.5em;
    }
    #loyalty-container p {
        font-size: 1.2em !important;
    }
}
@media screen and (max-width: 1100px) {
    #loyalty-container p {
        font-size: 1.2em !important;
    }
}

/* LOCATION PANEL */
@media screen and (max-width: 1100px) {
    #home-location-container {
        grid-template-columns: auto !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas: 'home-location' 'home-opening' 'contact-map';
    }

    /* #home-location-container #home-location {
        grid-column: 1;
        grid-row: 1;
    } */

    #home-location-container > #home-opening {
        grid-column: 1 !important;
        grid-row: 2 !important;

        /* justify-content: center; */
        /* align-items: center; */
        /* width: 500px; */
    }

    #home-location-container #contact-map {
        grid-column: 1 !important;
        grid-row: 3 !important;
        /* height: 17em; */
    }
}

/* TESIMONIALS */
@media screen and (max-width: 1100px) {
    #testimonial-window > #testimonial-container {
        grid-template-columns: auto !important;
        grid-template-rows: repeat(12, auto) !important;
        /* grid-row-gap: 1em; */
        width: var(--home-sub-content-width) !important;
        /* text-align: center !important; */
        /* margin: auto !important; */
    }

    /* #testimonial-window > #testimonial-container i {
        font-size: 2em;
        color: #D5AB55;
    }

    #testimonial-window > #testimonial-container .star-background {
        background-color: rgba(0, 0, 0, 0.666);
        color: var(--bg-color-light);
        font-weight: 600;
    } */

    #testimonial-window > #testimonial-container > #test1 {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #testimonial-window > #testimonial-container > #test2 {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #testimonial-window > #testimonial-container > #test3 {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    #testimonial-window > #testimonial-container > #test4 {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }

    #testimonial-window > #testimonial-container > #test5 {
        grid-column: 1 !important;
        grid-row: 5 !important;
    }

    #testimonial-window > #testimonial-container > #test6 {
        grid-column: 1 !important;
        grid-row: 6 !important;
    }

    #testimonial-window > #testimonial-container > #test7 {
        grid-column: 1 !important;
        grid-row: 7 !important;
    }

    #testimonial-window > #testimonial-container > #test8 {
        grid-column: 1 !important;
        grid-row: 8 !important;
    }

    #testimonial-window > #testimonial-container > #test9 {
        grid-column: 1 !important;
        grid-row: 9 !important;
    }

    #testimonial-window > #testimonial-container > #test10 {
        grid-column: 1 !important;
        grid-row: 10 !important;
    }

    #testimonial-window > #testimonial-container > #test11 {
        grid-column: 1 !important;
        grid-row: 11 !important;
    }

    #testimonial-window > #testimonial-container > #test12 {
        grid-column: 1 !important;
        grid-row: 12 !important;
    }
}


/* ******************************** CONTACT ******************************** */

@media screen and (max-width: 1100px) {
    #contact-grid {
        grid-template-columns: auto !important;
        grid-template-rows: auto auto auto auto !important;
    }

    #contact-grid > #contact-page-form {
        grid-column: 1;
        grid-row: 1 !important;
    }

    #contact-grid > #contact-info {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #contact-grid > #contact-location {
        grid-column: 1;
        grid-row: 3 !important;
    }

    #contact-grid > #contact-map {
        grid-column: 1 !important;
        grid-row: 4 !important;
        height: 400px;
    }

    /* FOOTER */
    #app > footer #grid-container {
        grid-template-rows: auto auto auto;
        grid-template-columns: 1fr;
        justify-items: center;
        grid-gap: 3px;
    }
    #grid-container {
        text-align: center !important;
        align-items: center;
    }
    #app > footer > #grid-container > .copyright {
        text-align: center;
    }
}







/* *********** NAV: MAIN MENU / BURGER *********** */

@media screen and (max-width: 1050px) {
    .slogan {
        display: inline;
    }
    #landing-container {
        font-size: 0.8em !important;
    }
}

/*
 * TABLET/MOBILE burger VIEW
 * og:849px
 * ext: 960 depends on meny length
 */
@media screen and (max-width: 906px) {
    /* hide desktop menu items on resize */
    #app > header > #banner > nav > ul {
        display: none;
    }
    /* display burger icon on desktop mode */
    .burger-icon {
        float: right;
        display: block !important;
    }
    .slogan {
        display: inline;
    }
    #standout-menu-style {
        text-align: center !important;
        font-size: 2em;
    }
}

/*
 * DESKTOP VIEW MIN WIDTH
 * Adjust px to match above tablet/mobile view
 * og:849px
 * ext: 960
 * depends on meny length
 */
 @media screen and (min-width: 906px) {
    /* hide burger menu items */
    #burger-links {
        display: none !important;
    }
    #nav-icon1 {
        display: none !important;
    }
}

@media screen and (max-width: 620px) {
    #standout-menu-style {
        font-size: 1.8em;
        padding: .3em .5em !important;
    }
}

@media screen and (max-width: 515px) {
    .slogan {
        display: none;
    }
}

/* ******************************** detail ******************************** */

@media screen and (max-width: 1050px) {
    #landing-container {
        font-size: 0.8em !important;
    }
}

@media screen and (max-width: 470px) {
    #home-location-container {
        width: var(--home-sub-content-width) !important;
    }
    /* .service-table {
        width: 96% !important;
        font-size: 0.5em;
    } */
    .service-table, .service-table th {
        padding: 0.9em 0.9em !important;
    }
    .service-table td {
        padding: 0.7em 0.7em !important;
    }
}

@media screen and (max-width: 400px) {
    #footer-opening {
        font-size: 0.9em !important;
    }
    #landing-container {
        font-size: 0.6em !important;
    }
}

@media screen and (max-width: 330px) {
    #home-location-container {
        width: var(--home-sub-content-width) !important;
    }
}

@media screen and (min-width: 1280px) {
    #google-source {
        bottom: 2px;
        right: 42% !important;
    }
}