/*
global-animation.css
====================
This file is included across the entire site when
animations are enabled for the theme. If you wish
to effect the css of anything globally and it is
animation related for this specific theme, then
please do so here.

Please make sure you comment EACH tag or class
you modify the animation styling of, so if someone
comes along in the future, they understand in DETAIL
what the tag styling is doing and why

See detailed documentation here:-
	https://docs.google.com/document/d/1n5sWQ8SIr-zjOpTv8YnOTHJapO8WdedjDfbeo-lkqMM/edit#heading=h.lmxb59mpcpe2
*/

/*
FLOW
====
1) GLOBAL
2) NAVIGATION HEADER
3) HOME PAGE
*/

/*
1) GLOBAL
=========
*/

	/*
	Since we want to fade in the site when loaded,
	we initally set the opacity of the body to 0,
	then animate it fading in when the document loads.

	The actual fading in of the document is done in global-animation.js
	in a function called fFadeWebsiteIn()
	*/

		body
		{
			opacity: 0;
		}


/*
2) NAVIGATION HEADER
====================
*/

	/*
	Set the transition speed for all navigation links
	*/
		.nav > li > a, .nav > li > a:focus
		{
			-webkit-transition : background 0.35s, color 0.5s;
			-o-transition : background 0.35s, color 0.5s;
			transition : background 0.35s, color 0.5s;
		}

	/*
	Set the inital header states
	*/

		.top-header-wrapper,
		.middle-header-wrapper,
		.bottom-header-wrapper
		{
			opacity: 0;
		}
/*
3) HOME PAGE
============
*/

	/*
	Set the inital states of the image blocks so we can animate them in (img block 4)
	*/

		#home-top-4-image-image-block .col-sm-5,
		#home-top-4-image-image-block .col-sm-4,
		#home-top-4-image-image-block .col-sm-3
		{
			opacity: 0;
			-webkit-transform: rotateY(20deg);
			        transform: rotateY(20deg);
			-webkit-transition: all 1s;
			-o-transition: all 1s;
			transition: all 1s;
		}

	/*
	Set the inital states of the image blocks so we can animate them in (img block 3)
	*/
		.home-3-image-imageblock-background .col-sm-4
		{
			opacity: 0;
			-webkit-transform: rotateY(20deg);
			        transform: rotateY(20deg);
			-webkit-transition: all 1s;
			-o-transition: all 1s;
			transition: all 1s;
		}

	/*

	*/

		.full-overlay
		{
			height: 100%;
			left: 0;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 99999;

		}

		.full-overlay .center
		{
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%, -50%);
			    -ms-transform: translate(-50%, -50%);
			        transform: translate(-50%, -50%);
			width: 100%;
			text-align: center;
		}

		.full-overlay-background
		{
			left: 0;
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			z-index: 99998;
		}