#logo .main {
	-webkit-perspective: 300;
	-webkit-perspective-origin: center top;
	-webkit-font-smoothing: subpixel-antialiased;
	display: block;
	position: relative;
	overflow: visible;
	margin-top: 15px;
	width: 99px;
	height: 36px;
	text-indent: -99em;
	font-size: 40px;
	font-weight: 800;
	text-decoration: none;
	color: #f32837;
}

#logo a.main span.shadow {
	-webkit-transition: opacity .3s ease-out, visibility .3s ease-out;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	background-image: url(/images/branding/logo-black.png);
	background-size: 100%;
}

#logo .main span.text {
	-webkit-transition: opacity .3s ease-out;
	z-index: 2;
	opacity: 1;
	background-image: url(/images/branding/logo-red.png);
	background-size: 100%;
}

#logo a.main:hover span.text,
#logo a.main:focus span.text,
#logo a.main:active span.text {
	opacity: 0;
}

#logo a.main:hover span.shadow,
#logo a.main:focus span.shadow,
#logo a.main:active span.shadow {
	visibility: visible;
	opacity: 1;
}

#logo .subtitle {
	margin-top: 5px;
	font-size: 15px;
}

@media only screen and (max-width: 420px) {

	#logo .main {
		margin-top: 10px;
		width: 71.775px;
		height: 26.1px;
	}

	#logo .subtitle {
		font-size: 12px;
	}

}