.logo {
	width: 120px;
	height: 120px;
	display: inline-block;
	float: left;
	position: relative;
}
.logo-hark {
	height: 40px;
	margin-top: 35px;
	margin-left: 100px;
}
.circle-alt {
	width: inherit;
	height: inherit;
	position: absolute;
	top: 0;
	z-index: -10;
	background: #F05A28;
	background-position: center;
	background-size: cover;
	-webkit-mask-image: url(../img/hark-logo/circle.svg);
    mask-image: url(../img/hark-logo/circle.svg);
    border-radius: 100%;
}
.circle-alt span {
	background-position: center;
	background-size: cover;
	display: block;
	height: inherit;
	width: inherit;
    border-radius: 100%;
}
.circle.active {

}
.logo img {
	position: relative;
    top: 38px;
    left: 14px;
}

.hark {
	width: 100%;
	height: 100%;
}

.hark span {
	background: url(../img/hark-logo/logo-sprite.png) no-repeat;
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.hark span.bg {
	background-position: top;
	opacity: 1;
}

.hark span.bg-hover {
	background: url(../img/hark-logo/logo-sprite.png) no-repeat;
	background-position: bottom;
	opacity: 0;
}