/*

glitch.css

*/

#switch { display: none;}

.switch-label { position: absolute; right: 15px; bottom: 15px; display: inline-block; cursor: pointer; color: #eee; padding: 8px 15px; border-radius: 5px; margin: 0; background: #333; border: 2px solid #eee; text-transform: uppercase; font-size: 12px; font-weight: bold;}
.switch-label::after { content: "off";}
.switch-label::before { content: ""; display: inline-block; border-radius: 100%; width: 10px; height: 10px; background: #003321; margin-right: 10px; border: 1px solid #111;}
.switch-label:active { box-shadow: none; -webkit-transform: translate3d(0, 2px, 0); transform: translate3d(0, 2px, 0);}

.glitch-wrap { text-align: right; position: relative;}
.glitch-wrap.active .switch-label::before { border-color: #063; background: #2f9;}
.glitch-wrap.active .switch-label::after { content: "on";}

@-webkit-keyframes flicker {
  0% { opacity: 0.0402579495;}
  5% { opacity: 0.7728374069;}
  10% { opacity: 0.4138841382;}
  15% { opacity: 0.9884827057;}
  20% { opacity: 0.5849891606;}
  25% { opacity: 0.1523983254;}
  30% { opacity: 0.0006124867;}
  35% { opacity: 0.3156868132;}
  40% { opacity: 0.1038427017;}
  45% { opacity: 0.2552730757;}
  50% { opacity: 0.5151159566;}
  55% { opacity: 0.6649412038;}
  60% { opacity: 0.5093752134;}
  65% { opacity: 0.5115559038;}
  70% { opacity: 0.9124538921;}
  75% { opacity: 0.0559227635;}
  80% { opacity: 0.4481935156;}
  85% { opacity: 0.6238246111;}
  90% { opacity: 0.612404944;}
  95% { opacity: 0.4849905059;}
  100% { opacity: 0.7685949752;}
}
@keyframes flicker {
  0% { opacity: 0.0402579495;}
  5% { opacity: 0.7728374069;}
  10% { opacity: 0.4138841382;}
  15% { opacity: 0.9884827057;}
  20% { opacity: 0.5849891606;}
  25% { opacity: 0.1523983254;}
  30% { opacity: 0.0006124867;}
  35% { opacity: 0.3156868132;}
  40% { opacity: 0.1038427017;}
  45% { opacity: 0.2552730757;}
  50% { opacity: 0.5151159566;}
  55% { opacity: 0.6649412038;}
  60% { opacity: 0.5093752134;}
  65% { opacity: 0.5115559038;}
  70% { opacity: 0.9124538921;}
  75% { opacity: 0.0559227635;}
  80% { opacity: 0.4481935156;}
  85% { opacity: 0.6238246111;}
  90% { opacity: 0.612404944;}
  95% { opacity: 0.4849905059;}
  100% { opacity: 0.7685949752;}
}

.glitch-container { background: #121010; position: relative; overflow: hidden; border: 4px solid #666; border-radius: 10px;}
.glitch-container::after { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(18, 16, 16, 0.1); opacity: 0; z-index: 2; pointer-events: none;}
.glitch-container::before { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(18, 16, 16, 0)), color-stop(50%, rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right top, from(rgba(255, 0, 0, 0.06)), color-stop(rgba(0, 255, 0, 0.02)), to(rgba(0, 0, 255, 0.06)));
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none;
}

.glitch-wrap.active .glitch-container::after { -webkit-animation: flicker 0.15s infinite; animation: flicker 0.15s infinite;}

@-webkit-keyframes turn-on {
  0% {
    -webkit-transform: scale(1, 0.8) translate3d(0, 0, 0);
            transform: scale(1, 0.8) translate3d(0, 0, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 1;
  }
  3.5% {
    -webkit-transform: scale(1, 0.8) translate3d(0, 100%, 0);
            transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    -webkit-transform: scale(1, 0.8) translate3d(0, -100%, 0);
            transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    -webkit-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
            transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 0;
  }
  11% {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
            transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(0) brightness(0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
            transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(1) brightness(1.1) saturate(1.1);
    filter: contrast(1) brightness(1.1) saturate(1.1);
    opacity: 1;
  }
}

@keyframes turn-on {
  0% {
    -webkit-transform: scale(1, 0.8) translate3d(0, 0, 0);
            transform: scale(1, 0.8) translate3d(0, 0, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 1;
  }
  3.5% {
    -webkit-transform: scale(1, 0.8) translate3d(0, 100%, 0);
            transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    -webkit-transform: scale(1, 0.8) translate3d(0, -100%, 0);
            transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    -webkit-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
            transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 0;
  }
  11% {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
            transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(0) brightness(0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
            transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(1) brightness(1.1) saturate(1.1);
    filter: contrast(1) brightness(1.1) saturate(1.1);
    opacity: 1;
  }
}
@-webkit-keyframes turn-off {
  0% {
    -webkit-transform: scale(1, 1.3) translate3d(0, 0, 0);
            transform: scale(1, 1.3) translate3d(0, 0, 0);
    -webkit-filter: brightness(1);
    filter: brightness(1);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
            transform: scale(1.3, 0.001) translate3d(0, 0, 0);
    -webkit-filter: brightness(10);
    filter: brightness(10);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: scale(0, 0.0001) translate3d(0, 0, 0);
            transform: scale(0, 0.0001) translate3d(0, 0, 0);
    -webkit-filter: brightness(50);
    filter: brightness(50);
  }
}
@keyframes turn-off {
  0% {
    -webkit-transform: scale(1, 1.3) translate3d(0, 0, 0);
            transform: scale(1, 1.3) translate3d(0, 0, 0);
    -webkit-filter: brightness(1);
    filter: brightness(1);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
            transform: scale(1.3, 0.001) translate3d(0, 0, 0);
    -webkit-filter: brightness(10);
    filter: brightness(10);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: scale(0, 0.0001) translate3d(0, 0, 0);
            transform: scale(0, 0.0001) translate3d(0, 0, 0);
    -webkit-filter: brightness(50);
    filter: brightness(50);
  }
}
.screen {
  width: 100%;
  height: 100%;
  border: none;
}

#switch ~ .glitch-container > .screen {
	min-height: 190px;
  -webkit-animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
          animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@media screen and (max-width: 320px){
#switch ~ .glitch-container > .screen { min-height: 158px;}
}

.glitch-wrap.active #switch ~ .glitch-container > .screen {
  -webkit-animation: turn-on 4s linear;
          animation: turn-on 4s linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes overlay-anim {
  0% { visibility: hidden;}
  20% { visibility: hidden;}
  21% { visibility: visible;}
  100% { visibility: hidden;}
}

@keyframes overlay-anim {
  0% { visibility: hidden;}
  20% { visibility: hidden;}
  21% { visibility: visible;}
  100% { visibility: hidden;}
}

.overlay { color: #00FF00; position: absolute; top: 20px; left: 20px; font-size: 30px; visibility: hidden; pointer-events: none;}
.glitch-wrap.active .glitch-container .overlay {
  -webkit-animation: overlay-anim 5s linear;
          animation: overlay-anim 5s linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}