/* ubuntu-mono-regular - latin */
@font-face {
  font-family: 'Digital-7 Mono';
  font-style: normal;
  src: url('fonts/Digital-7Mono.eot'); /* IE9 Compat Modes */
  src: local('Digital-7 Mono'), local('Digital-7 Mono'),
       url('fonts/Digital-7Mono.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Digital-7Mono.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/Digital-7Mono.woff') format('woff'), /* Modern Browsers */
       url('fonts/Digital-7Mono.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/Digital-7Mono.svg#Digital-7Mono') format('svg'); /* Legacy iOS */
}
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: bold;
  src: url('fonts/montserrat-v14-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Medium'), local('Montserrat-Medium'),
       url('fonts/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
html{
  font-family: 'Montserrat', sans-serif;
  cursor:none;
}
html,body{   
    width:100%;
    height:100%;
    padding: 0;
    margin:0;
    background: #000;
} 

::-moz-selection { /* Code for Firefox */
  background: transparent;
}

::selection {
  background: transparent;
}
.pane{
    font-size: 24vw;
    text-align:center;
    color:#fff;
    width:100%;
    height:100%;
    position:absolute;
    transition: color 5s ease;
    transition: opacity 1s ease;
    background:#000;
    display:block;
    z-index:10;
    
}
.text{
    text-align:center;
    width:100%;
    position:absolute;
    margin-top: 50vh;
    transform: translateY(-50%);
    display:block;
}
.pane#time{  
    z-index:0; 
    font-family: 'Digital-7 Mono', monospace;
    background:#000;
    color:#fff;
}


#time #red{    
    background: #ff0000;
    width:100%;
    height:100%;
    position:absolute;
    opacity:0;
}

#time #noise{    
    background: url('MEDIA/noise.gif') repeat;
    width:100%;
    height:100%;
    position:absolute;
    opacity:0.5;
    z-index:4;
    display:none;
}

#time .text {
    z-index:3;
}

.alarm {
	background: #ff0000;
    	width:100%;
    	height:100%;
    	position:absolute;
    	display:none;
	background:red;
        z-index:100;
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
      }
      @keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }
      @-webkit-keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }

.pane.explain{
    display:none;
    font-size:5vw;
}
.pane.explain .text{
    width:90%;
    margin-left:5%;
}
i{
    color: #ff0000;
    font-size:15vw;
    margin-top:2vw;
}

#time.blink .text {
  animation: blinker 1s ease infinite;
}



@keyframes blinker { 
  0%{
    opacity: 1;
    font-size:24vw;
   }
  50% {
    opacity:0;
    font-size:23vw;
  }    
    
}


/* Glitch Effect */

.glitch {
      position: relative;
      animation: glitch-skew 0.5s infinite linear alternate-reverse;
      }
      .glitch::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        left: -2px;
        text-shadow: -10px 0 #00fff9, 10px 10px #ff00c1;
        animation: glitch-anim 0.3s infinite linear alternate-reverse;
      }
      @keyframes glitch-anim {
      0% {
      clip: rect(130px, 9999px, 342px, 0);
      transform: skew(0.85deg);
      }
      5% {
      clip: rect(159px, 9999px, 321px, 0);
      transform: skew(0.34deg);
      }
      10% {
      clip: rect(199px, 9999px, 315px, 0);
      transform: skew(0.01deg);
      }
      15% {
      clip: rect(125px, 9999px, 361px, 0);
      transform: skew(0.97deg);
      }
      20% {
      clip: rect(135px, 9999px, 342px, 0);
      transform: skew(0.94deg);
      }
      25% {
      clip: rect(139px, 9999px, 362px, 0);
      transform: skew(0.31deg);
      }
      30% {
      clip: rect(162px, 9999px, 355px, 0);
      transform: skew(0.9deg);
      }
      35% {
      clip: rect(136px, 9999px, 331px, 0);
      transform: skew(0.13deg);
      }
      40% {
      clip: rect(127px, 9999px, 326px, 0);
      transform: skew(0.01deg);
      }
      45% {
      clip: rect(155px, 9999px, 39px, 0);
      transform: skew(0.5deg);
      }
      50% {
      clip: rect(169px, 9999px, 373px, 0);
      transform: skew(0.85deg);
      }
      55% {
      clip: rect(153px, 9999px, 389px, 0);
      transform: skew(0.15deg);
      }
      60% {
      clip: rect(120px, 9999px, 328px, 0);
      transform: skew(0.62deg);
      }
      65% {
      clip: rect(181px, 9999px, 328px, 0);
      transform: skew(0.1deg);
      }
      70% {
      clip: rect(154px, 9999px, 393px, 0);
      transform: skew(0.3deg);
      }
      75% {
      clip: rect(122px, 9999px, 36px, 0);
      transform: skew(0.84deg);
      }
      80% {
      clip: rect(123px, 9999px, 35px, 0);
      transform: skew(0.55deg);
      }
      85% {
      clip: rect(124px, 9999px, 376px, 0);
      transform: skew(0.68deg);
      }
      90% {
      clip: rect(13px, 9999px, 329px, 0);
      transform: skew(0.48deg);
      }
      95% {
      clip: rect(143px, 9999px, 395px, 0);
      transform: skew(0.37deg);
      }
      100% {
      clip: rect(158px, 9999px, 366px, 0);
      transform: skew(0.05deg);
      }
      }
      @keyframes glitch-anim2 {
      0% {
      clip: rect(166px, 9999px, 328px, 0);
      transform: skew(0.12deg);
      }
      5% {
      clip: rect(185px, 9999px, 340px, 0);
      transform: skew(0.7deg);
      }
      10% {
      clip: rect(114px, 9999px, 333px, 0);
      transform: skew(0.81deg);
      }
      15% {
      clip: rect(148px, 9999px, 376px, 0);
      transform: skew(0.57deg);
      }
      20% {
      clip: rect(177px, 9999px, 316px, 0);
      transform: skew(0.4deg);
      }
      25% {
      clip: rect(115px, 9999px, 343px, 0);
      transform: skew(0.27deg);
      }
      30% {
      clip: rect(133px, 9999px, 311px, 0);
      transform: skew(0.84deg);
      }
      35% {
      clip: rect(150px, 9999px, 351px, 0);
      transform: skew(0.16deg);
      }
      40% {
      clip: rect(152px, 9999px, 311px, 0);
      transform: skew(0.21deg);
      }
      45% {
      clip: rect(139px, 9999px, 358px, 0);
      transform: skew(0.98deg);
      }
      50% {
      clip: rect(188px, 9999px, 342px, 0);
      transform: skew(0.42deg);
      }
      55% {
      clip: rect(198px, 9999px, 311px, 0);
      transform: skew(0.51deg);
      }
      60% {
      clip: rect(173px, 9999px, 373px, 0);
      transform: skew(0.81deg);
      }
      65% {
      clip: rect(182px, 9999px, 359px, 0);
      transform: skew(1deg);
      }
      70% {
      clip: rect(164px, 9999px, 384px, 0);
      transform: skew(0.94deg);
      }
      75% {
      clip: rect(141px, 9999px, 344px, 0);
      transform: skew(0.38deg);
      }
      80% {
      clip: rect(123px, 9999px, 335px, 0);
      transform: skew(0.54deg);
      }
      85% {
      clip: rect(120px, 9999px, 3100px, 0);
      transform: skew(0.76deg);
      }
      90% {
      clip: rect(19px, 9999px, 396px, 0);
      transform: skew(0.64deg);
      }
      95% {
      clip: rect(129px, 9999px, 382px, 0);
      transform: skew(0.47deg);
      }
      100% {
      clip: rect(115px, 9999px, 394px, 0);
      transform: skew(0.76deg);
      }
      }
      @keyframes glitch-skew {
      0% {
      transform: skew(2deg);
      }
      10% {
      transform: skew(4deg);
      }
      20% {
      transform: skew(4deg);
      }
      30% {
      transform: skew(-2deg);
      }
      40% {
      transform: skew(4deg);
      }
      50% {
      transform: skew(2deg);
      }
      60% {
      transform: skew(-3deg);
      }
      70% {
      transform: skew(-1deg);
      }
      80% {
      transform: skew(-3deg);
      }
      90% {
      transform: skew(-2deg);
      }
      100% {
      transform: skew(-2deg);
      }
      }