/*    styling van rondleiding */

html, body {
	height: 100%;
}
body {
	margin: 0 auto;
  	display: flex;
  	flex-direction: column;
	font-family: "Arial", sans-serif;
	background-image: url("../images/template/bkg.png");
	background-size: 100%;
	background-repeat: repeat-y;
	/*background: rgb(129, 185, 212, 0.85);*/
}

#start {
	margin: 0 80px;
}

#header {
	margin: 0 auto;
	display: block; 
	width: 100%;
	/*min-height: 70px;*/
	max-width: 1200px;	
	font-size: 36px;
	color: #ffcc00;	
	line-height: 80px;
	vertical-align:middle;
	text-align: center;
	background : rgb(129, 185, 212, 1);
	text-shadow: 0.02em 0.02em #333;
}

.promo {
	width:500px;
	float: left;
	height: auto;
	margin-right: 20px;
}
.maps {
	border: 1px solid black;
	border-radius: 5px;
}
.divider {
	width: 95%; 
	height: 24px; 
	margin: 0 auto;
	display: block; 
	background-color: blue; 
	background-image: linear-gradient(to bottom , blue , lightblue , blue ); 
	border: 1px solid navy; 
	border-radius: 12px;"
}
#container {
	margin: 0 auto;
	width: 100%;  
	max-width: 1200px;
}

#container img {
	float: left;
	width: 45%;
	margin: 10px;
	height: auto;
	border: 1px solid #75c3d5;
	background: lightblue;
}

#container_flex{
  width: 50%;
  float: right;
}

	
.flex-container {
	padding:0;
}
.flex-container p {
	padding:5px 20px;
}

.index {
	background: #fff;
	width: 100%;
	line-height: 30px;
	min-height: 80vh;

}


#banner  {
	margin: 0 auto;
	display: block;
	width: 100%;
	/*max-width: 1200px;*/	
	font-family: "Arial", sans-serif;
	font-size: 28px;
	line-height:30px;
	background: rgb(129, 185, 212, 1);
	color:rgb(255, 200, 0);
	text-align: center;
	text-shadow: 0.04em 0.04em #222;
}
table {
	margin: 30px 0 0 30px;
}
th , td{
	vertical-align: top;
	text-align: left;
}
input[type=submit]{
	background: navy;
	color: ivory;
	border-left: 1px solid white; 
	border-top: 1px solid white;
	border-right: 2px solid navy; 
	border-bottom: 2px solid navy;
    font-size: 1em;
	padding: 3px 10px;
	cursor: pointer;}

input[type=submit]:hover {
	border-left: 1px solid navy; 
	border-top: 1px solid navy;
	border-right: 2px solid white; 
	border-bottom: 2px solid white;
	background: rgb(255, 200, 0);
	color: navy;
	font-style: italic;
	}

.btn  {
	min-width: 230px;
	margin-left: 3px;
	height: 50px;
	background: navy;
	color: ivory;
	border-left: 1px solid white; 
	border-top: 1px solid white;
	border-right: 2px solid navy; 
	border-bottom: 2px solid navy;
    font-size: 1em;
	padding: 3px 10px;
	cursor: pointer;
	
	}
	 
.btn:hover   {
	border-left: 1px solid navy; 
	border-top: 1px solid navy;
	border-right: 2px solid white; 
	border-bottom: 2px solid white;
	background: rgb(255, 200, 0);
	color: black;
	font-style: italic;
	
	}
.intro{
	width: 100px;
	height: 50px;
	background: rgb(255, 200, 0);
	border: 3px solid navy;
	border-radius: 50%;
	cursor: pointer;
}
.intro:hover {
	background: navy;
	color: ivory;
	border: 3px solid rgb(255, 200, 0);
	border-radius: 50%;
}

	.center  {
		margin: 25px auto;
	}
	.schaduw {
		color: white;
		text-shadow: 1px 1px 2px navy, 0 0 25px purple, 0 0 5px pink;
	}
#left {
	float:left;
	width: 45%;
}
	
#right {
	float:left;
	width: 55%;
}

#blueDIV {
		width: 100%;
		max-width: 500px;
		margin:auto;
		/*padding: 20px;*/
		box-shadow: 7px 7px 15px 2px ;
	}

#footer {
	position: fixed;
	bottom: 0;
  	/*flex-shrink: 0;*/
	width:100%;
	/*max-width: 1200px;*/	
	/*margin: 0 auto;*/
	background: #282828;
	color: #efefef;
	vertical-align:middle;
	text-align: center;
	line-height: 50px;
	}
#hint {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  height: 100px;
  padding-top: 50px;
  text-align: left;
  font-size: .8em;
}

#hint sup{
	 color: red;
	 font-size: 2.5em;'
}
	
/*
	position: absolute;
	top: 350;
	left: 120;
	font-size: 0.8em;*/
	/*flex-shrink: 0;*/
	/*max-width: 1200px;*/	
	/*margin: 0 auto;*/
	/*background: transparant;
	color: black;
	vertical-align:middle;
	text-align: left;
	line-height: 30px;
	}*/
.shade {
	color: white;
	text-shadow: 1px 1px 2px black, 0 0 25px #81B9D4, 0 0 5px #81B9D4;margin: 25px ;
}
.logo {
	width: 50%;
	float: left;
	padding-bottom: 15px;
	border-bottom: 1px solid black;
}

p {
	margin: 10px;
}
h2, h3, li {
	font-size: 14pt;
	margin: 10px 10px 30px 30px;
}

form	{
	margin-left: 20%;
}
label { 
	display: block;
	width: 120px;
	float: left;
}
.verzend {
	width:100%;
}

img	{
	max-width: 700px;
	max-height: 500px;
    display: block;
    margin: 0 auto;
	border-radius: 3px;
}
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}
.knop {
	width: 120px;
	margin:0 auto;
	margin-bottom: 10px;
}

.blok-kleur {
	padding-top: 1px;
	background-color: black;
	width: 100%;
	color: rgb(255, 255, 255, 0.7);
}
.blok-text {
	width: 100%;
	max-width: 1200px;
	min-height: 2px;
	/*padding: 20px 10px;*/
}
.blok-text p {
	margin: 20px 20px;
}
#vraag ,#antwoord  {
	/*text-align: center;*/
	color: #333333;	
	position: relative; /* 1 */
	padding: 10px 0;
	min-height: 16px;

}
#vraag {
	border: 1px solid rgb(129, 185, 212);
	background-color: rgba(129, 185, 212, 0.5);text-align: center;
}
#antwoord {
	border: 1px solid rgb(255, 231, 131);
	background: rgb(255, 231, 131, 0.7);
	text-align: center;
}

#maximeren{
	position:absolute;
	right:10px;
	top:10px;
	height:32px;
	width:32px;
	z-index:100;
	background-image:url(maximerenblue.png);
	background-repeat:no-repeat;
	background-size:cover;
}

.accordion {
  margin: 20px 46%;
}

.active, .accordion:hover {
  
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
#myDIV {
  /*min-height:300px;*/
  display: grid;
  width: 80%;
  margin: 0 auto;
  gap: 1px;
  background-color: #2196F3;
  padding: 0;
  grid-template-columns: 25% 74%;
}
#myDIV div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;
  gap: 1px;
  padding: 4px 0 4px 5px;
  font-size: 1em;
}

@media only screen and (max-width: 1024px) {
	#container {
		background: white;
		width: 100%;
	}
	#container img {

	  } 
	#container_flex{
	  width: 100%;
	  float: none;
	  margin: 20px auto;
	}
	
	#start {
		margin: 0 4px; 
	}

	.promo{
	width: 100%;
	height: auto;
	margin-right: 0;
	}
	
	.blok-kleur{
		width: 100%;
	}
	.blok-text {
		width: 100%;
	}
	h4 {
		/*text-decoration: underline;*/
		text-align: center;
	}
	p, h2, h3{
		font-size: 1 em;
	}
	.accordion {
	  margin: 20px 40%;
	}
	img	{
		max-width: 99%;
		max-height: 450px;
	}

	table {
		margin: 30px 10px 100px 10px;
	}
	#left, #right {
			width: 100%;
	}
	#myDIV {
		/*min-height:300px;*/
		width: 94%;
		gap: 0;
		grid-template-columns: 100% ;
  }
}

@media only screen and (max-width: 500px) {
	#container img {
		width: 100%;
	  } 
	#container_flex{
	  width: 100%;
	  float: none;
	  margin: 20px auto;
	}
}