/* Algemeen ------------------------------------------------------------------------------------------ Algemeen */
body{
width: 100%;
max-width: 1920px;
margin: 0 auto;
padding: 0;
font-family: muli, sans-serif;
font-size: 21px;
color: #061534;
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16);}

img{
float: left;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;}

a{
color: #007DD7;
text-decoration: none;
cursor: pointer;}

a.bellen #nummer{
display: none;}

a.bellen:hover #tekst{
display: none;}

a.bellen:hover #nummer{
display: inline;}

p{
width: 100%;
margin: 0;
padding: 0;
line-height: 1.5;}

ul, ol{
margin: 0;
padding: 0;
list-style-position: inside;
line-height: 1.875;}

li{
margin: 0;
padding: 0;}

H1{
clear: both;
font-size: 32px;
margin: 0;
padding: 0;
line-height: 1;}

H2{
float: left;
width: 100%;
font-size: 26px;
margin: 0;
padding: 0;
line-height: 1;}

@media screen and (max-width: 825px), @media screen and (orientation: portrait){
body{
font-size: 16px;}

H1{
font-size: 26px;}

H2{
font-size: 20px;}
}

/* Algemeen ------------------------------------------------------------------------------------------ Algemeen */
.paginabreedte{
width: 96%;
max-width: 1248px;
margin: 0 auto;}

.item-content, .image-and-text{
clear: both;
width: 96%;
max-width: 1248px;
margin: 0 auto;
padding: 0 2%;}


/* Section000 -------------------------------------------------------------------------------------- Section000 */
/* D001 (witte balk) ----------------------------- D001 */
#D001{
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
height: 40px;
background-color: #ffffff;
z-index: 10;}

#D001 img{
float: left;
height: 30px;
width: 30px;
margin: 5px 0;}

#D001 a.rechts{
float: right;}

/* Section100 -------------------------------------------------------------------------------------- Section100 */
#S100{
position: relative;
top: -40px;
margin: 0 0 -40px 0;
float: left;
width: 100%;
background-color: #F2F8FD;}

/* D101 (kop) ------------------------------------ D101 */
#D101{
position: relative;
width: 100%;
color: #626262;
background-color: #ffffff;
z-index: 2000;}

#D101 .paginabreedte{
padding: 40px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;}

#D101 .links img{
float: left;
margin: 0;
height: 80px;
width: 217px;}

#D101 p{
height: 73px;
display: table-cell;
vertical-align: bottom;
margin: 0;
line-height: 1;}

@media screen and (max-width: 825px){
#D101 .links img{
height: 50px;
width: 136px;}

#D101 p{
height: 45px;}
}

@media screen and (max-width: 600px){
#D101 .midden{
display: none;}
}

/* D102 (slider) --------------------------------- D102 */
#D102{
float: left;
width: 100%;
padding: 0 0 20px 0;
z-index: 2000;}

#slider{
float: left;
width: 100%;
margin: 0;
padding: 0;
z-index: 2000;}

#slider img{
float: left;
width: 100%;
height: 60%;
margin: 0;
padding: 0;
z-index: 2000;}

/* D103 (menu) ----------------------------------- D103 */
#D103{
float: left;
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
height: 0;
margin: -40px 0 0 0;
z-index: 3000;}

#menu{
width: 96%;
height: 40px;
max-width: 728px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;}

#menu a{
float: none;
text-align: center;
width: 32%;
border: 1px solid #B8BFC4;
background-color: #ffffff;
color: #061534;
cursor: pointer;
margin: 0;
padding: 7px 0 0 0;}

#menu a:hover{
background-color: #F2F8FD;}

@media screen and (max-width: 825px){
#menu{
width: auto;
padding: 0 40px;}

#menu a{
padding: 10px 0 0 0;}
}

/* Section200 -------------------------------------------------------------------------------------- Section200 */
/*#S200{
position: relative;}*/

#diensten, #projecten, #beheer-onderhoud{
padding: 60px 0 0 0;}

.blog-featured H1{
color: #123B96;}

@media screen and (max-width: 550px), @media screen and (orientation: portrait){
#diensten, #projecten, #beheer-onderhoud{
padding: 30px 0 0 0;}
}

/* D201 ------------------------------------------ D201 */
.blog-item{
float: left;
clear: both;
width: 100%;
margin: 0;
padding: 0;}

.blog-item:nth-child(1), .blog-item:nth-child(3), .blog-item:nth-child(12){
background-color: #F2F8FD;}

p.uitgelicht{
text-align: center;
width: 100%;
min-height: 120px;
margin: 60px 0;
color: #123B96;
font-size: 32px;
background-image: url("/images/aanhalingsteken.png");
background-position: 100% 5px;
background-size: 120px 120px;
background-repeat: no-repeat;}

.content ul, ol{
float: left;
width: 98%;
padding: 0;}

.content ul ul{
width: 98%;
margin: 0 0 0 2%;}

@media screen and (orientation: portrait){
.content{
margin: 40px auto 15px auto;}

.blog-item:nth-child(4) .content, .blog-item:nth-child(13) .content{
padding: 20px 2% 0 2%;}

.blog-item:nth-child(5) .content, .blog-item:nth-child(6) .content, .blog-item:nth-child(7) .content, .blog-item:nth-child(8) .content, .blog-item:nth-child(9) .content{
padding: 0 2%;}

.blog-item:nth-child(10) .content, .blog-item:nth-child(14) .content{
padding: 0 2% 15px 2%;}

p.uitgelicht{
min-height: 75px;
font-size: 20px;
font-weight: bold;
background-size: 75px 75px;}
}

/* item-page -------------------------------- item-page */
.kennis-delen #S100{
background-color: transparent;}

.kennis-delen .site-grid{
width: 96%;
max-width: 728px;
margin: 0 auto;
padding: 30px 2%;}

.kennis-delen .grid-child{
float: left;}

.kennis-delen .site-grid img{
float: none;
width: 50%;
margin: 0 25%;}

.kennis-delen .site-grid h1{
margin: 60px 0;}

.kennis-delen .site-grid h2{
margin: 30px 0;}

.kennis-delen .site-grid p{
clear: both;
margin: 0 0 30px 0;}

.kennis-delen .site-grid p.foto{
font-size: 0.8em;
font-style: italic;
line-height: 1.2;
text-align: center;}

.kennis-delen .site-grid ul, .kennis-delen .site-grid ol{
width: auto;
margin: 0 0 30px 20px;
list-style-position: outside;}

/* TEGELS --------------------------------------------------------------------------------- */
/* TEGEL 169 ------------------------------------------------------------------------------ */
.tegels{
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;}

.projecten .tegels, .beheer-onderhoud .tegels{
float: left;
border-bottom: 1px black solid;}

.blog-item:nth-child(11) .tegels, .blog-item:nth-child(14) .tegels{
border-bottom: none;}

.blog-item:nth-child(odd) .projecten .tegels, .blog-item:nth-child(odd) .beheer-onderhoud .tegels{
flex-flow: row-reverse wrap;}

.img-tegel{
position: relative;
width: 30%;
padding-top: 16.875%;
margin: 0 0 60px 0;}

.diensten .img-tegel, .artikelfooter .img-tegel{
/*float: left;*/
width: 32%;
/*height: auto;*/
padding-top: initial;
aspect-ratio: 16/9;
margin: 30px 0 0 0;
/*background-color: yellow;*/}

.diensten .img-tegel:nth-last-child(1), .diensten .tekst-tegel:nth-last-child(2), .diensten .img-tegel:nth-last-child(3), .artikelfooter .img-tegel:nth-child(10), .artikelfooter .img-tegel:last-child{
margin: 30px 0 60px 0;}

.tekst-tegel{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 68%;}

.diensten .tekst-tegel{
/*float: none;*/
display: inline;
position: relative;
width: 32%;
/*padding-top: 18%;*/
margin: 30px 0 0 0;
overflow: hidden;}

/*.diensten .tekst-tegel .tekst{
position: absolute;
top: 0;}*/

.projecten .tegels:last-child .tekst-tegel{
margin: 0;}

.img-tegel img{
position: absolute;
top: 0;
height: inherit;}

.projecten .img-tegel img, .beheer-onderhoud .img-tegel img{
height: auto;}

.img-tegel .tekst{
position: absolute;
bottom: 10%;
left: 5%;
width: 86%;
line-height: 1;
margin: 0;
padding: 15px 2%;
background-color: rgba(255,255,255,0.7);}

.diensten .img-tegel .tekst{
display: none;}

.projecten .tekst{
width: 32%;}

.beheer-onderhoud .tekst{
width: 100%;}

.projecten h2, .beheer-onderhoud h2{
margin: 60px 0 30px 0;}

.blog-item:nth-child(4) h2, .blog-item:nth-child(13) h2{
margin: 30px 0;}

.img-tegel h2{
font-size: 21px;
color: #123B96;
width: 100%;
margin: 0;
text-align: center;}

.diensten .tekst-tegel h3{
font-size: 21px;
width: 100%;
margin: 0;}

.projecten .tekst p{
line-height: 1;}

.projecten .tekst p:nth-child(1){
font-size: 0.8em;
font-style: italic;
margin: 0 0 10px 0;}

.projecten .tekst p:nth-child(2){
margin: 0 0 30px 0;}

.projecten .tekst p:nth-child(1)::first-line{
font-size: 1.25em;
font-style: normal;
font-weight: bold;}

.beheer-onderhoud .tekst p{
width: 100%;
margin: 0 0 30px 0;}

.beheer-onderhoud .tekst p:last-of-type{
margin: 0 0 60px 0;}

@media screen and (max-width: 1050px){
.projecten .tekst{
display: none;
width: 49%;}

.tekst:nth-child(1), .tekst:nth-child(2), .tekst:nth-child(3), .tekst:nth-child(4){
display: block;}
}

@media screen and (max-width: 925px), @media screen and (orientation: portrait){
.item-page h1{
margin: 30px 0;}

.diensten .img-tegel{
width: 49%;}

.artikelfooter .img-tegel{
width: 49%;
padding-top: 27.5625%;}

.diensten .img-tegel:nth-last-child(1), .diensten .img-tegel:nth-last-child(3){
margin: 30px 0 0 0;}

.diensten .tekst-tegel:nth-last-child(2){
margin: 30px 0 60px 0;}

.diensten .tekst-tegel{
width: 100%;
/*padding-top: initial;*/}

.diensten .tekst-tegel .tekst{
position: relative;
top: 0;}

.artikelfooter .img-tegel:nth-child(10){
margin: 30px 0 0 0;}

.img-tegel h2{
font-size: 16px;}

#projecten h1, #beheer-onderhoud h1{
margin: 0 0 -30px 0;}

/*.projecten:first-child h2, .beheer-onderhoud:first-child h2{
padding: 0;}*/

.projecten h2, .beheer-onderhoud h2{
padding: 30px 0 0 0;}

.diensten .tegels .img-tegel:nth-child(1){
order: 1;}
.diensten .tegels .tekst-tegel:nth-child(2){
order: 3;}
.diensten .tegels .img-tegel:nth-child(3){
order: 2;}
.diensten .img-tegel:nth-child(4){
order: 4;}
.diensten .tekst-tegel:nth-child(5){
order: 6;}
.diensten .img-tegel:nth-child(6){
order: 5;}
.diensten .img-tegel:nth-child(7){
order: 7;}
.diensten .tekst-tegel:nth-child(8){
order: 9;}
.diensten .img-tegel:nth-child(9){
order: 8;}
}

@media screen and (max-width: 550px), @media screen and (orientation: portrait){
.projecten .tekst:nth-child(1), .projecten .tekst:nth-child(2),.projecten .tekst:nth-child(3), .projecten .tekst:nth-child(4){
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;}

.img-tegel{
width: 50%;
margin: 0 25% 30px 25%;
padding-top: 28.125%;}

.diensten .img-tegel{
padding-top: initial;}

.tekst-tegel{
width: 100%;}

.projecten .tekst-tegel{
padding: 0 0 30px 0;}

.projecten h2, .beheer-onderhoud h2{
margin: 0 0 30px 0;}

.projecten .tekst p:nth-child(1){
margin: 10px 0 0 0;}

.projecten .tekst p:nth-child(2){
margin: 10px 0 0 0;}

.projecten .tekst p:nth-child(odd){
width: 40%;}

.projecten .tekst p:nth-child(even){
width: 58%;}
}

/* Section300 -------------------------------------------------------------------------------------- Section300 */
#S300 .img-tegel{
cursor: pointer;}

.voettekst{
clear: both;
width: 100%;
background-color: #F2F8FD;}

.voettekst p.centreer{
margin: 0;
padding: 60px 0;
text-align: center;
font-size: 26px;
font-weight: 600;}

.voettekst .container{
width: 96%;
max-width: 1248px;
margin: 0 auto;
padding: 0 2%;
font-size: 16px;
color: #B8BFC4;}

.footer1{
width: 100%;
background-color: #061534;
line-height: 1.875;}

.footer2{
width: 100%;
background-color: #27324A;}

.footer1 .container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 30px 0;}

.footer2 .container{
text-align: center;}

.footer1 .links, .footer1 .midden, .footer1 .rechts{
float: left;
width: 32%;
margin: 60px 0;
padding: 0;}

.footer1 h2{
margin: 0 0 15px 0;
line-height: 1;}

.footer1 .links ul, .footer1 p{
margin: 18px 0 0 0;}

.footer1 .links li{
list-style: none;}

.footer1 a{
color: inherit;}

.footer1 a.wit{
color: #ffffff;}

#contact.show{
float: left;
width: auto;
display: table-cell;
verical-align: middle;
border-style: none none none solid;
border-color: #B8BFC4;
background-color: #27324A;
padding: 30px;}

#page-up{
display: none;
position: fixed;
width: 40px;
height: 40px;
bottom: 20px;
right: 2%;
cursor: pointer;}

@media screen and (max-width: 825px){
.footer1 .links, .footer1 .midden, .footer1 .rechts{
width: 100%;
margin: 30px 0;}
}

@media screen and (orientation: portrait){
.voettekst p.centreer{
font-size: 20px;
font-weight: bold;}
}