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; }

#story .content h1 {
  margin-top: 0;
  margin-bottom: 0.25em;
  font-size: 2.375em;
  font-weight: 800;
 /* text-transform: uppercase;*/
  color: #f7ca2c;
  text-align: left; }

#story .content .copy {
  color: #FFF;
  width: 100%;
  position: relative;
  line-height: 1.5em; }
  #story .content .copy p {
    margin: 1.5em 0; }
  #story .content .copy p:first-child {
    margin-top: 0; }

@media (min-width: 660px) and (max-width: 1500px) {
  #story .content {
    right: 14%; } }

@media (min-width: 660px) {
  #story .content-outer {
    width: 48%;
    position: absolute;
    right: 0;
    height: 100%; }
  #story .content {
    position: absolute;
    left: 0;
    top: 22.5%;
    width: calc(100% - 30px);
    max-width: 450px;
    height: 240px; }
    #story .content .copy {
      height: 165px;
      overflow: hidden; }
    #story .content .inner {
      width: calc(100% - 30px); }
  #story .characters {
    width: 45%;
    height: 100%;
    position: absolute;
    left: 0;
    transition: opacity 500ms ease-out; }
    #story .characters .inner {
      position: absolute;
      top: 7%;
      right: 0;
      width: 80%;
      max-width: 530px; }
      #story .characters .inner:before {
        display: block;
        content: "";
        padding-top: 135.84%; }
    #story .characters .batman {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 75.84%;
      height: auto; }
    #story .characters .robin {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 67.924%;
      height: auto; } }
  @media (min-width: 660px) and (min-width: 660px) and (max-width: 900px) and (min-height: 800px) {
    #story .characters .inner {
      top: 10%; } }
  @media (min-width: 660px) and (min-width: 660px) and (max-width: 700px) and (min-height: 800px) {
    #story .characters .inner {
      top: 15%; } }

@media (min-width: 660px) {
  #story .iScrollVerticalScrollbar {
    width: 8px !important;
    top: 10% !important;
    bottom: 10% !important; }
    #story .iScrollVerticalScrollbar:after {
      content: "";
      position: absolute;
      display: block;
      width: 2px;
      background-color: #fac74a !important;
      left: 3px;
      height: 100%;
      z-index: -1; }
    #story .iScrollVerticalScrollbar .iScrollIndicator {
      border: none !important;
      background-color: #fac74a !important;
      border-radius: 0 !important;
      height: 50px; } }

@media (max-width: 659px) {
  #story .content-outer {
    margin: 0 16px; }
  #story .content {
    padding-top: 38%; }
    #story .content h1 {
      font-size: 2.375em;
      text-align: left;
      margin-bottom: 0; } }

#story .bg {
  background-image: url(../media/story/bg.jpg);
  background-position: top center;
  background-size: cover; }

@media (min-width: 660px) and (max-width: 900px) and (min-height: 1000px) {
  #story .bg {
    background-position: 40% 0; } }

@media (max-width: 659px) {
  #story .page-inner {
    background: #000 url(../media/story/bg-mobile.jpg) no-repeat;
    background-size: 100% auto; } }
/*# sourceMappingURL=story.css.map */


 #story .content {
	 	font-weight: 700 !important;		   
	
}