/*
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
*/

	/*
	Set the logo animation wrapper inline and hide overflow so it makes the logo look like it's coming in from the side
	*/
	    .logo-animation-wrapper
	    {
	        display : inline-block;
	        overflow : hidden;			
	    }

	/*
	Hide menu items
	*/
		.menu-items
		{
			opacity: 0;
		}

	/*
	Hide the footer by default
	*/
		.footer
		{
			opacity: 0;
		}

	/*
	Set the logo image/text to be offset to the left so we can move it in from the right
	*/

	    .logo-image,
		.logo-text
	    {
			left: 100%;
			opacity: 0;
	        position: relative;
	    }

	/*
	Set navigation manu opacity to 0 so we can fade it in for desktop users
	*/

	    .navigation
	    {
	        opacity: 0;
	    }

	/*
	Set hamburger manu opacity to 0 so we can fade it in for mobile users
	*/

		.hamburger-menu
		{
			opacity: 0;
		}

	/*
	Set the opacity for the page content wrapper to 0
	*/
		.page-content-wrapper
		{
			opacity: 0;
		}

/*
INDEX PAGE ONLY
===============
*/

	/*
	Set the inital slide (the slide that is shown first) so we can animate it
	*/

		.slide-inital
		{
			display: none;
			left: 50%;
			width: 0px;
		}

	/*
	Set the initals for the footer homepage animation, this is also set in home-animation.js, if you change here, please change there too
	*/
		.footer-homepage-animation
		{
			opacity: 0;
		}