html, body {
    margin: 0;
    padding: 0;
    font: 16px 'helvetica neue', helvetica, arial, sans-serif;
    color: #5b5b5b
}

header {
    height: 40px;
    background-color: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
}

header .top-logo {
    float: left;
    height: 40px;
    margin-left: 15px;
}

header .top-logo:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

header .top-logo img {
    vertical-align: middle
}

header .top-social, header .top-appstore {
    float: right;
    height: 40px;
    margin-right: 15px;
}

header .top-social:before, header .top-appstore:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

header .top-social img, header .top-appstore img {
    vertical-align: middle;
    margin-right: 15px
}

header .top-social {
    margin-right: 5px
}

header .social-fb {
    margin-right: 20px
}

header .social-tw {
    margin-top: 10px
}

header .top-appstore {
    position: fixed;
    right: 0;
    opacity: 0
}

.contents {
    margin-top: 40px;
    background-color: #1ddbc8;
    min-height: 800px
}

.about h1, .support h1 {
    font-size: 60px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    padding-top: 50px
}

.about {
    min-width: 1750px;
}

.about .members {
    margin: 0 auto;
    width: 1750px
}

.about .member {
    padding: 100px 50px 50px 30px;
    text-align: center;
    display: inline-block;
    position: relative;
}

.about .member * {
    display: block
}

.about .member .bubble {
    margin: 0 auto 10px;
    width: 211px;
    height: 116px;
    background: url("../img/about/speech_bubble.png") no-repeat;
    padding: 5px 0 5px 5px;
    opacity: 0;
}

.about .member .bubble .msg {
    display: table;
    width: 200px;
    height: 80px;
    text-align: center;
}

.about .member .bubble .msg span {
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
    color: #707a79
}

.about .member .avatar {
    margin: 0 auto 30px
}

.about .member .nickname {
    font-size: 24px;
    text-transform: uppercase;
    color: #fff
}

.about .member .nickname-line {
    margin: 5px auto 10px
}

.about .member .role {
    font-size: 20px;
    color: #484d4f
}

.about .about-ground {
    position: fixed;
    bottom: 0;
    width: 3000px;
    height: 25%;
    background-color: #11c1ac
}

.support .user-voice {
    width: 600px;
    height: 600px;
    margin: 150px auto
}

.wrapper {
    display: none
}

h1 {
    font-size: 48px;
    text-transform: uppercase;
    color: #323849;
    margin-top: 0;
    margin-bottom: 0
}

h2 {
    font-size: 37px;
    margin-bottom: 0
}

h3 {
    font-size: 28px;
    color: #7a7a7a;
    margin-top: 0;
    margin-bottom: 0
}

h4 {
    font-size: 24px;
    margin-top: 10px
}

.container {
    height: 100%
}

.landing #wrapper {
    position: relative;
    overflow: hidden
}

.landing #landing {
    position: absolute
}

.landing section {
    padding-top: 40px;
}

.landing section * {
    z-index: 50
}

.landing .preload {
    display: none
}

.landing .background-layer1 {
    position: fixed;
    z-index: 5
}

.landing .background-layer2 {
    position: fixed;
    z-index: 10
}

.landing .background-layer3 {
    position: fixed;
    z-index: 15
}

.landing .background-layer4 {
    position: fixed;
    z-index: 20
}

.landing .background-layer5 {
    position: fixed;
    z-index: 25
}

.landing .background-layer6 {
    position: fixed;
    z-index: 30
}

.landing .background-layer7 {
    position: fixed;
    z-index: 35
}

.landing .background-layer8 {
    position: fixed;
    z-index: 40
}

.landing .background-layer9 {
    position: fixed;
    z-index: 45
}

.landing .shutter {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0
}

.landing .cloud-1 {
    width: 306px;
    height: 118px;
    background: url("../img/01-cloud1.png") no-repeat center center
}

.landing .cloud-2 {
    width: 49px;
    height: 24px;
    background: url("../img/01-cloud2.png") no-repeat center center
}

.landing .cloud-3 {
    width: 131px;
    height: 24px;
    background: url("../img/01-cloud3.png") no-repeat center center
}

.landing .cloud-4 {
    width: 143px;
    height: 69px;
    background: url("../img/01-cloud4.png") no-repeat center center
}

.landing .cloud-5 {
    width: 176px;
    height: 86px;
    background: url("../img/02-cloud5.png") no-repeat center center
}

.landing .bird {
    width: 83px;
    height: 60px;
    background: url("../img/01-bird.png") no-repeat center center
}

.landing .dust {
    width: 490px;
    height: 120px;
    background: url("../img/01-dust.png") no-repeat center center
}

.landing .mountain {
    width: 485px;
    height: 208px;
    background: url("../img/01-mountain.png") no-repeat center center
}

.landing .sun {
    width: 179px;
    height: 179px;
    background: url("../img/01-sun.png") no-repeat center center
}

.landing .small-tree1 {
    width: 30px;
    height: 26px;
    background: url("../img/02-small-tree.png") repeat-x
}

.landing .small-tree2 {
    width: 60px;
    height: 26px;
    background: url("../img/02-small-tree.png") repeat-x
}

.landing .small-tree4 {
    width: 120px;
    height: 26px;
    background: url("../img/02-small-tree.png") repeat-x
}

.landing #loading {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    background-color: #d4ffff;
}

.landing #loading #loading-bottom-background1 {
    width: 100%;
    height: 30%;
    position: fixed;
    background-color: #bdf1f4;
    bottom: 0
}

.landing #loading #loading-bottom-background2 {
    width: 100%;
    height: 40%;
    position: fixed;
    background-color: #69d1cf;
    top: 100%;
    margin-top: -200px
}

.landing #loading #loading-top {
    position: fixed;
    top: 15%;
    width: 100%;
    text-align: center
}

.landing #loading #loading-logo {
    display: block;
    width: 277px;
    height: 263px;
    margin: 0 auto
}

.landing #loading h1 {
    font-size: 34px;
    text-transform: uppercase;
    color: #3e4449;
    text-align: center
}

.landing #loading #loading-bottom {
    position: fixed;
    top: 70%;
    width: 100%
}

.landing #loading h4 {
    font-size: 18px;
    text-align: center
}

.landing #loading .progress {
    width: 400px;
    height: 20px;
    margin: 0 auto;
    padding: 10px;
    background-color: #fff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px
}

.landing #loading .progress-bar {
    width: 1px;
    height: 20px;
    background-color: #4b91ad;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px
}

.landing #landing {
    display: none;
}

.landing #landing #logo {
    position: fixed;
    top: 10%;
    left: 50%;
    margin-left: -138px
}

.landing #landing #headline {
    position: fixed;
    width: 100%;
    top: 10%;
    margin-top: 270px;
    text-align: center
}

.landing #landing #intro-subheadline {
    margin-top: 80px
}

.landing #landing #intro-full-background {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    background-color: #d4ffff
}

.landing #landing #intro-bottom-background1 {
    width: 100%;
    height: 30%;
    position: fixed;
    background-color: #bdf1f4;
    bottom: 0
}

.landing #landing #intro-bottom-background2 {
    width: 100%;
    height: 40%;
    position: fixed;
    background-color: #69d1cf;
    top: 100%;
    margin-top: -200px
}

.landing #landing #intro-cloud1 {
    top: 15%;
    right: 7%
}

.landing #landing #intro-cloud2 {
    left: 40%;
    top: 8%
}

.landing #landing #intro-cloud3 {
    bottom: 11%;
    left: 45%
}

.landing #landing #intro-cloud4 {
    top: 20%;
    left: 8%
}

.landing #landing #intro-cloud5 {
    top: 30%;
    left: 20%
}

.landing #landing #intro-cloud6 {
    bottom: 3%;
    left: 49%
}

.landing #landing #intro-cloud7 {
    bottom: 15%;
    left: 20%
}

.landing #landing #intro-bird1 {
    bottom: 28%;
    left: 18%
}

.landing #landing #intro-bird2 {
    bottom: 14%;
    left: 90%
}

.landing #landing #intro-dust {
    bottom: 5%;
    left: 40%
}

.landing #landing #intro-mountain1 {
    bottom: 0;
    margin-bottom: -70px
}

.landing #landing #intro-mountain2 {
    bottom: 0;
    right: 4%;
    margin-bottom: -100px
}

.landing #landing #intro-sun {
    bottom: 0;
    left: 40%;
    margin-bottom: -80px
}

.landing #landing #airport-bottom-background1 {
    width: 100%;
    height: 50%;
    position: fixed;
    background-color: #a1e5dd;
    top: 100%;
    z-index: 1
}

.landing #landing #airport-bottom-background2 {
    width: 100%;
    height: 40%;
    position: fixed;
    background-color: #83dddd;
    top: 100%
}

.landing #landing #airport-road {
    width: 100%;
    height: 110px;
    bottom: 0;
    margin-bottom: -110px;
    background: url("../img/02-runway.png") repeat-x
}

.landing #landing #airport-grass {
    width: 100%;
    height: 24px;
    bottom: 0;
    margin-bottom: -25px;
    background: url("../img/02-grass-71af4e.png") repeat
}

.landing #landing #airport-ground {
    width: 100%;
    height: 80px;
    bottom: 0;
    margin-bottom: -80px;
    background-color: #ededed
}

.landing #landing #airport-building {
    bottom: 0;
    left: 50%;
    margin-left: -187px;
    margin-bottom: -268px
}

.landing #landing #airport-small-tree1 {
    bottom: 0;
    left: 50%;
    margin-left: 180px;
    margin-bottom: -26px
}

.landing #landing #airport-small-tree2 {
    bottom: 0;
    left: 50%;
    margin-left: 250px;
    margin-bottom: -26px
}

.landing #landing #airport-small-tree3 {
    bottom: 0;
    left: 50%;
    margin-left: 380px;
    margin-bottom: -26px
}

.landing #landing #airport-small-tree4 {
    bottom: 0;
    left: 50%;
    margin-left: 550px;
    margin-bottom: -26px
}

.landing #landing #airport-small-tree5 {
    bottom: 0;
    left: 50%;
    margin-left: -240px;
    margin-bottom: -26px
}

.landing #landing #airport-small-tree6 {
    bottom: 0;
    left: 50%;
    margin-left: -340px;
    margin-bottom: -26px
}

.landing #landing #airport-small-tree7 {
    bottom: 0;
    left: 50%;
    margin-left: -510px;
    margin-bottom: -26px
}

.landing #landing #airport-tree1 {
    bottom: 0;
    left: 50%;
    margin-left: 310px;
    margin-bottom: -208px
}

.landing #landing #airport-tree2 {
    bottom: 0;
    left: 50%;
    margin-left: 470px;
    margin-bottom: -208px
}

.landing #landing #airport-cloud1 {
    top: 10%;
    right: 10%;
    opacity: 0
}

.landing #landing #airport-cloud2 {
    top: 8%;
    left: 15%;
    opacity: 0
}

.landing #landing #airport-cloud3 {
    top: 25%;
    left: 10%;
    opacity: 0
}

.landing #landing #airport-airplain {
    bottom: 140px;
    left: -130px;
    margin-left: -582px;
    opacity: 1
}

.landing #landing #airport-airplain-with-johnny-wrap {
    bottom: 148px;
    left: -384px;
    position: fixed;
    opacity: 0
}

.landing #landing #night-effect1 {
    top: 90px;
    left: 100px;
    opacity: 0
}

.landing #landing #night-effect2 {
    top: 130px;
    left: 150px;
    opacity: 0
}

.landing #landing #night-effect3 {
    top: 150px;
    right: -100px;
    opacity: 0
}

.landing #landing #night-effect4 {
    top: 170px;
    right: -100px;
    opacity: 0
}

.landing #landing #airport-johnny {
    position: fixed;
    bottom: 20px;
    left: 50%;
    margin-left: -100px;
    opacity: 0
}

.landing #landing #airport-luggage {
    position: fixed;
    bottom: 20px;
    left: 50%;
    margin-left: 60px;
    opacity: 0
}

.landing #landing #airport-headline {
    text-align: center;
    position: fixed;
    width: 100%;
    top: 20%;
    color: #fff;
    opacity: 0
}

.landing #landing #night-full-background1 {
    width: 100%;
    height: 100%;
    background-color: #132835;
    position: fixed;
    opacity: 0;
    z-index: 1
}

.landing #landing #night-bottom-background1 {
    width: 100%;
    height: 30%;
    background-color: #1f3844;
    top: 100%
}

.landing #landing #night-bottom-background2 {
    width: 100%;
    height: 100%;
    background-color: #132835;
    background: -webkit-linear-gradient(top, #2c454f, #132835);
    background: -moz-linear-gradient(top, #2c454f, #132835);
    background: -ms-linear-gradient(top, #2c454f, #132835);
    background: -o-linear-gradient(top, #2c454f, #132835);
    background: linear-gradient(top, #2c454f, #132835);
    top: 100%
}

.landing #landing #night-stars1 {
    width: 100%;
    height: 100%;
    background: url("../img/03-stars-dots.png") repeat;
    opacity: 0
}

.landing #landing #night-stars2 {
    width: 100%;
    height: 100%;
    background: url("../img/03-stars2.png") repeat;
    opacity: 0
}

.landing #landing #night-stars3 {
    width: 100%;
    height: 100%;
    background: url("../img/03-stars3.png") repeat;
    opacity: 0
}

.landing #landing #night-astr1 {
    top: 15%;
    left: 10%;
    opacity: 0
}

.landing #landing #night-astr2 {
    bottom: 3%;
    left: 25%;
    opacity: 0
}

.landing #landing #night-moon {
    top: 15%;
    left: 80%;
    opacity: 0
}

.landing #landing #night-cloud1 {
    top: 10%;
    left: 640%;
    opacity: 0
}

.landing #landing #night-cloud2 {
    bottom: 15%;
    left: 12%;
    opacity: 0
}

.landing #landing #night-cloud3 {
    bottom: 8%;
    left: 75%;
    opacity: 0
}

.landing #landing #night-fog1 {
    top: 30%;
    left: 15%;
    opacity: 0
}

.landing #landing #night-fog2 {
    top: 35%;
    left: 70%;
    opacity: 0
}

.landing #landing #night-falling-astr {
    bottom: 0;
    left: 50%;
    margin-left: -42px;
    margin-bottom: -132px
}

.landing #landing #night-falling-red-astr {
    bottom: 0;
    left: 70%;
    margin-bottom: -132px
}

.landing #landing #night-falling-cloud1 {
    bottom: 0;
    left: 20%;
    margin-bottom: -176px
}

.landing #landing #night-falling-cloud2 {
    bottom: 0;
    left: 90%;
    margin-bottom: -116px
}

.landing #landing #falling-effect1 {
    width: 100%;
    height: 373px;
    bottom: 0;
    margin-bottom: -373px;
    background: url("../img/03-falling-effect01.png") repeat-x
}

.landing #landing #falling-effect2 {
    width: 100%;
    height: 262px;
    bottom: 0;
    margin-bottom: -262px;
    background: url("../img/03-falling-effect02.png") repeat-x
}

.landing #landing #app-pass-headline {
    position: fixed;
    width: 50%;
    top: 100%;
    left: 10%;
    margin-top: 270px;
}

.landing #landing #app-pass-headline h2 {
    color: #fff;
    opacity: 0
}

.landing #landing #app-pass-headline h4 {
    color: #ddd
}

.landing #landing #app-pass-phone {
    bottom: 0;
    left: 50%;
    margin-bottom: -582px
}

.landing #landing #app-pass-boarding {
    bottom: 0;
    left: 50%;
    margin-bottom: 362px;
    margin-left: 103px;
    opacity: 0
}

.landing #landing #app-pass-dots {
    bottom: 0;
    left: 50%;
    margin-bottom: 311px;
    margin-left: 103px;
    opacity: 0
}

.landing #landing #app-pass-cool {
    bottom: 0;
    left: 50%;
    margin-bottom: 490px;
    margin-left: 340px;
    opacity: 0
}

.landing #landing #paris-headline {
    position: fixed;
    width: 40%;
    top: 100%;
    left: 50%;
    margin-left: 150px;
}

.landing #landing #paris-headline h4 {
    color: #fff
}

.landing #landing #paris-bottom-background1 {
    width: 100%;
    height: 30%;
    position: fixed;
    background-color: #65d6d3;
    top: 100%;
    z-index: 4
}

.landing #landing #paris-bottom-background2 {
    width: 100%;
    height: 40%;
    position: fixed;
    background-color: #83dddd;
    top: 100%;
    z-index: 3
}

.landing #landing #paris-bottom-background3 {
    width: 100%;
    height: 40%;
    position: fixed;
    background-color: #a1e5dd;
    top: 100%;
    z-index: 2
}

.landing #landing #paris-ground {
    width: 100%;
    height: 155px;
    background-color: #73ae53;
    bottom: 0;
    margin-bottom: -155px
}

.landing #landing #paris-grass {
    left: 50%;
    bottom: 0;
    margin-left: -317px;
    margin-bottom: -155px
}

.landing #landing #paris-path-left {
    left: 50%;
    bottom: 0;
    margin-left: -480px;
    margin-bottom: -155px
}

.landing #landing #paris-path-right {
    left: 50%;
    bottom: 0;
    margin-left: 120px;
    margin-bottom: -155px
}

.landing #landing #paris-tree-left {
    left: 50%;
    bottom: 0;
    margin-left: -420px;
    margin-bottom: -284px
}

.landing #landing #paris-tree-right {
    left: 50%;
    bottom: 0;
    margin-left: 115px;
    margin-bottom: -284px
}

.landing #landing #paris-eiffel {
    left: 50%;
    bottom: 0;
    margin-left: -171px;
    margin-bottom: -842px
}

.landing #landing #paris-sun {
    top: 70%;
    left: 0;
    margin-left: -179px
}

.landing #landing #paris-sm-tree1 {
    left: 50%;
    bottom: 0;
    margin-left: -550px;
    margin-bottom: -96px
}

.landing #landing #paris-sm-tree2 {
    left: 50%;
    bottom: 0;
    margin-left: 470px;
    margin-bottom: -115px
}

.landing #landing #paris-tiny-tree {
    left: 50%;
    bottom: 0;
    margin-left: -570px;
    margin-bottom: -34px
}

.landing #landing #paris-grass1 {
    left: 50%;
    bottom: 0;
    margin-left: -600px;
    margin-bottom: -20px
}

.landing #landing #paris-grass2 {
    left: 50%;
    bottom: 0;
    margin-left: -430px;
    margin-bottom: -20px
}

.landing #landing #paris-grass3 {
    left: 50%;
    bottom: 0;
    margin-left: 420px;
    margin-bottom: -20px
}

.landing #landing #paris-grass4 {
    left: 50%;
    bottom: 0;
    margin-left: 570px;
    margin-bottom: -20px
}

.landing #landing #paris-bird1 {
    top: 50%;
    left: 18%;
    opacity: 0
}

.landing #landing #paris-bird2 {
    top: 40%;
    left: 90%;
    opacity: 0
}

.landing #landing #paris-cloud1 {
    top: 25%;
    left: 70%;
    opacity: 0
}

.landing #landing #paris-cloud2 {
    top: 27%;
    left: 26%;
    opacity: 0
}

.landing #landing #paris-dust {
    top: 50%;
    left: 50%;
    margin-top: -131px;
    margin-left: -368px;
    opacity: 0
}

.landing #landing #paris-fog1 {
    top: 33%;
    left: 50%;
    opacity: 0
}

.landing #landing #paris-fog2 {
    top: 38%;
    left: 50%;
    margin-left: -200px;
    opacity: 0
}

.landing #landing #paris-johnny {
    position: fixed;
    bottom: 20px;
    left: 50%;
    margin-left: -71px;
    opacity: 0
}

.landing #landing #paris-pic {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -262px;
    margin-left: -400px;
    opacity: 0
}

.landing #landing #app-timeline-full-background {
    width: 100%;
    height: 100%;
    background-color: #ededed;
    position: fixed;
    opacity: 0;
    z-index: 1
}

.landing #landing #app-timeline-phone {
    bottom: 0;
    left: 50%;
    margin-bottom: -582px;
    margin-left: -285px
}

.landing #landing #route-phone-paris-pic {
    bottom: 0;
    left: 50%;
    margin-bottom: 214px;
    margin-left: -180px;
    opacity: 0
}

.landing #landing #app-timeline-headline {
    position: fixed;
    width: 40%;
    top: 100%;
    left: 60%;
    margin-top: 70px;
}

.landing #landing #app-timeline-headline h2 {
    color: #3f3f3f;
    opacity: 0
}

.landing #landing #app-timeline-headline h4 {
    color: #606060
}

.landing #landing #app-timeline-awesome {
    bottom: 0;
    left: 50%;
    margin-bottom: 510px;
    margin-left: -350px;
    opacity: 0
}

.landing #landing #cafe-full-background {
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0;
    z-index: 1
}

.landing #landing #cafe-ceiling {
    width: 100%;
    height: 143px;
    top: 0;
    background: #ededed url("../img/07-ceiling-pattern.png") no-repeat center center;
    margin-top: -143px
}

.landing #landing #cafe-ground {
    width: 100%;
    height: 200px;
    bottom: 0;
    background-color: #3f4647;
    margin-bottom: -200px
}

.landing #landing #cafe-brics {
    width: 589px;
    height: 90%;
    top: 146px;
    right: 0;
    background: url("../img/07-brics-pattern.png") repeat-y;
    margin-right: -589px
}

.landing #landing #cafe-frames {
    top: 50%;
    left: 50%;
    margin-left: -89px;
    margin-top: -34px;
    opacity: 0
}

.landing #landing #cafe-window1 {
    top: 50%;
    left: 50%;
    margin-left: -350px;
    margin-top: -88px;
    opacity: 0
}

.landing #landing #cafe-window2 {
    top: 50%;
    left: 50%;
    margin-left: -600px;
    margin-top: -88px;
    opacity: 0
}

.landing #landing #cafe-menu {
    top: 50%;
    right: 0;
    margin-right: 70px;
    margin-top: -140px;
    opacity: 0
}

.landing #landing #cafe-table {
    bottom: 100px;
    left: 50%;
    margin-left: -600px;
    opacity: 0
}

.landing #landing #cafe-counter {
    bottom: 0;
    right: 0;
    margin-right: -25px;
    margin-bottom: 150px;
    opacity: 0
}

.landing #landing #cafe-johnny {
    bottom: 20px;
    left: 50%;
    margin-left: -165px;
    opacity: 0
}

.landing #landing #cafe-dessert {
    bottom: 115px;
    left: 50%;
    margin-left: 20px;
    opacity: 0
}

.landing #landing #cafe-parttimer {
    bottom: 0;
    right: 0;
    opacity: 0;
    margin-bottom: 240px;
    margin-right: 30px
}

.landing #landing #cafe-pic {
    left: 50%;
    top: 50%;
    margin-top: -250px;
    margin-left: -400px;
    opacity: 0
}

.landing #landing #cafe-headline {
    position: fixed;
    width: 280px;
    bottom: 50px;
    right: 50%;
    margin-right: 180px;
    opacity: 0;
}

.landing #landing #cafe-headline h2 {
    color: #fff
}

.landing #landing #cafe-headline h4 {
    color: #fff
}

.landing #landing #route-ground {
    bottom: 0;
    width: 100%;
    height: 100px;
    margin-bottom: -100px;
    background-color: #dbdbdb
}

.landing #landing #route-phone {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 545px;
    height: 603px;
    margin-left: 100px;
    margin-bottom: -603px;
}

.landing #landing #route-phone h2 {
    font-size: 22px;
    width: 246px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-top: 308px;
    margin-left: 17px;
    color: #465156
}

.landing #landing #route-phone .phone-background {
    position: fixed;
    width: 270px;
    height: 400px;
    margin-top: 153px;
    background-color: #ededed;
    z-index: 32
}

.landing #landing #route-phone .phone-ground-background {
    position: fixed;
    width: 270px;
    height: 100px;
    margin-top: 553px;
    background-color: #dbdbdb;
    z-index: 34
}

.landing #landing #route-phone .phone-train-hide {
    position: fixed;
    width: 900px;
    height: 400px;
    margin-top: 153px;
    background-color: #ededed;
    z-index: 33
}

.landing #landing #route-phone .route-phone-pics {
    margin-top: 364px;
    margin-left: 24px;
    z-index: 33;
    opacity: 0
}

.landing #landing #route-phone #route-phone-writing {
    margin-top: 383px
}

.landing #landing #route-phone #route-phone-boardingpass {
    margin-top: 403px;
    margin-left: 36px
}

.landing #landing #route-phone #route-phone-dots {
    margin-top: 472px;
    margin-left: 48px
}

.landing #landing #route-phone-text2 {
    opacity: 0
}

.landing #landing #route-phone-map {
    width: 246px;
    height: 228px;
    overflow: hidden;
    margin-top: 80px;
    margin-left: 17px
}

.landing #landing #route-phone-map-inner {
    width: 2460px;
    height: 1140px;
    background-image: url("../img/map-sequence.png")
}

.landing #landing #route-phone-menu {
    margin-top: 90px;
    margin-left: 28px
}

.landing #landing #route-phone-share {
    margin-top: 90px;
    margin-left: 225px
}

.landing #landing #route-nice {
    margin-left: -150px;
    margin-top: -50px;
    opacity: 0
}

.landing #landing .route-johnnies, .landing #landing .route-marquee {
    bottom: 0;
    left: 50%;
    margin-left: 100px
}

.landing #landing #route-hi-johnny {
    margin-bottom: -575px
}

.landing #landing #route-walking-johnny-wrap {
    width: 126px;
    height: 248px;
    overflow: hidden;
    margin-bottom: -575px;
    opacity: 0
}

.landing #landing #route-walking-johnny {
    width: 378px;
    height: 248px;
    background-image: url("../img/08-walking-johnny.png")
}

.landing #landing #route-johnny-back {
    margin-bottom: -574px;
    margin-left: -300px;
    opacity: 0
}

.landing #landing #route-blah {
    margin-bottom: -310px;
    margin-left: -315px;
    opacity: 0
}

.landing #landing #route-cafe, .landing #landing #route-flowerpot1, .landing #landing #route-flowerpot2, .landing #landing #route-terminal {
    margin-bottom: -553px
}

.landing #landing #route-rail {
    margin-bottom: -551px
}

.landing #landing #route-train-line {
    margin-bottom: -352px
}

.landing #landing #route-train {
    margin-bottom: -530px
}

.landing #landing .route-train-hide {
    position: fixed;
    width: 800px;
    height: 210px;
    margin-bottom: -551px;
    background-color: #ededed
}

.landing #landing .route-coloceum-marquee {
    margin-bottom: -553px;
    opacity: 0
}

.landing #landing #route-coloceum {
    margin-left: 150px
}

.landing #landing #route-tree-mini {
    margin-left: 100px
}

.landing #landing #route-trees-mini {
    margin-left: 390px
}

.landing #landing #route-cloud {
    margin-left: 350px;
    margin-bottom: -350px
}

.landing #landing #route-headline {
    position: fixed;
    width: 30%;
    top: 100%;
    left: 50%;
    margin-left: -500px;
}

.landing #landing #route-headline h2 {
    color: #3f3f3f;
    opacity: 0
}

.landing #landing #route-headline h4 {
    color: #606060
}

.landing #landing .route-phone-falling-pics {
    margin-top: 364px;
    margin-left: 24px;
    opacity: 0
}

.landing #landing #fb-full-background {
    width: 100%;
    height: 100%;
    background-color: #132835;
    position: fixed;
    top: 100%;
    opacity: 0;
    z-index: 1
}

.landing #landing #fb-phone {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 694px;
    height: 676px;
    margin-left: -250px;
    margin-bottom: -844px
}

.landing #landing #fb-headline {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 700px;
    height: 150px;
    margin-left: -350px;
    margin-bottom: -150px;
    opacity: 0;
    text-align: center;
}

.landing #landing #fb-headline h2 {
    color: #fff
}

.landing #landing #fb-headline h4 {
    color: #fff
}

.landing #landing #fb-phone-map-pic {
    margin-top: 190px;
    margin-left: 121px;
    opacity: 0
}

.landing #landing #fb-phone-paris-pic {
    margin-top: 190px;
    margin-left: 221px;
    opacity: 0
}

.landing #landing #fb-phone-cafe-pic {
    margin-top: 278px;
    margin-left: 121px;
    opacity: 0
}

.landing #landing #fb-phone-rome-pic {
    margin-top: 278px;
    margin-left: 238px;
    opacity: 0
}

.landing #landing #fb-phone-like {
    margin-top: 370px;
    margin-left: 125px;
    opacity: 0
}

.landing #landing .fb-phone-like-text {
    margin-top: 377px;
    margin-left: 155px;
    width: 190px;
    height: 15px;
    opacity: 0;
    color: #878787;
    font-size: 12px
}

.landing #landing #fb-phone-bob-comment {
    margin-top: 400px;
    margin-left: 125px;
    opacity: 0
}

.landing #landing #fb-phone-jessica-comment {
    margin-top: 440px;
    margin-left: 125px;
    opacity: 0
}

.landing #landing #final-scene {
    bottom: 0;
    left: 50%;
    width: 750px;
    height: 800px;
    margin-left: -375px;
    margin-bottom: -800px;
    color: #fff;
    text-align: center;
    z-index: 100;
}

.landing #landing #final-scene #final-logo, .landing #landing #final-scene .short-line {
    display: block;
    margin: 50px auto
}

.landing #landing #final-headline h2 {
    font-size: 30px
}

.landing #landing #final-download {
    text-align: right
}

.landing #landing #footer {
    bottom: 0;
    width: 100%;
    height: 200px;
    margin-bottom: -200px;
    background-color: #182328;
    z-index: 100;
}

.landing #landing #footer #footer-menu {
    width: 100%;
    text-align: center;
    margin-top: 170px;
    opacity: 0;
}

.landing #landing #footer #footer-menu #support, .landing #landing #footer #footer-menu a {
    color: #fff;
    text-decoration: none;
}

.landing #landing #footer #footer-menu #support:active, .landing #landing #footer #footer-menu a:active, .landing #landing #footer #footer-menu #support:hover, .landing #landing #footer #footer-menu a:hover {
    border-bottom: 1px solid #dbdbdb
}

.landing #landing #footer #footer-menu #support:visited, .landing #landing #footer #footer-menu a:visited {
    color: #dbdbdb
}

.landing #landing #footer-johnny {
    bottom: 0;
    left: 50%;
    margin-left: -68px;
    margin-bottom: -247px
}