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

body {
	margin: 0;
	padding: 0;
}

#container {
	position: relative;
	width: 970px;
	height: 250px;
	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: 15px;
	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: 266px;
	top: 10px;
	animation: corsa1 15s 2 ease-in-out;
}

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

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

@keyframes corsa2 {
	0% { opacity: 1; left:800px; top:-200px; transform: scale(0);}
	80% { opacity: 1; left:800px; top:-200px; transform: scale(0);}
	83% { opacity: 1; left:380px; top:-100px; transform: scale(1);}
}

#text {
	position: absolute;
	opacity: 0;
	left: 360px;
	bottom: 15px;
	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: 106px;
	animation: text1 15s 2 ease-in-out;
}
@keyframes text1 {
	0% { opacity: 0; left: -500px; }
	79% { opacity: 1; left: -500px;}
	82% { opacity: 1; left: 15px;}
}
#text2 {
	position: absolute;
	opacity: 1;
	left: 15px;
	top: 139px;
	animation: text2 15s 2 ease-in-out;
}
@keyframes text2 {
	0% { opacity: 0; left: -500px;}
	81% { opacity: 1; left: -500px;}
	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: 970px;  
	height: 250px;
}