/**
 *  This element is created inside your target element
 *  It is used so that your own element will not need to be altered
 **/
.time_circles {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
 *  This is all the elements used to house all text used
 * in time circles
 **/
.time_circles > div {
    position: absolute;
    text-align: center;
}

/* .time_circles > div:before {
content: "";
    position: absolute;
    top: -28px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    left: 8px;
    background: #fff;
    z-index: 4;
} */



canvas {
    position: relative;
    z-index: 10;
}




/**
 *  Titles (Days, Hours, etc)
 **/
.time_circles > div > h4 {
    margin: 16px 0 0 0;
    padding: 0px;
    text-align: center;
    font-weight: 600;
    color: #44494c;
    position: relative;
    text-transform: lowercase;
    font-size: 14px!important;
    z-index: 10;
}

/**
 *  Time numbers, ie: 12
 **/
.time_circles > div > span {
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-size: 44px!important;
    font-weight: 700;
        line-height: 0.36em!important;
    color: #44494c;
    z-index: 10;
}



.bb_inner .time_circles > div > h4 {
    font-size: 12px !important;
}


.bb_inner .time_circles > div > span {
    font-size: 40px !important;
}