/**** CSS Document ****/

/*** reset CSS ***/

html {
	box-sizing: border-box;  /* width = width-padding */
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

* {
	padding: 0; 
	margin: 0;
}
*, *:before, *:after {
	box-sizing: inherit;
}

body {
	font-family: 'Open Sans', sans-serif;
	color: #000;
	text-align: center;
	background: rgb(10,65,100); /* background: #0A4164; */
	background-image: linear-gradient(135deg, rgba(10,65,100,0.5) 0%, rgba(16,94,142,0.5) 23%, rgba(83,201,234,0.8) 65%, rgba(89,205,241,0.8) 75%, rgba(69,185,234,0.8) 85%),
	url('../images/blockb.png');
}

p {
  margin-top: 0.2em;
  margin-bottom: 1em;
}

ul {
	padding-left: 15px;	
	padding-bottom: 10px;
	overflow: hidden;
}

ol {
	padding-left: 20px;	
	padding-bottom: 10px;
	overflow: hidden;
}

.font15 {
	font-size: 0.9375em;
}

.clear {
	clear:both;
}

/* test */
#foutmelden {
	display: none;
}

/* opmaak ckeditor afbeeldingen in item text */
.image {
	text-align: center;
}

/** item links **/
:focus {
    outline:none;
}
:active {
    outline:none;
}

a:link 		{ color:#0066CC; text-decoration:none;}
a:visited 	{ color:#0066CC; text-decoration:none;}
a:hover 	{ color:#0066CC; text-decoration:none;}
a:active	{ color:#0066CC; text-decoration:none;}
a:focus 	{ color:#0066CC; text-decoration:none;}

/* divs binnen a:, class bepaalt layout */
a:link .item-title { 		color:#0066CC;}	
a:visited .item-title {		color:#0066CC;}
a:hover .item-title {		color:#0066CC; text-decoration:underline;}	

a:link .item-title-sub {	text-decoration:none;}
a:visited .item-title-sub {	text-decoration:none;}
a:hover .item-title-sub {	text-decoration:none;}	

a:link .item-text {		color:#000000;}		
a:visited .item-text {	color:#000000;}	
a:hover .item-text {	color:#000000;}

a:link .item-text-extra {		color:#000000;}		
a:visited .item-text-extra {	color:#000000;}	
a:hover .item-text-extra {	color:#000000;}

/* a binnen div, class bepaalt layout 
.itemTitleSub a:link { 		text-decoration: none;}
.itemTitleSub a:visited { 	text-decoration: none;}
.itemTitleSub a:hover {		text-decoration: none;}
*/
/* niet in gebruik, div bevat geen links 
.itemText a:link  {		color:#0066CC;font-weight: 700;}		
.itemText a:visited  {	color:#0066CC;}	
.itemText a:hover  {	color:#0066CC; text-decoration: underline;}
*/

/** bekijk pagina **/

/* bekijk button */
a:hover .button_goto {	background-color:#0066CC;}
a:hover .button_goto_green {background-color:#0066CC;}
a:hover .button_goto_deactivated {background-color:#AAA;}

/* a binnen div, class bepaalt layout */
.view-item-title a:link {color:#000;}
.view-item-title a:visited {color:#000;}
.view-item-title a:hover {color:#0066CC; text-decoration: underline;}

/* opmaak links die in tekst staan */
.view-item-text a:link  {	color:#0066CC;font-weight: 700;}		
.view-item-text a:visited  {color:#0066CC;}	
.view-item-text a:hover  {	color:#0066CC; text-decoration: underline;}

/* opmaak breadcrums */
#breadcrums  a:link {color:#0066CC;}
#breadcrums  a:visited  {color:#0066CC;}	
#breadcrums  a:hover  {	color:#0066CC; text-decoration: underline;}

/* opmaak footer */
#bottom a:link {	color: #FFF;}
#bottom a:visited {	color: #FFF;}
#bottom a:hover {	color: #FFF; text-decoration: underline;}

/* fout melden */
.foutmelden a:link  {	color:#000; text-decoration: underline;}	
.foutmelden a:visited  {color:#000;}	
.foutmelden a:hover  {	color:#0066CC; text-decoration: underline;}

/** end item links **/

/*** main structure ***/

#container{
	text-align:left;
	margin: 0 auto;
	padding: 
		env(safe-area-inset-top) 
		env(safe-area-inset-right) 
		env(safe-area-inset-bottom) 
		env(safe-area-inset-left);
	}

#content {
	margin:  auto; /* weg */
	text-align:left;
	max-width: 1200px; 
	min-width: 320px;
	padding: 10px;
} 

#top {
	float:left;
	width:100%;
	margin-bottom:10px;
}

/* left + right = 100% */     
#left {		float:left;	width: 75%;	}
#right {	float:left;	width: 25%;
			padding-left: 1%;		}

#bottomBar {
	float: left;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	height:100px;
}

#bottom {
	float:left;
	width: 100%;
	margin: 0;
	padding: 0;
	color:#FFF;
	text-transform: lowercase;
	font-size: 0.9375em;
	letter-spacing: 1px;
	text-align: center;
}

#top, #bottomBar {
	background: linear-gradient(-1deg, #2290C8, #1389C4, #0075BB 30px, #2290C8);
	background-color: #1b8cc6;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	height:100px;
	border-radius: 10px;
}

#pagination {
	
	font-size: 1em;
}

#block {
	display:none;
}

/*** logo style ***/		
#top h4 {
	font-size:2.50em;
	font-weight:bolder;
	color:#FFFFFF;
	padding: 10px 0 0 100px;
}

#top h6 {
	font-size:1.250em;
	font-weight:bold;
	color:#CCFF00;	
	padding: 0 0 0 100px;
}

#top img {
	float: left;
	padding-left:20px;
/*	padding-top:10px;
	height: 87px; /* 75 + 12 */
	margin-top:-3px;
	height: 105px; /* 75 + 12 */
}

#avnlogo {
	text-align: left;
}
/* end logo style */

/*** left content block ***/
/* leftTopper */

/*	updated and navigation and main */					
#updated {
	color:#FFFFFF;
	font-size: 0.8em;
	text-align: center;
}

#breadcrums {
	font-size: 0.8125em;
	color: #AAAAAA;
	padding-bottom: 5px;
}
#navigation {
	float:left;
	width:100%; /* updated + navigation = 100% */
}

#topNav {
	border-radius: 10px 10px 0px 0px;
	color: #FFFFFF;
	width: 100%;
	display: none;
}

.top-nav-collapse {
	background-color: #CCC;
}
.top-nav-expand {
	background-color: #A8E3AD;
}

.toggle-menu {
	border-radius: 5px;
	width: 100px;
	border: 1px solid #515151;
	margin: 5px;
	text-align:center;
	padding-top: 7px;
	padding-bottom: 7px;
	background-color: #999;
	cursor: pointer;
	font-size: 1em;
	color: #FFF;
	outline: none;
}

.toggle-menu-x {
	border-radius: 5px;
	width: 100px;
	border: 1px solid #515151;
	margin: 5px;
	text-align:center;
	padding-top: 7px;
	padding-bottom: 7px;
	background-color: #51c75b;
	cursor: pointer;
	font-size: 1em;
	color: #FFF;
	outline: none;
}

.toggle-fout {
	border: none;
	background-color: inherit;
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	color: #000;
	text-decoration: underline;
}

.toggle-fout:hover {
	color: #0066CC;
}

#topMenu {
	float:left;
}

#expandedMenu {
	background-color: #A8E3AD;
	border: 0px solid #ECECEC;
	padding: 6px;
	height:auto;
	font-weight: 700;
	font-size: 0.9375em;
	display: none;
	width:100%; /* updated + navigation = 100% */
}

#topMenu a {
  color: white;
  text-decoration: none;
}

#topMenuLink a.icon {
}

/* only desktop
@media screen and (min-width: 200px) {
	.toggle-menu:hover {
		background-color: #0066CC;
	}
}
*/ 

/* search moble */
.hidden {
	display: none;
}
.visible {
	display: block;
}

/** searchforms **/

#lSearch {
	float:right;
	width:200px;
	text-align:right;
	padding:5px;
}

form.r-zoeken input[type=text], form.l-zoeken input[type=text] {
	padding: 6px;
	font-size: 16px;
	border: 1px solid #999;
	float: left;
	width: 80%;
	background: #f1f1f1;
	border-radius: 10px 0px 0px 10px;
	color:#999999;
}

form.r-zoeken button, form.l-zoeken button {
	float: left;
	width: 20%;
	padding: 6px;
	background: #999999;
	color: #FFFFFF;
	font-size: 16px;
	border: 1px solid #999;
	border-left: none;
	cursor: pointer;
	border-radius: 0px 10px 10px 0px;
}

form.r-zoeken::after, form.l-zoeken::after {
	content: "";
	clear: both;
	display: table;
}

form.r-zoeken button:hover, form.l-zoeken button:hover {
	background: #0066CC; 
}	

form.r-zoeken input[type=text]:focus, form.l-zoeken input[type=text]:focus{
	color:#000000;
}

/* end searchforms */
/* forms */

form.contactForm, form.newsletterForm {
	font-size: 1em;
	
}
form.contactForm input[type=text], form.contactForm select, form.contactForm textarea, form.contactForm input[type=submit], form.newsletterForm input[type=text] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
}

form.newsletterForm input[type=text]:focus, form.newsletterForm select:focus, form.newsletterForm textarea:focus {
  border: 1px solid #000;
}

form.contactForm input[type=text]:focus, form.contactForm select:focus, form.contactForm textarea:focus {
  border: 1px solid #000;
}

form.contactForm input[type=submit] {
	background-color: #999;
	color: #FFF;
	cursor: pointer;
}

form.contactForm input[type=submit]:hover {
	background-color: #0066CC;
}

form.contactForm textarea {
	resize: vertical;
	font-family: 'Open Sans', sans-serif;
}

.inactivesubmit {
	width: 100%;
	margin-top: 5px;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1em;
	cursor: not-allowed;
	color: #CCC;
}

.activesubmit {
	width: 100%;
	margin-top: 5px;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1em;
	background-color: #0066CC;
	cursor: pointer;
	color: #FFF;
}


/* end forms */
/** main content block **/

#main {
	border-radius: 10px 10px 10px 10px;
	float: left;
	color: #000;
	background-color:#F3F3F3;
	width:100%;
	padding: 10px;
}

#main-extra {
	border-radius: 10px 10px 10px 10px;
	float: left;
	color: #000;
	background-color:#F3F3F3;
	width:100%;
}

#main h1 {
	font-size:1.125em;
	margin-bottom:5px;
}

#main h1.view-h1 {
	font-size:1.125em;
}	

#main h2 {
	font-size: 1em;	
}

#main-extra h2 {
	padding: 5px;	
}

/* -- item structure and style -- */
.item-start {
	background-color:#FFFFFF;
	border-radius: 10px;
	border: 1px solid #ECECEC;
	padding: 10px;
	margin-bottom:10px;
	height:auto;
	
	/* width:100%; */
}

.item-image {
	float: left;
	width: 128px;
	height: 128px;
	margin-right:10px;
	border: 1px solid #CCC;
	padding: 3px;
	background-color:#FFFFFF;
}

.item-image-extra {
	float: left;
	width: 88px;
	height: 88px;
	margin-right:10px;
	border: 1px solid #CCC;
	padding: 3px;
	background-color:#FFFFFF;
}

.item-content-top {
	/* background-color:#00CC99; */
	/*overflow:auto; */
}

.item-content {
	/* background-color:#00CC99; */
	/*overflow:auto; */
	min-height: 90px;
}

.item-title {
	font-weight:700;
	width:100%;
}

.item-title-top {
	font-weight:700;
	width:100%;
}

.link-color {
	color:#2b60cb;		

}

.item-title-sub {
	width:100%;
	font-size:0.8125em;
	color:#FF6600;
	font-weight: normal;

}		
.item-text {
	width:100%;
	font-size:0.9375em;
}
.item-text-extra {
	width:100%;
	font-size:0.9375em;
}

.item-text-top {
	width:100%;
	font-size:0.9375em;
}

.leesverder {
	font-size: smaller;
	font-style:italic;
	display: inline;
	color: darkgrey;
}

/* bekijk */
.view-item-title {
	font-weight:700;
	width:100%;
}
.view-item-title-sub {
	width:100%;
	font-size:0.8125em;
	color:#FF6600;
	font-weight: normal;

}		
.view-item-text {
	width:100%;
	font-size:0.9375em;
}

.view-item-image, .view-item-image-mobile {
	float: left;
	width: 158px;
	height: 158px;
	margin-right:10px;
	border: 1px solid #CCC;
	padding: 3px;
	background-color:#FFFFFF;
	display: block;
}

.view-item-image-mobile{
	display: none;
	width: 138px;
	height: 138px;
}

.item-reacties, .foutmelden {
	font-size: 0.9375em;
}

/* end bekijk */

.item-end {
	width:100%;
	background-color:#FFF;
	clear:both;
}

.img-thumbnail {
	width:100%;
	height:100%;

}
.img-overlay {
	/* only for IE 13.0+ */
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	opacity:0.7;
}	

.button_goto {
	float:right;
	width: 150px;
	margin: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top:5px;	
	border-radius: 5px;
	background-color:limegreen; /*66CCFF*/
	color:#FFFFFF;
	text-align:center;
	clear:none;
	display:block;
}	

.button_goto_green {
	float:left;
	width: 100%;
	margin: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top:5px;	
	border-radius: 5px;
	background-color:limegreen;
	color:#FFFFFF;
	text-align:center;
	clear:both;
}

.button_goto_deactivated_s {
	float:right;
	width: 150px;
	margin: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top:5px;	
	border-radius: 5px;
	background-color:#CCCCCC;
	color:#FFFFFF;
	text-align:center;
	clear:none;
	display:block;
}

.button_goto_deactivated {
	float:left;
	width: 100%;
	margin: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top:5px;	
	border-radius: 5px;
	background-color:#CCCCCC;
	color:#FFFFFF;
	text-align:center;
	clear:both;
}

.button_goto- {
	display: none;
}
.button_goto_h {
	display: none;
}
/*** right content block ***/

#rTopper {
	border-radius: 10px 10px 0px 0px;
	background-color:#A8E3AD;
	color: #FFF;
	width: 100%;
	float:left;
	text-align: center;
	padding-top:3px;
	font-size: 0.9375em;
	padding-bottom: 1px;
}

#rMenu {
	margin-top: -1px;
	float:left;
	width: 100%;
	padding: 6px;
	margin-bottom:10px;	
	background:#A8E3AD; /*f3f3f3*/
	border-radius: 0px 0px 10px 10px;
	
}

#rMenuContent {
	background-color: rgba(256,256,256,0.65);
	border-radius: 10px;
	border: 0px solid #ECECEC;
	padding: 5px;
	margin-bottom:10px;
	height:auto;
	font-weight: 700;
	font-size: 0.9375em;
}		

.r-content {
	border-radius: 10px;
	border: 0px solid #ECECEC;
	padding:6px;
	height:auto;
	background-color: rgba(256,256,256,0.2);
}

#delen {
	text-align: center;	
	margin-bottom: 12px;
}
.share {
	margin-top:5px;	
	margin-bottom: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 45px;
	padding-right: 45px;
	border-radius: 5px;
	color:#FFFFFF;
	text-align:center;
	font-size: 0.875em;
	overflow: hidden;
}

.share-1 {
	margin-right: 5px;
}
.share-2 {
	margin-left: 5px;
}

.share-fb {background-color: #BBB;}
.share-wa {background-color: #BBB;}
.share-fb1 {background-color: rgba(66,85,151);}
.share-wa1 {background-color: rgba(87,198,73);}
.share-tw {background-color: rgba(29,161,242);}
.share-fm {background-color: rgba(0,146,247);}
.share-em {background-color: rgba(132,132,132);}
.share-ea {background-color: rgba(87,87,87);}

.share-fb:hover {background-color: rgba(66,85,151);}
.share-wa:hover {background-color: rgba(87,198,73);}
.share-fb1:hover {background-color: #0066CC;}
.share-wa1:hover {background-color: #0066CC;}

#vsclear {
	clear: both;
}

/* color rightcontent */
#rSearch { background-color:#FFFFFF; }
#privacy { background-color:#FFFFFF; }
#nieuwsbrief { background-color:#FFFFFF; }
#socials { background-color:#FFFFFF; }
#top10 { background-color:#FFFFFF; }
/* end color rightcontent */


#rSearch, #privacy, #nieuwsbrief, #socials, #top10 {
	float:left;
	width: 100%;
	margin: 0;
	padding: 6px;
	margin-bottom:10px;	
	border-radius: 10px;
	color: rgba(256,256,256,0.9);
}

#rSearch {
	background:#CCCCCC;
}
#privacy {
	background:#A8E3AD;
}
#nieuwsbrief {
	background:#7FB9DC;
	text-align: center;
	font-size: 0.9375em; 
}
#socials {
	background:#9966FF;
	text-align: center;
	font-size: 0.9375em; 
}
#top10 {
	background:#FC3;
}

.main-item-image {
	width: 125px;
	height: 125px;
}

#copyright {
	color: rgba(256,256,256,0.5);
	text-align: center;
	font-size: 0.9375em;
}

.item-container-extra {
		height:88px; /*108*/
		display: table-cell;
		vertical-align: middle;
}

figure {
  padding: 4px;
}

figcaption {
  color: #aaaaaa;
  font-style: italic;
  text-align: center;
  font-size: smaller;
}


figure.image img {
    max-width: 100%;
	padding: 2px;
	border: 1px #cccccc solid;
}

.faqlist {
	padding-top: 5px;
	padding-left: 25px;
	padding-bottom: 10px;
}
/*** responsive magic ***/

/* between screen */
@media screen and (max-width: 950px) {

	#main h1 {
		font-size:1em;
	}
	.item-image {
		width: 128px;
		height: 128px;
	}
	.view-item-image {
		width: 158px;
		height: 158px;
	}	
	.item-container-extra {
		height:88px;
		display: table-cell;
		vertical-align: middle;
	}

}		

/* tablet */		
@media screen and (max-width: 768px) {

	#main h1 {
		font-size:0.9375em;
	}
	.item-image {
		width: 108px;
		height: 108px;
	}
}

/* smaller than tablet */
@media screen and (max-width: 767px) {

	.item-text {
		display:block;
	}
	.item-text-extra {
		display:block;
	}
	.button_goto {
		/* display: none; */
	}

	.item-container {
		/*height:85px; bij item text hidden */
		display: table-cell;
		vertical-align: middle;
	}	
	.button_goto {
		float:left;
		width: 100%;
		clear:both;
	}

	.button_goto_deactivated_s {
		float:left;
		width: 100%;
		clear:both;		
	}
	.item-image {
		width: 88px;
		height: 88px;
	}
}

/* between screen - column */
@media screen and (max-width: 700px) {
	#top {
		margin-bottom:6px;
	}
	#content {
		padding: 6px;
	}
	
	/* breaking point -> 1 column added */
	#top, #left, #right, #bottom, #bottomBar {
		width: 100%;
	}
	/* space between left and right */
	#right {
		padding-left: 0%;
		padding-top: 20px;
	}
	#content {
		padding-left: 0;
		padding-right:0;
	}
	#rTopper, #rMenu, #rSearch {
		display:none;
	}
	#topMenuLink, #topNav {
		display:block;
	}
	#main {
		border-radius: 0px 0px 10px 10px;
	}
	
	.share {
	margin-top:5px;	
	margin-bottom: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 5px;
	color:#FFFFFF;
	text-align:center;
	font-size: 0.875em;
	overflow: hidden;
	}
	
	#topMenuLink:hover {
	background-color: #999;
  	color: white;
	}
}

/* between screen */	
@media screen and (max-width: 465px) {

	/* logo adjusment */
	#top h4 {
		padding: 15px 0 0 85px;
		font-size:2.188em;
	}		
	#top h6 {
		font-size:1.125em;
		padding: 0 0 0 85px;
	}			
	#top img {
		padding-left:10px;
	}
	#main {
		padding: 5px;
	}
	.view-item-image{
		display: none;
	}
	.view-item-image-mobile{
		display: block;
	}
	.item-text-extra {
			display: none;
	}
	#main .view-item-title h1 {
		font-size:1em;
	}
	#main h1.view-h1 {
		font-size:1em;
	}
}

/* 375 iphone users */
@media screen and (max-width: 375px) {
	/* logo adjusment */
	#top h4 {
		padding: 10px 0 0 85px;
		font-size:2.188em;
	}		
	#top h6 {
		font-size:1.125em;
		padding: 0 0 0 85px;
	}			
	#top img {
		padding-left:10px;
	}
}

/* smallest screen mobile */
@media screen and (max-width: 360px) {

	/* logo adjusment */ 	
	#top h4 {
		font-size:2em;
		padding:13px 0 0 78px;
	}
	#top h6 {
		font-size:1em;
		padding: 0 0 0 78px;
	}
	#top img {
		padding-left:5px;
	}

	/* adjustments */
	#main h1 {
		font-size:0.875em;
	}
	
	.item-image {
		width: 78px;
		height: 78px;
	}
	.view-item-image {
		width: 148px;
		height: 148px;
	}

	#main {
		display:table;
	}
	
	.item-container {
		/*height:75px;* bij item text hidden */
		display: table-cell;
		vertical-align: middle;		
	}
}

/* almost smallest screen mobile */
@media screen and (max-width: 340px) {

	.share {
	float: left;
	width: 100%;
	height: auto;
	margin-top:5px;	
	margin-bottom: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 0px;
	padding-right: 0px;
	border-radius: 5px;
	color:#FFFFFF;
	text-align:center;
	font-size: 0.875em;
	overflow: hidden;
	}
	
	.share-1 {
	margin-right: 0px;
	}
	.share-2 {
	margin-left: 0px;
	}
}
/* smallest screen old mobiles */
@media screen and (max-width: 320px) {

}

/* biggest screen with additional adspace */
@media screen and (min-width: 1536px) {

	#block {
		position:fixed;
		left:50%;
		display:block;
		width:160px;
		margin-left:605px;
		margin-top:0px;
		height: 600px;
		background-color: orange;
		border-radius: 10px;
	}
}