/* CSS Document */
* {
	margin: 0;
	padding: 0
}


 @font-face {
 font-family: 'Roboto';
 src: url('../underconstruction/fonts/Roboto-Light.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}



body {
	background: #583643 url(../images/map.png);
	font-family: 'Roboto', sans-serif;
}
.container {
	text-align: center;
padding:90px 30px 30px 30px;
}
h1 {
	color: #fff;
	text-transform: uppercase;
	font-size:40px; line-height:50px;
}
p{ margin-top:55px; color:#fff; font-size:22px;}
.clock {
	width: 180px;
	height: 185px;
	position: relative;
	margin: 70px auto 0px;
	background-image: url("../images/clock.svg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-color: transparent;
	background-size: 100%;
}
.clock .circle {
	width: 22px;
	height: 22px;
	background-image: url("../images/circle.svg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-color: transparent;
	background-size: 100%;
	position: absolute;
	left: 78px;
	top: 78px;
	z-index: 2;
}
.clock .small {
	width: 22px;
	height: 69px;
	background-image: url("../images/small_arrow.svg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-color: transparent;
	background-size: 100%;
	position: absolute;
	left: 78px;
	top: 90px;
	z-index: 2;
	-moz-animation: 2s ease 0s linear none infinite small;
	-moz-transform-origin: 50% 0%;
	-webkit-animation: small 2s infinite linear;
	-webkit-transform-origin: 50% 0%;
	-o-animation: 2s ease 0s linear none infinite small;
	-o-animation: small 2s infinite linear;
	-o-transform-origin: 50% 0%;
	-ms-animation: 2s ease 0s linear none infinite small;
	-ms-animation: small 2s infinite linear;
	-ms-transform-origin: 50% 0%;
	animation: 2s ease 0s linear none infinite small;
	animation: small 2s infinite linear;
	transform-origin: 50% 0%;
}
@-moz-keyframes small {
 0% {
-moz-transform:rotate(0deg)
}
 50% {
-moz-transform:rotate(180deg)
}
 100% {
-moz-transform:rotate(360deg)
}
}
@-webkit-keyframes small {
 0% {
-webkit-transform:rotate(0deg)
}
 50% {
-webkit-transform:rotate(180deg)
}
 100% {
-webkit-transform:rotate(360deg)
}
}
@-o-keyframes small {
 0% {
-o-transform:rotate(0deg)
}
 50% {
-o-transform:rotate(180deg)
}
 100% {
-o-transform:rotate(360deg)
}
}
@-ms-keyframes small {
 0% {
-ms-transform:rotate(0deg)
}
 50% {
-ms-transform:rotate(180deg)
}
 100% {
-ms-transform:rotate(360deg)
}
}
@keyframes small {
 0% {
transform:rotate(0deg)
}
 50% {
transform:rotate(180deg)
}
 100% {
transform:rotate(360deg)
}
}
.clock .big {
	width: 18px;
	height: 60px;
	background-image: url("../images/big_arrow.svg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-color: transparent;
	background-size: 100%;
	position: absolute;
	left: 81px;
	top: 90px;
	z-index: 1;
	-moz-animation: 5s ease 0s linear none infinite big;
	-moz-transform-origin: 50% 0%;
	-webkit-animation: big 5s infinite linear;
	-webkit-transform-origin: 50% 0%;
	-o-animation: 5s ease 0s linear none infinite big;
	-o-animation: big 5s infinite linear;
	-o-transform-origin: 50% 0%;
	-ms-animation: 5s ease 0s linear none infinite big;
	-ms-animation: big 5s infinite linear;
	-ms-transform-origin: 50% 0%;
	animation: 5s ease 0s linear none infinite big;
	animation: big 5s infinite linear;
	transform-origin: 50% 0%;
}
@-moz-keyframes big {
 0% {
-moz-transform:rotate(0deg)
}
 50% {
-moz-transform:rotate(180deg)
}
 100% {
-moz-transform:rotate(360deg)
}
}
@-webkit-keyframes big {
 0% {
-webkit-transform:rotate(0deg)
}
 50% {
-webkit-transform:rotate(180deg)
}
 100% {
-webkit-transform:rotate(360deg)
}
}
@-o-keyframes big {
 0% {
-o-transform:rotate(0deg)
}
 50% {
-o-transform:rotate(180deg)
}
 100% {
-o-transform:rotate(360deg)
}
}
@-ms-keyframes big {
 0% {
-ms-transform:rotate(0deg)
}
 50% {
-ms-transform:rotate(180deg)
}
 100% {
-ms-transform:rotate(360deg)
}
}
@keyframes big {
 0% {
transform:rotate(0deg)
}
 50% {
transform:rotate(180deg)
}
 100% {
transform:rotate(360deg)
}
}
/* ------------------
    Watch
--------------------*/
#watch {
	color: #f6f7f9;
	text-align: center;
}
#watch .dash {
	display: inline-block;
	padding: 20px 30px;
	line-height: 72px;
	text-align: center;
	margin: 0 -3px;
}
#watch .dash:first-child {
	border-radius: 8px 0px 0px 8px;
	background-color: #f45a00;
}
#watch .dash:last-child {
	border-radius: 0px 8px 8px 0px;
	background-color: #f78340;
	padding-left: 28px;
	padding-right: 28px;
}
#watch .dash:nth-child(2) {
	background-color: #f5620d;
}
#watch .dash:nth-child(3) {
	background-color: #f67326;
}
#watch .dash .digit {
	display: block;
	width: 24px;
	font-size: 44px;
	line-height: 44px;
	height: 38px;
	float: left;
}
#watch .dash .digit .top, #watch .dash .digit .bottom {
	font-weight: 300;
}
#watch .dash span.dash_title {
	font-size: 14px;
	line-height: 16px;
	padding-top: 6px;
	font-weight: 300;
	display: block;
	text-align: center;
	clear: both;
}


footer{ margin-top:20px; }
footer p{ text-align:center; color:#B18193; font-size:15px; font-weight:300}
