.clockbg {
    border-radius: 6px;
    opacity: 0.72;
}

#clock {
    width: 185px;
    padding: 32px 2px 18px 2px;
    position: relative;
}

    #clock:after {
        content: '';
        position: absolute;
        width: 200px;
        height: 10px;
        border-radius: 100%;
        left: 50%;
        margin-left: -100px;
        bottom: 1px;
        z-index: -1;
    }



    #clock .date {
        position: absolute;
        width: 100%;
        top: 5px;
        font-size: 10px;
    }



    #clock.light {
        color: #4800ff;
    }


        #clock.light .digits div span {
            background-color: #000000;
            border-color: #000000;
        }

        #clock.light .digits div.dots:before,
        #clock.light .digits div.dots:after {
            background-color: #000000;
        }


    #clock .digits div {
        text-align: left;
        position: relative;
        width: 14px;
        height: 25px;
        display: inline-block;
        margin: 0 4px;
    }

        #clock .digits div span {
            opacity: 0;
            position: absolute;
            -webkit-transition: 0.25s;
            -moz-transition: 0.25s;
            transition: 0.25s;
        }

            #clock .digits div span:before,
            #clock .digits div span:after {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                border: 5px solid transparent;
            }

    #clock .digits .d1 {
        height: 3px;
        width: 8px;
        top: 0;
        left: 3px;
    }

        #clock .digits .d1:before {
            border-width: 0 3px 3px 0;
            border-right-color: inherit;
            left: -3px;
        }

        #clock .digits .d1:after {
            border-width: 0 0 3px 3px;
            border-left-color: inherit;
            right: -3px;
        }

    #clock .digits .d2 {
        height: 3px;
        width: 8px;
        top: 12px;
        left: 3px;
    }

        #clock .digits .d2:before {
            border-width: 2px 2px 1px;
            border-right-color: inherit;
            left: -4px;
        }

        #clock .digits .d2:after {
            border-width: 2px 2px 1px;
            border-left-color: inherit;
            right: -4px;
        }

    #clock .digits .d3 {
        height: 3px;
        width: 8px;
        top: 24px;
        left: 3px;
    }

        #clock .digits .d3:before {
            border-width: 3px 3px 0 0;
            border-right-color: inherit;
            left: -3px;
        }

        #clock .digits .d3:after {
            border-width: 3px 0 0 3px;
            border-left-color: inherit;
            right: -3px;
        }

    #clock .digits .d4 {
        width: 3px;
        height: 7px;
        top: 4px;
        left: 0;
    }

        #clock .digits .d4:before {
            border-width: 0 3px 3px 0;
            border-bottom-color: inherit;
            top: -3px;
        }

        #clock .digits .d4:after {
            border-width: 0 0 5px 3px;
            border-left-color: inherit;
            bottom: -3px;
        }

    #clock .digits .d5 {
        width: 3px;
        height: 7px;
        top: 4px;
        right: 0;
    }

        #clock .digits .d5:before {
            border-width: 0 0 3px 3px;
            border-bottom-color: inherit;
            top: -3px;
        }

        #clock .digits .d5:after {
            border-width: 3px 0 0 3px;
            border-top-color: inherit;
            bottom: -3px;
        }

    #clock .digits .d6 {
        width: 3px;
        height: 7px;
        top: 16px;
        left: 0;
    }

        #clock .digits .d6:before {
            border-width: 0 3px 3px 0;
            border-bottom-color: inherit;
            top: -3px;
        }

        #clock .digits .d6:after {
            border-width: 0 0 3px 3px;
            border-left-color: inherit;
            bottom: -3px;
        }

    #clock .digits .d7 {
        width: 3px;
        height: 7px;
        top: 16px;
        right: 0;
    }

        #clock .digits .d7:before {
            border-width: 0 0 3px 3px;
            border-bottom-color: inherit;
            top: -3px;
        }

        #clock .digits .d7:after {
            border-width: 3px 0 0 3px;
            border-top-color: inherit;
            bottom: -3px;
        }



    /* 1 */

    #clock .digits div.one .d5,
    #clock .digits div.one .d7 {
        opacity: 1;
    }

    /* 2 */

    #clock .digits div.two .d1,
    #clock .digits div.two .d5,
    #clock .digits div.two .d2,
    #clock .digits div.two .d6,
    #clock .digits div.two .d3 {
        opacity: 1;
    }

    /* 3 */

    #clock .digits div.three .d1,
    #clock .digits div.three .d5,
    #clock .digits div.three .d2,
    #clock .digits div.three .d7,
    #clock .digits div.three .d3 {
        opacity: 1;
    }

    /* 4 */

    #clock .digits div.four .d5,
    #clock .digits div.four .d2,
    #clock .digits div.four .d4,
    #clock .digits div.four .d7 {
        opacity: 1;
    }

    /* 5 */

    #clock .digits div.five .d1,
    #clock .digits div.five .d2,
    #clock .digits div.five .d4,
    #clock .digits div.five .d3,
    #clock .digits div.five .d7 {
        opacity: 1;
    }

    /* 6 */

    #clock .digits div.six .d1,
    #clock .digits div.six .d2,
    #clock .digits div.six .d4,
    #clock .digits div.six .d3,
    #clock .digits div.six .d6,
    #clock .digits div.six .d7 {
        opacity: 1;
    }


    /* 7 */

    #clock .digits div.seven .d1,
    #clock .digits div.seven .d5,
    #clock .digits div.seven .d7 {
        opacity: 1;
    }

    /* 8 */

    #clock .digits div.eight .d1,
    #clock .digits div.eight .d2,
    #clock .digits div.eight .d3,
    #clock .digits div.eight .d4,
    #clock .digits div.eight .d5,
    #clock .digits div.eight .d6,
    #clock .digits div.eight .d7 {
        opacity: 1;
    }

    /* 9 */

    #clock .digits div.nine .d1,
    #clock .digits div.nine .d2,
    #clock .digits div.nine .d3,
    #clock .digits div.nine .d4,
    #clock .digits div.nine .d5,
    #clock .digits div.nine .d7 {
        opacity: 1;
    }

    /* 0 */

    #clock .digits div.zero .d1,
    #clock .digits div.zero .d3,
    #clock .digits div.zero .d4,
    #clock .digits div.zero .d5,
    #clock .digits div.zero .d6,
    #clock .digits div.zero .d7 {
        opacity: 1;
    }


    #clock .digits div.dots {
        width: 3px;
    }

        #clock .digits div.dots:before,
        #clock .digits div.dots:after {
            width: 3px;
            height: 3px;
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
        }

        #clock .digits div.dots:after {
            top: 17px;
        }


.overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.2);
    z-index: 10;
}