/*DIGITAL CLOCK FONT*/
@font-face{
 font-family:'digital-7';
 src: url('fonts/digital-7.ttf');
 font-weight: normal;
}

.clock-display {
  font-family: 'digital-7';
  display: inline-block;
  text-align: center;
  padding: 15px 30px;
  border: solid 5px #ffffff;
  border-radius: 20px;
  margin: 0 auto 0 auto;
  background-color: #000000;
  color: #ffffff;
  box-shadow: 4px 4px 7px 4px rgba(0,0,0,.3);
}

/* CLOCK */
.clock-field {
  font-family: 'digital-7';
  font-weight: normal;
  margin: 0 0;
  display: flex;
  justify-content: center;
}

.clock-field div {
	font-family: 'digital-7';
	font-weight: normal;
	display: inline-block;
	position: relative;
}
.clock-field div p {
	font-family: 'digital-7';
	font-weight: normal;
	font-size: 100px;
	position: relative;
	z-index: 100;
}

.clock-field .numbers .placeholder {
	color: #2b2828;
	position: absolute;
	top: 0;
	z-index: 50;
}

.clock-field .colon {
	font-family: 'digital-7';
	font-weight: normal;
}

.daylabel .p {
	font-family: sans-serif;
 	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
}

@media (max-width:768px) {
  .clock-display {
    padding: 15px 30px;
  }
}

@media (max-width:550px) {
  .clock-field div p {
  	font-size: 80px;
  }
}

@media (max-width:468px) {
  .clock-field div p {
  	font-size: 60px;
  }
}

@media (max-width:400px) {
  .clock-field div p {
  	font-size: 50px;
  }
}

@media (max-width:350px) {
  .clock-field div p {
  	font-size: 43px;
  }
}

@media (max-width:320px) {
  .clock-field div p {
  	font-size: 40px;
  }
}