@import url('https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Karla');
@import url('http://fonts.googleapis.com/css?family=Ubuntu');
/**
 * Animations
 */

.fromTopIn
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromTopOut
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: translate(0,-20px);
	opacity: 0.0;
}

.fromBottomIn
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromBottomOut
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: translate(0,20px);
	opacity: 0.0;
}

.fromLeftIn
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromLeftOut
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: translate(-20px,0);
	opacity: 0.0;
}

.fromRightIn
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromRightOut
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: translate(20px, 0);
	opacity: 0.0;
}

.scaleUpIn
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleUpOut
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: scale(1.3,1.3);
	opacity: 0.0;
}

.scaleDownIn
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleDownOut
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: scale(0.7,0.7);
	opacity: 0.0;
}