@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
/*******************************************************************
DIN NEXT Font
*******************************************************************/
.section-header {
  font-size: 32px;
  text-align: center;
  text-transform: uppercase;
  margin: 30px auto 30px;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
}
.noise-gif {
  content: "";
  display: block;
  width: 100vw;
  height: 100vh;
  opacity: .17;
  background-image: url('../../../../../../../../../content/dam/atvi/callofduty/cod-touchui/kronos/home/common/noise-gif-square-anim.gif');
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
}
@keyframes arrow {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0;
  }
  25% {
    opacity: 1;
    -webkit-transform: translate(0, 2px);
    -moz-transform: translate(0, 2px);
    -ms-transform: translate(0, 2px);
    -o-transform: translate(0, 2px);
    transform: translate(0, 2px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 8px);
    -moz-transform: translate(0, 8px);
    -ms-transform: translate(0, 8px);
    -o-transform: translate(0, 8px);
    transform: translate(0, 8px);
  }
  75%,
  100% {
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -o-transform: translate(0, 10px);
    transform: translate(0, 10px);
    opacity: 0;
  }
}
.game-container {
  background: #000;
  color: #FFF;
}
.game-container .game-hero {
  position: relative;
}
.game-container .game-hero .game-hero-rating {
  position: absolute;
  right: 5%;
  bottom: 15px;
  width: 120px;
}
@media screen and (max-width: 768px) {
  .game-container .game-hero .game-hero-rating {
    bottom: auto;
    top: 75px;
  }
}
.game-container .game-hero .game-hero-rating img {
  width: 100%;
}
.game-container .game-hero .game-bg {
  min-height: 600px;
}
@media screen and (max-width: 768px) {
  .game-container .game-hero .game-bg {
    height: 100vh;
  }
}
.game-container .game-hero .game-bg .game-bg-desktop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.game-container .game-hero .game-bg .game-bg-mobile {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.game-container .game-hero .game-hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 90%;
}
@media screen and (max-width: 768px) {
  .game-container .game-hero .game-hero-content {
    top: auto;
    bottom: 80px;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
}
.game-container .game-hero .game-hero-content .game-hero-inner-content {
  max-width: 500px;
}
.game-container .game-hero .game-hero-content .game-logo {
  margin-bottom: 20px;
  width: 100%;
  max-width: 500px;
}
.game-container .game-hero .game-hero-content .game-logo img {
  width: 100%;
  display: block;
}
.game-container .game-hero .game-hero-content .game-subheader {
  margin-bottom: 20px;
}
.game-container .game-hero .game-hero-content .game-subheader h2 {
  color: #FFF;
  font-family: 'DIN Next LT Pro', Arial, sans-serif;
  font-weight: bold;
  font-size: 34px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .game-container .game-hero .game-hero-content .game-subheader h2 {
    font-size: 25px;
  }
}
.game-container .game-hero .game-hero-content .game-cta ul {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  display: -webkit-box;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 640px) {
  .game-container .game-hero .game-hero-content .game-cta ul {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
.game-container .game-hero .game-hero-content .game-cta ul li:first-of-type {
  margin-right: 20px;
}
.game-container .game-hero .game-hero-content .game-cta ul li:first-of-type a {
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.1;
  border: 1px solid transparent;
  padding: 1em 0;
  border-radius: 24px;
  margin: auto;
  display: block;
  text-align: center;
  transition: box-shadow 250ms ease-out, border 300ms ease-out, background 300ms ease-out;
  box-shadow: inset 0 0 0 1px #ffffff;
  font-family: 'DIN Next LT Pro', Arial, sans-serif;
  font-weight: bold;
  background: rgba(7, 104, 175, 0.5);
  box-shadow: inset 0 0 0 1px #0768af;
}
.game-container .game-hero .game-hero-content .game-cta ul li:first-of-type a:hover,
.game-container .game-hero .game-hero-content .game-cta ul li:first-of-type a:active {
  background: rgba(7, 104, 175, 0.7);
  border: 1px solid #0768af;
  box-shadow: inset 0 0 0 2px #0768af;
}
@media screen and (max-width: 768px) {
  .game-container .game-hero .game-hero-content .game-cta ul li:first-of-type {
    margin-bottom: 15px;
  }
}
.game-container .game-hero .game-hero-content .game-cta ul li:last-of-type a {
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.1;
  border: 1px solid transparent;
  padding: 1em 0;
  border-radius: 24px;
  margin: auto;
  display: block;
  text-align: center;
  transition: box-shadow 250ms ease-out, border 300ms ease-out, background 300ms ease-out;
  box-shadow: inset 0 0 0 1px #ffffff;
  font-family: 'DIN Next LT Pro', Arial, sans-serif;
  font-weight: bold;
}
.game-container .game-hero .game-hero-content .game-cta ul li:last-of-type a:hover,
.game-container .game-hero .game-hero-content .game-cta ul li:last-of-type a:active {
  background: rgba(7, 104, 175, 0.7);
  border: 1px solid #0768af;
  box-shadow: inset 0 0 0 2px #0768af;
}
.game-container .game-hero .game-hero-content .game-cta ul li a {
  width: 225px;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .game-container .game-hero .game-hero-content .game-cta ul li a {
    width: 100%;
  }
}
.game-container .game-content {
  background-image: radial-gradient(40% 20% at 50% 0, rgba(104, 104, 104, 0.85), #111111);
  padding-bottom: 50px;
}
.game-container .game-media {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 100px;
  padding: 100px 15px 0;
}
@media screen and (max-width: 768px) {
  .game-container .game-media {
    margin-bottom: 50px;
  }
}
.game-container .game-media .atvi-agegate h2 {
  font-family: 'DIN Next LT Pro', Arial, sans-serif;
  font-weight: bold;
  font-size: 40px;
  margin-bottom: 20px;
}
.game-container .game-media .atvi-agegate .submit-wrapper a {
  font-family: 'DIN Next LT Pro', Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #FFF;
  font-size: 24px;
  text-decoration: none;
}
.game-container .game-media .atvi-column-layout-container {
  overflow: visible !important;
}
.game-container .game-media .slick-slide img {
  width: 100%;
}
.game-container .game-media .slick-dots {
  max-width: 140px;
  min-width: 110px;
  width: 15%;
  padding: 0.5em;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 24px;
  bottom: 4em;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-evenly;
  height: 50px;
  bottom: -50px;
}
@media only screen and (max-width: 1500px) {
  .game-container .game-media .slick-dots {
    width: 30%;
  }
}
@media screen and (max-height: 750px) {
  .game-container .game-media .slick-dots {
    bottom: 1.7em;
  }
}
@media only screen and (max-width: 768px) {
  .game-container .game-media .slick-dots {
    bottom: 2em;
  }
}
.game-container .game-media .slick-dots li {
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  margin: 0;
}
.game-container .game-media .slick-dots li button {
  height: 10px;
  width: 10px;
  border: 1px solid #B3B6B7;
  border-radius: 24px;
  position: relative;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.game-container .game-media .slick-dots li.slick-active button {
  background: white;
  border-color: white;
}
@media screen and (max-width: 768px) {
  .game-container .game-media .slick-dots {
    bottom: -50px !important;
  }
}
.game-container .game-media .slick-arrow {
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -ms-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  background: url('data:image/svg+xml;utf8,<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.4258 8.45722L15.7255 14.3118C15.3393 14.6476 14.5983 14.786 14.1669 14.3979C13.7415 14.016 13.754 13.2748 14.1779 12.8912L18.1859 8.77991L1.86567 8.77991C1.27534 8.77991 0.796874 8.3174 0.796874 7.74675C0.796874 7.17611 1.27534 6.71359 1.86567 6.71359L18.1859 6.71359L14.1779 2.60231C13.8127 2.24897 13.7458 1.48202 14.1669 1.09562C14.5876 0.70887 15.3547 0.832504 15.7255 1.18171L21.4258 7.03628C21.6207 7.23672 21.7158 7.47193 21.7151 7.74675C21.7051 7.99299 21.6004 8.27745 21.4258 8.45722Z" fill="%23B3B6B7"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  width: 21px;
  background-position: center;
  position: static;
  height: 100%;
  margin: 0 25px;
}
.game-container .game-media .slick-arrow:hover {
  background: url('data:image/svg+xml;utf8,<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.4258 8.45722L15.7255 14.3118C15.3393 14.6476 14.5983 14.786 14.1669 14.3979C13.7415 14.016 13.754 13.2748 14.1779 12.8912L18.1859 8.77991L1.86567 8.77991C1.27534 8.77991 0.796874 8.3174 0.796874 7.74675C0.796874 7.17611 1.27534 6.71359 1.86567 6.71359L18.1859 6.71359L14.1779 2.60231C13.8127 2.24897 13.7458 1.48202 14.1669 1.09562C14.5876 0.70887 15.3547 0.832504 15.7255 1.18171L21.4258 7.03628C21.6207 7.23672 21.7158 7.47193 21.7151 7.74675C21.7051 7.99299 21.6004 8.27745 21.4258 8.45722Z" fill="%23FFF"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  width: 21px;
  background-position: center;
  position: static;
  height: 100%;
  margin: 0 25px;
}
.game-container .game-media .slick-arrow:before {
  content: "";
}
.game-container .game-media .slick-next {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}
.game-container .game-media .slick-prev {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.game-container .game-media .slick-arrow {
  position: absolute;
  top: calc(100% + 15px);
  height: auto;
}
.game-container .game-media .slick-arrow:hover {
  position: absolute;
  height: auto;
}
.game-container .game-media .slick-arrow.slick-next {
  right: 35%;
}
@media screen and (max-width: 768px) {
  .game-container .game-media .slick-arrow.slick-next {
    right: 15%;
  }
}
.game-container .game-media .slick-arrow.slick-prev {
  left: 35%;
}
@media screen and (max-width: 768px) {
  .game-container .game-media .slick-arrow.slick-prev {
    left: 15%;
  }
}
.game-container .game-text {
  width: 100%;
  max-width: 90%;
  padding: 50px 15px;
  margin: 0 auto;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  display: -webkit-box;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .game-container .game-text {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
.game-container .game-text .game-meta {
  width: 48%;
}
@media screen and (max-width: 768px) {
  .game-container .game-text .game-meta {
    width: 100%;
    margin-bottom: 50px;
  }
}
.game-container .game-text .game-meta table {
  font-family: 'DIN Next LT Pro', Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}
.game-container .game-text .game-meta tr {
  border-bottom: 1px solid #FFF;
}
.game-container .game-text .game-meta tr td:first-of-type {
  font-size: 25px;
  line-height: 38.4px;
  padding-left: 60px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .game-container .game-text .game-meta tr td:first-of-type {
    font-size: 20px;
    line-height: 25px;
  }
}
.game-container .game-text .game-meta tr td:first-of-type:before {
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 60px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 45%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.game-container .game-text .game-meta tr.platform td:first-of-type:before {
  background-image: url(../../../../../../../../../content/dam/atvi/activision/atvi-touchui/activision/games/icons/platform-icon.png);
}
.game-container .game-text .game-meta tr.release-date td:first-of-type:before {
  background-image: url(../../../../../../../../../content/dam/atvi/activision/atvi-touchui/activision/games/icons/release-date-icon.png);
}
.game-container .game-text .game-meta tr.genre td:first-of-type:before {
  background-image: url(../../../../../../../../../content/dam/atvi/activision/atvi-touchui/activision/games/icons/genre-icon.png);
}
.game-container .game-text .game-meta tr.studio td:first-of-type:before {
  background-image: url(../../../../../../../../../content/dam/atvi/activision/atvi-touchui/activision/games/icons/studio-icon.png);
}
.game-container .game-text .game-meta tr.esrb-rating td:first-of-type:before {
  background-image: url(../../../../../../../../../content/dam/atvi/activision/atvi-touchui/activision/games/icons/rating-icon.png);
}
.game-container .game-text .game-meta tr.esrb-rating td:last-of-type {
  text-transform: capitalize;
}
.game-container .game-text .game-meta td {
  padding: 10px 15px 10px 0;
  vertical-align: middle;
}
.game-container .game-text .game-description {
  width: 48%;
}
@media screen and (max-width: 768px) {
  .game-container .game-text .game-description {
    width: 100%;
  }
}
.game-container .game-text .game-description h2,
.game-container .game-text .game-description h2 p,
.game-container .game-text .game-description h3,
.game-container .game-text .game-description h4 {
  font-family: 'DIN Next LT Pro', Arial, sans-serif;
  font-weight: bold;
}
.game-container .game-text .game-description h2,
.game-container .game-text .game-description h2 p {
  font-size: 32px;
  line-height: 38.4px;
  margin-bottom: 25px;
  text-transform: uppercase;
}
.game-container .game-text .game-description h3,
.game-container .game-text .game-description h4 {
  font-size: 20px;
  line-height: 25px;
  margin-bottom: 15px;
}
.game-container .game-text .game-description ul {
  list-style: disc;
  margin-left: 18px;
}
.game-container .game-text .game-description b,
.game-container .game-text .game-description strong {
  font-weight: bold;
}
.game-container .game-text .game-description i,
.game-container .game-text .game-description em {
  font-style: italic;
}
.game-container .game-text .game-description p,
.game-container .game-text .game-description li {
  font-family: 'DIN Next LT Pro', Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.game-container .game-text .game-description a {
  color: #FFF;
}
.game-container .game-text .game-description a:hover {
  text-decoration: none;
}
.game-container .go-back a {
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.1;
  border: 1px solid transparent;
  padding: 1em 0;
  border-radius: 24px;
  margin: auto;
  display: block;
  text-align: center;
  transition: box-shadow 250ms ease-out, border 300ms ease-out, background 300ms ease-out;
  box-shadow: inset 0 0 0 1px #ffffff;
  font-family: 'DIN Next LT Pro', Arial, sans-serif;
  font-weight: bold;
  width: 225px;
}
.game-container .go-back a:hover,
.game-container .go-back a:active {
  background: rgba(7, 104, 175, 0.7);
  border: 1px solid #0768af;
  box-shadow: inset 0 0 0 2px #0768af;
}