@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,800');

body {
    background:#ffffff;
    font-family: 'Open Sans', sans-serif;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    padding:0;
    font-size:11px;
    overflow-x:hidden;
    font-weight:300;
  }

@media (max-aspect-ratio: 16/9) {
    body {
    background:#ffffff;
    font-family: 'Open Sans', sans-serif;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    padding:0;
    font-size:20px;
    overflow-x:hidden;
    font-weight:300;
  } 
  #myVideo{
    left:-85%;
  } 
}

@font-face{
	font-family:clockBold;
	src : url(../fonts/TTF/BebasNeueBold.ttf);
}

@font-face{
  font-family:clockBook;
  src : url(../fonts/TTF/BebasNeueBook.ttf);
}
@font-face{
  font-family:clockLight;
  src : url(../fonts/TTF/BebasNeueLight.ttf);
}

@font-face{
  font-family:clockRegular;
  src : url(../fonts/TTF/BebasNeueRegular.ttf);
}

@font-face{
  font-family:clockThin;
  src : url(../fonts/TTF/BebasNeueThin.ttf);
}

#SydneyTime .title,#OrlandoTime .title,#PerthTime .title,#SanFransicoTime .title,#AucklandTime .title,#LondonTime .title,#BerlinTime .title,#VilniusTime .title{    
  font-family:clockRegular;
  font-size: 4em;
  z-index: 13;     
}

#SydneyTime .title{
  color:#f756e2;
}

#OrlandoTime .title{
  color:#907fff;  
}

#PerthTime .title{ 
  color:#ff6600;   
}

#SanFransicoTime .title{
  color:#e6c724;
}
#AucklandTime .title{
  color:#3fd1ff;
}
#LondonTime .title{
  color:#f14f55;
}
#BerlinTime .title{
  color:#f9eb2e;
}
#VilniusTime .title{
  color:#4e9a29;
}

#SydneyTime .time,#OrlandoTime .time,#PerthTime .time,#SanFransicoTime .time,#AucklandTime .time,#LondonTime .time,#BerlinTime .time,#VilniusTime .time{    
  font-family:clockbold;
  font-size: 11em;
  z-index: -13;   
}

.time{
  color:#FFFFFF;
  line-height:0.8;
}

.hour{
  position: relative;
}

.seperator{
  position: absolute;
  top: 50%;
  left:50%;
  /*margin-right: -50%;*/
  transform: translate(-50%, -50%)
}

.blink_me{
  animation: blinker 1s step-start 0s infinite;
  -webkit-animation: blinker 1s step-start 0s infinite;  
}

@keyframes blinker {  
  50% { opacity: 0.0; }
}

@-webkit-keyframes blinker {
  50% {
    opacity: 0.0;
  }
}

#SydneyTime .date,#OrlandoTime .date,#PerthTime .date,#SanFransicoTime .date,#AucklandTime .date,#LondonTime .date,#BerlinTime .date,#VilniusTime .date{		
	font-family:clockRegular;
	font-size: 2em;	
  line-height: 2;
  letter-spacing: 2px;
  z-index: 13;	
}

#SydneyTime .date{
  color:#f756e2;
}

#OrlandoTime .date{
  color:#907fff;
}

#PerthTime .date{ 
  color:#ff6600;   
}

#SanFransicoTime .date{
  color:#e6c724;
}
#AucklandTime .date{
  color:#3fd1ff;
}
#LondonTime .date{
  color:#f14f55;
}
#BerlinTime .date{
  color:#f9eb2e;
}
#VilniusTime .date{
  color:#4e9a29;
} 

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
    position: fixed;
    top: 5.76em;
    /*background: rgba(255, 254, 254, 0.1);*/    
    width: 100%;
    padding: 1.5em;
    z-index: 12;
}

.block{
  min-height: 22vh;  
}