/*sprite animation*/

#sprite1 {
     width: 300px;
     height: 54px;
     background-image: url(img/artwork/nat.png);
     top:200px;
     position:fixed;
     z-index: -1;
     animation:natlarge 60s infinite;
     animation-timing-function:linear;
    -webkit-animation:natlarge 60s infinite;
    -webkit-animation-timing-function:linear; 
}
@keyframes natlarge
{
from { left: -180%;}
 to {left:  220%;}
}

@-webkit-keyframes natlarge 
{
from { left: -180%;}
 to {left:  220%;}
}
#sprite2 {
     width: 150px;
     height: 75px;
     background-image: url(img/artwork/sub.png);
     top:60%;
     position:fixed;
     z-index: -1;
     animation:sub 50s infinite;
     animation-timing-function:linear;
    -webkit-animation:sub 50s infinite;
    -webkit-animation-timing-function:linear; 
}
@keyframes sub
{
from { left: 120%;}
 to {left:  -80%;}
}

@-webkit-keyframes sub 
{
from { left: 120%;}
 to {left:  -80%;}
}

#sprite4 {
     width: 100px;
     height: 22px;
     background-image: url(img/artwork/spikesub.png);
     top:15%;
     position:fixed;
     z-index: -1;
     animation:spikesub 64s infinite;
     animation-timing-function:linear;
    -webkit-animation:spikesub 64s infinite;
    -webkit-animation-timing-function:linear; 
}
@keyframes spikesub
{
from { left: -120%;}
 to {left:  100%;}
}

@-webkit-keyframes spikesub 
{
from { left: -120%;}
 to {left:  100%;}
}
#sprite3 {
     width: 100px;
     height: 20px;
     background-image: url(img/artwork/longsub.png);
     top:25%;
     position:fixed;
     z-index: -1;
     animation:longsub 65s infinite;
     animation-timing-function:linear;
    -webkit-animation:longsub 65s infinite;
    -webkit-animation-timing-function:linear; 
}
@keyframes longsub
{
from { left: 140%;}
 to {left:  -100%;}
}

@-webkit-keyframes longsub
{
from { left: 140%;}
 to {left:  -100%;}
}

/*bubbles*/
.bubble1 {
      width: 40px;
     height: 40px;
     background-image: url(img/artwork/bubble.png);
     left:25%;
     position:fixed;
     z-index: -1;
     opacity: 0.7;
     animation:bubble1 15s infinite;
     animation-timing-function:linear;
    -webkit-animation:bubble1 15s infinite;
    -webkit-animation-timing-function:linear; 
}
.bubble2 {
      width: 40px;
     height: 40px;
     background-image: url(img/artwork/bubble.png);
     left:55%;
     position:fixed;
     z-index: -1;
     opacity: 0.5;
     transform: scale(0.7,0.7);
     animation:bubble2 10s infinite;
     animation-timing-function:linear;
     -webkit-transform: scale(0.7,0.7);
    -webkit-animation:bubble2 10s infinite;
    -webkit-animation-timing-function:linear; 
}
.bubble3 {
      width: 40px;
     height: 40px;
     background-image: url(img/artwork/bubble.png);
     left:75%;
     position:fixed;
     z-index: -1;
     opacity: 0.7;
     transform: scale(0.5,0.5);
     animation:bubble3 12s infinite;
     animation-timing-function:linear;
     -webkit-transform: scale(0.5,0.5);
    -webkit-animation:bubble3 12s infinite;
    -webkit-animation-timing-function:linear; 
}
.bubble4 {
      width: 40px;
     height: 40px;
     background-image: url(img/artwork/bubble.png);
     left:35%;
     position:fixed;
     z-index: -1;
     opacity: 0.4;
     transform: scale(0.6,0.6);
     animation:bubble4 11s infinite;
     animation-timing-function:linear;
     -webkit-transform: scale(0.6,0.6);
    -webkit-animation:bubble4 11s infinite;
    -webkit-animation-timing-function:linear; 
}
.bubble5 {
      width: 40px;
     height: 40px;
     background-image: url(img/artwork/bubble.png);
     left:15%;
     position:fixed;
     z-index: -1;
     opacity: 0.6;
     transform: scale(0.4,0.4);
     animation:bubble5 9s infinite;
     animation-timing-function:linear;
     -webkit-transform: scale(0.4,0.4);
    -webkit-animation:bubble5 9s infinite;
    -webkit-animation-timing-function:linear; 
}
.bubble6 {
      width: 40px;
     height: 40px;
     background-image: url(img/artwork/bubble.png);
     left:85%;
     position:fixed;
     z-index: -1;
     opacity: 0.5;
     transform: scale(0.7,0.7);
     animation:bubble6 9s infinite;
     animation-timing-function:linear;
     -webkit-transform: scale(0.7,0.7);
    -webkit-animation:bubble6 9s infinite;
    -webkit-animation-timing-function:linear; 
}
.bubble7 {
      width: 40px;
     height: 40px;
     background-image: url(img/artwork/bubble.png);
     left:65%;
     position:fixed;
     z-index: -1;
     opacity: 0.9;
     transform: scale(0.8,0.8);
     animation:bubble7 13s infinite;
     animation-timing-function:linear;
     -webkit-transform: scale(0.8,0.8);
    -webkit-animation:bubble7 13s infinite;
    -webkit-animation-timing-function:linear; 
}
.bubble8 {
      width: 40px;
     height: 40px;
     background-image: url(img/artwork/bubble.png);
     left:45%;
     position:fixed;
     z-index: -1;
     opacity: 0.6;
     transform: scale(0.6,0.6);
     animation:bubble8 12s infinite;
     animation-timing-function:linear;
     -webkit-transform: scale(0.6,0.6);
    -webkit-animation:bubble8 12s infinite;
    -webkit-animation-timing-function:linear; 
}
.bubble9 {
      width: 40px;
     height: 40px;
     background-image: url(img/artwork/bubble.png);
     left:5%;
     position:fixed;
     z-index: -1;
     opacity: 0.8;
     transform: scale(0.8,0.8);
     animation:bubble9 14s infinite;
     animation-timing-function:linear;
     -webkit-transform: scale(0.8,0.8);
    -webkit-animation:bubble9 14s infinite;
    -webkit-animation-timing-function:linear; 
}
@keyframes bubble1
{
0% { left:26%;top:120%;}
7% { left:25%;top:110%;}
14% { left:24%;top:100%;}
21% { left:25%;top:90%;}
28% {left:24%;top:80%;}
36% {left:25%;top:70%;}
43% {left:24%;top:60%;}
50% {left:25%;top:50%;}
57% {left:24%;top:40%;}
64% {left:25%;top:30%;}
71% {left:24%;top:20%;}
78% {left:25%;top:10%;}
85% {left:26%;top:0%;}
92% {left:25%;top:-10%;}
100% {left:24%;top:-20%;}
}
@-webkit-keyframes bubble1
{
0% { left:26%;top:120%;}
7% { left:25%;top:110%;}
14% { left:24%;top:100%;}
21% { left:25%;top:90%;}
28% {left:24%;top:80%;}
36% {left:25%;top:70%;}
43% {left:24%;top:60%;}
50% {left:25%;top:50%;}
57% {left:24%;top:40%;}
64% {left:25%;top:30%;}
71% {left:24%;top:20%;}
78% {left:25%;top:10%;}
85% {left:26%;top:0%;}
92% {left:25%;top:-10%;}
100% {left:24%;top:-20%;}
}
@keyframes bubble2
{
0% { left:56%;top:120%;}
7% { left:55%;top:110%;}
14% { left:54%;top:100%;}
21% { left:55%;top:90%;}
28% {left:54%;top:80%;}
36% {left:55%;top:70%;}
43% {left:54%;top:60%;}
50% {left:55%;top:50%;}
57% {left:54%;top:40%;}
64% {left:55%;top:30%;}
71% {left:54%;top:20%;}
78% {left:55%;top:10%;}
85% {left:56%;top:0%;}
92% {left:55%;top:-10%;}
100% {left:54%;top:-20%;}
}
@-webkit-keyframes bubble2
{
0% { left:56%;top:120%;}
7% { left:55%;top:110%;}
14% { left:54%;top:100%;}
21% { left:55%;top:90%;}
28% {left:54%;top:80%;}
36% {left:55%;top:70%;}
43% {left:54%;top:60%;}
50% {left:55%;top:50%;}
57% {left:54%;top:40%;}
64% {left:55%;top:30%;}
71% {left:54%;top:20%;}
78% {left:55%;top:10%;}
85% {left:56%;top:0%;}
92% {left:55%;top:-10%;}
100% {left:54%;top:-20%;}
}
@keyframes bubble3
{
0% { left:75%;top:120%;}
7% { left:74%;top:110%;}
14% { left:75%;top:100%;}
21% { left:74%;top:90%;}
28% {left:76%;top:80%;}
36% {left:75%;top:70%;}
43% {left:75%;top:60%;}
50% {left:76%;top:50%;}
57% {left:74%;top:40%;}
64% {left:75%;top:30%;}
71% {left:74%;top:20%;}
78% {left:75%;top:10%;}
85% {left:76%;top:0%;}
92% {left:75%;top:-10%;}
100% {left:74%;top:-20%;}
}
@-webkit-keyframes bubble3
{
0% { left:75%;top:120%;}
7% { left:74%;top:110%;}
14% { left:75%;top:100%;}
21% { left:74%;top:90%;}
28% {left:76%;top:80%;}
36% {left:75%;top:70%;}
43% {left:75%;top:60%;}
50% {left:76%;top:50%;}
57% {left:74%;top:40%;}
64% {left:75%;top:30%;}
71% {left:74%;top:20%;}
78% {left:75%;top:10%;}
85% {left:76%;top:0%;}
92% {left:75%;top:-10%;}
100% {left:74%;top:-20%;}
}
@keyframes bubble4
{
0% { left:35%;top:120%;}
7% { left:34%;top:110%;}
14% { left:35%;top:100%;}
21% { left:34%;top:90%;}
28% {left:36%;top:80%;}
36% {left:35%;top:70%;}
43% {left:35%;top:60%;}
50% {left:36%;top:50%;}
57% {left:34%;top:40%;}
64% {left:35%;top:30%;}
71% {left:34%;top:20%;}
78% {left:35%;top:10%;}
85% {left:36%;top:0%;}
92% {left:35%;top:-10%;}
100% {left:34%;top:-20%;}
}
@-webkit-keyframes bubble4
{
0% { left:35%;top:120%;}
7% { left:34%;top:110%;}
14% { left:35%;top:100%;}
21% { left:34%;top:90%;}
28% {left:36%;top:80%;}
36% {left:35%;top:70%;}
43% {left:35%;top:60%;}
50% {left:36%;top:50%;}
57% {left:34%;top:40%;}
64% {left:35%;top:30%;}
71% {left:34%;top:20%;}
78% {left:35%;top:10%;}
85% {left:36%;top:0%;}
92% {left:35%;top:-10%;}
100% {left:34%;top:-20%;}
}
@keyframes bubble5
{
0% { left:15%;top:120%;}
7% { left:14%;top:110%;}
14% { left:15%;top:100%;}
21% { left:14%;top:90%;}
28% {left:16%;top:80%;}
36% {left:15%;top:70%;}
43% {left:15%;top:60%;}
50% {left:16%;top:50%;}
57% {left:14%;top:40%;}
64% {left:15%;top:30%;}
71% {left:14%;top:20%;}
78% {left:15%;top:10%;}
85% {left:16%;top:0%;}
92% {left:15%;top:-10%;}
100% {left:14%;top:-20%;}
}
@-webkit-keyframes bubble5
{
0% { left:15%;top:120%;}
7% { left:14%;top:110%;}
14% { left:15%;top:100%;}
21% { left:14%;top:90%;}
28% {left:16%;top:80%;}
36% {left:15%;top:70%;}
43% {left:15%;top:60%;}
50% {left:16%;top:50%;}
57% {left:14%;top:40%;}
64% {left:15%;top:30%;}
71% {left:14%;top:20%;}
78% {left:15%;top:10%;}
85% {left:16%;top:0%;}
92% {left:15%;top:-10%;}
100% {left:14%;top:-20%;}
}
@keyframes bubble6
{
0% { left:86%;top:120%;}
7% { left:85%;top:110%;}
14% { left:84%;top:100%;}
21% { left:85%;top:90%;}
28% {left:84%;top:80%;}
36% {left:85%;top:70%;}
43% {left:84%;top:60%;}
50% {left:85%;top:50%;}
57% {left:84%;top:40%;}
64% {left:85%;top:30%;}
71% {left:84%;top:20%;}
78% {left:85%;top:10%;}
85% {left:86%;top:0%;}
92% {left:85%;top:-10%;}
100% {left:84%;top:-20%;}
}
@-webkit-keyframes bubble6
{
0% { left:86%;top:120%;}
7% { left:85%;top:110%;}
14% { left:84%;top:100%;}
21% { left:85%;top:90%;}
28% {left:84%;top:80%;}
36% {left:85%;top:70%;}
43% {left:84%;top:60%;}
50% {left:85%;top:50%;}
57% {left:84%;top:40%;}
64% {left:85%;top:30%;}
71% {left:84%;top:20%;}
78% {left:85%;top:10%;}
85% {left:86%;top:0%;}
92% {left:85%;top:-10%;}
100% {left:84%;top:-20%;}
}
@keyframes bubble7
{
0% { left:66%;top:120%;}
7% { left:65%;top:110%;}
14% { left:64%;top:100%;}
21% { left:65%;top:90%;}
28% {left:64%;top:80%;}
36% {left:65%;top:70%;}
43% {left:64%;top:60%;}
50% {left:65%;top:50%;}
57% {left:64%;top:40%;}
64% {left:65%;top:30%;}
71% {left:64%;top:20%;}
78% {left:65%;top:10%;}
85% {left:66%;top:0%;}
92% {left:65%;top:-10%;}
100% {left:64%;top:-20%;}
}
@-webkit-keyframes bubble7
{
0% { left:66%;top:120%;}
7% { left:65%;top:110%;}
14% { left:64%;top:100%;}
21% { left:65%;top:90%;}
28% {left:64%;top:80%;}
36% {left:65%;top:70%;}
43% {left:64%;top:60%;}
50% {left:65%;top:50%;}
57% {left:64%;top:40%;}
64% {left:65%;top:30%;}
71% {left:64%;top:20%;}
78% {left:65%;top:10%;}
85% {left:66%;top:0%;}
92% {left:65%;top:-10%;}
100% {left:64%;top:-20%;}
}
@keyframes bubble8
{
0% { left:45%;top:120%;}
7% { left:44%;top:110%;}
14% { left:45%;top:100%;}
21% { left:44%;top:90%;}
28% {left:45%;top:80%;}
36% {left:44%;top:70%;}
43% {left:45%;top:60%;}
50% {left:46%;top:50%;}
57% {left:45%;top:40%;}
64% {left:44%;top:30%;}
71% {left:45%;top:20%;}
78% {left:44%;top:10%;}
85% {left:45%;top:0%;}
92% {left:46%;top:-10%;}
100% {left:45%;top:-20%;}
}
@-webkit-keyframes bubble8
{
0% { left:45%;top:120%;}
7% { left:44%;top:110%;}
14% { left:45%;top:100%;}
21% { left:44%;top:90%;}
28% {left:45%;top:80%;}
36% {left:44%;top:70%;}
43% {left:45%;top:60%;}
50% {left:46%;top:50%;}
57% {left:45%;top:40%;}
64% {left:44%;top:30%;}
71% {left:45%;top:20%;}
78% {left:44%;top:10%;}
85% {left:45%;top:0%;}
92% {left:46%;top:-10%;}
100% {left:45%;top:-20%;}
}
@keyframes bubble9
{
0% { left:5%;top:120%;}
7% { left:4%;top:110%;}
14% { left:5%;top:100%;}
21% { left:4%;top:90%;}
28% {left:5%;top:80%;}
36% {left:4%;top:70%;}
43% {left:5%;top:60%;}
50% {left:6%;top:50%;}
57% {left:5%;top:40%;}
64% {left:4%;top:30%;}
71% {left:5%;top:20%;}
78% {left:4%;top:10%;}
85% {left:5%;top:0%;}
92% {left:6%;top:-10%;}
100% {left:5%;top:-20%;}
}
@-webkit-keyframes bubble9
{
0% { left:5%;top:120%;}
7% { left:4%;top:110%;}
14% { left:5%;top:100%;}
21% { left:4%;top:90%;}
28% {left:5%;top:80%;}
36% {left:4%;top:70%;}
43% {left:5%;top:60%;}
50% {left:6%;top:50%;}
57% {left:5%;top:40%;}
64% {left:4%;top:30%;}
71% {left:5%;top:20%;}
78% {left:4%;top:10%;}
85% {left:5%;top:0%;}
92% {left:6%;top:-10%;}
100% {left:5%;top:-20%;}
}
/*light*/
.light1 {
      width: 140px;
     height: 310px;
     background-image: url(img/artwork/light1.png);
     top:0%;
     left:30%;
     position:fixed;
     z-index: -1;
     animation: light1 20s infinite;
     animation-timing-function: linear;
     -webkit-animation: light1 20s infinite;
     -webkit-animation-timing-function: linear; 
}
@keyframes light1{
  0% {
   transform:scale(1,1);
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.0;
  }
  50% {
   transform:scale(1.2,2.2);
    -moz-transform:scale(1.2,2.2);
    -webkit-transform:scale(1.2,2.2);
    -o-transform:scale(1.2,2.2);
    opacity: 0.6;
  }
  100% {
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0;
  }
}
@-webkit-keyframes light1{
 0% {
   transform:scale(1,1);
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.0;
  }
  50% {
   transform:scale(1.2,2.2);
    -moz-transform:scale(1.2,2.2);
    -webkit-transform:scale(1.2,2.2);
    -o-transform:scale(1.2,2.2);
    opacity: 0.6;
  }
  100% {
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0;
  }
}
.light2 {
      width: 292px;
     height: 324px;
     background-image: url(img/artwork/light2.png);
     top:0%;
     left:40%;
     position:fixed;
     z-index: -1;
     animation: light2 15s infinite;
     animation-timing-function: linear;
     -webkit-animation: light2 15s infinite;
     -webkit-animation-timing-function: linear; 
}
@keyframes light2{
  0% {
   transform:scale(1,1);
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.7;
  }
  50% {
   transform:scale(1.5,1.9);
    -moz-transform:scale(1.5,1.9);
    -webkit-transform:scale(1.5,1.9);
    -o-transform:scale(1.5,1.9);
    opacity: 0.0;
  }
  100% {
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.7;
  }
}
@-webkit-keyframes light2{
  0% {
   transform:scale(1,1);
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.7;
  }
  50% {
   transform:scale(1.5,1.9);
    -moz-transform:scale(1.5,1.9);
    -webkit-transform:scale(1.5,1.9);
    -o-transform:scale(1.5,1.9);
    opacity: 0.0;
  }
  100% {
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.7;
  }
}
.light3 {
      width: 350px;
     height: 280px;
     background-image: url(img/artwork/light3.png);
     top:0%;
     left:50%;
     position:fixed;
     z-index: -1;
     animation: light3 12s infinite;
     animation-timing-function: linear;
     -webkit-animation: light3 12s infinite;
     -webkit-animation-timing-function: linear; 
}
@keyframes light3{
  0% {
   transform:scale(1,1);
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.0;
  }
  50% {
   transform:scale(1.2,2.2);
    -moz-transform:scale(1.2,2.2);
    -webkit-transform:scale(1.2,2.2);
    -o-transform:scale(1.2,2.2);
    opacity: 0.7;
  }
  100% {
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0;
  }
}
@-webkit-keyframes light3{
 0% {
   transform:scale(1,1);
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.0;
  }
  50% {
   transform:scale(1.2,2.2);
    -moz-transform:scale(1.2,2.2);
    -webkit-transform:scale(1.2,2.2);
    -o-transform:scale(1.2,2.2);
    opacity: 0.7;
  }
  100% {
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0;
  }
}
.light4 {
      width: 242px;
     height: 346px;
     background-image: url(img/artwork/light4.png);
     top:0%;
     left:33%;
     position:fixed;
     z-index: -1;
     animation: light4 14s infinite;
     animation-timing-function: linear;
     -webkit-animation: light4 14s infinite;
     -webkit-animation-timing-function: linear; 
}
@keyframes light4{
  0% {
   transform:scale(1,1);
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.6;
  }
  50% {
   transform:scale(1.9,2.0);
    -moz-transform:scale(1.9,2.0);
    -webkit-transform:scale(1.9,2.0);
    -o-transform:scale(1.9,2.0);
    opacity: 0.0;
  }
  100% {
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.6;
  }
}
@-webkit-keyframes light4{
  0% {
   transform:scale(1,1);
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.6;
  }
  50% {
   transform:scale(1.9,2.0);
    -moz-transform:scale(1.9,2.0);
    -webkit-transform:scale(1.9,2.0);
    -o-transform:scale(1.9,2.0);
    opacity: 0.0;
  }
  100% {
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity: 0.6;
  }
}