.twitter {
  background-image: url("../assets/images/header/social/TwitterWhite.png");
}

.twitter:hover {
  background-image: url("../assets/images/header/social/TwitterActive.png");
}

.discord {
  background-image: url("../assets/images/header/social/DiscordWhite.png");
}

.discord:hover {
  background-image: url("../assets/images/header/social/DiscordRed.png");
}

.instagram {
  background-image: url("../assets/images/header/social/InstaWhite.png");
}

.instagram:hover {
  background-image: url("../assets/images/header/social/InstaActive.png");
}

.opensea {
  background-image: url("../assets/images/header/social/OpenseaWhite.png");
}

.opensea:hover {
  background-image: url("../assets/images/header/social/OpenseaActive.png");
}

.web {
  background-image: url("../assets/images/header/social/LinkWhite.png");
}

.web:hover {
  background-image: url("../assets/images/header/social/LinkActive.png");
}

@-webkit-keyframes bubble {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0;
  }
  5% {
    display: initial !important;
    -webkit-transform: translateY(-50vh);
            transform: translateY(-50vh);
    opacity: 0;
  }
  10% {
    -webkit-transform: translateY(-100vh);
            transform: translateY(-100vh);
    opacity: 0.5;
  }
  90% {
    -webkit-transform: translateY(-1000vh);
            transform: translateY(-1000vh);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1200vh);
            transform: translateY(-1200vh);
    opacity: 1;
  }
}

@keyframes bubble {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0;
  }
  5% {
    display: initial !important;
    -webkit-transform: translateY(-50vh);
            transform: translateY(-50vh);
    opacity: 0;
  }
  10% {
    -webkit-transform: translateY(-100vh);
            transform: translateY(-100vh);
    opacity: 0.5;
  }
  90% {
    -webkit-transform: translateY(-1000vh);
            transform: translateY(-1000vh);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1200vh);
            transform: translateY(-1200vh);
    opacity: 1;
  }
}

.bubble-spawner1 {
  opacity: 0;
  -webkit-animation: bubble 16s linear infinite;
          animation: bubble 16s linear infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 501;
  position: absolute;
  left: 10%;
  cursor: pointer;
}

.bubble-spawner2 {
  opacity: 0;
  -webkit-animation: bubble 16s linear infinite;
          animation: bubble 16s linear infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 501;
  position: absolute;
  left: 20%;
  cursor: pointer;
}

.bubble-spawner3 {
  opacity: 0;
  -webkit-animation: bubble 16s linear infinite;
          animation: bubble 16s linear infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 501;
  position: absolute;
  left: 30%;
  cursor: pointer;
}

.bubble-spawner4 {
  opacity: 0;
  -webkit-animation: bubble 16s linear infinite;
          animation: bubble 16s linear infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 501;
  position: absolute;
  left: 40%;
  cursor: pointer;
}

.bubble-spawner5 {
  opacity: 0;
  -webkit-animation: bubble 16s linear infinite;
          animation: bubble 16s linear infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 501;
  position: absolute;
  left: 50%;
  cursor: pointer;
}

.bubble-spawner6 {
  opacity: 0;
  -webkit-animation: bubble 16s linear infinite;
          animation: bubble 16s linear infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 501;
  position: absolute;
  left: 60%;
  cursor: pointer;
}

.bubble-spawner7 {
  opacity: 0;
  -webkit-animation: bubble 16s linear infinite;
          animation: bubble 16s linear infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 501;
  position: absolute;
  left: 70%;
  cursor: pointer;
}

.bubble-spawner8 {
  opacity: 0;
  -webkit-animation: bubble 16s linear infinite;
          animation: bubble 16s linear infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 501;
  position: absolute;
  left: 80%;
  cursor: pointer;
}

.bubble-spawner9 {
  opacity: 0;
  -webkit-animation: bubble 16s linear infinite;
          animation: bubble 16s linear infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 501;
  position: absolute;
  left: 90%;
  cursor: pointer;
}

@-webkit-keyframes fish {
  0% {
    -webkit-transform: translate(0px, 0px) rotateY(0deg) rotate(0deg);
            transform: translate(0px, 0px) rotateY(0deg) rotate(0deg);
  }
  2% {
    -webkit-transform: translate(-31px, -3px) rotateY(0deg) rotate(7deg);
            transform: translate(-31px, -3px) rotateY(0deg) rotate(7deg);
  }
  4% {
    -webkit-transform: translate(-65px, -3px) rotateY(0deg) rotate(7deg);
            transform: translate(-65px, -3px) rotateY(0deg) rotate(7deg);
  }
  6% {
    -webkit-transform: translate(-91px, -2px) rotateY(0deg) rotate(-3deg);
            transform: translate(-91px, -2px) rotateY(0deg) rotate(-3deg);
  }
  8% {
    -webkit-transform: translate(-134px, -1px) rotateY(0deg) rotate(-2deg);
            transform: translate(-134px, -1px) rotateY(0deg) rotate(-2deg);
  }
  10% {
    -webkit-transform: translate(-186px, -2px) rotateY(0deg) rotate(1deg);
            transform: translate(-186px, -2px) rotateY(0deg) rotate(1deg);
  }
  12% {
    -webkit-transform: translate(-246px, 0px) rotateY(0deg) rotate(-2deg);
            transform: translate(-246px, 0px) rotateY(0deg) rotate(-2deg);
  }
  14% {
    -webkit-transform: translate(-317px, 3px) rotateY(0deg) rotate(-3deg);
            transform: translate(-317px, 3px) rotateY(0deg) rotate(-3deg);
  }
  16% {
    -webkit-transform: translate(-375px, 8px) rotateY(0deg) rotate(-7deg);
            transform: translate(-375px, 8px) rotateY(0deg) rotate(-7deg);
  }
  18% {
    -webkit-transform: translate(-423px, 14px) rotateY(0deg) rotate(-10deg);
            transform: translate(-423px, 14px) rotateY(0deg) rotate(-10deg);
  }
  20% {
    -webkit-transform: translate(-471px, 22px) rotateY(0deg) rotate(-12deg);
            transform: translate(-471px, 22px) rotateY(0deg) rotate(-12deg);
  }
  22% {
    -webkit-transform: translate(-529px, 32px) rotateY(0deg) rotate(-13deg);
            transform: translate(-529px, 32px) rotateY(0deg) rotate(-13deg);
  }
  24% {
    -webkit-transform: translate(-575px, 41px) rotateY(0deg) rotate(-14deg);
            transform: translate(-575px, 41px) rotateY(0deg) rotate(-14deg);
  }
  26% {
    -webkit-transform: translate(-608px, 49px) rotateY(0deg) rotate(-17deg);
            transform: translate(-608px, 49px) rotateY(0deg) rotate(-17deg);
  }
  28% {
    -webkit-transform: translate(-660px, 61px) rotateY(0deg) rotate(-16deg);
            transform: translate(-660px, 61px) rotateY(0deg) rotate(-16deg);
  }
  30% {
    -webkit-transform: translate(-716px, 71px) rotateY(0deg) rotate(-13deg);
            transform: translate(-716px, 71px) rotateY(0deg) rotate(-13deg);
  }
  32% {
    -webkit-transform: translate(-773px, 84px) rotateY(0deg) rotate(-16deg);
            transform: translate(-773px, 84px) rotateY(0deg) rotate(-16deg);
  }
  34% {
    -webkit-transform: translate(-817px, 100px) rotateY(0deg) rotate(-24deg);
            transform: translate(-817px, 100px) rotateY(0deg) rotate(-24deg);
  }
  36% {
    -webkit-transform: translate(-880px, 113px) rotateY(0deg) rotate(-15deg);
            transform: translate(-880px, 113px) rotateY(0deg) rotate(-15deg);
  }
  38% {
    -webkit-transform: translate(-921px, 128px) rotateY(0deg) rotate(-24deg);
            transform: translate(-921px, 128px) rotateY(0deg) rotate(-24deg);
  }
  40% {
    -webkit-transform: translate(-1009px, 146px) rotateY(0deg) rotate(-15deg);
            transform: translate(-1009px, 146px) rotateY(0deg) rotate(-15deg);
  }
  42% {
    -webkit-transform: translate(-1056px, 158px) rotateY(0deg) rotate(-18deg);
            transform: translate(-1056px, 158px) rotateY(0deg) rotate(-18deg);
  }
  44% {
    -webkit-transform: translate(-1110px, 169px) rotateY(0deg) rotate(-15deg);
            transform: translate(-1110px, 169px) rotateY(0deg) rotate(-15deg);
  }
  46% {
    -webkit-transform: translate(-1164px, 180px) rotateY(0deg) rotate(-15deg);
            transform: translate(-1164px, 180px) rotateY(0deg) rotate(-15deg);
  }
  48% {
    -webkit-transform: translate(-1259px, 194px) rotateY(0deg) rotate(-11deg);
            transform: translate(-1259px, 194px) rotateY(0deg) rotate(-11deg);
  }
  50% {
    -webkit-transform: translate(-1294px, 203px) rotateY(0deg) rotate(-18deg);
            transform: translate(-1294px, 203px) rotateY(0deg) rotate(-18deg);
  }
  52% {
    -webkit-transform: translate(-1388px, 218px) rotateY(0deg) rotate(-12deg);
            transform: translate(-1388px, 218px) rotateY(0deg) rotate(-12deg);
  }
  54% {
    -webkit-transform: translate(-1433px, 229px) rotateY(0deg) rotate(-17deg);
            transform: translate(-1433px, 229px) rotateY(0deg) rotate(-17deg);
  }
  56% {
    -webkit-transform: translate(-1515px, 239px) rotateY(0deg) rotate(-9deg);
            transform: translate(-1515px, 239px) rotateY(0deg) rotate(-9deg);
  }
  58% {
    -webkit-transform: translate(-1575px, 248px) rotateY(0deg) rotate(-11deg);
            transform: translate(-1575px, 248px) rotateY(0deg) rotate(-11deg);
  }
  60% {
    -webkit-transform: translate(-1657px, 260px) rotateY(0deg) rotate(-11deg);
            transform: translate(-1657px, 260px) rotateY(0deg) rotate(-11deg);
  }
  62% {
    -webkit-transform: translate(-1772px, 275px) rotateY(0deg) rotate(-10deg);
            transform: translate(-1772px, 275px) rotateY(0deg) rotate(-10deg);
  }
  64% {
    -webkit-transform: translate(-1902px, 292px) rotateY(0deg) rotate(-10deg);
            transform: translate(-1902px, 292px) rotateY(0deg) rotate(-10deg);
  }
  66% {
    -webkit-transform: translate(-1956px, 297px) rotateY(0deg) rotate(-7deg);
            transform: translate(-1956px, 297px) rotateY(0deg) rotate(-7deg);
  }
  68% {
    -webkit-transform: translate(-2011px, 300px) rotateY(0deg) rotate(-4deg);
            transform: translate(-2011px, 300px) rotateY(0deg) rotate(-4deg);
  }
  70% {
    -webkit-transform: translate(-2116px, 307px) rotateY(0deg) rotate(-5deg);
            transform: translate(-2116px, 307px) rotateY(0deg) rotate(-5deg);
  }
  72% {
    -webkit-transform: translate(-2279px, 328px) rotateY(0deg) rotate(-10deg);
            transform: translate(-2279px, 328px) rotateY(0deg) rotate(-10deg);
  }
  74% {
    -webkit-transform: translate(-2335px, 325px) rotateY(0deg) rotate(4deg);
            transform: translate(-2335px, 325px) rotateY(0deg) rotate(4deg);
  }
  76% {
    -webkit-transform: translate(-2412px, 323px) rotateY(0deg) rotate(2deg);
            transform: translate(-2412px, 323px) rotateY(0deg) rotate(2deg);
  }
  78% {
    -webkit-transform: translate(-2490px, 319px) rotateY(0deg) rotate(4deg);
            transform: translate(-2490px, 319px) rotateY(0deg) rotate(4deg);
  }
  80% {
    -webkit-transform: translate(-2565px, 317px) rotateY(0deg) rotate(2deg);
            transform: translate(-2565px, 317px) rotateY(0deg) rotate(2deg);
  }
  82% {
    -webkit-transform: translate(-2606px, 315px) rotateY(0deg) rotate(4deg);
            transform: translate(-2606px, 315px) rotateY(0deg) rotate(4deg);
  }
  84% {
    -webkit-transform: translate(-2646px, 313px) rotateY(0deg) rotate(4deg);
            transform: translate(-2646px, 313px) rotateY(0deg) rotate(4deg);
  }
  86% {
    -webkit-transform: translate(-2673px, 311px) rotateY(0deg) rotate(6deg);
            transform: translate(-2673px, 311px) rotateY(0deg) rotate(6deg);
  }
  88% {
    -webkit-transform: translate(-2693px, 309px) rotateY(0deg) rotate(8deg);
            transform: translate(-2693px, 309px) rotateY(0deg) rotate(8deg);
  }
  90% {
    -webkit-transform: translate(-2720px, 305px) rotateY(0deg) rotate(11deg);
            transform: translate(-2720px, 305px) rotateY(0deg) rotate(11deg);
  }
  92% {
    -webkit-transform: translate(-2741px, 303px) rotateY(0deg) rotate(7deg);
            transform: translate(-2741px, 303px) rotateY(0deg) rotate(7deg);
  }
  94% {
    -webkit-transform: translate(-2750px, 303px) rotateY(0deg) rotate(7deg);
            transform: translate(-2750px, 303px) rotateY(0deg) rotate(7deg);
  }
  96% {
    -webkit-transform: translate(-2760px, 301px) rotateY(0deg) rotate(15deg);
            transform: translate(-2760px, 301px) rotateY(0deg) rotate(15deg);
  }
  98% {
    -webkit-transform: translate(-2765px, 301px) rotateY(0deg) rotate(15deg);
            transform: translate(-2765px, 301px) rotateY(0deg) rotate(15deg);
  }
  100% {
    -webkit-transform: translate(-2768px, 301px) rotateY(0deg) rotate(15deg);
            transform: translate(-2768px, 301px) rotateY(0deg) rotate(15deg);
  }
}

@keyframes fish {
  0% {
    -webkit-transform: translate(0px, 0px) rotateY(0deg) rotate(0deg);
            transform: translate(0px, 0px) rotateY(0deg) rotate(0deg);
  }
  2% {
    -webkit-transform: translate(-31px, -3px) rotateY(0deg) rotate(7deg);
            transform: translate(-31px, -3px) rotateY(0deg) rotate(7deg);
  }
  4% {
    -webkit-transform: translate(-65px, -3px) rotateY(0deg) rotate(7deg);
            transform: translate(-65px, -3px) rotateY(0deg) rotate(7deg);
  }
  6% {
    -webkit-transform: translate(-91px, -2px) rotateY(0deg) rotate(-3deg);
            transform: translate(-91px, -2px) rotateY(0deg) rotate(-3deg);
  }
  8% {
    -webkit-transform: translate(-134px, -1px) rotateY(0deg) rotate(-2deg);
            transform: translate(-134px, -1px) rotateY(0deg) rotate(-2deg);
  }
  10% {
    -webkit-transform: translate(-186px, -2px) rotateY(0deg) rotate(1deg);
            transform: translate(-186px, -2px) rotateY(0deg) rotate(1deg);
  }
  12% {
    -webkit-transform: translate(-246px, 0px) rotateY(0deg) rotate(-2deg);
            transform: translate(-246px, 0px) rotateY(0deg) rotate(-2deg);
  }
  14% {
    -webkit-transform: translate(-317px, 3px) rotateY(0deg) rotate(-3deg);
            transform: translate(-317px, 3px) rotateY(0deg) rotate(-3deg);
  }
  16% {
    -webkit-transform: translate(-375px, 8px) rotateY(0deg) rotate(-7deg);
            transform: translate(-375px, 8px) rotateY(0deg) rotate(-7deg);
  }
  18% {
    -webkit-transform: translate(-423px, 14px) rotateY(0deg) rotate(-10deg);
            transform: translate(-423px, 14px) rotateY(0deg) rotate(-10deg);
  }
  20% {
    -webkit-transform: translate(-471px, 22px) rotateY(0deg) rotate(-12deg);
            transform: translate(-471px, 22px) rotateY(0deg) rotate(-12deg);
  }
  22% {
    -webkit-transform: translate(-529px, 32px) rotateY(0deg) rotate(-13deg);
            transform: translate(-529px, 32px) rotateY(0deg) rotate(-13deg);
  }
  24% {
    -webkit-transform: translate(-575px, 41px) rotateY(0deg) rotate(-14deg);
            transform: translate(-575px, 41px) rotateY(0deg) rotate(-14deg);
  }
  26% {
    -webkit-transform: translate(-608px, 49px) rotateY(0deg) rotate(-17deg);
            transform: translate(-608px, 49px) rotateY(0deg) rotate(-17deg);
  }
  28% {
    -webkit-transform: translate(-660px, 61px) rotateY(0deg) rotate(-16deg);
            transform: translate(-660px, 61px) rotateY(0deg) rotate(-16deg);
  }
  30% {
    -webkit-transform: translate(-716px, 71px) rotateY(0deg) rotate(-13deg);
            transform: translate(-716px, 71px) rotateY(0deg) rotate(-13deg);
  }
  32% {
    -webkit-transform: translate(-773px, 84px) rotateY(0deg) rotate(-16deg);
            transform: translate(-773px, 84px) rotateY(0deg) rotate(-16deg);
  }
  34% {
    -webkit-transform: translate(-817px, 100px) rotateY(0deg) rotate(-24deg);
            transform: translate(-817px, 100px) rotateY(0deg) rotate(-24deg);
  }
  36% {
    -webkit-transform: translate(-880px, 113px) rotateY(0deg) rotate(-15deg);
            transform: translate(-880px, 113px) rotateY(0deg) rotate(-15deg);
  }
  38% {
    -webkit-transform: translate(-921px, 128px) rotateY(0deg) rotate(-24deg);
            transform: translate(-921px, 128px) rotateY(0deg) rotate(-24deg);
  }
  40% {
    -webkit-transform: translate(-1009px, 146px) rotateY(0deg) rotate(-15deg);
            transform: translate(-1009px, 146px) rotateY(0deg) rotate(-15deg);
  }
  42% {
    -webkit-transform: translate(-1056px, 158px) rotateY(0deg) rotate(-18deg);
            transform: translate(-1056px, 158px) rotateY(0deg) rotate(-18deg);
  }
  44% {
    -webkit-transform: translate(-1110px, 169px) rotateY(0deg) rotate(-15deg);
            transform: translate(-1110px, 169px) rotateY(0deg) rotate(-15deg);
  }
  46% {
    -webkit-transform: translate(-1164px, 180px) rotateY(0deg) rotate(-15deg);
            transform: translate(-1164px, 180px) rotateY(0deg) rotate(-15deg);
  }
  48% {
    -webkit-transform: translate(-1259px, 194px) rotateY(0deg) rotate(-11deg);
            transform: translate(-1259px, 194px) rotateY(0deg) rotate(-11deg);
  }
  50% {
    -webkit-transform: translate(-1294px, 203px) rotateY(0deg) rotate(-18deg);
            transform: translate(-1294px, 203px) rotateY(0deg) rotate(-18deg);
  }
  52% {
    -webkit-transform: translate(-1388px, 218px) rotateY(0deg) rotate(-12deg);
            transform: translate(-1388px, 218px) rotateY(0deg) rotate(-12deg);
  }
  54% {
    -webkit-transform: translate(-1433px, 229px) rotateY(0deg) rotate(-17deg);
            transform: translate(-1433px, 229px) rotateY(0deg) rotate(-17deg);
  }
  56% {
    -webkit-transform: translate(-1515px, 239px) rotateY(0deg) rotate(-9deg);
            transform: translate(-1515px, 239px) rotateY(0deg) rotate(-9deg);
  }
  58% {
    -webkit-transform: translate(-1575px, 248px) rotateY(0deg) rotate(-11deg);
            transform: translate(-1575px, 248px) rotateY(0deg) rotate(-11deg);
  }
  60% {
    -webkit-transform: translate(-1657px, 260px) rotateY(0deg) rotate(-11deg);
            transform: translate(-1657px, 260px) rotateY(0deg) rotate(-11deg);
  }
  62% {
    -webkit-transform: translate(-1772px, 275px) rotateY(0deg) rotate(-10deg);
            transform: translate(-1772px, 275px) rotateY(0deg) rotate(-10deg);
  }
  64% {
    -webkit-transform: translate(-1902px, 292px) rotateY(0deg) rotate(-10deg);
            transform: translate(-1902px, 292px) rotateY(0deg) rotate(-10deg);
  }
  66% {
    -webkit-transform: translate(-1956px, 297px) rotateY(0deg) rotate(-7deg);
            transform: translate(-1956px, 297px) rotateY(0deg) rotate(-7deg);
  }
  68% {
    -webkit-transform: translate(-2011px, 300px) rotateY(0deg) rotate(-4deg);
            transform: translate(-2011px, 300px) rotateY(0deg) rotate(-4deg);
  }
  70% {
    -webkit-transform: translate(-2116px, 307px) rotateY(0deg) rotate(-5deg);
            transform: translate(-2116px, 307px) rotateY(0deg) rotate(-5deg);
  }
  72% {
    -webkit-transform: translate(-2279px, 328px) rotateY(0deg) rotate(-10deg);
            transform: translate(-2279px, 328px) rotateY(0deg) rotate(-10deg);
  }
  74% {
    -webkit-transform: translate(-2335px, 325px) rotateY(0deg) rotate(4deg);
            transform: translate(-2335px, 325px) rotateY(0deg) rotate(4deg);
  }
  76% {
    -webkit-transform: translate(-2412px, 323px) rotateY(0deg) rotate(2deg);
            transform: translate(-2412px, 323px) rotateY(0deg) rotate(2deg);
  }
  78% {
    -webkit-transform: translate(-2490px, 319px) rotateY(0deg) rotate(4deg);
            transform: translate(-2490px, 319px) rotateY(0deg) rotate(4deg);
  }
  80% {
    -webkit-transform: translate(-2565px, 317px) rotateY(0deg) rotate(2deg);
            transform: translate(-2565px, 317px) rotateY(0deg) rotate(2deg);
  }
  82% {
    -webkit-transform: translate(-2606px, 315px) rotateY(0deg) rotate(4deg);
            transform: translate(-2606px, 315px) rotateY(0deg) rotate(4deg);
  }
  84% {
    -webkit-transform: translate(-2646px, 313px) rotateY(0deg) rotate(4deg);
            transform: translate(-2646px, 313px) rotateY(0deg) rotate(4deg);
  }
  86% {
    -webkit-transform: translate(-2673px, 311px) rotateY(0deg) rotate(6deg);
            transform: translate(-2673px, 311px) rotateY(0deg) rotate(6deg);
  }
  88% {
    -webkit-transform: translate(-2693px, 309px) rotateY(0deg) rotate(8deg);
            transform: translate(-2693px, 309px) rotateY(0deg) rotate(8deg);
  }
  90% {
    -webkit-transform: translate(-2720px, 305px) rotateY(0deg) rotate(11deg);
            transform: translate(-2720px, 305px) rotateY(0deg) rotate(11deg);
  }
  92% {
    -webkit-transform: translate(-2741px, 303px) rotateY(0deg) rotate(7deg);
            transform: translate(-2741px, 303px) rotateY(0deg) rotate(7deg);
  }
  94% {
    -webkit-transform: translate(-2750px, 303px) rotateY(0deg) rotate(7deg);
            transform: translate(-2750px, 303px) rotateY(0deg) rotate(7deg);
  }
  96% {
    -webkit-transform: translate(-2760px, 301px) rotateY(0deg) rotate(15deg);
            transform: translate(-2760px, 301px) rotateY(0deg) rotate(15deg);
  }
  98% {
    -webkit-transform: translate(-2765px, 301px) rotateY(0deg) rotate(15deg);
            transform: translate(-2765px, 301px) rotateY(0deg) rotate(15deg);
  }
  100% {
    -webkit-transform: translate(-2768px, 301px) rotateY(0deg) rotate(15deg);
            transform: translate(-2768px, 301px) rotateY(0deg) rotate(15deg);
  }
}

.AnimatedFish {
  position: absolute;
  width: 100vw;
  pointer-events: none;
  overflow-x: hidden;
  z-index: 100;
}

.AnimatedFish img {
  left: 100%;
  top: 0;
  position: relative;
}

.AnimatedFish2 {
  top: 1600px;
  height: calc(600px * 1.5);
}

.AnimatedFish2 img {
  width: 600px;
  height: 600px;
  -webkit-animation: fish 60s linear infinite;
          animation: fish 60s linear infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.AnimatedFish3 {
  height: calc(200px * 2);
  top: 1000px;
}

.AnimatedFish3 img {
  left: 100%;
  width: 200px;
  height: 200px;
  -webkit-animation: fish 32s linear infinite;
          animation: fish 32s linear infinite;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.AnimatedFish4 {
  height: calc(100px * 4);
  top: 800px;
}

.AnimatedFish4 img {
  left: 100%;
  width: 100px;
  height: 100px;
  -webkit-animation: fish 24s linear infinite;
          animation: fish 24s linear infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

html {
  font-size: 10px;
  line-height: initial;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #101010;
  margin: 0;
  font-family: 'Bebas Neue', cursive;
  font-size: 2rem;
  color: white;
  letter-spacing: 0.4px;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body::-webkit-scrollbar {
  display: none;
}

main {
  margin-top: 60px;
}

div {
  font-family: 'Bebas Neue', cursive;
}

p {
  font-size: 2rem;
}

a {
  color: #00a19a;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #00a19a;
}

.gold {
  color: #d4bd4d;
}

.mint {
  cursor: default;
}

.footer {
  margin-top: auto;
  border-top: 1px solid white;
  padding-top: 2rem;
}

.footer-nav,
.footer-social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.footer-social {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.copyright {
  margin-top: 3rem;
}

.fish-nav {
  position: fixed;
  z-index: 999;
}

.nav-wrapper {
  border-bottom: 1px solid white;
  padding: 0 2rem;
}

.sidenav {
  border-left: 1px solid white;
}

.nav-wrapper,
.sidenav {
  background-color: #101010;
  color: white;
}

.nav-wrapper li a,
.sidenav li a {
  font-size: 2.2rem;
  color: white;
}

.fish-nav-lg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.fish-nav-lg .social {
  margin-left: 7em;
}

.logo {
  height: 30px;
  vertical-align: middle;
}

.link {
  font-size: 2.2rem;
  color: white;
}

.link.active {
  color: gray;
}

.link:hover {
  color: #00a19a;
}

.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.social-link {
  display: block;
  width: 25px;
  height: 25px;
  background-size: contain;
  background-repeat: no-repeat;
}

.banner {
  overflow: hidden;
  height: 400px;
}

.banner img {
  vertical-align: bottom;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.floor-banner {
  overflow: hidden;
}

.floor-banner img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.info {
  padding-bottom: 3rem;
  border-bottom: 1px solid grey;
}

.fish-card {
  background-color: transparent;
}

.fish-card img {
  max-width: 380px;
}

.fish-card .card-title {
  color: #00a19a;
  font-size: 2.8rem;
}

.contract {
  margin-bottom: 3rem;
}

.contract-links {
  margin-top: 1rem;
}

.contract-links img {
  max-width: 250px;
  width: 100%;
}

.contract .range {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 2rem 0;
}

.contract .range .thumb {
  display: none !important;
}

.contract .range .rangeInput {
  width: 190px;
  height: 5px;
  margin: 0;
  margin-right: 1rem;
  background: white;
  outline-style: none;
  border: none;
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.contract .range .rangeInput:hover {
  opacity: 1;
}

.contract .range .rangeInput::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-image: url("../assets/images/series/content/perle.png");
  cursor: pointer;
}

.contract .range .rangeInput::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-image: url("../assets/images/series/content/perle.png");
  cursor: pointer;
}

.main-banner {
  background-image: url("../assets/images/home/homeBanner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 50vh;
}

.fish-tank-gif {
  position: absolute;
  top: -22px;
  max-width: 500px;
  width: 100%;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.deadfish {
  width: 4rem;
}

.fische h3 {
  color: #d4bd4d;
}

.fische-card .fische-card-title h4 {
  margin-bottom: 0;
}

.fische-card .fische-card-img img {
  width: 100%;
  max-width: 500px;
  border-radius: 5%;
}

.fische-card .fische-card-content h4 {
  margin-bottom: 0;
}

.fische-card .fische-card-content p {
  margin-top: 0;
}

.home .info {
  border-bottom: none;
}

.home .icons-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid white;
  padding-bottom: 3rem;
  margin-bottom: 4rem;
}

.home .icons-list .icon-item img {
  width: 100%;
}

.home .icons-list .icon-item p {
  margin: 0;
  color: #d4bd4d;
}

.home .link {
  color: #00a19a;
}

.home .link.active {
  color: gray;
}

.home .link:hover {
  color: white;
}

.home .member,
.home .roadmap {
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid white;
}

.home .home-member {
  width: 100%;
}

.home .roadmap-img {
  width: 100%;
}

.home .team-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.home .team-wrapper .fish-card {
  width: calc(20% - 8px);
}

.home .team-wrapper .fish-card img {
  max-width: 380px;
  height: auto;
  margin: 0 auto;
  border-radius: 5%;
}

.home .team-wrapper .fish-card .card-title {
  color: #d4bd4d;
}

.series-wrapper,
.community-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 3rem;
  margin-bottom: 6rem;
}

.series-wrapper .row,
.community-wrapper .row {
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.series-wrapper .fish-card,
.community-wrapper .fish-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
}

.series-wrapper .fish-card img,
.community-wrapper .fish-card img {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.series-wrapper .fish-card .card-content,
.community-wrapper .fish-card .card-content {
  border-radius: initial;
}

.series-wrapper .benefits,
.community-wrapper .benefits {
  border-left: 1px solid white;
  color: #d4bd4d;
}

.series-wrapper .benefits .card-title,
.community-wrapper .benefits .card-title {
  color: #d4bd4d;
}

.series-wrapper .benefits ul,
.community-wrapper .benefits ul {
  list-style-type: disc;
}

.series-wrapper .benefits ul li,
.community-wrapper .benefits ul li {
  list-style-type: inherit;
}

.series-wrapper .card-image img {
  border-radius: 5%;
}

.series-wrapper .benefits ul {
  margin-top: 0;
}

.community-join h4 {
  font-size: 2.4rem;
}

.community-join-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3rem;
}

.community-join-link .splash {
  color: white;
  font-size: 4.4rem;
}

.community-join-link .our {
  color: #d4bd4d;
  font-size: 2.7rem;
  letter-spacing: 0.3rem;
}

.community-join-img {
  width: 100%;
  max-width: 100px;
  margin-left: 1rem;
}

.artist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  border-bottom: 1px solid white;
}

.artist-img {
  max-width: 250px;
  width: 22%;
  margin-bottom: 2rem;
}

.artist-img img {

  border-radius: 5%;
  max-width: 250px;
  width: 100%;

}

.artist-social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 2rem;
}

.artist-social a {
  margin-right: 1rem;
}

.artist-description {
  width: 50%;
}

.artist-description h4 {
  margin-top: 0;
}

.artist-works {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 250px;
  width: 22%;
  height: 250px;
  min-width: 250px;
}

.artist-works img {
  max-width: 125px;
  width: calc(50% - 0.5rem);
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;

}

.shop-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.fish-card-type {
  color: #d4bd4d;
}

.membertank-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.membertank-frame .resp-frame {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.fish-collapsible {
  background-color: transparent;
  border: none;
  font-size: 2rem;
  margin-bottom: 2.4rem;
}

.fish-collapsible .collapsible-header {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: transparent;
  color: grey;
}

.fish-collapsible .open,
.fish-collapsible .close {
  color: white;
  font-weight: 900;
}

.fish-collapsible .close {
  display: none;
}

.fish-collapsible .active .open {
  display: none;
}

.fish-collapsible .active .close {
  display: block;
}

@media screen and (max-width: 1150px) {
  .shop-wrapper {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .shop-wrapper .fish-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .series-wrapper .fish-card,
  .community-wrapper .fish-card {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .series-wrapper .benefits,
  .community-wrapper .benefits {
    border-left: initial;
    border-bottom: 1px solid white;
  }
  .home .icons-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .home .icons-list .icon-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .home .icons-list .icon-item img {
    width: 30%;
  }
  .home .icons-list .icon-item .icon-content p {
    text-align: start;
  }
  .home .team-wrapper .fish-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }
  .home .team-wrapper .fish-card .card-image img {
    max-width: 200px;
    width: 100%;
  }

}

@media screen and (max-width: 1400px) {
  .artist {
    display: block;
  }
  .artist-img, .artist-description, .artist-works {
    width: 100%;
  }
  .artist-works {
    max-width: initial;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    height: initial;
    min-width: none;
    margin-left: 0px;
  }
  .artist-works img {
    width: calc(25% - 0.5rem);
    margin-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .home .team-wrapper .fish-card .card-image img {
    width: 175px;
  }
}