.subpage header.title{background:#fff;position:relative;margin:56px 0 40px 0} .subpage header.title .text{width:50%;padding:80px 32px 80px 56px} .subpage header.title h1{font-size:40px;line-height:1.1;margin:0 0 12px 0} .subpage header.title p{margin:0;color:#52687f} .subpage header.title p+p{margin:16px 0 0 0} .subpage header.title .image{background:#e2e6e6;width:50%;height:100%;position:absolute;top:-24px;right:-24px;background-size:cover;background-position:right} .subpage .body{background:#fff;padding:48px 0} .subpage .body h2{font-size:16px;line-height:24px;margin:0 0 2px 0} .subpage .body h3{font-size:13px;line-height:21px} .subpage .body p{margin:0 0 16px 0;color:#52687f} .subpage .body>article{display:flex} .subpage .body .text{width:65%;padding-right:48px} .subpage .body .text img{margin:8px 0 24px 0;max-width:100%} .subpage .body .text blockquote{font-size:20px!important;line-height:36px;border:0;padding:0;margin:24px 0;color:#52687f;position:relative} .subpage .body .text blockquote.quote::after,.subpage .body .text blockquote.quote::before{display:block} .subpage .body .text blockquote::after,.subpage .body .text blockquote::before{display:none;content:'“';font-family:Georiga;font-weight:700;color:#b4bfca;font-size:30px;line-height:36px;position:relative;top:5px} .subpage .body .text blockquote::after{content:'”'} .subpage .side-bar{width:35%;order:1;position:relative} .subpage .side-bar .index{background:#ecf0f0;padding:24px 24px 22px 24px;margin-bottom:24px} .subpage .side-bar .index a{color:#00829b;font-weight:700} .subpage .side-bar .index li{margin-top:8px} .subpage .side-bar .index li::before{content:"\f054";font-family:"Font Awesome 5 Pro";margin-right:3px;font-size:11px;color:#00829b} .subpage .side-bar .fixed-wrap{position:sticky;top:24px} .subpage .side-bar.fixed .fixed-wrap{position:fixed;top:24px;right:calc(((100vw - 1176px)/ 2) + 24px);width:calc(1128px * .35)} .subpage .side-bar.absolute .fixed-wrap{position:absolute;bottom:0;top:auto;right:0;width:100%} .subpage .c2a{background:#304457;color:#fff} .subpage .agenda{padding:48px 0;overflow:hidden;position:relative} .subpage .agenda::after,.subpage .agenda::before{content:"";position:absolute;top:0;width:calc((100vw - 1176px)/ 2);height:100%;z-index:3} .subpage .agenda::before{left:0;background:-moz-linear-gradient(left,rgba(236,240,240,1) 0,rgba(236,240,240,0) 100%);background:-webkit-linear-gradient(left,rgba(236,240,240,1) 0,rgba(236,240,240,0) 100%);background:linear-gradient(to right,rgba(236,240,240,1) 0,rgba(236,240,240,0) 100%)} .subpage .agenda::after{right:0;background:-moz-linear-gradient(right,rgba(236,240,240,1) 0,rgba(236,240,240,0) 100%);background:-webkit-linear-gradient(right,rgba(236,240,240,1) 0,rgba(236,240,240,0) 100%);background:linear-gradient(to left,rgba(236,240,240,1) 0,rgba(236,240,240,0) 100%)} .subpage .agenda .top{display:flex;margin-bottom:32px} .subpage .agenda .top .text{flex-grow:1;display:flex;align-items:center;padding-right:16px} .subpage .agenda h2{font-size:24px;line-height:32px} .subpage .search-bar{width:calc((100% / 3) - 16px);display:block;position:relative} .subpage .search-bar input{background:#fff;border:0;outline:0;padding:12px 12px 12px 32px;margin:0;width:100%} .subpage .search-bar::after{content:"\f002";font-family:"Font Awesome 5 Pro";font-size:12px;font-weight:700;position:absolute;top:10px;left:13px;color:#adbbc1} .subpage .search-bar .search-cancel{display:none;position:absolute;top:6px;right:0;color:red;padding:8px;cursor:pointer} .subpage .search-bar.active .search-cancel{display:block} .subpage .agenda .articles{position:relative} .subpage .agenda .articles-view{overflow:hidden;margin-top:-17px} .subpage .agenda .articles-scroll{position:relative;display:flex;justify-content:flex-start;overflow-y:auto;padding-bottom:17px;top:17px} .subpage .agenda .articles-wrap{position:relative;left:0;display:flex;padding:0 calc((100vw - 1128px)/ 2)} .subpage .agenda .articles-wrap.animate{transition:left .2s} .subpage .agenda .articles-wrap.no-result{min-height:120px} .subpage .agenda .articles-wrap.no-result::after,.subpage .agenda .articles-wrap.no-result::before{display:flex;align-items:center;color:#afbfc4} .subpage .agenda .articles-wrap.no-result::before{content:'\f865';font-family:'Font Awesome 5 Pro';margin:0 4px 0 0;font-size:28px;position:relative;top:-1px;font-weight:lighter} .subpage .agenda .articles-wrap.no-result::after{content:attr(data-no-result);font-size:24px} .subpage .agenda .news-item{display:none;width:calc((1128px / 3) - 16px)} .subpage .agenda .news-item.show{display:block;margin:0} .subpage .agenda .news-item.show~.show{margin:0 0 0 24px} .subpage .agenda .news-item.future .image-wrap,.subpage .agenda .news-item.future .info{opacity:.2;cursor:default} .subpage .agenda .news-item.future{background:#f6f8f8} .subpage .agenda .news-item.future .date::before{content:"\f073";font-family:"Font Awesome 5 Pro";font-weight:400;margin-right:5px;font-size:14px} .subpage .agenda .news-item.future .date{margin:0;padding:11px 8px 8px 8px;position:absolute;left:50%;top:0;transform:translateX(-50%);line-height:1;text-align:center;font-weight:700;text-transform:uppercase;z-index:1;background:#f6f8f8;white-space:nowrap} .subpage .agenda .news-item.future a{cursor:default} .subpage .agenda .news-item.future .image-wrap:hover .image{transform:none!important} .subpage .agenda .button{position:absolute;top:calc(50% - 40px);width:120px;height:80px;background:#fff;color:#00829b;z-index:4;box-shadow:0 0 20px rgba(15,60,60,.1);cursor:pointer;transition:all .2s} .subpage .agenda .button.prev{left:-40px;border-radius:0 80px 80px 0} .subpage .agenda .button:hover{height:96px;top:calc(50% - 48px)} .subpage .agenda .button.prev:hover{left:-32px} .subpage .agenda .button.next:hover{right:-32px} .subpage .agenda .button.prev:hover:active{left:-28px} .subpage .agenda .button.next:hover:active{right:-28px} .subpage .agenda .button.next{right:-40px;border-radius:80px 0 0 80px} .subpage .agenda .button::before{font-family:"Font Awesome 5 Pro";font-size:24px;line-height:1;font-weight:700;position:absolute;top:calc(50% - 11px)} .subpage .agenda .button.prev::before{content:"\f053";right:36px} .subpage .agenda .button.next::before{content:"\f054";left:36px} .subpage .agenda .button.disabled{opacity:0;cursor:default} .subpage .agenda .progress{width:0%;height:8px;background:#3cb9c4;transition:width .2s;position:absolute;bottom:0;left:0;z-index:3} .subpage.retail header .image{background-image:url(https://cdn.softwaresystemen.nl/nodes/theme/retail/header.webp)} .nowebp .subpage.retail header .image{background-image:url(https://cdn.softwaresystemen.nl/nodes/theme/retail/header.jpg)} @media screen and (max-width:1200px){ .subpage .side-bar.fixed .fixed-wrap{width:calc((100vw - 48px) * .35);right:24px} .subpage .side-bar.absolute .fixed-wrap{right:0} .subpage .side-bar .index{padding:16px} .subpage .agenda .articles-wrap{padding:0 24px} .subpage .agenda .news-item{width:calc(((100vw - 48px)/ 3) - 11px);margin:0} .subpage .agenda .news-item.show{margin:0} .subpage .agenda .news-item.show~.show{margin:0 0 0 16px} .subpage .search-bar{width:calc((100% / 3) - 8px)} } @media screen and (max-width:1024px){ .subpage header.title{margin:48px 0 32px 0} .subpage header.title h1{font-size:32px} .subpage header.title .text{width:65%;padding:48px 40px 40px 40px} .subpage header.title .image{width:calc(35% + 24px)} .subpage .body{padding:32px 0} .subpage .agenda .news-item{width:calc(((100vw - 48px)/ 2) - 8px)} .subpage .agenda .button{top:60px} .subpage .agenda .button:hover{top:52px} .subpage.retail header .image{background-position:85% center} } @media screen and (max-width:900px){ .subpage .agenda .button{display:none} .subpage .agenda .news-item{width:320px} } @media screen and (max-width:800px){ .subpage header.title{margin-top:184px} .subpage header.title h1 br{display:none} .subpage header.title h1{font-size:24px} .subpage header.title .text{width:100%;padding:28px 24px 20px 24px} .subpage header.title .image{width:100%;height:calc(100% + 128px);z-index:-1;top:-160px;left:24px} .subpage .body .text{width:calc(100% - 260px);padding-right:24px} .subpage .body .text blockquote{font-size:18px!important;line-height:32px} .subpage .body .text blockquote::after,.subpage .body .text blockquote::before{font-size:24px;line-height:32px} .subpage .side-bar{width:260px} .subpage .side-bar.fixed .fixed-wrap{width:260px} .subpage .agenda{padding:32px 0} .subpage .agenda .top{display:block} .subpage .agenda .top .text{padding-right:0} .subpage .search-bar{width:100%;margin-top:16px} } @media screen and (max-width:640px){ .subpage .body>article{display:block} .subpage .body .text img{max-width:calc(100% + 48px);margin-left:-24px} .subpage .side-bar{width:100%;margin-bottom:24px} .subpage .side-bar .fixed-wrap,.subpage .side-bar.absolute .fixed-wrap,.subpage .side-bar.fixed .fixed-wrap{position:static;width:100%} .subpage .body .text{width:100%;padding-right:0} }