ul.animated-clock {
	position: relative;
	width: 80vw;
	max-width: 560px;
	height: 80vw;
	max-height: 560px;
	margin: 0 auto 0 auto;
	background: url(../images/clock.svg);
	background-size: contain;
	list-style: none;
	padding: 0;
}

.animated-clock.twentyfour {
  background: url(../images/clock24.svg);
}

.animated-clock.transform div {
  -moz-transition: all 1s linear;
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

.animated-clock-sec, .animated-clock-min, .animated-clock-hour {
	position: absolute;
	width: 80vw;
	max-width: 560px;
	height: 80vw;
	max-height: 560px;
	top: 0px;
}

.animated-clock-sec {
	background: url(../images/sechand.svg);
	background-size: contain;
	z-index: 3;
}

.animated-clock-min {
	background: url(../images/minhand.svg);
	background-size: contain;
	z-index: 2;
}

.animated-clock-hour {
	background: url(../images/hourhand.svg);
	background-size: contain;
	z-index: 1;
}

.logo {
	width: 90%;
	max-width: 400px;
	display: block;
	margin: 20px auto;
}

/* mobile */
@media only screen and (max-width : 667px) {

	ul.animated-clock {
		width: 80vw;
		height: 80vw;
	}

	.animated-clock-sec, .animated-clock-min, .animated-clock-hour {
		width: 80vw;
		height: 80vw;
	}

}



/* Adjusted size */

.animated-clock.responsive,
.animated-clock.responsive .animated-clock-sec,
.animated-clock.responsive .animated-clock-min,
.animated-clock.responsive .animated-clock-hour {
  max-width: 430px;
  max-height: 430px;
}

@media only screen and (max-width : 1440px) {
  .animated-clock.responsive,
  .animated-clock.responsive .animated-clock-sec,
  .animated-clock.responsive .animated-clock-min,
  .animated-clock.responsive .animated-clock-hour {
    max-width: 320px;
    max-height: 320px;
  }
}

@media only screen and (max-width : 1100px) {
  .animated-clock.responsive,
  .animated-clock.responsive .animated-clock-sec,
  .animated-clock.responsive .animated-clock-min,
  .animated-clock.responsive .animated-clock-hour {
    max-width: 280px;
    max-height: 280px;
  }
}

@media only screen and (max-width : 960px) {
  .animated-clock.responsive,
  .animated-clock.responsive .animated-clock-sec,
  .animated-clock.responsive .animated-clock-min,
  .animated-clock.responsive .animated-clock-hour {
    max-width: 320px;
    max-height: 320px;
  }
}