html{width:300px;height:250px;overflow:hidden;}
body{font-family:'Open Sans', sans-serif;font-weight:bold;width:300px;height:250px;position:relative;padding:0;margin:0;overflow:hidden;}

.text-area{height:100px;text-align:center;font-size:22px;}
.text-area img{float:right;}
.text-area div{position:absolute;background:#fff;width:100%;box-sizing:border-box;padding:8px 8px 0;animation-timing-function:linear;}
.link{color:#056839;}
.present{background-size:contain;background-repeat:no-repeat;background-position:center;position:absolute;animation-timing-function:ease-in;}
.present img{animation-timing-function:linear;opacity:1;transform:scale(1);position:relative;z-index:9;animation-name:pop;}
.present:after{content:'';display:block;width:56px;height:34px;border-radius:8px;background:radial-gradient(rgba(255,255,255,1),rgba(255,255,255,0));position:absolute;opacity:0;animation-name:poof;animation-timing-function:ease-out;}
#box{background-image:url('box.png');left:5px;animation-name:box;animation-duration:1.5s;}
#box:after{top:13px;left:38px;transform:rotate(-40deg);animation-duration:13s;}
#box img{animation-duration:13s;}
#bag{background-image:url('bag.png');left:95px;animation-name:bag;animation-duration:4.5s;}
#bag:after{top:50px;left:23px;transform:rotate(-9deg);animation-duration:12.5s;}
#bag img{animation-duration:12.5s;}
#card{background-image:url('card.png');right:5px;bottom:0;animation-name:card;animation-duration:3s;}
#card:after{animation-duration:13.5s;top:24px;left:28px;transform:rotate(-35deg);}
#card img{animation-duration:13.5s;}
#slide-1{animation-name:slide1;animation-duration:9s;opacity:0;}
#slide-2{animation-name:slide2;animation-duration:12s;opacity:0;}
#slide-3{font-size:17px;animation-name:slide3;animation-duration:12s;}

@keyframes box{
	0%{transform:rotate(-30deg);left:-150px;top:-180px;}
	70%{transform:rotate(0deg);left:3px;top:100px;}
	80%{top:80px;}
	90%{transform:rotate(6deg);top:100px;}
	100%{transform:rotate(0deg);left:5px;top:100px;}
}
@keyframes card{
	0%{right:-20px;bottom:250px;transform:rotate(5deg);}
	50%{right:-20px;bottom:250px;}
	60%{right:0;}
	85%{bottom:0;right:5px;}
	90%{bottom:8px;}
	95%{right:10px;transform:rotate(5deg);}
	100%{right:5px;bottom:0;transform:rotate(0deg);}
}
@keyframes bag{
	0%{top:-140px;}
	66%{top:-140px;}
	88%{top:100px;background-size:110px 134px;background-position:center bottom;}
	90%{top:100px;background-size:110px 120px;transform:rotate(0deg);left:95px;}
	92%{top:90px;background-size:110px 138px;transform:rotate(-4deg);left:90px;}
	95%{transform:rotate(0deg);background-size:110px 134px;top:100px;}
	97%{background-size:110px 128px;left:95px;transform:rotate(4deg);}
	100%{background-position:center bottom;background-size:110px 134px;transform:rotate(0deg);}
}
@keyframes slide1{
	0%{opacity:0;}
	44%{opacity:0;}
	66%{opacity:1;}
	89%{opacity:1;}
	90%{opacity:0;}
	100%{opacity:0;}
}
@keyframes slide2{
	0%{opacity:0;}
	66%{opacity:0;}
	67%{opacity:1;}
	99%{opacity:1;}
	100%{opacity:0;}
}
@keyframes slide3{
	0%{left:100%;}
	83%{left:100%;}
	100%{left:0;}
}
@keyframes pop{
	0%{opacity:0;}
	96%{opacity:0;transform:scale(1.1);}
	100%{opacity:1;transform:scale(1);}
}
@keyframes poof{
	0%{opacity:0;}
	96%{opacity:0;z-index:99;}
	97%{opacity:1;z-index:99;}
	98%{opacity:1;z-index:1;}
	100%{opacity:0;}
}