body {
    font-family: Helvetica, Arial, sans-serif;
    margin: 30px;
}
h1 {
    font-size: 20px;
}

img[usemap] {
    border: none;
    height: auto;
    max-width: 100%;
    width: auto;
}

/******************************  POPUP *********************************/

#popup {
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    background-color: white;
    /*border: 5px solid darkviolet;*/
    border: 2px solid #888;
    width: 480px;
    height: 480px;
    /*margin-top: 32px;*/
    border-radius: 10px;
    padding: 1.2rem 0.05rem  1.2rem 0;
    overflow-y: scroll;
    /*padding: 6px 0px;*/
    display: none;
    position: relative;
    /* Without this the list marker goes to the center of the line in Safari
       but only in the popup - not in the regular body.  Something to do with
       the absolute positioning? */
    list-style-position: inside;
}
#popup img {
    /*float: left;*/

    width: 200px;
    height: 340px;
    object-fit: contain;
    /*width: 100%;*/
    /*height: 100%;*/
    /*object-fit: contain;*/
    /*height: 100%;*/
    /*margin: 0 16px 8px 16px;*/
    /*margin: 8px;*/
}
.popup-images {
    float: left;
    width: 200px;
    margin: auto 30px;
}
.image-slide figure {
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    text-align: center;
    font-size: small;
}
#popup p {
    margin: 16px;
}
#popup h4 {text-align: center}
#popup .content {
    /*border-radius: 8px;*/
    /*border: 2px solid red;*/
    margin-bottom: 16px;
    /*margin: 8px;*/
    /*color: blue;*/
    /*overflow-y: scroll;*/
    /*overflow: auto;*/
}
#popup {
    list-style-position: inside;
}
#popup::marker {
    text-align: end;
}

#popup-close {
    position: absolute;
    background-image: url('../../static/images/controls/icons8-close-50-bolder.png');
    background-size: cover;
    width: 30px;
    height: 30px;
    top: 10px;
    right: 10px;
    border: 2px solid transparent;
    border-radius: 2px;
    background-color: white;
}
#popup-close:hover {
    border-color: #ccc;
}

/*********************** Slick Carousel/Slider ***********************/

.slick-prev.slick-arrow,
.slick-prev:focus {
    background-image: url("../../static/images/controls/icons8-back-50.png");
    background-size: 25px;
    width: 25px;
    height: 25px;
    left: -25px;

}
.slick-next.slick-arrow,
.slick-next:focus {
    background-image: url("../../static/images/controls/icons8-forward-50.png");
    background-size: 25px;
    width: 25px;
    height: 25px;
    right: -25px;
    /*border: solid 2px white;
    box-shadow: 0 0 5px #ccc;*/
}

.slick-prev:before,
.slick-next:before {
    display: none;
}

.slick-prev:hover,
.slick-next:hover {
    opacity: .5;
    /*color: transparent;*/
    /*outline: none;*/
    /*background: transparent;*/
}
.slick-slider {
    /*
    border: solid 5px white;
    box-shadow: 0 0 5px #ccc;
     */
}

/****************************** MOBILE / TABLET ************************************/

/******* Variable for mobile cutoff width
 */
:root {
    --max-mobile-width: 600px;
}
/*
(max-width: var(--max-mobile-width))
 */
@media (max-width: 600px) {
    #popup {
        position: fixed;
        left: 1vw;
        top: 1vh;
        width: 92vw;
        height: 80vh;
        /*background-color: darkorchid;*/
        /*color: white;*/
        transform-origin: left top;
        transform: translate(0px, 0px) scale(1);
    }

    .popup-images {
        float: none;
        margin: auto;
    }
}

/************* DEBUG *********/
/*#debug-output {*/
/*    height: 200px;*/
/*    width: 100%;*/
/*    overflow-y: scroll;*/
/*    border: solid 1px black;*/
/*    margin-bottom: 16px;*/
/*    display: none;*/
/*}*/