/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */
.jspContainer {
  overflow: hidden;
  position: relative;
}
.jspPane {
  position: absolute;
}
.jspVerticalBar {
  background: red;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
}
.jspHorizontalBar {
  background: red;
  bottom: 0;
  height: 16px;
  left: 0;
  position: absolute;
  width: 100%;
}
.jspCap {
  display: none;
}
.jspHorizontalBar .jspCap {
  float: left;
}
.jspTrack {
  background: #dde;
  position: relative;
}
.jspDrag {
  background: #bbd;
  cursor: pointer;
  left: 0;
  position: relative;
  top: 0;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
  float: left;
  height: 100%;
}
.jspArrow {
  background: #50506d;
  cursor: pointer;
  direction: ltr;
  display: block;
  margin: 0;
  padding: 0;
  text-indent: -20000px;
}
.jspDisabled {
  background: #80808d;
  cursor: default;
}
.jspVerticalBar .jspArrow {
  height: 16px;
}
.jspHorizontalBar .jspArrow {
  float: left;
  height: 100%;
  width: 16px;
}
.jspVerticalBar .jspArrow:focus {
  border: 1px solid red;
  outline: none;
}
.jspCorner {
  background: #eeeef4;
  float: left;
  height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
  margin: 0 -3px 0 0;
}

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	background: red;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 16px;
}

.jspHorizontalBar
{
	background: red;
	bottom: 0;
	height: 16px;
	left: 0;
	position: absolute;
	width: 100%;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #dde;
	position: relative;
}

.jspDrag
{
	background: #bbd;
	cursor: pointer;
	left: 0;
	position: relative;
	top: 0;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	cursor: pointer;
        direction: ltr;
	display: block;
	margin: 0;
	padding: 0;
	text-indent: -20000px;
}

.jspDisabled
{
	background: #80808d;
	cursor: default;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	float: left;
	height: 100%;
	width: 16px;
}

.jspVerticalBar .jspArrow:focus
{
        border: 1px solid red;
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css?family=Inter:wght@400;700&display=swap');
.hero-container {
  position: relative;
  overflow: hidden;
  background-color: #232322;
  padding-top: 20px;
}
.hero-container .jspContainer .jspVerticalBar {
  background: transparent;
  width: 5px;
}
.hero-container .jspContainer .jspVerticalBar .jspDrag {
  background: #ffffff;
}
.hero-container .jspContainer .jspVerticalBar .jspTrack {
  background: linear-gradient(90deg, transparent, 2px, rgba(255, 255, 255, 0.3) 2px, 3px, transparent 3px);
}
.hero-container[data-theme='featured'] {
  background-color: #18171b;
  padding-bottom: 50px;
}
.hero-container[data-theme='featured'] .top-color {
  display: none;
}
@media (min-width: 1024px) {
  .hero-container[data-theme='featured'] {
    padding-bottom: 150px;
  }
}
.hero-container .top-color {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 0 calc(100% - 50px/2.5));
  position: absolute;
  top: 0;
  width: 100vw;
  height: 50vw;
  max-height: 277px;
  background-color: #b6b6b6;
}
@media (min-width: 425px) {
  .hero-container .top-color {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 0 calc(100% - 100px/2.5));
  }
}
.hero-container .franchise-header {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .hero-container .franchise-header {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.hero-container .franchise-header .logo-container {
  flex: 1 0 0%;
  height: 50px;
}
.hero-container .franchise-header .logo-container img {
  height: 100%;
  width: auto;
}
.hero-container .franchise-header .button-container {
  height: 50px;
}
.hero-container .franchise-header .button-container a {
  height: 50px;
  min-width: 196px;
}
.hero-container .filter-container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 15px auto 20px;
  padding-left: 15px;
}
.hero-container .filter-container .filter-list li a {
  color: rgba(255, 255, 255, 0.7);
}
.hero-container .filter-container .filter-list li.active a {
  color: #ffffff;
}
.hero-container .filter-container ul {
  display: flex;
}
.hero-container .filter-container ul > li {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  line-height: 28px;
  margin-right: 22px;
}
@media (min-width: 768px) {
  .hero-container .filter-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .hero-container .filter-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.hero-container .inner-container {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1400px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .hero-container .inner-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.hero-container .inner-container .title-overlay {
  position: relative;
  z-index: 1;
  transform: translateY(25%);
  padding-left: 15px;
  padding-top: 20px;
  font-size: 48px;
  line-height: 41px;
  letter-spacing: 0.48px;
  text-shadow: 5px 2px 10px rgba(0, 0, 0, 0.139792);
}
@media (min-width: 1024px) {
  .hero-container .inner-container .title-overlay {
    transform: translateY(50%);
    padding-left: 30px;
    padding-top: unset;
    text-shadow: unset;
    font-size: 90px;
    line-height: 80px;
    letter-spacing: 1px;
  }
}
.hero-container .inner-container .content {
  position: relative;
}
.hero-container .inner-container .row .hero-left {
  margin-bottom: 30px;
  /*.graphics:before {
                    border-left-color: @colorYellow;
                }
                .graphics:after{
                    border-right-color: @colorYellow;
                }*/
}
@media (min-width: 1024px) {
  .hero-container .inner-container .row .hero-right {
    padding-left: 30px;
  }
}
.hero-container .inner-container .row .hero-right .card-item {
  padding-top: 0;
}
.hero-container .inner-container .row .hero-right .card-item .card-inner {
  display: flex;
}
.hero-container .inner-container .row .hero-right .card-item .card-inner > * {
  -webkit-box-flex: 0 0 auto;
  -moz-box-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 50%;
}
.hero-container .inner-container .row .hero-right .card-item .graphics {
  padding-right: 7.5px;
}
.hero-container .inner-container .row .hero-right .card-item .text {
  margin-top: 0;
  padding-left: 7.5px;
}
.hero-container .inner-container .row .hero-right .card-item .text .title h2 {
  font-size: 20px;
  line-height: 18px;
  letter-spacing: 0.2px;
}
.hero-container .inner-container .row .hero-right .card-item .icon-list {
  display: none;
}
.hero-container .inner-container .row .hero-right .card-item .tag-list {
  display: none;
}
@media (min-width: 1024px) {
  .hero-container .inner-container .row .hero-right .card-item .text {
    padding-left: 0;
  }
  .hero-container .inner-container .row .hero-right .card-item .text .title h2 {
    font-size: 26px;
    line-height: 24px;
    letter-spacing: unset;
  }
}
.hero-container .inner-container .row .hero-right > ul > li,
.hero-container .inner-container .row .hero-right .jspPane > li {
  margin-bottom: 16px;
}
.hero-container .inner-container .row .hero-right > ul > li:last-child,
.hero-container .inner-container .row .hero-right .jspPane > li:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .hero-container .inner-container .row .hero-right > ul > li,
  .hero-container .inner-container .row .hero-right .jspPane > li {
    margin-bottom: 30px;
  }
}
@media (min-width: 1024px) {
  .hero-container:not([data-theme='featured']) .inner-container {
    height: 62vw;
    max-height: 850px;
    padding-bottom: 100px;
  }
}
.hero-container:not([data-theme='featured']) .row .hero-left .card-item {
  padding-top: 0;
}
.hero-container:not([data-theme='featured']) .row .hero-right .col:last-child {
  padding-bottom: 130px;
}
@media (min-width: 1024px) {
  .hero-container:not([data-theme='featured']) .row .hero-right {
    padding-left: 100px;
    max-height: 850px;
    /*overflow-y: scroll;
                height: @heroMaxHeight;
                padding-left: 100px;
                padding-right: 20px;
                padding-bottom: @slantHeight*2 + @gridMargin; // extra space for side scrolling content to view above clip path
                */
    /*&::-webkit-scrollbar {
                    width: 1.5px;
                    background: @white-3;
                    z-index: 5;
                }
                &::-webkit-scrollbar-button:single-button {
                    background-color: @white;
                    display: block;
                    border-style: solid;
                    height: 5px;
                    width: 5px;
                }
                &::-webkit-scrollbar-track {
                    background: @white-3;
                }
                &::-webkit-scrollbar-thumb {
                    background: @white-3;
                }*/
  }
  .hero-container:not([data-theme='featured']) .row .hero-right .col:last-child {
    padding-bottom: 230px;
  }
  .hero-container:not([data-theme='featured']) .row .hero-right .scroll-pane {
    width: 100%;
    height: 60vw;
    max-height: 850px;
    overflow: auto;
  }
  .hero-container:not([data-theme='featured']) .row .hero-right .scroll-pane:not(.jspScrollable) .jspPane {
    padding-right: 10px !important;
  }
  .hero-container:not([data-theme='featured']) .row .hero-right::before {
    content: "";
    position: absolute;
    right: 10px;
    top: 0;
    border-top: 1px solid #131311;
    width: calc(30% - 10px);
    z-index: 1;
  }
  .hero-container:not([data-theme='featured']) .row .hero-right .card-item .card-inner {
    display: block;
  }
  .hero-container:not([data-theme='featured']) .row .hero-right .card-item .card-inner > * {
    display: block;
    width: 100%;
  }
  .hero-container:not([data-theme='featured']) .row .hero-right .card-item .graphics {
    padding-right: 0;
  }
  .hero-container:not([data-theme='featured']) .row .hero-right .card-item .text {
    margin-top: 12px;
    padding-left: 0;
  }
  .hero-container:not([data-theme='featured']) .row .hero-right .card-item .text .title h2 {
    font-size: 26px;
    line-height: 24px;
  }
  .hero-container:not([data-theme='featured']) .row .hero-right .card-item .icon-list {
    display: flex;
  }
  .hero-container:not([data-theme='featured']) .row .hero-right .card-item .tag-list {
    display: block;
  }
}
.hero-container:not([data-theme='featured']) .has-gradient .graphics .picture::after {
  display: none;
}
.hero-container[data-theme='none'] .top-color {
  background-color: #b6b6b6;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.hero-container[data-theme='none'] .filter-list li a {
  color: rgba(0, 0, 0, 0.7);
}
.hero-container[data-theme='none'] .filter-list li.active a {
  color: #000000;
}
.hero-container[data-theme='none'] .inner-container .row .hero-left .graphics::before {
  border-left-color: rgba(160, 160, 160, 0.4);
}
.hero-container[data-theme='none'] .inner-container .row .hero-left .graphics::after {
  border-right-color: rgba(160, 160, 160, 0.4);
}
.hero-container[data-theme='atvi'] .top-color {
  background-color: #808080;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.hero-container[data-theme='atvi'] .row .hero-right::before {
  border-top-color: #0768af;
}
.hero-container[data-theme='atvi'] .filter-list li a {
  color: rgba(0, 0, 0, 0.7);
}
.hero-container[data-theme='atvi'] .filter-list li.active a {
  color: #f1f1f1;
}
.hero-container[data-theme='atvi'] .inner-container .row .hero-left .graphics::before {
  border-left-color: rgba(7, 104, 175, 0.4);
}
.hero-container[data-theme='atvi'] .inner-container .row .hero-left .graphics::after {
  border-right-color: rgba(7, 104, 175, 0.4);
}
.hero-container[data-theme='cod'] .top-color {
  background-color: #ece9dc;
  background-image: url('../../../../../../content/dam/atvi/activision/atvi-touchui/blog/common/callofduty_angle_bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.hero-container[data-theme='cod'] .row .hero-right::before {
  border-top-color: #a88e1c;
}
.hero-container[data-theme='cod'] .filter-list li a {
  color: rgba(0, 0, 0, 0.7);
}
.hero-container[data-theme='cod'] .filter-list li.active a {
  color: #000000;
}
.hero-container[data-theme='cod'] .inner-container .row .hero-left .graphics::before {
  border-left-color: #d2cbb3;
}
.hero-container[data-theme='cod'] .inner-container .row .hero-left .graphics::after {
  border-right-color: #d2cbb3;
}
.hero-container[data-theme='crash'] .top-color {
  background-color: #0908a2;
  background-image: url('../../../../../../content/dam/atvi/activision/atvi-touchui/blog/common/crash_angle_bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.hero-container[data-theme='crash'] .row .hero-right::before {
  border-top-color: #fb8825;
}
.hero-container[data-theme='crash'] .filter-list li,
.hero-container[data-theme='crash'] .filter-list li a {
  color: rgba(0, 0, 0, 0.7);
}
.hero-container[data-theme='crash'] .filter-list li.active a {
  color: #f1f1f1;
}
.hero-container[data-theme='crash'] .inner-container .row .hero-left .graphics::before {
  border-left-color: rgba(251, 136, 37, 0.4);
}
.hero-container[data-theme='crash'] .inner-container .row .hero-left .graphics::after {
  border-right-color: rgba(251, 136, 37, 0.4);
}
.hero-container[data-theme='sekiro'] .top-color {
  background-color: #7d0e22;
  background-image: url('../../../../../../content/dam/atvi/activision/atvi-touchui/blog/common/sekiro_angle_bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.hero-container[data-theme='sekiro'] .row .hero-right::before {
  border-top-color: #ff2c52;
}
.hero-container[data-theme='sekiro'] .inner-container .row .hero-left .graphics::before {
  border-left-color: rgba(255, 44, 82, 0.4);
}
.hero-container[data-theme='sekiro'] .inner-container .row .hero-left .graphics::after {
  border-right-color: rgba(255, 44, 82, 0.4);
}
.hero-container[data-theme='spyro'] .top-color {
  background-color: #5b0d6d;
  background-image: url('../../../../../../content/dam/atvi/activision/atvi-touchui/blog/common/spyro_angle_bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.hero-container[data-theme='spyro'] .row .hero-right::before {
  border-top-color: #bb2adb;
}
.hero-container[data-theme='spyro'] .franchise-header .logo-container {
  height: 70px;
}
.hero-container[data-theme='spyro'] .inner-container .row .hero-left .graphics::before {
  border-left-color: rgba(187, 42, 219, 0.4);
}
.hero-container[data-theme='spyro'] .inner-container .row .hero-left .graphics::after {
  border-right-color: rgba(187, 42, 219, 0.4);
}
.hero-container[data-theme='tony'] .top-color {
  background-color: #005340;
  background-image: url('../../../../../../content/dam/atvi/activision/atvi-touchui/blog/common/tonyhawk_angle_bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.hero-container[data-theme='tony'] .row .hero-right::before {
  border-top-color: rgba(16, 172, 137, 0.4);
}
.hero-container[data-theme='tony'] .inner-container .row .hero-left .graphics::before {
  border-left-color: rgba(16, 172, 137, 0.4);
}
.hero-container[data-theme='tony'] .inner-container .row .hero-left .graphics::after {
  border-right-color: rgba(16, 172, 137, 0.4);
}