/* 
<!--
Copyright (c) 2016 by XING LEI (http://codepen.io/xleisize/pen/LRxZbv)
-->
*/


body {
  /*background-color: #111;*/
}
.container {
  width: 340px;
  position: absolute;
  /*top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);*/
}
.font,
.main,
.glitch:before,
.glitch:after {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 7.5rem;
  line-height: 6.9rem;
  text-align: left;
}
.text,
.glitch {
  width: 100%;
  height: 100%;
}
.main {
  position: relative;
  color: rgba(255,255,255,0.2);
  /*color: rgba(1,244,16,0.2);*/
  /*background-image: url("http://i.giphy.com/3o6Mb4ZTsllteGKWVq.gif");*/
  /*background-image: url("http://i.giphy.com/XN5HqSjyLfkrK.gif");*/ /* 2017 */
  background-image: url("https://media.giphy.com/media/kj2TTLhvTvBte/giphy.gif"); /* 2018 */
  /*background-image: url("https://media.giphy.com/media/l7Q2qhak4X2kU/giphy.gif");*/
  background-size: cover;
  background-position: center center;
  -webkit-background-clip: text;
  -webkit-animation: noise-3 1.8s ease-out infinite;
          animation: noise-3 1.8s ease-out infinite;
}
.glitch {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  /*color: rgba(255,0,0,0.5);*/
  color: rgba(119,66,169,0.5);
  -webkit-transform: scale(0.95) translateX(2px);
          transform: scale(0.95) translateX(2px);
  -webkit-animation: noise-2 2s ease-out infinite;
          animation: noise-2 2s ease-out infinite;
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(0,0,255,0.5);
  -webkit-transform: scale(0.95) translateX(2px);
          transform: scale(0.95) translateX(2px);
  -webkit-animation: noise 3s ease-in infinite;
          animation: noise 3s ease-in infinite;
}
@-webkit-keyframes noise {
  0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
    -webkit-transform: scaleY(1) translateX(2px);
            transform: scaleY(1) translateX(2px);
    z-index: 0;
  }
  10% {
    -webkit-transform: scaleX(1.2) translateX(5px) translateY(10px);
            transform: scaleX(1.2) translateX(5px) translateY(10px);
    z-index: 0;
  }
  71.5% {
    -webkit-transform: scaleX(1.25) translateX(-20px);
            transform: scaleX(1.25) translateX(-20px);
    z-index: 1;
  }
}
@keyframes noise {
  0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
    -webkit-transform: scaleY(1) translateX(2px);
            transform: scaleY(1) translateX(2px);
    z-index: 0;
  }
  10% {
    -webkit-transform: scaleX(1.2) translateX(5px) translateY(10px);
            transform: scaleX(1.2) translateX(5px) translateY(10px);
    z-index: 0;
  }
  71.5% {
    -webkit-transform: scaleX(1.25) translateX(-20px);
            transform: scaleX(1.25) translateX(-20px);
    z-index: 1;
  }
}
@-webkit-keyframes noise-2 {
  0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
    -webkit-transform: scaleY(1) translateX(-2px);
            transform: scaleY(1) translateX(-2px);
    z-index: 0;
  }
  10% {
    -webkit-transform: scaleX(1.2) translateX(-5px);
            transform: scaleX(1.2) translateX(-5px);
    z-index: 0;
  }
  71.5% {
    -webkit-transform: scaleX(1.3) translateX(30px);
            transform: scaleX(1.3) translateX(30px);
    z-index: 1;
  }
}
@keyframes noise-2 {
  0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
    -webkit-transform: scaleY(1) translateX(-2px);
            transform: scaleY(1) translateX(-2px);
    z-index: 0;
  }
  10% {
    -webkit-transform: scaleX(1.2) translateX(-5px);
            transform: scaleX(1.2) translateX(-5px);
    z-index: 0;
  }
  71.5% {
    -webkit-transform: scaleX(1.3) translateX(30px);
            transform: scaleX(1.3) translateX(30px);
    z-index: 1;
  }
}
@-webkit-keyframes noise-3 {
  0%, 9.5%, 10.2%, 71%, 72%, 100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  10% {
    -webkit-transform: scaleX(1.1);
            transform: scaleX(1.1);
  }
  71.8% {
    -webkit-transform: scaleX(1.2);
            transform: scaleX(1.2);
  }
}
@keyframes noise-3 {
  0%, 9.5%, 10.2%, 71%, 72%, 100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  10% {
    -webkit-transform: scaleX(1.1);
            transform: scaleX(1.1);
  }
  71.8% {
    -webkit-transform: scaleX(1.2);
            transform: scaleX(1.2);
  }
}