/*kb-rgb*/
#kb-rgb {
  /*overlap / whirlpool*/
  /*steady*/
  /*breath*/
  /*wave*/
  /*radar*/
  /*horizon*/
  /*ripple*/
  /*reactive*/ }
  #kb-rgb button {
    outline: none; }
  #kb-rgb p {
    width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    padding-bottom: 30px; }
  #kb-rgb .kbbox {
    width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    position: relative;
    overflow: hidden;
    background: #333; }
  #kb-rgb .imgtop {
    position: relative;
    z-index: 10; }
    #kb-rgb .imgtop img{
      vertical-align: bottom;
    }
  #kb-rgb .rgbbox, #kb-rgb .rgbstyle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0; }
  #kb-rgb .rgbstyle {
    position: relative;
    display: none; }
    #kb-rgb .rgbstyle.active {
      display: block; }
  #kb-rgb #rgb-hand {
    position: absolute;
    z-index: 11;
    width: 4%;
    display: none; }
    #kb-rgb #rgb-hand.active {
      display: block; }
  #kb-rgb .rgb-hand.active {
    -webkit-animation: 3s rgb-hand ease infinite;
    animation: 3s rgb-hand ease infinite; }
  #kb-rgb #overlap.active div, #kb-rgb #whirlpool.active div {
    position: absolute;
    -webkit-filter: blur(20px);
    filter: blur(20px);
    z-index: 2; }
  #kb-rgb #overlap.active .rgb-layer1, #kb-rgb #whirlpool.active .rgb-layer1 {
    width: 45%;
    height: 70%;
    background: #f00;
    bottom: 0;
    -webkit-transform: skewY(-10deg);
    -ms-transform: skewY(-10deg);
    transform: skewY(-10deg);
    -webkit-animation: 3s overlap1 ease infinite;
    animation: 3s overlap1 ease infinite; }
  #kb-rgb #overlap.active .rgb-layer2, #kb-rgb #whirlpool.active .rgb-layer2 {
    width: 40%;
    height: 45%;
    background: #ffa500;
    top: 0;
    -webkit-animation: 3s overlap2 ease infinite;
    animation: 3s overlap2 ease infinite; }
  #kb-rgb #overlap.active .rgb-layer3, #kb-rgb #whirlpool.active .rgb-layer3 {
    width: 20%;
    height: 45%;
    background: #ff0;
    top: 0;
    left: 40%;
    -webkit-animation: 3s overlap3 ease infinite;
    animation: 3s overlap3 ease infinite; }
  #kb-rgb #overlap.active .rgb-layer4, #kb-rgb #whirlpool.active .rgb-layer4 {
    width: 22%;
    height: 50%;
    background: #0f0;
    top: 0;
    left: 60%;
    -webkit-animation: 3s overlap4 ease infinite;
    animation: 3s overlap4 ease infinite; }
  #kb-rgb #overlap.active .rgb-layer5, #kb-rgb #whirlpool.active .rgb-layer5 {
    width: 20%;
    height: 100%;
    background: #00f;
    top: 0;
    left: 80%;
    -webkit-animation: 3s overlap5 ease infinite;
    animation: 3s overlap5 ease infinite; }
  #kb-rgb #overlap.active .rgb-layer6, #kb-rgb #whirlpool.active .rgb-layer6 {
    width: 16.5%;
    height: 40%;
    background: #7d00ff;
    bottom: 0;
    left: 65%;
    overflow: hidden;
    -webkit-animation: 3s overlap6 ease infinite;
    animation: 3s overlap6 ease infinite; }
  #kb-rgb #overlap.active .rgb-layer7, #kb-rgb #whirlpool.active .rgb-layer7 {
    width: 17.5%;
    height: 50%;
    background: #f0f;
    bottom: 0;
    left: 50%;
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-animation: 3s overlap7 ease infinite;
    animation: 3s overlap7 ease infinite; }
  #kb-rgb #overlap.active .rgb-layer8, #kb-rgb #whirlpool.active .rgb-layer8 {
    width: 8.5%;
    height: 65%;
    background: #fff;
    bottom: 0;
    left: 44%;
    -webkit-transform: skewY(-30deg);
    -ms-transform: skewY(-30deg);
    transform: skewY(-30deg);
    -webkit-animation: 3s overlap8 ease infinite;
    animation: 3s overlap8 ease infinite; }
  #kb-rgb #overlap.active .rgb-layertab, #kb-rgb #whirlpool.active .rgb-layertab {
    background: #fff;
    width: 20%;
    height: 100%;
    -webkit-animation: 5s overlap-tab ease infinite;
    animation: 5s overlap-tab ease infinite;
    z-index: 8;
    -webkit-filter: blur(30px);
    filter: blur(30px); }
  #kb-rgb .rgb-overlap-hand.active {
    -webkit-animation: 5s overlap-hand ease infinite;
    animation: 5s overlap-hand ease infinite; }
  #kb-rgb #steady {
    background: #f00; }
  #kb-rgb #breath {
    background: #f00;
    -webkit-animation: 2s breath ease infinite;
    animation: 2s breath ease infinite; }
    #kb-rgb #breath.rgb {
      -webkit-animation: 5s breath-rgb ease infinite;
      animation: 5s breath-rgb ease infinite; }
  #kb-rgb #wave.active {
    background: #f00;
    position: relative;
    -webkit-animation: 2s wave ease infinite;
    animation: 2s wave ease infinite; }
    #kb-rgb #wave.active.rgb {
      background: url(//storage-asset.msi.com/global/picture/image/feature/multimeda/keyboard/GK50-LP/rgb-wave.gif) top right no-repeat ;
      background-size: cover;
      -webkit-animation: none;
      animation: none;
      width: 100%; }
  #kb-rgb #radar.active {
    background: #f00;
    -webkit-filter: blur(50px);
    filter: blur(50px);
    -webkit-animation: 1s radar ease infinite;
    animation: 1s radar ease infinite; }
    #kb-rgb #radar.active.rgb {
      -webkit-animation: 3s radar-rgb ease infinite;
      animation: 3s radar-rgb ease infinite; }
  #kb-rgb #horizon.active.single {
    background: #f00;
    -webkit-animation: 3s horizon ease infinite;
    animation: 3s horizon ease infinite; }
  #kb-rgb #horizon.active.rgb {
    height: 13.8%;
    top: 76.5%;
    width: 32%;
    left: 15%;
    background: #00f;
    -webkit-animation: 3s horizon-rgb ease infinite;
    animation: 3s horizon-rgb ease infinite; }
  #kb-rgb #ripple.active {
    border-radius: 50%;
    -webkit-filter: blur(20px);
    filter: blur(20px); }
    #kb-rgb #ripple.active.single {
      background: #f00;
      -webkit-animation: 3s ripple ease infinite;
      animation: 3s ripple ease infinite; }
    #kb-rgb #ripple.active.rgb {
      -webkit-animation: 3s ripple-rgb ease infinite;
      animation: 3s ripple-rgb ease infinite; }
    #kb-rgb #ripple.active:after {
      content: "";
      display: block;
      position: absolute;
      background: #333;
      z-index: 2;
      -webkit-filter: blur(0px);
      filter: blur(0px);
      -webkit-animation: 3s ripple-shadow ease infinite;
      animation: 3s ripple-shadow ease infinite;
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s; }
  #kb-rgb #reactive.active {
    border-radius: 50%;
    -webkit-filter: blur(20px);
    filter: blur(20px); }
    #kb-rgb #reactive.active.single {
      background: #f00;
      -webkit-animation: 3s reactive ease infinite;
      animation: 3s reactive ease infinite; }
    #kb-rgb #reactive.active.rgb {
      -webkit-animation: 3s reactive-rgb ease infinite;
      animation: 3s reactive-rgb ease infinite; }
  #kb-rgb .colorbox {
    height: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    max-width: 600px;
    visibility: hidden; }
    #kb-rgb .colorbox.on {
      visibility: visible; }
    #kb-rgb .colorbox button {
      width: 30px;
      height: 30px;
      border-radius: 30px;
      opacity: .5; }
      #kb-rgb .colorbox button:nth-child(1) {
        background: url(//storage-asset.msi.com/global/picture/image/feature/multimeda/keyboard/GK50-LP/bg-rgb.png) center center no-repeat ;
        background-size: cover; }
      #kb-rgb .colorbox button:nth-child(2) {
        background: #f00; }
      #kb-rgb .colorbox button:nth-child(3) {
        background: #ffa500; }
      #kb-rgb .colorbox button:nth-child(4) {
        background: #ff0; }
      #kb-rgb .colorbox button:nth-child(5) {
        background: #0f0; }
      #kb-rgb .colorbox button:nth-child(6) {
        background: #00f; }
      #kb-rgb .colorbox button:nth-child(7) {
        background: #7d00ff; }
      #kb-rgb .colorbox button:nth-child(8) {
        background: #f0f; }
      #kb-rgb .colorbox button:nth-child(9) {
        background: #fff; }
      #kb-rgb .colorbox button.active, #kb-rgb .colorbox button:hover {
        opacity: 1; }
    #kb-rgb .colorbox.norgb button:first-child {
      display: none; }
  #kb-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: 150px;
    padding: 10px 15px;
    margin: 5px;
    border: #333 1px solid; }
    #kb-rgb .btbox button.active, #kb-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%); }

@-webkit-keyframes overlap1 {
  0% {
    background: #f00; }
  12% {
    background: #f00; }
  12.5% {
    background: #fff; }
  24.5% {
    background: #fff; }
  25% {
    background: #f0f; }
  37% {
    background: #f0f; }
  37.5% {
    background: #7d00ff; }
  49.5% {
    background: #7d00ff; }
  50% {
    background: #00f; }
  62% {
    background: #00f; }
  62.5% {
    background: #0f0; }
  74.5% {
    background: #0f0; }
  75% {
    background: #ff0; }
  87% {
    background: #ff0; }
  87.5% {
    background: #ffa500; }
  99.5% {
    background: #ffa500; }
  100% {
    background: #f00; } }

@keyframes overlap1 {
  0% {
    background: #f00; }
  12% {
    background: #f00; }
  12.5% {
    background: #fff; }
  24.5% {
    background: #fff; }
  25% {
    background: #f0f; }
  37% {
    background: #f0f; }
  37.5% {
    background: #7d00ff; }
  49.5% {
    background: #7d00ff; }
  50% {
    background: #00f; }
  62% {
    background: #00f; }
  62.5% {
    background: #0f0; }
  74.5% {
    background: #0f0; }
  75% {
    background: #ff0; }
  87% {
    background: #ff0; }
  87.5% {
    background: #ffa500; }
  99.5% {
    background: #ffa500; }
  100% {
    background: #f00; } }

@-webkit-keyframes overlap2 {
  0% {
    background: #ffa500; }
  12% {
    background: #ffa500; }
  12.5% {
    background: #f00; }
  24.5% {
    background: #f00; }
  25% {
    background: #fff; }
  37% {
    background: #fff; }
  37.5% {
    background: #f0f; }
  49.5% {
    background: #f0f; }
  50% {
    background: #7d00ff; }
  62% {
    background: #7d00ff; }
  62.5% {
    background: #00f; }
  74.5% {
    background: #00f; }
  75% {
    background: #0f0; }
  87% {
    background: #0f0; }
  87.5% {
    background: #ff0; }
  99.5% {
    background: #ff0; }
  100% {
    background: #ffa500; } }

@keyframes overlap2 {
  0% {
    background: #ffa500; }
  12% {
    background: #ffa500; }
  12.5% {
    background: #f00; }
  24.5% {
    background: #f00; }
  25% {
    background: #fff; }
  37% {
    background: #fff; }
  37.5% {
    background: #f0f; }
  49.5% {
    background: #f0f; }
  50% {
    background: #7d00ff; }
  62% {
    background: #7d00ff; }
  62.5% {
    background: #00f; }
  74.5% {
    background: #00f; }
  75% {
    background: #0f0; }
  87% {
    background: #0f0; }
  87.5% {
    background: #ff0; }
  99.5% {
    background: #ff0; }
  100% {
    background: #ffa500; } }

@-webkit-keyframes overlap3 {
  0% {
    background: #ff0; }
  12% {
    background: #ff0; }
  12.5% {
    background: #ffa500; }
  24.5% {
    background: #ffa500; }
  25% {
    background: #f00; }
  37% {
    background: #f00; }
  37.5% {
    background: #fff; }
  49.5% {
    background: #fff; }
  50% {
    background: #f0f; }
  62% {
    background: #f0f; }
  62.5% {
    background: #7d00ff; }
  74.5% {
    background: #7d00ff; }
  75% {
    background: #00f; }
  87% {
    background: #00f; }
  87.5% {
    background: #0f0; }
  99.5% {
    background: #0f0; }
  100% {
    background: #ff0; } }

@keyframes overlap3 {
  0% {
    background: #ff0; }
  12% {
    background: #ff0; }
  12.5% {
    background: #ffa500; }
  24.5% {
    background: #ffa500; }
  25% {
    background: #f00; }
  37% {
    background: #f00; }
  37.5% {
    background: #fff; }
  49.5% {
    background: #fff; }
  50% {
    background: #f0f; }
  62% {
    background: #f0f; }
  62.5% {
    background: #7d00ff; }
  74.5% {
    background: #7d00ff; }
  75% {
    background: #00f; }
  87% {
    background: #00f; }
  87.5% {
    background: #0f0; }
  99.5% {
    background: #0f0; }
  100% {
    background: #ff0; } }

@-webkit-keyframes overlap4 {
  0% {
    background: #0f0; }
  12% {
    background: #0f0; }
  12.5% {
    background: #ff0; }
  24.5% {
    background: #ff0; }
  25% {
    background: #ffa500; }
  37% {
    background: #ffa500; }
  37.5% {
    background: #f00; }
  49.5% {
    background: #f00; }
  50% {
    background: #fff; }
  62% {
    background: #fff; }
  62.5% {
    background: #f0f; }
  74.5% {
    background: #f0f; }
  75% {
    background: #7d00ff; }
  87% {
    background: #7d00ff; }
  87.5% {
    background: #00f; }
  99.5% {
    background: #00f; }
  100% {
    background: #0f0; } }

@keyframes overlap4 {
  0% {
    background: #0f0; }
  12% {
    background: #0f0; }
  12.5% {
    background: #ff0; }
  24.5% {
    background: #ff0; }
  25% {
    background: #ffa500; }
  37% {
    background: #ffa500; }
  37.5% {
    background: #f00; }
  49.5% {
    background: #f00; }
  50% {
    background: #fff; }
  62% {
    background: #fff; }
  62.5% {
    background: #f0f; }
  74.5% {
    background: #f0f; }
  75% {
    background: #7d00ff; }
  87% {
    background: #7d00ff; }
  87.5% {
    background: #00f; }
  99.5% {
    background: #00f; }
  100% {
    background: #0f0; } }

@-webkit-keyframes overlap5 {
  0% {
    background: #00f; }
  12% {
    background: #00f; }
  12.5% {
    background: #0f0; }
  24.5% {
    background: #0f0; }
  25% {
    background: #ff0; }
  37% {
    background: #ff0; }
  37.5% {
    background: #ffa500; }
  49.5% {
    background: #ffa500; }
  50% {
    background: #f00; }
  62% {
    background: #f00; }
  62.5% {
    background: #fff; }
  74.5% {
    background: #fff; }
  75% {
    background: #f0f; }
  87% {
    background: #f0f; }
  87.5% {
    background: #7d00ff; }
  99.5% {
    background: #7d00ff; }
  100% {
    background: #00f; } }

@keyframes overlap5 {
  0% {
    background: #00f; }
  12% {
    background: #00f; }
  12.5% {
    background: #0f0; }
  24.5% {
    background: #0f0; }
  25% {
    background: #ff0; }
  37% {
    background: #ff0; }
  37.5% {
    background: #ffa500; }
  49.5% {
    background: #ffa500; }
  50% {
    background: #f00; }
  62% {
    background: #f00; }
  62.5% {
    background: #fff; }
  74.5% {
    background: #fff; }
  75% {
    background: #f0f; }
  87% {
    background: #f0f; }
  87.5% {
    background: #7d00ff; }
  99.5% {
    background: #7d00ff; }
  100% {
    background: #00f; } }

@-webkit-keyframes overlap6 {
  0% {
    background: #7d00ff; }
  12% {
    background: #7d00ff; }
  12.5% {
    background: #00f; }
  24.5% {
    background: #00f; }
  25% {
    background: #0f0; }
  37% {
    background: #0f0; }
  37.5% {
    background: #ff0; }
  49.5% {
    background: #ff0; }
  50% {
    background: #ffa500; }
  62% {
    background: #ffa500; }
  62.5% {
    background: #f00; }
  74.5% {
    background: #f00; }
  75% {
    background: #fff; }
  87% {
    background: #fff; }
  87.5% {
    background: #f0f; }
  99.5% {
    background: #f0f; }
  100% {
    background: #7d00ff; } }

@keyframes overlap6 {
  0% {
    background: #7d00ff; }
  12% {
    background: #7d00ff; }
  12.5% {
    background: #00f; }
  24.5% {
    background: #00f; }
  25% {
    background: #0f0; }
  37% {
    background: #0f0; }
  37.5% {
    background: #ff0; }
  49.5% {
    background: #ff0; }
  50% {
    background: #ffa500; }
  62% {
    background: #ffa500; }
  62.5% {
    background: #f00; }
  74.5% {
    background: #f00; }
  75% {
    background: #fff; }
  87% {
    background: #fff; }
  87.5% {
    background: #f0f; }
  99.5% {
    background: #f0f; }
  100% {
    background: #7d00ff; } }

@-webkit-keyframes overlap7 {
  0% {
    background: #f0f; }
  12% {
    background: #f0f; }
  12.5% {
    background: #7d00ff; }
  24.5% {
    background: #7d00ff; }
  25% {
    background: #00f; }
  37% {
    background: #00f; }
  37.5% {
    background: #0f0; }
  49.5% {
    background: #0f0; }
  50% {
    background: #ff0; }
  62% {
    background: #ff0; }
  62.5% {
    background: #ffa500; }
  74.5% {
    background: #ffa500; }
  75% {
    background: #f00; }
  87% {
    background: #f00; }
  87.5% {
    background: #fff; }
  99.5% {
    background: #fff; }
  100% {
    background: #f0f; } }

@keyframes overlap7 {
  0% {
    background: #f0f; }
  12% {
    background: #f0f; }
  12.5% {
    background: #7d00ff; }
  24.5% {
    background: #7d00ff; }
  25% {
    background: #00f; }
  37% {
    background: #00f; }
  37.5% {
    background: #0f0; }
  49.5% {
    background: #0f0; }
  50% {
    background: #ff0; }
  62% {
    background: #ff0; }
  62.5% {
    background: #ffa500; }
  74.5% {
    background: #ffa500; }
  75% {
    background: #f00; }
  87% {
    background: #f00; }
  87.5% {
    background: #fff; }
  99.5% {
    background: #fff; }
  100% {
    background: #f0f; } }

@-webkit-keyframes overlap8 {
  0% {
    background: #fff; }
  12% {
    background: #fff; }
  12.5% {
    background: #f0f; }
  24.5% {
    background: #f0f; }
  25% {
    background: #7d00ff; }
  37% {
    background: #7d00ff; }
  37.5% {
    background: #00f; }
  49.5% {
    background: #00f; }
  50% {
    background: #0f0; }
  62% {
    background: #0f0; }
  62.5% {
    background: #ff0; }
  74.5% {
    background: #ff0; }
  75% {
    background: #ffa500; }
  87% {
    background: #ffa500; }
  87.5% {
    background: #f00; }
  99.5% {
    background: #f00; }
  100% {
    background: #fff; } }

@keyframes overlap8 {
  0% {
    background: #fff; }
  12% {
    background: #fff; }
  12.5% {
    background: #f0f; }
  24.5% {
    background: #f0f; }
  25% {
    background: #7d00ff; }
  37% {
    background: #7d00ff; }
  37.5% {
    background: #00f; }
  49.5% {
    background: #00f; }
  50% {
    background: #0f0; }
  62% {
    background: #0f0; }
  62.5% {
    background: #ff0; }
  74.5% {
    background: #ff0; }
  75% {
    background: #ffa500; }
  87% {
    background: #ffa500; }
  87.5% {
    background: #f00; }
  99.5% {
    background: #f00; }
  100% {
    background: #fff; } }

@-webkit-keyframes overlap-tab {
  0% {
    opacity: 0;
    left: 0%; }
  5% {
    opacity: 1;
    left: 0%; }
  40% {
    opacity: 1;
    left: 100%; }
  40.1% {
    opacity: 0;
    left: 100%; }
  54.9% {
    opacity: 0;
    left: 80%; }
  55% {
    opacity: 1;
    left: 80%; }
  90% {
    opacity: 1;
    left: -20%; }
  90.1% {
    opacity: 0;
    left: -20%; }
  100% {
    opacity: 0;
    left: 0%; } }

@keyframes overlap-tab {
  0% {
    opacity: 0;
    left: 0%; }
  5% {
    opacity: 1;
    left: 0%; }
  40% {
    opacity: 1;
    left: 100%; }
  40.1% {
    opacity: 0;
    left: 100%; }
  54.9% {
    opacity: 0;
    left: 80%; }
  55% {
    opacity: 1;
    left: 80%; }
  90% {
    opacity: 1;
    left: -20%; }
  90.1% {
    opacity: 0;
    left: -20%; }
  100% {
    opacity: 0;
    left: 0%; } }

@-webkit-keyframes overlap-hand {
  0% {
    opacity: 1;
    left: 1%;
    top: 27%; }
  15% {
    opacity: 1;
    left: 1%;
    top: 25%; }
  15.1% {
    opacity: 0;
    left: 1%;
    top: 25%; }
  49.9% {
    opacity: 0;
    top: 33%;
    left: 95.5%; }
  50% {
    opacity: 1;
    top: 33%;
    left: 95.5%; }
  65% {
    opacity: 1;
    top: 31%;
    left: 95.5%; }
  65.1% {
    opacity: 0;
    top: 31%;
    left: 95.5%; }
  100% {
    opacity: 0;
    left: 1%;
    top: 27%; } }

@keyframes overlap-hand {
  0% {
    opacity: 1;
    left: 1%;
    top: 27%; }
  15% {
    opacity: 1;
    left: 1%;
    top: 25%; }
  15.1% {
    opacity: 0;
    left: 1%;
    top: 25%; }
  49.9% {
    opacity: 0;
    top: 33%;
    left: 95.5%; }
  50% {
    opacity: 1;
    top: 33%;
    left: 95.5%; }
  65% {
    opacity: 1;
    top: 31%;
    left: 95.5%; }
  65.1% {
    opacity: 0;
    top: 31%;
    left: 95.5%; }
  100% {
    opacity: 0;
    left: 1%;
    top: 27%; } }

@-webkit-keyframes breath {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes breath {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes breath-rgb {
  0% {
    background: #f00;
    opacity: 1; }
  13% {
    background: #ffa500;
    opacity: .8; }
  14.5% {
    background: #ffa500;
    opacity: 1; }
  27.5% {
    background: #ff0;
    opacity: .8; }
  29% {
    background: #ff0;
    opacity: 1; }
  42% {
    background: #0f0;
    opacity: .8; }
  43.5% {
    background: #0f0;
    opacity: 1; }
  56.5% {
    background: #00f;
    opacity: .8; }
  58% {
    background: #00f;
    opacity: 1; }
  71% {
    background: #7d00ff;
    opacity: .8; }
  72.5% {
    background: #7d00ff;
    opacity: 1; }
  85.5% {
    background: #f0f;
    opacity: .8; }
  87% {
    background: #f0f;
    opacity: 1; }
  100% {
    background: #f00;
    opacity: .8; } }

@keyframes breath-rgb {
  0% {
    background: #f00;
    opacity: 1; }
  13% {
    background: #ffa500;
    opacity: .8; }
  14.5% {
    background: #ffa500;
    opacity: 1; }
  27.5% {
    background: #ff0;
    opacity: .8; }
  29% {
    background: #ff0;
    opacity: 1; }
  42% {
    background: #0f0;
    opacity: .8; }
  43.5% {
    background: #0f0;
    opacity: 1; }
  56.5% {
    background: #00f;
    opacity: .8; }
  58% {
    background: #00f;
    opacity: 1; }
  71% {
    background: #7d00ff;
    opacity: .8; }
  72.5% {
    background: #7d00ff;
    opacity: 1; }
  85.5% {
    background: #f0f;
    opacity: .8; }
  87% {
    background: #f0f;
    opacity: 1; }
  100% {
    background: #f00;
    opacity: .8; } }

@-webkit-keyframes wave {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }

@keyframes wave {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }

@-webkit-keyframes radar {
  0% {
    width: 40%;
    height: 70%;
    top: 0;
    left: 0; }
  12.5% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 30%; }
  25% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 50%; }
  37.5% {
    width: 40%;
    height: 60%;
    top: 0;
    left: 60%; }
  50% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 45%; }
  62.5% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 40%; }
  75% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 35%; }
  87.5% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 0%; }
  100% {
    width: 40%;
    height: 70%;
    top: 0;
    left: 0; } }

@keyframes radar {
  0% {
    width: 40%;
    height: 70%;
    top: 0;
    left: 0; }
  12.5% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 30%; }
  25% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 50%; }
  37.5% {
    width: 40%;
    height: 60%;
    top: 0;
    left: 60%; }
  50% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 45%; }
  62.5% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 40%; }
  75% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 35%; }
  87.5% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 0%; }
  100% {
    width: 40%;
    height: 70%;
    top: 0;
    left: 0; } }

@-webkit-keyframes radar-rgb {
  0% {
    width: 40%;
    height: 70%;
    top: 0;
    left: 0;
    background: #0f0; }
  6.25% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 30%;
    background: #0f0; }
  12.5% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 50%;
    background: #00ff9e; }
  18.75% {
    width: 40%;
    height: 60%;
    top: 0;
    left: 60%;
    background: #00ffc8; }
  25% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 45%;
    background: #0097ff; }
  31.5% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 40%;
    background: #00f; }
  37.5% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 35%;
    background: #3c00ff; }
  43.75% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 0%;
    background: #3c00ff; }
  50% {
    width: 40%;
    height: 70%;
    top: 0;
    left: 0;
    background: #7d00ff; }
  56.25% {
    width: 40%;
    height: 70%;
    top: 0;
    left: 0;
    background: #cb00ff; }
  62.5% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 30%;
    background: #f0f; }
  68.75% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 50%;
    background: #f11ece; }
  75% {
    width: 40%;
    height: 60%;
    top: 0;
    left: 60%;
    background: #f11e68; }
  81.25% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 45%;
    background: #f00; }
  87.5% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 40%;
    background: #fff; }
  93.75% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 35%;
    background: #b2fdae; }
  100% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 0%;
    background: #f00; } }

@keyframes radar-rgb {
  0% {
    width: 40%;
    height: 70%;
    top: 0;
    left: 0;
    background: #0f0; }
  6.25% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 30%;
    background: #0f0; }
  12.5% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 50%;
    background: #00ff9e; }
  18.75% {
    width: 40%;
    height: 60%;
    top: 0;
    left: 60%;
    background: #00ffc8; }
  25% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 45%;
    background: #0097ff; }
  31.5% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 40%;
    background: #00f; }
  37.5% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 35%;
    background: #3c00ff; }
  43.75% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 0%;
    background: #3c00ff; }
  50% {
    width: 40%;
    height: 70%;
    top: 0;
    left: 0;
    background: #7d00ff; }
  56.25% {
    width: 40%;
    height: 70%;
    top: 0;
    left: 0;
    background: #cb00ff; }
  62.5% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 30%;
    background: #f0f; }
  68.75% {
    width: 20%;
    height: 50%;
    top: 0;
    left: 50%;
    background: #f11ece; }
  75% {
    width: 40%;
    height: 60%;
    top: 0;
    left: 60%;
    background: #f11e68; }
  81.25% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 45%;
    background: #f00; }
  87.5% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 40%;
    background: #fff; }
  93.75% {
    width: 10%;
    height: 50%;
    top: 50%;
    left: 35%;
    background: #b2fdae; }
  100% {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 0%;
    background: #f00; } }

@-webkit-keyframes horizon-rgb {
  0% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    background: #f0f;
    opacity: 0; }
  8.1% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    background: #f0f;
    opacity: 1; }
  23% {
    height: 14%;
    top: 35%;
    width: 100%;
    left: 0%;
    background: #f0f;
    opacity: 1; }
  23.1% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    background: #f0f;
    opacity: 0; }
  41% {
    height: 13.8%;
    top: 49%;
    width: 22.5%;
    left: 8%;
    background: #ff0;
    opacity: 0; }
  41.1% {
    height: 13.8%;
    top: 49%;
    width: 22.5%;
    left: 8%;
    background: #ff0;
    opacity: 1; }
  56% {
    height: 13.8%;
    top: 49%;
    width: 100%;
    left: 0%;
    background: #ff0;
    opacity: 1; }
  56.1% {
    height: 13.8%;
    top: 49%;
    width: 100%;
    left: 0%;
    background: #ff0;
    opacity: 0; }
  74% {
    height: 13.8%;
    top: 76.5%;
    width: 32%;
    left: 15%;
    background: #00f;
    opacity: 0; }
  74.1% {
    height: 13.8%;
    top: 76.5%;
    width: 32%;
    left: 15%;
    background: #00f;
    opacity: 1; }
  90% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    background: #00f;
    opacity: 1; }
  90.1% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    background: #00f;
    opacity: 0; }
  100% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    background: #00f;
    opacity: 0; } }

@keyframes horizon-rgb {
  0% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    background: #f0f;
    opacity: 0; }
  8.1% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    background: #f0f;
    opacity: 1; }
  23% {
    height: 14%;
    top: 35%;
    width: 100%;
    left: 0%;
    background: #f0f;
    opacity: 1; }
  23.1% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    background: #f0f;
    opacity: 0; }
  41% {
    height: 13.8%;
    top: 49%;
    width: 22.5%;
    left: 8%;
    background: #ff0;
    opacity: 0; }
  41.1% {
    height: 13.8%;
    top: 49%;
    width: 22.5%;
    left: 8%;
    background: #ff0;
    opacity: 1; }
  56% {
    height: 13.8%;
    top: 49%;
    width: 100%;
    left: 0%;
    background: #ff0;
    opacity: 1; }
  56.1% {
    height: 13.8%;
    top: 49%;
    width: 100%;
    left: 0%;
    background: #ff0;
    opacity: 0; }
  74% {
    height: 13.8%;
    top: 76.5%;
    width: 32%;
    left: 15%;
    background: #00f;
    opacity: 0; }
  74.1% {
    height: 13.8%;
    top: 76.5%;
    width: 32%;
    left: 15%;
    background: #00f;
    opacity: 1; }
  90% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    background: #00f;
    opacity: 1; }
  90.1% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    background: #00f;
    opacity: 0; }
  100% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    background: #00f;
    opacity: 0; } }

@-webkit-keyframes horizon {
  0% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    opacity: 0; }
  8.1% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    opacity: 1; }
  23% {
    height: 14%;
    top: 35%;
    width: 100%;
    left: 0%;
    opacity: 1; }
  23.1% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    opacity: 0; }
  41% {
    height: 13.8%;
    top: 49%;
    width: 22.5%;
    left: 8%;
    opacity: 0; }
  41.1% {
    height: 13.8%;
    top: 49%;
    width: 22.5%;
    left: 8%;
    opacity: 1; }
  56% {
    height: 13.8%;
    top: 49%;
    width: 100%;
    left: 0%;
    opacity: 1; }
  56.1% {
    height: 13.8%;
    top: 49%;
    width: 100%;
    left: 0%;
    opacity: 0; }
  74% {
    height: 13.8%;
    top: 76.5%;
    width: 32%;
    left: 15%;
    opacity: 0; }
  74.1% {
    height: 13.8%;
    top: 76.5%;
    width: 32%;
    left: 15%;
    opacity: 1; }
  90% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    opacity: 1; }
  90.1% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    opacity: 0; }
  100% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    opacity: 0; } }

@keyframes horizon {
  0% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    opacity: 0; }
  8.1% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    opacity: 1; }
  23% {
    height: 14%;
    top: 35%;
    width: 100%;
    left: 0%;
    opacity: 1; }
  23.1% {
    height: 14%;
    top: 35%;
    width: 25%;
    left: 28%;
    opacity: 0; }
  41% {
    height: 13.8%;
    top: 49%;
    width: 22.5%;
    left: 8%;
    opacity: 0; }
  41.1% {
    height: 13.8%;
    top: 49%;
    width: 22.5%;
    left: 8%;
    opacity: 1; }
  56% {
    height: 13.8%;
    top: 49%;
    width: 100%;
    left: 0%;
    opacity: 1; }
  56.1% {
    height: 13.8%;
    top: 49%;
    width: 100%;
    left: 0%;
    opacity: 0; }
  74% {
    height: 13.8%;
    top: 76.5%;
    width: 32%;
    left: 15%;
    opacity: 0; }
  74.1% {
    height: 13.8%;
    top: 76.5%;
    width: 32%;
    left: 15%;
    opacity: 1; }
  90% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    opacity: 1; }
  90.1% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    opacity: 0; }
  100% {
    height: 13.8%;
    top: 76.5%;
    width: 100%;
    left: 0%;
    opacity: 0; } }

@-webkit-keyframes ripple {
  0% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  8.1% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  23% {
    width: 160%;
    height: 140%;
    top: -20%;
    left: -30%;
    opacity: 1; }
  23.1% {
    width: 160%;
    height: 140%;
    top: -20%;
    left: -30%;
    opacity: 0; }
  41% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  41.1% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  56% {
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 1; }
  56.1% {
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 0; }
  74% {
    width: 20%;
    height: 50%;
    top: 60%;
    left: 22%;
    opacity: 0; }
  74.1% {
    width: 20%;
    height: 50%;
    top: 60%;
    left: 22%;
    opacity: 1; }
  90% {
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 1; }
  90.1% {
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 0; }
  100% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; } }

@keyframes ripple {
  0% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  8.1% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  23% {
    width: 160%;
    height: 140%;
    top: -20%;
    left: -30%;
    opacity: 1; }
  23.1% {
    width: 160%;
    height: 140%;
    top: -20%;
    left: -30%;
    opacity: 0; }
  41% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  41.1% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  56% {
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 1; }
  56.1% {
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 0; }
  74% {
    width: 20%;
    height: 50%;
    top: 60%;
    left: 22%;
    opacity: 0; }
  74.1% {
    width: 20%;
    height: 50%;
    top: 60%;
    left: 22%;
    opacity: 1; }
  90% {
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 1; }
  90.1% {
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 0; }
  100% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; } }

@-webkit-keyframes ripple-rgb {
  0% {
    background: #7d00ff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  8.1% {
    background: #7d00ff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  23% {
    background: #7d00ff;
    width: 160%;
    height: 140%;
    top: -20%;
    left: -30%;
    opacity: 1; }
  23.1% {
    background: #7d00ff;
    width: 160%;
    height: 140%;
    top: -20%;
    left: -30%;
    opacity: 0; }
  41% {
    background: #ffa500;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  41.1% {
    background: #ffa500;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  56% {
    background: #ffa500;
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 1; }
  56.1% {
    background: #ffa500;
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 0; }
  74% {
    background: #0f0;
    width: 20%;
    height: 50%;
    top: 60%;
    left: 22%;
    opacity: 0; }
  74.1% {
    background: #0f0;
    width: 20%;
    height: 50%;
    top: 60%;
    left: 22%;
    opacity: 1; }
  90% {
    background: #0f0;
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 1; }
  90.1% {
    background: #0f0;
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 0; }
  100% {
    background: #7d00ff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; } }

@keyframes ripple-rgb {
  0% {
    background: #7d00ff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  8.1% {
    background: #7d00ff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  23% {
    background: #7d00ff;
    width: 160%;
    height: 140%;
    top: -20%;
    left: -30%;
    opacity: 1; }
  23.1% {
    background: #7d00ff;
    width: 160%;
    height: 140%;
    top: -20%;
    left: -30%;
    opacity: 0; }
  41% {
    background: #ffa500;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  41.1% {
    background: #ffa500;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  56% {
    background: #ffa500;
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 1; }
  56.1% {
    background: #ffa500;
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 0; }
  74% {
    background: #0f0;
    width: 20%;
    height: 50%;
    top: 60%;
    left: 22%;
    opacity: 0; }
  74.1% {
    background: #0f0;
    width: 20%;
    height: 50%;
    top: 60%;
    left: 22%;
    opacity: 1; }
  90% {
    background: #0f0;
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 1; }
  90.1% {
    background: #0f0;
    width: 120%;
    height: 140%;
    top: -20%;
    left: -10%;
    opacity: 0; }
  100% {
    background: #7d00ff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; } }

@-webkit-keyframes ripple-shadow {
  0% {
    width: 20%;
    height: 40%;
    top: 22%;
    left: 45%;
    opacity: 0; }
  8.1% {
    width: 20%;
    height: 40%;
    top: 22%;
    left: 45%;
    opacity: 1; }
  23% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 1; }
  23.1% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0; }
  41% {
    width: 20%;
    height: 40%;
    top: 30%;
    left: 40%;
    opacity: 0; }
  41.1% {
    width: 20%;
    height: 40%;
    top: 30%;
    left: 40%;
    opacity: 1; }
  56% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 1; }
  56.1% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0; }
  74% {
    width: 20%;
    height: 40%;
    top: 30%;
    left: 35%;
    opacity: 0; }
  74.1% {
    width: 20%;
    height: 40%;
    top: 30%;
    left: 35%;
    opacity: 1; }
  90% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 1; }
  90.1% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0; }
  100% {
    width: 20%;
    height: 40%;
    top: 22%;
    left: 45%;
    opacity: 0; } }

@keyframes ripple-shadow {
  0% {
    width: 20%;
    height: 40%;
    top: 22%;
    left: 45%;
    opacity: 0; }
  8.1% {
    width: 20%;
    height: 40%;
    top: 22%;
    left: 45%;
    opacity: 1; }
  23% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 1; }
  23.1% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0; }
  41% {
    width: 20%;
    height: 40%;
    top: 30%;
    left: 40%;
    opacity: 0; }
  41.1% {
    width: 20%;
    height: 40%;
    top: 30%;
    left: 40%;
    opacity: 1; }
  56% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 1; }
  56.1% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0; }
  74% {
    width: 20%;
    height: 40%;
    top: 30%;
    left: 35%;
    opacity: 0; }
  74.1% {
    width: 20%;
    height: 40%;
    top: 30%;
    left: 35%;
    opacity: 1; }
  90% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 1; }
  90.1% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0; }
  100% {
    width: 20%;
    height: 40%;
    top: 22%;
    left: 45%;
    opacity: 0; } }

@-webkit-keyframes reactive {
  0% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  8.1% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  14% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  14.1% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  40.9% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  41% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  47% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  47.1% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  73.9% {
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; }
  74% {
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 1; }
  80% {
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 1; }
  80.1% {
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; }
  100% {
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; } }

@keyframes reactive {
  0% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  8.1% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  14% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  14.1% {
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  40.9% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  41% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  47% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  47.1% {
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  73.9% {
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; }
  74% {
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 1; }
  80% {
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 1; }
  80.1% {
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; }
  100% {
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; } }

@-webkit-keyframes reactive-rgb {
  0% {
    background: #fff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  8.1% {
    background: #fff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  14% {
    background: #fff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  14.1% {
    background: #fff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  40.9% {
    background: #ff0;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  41% {
    background: #ff0;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  47% {
    background: #ff0;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  47.1% {
    background: #ff0;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  73.9% {
    background: #f00;
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; }
  74% {
    background: #f00;
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 1; }
  80% {
    background: #f00;
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 1; }
  80.1% {
    background: #f00;
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; }
  100% {
    background: #fff;
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; } }

@keyframes reactive-rgb {
  0% {
    background: #fff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  8.1% {
    background: #fff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  14% {
    background: #fff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 1; }
  14.1% {
    background: #fff;
    width: 20%;
    height: 50%;
    top: 18%;
    left: 29%;
    opacity: 0; }
  40.9% {
    background: #ff0;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  41% {
    background: #ff0;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  47% {
    background: #ff0;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 1; }
  47.1% {
    background: #ff0;
    width: 20%;
    height: 50%;
    top: 30%;
    left: 9%;
    opacity: 0; }
  73.9% {
    background: #f00;
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; }
  74% {
    background: #f00;
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 1; }
  80% {
    background: #f00;
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 1; }
  80.1% {
    background: #f00;
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; }
  100% {
    background: #fff;
    top: 60%;
    left: 15%;
    width: 32%;
    height: 50%;
    opacity: 0; } }

@-webkit-keyframes rgb-hand {
  0% {
    top: 28%;
    left: 37.5%;
    opacity: 1; }
  9% {
    top: 26%;
    left: 37.5%;
    opacity: 1; }
  9.1% {
    top: 26%;
    left: 37.5%;
    opacity: 0; }
  33% {
    top: 42%;
    left: 16%;
    opacity: 0; }
  33.1% {
    top: 42%;
    left: 16%;
    opacity: 1; }
  42% {
    top: 40%;
    left: 16%;
    opacity: 1; }
  42.1% {
    top: 40%;
    left: 16%;
    opacity: 0; }
  66% {
    top: 70%;
    left: 28%;
    opacity: 0; }
  66.1% {
    top: 70%;
    left: 28%;
    opacity: 1; }
  75% {
    top: 68%;
    left: 28%;
    opacity: 1; }
  75.1% {
    top: 68%;
    left: 28%;
    opacity: 0; }
  100% {
    top: 28%;
    left: 37.5%;
    opacity: 0; } }

@keyframes rgb-hand {
  0% {
    top: 28%;
    left: 37.5%;
    opacity: 1; }
  9% {
    top: 26%;
    left: 37.5%;
    opacity: 1; }
  9.1% {
    top: 26%;
    left: 37.5%;
    opacity: 0; }
  33% {
    top: 42%;
    left: 16%;
    opacity: 0; }
  33.1% {
    top: 42%;
    left: 16%;
    opacity: 1; }
  42% {
    top: 40%;
    left: 16%;
    opacity: 1; }
  42.1% {
    top: 40%;
    left: 16%;
    opacity: 0; }
  66% {
    top: 70%;
    left: 28%;
    opacity: 0; }
  66.1% {
    top: 70%;
    left: 28%;
    opacity: 1; }
  75% {
    top: 68%;
    left: 28%;
    opacity: 1; }
  75.1% {
    top: 68%;
    left: 28%;
    opacity: 0; }
  100% {
    top: 28%;
    left: 37.5%;
    opacity: 0; } }