html, body
{
	margin:0px;
	padding:0px;
	font-family: rosario, Teko, Verdana, Geneva, Arial, Helvetica, sans-serif;
	height:100%;
}
:root
{
	--heimYellowA0: rgba(246, 192, 0, 0);
	--heimYellowA1: rgba(246, 192, 0, 1); 
	--heimYellow: #F6C000;
	--heimBrown:#776861;
	--heimBrownGray: #7A6F69;
	--heimBrownLight: #AAA39E;
}
div.banner
{
	position:sticky;
	background-color:var(--heimYellow);
	padding:10px;
	margin:0px;
	text-align:center;
	box-sizing:border-box;
	color:var(--heimBrown);
	top: 0;
	z-index:100;
}
div.body
{
	margin-left:2vw;
	margin-right:6vw;
	margin-top:10px;
	padding:5px;
}
div.header
{
	position:relative;
	display:table;
}
div.separator
{
	margin:20px 0px 20px 0px;
	height:1px;
	background-image: linear-gradient(to right, var(--heimYellowA0), var(--heimYellowA1), var(--heimYellowA0));
}
div.logo
{
	display:table-cell;
	vertical-align:top;
}
div.companyName
{
	display:table-cell;
	font-size:x-large;
	color:grey;
	vertical-align:middle;
	white-space: nowrap;
	padding:0px 5px 0px 5px;
}
span.polle,span.heim
{
	font-size:larger;
	font-weight:bold;
}
span.polle
{
	color:var(--heimYellow);
}
span.heim
{
	color:var(--heimBrown);
}
div.menu
{
	display:table-cell;
	width:100%;
	text-align:right;
	vertical-align:bottom;
}
div.menu > a
{
	margin:5px;
	color:var(--heimBrown);
	position:relative;
	font-size:large;
	text-decoration:none;
	white-space: nowrap;
	word-spacing: -0.1em;
}
div.menu > a:hover
{
	color:var(--heimBrown);
	cursor:pointer;
}

div.filter > span:before,
div.menu > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--heimYellow);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
div.filter > span:hover:before,
div.menu > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
div.title,
div.titleA,
div.titleS
{
	width:100%;
	display:table;
	font-size:4vw;
}
@media (max-width:1500px)
{
	div.title,
	div.titleA,
	div.titleS
	{
	  font-size: 6vw;
	}
}
div.title,
div.titleA
{
  height:30vw;
}
div.titleS
{
  height:10vw;
}
div.title > *,
div.titleS > *
{	
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	width:50%;
	color:var(--heimYellow);
	background-color:var(--heimBrown);
}
div.titleA > *
{ 
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  color:var(--heimYellow);
  background-color:var(--heimBrown);
}

div.title div.text,
div.titleS div.text
{
	position:relative;
}

div.title div.text:before,
div.titleS div.text:before
{
	content: "";
	position: absolute;
  width: 100%;
  height: 0.2vw;
  bottom: -1vw;
  left: 0;
  background-image: linear-gradient(to right, var(--heimYellowA0),var(--heimYellowA1), var(--heimYellowA0));
}

div.title div.text:after,
div.titleS div.text:after
{
	content: "";
	position: absolute;
  width: 100%;
  height: 0.2vw;
  top: -1vw;
  left: 0;
  background-image: linear-gradient(to right,var(--heimYellowA0),var(--heimYellowA1), var(--heimYellowA0));
}

div.title > .img
{	
	text-align:right;
	background-size: cover;
	background-position: center;
  background-repeat: no-repeat;
}
div.titleText
{
	font-size: 12pt;
	margin-bottom: 0.5vw;
}
#Voorstelling > div
{
	height: 20vw;
}
#Voorstelling div.separator
{
  margin-left: auto;
  margin-right: auto;
  width: 20vw;
  height: 0.1vw;
  background-image: linear-gradient(to right, var(--heimYellowA0),var(--heimYellowA1), var(--heimYellowA0));
}

div.slideshowFrameTitle,
div.slideshowFrame
{
	width:100%;
	height:30vh;
	overflow:hidden;
	position:relative;
}

div.slideshowFrameTitle
{
	height:30vw;
}

div.slideshow
{
	width:100%;
	height:100%;
}

div.slideshow > *
{
	width: 100%;
	height: 100%;
	display:none;
	position:absolute;
	opacity:0;
}

.fadein
{
	-webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

div.PhotoFilename,
div.slideshow .info
{
	position:absolute;
	bottom:0;
	left:50%;
	transform: translate(-50%, 0);
	color:var(--heimYellow);
	background-color: rgba(119, 104, 97, 0.8);
	padding:5px 10px 5px 10px;
	font-size:small;
	white-space: nowrap;
	max-width:100%;
}

div.PhotoInfo
{
	position:absolute;
	bottom:5px;
	right:5px;
	color:var(--heimYellow);
	background-color: rgba(119, 104, 97, 0.8);
	text-align:center;
	border-radius:2em;
	padding-left:0.4em;
	padding-right:0.6em;
	font-size:xx-large;
	font-family:Monotype Corsiva, Mutter Krause Hal, Hoefler Text, times new roman;
	font-style:italic;
	cursor:pointer;
}

@keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}

div.slideshow img
{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
  background-repeat: no-repeat;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: var(--heimYellow);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index:10;
}

.prev
{
	left:0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(119, 104, 97, 0.8);
}

div.title img
{
	text-align:right;
	width:100%;
}
div.item
{
	background-color:#EEE;
	margin-top:20px;
}
div.itemBody
{
	padding:10px;
}
div.itemBody img
{
	max-width:100%;
}
div.center
{
	text-align:center;
}
div.center > *
{
	display:inline-block;
	text-align:left;
}
div.shortcuts
{
	position:fixed;
	top:20%;
	right:0px;
	width:5vw;
	color:var(--heimYellow);
	text-align:center;
	font-size:5vw;
}
div.shortcuts a
{
	text-decoration:none;
	color:var(--heimYellow);
}
div.shortcuts img
{
	width:100%;
	/*filter: grayscale(75%);*/
}
div.TitleC,
h1
{
	color: var(--heimBrown);
	font-size: x-large;
}
h2
{
	color: var(--heimBrown);
	font-size: large;
}
h3
{
	color: var(--heimBrown);
	font-size: medium;
}
span.highlight
{
	color: var(--heimBrown);
	font-variant: small-caps;
}
ul.advies
{
	list-style-type: none;
}
ul.advies li
{
	margin:10px;
}
a
{
	color: var(--heimYellow);
	text-decoration:none;
}
table.openingsuren td:first-child
{
	font-variant: small-caps;
	padding-right:20px;
}
div.fullScreenPhoto
{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.6);
  text-align:center;
  z-index:1;
}

span.vCenterHelper,
span.fullScreenPhotoHelper
{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

img.fullScreenPhoto
{
  max-height:85vh;
  max-width:85vw;
  border-radius:5px; 
  vertical-align: middle;
  border: 1pt solid #E9E9E9;
}

div.fullScreenPhotoBorder
{
  z-index:-1;
  position:fixed;
  vertical-align: middle;
  display:inline-block;
  background: linear-gradient(to bottom right, var(--heimBrownGray) , var(--heimBrownLight));
  background-color:var(--heimBrownGray);
  border-radius:40px;
}
img.smallPhoto
{
  border-radius:5px;
  margin:5px;
  width:100px;
}
span.previousPhoto
{
  left:0px;
}
span.nextPhoto,
span.previousPhoto
{
  z-index:8;
  position: fixed;
  top:50%;
  cursor:pointer;
  padding:10px;
  background-color:var(--heimBrownGray);
  font-size:x-large;
}

span.nextPhoto
{
  right:0;
}
img.largePhotoMail
{
	max-width: 100%;
	max-height: 50vh;
}
li.largePhotoHolder,
div.largePhotoHolder
{
  float:left;
  max-width:100%;
  max-height:100%;
  width: 420px;
  height: 283px;
  position:relative;
  margin:10px;
}
div.largePhoto
{
	width:100%;
	height:100%;
	background-size: cover;
	background-position: center;
  background-repeat: no-repeat;
}
div.largePhoto > img
{
	width:100%;
	height:100%;
	object-fit:cover;
}

div.fullScreenEditorHolder,
div.fullScreenPhotoHolder
{
	position:fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
div.fullScreenEditorHolder
{
	background-color:var(--heimBrownGray);
}

div.filter
{
	margin-top:10px;
}

div.filter > *
{
	position:relative;
	margin:0px 10px 0px 7px;
	padding:2px 0px 2px 0px;
	white-space: nowrap;
	acolor:var(--heimYellow);
	color:var(--heimBrownGray);
	cursor:pointer;
}

div.filter > .select
{
	color:var(--heimBrownGray);
	background-color:var(--heimYellow);
	margin:0px 3px 0px 0px;
	padding:2px 7px 2px 7px;
}

div.titleA
{
	/*border:5pt solid green;*/
}
div.textFrameA
{
  /*border:5pt solid orange;*/
}
img.CenterImageInFrame
{
  /*border:1pt solid blue;*/
  margin-top: auto;
  margin-bottom: auto;
  width:100%;
  height:auto;
}
div.CenterImageInFrame
{
  /*border: 1pt solid yellow;*/
	width:100%;
  height:100%;
  padding-top:1px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left:auto;
  margin-right: auto;
}
@media (min-width: 1200px)
{
  div.titleText
  {
    font-size:1.5vw;
  }
}
@media (min-width: 900px)
{
	img.CenterImageInFrame
  {
    /*border:1pt solid red;*/
	  width:80%;
    max-height: 400px;
    height:100%;
    width:auto;
  }
  div.CenterImageInFrame
  {
    width:auto;
    height:auto;
  }
}
@media (min-width: 1500px)
{
	img.CenterImageInFrame
	{
    /*border:1pt solid magenta;*/
	  width:80%;
		max-height: 500px;
	  height:100%;
	  width:auto;
	}
	div.CenterImageInFrame
	{
	  width:auto;
	  height:auto;
	}
}

div.CalendarHour 
{
  border-radius: 50%;
  border: 1pt solid var(--heimBrown);
  width: 15px;
  height: 13px;
  cursor: pointer;
  font-family: arial;
  font-size: 10px;
}
div.Question
{
	padding-left: 2em;
	margin-bottom: 0.2em;
	font-size: 16pt;
	background-color: var(--heimBrown);
	color:var(--heimYellow);
	padding-bottom: 0.2em;
}
div.AfterQuestionA
{
	height:2px;
	background-image: linear-gradient(to right, var(--heimYellowA1), var(--heimYellowA0));
	margin-left: 2em;
}
div.Answer
{
	color: #888;
	padding-left: 2em;
	padding-right: 0.5em;
  padding-top:0.4vw;
  padding-bottom:0.4vw;
}
div.Info
{
  color: #CECECE;
  padding-left: 2em;
  padding-right: 0.5em;
  padding-top:0.4vw;
  padding-bottom:0.4vw;
}
div.QuestionBlock,  
div.QuestionBlockI
{
	margin-top:1.3vw;
	margin-bottom: 1.3vw;
	border: 1pt solid #DFDFDF;
}
div.QuestionBlock:hover,
div.QuestionBlockI:hover
{
	/*background-color: var(--heimYellow);*/
	font-weight: bold;
	border: 1pt solid black;
}
div.QuestionBlock:hover div.Info,
div.QuestionBlockI:hover div.Info
{
	color: #888;
}
div.QuestionBlock:hover div.Answer,
div.QuestionBlockI:hover div.Answer
{
  color: black;
}
div.Answer b
{
	color: var(--heimBrown);
}
div.QuestionBlock:hover div.Answer b
{
  color: black;
  text-decoration: underline;
}
div.QuestionBlock:hover div.Info b
{
  color: black;
  text-decoration: underline;
}
@media (min-width: 600px)
{
	div.QuestionBlockI
	{
		display: flex;
	}
}
@media (max-width: 600px)
{
  div.QuestionBlockI div.Image
  {
    display: block;
    text-align:center;
  }
  div.Question
  {
    text-align: center;
  }
}
div.QuestionBlockI div.Image
{
	border:8pt solid var(--heimBrown);
	background-color: var(--heimBrown);
}
div.FlexInfo
{
  margin-left: 1%;
  width: 90%;
  border: 2pt solid #eaeaea;
  background-color: #fafafa;
  border-radius: 25px;
  vertical-align: middle;
  box-shadow: 10px 10px 5px #C8C8C8;
  padding-top: 1em;
  padding-left: 1em;
  padding-bottom: 1em;
  padding-right: 1em;
  font-style: italic;
  color:#444;
}
@media (min-width:600px)
{
  div.Flex
  {
    display: flex;
  }
  div.FlexInfo
  {
    margin-left: 2em;
    width: 50%;
    border: 2pt solid #eaeaea;
    background-color: #fafafa;
    border-radius: 25px;
    vertical-align: middle;
    box-shadow: 10px 10px 5px #C8C8C8;
    padding-top: 1em;
    padding-left: 1em;
    padding-bottom: 1em;
    font-style: italic;
    color:#444;
  }
}
div.InfoText
{
  padding-bottom: 0.5em;
}
@media (min-width: 750px)
{
  div.OpenBlock
  {
    margin-left: 20%;
  }
}