body {
    color: #415F7F;
    font-family: 'Open Sans', sans-serif;
}

.heading {
    color: #36434F;
}

#logo-background {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #FFF;
    z-index: 9996;
}

#logo-container {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    z-index: 9997;
}

#logo {
    /*height: 160px;*/
    /*width: 240px;*/
    height: 340px;
    width: 340px;
    /*background-color: #FFF;*/
    background-color:rgba(255, 255, 255, 0.5);
    margin-right: auto; 
    margin-left: auto;
    text-align: center;
    /*border-radius: 0 0 240px 240px;*/
    border-radius: 240px 240px 240px 240px;
}

#logo img {
    padding-top: 100px;
    width: 200px;
}

#starter-button {
    width: 100%;
}

#starter-button a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #9ADBE2;
    width: 150px;
    height: 40px;
    color: #000;
    text-decoration: none;
    font-size: 20px;
    padding-top: 10px;
    border-radius: 10px;
}

#starter-button a:visited, #starter-button a:hover {
    text-decoration: none;
    color: #000;
}

#starter-button a:hover {
    background-color: #47a6b0;
}

#enlarge-window {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #9adbe2;
    z-index: 9999;
}

.enlarge-inner {
    width: 500px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.enlarge-image {
    width: 100%;
    position: absolute;
    top: 30%;
    margin-left: auto;
    margin-right: auto;
}

.enlarge-image img {
    width: 100%;
}

@media only screen and (max-width: 500px) {
    .enlarge-inner {
        width: 100%;
    }
}

#fullscreen-window {
    overflow: hidden;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    z-index: 9998;
}

#fullscreen-window-close {
    cursor: pointer;
    cursor: hand;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
}

@media only screen and (max-width: 960px) {
    #enlarge-window {
        display: block;
    }
}

.hidden {
    display: none;
}

.has-animation {
    position: absolute;
    display: none;
}

/* Hide pp-nav */
#pp-nav {
    display: none; 
}

#section1 {
    overflow: hidden;
}

#section1-video {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    top:0;
    right:0;
    width: 150%;
    height: 150%;
    background-size: 150% 150%;
    background-color: #5daed6; /* in case the video doesn't fit the whole page*/
    background-image: url('../images/section1-bg.png');
    background-position: center center;
    background-size: contain;
    object-fit: cover; /*cover video background */
}

#section1 .layer {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 400px;
    text-align: center;
    width: 100%;
}

#section1 .layer > p {
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    color: #000;
}

#section1 .scroller {
    width: 100%;
    position: absolute;
    z-index: 9999;
    bottom: 0;
    text-align: center;
    margin-bottom: 20px;
}

#section1 .scroller > img {
    height: 50px;
    cursor: pointer;
    cursor: hand;
}

#section2 {
    background-image: url('../images/scene/bg.png');
    background-position: center;
    background-repeat: repeat-y;
}

.section-scrollable-inner {
    margin-top: 50px;
}

/* Cloud */
.cloud {
    width: 213px;
    height: 71px;
    background-image: url('../images/cloud.png');
    background-position: center;
    background-repeat: no-repeat;
}

.cloud-big {
    width: 317px;
    height: 105px;
    background-image: url('../images/cloud-big.png');
    background-position: center;
    background-repeat: no-repeat;
}

/* Airplane */
.lairp {
    width: 61px;
    height: 32px;
    background-image: url('../images/l-airp.png');
    background-position: center;
    background-repeat: no-repeat;
}

.rairp {
    width: 61px;
    height: 32px;
    background-image: url('../images/r-airp.png');
    background-position: center;
    background-repeat: no-repeat;
}

/* Icons */
.icon-man {
    width: 50px;
    height: 50px;
    background-image: url('../images/icons/man.png');
}

.icon-pilot {
    width: 50px;
    height: 50px;
    background-image: url('../images/icons/pilot.png');
}

.icon-plane {
    width: 50px;
    height: 50px;
    background-image: url('../images/icons/plane.png');
}

.icon-tower {
    width: 50px;
    height: 50px;
    background-image: url('../images/icons/tower.png');
}

.icon-globe {
    width: 50px;
    height: 50px;
    background-image: url('../images/icons/globe.png');
}

/* All scenes */
.scene {
    position: relative;
    width: 960px;
    height: 3250px;
    margin-left: auto;
    margin-right: auto;
}

.scene > div {
    position: absolute;
}

.scene1-left {
    top: 130px;
    left: 45px;
    width: 500px;
    position: absolute;
}

.scene1-left > .header {
    font-size: 26px;
    margin: 0;
}

.scene1-left > .body {
    margin-top: 10px;
    font-size: 14px;
    width: 420px;
}

.scene1-left > .cite-container {
    position: relative;
    padding-left: 30px;
    top: 70px;
    left: 25px;
    width: 400px;
    background-image: url('../images/quote.png');
    background-position: top left;
    background-repeat: no-repeat;
    font-size: 12px;
}

.scene1-left > .cite-container .cite {
    padding-left: 5px;
    padding-right: 30px;
    background-image: url('../images/quote.png');
    background-position: bottom right;
    background-repeat: no-repeat;
}

.scene1-left > .cite-container .cite-sign {
    padding-left: 5px;
}

.scene1-right {
    top: 130px;
    left: 530px;
    width: 381px;
    height: 339px;
}

.scene1-right > img {
    top: 0;
    left: 0;
    position: absolute;
}

.scene1-right > .x3 {
    left: auto;
    right: 75px;
}

.scene1-right > .airplane-cloud {
    top: 80px;
}

.scene1-bottom {
    top: 480px;
    width: 100%;
    height: 200px;
}

div.porthole {
    position: absolute;
    width: 122px;
    height: 173px;
    background-image: url('../images/porthole.png');
}

div.porthole > .icon {
    position: relative;
    left: 36px;
    top: 20px;
}

div.porthole > .number {
    position: relative;
    width: 100%;
    text-align: center;
    top: 20px;
    font-size: 24px;
}

div.porthole.noicon > .number {
    padding-top: 10px;
    font-size: 32px;
}

div.porthole > .text {
    position: relative;
    width: 102px;
    text-align: center;
    top: 10px;
    padding: 10px;
    font-size: 12px;
}

div.porthole.noicon > .text {
    padding-top: 20px;
}

div.porthole.first {
    left: 45px;
}

div.porthole.second {
    left: 232px;
}

div.porthole.third {
    left: 419px;
}

div.porthole.fourth {
    left: 606px;
}

div.porthole.fifth {
    left: 793px;
}

.investment {
    top: 800px;
    width: 100%;
    text-align: center;
}

.investment-inner {
    margin-left: auto;
    margin-right: auto;
    width: 650px;
}

.investment .heading {
    font-size: 22px;
    padding-bottom: 5px;
}

.investment .body {
    font-size: 12px;
}

.rotor-left {
    top: 940px;
    right: 615px;
    height: 100px;
    width: 295px;
    background-image: url('../images/scene/scene2/rotor-left-bg.png');
    background-position: bottom;
    background-repeat: no-repeat;
    color: #064F9A;
}

.rotor-left-text {
    top: 1055px;
    left: 50px;
    width: 260px;
    height: 85px;
    text-align: left;
    font-size: 13px;
    color: #224463;
}

.rotor-left > .label {
    position: absolute;
    font-size: 22px;
    left: 10px;
    bottom: 10px;
    font-weight: 700;
}

.rotor-left > .money {
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-weight: bold;
}

.rotor-left > .money > .number {
    font-size: 68px;
    margin-left: auto;
    margin-right: auto;
}

.rotor-left > .money > .bottom {
    font-size: 22px;
    margin-left: auto;
    margin-right: auto;
}

.rotor-right {
    top: 940px;
    left: 615px;
    height: 100px;
    width: 295px;
    background-image: url('../images/scene/scene2/rotor-right-bg.png');
    background-position: bottom;
    background-repeat: no-repeat;
    color: #099F80;
}

.rotor-right > .label {
    position: absolute;
    font-size: 22px;
    right: 10px;
    bottom: 10px;
    font-weight: 700;
}

.rotor-right > .money {
    position: absolute;
    left: 20px;
    bottom: 10px;
    font-weight: bold;
}

.rotor-right > .money > .number {
    font-size: 68px;
    margin-left: auto;
    margin-right: auto;
}

.rotor-right > .money > .bottom {
    font-size: 22px;
    margin-left: auto;
    margin-right: auto;
}

.rotor-right-text {
    top: 1055px;
    right: 50px;
    width: 260px;
    height: 85px;
    text-align: right;
    font-size: 13px;
    color: #224463;
}

.rotor-container {
    top: 940px;
    width: 100%;
}

.rotor {
    width: 310px;
    height: 310px;
    margin-left: auto;
    margin-right: auto;
    background-image: url('../images/scene/scene2/rotor.png');
    background-position: top center;
    background-repeat: no-repeat;
}

.linker-container {
    top: 1160px;
    width: 100%;
}

.linker {
    width: 689px;
    height: 368px;
    margin-left: auto;
    margin-right: auto;
    background-image: url('../images/scene/scene2/linker.png');
    background-position: top center;
    background-repeat: no-repeat;
}

.letter {
    width: 45px;
    height: 76px;
    background-image: url('../images/scene/scene2/letter.png');
    background-position: center;
    background-repeat: no-repeat;
}

.partnership-container {
    top: 1400px;
    height: 76px;
    width: 100%;
}

.partnership {
    width: 575px; /* 495 (45 * 11) + 80 (8 * 10) */
    height: 76px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.partnership .letter.letter1 {
    position: absolute;
    left: 0;
}

.partnership .letter.letter2 {
    position: absolute;
    left: 53px;
}

.partnership .letter.letter3 {
    position: absolute;
    left: 106px;
}

.partnership .letter.letter4 {
    position: absolute;
    left: 159px;
}

.partnership .letter.letter5 {
    position: absolute;
    left: 212px;
}

.partnership .letter.letter6 {
    position: absolute;
    left: 265px;
}

.partnership .letter.letter7 {
    position: absolute;
    left: 318px;
}

.partnership .letter.letter8 {
    position: absolute;
    left: 371px;
}

.partnership .letter.letter9 {
    position: absolute;
    left: 424px;
}

.partnership .letter.letter10 {
    position: absolute;
    left: 477px;
}

.partnership .letter.letter11 {
    position: absolute;
    left: 530px;
}

.globe-container {
    top: 1530px;
    width: 100%;
    height: 273px;
}

.globe {
    width: 273px;
    height: 273px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.globe img {
    position: absolute;
    top: 0;
    left: 0;
}

.left-arrow {
    top: 1712px;
    left: 247px;
}

.right-arrow {
    top: 1589px;
    left: 556px;
}

.bubble {
    width: 160px;
    height: 160px;
    background-image: url('../images/scene/scene2/bubble.png');
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: #415F7F;
}

.bubble .number {
    font-size: 42px;
}

.bubble .text {
    font-size: 18px;
}

.left-bubble {
    top: 1580px;
    left: 105px;
}

.left-bubble .number {
    padding-top: 30px;
}

.right-bubble .number {
    padding-top: 20px;
}

.right-bubble {
    top: 1580px;
    left: 740px;
}

.objectives {
    top: 1830px;
    width: 100%;
    text-align: center;
}

.objectives-inner {
    margin-left: auto;
    margin-right: auto;
    width: 650px;
}

.objectives .heading {
    font-size: 22px;
    padding-bottom: 5px;
}

.objectives .body {
    font-size: 12px;
}

.marker-container {
    top: 1970px;
    width: 100%;
    height: 74px;
}

.marker {
    width: 111px;
    height: 74px;
    margin-left: auto;
    margin-right: auto;
}

.curve-container {
    top: 2030px;
    width: 100%;
    height: 795px;
}

.curve {
    width: 786px;
    height: 795px;
    margin-left: auto;
    margin-right: auto;
}

.line {
    width: 786px;
    height: 3px;
    margin-left: auto;
    margin-right: auto;
}

.line1-container {
    width: 100%;
    height: 3px;
    top: 2125px;
}

.line2-container {
    width: 100%;
    height: 3px;
    top: 2240px;
}

.line3-container {
    width: 100%;
    height: 3px;
    top: 2355px;
}

.vline-container {
    width: 100%;
    height: 291px;
    top: 2142px;
}

.vline {
    width: 3px;
    height: 291px;
    margin-left: auto;
    margin-right: auto;
}

.circle25 {
    width: 56px;
    height: 54px;
    top: 2115px;
    left: 190px;
}

.circle28 {
    width: 67px;
    height: 66px;
    top: 2222px;
    left: 95px;
}

.circle22 {
    width: 47px;
    height: 46px;
    top: 2350px;
    left: 70px;
}

.circle75 {
    width: 79px;
    height: 78px;
    top: 2100px;
    left: 700px;
}

.circle90 {
    width: 92px;
    height: 91px;
    top: 2210px;
    left: 770px;
}

.circle60 {
    width: 68px;
    height: 67px;
    top: 2338px;
    left: 830px;
}

.co2-container {
    width: 100%;
    height: 54px;
    top: 2100px;
}

.co2 {
    width: 101px;
    height: 54px;
    margin-left: auto;
    margin-right: auto;
}

.nox-container {
    width: 100%;
    height: 61px;
    top: 2210px;
}

.nox {
    width: 57px;
    height: 61px;
    margin-left: auto;
    margin-right: auto;
}

.noise-container {
    width: 100%;
    height: 73px;
    top: 2315px;
}

.noise {
    width: 73px;
    height: 73px;
    margin-left: auto;
    margin-right: auto;
}

.date {
    width: 68px;
    height: 15px;
    margin-left: auto;
    margin-right: auto;
}

.date-container {
    width: 100%;
    height: 15px;
}

.date-container-1 {
    top: 2155px;
}

.date-container-2 {
    top: 2270px;
}

.date-container-3 {
    top: 2390px;
}

.plus-container {
    top: 2415px;
    width: 100%;
    height: 62px;
}

.plus {
    width: 62px;
    height: 62px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    cursor: hand;
}

.depth-container {
    width: 100%;
    height: 490px;
    top: 1955px;
    display: none;
}

.depth {
    width: 946px;
    height: 490px;
    margin-right: auto;
    margin-left: auto;
    background-color: #73BABE;
    border-radius: 20px;
}

.curve-bottom-container {
    top: 2435px;
    width: 100%;
    height: 393px;
}

.curve-bottom {
    width: 787px;
    height: 393px;
    margin-left: auto;
    margin-right: auto;
}

.scene2-bottom {
    top: 2570px;
    width: 100%;
    height: 200px;
}

.achievements {
    top: 2490px;
    width: 100%;
    text-align: center;
}

.achievements-inner {
    margin-left: auto;
    margin-right: auto;
    width: 650px;
}

.achievements .heading {
    font-size: 22px;
    padding-bottom: 5px;
}

.achievements .body {
    font-size: 12px;
}

.play-container {
    width: 100%;
    height: 313px;
    top: 2800px;
}

.play {
    width: 584px;
    height: 313px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    cursor: hand;
}

.video-container {
    width: 100%;
    height: 313px;
    top: 2800px;
    display: none;
}

.video {
    width: 584px;
    height: 313px;
    margin-left: auto;
    margin-right: auto;
}

.rhino-container {
    width: 100%;
    height: 39px;
    top: 3200px;
}

.rhino {
    height: 39px;
    width: 58px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    cursor: hand;
}

/* Cloud positioning */
.cloud-001 {
    top: 15px;
    left: 650px;
}

.cloud-002 {
    top: 90px;
    left: 225px;
}

.cloud-003 {
    top: 340px;
    left: 320px;
}

.cloud-004 {
    top: 720px;
    left: 370px;
}

.cloud-005 {
    top: 1240px;
    left: 190px;
}

.cloud-006 {
    top: 1500px;
    left: 720px;
}

/* Airplane positions */
.airp-001 {
    top: 60px;
    left: 130px;
}

.airp-002 {
    top: 760px;
    left: 30px;
}

.airp-003 {
    top: 830px;
    left: 850px;
}

.airp-004 {
    top: 1280px;
    left: 680px;
}

.airp-005 {
    top: 1550px;
    left: 40px;
}

.airp-006 {
    top: 1840px;
    left: 100px;
}

.airp-007 {
    top: 1900px;
    left: 800px;
}