/* ------------------------------------------------  
	XANDER

	Stylesheet door Hidde de Vries in opdracht
	van Eva Bomans en Xander Uitgevers


	VOLGORDE

	# Algemene styles (html elementen)
	# Styles per deel van de pagina (bv .masthead, .sidebar)
	# Componenten (bv .button, .question)
	# Functionele classes (bv .visually-hidden, .align-right)


	OPMERKINGEN

	De styles zijn voor mobiel en groter, tenzij in een @media(min-width:x) regel, dan zijn ze
	voor groter dan mobiel.

	Roboto wordt ingeladen via een externe provider; als hier iets fout gaat wordt het
	alternatief ('sans-serif') gebruikt.

   ------------------------------------------------ */


/* ------------------------------------------------  
	ALGEMENE STYLES
   ------------------------------------------------ */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

header, footer, aside, nav {
	display: block;
}

body {
	margin: 0 auto;
	padding: 1em;
	font-family: "Roboto", sans-serif;
	line-height: 1.4;
	position: relative;
	max-width: 65em;
	margin: 0 auto;
}

a {
	color: #333;
}

a:visited {
	color: #000;
}

a:hover,
a:focus {
	color: #DE0F1F;
}

p a /* alleen links binnen <p>'s */ {
	text-decoration: none;
	border-bottom: 1px dotted;
}

a img {
	border: 0;
}

p {
	margin: 1em 0;
}

h1 {
	font-size: 150%;
	line-height: 1.2;
	margin-bottom: 0.5em;
	font-weight: 400;
}

h2 {
	font-size: 110%;
	margin-bottom: 1em;
	font-weight: bold;
}

.main__content--boek h1 {
	font-size: 110%;
	margin: 0 0 0.25em 0;
}
.main__content--boek h2 {
	font-size: 160%;
	margin-bottom: 0.5em;
	line-height: 1.1;
}

h3 {
	font-size: 90%;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: #666;
	margin: 1em 0 0.25em;
}

h3 + p {
	margin-top: 0;
}

img, audio, video, picture {
	max-width: 100%;
	height: auto;
}

iframe {
	max-width: 100%;
}

blockquote {
	font-weight: 400;
}

blockquote .quote {
	margin-right: 0.1em;
}

blockquote .cited {
	font-style: italic;
}

blockquote p {
	margin-bottom: 0;
}

input,
textarea,
select {
	font-size: 1em;
	font-family: "Roboto", sans-serif;
	padding: 0.25em;
	width: 100%;
	max-width: 16em;
}

input[type=submit],
button[type=submit] {
	width: auto;
	margin: 1em 0;
	padding: 0.5em 1em;
	background: #000;
	color: #fff;
	border: 0;
	cursor: pointer;
}


/* ------------------------------------------------  
	PER DEEL VAN DE PAGINA
   ------------------------------------------------ */

.main__content {
	margin-bottom: 2em;
}

.main__sidebar {
	clear: both;
}

.main--has-thumb .main__thumb {
	max-width: 30%;
	float: right;
	margin: 0 0 1em 2em;
}

.shops-link {
	padding: 0 1em 1em 0;
}

@media(min-width: 50em) {
	.wrapper--main {
		overflow: hidden; /* hold floats */
		max-width: 1050px;
	}
	.wrapper--main-home {
		max-width: 1090px;
	}

	.main {
		overflow: hidden; /* hold floats */
	}

		.main__content {
			width: 70%;
			float: left;
			margin-bottom: 0;
			padding: 0 1.5em 0 0;
		}

		.main__content--home {
			width: auto;
			float: none;
			clear: both;
			padding-right: 0;
		}

		.main__sidebar {
			width: 30%;
			float: right;
			clear: none;
		}

		.main--has-thumb .main__content {
			width: 55%;
			padding: 0 1.5em;
		}

		.main--has-thumb .main__thumb {
			width: 20%;
			max-width: none;
			float: left;
			padding-right: 1em;
			margin: 0 0 0 0;
		}

		.main--has-thumb .main__sidebar {
			width: 25%;
			padding: 0 1.5em;
		}
	
	.additional-content {
		font-size: 85%;
	}

	.shops-link {
		display: inline-block;
		vertical-align: middle;
		margin-right: 1em;
	}

	.questions {
		width: 30%;
		padding-right: 2em;
		float: left;
		display: block;
	}
		.questions .question {
			width: 44%;
			min-width: 130px;
			float: left;
			margin-right: 3%;
			margin-bottom: 1.5%;
		}
}

.masthead {
	margin-bottom: 1em;
}

.masthead__logo {
	display: block;
}
		.masthead__logo--large {
			display: none;
		}
		.masthead__logo img {
			max-width: 360px;
		}

@media(min-width: 35em) {
	.masthead__logo--small {
		display: none;
	}
	.masthead__logo--large {
		display: block;
	}
}
@media(min-width: 60em) {
	.masthead {
		position: relative;
		min-height: 90px;
		margin-bottom: 0;
		padding-left: 520px;
	}
		.masthead__logo {
			position: absolute; 
			left: 0;
			padding-right: 0;
			max-width: 100%;
		}

			.masthead__logo img {
				max-width: 100%;
				margin-left: -0.8em;
			}

		.masthead blockquote {
			padding: 1em 0 0 0;
		}
}

@media(min-width: 50em) {
	.sidebar {
		overflow: hidden;
	}
		.sidebar__thumb {
			width: 20%;
			float: left;
			text-align: right;
			padding: 0 1em;
		}
			.sidebar__thumb img {
				display: inline-block;
				vertical-align: top;
			}
		.sidebar__main {
			width: 55%;
			float: left;
			padding: 0 1.5em;
		}
			.sidebar__main p {
				margin-top: 0;
				font-size: 85%;
			}
}

.footer {
	font-size: 0.85em;
	text-align: center;
	color: #666;
	padding: 4em 0 2em 0;
}
	.footer a {
		color: #666;
		text-decoration: underline;
	}


/* ------------------------------------------------  
	COMPONENTEN
   ------------------------------------------------ */

.button {
	background-color: #000;
	color: #fff;
	display: inline-block;
	text-decoration: none;
	padding: 0.75em 1em;
	text-align: center;
}

.button:visited {
	color: #fff;
}

.button:hover,
.button:focus {
	background-color: #666;
	color: #fff;
}

.button--order {
	background-color: #FF494B;
}

.nav {
	margin: 2em 0;
}

	.nav li {
		list-style: none;
		margin: 0 -1em;
	}

	.nav a {
		text-decoration: none;
		display: block;
		padding: 1em;
		border-bottom: 1px dotted #777;
	}

	.nav .menu-item-845 a { 
		color: #DE0F1F; 
	}

	.nav .menu-item-845 a:hover,
	.nav .menu-item-845 a:focus {
		color: #000;
	}

	.nav .link--social {
		display: inline-block;
		vertical-align: top;
		margin: 0 0;
	}

	.nav .link--social a {
		display: inline-block;
		vertical-align: top;
		padding: 1em 1em 1em 0;
		border-bottom: 0;
	}

	.nav li:first-child a {
		border-top: 1px dotted #777;
	}

	.nav--hidden {
		display: none;
	}

	.nav__search {
		position: relative;
	}

		.nav__search label {
			display: none;
		}

		.nav__search input[type=text] {
			padding-right: 50px;
			height: 30px;
			font-size: 16px;
			padding: 0.25em;
		}

		.nav__search button[type=submit] {
			position: absolute;
			top: 0;
			right: 0;
			margin: 0;
			padding: 0.25em 1em; 
			height: 30px;
		}

@media(min-width: 50em) {
	.nav li {
		margin: 0 0;
	}
	
		.nav a {
			display: inline;
			padding: 0 0;
			border-bottom: 0;
		}

		.nav li:first-child a {
			border-top: 0;
		}

		.nav .link--social a {
			padding: 0;
		}

		.nav .current-menu-item a {
			color: #999;
		}

	.nav--hidden {
		display: block; /* de 'nav-hidden' class kan op desktop bestaan, maar hide dan niets */
	}

	.nav--header {
		margin: 2em 0 2em 0;
	}
		.nav--header ul {
			display: inline-block;
			vertical-align: top;
			margin-right: 1em;
		}
		.nav--header li {
			display: inline-block;
			vertical-align: top;
			margin-right: 1em;
		}

		.nav--header .link--social {
			margin-right: 0.25em;
		}

		.nav--header a {
			font-weight: 900;
			text-transform: uppercase;
		}

	.nav--footer {
		display: none;
	}

	.nav__search {
		display: inline-block;
		vertical-align: top;
		max-width: 180px;
		margin-top: -0.25em;
	}
}

.blogpost > a {
	text-decoration: none;
	padding: 1em;
	border: 1px solid #333;
	margin: 0 1em 1em 0;
	display: block;
}
.blogpost > a:hover,
.blogpost > a:focus {
	text-decoration: none;
	color: #000;
	background: #eee;
}
.blogpost a > p,
.blogpost a > h2 {
	margin: 0;
}
.blogpost a > h2 {
	font-size: 100%;
}
.blogpost__date {
	font-size: 75%;
	color: #666;
	margin: 0.25em 0 0.5em 0;
	font-weight: bold;
}
.blogpost__excerpt p:last-child::after {
	content: '\a0>>';
	color: #DE0F1F;
}

@media(min-width: 50em) {
	.blogpost {
		display: inline-block;
		vertical-align: top;
		width: 32%;
	}
	.blogpost img {
		width: calc(100% + 2em);
		max-width: calc(100% + 2em); /* make sure this max-width value reset works in the same browsers as the width value above */
		margin: 1em -1em -1.375em -1em;		
	}
	.blogpost--odd img {
		margin: -1em -1em 1em -1em;
	}
}

@media(min-width: 60em) {
	.blogpost {
		width: 19%;
	}
}

.search-result h2 {
	margin-bottom: 0.25em;
	font-size: 1em;
}
.search-result p {
	margin-top: 0;
}

.question__img {
	width: 100%;
}

.question a:hover,
.question a:focus {
	color: #000;
}

@media(min-width: 50em) {
	.question {
		position: relative;
	}

	.question__content {
		opacity: 0;
		transition: opacity 0.2s ease-in-out;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		padding: 1em;
		background-color: #fff;
	}

		.question:hover .question__content,
		.question:focus .question__content {
			color: #000;
		}

		.question__theme,
		.question__q {
			font-size: 0.75em;
			display: block;
		}

		.question__theme {
			display: block;
			text-transform: uppercase;
			font-weight: bold;
			margin-bottom: 0.5em;
		}

	.question:hover .question__content,
	.question:focus .question__content {
		opacity: 1;
	}
}

.latest-news {
}
	.latest-news h2 {
		margin-bottom: 0;
	}
	.latest-news li {
		list-style: none;
		border-top: 1px solid #aaa;
	}

	.latest-news li:first-child { 
		border-top: 0;
	}

		.latest-news__thumb {
			width: 22.5%;
			display: inline-block;
			vertical-align: top;
			margin-right: 5%;
			max-width: 50px;
		}
		.latest-news__title {
			width: 70%;
			display: inline-block;
			vertical-align: top;
		}
		.latest-news a {
			display: block;
			padding: 1em 0;
			text-decoration: none;
		}

		.latest-news .latest-news__thumb-holder {
			position: relative;
			padding-left: 90px;
			min-height: 120px;
		}

		.latest-news__date {
			text-decoration: none;
			font-size: smaller;
			font-weight: 700;
			color: #666;
			display: block;
			font-size: 75%;
		}

@media(min-width: 50em) {
	.latest-news {
		padding: 0 1em;
	}
}

.sidebar-item {
	margin-bottom: 2em;
}

.list--book-thumbs li {
	list-style: none;
	display: inline-block;
	vertical-align: top;
}

.list--share-this {
	margin: 0.5em 0;
}
	.list--share-this li {
		list-style: none;
		display: inline-block;
		vertical-align: middle;
		margin-right: 0.5em;
	}
	.list--share-this .icon {
		width: 1.5em;
		height: 1.5em;
	}
	.list--share-this .icon:hover,
	.list--share-this .icon:focus {
		fill: #FF494B;
	}

.shops {
	max-width: 20em;
}

.main--books,
.theme-books {
	overflow: hidden;
}
.theme-books {
	background-repeat: no-repeat;
	background-position: bottom center;
}
.main--books .book,
.theme-books .book {
	width: 49%;
	display: inline-block;
	vertical-align: top;
	padding: 0.25em;
	position: relative;
}
	.main--books .book img,
	.theme-books .book img {
		border: 1px solid #ccc;
	}
	.book__title {
		position: absolute;
		opacity: 0;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding: 1em;
		background-image: linear-gradient(rgb(0,0,0), rgba(0,0,0,0));
		color: #fff;
	}
	.book__title::after {
		content: '\a0>>';
		color: #DE0F1F;
	}

@media(min-width: 30em) {
	.main--books,
	.theme-books {
		overflow: visible;
	}
	.main--books .book,
	.theme-books .book {
		width: 18%;
		display: inline-block;
		vertical-align: top;
		margin: 0 2% 0.6em 0;
		float: none;
		padding: 0;
	}
	.main--books .book img,
	.theme-books .book img {
		transition: 0.3s opacity ease-in-out;
	}
	a.book:hover img,
	a.book:focus img {
		opacity: 0.4s;
	}
		a.book:hover .book__title,
		a.book:focus .book__title {
			opacity: 1;
		}
}

@media (min-width: 30em) {
	.theme-split-section {
		overflow: hidden;
		max-width: 70em;
	}
	.theme-split-section__section {
		width: 50%;
		float: left;
		padding-right: 2em;
	}
}

hr {
	margin: 2.5em 0;
	border: 0;
	height: 2px;
	background-color: #ccc;
}

.theme-video-win__promotion {
	padding-right: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.theme-video-win__promotion a {
	background-color: #4c4c4c;
	background-color: rgba(76, 76, 76, 0.85);
	min-height: 300px;
	background-repeat: no-repeat;
	background-position: center center;
	color: #fff;
	font-size: 2em;
	text-decoration: none;
	display: block;
	padding: 0.5em 1em;
}

.theme-video-win__promotion a::after {
	content: '\a0>>';
	color: #e51636;
}

.theme-reviews-news__item {
	padding-left: 150px;
	position: relative;
}
.theme-reviews-news__item img {
	max-width: 130px;
	position: absolute;
	left: 0;
	top: 0;
}
.theme-reviews-news__item h3 {
	margin-top: 0;
}
.theme-reviews-news__item a {
	text-decoration: none;
}
.theme-reviews-news__item a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.theme-logo {
	margin-bottom: 1em;
}
@media (min-width: 30em) {
	.theme-logo {
		width: 200px;
		float: right;
		margin: 0 0 2em 2em;
	}
}

.theme-intro {
	max-width: 45em;
	overflow: hidden;
}
	.theme-intro h1 {
		font-size: 180%;
		margin-bottom: 0.25em;
	}
@media (min-width: 30em) {
	.theme-intro {
		font-size: 110%;
	}
}

.quote {
	padding: 0.5em 0;
}
	.quote__quote {
		font-weight: 600;
		margin: 0;
	}
/*	.quote__quote::before {
		content: '“';
		color: #ccc;
		float: left;
		font-size: 3em;
		line-height: 1;
		margin-right: 0.1em;	
	}
	.quote__quote::after {
		content: '”';
		color: #ccc;
		font-size: 3em;
		display: inline-block;
		vertical-align: top;
		float: right;
	}	
*/	.quote__attribution {
		font-weight: 400;
	}
/*	.quote__attribution::before {
		content: '—';
	}
*/
.author {
/*	background-color: #eee;
	padding: 1em;
*/	overflow: hidden; /* contain floats */
	margin: 2em 0;
}
	.author h3 {
		margin-top: 0;
	}
	.author p {
		font-size: 85%;
		margin: 0;
	}
	.author .alignleft,
	.author .alignright {
		margin-bottom: 0;
	}
	.author--has-pic {
		padding-left: 100px;
		position: relative;
	}
		.author--has-pic .author__pic {
			position: absolute;
			top: 0;
			left: 0;
		}

.skip-to-nav {
	position: absolute;
	top: 15px;
	right: 0;
	width: 70px;
	height: 70px;
}

	.skip-to-nav .icon {
		width: 40px;
		height: 40px;
	}

@media(min-width: 20em) {
	.skip-to-nav {
		top: 10px;
		width: 80px;
	}

		.skip-to-nav .icon {
			width: 60px;
			height: 60px;
		}
}

@media(min-width: 50em) {
	.skip-to-nav {
		display: none;
	}
}

.pagination {
	overflow: hidden;
}	
	.pagination__link {
		display: inline-block;
		vertical-align: top;
		list-style: none;
	}
	.pagination__link--prev {
		float: left;
	}
	.pagination__link--next {
		float: right;
	}
		.pagination__link a {
			text-decoration: none;
		}

.link--social .icon {
	width: 1.25em;
	height: 1.25em;
}

.link--social .icon:hover,
.link--social .icon:focus {
	fill: #FF494B;
}

.svg-alt {
	display: block; /* so we can apply text-ndent */
	text-indent: -9999em; /* remove from screen when not necessary */ 
	position: absolute; /* don't use any space */
}

.no-inlinesvg .svg-alt {
	display: inline;
	text-indent: 0;
	position: static;
}


/* ------------------------------------------------  
	FUNCTIONELE CLASSES
   ------------------------------------------------ */

.alignleft /* WordPress class */ {
	float: left;
	margin: 0 1em 1em 0;
}

.alignright /* WordPress class */ {
	float: right;
	margin: 0 0 1em 1em;
}

@media(min-width: 50em) {
	.columns-two {
		overflow: hidden;
	}
		.columns-two .column {
			width: 50%;
			float: left;
		}
		.columns-two .column:first-child {
			padding-right: 2em;
		}
}

.visually-hidden /* for elements that we want in the source for accessibility reasons, but do not need to be visible */ {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	padding:0;
	border:0;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.wpcf7-form.sent /* something that is (a) a wpcf7-form and (b) sent*/ {
	display: none;
}

.wpcf7-form .wpcf7-validation-errors {
	display: none;
}

.wpcf7-not-valid-tip {
	display: block;
	font-size: smaller;
	color: #FF494B;
	margin: 0.5em 0;
	font-weight: bold;
}

.screen-reader-response {
	font-style: italic;
	margin-bottom: 2em;
}

	.screen-reader-response ul {
		margin: 0.5em 1em 0;
	}

#cookie-law-info-bar {
	left: 0;
}