/* ===========================
   GLOBAL RESET & BASICS
   =========================== */
* { box-sizing: border-box; }
body { margin: 0; margin-left: 20%; }

/* ===========================
   GRID LAYOUT
   =========================== */
.row > .column { padding: 8px; }
.row:after { content: ""; display: table; clear: both; }
.column { float: left; width: 25%; }

/* ===========================
   IMAGE STYLING (THUMBS)
   =========================== */
img { margin: 0; display: inline-block; }
.thumb_have_1, .thumb_other_1, .thumb_missing_1 {
    background-color: transparent;
    border: 2px solid red;
    margin: 2px;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
}

/* ===========================
   IMAGE STYLING (FULLSIZE)
   =========================== */
.fullsize_have_1, .fullsize_other_1 {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
}

/* ===========================
   HOVER EFFECT (FULLSIZE)
   =========================== */
img.hover-shadow {
    transition: 0.3s;
    display: inline-block;
}

.hover-shadow:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2),
                0 6px 20px rgba(0,0,0,0.19);
}

/* ===========================
   MODAL VIEWER
   =========================== */
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); }
.modal-content { position: relative; margin: auto; padding: 0; width: 80%; max-width: 1600px; }
.close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; }
.close:hover, .close:focus { color: #999; cursor: pointer; }
.mySlides { display: none; }
.cursor { cursor: pointer; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; user-select: none; }
.next { right: 0; }
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }