/* Theme Name: De Eijk Groep 2026 Theme URI: https://www.deeijkgroep.nl Author: Tim Hereijgers, huisstijl 2026 door Studio Code Rood Author URI: http://timhereijgers.nl Description: Thema voor De Eijk Groep in de huisstijl van juli 2026. Gebaseerd op BassCss. Doorontwikkeling van BassTheme; kleuren en logo volgen het huisstijlhandboek, alle merkkleuren staan als CSS-variabelen bovenaan dit bestand. Version: 2.0.0 Text Domain: basstheme */ /* ========================================================================= Huisstijl De Eijk Groep - juli 2026 Alle merkkleuren en lettertypes staan hier. Pas ze hier aan, nergens anders. ========================================================================= */ :root { /* Primaire kleuren (huisstijlhandboek) */ --color-primary: #375423; /* groen - hoofdkleur */ --color-secondary: #b27c46; /* bruin - tweede kleur */ /* Secundaire kleuren (huisstijlhandboek) */ --color-accent-orange: #e18800; --color-accent-wine: #9e0833; --color-accent-green: #86bd34; /* Afgeleide tinten - geen handboekkleuren, wel nodig voor hover/focus */ --color-primary-light: #4d7331; /* hover op groen, blijft leesbaar op wit */ --color-sage: #dde3d6; /* zachte tint uit het handboek, voor vlakken */ --color-secondary-dark: #8a5c30; /* bruin, donker genoeg voor witte tekst (5,75:1) */ /* Neutralen */ --color-ink: #212121; --color-gray: #999999; --color-gray-mid: #b1b1b1; --color-surface: #f3f3f3; --color-border: #e6e6e6; --color-border-light: #f2f2f2; --color-white: #ffffff; } /* Reset */ img, video { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } embed, iframe, object { margin-bottom: 1.5em; max-width: 100%; } /*! Basscss core | http://basscss.com | MIT License */ h1, h2, h3, h4, h5, h6 { font-weight: inherit; margin-bottom: 1.25rem; } h1, h2 { font-weight: 700; } h1, .h1{ font-size: 2.25rem; line-height: 1.1; } h2, .h2{ font-size: 1.675rem; line-height: 1.2; } @media (max-width: 40em) { h1, .h1{ font-size: 1.625rem; } h2, .h2{ font-size: 1.375rem; } } h3, .h3{ font-size: 1rem; margin-bottom: .75em; } h4, .h4{ font-size: .875rem } h5, .h5{ font-size: .8125rem } h6, .h6{ font-size: .75rem; line-height: 1.4; } @media (max-width: 49rem) { .h3-mobile { font-size: 1.15rem !important; } } .font-family-inherit{ font-family:inherit } .font-size-inherit{ font-size:inherit } .text-decoration-none, .text-decoration-none:hover{ text-decoration:none } .bold{ font-weight: 700 } .semi-bold{ font-weight: 600 } .regular{ font-weight: 400 } .italic{ font-style:italic } .uppercase{ text-transform: uppercase } .caps{ text-transform:uppercase; letter-spacing: .1em; } .left-align{ text-align:left } .center{ text-align:center } .right-align{ text-align:right } .justify{ text-align:justify } @media (min-width: 40rem) { .sm-left-align { text-align: left } .sm-center { text-align: center } .sm-right-align { text-align: right } .sm-justify { text-align: justify } } @media (min-width: 52rem) { .md-left-align { text-align: left } .md-center { text-align: center } .md-right-align { text-align: right } .md-justify { text-align: justify } } @media (min-width: 64rem) { .lg-left-align { text-align: left } .lg-center { text-align: center } .lg-right-align { text-align: right } .lg-justify { text-align: justify } } .nowrap{ white-space:nowrap } .break-word{ word-wrap:break-word } .line-height-1{ line-height: 1 } .line-height-2{ line-height: 1.25 } .line-height-3{ line-height: 1.5 } .line-height-4{ line-height: 1.75 } .list-style-none{ list-style:none } .underline{ text-decoration:underline } .truncate{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .list-reset{ list-style:none; padding-left:0; } .list-inline { letter-spacing: -.31em; } .list-inline li { letter-spacing: normal; display: inline-block; } .display-none{ display:none } .inline{ display:inline } .block{ display:block } .inline-block{ display:inline-block } .table{ display:table; border-spacing: 0 } .table-cell{ display:table-cell } .overflow-hidden{ overflow:hidden } @media (max-width: 52em) { .overflow-scroll{ overflow-x:scroll } .overflow-auto{ overflow-x:auto } .overflow-touch { -webkit-overflow-scrolling: touch } } .clearfix:before, .clearfix:after{ content:" "; display:table } .clearfix:after{ clear:both } .left{ float:left } .right{ float:right } @media (min-width: 40em) { .sm-inline { display: inline } .sm-block { display: block } .sm-inline-block { display: inline-block } .sm-table { display: table } .sm-table-cell { display: table-cell } .sm-overflow-hidden { overflow: hidden } .sm-overflow-scroll { overflow: scroll } .sm-overflow-auto { overflow: auto } .sm-left { float: left } .sm-right { float: right } } @media (min-width: 52em) { .md-inline { display: inline } .md-block { display: block } .md-inline-block { display: inline-block } .md-table { display: table } .md-table-cell { display: table-cell } .md-overflow-hidden { overflow: hidden } .md-overflow-scroll { overflow: scroll } .md-overflow-auto { overflow: auto } .md-left { float: left } .md-right { float: right } } @media (min-width: 64em) { .lg-inline { display: inline } .lg-block { display: block } .lg-inline-block { display: inline-block } .lg-table { display: table } .lg-table-cell { display: table-cell } .lg-overflow-hidden { overflow: hidden } .lg-overflow-scroll { overflow: scroll } .lg-overflow-auto { overflow: auto } .lg-left { float: left } .lg-right { float: right } } .fit{ max-width:100% } .max-width-1{ max-width: 24rem } .max-width-2{ max-width: 32rem } .max-width-3{ max-width: 48rem } .max-width-4{ max-width: 64rem } .border-box{ box-sizing:border-box } .content-box{ box-sizing:content-box } .align-baseline{ vertical-align:baseline } .align-top{ vertical-align:top } .align-middle{ vertical-align:middle } .align-bottom{ vertical-align:bottom } .align-text-top{ vertical-align:text-top } .align-text-bottom{ vertical-align:text-bottom } .mxn1{ margin-left: -.5rem; margin-right: -.5rem; } .mxn2{ margin-left: -1rem; margin-right: -1rem; } .mxn3{ margin-left: -2rem; margin-right: -2rem; } .mxn4{ margin-left: -4rem; margin-right: -4rem; } /* Minified margins, paddings & cols */ .ml0,.mx0{margin-left:0}.mr0,.mx0{margin-right:0}.mt0,.my0{margin-top:0}.mb0,.my0{margin-bottom:0}.pl0,.px0{padding-left:0}.pr0,.px0{padding-right:0}.pt0,.py0{padding-top:0}.pb0,.py0{padding-bottom:0}.col,.col-right{box-sizing:border-box}.m0{margin:0}.ml1,.mx1{margin-left:.5rem}.mr1,.mx1{margin-right:.5rem}.mt1,.my1{margin-top:.5rem}.mb1,.my1{margin-bottom:.5rem}.m1{margin:.5rem}.ml2,.mx2{margin-left:1rem}.mr2,.mx2{margin-right:1rem}.mt2,.my2{margin-top:1rem}.mb2,.my2{margin-bottom:1rem}.m2{margin:1rem}.ml3,.mx3{margin-left:2rem}.mr3,.mx3{margin-right:2rem}.mt3,.my3{margin-top:2rem}.mb3,.my3{margin-bottom:2rem}.m3{margin:2rem}.ml4,.mx4{margin-left:4rem}.mr4,.mx4{margin-right:4rem}.mt4,.my4{margin-top:4rem}.mb4,.my4{margin-bottom:4rem}.m4{margin:4rem}.ml-auto,.mx-auto{margin-left:auto}.mr-auto,.mx-auto{margin-right:auto}.p0{padding:0}.pl1,.px1{padding-left:.5rem}.pr1,.px1{padding-right:.5rem}.pt1,.py1{padding-top:.5rem}.pb1,.py1{padding-bottom:.5rem}.p1{padding:.5rem}.pt2,.py2{padding-top:1rem}.pb2,.py2{padding-bottom:1rem}.pl2,.px2{padding-left:1rem}.pr2,.px2{padding-right:1rem}.p2{padding:1rem}.pt3,.py3{padding-top:2rem}.pb3,.py3{padding-bottom:2rem}.pl3,.px3{padding-left:2rem}.pr3,.px3{padding-right:2rem}.p3{padding:2rem}.pt4,.py4{padding-top:4rem}.pb4,.py4{padding-bottom:4rem}.pl4,.px4{padding-left:4rem}.pr4,.px4{padding-right:4rem}.p4{padding:4rem}.col{float:left}.col-right{float:right}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}.col-auto{width:auto}@media (min-width:40em){.sm-mt0,.sm-my0{margin-top:0}.sm-mb0,.sm-my0{margin-bottom:0}.sm-mxn1{margin-left:-.5rem;margin-right:-.5rem}.sm-mxn2{margin-left:-1rem;margin-right:-1rem}.sm-mxn3{margin-left:-2rem;margin-right:-2rem}.sm-mxn4{margin-left:-4rem;margin-right:-4rem}.sm-ml0,.sm-mx0{margin-left:0}.sm-mr0,.sm-mx0{margin-right:0}.sm-m0{margin:0}.sm-ml1,.sm-mx1{margin-left:.5rem}.sm-mr1,.sm-mx1{margin-right:.5rem}.sm-mt1,.sm-my1{margin-top:.5rem}.sm-mb1,.sm-my1{margin-bottom:.5rem}.sm-m1{margin:.5rem}.sm-ml2,.sm-mx2{margin-left:1rem}.sm-mr2,.sm-mx2{margin-right:1rem}.sm-mt2,.sm-my2{margin-top:1rem}.sm-mb2,.sm-my2{margin-bottom:1rem}.sm-m2{margin:1rem}.sm-ml3,.sm-mx3{margin-left:2rem}.sm-mr3,.sm-mx3{margin-right:2rem}.sm-mt3,.sm-my3{margin-top:2rem}.sm-mb3,.sm-my3{margin-bottom:2rem}.sm-m3{margin:2rem}.sm-ml4,.sm-mx4{margin-left:4rem}.sm-mr4,.sm-mx4{margin-right:4rem}.sm-mt4,.sm-my4{margin-top:4rem}.sm-mb4,.sm-my4{margin-bottom:4rem}.sm-m4{margin:4rem}.sm-ml-auto,.sm-mx-auto{margin-left:auto}.sm-mr-auto,.sm-mx-auto{margin-right:auto}.sm-pl0,.sm-px0{padding-left:0}.sm-pr0,.sm-px0{padding-right:0}.sm-pt0,.sm-py0{padding-top:0}.sm-pb0,.sm-py0{padding-bottom:0}.sm-p0{padding:0}.sm-pl1,.sm-px1{padding-left:.5rem}.sm-pr1,.sm-px1{padding-right:.5rem}.sm-pt1,.sm-py1{padding-top:.5rem}.sm-pb1,.sm-py1{padding-bottom:.5rem}.sm-p1{padding:.5rem}.sm-pl2,.sm-px2{padding-left:1rem}.sm-pr2,.sm-px2{padding-right:1rem}.sm-pt2,.sm-py2{padding-top:1rem}.sm-pb2,.sm-py2{padding-bottom:1rem}.sm-p2{padding:1rem}.sm-pl3,.sm-px3{padding-left:2rem}.sm-pr3,.sm-px3{padding-right:2rem}.sm-pt3,.sm-py3{padding-top:2rem}.sm-pb3,.sm-py3{padding-bottom:2rem}.sm-p3{padding:2rem}.sm-pl4,.sm-px4{padding-left:4rem}.sm-pr4,.sm-px4{padding-right:4rem}.sm-pt4,.sm-py4{padding-top:4rem}.sm-pb4,.sm-py4{padding-bottom:4rem}.sm-p4{padding:4rem}.sm-col,.sm-col-right{box-sizing:border-box}.sm-col{float:left}.sm-col-right{float:right}.sm-col-1{width:8.33333%}.sm-col-2{width:16.66667%}.sm-col-3{width:25%}.sm-col-4{width:33.33333%}.sm-col-5{width:41.66667%}.sm-col-6{width:50%}.sm-col-7{width:58.33333%}.sm-col-8{width:66.66667%}.sm-col-9{width:75%}.sm-col-10{width:83.33333%}.sm-col-11{width:91.66667%}.sm-col-12{width:100%}.sm-col-auto{width:auto}}@media (min-width:52em){.md-mt0,.md-my0{margin-top:0}.md-mb0,.md-my0{margin-bottom:0}.md-mxn1{margin-left:-.5rem;margin-right:-.5rem}.md-mxn2{margin-left:-1rem;margin-right:-1rem}.md-mxn3{margin-left:-2rem;margin-right:-2rem}.md-mxn4{margin-left:-4rem;margin-right:-4rem}.md-ml0,.md-mx0{margin-left:0}.md-mr0,.md-mx0{margin-right:0}.md-m0{margin:0}.md-ml1,.md-mx1{margin-left:.5rem}.md-mr1,.md-mx1{margin-right:.5rem}.md-mt1,.md-my1{margin-top:.5rem}.md-mb1,.md-my1{margin-bottom:.5rem}.md-m1{margin:.5rem}.md-ml2,.md-mx2{margin-left:1rem}.md-mr2,.md-mx2{margin-right:1rem}.md-mt2,.md-my2{margin-top:1rem}.md-mb2,.md-my2{margin-bottom:1rem}.md-m2{margin:1rem}.md-ml3,.md-mx3{margin-left:2rem}.md-mr3,.md-mx3{margin-right:2rem}.md-mt3,.md-my3{margin-top:2rem}.md-mb3,.md-my3{margin-bottom:2rem}.md-m3{margin:2rem}.md-ml4,.md-mx4{margin-left:4rem}.md-mr4,.md-mx4{margin-right:4rem}.md-mt4,.md-my4{margin-top:4rem}.md-mb4,.md-my4{margin-bottom:4rem}.md-m4{margin:4rem}.md-ml-auto,.md-mx-auto{margin-left:auto}.md-mr-auto,.md-mx-auto{margin-right:auto}.md-pl0,.md-px0{padding-left:0}.md-pr0,.md-px0{padding-right:0}.md-pt0,.md-py0{padding-top:0}.md-pb0,.md-py0{padding-bottom:0}.md-p0{padding:0}.md-pl1,.md-px1{padding-left:.5rem}.md-pr1,.md-px1{padding-right:.5rem}.md-pt1,.md-py1{padding-top:.5rem}.md-pb1,.md-py1{padding-bottom:.5rem}.md-p1{padding:.5rem}.md-pl2,.md-px2{padding-left:1rem}.md-pr2,.md-px2{padding-right:1rem}.md-pt2,.md-py2{padding-top:1rem}.md-pb2,.md-py2{padding-bottom:1rem}.md-p2{padding:1rem}.md-pl3,.md-px3{padding-left:2rem}.md-pr3,.md-px3{padding-right:2rem}.md-pt3,.md-py3{padding-top:2rem}.md-pb3,.md-py3{padding-bottom:2rem}.md-p3{padding:2rem}.md-pl4,.md-px4{padding-left:4rem}.md-pr4,.md-px4{padding-right:4rem}.md-pt4,.md-py4{padding-top:4rem}.md-pb4,.md-py4{padding-bottom:4rem}.md-p4{padding:4rem}.md-col,.md-col-right{box-sizing:border-box}.md-col{float:left}.md-col-right{float:right}.md-col-1{width:8.33333%}.md-col-2{width:16.66667%}.md-col-3{width:25%}.md-col-4{width:33.33333%}.md-col-5{width:41.66667%}.md-col-6{width:50%}.md-col-7{width:58.33333%}.md-col-8{width:66.66667%}.md-col-9{width:75%}.md-col-10{width:83.33333%}.md-col-11{width:91.66667%}.md-col-12{width:100%}.md-col-auto{width:auto}}@media (min-width:64em){.lg-mt0,.lg-my0{margin-top:0}.lg-mb0,.lg-my0{margin-bottom:0}.lg-mxn1{margin-left:-.5rem;margin-right:-.5rem}.lg-mxn2{margin-left:-1rem;margin-right:-1rem}.lg-mxn3{margin-left:-2rem;margin-right:-2rem}.lg-mxn4{margin-left:-4rem;margin-right:-4rem}.lg-ml0,.lg-mx0{margin-left:0}.lg-mr0,.lg-mx0{margin-right:0}.lg-m0{margin:0}.lg-ml1,.lg-mx1{margin-left:.5rem}.lg-mr1,.lg-mx1{margin-right:.5rem}.lg-mt1,.lg-my1{margin-top:.5rem}.lg-mb1,.lg-my1{margin-bottom:.5rem}.lg-m1{margin:.5rem}.lg-ml2,.lg-mx2{margin-left:1rem}.lg-mr2,.lg-mx2{margin-right:1rem}.lg-mt2,.lg-my2{margin-top:1rem}.lg-mb2,.lg-my2{margin-bottom:1rem}.lg-m2{margin:1rem}.lg-ml3,.lg-mx3{margin-left:2rem}.lg-mr3,.lg-mx3{margin-right:2rem}.lg-mt3,.lg-my3{margin-top:2rem}.lg-mb3,.lg-my3{margin-bottom:2rem}.lg-m3{margin:2rem}.lg-ml4,.lg-mx4{margin-left:4rem}.lg-mr4,.lg-mx4{margin-right:4rem}.lg-mt4,.lg-my4{margin-top:4rem}.lg-mb4,.lg-my4{margin-bottom:4rem}.lg-m4{margin:4rem}.lg-ml-auto,.lg-mx-auto{margin-left:auto}.lg-mr-auto,.lg-mx-auto{margin-right:auto}.lg-pl0,.lg-px0{padding-left:0}.lg-pr0,.lg-px0{padding-right:0}.lg-pt0,.lg-py0{padding-top:0}.lg-pb0,.lg-py0{padding-bottom:0}.lg-p0{padding:0}.lg-pl1,.lg-px1{padding-left:.5rem}.lg-pr1,.lg-px1{padding-right:.5rem}.lg-pt1,.lg-py1{padding-top:.5rem}.lg-pb1,.lg-py1{padding-bottom:.5rem}.lg-p1{padding:.5rem}.lg-pl2,.lg-px2{padding-left:1rem}.lg-pr2,.lg-px2{padding-right:1rem}.lg-pt2,.lg-py2{padding-top:1rem}.lg-pb2,.lg-py2{padding-bottom:1rem}.lg-p2{padding:1rem}.lg-pl3,.lg-px3{padding-left:2rem}.lg-pr3,.lg-px3{padding-right:2rem}.lg-pt3,.lg-py3{padding-top:2rem}.lg-pb3,.lg-py3{padding-bottom:2rem}.lg-p3{padding:2rem}.lg-pl4,.lg-px4{padding-left:4rem}.lg-pr4,.lg-px4{padding-right:4rem}.lg-pt4,.lg-py4{padding-top:4rem}.lg-pb4,.lg-py4{padding-bottom:4rem}.lg-p4{padding:4rem}.lg-col,.lg-col-right{box-sizing:border-box}.lg-col{float:left}.lg-col-right{float:right}.lg-col-1{width:8.33333%}.lg-col-2{width:16.66667%}.lg-col-3{width:25%}.lg-col-4{width:33.33333%}.lg-col-5{width:41.66667%}.lg-col-6{width:50%}.lg-col-7{width:58.33333%}.lg-col-8{width:66.66667%}.lg-col-9{width:75%}.lg-col-10{width:83.33333%}.lg-col-11{width:91.66667%}.lg-col-12{width:100%}.lg-col-auto{width:auto}} .flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex } @media (min-width: 40em){ .sm-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex } } @media (min-width: 52em){ .md-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex } .md-justify-center{ -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center } .md-flex-none{ -webkit-box-flex:0; -webkit-flex:none; -ms-flex:none; flex:none; display: block; } } @media (min-width: 64em){ .lg-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex } } .flex-column{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column } .flex-wrap{ -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap } .items-start{ -webkit-box-align:start; -webkit-align-items:flex-start; -ms-flex-align:start; -ms-grid-row-align:flex-start; align-items:flex-start } .items-end{ -webkit-box-align:end; -webkit-align-items:flex-end; -ms-flex-align:end; -ms-grid-row-align:flex-end; align-items:flex-end } .items-center{ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; -ms-grid-row-align:center; align-items:center } .items-baseline{ -webkit-box-align:baseline; -webkit-align-items:baseline; -ms-flex-align:baseline; -ms-grid-row-align:baseline; align-items:baseline } .items-stretch{ -webkit-box-align:stretch; -webkit-align-items:stretch; -ms-flex-align:stretch; -ms-grid-row-align:stretch; align-items:stretch } .self-start{ -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start } .self-end{ -webkit-align-self:flex-end; -ms-flex-item-align:end; align-self:flex-end } .self-center{ -webkit-align-self:center; -ms-flex-item-align:center; align-self:center } .self-baseline{ -webkit-align-self:baseline; -ms-flex-item-align:baseline; align-self:baseline } .self-stretch{ -webkit-align-self:stretch; -ms-flex-item-align:stretch; align-self:stretch } .justify-start{ -webkit-box-pack:start; -webkit-justify-content:flex-start; -ms-flex-pack:start; justify-content:flex-start } .justify-end{ -webkit-box-pack:end; -webkit-justify-content:flex-end; -ms-flex-pack:end; justify-content:flex-end } .justify-center{ -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center } .justify-between{ -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between } .justify-around{ -webkit-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around } .content-start{ -webkit-align-content:flex-start; -ms-flex-line-pack:start; align-content:flex-start } .content-end{ -webkit-align-content:flex-end; -ms-flex-line-pack:end; align-content:flex-end } .content-center{ -webkit-align-content:center; -ms-flex-line-pack:center; align-content:center } .content-between{ -webkit-align-content:space-between; -ms-flex-line-pack:justify; align-content:space-between } .content-around{ -webkit-align-content:space-around; -ms-flex-line-pack:distribute; align-content:space-around } .content-stretch{ -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch } .flex-auto{ -webkit-box-flex:1; -webkit-flex:1 1 auto; -ms-flex:1 1 auto; flex:1 1 auto; min-width:0; min-height:0; } .flex-none{ -webkit-box-flex:0; -webkit-flex:none; -ms-flex:none; flex:none } .order-0{ -webkit-box-ordinal-group:1; -webkit-order:0; -ms-flex-order:0; order:0 } .order-1{ -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1 } .order-2{ -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2 } .order-3{ -webkit-box-ordinal-group:4; -webkit-order:3; -ms-flex-order:3; order:3 } .order-last{ -webkit-box-ordinal-group:100000; -webkit-order:99999; -ms-flex-order:99999; order:99999 } .relative{ position:relative } .absolute{ position:absolute } .fixed{ position:fixed } .top-0{ top:0 } .right-0{ right:0 } .bottom-0{ bottom:0 } .left-0{ left:0 } @media (min-width: 40em) { .sm-relative { position: relative } .sm-absolute { position: absolute } .sm-fixed { position: fixed } .sm-top-0 { top: 0 } .sm-right-0 { right: 0 } .sm-bottom-0 { bottom: 0 } .sm-left-0 { left: 0 } } @media (min-width: 52em) { .md-relative { position: relative } .md-absolute { position: absolute } .md-fixed { position: fixed } .md-top-0 { top: 0 } .md-right-0 { right: 0 } .md-bottom-0 { bottom: 0 } .md-left-0 { left: 0 } } @media (min-width: 64em) { .lg-relative { position: relative } .lg-absolute { position: absolute } .lg-fixed { position: fixed } .lg-top-0 { top: 0 } .lg-right-0 { right: 0 } .lg-bottom-0 { bottom: 0 } .lg-left-0 { left: 0 } } .z1{ z-index: 1 } .z2{ z-index: 2 } .z3{ z-index: 3 } .z4{ z-index: 4 } .z100 { z-index: 100 } .z101 { z-index: 101 } .z102 { z-index: 102 } .z103 { z-index: 103 } .border{ border-style:solid; border-width: 1px; } .border-top{ border-top-style:solid; border-top-width: 1px; } .border-right{ border-right-style:solid; border-right-width: 1px; } .border-bottom{ border-bottom-style:solid; border-bottom-width: 1px; } .border-left{ border-left-style:solid; border-left-width: 1px; } @media (min-width:52em) { .md-border-hide { border: none!important } } hr { border: 0; height: 0; border-bottom: 1px solid currentColor; margin-top: 0; margin-bottom: 0; width: 100px; } /* * Accentstreepjes onder koppen krijgen de secundaire kleur (bruin). * De klassenaam "red" is een restant van de oude huisstijl; hij staat in 28 * templates, vandaar dat hij blijft staan in plaats van overal hernoemd. * Op tekst blijft .red gewoon de primaire kleur. */ hr.red { color: var(--color-secondary); } hr.hr-left { text-align: left; margin-left: 0; margin-right: 0; } hr.wide { width: 32rem; } .border-none{ border:0 } .rounded{ border-radius: 1.5rem } .circle{ border-radius:50% } .rounded-top{ border-radius: 3px 3px 0 0 } .rounded-right{ border-radius: 0 3px 3px 0 } .rounded-bottom{ border-radius: 0 0 3px 3px } .rounded-left{ border-radius: 3px 0 0 3px } .not-rounded{ border-radius:0 } .hide{ position:absolute !important; height:1px !important; width:1px !important; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); } /* End Basscss core */ /* Basscss Responsive Show / Hide */ .lg-show, .md-show, .sm-show, .lg-show-inline, .md-show-inline, .sm-show-inline, .md-show-flex { display: none!important } @media (min-width:40em) { .sm-show { display: block!important } .sm-show-inline { display: inline-block!important } } @media (min-width:52em) { .md-show { display: block!important } .md-show-inline { display: inline-block!important } .md-show-flex { display: -webkit-box!important; display: -webkit-flex!important; display: -ms-flexbox!important; display: flex!important } } @media (min-width:64em) { .lg-show { display: block!important } .lg-show-inline { display: inline-block!important } } @media (min-width:40em) { .sm-hide { display: none!important } } @media (min-width:52em) { .md-hide { display: none!important } } @media (min-width:64em) { .lg-hide { display: none!important } } /* End Basscss Responsive Show / Hide */ /* Basscss Btn */ .btn { font-family: inherit; font-weight: 600; text-decoration: none; cursor: pointer; display: inline-block; line-height: 1.25rem; padding: .75rem 1.5rem; min-width: 8rem; text-align: center; border: 0; vertical-align: middle; -webkit-appearance: none; color: inherit; background-color: transparent; box-sizing: border-box; } .btn:hover { text-decoration: none; } .btn:focus { outline: none; border-color: rgba(0, 0, 0, .125); box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); } ::-moz-focus-inner { border: 0; padding: 0; } /* Basscss Btn Primary */ .btn-primary { color: #fff; background-color: var(--color-primary); -webkit-border-radius: 1.375em; border-radius: 1.375rem; -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; } .btn-primary:hover { color: #fff; -webkit-box-shadow: 0 4px 20px 4px rgba(0,0,0,.15); box-shadow: 0 4px 20px 4px rgba(0,0,0,.15); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .btn-primary:active { -webkit-box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .25); -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1ms; transition: all 1ms; } .btn-primary:disabled, .btn-primary.is-disabled { opacity: .5; pointer-events: none; cursor: default; } /* * Secundaire knop. Klassenaam is een restant van de oude huisstijl. * Het handboekbruin is als knopvlak te licht: witte tekst haalt er 3,58:1 op * en zwarte 4,50:1, allebei onvoldoende. Deze donkerder tint van dezelfde * kleur haalt 5,75:1 met witte tekst. */ .btn-green, .btn-primary.btn-green, .btn-primary.btn-green:hover { background-color: var(--color-secondary-dark); color: var(--color-white); } /* Basscss Btn Outline */ .btn-outline { -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); -webkit-border-radius: 1.375em; border-radius: 1.375rem; -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; } .btn-outline:hover { -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,1); box-shadow: inset 0 0 0 1px rgba(0,0,0,1); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .btn-outline.white { -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); } .btn-outline.white:hover { color: #fff; -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,1); box-shadow: inset 0 0 0 1px rgba(255,255,255,1); } .btn-outline:active { -webkit-transform: translateY(0); transform: translateY(0); opacity: .5; -webkit-transition: all 1ms; transition: all 1ms; } .btn-outline:disabled, .btn-outline.is-disabled { opacity: .5; pointer-events: none; cursor: default; } .btn .icon { margin-top: -.125rem; margin-bottom: -.125rem; margin-left: -.5rem; margin-right: .375rem; } @media (max-width: 40em) { .btn-mobile { width: 100%; text-align: center; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } } /* Basscss Btn Icon */ .btn-icon { height: 1rem; width: 1rem; line-height: 1; display: inline-block; padding: .675rem; border-radius: 50%; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.25); box-shadow: 0 0 0 1px rgba(0,0,0,.25); -webkit-transition: all 300ms; transition: all 300ms; } .btn-icon:hover { -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.5); box-shadow: 0 0 0 1px rgba(0,0,0,.5); -webkit-transform: translateY(-1px); transform: translateY(-1px) } .btn-icon:active { -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.66), inset 0 0 0 20rem rgba(0, 0, 0, .125); box-shadow: inset 0 0 0 1px rgba(0,0,0,.66), inset 0 0 0 20rem rgba(0, 0, 0, .125); -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 20ms; transition: all 20ms; } /* End Basscss Btn */ /* Basscss Background Images */ .bg-cover { background-size: cover } .bg-contain { background-size: contain } .bg-center { background-position: center } .bg-top { background-position: top } .bg-right { background-position: right } .bg-bottom { background-position: bottom } .bg-left { background-position: left } .bg-no-repeat { background-repeat: no-repeat } .bg-repeat-x { background-repeat: repeat-x } .bg-repeat-y { background-repeat: repeat-y } /* End Basscss Background Images */ /* Colors */ .white { color: #fff } .black { color: var(--color-ink) } .gray { color: var(--color-gray) } .red { color: var(--color-primary) } .bg-white { background-color: #fff } .bg-black { background-color: var(--color-ink) } .bg-black-25 { background-color: rgba(0,0,0,.25) } .bg-black-50 { background-color: rgba(0,0,0,.5) } .bg-black-75 { background-color: rgba(0,0,0,.75) } .bg-gray { background-color: var(--color-gray) } .bg-light-gray { background-color: var(--color-surface) } .bg-red { background-color: var(--color-primary) } .border-white { border-color: #fff } .border-white-50 { border-color: rgba(255,255,255,.5) } .border-black { border-color: var(--color-ink) } .border-gray { border-color: var(--color-gray) } .border-light-gray { border-color: var(--color-border) } .border-lighter-gray{ border-color: var(--color-border-light) } .border-red { border-color: var(--color-primary) } .fill-white { fill: #fff } .fill-black { fill: var(--color-ink) } .fill-gray { fill: var(--color-gray) } .fill-red { fill: var(--color-primary) } .fill-green { fill: var(--color-accent-green) } .shadow-line { -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1); box-shadow: 0 1px 0 rgba(0,0,0,.1); } .inset-shadow-bottom { -webkit-box-shadow: inset 0 -10rem 6rem -6rem rgba(0,0,0,.35); box-shadow: inset 0 -10rem 6rem -6rem rgba(0,0,0,.35); } /* Global */ @media (min-width: 76em) { html { font-size: 1.125em } } body { margin: 0; font-family: 'Nunito', sans-serif; line-height: 1.5; color: var(--color-ink); overflow-x: hidden; } p { margin-top: 0; margin-bottom: 2rem; } p + ul, p + ol { margin-top: -1.5rem; } ul, ol { margin-bottom: 2rem; } a { color: var(--color-primary); text-decoration: none; transition: color 200ms; } /* * Bruin haalt als tekstkleur maar 3,58:1 op wit en zakt daarmee door WCAG AA. * Deze links blijven dus primair groen; bruin gebruiken we alleen decoratief. * Klassenaam .blue staat vast in page-atotz.php en script.js. */ a.blue { color: var(--color-primary); } a:hover { color: #000; text-decoration: underline; } /* * Links in bodytekst worden onderstreept. * Reden: het groen haalt 8,55:1 op wit (prima leesbaar) maar slechts 1,88:1 * ten opzichte van de zwarte bodytekst, waardoor je niet ziet dat het een link * is. Een andere huisstijlkleur lost dat niet op - bruin valt wel op tussen de * tekst (4,50:1) maar zakt zelf naar 3,58:1 op wit. Onderstrepen is de enige * oplossing die beide haalt; WCAG staat kleur-plus-onderstreping expliciet toe. * * Alleen p a, zodat menu's, filters en knoppen ongemoeid blijven. */ p a { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; text-decoration-color: var(--color-secondary); } p a:hover { text-decoration-color: currentColor; } ::-moz-selection { color: #777; background: #ddd; } ::selection { color: #777; background: #ddd; } header, main, section { display: block; } .opac-0 { opacity: 0 } .opac-25 { opacity: .25 } .opac-50 { opacity: .5 } .opac-75 { opacity: .75 } .opac-100 { opacity: 1 } .pointer { cursor: pointer } /* Custom Typography */ .huge { font-size: 3rem; line-height: 1.1; } @media (max-width: 52em) { .huge { font-size: 2rem; } } .letter-spacing-25 { letter-spacing: 0.025em } .letter-spacing-50 { letter-spacing: 0.05em } .letter-spacing-100 { letter-spacing: 0.1em } /* End Custom Typography */ /* Containers */ .container { width: 100%; box-sizing: border-box; max-width: 64rem; margin-left: auto; margin-right: auto } .text-container { max-width: 37rem; } @media (min-width: 52em) { .small-container { max-width: 24rem; } } .medium-container { max-width: 48rem; } .large-container { max-width: 54rem; } /* End Containers */ /* Icons */ .icon { display: inline-block; width: 1.5rem; height: 1.5rem; } .icon-sm { display: inline-block; width: 1rem; height: 1rem; } .icon-tiny { display: inline-block; width: .75rem; height: .75rem; margin-top: .125rem; margin-right: .125rem; } .icon-check { display: inline-block; width: .675rem; height: .675rem; } .logo { display: inline-block; width: 6.5rem; } .logo-lg { display: inline-block; max-height: 5rem; max-width: 6rem; position: absolute; bottom: 0; left: 0; } .contact-logo { height: 5rem; position: relative; } .logo-xl { display: inline-block; max-height: 4.5rem; } /* End Icons */ /* Responsive Cover Images */ .cover-img-parent { max-height: 100%; overflow: hidden; position: relative; } .cover-img-parent img { position: relative; height: auto; left: 50%; max-width: 130%; min-height: 100%; min-width: 100%; width: auto; top: 50%; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .cover-img-parent img.small { max-width: 120%; } /* For browsers that support 'object-fit' */ @supports ( object-fit: cover ) { .cover-img-parent img { height: 100%; left: 0; -o-object-fit: cover; object-fit: cover; top: 0; -ms-transform: none; -moz-transform: none; -webkit-transform: none; transform: none; width: 100%; } } /* Responsive videos */ .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Links & Hovers */ .black-link:hover { color: #000; } .white-link:hover { color: #fff; } .opac-hover { -webkit-transition: opacity .5s; transition: opacity .5s; } .opac-hover:hover { opacity: 1; } /* End Links & Hovers */ /* Heights */ @media ( min-width: 76em ) { .vh80 { height: 80vh } } .vh85 { height: 80vh } .vh90 { height: 90vh } .vh100 { min-height: 100vh } @media ( min-width: 52em ) { .md-vh100 { min-height: 100vh } .vh85 { height: 85vh } } .full-height { height: 100% } .h-5 { height: 5rem; } .h-8 { height: 8rem; } .h-10 { height: 10rem; } .h-13 { height: 13rem; } .h-15 { height: 15rem; } .h-20 { height: 20rem; } .h-25 { height: 25rem; } .h-275 { height: 27.5rem;} .h-30 { height: 30rem; } .h-35 { height: 35rem; } .h-40 { height: 40rem; } .h-50 { height: 50rem; } .mh-5 {max-height: 5rem;} .mh-7 {max-height: 7rem;} @media (min-width: 40em) { .sm-h-10 { height: 10rem; } .sm-h-13 { height: 13rem; } .sm-h-15 { height: 15rem; } .sm-h-20 { height: 20rem; } .sm-h-25 { height: 25rem; } .sm-h-30 { height: 30rem; } .sm-h-35 { height: 35rem; } .sm-h-40 { height: 40rem; } .sm-h-50 { height: 50rem; } } @media (min-width: 52em) { .md-h-10 { height: 10rem; } .md-h-13 { height: 13rem; } .md-h-15 { height: 15rem; } .md-h-20 { height: 20rem; } .md-h-25 { height: 25rem; } .md-h-275 { height: 27.5rem;} .md-h-30 { height: 30rem; } .md-h-35 { height: 35rem; } .md-h-40 { height: 40rem; } .md-h-50 { height: 50rem; } } @media (min-width: 64em) { .lg-h-10 { height: 10rem; } .lg-h-13 { height: 13rem; } .lg-h-15 { height: 15rem; } .lg-h-20 { height: 20rem; } .lg-h-25 { height: 25rem; } .lg-h-30 { height: 30rem; } .lg-h-35 { height: 35rem; } .lg-h-40 { height: 40rem; } .lg-h-50 { height: 50rem; } } @media (min-width: 76em) { .xl-h-10 { height: 10rem; } .xl-h-13 { height: 13rem; } .xl-h-15 { height: 15rem; } .xl-h-20 { height: 20rem; } .xl-h-25 { height: 25rem; } .xl-h-30 { height: 30rem; } .xl-h-35 { height: 35rem; } .xl-h-40 { height: 40rem; } .xl-h-50 { height: 50rem; } } @media (min-width: 90em) { .xxl-h-10 { height: 10rem; } .xxl-h-13 { height: 13rem; } .xxl-h-15 { height: 15rem; } .xxl-h-20 { height: 20rem; } .xxl-h-25 { height: 25rem; } .xxl-h-30 { height: 30rem; } .xxl-h-35 { height: 35rem; } .xxl-h-40 { height: 40rem; } .xxl-h-50 { height: 50rem; } } .center-all { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 40em) { .sm-center-all { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @media (min-width: 52em) { .md-center-all { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @media (min-width: 64em) { .lg-center-all { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .center-y { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .center-x { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } /* End Heights */ /* Main menu */ .primary-menu li { margin-right: 1.5rem; } .primary-menu li:last-child { margin-right: 0; } .primary-menu a { text-decoration: none; color: var(--color-ink); display: block; padding-top: .25rem; padding-bottom: .25rem; -webkit-transition: color 300ms; transition: color 300ms; } .primary-menu a:hover { color: #bbb; } .primary-menu .current_page_item a, .primary-menu .current_menu_item a, .primary-menu .current-page-ancestor a, .primary-menu .active a, .primary-menu a.active { color: var(--color-ink); text-decoration: none; -webkit-box-shadow: 0 1px 0 var(--color-secondary); box-shadow: 0 1px 0 var(--color-secondary); } /* * Uitgelicht menu-item (in de admin gemarkeerd met de klasse "red"). * Vroeger viel dit op doordat de merkkleur middenrood was. Het handboekgroen * is bijna net zo donker als de menutekst (1,88:1), dus kleur alleen werkt * niet meer. Vandaar een gevulde pill: witte tekst op groen haalt 8,55:1 en * valt op door vorm in plaats van door kleur. */ .primary-menu .red a, .primary-menu .current_page_item.red a, .primary-menu .current_menu_item.red a, .primary-menu .current-page-ancestor.red a, .primary-menu .active.red a, .primary-menu .red a.active { color: var(--color-white); background-color: var(--color-primary); padding: .25rem .85rem; border-radius: 1rem; box-shadow: none; } .primary-menu .red a:hover { color: var(--color-white); background-color: var(--color-primary-light); text-decoration: none; } /* End Main menu */ /* Mobile menu */ .mobile-menu li { width: 20%; text-align: center; border-right: 1px solid var(--color-border); height: 2.75rem; padding: .375rem 0 0 0; } .mobile-menu:last-child { border: none; } .mobile-menu a { text-decoration: none; color: var(--color-ink); display: block; -webkit-transition: color 300ms; transition: color 300ms; } .mobile-menu .red a { color: var(--color-primary); } .mobile-menu a:before { display: block; content: ''; background-size: 25px 25px; height: 25px; width: 25px; margin: 0 auto .1rem; } .menu-item-62 a:before { background-image: url('../basstheme/images/nav/diensten.svg'); } .menu-item-66 a:before { background-image: url('../basstheme/images/nav/projecten.svg'); } .menu-item-65 a:before { background-image: url('../basstheme/images/nav/deg.svg'); } .menu-item-247 a:before { background-image: url('../basstheme/images/nav/team.svg'); } .menu-item-61 a:before { background-image: url('../basstheme/images/nav/contact.svg'); } .icon-eikel a:before { background-image: url('../basstheme/images/nav/eikel.svg'); } .icon-eikel.red a:before { background-image: url('../basstheme/images/nav/eikel-red.svg'); } .mobile-menu li.current-menu-item, .mobile-menu li.current_page_item { background-color: rgba(0,0,0,.08); } .mobile-menu li.current-menu-item a, .mobile-menu li.current_page_item a { opacity: .75; } .mobile-menu li.hide-mob { display: none; } /* End Mobile menu */ /* Circle Sizes */ .circle-size { width: 5rem; height: 5rem; } @media (min-width: 52em) { .circle-size { width: 7rem; height: 7rem; } } @media (min-width: 64em) { .circle-size { width: 10rem; height: 10rem; } } /* Circle Sizes End */ /* Footer menu */ .footer-menu a { text-decoration: none; color: var(--color-ink); -webkit-transition: color 300ms; transition: color 300ms; } .footer-menu a:hover { color: var(--color-ink); text-decoration: underline; } /* End Footer menu */ /* Dots */ .home .slick-dots { list-style: none; padding: 0; } .home .slick-dots li { display: inline-block; margin: 0 .2rem 0 .2rem; transition: all .25s; } @media (min-width: 52em) { .home .slick-dots { display: none !important; } } .home .slick-dots li button { border-radius: 5rem; background: transparent; border: 1px solid #fff; color: transparent; width: 15px; height: 15px; font-size: 0rem; } .home .slick-dots .slick-active { border-radius: 5rem; background: #fff; color: transparent; width: 15px; height: 15px; font-size: 0rem; } /* End Dots */ /* Animations */ @keyframes fly-in-right { from { opacity: 0; transform:translateX(250px); -webkit-transform:translateX(250px); } to { opacity: 1; transform:translateX(0px); -webkit-transform:translateX(0px); } } @keyframes fly-in-left { from { opacity: 0; transform:scale(3); -webkit-transform:scale(3); } to { opacity: 1; transform:scale(1); -webkit-transform:scale(1); } } @keyframes shrink { from { opacity: 0; transform:scale(20); -webkit-transform:scale(20); } to { opacity: 1; transform:translateX(1); -webkit-transform:translateX(1); } } @-webkit-keyframes peek { 0% { margin-left: 0px } 35% { margin-left: -30px } 40%{ margin-left: 5px } 45%{ margin-left: -2px } 50%{ margin-left: 1px } 55%{ margin-left: -1px } 60%{ margin-left: 0px } 100%{ margin-left: 0px } } /* Animations End */ /* Animation classes */ .fly-in-right { animation: fly-in-right 1.5s ease 1.5s; animation-fill-mode: forwards; -webkit-animation: fly-in-right 1.5s ease 1.5s; -webkit-animation-fill-mode: forwards; } .fly-in-left { animation: fly-in-left 1s ease .5s; animation-fill-mode: forwards; -webkit-animation: fly-in-left 1s ease .5s; -webkit-animation-fill-mode: forwards; } .shrink { animation: shrink .5s ease 2.5s; animation-fill-mode: forwards; -webkit-animation: shrink .5s ease 2.5s; -webkit-animation-fill-mode: forwards; } .perspective { perspective: 60rem; } .certificaat-logo { transition: all .17s ease-in-out; -webkit-transition: all .17s ease-in-out; z-index: 999; box-shadow: none; } .certificaat-logo:hover { transform: rotateY(20deg); transform-origin: 100%; -webkit-transform: rotateY(20deg); transition: all .17s ease-in-out; -webkit-transition: all .17s ease-in-out; -webkit-box-shadow: -35px -1px 27px -7px rgba(0,0,0,0.13); -moz-box-shadow: -35px -1px 27px -7px rgba(0,0,0,0.13); box-shadow: -35px -1px 27px -7px rgba(0,0,0,0.13); } @media (max-width: 52em) { .peek { animation: peek 3.5s infinite ease-out; } } .progress { width: 0%; transition: width 1s, opacity 1s; -webkit-transition: width 1s, opacity 1s; float: right; z-index: 99; opacity: .1; } .active-title { width: 100%; transition: width 6.5s linear, opacity .5s; -webkit-transition: width 6.5s linear, opacity .5s; float: left; opacity: 1; } /* Animations End */ /* Searchform */ .searchform { border-radius: 1.175rem; background-color: #fff; } .input-search { font-family: inherit; font-size: 16px; display: block; width: 13rem; height: 2.35rem; box-sizing: border-box; padding-top: .675rem; padding-bottom: .675rem; padding-left: 1.5rem; border: 1px solid rgba(0,0,0,.25); -webkit-transition: border 100ms, width 200ms; transition: border 100ms, width 200ms; -webkit-appearance: none; border-radius: 1.175rem; background-color: transparent; } .header .input-search { width: 2.35rem; text-indent: 1rem; } .header .input-search::-webkit-search-decoration, .header .input-search::-webkit-search-cancel-button, .header .input-search::-webkit-search-results-button, .header .input-search::-webkit-search-results-decoration { display: none; } .input-search:focus, input.input-search:active { border-color: rgba(0,0,0,.66); width: 13rem; outline: none; } .header .input-search:focus { text-indent: .5rem; } @media (max-width: 24em) { .header .input-search:focus { -webkit-box-shadow: -3rem 0 0 1rem #fff; box-shadow: -3rem 0 0 1rem #fff; } } .header .input-search:focus::-webkit-search-decoration, .header .input-search:focus::-webkit-search-cancel-button, .header .input-search:focus::-webkit-search-results-button, .header .input-search:focus::-webkit-search-results-decoration { display: block; } .search-btn { top: .625rem; left: .75rem; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--color-gray-mid); font-size: .8rem; line-height: 1.25rem; } ::-moz-placeholder { /* Firefox 19+ */ color: var(--color-gray-mid); font-size: .8rem; line-height: 1.25rem; } :-ms-input-placeholder { /* IE 10+ */ color: var(--color-gray-mid); font-size: .8rem; line-height: 1.25rem; } :-moz-placeholder { /* Firefox 18- */ color: var(--color-gray-mid); font-size: .8rem; line-height: 1.25rem; } .page-numbers { list-style:none; padding-left:0; letter-spacing: -.31em; } .page-numbers li { letter-spacing: normal; display: inline-block; } a.page-numbers { letter-spacing: normal; color: var(--color-ink); } .page-numbers .current { opacity: .5; } /* Filters */ .filters li { margin-right: 0; } .filters a { text-decoration: none; color: var(--color-ink); display: block; padding: .25rem .5rem; -webkit-border-radius: 1rem; border-radius: 1rem; -webkit-transition: color 300ms; transition: color 300ms; } .filters a:hover { color: #bbb; } .filters .active a { color: #fff; background-color: var(--color-primary); margin-left: .375rem; margin-right: .375rem; } .filters li:first-child.active { margin-left: 0; } .filters li:last-child.active { margin-right: 0; } /* Reveal links */ .reveal-link.circle { z-index: 2; } .reveal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; -webkit-transition: opacity 300ms cubic-bezier(.79,.17,.33,.91); transition: opacity 300ms cubic-bezier(.79,.17,.33,.91); } .reveal-link:hover .reveal { opacity: 1; } .btn-small { padding: .5rem .75rem; min-width: 0; } /* Diensten overlays */ .overlay-diensten, .grow-hover { transition: all .5s; -webkit-transition: all .5s ; } .grow-hover { transform: scale(1.3) translateY(0px); -webkit-transform: scale(1.3) translateY(0px)!important; } .overlay-diensten:hover .grow-hover { transform: scale(1.3) translateY(-10%); -webkit-transform: scale(1.3) translateY(-10%)!important; } .overlay-diensten .opac-hover { opacity: 0; transition: all .5s cubic-bezier(.52,.04,.63,.93); -webkit-transition: all .5s cubic-bezier(.52,.04,.63,.93); } .overlay-diensten:hover .opac-hover { opacity: 1; } /* Slides */ .slide { transform: translateY(35px); -webkit-transform: translateY(35px); transition: all .5s; -webkit-transition: all .5s; } .slideup { max-height: 0; opacity: 0; transition: all 1s; -webkit-transition: all 1s; } .overlay-diensten:hover .slide { transform: translateY(0px); -webkit-transform: translateY(0px); } .overlay-diensten:hover .slideup { max-height: 100px; opacity: 1; } .overflow-x { overflow-x: auto; } /* Gallery */ .gallery { position: relative; } .gallery .slide { outline: none; display: block; } @media (min-width: 768px) { .gallery .slide { height: 25rem; margin-left: .5rem; margin-right: .5rem; opacity: .33; } .gallery .slick-current { opacity: 1; } .gallery img { height: 100%; } .gallery .slick-arrow { position: absolute; z-index: 10; cursor: pointer; -web-appearance: none; background: none transparent; outline: none; color: rgba(0,0,0,0); border: 0; top: 0; bottom: 0; width: 25%; opacity: .5; -webkit-transition: opacity 200ms; transition: opacity 200ms; } .gallery .slick-arrow:hover { opacity: 1; } .gallery .slick-arrow:before { position: absolute; top: 50%; height: 3rem; width: 3rem; content: ''; display: inline-block; background-color: #222; background-size: 1.75rem 1.5rem; background-position: center; background-repeat: no-repeat; } .gallery .slick-prev { left: 0; } .gallery .slick-prev:before { left: 0; background-image: url(images/left-arrow.svg); } .gallery .slick-next { right: 0; } .gallery .slick-next:before { right: 0; background-image: url(images/right-arrow.svg); } } .gallery .slick-dots { position: absolute; bottom: -35px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .gallery .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0; padding: 0; cursor: pointer; } .gallery .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 7px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .gallery .slick-dots li button:before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; opacity: .25; background-color: black; } .gallery .slick-dots li.slick-active button:before { opacity: .75; } /* Simple Lightbox */ .slbOverlay,.slbWrapOuter,.slbWrap{position:fixed;top:0;right:0;bottom:0;left:0}.slbOverlay{overflow:hidden;z-index:2000;background-color:#000;opacity:0.7;-webkit-animation:slbOverlay 0.5s;-moz-animation:slbOverlay 0.5s;animation:slbOverlay 0.5s}.slbWrapOuter{overflow-x:hidden;overflow-y:auto;z-index:2010}.slbWrap{position:absolute;text-align:center}.slbWrap:before{content:"";display:inline-block;height:100%;vertical-align:middle}.slbContentOuter{position:relative;display:inline-block;vertical-align:middle;margin:0px auto;padding:0 1em;box-sizing:border-box;z-index:2020;text-align:left;max-width:100%}.slbContentEl .slbContentOuter{padding:5em 1em}.slbContent{position:relative}.slbContentEl .slbContent{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;background-color:#fff;box-shadow:0 0.2em 1em rgba(0,0,0,0.4)}.slbImageWrap{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;position:relative}.slbImageWrap:after{content:"";position:absolute;left:0;right:0;top:5em;bottom:5em;display:block;z-index:-1;box-shadow:0 0.2em 1em rgba(0,0,0,0.6);background-color:#FFF}.slbDirectionNext .slbImageWrap{-webkit-animation:slbEnterNext 0.4s;-moz-animation:slbEnterNext 0.4s;animation:slbEnterNext 0.4s}.slbDirectionPrev .slbImageWrap{-webkit-animation:slbEnterPrev 0.4s;-moz-animation:slbEnterPrev 0.4s;animation:slbEnterPrev 0.4s}.slbImage{width:auto;max-width:100%;height:auto;display:block;line-height:0;box-sizing:border-box;padding:5em 0;margin:0 auto}.slbCaption{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;font-size:1.4em;position:absolute;left:0;right:0;bottom:0;padding:.71429em 0;color:#fff;color:rgba(255,255,255,0.7);text-align:center}.slbCloseBtn,.slbArrow{margin:0;padding:0;border:0;cursor:pointer;background:none}.slbCloseBtn::-moz-focus-inner,.slbArrow::-moz-focus-inner{padding:0;border:0}.slbCloseBtn:hover,.slbArrow:hover{opacity:0.5}.slbCloseBtn:active,.slbArrow:active{opacity:0.8}.slbCloseBtn{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;font-size:3em;width:1.66667em;height:1.66667em;line-height:1.66667em;position:absolute;right:-.33333em;top:0;color:#fff;color:rgba(255,255,255,0.7);text-align:center}.slbLoading .slbCloseBtn{display:none}.slbLoadingText{font-size:1.4em;color:#fff;color:rgba(255,255,255,0.9)}.slbArrows{position:fixed;top:50%;left:0;right:0}.slbLoading .slbArrows{display:none}.slbArrow{position:absolute;top:50%;margin-top:-5em;width:5em;height:10em;opacity:0.7;text-indent:-999em;overflow:hidden}.slbArrow:before{content:"";position:absolute;top:50%;left:50%;margin:-.8em 0 0 -.8em;border:.8em solid transparent}.slbArrow.next{right:0}.slbArrow.next:before{border-left-color:#fff}.slbArrow.prev{left:0}.slbArrow.prev:before{border-right-color:#fff}.slbIframeCont{width:80em;height:0;overflow:hidden;padding-top:56.25%;margin:5em 0}.slbIframe{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:0 0.2em 1em rgba(0,0,0,0.6);background:#000}@-webkit-keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@-moz-keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@-webkit-keyframes slbEnter{from{opacity:0;-webkit-transform:translate3d(0, -1em, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnter{from{opacity:0;-moz-transform:translate3d(0, -1em, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnter{from{opacity:0;-webkit-transform:translate3d(0, -1em, 0);-moz-transform:translate3d(0, -1em, 0);-ms-transform:translate3d(0, -1em, 0);-o-transform:translate3d(0, -1em, 0);transform:translate3d(0, -1em, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slbEnterNext{from{opacity:0;-webkit-transform:translate3d(4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnterNext{from{opacity:0;-moz-transform:translate3d(4em, 0, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnterNext{from{opacity:0;-webkit-transform:translate3d(4em, 0, 0);-moz-transform:translate3d(4em, 0, 0);-ms-transform:translate3d(4em, 0, 0);-o-transform:translate3d(4em, 0, 0);transform:translate3d(4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slbEnterPrev{from{opacity:0;-webkit-transform:translate3d(-4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnterPrev{from{opacity:0;-moz-transform:translate3d(-4em, 0, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnterPrev{from{opacity:0;-webkit-transform:translate3d(-4em, 0, 0);-moz-transform:translate3d(-4em, 0, 0);-ms-transform:translate3d(-4em, 0, 0);-o-transform:translate3d(-4em, 0, 0);transform:translate3d(-4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}