/** Gallery **/

#slideshow-overlay{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100vh;
    background-color:rgba(0,0,0,0.85);
    z-index:99;
    box-sizing:border-box;
    padding:40px;
}

#slideshow-overlay div.slides-holder{
    position:relative;
}

#slideshow-overlay div.slides-holder div.slide{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
}

#slideshow-overlay div.slides-holder div.slide div.gallery-item-image-holder img{
    max-width:100%;
    height:auto;
    max-height:65vh!important;
    width:auto;
}

#closer{
    display:block;
    width:40px;
    height:40px;
    position:absolute;
    top:5px;
    right:5px;
    background-image:url(../images/gallery-closer.png);
    background-size:40px 40px;
    z-index:999;
}

#gallery-next-button{
    display:block;
    width:29px;
    height:54px;
    position:absolute;
    top:calc(50vh - 27px);
    right:5px;
    background-image:url(../images/next-arrow.png);
    background-size:29px 54px;
    z-index:999;
    background-repeat:no-repeat;
}

#gallery-previous-button{
    display:block;
    width:29px;
    height:54px;
    position:absolute;
    top:calc(50vh - 27px);
    left:1px;
    background-image:url(../images/previous-arrow.png);
    background-size:29px 54px;
    z-index:999;
    background-repeat:no-repeat;
}

#slideshow-overlay div.slides-holder div.slide div.gallery-item-text p.hint{
    font-style:italic;
    color:#777;
}

@media screen and (min-width: 750px) {
    
    #slideshow-overlay div.slides-holder div.slide div.gallery-item-image-holder img{
        max-height:85vh!important;
    }
    
    #slideshow-overlay div.slides-holder div.slide div.gallery-item-image-holder{
        float:left;
        width:calc(50% - 50px);
        padding-left:10px;
        text-align:right;
    }
    
    #slideshow-overlay div.slides-holder div.slide div.gallery-item-text{
        float:left;
        width:calc(50% - 50px);
        box-sizing:border-box;
        padding-left:20px;
    }
    
    #closer{
        width:58px;
        height:58px;
        top:15px;
        right:15px;
        background-image:url(../images/gallery-closer-2x.png);
        background-size:58px 58px;
    }
    
    #gallery-next-button{
        width:29px;
        height:54px;
        position:absolute;
        top:calc(50vh - 27px);
        right:10px;
        background-image:url(../images/next-arrow-2x.png);
        background-size:29px 54px;
    }

    #gallery-previous-button{
        width:29px;
        height:54px;
        position:absolute;
        top:calc(50vh - 27px);
        left:10px;
        background-image:url(../images/previous-arrow-2x.png);
        background-size:29px 54px;
    }
    
}