:root {
  --relume-library-lite--rl-black: black;
  --relume-library-lite--rl-white: white;
  --relume-library-lite--rl-gray: #f4f4f4;
  --relume-library-lite--rows: 1;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

.hero-video {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  height: 100vh;
  margin-top: -8rem;
  display: flex;
}

.heading {
  color: #f8bc86;
  font-family: Play, sans-serif;
}

.heading.w {
  color: #d0d0d0;
}

.hero-bottom-wrapper {
  background-image: linear-gradient(#0000, #000 67%);
  align-self: center;
  width: 100vw;
  padding-top: 100px;
  display: block;
}

.main-tag {
  color: #f8ba1e;
  text-align: center;
  font-family: Play, sans-serif;
  font-size: 4.15rem;
  font-weight: 700;
  line-height: 1.6;
}

.hero-sub {
  color: #fbbe88;
  text-align: center;
  font-family: Play, sans-serif;
  font-size: 1rem;
}

.div-block {
  justify-content: center;
  align-items: center;
  height: 6rem;
  margin: 40px 20px 42px;
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
}

.btn-cta-play {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  vertical-align: baseline;
  background-color: #0000;
  border: 1px solid #fbbe88;
  border-radius: 5px;
  margin-right: 10px;
  padding: 10px 20px;
  font-family: Lato, sans-serif;
  font-size: 1rem;
}

.btn-row-center {
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 40px;
  display: flex;
}

.container-1280 {
  max-width: 1280px;
}

.about {
  color: #000;
  background-color: #000;
  background-image: linear-gradient(#000 18%, #0000), url('../images/back-bluered.webp');
  background-position: 0 0, 0 0;
  background-size: auto, cover;
  padding-top: 40px;
}

.awards {
  width: 16%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.navbar-logo-link {
  width: 150px;
  padding-left: 0;
}

.navbar-logo {
  margin-top: 0;
}

.navbar-link-left {
  color: #fbbe88;
  padding: 1.5rem .5rem;
  font-family: Play, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

.navbar-link-left:hover {
  filter: drop-shadow(0 0 3px #ffc229);
}

.navbar-link-left.w--current {
  color: #fbbe88;
  font-weight: 700;
}

.navbar-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.button {
  background-color: var(--relume-library-lite--rl-black);
  color: var(--relume-library-lite--rl-white);
  text-align: center;
  border: 1px solid #f4b984;
  border-radius: 5px;
  padding: .5rem 1.25rem;
  font-family: Play, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

.button:hover {
  color: var(--relume-library-lite--rl-black);
  background-image: linear-gradient(49deg, #ebbe88, #ffe0b9);
  font-family: Play, sans-serif;
  font-weight: 700;
}

.navbar-menu-button {
  padding: 0;
}

.navbar-play-link {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: flex;
}

.navbar_menu {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  margin-left: 1.5rem;
  display: flex;
  position: static;
}

.navbar {
  border-bottom: 1px none var(--relume-library-lite--rl-black);
  background-color: #0000;
  align-items: center;
  width: 100%;
  min-height: 6rem;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  position: sticky;
  top: 0;
}

.navbar-play {
  border: 1px none var(--relume-library-lite--rl-black);
  color: #fff;
  text-align: center;
  background-color: #0000;
  padding: .5rem 1.25rem .5rem .5rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

.about-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-image: linear-gradient(#0000 45%, #000 87%);
  border: 1px #fbbe88;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  padding: 40px 40px 0;
  display: grid;
  overflow: hidden;
}

.h1 {
  color: #fbbe88;
  text-align: left;
  margin-bottom: 2rem;
  font-family: Play, sans-serif;
  font-size: 2.5rem;
}

.about-paragraph {
  color: #b5b5b5;
  -webkit-text-stroke-color: #fff;
  max-width: 400px;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}

.heroes {
  color: #000;
  background-color: #000;
  padding-top: 0;
}

.heroes-tab-menu {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  display: flex;
}

.heroes-tab-link {
  filter: grayscale();
  background-color: #0000;
  border-bottom: 4px #e4e6f1;
  border-left: 4px #f2f4f7;
  padding: 1.5rem 1rem;
  display: block;
}

.heroes-tab-link.w--current {
  opacity: 1;
  filter: none;
  background-color: #0000;
  border-bottom: 4px #642eff;
  border-left-style: none;
  border-left-color: #642eff;
  padding-left: 1rem;
}

.heroes-representation {
  background-color: #000;
  background-image: linear-gradient(360deg, #000 3%, #0000 29%), linear-gradient(90deg, #000 24%, #0000), linear-gradient(#000, #0000 21%), url('../images/unknown.webp');
  background-position: 0 0, 0 0, 0 0, 0%;
  background-repeat: repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, auto, auto;
  border: 1px #000;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 80vh;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 5%;
  display: flex;
  position: static;
  overflow: hidden;
}

.heroes-representation.yellow {
  background-image: linear-gradient(360deg, #000, #0000 32%), linear-gradient(90deg, #000 8%, #0000), linear-gradient(#000, #0000 38%), url('../images/herooes-title-gap.webp');
  background-position: 0 0, 0 0, 0 0, 150%;
  background-size: auto, auto, auto, 75%;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}

.heroes-representation.blue {
  background-image: linear-gradient(0deg, #000, #0000 37%), url('../images/heroes-title-attila.webp');
  background-position: 0 0, 120% 30%;
  background-repeat: repeat, no-repeat;
  background-size: auto, 66%;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.heroes-representation.green {
  background-image: linear-gradient(0deg, #000, #0000 44%), linear-gradient(92deg, #0000 79%, #000), linear-gradient(90deg, #000 25%, #0000 51%), linear-gradient(#000, #0000 31%), url('../images/herooes-title-locklear.webp');
  background-position: 0 0, 0 0, 0 0, 0 0, 150%;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, auto, auto, 75%;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  min-height: 80vh;
  padding-top: 40px;
  padding-left: 5%;
  display: flex;
}

.heroes-tab {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.heroes-container {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.div-block-3 {
  max-width: 500px;
}

.gameview {
  height: 80vh;
}

.hero-thumbnail {
  border: 3px solid #a5bbff;
  border-radius: 5px;
  width: 120px;
}

.heroes-header {
  color: #fbbe88;
  text-align: left;
  margin-bottom: 2rem;
  font-family: Play, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.heroes-header.centered {
  text-align: center;
  margin-top: 0;
  margin-bottom: 3rem;
}

.heroes-desrcription {
  flex: 0 auto;
  max-width: 480px;
}

.heroes-essentials {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  margin-top: 40px;
  display: flex;
}

.div-block-6 {
  display: flex;
}

.heroes-essentials-base {
  color: #fff;
  margin-bottom: 0;
  font-family: Play, sans-serif;
  font-size: 1rem;
  line-height: 1;
}

.heroes-essentials-base.highlighted {
  color: #fbbe88;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.2;
}

.heroes-essentials-type {
  color: #fff;
  margin-bottom: 0;
  font-family: Play, sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.base-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: 10px;
  display: flex;
}

.paragraph-w {
  color: #d4d4d4;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}

.paragraph-w.footer {
  margin-top: 20px;
  font-size: .8rem;
}

.gallery {
  color: #000;
  background-color: #000;
  padding-top: 60px;
  padding-left: 20px;
  padding-right: 20px;
}

.btn-row-left {
  justify-content: flex-start;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
}

.spacer40 {
  height: 40px;
}

.highlight, .highlightt-heading {
  color: #fbbe88;
  text-align: left;
  margin-bottom: 10px;
  font-family: Play, sans-serif;
  font-size: 1rem;
}

.rl_gallery10_component-2 {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.gallery-right {
  grid-column-gap: 2%;
  grid-row-gap: 0%;
  grid-template-rows: auto;
  grid-template-columns: 32% 66%;
  grid-auto-columns: 1fr;
  margin-bottom: 2vw;
  display: grid;
}

.image-50 {
  object-fit: cover;
  height: 100%;
}

.gallery-left {
  grid-column-gap: 2%;
  grid-row-gap: 2%;
  grid-template-rows: auto;
  grid-template-columns: 66% 32%;
  grid-auto-columns: 1fr;
  margin-bottom: 2vw;
  display: grid;
}

.image-52 {
  object-fit: cover;
}

.container-4 {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.footer-subscribe {
  border-bottom: 1px solid #e4ebf3;
  padding: 50px 30px 80px;
  position: relative;
}

.footer-divider-two {
  background-color: #4f3a16;
  width: 100%;
  height: 1px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.footer-bottom {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.footer-copyright {
  color: #d4d4c7;
  font-family: Play, sans-serif;
  font-size: 1rem;
}

.next {
  color: #000;
  background-color: #000;
  padding: 60px 20px 40px;
}

.whats-next {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.promo-tournaments {
  outline-offset: 0px;
  background-image: linear-gradient(#000, #0000), url('../images/tournamrnts.png');
  background-position: 0 0, 50% 100%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 5px;
  outline: 1px solid #79afdb;
  height: 40vh;
  padding: 30px 30px 40px;
}

.classes {
  color: #000;
  background-color: #000;
  padding-top: 60px;
  padding-left: 20px;
  padding-right: 20px;
}

.tabs-menu {
  grid-column-gap: 0px;
  grid-row-gap: 40px;
  border: 1px solid #2b2b2b;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-content: flex-start center;
  align-items: flex-start;
  height: 100%;
  padding: 40px 20px;
  display: flex;
}

.tabs {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: .45fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.classes-representation {
  grid-column-gap: 40px;
  grid-row-gap: 16px;
  background-color: #000;
  border: 1px solid #2b2b2b;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  min-height: 35rem;
  padding: 40px;
  display: grid;
  position: static;
  overflow: hidden;
}

.tab-link-tab-1 {
  background-color: #000;
  background-image: url('../images/tank-inactive.svg');
  background-position: 0 0;
  background-size: auto;
  width: 100px;
  height: 100px;
}

.tab-link-tab-1.w--current {
  background-color: #0000;
  background-image: url('../images/tank-active.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  width: 100px;
  height: 100px;
}

.tab-link-tab-2 {
  background-color: #000;
  background-image: url('../images/armor-inactive.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  width: 100px;
  height: 100px;
}

.tab-link-tab-2.w--current {
  background-image: url('../images/armor-active.svg');
}

.tab-link-tab-3 {
  background-color: #000;
  background-image: url('../images/balancer-inactive.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  width: 100px;
  height: 100px;
}

.tab-link-tab-3.w--current {
  background-image: url('../images/balancer-active.svg');
}

.tab-link-tab-4 {
  background-color: #000;
  background-image: url('../images/assassin-inactive.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  width: 100px;
  height: 100px;
}

.tab-link-tab-4.w--current {
  background-image: url('../images/assassin-active.svg');
}

.tab-link-tab-5 {
  background-color: #0000;
  background-image: url('../images/duelist-inactive.svg');
  background-position: 0 0;
  background-size: auto;
  width: 100px;
  height: 100px;
}

.tab-link-tab-5.w--current {
  background-color: #000;
  background-image: url('../images/duelist-active.svg');
  background-repeat: no-repeat;
}

.class-header {
  color: #fbbe88;
  text-align: left;
  margin-bottom: 2rem;
  font-family: Play, sans-serif;
  font-size: 2.5rem;
}

.class-summary {
  color: #f4c79f;
  font-family: Play, sans-serif;
  font-size: 1.25rem;
  line-height: 1.3;
}

.spacer10 {
  height: 10px;
}

.promo-lastchance {
  outline-offset: 0px;
  background-image: linear-gradient(160deg, #000 6%, #0000), url('../images/MFC_LAST.webp');
  background-position: 0 0, 50%;
  background-size: auto, 1005px;
  outline: 1px solid #b8890e;
  height: 40vh;
  padding: 30px 30px 40px;
}

.promo-lbreakers {
  outline-offset: 0px;
  background-image: linear-gradient(160deg, #000 21%, #0000), url('../images/MFC_BK.webp');
  background-position: 0 0, 50% 65%;
  background-repeat: repeat, no-repeat;
  background-size: auto, 100%;
  border-radius: 5px;
  outline: 1px solid #b8890e;
  height: 40vh;
  padding: 30px 30px 40px;
}

.demo-mode-panel {
  background-color: #15151e;
  justify-content: center;
  align-items: center;
  height: 5vh;
  margin-bottom: 0;
  margin-left: -40px;
  margin-right: -40px;
  display: flex;
}

.demo-mode-text {
  color: #919191;
  margin-left: 15px;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1em;
}

.container-mfc {
  z-index: 999;
  border: 10px #180c1e;
  max-width: 680px;
  margin-top: 40px;
  margin-bottom: 40px;
  position: relative;
}

.code-embed {
  font-family: Play, sans-serif;
}

.body {
  background-color: #000;
}

.link {
  color: #8ac7ff;
  align-self: center;
  font-family: Lato, sans-serif;
}

.link:hover {
  color: #c6e4ff;
}

.link.mg-left {
  margin-left: 20px;
}

.body-2 {
  background-color: #000;
}

.heroes-descriptive-text {
  color: #d4d4d4;
  margin-bottom: 20px;
  font-family: Lato, sans-serif;
  font-size: .9rem;
  line-height: 1.4;
}

.spacer20 {
  height: 20px;
}

.image-58 {
  width: 60px;
}

.spacer-hero {
  height: 20px;
}

.body-black {
  background-color: #000;
}

.form-block {
  min-width: 600px;
  max-width: 600px;
}

.contact-wrap {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}

.logo-contact {
  width: 150px;
  margin-bottom: 20px;
}

.field-label {
  color: #ababab;
  font-family: Lato, sans-serif;
}

.text-field {
  color: #fff;
  background-color: #252525;
  border: 1px solid #4b4b4b;
  border-radius: 5px;
  font-family: Lato, sans-serif;
  font-size: 1rem;
}

.text-span-4 {
  color: #e83f3f;
}

.form {
  grid-column-gap: 16px;
  grid-row-gap: 6px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.success-message {
  background-color: #b1eeff;
  border-radius: 5px;
}

.div-block-9 {
  margin-top: 10px;
  display: flex;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

._404-wrap {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}

@media screen and (min-width: 1280px) {
  .hero-video, .hero-video:hover {
    background-image: none;
  }

  .heading.w._404 {
    font-size: 76px;
  }

  .main-tag {
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .hero-sub {
    aspect-ratio: auto;
    margin-bottom: 10px;
  }

  .div-block {
    margin-bottom: 50px;
  }

  .btn-row-center {
    margin-top: 10px;
  }

  .container-1280.on-top {
    z-index: 100;
    position: relative;
  }

  .about {
    background-image: linear-gradient(#000 18%, #0000 50%, #000 90%), url('../images/back-bluered.webp');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .awards {
    width: 180px;
    margin-left: 0;
    margin-right: 0;
  }

  .navbar-logo-link {
    width: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .navbar-logo {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .navbar-link-left {
    font-size: 1rem;
  }

  .navbar-link-left:hover {
    filter: drop-shadow(0 0 3px #ffc229);
    color: #ffbb63;
  }

  .navbar-link-left.w--current {
    font-weight: 400;
  }

  .button {
    color: #fff;
    background-color: #000;
    border-color: #cc9a6e;
    font-family: Play, sans-serif;
    font-weight: 700;
  }

  .button:hover {
    color: #000;
    background-image: linear-gradient(137deg, #fdca9d, #fff);
    border-color: #1e1e1e;
  }

  .navbar {
    top: 0;
  }

  .navbar-play {
    border-style: none;
    padding-left: .5rem;
    font-family: Play, sans-serif;
    font-weight: 700;
  }

  .navbar-play:hover {
    text-decoration: underline;
  }

  .about-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-image: none;
    grid-template-rows: auto;
    grid-template-columns: 1.25fr 1fr;
    grid-auto-columns: 1fr;
    height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
    display: grid;
  }

  .h1 {
    line-height: 1.6;
  }

  .about-paragraph {
    color: #dbdbdb;
    max-width: 400px;
    margin-bottom: 20px;
  }

  .heroes {
    background-image: linear-gradient(#000, #000), url('../images/Image-5.png');
    background-position: 0 0, 0 0;
    background-size: auto, auto;
    height: 100vh;
  }

  .heroes-tab-menu {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    flex-flow: column;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    display: flex;
  }

  .heroes-tab-link {
    filter: grayscale();
    border-bottom-style: none;
    border-left-style: none;
    padding: 0 0 0 2rem;
  }

  .heroes-tab-link:hover {
    filter: grayscale(0%);
  }

  .heroes-tab-link.w--current {
    filter: grayscale(0%);
    border-bottom-style: none;
    border-left-style: none;
    padding: 0 0 0 2rem;
  }

  .heroes-representation {
    background-color: #000;
    background-image: linear-gradient(260deg, #000 7%, #0000 24%), linear-gradient(0deg, #000, #0000 54%), linear-gradient(99deg, #000 24%, #0000 42%), linear-gradient(#000, #0000 34%), url('../images/unknown.webp');
    background-position: 0 0, 0 0, 0 0, 0 0, 50% 25%;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat;
    background-size: auto, auto, auto, auto, auto 120%;
    border-style: none;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 90vh;
    padding: 0 40px;
  }

  .heroes-representation.yellow {
    background-image: linear-gradient(#000, #0000 25%), linear-gradient(260deg, #000 2%, #0000 43%), linear-gradient(0deg, #000, #0000 54%), linear-gradient(99deg, #000 17%, #0000 42%), url('../images/herooes-title-gap.webp');
    background-position: 0 0, 0 0, 0 0, 0 0, 100%;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat;
    background-size: auto, auto, auto, auto, 75%;
  }

  .heroes-representation.blue {
    background-image: linear-gradient(0deg, #000, #0000 45%), url('../images/heroes-title-attila.webp');
    background-position: 0 0, 120%;
    background-repeat: repeat, no-repeat;
    background-size: auto, 80%;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
  }

  .heroes-representation.green {
    background-image: linear-gradient(260deg, #000 8%, #0000 28%), linear-gradient(0deg, #000, #0000 54%), linear-gradient(107deg, #000 19%, #0000 42%), linear-gradient(#000, #0000 24%), url('../images/herooes-title-locklear.webp');
    background-position: 0 0, 0 0, 0 0, 0 0, 150%;
    background-size: auto, auto, auto, auto, 80%;
    justify-content: center;
    align-items: stretch;
    height: 100vh;
    padding-left: 40px;
    display: flex;
  }

  .heroes-tab {
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
    grid-template-columns: 180px 1fr;
    height: 100vh;
  }

  .heroes-container {
    max-width: 1600px;
    height: 100%;
    padding-left: 0%;
  }

  .div-block-3 {
    max-width: 1000px;
  }

  .gameview {
    object-fit: fill;
    height: 85vh;
  }

  .hero-thumbnail {
    border-color: #a5bbff;
    width: 120px;
    margin-bottom: 20px;
  }

  .image-49 {
    border: 3px #a5bbff;
    border-radius: 5px;
  }

  .heroes-header {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .heroes-header.centered {
    text-align: center;
    margin-top: 0;
    margin-bottom: 2rem;
  }

  .heroes-desrcription {
    max-width: 480px;
  }

  .heroes-essentials {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: #0000;
    border: 1px #fbbe88;
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-self: flex-start;
    align-items: flex-start;
    max-width: none;
    margin-top: 0;
    padding: 40px 40px 40px 0;
    display: flex;
  }

  .div-block-6 {
    margin-left: -7px;
    display: flex;
  }

  .heroes-essentials-base {
    color: #fff;
    margin-bottom: 0;
    font-family: Play, sans-serif;
    line-height: 1;
  }

  .heroes-essentials-base.highlighted {
    color: #fbbe88;
    margin-top: 10px;
  }

  .heroes-essentials-type {
    color: #fff;
    margin-bottom: 0;
    font-family: Play, sans-serif;
    font-size: 2rem;
    line-height: 1;
  }

  .base-wrapper {
    align-self: center;
    margin-left: 20px;
  }

  .paragraph-w {
    color: #d4d4d4;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 1rem;
  }

  .paragraph-w.footer {
    margin-top: 20px;
    font-size: .8rem;
  }

  .gallery {
    background-color: #000;
    background-image: linear-gradient(#000, #0000);
    padding-top: 100px;
    position: relative;
  }

  .btn-row-left {
    justify-content: flex-start;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  .spacer40 {
    height: 60px;
  }

  .highlight {
    text-align: left;
    margin-bottom: 10px;
  }

  .highlightt-heading {
    text-align: left;
    margin-bottom: 10px;
    font-size: 1.25rem;
  }

  .div-block-7 {
    background-color: #b22121;
    width: 33%;
    min-width: 300px;
    height: 300px;
  }

  .div-block-7._5 {
    background-color: #b27121;
    position: relative;
  }

  .class-1 {
    background-color: #b22121;
    height: 300px;
    position: relative;
    overflow: hidden;
  }

  .class-5 {
    background-color: #ae21b2;
    width: 33%;
    min-width: 300px;
    height: 300px;
    position: relative;
  }

  .gallery-right {
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    grid-template-rows: auto;
    grid-template-columns: 32% 66%;
    grid-auto-columns: 1fr;
    margin-top: 2vw;
    display: grid;
  }

  .image-50 {
    vertical-align: baseline;
    object-fit: cover;
    border-radius: 5px;
    width: 100%;
    height: 100%;
  }

  .gallery-left {
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    grid-template-rows: auto;
    grid-template-columns: 66% 32%;
    grid-auto-columns: 1fr;
    margin-top: 2vw;
    display: grid;
  }

  .image-52 {
    outline-offset: 0px;
    border-radius: 5px;
    outline: 3px solid #000;
    width: 100%;
  }

  .image-53 {
    object-fit: fill;
    border-radius: 5px;
    width: 100%;
  }

  .footer-subscribe {
    z-index: 6;
    background-color: var(--relume-library-lite--rl-black);
    background-image: linear-gradient(#000, #00000080), url('../images/Image-5.png');
    background-position: 0 0, 0 0;
    background-size: auto, auto;
    margin-top: -200px;
    padding-top: 300px;
  }

  .footer-divider-two {
    background-color: #92703a;
  }

  .footer-copyright {
    color: #b5b5b5;
  }

  .next {
    background-color: #000;
    background-image: linear-gradient(#000, #0000);
    padding-top: 100px;
    position: relative;
  }

  .whats-next {
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    grid-template-rows: auto;
    grid-template-columns: 48% 24% 24%;
    grid-auto-columns: 1fr;
    margin-top: 2vw;
    display: grid;
  }

  .promo-tournaments {
    outline-offset: 0px;
    background-image: linear-gradient(#000, #00132280 26%, #00132200 61%), url('../images/tournamrnts.png');
    background-position: 0 0, 50% 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    border: 1px solid #000;
    border-radius: 5px;
    outline: 1px solid #79afdb;
    height: 50vh;
    padding: 30px 40px 40px 20px;
  }

  .classes {
    background-image: linear-gradient(#000, #000), url('../images/Image-5.png');
    background-position: 0 0, 0 0;
    background-size: auto, auto;
    height: 100%;
    margin-top: 0;
    padding-top: 20px;
  }

  .tabs-menu {
    grid-column-gap: 0px;
    grid-row-gap: 20px;
    border: 1px solid #2b2b2b;
    flex-flow: wrap;
    place-content: flex-start center;
    align-items: flex-start;
    height: 100%;
    min-height: 50vh;
    padding: 40px 30px;
    display: flex;
  }

  .tabs {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    border: 1px #393939;
    border-radius: 5px;
    grid-template-rows: auto;
    grid-template-columns: .45fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .classes-representation {
    grid-column-gap: 60px;
    grid-row-gap: 0px;
    background-color: #000;
    border-style: solid;
    border-color: #2b2b2b;
    flex-flow: column;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr .75fr;
    grid-auto-columns: 1fr;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    min-height: 50vh;
    padding: 40px 80px;
    display: grid;
  }

  .tab-link-tab-1 {
    background-color: #0000;
    background-image: url('../images/tank-inactive.svg');
    background-position: 0 0;
    background-size: auto;
    align-self: flex-start;
    width: 100px;
    height: 100px;
    padding-left: 20px;
    padding-right: 20px;
    display: block;
  }

  .tab-link-tab-1.w--current {
    background-color: #0000;
    background-image: url('../images/tank-active.svg');
    background-position: 0 0;
    background-size: auto;
    width: 100px;
    height: 100px;
  }

  .tab-link-tab-2 {
    background-color: #0000;
    background-image: url('../images/armor-inactive.svg');
    background-position: 0 0;
    background-size: auto;
    width: 100px;
    height: 100px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .tab-link-tab-2.w--current {
    background-image: url('../images/armor-active.svg');
    background-position: 0 0;
    background-size: auto;
  }

  .tab-link-tab-3 {
    background-color: #0000;
    background-image: url('../images/balancer-inactive.svg');
    background-position: 0 0;
    background-size: auto;
    width: 100px;
    height: 100px;
    padding-left: 20px;
    padding-right: 20px;
    transition: background-color .2s;
  }

  .tab-link-tab-3.w--current {
    background-image: url('../images/balancer-active.svg');
  }

  .tab-link-tab-4 {
    background-color: #0000;
    background-image: url('../images/assassin-inactive.svg');
    background-position: 0 0;
    background-size: auto;
    flex: 0 auto;
    align-self: flex-start;
    width: 100px;
    height: 100px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .tab-link-tab-4.w--current {
    background-image: url('../images/assassin-active.svg');
  }

  .tab-link-tab-5 {
    background-color: #0000;
    background-image: url('../images/duelist-inactive.svg');
    background-position: 0 0;
    background-size: auto;
    width: 100px;
    height: 100px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .tab-link-tab-5.w--current {
    background-image: url('../images/duelist-active.svg');
  }

  .class-header {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .class-summary {
    color: #f4c79f;
    margin-bottom: 40px;
    font-family: Play, sans-serif;
    font-size: 1.25rem;
    line-height: 1.3;
  }

  .heroes-description-summary {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    display: flex;
  }

  .image-55 {
    width: 100%;
    margin-bottom: 10px;
  }

  .spacer10 {
    height: 10px;
  }

  .promo-lastchance {
    outline-offset: 0px;
    background-image: linear-gradient(159deg, #000 34%, #0000 56%), url('../images/MFC_LAST.webp');
    background-position: 0 0, 50% 110%;
    background-repeat: repeat, no-repeat;
    background-size: auto, contain;
    border-radius: 5px;
    outline: 1px solid #b8890e;
    height: 50vh;
    padding: 30px 40px 40px 20px;
  }

  .promo-lbreakers {
    outline-offset: 0px;
    background-image: linear-gradient(159deg, #000 35%, #0000 56%), url('../images/MFC_BK.webp');
    background-position: 0 0, 50% 110%;
    background-repeat: repeat, no-repeat;
    background-size: auto, contain;
    border-radius: 5px;
    outline: 1px solid #b8890e;
    height: 50vh;
    padding: 30px 40px 40px 20px;
  }

  .demo-mode-text {
    color: #f7f7f7;
  }

  .body {
    background-color: #000;
  }

  .link {
    color: #8ac7ff;
  }

  .link:hover {
    color: #c6e4ff;
  }

  .text-span {
    font-size: .8rem;
  }

  .text-span-2 {
    color: #fbbe88;
  }

  .body-2 {
    background-color: #000;
  }

  .heroes-descriptive-text {
    color: #d4d4d4;
    max-width: 400px;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: .9rem;
  }

  .icon-class-marker {
    margin-left: -7px;
  }

  .image-57 {
    margin-bottom: 2px;
  }

  .spacer20 {
    height: 10px;
  }

  .tab-pane-tab-1, .tab-pane-tab-2, .tab-pane-tab-3, .tab-pane-tab-4 {
    height: 100%;
  }

  .image-58 {
    width: 60px;
  }

  .spacer-hero {
    height: 10px;
  }

  .body-black {
    background-color: #000;
  }

  .form-block {
    min-width: 600px;
    max-width: 800px;
  }

  .contact-wrap {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  ._404-wrap {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }
}

@media screen and (max-width: 991px) {
  .div-block {
    flex-flow: wrap;
    height: 7rem;
    padding-left: 40px;
    padding-right: 40px;
  }

  .awards {
    width: 18%;
  }

  .menu-icon_line-middle {
    background-color: #f4b984;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .navbar-logo-link {
    width: 150px;
  }

  .navbar-logo {
    margin-top: 0;
  }

  .menu-icon_line-top {
    background-color: #f4b984;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .navbar-link-left {
    width: auto;
    padding: .75rem 0;
    font-size: 1.125rem;
  }

  .menu-icon {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-right: -.5rem;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .button {
    align-self: center;
    max-width: 320px;
  }

  .navbar-menu-button.w--open {
    background-color: #0000;
  }

  .menu-icon_line-middle-inner {
    width: 4px;
    height: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  .menu-icon_line-bottom {
    background-color: #f4b984;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .navbar-play-link {
    flex-direction: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    align-items: stretch;
    margin-top: 1.5rem;
  }

  .navbar_menu {
    -webkit-text-fill-color: inherit;
    background-color: #000;
    background-clip: border-box;
    border-top: 1px solid #f4b984;
    border-bottom: 1px solid #000;
    align-items: flex-start;
    height: 100vh;
    margin-left: 0;
    padding: 1rem 5% 15rem;
    position: absolute;
    overflow: auto;
  }

  .navbar-menu-left {
    flex-flow: column;
    display: flex;
  }

  .about-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-columns: .75fr 1fr;
    height: auto;
    padding-bottom: 0;
  }

  .heroes-tab-link {
    border-bottom-color: #e4e6f1;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .heroes-tab-link.w--current {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .heroes-representation {
    background-position: 0 0, 0 0, 0 0, 28%;
    min-height: auto;
  }

  .heroes-representation.yellow {
    background-image: linear-gradient(270deg, #000, #0000 17%), linear-gradient(360deg, #000, #0000 32%), linear-gradient(90deg, #000 8%, #0000), url('../images/herooes-title-gap.webp');
    background-position: 0 0, 0 0, 0 0, 100% 30%;
    background-repeat: repeat, repeat, repeat, no-repeat;
    background-size: auto, auto, auto, 80%;
  }

  .heroes-representation.blue {
    background-image: linear-gradient(90deg, #000, #0000 55%), url('../images/attila.webp');
    background-position: 0 0, 100%;
    background-size: auto, 75%;
  }

  .heroes-representation.green {
    background-image: linear-gradient(0deg, #000, #0000 15%), linear-gradient(92deg, #0000 79%, #000), linear-gradient(90deg, #000 14%, #0000 87%, #0000), linear-gradient(#000, #0000 31%), url('../images/herooes-title-locklear.webp');
    background-position: 0 0, 0 0, 0 0, 0 0, 150%;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat;
    background-size: auto, auto, auto, auto, 85%;
  }

  .heroes-tab {
    grid-column-gap: 3rem;
    grid-template-rows: auto auto;
  }

  .gameview {
    width: auto;
    height: auto;
    margin-left: 20px;
    margin-right: 20px;
  }

  .container-4 {
    max-width: 728px;
  }

  .footer-divider-two {
    background-color: #4e3917;
  }

  .whats-next {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr;
  }

  .promo-tournaments {
    background-image: linear-gradient(#000 13%, #0000), url('../images/tournamrnts.png');
    background-position: 0 0, 50% 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
  }

  .tabs-menu {
    height: auto;
  }

  .classes-representation {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    place-items: start stretch;
    height: auto;
  }

  .class-header {
    width: 100%;
    margin-bottom: 0;
    line-height: 1.2;
  }

  .image-55 {
    width: 70%;
  }

  .promo-lastchance {
    background-position: 0 0, 50%;
    border-radius: 5px;
  }

  .promo-lbreakers {
    background-position: 0 0, 50% 100%;
    background-size: auto, cover;
  }

  .demo-mode-panel {
    background-color: #15151e;
    justify-content: center;
    align-items: center;
    height: 5vh;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .container-mfc {
    height: calc(100vh - 96px);
    margin-top: 0;
    margin-bottom: 0;
  }

  .tab-pane-tank {
    height: 100%;
  }

  .tab-pane-armored {
    height: 1092.03px;
  }

  .tab-pane-duelist {
    height: 100%;
  }
}

@media screen and (max-width: 767px) {
  .hero-video {
    height: 700px;
  }

  .main-tag {
    font-size: 8vw;
  }

  .btn-row-center {
    margin-top: 20px;
  }

  .awards {
    width: 25%;
  }

  .navbar-logo-link {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .navbar-menu-left {
    flex-flow: column;
    display: flex;
  }

  .navbar {
    min-height: 4rem;
  }

  .about-wrapper {
    grid-template-columns: .75fr;
    padding-bottom: 40px;
  }

  .heroes-tab-link, .heroes-tab-link.w--current {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .heroes-representation {
    height: auto;
    min-height: auto;
  }

  .heroes-representation.yellow {
    background-image: linear-gradient(270deg, #000, #0000 17%), linear-gradient(360deg, #000 52%, #0000 75%), url('../images/herooes-title-gap.webp');
    background-position: 0 0, 0 0, 50% 0;
    background-repeat: repeat, repeat, no-repeat;
    background-size: auto, auto, contain;
    justify-content: flex-start;
    align-items: center;
    padding-top: 350px;
  }

  .heroes-representation.blue {
    background-image: linear-gradient(0deg, #000 30%, #0000), url('../images/attila.webp');
    background-position: 0 0, 50% 0;
    background-repeat: repeat, no-repeat;
    background-size: auto, 100%;
    justify-content: flex-start;
    align-items: center;
    padding-top: 350px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .heroes-representation.green {
    background-image: linear-gradient(3deg, #000 53%, #0000 66%), url('../images/herooes-title-locklear.webp');
    background-position: 0 0, 50% 0;
    background-repeat: repeat, no-repeat;
    background-size: auto, 100%;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    padding-top: 350px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .heroes-tab {
    grid-column-gap: 0px;
    grid-row-gap: 0rem;
    grid-template-columns: 1fr;
  }

  .heroes-container {
    padding-left: 0;
    padding-right: 0;
  }

  .gameview {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-thumbnail {
    width: 75px;
  }

  .heroes-desrcription {
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 600px;
    padding-top: 0;
    display: block;
  }

  .heroes-essentials {
    align-self: flex-start;
  }

  .div-block-6 {
    display: flex;
  }

  .container-4 {
    padding-left: 40px;
    padding-right: 40px;
  }

  .footer-subscribe {
    padding-left: 15px;
    padding-right: 15px;
  }

  .footer-bottom {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer-copyright {
    font-size: 14px;
    line-height: 20px;
  }

  .whats-next {
    grid-template-columns: 1fr;
  }

  .tabs-menu {
    grid-row-gap: 20px;
    width: 100%;
  }

  .tabs {
    grid-template-columns: 100%;
  }

  .classes-representation {
    height: auto;
    min-height: auto;
  }

  .image-55 {
    width: 70%;
  }

  .container-mfc {
    width: 100%;
    height: 90vh;
  }

  .heroes-descriptive-text {
    min-width: 420px;
  }

  .form-block {
    min-width: 0;
  }

  .contact-wrap, ._404-wrap {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media screen and (max-width: 479px) {
  .hero-video {
    z-index: 999;
    height: 120vh;
    overflow: hidden;
  }

  .hero-bottom-wrapper {
    background-image: linear-gradient(183deg, #0000, #000 36%);
    margin-left: 40px;
    margin-right: 40px;
    padding-top: 10vh;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    bottom: 0;
  }

  .main-tag {
    color: #f8ba1e;
    text-align: center;
    margin-bottom: 10px;
    font-size: 8vw;
    line-height: 1;
  }

  .hero-sub {
    color: #fbbe88;
    font-size: 1.2rem;
    line-height: 1;
  }

  .div-block {
    grid-column-gap: 0px;
    grid-row-gap: 16px;
    flex-flow: wrap;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    height: 8rem;
    margin-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    overflow: hidden;
  }

  .btn-cta-play {
    margin-right: 0;
  }

  .about {
    margin-bottom: 40px;
    padding-top: 0;
  }

  .awards {
    object-fit: fill;
    width: 33%;
    display: block;
  }

  .menu-icon_line-middle {
    background-color: #f4b984;
  }

  .navbar-logo-link {
    width: 120px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .navbar-logo {
    margin-top: 0;
  }

  .menu-icon_line-top, .menu-icon_line-bottom {
    background-color: #f4b984;
  }

  .navbar_menu {
    justify-content: space-between;
    align-items: center;
  }

  .navbar-menu-left {
    justify-content: center;
    align-items: center;
  }

  .about-wrapper {
    grid-template-columns: 1fr;
    height: auto;
    margin-top: 0;
    padding-bottom: 0;
  }

  .heroes {
    padding-top: 0;
  }

  .heroes-tab-link, .heroes-tab-link.w--current {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .heroes-representation {
    background-image: linear-gradient(270deg, #000, #0000 51%), linear-gradient(90deg, #000, #0000 52%), linear-gradient(360deg, #000 53%, #0000 74%), linear-gradient(#000, #0000 21%), url('../images/unknown.webp');
    background-position: 0 0, 0 0, 0 0, 0 0, 50% -10%;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat;
    background-size: auto, auto, auto, auto, 175%;
    height: auto;
    padding-top: 300px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .heroes-representation.yellow {
    background-image: linear-gradient(360deg, #000 68%, #0000 80%), url('../images/herooes-title-gap.webp');
    background-position: 0 0, 50% 0;
    background-repeat: repeat, no-repeat;
    background-size: auto, 120%;
    padding-top: 250px;
  }

  .heroes-representation.blue {
    background-image: linear-gradient(360deg, #000 68%, #0000 80%), url('../images/heroes-title-attila.webp');
    background-position: 0 0, 50% 0;
    background-repeat: repeat, no-repeat;
    background-size: auto, 120%;
    padding-top: 250px;
  }

  .heroes-representation.green {
    background-image: linear-gradient(0deg, #000 62%, #0000 74%), url('../images/herooes-title-locklear.webp');
    background-position: 0 0, 50% 0;
    background-repeat: repeat, no-repeat;
    background-size: auto, contain;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 250px;
    padding-left: 40px;
    padding-right: 40px;
    display: flex;
  }

  .gameview {
    height: auto;
  }

  .hero-thumbnail {
    width: 70px;
  }

  .heroes-header {
    text-align: left;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .heroes-desrcription {
    width: 100%;
    max-width: none;
    padding-top: 0;
  }

  .heroes-essentials {
    margin-top: 10px;
  }

  .heroes-essentials-base {
    font-size: .8rem;
  }

  .heroes-essentials-type {
    font-size: 1.5rem;
  }

  .paragraph-w.footer {
    font-size: .8rem;
  }

  .highlight {
    margin-bottom: 6px;
    line-height: 1.4;
  }

  .gallery-right {
    grid-row-gap: 30px;
    grid-template-columns: 100%;
    margin-bottom: 30px;
  }

  .image-50 {
    height: auto;
  }

  .gallery-left {
    grid-row-gap: 30px;
    grid-template-columns: 100%;
    margin-bottom: 30px;
  }

  .container-4 {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .footer-subscribe {
    padding-left: 40px;
    padding-right: 40px;
  }

  .footer-bottom {
    flex-flow: wrap-reverse;
    justify-content: center;
    align-items: center;
  }

  .footer-copyright {
    margin-top: 20px;
  }

  .whats-next {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .tabs {
    grid-template-rows: auto auto;
    grid-template-columns: auto;
  }

  .classes-representation {
    grid-template-columns: 1fr;
    height: auto;
  }

  .tab-link-tab-1.w--current {
    background-position: 50%;
    background-size: contain;
  }

  .class-header {
    line-height: 1.1;
  }

  .image-55 {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .demo-mode-panel {
    margin-left: 0;
    margin-right: 0;
  }

  .heroes-descriptive-text {
    min-width: 0;
    margin-bottom: 20px;
  }

  .icon-class-marker {
    width: 50px;
    margin-left: -7px;
  }

  .spacer-hero {
    height: 0;
  }

  .contact-wrap {
    height: 90vh;
  }

  .form {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr;
  }

  ._404-wrap {
    height: 90vh;
  }
}

#w-node-_9e353303-0b9f-fbf1-82a8-940e6d655612-c86963a7 {
  justify-self: center;
}

#w-node-edb484b0-683c-a003-c4df-99d54a0d492b-c86963a7 {
  place-self: center;
}

#w-node-cc7c7a5b-0c43-6110-f514-381ab385177c-c86963a7 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-fc4b0a4f-544f-fe8d-50a6-8d5a925b5da2-c86963a7 {
  grid-area: 1 / 1 / 2 / 2;
  place-self: start center;
}

#w-node-_9b66864f-4ec6-e49e-0841-c473208f4152-c86963a7 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_9b66864f-4ec6-e49e-0841-c473208f4151-c86963a7 {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-_114ac858-f84a-9d24-d4b9-c9f939000050-c86963a7, #w-node-c788e81f-577a-b0ae-53be-34969cf404fd-c86963a7, #w-node-e79a6c3b-aa63-f0fd-64b5-e4b4c31bab35-c86963a7, #w-node-ef5092f1-3c00-cb79-45e8-027c1c8eedeb-c86963a7 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_875c1438-ba4b-c346-fd64-f72755b6fe18-c86963a7 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-baa0b923-b7d6-b091-8fdc-b5a5a0122545-a3203b5b {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

@media screen and (min-width: 1280px) {
  #w-node-_9e353303-0b9f-fbf1-82a8-940e6d655612-c86963a7 {
    place-self: center;
  }

  #w-node-edb484b0-683c-a003-c4df-99d54a0d492b-c86963a7 {
    place-self: center start;
  }

  #w-node-fc4b0a4f-544f-fe8d-50a6-8d5a925b5da2-c86963a7 {
    grid-area: 1 / 1 / 2 / 2;
    place-self: start center;
  }

  #w-node-fc4b0a4f-544f-fe8d-50a6-8d5a925b5dac-c86963a7 {
    grid-area: 1 / 2 / 2 / 3;
  }

  #w-node-_9b66864f-4ec6-e49e-0841-c473208f4152-c86963a7 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_4b1d52c3-3d85-c442-afdd-0fb9ecbd1fe0-c86963a7 {
    place-self: start;
  }

  #w-node-_114ac858-f84a-9d24-d4b9-c9f939000050-c86963a7 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_7658d810-aa5d-b231-8a8a-3d6323bb1e02-c86963a7 {
    place-self: start;
  }

  #w-node-c788e81f-577a-b0ae-53be-34969cf404fd-c86963a7 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_8dcc3a32-95a0-924d-46ae-89cf8316477f-c86963a7 {
    place-self: start;
  }

  #w-node-e79a6c3b-aa63-f0fd-64b5-e4b4c31bab35-c86963a7 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-feee38db-c762-e88d-1504-221290d77b80-c86963a7 {
    place-self: start;
  }

  #w-node-ef5092f1-3c00-cb79-45e8-027c1c8eedeb-c86963a7 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_2f2c43f9-2806-a5d1-9ebd-aa28925dda0b-c86963a7 {
    place-self: start;
  }

  #w-node-_875c1438-ba4b-c346-fd64-f72755b6fe18-c86963a7 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 991px) {
  #w-node-_9e353303-0b9f-fbf1-82a8-940e6d655612-c86963a7 {
    justify-self: center;
  }

  #w-node-cc7c7a5b-0c43-6110-f514-381ab385177c-c86963a7 {
    grid-area: 1 / 1 / 2 / 3;
  }

  #w-node-cc7c7a5b-0c43-6110-f514-381ab3851795-c86963a7 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_9b66864f-4ec6-e49e-0841-c473208f4152-c86963a7 {
    grid-column: span 1 / span 1;
  }

  #w-node-_9b66864f-4ec6-e49e-0841-c473208f4151-c86963a7 {
    grid-row: 3 / 4;
  }

  #w-node-_4b1d52c3-3d85-c442-afdd-0fb9ecbd1fe0-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-_114ac858-f84a-9d24-d4b9-c9f939000050-c86963a7 {
    grid-area: 1 / 1 / 2 / 2;
    align-self: auto;
  }

  #w-node-_114ac858-f84a-9d24-d4b9-c9f939000052-c86963a7 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_7658d810-aa5d-b231-8a8a-3d6323bb1e02-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
    place-self: start;
  }

  #w-node-c788e81f-577a-b0ae-53be-34969cf404fd-c86963a7 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-_8dcc3a32-95a0-924d-46ae-89cf8316477f-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-e79a6c3b-aa63-f0fd-64b5-e4b4c31bab35-c86963a7 {
    grid-column: span 1 / span 1;
  }

  #w-node-feee38db-c762-e88d-1504-221290d77b80-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-ef5092f1-3c00-cb79-45e8-027c1c8eedeb-c86963a7 {
    grid-column: span 1 / span 1;
  }

  #w-node-_2f2c43f9-2806-a5d1-9ebd-aa28925dda0b-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_9e353303-0b9f-fbf1-82a8-940e6d655612-c86963a7 {
    justify-self: center;
  }

  #w-node-edb484b0-683c-a003-c4df-99d54a0d492b-c86963a7 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-fc4b0a4f-544f-fe8d-50a6-8d5a925b5da2-c86963a7 {
    grid-area: 1 / 1 / 2 / 2;
    place-self: start center;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_9e353303-0b9f-fbf1-82a8-940e6d655612-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-edb484b0-683c-a003-c4df-99d54a0d492b-c86963a7 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-cc7c7a5b-0c43-6110-f514-381ab385177c-c86963a7 {
    grid-column-end: 2;
    justify-self: center;
  }

  #w-node-cc7c7a5b-0c43-6110-f514-381ab3851795-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-_9b66864f-4ec6-e49e-0841-c473208f4152-c86963a7 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-_9b66864f-4ec6-e49e-0841-c473208f4151-c86963a7 {
    grid-row: 3 / 4;
  }

  #w-node-_114ac858-f84a-9d24-d4b9-c9f939000050-c86963a7 {
    grid-column: span 1 / span 1;
  }

  #w-node-_114ac858-f84a-9d24-d4b9-c9f939000052-c86963a7 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_7658d810-aa5d-b231-8a8a-3d6323bb1e02-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-c788e81f-577a-b0ae-53be-34969cf404fd-c86963a7 {
    grid-column: span 1 / span 1;
  }

  #w-node-_8dcc3a32-95a0-924d-46ae-89cf8316477f-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-e79a6c3b-aa63-f0fd-64b5-e4b4c31bab35-c86963a7 {
    grid-column: span 1 / span 1;
  }

  #w-node-feee38db-c762-e88d-1504-221290d77b80-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-ef5092f1-3c00-cb79-45e8-027c1c8eedeb-c86963a7 {
    grid-column: span 1 / span 1;
  }

  #w-node-_2f2c43f9-2806-a5d1-9ebd-aa28925dda0b-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-_7ca273d1-34fd-9ca9-d399-e6e1ad9cc802-c86963a7 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-ca50846a-5be4-201b-3237-38face2c9940-c86963a7 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #w-node-bc6700e4-a809-981e-c716-e0829dc68a1e-c86963a7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-f0cbc83d-81d3-79e1-eb4a-f057a412b54d-a3203b5b {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-baa0b923-b7d6-b091-8fdc-b5a5a0122545-a3203b5b {
    grid-column: span 1 / span 1;
  }
}