body
{
    padding: 1rem;
}

#mainframe
{
    height: 100%;
    width: 100%;
    display: grid;
    /* grid-area: 1 / 1 / 1; */
    row-gap: 2rem;
    column-gap: 2rem;
    grid-template-areas: 'a b c' 'd e f' 'g h i' 'j k l';
    /* padding: 1rem; */

    /* border: solid #000 2px; */

}

@media screen and (max-width: 640px) {
    #mainframe
    {
        grid-template-areas: 'a b' 'c d' 'e f' 'g h' 'i j' 'k l';
    }
}

/* @media screen and (max-width: 480px) {
    #mainframe
    {
        grid-template-areas: 'a' 'b' 'c' 'd' 'e' 'f' 'g' 'h' 'i' 'j' 'k' 'l';
    }
} */

.thumbhold
{
    display: flex;
    width: 100%;
    background-color: azure;
}

.btn-cover
{
    display: flex;
    width: 100%;
    /* visibility: hidden; */
    opacity: 0;
}

/* Thumbs */
.th-bb1 {
    background: url("../viz/th-bb1.jpg") no-repeat left;
    background-size: contain;
}
.th-bb2 {
    background: url("../viz/th-bb2.jpg") no-repeat left;
    background-size: contain;
}
.th-dd {
    background: url("../viz/th-dd.jpg") no-repeat left;
    background-size: contain;
}
.th-dg1 {
    background: url("../viz/th-dg1.jpg") no-repeat left;
    background-size: contain;
}
.th-dg2 {
    background: url("../viz/th-dg2.jpg") no-repeat left;
    background-size: contain;
}
.th-dp {
    background: url("../viz/th-dp.jpg") no-repeat left;
    background-size: contain;
}
.th-gb {
    background: url("../viz/th-gb.jpg") no-repeat left;
    background-size: contain;
}
.th-ha {
    background: url("../viz/th-ha.jpg") no-repeat left;
    background-size: contain;
}
.th-lf {
    background: url("../viz/th-lf.jpg") no-repeat left;
    background-size: contain;
}
.th-mc {
    background: url("../viz/th-mc.jpg") no-repeat left;
    background-size: contain;
}
.th-r5 {
    background: url("../viz/th-r5.jpg") no-repeat left;
    background-size: contain;
}
.th-te {
    background: url("../viz/th-te.jpg") no-repeat left;
    background-size: contain;
}

/* modal */

.btn-modal-closer
{
    position: absolute;
    top: 10px;
    right: 10px;
    /* float: right; */
    font-size: 2rem;
}

.w3-modal
{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(95, 158, 160, 0.99);
}
.w3-container
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

#vewitem
{
    max-height: 90vh;
    max-width: 90vw;

}