a {
    text-decoration: none
}

#algae-1 {
    left: 100px
}

#algae-2 {
    left: 800px
}

#algae-3 {
    left: 2100px
}

#algae-4 {
    left: 2200px
}

#algae-5 {
    left: 3500px
}

#algae-6 {
    left: 3680px
}

#algae-7 {
    left: 4900px
}

#algae-8 {
    left: 5000px
}

.algae-a {
    bottom: 0;
    width: 80px;
    height: 270px;
    background-image: url(../image/algae-a.png)
}

#alien,
.algae-a,
.algae-b {
    position: absolute
}

.algae-b {
    background-image: url(../image/algae-b.png);
    bottom: 0;
    width: 162px;
    height: 252px
}

#alien {
    left: 540px;
    bottom: 30px;
    width: 400px;
    height: 636px
}

#alien-body {
    position: absolute;
    top: 0;
    height: 515px;
    background-image: url(../image/alien-body.png)
}

#alien-body,
#alien-ship {
    left: 0;
    width: 400px
}

#alien-ship,
#alien-steer {
    position: absolute
}

#alien-ship {
    top: 515px;
    height: 121px;
    background-image: url(../image/alien-ship.png)
}

#alien-steer {
    left: 90px;
    top: 430px;
    width: 220px;
    height: 170px;
    background-image: url(../image/alien-steer.png)
}

#balloon {
    position: absolute;
    width: 400px;
    height: 700px;
    background-image: url(../image/balloon.png)
}

.banner {
    margin-bottom: 60px
}

.banner-button,
.banner-line {
    position: relative;
    width: 152px;
    height: 32px
}

.banner-line {
    width: 440px;
    height: 1px;
    background-color: #fff;
    margin-bottom: 12px
}

.banner-text-a {
    font-family: frankfurter-medium-plain;
    font-size: 24px
}

.banner-text-a,
.banner-text-b,
.banner-text-c {
    position: relative;
    width: 440px;
    color: #fff;
    margin-bottom: 12px
}

.banner-text-b {
    line-height: 60px;
    font-family: frankfurter-plain;
    font-size: 70px
}

.banner-text-c {
    font-family: frankfurter-medium-plain;
    font-size: 18px
}

.banner-bottom-a,
.banner-bottom-b {
    position: relative;
    left: 20px;
    width: 480px;
    height: 56px;
    margin-top: -1px;
    background-image: url(../image/banner-bottom-a.png)
}

.banner-bottom-b {
    background-image: url(../image/banner-bottom-b.png)
}

#banners-container,
#boxes {
    position: absolute;
    left: 15%;
    width: 520px
}

.banner-middle-a,
.banner-middle-b {
    position: relative;
    left: 20px;
    width: 440px;
    padding: 20px;
    background-color: #f7941d;
    overflow: hidden
}

.banner-middle-b {
    background-color: #f26d7d
}

.banner-top-a,
.banner-top-b {
    position: relative;
    width: 520px;
    height: 23px;
    margin-bottom: -1px;
    background-image: url(../image/banner-top-a.png)
}

.banner-top-b {
    background-image: url(../image/banner-top-b.png)
}

body {
    margin: 0;
    background-color: #00bff3
}

#boxes {
    left: 13900px;
    bottom: 20%;
    width: 700px;
    height: 100px;
    background-image: url(../image/box.png)
}

#bubble {
    position: relative;
    left: -50%;
    width: 16px;
    height: 16px;
    background-image: url(../image/bubble.png)
}

#bubble-container,
.building {
    position: absolute
}

#building-1 {
    left: 0;
    bottom: 0;
    width: 190px;
    height: 500px;
    background-image: url(../image/building-a.png)
}

#building-2 {
    left: 305px;
    bottom: 0;
    width: 275px;
    height: 495px;
    background-image: url(../image/building-b.png)
}

#building-3 {
    left: 710px;
    bottom: 0;
    width: 190px;
    height: 500px;
    background-image: url(../image/building-c.png)
}

.building-enemy-face-a {
    position: absolute;
    left: 25px;
    top: 395px;
    width: 65px;
    height: 65px;
    background-image: url(../image/enemy-face-a.png)
}

.building-enemy-face-a-eyes {
    position: absolute;
    left: 5px;
    top: 10px;
    width: 55px;
    height: 25px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/enemy-face-a-eyes.png)
}

.building-enemy-face-b {
    position: absolute;
    left: 80px;
    top: 375px;
    width: 80px;
    height: 80px;
    background-image: url(../image/enemy-face-b.png)
}

.building-enemy-face-b-eyes {
    position: absolute;
    left: 7px;
    top: 15px;
    width: 66px;
    height: 30px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/enemy-face-b-eyes.png)
}

#buildings-container {
    position: absolute;
    left: 4980px;
    bottom: 20%;
    width: 900px;
    height: 80%
}

.building-leg-container-a,
.building-leg-container-b {
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 470px;
    width: 190px;
    height: 30px
}

.building-leg-container-b {
    left: 70px;
    top: 465px;
    width: 150px
}

.building-leg-frame-a,
.building-leg-frame-b {
    position: absolute;
    left: 0;
    top: 0;
    width: 380px;
    height: 30px;
    background-image: url(../image/building-a-leg-frame.png)
}

.building-leg-frame-b {
    width: 300px;
    background-image: url(../image/building-b-leg-frame.png)
}

.chain-block {
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 90px;
    background-image: url(../image/chain-block.png)
}

.chain-block-string {
    position: absolute;
    left: 28px;
    bottom: 60px;
    width: 44px;
    height: 100%;
    background-image: url(../image/chain-block-string.png)
}

.chain-block-and-string-container {
    position: absolute;
    width: 100px;
    height: 100%
}

.coral-a,
.coral-b {
    width: 200px;
    height: 150px;
    bottom: -70%
}

.coral-a {
    position: absolute;
    background-image: url(../image/coral-a.png)
}

.coral-b {
    background-image: url(../image/coral-b.png)
}

#coral-1 {
    left: 4800px
}

#coral-2 {
    left: 5800px
}

#coral-3 {
    left: 6800px
}

.contact-confirmation-container,
.coral-b,
.coral-big {
    position: absolute
}

#coral-big-1 {
    left: 1300px;
    bottom: -70%;
    width: 300px;
    height: 400px;
    background-image: url(../image/coral-big-a.png)
}

#coral-big-2 {
    left: 1700px;
    bottom: -70%;
    width: 650px;
    height: 500px;
    background-image: url(../image/coral-big-b.png)
}

#contact-box {
    position: absolute;
    top: 120px;
    margin-left: -840px;
    width: 940px;
    height: 420px;
    background-image: url(../image/contact-box.png)
}

#contact-box-email {
    position: absolute;
    left: 570px;
    top: 20px;
    width: 350px;
    height: 30px;
    background-image: url(../image/contact-box-hole-a.png)
}

#contact-box-email input,
#contact-box-subject input {
    font-family: Arial;
    font-size: 14px;
    color: #fff;
    width: 340px;
    margin: 5px;
    border: 0;
    background-color: transparent
}

#contact-box-email input:focus,
#contact-box-message textarea:focus,
#contact-box-subject input:focus {
    outline: 0
}

#contact-box-message,
#contact-box-subject {
    position: absolute;
    left: 570px;
    width: 350px
}

#contact-box-subject {
    top: 65px;
    height: 30px;
    background-image: url(../image/contact-box-hole-a.png)
}

#contact-box-message {
    top: 110px;
    height: 170px;
    background-image: url(../image/contact-box-hole-b.png)
}

#contact-box-message textarea {
    font-family: Arial;
    font-size: 14px;
    color: #fff;
    width: 340px;
    height: 160px;
    margin: 5px;
    border: 0;
    overflow: hidden;
    resize: none;
    background-color: transparent
}

#contact-button {
    position: absolute;
    top: 440px;
    margin-left: -210px;
    width: 355px;
    height: 100px
}

#contact-center {
    position: absolute;
    height: 540px;
    left: 50%;
    bottom: 20%
}

#contact-cloud-bottom {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 21px;
    background-image: url(../image/contact-cloud-bottom.png)
}

#contact-cloud-middle {
    position: absolute;
    left: 0;
    top: 80%;
    width: 100%;
    height: 20%;
    background-color: #fff
}

#contact-cloud-seal-bottom,
#contact-cloud-seal-top {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff
}

#contact-cloud-seal-bottom {
    bottom: -1px
}

#contact-cloud-seal-top {
    top: -1px
}

#contact-cloud-top {
    position: absolute;
    left: 0;
    bottom: 20%;
    width: 100%;
    height: 21px;
    background-image: url(../image/contact-cloud-top.png)
}

.contact-confirmation {
    position: relative;
    width: 260px;
    height: 190px;
    left: -50%
}

.contact-confirmation-rectangle {
    position: absolute;
    width: 260px;
    height: 170px;
    background-color: #333
}

.contact-confirmation-title-a,
.contact-confirmation-title-b {
    position: absolute;
    left: 30px;
    top: 26px;
    font-family: frankfurter-plain;
    color: #c69c6d;
    font-size: 35px
}

.contact-confirmation-title-b {
    font-size: 48px
}

.contact-confirmation-text-a,
.contact-confirmation-text-b {
    position: absolute;
    left: 30px;
    top: 70px;
    width: 200px;
    font-family: frankfurter-medium-plain;
    font-size: 19px;
    line-height: 22px;
    color: #aaa
}

.contact-confirmation-text-b {
    top: 82px;
    font-size: 24px;
    line-height: 24px
}

.contact-confirmation-text-c,
.contact-confirmation-text-d {
    position: absolute;
    font-family: frankfurter-medium-plain;
    font-size: 25px;
    color: #aaa
}

.contact-confirmation-text-c {
    width: 200px;
    line-height: 25px;
    left: 30px;
    top: 82px
}

.contact-confirmation-text-d {
    left: 72px;
    top: 68px
}

.contact-confirmation-triangle {
    position: absolute;
    left: 120px;
    top: 170px;
    width: 20px;
    height: 20px;
    background-image: url(../image/contact-confirmation-triangle.png)
}

#contact-container {
    position: absolute;
    width: 100%;
    height: 100%
}

.cloud {
    position: absolute
}

.content-noscroll {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.cloud {
    width: 180px;
    height: 120px;
    background-image: url(../image/cloud.png)
}

#cloud-1 {
    left: 100px;
    top: 20%
}

#cloud-2 {
    left: 600px;
    top: 5%
}

#cloud-3 {
    left: 1300px;
    top: 30%
}

#cloud-4 {
    left: 1900px;
    top: 20%
}

#cloud-5 {
    left: 10%;
    bottom: 550px
}

#cloud-6 {
    left: 25%;
    bottom: 1200px
}

#cloud-7 {
    left: 70%;
    bottom: 1400px
}

#cloud-8 {
    left: 40%;
    bottom: 1800px
}

#cloud-9 {
    left: 80%;
    bottom: 2000px
}

#container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.crab {
    position: absolute;
    width: 130px;
    height: 89px;
    overflow: hidden;
    background-image: url(../image/crab.png)
}

.crab-eyes {
    position: absolute;
    left: 31px;
    top: 41px;
    width: 38px;
    height: 19px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/crab-eyes.png)
}

#crab-ribbon-container-1 {
    top: 0
}

#crab-ribbon-container-2 {
    top: 100px
}

#crab-ribbon-container-3 {
    top: 200px
}

#crab-ribbon-container-4 {
    top: 300px
}

#crabs-container {
    position: absolute;
    left: 270px;
    top: 50px;
    width: 730px;
    height: 489px
}

#crab-text-container {
    position: absolute;
    top: 79px;
    right: 760px;
    width: 480px;
    height: 440px
}

.crane {
    position: absolute;
    bottom: 20%;
    width: 110px;
    height: 80%;
    background-image: url(../image/crane.png);
    background-position: 0 100%
}

#crane-1 {
    left: 7750px
}

#crane-2 {
    left: 9000px
}

#detect-container {
    position: absolute;
    background-color: #000;
    padding: 10px;
    display: inline-block;
    opacity: .8;
    filter: alpha(opacity=80)
}

.detect-name {
    font-weight: 700;
    margin-right: 10px
}

.detect-name,
.detect-value {
    font-family: arial;
    color: #fff;
    font-size: 14px
}

.displaynone {
    display: none
}

#dock-column,
#dock-floor {
    position: absolute;
    left: 19530px;
    top: 80%;
    width: 2970px
}

#dock-floor {
    height: 50px;
    background-image: url(../image/dock-floor.png)
}

#dock-column {
    height: 20%;
    background-image: url(../image/dock-column.png)
}

#elevation-1,
#elevation-2 {
    left: 4380px;
    bottom: 20%;
    width: 400px;
    height: 120px
}

#elevation-2 {
    left: 6080px
}

#elevation-3,
#elevation-4 {
    left: 16040px;
    bottom: 20%;
    width: 400px;
    height: 150px
}

#elevation-4 {
    left: 17840px
}

.elevation,
.elevation-box {
    position: absolute
}

.elevation-box {
    width: 100%;
    height: 100px;
    bottom: 0;
    background-image: url(../image/box.png)
}

.elevation-floor {
    position: absolute;
    width: 100%;
    height: 50px;
    background-image: url(../image/floor.png)
}

.enemy-face-frame-a,
.enemy-face-frame-b {
    position: absolute;
    left: 0;
    top: 0;
    width: 130px;
    height: 65px;
    background-image: url(../image/enemy-face-frame-a.png)
}

.enemy-face-frame-b {
    width: 160px;
    height: 80px;
    background-image: url(../image/enemy-face-frame-b.png)
}

#experience-1-container {
    position: absolute;
    left: 14840px;
    bottom: 20%;
    width: 1000px;
    height: 80%
}

#experience-2-container {
    width: 1000px
}

#experience-2-container,
#experience-3-container {
    position: absolute;
    bottom: 20%;
    height: 80%
}

#experience-2-container {
    left: 16640px
}

#experience-3-container {
    left: 18440px;
    width: 900px
}

.experience-text-a,
.experience-text-b {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    font-family: frankfurter-medium-plain;
    color: #fff;
    font-size: 35px;
    line-height: 35px
}

.experience-text-b {
    font-family: frankfurter-plain;
    font-size: 60px;
    line-height: 54px
}

.experience-text-c {
    width: 100%
}

.experience-text-c,
.experience-text-d,
.experience-text-e {
    position: relative;
    margin-bottom: 20px;
    font-family: Arial;
    color: #fff;
    font-size: 18px
}

.experience-text-d {
    width: 75%
}

.experience-text-e {
    width: 85%
}

.experience-text-container {
    position: absolute;
    bottom: 185px;
    width: 510px;
    background-color: #444;
    padding: 40px;
    border-style: solid;
    border-width: 10px;
    border-color: #777
}

#email-button,
#fence {
    position: absolute;
    width: 485px;
    height: 230px;
    background-image: url(../image/email-button.png)
}

.face-left {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph
}

.face-right {
    -moz-transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1)
}

#fence {
    width: 740px;
    height: 100px;
    background-image: url(../image/fence.png)
}

.firework {
    position: relative;
    left: -50%;
    top: -50%;
    width: 500px;
    height: 500px;
    background-color: transparent
}

.firework-container {
    position: absolute;
    width: 500px;
    height: 500px
}

#firework-container-1 {
    left: 90%;
    top: 30%
}

#firework-container-2 {
    left: 10%;
    top: 20%
}

#firework-container-3 {
    left: 50%;
    top: 10%
}

#firework-container-4 {
    left: 90%;
    top: 50%
}

#firework-container-5 {
    left: 30%;
    top: 15%
}

#firework-container-6 {
    left: 90%;
    top: 30%
}

#fireworks-container {
    position: absolute;
    width: 100%;
    height: 100%
}

.fish,
.fish-eyes {
    position: absolute
}

.fish {
    width: 125px;
    height: 93px;
    overflow: hidden;
    background-image: url(../image/fish.png)
}

.fish-eyes {
    left: 18px;
    top: 45px;
    width: 39px;
    height: 18px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/fish-eyes.png)
}

#fishes-container {
    position: absolute;
    left: 270px;
    top: 50px;
    width: 725px;
    height: 493px
}

#fish-ribbon-container-1 {
    top: 0
}

#fish-ribbon-container-2 {
    top: 100px
}

#fish-ribbon-container-3 {
    top: 200px
}

#fish-ribbon-container-4 {
    top: 300px
}

#fish-text-container {
    position: absolute;
    top: 83px;
    right: 760px;
    width: 480px;
    height: 440px
}

#floor {
    position: absolute;
    width: 100%;
    height: 50px;
    background-image: url(../image/floor.png)
}

@font-face {
    font-family: 'frankfurter-medium-plain';
    src: url(../font/frankfurter-medium-plain.eot);
    src: url(../font/frankfurter-medium-plain.eot?#iefix) format('embedded-opentype'), url(../font/frankfurter-medium-plain.woff) format('woff'), url(../font/frankfurter-medium-plain.ttf) format('truetype'), url(../font/frankfurter-medium-plain.svg#frankfurter-medium-plain) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'frankfurter-plain';
    src: url(../font/frankfurter-plain.eot);
    src: url(../font/frankfurter-plain.eot?#iefix) format('embedded-opentype'), url(../font/frankfurter-plain.woff) format('woff'), url(../font/frankfurter-plain.ttf) format('truetype'), url(../font/frankfurter-plain.svg#frankfurter-plain) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'lobster';
    src: url(../font/lobster-1.4.eot);
    src: url(../font/lobster-1.4.eot?#iefix) format('embedded-opentype'), url(../font/lobster-1.4.woff) format('woff'), url(../font/lobster-1.4.ttf) format('truetype'), url(../font/lobster-1.4.svg#lobster) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'poster-sans-bold';
    src: url(../font/poster-sans-bold.eot);
    src: url(../font/poster-sans-bold.eot?#iefix) format('embedded-opentype'), url(../font/poster-sans-bold.woff) format('woff'), url(../font/poster-sans-bold.ttf) format('truetype'), url(../font/poster-sans-bold.svg#poster-sans-bold) format('svg');
    font-weight: 400;
    font-style: normal
}

.foundation {
    position: absolute;
    top: 80%;
    height: 90%;
    background-image: url(../image/foundation.png)
}

#foundation-1 {
    left: 13320px;
    width: 6220px
}

.gate {
    position: absolute;
    bottom: 20%;
    width: 320px;
    height: 300px;
    background-image: url(../image/gate.png)
}

#gate-1 {
    left: 2100px
}

#gate-2 {
    left: 7780px
}

#gate-3 {
    left: 13320px
}

#gate-4 {
    left: 19530px
}

.gate-text {
    position: absolute;
    top: 14px;
    font-family: frankfurter-plain;
    color: #fff;
    font-size: 60px
}

#gate-text-1 {
    left: 37px
}

#gate-text-2,
#gate-text-3 {
    left: 32px
}

#gate-text-4 {
    left: 29px
}

.grass {
    position: absolute;
    width: 100%;
    height: 50px;
    background-image: url(../image/grass.png)
}

.ground,
.layer-horizontal {
    position: absolute;
    height: 100%
}

.ground {
    width: 100%;
    background-image: url(../image/ground.png)
}

#ground-and-grass-container-1 {
    position: absolute;
    left: 0;
    top: 80%;
    width: 8100px;
    height: 90%
}

#ground-and-grass-container-2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1160px;
    height: 2000px
}

img {
    border-style: none
}

#javascript-banner {
    position: relative;
    left: -50%;
    margin-top: -115px;
    width: 600px;
    height: 230px
}

#javascript-banner-container {
    position: absolute;
    left: 50%;
    top: 50%
}

#javascript-banner-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 230px;
    background-image: url(../image/javascript-banner-left.png)
}

#javascript-banner-middle {
    position: absolute;
    left: 79px;
    top: 0;
    width: 440px;
    height: 190px;
    background-color: #f7941d
}

#javascript-banner-right {
    position: absolute;
    left: 518px;
    top: 0;
    width: 80px;
    height: 230px;
    background-image: url(../image/javascript-banner-right.png)
}

#javascript-banner-text-a,
#javascript-banner-text-b {
    position: relative;
    font-family: frankfurter-plain;
    color: #fff;
    font-size: 39px;
    text-align: center;
    margin-top: 37px
}

#javascript-banner-text-b {
    font-size: 72px;
    margin-top: -12px
}

.layer-horizontal {
    left: 0;
    top: 100%
}

#layer-horizontal-1 {
    width: 4000px
}

#layer-horizontal-2 {
    width: 12000px
}

#layer-horizontal-3 {
    width: 22500px
}

.layer-vertical,
.mountain {
    position: absolute;
    bottom: 0;
    width: 100%
}

#layer-vertical-1 {
    height: 3500px
}

#layer-vertical-2 {
    height: 6000px
}

.mountain {
    bottom: 20%;
    width: 800px;
    height: 400px;
    background-image: url(../image/mountain.png)
}

#mountain-1 {
    left: 1000px
}

#mountain-2 {
    left: 2800px
}

#nba-ball {
    position: absolute;
    left: 415px;
    bottom: 250px;
    width: 70px;
    height: 70px;
    background-image: url(../image/nba-ball.png)
}

#nba-board-1 {
    left: 0;
    bottom: 0
}

#nba-board-2 {
    left: 120px;
    bottom: 0
}

#nba-board-3 {
    left: 240px;
    bottom: 0
}

#nba-board-4 {
    left: 550px;
    bottom: 0
}

#nba-board-5 {
    left: 670px;
    bottom: 0
}

#nba-board-6 {
    left: 790px;
    bottom: 0
}

.nba-board-blue,
.nba-board-red {
    position: absolute;
    width: 110px;
    height: 140px;
    background-image: url(../image/nba-board-blue.png)
}

.nba-board-red {
    background-image: url(../image/nba-board-red.png)
}

#nba-container {
    position: absolute;
    left: 6680px;
    bottom: 20%;
    width: 900px;
    height: 80%
}

#nba-player {
    position: relative;
    left: -50%;
    overflow: hidden;
    width: 300px;
    height: 280px
}

#nba-player-eyes {
    position: absolute;
    left: 92px;
    top: 75px;
    width: 66px;
    height: 30px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/enemy-face-b-eyes.png)
}

#nba-player-container {
    position: absolute;
    left: 50%;
    bottom: 0
}

#nba-player-frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 1200px;
    height: 280px;
    background-image: url(../image/nba-player.png)
}

#nba-rim,
#nba-rim-container {
    position: absolute;
    width: 280px
}

#nba-rim-container {
    left: 310px;
    bottom: 0;
    height: 500px
}

#nba-rim {
    height: 550px;
    background-image: url(../image/nba-rim.png)
}

.nba-text {
    position: relative;
    top: -17px;
    font-family: frankfurter-plain;
    color: #fff;
    font-size: 120px;
    margin-left: -50%
}

.nba-text-container {
    position: absolute;
    left: 50%
}

#hangar,
#hangar-door {
    position: absolute;
    left: 8030px;
    bottom: 20%;
    width: 800px;
    height: 530px;
    background-color: #555
}

#hangar-door {
    left: 100px;
    bottom: 0;
    width: 600px;
    height: 290px;
    background-color: #333
}

#hangar-roof {
    position: absolute;
    width: 100%;
    height: 40px;
    background-color: #aaa
}

#hangar-window {
    position: absolute;
    left: 100px;
    top: 90px;
    width: 600px;
    height: 100px;
    background-image: url(../image/hangar-window.png)
}

#page {
    left: 0;
    top: 0;
    width: 100%
}

#panel {
    position: absolute;
    top: 60px;
    width: 100%;
    height: 100%;
    background-image: url(../image/panel.png)
}

#panel-and-floor-container {
    position: absolute;
    left: 13320px;
    top: 80%;
    width: 6210px;
    height: 90%;
    background-color: #444;
    overflow: hidden
}

#piechart-robot-front,
.piechart {
    position: absolute;
    width: 300px;
    height: 300px
}

.piechart {
    overflow: hidden
}

#piechart-robot {
    left: 160px;
    top: 30px
}

#piechart-robot-front {
    left: 0;
    top: 0;
    background-image: url(../image/piechart-front.png)
}

#piechart-robot-text-graphic-1 {
    left: 202px;
    top: 155px
}

#piechart-robot-text-graphic-2 {
    left: 216px;
    top: 194px
}

#piechart-robot-text-animation-1 {
    left: 10px;
    top: 97px
}

#piechart-robot-text-animation-2 {
    left: 46px;
    top: 148px
}

#piechart-robot-text-code-1 {
    left: 220px;
    top: 67px
}

#piechart-robot-text-code-2 {
    left: 221px;
    top: 106px
}

#piechart-alien-front,
.piechart-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 300px
}

.piechart-back {
    background-image: url(../image/piechart-back.png)
}

#piechart-alien {
    left: 50px;
    top: 130px
}

#piechart-alien-front {
    background-image: url(../image/piechart-front.png)
}

#piechart-alien-text-graphic-1 {
    left: 25px;
    top: 98px
}

#piechart-alien-text-graphic-2 {
    left: 42px;
    top: 150px
}

#piechart-alien-text-animation-1 {
    left: 191px;
    top: 155px
}

#piechart-alien-text-animation-2 {
    left: 218px;
    top: 193px
}

#piechart-alien-text-code-1 {
    left: 220px;
    top: 67px
}

#piechart-alien-text-code-2 {
    left: 221px;
    top: 105px
}

#piechart-squid {
    left: 135px;
    top: 20px
}

#piechart-squid-front {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 300px;
    background-image: url(../image/piechart-front.png)
}

#piechart-squid-text-graphic-1 {
    left: 25px;
    top: 98px
}

#piechart-squid-text-graphic-2 {
    left: 42px;
    top: 150px
}

#piechart-squid-text-animation-1 {
    left: 191px;
    top: 155px
}

#piechart-squid-text-animation-2 {
    left: 218px;
    top: 193px
}

#piechart-squid-text-code-1 {
    left: 220px;
    top: 67px
}

#piechart-squid-text-code-2 {
    left: 221px;
    top: 105px
}

.piechart-text-a,
.piechart-text-b {
    position: absolute;
    font-family: poster-sans-bold;
    color: #fff;
    font-size: 36px
}

.piechart-text-b {
    font-family: frankfurter-medium-plain;
    font-size: 30px
}

.piechart-text-c,
.piechart-text-d {
    position: absolute;
    font-family: poster-sans-bold;
    color: #fff;
    font-size: 50px
}

.piechart-text-d {
    font-family: frankfurter-medium-plain;
    font-size: 40px
}

.plant,
.plant-head-leaves {
    position: absolute;
    width: 160px;
    height: 100%
}

.plant-head-leaves {
    height: 250px;
    background-image: url(../image/plant-head-leaves.png)
}

.plant-stalk {
    position: absolute;
    left: 77px;
    top: 95px;
    width: 6px;
    height: 100%;
    background-color: #a67c52
}

#plant-1 {
    left: 180px;
    top: 65%
}

#plant-2 {
    left: 360px;
    top: 65%
}

#plant-3 {
    left: 540px;
    top: 52%
}

#plant-4 {
    left: 720px;
    top: 52%
}

#plants-container {
    position: absolute;
    left: 3280px;
    bottom: 20%;
    width: 900px;
    height: 80%
}

.plant-line {
    width: 100%;
    height: 1px;
    background-color: #fff
}

#plant-line-1 {
    bottom: 65%
}

#plant-line-2 {
    bottom: 52%
}

#plant-line-3 {
    bottom: 39%
}

#plant-line-4 {
    bottom: 26%
}

#plant-line-5 {
    bottom: 13%
}

.plant-line,
.plant-ribbon {
    position: absolute
}

#plant-ribbon-container {
    position: absolute;
    width: 1200px;
    height: 40px;
    bottom: 70%
}

#plant-ribbon-1 {
    left: 196px
}

#plant-ribbon-2 {
    left: 338px
}

#plant-ribbon-3 {
    left: 566px
}

#plant-ribbon-4 {
    left: 712px
}

.plant-ribbon-left {
    position: relative;
    float: left;
    width: 20px;
    height: 40px;
    margin-right: -1px;
    background-image: url(../image/plant-ribbon-left.png)
}

.plant-ribbon-middle {
    position: relative;
    float: left;
    height: 34px;
    padding-top: 6px;
    padding-left: 2px;
    padding-right: 2px;
    background-color: #f7941d;
    font-family: frankfurter-plain;
    color: #fff;
    font-size: 24px
}

.plant-ribbon-right {
    position: relative;
    float: left;
    width: 20px;
    height: 40px;
    margin-left: -1px;
    background-image: url(../image/plant-ribbon-right.png)
}

#plant-text-1 {
    bottom: 66%
}

#plant-text-2 {
    bottom: 53%
}

#plant-text-3 {
    bottom: 40%
}

#plant-text-4 {
    bottom: 27%
}

#plant-text-5 {
    bottom: 14%
}

#preloader,
.plant-text {
    position: absolute;
    left: 0
}

.plant-text {
    font-family: frankfurter-medium-plain;
    color: #fff;
    font-size: 20px
}

#preloader {
    bottom: 0;
    width: 100%;
    height: 100%
}

#preloader-banner {
    position: relative;
    left: -50%;
    margin-top: -115px;
    width: 600px;
    height: 230px
}

#preloader-banner-container {
    position: absolute;
    left: 50%;
    top: 50%
}

#preloader-banner-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 230px;
    background-image: url(../image/preloader-banner-left.png)
}

#preloader-banner-middle {
    position: absolute;
    left: 79px;
    top: 0;
    width: 440px;
    height: 190px;
    background-color: #f26d7d
}

#preloader-banner-right {
    position: absolute;
    left: 518px;
    top: 0;
    width: 80px;
    height: 230px;
    background-image: url(../image/preloader-banner-right.png)
}

#preloader-banner-text-a,
#preloader-banner-text-b {
    position: relative;
    font-family: frankfurter-plain;
    color: #fff;
    font-size: 72px;
    text-align: center;
    margin-top: 29px
}

#preloader-banner-text-b {
    font-size: 39px;
    margin-top: -12px
}

#preloader-dots {
    position: absolute;
    left: 194px;
    top: 130px;
    width: 53px;
    height: 9px
}

.preloader-dots-animation {
    background-image: url(../image/preloader-dots-animation.gif)
}

.preloader-dots-static {
    background-image: url(../image/preloader-dots-static.png)
}

#robby {
    position: relative;
    left: -50%;
    width: 200px;
    height: 175px;
    overflow: hidden
}

#robby-container {
    position: absolute;
    left: 50%;
    bottom: 100%
}

#robby-eyes-close,
#robby-slides {
    position: absolute;
    top: 35px;
    left: 90px;
    width: 55px;
    height: 25px;
    background-image: url(../image/robby-eyes-close.png)
}

#robby-slides {
    left: 0;
    top: 0;
    width: 1800px;
    height: 400px;
    background-image: url(../image/robby-slides.png)
}

#ribbon-2-1 {
    left: 9390px;
    top: 80%
}

#ribbon-2-2 {
    left: 10735px;
    top: 80%
}

#ribbon-2-3 {
    left: 12240px;
    top: 80%
}

#robot,
.ribbon-absolute {
    position: absolute
}

.ribbon-container {
    position: absolute;
    width: 100%;
    height: 75px;
    top: 5%;
    text-align: center
}

.ribbon-left {
    position: relative;
    float: left;
    width: 55px;
    height: 75px;
    margin-right: -1px;
    background-image: url(../image/ribbon-left.png)
}

.ribbon-middle {
    position: relative;
    float: left;
    height: 50px;
    background-color: #ed1c24;
    font-family: lobster;
    color: #fff;
    font-size: 36px;
    text-align: center
}

.ribbon-right {
    position: relative;
    float: left;
    width: 55px;
    height: 75px;
    margin-left: -1px;
    background-image: url(../image/ribbon-right.png)
}

.ribbon-relative {
    display: inline-block
}

#robot {
    left: 380px;
    bottom: 53px;
    width: 620px;
    height: 492px
}

#robot-body {
    position: absolute;
    left: 60px;
    top: 0;
    width: 500px;
    height: 399px;
    background-image: url(../image/robot-body.png)
}

.robot-hand-a {
    position: absolute;
    left: 0;
    width: 160px;
    height: 137px;
    background-image: url(../image/robot-hand-a.png)
}

.robot-hand-b {
    left: 20px;
    width: 120px;
    background-image: url(../image/robot-hand-b.png)
}

.robot-hand-b,
.robot-hand-c,
.robot-hand-d {
    position: absolute;
    height: 137px
}

.robot-hand-c {
    left: 60px;
    width: 40px;
    background-image: url(../image/robot-hand-c.png)
}

.robot-hand-d {
    left: 20px;
    width: 120px;
    background-image: url(../image/robot-hand-d.png)
}

#robot-hand-left,
#robot-hand-right {
    position: absolute;
    left: 0;
    top: 355px;
    width: 160px;
    height: 137px
}

#robot-hand-right {
    left: 460px
}

.sea {
    position: absolute;
    top: 90%
}

#sea-1 {
    left: 8100px;
    width: 5220px;
    height: 80%
}

#sea-2 {
    left: 19530px;
    width: 2970px;
    height: 10%;
    background-color: #0072bc
}

#sea-floor {
    position: absolute
}

#sea-layer-horizontal-1,
.sea-seal {
    width: 100%;
    background-color: #0072bc
}

.sea-seal {
    position: absolute;
    top: -1px;
    height: 2px
}

#sea-layer-horizontal-1 {
    left: 0;
    height: 85%
}

#sea-floor {
    left: 0;
    top: 170%;
    width: 22500px;
    height: 5%;
    background-color: #c69c6d
}

.sea-ribbon-container {
    position: absolute;
    height: 40px;
    right: 0
}

.sea-ribbon-left {
    position: relative;
    float: left;
    width: 20px;
    height: 40px;
    margin-right: -1px;
    background-image: url(../image/sea-ribbon-left.png)
}

.sea-ribbon-middle {
    position: relative;
    float: left;
    height: 34px;
    padding-top: 6px;
    padding-left: 2px;
    padding-right: 2px;
    background-color: #f26d7d;
    font-family: frankfurter-plain;
    color: #fff;
    font-size: 24px
}

.sea-ribbon-right {
    position: relative;
    float: left;
    width: 20px;
    height: 40px;
    margin-left: -1px;
    background-image: url(../image/sea-ribbon-right.png)
}

.sea-wave {
    position: absolute;
    bottom: 10%;
    height: 6px;
    background-image: url(../image/sea-wave.png)
}

#sea-wave-1 {
    left: 8100px;
    width: 5220px
}

#sea-wave-2 {
    left: 19530px;
    width: 2970px
}

#skill-1-container {
    left: 1020px
}

#skill-1-container,
#skill-2-container,
#skill-3-container {
    position: absolute;
    bottom: 0;
    width: 1000px;
    height: 90%
}

#skill-2-container {
    left: 2420px
}

#skill-3-container {
    left: 3820px
}

.skill-measurement {
    position: absolute;
    bottom: 0;
    height: 100%
}

.skill-measurement-1 {
    left: 270px
}

.skill-measurement-2 {
    left: 420px
}

.skill-measurement-3 {
    left: 570px
}

.skill-measurement-4 {
    left: 720px
}

.skill-measurement-5 {
    left: 870px
}

.skill-measurement-header {
    position: absolute;
    padding: 6px 10px 5px;
    background-color: #00bff3;
    font-family: frankfurter-medium-plain;
    color: #0072bc;
    font-size: 18px
}

.skill-measurement-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #00bff3
}

.scroll-or-swipe-text-container {
    position: absolute;
    bottom: -120px;
    width: 100%;
    height: 50px;
    font-family: frankfurter-medium-plain;
    color: #fff;
    font-size: 30px;
    text-align: center;
    opacity: 0;
    filter: alpha(opacity=0)
}

#social-bottom {
    position: relative;
    left: 20px;
    width: 80px;
    height: 21px;
    margin-top: -1px;
    background-image: url(../image/social-bottom.png)
}

#social-container {
    position: absolute;
    width: 120px;
    left: 85%
}

#social-middle {
    position: relative;
    left: 20px;
    width: 70px;
    padding-top: 20px;
    padding-left: 10px;
    padding-bottom: 10px;
    background-color: #ed1c24
}

#social-top {
    position: relative;
    width: 120px;
    height: 23px;
    margin-bottom: -1px;
    background-image: url(../image/social-top.png)
}

.social-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 10px
}

#splash-container,
#squid {
    position: absolute;
    bottom: 20%;
    width: 1300px;
    height: 548px
}

#squid {
    left: 430px;
    bottom: 10px;
    width: 570px;
    height: 600px
}

#squid-body {
    left: 60px;
    top: 0;
    width: 450px;
    height: 544px;
    background-image: url(../image/squid-body.png)
}

#squid-body,
.squid-hand-close,
.squid-hand-open {
    position: absolute
}

#squid-hand-close-1 {
    left: 0;
    top: 399px;
    width: 80px;
    height: 83px;
    background-image: url(../image/squid-hand-close-a.png)
}

#squid-hand-close-2,
#squid-hand-close-3 {
    left: 100px;
    top: 510px;
    width: 82px;
    height: 81px;
    background-image: url(../image/squid-hand-close-b.png)
}

#squid-hand-close-3 {
    left: 388px;
    background-image: url(../image/squid-hand-close-c.png)
}

#squid-hand-close-4 {
    left: 490px;
    top: 399px;
    width: 80px;
    height: 83px;
    background-image: url(../image/squid-hand-close-d.png)
}

#squid-hand-open-1 {
    left: 0;
    top: 394px;
    width: 85px;
    height: 100px;
    background-image: url(../image/squid-hand-open-a.png)
}

#squid-hand-open-2,
#squid-hand-open-3 {
    left: 94px;
    top: 502px;
    width: 96px;
    height: 97px;
    background-image: url(../image/squid-hand-open-b.png)
}

#squid-hand-open-3 {
    left: 380px;
    background-image: url(../image/squid-hand-open-c.png)
}

#squid-hand-open-4 {
    left: 485px;
    top: 394px;
    width: 85px;
    height: 100px;
    background-image: url(../image/squid-hand-open-d.png)
}

#title-about,
#title-awards-and {
    position: absolute;
    left: 2280px;
    bottom: 20%;
    width: 800px;
    height: 400px;
    background-image: url(../image/title-about.png)
}

#title-awards-and {
    left: 19710px;
    width: 1060px;
    height: 420px;
    background-image: url(../image/title-awards-and.png)
}

#title-contact {
    position: absolute;
    top: 0;
    margin-left: -1040px;
    width: 1080px;
    height: 540px;
    background-image: url(../image/title-contact.png)
}

#title-experience,
#title-leonardi {
    position: absolute;
    left: 13500px;
    bottom: 20%;
    width: 1140px;
    height: 400px;
    background-image: url(../image/title-experience.png)
}

#title-leonardi {
    left: 200px;
    bottom: 0;
    width: 880px;
    height: 300px;
    background-image: url(../image/title-leonardi.png)
}

#title-publication,
#title-robby {
    position: absolute;
    left: 19910px;
    bottom: 20%;
    width: 1180px;
    height: 300px;
    background-image: url(../image/title-publication.png)
}

#title-robby {
    left: 0;
    bottom: 0;
    width: 840px;
    height: 420px;
    background-image: url(../image/title-robby.png)
}

#title-skills {
    position: absolute;
    width: 820px;
    height: 400px;
    background-image: url(../image/title-skills.png)
}

.transparent {
    opacity: 0;
    filter: alpha(opacity=0)
}

#title-skills,
#tree-1,
#tree-2 {
    left: 0;
    bottom: 0
}

#tree-2 {
    left: 100px
}

#tree-3,
#tree-4 {
    left: 240px;
    bottom: 0
}

#tree-4 {
    left: 880px
}

#tree-5,
#tree-6 {
    left: 920px;
    bottom: 0
}

#tree-6 {
    left: 1060px
}

#tree-7 {
    left: 2650px;
    bottom: 20%
}

#tree-8 {
    left: 2750px
}

#tree-10,
#tree-8,
#tree-9 {
    bottom: 20%
}

#tree-9 {
    left: 3010px
}

#tree-10 {
    left: 2850px
}

#tree-11 {
    left: -100px;
    bottom: 0
}

#tree-12 {
    left: 20px;
    bottom: 0
}

#tree-13 {
    left: 140px;
    bottom: 0
}

#tree-14 {
    left: 260px;
    bottom: 0
}

#tree-15 {
    left: 380px;
    bottom: 0
}

#tree-16 {
    left: 500px;
    bottom: 0
}

#tree-17 {
    left: 620px;
    bottom: 0
}

#tree-18 {
    left: 740px;
    bottom: 0
}

#tree-19 {
    left: 860px;
    bottom: 0
}

#tree-20 {
    left: -100px;
    bottom: 0
}

#tree-21 {
    left: 0;
    bottom: 0
}

#tree-22 {
    left: 160px;
    bottom: 0
}

#tree-23 {
    left: 600px;
    bottom: 0
}

#tree-24 {
    left: 700px;
    bottom: 0
}

#tree-25 {
    left: 860px;
    bottom: 0
}

.tree-bright-a {
    position: absolute;
    width: 140px;
    height: 95px;
    background-image: url(../image/tree-bright-a.png)
}

.tree-bright-b,
.tree-bright-c {
    position: absolute;
    width: 140px;
    height: 185px;
    background-image: url(../image/tree-bright-b.png)
}

.tree-bright-c {
    width: 200px;
    height: 240px;
    background-image: url(../image/tree-bright-c.png)
}

.tree-bright-d,
.tree-bright-e,
.tree-dark-a {
    position: absolute;
    width: 200px;
    height: 300px;
    background-image: url(../image/tree-bright-d.png)
}

.tree-bright-e,
.tree-dark-a {
    height: 430px;
    background-image: url(../image/tree-bright-e.png)
}

.tree-dark-a {
    width: 140px;
    height: 95px;
    background-image: url(../image/tree-dark-a.png)
}

.tree-dark-b {
    width: 140px
}

.tree-dark-b,
.tree-dark-c {
    position: absolute
}

.tree-dark-b {
    height: 185px;
    background-image: url(../image/tree-dark-b.png)
}

.tree-dark-c {
    width: 200px;
    height: 240px;
    background-image: url(../image/tree-dark-c.png)
}

.tree-dark-d {
    position: absolute;
    width: 200px;
    height: 300px;
    background-image: url(../image/tree-dark-d.png)
}

.tree-dark-e {
    width: 200px
}

.tree-dark-e,
.turtle {
    position: absolute
}

.tree-dark-e {
    height: 430px;
    background-image: url(../image/tree-dark-e.png)
}

.turtle {
    width: 125px;
    height: 75px;
    overflow: hidden;
    background-image: url(../image/turtle.png)
}

.turtle-eyes {
    position: absolute;
    left: 3px;
    top: 27px;
    width: 39px;
    height: 18px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url(../image/turtle-eyes.png)
}

#turtle-ribbon-container-1 {
    top: 0
}

#turtle-ribbon-container-2 {
    top: 100px
}

#turtle-ribbon-container-3 {
    top: 200px
}

#turtle-ribbon-container-4 {
    top: 300px
}

#turtles-container,
.waterfall {
    position: absolute;
    left: 270px;
    top: 50px;
    width: 725px;
    height: 475px
}

#turtle-text-container {
    position: absolute;
    top: 65px;
    right: 760px;
    width: 480px;
    height: 440px
}

.waterfall {
    left: 150px;
    top: 0;
    width: 860px;
    height: 100%
}

#waterfall-1 {
    background-image: url(../image/waterfall-a.png)
}

#waterfall-2 {
    background-image: url(../image/waterfall-b.png)
}

.window {
    position: absolute;
    width: 190px;
    height: 110px;
    background-image: url(../image/window.png)
}