/**

 *	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;

}



/**

 *	Titles (Days, Hours, etc)

 **/

.time_circles > div > h4 {

    margin: 0px;

    padding: 0px;

    text-align: center;

    text-transform: uppercase;

    font-family: Arial;

	border-top: 0px solid #333333;

	background: none!important;

}



/**

 *	Time numbers, ie: 12

 **/

.time_circles > div > span {

    display: block;

    width: 100%;

    text-align: center;

    font-family: 'Century Gothic', Arial;

    font-size: 300%;

    margin-top: 0.4em;

    font-weight: bold;

}

@media (min-width: 992px) and (max-width: 1199px){

.time_circles canvas{

width:auto!important;

}

.img-responsive{

margin:0 0!important;

}

}

@media (min-width: 768px) and (max-width: 991px){

.time_circles canvas{

width:auto!important;

}

.img-responsive{

margin:0 0!important;

}

}

@media (min-width: 480px) and (max-width: 767px){

.time_circles canvas{

width:100%!important;

}

.block .title_block:after, .block h4:after{

content:''!important;

}

.img-responsive{

margin:0 0;

}

}

@media (min-width: 320px) and (max-width: 479px){

.time_circles canvas{

width:auto!important;

}

.block .title_block:after, .block h4:after{

content:''!important;

}

.img-responsive{

margin:0 0!important;

}

}