/* Copyright 2025 Drop Alive Creative Studio. All rights reserved. */ /* @viewport{width:device-width;zoom:1;max-zoom:1;user-zoom:fixed;} */

/* RESET BROWSER DEFAULT STYLES */
*,*::before,*::after{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
border:none;
outline:none;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-o-text-size-adjust:none;
-ms-text-size-adjust:none;
text-size-adjust:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}

/* GENERAL STYLES */
body{}

#outerDiv{
display:block;
position:relative;
width:100%;
margin:0 auto;
overflow:hidden;
}

.lbx, /* Lay-out box*/
.cbx, /* Content box*/
.pbx, /* Padding box*/
.bx,
.container{display:block;position:relative;width:100%;margin:0 auto;padding:0;}

.bx{max-width:100%;}

.responsive .mdisplay{
display:none;	
}

img{
max-width:100%;
height:auto;	
}

.alignleft{
float:left;	
}

.alignright{
float:right;	
}

.aligncenter{
float:none;
clear:both;
margin:0 auto;
display:block;
}

.alignnone{
float:none;
clear:both;
display:block;	
}

img.alignleft{
margin:0 1em 1em 0;	
}
.mobile img.alignleft{
width:40%;
margin:0 1em 1em 0;	
}

img.alignright{
margin:0 0 1em 1em;	
}
.mobile img.alignright{
width:40%;
margin:0 0 1em 1em;	
}

img.aligncenter{
margin:1em auto 1em auto;	
}
.mobile img.aligncenter{
width:70%;
margin:1em auto 1em auto;	
}

/* FORM-styling */
form{
font-family:inherit;
font-size:1.6em;
}

input,
textarea,
select,
select option{
font-family:inherit;
font-size:inherit;
font-weight:normal;
padding:0.75em 0.75em;
margin:0 0 0.333em 0;
}
input[type=text],
textarea{
border-width:1px;
border-style:solid;
border-color:#333;
}
input[type-submit]{
background:url('..');	
}

.contactf{
display:block;
width:100%;
position:relative;
}
.contactf h4{
/*font-size:1.8em;*/	
}
.contactf p,
.contactf p.error{
/*font-size:1.2em;*/	
}
.contactf p.error{
padding:5px;
border:1px solid #F00;
background:#FFF;
color:#F00;
}
.contactf form{
display:block;
width:100%;
margin:0 auto;
border:1px solid #BBB;
}
.contactf fieldset{
padding:2em;
margin-bottom:1.25em;
}
.contactf label,
.contactf label span{
/*font-size:1em;*/
display:block;
padding-bottom:0.5em;
}
.contactf label{
width:100%;
float:left;
position:relative;	
}
.contactf label span{
display:none;
float:left;
width:20%;
text-align:right;
padding-right:1em;
padding-top:0.333em;
}
.contactf span.error{
display:none;
float:none;
clear:both;
width:auto;
text-align:left;
padding-left:1em;
position:absolute;
top:0.65em;
right:10%;
border:1px solid #F00;
background:#FFF;
color:#F00;
}
.contactf fieldset input[type=text],
.contactf fieldset textarea,
.contactf input[type=text],
.contactf textarea{
float:left;
width:100%;
border-width:1px;
border-style:solid;
border-color:#CCC;
}
.contactf fieldset input[type=text]:hover,
.contactf fieldset textarea:hover,
.contactf input[type=text]:hover,
.contactf textarea:hover{
border-color:#888;
}
.contactf fieldset input[type=text]:active,
.contactf fieldset input[type=text]:focus,
.contactf fieldset textarea:active,
.contactf fieldset textarea:focus,
.contactf input[type=text]:active,
.contactf input[type=text]:focus,
.contactf textarea:active,
.contactf textarea:focus{
outline:1px solid #6CF;
background:#ECECEC;
}
.contactf select{
padding:0.333em;
border:1px solid #333;	
}
.contactf input[type=checkbox]{
margin-right:7px;
}

/*label.checkbx{
position:relative;
width:70%;
}

label.checkbx span{
display:block;
position:absolute;
left:38%;
float:left;
width:35%;
text-align:left;
padding-right:0em;
padding-top:0m;
padding-bottom:0.333em;
}*/

.contactf .formbuttons{
display:block;
margin-left:0%;
overflow:hidden;
padding:0 0 2em 2em;	
}
.contactf .formbuttons input[type=submit],
.contactf .formbuttons input[type=reset]{
padding:10px;
cursor:pointer;
border-width:1px;
border-style:solid;
border-color:#BBB;
background:#ECECEC url('..');
clear:both;	
}

label.screenReader,
label.email2{
display:none;	
}
/* Eo FORM-styling */

#header,
#navigation,
#content,
#main,
#sidebar,
#footer{
display:block;
max-width:100%;
}

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

#footer{
float:none;
clear:both;
overflow:hidden;
}

/* GENERAL COLORS */
body{
background:#FFF;
color:#000;	
}

h1,#breadcrumbs a,
.section-heading,
.home-blog-heading a,
.home-blog-heading a:hover,
#content a{color:#BD0A26;}
#weetjes .section-heading{color:#FFF;}
h2{}
h3{}
h4{}
h5{}
h6{}

p{}

em{color:#777;}
strong{}

a,
p a{
color:#777;	
}

a:hover,
p a:hover{
color:#00F;
}

#breadcrumbs a,
#breadcrumbs span{
	
}

form.contactf{}
.contactf input[type=text],
.contactf textarea{
border-color:#000;	
}

.navimenu a{
background:;
color:#FFF;
border-bottom:0px solid #CCC;
}

.navimenu .current-menu-item > a{
background:#f0ece1;
color:#BD0A26;
}

.navimenu a:hover,
.navimenu a:active{
background:#000;
color:#777;
}

.navimenu li li a{
background:#f0ece1;
color:#000;
}

.navimenu li:hover li a:hover,
.navimenu li:hover li a:active{
background:#000;
color:#fff;
}

.invalid input,
.invalid textarea,
.invalid select{
background:#F99;
color:#333;
}

#navigation, #navmenu{
background:#894238;
/*overflow:hidden;*/	
}

#index #main,
.home #main,
#imgbanner{
background:#f0ece1;
}
#hlights{
background:#FFF;	
}
#hlights .col-12_4:last-child .cbx{
background:#BD0A26;
color:#FFF;	
}
#hlights .col-12_4:last-child{background:#BD0A26;}

#aankondiging{
background:#ececee url('../images/pootafdruk-patroon.png');	
}

#footer{
background:#000;
color:#FFF;
overflow:hidden;
}
#footer a,
#footer a:hover{
color:#FFF;	
}
#copyright,
#copyright a,
#copyright a:hover{
color:#777;	
}

/* GENERAL TYPOGRAPHY */
body{
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
font-size: 62.5%; /* basefont-size is 16px = 100%, font-size of 62.5% = 10px */
line-height:100%;
}

h1,h2,h3,h4,h5,h6{
font-weight:normal;
line-height:1.333em;
margin:0 0 1em 0;	
}

h1{
font-size:2.8em;
font-weight:bold;
}

h2{
font-size:1.75em;
font-weight:bold;
}

h3{
font-size:1.5em;
font-weight:bold;
margin:0 0 0.3em 0;
}

h4{
font-size:1.25em;
font-weight:normal;
}
.section-heading,
.home-blog-heading{
font-size:2.4em;
font-weight:normal;	
}

h5{
font-size:1.15em;
font-weight:bold;
font-style:italic;
}

h6{
font-size:1.1em;
font-style:italic;
}

#heading .site-heading{
font-size:1.55em;
font-weight:normal;
margin-bottom:0.333em;
padding:0;
}

.site-heading a,
.site-heading a:hover{
font-size:inherit;
text-decoration:inherit;
line-height:inherit;
margin:inherit;
padding:inherit;
color:inherit;	
}

#description .site-description{
font-size:1.35em;
font-weight:normal;
margin:0;
padding:0;
}

#sidebar .widget-heading{
font-size:1.35em;
}

p,li{
font-size:1.6em;
line-height:1.45em;
}

p{
margin:0 0 1.25em 0;
padding:0;
}

p.intro{
font-style:italic;
}

#breadcrumbs a,
#breadcrumbs span,
.meta,
.postmetadata,
.s-postnav{
font-size:1.4em;
line-height:1.333em;
margin:0 0 2em 0;	
}

em{
font-style:italic;
}

strong{
font-weight:bold;
}

a,
p a{
font-size:inherit;
text-decoration:underline;	
}

a:hover,
p a:hover{
text-decoration:underline;	
}

ul, ol{	
margin:0 0 1.25em 3.45em;	
}

ul{
margin:0 0 1em 3.5em;
text-indent:0.25em;
}

ul li{
list-style:outside;
list-style-type:disc;	
}

ol li{
list-style:outside;
list-style-type:decimal;	
}

li *{
font-size:100%;	
}

#content ul,
#content ol,
#footer ul{
text-indent:0;	
}

.navimenu li{
font-size:1.4em;	
}
.navimenu li li,
.navimenu li li li{
font-size:1em;
}

.navimenu a{
font-size:inherit;
text-align:left;
text-transform:none;
white-space: nowrap;
text-decoration:none;
}

#footer ul{
margin:0;
padding:0;	
}

#footer li{
list-style:none;
margin:0;
padding:0;	
}

/* OTHER STYLES */
#navmenu{
display:none;
height:42px;
}

/* Column layouts */
.col2, .col3, .col4, .col5, .col6, .col7, .col8{display:block; clear:both; width:100%;}
.col{display:block; float:left; padding-bottom:3em;}

.col2 .col{width:50%; margin:0 0%; padding-left:0%; padding-right:0%;}
.col3 .col{width:33.33%; margin:0 0%; padding-left:0%; padding-right:0%;}
.col4 .col{width:25%; margin:0 0%; padding-left:0%; padding-right:0%;}
.col5 .col{width:20%; margin:0 0%; padding-left:0%; padding-right:0%;}
.col6 .col{width:16.66%; margin:0 0%; padding-left:0%; padding-right:0%;}
.col7 .col{width:14.28%; margin:0 0%; padding-left:0%; padding-right:0%;}
.col8 .col{width:12.5%; margin:0 0%; padding-left:0%; padding-right:0%;}

/*.col{
background:#333;	
}

.col:last-child{
background:#999;	
}*/

/* Grid-system */
.row{display:block; clear:both; overflow:hidden; margin:0 auto;}

[class *="row-"]{
display:block;
clear:both;
margin:0 auto;
position:relative;
overflow:hidden;
padding:8px 8px;
}

[class *="col-"]{
display:inline;
float:left;
position:relative;
padding:8px 8px; /* Column-gutter: the spacing between columns. For example: Set to 5px creates a 10px gutter between columns */
}

.np-t{padding-top:0}
.np-l{padding-left:0}
.np-r{padding-right:0}
.np-lr{padding-left:0;padding-right:0}
.np-b{padding-bottom:0}
.np-tb{padding-top:0;padding-bottom:0}
.np{padding:0;}

/* Debug styles: comment-out or remove entirely to disable */
.showGrid [class *="col-"],
.showGrid [class *="row-"],
.showGrid .row{background:#ECECEC;border:0px solid #FFF;overflow:hidden;}
.showGrid .cbx{background:#FCF;border:0px solid #BBB;min-height:50px;}
.showGrid .row{background:rgba(128,128,128,0.4);}
.showGrid .cbx{background:rgba(240,150,240,0.6);}
/* Eo Debug styles */

.pbx{padding:16px;}
#weetjes .pbx{padding:32px;}
#weetjes .col-12_4{
width:100% !important;
}

.col-12_1, .row-12_1{width:8.334%;}
.col-12_2, .row-12_2{width:16.666%;}
.col-12_3, .row-12_3{width:25%;}
.col-12_4, .row-12_4{width:100%;}
.col-12_5, .row-12_5{width:41.665%;}
.col-12_6, .row-12_6{width:50%;}
.col-12_7, .row-12_7{width:58.335%;}
.col-12_8, .row-12_8{width:100%;}
.col-12_9, .row-12_9{width:75%;}
.col-12_10, .row-12_10{width:83.334%;}
.col-12_11, .row-12_11{width:91.666%;}
.col-12_12, .row-12_12{width:100%;}

.col-16_1, .row-16_1{width:6.25%;}
.col-16_2, .row-16_2{width:12.5%;}
.col-16_3, .row-16_3{width:18.75%;}
.col-16_4, .row-16_4{width:25%;}
.col-16_5, .row-16_5{width:31.25%;}
.col-16_6, .row-16_6{width:37.5%;}
.col-16_7, .row-16_7{width:43.75%;}
.col-16_8, .row-16_8{width:50%;}
.col-16_9, .row-16_9{width:56.25%;}
.col-16_10, .row-16_10{width:62.5%;}
.col-16_11, .row-16_11{width:68.75%;}
.col-16_12, .row-16_12{width:75%;}
.col-16_13, .row-16_13{width:81.25%;}
.col-16_14, .row-16_14{width:87.5%;}
.col-16_15, .row-16_15{width:93.75%;}
.col-16_16, .row-16_16{width:100%;}

.col-24_1, .row-24_1{width:4.167%;}
.col-24_2, .row-24_2{width:8.333%;}
.col-24_3, .row-24_3{width:12.5%;}
.col-24_4, .row-24_4{width:16.667%;}
.col-24_5, .row-24_5{width:20.833%;}
.col-24_6, .row-24_6{width:25%;}
.col-24_7, .row-24_7{width:29.167%;}
.col-24_8, .row-24_8{width:33.333%;}
.col-24_9, .row-24_9{width:37.5%;}
.col-24_10, .row-24_10{width:41.667%;}
.col-24_11, .row-24_11{width:45.833%;}
.col-24_12, .row-24_12{width:50%;}
.col-24_13, .row-24_13{width:54.167%;}
.col-24_14, .row-24_14{width:58.333%;}
.col-24_15, .row-24_15{width:62.5%;}
.col-24_16, .row-24_16{width:66.667%;}
.col-24_17, .row-24_17{width:70.833%;}
.col-24_18, .row-24_18{width:75%;}
.col-24_19, .row-24_19{width:79.167%;}
.col-24_20, .row-24_20{width:83.333%;}
.col-24_21, .row-24_21{width:87.5%;}
.col-24_22, .row-24_22{width:91.667%;}
.col-24_23, .row-24_23{width:95.833%;}
.col-24_24, .row-24_24{width:100%;}

#clogo{display:block;text-align:center;margin:1em auto 0 auto;/*width:272px;overflow:hidden;*/}
#clogo a{display:block;width:inherit;height:inherit;}
#clogo img{width:100%;}

.recent-posts .container{
width:100%;	
}
.recent-posts .previmg{
display:block;
width:100%;	
}

#heading .site-heading{
display:none;	
}

.mobile-btn{
width:31px;
height:31px;

background:#FFF;
float:right;
margin-top:4px;
margin-right:8px;
text-indent:-9999px;
cursor:pointer;
overflow:hidden;	
}
#home-icon{background:url('../images/home-icon.svg') no-repeat;background-size:cover;}
#nav-icon{background:url('../images/menu-icon.svg') no-repeat;background-size:cover;}


#pageImage img,
.imgholder img{
width:100%;	
}

#index #main,
.home #main{
height:600px;
}

#footer h4{
font-size:1.6em;	
}
#footer-nav,
#footer-nav li{
margin:0 0 0 0;
padding:0 0 0 0;
list-style:none;
text-indent:0;


}
#footer-nav li{
font-size:1.4em;
line-height:1.75em;	
}
#footer-nav li a{
color:#FFF;	
}
#weetjes ul{
margin:0 0 0 1em;
}

#hlights .imgholder{
max-width:100%;
max-height:320px;
overflow:hidden;	
}
#hlights .imgholder img{
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
#hlights .imgholder:hover img{
-webkit-transform:scale(1.1); 
}
#hlights .imgholder{
position:relative;
overflow:hidden;
cursor:pointer;	
}
#hlights .imgholder:after{
content:'';
position:absolute;
width:44px;
height:44px;
bottom:8px;
right:8px;
z-index:999;
overflow:hidden;
background:url('../images/vergrootglas-icon.svg') no-repeat;
background-size:cover;
opacity:1;

-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
-o-transition: all 100ms ease-in;
-ms-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}

#aankondiging .imgholder{
max-width:320px;
text-align:center;
margin:0 auto;
padding-bottom:2em;	
}
#aankondiging .imgholder img{
margin:0 auto;
text-align:center;	
}




/* Source for media-queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
@media only screen
and (min-device-width:320px)
and (max-device-width:650px),
screen
and (min-width:320px)
and (max-width:650px) { /* Styles that will only be applied when an Apple iPhone/iPod Touch/other smartphone is detected */

/* General styles */
.responsive .bx{
width:100%;	
}

/* Colors */
body{
/*background:#ececec;*/
}

/* Typography */
body{
/*font-size:0.8em;*/
}

/* Other styles */

}



@media only screen
and (min-device-width:651px)
and (min-width:651px){ /* Styles for tablet-devices (such as iPads) */

/* General styles */
.responsive .bx{
width:100%;
}

/* Colors */
body{
/*background:#777777;*/
}
#hlights .col-12_4:last-child{background:none;}

/* Typography */
body{
/*font-size:0.7em;*/
}

/* Other styles */

.col-12_4, .row-12_4{width:33.333%;}
.col-12_8, .row-12_8{width:66.667%;}

#clogo img{width:472px;}

#header{
height:218px;	
}

#imgbanner{
width:768px;
overflow:hidden;
text-align:center;
}
#imgbanner img{
width:100%;
overflow:hidden;
}
#index #main,
.home #main{
height:290px;	
}
#hlights{
min-height:438px;
}
#hlights .imgholder{
max-height:200px;
}
#aankondiging{
min-height:275px;
text-align:center;
padding:4em 0;	
}
#footer{
min-height:300px;
overflow:hidden;	
}

}

@media only screen
and (min-device-width:320px)
and (max-device-width:768px),
screen
and (min-width:320px)
and (max-width:768px){ /* Styles only for devices of these widths
/* General styles */
.responsive .mdisplay{
display:block;	
}

a[href^=tel]{ /* overrides the default underlined style-behaviour of phone-numbers on an iphone or ipad */
color:inherit;
text-decoration:none;
}

/* Navigation menu for tablets and smartphones */
#navmenu{
display:block;
padding-top:0em;	
}

#navigation{
display:none; /* set this to 'none' to control visibility with javascript/jQuery */
width:100%;
padding:0em;
margin-top:0em;

border:0px solid #333;
}
#navigation.show{
display:block;
}

.navimenu a{
display:block;
position:relative;
}

.navimenu a:after{
content:"\232A";
position:absolute;
right:1em;
}

.navimenu,
.navimenu ul,
.navimenu li{
margin:0;
padding:0;
list-style:none;
}

.navimenu li{
display:block;
position:relative;
float:none;
}

.navimenu a{
padding:0.75em;
margin-left:0em;
}

.navimenu ul{
text-indent:0.75em;
}

.navimenu ul ul{
text-indent:1.75em;
}
}


@media only screen
and (min-width:769px)
and (min-device-width:769px){
.responsive .bx{
width:96em;	
}	

/* Horizontal CSS-navigation -- for every width above smartphone and tablet display-widths */
#navigation .navimenu{float:left;}
#navigation{min-height:47px;}

.navimenu a{
display:block;
text-align:center;
}

/* Main-nav-items (1st layer) */
.navimenu,
.navimenu ul,
.navimenu li{
margin:0;
padding:0;
list-style:none;
}

.navimenu li{
font-size:1.6em;
display:block;
position:relative;
float:left;
}

.navimenu a:link,
.navimenu a:visited{
margin-left:0.1em;
padding:0.75em 0.95em;
}

/* Sub-nav-items (2nd layer) */
.navimenu ul{
display:none;
}

.navimenu li:hover ul{
display:block;
position:absolute;
z-index:999;
}

.navimenu li:hover li{
display:block;
float:none;	
}

.navimenu li:hover li a:link,
.navimenu li:hover li a:visited{
/*font-size:0.9em;*/
/*background:#777;
color:#000;*/
}

/*.navimenu li:hover li a:hover,
.navimenu li:hover li a:active{
background:#000;
color:#fff;
}*/

/* Sub-subnav-items (3rd layer) */
.navimenu li:hover li ul{
display:none;
}

.navimenu li:hover li:hover ul{
display:block;
position:absolute;
left:100%;
top:0;
}

.navimenu li:hover li:hover li{
display:block;
float:none;	
}
/* Eo Horizontal navigation */

#imgbanner{
width:1220px;
}
}



@media only screen
and (min-width:1224px) { /* Styles for normal screens, desktop displays and laptops */

/* General */
.responsive .bx{
width:96em;	
}

/* Colors */
body{
/*background:#CCCCCC;*/
}

/* Typography */

/* Other styles */
#imgbanner{
width:100%;
}


}


@media only screen
and (min-width:1824px) { /* Styles for very large screens displays */

/* General */
.responsive .bx{
width:102.4em;	
}

/* Colors */
body{
/*background:#333333;*/
}

/* Typography */

/* Other styles */

}