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: 0.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: 40px;
  top: 97px;
}
#piechart-robot-text-animation-2 {
  left: 46px;
  top: 148px;
}
#piechart-robot-text-code-1 {
  left: 200px;
  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: 45px;
  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: 190px;
  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: 395px;
}
#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: 12120px;
  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 {
  font-weight: 600;
  color: #fff;
  font-size: 80px;
  background-color: rgba(255, 166, 0, 0.855);
  left: 537px;
  bottom: 220px;
  width: 280px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 13px;
  /* background-image: url(../image/title-leonardi.png); */
}
#title-publication,
#title-robby {
  position: absolute;
  left: 19910px;
  bottom: 20%;
  width: 280px;
  /* height: 300px; */
  /* background-image: url(../image/title-publication.png);  */
}
#title-robby {
  font-weight: 600;
  color: #fff;
  font-size: 80px;
  background-color: rgba(255, 166, 0, 0.959);
  left: 487px;
  bottom: 320px;
  width: 220px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 13px;
  /* 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);
}



.containers {
  position: absolute;
    top: 440px;
    margin-left: -210px;
  /* position: absolute;
  top:50%;
  left:50%; */
  /* margin-left: -65px; */
  /* margin-top: -20px; */
  width: 130px;
  height: 40px;
  text-align: center;
}
#buttons {
  position: relative;
  top: 448px;
  right: 210px;
  outline:none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius:40px;
  background: #f26522;
  border: 2px solid  #f7941c;
  color: #fff;
  letter-spacing:1px;
  text-shadow:0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease;
}


.onclic {
  width: 40px;
  border-color: #f26522;
  border-width: 3px;
  font-size: 0;
  border-left-color:  #f7941c;
  animation: rotating 2s 0.25s linear infinite;
}
  .onclic::after {
    content:"";
  }
  .onclic:hover {
    color:  #f7941c;
    background-color: #f26522;
  }

.validate {
  font-size:13px;
  color: #f26522;
  background:   #f7941c;
 
}

.validate::after {
  font-family:'FontAwesome';
  content:"\f00c";
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}