#logo_rokkin{ width: 0px; height: 0px; }
.container_logo_rokkin_animation{ position: absolute; width: 600px !important; height: 333px !important; z-index: 500; }
.container_logo_rokkin_animation .icon_lra{
	position: absolute; left: 0px; top: 0px; width: 192px; height: 333px; /*filter: drop-shadow( 0px 0px 20px rgba(232, 27, 0, .5));*/
	animation:
	1s icon_lra_filter 1.6s;
}

@keyframes icon_lra_filter {
	0%		{ filter: drop-shadow( 0px 0px 0px rgba(232, 27, 0, .5)); }
	2% 	{ filter: drop-shadow( 0px 0px 20px rgba(232, 27, 0, .5)); }
	100%	{ filter: drop-shadow( 0px 0px 0px rgba(232, 27, 0, .5)); }
}


/* Arrows Build Logo */
.container_logo_rokkin_animation .icon_lra_1_arrow{
	position: absolute; left: 0px; bottom: 0px; width: 64px; opacity: 0; z-index: 500;
	animation:
	.2s icon_lra_1_arrow ease-in,
	.6s icon_lra_1_arrow_f ease-out .2s;
}

@keyframes icon_lra_1_arrow {
	0%		{ opacity: 1; bottom: -140px; }
	100% 	{ opacity: 1; bottom: 340px; }
}
@keyframes icon_lra_1_arrow_f {
	0% 		{ opacity: 1; bottom: 340px; }
	100% 	{ opacity: 0; bottom: 400px; }
}

.container_logo_rokkin_animation .icon_lra_2_arrow{
	position: absolute; left: 0px; top: 0px; width: 64px; transform: rotate(5deg); opacity: 0; z-index: 500;
	animation:
	.2s icon_lra_2_arrow ease-in .4s,
	.6s icon_lra_2_arrow_f ease-out .6s;
}

@keyframes icon_lra_2_arrow {
	0%		{ opacity: 1; left: -100px; top: -100px; }
	100% 	{ opacity: 1; left: 200px; top: 100px; }
}
@keyframes icon_lra_2_arrow_f {
	0% 		{ opacity: 1; left: 200px; top: 100px; }
	100% 	{ opacity: 0; left: 260px; top: 130px; }
}

.container_logo_rokkin_animation .icon_lra_3_arrow{
	position: absolute; left: 300px; top: 100px; width: 64px; transform: rotate(5deg); opacity: 0; z-index: 500;
	animation:
	.2s icon_lra_3_arrow ease-in .8s,
	.6s icon_lra_3_arrow_f ease-out 1s;
}

@keyframes icon_lra_3_arrow {
	0%		{ opacity: 1; left: 300px; top: 50px; }
	100% 	{ opacity: 1; left: -60px; top: 190px; }
}
@keyframes icon_lra_3_arrow_f {
	0% 		{ opacity: 1; left: -60px; top: 190px; }
	100% 	{ opacity: 0; left: -100px; top: 220px; }
}

.container_logo_rokkin_animation .icon_lra_4_arrow{
	position: absolute; left: 0px; top: 0px; width: 64px; transform: rotate(5deg); opacity: 0; z-index: 500;
	animation:
	.2s icon_lra_4_arrow ease-in 1.2s,
	.6s icon_lra_4_arrow_f ease-out 1.4s;
}

@keyframes icon_lra_4_arrow {
	0%		{ opacity: 1; left: -100px; top: 100px; }
	100% 	{ opacity: 1; left: 200px; top: 230px; }
}
@keyframes icon_lra_4_arrow_f {
	0% 		{ opacity: 1; left: 200px; top: 230px; }
	100% 	{ opacity: 0; left: 260px; top: 270px; }
}


/* ICON - P1 */
.container_logo_rokkin_animation .icon_lra_1{
	position: absolute; left: 0px; top: 0px; width: 64px; height: 333px; transform-origin: left bottom; overflow: hidden; opacity: 1;
	animation: .1s lra_1_hidden, .2s lra_1 .1s;
}
.container_logo_rokkin_animation .icon_lra_1::before{
	content: ""; display: block; width: 100%; height: 333px; position: absolute; left: 0px; top: 0px; background: url("../images/logo_rokkin.svg") no-repeat left top; background-size: auto 333px; 
	animation: .2s lra_1_b .1s;
}

@keyframes lra_1_hidden {
	0%		{ opacity: 0; }
	100% 	{ opacity: 0; }
}

@keyframes lra_1 {
	0%		{ height: 0px; top: 333px; }
	100% 	{ height: 333px; top: 0px; }
}

@keyframes lra_1_b {
	0%		{ top: -333px; }
	100% 	{ top: 0px; }
}


/* ICON - P2 */
.container_logo_rokkin_animation .icon_lra_2{
	position: absolute; left: 31.5px; top: -19px; width: 222px; height: 64px; background-size: auto 100%; transform: rotate(390deg); transform-origin: left top; overflow: hidden; opacity: 1; 
	animation:
	.5s lra_2_hidden, 
	.2s lra_2 .5s;
}
.container_logo_rokkin_animation .icon_lra_2::before{
	content: ""; display: block; width: 192px; height: 148px; position: absolute; left: -18px; top: 32px; background: url("../images/logo_rokkin.svg") no-repeat left top; background-size: 600px auto; transform: rotate(-390deg); transform-origin: left top;
}

@keyframes lra_2_hidden {
	0%		{ opacity: 0; }
	100% 	{ opacity: 0; }
}

@keyframes lra_2 {
	0%		{ width: 0px; }
	100% 	{ width: 222px; }
}


/* ICON - P3 */
.container_logo_rokkin_animation .icon_lra_3{
	position: absolute; left: 31.5px; top: 166px; width: 222px; height: 64px; background-size: auto 100%; transform: rotate(-390deg); transform-origin: left top; overflow: hidden; opacity: 1; 
	animation:
	.9s lra_3_hidden, 
	.2s lra_3 .9s;
}
.container_logo_rokkin_animation .icon_lra_3::before{
	content: ""; display: block; width: 192px; height: 248px; position: absolute; right: -25px; top: -160px; background: url("../images/logo_rokkin.svg") no-repeat left top; background-size: 600px auto; transform: rotate(390deg); transform-origin: left top;
	animation:
	.2s lra_3_b .9s;
}

@keyframes lra_3_hidden {
	0%		{ opacity: 0; }
	100% 	{ opacity: 0; }
}

@keyframes lra_3 {
	0%		{ width: 0px; left: 186px; top: 80px; }
	100%	{ width: 222px; left: 31.5px; top: 166px; }
}

@keyframes lra_3_b {
	0%		{ right: -70px; }
	100%	{ right: -25px; }
}


/* ICON - P4 */
.container_logo_rokkin_animation .icon_lra_4{
	position: absolute; left: 31.5px; top: 130px; width: 222px; height: 64px; background-size: auto 100%; transform: rotate(390deg); transform-origin: left top; overflow: hidden; opacity: 1; 
	animation:
	1.3s lra_4_hidden, 
	.2s lra_4 1.3s;
}
.container_logo_rokkin_animation .icon_lra_4::before{
	content: ""; display: block; width: 192px; height: 148px; position: absolute; left: -18px; top: 32px; background: url("../images/logo_rokkin.svg") no-repeat left -148px; background-size: 600px auto; transform: rotate(-390deg); transform-origin: left top;
}

@keyframes lra_4_hidden {
	0%		{ opacity: 0; }
	100% 	{ opacity: 0; }
}

@keyframes lra_4 {
	0%		{ width: 0px; }
	100% 	{ width: 222px; }
}


/* TEXT */
.container_logo_rokkin_animation .text_lra{
	position: absolute; left: 221px; top: 132px; background: url("../images/logo_rokkin.svg") no-repeat -221px -132px; background-size: 600px auto; width: 379px; height: 130px;
	animation:
	1.6s lra_text_hidden, 
	1s lra_text 1.6s;
}

@keyframes lra_text_hidden {
	0%		{ opacity: 0; }
	100% 	{ opacity: 0; }
}
@keyframes lra_text {
	0%		{ opacity: 0; margin-left: -6px; }
	100% 	{ opacity: 1; margin-left: 0px; }
}