/*CSS3 ANIMATION KEYFRAMES*/

	@keyframes fade-in {
		0%		{opacity: 0;}
		100%	{opacity: 1;}
	}

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

		@-o-keyframes fade-in {
			0%		{opacity: 0;}
			100%	{opacity: 1;}
		}
		
		@-webkit-keyframes fade-in {
			0%		{opacity: 0;}
			100%	{opacity: 1;}
		}
	
	@keyframes wipe-in-right {
		from {
			clip-path: inset(0 100% 0 0);
		}
		to {
			clip-path: inset(0 0 0 0);
		}
		}
		
		[transition-style="in:wipe:right"] {
		animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
		}

		@-moz-keyframes wipe-in-right {
			from {
				clip-path: inset(0 100% 0 0);
			}
			to {
				clip-path: inset(0 0 0 0);
			}
			}
		@-o-keyframes wipe-in-right {
			from {
				clip-path: inset(0 100% 0 0);
			}
			to {
				clip-path: inset(0 0 0 0);
			}
			}
		@-webkit-keyframes wipe-in-right {
			from {
				clip-path: inset(0 100% 0 0);
			}
			to {
				clip-path: inset(0 0 0 0);
			}
			}

	@keyframes wipe-in-left {
		from {
			clip-path: inset(0 0 0 100%);
		}
		to {
			clip-path: inset(0 0 0 0);
		}
		}
		
		[transition-style="in:wipe:left"] {
		animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-left both;
		}
		@-moz-keyframes wipe-in-left {
			from {
				clip-path: inset(0 0 0 100%);
			}
			to {
				clip-path: inset(0 0 0 0);
			}
			}
		@-o-keyframes wipe-in-left {
			from {
				clip-path: inset(0 0 0 100%);
			}
			to {
				clip-path: inset(0 0 0 0);
			}
			}
		@-webkit-keyframes wipe-in-left {
			from {
				clip-path: inset(0 0 0 100%);
			}
			to {
				clip-path: inset(0 0 0 0);
			}
			}
		
	@keyframes circle-in-top-right {
		from {
			clip-path: circle(0%);
		}
		to {
			clip-path: circle(150% at top right);
		}
		}
		
		[transition-style="in:circle:top-right"] {
		animation: 2.5s cubic-bezier(.25, 1, .30, 1) circle-in-top-right both;
		}
		@-moz-keyframes circle-in-top-right {
			from {
				clip-path: circle(0%);
			}
			to {
				clip-path: circle(150% at top right);
			}
			}
		@-o-keyframes circle-in-top-right {
			from {
				clip-path: circle(0%);
			}
			to {
				clip-path: circle(150% at top right);
			}
			}
		@-webkit-keyframes circle-in-top-right {
			from {
				clip-path: circle(0%);
			}
			to {
				clip-path: circle(150% at top right);
			}
			}

	@keyframes left-right {
		0% {
			transform: rotate(20deg);
		}
		50% {
			transform: rotate(-20deg);
		}
		100% {
			transform: rotate(20deg);
		}
		}
			
/*CSS3 ANIMATIONS*/
.wipe-right{
	animation-name: wipe-in-right;
		-moz-animation-name: wipe-in-right;
		-o-animation-name: wipe-in-right;
		-webkit-animation-name: wipe-in-right;
	animation-duration: 2.25s;
		-moz-animation-duration: 2.25s;
		-o-animation-duration: 2.25s;
		-webkit-animation-duration: 2.25s;
	animation-fill-mode: backwards;
		-moz-animation-fill-mode: backwards;
		-o-animation-fill-mode: backwards;
		-webkit-animation-fill-mode: backwards;
}

.wipe-left{
	animation-name: wipe-in-left;
		-moz-animation-name: wipe-in-left;
		-o-animation-name: wipe-in-left;
		-webkit-animation-name: wipe-in-left;
	animation-duration: 2.25s;
		-moz-animation-duration: 2.25s;
		-o-animation-duration: 2.25s;
		-webkit-animation-duration: 2.25s;
	animation-fill-mode: backwards;
		-moz-animation-fill-mode: backwards;
		-o-animation-fill-mode: backwards;
		-webkit-animation-fill-mode: backwards;
}

.t-right{
	animation-name: circle-in-top-right;
		-moz-animation-name: circle-in-top-right;
		-o-animation-name: circle-in-top-right;
		-webkit-animation-name: circle-in-top-right;
	animation-duration: 3s;
		-moz-animation-duration: 3s;
		-o-animation-duration: 3s;
		-webkit-animation-duration: 3s;
	animation-fill-mode: backwards;
		-moz-animation-fill-mode: backwards;
		-o-animation-fill-mode: backwards;
		-webkit-animation-fill-mode: backwards;
}

.fade-in {
	animation-name: fade-in;
		-moz-animation-name: fade-in;
		-o-animation-name: fade-in;
		-webkit-animation-name: fade-in;
	animation-duration: 0.75s;
		-moz-animation-duration: 0.75s;
		-o-animation-duration: 0.75s;
		-webkit-animation-duration: 0.75s;
	animation-fill-mode: backwards;
		-moz-animation-fill-mode: backwards;
		-o-animation-fill-mode: backwards;
		-webkit-animation-fill-mode: backwards;
}


.wiggle {
	animation-name: left-right;
		-moz-animation-name: left-right;
		-o-animation-name: left-right;
		-webkit-animation-name: left-right;
	animation-duration: 0.75s;
		-moz-animation-duration: 0.75s;
		-o-animation-duration: 0.75s;
		-webkit-animation-duration: 0.75s;
	animation-fill-mode: backwards;
		-moz-animation-fill-mode: backwards;
		-o-animation-fill-mode: backwards;
		-webkit-animation-fill-mode: backwards;

}