/* BEGIN: Face the Red General */
.anim-tile{
	position:relative;
}
/* END: Face the Red General */

/* BEGIN: Forever Broke */
@keyframes pig_disappear{
	0% {opacity:1;}
	10% {left:0px;}
	11%{left:-5px; transform:scale(1,1);}
	12%{left:0px;}
	13%{opacity:1; transform:scale(0,0);}
	31%{opacity:0;}
	70%{opacity:0; transform:scale(1,1);}
	99%{opacity:0;}
	100%{opacity:1; transform:scale(1,1);}
}

@keyframes pig_shift{
	10% {left:0px;}
	11%{left:-5px;}
	12%{left:0px;}
}

@keyframes pig_shift_text{
	10% {left:0px;}
	11%{left:-10px;}
	12%{left:0px;}    
}

@keyframes pig_tear{
	0%{top:80px; opacity:0; transform-origin: 50% 0%; transform:scale(1,0);}
	40%{top:80px; opacity:0; transform-origin: 50% 0%; transform:scale(1,0);}
	50%{top:80px; opacity:1; transform-origin: 50% 0%; transform:scale(1,1);}
	60%{transform-origin: 50% 0%; transform:scale(.8,1.1);}
	80%{transform-origin: 50% 0%; opacity:1; transform:scale(.8,1.1);}
	90%{top:140px; opacity:0; transform-origin: 50% 50%; transform:scale(1,.4);}
	99%{top:200px; opacity:0; transform:scale(1,0);}
	100%{top:80px;opacity:0; transform:scale(1,0);}
}


@-webkit-keyframes pig_disappear{
	0% {opacity:1;}
	10% {left:0px;}
	11%{left:-5px; -webkit-transform:scale(1,1);}
	12%{left:0px;}
	13%{opacity:1; -webkit-transform:scale(0,0);}
	31%{opacity:0;}
	70%{opacity:0; -webkit-transform:scale(1,1);}
	99%{opacity:0;}
	100%{opacity:1; -webkit-transform:scale(1,1);}
}

@-webkit-keyframes pig_shift{
	10% {left:0px;}
	11%{left:-5px;}
	12%{left:0px;}
}

@-webkit-keyframes pig_shift_text{
	10% {left:0px;}
	11%{left:-10px;}
	12%{left:0px;}    
}

@-webkit-keyframes pig_tear{
	0%{top:80px; opacity:0; -webkit-transform-origin: 50% 0%; -webkit-transform:scale(1,0);}
	40%{top:80px; opacity:0; -webkit-transform-origin: 50% 0%; -webkit-transform:scale(1,0);}
	50%{top:80px; opacity:1; -webkit-transform-origin: 50% 0%; -webkit-transform:scale(1,1);}
	60%{-webkit-transform:scale(.8,1.1);}
	80%{opacity:1; -webkit-transform:scale(.8,1.1);}
	90%{top:140px; opacity:0; -webkit-transform-origin: 50% 50%; -webkit-transform:scale(1,.4);}
	99%{top:200px; opacity:0; -webkit-transform:scale(1,0);}
	100%{top:200px;opacity:0; -webkit-transform:scale(1,0);}
}

#forever_broke{
	top:21px;
	left:3px;
	display: none;
	
	animation-duration:3s;
	-webkit-animation-duration:3s;
}

#pig_base{
	position:absolute;
	left:0;
	top:0;
	
	transform-origin:50% 50%;
	animation-name:pig_disappear;
	animation-duration:3s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-play-state: paused;
	
	-webkit-transform-origin:50% 50%;
	-webkit-animation-name:pig_disappear;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-play-state: paused;
}

#pig_cracked{
	position:absolute;
	left:0;
	top:0;
	
	animation-name:pig_shift;
	animation-duration:3s;
	animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-play-state: paused;
	
	-webkit-animation-name:pig_shift;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-play-state: paused;
}

#pig_tear{
	position:absolute;
	left:93px;
	top:80px;
	
	background:transparent;

	transform-origin: 50% 50%;
	animation-name:pig_tear;
	animation-duration:3s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-play-state: paused;
	
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-name:pig_tear;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-play-state: paused;
	
	opacity:0;
}

#pig_text{
	position:absolute;
	left:0px;
	right:0px;
}


#pig_text_2{
	position:absolute;
	left:0px;
	right:0px;
	
	animation-name:pig_shift_text;
	animation-duration:3s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-play-state: paused;
	
	-webkit-animation-name:pig_shift_text;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-play-state: paused;
}
/* END: Forever Broke */

/* BEGIN: Haunt Test */
@keyframes scribble_appear_1{
	0%{clip:rect(0px, 33px, 0px, 0px); opacity:1;}
	
	30%{clip:rect(0px, 33px, 0px, 0px);}
	35%{clip:rect(0px, 33px, 30px, 0px);}
	
	70%{clip:rect(0px, 33px, 30px, 0px);}
	75%{clip:rect(0px, 33px, 20px, 0px);}
	80%{clip:rect(0px, 33px, 20px, 0px);}
	85%{clip:rect(0px, 33px, 10px, 0px);}
	90%{clip:rect(0px, 33px, 10px, 0px); opacity:1;}
	100%{clip:rect(0px, 33px, 0px, 0px); opacity:0;}
}

@keyframes scribble_appear_2{
	0%{clip:rect(0px, 35px, 0px, 0px); opacity:1;}
	
	35%{clip:rect(0px, 35px, 0px, 0px);}
	40%{clip:rect(0px, 35px, 30px, 0px);}
	
	72%{clip:rect(0px, 33px, 30px, 0px);}
	77%{clip:rect(0px, 33px, 20px, 0px);}
	82%{clip:rect(0px, 33px, 20px, 0px);}
	87%{clip:rect(0px, 33px, 10px, 0px);}
	82%{clip:rect(0px, 33px, 10px, 0px); opacity:1;}
	100%{clip:rect(0px, 33px, 0px, 0px); opacity:0;}
} 

@keyframes scribble_appear_4{
	0%{clip:rect(0px, 35px, 0px, 0px); opacity:1;}
	
	55%{clip:rect(0px, 35px, 0px, 0px);}
	60%{clip:rect(0px, 35px, 30px, 0px);}
	
	90%{clip:rect(0px, 33px, 30px, 0px);}
	92%{clip:rect(0px, 33px, 20px, 0px);}
	93%{clip:rect(0px, 33px, 20px, 0px);}
	94%{clip:rect(0px, 33px, 10px, 0px); opacity:1;}
	100%{clip:rect(0px, 33px, 10px, 0px); opacity:0;}
}

@-webkit-keyframes scribble_appear_1{
	0%{clip:rect(0px, 33px, 0px, 0px); opacity:1;}
	
	30%{clip:rect(0px, 33px, 0px, 0px);}
	35%{clip:rect(0px, 33px, 30px, 0px);}
	
	70%{clip:rect(0px, 33px, 30px, 0px);}
	75%{clip:rect(0px, 33px, 20px, 0px);}
	80%{clip:rect(0px, 33px, 20px, 0px);}
	85%{clip:rect(0px, 33px, 10px, 0px);}
	90%{clip:rect(0px, 33px, 10px, 0px); opacity:1;}
	100%{clip:rect(0px, 33px, 0px, 0px); opacity:0;}
}

@-webkit-keyframes scribble_appear_2{
	0%{clip:rect(0px, 35px, 0px, 0px); opacity:1;}
	
	35%{clip:rect(0px, 35px, 0px, 0px);}
	40%{clip:rect(0px, 35px, 30px, 0px);}
	
	72%{clip:rect(0px, 33px, 30px, 0px);}
	77%{clip:rect(0px, 33px, 20px, 0px);}
	82%{clip:rect(0px, 33px, 20px, 0px);}
	87%{clip:rect(0px, 33px, 10px, 0px);}
	82%{clip:rect(0px, 33px, 10px, 0px); opacity:1;}
	100%{clip:rect(0px, 33px, 0px, 0px); opacity:0;}
}

@-webkit-keyframes scribble_appear_4{
	0%{clip:rect(0px, 35px, 0px, 0px); opacity:1;}
	
	55%{clip:rect(0px, 35px, 0px, 0px);}
	60%{clip:rect(0px, 35px, 30px, 0px);}
	
	90%{clip:rect(0px, 33px, 30px, 0px);}
	92%{clip:rect(0px, 33px, 20px, 0px);}
	93%{clip:rect(0px, 33px, 20px, 0px);}
	94%{clip:rect(0px, 33px, 10px, 0px); opacity:1;}
	100%{clip:rect(0px, 33px, 10px, 0px); opacity:0;}
}

#haunt_test{
	display: none;
	animation-duration:5s;
	-webkit-animation-duration:5s;
}

#scribble_1{
	position:absolute;
	left: 30px;
	top: 111px;
	clip:rect(0px, 33px, 30px, 0px);
	
	animation-name: scribble_appear_1;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-duration:5s;
	animation-play-state: paused;
	
	-webkit-animation-name: scribble_appear_1;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration:5s;
	-webkit-animation-play-state: paused;
	
	opacity:0;
}

#scribble_2{
	position:absolute;
	left: 75px;
	top: 111px;
	clip:rect(0px, 35px, 30px, 0px);
	
	animation-name: scribble_appear_2;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-duration:5s;
	animation-play-state: paused;
	
	-webkit-animation-name: scribble_appear_2;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration:5s;
	-webkit-animation-play-state: paused;
	
	opacity:0;
}

#scribble_3{
	position:absolute;
	left: 117px;
	top: 111px;
	clip:rect(0px, 33px, 30px, 0px);
}

#scribble_4{
	position:absolute;
	left: 162px;
	top: 111px;
	clip:rect(0px, 35px, 30px, 0px);

	animation-name: scribble_appear_4;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-duration:5s;
	animation-play-state: paused;
	
	-webkit-animation-name: scribble_appear_4;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration:5s;
	-webkit-animation-play-state: paused;
	
	opacity:0;
}
/* END: Haunt Test */

/* BEGIN: Laptop Dying */
@keyframes dying_glitch{
	
	0%{left:56px; top:64px; transform:scale(1, 1); opacity:0; background-color:rgba(193,34,47, 0);}
	2%{opacity:1;}
	3%{opacity:0;}
	4%{opacity:1;}

	30%{opacity:1;}
	31%{opacity:0;}
	33%{opacity:.5;}
	34%{opacity:1;}

	50%{opacity:1;}
	55%{opacity:0;}
	56%{opacity:1;}
	57%{opacity:.5;}
	58%{opacity:1;}
	
	/*Do not touch*/
	59%{left:56px; top:64px; transform:scale(1, 1);opacity:1;}
	68%{left:56px; top:64px; transform:scale(1, 1); background-color:rgba(193,34,47,0);}
	70%{left:56px; top:64px; transform:scale(1.35, .04); background-color:rgba(193,34,47,1); opacity:1;}
	73%{left:56px; top:64px; transform:scale(1, .04); opacity:1;}
	80%{left:56px; top:64px; transform:scale(.1, .04); opacity:0;}
	89%{left:56px; top:64px; transform:scale(.1, .04); opacity:0;}	
	90%{left:56px; top:64px; transform:scale(0, 0); background-color:rgba(193,34,47, 1); opacity:1;}
	99%{left:56px; top:64px; transform:scale(0, 0); background-color:rgba(193,34,47, 1); opacity:1;}
	100%{left:56px; top:64px; transform:scale(0, 0); background-color:rgba(193,34,47, 0); opacity:0;}
	
}

@-webkit-keyframes dying_glitch{
	
	0%{left:56px; top:64px; -webkit-transform:scale(1, 1); opacity:0; background-color:rgba(193,34,47, 0);}
	2%{opacity:1;}
	3%{opacity:0;}
	4%{opacity:1;}

	30%{opacity:1;}
	31%{opacity:0;}
	33%{opacity:.5;}
	34%{opacity:1;}

	50%{opacity:1;}
	55%{opacity:0;}
	56%{opacity:1;}
	57%{opacity:.5;}
	58%{opacity:1;}
	
	/*Do not touch*/
	59%{left:56px; top:64px; -webkit-transform:scale(1, 1);opacity:1;}
	68%{left:56px; top:64px; -webkit-transform:scale(1, 1); background-color:rgba(193,34,47,0);}
	70%{left:56px; top:64px; -webkit-transform:scale(1.35, .04); background-color:rgba(193,34,47,1); opacity:1;}
	73%{left:56px; top:64px; -webkit-transform:scale(1, .04); opacity:1;}
	80%{left:56px; top:64px; -webkit-transform:scale(.1, .04); opacity:0;}
	89%{left:56px; top:64px; -webkit-transform:scale(.1, .04); opacity:0;}	
	90%{left:56px; top:64px; -webkit-transform:scale(0, 0); background-color:rgba(193,34,47, 1); opacity:1;}
	99%{left:56px; top:64px; -webkit-transform:scale(0, 0); background-color:rgba(193,34,47, 1); opacity:1;}
	100%{left:56px; top:64px; -webkit-transform:scale(0, 0); background-color:rgba(193,34,47, 0); opacity:0;}
	
}

#laptop_dying{
	top:19%;
	display: none;
	animation-duration: 5s;
	-webkit-animation-duration: 5s;
}

#laptop_dying_base{
	position:absolute;
	left:0px;
	top:-46px;
}

#laptop_text{
	position:absolute;
	left:56px;
	top:64px;
	z-index:-1;
	
	transform-origin: 50% 50%;
	animation-name: dying_glitch;
	animation-iteration-count: 1;
	animation-duration: 5s;
	animation-timing-function:linear;
	animation-play-state: paused;
	
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-name: dying_glitch;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-play-state: paused;
}


/* END: Laptop Dying*/

/* BEGIN: Love Bank */
@keyframes needle_drop{
	0%{transform:rotate(0deg);}
	80%{transform:rotate(-90deg);}
	90%{transform:rotate(-90deg);}
	100%{transform:rotate(0deg);}
}

@-webkit-keyframes needle_drop{
	0%{-webkit-transform:rotate(0deg);}
	80%{-webkit-transform:rotate(-90deg);}
	90%{-webkit-transform:rotate(-90deg);}
	100%{-webkit-transform:rotate(0deg);}
}

#love_bank{
	left:14px;
	display: none;
	animation-duration:5s;
	-webkit-animation-duration:5s;
}

#love_bank_base{
	position:absolute;
	left:0px;
	top:0px;
}

#love_bank_needle{
	position:absolute;
	left:87px;
	top:101px;
	
	animation-name: needle_drop;
	animation-duration:5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	transform-origin: 6px 5px;
	animation-play-state: paused;
	
	-webkit-animation-name: needle_drop;
	-webkit-animation-duration:5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-play-state: paused;
	
	-webkit-transform-origin: 6px 5px;
}
/* END: Love Bank */

/* BEGIN: School Mil */
@keyframes tassel_sway{
	0%{transform:rotate(0deg);}
	10%{transform:rotate(-20deg);}
	25%{transform:rotate(15deg);}
	45%{transform:rotate(-10deg);}
	70%{transform:rotate(5deg);}
	100%{transform:rotate(0deg);}
}

@-webkit-keyframes tassel_sway{
	0%{-webkit-transform:rotate(0deg);}
	10%{-webkit-transform:rotate(-20deg);}
	25%{-webkit-transform:rotate(15deg);}
	45%{-webkit-transform:rotate(-10deg);}
	70%{-webkit-transform:rotate(5deg);}
	100%{-webkit-transform:rotate(0deg);}
}

#school_mil{
	display: none;
	animation-duration: 3s;
	-webkit-animation-duration: 3s;
}

#school_mil_base{
	position:absolute;
	left:0px;
	top:0px;
}

#school_mil_tassel{
	position:absolute;
	left:185px;
	top:51px;
	
	transform:rotate(0deg);
	transform-origin: 50% 0%;
	animation-name: tassel_sway;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-play-state: paused;
	
	-webkit-transform:rotate(0deg);
	-webkit-transform-origin: 50% 0%;
	-webkit-animation-name: tassel_sway;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	animation-play-state: paused;
}
/* END: School Mil */

/* BEGIN: Spring Break */
#spring_break{
	display: none;
	animation-duration: 4s;
	-webkit-animation-duration: 4s;
}

#spring_break img{
	position:absolute;
}

#spring_glasses{
	left:0;
	top:0;
}

@keyframes palmsway{
	0% {transform:rotate(0deg);}
	25% {transform:rotate(-3deg);}
	50% {transform:rotate(3deg);}
	100%{transform:rotate(0deg);}
}

@-webkit-keyframes palmsway{
	0% {-webkit-transform:rotate(0deg);}
	25% {-webkit-transform:rotate(-3deg);}
	50% {-webkit-transform:rotate(3deg);}
	100%{-webkit-transform:rotate(0deg);}
}

#spring_palms{
	transform-origin: 50% 100%;
	animation-name: palmsway;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	/*animation-direction: alternate;*/
	animation-play-state: paused;

	-webkit-transform-origin: 50% 100%;
	-webkit-animation-name: palmsway;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	/*-webkit-animation-direction: alternate;*/
	-webkit-animation-play-state: paused;
	
	left:316px;
	top:46px;
}
/* END: Spring Break */

/* BEGIN: Watch 20 */
@keyframes wheel_rotate{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}

@-webkit-keyframes wheel_rotate{
	0%{-webkit-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);}
}

.anim_watch_20{
	margin:0px auto;
	width:201px;
	top:2%;
	display: none;
	animation-duration:5s;
	-webkit-animation-duration:5s;
}
/*
#watch_20_1{
	
}

#watch_20_2{
	margin:0px auto;
	width:201px;
	top:2%;
	display: none;
}
#watch_20_3{
	margin:0px auto;
	width:201px;
	top:2%;
	display: none;
}
#watch_20_4{
	margin:0px auto;
	width:201px;
	top:2%;
	display: none; 
}
*/

.projector{
	position:absolute;
	left:0px;
	top:0px;
}

.wheel_l{
	position:absolute;
	left:65px;
	top:0px;
	
	transform-origin: 50% 50%;
	animation-name: wheel_rotate;
	animation-duration:5s;
	animation-iteration-count: 1;
	animation-timing-function:linear;
	animation-play-state: paused;
	
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-name: wheel_rotate;
	-webkit-animation-duration:5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function:linear;
	-webkit-animation-play-state: paused;
}

.wheel_s
{
	position:absolute;
	left:0px;
	top:37px;
	
	transform-origin: 50% 50%;
	animation-name: wheel_rotate;
	animation-duration:5s;
	animation-iteration-count: 1;
	animation-timing-function:linear;
	animation-play-state: paused;
	
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-name: wheel_rotate;
	-webkit-animation-duration:5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function:linear;
	-webkit-animation-play-state: paused;
}
/* END: Watch 20*/