/************************************************/
/*********** OVPC HANDBOOK SLIDESHOW ************/
/************************************************/

/*****************/
/*** CONTAINER ***/
/*****************/
#global-slideshow .slideshow-container {
    align-items: stretch;
    display: flex;
    justify-content: space-between;
}



/*** SLIDESHOW ***/
#global-slideshow .slideshow-container ol.slideshow-slides {
    flex-grow: 1;
    list-style: none;
    margin: 1em 0;
    padding: 0;
}

/* SLIDE */
html.no-js #global-slideshow .slideshow-container ol.slideshow-slides > li:not(:first-of-type) {
    display: none;
}

#global-slideshow .slideshow-container ol.slideshow-slides > li > .image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 56.25%; /* 16:9 ratio*/
    padding-bottom: 68.75%; /* 16:11 ratio*/
}

#global-slideshow .slideshow-container ol.slideshow-slides > li > .caption {
    margin-top: 1em;
}



/*** PREVIOUS/NEXT ***/
#global-slideshow .slideshow-container a.prev-next {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    font-size: 2em;
    padding-bottom: 3em;
    text-decoration: none;
}

html.no-js #global-slideshow .slideshow-container a.prev-next {
    display: none;
}

#global-slideshow .slideshow-container a.prev {
    /*margin-left: -2em;*/
    padding-right: 1em;
}

#global-slideshow .slideshow-container a.next {
    /*margin-right: -2em;*/
    padding-left: 1em;
}



/*************/
/*** PAGER ***/
/*************/
#global-slideshow .pager {
    list-style: none;
    margin-bottom: 0;
    padding: 0;
    text-align: center;
}

#global-slideshow .pager > li {
    display: inline-block;
    margin: 0.3em;
}

#global-slideshow .pager > li a {
    background: #000;
    border-radius: 50%;
    display: block;
    height: 1em;
    width: 1em;
}

#global-slideshow .pager > li.active a,
#global-slideshow .pager > li a:hover {
    background: #1A51B6;
}



/*********************/
/*** MEDIA QUERIES ***/
/*********************/
@media only screen and (max-width: 40em ) {

    /*** PREVIOUS/NEXT ***/
    #global-slideshow .slideshow-container a.prev-next {
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
    }

}