/**
 *	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;
    font-family: $font-family-base;
    top: 50%!important;
    transform: translateY(-124%)!important;
    -webkit-transform: translateY(-124%)!important;
}

@media (min-width: $screen-lg) {
    #DateCountdown{
        width: 100%;
    }
    }

/**
 *	Titles (Days, Hours, etc)
 **/
.time_circles > div > h4 {
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px!important;
    color: $white-clr;
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;

    & + *{
        margin-top: 0;
    }
}

/**
 *	Time numbers, ie: 12
 **/
.time_circles > div > span {
    display: block;
    font-size: 25px!important;
    text-align: center;
    font-weight: bold;

    @media (min-width: $screen-sm) {
        font-size: 50px!important;
        }

    @media (min-width: $screen-lg) {
        font-size: 60px!important;
        }
}