/*---------------------------------------------------------------------------*\
	#Custom-Properties
\*---------------------------------------------------------------------------*/

:root {
	--gap--lg: 4.8rem;
	/* Same as a paragraph margin of 1.5em with default font size of 1.6rem. */
	--gap: 2.4rem;
	--gap--sm: 1.2rem;
	--gap--xs: .6rem;
	--font-family: 'Open Sans', sans-serif;
	--font-size: 1.6rem;
	--line-height: 1.6;
	--border-color: #d6d6d6;
	--border-width: max( 1px, .2rem );
	--section--background-color--odd: #fff;
	--section--background-color--even: #f5f5f5;
	--color: #404040;
	--color--inactive: #808080;
	--color--disabled: #c0c0c0;
	--color--primary: #69bad1;
}





/*---------------------------------------------------------------------------*\
	#Section
	- .container is deprecated and should be replaced with .section_container
	- .content-container is deprecated and should be replaced with
	  .section_wrapper
	- Replace width and padding with properties
\*---------------------------------------------------------------------------*/

.section {
	padding: 6rem;
}
.section:nth-of-type( odd ) {
	background-color: var( --section--background-color--odd );
}
.section:nth-of-type( even ) {
	background-color: var( --section--background-color--even );
}

.container,
.section_container {
	position: relative;
	display: block;
	width: 100%;
	max-width: 128rem;
	margin: 0 auto;
}

.content-container,
.section_wrapper {
	max-width: 96rem;
	margin-right: auto;
	margin-left: auto;
}

.content-container > *,
.section_wrapper > * {
	max-width: 64rem;
	margin-right: auto;
	margin-left: auto;
}


@media screen and ( max-width: 480px ) {
	.section {
		padding: 3rem;
	}
}





/*---------------------------------------------------------------------------*\
	#Carwatch-Box
	- A background color must be set for nested corner support.
\*---------------------------------------------------------------------------*/

.carwatch-box {
	--box--height: 100%;
	--box--width: 100%;
	--box--top: 0;
	--box--right: 0;
	--box--bottom: 0;
	--box--left: 0;
	--box--border-color: var( --border-color );
	--box--border-width: var( --border-width );
	--box--corner--width: var( --gap );
	/* Invert section background colors. */
	--box--background-color--odd: var( --section--background-color--even );
	--box--background-color--even: var( --section--background-color--odd );
}

	/* Background Color */
	.carwatch-box:where( .carwatch-box--without--background-color ) {
		/* Undo section background colors. */
		--box--background-color--odd: var( --section--background-color--odd );
		--box--background-color--even: var( --section--background-color--even );
	}

	:where( .section:nth-of-type( odd ) ) .carwatch-box {
		--box--background-color: var( --box--background-color--odd );
    }

	:where( .section:nth-of-type( even ) ) .carwatch-box {
		--box--background-color: var( --box--background-color--even );
    }

	/* Border */
	.carwatch-box--without--border {
		--box--border-color: transparent;
		--box--border-width: 0;
	}

	/* Corner Width */
	.carwatch-box--corner-width--sm {
		--box--corner--width: var( --gap--sm );
	}

.carwatch-box_container {
	position: relative;
	border-width: var( --box--border-width );
}

.carwatch-box_wrapper {
	/* Invert section background colors for nested elements. */
	--section--background-color--odd: var( --box--background-color--odd );
	--section--background-color--even: var( --box--background-color--even );
}


/* Background */
.carwatch-box__background {
	position: absolute;
	background-color: var( --box--background-color );
	height: var( --box--height );
	width: var( --box--width );
	top: var( --box--top );
	right: var( --box--right );
	bottom: var( --box--bottom );
	left: var( --box--left );
	border: var( --box--border-width ) solid var( --box--border-color );
	z-index: -1;
}


/* Corner */
.carwatch-box__corner {
	/* Calculate after final box properties are set. Add 50% border width for the diagonal. */
	--box--corner--with-border--width: calc( var( --box--corner--width ) + ( var( --box--border-width ) * 1.5 ) );
	
	position: absolute;
	width: 0;
	height: 0;
	z-index: 100;
}

	.carwatch-box__corner::before,
	.carwatch-box__corner::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent;
	}

	/* Top-Right */
	.carwatch-box__corner--top-right,
	.carwatch-box__corner--top-right::before,
	.carwatch-box__corner--top-right::after {
		top: var( --box--top );
		right: var( --box--right );
	}

    .carwatch-box__corner--top-right::before {
        border-right-color: var( --box--border-color );
        border-width: 0 var( --box--corner--with-border--width ) var( --box--corner--with-border--width ) 0;
	}

	.carwatch-box__corner--top-right::after {
        border-width: 0 var( --box--corner--width ) var( --box--corner--width ) 0;
	}

    :where( .section:nth-of-type( odd ) ) .carwatch-box__corner--top-right::after {
        border-right-color: var( --section--background-color--odd );
    }

    :where( .section:nth-of-type( even ) ) .carwatch-box__corner--top-right::after {
        border-right-color: var( --section--background-color--even );
    }
	
	/* Bottom-Left */
	.carwatch-box__corner--bottom-left,
	.carwatch-box__corner--bottom-left::before,
	.carwatch-box__corner--bottom-left::after {
		bottom: var( --box--bottom );
		left: var( --box--left );
	}

    .carwatch-box__corner--bottom-left::before {
        border-left-color: var( --box--border-color );
        border-width: var( --box--corner--with-border--width ) 0 0 var( --box--corner--with-border--width );
    }

	.carwatch-box__corner--bottom-left::after {
        border-width: var( --box--corner--width ) 0 0 var( --box--corner--width );
	}

    :where( .section:nth-of-type( odd ) ) .carwatch-box__corner--bottom-left::after {
        border-left-color: var( --section--background-color--odd );
    }

    :where( .section:nth-of-type( even ) ) .carwatch-box__corner--bottom-left::after {
        border-left-color: var( --section--background-color--even );
    }





/*---------------------------------------------------------------------------*\
	#Modern-Select
\*---------------------------------------------------------------------------*/

.cw-modern-select {}

.cw-modern-select_wrapper {
	position: relative;
}


/* Selection */
.cw-modern-select__selection {
	position: relative;
}

.cw-modern-select__trigger {
	position: relative;
	background: none;
	color: var( --color--inactive );
	cursor: pointer;
	display: block;
	font-size: var( --font-size );
	font-weight: inherit;
	line-height: var( --line-height );
	text-align: left;
	width: 100%;
	margin: 0;
	border-color: transparent;
	border-style: solid;
	border-width: var( --border-width );
	border-bottom-color: var( --border-color );
	padding: calc( var( --gap ) / 4 ) calc( 1em + var( --gap ) / 2 ) calc( var( --gap ) / 4 ) calc( var( --gap ) / 2 );
	outline: none;
	box-shadow: none;
	
	transition: color .25s;
}

	.cw-modern-select__trigger:where( :active, :focus, :hover ) {
		color: var( --color );
	}


.cw-modern-select__placeholder {
	opacity: .75;
}

	.cw-modern-select__placeholder--hidden {
		display: none;
	}


.cw-modern-select__selected-options--hidden {
	display: none;
}


.cw-modern-select__trigger-icon {
	position: absolute;
	color: inherit;
	display: block;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: center;
	width: calc( 1em + var( --gap ) / 2 );
	top: 0;
	right: 0;
	padding: calc( var( --gap ) / 4 );
}


/* Options */
.cw-modern-select__options {
	--options--padding: calc( var( --border-width ) * 2 );
	
	position: absolute;
	display: none;
	background-color: rgba( 96, 167, 184, .5 );
	width: calc( 100% + var( --options--padding ) * 2 );
	top: calc( var( --options--padding ) * -1 );
	left: calc( var( --options--padding ) * -1 );
	padding: var( --options--padding );
	z-index: 1000;
}

	.cw-modern-select__options:where( .cw-modern-select__options--opened ) {
		display: block;
	}

.cw-modern-select__options_container {
	position: relative;
	background-color: #fff;
	max-height: 50vh;
	min-height: calc( var( --font-size ) * var( --line-height ) + ( var( --border-width ) + calc( var( --gap ) / 4 ) ) * 2 );
	overflow-y: auto;
}

.cw-modern-select__options_wrapper {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
}


/* Option */
.cw-modern-select__option {
	position: relative;
	order: 1;
	z-index: 1;
}

	.cw-modern-select__option--selected {
		order: 0;
	}

	.cw-modern-select__option--hidden {
		display: none;
	}


.cw-modern-select__option label {
	word-break: break-all;
}


/* Header */
.cw-modern-select__options-header {
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 100;
}


/* Search */
.cw-modern-select__search-label {
	font-size: smaller;
}

.cw-modern-select__search-label_container {
	background-color: var( --section--background-color--even );
	color: inherit;
	padding: 0 calc( var( --border-width ) + var( --gap ) / 2 );
	border-bottom: var( --border-width ) solid var( --border-color );
}


.cw-modern-select__search-input[type="text"] {
	line-height: inherit;
	border-width: var( --border-width );
	border-bottom-style: solid;
	border-bottom-color: var( --border-color );
	padding: calc( var( --gap ) / 4 ) calc( var( --gap ) / 2 );
}


/* Results */
.cw-modern-select__results-count {
	font-size: smaller;
}

.cw-modern-select__results-count_container {
	background-color: var( --section--background-color--even );
	color: inherit;
	padding: 0 calc( var( --border-width ) + var( --gap ) / 2 );
	border-bottom: var( --border-width ) solid var( --border-color );
}

	.cw-modern-select__results-count--current::after {
		content: " " attr( data-results-count--current ) " ";
	}

	.cw-modern-select__results-count--max::after {
		content: " " attr( data-results-count--max ) " ";
	}





/*---------------------------------------------------------------------------*\
	#Spinner
\*---------------------------------------------------------------------------*/

.cw-spinner {
	position: fixed;
	background-color: rgba( 255, 255, 255, .8 );
	opacity: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

	.cw-spinner--active {
		opacity: 1;
		z-index: 10000000;
	}

.cw-spinner_container {
	position: absolute;
	height: 8rem;
	width: 8rem;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}


.cw-spinner__element {
	position: absolute;
	height: 10%;
	width: 10%;
	top: 0;
	left: 45%;
	transform-origin: 50% 500%;
}

.cw-spinner__element--1 {
	transform: rotate( 0deg );
	animation-delay: 0s;
}

.cw-spinner__element--2 {
	transform: rotate( 22.5deg );
	animation-delay: calc( 0.0625 * 1s );
}

.cw-spinner__element--3 {
	transform: rotate( 45deg );
	animation-delay: calc( 0.125 * 1s );
}

.cw-spinner__element--4 {
	transform: rotate( 67.5deg );
	animation-delay: calc( 0.1875 * 1s );
}

.cw-spinner__element--5 {
	transform: rotate( 90deg );
	animation-delay: calc( 0.25 * 1s );
}

.cw-spinner__element--6 {
	transform: rotate( 112.5deg );
	animation-delay: calc( 0.3125 * 1s );
}

.cw-spinner__element--7 {
	transform: rotate( 135deg );
	animation-delay: calc( 0.375 * 1s );
}

.cw-spinner__element--8 {
	transform: rotate( 157.5deg );
	animation-delay: calc( 0.4375 * 1s );
}

.cw-spinner__element--9 {
	transform: rotate( 180deg );
	animation-delay: calc( 0.5 * 1s );
}

.cw-spinner__element--10 {
	transform: rotate( 202.5deg );
	animation-delay: calc( 0.5625 * 1s );
}

.cw-spinner__element--11 {
	transform: rotate( 225deg );
	animation-delay: calc( 0.625 * 1s );
}

.cw-spinner__element--12 {
	transform: rotate( 247.5deg );
	animation-delay: calc( 0.6875 * 1s );
}

.cw-spinner__element--13 {
	transform: rotate( 270deg );
	animation-delay: calc( 0.75 * 1s );
}

.cw-spinner__element--14 {
	transform: rotate( 292.5deg );
	animation-delay: calc( 0.8125 * 1s );
}

.cw-spinner__element--15 {
	transform: rotate( 315deg );
	animation-delay: calc( 0.875 * 1s );
}

.cw-spinner__element--16 {
	transform: rotate( 337.5deg );
	animation-delay: calc( 0.9375 * 1s );
}

.cw-spinner__element::after {
	content: '';
	position: absolute;
	background-color: #808080;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 100%;
	animation: none;
	transform: scale( .5 );
}

	:where( .cw-spinner--active ) .cw-spinner__element::after {
		animation: cw-spinner 1s step-start infinite;
		animation-delay: inherit;
	}


@keyframes cw-spinner {
	
	0% {
		background-color: #1a1a1a;
		transform: scale( 1 );
	}
	
	6.25% {
		background-color: #262626;
		transform: scale( .9375 );
	}
	
	12.5% {
		background-color: #333333;
		transform: scale( .875 );
	}
	
	18.75% {
		background-color: #404040;
		transform: scale( .8125 );
	}
	
	25% {
		background-color: #4d4d4d;
		transform: scale( .75 );
	}
	
	31.25% {
		background-color: #595959;
		transform: scale( .6875 );
	}
	
	37.5% {
		background-color: #606060;
		transform: scale( .625 );
	}
	
	43.75% {
		background-color: #737373;
		transform: scale( .5625 );
	}
	
	50% {
		background-color: #808080;
		transform: scale( .5 );
	}
	
	100% {
		background-color: #808080;
		transform: scale( .5 );
	}
	
}





/*  ######################################################################
	- Typography
	-	- Headings
###################################################################### */
html {
	font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
	-webkit-text-size-adjust: none;
}
body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.6;
}
p,
.p {
	margin: 0 0 1.5em;
}
p:last-child,
.p:last-child {
	margin-bottom: 0;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
b,
strong {
	font-weight: 700;
}

/*  ######################################################################
	-	- Headings
###################################################################### */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #404040;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 .75em;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-top: 0;
}
h1,
h2 {
	margin: 1em 0 .5em;
}
h1 { font-size: 3.2rem; font-weight: 300; }
h2 { font-size: 2.4rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.6rem; }
h5 { font-size: 1.4rem; font-weight: 700; }
h6 { font-size: 1.2rem; font-weight: 700; }

/* Line */
h1 {
	position: relative;
	padding-top: 1.4rem;
}
h1::before {
	content: '';
	position: absolute;
	background-color: #404040;
	width: 9.6rem;
	height: .2rem;
	top: 0;
	left: 0;
}
@media screen and (max-width: 480px) {
	h1 { font-size: 2.8rem; }
}


/*  ######################################################################
	- General
	-	- Elements
	-	- Menu
###################################################################### */
/*  ######################################################################
	-	- 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: #5695a4;
	text-decoration: none;
	outline: none;
	-webkit-transition: .25s color ease;
	-moz-transition: .25s color ease;
	transition: .25s color ease;
}
a:focus,
a:hover {
	color: #808080;
}


.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;
}

/*  ######################################################################
	-	- Menu
###################################################################### */
.menu-title {
	font-weight: 600;
}

.menu,
.sub-menu,
.sub-menu-section {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu-item {
	line-height: 2;
}


/*  ######################################################################
	- Formelements
	-	- Input
	-	- Select
	-	- Label
###################################################################### */
::-moz-placeholder {
	opacity: 1;
}
/*  ######################################################################
	-	- Label
###################################################################### */
/*  ######################################################################
	-	- Input
	-	-	- Text
	-	-	- Checkbox / Radio
###################################################################### */
.input-wrapper {
	position: relative;
}

/*  ######################################################################
	-	-	- Text
###################################################################### */
input[type="text"] {
	position: relative;
	background-color: transparent;
	color: #404040;
	line-height: 3.2rem;
	width: 100%;
	border: 2px solid transparent;
	border-bottom-color: #d6d6d6;
	outline: none;
	padding: 8px 16px; padding: .8rem 1.6rem;
	padding: 14px 16px 2px; padding: 1.4rem 1.6rem .2rem;
	-webkit-transition: color .25s ease;
	-moz-transition: color .25s ease;
	transition: color .25s ease;
}
	input[type="text"]:hover,
	input[type="text"]:focus,
	input[type="text"]:active {
		color: #000;
	}
	input[type="text"]:disabled {
		color: #808080
	}

/*  ######################################################################
	-	-	- Checkbox / Radio
###################################################################### */
.input-checkbox-wrapper,
.input-radio-wrapper {
	position: relative;
	overflow: hidden;
}
input[type="checkbox"],
input[type="radio"] {
	position: absolute;
	top: -999px;
	left: -999px;
	visibility: hidden;
	z-index: -1;
	
}
input[type="checkbox"] + label,
input[type="radio"] + label {
	position: relative;
	cursor: pointer;
	display: block;
	line-height: 2.4rem;
	min-height: 3.6rem;
	width: 100%;
	padding: .6rem 2.4rem .6rem 4.4rem;
}
input[type="checkbox"] + label:hover,
input[type="checkbox"] + label:focus,
input[type="radio"] + label:hover,
input[type="radio"] + label:focus {
	background-color: rgba(0, 0, 0, .05);
}
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
	background-color: rgba(96, 167, 184, .2);
}
input[type="checkbox"]:checked + label:hover,
input[type="checkbox"]:checked + label:focus,
input[type="radio"]:checked + label:focus,
input[type="radio"]:checked + label:hover {
	background-color: rgba(96, 167, 184, .4);
}
/* Icons */
input[type="checkbox"] + label::before,
input[type="checkbox"] + label::after,
input[type="radio"] + label::before,
input[type="radio"] + label::after {
	position: absolute;
	display: block;
	font-family: 'Carwatch' !important;
	font-size: 2rem;
	line-height: 3.6rem;
	text-align: center;
	height: 3.6rem;
	width: 2rem;
	top: 0;
	left: 1.2rem;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
input[type="checkbox"] + label::before {
	content: '\e907';
}
	input[type="checkbox"]:checked + label::before {
		display: none;
	}
input[type="checkbox"] + label::after {
	content: '\e905';
	display: none;
}
	input[type="checkbox"]:checked + label::after {
		display: block;
	}
input[type="radio"] + label::before {
	content: '\e906';
}
	input[type="radio"]:checked + label::before {
		display: none;
	}
input[type="radio"] + label::after {
	content: '\e904';
	display: none;
}
	input[type="radio"]:checked + label::after {
		display: block;
	}

/*  ######################################################################
	-	-	- Label
	-	-	-	- Loader
###################################################################### */
input[type="text"] + label,
input[type="text"].input.is-focus + label {
	position: absolute;
	color: #404040;
	cursor: text;
	font-size: 12px; font-size: 1.2rem;
	line-height: 16rem; line-height: 1.6rem;
	max-width: 100%;
	top: 0;
	left: 0;
	-webkit-transition:  all .25s ease;
	-moz-transition:  all .25s ease;
	transition:  all .25s ease;
	transform: translate3d(10px, 0, 0); transform: translate3d(1rem, 0, 0);
	z-index: 10;
}
	input[type="text"]:placeholder-shown + label {
		color: #808080;
		font-size: 16px; font-size: 1.6rem;
		line-height: 32rem; line-height: 3.2rem;
		transform: translate3d(18px, 16px, 0); transform: translate3d(1.8rem, 1.6rem, 0);
	}
	input[type="text"]:focus + label,
	input[type="text"]:hover + label,
	input[type="text"]:active + label,
	input[type="text"] + label:hover {
		color: #000;
	}
	input[type="text"]:disabled + label {
		color: #c0c0c0;
		cursor: default;
	}
label .label-text {
	display: block;
	max-width: 100%;
}
/*  ######################################################################
	-	-	-	- loader
	-	-	-	-	- @-webkit-keyframes
	-	-	-	-	- @-moz-keyframes
	-	-	-	-	- @-o-keyframes
	-	-	-	-	- @keyframes
###################################################################### */
.has-label-loader .label-loader,
.has-label-loader.is-loading > * {
	display: none;
}
	.has-label-loader.is-loading > .label-loader {
		display: block;
	}
.has-label-loader.is-loading .label-loader .l1 {
	-webkit-animation: label-loader-l1 1s step-end infinite;
	-moz-animation: label-loader-l1 1s step-end infinite;
	-o-animation: label-loader-l1 1s step-end infinite;
	animation: label-loader-l1 1s step-end infinite;
}
.has-label-loader.is-loading .label-loader .l2 {
	-webkit-animation: label-loader-l2 1s step-end infinite;
	-moz-animation: label-loader-l2 1s step-end infinite;
	-o-animation: label-loader-l2 1s step-end infinite;
	animation: label-loader-l2 1s step-end infinite;
}
.has-label-loader.is-loading .label-loader .l3 {
	-webkit-animation: label-loader-l3 1s step-end infinite;
	-moz-animation: label-loader-l3 1s step-end infinite;
	-o-animation: label-loader-l3 1s step-end infinite;
	animation: label-loader-l3 1s step-end infinite;
}
/*  ######################################################################
	-	-	-	-	- @-webkit-keyframes
###################################################################### */
@-webkit-keyframes label-loader-l1 {
	0% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes label-loader-l2 {
	0% { opacity: 0; }
	25% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes label-loader-l3 {
	0% { opacity: 0; }
	50% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
/*  ######################################################################
	-	-	-	-	- @-moz-keyframes
###################################################################### */
@-moz-keyframes label-loader-l1 {
	0% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes label-loader-l2 {
	0% { opacity: 0; }
	25% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes label-loader-l3 {
	0% { opacity: 0; }
	50% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
/*  ######################################################################
	-	-	-	-	- @-o-keyframes
###################################################################### */
@-o-keyframes label-loader-l1 {
	0% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
@-o-keyframes label-loader-l2 {
	0% { opacity: 0; }
	25% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
@-o-keyframes label-loader-l3 {
	0% { opacity: 0; }
	50% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
/*  ######################################################################
	-	-	-	-	- @keyframes
###################################################################### */
@keyframes label-loader-l1 {
	0% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes label-loader-l2 {
	0% { opacity: 0; }
	25% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes label-loader-l3 {
	0% { opacity: 0; }
	50% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

/*  ######################################################################
	-	- Select
###################################################################### */
html.has-modal {
	overscroll-behavior-y: none;
}
.has-modal body {
}
.select-modal {
	position: fixed;
	display: none;
	background-color: rgba(255, 255, 255, .5);
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	z-index: 1000;
}
	.select-modal.is-active {
		display: block;
	}
.select-modal-container {
	position: absolute;
	background-color: rgba(96, 167, 184, .5);
	width: 50%;
	height: 50%;
	top: 25%;
	left: 25%;
	padding: .4rem;
}
.select-modal-wrapper {
	position: relative;
	background-color: #fff;
	height: 100%;
	width: 100%;
	padding: 2.4rem;
}
.select-modal-content {
	position: relative;
	overflow: hidden;
	height: 100%;
}

.select-filter-container {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 52px; height: 5.2rem;
	top: 0;
	left: 0;
	z-index: 100;
}
.select-options-container {
	position: relative;
	height: 100%;
	padding-top: 76px;  padding-top: 7.6rem;
}
.select-options-wrapper {
	height: 100%;
	overflow: hidden scroll;
	overscroll-behavior: contain;
		will-change: transform;
}
	.select-modal.is-active .select-options-wrapper {
	}
.select-options .select-option-container.is-hidden {
	display: none;
}
/* Override fields */
input[type="text"].select-selection,
input[type="text"].select-selection + label {
	cursor: pointer;
}
	input[type="text"].select-selection:disabled,
	input[type="text"].select-selection:disabled + label {
		cursor: default;
	}


/*  ######################################################################
	- Header
	-	- Logo
	-	- Language Menu
	-	- Shop Menu
	-	- Main Menu
###################################################################### */
#header {
	position: absolute;
	position: -webkit-sticky;
	position: sticky;
	color: #fff;
	height: 0;
	width: 100%;
	top: 0;
	z-index: 1000;
	-webkit-transition: top .25s ease;
	-moz-transition: top .25s ease;
	transition: top .25s ease;
}
#header.hide-header {
	top: -13.2rem; /* hight of menu */
}

#header .header-logo {
	position: relative;
	z-index: 1000;
}
#header .header-top {
	position: relative;
	background-color: #66b1c3;
	height: 7.6rem;
	z-index: 100;
}
#header .header-top .header-top-container {
	height: 100%;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
}
#header .header-top .header-top-wrapper {
	height: 100%;
}
#header .header-bottom {
	position: relative;
	background-color: #60a7b8;
	height: 5.6rem;
	z-index: 1;
}
	#header .header-bottom:after {
		content: '';
		position: absolute;
		background-color: #fff;
		width: 100%;
		height: 2px;
		top: 50%;
		left: 0;
		opacity: .1;
		margin-top: -1px;
		z-index: 0;
	}
#header .header-container {
	position: relative;
	width: 100%;
	padding: 0 6rem;
}
#header .header-wrapper {
	position: relative;
	width: 100%;
	max-width: 128rem;
	margin: 0 auto;
}

@media screen and (max-width: 480px) {
	#header .header-container {
		padding-right: 3rem;
		padding-left: 3rem;
	}
}
@media screen and (max-width: 320px) {
	#header .header-container {
		padding-right: .6rem;
		padding-left: .6rem;
	}
}


/*  ######################################################################
	-	- Logo
###################################################################### */
#header .site-logo-container {
	position: absolute;
	width: 21.6rem;
	height: 13.2rem;
	padding-right: 7.6rem;
}
#header .site-logo-wrapper {
	position: relative;
	height: 100%;
}

#header .site-logo {
	position: absolute;
	display: block;
	width: 100%;
	top: 50%;
	left: 0;
	z-index: 10;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#header .site-logo figure {
	margin: 0;
	padding: 0;	
}
#header .site-logo img {
	display: block;
	margin: 0;
	padding: 0;	
}

#header .site-logo-arrow {
	position: absolute;
	width: 7.6rem;
	height: 100%;
	top: 0;
	left: 100%;
	overflow: hidden;
	z-index: 1;
}
	#header .site-logo-arrow::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 7.6rem 0 7.6rem 7.6rem;
		border-color: transparent transparent transparent #6bbacd;
	}

#header .site-logo-bg {
	position: absolute;
	background-color: #6bbacd;
	height: 100%;
	width: 9999px;
	width: 100vw;
	top: 0;
	right: 0;
	z-index: 1;
}


@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 960px) {
	#header .site-logo-container {
		height: 7.6rem;
		width: 12.5rem;
		padding-right: 4.4rem;
	}
	#header .site-logo-arrow {
		width: 4.4rem;
	}
		#header .site-logo-arrow::after {
			width: 4.4rem;
			height: 8.8rem;
			border-width: 4.4rem 0 4.4rem 4.4rem;
		}
}
@media screen and (max-width: 480px) {
	#header .logo-container {
		padding-left: 3rem;
	}
}
@media screen and (max-width: 320px) {
	#header .logo-container {
		padding-left: .6rem;
	}
}

/*  ######################################################################
	-	- Language Menu
###################################################################### */
#language-menu {
	position: relative;
	border: 1px solid rgba(255, 255, 255, .33);
}
	#language-menu::before,
	#language-menu::after {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		top: -1px;
		right: -1px;
		border-style: solid;
		border-color: transparent;
	}
	#language-menu::before {
		border-width: 0 13px 13px 0;
		border-right-color: rgba(255, 255, 255, .33);
		z-index: 1;
	}
	#language-menu::after {
		border-width: 0 12px 12px 0;
		border-right-color: #66b1c3;
		z-index: 2;
	}
#language-menu .menu-item {
	position: relative;
	font-size: 1.4rem;
	line-height: 3.6rem;
	padding: 0 .6rem;
}
#language-menu > .menu-item::after {
	content: '\e900';
	color: rgba(255, 255, 255, .67);
	display: inline-block;
	font-family: 'Carwatch' !important;
	padding: 0 .6rem;
	-webkit-transition: color .25s ease;
	-moz-transition: color .25s ease;
	transition: color .25s ease;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
	#language-menu > .menu-item:hover::after {
		color: rgba(255, 255, 255, 1);
	}
#language-menu a,
#language-menu > .menu-item > span {
	color: rgba(255, 255, 255, .67);
	display: inline-block;
	text-align: center;
	width: 3rem;
}
#language-menu a:hover {
	color: rgba(255, 255, 255, 1);
}
#language-menu * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* sub menu */
#language-menu .sub-menu {
	position: absolute;
	background-color: #66b1c3;
	height: 0;
	overflow: hidden;
	width: 100%;
	width: -webkit-calc( 100% + 2px );
	width: -moz-calc( 100% + 2px );
	width: calc( 100% + 2px );
	top: 117%;
	top: -webkit-calc( 100% + 1px + .6rem );
	top: -moz-calc( 100% + 1px + .6rem );
	top: calc( 100% + 1px + .6rem );
	left: -1px;
	opacity: 0;
	-webkit-transition: opacity .25s ease, top .25s ease;
	-moz-transition: opacity .25s ease, top .25s ease;
	transition: opacity .25s ease, top .25s ease;
}
#language-menu:hover .menu-item .sub-menu {
	height: auto;
	opacity: 1;
	top: 100%;
	top: -webkit-calc( 100% + 1px );
	top: -moz-calc( 100% + 1px );
	top: calc( 100% + 1px );
	border: 1px solid rgba(255, 255, 255, .33);
	border-top: none;
}
@media screen and (max-width: 1440px) {
	#language-menu .menu-item {
		font-size: 1.2rem;
	}
	#language-menu > .menu-item::after {
		padding: 0 .3rem;
	}
}
@media screen and (max-width: 960px) {
	#language-menu > .menu-item::after {
		padding: 0;
	}
	#language-menu a,
	#language-menu > .menu-item > span {
		width: auto;
	}
}


/*  ######################################################################
	-	- Shop Menu
###################################################################### */
#shop-menu .menu-item {
	font-size: 1.4rem;
	font-weight: 600;
}
#shop-menu .menu-item a {
	color: #fff;
	display: inline-flex;
	align-items: baseline;
	gap: var( --gap--xs );
}
	#shop-menu .menu-item a:focus,
	#shop-menu .menu-item a:hover {
		color: #e5e5e5;
	}


/*  ######################################################################
	-	- Main menu
	-	-	- General
	-	-	- Top menu
	-	-	- Sub menu
	-	-	- Mobile (<960px)
###################################################################### */
/*  ######################################################################
	-	-	- General
###################################################################### */
.main-menu-container {
	position: relative;
	padding-left: 21.6rem;
	z-index: 5;
}
.main-menu-wrapper {
	position: relative;
}
/*  ######################################################################
	-	-	- Top menu
###################################################################### */
#main-menu > .menu-item {
	position: relative;
	line-height: 0; /* height fox for before */
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#main-menu .menu-item-wrapper {
	position: relative;
}
/* BG */
#main-menu .menu-item-bg {
    position: absolute;
    background-color: #60a7b8;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transform: skewX( -45deg );
    -moz-transform: skewX( -45deg );
    -ms-transform: skewX( -45deg );
    transform: skewX( -45deg );
}
/* Menutext - a, span */
#main-menu .menu-item-wrapper > a,
#main-menu .menu-item-wrapper > span {
	position: relative;
	color: #fff;
	display: block;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 5.6rem;
	overflow: hidden;
	white-space: nowrap;
	height: 5.6rem;
	padding: 0 2.4rem;
	z-index: 1000;
}
#main-menu .menu-item-wrapper > span {
	cursor: default;
}
#main-menu .menu-item-wrapper > a,
#main-menu > .menu-item > .menu-item-wrapper > span {
	text-transform: uppercase;
}
	#main-menu > .menu-item.placeholder > .menu-item-wrapper > span {
		text-transform: inherit;
	}
	#main-menu .menu-item-wrapper:hover > a,
	#main-menu .menu-item-wrapper:hover > span {
		color: #fff;
		overflow: visible;
	}
/* Menu item line */
#main-menu .menu-item-wrapper .menu-item-line {
    position: absolute;
    height: 0;
    width: 100%;
    bottom: -.6rem;
    left: -.6rem;
    opacity: 0;
	padding-right: 2.2rem;
    z-index: 5;
    -webkit-transition: opacity .25s ease, transform .25s ease;
    -moz-transition: opacity .25s ease, transform .25s ease;
    transition: opacity .25s ease, transform .25s ease;
}
	#main-menu .menu-item-wrapper:hover .menu-item-line {
		height: .6rem;
		opacity: .67;
		-webkit-transform: translate(.6rem,-.6rem);
		-moz-transform: translate(.6rem,-.6rem);
		-ms-transform: translate(.6rem,-.6rem);
		transform: translate(.6rem,-.6rem);
	}
#main-menu .menu-item-wrapper .menu-item-line .line {
	position: relative;
    background-color: #fff;
	height: 100%;
	width: 100%;
}
#main-menu .menu-item.placeholder .menu-item-wrapper .menu-item-line {
	display: none;
}

/*  ######################################################################
	-	-	- Sub menu
###################################################################### */
#main-menu .sub-menu-container {
	position: absolute;
	overflow: hidden;
	background-color: rgba(96, 167, 184, .5);
	height: 0;
	left: -.4rem;
	top: 100%;
	padding: 0 1.6rem;
	opacity: 0;
	z-index: 100;
	-webkit-transition: opacity .25s ease, transform .25s ease;
	-moz-transition: opacity .25s ease, transform .25s ease;
	transition: opacity .25s ease, transform .25s ease;
	-webkit-transform: translate(-.6rem, .6rem);
	-moz-transform: translate(-.6rem, .6rem);
	-ms-transform: translate(-.6rem, .6rem);
	transform: translate(-.6rem, .6rem);
}
	#main-menu > .menu-item > .menu-item-wrapper:hover > .sub-menu-container {
		overflow: visible;
		height: auto;
		padding: 1.2rem 1.6rem .4rem;
		opacity: 1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-ms-transform: translate(0,0);
		transform: translate(0,0);
	}
#main-menu .sub-menu-wrapper {
    position: relative;
    background-color: #fff;
    margin: -1.4rem -1.2rem 0;
    padding: 1.2rem;
}

#main-menu .sub-menu-width-1 .sub-menu-container {
	/* width = ( 106.4rem - 3.2rem ) / 3 + 3.2rem  = 37.6rem */
	width: 376px;
	width: 37.6rem;
}
#main-menu .sub-menu-width-2 .sub-menu-container {
	/* width = ( 106.4rem - 3.2rem ) / 3 * 2 + 3.2rem  = 72rem */
	width: 720px;
	width: 72rem;
}
#main-menu .sub-menu-width-3 .sub-menu-container {
	width: 1064px;
	width: 106.4rem;
}

/* Menu item */
#main-menu .sub-menu > .menu-item {
	background-color: #fff;
	color: #404040;
	font-size: 1.4rem;
	line-height: 1.4;
}
#main-menu .sub-menu > .menu-item > a,
#main-menu .sub-menu > .menu-item > span {
	position: relative;
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;
	padding: 0 0 1.4rem 1.2rem;
}
	#main-menu .sub-menu > .menu-item > a::after,
	#main-menu .sub-menu > .menu-item > span::after {
		content: '';
		position: absolute;
		background-color: #404040;
		height: .2rem;
		width: 9.6rem;
		bottom: 0;
		left: 0;
	}
#main-menu .sub-menu-section {
	padding: 1.2rem 0 0 1.2rem;
}
#main-menu .sub-menu-section > .menu-item {
	line-height: 1.4;
	margin: .6rem 0;
}
	#main-menu .sub-menu-section > .menu-item:first-child {
		margin-top: 0;
	}
	#main-menu .sub-menu-section > .menu-item:last-child {
		margin-bottom: 0;
	}
#main-menu .sub-menu-section > .menu-item > a,
#main-menu .sub-menu-section > .menu-item > span {
	display: inline-block;
	font-weight: 600;
}
#main-menu .sub-menu-section > .menu-item .description {
	color: #404040;
	font-weight: 400;
}
@media screen and (max-width: 1440px) {
	/* Top menu */
	#main-menu .menu-item-wrapper > a,
	#main-menu .menu-item-wrapper > span {
		font-size: 1.4rem;
		padding: 0 1.2rem;
	}
	/* Sub menu */
	#main-menu .sub-menu-width-1 .sub-menu-container {
		width: 229px;
		width: 22.9rem;
		width: calc( ( 100vw - 36.8rem ) / 3 + 3.2rem );
	}
	#main-menu .sub-menu-width-2 .sub-menu-container {
		width: 427px;
		width: 42.7rem;
	}
	#main-menu .sub-menu-width-3 .sub-menu-container {
		width: 624px;
		width: 62.4rem;
	}
	#main-menu .sub-menu > .menu-item {
		font-size: 1.2rem;
	}
}
/*  ######################################################################
	-	-	- Mobile (<960px)
###################################################################### */
#header .menu-trigger {
	display: none;
}
/* Burger */
.hamburger {
	padding: .9rem;
	display: inline-block;
	cursor: pointer;
	-webkit-transition-property: opacity, filter;
	-moz-transition-property: opacity, filter;
	transition-property: opacity, filter;
	-webkit-transition-duration: 0.15s;
	-moz-transition-duration: 0.15s;
	transition-duration: 0.15s;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	opacity: .67;
	height: 3.6rem;
	border: 0;
	margin: 0;
	overflow: visible;
}
	.hamburger:hover {
		opacity: 1;
	}
	.hamburger.is-active:hover {
		opacity: 1;
	}
.hamburger-box {
	width: 3rem;
	height: 100%;
	display: inline-block;
	position: relative;
}
.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -.1rem;
}
	.hamburger-inner,
	.hamburger-inner::before,
	.hamburger-inner::after {
		position: absolute;
		background-color: #fff;
		width: 100%;
		height: .2rem;
		border-radius: .1rem;
    }
	.hamburger-inner::before,
	.hamburger-inner::after {
        content: "";
        display: block;
    }
	.hamburger-inner::before {
        top: -.8rem;
    }
	.hamburger-inner::after {
		bottom: -.8rem;
    }
/* Burger transitions */
.hamburger-squeeze .hamburger-inner {
	-webkit-transition-duration: 0.1s;
	-moz-transition-duration: 0.1s;
	transition-duration: 0.1s;
	-webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	-moz-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
	.hamburger-squeeze .hamburger-inner::before {
		-webkit-transition: top 0.1s 0.15s ease, opacity 0.1s ease;
		-moz-transition: top 0.1s 0.15s ease, opacity 0.1s ease;
		transition: top 0.1s 0.15s ease, opacity 0.1s ease;
	}
	.hamburger-squeeze .hamburger-inner::after {
		-webkit-transition: bottom 0.1s 0.15s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
		-moz-transition: bottom 0.1s 0.15s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
		transition: bottom 0.1s 0.15s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
.hamburger-squeeze.is-active .hamburger-inner {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition-delay: 0.15s;
	-moz-transition-delay: 0.15s;
	transition-delay: 0.15s;
	-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
	.hamburger-squeeze.is-active .hamburger-inner::before {
		top: 0;
		opacity: 0;
		-webkit-transition: top 0.1s ease, opacity 0.1s 0.15s ease;
		-moz-transition: top 0.1s ease, opacity 0.1s 0.15s ease;
		transition: top 0.1s ease, opacity 0.1s 0.15s ease;
	}
	.hamburger-squeeze.is-active .hamburger-inner::after {
		bottom: 0;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotate(-90deg);
		-webkit-transition: bottom 0.1s ease, transform 0.1s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
		-moz-transition: bottom 0.1s ease, transform 0.1s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition: bottom 0.1s ease, transform 0.1s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
@media screen and (max-width: 960px) {
	#header .menu-trigger {
		display: inline-block;
	}
	#header #main-menu-handler.header-bottom {
		position: absolute; position: fixed;
		background-color: rgba(255, 255, 255, .84);
		display: block;
		overflow-x: hidden;
		overflow-y: scroll;
		height: 100vh;
		width: 100vw;
		top: 0;
		left: 100vw;
		margin: 0;
		padding: 0;
		z-index: 1;
		-webkit-transition: transform .25s ease;
		-moz-transition: transform .25s ease;
		transition: transform .25s ease;
	}
		#header #main-menu-handler.header-bottom.is-active {
			-webkit-transform: translateX( -100vw );
			-moz-transform: translateX( -100vw );
			-ms-transform: translateX( -100vw );
			transform: translateX( -100vw );
		}
		#header .header-bottom::after {
			content: 'none';
		}
	#header #main-menu-handler .header-container,
	#header #main-menu-handler .header-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	#header .main-menu-container {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 7.6rem 0 0 0;
	}
	#header .main-menu-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
	}
/* Top Menu */
	#main-menu {
		height: 100%;
	}
	#main-menu > .menu-item {
		position: relative;
		text-align: right;
	}
		#main-menu > .menu-item::before {
			content: none;
		}
		/*#main-menu > .menu-item.menu-item-has-children::before,
		#main-menu > .menu-item.menu-item-has-children:not( .placeholder )::before {
			content: '\e901';
			position: relative;
			color: rgba(255, 255, 255, .33);
			display: inline-block;
			font-family: 'Carwatch' !important;
			line-height: 2.8rem;
			text-align: center;
			width: 3.6rem;
			transition: color .25s ease;
	
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		#main-menu > .menu-item.menu-item-has-children:hover::before,
		#main-menu > .menu-item.menu-item-has-children:not( .placeholder ):hover::before {
			color: #fff;
		}*/
	/* Menutext - a, span */
	#main-menu .menu-item-wrapper {
		position: relative;
		background-color: #60a7b8;
		display: inline-block;
		width: 33.3333%;
		margin-bottom: .2rem;
		padding: 0 6rem 0 0;
	}
	#main-menu .menu-item-wrapper > a,
	#main-menu .menu-item-wrapper > span {
		line-height: 2.8rem;
		white-space: normal;
		width: 100%;
		height: auto;
		padding: 1.4rem .9rem;
	}
	/* BG */
	#main-menu .menu-item-bg {
		display: none;
	}
	/* Menu item line */
	#main-menu .menu-item-line {
		display: none;
	}
/* Sub Menu */
	#main-menu .sub-menu-container {
		position: fixed;
		background-color: transparent;
		text-align: left;
		height: 0;
		left: -.6rem;
		top: 7.6rem;
		padding: 0;
		opacity: 0;
		-webkit-transition: opacity .25s ease, left .25s ease;
		-moz-transition: opacity .25s ease, left .25s ease;
		transition: opacity .25s ease, left .25s ease;
		margin: 0 !important;
		z-index: 0;
	}
		#main-menu-handler.header-bottom.is-active #main-menu > .menu-item > .menu-item-wrapper:hover > .sub-menu-container {
			overflow-x: hidden;
			overflow-y: auto;
			height: 100%;
			left: 0;
			top: 7.6rem;
			padding: 0;
			opacity: 1;
		}
		#main-menu .sub-menu-container::before {
			content: none;
		}
		#main-menu .sub-menu-container::after {
			content: none;
		}
		#main-menu .sub-menu-container > * {
			z-index: 10;
		}
	#main-menu .sub-menu-width-1 .sub-menu-container,
	#main-menu .sub-menu-width-2 .sub-menu-container,
	#main-menu .sub-menu-width-3 .sub-menu-container {
		width: 66.6667%;
	}
	#main-menu .sub-menu-wrapper {
		background-color: #f5f5f5;
		margin: 0;
		padding: 1.96rem 1.2rem 1.2rem 4.8rem;
	}
	#main-menu .sub-menu > .menu-item {
		background-color: #f5f5f5;
	}
}
@media screen and (max-width: 480px) {
	/* Top menu */
	#main-menu .menu-item-wrapper {
		width: 50%;
		padding-right: 3rem;
	}
	/* Sub menu */
	#main-menu .sub-menu-width-1 .sub-menu-container,
	#main-menu .sub-menu-width-2 .sub-menu-container,
	#main-menu .sub-menu-width-3 .sub-menu-container {
		width: 50%;
	}
	#main-menu .sub-menu-wrapper {
		padding-left: 1.8rem;
	}
}
@media screen and (max-width: 320px) {
	/* Top menu */
	#main-menu .menu-item-wrapper {
		padding-right: .6rem;
	}
	/* Sub menu */
	#main-menu .sub-menu-wrapper {
		padding-left: .6rem;
	}
}


/*  ######################################################################
	- Content
	-	- General
	-	- Images
	-	- Blog
	-	- Custom Archive List
	-	- Shariff
###################################################################### */
/*  ######################################################################
	-	- General
###################################################################### */
#primary {
	min-height: 100vh;
	padding-top: 13.2rem; /* height of the header */
}
.post-header {
	background-color: #fff;
	padding: 6rem 6rem 0;
}
.post-image-container {
	max-width: 96rem;
	margin: 0 auto;
	padding-bottom: 6rem;
}
.post-title-container {
	position: relative;
	max-width: 64rem;
	margin: auto;
}
	.post-title-container.is-full-width {
		max-width: 128rem;
	}
.post-title {
	margin: 0;
}
.post-header + .section {
	padding-top: 2.6rem;
}
.header .header-meta {
	color: #808080;
	font-size: 1.2rem;
	margin-bottom: 1.5em;
}
@media screen and (max-width: 1440px) {
	.post-title-container.is-full-width {
		max-width: 64rem;
	}
}
@media screen and (max-width: 960px) {
	#primary {
		padding-top: 7.6rem; /* height of the header */
	}
}
@media screen and (max-width: 480px) {
	#primary {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
	.post-header {
		background-color: #fff;
		padding: 3rem 3rem 0;
	}
}

/*  ######################################################################
	-	- Images
###################################################################### */
img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}
.image-wrapper {
	position: relative;
}
.image-wrapper figure,
.image-wrapper figure img {
	position: relative;
	display: block;
	margin: 0;
	border: 0;
	padding: 0;
}
.image-wrapper figure img {
	width: 100%;
	max-width: none;
}
/*  ######################################################################
	-	- Blog
###################################################################### */
.blog-title {
	margin: 0;
}
.blog-post-container {
	position: relative;
	height: 100%;
	padding: 1.2rem;
}
.blog-post-wrapper {
	position: relative;
	height: 100%;
	padding: 2.4rem;
}
.blog-post-bg {
	position: absolute;
	height: 100%;
	width: 100%;
	top: -1.2rem;
	right: -1.2rem;
	z-index: 0;
}
	.section:nth-of-type( odd ) .blog-post-bg {
		background-color: var( --section--background-color--even );
	}
	.section:nth-of-type( even ) .blog-post-bg {
		background-color: var( --section--background-color--odd );
	}
	.blog-post-bg::before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		top: 0;
		right: 0;
		border-style: solid;
		border-color: transparent;
		border-width: 0 2.4rem 2.4rem 0;
	}
	.section:nth-of-type( odd ) .blog-post-bg::before {
		border-right-color: var( --section--background-color--odd );
	}
	.section:nth-of-type( even ) .blog-post-bg::before {
		border-right-color: var( --section--background-color--even );
	}
.image-container.blog-post-image-container {
	margin: -2.4rem 0 -3.6rem -3.6rem;
	padding: 1.2rem 1.2rem 0 0;
}
.teaser-container.blog-post-teaser-container {
	padding: 1.2rem;
}
.blog-post-container .post-meta {
	color: #808080;
	font-size: 1.2rem;
	margin-bottom: 1.5em;
}
.blog-post-container .title.blog-post-title {
	position: relative;
	margin-top: 0;
	padding-top: .5em;
	padding-top: -webkit-calc( .5em + .2rem );
	padding-top: -moz-calc( .5em + .2rem );
	padding-top: calc( .5em + .2rem );
}
	.blog-post-container .title.blog-post-title::after {
		content: '';
		position: absolute;
		background-color: #404040;
		height: .2rem;
		width: 9.6rem;
		top: 0;
		left: -1.2rem;
	}

/* .blog-post-btn */
.btn.blog-post-link-btn {
	position: relative;
	display: inline-block;
	color: #808080;
	background-color: transparent;
	line-height: 3.2rem;
	margin: 2.4rem 0 0 -1.2rem;
	border: 2px solid #d6d6d6;
	padding: 0 3.2rem;
	-webkit-transition: color .25s ease, background-color .25s ease, border-color .25s ease;
	-moz-transition: color .25s ease, background-color .25s ease, border-color .25s ease;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
	.btn.blog-post-link-btn:hover {
		color: #fff;
		background-color: #6bbacd;
		border-color: #6bbacd;
	}

	.btn.blog-post-link-btn .top-right {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		top: 0;
		right: 0;
	}
		.btn.blog-post-link-btn .top-right::before,
		.btn.blog-post-link-btn .top-right::after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			top: -.2rem;
			right: -.2rem;
			border-style: solid;
			border-color: transparent;
			border-width: 0 1.2rem 1.2rem 0;
		}
		.btn.blog-post-link-btn .top-right::before {
			border-right-color: #d6d6d6;
			border-width: 0 1.5rem 1.5rem 0;
			-webkit-transition: border-color .25s ease;
			-moz-transition: border-color .25s ease;
			transition: border-color .25s ease;
		}
		.btn.blog-post-link-btn:hover .top-right::before {
			border-right-color: #6bbacd;
		}
		.section:nth-of-type( odd ) .btn.blog-post-link-btn .top-right::after {
			border-right-color: var( --section--background-color--even );
		}
		.section:nth-of-type( even ) .btn.blog-post-link-btn .top-right::after {
			border-right-color: var( --section--background-color--odd );
		}
	.btn.blog-post-link-btn .bottom-left {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		bottom: 0;
		left: 0;
	}
		.btn.blog-post-link-btn .bottom-left::before,
		.btn.blog-post-link-btn .bottom-left::after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			bottom: -.2rem;
			left: -.2rem;
			border-style: solid;
			border-color: transparent;
			border-width: 1.2rem 0 0 1.2rem;
		}
		.btn.blog-post-link-btn .bottom-left::before {
			border-left-color: #d6d6d6;
			border-width: 1.5rem 0 0 1.5rem;
			-webkit-transition: border-color .25s ease;
			-moz-transition: border-color .25s ease;
			transition: border-color .25s ease;
		}
		.btn.blog-post-link-btn:hover .bottom-left::before {
			border-left-color: #6bbacd;
		}
		.section:nth-of-type( odd ) .btn.blog-post-link-btn .bottom-left::after {
			border-left-color: var( --section--background-color--even );
		}
		.section:nth-of-type( even ) .btn.blog-post-link-btn .bottom-left::after {
			border-left-color: var( --section--background-color--odd );
		}

/* .blog-btn */
.btn.blog-link-btn {
	position: relative;
	display: inline-block;
	color: #808080;
	background-color: transparent;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 6rem;
	text-transform: uppercase;
	margin: 0;
	border: 2px solid #d6d6d6;
	padding: 0 6rem;
	-webkit-transition: color .25s ease, background-color .25s ease, border-color .25s ease;
	-moz-transition: color .25s ease, background-color .25s ease, border-color .25s ease;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
	.btn.blog-link-btn:hover {
		color: #fff;
		background-color: #6bbacd;
		border-color: #6bbacd;
	}

	.btn.blog-link-btn .top-right {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		top: 0;
		right: 0;
	}
		.btn.blog-link-btn .top-right::before,
		.btn.blog-link-btn .top-right::after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			top: -.2rem;
			right: -.2rem;
			border-style: solid;
			border-color: transparent;
			border-width: 0 2.4rem 2.4rem 0;
		}
		.btn.blog-link-btn .top-right::before {
			border-right-color: #d6d6d6;
			border-width: 0 2.7rem 2.7rem 0;
			-webkit-transition: border-color .25s ease;
			-moz-: border-color .25s ease;
			transition: border-color .25s ease;
		}
		.btn.blog-link-btn:hover .top-right::before {
			border-right-color: #6bbacd;
		}
		.section:nth-of-type( odd ) .btn.blog-link-btn .top-right::after {
			border-right-color: var( --section--background-color--odd );
		}
		.section:nth-of-type( even ) .btn.blog-link-btn .top-right::after {
			border-right-color: var( --section--background-color--even );
		}
	.btn.blog-link-btn .bottom-left {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		bottom: 0;
		left: 0;
	}
		.btn.blog-link-btn .bottom-left::before,
		.btn.blog-link-btn .bottom-left::after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			bottom: -.2rem;
			left: -.2rem;
			border-style: solid;
			border-color: transparent;
			border-width: 2.4rem 0 0 2.4rem;
		}
		.btn.blog-link-btn .bottom-left::before {
			border-left-color: #d6d6d6;
			border-width: 2.7rem 0 0 2.7rem;
			-webkit-transition: border-color .25s ease;
			-moz-transition: border-color .25s ease;
			transition: border-color .25s ease;
		}
		.btn.blog-link-btn:hover .bottom-left::before {
			border-left-color: #6bbacd;
		}
		.section:nth-of-type( odd ) .btn.blog-link-btn .bottom-left::after {
			border-left-color: var( --section--background-color--odd );
		}
		.section:nth-of-type( even ) .btn.blog-link-btn .bottom-left::after {
			border-left-color: var( --section--background-color--even );
		}
@media screen and (max-width: 1440px) {
	.image-container.blog-post-image-container {
		margin-right: -2.4rem
	}
	.teaser-container.blog-post-teaser-container {
		margin-top: -2.4rem;
		margin-left: 1.2rem;
	}
}

/*  ######################################################################
	-	- Shariff
###################################################################### */
.post-title-container .shariff-container {
	position: relative;
	color: #808080;
	font-size: 12px;
	font-size: 1.2rem;
	overflow: hidden;
	margin-bottom: 1.5em;
}
.post-title-container .shariff-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}
.post-title-container .shariff-label {
	margin-right: 6px;
	margin-right: .6rem;
}
.post-title-container .shariff .shariff-buttons {
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.post-title-container .shariff .shariff-button {
	background-color: transparent !important;
	width: 20px;
	width: 2rem;
	height: 20px;
	height: 2rem ;
	margin: 0 6px;
	margin: 0 .6rem;
	padding: 0;
}
.post-title-container .shariff .shariff-link {
	background-color: transparent !important;
	display: block;
	line-height: 20px;
	line-height: 2rem;
	width: 100%;
	height: 100%;
	margin: 0;
}
.post-title-container .shariff .shariff-link span {
	margin: 10px 0 0 10px;
	margin: 1rem 0 0 1rem;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.post-title-container .shariff .shariff-link * {
	display: block;
	width: 14px !important;
	width: 1.4rem !important;
	height: 14px !important;
	height: 1.5rem !important;
}
.post-title-container .shariff .shariff-link path {
	display: inherit;
	fill: #5695a4;
	-webkit-transition: fill .25s ease;
	-moz-transition: fill .25s ease;
	transition: fill .25s ease;
}
	.post-title-container .shariff .shariff-link:hover path {
		fill: #808080;
	}

/*  ######################################################################
	-	- Custom Archive List
###################################################################### */
.archive-section .archive-item-link {
	display: block;
	padding: 1.2rem;
}
.archive-section .archive-item:nth-of-type( odd ) .archive-item-link {
	background-color: rgba( 0, 0, 0, .05 );
}
.archive-section .archive-item:nth-of-type( even ) .archive-item-link {
	background-color: rgba( 0, 0, 0, .025 );
}


/*  ######################################################################
	- Footer
###################################################################### */
#footer {
	position: relative;
	display: block;
	background-color: #ebebeb;
}
#footer-content {
	position: relative;
	padding: 6rem;
}
.footer-content-menu-wrapper {
	padding-left: 1.2rem;
}
.footer-content-menu-title {
	position: relative;
	margin-bottom: 1.2rem;
	padding-bottom: 1.4rem;
}
.footer-content-menu-title::after {
	content: '';
	position: absolute;
	background-color: #404040;
	width: 9.6rem;
	height: .2rem;
	bottom: 0;
	left: -1.2rem;
}
#footer-content .menu-item {
	font-size: 1.4rem;
	line-height: 1.4;
	margin: 1.2rem 0;
}
	#footer-content .menu-item:first-child {
		margin-top: 0;
	}
	#footer-content .menu-item:last-child {
		margin-bottom: 0;
	}
#footer-content .menu-item a {
	color: #040404;
}
#footer-content .menu-item a:focus,
#footer-content .menu-item a:hover {
	color: #5695a4;
}
@media screen and (max-width: 960px) {
	.footer-content-menu-wrapper {
		text-align: center;
	}
	.footer-content-menu-title::after {
		left: 50%;
		left: -webkit-calc( 50% - 4.8rem );
		left: -moz-calc( 50% - 4.8rem );
		left: calc( 50% - 4.8rem );
	}
}

.footer-menu-container {
	background-color: #60a7b8;
	color: #fff;
	padding: 1.2rem;
}
.footer-menu-container .footer-menu-wrapper {
	min-height: 4.6rem;
}
.footer-menu-container .menu-item {
	font-size: 1.4rem;
}
.footer-menu-container .menu-item a {
	color: #fff;
}
.footer-menu-container .menu-item a:focus,
.footer-menu-container .menu-item a:hover {
	color: #e5e5e5;
}