
@viewport {
 zoom: 1.0; width: extend-to-zoom; height: extend-to-zoom; }
@-ms-viewport {
 width: extend-to-zoom; height: extend-to-zoom; zoom: 1.0; }
* { margin: 0; padding: 0; border: none; z-index: 2; }

body {background-color: rgba(45,11,12,1.00); }
body, html { font-weight: normal; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1em; color: #fff; min-height: 100%; line-height: 200%; width: 100%; background-position: center top; background-size: cover; background-attachment: fixed; }

div{	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

h1 { font-size: 1.6em; font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.4em; font-weight: bold; }
h4 { font-size: 1.15em; font-weight: bold; }

img { image-rendering: optimizeQuality; -ms-interpolation-mode: bicubic; }

p a, .link { color: #900; font-weight: bold; text-decoration: underline; }
p a:hover, .link:hover { color: #600; }

.bron, .info, .info ~ p {	font-size: 0.85em;	color: #cccccc;}
.info:hover{ color: #ffffff; }
.content { width: 100%; }

li { list-style-position: inside; }
ul.lijst { width: 100%; display: block; position: relative; }
ul.lijst li { margin-left: 55px; position: relative; display: inline-block; }
ul.lijst li:nth-child(1) { width: 40px; margin-left: 5px;  position:absolute;}
.read ul.lijst li:nth-child(1) {  position:relative; /*niet in verborgen deel*/}
ul.lijst:nth-child(2n - 1) { color: #300; background-color: rgba(50,0,0,0.1); }
 

.slide, .slide .tekst, .slide .inhoud			{position: relative; display: block; width:auto;}
.slide 			{ padding-top:165px; max-width:960px; margin:auto;}
.slide  .tekst 	{	background-color: rgba(255,255,255,0.80);	color: #300;	padding: 10px;	margin : 15px;	margin-top : 0;	width: 100%;	width: auto;}
.slide label:hover { background-color: #fff; color: #600; }

.slide1 { background-image: url(../images/bg-1mob.jpg); }
.slide2 { background-image: url(../images/bg-4mob.jpg); }
.slide3 { background-image: url(../images/bg-1mob.jpg); }
.slide4 { background-image: url(../images/bg-3mob.jpg); }
.slide5 { background-image: url(../images/bg-1mob.jpg); }

/** snelmenu */
#navmenu  {  clear:both; top: 0; z-index: 51; width:auto; position: relative; display: block; margin-top:0;  margin:30px; background-color: #900; text-align:center; padding:20px;}
#navmenu ul{	display: inline-block; position: relative; width:20%; min-width:200px; background-color: #900; text-align:left; }
#navmenu li{	list-style:none; }
#navmenu a.menuitem, #navmenuv a {	color: #fff; font-size: 12px; font-family: 'Nobile', sans; text-decoration: none; display: inline-block; position: relative; padding:5px;}
#navmenu a.menuitem:hover, a.menuItem:hover, #navmenu a:hover { background-color: #fff; color: #600; }

#menu { position: fixed; top: 70px; right: 0; display: inline; z-index: 8; width: auto; }
#menu a.menuitem { width: auto; height: 17px; margin: 0; padding: 10px; padding-bottom: 0px; padding-top: 11px; font-family: 'Nobile', sans; font-weight: 700; line-height: 10px; font-size: 15px; background-color: #900; color: #fff; display: inline-block; position: relative; text-decoration: none; border:0 #fff solid; border-left-width:1px; }
#menu a.menuitem:first-child{ border-left-width:0; }
#menu a.menuitem:hover { background-color: #fff; color: #900; }
#menu a.high{ background-color: #fff; color: #900;}

div.menuicon {  position: absolute;  height: 1px; width:100%;  z-index: 99; top:0;}
div.menuicon:hover {  color: #600;  cursor: pointer;}
div.menuicon > div {  max-height:0; -webkit-transition: 2s linear; -moz-transition: 2s linear; -ms-transition: 2s linear; -o-transition: 2s linear; transition: 2s linear; color: #ccc; overflow:hidden; width: 100%;position:absolute; display: block; }
div.menuicon:hover > div {  max-height:700px;   }
.mIco {padding:20px;padding-top:30px; display:inline; position:absolute; width:25px; height:20px; }

div.infocontainer { position: relative; left: 15px; bottom: 30px; height: 70px; width: 50px; overflow:hidden; -webkit-transition: width 2s;    transition: width 2s;}
div.infocontainer:active, div.infocontainer:hover {  width: 500px; cursor: pointer; }
div.infocontainer > div {  width: 500px; display: inline-block; }
div.infocontainer  a 	{font-style: italic; text-decoration: none; background-color: #630; display:inline-block; width: 50px; height:35px; text-align: center; position:absolute; }
div.infocontainer span  {  width:auto; color: #ccc; font-style: italic; background-color: #333; margin-left: 50px; display: inline-block; height:75px; padding-left:5px; padding-right:5px;line-height:30px}


@media only screen and (min-height:  600px) {
div.infocontainer { position: fixed;}

}
@media only screen and (max-width:  640px) {
body { line-height: 1.5em;}
.header { min-height: 40px; max-height: 80px; width: 100%; background-color: #300; position: fixed; z-index: 20; top:0;}
#navmenu ul{	display: block; position: relative; width:100%; min-width:200px; background-color: #900; text-align:left; }
.logo { max-width: 90%; max-height: 70px; padding: 5px; left: 17%; position: relative; display: inline-block; }
.print { display : none; }
.portret { margin: auto; display: block; position: relative; width:50%; padding-bottom:20px; }
.slogan { max-width: 80%; margin: auto; display: block; position: relative; }
input, label { display: none; }
#menu{display:none;}
.topsubmenu{display:none; }
.mobsubnav{display:none;}

}

@media only screen and (min-width:  641px) {
.mobmenu, .print 		{ display: none; }
body, html { } uit{ overflow-x: hidden; height:100%;}

.header { height: 100px; left: 0px; top: 0px; display:block; width:100%; position: fixed; overflow: visible; background-color: rgba(45,11,12,1.00); background-color: #300; z-index: 50; border-bottom: 5px #900 solid; -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4); box-shadow: 0px 5px 5px rgba(0,0,0,0.4); }

.logo 		{ position: absolute; left: 80px; top: 5px; z-index: 2; height: 60px; }
.slogan 	{ display: block; position: absolute; right: 100px;  }
.slogan:after { clear: both}
.slogan p 	{ display: none; }


.portret 	{ left:5px; width: 150px; display: inline; position: absolute;}
.slide .rechts		{  margin-left: 160px; width: 450px; }
.slide  .smal { position: relative; display: block; width: 50%; max-width: 400px; margin-left:15px}
.slide .inhoud 	 { padding-top: 0; top:0; padding-bottom:50px; }  uit{height:100px; display:inline; overflow:scroll;}

.slide .tabblad {background-color:fff; width:100%; height:auto; position:absolute; display:block;}
.slide .tabmark{position:fixed; }

.topsubmenu { width: 600px; right: 5px; top: 5px; position: fixed;  z-index: 50; text-align:right; }
.topsubmenu a{ color: #fff; font-size: 12px; padding: 4px; padding-top: 0; font-family: 'Nobile', sans; text-decoration: none;  position: relative; display: inline; top:0; text-align: center; }
.topsubmenu a:hover { color: #900; }

.mobsubnav {	width: 600px; position:absolute; top:165px; display:block; z-index:10; padding-left:10px;}
.mobsubnav a  { 	height: 23px; position: relative; display: inline-block; top: -33px; min-width: 100px; text-align: center; padding-top: 5px; padding-right: 10px; padding-left: 10px; padding-bottom: 5px; margin-left:10px; box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1); font-family: Nobile; line-height: 25px; font-size: 14px; background-color: #900; color: #ffffff; text-decoration:none; }	
.mobsubnav a:hover{ 	background-color: #ffffff; color: #900; cursor: pointer;}
	
#Aanvragen + div.tekst, #Aanvraagformulier + div.tekst, #ANBI + div.tekst, #Bestuur + div.tekst, #Disclaimer + div.tekst, #Doel + div.tekst, #Downloads + div.tekst, #Nieuws + div.tekst, #Toekenning + div.tekst, #Toegewezen + div.tekst { display:none }
#Aanvragen:target + div.tekst, #Aanvraagformulier:target + div.tekst, #ANBI:target + div.tekst, #Bestuur:target + div.tekst, #Disclaimer:target + div.tekst, #Doel:target + div.tekst, #Downloads:target + div.tekst, #Nieuws:target + div.tekst, #Toekenning:target + div.tekst, #Toegewezen:target + div.tekst{ display:block }


input[type=checkbox] { border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; }
.readbron, .read, div.read {  -webkit-transition: .5s linear; -moz-transition: .5s linear; -ms-transition: .5s linear; -o-transition: .5s linear; transition: .5s linear; padding-top: 20px; height:auto; overflow:hidden; }
.readbron input[type=checkbox] ~div {  -webkit-transition: max-height 0.8s; -moz-transition: max-height 0.8s; transition: max-height 0.8s;max-height: 0; overflow: hidden; } 
.readbron input[type=checkbox]:checked  ~div {   -webkit-transition: max-height 0.8s; -moz-transition: max-height 0.8s; transition: max-height 0.8s;max-height: 1000px; } 
[for="bron1"], [for="archief"], [for="archief2"] { position: relative; height: 50px; padding-bottom: 50px; left: 0; width: 100%; text-align: center; padding: 5px; box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1); border: #fff 1px solid; }
.readbron label:focus { background: rgba(0,0,0,.5); color: rgb(255,255,255); -webkit-transition: .5s linear; -moz-transition: .5s linear; -ms-transition: .5s linear; -o-transition: .5s linear; transition: .5s linear; }
.readbron label:hover, .readbron label:active {  cursor: pointer; background-color:#600; color:#fff;}
}

@media only screen and (min-width:  940px) {
.slide  .smal {max-width: 600px; }
.slide .rechts		{  margin-left: 200px; width: 700px; }
.slide .tekst 	{padding:30px;}
.logo 		{ top: 15px;   height: 65px; }
.slogan 		{bottom:20px;}

}
@media only screen and (min-width:  1240px) {
.portret 	{ left:5px; width: 250px; display: inline; position: absolute;}
.slide .rechts		{  margin-left: 300px; width: 70%;  }

.logo 		{ height: 70px; }

.slide1 { background-image: url(../images/bg-1a.jpg); }
.slide2 { background-image: url(../images/bg-4a.jpg); }
.slide3 { background-image: url(../images/bg-1a.jpg); }
.slide4 { background-image: url(../images/bg-3a.jpg); }
.slide5 { background-image: url(../images/bg-1a.jpg); }

#menu{top:65px;}	
#menu a.menuitem {  height: 20px;  padding: 15px; padding-top: 15px; padding-bottom: 0; font-size: 16px; }

	}
	
	
@media only screen and (min-width:  1600px) {
	.slide .tekst p { font-size: 1.1em; }
}

