/* setup */
@font-face {
  font-family: 'proxima_novabold';
  src: url("../fonts/proximanovabold-webfont.woff") format("woff"); }
@font-face {
  font-family: 'proxima_novaregular';
  src: url("../fonts/proximanova-regular-webfont.woff") format("woff"); }
@font-face {
  font-family: 'proxima_novalight';
  src: url("../fonts/proximanova-light-webfont.woff") format("woff"); }
html {
  box-sizing: border-box;
  width: 100%;
  height: 100%; }

*, *:before, *:after {
  box-sizing: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

body {
  background-color: #FFF;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; }

.hide {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

/* Banner Styles */
#banner {
  position: relative;
  width: 728px;
  height: 90px;
  border: solid 1px #000;
  overflow: hidden;
  background-color: #000;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
  #banner .bannerClick {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); }
  #banner .image-rendering {
    image-rendering: -webkit-optimize-contrast; }
  #banner .background {
    position: absolute;
    left: -1px;
    top: -1px; }
  #banner .panel.videoScreen {
    -webkit-transform: translateX(180px);
            transform: translateX(180px); }
  #banner .character {
    position: absolute;
    left: 264px;
    top: -18px; }
  #banner .titleTreatment {
    position: absolute;
    left: 42px;
    top: 4px; }
    #banner .titleTreatment.japanese, #banner .titleTreatment.korean, #banner .titleTreatment.chinese_s, #banner .titleTreatment.chinese_t {
      left: 55px;
      top: -11px;
      width: 212px; }
  #banner .netflixLogo {
    position: absolute;
    right: 182px;
    top: 54px;
    width: 82px; }
  #banner .mainCopyContainer {
    position: absolute;
    right: 158px;
    top: 16px;
    width: 126px;
    height: 38px; }
    #banner .mainCopyContainer .mainCopy {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      margin: auto;
      font-family: 'proxima_novabold';
      text-align: center;
      text-transform: uppercase;
      font-size: 13px;
      color: #FFF;
      pointer-events: none; }
  #banner .netflixOnly {
    position: absolute;
    left: 104px;
    top: 204px;
    width: 300px;
    height: 20px;
    font-family: 'proxima_novaregular';
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    color: #FFF;
    pointer-events: none; }
  #banner .playIconDiv {
    position: absolute;
    top: 1px;
    left: 1px;
    display: block;
    z-index: 2; }
    #banner .playIconDiv.videoScreen {
      display: none; }
  #banner .iconDiv {
    position: absolute;
    width: 30px;
    height: 30px;
    cursor: pointer; }
    #banner .iconDiv .circleContainer {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg); }
      #banner .iconDiv .circleContainer .circle {
        fill: transparent;
        stroke: #fff;
        stroke-width: 3px; }
      #banner .iconDiv .circleContainer .circleOver {
        fill: transparent;
        stroke: #dc0012;
        stroke-width: 3px; }
    #banner .iconDiv .iconImage {
      position: absolute;
      top: 50%;
      left: 52%;
      width: 10px;
      height: 10px;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  #banner .ctaButton {
    position: absolute;
    width: 112px;
    height: 30px;
    right: 22px;
    bottom: 30px;
    overflow: hidden;
    pointer-events: none; }
    #banner .ctaButton * {
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1);
      transform: translateZ(0); }
    #banner .ctaButton .ctaBackgroundNormal {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: #dc0012; }
    #banner .ctaButton .ctaBackgroundOnOver {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: #FFF; }
    #banner .ctaButton .ctaText {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      font-family: 'proxima_novabold';
      text-transform: uppercase;
      color: #000;
      font-size: 10px;
      letter-spacing: 0.8px;
      padding-right: 13px;
      padding-left: 4px;
      text-align: center;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      overflow: hidden; }
    #banner .ctaButton .ctaTextNormal {
      color: #FFF;
      background: url("../img/arrow_white.png") no-repeat 95% center; }
    #banner .ctaButton .ctaTextOnOver {
      color: #dc0012;
      background: url("../img/arrow_red.png") no-repeat 95% center; }
  #banner .ratingBug {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 15px; }
  #banner .marvelBug {
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 15px; }
  #banner .marvelDisclaimer {
    position: absolute;
    left: 22px;
    bottom: 2px;
    text-transform: uppercase;
    color: #bbb;
    white-space: nowrap;
    font-family: 'proxima_novaregular';
    font-size: 7px;
    pointer-events: none;
    letter-spacing: 2px; }
    #banner .marvelDisclaimer.videoScreen {
      display: none; }
  #banner .disclaimer {
    position: absolute;
    left: 22px;
    bottom: 8px;
    text-transform: uppercase;
    color: #bbb;
    white-space: nowrap;
    font-family: 'proxima_novaregular';
    font-size: 7px;
    pointer-events: none;
    letter-spacing: 1px; }
    #banner .disclaimer.videoScreen {
      display: none; }
  #banner #video_1 {
    border-left-color: #e7a221;
    border-left-width: 1px;
    border-left-style: solid;
    left: auto;
    right: 0px; }
