/* Calm Water Surface
- moves from Right to Left
- has sparkle effect applied to every element
- has sun ray effect
*/

.page {
	width:100vw;
	height:100vh;
	perspective:2000px;
	perspective-origin: 50% 50%;
	overflow:hidden;
background: #000010;
background: linear-gradient(0deg, rgba(0, 0, 16, 1) 0%, rgba(0, 0, 64, 1) 29%, rgba(0, 0, 64, 1) 40%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 100%);
}

#parallax {
	transform-style: preserve-3d;
	height:100vh;
	animation-duration: 16s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-name: vscroll;
}

/* Vertical translation test */

@keyframes vscroll {
	0% , 100% {transform: translateY(-10vh); }
	50% {transform: translateY(-30vh); }
}

/* Water Layers */

div[class*='wly'] {
	position: absolute; 
	top: 35vh;
	width:100vw;
	right: 0;
}

.wly1 { transform: translateZ(0px); }
.wly2 { transform: translateZ(-200px); }
.wly3 { transform: translateZ(-400px); }
.wly4 { transform: translateZ(-600px); }
.wly5 { transform: translateZ(-800px); }
.wly6 { transform: translateZ(-1100px); }
.wly7 { transform: translateZ(-1500px); }
.wly8 { transform: translateZ(-2000px); }
.wly9 { transform: translateZ(-2600px); }
.wly10 { transform: translateZ(-3400px); }
.wlb {	position: absolute; 
	transform: translateZ(-3800px);
	top: 70vh;
	left: -100vw;
	width:10000vw; height: 40vh;
	background: #000040;
 }

.wlya {
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-name: wlyakf;
}

@keyframes wlyakf {
	0.001% {transform: translateX(120vmax); opacity: 0;}
	0.002% {transform: translateX(120vmax); opacity: 100;}
	99.998% {transform: translateX(-40vmax); opacity: 100;}
	99.999% {transform: translateX(-40vmax); opacity: 0;}
	0% , 100% {transform: translateX(-40vmax); opacity: 0;}
}

.wlya2 {
	animation-duration: 24s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-name: wlya2kf;
}

@keyframes wlya2kf {
	0.001% {transform: translateX(390vmax); opacity: 0;}
	0.002% {transform: translateX(390vmax); opacity: 100;}
	99.998% {transform: translateX(-90vmax); opacity: 100;}
	99.999% {transform: translateX(-90vmax); opacity: 0;}
	0% , 100% {transform: translateX(-90vmax); opacity: 0;}
}


.wlya3 {
	animation-duration: 48s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-name: wlya3kf;
}

@keyframes wlya3kf {
	0.001% {transform: translateX(500vmax); opacity: 0;}
	0.002% {transform: translateX(500vmax); opacity: 100;}
	99.998% {transform: translateX(-460vmax); opacity: 100;}
	99.999% {transform: translateX(-460vmax); opacity: 0;}
	0% , 100% {transform: translateX(-460vmax); opacity: 0;}
}

/* Water Parts */

div[class^='wpt'] {
	position:absolute;
	/*background-image: url(../images/sparkles.gif);
	background-size: 15vh 0.45vh;
	background-repeat: repeat-x;*/
	padding: 0;
	margin: 0;
	border-style: none;
	border-width: 0;
}
.wpt1 { background-color: #41BDE5; width:20.1vmax; height:5.5vh; }
.wpt2 { background-color: #28A7D0; width:20.1vmax; height:6.0vh; }
.wpt3 { background-color: #0E91BE; width:20.1vmax; height:6.0vh; }
.wpt4 { background-color: #0B81B3; width:20.1vmax; height:6.0vh; }
.wpt5 { background-color: #0974AA; width:20.1vmax; height:7.0vh; }
.wpt6 { background-color: #076099; width:30.3vmax; height:8.5vh; }
.wpt7 { background-color: #065090; width:30.3vmax; height:10.0vh; }
.wpt8 { background-color: #054089; width:30.3vmax; height:11.5vh; }
.wpt9 { background-color: #043080; width:60.3vmax; height:14.0vh; }
.wpt10 { background-color: #032077; width:60.3vmax; height:17.0vh; }

.wpta {
	animation-name: wptakf;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
@keyframes wptakf {
0%,100% {transform: skewY(-2deg)}
50% {transform: skewY(2deg)}
}

.wpta2 {
	animation-name: wpta2kf;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
@keyframes wpta2kf {
0%,100% {transform: skewY(-1.5deg)}
50% {transform: skewY(1.5deg)}
}

.wpta3 {
	animation-name: wpta3kf;
	animation-duration: 16s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
@keyframes wpta3kf {
0%,100% {transform: skewY(-0.75deg)}
50% {transform: skewY(0.75deg)}
}

/* Ice */

.i1 {
	top: 68.2vh;
	width:30vh;
	height:30vh;
	position:absolute;
	animation: i1kf 20s infinite;
	animation-timing-function: linear;
	transform-style: preserve-3d;
}

@keyframes i1kf {
  from  { transform: translateZ(-400px) translateX(150vmax) rotateY(60deg);   }
  to    { transform: translateZ(-400px) translateX(-80vmax) rotateY(60deg); }
}

div[class^='i1sides'] {
	width:30vh;
	height:2.5vh;
	position:absolute;
	border:none;
	background-color: #88aadd;
	background: radial-gradient(rgba(120, 160, 210, 1.0), rgba(160, 210, 255, 1.0));
}

.i1sides1 {
	top: 0;
}

.i1sides2 {
	top: 7vh;
}

.i1vert {
	width:30vh;
	height:30vh;
	position:absolute;
	border:none;
	background-color:rgba(3, 121, 255, 1);
	background-color: #88aadd;
	background: radial-gradient(#5599dd, #99ccff);
	text-align:center;
}

.i1front  { transform: rotateY(0deg) translateZ(15vh); }
.i1right  { transform: rotateY(90deg) translateZ(15vh);  }
.i1left   { transform: rotateY(-90deg) translateZ(15vh); }
.i1back   { transform: rotateY(180deg) translateZ(15vh); }
.i1top    { transform: rotateX(90deg) translateZ(14.9vh); }
.i1bottom { transform: rotateX(-90deg) translateZ(-5.5vh); }

.i2 {
	top: 68.2vh;
	width:50vh;
	left: 50vw;
	height:60vh;
	position:absolute;
	animation: i2kf 20s infinite;
	animation-timing-function: linear;
	animation-delay: -10s;
	transform-style: preserve-3d;
}

.iskew {
	animation: iskewkf 6s infinite;
	animation-timing-function: ease-in;
	animation-delay: 0s;
	transform-style: preserve-3d;
}

@keyframes iskewkf {
  0% , 100%  { transform: rotateX(-1deg);   }
  25%  { transform: rotateZ(-1deg);   }
  50%    { transform: rotateX(1deg); }
  75%    { transform: rotateZ(1deg); }
}

@keyframes i2kf {
  from  { transform: translateZ(-1800px) translateX(160vmax);}
  to    { transform: translateZ(-1800px) translateX(-130vmax);}
}

div[class^='i2sides'] {
	width:42.00vh;
	height:2.5vh;
	position:absolute;
	border:none;
	background-color: #88aadd;
	background: radial-gradient(rgba(120, 160, 210, 1.0), rgba(160, 210, 255, 1.0));
}

.i2sides1 {
	top: 0;
}

.i2sides2 {
	top: 12vh;
}

.i2vert {
	width:67.5vh;
	height:67.5vh;
	position:absolute;
	border:none;
	background-color:rgba(3, 121, 255, 1);
	background-color: #88aadd;
	background: radial-gradient(#5599dd, #99ccff);
	clip-path: polygon( 0% 19.1%,    58.78% 0%,     95.1% 50%,     58.78% 100%,     0% 80.9% );
}

.i2front  { transform: rotateX(90deg) translateZ(33.5vh) translateX(-8vh); }
.i2side1  { transform: rotateY(54deg) translateZ(28.5vh);  }
.i2side2   { transform: rotateY(-162deg) translateZ(28.5vh); }
.i2side3   { transform: rotateY(126deg) translateZ(28.5vh); }
.i2side4    { transform: rotateY(-18deg) translateZ(28.5vh); }
.i2side5    { transform: rotateY(-90deg) translateZ(28.5vh); }
.i2bottom { transform: rotateX(-90deg) translateZ(-19.2vh) translateX(-8vh); }

/*.ipt1 {
	position:absolute;
	width: 300px;
	height: 100px;
	background-color: white;
	border: 1px solid white;
}*/

.ipt1 {
	position:absolute;
	width: 60vw;
	height: 60vw;
	background-color: #88aadd;
	background: radial-gradient(#5599dd, #99ccff);
	clip-path: polygon(0% 20%,	60% 0%,	100% 50%,	60% 100%,	0% 80%);
} 

.ipt2 {
	position:absolute;
	width: 60vw;
	height: 60vw;
	background-color: #99ccff;
	background: radial-gradient(#66aaee, #aaddff);
	clip-path: polygon(20% 20%,	55% 25%,	100% 70%,	60% 85%,	0% 80%);
} 

.ipta1 {
	animation-name: ipta1kf;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

@keyframes ipta1kf {
0%,100% {transform: rotateX(-20deg)}
50% {transform: rotateX(20deg)}
}

.ipta2 {
	animation-name: ipta2kf;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
@keyframes ipta2kf {
0%,100% {transform: rotateX(-20deg)}
50% {transform: rotateX(20deg)}
}