@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 100;
	src: 	local('Poppins Thin'),
			local('Poppins-Thin'),
			url('../../../fonts/poppins/poppins-v6-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
			url('../../../fonts/poppins/poppins-v6-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	src: 	local('Poppins Light'),
			local('Poppins-Light'),
			url('../../../fonts/poppins/poppins-v6-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
			url('../../../fonts/poppins/poppins-v6-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 400;
	src: 	local('Poppins Light Italic'),
			local('Poppins-LightItalic'),
			url('../../../fonts/poppins/poppins-v6-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
			url('../../../fonts/poppins/poppins-v6-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src:  local('Poppins Regular'),
			local('Poppins-Regular'),
			url('../../../fonts/poppins/poppins-v6-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
			url('../../../fonts/poppins/poppins-v6-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ::::
   :::: */
*,
*::before,
*::after{
	box-sizing: border-box;
}
:root{
	font-family: Poppins;
	font-size: 10px;
	/* */
	--sc-color-background: rgba(247,247,247,1);
	--sc-color-background-contrast: rgba(255,255,255,1);
	--sc-color-border: #D2D2D2;
	--sc-color-border-light: #E2E2E2;
	--sc-color-text: #323232;
	--sc-color-text-accent: #FF9900;
	--sc-color-text-accent-contrast: rgba(255,255,255,1);
	--sc-color-text-accent-secondary: var(--autran-color-blue);
	--sc-color-text-accent-secondary-contrast:  rgba(255,255,255,1);
	--sc-color-text-disabled: #A2A2A2;
	--sc-color-text-light: #888888;
	--sc-color-text-lighter: #CCCCCC;
	--sc-color-text-lightest: #F0F0F0;
	/* content */
	--sc-content-max-half-width: calc(var(--sc-content-max-width) / 2) ;
	--sc-content-max-width: 96rem;
	/* gutter */
	--sc-gutter-double-width: calc(var(--sc-gutter-width) * 2);
	--sc-gutter-fourfold-width: calc(var(--sc-gutter-width) * 4);
	--sc-gutter-half-and-width: calc(var(--sc-gutter-width) * 1.5);
	--sc-gutter-half-width: calc(var(--sc-gutter-width) / 2);
	--sc-gutter-quarter-width: calc(var(--sc-gutter-width) / 4);
	--sc-gutter-width: 1.6rem;
	/* site header */
	--sh-height: 4.8rem;
	--sh-color-background: rgba(255,255,255,.8);
	--sh-color-title: #FFFFFF;
	--sh-color-title-accent: #2d3336;
	/* autran */
	--autran-color-blue :rgb(38,97,156);/* #18C0FF;*/
	--autran-color-orange : #FF9900;
	--autran-color-green : #89C506;

}
/* ::::
	CONTENT SECTION
	:::: */
body{
	background: var(--sc-color-background);
	font-size: 1.6rem;
	margin: 0;
	padding: 0;
}
html{
	-webkit-text-size-adjust: 100%;
}
main{
	background: var(--sc-color-background);
	min-height: 100vh;
}
/*	::::
	TYPOGRAPHY
	::::: */
a{
	color: inherit;
	text-decoration: none;
}
h1, h2, h3, h4, h5, h6{
	margin: 0;
	padding: 0;
}
/*	::::
	FORMS
	:::: */
:focus,
button:focus,
input:focus,
select:focus,
textarea:focus{
	outline: none;
}
input{
	background-color: transparent;
	border: .1rem solid var(--sc-color-border);
	border-radius: 0;
	font-size: 1.6rem;
}
/* ::::
	MEDIAS
	:::: */
figure{
	margin: 0;
	padding: 0;
}
picture{
}
/* site footer */
#sf{
	background-color: var(--sc-color-background-contrast);
	display: grid;
}
/* site footer > main */
#sf-main{
	display: grid;
	margin: 0 auto;
	max-width: var(--sc-content-max-width);
	padding-left: var(--sc-gutter-width);
	padding-right: var(--sc-gutter-width);
	padding-bottom: var(--sc-gutter-width);
	padding-top: var(--sc-gutter-double-width);
	width: 100%;
}
#sf-main-copyright{
	border-top: .1rem solid var(--sc-color-border);
	color: var(--sc-color-text-light);
	grid-area: copyright;
	font-size: 1.2rem;
	padding: var(--sc-gutter-half-width);
	text-align: center;
}
#sf-main-links{
	grid-area: links;
	width: 100%;
}
#sf-main-links{
	display: grid;
	grid-column-gap: var(--sc-gutter-width);
	grid-template-columns: 1fr 1fr;
	width: 100%;
}
#sf-main-links ul{
	margin: 0;
	padding: 0;
}
#sf-main-links ul > li{
	font-size: 1.2rem;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#sf-main-links ul > li a{
	color: var(--sc-color-text-light);
	font-weight: 300;
	line-height: 1.6em;
}
#sf-main-links ul > li a:hover{
	color: var(--sc-color-text-accent-secondary);
	text-decoration: underline;
}
#sf-main-links-site-title,
#sf-main-links-artist-title{
	color: var(--sc-color-text);
	font-size: 1.2rem;
	font-weight: 300;
	padding-bottom: var(--sc-gutter-half-width);
	text-transform: uppercase;
}
#sf-main-newsletter{
	background: var(--sc-color-background);
	border-radius: .8rem;
	grid-area: newsletter;
	padding: var(--sc-gutter-width);
}
#sf-main-newsletter .field{

}
#sf-main-newsletter-form{
	align-items: stretch;
	border: .1rem solid var(--sc-color-border);
	border-radius: .4rem;
	display: grid;
	grid-gap: 0;
	grid-template-columns: 1fr auto;
	margin: O;
	overflow: hidden;
	padding: 0;
}
#sf-main-newsletter-form button{
	background: var(--sc-color-border);
	cursor: pointer;
	color: var(--sc-color-text-accent-secondary-contrast);
	border: 0;
	display: block;
	font-size: 1.2rem;
	margin: 0;
	padding: var(--sc-gutter-half-width) var(--sc-gutter-width);
}
#sf-main-newsletter-form input{
	background: var(--sc-color-background-contrast);
	border: 0;
	margin: 0;
	height: 4rem;
	padding: var(--sc-gutter-half-width);
}
#sf-main-newsletter-form input::placeholder{
	font-size: 1.2rem;
	font-weight: 300;
}
#sf-main-newsletter-text{
	color: var(--sc-color-text-light);
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1.6em;
	padding-bottom: var(--sc-gutter-half-width);
}
#sf-main-newsletter-title{
	color: var(--sc-color-text-accent);
	font-size: 1.2rem;
	font-weight: 300;
	padding-bottom: var(--sc-gutter-half-width);
	text-transform: uppercase;
}
#sf-main-giftcard{
	grid-area: giftcard;
}
#sf-main-giftcard-text{
	color: var(--sc-color-text-light);
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1.6em;
	padding-bottom: var(--sc-gutter-half-width);
}
#sf-main-giftcard-link{
	align-items: center;
	background-color: var(--sc-color-text-accent-secondary);
	border-radius: .4rem;
	color: #FFFFFF;
	display: grid;
	grid-template-areas: "icon text";
	grid-template-columns: 3.2rem 1fr;
	height: 4.8rem;
	padding: var(--sc-gutter-half-width);
	text-align: center;
}
#sf-main-giftcard-link span{
	grid-area: text;
	color: var(--sc-color-text-light);
	color: #FFFFFF;
	font-size: 1.2rem;
}
#sf-main-giftcard-link svg{
	fill: #FFFFFF;
	height: 2.4rem;
	width: 2.4rem;
}
#sf-main-giftcard-link:hover{
	background-color: var(--sc-color-text-accent);
}
#sf-main-giftcard-title{
	color: var(--sc-color-text);
	font-size: 1.2rem;
	font-weight: 300;
	padding-bottom: var(--sc-gutter-half-width);
	text-transform: uppercase;
}
@media only screen and (max-width: 735px){
	#sf-main{
		grid-row-gap: var(--sc-gutter-double-width);
		grid-template-columns: 1fr;
		grid-template-areas: "giftcard" "newsletter" "links" "copyright";
		width: 100%;
	}
	#sf-main-giftcard{
		background: var(--sc-color-background);
		border-radius: .8rem;
		padding: var(--sc-gutter-width);
	}
	#sf-main-giftcard-link{
		display: grid;
		justify-self: center;
	}
}
@media only screen and (min-width: 735.1px){
	#sf-main{
		grid-column-gap: var(--sc-gutter-double-width);
		grid-row-gap: var(--sc-gutter-double-width);
		grid-template-areas: "links giftcard" 
									"newsletter newsletter"
									"copyright copyright ";
		grid-template-columns: 3fr 2fr;
	}
	#sf-main-newsletter{
		display: grid;
		grid-columns-gap: var(--sc-gutter-double-width);
		grid-template-areas: "title ." "text form";
		grid-template-columns: 1fr 1fr;
		overflow: hidden;
	}
	#sf-main-newsletter-form{
		grid-area: form;
		overflow: hidden;
	}
	#sf-main-newsletter-text{
		grid-area: text;
	}
	#sf-main-newsletter-title{
		grid-area: title;
	}
}
@supports(padding: max(0px)) {
	#sf-main{

		padding-left: max(var(--sc-gutter-width), max(env(safe-area-inset-left),env(safe-area-inset-right)));
		padding-right: max(var(--sc-gutter-width), max(env(safe-area-inset-left),env(safe-area-inset-right)));
	}
}
/* site footer > spotlight */
#sf-spotlight{
	background: var(--sc-color-background);
	padding-bottom: var(--sc-gutter-width);
	padding-top: var(--sc-gutter-width);
}
#sf-spotlight-list{
	display: grid;
	grid-gap: var(--sc-gutter-width);
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin: 0 auto;
	max-width: var(--sc-content-max-width);
	padding: 0 var(--sc-gutter-half-width);
}
#sf-spotlight-list li{
	color: var(--sc-color-text-light);
	font-size: 1.2rem;
	font-weight: 300;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#sf-spotlight-list li a{
	align-items: center;
	display: grid;
	grid-column-gap: var(--sc-gutter-half-width);
	grid-template-columns: auto 1fr;
}
#sf-spotlight-list li span{
	display: block;
}
#sf-spotlight-list li svg{
	fill: var(--sc-color-text-light);
	height: 2.4rem;
	width: 2.4rem;
}
@media only screen and (max-width: 735px){
	#sf-spotlight-list{
		grid-template-columns: 1fr 1fr;
	}
}
@media only screen and (min-width: 735.1px){
	#sf-spotlight-list{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}
@supports(padding: max(0px)) {
	#sf-spotlight{
		padding-left: max(0px, max(env(safe-area-inset-left),env(safe-area-inset-right)));
		padding-right: max(0px, max(env(safe-area-inset-left),env(safe-area-inset-right)));
	}
}
/* site header */
#sh{
	-webkit-backdrop-filter:saturate(180%) blur(8px);
	backdrop-filter: saturate(180%) blur(8px);
	background-color: var(--sh-color-background);
	height: var(--sh-height);
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	
}
#sh-content{
	display: grid;
	grid-gap: var(--sc-gutter-half-width);
	grid-template-areas: "menu title . store";
	grid-template-columns: auto auto 1fr auto;
	margin: 0 auto;
	max-width: var(--sc-content-max-width);
	padding: var(--sc-gutter-half-width);
}
#sh-title{
	font-size: 1.4rem;
	font-weight: 300;
	grid-area: title;
	line-height: 1.4rem;
	
	text-transform: lowercase;
}
#sh-title a{
	display: block;
}
#sh-title-autran{
	
}
#sh-title-autran span:nth-child(1){
	color: var(--autran-color-blue);
}
#sh-title-autran span:nth-child(2){
	color: var(--autran-color-orange);
}
#sh-title-autran span:nth-child(3){
	color: var(--autran-color-green);
}
#sh-title-store{
	display: block;
	font-size: 2rem;
	font-weight: 100;
	letter-spacing: .3rem;
	line-height: 1.8rem;
	text-align: justify;
	text-transform: uppercase;
	white-space: .1rem;
}
/* site header > nav */
#sh-nav{

}
#sh-nav-button{
	align-items: center;
	display: flex;
	height: 3.2rem;
	justify-content: center;
	padding: var(--sc-gutter-quarter-width);
	top: 0;
	width: 3.2rem;
	z-index: 1001;
}
#sh-nav-button > span{
	align-items: center;
	background: var(--sc-color-text);
	border-radius:.4rem;
	display: flex;
	flex: none;
	height: .1rem;
	justify-content: center;
	position: relative;
	transition: all 0.1s linear;
	width: 100%;
}
#sh-nav-button > span:after,
#sh-nav-button > span:before{
	background: inherit;
	border-radius:.4rem;
	content: '';
	left: 0;
	height: .1rem;
	position: absolute;
	width: 100%;
}
#sh-nav-button > span:after{
	top: -.8rem;
}
#sh-nav-button > span:before{
	top: .8rem;
}
#sh-nav-checkbox{
	display: none;
}
#sh-nav-checkbox{
	display: none;
}
#sh-nav-checkbox:checked + #sh-nav-button > span{
	transform: rotate(135deg);
}
#sh-nav-checkbox:checked + #sh-nav-button > span:before,
#sh-nav-checkbox:checked + #sh-nav-button > span:after{
	top: 0;
	transform: rotate(90deg);
}
#sh-nav-checkbox:checked:hover + #sh-nav-button > span{
	transform: rotate(225deg);
	transition: all 0.4s ease;
}
#sh-nav-checkbox:checked ~ #sh-nav-menu{
	opacity: 1;
	transform: none;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#sh-nav-menu{
	-webkit-backdrop-filter:saturate(180%) blur(8px);
	backdrop-filter: saturate(180%) blur(8px);
	background: rgba(255,255,255,.88);
	height: calc(100vh - var(--sh-height));
	left: 0;
	list-style-type: none;
	margin: 0;
	padding: var(--site-header-height) 0 0 0;
	position: fixed;
	top: var(--sh-height);
	transform: translate(-100%, 0);
	width: 100vw;
	z-index: 999;
}
#sh-nav-menuList{
	margin: 0 auto;
	max-width: var(--sc-content-max-width);
	padding: 0;
}
#sh-nav-menuList li.root{
	border-bottom: .1rem solid var(--sc-color-border);
	list-style-type: none;
	margin: 0;
	padding: var(--sc-gutter-width);
}
#sh-nav-menuList .menuitem{
	align-items: start;
	display: grid;	
	grid-template-columns: 2.4rem 1fr;
	grid-gap: var(--sc-gutter-width);
}
#sh-nav-menuList .menuitem .menuitem-icon{
	height: 2.4rem;
	width: 2.4rem;
}
#sh-nav-menuList .menuitem .menuitem-label{
	display: block;
	line-height: 2.4rem;
	font-weight: 300;
}
#sh-nav-menuList .menuitem:hover{
	color:var(--sc-color-text-accent);
	fill: var(--sc-color-text-accent);

}

#sh-nav-series{
	margin: 0;
	padding: var(--sc-gutter-width) 0 0 4rem;
}
#sh-nav-series li{
	border-bottom: .1rem solid var(--sc-color-border);
	font-weight: 300;
	line-height: 2.4rem;
	list-style-type: none;
	padding: var(--sc-gutter-quarter-width) 0;
}
#sh-nav-series li:last-child{
	border-bottom: 0;
}
#sh-nav-series li .seriesitem-name{
	text-transform: uppercase;
}
@supports(padding: max(0px)) {
	#sh-nav-menu li.root .menuitem{
		padding-left: max(0px, max(env(safe-area-inset-left),env(safe-area-inset-right)));
		padding-right: max(0px), max(env(safe-area-inset-left),env(safe-area-inset-right)));
	}
}
/* site header > nav store */
#sh-nav-store{
	grid-area: store;
}
#sh-nav-store > ul{
	align-items: center;
	display: grid;
	grid-column-gap: var(--sc-gutter-half-width);
	grid-template-columns: 3.2rem 3.2rem;
	height: 100%;
	margin: 0;
	padding: 0;
}
#sh-nav-store > ul > li {
	display: grid;
	list-style-type: none;
	height: 100%;
	margin: 0;
	padding: 0;
}
#sh-nav-store > ul > li  > a{
	align-items: center;
	display: grid;
	height: 100%;
	justify-items: center;
}
#sh-nav-store > ul > li  > a > svg{
	height: 2.4rem;
	width: 2.4rem;
}
#sh-nav-store > ul > li  > a:hover svg{
	fill: var(--sc-color-text-accent);
}
#sh-nav-store-basket{
	position: relative;
}
#sh-nav-store-basket-badge[data-numitems="0"]{
	display: none;
}
#sh-nav-store-basket-badge{
	background-color: var(--sc-color-text-accent);
	border-radius: 50%;
	color: var(--sc-color-text-accent-contrast);
	font-size: 0.8rem;
	line-height: 1.2em;
	max-height: 1.6rem;
	min-height: 1.6rem;
	min-width: 1.6rem;
	padding: var(--sc-gutter-quarter-width);
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
}
@supports(padding: max(0px)) {
	#sh-content{
		padding-left: max(var(--sc-gutter-half-width), max(env(safe-area-inset-left),env(safe-area-inset-right)));
		padding-right: max(var(--sc-gutter-half-width), max(env(safe-area-inset-left),env(safe-area-inset-right)));
	}
}
/* */
/* common */
.sc-form-fieldset{
	border: 0;
	margin: 0;
	padding: 0;
}
.sc-form-field{
	border: .1rem solid var(--sc-color-border);
}
.sc-form-field input{
	background-color: transparent;
	border: 0;
	display: block;
	font-size: 1.6rem;
	font-weight: 300;
	margin: 0;
	outline: 0;
	padding: var(--sc-gutter-half-width);
	width: 100%;
}
.sc-form-field label{
	color: var(--sc-color-text-light);
	display: block;
	font-size: 1.4rem;
	font-weight: 300;
	padding: var(--sc-gutter-quarter-width) var(--sc-gutter-half-width);
	font-weight: 300;
	margin: 0;
	width: 100%;
}
.sc-form-field select{
	-webkit-appearance:none;
	appearance: none;
	background-color: transparent;
	border: 0;
	cursor: inherit;
	font-family: inherit;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: inherit;
	margin: 0;
	padding: var(--sc-gutter-half-width);
	width: 100%;
}
.sc-form-field textarea{
	background-color: transparent;
	border: 0;
	display: block;
	font-size: 1.6rem;
	margin: 0;
	outline: 0;
	padding: var(--sc-gutter-half-width);
	width: 100%;
}
.sc-form-required{
	color: var(--sc-color-text-accent)
}