#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 99999;
    text-align: center;
}

#loading p {
    font-family: sans-serif;
    font-size: 2rem;
    margin-top: 40%;
    color: #fff !important;
}

main {
    position: relative;

    min-height:2000px;
}

.parallax-scene {
    width: 100%;
    height: 400px;
    /* important if using skrollr and parallax together */
    position: relative;
}

.parallax-scene .layer {
    pointer-events: none;
}

.parallax-scene .element {
    pointer-events: all;
    position: absolute;

    /*background: black;
    color: white;

    width: 10em;
    padding: 1em;
    text-align: center;
    height: 4em;
    line-height: 2em;

    margin-left: -5em;
    margin-top: -2em;*/

    /*left: 50%;
    top: 50%;*/
}


.parallax-scene .background {
    font-size: 1em;
    top: 34%;
}

.parallax-scene .middleground {
    font-size: 1.4em;
}

.parallax-scene .foreground {
    font-size: 2em;
    top: 66%;
}

/*.parallax-scene .element:hover {
    background: red;
}*/

.bar-graphic {
    height: 30px;
    margin-bottom: 15px;
    background-color: #66f;
}

.map p {
    font-size: .75em;
}

.frame {
    position: static;
    width:1px;
}

.sequence-frame {
    height: 50px;
}

#stage {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background: #000;
    color: #ddd;
    /*font-family: "Helvetica Neue", Hevetica, Arial, sans-serif;*/
    font-family:'Museo Slab W01 500', sans-serif;
    font-weight: 300;
}

.text-dark {
    color: #444;
}
.text-light {
    color: #ddd;
}

.text-shadow {
    text-shadow: 0 2px 3px rgba(0,0,0,.8);
}

#timeline {
    position: relative;
}

.full-screen {
    width: 100%;
    height: 100%;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.half-width {
    width: 50%;
}

.half-height {
    height: 50%;
}

.crop {
    overflow: hidden;
}

.pad { padding: 2.5rem; }
.pad-left { padding-left: 2.5rem; }
.pad-right { padding-right: 2.5rem; }
.pad-top { padding-top: 2.5rem; }
.pad-bottom { padding-bottom: 2.5rem; }
.pad-horizontal { padding-left: 2.5rem; padding-right: 2.5rem; }
.pad-vertical { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pad-small { padding: 1.5rem; }

/*
classes for background images.  All will use background-size: cover to
fill the area, and the variations will pin the image to a specific
side or corner.
 */
[class*=background-] {
    background-size:cover;
}

.background-center { background-position:50% 50%; }
.background-left { background-position:0% 50%; }
.background-right { background-position:100% 50%; }
.background-top { background-position:50% 0%; }
.background-bottom { background-position:50% 100%; }
.background-top-left { background-position:0% 0%; }
.background-top-right { background-position:100% 0%; }
.background-bottom-left { background-position:0% 100%; }
.background-bottom-right { background-position:100% 100%; }

.screen {
    width: 100%;
    height: 100%;
    background-color: #000;
}

.media .quote p {
    margin-bottom: 0;
}

.media .quote {
    letter-spacing: 0em;
    margin-bottom: 0;
}
#wrap .media .byline {
    margin: .5em 0 2em 1em;
    font-size: 75%;
}
#wrap .media .byline:before {
    content: '\2013\0020';
/*    position: absolute;
    left: -.5em;
*/}

.quote {
    margin: 0;
    /*text-transform: uppercase;*/
    letter-spacing: 0.1em;
    font-size: 2.5rem;
    line-height: 1.25em;
}

.quote p {
    font-size: 1em;
    position: relative;
}

.quote blockquote p {
    color: #aaa;
}

.quote blockquote {
    margin: 0;
}

.quote blockquote p {
    margin-top: 0;
}

.quote blockquote p:before {
    content: '\201C';
    position: absolute;
    left: -.5em;
}

.quote blockquote p:after {
    content: '\201D';
}

.quote blockquote + p {
    font-size: 1em;
}

/*
                 #       #
                         #
     ###  ###   ##     ###
    #  #  #  #   #    #  #
     ##   #      #    #  #
    #     #     ###    ###
     ###
 */

[class*=column],
[class*=row] {
    position: relative;
    float: left;
}

/*[class*=column] {
    font-size: 5rem;
}
[class*=row] {
    font-size: 2.5rem;
}*/

/* define a box that is the 'active area' for content. primary content should
   fall within this box.  it will be a 12 by 8 grid (or 6 by 10 in portrait) */
.active-area {
    position: absolute;
    width: 60rem;
    height: 40rem;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.position-center {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.active-area-size {
    width: 60rem;
    height: 40rem;
}

.fill-horizontal {
    width: 100% !important;
    left: 0;
}
.fill-vertical {
    height: 100% !important;
    top: 0;
}

.active-area.fill-horizontal {
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}


.active-area.fill-vertical {
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.active-area-size.fill-down,
.active-area.fill-down {
    box-sizing: content-box;
    padding-bottom: 25%;
    margin-top: 12.5%;
}
.active-area-size.fill-up,
.active-area.fill-up {
    box-sizing: content-box;
    padding-top: 25%;
    margin-top: -12.5%;
}
.active-area-size.fill-left,
.active-area.fill-left {
    box-sizing: content-box;
    padding-left: 35%;
    margin-left: -17.5%;
}
.active-area-size.fill-right,
.active-area.fill-right {
    box-sizing: content-box;
    padding-right: 35%;
    margin-left: 17.5%;
}



/* absolute sizes */
.column-1 { width: 5rem;}
.column-2 { width: 10rem;}
.column-3 { width: 15rem;}
.column-4 { width: 20rem;}
.column-5 { width: 25rem;}
.column-6 { width: 30rem;}
.column-push-1 { margin-left: 5rem;}
.column-push-2 { margin-left: 10rem;}
.column-push-3 { margin-left: 15rem;}
.column-push-4 { margin-left: 20rem;}
.column-push-5 { margin-left: 25rem;}
.column-push-6 { margin-left: 30rem;}
.column-pull-1 { margin-left: -5rem;}
.column-pull-2 { margin-left: -10rem;}
.column-pull-3 { margin-left: -15rem;}
.column-pull-4 { margin-left: -20rem;}
.column-pull-5 { margin-left: -25rem;}
.column-pull-6 { margin-left: -30rem;}
.row-1 { height: 5rem; }
.row-2 { height: 10rem; }
.row-3 { height: 15rem; }
.row-4 { height: 20rem; }
.row-5 { height: 25rem; }
.row-6 { height: 30rem; }
.row-7 { height: 35rem; }
.row-8 { height: 40rem; }
.row-push-1 { margin-top: 5rem; }
.row-push-2 { margin-top: 10rem; }
.row-push-3 { margin-top: 15rem; }
.row-push-4 { margin-top: 20rem; }
.row-push-5 { margin-top: 25rem; }
.row-push-6 { margin-top: 30rem; }
.row-push-7 { margin-top: 35rem; }
.row-push-8 { margin-top: 40rem; }
.row-pull-1 { margin-top: -5rem; margin-bottom: 5rem; }
.row-pull-2 { margin-top: -10rem; margin-bottom: 10rem; }
.row-pull-3 { margin-top: -15rem; margin-bottom: 15rem; }
.row-pull-4 { margin-top: -20rem; margin-bottom: 20rem; }
.row-pull-5 { margin-top: -25rem; margin-bottom: 25rem; }
.row-pull-6 { margin-top: -30rem; margin-bottom: 30rem; }
.row-pull-7 { margin-top: -35rem; margin-bottom: 35rem; }
.row-pull-8 { margin-top: -40rem; margin-bottom: 40rem; }

/* relative sizes */
.column-1-1, .column-max { width: 100%;}
.column-1-2, .column-half { width: 50%;}
.column-1-3, .column-third { width: 33.33%;}
.column-1-4, .column-fourth { width: 25%;}
.column-1-5, .column-fifth { width: 20%; }
.column-1-6, .column-sixth { width: 16.66%;}
.column-push-1-1, .column-push-max { left: 100%;}
.column-push-1-2, .column-push-half { left: 50%;}
.column-push-1-3, .column-push-third { left: 33.33%;}
.column-push-1-4, .column-push-fourth { left: 25%;}
.column-push-1-5, .column-push-fifth { left: 20%; }
.column-push-1-6, .column-push-sixth { left: 16.66%;}
.column-pull-1-1, .column-pull-max { left: -100%;}
.column-pull-1-2, .column-pull-half { left: -50%;}
.column-pull-1-3, .column-pull-third { left: -33.33%;}
.column-pull-1-4, .column-pull-fourth { left: -25%;}
.column-pull-1-5, .column-pull-fifth { left: -20%; }
.column-pull-1-6, .column-pull-sixth { left: -16.66%;}
.row-1-1, .row-max { height: 100%;}
.row-1-2, .row-half { height: 50%;}
.row-1-3, .row-third { height: 33.33%;}
.row-1-4, .row-fourth { height: 25%;}
.row-1-5, .row-fifth { height: 20%; }
.row-1-6, .row-sixth { height: 16.66%;}
.row-push-1-1, .row-push-max { top: 100%;}
.row-push-1-2, .row-push-half { top: 50%;}
.row-push-1-3, .row-push-third { top: 33.33%;}
.row-push-1-4, .row-push-fourth { top: 25%;}
.row-push-1-5, .row-push-fifth { top: 20%; }
.row-push-1-6, .row-push-sixth { top: 16.66%;}
.row-pull-1-1, .row-pull-max { top: -100%;}
.row-pull-1-2, .row-pull-half { top: -50%;}
.row-pull-1-3, .row-pull-third { top: -33.33%;}
.row-pull-1-4, .row-pull-fourth { top: -25%;}
.row-pull-1-5, .row-pull-fifth { top: -20%; }`
.row-pull-1-6, .row-pull-sixth { top: -16.66%;}


.column-container {
    margin: 0 auto;
}

/*.layout types */

/*
    Box - lets you position 2 30x25 boxes in a single frame.  One should be
    .box.left and one .box.right.  In landscape, these will position to their
    appropriate column, and in portrait they will stack vertically.
 */
.box {
    position: absolute;
    width: 30rem;
    height: 25rem;
    text-align: left;
}

.box-width {
    position: absolute;
    height: auto;
    width: 30rem;
    text-align: left;
}

/*
    Tall Box - same layout as box, but for only one content block, so it can be
    larger.
 */
.tall-box {
    position: absolute;
    width: 30rem;
    height: 40rem;
}

.left { left: 0; right: auto; }
.right { right: 0; left: auto; }
.top { top: 0; bottom: auto; }
.bottom { bottom: 0; top: auto; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.tall-box.left, .box.left { left: 0; }
.tall-box.right, .box.right { right: 0; }
.tall-box.top, .box.top { top: 0; }
.tall-box.bottom, .box.bottom { bottom: 0; }
.tall-box.center, .box.center { left: 15rem; }
.box.middle { top: 7.5rem; }
.tall-box.middle { top: 0; }

.box.tall { height: 40rem; }

/*
    Squish-box - a short & wide box in landscape, squishes to half width (still 100%)
    and double height in portrait. meant for 1 content block per active screen

 */
.squish .box {
    width: 100%;
    position: absolute;
    max-height: 25rem;
    height: auto;
    left: 0;
    text-align: left;
}

.squish .box.top { top: 0; }
.squish .box.bottom { bottom: 0; }

/* This parent can be any width and height */
.squish {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.squish:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */
.squish .box {
    display: inline-block;
    vertical-align: middle;
    width: 99%;
    top: auto;
    float: none;
    position: relative;
}


.squish .box.middle {
    vertical-align: middle;
}
.squish .box.top {
    vertical-align: top;
}
.squish .box.bottom {
    vertical-align: bottom;
}


.up-1 { margin-top: -5rem; margin-bottom: 5rem; }
.down-1 { margin-top: 5rem; margin-bottom: -5rem; }
.left-1 { margin-left: -5rem; margin-right: 5rem; }
.right-1 { margin-left: 5rem; margin-right: -5rem; }

.up-2 { margin-top: -10rem; margin-bottom: 10rem; }
.down-2 { margin-top: 10rem; margin-bottom: -10rem; }
.left-2 { margin-left: -10rem; margin-right: 10rem; }
.right-2 { margin-left: 10rem; margin-right: -10rem; }

.peg {
    height:1.5rem;
    width:1.5rem;
    background: url('../images/peg.svg') no-repeat;
    background-size: 100%;
    -webkit-transform: scale(5,5);
    -moz-transform: scale(5,5);
    transform: scale(5,5);
}

.peg p {
    margin: 0;
    font-size: .9rem !important;
    line-height: 1rem !important;
    font-family:'Museo Slab W01 100';
}

.peg strong {
    font-family:'Museo Slab W01 500';
}

.label-left,
.label-right,
.label-top {
    position: absolute;
    white-space: nowrap;
    padding: 7px 10px 2px 10px;
    background-color: rgba(0,0,0,.7);
    box-shadow: 0 2px 3px rgba(0,0,0,.7);
    border: 2px solid #fff;
    top: -15%;
}

.label-twoline {
    top: -50%;
}

.label-right {
    left: 110%;
}

.label-left {
    right: 110%;
}

.label-top {
    top: -200%;
}

.label-bottom {
    top: -200%;
}

/*
font-family:'Museo Slab W01 100';
font-family:'Museo Slab W01 500';
font-family:'MuseoSlabW01-500Italic';
font-family:'Museo Slab W01 900';
*/

* {
    -moz-box-sizind: border-box;
    box-sizing: border-box;

}

body, html {
    margin: 0;
    padding: 0;
    background: #000;
    height: 100%;
    width: 100%;
}


html {
    font-size: 15px;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

h1, h2, h3, h4, h5, h6 {
    margin:0.5em 0;
    font-family:'Museo Slab W01 500';
}


body {
    font-size: 2rem;
}

p {
    margin:0.5em 0;
    font-size: 1.5rem;
    line-height: 1.5em;
    margin-bottom: 1rem;
}

strong {
    font-family:'Museo Slab W01 900';
}

a,
a:link,
a:visited {
    color: #1f9fd4;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.btn {
    font-style: normal;
    background: #1f9fd4;
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
}

#scroll-down {
    font-size: 2rem;
    line-height: 2rem;
    background: url('../images/arrow-down.svg') no-repeat bottom center;
    background-size: 2rem 3rem;
    padding-bottom: 3.5rem;
}

.backToTop {
    position: absolute;
    left: 250px;
    top: 0;
    cursor: pointer;
    z-index: 1000;
}

.backToTop, .icon-up {
    display: block;
    width: 1rem;
    height: 60px;
    max-width: 24px;
    min-width: 16px;
}

.icon-up {
    background: url('../images/arrow-up.png') no-repeat center center;
    background-size: 100% auto;
}

.container {
    margin: 0 auto;
    color:#fff;
}

.trailer-container {
    padding-top: 1em;
    max-width: 720px;
}

#site-header .container:before,
#site-header .container:after,
#site-header:before,
#site-header:after,
.site-nav ul:before,
.site-nav ul:after {
    content: " ";
    display: block
}

#site-header .container:after,
#site-header:after,
.site-nav ul:after{
    clear:both;
}

#site-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    font-family: sans-serif;
    background-color: #000;
}

#site-header .container, #stage > .container {
    width: 60rem;
    padding: 0;
    max-width: inherit;
    min-width: inherit;
    position: relative;
}

.site-nav {
    float: right;
    overflow: hidden;
}

.branding {
    position: fixed;
    background-color: rgba(0,0,0,1);
    padding: 20px 10px 16px;
    z-index: 10001;
}

.branding.fixed {
    position: fixed;
}

.branding h1 {
    color: #fff;
    font-size: 24px;
    text-transform: uppercase;
    margin: 0;
    line-height: 24px;
    text-shadow: 0px 2px 2px rgba(0,0,0,.5);
}

.branding h1 a,
.branding h1 a:link ,
.branding h1 a:visited {
    font-size: 24px;
    color: #fff;
    text-decoration: none;
}

.site-nav ul {
    float: right;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav li {
    font-size: 20px;
    float: left;
    margin-left: 1.5rem;
    line-height: 60px;
}

.site-nav li:first-child {
    margin-left: 0;
}

#site-header .site-nav a,
#site-header .site-nav a:link,
#site-header .site-nav a:visited {
    display: block;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}

.menu {
    display: none;
    line-height: 60px;
    max-height: 60px;
    text-align: right;
}

#site-header .menu a {
    display: block;
}

.icon-hamburger {
    background: url('../images/hamburger.png') no-repeat left center;
    display: inline-block;
    padding-left: 36px;
    font-style: normal;
}

#wrap {
    font-family: sans-serif;
}

#wrap p {
    font-size: 16px;
}

#wrap .container {
    width: 60rem;
    margin-top: 80px;
    position: relative;
}

#background {
    position: fixed !important;
    top:0;
    bottom: 0;
    left: 0;
    right: 50%;
    height: 100%;
    width: 50%;
    overflow: hidden;
    z-index: 9999;
}

#stage #background {
    position: relative;
    width: 100%;
    height: 100%;
}

#background.full {
    z-index: 0;
    width: 100%;
    right: 0;
}

.page-heading h1 {
    margin: .5em 0 .5em;
    font-family:'Museo Slab W01 100';
    font-size: 2em;
}

.page-content {
    font-size: 16px;
    padding-bottom: 20px;
}

.responsive-video { /* responsive video */
    padding-bottom: 56.25%;
    /*padding-top: 25px;*/
    height: 0;
    position: relative;
    margin: 0 auto;
}

.right-col .page-heading ,
.right-col .page-content {
    padding-left: 53%;
}

.left-col .page-heading ,
.left-col .page-content {
    padding-right: 53%;
}

.full .page-heading,
.full .page-content {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.screening {
    padding-top: 20px;
    border-top: 1px solid #666;
    margin-top: 20px;
}

.screening:before,
.screening:after {
    content: '';
    display: block
}

.screening:after {
    clear:both;
}

.screening h2 {
    margin-top: 0;
    font-size: 20px;
}

.screening p {
    margin:0;
    color: grey;
}
.screening p:first-of-type {
    color: white;
}
.secret {
    opacity: 0;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
}

.secretToggle:hover ~ .secret {
    opacity: 1;
}

p.secret, p.secretToggle {
    padding: .5em 0;
    margin: 0;
}

p.secret {
    padding: .5em -;
    margin: 0;
    /*background-color: rgba(0,0,0,.4);*/
}

#shipbreakers {
    padding: 0.5em 0;
    margin: 0;
}

.dim {
    opacity: .2;
    transition-duration: .2s;
    -webkit-transition-duration: .2s;
}

.bottom-half, .top-half {
    height: 50% !important;
    width: 100% !important;
}

.bottom-half {
    bottom: 0 !important;
    top: auto !important;
}

.top-half {
    top: 0 !important;
    bottom: auto !important;
}

.right-half, .left-half {
    height: 100% !important;
    width: 50% !important;
}

.left-half {
    left: 0 !important;
    right: auto !important;
}

.right-half {
    left: auto !important;
    right: 0 !important;
}

.peg-aliaga {
    top: 35.2%;left: 25.4%;
}
.peg-gadani {
    top: 45.9%;left: 46.6%;
}
.peg-chittagong {
    top: 48%;left: 60.1%;
}
.peg-jiangyin {
    top: 40.5%;left: 73.9%;
}
.peg-alang {
    top: 48.8%;left: 49.7%;line-height:.5em;
}

.alang-box {
    top: 46%;
    left: 45%;
    width: 8%;
    height: 20%;
    border:3px solid white;
}
.audio {
    opacity: .6;
    position: absolute;
    left: -30px;
    top: 21px;
    /*padding: 20px 10px 16px;*/
    z-index: 10003;
    width: 20px;
    height: 17px;
    background: url('../images/audio-icons.png') 22px 0px;
}
.audio.off {
    background: url('../images/audio-icons.png') 0px 0px;    
}

@media only screen and (orientation: portrait) {

    .alang-box {
        height: 10%;
    }

    .audio {
        left: -10px;
    }

    #site-header .container, #stage > .container {
        width: 95%;
        padding: 0 2.5%;
    }

    #wrap .container {
        margin-top: 40px;
    }

    #background {
        position: relative !important;
        right: 0;
        height: 40%;
        width: 100%;
    }

    .right-col .page-heading ,
    .right-col .page-content {
        padding-left: 0%;
    }

    .left-col .page-heading ,
    .left-col .page-content {
        padding-right: 0%;
    }

    .site-nav ul {
        float: left;
    }

    .site-nav {
        width: 100%;
    }


    .site-nav ul {
        width: 100%;
        position: relative;
        border-top: 1px solid rgba(0,0,0,0);
        transition-duration: 1s;
        -webkit-transition-duration: 1s;
    }

    .site-nav ul.closed {
        max-height: 0px;
    }

    .site-nav ul.open {
        border-top: 1px solid rgba(0,0,0,.4);
        max-height: 500px;
    }

    .menu {
        display: block;
    }

   .p-label-bottom {
        top: 120% !important;
        left: -100%;
    }


    .p-half-width {
        width: 50%;
    }

    .p-half-height {
        height: 50%;
    }

    .p-full-width {
        width: 100%;
    }

    .p-full-height {
        height: 100%;
    }

    .p-fill-horizontal {
        width: 100% !important;
        left: 0;
        height: auto !important;
    }

    .p-fill-vertical {
        height: 100% !important;
        width: auto !important;
    }

    .p-crop {
        overflow: hidden;
    }

    .p-bottom-half, .p-top-half {
        height: 50% !important;
        width: 100% !important;
    }

    .p-bottom-half {
        bottom: 0 !important;
        top: auto !important;
    }

    .p-top-half {
        top: 0 !important;
        bottom: auto !important;
    }

    .p-right-half, .p-left-half {
        height: 100% !important;
        width: 50% !important;
    }

    .p-left-half {
        left: 0 !important;
        right: auto !important;
    }

    .p-right-half {
        left: auto !important;
        right: 0 !important;
    }

    .active-area,
    .active-area-size {
        width: 30rem;
        height: 50rem;
    }

    .active-area.fill-horizontal {
        height: 50rem;
    }

    .active-area.fill-vertical, #wrap .container {
        width: 30rem;
    }

    .box:not(:only-child) {
        position: relative;
        height: 25rem;
        top: 0; left: 0;
        float: left;
    }

    .tall-box {
        position: relative;
        left: 0;
    }
    .tall-box.middle { top: 5rem; }

    .squish .box {
        position: relative;
        top: 0; left: 0;
        max-height: 100%;
    }

    .p-up-1 { margin-top: -5rem; margin-bottom: 5rem; }
    .p-down-1 { margin-top: 5rem; margin-bottom: -5rem; }
    .p-left-1 { margin-left: -5rem; margin-right: 5rem; }
    .p-right-1 { margin-left: 5rem; margin-right: -5rem; }
    .p-up-2 { margin-top: -10rem; margin-bottom: 10rem; }
    .p-down-2 { margin-top: 10rem; margin-bottom: -10rem; }
    .p-left-2 { margin-left: -10rem; margin-right: 10rem; }
    .p-right-2 { margin-left: 10rem; margin-right: -10rem; }

    .p-lock-right {
        right: 0 !important;
    }
    .p-lock-left {
        left: 0 !important;

    }

    .p-lock-top {
        top: 0 !important;
        margin-top: 0;
    }
    .p-lock-bottom {
        bottom: 0 !important;
        top: auto !important;
    }

    .p-lock-margin-left {
        margin-left: 0 !important;
    }

    .active-area.fill-left.p-lock-margin-left {
        margin-left: -12.5% !important;
    }

    .map p {
        color: #fff !important;
    }

    .p-hide {
        display: none !important;
    }

    .p-show {
        display: block;
    }

    .p-text-light {
        color: #fff;
    }

    .p-text-dark {
        color: #444;
    }

    .p-text-shadow {
        text-shadow: 0 2px 3px rgba(0,0,0,.8);
    }

    .landscape { display: none !important; }
    .grid-rows { height: 12em; }
    .grid-active-area { width: 6em; height: 10em; margin-left: -3em; margin-top: -5em; }

    .p-pad {
        padding: 2.5rem;
    }
    .p-pad-small {
        padding: 1.5rem;
    }

    .p-background {
        background-color:rgba(0,0,0,.7)
    }

    .peg-aliaga {
        top: 43.7%;
    }
    .peg-gadani {
        top: 47.8%;
    }
    .peg-chittagong {
        top: 49%;
    }
    .peg-jiangyin {
        top: 46.5%;
    }

}

@media only screen and (max-width: 480px) {

    :root { font-size: 8px; }

    .active-area,
    .active-area-size {
        width: 30rem;
        height: 50rem;
    }

    .audio {
        top: 10px;
    }
    .branding {
        padding: 11px 10px;
        top: 0px;
        left: 5%;
    }

    .branding h1 a, .branding h1 a:link, .branding h1 {
        font-size: 18px;
    }

    .branding h1 {
        line-height: 18px;
    }

    .backToTop, .icon-up {
        height: 40px;
    }

    .backToTop {
        left: 195px;
    }

    .menu {
        line-height: 40px;
    }

    .site-nav ul {
        position: relative;
        transition-duration: .5s;
        -webkit-transition-duration: .5s;
        border-top: 0;
    }

    .site-nav ul.closed {
        top: -100%;
        max-height: 0px;
    }

    .site-nav ul.open {
        top: 0;
        max-height: 500px;
        border-top: 0;
    }

    .site-nav li {
        float: none;
        margin: 0;
        border-top: 1px solid rgba(0,0,0,.2);
        line-height: 40px;
    }

    .menu {
        display: block;
    }

    .site-nav a {
        width: 100%;
    }

    .page-heading h1 {
        font-size: 2em;
    }

    .label-left,
    .label-right,
    .label-top {
        display: none;
    }


}

@media only screen and (max-width: 320px) and (max-height: 372px) {

    .active-area,
    .active-area-size {
        width: 35rem;
        height: 40rem;
    }

    .box {
        width: 35rem;
    }

    .secret {
        display: none !important;
    }

}

@media only screen and (max-width: 960px) {


    .site-nav ul {
        float: left;
    }

    .site-nav {
        width: 100%;
    }


    .site-nav ul {
        width: 100%;
        position: relative;
        border-top: 1px solid rgba(0,0,0,0);
        transition-duration: 1s;
        -webkit-transition-duration: 1s;
    }

    .site-nav ul.closed {
        max-height: 0px;
    }

    .site-nav ul.open {
        border-top: 1px solid rgba(0,0,0,.4);
        max-height: 500px;
    }

    .menu {
        display: block;
    }    

}

/*@media only screen and (min-width: 1024px) {
    #loading {
        display: none !important;
    }
}*/

/**
 * not inteded to be actual font sizes, but to proportionally scale up the rem
 * grid size based on window width.  Each media size should scale the rem grid
 * so that the window width is roughly between 75 and 100 rems.
 *
 * for heights, can count on appoximate rem height for the following ratios
 * ranges shown are in rems
 *
 * screen |  rem
 * ratio  |  height
 * -------+-----------
 *  4: 3  |   56 -  75
 * 16: 9  |   42 -  56
 *  3: 4  |  100 - 133
 *  9:16  |  133 - 177
 *
 * from this, well define a few reasonable restrictions on layout.
 *
 * content will be arranged on a 5rem grid. for landscape orientations, there
 * will be 12 columns and 8 rows
 */

@media only screen and (max-width: 381px) and (orientation: landscape) {
    :root { font-size: 4px; }
}

@media only screen and (min-width: 382px) and (max-width: 507px) and (orientation: landscape) {
    :root { font-size: 5px; }
}

@media only screen and (min-width: 508px) and (max-width: 678px) and (orientation: landscape) {
    :root { font-size: 7px; }
}

@media only screen and (min-width: 676px) and (max-width: 899px) and (orientation: landscape) {
    :root { font-size: 9px; }
}

@media only screen and (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
    :root { font-size: 12px; }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) and (orientation: landscape) {
    :root { font-size: 16px; }
}

@media only screen and (min-width: 1600px) and (max-width: 2127px) and (orientation: landscape) {
    :root { font-size: 21px; }
    #site-header {
        background-color: rgba(0,0,0,.8);
    }
}

@media only screen and (min-width: 2128px) and (orientation: landscape) {
    :root { font-size: 28px; }
    #site-header {
        background-color: rgba(0,0,0,.8);
    }
}


/*
 * portrait orientations double the font size for each width breakpoint,
 * bringing the number of columns down to 6, and increasing the number of
 * rows to 10.  min-heights are set to ensure there is at least 10.8 rows' worth
 * of vertical space (54rems)
 */

@media only screen and (max-width: 381px) and (orientation: portrait) and (min-height: 432px) {
    :root { font-size: 8px; }
    .map p {
        color: #fff !important;
    }
    #job-safety {
        background-position: 60% 50%;
    }
}

@media only screen and (min-width: 382px) and (max-width: 507px) and (orientation: portrait) and (min-height: 540px) {
    :root { font-size: 10px; }
    .map p {
        color: #fff !important;
    }
    #job-safety {
        background-position: 80% 50%;
    }
}

@media only screen and (min-width: 508px) and (max-width: 678px) and (orientation: portrait) and (min-height: 756px) {
    :root { font-size: 14px; }
    .map p {
        color: #fff !important;
    }
}

@media only screen and (min-width: 676px) and (max-width: 899px) and (orientation: portrait) and (min-height: 972px) {
    :root { font-size: 18px; }
}

@media only screen and (min-width: 900px) and (max-width: 1199px) and (orientation: portrait) and (min-height: 1296px) {
    :root { font-size: 24px; }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) and (orientation: portrait) and (min-height: 1728px) {
    :root { font-size: 32px; }
}

@media only screen and (min-width: 1600px) and (max-width: 2127px) and (orientation: portrait) and (min-height: 2268px) {
    :root { font-size: 42px; }
}

@media only screen and (min-width: 2128px) and (orientation: portrait) and (min-height: 3024px) {
    :root { font-size: 56px; }
}

@media only screen and (orientation: landscape) {
    .l-up-1 { margin-top: -5rem; margin-bottom: 5rem; }
    .l-down-1 { margin-top: 5rem; margin-bottom: -5rem; }
    .l-left-1 { margin-left: -5rem; margin-right: 5rem; }
    .l-right-1 { margin-left: 5rem; margin-right: -5rem; }
    .l-up-2 { margin-top: -10rem; margin-bottom: 10rem; }
    .l-down-2 { margin-top: 10rem; margin-bottom: -10rem; }
    .l-left-2 { margin-left: -10rem; margin-right: 10rem; }
    .l-right-2 { margin-left: 10rem; margin-right: -10rem; }
    .l-lock-top { top: 0 !important;}

    .p-show {
        display: none !important
    }

    .portrait { display: none !important; }
    .grid-rows { height: 10em; }
    .grid-active-area { width: 12em; height: 8em; margin-left: -6em; margin-top: -4em; }


    .l-half-width {
        width: 50%;
    }

    .l-half-height {
        height: 50%;
    }  
    
    .l-full-width {
        width: 100%;
    }

    .l-full-height {
        height:100%;
    }

    .l-fill-horizontal {
        width: 100% !important;
        left: 0;
        height: auto !important;
    }

    .l-fill-vertical {
        height: 100% !important;
        width: auto !important;
    }

    .l-row-pull-1 { margin-top: -5rem; margin-bottom: 5rem; }

    .l-crop {
        overflow: hidden;
    }

    .l-box {
        position: absolute;
        width: 30rem;
        height: 25rem;
        text-align: left;
    }

    .l-box.center, .l-box-width.center {
        left: 15rem;
    }

    .l-box-width {
        position: absolute;
        height: auto;
        width: 30rem;
        text-align: left;
    }

    .l-text-align-right {
        text-align: right;
    }
    
    .l-text-align-left{
        text-align: left;
    }

    .l-pad {
        padding: 2.5rem;
    }
    .l-pad-small {
        padding: 1.5rem;
    }


    .l-bottom-half, .l-top-half {
        height: 50% !important;
        width: 100% !important;
    }

    .l-bottom-half {
        bottom: 0 !important;
        top: auto !important;
    }

    .l-top-half {
        top: 0 !important;
        bottom: auto !important;
    }

    .l-right-half, .l-left-half {
        height: 100% !important;
        width: 50% !important;
    }

    .l-left-half {
        left: 0 !important;
        right: auto !important;
    }

    .l-right-half {
        left: auto !important;
        right: 0 !important;
    }    

    .l-lock-right {
        right: 0 !important;
    }
    .l-lock-left {
        left: 0 !important;

    }

    .l-lock-top {
        top: 0 !important;
        margin-top: 0;
    }
    .l-lock-bottom {
        bottom: 0 !important;
        top: auto !important;
    }


    .peg-aliaga {
        top: 35.2%;left: 25.4%;
    }
    .peg-gadani {
        top: 45.9%;left: 46.6%;
    }
    .peg-chittagong {
        top: 48%;left: 60.1%;
    }
    .peg-jiangyin {
        top: 40.5%;left: 73.9%;
    }
    .peg-alang {
        top: 48.8%;left: 49.7%;line-height:.5em;
    }

    #loading p {
        margin-top: 25%;
    }

}

/*
! this is not entirely correct.  These styles should really only be applied at the correct
 minimum ratio set above, as currenty a _technically_ portrait screen can still
 have a landscape layout if it isn't portrait _enough_ (if that makes sense)
 */


.grid {
    pointer-events: none;
    font-size: 5rem;
    display: -moz-flex;
    display: flex;
    -moz-align-items: center;
    align-items: center;
}
.grid-cols {
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    top: 0;
    left: 0;
}
.grid-col {
    display: inline-block;
    width: 1em;
    height: 100%;
    border-left: 1px dotted rgba(255,255,255,0.2);
    margin: 0;
}

.grid-col:nth-child(even) {
    border-left: 1px dashed rgba(255,255,255,0.5);
}
.grid-col:last-child {
    border-right: 1px dotted rgba(255,255,255,0.2);
}


.grid-rows {
    overflow: visible;
    height: 18em;
    position: relative;
}

.grid-row {
    width: 100%;
    height: 1em;
    border-top: 1px dotted rgba(255,255,255,0.2);
    margin: 0;
}

.grid-row:nth-child(even) {
    border-top: 1px dashed rgba(255,255,255,0.5);
}

.grid-row:last-child {
    border-bottom: 1px dotted rgba(255,255,255,0.2);
}

.grid-active-area {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid #fff;
}

.actor {
    position: absolute;
}

.animated {
    position: relative;
}



/*.squish .box {
    background: rgba(170, 0, 221, 0.3);
}

.tall-box {
    background: rgba(170, 102, 0, 0.3);
}

.box {
    background: rgba(170, 0, 0, 0.3);
}

.box-width {
    background: rgba(170, 102, 102, 0.3);
}

*/
/*.frame {
    width: 100%;
    border-top: 2px solid rgba(255,0,0,0.6);
}

.frame .frame {
    border-top: 2px dashed rgba(255,0,0,0.4);
}*/

.grid {
    display: none;
    /*pointer-events: none;*/
}
#timeline {
    /*visibility: hidden;*/
    pointer-events: none;
}

#wrap .credits h3 ~ p {
    color: #999;
    font-size: 75%;
}
#wrap .credits p em {
    color: white;
}
.credits img.bio {
    float: right;
    width: 50%;
    height: auto;
    margin: 0 0 10px 20px;
}