/* DESKTOP */
@media (min-width: 991px) {
    .scroll-text::before {
        content: 'scroll';
    }
}


/* BOTH MOBILE AND TABLET */
@media (max-width: 991px) {

    /* ----------------------navbar labels */
    .nav-item .dropdown {
        opacity: 1;
        transition-delay: 0s;
    }

    .aux-carousels img {
        margin: 0;
        width: 100vw;
        height: auto;
    }

    .scroll-text::before {
        content: 'swipe';
    }

}

/* ONLY MOBILE */
@media (max-width: 767px) {

    #navbar {
        transition: visibility 0s 0.4s, opacity 0.2s ease-in-out;
        visibility: hidden;
        display: block;
        font-size: 1.7rem;

        /* top right bottom left */
        padding: 40px 40px 40px 80px;
        margin: 0;
        position: fixed;
        overflow: scroll;
        box-sizing: border-box;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
        width: 100%;
        height: 100%;
        background-color: black;
        border: 1px solid white;
        transition: none;
    }

    /* #navbar:first-child {
        visibility: collapse;
    } */

    #mobile-navbar-button {
        z-index: 10;
        visibility: visible;
        position: fixed;
        top: 20px;
        left: 20px;
        width: 30px;
        height: 30px;
        background-color: black;
        border: 6px solid white;
    }


    .dropdown {
        /* transition: visibility 0s 0.4s, opacity 0.2s ease-in-out; */
        position: relative;
        background-color: #000000;
        color: #ffffff;
        padding: 10px;
        box-sizing: border-box;
        border: none;
        border-radius: 17px;
        font-size: 18px;
        display: flex;
        flex-direction: column;
        /* visibility: hidden; */
    }

    .dropdown a {
        padding: 10px;
    }

    footer {
        z-index: 4;
    }

    body {
        margin: 40px 0 0 0;
        padding: 0;
        width: 100vw;
        overflow-x: hidden;
    }

    .main {
        position: relative;
        margin: 0 3px 0 3px;
        display: block;
        padding-top: 50px;

    }

    .page-header {

        white-space: nowrap;
        text-align: left;
        width: 100vw;
        height: auto;

        transform: scale(1.0);
        transform-origin: left;
    }

    #home-header {
        transform: scale(1.3);
        transform-origin: left;
    }

    #home-main {
        .bottom-nav-buttons-container {
            display: flex;
            flex-direction: column;
        }

        .bottom-nav-buttons {
            position: relative;
            font-size: 1.3rem;
            width: fit-content;
        }
    }

    .work-info {
        padding: 0 2px;
        display: flex;
        flex-direction: column;
        width: 95vw;
    }

    .work-title {

        font-size: 2.5rem;

    }

    .work-date {}

    .work-desc {
        max-width: 100%;
        text-align: left;
        font-size: 1rem;
    }

    .graphic-works {
        /* top right bottom left */
        /* padding: 0 2vw 0 2vw; */
        padding: 0;
        margin: 0;
    }

    /* GRAPHIC DESIGN PAGE */

    #alt-img-container {
        display: block;
        margin: 0;
        width: 100vw;

    }

    #alt-1,
    #alt-2 {
        width: 100vw;
        height: auto;
        padding-bottom: 2px;
        box-sizing: border-box;
    }


    /* bottom three works in gd page */
    .graphic-design-img {
        width: 100%;
        height: auto;
        margin: 0;
    }


    /*  PHOTOGRAPHY */

    #all-photos img {
        border: 10px solid white;
        width: 100vw;
        height: auto;
        margin: 0;
        box-sizing: border-box;
    }

    /* VIDEO */

    #video-main {
        width: 100%;
        overflow-x: hidden;
        padding: 0;
        margin: 0;
    }

    #video-main video {
        width: 100%;
        height: auto;
    }

    /* 
        #video-main img,
        video {
            object-fit: contain;
            height: auto;
    
        } */


    #kemper {

        display: block;
    }

    #kemper .work-desc {
        max-width: none;
        text-align: left;
        text-indent: 0;
    }


    /* #kemper-photo-grid img,
        .kemper-vertical,
        .kemper-landscape,
        #kemper-main-photo {
            display: block;
            width: 100%;
            height: auto;
            padding: 0;
        } */

    .motion-graphics div {
        display: block;
        padding: 0;
    }

    .motion-text {
        display: block;
        padding: 0 10px;
    }

    /* audio */

    #audio-main {
        width: 100vw;
        overflow-x: hidden;


        .section-title {
            font-size: 3.7rem;
            margin: 0;
            word-wrap: normal;
        }

        #silo .work-desc {
            max-width: 100vw;
            margin-bottom: 0;
        }

    }
}


/* ONLY TABLET */
@media only screen and (min-width: 768px) and (max-width: 991px) {}