@charset "utf-8";
/* CSS Document */
body{margin:0px;padding:0px; background-color: #ffffff;}


.wrapper {
	width: 726px;
	height:88px;
	position:absolute;
	border:solid 1px #222222;
	overflow:hidden;
/*    background-color: #ffffff;*/
}

 #bgpink, #blackbg{z-index:-100;}

	

#lisa, #beth, #kyle, #kim, #khloe, #kris, #kendall, #kylie{
	position:absolute;
	opacity:0;
}

#khloe{margin-right:10px;}


#bgpink, #blackbg, #txt1line1, #txt1line2, #txt1line3, #txt2line1, #txt2line2, #txt2line3, #txt3line1, #txt3line2, #logo, #logo1, #hayu, #button, #price, #free{
	width:728px;
	height:90px;
	position:absolute;
	opacity:0;
}

#txt1line1, #txt2line1, #txt4line2, #free, #kim {z-index:1;}


/* --------------------------------------- ANIMATIONS --------------------------------------- */ 
/* --------------------------------------- ANIMATIONS --------------------------------------- */ 
/* --------------------------------------- ANIMATIONS --------------------------------------- */ 




/* LOGO */
#logo, #logo1 {
    -webkit-animation: bg-fade 2s forwards;
    animation: bg-fade 2s forwards;

}


#kim {
    -webkit-animation: kim-slide 4.9s forwards;
    animation: kim-slide 4.9s forwards;
    animation-delay: 0.1s;
	-webkit-animation-delay:0.1s;   

}

@-webkit-keyframes kim-slide {
	0% {opacity:0;right:-150px;}
    5% {opacity:1;right:30px;}
    38% {opacity:1;right:30px;}
    41% {opacity:1;right:-100px;}
	97% {opacity:1;right:-100px;}
	100%{opacity:0;right:-150px;}
}

@keyframes kim-slide {
	0% {opacity:0;right:-150px;}
    5% {opacity:1;right:30px;}
    38% {opacity:1;right:30px;}
    41% {opacity:1;right:-100px;}
	97% {opacity:1;right:-100px;}
	100%{opacity:0;right:-150px;}
}

#kylie {
    -webkit-animation: kendall-slide 1.9s forwards;
    animation: kendall-slide 1.9s forwards;
  
}

#kendall {
    -webkit-animation: kendall-slide 1.8s forwards;
    animation: kendall-slide 1.8s forwards;
     animation-delay: 0.2s;
	-webkit-animation-delay:0.2s;    
}

@-webkit-keyframes kendall-slide {
	0% {opacity:0;right:-150px;}
    10% {opacity:1;right:0px;}
	95% {opacity:1;right:0px;}
	100%{opacity:0;right:-150px;}
}

@keyframes kendall-slide {
	0% {opacity:0;right:-150px;}
    10% {opacity:1;right:0px;}
	95% {opacity:1;right:0px;}
	100%{opacity:0;right:-150px;}
}



/*------------- FRAME 1 -----------*/

#khloe {
    -webkit-animation: kendall-slide 3s forwards;
    animation: kendall-slide 3s forwards;
     animation-delay: 2s;
	-webkit-animation-delay:2s;    
}

/* TXT1LINE1 */
#txt1line1 {
    -webkit-animation: txt1line1-slide 3.1s forwards;
    animation: txt1line1-slide 3.1s forwards;
    animation-delay: 2s;
	-webkit-animation-delay:2s;
}

@-webkit-keyframes txt1line1-slide {
	0% {opacity:0;margin-left:-120px}
    7% {opacity:1;margin-left:0px;}
	38%{width:728px;height:90px;margin-left:0px;margin-top:0px;}
	42%{width:850px;height:105px;margin-left:-22px;margin-top:-5px;}
	46%{width:750px;height:93px;margin-left:-5px;margin-top:-1px;}
	97% {width:750px;height:93px;margin-left:-5px;margin-top:-1px;opacity:1;}
	100%{width:750px;height:93px;margin-left:-5px;margin-top:-1px;opacity:0;}
}

@keyframes txt1line1-slide {
	0% {opacity:0;margin-left:-120px}
    7% {opacity:1;margin-left:0px;}
	38%{width:728px;height:90px;margin-left:0px;margin-top:0px;}
	42%{width:850px;height:105px;margin-left:-22px;margin-top:-5px;}
	46%{width:750px;height:93px;margin-left:-5px;margin-top:-1px;}
	97% {width:750px;height:93px;margin-left:-5px;margin-top:-1px;opacity:1;}
	100%{width:750px;height:93px;margin-left:-5px;margin-top:-1px;opacity:0;}
}

/* TXT1LINE2 */

#txt1line2 {
    -webkit-animation: txt1line2-slide 3.1s forwards;
    animation: txt1line2-slide 3.1s forwards;
	animation-delay: 2s;
	-webkit-animation-delay:2s;
}


@-webkit-keyframes txt1line2-slide {
	0% {opacity:0;margin-left:-50px}
    7% {opacity:1;margin-left:0px;}
	97% {opacity:1;margin-left:0px;width:728px;height:90px;margin-top:0px}
	100%{width:1000px;height:124px;opacity:0;margin-left:-30px;margin-top:-8px;}
}

@keyframes txt1line2-slide {
	0% {opacity:0;margin-left:-50px}
    7% {opacity:1;margin-left:0px;}
	97% {opacity:1;margin-left:0px;width:728px;height:90px;margin-top:0px}
	100%{width:1000px;height:124px;opacity:0;margin-left:-30px;margin-top:-8px;}
}

#txt1line3 {
    -webkit-animation: txt1line3-slide 3s forwards;
    animation: txt1line3-slide 3s forwards;
	animation-delay: 2s;
	-webkit-animation-delay:2s;
}

@-webkit-keyframes txt1line3-slide {
	0% {opacity:0;margin-left:-120px;}
	7%{opacity:1;margin-left:0px;}
	97% {opacity:1;margin-top:0px;margin-left:0px;width:728px;height:90px;}
    100%{width:1000px;height:124px;opacity:0;margin-left:-20px;margin-top:-3px;}
}

@keyframes txt1line3-slide {
	0% {opacity:0;margin-left:-120px;}
	7%{opacity:1;margin-left:0px;}
	97% {opacity:1;margin-top:0px;margin-left:0px;width:728px;height:90px;}
    100%{width:1000px;height:124px;opacity:0;margin-left:-20px;margin-top:-3px;}
}


/*------------- FRAME 2 -----------*/

/* BG PINK */
#bgpink{
    -webkit-animation: bg-fade 3s forwards;
    animation: bg-fade 3s forwards;
	animation-delay: 5s;
	-webkit-animation-delay:5s;
}

@-webkit-keyframes bg-fade {
	0% {opacity:0;}
	6% {opacity:1;}
	98%{opacity:1;}
    100% {opacity:0;}
}

@keyframes bg-fade {
	0% {opacity:0;}
	6% {opacity:1;}
	98%{opacity:1;}
    100% {opacity:0;}
}

#lisa {
    -webkit-animation: kendall-slide 3s forwards;
    animation: kendall-slide 3s forwards;
     animation-delay: 5s;
	-webkit-animation-delay:5s;    
}

#kyle {
    -webkit-animation: kendall-slide 2.8s forwards;
    animation: kendall-slide 2.8s forwards;
     animation-delay: 5.2s;
	-webkit-animation-delay:5.2s;    
}

#txt2line1 {
    -webkit-animation: txt2line1-slide 3s forwards;
    animation: txt2line1-slide 3s forwards;
	animation-delay: 5s;
	-webkit-animation-delay:5s;
}

@-webkit-keyframes txt2line1-slide {
	0% {opacity:0;}
    10% {opacity:1;}
	38%{width:728px;height:90px;margin-left:0px;margin-top:0px;}
	42%{width:850px;height:105px;margin-left:-22px;margin-top:-5px;}
	46%{width:750px;height:93px;margin-left:-5px;margin-top:-1px;}
	95% {width:750px;height:93px;margin-left:-5px;margin-top:-1px;opacity:1;}
	100%{width:750px;height:93px;margin-left:-5px;margin-top:-1px;opacity:0;}
}

@keyframes txt2line1-slide {
	0% {opacity:0;}
    10% {opacity:1;}
	38%{width:728px;height:90px;margin-left:0px;margin-top:0px;}
	42%{width:850px;height:105px;margin-left:-22px;margin-top:-5px;}
	46%{width:750px;height:93px;margin-left:-5px;margin-top:-1px;}
	95% {width:750px;height:93px;margin-left:-5px;margin-top:-1px;opacity:1;}
	100%{width:750px;height:93px;margin-left:-5px;margin-top:-1px;opacity:0;}
}


#txt2line2{
    -webkit-animation: txt2line2-slide 3s forwards;
    animation: txt2line2-slide 3s forwards;
	animation-delay: 5s;
	-webkit-animation-delay:5s;
}

@-webkit-keyframes txt2line2-slide {
	0% {opacity:0;}
    5% {opacity:1;}
	93% {opacity:1;}
	100%{opacity:0;}
}

@keyframes txt2line2-slide {
	0% {opacity:0;}
    5% {opacity:1;}
	93% {opacity:1;}
	100%{opacity:0;}
}

#txt2line3{
    -webkit-animation: txt1line3-slide 3s forwards;
    animation: txt1line3-slide 3s forwards;
	animation-delay: 5s;
	-webkit-animation-delay:5s;
}

/*------------- FRAME 3 -----------*/

#lisa{
    -webkit-animation: lisa-fade 6s forwards;
    animation: lisa-fade 6s forwards;
	animation-delay: 5s;
	-webkit-animation-delay:5s;
}


@-webkit-keyframes lisa-fade {
	0% {opacity:0;right:-100px;}
	4% {opacity:1;right:0px;}
	48% {opacity:1;right:0px;}	
	52% {opacity:1;right:-45px;}		
	98%{opacity:1;right:-45px;}
    100% {opacity:0;right:-100px;}
}

@keyframes lisa-fade {
	0% {opacity:0;right:-100px;}
	4% {opacity:1;right:0px;}
	48% {opacity:1;right:0px;}	
	52% {opacity:1;right:-45px;}		
	98%{opacity:1;right:-45px;}
    100% {opacity:0;right:-100px;}
}



/* TXT3LINE1 */
#txt3line1 {
    -webkit-animation: txt3line1-slide 3s forwards;
    animation: txt3line1-slide 3s forwards;
	animation-delay: 8s;
	-webkit-animation-delay:8s;
}

@-webkit-keyframes txt3line1-slide {
	0% {opacity:0;margin-left:-50px}
    10% {opacity:1;margin-left:0px;}
	94% {opacity:1;margin-left:0px;width:728px;height:90px;margin-top:0px}
	100%{width:900px;height:135px;opacity:0;margin-left:-50px;margin-top:-20px;}
}

@keyframes txt3line1-slide {
	0% {opacity:0;margin-left:-50px}
    10% {opacity:1;margin-left:0px;}
	94% {opacity:1;margin-left:0px;width:728px;height:90px;margin-top:0px}
	100%{width:900px;height:135px;opacity:0;margin-left:-50px;margin-top:-20px;}
}

/* TXT3LINE2 */
#txt3line2 {
    -webkit-animation: txt3line2-slide 3s forwards;
    animation: txt3line2-slide 3s forwards;
	animation-delay: 8s;
	-webkit-animation-delay:8s;
}

@-webkit-keyframes txt3line2-slide {
	0% {opacity:0;margin-left:-50px}
    10% {opacity:1;margin-left:0px;}
    
    40%{width:728px;height:90px;opacity:1;margin-left:0px;margin-top:0px;}
	44%{width:900px;height:111px;opacity:1;margin-left:-65px;margin-top:-20px;}
	48%{width:728px;height:90px;opacity:1;margin-left:0px;margin-top:0px;}
    
	94% {opacity:1;margin-left:0px;width:728px;height:90px;margin-top:0px}
	100%{width:900px;height:135px;opacity:0;margin-left:-50px;margin-top:-10px;}
}

@keyframes txt3line2-slide {
	0% {opacity:0;margin-left:-50px}
    10% {opacity:1;margin-left:0px;}
    
    40%{width:728px;height:90px;opacity:1;margin-left:0px;margin-top:0px;}
	44%{width:900px;height:111px;opacity:1;margin-left:-65px;margin-top:-10px;}
	48%{width:728px;height:90px;opacity:1;margin-left:0px;margin-top:0px;}
    
	94% {opacity:1;margin-left:0px;width:728px;height:90px;margin-top:0px}
	100%{width:900px;height:135px;opacity:0;margin-left:-50px;margin-top:-20px;}
}


/* FRAME 7 */
#hayu {
    -webkit-animation: frame7-fade 0.5s forwards;
    animation: frame7-fade 0.5s forwards;
	animation-delay: 11s;
	-webkit-animation-delay:11s;
}

#price {
    -webkit-animation: frame7-fade 0.5s forwards;
    animation: frame7-fade 0.5s forwards;
	animation-delay: 11s;
	-webkit-animation-delay:11s;
}

#button {
    -webkit-animation: frame7-fade 0.5s forwards;
    animation: frame7-fade 0.5s forwards;
	animation-delay: 11s;
	-webkit-animation-delay:11s;
}

@-webkit-keyframes frame7-fade {
	0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes frame7-fade {
	0% {opacity:0;}
    100% {opacity:1;}
}

#free {
    -webkit-animation: free-slide 3s forwards;
    animation: free-slide 3s forwards;
	animation-delay: 11s;
	-webkit-animation-delay:11s;
}

@-webkit-keyframes free-slide {
	0% {opacity:0;}
    5% {opacity:1;}
	40%{width:728px;height:90px;opacity:1;margin-left:0px;margin-top:0px;}
	44%{width:1500px;height:185px;opacity:1;margin-left:-520px;margin-top:-50px;}
	48%{width:728px;height:90px;opacity:1;margin-left:0px;margin-top:0px;}
	100%{width:728px;height:90px;opacity:1;margin-left:0px;margin-top:0px;}
}

@keyframes free-slide {
	0% {opacity:0;}
    5% {opacity:1;}
	40%{width:728px;height:90px;opacity:1;margin-left:0px;margin-top:0px;}
	44%{width:1500px;height:185px;opacity:1;margin-left:-520px;margin-top:-50px;}
	48%{width:728px;height:90px;opacity:1;margin-left:0px;margin-top:0px;}
	100%{width:728px;height:90px;opacity:1;margin-left:0px;margin-top:0px;}
}