/* ----------------------------------------------------  */
/* CSS for animated logo. linked in header of homepage.  */
/* ----------------------------------------------------  */

#logo-main {
	width: 480px;
	height: 600px;
	background-color: #EAEAEA;
	text-align: center;
	overflow: hidden;
}


@keyframes body-move {
	0% {transform: translateX(-500px);}
	35% {transform: translateX(-250px);}
	70% {transform: translateX(0px);}
	100% {transform: translateX(0px);}
}
@keyframes lense-move {
	0% {transform: translateX(400px);}
	35% {transform: translateX(200px);}
	70% {transform: translateX(0px);}
	100% {transform: translateX(0px);}
}
@keyframes flash-move {
	0% {transform: translateY(-300px);}
	35% {transform: translateY(-150px);}
	70% {transform: translateY(0px);}
	100% {transform: translateY(0px);}
}
@keyframes btn-move {
	80% {transform: translateY(0px);}
	81% {transform: translateY(5px);}
	90% {transform: translateY(0px);}
	100% {}
}
@keyframes light-move {
	0% {opacity: 0;}
	82% {opacity: 0;}
	83% {transform: scale(5); opacity: 0.5;}
	90% {transform: scale(20); opacity: 1;}
	95% {transform: scale(3); opacity: 0.5;}
	100% {opacity: 0;}
}
@keyframes logo-move {
	0% {opacity: 0;}
	92% {opacity: 0;}
	100% {opacity: 1;}
}


.camera {
	position: relative;
	top: 35%;
	left: 30%;
	margin-bottom: -20px;
}
#body {
	position: relative;
	width: 190px;
	height: 90px;
	border-radius: 6px;
	border: #F2075D 5px solid;
	z-index: 1;
	top: 0;
	left: 0;
	animation: body-move 2s linear;
}
	#body::before {
		content: "";
		position: absolute;
		width: 18px;
		height: 0px;
		border-radius: 4px;
		border: #F2075D 5px solid;
		top: -13px;
		left: 130px;
		animation: btn-move 2s linear;	
	}
	#body::after {
		content: "";
		position: absolute;
		width: 40px;
		height: 10px;
		border: #F2075D 2px solid;
		top: 20px;
		left: 20px;
	}
#lense {
	position: relative;
	width: 70px;
	height: 70px;
	border-radius: 35px;
	border: #F2075D 5px solid;
	z-index: 2;
	top: -90px;
	left: 80px;
	animation: lense-move 2s linear;
}
#in-lense {
	position: relative;
	top: 18px;
	left: 40px;
	width: 10px;
	height: 10px;
	border: #F2075D 3px solid;
	border-radius: 6px;
	opacity: 0.1;
	transform: skew(0deg, 10deg);
}


#flash {
	position: relative;
	width: 60px;
	height: 50px;
	border-radius: 10px;
	border: #F2075D 5px solid;
	z-index: 2;
	top: -250px;
	left: 20px;
	animation: flash-move 2s linear;
}
		#flash::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 8px;
		width: 40px;
		height: 30px;
		border: #F2075D 2px solid;
		border-radius: 6px;
	}
	#flash::after {
		content: "";
		position: absolute;
		top: 50px;
		left: 15px;
		width: 20px;
		height: 10px;
		border: #F2075D 5px solid;
	}
	
/* whole-screen cover for flash effect  */
#light {
	position: relative;
	top: -100px;
	left: 160px;
	z-index: 4;
	background-color: white;
	width: 50px;
	height: 50px;
	border-radius: 16px;
	
	/* display: none; */
	opacity: 0;
	animation: light-move 2s ease;
}

#logo {
	margin-top: 0px;
	margin-left: 20px;
	animation: logo-move 2s ease;
}