body {
    background-color: #6c6d70 !important;
    color: #fff;
}

p {
    color: #fff;
}

section.intro p {
    color: #fff;
}

section.intro p.date {
    color: #fff;
}

section h2 {
    color: #efb622;
    pa`dding-top: 80px;
    font-style: italic;
    font-weight: 400;
}

footer {
    background-color: #6c6d70 !important;
}

footer p {
    color: #fff;
}

.clear {
    height: 50px;
}

.clear-big {
    height: 150px;
}

.center {
    text-align: center !important;
    margin: 0 auto !important;
}

.fullContent .wrapper {
    position: relative;
}

.fullContent .varGraphic {
    width: 100%;
}

.moreGraphics .SCMP_links a .work p span {
        color: #f0f0f0;
}

/* MAIN GRAPHIC */

.big-graphic {
    height: auto;
    position: relative;
}

.shenzhen {
    position: absolute;
    left: 20%;
    top: 20px;
}

.shenzhen h3 {
    font-size: 24px;
    font-style: italic;
    font-weight: 100;
}

.hongkong {
    position: absolute;
    right: 20%;
    top: 20px;
}

.hongkong h3 {
    font-size: 24px;
    font-style: italic;
    font-weight: 100;
}

.left-heads {
    position: absolute;
    left: 120px;
    width: 163px;
    z-index: 2;
}

.right-heads {
    position: absolute;
    right: 120px;
    width: 176px;
    z-index: 2;
}

.graphic-container {
    width: 100%;
    margin: 120px auto;
    height: auto;
}

.graphic-container .svgGraphic {
    max-width: 425px;
    width: 100%;
}

.graphic {
    position: relative;
    z-index: 1;
}

.graphic-off {
    overflow: hidden;
    height: 0;
    width: 0;
}

.graphic.off {
    display: none;
}

#evolution {
    max-width: 550px;
    width: 100%;
}

.icon-evolution {
    width: 100%;
    margin: 0 auto;
}

.fullContent.social a:hover {
    border: 1px solid grey;
}


/* FIXED HEAD */

.show {
    display: block;
    position: absolute;
}

.hide {
    display:  none;
    position:fixed;
}

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 40px;
    z-index: 100;
    background-color: #6c6d70;
    box-shadow: 0 4px 6px -6px #000;
    transition: 0.1s ease all;
}

.sticky.off {
    opacity: 0;
}


/* -------------------------
SLIDERS
---------------------------*/

.slider {
    position: relative;
}

.slider .controls {
    position: absolute;
    width: 98%;
    height: auto;
    bottom: 0;
    left: 1%;
    z-index: 10;
}

.slider .controls li {
    border: 1px solid #d3d2d2;
    width: 47px;
    height: 47px;
    transition: all ease 1s;
    position: relative;
}

.slider .controls li.forward {
    float: right;
    right: 4%;
}

.slider .controls li.forward::before {
    content: url(../img/empty.png);
    width: 15px;
    height: 15px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    position: absolute;
    top: 15px;
    left: 13px;
    background: none;
    transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.slider .controls li.backward {
    float: left;
    left: 4%;
}

.slider .controls li.backward::before {
    content: url(../img/empty.png);
    width: 15px;
    height: 15px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    position: absolute;
    top: 15px;
    left: 13px;
    background: none;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin-left: 5px;
}

.slider .controls li:hover {
    border: 1px solid grey;
    cursor: pointer;
}

.slider .tabs {
    position: absolute;
    width: 70%;
    height: auto;
    bottom: 10px;
    left: 15%;
    text-align: center;
    z-index: 10;
}

.slider .tabs li {
    transition: all ease 1s;
    display: inline-block;
    width: 15px;
    height: 15px;
    border: solid #d0d0d0 3px;
    border-radius: 100%;
    cursor: pointer;
}

.slider .tabs li:hover {
    border: solid black 3px;
}

.slider .tabs li.current {
    border: solid #efb622 3px;
}

#slider_01 {
    padding-bottom: 60px;
    margin-bottom: 50px;
}

#slider_01 .items {
    position: relative;
    width: 100%;
    height: auto;
}

.article .related .wrapper a .headline {
    color: #fff;
}

.article .related .wrapper a .date {
    color: #f0f0f0;
}

.article .related .wrapper:before {
    color: #f0f0f0;
}


/*  SCROLL SECTIONS */

#pin1 {
    width: 100%;
    height: 578px;
    text-align: center;
    position: relative;
}

#pin1 .city:after {
    content: url(../svg/continue.svg);
    position: absolute;
    top: -25%;
    left: 15px;
    width: 19px;
    height: 144px;
    z-index: 3000;
}

#pin1 .city {
    width: 100%;
    max-width: 1400px;
    height: auto;
    min-height: 578px;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#pin1 .city .shoot {
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0;
    opacity: 0;
    transition: all ease 1s;
}

#pin1 .city.active .shoot {
    top: -10%;
    transition: all ease 1s;
}

#pin1 .city.active {
    margin: -10% auto 0 auto;
}

#pin1 .city .shoot.view0 {
    opacity: 1;
    z-index: 10;
}

#pin1 .city .shoot.view1 {
    z-index: 11;
}

#pin1 .city .shoot.view2 {
    z-index: 12;
}

#pin1 .city .shoot.view3 {
    z-index: 13;
}

#pin1 .city .shoot.view4 {
    z-index: 14;
}

#pin1 .city p {
    font-size: 14px;
    font-weight: 100;
    line-height: 1.3em;
    position: absolute;
    width: 300px;
    left: calc(25% - 170px);
    text-align: left;
    top: 4%;
    padding: 15px;
    opacity: 0;
    background-color: black;
}

#pin1 .city p.view0 {
    z-index: 10;
}

#pin1 .city p.view1 {
    z-index: 11;
}

#pin1 .city p.view2 {
    z-index: 12;
}

#pin1 .city p.view3 {
    z-index: 13;
}

#pin1 .city p.view4 {
    z-index: 14;
}

@media(max-width:1024px) {
    #pin1 .city p {
        left: calc(28% - 170px);
        text-align: left;
        top: -2%;
    }
    #pin1 .city.active .shoot {
        top: 4%;
    }
    #pin1 .city p {
        left: calc(50% - 160px);
        text-align: center;
        top: -29%;
    }
    #pin1 .city p {
        background-color: #6c6d70;
    }
}

@media(max-width: 780px) {
    #pin1 .city:after {
        display: none;
    }
    #pin1 .city.active .shoot {
        top: 10%;
    }
    #pin1 .city p {
        left: calc(51% - 160px);
        top: -30%;
        text-align: center;
    }
}

@media(max-width: 500px) {
    #pin1 .city.active .shoot {
        top: -13%;
    }
    #pin1 .city p {
        left: calc(61% - 200px);
        text-align: center;
        top: -40%;
        background-color: #6c6d70;
        text-align: center;
    }
}

@media(max-width: 380px) {}

@media(max-width: 360px) {
    #pin1 .city.active .shoot {
        top: -8%;
    }
    #pin1 .city p {
        font-size: 12px;
        top: -36%;
        left: calc(65% - 200px);
    }
}

@media(max-width: 320px) {}


/* BACKGROUND IMAGES */

.quote {
    font-family: 'Merriweather', serif;
    max-width: 210px;
    margin-left: 20%;
    margin-top: 120px;
    font-style: italic;
    position: absolute;
    text-align: left;
}

.quote.black {
    color: #000;
}

#g1-ia {
    background: url(../img/1980ok.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

#g1-ib {
    background: url(../img/1990ok.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

#g1-ic {
    background: url(../img/2000ok.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

#g2-ia {
    background: url(../img/1970ok1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

#g2-ib {
    background: url(../img/1990ok1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

#g2-ic {
    background: url(../img/2004ok.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

#g3-ia {
    background: url(../img/1987ok.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

#g3-ib {
    background: url(../img/19902ok.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

#g3-ic {
    background: url(../img/2000s2ok.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

#g4-ia {
    background: url(../img/1981ok.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

#g4-ib {
    background: url(../img/1990.ok2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

#g4-ic {
    background: url(../img/2000ok1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 305px;
}

.back-images {
    min-height: 305px;
}

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

.no-parallax {
    display: none; 
}

.s-screen {
    display: none;
}

.m-screen {
    display: none;
}

.l-screen {
    display: block;
}

.xl-screen {
    display: none;
}

option {
    background-color: #6c6d70 !important;
    color: #fff;
}