/* front end */

.btAnimationWrapInner {
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
}

.btAnimationHidden {
	opacity: 0;
}

.btAnimationResetMargins * {
	margin-bottom: 0px !important;
}

.btAnimationResetLineHeight * {
	line-height: 1 !important;
}

/* back end */

.btAnimationPreview {
	margin-top: 15px;
	text-align: center;
	line-height: 0;
}

.btAnimationPreviewElement {
	width: 140px;
	height: 70px;
	background: #00aeef;
	margin: 0px auto 0px auto;
}

.btAnimationPreview .btAnimationWrap {
	position: static;
	transform: none;
	display: inline-block;
}

/* animations */

/* swingTiltLeft */

@keyframes swingTiltLeft {
	60% {
		transform: rotate3d(0, 0, 1, 15deg);
	}

	70% {
		transform: rotate3d(0, 0, 1, -10deg);
	}

	80% {
		transform: rotate3d(0, 0, 1, 5deg);
	}

	90% {
		transform: rotate3d(0, 0, 1, -5deg);
	}

	100% {
		transform: rotate3d(0, 0, 1, 0deg);
	}
}

.swingTiltLeft {
	animation-name: swingTiltLeft;
	transform-origin: top center;  
}

/* swingTiltRight */

@keyframes swingTiltRight {
	60% {
		transform: rotate3d(0, 0, 1, -15deg);
	}

	70% {
		transform: rotate3d(0, 0, 1, 10deg);
	}

	80% {
		transform: rotate3d(0, 0, 1, -5deg);
	}

	90% {
		transform: rotate3d(0, 0, 1, 5deg);
	}

	100% {
		transform: rotate3d(0, 0, 1, 0deg);
	}
}

.swingTiltRight {
	animation-name: swingTiltRight;
	transform-origin: top center;  
}

/* slideInDownFlip */

@keyframes slideInDownFlip {
	0% {
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}

	50% {
		transform: translate3d(0, 0, 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
	}  

	100% {
		transform:  perspective(400px) rotate3d(0, 0, 0, 0);
	}
}

.slideInDownFlip {
	animation-name: slideInDownFlip;
	transform-origin: center bottom;
}

/* slideInLeftFlip */

@keyframes slideInLeftFlip {
	0% {
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}

	50% {
		transform: translate3d(0, 0, 0) perspective(400px) rotate3d(0, 1, 0, 20deg);
	}  

	100% {
		transform:  perspective(400px) rotate3d(0, 0, 0, 0);
	}
}

.slideInLeftFlip {
	animation-name: slideInLeftFlip;
	transform-origin: right center;
}

/* slideInRightFlip */

@keyframes slideInRightFlip {
	0% {
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}

	50% {
		transform: translate3d(0, 0, 0) perspective(400px) rotate3d(0, 1, 0, -20deg);
	}  

	100% {
		transform:  perspective(400px) rotate3d(0, 0, 0, 0);
	}
}

.slideInRightFlip {
	animation-name: slideInRightFlip;
	transform-origin: left center;  
}

/* slideInUpFlip */

@keyframes slideInUpFlip {
	0% {
		transform: translate3d(0, 100%, 0);
		visibility: visible;
	}

	50% {
		transform: translate3d(0, 0, 0) perspective(400px) rotate3d(1, 0, 0, 20deg);
	}  

	100% {
		transform:  perspective(400px) rotate3d(0, 0, 0, 0);
	}
}

.slideInUpFlip {
	animation-name: slideInUpFlip;
	transform-origin: center top;
}

/* slideOutDownFlip */

@keyframes slideOutDownFlip {
	0% {
		visibility: visible;
	}

	50% {
		transform: translate3d(0, -10%, 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
	}

	100% {
		transform: translate3d(0, 100%, 0) perspective(400px) rotate3d(0, 0, 0, 0);
	}
}

.slideOutDownFlip {
	animation-name: slideOutDownFlip;
	transform-origin: center bottom;
}

/* slideOutLeftFlip */

@keyframes slideOutLeftFlip {
	0% {
		visibility: visible;
	}

	50% {
		transform: translate3d(10%, 0, 0) perspective(400px) rotate3d(0, 1, 0, -20deg);
	}

	100% {
		transform: translate3d(-100%, 0, 0) perspective(400px) rotate3d(0, 0, 0, 0);
	}
}

.slideOutLeftFlip {
	animation-name: slideOutLeftFlip;
	transform-origin: left center;
}

/* slideOutRightFlip */

@keyframes slideOutRightFlip {
	0% {
		visibility: visible;
	}

	50% {
		transform: translate3d(-10%, 0, 0) perspective(400px) rotate3d(0, 1, 0, 20deg);
	}

	100% {
		transform: translate3d(100%, 0, 0) perspective(400px) rotate3d(0, 0, 0, 0);
	}
}

.slideOutRightFlip {
	animation-name: slideOutRightFlip;
	transform-origin: right center;
}

/* slideOutUpFlip */

@keyframes slideOutUpFlip {
	0% {
		visibility: visible;
	}

	50% {
		transform: translate3d(0, 10%, 0) perspective(400px) rotate3d(1, 0, 0, 20deg);
	}

	100% {
		transform: translate3d(0, -100%, 0) perspective(400px) rotate3d(0, 0, 0, 0);
	}
}

.slideOutUpFlip {
	animation-name: slideOutUpFlip;
	transform-origin: center top;
}

/* rotateCW */

@keyframes rotateCW {
	0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.rotateCW {
	animation-name: rotateCW;
	transform-origin: center;
}

/* rotateLinearCW */

@keyframes rotateLinearCW {
	0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.rotateLinearCW {
	animation-name: rotateLinearCW;
	animation-timing-function: linear;
	transform-origin: center;
}

/* rotateCCW */

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

.rotateCCW {
	animation-name: rotateCCW;
	transform-origin: center;
}

/* rotateLinearCCW */

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

.rotateLinearCCW {
	animation-name: rotateLinearCCW;
	transform-origin: center;
	animation-timing-function: linear;
}

/* flipX */

@keyframes flipX {
	0% { transform: perspective(400px) rotateX(0deg); }
    100% { transform: perspective(400px) rotateX(360deg); }
}

.flipX {
	animation-name: flipX;
	transform-origin: center;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
}

/* flipLinearX */

@keyframes flipLinearX {
	0% { transform: perspective(400px) rotateX(0deg); }
    100% { transform: perspective(400px) rotateX(360deg); }
}

.flipLinearX {
	animation-name: flipLinearX;
	animation-timing-function: linear;
	transform-origin: center;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
}

/* flipY */

@keyframes flipY {
	0% { transform: perspective(400px) rotateY(0deg); }
    100% { transform: perspective(400px) rotateY(360deg); }
}

.flipY {
	animation-name: flipY;
	transform-origin: center;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;	
}

/* flipLinearY */

@keyframes flipLinearY {
	0% { transform: perspective(400px) rotateY(0deg); }
    100% { transform: perspective(400px) rotateY(360deg); }
}

.flipLinearY {
	animation-name: flipLinearY;
	animation-timing-function: linear;
	transform-origin: center;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;	
}

/* pulseBig */

@keyframes pulseBig {
	0% {
		transform: scale3d(1, 1, 1);
	}

	50% {
		transform: scale3d(1.5, 1.5, 1.5);
	}

	100% {
		transform: scale3d(1, 1, 1);
	}
}

.pulseBig {
	animation-name: pulseBig;
}

/* fadeInUpLeft */

@keyframes fadeInUpLeft {
	0% {
		opacity: 0;
		transform: translate3d(-100%, 100%, 0);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.fadeInUpLeft {
	animation-name: fadeInUpLeft;
}

/* fadeInUpRight */

@keyframes fadeInUpRight {
	0% {
		opacity: 0;
		transform: translate3d(100%, 100%, 0);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.fadeInUpRight {
	animation-name: fadeInUpRight;
}

/* fadeInDownRight */

@keyframes fadeInDownRight {
	0% {
		opacity: 0;
		transform: translate3d(100%, -100%, 0);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.fadeInDownRight {
	animation-name: fadeInDownRight;
}

/* fadeInDownLeft */

@keyframes fadeInDownLeft {
	0% {
		opacity: 0;
		transform: translate3d(-100%, -100%, 0);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.fadeInDownLeft {
	animation-name: fadeInDownLeft;
}

@keyframes revealLeft {
	0% {
		clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}

.revealLeft {
	animation-name: revealLeft;
}

@keyframes revealRight {
	0% {
		clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
	}
	100% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}

.revealRight {
	animation-name: revealRight;
}