@font-face {
	font-family: Gilroy_;
	src: url("../fonts/Gilroy/Gilroy-Semibold.woff") format("woff");
	font-style: normal;
	font-weight: 600;
}

@font-face {
	font-family: Gilroy_;
	src: url("../fonts/Gilroy/Gilroy-Black.woff") format("woff");
	font-style: normal;
	font-weight: 900;
}

.trimer-banner {
	width: calc(100% - 24px);
	text-align: center;
	box-sizing: border-box;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .2);
	background-color: #fff;
	position: fixed;
	top: 50%;
	left: 12px;
	z-index: 9999 !important;
	visibility: hidden;
	opacity: 0;
	transform: translate(-100%, -50%) scale(0);
	transition: transform .2s ease-in-out, opacity .2s ease-in-out, visibility .2s ease-in-out;
	user-select: none;
}

.trimer-banner_loaded {
	transform: translate(0, -50%) scale(1);
	visibility: visible;
	opacity: 1;
}

.trimer-banner_type_squirrel {
	border: 16px solid rgba(223, 176, 159, .20);
	border-radius: 56px;
	background: linear-gradient(-40deg, #374b23 36%, rgba(178, 158, 44, .48)) border-box, url("../images/trimer-banner_tree.webp") 0 0 / contain no-repeat border-box, #fff;
	position: relative;
}

.trimer-banner_type_squirrel::before {
	content: "";
	width: 258px;
	height: 225px;
	background: url("../images/trimer-banner_squirrel.webp") 0 0 no-repeat;
	position: absolute;
	bottom: calc(100% - 34px);
	left: -28px;
}

.trimer-banner__content {
	padding: 42px 16px 16px;
	font: 600 28px/44px Gilroy_;
	color: #fff;
	box-sizing: border-box;
}

.trimer-banner__accent {
	font-weight: 900;
}

.trimer-banner__percent {
	font-weight: 900;
	font-size: 40px;
	color: #f97414;
	-webkit-text-stroke: 1.5px #c4d554;
}

.trimer-banner__button {
	max-width: calc(100% - 32px);
	margin: 8px 0 32px;
	padding: 0 48px;
	height: 68px;
	font: 600 24px/68px Gilroy_;
	color: #fff;
	border-radius: 34px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
	background-color: #f97414;
	display: inline-block;
	overflow: hidden;
	cursor: pointer;
	transition: background-color .2s;
}

.trimer-banner__button:active {
	background-color: #fe2a2b;
	transform: translate(1px, 1px);
}

.trimer-banner__close {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
	background: #f97414 url("../images/trimer-banner_close.svg") 50% 50% no-repeat;
	position: absolute;
	top: -16px;
	left: calc(100% + 24px);
	cursor: pointer;
	transition: background-color .2s;
}

.trimer-banner__button:hover,
.trimer-banner__close:hover {
	background-color: #fe2a2b
}

@media(min-width: 360px) {
	.trimer-banner {
		width: 408px;
		left: 24px;
	}
}