canvas {
  display: inline-block;
  *display: inline;
  *zoom: 1; }


[hidden] {
  display: none; }


ul {
  list-style: none;
  display: block;
  padding: 0;
  margin: 0; }

.center {
  max-width: 400px;
  margin: 0 auto;
  width: 88%; }

.wrapper {
  min-height: 460px;
  position: absolute;
  overflow: hidden;
  display: table;
  height: 100%;
  width: 100%;
  width:1600px;
  left: 0;
  top: 0; }

.scene,
.layer {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0; }

.scene {
  min-height: 460px;
  position: relative;
  overflow: hidden; }

.layer {
  position: absolute; }
  .layer div {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden; }


.background {
  background: url(../img/hollywood-background.jpg) no-repeat 50% 100%;
  bottom: 96px;
  background-size: cover;
  position: absolute;
  width: 110%;
  left: -5%;
  top: -5%; }

.wave {
  background: transparent no-repeat;
  background-size:100% 300px;
  position: absolute;
  width: 300%;
  left: -100%; }
  .wave:after {
    background-color: transparent;
    position: absolute;
    display: block;
    content: "";
    height: 700px;
    width: 100%;
    top: 100%;
    left: 0; }
  .wave.plain {
    background-image: url(../img/landmarks.png); }
  .wave.paint {
    /* background-image: url(img/wave-paint.png); } */
    background-image: url(../img/foreground.png); }

.light {
  margin: -120px -120px;
  background-size: 100% 101%;
  height: 1098px;
  width: 130%;
  background-repeat: no-repeat;
  bottom: 100px;
  position: absolute;
  left: 0px; }
  .light.orange {
    background-image: url(../img/bg-skyline.png); }








/* mobile portrait */


@media all and (max-width: 600px) {

  .wrapper { min-height: 360px; }
  .toggle {bottom: 12%; }
  .scene { min-height: 360px; }

  .light {
    margin: -280px -2 0px;
    background-size: 125% 311px;
    height: 511px;
    width: 125%; }

  .wave.depth-30 {
    bottom: 0px;
    margin: 160px 0px;
    background-position: center bottom;
    background-size: 40% 311px;
    height: 311px; }
    .wave.depth-30:after {
      height: 311px; }

  .wave.depth-50 {
    bottom: 0px;
    margin: 120px 0px;
    background-position: center bottom;
    background-size: 42% 511px;
    height: 511px; }
    .wave.depth-50:after {
      height: 511px; }

  .wave.depth-100 {
    bottom: 0px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 240px; }
    .wave.depth-100:after {
      height: 0px; }

  a.gototop {display:none!important;}

 }



/* mobile landscape */

@media all and (min-width: 600px) {

  .center {max-width: 440px; }
  .toggle {margin: -28px; bottom: 15%; }
  .background {bottom: -30px; }

  .light {
    margin: -30px -100px;
    background-size: 900px 411px;
    height: 411px;
    width: 1000px; }

  .wave.depth-30 {
    bottom: 0px;
    margin:0px 0px;
    background-position: center bottom;
    background-size: 1000px 611px;
    height: 611px; }
    .wave.depth-30:after {
      height: 611px; }

  .wave.depth-50 {
    bottom: 0px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: 42% 511px;
    height: 511px; }
    .wave.depth-50:after {
      height: 511px; }

  .wave.depth-100 {
    bottom: 0px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 240px; }
    .wave.depth-100:after {
      height: 0px; }



}




@media all and (min-width: 900px) {

  .center {max-width: 560px; }
  .toggle { margin: -24px; bottom: 12%; }
  .background { bottom: 200px; }

  .light {
    margin: 90px -100px;
    background-size: 1400px 736px;
    height: 736px;
    width: 1400px; }

  .wave.depth-30 {
    bottom: 0px;
    margin: 80px 0px;
    background-position: center bottom;
    background-size: 1400px 800px;
    height: 800px; }
    .wave.depth-30:after {
      height: 800px; }

  .wave.depth-50 {
    bottom: 0px;
    margin: 100px 0px;
    background-position: center bottom;
    background-size: 42% 101%;
    height: 636px; }
    .wave.depth-50:after {
      height: 636px; }

  .wave.depth-100 {
    bottom: 300px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 272px; }
    .wave.depth-100:after {
      height: 0px; }

 }

/* testing ok */

@media all and (min-width: 1200px) {

  #container {max-width:1600px !important;}

  .center { max-width: 620px; }

  .light {
    margin:  0px -100px;
    background-size: 1800px 1098px;
    height: 1098px;
    width: 130%; }

  .wave.depth-30 {
    bottom: 0px;
    margin: 200px 0px;
    background-position: center bottom;
    background-size: 2000px 101%;
    height: 1098px; }
    .wave.depth-30:after {
      height: 26px; }

  .wave.depth-50 {
    bottom: 0px;
    margin: 170px 0px;
    background-position: center bottom;
    background-size: 2000px 101%;
    height: 1098px; }
    .wave.depth-50:after {
      height: 144px; }

  .wave.depth-100 {
    bottom: -72px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 288px; }
    .wave.depth-100:after {
      height: 0px; }
 }








/* accelerometer driven animation */


@-webkit-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg); }
  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg); }
  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg); }
  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg); }
  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg); } }
@-moz-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg); }
  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg); }
  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg); }
  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg); }
  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg); } }
@-ms-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg); }
  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg); }
  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg); }
  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg); }
  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg); } }
@keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg); }
  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg); }
  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg); }
  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg); }
  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg); } }
@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@-moz-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@-ms-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@-webkit-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@-moz-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@-ms-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }
@-moz-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }
@-ms-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }
@keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }