#clock-main-wrap {
	display: block;
	text-align: center;
}

.clock {
	position: relative;
	left: -14px;
	top: -20px;
	display: inline-block;
  	background-image: url('../images/clock-bg-pb.png');
  	background-size: cover;
	height: 400px;
	width: 400px;
	/*border: solid 1px #ddd;*/
}

.clock {
	-webkit-transform: scale(.92); transform: scale(.92);
	-ms-transform: scale(.92); transform: scale(.92);
}


#clock-days-wrap, #clock-hours-wrap, #clock-mins-wrap, #clock-secs-wrap {
	display: inline-block;
	text-align: center;
	padding: 4px;
	position: relative;
	z-index: 1000;
}

#clock-timer-days, #clock-timer-hours, #clock-timer-mins, #clock-timer-secs {
	display: block;
	color: #fff;
	font-size: 34px;
	font-family: 'Prompt', sans-serif!important;
}

.clock-label {
	color: #fff;
	font-family: 'Prompt', sans-serif!important;
	font-size: 15px!important;
	margin-top: -10px;
}

#clock-days-wrap {
	position: absolute;
	top: 20%;
	left: 42%;
}

#clock-hours-wrap {
	position: absolute;
	top: 39%;
	left: 22.5%;
}

#clock-mins-wrap {
	position: absolute;
	top: 39%;
	left: 60.3%;
}

#clock-secs-wrap {
	position: absolute;
	top: 58%;
	left: 39.5%;
}


.hours img {
	//-webkit-transform: scale(.5);
    //transform: scale(.5);
}


.minutes img {
	//-webkit-transform: scale(.5);
    //transform: scale(.5);
}

.seconds img {
	//-webkit-transform: scale(1);
    //transform: scale(1);
}

#the-dot img {
	position: absolute;
	width: 8px;
	left: 197px;
	top: 197px;
}

.seconds img {
	width: 3px;
}

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

.hours-container {
	//animation: rotate 43200s infinite linear;
	//animation: rotate 60s infinite linear;
}

.minutes-container {
  	//animation: rotate 3600s infinite linear;
  	//animation: rotate 60s infinite linear;
}

.minutes-container {
  //animation: rotate 3600s infinite steps(60);
}

.seconds-container {
  	//animation: rotate 60s infinite linear;
}

.seconds-container {
  	animation: rotate 60s infinite steps(60);
}

.seconds-container {
  //transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}


.minutes-container, .hours-container, .seconds-container {
	position: absolute;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
}


.seconds {
  	left: 199px;
  	position: absolute;
  	top: 80px;
  	transform-origin: 50% 70%;
}

.hours {
  	left: 192px;
  	position: absolute;
  	top: 108px;
  	transform-origin: 50% 78%;
}

.minutes {
  	left: 192px;
  	position: absolute;
  	top: 78px;
  	transform-origin: 50% 83%;
}


/*------------------------------------------------------------------------------- mobile -----------*/
@media only screen and (max-width: 1024px) {
	.clock { -webkit-transform: scale(.8); transform: scale(.8); left: -56px; top: -34px;}
}

@media only screen and (max-width: 960px) {
	.clock { -webkit-transform: scale(.8); transform: scale(.8); left: 6px; top: -20px;}
}

@media only screen and (max-width: 812px) {
	.clock { -webkit-transform: scale(.6); transform: scale(.6); left: -90px; top: -40px;}
}

@media only screen and (max-width: 768px) {
	.clock { -webkit-transform: scale(.8); transform: scale(.8); left: -10px; top: -30px;}
}

@media only screen and (max-width: 480px) {	
	.clock { -webkit-transform: scale(.75); transform: scale(.75); left: -60px; top: -30px;}
}

@media only screen and (max-width: 414px) {	
	.clock { -webkit-transform: scale(.75); transform: scale(.75); left: -32px; top: -30px;}
}

@media only screen and (max-width: 375px) {	
	.clock { -webkit-transform: scale(.8); transform: scale(.8); left: -50px; top: -30px;}
}


@media only screen and (max-width: 360px) {	
	.clock { -webkit-transform: scale(.75); transform: scale(.75); left: -62px; top: -30px;}
}

@media only screen and (max-width: 320px) {	
	.clock { -webkit-transform: scale(.7); transform: scale(.7); left: -78px; top: -30px;}
}