/*<meta />*/

/* 
Logo Hack

This bit of code allows us to override the logo that is set in the skin. We use this method because managing a skin for each product would be much more complicated than managing a couple extra stylesheets.

Writers can use a variable at the target level in order to select the correct stylesheet, and thus logo, for their product.

The lead writer can add new logos to the global project by using the following steps:
1. Uploading a new image to the global Flare project (preferably an svg)
2. Creating a new product-specific stylesheet in the global Flare project (see the other product-specific stylesheets for reference - like this one!)
3. Link the newly added to logo to the new stylesheet 
4. Add a target-level variable definition that matches the name of the new stylesheet

NOTES: Reach out to the Marketing team if you need a new logo created. 
You may have to adjust the width and mobile width below depending on the size of the logo.
Some of the logos that come from Marketing have extra white space around the logo, which makes the logo look squished on the how-to site. To fix this, either ask Marketing to remove the surrounding white space, or edit it yourself with a vector editor like Inkscape.
*/

.title-bar-layout a.logo
{
	background-color: transparent !important;
	background-image: url(../Images/logos/ehom-manager-portal-long-white.svg) !important;
	background-position: left center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	width: 400px !important;
}

@media only screen and (max-width: 767px)
{
	.title-bar-layout a.logo
	{
		width: 300px !important;
	}
}

/*Added so the logo still fits in the mobile view*/