﻿#clockdiv {
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}


    #clockdiv > div {
        padding: 10px;
        border-radius: 3px;
        background: #00BF96;
        display: inline-block;
    }

    #clockdiv div > span {
        padding: 15px;
        border-radius: 3px;
        background: #00816A;
        display: inline-block;
    }

.smalltext {
    padding-top: 5px;
    font-size: 16px;
}

body {
    background: #000;
    /*overflow: hidden;*/
}

.bss-slides {
    background: #000;
    position: relative;
    display: block;
}

    .bss-slides:focus {
        outline: 0;
    }

    .bss-slides figure {
        position: absolute;
        top: 0;
        width: 100%;
    }

        .bss-slides figure:first-child {
            position: relative;
        }

        .bss-slides figure img {
            opacity: 0;
            -webkit-transition: opacity 1.2s;
            transition: opacity 1.2s;
            position: relative;
            /*-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  */
        }

    .bss-slides .bss-show {
        z-index: 3;
    }

        .bss-slides .bss-show img {
            opacity: 1;
            /* -webkit-backface-visibility: hidden;
  backface-visibility: hidden;*/
        }

    .bss-slides figcaption {
        position: absolute;
        font-family: sans-serif;
        font-size: .8em;
        bottom: .75em;
        right: .35em;
        padding: .25em;
        color: #fff;
        background: #000;
        background: rgba(0,0,0, .25);
        border-radius: 2px;
        opacity: 0;
        -webkit-transition: opacity 1.2s;
        transition: opacity 1.2s;
    }

    .bss-slides .bss-show figcaption {
        z-index: 2;
        opacity: 1;
    }

    .bss-slides figcaption a {
        color: #fff;
    }

.bss-next, .bss-prev {
    color: #fff;
    position: absolute;
    background: #000;
    background: rgba(0,0,0, .6);
    top: 50%;
    z-index: 4;
    font-size: 2em;
    margin-top: -1.2em;
    opacity: .5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .bss-next:hover, .bss-prev:hover {
        cursor: pointer;
        opacity: 1;
    }

.bss-next {
    right: 0;
    padding: 10px 5px 15px 10px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.bss-prev {
    left: 0;
    padding: 10px 10px 15px 5px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.bss-fullscreen {
    display: block;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,.3) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
    position: absolute;
    top: 5px;
    left: 5px;
    cursor: pointer;
    opacity: .3;
}

    .bss-fullscreen:hover {
        opacity: .8;
    }

:-webkit-full-screen .bss-fullscreen {
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}

:-moz-full-screen .bss-fullscreen {
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    background-size: contain;
}

:-ms-fullscreen .bss-fullscreen {
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    background-size: contain;
}

:full-screen .bss-fullscreen {
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}

:-webkit-full-screen .bss-fullscreen {
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}

:-moz-full-screen .bss-fullscreen {
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    background-size: contain;
}

:-ms-fullscreen .bss-fullscreen {
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    background-size: contain;
}

:fullscreen .bss-fullscreen {
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}
