/*
	Nieuw vanaf hier   -------------------------------------
*/

body {
background:#FAFAFA;
}
html, body { height:100%; margin:0; padding:0; }
div { box-sizing: border-box; }

p {
  color: Black;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:normal;
}
@media screen and (max-width: 600px) {p {font-size:13.5px;}}
p.leesverder {
display:box;
text-align:center;
margin-top:2em;
}
#LogoTable{width:100%;height:100%;max-width:100%;max-height:100%;}
img.logo {max-width:100%;max-height:100%;}
td.streepjes {text-align: right;}
img.streepjes {width:60px; height:30px; margin:5px;}
div.fotoverantwoording {
width:35px;
height:35px;
position:absolute;
right:15px;
top: calc(100% - 170px);
top: -moz-calc(100% - 170px);
top: -webkit-calc(100% - 170px);
background-color: rgba(00, 00, 00, 0.2);
border-radius: 10px;
padding:10px 10px 10px 10px;
}
@media screen and (max-width: 900px) {div.fotoverantwoording{top: calc(100% - 50px); top: -moz-calc(100% - 50px); top: -webkit-calc(100% - 50px)}}
@media screen and (max-height: 400px) {div.fotoverantwoording{top: calc(100% - 50px); top: -moz-calc(100% - 50px); top: -webkit-calc(100% - 50px)}}
p.credits {
margin:0px;
font-size:15px;
color:grey;
text-align:center;
}
p.credits a {
margin:0px;
font-size:15px;
color:grey;
}
h1.titel {
font-family:Arial,Helvetica,sans-serif;
line-height: 1.2Em;
text-align:center;
font-size: 30px;
font-size: 3vw;
color:white;
margin-top:1.50em;
padding:0em;
text-shadow: 0 0 3px grey;
}
@media screen and (max-width: 900px) {h1.titel{font-size:5vw;}}
@media screen and (max-width: 600px) {h1.titel{font-size:7vw;}}


h2 {
  color: #645C59;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:15px;
}
a {
text-decoration: none;
color:#009FE3;
}
a.blauw {
text-decoration: none;
color:#009FE3;
}
a.blauw:hover {
text-decoration: none;
color:#009FE3;
}
a.blauw:visited {
text-decoration: none;
color:#009FE3;
}

a.WitOnderstreept {
text-decoration: underline;
color:#FFFFFF;
}
a.WitOnderstreept:hover {
text-decoration: underline;
color:#FFFFFF;
}
a.WitOnderstreept:visited {
text-decoration: underline;
color:#FFFFFF;
}

strong {
font-family: 'Varela Round', sans-serif;
font-style:normal;
font-weight:400;
color:#007ac3;
}
h1 {
font-family: 'Varela Round', sans-serif;
line-height: 1.3em;
font-weight:700;
font-size:175%;
color:#007ac3;
margin:1em 0em 1.50em 0em;
padding:0px;
text-align:left;
}

/* ---------- COVERS ---------- */
div.Cover_Home {
background-color:DarkGrey;
width:100%;
height:100%;
background: url('images/CoverImages/janko-ferlic-specialdaddy-sfL_QOnmy00-unsplash.jpg') no-repeat;
background-size: cover;
}
div.Cover_Agenda {
background-color:DarkGrey;
width:100%;
height:100%;
background: url('images/CoverImages/16077.jpg') no-repeat;
background-size: cover;
}
div.Cover_Ebook {
background-color:DarkGrey;
width:100%;
height:100%;
background: url('images/CoverImages/anna-demianenko-CPWhnIkL4Lk-unsplash.jpg') center bottom no-repeat;
background-size: cover;
}
div.Cover_kinderboeken {
background-color:DarkGrey;
width:100%;
height:100%;
background: url('images/CoverImages/jonathan-borba-Z1Oyw2snqn8-unsplash.jpg') center bottom no-repeat;
background-size: cover;
}
div.Cover_Agenda {
background-color:DarkGrey;
width:100%;
height:100%;
background: url('images/CoverImages/16077.jpg') 33% center no-repeat;
background-size: cover;
}
div.Cover_kookboeken {
background-color:DarkGrey;
width:100%;
height:100%;
background: url('images/CoverImages/3548762.jpg') right top no-repeat;
background-size: cover;
}
div.Cover_lifestyle {
background-color:DarkGrey;
width:100%;
height:100%;
background: url('images/CoverImages/flash-alexander-vXRHPy41kMo-unsplash.jpg') left top no-repeat;
background-size: cover;
}
div.Cover_reisgidsen {
background-color:DarkGrey;
width:100%;
height:100%;
background: url('images/CoverImages/emiel-molenaar-uAkGo9mMAWg-unsplash.jpg') left center no-repeat;
background-size: cover;
}
div.Cover_romans {
background-color:DarkGrey;
width:100%;
height:100%;
background-position: right;
background: url('images/CoverImages/ben-white-1MHU3zpTvro-unsplash.jpg') right center no-repeat;
background-size: cover;
}
div.Cover_schoolboeken {
background-color:DarkGrey;
width:100%;
height:100%;
background: url('images/CoverImages/annie-spratt-ORDz1m1-q0I-unsplash.jpg') left center no-repeat;
background-size: cover;
}


/* ----------------------------*/
div.header {
background-color: rgba(200, 200, 200, 0.0);
width:100%;
height:160px;
max-height:20%;
}
div.logo {
width:auto;
max-width:24vh;
background-color:#F6F5EE;
margin-left:auto;
margin-right:auto;
padding-left:1vw;
padding-right:1vw;
border-radius: 0px 0px 5vh 5vh;
}
div.menu {
background-color:#009FE3;
width:100%;
height:120px;
position:absolute;
left: 0px;
top: calc(100% - 120px);
top: -moz-calc(100% - 120px);
top: -webkit-calc(100% - 120px);
}
div.NavItems{
width:900px;
height:100%;
background-color:#009FE3;
margin-left:auto;
margin-right:auto;
}
#NavTable {
border: none;
border-collapse: collapse;
border-spacing: 0px;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
width:100%;
height:100%;
}
#NavTable tr {
width:100%;
height:100%;
}
#NavTable td {
width:100%;
height:100%;
vertical-align:middle;
padding:0px;
margin:0px;
}
table.center {
border: none;
border-collapse: collapse;
border-spacing: 0px;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
width:100%;
height:100%;
}
table.center tr {
width:100%;
height:100%;
}
table.center td {
width:100%;
height:100%;
vertical-align:middle;
text-align:center;
padding:0px;
margin:0px;
}





#container01___INTRO___ {
display:flex;
justify-content:center;
flex-wrap: nowrap;
height:380px;
}
#div01Intro_ {
background-color:LightGrey;
height:380px;
width:450px;
padding:80px 80px 80px 80px;
}
#div02Afbeelding {
display:flex;
justify-content:center;
background-color:LightGrey;
min-height:380px;
width:450px;
padding:0 80px 80px 80px;
background: url('images/StockSnap_KIJQ4DNA7K.jpg') center bottom no-repeat;
background-size: cover;
}
img.afbeelding_boek {
object-fit: cover;
}





#container02___BOEKEN___ {
display:flex;
justify-content:center;
flex-wrap: wrap;
padding:80px 80px 80px 80px;
max-width:1000px;
margin: auto auto auto auto;
}

div.box {
display:flex;
flex-direction:column;
width:180px;
padding:20px 20px 20px 20px;
}

@media screen and (max-width: 395px) {
#container02___BOEKEN___ {
align-items: stretch;
}
div.box {
flex: 0 0 100%;
font-size:115%;
}
}
div.box h2 {
display:box;
text-align:center;
height:22px;
background-color:#645C59;
color:white;
line-height: 22px;
text-align: center;
font-size:12px;
}
div.box p {
font-size:68%;
}
div.box h2 a {
color:white;
}
div.box p.leesverder {
display:box;
width:auto;
padding-top:1em;
margin-top:auto;
text-align:center;
}




#ZetSpiegel {
margin: auto auto 6em auto;
padding:2em;
margin-left: auto;
margin-right: auto;
width:900px;
max-width:100%;
}
div.rechts {
float:right;
border:0px solid;
clear: right;
width: 372px;
margin: 0 55px 1em 1em;
overflow:hidden;
max-width:100%;
}
div.onderschrift {
border:0px solid;
margin:0px;
margin-bottom:2px;
width: inherit;
}
p.onderschrift {
font-family: Arial,Helvetica,sans-serif;
font-size: 80%;
line-height: 1.2Em;
color:#999999;
text-align: left;
margin:0px;
margin-top:0.8Em;
margin-bottom:3Em;
}


ul.klanten {
font-family:Arial,Helvetica,sans-serif;
font-size:90%;
color:#333333;
}

#container03___PORTFOLIO___ {
display:flex;
flex-wrap:wrap;
/*justify-content: space-between;*/
justify-content: center;
margin: auto auto auto auto;
margin-left: auto;
margin-right: auto;
width:1200px;
max-width:100%;
align-items: flex-start;
}


#container03___PORTFOLIO___ h2 {
margin:5px;
width:auto;
}
div.portfolio_item {
flex: 0 0 240px;
min-height:200px;
min-width:200px;
max-width:calc(25% - 10px);
background-color:blue;
margin:10px;
}

@media screen and (max-width: 480px) {

#container03___PORTFOLIO___{
align-items: stretch;
}

div.portfolio_item {
display:flex;
flex: 0 0 100%;
min-height:200px;
min-width:200px;
max-width:calc(100% - 2em);
background-color:blue;
margin:10px;
}
}

div.portfolio_item_ratio {
}
h2.kop-boven-div {
display:inline-block;
position:relative;
top: -2.25em;
left: -5px;
}


#container___TEAM___ {
padding:2em;
margin: auto auto auto auto;
margin-top: 6em;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.5em;
width:900px;
max-width:100%;
}
img.team {
width:600px;
border-radius: 15px 15px 15px 15px;
max-width:100%;
}
p.max600 {
max-width:600px;
}

#container03___Contact-Adres-ZetSpiegel___ {
padding:2em 2em 0em 2em;
margin: auto auto auto 0px;
margin-top: 2em;
margin-left: auto;
margin-right: auto;
width:900px;
max-width:100%;
}
#container03b___Contact-Adres-ZetSpiegel___ {
display: flex;
justify-content: center;
flex-direction: row;
padding:0em 2em 0em 2em;
margin: auto auto auto auto;
margin-top: 0em;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
width: 900px;
}
@media screen and (max-width: 990px) {
#container03b___Contact-Adres-ZetSpiegel___ {
justify-content: flex-start;
max-width:100%; 
}
}
.GegevensBox {
background-color: #5cacf1;
display: flex;
width: 300px;
min-width: 150px;
max-width: 33.3%;
height: 210px;
justify-items: center;
flex-direction: column;
box-shadow:  5px  5px  15px  1px   #bbb;
}
.GegevensBox a {
display: flex;
justify-items: center;
flex-direction: column;
}

.adres {
  border-radius: 25px 0px 0px 25px;
  border-style: none dotted none none;
  border-color: #bfe2ff;
}
.tel {
  border-radius: 0px 0px 0px 0px;
  border-style: none none none none;
}
.mail {
  border-radius: 0px 25px 25px 0px;
  border-style: none none none dotted;
  border-color: #bfe2ff;
}
img.IcoonGegevens {
margin-left:auto;
margin-right:auto;
height:120px;
width:120px;
}

div.TekstOnderIcoon {
display: flex;
width:112px;
height:70px;
align-self:flex-end;
border:solid 0px black;
margin-top:auto;
margin-left:auto;
margin-right:auto;
padding:0px;
}
div.TekstOnderIcoon p {
margin-block-start: 0em;
color:#333333;
}
div.TekstOnderIcoonAdres {
padding-left:10px;
}
@media screen and (max-width: 480px) {
	#container03b___Contact-Adres-ZetSpiegel___ {
	  flex-direction: column;
	  align-items: center;
	}
	.GegevensBox {
	width:100%;
	max-width: 100%;
	height:auto;
	}
	
	.adres {
	  border-radius: 25px 25px 0px 0px;
	  border-style: none none dotted none;
	  border-color: #bfe2ff;
	}
	.tel {
	  border-radius: 0px 0px 0px 0px;
	  border-style: none none none none;
	}
	.mail {
	  border-radius: 0px 0px 25px 25px;
	  border-style: dotted none none none;
	  border-color: #bfe2ff;
	}
	div.TekstOnderIcoon {
	  height:auto;
	}
}



/* ---------- Credits and footer ---------- */
div.FotoCredits {
padding: 18px 0px 30px 18px;
opacity: 0.5;
}

div.Footer {
height:100px;
background-color: #645C59;
padding: 18px 0px 0px 0px;
text-align:center;
}
div.Footer p {
color: white;
}



@media screen and (max-width: 900px), screen and (max-height: 400px) {div.header{top: 0;position:sticky;height:60px;max-height:60px;}div.logo{float:left;width:calc(100% - 150px);max-width:calc(100% - 150px);margin:0px;background-color:#F6F5EE;border-radius:0px 0px 0px 0px;}#LogoCel{background-color:#F6F5EE;text-align:left;padding:0px;}#LogoTable{width:60px;height:60px;max-height:60px;}img.logo {background-color:#F6F5EE;}div.menu{float:right;width:150px;height:100%;margin:0px;position:relative;left:0%;top:0%;}div.NavItems{width:100%;margin:0px;position:relative;left:0px;top:0px;} h1{text-align:center;}#container01___INTRO___ {display:flex;justify-content:center;flex-wrap:wrap;height:auto;}#div01Intro_ {height:auto;}div.rechts{float:none;clear:right;margin: 0 auto 0 auto;display:block;max-width:100%;} #container02___BOEKEN___ {padding:60px 10px 60px 10px;}div.box {padding:10px 10px 10px 10px;}#container03___PORTFOLIO___ {padding:60px 10px 60px 10px;}}


@media screen and (max-width: 600px), screen and (max-height: 400px) {#container03___PORTFOLIO___ {padding-bottom:0px; padding-top:0px;}}
@media screen and (max-width: 600px), screen and (max-height: 400px) {#container03b___Contact-Adres-ZetSpiegel___ {padding-bottom:0px; padding-top:0px;}}
@media screen and (max-width: 600px), screen and (max-height: 400px) {#container___TEAM___ {padding-bottom:0px; padding-top:0px; margin-top:90px;}}