.countdownHolder{
	margin:0 auto;
	font-size: 40px;
	text-align:center;
	font-family: "Fira Sans",sans-serif;
    font-weight: 700;
	padding-bottom:20px;
}

.position{
	display: inline-block;
	height: 65px;
	overflow: hidden;
	position: relative;
	width: 50px;
	box-shadow:0px 2px 5px 0px rgba(0,0,0,0.4);
	border-radius:6px;
}

.digit:after{
	position: absolute;
	content:'';
	background-color: rgba(0, 0, 0, 0.20000000298023224);
	height: 1px;
	left:0px;
	right:0px;
	top:50%;
}

.position.right{
	margin-left:-5px;
}

.position.hide{
	display: none;
}

.digit{
	position:absolute;
	display:block;
	background-color:#363F48;
	border-radius:6px;
	color: #D8D8D8;
	font-size: 50px;
	font-family: "Fira Sans",sans-serif;
	font-weight: 700;
	line-height: 65px;
	width: 50px;
	text-align: center;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
	
	transition:all 100ms ease-out;
	opacity:1;
	transform:translateY(0%);
}

.digit.static{
	opacity:0;
	transform:translateY(0%);
}

.digit.gone{
	opacity:0;
	transform:translateY(5%);
}

.countdown-legenda{
	position:absolute;
	bottom:-25px;
	left:0;
	right:0;
	color: #004A98;
  font-family: "Fira Sans",sans-serif;
	font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  text-transform:uppercase;
  display:inline-block;
  clear:both;
}

/**
 * You can use these classes to hide parts
 * of the countdown that you don't need.
 */

.countDias{ position:relative; display:inline-block; }
.countDiv0{ /* display:none !important;*/ }
.countHoras{position:relative; display:inline-block;}
.countDiv1{}
.countMinutos{position:relative; display:inline-block;}
.countDiv2{}
.countSegundos{position:relative; display:inline-block;}

.countDiv{
	display:inline-block;
	width:20px;
	height:65px;
	position:relative;
}

.countDiv:before,
.countDiv:after{
	position:absolute;
	width:10px;
	height:10px;
	background-color:#363F48;
	left:50%;
	margin-left:-5px;
	top:0.5em;
	content:'';
}

.countDiv:after{
	top:0.9em;
}

@media screen and (max-width: 580px) {
  	.countdownHolder{
		font-size: 34px;
	}
	
	.position{	
		height: 50px;
		width: 40px;
	}
	
	.digit{
		font-size: 34px;
		line-height: 50px;
		width: 40px;
	}
	
	.countdown-legenda{
		bottom:-20px;
		font-size: 12px;
		line-height: 14px;
	}
	
	.countDiv{
		width:14px;
		height:50px;
	}
	
	.countDiv:before,
	.countDiv:after{
		width:5px;
		height:5px;
		left:70%;
		margin-left:-5px;
		top:0.5em;
	}
	
	.countDiv:after{
		top:0.9em;
	}
}

@media screen and (max-width: 400px) {
  	.countdownHolder{
		font-size: 24px;
	}
	
	.position{	
		height: 40px;
		width: 30px;
	}
	
	.digit{
		font-size: 24px;
		line-height: 40px;
		width: 30px;
	}
	
	.position.right{
		margin-left:-2px;
	}
	
	.countdown-legenda{
		bottom:-20px;
		font-size: 11px;
		line-height: 14px;
	}
	
	.countDiv{
		width:14px;
		height:40px;
	}
	
	.countDiv:before,
	.countDiv:after{
		width:5px;
		height:5px;
		left:70%;
		margin-left:-5px;
		top:0.5em;
	}
	
	.countDiv:after{
		top:0.9em;
	}
}