@charset "UTF-8";
.logo-bg {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		overflow: hidden;
		pointer-events: none;
		--grey: #323030;
}
.logo-bg + .container {
		position: relative;z-index: 3;
}
.logo-bg:before, .logo-bg:after {
		content: '';
		aspect-ratio: 1/1;
		-webkit-mask-size: contain;
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: 50% 50%;
		position: absolute;
		backface-visibility: hidden;
		z-index: 1;
}
.logo-bg:after {
		mask-image: url("../img/logo-bg/mask-full.svg");
}
.logo-bg:before {
		mask-image: url("../img/logo-bg/mask-stroke.svg");
		background: linear-gradient(45deg, var(--grey) 0%, var(--black) 70%);
}
@media only screen and (max-width: 759px) {
		.logo-bg:before {
				mask-image: url("../img/logo-bg/mask-stroke-mobile.svg");
		}
}
.logo-bg > * {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		transform: translateZ(0);
		z-index: 2;
}
.logo-bg > *:before, .logo-bg > *:after {
		content: '';
		position: absolute;
		pointer-events: none;
		height: 60px;
		left: 0;
		right: 0;
}
.logo-bg > *:before {
		top: 0;
		background: linear-gradient(to bottom, var(--black) 0%, rgba(0, 0, 0, 0) 100%);
}
.logo-bg > *:after {
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--black) 100%);
}
@media only screen and (min-width: 1000px) {
		.logo-bg > *:before, .logo-bg > *:after {
				height: 80px;
		}
}