/*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 !important;
	-webkit-animation: flipY 2s;
	-moz-backface-visibility: visible !important;
	-moz-animation: flipY 2s;
	-o-backface-visibility: visible !important;
	-o-animation: flipY 2s;
	backface-visibility: visible !important;
	animation: flipY 2s;
}


/*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;
}

@-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-backface-visibility: visible !important;
	-webkit-animation: rotateXIn .8s ease-in-out;
	backface-visibility: visible !important;
	animation: rotateXIn .8s ease-in-out;
}

@-webkit-keyframes pulseInOutGreen {
	0% {}
	50% {
		background: #378E43;
	}
	100% {}
}

@keyframes pulseInOutGreen {
	0% {}
	50% {
		background: #378E43;
	}
	100% {}
}

@-webkit-keyframes pulseInOutRed {
	0% {}
	50% {
		background: #E53935;
	}
	100% {}
}

@keyframes pulseInOutRed {
	0% {}
	50% {
		background: #E53935;
	}
	100% {}
}

@-webkit-keyframes pulseInOutOrange {
	0% {}
	50% {
		background: #EF6C00;
	}
	100% {}
}

@keyframes pulseInOutOrange {
	0% {}
	50% {
		background: #EF6C00;
	}
	100% {}
}

@-webkit-keyframes pulseInOutYellow {
	0% {}
	50% {
		background: #FBC02D;
	}
	100% {}
}

@keyframes pulseInOutYellow {
	0% {}
	50% {
		background: #FBC02D;
	}
	100% {}
}