@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&display=swap');
@font-face {  font-family: 'fontello';  src: url('../_font/fontello.eot?55751161');  src: url('../_font/fontello.eot?55751161#iefix') format('embedded-opentype'), url('../_font/fontello.woff2?55751161') format('woff2'), url('../_font/fontello.woff?55751161') format('woff'), url('../_font/fontello.ttf?55751161') format('truetype'), url('../_font/fontello.svg?55751161#fontello') format('svg');  font-weight: normal;  font-style: normal;  }
[class^="icon-"]:before, [class*=" icon-"]:before {font-family: "fontello";font-style: normal;font-weight: normal;color: #fff;font-size: 35px;display: inline-block;text-decoration: inherit;width: 1.25em;margin-right: .5em;text-align: center;font-variant: normal;text-transform: none;line-height: 1.25em;margin-left: .5em;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

.icon-info-circled:before { content: '\e800'; } /* '' */
.icon-chat:before { content: '\e801'; } /* '' */
.icon-home:before { content: '\e802'; } /* '' */
.icon-phone:before { content: '\e803'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-rss:before { content: '\f09e'; } /* '' */
.icon-menu:before { content: '\f0c9'; color: #000; font-size: 30px; margin-right: 0em; margin-left: 0em; } /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */
.icon-linkedin:before { content: '\f0e1'; } /* '' */
.icon-circle:before { content: '\f111'; } /* '' */
.icon-rss-squared:before { content: '\f143'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
.icon-tumblr:before { content: '\f173'; } /* '' */
.icon-tumblr-squared:before { content: '\f174'; } /* '' */
.icon-facebook-official:before { content: '\f230'; } /* '' */
.icon-twitter-squared:before { content: '\f304'; } /* '' */
.icon-facebook-squared:before { content: '\f308'; } /* '' */
.icon-linkedin-squared:before { content: '\f30c'; } /* '' */
:hover[class^="icon-"]:before, :hover[class*=" icon-"]:before { background-color: #fff; color: #e65300; text-decoration: none; }
.icon-linkedin:before, .icon-instagram:before, .icon-mail-alt:before { font-size: 30px; margin-top: 10px; background-color: #008aab; color: #fff; } 
 
/* BASIS WEBSITE */
html, body { width: 100%; margin: 0 auto; }
body { font-family: 'Barlow', sans-serif; line-height: 1.5rem; color: #000; font-size: 22px; }
.container { max-width: 1366px; }
:focus, .focus, .btn.focus, .btn:focus, button:focus { outline: none; box-shadow: 0 0 0 0.2rem rgba(220,83,0,.25) }

/* BASIS ELEMENTEN */
H1 { font-size: 28px; font-weight: 300; text-transform: uppercase; margin: 0; padding: 0 0 7px 0; text-align: center; }
H2 { font-size: 28px; font-weight: 300; margin: 0; padding: 0 0 7px 0; }

.contentblok H2 { font-family: 'Roboto Slab', serif; font-size: 24px; color: #000; font-weight: 400; }
footer H2 { color: #fff; }
H3 { font-size: 20px; font-weight: 400; color: #000; margin: 0; padding: 0; }
P { font-weight: 300; }
A:hover { color: #ff5100; text-decoration: none; }
.border { border: 1px solid rgba(172,190,203,0.6) !important; }
.btn { background-color: #ff5100; font-size: 20px; font-weight: 300; padding: .5rem .75rem; color: #fff; font-family: 'Roboto Slab', serif; font-weight: 400; border-radius: 0; box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); }
.btn:hover { background-color: #fff; color: #ff5100; font-weight: 500; }
.btn-licht { background-color: rgba(92,121,134,0.1); border: 0; box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); font-family: 'Roboto Slab', serif; font-size: 20px; font-weight: 500; color: #ff5100; }
.btn-licht:hover, A.btn-licht:hover { background-color: rgba(92,121,134,0.35); }

.transparent { background-color: transparent; }
.dertigprocent { background-color: rgba(172,190,203,0.3); }
.dertigprocent .btn { width: 100%; }
.twintigprocent { background-color: rgba(172,190,203,0.2); }
.tienprocent { background-color: rgba(172,190,203,0.1); }
.achtergrond { background-image: url(../_img/blauwblok.jpg); background-position: top center; background-repeat: no-repeat; background-size: cover; }
.home .tienprocent { background-color: #fff; }

/* NAVIGATIE */
.navbar { padding: 0rem 1rem; }
.nav-item { text-align: center; padding: 0; line-height: 2rem; }
.navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.5rem; padding-left: 1.5rem; }
.navbar-expand-lg .navbar-nav .nav-link:last-child { padding-right: 0rem; padding-left: 1.5rem; }
.nav-link { font-weight: 500; font-size: 18px; text-transform: uppercase; color: #5c7986; }
.nav-link:last-child { padding: .5rem 0rem .5rem 1rem; }
.nav-link:hover, .nav-link.active { color: #ff5100; font-weight: 600; }

/* SUBNAVIGATIE */
.subnav A { display: inline-block; font-size: 15px; font-weight: 400; text-transform: uppercase; color: #5c7986; padding: 0 7px; }
.subnav A:first-child { font-weight: 600; }
.subnav A:first-child:hover, .subnav A:first-child.active { font-weight: 600;}
.subnav A:first-child:after { content: '  >'; font-size: 19px; }
.subnav A:hover, .subnav A.active { color: #ff5100; font-weight: 600; }

/* FANCYBOX */
.card { height: 100%; border-radius: 0; }
.fotobox { transform: translateZ(0); overflow: hidden; }

/* SWIPER */
.swiper-container { width: auto; height: 100%; margin: 0 -15px !important; }
.swiper-button-next:after, .swiper-button-prev:after { color: #fff; text-shadow: 0 0 3px #5c7986; }
.swiper-button-next:before, .swiper-button-prev:before { text-shadow: 0 0 3px #5c7986; }
/*.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { left: 45% !important; bottom: 0; }*/
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 20px 10px !important; }
.swiper-pagination { display: flex; flex-direction: row; }
.swiper-pagination-bullet { width: 17px !important; height: 17px !important; background: #fff; opacity: 1 !important; }
.swiper-pagination-bullet-active, .nieuwwerk .swiper-pagination-bullet-active { background: #ff5100 !important; }

.nieuwwerkswiper { width: 100%; height: 100%; }
.nieuwwerkswiper .swiper-slide { /* text-align: center; font-size: 18px; background: #fff; */
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.nieuwwerkswiper .swiper-slide:nth-child(even) > A { margin-top: 0px; }

.nieuwwerkswiper>.swiper-pagination-bullets { bottom: -18px; }
.nieuwwerkswiper .swiper-pagination-bullet { background: #5c7986; }



/* BLOKNAVIGATIE */
.logoblok { background-image: url(../_img/blauwblok.jpg); background-repeat: no-repeat; background-size: cover; padding-top: 40px; }
.diensten { background-color: #000; }
.diensten UL { list-style: none; margin: 0; padding: 30px 8px; }
.diensten UL LI A { color: #fff; text-transform: uppercase; font-weight: 500; font-size: 26px; line-height: 4rem; }
.diensten UL LI A:hover, .diensten UL LI A.active { background-image: url(../_img/pijlactive.png); background-repeat: no-repeat; background-position: -8px -5px; background-size: 25px; margin-left: -23px; padding-left: 25px; color: #ff5100; }

/* CONTENT */
.bol { border-radius: 50%; }
.bol.img-fluid { max-width: 50%; }
.contentblok > DIV { min-height: auto; }
.contentblok P { font-size: 16px; font-weight: 300; line-height: 1.25rem; }

/* PORTFOLIOBLOK */
.blok { font-size: 16px; color: #000; width: 100%; padding-bottom: 100%; position: relative; border: 0.25px solid rgb(230,235,239); }
.card-img-overlay { position: absolute; right: 0; bottom: 0; left: 0; text-align: center; height: 100%; }
.blok:hover > .card-img-overlay { background-color: rgba(255,81,0,0.5); }
.card-title { font-family: 'Roboto Slab', serif; font-weight: 600; background-color: #fff; box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); display: unset; padding: 3px 10px; margin-bottom: .35rem; line-height: 1.5em; text-transform: uppercase; }
.card-text { font-weight: 400; margin: 0; padding: 0; line-height: 1.5rem; background-color: #fff; box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); display: unset; padding: 3px 10px; text-transform: lowercase; font-size: 17px; }

.portfoliodetail { color: #000; background-color: #fff; box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); padding: 5px 30px; margin-bottom: .25rem; }
.portfoliodetail H1 { font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 19px; line-height: 1.5em; text-transform: uppercase; margin: 0; padding: 0; color: #000; }
.wit { background-color: #fff; }
.portfoliodetails H2 { font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 16px; padding: 0; margin: 0; text-transform: unset; }
.portfoliodetails H3 { font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 16px; padding: 0; margin: 0; text-transform: unset; }
.portfoliodetails P { font-size: 16px; padding:0 0 20px 0; margin: 0; }

.blokjesnav { width: 116px; height: 75px; background-image: url(/_img/blokjes-grijs-blauw.png); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.blokjesnav:before { display: inline-block; content: ' '; }
:hover.blokjesnav { background-image: url(/_img/blokjes-oranje.png); }

.blokje { border: 1px solid #f7f8fa; }

/* WAT */
.pijl { position: absolute; right: 45%; top: 0; }
/* .wat H1 { font-family: 'Roboto Slab', serif; text-transform: unset; font-size: 18px; color: #5c7986; font-weight: 500; } */
.wat P { font-size: 16px; margin:0; padding: 0; }
.tekstblok { line-height: 1.5rem; min-height: 100%; }

.tekstblok IMG { max-width: 100%; height: unset !important;}
.tekstblok IMG.pijl { border: 0; }
.tekstblok H2 { font-family: 'Roboto Slab', serif; font-weight: 400; text-transform: unset; font-size: 18px; padding-bottom: 30px; }
.toelichting .wit H2 { font-family: 'Roboto Slab', serif; font-weight: 400; text-transform: unset; font-size: 18px; padding-bottom: 20px; color: #000; }
.toelichting .wit P { line-height: 1.5em; }
.tekstblok P { font-weight: 300; }
.tekstblok B { font-weight: 400; text-transform: uppercase; }
.tekstblok UL { list-style: none; margin: 0 0 0 13px; padding: 0; }
.tekstblok UL LI { font-size: 16px; font-weight: 300; }
.tekstblok UL LI::before { content: "•"; color: #000; display: inline-block; width: 1em; margin-left: -1.5em; margin-right: 0.5em; text-align: right; direction: rtl; }
.tekstblok A.btn, .toelichting .tekstblok A.btn  { background-color: #ff5100; padding: 15px 25px; box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); color: #fff; border-radius: 0; border: 1px solid #ff5100; font-family: 'Roboto Slab', serif; font-size: 20px; font-weight: 400; margin-top: 10px; }
.tekstblok A.btn:hover { background-color: #fff; color: #ff5100; }

.tekstblok.profielfotoblok { background-image: none; background-color: #fff; }
.tekstblok.profielfotoblok H2 { font-family: 'Roboto Slab', serif; text-transform: unset; font-size: 18px; color: #5c7986; font-weight: 400; margin: 0; padding: 0 0 40px 0; }
.tekstblok.profielfotoblok P { font-family: 'Roboto Slab', serif; text-transform: unset; font-size: 18px; color: #5c7986; font-weight: 400; margin: 0; padding: 0 0 25px 0; }
.tekstblok.profielfotoblok .btn { margin-top: 0; padding: 5px 20px; }
.tekstblok.profielfotoblok .btn-licht { padding: 15px 50px; }

.toelichting H2 { font-family: 'Roboto Slab', serif; font-size: 24px; text-transform: unset; font-weight: 400; color: #5c7986; }
.toelichting .tekstblok.lijn { border: 1px solid rgb(230,235,239); }

/* KLANTEN */
/* .klanten H2 { font-family: 'Roboto Slab', serif; font-size: 24px; text-transform: unset; font-weight: 400; color: #5c7986; margin: 0; padding: 0; } */
.klanten H3 { font-family: 'Roboto Slab', serif; font-size: 16px; text-transform: unset; font-weight: 500; color: #000; margin: 0; padding: 0; }
.klanttekst { font-size: 16px; font-weight: 300; background-color: #fff; box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35); }

/* FORMULIER */
form { font-size: 16px; font-family: 'Barlow', sans-serif; line-height: 1.5em; color: #000; width: 100%; }
.text-muted { color: #000 !important; }
.form-control { border-radius: 0; }
label { margin-bottom: 0; font-family: 'Roboto Slab', serif; font-weight: 400; }

/* FOOTER */
.zwart { background-color: #000; }
footer P, footer A { font-size: 24px; font-weight: 300; color: #fff; line-height: 2.25rem; }
footer B { font-weight: 600; }
footer A:hover { color: #ff5100; }

/* ADMIN */
#admindiv { font-size: 14px; line-height: 16px; display : none; background-color:#eeeeee; filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75; position:fixed; border:1px solid #000; width : 250px; left : 10px; top: 80px; z-index: 1000; }
#admindiv .header { padding:2px; background-color:#e32322; color:#FFF; font-weight:bold; background-image : url(/_images/generic/sitemanager.png); background-repeat : no-repeat; background-position : right 5px center; height : 25px; border-bottom : 1px solid #000; }
#admindiv .header SPAN A { color:#FFF; font-weight:bold; text-decoration : none; }
#admindiv .body { padding:4px; }
#admindiv .body A { color : #000; font-weight : bold; }
#admindiv .body LI { list-style: none; }
.edit { color : #000; position : absolute; margin-left: -20px; margin-top: -20px;cursor:help; }
span.editbtn { cursor:help; position : absolute; width : 22px; height : 11px; margin: 0; padding: 0; margin-left: -12px !important; margin-top: -12px !important; display : inline !important; }


@media (min-width: 992px){
    #admindiv { display : block; }   
    .navbar-nav { margin-left: 0rem;  }
    .contentblok > DIV { min-height: 400px; }
}

@media (min-width: 567px){
    .nieuwwerkswiper .swiper-slide:nth-child(even) > A { margin-top: 40px; }
    H1 { font-size: 38px; }
    H2 { font-size: 38px; }  
    .diensten UL { padding: 30px 25px; }
    .diensten UL LI A { font-size: 32px; }  
    .diensten UL LI A:hover, .diensten UL LI A.active { margin-left: -40px; padding-left: 40px; } 
}