/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	overflow-x:hidden;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*start styles*/
.screen-reader-text{
	opacity:0;
}
html {
	height: 100%;
}

body ,.category-poezie ,.category-poems{
	background: #634e0c;	
	background-size: 70%;
	margin: 0 auto;
	height: 100%;
}
em,i{
	font-style:italic;
}
.category-poems,.category-poezie{
	background: #a8954b;
	background-size: 70%;
	margin: 0 auto;
}

.container {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/*---------------------------------- Header ----------------------------------*/

.pageheader {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #fffae2;
	width: 100%;
	padding: 3em 0 3em 0;
}

.logo {
	align-items: center;
	max-width: 400px;
	min-width: 250px;
}
.logo img{
	max-width: 95%;
}

.menu-primary-navigation-container {
  width: 100%;
}

#menu {
	display: flex;
	flex: 1 1 auto;
	border-bottom: solid 2px #adadad;
	max-width: 700px;
	min-width: 360px;
	padding-left: 0.5em;
	position:relative;
	bottom:17px;
}

#menu img {
	display: block;
}

#menu ul {
	display: flex;
	flex: auto;
	justify-content: space-between; 
	align-items: baseline;
}
#menu li.menu-item {
	flex:1 0 65px;
	background-position:bottom center;
	display:flex;
	justify-content:center;0
}

#menu .menu-item a{
	text-decoration: none;0
	color: #634e0c;
	opacity:0;
	background-position:center;
	width:65px;
	display:block;
	overflow:hidden;
	height:50px;
}

#menu a span{
	position:relative;
	top:20px;
}

#menu .anischkarten {
	background: url(IMG/poemsen.svg) no-repeat;
	padding-top: 22px;
}

#menu .kussen {
	background: url(IMG/poemsnl.svg) no-repeat;
	padding-top: 21px;
}
	
#menu .kunst {
	background: url(IMG/chairs.svg) no-repeat;
	padding-top: 32px;
}

#menu .gallery {
	background: url(IMG/gallery.svg) no-repeat;
	padding-top: 19px;
}

#menu .about {
	background: url(IMG/about.svg) no-repeat;
	padding-top: 22px;
}

#menu .contact {
	background: url(IMG/contact.svg) no-repeat;
	padding-top: 13px;
}

#menu span{
	opacity: 0;	
}

/*------------------------------------ Hamburger ---------------------------------*/

.mobile {
	display: none;
	height: 38px;
}

.mobile input {
	opacity: 0;
}

.mobile label {
	position: absolute;
	cursor: pointer;
}

/*------------------------- einde header ---------------------------------------------------*/

.sectionheader{
	margin-bottom:1em;
}

.sectionheader .title{
	font-size: 36px;
	font-family: Montserrat;
	color:white;
	padding:1em 0 0 0;
	max-height: 50px;
}

/*------------------------------------- index -----------------------------------------------*/

.en {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.in {
	display: flex;
	justify-content: space-around;
	flex: 1;
	flex-wrap:wrap;
}
.eng, .dut, .cha {
	font-family: 'Montserrat';
	font-size: 36px;
	font-weight: 500;
	text-align: center;
	color: white;
	border-radius: 25px;
	position: relative;
	margin:1em;
}
.eng {
	background-color: #008080;
	align-self: center;
	padding: 1.4em;
}

.eng::after {
	background-image: url(IMG/eye.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	bottom: -87px;
	right: -79px;
	padding: 61px;
	background-size: 61%;
}

.dut {
	padding: 1em;
	margin-top: 50px;
	background-color: #d35f5f;
	align-self: flex-start;
}

.dut::after {
	background-image: url(IMG/beak.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	bottom: -80px;
	left: -32px;
	padding: 57px;
	background-size: 100%;
}

.cha {
	padding: 1em;
	background-color: #ffc800;
	align-self: flex-end;
}

.cha::after {
	background-image: url(IMG/pil.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	bottom: -100px;
	right: 119px;
	padding: 61px;
	background-size: 60%;
}
.eng a,.dut a,.cha a{
	text-decoration:none;
	color:#fff;
	line-height:1.1em;
}
.mir {
	align-self: flex-start;
	padding:0 0 2em 5em;
	max-width:56%;
	margin-top:4em;
}
@media screen and (min-width:1700px){
	.eng{
		padding:2.4em;
	}
	.dut{
		padding:2em;
	}
	.cha{
		padding:2em;
	}
	.mir{
		padding-left:20%;
	}
}
/*------------------------------ einde index --------------------------------*/


/* --------------------------------poezie----------------------------------- */
.content {
	display: flex;
	justify-content: space-around;
	flex: 1;
	line-height:1.6em;
}

.content h1 {
	font-family: 'Dosis';
	font-size: 24px;
	font-weight: 500;
	text-align: center;
}
/* dit geldt voor alle gedichten in samenvatting */
.titel h1{
	margin-bottom:0.9em;
}
a.fullpostlink {
    text-decoration: none;
    color: black;
}
.wrapper,.wrapper-poezie{
	flex-grow:1;
	display:flex;
	flex-wrap:wrap;
}
.wrapper .content,.wrapper-poezie .content{
	max-width:1000px;
	margin: 2em auto;
	justify-content:flex-start;
	flex-wrap:wrap;
	width:100%;
	padding-bottom: 260px;
}
.wrapper aside,.wrapper-poezie aside{
	display: inline-block;
    flex: 0 1 120px;
    align-self: flex-start;
    padding: 20px;
    border-radius: 25px;
    text-align: center;
    margin-top: 100px;
    width: auto;
	align-self:flex-start;
}
.category-poezie .post, .category-poems .post{
	max-width:270px;
	font-family: 'Dosis';
	font-size: 19px;
	font-weight: 300;
	text-align: center;
	border-radius: 25px;
	position: relative;
	align-self: stretch;
	padding: 1.4em;
	margin:1.6em;
	box-sizing: border-box;
}
.category-poezie .post {
	background-color: #e1a7a7;
}

.category-poems .post {
	background-color: #59bfbf;
}

.type-post h1::first-letter,.about-page .entry-content h1:first-letter{
	font-size:1.5em;
}

.category-poezie .title, .category-poems .title {
	font-family: 'Montserrat';
	font-size: 36px;
	font-weight: 500;
	text-align: center;
	color: white;
	border-radius: 25px;
	padding: 1em;
	position: relative;
	align-self: flex-start;
	margin-top: 30px;
	align-content: center;
	line-height: 0.8;
}

.category-poezie .title {
	background-color: #d35f5f;
}
.category-poems .title {
	background-color: #008080;
}
.category-poezie .title::after {
	background-image: url(IMG/beak.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	bottom: -97px;
	left: -43px;
	padding: 63px;
	background-size: 75%;
}

.category-poezie .post:nth-of-type(1), .category-poems .post:nth-of-type(1)  {
	align-self:flex-start;
}

.category-poezie .post:nth-of-type(2), .category-poems .post:nth-of-type(2)  {
	align-self: flex-end;
	padding: 1.7em;
}

.category-poezie .post:nth-of-type(2)::after {
	background-image: url(IMG/spriteg.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	bottom: -43px;
	left: -53px;
	padding: 61px;
	background-size: 75%;
}

.category-poezie .post:nth-of-type(3), .category-poems .post:nth-of-type(3)  {
	align-self: flex-start;
}

.category-poezie .post:nth-of-type(5)::after {
	background-image: url(IMG/spot.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	top: -41px;
	right: -0px;
	padding: 50px;
	background-size: 75%;
}

.category-poezie .post:nth-of-type(4), .category-poems .post:nth-of-type(4)  {
	align-self: center;
}

.category-poezie .post:nth-of-type(5),.category-poems .post:nth-of-type(5)  {
	align-self: flex-end;
}
.category-poezie .more-link{
	color:#a34b4b;
}

.post {
	background-color: #59bfbf;
	border-radius: 89px 89px 89px 0;
	max-width: 544px;
	padding: 117px 55px 0 55px;
	margin: 0em 0em 2em 2em;
	flex:1 1 auto;
	position:relative;
}
.wrapper-poezie{
	background-image:url(IMG/blokje.svg);
	background-repeat:no-repeat;
	background-position:top 50% left 9%;
}
.wrapper-poezie .post:after{
	content:"";
	position:absolute;
	background-image:url(IMG/spot2.svg);
	right:-40px;
	bottom:20px;
	width:80px;
	height:80px;
	background-size:100%;
	background-repeat:no-repeat;
}
.wrapper-poezie .post{
	background-color:#e1a7a7;
}
.catn{
	background-color: #d35f5f;
	padding: 30px;
	border-radius: 25px;
	position:relative;
}

.catn::after {
	background-image: url(IMG/beak.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	padding: 46px;
	background-size: 47px;
	left:-30px;
	top: 60px;
}
.catn a{
	text-decoration:none;
}
/* linkjes gedichtpagina */

.nav-links {
  width:calc( 100% - 1em );
}

.nav-previous {
  	width: 50%;
	text-align:right;
}

.nav-links {
  	display: flex;
  	justify-content: space-between;
	padding:0 0.5em;
	flex-direction:row-reverse;
}

.wrapper-poezie a .nav-subtitle {
  color: #d35f5f;
}
.wrapper a .nav-subtitle{
	color:#008080;
}
.nav-links a{
	cursor:pointer;
}
/* ------------------------------------ einde poezie ------------------------------------- */

/*------------------------------------- start poetry ------------------------------------- */


.category-poems  .title::after{
	background-image: url(IMG/eye.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	bottom: -22px;
	right: -41px;
	padding: 39px;
	background-size: 63%;
}

.category-poems  .post:nth-of-type(1)::after {
	background-image: url(IMG/dobber.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	bottom: -20px;
	left: -20px;
	padding: 61px;
	background-size: contain;
}

.category-poems  .post:nth-of-type(3)::after {
	background-image: url(IMG/sprite.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	bottom: -8px;
	right: -76px;
	padding: 50px;
	background-size: 54%;
}

.cate{
	background-color: #008080;
	padding: 30px;
	border-radius: 25px;
	position:relative;
}

.cate::after {
	background-image: url(IMG/eye.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	padding: 46px;
	background-size: 47px;
	left:-34px;
	top: 48px;
}
.cate a{
	text-decoration:none;
}
.cate h1 ,.catn h1{
	font-family: montserrat;
	color: white;
	font-size: 25px;
	font-weight: 500;
}

.wrapper .post{
	background-image: url(IMG/sprite.svg);
	background-repeat: no-repeat;
	background-size: 10%;
	background-position: top 17% right;
}

.wrapper .post::after{
	background-image: url(IMG/dobber2.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	bottom: 11px;
	left: -66px;
	padding: 61px;
	background-size: 67%;
}

/*------------------------------------- einde poetry ------------------------------------- */

/*---------------------------------------- Chairs -----------------------------------------*/

.balloon {
	display: flex;
	justify-content: space-around;
	padding: 47px 0;
	font-family: Dosis;
	flex-grow:1;
	
}
.balloon h2{
	font-weight :500;
	font-size: 26px;
}
.balloon p{
	font-weight:400;
	padding: 3px;
}
/*------ Links -------*/
.links {
	flex: 1 0 auto;
	max-width: 20%;
	display: flex;
	flex-direction: column;
}

.lb {
	display: flex;
	flex-direction: column;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #634e0c;
	background-color: #ebd369;
	border-radius: 25px;
	align-self: flex-start;

}

.lb img {
	align-self: center;
	width: 200px;
}

.lbe {
	display: flex;
	flex-direction: column;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #634e0c;
	background-color: #ebd369;
	border-radius: 25px;
	margin-top:1em;
	align-self: flex-end;
}

.lbe img {
	align-self: center;
	width: 200px;
}

/*----einde links------*/
/*------midden---------*/
.middle{
	max-width:50%;
}

.stoelen h2{
	width:100%;
	text-align:center;
	align-self:flex-start;
}
.tekstvak {
	font-family: montserrat;
	font-size: 36px;
	font-weight: 500;
	color: white;
	padding-top: 20px;
	align-self: center;
	text-align: center;
	background-color: #ffc800;
	border-radius: 25px;
	height: 57px;
	width: 190px;
	margin-top: 1em;
	position: relative;
}

.tekstvak::after {
	background-image: url(IMG/pil.svg);
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	padding: 33px;
	background-size: 52px;
	left:-20px;
}

.stoelen {
	flex-wrap:wrap;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #634e0c;
	background-color: #ebd369;
	border-radius: 25px;
	margin-bottom:1em;
}
.chair1{
	position:relative;
	bottom:3em;
}
.middle img.chair2{
	padding-top:4em;
}
.chair3{
	position:relative;
	bottom:2em;
	flex-grow:1
}
.stoelen img {
	width: 200px;
	padding:1em;
}

/*----einde midden-----*/

/*----Rechts-----------*/
.rechts {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	max-width: 20%;
}
.rb {
	display: flex;
	flex-direction: column;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #634e0c;
	background-color: #ebd369;
	border-radius: 25px;
	margin-left: 50px;
	margin-bottom:1em;
	align-self: flex-end;
}

.rb img {
	width: 200px;
	align-self:center;
}

.rbe {
	display: flex;
	flex-direction: column;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #634e0c;
	background-color: #ebd369;
	border-radius: 25px;
	align-self: flex-start;

}

.rbe img {
	width: 240px;
	align-self:center;
}
/*----einde rechts----*/
.lb,.lbe,.stoelen,.rb,.rbe{
		position: relative;
		z-index: 1;
	padding:1em 0.5em;
	
	}
/*------------------------------------- einde chairs --------------------------------------*/

/*---------------------------------------- Footer -----------------------------------------*/

footer {
	font-size: 12px;
	width: 100%;
	background-color: #f4eed7;
	text-align: center;
	max-height: 180px;
	min-height: 110px;
	font-family: dosis;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top: -20px;
}
footer a{
	text-decoration:none;
	color:#777;
}
footer a:hover{
color:#999;
}
/*------------------------------------- einde footer --------------------------------------*/

/*------------------------------------ Media queries --------------------------------------*/


@media screen and (max-width: 1280px){
	#menu{
		max-width: 550px;
	}
	#menu span a{
		opacity: 1;
	}
		.content {
		justify-content: space-around;
	}
	.eng {
		margin-top: 30px;
	}
}
@media screen and (max-width:1120px){
	.balloon{
		flex-direction:column;
	}
	.balloon>div>div{
		margin:1em;
	}
	.balloon div{
		justify-content:flex-start;
		align-self:stretch;
	}
	.rechts,.links,.middle{
		max-width:100%;
	}
	.middle img.chair2{
		padding-top:1em;
	}
	.chair1,.chair3{
		position:static;
	}
}

@media screen and (max-width: 1050px){
    #menu{
        display:none;
    }
	.pageheader{
		position:relative;
	}
	.mobile{
		display:block;
		margin-top:38px;
		position:absolute;
        left:0;
        width:100%;
		bottom:0;
	}
    
    .mobile .menu-primary-navigation-container{
        background-color:#634e0c;
        padding:0;
        display:none;
		z-index:100;
		position:relative;
		width: calc(100% - 29vw);
		border-right: solid 29vw #70633c;
    }
    .mobile li{
        display:block;
    }
    .mobile a{
		font-family: 'dosis';
		font-size: 21px;
		font-weight: 300;
		text-align: left;
        color: white;
        display:block;
        text-decoration: none;
        border-bottom: solid 2px #d5aa00;
		padding: 50px 0 0px 29px;
		height: 19px;
    }
    .mobile label{
         position: absolute;
         right:25px;
         top:-115px;
	}
	
	.wrapper .content, .wrapper-poezie .content{
		flex-flow: column;
		align-items: center;
		margin: 1em auto;
		padding-bottom: 0px;
	}
	
	.wrapper aside, .wrapper-poezie aside{
		align-self: center;
		margin-top: 1em;
		flex: 0;
	}
	
	.navigation {
		flex: 0 0 auto;
	}
	
	.wrapper-poezie .post{
		margin: 2em 2em 2em 2em;
		padding: 55px 55px 55px 55px;
		top: 24px;
	}
	
	.wrapper .post{
		margin: 2em 2em 2em 2em;
		padding: 55px 55px 55px 55px;
		top: 24px;
	}
	
	

/*----einde rechts----*/



    .mobile span {
        display: block;
        width: 22px;
        height: 3px;
        margin-bottom: 5px;
        background: black;
        border-radius: 1px;
    }

    .mobile input {
        opacity:0;
        -webkit-touch-callout: none;
    }

    .mobile a:hover {
		background-color: #ebd369;
		color: #060b52;
	}
	
	.mobile ul {
		height: 100vh;
	}
	
	.mobile li{
		background-image:none;
	}

  .mobile  input:checked ~ .menu-primary-navigation-container {
      	display:block;
    }
    
    .mobile input:checked ~ label span:nth-child(1){
        transform:rotate(45deg);
        margin-top: 12px;
        height:2px;
    }
    
    .mobile input:checked ~ label span:nth-child(2){
        transform: rotate(135deg);
        margin-top: -7px;
        height:2px;
    }
    
    .mobile input:checked ~ label span:nth-child(3){
        display:none;
    }
	
	.poems {
		width: 100%;
	}
}
@media all and (max-width:731px){
	.sectionheader h1{
		max-width:250px;
	}
	.category-poezie .title::after {
		left:0;
		background-size:60%;
	}
	.content .category-poezie .post, .content .category-poems .post{
		align-self:flex-end;
	}
	.mir{
		max-width:85%;
		padding: 0.5em;
	}
	.post:after{
		display:none;
	}
	.post{
		margin:0.5em;
	}
	.nav-title{
		display:none;
	}
	.wrapper,.wrapper-poezie {
		flex-direction: column;
	}
}