/*****
 FRONT
 *****/
#Front {
	position: relative; overflow: hidden;
	height: 900px; width: 100%;
	margin-bottom: 100px;
	background: #fff;
	/*border: 1px solid red;*/
}
#Front .bg {
	position: absolute; overflow: hidden;
	left: 0px; right: 0px; top: 0px; bottom: 120px;
	background: #000012;
}

@-webkit-keyframes round {
	0% { opacity: .5;}
	66% { opacity: 1;}
	100% { opacity: .5;}
}
@keyframes round {
	0% { opacity: .5;}
	66% { opacity: 1;}
	100% { opacity: .5;}
}

#Front i {
	position: absolute; display: block;
}
#Front i.a1 {
	top: 100px; left: 100px;
	width: 600px; height: 600px;
	background: radial-gradient(rgba(222,174,92,1) 0%, rgba(222,174,92,0) 50%, rgba(111,87,46,0) 100%);
	-webkit-animation: round 3s infinite;
	animation: round 3s infinite;
}
#Front i.a2 {
	top: -300px; left: 50%;
	width: 800px; height: 800px;
	background: radial-gradient(rgba(0,117,101,1) 0%, rgba(0,174,100,0) 50%, rgba(0,0,0,0) 100%);
	-webkit-animation: round 7s infinite;
	animation: round 7s infinite;
}
#Front i.a3 {
	top: -500px; left: 30%;
	width: 1300px; height: 1000px; margin-left: -500px;
	background: radial-gradient(rgba(0,117,101,1) 0%, rgba(0,174,100,0) 50%, rgba(0,0,0,0) 100%);
	-webkit-animation: round 11s infinite;
	animation: round 11s infinite;
}
#Front i.a4 {
	top: -300px; left: 10%;
	width: 1200px; height: 1100px; margin-left: -600px;
	background: radial-gradient(rgba(222,174,92,1) 0%, rgba(222,174,92,0) 50%, rgba(222,174,92,0) 100%);
	-webkit-animation: round 13s infinite;
	animation: round 13s infinite;
	-webkit-animation-delay: -5s;
	animation-delay: -5s;
}
#Front i.a5 {
	top: -100px; left: 70%;
	width: 700px; height: 700px; margin-left: -220px;
	background: radial-gradient(rgba(80,20,60,1) 0%, rgba(80,20,60,0) 50%, rgba(0,0,0,0) 100%);
	-webkit-animation: round 5s infinite;
	animation: round 5s infinite;
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}
#Front i.a6 {
	top: -350px; left: 50%;
	width: 1300px; height: 1300px; margin-left: -600px;
	background: radial-gradient(rgba(20,70,160,1) 0%, rgba(0,25,60,0) 50%, rgba(0,0,0,0) 100%);
	-webkit-animation: round 4s infinite;
	animation: round 4s infinite;
}

#Front b {
	position: absolute; top: 0px; left: 0px;
	display: block; width: 100%; height: 100%;
	background: url("../assets/dot-hatch.png") repeat;
}

#Front .composition {
	position: absolute; bottom: 0px; left: 50%;
	width: 680px; height: 640px; margin-left: -300px;
	/*border: 1px solid red;*/
}
#Front .shadow {
	position: absolute; bottom: 0px; left: 0px; width: 680px; height: 120px;
	background: #fff url('../assets/front-shadow.jpg');
}
#Front .object {
	position: absolute; bottom: 14px; left: 0; width: 573px; height: 606px;
	background: url('../assets/front-object.png');
}
#Front .leds {
	position: absolute; bottom: 72px; left: 47px; width: 19px; height: 13px;
	background: url('../assets/front-leds.gif');
}


/******
 INSERT
 ******/
#Insert {
	position: relative; z-index: 765;
	height: 600px;
	margin-bottom: 0px;
	background: #fff;
}
#Insert .composition {
	position: absolute; bottom: 0px; left: 50%;
	width: 960px; height: 600px; margin-left: -480px;
}
#Insert .spinner {
	position: absolute; bottom: 300px; left: 50%; margin-left: -20px;
	display: block; width: 40px; height: 40px;
	background: url('../assets/insert-spinner.gif');
}
#InsertObject {
	position: absolute; bottom: 0px; left: 50%; margin-left: -300px;
	display: block; width: 600px; height: 512px;
	/*background: url('assets/insert-object.gif');*/
}
#InsertObject i {
	position: absolute; top: 0px; left: 0px;
	display: block; width: 600px; height: 512px;
	background: url('../assets/insert-object.gif');
}

#InsertLed {
	position: absolute; bottom: 298px; left: 50%; margin-left: -101px;
	display: block; width: 9px; height: 15px;
}
#InsertLed i {
	position: absolute; top: 0; left: 0;
	display: block; width: 9px; height: 15px;
	background: url('../assets/insert-led.gif');
}

@-webkit-keyframes wave {
  0% { opacity: 0; width: 1%; height: 1%;}
  20% { opacity: 0;}
  45% { opacity: .5;}
  55% { opacity: .9;}
  70% { opacity: .5;}
  90% { opacity: 0;}
  100% { opacity: 0; width: 100%; height: 100%;}
}
@keyframes wave {
  0% { opacity: 0; width: 1%; height: 1%;}
  20% { opacity: 0;}
  45% { opacity: .5;}
  55% { opacity: .9;}
  70% { opacity: .5;}
  90% { opacity: 0;}
  100% { opacity: 0; width: 100%; height: 100%;}
}

#InsertWaves {
	position: absolute; bottom: 0px; top: 0px; left: 0px; right: 0px;
	display: block;
	/*background: url('assets/insert-object.gif');*/
	/*border: 1px solid red;*/
}

#InsertWaves .waves {
	position: absolute; bottom: 220px; left: 50%;
	width: 200px; height: 200px;
	/*border: 1px solid red;*/
}
#InsertWaves .waves i {
	position: absolute; top: 0; left: 0;
	width: 0%; height: 0%;
	background: radial-gradient(at top left, rgba(25,75,200,0) 30%, rgba(155,233,255,1) 55%, rgba(20,50,200,0) 60%);
	-webkit-animation: wave 3s infinite;
	animation: wave 3s infinite;
}
#InsertWaves .waves i.a1 { -webkit-animation-delay: 0s; animation-delay: 0s;}
#InsertWaves .waves i.a2 { -webkit-animation-delay: 1s; animation-delay: 1s;}
#InsertWaves .waves i.a3 { -webkit-animation-delay: 2s; animation-delay: 2s;}

#Insert .waves.left {
	margin-left: -215px;
	-webkit-transform: rotate(155deg);
	transform: rotate(155deg);
}
#Insert .waves.right {
	margin-left: 200px;
	-webkit-transform: rotate(-65deg);
	transform: rotate(-65deg);
}
#Insert .waves.right i {
	position: absolute; bottom: 0; right: 0;
}