@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;}

.cam { position:absolute;  z-index:205; animation: cam 16s ease-out infinite 1s; }

.cohoi { position:absolute;  z-index:302; animation: cohoi 16s ease-out infinite 1s; }

.quangcao { position:absolute; left:32px; top:28px;  z-index:285; animation: quangcao 16s ease-out infinite 1s; }

.mienphi { position:absolute; left:43px; top:71px;  z-index:284; animation: mienphi 16s ease-out infinite 1s; }

.girl { position:absolute;  z-index:350; animation: girl 16s ease-out infinite 1s; }

.trentn { position:absolute;  z-index:200; animation: trentn 16s ease-out infinite 1s; }

.chuyentrang { position:absolute;  z-index:338; animation: chuyentrang 16s ease-out infinite 1s; }

.thongtin { position:absolute;  z-index:337; animation: thongtin 16s ease-out infinite 1s; }

.khuyenmai { position:absolute;  z-index:336; animation: khuyenmai 16s ease-out infinite 1s; }

.apdung { position:absolute;  z-index:335; animation: apdung 16s ease-out infinite 1s; }

@keyframes cohoi {
	0%, 2% { opacity:0; transform:scale(0,0) translateY(-150px);}
	5%, 100% { opacity:1; transform:scale(1,1) translateY(0px);}
}

@keyframes quangcao {
	0%, 3% {opacity:0; transform: rotateX(0deg) rotateY(0deg); left:-10px;}
	8%, 25% {opacity:1; transform: rotateX(0deg) rotateY(0deg); left:32px;}
	30% { opacity:1;transform:rotateX(30deg) rotateY(360deg); left:32px;}
	35%, 100% { opacity:1;transform: rotateX(0deg) rotateY(0deg); left:32px;}
	}

@keyframes mienphi {
	0%, 3% {opacity:0; transform: rotateX(0deg) rotateY(0deg); left:100px;}
	8%, 26% {opacity:1; transform: rotateX(0deg) rotateY(0deg); left:43px;}
	31% { opacity:1;transform:rotateX(-30deg) rotateY(360deg); left:43px;}
	35%, 100% { opacity:1;transform: rotateX(0deg) rotateY(0deg); left:43px;}
	}

@keyframes trentn {
	0%, 7% { opacity:0; transform:translateY(50px); }
	10%, 100% { opacity:1; transform:translateY(0px); }
	}


@keyframes girl {
	0%, 8% { opacity:1; transform:translateX(450px);}
	15%, 100% { opacity:1; transform:translateX(0px);}
}

@keyframes chuyentrang {
	0%, 9% { opacity:0;}
	17%, 100% { opacity:1;}
}

@keyframes thongtin {
	0%, 14% {opacity:0; transform:translateX(-50px);}
	19%, 100% {opacity:1; transform:translateX(0px);}
	}

@keyframes khuyenmai {
	0%, 14% {opacity:0; transform:translateX(50px);}
	19%, 100% {opacity:1; transform:translateX(0px);}
	}
	
@keyframes apdung {
	0%, 22% { opacity:0; transform:translateY(50px);}
	27%, 100% { opacity:1; transform:translateY(0px);}
	
	}