﻿
.transition-right-edge {
	transition: right .5s linear, opacity .5s linear;
    -moz-transition: right .5s linear, opacity .5s linear; 
    -webkit-transition: right .5s linear, opacity .5s linear; 
    -o-transition: right .5s linear, opacity .5s linear; 
    -ms-transition: right .5s linear, opacity .5s linear; 
}

@keyframes bloom {
	0%   { transform: scale(0); }
	100% { transform: scale(1); }
}

.animation-bloom {
	position: relative;
	animation-name: bloom;
	animation-direction: forward;
	animation-duration: .5s;
	animation-fill-mode: both;
	animation-timing-function: ease-in;
}

@keyframes dissolve-down {
	0%   { opacity: 0; top: -150%; }
	100% { opacity: 1; top: 0%; }
}

.animation-dissolve-down {
	position: relative;
	animation-name: dissolve-down;
	animation-direction: forward;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@keyframes dissolve-up {
	0%   { opacity: 0; top: 150%; }
	100% { opacity: 1; top: 0%; }
}

.animation-dissolve-up {
	position: relative;
	animation-name: dissolve-up;
	animation-direction: forward;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}
	
@keyframes dissolve-right {
	0%   { opacity: 0; left: -150%; }
	100% { opacity: 1; top: 0%; }
}

.animation-dissolve-right {
	position: relative;
	animation-name: dissolve-right;
	animation-direction: forward;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@keyframes dissolve-left {
	0%   { opacity: 0; left 150%; }
	100% { opacity: 1; top: 0%; }
}

.animation-dissolve-left{
	position: relative;
	animation-name: dissolve-left;
	animation-direction: forward;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@keyframes flare {
	0%  { transform: scale(1.0); }
	20%  { transform: scale(1.07); }
	40%  { transform: scale(1.10); }
	60%  { transform: scale(1.07); }
	100% { transform: scale(1.00); }
}

.animation-flare  {
	position: relative;
	animation-name: flare;
	animation-direction: forward;
	animation-duration: 100ms;
	animation-fill-mode: both;
	animation-timing-function: linear;
}

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

.fade-in {
	position: relative;
	animation-name: fade-in;
	animation-direction: forward;
	animation-duration: 1000ms;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
