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

body { margin:0px; padding:0px;}

.khungchinh { width:970px; height:90px; background-image:url(images/BG.png); position:relative; overflow:hidden; z-index:100;}

.bicafun { position:absolute; left:20px; top:5px; z-index:800; animation: bicafun 16s ease-out infinite 1s; transform: rotateX(0deg) translateZ(50px); 
		 transform-style:preserve-3d;}

.hoaxen { position:absolute; left:235px; top:0px; z-index:900; animation: hoaxen 16s ease-out infinite 1s;}

.chumhoa { position:absolute; left:185px; top:-30px; z-index:700; animation: chumhoa 16s ease-out infinite 1s;}

.text { position:absolute; left:345px; top:5px; z-index:900; animation: text 16s ease-out infinite 1s;}

.sanpham { position:absolute; left:325px; top:40px; z-index:900; animation: sanpham 16s ease-out infinite 1s;}

.chimhoala  { position:absolute; right:200px; top:0px; z-index:900; animation: chimhoala 16s ease-out infinite 1s;}

.qua { position:absolute; right:10px; top:0px; z-index:900; animation: qua 16s ease-out infinite 1s;}

.phaono1 { position:absolute; left:280px; top:10px; z-index:910; animation: phaono1 16s ease-out infinite 1s; visibility:hidden;}
.phaono2 { position:absolute; left:380px; top:10px; z-index:910; animation: phaono2 16s ease-out infinite 1s; visibility:hidden;}
.phaono3 { position:absolute; left:400px; top:10px; z-index:910; animation: phaono3 16s ease-out infinite 1s; visibility:hidden;}
.phaono4 { position:absolute; left:500px; top:10px; z-index:910; animation: phaono4 16s ease-out infinite 1s; visibility:hidden;}
.phaono5 { position:absolute; left:620px; top:10px; z-index:910; animation: phaono5 16s ease-out infinite 1s; visibility:hidden;}


.denlong { position:absolute; left:220px; top:0px; z-index:800; background-image:url(images/DenLongdong3.gif); 
			width:46px; height:73px; animation: denlong 16s  ease-out infinite 1s;}

.chimbay {
	background-image:url(images/chimBay.png);
	width: 26px;
	height: 27px; left: 295px; top: 25px; z-index:400; position: absolute;
	animation: chimbay 0.3s steps(3) infinite, move 16s  ease-out infinite 1s;
}


.chimbay2 {
	background-image:url(images/chimBay.png); transform:rotate(20deg);
	width: 26px;
	height: 27px; left: 640px; top: 16px; z-index:790; position: absolute;
	animation: chimbay2 0.3s steps(3) infinite, move2 16s  ease-out infinite 1s;
}


@keyframes chimbay {
	from {
	background-position: 0px 0px;
	}
	to {
	background-position: -84px;
	}
}

@keyframes move{
	0%, 5% {opacity:1; transform:scale(1,1); left:295px; top:25px;}
	30% { opacity:1; transform:  scale(1,1); left:198px; top:5px;}
	50%, 100% { opacity:0; transform:  scale(1,1); left:120px; top:0px;}
	}


@keyframes chimbay2 {
	from {
	background-position: 0px 0px;
	}
	to {
	background-position: -84px;
	}
}

@keyframes move2{
	0%, 15% {opacity:1; transform:scale(1,1); left:640px; top:16px;}
	30% { opacity:1; transform:  scale(1,1); left:600px; top:-15px;}
	40%, 100% { opacity:0; transform:  scale(1,1); left:570px; top:-15px;}
	}



@keyframes bicafun {
	0%, 2% {opacity:0; top:-200px; transform:rotateY(0deg);}
	5%,10% { opacity:1; top:5px; transform:rotateY(0deg); }
	15%, 100% { opacity:1; top:5px; transform:rotateY(360deg); }
	}


@keyframes text {
	0%, 10% { opacity:0; transform:scale(0,0);}
	15% { opacity:1; transform:scale(1,1);}
	16% { opacity:1; transform:scale(0.8,0.8);}
	17%, 100% { opacity:1; transform:scale(1,1);}
}

@keyframes sanpham {  
	0%, 4% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 100px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);}
	10% {opacity: 1;transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}
	15%, 100% {opacity: 1; transform: none;} 
}

@keyframes phaono1 {
	0%, 14% { opacity:1; transform:scale(0,0); }
 	17% { opacity:0; transform:scale(2,2); visibility:visible;}
	20%, 100% { opacity:0; transform:scale(2,2);}
	}
	
@keyframes phaono2 {
	0%, 15% { opacity:1; transform:scale(0,0);}
 	19% { opacity:0; transform:scale(1.5,1.5); visibility:visible;}
	28%,100% { opacity:0; transform:scale(1.5,1.5); }
	}
	
@keyframes phaono3 {
	0%, 16% { opacity:1; transform:scale(0,0);}
 	21% { opacity:0; transform:scale(2,2); visibility:visible;}
	28%, 100% { opacity:0; transform:scale(2,2);}
	}			

@keyframes phaono4 {
	0%, 17% { opacity:1; transform:scale(0,0);}
 	23% { opacity:0; transform:scale(2,2); visibility:visible;}
	30%, 100% { opacity:0; transform:scale(2,2);}
	}
	
@keyframes phaono5 {
	0%, 18% { opacity:1; transform:scale(0,0);}
 	25%  { opacity:0; transform:scale(3,3); visibility:visible;}
	32%, 100% { opacity:0; transform:scale(3,3);}
	}			

@keyframes qua {
	0%, 5% { opacity:0; transform:scale(0,0);}
	10%, 100% { opacity:1; transform:scale(1,1);} 
}

@keyframes denlong {
	0%, 2% { opacity:1; transform:translateX(0px);}
	15% { opacity:1; transform:translateX(5px) ;}
	30% { opacity:1; transform:translateX(0px) ;}
	50% { opacity:1; transform:translateX(5px) ;}
	70% { opacity:1; transform:translateX(0px) ;}
	80%  { opacity:1; transform:translateX(5px) ;}
	100% { opacity:1; transform:translateX(0px) ;}
	
	}