.content-body__decoration--0 {
  top: 20%;
}
.content-body__decoration--1 {
  top: 40%;
}
.content-body__decoration--2 {
  top: 60%;
}
.content-body__decoration--3 {
  top: 80%;
}
.heroes {
  background: url(/sites/fe16/assets/img/battlefield/heroes-bg.jpg) top
    center/cover no-repeat;
  display: inline-block;
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.is-blue .heroes,
.is-red .heroes,
.is-yellow .heroes {
  overflow: visible;
}
.heroes::before {
  background: rgba(58, 29, 91, 0.5);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
}
.is-red .heroes::before {
  background: rgba(182, 38, 56, 0.5);
}
.is-blue .heroes::before {
  background: rgba(66, 77, 152, 0.5);
}
.is-yellow .heroes::before {
  background: rgba(200, 172, 61, 0.5);
}
.heroes__inner {
  position: relative;
  text-align: center;
}
.is-blue .heroes__inner::after,
.is-red .heroes__inner::after,
.is-yellow .heroes__inner::after {
  content: "";
  z-index: 1;
}
.heroes__inner::after {
  background-repeat: no-repeat;
  background-size: contain;
  height: 158px;
  position: absolute;
  right: 0;
  right: 20px;
  top: -15px;
  width: 100px;
}
.is-red .heroes__inner::after {
  background-image: url(/sites/fe16/assets/img/battlefield/blackeagles.png);
}
.is-blue .heroes__inner::after {
  background-image: url(/sites/fe16/assets/img/battlefield/bluelions.png);
}
.is-yellow .heroes__inner::after {
  background-image: url(/sites/fe16/assets/img/battlefield/goldendeer.png);
}
.heroes__image--left {
  left: -200px;
  position: absolute;
  top: -40px;
  width: 90%;
}
.is-red .heroes__image--left,
.is-yellow .heroes__image--left {
  display: none;
}
.is-blue .heroes__image--left {
  left: -70px;
  top: 0;
}
.heroes__image--center {
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: 60%;
  z-index: 1;
}
.is-blue .heroes__image--center,
.is-red .heroes__image--center {
  display: none;
}
.is-yellow .heroes__image--center {
  margin: 0;
  top: 0;
  z-index: 0;
}
.heroes__image--right {
  position: absolute;
  right: -50px;
  width: 60%;
}
.is-blue .heroes__image--right,
.is-yellow .heroes__image--right {
  display: none;
}
.is-red .heroes__image--right {
  left: 0;
  width: 60%;
}
.battlefield {
  background-color: var(--color-main);
  color: #fff;
  display: block;
  position: relative;
  z-index: 1;
}
.battlefield__content {
  padding-bottom: 80px;
  position: relative;
}
.is-yellow .battlefield__content .media-button {
  color: #000;
}
.battlefield__image {
  margin-bottom: 30px;
}
.battlefield__heading {
  margin-bottom: 25px;
}
.battlefield__column {
  margin-bottom: 30px;
  text-align: center;
}
.battlefield__column--pull-top {
  position: relative;
  top: -25px;
}
.battlefield__image-container {
  height: 100px;
  margin-bottom: 150px;
  margin-top: 40px;
  position: relative;
  text-align: center;
  width: 100%;
}
.battlefield__image-left {
  left: 0;
}
.battlefield__image-right {
  right: 0;
}
.battlefield__image-left,
.battlefield__image-right {
  height: 222px;
  position: absolute;
  width: 250px;
  z-index: 1;
}
.battlefield__image-center {
  background-image: url(/sites/fe16/assets/img/battlefield/bg-symbol.png),
    radial-gradient(
      ellipse at center,
      rgba(234, 223, 169, 0.2) 0,
      rgba(234, 223, 169, 0) 65%
    );
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 149px;
  left: 0;
  margin: -30px auto 0;
  opacity: 0.8;
  position: absolute;
  right: 0;
  text-align: center;
  width: 135px;
}
.is-red .battlefield__image-center {
  background-image: url(/sites/fe16/assets/img/battlefield/black-eagles-symbol.png),
    radial-gradient(
      50% 50%,
      rgba(234, 223, 167, 0.6) 40%,
      rgba(234, 223, 167, 0) 100%
    );
  background-size: contain;
}
.is-blue .battlefield__image-center {
  background-image: url(/sites/fe16/assets/img/battlefield/bluelions-symbol.png),
    radial-gradient(
      50% 50%,
      rgba(234, 223, 167, 0.6) 40%,
      rgba(234, 223, 167, 0) 100%
    );
  background-size: contain;
}
.is-yellow .battlefield__image-center {
  background-image: url(/sites/fe16/assets/img/battlefield/goldendeer-symbol.png);
  background-size: contain;
}
.row--pull-top {
  position: relative;
  z-index: 1;
}
.image-row {
  position: relative;
  width: 100%;
}
.image-row__content {
  background: #000;
  width: 100%;
}
.image-row__content .inset-box,
.image-row__content .inset-box__content {
  background: 0 0;
  color: #fff;
  height: 100%;
}
.image-row__content .inset-box__content {
  padding: 50px 30px;
  text-align: center;
}
.image-row__image {
  cursor: pointer;
  width: 100%;
}
.image-row__image:focus .icon,
.image-row__image:hover .icon {
  color: #e1cc71;
}
.image-row__heading {
  margin-bottom: 30px;
}
.choice__row {
  margin-top: 40px;
}
.choice__options {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
.choice__option {
  justify-content: flex-start;
  margin-top: 30px;
  width: 100%;
}
.choice__option-heading {
  margin: 0;
}
.choice__heading {
  margin-bottom: 0;
}
.choice {
  padding-bottom: 40px;
  padding-top: 50px;
}
.purple-block {
  background-color: var(--color-main);
  color: #fff;
}
.is-yellow .purple-block .media-button {
  color: #000;
}
.purple-block__bg {
  padding: 50px 20px;
  position: relative;
  z-index: 1;
}
.purple-block__content {
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin-bottom: 30px;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}
.is-yellow .purple-block__content {
  color: #000;
}
.purple-block__content-heading {
  margin-bottom: 30px;
}
@media only screen and (min-width: 71.5em) {
  .heroes__inner::after {
    height: 325px;
    width: 205px;
  }
  .battlefield__image-container {
    height: 450px;
  }
  .battlefield__image-left,
  .battlefield__image-right {
    height: 559px;
    width: 629px;
  }
}
@media only screen and (min-width: 40em) {
  .heroes {
    height: 300px;
  }
  .heroes {
    height: 400px;
  }
  .heroes__inner::after {
    height: 238px;
    width: 150px;
  }
  .is-blue .heroes__image--left {
    left: 0;
  }
  .heroes__image--left {
    left: -150px;
    top: -50px;
    width: 65%;
  }
  .is-yellow .heroes__image--center {
    border: none;
    left: 50px;
    top: -80px;
    width: 55%;
  }
  .heroes__image--center {
    width: 50%;
  }
  .is-red .heroes__image--right {
    left: 50px;
  }
  .heroes__image--right {
    right: 0;
    top: 0;
    width: 50%;
  }
  .battlefield {
    margin-top: -50px;
  }
  .battlefield__column {
    margin-bottom: 0;
  }
  .battlefield__column + .battlefield__column {
    margin-left: 30px;
  }
  .battlefield__column--pull-top {
    margin-top: -30px;
    top: 0;
  }
  .battlefield__image-container {
    height: 250px;
    margin-bottom: 0;
  }
  .battlefield__image-left,
  .battlefield__image-right {
    height: 355px;
    width: 400px;
  }
  .battlefield__image-center {
    height: 275px;
    width: 250px;
  }
  .row--pull-top {
    margin-top: 30px;
  }
  .image-row__content {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0, #000 60%);
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 440px;
  }
  .image-row__content .inset-box__content {
    text-align: left;
  }
  .image-row__image > img {
    display: block;
    height: 440px;
    object-fit: cover;
    width: 100%;
  }
  .image-row__image .icon {
    left: calc(50% + 440px / 2);
  }
  .choice__option {
    margin-top: 0;
  }
  .choice__option:last-child {
    margin-top: 45px;
  }
  .purple-block__content {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 64em) {
  .heroes__inner::after {
    height: 300px;
    width: 189px;
  }
  .heroes__image--left {
    left: -300px;
    top: -80px;
    width: auto;
  }
  .is-yellow .heroes__image--center {
    top: -125px;
  }
  .heroes__image--center {
    width: auto;
  }
  .heroes__image--right {
    width: auto;
  }
  .battlefield__image-container {
    height: 350px;
  }
  .battlefield__image-left,
  .battlefield__image-right {
    height: 444px;
    width: 500px;
  }
  .battlefield__image-center {
    height: 420px;
    width: 380px;
  }
}
@media only screen and (max-width: 39.9375em) {
  .image-row__image {
    position: relative;
  }
}
@media only screen and (min-width: 25em) and (max-width: 39.9375em) {
  .is-yellow .heroes__image--center {
    top: -40px;
  }
}