/* all */
body {
	position: relative;
	margin: 0;
	font: 100%/1.732 "Fedra Sans Screen 6",helvetica,arial,sans-serif;
	padding: 11.1111% 11.1111% 0;
	padding: 11.1111vh 11.1111vw 0;
	padding: calc(11.1111vh + 1.8em) 11.1111vw 0;
}
.crazy-vh body {
	padding: calc(11.1111% + 1.8em) 11.1111vw 0;
}
details {
	transition: .1s .1s;
	top: 0;
}
/* details[open] {
	position: fixed;
	left: 0;
	top:0;
	right: 0;
	bottom: 0;
	background-color: white;
	z-index: 2;
	padding: 11.1111vmin;
}
details[open] article {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	gap: 1em;
	position: relative;
	z-index: 1;
}
details[open] summary {
	position: absolute;
	left: 0;
	top:0;
	right: 0;
	bottom: 0;
	padding: calc(5.5555vmin - 1em) 0 0 11.1111vmin;
}
details[open] summary:hover {
	background-color: lightgoldenrodyellow;
} */

dl,
.list,
.booklist {
	-webkit-columns: 15em;
	-moz-columns: 15em;
	columns: 15em;
	-webkit-column-gap: 5.5555vw;
	-moz-column-gap: 5.5555vw;
	column-gap: 5.5555vw;
	margin: 0;
	padding: 0;
}
.books dl,
.books .list {
	-webkit-columns: 12em;
	   -moz-columns: 12em;
	        columns: 12em;
	-webkit-column-gap: 5.5555vw;
	   -moz-column-gap: 5.5555vw;
	        column-gap: 5.5555vw;
}
.crazy-vh dl,
.fix-safari dl,
.crazy-vh ul,
.fix-safari ul {
	-webkit-column-gap: 2.99982em;
	-moz-column-gap: 2.99982em;
	column-gap: 2.99982em;
}
dl:empty,
ul:empty {
	display: none;
}
@media (min-width: 60em) {
	dd:first-of-type:nth-last-of-type(-n + 8),
	dd:first-of-type:nth-last-of-type(-n + 8) ~ dd{
		-webkit-column-span: all;
		   -moz-column-span: all;
		        column-span: all;
		display: block;
		overflow: hidden;
		max-width: 30vw;
	}
}
.year {
	-webkit-column-span: all;
	-moz-column-span: all;
	column-span: all;
	display: block;
}
h1, h2, h3, dt, .month {
	font-family: "Irma 6",helvetica,arial,sans-serif;
	font-weight: 900;
}
h1, p {
	max-width: 39.836em;
}
h1 + p {
	margin: -1em 0 1em;
}
p {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	    hyphens: auto;
}
h1 {
	font-size: 2.99982em;
	font-size: calc(2vw + 2vh + 1vmin);
	line-height: 1.2;
	margin: 0 0 5.5555vh;
}
.crazy-vh h1 {
	font-size: 2.99982em;
}
section {
	margin: 0 0 22.2222%;
	margin: 0 0 22.2222vh;
}
.crazy-vh section {
	margin: 0 0 22.2222%;
}
section:after {
	content: '';
	display: block;
	clear: right;
}
.description {
	margin: 1em 0;
	position: relative;
}
.description > p {
	background: white;
	margin: 0;
	font-size: 1em;
}
.description .paid {
	background: aquamarine;
}
.description > div {
	padding: 35.2539062% 0 0;
	background: url(books/boeken1.jpg) no-repeat 58% 50%;
	background-size: cover;
	margin: 0 -11.111vw 1em;
	width: 100vw;
	border: solid;
	border-width: 1px 0;
}
.description > .latest {
	padding: 0;
	background: none;
	background-size: auto;
	width: 30%;
}
.description > .latest img {
	width: 100%;
}
#images {
	background: none;
	padding: 0;
	border: none;
}
#images > div {
	display: inline-block;
	width: 16.66666%;
	background-size: 100% 100%;
}
#images > div img {
	width: 100%;
	height: auto;
}
@media (max-width: 1050px) {
	.description > div {
		background: url(books/boeken1-middel.jpg) no-repeat 58% 50%;
		background-size: cover;
	}
}
@media (max-width: 525px) {
	.description > div {
		background: url(books/boeken1-klein.jpg) no-repeat 58% 50%;
		background-size: cover;
	}
}
@media  (min-aspect-ratio: 1/1),
 		(min-width: 46em) {
	.description {
		display: -webkit-box;
    	display: -ms-flexbox;
    	display: -webkit-flex;
    	display: flex;
	}
	.description > p {
		min-width: 25em;
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 1px;
		    -ms-flex: 1 1 1px;
		        flex: 1 1 1px;
	}
	.description > div {
		//width: 50%;
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 1px;
		    -ms-flex: 1 1 1px;
		        flex: 1 1 1px;
		margin: 0 -11.111vw 0 5.5555vw;
		padding: 0;
		-webkit-box-ordinal-group: 2;
    	-webkit-order: 1;
    	-ms-flex-order: 1;
    	order: 1;
		border-width: 1px 0 1px 1px;
	}
	#images div {
		width: 50%;
	}
	#images div:nth-of-type(-n + 2) {
		display: none;
	}
}
@media (min-width: 50em) {
	#images div:nth-of-type(1n) {
		width: 33.33333%;
		display: inline-block;
	}
}
@media (min-width: 58em) {
	#images div:nth-of-type(1n) {
		width: 50%;
		display: inline-block;
	}
	#images div:nth-of-type(-n + 4) {
		display: none;
	}
}
@media (min-width: 66em) {
	#images div:nth-of-type(1n) {
		width: 33.33333%;
		display: inline-block;
	}
	#images div:nth-of-type(-n + 3) {
		display: none;
	}
}
@media (min-width: 74em) {
	#images div:nth-of-type(1n) {
		width: 25%;
		display: inline-block;
	}
	#images div:nth-of-type(-n + 2) {
		display: none;
	}
}
@media (min-width: 82em) {
	#images div:nth-of-type(1n) {
		width: 20%;
		display: inline-block;
	}
	#images div:nth-of-type(-n + 1) {
		display: none;
	}
}
@media (min-width: 90em) {
	#images div:nth-of-type(1n) {
		width: 16.66666%;
		display: inline-block;
	}
}

.crazy-vh h1 {
	margin: 0 0 1em;
}
h2 {
	font-size: 1.732em;
	clear: both;
	font-weight: 800;
}
h3 {
	font-size: 1.1em;
	font-weight: 700;
}
@media (max-width: 39em) {
	.crazy-vh h1 {
		font-size: 1.732em;
	}
	h2 {
		font-size: 1.1em;
	}
	nav h3 a,
	h3 a,
	h3 {
		color: #666;
	}
}
a {
	color: blue;
	-webkit-transition: .2s;
	        transition: .2s;
}
a:hover,
a:focus {
	color: red;
	background: yellow;
}
a:active {
	color: yellow !important;
	background: yellow !important;
}
*::-moz-selection {
	background: yellow;
}
em, q, i {
	font-style: italic;
}
q::before {
	content: '“';
}
q::after {
	content: '”';
}
blockquote {
	margin: 0 0 5.5555vh;
	padding: 0;
}
.crazy-vh blockquote {
	margin: 0 0 2.999em;
}
blockquote p {
	font-size: 1.732em;
	max-width: 32em;
	line-height: 1.2;
	margin: 0;
	font-style: italic;
}
@media (max-width: 39em) {
	blockquote p {
		font-size: 1em;
		line-height: 1.732;
		max-width: 39.836em;
	}
}
blockquote p::before {
	content: '“';
}
blockquote p::after {
	content: '”';
}
blockquote cite {
	font-style: normal;
	margin: 1em 0 0;
}
blockquote cite::before {
	content: '— ';
}

[href="#nav"] {
	color: black;
}

.filter {
	margin: 11.1111vh 0 1em;
}

dl + h2 {
	margin: 11.1111vh 0 1em;
}
.crazy-vh dl + h2 {
	margin: 11.1111% 0 1em;
}
dd + dt {
	margin: 1em 0 0;
}
dd,li,
.booklist article,
article div {
	list-style: none;
	margin: 0;
	padding: .3em 0;
	//border: solid silver;
	//border-width: 0 0 1px;
	display: inline-block;
	width: 100%;
}
.books dd,
.books li
.books div {
	border: solid silver;
	border-width: 0 0 1px;
}
.books dd > span,
.books li > span,
.books div > span {
	font-size: .9em;
	display: block;
}
dd img,
li img,
div img {
	width: 20%;
	height: auto;
	float: left;
	margin: 0 1em 1em 0;
}
.bookimages dd img,
.bookimages li img,
.bookimages div img {
	width: auto;
	height: auto;
	max-width: 20%;
	max-height: 75px;
	border: solid silver;
	border-width: 0 1px 1px 0;
}
.has-border {
	border: 1px solid hsl(0, 0%, 75%);
}
dd p,
li p,
div p {
	margin: 0;
}
dd  p > span,
li  p > span,
div p > span {
	font-size: .9em;
	display: block;
}
dd a,
li a,
div a {
	color: black;
	text-decoration: none;
	font-style: italic;
}
dd a:hover,
dd a:focus,
li a:hover,
li a:focus,
div a:hover,
div a:focus {
	background: silver;
	color: white;
}
dd .peecho-print-button,
li .peecho-print-button,
div .peecho-print-button {
	color: red;
}
dd .peecho-print-button:hover,
dd .peecho-print-button:focus,
li .peecho-print-button:hover,
li .peecho-print-button:focus,
div .peecho-print-button:hover,
div .peecho-print-button:focus {
	color: white;
	background: red;
}
dd .peecho-btn-outer::before,
li .peecho-btn-outer::before,
div .peecho-btn-outer::before {
	content: 'buy this book';
}
dd a:hover .peecho-btn-outer::before,
li a:hover .peecho-btn-outer::before,
div a:hover .peecho-btn-outer::before {
	background: red;
	color: white;
}
dd .peecho-btn-text,
li .peecho-btn-text,
div .peecho-btn-text {
	display: none;
}
/* Navigation */

#nav {
	position: absolute;
	opacity: 0;
	top: -100%;
	-webkit-transition: opacity .3s;
	        transition: opacity .3s;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
            align-content: stretch;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}
@media (max-width: 30em) {
	#nav {
		font-size: .9em;
	}
}
#nav:target,
#nav.target,
#nav:focus-within {
	opacity: 1;
	//position: fixed;
	top: 0;
	right: 0;
	left: 0;
	height: 100%;
	margin: 0;
	background: hsla(0,0%,0%,.85);
	padding: 5.5555vh 22.2222vw;
}
.crazy-vh #nav:target,
.crazy-vh #nav.target {
	padding: 5em 22.2222vw;
}
@media (max-width: 81em) {
	#nav:target,
	#nav.target {
		padding: 5.5555vh 11.1111vw;
	}
	.crazy-vh #nav:target,
	.crazy-vh #nav.target {
		padding: 5em 11.1111vw;
	}
}
/* #nav > h2 {
	position: absolute;
	width: 100%;
	left: 0;
	margin: 4vh 0;
	text-align: center;
}
.crazy-vh #nav > h2 {
	margin: 1em 0;
} */
#nav > div {
	/* -webkit-columns: 13em;
	-moz-columns: 13em;
	columns: 13em; */
	//border: 1px solid black;
	background: hsla(0,0%,100%,.9);
	padding: 4em 11.1111%;
	box-shadow: 0 0 0 1px white;
	max-width: 40em;
	box-sizing: border-box;
}
.crazy-vh #nav > div {
	padding: 4em 11.1111%;
}

#nav section {
	margin: 0;
	display: inline-block;
    width: 100%;
}
#nav h2 {
	margin: 0;
}
#nav a {
	color: black;
	text-decoration: none;
	display: block
}
#nav a:hover,
#nav a:focus {
	color: red;
}
#nav > a {
	text-align: right;
	margin-top: -1em;
	width: 100%;
	max-width: 40em;
	box-sizing: border-box;
}
nav a h3 {

}
#nav ul {
	margin: 1.732em 0 2.9999em;
	padding: 0;
}
#nav p {
	font-style: italic;
	margin: 0 0 1em;
}
#nav li p {
	margin: 0;
}
#nav h3 + p {
	font-style: normal;
	font-family: inherit;
}
#nav h3 {
	margin: 0;
}
#nav h4 {
	font-weight: bold;
	margin: 0;
}
#nav a h4::after {
	content: ' ⇢';
	font-weight: normal;
	font-family: helvetica,arial,sans-serif;
}


body > footer p {
	display: block;
	-webkit-columns: initial;
	-moz-columns: initial;
	columns: initial;
	overflow: hidden;
	margin: 0 11.1111vw 0 0;
	max-width: 41.836em;
	padding: 1em 0;
}



nav:first-child {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	line-height: 2;
	z-index: 2;
	text-align: right;
	background: black
}
nav:first-child a {
	color: white;
	margin: 0 1em 0 0;
	text-decoration: none;
	list-style: none;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	background: url('menu.svg') no-repeat 0px 50% / auto 125%;
	padding: 0 0 0 1.5em;
}
nav:first-child a:hover,
nav:first-child a:focus {
	opacity: .75;
}
nav:first-child .showingMenu {
	opacity: 1 !important;
	color: black;
	background: url('close.svg') no-repeat 0px 50% / auto 125%;
}
nav:first-child .showingMenu:before {
	content: 'Close';
	color: white;
	position: absolute;
}


/* @group shop-layout {{{
================================================================= */

	.shop-layout {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
	.shop-layout img {
		width: 71px;
	}
	.shop-layout h1, .shop-layout h2, .shop-layout h3, .shop-layout h4 {
	  margin: 0;
	}

	.shop-layout h1 {
		font-size: 1.414em;
		margin: 0 0 5.5555vh;
		text-align: right;
		padding: 0 .5em;
	}
	.shop-layout section + section > h1 {
		text-align: left;
	}

	.shop-layout h2 {
		font-size: 1em;
	}
	@media (min-width: 40em) {
		.shop-layout h1 {
			font-size: 1.999em
		}
		.shop-layout h2 {
			font-size: 1.414em;
		}
		.shop-layout section + section > h1::before {

		}
	}
	.shop-layout section > a {
		display: block;
		text-decoration: none;
		color: black;
		margin: 0 0 5.5555vh;
	}
	.shop-layout ul {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
		list-style: none;
		margin: 0;
		padding: 0;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
	.shop-layout img {
		max-width: 71px;
		width: 100%;
		display: block;
		border: solid white;
		border-width: 0 1px 1px 0;
	}
	@media
	(-webkit-min-device-pixel-ratio: 2),
	(min-resolution: 192dpi) {
	    .shop-layout img {
			border-width: 0 .5px .5px 0;
		}
	}
	.shop-layout article,
	.shop-layout aside {
		width: 10em;
	}
	@media (min-width: 40em) {
		.shop-layout article,
		.shop-layout aside {
			width: 20em;
		}
	}

/* @end shop-layout }}} */

/* Sold out! */
dd {
	position: relative;
}
.sold {
	font-weight: bold;
	color: red;
}

.booklist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	grid-column-gap: 5vw;
}
.booklist article {
	position: relative;
}
.booklist a::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.booklist h1 {
	line-height: 1;
}
.booklist h2 {
	font-size: 1em;
	line-height: 1.2;
}
.booklist h2 a {
	text-decoration: none;
	color: inherit;
}
.booklist h2 a:hover,
.booklist h2 a:focus {
	color: red;
}
.booklist img {
	border: 1px solid silver;
	width: auto;
	height: auto;
	max-width: 100%;
	margin: auto;
	display: block;
}
#fancy-tab {
	z-index: -1;
	position: absolute;
	left: 50vw;
	top: 50vh;
	right: 50vw;
	bottom: 50vh;
	background: yellow;
	transition: left .2s .05s,
				right .2s,
				bottom .2s,
				top .2s .05s,
				opacity .3s,
				border 0s .3s;
}
#fancy-tab.is-big {
	border: .3em dotted;
}
#fancy-tab.blur {
	opacity: 0;
}
