/* ===============  slideshow  =============== */
.slideshow {
    position: relative;
    height: 15em;
    overflow: hidden;
    background: rgb(255,255,255);
    border-bottom: 5px solid rgb(218,218,218);
}


/* ===============  slideshow-items  =============== */
.slideshow .slideshow-items {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}


/* ===============  slideshow-item  =============== */
.slideshow .slideshow-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/* ===============  slideshow-caption  =============== */
.slideshow .slideshow-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: rgb(32,45,97);
    background: -moz-linear-gradient(-45deg,  rgba(32,45,97,1) 0%, rgba(77,104,169,0.75) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(32,45,97,1)), color-stop(100%,rgba(77,104,169,0.75)));
    background: -webkit-linear-gradient(-45deg,  rgba(32,45,97,1) 0%,rgba(77,104,169,0.75) 100%);
    background: -o-linear-gradient(-45deg,  rgba(32,45,97,1) 0%,rgba(77,104,169,0.75) 100%);
    background: -ms-linear-gradient(-45deg,  rgba(32,45,97,1) 0%,rgba(77,104,169,0.75) 100%);
    background: linear-gradient(135deg,  rgba(32,45,97,1) 0%,rgba(77,104,169,0.75) 100%);
}

.slideshow .slideshow-caption > * {
    position: absolute;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 3em;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    -ms-transition: opacity 0.6s;
    transition: opacity 0.6s;
    -ms-transform: translate(-200%, 0);
    -webkit-transform: translate(-200%, 0);
    transform: translate(-200%, 0);
    -webkit-transform: translate3d(-200%, 0, 0);
    -moz-transform: translate3d(-200%, 0, 0);
    -ms-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
}

.slideshow .slideshow-caption > *.slideshow-active {
    opacity: 1;
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


/* ===============  slideshow-prev  =============== */
.slideshow .slideshow-prev {
    position: absolute;
    bottom: 0;
    right: 2em;
    right: calc(2em + 1px);
    width: 2em;
    height: 2em;
    display: block;
    overflow: hidden;
    background: #202d61;
    cursor: pointer;
    text-align: center;
    font-size: 1.25em;
    line-height: 2em;
    color: #fff;
}

    
/* ===============  slideshow-next  =============== */
.slideshow .slideshow-next {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2em;
    height: 2em;
    display: block;
    overflow: hidden;
    background: #202d61;
    cursor: pointer;
    text-align: center;
    font-size: 1.25em;
    line-height: 2em;
    color: #fff;
}


/* ===============  slideshow-pagination  =============== */
.slideshow .slideshow-pagination {
    position: absolute;
    bottom: 1.125em;
    left: 1em;
    overflow: hidden;
}

.slideshow .slideshow-pagination > span {
    float: left;
    width: 2em;
    height: 0.25em;
    overflow: hidden;
    background: rgba(173,186,221,0.25);
    margin: 0 0.125em;
    -webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    -ms-transition: background 0.6s;
    transition: background 0.6s;
}

.slideshow .slideshow-pagination > span.slideshow-active {
    background: rgba(173,186,221,1);
}




@media screen and (min-width: 480px) {
    
    /* ===============  slideshow  =============== */
    .slideshow {
        height: 16em;
    }
    
    /* ===============  slideshow-caption  =============== */
    .slideshow .slideshow-caption > * {
        top: 2em;
        left: 2em;
        right: 2em;
    }
    
    /* ===============  slideshow-pagination  =============== */
    .slideshow .slideshow-pagination {
        left: 2em;   
    }
    
}


@media screen and (min-width: 640px) {
    
    /* ===============  slideshow  =============== */
    .slideshow {
        height: 17em;
    }
    
    /* ===============  slideshow-caption  =============== */
    .slideshow .slideshow-caption > * {
        top: 3em;
        left: 3em;
        right: 3em;
    }
    
    /* ===============  slideshow-pagination  =============== */
    .slideshow .slideshow-pagination {
        left: 3em;   
    }
    
}


@media screen and (min-width: 720px) {
    
    /* ===============  slideshow  =============== */
    .slideshow {
        height: 16em;
    }
    
    
    /* ===============  slideshow-items  =============== */
    .slideshow .slideshow-items {
        right: 20.75em;
    }
    
    
    /* ===============  slideshow-caption  =============== */
    .slideshow .slideshow-caption {
        left: auto;
        width: 20.75em;
        background: -moz-linear-gradient(-45deg,  rgba(32,45,97,1) 0%, rgba(77,104,169,1) 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(32,45,97,1)), color-stop(100%,rgba(77,104,169,1)));
        background: -webkit-linear-gradient(-45deg,  rgba(32,45,97,1) 0%,rgba(77,104,169,1) 100%);
        background: -o-linear-gradient(-45deg,  rgba(32,45,97,1) 0%,rgba(77,104,169,1) 100%);
        background: -ms-linear-gradient(-45deg,  rgba(32,45,97,1) 0%,rgba(77,104,169,1) 100%);
        background: linear-gradient(135deg,  rgba(32,45,97,1) 0%,rgba(77,104,169,1) 100%);
    }
    
    .slideshow .slideshow-caption > * {
        top: 2em;
        left: 2em;
        right: 2em;
    }
    
    
    /* ===============  slideshow-pagination  =============== */
    .slideshow .slideshow-pagination > span {
        background: rgba(32,45,97,0.25);
    }
    
    .slideshow .slideshow-pagination > span.slideshow-active {
        background: rgba(32,45,97,1);
    }
    
}


@media screen and (min-width: 800px) {
    
    /* ===============  slideshow-pagination  =============== */
    .slideshow .slideshow-pagination {
        left: 4em;   
    }
    
}



@media screen and (min-width: 992px) {
    
    /* ===============  slideshow-caption  =============== */
    .slideshow .slideshow-caption > * {
        left: 1em;
        right: 1em;
    }
    
    
    /* ===============  slideshow-pagination  =============== */
    .slideshow .slideshow-pagination {
        left: 1em;   
    }
    
}