/*fade in*/
@-webkit-keyframes fadeIn {
    0% {
        opacity:0;
    }

	100% {
        opacity:1;
    }
}
@-moz-keyframes fadeIn {
    0% {
        opacity:0;
    }

	100% {
        opacity:1;
    }
}
@keyframes fadeIn {
    0% {
        opacity:0;
    }

	100% {
        opacity:1;
    }
}
.fadeIn {
	-webkit-animation: fadeIn .3s;
	animation: fadeIn .3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/*fade out*/
@-webkit-keyframes fadeOut {
    0% {
        opacity:1;
    }

	100% {
        opacity:0;
    }
}
@-moz-keyframes fadeOut {
    0% {
        opacity:1;
    }

	100% {
        opacity:0;
    }
}
@keyframes fadeOut {
    0% {
        opacity:1;
    }

	100% {
        opacity:0;
    }
}
.fadeOut {
	-webkit-animation-fill-mode: forwards;
	-webkit-animation: fadeOut .3s;
	animation-fill-mode: forwards;
	animation: fadeOut .3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: opacity;
}

@-webkit-keyframes maskIn {
	0% {
		-webkit-clip-path: circle(0px);
	}
	100% {
		-webkit-clip-path: circle(150%);
	}
}
@-moz-keyframes maskIn {
	0% {
		-moz-clip-path: circle(0px);
	}
	100% {
		-moz-clip-path: circle(150%);
	}
}
@keyframes maskIn {
	0% {
		-webkit-clip-path: circle(0px);
		-moz-clip-path: circle(0px);
		clip-path: circle(0px);
	}
	100% {
		-webkit-clip-path: circle(150%);
		-moz-clip-path: circle(150%);
		clip-path: circle(150%);
	}
}
.maskIn{
	-webkit-animation: maskIn 1s;
	-moz-animation: maskIn 1s;
	animation: maskIn 1s;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: clip-path;
}

/*flip x*/
@-webkit-keyframes flipX {
    0% {
        -webkit-transform: perspective(600px) rotateX(0deg);
    }

	50% {
        -webkit-transform: perspective(600px) rotateX(-180deg);
    }

	100% {
        -webkit-transform: perspective(600px) rotateX(-360deg);
    }
}
@-moz-keyframes flipX {
    0% {
        -moz-transform: perspective(600px) rotateX(0deg);
    }

	50% {
        -moz-transform: perspective(600px) rotateX(-180deg);
    }

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

	50% {
        transform: perspective(600px) rotateX(-180deg);
    }

	100% {
        transform: perspective(600px) rotateX(-360deg);
    }
}
.flipX {
	-webkit-backface-visibility: visible !important;
	-webkit-animation: flipX .5s;
	backface-visibility: visible !important;
	animation: flipX .5s;

	will-change: transform;
}

/*flip y*/
@-webkit-keyframes flipY {
    0% {
        -webkit-transform: perspective(600px) rotateY(0deg);
    }

    25% {
        -webkit-transform: perspective(600px) rotateY(40deg);
		background:rgba(50,50,50,0.1);
    }

    50% {
        -webkit-transform: perspective(600px) rotateY(-10deg);
    }

    75% {
        -webkit-transform: perspective(600px) rotateY(10deg);
    }

	100% {
        -webkit-transform: perspective(600px) rotateY(0deg);
    }
}
@-moz-keyframes flipY {
    0% {
        -moz-transform: perspective(600px) rotateY(0deg);
    }

    25% {
        -moz-transform: perspective(600px) rotateY(40deg);
		background:rgba(50,50,50,0.1);
    }

    50% {
        -moz-transform: perspective(600px) rotateY(-10deg);
    }

    75% {
        -moz-transform: perspective(600px) rotateY(10deg);
    }

	100% {
        -moz-transform: perspective(600px) rotateY(0deg);
    }
}
@keyframes flipY {
    0% {
        transform: perspective(600px) rotateY(0deg);
    }

    25% {
        transform: perspective(600px) rotateY(40deg);
		background:rgba(50,50,50,0.1);
    }

    50% {
        transform: perspective(600px) rotateY(-10deg);
    }

    75% {
        transform: perspective(600px) rotateY(10deg);
    }

	100% {
        transform: perspective(600px) rotateY(0deg);
    }
}

.flipY {
	-webkit-backface-visibility: visible;
	-webkit-animation: flipY 2s;
	-moz-animation: flipY 2s;
	backface-visibility: visible;
	animation: flipY 2s;

	will-change: transform, background;
}

/* flip in*/
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
		background:rgba(50,50,50,0.1);
    }

    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
		opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
    }
}
@-moz-keyframes flipInY {
    0% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateY(-10deg);
		background:rgba(50,50,50,0.1);
    }

    70% {
        -moz-transform: perspective(400px) rotateY(10deg);
		opacity: 1;
    }

    100% {
        -moz-transform: perspective(400px) rotateY(0deg);
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateY(-10deg);
		background:rgba(50,50,50,0.1);
    }

    70% {
        transform: perspective(400px) rotateY(10deg);
		opacity: 1;
    }

    100% {
        transform: perspective(400px) rotateY(0deg);
    }
}

.flipInY {
	-webkit-backface-visibility: visible;
	-webkit-animation: flipInY 3s;
	-moz-backface-visibility: visible;
	-moz-animation: flipInY 3s;
	backface-visibility: visible;
	animation: flipInY 3s;

	will-change: transform, background;
}

/*fade flip x y*/
@-webkit-keyframes fadeFlipX {
    0% {
        -webkit-transform: perspective(600px) rotateX(0deg);
    }

    25% {
        -webkit-transform: perspective(600px) rotateX(40deg);
		background:rgba(50,50,50,0.5);
    }

    50% {
        -webkit-transform: perspective(600px) rotateX(-10deg);
    }

    75% {
        -webkit-transform: perspective(600px) rotateX(10deg);
    }

	100% {
        -webkit-transform: perspective(600px) rotateX(0deg);
    }
}
@-moz-keyframes fadeFlipX {
    0% {
        -moz-transform: perspective(600px) rotateX(0deg);
    }

    25% {
        -moz-transform: perspective(600px) rotateX(40deg);
		background:rgba(50,50,50,0.5);
    }

    50% {
        -moz-transform: perspective(600px) rotateX(-10deg);
    }

    75% {
        -moz-transform: perspective(600px) rotateX(10deg);
    }

	100% {
        -moz-transform: perspective(600px) rotateX(0deg);
    }
}
@keyframes fadeFlipX {
    0% {
        transform: perspective(600px) rotateX(0deg);
    }

    25% {
        transform: perspective(600px) rotateX(40deg);
		background:rgba(50,50,50,0.5);
    }

    50% {
        transform: perspective(600px) rotateX(-10deg);
    }

    75% {
        transform: perspective(600px) rotateX(10deg);
    }

	100% {
        transform: perspective(600px) rotateX(0deg);
    }
}

.fadeFlipX {
	-webkit-backface-visibility: visible !important;
	-webkit-animation: fadeFlipX .5s;
	-moz-animation: fadeFlipX .5s;
	backface-visibility: visible !important;
	animation: fadeFlipX .5s;

	will-change: transform, background;
}

@-webkit-keyframes rotateInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(-90deg);
        opacity: 1;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(10deg);
		opacity: 1;
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
		opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
    }
}
@-moz-keyframes rotateInX {
    0% {
        -moz-transform: perspective(400px) rotateX(-90deg);
        opacity: 1;
    }

    40% {
        -moz-transform: perspective(400px) rotateX(10deg);
		opacity: 1;
    }

    70% {
        -moz-transform: perspective(400px) rotateX(-10deg);
		opacity: 1;
    }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
    }
}
@keyframes rotateInX {
    0% {
        transform: perspective(400px) rotateX(-90deg);
        opacity: 1;
    }

    40% {
        transform: perspective(400px) rotateX(10deg);
		opacity: 1;
    }

    70% {
        transform: perspective(400px) rotateX(-10deg);
		opacity: 1;
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
    }
}

.rotateInX {
	-webkit-backface-visibility: visible;
	-webkit-animation: rotateInX 2s;
	-moz-backface-visibility: visible;
	-moz-animation: rotateInX 2s;
	backface-visibility: visible;
	animation: rotateInX 2s;

	will-change: transform, opacity;
}

/*flip x*/
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(600px) rotateX(0deg);
		-webkit-transform-origin: 50% 0%;
		opacity:1;
    }

	100% {
        -webkit-transform: perspective(600px) rotateX(-90deg);
		-webkit-transform-origin: 50% 0%;
		opacity:.0;

    }
}
@-moz-keyframes flipOutX {
    0% {
        -moz-transform: perspective(600px) rotateX(0deg);
		-moz-transform-origin: 50% 0%;
		opacity:1;
    }

	100% {
        -mox-transform: perspective(600px) rotateX(-90deg);
		-moz-transform-origin: 50% 0%;
		opacity:.0;
    }
}
@keyframes flipOutX {
    0% {
        transform: perspective(600px) rotateX(0deg);
		transform-origin: 50% 0%;
		opacity:1;
    }

	100% {
        transform: perspective(600px) rotateX(-90deg);
		transform-origin: 50% 0%;
		opacity:.0;
    }
}
.flipOutX {
	-webkit-backface-visibility: visible !important;
	-webkit-animation: flipOutX .8s;
	animation: flipOutX .8s;

	will-change: transform, opacity;
}

/* slide down */
@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: perspective(600px) translateZ(-800px) translateY(-100%);
		opacity:0;
    }

	50% {
        -webkit-transform: perspective(600px) translateZ(-100px) translateY(-50%);
		opacity:.5;
    }

	100% {
        -webkit-transform: perspective(600px) translateZ(0px) translateY(0%);
		opacity:1;
    }
}
@-moz-keyframes slideDown {
    0% {
        -moz-transform: perspective(600px) translateZ(-800px) translateY(-100%);
		opacity:0;
    }

	50% {
        -moz-transform: perspective(600px) translateZ(-100px) translateY(-50%);
		opacity:.5;
    }

	100% {
        -moz-transform: perspective(600px) translateZ(0px) translateY(0%);
		opacity:1;
    }
}
@keyframes slideDown {
    0% {
        transform: perspective(600px) translateZ(-800px) translateY(-100%);
		opacity:0;
    }

	50% {
        transform: perspective(600px) translateZ(-20px) translateY(-50%);
		opacity:.5;
    }

	100% {
        transform: perspective(600px) translateZ(0px) translateY(-1%);
		opacity:1;
    }
}

.slideDown {
	-webkit-animation: slideDown .5s ease-in-out;
	animation: slideDown .5s ease-in-out;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/* float down z */
@-webkit-keyframes floatDownZ {
    0% {
        -webkit-transform: perspective(600px) translateZ(50px) translateY(0%);
		opacity:0;
    }

	100% {
        -webkit-transform: perspective(600px) translateZ(0px) translateY(0%);
		opacity:1;
    }
}
@-moz-keyframes floatDownZ {
    0% {
        -moz-transform: perspective(600px) translateZ(50px) translateY(0%);
		opacity:0;
    }

	100% {
        -moz-transform: perspective(600px) translateZ(0px) translateY(0%);
		opacity:1;
    }
}
@keyframes floatDownZ {
    0% {
        transform: perspective(600px) translateZ(50px) translateY(0%);
		opacity:0;
    }

	100% {
        transform: perspective(600px) translateZ(0px) translateY(0%);
		opacity:1;
    }
}

.floatDownZ {
	-webkit-animation: floatDownZ .3s ease-out;
	animation: floatDownZ .3s ease-out;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

@-webkit-keyframes floatUpZ {
    0% {
        -webkit-transform: perspective(600px) translateZ(-100px) translateY(0%);
		opacity:0;
    }

	100% {
        -webkit-transform: perspective(600px) translateZ(0px) translateY(0%);
		opacity:1;
    }
}
@-moz-keyframes floatUpZ {
    0% {
        -moz-transform: perspective(600px) translateZ(-100px) translateY(0%);
		opacity:0;
    }

	100% {
        -moz-transform: perspective(600px) translateZ(0px) translateY(0%);
		opacity:1;
    }
}
@keyframes floatUpZ {
    0% {
        transform: perspective(600px) translateZ(-100px) translateY(0%);
		opacity:0;
    }

	100% {
        transform: perspective(600px) translateZ(0px) translateY(0%);
		opacity:1;
    }
}

.floatUpZ {
	-webkit-animation: floatUpZ .5s ease-in-out;
	animation: floatUpZ .5s ease-in-out;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

@-webkit-keyframes foldCorner {
    0% {
        -webkit-transform:perspective(80px) rotate3D(180,180,0,180deg);
		border-color: transparent transparent inherit inherit;
		box-shadow:none;
    }

	50% {
        -webkit-transform:perspective(80px) rotate3D(180,180,0,90deg);
		border-color: transparent transparent inherit inherit;
    }

	100% {
        border-color: transparent transparent rgba(255,255,255,.15) rgba(255,255,255,.15);
		-webkit-transform:perspective(80px) rotate3D(180,180,0,0deg);
		box-shadow: -1px 3px 1px 2px rgba(0,0,0,0.3), -1px 1px 2px rgba(0,0,0,0.1);
    }
}
@-moz-keyframes foldCorner {
    0% {
        -moz-transform:perspective(80px) rotate3D(180,180,0,180deg);
		border-color: transparent transparent inherit inherit;
		box-shadow:none;
    }

	50% {
        -moz-transform:perspective(80px) rotate3D(180,180,0,90deg);
		border-color: transparent transparent inherit inherit;
    }

	100% {
        border-color: transparent transparent rgba(255,255,255,.15) rgba(255,255,255,.15);
		-moz-transform:perspective(80px) rotate3D(180,180,0,0deg);
		box-shadow: -1px 3px 1px 2px rgba(0,0,0,0.3), -1px 1px 2px rgba(0,0,0,0.1);
    }
}
@keyframes foldCorner {
    0% {
        transform:perspective(80px) rotate3D(180,180,0,180deg);
		border-color: transparent transparent inherit inherit;
		box-shadow:none;
    }

	50% {
        transform:perspective(80px) rotate3D(180,180,0,90deg);
		border-color: transparent transparent inherit inherit;
    }

	100% {
        border-color: transparent transparent rgba(255,255,255,.15) rgba(255,255,255,.15);
		transform:perspective(80px) rotate3D(180,180,0,0deg);
		box-shadow: -1px 3px 1px 2px rgba(0,0,0,0.3), -1px 1px 2px rgba(0,0,0,0.1);
    }
}
.foldCorner {
	-webkit-animation: foldCorner .3s ease-out;
	-webkit-animation-fill-mode:forwards;
	animation: foldCorner .3s ease-out;
	animation-fill-mode: forwards;
}

/* raise in */
@-webkit-keyframes raiseIn {
    0% {
        -webkit-transform: perspective(600px) translateZ(-800px) translateY(80%) rotateX(50deg) rotateY(50deg);
		opacity:0;
    }

	100% {
        -webkit-transform: perspective(600px) translateZ(0px) translateY(0%) rotateX(0deg) rotateY(0deg);
		opacity:1;
    }
}
@-moz-keyframes raiseIn {
    0% {
        -moz-transform: perspective(600px) translateZ(-800px) translateY(80%) rotateX(50deg) rotateY(50deg);
		opacity:0;
    }

	100% {
        -moz-transform: perspective(600px) translateZ(0px) translateY(0%) rotateX(0deg) rotateY(0deg);
		opacity:1;
    }
}
@keyframes raiseIn {
    0% {
        transform: perspective(600px) translateZ(-800px) translateY(80%) rotateX(50deg) rotateY(50deg);
		opacity:0;
    }

	100% {
        transform: perspective(600px) translateZ(0px) translateY(0%) rotateX(0deg) rotateY(0deg);
		opacity:1;
    }
}

.raiseIn {
	-webkit-animation: raiseIn .5s ease-in-out;
	animation: raiseIn .5s ease-in-out;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/* raise in */
@-webkit-keyframes curveIn {
    0% {
        -webkit-transform: perspective(600px) translateZ(-800px) translateY(100%) translateX(50%) rotateZ(-90deg);
		-webkit-transform-origin:100%;
		opacity:0;
    }

	100% {
        -webkit-transform: perspective(600px) translateZ(0px) translateY(0%) translateX(0%) rotateZ(0deg);
		-webkit-transform-origin:100%;
		opacity:1;
    }
}
@keyframes curveIn {
    0% {
        transform: perspective(600px) translateZ(-800px) translateY(100%) translateX(50%) rotateZ(-90deg);
		transform-origin:100%;
		opacity:0;
    }

	100% {
        transform: perspective(600px) translateZ(0px) translateY(0%) translateX(0%) rotateZ(0deg);
		transform-origin:100%;
		opacity:1;
    }
}

.curveIn {
	-webkit-animation: curveIn .8s ease-in-out;
	animation: curveIn .8s ease-in-out;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

@-webkit-keyframes curveOut {
    0% {
        -webkit-transform: perspective(600px) translateZ(0px) translateY(0%) translateX(0%) rotateZ(0deg);
		-webkit-transform-origin:100%;
		opacity:1;
    }

	50% {
        -webkit-transform: perspective(600px) translateZ(-800px) translateY(100%) translateX(-25%) rotateZ(-45deg);
		-webkit-transform-origin:100%;
		opacity:0;
    }

	100% {
        -webkit-transform: perspective(600px) translateZ(-800px) translateY(50%) translateX(-50%) rotateZ(-90deg);
		-webkit-transform-origin:100%;
		opacity:0;
    }
}
@keyframes curveOut {
    0% {
        transform: perspective(600px) translateZ(0px) translateY(0%) translateX(0%) rotateZ(0deg);
		transform-origin:100%;
		opacity:1;
    }

	50% {
        transform: perspective(600px) translateZ(-800px) translateY(100%) translateX(-25%) rotateZ(-45deg);
		transform-origin:100%;
		opacity:0;
    }

	100% {
        transform: perspective(600px) translateZ(-800px) translateY(50%) translateX(-50%) rotateZ(-90deg);
		transform-origin:100%;
		opacity:0;
    }
}

.curveOut {
	-webkit-animation: curveOut .8s ease-in-out;
	animation: curveOut .8s ease-in-out;
	position:fixed;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/* slide in */
@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: perspective(600px) translateZ(-800px) translateX(-100%);
		opacity:0;
    }

	50% {
        -webkit-transform: perspective(600px) translateZ(-20px) translateX(-50%);
		opacity:.5;
    }

	100% {
        -webkit-transform: perspective(600px) translateZ(0px) translateX(0%);
		opacity:1;
    }
}
@keyframes slideIn {
    0% {
        transform: perspective(600px) translateZ(-800px) translateX(-100%);
		opacity:0;
    }

	50% {
        transform: perspective(600px) translateZ(-20px) translateX(-50%);
		opacity:.5;
    }

	100% {
        transform: perspective(600px) translateZ(0px) translateX(-1%);
		opacity:1;
    }
}

.slideIn {
	-webkit-animation: slideIn .8s ease-in-out;
	animation: slideIn .8s ease-in-out;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

@-webkit-keyframes rotateXIn {
    0% {
        -webkit-transform: perspective(600px) translateZ(-800px) translateX(-100%) rotateY(-60deg);
		opacity:0;
    }

	50% {
        -webkit-transform: perspective(600px) translateZ(-20px) translateX(-25%);
		opacity:.5;
    }

	100% {
        -webkit-transform: perspective(600px) translateZ(0px) translateX(0%);
		opacity:1;
    }
}
@keyframes rotateXIn {
    0% {
        transform: perspective(600px) translateZ(-800px) translateX(-100%)  rotateY(-60deg);
		opacity:0;
    }

	50% {
        transform: perspective(600px) translateZ(-20px) translateX(-25%) rotateY(0deg);
		opacity:.5;
    }

	100% {
        transform: perspective(600px) translateZ(0px) translateX(-1%) rotateY(0deg);
		opacity:1;
    }
}

.rotateXIn {
	-webkit-animation: rotateXIn .8s ease-in-out;
	animation: rotateXIn .8s ease-in-out;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

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

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

	100% {
        transform:translate3d(0,0%,0);
		opacity:1;
    }
}

.pullUp {
	-webkit-animation: pullUp .8s ease-in-out;
	animation: pullUp .8s ease-in-out;
	position:absolute;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

@-webkit-keyframes pullUpTransparent {
    0% {
        -webkit-transform:translate3d(0,10%,0);
		opacity:0;
    }

	100% {
        -webkit-transform:translate3d(0,0%,0);
		opacity:1;
    }
}
@keyframes pullUpTransparent {
    0% {
        transform:translate3d(0,10%,0);
		opacity:0;
    }

	100% {
        transform:translate3d(0,0%,0);
		opacity:1;
    }
}

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

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

	100% {
        transform:translate3d(0,0%,0);
		opacity:1;
    }
}

.pullDown {
	-webkit-animation: pullDown .8s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation: pullDown .8s ease-in-out;
	animation-fill-mode: forwards;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

@-webkit-keyframes pullDownOut {
    0% {
        -webkit-transform:translate3d(0,0%,0);
		opacity:1;
    }

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

	100% {
        transform:translate3d(0,100%,0);
		opacity:1;
    }
}

.pullDownOut {
	-webkit-animation: pullDownOut .8s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation: pullDownOut .8s ease-in-out;
	animation-fill-mode: forwards;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

@-webkit-keyframes pullDownOutTransparent {
    0% {
        -webkit-transform:translate3d(0,0%,0);
		opacity:1;
    }

	100% {
        -webkit-transform:translate3d(0,10%,0);
		opacity:0;
    }
}
@keyframes pullDownOutTransparent {
    0% {
        transform:translate3d(0,0%,0);
		opacity:1;
    }

	100% {
        transform:translate3d(0,10%,0);
		opacity:0;
    }
}

/* pull left */
@-webkit-keyframes pullLeft {
    0% {
        -webkit-transform:translate3d(0%,0,0);
		opacity:1;
    }

	40% {
		opacity:1;
    }

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

	40% {
		opacity:1;
    }

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

.pullLeft {
	-webkit-animation: pullLeft 1s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation: pullLeft 1s ease-in-out;
	animation-fill-mode: forwards;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}
.pullLeftFast {
	-webkit-animation: pullLeft .8s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation: pullLeft .8s ease-in-out;
	animation-fill-mode: forwards;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.pullLeftFaster {
	-webkit-animation: pullLeft .3s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation: pullLeft .3s ease-in-out;
	animation-fill-mode: forwards;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/* pull right */
@-webkit-keyframes pullRight {
    0% {
        -webkit-transform:translate3d(0%,0,0);
		opacity:1;
    }

	40% {
		opacity:1;
    }

	100% {
        -webkit-transform:translate3d(10%,0,0);
		opacity:0;
    }
}
@keyframes pullRight {
    0% {
        transform:translate3d(0%,0,0);
		opacity:1;
    }

	40% {
		opacity:1;
    }

	100% {
        transform:translate3d(10%,0,0);
		opacity:0;
    }
}

.pullRight {
	-webkit-animation: pullRight .5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation: pullRight .5s ease-in-out;
	animation-fill-mode: forwards;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.pullRightFast {
	-webkit-animation: pullRight .3s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation: pullRight .3s ease-in-out;
	animation-fill-mode: forwards;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/* pull left in */
@-webkit-keyframes pullLeftIn {
    0% {
        -webkit-transform:translate3d(-10%,0,0);
		opacity:0;
    }

	100% {
        -webkit-transform:translate3d(0%,0,0);
		opacity:1;
    }
}
@keyframes pullLeftIn {
    0% {
        transform:translate3d(-10%,0,0);
		opacity:0;
    }

	100% {
        transform:translate3d(0%,0,0);
		opacity:1;
    }
}

.pullLeftIn {
	-webkit-animation: pullLeftIn .3s ease-out;
	-webkit-animation-fill-mode: forwards;
	animation: pullLeftIn .3s ease-out;
	animation-fill-mode: forwards;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}
.pullLeftInFaster {
	-webkit-animation: pullLeftIn .5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation: pullLeftIn .5s ease-in-out;
	animation-fill-mode: forwards;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/* pull right in */
@-webkit-keyframes pullRightIn {
    0% {
        -webkit-transform:translate3d(10%,0,0);
		opacity:0;
    }

	100% {
        -webkit-transform:translate3d(0%,0,0);
		opacity:1;
    }
}
@keyframes pullRightIn {
    0% {
        transform:translate3d(10%,0,0);
		opacity:0;
    }

	100% {
        transform:translate3d(0%,0,0);
		opacity:1;
    }
}

.pullRightIn {
	-webkit-animation: pullRightIn .3s ease-out;
	-webkit-animation-fill-mode: forwards;
	animation: pullRightIn .3s ease-out;
	animation-fill-mode: forwards;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.pullRightInFaster {
	-webkit-animation: pullRightIn .5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation: pullRightIn .5s ease-in-out;
	animation-fill-mode: forwards;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/* rotate circle */
@-webkit-keyframes rotateCircle {
    0% {
        -webkit-transform: rotateZ(0deg);
		opacity:0;
    }

    50% {
        -webkit-transform: rotateZ(180deg);
		opacity:1;
    }

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

    50% {
        transform: rotate(180deg);
		opacity:1;
    }

	100% {
        transform: rotate(360deg);
		opacity:0;
    }
}
.rotateCircle {
	-webkit-animation: rotateCircle 2s infinite;
	animation: rotateCircle 2s infinite;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

@-webkit-keyframes pulseBorder {
    0% {
 		-webkit-transform:scale(1,1);
		opacity:0;
    }

	20% {
		opacity:0;
    }

	40% {
		opacity:.2;
    }

	100% {
   		-webkit-transform:scale(1.6,1.6);
		border-width:3px;
		opacity:0;
    }
}
@-moz-keyframes pulseBorder {
    0% {
 		-moz-transform:scale(1,1);
		opacity:0;
    }

	20% {
		opacity:0;
    }

	40% {
		opacity:.2;
    }

	100% {
   		-moz-transform:scale(1.6,1.6);
		border-width:3px;
		opacity:0;
    }
}
@keyframes pulseBorder {
    0% {
 		transform:scale(1,1);
		opacity:0;
    }

	20% {
		opacity:0;
    }

	40% {
		opacity:.2;
    }

	100% {
   		transform:scale(1.6,1.6);
		border-width:3px;
		opacity:0;
    }
}
.pulseBorder {
	-webkit-animation: pulseBorder 1s infinite;
	-moz-animation: pulseBorder 1s infinite;
	animation: pulseBorder 1s infinite;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/*pulse text*/
@-webkit-keyframes pulseFocus {
    0% {
 		-webkit-transform:scale(1,1);
		border-width:12px;
		opacity:1;
    }

	100% {
   		-webkit-transform:scale(1.3,1.3);
		border-width:3px;
		opacity:0;
    }
}
@-moz-keyframes pulseFocus {
    0% {
 		-moz-transform:scale(1,1);
		border-width:12px;
		opacity:1;
    }

	100% {
   		-moz-transform:scale(1.3,1.3);
		border-width:3px;
		opacity:0;
    }
}
@keyframes pulseFocus {
    0% {
 		transform:scale(1,1);
		border-width:12px;
		opacity:1;
    }

	100% {
   		transform:scale(1.3,1.3);
		border-width:3px;
		opacity:0;
    }
}
.pulseFocus {
	-webkit-animation: pulseFocus 1s infinite;
	-moz-animation: pulseFocus 1s infinite;
	animation: pulseFocus 1s infinite;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/*pulse text*/
@-webkit-keyframes pulseScale {
    0% {
 		-webkit-transform:scale(1,1);
    }

	50% {
   		-webkit-transform:scale(1.1,1.1);
    }

	100% {
 		-webkit-transform:scale(1,1);
    }
}
@-moz-keyframes pulseScale {
    0% {
 		-moz-transform:scale(1,1);
		opacity:1;
    }

	50% {
   		-moz-transform:scale(1.1,1.1);
    }

	100% {
 		-moz-transform:scale(1,1);
    }
}
@keyframes pulseScale {
    0% {
 		transform:scale(1,1);
		opacity:1;
    }

	50% {
   		transform:scale(1.1,1.1);
    }

	100% {
 		transform:scale(1,1);
    }
}
.pulseScale {
	-webkit-animation: pulseScale 1s infinite;
	-moz-animation: pulseScale 1s infinite;
	animation: pulseScale 1s infinite;
}

/* float up */
@-webkit-keyframes floatUp {
    0% {
        -webkit-transform: perspective(600px) rotateX(0deg) scale(1,1);
    }

	100% {
        -webkit-transform: perspective(600px) rotateX(0deg) scale(1.2,1.2);
    }
}
@keyframes floatUp {
    0% {
        transform: perspective(600px) rotateX(0deg) scale(1,1);
    }

	100% {
        transform: perspective(600px) rotateX(0deg) scale(1.2,1.2);
    }
}
.floatUp {
	-webkit-animation: floatUp 1s ease-in-out;
	animation: floatUp 1s ease-in-out;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}

/*flip marker*/
@-webkit-keyframes flipMarker {
    0% {
        -webkit-transform: perspective(600px) rotateX(0deg) scale(1,1);
    }

	50% {
        -webkit-transform: perspective(600px) rotateX(0deg) scale(1.2,1.2);
    }

	100% {
        -webkit-transform: perspective(600px) rotateX(0deg) scale(1,1);
    }
}
@keyframes flipMarker {
    0% {
        transform: perspective(600px) rotateX(0deg) scale(1,1);
    }

	50% {
        transform: perspective(600px) rotateX(0deg) scale(1.2,1.2);
    }

	100% {
        transform: perspective(600px) rotateX(0deg) scale(1,1);
    }
}
.flipMarker {
	-webkit-backface-visibility: visible !important;
	-webkit-animation: flipMarker 1s infinite;
	backface-visibility: visible !important;
	animation: flipMarker 1s infinite;
}

/* Send loading bar across top of element */
@-webkit-keyframes swipeRight
{
    100% {
        left: 600px;
    }
}
@keyframes swipeRight
{
	100% {
        left: 600px;
    }
}

@-webkit-keyframes slideRight
{
	0%{
		transform: scaleX(.1) translateX(-100%);
	}
	50%{
		transform: scaleX(1) translateX(100%);
	}
    100% {
        transform: scaleX(.1) translateX(200%);
    }
}
@keyframes slideRight
{
	0%{
		transform: scaleX(.1) translateX(-100%);
		transform-origin: left;
	}
	80%{
		transform: scaleX(1) translateX(100%);
		transform-origin: right;
	}
    100% {
        transform: scaleX(.1) translateX(100%);
		transform-origin: right;
    }
}
@-webkit-keyframes squish {
    0% {
		transform: scale(1,1);
		opacity: 1;
	}
	100% {
		transform: scale(1,0);
		opacity: 0;
	}
}
@keyframes squish {
    0% {
		transform: scale(1,1);
		opacity: 1;
	}
	100% {
		transform: scale(1,0);
		opacity: 0;
	}
}
.squish {
	-webkit-animation: squish .3s;
	animation: squish .3s;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform-origin: 0 0;
	will-change: transform, opacity;
}

/*fade scaleY*/
@keyframes scaleUpY {
    0% {
        opacity: 0;
        transform: scaleY(.8);
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}
.scaleUpY {
	transform-origin: top right;
	backface-visibility: visible !important;
	animation: scaleUpY .2s;
}