//*******************************************
//
//	PAGE TRANSITIONS
//
//	Description
//	- Transitions that affect the whole project
//
//	Contents
//	1) PAGE
//	2) SVG LOAD
//
//*******************************************



//*******************************************
//
//	PAGE
//
//*******************************************
.page-in { opacity: 1 !important; }

.page-default {
	opacity: 0;
	transition: opacity $transition-longer-out;
}


//*******************************************
//
//	SVG LOAD
//
//*******************************************
img {
	opacity: 0;
	transition: opacity $transition-longer-default;
}

.svg-background {
	//	EXTEND
	@extend %clearfix;
	//	VARS (locally scoped)
	//	LAYOUT
		// Display, Positioning
		position: absolute;
		z-index: -1;
		// Box Model
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		// Type
	//	DISPLAY
		// Visual Enhancement
		opacity: 1;
		// Type
	//	PSUEDO Elements & Classes
		// Elements :: before, after, first-line, first-letter, selection
		// Classes : http://css-tricks.com/almanac/
	//	CHILDREN (Sass 3.3 Syntax Only, otherwise scope child outside this selector)
	//	MODIFIERS
		// Static
		// Dynamic
		transition: opacity $transition-longer-default;
	//	BREAKPOINTS
}

.svg-loaded { opacity: 1 !important; }