/* === Variables === */
:root {
	--main-bg-light: #f6f1ed;
	--main-bg-light-dt: #282726;
	--main-dark-color: #100d0d;
	--main-dark-color-dt: #050505;
	--logo-medium-grey: #cdcdcd;
	--logo-darker-grey: #777;
	--orange-med: #ea7b0b;
	--white-strong-transp: rgb(246 241 237 / 24%);
	--white-med-transp: rgb(246 241 237 / 42%);
	--white-light-transp: rgb(246 241 237 / 72%);
	--white-verylight-transp: rgb(246 241 237 / 84%);
	--black-med-transp: rgb(0 0 0 / 42%);
	--black-med-transp-dt: rgb(255 255 255 / 42%);
	--black-light-transp: rgb(0 0 0 / 72%);
	--black-light-transp-dt: rgb(255 255 255 / 72%);
	--dt-white: #fafafa;
}


html {
	height: 100%;
	width: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--main-bg-light);
	font-family: 'Open Sans', sans-serif;
}


/* Page loader */

.preloader {
    background: #fff;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
	background: var(--main-dark-color);
}

@media (prefers-color-scheme: light) { /* Light mode */
	
  .preloader {
    background: var(--main-bg-light);
  }
  
}

.preloader img {
	max-width: 120px;
	max-height: 120px;
	filter: invert(68%) sepia(64%) saturate(5000%) hue-rotate(-20deg);
}

@media (prefers-color-scheme: light) {
	
  .preloader img {
    filter: invert(68%) sepia(64%) saturate(3000%) hue-rotate(-20deg);
  }
  
}

.preloader img.img-error {
	filter: none;
	position: relative;
	height: 120px;
}

.preloader img.img-error::before {
	content: '';
	width: 120px;
	aspect-ratio: 1;
	background-color: #100d0d;
	position: absolute;
	left: 0;
	top: 0;
}

.preloader img.img-error::after {
	content: attr(alt);
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--orange-med);
	font-size: 18px;
	font-weight: 500;
}



body.dark-theme {
	background-color: var(--main-bg-light-dt);
	color: var(--dt-white);
}

/* Disable selection with class "noMouseSelect" */
.noMouseSelect {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/**/
::selection {
	background: #ff974b; /* WebKit/Blink Browsers */
	color: #fff;
}
::-moz-selection {
	background: #ff974b; /* Gecko Browsers */
	color: #fff;
}

:not(form *) {
    outline-offset: 4px;
}

.transition-all-100 {
	-webkit-transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
	-ms-transition: all 100ms ease-in-out;
	-o-transition: all 100ms ease-in-out;
	transition: all 100ms ease-in-out;
}

.transition-all-250 {
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	-ms-transition: all 250ms ease-in-out;
	-o-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
}

h1 {
    color: #1d1916;
}

section.center {
	display: flex;
	max-width: 100vw;
	flex-direction: column;
	align-items: center;
}

.scrolled section.center {
	/*margin-top: 174px;*/
}

/* === Custom checkbox === */

/* Customize the label (the container) */
.container {
	position: relative;
	padding-left: 35px;
	line-height: 24px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 24px;
	width: 24px;
	background-color: var(--logo-medium-grey);
	background-color: #dbdbdb;
	border-radius: 2px;
}

.dark-theme .checkmark {
	background-color: #3e3d3b;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
	background-color: #dbdbdb;
}

.dark-theme .container:hover input:not(:checked) ~ .checkmark {
	background-color: #3e3d3b;
}

/* When the checkbox is checked, add a color background */
.container input:checked ~ .checkmark {
	background-color: var(--orange-med);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
	left: 8px;
	top: 4px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}



/**/

.bottom-section {
	background: #fafafa;
	width: 100%;
	display: flex;
	justify-content: center;
	border-top: 1px solid #edecec;
	flex-direction: column;
	align-items: center;
	padding-bottom: 44px;
}

.dark-theme .bottom-section {
	background: #181717;
	border-top: 1px solid #222120;
}

section.bottom-section.fixed {
    margin-top: 72px;
}

/*@media screen and (max-width: 640px) {
	
	section.bottom-section.fixed {
		margin-top: 0;
	}
	
}*/




.banner-container {
	background: url(../img/footer05.webp);
	width: 100%;
	height: 420px;
	background-size: cover;
	background-position-y: center;
	background-position-x: center;
	position: relative;
	box-sizing: border-box;
	margin-bottom: 2px;
}

.dark-theme .banner-container {
	background-image: url(../img/footer04.webp);
}

@media screen and (max-width: 860px) {
	
	.banner-container {
		height: 320px;
		background-position-x: -280px;
		background-image: url(../img/footer04.webp);
	}
	
}

.banner-mask {
	position: absolute;
	color: #f9f7f6;
	background: rgb(246 241 237 / 3%);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: start;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.dark-theme .banner-mask {
	background: rgb(35 35 35 / 8%);
}

@media screen and (max-width: 860px) {
	
	.banner-mask {
		background: rgb(0 0 0 / 44%) !important;
	}
	
}

.banner-mask .banner-content {
	width: 42%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 32px;
	box-sizing: border-box;
}

@media screen and (max-width: 860px) {
	
	.banner-mask .banner-content {
		width: 100%;
	}
	
}

.banner-mask svg {
	width: 36px;
	height: 36px;
}

.banner-mask svg g {
	fill: rgb(101 101 101 / 72%);
}

@media screen and (max-width: 860px) {
	
	.banner-mask svg g {
		fill: rgb(250 250 250 / 72%);
	}
	
}

.banner-mask h5 {
	font-size: 2.3em;
	text-transform: uppercase;
	margin: 16px;
	line-height: 48px;
	color: rgb(74 74 74 / 92%);
}

@media screen and (max-width: 860px) {
	
	.banner-mask h5 {
		font-size: 2em;
		line-height: 40px;
		margin: 8px 16px;
		color: var(--main-bg-light);
	}
	
}

.banner-mask p {
	color: #66645e;
	font-weight: 400;
	font-weight: 500;
	margin: 0;
	line-height: 24px;
}

@media screen and (max-width: 860px) {
	
	.banner-mask p {
		color: #e8e8e8;
	}
	
}

.banner-mask p a {
	color: #555555;
	font-weight: 600;
	text-decoration: none;
	margin-left: 4px;
	background: rgb(74 72 70 / 10%);
	padding: 6px 14px;
	border-radius: 42px;
}

@media screen and (max-width: 860px) {
	
	.banner-mask p a {
		color: #f6f1ed;
		background: rgb(255 255 255 / 12%);
		margin-left: 0;
		line-height: 64px;
	}
	
}

.banner-mask p a:hover {
	color: #cdcdcd;
	color: var(--main-dark-color);
}

@media screen and (max-width: 860px) {
	
	.banner-mask p a:hover {
		color: #cdcdcd;
	}
	
}


/* Footer */

footer {
	background: #100d0d;
	min-height: 172px;
	width: 100vw;
	box-sizing: border-box;
	max-width: 100%;
	color: var(--white-verylight-transp);
	display: flex;
	flex-direction: column;
}

.dark-theme footer {
	background: var(--main-dark-color-dt);
}

footer .line1 {
	flex: 75%;
	/*min-height: 120px;*/
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 32px;
	box-sizing: border-box;
	flex-wrap: wrap;
}

@media screen and (max-width: 720px) {
	
	footer .line1 {
		justify-content: center;
	}
	
}

footer .line2 {
	flex: 25%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgb(0 0 0 / 50%);
	padding: 8px 32px;
	font-size: 0.92em;
	flex-wrap: wrap;
}

@media screen and (max-width: 1040px) {
	
	footer .line2 {
		justify-content: center;
	}
	
}

footer .line1 a {
	color: var(--white-light-transp);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 600;
}

footer .line1 .links a {
    padding: 4px 32px 4px 0;
}

@media screen and (max-width: 720px) {
	
	footer .line1 .links a {
		padding: 8px 16px;
	}
	
}

footer .line1 a:hover {
	color: var(--white-verylight-transp);
}

footer .line2 a {
	color: var(--white-med-transp);
	text-decoration: none;
	padding: 4px 32px 4px 0;
}

@media screen and (max-width: 1040px) {
	
	footer .line2 a {
		padding: 16px 32px;
	}
	
}

@media screen and (max-width: 720px) {
	
	footer .line2 a {
		padding: 8px;
		width: 100%;
		text-align: center;
	}
	
}

footer .back-top {
	height: 8px;
	width: 8px;
	position: relative;
	z-index: 9;
	outline: none;
	background-color: rgb(37 34 34);
	padding: 16px;
	border-radius: 6px;
}

@media screen and (max-width: 720px) {
	
	footer .back-top {	
		margin: 16px;
		margin-right: -16px;
		opacity: 0;
		position: fixed;
		bottom: 8px;
		right: 8px;
	}
	
	footer .back-top.fixed {	
		position: fixed;
		bottom: 8px;
		right: 8px;
		box-shadow: 0 8px 16px rgb(0 0 0 / 12%);
		margin-right: 16px;
		opacity: 1;
	}
	
	.dark-theme footer .back-top.fixed {	
		background-color: #3f3e3d;
	}
	
}

footer .back-top:before {
	content: "";
	position: absolute;
	inset: 30%;
	border-top: 3px solid var(--white-med-transp);
	border-right: 3px solid var(--white-med-transp);
	transition: all 150ms ease-in-out;
}

footer .back-top:before {
	transform: translateY(25%) rotate(-45deg);
}

footer .links {
    min-width: 42%;
    display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;

	opacity: 0.84;
}

@media screen and (max-width: 720px) {
	
	footer .links {
		justify-content: center;
	}
	
}

footer .legal {
    min-width: 40%;
    display: flex;
	flex-wrap: wrap;
}

@media screen and (max-width: 1040px) {
	
	footer .legal {
		justify-content: center;
	}
	
}

footer .copyright {
	color: var(--white-strong-transp);
}

@media screen and (max-width: 1040px) {
	
	footer .copyright {
		margin-top: 16px;
		padding: 8px;
		font-size: 14px;
	}
	
}



/**/

.shopify-buy-frame--product {
    margin-top: -20px;
}