/*****************
* Short Animations
*******************/

/*********************
* UpShort
*********************/
@-webkit-keyframes UpShort { 
    0% { 
        -webkit-transform: translateY(20px); 
    } 
    100% { 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes UpShort { 
    0% {   
        transform: translateY(20px); 
    } 
    100% {         
        transform: translateY(0); 
    } 
} 
.UpShort{
    -webkit-transform: translateY(20px); 
    transform: translateY(20px); 
}
.UpShort.go { 
    -webkit-animation-name: UpShort; 
    animation-name: UpShort; 
}

/*********************
* DownShort
*********************/
@-webkit-keyframes DownShort { 
    0% { 
        -webkit-transform: translateY(-20px); 
    } 
    100% {   
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes DownShort { 
    0% { 
        
        transform: translateY(-20px); 
    } 
    100% { 
        
        transform: translateY(0); 
    } 
} 
.DownShort{
    -webkit-transform: translateY(-20px); 
    transform: translateY(-20px); 
}
.DownShort.go { 
    -webkit-animation-name: DownShort; 
    animation-name: DownShort; 
}

/*********************
* RightShort 
*********************/
@-webkit-keyframes RightShort { 
    0% { 
        -webkit-transform: translateX(20px); 
    } 
    100% { 
        
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes RightShort { 
    0% { 
        
        transform: translateX(20px); 
    } 
    100% { 
        
        transform: translateX(0); 
    } 
} 
.RightShort { 
    -webkit-transform: translateX(20px);  
    transform: translateX(20px); 
}
.RightShort.go { 
    -webkit-animation-name: RightShort; 
    animation-name: RightShort; 
}

/*********************
* LeftShort 
*********************/
@-webkit-keyframes LeftShort { 
    0% {        
        -webkit-transform: translateX(-20px); 
    } 
    100% {         
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes LeftShort { 
    0% {         
        transform: translateX(-20px); 
    } 
    100% { 
        
        transform: translateX(0); 
    } 
} 
.LeftShort {
    -webkit-transform: translateX(-20px);  
    transform: translateX(-20px); 
}
.LeftShort.go { 
    -webkit-animation-name: LeftShort; 
    animation-name: LeftShort; 
}

/*********************
* BgLeft
*********************/
/* bg must set max-width */
@-webkit-keyframes BgLeft { 
    0% { 
        width: 0px;
    } 
    100% { 
        width: 100%;
    } 
} 

@keyframes BgLeft { 
    0% {   
        width: 0px;
    } 
    100% {         
        width: 100%;
    } 
} 
.BgLeft{
	width: 0px;
	background-position: top right;
}
.BgLeft.go { 
    -webkit-animation-name: BgLeft; 
    animation-name: BgLeft; 
}
/*********************
* BgRight
*********************/
/* bg must set max-width */
@-webkit-keyframes BgRight { 
    0% { 
        width: 0px;
    } 
    100% { 
        width: 100%;
    } 
} 

@keyframes BgRight { 
    0% {   
        width: 0px;
    } 
    100% {         
        width: 100%;
    } 
} 
.BgRight{
	width: 0px;
	background-position: top left;
}
.BgRight.go { 
    -webkit-animation-name: BgRight; 
    animation-name: BgRight; 
}


@-webkit-keyframes balloon {
    0% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
    }
    50% {
        -webkit-transform: translateY(-10px) rotate(5deg);
        transform: translateY(-10px) rotate(5deg);
    }
    100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
    }
}
@keyframes balloon {
    0% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
    }
    50% {
        -webkit-transform: translateY(-10px) rotate(5deg);
        transform: translateY(-10px) rotate(5deg);
    }
    100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
    }
}
@-webkit-keyframes balloon2 {
    0%,
    100% {
        -webkit-transform: translate(5px, -5px) rotate(2deg);
        transform: translate(5px, -5px) rotate(2deg);
    }
    50% {
        -webkit-transform: translate(-10px, 5px) rotate(-10deg);
        transform: translate(-10px, 5px) rotate(-10deg);
    }
}
@keyframes balloon2 {
    0%,
    100% {
        -webkit-transform: translate(5px, -5px) rotate(2deg);
        transform: translate(5px, -5px) rotate(2deg);
    }
    50% {
        -webkit-transform: translate(-10px, 5px) rotate(-10deg);
        transform: translate(-10px, 5px) rotate(-10deg);
    }
}
@-webkit-keyframes balloon3 {
    0%,
    100% {
        -webkit-transform: translate(0, -5px) rotate(2deg);
        transform: translate(0, -5px) rotate(2deg);
    }
    50% {
        -webkit-transform: translate(0, 10px) rotate(-2deg);
        transform: translate(0, 10px) rotate(-2deg);
    }
}
@keyframes balloon3 {
    0%,
    100% {
        -webkit-transform: translate(0, -5px) rotate(2deg);
        transform: translate(0, -5px) rotate(2deg);
    }
    50% {
        -webkit-transform: translate(0, 10px) rotate(-2deg);
        transform: translate(0, 10px) rotate(-2deg);
    }
}
@-webkit-keyframes balloon4 {
    0%,
    100% {
        -webkit-transform: translate(-5px, -15px) rotate(2deg);
        transform: translate(-5px, -15px) rotate(2deg);
    }
    50% {
        -webkit-transform: translate(10px, 5px) rotate(-8deg);
        transform: translate(10px, 5px) rotate(-8deg);
    }
}
@keyframes balloon4 {
    0%,
    100% {
        -webkit-transform: translate(-5px, -15px) rotate(2deg);
        transform: translate(-5px, -15px) rotate(2deg);
    }
    50% {
        -webkit-transform: translate(10px, 5px) rotate(-8deg);
        transform: translate(10px, 5px) rotate(-8deg);
    }
}
@-webkit-keyframes balloon5 {
    0%,
    100% {
        -webkit-transform: translate(-5px, 0) rotate(2deg);
        transform: translate(-5px, 0) rotate(2deg);
    }
    50% {
        -webkit-transform: translate(15px, -10px) rotate(-5deg);
        transform: translate(15px, -10px) rotate(-5deg);
    }
}
@keyframes balloon5 {
    0%,
    100% {
        -webkit-transform: translate(-5px, 0) rotate(2deg);
        transform: translate(-5px, 0) rotate(2deg);
    }
    50% {
        -webkit-transform: translate(15px, -10px) rotate(-5deg);
        transform: translate(15px, -10px) rotate(-5deg);
    }
}
@-webkit-keyframes balloon6 {
    0%,
    100% {
        -webkit-transform: translate(0, 0) rotate(2deg);
        transform: translate(0, 0) rotate(2deg);
    }
    50% {
        -webkit-transform: translate(0, -20px) rotate(-5deg);
        transform: translate(0, -20px) rotate(-5deg);
    }
}
@keyframes balloon6 {
    0%,
    100% {
        -webkit-transform: translate(0, 0) rotate(2deg);
        transform: translate(0, 0) rotate(2deg);
    }
    50% {
        -webkit-transform: translate(0, -20px) rotate(-5deg);
        transform: translate(0, -20px) rotate(-5deg);
    }
}