@font-face {
	font-family: 'WhyteInktrap';
	src:  url('../fonts/WhyteInktrap-Bold.woff2') format('woff2'),
	url('../fonts/WhyteInktrap-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	}
@font-face {
	font-family: 'WhyteInktrap';
	src:  url('../fonts/WhyteInktrap-BoldItalic.woff2') format('woff2'),
	url('../fonts/WhyteInktrap-BoldItalic.woff') format('woff');
	font-weight: 700;
	font-style: italic;
	}
@font-face {
	font-family: 'WhyteInktrap';
	src:  url('../fonts/WhyteInktrap-Regular.woff2') format('woff2'),
	url('../fonts/WhyteInktrap-Regular.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	}
@font-face {
	font-family: 'WhyteInktrap';
	src:  url('../fonts/WhyteInktrap-Italic.woff2') format('woff2'),
	url('../fonts/WhyteInktrap-Italic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	}
@font-face {
	font-family: 'Whyte';
	src:  url('../fonts/ABCWhyte-Regular.woff2') format('woff2'),
	url('../fonts/ABCWhyte-Regular.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	}
@font-face {
	font-family: 'Whyte';
	src:  url('../fonts/ABCWhyte-RegularItalic.woff2') format('woff2'),
	url('../fonts/ABCWhyte-RegularItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	}

html {
	font-family: "Whyte", Helvetica, Arial, sans-serif;
	font-size: 18pt;
	line-height: 1.2;
	background: #fff;
	height: 100%;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior-y: none;
	}
body {
	overscroll-behavior-y: none;
	}

@media screen and (min-width: 1100px) {

html {
	font-size: 1.6vw;
	line-height: 1.2;
	height: 100%;
	}
}


*,
*:after,
*:before{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
a {
	text-decoration: underline;
	}
a:hover {
	text-decoration: none;
	cursor: pointer;
	}
h1, h2, h3, h4, h5 {
	font-size: 1em;
	margin: 0;
	}	
li {
	list-style: none;
	}
a {
	color: currentColor;
	}
strong, b {
	font-weight: 700;
	font-family: "WhyteInktrap", Helvetica, Arial, sans-serif;
	}
p {
	margin: 0;
	}
img {
	width: 100%;
	}
h1 {
	font-weight: normal;
	font-size: 1.5rem;
	}
.cf:before,
.cf:after {
	content: " "; /* 1 */
	display: table; /* 2 */
	}
.cf:after {
	clear: both;
	}
.cf {
	*zoom: 1;
	}
.hidden {
	display: none;
	}



/* General Page Elements */


main {
	padding: 0rem 1rem 0rem 2rem;
	width: 100%;
	margin-top: 4vw;
	}

.text {
	line-height: 1.3em;
	transition: background-image 0.2s ease-in-out;
	position: relative;
	transition: color 0.2s;	
	}


.text p,
.text figure,
.text ul,
.text ol {
	margin-bottom: 1em;
	}
.text p {
	text-indent: 10%;
	}
.text.two-columns {
	columns: 2;
	column-gap: 4vw;
	}
.text section {
	margin-bottom: 0rem;
	}
.text blockquote {
	font-family: 'WhyteInktrap', sans-serif;
	margin: 0;
	font-size: 1em;
	background: #fff;
	color: #000;
	padding: 0;
	font-style: italic;
	background: #eee;
	border-radius: 10px;
	padding: .5em 1em;
	margin-bottom: 1rem;
	}
.text blockquote p{
	margin: 0;
	text-indent: 0%;
	border-radius: 10px;

	}

.text blockquote .blockquote-footer{
	font-family: 'Courier', monospace;
	font-size: 0.6rem;
	font-style: normal;
	margin: 0;
	}
.linethrough {
	text-decoration: line-through;
	}
.image-hidden {
	visibility: none;
	}

blockquote {
	font-family: 'WhyteInktrap', sans-serif;
	margin: 1em 0;
	font-size: 1em;
	background: #eee;
	color: #000;
	padding:0.3em 0.5em 0.35em 0.5em;
	border-radius: 10px;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	}
blockquote em{
	font-style: normal;
	line-height: 1.2em;
	font-size: 0.65rem;
	margin: 0;
	margin-top: .5em;
	display: block;
	}
.intro {
	margin-bottom: 2em;
	font-family: 'Whyte';
	}
.urgent-message {
	font-size: 1rem;
	font-family: 'Whyte';
	padding:0.3em 0.5em 0.35em 0.5em;
	color: #fff;
	background: #000;
	border-radius: 10px;
	}

.tech-text {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
	text-indent: 0%;
	font-size: 0.7rem;
	}
.tech-text.big {
	font-size: 1em;
	}
.tech-text p {
	background: #eee;
	text-indent: 0%;
	padding:0.6em 0.7em 0.5em 0.7em;
	color: #000;
	margin-bottom: .5em;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;	
	border-radius: 10px;
	}

.tech-text h1{
	background: #ababab;
	padding:0.6em 0.7em 0.5em 0.7em;
	border-radius: 10px;
	color: #fff;
	margin-bottom: .5em;
	font-size: 1em;
	}

.tech-text strong {
	font-family: 'Courier', monospace;
	font-size: 0.6rem;
	font-weight: normal;
	text-transform: uppercase;
	display: inline-block;
	margin-bottom: 1em;
	}
.tech-text ul{	
	background: #eee;
	padding:0.6em 0.7em 0.5em 0.7em;
	border-radius: 10px;
	color: #000;
	margin-bottom: .5em;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;	
	}
.tech-text li {
	list-style: circle outside;
	margin-left: 1em;
	}	
.tech-text strong {
	display: block;
	border-bottom: 2px solid #fff;
	margin-bottom: -.5em;
	padding-bottom: .5em;
	}	

.tech-text.print-sheet .label {
	width: 100%;
	display: block;
	font-family: 'courier', monospace;
	font-size: 0.6rem;
	vertical-align: top;
	}
.tech-text.print-sheet p {
	display: block;
	margin-bottom: .5rem
	}


@media screen and (min-width: 1100px) {

	main {
		padding: 2rem 4rem 1rem 5rem;
		width: 100%;
		margin-top: 4vw;
		}
	.urgent-message {
		font-size: 1.2em;
		font-family: 'Whyte';
		padding:0.3em 0.5em 0.35em 0.5em;
		color: #fff;
		background: #000;
		border-radius: 10px;
		}

	.intro {
		margin-bottom: 2em;
		font-size: 1.2em;
		font-family: 'Whyte';
		}
	.intro h1 {
		position: relative;
		margin-bottom: 1rem;
		font-weight: 900;
		font-size: calc(1vw + 2rem);
		z-index: 1;
		}
	.urgent-message {
		font-size: 1.2em;
		font-family: 'Whyte';
		}

	.full-text {
		columns: 2;
		column-gap: 4vw;
		}
	blockquote {
		font-family: 'WhyteInktrap', sans-serif;
		margin: 1em 0;
		font-size: 1.5em;
		background: #eee;
		color: #000;
		padding:0.3em 0.5em 0.35em 0.5em;
		border-radius: 10px;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
		margin-bottom: 1em;	
		}
	blockquote em{
		font-style: normal;
		line-height: 1.2rem;
		font-size: 0.65rem;
		margin: 0;
		display: block;
		margin-top: .5em;
		}
	.tech-text.print-sheet .label {
		width: 8rem;
		margin-right: .5rem;
		display: inline-block;
		}
	.tech-text.print-sheet p {
		width: calc( 100% - 8.5rem);
		display: inline-block;
		margin-bottom: .5rem
		}

}


/* Sections */

section {
	margin-bottom: 3rem;
	}
.section-title {
	display: block;
	margin-bottom: 1rem;
	}
.section-title .section-headline {
	font-family: 'Courier', monospace;
	font-size: 0.6rem;
	letter-spacing: 0.05em;
	background: #000;
	color: #fff;
	padding:0.3em 0.7em 0.35em 0.7em;
	border-radius: 10px;
	display: table;
	line-height: 1.3em;
	width: 100%;
	margin-bottom: .5em;
	}

@media screen and (min-width: 1100px) {

	section {
		margin-bottom: 4vw;
		}
	.section-title .section-headline {
		display: inline-block;
		width: auto;
		margin-bottom: 0;
		}
	.grid-two .section-title {
		grid-column-end: span 2;
		margin-bottom: -4vw;
		}
	.grid-three .section-title {
		grid-column-end: span 3;
		margin-bottom: -4vw;
		}
	.grid-four .section-title {
		grid-column-end: span 4;
		margin-bottom: -4vw;
		}
	.grid-three .preview .section-title {
		display: block;
		grid-column-end: unset;
		margin-bottom: 2vw;
		}	
	}


/* Filter & Pagination */

.pagination {
	font-family: 'Courier', monospace;
	font-size: 0.6rem;
	font-weight: normal;
	display: block;
	margin-top: 1em;
	}
.pagination a{
	display: inline-block;
	background: #eee;
	padding:0.3em 0.7em 0.35em 0.7em;
	border-radius: 10px;
	color: #000;
	margin-bottom: .5em;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;	
	text-decoration: none	
	}
.pagination a:hover{
	background: #aaa;
	color: #fff;
	}

.pagination a[aria-current="page"]{
	background: #aaa;
	color: #fff;
	}
.filter-buttons {
	display: block;
	font-family: 'Courier', monospace;
	font-size: 0.6rem;
	margin-top: .5em;
	}
.filter-buttons a{
	display: inline-block;
	background: #eee;
	padding:0.3em 0.7em 0.35em 0.7em;
	border-radius: 10px;
	color: #000;
	margin-bottom: .5em;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;	
	text-decoration: none	
	}
.sort-button {
	margin-top: 1em;
	margin-bottom: 1em;
	display: block;
	font-family: 'Courier', monospace;
	font-size: 0.6rem;

	}
.sort-button select {
	font-family: 'Courier', monospace;
	font-size: 0.6rem;
	background: #eee;
	padding:0.3em 3em 0.35em 0.7em;
	border-radius: 10px;
	color: #000;
	border: none;
	width:100%;
	box-sizing:border-box;
	}
.sort-button select, .sort-button option {
	-webkit-appearance: none;
	}
.sort-button .select-wrapper {
	position: relative;
	display: inline-block;
	}
.sort-button .select-wrapper:after {
	content: '\0025BC';
	font: normal normal normal 12px/1 FontAwesome;
	color: #000;
	right: 1em;
	top: 0.5em;
	height: 8px;
	position: absolute;
	pointer-events: none;
	}
.filter-list.years button.click,
.filter-list.years button.ghostbutton {
	font-variant-numeric: tabular-nums;
	}


@media screen and (min-width: 1100px) {

	.pagination {
		font-family: 'Courier', monospace;
		font-size: 0.55rem;
		letter-spacing: 0.05em;
		font-weight: normal;
		display: inline-block;
		margin-left: 1rem;
		margin-top: 0em;
		}
	.filter-buttons {
		display: inline-block;
		margin-left: 1rem;
		font-family: 'Courier', monospace;
		font-size: 0.55rem;
		letter-spacing: 0.05em;
		margin-top: 0em;
		}
	.sort-button {
		display: inline-block;
		margin-left: 1rem;
		font-family: 'Courier', monospace;
		font-size: 0.55rem;
		letter-spacing: 0.05em;
		margin-top: 0em;
		}

	}



/*  IMAGES RASTER --------------------- */

.image {
	margin-bottom: 1em;
	width: 100%;
	}
.image-image{
	width: 100%;
	position: relative;
	}
.image-image-image{
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 10px;
	}
.image-image-image img{
	border-radius: 10px;
	transition: opacity: 0.2s;
	}
.image-image-image img:hover{
	transition: opacity: 1s;
	}
.image-image-image canvas{
	border-radius: 10px;
	transition: opacity: 0.2s;
	}
.image-image-image canvas:hover{
	transition: opacity: 1s;
	}

.image-caption{
	margin-top: .5em;
	font-size: 0.65rem;
	}

.preview .image-image {
	transition: filter 0.5s;
	}
.preview .image-image:hover {
	filter: drop-shadow(10px 0px 20px rgba(0,0,0,.2));
	transition: filter 0.5s;
	}
.preview canvas {
	border-radius: 10px;
	transition: filter 0.5s;
	}
.preview canvas:hover{
	border-radius: 10px;
	cursor: pointer;
	}
.preview img {
	border-radius: 10px;
	transition: filter 0.3s;
	}
.preview img:hover{
	border-radius: 10px;
	cursor: pointer;
	filter: drop-shadow(10px 0px 20px rgba(0,0,0,.2));
	transition: filter 0.5s;
	}




/* Column System */

@media screen and (min-width: 1100px) {

.left {
	float: left;
	}
.right {
	float: right;
	}
.column.two-third {
	width: calc(66.666% - 2vw);
	}
.column.one-third {
	width: calc(33.333% - 2vw);
	}
.column.half {
	width: calc(50% - 2vw);
	}
.column.three-quarter {
	width: calc(75% - 2vw);
	}
.column.quarter {
	width: calc(25% - 2vw);
	}
}


/* Grid System */


.grid {
	align-content:space-start;
	}
@media screen and (min-width: 1100px) {
	.grid.grid-two-and-one {
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-column-gap: 4vw;
		}
	.grid.grid-one-and-two {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-column-gap: 4vw;
		}
	.grid.grid-one {
		display: grid;
		}
	.grid.grid-two {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 4vw;
		grid-row-gap: 4vw;
		}
	.grid.grid-three {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 4vw;
		grid-row-gap: 4vw;
		}
	.grid.grid-four {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 4vw;
		grid-row-gap: 4vw;
		}

	.grid.grid.grid-two .grid-headline {
		width: 100%;
		grid-column: 1 / span 2;
		margin-bottom: -4vw;
		}
	.grid.grid.grid-one .grid-headline {
		width: 100%;
		grid-column: 1;
		height: auto;
		}
	}


/* Buttons */

button {
	font-family: "Whyte", Helvetica, Arial, sans-serif;
	cursor: pointer;
	}
button a {
	text-decoration: none;
	color: inherit;
	}
button:hover {
	cursor: pointer;
	}
button:focus { 
	outline: none; 
	}
.outerbutton {
	position: relative;
	display: block;
	}
.outerbutton.txt {
	position: relative;
	font-size: 1rem;
	margin-right: .5em;
	padding-right: .5em;
	margin-bottom: 1em;
	display: inline-block;
	}

button.click,
button.ghostbutton {
	width: calc(100% - 8px);
	box-shadow: .4em .4em 0 0 #000;
	border: 0.1rem solid #000;
	font-size: 0.9em;
	transition: all 0.2s;
	text-align: left;
	line-height: 1.2em;
	margin: 0;
	padding: 0.3em;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
	}
button.click {
	position: absolute;
	background: #fff;
	top: 0;
	left: 0px;
	transition: all 0.2s;
	}
button.click a:link{
	display: block;
	cursor: pointer;
	}
button.click a:link:hover{
	cursor: pointer;
	}	
.outerbutton:hover button.click {
	box-shadow: 0 0 0 0 #000;
	transition: all 0.2s;
	top: .4em;
	left: .4em;
	}
button.ghostbutton {
	position: relative;
	display: block;
	visibility: hidden;
	padding: 0.3em;
	}


/*--- Forms ----*/

form {
	}
form.newsletter-form {
	margin-bottom: 2rem;
	display: flex;
	width: 100%;
	flex-wrap: wrap
	}
form input[type=search],
form input[type=text],
form input[type=email]{
	border: 2px solid #000;
	height: 1em;
	font-family: "Whyte", Helvetica, Arial, sans-serif;
	font-size: 18pt;
	height: 100%;
	box-sizing: border-box;
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	margin-bottom: 0.2em;
	}

form input[type=search]{
	width: calc(100% - 9em);
	border: none;
	border-bottom: 2px solid #000;
	}
form input[type=search]:focus,
form input[type=text]:focus,
form input[type=email]:focus  {
	outline: none;
	}
form input[type=submit]{
	border: 2px solid #000;
	background: #000;
	color: #fff;
	height: 1em;
	width: 8em;
	font-family: "Whyte", Helvetica, Arial, sans-serif;
	font-size: 18pt;
	height: 100%;
	box-sizing: border-box;
	cursor: pointer;
	transition: all 0.2s;
		}
form input[type=submit]:hover{
	background: #fff;
	color: #000;
		}

form.newsletter-form .content__gdpr {
	font-family: 'Courier', monospace;
	font-size: 0.6rem;	
	margin-top: 1rem;
	margin-bottom: 1rem;
	}

form.newsletter-form input[type=text],
form.newsletter-form input[type=email]{
	margin-right: 0.5em;
	}


@media screen and (min-width: 1100px) {
	form input[type=text],
	form input[type=email]{
		width: calc(33% - 3.3333rem);
		}

	form input[type=search]{
		width: calc(100% - 9em);
		border: none;
		border-bottom: 2px solid #000;
		}
	form input[type=search]:focus,
	form input[type=text]:focus,
	form input[type=email]:focus  {
		outline: none;
		}
	form input[type=submit]{
		border: 2px solid #000;
		background: #000;
		color: #fff;
		height: 1em;
		width: 8em;
		font-family: "Whyte", Helvetica, Arial, sans-serif;
		font-size: 18pt;
		height: 100%;
		box-sizing: border-box;
		cursor: pointer;
		transition: all 0.2s;
			}

}



.filter-list {
	margin-bottom: 1em;
	}
.filter-button, .filter-item {
	font-family: 'Courier', monospace;
	font-size: 0.6rem;
	display: inline-block;
	background: #eee;
	padding:0.3em 0.5em 0.35em 0.5em;
	border-radius: 10px;
	color: #000;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;	
	text-decoration: none;
	}
.filter-button:hover, .filter-button.active, .filter-item:hover, .filter-button.active {
	background: #aaa;
	color: #fff;
	}
.filter-list .outerbutton.txt {
	display: block;
	}

@media screen and (min-width: 1100px) {
	.outerbutton.txt {
		position: relative;
		display: inline-block;
		font-size: 1rem;
		margin-right: .5em;
		padding-right: .5em;
		margin-bottom: 0;
		}
	.filter-list .outerbutton.txt {
		display: inline-block;
		}

 }






/* -------- HEADER ------- */

.header {
	text-transform: lowercase;
	line-height: 1em;
	font-size: 1.2rem;
	padding: 1rem 1rem 0rem 2rem;
	margin-bottom: 3rem;
	}
.header a {
	position: relative;
	border-bottom: 2px solid #fff;
	text-decoration: none;
	line-height: 1em;
	display: inline-block;
	padding-bottom: 0.2em;
	border: none;
	}
.header .peacock-menu {
	display: inline-block;
	float: left;
	position: relative;
	}
.header .worm-menu {
	display: inline-block;
	float: right;
	position: relative;
	}
.header .menu .logo {
	font-weight: 700;
	font-family: 'WhyteInktrap', sans-serif;
	display: inline-block;
	}




.header .mainmenu {
	display: inline-block;
	z-index: 1000;
	position: relative;
	margin-left: -0.3em;
	}
.header .mainmenu .menu-item {
	white-space: nowrap;
	}	
.header .mainmenu a {
	background: transparent;
	padding: 0.05em 0em 0.2em 0.2em;
	border: 1px solid transparent;
	border-radius: 0.4em;
	margin: 0 0em;
	transition: all 0.2s;
	}
.header .mainmenu a.menu-item-last {
	padding:0.05em 0.2em 0.2em 0.2em;
	margin-right: -0.2em;
	}
.header .mainmenu a:hover {
	background: #000;
	color: #fff;
	transition: all 0.2s;
	}
.menu .mainmenu a:hover .menu-comma {
	visibility: hidden;
	}

.menu .mainmenu a.current {
	padding:0.05em 0.2em 0.2em 0.2em;
	background: #000;
	color: #fff;
	}
.menu .mainmenu a.current .menu-comma,
.menu .mainmenu a.current .menu-comma-mobile {
	display: none;
	}

.header .peacock-logo.desktop,
.header .worm-logo.desktop{
	display: none;
	}
.header .peacock-logo,	
.header .peacock-logo.mobile,
.header .worm-logo.mobile{
	display: block;
	}
.header .logo-dash {
	display: none;
	}
.header .peacock-sublogo, 
.header .worm-sublogo{
	display: none;
	}
.header .peacock-sublogo-mobile,
.header .worm-sublogo-mobile {
	display: none;
	}
.header .menu-item-shopping {
	position: relative;
	}
.header .mainmenu .menu-item-shopping a:hover {
	background: #000;
	color: #fff;
	transition: all 0.2s;
	}
.header .mainmenu .menu-item-shopping a:hover:before {
	content: '';
	}

.header .search-logo {
	width: auto;
	text-align: right;
	height: 1em;
	}
.header .search-logo .search-icon{
	width: auto;
	text-align: right;
	height: 1em;
	}
.header .search-area {
	background:#fff;
	position: relative;
	right: 0;
	width: 100%;
	z-index: 9999;
	bottom: 0;
	display: none;
	}
.header .search-area input[type=search]{
	width: 100%;
		}
.header .search-area input[type=submit]{
	width: auto;
	padding: 0em 0.5em;
	margin: 0;
	display: inline-block;
		}
.header .search-area input[type=submit]:hover{
	background: #fff;
	color: #000;
		}





@media screen and (min-width: 1100px) {
	.header {
		text-transform: lowercase;
		line-height: 1.2em;
		margin: 2rem 4rem 1rem 5rem;
		padding: 0;
		position: relative;
		margin-bottom: 0rem;
		display: flex;
		justify-content: space-between;	
		}
	.header .menu {
		flex: 1;
		}	
	.header .menu .logo {
		font-weight: 700;
		font-family: 'WhyteInktrap', sans-serif;
		display: inline-block;
		padding-top: 0.05em;
		border-bottom: 0.13rem solid transparent;
		}
	.header .peacock-logo {
		display: inline-block;
		}

	.header .search-logo {
		width: auto;
		text-align: right;
		height: 1em;
		}
	.header .search-logo .search-icon{
		width: auto;
		text-align: right;
		height: 1em;
		}

	.header .search-area {
		background:#fff;
		position: absolute;
		top: 0;
		right: 2em;
		width: calc(100% - 2em);
		z-index: 9999;
		bottom: 0;
		display: none;
		}
	.header .search-area input[type=search]{
		border: none;
		border-bottom: 2px solid #000;
		height: 1em;
		width: calc(100% - 9em);
		font-family: "Whyte", Helvetica, Arial, sans-serif;
		font-size: 18pt;
		height: 100%;
		box-sizing: border-box;
  		}
	.header .search-area input[type=search]:focus {
		outline: none;
		}
	.header .search-area input[type=submit]{
		border: 2px solid #000;
		background: #000;
		color: #fff;
		height: 1em;
		width: 8em;
		font-family: "Whyte", Helvetica, Arial, sans-serif;
		font-size: 18pt;
		height: 100%;
		box-sizing: border-box;
		cursor: pointer;
		transition: all 0.2s;
  		}
	.header .search-area input[type=submit]:hover{
		background: #fff;
		color: #000;
  		}




	.header .peacock-logo.desktop,
	.header .worm-logo.desktop{
		display: inline-block;
		}
	.header .peacock-logo.mobile,
	.header .worm-logo.mobile{
		display: none;
		}

	.header .logo-dash {
		display: inline;
		}
	.header .peacock-sublogo {
		position: absolute;
		left: 5.8em;
		top: 0;
		z-index: 9;
		display: inline-block;
		padding-top: 0.05em;
		}
	.header .worm-sublogo {
		position: absolute;
		right: 4.4em;
		top: 0;
		z-index: 9;
		display: inline-block;
		padding-top: 0.05em;
		}
	.header .peacock-sublogo-mobile,
	.header .worm-sublogo-mobile {
		display: none;
		}
	.header .peacock-logo:hover + span.mainmenu,
	.header .worm-logo:hover + span.mainmenu {
		z-index: 1;
		width: calc(100% - 4.2em);
		visibility: invisible;
		opacity: 0;
		}
	.header .mainmenu {
		display: inline;
		z-index: 1000;
		background: #fff;
		visibility: visible;
		transition: visibility 0s, opacity 0.1s linear;
		opacity: 1;
		position: relative;
		margin-left: 0em;
		margin-bottom: 1rem;
		}
	.header .mainmenu a {
		background: transparent;
		padding:0.05em 0em 0.2em 0.2em;
		border: 0.13rem solid transparent;
		border-radius: 0.4em;
		margin: 0 -0.1em;
		transition: all 0.2s;
		}
	.header .mainmenu a:hover {
		background: #000;
		color: #fff;
		transition: all 0.2s;
		}
	.menu .mainmenu a.current {
		border: 0.13rem solid #000;
		padding:0.05em 0.2em 0.2em 0.2em;
		border-radius: 0.4em;
		margin: 0;
		}
	.header .menu .logo:hover {
		border-bottom: 0.13rem solid #000;
		}
	.header .menu-item-shopping:before {
		content: ' & ';
		}
	.menu .mainmenu a .menu-comma-mobile {
		display: none;
		}
	.header .menu-item-shopping {
		}
	.header .mainmenu .menu-item-shopping a:hover:before {
		content: '↦ ';
		width: 1rem;
		}



	}




/* Home */

.hiddenpage-teaser {	
	text-align: left;
	line-height: 1.2em;
	margin-bottom: 2rem;
	}
.hiddenpage-teaser p {
	background: #eee;
	padding:0.3em 0.5em 0.35em 0.5em;
	border-radius: 10px;
	color: #000;
	margin-bottom: .5em;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;	
	}




/* Previews */


.previews {
	line-height: 1.2em;
	}

.preview {
	margin-bottom: 2rem;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;

	}
.preview .preview {
	margin-bottom: 1rem;
	}
.preview {
	text-decoration: none;
	display: block;
	width: 100%;
	margin-bottom: 2rem;
	}
.preview .preview-infos {
	margin-top: 0.9rem;
	}
.preview .preview-infos .preview-infos-dates {
	font-size: 0.7rem;
	margin-top: 0.5em;
	}
.preview .preview-infos .preview-infos-artist {
	font-family: 'Whyte', sans-serif;
	font-size: 1em;
	}
.preview .preview-infos .preview-infos-title {
	font-family: 'WhyteInktrap', sans-serif;
	font-style: italic;
	font-size: 1em;
	display: inline;
	}
.preview .preview-infos .preview-infos-subtitle {
	font-family: 'WhyteInktrap', sans-serif;
	font-style: normal;
	font-size: 1em;
	display: inline;
	}
.preview.big-preview .preview-infos .preview-infos-artist,
.preview.big-preview .preview-infos .preview-infos-title,
.preview.big-preview .preview-infos .preview-infos-subtitle {
	font-size: 1.5em;
	}
.publishing .preview .preview-infos .preview-infos-artist {
	display: inline;
	}
.preview-infos .preview-shopping {
	margin-top: 1rem;
}


.preview .preview-image{
	height: 35vh;
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 10;
	border-radius: 10px;
	}
.preview.big .preview-image{
	height: 50vh;
	}

.preview img{
	border-radius: 10px;
	}
.preview.artwork img{
	border-radius: 0px;
	}

.preview a:hover .preview-image canvas,
.preview a:hover .preview-image img{
	cursor: pointer;
	}
.preview a.readmore {
	display: inline-block;
	background: #aaa;
	padding:0.3em 0.7em 0.35em 0.7em;
	border-radius: 10px;
	color: #fff;
	margin-bottom: .5em;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;	
	text-decoration: none;	
	font-family: 'Courier', monospace;
	font-size: 0.6rem;
	line-height: 1.3em;	
	text-decoration: none;
	transition: all 0.2s;
	}
.preview a.readmore:hover {
	background: #eee;
	color: #000;
	transition: all 0.2s;
	}
.preview a.preview + a.readmore {
	margin-top: -4vw;
	display: inline-block;
	margin-bottom: 0;
	}


@media screen and (min-width: 1100px) {

.preview {
	margin-bottom: 0;
	}

}



/* Search Results */

.search-results {	
	}
.search-results .search-result {	
	margin-bottom: 0.5rem;
	}
.search-results .search-result a{
	text-decoration: none;
	display: block;
	padding: 0.5em 0;
	}

.search-results .search-result a:hover {
	background: #eee;
	}

.search-results .search-result .result-url{	
	margin-top: 0.2rem;
	font-family: 'Courier', monospace;
	font-size: 0.6rem;
	}
.search-form-results {
	margin-top: 1rem;
	}



/* Making Previews */

.making-overview .previews .preview .preview-infos .preview-infos-title{
	font-weight: normal;
	font-style: normal;
	}

@media screen and (min-width: 1100px) {

.making-overview .previews .preview .preview-infos .preview-infos-title{
	font-size: 1.5em;
	font-weight: normal;
	font-style: normal;
	}

}



/*  Detailpage --------------------- */


.detailpage-intro-image {
	margin-bottom: 5rem;
	}

.detailpage .page-header {
	text-align: center;
	margin: 0;
	padding: 0;
	text-align: left;
	margin-bottom: 3rem;
	}

.detailpage .page-header .small {
	font-size: 1rem;
	letter-spacing: 0em;
	line-height: 1.3em;
	padding: 0;
	}

.detailpage .page-header .main-block{
	font-family: 'WhyteInktrap', sans-serif;
	display: block;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	line-height: 1em;
	text-align: left;
	display: inline-block;
	margin: 0;
	padding: 0;
	}
.detailpage .page-intro {
	margin-bottom: 2rem;
	}
.detailpage .page-header .main-block .group{
	letter-spacing: 0;
	}
.detailpage .page-header .main-block em{
	font-style: italic;
	display: block;
	}

.related {
	margin-top: 4rem;
	}

.image {
	margin-bottom: 1em;
	}
.image img {
	border-radius: 10px;	
	}
.image .image-caption {
	margin-top: 0.5em;
	font-family: 'Whyte', sans-serif;
	font-size: 0.65rem;
	}
.zoom:hover {
	cursor: zoom-in;
	}

@media screen and (min-width: 1100px) {

.detailpage .page-header {
	margin-bottom: 8rem;
	text-align: center;
	margin-right: 10vw;
	margin-left: 10vw;
	}
.detailpage .page-header .main-block{
	font-family: 'WhyteInktrap', sans-serif;
	display: block;
	font-size: 2.5rem;
	letter-spacing: -0.02em;
	line-height: 1.2em;
	text-align: center;
	border: 0.13rem solid #000;
	display: inline-block;
	border-radius: 0.4em;
	padding: 0.1em 0.4em 0.3em 0.4em;
	margin-top: 1rem;
	margin-bottom: 1rem;
	background: #000;
	color: #fff;
	}
.related {
	margin-top: 0rem;
	}
.detailpage .page-intro {
	font-family: 'WhyteInktrap', sans-serif;
	margin: 0 10vw;
	border-radius: 10px;
	border: 0.13rem solid #000;
	padding: 0.5em;
	margin-bottom: 4em;
	font-size: 1.4em;	
	line-height: 1.2em;
	}

}




/* Make page */

.make .text:hover {
	color: #fff;
	transition: color 10s;	
	}
.make .text .hover-text {
	position: absolute;
	color: 000;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity 1s;
	background-image:linear-gradient(45deg,blue,yellow,red,purple);
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	z-index: 999;
	}
.make .text:hover .hover-text {
	opacity: 1;
	transition: opacity 10s;
	}
.image-number {
	width: 1rem;
	height: 1rem;
	display: inline-block;
	text-align: center;
	line-height: 1rem;
	margin-bottom: .5em;
	border-radius: 0.5rem;
	border: 1px solid #000	;
	}


/*  Publish Page --------------------- */


.publish-techniques {
	text-align: left;
	margin-top: 2rem;
	}

.publish .content .text em{
	}

.publish .related {
	margin-top: 2rem;
	}
.publish-biography {
	}


.publish-finalworks {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 4vw);
	}
.publish-finalworks .finalwork{
	width: 100% - 4vw);
	margin-bottom: 4vw;
	margin-right: 4vw;
	}
.printsheet {	
	font-family: 'Pantasia', serif;
	font-family: 'Whyte', sans-serif;
	font-size: 0.65rem;
	text-align: left;
	margin-bottom: 2rem;	
	}
.printsheet p {
	background: #eee;
	padding:0.3em 0.5em 0.35em 0.5em;
	color: #000;
	margin-bottom: .5em;
	}

@media screen and (min-width: 1100px) {
	.publish-techniques {
		text-align: center;
		margin-top: 2rem;
		}
	.publish-finalworks .finalwork{
		width: calc(33.333% - 4vw);
		}
}

.publish-finalworks .finalwork .finalwork-infos {
	margin-top: 1em;
	}
.publish-finalworks .finalwork .finalwork-infos .finalwork-title{
	font-style: italic;
	}
.publish-finalworks .finalwork .finalwork-infos .finalwork-info {
	margin-top: 1em;
	font-family: 'Pantasia', serif;
	font-family: 'Whyte', sans-serif;
	font-size: 0.65rem;
	}
.publish-finalworks .finalwork .finalwork-infos .finalwork-shop {
	font-family: 'Pantasia', serif;
	font-family: 'Whyte', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	}

.publish .makingof-images {
	margin-top: 2rem;
	}
.publish .makingof-images .image{
	margin-bottom: 1rem;
	}



/*  Archive Page --------------------- */

.text.archive {
	}
.text.archive h1,
.text.archive h2,
.text.archive h3,
.text.archive h4,
.text.archive h5
	{
	text-indent: 0%;
	width: 70%;
	min-width: 30em;
	max-width: 60em;
	margin: 0 auto;
	margin-bottom: 1em;
	text-transform: uppercase;
	font-weight: 700;
	font-family: 'WhyteInktrap', sans-serif;

	}

.text.archive p,
.text.archive figure  {
	text-indent: 0%;
	width: 100%;
	margin-bottom: 1em;
	}
.text.archive figure  {
	margin-top: 2rem;
	margin-bottom: 2rem;
	width: 100%;
	}
.text.archive figure.block-video  {
	margin-top: 2rem;
	margin-bottom: 2rem;
	width: 100%;
	position: relative; 
	padding-bottom: 56.25%; 
	padding-top: 25px; 
	height: 0;
	display: block;
	}
.text.archive figure.block-video iframe{
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	}	

.text.archive figure.wide {
	width: 100%;
	margin-bottom: 1em;
	}
.text.archive figure  iframe{
	width: 100%;
	}	
.text.archive figure figcaption {
	font-family: 'Courier', monospace;
	font-size: 0.6rem;
	font-style: normal;
	margin-top: .5rem;
	}
.text.archive .downloads {
	margin: 0 auto;
	margin-bottom: 1em;
	border-radius: 1rem;
	}



@media screen and (min-width: 45em) {

	.text.archive h1,
	.text.archive h2,
	.text.archive h3,
	.text.archive h4,
	.text.archive h5
		{
		width: 70%;
		min-width: 30em;
		max-width: 60em;
		margin: 0 auto;
		}

	.text.archive p,
	.text.archive figure  {
		text-indent: 0%;
		width: 70%;
		min-width: 30em;
		max-width: 60em;
		margin: 0 auto;
		}
	.text.archive .downloads {
		width: 70%;
		min-width: 30em;
		max-width: 60em;
		margin: 0 auto;
		}
	.text.archive figure.block-video  {
		margin-top: 2rem;
		margin-bottom: 2rem;
		width: 70%;
		min-width: 30em;
		max-width: 60em;
		position: relative; 
		padding-bottom: 56.25%; 
		padding-top: 25px; 
		height: 0;
		display: block;
		}
}




/*  IMAGES RASTER & Fluidbox--------------------- */

.image-wrapper{
	margin-bottom: 1rem;
	}
.zoom-image-wrapper {
	position: relative;
	}
.zoom-image-wrapper .image.zoom {
	z-index: 500;
	position: relative;
	}
.zoom-image-wrapper .image.zoom img{
	
	}
.zoom-image-wrapper .image-image{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	}
.zoom-image-wrapper .image-image:hover{
	cursor: pointer;
	}
.zoom-image-wrapper canvas:hover{
	cursor: zoom-in;
	}

/*  Learning PAGE --------------------- */

.preview.learn-ever {
	margin-bottom: 4vw;
	}


/*  C O N T A C T I N G ------------------------*/

.contacting section {
	}

.contact {
	padding-bottom: 0;
	}
.contact .contactgrid {
	margin-bottom: 0;
	}
.contact .contact-infos {
	margin-bottom: 0;
	}
.contact .contact-address p {
	margin-bottom: 1rem;
	}
.contact .contact-opening{
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	text-align: left;
	margin-top: 2rem;	
	}
.contact .contact-opening div {
	background: #eee;
	padding:0.3em 0.5em 0.35em 0.5em;
	border-radius: 10px;
	color: #000;
	margin-bottom: .5em;
	}
.contact .contact-opening div:last-child {
	margin-bottom: 0;
	}

.contact .contact-opening .weekday {
	display: inline-block;
	width: 9em;
	}
.contact .contact-infos .weekday {
	display: inline-block;
	}

.contact-socials {
	margin-top: 1rem;
	}
.contact-social {
	height: 1em;
	width: auto;
	margin-right: .5em;
	}
.contact-social img{
	height: 1em;
	width: auto;
	}

.contact #maplocation {
	height: 50vh;
	width: 100%;
	margin-top: 2rem;
	padding-top: 2rem;
	}
.contact-mailing {
	display: inline-block;
	margin-top: 1rem;
	}
.anchor {
	
	}



.team-grid .team-member {
	position: relative;
	padding-bottom: 2em;
	margin-bottom: 2rem;
	}
.team-grid .team-member .team-member-header {
	margin-bottom: 0.5em;
	}	
.team-grid .team-member-name {
	font-size: 1rem;
	font-family: 'WhyteInktrap', sans-serif;
	font-weight: bold;
	}
.team-grid .team-member-position {
	font-size: 0.7rem;
	}
.team-grid .team-image img{
	border-radius: 10px;
	}

.team-grid .team-member .team-socialmedia{
	position: absolute;
	bottom: 0;
	}

.team-grid .team-member .team-socialmedia .icon{
	height: 1rem;
	display: inline-block;
	border-radius: 0;
	}
.team-grid .team-member .team-socialmedia .icon img{
	height: 1rem;
	width: auto;
	border-radius: 0;
	}


@media screen and (min-width: 45em) {
	.contact {
		grid-template-columns: repeat(2, 2fr);
	}
	.contact #maplocation {
		height: 100%;
		width: 100%;
		padding-top: 2rem;
		margin-top: 0;
		}
	.team-grid .team-member {
		position: relative;
		padding-bottom: 2em;
		margin-bottom: 0rem;
		}


}



/*  F O O T E R ------------------------*/

.footer {
	font-size: 0.65rem;
	margin-right: 1rem;
	padding: 2rem 1rem 1rem 2rem;
	}
.footer a {
	display: inline-block;
	}
.footer > a {
	}
.footer .footer-header, 
.footer .footer-charity,
.footer .footer-contact,
.footer .footer-opening {
	margin-bottom: 1em;
	} 
.footer .footer-socials {
	margin-top: .5em;
	}

.footer-social {
	height: 1em;
	width: auto;
	margin-right: .5em;
	}
.footer-social img{
	height: 1em;
	width: auto;
	}

.social a {
	margin: 0 .75rem;
	padding: .5rem 1rem;
	border: 0.13rem solid #000;
	width: 7.5rem;
	}
.social a:hover {
	background: #000;
	color: #fff;
	}
.legals, .delivery {
	columns: 1;
	display: none;
	position: relative;
	z-index: 100;	
	margin-bottom: 0;
	background: #eee;
	padding: 1rem 1rem 1rem 2rem;
	font-size: 0.7rem;
	}
.legals .tech-text p, .legals .tech-text ul,
.delivery .tech-text p, .delivery .tech-text ul {
	background: #fff;
	color: #000;
	list-style-position: outside;
	}
.legals .cookies {
	margin-top: 4em;
	}
.legals p,
.delivery p{
	margin-bottom: 1em;
	}


@media screen and (min-width: 1100px) {
	.footer {
		font-size: 0.65rem;
		margin-right: 1rem;
		line-height: 1.4em;
		padding: 2rem 4rem 2rem 5rem;
		}
	.footer .footer-header, 
	.footer .footer-charity,
	.footer .footer-contact,
	.footer .footer-opening {
		float: left;
		width: 18%;
		} 
	.footer .footer-address p {
		margin-bottom: 1em;
		}
	.footer-opening-weekday {
		display: inline-block;
		width: 7em;
		}
	.footer .footer-socials {
		margin-top: 1em;
		}
	.footer .footer-legal-togglers {
		float: left;
		width: 28%;
		text-align: right;
		}
	.legals, .delivery {
		columns: 3;
		column-gap: 4vw;
		padding: 3rem 4rem 1rem 5rem;
		}		
	}




/* Shopping */

.shopping-artists-overview .index-index{
	column-count: 1;
	margin-bottom: 3em;
	}

.shopify-buy-frame.shopify-buy-frame--product {
	}

.shopify-buy__product {
	position: relative;
	}
.shopify-buy__product .shopify-buy__btn {
	margin-top: .5em;
	}

.sale {
	text-align: left;
	font-weight: normal;
	margin-top: 1rem
	}
@media screen and (min-width: 1100px) {
	.sale {
		text-align: center;
		margin-top: 0rem;
		}
	.shopping-artists-overview .index-index{
		column-count: 4;
		column-gap: 2em;
		}
	}



/* -------- CONTROLLER ------- */


#togglecontroller {
	position: fixed;
	right: 0rem;
	bottom: 0rem;
	width: 2.6rem;
	height: 16em;
	font-size: 0.65rem;
	pointer-events: none;
	z-index: 10;
	display: none;
	}
#togglecontroller .screentoggle {
	position: absolute;
	left: .5rem;
  	-webkit-transform: rotateZ(90deg);
  	transform-origin: 0 100%;
  	white-space: nowrap;
	z-index: 10;
	}

#togglecontroller .screentoggle .switch {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 16px;
	line-height: 0.9em;
	margin-left: 0.5em;
	margin-right: 0.5em;
	pointer-events: auto;
	}
#togglecontroller .screentoggle .switch input { 
	opacity: 0;
	width: 0;
	height: 0;
	}
#togglecontroller .screentoggle .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	}
#togglecontroller .screentoggle .slider:before {
	position: absolute;
	content: "";
	height: 12px;
	width: 6px;
	left: 2px;
	bottom: 2px;
	background-color: #fff;
	}
#togglecontroller .screentoggle input:checked + .slider {
	background-color: #000;
	}
#togglecontroller .screentoggle input:focus + .slider {
	box-shadow: 0 0 1px #000;
	}
#togglecontroller .screentoggle input:checked + .slider:before {
	transform: translateX(20px);
	}




/* masonry styles */
.grid--masonry {
	}
.grid--masonry > * {
	display: inline-block;
	position: relative;
	width: 10em;
	max-width: 100%;
	height: 5.5em;
	}
@supports (display: grid) {
  .grid--masonry {
	display: grid;
	grid-template-columns: 100%;
	margin-bottom: 4vw;
	grid-template-rows: masonry;
	justify-content: center;
	grid-gap: 4vw;
	}
  .grid--masonry > * {
	align-self: start;
	width: initial;
	height: initial;
	}

}
@supports not (width: Min(10em, 100%)) {
	grid-template-columns: repeat(auto-fit, 10em);
	
@media (max-width: 12em) {
	grid-template-columns: 100%;
	}
}

@media screen and (min-width: 1100px) {
	@supports (display: grid) {
		.grid--masonry {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			}
		.grid--masonry.three-columns {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			}
		.grid--masonry.three-columns .preview.bigpreview {
			grid-column: span 2;
			}
		}
	}
@media screen and (min-width: 800px ) and ( max-width: 1100px) {
	@supports (display: grid) {
		.grid--masonry {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			}
		.grid--masonry.three-columns {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			}
		.grid--masonry.three-columns .preview.bigpreview {
			grid-column: span 2;
			}
		}
	}

@media screen and (min-width: 600px ) and ( max-width: 800px) {
	@supports (display: grid) {
		.grid--masonry {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			}
		.grid--masonry.three-columns {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			}
		}
	}






/* Up Controller */


.back-to-top {
	position: fixed;
	right: 0.5em;
	bottom: 1em;
	z-index: 100;
	width: 2rem;
	height: 2rem;
	z-index: 1000;
	white-space: nowrap;
	pointer-events: auto;
	color: inherit;
}
.back-to-top button{
	font-family: "WhyteInktrap", Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	}


/* -------- SIDEBAR ------- */

#close-button {
	position: absolute;
	right: 0.6rem;
	top: 1rem;
	}
#close-button button {
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1rem;
	line-height: 0em;
	border-radius: 50%;
	}
#close-button button.click,
#close-button button.ghostbutton {
	line-height: 0em;
	border-radius: 50%;
	box-shadow: .2em .2em 0 0 #000;
	}
#close-button button.click {
	position: absolute;
	background: #fff;
	top: 0;
	left: 0px;
	transition: all 0.2s;
	}	
#close-button.outerbutton:hover button.click {
	box-shadow: 0 0 0 0 #000;
	transition: all 0.2s;
	top: .2em;
	left: .2em;
	}

header, main, footer, .legals {
	transition: filter 0.2s
	}
#page-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0; bottom: 0; left: 0; right: 0;
	z-index: 9000;
	display: none;
	background: rgba(255, 255, 255, 0.9);
	}
#page-overlay:hover {
	cursor: pointer;
	}



#sidebar {
	width: 100vw;
	background: #fff;
	top: 0;
	position: fixed;
	left: calc(-100vw + 1rem);
	height: 100vh;
	z-index: 9999;
	transition: all ease 0.4s;
	box-shadow: 10px 00px 12px 0px rgba(0,0,0,0.15); */
	}
#sidebar.open {
	left: 0;
	}	
#sidebar .side-stripe {
	width: 1rem;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	}
#sidebar .sidebar-content {
	position: relative;
	padding: 1rem;
	height: 100%;
	width: calc(100% - 1rem);
	overflow-y: scroll;
	padding-top: 2rem;
	}
#sidebar .publishing-filters, #sidebar .shopping-filters {
	min-height: 80%;
	}


#sidebar .site-index .index-intro{
	line-height: 1.2em;
	margin-bottom: 2em;
	}
#sidebar .site-index .index-intro h1{
	margin-bottom: 0.5em;
	font-size: 1.8rem;
	}

.index-letter {
	padding-top: .5em;
	break-inside: avoid;
	}
.index-letter h1 {
	font-weight: bold;
	text-transform: uppercase;
	margin: 0 auto;
	margin-bottom: .8em;
	border: 0.13rem solid #000;
	background: #000;
	color: #fff;
	width: 2em;
	height: 2em;
	padding-top: 0.3em;
	text-align: center;
	border-radius: 2em;
	transition: all 0.2s;
	font-size: 0.8em;
	}
.index-letter:hover h1 {
	background: #fff;
	color: #000;
	transition: all 0.2s;
	}
.index-letter .index-letter-item{
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	position: relative;
	display: block;
	min-height: 1em;
    }

.index-letter .index-letter-item a.button{
	position: absolute;
	display: block;
	width: 100%;
	text-decoration: none;
	border: 0.13rem solid #000;
	padding: 0.3em 0.5em 0.4em 0.5em;
	box-shadow: 6px 6px #000, 5px 5px #000, 4px 4px #000, 3px 3px #000, 2px 2px #000, 1px 1px #000;
	box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);	
	background: #fff;
	top: 0;
	font-size: 1em;
	transition: all 0.2s;
	text-align: left;
	line-height: 1.2em;
	}
.index-letter .index-letter-item:hover a.button{
	box-shadow: 2px 2px 0px 0px rgba(0,0,0,1);
	transition: all 0.2s;
	top: 6px;
	}
.index-letter .index-letter-item a.ghostbutton{
	position: relative;
	display: block;
	padding: 0.3em 0.5em 0.4em 0.5em;
	visibility: hidden;
	}

@media screen and (min-width: 1100px) {

	#sidebar {
		width: 80vw;
		background: #fff;
		top: 0;
		position: fixed;
		left: calc(-80vw + 2vw);
		height: 100vh;
		z-index: 9999;
		transition: all ease 0.4s;
		box-shadow: 10px 00px 12px 0px rgba(0,0,0,0.15); */
		}
	#sidebar:hover {
		left: calc(-80vw + 2.5vw);
		transition: all ease 0.4s;
		box-shadow: 10px 10px 49px 0px rgba(0,0,0,0.75);
		}
	#sidebar.open {
		left: 0;
		}		
	#sidebar .side-stripe {
		width: 2vw;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		}
	#sidebar .side-stripe:hover {
		cursor: e-resize;
		}
	#sidebar.open .side-stripe:hover {
		cursor: w-resize;
		}

	#close-button {
		position: absolute;
		right: 2rem;
		top: 1rem;
		}
	#close-button button.click,
	#close-button button.ghostbutton {
		width: 2rem;
		height: 2rem;
		font-size: 1.4rem;
		line-height: 0em;
		border-radius: 50%;
		box-shadow: .2em .2em 0 0 #000;
		text-align: center;
		}
	#close-button button.click {
		position: absolute;
		background: #fff;
		top: 0;
		left: 0px;
		transition: all 0.2s;
		}	
	#close-button.outerbutton:hover button.click {
		box-shadow: 0 0 0 0 #000;
		transition: all 0.2s;
		top: .2em;
		left: .2em;
		}

	#sidebar .sidebar-content {
		position: relative;
		padding: 2em;
		padding-top: 4em;
		height: 100%;
		width: calc(100% - 2vw);
		overflow-y: scroll;
		}
	.index-index{
		column-count: 4;
		column-gap: 2em;
		margin-bottom: 3em;
		}
	}



/* -------- Shopping Cart ------- */



#shopify-cart {
	max-width: 500px;
	top: 0;
	z-index: 9999;
	background: #fff;
	}
#shopify-cart.is-active {
	box-shadow: -10px 00px 12px 0px rgba(0,0,0,0.15); */
	}
#shopify-cart .side-stripe {
	width: 1rem;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	}
#shopify-cart .side-stripe:hover {
	cursor: pointer;
	}	
#shopify-cart .shopify-buy__cart {
	padding: 1rem 1rem 1rem 2rem;
	overflow: scroll;
	}
#shopify-cart .shopify-buy__cart .cart-header {
	position: relative;
	}
#shopify-cart .shopify-buy__cart .cart-header #close-button {
	position: absolute;
	right: 0;
	top: -.3em;
	}

#shopify-cart .shopify-buy__cart .cart-line-items {
	position: absolute;
	top: 4rem;
	bottom: 8rem;
	left: 2rem;
	right: 1rem;
	overflow-y: scroll;
	}
#shopify-cart .shopify-buy__cart .shopify-buy__cart-items {
	
	}

#shopify-cart .shopify-buy__cart .cart-footer {
	position: absolute;
	bottom: 1rem;
	left: 2rem;
	right: 1rem;
	height: 5rem;
	}
.click.shopify-buy__btn--cart-checkout {
	text-align: center;
}
#shopify-cart .shopify-buy__cart .cart-footer .subtotal-wrapper	{
	}
.shopify-buy__cart__subtotal__text {
	float: left;
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	font-weight: normal;
	}
.shopify-buy__cart__subtotal__price {
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	font-weight: normal;
	float: right;
	text-align: right;
	}
.shopify-buy__cart__notice {
	font-size: 0.6rem;
	font-weight: normal;
	margin-bottom: .5rem;	
	margin-top: .5rem;
	}
#shopify-cart .shopify-buy__cart .cart-footer .cart-checkout {
	text-align: center;
	}
#shopify-cart .shopify-buy__cart .shopify-buy__cart-item {
	margin-bottom: 1rem;
	position: relative;
	min-height: 80px;
	}

.shopify-buy__cart-item__title {
	font-size: 0.8rem;
	font-style: italic;
	width: calc( 100% - 4rem);
	display: inline-block;
	}
.shopify-buy__cart-item__price {
	text-align: right;
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	font-weight: normal;
	width: 8em;
	float: right;
	}
.shopify-buy__quantity-container {
	margin-top: .5rem;
	}
.outerbutton.txt.shop-quantity {
	margin: 0;
	padding-right: 0;
	}
.shop-quantity .outerbutton.txt {
	display: inline-block;

	}
.shop-quantity button.click,
.shop-quantity button.ghostbutton {
	width: 1rem;
	height: 1rem;
	font-size: 0.8rem;
	line-height: 0em;
	border-radius: 50%;
	padding: 0;
	box-shadow: .2em .2em 0 0 #000;
	text-align: center;
	}
.shop-quantity button.click {
	position: absolute;
	background: #fff;
	top: 0;
	left: 0px;
	transition: all 0.2s;
	}	
.shop-quantity.outerbutton:hover button.click {
	box-shadow: 0 0 0 0 #000;
	transition: all 0.2s;
	top: .2em;
	left: .2em;
	}

.shopify-buy__cart-item__quantity-input {
	border: 0.1rem solid #000;
	height: 1.2rem;
	width: 2rem;
	border-radius: 10px;
	margin: 0;
	text-align: center;
	}
.shopify-buy__cart-item.is-hidden {
  	animation: flipOut 1ms ease;
	}
@keyframes flipOut {
  from {
    max-height: none;
    transform: none;
    opacity: 1;
  }
  to {
    max-height: 0;
    transform: rotatex(90deg) translatey(-50%);
    opacity: 0;
  }
}	

@media screen and (min-width: 1100px) {
	#shopify-cart .shopify-buy__cart {
		padding: 2rem 2rem 2rem 3rem;
		overflow: scroll;
		}
	#shopify-cart .shopify-buy__cart .cart-line-items {
		position: absolute;
		top: 6rem;
		bottom: 8rem;
		left: 3rem;
		right: 2rem;
		overflow-y: scroll;
		}
	#shopify-cart .shopify-buy__cart .cart-footer {
		position: absolute;
		bottom: 2rem;
		left: 3rem;
		right: 2rem;
		height: 5rem;
		}		
	.shopify-buy__cart-item__image	{
		position: absolute;
		width: 80px;
		height: 80px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left top;
		}
	.shopify-buy__cart-item__title {
		margin-left: 100px;
		font-size: 0.8rem;
		font-style: italic;
		}
	.shopify-buy__cart-item__price {
		float: right;
		text-align: right;
		font-size: 0.7rem;
		font-variant-numeric: tabular-nums;
		font-weight: normal;
		}
	.shopify-buy__quantity-container {
		margin-left: 100px;
		margin-top: .5rem;
		}

	}