@charset "UTF-8";
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat; }

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal; }
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
    .slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 1; }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.25; }
  .slick-prev:before,
  .slick-next:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 1;
    color: white;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

.slick-prev {
  left: -25px; }
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
  .slick-prev:before {
    content: "←"; }
    [dir="rtl"] .slick-prev:before {
      content: "→"; }

.slick-next {
  right: -25px; }
  [dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
  .slick-next:before {
    content: "→"; }
    [dir="rtl"] .slick-next:before {
      content: "←"; }

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px; }

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 1; }
      .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-family: "slick";
        font-size: 6px;
        line-height: 20px;
        text-align: center;
        color: black;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    .slick-dots li.slick-active button:before {
      color: black;
      opacity: 0.75; }

/*
Responsive CSS Sprite created using: http://responsive-css.us/
*/
.button-1-left-cap, .button-1-right-cap, .button-1-right-cap-over, .button-2-left-cap, .button-2-left-cap-over, .button-2-right-cap, .button-2-right-cap-over, .carousel-left, .carousel-left-over, .carousel-right, .carousel-right-over, .date-of-birth, .leather-texture, .nav-divider, .nav-icon, .slash-divider, .small-rect-frame, .small-rect-frame-selected {
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(../images/common/sprite.png); }

.button-1-left-cap {
  width: 38px;
  height: 64px;
  background-position: 82.2886% 0.208333%;
  background-size: 5389.47%; }

.button-1-right-cap {
  width: 67px;
  height: 64px;
  background-position: 85.5124% 0.208333%;
  background-size: 3056.72%; }

.button-1-right-cap-over {
  width: 67px;
  height: 64px;
  background-position: 80.0101% 0.208333%;
  background-size: 3056.72%; }

.button-2-left-cap {
  width: 47px;
  height: 55px;
  background-position: 95.4523% 0.206398%;
  background-size: 4357.45%; }

.button-2-left-cap-over {
  width: 47px;
  height: 55px;
  background-position: 88.1059% 0.206398%;
  background-size: 4357.45%; }

.button-2-right-cap {
  width: 47px;
  height: 55px;
  background-position: 93.0035% 0.206398%;
  background-size: 4357.45%; }

.button-2-right-cap-over {
  width: 47px;
  height: 55px;
  background-position: 90.5547% 0.206398%;
  background-size: 4357.45%; }

.carousel-left {
  width: 55px;
  height: 53px;
  background-position: 98.2940% 0.205973%;
  background-size: 3723.64%; }

.carousel-left-over {
  width: 55px;
  height: 53px;
  background-position: 45.8605% 11.4315%;
  background-size: 3723.64%; }

.carousel-right {
  width: 55px;
  height: 53px;
  background-position: 51.5805% 11.4315%;
  background-size: 3723.64%; }

.carousel-right-over {
  width: 55px;
  height: 53px;
  background-position: 48.7205% 11.4315%;
  background-size: 3723.64%; }

.date-of-birth {
  width: 333px;
  height: 65px;
  background-position: 72.8863% 0.208551%;
  background-size: 615.015%; }

.leather-texture {
  width: 910px;
  height: 608px;
  background-position: 0.175747% 0.480769%;
  background-size: 225.055%; }

.nav-divider {
  width: 1268px;
  height: 5px;
  background-position: 0.256410% 60.0589%;
  background-size: 161.514%; }

.nav-icon {
  width: 36px;
  height: 44px;
  background-position: 53.9264% 11.3265%;
  background-size: 5688.89%; }

.slash-divider {
  width: 1024px;
  height: 9px;
  background-position: 89.2578% 16.3547%;
  background-size: 200.000%; }

.small-rect-frame {
  width: 166px;
  height: 107px;
  background-position: 57.4920% 0.218103%;
  background-size: 1233.73%; }

.small-rect-frame-selected {
  width: 166px;
  height: 107px;
  background-position: 48.5654% 0.218103%;
  background-size: 1233.73%; }

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
  font-family: "Bellefair", serif;
  font-weight: 400;
  background-color: #121212;
  background-size: 100% auto; }
  @media (max-width: 767px) {
    html {
      background-size: auto 600px; } }

*, *:before, *:after {
  box-sizing: inherit; }

p {
  line-height: 1.3em;
  font-size: 1.3em;
  margin: 5px;
  color: #FFFFFF;
  text-align: center;
  padding: 0 10px; }

h1 {
  font-family: "Fondamento", cursive;
  font-weight: 400;
  color: #638ca6;
  text-align: center; }

h2 {
  font-family: "Fondamento", cursive;
  font-size: 1.9em;
  font-weight: 400;
  color: #638ca6;
  text-align: center;
  padding: 0 10px; }

h3 {
  font-family: "Fondamento", cursive;
  font-size: 1.9em;
  margin: 5px;
  font-weight: 400;
  color: #638ca6;
  text-align: center; }

img, video {
  vertical-align: middle;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; }

sup {
  font-size: 0.5em;
  position: relative;
  top: -8px; }

.page-wrap {
  overflow: hidden;
  opacity: 0; }

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

.z-index-1 {
  z-index: 1; }

.z-index-2 {
  z-index: 2; }

.z-index-3 {
  z-index: 3; }

.nobr, nobr {
  white-space: nowrap; }

.position-wrapper {
  position: relative; }

/* MISC
   ========================================================================== */
.use-cursor {
  cursor: pointer; }

figure {
  display: inline-block;
  margin: 0; }

figcaption {
  display: block;
  color: #FFFFFF;
  max-width: 430px;
  padding: 0 10px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.2em; }

.inline-media {
  display: inline-block;
  position: relative; }
  .inline-media img, .inline-media video {
    width: 100%;
    height: auto; }

.fill-media {
  position: relative;
  width: 100%;
  background-color: #121212;
  text-align: center; }
  .fill-media img, .fill-media video {
    width: 100%;
    height: auto;
    max-width: 1800px;
    margin: 0 auto; }
  .fill-media .video-wrapper {
    width: 100%;
    height: 100%;
    background: none;
    text-align: center; }
  .fill-media .side-gradient-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 1805px;
    height: 1015px; }
    .fill-media .side-gradient-wrapper .side-gradient {
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 1802px;
      height: 1600px;
      background-image: radial-gradient(rgba(18, 18, 18, 0) 63%, #121212 73%); }
    .fill-media .side-gradient-wrapper .left-gradient {
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100%;
      left: 40px;
      background-image: linear-gradient(to left, rgba(18, 18, 18, 0), #121212); }
    .fill-media .side-gradient-wrapper .right-gradient {
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100%;
      left: calc( 100% - 40px );
      background-image: linear-gradient(to right, rgba(18, 18, 18, 0), #121212); }
  .fill-media .esrb-logo {
    width: 100%;
    max-width: 1700px;
    height: 79px;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 15px; }
    .fill-media .esrb-logo:after {
      content: "";
      background: url("../images/common/ESRB.jpg") center center no-repeat;
      width: 53px;
      height: 79px;
      position: absolute;
      left: 15px;
      bottom: 0; }
      @media (max-width: 1023px) {
        .fill-media .esrb-logo:after {
          display: none; } }

/* Responsive Frames
   ========================================================================== */
.simple-frame {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #2e3031;
  margin: 10px;
  position: relative; }
  .simple-frame img, .simple-frame video {
    width: 100%;
    height: auto;
    display: block; }
  .simple-frame.enlarge-image {
    cursor: pointer; }
    .simple-frame.enlarge-image:before {
      content: "";
      background: url("../images/common/enlarge-button.png") center center no-repeat;
      background-size: cover;
      width: 44px;
      height: 44px;
      position: absolute;
      top: 20px;
      left: 20px;
      opacity: 1;
      transition: opacity 400ms ease; }
    .simple-frame.enlarge-image:after {
      content: "";
      background: url("../images/common/enlarge-button-over.png") center center no-repeat;
      background-size: cover;
      width: 44px;
      height: 44px;
      position: absolute;
      top: 20px;
      left: 20px;
      opacity: 0;
      transition: opacity 400ms ease; }
    @media (max-width: 767px) {
      .simple-frame.enlarge-image {
        cursor: default; }
        .simple-frame.enlarge-image:before {
          display: none; }
        .simple-frame.enlarge-image:after {
          display: none; } }
  .simple-frame:hover.enlarge-image:before {
    opacity: 0; }
  .simple-frame:hover.enlarge-image:after {
    opacity: 1; }
  .simple-frame .esrb-logo {
    width: 100%;
    max-width: 1700px;
    height: 58px;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 5px; }
    .simple-frame .esrb-logo:after {
      content: "";
      background: url("../images/common/ESRB.jpg") center center no-repeat;
      background-size: cover;
      width: 39px;
      height: 58px;
      position: absolute;
      left: 5px;
      bottom: 0; }
      @media (max-width: 1023px) {
        .simple-frame .esrb-logo:after {
          display: none; } }

.framed-media {
  display: inline-block;
  padding: 4px;
  background-color: #000000;
  margin: 5px; }
  .framed-media--frame {
    display: inline-block;
    position: relative;
    top: 2px;
    padding: 10px;
    border: solid 2px #3e3e3e; }
  .framed-media--corner {
    position: absolute;
    background: transparent url("../images/common/thumb-corner.png") 0 0 no-repeat;
    width: 32px;
    height: 32px; }
    .framed-media--corner:nth-child(1) {
      top: -7px;
      left: -8px; }
    .framed-media--corner:nth-child(2) {
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      top: -8px;
      right: -7px; }
    .framed-media--corner:nth-child(3) {
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      bottom: -7px;
      right: -8px; }
    .framed-media--corner:nth-child(4) {
      -ms-transform: rotate(270deg);
      transform: rotate(270deg);
      bottom: -8px;
      left: -7px; }
  .framed-media img, .framed-media video {
    width: 100%;
    height: auto;
    display: block; }
  .framed-media .video-wrapper {
    width: 100%;
    height: 100%;
    background: none; }
  .framed-media.enlarge-image {
    cursor: pointer; }
    .framed-media.enlarge-image:after {
      content: "";
      background: url("../images/common/enlarge-button.png") center center no-repeat;
      background-size: cover;
      width: 44px;
      height: 44px;
      position: absolute;
      top: 20px;
      left: 20px; }
  .framed-media .enlarge-button {
    background: url("../images/common/enlarge-button.png") center center no-repeat;
    background-size: cover;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 20px;
    left: 20px; }

.text-overlay {
  position: absolute;
  background-color: rgba(18, 18, 18, 0.85);
  padding: 15px; }
  @media (min-width: 1024px) {
    .text-overlay {
      max-width: 768px; } }
  @media (max-width: 1023px) {
    .text-overlay {
      width: 75%; } }
  .text-overlay--frame {
    position: relative;
    border: solid 2px #d2d2d2;
    padding: 10px; }
  .text-overlay--corner {
    position: absolute;
    background: transparent url("../images/common/text-overlay-corner.png") 0 0 no-repeat;
    width: 26px;
    height: 26px; }
    .text-overlay--corner:nth-child(1) {
      top: -5px;
      left: -6px; }
    .text-overlay--corner:nth-child(2) {
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      top: -6px;
      right: -5px; }
    .text-overlay--corner:nth-child(3) {
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      bottom: -5px;
      right: -6px; }
    .text-overlay--corner:nth-child(4) {
      -ms-transform: rotate(270deg);
      transform: rotate(270deg);
      bottom: -6px;
      left: -5px; }

/* Reusable flex layouts
   ========================================================================== */
.three-column {
  max-width: 1300px;
  margin: 30px auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .three-column .column {
    width: 33.33%;
    -ms-flex-preferred-size: 33.33%;
    flex-basis: 33.33%; }
    @media (max-width: 1023px) {
      .three-column .column {
        width: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%; } }

.two-column {
  max-width: 1300px;
  margin: 30px auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .two-column .column {
    width: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%; }
    @media (max-width: 1023px) {
      .two-column .column {
        width: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%; } }

/* Reusable tiles/dividers
   ========================================================================== */
.symbol-divider {
  background: url("../images/common/symbol-bar.png") center center repeat-x;
  width: 100%;
  height: 26px; }

.line-symbol-divider {
  background: url("../images/common/line-symbol-bar.png") center center repeat-x;
  width: 100%;
  height: 38px; }

.slash-divider {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  margin: 40px 0;
  display: block; }

/* Background Leather textures
   ========================================================================== */
.bg-textures {
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 0;
  width: 100%;
  height: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden; }
  .bg-textures .leather-texture {
    margin: 50px auto;
    width: 910px;
    height: 608px;
    position: relative;
    left: 5%; }
    .bg-textures .leather-texture:nth-child(0) {
      left: 21%; }
    .bg-textures .leather-texture:nth-child(1) {
      left: 14%; }
    .bg-textures .leather-texture:nth-child(2) {
      left: -1%; }
    .bg-textures .leather-texture:nth-child(3) {
      left: -13%; }
    .bg-textures .leather-texture:nth-child(4) {
      left: -15%; }
    .bg-textures .leather-texture:nth-child(5) {
      left: 20%; }
    .bg-textures .leather-texture:nth-child(6) {
      left: 30%; }
    .bg-textures .leather-texture:nth-child(7) {
      left: -5%; }
    .bg-textures .leather-texture:nth-child(8) {
      left: -4%; }
    .bg-textures .leather-texture:nth-child(9) {
      left: 16%; }

/* Page Transitions
   ========================================================================== */
@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
#main.is-exiting #transition-content {
  animation-name: fadeOut;
  animation-duration: 800ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; }
#main.is-entering #transition-content {
  animation-name: fadeIn;
  animation-duration: 800ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; }

/* Reusable top of page styles
   ========================================================================== */
.page .black-bg {
  background-color: #000000; }
.page .top-feature {
  width: 100%;
  position: relative;
  height: 570px; }
  .page .top-feature .background {
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-height: 900px; }
    .page .top-feature .background .video-wrapper {
      width: 100%;
      height: 100%;
      background: none; }
      .page .top-feature .background .video-wrapper img {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 0;
        width: 100%;
        height: auto;
        min-width: 1280px;
        min-height: 640px;
        max-height: 900px;
        max-width: 1800px; }
      .page .top-feature .background .video-wrapper video {
        width: auto;
        height: auto;
        min-width: 100%;
        min-height: 100%;
        max-height: 900px; }
    .page .top-feature .background .bottom-gradient {
      position: absolute;
      left: 50%;
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      bottom: 0px;
      height: 150px;
      width: 100%;
      background-image: linear-gradient(to bottom, transparent, black); }
    .page .top-feature .background .side-gradient-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      overflow: hidden;
      width: 1805px;
      height: 900px; }
      .page .top-feature .background .side-gradient-wrapper .side-gradient {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 1802px;
        height: 1600px;
        background-image: radial-gradient(transparent 53%, black 73%); }
      .page .top-feature .background .side-gradient-wrapper .left-gradient {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100%;
        left: 40px;
        background-image: linear-gradient(to left, transparent, black); }
      .page .top-feature .background .side-gradient-wrapper .right-gradient {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100%;
        left: calc( 100% - 40px );
        background-image: linear-gradient(to right, transparent, black); }
  .page .top-feature .logo {
    background: url("../images/common/feature-logo.png") center center no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 170px;
    width: 613px;
    height: 363px; }
    @media (max-width: 767px) {
      .page .top-feature .logo {
        width: 500px;
        height: 296px; } }
  .page .top-feature .esrb-logo {
    width: 100%;
    max-width: 1700px;
    height: 79px;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 15px; }
    .page .top-feature .esrb-logo:after {
      content: "";
      background: url("../images/common/ESRB.jpg") center center no-repeat;
      width: 53px;
      height: 79px;
      position: absolute;
      left: 15px;
      bottom: 0; }
      @media (max-width: 1023px) {
        .page .top-feature .esrb-logo:after {
          display: none; } }
  .page .top-feature .feature-bottom-bar {
    width: 100%;
    position: absolute;
    bottom: 0; }
.page .intro {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  min-height: 330px;
  position: relative;
  padding: 40px 20px 50px 20px;
  background-color: rgba(0, 0, 0, 0.7); }
  .page .intro .line-symbol-divider {
    position: absolute;
    top: 0;
    left: 0; }
  .page .intro h1 {
    font-size: 3em; }
  .page .intro p {
    max-width: 750px;
    margin: 20px auto;
    width: 100%; }

/* Smoke Cover Animation
   ========================================================================== */
.smoke-cover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden; }
  @media (max-width: 1023px) {
    .smoke-cover {
      transition: opacity 1000ms ease; } }
  .smoke-cover .smoke-animation {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translateX(-50%) translateY(-2%);
    transform: translateX(-50%) translateY(-2%);
    height: 2500%;
    width: 100%;
    background: url("../images/common/smoke-cover.png") 0 0 no-repeat;
    background-size: 100% 100%; }
    @media (max-width: 1023px) {
      .smoke-cover .smoke-animation {
        background-image: none;
        background-color: #000000; } }
  .smoke-cover.is-visible {
    opacity: 0.95;
    visibility: visible; }
  .smoke-cover.is-opening .smoke-animation {
    animation: cover 1.2s steps(24);
    animation-fill-mode: forwards; }
    @media (max-width: 1023px) {
      .smoke-cover.is-opening .smoke-animation {
        animation: none; } }
  .smoke-cover.is-closing {
    -ms-transform: rotate(180deg);
    transform: rotate(180deg); }
    .smoke-cover.is-closing .smoke-animation {
      animation: uncover 1.2s steps(24);
      animation-fill-mode: forwards; }
    @media (max-width: 1023px) {
      .smoke-cover.is-closing {
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 0; }
        .smoke-cover.is-closing .smoke-animation {
          animation: none; } }

@keyframes cover {
  0% {
    transform: translateX(-50%) translateY(-2%); }
  100% {
    transform: translateX(-50%) translateY(-98%); } }
@keyframes uncover {
  0% {
    transform: translateX(-50%) translateY(-98%); }
  100% {
    transform: translateX(-50%) translateY(-2%); } }
/* Generic Button Style
 * - Use lean-left and lean-right class to flip it.
 * - Grows with the text length with min width of 350px.
   ========================================================================== */
.button-1 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: "Fondamento", cursive;
  font-size: 1.5em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
  position: relative; }
  .button-1 .button-1-left-cap {
    position: absolute;
    left: -36px; }
  .button-1 .center {
    background: url("../images/common/button-1-tile.png") center center repeat-x;
    height: 64px;
    padding: 17px 10px 17px 30px;
    transition: color 300ms ease;
    color: #bfd6de;
    width: 100%;
    text-align: center; }
  .button-1 .button-1-right-cap {
    position: absolute;
    right: -65px; }
  .button-1 .button-1-right-cap-over {
    position: absolute;
    right: -65px;
    opacity: 0;
    transition: opacity 300ms ease; }
  .button-1:hover .button-1-right-cap-over {
    opacity: 1; }
  .button-1:hover .center {
    color: #FFFFFF; }

.button-2 {
  font-family: "Fondamento", cursive;
  font-size: 1.5em;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding: 0px 47px 0px 47px;
  min-width: 250px; }
  .button-2 .button-2-left-cap {
    position: absolute;
    top: 0px;
    left: 0px; }
  .button-2 .button-2-left-cap-over {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    transition: opacity 300ms ease; }
  .button-2 .center {
    background: url("../images/common/button-2-tile.jpg") center center repeat-x;
    height: 55px;
    padding: 13px 20px 13px 20px;
    color: #bfd6de;
    position: relative;
    transition: color 300ms ease; }
    .button-2 .center .button-text {
      display: block;
      text-align: center; }
    @media (max-width: 767px) {
      .button-2 .center {
        padding: 13px 5px 13px 5px; } }
  .button-2 .over-bg {
    position: absolute;
    top: 0;
    left: 0;
    background: url("../images/common/button-2-over-tile.jpg") center center repeat-x;
    height: 55px;
    width: 100%;
    opacity: 0;
    transition: opacity 300ms ease; }
  .button-2 .button-text {
    position: relative; }
  .button-2 .button-2-right-cap {
    position: absolute;
    top: 0;
    right: 0px; }
  .button-2 .button-2-right-cap-over {
    position: absolute;
    top: 0;
    right: 0px;
    opacity: 0;
    transition: opacity 300ms ease; }
  .button-2:hover .button-2-right-cap-over, .button-2:hover .button-2-left-cap-over, .button-2:hover .over-bg, .button-2.is-active .button-2-right-cap-over, .button-2.is-active .button-2-left-cap-over, .button-2.is-active .over-bg {
    opacity: 1; }
  .button-2:hover .center, .button-2.is-active .center {
    color: #FFFFFF; }
  .button-2.is-active {
    cursor: default; }
  .button-2.no-hover {
    cursor: default; }
    .button-2.no-hover .button-2-right-cap-over, .button-2.no-hover .button-2-left-cap-over, .button-2.no-hover .over-bg {
      opacity: 0; }
    .button-2.no-hover .center {
      color: #bfd6de; }

/*
  Aaron's Buttons
*/
.btn-2 {
  display: inline-block;
  position: relative;
  height: 55px;
  padding: 0 47px;
  text-decoration: none;
  cursor: pointer; }
  .btn-2--text {
    position: relative;
    display: inline-block;
    background: transparent url("../images/common/button-2-tile.jpg") 0 0 repeat-x;
    height: 55px;
    color: #bfd6de;
    font-family: "Fondamento", cursive;
    font-size: 1.5em;
    padding: 14px 10px 0; }
  .btn-2--left-cap {
    position: absolute;
    top: 0;
    left: 0;
    width: 47px;
    height: 55px;
    background: transparent url("../images/common/sprite/button-2-left-cap.png") 0 0 no-repeat; }
  .btn-2--right-cap {
    position: absolute;
    top: 0;
    right: 0;
    width: 47px;
    height: 55px;
    background: transparent url("../images/common/sprite/button-2-right-cap.png") 0 0 no-repeat; }

.skyrim-top-nav {
  position: absolute;
  width: 100%;
  height: 74px;
  top: 72px;
  left: 0;
  z-index: 10; }
  @media (max-width: 1023px) {
    .skyrim-top-nav {
      display: none; } }
  .skyrim-top-nav.is-fixed {
    position: fixed;
    top: 0px; }
  .skyrim-top-nav .background {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000000;
    opacity: 0.8;
    width: 100%;
    height: 74px;
    z-index: 9; }
  .skyrim-top-nav .nav-divider {
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 57px;
    z-index: 10;
    width: 100%;
    max-width: 1268px; }
  .skyrim-top-nav .buttons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 1000px;
    padding-right: 74px;
    margin: 0 auto;
    position: relative; }
    .skyrim-top-nav .buttons .nav-button {
      padding: 24px 29px 15px 29px;
      text-decoration: none;
      z-index: 10; }
      .skyrim-top-nav .buttons .nav-button .button-text {
        color: #d0d7d8;
        font-family: "Fondamento", cursive;
        font-size: 1.2em; }
      .skyrim-top-nav .buttons .nav-button.is-active .button-text, .skyrim-top-nav .buttons .nav-button:hover .button-text {
        color: #638ca6;
        transition: color 300ms ease; }
    .skyrim-top-nav .buttons .nav-icon-wrap {
      width: 36px;
      height: 44px;
      position: absolute;
      bottom: -30px;
      left: 0px;
      pointer-events: none;
      z-index: 10; }
      .skyrim-top-nav .buttons .nav-icon-wrap .nav-icon {
        position: absolute;
        bottom: 0px;
        left: 0px;
        will-change: transform;
        transition: transform 600ms ease;
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        pointer-events: none; }
    .skyrim-top-nav .buttons .nav-button:nth-child(1).is-active ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(44px);
      transform: translateX(44px); }
    .skyrim-top-nav .buttons .nav-button:nth-child(2).is-active ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(210px);
      transform: translateX(210px); }
    .skyrim-top-nav .buttons .nav-button:nth-child(3).is-active ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(410px);
      transform: translateX(410px); }
    .skyrim-top-nav .buttons .nav-button:nth-child(4).is-active ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(575px);
      transform: translateX(575px); }
    .skyrim-top-nav .buttons .nav-button:nth-child(5).is-active ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(710px);
      transform: translateX(710px); }
    .skyrim-top-nav .buttons .nav-button:nth-child(6).is-active ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(831px);
      transform: translateX(831px); }
    .skyrim-top-nav .buttons .nav-button:nth-child(1):hover ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(44px) !important;
      transform: translateX(44px) !important; }
    .skyrim-top-nav .buttons .nav-button:nth-child(2):hover ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(210px) !important;
      transform: translateX(210px) !important; }
    .skyrim-top-nav .buttons .nav-button:nth-child(3):hover ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(410px) !important;
      transform: translateX(410px) !important; }
    .skyrim-top-nav .buttons .nav-button:nth-child(4):hover ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(575px) !important;
      transform: translateX(575px) !important; }
    .skyrim-top-nav .buttons .nav-button:nth-child(5):hover ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(710px) !important;
      transform: translateX(710px) !important; }
    .skyrim-top-nav .buttons .nav-button:nth-child(6):hover ~ .nav-icon-wrap .nav-icon {
      -ms-transform: translateX(831px) !important;
      transform: translateX(831px) !important; }
  .skyrim-top-nav .switch-logo {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 74px;
    height: 74px; }

.button-toggle-wrap {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: none;
  position: absolute;
  top: 100px;
  left: 15px;
  z-index: 30;
  transform: translate3d(0, -1, 0);
  width: 40px;
  height: 34px; }
  .button-toggle-wrap .background {
    background: url("../images/common/mobile-nav-bg.png") center center no-repeat;
    width: 118px;
    height: 50px;
    position: absolute;
    top: -5px;
    left: -45px;
    opacity: 1;
    transition: all 200ms ease; }
  .button-toggle-wrap .line {
    position: relative;
    width: 30px;
    height: 4px;
    left: -1px;
    background-color: #FFFFFF;
    display: block;
    margin: 5px auto;
    border-radius: 2px;
    transition: all 0.5s ease;
    top: 4px; }
  .button-toggle-wrap.is-fixed {
    position: fixed;
    transform: translate3d(0, 0, 0);
    top: 15px; }
  .button-toggle-wrap.is-active .background {
    opacity: 0; }
  .button-toggle-wrap.is-active .button-toggle .line {
    background-color: #FFFFFF; }
    .button-toggle-wrap.is-active .button-toggle .line:first-child {
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 15px; }
    .button-toggle-wrap.is-active .button-toggle .line:nth-child(2) {
      -ms-transform: scaleX(0);
      transform: scaleX(0); }
    .button-toggle-wrap.is-active .button-toggle .line:last-child {
      top: -3px;
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
  @media (max-width: 1023px) {
    .button-toggle-wrap {
      display: block; } }

.button-toggle {
  position: relative;
  display: block;
  cursor: pointer; }

.mobile-overlay {
  position: absolute;
  top: 0;
  left: -200vw;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 29;
  transform: translate3d(0, -1, 0);
  transition: opacity 500ms ease;
  padding-top: 140px;
  background-color: rgba(0, 0, 0, 0.85); }
  .mobile-overlay .buttons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column; }
  .mobile-overlay.is-fixed {
    position: fixed;
    transform: translate3d(0, 0, 0);
    top: 0px;
    padding-top: 60px; }
  .mobile-overlay .button-2 {
    width: 320px;
    margin: 10px auto;
    font-size: 1.3em; }
    .mobile-overlay .button-2 .center {
      padding: 15px 5px 13px 5px; }
  @media (max-width: 1023px) {
    .mobile-overlay.is-active {
      top: 0;
      left: 0;
      display: block;
      transform: translate3d(0, -1, 0);
      opacity: 1; } }
  @media (max-width: 767px) {
    .mobile-overlay {
      overflow: scroll; } }

.footer {
  width: 100%;
  padding: 0 0px 0px 0px;
  text-align: center;
  position: relative;
  min-height: 350px;
  background: url("../images/common/footer-bg.jpg") center center no-repeat;
  background-size: cover; }
  .footer .footer-btns {
    margin: 0 auto;
    padding-top: 50px;
    width: 750px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin-bottom: 30px; }
    @media (max-width: 767px) {
      .footer .footer-btns {
        -ms-flex-direction: column;
        flex-direction: column; } }
  .footer .bethesda-logo {
    text-align: center;
    margin: 50px auto 30px auto; }
  .footer .disclaimer {
    margin: 10px auto 20px;
    color: #FFFFFF;
    font-size: 0.9em; }
  .footer .legal {
    width: 100%;
    max-width: 900px;
    margin: 10px auto 20px;
    height: 62px;
    position: relative;
    color: #9ab1c1;
    font-size: 0.9em; }
  @media (max-width: 767px) {
    .footer .footer-btns {
      width: 100%;
      max-width: 500px;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      .footer .footer-btns .button-2 {
        margin: 20px auto; } }

.age-gate {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  opacity: 0;
  transition: opacity 300ms ease; }
  @media (max-height: 550px) {
    .age-gate {
      position: absolute;
      overflow: visible; } }
  .age-gate .content {
    width: 100%;
    height: 100%;
    min-height: 725px;
    position: relative; }
    .age-gate .content .background {
      background: url("../images/common/age-bg.jpg") center center no-repeat;
      background-size: cover;
      width: 100vw;
      height: 100%;
      min-height: 632px;
      position: relative; }
    .age-gate .content .center-content {
      top: 172px;
      position: absolute;
      text-align: center;
      margin: 0 auto;
      left: 0;
      right: 0; }
    .age-gate .content .shake-content {
      opacity: 0; }
    .age-gate .content .logo {
      background: url("../images/common/silver-logo.png") center center no-repeat;
      background-size: cover;
      position: relative;
      width: 43.88vw;
      height: 12.66vw;
      max-width: 790px;
      max-height: 228px;
      margin: 0 auto;
      min-width: 395px;
      min-height: 114px; }
      @media (max-width: 767px) {
        .age-gate .content .logo {
          min-width: 320px;
          min-height: 92px; } }
    .age-gate .content p {
      margin: 20px auto 20px auto;
      color: #7c878d; }
      .age-gate .content p#message {
        display: block; }
      .age-gate .content p#error {
        display: none;
        color: #ff0000; }
      .age-gate .content p#fail {
        display: none; }
    .age-gate .content .date-of-birth {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      margin: 20px auto 30px auto;
      position: relative; }
      .age-gate .content .date-of-birth input {
        background: transparent;
        border: none;
        color: #7c878d;
        font-size: 1.6em;
        font-family: "Fondamento", cursive;
        position: absolute;
        top: 18px;
        text-align: center; }
        .age-gate .content .date-of-birth input#month {
          left: 18px;
          width: 100px; }
        .age-gate .content .date-of-birth input#day {
          position: absolute;
          left: 50%;
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          width: 80px; }
        .age-gate .content .date-of-birth input#year {
          right: 20px;
          width: 100px; }
        .age-gate .content .date-of-birth input:focus {
          outline: none; }
    .age-gate .content .feature-bottom-bar {
      width: 100%;
      position: absolute;
      bottom: 0;
      pointer-events: none; }
      .age-gate .content .feature-bottom-bar .feature-bottom-dragon {
        background: url("../images/home/dragon-emblem.png") center center no-repeat;
        width: 207px;
        height: 311px;
        pointer-events: none;
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: -150px; }

.gradient {
  width: 100%;
  height: 200px;
  position: relative;
  pointer-events: none; }
  .gradient .fill {
    background: linear-gradient(to top, #121212, rgba(18, 18, 18, 0));
    position: absolute;
    bottom: 70px;
    width: 100%;
    height: 500px;
    pointer-events: none; }

.image-player-module {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
  overflow: hidden; }
  .image-player-module .image-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 1200px;
    width: 100%;
    height: auto; }
    .image-player-module .image-frame.small {
      max-width: 800px; }
  .image-player-module.is-showing {
    display: block; }
  .image-player-module .image-back-click {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.88;
    background-color: #000000; }
  .image-player-module .image-player-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 1200px;
    width: 100%;
    height: auto;
    background-color: #000000;
    top: 50%;
    border: solid 3px #3e3e3e;
    border-radius: 2px; }
    .image-player-module .image-player-wrap .viewer-left-wrapper {
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      left: -35px;
      cursor: pointer; }
      @media (max-width: 1365px) {
        .image-player-module .image-player-wrap .viewer-left-wrapper {
          left: 30px; } }
      .image-player-module .image-player-wrap .viewer-left-wrapper .carousel-left {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 1;
        transition: opacity 200ms ease; }
      .image-player-module .image-player-wrap .viewer-left-wrapper .carousel-left-over {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 200ms ease; }
      .image-player-module .image-player-wrap .viewer-left-wrapper:hover .carousel-left {
        opacity: 0; }
      .image-player-module .image-player-wrap .viewer-left-wrapper:hover .carousel-left-over {
        opacity: 1; }
    .image-player-module .image-player-wrap .viewer-right-wrapper {
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      right: -35px;
      cursor: pointer; }
      @media (max-width: 1365px) {
        .image-player-module .image-player-wrap .viewer-right-wrapper {
          right: 30px; } }
      .image-player-module .image-player-wrap .viewer-right-wrapper .carousel-right {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 1;
        transition: opacity 200ms ease; }
      .image-player-module .image-player-wrap .viewer-right-wrapper .carousel-right-over {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 200ms ease; }
      .image-player-module .image-player-wrap .viewer-right-wrapper:hover .carousel-right {
        opacity: 0; }
      .image-player-module .image-player-wrap .viewer-right-wrapper:hover .carousel-right-over {
        opacity: 1; }
  .image-player-module #image-player {
    max-width: 1200px;
    width: 100%;
    height: auto; }
    .image-player-module #image-player img {
      max-width: 1200px;
      width: 100%;
      height: auto; }
  .image-player-module .close-btn {
    width: 63px;
    height: 56px;
    position: absolute;
    top: -82px;
    right: 5px;
    z-index: 20000;
    display: block;
    cursor: pointer; }
    .image-player-module .close-btn .close-button-bg {
      position: absolute;
      top: 0;
      left: 0;
      background: transparent url("../images/common/close-button.png") 0 0 no-repeat;
      width: 63px;
      height: 56px;
      opacity: 1;
      transition: opacity 500ms ease; }
    .image-player-module .close-btn .close-button-bg-over {
      position: absolute;
      top: 0;
      left: 0;
      background: transparent url("../images/common/close-button-over.png") 0 0 no-repeat;
      width: 63px;
      height: 56px;
      opacity: 0;
      transition: opacity 500ms ease; }
    .image-player-module .close-btn:hover .close-button-bg {
      opacity: 0; }
    .image-player-module .close-btn:hover .close-button-bg-over {
      opacity: 1; }
  @media (max-height: 850px) {
    .image-player-module .close-btn {
      top: 5px;
      right: 5px; } }
  @media (max-height: 700px) {
    .image-player-module .close-btn {
      top: 5px;
      right: 5px; }
    .image-player-module .image-player-wrap {
      max-width: 740px; } }
  @media (max-height: 500px) {
    .image-player-module .close-btn {
      top: 5px;
      right: 5px; }
    .image-player-module .image-player-wrap {
      max-width: 540px; } }
  @media (max-width: 767px) {
    .image-player-module .close-btn {
      top: -82px;
      right: 5px; } }
  .image-player-module .choices-image {
    background-size: cover;
    width: calc( 100vw - 6px );
    height: calc( 56.27vw - 6px );
    max-width: 1500px;
    max-height: 844px; }
    .image-player-module .choices-image.choices-1 {
      background-image: url("https://media.nintendo.com/skyrim/assets/images/getting-started/choices/img-1.jpg"); }
    .image-player-module .choices-image.choices-2 {
      background-image: url("https://media.nintendo.com/skyrim/assets/images/getting-started/choices/img-2.jpg"); }
    .image-player-module .choices-image.choices-3 {
      background-image: url("https://media.nintendo.com/skyrim/assets/images/getting-started/choices/img-3.jpg"); }
  .image-player-module .adventure-image {
    background-size: cover;
    width: calc( 100vw - 6px );
    height: calc( 56.27vw - 6px );
    max-width: 1500px;
    max-height: 844px; }
    .image-player-module .adventure-image.adventure-1 {
      background-image: url("https://media.nintendo.com/skyrim/assets/images/getting-started/adventures/img-1.jpg"); }
    .image-player-module .adventure-image.adventure-2 {
      background-image: url("https://media.nintendo.com/skyrim/assets/images/getting-started/adventures/img-2.jpg"); }
    .image-player-module .adventure-image.adventure-3 {
      background-image: url("https://media.nintendo.com/skyrim/assets/images/getting-started/adventures/img-3.jpg"); }

.video-player-module {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
  overflow: hidden; }
  .video-player-module.is-showing {
    display: block; }
  .video-player-module .back-click {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.88; }
  .video-player-module .video-player-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 45.20vw;
    max-width: 1000px;
    max-height: 565px;
    background-color: #3e3e3e;
    top: calc( 50% + 40px );
    border: solid 3px #3e3e3e;
    box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.2); }
    @media (max-height: 700px) {
      .video-player-module .video-player-wrap {
        max-width: 786px;
        max-height: 444px; } }
  .video-player-module #video-player {
    width: 100%;
    height: 100%; }
  .video-player-module .close-btn {
    width: 63px;
    height: 56px;
    position: absolute;
    top: -82px;
    right: 5px;
    z-index: 20000;
    display: block;
    cursor: pointer; }
    .video-player-module .close-btn .close-button-bg {
      position: absolute;
      top: 0;
      left: 0;
      background: transparent url("../images/common/close-button.png") 0 0 no-repeat;
      width: 63px;
      height: 56px;
      opacity: 1;
      transition: opacity 500ms ease; }
    .video-player-module .close-btn .close-button-bg-over {
      position: absolute;
      top: 0;
      left: 0;
      background: transparent url("../images/common/close-button-over.png") 0 0 no-repeat;
      width: 63px;
      height: 56px;
      opacity: 0;
      transition: opacity 500ms ease; }
    .video-player-module .close-btn:hover .close-button-bg {
      opacity: 0; }
    .video-player-module .close-btn:hover .close-button-bg-over {
      opacity: 1; }

.home-page .top-feature {
  position: relative;
  width: 100%;
  height: calc( 100vh - 72px - 38px );
  min-height: 630px; }
  .home-page .top-feature .background {
    width: 100%;
    height: calc( 100vh - 72px - 38px );
    min-height: 602px;
    position: relative;
    max-height: none; }
    .home-page .top-feature .background .video-wrapper img, .home-page .top-feature .background .video-wrapper video {
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: auto;
      height: auto;
      min-width: 100%;
      min-height: 100%;
      max-height: none;
      max-width: none; }
  .home-page .top-feature .logo {
    background: url("../images/home/black-logo.png") center center no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 220px;
    width: 43.72vw;
    height: 12.72vw;
    max-width: 787px;
    max-height: 229px; }
    @media (max-width: 767px) {
      .home-page .top-feature .logo {
        width: 87.44vw;
        height: 25.44vw;
        max-width: 335px;
        max-height: 97px; } }
  .home-page .top-feature .esrb-logo {
    max-width: none; }
  .home-page .top-feature .trailer-button {
    min-width: 255px;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 73%;
    left: calc( 50% - 20px ); }
    @media (max-height: 850px) {
      .home-page .top-feature .trailer-button {
        top: 64%; } }
  .home-page .top-feature .feature-bottom-bar {
    width: 100%;
    position: absolute;
    bottom: -38px;
    z-index: 1; }
    .home-page .top-feature .feature-bottom-bar .feature-bottom-dragon {
      background: url("../images/home/dragon-emblem.png") center center no-repeat;
      width: 207px;
      height: 311px;
      position: absolute;
      left: 50%;
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      bottom: -150px;
      z-index: 1; }
.home-page .awards {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #000000;
  padding: 0 20px;
  width: 100%;
  height: 621px;
  position: relative; }
  .home-page .awards .background {
    width: 100%;
    height: 583px;
    background: #000000 url("../images/home/awards-bg.jpg") center center no-repeat;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 38px;
    z-index: 0; }
  .home-page .awards .two-column {
    position: relative;
    width: 100%; }
    .home-page .awards .two-column .column {
      position: relative;
      width: 50%;
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
      text-align: center; }
      .home-page .awards .two-column .column.text-column {
        margin-top: 80px; }
        .home-page .awards .two-column .column.text-column h1 {
          font-size: 1.5em; }
        .home-page .awards .two-column .column.text-column span.strong {
          color: #FFFFFF; }
        .home-page .awards .two-column .column.text-column p {
          max-width: 550px;
          margin: 0 auto; }
        .home-page .awards .two-column .column.text-column .slash-divider {
          width: 100%; }
      .home-page .awards .two-column .column .smoke-bg {
        background: transparent url("../images/home/box-fog.png") center center no-repeat;
        width: 566px;
        height: 444px;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
      .home-page .awards .two-column .column img.box-art {
        position: relative;
        margin: 0 auto; }
    @media (max-width: 767px) {
      .home-page .awards .two-column {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        .home-page .awards .two-column .column {
          width: 100%;
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%; } }
  @media (max-width: 767px) {
    .home-page .awards {
      height: auto; }
      .home-page .awards .background {
        height: calc( 100% - 38px );
        background-size: auto 100%;
        opacity: .5; }
      .home-page .awards .two-column .column img.box-art {
        margin-top: 150px; } }
.home-page .add-ons {
  margin: 70px 20px; }
  .home-page .add-ons .column {
    text-align: center;
    padding: 0 10px; }
    @media (min-width: 768px) {
      .home-page .add-ons .column {
        width: 30%;
        -ms-flex-preferred-size: 30%;
        flex-basis: 30%; } }
    .home-page .add-ons .column img {
      width: 100%;
      height: auto;
      max-width: 332px; }
  .home-page .add-ons p {
    max-width: 320px;
    margin: 30px auto;
    color: #bfc5c8; }
  .home-page .add-ons .framed-media {
    position: relative;
    margin-bottom: 100px; }
  .home-page .add-ons .dawnguard-screen {
    background: url("../images/home/screen1.jpg") center center no-repeat; }
  .home-page .add-ons .hearthfire-screen {
    background: url("../images/home/screen2.jpg") center center no-repeat; }
  .home-page .add-ons .dragonborn-screen {
    background: url("../images/home/screen3.jpg") center center no-repeat; }
.home-page section.switch {
  max-width: 1300px;
  margin: 50px auto 80px auto; }
  .home-page section.switch h1 {
    font-size: 2.5em;
    margin-bottom: 10px; }
  .home-page section.switch p {
    font-size: 1.5em;
    max-width: 550px;
    margin: 0 auto; }
  .home-page section.switch .slideshow {
    display: -ms-flexbox;
    display: flex;
    margin-top: 50px; }
    @media (max-width: 1023px) {
      .home-page section.switch .slideshow {
        display: none; } }
    .home-page section.switch .slideshow .image-content {
      width: 50%;
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
      margin: 0 20px 30px 20px; }
      .home-page section.switch .slideshow .image-content .selected-image {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        position: relative; }
        .home-page section.switch .slideshow .image-content .selected-image img {
          top: 0;
          width: 100%;
          height: auto;
          opacity: 0;
          margin: 0; }
          .home-page section.switch .slideshow .image-content .selected-image img.is-visible {
            opacity: 1; }
      .home-page section.switch .slideshow .image-content .thumbnail-images {
        width: 100%;
        height: auto;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap; }
        .home-page section.switch .slideshow .image-content .thumbnail-images .thumbnail-wrapper {
          width: 30%;
          -ms-flex-preferred-size: 30%;
          flex-basis: 30%;
          height: auto;
          position: relative;
          text-align: center;
          z-index: 5; }
          .home-page section.switch .slideshow .image-content .thumbnail-images .thumbnail-wrapper img {
            width: 100%;
            height: auto;
            max-width: 150px;
            max-height: 94px; }
          .home-page section.switch .slideshow .image-content .thumbnail-images .thumbnail-wrapper .small-rect-frame {
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            opacity: 1;
            transition: opacity 300ms ease; }
          .home-page section.switch .slideshow .image-content .thumbnail-images .thumbnail-wrapper .small-rect-frame-selected {
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 300ms ease; }
          .home-page section.switch .slideshow .image-content .thumbnail-images .thumbnail-wrapper .blackout {
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background-color: #000000;
            opacity: 0.5;
            width: 100%;
            height: 100%;
            transition: opacity 300ms ease;
            max-width: 150px;
            max-height: 94px; }
          .home-page section.switch .slideshow .image-content .thumbnail-images .thumbnail-wrapper:hover, .home-page section.switch .slideshow .image-content .thumbnail-images .thumbnail-wrapper.is-selected {
            cursor: pointer; }
            .home-page section.switch .slideshow .image-content .thumbnail-images .thumbnail-wrapper:hover .blackout, .home-page section.switch .slideshow .image-content .thumbnail-images .thumbnail-wrapper.is-selected .blackout {
              opacity: 0; }
          .home-page section.switch .slideshow .image-content .thumbnail-images .thumbnail-wrapper.is-selected .small-rect-frame-selected {
            opacity: 1; }
          .home-page section.switch .slideshow .image-content .thumbnail-images .thumbnail-wrapper.is-selected .small-rect-frame {
            opacity: 0; }
    .home-page section.switch .slideshow .text-content-wrap {
      width: 50%;
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
      padding: 10px; }
      @media (max-width: 1365px) {
        .home-page section.switch .slideshow .text-content-wrap {
          font-size: 0.9em; } }
    .home-page section.switch .slideshow .text-content {
      margin: 0 0 30px 0;
      padding: 0 20px 0 20px;
      -ms-flex-positive: 1;
      flex-grow: 1;
      height: 355px;
      display: none;
      max-width: 700px; }
      .home-page section.switch .slideshow .text-content.is-visible {
        display: block; }
      .home-page section.switch .slideshow .text-content .center-content {
        width: 100%;
        text-align: center; }
        .home-page section.switch .slideshow .text-content .center-content .button-2 {
          margin: 10px auto; }
      .home-page section.switch .slideshow .text-content h3 {
        font-family: "Bellefair", serif;
        color: #FFFFFF;
        text-align: left;
        margin: 0 0 30px 0;
        max-width: none; }
      .home-page section.switch .slideshow .text-content p {
        color: #bfc5c8;
        text-align: left;
        max-width: none;
        margin-bottom: 20px; }
  .home-page section.switch .slideshow-fallback {
    display: none;
    text-align: center;
    position: relative; }
    .home-page section.switch .slideshow-fallback .column {
      margin-bottom: 30px; }
    .home-page section.switch .slideshow-fallback figcaption {
      max-width: 460px;
      font-size: 0.9em; }
    .home-page section.switch .slideshow-fallback h3 {
      font-family: "Bellefair", serif;
      color: #FFFFFF;
      max-width: none; }
    .home-page section.switch .slideshow-fallback p {
      color: #bfc5c8;
      max-width: none;
      margin: 10px auto; }
    @media (max-width: 1023px) {
      .home-page section.switch .slideshow-fallback {
        display: block; } }
.home-page .bottom-promo {
  position: relative;
  width: 768px;
  margin: 20px auto;
  height: 400px; }
  @media (max-width: 1023px) {
    .home-page .bottom-promo {
      -ms-transform: scale(0.8);
      transform: scale(0.8); } }
  @media (max-width: 767px) {
    .home-page .bottom-promo {
      width: 100%;
      -ms-transform: scale(1);
      transform: scale(1);
      margin-bottom: 180px; } }
  .home-page .bottom-promo .slash-divider {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0; }
    @media (max-width: 767px) {
      .home-page .bottom-promo .slash-divider {
        display: none; } }
  .home-page .bottom-promo .box-art {
    background: url("../images/home/box-art.png") center center no-repeat;
    width: 265px;
    height: 380px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .home-page .bottom-promo p.disclaimer {
    color: #9ab1c1;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 355px;
    left: 49%;
    font-size: 0.9em;
    width: 90%; }
  .home-page .bottom-promo .switch-hardware {
    background: url("../images/home/switch-hardware.png") center center no-repeat;
    width: 353px;
    height: 210px;
    position: absolute;
    top: 110px;
    right: -100px; }
    @media (max-width: 767px) {
      .home-page .bottom-promo .switch-hardware {
        display: none; } }
  .home-page .bottom-promo .buy-button {
    position: absolute;
    top: 230px;
    left: -30px;
    min-width: 285px; }
    @media (max-width: 767px) {
      .home-page .bottom-promo .buy-button {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 470px; } }
  .home-page .bottom-promo h3 {
    position: absolute;
    top: 140px;
    left: 13px;
    width: auto;
    text-align: center; }
    @media (max-width: 767px) {
      .home-page .bottom-promo h3 {
        position: relative;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 400px;
        width: 100%;
        text-align: center;
        transform: translateX(-50%) !important; } }

.welcome-page .character-creation {
  margin: 70px auto; }
  .welcome-page .character-creation p {
    max-width: 500px;
    margin: 30px auto;
    padding: 0 10px; }
  .welcome-page .character-creation p.description {
    max-width: 650px;
    margin: 20px auto 40px auto;
    font-size: 1.6em; }
.welcome-page .character-carousel {
  padding-top: 25px;
  position: relative; }
  .welcome-page .character-carousel .name-box {
    background: transparent url("../images/welcome-to-skyrim/carousel-name-box.jpg") 0 0 no-repeat;
    width: 280px;
    height: 91px;
    margin: 0 auto;
    position: relative;
    top: 10px; }
    .welcome-page .character-carousel .name-box span {
      font-family: "Bellefair", serif;
      display: block;
      text-align: center;
      color: #fff;
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 100%;
      opacity: 0;
      padding: 0 10px;
      font-size: 1.7em; }
      .welcome-page .character-carousel .name-box span.is-active {
        transition: opacity 1s ease;
        opacity: 1; }
  .welcome-page .character-carousel .character-wrap {
    position: relative;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    max-width: 635px; }
    .welcome-page .character-carousel .character-wrap .characters {
      position: relative;
      padding-top: 66%; }
      .welcome-page .character-carousel .character-wrap .characters .character-image {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%;
        height: auto;
        opacity: 0;
        margin: 0; }
        .welcome-page .character-carousel .character-wrap .characters .character-image.is-active {
          transition: opacity 1s ease;
          opacity: 1; }
  .welcome-page .character-carousel .carousel-left-wrapper {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: -35px;
    cursor: pointer; }
    @media (max-width: 767px) {
      .welcome-page .character-carousel .carousel-left-wrapper {
        left: 30px; } }
    .welcome-page .character-carousel .carousel-left-wrapper .carousel-left {
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 1;
      transition: opacity 200ms ease; }
    .welcome-page .character-carousel .carousel-left-wrapper .carousel-left-over {
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 200ms ease; }
    .welcome-page .character-carousel .carousel-left-wrapper:hover .carousel-left {
      opacity: 0; }
    .welcome-page .character-carousel .carousel-left-wrapper:hover .carousel-left-over {
      opacity: 1; }
  .welcome-page .character-carousel .carousel-right-wrapper {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: -35px;
    cursor: pointer; }
    @media (max-width: 767px) {
      .welcome-page .character-carousel .carousel-right-wrapper {
        right: 30px; } }
    .welcome-page .character-carousel .carousel-right-wrapper .carousel-right {
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 1;
      transition: opacity 200ms ease; }
    .welcome-page .character-carousel .carousel-right-wrapper .carousel-right-over {
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 200ms ease; }
    .welcome-page .character-carousel .carousel-right-wrapper:hover .carousel-right {
      opacity: 0; }
    .welcome-page .character-carousel .carousel-right-wrapper:hover .carousel-right-over {
      opacity: 1; }
  .welcome-page .character-carousel .desc-box {
    position: relative;
    top: -10px;
    background: transparent url("../images/welcome-to-skyrim/carousel-desc-box.jpg") 0 0 no-repeat;
    width: 510px;
    height: 123px;
    margin: 0 auto; }
    .welcome-page .character-carousel .desc-box span.description {
      padding: 0 30px;
      font-family: "Bellefair", serif;
      font-size: 1.3em;
      color: #fff;
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 100%;
      display: block;
      text-align: center;
      opacity: 0; }
      .welcome-page .character-carousel .desc-box span.description.is-active {
        transition: opacity 1s ease;
        opacity: 1; }
    @media (max-width: 510px) {
      .welcome-page .character-carousel .desc-box {
        width: 100%;
        height: auto;
        background: none; }
        .welcome-page .character-carousel .desc-box span.description {
          position: relative;
          -ms-transform: none;
          transform: none;
          top: 0;
          bottom: 0;
          display: none; }
          .welcome-page .character-carousel .desc-box span.description.is-active {
            display: block; } }
  .welcome-page .character-carousel .selectors {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 90px; }
    .welcome-page .character-carousel .selectors > div {
      position: relative;
      cursor: pointer;
      width: 11px;
      height: 11px;
      margin: 5px;
      background: transparent url("../images/welcome-to-skyrim/bullet-idle.png") 0 0 no-repeat; }
      .welcome-page .character-carousel .selectors > div:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 11px;
        height: 11px;
        background: transparent url("../images/welcome-to-skyrim/bullet-active.png") 0 0 no-repeat;
        opacity: 0; }
      .welcome-page .character-carousel .selectors > div.is-active:after {
        transition: opacity 1s ease;
        opacity: 1; }
.welcome-page .explore .fill-media .text-overlay {
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 10%; }
  @media (max-width: 767px) {
    .welcome-page .explore .fill-media .text-overlay {
      position: relative;
      left: 0;
      top: 0;
      margin: 0 auto;
      width: 100%;
      -ms-transform: none;
      transform: none; } }

.getting-started-page figcaption {
  max-width: 360px; }
.getting-started-page .step-into {
  margin: 70px auto; }
  .getting-started-page .step-into > p {
    max-width: 500px;
    margin: 0 auto 35px; }
  .getting-started-page .step-into .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 20%; }
    @media (max-width: 767px) {
      .getting-started-page .step-into .text-overlay {
        position: relative;
        left: 0;
        top: 0;
        margin: 0 auto;
        width: 100%;
        -ms-transform: none;
        transform: none; } }
.getting-started-page .choices > p {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 10px; }
.getting-started-page .choices .column {
  text-align: center; }
.getting-started-page .adventure > p {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 10px; }
.getting-started-page .adventure .column {
  text-align: center; }
.getting-started-page .combat > p {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 10px; }
.getting-started-page .combat .column {
  text-align: center; }
.getting-started-page .controls p {
  max-width: 700px;
  margin: 0 auto 40px auto;
  padding: 0 10px; }
.getting-started-page .voice > p {
  max-width: 600px;
  margin: 20px auto;
  padding: 0 10px; }
.getting-started-page .voice .video {
  text-align: center;
  margin: 20px auto 50px auto; }

.amiibo-page .bg-textures .leather-texture {
  transition: opacity 200ms ease;
  opacity: 0; }
.amiibo-page .black-bg {
  background-color: #121212; }
  .amiibo-page .black-bg .top-feature .bottom-gradient {
    background-image: linear-gradient(to bottom, rgba(18, 18, 18, 0), #121212); }
  .amiibo-page .black-bg .top-feature .side-gradient-wrapper .side-gradient {
    background-image: radial-gradient(rgba(18, 18, 18, 0) 60%, #121212 70%); }
  .amiibo-page .black-bg .top-feature .side-gradient-wrapper .left-gradient {
    background-image: linear-gradient(to left, rgba(18, 18, 18, 0), #121212); }
  .amiibo-page .black-bg .top-feature .side-gradient-wrapper .right-gradient {
    background-image: linear-gradient(to right, rgba(18, 18, 18, 0), #121212); }
.amiibo-page .intro {
  padding-top: 70px;
  background-color: rgba(18, 18, 18, 0.7); }
.amiibo-page .center {
  text-align: center;
  margin: 0 auto; }
.amiibo-page .characters {
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 1276px;
  text-align: center;
  margin: 40px auto 0 auto; }
  .amiibo-page .characters > p {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 20px; }
  .amiibo-page .characters .smoke-bg {
    width: 100%;
    height: auto; }
    .amiibo-page .characters .smoke-bg img {
      width: 100%;
      height: auto; }
  .amiibo-page .characters .character-wrapper {
    max-width: 1276px; }
    .amiibo-page .characters .character-wrapper .character {
      width: 22.10vw;
      height: 28.49vw;
      max-width: 282px;
      max-height: 363px;
      position: absolute;
      top: 0;
      left: 0; }
      .amiibo-page .characters .character-wrapper .character.character-1 {
        background: url("../images/amiibo/character-1.png") center center no-repeat;
        background-size: cover;
        top: 14.50vw;
        left: 33.70vw;
        z-index: 2; }
      .amiibo-page .characters .character-wrapper .character.character-2 {
        background: url("../images/amiibo/character-2.png") center center no-repeat;
        background-size: cover;
        top: 1.57vw;
        left: 39.97vw; }
      .amiibo-page .characters .character-wrapper .character.character-3 {
        background: url("../images/amiibo/character-3.png") center center no-repeat;
        background-size: cover;
        top: 10.19vw;
        left: 0.39vw;
        z-index: 2; }
      .amiibo-page .characters .character-wrapper .character.character-4 {
        background: url("../images/amiibo/character-4.png") center center no-repeat;
        background-size: cover;
        top: 2.74vw;
        left: 20.37vw;
        z-index: 2; }
      .amiibo-page .characters .character-wrapper .character.character-5 {
        background: url("../images/amiibo/character-5.png") center center no-repeat;
        background-size: cover;
        top: 1.96vw;
        left: 7.84vw; }
      .amiibo-page .characters .character-wrapper .character.character-6 {
        background: url("../images/amiibo/character-6.png") center center no-repeat;
        background-size: cover;
        top: 10.97vw;
        left: auto !important;
        right: 0.05vw;
        z-index: 2; }
      .amiibo-page .characters .character-wrapper .character.character-7 {
        background: url("../images/amiibo/character-7.png") center center no-repeat;
        background-size: cover;
        top: 1.57vw;
        right: 8.28vw;
        left: auto !important; }
      @media (min-width: 1276px) {
        .amiibo-page .characters .character-wrapper .character.character-1 {
          top: 185px;
          left: 430px; }
        .amiibo-page .characters .character-wrapper .character.character-2 {
          top: 20px;
          left: 510px; }
        .amiibo-page .characters .character-wrapper .character.character-3 {
          top: 130px;
          left: -5px; }
        .amiibo-page .characters .character-wrapper .character.character-4 {
          top: 35px;
          left: 260px; }
        .amiibo-page .characters .character-wrapper .character.character-5 {
          top: 25px;
          left: 100px; }
        .amiibo-page .characters .character-wrapper .character.character-6 {
          top: 140px;
          right: 20px; }
        .amiibo-page .characters .character-wrapper .character.character-7 {
          top: 20px;
          right: 195px; } }
.amiibo-page .test {
  position: relative;
  text-align: center;
  margin: 200px auto; }
  .amiibo-page .test .smoke {
    background: transparent url("../images/smoke/smoke-sprite-3.png") top center;
    width: 60px;
    height: 45px;
    animation: smoke-loop 6000ms steps(65) infinite;
    -ms-transform: scaleX(10) scaleY(-7);
    transform: scaleX(10) scaleY(-7);
    margin: 200px auto; }
@keyframes smoke-loop {
  100% {
    background-position: 0 -2925px; } }
.amiibo-page .gear {
  margin-bottom: 70px;
  text-align: center; }
  .amiibo-page .gear > p {
    padding: 10px 20px; }

.buy-page .retail-edition {
  max-width: 1024px;
  margin: 20px auto;
  width: 100%; }
  .buy-page .retail-edition .column {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center; }
  .buy-page .retail-edition .content {
    position: relative; }
  .buy-page .retail-edition img.box-art {
    width: 100%;
    height: auto;
    max-width: 566px;
    margin: 20px auto; }
  .buy-page .retail-edition p {
    width: 270px; }
  .buy-page .retail-edition .slash-divider {
    margin: 0 auto;
    width: 512px;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  .buy-page .retail-edition .flags {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin: 20px auto; }
    @media (max-width: 1023px) {
      .buy-page .retail-edition .flags {
        max-width: 512px; } }
    @media (max-width: 767px) {
      .buy-page .retail-edition .flags {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
  .buy-page .retail-edition .framed-media {
    transition: transform 300ms ease;
    cursor: pointer; }
    .buy-page .retail-edition .framed-media:hover {
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
.buy-page .digital-edition {
  max-width: 1024px;
  margin: 0 auto; }
  .buy-page .digital-edition .column {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center; }
  .buy-page .digital-edition .content {
    position: relative;
    text-align: center; }
  .buy-page .digital-edition img.dragon {
    width: 100%;
    height: auto;
    max-width: 566px;
    margin: 20px auto; }
  .buy-page .digital-edition p {
    margin: 20px auto; }
  .buy-page .digital-edition .slash-divider {
    margin: 0 auto;
    width: 512px;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  .buy-page .digital-edition .framed-media {
    background-color: #000000;
    margin: 20px auto 40px auto; }
    .buy-page .digital-edition .framed-media .price {
      color: #FFFFFF;
      padding: 10px 30px;
      font-size: 1.8em; }
      @media (max-width: 767px) {
        .buy-page .digital-edition .framed-media .price {
          padding: 10px; } }
.buy-page .eshop {
  text-align: center;
  margin: 20px auto; }
  .buy-page .eshop img {
    width: 100%;
    height: auto;
    max-width: 375px; }
.buy-page .my-nintendo {
  text-align: center;
  margin: 20px auto 50px auto; }
  .buy-page .my-nintendo .two-column {
    -ms-flex-pack: center;
    justify-content: center; }
    .buy-page .my-nintendo .two-column .column {
      margin: 10px;
      width: auto;
      -ms-flex-preferred-size: auto;
      flex-basis: auto;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-pack: center;
      justify-content: center; }

.leveling-page .skill-tree {
  margin: 40px auto; }
  .leveling-page .skill-tree > p {
    max-width: 500px;
    margin: 10px auto 45px; }
  .leveling-page .skill-tree .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    @media (max-width: 767px) {
      .leveling-page .skill-tree .text-overlay {
        position: relative;
        left: 0;
        top: 0;
        margin: 0 auto;
        width: 100%;
        -ms-transform: none;
        transform: none; } }
.leveling-page .crafty > p {
  max-width: 600px;
  margin: 0 auto; }
.leveling-page .crafty .column {
  text-align: center; }
.leveling-page .alchemy > p {
  max-width: 600px;
  margin: 0 auto; }
.leveling-page .alchemy .column {
  text-align: center; }
.leveling-page .house {
  margin: 70px auto 0 auto; }
  .leveling-page .house > p {
    max-width: 500px;
    margin: 0 auto 25px; }
    .leveling-page .house > p.last {
      margin-bottom: 55px; }
  .leveling-page .house .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    @media (max-width: 767px) {
      .leveling-page .house .text-overlay {
        position: relative;
        left: 0;
        top: 0;
        margin: 0 auto;
        width: 100%;
        -ms-transform: none;
        transform: none; } }

.fr .age-gate .content .date-of-birth input#month {
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }
.fr .age-gate .content .date-of-birth input#day {
  left: 18px;
  -ms-transform: translateX(0);
  transform: translateX(0); }
.fr .skyrim-top-nav .buttons .nav-button {
  padding: 24px 18px 15px 18px; }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(1).is-active ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(43px);
  transform: translateX(43px); }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(2).is-active ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(200px);
  transform: translateX(200px); }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(3).is-active ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(373px);
  transform: translateX(373px); }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(4).is-active ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(520px);
  transform: translateX(520px); }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(5).is-active ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(658px);
  transform: translateX(658px); }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(6).is-active ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(800px);
  transform: translateX(800px); }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(1):hover ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(43px) !important;
  transform: translateX(43px) !important; }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(2):hover ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(200px) !important;
  transform: translateX(200px) !important; }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(3):hover ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(373px) !important;
  transform: translateX(373px) !important; }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(4):hover ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(520px) !important;
  transform: translateX(520px) !important; }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(5):hover ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(658px) !important;
  transform: translateX(658px) !important; }
.fr .skyrim-top-nav .buttons .nav-button:nth-child(6):hover ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(800px) !important;
  transform: translateX(800px) !important; }
@media (max-width: 767px) {
  .fr .home-page .top-feature .button-1 .center {
    font-size: 0.8em;
    padding: 22px 5px 17px 0px; } }
.fr .home-page .bottom-promo .buy-button {
  font-size: 1.4em; }
.fr .home-page .bottom-promo h3 {
  font-size: 1.6em; }
@media (min-width: 768px) {
  .fr .home-page .bottom-promo .buy-button {
    left: -116px; }
  .fr .home-page .bottom-promo h3 {
    left: -66px; } }
@media (max-width: 767px) {
  .fr .home-page .bottom-promo .buy-button {
    font-size: 1.2em;
    top: 450px; }
  .fr .home-page .buy-button {
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -70px;
    width: 340px;
    font-size: 1.2em; }
    .fr .home-page .buy-button .center {
      padding-top: 16px; }
  .fr .home-page .bottom-margin {
    margin-bottom: 100px; }
  .fr .footer .button-2 .center {
    font-size: 0.8em; } }

.es .age-gate .content .date-of-birth input#month {
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }
.es .age-gate .content .date-of-birth input#day {
  left: 18px;
  -ms-transform: translateX(0);
  transform: translateX(0); }
.es .skyrim-top-nav .buttons .nav-button:nth-child(1).is-active ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(98px);
  transform: translateX(98px); }
.es .skyrim-top-nav .buttons .nav-button:nth-child(2).is-active ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(260px);
  transform: translateX(260px); }
.es .skyrim-top-nav .buttons .nav-button:nth-child(3).is-active ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(465px);
  transform: translateX(465px); }
.es .skyrim-top-nav .buttons .nav-button:nth-child(4).is-active ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(650px);
  transform: translateX(650px); }
.es .skyrim-top-nav .buttons .nav-button:nth-child(5).is-active ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(787px);
  transform: translateX(787px); }
.es .skyrim-top-nav .buttons .nav-button:nth-child(1):hover ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(98px) !important;
  transform: translateX(98px) !important; }
.es .skyrim-top-nav .buttons .nav-button:nth-child(2):hover ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(260px) !important;
  transform: translateX(260px) !important; }
.es .skyrim-top-nav .buttons .nav-button:nth-child(3):hover ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(465px) !important;
  transform: translateX(465px) !important; }
.es .skyrim-top-nav .buttons .nav-button:nth-child(4):hover ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(650px) !important;
  transform: translateX(650px) !important; }
.es .skyrim-top-nav .buttons .nav-button:nth-child(5):hover ~ .nav-icon-wrap .nav-icon {
  -ms-transform: translateX(787px) !important;
  transform: translateX(787px) !important; }
@media (max-width: 767px) {
  .es .home-page .bottom-promo .buy-button {
    top: 430px; } }



/*# sourceMappingURL=main.css.map */