/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@font-face {
  font-family: 'tele-groteskfetregular';
  src: url('../fonts/tele-grotesk-fett-webfont.eot');
  src: url('../fonts/tele-grotesk-fett-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/tele-grotesk-fett-webfont.woff2') format('woff2'), url('../fonts/tele-grotesk-fett-webfont.woff') format('woff'), url('../fonts/tele-grotesk-fett-webfont.ttf') format('truetype'), url('../fonts/tele-grotesk-fett-webfont.svg#tele-groteskfetregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'tele-groteskhalregular';
  src: url('../fonts/tele-grotesk-halb-webfont.eot');
  src: url('../fonts/tele-grotesk-halb-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/tele-grotesk-halb-webfont.woff2') format('woff2'), url('../fonts/tele-grotesk-halb-webfont.woff') format('woff'), url('../fonts/tele-grotesk-halb-webfont.ttf') format('truetype'), url('../fonts/tele-grotesk-halb-webfont.svg#tele-groteskhalregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'telegrotesk_headlineregular';
  src: url('../fonts/telegroteskheadline-regular-webfont.eot');
  src: url('../fonts/telegroteskheadline-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/telegroteskheadline-regular-webfont.woff2') format('woff2'), url('../fonts/telegroteskheadline-regular-webfont.woff') format('woff'), url('../fonts/telegroteskheadline-regular-webfont.ttf') format('truetype'), url('../fonts/telegroteskheadline-regular-webfont.svg#telegrotesk_headlineregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'telegrotesk_headline_ultraRg';
  src: url('../fonts/telegroteskheadline-ultra-webfont.eot');
  src: url('../fonts/telegroteskheadline-ultra-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/telegroteskheadline-ultra-webfont.woff2') format('woff2'), url('../fonts/telegroteskheadline-ultra-webfont.woff') format('woff'), url('../fonts/telegroteskheadline-ultra-webfont.ttf') format('truetype'), url('../fonts/telegroteskheadline-ultra-webfont.svg#telegrotesk_headline_ultraRg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'tele-grotesknorregular';
  src: url('../fonts/tele-grotesk-norm-webfont.eot');
  src: url('../fonts/tele-grotesk-norm-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/tele-grotesk-norm-webfont.woff2') format('woff2'), url('../fonts/tele-grotesk-norm-webfont.woff') format('woff'), url('../fonts/tele-grotesk-norm-webfont.ttf') format('truetype'), url('../fonts/tele-grotesk-norm-webfont.svg#tele-grotesknorregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'tele-groteskultregular';
  src: url('../fonts/tele-grotesk-ultr-webfont.eot');
  src: url('../fonts/tele-grotesk-ultr-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/tele-grotesk-ultr-webfont.woff2') format('woff2'), url('../fonts/tele-grotesk-ultr-webfont.woff') format('woff'), url('../fonts/tele-grotesk-ultr-webfont.ttf') format('truetype'), url('../fonts/tele-grotesk-ultr-webfont.svg#tele-groteskultregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'telelogoregular';
  src: url('../fonts/telelogo-webfont.eot');
  src: url('../fonts/telelogo-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/telelogo-webfont.woff2') format('woff2'), url('../fonts/telelogo-webfont.woff') format('woff'), url('../fonts/telelogo-webfont.ttf') format('truetype'), url('../fonts/telelogo-webfont.svg#telelogoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
:root {
  font-size: 16px;
  line-height: 20px;
}
body {
  background: #FFFFFF url("../img/bg.jpg") center 15px no-repeat;
}
p, h1, h2, h3, h4, a {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
a:hover, a:active, a:focus {
  text-decoration: none;
  color: #000000;
}
.container {
  padding: 15px;
  width: 1200px;
}
.top-bar {
  background: #FFFFFF;
  position: relative;
  z-index: 999;
}
.logo-box {
  padding: 15px;
}
.logo-box .logo {
  width: 88px;
  float: left;
  height: auto;
}
.logo-box .lifs {
  width: 150px;
  float: right;
  margin-top: 16px;
}
.desc{
  width: 460px;
  margin-top: 60px;
  float: left;
  margin-right: 14px;
}
.desc h1{
  font-family: 'tele-groteskultregular';
  font-size: 60px;
  line-height: 1.1;
  color: #e20074;
  text-align: center;
}
.desc h1 span{
  font-size: 40px;
  line-height: 1;
  color: #000000;
  display: block;
  padding: 0;
  margin: 0;
}
.desc .top-txt{
  font-family: 'tele-groteskhalregular';
  font-size: 40px;
  line-height: 1;
  color: #000000;
  text-align: center;
  margin: -5px 0 20px 0;
}
.desc .how{
  font-family: 'tele-groteskultregular';
  font-size: 25px;
  line-height: 1.1;
  color: #000000;
  text-align: center;
  margin: 40px 0 20px 0;
  text-transform: uppercase;
}
.desc .this{
  font-family: 'tele-groteskhalregular';
  font-size: 25px;
  line-height: 1.2;
  color: #000000;
  text-align: center;
  text-transform: uppercase;
}
.desc .this .bold{
  font-family: 'tele-groteskultregular';
}
.desc .this .pink{
  font-family: 'tele-groteskultregular';
  font-size: 60px;
  line-height: 1;
  color: #e20074;
}
.desc .banner{
  text-align: center;
  margin: 40px 0 0 0;
}
.desc .banner img{
  opacity: 0.8;
  margin-top: 0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.desc .banner img:hover{
  margin-top: -2px;
  opacity: 1;
}
.clock{
  width: 316px;
  height: 245px;
  margin-top: 60px;
  float: left;
  padding: 15px 0 0 0;
}
.clock .time-title{
  font-family: 'tele-groteskultregular';
  font-size: 30px;
  line-height: 1.1;
  color: #FFFFFF;
  text-align: center;
}
.clock hr{
  width: 270px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #FFFFFF;
  border: solid white 2px;
}
.clock #num{
  font-family: 'tele-groteskultregular';
  font-size: 90px;
  line-height: 1.1;
  color: #000000;
  text-align: center;
  text-transform: uppercase;
  display: block;
  margin: -10px 0 0 0;
  padding: 0;
}
.clock #char{
  font-family: 'tele-groteskultregular';
  font-size: 50px;
  line-height: 1;
  color: #000000;
  text-align: center;
  text-transform: uppercase;
  display: block;
  margin: -10px 0 0 0;
  padding: 0;
}