@import url(https://fonts.googleapis.com/css?family=Fira+Sans|Raleway:700,300);

.logo {
	font: 26px/1 'Raleway', sans-serif;
	font-weight: 300 !important;
	text-transform: uppercase;
	color: #990000 !important;
	display: inline-block;
	vertical-align: top;
	text-shadow: 0px 0px 10px rgba(255,255,255,255),
				 0px 0px 10px rgba(255,255,255,255),
				 1px 1px 0px #ffcccc,
				 1px -1px 0px #ff3333;
	overflow: hidden;
	padding: 15px 10px 10px 0;
	text-decoration: none !important;		
}

.logo span {
	zoom: 1;
	display: inline-block;
	z-index: 1;
	position: relative;
	margin-left:3px;
}
.logo span.big-letter { position:absolute;
top:0px;
left:0px;
	margin-left:0;

color: #ffffff;
	text-align: center;
	font-weight: 700;
	font-size: 28px;
	text-transform: uppercase;
	z-index: -1;
	*display: inline;
	-webkit-mask-image: url('../images/mask.png');
	-moz-mask-image: url('../images/mask.png');
	-o-mask-image: url('../images/mask.png');
	-ms-mask-image: url('../images/mask.png');
	mask-image: url('../images/mask.png');
	text-shadow: 0px 0px 0px rgba(255,255,255,255);
		}

.logo {
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: color 0.6s ease-in-out;
	-o-transition: color 0.6s ease-in-out;
	-ms-transition: color 0.6s ease-in-out;
	transition: color 0.6s ease-in-out;
}

.logo:hover {
	text-shadow: none;
	color: #2b2a29 !important;
	cursor: pointer;
}
.logo:hover span.big-letter {opacity: .1;}



.char1, .char2, .char3, .char4, .char5, .char6, .char7, .char8, .char9, .char10, .char11, .char12, .char13, .char14, .char15, .char16, .char17, .char18 {
	-webkit-transition: all 1.2s ease-in-out;
	-moz-transition: all 1.2s ease-in-out;
	-o-transition: all 1.2s ease-in-out;
	-ms-transition: all 1.2s ease-in-out;
	transition: all 1.2s ease-in-out;
}


.logo:hover {
	text-shadow: 0px 0px 10px rgba(255,255,255,255),
	             0px 0px 15px rgba(255,255,255,255),
	             0px 0px 20px rgba(255,255,255,255);
	 color: #990000;
}