/* !-- Fonts -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@import url(fonts.css);




/* !-- Global CSS -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
* {
  line-height: 2rem;
  background-size: 100% auto !important;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

html {
  font-size: 62.5%;
}

body {
  color: #fff;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  background: #151515;
  min-width: 320px;
}

body[class^=cke] {
  color: black !important;
  background: white !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 1.6rem;
  margin: 0 0 1.6rem;
  padding: 0;
}

p,
ul,
ol,
dt,
dd {
  font-size: 1.6rem;
  margin: 0 0 1.6rem;
  padding: 0;
}

ul,
ol {
  margin-left: 3.2rem;
}

table {
  margin: 0;
  padding: 0;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  padding: 0;
}

article,
figcaption,
figure,
footer,
header,
nav,
form {
  margin: 0;
  padding: 0;
  display: block;
}

article.intro {
  padding: 0 0 25px;
}

@media (max-width: 767px) {
  article.intro {
    padding: 0;
  }
}

@media (max-width: 1250px) {
  article.intro {
    margin: 0 10px;
  }
}

@media (max-width: 1023px) {
  article.intro {
    margin: 0 20px;
  }
}

article.intro,
.product article.intro {
  display: block;
}

.product.product_media-resources article.intro {
  display: inline-block;
  width: 400px;
}

.product.product_catalog article.intro {
  display: inline-block;
  width: 410px;
}

.product.product_catalog.details article.intro {
  display: block;
  width: auto;
}

article.intro::after,
.product article.intro::after {
  content: "";
  height: 0;
  display: block;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

@media (max-width: 1200px) {
  article.intro,
  .product article.intro {
    margin: 0 18px;
  }

  .product.product_media-resources article.intro {
    display: block;
    width: auto;
  }
}

img {
  margin: 0;
  padding: 0;
  border: 0;
}

img[data-src-lazy] {
  background: url(../img/interface/lazy-load-background.png) 0 0 / auto auto repeat !important;
  min-height: 1px;
}

hr {
  display: none;
}

input[type="text"] {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

#page {
  color: #333;
  background: url(../img/interface/page-background.jpg) 0 0 repeat #f9f7ec;
  background-size: auto !important;
  padding-bottom: 60px;
}

#page.snap-menu {
  padding-top: 85px;
}

@media (max-width: 1022px) {
  #page {
    padding-top: 70px;
  }
}

@media (max-width: 479px) {
  #page {
    padding-top: 50px;
  }
}

a {
  color: #9d0a0e;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: none;
}

.main-content.article a {
  font-weight: 600;
}

.details .overview a {
  font-weight: 600;
  color: #9d0a0e;
}

@media (max-width: 1200px) {
  p.no-result {
    margin-left: 10px;
  }
}

@media (max-width: 1024px) {
  p.no-result {
    margin-left: 18px;
  }
}

.clear {
  clear: both;
}

.clear.odd,
.clear.even {
  clear: none;
}

#viewport {
  overflow: hidden;
  position: relative;
}

#viewport-content {
  position: relative;
  left: 0;
  -webkit-transition: left 0.25s ease-in-out;
  -moz-transition: left 0.25s ease-in-out;
  transition: left 0.25s ease-in-out;
}

@media (max-width: 1024px) {
  #viewport.mobile-menu-opened #viewport-content {
    left: 384px;
  }
}

@media (max-width: 479px) {
  #viewport.mobile-menu-opened #viewport-content {
    left: 244px;
  }
}

.page-width {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0;
  position: relative;
}

/* @media (max-width: 1200px) { header .page-width { margin-left: 10px; } } */
@media (max-width: 767px) {
  .page-width {
    padding: 0;
  }
}

.form-item,
.form-actions {
  margin: 0;
}

.main-content hr {
  display: block;
  color: transparent;
  height: 1px;
  border: 0;
  margin: 30px 0 25px 0;
  position: relative;
}

.main-content hr::before {
  content: "";
  position: absolute;
  right: 35%;
  left: 35%;
  height: 1px;
  background: -moz-linear-gradient(left, rgba(148, 147, 141, 0) 0%, rgba(148, 147, 141, 1) 25%, rgba(148, 147, 141, 1) 75%, rgba(148, 147, 141, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(148, 147, 141, 0)), color-stop(25%, rgba(148, 147, 141, 1)), color-stop(75%, rgba(148, 147, 141, 1)), color-stop(100%, rgba(148, 147, 141, 0)));
  background: -webkit-linear-gradient(left, rgba(148, 147, 141, 0) 0%, rgba(148, 147, 141, 1) 25%, rgba(148, 147, 141, 1) 75%, rgba(148, 147, 141, 0) 100%);
  background: -o-linear-gradient(left, rgba(148, 147, 141, 0) 0%, rgba(148, 147, 141, 1) 25%, rgba(148, 147, 141, 1) 75%, rgba(148, 147, 141, 0) 100%);
  background: -ms-linear-gradient(left, rgba(148, 147, 141, 0) 0%, rgba(148, 147, 141, 1) 25%, rgba(148, 147, 141, 1) 75%, rgba(148, 147, 141, 0) 100%);
  background: linear-gradient(to right, rgba(148, 147, 141, 0) 0%, rgba(148, 147, 141, 1) 25%, rgba(148, 147, 141, 1) 75%, rgba(148, 147, 141, 0) 100%);
}




/* -- YouTube Video -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.youtube-container {
  padding: 0 0 56.25% !important;
  height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.youtube-container iframe {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}




/****************** Figure - Video *****************/

figure,
.figure {
  position: relative;
  margin: 2em 0;
}

figure a,
.figure a {
  position: relative;
  display: block;
}

figure.video a::after,
.figure.video a::after {
  content: "";
  width: 204px;
  height: 204px;
  margin: -102px 0 0 -102px;
  background: url(../img/interface/video-play-button.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  left: 50%;
}

figure.video a:hover::after,
figure.video a:focus::after,
.figure.video a:hover::after,
.figure.video a:focus::after {
  background-position: 0 100%;
}

figure.video.play a::after,
.figure.video.play a::after {
  border-color: #000 !important;
  background: none !important;
}

figure.video.play object,
.figure.video.play object {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1000;
}

.box-carousel figure.video a::after {
  background: none;
}

figure img {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

figure .youtube-container,
.figure .youtube-container {
  width: 100% !important;
  max-width: 100%;
}

figure,
.figure {
  width: 100%;
}

figure.half-left,
figure.half-right,
.figure.half-left,
.figure.half-right {
  width: auto;
  max-width: 50%;
}

figure.half-left .youtube-container,
figure.half-right .youtube-container,
.figure.half-left .youtube-container,
.figure.half-right .youtube-container {
  width: 560px !important;
  max-width: 100%;
}

figure.half-left,
.figure.half-left {
  float: left;
  margin-right: 20px;
}

figure.half-right,
.figure.half-right {
  float: right;
  margin-left: 20px;
}

figure figcaption {
  position: absolute;
  bottom: 40px;
  left: 70px;
  right: 50%;
}

.article figure.caption figcaption {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  font-size: 1.2rem;
}

figure figcaption p {
  color: #fff;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 4.1rem;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

figure figcaption p.title {
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 0.2em;
}

figure figcaption p span {
  background: rgba(20, 12, 10, 0.7);
  display: inline;
  -webkit-box-shadow: -5px 0 0 rgba(20, 12, 10, 0.7), 5px 0 0 rgba(20, 12, 10, 0.7);
  -moz-box-shadow: -5px 0 0 rgba(20, 12, 10, 0.7), 5px 0 0 rgba(20, 12, 10, 0.7);
  box-shadow: -5px 0 0 rgba(20, 12, 10, 0.7) 5px 0 0 rgba(20, 12, 10, 0.7);
}

@media (max-width: 767px) {
  figure,
  .figure {
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: none !important;
  }

  figure img,
  .figure img {
    width: auto !important;
    max-width: 100% !important;
  }

  figure .youtube-container,
  .figure .youtube-container,
  figure.half-left .youtube-container,
  figure.half-right .youtube-container,
  .figure.half-left .youtube-container,
  .figure.half-right .youtube-container {
    width: 100% !important;
  }
}

.promo-box .product.media .promo-product::after {
  content: "";
  width: 204px;
  height: 204px;
  margin: -102px 0 0 -102px;
  background: url(../img/interface/media-download-button.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
}

.promo-box .product.media .video .promo-product::after {
  background: url(../img/interface/video-play-button.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
}

@media (max-width: 767px) {
  .promo-box .product.media .promo-product::after {
    width: 104px;
    height: 104px;
    margin: -125px 0 0 -52px;
  }
}

@media (max-width: 767px) {
  /* figure { position: relative; margin: 0 -1.8rem 2rem -1.8rem; } */
  figure.video a::after {
    width: 102px;
    height: 102px;
    margin: -52px 0 0 -52px;
  }

  figure figcaption {
    padding: 2px 18px;
    bottom: 25px;
    right: 10px;
    left: 10px;
  }

  figure figcaption p {
    font-size: 1.6rem;
    line-height: 1.8rem;
  }

  figure figcaption p span {
    line-height: 1.7rem;
  }

  figure figcaption p.title {
    font-size: 2.6rem;
    line-height: 3rem;
    margin-bottom: 0;
  }

  .box-carousel figure figcaption {
    bottom: 75px;
  }
}

@media (max-width: 479px) {
  figure figcaption {
    padding: 2px 18px;
    bottom: 7px;
    right: 10px;
    left: 0;
  }

  figure figcaption p.title {
    font-size: 1.6rem !important;
    line-height: 2rem;
    display: block;
    margin: 0;
  }

  .box-carousel figure figcaption {
    bottom: 75px;
  }

  .news.article figure.half-left,
  .news.article figure.half-right {
    width: 100%;
  }
}


/*********** Social media ****************/

#socials {
  display: block;
  position: relative;
  padding-bottom: 50px;
  clear: both;
}

#socials.top {
  padding-bottom: 0;
}

/* #socials:after { content: ""; height: 0; display: block; clear: both; overflow: hidden; visibility: hidden; } */

.social-medias {
  margin: 0;
  padding: 0;
}

.social-medias a {
  text-indent: -999px;
  width: 37px;
  height: 38px;
  margin: 0;
  padding: 0;
  outline: none;
  background: url(../img/interface/social-media-icons.png) -100% -100% no-repeat;
  background-size: auto !important;
  float: left;
  overflow: hidden;
}

.social-medias a.twitter {
  background-position: 0 0;
}

.social-medias a.twitter:hover,
.social-medias a.twitter:focus {
  background-position: 0 -38px;
}

header .social-medias a.twitter {
  background-position: 0 0;
}

header .social-medias a.twitter:hover,
header .social-medias a.twitter:focus,
header .social-medias a.twitter:active {
  background-position: 0 -38px;
}

header .social-medias a.youtube {
  background-position: -35px 0;
}

header .social-medias a.youtube:hover,
header .social-medias a.youtube:focus,
header .social-medias a.youtube:active {
  background-position: -35px -38px;
}

header .social-medias a.facebook {
  width: 28px;
  background-position: -76px 0;
}

header .social-medias a.facebook:hover,
header .social-medias a.facebook:focus,
header .social-medias a.facebook:active {
  background-position: -76px -38px;
}

header .social-medias a.tumblr {
  width: 28px;
  background-position: -112px 0;
}

header .social-medias a.tumblr:hover,
header .social-medias a.tumblr:focus,
header .social-medias a.tumblr:active {
  background-position: -112px -38px;
}

header .social-medias a.pinterest {
  width: 27px;
  background-position: -148px 0;
}

header .social-medias a.pinterest:hover,
header .social-medias a.pinterest:focus,
header .social-medias a.pinterest:active {
  background-position: -148px -38px;
}

header .social-medias a.dragon-plus {
  width: 27px;
  margin-left: 5px;
  background-position: -175px 0;
}

header .social-medias a.dragon-plus:hover,
header .social-medias a.dragon-app:focus,
header .social-medias a.dragon-app:active {
  background-position: -175px -38px;
}

.social-medias a.youtube:hover,
.social-medias a.youtube:focus {
  background-position: -35px -38px;
}

.social-medias a.facebook:hover,
.social-medias a.facebook:focus {
  background-position: -76px -38px;
}

@media (max-width: 1023px) {
  .social-medias.content {
    right: 18px;
    margin-top: 5px;
  }
}

.social-medias.content {
  margin: 10px 0 0;
  padding: 0;
  position: absolute;
  right: 0;
}

@media (max-width: 1023px) {
  .top .social-medias.content {
    display: inline-block;
    float: right;
    position: relative;
    margin-bottom: 20px;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .top .social-medias.content {
    float: left;
  }
}

@media (max-width: 479px) {
  .top .social-medias.content {
    float: none;
  }
}

.social-medias.content a:hover,
.social-medias.content a:focus {
  color: #fff;
}

.social-medias.content a {
  color: #fff;
  text-indent: 20px;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 400 !important;
  line-height: 31px;
  text-align: center;
  width: 120px;
  height: 31px;
  margin: 0;
  padding: 0;
  outline: none;
  background: url(../img/community/social-media-icons-small.png) -100% -100% no-repeat;
  background-size: auto !important;
  float: left;
  overflow: hidden;
}

.social-medias.content a.facebook {
  background-position: 3px 5px;
  background-color: #3b5998;
}

.social-medias.content a.twitter {
  background-position: 8px -25px;
  background-color: #00acee;
  margin: 0 6px;
}

.social-medias.content a.google {
  background-position: 8px -58px;
  background-color: #dd4b39;
}

@media (max-width: 479px) {
  .social-medias.content a {
    width: 90px;
  }

  .social-medias.content a span {
    display: none;
  }

  .social-medias.content a #facebook-count,
  .social-medias.content a #twitter-count,
  .social-medias.content a #google-count {
    display: inline;
  }
}

.actions {
  text-align: center;
  margin: 20px 0 0;
}

.action-button {
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  margin: 0;
  padding: 10px 35px;
  border: 0;
  display: inline-block;
  background: #333;
  position: relative;
  cursor: pointer;
}

.action-button:hover {
  background: #9d0a0e;
}

.action-button.more-button {
  padding-left: 50px;
}

.action-button.more-button::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  left: 18px;
  background: url(../img/interface/see-more-icon.png) 0 0 no-repeat;
}

.action-button.more-button.loading::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  left: 18px;
  background: url(../img/interface/loading.gif) 0 0 no-repeat;
}

.actions.all-articles {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  text-align: inherit;
}

@media (max-width: 767px) {
  .actions.all-articles {
    position: static;
    top: auto;
    right: auto;
  }
}

.actions.all-articles .action-button {
  color: #000;
  font: inherit;
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  margin: 0;
  padding: 10px 25px;
  border: 0;
  display: inline-block;
  cursor: pointer;
  background: none;
  position: relative;
  text-align: left !important;
}

.actions.all-articles .action-button span.icon {
  background: url(../img/interface/all-articles.png);
  width: 11px;
  height: 17px;
  position: absolute;
  top: 10px;
  bottom: 0;
  right: 2px;
}


/***********  ------- cta-button -----------------  ************/
.cta-button,
.cta-button::before {
  color: #fff !important;
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  background: #140c0a 50% 50% no-repeat;
  background-size: auto !important;
  -webkit-transition-property: -webkit-box-shadow, background-color;
  -webkit-transition-duration: 0.25s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-property: -moz-box-shadow, background-color;
  -moz-transition-duration: 0.25s;
  -moz-transition-timing-function: ease-in-out;
  transition-property: box-shadow, background-color;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}

.cta-button:hover,
.cta-button:hover::before,
.article-preview:not(.audio-article):hover .cta-button,
.article-preview:not(.audio-article):hover .cta-button::before,
.audio-playing .cta-button.audio-listen {
  color: #fff !important;
  background-color: #9d0a0e !important;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

.audio-playing .content .cta-button.audio-listen::after {
  background-image: url(../img/interface/learn-more-button-icon.png);
  background-color: #9d0a0e;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

.cta-button {
  margin-left: 33px;
  padding: 0.2em 10px;
  display: inline-block;
  position: relative;
  z-index: 100;
}

.cta-button::before {
  content: "";
  width: 30px;
  background-image: url(../img/interface/learn-more-button-icon.png);
  position: absolute;
  top: 0;
  bottom: 0;
  left: -33px;
}

p .cta-button.pdf {
  margin: 20px 0 0 33px !important;
}

@media (max-width: 767px) {
  #page-header .cta-button,
  #page-header .cta-button::before,
  .image-header .cta-button,
  .image-header .cta-button::before {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
  }

  #page-header .cta-button,
  .image-header .cta-button {
    font-size: 1.4rem;
    font-weight: 400;
    color: #959595 !important;
    margin-left: 0;
    padding: 0 35px;
    display: block;
  }

  #page-header .cta-button::before,
  .image-header .cta-button::before {
    left: auto;
    right: 5px;
    background-image: none;
    background-color: transparent !important;
  }

  .promo-box .cta-button {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .promo-box .cta-button,
  .promo-box .cta-button::before {
    background-color: rgba(100, 100, 100, 0.5);
  }
}

.cta-button span.icon {
  display: none !important;
}

.page-end {
  clear: both;
  width: auto;
  height: 67px;
  background: url(../img/interface/page-end.png) center center no-repeat;
  background-size: auto 67px !important;
  margin: 20px 0 0 0;
  position: relative;
}

.page-end::before {
  content: "";
  position: absolute;
  height: 1px;
  right: 56%;
  bottom: 50%;
  left: 0;
  border-bottom: 1px solid #000;
}

.page-end::after {
  content: "";
  position: absolute;
  height: 1px;
  left: 56%;
  bottom: 50%;
  right: 0;
  border-bottom: 1px solid #000;
}

@media (max-width: 1200px) {
  .page-end::before {
    right: 56%;
    left: 20px;
  }

  .page-end::after {
    left: 56%;
  }

  .news.article .page-end::before {
    left: 0;
  }
}

@media (max-width: 1023px) {
  .page-end {
    width: 100%;
  }

  .page-end::after {
    left: 56%;
    right: 20px;
  }

  .news.article .page-end::after {
    right: 0;
  }
}

@media (max-width: 767px) {
  .page-end::before {
    right: 58%;
  }

  .page-end::after {
    left: 58%;
  }
}

@media (max-width: 479px) {
  .page-end::before {
    right: 62%;
  }

  .page-end::after {
    left: 62%;
  }
}


/* !-- Content -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#page-container {
  background-position: 50% 0;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  #page-container {
    background-position: 70% -1%;
    background-size: 200% !important;
  }
}

@media (max-width: 480px) {
  #page-container {
    background-position: 70% -1%;
    background-size: 200% !important;
  }
}

#content {
  padding-bottom: 35px;
  z-index: 10;
}

.main-content {
  float: left;
  margin-bottom: 30px;
}

.main-content.books {
  float: none;
}

.main-content p.actions {
  clear: both;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .main-content p.actions {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.product_catalog .main-content.books article p.actions {
  margin-top: 5px;
  margin-bottom: 10px;
}

#hero .cta-button:hover,
#hero .cta-button:focus,
#hero .cta-button:hover::before,
#hero .cta-button:focus::before,
#page-header .cta-button:hover,
#page-header .cta-button:focus,
#page-header .cta-button:hover::before,
#page-header .cta-button:focus::before,
.promo-box .cta-button:hover,
.promo-box .cta-button:focus,
.promo-box .cta-button:hover::before,
.promo-box .cta-button:focus::before {
  -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

@media (max-width: 767px) {
  #hero .cta-button,
  #hero .cta-button::before,
  #page-header .cta-button,
  #page-header .cta-button::before {
    background-color: transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
  }

  #hero .cta-button,
  #page-header .cta-button {
    margin: 0;
    padding-right: 20px;
    padding-left: 0;
    display: inline-block;
  }

  #hero .cta-button::before,
  #page-header .cta-button::before {
    width: 12px;
    position: absolute;
    right: 0;
    left: auto;
  }
}

article h2 {
  margin-bottom: 35px;
  text-transform: uppercase;
  display: block;
  font-size: 4.6rem;
  line-height: 4.8rem;
  font-weight: 700;
  width: 100%;
}

article h2.with-social { /* float:left; */
  width: 60%;
}

article h2.with-view-mode {
  float: left;
  width: 60%;
  margin-bottom: 0;
}

.product.product_media-resources article h2,
.product_catalog article h2.with-view-mode {
  width: 100%;
}

@media (max-width: 1200px) {
  article h2,
  .product article h2 {
    font-size: 4.2rem;
  }
}

@media (max-width: 1023px) {
  article h2,
  .product article h2 {
    font-size: 3.5rem;
    line-height: 3.6rem;
    line-height: 3rem;
  }

  article h2.with-social {
    width: 46%;
  }
}

@media (max-width: 767px) {
  article h2,
  .product article h2 {
    font-size: 2.8rem;
    line-height: 3rem;
    margin-bottom: 10px;
    width: 100%;
  }

  article h2.with-social {
    width: 100%;
    clear: both;
  }

  article h2.with-view-mode {
    width: 100%;
  }
}

article h3 {
  font-size: 3.4rem;
  line-height: 3rem;
  font-weight: 700;
  margin: 40px 0 20px 0;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  article h3 {
    font-size: 2rem;
    line-height: 1.8rem;
    margin: 15px 0 5px 0;
  }
}

article p.lead {
  font-size: 1.8rem;
  line-height: 2.4rem;
}

@media (max-width: 767px) {
  article p.lead {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}

@media (max-width: 767px) {
  article p {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}


/* !-- Articles Lists -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* -- Article Preview -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.article-preview {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.article-preview .wrap {
  padding: 18px;
  position: relative;
}

.article-preview .image {
  margin-bottom: 8px;
  display: block;
  -webkit-filter: grayscale(0.7);
  -webkit-transition: -webkit-filter 0.25s ease-in-out;
  -webkit-backface-visibility: hidden;
  width: 100%;
  position: relative;
}

.article-preview:not(.audio-article):hover .image,
.article-preview.audio-article .audio-play:hover {
  -webkit-filter: grayscale(0);
}

.article-preview .image::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -moz-transition: opacity 0.25s ease-in-out;
  -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -ms-transition: opacity 0.25s ease-in-out;
  -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -o-transition: opacity 0.25s ease-in-out;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  transition: opacity 0.25s ease-in-out;
}

.article-preview:not(.audio-article):hover .image::before,
.article-preview.audio-article .audio-play:hover::before {
  opacity: 1;
}

.article-preview .image img {
  width: 100%;
  height: auto;
  display: block;
}
.article-preview .content {  }
.article-preview .text {  }

.article-preview .text a {
  color: #333;
  text-decoration: none;
}

.article-preview:not(.audio-article):hover .text a,
.article-preview .text a:hover,
.article-preview .text a:focus,
.article-preview .text a:active {
  color: #9d0a0e;
}

.article-preview h4 {
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  margin-bottom: 0;
}

.article-preview p {
  font-size: 1.4rem;
  margin: 0 0 1.4em 0;
  padding: 0;
}

.article-preview .category {
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: 0;
}

.article-preview .author {
  font-style: italic;
  font-size: 1.2rem;
  margin-bottom: 0.5em;
}

.article-preview .author a {
  color: #676763;
}
.article-preview .summary {  }

.article-preview .actions {
  text-align: left;
}

.article-preview .cta-button {
  font-size: 1.4rem; /* padding-top: .2em; padding-bottom: .2em; */
  margin-left: 22px;
}

.article-preview .cta-button::before,
.books .cta-button::before {
  width: 30px;
  background-size: 8px auto !important;
  left: -32px;
}

.news .articles .cta-button,
.product_catalog .articles .cta-button {
  font-size: 1.4rem;
  line-height: 1.4rem;
}

.books .cta-button {
  margin-left: 22px;
}

aside .article-preview .wrap {
  padding-left: 0;
  padding-right: 0;
}


/* -- Article List -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.article-list { }

.article-list::after {
  content: "";
  height: 0;
  display: block;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.article-list .article-preview {
  width: 33.33%;
  float: left;
}

.article-list .clear.clear-3 {
  clear: both;
}

@media (max-width: 1023px) {
  .article-list .article-preview {
    width: 50%;
    float: left;
  }

  .article-list .clear {
    clear: none !important;
  }

  .article-list .clear.even {
    clear: both !important;
  }
}

@media (max-width: 767px) {
  .article-list .article-preview {
    width: 100%;
  }

  .article-list .clear {
    clear: none !important;
  }
}


/* -- Article Feature -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.article-feature .article-preview .wrap {
  padding: 0;
  margin: 0 0 18px;
}

.article-feature .article-preview .image {
  margin-bottom: 0;
}

.article-feature .article-preview .image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.8)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
}

.article-feature .article-preview .content {
  color: #fff;
  padding: 18px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

.article-feature .article-preview .content .text a {
  color: #fff;
}

.article-feature .article-preview .content .text .category,
.article-feature .article-preview .content .text .author {
  color: #fff;
}

.article-feature .article-preview .content .summary p {
  font-size: 1.6rem;
  line-height: 2rem;
}

.article-feature .article-preview h4 {
  padding: 0 6px;
}

.article-feature .article-preview h4 a {
  font-size: 2.4rem;
  line-height: 1.2em;
  text-decoration: none !important;
  background: #000;
  -webkit-box-shadow: -6px 0 0 #000, 6px 0 0 #000;
  -webkit-transition-property: -webkit-box-shadow, background-color;
  -webkit-transition-duration: 0.25s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-box-shadow: -6px 0 0 #000, 6px 0 0 #000;
  -moz-transition-property: -moz-box-shadow, background-color;
  -moz-transition-duration: 0.25s;
  -moz-transition-timing-function: ease-in-out;
  box-shadow: -6px 0 0 #000, 6px 0 0 #000;
  transition-property: box-shadow, background-color;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}

.article-feature .article-preview:hover h4 a {
  background: #9d0a0e;
  -webkit-box-shadow: -6px 0 0 #9d0a0e, 6px 0 0 #9d0a0e;
  -moz-box-shadow: -6px 0 0 #9d0a0e, 6px 0 0 #9d0a0e;
  box-shadow: -6px 0 0 #9d0a0e, 6px 0 0 #9d0a0e;
}

@media (max-width: 767px) {
  .article-feature .article-preview .actions .cta-button {
    display: inline-block;
  }

  .article-feature .article-preview h4 a,
  .article-feature .article-preview .actions .cta-button,
  .article-feature .article-preview .actions .cta-button::before {
    background: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
  }

  .article-feature .article-preview .actions .cta-button::before {
    background-image: none;
  }

  .article-feature .article-preview .content {
    padding-right: 60px;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    -webkit-transition: background-color 0.25s ease-in-out;
    -moz-transition: background-color 0.25s ease-in-out;
    -ms-transition: background-color 0.25s ease-in-out;
    -o-transition: background-color 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out;
  }

  .article-feature .article-preview .content:hover,
  .article-feature .article-preview .content:focus {
    background: rgba(120, 5, 5, 0.9);
  }

  .article-feature .article-preview .content::after {
    content: url(../img/interface/learn-more-button-icon-home.png);
    position: absolute;
    right: 25px;
    top: 50%;
    margin-top: -12.5px;
  }

  .article-feature .article-preview .content.no-link {
    background: rgba(0, 0, 0, 0.7) !important;
    cursor: default;
  }

  .article-feature .article-preview .content.no-link::after {
    display: none;
  }

  .article-feature .article-preview h4 {
    padding-left: 0;
    padding-right: 0;
  }

  .article-feature .article-preview h4 a {
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  .article-feature .article-preview .category,
  .article-feature .article-preview .author,
  .article-feature .article-preview .summary {
    display: none;
  }

  .article-feature .article-preview .actions {
    margin-top: 0;
  }

  .article-feature .article-preview .cta-button,
  .article-feature .article-preview .cta-button::before {
    background-color: transparent;
  }

  .article-feature .article-preview .cta-button {
    text-align: left;
    margin-left: 0;
    padding: 0 30px 0 0;
    display: inline-block;
  }

  .article-feature .article-preview .cta-button::before {
    left: auto;
    right: 0;
  }
}


/* -- Article Related -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.article-related {
  margin: 50px -18px 0;
}

.play-events_podcasts-livestream .article-related {
  margin-top: 0;
}

.play-events_podcasts-livestream .livestream-games .article-related {
  margin-top: 30px;
}

@media (max-width: 1200px) {
  .article-related {
    margin: 0;
  }
}

.article-related .header {
  text-transform: uppercase;
  margin: 0 18px;
  position: relative;
}

@media (max-width: 767px) {
  .article-related .header {
    margin: 30px 18px;
  }
}

.article-related .header h3 {
  font-weight: 600;
  font-size: 3.4rem;
  margin: 0;
  padding: 0;
  display: inline-block;
}

@media (max-width: 767px) {
  .article-related .header h3 {
    font-size: 2.6rem;
    font-weight: 700;
  }
}

.header .all {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1em;
  margin: -0.5em 0 0 0;
  padding: 0;
  position: absolute;
  top: 50%;
  right: 0;
}

@media (max-width: 767px) {
  .header .all {
    position: relative;
    line-height: 1em;
    margin: 0;
    right: inherit;
  }
}

.header .all a {
  color: #000;
  text-decoration: none;
  padding-right: 20px;
  display: inline-block;
  position: relative;
}

.header .all a:hover {
  color: #9d0a0e;
}

.header .all a::after {
  content: "";
  width: 11px;
  height: 17px;
  margin: -9px 0 0 0;
  background: url(../img/interface/all-articles.png) 50% 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  right: 0;
}

.header .all a:hover::after {
  background-position: 0 100%;
}


/* !-- Page Header -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#page-header {
  color: #fff;
  background-size: 100% auto !important;
  background: 50% 0 no-repeat;
  position: relative;
  max-height: 600px;
  overflow: hidden;
  margin-bottom: 35px;
}





/* -- Page hub backgound -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media all {
  .hub-page-background {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
  }

  .hub-page-background img,
  .hub-page-background video {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    z-index: 1;
  }

  /* Image mask */
  .hub-page-background::after {
    content: "";
    height: 200px;
    background: url(../img/interface/page-header-mask.png) 50% 0 repeat-x;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
  }
}

@media (max-width: 767px) {
  .hub-page-background {
    height: 515px;
  }

  .hub-page-background img,
  .hub-page-background video {
    width: auto;
    height: 100%;
    margin-left: -426px;
    display: block;
    position: relative;
    left: 50%;
    z-index: 1;
  }
}

@media (max-width: 480px) {
  .hub-page-background {
    height: 400px;
  }

  .hub-page-background img,
  .hub-page-background video {
    margin-left: -331px;
    left: 30%;
  }

  .hub-page-background::after {
    display: none;
  }
}

/* Page header mask */

/*
#page.hub .background-mask { position: absolute; top: 0; right: 0; left: 0; z-index: 1; }
#page.hub .background-mask:after { content: ""; height: 200px; background: url(../img/interface/page-header-mask.png) 50% 0 repeat-x; position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden; }
#page.hub .background-mask img { display: block; width: 100%; height: auto; visibility: hidden; }
@media (max-width: 767px) {
	#page.hub .background-mask img { width: 200%; }
}
*/

.article #page-header {
  height: 387px;
}

.news.article #page-header {
  height: 500px;
}

#page-header img,
#page-header video {
  display: block;
  height: auto;
  width: 100%;
  z-index: 1;
}

#page-header .page-width {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -600px;
  width: 620px;
  z-index: 10;
}

.page.news.article #page-header .page-width {
  position: absolute !important;
}

@media (max-width: 1220px) {
  #page-header .page-width {
    margin-left: 0;
    left: 10px;
  }
}

@media (max-width: 1023px) {
  #page-header .page-width {
    left: 25px;
  }
}

@media (max-width: 767px) {
  #page-header .page-width {
    bottom: 0;
    left: 0;
    top: auto;
    width: 100%;
  }
}

* > /**/#page-header .page-width {
  display: block;
  height: 100%;
}

#page-header .page-width::after {
  content: "";
  height: 0;
  display: block;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

#page-header .intro {
  width: 620px;
  padding-top: 100px;
  float: left;
}

.product.details #page-header .intro {
  width: 560px;
}

#page-header .wrapper-logo {
  display: table;
  width: 100%;
  height: 100%;
}

#page-header .intro-logo {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#page-header .intro-logo img {
  margin: 0;
  width: auto;
  height: auto;
  position: relative;
  top: auto;
  left: auto;
}

@media (max-width: 767px) {
  #page-header .intro-logo img {
    max-width: 100%;
    width: auto;
    height: auto;
  }
}

.article .filter-on#page-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: /*url(../img/interface/texture-hover.png) 0 0 repeat, */-moz-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9) 100%); /* FF3.6+ */
  background: /*url(../img/interface/texture-hover.png) 0 0 repeat, */-webkit-gradient(linear, left top, left bottom, color-stop(30%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); /* Chrome,Safari4+ */
  background: /*url(../img/interface/texture-hover.png) 0 0 repeat, */-webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10+,Safari5.1+ */
  background: /*url(../img/interface/texture-hover.png) 0 0 repeat, */-o-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9) 100%); /* Opera 11.10+ */
  background: /*url(../img/interface/texture-hover.png) 0 0 repeat, */-ms-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9) 100%); /* IE10+ */
  background: /*url(../img/interface/texture-hover.png) 0 0 repeat, */linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9) 100%); /* W3C */
}

.promo-box.games .promo-product a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.8)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
}

.article #page-header img,
.article #page-header video {
  margin-top: -10%;
}

.news.article #page-header img,
.news.article #page-header video {
  margin-top: 0;
}

@media (max-width: 1919px) {
  .news #page-header .intro {
    padding-top: 60px;
  }

  .hub #page-header .intro {
    padding-top: 100px;
  }

  .article #page-header,
  .article #page-header img,
  .article #page-header video {
    height: 320px;
  }

  .news.article #page-header,
  .article #page-header img,
  .article #page-header video {
    height: 500px;
  }

  .article #page-header img,
  .article #page-header video {
    margin: 0 0 0 -975px;
    width: 1920px;
    height: auto;
    position: absolute;
    top: -55%;
    left: 50%;
  }

  .news.article #page-header img,
  .news.article #page-header video {
    margin: 0 0 0 -960px;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    left: 50%;
  }
}

@media (max-width: 1200px) {
  .product.details #page-header .intro {
    padding-top: 100px;
  }

  .article #page-header img,
  .article #page-header video {
    margin: 0 0 0 -600px;
    width: 1200px;
    top: -30%;
  }

  .news.article #page-header,
  .news.article #page-header img,
  .news.article #page-header video {
    height: 320px;
  }

  .news.article #page-header img,
  .news.article #page-header video {
    margin: 0 0 0 -614px;
    width: auto;
    top: 0;
  }
}

@media (max-width: 1024px) {
  #page-header .intro {
    padding-top: 45px;
    margin-top: 0;
  }

  .hub #page-header .intro {
    padding-top: 100px;
  }

  .product.details #page-header .intro {
    width: 420px;
  }

  .child-playevents #page-header .intro {
    width: auto;
  }

  .child-playevents #page-header .page-width {
    width: 50%;
  }

  #page-header,
  #page-header img,
  #page-header video {
    height: 321px;
  }

  .hub #page-header {
    height: 400px;
  }

  #page-header {
    background-size: auto 100% !important;
  }

  #page-header img,
  #page-header video {
    margin: 0 0 0 -511px;
    width: 1023px;
    position: absolute;
    top: 0;
    left: 50%;
  }

  .article #page-header .page-width {
    bottom: 45px;
  }

  .article #page-header img,
  .article #page-header video {
    margin: 0 0 0 -512px;
    width: 1024px;
    top: -20%;
  }

  .news.article #page-header img,
  .news.article #page-header video {
    top: 0;
  }

  .news.article #page-header,
  .news.article #page-header img,
  .news.article #page-header video {
    height: 320px;
  }
}

@media (max-width: 767px) {
  #page-header > .page-width,
  #page-header img,
  #page-header video .article #page-header {
    height: 306px;
  }

  #page-header {
    height: auto;
    background-size: auto 100% !important;
  }

  #page-header > .page-width {
    position: relative;
  }

  .child-playevents #page-header .page-width {
    width: 100%;
  }

  .news #page-header .intro {
    padding-top: 20px;
  }

  .hub #page-header {
    margin-bottom: 35px;
  }

  #page-header img,
  #page-header video {
    margin: 0 0 0 -487px;
    width: 975px;
    position: absolute;
    top: 0;
    left: 40%;
  }

  #page-header .intro,
  .hub #page-header .intro,
  .product.details #page-header .intro {
    width: auto;
    padding: 20px 40px 20px 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    float: none;
    cursor: pointer;
    -webkit-transition: background-color 0.25s ease-in-out;
    -moz-transition: background-color 0.25s ease-in-out;
    -ms-transition: background-color 0.25s ease-in-out;
    -o-transition: background-color 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out;
  }

  #page-header .intro:hover,
  #page-header .intro:focus .hub #page-header .intro:hover,
  .hub #page-header .intro:focus,
  .product.details #page-header .intro:hover,
  .product.details #page-header .intro:focus {
    background: rgba(120, 5, 5, 0.9);
  }

  #page-header .intro::after {
    content: url(../img/interface/learn-more-button-icon-home.png);
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -12.5px;
  }

  #page-header .intro.no-link {
    background: rgba(0, 0, 0, 0.7) !important;
    cursor: default;
  }

  #page-header .intro.no-link::after {
    display: none;
  }

  .hub #page-header .intro {
    bottom: 0;
  }

  .homepage #page-header .intro {
    bottom: 0;
    top: inherit;
  }

  #page-header .intro p {
    margin: 0;
  }

  .article #page-header img,
  .article #page-header video {
    margin: 0 0 0 -512px;
    width: 1024px;
    top: -20%;
  }

  .news.article #page-header,
  .news.article #page-header img,
  .news.article #page-header video {
    height: 250px;
  }

  .article #page-header .page-width {
    bottom: 0;
  }

  .news.article #page-header img,
  .news.article #page-header video {
    margin: 0 0 0 -480px;
    width: auto;
    top: 0;
  }
}

@media (max-width: 479px) {
  #page-header img,
  #page-header video {
    left: 15%;
  }
}

#page-header h1 {
  color: #fff;
  font-weight: 700;
  font-size: 5rem;
  text-transform: uppercase;
  margin: 0 -6px 0 6px;
  display: inline-block;
}

#page-header h1::after {
  content: "";
  height: 0;
  display: block;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

#page-header h1 span {
  line-height: 7.2rem;
  background: rgba(20, 12, 10, 0.7);
  padding: 2px 0;
  box-shadow: 6px 0 0 rgba(20, 12, 10, 0.7), -6px 0 0 rgba(20, 12, 10, 0.7);
}

.homepage #page-header h1 span {
  font-style: italic;
}

#page-header h1 span.first-line {
  font-size: 2.5rem;
  line-height: 3.5rem;
  color: #959595;
  display: table;
  float: none;
}

.product.details #page-header h1 span {
  margin: 0;
  font-size: 2.5rem;
  line-height: 2.5rem;
  color: #959595;
  padding: 0 0 8px;
  display: table;
  float: none;
}

.product.details #page-header h1 span.first-line {
  color: #fff;
  font-size: 5rem;
  line-height: 7.2rem;
  background: rgba(20, 12, 10, 0.7);
  padding: 2px 0;
  display: inline;
}

.product.details #page-header h1 span.product-author {
  margin: 0;
  color: #fff;
  font-size: 1.6rem;
  line-height: 2.6rem;
  display: table;
  float: none;
  text-transform: none;
}

/* Targeting Any Firefox */
@-moz-document url-prefix() {
  .product.details #page-header h1 span.first-line {
    line-height: 7.3rem;
  }
}

/* Targeting windows browser only */
.windows .product.details #page-header h1 span.product-author {
  padding: 5px 0;
}

@media (max-width: 1200px) {
  #page-header h1 {
    font-size: 4.5rem;
  }

  #page-header h1 span {
    font-size: 3.5rem;
    line-height: 5.2rem;
  }

  #page-header h1 span.first-line {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .product.details #page-header h1 span.first-line {
    font-size: 3.5rem;
    line-height: 5.1rem;
  }

  .product.details #page-header h1 span {
    font-size: 2rem;
    line-height: 2rem;
    padding: 6px 0;
  }

  /* Targeting windows browser only */
  .windows .product.details #page-header h1 span.first-line {
    font-size: 3.5rem;
    line-height: 5.15rem;
  }

  /* Targeting Any Firefox */
  @-moz-document url-prefix() {
    .product.details #page-header h1 span.first-line {
      font-size: 3.5rem;
      line-height: 5.3rem;
    }
  }
}

@media (max-width: 1023px) {
  #page-header h1 {
    max-width: 500px;
  }

  #page-header h1 span {
    font-size: 3rem;
    line-height: 3.5rem;
  }

  #page-header h1 span.first-line {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
}

@media (max-width: 767px) {
  #page-header h1 {
    white-space: normal;
    margin: 0;
    display: block;
  }

  #page-header h1 span {
    font-size: 2.6rem;
    line-height: 2.6rem;
    display: block;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  #page-header h1 span.first-line {
    font-size: 1.8rem;
  }

  .product.details #page-header h1 span {
    font-size: 1.8rem;
    box-shadow: none;
    padding: 0;
    display: none;
  }

  .product.details #page-header h1 span.first-line {
    font-size: 2.6rem;
    background: none;
    display: block;
    box-shadow: none;
  }

  .product.details #page-header h1 span.product-author {
    font-size: 1.4rem;
    font-weight: 400;
    display: none;
  }
}

#page-header .text {
  text-shadow: 1px 1px 2px #000;
  margin: 1rem 0 0;
}

#page-header .text.dark,
#hero .text.dark,
#error-content .header-wrapper .text.dark {
  color: #140c0a !important;
  text-shadow: 1px 1px 2px white !important;
}

#page-header .text.dark .subtitle,
#page-header .text.dark .author,
#hero .text.dark .subtitle,
#hero .text.dark .author,
#error-content .header-wrapper .text.dark .subtitle,
#error-content .header-wrapper .text.dark .author {
  color: inherit !important;
}

#page-header .text.dark .subtitle {
  font-weight: 700 !important;
}

@media (max-width: 767px) {
  #page-header .text {
    display: none;
  }
}

@media (max-width: 1200px) {
  #page-header .text p {
    font-size: 1.55rem;
  }
}

@media (max-width: 1023px) {
  #page-header .text p {
    font-size: 1.5rem;
    line-height: 1.9rem;
  }
}

#page-header #header-promo-video {
  padding: 1px 0;
  float: right;
}

@media (max-width: 1023px) {
  #page-header #header-promo-video {
    padding: 51px 0;
  }
}

@media (max-width: 767px) {
  #page-header #header-promo-video {
    padding: 0;
    float: none;
  }
}

#page-header #header-promo-video a {
  text-indent: -999px;
  width: 660px;
  height: 387px;
  margin-top: 200px;
  padding: 0;
  border: 1px solid #fff;
  outline: 0;
  display: block;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 0 0 30px #000;
  -moz-box-shadow: 0 0 30px #000;
  box-shadow: 0 0 30px #000;
}

@media (max-width: 1919px) {
  #page-header #header-promo-video a {
    width: 477px;
    height: 280px;
    margin-top: 90px;
  }
}

@media (max-width: 1023px) {
  #page-header #header-promo-video a {
    width: 363px;
    height: 213px;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  #page-header #header-promo-video a {
    width: 281px;
    height: 164px;
    margin: -90px auto 0;
  }
}

#page-header #header-promo-video a span.icon-video {
  width: 109px;
  height: 111px;
  background: url(../img/interface/video-play-button.png) 0 0 no-repeat;
  position: absolute;
  top: 37%;
  left: 40%;
}

@media (max-width: 1919px) {
  #page-header #header-promo-video a span.icon-video {
    background-size: 80px auto !important;
  }
}

@media (max-width: 1919px) {
  #page-header #header-promo-video a span.icon-video {
    background-size: 70px auto !important;
  }
}

@media (max-width: 767px) {
  #page-header #header-promo-video a span.icon-video {
    background-size: 50px auto !important;
  }
}


/* !-- Promo Boxes -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.promo-product {
  position: relative;
  overflow: hidden;
}

/*
.promo-product:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; opacity: 0;
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,.8) inset; -webkit-transition: opacity .25s ease-in-out;
	   -moz-box-shadow: 0 0 15px rgba(0,0,0,.8) inset;    -moz-transition: opacity .25s ease-in-out;
		-ms-box-shadow: 0 0 15px rgba(0,0,0,.8) inset;     -ms-transition: opacity .25s ease-in-out;
		 -o-box-shadow: 0 0 15px rgba(0,0,0,.8) inset;      -o-transition: opacity .25s ease-in-out;
			box-shadow: 0 0 15px rgba(0,0,0,.8) inset;         transition: opacity .25s ease-in-out;
}
.promo-product:hover:before { opacity: 1; } */
@media (max-width: 767px) {
  .promo-product:hover::before {
    opacity: 0;
  }
}

.product_catalog.hub_catalog .promo-product,
.promo-product img {
  height: 300px;
}

@media (max-width: 767px) {
  .promo-product,
  .promo-product img {
    height: 300px;
  }

  .product_catalog.hub_catalog .promo-product,
  .promo-product img {
    height: 200px;
  }
}

.promo-box .video {
  display: block;
  width: 1200px;
  height: auto;
  margin: 0 auto 0;
  position: relative;
}

@media (max-width: 1919px) {
  .promo-box .video {
    width: 100%;
  }
}

@media (max-width: 1023px) {
  .promo-box .video {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .promo-box .video {
    width: 100%;
  }
}

.promo-box .video img {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1023px) {
  .promo-box .video img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 479px) {
  .promo-box .video img {
    width: 100%;
    height: 100%;
  }
}

#play-video-button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#play-video-button a {
  text-indent: -999px;
  padding: 0;
  background: url(../img/interface/video-play-button.png) 50% 50% no-repeat;
  background-size: 109px auto !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@media (max-width: 1023px) {
  #play-video-button a {
    background-size: 90px auto !important;
    background-position: 50% 62%;
  }
}

@media (max-width: 767px) {
  #play-video-button a {
    background-size: 70px auto !important;
  }
}

@media (max-width: 479px) {
  #play-video-button a {
    background-size: 55px auto !important;
  }
}

.promo-box .video .content {
  left: 50px;
  top: 70%;
  padding-left: 50px;
}

@media (max-width: 1023px) {
  .promo-box .video .content {
    top: 65%;
  }
}

@media (max-width: 767px) {
  .promo-box .video .content {
    font-size: 2.6rem;
    top: 58%;
    padding: 0 4px;
    left: 5%;
    float: none;
  }
}

@media (max-width: 479px) {
  .promo-box .video .content {
    font-size: 1.4rem;
    height: 1.6rem;
  }
}

.promo-box .video .content h2 {
  font-size: 3rem;
  line-height: 3.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0;
  text-transform: uppercase;
  display: table;
}

@media (max-width: 1023px) {
  .promo-box .video .content h2 {
    font-size: 2.8rem;
    padding: 2px 0;
  }
}

@media (max-width: 767px) {
  .promo-box .video .content h2 {
    font-size: 2.4rem;
  }
}

@media (max-width: 479px) {
  .promo-box .video .content h2 {
    font-size: 2rem;
    padding: 0;
    line-height: 2rem;
  }
}

.promo-box .video .content h2 span {
  -webkit-box-shadow: 6px 0 0 #140c0a, -6px 0 0 #140c0a;
  -moz-box-shadow: 6px 0 0 #140c0a, -6px 0 0 #140c0a;
  box-shadow: 6px 0 0 #140c0a, -6px 0 0 #140c0a;
}

.promo-box .video .content h2 span {
  background-color: #140c0a;
  padding: 4px 6px;
}

.promo-box .video .content p {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3rem;
  color: #fff;
  text-transform: uppercase;
  background-color: #140c0a;
  display: table;
  margin-bottom: 0;
  padding: 0 2px;
  -webkit-box-shadow: 6px 0 0 #140c0a, -6px 0 0 #140c0a;
  -moz-box-shadow: 6px 0 0 #140c0a, -6px 0 0 #140c0a;
  box-shadow: 6px 0 0 #140c0a, -6px 0 0 #140c0a;
}

@media (max-width: 767px) {
  .promo-box .video .content p {
    font-size: 2.4rem;
    padding: 2px 6px;
  }
}

@media (max-width: 479px) {
  .promo-box .video .content p {
    font-size: 1.6rem;
    line-height: 2rem;
  }
}

.promo-box .product {
  display: block;
  width: 1200px;
  height: auto;
  margin: 0 auto 40px;
  position: relative;
}

@media (max-width: 1919px) {
  .promo-box .product {
    width: 100%;
    padding: 0 0;
  }
}

@media (max-width: 1023px) {
  .promo-box .product {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .promo-box .product {
    width: 100%;
    padding: 0;
  }
}

@media (max-width: 1919px) {
  .hub .promo-box .product {
    width: auto;
    padding: 0 18px;
  }
}

@media (max-width: 1023px) {
  .hub .promo-box .product {
    width: auto;
  }
}

@media (max-width: 767px) {
  .hub .promo-box .product {
    width: 100%;
    padding: 0;
  }
}

.promo-box .product img {
  display: block;
  width: 100%;
  height: auto;
  cursor: default;
}

@media (max-width: 1200px) {
  .product_catalog.hub_catalog .promo-box .product img {
    width: 1200px;
    margin: 0 0 0 -600px;
    position: absolute;
    left: 50%;
  }

  .box-carousel .product_catalog.hub_catalog .promo-box .product img {
    position: relative;
  }
}

@media (max-width: 767px) {
  .promo-box .product img {
    width: 800px;
    margin: 0;
    position: absolute;
    left: auto;
    right: 0%;
  }

  .promo-box .product.right img {
    left: 0;
    right: auto;
  }

  .product_catalog.hub_catalog .promo-box .product img {
    width: 800px;
    left: 0;
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .promo-box .product img {
    left: auto;
  }

  .promo-box .product.right img {
    right: auto;
  }

  .product_catalog.hub_catalog .promo-box .product img {
    left: 0;
  }
}

@media (max-width: 479px) {
  .promo-product {
    position: relative;
  }

  .product_catalog.hub_catalog .promo-box .product img {
    left: 0;
  }
}

.promo-box .content {
  position: absolute;
  left: 58.333333333333%;
  top: 47%;
  font-size: 1.6rem;
}

.promo-box .product .content {
  position: absolute;
  top: 20%;
  left: 70px;
  right: 50%;
  height: auto;
  width: auto;
  cursor: default;
}

.promo-box .product .header + .promo-product + .content {
  top: 35%;
}

.promo-box .product.media .content,
.promo-box .product.media .header + .promo-product + .content {
  top: auto;
  bottom: 10%;
  right: auto;
}

@media (max-width: 1023px) {
  .promo-box .product .header + .promo-product + .content {
    top: 30%;
  }

  .promo-box .product .content {
    top: 14%;
  }
}

@media (max-width: 900px) {
  .promo-box .product .content {
    top: 6%;
  }
}

@media (max-width: 767px) {
  .promo-box .product .content {
    width: auto;
    top: auto;
    bottom: 32px;
    left: 0;
    right: 0;
    padding: 10px 40px 0 20px;
    font-size: 80%;
    background-color: rgba(0, 0, 0, 0.7);
    float: none;
    cursor: pointer;
    z-index: 2;
    -webkit-transition: background-color 0.25s ease-in-out;
    -moz-transition: background-color 0.25s ease-in-out;
    -ms-transition: background-color 0.25s ease-in-out;
    -o-transition: background-color 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out;
  }

  /* 	.promo-box .product .content:hover, .promo-box .product .content:focus { background: rgba(120,5,5,.9); cursor:pointer; } */
  .promo-box .product .header + .promo-product + .content {
    top: auto;
  }

  .promo-box .product .slide .content {
    bottom: 50px !important;
  }

  .promo-box .games .product .content::after {
    content: url(../img/interface/learn-more-button-icon-home.png);
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -12.5px;
  }

  .promo-box .product .content.no-link {
    background-color: rgba(0, 0, 0, 0.7) !important;
    cursor: default;
  }

  .promo-box .product .content.no-link::after {
    display: none;
  }

  .promo-box .product.media .content {
    right: 0;
  }
}

@media (max-width: 479px) {
  .promo-box .product .content {
    padding-left: 20px;
    padding-bottom: 0;
    padding-right: 45px;
  }
}

.promo-box .product.right .content {
  left: 50%;
  right: 70px;
  width: auto;
}

.promo-box .product.right.with-stores-buttons .content {
  left: 47%;
  right: 15px;
}

@media (max-width: 767px) {
  .promo-box .product.right .content,
  .promo-box .product.right.with-stores-buttons .content {
    top: auto;
    left: 0;
    right: 0;
  }
}

.product_catalog.hub_catalog .promo-box .product .content {
  top: 12%;
}

@media (max-width: 767px) {
  .product_catalog.hub_catalog .promo-box .product .content {
    top: auto;
    bottom: 0;
  }
}

.promo-box .product .content h2 {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  cursor: default;
}

.promo-box .product .content h2 span {
  -webkit-box-shadow: 6px 0 0 rgba(20, 12, 10, 0.7), -6px 0 0 rgba(20, 12, 10, 0.7);
  -moz-box-shadow: 6px 0 0 rgba(20, 12, 10, 0.7), -6px 0 0 rgba(20, 12, 10, 0.7);
  box-shadow: 6px 0 0 rgba(20, 12, 10, 0.7), -6px 0 0 rgba(20, 12, 10, 0.7);
}

@media (max-width: 1023px) {
  .promo-box .product .content h2 {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .promo-box .product .content h2 {
    line-height: 2rem;
  }
}

.promo-box .product .content h2 span {
  background-color: rgba(20, 12, 10, 0.7);
  padding: 0 2px;
  text-transform: uppercase;
  line-height: 4.1rem;
  color: #fff;
}

@media (max-width: 1023px) {
  .promo-box .product .content h2 span {
    font-size: 2.6rem;
    line-height: 4rem;
    padding: 2px 0;
  }
}

@media (max-width: 767px) {
  .promo-box .product .content h2 span {
    line-height: 2.4rem;
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

@media (max-width: 479px) {
  .promo-box .product .content h2 span {
    font-size: 2rem;
    line-height: 2rem;
    padding: 0;
    background: none;
  }
}

.promo-box .product .content h2 span.first-line {
  font-size: 2.5rem;
  line-height: 3.1rem;
  color: #959595;
  display: table;
}

@media (max-width: 1023px) {
  .promo-box .product .content h2 span.first-line {
    font-size: 2rem;
    line-height: 2.1rem;
    color: #959595;
    display: table;
  }
}

@media (max-width: 767px) {
  .promo-box .product .content h2 span.first-line {
    font-size: 1.5rem;
    line-height: 1.52rem;
    color: #959595;
    display: table;
  }
}

@media (max-width: 767px) {
  /* 	.promo-box .product .content .cta-button { font-size: 1.4rem; font-weight: 400; color: #959595 !important; padding: 0 0 10px; } */
}

@media (max-width: 767px) {
  /* 	.promo-box .product .content .cta-button:before { background-image: none !important; } */
}

.promo-box .product .content p {
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.product_catalog.hub_catalog .promo-box .product .content p {
  font-size: 1.6rem;
  line-height: 2rem; /* color: #333; */
}

@media (max-width: 1023px) {
  .product_catalog.hub_catalog .promo-box .product .content p {
    font-size: 1.5rem;
    line-height: 1.9rem;
  }
}

@media (max-width: 1200px) {
  .product_catalog .promo-box .product .content p {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}

@media (max-width: 767px) {
  .promo-box .product .content p {
    padding: 2px 0;
    margin: 2px;
  }
}

@media (max-width: 1023px) {
  .promo-box .product .content .text p {
    margin: 15px 0;
  }
}

@media (max-width: 767px) {
  .promo-box .product .content .text p {
    display: none;
  }
}

#page-header .logo {
  width: 439px;
  height: 100%;
  position: absolute;
  right: 50%;
  top: 0;
  margin-right: -580px;
  background-position: 50% 50%;
  background-size: auto auto;
  background-repeat: no-repeat;
}

@media (max-width: 1023px) {
  #page-header .logo {
    width: 30%;
    height: auto;
    right: 70%;
  }
}

@media (max-width: 767px) {
  #page-header .logo {
    display: none;
  }
}

/* .promo-box .product .content span.first-line.below { font-size:2rem; line-height:3rem; } */
@media (max-width: 1023px) {
  .promo-box .product .content span.first-line.below {
    line-height: 2rem;
  }
}

.promo-box .product .content p.release-date {
  font-style: italic;
  font-weight: 600;
  margin: 0 0 0;
}

.promo-box .legends .visual {
  width: 797px;
  height: 526px;
  background: url(../img/home/promos/legends-visual.png) 0 100% no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: -10px;
  bottom: 0;
  -webkit-transition-property: width, height;
  -webkit-transition-duration: 0.25s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-property: width, height;
  -moz-transition-duration: 0.25s;
  -moz-transition-timing-function: ease-in-out;
  transition-property: width, height;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}

.promo-box .box {
  margin: 0 auto 40px;
  position: relative;
  overflow: hidden;
}

.promo-box .product.box {
  margin: 0 auto 20px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .promo-box .product.box {
    margin-bottom: 40px;
  }
}

@media (max-width: 1023px) {
  .promo-box .product.box {
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .promo-box .box {
    margin-bottom: 10px;
  }
}

/* ---------------- Promo-box Other product -------------------------- */
.promo-box .box.other {
  margin-top: -39px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.promo-box .box.other .content {
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 225px auto !important;
  min-height: 300px;
  top: 18%;
  left: 50px;
  width: 48%;
}

@media (max-width: 1200px) {
  .promo-box .box.other .content {
    background-image: none !important;
  }
}

.promo-box .box.other .content .text {
  width: 320px;
}

.promo-box .box.other .cta-button,
.promo-box .box.other .cta-button::before {
  background-color: #fff;
  color: #000 !important;
  text-shadow: none;
}

.promo-box .box.other .content h2 span {
  text-shadow: 0 0 5px #000;
}

.promo-box .box.other .content h2 span {
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

.promo-box .box.other .cta-button::before {
  background-image: url("../img/interface/icon-download-for.png");
}

.promo-box .box.other .cta-button:hover,
.promo-box .box.other .cta-button:focus,
.promo-box .box.other .cta-button:hover::before,
.promo-box .box.other .cta-button:focus::before {
  background-color: #000 !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  color: #fff !important;
}

.promo-box .box.other .cta-button:hover::before {
  background-image: url("../img/interface/learn-more-button-icon.png");
}

@media (max-width: 1023px) {
  .promo-box .box.other .content {
    background-image: none;
  }

  .promo-box .box.other .content .text {
    width: auto;
  }
}

@media (max-width: 767px) {
  .promo-box .box.other {
    border: 0 none;
  }

  .promo-box .box.other .cta-button {
    color: #959595 !important;
  }

  .promo-box .box.other .content {
    background-color: rgba(0, 0, 0, 0.7);
    top: auto;
    left: 0;
    right: 0;
    width: auto;
    min-height: inherit;
  }
}

.promo-box .header,
.books .header {
  text-transform: uppercase;
  margin: 0 0 15px 0;
  position: relative;
}

@media (max-width: 1200px) {
  .promo-box .header,
  .books .header {
    margin: 18px 18px 10px 18px;
  }
}

.promo-box .header h3,
.books .header h3 {
  font-weight: 600;
  font-size: 3.4rem;
  line-height: 2.6rem;
  display: inline-block;
  margin: 0;
  padding: 0;
}

@media (max-width: 860px) {
  .promo-box .header h3,
  .books .header h3 {
    max-width: 500px;
    line-height: 3rem;
  }
}

@media (max-width: 767px) {
  .promo-box .header h3,
  .books .header h3 {
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 2.4rem;
  }
}



/* Promo Carousel */
.boxCarousel-nav .arrow {
  width: 25px;
  height: 50px;
  display: block;
  overflow: hidden;
  position: absolute;
  top: 55%;
  background: url(../img/interface/boxCarousel-nav-arrow.png) 0 0 no-repeat;
  z-index: 99;
  background-size: 50px auto !important;
  cursor: pointer;
  z-index: 99;
}

.boxCarousel-nav .previous {
  left: 20px;
}

.boxCarousel-nav .next {
  right: 20px;
  background-position: 100% 0;
}

.boxCarousel-nav .pagination {
  width: 100%;
  margin: -10px 0 0;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  background: none;
  position: absolute;
  z-index: 99;
}

.boxCarousel-nav .pagination a {
  width: 12px;
  height: 12px;
  margin: 0 3px;
  display: inline-block;
  border: 2px solid #fff;
  -webkit-border-radius: 20px;
  -webkit-transition: background 0.25s ease-in-out;
  -moz-border-radius: 20px;
  -webkit-transition: background 0.25s ease-in-out;
  border-radius: 20px;
  -webkit-transition: background 0.25s ease-in-out;
}

.boxCarousel-nav .pagination a.selected {
  background: #fff;
}

.boxCarousel-nav .pagination span {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.promo-box .box .slide {
  float: left;
  position: relative !important;
}

@media (max-width: 767px) {
  .boxCarousel-nav {
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7) !important;
    position: absolute;
    z-index: 99;
  }

  .boxCarousel-nav .arrow {
    width: 17px;
    height: 26px;
    position: absolute;
    top: 12px;
    background-size: 200% 26px !important;
    z-index: 99;
  }

  .boxCarousel-nav .previous {
    left: 10px;
  }

  .boxCarousel-nav .next {
    right: 10px;
  }

  .boxCarousel-nav .pagination {
    z-index: 98;
  }

  .box-carousel .slide .content .cta-button {
    padding-bottom: 0;
  }

  .box-carousel .slide .promo-product,
  .box-carousel .slide .promo-product img {
    height: 300px;
  }

  .box-carousel .slide .product img {
    width: 900px;
  }

  .product.media .box-carousel .slide .promo-product,
  .product.media .box-carousel .slide .promo-product img {
    height: 400px;
  }
}


/* page Product Info */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.product.hub #page-container {
  background-image: url(../img/product-info/bg-product-info.png);
}

/* page Dungeons-and-dragons */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.new-to-dd.hub #page-container {
  background-image: url(../img/new-to-dd/bg-new-to-dd.png);
}

.new-to-dd_story .wrap-carousel {
  max-width: 1360px;
  margin: 0 auto 65px;
  position: relative;
}

@media (max-width: 1919px) {
  .new-to-dd_story .wrap-carousel {
    margin: 0 auto 65px;
  }
}

@media (max-width: 1023px) {
  .new-to-dd_story .wrap-carousel {
    margin: 0 auto 65px;
  }
}

@media (max-width: 767px) {
  .new-to-dd_story .wrap-carousel {
    margin: 0 auto 5px;
  }
}

/* page Play - Events */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.play-events.hub #page-container {
  background-image: url(../img/play-events/bg-play-events.png);
}

/* page Play/Events - Podcasts */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.play-events_podcasts-livestream .main-content.podcasts {
  background: black;
}

.play-events_podcasts-livestream .main-content.livestream-games {
  padding: 0;
}

.play-events_podcasts-livestream .promo-box .box {
  margin: 0 auto 0;
}

.play-events_podcasts-livestream .podcasts .one-third {
  width: 34%;
  padding: 0;
  margin: 0;
  float: left;
  color: #fff;
}

.play-events_podcasts-livestream .one-third {
  width: 34%;
  padding: 0;
  margin: 0;
  float: left;
}

@media (max-width: 1023px) {
  .play-events_podcasts-livestream .podcasts .one-third,
  .play-events_podcasts-livestream .livestream-games .one-third {
    width: 100%;
    float: none;
  }

  .play-events_podcasts-livestream .main-content.livestream-games {
    float: none;
  }
}

@media (max-width: 767px) {
  .play-events_podcasts-livestream #page-header .intro {
    width: 100%;
  }

  .play-events_podcasts-livestream .main-content.livestream-games {
    margin-bottom: 0;
  }
}

.play-events_podcasts-livestream .podcasts .one-third .content a {
  color: #fff;
}

.play-events_podcasts-livestream .podcasts .one-third .content a:hover {
  color: #fff !important;
}

.play-events_podcasts-livestream .podcasts .one-third .content .text a {
  color: #df0000 !important;
  font-weight: 600;
  text-decoration: none;
}

.play-events_podcasts-livestream .podcasts .one-third .content .text a:hover {
  text-decoration: underline;
}

.play-events_podcasts-livestream .podcasts .one-third .content .ark-audio-player .ark-audio-player--controller--progress .ark-audio-player--controller--progress--bar--fill {
  background: #df0000 !important;
}

.play-events_podcasts-livestream .podcasts .one-third .content {
  padding: 28px 18px 0;
}

.play-events_podcasts-livestream .livestream-games .one-third .content {
  padding: 0 34px 0 0;
}

@media (max-width: 1200px) {
  .play-events_podcasts-livestream .livestream-games .one-third .content {
    padding-left: 18px;
  }
}

@media (max-width: 1023px) {
  .play-events_podcasts-livestream .livestream-games .one-third .content {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .play-events_podcasts-livestream .livestream-games .one-third .content {
    padding: 0 18px 20px;
  }

  .play-events_podcasts-livestream .podcasts .one-third .content .text p {
    font-size: 1.4rem;
  }
}

.play-events_podcasts-livestream .one-third .content h3 {
  font-size: 2.4rem;
  line-height: 2.4rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}

.play-events_podcasts-livestream .livestream-games .one-third .content h3 {
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0;
}

.play-events_podcasts-livestream .one-third .content h4 {
  font-size: 1.2rem;
  line-height: 2rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 2px;
}

.play-events_podcasts-livestream .livestream-games .one-third .content h4 {
  font-size: 1.4rem;
  line-height: 2rem;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 20px;
}

.play-events_podcasts-livestream .one-third .content p.author {
  font-size: 1.2rem;
  font-style: italic;
  margin: 0;
}

.play-events_podcasts-livestream .one-third .content p.category {
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: 0;
}

.play-events_podcasts-livestream .two-thirds {
  width: 66%;
  float: right;
}

@media (max-width: 1023px) {
  .play-events_podcasts-livestream .two-thirds {
    width: 100%;
    float: none;
  }
}

.play-events_podcasts-livestream .two-thirds figure {
  margin: 0;
}

.play-events_podcasts-livestream .two-thirds figure.video img {
  display: block;
  width: 100%;
  height: 100%;
}

.play-events_podcasts-livestream .podcasts .one-third .content .cta-button {
  background-color: #fff;
  color: #000 !important;
  margin-right: 20px;
  height: 30px;
  box-sizing: border-box;
  padding: 0.3em 10px;
}

.play-events_podcasts-livestream .podcasts .one-third .content .cta-button::before {
  background-image: url(../img/interface/icon-download-for.png);
  background-color: #fff;
  height: 30px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.play-events_podcasts-livestream .podcasts .one-third .content .cta-button:hover::before {
  background-image: url(../img/interface/learn-more-button-icon.png);
}

.play-events_podcasts-livestream .podcasts.audio-playing .one-third .content .cta-button.audio-listen::before {
  background-image: url(../img/interface/learn-more-button-icon.png);
  background-color: #df0000;
}

.play-events_podcasts-livestream .podcasts.audio-playing .one-third .content .cta-button.audio-listen {
  color: #fff !important;
}

/* .play-events_podcasts-livestream .podcasts .one-third .download-for p { display: block; width: 135px; float: left;} */
.play-events_podcasts-livestream .article-preview .download-for p {
  display: block;
  width: 125px;
  float: left;
}

.play-events_podcasts-livestream .article-preview h5 {
  font-size: 1.4rem;
  line-height: 2rem;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 20px;
}

.play-events_podcasts-livestream .article-list {
  margin-bottom: 40px;
}

@media (max-width: 1023px) {
  .play-events_podcasts-livestream .article-list {
    margin-bottom: 10px;
  }
}

.play-events_podcasts-livestream figure a {
  position: relative;
  display: block;
}

.play-events_podcasts-livestream .podcasts figure.video a::after {
  display: none;
}

@media (max-width: 767px) {
  .play-events_podcasts-livestream .podcasts figure.video a::after {
    width: 104px;
    height: 104px;
    margin: -52px 0 0 -52px;
  }
}

.play-events_podcasts-livestream .article-preview a.with-micro.image::after {
  display: none;
}

.play-events_podcasts-livestream .article-preview a.with-micro.image:hover::after {
  background-position: 0 bottom;
}

@media (max-width: 767px) {
  .play-events_podcasts-livestream .article-preview a.with-micro::after {
    width: 104px;
    height: 104px;
  }
}

@media (max-width: 479px) {
  .play-events_podcasts-livestream .article-preview a.with-micro::after {
    width: 63px;
    height: 64px;
    margin-top: -150px;
  }
}

.play-events_podcasts-livestream .podcasts.audio-playing figure.video a::after,
.play-events_podcasts-livestream .article-preview.audio-playing a.with-micro.image::after {
  background-position: 100% 0;
}

.play-events_podcasts-livestream .podcasts.audio-playing figure.video a:hover::after,
.play-events_podcasts-livestream .article-preview.audio-playing a.with-micro.image:hover::after {
  background-position: 100% 100%;
}

.play-events_podcasts-livestream .main-content .one-third .content img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

@media (max-width: 1023px) {
  .play-events_podcasts-livestream .main-content .one-third .content img {
    width: auto;
    float: left;
    margin-right: 18px;
  }
}

@media (max-width: 767px) {
  .play-events_podcasts-livestream .main-content .one-third .content img {
    width: 100%;
  }
}


/* !-- Form-red -- */

#wrapper-form {
  display: block;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 1200px) {
  #wrapper-form {
    width: 100%;
    z-index: 100;
  }
}

@media (max-width: 767px) {
  #wrapper-form {
    top: 306px;
    height: auto;
  }
}

.form-red {
  width: 330px;
  height: 240px;
  position: absolute;
  top: auto;
  right: 50%;
  margin-right: -600px;
  bottom: 60px;
  color: #fff;
  font-size: 1.2rem;
  background-size: 182px 198px !important;
  background: url(../img/interface/pattern.png) 100% 0 no-repeat;
  background-color: rgba(157, 10, 14, 0.857);
  z-index: 100;
}

@media (min-width: 1900px) {
  .form-red {
    top: -400px;
  }
}

@media (min-width: 2200px) {
  .form-red {
    top: -500px;
  }
}

@media (min-width: 2500px) {
  .form-red {
    top: -600px;
  }
}

@media (min-width: 2800px) {
  .form-red {
    top: -600px;
  }
}

@media (max-width: 1200px) {
  .form-red {
    right: 20px;
    bottom: 35px;
    margin-right: 0;
  }
}

@media (max-width: 1023px) {
  .form-red {
    top: 20px;
    bottom: 0;
  }
}

@media (max-width: 767px) {
  .form-red {
    display: block;
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: 230px;
  }
}

@media (max-width: 490px) {
  .form-red {  }
}

.form-red .column.zip-code {
  margin-right: 35px;
  width: 280px !important;
  top: 25px;
}

.form-red .locator {
  background: url(../img/interface/YourMagic-logo.png) center center no-repeat;
  background-size: auto 60px !important;
  position: absolute;
  left: 18px;
  top: 24px;
  width: 51px;
  height: 60px;
  float: left;
}

.form-red h5 {
  text-transform: uppercase;
  font-size: 2.2rem;
  line-height: 2.4rem;
  font-weight: 700;
  float: left;
  margin: 30px 50px 0 86px;
}

@media (max-width: 767px) {
  .form-red h5 {
    margin: 0 0 0 56px;
    padding: 30px 87px 0 30px;
  }
}

@media (max-width: 479px) {
  .form-red h5 {
    padding: 30px 0 0 20px;
  }
}

.form-red .column {
  width: 280px;
  display: block;
  position: relative;
  top: 22px;
  left: 28px;
}

.form-red .column.country {
  display: none;
}

@media (max-width: 767px) {
  .form-red.inbox .column {
    width: auto !important;
    margin: 15px 18px 0;
    float: none;
    top: 0;
    left: 0;
  }

  .form-red.inbox .column.actions {
    width: 90%;
    margin: 0 auto;
    padding: 0 18px;
    top: 0;
    display: block;
  }
}

@media (max-width: 490px) {
  .form-red.inbox .column {
    margin: 15px 18px 0;
    width: auto !important;
    float: none;
  }
}

@media (max-width: 767px) {
  .form-red .title-with-image {
    min-height: 80px;
    position: relative;
    width: 100%;
    display: block;
  }

  .form-red .column {
    width: 265px;
    top: 33px;
  }
}

.form-red .column.actions .action-button {
  background: #000;
}

.form-red .column.actions .action-button:hover,
.form-red .column.actions .action-button:focus {
  background: #333;
}

.form-red label {
  font-weight: 700;
  text-transform: uppercase;
}

.form-red label[for=where-to-buy-country] {
  display: none;
}

.form-red .select-wrapper,
.form-red input {
  border: 0;
  outline: none;
  background: 100% 50% no-repeat #d2d2d2;
  -webkit-box-shadow: 0 0 3px #000 inset;
  -moz-box-shadow: 0 0 3px #000 inset;
  -ms-box-shadow: 0 0 3px #000 inset;
  -o-box-shadow: 0 0 3px #000 inset;
  box-shadow: 0 0 3px #000 inset;
}

.form-red .select-wrapper {
  background-image: url(../img/interface/drop-down-arrow-dark.png);
  background-size: auto !important;
  display: block;
  overflow: hidden;
}

.form-red .select-wrapper select {
  padding: 5px 25px 5px 10px;
  width: 116%;
  border: 0;
  outline: 0;
  background: none;
  -webkit-appearance: none;
}

.form-red input,
.form-red .select-wrapper select {
  color: #333;
  font: inherit;
  font-weight: 700;
  margin: 0;
  padding-right: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.form-red input,
.form-red button {
  width: 100%;
  display: block;
}

.form-red input.where-to-buy-zipcode {
  padding: 6px 0 6px 12px;
}

.form-red .select-wrapper select {
  width: 112%;
  display: block;
}

.form-red button {
  padding: 8px;
  margin: 21px 0 0 0;
}

@media (max-width: 490px) {
  .form-red input,
  .form-red button {
    width: 100%;
  }
}

/**  ---------------------------------------- */

/* --------------- Form-red in aside -------------------- */

#form-latest-campaign {
  background: url(../img/interface/latest-campaign.jpg) no-repeat top center #9d0a0e;
  background-size: 100% auto !important;
  position: relative;
  height: 630px;
  margin-bottom: 20px;
}

aside .form-red {
  top: auto;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  background-color: transparent;
}

aside .form-red h5 {
  margin: 30px 10px 20px 78px;
}

aside .form-red .locator {
  left: 20px;
}

aside .form-red .column {
  display: inline-block;
  top: auto;
  left: auto;
  margin: 0 20px 0 20px;
  max-width: 87%;
  width: 100%;
}

aside .form-red .column.zip-code {
  top: auto;
  margin-right: inherit;
  margin-top: 0;
}

@media (max-width: 1023px) {
  #form-latest-campaign {
    background-image: none;
    height: 240px;
  }

  aside .form-red .title-with-image {
    min-height: 80px;
    position: relative;
    margin-bottom: 15px;
    width: 100%;
    display: block;
  }

  aside .form-red .column {
    max-width: 92%;
  }
}

@media (max-width: 767px) {
  aside .form-red h5 {
    padding: 0;
  }
}

@media (max-width: 767px) {
  aside .form-red .column {
    max-width: 90%;
  }
}


/**  ---------------------------------------- */

/* ---------- View Modes & Narrow and Sort by --------------- */

#view-modes {
  float: right;
}

@media (max-width: 767px) {
  #view-modes {
    display: none;
  }
}

#sort-by {
  display: block;
  margin-bottom: 40px;
  padding: 20px 0;
  border-top: 1px solid #cdcbcb;
  border-bottom: 1px solid #cdcbcb;
  position: relative;
}

.product_catalog #sort-by {
  margin-bottom: 30px;
  margin-top: -80px;
  border-top: 0 none;
}

.product_media-resources #sort-by,
.product_catalog .product-type #sort-by {
  margin-bottom: 30px;
  margin-top: -80px;
  border-top: 0 none;
}

.product_catalog .product-type #sort-by {
  margin-bottom: 10px;
}

.play-events_podcasts-livestream #sort-by {
  margin-bottom: 30px;
  margin-top: -80px;
  border-top: 0 none;
}

#narrow {
  float: left;
}

.product_media-resources #narrow {
  margin-left: 400px;
}

.product_catalog .product-type #narrow {
  margin-left: 47%;
}

#sort {
  float: right;
}

@media (max-width: 1200px) {
  #sort-by {
    padding: 20px 18px 20px 10px;
  }

  .product_media-resources #sort-by {
    margin-bottom: 30px;
    margin-top: 0;
    border-top: 1px solid #cdcbcb;
  }

  .product_media-resources #narrow {
    margin-left: 0;
  }

  .product_catalog .product-type #sort-by {
    margin-bottom: 30px;
  }
}

@media (max-width: 1135px) {
  .product_catalog .product-type #narrow {
    margin-left: 44%;
  }
}

@media (max-width: 1085px) {
  .product_catalog .product-type #narrow {
    margin-left: 41%;
  }
}

@media (max-width: 1024px) {
  .product_catalog .product-type #sort-by {
    margin-bottom: 10px;
    margin-top: 0;
    border-top: 1px solid #cdcbcb;
  }

  .product_catalog .product-type #narrow {
    margin-left: 0;
  }

  #sort-by {
    padding: 20px 0 20px 0;
    margin: 0 18px 20px 18px;
    clear: both;
  }

  .product_catalog #sort-by {
    clear: none;
    margin-top: -80px;
  }

  .play-events_podcasts-livestream #sort-by {
    clear: none;
    margin-top: -80px;
  }
}

@media (max-width: 850px) {
  #narrow {
    float: none;
  }

  #sort {
    float: left;
    margin-top: 10px;
  }

  .product_catalog #sort {
    margin-top: 0;
    float: right;
  }

  .play-events_podcasts-livestream #sort {
    margin-top: 0;
  }

  .product_catalog .product-type #narrow {
    float: left;
  }

  .product_catalog .product-type #sort {
    float: right;
  }
}

@media (max-width: 767px) {
  .product_catalog #sort {
    margin-top: 10px;
    float: right;
  }

  .product_catalog .product-type #sort {
    margin-top: 0;
  }

  .play-events_podcasts-livestream #sort {
    margin-top: -33px;
    float: right;
  }
}

@media (max-width: 670px) {
  .product_catalog .product-type #sort {
    float: left;
    margin-top: 10px;
  }

  .product_catalog .product-type #narrow {
    float: none;
  }
}

@media (max-width: 600px) {
  .product_catalog #sort {
    margin-top: 0;
    float: left;
  }

  .product_catalog #sort-by {
    margin-top: 0;
  }

  .play-events_podcasts-livestream #sort {
    margin-top: 0;
    float: left;
  }

  .product_catalog #sort-by {
    clear: both;
    border-top: 1px solid #cdcbcb;
  }

  .play-events_podcasts-livestream #sort-by {
    clear: both;
    border-top: 1px solid #cdcbcb;
    margin-top: -10px;
    margin-bottom: 10px;
  }
}

@media (max-width: 479px) {
  #narrow,
  #sort,
  .product_catalog #sort,
  .product_catalog .product-type #sort {
    float: none;
  }

  #sort-by {
    padding-top: 0;
  }

  .play-events_podcasts-livestream #sort {
    padding-top: 20px;
  }

  .product_catalog .product-type #sort-by {
    margin-bottom: 30px;
  }
}

#view-modes::after,
#sort-by::after,
#narrow::after,
#sort::after {
  content: "";
  height: 0;
  display: block;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

#view-modes p,
#narrow p,
#sort p {
  font-weight: 600;
  text-transform: uppercase;
  line-height: 3.4rem;
  display: block;
  float: left;
  margin: 0 10px 0 0;
}

@media (max-width: 479px) {
  #view-modes p,
  #narrow p,
  #sort p {
    float: none;
  }

  .play-events_podcasts-livestream #sort p {
    float: left;
    margin-top: 0;
  }

  #sort p {
    margin-top: 10px;
  }
}

#view-modes p {
  margin-right: 10px;
  margin-top: 10px;
}

#mode-wrapper {
  float: left;
  margin-top: 10px;
}

#mode-wrapper div:hover {
  cursor: pointer;
}

#mode-wrapper #image-mode,
#mode-wrapper #detail-mode {
  display: block;
  height: 36px;
  width: 36px;
  float: left;
  margin-left: 6px;
  background: url("../img/interface/icones-view-mode.png") top right no-repeat transparent;
  background-size: auto auto !important;
}

#mode-wrapper #image-mode.current,
#mode-wrapper #detail-mode.current {
  background-position: top left;
}

#mode-wrapper #image-mode span,
#mode-wrapper #detail-mode span {
  display: block;
  height: 22px;
  width: 22px;
  margin: 6px 7px;
  background: url("../img/interface/icones-view-mode.png") no-repeat transparent;
  background-size: auto auto !important;
}

#mode-wrapper #image-mode span {
  background-position: -43px -34px;
}

#mode-wrapper #image-mode.current span,
#mode-wrapper #image-mode span:hover {
  background-position: -7px -34px;
}

#mode-wrapper #detail-mode span {
  background-position: -43px -55px;
}

#mode-wrapper #detail-mode.current span,
#mode-wrapper #detail-mode span:hover {
  background-position: -7px -55px;
}

#narrow .select-wrapper,
#sort .select-wrapper {
  background: url("../img/interface/drop-down-arrow-searchbar.png") 100% 50% no-repeat #333;
  background-size: auto auto !important;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  float: left;
  overflow: hidden;
  width: 185px;
}

#narrow .select-wrapper {
  width: 295px;
}

.product_catalog #narrow .select-wrapper {
  width: 220px;
}

.product_catalog #sort .select-wrapper {
  width: 170px;
}

#narrow .select-wrapper.second {
  margin-left: 20px;
}

@media (max-width: 767px) {
  #narrow .select-wrapper,
  #sort .select-wrapper {  }

  #narrow .select-wrapper.second {
    margin-left: 20px;
    margin-top: 0;
  }
}

@media (max-width: 479px) {
  #narrow .select-wrapper,
  #sort .select-wrapper,
  .product_catalog .product-type #narrow .select-wrapper,
  .product_catalog .product-type #sort .select-wrapper,
  .product_catalog #sort .select-wrapper {
    width: 100%;
  }

  .play-events_podcasts-livestream #sort .select-wrapper {
    width: 185px;
  }

  #narrow .select-wrapper.second {
    margin-left: 0;
    margin-top: 20px;
  }
}

#narrow .select-wrapper select,
#sort .select-wrapper select {
  -webkit-appearance: none;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: 0 none;
  color: #ccc;
  cursor: pointer;
  display: inline-block;
  font-size: 1.4rem;
  height: 30px;
  margin: 0;
  outline: 0 none;
  padding: 6px 24px 6px 8px;
  text-transform: uppercase;
  width: 235px;
}

#narrow .select-wrapper select {
  width: 345px;
}

.product_catalog #narrow .select-wrapper select {
  width: 270px;
}

.product_catalog #sort .select-wrapper select {
  width: 220px;
}

@media (max-width: 479px) {
  .product_catalog #sort .select-wrapper select,
  .product_catalog #narrow .select-wrapper select,
  #narrow .select-wrapper select,
  #sort .select-wrapper select {
    width: 115%;
  }
}


/* !-- Search Results -- */

#search-zone {
  height: 100px;
  background-color: #9d0a0e;
  width: 100%;
  margin-bottom: 50px;
}

#search-zone .select-wrapper {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

@media (max-width: 1200px) {
  #search-zone .select-wrapper {
    width: 100%;
  }
}

#search-zone .select-wrapper input.search-field {
  display: block;
  float: left;
  height: 58px;
  width: 80%;
  border: 0;
  outline: none;
  background: 100% 50% no-repeat #fff;
  font-size: 4rem;
  line-height: 4.5rem;
  color: #000;
  padding-left: 15px;
  box-sizing: border-box;
  -webkit-box-shadow: 0 0 3px #000 inset;
  -moz-box-shadow: 0 0 3px #000 inset;
  -ms-box-shadow: 0 0 3px #000 inset;
  -o-box-shadow: 0 0 3px #000 inset;
  box-shadow: 0 0 3px #000 inset;
}

@media (max-width: 1200px) {
  #search-zone .select-wrapper input.search-field {
    margin-left: 18px;
    width: 74%;
  }
}

@media (max-width: 700px) {
  #search-zone .select-wrapper input.search-field {
    width: 70%;
  }
}

@media (max-width: 600px) {
  #search-zone .select-wrapper input.search-field {
    width: 60%;
  }
}

#search-zone .select-wrapper .button {
  display: block;
  position: absolute;
  right: 0;
  width: 210px;
}

#search-zone input.form-button {
  text-indent: -9999px;
  display: block;
  float: left;
  background: url("../img/interface/icon-search-big.png") center top no-repeat transparent;
  background-size: auto 200% !important;
  height: 60px;
  width: 60px;
  padding: 0;
  margin: 0 20px;
  border: 0 none;
  cursor: pointer;
  outline: 0;
  overflow: hidden;
}

#search-zone input.reset-form {
  background-position: center top;
}

#search-zone input.form-submit {
  background-position: center bottom;
}

.search-results #page-header {
  height: auto;
}




/* !-- Search Help Box -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media all {
  .search-help-box-wrapper {
    margin: 0 auto;
    padding: 15px 20px;
  }

  .search-help-box {
    padding: 20px 20px 2px 20px;
    border: 1px solid #cdcbcb;
    background: rgba(228, 225, 214, 0.5);
  }

  .search-help-box h3 {
    font-weight: 700;
    font-size: 1.8rem;
  }

  .search-help-box p,
  .search-help-box ul {
    font-size: 1.4rem;
    margin: 0 0 1.5em;
    padding: 0;
  }

  .search-help-box ul {
    margin-left: 1.5em;
  }

  .search-help-box li {
    margin: 0 0 0.5em;
  }

  .search-help-box a {
    text-decoration: underline;
  }

  .search-help-box em {
    font-weight: 700;
  }
}

@media (max-width: 900px) {
  #search-zone {
    height: 80px;
  }

  #search-zone .select-wrapper input.search-field {
    height: 40px;
    font-size: 2.8rem;
    line-height: 3.2rem;
  }

  #search-zone .select-wrapper .button {
    width: 160px;
  }

  #search-zone input.form-button {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 479px) {
  #search-zone {
    height: 50px;
  }

  #search-zone .select-wrapper {
    padding: 10px 0;
  }

  #search-zone .select-wrapper input.search-field {
    height: 30px;
    font-size: 2rem;
    line-height: 2.5rem;
    padding-left: 10px;
  }

  #search-zone .select-wrapper .button {
    width: 100px;
  }

  #search-zone input.form-button {
    height: 30px;
    width: 30px;
    margin: 1px 10px 0;
  }
}




/* !-- Content Grids ( 4 items per row ) -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.content-grid {
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  position: relative;
  font-size: 0;
}

.content-grid,
.content-grid *,
.content-grid *::before,
.content-grid *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.content-grid li,
.content-grid li .item {
  height: 336px;
}

.content-grid li {
  font-size: 1.4rem;
  vertical-align: top;
  width: 25%;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.content-grid .item {
  border: 1px solid #fff;
  position: relative;
  cursor: pointer;
}

.content-grid .item::before {
  content: "";
  width: 36px;
  height: 0;
  margin: 0 0 0 -18px;
  background: url(../img/interface/content-grid-selection@2x.png) 0 0 no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: -23px;
  left: 50%;
  z-index: 30;
}

.content-grid .expanded .item::before {
  height: 23px;
}

.content-grid .item::after {
  height: 100px;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

.content-grid .item .image {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.content-grid .item .image img {
  margin: 0 0 0 -300px;
  padding: 0;
  position: absolute;
  top: 0;
  left: 50%;
}

.content-grid .item h2 {
  color: #fff;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.2em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 10;
}

.content-grid .item h2 span {
  background: rgba(20, 12, 10, 0.7);
  -webkit-box-shadow: -5px 0 0 rgba(20, 12, 10, 0.7), 5px 0 0 rgba(20, 12, 10, 0.7);
  -webkit-transition-property: -webkit-box-shadow, background-color;
  -webkit-transition-duration: 0.25s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-box-shadow: -5px 0 0 rgba(20, 12, 10, 0.7), 5px 0 0 rgba(20, 12, 10, 0.7);
  -moz-transition-property: -moz-box-shadow, background-color;
  -moz-transition-duration: 0.25s;
  -moz-transition-timing-function: ease-in-out;
  -ms-box-shadow: -5px 0 0 rgba(20, 12, 10, 0.7), 5px 0 0 rgba(20, 12, 10, 0.7);
  -ms-transition-property: -ms-box-shadow, background-color;
  -ms-transition-duration: 0.25s;
  -ms-transition-timing-function: ease-in-out;
  box-shadow: -5px 0 0 rgba(20, 12, 10, 0.7), 5px 0 0 rgba(20, 12, 10, 0.7);
  transition-property: box-shadow, background-color;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}

.content-grid .item:hover h2 span {
  color: #9d0a0e;

  /*	background: #9d0a0e;
		-webkit-box-shadow: -5px 0 0 #9d0a0e, 5px 0 0 #9d0a0e;
		   -moz-box-shadow: -5px 0 0 #9d0a0e, 5px 0 0 #9d0a0e;
		   	-ms-box-shadow: -5px 0 0 #9d0a0e, 5px 0 0 #9d0a0e;
		        box-shadow: -5px 0 0 #9d0a0e, 5px 0 0 #9d0a0e;
*/
}

.content-grid .item .item-content .details {
  display: none;
}

.content-grid .expander {
  color: #fff;
  width: 100%;
  height: 0;
  background-position: 100% 50% !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  background: #2a3034;
  position: absolute;
  top: auto;
  left: 0;
  overflow: hidden;
}

.content-grid .expander .nav,
.content-grid .expander .nav .button,
.content-grid .expander .close {
  position: absolute;
  z-index: 10;
}

.content-grid .expander .nav .button,
.content-grid .expander .close {
  background: url(../img/interface/content-grid-controls@2x.png) -100% -100% no-repeat;
  background-size: auto 116px !important;
}

.content-grid .expander .nav {
  top: 50%;
  right: 30px;
  left: 30px;
}

.content-grid .expander .nav .button {
  width: 38px;
  height: 58px;
  margin-top: -29px;
  top: 50%;
  cursor: pointer;
}

.content-grid .expander .nav .previous {
  background-position: 0 0;
  left: 0;
}

.content-grid .expander .nav .previous:hover,
.content-grid .expander .nav .previous:focus,
.content-grid .expander .nav .previous:active {
  background-position: 0 -58px;
}

.content-grid .expander .nav .next {
  background-position: -38px 0;
  right: 0;
}

.content-grid .expander .nav .next:hover,
.content-grid .expander .nav .next:focus,
.content-grid .expander .nav .next:active {
  background-position: -38px -58px;
}

.content-grid .expander .close {
  width: 35px;
  height: 35px;
  background-position: -76px 0;
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
}

.content-grid .expander .close:hover,
.content-grid .expander .close:focus,
.content-grid .expander .active {
  background-position: -76px -35px;
}

.content-grid .expander .social {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 20;
}

.content-grid .expander .social a {
  color: #fff;
  font-style: italic;
  font-size: 1.2rem;
  padding: 5px 10px 5px 30px;
  display: inline-block;
  position: relative;
}

.content-grid .expander .social .facebook {
  background: #3b5998;
}

.content-grid .expander .social .facebook::before {
  content: "";
  width: 10px;
  height: 24px;
  margin-top: -12px;
  background: url(../img/community/icon-fb.png) 50% 0 no-repeat;
  background-size: auto 100% !important;
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: 20;
}

.content-grid .expander h2 {
  font-weight: 600;
  font-size: 3rem;
  line-height: 1em;
  text-transform: uppercase;
  text-shadow: 0 0 5px #000;
}

.content-grid .expander p {
  font-size: 1.4rem;
  line-height: 1.3em;
  text-align: left;
  text-shadow: 1px 1px 2px #000;
}

.content-grid .expander-inner {
  height: 500px;
  padding: 85px 50% 0 100px;
  border: 1px solid #fff;
  position: relative;
  z-index: 5;
}

.content-grid .expander .item-content {
  display: block;
}

/* Large Grids ( 2 items per row ) */
.content-grid.large li,
.content-grid li.large .item {
  height: auto;
}

.content-grid.large li {
  width: 50%;
  height: auto;
}

.content-grid.large li .item .image img {
  width: 100%;
  height: auto;
  margin: 0;
  display: block;
  position: static;
  top: auto;
  left: auto;
}

@media (max-width: 1024px) {
  .content-grid .item h2 span {
    color: #fff !important;
  }

  .content-grid li,
  .content-grid li .item {
    height: auto;
  }

  .content-grid li {
    width: 50%;
    height: auto;
  }

  .content-grid li .item .image img {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    position: static;
    top: auto;
    left: auto;
  }

  .content-grid .expander::after {
    content: "";
    background: #202425;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    opacity: 0.8;
  }

  .content-grid .expander-inner {
    padding-right: 100px;
  }
}

@media (max-width: 767px) {
  .content-grid li {
    width: auto !important;
    display: block !important;
  }

  .content-grid .item {
    border-width: 2px 0 0 0;
    border-right: 0;
  }

  .content-grid .item::before {
    display: none;
  }

  .content-grid .item h2 {
    padding: 20px 50px 20px 20px;
    background: #000;
    background: rgba(0, 0, 0, 0.7);
    left: 0;
    bottom: 0;
    right: 0;
  }

  .content-grid .item h2 span {
    background: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
  }

  .content-grid .item h2::after {
    content: "";
    width: 25px;
    height: 16px;
    margin-top: -8px;
    background: url(../img/interface/expand-collapse-arrows@2x.png) 0 0 no-repeat;
    background-size: 50px 32px !important;
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 11;
  }

  .content-grid .item:hover h2::after,
  .content-grid .item:hover h2:focus {
    background-position: 0 100%;
  }

  .content-grid .expanded .item h2::after {
    background-position: 100% 0;
  }

  .content-grid .expanded .item:hover h2::after,
  .content-grid .expanded .item:focus h2::after {
    background-position: 100% 100%;
  }

  .content-grid .expander {
    background: #202425 !important;
  }

  .content-grid .expander::after,
  .content-grid .expander .close,
  .content-grid .expander .nav,
  .content-grid .expander h2,
  .content-grid .expander .social {
    display: none;
  }

  .content-grid .expander-inner {
    height: auto;
    padding: 20px;
    border: 0;
  }

  .content-grid .expander .description {
    border-bottom: 1px solid #fff;
  }

  .content-grid .expander .actions {
    margin: 0;
    padding: 0 0 30px;
  }

  .content-grid .expander .cta-button,
  .content-grid .expander .cta-button::before {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  .content-grid .expander .cta-button {
    margin: 0 !important;
    padding: 10px 35px 10px 0 !important;
    background: none;
    display: block;
  }

  .content-grid .expander .cta-button::before {
    width: 18px;
    height: 25px;
    margin-top: -12px;
    background: url(../img/interface/learn-more-button-icon-home.png) 0 0 no-repeat;
    top: 50%;
    right: 6px;
    left: auto;
  }

  .content-grid .expander .cta-button:hover,
  .content-grid .expander .cta-button:hover::before {
    background-color: transparent !important;
  }
}

.content-grid .clickthrough .item .item-content {
  position: absolute;
  top: 30px;
  height: 100%;
  background-position: 96% top;
  background-repeat: no-repeat;
  background-size: 225px 264px !important;
  width: 100%;
  z-index: 10;
}

.content-grid .clickthrough .item h2 {
  position: relative;
  left: 40px;
  font-size: 3rem;
  font-weight: 700;
  padding-top: 30px;
  text-shadow: 0 0 5px #000;
}

.content-grid .clickthrough .item h2 span {
  background-color: transparent;
  box-shadow: none;
}

.content-grid .clickthrough .item .details {
  display: block;
}

.content-grid .clickthrough .item .details .description {
  margin-left: 40px;
  width: 48%;
  text-shadow: 0 0 5px #000;
}

.content-grid .clickthrough .item .details .description p {
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.8rem;
}

.content-grid .clickthrough .item .actions {
  text-align: left;
  margin-left: 40px;
}

@media (max-width: 1023px) {
  .content-grid .clickthrough .item h2 {
    background-color: transparent;
  }

  .content-grid .clickthrough .item h2::after {
    background: none;
  }
}

@media (max-width: 1080px) {
  .content-grid .clickthrough .item h2 {
    left: 20px;
  }

  .content-grid .clickthrough .item .details .description,
  .content-grid .clickthrough .item .actions {
    margin-left: 20px;
  }
}

@media (max-width: 990px) {
  .content-grid .clickthrough .item h2 {
    font-size: 2.5rem;
    line-height: 0.2em;
    padding-top: 10px;
  }

  .content-grid .clickthrough .item .item-content {
    background-size: 180px auto !important;
    background-position: 96% 15%;
  }
}

@media (max-width: 767px) {
  .content-grid .clickthrough .item {
    height: 390px;
  }

  .content-grid .clickthrough .item h2 {
    font-size: 3rem;
    line-height: 1.2em;
    left: 0;
    padding-top: 30px;
  }

  .content-grid .clickthrough .item .item-content {
    background-size: 225px auto !important;
    top: 0;
    background-position: 96% 30px;
  }

  .content-grid .clickthrough .item .actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
  }

  .content-grid .clickthrough .item .actions .cta-button,
  .content-grid .clickthrough .item .actions .cta-button::before {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
  }

  @media (max-width: 350px) {
    .content-grid .clickthrough .item h2 {
      padding-top: 10px;
    }
  }

  .content-grid .clickthrough .item .actions .cta-button {
    display: block;
    background: rgba(0, 0, 0, 0.7);
    margin: 0;
    padding: 20px 75px 20px 20px;
    font-size: 2rem;
    font-weight: 600;
  }

  .content-grid .clickthrough .item .actions .cta-button::before {
    content: "";
    width: 25px;
    height: 16px;
    margin-top: -8px;
    background: url(../img/interface/expand-collapse-arrows@2x.png) 0 0 no-repeat;
    background-size: 50px 32px !important;
    position: absolute;
    top: 50%;
    right: 20px;
    left: auto;
    z-index: 11;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}

@media (max-width: 479px) {
  .content-grid .clickthrough .item {
    height: auto;
  }

  .content-grid .clickthrough .item h2 {
    font-size: 2.5rem;
  }

  .content-grid .clickthrough .item .item-content {
    background: none !important;
  }

  .content-grid .clickthrough .item .details .description {
    width: 90%;
  }

  .content-grid .clickthrough .item .details .description p {
    font-size: 1.3rem;
    line-height: 1.6rem;
  }
}


/* !-- Digital Games -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.one-per-column,
.two-per-column {
  float: left;
  border: 1px solid #fff;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.one-per-column {
  width: 50%;
}

.two-per-column {
  width: 25%;
}

@media (max-width: 767px) {
  .one-per-column,
  .two-per-column {
    width: 100%;
  }
}

.promo-box.games .product .content {
  top: auto;
  right: 20px;
  bottom: 20px;
  left: 20px;
  width: auto;
  z-index: 10;
  cursor: pointer;
}

@media (max-width: 767px) {
  .promo-box.games .product .content {
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.promo-box.games .product .content h2 {
  font-size: 2.4rem;
  line-height: 2.5rem;
  margin: 0;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .promo-box.games .product .content h2 span {
    font-size: 2.2rem;
    line-height: 2rem;
  }
}

@media (max-width: 767px) {
  .promo-box.games .product .content h2 {
    padding-bottom: 20px;
  }

  .promo-box.games .product .content h2 span {
    font-size: 2rem;
  }
}

.promo-box.games .product .content h2 .first-line {
  color: #fff;
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin: 0;
}

.promo-box.games .product .content p {
  margin: 6px 0 0 0;
}

.promo-box.games .product .content p.platform {
  margin: 6px 0 0 0;
  color: #959595;
  font-style: italic;
}

.promo-box.games .product .content .cta-button {
  display: none;
}

.promo-box.games .product .one-per-column img {
  width: 600px;
  position: relative;
  margin-left: -300px;
  left: 50%;
}

.promo-box.games .product .two-per-column img {
  height: 100%;
  width: auto;
  margin-left: -237px;
  left: 50%;
}

.full-column h2 span,
.one-per-column h2 span,
.two-per-column h2 span {
  -webkit-transition-timing-function: -webkit-box-shadow, background-color;
  -webkit-transition-duration: 0.25s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: -webkit-box-shadow, background-color;
  -moz-transition-duration: 0.25s;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: -webkit-box-shadow, background-color;
  -ms-transition-duration: 0.25s;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: -webkit-box-shadow, background-color;
  -o-transition-duration: 0.25s;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: -webkit-box-shadow, background-color;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}

.full-column:hover h2 span,
.one-per-column:hover h2 span,
.two-per-column:hover h2 span {
  background: #9d0a0e !important;
  -webkit-box-shadow: 6px 0 0 #9d0a0e, -6px 0 0 #9d0a0e !important;
  -moz-box-shadow: 6px 0 0 #9d0a0e, -6px 0 0 #9d0a0e !important;
  -ms-box-shadow: 6px 0 0 #9d0a0e, -6px 0 0 #9d0a0e !important;
  -o-box-shadow: 6px 0 0 #9d0a0e, -6px 0 0 #9d0a0e !important;
  box-shadow: 6px 0 0 #9d0a0e, -6px 0 0 #9d0a0e !important;
}

@media (max-width: 1200px) {
  .promo-box.games .product .full-column img {
    border: 1px solid #fff;
    position: relative;
    height: auto;
    width: 1200px;
    margin-left: -600px;
    left: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  .promo-box.games .product img,
  .promo-box.games .product .two-per-column img {
    height: auto;
    width: 100%;
    margin-left: 0;
    left: auto;
  }

  .promo-box.games .product .one-per-column img {
    height: auto;
    width: 770px;
    margin-left: -385px;
    left: 50%;
  }

  .promo-box.games .product .full-column img {
    width: auto;
  }

  .full-column:hover h2 span,
  .one-per-column:hover h2 span,
  .two-per-column:hover h2 span {
    background: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 560px) {
  .promo-box.games .product img {
    right: auto;
  }
}

@media (max-width: 479px) {
  .promo-box.games .product img,
  .promo-box.games .product .two-per-column img {
    height: 100%;
    width: auto;
    margin-left: -237px;
    left: 50%;
  }
}


/* !-- Media Resources -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.media-resources article {
  width: 300px;
  height: 335px;
  display: block;
  border: 1px solid #fff;
  float: left;
  position: relative;
  background: #000;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.media-resources article::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -moz-transition: opacity 0.25s ease-in-out;
  -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -ms-transition: opacity 0.25s ease-in-out;
  -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -o-transition: opacity 0.25s ease-in-out;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  transition: opacity 0.25s ease-in-out;
}

.media-resources article:hover::before {
  opacity: 1;
}

.media-resources article.dbl {
  width: 600px;
}

.media-resources article img {
  cursor: pointer;
}

.media-resources article .media-video a::after {
  cursor: pointer;
  content: "";
  width: 104px;
  height: 104px;
  margin: -72px 0 0 -52px;
  background: url(../img/interface/video-play-button.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  left: 50%;
}

.media-resources article.sgl img {
  margin-left: -300px;
  left: 50%;
  position: absolute;
}

.media-resources article h3 {
  color: #fff;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.3rem;
  margin: 0 25px;
  position: absolute;
  bottom: 25px;
}

.media-resources article h3 span {
  text-transform: uppercase;
  background-color: rgba(20, 12, 10, 0.7);
  color: #fff;
  padding: 0 2px;
  -webkit-box-shadow: 6px 0 0 rgba(20, 12, 10, 0.7), -6px 0 0 rgba(20, 12, 10, 0.7);
  -webkit-transition-property: -webkit-box-shadow, background-color;
  -webkit-transition-duration: 0.25s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-box-shadow: 6px 0 0 rgba(20, 12, 10, 0.7), -6px 0 0 rgba(20, 12, 10, 0.7);
  -moz-transition-property: -moz-box-shadow, background-color;
  -moz-transition-duration: 0.25s;
  -moz-transition-timing-function: ease-in-out;
  -ms-box-shadow: 6px 0 0 rgba(20, 12, 10, 0.7), -6px 0 0 rgba(20, 12, 10, 0.7);
  -ms-transition-property: -ms-box-shadow, background-color;
  -ms-transition-duration: 0.25s;
  -ms-transition-timing-function: ease-in-out;
  -o-box-shadow: 6px 0 0 rgba(20, 12, 10, 0.7), -6px 0 0 rgba(20, 12, 10, 0.7);
  -o-transition-property: -o-box-shadow, background-color;
  -o-transition-duration: 0.25s;
  -o-transition-timing-function: ease-in-out;
  box-shadow: 6px 0 0 rgba(20, 12, 10, 0.7), -6px 0 0 rgba(20, 12, 10, 0.7);
  transition-property: box-shadow, background-color;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}

.media-resources article h3 span.first-line {
  color: #959595;
  font-size: 1.6rem;
  line-height: 2rem;
  display: table;
}

.media-resources article:hover h3 span {
  background-color: #9d0a0e;
  -webkit-box-shadow: 6px 0 0 #9d0a0e, -6px 0 0 #9d0a0e;
  -moz-box-shadow: 6px 0 0 #9d0a0e, -6px 0 0 #9d0a0e;
  -ms-box-shadow: 6px 0 0 #9d0a0e, -6px 0 0 #9d0a0e;
  -o-box-shadow: 6px 0 0 #9d0a0e, -6px 0 0 #9d0a0e;
  box-shadow: 6px 0 0 #9d0a0e, -6px 0 0 #9d0a0e;
}

@media (max-width: 1200px) {
  .media-resources {
    padding: 0 20px;
    text-align: center;
  }

  .media-resources article.dbl,
  .media-resources article.sgl {
    width: 33.33%;
  }

  .media-resources article img {
    margin-left: -300px;
    left: 50%;
    position: absolute;
  }
}

@media (max-width: 1023px) {
  .media-resources article.dbl,
  .media-resources article.sgl {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .media-resources article.dbl,
  .media-resources article.sgl {
    width: 100%;
  }

  .media-resources article.dbl img,
  .media-resources article.sgl img {
    min-width: 100%;
    height: auto;
    margin-left: 0;
    left: auto;
  }
}

@media (max-width: 600px) {
  .media-resources article.dbl img,
  .media-resources article.sgl img {
    width: 600px;
    height: auto;
    margin-left: -300px;
    left: 50%;
  }
}


/* -------------- Livestream and Podcast Detail ----------------- */

/* !-- Article Page -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.podcast-detail #page-header .text p {
  color: #b5b5b5;
  margin: 0;
}

.podcast-detail #page-header .text .subtitle {
  color: #fff;
  font-weight: 600;
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 0.3em;
}

.podcast-detail #page-header .text .author {
  color: #efefef;
  font-size: 1.4rem;
  font-style: italic;
}

@media (max-width: 1920px) {
  .podcast-detail #page-header .intro {
    padding-top: 100px;
  }
}

@media (max-width: 1200px) {
  .podcast-detail .main-content.article {
    padding-left: 18px;
  }

  .podcast-detail #page-header .text .subtitle {
    font-size: 2rem;
    line-height: 2.2rem;
  }
}

@media (max-width: 1023px) {
  .article .main-content.article {
    padding: 0 18px;
  }
}

.podcast-detail .main-content.article .intro {
  font-weight: 600;
  font-size: 1.8rem;
}

@media (max-width: 767px) {
  .podcast-detail #page-header .intro {
    padding-top: 20px;
  }

  .podcast-detail .main-content .image-header .summary,
  .main-content .image-header .text {
    display: none;
  }
}

@media (max-width: 479px) {
  .podcast-detail .main-content.article .intro {
    font-size: 1.6rem;
  }

  .podcast-detail .main-content.article p {
    font-size: 1.4rem;
  }
}


/* -------------- List ---------------- */

.main-content.article ul,
article.intro ul {  }

.main-content.article ul li,
article.intro ul li {
  margin-top: 10px;
}

@media (max-width: 767px) {
  .main-content.article ul li,
  article.intro ul li {  }
}

@media (max-width: 479px) {
  .article ul li {
    font-size: 1.4rem !important;
  }
}

/* --------Table ---------- */

.main-content.article table {
  font-size: 1.6rem;
  line-height: 1.6rem;
  margin: 40px 0;
  border-collapse: collapse;
  width: 100%;
}

.main-content.article table tr {
  border-bottom: 1px solid #fff;
}

.main-content.article table th {
  background-color: #333;
  color: #fff;
  font-style: italic;
  font-weight: 600;
  padding: 8px 20px;
}

.main-content.article table td {
  color: #333;
  padding: 8px 20px;
  border: 0 none;
}

@media (max-width: 767px) {
  .main-content.article table {
    font-size: 1.4rem;
    line-height: 1.4rem;
  }

  .main-content.article table td,
  .article table th {
    padding: 5px 20px;
  }
}

.main-content.article table.stacktable {
  width: 100%;
}

.main-content.article table .st-head-row.st-head-row-main {
  font-size: 1.6rem;
  font-style: normal;
}

.main-content.article table .st-key {
  width: 48%;
  text-align: right;
  padding-right: 2%;
  font-weight: 600;
}

.main-content.article table .st-val {
  width: 48%;
  padding-left: 2%;
}

/* RESPONSIVE TABLE */

.main-content.article table.stacktable.large-only {
  display: table;
}

.main-content.article table.small-only {
  display: none;
}

@media (max-width: 700px) {
  .main-content.article table.large-only {
    display: none;
  }

  .main-content.article table.stacktable.small-only {
    display: table;
  }

  .main-content.article table td,
  .article table th {
    padding: 5px 10px;
  }
}



/**  ---------------------------------------- */

/* ---------- Result Page ------------------ */
.page-search article.intro {
  padding: 15px 0 25px;
}

.page-search .item-list ul li {
  margin: 0 0.75em 0.25em;
}

.pager-first.first a,
.pager-previous a,
.pager-next a,
.pager-last.last a {
  font-size: 2.5rem;
}

@media (max-width: 479px) {
  .page-search .item-list ul li {
    margin: 0 0.35em 0.25em;
  }
}


/**  ---------------------------------------- */

/* ---------- Page Errors ------------------ */
.errors article.intro {
  width: 1200px;
  margin: 50px auto;
  padding: 18px;
}

.errors article.intro p {
  margin: 0;
  line-height: 2.4rem;
}

@media (max-width: 1023px) {
  .errors article.intro {
    width: auto;
  }
}

@media (max-width: 767px) {
  .errors article.intro {
    padding-right: 25px;
  }
}

@media (max-width: 479px) {
  .errors article.intro {
    margin: 0 auto;
  }

  .errors article.intro p {
    line-height: 2rem;
  }
}

/* !-- MODULE VIDE0 -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.video-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
}

.video-container.play {
  display: block;
}

.video-container.play a img {
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 999;
  position: absolute;
  left: 0;
  top: 0;
}




/* !-- New header style -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media all {
  h3.with-stroke {
    color: #212121;
    font-weight: 300;
    font-size: 4rem;
    line-height: 1.2em;
    font-family: "Open Sans", sans-serif;
    text-align: center;
    text-transform: uppercase;
    margin: 40px 0 20px;
    padding: 0 30px;
    position: relative;
  }

  h3.with-stroke span {
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    padding: 0 10px;
    background: url(../img/interface/page-background.jpg);
    position: relative;
    z-index: 2;
  }

  h3.with-stroke::after {
    content: "";
    height: 1px;
    margin-top: -1px;
    background: #bdbdbd;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    z-index: 1;
  }
}

/* !-- Two Column Text -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.two-column-text p:first-child::first-letter {
  font-weight: normal;
  font-size: 3.7rem;
  line-height: 1.1em;
  margin: 0 3px 0 0;
  float: left;
}

.two-column-text {
  text-align: justify;
  -webkit-column-count: 2;
  -webkit-column-gap: 26px;
  -moz-column-count: 2;
  -moz-column-gap: 26px;
  -ms-column-count: 2;
  -ms-column-gap: 26px;
  -o-column-count: 2;
  -o-column-gap: 26px;
  column-count: 2;
  column-gap: 26px;
}

/* -- Icon Set -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.iconset {
  margin: 50px -18px 12px;
}

.iconset-preview img {
  max-width: 100%;
  max-height: 205px;
  display: block;
  margin: 0 auto 25px;
}

.iconset-preview .content {
  text-align: center;
}

.iconset-list::after {
  content: "";
  height: 0;
  display: block;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.iconset-list .iconset-preview {
  width: 32%;
  float: left;
}

.iconset-list .clear.clear-3 {
  clear: both;
}

.iconset-preview {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.iconset-preview .wrap {
  padding: 18px;
  position: relative;
  height: 324px;
}

.iconset-preview .image {
  margin-bottom: 8px;
  display: block;
  -webkit-filter: grayscale(0.7);
  -webkit-transition: -webkit-filter 0.25s ease-in-out;
  -webkit-backface-visibility: hidden;
  width: 100%;
  position: relative;
}

.iconset-preview:not(.audio-article):hover .image,
.iconset-preview.audio-article .audio-play:hover {
  -webkit-filter: grayscale(0);
}

.iconset-preview .image::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -moz-transition: opacity 0.25s ease-in-out;
  -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -ms-transition: opacity 0.25s ease-in-out;
  -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  -o-transition: opacity 0.25s ease-in-out;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) inset;
  transition: opacity 0.25s ease-in-out;
}

.iconset-preview .text a {
  color: #333;
  text-decoration: none;
}

.iconset-preview .text a:hover,
.iconset-preview .text a:focus,
.iconset-preview .text a:active {
  color: #9d0a0e;
}

.iconset-preview h4 {
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  margin-bottom: 0;
}

.iconset-preview p {
  font-size: 1.4rem;
  margin: 0 0 1.4em 0;
  padding: 0;
}

.iconset-preview .actions {
  text-align: center;
}

.iconset-preview .cta-button {
  font-size: 1.4rem; /* padding-top: .2em; padding-bottom: .2em; */
  margin: 0 0 0 22px;
}

.iconset-preview .cta-button::before,
.books .cta-button::before {
  width: 20px;
  background-size: 8px auto !important;
  left: -22px;
}

.news .articles .cta-button,
.product_catalog .articles .cta-button {
  font-size: 1.4rem;
  line-height: 1.4rem;
}

aside .iconset-preview .wrap {
  padding-left: 0;
  padding-right: 0;
}

.iconset .vertical-divider {
  border-right: 1px solid #cdcbcb;
}

.iconset .child-icon-list1 {
  width: 98%;
  overflow: hidden;
  height: 350px;
}

.iconset .child-icon-list2 {
  width: 49%;
  overflow: hidden;
  height: 350px;
}

.iconset .child-icon-list3 {
  width: 32%;
  overflow: hidden;
  height: 350px;
}

@media (max-width: 1200px) {
  .iconset {
    margin: 0;
  }
}

@media (max-width: 1023px) {
  .iconset-list .clear {
    clear: none !important;
  }

  .iconset-list .clear.even {
    clear: both !important;
  }
}

@media (max-width: 767px) {
  .iconset-list .iconset-preview {
    width: 100%;
  }

  .iconset-list .clear {
    clear: none !important;
  }

  .iconset-preview img {
    max-width: 80%;
  }

  .iconset .vertical-divider {
    border-right: none;
  }
}

/* !-- Feature Events Bloc -- */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media all {
  .events-feature {
    height: 400px;
    overflow: hidden;
  }

  .events-feature::after {
    content: ".";
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
    clear: both;
    visibility: hidden;
  }

  .events-feature .event {
    height: 400px;
    width: 100%;
    float: left;
    position: relative;
    display: table;
    background-size: auto auto;
    text-align: center;
    background-position: 50% 50%;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
  }

  .events-feature .event .wrap {
    padding: 0 10px 20px;
    height: 100%;
    text-align: center;
    display: table-cell;
    vertical-align: bottom;
    border-left: 1px solid #ececec;
    position: relative;
    z-index: 2;
    background: -moz-linear-gradient(top, rgba(33, 33, 33, 0) 54%, rgba(33, 33, 33, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(54%, rgba(33, 33, 33, 0)), color-stop(100%, rgba(33, 33, 33, 1)));
    background: -webkit-linear-gradient(top, rgba(33, 33, 33, 0) 54%, rgba(33, 33, 33, 1) 100%);
    background: -o-linear-gradient(top, rgba(33, 33, 33, 0) 54%, rgba(33, 33, 33, 1) 100%);
    background: -ms-linear-gradient(top, rgba(33, 33, 33, 0) 54%, rgba(33, 33, 33, 1) 100%);
    background: linear-gradient(to bottom, rgba(33, 33, 33, 0) 54%, rgba(33, 33, 33, 1) 100%);
  }

  .events-feature .event .wrap p {
    color: #fff;
    font-size: 1.6rem;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
  }

  .events-feature .event .wrap p span {
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
  }

  .events-feature .event .visual {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
  }

  .events-feature .event .visual img {
    width: 500px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -250px;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  .events-feature .event:hover .visual img {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  .events-feature .owl-nav div {
    width: 40px;
    margin: 0;
    display: block;
    font-family: "icomoon", sans-serif;
    font-weight: normal;
    text-shadow: 0 0 2px #000;
    color: #fff;
    font-size: 4.5rem;
    line-height: 1em;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 32px;
    z-index: 999;
  }

  .events-feature .owl-nav div:hover {
    color: rgba(255, 255, 255, 1);
  }

  .events-feature .owl-nav .owl-prev {
    left: 10px;
  }

  .events-feature .owl-nav .owl-next {
    right: 10px;
  }

  .events-feature .owl-nav div.disabled {
    display: none !important;
  }

  .events-feature .owl-nav .owl-prev::before,
  .events-feature .owl-nav .owl-next::before {
    text-align: center;
    margin-top: -10px;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
  }

  .events-feature .owl-nav .owl-prev::before {
    content: "<";
  }

  .events-feature .owl-nav .owl-next::before {
    content: ">";
  }

  .events-feature .owl-dots {
    display: none;
  }
}

@media (max-width: 479px) {
  .events-feature {
    height: 460px;
    overflow: hidden;
  }

  .events-feature .owl-nav {
    height: 0;
    margin: 20px 0 0;
    position: relative;
  }

  .events-feature .owl-nav div {
    color: #212121;
  }

  .events-feature .owl-dots {
    text-align: center;
    position: relative;
    top: 10px;
  }

  .events-feature .owl-dot {
    width: 10px;
    height: 10px;
    margin: 0 2px;
    display: inline-block;
    border-radius: 20px;
    background: #9b9b9b;
  }

  .events-feature .owl-dot.active {
    background: #212121;
  }
}