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

.clock {
	font-family: 'digital-7', sans-serif;
  padding: 0px 15px;
  display: block;
  flex-direction: column;
  justify-content: center;
  margin: 10px 0px;
}

main.clock-display {
  display: inline-block;
	text-align: center;
  padding: 0px 30px;
  border-radius: 10px;
  margin: 0px auto;
  background-color: #1a1a1a;
  color: #ffffff;
  box-shadow: 4px 4px 7px 4px rgba(0,0,0,.3);
}
.light-on {
	color: #ffffff !important;
}

/* CLOCK */
.clock-field {
	margin: 5px 0;
  display: flex;
  justify-content: center;
}
.clock-field div {
	display: inline-block;
	position: relative;
}
.clock-field div p {
	font-size: 50px;
	position: relative;
	z-index: 21;
}
.clock-field .numbers .placeholder {
	color: #242424;
	position: absolute;
	top: 0;
	z-index: 20;
}
.clock-field .numbers{
  font-size: 10px;
  text-transform: uppercase;
}


@media (max-width:768px) {
  .clock-field div p {
  	font-size: 40px;
  }
  main.clock-display {
    padding: 0px 30px;
  }
  .desktop-view {
    display: none;
  }
}

@media (max-width:550px) {

  .clock-field div p {
  	font-size: 30px;
  }
}

@media (max-width:468px) {

  .clock-field div p {
  	font-size: 30px;
  }
  main.clock-display {
    padding: 0px 20px;
  }
}

@media (max-width:400px) {
  .days .day p,
  .clock-field .am-pm div p {
    font-size: 10px;
  }
  .clock-field div p {
  	font-size: 30px;
  }
}

@media (max-width:350px) {
  .clock{
    display: flex;
    padding: 0px;
  }
  .clock-field div p {
  	font-size: 30px;
  }
}

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