* {
    font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
}
body {
    margin: 0;
    padding: 0;
}

.display-none {
    display: none;
}

.popup {
    /* display: none; */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(66, 66, 66, 0.705);
    z-index: 99;
}


.bigimage {
    padding: 0;
    margin: 0;
    z-index: 100;

    width: 80vw;
    left: 10vw;

    height: 90vh;
    top: 5vh;

    position: fixed;
}

.popup>.nav {
    /* vcenter */
    display: flex;
    align-items: center;

    background-color: rgba(66, 66, 66, 0.705);

    left: 0;
    position: fixed;
    height: 10vh;
    top: 45vh;
}

.popup>.nav>a {
    text-decoration: none;
    color: white;
    margin: 0;
    font-size: 3rem;
    vertical-align: middle;
    position: absolute;
}


.popup>.left {
    left: 0;
    width: 10vw;
}

.popup>.left>a {
    right: 0;
}

.popup>.right {
    width: calc(10vw - (100vw - 100%));
    /* calc to remove scrollbar width*/
    left: 90vw;
}

.bigimage>div {
    padding: 0;
    margin: 0;
    display: inline-block;
    height: 100%;
    position: absolute;
}

.close-mobile{
    position: absolute;
    z-index: 1;
    display: none;
    padding-top: 1rem;
}
a.close{
    padding: 1rem;
    font-size: 2rem;
    text-decoration: none;
    color: white;
    vertical-align: middle;
    background-color: rgba(54, 54, 54, 0.726);
}
a.close:hover{
    background-color: rgba(54, 54, 54, 0.281);
}
.bigimage div.img {
    left: 0;
    width: 80%;
    background-color: rgb(22, 22, 22);
}



.bigimage div.img img {
    max-width: 100%;
    position: absolute;
    object-fit: contain;
    top: 50%;
    left: 50%;
    height: 100%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

.bigimage div.info {
    background-color: rgb(22, 22, 22);
    color: white;
    font-size: 1rem;
    left: 80%;
    width: 20%;
}


@media only screen and (orientation: portrait) {
    a.close{
        font-size: 1rem;
    }
    .close-desktop{
        display: none;
    }
    .close-mobile{
        display: block;
        z-index: 101;
    }

    /*add this to body if popup is open*/
    .noscroll {
        overflow-y: hidden;
        /* prevent body from scrolling */
    }

    .popup {
        overflow-y: scroll;
        /* scroll popup only */

        /* position: sticky; */
    }


    .popup>.nav {
        position: absolute;
        z-index: 120;
    }


    .popup>.nav>h1 {
        padding: 10px;
        background-color: rgba(78, 78, 78, 0.438);
    }

    .bigimage {
        /*background-color: violet; */
        min-height: 100vh;
        position: absolute;
    }

    .bigimage {
        padding-top: 64px;
        width: calc(100vw - (100vw - 100%));
        /* calc to remove scrollbar width*/
        height: 100vh;
        top: 0;
        left: 0;
    }

    .bigimage div.img,
    .bigimage div.info {
        width: 100%;
        position: relative;
        left: 0;
        height: initial; /* auto */
        margin: 0;
    }
    
    /* center info between next/prev links */
    .bigimage div.info {
        width: 80%;
        left: 10%;
    }

    .bigimage div.img img {
        max-width: 100%;
        position: relative;
        left: initial;
        top: initial;
        transform: initial;
        margin: initial;
    }
}

/* smartphones, touchscreens */
@media (pointer: coarse) {
    .bigimage {
        width: 100vw;
        /* touchscreens do not have a "scrollbar" */
    }
}