/* iris-clean-css:v1 */
@font-face {
  font-family: 'AGENCYB';
  src: url("../de/dee449e002c50d9efbc72aa844320238d3219cfc.eot#iefix") format("embedded-opentype"), url("http://storage-asset.msi.com/event/msifonts/fonts/AGENCYB.woff") format("woff"), url("../50/508a788bd45e99534281e4fc96d2d7b53d85ece3.ttf") format("truetype"), url("http://storage-asset.msi.com/event/msifonts/fonts/AGENCYB.svg#DINPro-Bold") format("svg");
}

@font-face {
  font-family: 'PTSansNarrowRegular';
  src: url("font/PTN57F-webfont.eot?#iefix") format("embedded-opentype"), url("font/PTN57F-webfont.woff") format("woff"), url("font/PTN57F-webfont.ttf") format("truetype"), url("font/PTN57F-webfont.svg#PTSansNarrowRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*mouse-rgb*/
#mouse-rgb {padding-top:5%; }
#mouse-rgb h3{color: #969696; font-weight: bold;}
#mouse-rgb h3:before{
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-left-color: red;
  vertical-align: sub;
  margin-left: -3%;
}
#mouse-rgb .txtbox{width: 30%; position: relative;}

@media screen and (max-width: 960px) {
  #mouse-rgb .txtbox{width: 100%;}

}

#mouse-rgb p {
  padding-bottom: 5%;
}

#mouse-rgb img {
  vertical-align: bottom;
}

#mouse-rgb button {
  outline: none;
}

#mouse-rgb .iconbox {
  position: absolute;
  right: -220px;
  bottom: 10%;
}

@media screen and (max-width: 960px) {
  #mouse-rgb .iconbox {
    position: initial;
    right: 0;
    bottom: 0;
    text-align: center;
    padding-bottom: 30px;
  }
  #mouse-rgb .iconbox img {
    width: 40%;
  }
}

#mouse-rgb .mouse-wp {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 55%;
  flex: 0 0 55%;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  margin-top: 3%;
}

@media screen and (max-width: 960px) {
  #mouse-rgb .mouse-wp {
    padding-bottom: 5vh;
  }
}

#mouse-rgb .mousebox {
  position: relative;
  overflow: hidden;
  background: #8c8b92;
}

#mouse-rgb .imgtop {
  position: relative;
  z-index: 10;
}

#mouse-rgb .rgbbox, #mouse-rgb .rgbstyle {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#mouse-rgb .rgbstyle {
  position: relative;
  display: none;
}

#mouse-rgb .rgbstyle.active {
  display: block;
}

#mouse-rgb .gdbox {
  position: absolute;
  width: 35%;
  height: 50%;
  left: 75px;
  top: 20%;
  z-index: 2;
  background: #8c8b92;
  overflow: hidden;
}

#mouse-rgb .gdstyle {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

#mouse-rgb .gdstyle.active {
  display: block;
}


#mouse-rgb .gdred {
  background: #f00;
}

#mouse-rgb .gdcolorloop {
  -webkit-animation: gdcolorloop 8s linear infinite;
  animation: gdcolorloop 8s linear infinite;
}

#mouse-rgb .rgb-steady, #mouse-rgb .rgb-breath, #mouse-rgb .rgb-ripple, #mouse-rgb .rgb-ripplexs, #mouse-rgb .rgb-reactive, #mouse-rgb .rgb-reactivexs {
  background-color: #d540de;
}

#mouse-rgb .rgb-breath:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  -webkit-animation: breath 15s linear infinite;
  animation: breath 15s linear infinite;
}

#mouse-rgb .rgb-rainbow {
  -webkit-animation: rainbow 3s linear infinite;
  animation: rainbow 3s linear infinite;
}

#mouse-rgb .rgb-wave {
  width: 100%;
  height: 76%;
  left: -10%;
  top: 17%;
  background: url("../a7/a7b92d9775af5d2993512d86aaac6771a98667c7.jpg") top;
  will-change: background-position;
  -webkit-animation: wave 3s linear infinite;
  animation: wave 3s linear infinite;
  -webkit-transform: rotate(-35deg);
  -ms-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

#mouse-rgb .rgb-wavexs {
  -webkit-animation: wavexs 3s linear infinite;
  animation: wavexs 3s linear infinite;
}

#mouse-rgb .rgb-radar {
  /*background: url(../6c/6cb968b85ac0de2f1212f8f0ce1fd9e61b5e19df.gif) top center no-repeat;
  background-size: cover;
  width: 100%;
  z-index: 10;*/
  -webkit-animation: radar 12s linear infinite;
  animation: radar 12s linear infinite;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  width: 30%;
}

#mouse-rgb .rgb-radarxs{
  -webkit-animation: radarxs 12s linear infinite;
  animation: radarxs 12s linear infinite;
}

#mouse-rgb .rgb-horizon {
  /*background: url(../8b/8bde5f96afa5242a2e25942fb4685a0c4dbedef5.gif) top center no-repeat ;
  background-size: cover;
  width: 100%;
  z-index: 10;*/
  -webkit-animation: horizon 6s linear infinite;
  animation: horizon 6s linear infinite;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  width: 30%;
}

#mouse-rgb .rgb-horizonxs {
  -webkit-animation: horizonxs 6s linear infinite;
  animation: horizonxs 6s linear infinite;
}

#mouse-rgb .rgb-ripple {
  -webkit-animation: radar 8s linear infinite;
  animation: radar 8s linear infinite;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  width: 30%;
}

#mouse-rgb .rgb-ripplexs {
  -webkit-animation: ripplexs 8s linear infinite;
  animation: ripplexs 8s linear infinite;
}

#mouse-rgb .ripple-hand {
  position: absolute;
  width: 7%;
  max-width: 80px;
  z-index: 20;
  top: 0%;
  left: 33%;
  background: none;
  -webkit-animation: ripple-hand 2s linear infinite;
  animation: ripple-hand 2s linear infinite;
}

#mouse-rgb .reactive-hand {
  position: absolute;
  width: 7%;
  max-width: 80px;
  z-index: 20;
  top: 0%;
  left: 33%;
  background: none;
  -webkit-animation: reactive-hand 8s linear infinite;
  animation: reactive-hand 8s linear infinite;
}

#mouse-rgb .rgb-reactive {
  -webkit-animation: singal-color 8s linear infinite;
  animation: singal-color 8s linear infinite;
}

#mouse-rgb .rgb-reactive.loop {
  -webkit-animation: loop 8s linear infinite;
  animation: loop 8s linear infinite;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#mouse-rgb .rgb-reactive.singal-color {
  -webkit-animation: singal-color 8s linear infinite;
  animation: singal-color 8s linear infinite;
}

#mouse-rgb .rgb-reactivexs {
  -webkit-animation: singal-color 8s linear infinite;
  animation: singal-color 8s linear infinite;
}

#mouse-rgb .rgb-reactivexs.loop {
  -webkit-animation: loop 8s linear infinite;
  animation: loop 8s linear infinite;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#mouse-rgb .rgb-reactivexs.singal-color {
  -webkit-animation: singal-color 10s linear infinite;
  animation: singal-color 10s linear infinite;
}


#mouse-rgb .rgb-customize {
  background: url(../38/38a0b6bd58cb01c85b59216850924f7e035a2cdb.jpg) center center no-repeat ;
  background-size: cover;
  width: 100%;
  z-index: 10;
}

#mouse-rgb .colorbar {
  text-align: center;
  width: 240px;
  height: 260px;
  margin: 0 auto;
  visibility: hidden;
  position: absolute;
  top: -110%;
}

@media screen and (max-width: 960px) {
  #mouse-rgb .colorbar {position: initial; top:0;}
}

#mouse-rgb .colorbar.on {
  visibility: visible;
}

#mouse-rgb .rightbt {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 45%;
  flex: 0 0 45%;
  padding-left: 3%;
}

#mouse-rgb .btbox {
  position: relative;
  padding-top: 5%;
}

#mouse-rgb .btbox button {
  background: #000;
  background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#000000));
  background: -webkit-linear-gradient(top, #353535 0%, #000000 100%);
  background: -o-linear-gradient(top, #353535 0%, #000000 100%);
  background: linear-gradient(to bottom, #353535 0%, #000000 100%);
  border-radius: 5px;
  min-width: 135px;
  padding: 5px 10px;
  margin: 5px auto;
  border: #333 1px solid;
  font-size: 18px;
}

#mouse-rgb .btbox button.active, #mouse-rgb .btbox button:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#353535), to(#000000));
  background: -webkit-linear-gradient(bottom, #353535 0%, #000000 100%);
  background: -o-linear-gradient(bottom, #353535 0%, #000000 100%);
  background: linear-gradient(to top, #353535 0%, #000000 100%);
}

@media screen and (max-width: 960px) {
  #mouse-rgb .btbox {
    text-align: center;
  }
}

#mouse-rgb .shortcuts {padding-top: 5%;}
#mouse-rgb .shortcuts_table {width: 100%;}
#mouse-rgb .tableFlex{display: flex; align-items: center; justify-content: center;}
#mouse-rgb .tableFlex.th{border-bottom: solid 1px #969696; font-weight: bold; font-size: 20px;}
#mouse-rgb .tableFlex span{flex:0 0 40%; padding:1% 3%; font-size: 18px;}
#mouse-rgb .tableFlex span:nth-child(1){text-align: right;}
#mouse-rgb .tableFlex span:nth-child(2){color: #969696;}
#mouse-rgb .tableFlex.td:nth-child(odd){background:rgba(255,255,255,.1);}

@-webkit-keyframes colorloop {
  0% {
    background: #00ff12;
  }
  10% {
    background: #00ff12;
  }
  16% {
    background: #f8fb04;
  }
  26% {
    background: #f8fb04;
  }
  33% {
    background: #00aeff;
  }
  43% {
    background: #00aeff;
  }
  49% {
    background: #2a00ff;
  }
  59% {
    background: #2a00ff;
  }
  68% {
    background: #d540de;
  }
  78% {
    background: #d540de;
  }
  84% {
    background: #f72328;
  }
  94% {
    background: #f72328;
  }
  100% {
    background: #00ff12;
  }
}

@keyframes colorloop {
  0% {
    background: #00ff12;
  }
  10% {
    background: #00ff12;
  }
  16% {
    background: #f8fb04;
  }
  26% {
    background: #f8fb04;
  }
  33% {
    background: #00aeff;
  }
  43% {
    background: #00aeff;
  }
  49% {
    background: #2a00ff;
  }
  59% {
    background: #2a00ff;
  }
  68% {
    background: #d540de;
  }
  78% {
    background: #d540de;
  }
  84% {
    background: #f72328;
  }
  94% {
    background: #f72328;
  }
  100% {
    background: #00ff12;
  }
}

@-webkit-keyframes breath {
  0% {
    background-color: #1b1b1b; }
  7.14% {
    background-color: #9BA054; }
  14.28% {
    background-color: #1b1b1b; }
  21.42% {
    background-color: #007F27; }
  28.56% {
    background-color: #1b1b1b; }
  35.7% {
    background-color: #0097E4; }
  42.84% {
    background-color: #1b1b1b; }
  49.98% {
    background-color: #0A28EF; }
  57.12% {
    background-color: #1b1b1b; }
  64.26% {
    background-color: #832AFB; }
  71.4% {
    background-color: #1b1b1b; }
  78.54% {
    background-color: #7877CF; }
  85.68% {
    background-color: #1b1b1b; }
  92.82% {
    background-color: #7E1209; }
  100% {
    background-color: #1b1b1b; }
}

@keyframes breath {
  0% {
    background-color: #1b1b1b; }
  7.14% {
    background-color: #9BA054; }
  14.28% {
    background-color: #1b1b1b; }
  21.42% {
    background-color: #007F27; }
  28.56% {
    background-color: #1b1b1b; }
  35.7% {
    background-color: #0097E4; }
  42.84% {
    background-color: #1b1b1b; }
  49.98% {
    background-color: #0A28EF; }
  57.12% {
    background-color: #1b1b1b; }
  64.26% {
    background-color: #832AFB; }
  71.4% {
    background-color: #1b1b1b; }
  78.54% {
    background-color: #7877CF; }
  85.68% {
    background-color: #1b1b1b; }
  92.82% {
    background-color: #7E1209; }
  100% {
    background-color: #1b1b1b; }
}

@-webkit-keyframes rainbow {
  0% {
    background-color: red; }
  16.6% {
    background-color: yellow; }
  33.2% {
    background-color: lime; }
  49.8% {
    background-color: cyan; }
  66.4% {
    background-color: blue; }
  83% {
    background-color: magenta; }
  100% {
    background-color: red; } 
}

@keyframes rainbow {
  0% {
    background-color: red; }
  16.6% {
    background-color: yellow; }
  33.2% {
    background-color: lime; }
  49.8% {
    background-color: cyan; }
  66.4% {
    background-color: blue; }
  83% {
    background-color: magenta; }
  100% {
    background-color: red; }
}

@-webkit-keyframes wave {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 20% 611px;
  }
}

@keyframes wave {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 20% 611px;
  }
}

@-webkit-keyframes wavexs {
  0% {
    background: #00aeff;
  }
  10% {
    background: #2a00ff;
  }
  30% {
    background: #d540de;
  }
  50% {
    background: #f72328;
  }
  70% {
    background: #f8fb04;
  }
  90% {
    background: #00ff12;
  }
  100% {
    background: #00aeff;
  }
}

@keyframes wavexs {
  0% {
    background: #00aeff;
  }
  10% {
    background: #2a00ff;
  }
  30% {
    background: #d540de;
  }
  50% {
    background: #f72328;
  }
  70% {
    background: #f8fb04;
  }
  90% {
    background: #00ff12;
  }
  100% {
    background: #00aeff;
  }
}

@-webkit-keyframes radar {
  0% {
    background: #f00;
    left: -30%;
  }
  12% {
    background: #f00;
    left: 100%;
  }
  12.1% {
    background: #ff0;
    left: -30%;
  }
  14% {
    background: #ff0;
    left: -30%;
  }
  26% {
    background: #ff0;
    left: 100%;
  }
  26.1% {
    background: #0f0;
    left: -30%;
  }
  29% {
    background: #0f0;
    left: -30%;
  }
  41% {
    background: #0f0;
    left: 100%;
  }
  41.1% {
    background: #0ff;
    left: -30%;
  }
  43% {
    background: #0ff;
    left: -30%;
  }
  55% {
    background: #0ff;
    left: 100%;
  }
  55.1% {
    background: #00f;
    left: -30%;
  }
  58% {
    background: #00f;
    left: -30%;
  }
  70% {
    background: #00f;
    left: 100%;
  }
  70.1% {
    background: #f0f;
    left: -30%;
  }
  72% {
    background: #f0f;
    left: -30%;
  }
  84% {
    background: #f0f;
    left: 100%;
  }
  84.1% {
    background: #fff;
    left: -30%;
  }
  87% {
    background: #fff;
    left: -30%;
  }
  99.9% {
    background: #fff;
    left: 100%;
  }
  100% {
    background: #f00;
    left: -30%;
  }
}

@keyframes radar {
  0% {
    background: #f00;
    left: -30%;
  }
  12% {
    background: #f00;
    left: 100%;
  }
  12.1% {
    background: #ff0;
    left: -30%;
  }
  14% {
    background: #ff0;
    left: -30%;
  }
  26% {
    background: #ff0;
    left: 100%;
  }
  26.1% {
    background: #0f0;
    left: -30%;
  }
  29% {
    background: #0f0;
    left: -30%;
  }
  41% {
    background: #0f0;
    left: 100%;
  }
  41.1% {
    background: #0ff;
    left: -30%;
  }
  43% {
    background: #0ff;
    left: -30%;
  }
  55% {
    background: #0ff;
    left: 100%;
  }
  55.1% {
    background: #00f;
    left: -30%;
  }
  58% {
    background: #00f;
    left: -30%;
  }
  70% {
    background: #00f;
    left: 100%;
  }
  70.1% {
    background: #f0f;
    left: -30%;
  }
  72% {
    background: #f0f;
    left: -30%;
  }
  84% {
    background: #f0f;
    left: 100%;
  }
  84.1% {
    background: #fff;
    left: -30%;
  }
  87% {
    background: #fff;
    left: -30%;
  }
  99.9% {
    background: #fff;
    left: 100%;
  }
  100% {
    background: #f00;
    left: -30%;
  }
}

@-webkit-keyframes radarxs {
  0% {
    background: #8c8b92;
  }
  100% {
    background: #8c8b92;
  }
}

@keyframes radarxs {
  0% {
    background: #8c8b92;
  }
  100% {
    background: #8c8b92;
  }
}

@-webkit-keyframes horizon {
  0% {
    background: #f00;
    left: -30%;
  }
  6% {
    background: #f00;
    left: 100%;
  }
  12% {
    background: #f00;
    left: -30%;
  }
  12.1% {
    background: #ff0;
    left: -30%;
  }
  14% {
    background: #ff0;
    left: -30%;
  }
  20% {
    background: #ff0;
    left: 100%;
  }
  26% {
    background: #ff0;
    left: -30%;
  }
  26.1% {
    background: #0f0;
    left: -30%;
  }
  29% {
    background: #0f0;
    left: -30%;
  }
  35% {
    background: #0f0;
    left: 100%;
  }
  41% {
    background: #0f0;
    left: -30%;
  }
  41.1% {
    background: #0ff;
    left: -30%;
  }
  43% {
    background: #0ff;
    left: -30%;
  }
  49% {
    background: #0ff;
    left: 100%;
  }
  55% {
    background: #0ff;
    left: -30%;
  }
  55.1% {
    background: #00f;
    left: -30%;
  }
  58% {
    background: #00f;
    left: -30%;
  }
  64% {
    background: #00f;
    left: 100%;
  }
  70% {
    background: #00f;
    left: -30%;
  }
  70.1% {
    background: #f0f;
    left: -30%;
  }
  72% {
    background: #f0f;
    left: -30%;
  }
  78% {
    background: #f0f;
    left: 100%;
  }
  84% {
    background: #f0f;
    left: -30%;
  }
  84.1% {
    background: #fff;
    left: -30%;
  }
  87% {
    background: #fff;
    left: -30%;
  }
  93% {
    background: #fff;
    left: 100%;
  }
  99.9% {
    background: #fff;
    left: -30%;
  }
  100% {
    background: #f00;
    left: -30%;
  }
}

@keyframes horizon {
  0% {
    background: #f00;
    left: -30%;
  }
  6% {
    background: #f00;
    left: 100%;
  }
  12% {
    background: #f00;
    left: -30%;
  }
  12.1% {
    background: #ff0;
    left: -30%;
  }
  14% {
    background: #ff0;
    left: -30%;
  }
  20% {
    background: #ff0;
    left: 100%;
  }
  26% {
    background: #ff0;
    left: -30%;
  }
  26.1% {
    background: #0f0;
    left: -30%;
  }
  29% {
    background: #0f0;
    left: -30%;
  }
  35% {
    background: #0f0;
    left: 100%;
  }
  41% {
    background: #0f0;
    left: -30%;
  }
  41.1% {
    background: #0ff;
    left: -30%;
  }
  43% {
    background: #0ff;
    left: -30%;
  }
  49% {
    background: #0ff;
    left: 100%;
  }
  55% {
    background: #0ff;
    left: -30%;
  }
  55.1% {
    background: #00f;
    left: -30%;
  }
  58% {
    background: #00f;
    left: -30%;
  }
  64% {
    background: #00f;
    left: 100%;
  }
  70% {
    background: #00f;
    left: -30%;
  }
  70.1% {
    background: #f0f;
    left: -30%;
  }
  72% {
    background: #f0f;
    left: -30%;
  }
  78% {
    background: #f0f;
    left: 100%;
  }
  84% {
    background: #f0f;
    left: -30%;
  }
  84.1% {
    background: #fff;
    left: -30%;
  }
  87% {
    background: #fff;
    left: -30%;
  }
  93% {
    background: #fff;
    left: 100%;
  }
  99.9% {
    background: #fff;
    left: -30%;
  }
  100% {
    background: #f00;
    left: -30%;
  }
}

@-webkit-keyframes horizonxs {
  0% {
    background: none;
  }
  6% {
    background: #f00;
  }
  12% {
    background: none;
  }
  12.1% {
    background: none;
  }
  14% {
    background: none;
  }
  20% {
    background: #ff0;
  }
  26% {
    background: none;
  }
  26.1% {
    background: none;
  }
  29% {
    background: none;
  }
  35% {
    background: #0f0;
  }
  41% {
    background: none;
  }
  41.1% {
    background: none;
  }
  43% {
    background: none;
  }
  49% {
    background: #0ff;
  }
  55% {
    background: none;
  }
  55.1% {
    background: none;
  }
  58% {
    background: none;
  }
  64% {
    background: #00f;
  }
  70% {
    background: none;
  }
  70.1% {
    background: none;
  }
  72% {
    background: none;
  }
  78% {
    background: #f0f;
  }
  84% {
    background: none;
  }
  84.1% {
    background: none;
  }
  87% {
    background: none;
  }
  93% {
    background: #fff;
  }
  99.9% {
    background: none;
  }
  100% {
    background: #f00;
  }
}

@keyframes horizonxs {
  0% {
    background: none;
  }
  6% {
    background: #f00;
  }
  12% {
    background: none;
  }
  12.1% {
    background: none;
  }
  14% {
    background: none;
  }
  20% {
    background: #ff0;
  }
  26% {
    background: none;
  }
  26.1% {
    background: none;
  }
  29% {
    background: none;
  }
  35% {
    background: #0f0;
  }
  41% {
    background: none;
  }
  41.1% {
    background: none;
  }
  43% {
    background: none;
  }
  49% {
    background: #0ff;
  }
  55% {
    background: none;
  }
  55.1% {
    background: none;
  }
  58% {
    background: none;
  }
  64% {
    background: #00f;
  }
  70% {
    background: none;
  }
  70.1% {
    background: none;
  }
  72% {
    background: none;
  }
  78% {
    background: #f0f;
  }
  84% {
    background: none;
  }
  84.1% {
    background: none;
  }
  87% {
    background: none;
  }
  93% {
    background: #fff;
  }
  99.9% {
    background: none;
  }
  100% {
    background: #f00;
  }
}


@-webkit-keyframes ripple {
  0% {
    opacity: 0;
    width: 50%;
    -webkit-filter: brightness(0.5);
    filter: brightness(0.5);
  }
  20% {
    opacity: 0;
    width: 50%;
    -webkit-filter: brightness(0.5);
    filter: brightness(0.5);
  }
  40% {
    opacity: 1;
    width: 100%;
    -webkit-filter: brightness(2);
    filter: brightness(2);
  }
  60% {
    opacity: 0;
    -webkit-filter: brightness(0);
    filter: brightness(0);
  }
  100% {
    opacity: 0;
    -webkit-filter: brightness(0);
    filter: brightness(0);
  }
}

@keyframes ripple {
  0% {
    opacity: 0;
    width: 50%;
    -webkit-filter: brightness(0.5);
    filter: brightness(0.5);
  }
  20% {
    opacity: 0;
    width: 50%;
    -webkit-filter: brightness(0.5);
    filter: brightness(0.5);
  }
  40% {
    opacity: 1;
    width: 100%;
    -webkit-filter: brightness(2);
    filter: brightness(2);
  }
  60% {
    opacity: 0;
    -webkit-filter: brightness(0);
    filter: brightness(0);
  }
  100% {
    opacity: 0;
    -webkit-filter: brightness(0);
    filter: brightness(0);
  }
}

@-webkit-keyframes ripplexs {
  10% {
    background: #f00;
    left: -30%;
  }
  12% {
      background: #f00;
      left: 100%;
  }
  12.1% {
      background: #ff0;
      left: -30%;
  }
  14% {
      background: #ff0;
      left: -30%;
  }
  26% {
      background: #ff0;
      left: 100%;
  }
  26.1% {
      background: #0f0;
      left: -30%;
  }
  29% {
      background: #0f0;
      left: -30%;
  }
  41% {
      background: #0f0;
      left: 100%;
  }
  41.1% {
      background: #0ff;
      left: -30%;
  }
  43% {
      background: #0ff;
      left: -30%;
  }
  55% {
      background: #0ff;
      left: 100%;
  }
  55.1% {
      background: #00f;
      left: -30%;
  }
  58% {
      background: #00f;
      left: -30%;
  }
  70% {
      background: #00f;
      left: 100%;
  }
  70.1% {
      background: #f0f;
      left: -30%;
  }
  72% {
      background: #f0f;
      left: -30%;
  }
  84% {
      background: #f0f;
      left: 100%;
  }
  84.1% {
      background: #fff;
      left: -30%;
  }
  87% {
      background: #fff;
      left: -30%;
  }
  99.9% {
      background: #fff;
      left: 100%;
  }
  100% {
      background: #f00;
      left: -30%;
  }
}

@keyframes ripplexs {
  10% {
    background: #f00;
    opacity: 0;
  }
  12% {
      background: #f00;
      opacity:1;
  }
  12.1% {
      background: #ff0;
      opacity:0;
  }
  14% {
      background: #ff0;
      opacity:0;
  }
  26% {
      background: #ff0;
      opacity:1;
  }
  26.1% {
      background: #0f0;
      opacity:0;
  }
  29% {
      background: #0f0;
      opacity:0;
  }
  41% {
      background: #0f0;
      opacity:1;
  }
  41.1% {
      background: #0ff;
      opacity:0;
  }
  43% {
      background: #0ff;
      opacity:0;
  }
  55% {
      background: #0ff;
      opacity:1
  }
  55.1% {
      background: #00f;
      opacity:0;
  }
  58% {
      background: #00f;
      opacity:0;
  }
  70% {
      background: #00f;
      opacity:1;
  }
  70.1% {
      background: #f0f;
      opacity:0;
  }
  72% {
      background: #f0f;
      opacity:0;
  }
  84% {
      background: #f0f;
      opacity:1;
  }
  84.1% {
      background: #fff;
      opacity:0;
  }
  87% {
      background: #fff;
      opacity:0;
  }
  99.9% {
      background: #fff;
      opacity:1;
  }
  100% {
      background: #f00;
      opacity:0;
  }
}

@-webkit-keyframes ripple-hand {
  0% {
    top: 0%;
  }
  10% {
    top: 3%;
  }
  20% {
    top: 0%;
  }
  100% {
    top: 0%;
  }
}

@keyframes ripple-hand {
  0% {
    top: 0%;
  }
  10% {
    top: 3%;
  }
  20% {
    top: 0%;
  }
  100% {
    top: 0%;
  }
}

@-webkit-keyframes reactive-hand {
  0% {
    top: 0%;
  }
  3% {
    top: 3%;
  }
  5.1% {
    top: 3%;
  }
  14% {
    top: 0%;
  }
  17% {
    top: 3%;
  }
  19.1% {
    top: 3%;
  }
  29% {
    top: 0%;
  }
  31% {
    top: 3%;
  }
  33.1% {
    top: 3%;
  }
  43% {
    top: 0%;
  }
  46% {
    top: 3%;
  }
  48.1% {
    top: 3%;
  }
  58% {
    top: 0%;
  }
  61% {
    top: 3%;
  }
  63.1% {
    top: 3%;
  }
  72% {
    top: 0%;
  }
  75% {
    top: 3%;
  }
  77.1% {
    top: 3%;
  }
  87% {
    top: 0%;
  }
  90% {
    top: 3%;
  }
  92.1% {
    top: 3%;
  }
  100% {
    top: 0%;
  }
}

@keyframes reactive-hand {
  0% {
    top: 0%;
  }
  3% {
    top: 3%;
  }
  5.1% {
    top: 3%;
  }
  14% {
    top: 0%;
  }
  17% {
    top: 3%;
  }
  19.1% {
    top: 3%;
  }
  29% {
    top: 0%;
  }
  31% {
    top: 3%;
  }
  33.1% {
    top: 3%;
  }
  43% {
    top: 0%;
  }
  46% {
    top: 3%;
  }
  48.1% {
    top: 3%;
  }
  58% {
    top: 0%;
  }
  61% {
    top: 3%;
  }
  63.1% {
    top: 3%;
  }
  72% {
    top: 0%;
  }
  75% {
    top: 3%;
  }
  77.1% {
    top: 3%;
  }
  87% {
    top: 0%;
  }
  90% {
    top: 3%;
  }
  92.1% {
    top: 3%;
  }
  100% {
    top: 0%;
  }
}

@-webkit-keyframes loop {
  0% {
    background: none;
  }
  2% {
    background: #d540de;
  }
  2.1% {
    background: none;
  }
  14% {
    background: none;
  }
  16% {
    background: #2a00ff;
  }
  16.1% {
    background: none;
  }
  29% {
    background: none;
  }
  31% {
    background: #00aeff;
  }
  31.1% {
    background: none;
  }
  43% {
    background: none;
  }
  45% {
    background: #00ff12;
  }
  45.1% {
    background: none;
  }
  58% {
    background: none;
  }
  60% {
    background: #f8fb04;
  }
  60.1% {
    background: none;
  }
  72% {
    background: none;
  }
  74% {
    background: #f72328;
  }
  74.1% {
    background: none;
  }
  87% {
    background: none;
  }
  89% {
    background: #fff;
  }
  89.1% {
    background: none;
  }
  100% {
    background: none;
  }
}

@keyframes loop {
  0% {
    background: none;
  }
  2% {
    background: #d540de;
  }
  2.1% {
    background: none;
  }
  14% {
    background: none;
  }
  16% {
    background: #2a00ff;
  }
  16.1% {
    background: none;
  }
  29% {
    background: none;
  }
  31% {
    background: #00aeff;
  }
  31.1% {
    background: none;
  }
  43% {
    background: none;
  }
  45% {
    background: #00ff12;
  }
  45.1% {
    background: none;
  }
  58% {
    background: none;
  }
  60% {
    background: #f8fb04;
  }
  60.1% {
    background: none;
  }
  72% {
    background: none;
  }
  74% {
    background: #f72328;
  }
  74.1% {
    background: none;
  }
  87% {
    background: none;
  }
  89% {
    background: #fff;
  }
  89.1% {
    background: none;
  }
  100% {
    background: none;
  }
}

@-webkit-keyframes singal-color {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  5.1% {
    opacity: 0;
  }
  14% {
    opacity: 0;
  }
  17% {
    opacity: 1;
  }
  19.1% {
    opacity: 0;
  }
  29% {
    opacity: 0;
  }
  31% {
    opacity: 1;
  }
  33.1% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  46% {
    opacity: 1;
  }
  48.1% {
    opacity: 0;
  }
  58% {
    opacity: 0;
  }
  61% {
    opacity: 1;
  }
  63.1% {
    opacity: 0;
  }
  72% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  77.1% {
    opacity: 0;
  }
  87% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  92.1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes singal-color {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  5.1% {
    opacity: 0;
  }
  14% {
    opacity: 0;
  }
  17% {
    opacity: 1;
  }
  19.1% {
    opacity: 0;
  }
  29% {
    opacity: 0;
  }
  31% {
    opacity: 1;
  }
  33.1% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  46% {
    opacity: 1;
  }
  48.1% {
    opacity: 0;
  }
  58% {
    opacity: 0;
  }
  61% {
    opacity: 1;
  }
  63.1% {
    opacity: 0;
  }
  72% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  77.1% {
    opacity: 0;
  }
  87% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  92.1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes gdcolorloop {
  0% {
    background: #f00;
    opacity: 0;
  }
  2% {
    background: #d540de;
    opacity: 1;
  }
  2.1% {
    background: #2a00ff;
    opacity: 0;
  }
  14% {
    background: #2a00ff;
    opacity: 0;
  }
  16% {
    background: #2a00ff;
    opacity: 1;
  }
  16.1% {
    background: #00aeff;
    opacity: 0;
  }
  29% {
    background: #00aeff;
    opacity: 0;
  }
  31% {
    background: #00aeff;
    opacity: 1;
  }
  31.1% {
    background: #00ff12;
    opacity: 0;
  }
  43% {
    background: #00ff12;
    opacity: 0;
  }
  45% {
    background: #00ff12;
    opacity: 1;
  }
  45.1% {
    background: #f8fb04;
    opacity: 0;
  }
  58% {
    background: #f8fb04;
    opacity: 0;
  }
  60% {
    background: #f8fb04;
    opacity: 1;
  }
  60.1% {
    background: #f72328;
    opacity: 0;
  }
  72% {
    background: #f72328;
    opacity: 0;
  }
  74% {
    background: #f72328;
    opacity: 1;
  }
  74.1% {
    background: #fff;
    opacity: 0;
  }
  87% {
    background: #fff;
    opacity: 0;
  }
  89% {
    background: #fff;
    opacity: 1;
  }
  89.1% {
    background: #d540de;
    opacity: 0;
  }
  100% {
    background: #d540de;
    opacity: 0;
  }
}

@keyframes gdcolorloop {
  0% {
    background: #d540de;
    opacity: 0;
  }
  2% {
    background: #d540de;
    opacity: 1;
  }
  2.1% {
    background: #2a00ff;
    opacity: 0;
  }
  14% {
    background: #2a00ff;
    opacity: 0;
  }
  16% {
    background: #2a00ff;
    opacity: 1;
  }
  16.1% {
    background: #00aeff;
    opacity: 0;
  }
  29% {
    background: #00aeff;
    opacity: 0;
  }
  31% {
    background: #00aeff;
    opacity: 1;
  }
  31.1% {
    background: #00ff12;
    opacity: 0;
  }
  43% {
    background: #00ff12;
    opacity: 0;
  }
  45% {
    background: #00ff12;
    opacity: 1;
  }
  45.1% {
    background: #f8fb04;
    opacity: 0;
  }
  58% {
    background: #f8fb04;
    opacity: 0;
  }
  60% {
    background: #f8fb04;
    opacity: 1;
  }
  60.1% {
    background: #f72328;
    opacity: 0;
  }
  72% {
    background: #f72328;
    opacity: 0;
  }
  74% {
    background: #f72328;
    opacity: 1;
  }
  74.1% {
    background: #fff;
    opacity: 0;
  }
  87% {
    background: #fff;
    opacity: 0;
  }
  89% {
    background: #fff;
    opacity: 1;
  }
  89.1% {
    background: #d540de;
    opacity: 0;
  }
  100% {
    background: #d540de;
    opacity: 0;
  }
}