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

body { margin:0; padding:0;}

.bg { position:relative; width:300px; height:250px; background-image:url("images/BG.jpg"); overflow:hidden; z-index:100; }

.tuvan { position:absolute; z-index:890; animation: tuvan 18s ease-out infinite 0s; }

.tat { position:absolute; z-index:560; animation: tat 18s ease-out infinite 0s;}

.veo { position:absolute; z-index:560;  animation: veo 18s ease-out infinite 0s;}



.thoigian {position:absolute; z-index:888; animation: thoigian 18s ease-in infinite 0s; }

.luke {position: absolute; z-index: 840;  animation: luke 18s ease-out infinite 0s; visibility: hidden; }

.khachmoi {position: absolute; z-index: 820;  animation: khachmoi 18s ease-out infinite 0s; visibility: hidden; }

.tron { position:absolute;  z-index:808; left: 172px; top: 120px; animation: tron 18s ease-out infinite 0s; visibility: hidden;  }

.text-luke { position:absolute;  z-index:807; animation: text-luke 18s ease-out infinite 0s; visibility: hidden;  }



@keyframes tuvan {
    0%, 1% {opacity:0; transform: translateY(-10px);}
    3%, 100% {opacity:1; transform: translateY(0px);  }
}


@keyframes tat {
    0%, 3% { opacity:0; transform: translateX(-50px);}
	6%, 30% { opacity:1; transform: translateX(0px); }
	31%, 100% {opacity:0; transform: translateX(0px); }
}

@keyframes veo {
    0%, 3% { opacity:0; transform: translateX(50px);}
	6%, 30% { opacity:1; transform: translateX(0px); }
	31%, 100% {opacity:0; transform: translateX(0px); }
}



@keyframes thoigian {
	0%, 6% {opacity:0; transform: translateY(100px) scaleY(0.5);}
	9%, 100% {opacity:1; transform: translateY(0px) scaleY(1);}
}



@keyframes luke {
    0%, 36% {opacity:1; transform: translateX(400px);}
    45%, 100% {opacity:1; transform: translateX(30px); visibility: visible;}
    
}

@keyframes tron {
    0%, 34% {opacity:0; transform: scale(0,0) rotate(0deg);}
    36% {opacity:1; transform: scale(1,1) rotate(360deg); visibility: visible;}
    39% {opacity:1; transform: scale(0.8,0.8) rotate(360deg); }
	43% {opacity:1; transform: scale(1,1) rotate(360deg); }
	48% {opacity:1; transform: scale(0.3,0.3) rotate(360deg); }
	52% {opacity:1; transform: scale(1,1) rotate(360deg); }
	62%, 100% {opacity:1; transform: scale(1,1) rotate(-360deg); }
}



@keyframes khachmoi {
 0%, 33% {opacity:0; transform: translateY(-10px);} 
 36%, 100% {opacity:1; transform: translateY(0px); visibility: visible; }
}

@keyframes text-luke {
    0%, 38% {opacity:0; transform: translateX(-300px)} 
    47%, 100% {opacity:1; transform: translateX(0px); visibility: visible;}
	
}