body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  font-family: 'Kanit', sans-serif; }

*, *:before, *:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent; }

a {
  text-decoration: none; }

ul {
  margin: 0;
  padding: 0;
  list-style-type: none; }

li {
  display: inline-block;
  margin: 0;
  padding: 0; }

:focus {
  outline: none; }

#characters {
  /**
   * Content
   */
  /**
   * Special sizing
   */
  /* Height */
  /**
   * Menu
   */
  /**
   * Characters
   */
  /**
   * Backgrounds
   */ }
  @media (min-width: 660px) {
    #characters .page-fg {
      height: 100%; } }
  @media (max-width: 659px) {
    #characters .page-fg {
      position: static;
      height: auto;
      min-height: 0;
      margin: 0 16px; }
    #characters .page-bg {
      display: block;
      margin: 0 16px; } }
  #characters .scroll.no-scroll .iScrollVerticalScrollbar {
    opacity: 0 !important; }
  #characters .scroll.no-scroll .bio {
    margin-right: 0 !important; }
  #characters .content {
    position: relative;
    color: #FFF; }
    #characters .content p {
      line-height: 1.5em; }
      #characters .content p:first-child {
        margin-top: 0; }
    #characters .content .bio {
      margin-right: 20px; }
    #characters .content h1 {
      text-align: left;
      line-height: 1em;
      margin: 0 0 0.5em 0; }
    #characters .content .download {
      display: inline-block;
      overflow: hidden;
      position: relative;
      background-color: #f7ca2c;
      padding: 0 20px 0 56px;
      height: 50px;
      font-weight: bold; }
      #characters .content .download:active, #characters .content .download:visited, #characters .content .download:link {
        color: #282828; }
      .no-touchevents #characters .content .download:hover:before {
        -webkit-animation: charactersDownloadArrow 600ms cubic-bezier(0.68, 0, 0.265, 1);
                animation: charactersDownloadArrow 600ms cubic-bezier(0.68, 0, 0.265, 1); }
      .no-touchevents #characters .content .download:hover,
      .touchevents #characters .content .download:active {
        color: #FFF; }
      #characters .content .download span {
        line-height: 50px; }
      #characters .content .download:before {
        content: "";
        display: block;
        position: absolute;
        background: url(../media/characters/download.png) no-repeat;
        background-size: contain;
        left: 18px;
        top: 50%;
        margin-top: -8px;
        width: 18px;
        height: 15px; }
    @media (min-width: 660px) {
      #characters .content {
        max-width: 510px; }
        #characters .content > div {
          opacity: 0;
          display: none; }
        #characters .content .scroll {
          height: 144px;
          position: relative;
          overflow: hidden; }
        #characters .content .download {
          font-size: 22px;
          margin: 35px 0 0 0; }
        #characters .content .iScrollVerticalScrollbar {
          height: 80% !important;
          top: 10.5% !important;
          width: 8px !important; }
          #characters .content .iScrollVerticalScrollbar:before {
            content: "";
            left: 3px;
            width: 2px;
            height: 100%;
            position: absolute;
            background-color: #f7ca2c; }
          #characters .content .iScrollVerticalScrollbar .iScrollIndicator {
            border: none !important;
            border-radius: 0 !important;
            background-color: #f7ca2c !important;
            height: 68.75%;
            width: 8px !important; } }
  @media (min-width: 660px) and (max-width: 780px) {
    #characters .content .download {
      font-size: 18px; } }
    @media (max-width: 659px) {
      #characters .content {
        padding-bottom: 30px; }
        #characters .content > div {
          display: block !important;
          opacity: 1 !important; }
        #characters .content h1 {
          font-size: 2.375em; }
        #characters .content .download {
          font-size: 22px; }
        #characters .content .img {
          width: 72%;
          position: relative;
          margin: 16.75% auto 0 auto;
          background-position: top center;
          background-repeat: no-repeat;
          background-size: auto 100%; }
          #characters .content .img:before {
            content: "";
            display: block;
            position: relative; }
        #characters .content > div:first-child .img {
          margin-top: 6.25%; }
        #characters .content .batman .img {
          background-image: url(../media/characters/batman-mobile.png);
          -webkit-transform: translateX(-8%);
              -ms-transform: translateX(-8%);
                  transform: translateX(-8%); }
          #characters .content .batman .img:before {
            padding-top: 99%; }
        #characters .content .robin .img {
          background-image: url(../media/characters/robin-mobile.png);
          -webkit-transform: translate(-2%, 0);
              -ms-transform: translate(-2%, 0);
                  transform: translate(-2%, 0); }
          #characters .content .robin .img:before {
            padding-top: 116%; }
        #characters .content .the-joker .img {
          background-image: url(../media/characters/the-joker-mobile.png);
          -webkit-transform: translateX(-3%);
              -ms-transform: translateX(-3%);
                  transform: translateX(-3%); }
          #characters .content .the-joker .img:before {
            padding-top: 125.91%; }
        #characters .content .batgirl .img {
          background-image: url(../media/characters/batgirl-mobile.png);
          -webkit-transform: translateX(-3%);
              -ms-transform: translateX(-3%);
                  transform: translateX(-3%); }
          #characters .content .batgirl .img:before {
            padding-top: 110.79%; }
        #characters .content .alfred .img {
          background-image: url(../media/characters/alfred-mobile.png);
          -webkit-transform: translateX(2%);
              -ms-transform: translateX(2%);
                  transform: translateX(2%); }
          #characters .content .alfred .img:before {
            padding-top: 127%; }
        #characters .content .harley-quinn .img {
          background-image: url(../media/characters/harley-quinn-mobile.png);
          -webkit-transform: translateX(-5%);
              -ms-transform: translateX(-5%);
                  transform: translateX(-5%); }
          #characters .content .harley-quinn .img:before {
            padding-top: 113.82%; } }
  @media (min-width: 660px) {
    #characters .content-outer {
      position: absolute;
      width: calc(45% - 30px);
      margin-right: 30px;
      height: 100%;
      right: 0; }
    #characters .content-table {
      display: table;
      width: 100%;
      height: 100%; }
    #characters .content-inner {
      display: table-cell;
      vertical-align: middle; } }
  @media (min-width: 660px) and (max-height: 760px) {
    #characters .content .scroll {
      height: 118px; } }
  #characters .menu {
    font-size: 0;
    width: 100%;
    /*
    @media (min-width: 660px) and (max-width: 899px) and (min-height: 700px) {
      #site & li {
        margin-right: 10px;
        width: auto;
        font-size: 16px;
        margin-bottom: -10px;
      }
    }

    @media (min-width: 660px) and (max-width: 750px) and (min-height: 700px) {
      #site & li {
        font-size: 14px;
      }
    }
    */ }
    #characters .menu a {
      display: block;
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: left bottom;
      position: relative; }
    #characters .menu li {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
      vertical-align: bottom;
      font-size: 16px;
      width: 16%;
      position: relative; }
      #characters .menu li.spacer {
        width: auto;
        display: none; }
    .no-touchevents #characters .menu li:hover,
    .touchevents #characters .menu li:active {
      -webkit-animation: pulse 300ms ease-in-out;
              animation: pulse 300ms ease-in-out; }
    #characters .menu li.active {
      -webkit-animation: none !important;
              animation: none !important; }
    #characters .menu li:last-child {
      margin-right: 0; }
    #characters .menu li.batman a {
      background-image: url(../media/characters/thumbnail-batman.png);
      width: 5.375em;
      height: 7em; }
    #characters .menu li.robin a {
      background-image: url(../media/characters/thumbnail-robin.png);
      width: 5.375em;
      height: 7em; }
    #characters .menu li.the-joker a {
      background-image: url(../media/characters/thumbnail-the-joker.png);
      width: 5.5625em;
      height: 7em; }
    #characters .menu li.batgirl a {
      background-image: url(../media/characters/thumbnail-batgirl.png);
      width: 5.375em;
      height: 6.9375em; }
    #characters .menu li.alfred a {
      background-image: url(../media/characters/thumbnail-alfred.png);
      width: 5.375em;
      height: 7em; }
    #characters .menu li.harley-quinn a {
      background-image: url(../media/characters/thumbnail-harley-quinn.png);
      width: 7.625em;
      height: 6.75em; }
      #characters .menu li.harley-quinn a:before {
        margin-left: -4em; }
    #characters .menu li a:before {
      opacity: 0;
      content: "";
      z-index: -1;
      display: block;
      position: absolute;
      background-image: url(../media/characters/thumbnail-active.png);
      background-size: 100% 100%;
      bottom: 0.1875em;
      left: 50%;
      margin-left: -2.9375em;
      width: 5.875em;
      height: 5.875em;
      -webkit-animation: ringOut 500ms;
              animation: ringOut 500ms; }
    #characters .menu li.the-joker a:before {
      margin-left: -3.0625em; }
    #characters .menu li.active a:before {
      opacity: 1;
      -webkit-animation: ringIn 500ms forwards;
              animation: ringIn 500ms forwards; }
    @media (min-width: 1101px) and (max-width: 1280px) {
      #characters .menu li {
        font-size: 14px; } }
    @media (max-width: 1100px) {
      #characters .menu li {
        width: auto; } }
    @media (min-width: 851px) and (max-width: 1100px) {
      #characters .menu li:nth-child(8) {
        display: block; } }
    @media (max-width: 850px) {
      #characters .menu li:nth-child(6) {
        display: block; } }
    @media (max-height: 760px) {
      #characters .menu li {
        font-size: 14px; } }

@media (max-height: 700px) and (max-width: 1100px) {
  #characters .menu li {
    font-size: 12px;
    width: 16%; }
    #characters .menu li.spacer {
      display: none; } }

@media (max-height: 700px) and (max-width: 980px) {
  #characters .menu li {
    font-size: 11px; } }

@media (max-height: 700px) and (max-width: 910px) {
  #characters .menu li {
    font-size: 10px; } }

@media (max-height: 700px) and (max-width: 910px) {
  #characters .menu li {
    font-size: 10px; } }

@media (max-height: 700px) and (max-width: 800px) {
  #characters .menu li {
    font-size: 9px; } }

@media (max-height: 700px) and (max-width: 760px) {
  #characters .menu li {
    font-size: 8px; } }

@media (max-height: 700px) and (max-width: 720px) {
  #characters .menu li {
    font-size: 7.5px; } }
    @media (min-width: 660px) {
      #characters .menu {
        max-width: 540px;
        margin-top: 30px; } }
    @media (max-width: 659px) {
      #characters .menu {
        display: none !important; } }
  #characters .characters img {
    width: 100%;
    height: auto; }
  #characters .characters .character .animate {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    left: 0; }
  #characters .characters .character .para-image,
  #characters .characters .character .para-shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
    @media (max-width: 659px) {
      #characters .characters .character .para-image,
      #characters .characters .character .para-shadow {
        -webkit-transform: translate(0, 0) !important;
            -ms-transform: translate(0, 0) !important;
                transform: translate(0, 0) !important; } }
  #characters .characters .character .para-image {
    z-index: 2; }
  #characters .characters .character .image {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat; }
  #characters .characters .character:before {
    content: "";
    display: block; }
  #characters .characters .shadow {
    position: absolute;
    width: 90%;
    height: 90%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-70%, -40%);
        -ms-transform: translate(-70%, -40%);
            transform: translate(-70%, -40%);
    background-size: contain;
    background-repeat: no-repeat; }
  @media (min-width: 660px) {
    #characters .characters {
      width: 50%;
      height: 100%;
      position: absolute; }
      #characters .characters .character {
        width: 100%;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
                transform: translate(0, -50%); }
        #characters .characters .character.batman:before {
          padding-top: 96%; }
        #characters .characters .character.batman .image {
          background-image: url(../media/characters/batman.png); }
        #characters .characters .character.batman .shadow {
          background-image: url(../media/characters/batman-shadow.png); }
        #characters .characters .character.robin {
          -webkit-transform-origin: left top;
              -ms-transform-origin: left top;
                  transform-origin: left top; }
          #characters .characters .character.robin:before {
            padding-top: 111%; }
          #characters .characters .character.robin .image {
            background-image: url(../media/characters/robin.png);
            -webkit-transform: translateY(-7%);
                -ms-transform: translateY(-7%);
                    transform: translateY(-7%); }
          #characters .characters .character.robin .shadow {
            background-image: url(../media/characters/robin-shadow.png); }
        #characters .characters .character.the-joker:before {
          padding-top: 125.91%; }
        #characters .characters .character.the-joker .image {
          background-image: url(../media/characters/the-joker.png); }
        #characters .characters .character.the-joker .shadow {
          background-image: url(../media/characters/the-joker-shadow.png); }
        #characters .characters .character.batgirl:before {
          padding-top: 108%; }
        #characters .characters .character.batgirl .image {
          background-image: url(../media/characters/batgirl.png);
          -webkit-transform: translateY(-9%);
              -ms-transform: translateY(-9%);
                  transform: translateY(-9%); }
        #characters .characters .character.batgirl .shadow {
          background-image: url(../media/characters/batgirl-shadow.png); }
        #characters .characters .character.alfred {
          right: -3%; }
          #characters .characters .character.alfred:before {
            padding-top: 125.87%; }
          #characters .characters .character.alfred .image {
            background-image: url(../media/characters/alfred.png); }
          #characters .characters .character.alfred .shadow {
            background-image: url(../media/characters/alfred-shadow.png); }
        #characters .characters .character.harley-quinn:before {
          padding-top: 111.28%; }
        #characters .characters .character.harley-quinn .image {
          background-image: url(../media/characters/harley-quinn.png); }
        #characters .characters .character.harley-quinn .shadow {
          background-image: url(../media/characters/harley-quinn-shadow.png); } }
  @media (max-width: 659px) {
    #characters .characters {
      display: none !important; } }
  @media (max-width: 400px) {
    #characters .characters {
      margin-top: 100px; } }
  @media (min-width: 660px) {
    #characters .bg {
      background: url(../media/characters/bg.jpg) repeat-x center top, url(../media/characters/bg-repeat.jpg) repeat center 790px; } }
  @media (max-width: 659px) {
    #characters .page-inner {
      background: url(../media/characters/bg-mobile.jpg) repeat-x top center, #343734 url(../media/characters/bg-mobile-repeat.jpg) repeat center 882px;
      background-size: 10px auto, 10px auto; } }

@-webkit-keyframes ringIn {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes ringIn {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes ringOut {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; } }

@keyframes ringOut {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; } }

@-webkit-keyframes charactersDownloadArrow {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  5% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px); }
  50% {
    -webkit-transform: translateY(44px);
            transform: translateY(44px); }
  50.0001% {
    -webkit-transform: translateY(-44px);
            transform: translateY(-44px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes charactersDownloadArrow {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  5% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px); }
  50% {
    -webkit-transform: translateY(44px);
            transform: translateY(44px); }
  50.0001% {
    -webkit-transform: translateY(-44px);
            transform: translateY(-44px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }
/*# sourceMappingURL=characters.css.map */