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

body {
	margin: 0;
	padding: 0;
}

#container {
	position: relative;
	width: 300px;
	height: 600px;
	overflow: hidden;
	border: 1px solid black;
	background-color:#FFF;
	box-sizing: border-box; 
}

#header {
	position: absolute;
	opacity: 1;
	left: 15px;
	top: 15px;
	animation: header 15s 2 ease-in-out;
}

@keyframes header {
	0% { opacity: 1; }
	64% { opacity: 1; }
}

#logo {
	position: absolute;
	opacity: 1;
	right: 15px;
	bottom: 15px;
}


#cta {
	position: absolute;
	opacity: 1;
	left: 15px;
	bottom: 65px;
	animation: cta 15s 2 ease-in-out;
}

@keyframes cta {
	88% { left: 15px;}
	89% { left: 20px;}
	90% { left: 15px;}
	92% { left: 15px;}
	93% { left: 20px;}
	94% { left: 15px;}
}

#corsa1 {
	position: absolute;
	opacity: 0;
	left: 300px;
	top: 200px;
	animation: corsa1 15s 2 ease-in-out;
}

@keyframes corsa1 {
	0% { opacity: 1; left:300px;}
	2% { opacity: 1; left:300px;}
	7% { opacity: 1; left:0px;}
	78% { opacity: 1; left:0px; }
	80% { opacity: 1; left:-300px; }
	100% { opacity: 0; left:-300px; }
}

#corsa2 {
	position: absolute;
	opacity: 1;
	left: -80px;
	top: 43px;
	animation: corsa2 15s 2 ease-out;
}

@keyframes corsa2 {
	0% { opacity: 1; left:300px; top: 0px; transform: scale(0);}
	80% { opacity: 1; left:300px; top: 0px; transform: scale(0);}
	83% { opacity: 1; left:-80px; top: 43px; transform: scale(1);}
}

#text {
	position: absolute;
	opacity: 0;
	left: 10px;
	bottom: 200px;
	width:269px;
	height:53px;
	background-size:cover;
	background:url("text.png") 0px -1223px;
	animation: text 15s steps(23, end) 2;
	display:inline-block;
}

@keyframes text {
	0% {background-position: 0 0; opacity:0;}
	8% {background-position: 0 0; opacity:0;}
	10% {background-position: 0 0; opacity:1;}
    75%  {background-position: 0 -1223px; opacity:1;}
    78%  {background-position: 0 -1223px; opacity:0;}
    100%  {background-position: 0 -1223px; opacity:0;}
}

#text1 {
	position: absolute;
	opacity: 1;
	left: 15px;
	top: 325px;
	animation: text1 15s 2 ease-in-out;
}
@keyframes text1 {
	0% { opacity: 0; left: -300px; }
	79% { opacity: 1; left: -300px;}
	82% { opacity: 1; left: 15px;}
}
#text2 {
	position: absolute;
	opacity: 1;
	left: 15px;
	top: 385px;
	animation: text2 15s 2 ease-in-out;
}
@keyframes text2 {
	0% { opacity: 0; left: -300px;}
	81% { opacity: 1; left: -300px;}
	83% { opacity: 1; left: 15px;}
}
#lc_icon {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 99px;
	height: 16px;
}

#lc_icon:hover {
	position: absolute;
	background: url("lc.png");
	overflow:hidden;
	text-align: right;
	opacity: 1;
	width: 300px;  
	height: 600px;
}