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

	/*
	Set the inital opacity of the body to 0 so we can fade in on page load
	*/
		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 state for the dropdown-menu
	*/
		.dropdown-menu
		{
			opacity: 0;
		}

	/*
	Set the inital state for the shopping cart wrapper
	*/
		.header-cart-wrapper
		{
			left: -50vw;
			position: absolute;
			-webkit-transition : left 0.75s;
			-o-transition : left 0.75s;
			transition : left 0.75s;
		}

	/*
	Set the inital state for each link in the header login wrapper
	*/
		.header-login-wrapper a
		{
			opacity: 0;
		}

	/*
	Set the inital state for the line seperator (The line between login / register )
	*/
		.line-seperator
		{
			opacity: 0;
		}

	/*
	Set the inital state of the logo wrapper
	*/
		#logo-col-wrapper
		{
			opacity: 0;
		}

	/*
	Set the inital state of the contact wrapper
	*/

		.header-contact
		{
			opacity: 0;
		}

	/*
	Set the inital state for the Header Social Wrapper
	*/

		.header-social-wrapper
		{
			opacity: 0;
		}

	/*
	Set the inital state of the bottom header bar
	*/
		.bottom-header-bar
		{
			opacity: 0;
		}

	/*
	Set the inital state of the search bar
	*/

		#searchbar-col
		{
			opacity: 0;
		}

/*
3) HOME PAGE
============
*/

	/*
	Set the inital state for the slideshow
	*/

		#home-slideshow
		{
			opacity: 0;
		}

	/*
	CAROUSEL ANIMATION
	==================
	*/

		/*
		Add a transition effect to the item
		*/
			.carousel-section #carousel-container .carousel-item
			{
				-webkit-transition: opacity 0.6s;
				-o-transition: opacity 0.6s;
				transition: opacity 0.6s;
			}

		/*
		Set the opacity down when hovering the item
		*/
			.carousel-section #carousel-container .carousel-item:hover
			{
				opacity: 0.9;
				-webkit-transition: opacity 0.6s;
				-o-transition: opacity 0.6s;
				transition: opacity 0.6s;
			}

		/*
		Set the image overflow to hidden
		*/
			.carousel-section #carousel-container .carousel-item .inner-carousel-item
			{
				overflow: hidden;
			}

		/* Make the carousel item hidden */
			.carousel-section
			{
				opacity: 0;
				-webkit-transition: opacity 0.6s;
				-o-transition: opacity 0.6s;
				transition: opacity 0.6s;
			}

		/*
		Set the image transition for the zoom and set the transform origin to the bottom
		*/
			.carousel-section #carousel-container .carousel-item .img-carousel-container
			{
				-webkit-transform-origin: bottom center;
				    -ms-transform-origin: bottom center;
				        transform-origin: bottom center;
				-webkit-transition: -webkit-transform 0.4s;
				transition: -webkit-transform 0.4s;
				-o-transition: transform 0.4s;
				transition: transform 0.4s;
				transition: transform 0.4s, -webkit-transform 0.4s;
			}

		/*
		Set the transform to scale up when the user hovers the item
		*/
			.carousel-section #carousel-container .carousel-item:hover .img-carousel-container
			{
				-webkit-transform: scale(1.1);
				    -ms-transform: scale(1.1);
				        transform: scale(1.1);
			}

		/*
		Set the button to have a transition for the background and colour
		*/
			.carousel-section #carousel-container .carousel-item .carousel-add-cart-btn
			{
				-webkit-transition : background 0.45s, color 0.6s;
				-o-transition : background 0.45s, color 0.6s;
				transition : background 0.45s, color 0.6s;
			}