/**
 *  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 {
    position: absolute;
    content: '';
    top: -23px;
    left: 7px;
    width: 69px;
    height: 69px;
    border: 2px solid rgb(36, 40, 38);
    border-radius: 50%;
}


/**
 *  Titles (Days, Hours, etc)
 **/
.time_circles > div > h4 {
    margin: 10px 0 0 0;
    padding: 0px;
    text-align: center;
    font-weight: 400;
    color: #292a30;
    position: relative;
    text-transform: lowercase;
    font-size: 13px!important;
}

/**
 *  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: 30px!important;
    font-weight: 600;
    line-height: 0.36em!important;
    color: #292a30;
}