.hero, .banner, .offer {
	font-family: 'Cairo', Arial, sans-serif;
}

#navbar {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	align-self: self-start;
	gap: 1rem;
	width: 100%;
}

#navbar .logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

#navbar .logo img {
	width: 100%;
	max-width: 260px;
	height: auto;
}

#navbar .nav-item {
	display: none;
}

.hc-offcanvas-nav li.search .nav-item
{
	padding-top: 0
}
.hc-offcanvas-nav li.search input[type="text"]
{
	width: 100%;
	box-sizing: border-box;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	color: #fff;
	background: rgba(255,255,255,0.12);
	padding: 5px 10px;
	box-shadow: none;
	outline: none;
}
.hc-offcanvas-nav li.search input[type="text"]::-webkit-input-placeholder
{
	color: rgba(255,255,255,0.8);
}
.hc-offcanvas-nav li.search input[type="text"]:-ms-input-placeholder
{
	color:rgba(255,255,255,0.8);
}
.hc-offcanvas-nav li.search input[type="text"]::-ms-input-placeholder
{
	color: rgba(255,255,255,0.8);
}
.hc-offcanvas-nav li.search input[type="text"]::placeholder
{
	color:rgba(255,255,255,0.8);
}


.hc-offcanvas-nav ul.bottom-nav
{
	position: absolute;
	z-index: 10;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	border-top: 1px solid #9d1519;
}
.hc-offcanvas-nav ul.bottom-nav li
{
	flex: auto
}
.hc-offcanvas-nav ul.bottom-nav li a
{
	padding: 10px;
	text-align: center;
	height: 100%;
	border-bottom: none;
}

a.btn {
	display:inline-block;
	padding: .5rem 1rem;
	border-radius: .5rem;
	color: #FFF;
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 1;
	border: 1px solid #A0141B;
	background: linear-gradient(15deg, #B31A21 0%, #C32120 35%, #D22921 70%, #E03422 100%);
	background-size: 160% 100%;
	box-shadow: 0 6px 14px rgba(179,26,33,.25), inset 0 1px 0 rgba(255,255,255,.15);
	transition: background-position .3s ease, transform .05s ease;
	-webkit-tap-highlight-color: transparent;
}

a.btn:hover,
a.btn:focus {
	color: #FFF;
	background-position: 100% 0;
	text-decoration: none;
}

a.btn:focus {
	color: #FFF;
	outline: none;
	box-shadow: 0 6px 14px rgba(179,26,33,.25), inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 3px #FFD1D4;
}

a.btn:active {
	color: #FFF;
	transform: translateY(1px);
	filter: brightness(.95);
}

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	min-height: 100dvh;
	padding: 2vw 6vw;
	background: linear-gradient(180deg, rgb(0 0 0 / .40) 0%, rgb(0 0 0 / .30) 40%, rgb(0 0 0 / .50) 100%);
}

.hero-media {
	position: absolute;
	display: block;
	z-index: -1;
	inset: 0;
	mix-blend-mode: multiply;
	width: 100%;
}

.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right;
}

.hero-content {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	flex: 1;
	font-size: 5vw;
	color: #FFF;
}

.hero-content .eyebrow {
	width: 11vw;
	height: auto;
}

.hero h1 {
    color: #FFF;
    font-weight: 500;
    font-size: 10vw;
    line-height: 12vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
}


.hero-footnote {
	position: absolute;
	font-size: .8rem;
	font-weight: 200;
	letter-spacing: 1px;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	text-align: right;
}

.hero a.btn {
	margin-top: 2.5vw;
	padding: 3vw 8vw;
	font-size: 4vw;
	letter-spacing: 0.5vw;
}

.banner-content {
	font-size: 1.5rem;
	font-weight: 400;
	padding: 1rem .5rem 4rem .5rem;
	color: #FFF;
	background: #838793;
	background: linear-gradient(180deg, rgba(131, 135, 147, 1) 0%, rgba(93, 97, 105, 1) 100%);
}

.banner-content p {
	padding: 0 1rem;
}

.banner-content small {
	display: block;
	font-size: 1rem;
	line-height: 1.25rem;
	font-weight: 200;
	margin-top: 3rem;
	padding: 0 1rem;
}

.banner-media {
	display: block;
}

.banner-media img {
	width: 100%;
	height: auto;
}

.highlight-headline {
	white-space: nowrap;
	line-height: 4rem;
	font-weight: 200;
}

.highlight-headline strong {
	font-weight: 700;
}

.highlight-headline > span {
	background: #E63312;
	background: linear-gradient(90deg, rgb(186, 29, 42) 0%, rgb(230, 51, 18) 100%);
	box-decoration-break: clone;
	display: inline;
	padding: 0 1rem;
}

.highlight-headline > .red-arrow {
	vertical-align: text-bottom;
}

br.mobi-a {
	display: none;
}

#offer {
	max-width: 800px;
	margin: auto;
	padding: 4rem 1rem 5rem 1rem;
}

.offer h2 {
	font-size: 8vw;
	line-height: 8vw;
	letter-spacing: -1px;
	color: #E11C25;
	margin-bottom: 3rem;
}

.offer h3 {
	color: #FFF;
	font-size: 1.875rem;
	line-height: 4rem;
	font-weight: 200;
	text-align: center;
}

.offer h3 strong {
	font-weight: 700;
}

#offer-carousel .carousel-item {
	border-radius: 1rem;
	background-color: #FFF;
	min-height: 28rem;
	padding: 1rem;
}

#offer-carousel .carousel-item > div {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1rem;
}

#offer-carousel .carousel-control-next,
#offer-carousel .carousel-control-prev {
	bottom: initial;
	top: 50%;
	transform: translateY(-50%);
	opacity: 1;
}
#offer-carousel .carousel-control-next {
	right: -14px;
	padding: 1rem 0 1rem 1rem;
}
#offer-carousel .carousel-control-prev {
	left: -14px;
	padding: 1rem 1rem 1rem 0;
}

#offer-carousel .carousel-control-next-icon,
#offer-carousel .carousel-control-prev-icon {
	background-position: center center;
	background-repeat: no-repeat;
	width: 36px;
	height: 32px;
}
#offer-carousel .carousel-control-next-icon {
	background-image: url('/out/pictures/promo/endofseason/icon-next.png');
}
#offer-carousel .carousel-control-prev-icon {
	background-image: url('/out/pictures/promo/endofseason/icon-prev.png');
}

.offer-additional {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 2rem;
	max-width: 36rem;
}

.offer-additional > div {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: .5rem;
	flex: 1;
}

.offer-additional > div > span {
	text-align: center;
}

.carousel-item .btn {
	margin-top: 1.5rem;
}

@media (min-width: 480px)
{
	br.mobi-a {
		display: inline;
	}

	br.mobi-b {
		display: none;
	}
}

@media (min-width: 800px)
{
	br.mobi-a {
		display: none;
	}
}

@media (min-width: 992px) and (max-width: 1199px)
{
	#navbarSupportedContent #navigation .nav-item .nav-link
	{
		padding-right: .5rem!important;
		padding-left: .5rem!important;
		font-size: 0.8rem!important;
	}
}

@media (min-width: 1025px)
{
	br.mobi {
		display: none;
	}

	#navbar {
		gap: 2rem;
	}

	#navbar .nav-item {
		display: inline;
	}

	#mobilenav,
	#navbar .category-trigger {
		display: none;
	}

	.hero {
		background: linear-gradient(180deg, rgb(0 0 0 / .15) 0%, rgb(0 0 0 / .10) 40%, rgb(0 0 0 / .20) 100%);
	}

	.hero-content {
		font-size: 2.5vw;
	}

	.hero-content .eyebrow {
		width: 7vw;
	}

	.hero h1 {
		font-size: 5.5vw;
		line-height: 6.5vw;
		margin-top: 1vw;
		margin-bottom: 1vw;
	}

	.hero a.btn {
		padding: .75vw 3vw;
		font-size: 1.75vw;
		letter-spacing: 0.1vw;
	}

	.hero-footnote {
		font-size: 1rem;
	}

	.banner-content {
		padding: 6rem 4rem;
		letter-spacing: 2px;
	}

	.banner-content h2 {
		margin-bottom: 2rem;
	}

	.banner-content small {
		margin-top: 5rem;
	}

	#offer {
		padding-top: 0;
	}

	.offer h2 {
		font-size: 3rem;
		line-height: 3.2rem;
		padding-top: 5rem;
		padding-bottom: 3rem;
	}

	#offer-carousel .carousel-control-next {
		right: -50px;
	}
	#offer-carousel .carousel-control-prev {
		left: -50px;
	}

	.offer-additional {
		flex-direction: row;
	}
}