/* General styling */
/*
					Variables
					Initialise settings
					Buttons
					Header
					Slider
					Scroll To
					Front page
					Search Options
					Press
					Content Blocks Body  
					Footer
					Uber & Mobile Menu
					Timeline
					SVG
					Seach Page
					Responsive Video
					Parallax
					Grids
					Hover Blocks
					Accordian
					Share Icons
					Contact Forms
					Maps
					Animation
					Company Structure
					FlipBook
					Text Editor Elements
					Individual Blocks
*/

:root {
	--woven-purple-100: purple;
	--woven-purple-95: rgb(151, 3, 151);

	--woven-green-100: green;
	--woven-green-95: rgb(0, 146, 0);
	--prefers-color-scheme: dark light;
	color-scheme: light dark;
}

.dark-theme-section {
	color-scheme: dark;
}

.light-theme-section {
	color-scheme: light;
}

:host {
	background-color: lightblue;
	padding: 10px;
}

/* You can also target specific instances with a selector argument */
:host(.active) {
	border: 2px solid blue;
}

/* Settings for homepage */
/* Normal */

.title-banner {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-self: center;
	/* height: 100vh; */
}

.page1-images {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
	align-items: center;
	align-self: center;
	align-content: center;
	background-color: rgb(1, 1, 49);

}

.imagetable {
	margin-top: 20px;
	text-align: center;
	align-items: center;
	align-self: center;
	align-content: center;
}

.section {
	margin-top: 20px;
	text-align: center;
	align-items: center;
	align-self: center;
	align-content: center;
}

.videoopen {
	text-align: center;
	background-color: darkslategray;
	padding-bottom: 20px;
	h2 {
	color: white;
	}
}

.page1-header1, .page1-header2 {
	text-align: center;
}

.image-block {
	flex: 100%;
	max-width: 50%;
	padding: 0 4px;
	align-items: center;
	align-self: center;
	align-content: center;
	/* background-color: darkblue; */
}

.intro-table-kete, .intro-table-book {
	border-radius: 10px;
}

.disableButton {
	display: none;
}

.d-none {
	display: none;
}

.d-block {
	display: block;
}

.intro {
	margin: 30px;

	h1, h2, h3, p {
		color: white;
	}

	a {
		color: lightblue;
	}
}

#darkbutton, #lightbutton {
	font-size: 10pt;
	padding-left: 10px;
	border-color: blue;
}

#button1, #button2 {
	box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
}

/* Media Queries */
@media screen and (max-width: 800px) {
	.image-block {
		flex: 50%;
		max-width: 50%;
	}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	.image-block {
		flex: 100%;
		max-width: 100%;
	}
}

.next-icon:hover, .rucksack-icon:hover {
	color: rgb(43, 248, 111);
	/* animation: zoomInOut 10s infinite alternate ease-in-out; */
}

.next-icon {
	color: rgb(204, 204, 204);
	top: 40px;
	transform: translateX(-50%);
	position: relative;
	justify-content: flex-end;
	--fa-beat-scale: 2;
	--fa-animation-duration: 3s;
}


/* navbar behaviour and styling */
.navbar {
	/* background-color: #333; */
	/* Black background color */
	/* position: fixed; */
	/* Make it stick/fixed */
	top: 0;
	/* Stay on top */
	width: 100%;
	/* Full width */
	transition: top 0.3s;
	/* Transition effect when sliding down (and up) */
}

.navbar-inner {
	background: transparent;
}

/* Style the navbar links */
.navbar a {
	float: right;
	display: block;
	color: white;
	text-align: center;
	padding: 15px;
	text-decoration: none;
}

.nav-link.active {
	color: palegreen !important;
	text-decoration: underline;
	/* background-color: gold; */
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;

}


.navbar a:hover {
	background-color: #ddd;
	color: black;
}

/* General styling here */
.fullscreen-section {
	height: 100vh;
	/* Full viewport height */
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 0px;
	/* min-width: 360px; */
	/* overflow:hidden; */
}

/* Footer Stuff here  */
#copyright {
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	box-shadow: 0 8px 6px -6px #999;
	font-weight: 700;

}

#copyrightbox {
	background-color: rgba(0, 0, 0, 0.05);
}


.footer-block {
	/* display: flex; */
	/* Makes the container a flex container */
	flex-direction: row;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 10px;
	padding-bottom: 0px;
	margin-bottom: 0px;
	align-items: center;

	/* Arranges flex items horizontally (default) */
	/* Optional: Add other flex properties like justify-content, align-items, etc. */
	.card-body {
		margin-bottom: 0px;
		padding-bottom: 1px;
	}
}

.footer-section {
	padding: 50px 0px;
	background-color: var(--p-blue);
	text-align: center;
	min-height: 200px;
	font-size: 6em;
}

.footer-row {
	margin-left: 0px;
	margin-right: 0px;
	--bs-gutter-x: 0rem;
}

#myFooterRow {
	margin-left: 0px;
	margin-right: 0px;
	--bs-gutter-x: 0rem;
}

#footer-stravaig-name {
	text-shadow: 2px 2px 4px rgb(134, 134, 134);
	text-transform: uppercase;
	font-weight: 800;
}

.footer-company-text {
	font-size: 0.8em;
	text-shadow: #333;
}

.footer-services-info p {
	font-size: 0.7em;
	margin-bottom: 0.5em;
}

.footer-contact-info p {
	/* font-size: 14px; */
	font-size: 0.7em;
	margin-bottom: 0.9em;
}

.footer-company-text-sm {
	font-size: 0.7em;
	text-shadow: #333;
}

.no-italics {
	font-style: normal;
}

.footer-container, .bg-body-tertiary {
	/* max-width: 1000px; */
	align-items: center;
	text-align: center;
	/* max-width: 1050px ; */
}


.footer-copyright {
	font-size: 0.6em;
	color: var(--d-grey);
	text-transform: uppercase;
	/* border-radius: 10px; */
	width: 100%;
	text-align: center;
}

.footer-card-text {
	font-size: 1em;
	padding-bottom: 0px;
	padding-top: 0px;
}

.footer-card-text2 {
	font-size: 1.1em;
}

.footer-card-text.p {
	padding: 0px;
}

.card-body .p .footer-card-text {
	margin-bottom: 0px;
}

.card h6 {
	font-size: 1.2em;
	color: darkslateblue;
}

#ServicesCardFooter {
	p {
		text-align: left;
	}
}

#ServiceCardServices {
	p {
		padding: 0px;
		margin: 0.8em;
		text-align: center;
	}
}

.footer-card:hover {
	transform: none !important;
	transition: none !important;
	box-shadow: none !important;
	/* Removes the shadow on hover */

}

#ServiceCardTitle, #ContactCardTitle {
	text-align: center;
}

/* Contact form stuff here  */
.content-contact {
	/* background-color: rgba(211, 211, 211, 0.8); */
	/* Semi-transparent background for readability */
	/* padding: 20px 0px 0px 0px; */
	/* border-radius: 12px; */
	/* max-width: 1800px; */
	/* min-width: 350px; */
	/* width: 1200px; */
	padding-bottom: 10px;
	padding-top: 10px;
	/* padding-left: 20px; */
	/* background-color: grey; */
	/* color: var(--s-blue) */
	/* margin-top: 10px;  */
}

#contactBtn {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Fixed/sticky position */
	bottom: 50%;
	/* Place the button at the bottom of the page */
	right: 10px;
	/* Place the button 30px from the right */
	z-index: 99;
	/* Make sure it does not overlap */
	border: none;
	/* Remove borders */
	outline: none;
	/* Remove outline */
	background-color: rgb(117, 117, 117, 0.5);
	/* Set a background color */
	color: white;
	/* Text color */
	cursor: pointer;
	/* Add a mouse pointer on hover */
	padding: 8px;
	/* Some padding */
	border-radius: 6px;
	/* Rounded corners */
	/* font-size: 18px; */
	/* Increase font size */
}

#contactBtn:hover {
	background-color: #555;
	/* Add a dark-grey background on hover */
}

/* Hidden form until enabled */
.hidden-form {
	display: hidden;
	padding-left: 20px;
	padding-top: 0px;
	/* align-items: flex-start; */
	justify-content: flex-start
}

.contact-head {
	color: white;
	text-align: left;

	/* color: var(--wa-color-text-normal); */
}

.contact-section {
	/* We need the padding below so the body is clear of the navbar */
	/* Applies 20px padding to top, right, bottom, and left */
	/* padding: 80px 0px 0px 0px; */
	/* background-color: var(--s-green); */
	/* text-align: center; */

	h1 {
		font-weight: 700;
		text-align: left;
		padding-left: 20px;
	}

	h2 {
		padding-left: 25px;
	}

	#problemrow {
		--bs-gutter-x: 0rem;
	}

	.contact-body {
		text-align: left;
		font-weight: 300;
		padding-left: 25px;
		padding-top: 20px;
	}

	.contact-body2 {
		text-align: left;
		font-weight: 300;
		padding-left: 25px;
		/* padding-top: 20px; */
	}

	#sendusamessage {
		background-color: none;
	}

	.contact-text {
		width: 75%;
		max-width: 1000px;
		justify-content: flex-start;
		color: white;
	}

	.btn-contactus {
		align-items: left;
		justify-content: flex-start;
		align-self: start;
		display: block;
		margin-left: 22px;
		font-size: 0.9em;
	}

	.contactusbuttons {
		padding-left: 20px;
		background-color: none;

		.card {
			border-color: none;
			box-shadow: none;
			align-items: left;
		}
	}
}

/* Stuff from other CSS files added below */

a, abbr, address, applet, article, aside, audio, b, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, main, mark, menu, nav, object, ol, p, pre, q, s, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, tt, u, ul, var, video {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

b, mark, strong {
	font-weight: 600;
	font-style: inherit
}

address, cite, dfn, em, i, q, var {
	font-style: italic;
	font-weight: inherit
}

abbr[title], dfn[title] {
	cursor: help;
	border-bottom: 1px dotted
}

ins {
	border-bottom: 1px solid
}

a, ins, u {
	text-decoration: none
}

del, s {
	text-decoration: line-through
}

code, kbd, pre, samp {
	font-family: monospace
}

/* # Fonts here */

@font-face {
	font-family: brandon_grotesquelight_italic;
	src: url(brandon_light_it-webfont.woff2) format("woff2"), url(brandon_light_it-webfont.woff) format("woff");
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: brandon_grotesquelight;
	src: url(brandon_light-webfont.woff2) format("woff2"), url(brandon_light-webfont.woff) format("woff");
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: brandon_grotesqueMdIt;
	src: url(brandon_med_it-webfont.woff2) format("woff2"), url(brandon_med_it-webfont.woff) format("woff");
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: brandon_grotesquemedium;
	src: url(brandon_med-webfont.woff2) format("woff2"), url(brandon_med-webfont.woff) format("woff");
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: brandon_grotesqueRgIt;
	src: url(brandon_reg_it-webfont.woff2) format("woff2"), url(brandon_reg_it-webfont.woff) format("woff");
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: brandon_grotesqueregular;
	src: url(brandon_reg-webfont.woff2) format("woff2"), url(brandon_reg-webfont.woff) format("woff");
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: fogtwono5regular;
	src: url(fogtwono5-webfont.woff2) format("woff2"), url(fogtwono5-webfont.woff) format("woff");
	font-weight: 400;
	font-style: normal
}

html {
	width: 100%;
	height: 100%
}

body {
	background: #3c4652;
	font: 18px brandon_grotesquelight, sans-serif;
	color: #7c7c7c;
	line-height: 1.5em;
	-webkit-font-smoothing: antialiased;
	font-weight: 400
}

@media screen and (max-width:480px) {
	body {
		font-size: 3.75vw
	}
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

b, mark, strong {
	font-weight: 600;
	font-style: inherit
}

address, cite, dfn, em, i, q, var {
	font-style: italic;
	font-weight: inherit
}

abbr[title], dfn[title] {
	cursor: help;
	border-bottom: 1px dotted
}

ins {
	border-bottom: 1px solid
}

a, ins, u {
	text-decoration: none
}

del, s {
	text-decoration: line-through
}

code, kbd, pre, samp {
	font-family: monospace
}

small {
	font-size: .75em
}

img {
	border: none;
	font-style: italic
}

input, select, textarea {
	font: inherit
}

ol, ul {
	list-style: none
}

body.no-overflow {
	overflow: hidden
}

h1, h2, h3, h4, h5, h6 {
	font: 1em fogtwono5regular, serif;
	font-weight: 400;
	margin-bottom: 1rem;
	color: #3c4652
}

h1 {
	font-size: 5.45em
}

h1.hidden {
	height: 0;
	opacity: 0;
	margin: 0
}

h2 {
	font-size: 3.75em
}

h3 {
	font-size: 3em
}

h4 {
	font-size: 2.25em
}

h5 {
	font-size: 2em
}

h6 {
	font-size: 1.5em
}

p {
	margin-bottom: 1rem
}

strong {
	font-family: brandon_grotesquemedium, sans-serif;
	font-weight: 400
}

em {
	font-style: italic
}

small {
	font-size: .8em
}

del {
	color: #bcbcbc
}

a {
	color: #3c4652;
	text-decoration: none
}


a.large {
	text-transform: uppercase;
	font-family: brandon_grotesquemedium, sans-serif;
	text-decoration: underline;
	text-underline-offset: .5em;
	text-decoration-thickness: 2px;
	letter-spacing: .15em;
	transition: all linear .1s;
	font-size: .85em
}

a.large:hover {
	-webkit-text-decoration-color: #9e8454;
	text-decoration-color: #9e8454;
	text-underline-offset: .65em
}

img {
	max-width: 100%;
	display: block;
	line-height: 1
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0
}

input[type=number] {
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield
}

a, div, header, img, label, span {
	-webkit-tap-highlight-color: transparent
}

.recommendation-modal__container {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	outline: 0 !important
}

.locale-selectors__container {
	padding-top: .5em;
	padding-bottom: 2em
}

.locale-selectors__container .locale-selectors__selector {
	-moz-appearance: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-color: #f4f4f4 !important;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjUiPjxwYXRoIGZpbGw9IiM2NjYiIGQ9Ik0wIDBzMy40IDQuNCAzLjUgNC40QzMuNyA0LjQgNy4xIDAgNy4xIDBIMHoiLz48L3N2Zz4=) !important;
	background-position: right 10px center !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
	border-radius: 2px !important;
	border: 0 !important;
	color: #333 !important;
	cursor: pointer !important;
	display: inline-block !important;
	font-size: 16px !important;
	height: auto !important;
	line-height: 1.375 !important;
	margin: .3em !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: unset !important;
	min-width: unset !important;
	padding: .3em 28px .3em .5em !important;
	text-indent: .01px !important;
	text-overflow: '' !important;
	vertical-align: baseline !important;
	margin: 0 !important
}

.locale-selectors__content {
	justify-content: center;
	width: 100%;
	max-width: 1440px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important
}

@media (max-width:480px) {
	.locale-selectors__content form {
		padding-left: 30px !important;
		padding-right: 30px !important;
		width: 100% !important
	}
}

@media (max-width:480px) {
	#country_code {
		font-size: 14px !important;
		max-width: 90vw !important
	}
}

/* # Button stuff */

.button {
	display: flex;
	height: 3em;
	font: .9em brandon_grotesquelight, sans-serif;
	padding: 0 3em;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	font-weight: 700;
	border: 2px solid #3c4652;
	color: #3c4652;
	cursor: pointer;
	white-space: nowrap;
	letter-spacing: .2em;
	outline: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #3c4652;
	color: #fff;
	width: -moz-fit-content;
	width: fit-content
}

.button:focus, .button:hover {
	background-color: #4b5867;
	border-color: #4b5867;
	color: #fff;
	outline: 0
}

.button.outline {
	background-color: transparent;
	color: #3c4652
}

.button.outline:focus, .button.outline:hover {
	background-color: #3c4652;
	border-color: #3c4652;
	color: #fff;
	outline: 0
}

.button--light {
	background-color: #fff;
	border-color: #fff;
	color: #3c4652
}

.button--light:focus, .button--light:hover {
	background-color: #f7f8f9;
	border-color: #f7f8f9;
	color: #3c4652;
	outline: 0
}

.button--light.outline {
	color: #fff
}

.button--light.outline:focus, .button--light.outline:hover {
	background-color: #fff;
	border-color: #fff;
	color: #3c4652;
	outline: 0
}

.btn-primary {
	background-color: #3c4652;
	border-color: #3c4652;
	color: #fff
}

.btn-primary:hover {
	background-color: #4b5867;
	border-color: #4b5867;
	color: #fff
}

.btn-primary-outline {
	background-color: transparent;
	border-color: #3c4652;
	color: #3c4652
}

.btn-primary-outline:hover {
	background-color: #e9ecef;
	border-color: #3c4652;
	color: #3c4652
}

.btn-secondary {
	background-color: #9e8454;
	border-color: #9e8454;
	color: #fff
}

.btn-secondary:hover {
	background-color: #b49865;
	border-color: #b49865;
	color: #fff
}

.btn-plain {
	border-color: transparent;
	background-color: transparent
}

.btn-plain:hover {
	border-color: transparent;
	background-color: transparent;
	color: #9e8454
}

.btn-wishlist {
	text-transform: none;
	letter-spacing: .1em
}

.btn-wishlist span {
	font-size: .9em
}

.btn-wishlist svg {
	width: 1.5em;
	height: 1.5em;
	margin-right: .5em
}

.btn-wishlist svg .st0 {
	stroke: #3c4652;
	fill: none;
	stroke-width: 3;
	stroke-miterlimit: 10
}

.btn-wishlist:hover .st0 {
	stroke: #9e8454
}

.btn-wishlist.active {
	color: #9e8454
}

.btn-wishlist.active svg .st0 {
	stroke: #9e8454;
	fill: #9e8454
}

.style__compact-top .wrap {
	padding-top: 2em
}

main {
	background-color: #fff
}

/* # slider on the top of index page  */
.style__no-top .wrap {
	padding-top: 0
}


.style__compact-bottom .wrap {
	padding-bottom: 2em
}

@media screen and (max-width:480px) {
	.style__compact-bottom .wrap {
		padding-bottom: 1.5em
	}
}

.style__no-bottom .wrap {
	padding-bottom: 0 !important
}

header {
	background-color: #e9ecef;
	width: 100%;
	position: sticky;
	top: 2em;
	z-index: 15
}


.collections-slider .slider-title h2 {
	text-align: center;
	width: 100%;
	font-size: 3em;
	margin-bottom: 1em
}

.collections-slider .swiper {
	padding-bottom: 2em
}

.collections-slider .swiper .swiper-slide {
	display: flex;
	gap: 1em;
	align-items: center;
	height: auto
}

collections-slider .swiper .swiper-slide.layout--title_above {
	flex-direction: column-reverse
}

.collections-slider .swiper .swiper-slide.layout--title_below {
	flex-direction: column
}

.collections-slider .swiper .swiper-slide h3 {
	font-size: 1.625em;
	text-align: center;
	margin-bottom: 0
}

.product-images .images-wrap .product-image-slide .swiper-wrapper {
	max-width: 100%;
	max-height: 100%;
	width: 100%
}

.product-images .images-wrap .product-image-slide .swiper-wrapper .swiper-slide {
	max-width: 100% !important
}

.product-images .images-wrap .product-image-slide .swiper-wrapper .swiper-slide .image-container {
	width: 100% !important
}

.product-images .images-wrap .product-image-slide .swiper-wrapper .swiper-slide .image-container .slider-image {
	width: 100% !important
}

.product-images .images-wrap .swiper-pagination {
	position: relative;
	bottom: 0
}

.instagram-feed .swiper-slide a {
	display: block;
	height: 0;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
	position: relative
}

.instagram-feed .swiper-slide a img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

.hero-carousel .swiper .swiper-slide {
	position: relative;
	display: flex
}


.hero-carousel .swiper .swiper-slide .content {
	display: flex;
	flex-direction: column;
	padding: 4em;
	z-index: 89
}

.hero-carousel .swiper .swiper-slide .content__header {
	position: relative;
	z-index: 99;
	color: inherit
}

.hero-carousel .swiper .swiper-slide .content__text {
	position: relative;
	z-index: 99;
	font-family: brandon_grotesquelight, sans-serif;
	line-height: 1.5em;
	margin-bottom: 1em
}

.hero-carousel .swiper .swiper-slide .content__buttons {
	display: flex;
	gap: 1em;
	flex-wrap: wrap
}

.hero-carousel .swiper .swiper-slide .content__buttons .button {
	min-width: 200px
}

@media (max-width:768px) {
	.hero-carousel .swiper .swiper-slide .content__buttons .button {
		width: 100%
	}
}

.hero-carousel .swiper .swiper-slide .content.align-desktop-top-left {
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left
}

.hero-carousel .swiper .swiper-slide .content.align-desktop-top-center {
	justify-content: center;
	align-items: flex-start;
	text-align: center
}

.hero-carousel .swiper .swiper-slide .content.align-desktop-top-right {
	justify-content: flex-end;
	align-items: flex-start;
	text-align: right
}

.hero-carousel .swiper .swiper-slide .content.align-desktop-middle-left {
	justify-content: flex-start;
	align-items: center;
	text-align: left
}

.hero-carousel .swiper .swiper-slide .content.align-desktop-middle-center {
	justify-content: center;
	align-items: center;
	text-align: center
}

.hero-carousel .swiper .swiper-slide .content.align-desktop-middle-right {
	justify-content: flex-end;
	align-items: center;
	text-align: right
}

.hero-carousel .swiper .swiper-slide .content.align-desktop-bottom-left {
	justify-content: flex-start;
	align-items: flex-end;
	text-align: left
}

.hero-carousel .swiper .swiper-slide .content.align-desktop-bottom-center {
	justify-content: center;
	align-items: flex-end;
	text-align: center
}

.hero-carousel .swiper .swiper-slide .content.align-desktop-bottom-right {
	justify-content: flex-end;
	align-items: flex-end;
	text-align: right
}

@media (max-width:1023px) {
	.hero-carousel .swiper .swiper-slide .content.align-mobile-top-left {
		justify-content: flex-start;
		align-items: flex-start;
		text-align: left
	}
}

@media (max-width:1023px) {
	.hero-carousel .swiper .swiper-slide .content.align-mobile-top-center {
		justify-content: center;
		align-items: flex-start;
		text-align: left
	}
}

@media (max-width:1023px) {
	.hero-carousel .swiper .swiper-slide .content.align-mobile-top-right {
		justify-content: flex-end;
		align-items: flex-start;
		text-align: left
	}
}

@media (max-width:1023px) {
	.hero-carousel .swiper .swiper-slide .content.align-mobile-middle-left {
		justify-content: flex-start;
		align-items: center;
		text-align: center
	}
}

@media (max-width:1023px) {
	.hero-carousel .swiper .swiper-slide .content.align-mobile-middle-center {
		justify-content: center;
		align-items: center;
		text-align: center
	}
}

@media (max-width:1023px) {
	.hero-carousel .swiper .swiper-slide .content.align-mobile-middle-right {
		justify-content: flex-end;
		align-items: center;
		text-align: center
	}
}

@media (max-width:1023px) {
	.hero-carousel .swiper .swiper-slide .content.align-mobile-bottom-left {
		justify-content: flex-start;
		align-items: flex-end;
		text-align: right
	}
}

@media (max-width:1023px) {
	.hero-carousel .swiper .swiper-slide .content.align-mobile-bottom-center {
		justify-content: center;
		align-items: flex-end;
		text-align: right
	}
}

@media (max-width:1023px) {
	.hero-carousel .swiper .swiper-slide .content.align-mobile-bottom-right {
		justify-content: flex-end;
		align-items: flex-end;
		text-align: right
	}
}

.hero-carousel .swiper .swiper-slide .content.colour-on--light {
	color: #3c4652;
	background-color: rgba(255, 255, 255, .5)
}

.hero-carousel .swiper .swiper-slide .content.colour-on--dark {
	background-color: rgba(0, 0, 0, .5);
	color: #f7f8f9
}

.hero-carousel .swiper .swiper-slide .content.colour-off--light {
	color: #3c4652
}

.hero-carousel .swiper .swiper-slide .content.colour-off--dark {
	color: #f7f8f9
}

.hero-carousel .swiper .swiper-slide .content.light {
	color: #bcbcbc !important
}

.hero-carousel .swiper .swiper-slide .desktop {
	display: block
}

@media (max-width:768px) {
	.hero-carousel .swiper .swiper-slide .desktop {
		display: none
	}
}

.hero-carousel .swiper .swiper-slide .mobile {
	display: none
}

@media (max-width:768px) {
	.hero-carousel .swiper .swiper-slide .mobile {
		display: block
	}
}

.hero-carousel .swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	position: absolute;
	-o-object-fit: cover;
	object-fit: cover
}

.hero-carousel .swiper .swiper-slide video {
	width: 100%;
	height: 100%;
	position: absolute;
	-o-object-fit: cover;
	object-fit: cover
}

.hero-carousel .swiper .swiper-button-prev {
	color: #3c4652
}

.hero-carousel .swiper .swiper-button-prev::after {
	font-size: 2em
}

.hero-carousel .swiper .swiper-button-next {
	color: #3c4652
}

.hero-carousel .swiper .swiper-button-next::after {
	font-size: 2em
}

.hero-carousel .swiper .swiper-pagination-carousel .swiper-pagination-bullet {
	background: #3c4652
}

.hero-carousel .swiper .link-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1
}

.product-usp-image-display {
	position: relative
}

.product-usp-image-display .wrap {
	display: flex;
	width: 100%;
	margin: 0 auto
}

.product-usp-image-display .wrap .container-usp-display {
	display: flex;
	gap: .5em
}

@media (max-width:1070px) {
	.product-usp-image-display .wrap .container-usp-display {
		flex-direction: column-reverse;
		width: 100%
	}
}

.tooltip-open {
	overflow: hidden
}

.tooltip-open .product-images__slider .slick-arrow, .tooltip-open .top-strip, .tooltip-open header {
	z-index: 0
}

.top-strip {
	width: 100%;
	background-color: #f7f8f9;
	/* color: #3c4652; */
	color: black;
	position: sticky;
	top: 0;
	z-index: 9;

	p {
		color: black;
	}
}

.top-strip .wrap {
	height: 2em;
	overflow: hidden
}

.top-strip .wrap ul {
	height: 100%;
	width: 100%;
	min-width: 100%
}

.top-strip .wrap ul li {
	font-size: .8em;
	text-align: center;
	height: 100%;
	padding: .3em 0
}

.top-strip .wrap ul li p {
	margin: 0
}

.product-images__slider.swiper-initialized ul.product-images__container.inactive {
	gap: 0;
	flex-wrap: nowrap
}


.wrap__compact-bottom {
	padding-bottom: 2em
}

.wrap__compact-top {
	padding-top: 2em
}

.wrap__semi-compact-top {
	padding-top: 3.5em
}

.wrap__no-top {
	padding-top: 0
}

.wrap__no-bottom {
	padding-bottom: 0
}

.wrap__large {
	max-width: 1024px
}

.wrap__medium {
	max-width: 768px
}

.wrap__small {
	max-width: 480px
}

.wrap.wrap--products-slider {
	max-width: 1440px;
	overflow-x: hidden;
	padding-right: 0 !important;
	padding-left: 0 !important;
	margin-left: auto;
	margin-right: auto
}