@charset "utf-8";
/* CSS Document */

/*

z-index Higher number in front, lower in the back
Translate move x amount of keyframes


*/ 
.container {
	width: 100%;
	position: absolute;
	top: 35%;
	text-align: center;
}

.mainDrawing{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 35px;
	margin: 0 auto;
	
	background : -moz-linear-gradient(50% 0% -90deg,rgba(44, 95, 144, 1) 6.58%,rgba(5, 8, 20, 1) 100%);
	background : -webkit-linear-gradient(-90deg, rgba(5, 8, 20, 1) 0%, rgba(44, 95, 144, 1) 50%, rgba(5, 8, 20, 1) 100%);

	background : -o-linear-gradient(-90deg, rgba(5, 8, 20, 1) 0%, rgba(44, 95, 144, 1) 50%, rgba(5, 8, 20, 1) 100%);
	background : -ms-linear-gradient(-90deg,rgba(5, 8, 20, 1) 0%, rgba(44, 95, 144, 1) 50%, rgba(5, 8, 20, 1) 100%);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2C5F90', endColorstr='#050814' ,GradientType=0)";

	background-size: 105% 105%;
	animation: gradientBG 4s linear infinite;
}

@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.containerDrawing {
	position: relative;
	height: 620px;
	width: 840px;
	margin: 0 auto;
	overflow: hidden;
}
/*

Testing CSS code


*/ 
.moon{ 
	position: relative;
	z-index:5;
	height: 213px;
	width: 213px;
	margin: 0 auto;
	top: 40px;
	padding: 0px;
	
	border-radius: 100%;
  	background-color: #fff;
  	box-shadow:
    0 0 15px 10px rgba(135, 236, 252, 0.51),
    /*0 0 25px 15px #03a5fc,*/
    0 0 35px 7px transparent;
}

/*make a glow effect*/

.reflection{
	position: relative;
	z-index:5;
	height: 203px;
	width: 203px;
	margin: 0 auto;
	top: 160px;
}
.star{
	position: absolute;
	z-index:4;
	height: 20px;
	width: 20px;
	margin: 0 auto;
	
	animation: 
	spinZ 10s infinite linear,
  	Scale 3s infinite linear;
}

@keyframes Scale {
	0% {  	
	-ms-transform: scale(1, 1); /* IE 9 */
  	-webkit-transform: scale(1, 1); /* Safari */
  	transform: scale(1, 1);}
	50% { 
  	-ms-transform: scale(0.5, 0.5); /* IE 9 */
  	-webkit-transform: scale(0.5, 0.5); /* Safari */
  	transform: scale(0.5, 0.5); 
	}
	100% {  	
	-ms-transform: scale(1, 1); /* IE 9 */
  	-webkit-transform: scale(1, 1); /* Safari */
  	transform: scale(1, 1); }
}

@keyframes spinZ {
	from { transform: rotateZ(0); }
	to { transform: rotateZ(360deg); }
}


.st1{
	top: 50px;
	left: 150px;
}
.st2{
	top: 110px;
	left: 190px;
}
.st3{
	top: 270px;
	left: 120px;
}
.st4{
	top: 80px;
	left: 70px;
}
.st5{
	top: 175px;
	left: 30px;
}
.st6{
	top: 90px;
	left: 780px;
}
.st7{
	top: 220px;
	left: 90px;
}
.st8{
	top: 240px;
	left: 245px;
}
.st9{
	top: 230px;
	left: 310px;
}
.st10{
	top: 30px;
	left: 310px;
}
.st11{
	top: 80px;
	left: 550px;
}
.st12{
	top: 270px;
	left: 500px;
}
.st13{
	top: 250px;
	left: 540px;
}
.st14{
	top: 150px;
	left: 610px;
}
.st15{
	top: 160px;
	left: 730px;
}
.st16{
	top: 40px;
	left: 680px;
}
.st17{
	top: 270px;
	left: 690px;
}
.st18{
	top: 240px;
	left: 810px;
}
.st19{
	top: 60px;
	left: 800px;
}

/*Water stuff ----------------------------------------------------------------------------*/
.lightwater{
	position: absolute;
	z-index:3;
	height: 42px;
	width: 550px;
	}
.water1{
	animation: Translatelight1 4s infinite linear;
	}

@keyframes Translatelight1 {
	0% {-ms-transform: translate(140px, 70px); /* IE 9 */
  	-webkit-transform: translate(140px,70px); /* Safari */
  	transform: translate(140px, 70px);  }
	25%{
		-ms-transform: translate(155px, 75px); /* IE 9 */
  	-webkit-transform: translate(155px, 75px); /* Safari */
  	transform: translate(155px, 75px); 
	}
	50% { 
	-ms-transform: translate(170px, 80px); /* IE 9 */
  	-webkit-transform: translate(170px, 80px); /* Safari */
  	transform: translate(170px, 80px); 
	}
	75%{
		-ms-transform: translate(155px, 75px); /* IE 9 */
  	-webkit-transform: translate(155px, 75px); /* Safari */
  	transform: translate(155px, 75px); 
	}
	100% {-ms-transform: translate(140px, 70px); /* IE 9 */
  	-webkit-transform: translate(140px, 70px); /* Safari */
  	transform: translate(140px, 70px);  }
}

.mediumwater1{
	fill:#2c5f90;
	position: absolute;
	z-index:3;
	height: 76px;
	width: 515px;
	left: 400px;
	top: 320px;
}

.water2{
	animation: Translatelight2 4s infinite linear;
	}

@keyframes Translatelight2 {
	0% {-ms-transform: translate(60px, 10px); /* IE 9 */
  	-webkit-transform: translate(60px, 10px); /* Safari */
  	transform: translate(60px, 10px);  }
	25%{
		-ms-transform: translate(70px, 15px); /* IE 9 */
  	-webkit-transform: translate(70px, 15px); /* Safari */
  	transform: translate(70px, 15px); 
	}
	50% { 
	-ms-transform: translate(80px, 20px); /* IE 9 */
  	-webkit-transform: translate(80px, 20px); /* Safari */
  	transform: translate(80px, 20px); 
	}
	75%{
		-ms-transform: translate(70px, 15px); /* IE 9 */
  	-webkit-transform: translate(70px, 15px); /* Safari */
  	transform: translate(70px, 15px); 
	}
	100% {-ms-transform: translate(60px, 10px); /* IE 9 */
  	-webkit-transform: translate(60px, 10px); /* Safari */
  	transform: translate(60px, 10px);  }
}

.mediumwater2{
	fill:#2c5f90;
	position: absolute;
	z-index:3;
	height: 84px;
	width: 434px;
	left: -10px;
	top: 320px;
}
.water3{
	animation: Translatelight3 4s infinite linear;
}
@keyframes Translatelight3 {
	0% {-ms-transform: translate(-20px, 0px); /* IE 9 */
  	-webkit-transform: translate(-20px, 0px); /* Safari */
  	transform: translate(-20px, 0px);  }
	25%{
		-ms-transform: translate(-10px, 5px); /* IE 9 */
  	-webkit-transform: translate(-10px, 5px); /* Safari */
  	transform: translate(-10px,5px); 
	}
	50% { 
	-ms-transform: translate(0px, 10px); /* IE 9 */
  	-webkit-transform: translate(0px, 10px); /* Safari */
  	transform: translate(0px, 10px); 
	}
	75%{
		-ms-transform: translate(-10px, 5px); /* IE 9 */
  	-webkit-transform: translate(-10px, 5px); /* Safari */
  	transform: translate(-10px, 5px); 
	}
	100% {-ms-transform: translate(-20px, 0px); /* IE 9 */
  	-webkit-transform: translate(-20px, 0px); /* Safari */
  	transform: translate(-20px, 0px);  }
}

.mediumwater3{
	fill:#2c5f90;
	position: absolute;
	z-index:3;
	height: 58px;
	width: 397px;
	left: 20px;
	top: 420px;
}
.water4{
	animation: Translatelight4 4s infinite linear;
}
@keyframes Translatelight4 {
	0% {-ms-transform: translate(-20px, 0px); /* IE 9 */
  	-webkit-transform: translate(-20px, 0px); /* Safari */
  	transform: translate(-20px, 0px);  }
	25%{
		-ms-transform: translate(-10px, 5px); /* IE 9 */
  	-webkit-transform: translate(-10px, 5px); /* Safari */
  	transform: translate(-10px,5px); 
	}
	50% { 
	-ms-transform: translate(0px, 10px); /* IE 9 */
  	-webkit-transform: translate(0px, 10px); /* Safari */
  	transform: translate(0px, 10px); 
	}
	75%{
		-ms-transform: translate(-10px, 5px); /* IE 9 */
  	-webkit-transform: translate(-10px, 5px); /* Safari */
  	transform: translate(-10px, 5px); 
	}
	100% {-ms-transform: translate(-20px, 0px); /* IE 9 */
  	-webkit-transform: translate(-20px, 0px); /* Safari */
  	transform: translate(-20px, 0px);  }
}

.mediumwater4{
	fill:#2c5f90;
	position: absolute;
	z-index:3;
	height: 40px;
	width: 326px;
	left: 530px;
	top: 420px;
}
.water5{
	animation: Translatelight5 4s infinite linear;
}
@keyframes Translatelight5 {
	0% {-ms-transform: translate(-20px, 0px); /* IE 9 */
  	-webkit-transform: translate(-20px, 0px); /* Safari */
  	transform: translate(-20px, 0px);  }
	25%{
		-ms-transform: translate(-10px, 5px); /* IE 9 */
  	-webkit-transform: translate(-10px, 5px); /* Safari */
  	transform: translate(-10px,5px); 
	}
	50% { 
	-ms-transform: translate(0px, 10px); /* IE 9 */
  	-webkit-transform: translate(0px, 10px); /* Safari */
  	transform: translate(0px, 10px); 
	}
	75%{
		-ms-transform: translate(-10px, 5px); /* IE 9 */
  	-webkit-transform: translate(-10px, 5px); /* Safari */
  	transform: translate(-10px, 5px); 
	}
	100% {-ms-transform: translate(-20px, 0px); /* IE 9 */
  	-webkit-transform: translate(-20px, 0px); /* Safari */
  	transform: translate(-20px, 0px);  }
}

.darkwater1{
	fill:#1c3d59;
	position: absolute;
	z-index:3;
	height: 41px;
	width: 365px;
	left: 430px;
	top: 540px;
}

.darkwater2{
	fill:#1c3d59;
	position: absolute;
	z-index:3;
	height: 42px;
	width: 547px;
	left: -20px;
	top: 260px;
}
.drawing {
    width: 80px;
    height: 100px;
    position: relative;
  }
 .infrontred {
    background-color: red;
    z-index: 2; /*Higher number in front, lower in the back*/ 
	 
	 
  }



 .behindgold {
    background-color: gold;
    top: 0px;
    left: 60px;
    z-index: 1;
	 
	/*animation: Pulse 4s infinite linear;
  }

@keyframes pulse {
	0% {-ms-transform: 		scale (1, 1); /* IE 9 */
  	/*-webkit-transform: 		scale (1,1); /* Safari */
  	/*transform: 				scale (1,1);  }
	25%{
	/*-ms-transform: 			scale (0.75, 0.75); /* IE 9 */
  	/*-webkit-transform: 		scale (0.75, 0.75); /* Safari */
  	/*transform: 				scale (0.75, 0.75); 
	}*/
	/*50% { 
	/*-ms-transform: 			scale (0.5, 0.5); /* IE 9 */
  	/*-webkit-transform: 		scale (0.5, 0.5); /* Safari */
  	/*transform: 				scale (0.5, 0.5); 
	}
	/*75%{
		-ms-transform: 		scale (0.75, 0.75); /* IE 9 */
  	/*-webkit-transform: 		scale (0.75,  0.75); /* Safari */
  	/*transform: 				scale (0.750.75); 
	}*/
	/*100% {-ms-transform: 	scale (1,1); /* IE 9 */
  	/*-webkit-transform: 		scale (1,1); /* Safari */
  	/*transform: 				scale (1,1);  }

}*/
	 
	   	animation: Scale 3s infinite linear;
}

@keyframes Scale {
	0% {  	
	-ms-transform: scale(1, 1); /* IE 9 */
  	-webkit-transform: scale(1, 1); /* Safari */
  	transform: scale(1, 1);}
	50% { 
  	-ms-transform: scale(0.5, 0.5); /* IE 9 */
  	-webkit-transform: scale(0.5, 0.5); /* Safari */
  	transform: scale(0.5, 0.5); 
	}
	100% {  	
	-ms-transform: scale(1, 1); /* IE 9 */
  	-webkit-transform: scale(1, 1); /* Safari */
  	transform: scale(1, 1); }
}