/* 
 *	__________________________________________________
 *	
 *	Clientenbelang Amsterdam - #325ea9
 *	(c) Piipol 2017
 *	__________________________________________________
 */

/* ------------- CSS RESET*/

html, body, .clientenbelang * {
	margin: 0;
	padding: 0;
/*	border: 0;
	outline: 0;*/
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */    /* Firefox, other Gecko */
	box-sizing: border-box; 
    -webkit-transition: background 0.4s; 
    -o-transition: background 0.4s; 
    transition: background 0.4s;
    -webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased; /* makes white text render less bold */
	text-rendering: optimizeLegibility !important;
}

/* ------------- Accessibility styles */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  clear: both;
}

.hide, .skiplinks a{
	position: absolute;
	top: -500px;
}

.skiplinks a{
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skiplinks a:focus{
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	background-color: #999966;
	color: #ffffff;
	padding: 3px;
	margin: auto;
	z-index: 700;
}

#nav a:focus{
	background-color: #92b5ef;
	color: #000;
	text-decoration: underline;
	outline: 2px dotted #4c4c4c;
}


/* ------------- Overall styles */

body.clientenbelang {
	font-family: 'Signika', sans-serif;
	font-size: 17px;
	line-height: 1.5em;
	font-weight: 300;
	word-break: keep-all;
}

header.clientenbelang {
    position: fixed;
    width: 100%;
    right: 0px;
	min-height: 55px;
	float: none;
	margin: auto;
	background-color: #d1e2ff; /*light brown*/
    z-index: 600;
}

.clientenbelang a:focus{
	outline: 2px dotted #4c4c4c;
	background-color: #92b5ef;
	color: #000;
}


/* ------------- Grid */

.container {
	margin: auto;
	max-width: 1175px;
}

.headerwrap {
	position: relative;
    max-width: 1175px;
    margin: auto;
    min-height: 55px;
    float: none;
    text-align: right;
}
.headercontainer {
	position: absolute;
	clear: both;
	float: none;
    top: 15px; 
    right: 5px;
    min-width: 750px;
    min-height: 30px;
	word-spacing: 5px;
	margin-right: 0.5em;
}

#herocontainer {
    padding-top: 55px;
}
#navwrap {
	min-height: 110px;
	padding: 2em 0;
	clear: both;
}

#nav {
	position: relative;
	float: right;
	z-index: 500;
}

main {
	position: relative;
	border-bottom: 4em solid white;
}

/*.full main #content > p,
.full main #content > ul,
.full main #content > h1,
.full main #content > h2,
.full main #content > h3,
.full main #content > h4,
.full main #content > h5,
.full main #content > h6,
.full main #content > h6
 {
	width: 80%;
}*/

#content {
	clear: both;
	float: none;
}

#content.newspagecontent {
	display: inline-block;
	width: 75%;
	padding-right: 0.5em;
}
aside.newspagecontent {
	display: inline-block;
	width: 25%;
	max-width: 300px;
	padding: 0.5em;
	float: right;
	min-height: 100px;
	overflow: hidden;
}

aside.newspagecontent p > img {
	max-width: 100%;
	height: auto;
}

#sitemap {
	background-color: #d1e2ff;
	min-height: 400px;
	clear: both;
}

#foottext {
	min-height: 300px;
	background-color: #f7f3e6;
	clear: both;
	border-bottom: 1px solid #92b5ef;
	margin-bottom: 1em;
}
#foottext:after {
  content: " ";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.col-3 {
	width: 25%;
    min-height: 400px;
	float: left;
	padding: 5%;
	margin: 0 auto;
}
.col-4 {
	width: 33%;
	float: left;
	padding: 5%;
	margin: 0 auto;
}
.col-6 {
	width: 50%;
	float: left;
	padding: 4%;
	margin: 0 auto;
}

footer {
	border-top: 4px solid #325ea9;
	margin: auto;
	max-width: 1175px;
}

#col-cbfoot {
	float: left;
}
#col-anbi {
	float: right;
	width: 125px;
}

/* ------------- Texts */

.container {
	color: #000;
}

#footer {
	margin: auto;
	font-size: 1em;
}

#headercb .headerwrap.clearfix div > p {
	display: inline;
}

#headtitle {
	font-size: 1.1em; 
}
#headtitle h1, #headtitle h2, #headtitle p {
	font-size: 1.1em; 
	font-weight: 100;
	background-color: #d1e2ff;
	padding: 0.6em;
}

.clientenbelang hr { 
    display: block;
    margin: 0.7em 0;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 2px;
    border-color: #325ea9;
    clear: both;
} 

main #content h1 {
	margin: 0.5em 0 0.5em 0;
	clear: both;
	float: none;
	line-height: 1em;
	font-size: 1.6em;
}
main #content h2 {
	margin: 0.5em 0 0.5em 0;
	font-size: 1.4em;
}
main #content h3, main #content h4, main #content h5, main #content h6 {
	-webkit-margin-before: 0.5em;
	margin: 0;
}

main #content ul {
	margin-left: 1.5em;
}

.clientenbelang strong, .clientenbelang b {
	font-weight: 600;
}

.huisstijl {
	color: #325ea9;
}

#sitemap div > ul {
	margin-left: 0.5em;
}

#nieuwslink, #nieuwslink a {
	margin-top: 1.2em;
	text-align: right;
	float: right;
}

.naarboven {
	text-align: right;
	border-top: 3em solid transparent;
	float: none;
    clear: both;
}
#content div.naarboven a, #content div.naarboven a:visited {
	color: #325ea9;
}

footer h4 {
	font-weight: 600;
}

/* ------------- Links */

.clientenbelang main #content a, main div aside p a {
	font-weight: 400;
	color: #325ea9;
}

.clientenbelang main #content a:visited {
	/*color: #000;*/
}

.clientenbelang main #content a:hover, main div aside p a:hover {
	color: #000;
	text-decoration: underline;
	cursor: pointer;
}

.clientenbelang header.clientenbelang a, .clientenbelang footer a{
	color: #4c4c4c;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
}

header.clientenbelang .headercontainer a {
    white-space: pre-wrap;
    word-wrap: normal;
}
.clientenbelang footer h4 a{
	color: #000;
	font-weight: 600;
}

#headtitle a {
	text-decoration: none;
	color: #000;
}
#headtitle a:hover {
	text-decoration: underline;
	cursor: pointer;
}

.clientenbelang header.clientenbelang a:hover, .clientenbelang footer a:hover {
	text-decoration: underline;
	cursor: pointer;
}

/* ------- Home seemore links */
.seemore a {
	font-size: 1em;
	margin-top: 0.33em;
}

/* ------------- Content, scroll, video and foto image markup */

.headerscroll {
	border-bottom: 1px solid #92b5ef;
	-webkit-box-shadow: 0px 3px 0px #fff;
	box-shadow: 0px 3px 0px #fff;
}

div header.clientenbelang img {
    display: inline-block;
	max-height: 25px;
	vertical-align: middle;
}

.clientenbelang main #content p img {
  border: 1px solid #325ea9;
}
.no-border {
	border: 0px solid #fff !important;
}

/*correct header images if customer places the wrong block*/
.ccm-page.page-type-page.page-template-full > div > img {
	width: 100%;
}

/*Select Images with inline style*/
main #content p img[style*="float: left"] {
	margin: 1px 15px 15px 0px;
}

main #content p img[style*="float: right"] {
	margin: 1px 0px 15px 15px;
}

#logo {
	float: left;
}

footer img {
	max-width: 100%;
}
footer ul {
	list-style: none;
}
footer ul li:before {
	content: "\2022";
	margin-right: 0.5em;
}

.youtubeBlock {
	max-width: 700px;
}

main #content table {
    border-collapse: collapse;
}
main #content table, main #content th, main #content td {
    padding: 0.3em;
    border: 1px solid #325ea9;
}

/* ------------- Nav */
/* Main Menu */

#nav ul li {
	display: inline-block;
	padding: 0;
}

#nav ul li a {
	font-size: 1em;
	font-weight: 600;
	color: #030303;
	text-decoration: none;
	padding: 0px 0px;
	margin-right: 2em;
	padding-bottom: 0;
	cursor: pointer;
}

/* Sub Menu */
#nav.nav ul li ul {
	position: absolute;
	display: none;
	width: inherit;
	z-index: 501;
}

#nav.nav > div > ul > li:hover > ul, #nav.nav > div > ul > li:focus > ul {
	display: block;
	background-color: #92b5ef; /*darker brown*/
	border-top: 4px solid #325ea9;
	min-width: 150px;
}

/* Start removing of Sub-Sub-Menu */
#nav > div > ul > li > ul > li:hover > ul {
	display: none;
}
/* End removing of Sub-Sub-Menu */

#nav.nav ul li ul li {
	display: block !important;
	font-family: 'Open Sans', sans-serif;
	font-weight: lighter;
	font-size: 0.8em;
}
#nav.nav ul li ul li:hover {
	background-color: #d1e2ff
}

#nav > div > ul > li > ul > li > a {
	display: block;
	width: 100%;
	padding: 0.7em;
	border-bottom: 0px solid transparent;
	text-decoration: none;
    font-size: 0.9em;
	color: #fff;
	cursor: pointer;
}
#nav.nav ul li:hover ul li a:visited {
	text-decoration: none;
	cursor: pointer;
}

#nav > div > ul > li > ul > li:hover a{
	text-decoration: none;
	border-bottom: none;
	color: #030303 !important;
	cursor: pointer;
}
#nav > div > ul > li > ul > li:hover {
	text-decoration: none;
	border-bottom: none;
	color: #030303 !important;
}

/* Sub sub-menu*/

#nav div > ul > li > ul > li > ul > li > a, #nav  div > ul > li.nav-path-selected > ul > li.nav-selected.nav-path-selected > ul > li > a {
	display: none;
}

/* ------------- Homepage banner */

#homeimg {
	position: relative;
	max-height: 650px;
	min-height: 500px;
	background-color: beige;
	overflow: hidden;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
#homeimg img {
	width: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: 1% 1%;
	   object-position: 1% 1%;
}

/* Fullpage banner*/
#headimg {
	position: relative;
	min-height: 260px;
	background-color: #92b5ef; /*darker brown*/
	overflow: hidden;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
}

#moodquote {
	position: absolute;
	margin-top: -350px;
	z-index: 200;
	background-color: rgba(244,244,244,0.7);/* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, rgba(244,244,244,0.8) , rgba(244,244,244,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(244,244,244,0.8) , rgba(244,244,244,0)); /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(244,244,244,0.8)) , to(rgba(244,244,244,0)));
    background: -o-linear-gradient(left, rgba(244,244,244,0.8) , rgba(244,244,244,0));
    background: linear-gradient(to right, rgba(244,244,244,0.8) , rgba(244,244,244,0)); /* Standard syntax (must be last) */
	height: 100px;
	padding: 40px 4em 1em 2em;
}

#headquote {
	position: absolute;
	height: 165px;
	margin-top: -170px;
	z-index: 201;
	background-color: rgba(244,244,244,0.8);
	color: #262626;
	padding: 1.1em 1.3em 0.5em 1.3em;
	overflow: visible;
	font-size: 1.1em;
	font-weight: 400;
	line-height: 1.7em;
}

#headquote a {
	font-weight: 400;
	color: #325ea9;
	text-decoration: none;
}

#headquote a:hover {
	color: #000;
	text-decoration: underline;
	cursor: pointer;
}

#headquote a:focus{
	outline: 2px dotted #4c4c4c;
	background-color: #92b5ef;
	color: #000;
}

/* ------------- Dynamic Blocks*/

.support {
	padding: 1em 0.7em 1em 0.7em;
	width: 33%;
	float: left;
	margin-bottom: 2em;
	min-height: 410px;
	border: 1px solid #FFF;
}
/*styles in order to distribute supportcontent evenly*/
.support:nth-child(2) {
    padding-left: 0.6em;
    padding-right: 0.6em;
}

.supporthead {
	margin: auto;
	margin-bottom: 1em;
	min-height: 90px;
}
.support .supporthead h3 {
	display: inline;
	font-size: 2em;
	margin: auto;
}
#content div div div.supporthead h3 a {
	color: #000;
	font-weight: 900;
}

.support p {
	clear: both;
	min-height: 150px;
}

/* Styles for dynamic supportbutton*/
.supportknop {
	position: relative;
	width: 320px;
	height: 85px;
	background-image: url('../images/knoppen/afgeronderechthoek.png');
    background-repeat: no-repeat;
    background-position: bottom left;
    z-index: 70;
}
.supportknop .handicon {
	position: absolute;
	top: 18px;
	left: -1px;
	height: 80px;
	width: 80px;
	float: left;
	/*background-size: cover;*/
    background-repeat:no-repeat;
    background-position:center center;
	border: 2px solid #325ea9;
    border-radius: 50%;
    z-index: 120;
}
.supportknop .action h4, #content .supportknop .action h4 a, .supportknop .action h4 a:visited {
	color: #fff;
}
.supportknop .action h4 {
	position: absolute;
	top: 45px;
	right: 0.7em;
	font-size: 1.7em;
	margin: 0;
	right: 1.1em;
	z-index: 110;
    text-align: right;
}

.split {
	background-color: #d1e2ff;
	border-bottom: 4px solid #325ea9;
	min-height: 350px;
	margin: 0.6em 0 2em 0;
	clear: both;
	float: none;
}

.splitleft, .splitright {
	position: relative;
	width: 50%;
	float: left;
	background-color: transparent;
	z-index: 150;
}
.splitimg {
	background-color: transparent;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 350px;
    z-index: 90;
}
.splittxt {
	background-color: transparent;
    min-height: 350px;
	padding: 5%;
}
.splitlinks {
	position: absolute;
	left: 5%;
	bottom: 15px;
	float: none;
}
#content .split .splitlinks a, #content .split .splitlinks a:visited {
	color: #325ea9;
}

/* News pagelist Thumbnail and Thumbwide */

.home div.ccm-block-page-list-wrapper, .full div.ccm-block-page-list-wrapper {
    position: relative;
    display: inline-block;
    width: 33%;
    margin: auto;
    padding: 0 1%;
    background-color: #fff;
    display: inline-block;
    vertical-align: top;
}

/*.home article .newsitem, 
.full article .newsitem,*/
.ccm-wide-pagelist-no-pages article.newsitem {
	width: 33%;
	margin: 0 0.5em;
}

.home article .newswideitem, 
.full article .newswideitem {
/*    min-height: 350px;*/
    width: 33%;
    margin: 0 0 1.1em 0;
    padding: 0 0.5%;
    display: inline-block;
    vertical-align: top;
}

main #content .newsheader h2 {
	margin: 1em 0 0.1em 0;
}
main #content .newsheader h2 a {
    font-weight: bold;
    color: #000;
    text-decoration: none;
}

article .newsimg {
	height: 185px;
	width: 100%;
	background-repeat: no-repeat;
    background-size: cover;
    min-height: 165px;
	border-bottom: 4px solid #325ea9;
	margin: 1em 0 0.8em 0;
	overflow: hidden;
}

/* view PHP helper styles*/
div.ccmwide-page-list-page-entry-horizontal div.ccmwide-page-list-page-entry-thumbnail,
div.ccm-block-page-list-page-entry-horizontal div.ccm-block-page-list-page-entry-thumbnail {
    display: block;
}

/* styles for wide empty pagelist */
.ccmwide-page-list-wrapper .ccmwide-page-list-no-pages {
	width: 33%;
}
@media screen and (max-width: 820px) {
.ccmwide-page-list-wrapper .ccmwide-page-list-no-pages {
    width: 50% !important;
} }
@media screen and (max-width: 480px) {
.ccmwide-page-list-wrapper .ccmwide-page-list-no-pages {
    width: 100% !important;
} }
/* end styles for wide empty pagelist */

/* Custom Paginablokje */
.paginablock {
	margin-bottom: 2em;
}
.paginablock article {
	margin-bottom: 2em;
}
#content div.paginablock article.cbnews div.newsitem div div.newscontent h3 > a
 {
	color: #000;
}
.paginablock article div.ccm-block-page-list-page-entry-thumbnail.newsimg > a > img,
.paginablock article div.ccm-block-page-list-page-entry-thumbnail.newsimg img {
	max-height: 400px;
}
/* end Custom Paginablokje */

#content .cbnews article .news-list-title h3 a {
	color: #000;
}
#content article .newsimg  h3 {
	padding: 0.6em 0 0 0.4em;
	font-size: 2em;
}
.newscontent {
	padding-right: 1em;
}

#content .ganaar {
	margin: 1em 0;
}
#content .ganaar p a:link, #content .ganaar p a:visited,
main > div > aside > div.kolom-3 > div > p > a,
main > div > aside > div.kolom-3 > div > p > a:visited,
.rodeknop {
	background-color: #325ea9;
	text-decoration: none;
	color: #fff;
	border-radius: 20px;
	padding: 0.8em;
	margin-left: -0.2em;
    display: inline-block;
    min-width: 280px;
    max-width: 100%;
}
main > div > aside > div.kolom-3 > div > p > a:hover,
#content .ganaar p a:hover {
	text-decoration: underline;
}

#content div.huisstijl.seemore p a {
	color: #325ea9;
	margin-left: 0;
}

.seemorelink, .seemorelink a {
	color: #325ea9;
	margin-left: 0;
	font-size: 1em;
	margin-top: 0.33em;
}
.seemorelink:after {
	content: "  \00BB";
}

#content .kolom-3 {
	width: 33%;
	margin: 0 0 2em 0;
	display: inline-block;
    vertical-align: top;
}
#content .kolom-3 p a:last-child:after {
	content: "  \00BB";
}

/* Featured Aanbevolen Uitgelicht pagelist */
.cbfeatured {
	clear: both;
	float: none;
	margin: 0.6em 0 2em 0;
}
.cbfeatitem {
	width: 25%;
	float: left;
	margin: 0 auto;
	text-align: center;
}
.featwrap {
	max-width: 225px;
	margin: 0 auto;
	margin-bottom: 1em;
    -webkit-box-shadow: 0 0 0 3px hsl(0, 0%, 100%);
            box-shadow: 0 0 0 3px hsl(0, 0%, 100%);
}
.featborder {
	border: 3px solid #325ea9;
	padding: 3px;
	width: 218px;
	margin: 0 auto 1em auto;
	background-color: white;
}

article .cbfeatimg {
	height: 200px;
	width: 200px;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
	margin: 3px;
	overflow: hidden;
}
article .cbfeatimg img {
	max-height: 200px;
	width: 100%;
}
#content .cbfeatured article .feat-list-title a {
	color: #000;
	text-transform: uppercase;
	font-size: 110%;
}

/* Override pagelist heights*/
.no-height {
	min-height: 0 !important;
	height: 0 !important;
}

/* Quote Block */

.quoteblock {
	position: relative;
	clear: both;
	float: none;
	min-height: 250px;
	border-top: 2px solid #325ea9;
	border-bottom: 2px solid #325ea9;
	padding: 0 0 2em 0;
	margin: 1em 0;
	background-image: url('../images/fotos/back-sidebar-people.jpg');
    background-repeat:no-repeat;
    background-position:right bottom;
}

.quoteimgwrap {
	float: left;
	max-width: 25%;
	margin: 30px 0;
}

.quoteimg {
	height: 200px;
	width: 200px;
	float: left;
	background-size: cover;
    background-repeat:no-repeat;
    background-position:center center;
	border: 2px solid #325ea9;
    border-radius: 50%;
    margin: auto 0;
}

.quotecontent {
	margin-top: 30px;
	min-height: 50px;
	float: right;
	max-width: 70%;
}
.quoteline {
	position: absolute;
	right: 5px;
	bottom: 15px;
	font-weight: 600;
}

/* Medewerkers Team pagelist */
.cbteam {
	clear: both;
	float: none;
	margin: 0.6em 0 2em 0;
}
.cbteamitem {
	width: 20%;
	float: left;
	margin: 0 auto;
	text-align: center;
}
.teamwrap {
	margin: 0 auto;
	margin-bottom: 1em;
    -webkit-box-shadow: 0 0 0 3px hsl(0, 0%, 100%);
            box-shadow: 0 0 0 3px hsl(0, 0%, 100%);
}
article .cbteamimg {
	height: 155px;
	max-width: 230px;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
	margin: 1em 0.5em 0.8em 0.5em;
	overflow: hidden;
}

#content .cbteam article .team-list-title a {
	color: #000;
}

/* ------------- Funcnav BrowseAloud */

header .headercontainer a.funclees{ background: url(../images/browsealoud/icon_leesvoor.png) top left no-repeat; }

header .headercontainer a.funclees{
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
}
header .headercontainer a.funclees.ir > span {
	max-width: 1.5em;
	overflow: hidden;
}

/* ------------- Searchbox */

header #search, header.clientenbelang .ccm-search-block-form {
	display: inline-block;
	border: 0;
	margin-right: 0.5em;
}

header.clientenbelang #search .ccm-search-block-form input{
    display: inline-block;
    vertical-align: middle;
	border: 1px solid #a6a6a6;
	border-radius: 4px;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	margin-top: 0;
}

header.clientenbelang #search input.ccm-search-block-submit{
    display: inline-block;
	color: #404040;
	background: #ffffff;
	border: 1px solid #a6a6a6;
	border-radius: 4px;
	background: url(../images/icon_zoek.png) top left no-repeat;
    width: 25px;
	min-height: 25px;
	vertical-align: middle;
	cursor: pointer;
	color: transparent;
}

/* ------------- Formstyles in content */

.clientenbelang #content .ccm-block-express-form {
	clear: both;
	float: none;
	font-family: 'Signika', sans-serif;
}

.clientenbelang #content .ccm-block-express-form form .ccm-express-form fieldset {
	border-width: 0;
    border-style: none;
    border-color: transparent;
    position: relative;
}

.clientenbelang #content .ccm-form form fieldset .form-group {
	max-width: 47%;
}

.clientenbelang #content .ccm-form form fieldset .form-group input[type="text"] {
	padding: 0.5em;
	min-width: 95%;
    border: 1px solid #325ea9;
    font-family: 'Signika', sans-serif;
    font-weight: 300;
    font-size: 100%;
    margin: 0.5em;
}

.clientenbelang #content .ccm-form form fieldset .form-group textarea {
	padding: 0.5em;
	min-width: 95%;
    min-height: 200px;
    border: 1px solid #325ea9;
    font-family: 'Signika', sans-serif;
    font-weight: 300;
    font-size: 100%;
    margin: 0.5em;
}

.clientenbelang #content .ccm-form form fieldset .form-group input[type="email"] {
	padding: 0.5em;
	width: 95%;
    border: 1px solid #325ea9;
    font-family: 'Signika', sans-serif;
    font-weight: 300;
    font-size: 100%;
    margin: 0.5em;
}

.clientenbelang main .form-actions button {
    border: 2px solid #325ea9;
    font-size: 1.1em;
    margin: 0.5em;
    padding: 0.5em;
    color: #fff;
    background-color: #325ea9;
    border-radius: 15px;
    min-width: 200px;
}
.clientenbelang main .form-actions button:hover {
    color: #325ea9;
    background-color: #fff;
}

/* ------------- Reaction/Conversation Formstyles in content */

.ccm-conversation-add-reply > form > div input,
.ccm-conversation-add-reply > form textarea,
.ccm-conversation-add-reply > form > div input:not([type]),
.ccm-conversation-add-reply > form > div input[type="email" i],
.ccm-conversation-add-reply > form > div input[type="tel" i],
.ccm-conversation-add-reply > form > div input[type="url" i],
.ccm-conversation-add-reply > form > div input[type="text" i] {
	padding: 0.5em;
    min-width: 40%;
    border: 1px solid #325ea9;
    font-family: sans-serif;
    font-size: 110%;
    margin: 0.5em;
}

#content div.ccm-conversation-wrapper .ccm-conversation-add-reply form label {
	display: inline-block;
	min-width: 150px !important;
}

#content > div.ccm-conversation-wrapper > div.ccm-conversation-message-list.ccm-conversation-messages-threaded > div.ccm-conversation-messages div.ccm-conversation-add-reply > form > div > div,
#content > div.ccm-conversation-wrapper > div.ccm-conversation-message-list.ccm-conversation-messages-threaded > div.ccm-conversation-messages div.ccm-conversation-add-reply > form > div > div> img {
    width: 250px;
    float: left;
    margin: 0.5em 1em 1em 1em;
}

/* ------------- Formstyles in Contact page */
/* ------------- Contactpage form has unique custom ID */

#cb-contact{}

#cb-contact > div.ccm-block-express-form {
	margin-bottom: 3em;
}
#cb-contact > div.ccm-block-express-form .ccm-form {
	position: relative;
}
#cb-contact > .ccm-form form fieldset .form-group input[type="email"] {
	width: 60%;
}
/* E-mail positioning */


/* Bericht textarea */
#cb-contact .ccm-form form.form-stacked .ccm-express-form fieldset.ccm-express-form-field-set .form-group textarea.form-control {
	position: absolute;
	margin-top: 3em;
	right: 0;
	top: -17px;
	min-width: 50%;
	min-height: 200px;
}

#cb-contact .ccm-form form.form-stacked .ccm-express-form fieldset.ccm-express-form-field-set .form-group .control-label .text-muted:after {
	content: ' *';
	color: #92b5ef;
}

#cb-contact > div.ccm-block-express-form > div > form > div.ccm-express-form > fieldset > div > label {
	position: initial;
    margin-left: 1em;
    margin-top: 1em;
    font-size: 1.05em;
}

/* Custom form Checkbox */
#cb-contact > div.ccm-block-express-form input[type="radio"], 
#cb-contact > div.ccm-block-express-form input[type="checkbox"] {
	width: 20px;
    height: 20px;
    background: #325ea9;
    margin: 5px 1.5em;
    border-radius: 100%;
    position: relative;
    -webkit-box-shadow: 0px 1px 3px rgba(255,0,0,0.5);
    box-shadow: 0px 1px 3px rgba(255,0,0,0.5);
}
#cb-contact > div.ccm-block-express-form input[type="radio"] label, 
#cb-contact > div.ccm-block-express-form input[type="checkbox"] label {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 100px;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;
	background: #333;
	-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
	        box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
#cb-contact > div.ccm-block-express-form input[type="radio"]:checked + label, 
#cb-contact > div.ccm-block-express-form input[type="checkbox"]:checked + label {
	background: #325ea9;
}

/* Bericht Label */
#cb-contact > div.ccm-block-express-form > div > form > div.ccm-express-form > fieldset > div:last-child > label {
	position: absolute;
    top: -17px;
    right: 5px;
    z-index: 555;
    background-color: rgba(255, 255, 255, 0.6);
}

/* Versturen Contact Form button*/
#cb-contact > div.ccm-block-express-form .ccm-form .form-actions {
	position: absolute;
	margin-top: 1em;
	right: 2%;
    z-index: 555;
}

/* Placeholders instead of labels */
#cb-contact .ccm-form form.form-stacked .ccm-express-form fieldset.ccm-express-form-field-set .form-group ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #92b5ef;
}
#cb-contact .ccm-form form.form-stacked .ccm-express-form fieldset.ccm-express-form-field-set .form-group ::-moz-placeholder { /* Firefox 19+ */
  color: #92b5ef;
}
#cb-contact .ccm-form form.form-stacked .ccm-express-form fieldset.ccm-express-form-field-set .form-group :-ms-input-placeholder { /* IE 10+ */
  color: #92b5ef;
}
#cb-contact .ccm-form form.form-stacked .ccm-express-form fieldset.ccm-express-form-field-set .form-group :-moz-placeholder { /* Firefox 18- */
  color: #92b5ef;
}

/* ------------- Formstyles in Mailchimp block */

form.mailchimpform {}
.form-master-group h3 {}
.form-master-group h2 {}
.form-group-email, .form-master-group-firstname, .form-master-group-lastname, .form-group-subscribe {
}
form.mailchimpform .control-label {
	display: inline-block;
	min-width: 100px;
}
form.mailchimpform input {
padding: 0.5em;
	min-width: 40%;
	border: 1px solid #325ea9;
	font-family: 'Signika', sans-serif;
	font-size: 110%;
	color: #666;
	margin: 0.5em;
}

/* ------------- Breadcrumbs */

div#headcrumbs ul.nav {
	font-weight: 500;
	color: #fff;
	background-color: #325ea9;
	padding: 0.3em 0.6em 0.2em 0.6em;
	margin-bottom: 1em;
	list-style-type: none;
	display: block;
}

#headcrumbs ul li a { 
	color: #fff;
	text-decoration: none;
}
#headcrumbs ul li a:hover { 
	color: #fff;
	text-decoration: underline;
	cursor: pointer;
}

#headcrumbs ul.nav li, 
#headcrumbs ul.nav li ul, 
#headcrumbs ul.nav li ul li, 
#headcrumbs ul.nav li ul li ul,
#headcrumbs ul.nav li ul li ul li,
#headcrumbs ul.nav li ul li ul li ul,
#headcrumbs ul.nav li ul li ul li ul li
/*li.nav-path-selected*/ {
	display: inline !important;
	margin-left: 0.5em;
}
#headcrumbs ul.nav li:not(:last-child):after{
	font-weight: 900;
	/*content: " \00BB"; HEX code for right double angle quote*/
	content: " \203A"; /*HEX code for right angle bracket*/
	margin-left: 0.5em;
}

/* ------------- Content page */

blockquote{
	font-family: 'Reenie Beanie', cursive;
	font-size: 2em;
	word-spacing: 0.6em;
	line-height: 1.1em;
	padding: 0px 25px;
	margin-top: 0.1em;
	color: #999;
}

/* ------------- Search page Searschresults */

#content #searchResults .searchResult p > span, #searchResults .searchResult p > a span {
    background-color: #ffd966 !important;
}

main input[type="submit"].ccm-search-block-submit {
    border-width: 2px;
    background: #fff;
    border-style: solid;
    border-color: #325ea9;
    font-size: 1.2em;
    margin: 0.5em 0.5em 0.5em 0;
    padding: 0.5em;
    border-radius: 1.2em;
    min-width: 180px;
}
main .ccm-search-block-form {
    margin-bottom: 3em;
}
main .ccm-search-block-form .ccm-search-block-text {
	font-size: 1em;
	padding: 1em;
    min-width: 50%;
}

/* ------------- Agenda */

/* ------------- Pollresults */
#content div.poll form div.radio {
    font-size: 1.1em;
    margin: 0.75em 0.75em 0.75em 0;
    padding: 0.3em;
    max-width: 300px;
    height: 40px;
    background-color: white;
    border-radius: 6px;
    border: 2px solid #92b5ef;
}
#content .poll form div label {
	font-size: 1em;
    margin: 0.75em 0.75em 0.75em 0;
    padding: 0.75em;
    min-width: 200px;
	height: 40px;
}
#content .poll form div label input[type="radio"] {
    margin-right: 2em;
}

/* ------------- Default buttons styles */
#contraster {
	vertical-align: middle;
	border: 0;
	cursor: pointer;
	background: url(../images/browsealoud/contrast_2x.png) top left no-repeat;
	width: 24px;
	height: 24px;
}
#contraster:hover, #contraster:focus {
	background: url(../images/browsealoud/contrast_dp.png) top left no-repeat;
}

#small.verklein {
	vertical-align: middle;
	border: 0;
	cursor: pointer;
	background: url(../images/browsealoud/font_normal_2x.png) center center no-repeat;
	width: 24px;
	height: 24px;
}
#large.vergroot {
	vertical-align: middle;
	border: 0;
	cursor: pointer;
	background: url(../images/browsealoud/font_big_2x.png) center center no-repeat;
	width: 24px;
	height: 24px;
}

.clientenbelang main button {
	border: 2px solid #325ea9;
    font-size: 1.1em;
    margin: 0.5em 0;
    padding: 0.5em;
    color: #fff;
    background-color: #325ea9;
    border-radius: 15px;
    min-width: 200px;
}

.clientenbelang main input[type="submit"] {
	border: 2px solid #325ea9;
    font-size: 1.1em;
    margin: 0.5em 0;
    padding: 0.5em;
    color: #fff;
    background-color: #325ea9;
    border-radius: 15px;
    min-width: 200px;
}

.clientenbelang main button:hover, 
.clientenbelang main input[type="submit"]:hover {
    color: #303030;
    background-color: #fff;
    cursor: pointer;
}

/* ------------- FAQ accordeon */

/* -------------------------- */
/* mobile-last responsive media queries */
/* -------------------------- */

/* Laptops (desktops, 1220px and up) */
@media screen and (max-width: 1220px) {
main #content, #navwrap {
    padding-left: 1em;
    padding-right: 1em;
    }
}

/* Container breakpoint (breakpoint where max-width becomes 100%) */
@media screen and (max-width: 1175px) {
header.clientenbelang { 
	padding-right: 1em;
}
.supportknop {
	width: 280px;
}
.supportknop .action h4 {
	font-size: 1.4em;
}
}

/* iPad Pro and PC */
@media screen and (max-width: 1024px) {
#col-cbfoot, #col-anbi {
	float: none;
	clear: both;
}
#col-anbi {
	margin-top: 2em;
}
.supportknop {
	width: 30vw;
}
}

/* Medium devices (desktops, 820px and up) */
@media screen and (max-width: 820px) {
header.clientenbelang { 
	min-height: 90px;
}
.headercontainer { 
	min-width: 410px;
	max-width: 800px;
	margin: auto;
	right: 50px;
	line-height: 1.9em;
}
#herocontainer {
    padding-top: 110px;
}
#homeimg {
	position: relative;
	max-height: 1000px;
	}
#moodquote {
	display: none;
}
.supportknop {
	width: 320px;
}
.col-4, .support, .cbfeatitem, .cbteamitem {
    font-size: 1.1em;
    width: 50% !important;
    }
.col-3 {
    font-size: 1.1em;
    width: 50% !important;
    min-height: 770px;
	padding: 3em;
    }
.full .newsitem {
    font-size: 1.1em;
    }
.home .cbnews {
	width: 100% !important;
}
.quoteimgwrap {
	float: left;
	max-width: 15%;
	margin: 50px 0;
}
.quoteimg {
	max-width: 150px;
	max-height: 150px;
}
.quotecontent {
	margin-top: 1em;
	max-width: 65%;
}
#content .kolom-3 {
    display: block;
    width: 100%;
    margin: 0 0 1em 0;
}

.home div.ccm-block-page-list-wrapper, .full div.ccm-block-page-list-wrapper {
    width: 49%;
    margin: 0 auto 0.1em auto;
    padding: 0 1%;
    display: inline-block;
    vertical-align: top;
}
.home article .newswideitem, 
.full article .newswideitem {
    /*min-height: 350px;*/
    width: 50%;
    float: left;
    margin: 0 0 2em 0;
    padding: 0 0.5%;
}
}

/* MEDIUM small devices (600px and up) */
@media screen and (max-width: 600px) { 
header.clientenbelang {
    position: initial;
}
#linkedin {
	margin-right: 0.5em;
}
#headquote {
	position: relative;
	height: initial;
	margin-top: initial;
	}
#herocontainer {
    padding-top: 25px;
}
.support:nth-child(2) {
    padding-left: 0;
    padding-right: 0;
}
.support {
    width: 100% !important;
    padding: 1em 0.7em 0.1em 0.7em;
    float: none;
    clear: both;
    margin-bottom: 0.1em;
    min-height: 370px;
}
.support p {
    clear: both;
    min-height: 80px;
}
.supportknop {
	width: 320px !important;
}
.supportknop .action h4 {
	font-size: 1.4em;
	right: 2em;
}
.handicon {
    display: none
}

/*Custom #cb-contact form*/
#cb-contact > .ccm-form form fieldset .form-group input[type="text"] {
	position: initial;
	display: block;
	min-width: 95%;
	width: 95%;
	margin: 10px auto;
}
.clientenbelang #content .ccm-form form fieldset .form-group textarea, #cb-contact textarea, #cb-contact .ccm-form form.form-stacked .ccm-express-form fieldset.ccm-express-form-field-set .form-group textarea.form-control, 
.clientenbelang #content .ccm-form form fieldset .form-group input[type="email"] {
	position: initial;
	display: block;
	margin-top: 3em;
	min-width: 95%;
	width: 95%;
}
.clientenbelang #content .ccm-form form fieldset .form-group textarea, #cb-contact textarea, #cb-contact .ccm-form form.form-stacked .ccm-express-form fieldset.ccm-express-form-field-set .form-group textarea.form-control {
	margin-top: 0.6em;
}
#cb-contact > div.ccm-block-express-form .ccm-form .form-actions {
	position: initial;
}

div.ccm-express-form fieldset.ccm-express-form-field-set select.form-control {
	margin-left: 2em;
}

#cb-contact > div.ccm-block-express-form > div > form > div.ccm-express-form > fieldset > div > label {
	position: initial !important;
}
/*end unique #cb-contact form styles*/

#content .kolom-3 {
	width: 100%;
}
#content .ganaar p a:link,
main > div > aside > div.kolom-3 > div > p > a,
main > div > aside > div.kolom-3 > div > p > a:visited {
    padding: 0.3em;
}
.clientenbelang #content .ccm-form form fieldset .form-group {
	max-width: 99%;
}
#content > div.ccm-block-express-form > div > form > div.ccm-express-form > fieldset > div > label {
	display: block;
}

/*Versturen button*/
#content > div.ccm-block-express-form .ccm-form .form-actions {
	position: initial;
}
}

/* EXTRA small devices (phones, 480px and up) */
@media screen and (max-width: 480px) { 
	header.clientenbelang { 
	min-height: 160px;
	line-height: 2em;
}
.headercontainer { 
	min-width: 200px;
	max-width: 300px;
    margin: auto;
    right: 10px;
}
#herocontainer {
    padding-top: 55px;
}
div, .col-3, .col-4, .cbnews, .full .newsitem, .support, .splittxt {
    font-size: 1em;
    width: 100% !important;
    float: none;
    clear: both;
    word-wrap: break-word;
}
.splittxt {
    min-height: 400px;
}
.splitlinks {
	position: relative;
}
article .cbfeatitem {
	float: left;
	clear: none;
}
.col-3 {
	min-height: 300px;
}
.col-6 {
    font-size: 1em;
    width: 50%;
}
.support {
	min-height: 200px;
	padding: 1em 0 0.6em 0;
}
.supportcontent {
	min-height: 200px;
}
.supporthead {
	min-height: 40px;
}
#content .ganaar p a:link,
main > div > aside > div.kolom-3 > div > p > a,
main > div > aside > div.kolom-3 > div > p > a:visited {
    padding: 0.8em;
}
.split, .splitleft, .splitright {
	clear: both;
	float: none;
}
div.split div.splitimg {
/*    visibility: hidden;
    height: 1em;*/
}
.quotecontent {
	margin-top: 1em;
	max-width: 100%;
	width: 100%
}
.quoteimgwrap, .quoteline {
	display: none;
}
.newspagecontent, aside.newspagecontent {
	display: block;
	clear: both;
	float: none;
	width: 100% !important;
}
/*mobile menu*/
#navwrap {
	padding: 0 0.3em;
}
#nav ul li {
	width: 100%;
	padding: 0.5em;
    font-size: 1.1em;
    border-bottom: 1px solid #d1e2ff;
}
#nav ul li a, #nav > div > ul > li > ul > li > a {
	font-size: 1.2em;
	margin-right: 0;
}
/*make submenu scrollable*/
#nav.nav ul li ul {
	position: initial;
}
#nav ul li ul {
	margin-left: 0.5em;
}
#nav ul li ul li {
	padding: 0;
	margin: 0;
}
/*Uitgelicht*/
article .cbfeatimg, article .cbfeatimg img {
	height: 170px;
}
}

/* EXTRA tiny devices (beepers) */
@media screen and (max-width: 320px) { 
.supportknop {
    width: 268px !important;
}
.featborder {
	max-height: 150px;
	overflow: hidden;
}
.featwrap {
    max-width: 140px;
}
.cbteamitem {
	width: 100% !important;
}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                -webkit-min-device-pixel-ratio: 2),
only screen and (                -o-min-device-pixel-ratio: 2/1),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  /* Future proof Retina-specific styles here */

}

/* -------------------------- */
/* end mobile media queries */
/* -------------------------- */

/* ------------- Very last final override styles */

/*toggle font-size*/
.container.big{
    font-size:24px !important;
}

.bg-body, #headercb.bg-body, #homeimg.bg-body, #sitemap.bg-body, #foottext.bg-body, 
#headquote.bg-body {
	/*class for contrast toggler switch*/
	background-color: #282C34;
	color: #c5cad3;
	border-color: #464A54;
	-webkit-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

#nav > div > ul > li > ul.bg-body > li.bg-body > a:hover {
	background-color: #d1e2ff;
}
ul li ul li.bg-body > a.bg-body:hover {
	background-color: #d1e2ff;
}

.bg-body a, .bg-body ul li a span {
	/*class for contrast toggler switch*/
	color: #d1e2ff !important;
}

.container.bg-body {
	/*class for contrast toggler switch*/
	-webkit-box-shadow: 0px 0px 4px #464A54;
	        box-shadow: 0px 0px 4px #464A54;
}

#moodquote.bg-body {
	background-color: #282C34;
	background: -webkit-linear-gradient(left, rgba(40, 44, 52, 0.6), rgba(40, 44, 52, 0.6));
	background: -o-linear-gradient(left, rgba(40, 44, 52, 0.6), rgba(40, 44, 52, 0.6));
	background: -webkit-gradient(linear, left top, right top, from(rgba(40, 44, 52, 0.6)), to(rgba(40, 44, 52, 0.6)));
	background: linear-gradient(to right, rgba(40, 44, 52, 0.6), rgba(40, 44, 52, 0.6)); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */ /* Standard syntax (must be last) */
}
#moodquote.bg-body h2.bg-body {
	background-color: rgba(40, 44, 52, 0.6);
}

.headerscroll.bg-body {
	border-bottom: 0px transparent #000;
	-webkit-box-shadow: 0px 0px 0px #000;
	box-shadow: 0px 0px 0px #000;
}

.home div.ccm-block-page-list-wrapper.bg-body, .full div.ccm-block-page-list-wrapper.bg-body {
	background-color: #282C34;
}
/*Concrete5 override styles*/
#content > p img {
	max-width: 100%;
}
.clientenbelang .pagination>.active>span {
	background-color: #92b5ef;
    border-color: #325ea9;
}
main #content #ccm-block-share-this-page {
	width: 50%;
}
div.ccm-conversation-message div.ccm-conversation-message-byline span.ccm-conversation-message-username {
    color: #412e24 !important; /*darkest brown*/
}
.text-muted {
	color: #92b5ef !important;
}
#content > form > div.ccm-pagination-wrapper > ul {
	list-style-type: none;
}
#content > form > div.ccm-pagination-wrapper > ul > li {
	display: inline-block !important;
	margin: 5px;
}
/*Concrete5 Extra Layout Columns */
@media screen and (max-width: 820px) { 
.ccm-layout-column-wrapper div.ccm-layout-column {
    width: 50% !important;
}
.ccm-layout-column-wrapper div.ccm-layout-column img {
    max-width: 100%;
}
}
@media screen and (max-width: 480px) { 
.ccm-layout-column-wrapper div.ccm-layout-column {
    width: 100% !important;
}
.ccm-layout-column-wrapper div.ccm-layout-column img {
    max-width: initial;
}
}