* {
box-sizing: border-box;
margin: 0;
}
html {
overflow-x: hidden;
}
body {
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
a {
text-decoration: none;
}
img {
image-orientation: from-image;
}
/* ===== SITE ===== */
.site {
position: relative;
bottom: 100%;
left: 0;
top: 0;
height: 100%;
min-height: 100vh;
min-width: 100%;
z-index: 1;
}
.site-uitklap {
box-shadow: 0 0 5px 3px rgba(0,0,0,0.4);
transition: left 0.25s ease-in;
}
.body-disabled,
.body-uitklap {
overflow: hidden !important;
position: fixed;
}
.body-disabled {
width: 100%;
height: 100%;
}
.site-content {
margin: auto;
min-height: 2.5em;
}
.volledigbreed,
.main-content section.volledigbreed {
max-width: 100%;
width: 100%;
}
/* ===== SUB NAVIGATION ===== */
.site-submenu li {
display: inline-block;
font-weight: normal;
}
.site-submenu li a {
display: block;
text-decoration: none;
}
.site-submenu li a.actief {
cursor: default;
}
/* ===== 404 ===== */
.error404 {
background-image: url("https://www.woelderen.nl/resources_shared/img/error-404.png");
background-color: rgb(248,158,28);
background-repeat: no-repeat;
background-position: left center;
background-size: cover;
font-size: 2em;
font-weight: 300;
text-align: center;
color: rgb(255,255,255);
margin: 1em;
padding: 2em;
}
/* ===== COLLAPSABLE ===== */
.collapsable {
width: 100%;
float: none;
}
.collapsable[collapsable-data-bodyclick="true"] .collapsable-body,
.collapsable-header {
cursor: pointer;
}
.collapsable .inputregel_label {
width: 100%;
}
/* ===== FOOTER ===== */
.site-footer {
margin-top: 0;
height: auto;
}
.site-footer section {
margin: auto;
width: 100%;
}
/* ===== MOBILE NAVIGATION ===== */
/*noinspection CssOverwrittenProperties */
.mobile-nav {
display: none;
height: 100%;
width: 100%;
position: fixed;
bottom: 0;
left: 50px;
right: 0;
top: 0;
list-style: none;
overflow-y: scroll;
z-index: 0;
}
.mobile-nav .h2 {
font-weight: normal;
margin: 0.4em;
}
.mobile-nav ul {
list-style: none;
margin-top: 0.8em;
padding: 0;
}
.mobile-nav li {
font-weight: normal;
}
.mobile-nav li a {
display: block;
padding: 0.4em;
}
.mobile-nav li a.actief {
cursor: default;
}
.mobile-nav ul li ul {
margin: 0;
}
.mobile-nav ul li ul li a {
padding-left: 1.25em;
}
/* ===== HEADER NAVIGATION ===== */
.hoofdnav ul {
list-style: none;
}
.hoofdnav li {
display: inline-block;
}
.hoofdnav li a {
display: block;
text-decoration: none;
}
/* ===== HEADER SUB NAVIGATION ===== */
.hoofdnav li ul {
display: none;
position: absolute;
text-align: left;
}
.hoofdnav li ul li {
display: block;
}
.hoofdnav li li {
border-right: 0;
height: auto;
}
.hoofdnav li:hover ul {
z-index: 99;
display: block;
}
/* ===== CONTENT ===== */
section {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEEN - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
margin-bottom: 1.25em;
padding: 0;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: stretch;
align-items: stretch;
}
section div {
margin-bottom: 0;
}
.section-zelfde-hoogte,
.align-stretch {
-webkit-align-items: stretch;
align-items: stretch;
}
.fixed-width-250 {
margin: 0 1.25em 0 0;
padding: 0;
width: 250px;
-ms-flex: 0 0 250px; /* IE 10 */
-webkit-flex: 0 0 250px; /* NEW - Chrome */
flex: 0 0 250px; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) --> div1-12 (98 / (12/1) - 2 = 6.16) */
.div1-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 6%; /* IE 10 */
-webkit-flex: 1 0 6%; /* NEW - Chrome */
flex: 1 0 6%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) --> div2-12 (98 / (12/2) - 2 = 14.33) */
.div2-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 14%; /* IE 10 */
-webkit-flex: 1 0 14%; /* NEW - Chrome */
flex: 1 0 14%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) --> div3-12 (98 / (12/3) - 2 = 22.5) */
.div3-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 21%; /* IE 10 */
-webkit-flex: 1 0 21%; /* NEW - Chrome */
flex: 1 0 21%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) --> div4-12 (98 / (12/4) - 2 = 30.67) */
.div4-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 30%; /* IE 10 */
-webkit-flex: 1 0 30%; /* NEW - Chrome */
flex: 1 0 30%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) --> div5-12 (98 / (12/5) - 2 = 38.83) */
.div5-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 38%; /* IE 10 */
-webkit-flex: 1 0 38%; /* NEW - Chrome */
flex: 1 0 38%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) --> div6-12 (98 / (12/6) - 2 = 47) */
.div6-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 47%; /* IE 10 */
-webkit-flex: 1 0 47%; /* NEW - Chrome */
flex: 1 0 47%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) --> div7-12 (98 / (12/7) - 2 = 55.16) */
.div7-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 55%; /* IE 10 */
-webkit-flex: 1 0 55%; /* NEW - Chrome */
flex: 1 0 55%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) --> div8-12 (98 / (12/8) - 2 = 63.33) */
.div8-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 63%; /* IE 10 */
-webkit-flex: 1 0 63%; /* NEW - Chrome */
flex: 1 0 63%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) --> div9-12 (98 / (12/9) - 2 = 71.50) */
.div9-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 71%; /* IE 10 */
-webkit-flex: 1 0 71%; /* NEW - Chrome */
flex: 1 0 71%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) --> div10-12 (98 / (12/10) - 2 = 79.67) */
.div10-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 79%; /* IE 10 */
-webkit-flex: 1 0 79%; /* NEW - Chrome */
flex: 1 0 79%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) --> div11-12 (98 / (12/11) - 2 = 87.8) */
.div11-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 87%; /* IE 10 */
-webkit-flex: 1 0 87%; /* NEW - Chrome */
flex: 1 0 87%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* div12-12 (100 - 2 = 98) */
.div12-12 {
margin: 0.625rem 1%;
-ms-flex: 1 0 98%; /* IE 10 */
-webkit-flex: 1 0 98%; /* NEW - Chrome */
flex: 1 0 98%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.standaard-padding,
.standaard-padding-klein,
.standaard-padding-verticaal,
.standaard-padding-horizontaal {
box-sizing: border-box;
}
.fullwidth {
width: 100%;
}
.mobilewelzichtbaar,
.toggle1welzichtbaar,
.toggle2welzichtbaar {
display: none;
}
.uitlijning-links,
.uitlijning-rechts {
width: 50%;
}
.uitlijning-klein {
width: 25%;
}
.uitlijning-links {
float: left;
margin: 0 0.625em 0 0;
}
.uitlijning-rechts {
float: right;
margin: 0 0 0 0.625em;
}
.uitlijning-boven {
margin-bottom: 0.625em;
}
.uitlijning-onder {
margin-top: 0.625em;
}
/* ===== BREADCRUMBS ===== */
.kruimelpad {
font-weight: normal;
}
/* ===== OTHER ===== */
.afgerond {
overflow: hidden;
}
.animeer {
transition: all 0.5s ease;
}
.blur {
-webkit-filter: blur(1.25rem) grayscale(50%);
filter: blur(1.25rem) grayscale(50%);
}
.bg_rood {
background-color: #ff0000;
}
.clearboth {
clear: both;
}
dl {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEEN - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
dt,
dd {
flex: none;
}
.display_flex_row,
.display_flex_row_wrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEEN - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.display_flex_row_nowrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEEN - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.display_flex_column,
.display_flex_column_wrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEEN - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.display_flex_column_nowrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEEN - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex_grow {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.flex_nogrow,
.nogrow {
-webkit-flex-grow: 0 !important;
flex-grow: 0 !important;
}
.flex_0 {
-webkit-box-flex: 0; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 0; /* OLD - Firefox 19- */
-ms-flex: 0; /* IE 10 */
-webkit-flex: 0; /* NEW - Chrome */
flex: 0; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex_1 {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-ms-flex: 1; /* IE 10 */
-webkit-flex: 1; /* NEW - Chrome */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex_2 {
-webkit-box-flex: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 2; /* OLD - Firefox 19- */
-ms-flex: 2; /* IE 10 */
-webkit-flex: 2; /* NEW - Chrome */
flex: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex_3 {
-webkit-box-flex: 3; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 3; /* OLD - Firefox 19- */
-ms-flex: 3; /* IE 10 */
-webkit-flex: 3; /* NEW - Chrome */
flex: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex_4 {
-webkit-box-flex: 4; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 4; /* OLD - Firefox 19- */
-ms-flex: 4; /* IE 10 */
-webkit-flex: 4; /* NEW - Chrome */
flex: 4; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex_1_0_0 {
-ms-flex: 1 0 0; /* IE 10 */
-webkit-flex: 1 0 0; /* NEW - Chrome */
flex: 1 0 0; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex_1_0_auto {
-ms-flex: 1 0 auto; /* IE 10 */
-webkit-flex: 1 0 auto; /* NEW - Chrome */
flex: 1 0 auto; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex_basis_100 {
flex-basis: 100%;
}
.cursor-pointer {
cursor: pointer;
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events-all {
pointer-events: all;
}
.font_kop {
font-family: 'montserratbold','Arial Black','Arial Bold','Helvetica Bold','sans-serif';
}
.font_tekst {
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
}
H1,
H2,
H3 {
font-weight: normal;
padding: 0;
margin: 0 0 0.4em 0;
}
H4 {
padding: 0;
margin: 0;
}
[class*="bg_"] h1,
[class*="bg_"] h2 {
margin: 0.4em 0 0.4em 0;
}
.imgbackground-stretch {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.margin_0,
.geenmarge { margin: 0 !important; }
.margin_5 { margin: 0.3rem !important; }
.margin_10 { margin: 0.625rem !important; }
.margin_15 { margin: 0.9rem !important; }
.margin_20 { margin: 1.25rem !important; }
.margin_25 { margin: 1.5rem !important; }
.margin_ver_5 { margin: 0.3em 0 !important; }
.margin_ver_10 { margin: 0.625rem 0 !important; }
.margin_ver_15 { margin: 0.9rem 0 !important; }
.margin_ver_20 { margin: 1.25rem 0 !important; }
.margin_ver_25 { margin: 1.5rem 0 !important; }
.margin_ver_30 { margin: 1.8rem 0 !important; }
.margin_ver_35 { margin: 2.2rem 0 !important; }
.margin_ver_40 { margin: 2.5rem 0 !important; }
.margin_top_0 { margin-top: 0 !important; }
.margin_top_5 { margin-top: 0.3rem !important; }
.margin_top_10 { margin-top: 0.625rem !important; }
.margin_top_15 { margin-top: 0.9rem !important; }
.margin_top_20 { margin-top: 1.25rem !important; }
.margin_top_25 { margin-top: 1.5rem !important; }
.margin_top_30 { margin-top: 1.8rem !important; }
.margin_top_35 { margin-top: 2.2rem !important; }
.margin_top_40 { margin-top: 2.5rem !important; }
.margin_bot_0 { margin-bottom: 0 !important; }
.margin_bot_5 { margin-bottom: 0.3rem !important; }
.margin_bot_10 { margin-bottom: 0.625rem !important; }
.margin_bot_15 { margin-bottom: 0.9rem !important; }
.margin_bot_20 { margin-bottom: 1.25rem !important; }
.margin_bot_25 { margin-bottom: 1.5rem !important; }
.margin_bot_30 { margin-bottom: 1.8rem !important; }
.margin_bot_35 { margin-bottom: 2.2rem !important; }
.margin_bot_40 { margin-bottom: 2.5rem !important; }
.margin_hor_5 { margin: 0 0.3rem !important; }
.margin_hor_10 { margin: 0 0.625rem !important; }
.margin_hor_15 { margin: 0 0.9rem !important; }
.margin_hor_20 { margin: 0 1.25rem !important; }
.margin_hor_25 { margin: 0 1.5rem !important; }
.margin_hor_30 { margin: 0 1.8rem !important; }
.margin_hor_35 { margin: 0 2.2rem !important; }
.margin_hor_40 { margin: 0 2.5rem !important; }
.margin_right_5 { margin-right: 0.3rem !important; }
.margin_right_10 { margin-right: 0.625rem !important; }
.margin_right_15 { margin-right: 0.9rem !important; }
.margin_right_20 { margin-right: 1.25rem !important; }
.margin_right_25 { margin-right: 1.5rem !important; }
.margin_right_30 { margin-right: 1.8rem !important; }
.margin_right_35 { margin-right: 2.2rem !important; }
.margin_right_40 { margin-right: 2.5rem !important; }
.noblur {
-webkit-filter: none;
-ms-filter: none;
filter: none;
}
.noscroll { overflow: hidden; }
.nowrap {
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.onzichtbaar,
.null {
display: none;
}
.padding_0 { padding: 0 !important; }
.padding_5 { padding: 0.3em !important; }
.padding_10 { padding: 0.625em !important; }
.padding_15 { padding: 0.9em !important; }
.padding_20 { padding: 1.25em !important; }
.padding_25 { padding: 1.5em !important; }
.padding_30 { padding: 1.8em !important; }
.padding_40 { padding: 2.5em !important; }
.padding_50 { padding: 3em !important; }
.padding_40_20 { padding: 2.5em 1.25em !important; }
.padding_ver_5 { padding: 0.3em 0 !important; }
.padding_ver_10 { padding: 0.625em 0 !important; }
.padding_ver_15 { padding: 0.9em 0 !important; }
.padding_ver_20 { padding: 1.25em 0 !important; }
.padding_ver_25 { padding: 1.5em 0 !important; }
.padding_ver_30 { padding: 1.8em 0 !important; }
.padding_ver_40 { padding: 2.5em 0 !important; }
.padding_ver_50 { padding: 3em 0 !important; }
.padding_hor_5 { padding: 0 0.3em !important; }
.padding_hor_10 { padding: 0 0.625em !important; }
.padding_hor_15 { padding: 0 0.9em !important; }
.padding_hor_20 { padding: 0 1.25em !important; }
.padding_hor_25 { padding: 0 1.5em !important; }
.padding_hor_30 { padding: 0 1.8em !important; }
.padding_hor_40 { padding: 0 2.5em !important; }
.padding_hor_50 { padding: 0 3em !important; }
.padding_bot_0 { padding-bottom: 0 !important; }
.padding_bot_5 { padding: 0 0 0.3em 0 !important; }
.padding_bot_10 { padding: 0 0 0.625em 0 !important; }
.padding_bot_15 { padding: 0 0 0.9em 0 !important; }
.padding_bot_20 { padding: 0 0 1.25em 0 !important; }
.padding_bot_25 { padding: 0 0 1.5em 0 !important; }
.padding_bot_30 { padding: 0 0 1.8em 0 !important; }
.padding_bot_40 { padding: 0 0 2.5em 0 !important; }
.padding_bot_50 { padding: 0 0 3em 0 !important; }
.padding_bot_80 { padding: 0 0 5em 0 !important; }
.padding_top_0 { padding-top: 0 !important; }
.padding_top_5 { padding: 0.3em 0 0 0 !important; }
.padding_top_10 { padding: 0.625em 0 0 0 !important; }
.padding_top_15 { padding: 0.9em 0 0 0 !important; }
.padding_top_20 { padding: 1.25em 0 0 0 !important; }
.padding_top_25 { padding: 1.5em 0 0 0 !important; }
.padding_top_30 { padding: 1.8em 0 0 0 !important; }
.padding_top_40 { padding: 2.5em 0 0 0 !important; }
.padding_top_50 { padding: 3em 0 0 0 !important; }
.padding_top_80 { padding: 5em 0 0 0 !important; }
P, P P {
padding: 0;
margin: 0 0 0.625em 0;
}
P:empty:first-of-type { display: none; }
.position_relative { position: relative; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
section img {
margin: 0 0.625em 0.625em 0;
height: auto;
max-width: inherit;
width: 100%;
}
section * li {
margin: 0.3em 0;
}
.flex_start,
.justify-flex-start {
-webkit-justify-content: flex-start !important;
justify-content: flex-start !important;
}
.space_between,
.justify-space-between {
-webkit-justify-content: space-between !important;
justify-content: space-between !important;
}
.space_around,
.justify-space-around {
-webkit-justify-content: space-around !important;
justify-content: space-around !important;
}
.justify-center {
-webkit-justify-content: center !important;
justify-content: center !important;
}
.flex_end,
.justify-flex-end {
-webkit-justify-content: flex-end !important;
justify-content: flex-end !important;
}
.align-flex-start {
-webkit-align-items: flex-start !important;
align-items: flex-start !important;
}
.align-center {
-webkit-align-items: center !important;
align-items: center !important;
}
.align-flex-end {
-webkit-align-items: flex-end !important;
align-items: flex-end !important;
}
.align-self-start {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.align-self-end {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.roteer-90-rechtsom {
-webkit-transform: rotate(90deg); /* Firefox */
-moz-transform: rotate(90deg); /* IE */
-ms-transform: rotate(90deg); /* Opera */
-o-transform: rotate(90deg); /* Internet Explorer */
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
display: inline-block;
}
.site-content section * ul,
.site-content section * ol {
padding: 1.25em 2.5em;
margin: 1.25em 0;
}
.text-align-center,
.centreren,
.center {
text-align: center;
}
.text-align-left,
.links,
.left {
text-align: left;
}
.text-align-right,
.rechts,
.right {
text-align: right;
}
.text-align-justify {
text-align: justify;
}
.text-link {
text-decoration: underline;
}
.toggle-element {
display: none;
}
.toggle-element-button {
cursor: pointer;
}
table {
border-collapse: collapse;
margin-bottom: 1.8em;
}
table[border="0"] td,
table[border="0"] th {
border: 0;
}
th, td {
padding: 0.625em;
margin: 0;
}
.ul_geen_opmaak,
.ol_geen_opmaak {
list-style: none;
margin: 0;
padding: 0;
}
.ul_geen_opmaak li,
.ol_geen_opmaak li {
font-weight: normal;
}
.list-style-none {
list-style: none;
}
.vet,
.bold,
strong {
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
font-weight: bold;
}
.width_auto {
width: auto;
}
.width_100 {
width: 100%;
}
.width_50 {
width: 50%;
}
.width_75 {
width: 75%;
}
.wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.whitespace_nowrap {
white-space: nowrap;
}
/* ===== COLORS ===== */
.tekst_hover_body:hover,
.tekst_body,
a.tekst_body {
color: rgb(58,56,58);
}
.tekst_hover_a:hover,
.tekst_a,
a.tekst_a {
color: rgb(248,158,28);
}
.tekst_hover_b:hover,
.tekst_b,
a.tekst_b {
color: rgb(90,88,88);
}
.tekst_hover_c:hover,
.tekst_c,
a.tekst_c {
color: rgb(176,168,166);
}
.tekst_hover_d:hover,
.tekst_d,
a.tekst_d {
color: rgb(207,198,195);
}
.tekst_hover_e:hover,
.tekst_e,
a.tekst_e {
color: rgb(235,230,229);
}
.tekst_hover_grijs:hover,
.tekst_grijs,
a.tekst_grijs {
color: rgb(229,229,229);
}
.tekst_hover_wit:hover,
.tekst_wit,
a.tekst_wit {
color: rgb(255,255,255);
}
.tekst_hover_zwart:hover,
.tekst_zwart,
a.tekst_zwart {
color: rgb(58,56,58);
}
.bg_hover_a:hover,
.bg_a {
background-color: rgb(248,158,28);
}
.bg_hover_b:hover,
.bg_b {
background-color: rgb(90,88,88);
}
.bg_hover_c:hover,
.bg_c {
background-color: rgb(176,168,166);
}
.bg_hover_d:hover,
.bg_d {
background-color: rgb(207,198,195);
}
.bg_hover_e:hover,
.bg_e {
background-color: rgb(235,230,229);
}
.bg_hover_grijs:hover,
.bg_grijs {
background-color: rgb(229,229,229);
}
.bg_hover_wit:hover,
.bg_wit {
background-color: rgb(255,255,255);
}
.bg_hover_zwart:hover,
.bg_zwart {
background-color: rgb(58,56,58);
}
.bg_hover_body:hover,
.bg_body {
background-color: rgb(58,56,58);
}
/* ===== TABLE MOCK CLASSES ===== */
.table { display: table }
.tr { display: table-row }
.thead { display: table-header-group }
.tbody { display: table-row-group }
.tfoot { display: table-footer-group }
.col { display: table-column }
.colgroup { display: table-column-group }
.td, .th { display: table-cell }
.caption { display: table-caption }
/* ===== DISPLAY ===== */
.display_grid {
display: grid;
}
.display_block {
display: block;
}
.display_inline_block {
display: inline-block;
}
.display_inline {
display: inline;
}
/* ===== IE11 FIX ===== */
.internet-explorer-trident .standaard-padding {
box-sizing: border-box;
padding: 1.25em;
}
.internet-explorer-trident .standaard-padding-klein {
box-sizing: border-box;
padding: 0.625em;
}
.internet-explorer-trident .standaard-padding-verticaal {
box-sizing: border-box;
padding: 1.25em 0;
}
.internet-explorer-trident .standaard-padding-horizontaal {
box-sizing: border-box;
padding: 0 1.25em;
}
.internet-explorer-trident .actueel-item-overzicht {
display: inline-block;
}body {
color: rgb(58,56,58);
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
}
/*======= FOOTER =======*/
/* margin-top standaard op 0, indien gewenst hier aanpassen */
.site-footer {
margin-top: 1em;
}
.site-footer section {
max-width: 100%;
}
.footer-copyright {
font-size: 0.9em;
}
/* ===== HEADER NAVIGATION ===== */
.hoofdnav ul {
margin: 0;
padding: 0 1.25em;
text-align: center;
}
/* ===== MOBILE NAVIGATION ===== */
.mobile-nav .h2 {
font-family: 'montserratbold','Arial Black','Arial Bold','Helvetica Bold','sans-serif';
}
.mobile-nav li {
border-top: 1px solid rgba(255,255,255,0.25);
line-height: 1.5;
}
.mobile-nav {
border-bottom: 1px solid rgba(255,255,255,0.25);
}
.mobile-nav li a:hover {
background-color: rgba(255,255,255,0.15);
}
.mobile-nav li a.actief {
background-color: rgba(255,255,255,0.15);
}
.mobile-nav li li a.actief {
background-color: rgba(255,255,255,0.25);
}
/* ===== BREADCRUMBS ===== */
.kruimelpad {
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
font-size: 0.8em;
}
.kruimelpad a:hover {
opacity: 0.8;
}
/* ===== OTHER ===== */
.afgerond,
.border {
border-radius: 0.9em;
}
.box_shadow {
-webkit-box-shadow: 0 0 10px 0 rgba(58,56,58,0.3);
-moz-box-shadow: 0 0 10px 0 rgba(58,56,58,0.3);
box-shadow: 0 0 10px 0 rgba(58,56,58,0.3);
}
dt {
width: 30%;
font-weight: bold;
}
dd {
width: 70%;
}
.icon:before {
vertical-align: middle;
}
H1, H2, H3, H4, H5 {
font-family : 'montserratbold','Arial Black','Arial Bold','Helvetica Bold','sans-serif';
text-transform: uppercase;
letter-spacing: 0.025em;
}
H1 {
line-height: 1;
}
H2, H3 {
line-height: 1.15;
}
H4, H5 {
line-height: 1.25;
}
P, P P,
#visual-subtitel {
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
font-size: 1em;
line-height: 1.5;
}
.site-content section * ul,
.site-content section * ol {
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
font-size: 0.9em;
}
.text_shadow {
text-shadow: 0 0 10px rgba(58,56,58,0.3);
}/* ===== STANDARD FORM ===== */
form {
padding: 0.625em 0;
text-align: left;
}
form > div {
margin: 0 0 0.6em 0;
overflow: hidden;
padding: 0.06em;
}
form > div > fieldset > div > div {
margin: 0 0 0.3em 0;
}
.inputregel_label,
legend {
width: 25%;
float: left;
padding-right: 1.25em;
padding-top: 0.6em;
}
.inputregel_input {
width: 75%;
float: right;
}
fieldset {
border: 0;
padding: 0;
}
label {
margin: 0.625em 0;
padding: 0;
}
/* ===== STANDARD INPUTS ===== */
/* Removes all browser styles */
input[type=text],
input[type=search],
input[type=number],
input[type=email],
input[type=tel],
input[type=url],
input[type=file],
input[type=password],
input[type=submit],
input[type=button],
textarea,
select,
button,
.button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
}
/* Removes IE select arrows */
select::-ms-expand {
display: none;
}
input[type=text],
input[type=search],
input[type=number],
input[type=email],
input[type=tel],
input[type=url],
input[type=file],
input[type=password],
textarea {
padding: 0.8em;
}
select {
height: 2.5rem;
padding: 0 0.5em;
}
textarea,
input[type=file] {
padding-top: 0.6em;
}
textarea {
padding-top: 0.6em;
height: 7.5em;
}
input[type=text],
input[type=search],
input[type=email],
input[type=tel],
input[type=url],
input[type=file],
input[type=password],
textarea,
select {
width: 100%;
}
input[type=submit],
.button,
button,
input[type=button] {
cursor: pointer;
text-decoration: none;
border: 0;
}
input[type=text]:focus,
input[type=search]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
outline: 0;
}
.inputregel {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEEN - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: stretch;
align-items: stretch;
}
.inputregel_eenheid {
width: auto;
margin-left: 0.9em;
}
.inputregel_input {
position: relative;
-webkit-box-flex: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 2; /* OLD - Firefox 19- */
-ms-flex: 2; /* IE 10 */
-webkit-flex: 2; /* NEW - Chrome */
flex: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.input-decimal .inputregel,
.input-datum .inputregel,
.input-tijdstip .inputregel {
display: inline-block;
margin-bottom: 0;
}
.input-decimal input[type=number],
.input-datum select,
.input-tijdstip select {
width: auto;
}
input::-ms-clear {
display: none;
}
.naastelkaar-geenlabel .inputregel_label {
display: none;
}
.naastelkaar-geenlabel .inputregel {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* NEW - Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* ===== ICONS & ERROR MESSAGES ===== */
.formulier_melding {
display: inline-block;
padding: 0 1.25em;
}
.icon-input-ok,
.icon-input-nok,
.icon-input-verplicht {
position: absolute;
right: 0.625em;
}
.icon-input-ok,
.icon-input-nok,
.icon-input-verplicht {
font-size: 0.5em;
top: calc(25% + 0.5em);
}
.icon-input-ok {
color: green;
}
.icon-input-nok {
color: red;
}
.icon-input-verplicht {
color: rgb(248,158,28);
}
/* IE11 FIX, if flex-direction: column, then we need flex-basis auto! */
.internet-explorer-trident .inputregel_input {
-ms-flex: 2 0 auto; /* IE 10 */
-webkit-flex: 2 0 auto; /* NEW - Chrome */
flex: 2 0 auto; /* NEW, Spec - Opera 12.1, Firefox 20+ */
flex-basis: auto;
}
/* ===== FORM SPECIFIC MEDIA QUERIES ===== */
@media (min-width: 1200px) {
form > div > label,
legend {
text-align: right;
}
}
@media (max-width: 600px) {
form > div {
margin: 0 0 0.9em 0;
}
.inputregel_label,
legend {
float: none;
margin: 0 0 0.3em 0;
width: 100%;
}
.inputregel_input {
float: none;
width: 100%;
}
.inputregel {
-webkit-flex-direction: column;
flex-direction: column;
}
input[type=text],
input[type=search],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
textarea,
select {
width: 100%;
}
}/* ===== STANDARD FORM ===== */
form > div > label,
legend {
font-size: 0.9em;
}
form > div > fieldset label {
font-size: 0.8em;
}
/* ===== STANDARD INPUTS ===== */
input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),
textarea,
select {
color: rgba(58,56,58,0.8);
background-color: rgba(229,229,229,0.5);
border: 1px solid rgb(229,229,229);
font-family: Helvetica, Arial, sans-serif;
font-size: 0.9em;
}
.placeholder,
::placeholder {
color: rgba(58,56,58,0.5);
}
input:focus:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),
textarea:focus,
select:focus {
color: rgb(58,56,58);
border: 1px solid rgb(248,158,28);
}
input[readonly]:disabled,
input[readonly]:focus,
input[readonly] {
color: rgba(58,56,58,0.5);
border: 1px solid rgb(229,229,229);
}
input[readonly]:hover {
cursor: default;
}
.inputregel_eenheid {
font-size: 0.9em;
}
.inputregel_label {
font-size: 0.9em;
max-width: 200px;
}
label {
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
font-size: 0.9rem;
}
/* ===== CUSTOM INPUTS ===== */
/* Chrome autofill - Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 2rem rgb(255,255,255) inset !important;
}
/* CUSTOM SELECT */
select {
height: 2.5em;
padding: 0.2em 1.5em 0.2em 0.75em !important;
border: 1px solid rgb(229,229,229);
border-radius: 0.5em;
font-size: 1em;
background: rgba(229,229,229,0.5) url("https://www.woelderen.nl/resources_shared/img/custom-select-icon.png") no-repeat 99% 50%;
}
/* FANCY CHECKBOXES AND RADIO */
div.fancy_input_container {
margin: 0.3em 0;
position: relative;
}
/* hides the original input, but keeps the functionality */
.fancy_input_container input[type="checkbox"],
.fancy_input_container input[type="radio"] {
position: absolute;
visibility: hidden;
}
/* creates space for new input, moves label text to the right */
.fancy_input_container label {
display: block;
position: relative;
padding-left: 25px;
font-size: 0.9rem;
margin: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* draws new input type */
.fancy_input_container input[type="checkbox"] + span:before,
.fancy_input_container input[type="radio"] + span:before {
content: '';
display: block;
width: 14px;
height: 14px;
border: 2px solid rgb(248,158,28);
position: absolute;
left: 0;
top: 0;
}
.fancy_input_container input[type="checkbox"] + span:before {
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
.fancy_input_container input[type="radio"] + span:before {
background-color: rgb(255,255,255);
border-radius: 50%;
}
/* animates new input types on :checked state */
.fancy_input_container input[type="checkbox"]:checked + span:before {
width: 7px;
top: -4px;
left: 4px;
border-radius: 0;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.fancy_input_container input[type="radio"]:checked + span:before {
-webkit-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
background-color: rgb(248,158,28);
}
/* ===== ICONS & ERROR MESSAGES ===== */
.foutmeldingen li {
font-size: 0.9em;
font-weight: normal;
}
.formulier_melding {
border-radius: 0.3em;
color: rgb(255,255,255);
background-color: rgb(248,158,28);
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
}
/* ===== STANDARD BUTTONS ===== */
.button {
display: inline-block;
}
.leesverder {
margin: 1em 0 0.3em 0;
}
.nosupport-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255,255,255, 0.95);
z-index: 9999;
overflow: auto;
height: 100%;
}
.nosupport-overlay .nosupport-overlay-content {
position: relative;
margin: 0 auto;
max-width: 50vw;
top: 30%;
text-align: center;
transform: translateY(-50%);
}@media only screen and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
/* Prevent font scaling in landscape while allowing user zoom */
html {
-webkit-text-size-adjust: 100%;
}
}
@media all and (max-width:800px) {
.div8-12,
.div9-12 {
margin: 0.625em 2%;
-ms-flex: 1 0 48%; /* IE 10 */
-webkit-flex: 1 0 48%; /* NEW - Chrome */
flex: 1 0 48%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.toggle2nietzichtbaar {
display: none;
}
.toggle2welzichtbaar {
display: inline;
}
}
@media all and (max-width: 600px) {
.bovenbalk {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.div1-12,
.div2-12,
.div3-12,
.div4-12,
.div5-12,
.div6-12,
.div7-12,
.div8-12,
.div9-12,
.div10-12,
.div11-12,
.div12-12 {
margin: 0.625em 2%;
min-width: 96%;
-ms-flex: 1 0 96%; /* IE 10 */
-webkit-flex: 1 0 96%; /* NEW - Chrome */
flex: 1 0 96%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.footer-copyright {
height: auto;
-webkit-flex-direction: column;
flex-direction: column;
line-height: 1.75;
}
}:root {
--standaard-padding-margin: 1.25em;
}
/* ===== HOMEPAGE ===== */
.homepage-blok-container .homepage-blok {
-webkit-justify-content: space-between;
justify-content: space-between;
}
/* ===== SITE SUBMENU ===== */
.site-submenu ul {
padding: 0.8em;
}
.site-submenu li {
width: 100%;
padding-bottom: 0.4em;
}
.site-submenu li:last-child {
padding-bottom: 0;
}
/* ===== SITE ===== */
.maxcontentbreedte,
.main-content section,
.volledigbreed section,
.site-content.content-met-submenu {
max-width: 1440px;
margin: auto;
}
.maxcontentbreedte {
width: 100%;
}
.site-content section .menu-infoblok ul,
.site-content section .menu-infoblok ol,
.site-content section .submenu-infoblok ul,
.site-content section .submenu-infoblok ol {
padding: 0.4em;
margin: 0.4em 0;
display: inline-block;
}
.site-content.content-met-submenu,
.menu-infoblokken {
margin-top: 1%;
}
/* ===== NEWS / ARCHIVE ===== */
.actueel-item-tekst,
.archief-item-tekst {
height: 100%;
}
.actueel-item-tekst H4,
.archief-item-tekst H4 {
font-size: 90%;
margin-bottom: 0.4em;
}
.div12-12.actueel-item-overzicht > div a.button {
-webkit-align-self: flex-start;
align-self: flex-start;
}
/* ===== COLLAPSABLE ===== */
.collapsable-header > span {
margin-right: 0.4em;
}
/* ===== COOKIE WARNING ===== */
.cookiewarning-container {
z-index: 999;
position: fixed;
bottom: 0;
left: 0;
right: 0;
opacity: 0.9;
}
.cookiewarning-text-container {
min-width: 50%;
}
.cookiewarning-button-accept {
width: fit-content;
}
/* ===== FOOTER ===== */
.site-footer-eigensocialmedia a {
padding: 0.4em;
}
.footer-copyright div {
margin: 0 0.4em;
}
/* ===== HEADER TOP NAVIGATION ===== */
.bovenbalk {
margin: 0 auto;
}
.bovenbalk span {
font-weight: normal;
}
/* ===== HEADER VISUAL ===== */
.visual-slide-container {
height: 100%;
}
.visual {
position: relative;
height: inherit;
}
.header-visual,
.header-visual-home {
position: relative;
overflow: hidden;
-webkit-transition: height 0.5s ease-in;
transition: height 0.5s ease-in;
}
.header-visual,
.header-visual .imgdiv {
position: relative;
width: 100%;
height: 450px;
}
.header-visual-home,
.header-visual-home .imgdiv {
position: relative;
width: 100%;
height: 450px;
}
.header-visual .imgdiv,
.header-visual-home .imgdiv {
margin: auto;
}
.header-visual .imgdiv {
max-width: 1920px;
margin-top: -450px;
}
.header-visual-home .imgdiv {
max-width: 1920px;
margin-top: -450px;
}
.header-visual .imgdiv img,
.header-visual-home .imgdiv img {
width: 100%;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.header-visual .imgdiv img {
height: 450px;
}
.header-visual-home .imgdiv img {
height: 450px;
}
div#visual-nav {
display: block;
width: 100%;
text-align: center;
margin: auto;
position: relative;
z-index: 2;
}
div#visual-nav ul {
top: -24px;
position: relative;
display: inline-block;
height: 1em;
list-style-type: none;
z-index: 5;
}
div#visual-nav ul li {
border-radius: 7px;
height: 14px;
width: 14px;
padding: 0;
margin-right: 0.3em;
float: left;
}
.visual-loader {
background-size: 50px;
background-repeat: no-repeat;
}
/* ===== HEADER VISUAL PAYOFF ===== */
.header-visual .payoffheader {
height: 450px;
}
.header-visual-home .payoffheader {
height: 450px;
}
.payoffheader {
margin: 0 auto;
overflow: hidden;
width: 100%;
width: -moz-fit-content;
width: fit-content;
max-width: calc(1440px - 1.25em);
}
.payoffheader h2 {
margin: 0;
width: 100%;
}
.highlight_wit {
background-color: rgba(255,255,255,0.6);
}
.highlight_grijs {
background-color: rgba(229,229,229,0.6);
}
.highlight_zwart {
background-color: rgba(58,56,58,0.6);
}
.highlight_a {
background-color: rgba(248,158,28,0.6);
}
.highlight_b {
background-color: rgba(90,88,88,0.6);
}
.highlight_c {
background-color: rgba(176,168,166,0.6);
}
.highlight_d {
background-color: rgba(207,198,195,0.6);
}
.highlight_e {
background-color: rgba(235,230,229,0.6);
}
/* ===== HEADER NAVIGATION ===== */
.hoofdnav li a {
padding: 0.4em 1.25em;
}
/* ===== BREADCRUMBS ===== */
section.kruimelpad-container {
margin: 0 1%;
}
/* ===== OTHER ===== */
.standaard-padding {
padding: var(--standaard-padding-margin);
}
.standaard-padding-klein {
padding: calc(0.5 * var(--standaard-padding-margin));
}
.standaard-padding-verticaal {
padding: var(--standaard-padding-margin) 0;
}
.standaard-padding-horizontaal {
padding: 0 var(--standaard-padding-margin);
}
.fullwidth-background {
margin: 0 -9999rem;
padding: 0 9999rem;
}
section img {
max-width: 100%;
}
table[border="0"] td,
table[border="0"] th {
border: 0;
}
.no-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
/* ===== COLORS ===== */
[class*='tekst_hover_'],
.site-footer a {
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease;
}
[class*='bg_hover_'] {
-webkit-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
/* ===== LANGUAGE PICKER ===== */
.language-picker-menu {
position: relative;
margin-left: 1.5em;
-webkit-align-self: flex-start;
align-self: flex-start;
z-index: 9;
}
/* dropdown icon */
.language-picker-menu div:before {
position: absolute;
right: -15px;
top: 5px;
font-size: 13px;
}
.language-picker-dropdown {
position: absolute;
left: -20px;
top: 30px;
list-style-type: none;
padding: 13px;
text-align: right;
}
.language-picker-menu li {
padding-bottom: 13px;
}
.language-picker-menu li:last-of-type {
padding-bottom: 0;
}
.language-picker-menu li a {
display: block;
padding: 5px;
border: 2px solid transparent;
}
.language-picker-menu li a:hover {
padding: 5px;
border-radius: 7px;
}
.language-picker-menu li a img {
display: block;
}
/* ===== SERVICES ===== */
.diensten {
padding: 2% 0;
}
.dienst,
.menu-infoblok {
position: relative;
flex: 1 0 250px;
min-width: 250px;
max-width: 50%;
height: auto;
text-align: center;
margin-bottom: 1%;
cursor: pointer;
}
.dienst-icon,
.menu-infoblok-icon {
display: inline-block;
position: relative;
margin-bottom: 1%;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.dienst-icon:before,
.menu-infoblok-icon:before {
position: absolute;
left: 0;
right: 0;
}
.dienst .button,
.menu-infoblok .button {
position: absolute;
left: 20%;
right: 20%;
bottom: 0;
}
/* ===== PORTFOLIO OVERVIEW ===== */
.portfolio-item {
padding: 0 0 1.25em;
}
.portfolio-item-img {
width: 100%;
}
.portfolio-item-tekst {
width: 100%;
height: 100%;
}
.portfolio-item-tekst h2 {
margin-bottom: 1.25em;
}
.portfolio-button {
margin-bottom: 2em;
}
/* ===== PORTFOLIO DETAIL ===== */
section.portfolio-detail {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.portfolio-detail-item ul {
background-color: transparent!important;
padding: 0 2em!important;
}
.portfolio-visual-container {
margin: 0;
}
.portfolio-detail-visual {
margin: 0;
}
/* ===== TEAM OVERVIEW ===== */
.teamleden {
width: 100%;
}
.teamlid {
text-align: center;
padding: 0.6em 0.6em 2.5em 0.6em;
margin-bottom: 1%;
}
.teamlid div a:before {
padding: 0 0.3em;
}
.teamlid-pasfoto {
display: block;
margin: 0 auto;
}
/* ===== TEAM DETAIL ===== */
.teamlid-detail {
margin: 0 auto;
}
.teamlid-detail-button {
margin: 0 auto;
}
/* ===== TEAM IN HOMEPAGE ROW ===== */
.homepage-regel-container .teamlid {
padding: 1.25em;
margin-bottom: 0;
}
/* ===== TEAM IN HOMEPAGE BLOCK ===== */
.homepage-blok.teamleden {
-webkit-flex-direction: column;
flex-direction: column;
}
.homepage-blok .teamlid {
flex: none;
max-width: 100%;
text-align: left;
margin-bottom: 0.6em;
padding: 0;
}
.homepage-blok .teamlid-pasfoto {
margin-right: 0.6em;
}
.homepage-blok .teamlid-tekst {
flex: 1;
}/* (set fontsize in media queries!) */
p a:not([class*="tekst_"]) {
color: rgb(248,158,28);
}
/* ===== STANDARD FALLBACK-COLORS ===== */
H1:not([class*="tekst_"]),
H2.h1-to-h2:not([class*="tekst_"]),
H2:not([class*="tekst_"]),
H3:not([class*="tekst_"]),
H4:not([class*="tekst_"]),
H5:not([class*="tekst_"]),
.hoofdnav li a:not([class*="tekst_"]),
.hoofdnav li a:not([class*="tekst_"]):hover,
.hoofdnav li a:not([class*="tekst_"]).actief {
color: rgb(58,56,58);
}
/* set new color combination if it conflicts with standard color - see above */
.bg_body H1:not([class*="tekst_"]),
.bg_body H2.h1-to-h2:not([class*="tekst_"]),
.bg_body H2:not([class*="tekst_"]),
.bg_body H3:not([class*="tekst_"]),
.bg_body H4:not([class*="tekst_"]),
.bg_body H5:not([class*="tekst_"]),
.bg_body .hoofdnav li a:not([class*="tekst_"]),
.bg_body .hoofdnav li a:not([class*="tekst_"]):hover,
.bg_body .hoofdnav li a:not([class*="tekst_"]).actief,
.bg_zwart H1:not([class*="tekst_"]),
.bg_zwart H2.h1-to-h2:not([class*="tekst_"]),
.bg_zwart H2:not([class*="tekst_"]),
.bg_zwart H3:not([class*="tekst_"]),
.bg_zwart H4:not([class*="tekst_"]),
.bg_zwart H5:not([class*="tekst_"]),
.bg_zwart .hoofdnav li a:not([class*="tekst_"]),
.bg_zwart .hoofdnav li a:not([class*="tekst_"]):hover,
.bg_zwart .hoofdnav li a:not([class*="tekst_"]).actief {
color: rgb(248,158,28);
}
/* ===== FOOTER ===== */
.site-footer p {
line-height: 1.75;
}
/* ===== HEADER TOP NAVIGATION ===== */
.bovenbalk {
padding: 0.6em 1.25em;
}
.logo-container img,
.logo-container svg {
width: 4em;
height: auto;
}
/* ===== HEADER NAVIGATION ===== */
.hoofdnav li {
font-family: 'montserratbold','Arial Black','Arial Bold','Helvetica Bold','sans-serif';
font-size: 0.9em;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: var(--letter-spacing);
}
.hoofdnav li a.actief {
color: rgb(58,56,58);
}
/* ===== HEADER SUB NAVIGATION ===== */
.hoofdnav li li {
font-size: 0.9em;
border-top: 1px solid rgb(229,229,229);
}
.hoofdnav li li:first-child {
border-top: 1px transparent;
}
/* ===== VISUAL ===== */
.nav-bol-uit,
div#visual-nav ul li {
background-color: rgb(90,88,88);
}
div#visual-nav ul li:hover,
.nav-bol-aan {
background-color: rgb(248,158,28);
}
/* ===== VISUAL PAYOFF ===== */
.payoffheader {
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
}
/* ===== SITE SUBMENU ===== */
.site-submenu {
max-width: 21em;
}
.site-submenu ul {
width: 17em;
}
.site-submenu li {
position: relative;
padding: 0;
}
.site-submenu li a {
font-family: 'montserratbold','Arial Black','Arial Bold','Helvetica Bold','sans-serif';
text-transform: uppercase;
color: rgb(58,56,58);
padding: 0.3em;
}
.site-submenu li a:after {
position: absolute;
left: 0;
bottom: 0;
content: '';
height: 3px;
width: 100%;
background-color: rgb(248,158,28);
}
.site-submenu li a:hover,
.site-submenu li a.actief {
color: rgb(255,255,255);
background-color: rgb(248,158,28);
}
/* ===== SHARE ON SOCIAL MEDIA ===== */
.socialmedia {
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
font-size: 0.8em;
font-weight: normal;
line-height: 1.5;
padding: 0.9em;
}
.socialmedia span:before {
color: rgb(248,158,28);
font-size: 1.25em;
line-height: 1.25;
}
.socialmedia span:hover:before {
filter: brightness(0.9);
}
/* ===== LANGUAGE PICKER ===== */
/* change to same background color as bovenbalk */
.language-picker-menu div,
.language-picker-dropdown {
background-color: rgb(255,255,255);
}
.language-picker-menu div:before {
color: rgba(58,56,58,0.8);
}
.language-picker-menu li a:hover {
border: 2px solid rgb(90,88,88);
}
/* ===== SERVICES ===== */
.dienst {
margin-bottom: 3%;
}
.dienst .button {
left: 15%;
right: 15%;
}
.dienst-link,
.menu-infoblok {
padding: 0.6em 0.6em 4em 0.6em;
color: rgb(58,56,58);
}
.dienst-icon,
.menu-infoblok-icon {
width: 10em;
height: 10em;
border-radius: 50%;
border: 2px solid rgb(248,158,28);
}
.dienst-icon:before,
.menu-infoblok-icon:before {
font-size: 5em;
top: 25%;
}
.dienst:hover .dienst-icon,
.menu-infoblok:hover .menu-infoblok-icon {
color: rgb(255,255,255);
border-color: rgb(207,198,195);
}
.dienst:hover .dienst-icon,
.dienst:hover .button,
.menu-infoblok:hover .menu-infoblok-icon,
.menu-infoblok:hover .button {
background-color: rgb(207,198,195);
}
.dienst-image {
width: 15em;
height: 15em;
margin: 0 auto;
}
.dienst-image img {
border-radius: 50%;
padding: 0.75em;
border: 0.1em solid rgb(207,198,195);
}
/* ===== NEWS / ARCHIVE ===== */
/* width img next to news item */
.archief-item-afbeelding-container.uitlijning-rechts,
.archief-item-afbeelding-container.uitlijning-links,
.actueel-item-afbeelding-container.uitlijning-rechts,
.actueel-item-afbeelding-container.uitlijning-links {
width: 25%;
}
/* if 1 column, border (divider) between items + button left */
.div12-12.actueel-item-overzicht,
.div12-12.archief-item-overzicht {
border-top: 1px solid rgba(229,229,229,0.5);
}
/* fallback-color border, change this if you change border color above */
.div12-12.actueel-item-overzicht.bg_grijs,
.div12-12.archief-item-overzicht.bg_grijs {
border-top: 1px solid rgba(255,255,255,0.5);
}
.div12-12.actueel-item-overzicht:first-child,
.div12-12.bg_grijs.actueel-item-overzicht:first-child,
.div12-12.archief-item-overzicht:first-child,
.div12-12.bg_grijs.archief-item-overzicht:first-child {
border-top: none;
}
/* ===== NEWS IN HOMEPAGE BLOCK ===== */
.homepage-blok .actueel-item {
text-align: left;
margin-bottom: 0.6em;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.homepage-blok.bg_wit .actueel-item {
border-bottom: 1px solid rgba(229,229,229,0.5);
}
.homepage-blok .actueel-item:last-child,
.homepage-blok.bg_wit .actueel-item:last-child {
border-bottom: none;
}
.homepage-blok .actueel-item-afbeelding {
width: 150px;
margin-right: 0.6em;
min-width: 10%;
}
/* ===== PORTFOLIO OVERVIEW ===== */
.filter-button {
display: inline-block;
width: 11em;
padding: 0.75em 2em;
margin: 0.1em;
background-color: transparent;
color: rgb(255,255,255);
font-size: 1.25em;
text-transform: none;
text-align: center;
line-height: 1.25;
border: 0.06em solid rgb(255,255,255);
border-radius: 2em;
}
.filter-button:before {
padding-right: 0.6em;
}
.filter-button:hover,
.filter-button.actief {
background-color: rgb(248,158,28);
border: 0.06em solid rgb(248,158,28);
}
.portfolio-soort-icon {
font-size: 2.25em;
color: rgb(248,158,28);
}
.portfolio-soort-icon span:before {
padding: 0 0.6em;
}
/* ===== PORTFOLIO DETAIL ===== */
.portfolio-detail-klantinfo {
margin: 0;
position: relative;
flex: 1 0 auto;
min-width: 250px;
padding: 1.25em;
}
.button-portfolio-detail {
position: absolute;
display: inline-block;
bottom: 0;
padding: 0.5em 1em;
margin: 1.75em 0;
font-size: 1em;
text-transform: none;
line-height: 1.25;
background-color: transparent;
color: rgb(90,88,88);
border: 0.06em solid rgb(90,88,88);
border-radius: 2em;
}
.button-portfolio-detail:hover {
border: 0.06em solid rgb(229,229,229);
background-color: rgb(229,229,229);
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
/* ===== PORTFOLIO SLIDER ===== */
.portfolio-slider {
text-align: center;
}
.portfolio-slider h2 {
font-weight: 300;
}
/* ===== TEAM OVERVIEW ===== */
.teamlid-pasfoto {
min-width: 9em;
max-width: 15em;
}
.teamlid-pasfoto img {
width: 13em;
border-radius: 50%;
border: 0.1em solid rgb(207,198,195);
padding: 0.75em;
}
.teamlid div a:before {
font-size: 1.2em;
}
.teamlid-tekst h3 {
position: relative;
margin: 0.4em 0 1.2em 0;
}
.teamlid-tekst h3:before {
position: absolute;
bottom: -0.5em;
left: calc(50% - 0.8em);
content: '';
width: 1.6em;
height: 0.15em;
background-color: rgb(248,158,28);
}
.teamlid-tekst p {
margin: auto;
margin-bottom: 0.625em;
max-width: 40ch;
}
/* ===== TEAM IN HOMEPAGE ROW ===== */
.homepage-regel-container .teamlid-pasfoto {
max-width: 15em;
}
/* ===== TEAM IN HOMEPAGE BLOCK ===== */
.homepage-blok .teamlid-pasfoto {
min-width: 6em;
width: 6em;
padding: 0.5em;
}
.homepage-blok .teamlid-tekst h3:before {
left: 0;
}
.homepage-blok .teamlid-tekst p {
max-width: initial;
}
.homepage-blok .teamlid-contactgegevens a {
padding-right: 1em;
}
/* ===== OTHER ===== */
.downloads {
border: 1px solid rgb(229,229,229);
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
margin-bottom: 0.8em;
}
.downloads a {
font-family: 'montserratregular','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
}
.bestand-link:before {
padding-right: 0.5em;
}
.grid-table {
padding: 0.4em 0;
}
.grid-th {
opacity: 0.8;
font-weight: bold;
padding-right: 0.25em;
}
.grid-td {
padding-left: 0.25em;
}
.site-content section * ul,
.site-content section * ol {
background-color: rgba(229,229,229,0.15);
border-radius: 0.3em;
font-size: inherit;
mix-blend-mode: multiply;
}
tr:hover {
background-color: rgba(248,158,28,0.15);
}
td {
border: 1px solid rgba(58,56,58,0.3);
}
.uitlijning-links,
.uitlijning-rechts {
width: 45%;
}
.vet {
font-family: 'montserratbold','Arial Black','Arial Bold','Helvetica Bold','sans-serif';
font-weight: normal;
}/* ===== STANDARD FORM ===== */
.datatable-noclick {
pointer-events: none;
cursor: default;
}
.datatable-noclick input[type=checkbox],
.datatable-noclick a,
.datatable-noclick span {
pointer-events: all;
cursor: pointer;
display: inline-block;
}
/* ===== SOCIAL MEDIA EMAIL FORM ===== */
.socialmedia-emailform-melding,
.socialmedia-emailform-container {
position: relative;
margin: 0 auto;
max-width: 500px;
}
.socialmedia-emailform-melding {
margin: 20px auto;
}
/* ===== FORM SPECIFIC MEDIA QUERIES ===== */
@media (max-width: 600px) {
.socialmedia-emailform-melding,
.socialmedia-emailform-container {
max-width: 320px;
}
}
/* ===== STANDARD INPUTS ===== */
.inputregel {
font-size : 0.9em;
}
label {
line-height: 1.25;
}
/* CUSTOM CHECKBOXES AND RADIO */
.inputregel_input input[type="checkbox"] + label {
padding-left: 25px;
font-size: 0.9rem;
}
.inputregel_input input[type="checkbox"] + label:before {
width: 14px;
height: 14px;
border: 2px solid rgb(248,158,28);
position: absolute;
left: 0;
top: 0;
}
/* rotate border */
.inputregel_input input[type="checkbox"]:checked + label:before {
width: 7px;
top: -4px;
left: 4px;
}
.inputregel_input input[type="radio"] + label {
padding-left: 25px;
font-size: 0.9rem;
}
.inputregel_input input[type="radio"] + label:before {
width: 14px;
height: 14px;
border: 2px solid rgb(248,158,28);
background-color: rgb(255,255,255);
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
.inputregel_input input[type="radio"]:checked + label:before {
background-color: rgb(248,158,28);
}
/* ===== STANDARD BUTTONS ===== */
.button,
button,
input[type=button],
input[type=submit] {
padding: 0.5em 1.25em;
border: none;
border-radius: 2.5em;
font-family: 'montserratbold','HelveticaNeue-Light','Helvetica','Arial','sans-serif';
text-transform: uppercase;
font-size: 1em;
text-align: center;
letter-spacing: var(--letter-spacing);
-webkit-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
.button:not([class*="bg_"]),
button:not([class*="bg_"]),
input[type=button]:not([class*="bg_"]),
input[type=submit]:not([class*="bg_"]) {
background-color: rgb(248,158,28);
}
.button:not([class*="tekst_"]),
button:not([class*="tekst_"]),
input[type=button]:not([class*="tekst_"]),
input[type=submit]:not([class*="tekst_"]) {
color: rgb(58,56,58);
}
.button:hover:not([class*="bg_hover_"]),
button:hover:not([class*="bg_hover_"]),
input[type=button]:hover:not([class*="bg_hover_"]),
input[type=submit]:hover:not([class*="bg_hover_"]) {
background-color: rgb(90,88,88);
}
.button:hover:not([class*="tekst_hover"]),
button:hover:not([class*="tekst_hover"]),
input[type=button]:hover:not([class*="tekst_hover"]),
input[type=submit]:hover:not([class*="tekst_hover"]) {
color: rgb(255,255,255);
}
/* CUSTOM BUTTONS */
.button_secondary {
position: relative;
display: inline-block;
padding: 0.5em 0;
border-radius: 0;
text-align: left;
background-color: transparent;
}
.button_secondary:hover {
color: rgb(58,56,58);
background-color: transparent;
}
.button_secondary:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 1.6em;
height: 0.2em;
background-color: rgb(248,158,28);
-webkit-transition: width 0.5s ease;
transition: width 0.5s ease;
}
.button_secondary:hover:after {
width: 4.8em;
}
/* ===== SOCIAL MEDIA EMAIL FORM ===== */
.socialmedia-emailform-melding {
background-color: rgba(248,158,28, 0.1);
}
/* ===== FORM SPECIFIC MEDIA QUERIES ===== */
@media (min-width: 1200px) {
}
@media (max-width: 900px) {
}
@media (max-width: 600px) {
}:root {
--standaard-padding-margin: 2em;
--letter-spacing: 0.025em;
}
/* Header - logo */
.bovenbalk {
position: relative;
min-height: 4em;
}
.logo-container {
position: absolute;
top: 0.3em;
z-index: 9;
}
.logo-container:after {
position: absolute;
width: calc(100vw - 6em);
content: 'fysiotherapie van woelderenlaan / govert flinck';
font-family: 'montserratbold','Arial Black','Arial Bold','Helvetica Bold','sans-serif';
font-size: 1em;
text-transform: uppercase;
letter-spacing: var(--letter-spacing);
color: rgb(255,255,255);
bottom: 1.25em;
left: 5em;
}
.hoofdnav {
margin-left: 4em;
}
/* Header - button */
.tel-button-container {
margin: 0 0.625rem;
font-size: 0.8em;
}
.whatsapp-bovenbalk {
font-size: 1.25em;
margin-top: 0.25em;
}
/* Header - Visual */
.payoffheader > div {
z-index: 9;
}
.visual-pattern,
.visual-colorblend {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.visual-pattern {
background: repeating-linear-gradient( -45deg, rgb(176,168,166), rgb(176,168,166) 2px, rgb(207,198,195) 2px, rgb(207,198,195) 8px);
mix-blend-mode: multiply;
}
.visual-colorblend {
background-color: rgb(176,168,166);
mix-blend-mode: color;
}
/* NAVIGATION WITH FANCY HOVERS + FIX FOR TOUCH DEVICES */
.hoofdnav ul,
.hoofdnav li a {
padding: 0;
}
.hoofdnav ul li > ul li a {
padding: 0 0.8em;
}
.hoofdnav ul li > ul li:last-of-type {
padding-bottom: 0.6em;
}
.hoofdnav > ul > li {
padding: 0 1.25em;
}
.hoofdnav > ul > li > a {
display: inline;
position: relative;
}
.hoofdnav > ul > li > a.actief {
font-weight: bold;
}
.hoofdnav > ul > li > a:after,
.hoofdnav > ul > li > a.actief:after {
position: absolute;
bottom: -2px;
left: 0;
content: '';
width: 100%;
height: 0.15em;
background-color: rgb(248,158,28);
}
.hoofdnav > ul > li > a:after {
width: 0;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
/* moves the submenu down to show fancy hover, change this if you change position of fancy hover */
.hoofdnav li ul {
padding-top: 0.4em;
}
.hover-allowed .hoofdnav > ul > li > a:hover:after {
width: 100%;
}
.hoofdnav li ul li {
line-height: 2;
}
/* ===== EXTRA CSS CLASSES (MANAGE IN WEBMAN - HOMEPAGE ROWS-BLOCKS) ===== */
section.bg_fullwidthcolor {
max-width : 100%;
}
.bg_fullwidthcolor > div {
max-width : 1440px;
width : 100%;
margin : auto!important;
}
/* Fancy typography - Big names */
.bg_fullwidthcolor,
.bigname {
position: relative;
overflow-y: hidden;
}
.bg_fullwidthcolor:before,
.bg_fullwidthcolor:after,
.bigname:before,
.bigname:after {
position: absolute;
font-family: 'montserratbold','Arial Black','Arial Bold','Helvetica Bold','sans-serif';
}
.bg_fullwidthcolor:before,
.bigname:before {
content: 'GOVERT FLINCK';
font-size: 12em;
line-height: 0.725em;
word-break: break-all;
top: 0;
left: 0;
color: rgba(229,229,229,0.2);
mix-blend-mode: multiply;
}
.bigname:before {
content: 'VAN WOELDEREN';
font-size: 9em;
}
.bg_fullwidthcolor:after,
.bigname:after {
content: 'VAN WOELDEREN';
font-size: 8em;
line-height: 0.775em;
bottom: -0.0775em;
right: 0;
text-align: right;
color: rgba(229,229,229,0.15);
mix-blend-mode: multiply;
}
.bigname:after {
content: 'GOVERT FLINCK';
font-size: 12em;
}
.bg_zwart.bg_fullwidthcolor:before,
.bg_zwart.bg_fullwidthcolor:after,
.bg_zwart.bigname:before,
.bg_zwart.bigname:after,
.bg_body.bg_fullwidthcolor:before,
.bg_body.bg_fullwidthcolor:after,
.bg_body.bigname:before,
.bg_body.bigname:after {
mix-blend-mode: color-burn;
}
.bg_fullwidthcolor > div {
z-index: 2;
}
.bigname:before,
.bigname:after {
z-index: -1;
}
.site-content.bigname {
margin-top: 0;
padding-top: 1%;
}
/* Fancy typography - Header divider */
H1,
H2.homepage-regel-title {
position: relative;
line-height: 1.1;
display: inline-block;
}
H1:after,
H2.homepage-regel-title:after {
position: absolute;
bottom: -0.3em;
left: calc(50% - 0.8em);
content: '';
width: 1.6em;
height: 0.15em;
background-color: rgb(248,158,28);
}
[class*="bg_"] h1,[class*="bg_"] h2 {
margin: 0.2em 0 0.6em 0;
}
.introductie {
text-align: left;
}
.homepage-regel-introductie p,
.introductie p {
max-width:80ch;
}
.homepage-regel-introductie p {
margin: 0 auto 0.625em auto;
}
/* Fancy typography - Color Block before News items & Chapters */
.actueel-item-tekst h3,
.hoofdstuk-item-overzicht h2,
.hoofdstuk-item-detail h2 {
position: relative;
}
.actueel-item-tekst h3:before,
.hoofdstuk-item-overzicht h2:before,
.hoofdstuk-item-detail h2:before {
position: absolute;
top: 0.15em;
left: -1.4em;
content: '';
width: 0.8em;
height: 0.8em;
background-color: rgb(248,158,28);
}
.bg_a.hoofdstuk-item-overzicht h2:before,
.bg_a.hoofdstuk-item-detail h2:before {
background-color: rgb(207,198,195);
}
/* Fancy images - Color Block behind images Chapters */
.hoofdstuk-item-overzicht.div12-12 .uitlijning-links img,
.hoofdstuk-item-overzicht.div12-12 .uitlijning-rechts img,
.hoofdstuk-item-detail .uitlijning-links img,
.hoofdstuk-item-detail .uitlijning-rechts img {
margin: 0;
display: block;
}
.hoofdstuk-item-overzicht.div12-12 .uitlijning-links,
.hoofdstuk-item-detail .uitlijning-links {
margin: 0 2em 0 0;
/*
-webkit-box-shadow: 7em 3.5em 0 -2.2em rgba(
235,230,229 ,0.5);
-moz-box-shadow: 7em 3.5em 0 -2.2em rgba(
235,230,229 ,0.5);
box-shadow: 7em 3.5em 0 -2.2em rgba(
235,230,229 ,0.5);
*/
}
.hoofdstuk-item-overzicht.div12-12 .uitlijning-rechts,
.hoofdstuk-item-detail .uitlijning-rechts {
margin: 0 0 0 2em;
/*
-webkit-box-shadow: -7em 3.5em 0 -2.2em rgba(235,230,229,0.5);
-moz-box-shadow: -7em 3.5em 0 -2.2em rgba(235,230,229,0.5);
box-shadow: -7em 3.5em 0 -2.2em rgba(235,230,229,0.5);
*/
}
/* Footer */
.footer-copyright a {
text-transform: uppercase;
text-decoration: unset;
letter-spacing: var(--letter-spacing);
font-family: 'montserratbold','Arial Black','Arial Bold','Helvetica Bold','sans-serif';
}
.partner-logo img {
max-height: 9em;
width: auto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
@media all and (max-width:1000px) {
.header-visual-home,
.header-visual-home .payoffheader,
.header-visual-home .imgdiv img {
height: calc(0.75 * 450px);
}
.content-met-submenu {
-webkit-flex-direction: column;
flex-direction: column;
margin-top: 0.6em;
}
.hoofdnav li a {
padding: 0.2em 0.6em;
}
.site-submenu {
border: 0;
margin: 0;
padding: 0;
width: 100%;
}
.site-submenu ul {
padding: 0;
text-align: center;
}
.site-submenu li {
margin-right: 0.6em;
padding: 0.3em;
width: inherit;
}
.site-submenu li:last-child {
padding-bottom: 0.3em;
}
.site-submenu a {
margin: 0;
padding: 0;
}
}
@media all and (max-width:900px) {
.mobilenietzichtbaar {
display: none;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.mobilewelzichtbaar {
display: inherit;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
}
@media all and (max-width:800px) {
.header-visual-home,
.header-visual-home .payoffheader,
.header-visual-home .imgdiv img {
height: calc(0.5 * 450px);
}
.payoffheader span {
display: none;
}
}
@media all and (max-width: 600px) {
.dienst,
.menu-infoblok {
min-width: 98%;
-ms-flex: 1 0 98%; /* IE 10 */
-webkit-flex: 1 0 98%; /* NEW - Chrome */
flex: 1 0 98%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.cookiewarning-container {
-webkit-justify-content: center!important;
justify-content: center!important;
}
.header-visual-home,
.header-visual-home .payoffheader,
.header-visual-home .imgdiv img {
height: calc(0.3 * 450px);
}
.header-visual,
.header-visual .payoffheader,
.header-visual .imgdiv img {
height: calc(0.75 * 450px);
}
}/*=== min-max font-size for min-max viewports, scales everything in between: https://css-tricks.com/snippets/css/fluid-typography/ ===*/
/* SET MIN FONT_SIZES HERE */
html { font-size: 15px }
H1 { font-size: 32px; }
.h1-to-h2 { font-size: 26px; }
H2, .h2,
.actueel-item-tekst h3 { font-size: 26px; }
H3 { font-size: 18px; }
H4 { font-size: 18px; }
H5 { font-size: 16px; }
@media screen and (min-width: 320px) {
/* CALCULATE (MIN_FONT + (MAX_FONT - MIN_FONT) X ((VIEWPORT_WIDTH - MIN_SCREEN) / (MAX_SCREEN - MIN_SCREEN))) */
H1 { font-size: calc(32px + (44 - 32) * ((100vw - 320px) / (1920 - 320))); }
.h1-to-h2 { font-size: calc(26px + (28 - 26) * ((100vw - 320px) / (1920 - 320))); }
H2, .h2,
.actueel-item-tekst h3 { font-size: calc(26px + (28 - 26) * ((100vw - 320px) / (1920 - 320))); }
H3 { font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320))); }
H4 { font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320))); }
H5 { font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320))); }
}
@media screen and (min-width: 1920px) {
/* SET MAX FONT_SIZES HERE (CHANGE MAX SCREEN SIZE IF YOU NEED) */
html { font-size: 16px; }
H1 { font-size: 44px; }
.h1-to-h2 { font-size: 28px; }
H2, .h2,
.actueel-item-tekst h3 { font-size: 28px; }
H3 { font-size: 22px; }
H4 { font-size: 22px; }
H5 { font-size: 20px; }
}
/* ====== OTHER MEDIA QUERIES ===== */
@media all and (max-width:1350px) {
.header-visual-home,
.header-visual-home .payoffheader,
.header-visual-home .imgdiv img,
.header-visual,
.header-visual .payoffheader,
.header-visual .imgdiv img {
height: calc(0.75 * 450px);
}
}
@media all and (max-width:1000px) {
.header-visual-home,
.header-visual-home .payoffheader,
.header-visual-home .imgdiv img,
.header-visual,
.header-visual .payoffheader,
.header-visual .imgdiv img {
height: calc(0.5 * 450px);
}
.mobilenietzichtbaar {
display: none;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.mobilewelzichtbaar {
display: inherit;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.bovenbalk .eigen-social-media {
width: 100%;
}
.bovenbalk .tel-button-container {
margin-left: 6.5em;
}
.site-submenu {
max-width: initial;
}
.site-submenu ul {
width: initial;
}
.site-submenu li {
padding: 0;
}
.site-submenu li:last-child {
padding: 0;
}
}
@media all and (max-width:900px) {
}
@media all and (max-width: 600px) {
:root {
--standaard-padding-margin: 1.5em;
}
.header-visual-home,
.header-visual-home .payoffheader,
.header-visual-home .imgdiv img,
.header-visual,
.header-visual .payoffheader,
.header-visual .imgdiv img{
height: calc(0.3 * 450px);
}
.actueel-item-tekst h3:before,
.hoofdstuk-item-overzicht h2:before,
.hoofdstuk-item-detail h2:before {
left: -1.15em;
}
.div2-12.partner-logo {
margin-bottom: 0;
min-width: 26%;
-ms-flex: 1 0 26%;
-webkit-flex: 1 0 26%;
flex: 1 0 26%;
}
.uitlijning-links,
.uitlijning-rechts {
width: 60%;
}
}/*============== DEFAULT LINK KLEUREN =======================*/
.bg_body > a:not([class*="tekst_"]),
.bg_body > p > a:not([class*="tekst_"]),
.bg_body > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]),
.bg_body > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_body > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_body > div:not([class*="bg_"]) > p > a,
.bg_body > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_body > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]),
.bg_body > div > div > div > p > a:not([class*="tekst_"])
{
color: rgb(248,158,28);
}
.bg_body > a:not([class*="tekst_"]):hover,
.bg_body > p > a:not([class*="tekst_"]):hover,
.bg_body > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]):hover,
.bg_body > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_body > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_body > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_body > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_body > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_body > div > div > div > p > a:not([class*="tekst_"]):hover
{
color: rgb(207,198,195);
}
.bg_wit > a:not([class*="tekst_"]),
.bg_wit > p > a:not([class*="tekst_"]),
.bg_wit > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]),
.bg_wit > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_wit > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_wit > div:not([class*="bg_"]) > p > a,
.bg_wit > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_wit > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]),
.bg_wit > div > div > div > p > a:not([class*="tekst_"])
{
color: rgb(248,158,28);
}
.bg_wit > a:not([class*="tekst_"]):hover,
.bg_wit > p > a:not([class*="tekst_"]):hover,
.bg_wit > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]):hover,
.bg_wit > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_wit > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_wit > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_wit > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_wit > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_wit > div > div > div > p > a:not([class*="tekst_"]):hover
{
color: rgb(176,168,166);
}
.bg_grijs > a:not([class*="tekst_"]),
.bg_grijs > p > a:not([class*="tekst_"]),
.bg_grijs > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]),
.bg_grijs > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_grijs > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_grijs > div:not([class*="bg_"]) > p > a,
.bg_grijs > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_grijs > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]),
.bg_grijs > div > div > div > p > a:not([class*="tekst_"])
{
color: rgb(248,158,28);
}
.bg_grijs > a:not([class*="tekst_"]):hover,
.bg_grijs > p > a:not([class*="tekst_"]):hover,
.bg_grijs > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]):hover,
.bg_grijs > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_grijs > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_grijs > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_grijs > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_grijs > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_grijs > div > div > div > p > a:not([class*="tekst_"]):hover
{
color: rgb(90,88,88);
}
.bg_zwart > a:not([class*="tekst_"]),
.bg_zwart > p > a:not([class*="tekst_"]),
.bg_zwart > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]),
.bg_zwart > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_zwart > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_zwart > div:not([class*="bg_"]) > p > a,
.bg_zwart > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_zwart > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]),
.bg_zwart > div > div > div > p > a:not([class*="tekst_"])
{
color: rgb(248,158,28);
}
.bg_zwart > a:not([class*="tekst_"]):hover,
.bg_zwart > p > a:not([class*="tekst_"]):hover,
.bg_zwart > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]):hover,
.bg_zwart > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_zwart > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_zwart > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_zwart > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_zwart > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_zwart > div > div > div > p > a:not([class*="tekst_"]):hover
{
color: rgb(207,198,195);
}
.bg_a > a:not([class*="tekst_"]),
.bg_a > p > a:not([class*="tekst_"]),
.bg_a > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]),
.bg_a > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_a > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_a > div:not([class*="bg_"]) > p > a,
.bg_a > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_a > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]),
.bg_a > div > div > div > p > a:not([class*="tekst_"])
{
color: rgb(90,88,88);
}
.bg_a > a:not([class*="tekst_"]):hover,
.bg_a > p > a:not([class*="tekst_"]):hover,
.bg_a > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]):hover,
.bg_a > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_a > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_a > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_a > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_a > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_a > div > div > div > p > a:not([class*="tekst_"]):hover
{
color: rgb(235,230,229);
}
.bg_b > a:not([class*="tekst_"]),
.bg_b > p > a:not([class*="tekst_"]),
.bg_b > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]),
.bg_b > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_b > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_b > div:not([class*="bg_"]) > p > a,
.bg_b > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_b > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]),
.bg_b > div > div > div > p > a:not([class*="tekst_"])
{
color: rgb(207,198,195);
}
.bg_b > a:not([class*="tekst_"]):hover,
.bg_b > p > a:not([class*="tekst_"]):hover,
.bg_b > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]):hover,
.bg_b > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_b > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_b > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_b > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_b > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_b > div > div > div > p > a:not([class*="tekst_"]):hover
{
color: rgb(255,255,255);
}
.bg_c > a:not([class*="tekst_"]),
.bg_c > p > a:not([class*="tekst_"]),
.bg_c > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]),
.bg_c > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_c > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_c > div:not([class*="bg_"]) > p > a,
.bg_c > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_c > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]),
.bg_c > div > div > div > p > a:not([class*="tekst_"])
{
color: rgb(235,230,229);
}
.bg_c > a:not([class*="tekst_"]):hover,
.bg_c > p > a:not([class*="tekst_"]):hover,
.bg_c > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]):hover,
.bg_c > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_c > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_c > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_c > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_c > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_c > div > div > div > p > a:not([class*="tekst_"]):hover
{
color: rgb(255,255,255);
}
.bg_d > a:not([class*="tekst_"]),
.bg_d > p > a:not([class*="tekst_"]),
.bg_d > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]),
.bg_d > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_d > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_d > div:not([class*="bg_"]) > p > a,
.bg_d > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_d > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]),
.bg_d > div > div > div > p > a:not([class*="tekst_"])
{
color: rgb(248,158,28);
}
.bg_d > a:not([class*="tekst_"]):hover,
.bg_d > p > a:not([class*="tekst_"]):hover,
.bg_d > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]):hover,
.bg_d > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_d > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_d > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_d > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_d > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_d > div > div > div > p > a:not([class*="tekst_"]):hover
{
color: rgb(90,88,88);
}
.bg_e > a:not([class*="tekst_"]),
.bg_e > p > a:not([class*="tekst_"]),
.bg_e > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]),
.bg_e > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_e > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_e > div:not([class*="bg_"]) > p > a,
.bg_e > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_e > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]),
.bg_e > div > div > div > p > a:not([class*="tekst_"])
{
color: rgb(248,158,28);
}
.bg_e > a:not([class*="tekst_"]):hover,
.bg_e > p > a:not([class*="tekst_"]):hover,
.bg_e > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]):hover,
.bg_e > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_e > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_e > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_e > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_e > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_e > div > div > div > p > a:not([class*="tekst_"]):hover
{
color: rgb(90,88,88);
}
.bg_transparent > a:not([class*="tekst_"]),
.bg_transparent > p > a:not([class*="tekst_"]),
.bg_transparent > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]),
.bg_transparent > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_transparent > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_transparent > div:not([class*="bg_"]) > p > a,
.bg_transparent > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]),
.bg_transparent > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]),
.bg_transparent > div > div > div > p > a:not([class*="tekst_"])
{
color: rgb(248,158,28);
}
.bg_transparent > a:not([class*="tekst_"]):hover,
.bg_transparent > p > a:not([class*="tekst_"]):hover,
.bg_transparent > div:not([class*="bg_"]) > span > p > a:not([class*="tekst_"]):hover,
.bg_transparent > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_transparent > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_transparent > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_transparent > div:not([class*="bg_"]) > div:not([class*="bg_"]) > a:not([class*="tekst_"]):hover,
.bg_transparent > div:not([class*="bg_"]) > div:not([class*="bg_"]) > p > a:not([class*="tekst_"]):hover,
.bg_transparent > div > div > div > p > a:not([class*="tekst_"]):hover
{
color: rgb(176,168,166);
}