/* 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: 300px;
  height: 250px;
  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 .background.videoScreen {
      top: 40px; }
  #banner .spriteAnimationHolder {
    position: relative;
    width: 300px;
    height: 250px;
    top: 0;
    left: 0;
    overflow: hidden; }
  #banner .panel.videoScreen {
    -webkit-transform: translateY(250px);
            transform: translateY(250px); }
  #banner .character {
    position: absolute;
    left: 80px;
    top: 0px; }
    #banner .character.videoScreen {
      -webkit-transform: translate(-40px, 116px) scale(0.62);
              transform: translate(-40px, 116px) scale(0.62); }
  #banner .titleTreatment {
    position: absolute;
    left: 9px;
    top: 25px;
    width: 204px; }
    #banner .titleTreatment.videoScreen {
      -webkit-transform: scale(0.73) translate(-36px, 180px);
              transform: scale(0.73) translate(-36px, 180px); }
    #banner .titleTreatment.korean {
      top: 15px; }
  #banner .netflixLogo {
    position: absolute;
    left: 21px;
    top: 202px;
    width: 100px; }
    #banner .netflixLogo.videoScreen {
      -webkit-transform: translateX(188px) scale(0.56);
              transform: translateX(188px) scale(0.56); }
  #banner .netflixOnlyContainer {
    position: absolute;
    left: 1px;
    top: 190px;
    width: 140px;
    height: 12px; }
    #banner .netflixOnlyContainer.videoScreen {
      opacity: 0; }
    #banner .netflixOnlyContainer.korean {
      top: 184px; }
    #banner .netflixOnlyContainer .netflixOnly {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      margin: auto;
      font-family: 'proxima_novabold';
      text-align: center;
      text-transform: uppercase;
      font-size: 10px;
      color: #FFF;
      pointer-events: none; }
  #banner .mainCopyContainer {
    position: absolute;
    left: 10px;
    top: 150px;
    width: 282px;
    height: 20px; }
    #banner .mainCopyContainer.korean {
      left: 24px; }
    #banner .mainCopyContainer.videoScreen {
      opacity: 0; }
    #banner .mainCopyContainer .mainCopy {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      margin: auto;
      font-family: 'proxima_novabold';
      text-align: left;
      text-transform: uppercase;
      font-size: 13px;
      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: 130px;
    height: 32px;
    left: 146px;
    top: 196px;
    overflow: hidden;
    pointer-events: none; }
    #banner .ctaButton.videoScreen {
      opacity: 0; }
    #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: 11px;
      letter-spacing: 0.8px;
      padding-right: 13px;
      padding-left: 4px;
      text-align: center;
      -webkit-transform: translate(-50%, -45%);
              transform: translate(-50%, -45%);
      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: 2px;
    bottom: 2px;
    width: 15px; }
    #banner .ratingBug.videoScreen {
      display: none; }
  #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-bottom-color: #e7a221;
    border-bottom-width: 1px;
    border-bottom-style: solid; }
    #banner #video_1.netherlands .controls, #banner #video_1.germany .controls, #banner #video_1.portuguese .controls, #banner #video_1.france .controls, #banner #video_1.singapore .controls {
      top: 7px;
      left: 36px; }