/* CSS Document */

/* divs */

a:focus {outline: 0;}

@font-face {
    font-family: 'Myriad Web';
    src: url('/webfonts/Myriad Web.eot');
    src: url('/webfonts/Myriad Web.eot?#iefix') format('embedded-opentype'),
         url('/webfonts/Myriad Web.woff') format('woff'),
         url('/webfonts/Myriad Web.ttf') format('truetype'),
         url('/webfonts/Myriad Web.svg#myriad_roman') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro-Cond';
    src: url('/webfonts/MyriadPro-Cond.eot');
    src: url('/webfonts/MyriadPro-Cond.eot?#iefix') format('embedded-opentype'),
         url('/webfonts/MyriadPro-Cond.woff') format('woff'),
         url('/webfonts/MyriadPro-Cond.ttf') format('truetype'),
         url('/webfonts/MyriadPro-Cond.svg#MyriadPro-Cond') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'myriadpro-light-webfont';
    src: url('/webfonts/myriadpro-light-webfont.eot');
    src: url('/webfonts/myriadpro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/webfonts/myriadpro-light-webfont.woff') format('woff'),
         url('/webfonts/myriadpro-light-webfont.ttf') format('truetype'),
         url('/webfonts/myriadpro-light-webfont.svg#myriadpro-light-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro-Regular';
    src: url('/webfonts/MyriadPro-Regular.eot');
    src: url('/webfonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
         url('/webfonts/MyriadPro-Regular.woff') format('woff'),
         url('/webfonts/MyriadPro-Regular.ttf') format('truetype'),
         url('/webfonts/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'myriadroman';
    src: url('/webfonts/myriad_roman-webfont.eot');
    src: url('/webfonts/myriad_roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('/webfonts/myriad_roman-webfont.woff') format('woff'),
         url('/webfonts/myriad_roman-webfont.ttf') format('truetype'),
         url('/webfonts/myriad_roman-webfont.svg#myriad_roman') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
	margin : 0;
	padding : 0;
	background-color: #fff;
	}

.scrolltop {
    background-image: url("https://app.pbo-zuidwestbrabant.nl/images/button/scroll-top.png");
    background-repeat: no-repeat;
    bottom: 5px;
    display: none;
    height: 40px;
    left: auto;
    overflow: hidden;
    padding: 17px 16px;
    position: fixed;
    right: 5px;
    top: auto;
    width: 40px;
    z-index: 90;
}
#content {
	text-align:center;
	margin: 0px auto;
	}

#contentLogin {
	text-align:center;
	margin-top:3%!important;
	padding-left:20px;
	padding-right:20px;
	}

#contentPages {
	text-align:left;
	margin-top:30px!important;
	margin: 0px auto;
	padding-left:20px;
	padding-right:20px;
	max-width:1300px;
	}

#top {
	background-color:#000;
	height:15px;
	padding:10px;
	padding-left:0px;
	text-align:right;
	}

#headerWrapper {
	background-color:#f3f3f9;
	padding:2px;
	text-align:center;
	}

#header {
	max-width:1300px;
	margin: 0px auto;
	}

#footerWrapper {
	background-color:#000;
	height:86px;
	padding:20px;
	text-align:center;
	margin-top:100px;
	}

#footer {
	max-width:1300px;
	margin: 0px auto;
	}

.topbar_tekst {
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:14px;
	color: #FFF;
	font-weight:normal;
	text-decoration:none;
	}

h1 {
	font-family: "MyriadPro-Regular", Arial, Verdana, Times, serif;
	font-size:40px;
	color: #000;
	font-weight:bold;
	text-decoration:none;
	}

h2 {
	font-family: "MyriadPro-Regular", Arial, Verdana, Times, serif;
	font-size:22px;
	color: #000;
	font-weight:bold;
	text-decoration:none;
	}

.linkWhite a {
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:14px;
	color: #FFF;
	font-weight:normal;
	text-decoration:none;
	border-bottom: 0px solid #FFF;
	margin-left:16px;
	margin-right:16px;
	}

.linkWhite a:hover {
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:14px;
	color: #FFF;
	font-weight:normal;
	text-decoration:none;
	border-bottom: 1px solid #FFF;
	margin-left:16px;
	margin-right:16px;
	}

.login {
	max-width:300px;
	border: 2px solid #000;
	border-radius: 5px;
	margin: 0px auto;
	padding:30px;
	text-align:left;
	background-color:#f3f3f9;
	box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -webkit-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -moz-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89);
	}

.blockWrapper {
	width:100%;
	margin: 0px auto;
	max-width:1500px;
	}
	
.block {
	box-sizing: border-box;
	width:29%;
	border: 2px solid #000;
	border-radius: 5px;
	margin: 0px auto;
	padding:20px;
	text-align:left;
	background-color:#f3f3f9;
	margin-left:2%;
	margin-right:2%;
	margin-top:0px;
	float:left;
	min-height:210px;
	margin-bottom:60px;
	box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -webkit-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -moz-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89);
	}

.block50 {
	box-sizing: border-box;
	width:46%;
	border: 2px solid #000;
	border-radius: 5px;
	margin: 0px auto;
	padding:20px;
	text-align:left;
	background-color:#f3f3f9;
	margin-left:2%;
	margin-right:2%;
	margin-top:0px;
	float:left;
	min-height:210px;
	margin-bottom:60px;
	box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -webkit-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -moz-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89);
	}
	
.block1-4 {
	box-sizing: border-box;
	width:22.3%;
	border: 2px solid #000;
	border-radius: 5px;
	margin: 0px auto;
	padding:20px;
	text-align:left;
	background-color:#f3f3f9;
	margin-left:0%;
	margin-right:2%;
	margin-top:0px;
	float:left;
	min-height:200px;
	margin-bottom:60px;
	position:relative;
	top: 0;
    left: 0;
	box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -webkit-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -moz-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89);
	}

.rowwide a {
	box-sizing: border-box;
	display:block;
	width:100%;
	border: 2px solid #000;
	border-radius: 5px;
	margin: 0px auto;
	padding:12px;
	text-align:left;
	background-color:#f3f3f9;
	margin-top:0px;
	margin-bottom:20px;
	text-decoration:none!important;
	height: 100%;
	font-family: "MyriadPro-Regular", Arial, Verdana, Times, serif;
	font-size:28px;
	color: #000;
	font-weight:bold;
	text-decoration:none;
	text-align:left;
	box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -webkit-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -moz-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89);
	}

.rowwide a:hover {
	background-color:#008000;
	color: #fff!important;
	}


/* Clear floats after the columns */
	.row:after {
	  content: "";
	  display: table;
	  clear: both;
	}

.kopjes {
	font-family: "MyriadPro-Regular", Arial, Verdana, Times, serif;
	font-size:28px;
	color: #000;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	}

.MainTekst {
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:16px;
	color: #333333;
	font-weight:normal;
	text-decoration:none;
	line-height:150%;
	}

.MainTekstRood {
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:16px;
	font-weight:normal;
	color:#C00000;
	text-decoration:none;
	line-height:150%;
	}

.MainTekstGroen {
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:16px;
	font-weight:normal;
	color:#009933;
	text-decoration:none;
	line-height:150%;
	}

.LinkRood a {
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:16px;
	font-weight:normal;
	color:#c00000;
	text-decoration:none;
	line-height:180%;
	border-bottom: 0px solid #c00000;
	}

.LinkRood a:hover {
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:16px;
	font-weight:normal;
	color:#c00000;
	text-decoration:none;
	line-height:180%;
	border-bottom: 1px solid #c00000;
	}

.LinkBlauw a {
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:16px;
	color: #c00000;
	font-weight:500;
	text-decoration:none;
	}

.LinkBlauw a:hover {
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:16px;
	color:#c00000;
	font-weight:500;
	text-decoration:none;
	}

.knop { 
	text-align:center; 
	padding:10px 20px;
	font-weight:500;
	background-color:#C00000; 
	color: #FFFfff;
	cursor:pointer; 
	font-size:14px;
	font-family: Arial, Verdana, Times, serif;
	text-decoration:none !important;
	border: 2px solid #FFFFFF;
	box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -webkit-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -moz-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89);
	}

.knop:hover {
	text-align:center; 
	padding:10px 20px;
	font-weight:500;
	background-color:#000; 
	color: #FFFfff;
	cursor:pointer; 
	font-size:14px;
	font-family: Arial, Verdana, Times, serif;
	text-decoration:none !important;
	border: 2px solid #FFFfff;
	box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -webkit-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -moz-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89);
	}

	
.Form {
	width: 92%;
	max-width:800px;
	padding:10px;
	border:1px;
	border-style:solid;
	border-color:#c0c0c0;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	background-color: #F8F8F8;
	text-align:left;
	line-height:150%;
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:16px;
	font-weight:normal;
	color: #333333;
	text-decoration:none;
	}

.FormFout {
	width: 92%;
	max-width:800px;
	padding:10px;
	border:1px;
	border-style:solid;
	border-color:#c00000;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	background-color: #F8F8F8;
	text-align:left;
	line-height:150%;
	font-family: "myriadroman", Arial, Verdana, Times, serif;
	font-size:16px;
	font-weight:normal;
	color: #333333;
	text-decoration:none;
	}

#Column1 {
	width:40%;
	float:left;
	padding:2px;
	}

#Column1a {
	width:27%;
	float:left;
	padding:2px;
	}

#Column2 {
	width:10%;
	float:left;
	padding:2px;
	}

#Column2a {
	width:28%;
	float:left;
	padding:2px;
	}

#Column3 {
	width:35%;
	float:left;
	padding:2px;
	}

#Column4 {
	width:5%;
	float:left;
	padding:2px;
	}

#Column4a {
	width:11%;
	float:left;
	padding:2px;
	}

#Column50 {
	width:48%;
	float:left;
	padding:4px;
	margin-bottom:16px;
	}

#Column25 {
	width:22%;
	float:left;
	padding:8px
	margin-bottom:16px;
	}

#Column33 {
	 box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	width:33%;
	padding:10px;
	float:left;
	text-align:left;
	margin-bottom:20px;
	}

#Column26 {
	 box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	width:26%;
	padding:10px;
	padding-left:20px;
	float:left;
	text-align:left;
	margin-bottom:20px;
	}
	
#Column40 {
	 box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	width:40%;
	padding:10px;
	float:left;
	text-align:left;
	margin-bottom:20px;
	}

	
#Column100 {
	 box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	width:98%;
	padding:10px;
	text-align:left;
	margin-bottom:20px;
	}


/* IMPORTEER FUNCTIE */

.buttonadd {
	float:left; 
	margin-top:44px;
}

.outer-scontainer {
    background: #f3f3f9;
	border: 2px solid #000;
    padding: 20px;
    border-radius: 2px;
	box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -webkit-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89); -moz-box-shadow: 4px 4px 18px 0px rgba(0,0,0,0.89);
}

.outer-scontainer table {
    border-collapse: collapse;
    width: 100%;
}

.outer-scontainer th {
    border: 1px solid #dddddd;
    padding: 8px;
    text-align: left;
}

.outer-scontainer td {
    border: 1px solid #dddddd;
    padding: 8px;
    text-align: left;
}

#response {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 2px;
    display: none;
}

.success {
    background:#C5FEC8;
	border: 2px solid #488FBC;
}

.error {
    background: #fbcfcf;
	border: 2px solid #C00000;
}

div#response.display-block {
    display: block;
}

/* EINDE IMPORTEER FUNCTIE */	



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

#headerWrapper {
	text-align:center;
	}


.blockWrapper {
	width:96%;
	}

.block {
	width:92%;
	}

.block50 {
	width:94%;
	}

.block1-4 {
	width:97%;
	}

#Column1 {
	width:80%;
	}

#Column1a {
	width:80%;
	}

#Column2 {
	display:none;
	}

#Column2a {
	width:40%;
	}

#Column3 {
	display:none;
	}

#Column4a {
	display:none;
	}

h1 {
	font-size:30px;
	}

h2 {
	font-size:16px;
	}

.buttonadd {
	margin-top:0px;
	margin-bottom:26px;
	}

#Column50 {
	width:100%;
	}

#Column33 {
	width:100%;
	}

#Column26 {
	width:100%;
	padding-left:10px;
	}
	
#Column40 {
	width:100%;
	}

#Column100 {
	width:92%;
	}

}

/* Samsung Galaxy (landscape) */
@media only screen and (min-width: 325px) and (max-width: 499px) {

#headerWrapper {
	text-align:center;
	}
	

.blockWrapper {
	width:96%;
	}

.block {
	width:92%;
	}

.block50 {
	width:94%;
	}

.block1-4 {
	width:97%;
	}

#Column1 {
	width:80%;
	}

#Column1a {
	width:80%;
	}

#Column2 {
	display:none;
	}

#Column2a {
	width:30%;
	}

#Column3 {
	display:none;
	}

#Column4a {
	display:none;
	}

h1 {
	font-size:30px;
	}

h2 {
	font-size:16px;
	}

.buttonadd {
	margin-top:0px;
	margin-bottom:26px;
}

#Column50 {
	width:100%;
	}

#Column33 {
	width:100%;
	}

#Column26 {
	width:100%;
	padding-left:10px;
	}
	
#Column40 {
	width:100%;
	}

#Column100 {
	width:92%;
	}

}

/* iPhone and other smartphones (portrait) */
@media only screen and (min-width: 500px) and (max-width: 599px) {


.blockWrapper {
	width:96%;
	}

.block {
	width:94%;
	}

.block50 {
	width:92%;
	}

.block1-4 {
	width:48%;
	}
	

#Column1 {
	width:80%;
	}

#Column1a {
	width:80%;
	}

#Column2 {
	display:none;
	}

#Column2a {
	width:40%;
	}

#Column3 {
	display:none;
	}

#Column4a {
	display:none;
	}

#Column50 {
	width:100%;
	}

#Column33 {
	width:100%;
	}

#Column26 {
	width:100%;
	padding-left:10px;
	}
	
#Column40 {
	width:100%;
	}

#Column100 {
	width:92%;
	}

h2 {
	font-size:18px;
	}

}


/* iPhone and other smartphones (portrait) */
@media only screen and (min-width: 600px) and (max-width: 899px) {


.blockWrapper {
	width:96%;
	}

.block {
	width:45%;
	}

.block50 {
	width:94%;
	}

.block1-4 {
	width:48%;
	}
	

#Column1 {
	width:80%;
	}

#Column1a {
	width:80%;
	}

#Column2 {
	display:none;
	}

#Column2a {
	width:40%;
	}

#Column3 {
	display:none;
	}

#Column4a {
	display:none;
	}

#Column50 {
	width:100%;
	}

#Column33 {
	width:100%;
	}

#Column26 {
	width:100%;
	padding-left:10px;
	}
	
#Column40 {
	width:100%;
	}

#Column100 {
	width:92%;
	}

}

/* iPhone and other smartphones (landscape) */
@media only screen and (min-width: 900px) and (max-width: 1400px) {



}

@media only screen and (min-width: 1400px) and (max-width: 1800px) {




}