body{
	background: #282e3a;
	font-family: tahoma;
	height: 270px;
	width: 900px;
}
h1{
	color: #fff;
	text-align: center;
	font-size: 54px;
	letter-spacing: 12px;
	margin: 0px;
	padding: 0px;
}
#del-countdown{
	width: 900px;
	margin-top: 1px;
	margin-right: 0px;
	margin-bottom: 100px;
	margin-left: 0px;
}
#clock span{
  float: left;
  text-align: center;
  font-size: 84px;
  margin: 0 2.5%;
  color: #fff;
  padding: 20px;
  width: 20%;
  border-radius: 20px;
  box-sizing: border-box;
}
#clock span:nth-child(1){
  background: #fa5559;
}
#clock span:nth-child(2){
  background: #26c2b9;
}
#clock span:nth-child(3){
  background: #f6bc58;
}
#clock span:nth-child(4){
  background: #2dcb74;
}
#clock:after{
  content: "";
  display: block;
  clear: both;
}
#units span{
	float: left;
	width: 25%;
	text-align: center;
	margin-top: 1px;
	color: #ddd;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 2px;
	text-shadow: 1px 1px 1px rgba(10,10,10, 0.7);
}

span.turn{
  animation: turn 0.7s ease forwards;
}

@keyframes turn{
  0%{transform: rotateX(0deg)}
  100%{transform: rotateX(360deg)}
}