/*  ######################################################################
	- Typography
	-	- Miscellaneous
	-	- Regular font sizes
	-	- Scalable font sizes
###################################################################### */
/*  ######################################################################
	-	- Miscellaneous
###################################################################### */
html {
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
}
body,
button,
input,
select,
textarea {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1.6;
}
body {
	color: var( --wp--preset--color--dark-charcoal );
}
button,
input,
select,
textarea {
	color: inherit;
}
p,
*:where( .p ) {
	margin: 0 0 1.5em;
}
p:where( :last-child ),
*:where( .p:last-child ) {
	margin-bottom: 0;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
b,
strong {
	font-weight: 700;
}
h1, *:where( .h1 ),
h2, *:where( .h2 ),
h3, *:where( .h3 ),
h4, *:where( .h4 ),
h5, *:where( .h5 ),
h6, *:where( .h6 ) {
	color: inherit;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 .75em;
}
h1, *:where( .h1 ),
h2, *:where( .h2 ),
h3, *:where( .h3 ) {
	margin: 1em 0 .5em;
}
h1:where( :first-child ), *:where( .h1:first-child ),
h2:where( :first-child ), *:where( .h2:first-child ),
h3:where( :first-child ), *:where( .h3:first-child ),
h4:where( :first-child ), *:where( .h4:first-child ),
h5:where( :first-child ), *:where( .h5:first-child ),
h6:where( :first-child ), *:where( .h6:first-child ) {
	margin-top: 0;
}
h1:where( :last-child ), *:where( .h1:last-child ),
h2:where( :last-child ), *:where( .h2:last-child ),
h3:where( :last-child ), *:where( .h3:last-child ),
h4:where( :last-child ), *:where( .h4:last-child ),
h5:where( :last-child ), *:where( .h5:last-child ),
h6:where( :last-child ), *:where( .h6:last-child ) {
	margin-bottom: 0;
}


/*  ######################################################################
	-	- Regular font sizes
###################################################################### */
html {
	font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
body,
button,
input,
select,
textarea {
	font-size: 1.6rem;
}
h1, *:where( .h1 ) { font-size: 3.2rem; }
h2, *:where( .h2 ) { font-size: 2.4rem; }
h3, *:where( .h3 ) { font-size: 2rem; }
h4, *:where( .h4 ) { font-size: 1.6rem; }
h5, *:where( .h5 ) { font-size: 1.4rem; }
h6, *:where( .h6 ) { font-size: 1.2rem; }
.has-extra-small-font-size { font-size: 1.2rem; }
.has-small-font-size { font-size: 1.4rem; }
.has-normal-font-size { font-size: 1.6rem; }
.has-medium-font-size { font-size: 2rem; }
.has-large-font-size { font-size: 2.4rem; }
.has-extra-large-font-size { font-size: 3.2rem; }
.has-75-font-size { font-size: 75%; }
.has-125-font-size { font-size: 125%; }
.has-150-font-size { font-size: 150%; }
.has-200-font-size { font-size: 200%; }
figcaption, *:where( .figcaption ) { font-size: 1.2rem; }
@media screen and ( max-width: 90em ) {
	h1, *:where( .h1 ) { font-size: 2.9rem; }
	h2, *:where( .h2 ) { font-size: 2.2rem; }
	h3, *:where( .h3 ) { font-size: 1.9rem; }
	.has-medium-font-size { font-size: 1.9rem; }
	.has-large-font-size { font-size: 2.2rem; }
	.has-extra-large-font-size { font-size: 2.9rem; }
}
@media screen and ( max-width: 45em ) {
	h1, *:where( .h1 ) { font-size: 2.6rem; }
	h2, *:where( .h2 ) { font-size: 2rem; }
	h3, *:where( .h3 ) { font-size: 1.8rem; }
	.has-medium-font-size { font-size: 1.8rem; }
	.has-large-font-size { font-size: 2rem; }
	.has-extra-large-font-size { font-size: 2.6rem; }
}

/*  ######################################################################
	-	- Scalable font sizes
	-> Calculation base 67.5em (1080px)
###################################################################### */
.has-scalable-text,
.has-scalable-text button,
.has-scalable-text input,
.has-scalable-text select,
.has-scalable-text textarea {
	font-size: 1.48148148vw;
}
.has-scalable-text h1, .has-scalable-text .h1 { font-size: 2.96296296vw; }
.has-scalable-text h2, .has-scalable-text .h2 { font-size: 2.22222222vw; }
.has-scalable-text h3, .has-scalable-text .h3 { font-size: 1.85185185vw; }
.has-scalable-text h4, .has-scalable-text .h4 { font-size: 1.48148148vw; }
.has-scalable-text h5, .has-scalable-text .h5 { font-size: 1.29629629vw; }
.has-scalable-text h6, .has-scalable-text .h6 { font-size: 1.11111111vw; }
.has-scalable-text .has-extra-small-font-size { font-size: 1.11111111vw; }
.has-scalable-text .has-small-font-size { font-size: 1.29629629vw; }
.has-scalable-text .has-normal-font-size { font-size: 1.48148148vw; }
.has-scalable-text .has-medium-font-size { font-size: 1.85185185vw; }
.has-scalable-text .has-large-font-size { font-size: 2.22222222vw; }
.has-scalable-text .has-large-font-size { font-size: 2.96296296vw; }
.has-scalable-text figcaption, .has-scalable-text .figcaption { font-size: 1.11111111vw; }




/*  ######################################################################
	- General
	-	- Elements
	-	- Classes
	-	- Site Branding
	-	- Menu
	-	- Menu Trigger
	-	- Menu Item Icons
	-	- Images
###################################################################### */
/*  ######################################################################
	-	- Elements
###################################################################### */
html {
	overflow-x: hidden;
	overflow-y: scroll;
	box-sizing: border-box;
}
*,
*::before,
*::after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  box-sizing: inherit;
}
a {
	color: inherit;
	background-image: linear-gradient( currentColor, currentColor );
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	cursor: pointer;
	text-decoration: none;
	outline: none;
	transition: .25s color ease, .25s background ease;
}

	a:where( :focus, :hover, :active ) {
		background-size: 0 1px;
	}
	figure a,
	.image-link {
		background: none;
	}
	.has-text-color *:where( a, a:focus, a:hover, a:active ) {
		color: inherit;
	}
figure {
	margin: 0;
}
img {
	display: inline-block;
	height: auto;
	width: auto;
	max-width: 100%;
}
img:-moz-loading {
	visibility: hidden;
}
figcaption {
	padding: .5em 1em 1em 1em;
}
figcaption span {
	opacity: .5;
}

/*  ######################################################################
	-	- Classes
###################################################################### */
.full-height,
.has-full-height {
	height: 100%;
}
.flex-grid-wrapper {
	position: relative;
	overflow: hidden;
}
.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.g-column > .unit > .container,
.g-column > .unit > .container > .wrapper {
	height: inherit;
}
@media screen and ( max-width: 112.5em ) {
	.g-xl-row > .unit > .container,
	.g-xl-row > .unit > .container > .wrapper {
		height: auto;
	}
	.g-xl-column > .unit > .container,
	.g-xl-column > .unit > .container > .wrapper {
		height: inherit;
	}
}
@media screen and ( max-width: 90em ) {
	.g-lg-row > .unit > .container,
	.g-lg-row > .unit > .container > .wrapper {
		height: auto;
	}
	.g-lg-column > .unit > .container,
	.g-lg-column > .unit > .container > .wrapper {
		height: inherit;
	}
}
@media screen and ( max-width: 67.5em ) {
	.g-md-row > .unit > .container,
	.g-md-row > .unit > .container > .wrapper {
		height: auto;
	}
	.g-md-column > .unit > .container,
	.g-md-column > .unit > .container > .wrapper {
		height: inherit;
	}
}
@media screen and ( max-width: 45em ) {
	.g-sm-row > .unit > .container,
	.g-sm-row > .unit > .container > .wrapper {
		height: auto;
	}
	.g-sm-column > .unit > .container,
	.g-sm-column > .unit > .container > .wrapper {
		height: inherit;
	}
}
@media screen and ( max-width: 22.5em ) {
	.g-xs-row > .unit > .container,
	.g-xs-row > .unit > .container > .wrapper {
		height: auto;
	}
	.g-xs-column > .unit > .container,
	.g-xs-column > .unit > .container > .wrapper {
		height: inherit;
	}
}

/*  ######################################################################
	-	- Trigger
###################################################################### */
.fsb-trigger__color {
	background-color: #373737;
}
	.fsb-trigger:focus .fsb-trigger__color,
	.fsb-trigger:hover .fsb-trigger__color,
	.fsb-trigger:active .fsb-trigger__color {
		background-color: #000;
	}





/*  ######################################################################
	-	- Images
###################################################################### */
.image-frame figure {
	position: relative;
	margin: 0;
	tab-size: 1;
}
.image {
	display: block;
	width: 100%;
	height: auto;
}
.image-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
}
.image-content-container,
.image-content-wrapper {
	width: 100%;
	height: 100%;
}


/*  ######################################################################
	- Form
###################################################################### */
:where( body:not( .wp-admin ) ) :is( button, input, select, textarea ) {
	width: 100%;
	max-width: 100%;
	outline: none;
}
	[type="checkbox"],
	[type="radio"] {
		width: initial;
	}
label {
	cursor: pointer;
}
.form-field-label label {
	position: relative;
	background-color: #efefef;
	display: block;
	padding: .72rem 2rem;
	transition: all .25s ease;
}
	.form-field-label label:hover {
		background-color: #f4f4f4;
	}
.form-field-label .required-mark::before {
	content: ' ';
}
.form-field [type="button"],
.form-field [type="reset"],
.form-field [type="submit"],
.form-field button {
	background-color: #808080;
	color: #fff;
	cursor: pointer;
	outline: none;
	border: none;
	padding: .72rem 2rem;
	transition: all .25s ease;
}
	.form-field [type="button"]:hover,
	.form-field [type="reset"]:hover,
	.form-field [type="submit"]:hover,
	.form-field button:hover {
		background-color: #404040;
		color: #fff;
	}
	.form-field [type="button"][disabled],
	.form-field [type="reset"][disabled],
	.form-field [type="submit"][disabled],
	.form-field button[disabled] {
		background-color: #808080;
		color: #fff;
	}
.form-field [type="date"],
.form-field [type="datetime-local"],
.form-field [type="email"],
.form-field [type="month"],
.form-field [type="number"],
.form-field [type="password"],
.form-field [type="search"],
.form-field [type="tel"],
.form-field [type="text"],
.form-field [type="time"],
.form-field [type="url"],
.form-field [type="week"] {
	background-color: #fafafa;
	color: #373737;
	border: 1px solid #c0c0c0;
	padding: calc( .72rem - 1px ) 2rem;
	transition: all .25s ease;
}
	.form-field [type="date"]:hover,
	.form-field [type="datetime-local"]:hover,
	.form-field [type="email"]:hover,
	.form-field [type="month"]:hover,
	.form-field [type="number"]:hover,
	.form-field [type="password"]:hover,
	.form-field [type="search"]:hover,
	.form-field [type="tel"]:hover,
	.form-field [type="text"]:hover,
	.form-field [type="time"]:hover,
	.form-field [type="url"]:hover,
	.form-field [type="week"]:hover {
		background-color: #fff;
		color: #373737;
	}





/*---------------------------------------------------------------------------*\
	#Page - main structure
\*---------------------------------------------------------------------------*/

.page {
	position: relative;
	z-index: 10;
}


.site-header {
	position: relative;
	z-index: 1000;
}


.main {
	position: relative;
	min-height: 100vh;
	z-index: 10;
}

.main_wrapper {
	position: relative;
	display: grid;
	grid-template-columns: 100%;
	gap: 8rem;
}

.main_wrapper > :where( * ) {
	grid-column: 1 / -1;
	width: 100%;
}


.site-footer {
	position: relative;
	z-index: 1;
}




/*  ######################################################################
	- Background image
###################################################################### */
#page-background {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 0;
}
#background-image {
	position: absolute;
	display: block;
	height: auto;
	min-height: 100%;
	width: auto;
	min-width: 100%;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}


/*  ######################################################################
	- WooCommerce
	-	- Mini cart
###################################################################### */
#header .mini-cart {
	width: 24rem;
}
#header .mini-cart-menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#header .mini-cart-link {
	display: block;
	color: inherit;
	line-height: 2rem;
	padding: 2rem;
}
#header .mini-cart-link .amount {
	margin-right: .25em;
}
#header .mini-cart-link .count {
	opacity: .5;
	font-size: .8em;
}
#header .mini-cart-content {
	right: 0;
    transition: background-color .25s ease, transform .01s ease .25s;
}
	#header .mini-cart-menu.is-active .mini-cart-content {
		background-color: rgba( 0, 0, 0, .5 );
		transition: background-color .25s ease, transform .01s ease 0s;
		transform: translateX( -100% );
	}
#header .mini-cart-content-container {
	position: absolute;
	background: #fff;
	color: inherit;
	overflow: hidden auto;
	height: 100%;
	width: 36rem;
	top: 0;
	right: 0;
	padding: 4rem;
	transition: transform .25s ease;
    transform: translateX( 100% );
}
	#header .mini-cart-menu.is-active .mini-cart-content-container {
		transform: translateX( 0 );
	}