@font-face {
    font-family:"Fiolex Mephisto";
    src:url("fonts/Fiolex_Mephisto.eot?") format("eot"),
        url("fonts/Fiolex_Mephisto.woff") format("woff"),
        url("fonts/Fiolex_Mephisto.ttf") format("truetype"),
        url("fonts/Fiolex_Mephisto.svg#") format("svg");
    font-weight:normal;font-style:normal;
}
body{
    *font-family: 'Trade Winds', cursive;
    font-family: Fiolex Mephisto;
    font-size: 40px;
/*    background-color: #1B1E25;*/
/*    background-image: url(images/back.jpg);*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
    background: transparent;
    height: 100vh;
    margin: 0px;
    overflow: hidden;
}
.aref_main{
    width: 300px;
    height: 520px;
    position: absolute;
/*    top: 130px;*/
    bottom: 0px;
    left: calc(50% - 150px);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}
.aref_image{
    position: absolute;
    top: 0px;
    width: 300px;
    height: 520px;
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
            animation: arefshow 2s ease-in-out forwards;
-webkit-animation: arefshow 2s ease-in-out forwards;
}
.aref_image_go{
    top: 600px;
    -webkit-transform: scale(5);
	-moz-transform: scale(5);
	-ms-transform: scale(5);
	-o-transform: scale(5);
	transform: scale(5);
        -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -ms-transition: 300ms;
    transition: 300ms;
}
@keyframes arefshow {
    0%{
        _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter:alpha(0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0;     
    }
    100%{
        _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        filter:alpha(1);
        -moz-opacity:1;
        -khtml-opacity:1;
        opacity:1;
    }
}
@-webkit-keyframes arefshow {
     0%{_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
    100%{ _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter:alpha(1);-moz-opacity:1; -khtml-opacity:1;opacity:1;}
}
@-moz-keyframes arefshow {
    0%{_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
    100%{ _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter:alpha(1);-moz-opacity:1; -khtml-opacity:1;opacity:1;}
}
@-o-keyframes arefshow {
    0%{_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
    100%{ _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter:alpha(1);-moz-opacity:1; -khtml-opacity:1;opacity:1;}
}
@-ms-keyframes arefshow {
    0%{_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
    100%{ _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter:alpha(1);-moz-opacity:1; -khtml-opacity:1;opacity:1;}
}
.aref_fog{
    position: absolute;
    width: 300px;
    bottom: -400px;
    animation: aref_fogshow 8s ease-in-out infinite 4s;
-webkit-animation: aref_fogshow 8s ease-in-out infinite 4s;
}
@keyframes aref_fogshow {
    0%{
        bottom: -400px;
        _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        filter:alpha(1);
        -moz-opacity:1;
        -khtml-opacity:1;
        opacity:1;
    }
    100%{
        bottom: 400px;
        _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
        filter:alpha(0);
        -moz-opacity:0;
        -khtml-opacity:0;
        opacity:0;
    }
}
@-webkit-keyframes aref_fogshow {
    0%{bottom: -400px;_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    100%{bottom: 400px;_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
}
@-moz-keyframes aref_fogshow {
    0%{bottom: -400px;_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    100%{bottom: 400px;_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
}
@-o-keyframes aref_fogshow {
    0%{bottom: -400px;_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    100%{bottom: 400px;_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
}
@-ms-keyframes aref_fogshow {
    0%{bottom: -400px;_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    100%{bottom: 400px;_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
}
.logo{
    position: absolute;
    width: 170px;
    height: 170px;
    top: 100px;
    left: 50%;
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
        animation: logoshow 10s ease-in-out infinite 3s;
-webkit-animation: logoshow 10s ease-in-out infinite 3s;
    -webkit-transform:translateX(-50%) scale(0.1) rotate(-360deg);
	-moz-transform:translateX(-50%) scale(0.1) rotate(-360deg);
	-ms-transform:translateX(-50%) scale(0.1) rotate(-360deg);
	-o-transform:translateX(-50%) scale(0.1) rotate(-360deg);
	transform:translateX(-50%) scale(0.1) rotate(-360deg);
    _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter:alpha(0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0;
}
@keyframes logoshow {
    15%{
        -webkit-transform:translateX(-50%) scale(1) rotate(0deg);
        -moz-transform:translateX(-50%) scale(1) rotate(0deg);
        -ms-transform:translateX(-50%) scale(1) rotate(0deg);
        -o-transform:translateX(-50%) scale(1) rotate(0deg);
        transform:translateX(-50%) scale(1) rotate(0deg);
        _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        filter:alpha(1);
        -moz-opacity:1;
        -khtml-opacity:1;
        opacity:1;
    }
    25% {
        -webkit-transform:translateX(-50%) scale(1) rotate(0deg);
        -moz-transform:translateX(-50%) scale(1) rotate(0deg);
        -ms-transform:translateX(-50%) scale(1) rotate(0deg);
        -o-transform:translateX(-50%) scale(1) rotate(0deg);
        transform:translateX(-50%) scale(1) rotate(0deg);
    }
    27% {
        -webkit-transform:translateX(-50%) scale(1.5) rotate(0deg);
        -moz-transform:translateX(-50%) scale(1.5) rotate(0deg);
        -ms-transform:translateX(-50%) scale(1.5) rotate(0deg);
        -o-transform:translateX(-50%) scale(1.5) rotate(0deg);
        transform:translateX(-50%) scale(1.5) rotate(0deg); 
    }
    30% {
        margin-top: 0px;
        -webkit-transform:translateX(-50%) scale(1) rotate(0deg);
        -moz-transform:translateX(-50%) scale(1) rotate(0deg);
        -ms-transform:translateX(-50%) scale(1) rotate(0deg);
        -o-transform:translateX(-50%) scale(1) rotate(0deg);
        transform:translateX(-50%) scale(1) rotate(0deg);
         _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        filter:alpha(1);
        -moz-opacity:1;
        -khtml-opacity:1;
        opacity:1;
    }
    50%{
        margin-top: -120px;
        -webkit-transform:translateX(-50%) scale(1) rotate(0deg);
	-moz-transform:translateX(-50%) scale(1) rotate(0deg);
	-ms-transform:translateX(-50%) scale(1) rotate(0deg);
	-o-transform:translateX(-50%) scale(1) rotate(0deg);
	transform:translateX(-50%) scale(1) rotate(0deg);
    _ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter:alpha(0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0;
    }
    100%{ }
}
@-webkit-keyframes logoshow {
    15%{-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    25% {-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);}
    27% {-webkit-transform:translateX(-50%) scale(1.5) rotate(0deg);-moz-transform:translateX(-50%) scale(1.5) rotate(0deg);-ms-transform:translateX(-50%) scale(1.5) rotate(0deg);-o-transform:translateX(-50%) scale(1.5) rotate(0deg);transform:translateX(-50%) scale(1.5) rotate(0deg); }
    30% {margin-top: 0px;-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    50%{margin-top: -120px;-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
    100%{ }
}
@-moz-keyframes logoshow {
    15%{-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    25% {-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);}
    27% {-webkit-transform:translateX(-50%) scale(1.5) rotate(0deg);-moz-transform:translateX(-50%) scale(1.5) rotate(0deg);-ms-transform:translateX(-50%) scale(1.5) rotate(0deg);-o-transform:translateX(-50%) scale(1.5) rotate(0deg);transform:translateX(-50%) scale(1.5) rotate(0deg); }
    30% {margin-top: 0px;-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    50%{margin-top: -120px;-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
    100%{ }
}
@-o-keyframes logoshow {
    15%{-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    25% {-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);}
    27% {-webkit-transform:translateX(-50%) scale(1.5) rotate(0deg);-moz-transform:translateX(-50%) scale(1.5) rotate(0deg);-ms-transform:translateX(-50%) scale(1.5) rotate(0deg);-o-transform:translateX(-50%) scale(1.5) rotate(0deg);transform:translateX(-50%) scale(1.5) rotate(0deg); }
    30% {margin-top: 0px;-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    50%{margin-top: -120px;-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
    100%{ }
}
@-ms-keyframes logoshow {
    15%{-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    25% {-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);}
    27% {-webkit-transform:translateX(-50%) scale(1.5) rotate(0deg);-moz-transform:translateX(-50%) scale(1.5) rotate(0deg);-ms-transform:translateX(-50%) scale(1.5) rotate(0deg);-o-transform:translateX(-50%) scale(1.5) rotate(0deg);transform:translateX(-50%) scale(1.5) rotate(0deg); }
    30% {margin-top: 0px;-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(1);-moz-opacity:1;-khtml-opacity:1;opacity:1;}
    50%{margin-top: -120px;-webkit-transform:translateX(-50%) scale(1) rotate(0deg);-moz-transform:translateX(-50%) scale(1) rotate(0deg);-ms-transform:translateX(-50%) scale(1) rotate(0deg);-o-transform:translateX(-50%) scale(1) rotate(0deg);transform:translateX(-50%) scale(1) rotate(0deg);_ilter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
    100%{ }
}

.glitch {
    color: #E5E1D1;
    font-size: 50px;
    position: relative;
    width: 355px;
    margin: 60px auto 0px 
}
@keyframes noise-anim {
  0% {
    clip: rect(46px, 9999px, 92px, 0); }
  5% {
    clip: rect(15px, 9999px, 58px, 0); }
  10% {
    clip: rect(84px, 9999px, 9px, 0); }
  15.0% {
    clip: rect(58px, 9999px, 70px, 0); }
  20% {
    clip: rect(53px, 9999px, 98px, 0); }
  25% {
    clip: rect(64px, 9999px, 49px, 0); }
  30.0% {
    clip: rect(58px, 9999px, 25px, 0); }
  35% {
    clip: rect(32px, 9999px, 82px, 0); }
  40% {
    clip: rect(49px, 9999px, 49px, 0); }
  45% {
    clip: rect(35px, 9999px, 83px, 0); }
  50% {
    clip: rect(30px, 9999px, 21px, 0); }
  55.0% {
    clip: rect(58px, 9999px, 85px, 0); }
  60.0% {
    clip: rect(61px, 9999px, 19px, 0); }
  65% {
    clip: rect(83px, 9999px, 29px, 0); }
  70% {
    clip: rect(69px, 9999px, 44px, 0); }
  75% {
    clip: rect(81px, 9999px, 4px, 0); }
  80% {
    clip: rect(54px, 9999px, 8px, 0); }
  85.0% {
    clip: rect(86px, 9999px, 29px, 0); }
  90% {
    clip: rect(87px, 9999px, 2px, 0); }
  95% {
    clip: rect(48px, 9999px, 65px, 0); }
  100% {
    clip: rect(73px, 9999px, 28px, 0); }
}
@-webkit-keyframes noise-anim {
  0% {
    clip: rect(46px, 9999px, 92px, 0); }
  5% {
    clip: rect(15px, 9999px, 58px, 0); }
  10% {
    clip: rect(84px, 9999px, 9px, 0); }
  15.0% {
    clip: rect(58px, 9999px, 70px, 0); }
  20% {
    clip: rect(53px, 9999px, 98px, 0); }
  25% {
    clip: rect(64px, 9999px, 49px, 0); }
  30.0% {
    clip: rect(58px, 9999px, 25px, 0); }
  35% {
    clip: rect(32px, 9999px, 82px, 0); }
  40% {
    clip: rect(49px, 9999px, 49px, 0); }
  45% {
    clip: rect(35px, 9999px, 83px, 0); }
  50% {
    clip: rect(30px, 9999px, 21px, 0); }
  55.0% {
    clip: rect(58px, 9999px, 85px, 0); }
  60.0% {
    clip: rect(61px, 9999px, 19px, 0); }
  65% {
    clip: rect(83px, 9999px, 29px, 0); }
  70% {
    clip: rect(69px, 9999px, 44px, 0); }
  75% {
    clip: rect(81px, 9999px, 4px, 0); }
  80% {
    clip: rect(54px, 9999px, 8px, 0); }
  85.0% {
    clip: rect(86px, 9999px, 29px, 0); }
  90% {
    clip: rect(87px, 9999px, 2px, 0); }
  95% {
    clip: rect(48px, 9999px, 65px, 0); }
  100% {
    clip: rect(73px, 9999px, 28px, 0); }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: none;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
  -webkit-animation: noise-anim 2s infinite linear alternate-reverse; }
@keyframes noise-anim-2 {
  0% {
    clip: rect(17px, 9999px, 66px, 0); }
  5% {
    clip: rect(42px, 9999px, 18px, 0); }
  10% {
    clip: rect(75px, 9999px, 13px, 0); }
  15.0% {
    clip: rect(28px, 9999px, 79px, 0); }
  20% {
    clip: rect(92px, 9999px, 45px, 0); }
  25% {
    clip: rect(4px, 9999px, 18px, 0); }
  30.0% {
    clip: rect(12px, 9999px, 93px, 0); }
  35% {
    clip: rect(51px, 9999px, 22px, 0); }
  40% {
    clip: rect(2px, 9999px, 92px, 0); }
  45% {
    clip: rect(15px, 9999px, 94px, 0); }
  50% {
    clip: rect(57px, 9999px, 54px, 0); }
  55.0% {
    clip: rect(93px, 9999px, 29px, 0); }
  60.0% {
    clip: rect(76px, 9999px, 15px, 0); }
  65% {
    clip: rect(60px, 9999px, 78px, 0); }
  70% {
    clip: rect(68px, 9999px, 87px, 0); }
  75% {
    clip: rect(59px, 9999px, 44px, 0); }
  80% {
    clip: rect(46px, 9999px, 26px, 0); }
  85.0% {
    clip: rect(2px, 9999px, 11px, 0); }
  90% {
    clip: rect(93px, 9999px, 56px, 0); }
  95% {
    clip: rect(89px, 9999px, 29px, 0); }
  100% {
    clip: rect(51px, 9999px, 60px, 0); } }
@-webkit-keyframes noise-anim-2 {
  0% {
    clip: rect(17px, 9999px, 66px, 0); }
  5% {
    clip: rect(42px, 9999px, 18px, 0); }
  10% {
    clip: rect(75px, 9999px, 13px, 0); }
  15.0% {
    clip: rect(28px, 9999px, 79px, 0); }
  20% {
    clip: rect(92px, 9999px, 45px, 0); }
  25% {
    clip: rect(4px, 9999px, 18px, 0); }
  30.0% {
    clip: rect(12px, 9999px, 93px, 0); }
  35% {
    clip: rect(51px, 9999px, 22px, 0); }
  40% {
    clip: rect(2px, 9999px, 92px, 0); }
  45% {
    clip: rect(15px, 9999px, 94px, 0); }
  50% {
    clip: rect(57px, 9999px, 54px, 0); }
  55.0% {
    clip: rect(93px, 9999px, 29px, 0); }
  60.0% {
    clip: rect(76px, 9999px, 15px, 0); }
  65% {
    clip: rect(60px, 9999px, 78px, 0); }
  70% {
    clip: rect(68px, 9999px, 87px, 0); }
  75% {
    clip: rect(59px, 9999px, 44px, 0); }
  80% {
    clip: rect(46px, 9999px, 26px, 0); }
  85.0% {
    clip: rect(2px, 9999px, 11px, 0); }
  90% {
    clip: rect(93px, 9999px, 56px, 0); }
  95% {
    clip: rect(89px, 9999px, 29px, 0); }
  100% {
    clip: rect(51px, 9999px, 60px, 0); } }
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: none;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse;
}
.gradient{
    height: 100px;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
 background: -moz-linear-gradient(90deg, rgba(30,33,42,0.9) 0%, rgba(0,0,0,0) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(30,33,42,0.9))); /* safari4+,chrome */
background: -webkit-linear-gradient(90deg, rgba(30,33,42,0.9) 0%, rgba(0,0,0,0) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(90deg, rgba(30,33,42,0.9) 0%, rgba(0,0,0,0) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(90deg, rgba(30,33,42,0.9) 0%, rgba(0,0,0,0) 100%); /* ie10+ */
background: linear-gradient(0deg, rgba(30,33,42,0.9) 0%, rgba(0,0,0,0) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1E212A',GradientType=0 ); 
/*
            animation: gradientmove 8s ease-in-out infinite 1s;
-webkit-animation: gradientmove 8s ease-in-out infinite 1s;
*/
}
@keyframes gradientmove {
    50%{
        height: 350px;
    }
}
@-webkit-keyframes gradientmove {50%{height: 350px;}}
@-moz-keyframes gradientmove {50%{height: 350px;}}
@-o-keyframes gradientmove {50%{height: 350px;}}
@-ms-keyframes gradientmove {50%{height: 350px;}}