.nojs #show-clock {	
	display: none
}

.hasjs #show-clock {
	display: block
}

.outer_face {
	position: relative;
	width: 50px; /* width of clock */
	height: 50px; /* height of clock */
	border-radius: 25px; /* clock round corner radius */
	background: white;
	z-index: 0;
	box-shadow: inset 0 0 2px gray;
	border: 0 solid gray; /* thickness of outer border */
}

.outer_face::before, .outer_face::after, .outer_face .marker { /* time markers syle */
	content: "";
	position: absolute;
	width: 1.5px; /* width of 12-6 and 3-9 markers */
	height: 100%;
	background: black;
	z-index: 0;
	left: 50%;
	margin-left: -0.75px; /* set this value of 1/2 marker width */
	top: 0;
}

.outer_face::after {
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.outer_face .marker {
	background: gray;
	width: 1px; /* width of all other markers */
	margin-left: -0.5px; /* set this value of 1/2 marker width */
}

.outer_face .marker.oneseven {
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}

.outer_face .marker.twoeight {
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
}

.outer_face .marker.fourten {
	-moz-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	-webkit-transform: rotate(120deg);
	transform: rotate(120deg);
}

.outer_face .marker.fiveeleven {
	-moz-transform: rotate(150deg);
	-ms-transform: rotate(150deg);
	-webkit-transform: rotate(150deg);
	transform: rotate(150deg);
}

.inner_face {
	position: relative;
	width: 84%;
	height: 84%;
	background: white;
	-moz-border-radius: 240px;
	-webkit-border-radius: 240px;
	border-radius: 240px;
	z-index: 1000;
	left: 8%; 
	top: 7% 
}

.rtl .inner_face {
	position: relative;
	width: 84%;
	height: 84%;
	background: white;
	-moz-border-radius: 240px;
	-webkit-border-radius: 240px;
	border-radius: 240px;
	z-index: 1000;
	right: 8%;
	top: 7% 
}

.inner_face::before {
	/* clock center circle small */
	content: "";
	width: 3px; /* width of inner circle */
	height: 3px; /* height of inner circle */
	border-radius: 3px;
	margin-left: -1.5px; /* set this value of 1/2 width value*/
	margin-top: -1.5px; /* set this value of 1/2 height value*/
	background: black;
	position: absolute;
	top: 50%;
	left: 50%;
	box-shadow: 0 0 5px blue;
}

.hand, .hand.hour {
	position: absolute;
	width: 1px; /* width of hour hand */
	height: 30%; /* height of hour hand */
	top: 15%; /* set top to 50% - height */
	left: 50%;
	margin-left: -0.5px; /* set this value to 1/2 width */
	background: black;
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-moz-transform-origin: bottom;
	-ms-transform-origin: bottom;
	-webkit-transform-origin: bottom;
	transform-origin: bottom;
	z-index: -1;
	-moz-box-shadow: 0 0 2px gray;
	-webkit-box-shadow: 0 0 1.5px gray;
	box-shadow: 0 0 1.5px gray;
}

.hand.minute {
	height: 45%; /* height of min hand */
	top: 5%; /* set top to 50% - height */
	width: 1px; /* width of min hand */
	margin-left: -0.5px; /* set this value to 1/2 width */
}

.hand.second {
	height: 50%; /* height of sec hand */
	width: 1px; /* width of sec hand */
	margin-left: -0.5px; /* set this value to 1/2 width */
	top: 0;
	background: red;
}