/* ----------------------------------------------------------------- */
/* clausaccountants.nl style.css

index:
- reset
- guides
- fonts
- styles
    - wrapper
    - header-top
    - nav-main
    - nav-services
    - nav-news
    - content
    - home
    - contact
    - aside-consult
    - aside-apps
    - img-hero
    - footer



/* ----------------------------------------------------------------- */
/* reset */

*,*:before,*:after{box-sizing:border-box}
html{font-size:62.5%} 
body{font-size:1.4rem}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
img{display:block;height:auto;max-width:100%}
a{color:inherit;text-decoration:none}
:root{--vh:1vh}

/* ----------------------------------------------------------------- */
/* guides */
/*
section,article,aside,header,footer,div,ol,ul,li{outline:1px dotted #000}

/* ----------------------------------------------------------------- */
/* fonts */

/* @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700'); */

/*
@font-face{
    font-family:'Gill Sans MT Condensed';
    font-style:normal;
    font-weight:normal;
    src: local('Gill Sans MT Condensed'), url('/include/font/gill-sans-mt-cond.woff') format('woff');
}

@font-face{
    font-family:'Gill Sans MT Condensed Bold';
    font-style:normal;
    font-weight:normal;
    src: local('Gill Sans MT Condensed Bold'), url('/include/font/gill-sans-mt-cond-bold.woff') format('woff');
}

@font-face {
    font-family:'Gill Sans MT';
    font-style:normal;
    font-weight:normal;
    src: local('Gill Sans MT'), url('/include/font/gill-sans-mt.woff') format('woff');
}

@font-face {
    font-family:'Gill Sans MT Light';
    font-style:normal;
    font-weight:normal;
    src: local('Gill Sans MT Light'), url('/include/font/gill-sans-mt-light.woff') format('woff');
}
*/

@font-face {
    font-family: 'GillSansMTPro-Light';
    src: url('/include/font/GillSansMTPro-Light.eot');
    src: url('/include/font/GillSansMTPro-Light.eot?#iefix') format('embedded-opentype'),
        url('/include/font/GillSansMTPro-Light.woff2') format('woff2'),
        url('/include/font/GillSansMTPro-Light.woff') format('woff'),
        url('/include/font/GillSansMTPro-Light.svg#GillSansMTPro-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GillSansMTPro-Book';
    src: url('/include/font/GillSansMTPro-Book.eot');
    src: url('/include/font/GillSansMTPro-Book.eot?#iefix') format('embedded-opentype'),
        url('/include/font/GillSansMTPro-Book.woff2') format('woff2'),
        url('/include/font/GillSansMTPro-Book.woff') format('woff'),
        url('/include/font/GillSansMTPro-Book.svg#GillSansMTPro-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GillSansMTPro-Bold';
    src: url('/include/font/GillSansMTPro-Bold.eot');
    src: url('/include/font/GillSansMTPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('/include/font/GillSansMTPro-Bold.woff2') format('woff2'),
        url('/include/font/GillSansMTPro-Bold.woff') format('woff'),
        url('/include/font/GillSansMTPro-Bold.svg#GillSansMTPro-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ----------------------------------------------------------------- */
/* styles */

body{background:#fff;color:#222;font-family:'GillSansMTPro-Light',arial,sans-serif;font-weight:400;font-size:10px;overflow-x:hidden}
@media(min-width:320px){body{padding-top:80px}}
@media(min-width:768px){body{padding-top:130px}}
body em{font-weight:600}

/* ----------------------------------------------------------------- */
/* wrapper */

.wrapper{margin:0px auto;max-width:1600px}
@media(min-width:320px){.wrapper{width:calc(100% - 30px)}}
@media(min-width:576px){.wrapper{width:calc(100% - 30px)}}
@media(min-width:768px){.wrapper{width:calc(100% - 30px)}}
@media(min-width:992px){.wrapper{width:calc(100% - 60px)}}
@media(min-width:1200px){.wrapper{max-width:1200px;width:calc(100% - 120px)}}

/* ----------------------------------------------------------------- */
/* header-top */

#header-top{background:#fff;left:0;position:fixed;top:0;right:0;z-index:999}
@media(min-width:320px){#header-top{padding:15px 0px}}
@media(min-width:768px){#header-top{padding:30px 0px}}

#header-top #header-flex{display:flex;height:70px}
@media(max-width:767px){#header-top #header-flex{height:50px}}

#header-top #button-logo{background:#706d6e;flex:1 0 auto}
#header-top #button-logo #logo{background:#fff;height:70px;margin:0 15px;padding:5px 30px;width:300px}
#header-top #button-logo #logo img{max-height:60px;max-width:239px;}

@media(max-width:767px){#header-top #button-logo #logo{height:50px;margin:0px 10px;padding:2px 10px;width:142px}}

#header-top .button-toggle-nav{background:#6080AE;flex:0 0 auto;height:70px;margin-left:10px;position:relative;width:70px}
#header-top .button-toggle-nav label{background:#6080AE;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:background-color .5s}
#header-top .button-toggle-nav label:hover{background:#111}
#header-top .button-toggle-nav label svg{height:70px;width:70px}

@media(max-width:767px){
    #header-top .button-toggle-nav{height:50px;margin-left:5px;width:50px}
    #header-top .button-toggle-nav label svg{height:50px;width:50px}

}

#header-top #button-contact{background:#333;margin-left:10px}
#header-top #button-contact a{background:#333;display:block;height:70px;transition:background-color .5s;width:70px}
#header-top #button-contact a:hover{background:#6080AE}
#header-top #button-contact svg{height:70px;width:70px}

@media(max-width:479px){#header-top #button-contact{display:none}}

@media(max-width:767px){
    #header-top #button-contact{margin-left:5px}
    #header-top #button-contact a{height:50px;width:50px}
    #header-top #button-contact svg{height:50px;width:50px}
}

#header-top #button-claus-online{background:#706d6e;margin-left:10px}
#header-top #button-claus-online a{background:#706d6e;display:block;height:70px;transition:background-color .5s}
#header-top #button-claus-online a:hover{background:#6080AE}
#header-top #button-claus-online svg{height:70px;width:70px}

@media(max-width:767px){
    #header-top #button-claus-online{margin-left:5px}
    #header-top #button-claus-online a{height:50px;width:50px}
    #header-top #button-claus-online svg{height:50px;width:50px}
}

@media(max-width:899px){#header-top #button-claus-online span{display:none}}

@media(min-width:900px){
    #header-top #button-claus-online a{color:#fff;font:11px/70px "GillSansMTPro-Book",arial,sans-serif;letter-spacing:2px;padding:0 22px 0 60px;position:relative;text-transform:uppercase}
    #header-top #button-claus-online svg{left:0;position:absolute;top:0}

}

/* ----------------------------------------------------------------- */
/* nav-main */
#check-nav-toggle{display:none;visibility:hidden}

#nav-fixed{animation:hide-nav 0s .5s forwards;background:#6080AE;font-family:'GillSansMTPro-Book';overflow-y:auto;padding:30px;position:fixed;transition:transform .5s;visibility:hidden;z-index:995}
#nav-fixed a{color:#fff;transition:color .25s}
#nav-fixed a:hover{color:#cac716}

#nav-fixed .button-toggle-close{cursor:pointer;height:25px;position:absolute;right:30px;top:30px;transition:fill .25s;width:25px}

#nav-fixed .button-toggle-close svg{fill:#fff;transition:fill .25s}
#nav-fixed .button-toggle-close:hover svg{fill:#fff}

#check-nav-toggle:checked + #nav-fixed{transform:translateX(0);transition:transform .5s}

@media(min-width:320px){
    #nav-fixed{bottom:0px;right:0px;top:0px;transform:translateX(100vw);width:100vw}
    #nav-fixed{line-height:2.2rem;font-size:1.4rem}
    #nav-fixed .nav-loket{margin-top:2.2rem}
}

@media(min-width:768px){
    #nav-fixed{border-left:15px solid #fff;bottom:0;position:fixed;right:0;top:0;transform:translateX(75vw);width:75vw}
    #nav-fixed{line-height:2.2rem;font-size:1.4rem}
    #nav-fixed .nav-loket{margin-top:2.2rem}
}

@media(min-width:1200px){
    #nav-fixed{border-left:15px solid #fff;bottom:0;position:fixed;right:0;top:0;transform:translateX(50vw);width:50vw}
    #nav-fixed{line-height:50px;font-size:30px;letter-spacing:4px}
    #nav-fixed .nav-loket{margin-top:50px}
}

@keyframes hide-nav { to { visibility:visible } }

/* ----------------------------------------------------------------- */
/* nav-services */

#nav-services{border-top:10px solid #deddde;margin-top:30px;padding-top:30px}
#nav-services .flex-container{align-items:stretch;display:flex;justify-content:space-between}
#nav-services .flex-item{flex:0 0 auto}

@media screen and (min-width:320px) and (max-width:599px) {
    #nav-services .flex-container{flex-flow:row wrap}
    #nav-services .flex-item{margin-bottom:15px;width:100%}
    #nav-services .flex-item:nth-child(4){margin-bottom:0px}
}

@media screen and (min-width:600px) and (max-width:1023px) {
    #nav-services .flex-container{flex-flow:row wrap}
    #nav-services .flex-item{width:calc(50% - (15px / 2))}
    #nav-services .flex-item:nth-child(-n+2){margin-bottom:15px}
}

@media screen and (min-width:1024px) and (max-width:1199px) {
    #nav-services .flex-container{flex-flow:row nowrap}
    #nav-services .flex-item{width:calc(25% - (45px / 4))}
}

@media screen and (min-width:1200px) {
    #nav-services .flex-container{flex-flow:row nowrap}
    #nav-services .flex-item{width:calc(25% - (90px / 4))}
}

#nav-services ul li{background:#111;color:#fff;font-family:'GillSansMTPro-Book';letter-spacing:2px;position:relative}
#nav-services ul li .imgholder{position:relative}
#nav-services ul li .imgholder img{object-fit:cover}

#nav-services ul li a{background:rgba(0,0,0,.6);bottom:0px;left:0px;position:absolute;right:0px;top:0px;transition:background-color .5s;z-index:10}
#nav-services ul li a:hover{background:#6080AE}
#nav-services ul li a.active{background:#6080AE}
#nav-services ul li a.active:hover{background:#111}

#nav-services ul li .pos-txt{align-items:center;bottom:0px;display:flex;left:15px;position:absolute;right:15px;top:0px;z-index:10}
#nav-services ul li .pos-txt > div{text-align:center;width:100%}

@media(min-width:320px){#nav-services ul li{font-size:8vw}}
@media(min-width:540px){#nav-services ul li{font-size:4vw}}
@media(min-width:768px){#nav-services ul li{font-size:4vw}}
@media(min-width:1024px){#nav-services ul li{font-size:1.8vw}}
@media(min-width:1200px){#nav-services ul li{font-size:22px}}

/* ----------------------------------------------------------------- */
/* nav-news */

#nav-news{border-top:10px solid #deddde;margin-top:30px;padding-top:30px}
#nav-news.no-border-top{border-top:none;margin-top:0px;padding-top:0px}

#nav-news .flex-container{align-items:stretch;display:flex;flex-flow:row wrap;justify-content:space-between}
#nav-news .flex-item{flex:0 0 auto}

@media screen and (min-width:320px) and (max-width:599px) {
    #nav-news .flex-item{margin-bottom:15px;width:100%}
    #nav-news .flex-item:nth-child(6){margin-bottom:0px}
}

@media screen and (min-width:600px) and (max-width:1023px) {
    #nav-news .flex-item{margin-top:15px;width:calc(50% - (15px / 2))}
    #nav-news .flex-item:nth-child(-n+2){margin-top:0px}
}

@media screen and (min-width:1024px) and (max-width:1199px) {
    #nav-news .flex-item{margin-top:15px;width:calc((100% / 3) - 10px)}
    #nav-news .flex-item:nth-child(-n+3){margin-top:0px}
}

@media screen and (min-width:1200px) {
    #nav-news .flex-item{margin-top:30px;width:calc((100% / 3) - 20px)}
    #nav-news .flex-item:nth-child(-n+3){margin-top:0px}
}

#nav-news ol li{background:#111;color:#fff;font-family:'GillSansMTPro-Book';letter-spacing:1px;position:relative}
#nav-news ol li .imgholder{height:0px;padding-top:100%;position:relative}
#nav-news ol li .imgholder img{bottom:0px;height:100%;left:0px;object-fit:cover;position:absolute;right:0px;top:0px;width:100%}

#nav-news ol li a{background:rgba(0,0,0,.6);bottom:0px;left:0px;position:absolute;right:0px;top:0px;transition:background-color .5s;z-index:10}
#nav-news ol li a:hover{background:#6080AE}

#nav-news ol li a.button-nieuwsarchief{background:#6080AE}
#nav-news ol li a.button-nieuwsarchief:hover{background:#111}

#nav-news ol li .pos-txt{position:absolute}
#nav-news ol li .pos-txt{align-items:center;bottom:0px;display:flex;left:15px;position:absolute;right:15px;top:0px}

#nav-news ol li .pos-txt .heading{width:100%}
#nav-news ol li .pos-txt .date{margin-top:30px;text-transform:uppercase;width:100%}

@media(min-width:320px){
    #nav-news ol li .pos-txt{left:15px;right:30px}
    #nav-news ol li .pos-txt .heading{font-size:5.5vw;line-height:7.5vw}
    #nav-news ol li .pos-txt .date{font-size:4vw}
}

@media(min-width:540px){
    #nav-news ol li .pos-txt{left:15px;right:15px}
    #nav-news ol li .pos-txt .heading{font-size:3vw;line-height:4.5vw}
    #nav-news ol li .pos-txt .date{font-size:2.25vw}
}

@media(min-width:768px){
    #nav-news ol li .pos-txt{left:30px;right:30px}
    #nav-news ol li .pos-txt .heading{font-size:3vw;line-height:4vw}
    #nav-news ol li .pos-txt .date{font-size:1.75vw}
}

@media(min-width:1024px){
    #nav-news ol li .pos-txt{left:30px;right:30px}
    #nav-news ol li .pos-txt .heading{font-size:2vw;line-height:3.2vw}
    #nav-news ol li .pos-txt .date{font-size:1.25vw}
}

@media(min-width:1200px){
    #nav-news ol li .pos-txt{left:30px;right:30px}
    #nav-news ol li .pos-txt .heading{font-size:1.4rem;line-height:1.6rem}
    #nav-news ol li .pos-txt .date{font-size:.8rem}
}

#news-pagination{margin-top:30px}
#news-pagination.col-1{width:100%}
#news-pagination.col-2{columns:2 auto;column-gap:15px}

#news-pagination a{background:#6080AE;color:#fff;display:block;font-size:1rem;line-height:60px;text-align:center;transition:background-color .5s}
#news-pagination a:hover{background:#111}

/* ----------------------------------------------------------------- */
/* content */

#content{background:#fff;margin:0 auto}

@media(min-width:320px){#content{margin-top:30px}}
@media(min-width:540px){#content{margin-top:15px}}
@media(min-width:768px){#content{margin-top:30px}}
@media(min-width:1024px){#content{margin-top:30px}}

#content.no-margin-top{margin-top:0}

@media(min-width:320px){#content .width-50{margin:0 auto;padding:30px 15px}}
@media(min-width:540px){#content .width-50{margin:0 auto;padding:30px 15px}}
@media(min-width:768px){#content .width-50{margin:0 auto;padding:60px}}
@media(min-width:1024px){#content .width-50{margin:0 auto;padding:60px 0px;width:75%}}
@media(min-width:1200px){#content .width-50{margin:0 auto;padding:60px 0px;width:50%}}

#content .bg-grey{background:#f5f5f5}

#content h1{color:#706d6e;letter-spacing:1px;position:relative}
#content h1:after{background:#6080AE;bottom:0px;content:"";display:block;height:2px;left:0px;position:absolute;width:150px}
#content h2{color:#706d6e;font-family:'GillSansMTPro-Book';letter-spacing:1px}
#content p{letter-spacing:1px}
#content .intro p{font-family:'GillSansMTPro-Book'}
#content p:last-of-type{margin-bottom:0}
#content ul li{letter-spacing:1px;padding-left:18px;position:relative}
#content ul li:after{background:#6080AE;content:"";display:block;height:3px;left:0px;position:absolute;top:.8rem;width:3px}

@media(min-width:320px){
    #content h1{font-size:1.6rem;padding-bottom:30px}
    #content h2{font-size:1.1rem;margin:30px 0px}
    #content p{font-size:1rem;line-height:1.2rem;margin:30px 0px}
    #content ol{font-size:1rem;line-height:1.2rem;margin:30px 0px}
    #content ul{font-size:1rem;line-height:1.2rem;margin:30px 0px}
}

@media(min-width:540px){
    #content h1{font-size:1.6rem;padding-bottom:30px}
    #content h2{font-size:1.1rem;margin:30px 0px}
    #content p{font-size:1rem;line-height:1.2rem;margin:30px 0px}
    #content ol{font-size:1rem;line-height:1.2rem;margin:30px 0px}
    #content ul{font-size:1rem;line-height:1.2rem;margin:30px 0px}
}

@media(min-width:768px){
    #content h1{font-size:2rem;padding-bottom:30px}
    #content h2{font-size:1.3rem;margin:30px 0px}
    #content p{font-size:1.1rem;line-height:1.4rem;margin:30px 0px}
    #content ol{font-size:1.1rem;line-height:1.4rem;margin:30px 0px}
    #content ul{font-size:1.1rem;line-height:1.4rem;margin:30px 0px}
}

@media(min-width:1024px){
    #content h1{font-size:2.2rem;padding-bottom:30px}
    #content h2{font-size:1.3rem;margin:30px 0px}
    #content p{font-size:1.1rem;line-height:1.4rem;margin:30px 0px}
    #content ol{font-size:1.1rem;line-height:1.4rem;margin:30px 0px}
    #content ul{font-size:1.1rem;line-height:1.4rem;margin:30px 0px}
}

@media(min-width:1440px){
    #content h1{font-size:2.6rem;padding-bottom:30px}
    #content h2{font-size:1.4rem;margin:30px 0px}
    #content p{font-size:1.2rem;line-height:1.6rem;margin:30px 0px}
    #content ol{font-size:1.2rem;line-height:1.6rem;margin:30px 0px}
    #content ul{font-size:1.2rem;line-height:1.6rem;margin:30px 0px}
}

/* ----------------------------------------------------------------- */
/* home */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #home{margin-top:30px}
}

#home .flex-container{align-items:stretch;display:flex;justify-content:space-between}
#home .flex-item{flex:0 0 auto;position:relative}

@media screen and (min-width:320px) and (max-width:599px) {
    #home .flex-container{flex-flow:row wrap}
    #home .flex-item{width:100%}
    #home .flex-item:nth-child(1){margin-bottom:15px}
    #home .flex-item:nth-child(1){padding:30px}
    #home .flex-item:nth-child(2){height:0px;padding-top:100%}
}

@media screen and (min-width:600px) and (max-width:1023px) {
    #home .flex-container{flex-flow:row nowrap}
    #home .flex-item{width:calc(50% - (15px / 2))}
    #home .flex-item:nth-child(1){padding:30px}
}

@media screen and (min-width:1024px) and (max-width:1199px) {
    #home .flex-container{flex-flow:row nowrap}
    #home .flex-item{width:calc(50% - (15px / 2))}
    #home .flex-item:nth-child(1){padding:60px}
}

@media screen and (min-width:1200px) {
    #home .flex-container{flex-flow:row nowrap}
    #home .flex-item{width:calc(50% - 15px)}
    #home .flex-item:nth-child(1){padding:60px}
}

#home .home-img{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;bottom:0px;display:-ms-grid;display:grid;justify-items:stretch;left:0px;position:absolute;right:0px;top:0px}

@media(min-width:320px){
    #home .home-img{
        -ms-grid-columns: 1fr 15px 1fr;
        grid-template-columns: 1fr 1fr;
        -ms-grid-rows: 1fr 15px 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }
    #home .home-img > *:nth-child(1){-ms-grid-row:1;-ms-grid-column:1;
    }
    #home .home-img > *:nth-child(2){-ms-grid-row:1;-ms-grid-column:3;
    }
    #home .home-img > *:nth-child(3){-ms-grid-row:3;-ms-grid-column:1;
    }
    #home .home-img > *:nth-child(4){-ms-grid-row:3;-ms-grid-column:3;
    }
}

@media(min-width:540px){
    #home .home-img{
        -ms-grid-columns: 1fr 15px 1fr;
        grid-template-columns: 1fr 1fr;
        -ms-grid-rows: 1fr 15px 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }
    #home .home-img > *:nth-child(1){-ms-grid-row:1;-ms-grid-column:1;
    }
    #home .home-img > *:nth-child(2){-ms-grid-row:1;-ms-grid-column:3;
    }
    #home .home-img > *:nth-child(3){-ms-grid-row:3;-ms-grid-column:1;
    }
    #home .home-img > *:nth-child(4){-ms-grid-row:3;-ms-grid-column:3;
    }
}

@media(min-width:768px){
    #home .home-img{
        -ms-grid-columns: 1fr 15px 1fr;
        grid-template-columns: 1fr 1fr;
        -ms-grid-rows: 1fr 15px 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }
    #home .home-img > *:nth-child(1){-ms-grid-row:1;-ms-grid-column:1;
    }
    #home .home-img > *:nth-child(2){-ms-grid-row:1;-ms-grid-column:3;
    }
    #home .home-img > *:nth-child(3){-ms-grid-row:3;-ms-grid-column:1;
    }
    #home .home-img > *:nth-child(4){-ms-grid-row:3;-ms-grid-column:3;
    }
}

@media(min-width:1024px){
    #home .home-img{
        -ms-grid-columns: 1fr 15px 1fr;
        grid-template-columns: 1fr 1fr;
        -ms-grid-rows: 1fr 15px 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }
    #home .home-img > *:nth-child(1){-ms-grid-row:1;-ms-grid-column:1;
    }
    #home .home-img > *:nth-child(2){-ms-grid-row:1;-ms-grid-column:3;
    }
    #home .home-img > *:nth-child(3){-ms-grid-row:3;-ms-grid-column:1;
    }
    #home .home-img > *:nth-child(4){-ms-grid-row:3;-ms-grid-column:3;
    }
}

@media(min-width:1440px){
    #home .home-img{
        -ms-grid-columns: 1fr 30px 1fr;
        grid-template-columns: 1fr 1fr;
        -ms-grid-rows: 1fr 30px 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 30px;
        grid-row-gap: 30px;
    }
    #home .home-img > *:nth-child(1){-ms-grid-row:1;-ms-grid-column:1;
    }
    #home .home-img > *:nth-child(2){-ms-grid-row:1;-ms-grid-column:3;
    }
    #home .home-img > *:nth-child(3){-ms-grid-row:3;-ms-grid-column:1;
    }
    #home .home-img > *:nth-child(4){-ms-grid-row:3;-ms-grid-column:3;
    }
}

#home .imgholder{position:relative}
#home .imgholder img{bottom:0px;height:100%;left:0px;object-fit:cover;position:absolute;right:0px;top:0px;width:100%}

/* ----------------------------------------------------------------- */
/* contact */

#contact .flex-container{align-items:stretch;display:flex;justify-content:space-between}
#contact .flex-item{flex:0 0 auto;position:relative}

@media screen and (min-width:320px) and (max-width:599px) {
    #contact .flex-container{flex-flow:row wrap}
    #contact .flex-item{width:100%}
    #contact .flex-item:nth-child(1){margin-bottom:15px}
    #contact .flex-item:nth-child(1){padding:30px}
    #contact .flex-item:nth-child(2){height:0px;padding-top:100%}
}

@media screen and (min-width:600px) and (max-width:1023px) {
    #contact .flex-container{flex-flow:row nowrap}
    #contact .flex-item{width:calc(50% - (15px / 2))}
    #contact .flex-item:nth-child(1){padding:30px}
}

@media screen and (min-width:1024px) and (max-width:1199px) {
    #contact .flex-container{flex-flow:row nowrap}
    #contact .flex-item{width:calc(50% - (15px / 2))}
    #contact .flex-item:nth-child(1){padding:60px}
}

@media screen and (min-width:1200px) {
    #contact .flex-container{flex-flow:row nowrap}
    #contact .flex-item{width:calc(50% - 15px)}
    #contact .flex-item:nth-child(1){padding:60px}
}

#contact h2{margin-bottom:0px}
#contact p{margin-top:15px}

#contact .contact-map{background:#111;position:relative}
#contact .contact-map iframe{bottom:0px;border:none;height:100% !important;left:0px;position:absolute;right:0px;top:0px;width:100% !important}

@media(max-width:767px){
    #contact .contact-map{height:0;padding-top:100%}
}

/* ----------------------------------------------------------------- */
/* aside-consult */

#aside-consult{border-top:10px solid #deddde;margin-top:30px;padding-top:30px}
#aside-consult .flex-container{align-items:stretch;display:flex;justify-content:space-between}
#aside-consult .flex-item{flex:0 0 auto}

@media screen and (min-width:320px) and (max-width:599px) {
    #aside-consult .flex-container{flex-flow:row wrap}
    #aside-consult .flex-item{width:100%}
    #aside-consult .flex-item:nth-child(1){margin-bottom:15px}
}

@media screen and (min-width:600px) and (max-width:1023px) {
    #aside-consult .flex-container{flex-flow:row nowrap}
    #aside-consult .flex-item{width:calc(50% - (15px / 2))}
}

@media screen and (min-width:1024px) and (max-width:1199px) {
    #aside-consult .flex-container{flex-flow:row nowrap}
    #aside-consult .flex-item{width:calc(50% - (15px / 2))}
}

@media screen and (min-width:1200px) {
    #aside-consult .flex-container{flex-flow:row nowrap}
    #aside-consult .flex-item{width:calc(50% - 15px)}
}

#aside-consult-img{background:#111;position:relative}

@media(max-width:767px){#aside-consult-img{height:0px;padding-top:100%}}

#aside-consult-img .imgholder{bottom:0;left:0;position:absolute;right:0;top:0}
#aside-consult-img img{height:100%;width:100%;object-fit:cover}

#aside-consult-txt{background:#6080AE}

@media(min-width:320px){#aside-consult-txt{padding:30px}}
@media(min-width:540px){#aside-consult-txt{padding:30px}}
@media(min-width:768px){#aside-consult-txt{padding:30px}}
@media(min-width:1024px){#aside-consult-txt{padding:60px}}
@media(min-width:1200px){#aside-consult-txt{padding:60px}}

#aside-consult-txt h3{color:#eee;font-family:'GillSansMTPro-Book';letter-spacing:1px}
#aside-consult-txt p{color:#eee}
#aside-consult-txt p:last-of-type{margin-bottom:0}

@media(min-width:320px){
    #aside-consult-txt h3{font-size:1.1rem}
    #aside-consult-txt p{font-size:1rem;line-height:1.2rem;margin:30px 0px}
}

@media(min-width:540px){
    #aside-consult-txt h3{font-size:1.1rem}
    #aside-consult-txt p{font-size:1rem;line-height:1.2rem;margin:30px 0px}
}

@media(min-width:768px){
    #aside-consult-txt h3{font-size:1.3rem}
    #aside-consult-txt p{font-size:1.1rem;line-height:1.4rem;margin:30px 0px}
}

@media(min-width:1024px){
    #aside-consult-txt h3{font-size:1.3rem}
    #aside-consult-txt p{font-size:1.1rem;line-height:1.4rem;margin:30px 0px}
}

@media(min-width:1440px){
    #aside-consult-txt h3{font-size:1.4rem}
    #aside-consult-txt p{font-size:1.2rem;line-height:1.6rem;margin:30px 0px}
}

/* ----------------------------------------------------------------- */
/* aside-apps */

#aside-apps{border-top:10px solid #deddde;margin-top:30px;padding-top:30px}
#aside-apps .flex-container{align-items:stretch;display:flex;justify-content:space-between}
#aside-apps .flex-item{flex:0 0 auto;position:relative}

@media screen and (min-width:320px) and (max-width:599px) {
    #aside-apps .flex-container{flex-flow:row wrap}
    #aside-apps .flex-item{padding:30px 30px 110px 30px;width:100%}
    #aside-apps .flex-item:nth-child(1){margin-bottom:15px}
}

@media screen and (min-width:600px) and (max-width:1023px) {
    #aside-apps .flex-container{flex-flow:row nowrap}
    #aside-apps .flex-item{padding:30px 30px 120px 30px;width:calc(50% - (15px / 2))}
}

@media screen and (min-width:1024px) and (max-width:1199px) {
    #aside-apps .flex-container{flex-flow:row nowrap}
    #aside-apps .flex-item{padding:60px 60px 130px 60px;width:calc(50% - (15px / 2))}
}

@media screen and (min-width:1200px) {
    #aside-apps .flex-container{flex-flow:row nowrap}
    #aside-apps .flex-item{padding:60px 60px 130px 60px;width:calc(50% - 15px)}
}

#aside-app-werkgever{background:#6080AE}
#aside-app-werknemer{background:#706d6e}

#aside-apps h3{color:#eee;font-family:'GillSansMTPro-Book';letter-spacing:1px}
#aside-apps p{color:#eee}
#aside-apps p:last-of-type{margin-bottom:0}

@media(min-width:320px){
    #aside-apps h3{font-size:1.1rem}
    #aside-apps p{font-size:1rem;line-height:1.2rem;margin:30px 0px}
}

@media(min-width:540px){
    #aside-apps h3{font-size:1.1rem}
    #aside-apps p{font-size:1rem;line-height:1.2rem;margin:30px 0px}
}

@media(min-width:768px){
    #aside-apps h3{font-size:1.3rem}
    #aside-apps p{font-size:1.1rem;line-height:1.4rem;margin:30px 0px}
}

@media(min-width:1024px){
    #aside-apps h3{font-size:1.3rem}
    #aside-apps p{font-size:1.1rem;line-height:1.4rem;margin:30px 0px}
}

@media(min-width:1440px){
    #aside-apps h3{font-size:1.4rem}
    #aside-apps p{font-size:1.2rem;line-height:1.6rem;margin:30px 0px}
}

#aside-apps .app-store-link{align-items:stretch;display:flex;justify-content:space-between}
#aside-apps .app-store-link li:nth-child(1){margin-right:15px}

#aside-apps .app-store-link a{border:1px solid #fff;display:block;padding:15px}
#aside-app-werkgever .app-store-link a{border-color:#e78291;transition:border-color .5s}
#aside-app-werkgever .app-store-link a:hover{border-color:#fff}
#aside-app-werknemer .app-store-link a{border-color:#a9a7a8;transition:border-color .5s}
#aside-app-werknemer .app-store-link a:hover{border-color:#fff}

@media(min-width:320px){
    #aside-apps .app-store-link{bottom:30px;height:50px;left:30px;position:absolute}
    #aside-apps .app-store-link svg{height:20px;width:auto}
}

@media(min-width:540px){
    #aside-apps .app-store-link{bottom:30px;height:60px;left:30px;position:absolute}
    #aside-apps .app-store-link svg{height:30px;width:auto}
}

@media(min-width:1024px){
    #aside-apps .app-store-link{bottom:30px;height:70px;left:60px;position:absolute}
    #aside-apps .app-store-link svg{height:40px;width:auto}
}

/* ----------------------------------------------------------------- */
/* img-hero */

#img-hero{background:#000;height:0;position:relative;width:100%}
@media(min-width:320px){#img-hero{padding-top:60%}}
@media(min-width:768px){#img-hero{padding-top:50%}}
@media(min-width:1024px){#img-hero{padding-top:40%}}
#img-hero img{bottom:0px;height:100%;left:0px;object-fit:cover;position:absolute;right:0px;top:0px;width:100%}

/* ----------------------------------------------------------------- */
/* footer-bottom */

#footer-bottom{border-top:10px solid #deddde;margin-top:30px;padding-top:30px}

#footer-bottom .links{background:#706d6e;padding:30px}
#footer-bottom .links li{font-size:.75rem;font-weight:600;line-height:1.6rem}
#footer-bottom .links a{color:#D6D5D5;transition:color .5s}
#footer-bottom .links a:hover{color:#FFF}

@media(min-width:768px){
    #footer-bottom .links ul{display:flex;justify-content:center}
    #footer-bottom .links li{margin-right:15px}
    #footer-bottom .links li:last-of-type{margin-right:0}
}

#footer-bottom .logos{margin:30px auto;}
#footer-bottom .logos li{text-align:center}
#footer-bottom .logos img{height:auto;width:125px}

/*

@media(min-width:320px){
    #footer-bottom .logos ul{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 15px;
        justify-items: center;
        align-items: center;
    }
}

@media(min-width:540px){
    #footer-bottom .logos ul{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 15px;
        grid-row-gap: 0px;
        justify-items: center;
        align-items: center;
    }
}

@media(min-width:768px){
    #footer-bottom .logos ul{
        grid-column-gap: 30px;
        max-width:435px;
        margin:0 auto;
        justify-items: center;
        align-items: center;
    }
}

@media(min-width:1024px){
    #footer-bottom .logos ul{
        grid-column-gap: 30px;
        max-width:435px;
        width:50%;
        justify-items: center;
        align-items: center;
    }
}
*/