body{
    margin: 0;
    padding: 0;
}

#container{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    font-family:Arial, sans-serif;
    max-width: 640px;
}
.page_content{
    top: 0 !important;
    width:640px;
    height:320px;
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: all 500ms ease-in-out !important;
    transition: all 500ms ease-in-out !important;
    position: absolute; overflow:hidden;
    box-sizing: border-box;
    border: 0px solid rgba(0, 0, 0, 0.0);
} 
img{
    position: absolute;
}

.bg { position:absolute;  z-index:100; animation: bg 12s ease-out infinite 0s; }

.logo {position:absolute; z-index:800; animation: logo 12s ease-out infinite 0s; }

.cung {position:absolute; z-index:700; animation: cung 12s ease-out infinite 0s; }

.nhau {position:absolute; z-index:609; animation: nhau 12s ease-out infinite 0s; }

.tao {position:absolute; z-index:608; animation: tao 12s ease-out infinite 0s; }

.nen {position:absolute; z-index:607; animation: nen 12s ease-out infinite 0s; }

.hl {position:absolute; z-index:606; animation: hl 12s ease-out infinite 0s; }

.highland {position:absolute; z-index:605; animation: highland 12s ease-out infinite 0s; }

.coffee {position:absolute; z-index:604; animation: coffee 12s ease-out infinite 0s; }


.tomato {position:absolute; left: 541px; top: 52px; z-index:400; animation: tomato 12s ease-out infinite 0s; }

.cafe1 {position:absolute; left: 286px; top: 22px; z-index:400; animation: cafe1 12s ease-out infinite 0s; }

.heart {position:absolute; left: 296px; top: 269px; z-index:400; animation: heart 12s ease-out infinite 0s; }

.hoa {position:absolute; left: -10px; top: 190px; z-index:400; animation: hoa 12s ease-out infinite 0s; }

.taydown {position:absolute; left: 490px; top: 220px; z-index:400; animation: taydown 12s ease-out infinite 0s; }

.cafe2 {position:absolute; left: 492px; top: 175px; z-index:400; animation: cafe2 12s ease-out infinite 0s; }

.ly {position:absolute; left: 176px; top: 241px; z-index:400; animation: ly 12s ease-out infinite 0s; }

.phin {position:absolute; left: 393px; top: 242px; z-index:400; animation: phin 12s ease-out infinite 0s; }

.tayup {position:absolute; left: -25px; top:-19px; z-index:400; animation: tayup 12s ease-out infinite 0s; }

.taytim {position:absolute; left: -32px; top:51px; z-index:400; animation: taytim 12s ease-out infinite 0s; }

.taycyan {position:absolute; left: 476px; top:-20px; z-index:400; animation: taycyan 12s ease-out infinite 0s; }

.mayxay {position:absolute; left: 77px; top:57px; z-index:400; animation: mayxay 12s ease-out infinite 0s; }

.left {position:absolute; left: 2px; top: 157px; z-index:801; animation: left 12s ease-out infinite 0s; }

.right {position:absolute; left: 385px; top: 123px; z-index:801; animation: right 12s ease-out infinite 0s; }


.la {position:absolute; z-index:550; animation: la 12s ease-out infinite 0s; }

.cua {position:absolute; z-index:549; animation: cua 12s ease-out infinite 0s; }

.chung {position:absolute; z-index:548; animation: chung 12s ease-out infinite 0s; }

.minh {position:absolute; z-index:547; animation: minh 12s ease-out infinite 0s; }



@keyframes logo {
    0%, 50% {opacity:1; transform:scale(1,1);} 
	65%, 100% {opacity:1; transform:scale(0.95,0.95); }
 
}

@keyframes cung {
    0%, 2% {opacity:0; transform: rotate(-15deg) scale(1,1);  } 
	6%, 50% {opacity:1; transform: rotate(0deg) scale(1,1); }
    65%, 100% {opacity:1; transform: rotate(0deg) scale(0.95,0.95); }
}

@keyframes nhau {
    0%, 3% {opacity:0; transform:  scale(1,1);  } 
	7%, 50% {opacity:1; transform:  scale(1,1); }
    65%, 100% {opacity:1; transform:  scale(0.95,0.95); }
}

@keyframes tao {
    0%, 4% {opacity:0; transform: scale(1,1);  } 
	8%, 50% {opacity:1; transform: scale(1,1); }
    65%, 100% {opacity:1; transform:  scale(0.95,0.95); }
}

@keyframes nen {
    0%, 5% {opacity:0; transform:  scale(1,1);  } 
	9%, 50% {opacity:1; transform: scale(1,1); }
    65%, 100% {opacity:1; transform:  scale(0.95,0.95); }
}

@keyframes hl {
    0%, 6% {opacity:0; transform: scale(1,1);  } 
	10%, 50% {opacity:1; transform:  scale(1,1); }
    65%, 100% {opacity:1; transform:  scale(0.95,0.95); }
}

@keyframes highland {
    0%, 12% {opacity:0; transform: translateX(-10px) rotate(-30deg) scale(1,1); } 
	15%, 50% {opacity:1; transform: translateX(0px) rotate(0deg) scale(1,1); }
    65%, 100% {opacity:1; transform: translateX(0px) rotate(0deg) scale(0.95,0.95); }
}

@keyframes coffee {
    0%, 13% {opacity:0; transform: translateX(5px) rotate(-30deg) scale(1,1);} 
	16%, 50% {opacity:1; transform: translateX(0px) rotate(0deg) scale(1,1); }
    65%, 100% {opacity:1; transform: translateX(0px) rotate(0deg) scale(0.95,0.95); }
}



@keyframes left {
     0%, 9% {opacity:0; transform:skewY(30deg) scale(1,1); left: 2px; top: 350px;} 
	12%, 18% {opacity:1; transform:  skewY(0deg) scale(1,1); left: 2px; top: 157px; }
    25%, 100% {opacity:0; transform:  skewY(0deg) scale(0.5,0.5); left: 160px; top: 100px; }
}

@keyframes right {
    0%, 9% {opacity:0; transform:skewY(30deg) scale(1,1);left: 600px; top: 123px;} 
	13%, 19% {opacity:1; transform:  skewY(0deg) scale(1,1);left: 385px; top: 123px; }
    26%, 100% {opacity:0; transform:  skewY(0deg) scale(0.5,0.5);left: 270px; top: 123px; }
}


@keyframes cafe1 {
    0%, 9% {opacity:0; transform: rotate(0deg) scale(0,0); left: 286px; top:22px;} 
	12%, 19% {opacity:1; transform: rotate(80deg) scale(1,1); left: 286px; top:22px; }
    25%, 100% {opacity:0; transform: rotate(0deg) scale(0,0); left: 286px; top:135px; }
}

@keyframes tomato {
    0%, 9% {opacity:0; transform: rotate(40deg) scale(0,0); left: 550px; top:45px;} 
	12% {opacity:1; transform: rotate(0deg) scale(1,1); left: 541px; top:48px; }
    10% {opacity:1; transform: rotate(-40deg) scale(1,1); left: 541px; top:48px; }
    13%, 19% {opacity:1; transform: rotate(0deg) scale(1,1); left: 541px; top:48px; }
    25%, 100% {opacity:0; transform: rotate(0deg) scale(0,0); left: 300px; top:108px; }
}

@keyframes heart {
    0%, 9% {opacity:0; transform: rotate(180deg) scale(0,0); left: 296px; top:450px;} 
	12% {opacity:1; transform: rotate(0deg) scale(1,1); left: 296px; top:269px; }
    14% {opacity:1; transform: rotate(0deg) scale(1,1); left: 296px; top:269px; }
    16%, 18% {opacity:1; transform: rotate(0deg) scale(1,1); left: 296px; top:269px; }
    24%, 100% {opacity:0; transform: rotate(0deg) scale(0,0); left: 296px; top:151px; }
}


@keyframes hoa {
    0%, 9% {opacity:0; transform: rotate(80deg) translateY(30px); left: -10px; top: 190px; } 
	12%, 19% {opacity:1; transform: rotate(0deg) translateY(0px); left: -10px; top: 190px; }
    26%, 100% {opacity:0; transform: rotate(0deg) translateY(0px); left: 280px; top:119px; }
}


@keyframes taydown {
    0%, 9% {opacity:0; transform: rotate(80deg) translateX(60px); left: 490px; top: 220px; } 
	12%, 20% {opacity:1; transform: rotate(0deg) translateX(0px); left: 490px; top: 220px; }
    28%, 100% {opacity:0; transform: rotate(0deg) translateX(0px); left: 278px; top:120px; }
}


@keyframes cafe2 {
    0%, 19% {opacity:0; transform: rotate(0deg) scale(0,0); left: 492px; top: 175px;} 
	22%, 25% {opacity:1; transform: rotate(80deg) scale(1,1); left: 492px; top: 175px; }
    32%, 100% {opacity:0; transform: rotate(0deg) scale(0,0); left: 289px; top: 142px; }
}

@keyframes ly {
     0%, 19% {opacity:0; transform: rotate(60deg) translateY(60px); left: 176px; top: 241px;} 
	22% {opacity:1; transform: rotate(-30deg) translateY(0px); left: 176px; top: 241px; }
    22% {opacity:1; transform: rotate(15deg) translateY(0px); left: 176px; top: 241px; }
    24%, 26% {opacity:1; transform: rotate(0deg) translateY(0px); left: 176px; top: 241px; }
    33%, 100% {opacity:0; transform: rotate(-80deg) translateY(0px); left: 294px; top: 132px; }
}

@keyframes phin {
     0%, 19% {opacity:0; transform: rotate(0deg) translateY(60px); left: 393px; top: 242px;} 
	22% {opacity:1; transform: rotate(-20deg) translateY(0px); left: 393px; top: 242px; }
    23%, 26% {opacity:1; transform: rotate(0deg) translateY(0px); left: 393px; top: 242px; }
    32%, 100% {opacity:0; transform: rotate(0deg) translateY(0px); left: 285px; top: 122px; }
}


@keyframes tayup {
    0%, 19% {opacity:0; transform: rotate(40deg) translateX(-60px); left: -25px; top:-19px; } 
	22%, 26% {opacity:1; transform: rotate(0deg) translateX(0px); left: -25px; top:-19px; }
    33%, 100% {opacity:0; transform: rotate(0deg) translateX(0px); left: 168px; top:82px; }
}


@keyframes taytim {
    0%, 19% {opacity:0; transform: rotate(-50deg) translateX(-90px); left: -32px; top:51px; } 
	22%, 29% {opacity:1; transform: rotate(0deg) translateX(0px); left: -32px; top:51px; }
    32%, 100% {opacity:0; transform: rotate(-20deg) translateX(0px); left: 180px; top:55px; }
}

@keyframes taycyan {
    0%, 19% {opacity:0; transform: rotate(50deg) translateY(-90px); left: 476px; top:-20px; } 
	22%,26% {opacity:1; transform: rotate(0deg) translateY(0px); left: 476px; top:-20px; }
    32%, 100% {opacity:0; transform: rotate(-20deg) translateY(0px); left: 252px; top:116px; }
}


@keyframes mayxay {
    0%, 19% {opacity:0; transform: rotate(160deg) scale(0,0); left: 50px; top:57px;} 
	22%, 25% {opacity:1; transform: rotate(0deg) scale(1,1); left: 77px; top:57px; }
    32%, 100% {opacity:0; transform: rotate(0deg) scale(0,0); left: 285px; top: 128px; }
}


@keyframes la {
    0%, 30% {opacity:0; transform: scale(1,1) ;} 
	33%, 50% {opacity:1; transform: scale(1,1);  }
    65%, 100% {opacity:1; transform: scale(0.95,0.95); }
}

@keyframes cua {
    0%, 31% {opacity:0; transform: scale(1,1) ;} 
	34%, 50% {opacity:1; transform: scale(1,1);  }
    65%, 100% {opacity:1; transform: scale(0.95,0.95); }
}

@keyframes chung {
    0%, 32% {opacity:0; transform: scale(1,1) ;} 
	35%, 50% {opacity:1; transform: scale(1,1);  }
    65%, 100% {opacity:1; transform: scale(0.95,0.95); }
}

@keyframes minh {
    0%, 33% {opacity:0; transform: scale(1,1) ;} 
	36%, 50% {opacity:1; transform: scale(1,1);  }
    65%, 100% {opacity:1; transform: scale(0.95,0.95); }
}