/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./node_modules/sass-loader/dist/cjs.js!./Content/styles/landing-page.scss ***!
  \*************************************************************************************************************************************************************************************************/
@font-face {
  font-family: "Roboto";
  src: url("https://www.dndbeyond.com/fonts/roboto-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("https://www.dndbeyond.com/fonts/robotocondensed-regular-webfont.woff2") format("woff2");
}
.base-svg {
  float: left;
  height: 0px;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.encounters_main {
  font-size: 16px;
}
.encounters_main a {
  display: inline-block;
  text-align: center;
}
.encounters_main .btn-wrapper {
  width: 100%;
  max-width: 300px;
  text-align: center;
  margin: 0 auto;
}
.encounters_main .btn {
  width: 100%;
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: "Roboto", Helvetica, sans-serif;
  letter-spacing: 1px;
  line-height: 1.1rem;
  text-transform: uppercase;
  padding: 14.5px 20px 13.5px;
  transition: all 0.2s ease-in-out;
  background: #fff;
  margin: 0 auto;
}
.encounters_main .btn:hover, .encounters_main .btn:focus {
  color: #fff;
  background: #000;
  transition: all 0.2s ease-in-out;
}
.encounters_main .btn.blue-theme {
  color: #fff;
  background: #1b9af0;
}
.encounters_main .btn.blue-theme:hover, .encounters_main .btn.blue-theme:focus {
  color: #fff;
  background: #3678b8;
}
.encounters_main .img-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.encounters_main .img-wrapper img {
  width: 100%;
  height: auto;
}
.encounters_main .black-bg {
  color: #fff;
  background: #000;
}
.encounters_main .offblack-bg {
  color: #fff;
  background: #10161a;
}
.encounters_main .section {
  padding: 50px 20px;
}
.encounters_main .encounters-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.encounters_main h1.encounters-title {
  font-size: 2.1rem;
}
.encounters_main h2.encounters-title {
  font-size: 1.9rem;
}
.encounters_main h2.encounters-title_alt {
  font-size: 1.6rem;
}
.encounters_main h3.encounters-title {
  font-size: 1.5rem;
}
@media screen and (min-width: 1025px) {
  .encounters_main h1.encounters-title {
    font-size: 3.25rem;
  }
  .encounters_main h2.encounters-title {
    font-size: 2.95rem;
  }
  .encounters_main h2.encounters-title_alt {
    font-size: 1.85rem;
  }
  .encounters_main h3.encounters-title {
    font-size: 2.2rem;
  }
}
.encounters_main .encounters-hero {
  padding: 0;
  position: relative;
}
.encounters_main .encounters-hero .encounters-title {
  padding: 25px 0;
  text-shadow: 1px 1px 5px #333;
  width: 85%;
  margin: 0 auto;
}
.encounters_main .encounters-hero .encounters-title span {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 20px;
  display: block;
}
.encounters_main .encounters-hero .encounters-title span .beta {
  color: #000;
  font-size: 0.9rem;
  line-height: 1;
  padding: 2px 10px 0;
  background: #fff;
  display: inline-block;
  border-radius: 10px;
  text-shadow: none;
}
@media screen and (max-width: 499px) {
  .encounters_main .encounters-hero .encounters-title span {
    font-size: 0.7rem;
  }
  .encounters_main .encounters-hero .encounters-title span .beta {
    font-size: 0.8rem;
  }
}
@media screen and (min-width: 1025px) {
  .encounters_main .encounters-hero .encounters-title span {
    font-size: 1.2rem;
  }
  .encounters_main .encounters-hero .encounters-title span .beta {
    font-size: 1.3rem;
    line-height: 1.2;
  }
}
.encounters_main .encounters-hero .hero-content {
  color: #fff;
  text-align: center;
  padding: 20px;
}
.encounters_main .encounters-hero .hero-content p {
  width: 100%;
  font-size: 1.25rem;
  margin: 0 auto 50px;
  text-shadow: 1px 1px 5px #333;
  max-width: 485px;
}
.encounters_main .encounters-hero .img-wrapper.hero-img {
  z-index: -1;
  position: absolute;
}
.encounters_main .encounters-hero,
.encounters_main .hero-content-wrapper {
  height: 27vh;
  min-height: 550px;
}
@media screen and (max-width: 700px) {
  .encounters_main .encounters-hero .img-wrapper,
.encounters_main .hero-content-wrapper .img-wrapper {
    height: 100%;
    overflow: visible;
  }
  .encounters_main .encounters-hero .img-wrapper img,
.encounters_main .hero-content-wrapper .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom right;
  }
}
@media screen and (min-width: 900px) {
  .encounters_main .encounters-hero,
.encounters_main .hero-content-wrapper {
    height: 30vh;
    min-height: 450px;
  }
}
@media screen and (min-width: 1100px) {
  .encounters_main .encounters-hero,
.encounters_main .hero-content-wrapper {
    height: 40vh;
    min-height: 550px;
  }
}
@media screen and (min-width: 1300px) {
  .encounters_main .encounters-hero,
.encounters_main .hero-content-wrapper {
    height: 50vh;
  }
}
@media screen and (min-width: 1700px) {
  .encounters_main .encounters-hero,
.encounters_main .hero-content-wrapper {
    height: 60vh;
  }
}
@media screen and (min-width: 1900px) {
  .encounters_main .encounters-hero,
.encounters_main .hero-content-wrapper {
    height: 70vh;
  }
}
@media screen and (min-width: 2100px) {
  .encounters_main .encounters-hero,
.encounters_main .hero-content-wrapper {
    height: 75vh;
  }
}
.encounters_main .three-box {
  width: 100%;
  max-width: 1100px;
  text-align: center;
  margin: 0 auto 25px;
}
.encounters_main .three-box .encounters-title_alt {
  margin-bottom: 50px;
  margin-top: 50px;
}
.encounters_main .three-box .encounters-flex .encounters-flex_box {
  width: 95%;
  max-width: 320px;
  margin: 0 auto 50px;
  box-shadow: 0 0 10px -3px #999;
  border: 1px solid #e9e6e6;
  border-radius: 26px;
}
.encounters_main .three-box .encounters-flex .img-wrapper {
  max-width: 320px;
  border-radius: 20px;
}
.encounters_main .three-box .encounters-flex .img-wrapper img {
  width: 101%;
}
@media screen and (min-width: 900px) {
  .encounters_main .three-box .encounters-title_alt {
    color: #fff;
    text-shadow: 1px 1px 5px #333;
  }
  .encounters_main .three-box .encounters-flex {
    justify-content: space-between;
  }
  .encounters_main .three-box .encounters-flex .encounters-flex_box {
    width: 30%;
    margin: 0 auto;
  }
}
.encounters_main .two-col_5050 {
  text-align: center;
  padding: 50px 20px 100px;
}
.encounters_main .two-col_5050 .encounters-flex {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.encounters_main .two-col_5050 .encounters-flex .encounters-flex_box {
  width: 100%;
}
.encounters_main .two-col_5050 .encounters-flex .encounters-flex_box p {
  width: 100%;
  max-width: 515px;
  font-size: 1.25rem;
  margin: 25px auto 0;
}
.encounters_main .two-col_5050 .encounters-flex .img-wrapper {
  max-width: 620px;
  margin: 25px auto 0;
}
@media screen and (min-width: 1025px) {
  .encounters_main .two-col_5050 .encounters-flex .encounters-flex_box {
    width: 50%;
  }
  .encounters_main .two-col_5050 .encounters-flex .encounters-flex_box .encounters-title {
    max-width: 515px;
  }
  .encounters_main .two-col_5050 .encounters-flex .encounters-flex_box p {
    margin: 25px 0 0;
  }
  .encounters_main .two-col_5050 .encounters-flex .encounters-flex_box:first-child {
    text-align: left;
  }
  .encounters_main .two-col_5050 .encounters-flex .encounters-flex_box:last-child {
    padding: 0 30px;
  }
}
.encounters_main .three-box_alt {
  text-align: center;
}
.encounters_main .three-box_alt .encounters-title {
  margin: 25px;
}
.encounters_main .three-box_alt .encounters-flex {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.encounters_main .three-box_alt .encounters-flex .encounters-flex_box {
  width: 100%;
  padding: 30px 20px 20px;
  margin: 0 auto 65px;
  border-radius: 5px;
  background: #182025;
  position: relative;
}
.encounters_main .three-box_alt .encounters-flex .encounters-flex_box .flexbox_img {
  width: 85px;
  height: 85px;
  padding: 20px;
  border-radius: 50%;
  background: #31404d;
  position: absolute;
  margin: auto;
  right: 0;
  left: 0;
  top: -45px;
}
.encounters_main .three-box_alt .encounters-flex .encounters-flex_box .flexbox_img .icon {
  width: 3rem;
  height: 3rem;
  position: absolute;
  margin: auto;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
.encounters_main .three-box_alt .encounters-flex .encounters-flex_box p {
  color: #a3acb6;
  font-size: 1.25rem;
}
.encounters_main .three-box_alt .encounters-flex .encounters-flex_box:first-child {
  margin: 50px auto 65px;
}
.encounters_main .three-box_alt .encounters-flex .encounters-flex_box:last-child {
  margin: 0 auto;
}
@media screen and (min-width: 1025px) {
  .encounters_main .three-box_alt .encounters-title {
    padding: 0 20px;
    margin: 0 0 50px;
  }
  .encounters_main .three-box_alt h3.encounters-title {
    margin-top: 25px;
  }
  .encounters_main .three-box_alt .encounters-flex {
    align-items: stretch;
    justify-content: space-between;
  }
  .encounters_main .three-box_alt .encounters-flex .encounters-flex_box {
    width: 30%;
    margin: 100px auto 0 !important;
  }
}
.encounters_main .fullwidth_callout {
  height: 420px;
  text-align: center;
}
.encounters_main .fullwidth_callout .btn-wrapper {
  margin-top: 50px;
}

.characters_main {
  font-size: 16px;
  font-family: Roboto, "Open Sans", Helvetica, sans-serif;
  box-sizing: border-box;
}
.characters_main a {
  display: inline-block;
  text-align: center;
}
.characters_main h1,
.characters_main h2,
.characters_main h3,
.characters_main h4,
.characters_main h5,
.characters_main h6 {
  font-weight: 500;
  line-height: 1.2;
}
.characters_main p {
  line-height: 1.6;
}
.characters_main .btn-wrapper {
  width: 98%;
  max-width: 320px;
  text-align: center;
  margin: 0 auto;
}
.characters_main .btn {
  width: 100%;
  color: #000;
  line-height: 1.1rem;
  text-transform: uppercase;
  padding: 14.5px 20px 13.5px;
  transition: all 0.2s ease-in-out;
  background: #fff;
  margin: 0 auto;
  font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 4px;
  max-width: 320px;
}
.characters_main .btn:hover, .characters_main .btn:focus {
  color: #fff;
  background: #000;
  transition: all 0.2s ease-in-out;
}
.characters_main .btn.blue-theme {
  color: #fff;
  background-color: #1b9af0;
}
.characters_main .btn.blue-theme:hover, .characters_main .btn.blue-theme:focus {
  background-color: #3678b8;
}
.characters_main .img-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.characters_main .img-wrapper img {
  width: 100%;
  height: auto;
}
.characters_main .black-bg {
  color: #fff;
  background-color: #000;
}
.characters_main .grey-bg {
  color: #fff;
  background: #31404d;
}
.characters_main .section .section {
  padding: 50px 20px;
}
.characters_main .characters-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.characters_main .characters-flex .player-app-link {
  font-size: 1.25rem;
  color: #fff;
  font-size: 1.25rem;
  font-weight: bolder;
  text-decoration: underline;
}
.characters_main h1.characters-title {
  font-size: 2.1rem;
  margin: 0 0 0.2em;
}
.characters_main h2.characters-title {
  font-size: 1.9rem;
  margin: 0 0 0.2em;
}
.characters_main h2.characters-title_alt {
  font-size: 1.6rem;
}
.characters_main h3.characters-title {
  font-size: 1.5rem;
  margin: 0 0 0.2em;
}
@media screen and (min-width: 1025px) {
  .characters_main h1.characters-title {
    font-size: 3.25rem;
  }
  .characters_main h2.characters-title {
    font-size: 2.95rem;
  }
  .characters_main h2.characters-title_alt {
    font-size: 1.85rem;
  }
  .characters_main h3.characters-title {
    font-size: 2.2rem;
  }
}
.characters_main .char-top.char-image-bg {
  background: url(../../app/images/Content/images/feature-pages/cs/entireTop_bg.jpg) no-repeat #141414;
  background-position: top left;
  background-size: cover;
}
@media screen and (min-width: 1025px) {
  .characters_main .char-top.char-image-bg {
    background-position: top center;
    background-size: 100%;
  }
}
@media screen and (min-width: 1440px) {
  .characters_main .char-top {
    min-height: 1980px;
  }
}
.characters_main .characters-hero {
  padding: 0;
  position: relative;
}
.characters_main .characters-hero .characters-title {
  padding: 25px 0;
  text-shadow: 1px 1px 5px #333;
}
.characters_main .characters-hero .characters-title span {
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 20px;
  display: block;
}
@media screen and (max-width: 499px) {
  .characters_main .characters-hero .characters-title span {
    font-size: 0.9rem;
  }
  .characters_main .characters-hero .characters-title span .beta {
    font-size: 0.8rem;
  }
}
.characters_main .characters-hero .hero-content-wrapper {
  min-height: 500px;
  margin: 0 0 50px;
}
.characters_main .characters-hero .hero-content-wrapper .hero-content {
  width: 98%;
  max-width: 500px;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  padding: 20px;
}
.characters_main .characters-hero .hero-content-wrapper .hero-content p {
  width: 100%;
  max-width: 485px;
  font-size: 1.25rem;
  margin: 0 auto 50px;
  text-shadow: 0 0 10px #333;
}
@media screen and (min-width: 1440px) {
  .characters_main .characters-hero .hero-content-wrapper {
    min-height: 615px;
    margin: 0 0;
  }
}
@media screen and (min-width: 1640px) {
  .characters_main .characters-hero .hero-content-wrapper {
    min-height: 82vh;
    margin: 0 0;
  }
}
.characters_main .fullwidth_image {
  width: 100%;
  max-width: 1065px;
  margin: 0 auto 50px;
}
@media screen and (min-width: 1440px) {
  .characters_main .fullwidth_image {
    margin: 0 auto 150px;
  }
}
.characters_main .three-box_alt {
  text-align: center;
}
.characters_main .three-box_alt .characters-title {
  margin: 25px;
}
.characters_main .three-box_alt .characters-flex {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.characters_main .three-box_alt .characters-flex .characters-flex_box {
  width: 100%;
  padding: 30px 20px 20px;
  margin: 0 auto 65px;
  border-radius: 5px;
  background: #182025;
  position: relative;
}
.characters_main .three-box_alt .characters-flex .characters-flex_box .flexbox_img {
  width: 85px;
  height: 85px;
  padding: 20px;
  border-radius: 50%;
  background: #31404d;
  position: absolute;
  margin: auto;
  right: 0;
  left: 0;
  top: -45px;
}
.characters_main .three-box_alt .characters-flex .characters-flex_box .flexbox_img .icon {
  width: 3rem;
  height: 3rem;
  position: absolute;
  margin: auto;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
.characters_main .three-box_alt .characters-flex .characters-flex_box p {
  color: #a3acb6;
  font-size: 1.25rem;
}
.characters_main .three-box_alt .characters-flex .characters-flex_box:first-child {
  margin: 50px auto 65px;
}
.characters_main .three-box_alt .characters-flex .characters-flex_box:last-child {
  margin: 0 auto;
}
@media screen and (min-width: 1025px) {
  .characters_main .three-box_alt .characters-title {
    padding: 0 20px;
    margin: 0 0 50px;
  }
  .characters_main .three-box_alt h3.characters-title {
    margin-top: 25px;
  }
  .characters_main .three-box_alt .characters-flex {
    align-items: stretch;
    justify-content: space-between;
  }
  .characters_main .three-box_alt .characters-flex .characters-flex_box {
    width: 30%;
    margin: 100px auto 0 !important;
  }
}
.characters_main .two-col_5050 {
  text-align: center;
}
.characters_main .two-col_5050 .characters-flex {
  width: 100%;
  max-width: 1200px;
  height: 100%;
  min-height: 400px;
  margin: 0 auto;
}
.characters_main .two-col_5050 .characters-flex .characters-flex_box {
  width: 100%;
}
.characters_main .two-col_5050 .characters-flex .characters-flex_box p {
  width: 100%;
  max-width: 515px;
  font-size: 1.25rem;
  margin: 25px auto 0;
}
.characters_main .two-col_5050 .characters-flex .characters-flex_box:first-child {
  margin-bottom: 50px;
}
.characters_main .two-col_5050 .characters-flex .img-wrapper {
  max-width: 620px;
  margin: 25px auto 0;
}
@media screen and (min-width: 1025px) {
  .characters_main .two-col_5050 .characters-flex .characters-flex_box {
    width: 50%;
    text-align: left;
  }
  .characters_main .two-col_5050 .characters-flex .characters-flex_box .characters-title {
    max-width: 525px;
  }
  .characters_main .two-col_5050 .characters-flex .characters-flex_box p {
    margin: 25px 0 0;
  }
  .characters_main .two-col_5050 .characters-flex .characters-flex_box:first-child {
    margin-bottom: 0;
  }
}
.characters_main .fullwidth_callout {
  height: 420px;
  text-align: center;
}
.characters_main .fullwidth_callout .btn-wrapper {
  margin-top: 50px;
}

.campaign_main {
  font-size: 16px;
}
.campaign_main a {
  display: inline-block;
  text-align: center;
}
.campaign_main .btn-wrapper {
  width: 100%;
  max-width: 300px;
  text-align: center;
  margin: 0 auto;
}
.campaign_main .btn {
  border: none;
  width: 100%;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  max-width: 320px;
  font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: 1px;
  line-height: 1rem;
  text-transform: uppercase;
  padding: 14.5px 20px 13.5px;
  transition: all 0.2s ease-in-out;
  background: #fff;
  margin: 0 auto;
}
.campaign_main .btn:hover, .campaign_main .btn:focus {
  color: #fff;
  background: #000;
  transition: all 0.2s ease-in-out;
}
.campaign_main .btn.blue-theme, .campaign_main .btn.btn-primary {
  color: #fff;
  background: #1b9af0;
  -webkit-appearance: none;
}
.campaign_main .btn.blue-theme:hover, .campaign_main .btn.blue-theme:focus, .campaign_main .btn.btn-primary:hover, .campaign_main .btn.btn-primary:focus {
  color: #ffffff;
  background: #3678B8;
}
.campaign_main .btn.btn-outline-primary {
  width: 33% !important;
  color: #1b9af0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 8px 12px 6px !important;
  border: 1px solid #0d6efd !important;
}
.campaign_main .btn.btn-outline-primary.active {
  color: #fff !important;
  background-color: #1b9af0;
}
.campaign_main .price-pills button:hover {
  color: #fff !important;
  background-color: #1b9af0;
}
@media (max-width: 340px) {
  .campaign_main .btn.btn-outline-primary {
    font-size: 11px !important;
  }
}
@media (max-width: 540px) {
  .campaign_main .btn.btn-outline-primary {
    font-size: 12px !important;
  }
}
@media (max-width: 767.98px) {
  .campaign_main .price-pills button .badge {
    left: 50%;
    transform: translate(-55%, 0);
  }
}
.campaign_main .img-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.campaign_main .img-wrapper img {
  width: 100%;
  height: auto;
}
.campaign_main .black-bg {
  color: #fff;
  background: #000;
}
.campaign_main .offblack-bg {
  color: #fff;
  background: #10161a;
}
.campaign_main .section {
  padding: 50px 20px;
}
.campaign_main .campaign-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 1025px) {
  .campaign_main .campaign-flex .campaign-flex_box.order-one {
    order: 1;
  }
  .campaign_main .campaign-flex .campaign-flex_box.order-two {
    order: 2;
  }
}
.campaign_main h1.campaign-title {
  font-size: 2.1rem;
}
.campaign_main h2.campaign-title {
  font-size: 1.9rem;
}
.campaign_main h2.campaign-title_alt {
  font-size: 1.6rem;
}
.campaign_main h3.campaign-title {
  font-size: 1.5rem;
}
@media screen and (min-width: 1025px) {
  .campaign_main h1.campaign-title {
    font-size: 48px;
    line-height: 57.6px;
  }
  .campaign_main h2.campaign-title {
    font-size: 2.95rem;
  }
  .campaign_main h2.campaign-title_alt {
    font-size: 1.85rem;
  }
  .campaign_main h3.campaign-title {
    font-size: 2.2rem;
  }
}
.campaign_main .campaign-hero {
  padding: 0;
  position: relative;
}
.campaign_main .campaign-hero .campaign-title {
  margin: 0;
  padding: 25px 0 21px;
  text-shadow: 1px 1px 5px #333;
}
.campaign_main .campaign-hero .campaign-title span {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 21px;
  text-transform: uppercase;
  margin: 0 0 21px;
  display: block;
}
.campaign_main .campaign-hero .campaign-title span .beta {
  color: #000;
  font-size: 0.9rem;
  line-height: 1;
  padding: 2px 10px 0;
  background: #fff;
  display: inline-block;
  border-radius: 10px;
  text-shadow: none;
}
@media screen and (max-width: 499px) {
  .campaign_main .campaign-hero .campaign-title span {
    font-size: 0.7rem;
  }
  .campaign_main .campaign-hero .campaign-title span .beta {
    font-size: 0.8rem;
  }
}
@media screen and (min-width: 1025px) {
  .campaign_main .campaign-hero .campaign-title span {
    font-size: 1.2rem;
  }
  .campaign_main .campaign-hero .campaign-title span .beta {
    font-size: 1.3rem;
    line-height: 1.2;
  }
}
.campaign_main .campaign-hero .hero-content {
  color: #fff;
  text-align: center;
  padding: 20px;
}
.campaign_main .campaign-hero .hero-content p {
  width: 100%;
  font-size: 20px;
  line-height: 32px;
  margin: 0;
  text-shadow: 1px 1px 5px #333;
}
.campaign_main .campaign-hero .img-wrapper.hero-img {
  height: 100%;
  z-index: -1;
  position: absolute;
}
.campaign_main .campaign-hero .img-wrapper.hero-img img {
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}
.campaign_main .campaign-hero,
.campaign_main .hero-content-wrapper {
  height: 27vh;
  min-height: 650px;
}
@media screen and (max-width: 374px) {
  .campaign_main .campaign-hero,
.campaign_main .hero-content-wrapper {
    min-height: 475px;
  }
}
@media screen and (max-width: 700px) {
  .campaign_main .campaign-hero .img-wrapper,
.campaign_main .hero-content-wrapper .img-wrapper {
    height: 100%;
    overflow: visible;
  }
  .campaign_main .campaign-hero .img-wrapper img,
.campaign_main .hero-content-wrapper .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom right;
  }
}
@media screen and (min-width: 900px) {
  .campaign_main .campaign-hero,
.campaign_main .hero-content-wrapper {
    height: 30vh;
    min-height: 550px;
  }
}
@media screen and (min-width: 1100px) {
  .campaign_main .campaign-hero,
.campaign_main .hero-content-wrapper {
    height: 78vh;
    min-height: 550px;
  }
  .campaign_main .campaign-hero .campaign-flex,
.campaign_main .hero-content-wrapper .campaign-flex {
    width: 80%;
    height: 75%;
    margin: 0 auto;
    justify-content: flex-start;
  }
  .campaign_main .campaign-hero .hero-content,
.campaign_main .hero-content-wrapper .hero-content {
    width: 520px;
    text-align: left;
  }
  .campaign_main .campaign-hero .hero-content span,
.campaign_main .hero-content-wrapper .hero-content span {
    width: 365px;
  }
}
@media screen and (min-width: 1600px) {
  .campaign_main .campaign-hero,
.campaign_main .hero-content-wrapper {
    height: 85vh;
  }
}
.campaign_main .two-col_5050 {
  text-align: center;
  padding: 30px 20px 0;
}
.campaign_main .two-col_5050 .campaign-flex {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.campaign_main .two-col_5050 .campaign-flex .campaign-flex_box {
  width: 100%;
}
.campaign_main .two-col_5050 .campaign-flex .campaign-flex_box p {
  width: 100%;
  max-width: 515px;
  font-size: 1.25rem;
  margin: 25px auto 0;
}
.campaign_main .two-col_5050 .campaign-flex .img-wrapper {
  max-width: 415px;
  margin: 25px auto 0;
}
.campaign_main .two-col_5050 .campaign-flex .image-section {
  margin-bottom: 10px;
  display: block;
}
.campaign_main .two-col_5050 .campaign-flex .image-section .img-wrapper {
  max-width: 120px;
}
.campaign_main .two-col_5050 .campaign-flex .image-section .img-wrapper img {
  width: auto;
  height: auto;
}
.campaign_main .two-col_5050.black-bg {
  padding: 75px 20px 0;
}
@media screen and (min-width: 1025px) {
  .campaign_main .two-col_5050.black-bg {
    padding: 20px 20px 0;
  }
}
.campaign_main .two-col_5050.add-pad .campaign-flex {
  margin: 0 auto 60px;
}
.campaign_main .two-col_5050.add-pad .campaign-title + p {
  margin-bottom: 30px;
}
@media screen and (min-width: 1025px) {
  .campaign_main .two-col_5050.add-pad h2.campaign-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 57px;
  }
  .campaign_main .two-col_5050.add-pad .campaign-flex {
    margin: 0 auto 100px;
    justify-content: space-between;
  }
  .campaign_main .two-col_5050.add-pad .campaign-flex .campaign-flex_box {
    padding: 0 !important;
  }
  .campaign_main .two-col_5050.add-pad .campaign-flex .campaign-flex_box.flex-text {
    width: 41% !important;
  }
  .campaign_main .two-col_5050.add-pad .img-wrapper {
    max-width: 100%;
    text-align: right;
  }
}
@media screen and (min-width: 1025px) {
  .campaign_main .two-col_5050 .campaign-flex .campaign-flex_box {
    width: 50%;
  }
  .campaign_main .two-col_5050 .campaign-flex .campaign-flex_box .campaign-title {
    max-width: 515px;
  }
  .campaign_main .two-col_5050 .campaign-flex .campaign-flex_box p {
    margin: 25px 0 0;
  }
  .campaign_main .two-col_5050 .campaign-flex .campaign-flex_box:first-child {
    text-align: left;
    padding-top: 75px;
  }
  .campaign_main .two-col_5050 .campaign-flex .campaign-flex_box:last-child {
    padding: 0 30px;
  }
}
.campaign_main .three-box_alt {
  text-align: center;
}
.campaign_main .three-box_alt .campaign-title {
  margin: 25px;
}
.campaign_main .three-box_alt .campaign-flex {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.campaign_main .three-box_alt .campaign-flex .campaign-flex_box {
  width: 100%;
  padding: 30px 20px 20px;
  margin: 0 auto 65px;
  border-radius: 5px;
  background: #182025;
  position: relative;
}
.campaign_main .three-box_alt .campaign-flex .campaign-flex_box .flexbox_img {
  width: 85px;
  height: 85px;
  padding: 20px;
  border-radius: 50%;
  background: #31404d;
  position: absolute;
  margin: auto;
  right: 0;
  left: 0;
  top: -45px;
}
.campaign_main .three-box_alt .campaign-flex .campaign-flex_box .flexbox_img .icon {
  width: 3rem;
  height: 3rem;
  position: absolute;
  margin: auto;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
.campaign_main .three-box_alt .campaign-flex .campaign-flex_box p {
  color: #a3acb6;
  font-size: 1.25rem;
}
.campaign_main .three-box_alt .campaign-flex .campaign-flex_box:first-child {
  margin: 50px auto 65px;
}
.campaign_main .three-box_alt .campaign-flex .campaign-flex_box:last-child {
  margin: 0 auto;
}
@media screen and (min-width: 1025px) {
  .campaign_main .three-box_alt .campaign-title {
    padding: 0 20px;
    margin: 0 0 50px;
  }
  .campaign_main .three-box_alt h3.campaign-title {
    margin-top: 25px;
  }
  .campaign_main .three-box_alt .campaign-flex {
    align-items: stretch;
    justify-content: space-between;
  }
  .campaign_main .three-box_alt .campaign-flex .campaign-flex_box {
    width: 30%;
    margin: 100px auto 0 !important;
  }
}
.campaign_main .fullwidth_callout {
  min-height: 420px;
  text-align: center;
}
.campaign_main .fullwidth_callout .btn-wrapper {
  margin-top: 50px;
}
.campaign_main .pricing-title {
  font-weight: 700 !important;
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
}
.campaign_main .pricing-options {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
  width: 100% !important;
}
@media screen and (min-width: 1025px) {
  .campaign_main .pricing-options {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    width: 40% !important;
  }
}
.campaign_main .pricing-btn {
  width: 33% !important;
  color: #1b9af0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  padding: 6px 12px 6px !important;
  border: 1px solid #0d6efd !important;
  text-transform: uppercase;
  font-weight: 700;
  font-family: Roboto, Helvetica, sans-serif;
  letter-spacing: 1px;
  flex: 1 1 auto;
  cursor: pointer;
  background-color: white;
  border-radius: 2px;
}
@media screen and (min-width: 1025px) {
  .campaign_main .pricing-btn {
    font-size: 15px !important;
  }
}
.campaign_main .pricing-btn.active {
  color: #fff !important;
  font-size: 13px !important;
  background-color: #1b9af0 !important;
}
@media screen and (min-width: 1025px) {
  .campaign_main .pricing-btn.active {
    font-size: 15px !important;
  }
}
.campaign_main .pricing-badge {
  position: relative;
  top: -1px;
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #1b9af0;
  color: #fff;
  border-radius: 0.5rem;
  margin-left: 0.25rem;
}
.campaign_main .pricing-badge.active {
  color: #1b9af0 !important;
  background-color: #fff !important;
}
.campaign_main .card-container {
  flex-flow: column;
  margin-top: 1.5rem;
  display: flex;
}
@media screen and (min-width: 1025px) {
  .campaign_main .card-container {
    flex-flow: row wrap;
    margin-top: 1.5rem;
    display: flex;
    margin-left: 1rem;
  }
}
.campaign_main .pricing-card {
  margin-right: 0rem;
  border: 1px solid #b0b7bd !important;
  flex: 1 0 0%;
  margin-bottom: 1.5rem !important;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.3rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
@media screen and (min-width: 1025px) {
  .campaign_main .pricing-card {
    margin-right: 1rem;
  }
}
.campaign_main .pricing-card-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 0.25px;
}
.campaign_main .pricing-card-header {
  padding: 1rem;
}
.campaign_main .basic-price {
  background-color: #302216;
}
.campaign_main .hero-price {
  background-color: #f3a623;
}
.campaign_main .master-price {
  background-color: #e40712;
}
.campaign_main .pricing-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  padding: 1rem;
}
.campaign_main .pricing-card-item-list {
  flex: 1 1 auto !important;
  text-align: left !important;
  padding-left: 0rem;
}
@media screen and (min-width: 1025px) {
  .campaign_main .pricing-card-item-list {
    padding-left: 2rem;
  }
}
.campaign_main .hero-price-dynamic {
  font-size: 49px;
  display: inline-block;
}
.campaign_main .master-price-dynamic {
  font-size: 49px;
  display: inline-block;
}
.campaign_main .price-period {
  font-size: 16px;
  padding-left: 0.75rem;
  font-weight: 400;
}
.campaign_main .help-player {
  position: relative;
  width: 100%;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  .campaign_main .help-player {
    height: 600px;
  }
}
.campaign_main .help-player h2.campaign-title {
  font-size: 48px;
  line-height: 57px;
  font-weight: 700;
  margin-bottom: 28px;
}
@media screen and (max-width: 768px) {
  .campaign_main .help-player h2.campaign-title {
    font-size: 1.9rem;
    line-height: 2.4rem;
    margin: 20px 0;
  }
}
.campaign_main .help-player p {
  font-size: 20px;
  line-height: 32px;
  margin: 0 30px;
}
@media screen and (max-width: 768px) {
  .campaign_main .help-player p {
    font-size: 1.25rem;
    line-height: 1.8rem;
    margin: 0;
  }
}
.campaign_main .help-player .img-wrapper.hero-img {
  height: 100%;
  z-index: -1;
  position: absolute;
}
.campaign_main .help-player .img-wrapper.hero-img img {
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.campaign_main .help-player .container {
  margin-top: 6%;
  max-width: 775px;
}

.pricing-btn {
  width: 33% !important;
  color: #1b9af0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  padding: 6px 12px 6px !important;
  border: 1px solid #0d6efd !important;
  text-transform: uppercase;
  font-weight: 700;
  font-family: Roboto, Helvetica, sans-serif;
  letter-spacing: 1px;
  flex: 1 1 auto;
  cursor: pointer;
  background-color: white;
  border-radius: 2px;
}
@media screen and (min-width: 1025px) {
  .pricing-btn .pricing-options {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    width: 66% !important;
  }
}
.pricing-btn.active {
  color: #fff !important;
  font-size: 13px !important;
  background-color: #1b9af0 !important;
}
@media screen and (min-width: 1025px) {
  .pricing-btn.active {
    font-size: 15px !important;
  }
}
.pricing-btn.active.active {
  color: #fff !important;
  font-size: 12px !important;
  background-color: #1b9af0 !important;
}
@media screen and (min-width: 1025px) {
  .pricing-btn.active.active {
    font-size: 15px !important;
  }
}
.pricing-btn .pricing-badge {
  position: relative;
  top: -1px;
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #1b9af0;
  color: #fff;
  border-radius: 0.5rem;
  margin-left: 0.25rem;
}
.pricing-btn .pricing-badge.active {
  color: #1b9af0 !important;
  background-color: #fff !important;
}
.pricing-btn .card-container {
  flex-flow: column;
  margin-top: 1.5rem;
  display: flex;
  margin-left: 1rem;
}

.pricing-card {
  margin-right: 0rem;
  border: 1px solid #b0b7bd !important;
  flex: 1 0 0%;
  margin-bottom: 1.5rem !important;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.3rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
@media screen and (min-width: 1025px) {
  .pricing-card .card-container {
    flex-flow: row wrap;
    margin-top: 1.5rem;
    display: flex;
  }
}
.pricing-card .pricing-card {
  margin-right: 0rem;
  border: 1px solid #b0b7bd !important;
  flex: 1 0 0%;
  margin-bottom: 1.5rem !important;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.3rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
@media screen and (min-width: 1025px) {
  .pricing-card .pricing-card {
    margin-right: 1rem;
  }
}
.pricing-card .pricing-card-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 0.25px;
}
.pricing-card .pricing-card-header {
  padding: 1rem;
}
@media screen and (max-width: 1025px) {
  .pricing-card .pricing-card-header {
    padding: 0.5rem;
  }
}
.pricing-card .basic-price {
  background-color: #302216;
}
.pricing-card .hero-price {
  background-color: #f3a623;
}
.pricing-card .master-price {
  background-color: #e40712;
}
.pricing-card .pricing-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  padding: 1rem;
}
.pricing-card .pricing-card-item-list {
  flex: 1 1 auto !important;
  text-align: left !important;
  padding-left: 0rem;
}
@media screen and (min-width: 1025px) {
  .pricing-card .pricing-card-item-list {
    padding-left: 2rem;
  }
}
.pricing-card .hero-price-dynamic {
  font-size: 49px;
  display: inline-block;
}
.pricing-card .master-price-dynamic {
  font-size: 49px;
  display: inline-block;
}

.callout_content p {
  width: 100%;
  max-width: 485px;
  font-size: 1.25rem;
  margin: 0 auto 50px;
  text-shadow: 1px 1px 5px #333;
}