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

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

	/*
	Set the inital stage for the header wrapper, so we can fade it in
	*/

		.header-row
		{
			opacity: 0;
		}

	/*
	Set the inital position for the header wrapper so we can animate it coming in
	*/

		#header-wrapper
		{
			top: -400px;
			transition: top 0.8s;
			transition-timing-function: ease-out;
		}

/*
2) HOMEPAGE
===========
*/

	/*
	Set the inital position for the landing banner text (ome page)
	*/
		.banner-text
		{
			padding-top: 20vh;
		}

	/*
	Set the inital state for each category on the home page
	*/
		.homepage-banner-row #categories-wrapper .product-col
		{
			opacity: 0;
			padding-top: 50px;
		}

	/*
	Set the inital state for blog post on the home page
	*/
		#more-info-block #blog-container .container .left-blog-col
		{
			opacity: 0;
			padding-top: 50px;
		}

	/*
	Set the inital state for the view all blogs button
	*/
		.view-all-blog-col
		{
			opacity: 0;
		}