.back-drop-layout {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: black;
    align-items: center;
    position: fixed;
    background-color: rgba(0,0,0,0.9);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.back-drop-image {
    height: auto;
    max-height: 95%;
    max-width: 95%;
    z-index: 10010;
    object-fit: contain;
}

.back-drop-btn {
    position: fixed;
    top: 15px;
    right: 30px;
    z-index: 10020;
    color: white;
    cursor: pointer;
    outline: none;
}

/*.over-hidden {
    overflow: hidden;
}*/

a.nav-left-btn {
    position: fixed;
    left: 20px;
    top: 50%;
    z-index: 10020;
    outline: none;
    color: white;
    cursor: pointer;
}

a.nav-right-btn {
    position: fixed;
    right: 20px;
    top: 50%;
    z-index: 10020;
    outline: none;
    color: white;
    cursor: pointer;
}

.required-item {
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 10000;
}

.sign-nonvisited {
    opacity: 0.9;
    color: white;
}

.sign-visited {
    opacity: 1;
}

@media screen and (min-width: 768px) {
    .square-6 {
        float: left;
        position: relative;
        width: 14%;
        padding-bottom: 14%;
        margin: 1.33%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

@media screen and (max-width: 767px) {
    .square-3 {
        float: left;
        position: relative;
        width: 30%;
        padding-bottom: 30%;
        margin: 1.66%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover; /* contain */
    }
}