@import url('https://fonts.googleapis.com/css?family=Anton&subset=latin-ext');
@import 'https://fonts.googleapis.com/css?family=Roboto:100,400,900&subset=latin-ext';

body {

background-color: #FFFFFF;
background-image: url("style/header_bg.jpg");
background-position: center top;
background-repeat: no-repeat;
margin: 0px 0px 0px 0px;

}

h1 {
font-family: 'Anton', sans-serif;
font-size: 250%;
color: #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
}

h2 {
font-family: 'Anton', sans-serif;
font-size: 240%;
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
letter-spacing: 1px;
}

h3 {
font-family: 'Anton', sans-serif;
font-size: 200%;
color: #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
letter-spacing: 2px;
}

h4 {
font-family: 'Anton', sans-serif;
font-size: 160%;
color: #000;
margin-top: 0px;
margin-bottom: 0px;
letter-spacing: 2px;
}

.header { width: 100%; height: 530px; display: block; }

.content{

font-family: 'Roboto', sans-serif;
font-size: 100%;
color: #414141;
width: 1000px;
margin:auto;

}

.content a { text-decoration: none; color: #4740cd; }

.gray100 { display: block; width: 100%; background: #636363; }

.gray100 a { color: #cde5ff; }

span.button {
	font-family: 'Anton', sans-serif;
	font-size: 140%;
	padding: 14px;
	border-radius: 4px;
	color: #FFF;
	background: #318b5b;
}

span.button:hover { background: #43a583; }

span.button a {	color: #FFF; text-decoration: none; }

span.price {  
  font-family: 'Anton', sans-serif;
  font-size: 120%;
  color: #6f6f6f;
}

.clock_container {

    display: block;
    position: absolute;
    width: 140px;
    height: 140px;
    margin-top: 150px;
    margin-left: 798px;

}

.clock {
  border-radius: 50%;
  background: transparent;
  height: 140px;
  position: relative;
  width: 140px;
}

.clock.simple:after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
}

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

.hours {
  background: #000;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
}

.minutes {
  background: #000;
  height: 40%;
  left: 49%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 2%;
}

.seconds {
  background: #000;
  height: 45%;
  left: 49.5%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 80%;
  width: 1%;
  z-index: 8;
}

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

.hours-container {
  animation: rotate 10s infinite linear;
}
.minutes-container {
  animation: rotate 3s infinite linear;
}
.seconds-container {
  animation: rotate 0.5s infinite linear;
}

.terkep { filter: grayscale(100%); }

.terkep:hover { filter: grayscale(1%); }