@charset "UTF-8";

html {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%;
  font-size: 1rem;
}
*, *:before, *:after {
  box-sizing: inherit;
  -webkit-box-sizing: inherit;
}
body {
	margin: 0;
	padding: 0;
	font-family: Tahoma, Geneva, sans-serif;
	color: #052F1E;
	background: url(../webafbeeldingen/achtergrond3.jpg) fixed center;
	background-size: cover;
}
header {
	padding: 1.5rem 2rem .5rem 2rem;
	position: relative;
	background: linear-gradient(120deg, hsla(0,0%,80%,0.4), white) ;
	border-radius:1rem 1rem 0rem 0rem;
    background-clip: padding-box;
	box-shadow:0.16em 0.12em 0.3em 0.2em hsla(161,100%,20%,0.65) ;
	margin-top:5px;
	margin-bottom:2px;
}
main {
	padding: 2rem;
	background: linear-gradient(120deg, hsla(0,0%,80%,0.70), white);
	border-radius: 0rem;
	background-clip: padding-box;
	box-shadow: 0.16em 0.12em 0.3em 0.2em hsla(161,100%,20%,0.65);
	margin: 5px 0px 2px;
	line-height: 1.5em;
	letter-spacing: 1px;
}
footer {
	background: linear-gradient(120deg, hsla(0,0%,80%,0.4), white);
	border-radius: 0rem 0rem 1rem 1rem;
	background-clip: padding-box;
	box-shadow: 0.16em 0.12em 0.3em 0.2em hsla(161,100%,20%,0.65) ;
	margin-top: 5px;
	margin-bottom:8px;
	padding: 1rem 0rem 1rem 2rem;
	line-height: 1.4rem;
}
h1 {
	font-size:1.8rem;
}
h2 {
	font-size:1.6rem;
}
h3 {
	font-size:1.4rem;
}
h4 {
	font-size:1.2rem;
}
h5 {
	font-size:1.0rem;
	font-weight:bold;
}
h6 {
	font-size:0.8rem;
	float:right;
}
main a:link, main a:visited {
	color:#67BF7D;
	text-decoration:none;
	text-shadow: 0.5px 1px #555;
}
main a:hover {
	color:#006444;
	text-shadow:none;
}
main li {
	list-style: url(../webafbeeldingen/list.png) none inside;
	padding:2px;
}
.adres {
	width:280px;
	position:relative;
	float:left;
}
.spoed {
	width:280px;
	position:relative;
	float:left;
	font-weight:;
}
.alarm {
	width:280px;
	position:relative;
	float:left;
	font-weight:bold;
}
footer a:link, footer a:visited {
	color: #006444;
	border-radius: 4px;
	text-decoration: none;
	background: linear-gradient(120deg, hsla(0,0%,80%,0.4), white);
	background-clip: padding-box;
	box-shadow: 0.08em 0.06em 0.2em 0.1em hsla(161,100%,20%,0.65) inset;
	padding:2px 7px;
}
footer a:hover {
	background-color:#006444;
	color:#FFF;
}
.container {
  	display: flex;
	display: -webkit-flex;
  	flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
  	width:100%;
  	max-width:70em;
  	margin: 0 auto;
}
header, main, footer {
  flex: 100%;
  -webkit-flex: 100%;
}
header .hoofding img {
	width: 100%;
	height:auto;
}
header nav {
	position: relative;
	top: 0px;
	left: 0px;
	opacity: 1;
	width: auto;
	float: left;
}
.afb-rechts {
	float: right;
	clear: both;
	margin: 10px 5px 10px 20px;
	box-shadow: 2px 2px #AAA;
}
.afb-lightbox {
	float:left;
	margin-left:0px;
	margin-right:20px;
	margin-top:10px;
	margin-bottom:10px;
	clear:both;
}
.afb-lightbox-links {
	float:left;
	margin-right:20px;
	margin-top:10px;
	margin-bottom:10px;
	clear:both;
}
.afb {
	float: none;
	margin: 20px;
	box-shadow: 2px 2px #AAA;
	clear: none;
}
a:link .afb, a:visited .afb {
	opacity: 0.70;
	filter: alpha(opacity=70);
	-webkit-transition: all 0.4s linear 0.2s;
	-moz-transition: all 0.4s linear 0.2s;
	-ms-transition: all 0.4s linear 0.2s;
	-o-transition: all 0.4s linear 0.2s;
	transition: all 0.4s linear 0.2s;
}
a:hover .afb {
	-webkit-opacity: 100;
	-moz-opacity: 100;
	opacity: 1.00;
}
.sw {
	font-size:9px;
	font-style:italic;
	text-align:right;
	padding-right:140px;
}

/*----------- volgorde mobiel --------*/

  	main			{order:1; -webkit-order: 1; }
  	footer			{order:2; -webkit-order: 2; }

/*--------- aanpassingen voor verschillende weergaven -------*/

@media screen and (min-width: 40em) { /* 640px */
	html {
	font-size:;}
  	.zijkolom-1, .zijkolom-2 {
    flex: auto;
	-webkit-flex: auto;
  }
  	header .hoofding img {
	width: 500px;
	height: auto;
}
	.zijkolom-1 	{order:1; -webkit-order: 1; }
  	main			{order:2; -webkit-order: 2; }
  	footer			{order:3; -webkit-order: 3; }
.afb-lightbox {
	float:right;
	margin-left:20px;
	margin-right:0px;
}
	}
@media screen and (min-width: 48em) { /* 768px */
	html {font-size:; }
  	main { flex: 2; -webkit-flex: 2; }
  	.zijkolom-1 { flex: 1; -webkit-flex: 1; }
  	.zijkolom-2 { flex: 100%; -webkit-flex: 100%; }
  	.zijkolom-1 	{order:1; -webkit-order: 1; }
  	main			{order:2; -webkit-order: 2; }
  	.zijkolom-2	{order:3; -webkit-order: 3; }
  	footer		{order:4; -webkit-order: 4; }
	header .hoofding img {
	width: 664px;
	height: auto;}
	header nav {
		float:right;}
.adres {
	width:300px;
}
.spoed {
	width:300px;
}
.alarm {
	width:300px;
}
footer a:link, footer a:visited {
	color: #006444;
	border-radius: 0px;
	text-decoration: none;
	background: none;
	background-clip: padding-box;
	box-shadow: none;
	padding:2px 3px;
}
}
@media screen and (min-width: 64em) { /* 1024px */
	html {font-size: ; }
  	main { flex: 3; -webkit-flex: 3; }
  	.zijkolom-1, .zijkolom-2 { flex: 1; -webkit-flex: 1; }
  	.zijkolom-1 	{order: 1; -webkit-order: 1; }
  	main			{order: 2; -webkit-order: 2; }
  	.zijkolom-2	{order: 3; -webkit-order: 3; }
  	footer		{order: 4; -webkit-order: 4; }
.adres {
	width:350px;
}
.spoed {
	width:350px;
}
.alarm {
	width:250px;
}
}

@media screen and (min-width: 80em) { /* 1280px */
	html {font-size:  }
  	main { flex: 3; -webkit-flex: 3; }
  	.zijkolom-1 { flex: 1; -webkit-flex: 1; }
  	.zijkolom-2 { flex: 1; -webkit-flex: 1; }
  	.zijkolom-1 { order: 1; -webkit-order: 1; }
  	main        { order: 2; -webkit-order: 2; }
  	.zijkolom-2 { order: 3; -webkit-order: 3; }
  	footer      { order: 4; -webkit-order: 4; }
  header h1 {
	  font-size:100px;
  }
  header nav li {
	  font-size:;
  }
  header nav {
	  /*position:fixed;*/
  }
  
}

@media screen and (min-width: 110em) { /* 1760px */
	html {font-size:1.2rem;}
	container {max-width:1400px;}
}