@charset "utf-8";

@import "fonts.css";

/*preloader*/
.pace{-webkit-pointer-events:none; pointer-events:none; -webkit-user-select:none; -moz-user-select:none; user-select:none;}
.pace-inactive{display:none;}
.pace .pace-progress{ background:White; position:fixed;z-index:100001; top:0; right:100%; width:100%; height:5px;}
.loadOverlay{position:fixed; top:0; bottom:0; z-index:100000;  width:100%; height:100vh; transition:top 0s; transition-delay:1s;}
.loadOverlay.done{top:-9999px;}
.loadFade{width:100%; height:100%; display:table; transition:opacity 1s linear;}
.loadOverlay.done .loadFade{opacity:0;}
.loadLogo{display:table-cell; vertical-align:middle;}
.loadLogo img{width:auto; height:100px; -webkit-animation: FadeLoop 2.5s infinite; -moz-animation: FadeLoop 2.5s infinite; -o-animation: FadeLoop 2.5s infinite; animation: FadeLoop 2.5s infinite;}

@keyframes scroll {
    0% { opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(15px); opacity: 0;}
}

*{-webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale;}

html{scroll-behavior: smooth;}
html,body{width:100%; height:100%;}

body{background-color:#fff; height:100%; position:relative; font-family:'titillium_webregular'; font-size:21px; color:#3d3d3d;}

::selection{background: #aec90b; color:#FFF;}
::-moz-selection{background: #aec90b; color:#FFF;}

.noselect{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

.img-fluid{width:100%; height:auto;}

.text-shadow{text-shadow: 0 1px 2px rgba(0,0,0,0.8);}

/*backgrounds, gradients, patterns & grad divs*/
.bg-green{background-color:#175d2f;}
.bg-dark-grey{background-color:#3d3d3d;}
.bg-grad-dark-light{background: rgb(0,113,60); background: -moz-linear-gradient(top, rgba(0,113,60,1) 0%, rgba(174,201,11,1) 100%); background: -webkit-linear-gradient(top, rgba(0,113,60,1) 0%,rgba(174,201,11,1) 100%); background: linear-gradient(to bottom, rgba(0,113,60,1) 0%,rgba(174,201,11,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00713c', endColorstr='#aec90b',GradientType=0 );}
.bg-grad-light-dark{background: rgb(174,201,11); background: -moz-linear-gradient(top, rgba(174,201,11,1) 0%, rgba(0,113,60,1) 100%); background: -webkit-linear-gradient(top, rgba(174,201,11,1) 0%,rgba(0,113,60,1) 100%); background: linear-gradient(to bottom, rgba(174,201,11,1) 0%,rgba(0,113,60,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aec90b', endColorstr='#00713c',GradientType=0 );}
.bg-grad-dark-light-lr{background: rgb(0,113,60); background: -moz-linear-gradient(left, rgba(0,113,60,1) 0%, rgba(174,201,11,1) 100%); background: -webkit-linear-gradient(left, rgba(0,113,60,1) 0%,rgba(174,201,11,1) 100%); background: linear-gradient(to right, rgba(0,113,60,1) 0%,rgba(174,201,11,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00713c', endColorstr='#aec90b',GradientType=0 );}
.bg-pattern{background-image:url(../img/bg-pattern.png);}
.vert-grad{width:10px; background: rgb(174,201,11); background: -moz-linear-gradient(top, rgba(174,201,11,1) 0%, rgba(0,113,60,1) 100%); background: -webkit-linear-gradient(top, rgba(174,201,11,1) 0%,rgba(0,113,60,1) 100%); background: linear-gradient(to bottom, rgba(174,201,11,1) 0%,rgba(0,113,60,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aec90b', endColorstr='#00713c',GradientType=0 );}
/*.vert-grad{border-left:6px solid transparent; -moz-border-image: -moz-linear-gradient(top, #aec90b 0%, #00713c 100%); -webkit-border-image: -webkit-linear-gradient(top, #aec90b 0%, #00713c 100%); border-image: linear-gradient(to bottom, #aec90b 0%, #00713c 100%); border-image-slice: 1;}*/
.vert-grad.wit{background:#FFF;}

/*text*/
.text-regular{font-family:'titillium_webregular';}
.text-semibold{font-family: 'titillium_websemibold';}
.text-bold{font-family:'titillium_webbold'; font-weight:normal;}

.text-green{color:#00713c;}
.text-light-green{color:#aec90b;}

/*headings*/
h1{font-family:'titillium_webbold'; font-size:35px; line-height:40px;}
h2{font-family: 'titillium_websemibold'; font-size:30px;}
h3{font-family: 'titillium_webbold'; font-size:26px; line-height:36px;}

/*nav*/
.navigatiebalk{
    transition: background 0.3s linear, margin 0.3s linear;
}
.navigatiebalk.active{
    /* background:rgba(174,201,11,0.3); */
    background:rgba(0, 0, 0, .2);
}
.navigatiebalk.offsetted {
    margin-top: -61px;
}

.navigatiebalk .logo {
    transition: height 0.3s linear, margin 0.3s linear;
}
.navigatiebalk.active .logo {
    height: 35px;
    margin-top: 10px;
}
.navigatiebalk .toggleMenu {
    transition: margin 0.3s linear;
}
.navigatiebalk.active .toggleMenu {
    margin-top: 20px;
}

.englishPDF {
    transition: margin 0.3s linear;
}

.logo{margin-top:15px; width:auto; height:50px;}

.englishPDF{
    margin-top: 33px;
    margin-right: 15px;
    width: 33px;
    height: 21px;
}
.englishPDF a {
    display: block;
    font-size: 0;
}
.englishPDF a img {
    width: 100%;
    height: 100%;
    font-size: 0px;
}
.navigatiebalk.active .englishPDF {
    margin-top: 18px;
}

.toggleMenu{
    margin-top:35px;
    width:30px;
    height:17px;
    cursor:pointer;
    background-image:url(../img/interface/hamburger.svg);
    background-size:30px 17px;
    background-repeat:no-repeat;
}

.toggleMenu.sluit{
    background-image:url(../img/interface/ico-up.svg);
}



#navigatie-wrapper{width:100%; height:100%; position:fixed; z-index:1040; left:0; top:0; visibility:hidden; opacity:0; transition:all 0.3s linear;}
#navigatie-wrapper.active{visibility:visible; opacity:1;}
#navigatie{width:100%; height:100%;}

#menu { font-family:'ralewaybold'; font-size:0;  }
#menu a { margin-bottom:20px; line-height: 34px; border-radius: 0 !important; font-size:24px; background-color: inherit; border: none; padding: 0; }
#menu a{padding-right:10px; display:block; color:#FFF; text-decoration:none; border-right:solid 6px transparent; transition:all 0.3s linear;}
#menu a:hover, #menu a.active{border-color:#aec90b;}


/* bars */
.bar{width: 0%;}

/*content algemeen*/
.lh-1{line-height:1;}
.h2-info{font-family: 'titillium_websemibold'; font-size:20px;}
.container.content{opacity:0;}
.content-1{opacity:0;}

.w-100{width:100%;}
.h-100{height:100%;}
.w-1{width:1%;}
.h-1{height:1%;}

/*tables*/
.d-table{display:table;}
.d-table-row{display:table-row;}
.d-table-cell{display:table-cell;}

.align-middle{vertical-align:middle;}
.align-top{vertical-align:top;}

/*home*/
#home{font-size:23px;}
#home span{margin-top:-10px;}
.fullscreen-video{height:100%; width:100%; display:table;}
#video-overlay{display:table-cell; vertical-align:middle;}
#video-text{margin:0 auto;}
#video{position:absolute; right:0; bottom:0; min-width:100%; min-height:100%; width: auto; height: auto; z-index:-100;}
.home-muis{margin-left:-16px; width:3px; padding:10px 15px; height:35px; position:absolute; bottom:50px; left:50%; cursor:pointer; border:2px solid #fff; border-radius:25px; opacity:0.75; box-sizing:content-box;}
.scrollwheel{width: 3px; height: 10px; border-radius: 25%; background-color: #fff; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}


/*intro*/
#intro{font-size:18px; line-height:28px; background-color: #fff; }
#intro h2{font-size:22px; line-height:1.2;}
#signature{font-family:'djb_my_boyfriends_handwritiRg'; font-size:30px; color:#000;}
#signature-functie{margin-left:24px; margin-top:-24px; font-size:15px;}
svg#martin-de-jager{height: 68px; margin-left: 24px;}
svg#maurice-spee{height: 68px; margin-left: 24px;}

/*dossiers*/
#dossiers{font-size:17px; line-height:29px; background-image:url(../img/img-uitdagingen2023.jpg); background-size:cover; background-position:top center; background-repeat:no-repeat;}
#dossiers h3{font-size:18px; line-height:1.2; width:calc(100% - 61px);}
#dossierss p{padding-right:10px;}
.img-uitdaging img{margin-top:32px; width:auto; max-width:61px; height:38px;}


/*2017 in cijfers*/
.dashed-left{background-image:url(../img/dashed-line-xs.png); background-repeat:repeat-x; background-position:bottom;}
.dashed-left.hidden-xs{background-image:none;}

.circled-icon-wrapper, .circled-icon-wrapper-klein{margin:0 auto; width:50%; border-radius:50%; font-size:0;}
.circled-icon-wrapper-klein{margin:0 auto; width:60%;}
.circled-icon{padding:8px;}
.circled-icon-img{display:flex; justify-content:center; align-content:center; flex-direction:column; height:100%; border-radius:50%;}
.circled-icon-img img{width:auto; height:90px;}
.circled-icon-wrapper-klein .circled-icon-img img{margin:0 auto; height:40px;}
.circled-icon-wrapper-klein .circled-icon-img.liggend img{width:40px; height:auto;}

.ingezameld-cart{width:25px; height:auto;}
.ingezameld-truck{width:35px; height:auto;}

.ingezameld-type{font-family:'titillium_webbold'; font-size:26px; line-height:1;}
.ingezameld-type-aantal{display:inline; font-size:20px;}

.inzamelnetwerk, .inzamelnetwerk h3{font-family:'titillium_webbold'; font-size:20px;}

#inzamelnetwerk-total { width: 75%; }

/*inzamelnetwerk 2023*/
.inzameltabel .d-table-row .d-table-cell{border-bottom:dotted 2px #aec90b;}
.inzameltabel .d-table-row:first-child .d-table-cell{border-bottom:none;}
.inzameltabel .d-table-row:last-child .d-table-cell{border-bottom:none;}

.inzameltabel img{margin-right:1rem; width:40px; height:auto;}

/*highlights*/
#highlights { background-color: #fff; }
.highlights-prev, .highlights-next{width:25px; height:calc(100% - 140px); top:0; left:-40px; opacity:1;}
.highlights-next{right:-40px; left:auto;}
.highlights-prev a, .highlights-next a{opacity:1;}
.highlights-prev img, .highlights-next img{width:25px; height:auto;}
.highlights-next img{-webkit-transform: scaleX(-1); transform: scaleX(-1);}

.carousel-control-prev, .carousel-control-next{width:25px;}

#highligtsCarousel{font-size:17px; line-height:30px;}
#highligtsCarousel .text-bold{font-size:20px;}
#highligtsCarousel .carousel-item img{margin-top:9px; width:auto; height:74px;}
.carousel-item .image-large{display:none;}
.carousel-kop{font-size:24px !important;}
.carousel-indicators.higlights{width:100%; bottom:0;}
.carousel-indicators.higlights li{margin:0 5px; width:20px; height:20px; border-radius:50%; font-size:0; background-color:#aec90b; transition:color 0.3s linear;}
.carousel-indicators.higlights li:hover, .carousel-indicators.higlights li.active{color:#aec90b; background-color:#175d2f;}
.higlights-indicators-grad{margin-top:-26px; height:10px;}

/*inzamelcijfers*/
#inzamelcijfers-totaal { background-color: #FFF; }
h2.inzamelcijfers{font-size:30px;}
h2.inzamelcijfers .small{font-size:31px;}
.inzamelcijfers-legenda{list-style-type:none;}
.inzamelcijfers-legenda li{display:block; font-family:'titillium_websemibold'; line-height: 1;}
.inzamelcijfers-legenda li:before{margin:0 15px 0 0; width:19px; height:19px; border-radius:100%; display:inline-block; content:'-'; color:#fff; color:transparent; background-color:#FFF;}
.inzamelcijfers-legenda li:nth-child(even){margin-top:15px;}
.inzamelcijfers-legenda li:nth-child(even):before{background-color:#3d3d3d;}
.inzamelcijfers-legenda.second li:first-child:before{background: rgb(0,113,60); background: -moz-linear-gradient(left, rgba(0,113,60,1) 0%, rgba(174,201,11,1) 100%); background: -webkit-linear-gradient(left, rgba(0,113,60,1) 0%,rgba(174,201,11,1) 100%); background: linear-gradient(to right, rgba(0,113,60,1) 0%,rgba(174,201,11,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00713c', endColorstr='#aec90b',GradientType=0 );}

.inzamelcijfers-img{width:calc(100% - 15px); height:auto;}
.inzamelcijfers-titel{font-size:26px; font-family:'titillium_webbold';}
.inzamelcijfers-jaar{font-size:20px; font-family:'titillium_webbold';}
.inzamelcijfers-grafiek{margin-top:-4px; width:100%; list-style:none; font-size:0;}
.inzamelcijfers-grafiek li{margin-top:4px; height:26px; display:block; background-color:#FFF; color:#3d3d3d;}
.inzamelcijfers-grafiek li:nth-child(even){background-color:#3d3d3d; color:#FFF;}
.inzamelcijfers-grafiek.second li{padding-right:10px; height:37px; font-family:'titillium_websemibold'; font-size:18px; line-height:1.9;}

.inzamelcijfers-grafiek.second li{margin-top:4px; height:26px; display:block; background-color:#FFF; color:#FFF;}
.inzamelcijfers-grafiek.second li:nth-child(even){background-color:#3d3d3d; color:#FFF;}

.inzamelcijfers-grafiek li span{ font-size: 11px; line-height: 26px; padding: 0 10px; float: right; }
.inzamelcijfers-grafiek li.toosmall span { float: left; }

.ul-5, .ul-6, .ul-7, .ul-9{width:100%; font-size:0;}
.ul-5 li, .ul-6 li, .ul-7 li, .ul-9 li{display:inline-block; font-size:13px;}
.ul-5 li{width:20%;}
.ul-6 li{width:calc(100% / 6);}
.ul-7 li{width:calc(100% / 7);}
.ul-9 li{width:calc(100% / 9);}

/*uitdagingen*/
#uitdagingen{font-size:17px; line-height:29px; background-image:url(../img/img-uitdagingen2019.jpg); background-size:cover; background-position:top center; background-repeat:no-repeat;}
#uitdagingen h3{font-size:18px; line-height:1.2; width:calc(100% - 61px);}
#uitdagingen p{padding-right:10px;}
.img-uitdaging img{margin-top:32px; width:auto; max-width:61px; height:38px;}

/*ambities*/
.ambities-intro{font-size:28px; line-height:1.2;}
#ambities{font-size:17px; line-height:29px; background-color: #FFF;}
#ambities img{width:auto; height:94px;}
#ambities img.verrekijker{height:72px; margin:11px 0;}
#ambities img.handshake{height:82px; margin:6px 0;}
#ambities h3{font-size:25px;}

/*financieel*/
#financieel a{padding:7px 20px 8px 20px; display:inline-block; font-size:20px; color:#3d3d3d; text-decoration:none; border-radius:10px; background-color:#FFF; transition:color 0.3s linear;}
#financieel a:hover{color:#00713c;}


@media (min-width: 768px){
    /*intro*/
    svg#martin-de-jager{height: 82px; margin-left: 34px;}

    #highligtsCarousel .carousel-item img{margin-top:9px; width:auto; height:164px;}
}

@media (min-width: 992px) {
    /*backgrounds, gradients, patterns & grad divs*/
    .vert-grad{width:10px;}

    /*margins*/
    .ml-10{margin-left:10px;}

    /*headings*/
    h1{font-size:108px; line-height:100px;}
    h2{font-size:67px;}
    h3{font-size:31px; line-height:36px;}

    .englishPDF {
        margin-top: 75px;
        margin-right: 30px;
        width: 46px;
        height: 29px;
    }

    .navigatiebalk.active .englishPDF {
        margin-top: 17px;
    }

    /*nav*/
    .logo{margin-top:50px; height:80px;}
    .toggleMenu{margin-top:79px; width:40px; height:23px; background-size:40px 23px;}

    #menu li{font-size:34px;}
    #-menu li a{padding-right:15px;}

    /*content algemeen*/
    .h2-info{font-size:40px;}

    /*home*/
    #home{font-size:40px;}

    /*intro*/
    #intro{font-size:21px; line-height:33px;}
    #intro h2{font-size:46px; line-height:55px;}
    #signature{font-size:40px;}
    #signature-functie{margin-left:0px; margin-top: -24px; font-size:18px;}

    /*2017 in cijfers*/
    .dashed-left, .dashed-left.hidden-xs{height:100%; background-image:url(../img/dashed-line.png); background-repeat:repeat-y; background-position:left;}
    .dashed-right{height:100%; background-image:url(../img/dashed-line.png); background-repeat:repeat-y; background-position:right;}

    h3.height-72{height:72px;}

    .circled-icon-wrapper-klein .circled-icon-img img{height:70px;}
    .circled-icon-wrapper-klein .circled-icon-img.liggend img{width:70px;}

    .ingezameld-cart{width:35px;}
    .ingezameld-truck{width:45px;}

    .ingezameld-type{font-size:33px;}

    .inzamelnetwerk, .inzamelnetwerk h3{font-size:27px;}

    /*highlights*/
    #highligtsCarousel .carousel-item img{margin-top:0; width:100%; height:auto; z-index:0;}
    .carousel-item .image-large{display:table-cell;}
    .carousel-img-text{width:50%; height:100%; position:absolute; top:0; left:0;}
    .carousel-img-text p{position:relative; top: 50%; transform: translateY(-50%); font-family:'titillium_webbold'; font-size:60px; line-height:60px;}
    .carousel-indicators.higlights{display:table;}
    .carousel-indicators.higlights li{margin:0; padding-bottom:35px; width:20%; height:auto; border-radius:0; display:table-cell; vertical-align:top; font-size:23px; line-height:27px; text-indent:0; border-right:solid 30px #FFF; background-color:transparent;}
    .carousel-indicators.higlights li:hover, .carousel-indicators.higlights li.active{background-color:transparent;}

    /*inzamelcijfers*/
    h2.inzamelcijfers{font-size:51px;}
    .inzamelcijfers-legenda li{margin-right:25px; display:inline-block; line-height: 1.5;}
    .inzamelcijfers-legenda li:nth-child(even){margin-top:0;}
    .inzamelcijfers-legenda li:before{width:29px; height:29px;}

    .inzamelcijfers-titel{font-size:32px;}
    .inzamelcijfers-jaar{font-size:24px;}
    .inzamelcijfers-grafiek.second li{padding-right:20px; height:40px;}

    #inzamelnetwerk-total { width: 80%; }

    .ul-5, .ul-6, .ul-7, .ul-9{width:100%; font-size:0;}
    .ul-5 li, .ul-6 li, .ul-7 li, .ul-9 li{display:inline-block; font-size:18px;}
    .ul-5 li{width:20%;}
    .ul-6 li{width:calc(100% / 6);}
    .ul-7 li{width:calc(100% / 7);}
    .ul-9 li{width:calc(100% / 9);}

    /*uitdagingen*/
    #uitdagingen h3{font-size:27px; width:calc(100% - 85px);}
    .img-uitdaging img{margin-top:32px; width:auto; height:61px;}
}