@charset "UTF-8";

@font-face {
    font-family:'GCR';
    src:url(fonts/GCR-44f445e7f4bce9f78c17d453adea3f87.eot);
    src:url(fonts/GCR-44f445e7f4bce9f78c17d453adea3f87.eot?#iefix) format("embedded-opentype"),url(fonts/GCR-cd409bb7b3ac9716e8a93f6285d83f9c.woff) format("woff"),url(fonts/GCR-8ca8fd0d407200999bab3148421637a0.ttf) format("truetype"),url(fonts/GCR-c41380f4ae3257378f3782c69355393e.svg#GestaCondensedRegular) format("svg");
    font-weight:400;
    font-style:normal
}

@font-face {
    font-family:'GCM';
    src:url(fonts/GCM-0c92995c45455e6a094feaa29fcb2f6a.eot);
    src:url(fonts/GCM-0c92995c45455e6a094feaa29fcb2f6a.eot?#iefix) format("embedded-opentype"),url(fonts/GCM-c7af78fd60530c9913039f5f5d5e493b.woff) format("woff"),url(fonts/GCM-e67c688a243a96e2e2559cea60235496.ttf) format("truetype"),url(fonts/GCM-ea479baa77c92b168e928865528aeb18.svg#GestaCondensedMedium) format("svg");
    font-weight:400;
    font-style:normal
}

@font-face {
    font-family:'icomoon';
    src:url(fonts/icomoon-cdb09676e68ad264e3fe19feab75df36.eot);
    src:url(fonts/icomoon-cdb09676e68ad264e3fe19feab75df36.eot?#iefix) format("embedded-opentype"),url(fonts/icomoon-62d69f59acdefed03b8d4c024ebc7818.woff) format("woff"),url(fonts/icomoon-ab76cef9a2f8a0c227f669db7d3480c7.ttf) format("truetype"),url(fonts/icomoon-1c31cc1e010ddc2a618b509541b7c2da.svg#icomoon) format("svg");
    font-weight:400;
    font-style:normal
}

html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

body {
    font-family:'GCR',Arial,Sans-serif;
    color:#310c04;
    background:#e9e7e7;
}

h1,h1 a,h1 a span {
    color:#fff;
}

h2,h3,h4,h6 {
    font-family:'GCM',Arial,Sans-serif;
    font-weight:400;
}

h2 {
    font-size:41px;
    color:#310c04;
    margin:-7px 10px 16px;
    padding:0 0 4px;
    position:relative;
    border-bottom:5px solid #86716d
}

h3 {
    font-size:18px;
    text-transform:uppercase;
    margin:0 10px;
    padding:6px 10px 17px 0;
    color:#86716d;
    border-top:5px solid #86716d
}

:focus {
    outline:none;
}

#imago img {
    max-width:100%; 
    max-height:100%;
    margin:auto;
    display:block;
    cursor: pointer;
}

#extra img {
    max-width:100%; 
    max-height:100%;
    margin:auto;
    display:block;
    cursor: pointer;
}

#ie {
    position:fixed;
    top:100px;
    width:40%;
    left:45%;
    height:50%;
    z-index:1;
    color:#fff!important
}

h3 {
    color: #ada130;
}

body .hidden {
    display:none
}

#blurb p {
    font-family:'GCM',Arial,Sans-serif;
    margin: 10px;
}

/* Mobile styles */
@media only screen and (max-width: 619px) {
    #interactive-content {
        position: absolute;
        top: 0px;
        left: 0px;
        display: inline-block;
        padding: 20px;
        background-color: #5a3c36;
        width: calc(100% - 40px);
        color: white;
        overflow: scroll;
    }
    #play {
        position: relative;
        top: 20px;
        left: 20px;
        width: 60px;
        height: 60px;
        cursor: pointer;
        background-image: url(../images/play-video.png);
        background-repeat:no-repeat;
        background-position: center center; 
        margin-bottom: 20px;
        visibility: hidden;
    }
    body #interactive-hub #map {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        overflow:hidden;
        display: none;
        background-color: #80a692;
    }

    body #interactive-hub #map.dragging {
    }

    body #interactive-hub #map>svg {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        display: none;
    }
    #overlord {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: auto;
        background-color: black;
        z-index: 99999999999;
        visibility: visible;
        margin-top: 20px;
    }
    #footer-bar {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 60px;
        background-color: #86716d;
        -webkit-box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        -moz-box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        z-index: 99999999;
    }
    #extramedia {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: auto;
        background-color: #f6f6e5;
        z-index: 999999;
        visibility: visible;
        margin-top: 20px;
    }
    .vidz {
        width: 100%;
        height: 100%;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    h3 {
        margin-top: 20px;
    }
    #closevid {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background-color: white;
        background-image: url(../images/close.png);
        background-repeat:no-repeat;
        background-position: center center; 
        cursor: pointer;
        z-index: 9999999999999;
        border-radius: 50%;
        visibility: hidden;
    }
    video {
        width: 100%;
        height: 100%;
    }
    #imago {
        width: 100%;
        margin-left: 0px;
        margin-bottom: 20px;
        margin-top: 20px; 
    }
    #extra {
        width: 90%;
        margin-left: 5%;
        margin-bottom: 20px;
    }
    #blurb {
        position: relative;
        margin-top: 100px;
    }
    #clickRight {
        position: relative;
        top: 0px;
        right: 0px;
        width: 80px;
        height: 80px;
        cursor: pointer;
        background-image: url(../images/right.png);
        background-repeat:no-repeat;
        background-position: center center; 
        float: right;
    }
    #clickLeft {
        position: relative;
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        cursor: pointer;
        background-image: url(../images/left.png);
        background-repeat:no-repeat;
        background-position: center center; 
        float: left;
        visibility: hidden;
    }
    body #interactive-hub {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        overflow:visible;
        background-color: #5a3c36
    }
    #audio-page {
        visibility: hidden;
        background-color: #f6f6e5;
    }
    #navcontainer ul {
        margin-top: 20px;
        padding: 0;
        list-style-type: none;
        text-align: center;
        font-family:'GCM',Arial,Sans-serif;
        font-weight:400;
        font-size:1em;
    }

    #navcontainer ul li { 
        display: inline; 
    }

    #navcontainer ul li a {
        text-decoration: none;
        padding: 0.3em;
        color: white;
    }

    #navcontainer ul li a:hover {
        color: black;
    }

    body #interactive-hub #map>svg circle {
        opacity:1;
    }

    body #interactive-hub #map>svg circle.shadow {
        cursor:pointer;
        z-index: 99999999999;
    }

    body #interactive-hub #map>svg circle.extra {
        cursor:pointer;
        z-index: 99999999999;
    }

    #audio-page {
        position: fixed;
        width:100%;
        height:100%;
        background-color: white;
        overflow:auto;
        z-index:1;
    }

    #audioCabinet {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 60px;
        background-color: #86716d;
        -webkit-box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        -moz-box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        z-index: 999999999;
    }

    .audio-player {
        position: relative;
        display: inline-block;
        top: 0px;
        left: 0px;
        width:20px;
        height:70px;
        float: left;
        display: none;
        z-index: 999999999;
    }

    #play-btn {
        position:absolute;
        float: left;
        top: 5px;
        left: 5px;
        width:50px;
        height:50px;
        background-image:url(../images/audio-play.png);
        background-repeat:no-repeat;
        z-index:1500;
        cursor:pointer;
    }

    .progress-holder {
        width: 80px;
        position:absolute;
        float: left;
        top: 0;
        left:50px;
        right: 15px;
        height:60px;
        overflow:hidden;
        text-align:center;
        margin:0 auto;
        z-index: 999999999;
        display: none;
    }

    .progress-grey {
        position:absolute;
        top:0;
        left:0;
        z-index:10;
        z-index: 999999999;
    }

    .progress-bar {
        height:100%;
        width:1%;
        float:left;
        position:absolute;
        overflow:hidden;
        z-index:20;
        z-index: 999999999;
    }

    .audio-label{
        display: inline-block;
        position: relative;
        float: right;
        height: 60px;
        top: 0px;
        line-height: 60px;
        color: white;
        font-size: 1.1em;
        text-decoration: none;
    }
    .letter-label {
        display: inline-block;
        position: relative;
        float: right;
        height: 60px;
        top: 0px;
        line-height: 60px;
        color: white;
        font-size: 1.1em;
        text-decoration: none;
        margin-left: 40px;
    }
    .audio-controls {
        display: inline-block;
        position: relative;
        float: right;
        height: 60px;
        top: 0px;
    }
    .playlist {
        margin-right: 15px;
    }
    .playlist ul li { 
        display: inline-block;
        margin-top: -15px;
        width: 15px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: white;
        font-size: 1em;
        text-decoration: none;
    }

    .playlist ul li a {
        color: #bfb3a5;
        text-decoration: none;
    }

    .playlist ul li a:hover {
        color: #bfb3a5;
    }

    #video-intro {
        visibility: visible;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 9999999999;
    }

    .play-intro {
        position: absolute;
        top: 25px;
        left: 50%;
        margin-left:-150px;
        //margin-top: -150px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background-image:url(../images/intro.png);
        background-repeat:no-repeat;
        cursor: pointer!important;
        color: black;
        opacity: 0.7;
        z-index: 99999999999;
    }

    .skip-intro {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        line-height: 50px;
        text-align: center;
        cursor: pointer!important;
        color: white;
        opacity: 0.7;
        z-index: 99999999999;
        visibility: hidden;
    }

    .intro-text {
        position: absolute;
        top: 340px;
        left: 50%;
        margin-left:-40%;
        width: 80%;
        color: white;
        text-align: center;
        font-family:'GCM',Arial,Sans-serif;
        font-size: 1em;
        z-index: 99999999999;

    }

    .play-intro h1 {
        color: black !important;
        text-align: center !important;
        cursor: pointer !important;
    }

    .videoContainer {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: black;
    }

    .videoContainer img {
        width: 100%;
        height: auto;
    }
    .textBox {
        width: calc(100% - 40px);
        padding: 20px;
        margin-bottom: 80px;
    }
    .textBox p {
        color: black;
        font-size: 1.1em;
        line-height: 1.4em;
    }
    .textBox img {
        position: relative;
        width: 100%;
        height: auto;
    }
    .textBox small {
        color: black;
    }
    .textBox h2 {
        width: 80%;
        font-size: 1.7em;
        margin-left: 0px;
        padding-right: 0px;
        padding: 0px;
        border: none;
    }
    .textBox .intro {
        font-family:'GCM';
    }
    #close-personal-stories {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background-color: #5b4039;
        background-image: url(../images/close.png);
        background-repeat:no-repeat;
        background-position: center center; 
        cursor: pointer;
        z-index: 9999999;
        border-radius: 50%;
        visibility: hidden;        
    }

    .extraBox p {
        color: white;
        font-size: 1.1em;
        line-height: 1.4em;
    }
    .extraBox img {
        position: relative;
        width: 100%;
        height: auto;
    }
    .extraBox small {
        color: white;
    }
    .extraBox h2 {
        font-size: 1.9em;
        margin-left: 0px;
        padding-right: 0px;
        padding: 0px;
    }
    .extraBox .intro {
        font-family:'GCM';
    }
    #private {
        position: absolute;
        display: inline-block;
        margin-top: 20px;
        bottom: 60px;
        left: 10px;
        width: 197px;
        height: 209px;
        z-index: 1;
        background-image: url(../images/private_lives.png);
        background-repeat:no-repeat;
        cursor: pointer;
    }
    #godley {
        position: absolute;
        display: inline-block;
        margin-top: 20px;
        bottom: 60px;
        right: 10px;
        width: 197px;
        height: 209px;
        z-index: 999;
        background-image: url(../images/private_lives.png);
        background-repeat:no-repeat;
    }
    .bottom {
        margin-bottom: 209px;
    }
    #playlist {
        display: block;

    }
    #letterlist {
        display: none;

    }
    .epi {
        margin-top: 50px;
    }
}

/* Tablet styles */
@media only screen and (min-width: 620px) and (max-width: 934px) {
    #interactive-content {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        padding: 20px;
        background-image:url(brown.png);
        background-repeat:repeat;
        width: 280px;
        color: white;
        -webkit-box-shadow: 10px 10px 23px -4px rgba(0,0,0,0.89);
        -moz-box-shadow: 10px 10px 23px -4px rgba(0,0,0,0.89);
        box-shadow: 10px 10px 23px -4px rgba(0,0,0,0.89);
    }
    #play {
        position: relative;
        top: 20px;
        left: 0px;
        width: 60px;
        height: 60px;
        cursor: pointer;
        background-image: url(../images/play-video.png);
        background-repeat:no-repeat;
        background-position: center center; 
        visibility: hidden;
    }
    body #interactive-hub #map {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        overflow:hidden;
        background:#80a692;
        cursor:grab;
        cursor:-webkit-grab;
        cursor:-moz-grab
    }

    body #interactive-hub #map.dragging {
        cursor:grabbing;
        cursor:-webkit-grabbing;
        cursor:-moz-grabbing
    }

    body #interactive-hub #map>svg {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        padding-bottom:80px
    }
    #overlord {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 99999999999;
        visibility: hidden;
    }
    .vidz {
        width: 100%;
        height: 100%;
    }
    #closevid {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background-color: white;
        background-image: url(../images/close.png);
        background-repeat:no-repeat;
        background-position: center center; 
        cursor: pointer;
        z-index: 9999999;
        border-radius: 50%;
        visibility: hidden;
    }
    video {
        width: 100%;
        height: 100%;
    }
    #imago {
        width: 60%;
        margin-left: 20%;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    #blurb {
        margin-top: 30px;
    }
    #clickRight {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 80px;
        height: 80px;
        cursor: pointer;
        background-image: url(../images/right.png);
        background-repeat:no-repeat;
        background-position: center center;
        -webkit-appearance: none;
        -moz-appearance:    none;
        appearance:         none;
    }
    #clickLeft {
        position: fixed;
        top: 20px;
        left: 340px;
        width: 80px;
        height: 80px;
        cursor: pointer;
        background-image: url(../images/left.png);
        background-repeat:no-repeat;
        background-position: center center; 
        visibility: hidden;
    }
    body #interactive-hub {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        min-width:750px;
        overflow:hidden
    }
    #extramedia {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: #f6f6e5;
        z-index: 999999;
        visibility: hidden;
    }
    #closeextra {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background-color: black;
        background-image: url(../images/close.png);
        background-repeat:no-repeat;
        background-position: center center; 
        cursor: pointer;
        z-index: 9999999;
        border-radius: 50%;
        visibility: hidden;
    }
    #close-personal-stories {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background-color: #5b4039;
        background-image: url(../images/close.png);
        background-repeat:no-repeat;
        background-position: center center; 
        cursor: pointer;
        z-index: 9999999;
        border-radius: 50%;
        visibility: hidden;        
    }
    #audio-page {
        visibility: hidden;
    }
    #navcontainer ul {
        margin-top: 20px;
        padding: 0;
        list-style-type: none;
        text-align: center;
        font-family:'GCM',Arial,Sans-serif;
        font-weight:400;
        font-size:1em;
    }

    #navcontainer ul li { 
        display: inline; 
    }

    #navcontainer ul li a {
        text-decoration: none;
        padding: .2em .3em;
        color: white;
    }

    #navcontainer ul li a:hover {
        color: black;
    }

    body #interactive-hub #map>svg circle {
        opacity:1;
    }

    body #interactive-hub #map>svg circle.shadow {
        cursor:pointer;
    }

    body #interactive-hub #map>svg circle.extra {
        cursor:pointer;
    }

    #audio-page {
        position: fixed;
        width:100%;
        height:100%;
        background-color: white;
        overflow:auto;
        z-index:1
    }

    #audioCabinet {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 60px;
        background-color: #86716d;
        -webkit-box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        -moz-box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        z-index: 999999999;
    }

    .audio-player {
        position: relative;
        top: 0px;
        left: 0px;
        width:310px;
        height:70px;
        display:inline-block;
        float: left;
        display: none;
        z-index: 999999999;
    }

    #play-btn {
        position:absolute;
        float: left;
        top: 5px;
        left: 5px;
        width:50px;
        height:50px;
        background-image:url(../images/audio-play.png);
        background-repeat:no-repeat;
        z-index:1500;
        cursor:pointer;
    }

    .progress-holder {
        width: 220px;
        position:absolute;
        float: left;
        top: 0;
        left:50px;
        right: 15px;
        height:60px;
        overflow:hidden;
        text-align:center;
        margin:0 auto;
        z-index: 999999999;
    }

    .progress-grey {
        position:absolute;
        top:0;
        left:0;
        z-index:10;
        z-index: 999999999;
    }

    .progress-bar {
        height:100%;
        width:1%;
        float:left;
        position:absolute;
        overflow:hidden;
        z-index:20;
        z-index: 999999999;
    }

    .audio-label {
        display: block;
        position: relative;
        float: left;
        height: 60px;
        top: 0px;
        line-height: 60px;
        color: white;
        font-size: 2em;
        text-decoration: none;
        margin-left: 20px;
        margin-right: 20px;
    }
    .letter-label {
        display: block;
        position: relative;
        float: left;
        height: 60px;
        top: 0px;
        line-height: 60px;
        color: white;
        font-size: 2em;
        text-decoration: none;
        margin-left: 20px;
        margin-right: 20px;
    }
    .audio-controls {
        display: block;
        position: relative;
        float: right;
        height: 60px;
        top: 0px;
    }

    .playlist ul {
        position: relative;
        top: 0px;
    }

    .playlist ul li { 
        display: inline-block;
        margin-top: -15px;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: white;
        font-size: 2em;
        text-decoration: none;
    }

    .playlist ul li a {
        color: #bfb3a5;
        text-decoration: none;
    }

    .playlist ul li a:hover {
        color: #bfb3a5;
    }

    #video-intro {
        visibility: visible;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 9999999999;
    }

    .play-intro {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-150px;
        margin-top: -150px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background-image:url(../images/intro.png);
        background-repeat:no-repeat;
        cursor: pointer!important;
        color: black;
        opacity: 0.7;
        z-index: 99999999999;
    }

    .skip-intro {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        line-height: 50px;
        text-align: center;
        cursor: pointer!important;
        color: white;
        opacity: 0.7;99;
        z-index: 99999999999;
        visibility: hidden;
    }

    .intro-text {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-40%;
        margin-top: 170px;
        width: 80%;
        color: white;
        text-align: center;
        font-family:'GCM',Arial,Sans-serif;
        font-size: 1.3em;
        z-index: 99999999999;

    }

    .play-intro h1 {
        color: black !important;
        text-align: center !important;
        cursor: pointer !important;
    }

    .videoContainer {
        width: 100%;
        height: 100%;
        background-color: black;
    }

    .videoContainer img {
        width: 100%;
        height: auto;
    }
    .extraBox {
        width: 550px;
        margin: 0 auto;
        margin-top: 80px;
        margin-bottom: 80px;
    }
    .extraBox p {
        color: black;
        font-size: 1.1em;
        line-height: 1.4em;
    }
    .extraBox img {
        position: relative;
        width: 100%;
        height: auto;
    }
    .extraBox small {
        color: black;
    }
    .extraBox h2 {
        font-size: 1.9em;
        margin-left: 0px;
        padding-right: 0px;
        padding: 0px;
    }
    .extraBox .intro {
        font-family:'GCM';
    }
        .textBox {
        width: 550px;
        margin: 0 auto;
        margin-top: 80px;
        margin-bottom: 80px;
    }
    .textBox p {
        color: black;
        font-size: 1.1em;
        line-height: 1.4em;
    }
    .textBox img {
        position: relative;
        width: 100%;
        height: auto;
    }
    .textBox small {
        color: black;
    }
    .textBox h2 {
        font-size: 1.9em;
        margin-left: 0px;
        padding-right: 0px;
        padding: 0px;
    }
    .textBox .intro {
        font-family:'GCM';
    }
    #private {
        position: fixed;
        bottom: 60px;
        left: 225px;
        width: 197px;
        height: 209px;
        z-index: 999;
        background-image: url(../images/private_lives.png);
        background-repeat:no-repeat;
        cursor: pointer;
    }
    #godley {
        position: fixed;
        bottom: 60px;
        right: 50px;
        width: 197px;
        height: 209px;
        z-index: 999;
        background-image: url(../images/private_lives.png);
        background-repeat:no-repeat;
    }
    #playlist {
        display: block;

    }
    #letterlist {
        display: none;
    }
}

/* Desktop styles */
@media only screen and (min-width: 935px) {
    #interactive-content {
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 20px;
        background-image:url(brown.png);
        background-repeat:repeat;
        width: 280px;
        height: 100%;
        color: white;
        -webkit-box-shadow: 10px 10px 23px -4px rgba(0,0,0,0.89);
        -moz-box-shadow: 10px 10px 23px -4px rgba(0,0,0,0.89);
        box-shadow: 10px 10px 23px -4px rgba(0,0,0,0.89);
    }
    #play {
        position: relative;
        float: right;
        right: 20px;
        width: 60px;
        height: 60px;
        cursor: pointer;
        background-image: url(../images/play-video.png);
        background-repeat:no-repeat;
        background-position: center center; 
        visibility: hidden;
    }
    body #interactive-hub #map {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        overflow:hidden;
        background:#80a692;
        cursor:grab;
        cursor:-webkit-grab;
        cursor:-moz-grab
    }
    body #interactive-hub #map.dragging {
        cursor:grabbing;
        cursor:-webkit-grabbing;
        cursor:-moz-grabbing
    }

    body #interactive-hub #map>svg {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        padding-bottom:80px
    }
    #overlord {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 99999999999;
        visibility: hidden;
    }
    .vidz {
        width: 100%;
        height: 100%;
    }
    #closevid {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background-color: white;
        background-image: url(../images/close.png);
        background-repeat:no-repeat;
        background-position: center center; 
        cursor: pointer;
        z-index: 99999999999;
        border-radius: 50%;
        visibility: hidden;
    }
    video {
        width: 100%;
        height: 100%;
    }
    #imago {
        width: 60%;
        margin-left: 20%;
        margin-bottom: 20px;
        margin-top: 20px;
        -webkit-box-shadow: 10px 10px 23px -4px rgba(0,0,0,0.89);
        -moz-box-shadow: 10px 10px 23px -4px rgba(0,0,0,0.89);
        box-shadow: 10px 10px 23px -4px rgba(0,0,0,0.89);
    }
    #blurb {
        margin-top: 30px;
    }
    #clickRight {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 80px;
        height: 80px;
        cursor: pointer;
        background-image: url(../images/right.png);
        background-repeat:no-repeat;
        background-position: center center;
        -webkit-appearance: none;
        -moz-appearance:    none;
        appearance:         none;
    }
    #clickLeft {
        position: fixed;
        top: 20px;
        left: 340px;
        width: 80px;
        height: 80px;
        cursor: pointer;
        background-image: url(../images/left.png);
        background-repeat:no-repeat;
        background-position: center center; 
        visibility: hidden;
    }
    body #interactive-hub {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        min-width:750px;
        overflow:hidden;
    }
    #footer-bar {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 60px;
        background-color: #86716d;
        -webkit-box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        -moz-box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        z-index: 99999999;
    }
    #extramedia {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: #f6f6e5;
        z-index: 99999999999;
        visibility: hidden;
        overflow: auto;
    }
    #closeextra {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background-color: #5b4039;
        background-image: url(../images/close.png);
        background-repeat:no-repeat;
        background-position: center center; 
        cursor: pointer;
        z-index: 99999999999;
        border-radius: 50%;
        visibility: hidden;
    }
    #close-personal-stories {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background-color: #5b4039;
        background-image: url(../images/close.png);
        background-repeat:no-repeat;
        background-position: center center; 
        cursor: pointer;
        z-index: 9999999;
        border-radius: 50%;
        visibility: hidden;        
    }
    .textBox {
        width: 550px;
        margin: 0 auto;
        margin-top: 80px;
        margin-bottom: 80px;
    }
    .textBox p {
        color: black;
        font-size: 1.1em;
        line-height: 1.4em;
    }
    .textBox img {
        position: relative;
        width: 100%;
        height: auto;
    }
    .textBox small {
        color: black;
    }
    .textBox h2 {
        font-size: 1.9em;
        margin-left: 0px;
        padding-right: 0px;
        padding: 0px;
    }
    .textBox .intro {
        font-family:'GCM';
    }
    #audio-page {
        visibility: hidden;
        background-color: #f6f6e5;
    }
    .audioimage {
        width: 550px;
        height: 358px;
    }
    .audioimage img {
        width: 100%;
        height: auto;
    }
    .audioimagebutton {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        width: 100px;
        height: 100px;
        background-image: url(../images/audio-imageplay.png);
        background-repeat:no-repeat;
        background-position: center center; 
        cursor: pointer;
    }
    #navcontainer ul {
        margin-top: 20px;
        padding: 0;
        list-style-type: none;
        text-align: center;
        font-family:'GCM',Arial,Sans-serif;
        font-weight:400;
        font-size:1em;
    }

    #navcontainer ul li { 
        display: inline; 
    }

    #navcontainer ul li a {
        text-decoration: none;
        padding: .2em .3em;
        color: white;
    }

    #navcontainer ul li a:hover {
        color: black;
    }

    body #interactive-hub #map>svg circle {
        opacity:1;
        z-index: 99999999999;
    }

    body #interactive-hub #map>svg circle.shadow {
        cursor:pointer;
        z-index: 99999999999;
    }

    body #interactive-hub #map>svg circle.extra {
        cursor:pointer;
        z-index: 99999999999;
    }
    body #interactive-hub #map>svg circle.popup {
        opacity: 0.3;
        fill: #a9a047;
        stroke: white;
        stroke-width: 20;
        z-index: 99999999999;
    }
    #audio-page {
        position: fixed;
        width:100%;
        height:100%;
        background-color: #f6f6e5;
        overflow:auto;
        z-index:1
    }

    #audioCabinet {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 60px;
        background-color: #86716d;
        -webkit-box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        -moz-box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        box-shadow: 10px 10px 23px 10px rgba(0,0,0,0.89);
        z-index: 999999999;
    }

    .audio-player {
        position: relative;
        top: 0px;
        left: 0px;
        width:310px;
        height:70px;
        display:inline-block;
        float: left;
        display: none;
        z-index: 999999999;
    }

    #play-btn {
        position:absolute;
        float: left;
        top: 5px;
        left: 5px;
        width:50px;
        height:50px;
        background-image:url(../images/audio-play.png);
        background-repeat:no-repeat;
        z-index:1500;
        cursor:pointer;
    }

    .progress-holder {
        width: 220px;
        position:absolute;
        float: left;
        top: 0;
        left:50px;
        right: 15px;
        height:60px;
        overflow:hidden;
        text-align:center;
        margin:0 auto;
        z-index: 999999999;
    }

    .progress-grey {
        position:absolute;
        top:0;
        left:0;
        z-index:10;
        z-index: 999999999;
    }

    .progress-bar {
        height:100%;
        width:1%;
        float:left;
        position:absolute;
        overflow:hidden;
        z-index:20;
        z-index: 999999999;
    }

    .audio-label{
        display: block;
        position: relative;
        float: right;
        height: 60px;
        top: 0px;
        line-height: 60px;
        color: white;
        font-size: 2em;
        text-decoration: none;
        margin-left: 0px;
        margin-right: 0px;
    }
    .letter-label{
        display: block;
        position: relative;
        float: right;
        height: 60px;
        top: 0px;
        line-height: 60px;
        color: white;
        font-size: 2em;
        text-decoration: none;
        margin-left: 0px;
        margin-right: 0px;
    }
    .audio-controls {
        display: block;
        position: relative;
        float: right;
        height: 60px;
        top: 0px;
    }

    .playlist ul {
        position: relative;
        top: 0px;
    }

    .playlist ul li { 
        display: inline-block;
        margin-top: -15px;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: white;
        font-size: 2em;
        text-decoration: none;
    }

    .playlist ul li a {
        color: #bfb3a5;
        text-decoration: none;
    }

    .playlist ul li a:hover {
        color: #bfb3a5;
    }

    #video-intro {
        visibility: visible;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999999999;
    }

    .play-intro {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-150px;
        margin-top: -150px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background-image:url(../images/intro.png);
        background-repeat:no-repeat;
        cursor: pointer!important;
        color: black;
        opacity: 0.7;
        z-index: 99999999999;
    }

    .skip-intro {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        line-height: 50px;
        text-align: center;
        cursor: pointer!important;
        color: white;
        opacity: 0.7;
        z-index: 99999999999;
        visibility: hidden;
    }

    .intro-text {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-40%;
        margin-top: 170px;
        width: 80%;
        color: white;
        text-align: center;
        font-family:'GCM',Arial,Sans-serif;
        font-size: 1.3em;
        z-index: 99999999999;

    }

    .play-intro h1 {
        color: black !important;
        text-align: center !important;
        cursor: pointer !important;
    }

    .videoContainer {
        width: 100%;
        height: 100%;
        background-color: black;
    }

    .videoContainer img {
        width: 100%;
        height: auto;
    }
    #ie {
        position: fixed;
        top: 100px;
        width: 40%;
        left: 45%;
        height: 50%;
        z-index: 1;
        color: white!important;
    }
    .extraBox {
        width: 550px;
        margin: 0 auto;
        margin-top: 80px;
        margin-bottom: 80px;
    }
    .extraBox p {
        color: black;
        font-size: 1.1em;
        line-height: 1.4em;
    }
    .extraBox img {
        position: relative;
        width: 100%;
        height: auto;
    }
    .extraBox small {
        color: black;
    }
    .extraBox h2 {
        font-size: 1.9em;
        margin-left: 0px;
        padding-right: 0px;
        padding: 0px;
    }
    .extraBox .intro {
        font-family:'GCM';
    }
    .preloader {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 99999999999;
        background-image: url(../images/preloader.gif);
        background-repeat:no-repeat;
        background-position: center center; 
    }
    #private {
        position: fixed;
        bottom: 60px;
        left: 265px;
        width: 197px;
        height: 209px;
        z-index: 9;
        background-image: url(../images/private_lives.png);
        background-repeat:no-repeat;
        cursor: pointer;
    }
    #privatelabel {
        position: fixed;
        bottom: 75px;
        left: 470px;
        text-align: left;
        z-index: 9;
        cursor: pointer;
    }

    #godley {
        position: fixed;
        bottom: 60px;
        right: 50px;
        width: 197px;
        height: 209px;
        z-index: 999;
        background-image: url(../images/private_lives.png);
        background-repeat:no-repeat;
    }
    #playlist {
        display: block;

    }
    #letterlist {
        display: none;

    }
}

.letter-label a {
    color: white;
    text-decoration: none;
}