#gallery {
    display        : flex;
    overflow-x     : hidden;
    flex-direction : row;
    box-sizing     : border-box;
    margin         : 0;
    padding        : 0;
}

.grid-container {
    display         : block;
    overflow        : hidden;
    opacity         : 1;
    flex            : 0 0 auto;
    flex-direction  : column;
    width           : 100%;
    margin          : 0;
    padding         : 0;
    transition      : opacity 0.3s ease-out;
    scrollbar-width : thin;
    scrollbar-color : #4F94FA rgba(146, 250, 48, 0.3);

    &.hidden {
        opacity : 0;
    }

    & #grid {
        display               : grid;
        position              : relative;
        overflow-x            : hidden;
        justify-content       : center;
        box-sizing            : border-box;
        width                 : 100%;
        min-height            : 100vh;
        padding               : 4em 0;
        grid-template-columns : repeat(auto-fit, minmax(200px, 15vw));
        grid-auto-rows        : minmax(200px, 15vw);
        grid-auto-columns     : minmax(200px, 15vw);
        grid-gap              : 1em;
    }

    &.mini {
        overflow-y       : scroll;
        width            : 13vw;
        height           : 100vh;
        border-right     : 2px solid #ECECEC;
        box-shadow       : inset -2px 0 4px #333333;
        background-color : #FFFFFF;

        & #grid {
            padding               : 0;
            grid-template-columns : 12vw;
            grid-auto-rows        : 12vw;
            grid-auto-columns     : 12vw;
        }
    }
}

.grid-item {
    display         : flex;
    position        : relative;
    align-items     : center;
    justify-content : center;
    box-sizing      : border-box;
    padding         : 5%;
    transition      : all 0.2s ease-out;

    & img {
        display       : block;
        position      : absolute;
        opacity       : 1;
        box-sizing    : border-box;
        width         : 80%;
        height        : 80%;
        margin        : 0;
        border        : 4px solid #333333;
        border-radius : 10%;

        &.hidden {
            opacity : 0;
        }

        &:hover,
        &.active {
            opacity       : 1;
            width         : 95%;
            height        : 95%;
            border-color  : red;
            border-radius : 0;
            box-shadow    : 0 0 12px #000000;
            cursor        : pointer;
        }

        &.active {
            border-color : #FFFFFF;
        }

        &.no-hover {
            pointer-events : none;
        }
    }
}

.lightbox {
    display         : flex;
    position        : relative;
    overflow        : hidden;
    align-items     : center;
    justify-content : center;
    box-sizing      : border-box;
    width           : 87vw;
    height          : 100vh;
    padding         : 5em 2em 2em 2em;

    &.hidden {
        display : none;
    }
}

.new-image {
    position   : relative;
    opacity    : 1;
    max-width  : 100%;
    max-height : 100%;
    margin     : 0;
    padding    : 0;
    border     : 10px solid #000000;
    transition : opacity 0.3s ease-out;

    &.hidden {
        opacity : 0;
    }
}

.no-hover {
    position         : absolute;
    z-index          : 110;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : rgba(0, 0, 0, 0);
}

.image-player {
    display         : flex;
    position        : absolute;
    top             : 5px;
    align-items     : center;
    justify-content : space-between;
}

.player-button {
    display          : flex;
    z-index          : 140;
    overflow         : hidden;
    font-family      : times, serif;
    text-transform   : uppercase;
    flex-direction   : row;
    align-content    : center;
    align-items      : center;
    justify-content  : center;
    margin           : 0 10px;
    border           : 2px solid #A0A0A0;
    border-radius    : 10px;
    background-color : #FFFFFF;
    cursor           : pointer;

    & div {
        padding : 0.3em 0.8em;

        & span {
            margin  : 0;
            padding : 0;
        }
    }

    & .img-prev {
        border-right  : 1px solid #333333;
        border-radius : 8px 0 0 8px;

        &:hover {
            box-shadow       : inset 1px 1px 2px #333333;
            background-color : rgba(21, 65, 72, 0.2);
        }
    }

    & .img-next {
        border-radius : 0 8px 8px 0;

        &:hover {
            box-shadow       : inset -1px 1px 2px #333333;
            background-color : rgba(21, 65, 72, 0.2);
        }
    }

    & .close-lightbox {
        border-radius : 8px;

        &:hover {
            box-shadow       : inset 1px 1px 2px #333333;
            background-color : #FAC1C1;
        }
    }

}