@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@900&display=swap');
.timer{
	font-family: sans-serif;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
}

.timer > div{
	padding: 10px;
	display: inline-block;
}

.timer div > span{
    position:relative;
    background-color: #fff;
    color: #000;
	padding: 0 0 0 10px;
	line-height:42px;
	display: inline-block;
    font-family: 'Fira Code', monospace;
    letter-spacing:14px;
    text-shadow:none;
    border: 1px solid #cbcbcb;
    font-style: normal;
}
.timer div > span:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+0,0.5+100 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 ); 


}
.timer div > span.minutes:after, .timer div > span.seconds:after{
    
    content: ':';
    left:-33px;
    top:0;
    bottom:0;
	padding: 0 0 0 10px;
	line-height:42px;
	display: inline-block;
    font-family: 'Fira Code', monospace;
    letter-spacing:14px;
    font-style: normal;
    background: transparent;
    position:absolute;


}

.timer .smalltext{
	padding-top: 5px;
	font-size: 16px;
}

.carousel-slide.with-timer{
    background-color: #0087ce;
    
}
.carousel-slide.with-timer .carousel-slide-content .carousel-slide-content-heading{
    color:#fff;
}

.carousel-slide.with-timer .carousel-slide-content .carousel-slide-content-button{
    margin: 20px 0 0;
}