/*
html, body {margin: 0; padding: 0; background-color: rgba(34,31,31,1); line-height: 20px; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 14px; overflow-x: hidden;}
h1, h2, h3, h4, h5, h6, p {margin: 20px 0 0 0; padding: 0;}
h1 {line-height: 32px; font-size: 32px;}
h2 {line-height: 32px; font-size: 20px;}
h3 {line-height: 20px; font-size: 18px;}
h4, h5, h6 {line-height: 20px; font-size: 14px;}
hr {border-top-color: rgba(194,194,194,1);}
a, a:hover {color: rgba(34,31,31,1);}
a.block-link {margin: unset; padding: 10px 20px; background-color: rgba(120,190,32,1); border: unset; color: rgba(255,255,255,1); display: inline-block; position: relative;}
a.block-link:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 40px 0 0 41px; border-color: transparent transparent transparent rgba(120,190,32,1); display: block; position: absolute; content: "";}
a.block-link:hover {text-decoration: underline;}
ul {margin: 0 0 20px 0;}
ul, ul li {padding: unset;}
ul li {margin: 0; list-style-image: url('../images/img_list_image.png'); list-style-position: inside;}
ul li a, ul li a:hover {color: rgba(120,190,32,1);}
.buttons a.block-link {color: #fff;}
.header {background-color: rgba(34,31,31,1); position: relative;}
.header .logo.tile {left: 0; bottom: -10px; width: 25%; height: 10px; background-color: rgba(120,190,32,1); position: absolute;}
.header .header-logo {margin: 20px 0 -10px 0; float: left;}
.header .header-logo img {max-height: 96px;}
.header .header-links-wrapper {margin: 28px 0 0 0; float: right;}
.header .header-links-wrapper .welcome-message {line-height: 32px; font-size: 24px; font-weight: 300; color: rgba(120,190,32,1); float: right;}
.header .header-links-wrapper .contact-message, .header .header-links-wrapper .contact-message i {vertical-align: middle;}
.header .header-links-wrapper .contact-message {line-height: 32px; margin-left: 20px; font-size: 16px; font-weight: 900; color: rgba(255,255,255,1); float: right;}
.header .header-links-wrapper .contact-message i {margin-right: 10px; font-size: 24px; display: inline-block;}
.header .header-links-wrapper .contact-message a {text-decoration: none; color: rgba(255,255,255,1);}
.header .header-links-wrapper .contact-message a:hover {color: rgba(120,190,32,1);}
.header .header-links-wrapper .header-links {}
.header .header-links-wrapper .header-links ul {float: right;}
.header .header-links-wrapper .header-links ul, .header .header-links-wrapper .header-links ul li {margin: 0; padding: 0;}
.header .header-links-wrapper .header-links ul li {margin-left: 20px; list-style-type: none; display: inline; float: left;}
.header .header-links-wrapper .header-links ul li:first-of-type {margin-left: unset;}
.header .header-links-wrapper .header-links ul li a {line-height: 32px; font-size: 16px; font-weight: 700; text-decoration: none; text-transform: uppercase; color: rgba(255,255,255,1);}
.header .header-links-wrapper .header-links ul li a:hover {color:rgba(120,190,32,1);}
.header-menu {padding: 48px 0; background-color: rgba(255,255,255,1); border-bottom: 1px solid rgba(194,194,194,1);}
.header-menu .payoff {line-height: 32px; font-size: 28px; font-weight: 300; color: rgba(120,190,32,1); float: left;}
.header-menu ul.top-menu {float: right;}
.header-menu ul.top-menu, .header-menu ul.top-menu li {margin: 0; padding: 0;}
.header-menu ul.top-menu li {margin-left: 20px; list-style-type: none; display: inline; float: left;}
.header-menu ul.top-menu li:first-of-type {margin-left: unset;}
.header-menu ul.top-menu li a {line-height: 32px; font-size: 16px; font-weight: 700; text-decoration: none; text-transform: uppercase; color: rgba(34,31,31,1);}
.header-menu ul.top-menu li a:hover {color:rgba(120,190,32,1);}
.header-menu ul.top-menu li i {width: 32px; height: 32px; line-height: 32px; font-size: 18px; font-weight: 700; text-decoration: none; text-transform: uppercase; color: rgba(34,31,31,1); cursor: pointer;}
.header-menu ul.top-menu li i.is-active, .header-menu ul.top-menu li i:hover {color:rgba(120,190,32,1);}
.header-menu ul.top-menu li ul {display: none;}
.breadcrumb {padding: 20px 0 0 0;}
.breadcrumb ul, .breadcrumb ul li {margin: unset; padding: unset;}
.breadcrumb ul li {list-style-type: none; display: inline-block; float: left;}
.breadcrumb ul li a {}
.breadcrumb ul li a {margin: unset; padding: 0 10px 0 20px; background-color: rgba(204,204,204,1); font-size: 14px; color: rgba(34,31,31,1); display: inline-block; position: relative;}
.breadcrumb ul li a:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 20px 0 0 21px; border-color: transparent transparent transparent rgba(204,204,204,1); display: block; position: absolute; content: "";}
.breadcrumb ul li:not(:first-of-type) a {margin: 0 0 0 23px; padding: 0 10px 0 20px; background-color: rgba(204,204,204,1); font-size: 14px; color: rgba(34,31,31,1); display: inline-block; position: relative;}
.breadcrumb ul li:not(:first-of-type) a:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 20px 0 0 21px; border-color: transparent transparent transparent rgba(204,204,204,1); display: block; position: absolute; content: "";}
.breadcrumb ul li:not(:first-of-type) a:before {top: 0; left: -21px; width: 0; height: 0; border-style: solid; border-width: 0 21px 20px 0; border-color: transparent rgba(204,204,204,1) transparent transparent; display: block; position: absolute; content: "";}
.breadcrumb ul li:not(:first-of-type) span.current-item {margin: 0 0 0 23px; padding: 0 10px; background-color: rgba(120,190,32,1); font-size: 14px; color: rgba(255,255,255,1); display: inline-block; position: relative;}
.breadcrumb ul li:not(:first-of-type) span.current-item:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 20px 0 0 21px; border-color: transparent transparent transparent rgba(120,190,32,1); display: block; position: absolute; content: "";}
.breadcrumb ul li:not(:first-of-type) span.current-item:before {top: 0; left: -21px; width: 0; height: 0; border-style: solid; border-width: 0 21px 20px 0; border-color: transparent rgba(120,190,32,1) transparent transparent; display: block; position: absolute; content: "";}
.master-wrapper-content {background-color: rgba(255,255,255,1);}
.master-wrapper-content .master-column-wrapper {padding: 20px 0 0 0;}
.html-home-page .master-wrapper-content .master-column-wrapper {padding: unset;}
.html-home-page .page {padding: 0;}
.page a {color:#7dbf2f;}
.page a.block-link {color: rgba(255,255,255,1);}
.page {padding: 20px 0 40px 0;}
.page.category-page {padding-bottom: unset;}
.page.category-page .product-grid {margin: 20px 0 0 0;}
.pager {text-align: center; display: block;}
.pager ul {margin: 10px auto 40px auto; display: table;}
.pager ul:after {content: ""; display: table; clear: both;}
.pager ul li:first-of-type {margin-left: 0;}
.pager ul li {margin-left: 10px; display: inline-block; float: left;}
.pager ul li a, .pager ul li span {width: 32px; height: 32px; line-height: 32px; background-color: rgba(120,190,32,1); text-align: center; color: #FFFFFF; display: block;}
.pager ul li.first-page {}
.pager ul li.first-page a {font-family: FontAwesome;}
.pager ul li.previous-page {}
.pager ul li.previous-page a {font-family: FontAwesome;}
.pager ul li.current-page {}
.pager ul li.current-page span {background-color: rgba(34,31,31,1);}
.pager ul li.individual-page {}
.pager ul li.individual-page a {}
.pager ul li.next-page {}
.pager ul li.next-page a {font-family: FontAwesome;}
.pager ul li.last-page {}
.pager ul li.last-page a {font-family: FontAwesome;}
.topic-page-assortment .category-grid.home-page-category-grid {border-top: 1px solid rgba(194,194,194,1);}
.category-grid.home-page-category-grid {padding: 40px 0 20px 0;}
.category-grid.home-page-category-grid .item-grid .category-item {position: relative; z-index: 2;}
.category-grid.home-page-category-grid .item-grid .category-item .picture {border: 1px solid rgba(194,194,194,1);}
.category-grid.home-page-category-grid .item-grid .category-item .picture a img {margin: 0 auto;}
.category-grid.home-page-category-grid .item-grid .category-item .info {padding: 20px 0;}
.category-grid.home-page-category-grid .item-grid .category-item .description p {height: 80px; margin: 0 0 20px 0; text-overflow: ellipsis; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; color: rgba(34,31,31,1);}
.news-items {}
.news-items .news-item {margin: 0 0 20px 0;}
.news-items .news-item:last-child {margin: unset;}
.news-items .news-item img {border: 10px solid rgba(0,0,0,0.1);}
.news-items .news-item h2 {margin: unset;}
.news-items .news-item p.date, .news-item-page p.date {color: rgba(204,204,204,1);}
.news-items .news-item .buttons {margin: 20px 0 0 0;}
.news-item-page h1 {margin: unset;}
.vacatures {}
.vacatures .vacature {margin: 0 0 20px 0;}
.vacatures .vacature:last-child {margin: unset;}
.vacatures .vacature h2 {margin: unset;}
.vacatures .vacature p.date, .vacature-page p.date {color: rgba(204,204,204,1);}
.vacatures .vacature .buttons {margin: 20px 0 0 0;}
.vacature-page h1 {margin: unset;}
.vacature-page .buttons {margin: 20px 0 0 0;}
.aside {margin: 0 0 40px 0; padding: 20px 20px 0 20px; border: 1px solid rgba(194,194,194,1);}
.aside h3 {line-height: 32px; margin: 0 0 20px -20px; padding: 4px 20px; background-color: rgba(34,31,31,1); color: rgba(255,255,255,1); display: inline-block; position: relative;}
.aside h3:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 40px 0 0 41px; border-color: transparent transparent transparent rgba(34,31,31,1); display: block; position: absolute; content: "";}
.aside ul, .block ul li {margin: unset; padding: unset;}
.aside ul {margin: 0 0 20px 0; list-style-type: none;}
.aside ul li {line-height: 30px; padding: 0 0 0 32px; list-style-image: unset; background-image: url('../images/list_icon_black.png'); background-position: 0 9px; background-size: 12px; background-repeat: no-repeat;}
.aside ul li.active, .aside ul li:hover {background-image: url('../images/list_icon_green.png');}
.aside ul li a {text-decoration: none; color: rgba(34,31,31,1);}
.aside ul li.active a, .aside ul li:hover a {color: rgba(120,190,32,1);}
.aside .buttons {margin-bottom: 20px;}
.product-item {margin: 0 0 30px 0; border: 1px solid rgba(194,194,194,1);}
.product-item img {margin: 0 auto;}
.product-item > .top {padding: 20px;}
.product-item h2 {font-size: 14px; line-height: 20px; height: 20px; margin: unset; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-top: 20px;}
.product-item h2 a {color: #333;}
.product-item p.category-name {height: 20px; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.product-item .description {height: 80px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.product-item .product-attributes {}
.product-item .product-attributes ul {margin: 0 0 20px 0; list-style-type: none;}
.product-item .product-attributes ul li {padding: 0 0 0 32px; background-image: url('../images/list_icon_black.png'); background-position: left 4px; background-size: 12px; background-repeat: no-repeat;}
.product-item .buttons {margin-left: -1px; margin-bottom: -1px;}
.product-item .buttons a {color: #fff;}
.product-item.small {margin: 0 0 40px 0; padding: 0px; border: 0px;}
.product-item.small img {margin: 0 auto;}
.product-item.small .details h3 {font-size: 14px; line-height: 20px; height: 20px; margin: unset; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-top: 20px;}
.product-item.small .details p.category-name {font-weight: 700;}
.product-item.small .details .product-attributes {}
.product-item.small .details .product-attributes ul {margin: 0 0 20px 0; list-style-type: none;}
.product-item.small .details .product-attributes ul li {padding: 0 0 0 32px; background-image: url('../images/list_icon_black.png'); background-position: left 4px; background-size: 12px; background-repeat: no-repeat;}
.product-item.small .details .add-info .buttons {margin: 20px 0 0 0;}
.product-essential img {margin: 0 auto;}
.product-essential .overview {margin: 0;}
.product-essential .overview .short-description {margin: 0 0 20px 0;}
.product-essential .overview .full-description {margin: 0 0 30px 0;}
.product-essential .overview .attributes {margin: 0 0 10px 0;}
.product-essential .overview .attributes #product_attribute_input_2 {padding: 10px; border: 1px solid rgba(194,194,194,1);}
.product-essential .overview .attributes ul, .product-essential .overview .attributes ul li {margin: 0; padding: 0;}
.product-essential .overview .attributes ul li {margin-right: 10px; margin-bottom: 10px; list-style-type: none; list-style-image: unset; display: inline-block; text-align: center; float: left;}
.product-essential .overview .attributes ul li:last-of-type {margin-right: unset;}
.product-essential .overview .attributes ul li label input[type=radio] {display: none; visibility: hidden;}
.product-essential .overview .attributes ul li label .attribute-square-container {margin: 0 0 0 0; display: block;}
.product-essential .overview .attributes ul li label .attribute-square-container .attribute-square {width: 48px; height: 48px; border: 5px solid transparent; display: block; cursor: pointer; box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.8); -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.8); -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.8);}
.product-essential .overview .attributes ul li.selected-value label .attribute-square-container .attribute-square {border-color: #333;}
.product-essential .gallery .picture a {outline: none;}
.product-essential .buttons {margin: 0 0 0 0;}
.product-essential .product-collateral {margin: 0 0 20px 0;}
.product-essential .product-collateral .product-specs-box {margin: 0 0 20px 0;}
.product-essential .product-collateral .product-specs-box .product-specs-line {border: 1px solid rgba(194,194,194,1); border-top: unset;}
.product-essential .product-collateral .product-specs-box .product-specs-line:first-child {border-top: 1px solid rgba(194,194,194,1);}
.product-essential .product-collateral .product-specs-box .product-specs-line .attribute-name, .product-essential .product-specs-box .product-specs-line .attribute-value {padding: 4px 20px; display: block;}
.product-essential .product-collateral .product-specs-box .buttons {margin: 20px 0 0 0;}
.product-essential .product-collateral .product-specs-box .buttons a.block-link:after {border-color: transparent transparent transparent rgba(0,0,0,1);}
.product-essential .product-collateral .product-specs-box .buttons a.block-link {background-color: rgba(0,0,0,1);}
.product-essential .social {margin: auto 0; text-align: right;}
.product-essential .social .product-share-button {display: inline-block;}
.product-essential .social .product-share-button a {margin: 0 10px 0 0;}
.product-essential .social .product-share-button a:last-of-type {margin: unset;}
.product-essential .social span.text {height: 53px; vertical-align: middle; margin-right: 10px; display: inline-block;}
.usps {margin: 0 0 60px 0;}
.usps .usp {text-align: center;}
.usps .usp .icon {margin: 0 auto 20px auto; display: table;}
.usps .usp .icon img {max-width: 256px;}
.usps .usp p {margin: unset;}
.others-also-viewed {margin: 0; padding: 20px 0 0 0;}
.banners {padding: 60px 0 40px 0; background-image: url('../images/bg_pattern.png'); background-position: center center; background-repeat: repeat;}
.banners .banner {margin: 0 0 20px 0;}
.banners .banner h2 {font-size: 32px;}
.banners .banner ul li {line-height: 30px;}
.kalam {font-family: 'Kalam', cursive;}
.form {margin: 0;}
.form .form-field {display: block; position: relative;}
.form .form-field label {line-height: 40px;}
.form .form-field .form-field-textbox:after {top: 0; right: 15px; width: 41px; height: 40px; background-image: url(../images/bg_alternative_shape_input.png); background-position: top right; background-size: 100%; background-repeat: no-repeat; position: absolute; content: "";}
.form .form-field .form-field-textbox input[type=text] {width: 100%; height: 40px; margin: 0 0 12px 0; padding: 0 41px 0 0; line-height: 40px; background-color: transparent; border: 1px solid rgba(194,194,194,1); border-right: unset; text-indent: 20px; display: block; outline: none;}
.form .form-field .form-field-password:after {top: 0; right: 15px; width: 41px; height: 40px; background-image: url(../images/bg_alternative_shape_input.png); background-position: top right; background-size: 100%; background-repeat: no-repeat; position: absolute; content: "";}
.form .form-field .form-field-password input[type=password] {width: 100%; height: 40px; margin: 0 0 12px 0; padding: 0 41px 0 0; line-height: 40px; background-color: transparent; border: 1px solid rgba(194,194,194,1); border-right: unset; text-indent: 20px; display: block; outline: none;}
.form .form-field .form-field-select:after {top: 0; right: 15px; width: 41px; height: 40px; background-image: url(../images/bg_alternative_shape_input.png); background-position: top right; background-size: 100%; background-repeat: no-repeat; position: absolute; content: "";}
.form .form-field .form-field-select select {width: calc(100% - 40px); height: 40px; margin: 0 0 12px 0; padding: 0 41px 0 0; line-height: 40px; background-color: transparent; border: 1px solid rgba(194,194,194,1); border-right: unset; text-indent: 20px; display: block; outline: none;}
.form .form-field .form-field-date-picker:after {top: 0; right: 15px; width: 41px; height: 40px; background-image: url(../images/bg_alternative_shape_input.png); background-position: top right; background-size: 100%; background-repeat: no-repeat; position: absolute; content: "";}
.form .form-field .form-field-date-picker select {width: calc(100% / 3); height: 40px; margin: 0 0 12px 0; padding: 0 0 0 0; line-height: 40px; background-color: transparent; border: 1px solid rgba(194,194,194,1); border-right: unset; text-indent: 20px; display: inline-block; outline: none;}
.form .form-field .form-field-date-picker select:last-of-type {width: calc((100% / 3) - 40px);}
.form .form-field .form-field-textarea textarea {width: 100%; margin: 0 0 12px 0; height: 120px; padding: 10px 20px 10px 20px; line-height: 20px; background-color: transparent; border: 1px solid rgba(194,194,194,1); display: block; outline: none;}
.form .form-field .input-validation-error {background-color: rgba(255,0,0,0.1) !important;}
.form .form-field .field-validation-error {display: none; visibility: hidden;}
.form .buttons .send-button {display: inline-block; position: relative;}
.form .buttons .send-button:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 40px 0 0 41px; border-color: transparent transparent transparent rgba(120,190,32,1); display: block; position: absolute; content: "";}
.form .buttons .send-button input[type=submit] {line-height: 30px; margin: unset; padding: 5px 20px; background-color: rgba(120,190,32,1); border: unset; color: rgba(255,255,255,1); display: block;}
.form .buttons .send-button input[type=submit]:hover {text-decoration: underline;}
.form .form-field input[type=text], .form .buttons .send-button input[type=submit] {outline: none;}
.result-error {margin: 0 0 40px 0 !important; padding: 0 !important; text-align: left !important;}
.downloads {margin: 40px 0 0 0; padding: 40px 0 0 0; border-top: 1px solid rgba(194,194,194,1);}
.downloads hr {margin: 20px 0 40px 0;}
.downloads .download {margin: 0 0 20px 0; height: 80px;}
.downloads .download .icon {}
.downloads .download h4, .downloads .download p {margin: 0;}
.downloads .download p.file-size {color: rgba(194,194,194,1);}
.bar-notification {display: none; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; padding: 15px 25px 15px 10px; line-height: 16px; color: #fff; opacity: 0.95;}
.bar-notification.success {background-color: #4bb07a;}
.bar-notification.error {background-color: #e4444c;}
.bar-notification.warning {background-color: #f39c12;}
.bar-notification .content {margin: 0 10px 0 0;}
.bar-notification .content a {color: #fff; text-decoration: underline;}
.bar-notification .close {position: absolute; top: 0; right: 0; width: 32px; height: 32px; margin: 7px; background: #fff url('../images/close.png') center no-repeat; cursor: pointer;}
.eu-cookie-bar-notification {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1050; width: 320px; height: auto; box-shadow: 0 0 5px rgba(0,0,0,0.25); background-color: rgba(255,255,255,1); padding: 20px; text-align: center;}
.eu-cookie-bar-notification .text {margin: 0 0 20px 0;}
.eu-cookie-bar-notification .button {margin: 0 0 20px -20px; display: inline-block; position: relative;}
.eu-cookie-bar-notification .button:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 40px 0 0 41px; border-color: transparent transparent transparent rgba(120,190,32,1); display: block; position: absolute; content: "";}
.eu-cookie-bar-notification .button button {margin: unset; padding: 10px 20px; background-color: rgba(120,190,32,1); border: unset; font-weight: 500; color: rgba(255,255,255,1); display: block; outline: none;}
.eu-cookie-bar-notification button:hover {text-decoration: underline;}
.eu-cookie-bar-notification a {color:rgba(120,190,32,1); display: block;}
.eu-cookie-bar-notification a:hover {text-decoration: underline;}
.flyout-search-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1050; width: 320px; height: auto; box-shadow: 0 0 5px rgba(0,0,0,0.25); background-color: rgba(255,255,255,1); padding: 20px; text-align: center; display: none;}
.flyout-search-box .flyout-search-box-close {top: -16px; right: -16px; width: 32px; height: 32px; background-color: black; position: absolute;}
.flyout-search-box .flyout-search-box-close i {color: #FFFFFF !important;}
.flyout-search-box .flyout-search-box-close:hover i {color: rgba(120,190,32,1) !important;}
.flyout-search-box .flyout-search-box-input {display: inline-block; position: relative; float: left;}
.flyout-search-box .flyout-search-box-input input[type=text] {width: 100%; height: 40px; margin: 0; line-height: 40px; background-color: transparent; border: 1px solid rgba(194,194,194,1); border-right: unset; text-indent: 20px; display: block; outline: none;}
.flyout-search-box .flyout-search-box-button {display: inline-block; position: relative; float: left;}
.flyout-search-box .flyout-search-box-button:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 40px 0 0 41px; border-color: transparent transparent transparent rgba(120,190,32,1); display: block; position: absolute; content: "";}
.flyout-search-box .flyout-search-box-button input[type=submit] {line-height: 30px; margin: unset; padding: 5px 20px; background-color: rgba(120,190,32,1); border: unset; color: rgba(255,255,255,1); display: block; outline: none;}
.flyout-search-box .flyout-search-box-button input[type=submit]:hover {text-decoration: underline;}
.search-page {}
.search-page .basic-search {}
.search-page .basic-search .search-block {margin-bottom: 20px;}
.search-page .basic-search .search-block .search-block-input {display: inline-block; position: relative; float: left;}
.search-page .basic-search .search-block .search-block-input input[type=text] {width: 100%; height: 40px; margin: 0; line-height: 40px; background-color: transparent; border: 1px solid rgba(194,194,194,1); border-right: unset; text-indent: 20px; display: block; outline: none;}
.search-page .basic-search .search-block .search-block-button {display: inline-block; position: relative; float: left;}
.search-page .basic-search .search-block .search-block-button:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 40px 0 0 41px; border-color: transparent transparent transparent rgba(120,190,32,1); display: block; position: absolute; content: "";}
.search-page .basic-search .search-block .search-block-button input[type=submit] {line-height: 30px; margin: unset; padding: 5px 20px; background-color: rgba(120,190,32,1); border: unset; color: rgba(255,255,255,1); display: block; outline: none;}
.search-page .basic-search .search-block .search-block-button input[type=submit]:hover {text-decoration: underline;}
.search-page .search-results {}
* {margin: 0; padding: 0;}
html.no-scroll {overflow: hidden !important;}
.hamburger-icon {top: 0; right: 15px; width: 48px; height: 48px; background-color: rgba(255,255,255,0.1); position: absolute; margin: 0 auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; z-index: 1;}
.hamburger-icon span {display: block; position: absolute; height: 4px; width: 32px; margin: 0 8px; background: rgba(120,190,32,1); border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.hamburger-icon span:nth-child(1) {top: 14px;}
.hamburger-icon span:nth-child(2), .hamburger-icon span:nth-child(3) {top: 22px;}
.hamburger-icon span:nth-child(4) {top: 30px;}
.hamburger-icon.open span:nth-child(1) {top: 18px; width: 0%; left: 50%;}
.hamburger-icon.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.hamburger-icon.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.hamburger-icon.open span:nth-child(4) {top: 18px; width: 0%; left: 50%;}
#frequently-asked-questions-page {margin-top: 20px; border-bottom: 1px solid rgba(194,194,194,1);}
#frequently-asked-questions-page .faq {border-bottom: 1px solid rgba(194,194,194,1); cursor: pointer;}
#frequently-asked-questions-page .faq:first-of-type {border-top: 1px solid rgba(194,194,194,1);}
#frequently-asked-questions-page .faq:last-of-type {border-bottom: 0;}
#frequently-asked-questions-page .faq .question h2 {margin: 0; padding: 8px 0; font-size: 14px; text-transform: none;}
#frequently-asked-questions-page .faq .question h2:before {margin-right: 10px; font-family: FontAwesome; font-size: 16px; font-weight: 300; content: "\f078"; display: block; float: left;}
#frequently-asked-questions-page .faq .question.active h2 {}
#frequently-asked-questions-page .faq .question.active h2:before {content: "\f077";}
#frequently-asked-questions-page .faq .answer {display: none;}
#frequently-asked-questions-page .faq .answer p {padding: 0 0 10px 26px;}
.bx-wrapper {margin: 0; box-shadow: none; border: 0; background-color: transparent;}
.bx-wrapper .bx-viewport {}
.bx-wrapper .bx-viewport ul.bxslider li {margin-right: 1px; position: relative;}
.bx-wrapper .bx-viewport ul.bxslider li .overlay {position: absolute; z-index: 1;}
.bx-wrapper .bx-viewport ul.bxslider li .overlay {bottom: 20px; left: 0; margin: 0 49px 0 0; padding: 14px 20px; background-color: rgba(0,0,0,1); font-size: 24px; color: rgba(255,255,255,1); display: inline-block;}
.bx-wrapper .bx-viewport ul.bxslider li .overlay:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 48px 0 0 49px; border-color: transparent transparent transparent rgba(0,0,0,1); display: block; position: absolute; content: "";}
.bx-wrapper .bx-controls-direction a {z-index: 2;}
.contact-page {padding-bottom: unset;}
.contact-page .contact-page-intro {padding-bottom: 40px; border-bottom: 1px solid rgba(194,194,194,1); position: relative;}
.contact-page .contact-page-intro .image {top: -40px; bottom: 0; left: 0; width: calc(50% - 15px); background-color: red; position: absolute;}
.contact-page .contact-page-forms {padding-top: 40px;}
.contact-page .contact-page-forms .form {margin-bottom: 40px;}
.street-view {margin-bottom: 40px;}
.street-view iframe {display: block;}
.admin-header-links {padding: 14px 15px; background-color: rgba(120,190,32,1); text-align: center;}
.admin-header-links a {color: rgba(255,255,255,1); text-transform: uppercase;}
.video-wrapper {position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;}
.video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.street-view {width: 100%;}
.street-view iframe {width: 100%; display: block; pointer-events: none; position: relative;}
.street-view iframe.clicked {pointer-events: auto;}
@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 991px) {}
@media (max-width: 991px) {
h1 {line-height: 32px; font-size: 22px;}
h2 {line-height: 20px; font-size: 20px;}
h3 {line-height: 20px; font-size: 18px;}
h4, h5, h6 {line-height: 20px; font-size: 14px;}
.header .header-logo {margin: 20px 63px 0 0; display: block; float: unset;}
.header .header-links-wrapper {margin: 20px 0; float: unset !important;}
.header .header-links-wrapper .welcome-message {margin: 0 auto; font-size: 18px; display: table; float: unset;}
.header .header-links-wrapper .contact-message {margin: 0 auto; display: table; float: unset;}
.header .header-links-wrapper .contact-message a {color: rgba(255,255,255,1);}
.header-menu {padding: unset; background-color: transparent; border-bottom: unset;}
.aside {margin: 0; padding: 0; border: 1px solid rgba(194,194,194,1);}
.aside h3 {margin: 0 0 1px 0; display: block; cursor: pointer;}
.aside h3:after {display: none; visibility: hidden;}
.aside h3:before {font-family: FontAwesome; content: "\f078"; display: inline-block; float: right;}
.aside h3.is-active:before {content: "\f077";}
.aside ul.list {display: none;}
.aside ul {margin: unset;}
.aside ul li {padding: unset; background-position: center left 20px; border-bottom: 1px solid rgba(194,194,194,1);}
.aside ul li a {padding: 12px 20px 12px 52px; display: block;}
.aside ul li:last-of-type {border-bottom: 0;}
.aside h3.filtered-items-title:before {font-family: FontAwesome; content: "\f077"; display: inline-block; float: right;}
.aside h3.filtered-items-title.is-active:before {content: "\f078";}
.aside .filtered-items ul li {padding: 12px 20px 12px 52px; display: block;}
.aside .filtered-items ul li:hover {background-image: url(../images/list_icon_black.png);}
.aside .buttons {margin: unset;}
.aside .buttons a.block-link {display: block;}
.aside .buttons a.block-link:after {display: none;}
.category-grid.home-page-category-grid {border-bottom: 0;}
.category-grid.home-page-category-grid .item-grid .item-box.odd, .category-grid.home-page-category-grid .item-grid .item-box.even, .category-grid.home-page-category-grid .item-grid .item-box:hover.odd, .category-grid.home-page-category-grid .item-grid .item-box:hover.even {background-image: unset;}
.category-grid.home-page-category-grid .item-grid .item-box.odd:after, .category-grid.home-page-category-grid .item-grid .item-box.even:before {display: none; visibility: hidden;}
.category-grid.home-page-category-grid .item-grid .item-box {border-bottom: 1px solid rgba(194,194,194,1);}
.category-grid.home-page-category-grid .item-grid .item-box .category-item .picture {margin: 0 0 20px 0;}
.others-also-viewed h2, .usps h2 {margin: 0 -20px 40px -20px; padding: 8px 20px; background-color: rgba(34,31,31,1); font-size: 20px; color: rgba(255,255,255,1); display: inline-block; position: relative;}
.slider-wrapper h2 {margin: 0 -20px 40px -20px; padding: 8px 20px; background-color: rgba(120,190,32,1); font-size: 20px; color: rgba(255,255,255,1); display: inline-block; position: relative;}
.usps .usp {text-align: left;}
.usps .usp .icon {margin: 0 auto;}
.usps .usp .icon img {max-width: 100%;}
.banners .banner h2 {font-size: 22px;}
.footer .footer-upper .footer-block:not(.footer-block-newsletter) {margin: 0 0 20px 0; padding: 0 0 10px 0; border-bottom: 1px solid rgba(255,255,255,1);}
.footer .footer-upper .footer-block h3 {display: block; cursor: pointer;}
.footer .footer-upper .footer-block:not(.footer-block-newsletter) h3:after {font-family: FontAwesome; font-size: 16px; font-weight: 300; content: "\f078"; display: block; float: right;}
.footer .footer-upper .footer-block:not(.footer-block-newsletter) h3.is-active:after {content: "\f077";}
.footer .footer-upper .footer-block:not(.footer-block-newsletter) p {margin: unset; display: none;}
.footer .footer-upper .standards .footer-block p {display: block;}
.footer .footer-upper .social .footer-block, .footer .footer-upper .standards .footer-block {border-bottom: unset;}
.footer .footer-lower .footer-info .footer-disclaimer {display: table; float: none; text-align: center;}
.footer .footer-lower .footer-info .footer-links {display: table; float: none; text-align: center;}
ul.top-menu {display: none; visibility: hidden;}
ul.top-menu.mobile {top: 0; right: 0; bottom: 0; left: 0; padding: 20px 78px 20px 15px; background-color: rgba(34,31,31,1); display: none; visibility: visible; float: none; position: fixed; z-index: 3;}
ul.top-menu.mobile li {margin: unset; display: block; float: unset;}
ul.top-menu.mobile li a {color: rgba(255,255,255,1);}
ul.top-menu.mobile li .hamburger-icon {top: 20px;}
.contact-page .contact-page-intro .image {display: none; visibility: hidden;}
.product-essential .product-collateral {margin-top: 20px;}
}
@media (min-width: 767px) {
.aside ul.list {display: block !important;}
.others-also-viewed h2:before, .usps h2:before {top: 0; left: -100%; width: 100%; height: 36px; background-color: rgba(34,31,31,1); display: block; position: absolute; content: "";}
.others-also-viewed h2, .usps h2 {margin: 0 49px 40px -20px; padding: 8px 20px; background-color: rgba(34,31,31,1); font-size: 18px; color: rgba(255,255,255,1); display: inline-block; position: relative;}
.others-also-viewed h2:after, .usps h2:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 36px 0 0 37px; border-color: transparent transparent transparent rgba(34,31,31,1); display: block; position: absolute; content: "";}
.slider-wrapper h2:before {top: 0; left: -500%; width: 500%; height: 36px; background-color: rgba(120,190,32,1); display: block; position: absolute; content: "";}
.slider-wrapper h2 {margin: 0 49px 1px -20px; padding: 8px 20px; background-color: rgba(120,190,32,1); font-size: 18px; color: rgba(255,255,255,1); display: inline-block; position: relative;}
.slider-wrapper h2:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 36px 0 0 37px; border-color: transparent transparent transparent rgba(120,190,32,1); display: block; position: absolute; content: "";}
}
@media (min-width: 992px) {
.others-also-viewed h2:before, .usps h2:before {top: 0; left: -100%; width: 100%; height: 48px; background-color: rgba(34,31,31,1); display: block; position: absolute; content: "";}
.others-also-viewed h2, .usps h2 {margin: 0 49px 40px -20px; padding: 8px 20px; background-color: rgba(34,31,31,1); font-size: 32px; color: rgba(255,255,255,1); display: inline-block; position: relative;}
.others-also-viewed h2:after, .usps h2:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 48px 0 0 49px; border-color: transparent transparent transparent rgba(34,31,31,1); display: block; position: absolute; content: "";}
.slider-wrapper h2:before {top: 0; left: -500%; width: 500%; height: 48px; background-color: rgba(120,190,32,1); display: block; position: absolute; content: "";}
.slider-wrapper h2 {margin: 0 49px 1px -20px; padding: 8px 20px; background-color: rgba(120,190,32,1); font-size: 32px; color: rgba(255,255,255,1); display: inline-block; position: relative;}
.slider-wrapper h2:after {top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 48px 0 0 49px; border-color: transparent transparent transparent rgba(120,190,32,1); display: block; position: absolute; content: "";}
}
@media (min-width: 992px) and (max-width: 1199px) {}
@media (min-width: 1200px) {}
*/
/*
New Styles for V2
*/
/* roboto-regular - latin */
@font-face {
font-display: block;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-v32-latin-regular.woff2') format('woff2');
}
/* roboto-500 - latin */
@font-face {
font-display: block;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url('../fonts/roboto-v32-latin-500.woff2') format('woff2');
}
/* roboto-700 - latin */
@font-face {
font-display: block;
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url('../fonts/roboto-v32-latin-700.woff2') format('woff2');
}
@font-face {
font-display: block;
font-family: 'Kalam';
font-style: normal;
font-weight: 300;
src: url('../fonts/kalam-v16-latin-300.woff2') format('woff2');
}
@font-face {
font-display: block;
font-family: 'Kalam';
font-style: normal;
font-weight: 400;
src: url('../fonts/kalam-v16-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: block;
font-family: 'Kalam';
font-style: normal;
font-weight: 700;
src: url('../fonts/kalam-v16-latin-700.woff2') format('woff2');
}
html, body {
line-height: 24px;
font-family: 'Roboto';
font-size: 16px;
background-color: #FFFFFF;
color: #000000;
}
body.is--locked {
}
.body--locker.is--locked {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
h1, .heading-1, h2, .heading-2, h3, .heading-3, h4, .heading-4, h5, .heading-5, h6, .heading-6, p {
margin: 20px 0 0 0;
}
h1, .heading-1 {
line-height: 40px;
font-size: 40px;
font-weight: 700;
color: #1C4220;
}
h2, .heading-2 {
line-height: 32px;
font-size: 32px;
font-weight: 700;
color: #1C4220;
}
h3, .heading-3 {
line-height: 28px;
font-size: 28px;
font-weight: 700;
color: #1C4220;
}
h4, .heading-4 {
line-height: 26px;
font-size: 24px;
font-weight: 700;
color: #1C4220;
}
h5, .heading-5 {
line-height: 22px;
font-size: 20px;
font-weight: 700;
color: #1C4220;
}
h6, .heading-6 {
line-height: 20px;
font-size: 16px;
font-weight: 700;
color: #1C4220;
}
p {
line-height: 24px;
font-size: 16px;
}
.buttons {}
.buttons button {white-space: nowrap;}
.buttons p.editor-button a {white-space: nowrap;}
p.link {
display: flex;
flex-direction: row;
justify-content: space-between;
}
p.link:after {
width: 22px;
height: 16px;
mask-image: url('data:image/svg+xml,');
mask-position: center;
mask-repeat: no-repeat;
mask-size: 22px 16px;
background-color: #78BE20;
content: "";
display: block;
align-self: start;
}
p.button a span, p.editor-button a, input[type=submit], button {
margin: 0 44px 0 0 !important;
padding: 10px 16px;
background-color: #1C4220;
font-size: 14px;
font-weight: 500;
text-decoration: none;
color: #FFFFFF;
display: block;
position: relative;
}
p.button a span:after, p.editor-button a:after, input[type=submit]:after, button:after {
top: 0;
right: -44px;
bottom: 0;
width: 44px;
height: 44px;
background-color: #1C4220;
mask-image: url('../images/button.svg');
mask-repeat: no-repeat;
mask-position: top left;
mask-size: 44px 44px;
position: absolute;
display: block;
content: "";
}
p.button.alternative a span, p.editor-button.alternative a, button.alternative {
margin: 0 44px 0 0 !important;
padding: 9px 15px;
background-color: transparent;
border: 1px solid #1C4220;
border-right: 0;
color: #1C4220;
display: block;
}
p.button.alternative a span:after, p.editor-button.alternative a:after, button.alternative:after {
top: -1px;
right: -44px;
bottom: 0;
width: 44px;
height: 44px;
background-color: #1C4220;
mask-image: url('../images/button_alternative.svg');
mask-repeat: no-repeat;
mask-position: top left;
mask-size: 44px 44px;
position: absolute;
display: block;
content: "";
}
p.button:hover a span, p.button.alternative:hover a span, p.editor-button a:hover, p.editor-button.alternative a:hover, button:hover {
text-decoration: underline;
}
button {
margin: 0;
border: 0;
}
ul, ol {
margin: 24px 0 0 0;
padding: 0;
}
li {
margin: 0 0 0 16px;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #000000;
}
.buttons {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.buttons p.button {}
.buttons p.button a {white-space: nowrap;}
.buttons p.editor-button:not(:only-child):not(:last-child) a:after {
display: none;
visibility: hidden;
}
@media (max-width: 576px) {
.buttons {grid-template-columns: 100%;}
.buttons p.editor-button:not(:only-child):not(:last-child) a:after {display: block; visibility: visible;}
}
@media (min-width: 577px) and (max-width: 820px) {
.buttons {grid-template-columns: repeat(2, 1fr);}
.buttons p.editor-button:nth-child(2n) a:after {display: block !important; visibility: visible !important;}
}
.responsive-table {overflow-x: scroll;}
.responsive-table table {}
.responsive-table table thead {border-bottom: 2px solid #000000;}
.responsive-table table thead tr {}
.responsive-table table thead tr th {padding: 10px 16px; text-align: left; white-space: nowrap;}
.responsive-table table tbody {}
.responsive-table table tbody tr {}
.responsive-table table tbody tr:nth-child(odd) {background-color: #1C42200D;}
.responsive-table table tbody tr td {padding: 10px 16px; white-space: nowrap;}
img {
width: 100%;
height: auto;
}
.has-background.dark-green {
background-color: #1C4220;
}
.has-background.dark-green.alpha-5 {
background-color: #1C42200D;
}
.has-background.black {
background-color: #000000;
}
.outer-wrapper {
display: flex;
justify-content: center;
}
.outer-wrapper .inner-wrapper {
width: 100%;
max-width: 1120px;
}
.grid {
width: 100%;
display: grid;
gap: 40px;
align-items: start;
}
.grid.columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid.columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid.columns-4-8 {
grid-template-columns: calc(((100% / 12) * 4) - 20px) calc(((100% / 12) * 8) - 20px);
}
.grid.columns-5-7 {
grid-template-columns: calc(((100% / 12) * 5) - 20px) calc(((100% / 12) * 7) - 20px);
}
.grid.columns-5-7 .mobile {
display: none;
}
.grid.columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid.columns-6 {
grid-template-columns: repeat(6, 1fr);
}
.suselbeek.header {
}
.suselbeek.header .outer-wrapper {
}
.suselbeek.header .outer-wrapper .inner-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
}
.suselbeek.header .outer-wrapper .inner-wrapper .logo {
margin-top: 18px;
}
.suselbeek.header .outer-wrapper .inner-wrapper .logo a {
display: inline-block;
}
.suselbeek.header .outer-wrapper .inner-wrapper .logo a img {
width: auto;
height: 68px;
display: block;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations {
margin: 6px 0 19px 0;
display: flex;
flex-direction: column;
justify-content: end;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.primary {
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.primary ul.mega-menu.primary-navigation {
border: none;
margin: 0;
text-align: left;
display: flex;
flex-direction: row;
justify-content: end;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.primary ul.mega-menu.primary-navigation li {
margin: 0;
float: none;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.primary ul.mega-menu.primary-navigation li a {
line-height: unset;
padding: unset;
font-size: unset;
text-decoration: none;
display: block;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.primary ul.mega-menu.primary-navigation li a:before {
display: none;
visibility: hidden;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.primary ul.mega-menu.primary-navigation > li > span,
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.primary ul.mega-menu.primary-navigation > li > a > span {
line-height: 14px;
padding: 17px 10px;
font-size: 18px;
font-weight: 700;
color: #000000;
display: block;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.primary ul.mega-menu.primary-navigation li:hover span,
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.primary ul.mega-menu.primary-navigation li:hover a span {
color: #78BE20;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.secondary {
display: flex;
flex-direction: row;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.secondary ul.mega-menu.secondary-navigation {
border: none;
margin: 0;
text-align: left;
display: flex;
flex-direction: row;
justify-content: end;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.secondary ul.mega-menu.secondary-navigation li {
margin: 0;
float: none;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.secondary ul.mega-menu.secondary-navigation li a {
line-height: unset;
padding: unset;
font-size: unset;
text-decoration: none;
display: block;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.secondary ul.mega-menu.secondary-navigation li a:before {
display: none;
visibility: hidden;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.secondary ul.mega-menu.secondary-navigation li span,
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.secondary ul.mega-menu.secondary-navigation li a span {
line-height: 14px;
padding: 17px 10px;
font-size: 16px;
color: #000000;
display: block;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.secondary ul.mega-menu.secondary-navigation li:hover span,
.suselbeek.header .outer-wrapper .inner-wrapper .navigations nav.secondary ul.mega-menu.secondary-navigation li:hover a span {
color: #78BE20;
}
.suselbeek.hero {
width: auto;
margin: 0 calc((100% - 1120px) / 2);
padding-bottom: 56px;
}
.suselbeek.hero .placeholder {
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
}
.suselbeek.hero .placeholder .content {
width: calc((100% / 12) * 5);
align-self: center;
display: flex;
flex-direction: column;
gap: 40px;
}
.suselbeek.hero .placeholder .content h1 {
margin: 0;
}
.suselbeek.hero .placeholder .content p {
margin: 0;
}
.suselbeek.hero .placeholder .featured {
width: calc((100% / 12) * 6);
margin: 40px 40px -56px 0;
position: relative;
z-index: 2;
}
.suselbeek.hero .placeholder .featured .overlay {
right: 30%;
bottom: 40px;
left: 30%;
position: absolute;
z-index: 5;
}
.suselbeek.hero .placeholder .featured .overlay * {
color: #FFFFFF;
}
.suselbeek.hero .placeholder .featured .overlay h2,
.suselbeek.hero .placeholder .featured .overlay p.heading-2 {
margin: 0;
line-height: 30px;
font-size: 30px;
font-family: 'Kalam';
font-weight: 700;
}
.suselbeek.hero .placeholder .featured .overlay p {
margin-top: 20px;
}
.suselbeek.hero .placeholder .featured .overlay .buttons p.editor-button {
display: inline-block;
}
.suselbeek.hero .placeholder .featured .overlay .buttons p.editor-button a {
background-color: #FFFFFF;
color: #1C4220;
}
.suselbeek.hero .placeholder .featured .overlay .buttons p.editor-button a:after {
top: 0;
right: -44px;
bottom: 0;
width: 44px;
height: 44px;
background-color: #FFFFFF;
mask-image: url(../images/button.svg);
mask-repeat: no-repeat;
mask-position: top left;
mask-size: 44px 44px;
position: absolute;
display: block;
content: "";
}
.suselbeek.hero .placeholder .featured .detail {
top: 50%;
left: -30%;
height: calc(100% - 80px);
transform: translateY(-50%) perspective(100px) rotateY(-5deg);
position: absolute;
align-self: center;
position: absolute;
z-index: 4;
}
.suselbeek.hero .placeholder .featured .detail img {
height: 100%;
-webkit-filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.2));
}
.suselbeek.hero .placeholder .featured .impression {
border-radius: 4px;
overflow: hidden;
position: relative;
}
.suselbeek.hero .placeholder .featured .impression {
width: 100%;
height: 380px;
border-radius: var(--Radius-Rad-4, 4px);
background: linear-gradient(141deg, rgba(120, 190, 32, 0.00) 55.74%, #78BE20 100%), linear-gradient(180deg, rgba(28, 66, 32, 0.00) 50%, rgba(28, 66, 32, 0.80) 100%), linear-gradient(0deg, rgba(28, 66, 32, 0.20) 0%, rgba(28, 66, 32, 0.20) 100%), url('/Themes/Suselbeek/Content/images/0003920_voordeuren_450.jpeg') lightgray 50% / cover no-repeat;
box-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.10);
}
.suselbeek.hero .placeholder .featured .impression img {
width: 100%;
height: 100%;
object-fit: cover;
}
.suselbeek.hero .placeholder .shape {
top: 0;
right: 0;
bottom: 56px;
max-width: 75%;
min-width: 50%;
mask: url('../images/mask_hero.svg');
mask-position: top left;
mask-repeat: no-repeat;
mask-size: cover;
position: absolute;
z-index: 1;
background: linear-gradient(90deg, rgba(28, 66, 32, 0.50) 0%, rgba(28, 66, 32, 0.00) 53.08%), linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') #78BE20 50% / cover no-repeat;
}
.suselbeek.hero .placeholder .shape:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #1C42201A;
mask-image: url(../images/suselbeek-sign.svg);
mask-position: center right;
mask-repeat: no-repeat;
mask-size: contain;
position: absolute;
mix-blend-mode: multiply;
content: "";
z-index: 1;
}
.suselbeek.hero.page .placeholder .content {
gap: 16px;
}
.suselbeek.hero.page .placeholder .shape {
width: 50%;
bottom: 0;
background: linear-gradient(90deg, rgba(28, 66, 32, 0.50) 0%, rgba(28, 66, 32, 0.00) 53.08%), linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') #78BE20 50% / cover no-repeat;
}
.suselbeek.hero.page .placeholder .featured {
width: calc((100% / 12) * 6);
margin: 0;
position: relative;
z-index: 2;
}
.suselbeek.hero.landingpage {
}
.suselbeek.hero.landingpage .placeholder .content {
margin: 80px 0;
gap: 0px;
}
.suselbeek.hero.landingpage .placeholder .content h1.handwritten, .suselbeek.hero.landingpage .content p.heading-1.handwritten {
line-height: 30px;
margin: 0;
font-size: 50px;
font-family: 'Kalam';
font-weight: 700;
}
.suselbeek.hero.landingpage .placeholder .content p {
margin-top: 24px;
}
.suselbeek.hero.landingpage .placeholder .content ul {
margin: 40px 0 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.suselbeek.hero.landingpage .placeholder .content ul li {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
gap: 16px;
}
.suselbeek.hero.landingpage .placeholder .content ul li:before {
width: 22px;
height: 16px;
mask-image: url('data:image/svg+xml,');
mask-position: center;
mask-repeat: no-repeat;
mask-size: 22px 16px;
background-color: #78BE20;
content: "";
display: block;
align-self: center;
}
.suselbeek.hero.landingpage .placeholder .highlight {
width: calc((100% / 12) * 7);
margin: 0;
}
.suselbeek.hero.landingpage .placeholder .highlight .featured {
width: 100%;
margin: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.suselbeek.hero.landingpage .placeholder .highlight .featured .overlay {
top: unset;
right: 10%;
bottom: unset;
left: unset;
position: relative;
width: 35%;
text-align: center;
order: 2;
}
.suselbeek.hero.landingpage .placeholder .highlight .featured .overlay h2, .suselbeek.hero.landingpage .featured .overlay p.heading-2 {
line-height: 32px;
font-size: 32px;
font-weight: 700;
color: #1C4220;
font-family: Roboto;
}
.suselbeek.hero.landingpage .placeholder .highlight .featured .detail {
width: 50%;
top: unset;
left: unset;
position: relative;
transform: translateY(0) perspective(100px) rotateY(-5deg);
order: 1;
}
.suselbeek.hero.landingpage .placeholder .highlight .shape {
width: 65%;
}
.suselbeek.hero.landingpage .placeholder .highlight .shape {
background: linear-gradient(90deg, rgba(28, 66, 32, 0.50) 0%, rgba(28, 66, 32, 0.00) 53.08%), linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') #78BE20 50% / cover no-repeat;
}
.suselbeek.hero.landingpage .placeholder .persons {
display: flex;
flex-direction: column;
gap: 0;
}
.suselbeek.hero.landingpage .placeholder .persons div {
display: flex;
flex-direction: row;
gap: 0;
}
.suselbeek.hero.landingpage .placeholder .persons div p {
width: 80px;
margin: 0;
aspect-ratio: 1/1;
background-color: #1C42200D;
border: 4px solid #FFFFFF;
border-radius: 9999px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.suselbeek.hero.landingpage .placeholder .persons div p:not(:first-of-type) {
margin-left: -15px;
}
.suselbeek.hero.landingpage .placeholder .persons img {
width: 100%;
height: auto;
}
.suselbeek.hero.landingpage .placeholder .logos {
display: flex;
flex-direction: column;
gap: 0;
}
.suselbeek.hero.landingpage .placeholder .logos div {
display: flex;
flex-direction: row;
gap: 24px;
}
.suselbeek.hero.landingpage .placeholder .logos div p {
width: 112px;
margin: 0;
aspect-ratio: 1/1;
background-color: #1C42200D;
border-radius: 9999px;
display: flex;
justify-content: center;
align-items: center;
}
.suselbeek.hero.landingpage .placeholder .logos div img.fsc {
width: auto;
height: 64px;
}
.suselbeek.hero.landingpage .placeholder .logos div img.komo {
width: auto;
height: 56px;
}
.suselbeek.hero.landingpage .placeholder .logos div img.stip {
width: auto;
height: 40px;
}
.suselbeek.hero.landingpage .placeholder .shape {
background: linear-gradient(90deg, rgba(28, 66, 32, 0.50) 0%, rgba(28, 66, 32, 0.00) 53.08%), linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') #78BE20 50% / cover no-repeat;
}
html.html-home-page .suselbeek.hero .placeholder .content {
width: calc((100% / 12) * 4);
}
html.html-home-page .suselbeek.hero .placeholder .shape {
min-width: 75%;
background: linear-gradient(90deg, rgba(28, 66, 32, 0.50) 0%, rgba(28, 66, 32, 0.00) 53.08%), linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') #78BE20 50% / cover no-repeat;
}
.suselbeek.usps {
width: auto;
padding: 34px calc((100% - 1120px) / 2);
display: flex;
flex-direction: row;
justify-content: space-between;
}
.suselbeek.usps.grey {
background-color: #1C42200D;
}
.suselbeek.usps.white {
}
.suselbeek.usps p {
margin: 0;
font-size: 14px;
font-weight: 500;
display: flex;
flex-direction: row;
gap: 16px;
}
.suselbeek.usps p:before {
width: 22px;
height: 16px;
mask-image: url('data:image/svg+xml,');
mask-position: center;
mask-repeat: no-repeat;
mask-size: 22px 16px;
background-color: #78BE20;
content: "";
display: block;
align-self: center;
}
.suselbeek.body {
padding-bottom: 120px;
background-color: #FFFFFF;
overflow: hidden;
}
.suselbeek.wrapper {
width: auto;
margin: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2); /*display: flex; flex-direction: column; gap: 40px;*/
position: relative;
}
.suselbeek.product-breadcrumb {
padding: 0 calc((100% - 1120px) / 2) 28px calc((100% - 1120px) / 2);
background-color: #F1F3F2;
}
.suselbeek.breadcrumb {
width: auto;
display: flex;
flex-direction: row;
/*margin-bottom: 20px;*/
gap: 40px;
position: relative;
}
.suselbeek.breadcrumb ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
}
.suselbeek.breadcrumb ul li {
margin: 0;
padding: 0;
list-style: none;
}
.suselbeek.breadcrumb ul li:not(:last-child):after {
margin: 0 5px;
content: "/";
}
.suselbeek.breadcrumb ul li span {
font-size: 14px;
}
.suselbeek.breadcrumb ul li span a {
}
.suselbeek.breadcrumb ul li span span {
}
.suselbeek.text, .suselbeek.text.columns-1 {
width: auto;
padding: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2);
display: flex;
flex-direction: column;
column-gap: 40px;
row-gap: 16px;
position: relative;
}
.suselbeek.text p {
margin: 0;
}
.suselbeek.text ul,
.suselbeek.text ol {
margin: 0;
}
.suselbeek.text hr {
width: 100%;
margin: 20px 0 0 0;
border-top: 1px solid #000000;
content: "";
opacity: 0.25;
}
.suselbeek.text a {
text-decoration: underline;
}
.suselbeek.text a:hover {
text-decoration: none;
}
.suselbeek.text .block {
height: 100%;
padding: 60px 40px 80px 40px;
}
.suselbeek.text.columns-8-4 {
width: auto;
margin: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2);
padding: 80px 40px;
background-color: #F1F3F2;
display: grid;
grid-template-columns: minmax(auto, calc((100% / 12) * 8)) minmax(auto, calc((100% / 12) * 4));
column-gap: 40px;
row-gap: 40px;
position: relative;
}
.suselbeek.text.columns-4-8 {
width: auto;
margin: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2);
padding: 80px 40px;
background-color: #F1F3F2;
display: grid;
grid-template-columns: calc((100% / 12) * 4) calc((100% / 12) * 8);
column-gap: 40px;
row-gap: 40px;
position: relative;
}
.suselbeek.text.columns-8-4:before,
.suselbeek.text.columns-4-8:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #1C42204D;
mask-image: url('../images/suselbeek-sign.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
position: absolute;
opacity: 0.1;
content: "";
z-index: 1;
}
.suselbeek.text.columns-8-4:after,
.suselbeek.text.columns-4-8:after {
right: 0;
bottom: 0;
left: 0;
height: 8px;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
}
.suselbeek.text.columns-8-4 .content,
.suselbeek.text.columns-4-8 .content {
display: flex;
flex-direction: column;
gap: 40px;
}
.suselbeek.text.columns-8-4 .content *,
.suselbeek.text.columns-4-8 .content * {
margin: 0;
}
.suselbeek.text.columns-8-4 .video,
.suselbeek.text.columns-4-8 .video {
z-index: 2;
}
.suselbeek.text.column-11 {
padding-right: calc(((100% - 1120px) / 2) + calc((1120px / 12) * 1));
}
.suselbeek.text.column-10 {
padding-right: calc(((100% - 1120px) / 2) + calc((1120px / 12) * 2));
}
.suselbeek.text.column-9 {
padding-right: calc(((100% - 1120px) / 2) + calc((1120px / 12) * 3));
}
.suselbeek.text.column-8 {
padding-right: calc(((100% - 1120px) / 2) + calc((1120px / 12) * 4));
}
.suselbeek.text.column-7 {
padding-right: calc(((100% - 1120px) / 2) + calc((1120px / 12) * 5));
}
.suselbeek.text.column-6 {
padding-right: calc(((100% - 1120px) / 2) + calc((1120px / 12) * 6));
}
.suselbeek.text.column-6 {
padding-right: calc(((100% - 1120px) / 2) + calc((1120px / 12) * 7));
}
.suselbeek.text.column-4 {
padding-right: calc(((100% - 1120px) / 2) + calc((1120px / 12) * 8));
}
.suselbeek.text.column-3 {
padding-right: calc(((100% - 1120px) / 2) + calc((1120px / 12) * 9));
}
.suselbeek.text.column-2 {
padding-right: calc(((100% - 1120px) / 2) + calc((1120px / 12) * 10));
}
.suselbeek.text.column-1 {
padding-right: calc(((100% - 1120px) / 2) + calc((1120px / 12) * 11));
}
.suselbeek.text.columns-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.suselbeek.text.columns-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.suselbeek.text.columns-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.suselbeek.text.columns-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.suselbeek.text.columns-6 {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.suselbeek.text.columns-7 {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.suselbeek.text.columns-8 {
display: grid;
grid-template-columns: repeat(8, 1fr);
}
.suselbeek.text.columns-9 {
display: grid;
grid-template-columns: repeat(9, 1fr);
}
.suselbeek.text.columns-10 {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
.suselbeek.text.columns-11 {
display: grid;
grid-template-columns: repeat(11, 1fr);
}
.suselbeek.text.columns-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.suselbeek.image-text {
width: auto;
padding: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2);
display: grid;
grid-template-columns: calc(((100% / 12) * 8) - 20px) calc(((100% / 12) * 4) - 20px);
gap: 40px;
position: relative;
}
.suselbeek.image-text div {
}
.suselbeek.image-text div:first-child {
padding: 0 100px 125px 0;
position: relative;
}
.suselbeek.image-text div:first-child:before {
top: 40px;
right: 0;
bottom: 0;
left: 100px;
background-color: #1C42204D;
mask-image: url('../images/suselbeek-sign.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
position: absolute;
opacity: 0.1;
content: "";
z-index: 1;
}
.suselbeek.image-text div:first-child:after {
top: 40px;
right: 0;
bottom: 0;
left: 100px;
background-color: #F1F3F2;
content: "";
position: absolute;
}
.suselbeek.image-text div:first-child img {
width: 100%;
height: auto;
position: relative;
z-index: 1;
}
.suselbeek.image-text div:last-child {
display: flex;
flex-direction: column;
/*gap: 40px;*/
}
.suselbeek.image-text div:last-child p {
margin: 0;
}
.suselbeek.image-text div:last-child p.editor-button {
align-self: start;
}
.suselbeek.text-image {
}
.suselbeek.selected-products {
width: auto;
padding: 80px calc((100% - 1120px) / 2);
background-color: #F1F3F2;
display: flex;
flex-direction: row;
gap: 40px;
position: relative;
}
.suselbeek.block-grey {
width: auto;
margin: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2);
padding: 80px 40px;
background-color: #F1F3F2;
display: flex;
flex-direction: row;
gap: 40px;
position: relative;
}
.suselbeek.block-grey:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #1C42204D;
mask-image: url('../images/suselbeek-sign.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
position: absolute;
opacity: 0.1;
content: "";
z-index: 1;
}
.suselbeek.block-grey:after {
right: 0;
bottom: 0;
left: 0;
height: 8px;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
}
.suselbeek.block-grey .content {
display: flex;
flex-direction: column;
gap: 40px;
}
.suselbeek.block-grey .content * {
margin: 0;
}
.suselbeek.block-grey.with-images {
margin-top: 120px;
padding: 80px 20px 80px 40px;
display: flex;
flex-direction: row;
gap: 40px;
}
.suselbeek.block-grey.with-images .content {
width: 50%;
}
.suselbeek.block-grey.with-images .images {
width: 50%;
display: flex;
flex-direction: row;
gap: 20px;
position: relative;
z-index: 3;
}
.suselbeek.block-grey.with-images .image-1,
.suselbeek.block-grey.with-images .image-2 {
width: calc(50% - 10px);
aspect-ratio: 3/4;
position: absolute;
background-color: #FFFFFF;
-webkit-box-shadow: 0px 4px 94px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 4px 94px 0px rgba(0,0,0,0.31);
box-shadow: 0px 4px 94px 0px rgba(0,0,0,0.31);
}
.suselbeek.block-grey.with-images .image-1 {
top: -116px;
left: 0;
}
.suselbeek.block-grey.with-images .image-2 {
right: 0;
bottom: -30px;
}
.suselbeek.block-grey.with-images .image-1 img,
.suselbeek.block-grey.with-images .image-2 img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.suselbeek.content-block-grey {
width: auto;
margin: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2);
padding: 60px 40px 80px 40px;
background-color: #F1F3F2;
position: relative;
}
.suselbeek.content-block-grey:after {
right: 0;
bottom: 0;
left: 0;
height: 8px;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
}
.suselbeek.homepage-categories {
width: auto;
padding: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2);
display: flex;
flex-direction: column;
gap: 40px;
}
.suselbeek.homepage-categories .content {
width: calc((100% / 12) * 8);
display: flex;
flex-direction: column;
gap: 40px;
}
.suselbeek.homepage-categories .content * {
margin: 0;
}
.suselbeek.homepage-categories .grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
/*
.suselbeek.banners {width: auto; padding: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2);}
.suselbeek.banners .banner {display: flex; flex-direction: column; gap: 32px; position: relative;}
.suselbeek.banners .banner p {margin: 0;}
.suselbeek.banners .banner .with-icon {display: flex; flex-direction: row; gap: 24px;}
.suselbeek.banners .banner .with-icon div {width: 112px; height: 112px; line-height: 112px; background-color: #1C42200D; border-radius: 9999px; font-size: 0; text-align: center; flex-shrink: 0; flex-grow: 0; content: "";}
.suselbeek.banners .banner .with-icon div:before {font-size: 40px;}
.suselbeek.banners .banner .with-icon p {align-self: center;}
.suselbeek.banners .banner .with-icon p.link {flex-shrink: 1; flex-grow: 1;}
.suselbeek.banners .banner .with-icon p.link a {text-decoration: none; display: block;}
.suselbeek.banners .banner .with-icon p.link a:hover {color: #78BE20;}
.suselbeek.banners .banner:hover .with-icon p.link {color: #78BE20;}
*/
.suselbeek.banners {
width: auto;
padding: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2);
align-items: start;
}
.suselbeek.news {
width: auto;
margin-top: 80px;
padding: 80px calc((100% - 1120px) / 2);
background-color: #F1F3F2;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
.suselbeek.news.list {
margin: 0;
background-color: #FFFFFF;
}
.suselbeek.news.list:before {
display: none;
visibility: hidden;
}
.suselbeek.news:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #1C42204D;
mask-image: url('../images/suselbeek-sign.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
position: absolute;
opacity: 0.1;
content: "";
z-index: 1;
}
.suselbeek.news .content,
.suselbeek.news .grid {
position: relative;
z-index: 3;
}
.suselbeek.news .content {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.suselbeek.news .content * {
margin: 0;
}
.suselbeek.news .content p.view-all {
align-self: center;
}
.suselbeek.news .content p.view-all a {
font-weight: 500;
font-size: 14px;
}
.suselbeek.news .grid .item {
position: relative;
}
.suselbeek.news .grid .item a {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
z-index: 1;
}
.suselbeek.news .grid .item .image {
border-radius: 3px;
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
}
.suselbeek.news .grid .item .image:after {
right: 0;
bottom: 0;
left: 0;
height: 8px;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
}
.suselbeek.news .grid .item .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.suselbeek.news .grid .item .body p.date {
margin-top: 20px;
font-size: 14px;
font-style: italic;
color: #595959;
}
.suselbeek.news .grid .item .body p.link {
margin-top: 10px;
}
.suselbeek.news .grid .item .body p {
margin-top: 20px;
}
.suselbeek.news .grid .item:hover .body p.link {
color: #78BE20;
}
.suselbeek.jobs {
width: auto;
margin-top: 80px;
padding: 80px calc((100% - 1120px) / 2);
background-color: #F1F3F2;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
.suselbeek.jobs.list {
width: auto;
margin: 0;
padding: 40px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2);
background-color: #FFFFFF;
display: flex;
flex-direction: column;
column-gap: 40px;
row-gap: 16px;
position: relative;
}
.suselbeek.jobs.list:before {
display: none;
visibility: hidden;
}
.suselbeek.jobs:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #1C42204D;
mask-image: url('../images/suselbeek-sign.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
position: absolute;
opacity: 0.1;
content: "";
z-index: 1;
}
.suselbeek.jobs .content,
.suselbeek.jobs .grid {
position: relative;
z-index: 3;
}
.suselbeek.jobs .content {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.suselbeek.jobs .content * {
margin: 0;
}
.suselbeek.jobs .content p.view-all {
align-self: center;
}
.suselbeek.jobs .content p.view-all a {
font-weight: 500;
font-size: 14px;
}
.suselbeek.jobs .grid .item {
position: relative;
}
.suselbeek.jobs .grid .item a {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
z-index: 3;
}
.suselbeek.jobs .grid .item .image {
border-radius: 3px;
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
}
.suselbeek.jobs .grid .item .image:after {
right: 0;
bottom: 0;
left: 0;
height: 8px;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
}
.suselbeek.jobs .grid .item .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.suselbeek.jobs .grid .item .body p.date {
margin-top: 20px;
font-size: 14px;
font-style: italic;
color: #595959;
}
.suselbeek.jobs .grid .item .body p.link {
margin-top: 10px;
}
.suselbeek.jobs .grid .item .body p {
margin-top: 20px;
}
.suselbeek.jobs .grid .item:hover .body p.link {
color: #78BE20;
}
#frequently-asked-questions-page {
margin-top: 20px;
border-bottom: 1px solid rgba(194,194,194,1);
}
#frequently-asked-questions-page .faq {
border-bottom: 1px solid rgba(194,194,194,1);
cursor: pointer;
}
#frequently-asked-questions-page .faq:first-of-type {
border-top: 1px solid rgba(194,194,194,1);
}
#frequently-asked-questions-page .faq:last-of-type {
border-bottom: 0;
}
#frequently-asked-questions-page .faq .question h2 {
line-height: 24px;
margin: 0;
padding: 8px 0;
font-size: 16px;
text-transform: none;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#frequently-asked-questions-page .faq .question h2:after {
font-family: "Font Awesome 5 Pro";
content: "\f078";
display: block;
float: left;
}
#frequently-asked-questions-page .faq .question.active h2 {
}
#frequently-asked-questions-page .faq .question.active h2:after {
content: "\f077";
}
#frequently-asked-questions-page .faq .answer {
display: none;
}
#frequently-asked-questions-page .faq .answer p {
padding: 0 26px 20px 0;
}
.suselbeek.contact-banner {
margin-top: 80px;
padding: 0 calc((100% - 1120px) / 2);
}
.suselbeek.contact-banner .contact-banner {
display: flex;
flex-direction: row;
gap: 40px;
position: relative;
background: linear-gradient(90deg, rgba(28, 66, 32, 0.50) 0%, rgba(28, 66, 32, 0.00) 53.08%), linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') #78BE20 50% / cover no-repeat;
}
.suselbeek.contact-banner .contact-banner:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #1C4220;
mask-image: url('../images/suselbeek-sign.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
position: absolute;
opacity: 0.1;
content: "";
z-index: 1;
}
.suselbeek.contact-banner .contact-banner .content {
width: 50%;
padding: 56px 40px;
position: relative;
z-index: 2;
}
.suselbeek.contact-banner .contact-banner .content * {
color: #FFFFFF;
}
.suselbeek.contact-banner .contact-banner .content p.heading-4 {
margin: 0;
}
.suselbeek.contact-banner .contact-banner .content .buttons {
display: flex;
flex-direction: row; /*margin-top: 30px;*/
}
.suselbeek.contact-banner .contact-banner .content .buttons p.editor-button:first-child a:after {
background-color: #FFFFFF;
}
.suselbeek.contact-banner .contact-banner .content .buttons p.editor-button:not(:only-child):first-child a:after {
display: none;
visibility: hidden;
}
.suselbeek.contact-banner .contact-banner .content .buttons p.editor-button a {
background-color: #FFFFFF;
text-decoration: none;
color: #000000;
}
.suselbeek.contact-banner .contact-banner .content .buttons p.editor-button:hover a {
text-decoration: underline;
}
.suselbeek.contact-banner .contact-banner .content .buttons p.editor-button.alternative a {
padding-right: 0;
background-color: transparent;
border-color: #FFFFFF;
border-right: 0;
color: #FFFFFF;
position: relative;
}
.suselbeek.contact-banner .contact-banner .content .buttons p.editor-button.alternative a:after {
top: -1px;
right: -44px;
bottom: 0;
width: 44px;
height: 44px;
background-color: #FFFFFF;
mask-image: url('../images/button_alternative.svg');
mask-repeat: no-repeat;
mask-position: top left;
mask-size: 44px 44px;
position: absolute;
display: block;
content: "";
}
.suselbeek.contact-banner .contact-banner .image {
width: 50%;
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%);
}
.suselbeek.contact-banner .contact-banner .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.suselbeek.content-banner.inset {
margin-top: 80px;
padding: 0 calc((100% - 1120px) / 2);
}
.suselbeek.content-banner.inset.login .content-banner {
margin-top: 40px !important;
}
.suselbeek.content-banner.inset.login .content-banner .buttons {
margin-top: 20px;
}
.suselbeek.content-banner.inset .content-banner {
background-color: #F1F3F2;
display: flex;
flex-direction: row;
gap: 0;
position: relative;
}
.suselbeek.content-banner.inset .content-banner:before {
height: 8px;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
}
.suselbeek.content-banner.inset .content-banner .content {
width: 50%;
padding: 56px 40px 64px 40px;
position: relative;
z-index: 2;
}
.suselbeek.content-banner.inset .content-banner .content p.heading-4 {
margin: 0;
}
.suselbeek.content-banner.inset .content-banner .content .buttons p.editor-button a {
background-color: #1C4220;
text-decoration: none;
color: #FFFFFF;
}
.suselbeek.content-banner.inset .content-banner .content .buttons p.editor-button:first-child a:after {
display: none;
visibility: hidden;
}
.suselbeek.content-banner.inset .content-banner .content .buttons p.editor-button:hover a {
text-decoration: underline;
}
.suselbeek.content-banner.inset .content-banner .content .buttons p.editor-button.alternative a {
padding-right: 0;
background-color: transparent;
border-color: #1C4220;
border-right: 0;
color: #1C4220;
position: relative;
}
.suselbeek.content-banner.inset .content-banner .content .buttons p.editor-button.alternative a:after {
top: -1px;
right: -44px;
bottom: 0;
width: 44px;
height: 44px;
background-color: #1C4220;
mask-image: url('../images/button_alternative.svg');
mask-repeat: no-repeat;
mask-position: top left;
mask-size: 44px 44px;
position: absolute;
display: block;
content: "";
}
.suselbeek.content-banner.inset .content-banner .image {
width: 50%;
}
.suselbeek.content-banner.inset .content-banner .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.suselbeek.content-banner.overlay {
width: auto;
padding: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2);
display: grid;
grid-template-columns: calc(((100% / 12) * 8) - 20px) calc(((100% / 12) * 4) - 20px);
gap: 40px;
position: relative;
}
.suselbeek.content-banner.overlay .content {
margin-bottom: 80px;
padding: 80px;
background-color: #F1F3F2;
position: relative;
z-index: 2;
}
.suselbeek.content-banner.overlay .content:before {
width: calc(100% + calc(((100% / 12) * 4) - 20px));
height: 8px;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
}
.suselbeek.content-banner.overlay .content:after {
top: 0;
bottom: 0;
left: 100%;
height: 100%;
width: calc(((100% / 12) * 4) - 20px);
background-color: #F1F3F2;
content: "";
position: absolute;
z-index: 1;
}
.suselbeek.content-banner.overlay .content p.heading-4 {
margin: 0;
}
.suselbeek.content-banner.overlay .content .buttons p.editor-button a {
background-color: #1C4220;
text-decoration: none;
color: #FFFFFF;
}
.suselbeek.content-banner.overlay .content .buttons p.editor-button:not(:only-child):first-child a:after {
display: none;
visibility: hidden;
}
.suselbeek.content-banner.overlay .content .buttons p.editor-button:hover a {
text-decoration: underline;
}
.suselbeek.content-banner.overlay .content .buttons p.editor-button.alternative a {
padding-right: 0;
background-color: transparent;
border-color: #1C4220;
border-right: 0;
color: #1C4220;
position: relative;
}
.suselbeek.content-banner.overlay .content .buttons p.editor-button.alternative a:after {
top: -1px;
right: -44px;
bottom: 0;
width: 44px;
height: 44px;
background-color: #1C4220;
mask-image: url('../images/button_alternative.svg');
mask-repeat: no-repeat;
mask-position: top left;
mask-size: 44px 44px;
position: absolute;
display: block;
content: "";
}
.suselbeek.content-banner.overlay .image {
margin-top: 80px;
position: relative;
z-index: 2;
}
.suselbeek.content-banner.overlay .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/*
.suselbeek.image-text {width: auto; padding: 80px calc((100% - 1120px) / 2) 0 calc((100% - 1120px) / 2); display: grid; grid-template-columns: calc(((100% / 12) * 8) - 20px) calc(((100% / 12) * 4) - 20px); gap: 40px; position: relative;}
.suselbeek.image-text div {}
.suselbeek.image-text div:first-child {padding: 0 100px 125px 0; position: relative;}
.suselbeek.image-text div:first-child:before {top: 40px; right: 0; bottom: 0; left: 100px; background-color: #1C42204D; mask-image: url('../images/suselbeek-sign.svg'); mask-position: center; mask-repeat: no-repeat; mask-size: contain; position: absolute; opacity: 0.1; content: ""; z-index: 1;}
.suselbeek.image-text div:first-child:after {top: 40px; right: 0; bottom: 0; left: 100px; background-color: #F1F3F2; content: ""; position: absolute;}
.suselbeek.image-text div:first-child img {width: 100%; height: auto; position: relative; z-index: 1;}
.suselbeek.image-text div:last-child {display: flex; flex-direction: column; gap: 40px;}
.suselbeek.image-text div:last-child p {margin: 0;}
.suselbeek.image-text div:last-child p.editor-button {align-self: start;}
*/
.suselbeek.selected-products {
width: auto;
margin-top: 80px;
padding: 80px calc((100% - 1120px) / 2);
background-color: #F1F3F2;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
.suselbeek.selected-products .content,
.suselbeek.selected-products .grid {
position: relative;
z-index: 3;
}
.suselbeek.selected-products .content {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.suselbeek.selected-products .content * {
margin: 0;
}
.suselbeek.selected-products .content p.view-all {
align-self: center;
}
.suselbeek.selected-products .content p.view-all a {
font-weight: 500;
font-size: 14px;
}
.suselbeek.footer {
}
.suselbeek.footer .outer-wrapper {
}
.suselbeek.footer .outer-wrapper .inner-wrapper {
padding: 56px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
}
.suselbeek.footer .outer-wrapper .inner-wrapper .logo {
top: -34px;
position: absolute;
z-index: 2;
}
.suselbeek.footer .outer-wrapper .inner-wrapper .logo a {
display: inline-block;
}
.suselbeek.footer .outer-wrapper .inner-wrapper .logo a img {
width: auto;
height: 68px;
display: block;
}
.suselbeek.footer .outer-wrapper .inner-wrapper .logos {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
column-gap: 20px;
}
.suselbeek.footer .outer-wrapper .inner-wrapper .logos:not(:nth-child(1)) {
margin-top: 20px;
}
.suselbeek.footer .outer-wrapper .inner-wrapper .logos img {
filter: grayscale(1);
}
.suselbeek.footer .outer-wrapper .inner-wrapper .logos img.fsc {width: auto; height: 64px;}
.suselbeek.footer .outer-wrapper .inner-wrapper .logos img.komo {width: auto; height: 56px;}
.suselbeek.footer .outer-wrapper .inner-wrapper .logos img.stip {width: auto; height: 40px;}
.suselbeek.footer .outer-wrapper .inner-wrapper p {
line-height: 20px;
margin: 0;
font-size: 14px;
}
.suselbeek.footer .outer-wrapper .inner-wrapper p:not(:first-child) {
margin-top: 20px;
}
.suselbeek.footer .outer-wrapper .inner-wrapper nav {
}
.suselbeek.footer .outer-wrapper .inner-wrapper nav.footer ul.mega-menu.footer-navigation {
border: none;
margin: 0;
text-align: left;
display: flex;
flex-direction: column;
}
.suselbeek.footer .outer-wrapper .inner-wrapper nav.footer ul.mega-menu.footer-navigation li {
margin: 0;
float: none;
}
.suselbeek.footer .outer-wrapper .inner-wrapper nav.footer ul.mega-menu.footer-navigation li a {
line-height: unset;
padding: unset;
font-size: unset;
text-decoration: none;
display: block;
}
.suselbeek.footer .outer-wrapper .inner-wrapper nav.footer ul.mega-menu.footer-navigation li a:before {
display: none;
visibility: hidden;
}
.suselbeek.footer .outer-wrapper .inner-wrapper nav.footer ul.mega-menu.footer-navigation li span,
.suselbeek.footer .outer-wrapper .inner-wrapper nav.footer ul.mega-menu.footer-navigation li a span {
line-height: 20px;
padding: unset;
font-size: 14px;
font-weight: 400;
color: #000000;
display: block;
}
.suselbeek.footer .outer-wrapper .inner-wrapper nav.footer ul.mega-menu.footer-navigation li:hover span,
.suselbeek.footer .outer-wrapper .inner-wrapper nav.footer ul.mega-menu.footer-navigation li:hover a span {
text-decoration: underline;
}
.suselbeek.copyright {
padding: 14px 0;
}
.suselbeek.copyright p {
line-height: 20px;
margin: 0;
font-size: 14px;
font-weight: normal;
font-style: italic;
color: #FFFFFF;
}
.suselbeek.copyright p .disclaimer {
}
.suselbeek.copyright p .links {
}
.suselbeek.copyright p .links a {
color: #FFFFFF;
}
.block {
margin-bottom: 8px;
padding: 32px;
background-color: #1C42200D;
}
.block p.heading-6 {
margin: 0;
}
.block ul {
margin: 20px 0 0 0;
padding: 0;
}
.block ul li {
margin: 0;
padding: 0 0 0 30px;
list-style: none;
position: relative;
}
.block ul li.active a {
text-decoration: underline;
}
.block ul li:before {
top: 50%;
left: 0;
width: 14px;
height: 2px;
background-color: #78BE20;
border-radius: 999px;
content: "";
transform: translateY(-50%);
position: absolute;
}
.banner {
display: grid;
grid-gap: 0;
grid-template-columns: repeat(12, 1fr);
}
.banner p {
margin: 0;
}
.banner > p:nth-child(1) {
width: 100%;
aspect-ratio: 1/1;
background-color: #1C42200D;
border-radius: 9999px;
font-size: 0;
text-align: center;
flex-shrink: 0;
flex-grow: 0;
content: "";
grid-column: 1 / span 4;
grid-row: 1;
align-self: start;
position: relative;
text-indent: -9999px;
}
.banner > p:nth-child(1):before {
top: 50%;
left: 50%;
font-size: 40px;
position: absolute;
text-indent: 0px;
transform: translate(-50%, -50%);
}
.banner > p:nth-child(2) {
grid-column: 6 / span 6;
grid-row: 1;
align-self: center;
}
.banner > p:nth-child(3) {
margin-top: 32px;
grid-column: 1 / span 12;
grid-row: 2;
align-self: start;
}
.block .banner > p:nth-child(1) {
grid-column: 1 / span 2;
background-color: transparent;
}
.block .banner > div {
grid-column: 4 / span 9;
grid-row: 1;
align-self: center;
display: flex;
flex-direction: column;
gap: 20px;
}
.category {
position: relative;
}
.category a {
top: 0;
right: 0;
bottom: 0;
left: 0;
text-decoration: none;
position: absolute;
z-index: 2;
}
.category .image {
margin: 0;
padding: 0 20px 24px 20px;
border-radius: 3px;
overflow: hidden;
position: relative;
}
.category .image a {
position: relative;
}
.category .image:after {
top: 32px;
right: 0;
bottom: 0;
left: 0;
width: 100%;
background-color: #F1F3F2;
position: absolute;
content: "";
}
.category .image img {
-webkit-filter: drop-shadow(0px 15px 10px rgba(0,0,0,0.2));
position: relative;
z-index: 1;
transition: all linear 125ms;
}
.category.basico:hover .image img,
.category.voordeuren:hover .image img,
.category.achterdeuren:hover .image img {
transform: perspective(75px) rotateY(-4deg);
}
.category.garagedeuren:hover .image img,
.category.tuindeuren:hover .image img {
transform: perspective(150px) rotateY(-4deg);
}
.category .body {
}
.category .body p.link {
margin: 0;
padding-top: 20px;
font-weight: 700;
}
.category .body p.link a {
position: relative;
}
.category .image:before {
height: 0px;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
transition: all linear 125ms;
}
.category:hover .image:before {
height: 8px;
}
.category:hover .body p.link a,
.category:hover .body p.link { /*text-decoration: underline;*/
color: #78BE20;
}
.product {
position: relative;
}
.product:not(.custom) a {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
z-index: 2;
}
.product .image {
margin: 0 0 20px 0;
padding: 0 20px 24px 20px;
border-radius: 3px; /*overflow: hidden;*/
position: relative;
}
.product .image:after {
top: 32px;
right: 0;
bottom: 0;
left: 0;
width: 100%;
background-color: #F1F3F2;
position: absolute;
content: "";
}
.product .image img {
-webkit-filter: drop-shadow(0px 15px 10px rgba(0,0,0,0.2));
position: relative;
z-index: 1;
transition: all linear 125ms;
}
.product:hover .image img {
transform: perspective(75px) rotateY(-4deg);
}
.product .body {
}
.product .body p.link {
font-weight: 700;
}
.product .image:before {
height: 0px;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
transition: all linear 125ms;
}
.product:hover .image:before {
height: 8px;
}
.product:hover .body p.link { /*text-decoration: underline;*/
color: #78BE20;
}
.product-filter {
}
.product-filter .filter-content {
}
.product-filter .filter-content h2 {
margin-bottom: 20px;
}
.product-filter .filter-content .available-items {
}
.pager {
margin-top: 40px;
}
.pager ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
gap: 8px;
justify-content: center;
}
.pager ul li {
margin: 0;
padding: 0;
list-style: none;
}
.pager ul li.current-page span {
background-color: #1C42200D;
}
.pager ul li span, .pager ul li a {
width: 40px;
height: 40px;
line-height: 40px;
border: 1px solid #1C42200D;
text-align: center;
display: block;
}
.pager ul li a {
text-decoration: none;
}
.pager ul li.first-page a, .pager ul li.previous-page a, .pager ul li.next-page a, .pager ul li.last-page a {
font-family: "Font Awesome 6 Pro";
}
.pager ul li a:hover {
color: #78BE20;
}
.product-detail .gallery {
}
.product-detail .gallery .picture {
width: 100%;
margin: 0 0 20px 0;
padding: 0 20px;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
}
.product-detail .gallery .picture:after {
top: 32px;
right: 0;
bottom: 32px;
left: 0;
width: 100%;
background-color: #F1F3F2;
position: absolute;
content: "";
}
.product-detail .gallery .picture a {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
z-index: 2;
}
.product-detail .gallery .picture img {
margin: 0 /*25%*/;
-webkit-filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.2));
position: relative;
z-index: 1;
transition: all linear 125ms;
}
.product-detail .usps-list {
margin-top: 80px;
}
.product-detail .block {
padding: 32px;
}
.product-detail .block.colors {
margin-top: 20px;
}
.product-detail .block.product-specs {
margin-bottom: 0;
}
.product-detail .block.product-specs .product-specs-lines {
margin-top: 8px;
}
.product-detail .block.product-specs .product-specs-lines .product-specs-line {
padding: 12px 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.product-detail .block.product-specs .product-specs-lines .product-specs-line:not(:last-child) {
border-bottom: 1px solid #E1E1E1;
}
.product-detail .block.product-specs .product-specs-lines .product-specs-line:last-child {
padding-bottom: 0;
}
.product-detail .block.product-specs .product-specs-lines .product-specs-line .attribute-name {
}
.product-detail .block.product-specs .product-specs-lines .product-specs-line .attribute-value {
}
.product-detail .colleteral-products {
margin-top: 80px;
display: flex;
flex-direction: column;
gap: 20px;
}
.product-detail .colleteral-products .content {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.product-detail .colleteral-products .content * {
margin: 0;
}
.product-detail .colleteral-products .content p.view-all {
align-self: center;
}
.product-detail .colleteral-products .content p.view-all a {
font-weight: 500;
font-size: 14px;
}
.usps-list {
display: flex;
flex-direction: column;
gap: 32px;
}
.usps-list p {
margin: 0;
font-weight: 500;
display: flex;
flex-direction: row;
gap: 16px;
}
.usps-list p:before {
width: 22px;
height: 16px;
mask-image: url('data:image/svg+xml,');
mask-position: center;
mask-repeat: no-repeat;
mask-size: 22px 16px;
background-color: #78BE20;
content: "";
display: block;
align-self: center;
}
.vacature {
}
.vacature h2 {
}
.vacature p.date {
margin: 0;
font-style: italic;
}
.vacature .buttons p {
margin: 0;
}
.sitemap {}
.sitemap ul {
margin: 20px 0 0 0 !important;
}
.sitemap ul li {
margin: 0;
padding: 0;
list-style: none;
}
.sitemap ul li a {
text-decoration: none !important;
}
.sitemap ul li a:hover {
text-decoration: underline !important;
}
/**/
.fieldset {
margin-top: 20px !important;
}
.fieldset .form-fields { /*margin-top: 12px !important;*/
}
.fieldset .form-fields .field-validation-error {
display: none;
visibility: hidden;
}
.fieldset .form-fields .inputs {
margin-top: 12px !important;
position: relative;
}
.fieldset .form-fields .inputs:not(.checkbox, .checkboxlist, .radiobutton, .radiobuttonlist, .dropdown) label {
top: 15px;
left: 20px;
line-height: 26px;
font-weight: 400;
position: absolute;
pointer-events: none;
}
.fieldset .form-fields .inputs input {
margin: 0;
padding: 13px 20px;
border: 2px solid #F5F5F5 !important;
border-radius: 8px;
outline: none;
}
.fieldset .form-fields .inputs input.input-validation-error {
border-color: red !important;
color: red !important;
}
.fieldset .form-fields .inputs input[type=text],
.fieldset .form-fields .inputs input[type=email],
.fieldset .form-fields .inputs input[type=password],
.fieldset .form-fields .inputs input[type=phone] {
width: 100%;
}
.fieldset .form-fields .inputs input:hover,
.fieldset .form-fields .inputs input:focus {
outline: none;
}
.fieldset .form-fields .inputs:not(.checkbox, .checkboxlist, .radiobutton, .radiobuttonlist, .dropdown) input:not(:placeholder-shown) ~ label,
.fieldset .form-fields .inputs:not(.checkbox, .checkboxlist, .radiobutton, .radiobuttonlist, .dropdown) input:focus ~ label {
top: -8px;
line-height: 16px;
padding: 0 4px;
font-size: 12px;
background-color: #FFFFFF !important;
border-radius: 4px;
}
.fieldset .form-fields .inputs select {
width: 100%;
margin: 0;
padding: 13px 20px;
border: 2px solid #F5F5F5 !important;
border-radius: 8px;
outline: none;
}
.fieldset .form-fields .inputs:hover, .form-fields .inputs:focus {
outline: none;
}
.fieldset .form-fields .inputs:not(:placeholder-shown) ~ label,
.fieldset .form-fields .inputs:focus ~ label {
top: -8px;
line-height: 16px;
padding: 0 4px;
font-size: 12px;
background-color: #FFFFFF !important;
border-radius: 4px;
}
.fieldset .form-fields .inputs textarea {
width: 100%;
height: 134px;
margin: 0;
padding: 13px 20px;
border: 2px solid #F5F5F5 !important;
border-radius: 8px;
text-indent: 0;
outline: none;
}
.fieldset .form-fields .inputs textarea.input-validation-error {
border-color: red !important;
color: red !important;
}
.fieldset .form-fields .inputs:hover,
.fieldset .form-fields .inputs:focus {
outline: none;
}
.fieldset .form-fields .inputs:not(:placeholder-shown) ~ label,
.fieldset .form-fields .inputs:focus ~ label {
top: -8px;
line-height: 16px;
padding: 0 4px;
font-size: 12px;
background-color: #FFFFFF !important;
border-radius: 4px;
}
.fieldset .form-fields .inputs.radiobuttonlist {
padding: 13px 20px;
background-color: #FFFFFF;
border: 2px solid #F5F5F5 !important;
border-radius: 8px;
position: relative;
}
.fieldset .form-fields .inputs.radiobuttonlist > label {
top: -8px;
left: 20px;
line-height: 16px;
padding: 0 4px;
font-size: 12px;
background-color: #FFFFFF !important;
border-radius: 4px;
position: absolute;
pointer-events: none;
}
.fieldset .form-fields .inputs.dropdown {
position: relative;
}
.fieldset .form-fields .inputs textarea ~ label,
.fieldset .form-fields .inputs.dropdown > label {
top: -8px !important;
left: 20px !important;
line-height: 16px !important;
padding: 0 4px;
font-size: 12px;
background-color: #FFFFFF !important;
border-radius: 4px;
position: absolute;
pointer-events: none;
}
.fieldset .form-fields .inputs.date-of-birth .placeholder {
display: flex;
gap: 12px;
}
.fieldset .form-fields .inputs.flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.fieldset + .buttons {
margin-top: 20px;
}
.field-validation-error {
margin-top: 6px;
font-size: 12px;
color: red;
}
.content-block-grey {
width: auto;
padding: 60px 40px 80px 40px;
background-color: #F1F3F2;
position: relative;
}
.content-block-grey:after {
right: 0;
bottom: 0;
left: 0;
height: 8px;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url('../images/gradient.png') lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
}
.content-block-grey .content {
display: flex;
flex-direction: column;
gap: 40px;
}
.block-account-navigation {
}
.block-account-navigation .content {
display: flex;
flex-direction: column;
gap: 20px;
}
/**/
.admin-header-links {
bottom: 20px;
left: 20px;
display: flex;
flex-direction: column;
gap: 10px;
position: fixed;
z-index: 9999;
}
.admin-header-links a {
width: 48px;
height: 48px;
background-color: black;
border-radius: 9999px;
display: block;
position: relative;
}
.admin-header-links a:hover {
background-color: #1C4220;
}
.admin-header-links a i {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
color: #FFFFFF;
position: absolute;
}
.admin-header-links a.administration, .admin-header-links a.manage-page {
}
.admin-header-links a.administration:before {
}
.admin-header-links a.manage-page:before {
}
.bar-notification {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
padding: 15px 25px 15px 10px;
line-height: 16px;
color: #fff;
opacity: 0.95;
}
.bar-notification.success {
background-color: #4bb07a;
}
.bar-notification.error {
background-color: #e4444c;
}
.bar-notification.warning {
background-color: #f39c12;
}
.bar-notification .content {
margin: 0 10px 0 0;
}
.bar-notification .content a {
color: #fff;
text-decoration: underline;
}
.bar-notification .close {
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
margin: 7px;
background: #fff url('../images/close.png') center no-repeat;
cursor: pointer;
}
.eu-cookie-bar-notification {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1050;
width: 320px;
height: auto;
box-shadow: 0 0 5px rgba(0,0,0,0.25);
background-color: rgba(255,255,255,1);
padding: 20px;
text-align: center;
}
.eu-cookie-bar-notification .text {
margin: 0 0 20px 0;
}
.eu-cookie-bar-notification .button {
margin: 0 0 20px -20px;
display: inline-block;
position: relative;
}
.eu-cookie-bar-notification .button:after {
top: 0;
left: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 0 0 41px;
border-color: transparent transparent transparent rgba(120,190,32,1);
display: block;
position: absolute;
content: "";
}
.eu-cookie-bar-notification .button button {
margin: unset;
padding: 10px 20px;
background-color: rgba(120,190,32,1);
border: unset;
font-weight: 500;
color: rgba(255,255,255,1);
display: block;
outline: none;
}
.eu-cookie-bar-notification button:hover {
text-decoration: underline;
}
.eu-cookie-bar-notification a {
color: rgba(120,190,32,1);
display: block;
}
.eu-cookie-bar-notification a:hover {
text-decoration: underline;
}
.token-tracking-wrapper {
position: relative;
overflow: hidden /*auto*/;
}
.token-tracking-wrapper .token-tracking-info {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: dotted #c3c3c3 2px;
z-index: 100;
border: dotted #000000 1px;
}
.token-tracking-wrapper .token-tracking-info .token-tracking-info-content {
opacity: 0;
display: inline-block;
background: #80be23;
color: white;
padding: 10px;
}
.token-tracking-wrapper .token-tracking-info .token-tracking-info-content code {
background: #00000014;
font-size: 12px;
padding: 3px;
border-radius: 5px;
}
.token-tracking-wrapper .token-tracking-info .token-tracking-info-content span.token-tracking-info-title {
font-weight: bold;
}
.token-tracking-wrapper .token-tracking-info .token-tracking-info-content span.token-tracking-info-edit a {
color: white;
font-size: 12px;
margin-right: 12px;
display: inline-block;
line-height: 12px;
}
.token-tracking-wrapper .token-tracking-info:hover {
background: #00000038;
}
.token-tracking-wrapper .token-tracking-info:hover .token-tracking-info-content {
opacity: 1;
}
.token-tracking-error-wrapper {
position: relative;
overflow: auto;
background: #be232324;
margin-left: 20px;
margin-top: 12px;
}
.token-tracking-error-wrapper .token-tracking-info {
}
.token-tracking-error-wrapper .token-tracking-info .token-tracking-info-content {
display: inline-block;
background: #be2323;
color: white;
padding: 10px;
width: 100%;
}
.token-tracking-error-wrapper .token-tracking-body {
padding: 12px;
}
.token-tracking-error-wrapper .token-tracking-body p:first-of-type {
margin: 0;
}
.token-tracking-error-wrapper .token-tracking-body ul.existing-tokens {
margin: 0;
padding: 0;
}
.token-tracking-error-wrapper .token-tracking-body ul.existing-tokens li {
margin-left: 12px;
font-family: consolas;
list-style: none;
font-size: 12px;
}
.search {
min-width: 44px;
padding: 0 10px;
}
.search form {
position: relative
}
.search form input {
width: 0;
height: 48px;
line-height: 24px;
margin: 0;
background-color: #FFFFFF;
border: 1px solid #E5ECF0;
border-radius: 4px;
transition: all .5s;
-webkit-appearance: none;
outline: none;
opacity: 0
}
.search form .search--icon {
top: 0;
right: 0;
width: 32px;
height: 32px;
line-height: 32px;
margin: 8px 0;
text-align: center;
display: block;
cursor: pointer;
position: absolute
}
.search.is--active form input {
width: 200px;
margin-right: 42px;
background-color: #FFFFFF;
border-color: #E5ECF0;
padding: 0 20px;
opacity: 1
}
a.ico-account, a.ico-login, a.ico-logout, a.ico-register {
width: 32px;
height: 32px;
line-height: 32px;
margin: 8px 0;
text-align: center;
display: block;
cursor: pointer;
}
#nav_mobile {
top: 0;
right: 0;
left: 0;
padding-top: 104px;
background-color: rgba(0,0,0,0.75);
position: absolute;
z-index: 3;
}
.hamburger {
top: 14px;
right: 0;
height: 40px;
margin: 0;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
overflow: visible;
position: absolute;
display: none;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
background-color: #FFFFFF;
}
.hamburger.is-active .hamburger-box {
background-color: #1C4220;
}
.hamburger-box {
width: 40px;
height: 40px;
background-color: #FFFFFF;
display: inline-block;
position: relative;
}
.hamburger-box:hover {
background-color: #1C4220;
}
.hamburger-box:hover .hamburger-inner, .hamburger-box:hover .hamburger-inner::before, .hamburger-box:hover .hamburger-inner::after {
background-color: #FFFFFF;
}
.hamburger-inner {
display: block;
top: 50%;
margin: -1px 10px 0 10px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 20px;
height: 2px;
background-color: #000000;
border-radius: 0px;
position: absolute;
transition-property: transform;
transition-duration: 0.125s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -6px;
}
.hamburger-inner::after {
bottom: -6px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
nav.mobile {
height: 100%;
width: 100%;
background-color: rgba(116,201,193,0.9);
position: fixed;
z-index: 2;
bottom: 0;
left: 0;
overflow-x: hidden;
text-align: center;
display: none;
}
nav.mobile > .mobile-placeholder {
margin: 0 20px;
background-color: #FFFFFF;
-webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.16);
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.16);
overflow: hidden;
}
.slinky-menu {
transform: translateZ(0);
}
.slinky-menu > ul {
left: 0;
position: relative;
transform: translateZ(0);
}
.slinky-menu ul, .slinky-menu li {
list-style: none;
margin: 0;
padding: 0;
}
.slinky-menu ul {
width: 100%;
}
.slinky-menu a,
.slinky-menu a span {
line-height: 24px;
}
.slinky-menu a {
align-items: center;
display: flex;
}
.slinky-menu a span {
flex: 1;
}
.slinky-menu li ul {
display: none;
left: 100%;
position: absolute;
top: 0;
}
.slinky-menu .header {
display: flex;
}
.slinky-menu .header .title {
flex: 1;
line-height: 1.4;
margin: 0;
padding: 12px 20px;
font-weight: bold;
order: 1;
}
.slinky-theme-default {
}
.slinky-theme-default .title {
}
.slinky-theme-default li, .slinky-theme-default li a, .slinky-theme-default li a span {
text-align: left;
}
.slinky-theme-default li {
line-height: 1;
background-color: #FFFFFF;
border-bottom: 1px solid rgba(0,0,0,0.1);
display: flex;
}
.slinky-theme-default a {
transition: all linear 125ms;
}
.slinky-theme-default a:not(.back):not(.next) {
width: 100%;
/*width: calc(100% - 86px);*/
line-height: 24px;
padding: 12px 20px;
text-decoration: none;
color: #000000;
display: inline-block;
vertical-align: top;
}
.slinky-theme-default a.nav-link {
width: 100% !important;
display: block !important;
}
.slinky-theme-default a,
.slinky-theme-default a:active {
text-decoration: none;
}
.slinky-theme-default a:hover {
text-decoration: underline !important;
}
.slinky-theme-default .next, .slinky-theme-default .back {
line-height: 32px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.slinky-theme-default .next {
padding: 8px 35px 8px 40px;
border-left: 1px solid rgba(0,0,0,0.1);
}
.slinky-theme-default .back {
padding: 8px 40px 8px 35px;
border-right: 1px solid rgba(0,0,0,0.1);
}
.slinky-theme-default .next::after, .slinky-theme-default .back::after {
font-family: 'Font Awesome 5 Pro';
color: #777777;
}
.slinky-theme-default .next::after {
content: "\f054";
}
.slinky-theme-default .back::after {
content: "\f053";
}
.slinky-theme-default .next a, .slinky-theme-default .back a {
text-decoration: none;
}
.mega-menu.mobile-navigation {
display: block !important;
}
.search-results {
margin-top: 20px;
}
.search-results h4 {
font-size: 16px;
margin-top: 0;
font-weight: 700;
line-height: 22px;
}
.search-results h4 a {
color: #1C4220;
text-decoration: underline;
}
.search-results h4 a:hover {
text-decoration: none;
}
@media (max-width: 576px) {
.suselbeek.body {
padding-bottom: 74px;
/*margin-top: 20px;*/
}
.suselbeek.text.columns-2 {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
.suselbeek.header {
top: 0;
right: 0;
left: 0;
padding: 18px 20px;
position: absolute;
z-index: 4;
}
.grid.columns-5-7 .default {
display: none;
}
.grid.columns-5-7 .mobile {
display: block;
margin-top: 25px;
}
.suselbeek.header .outer-wrapper .inner-wrapper .logo {
margin: 0;
}
.suselbeek.header .outer-wrapper .inner-wrapper .logo a, .suselbeek.header .outer-wrapper .inner-wrapper .logo a img {
display: block;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations {
display: none;
visibility: hidden;
}
.suselbeek.hero:not(.landingpage) {
width: 100%;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
.suselbeek.hero .placeholder:first-child {
gap: 40px;
flex-direction: column;
}
.suselbeek.hero .placeholder .shape {
bottom: unset;
width: 90%;
min-width: unset;
max-width: unset;
height: 50%;
}
.suselbeek.hero .placeholder .content {
width: calc(100% - 40px) !important;
margin: 0 20px;
order: 3;
}
.suselbeek.hero .placeholder .featured {
width: calc(100% - 40px);
margin: 104px 20px 0 20px;
order: 1;
}
.suselbeek.hero .placeholder .featured .detail {
left: -72px;
}
.suselbeek.hero .placeholder .featured .overlay {
top: 50%;
left: 50%;
right: unset;
bottom: unset;
transform: translateY(-50%);
}
.suselbeek.hero .placeholder .featured .impression {
left: 20%;
width: 80%;
background: linear-gradient(141deg, rgba(120, 190, 32, 0.00) 55.74%, #78BE20 100%), linear-gradient(180deg, rgba(28, 66, 32, 0.00) 50%, rgba(28, 66, 32, 0.80) 100%), linear-gradient(0deg, rgba(28, 66, 32, 0.60) 0%, rgba(28, 66, 32, 0.6) 100%), url('/Themes/Suselbeek/Content/images/0003920_voordeuren_450.jpeg') lightgray 50% / cover no-repeat;
}
.suselbeek.hero.landingpage {
width: 100%;
margin: 0;
padding: 0 0 56px 0;
}
.suselbeek.hero.landingpage .placeholder {
flex-direction: column;
gap: 40px;
}
.suselbeek.hero.landingpage .placeholder .highlight {
width: 100%;
position: relative;
}
.suselbeek.hero.landingpage .placeholder .highlight .featured {
width: calc(100% - 40px);
margin: 104px 20px 0 20px;
position: relative;
}
.suselbeek.hero.landingpage .placeholder .highlight .featured .overlay {
top: unset;
right: 20px;
bottom: 0;
width: 50%;
transform: unset;
position: absolute;
}
.suselbeek.hero.landingpage .placeholder .highlight .featured .overlay p.heading-2 {
line-height: 24px;
font-size: 24px;
}
.suselbeek.hero.landingpage .placeholder .highlight .featured .detail {
top: unset;
left: -72px;
position: relative;
transform: translateY(0) perspective(100px) rotateY(-5deg)
}
.suselbeek.hero.landingpage .placeholder .highlight .featured .detail img {
width: auto;
height: 300px;
}
.suselbeek.hero.landingpage .placeholder .highlight .shape {
width: 90%;
}
.suselbeek.hero.landingpage .placeholder .content div {
width: 50%;
}
.suselbeek.hero.landingpage .placeholder .content ul {
width: 50%;
margin-top: 0;
}
.suselbeek.hero.landingpage .placeholder .shape {
bottom: unset;
width: 90%;
min-width: unset;
max-width: unset;
height: 100%;
}
.suselbeek.hero.landingpage .placeholder:first-of-type {
position: relative;
}
.suselbeek.hero.landingpage .placeholder:not(:first-of-type) {
margin: 40px 20px 0 20px;
}
.suselbeek.hero.landingpage .placeholder:first-of-type .content {
margin: 0;
flex-direction: column;
}
.suselbeek.hero.landingpage .placeholder:first-of-type .content div {
width: 100%;
}
.suselbeek.hero.landingpage .placeholder:first-of-type .content ul {
width: 100%;
margin: 20px 0 0 0;
}
.suselbeek.hero.landingpage .placeholder .logos div p {
text-align: left !important;
}
.suselbeek.hero.page {
background-color: unset !important;
}
.suselbeek.hero.page .placeholder {
flex-direction: row;
}
.suselbeek.hero.page .placeholder .content {
width: calc((100% / 12)* 8) !important;
margin: unset;
padding: 104px 20px 80px 20px;
}
.suselbeek.hero.page .placeholder .shape {
height: calc(100% - 40px);
}
.suselbeek.hero.page .placeholder .content {
width: 100% !important;
}
.suselbeek.hero.page .placeholder .content .suselbeek.breadcrumb {
padding-right: 0;
padding-left: 0;
}
.suselbeek.usps {
padding: 40px 20px;
display: grid;
grid-template-columns: 100%;
}
.suselbeek.usps.grey {
background-color: #FFFFFF;
}
.suselbeek.wrapper {
margin: 20px 20px 0 20px;
}
.suselbeek.text,
.suselbeek.homepage-categories,
.suselbeek.banners {
padding: 40px 20px 0 20px;
}
.suselbeek.text.columns-8-4 {
grid-template-columns: 100%;
margin-left: unset;
margin-right: unset;
}
.suselbeek.text.columns-4-8 {
grid-template-columns: 100%;
margin-left: unset;
margin-right: unset;
}
.suselbeek.block-grey {
margin: 0;
}
.suselbeek.block-grey.with-images {
margin-top: 40px;
padding: 40px 20px;
}
.suselbeek.news {
padding: 40px 20px;
}
.suselbeek.homepage-categories .grid {
grid-template-columns: repeat(2, 1fr);
}
.suselbeek.block-grey.with-images {
margin: 40px 20px;
flex-direction: column;
}
.suselbeek.block-grey.with-images .content {
width: 100%;
}
.suselbeek.block-grey.with-images .images {
width: 100%;
margin: 0 auto;
}
.suselbeek.block-grey.with-images .image-1 {
top: unset;
}
.suselbeek.block-grey.with-images .image-2 {
bottom: -80px;
position: relative;
z-index: 3;
}
.suselbeek.block-grey.with-images .image-1, .suselbeek.block-grey.with-images .image-2 {
position: relative;
}
.suselbeek.news .grid {
display: flex;
flex-direction: column;
}
.suselbeek.news .grid .item {
display: flex;
flex-direction: column;
gap: 20px;
}
.suselbeek.news .grid .item .image {
width: 100%;
}
.suselbeek.news .grid .item .body {
flex-shrink: 1;
flex-grow: 1;
}
.suselbeek.news .grid .item .body p.date {
margin: 0;
}
.suselbeek.contact-banner {
margin: 40px 20px 0 20px;
padding: 0;
}
.suselbeek.contact-banner .contact-banner {
flex-direction: column;
gap: 0;
border-radius: 3px;
background: linear-gradient(90deg, #1C4220 0%, rgba(28, 66, 32, 0.00) 100%), url('../images/gradient.png') lightgray 50% / cover no-repeat;
}
.suselbeek.contact-banner .contact-banner .content {
width: 100%;
}
.suselbeek.contact-banner .contact-banner .content .buttons {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.suselbeek.contact-banner .contact-banner .content .buttons p {
margin: 0;
}
.suselbeek.contact-banner .contact-banner .content .buttons p a {
display: inline-block;
}
.suselbeek.contact-banner .contact-banner .content .buttons p.editor-button:not(:only-child):first-child a:after {
background-color: #FFFFFF;
display: inline-block;
visibility: visible;
}
.suselbeek.contact-banner .contact-banner .image {
width: 100%;
mask-image: unset;
position: relative;
z-index: 1;
}
.suselbeek.contact-banner .contact-banner:before {
bottom: unset;
left: unset;
width: 75%;
aspect-ratio: 1/1;
}
.banner {
display: flex;
flex-direction: column;
}
.banner > p:nth-child(1) {
width: 112px;
}
.banner > p:nth-child(2) {
margin-top: 20px;
align-self: unset;
}
.banner > p.link:after {
align-self: center;
}
.suselbeek.content-banner:not(.inset)::before {
width: 100%;
height: 8px;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url(../images/gradient.png) lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
}
.suselbeek.content-banner.overlay {
margin: 20px 20px 40px 20px;
padding: 0;
padding: 40px 20px;
background-color: #F1F3F2;
display: flex;
flex-direction: column;
gap: 0;
}
.suselbeek.content-banner.overlay .content:before {
display: none;
visibility: hidden;
}
.suselbeek.content-banner.overlay .content {
margin: 0;
padding: 0;
background-color: transparent;
}
.suselbeek.content-banner.overlay .content:after {
display: none;
visibility: hidden;
}
.suselbeek.content-banner.overlay .image {
margin: 40px 0 -80px 0;
}
.suselbeek.content-banner.overlay .image img {
width: 100%;
height: auto;
}
.suselbeek.image-text {
width: 100%;
padding: 40px 20px 0 20px;
display: flex;
flex-direction: column;
}
.suselbeek.content-banner.inset {
margin-top: 40px;
padding: 0 20px;
}
.suselbeek.content-banner.inset .content-banner {
flex-direction: column;
}
.suselbeek.content-banner.inset .content-banner .content {
width: 100%;
padding: 40px 20px;
}
.suselbeek.content-banner.inset .content-banner .image {
width: 100%;
}
.suselbeek.contact-banner .contact-banner .content {
padding: 40px 20px;
}
.suselbeek.breadcrumb {
padding: 104px 20px 40px 20px;
}
.suselbeek.footer .outer-wrapper .inner-wrapper {
padding: 54px 20px 20px 20px;
flex-wrap: wrap;
flex-direction: column;
gap: 20px;
}
.suselbeek.footer .outer-wrapper .inner-wrapper > div:last-child {
flex-basis: unset;
display: flex;
flex-direction: column;
justify-content: center;
}
.suselbeek.footer .outer-wrapper .inner-wrapper > div:last-child .logos {
margin: 20px 0 0 0;
display: flex;
align-self: start;
}
.suselbeek.footer .outer-wrapper .inner-wrapper > div:last-child .logos:first-child {
margin-right: 20px;
}
/*
.suselbeek.footer .outer-wrapper .inner-wrapper > div:last-child .logos img {
width: auto;
height: unset;
}
*/
.suselbeek.footer .outer-wrapper .inner-wrapper > div:last-child .logos p {
text-align: right;
}
.suselbeek.footer .outer-wrapper .inner-wrapper > div ul.mega-menu {
display: block !important;
}
.suselbeek.footer .outer-wrapper .inner-wrapper > div ul.mega-menu li {
list-style: none;
}
.suselbeek.copyright {
padding: 14px 20px;
text-align: center;
}
.menu-title, .mega-menu-responsive {
display: none;
visibility: hidden;
}
.grid.columns-4-8, .grid.columns-5-7 {
grid-template-columns: 100%;
}
.grid.columns-4-8 > div:first-of-type {
}
.grid.columns-3, .grid.columns-4, .grid.columns-6 {
grid-template-columns: 100%;
}
.product-detail .suselbeek.contact-banner .contact-banner {
display: flex;
flex-direction: column;
gap: 0;
}
.product-detail .suselbeek.contact-banner .contact-banner .content {
width: 100%;
}
.product-detail .suselbeek.contact-banner .contact-banner .content .buttons p.editor-button a:after {
background-color: #FFFFFF;
}
.product-detail .suselbeek.contact-banner .contact-banner .image {
width: 100%;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%)
}
.product-detail .colleteral-products .content {
flex-direction: column;
gap: 20px;
}
.product-detail .colleteral-products .content p.view-all {
align-self: start;
}
.suselbeek.news .content {
flex-direction: column;
gap: 20px;
}
.suselbeek.news .content p.view-all {
align-self: start;
}
.suselbeek.image-text div:first-child {
padding: 0 40px 56px 0;
}
.suselbeek.image-text div:first-child:after {
left: 40px;
}
.product-filter .filter-content h2 {
line-height: 20px;
margin-bottom: 0;
padding: 32px;
font-size: 16px;
font-weight: 700;
color: #1C4220;
background-color: #1C42200D;
display: flex;
justify-content: space-between;
}
.product-filter .filter-content h2:after {
font-family: "Font Awesome 5 Pro";
content: "\f078";
}
.product-filter .filter-content h2.active:after {
transform: rotate(-180deg);
}
.product-filter .filter-content .available-items {
display: none;
}
.product-filter .filter-content .available-items .block {
margin: 0;
padding-top: 0;
}
}
@media (min-width: 577px) {
.product-filter .filter-content h2:after {
display: none;
visibility: hidden;
}
.product-filter .filter-content .available-items {
display: block;
}
}
@media (min-width: 577px) and (max-width: 1000px) {
.suselbeek.body {
padding-bottom: 74px;
}
.suselbeek.text.columns-8-4 {
grid-template-columns: 100%;
margin-left: unset;
margin-right: unset;
}
.suselbeek.text.columns-4-8 {
grid-template-columns: 100%;
margin-left: unset;
margin-right: unset;
}
.suselbeek.header {
top: 0;
right: 0;
left: 0;
padding: 18px 20px;
position: absolute;
z-index: 3;
}
.suselbeek.header .outer-wrapper .inner-wrapper .logo {
margin: 0;
}
.suselbeek.header .outer-wrapper .inner-wrapper .logo a, .suselbeek.header .outer-wrapper .inner-wrapper .logo a img {
display: block;
}
.suselbeek.header .outer-wrapper .inner-wrapper .navigations {
display: none;
visibility: hidden;
}
.suselbeek.hero:not(.landingpage) {
width: 100%;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
.suselbeek.hero .placeholder:first-child {
gap: 40px;
flex-direction: column;
}
.suselbeek.hero .placeholder .shape {
bottom: unset;
width: 90%;
min-width: unset;
max-width: unset;
height: 50%;
}
.suselbeek.hero .placeholder .content {
width: calc(100% - 40px) !important;
margin: 0 20px;
order: 3;
}
.suselbeek.hero .placeholder .featured {
width: calc(100% - 40px);
margin: 104px 20px 0 20px;
order: 1;
}
.suselbeek.hero .placeholder .featured .detail {
left: 0;
}
.suselbeek.hero .placeholder .featured .overlay {
top: 50%;
left: 304px;
bottom: unset;
transform: translateY(-50%);
}
.suselbeek.hero .placeholder .featured .impression {
left: 142px;
width: calc(100% - 142px);
}
.suselbeek.hero.landingpage {
width: 100%;
margin: 0;
padding: 0 0 56px 0;
}
.suselbeek.hero.landingpage .placeholder .highlight {
width: 100%;
position: relative;
}
.suselbeek.hero.landingpage .placeholder .highlight .featured {
margin: 104px 20px 0 20px;
}
.suselbeek.hero.landingpage .placeholder .highlight .featured .overlay {
width: 30%;
}
.suselbeek.hero.landingpage .placeholder .highlight .featured .detail {
width: 40%;
left: 20%;
}
.suselbeek.hero.landingpage .placeholder .highlight .shape {
width: 90%;
}
.suselbeek.hero.landingpage .placeholder .content div {
width: 50%;
}
.suselbeek.hero.landingpage .placeholder .content ul {
width: 50%;
margin-top: 0;
}
.suselbeek.hero.landingpage .placeholder .shape {
bottom: unset;
width: 90%;
min-width: unset;
max-width: unset;
height: 100%;
}
.suselbeek.hero.landingpage .placeholder:first-of-type {
position: relative;
}
.suselbeek.hero.landingpage .placeholder:not(:first-of-type) {
margin: 40px 20px 0 20px;
}
.suselbeek.hero.landingpage .placeholder:first-of-type .content {
margin: 0;
flex-direction: row;
}
.suselbeek.hero.landingpage .placeholder .featured {
width: calc(100% - 40px);
margin: 104px 20px 0 20px;
position: relative;
}
.suselbeek.hero.landingpage .placeholder .featured .overlay {
transform: unset;
}
.suselbeek.hero.landingpage .placeholder .featured .detail {
width: 50%;
top: unset;
left: 130px;
position: relative;
transform: translateY(0) perspective(100px) rotateY(-5deg)
}
.suselbeek.hero.landingpage .placeholder .featured .detail img {
width: auto;
height: 300px;
}
.suselbeek.hero.page {
background-color: unset !important;
}
.suselbeek.hero.page .placeholder {
flex-direction: row;
}
.suselbeek.hero.page .placeholder .content {
width: calc((100% / 12)* 8) !important;
margin: unset;
padding: 104px 20px 80px 20px;
}
.suselbeek.hero.page .placeholder .shape {
height: calc(100% - 40px);
}
.suselbeek.usps {
padding: 40px 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.suselbeek.usps.grey {
background-color: #FFFFFF;
}
.suselbeek.wrapper {
margin: 20px 20px 0 20px;
}
.suselbeek.text,
.suselbeek.homepage-categories,
.suselbeek.banners {
padding: 40px 20px 0 20px;
}
.suselbeek.block-grey {
margin: 0;
}
.suselbeek.block-grey.with-images {
margin-top: 40px;
padding: 40px 20px;
}
.suselbeek.news {
padding: 40px 20px;
}
.suselbeek.homepage-categories .grid {
grid-template-columns: repeat(2, 1fr);
}
.suselbeek.block-grey.with-images {
margin: 40px 20px;
flex-direction: column;
}
.suselbeek.block-grey.with-images .content {
width: 100%;
}
.suselbeek.block-grey.with-images .images {
width: calc(100% - 180px);
margin: 0 auto;
}
.suselbeek.block-grey.with-images .image-1 {
top: unset;
}
.suselbeek.block-grey.with-images .image-2 {
bottom: -80px;
position: relative;
z-index: 3;
}
.suselbeek.block-grey.with-images .image-1, .suselbeek.block-grey.with-images .image-2 {
position: relative;
}
.suselbeek.news .grid {
display: flex;
flex-direction: column;
}
.suselbeek.news .grid .item {
display: flex;
flex-direction: revert;
align-items: start;
gap: 20px;
}
.suselbeek.news .grid .item .image {
width: calc(100% / 3);
flex-shrink: 0;
flex-grow: 0;
}
.suselbeek.news .grid .item .body {
flex-shrink: 1;
flex-grow: 1;
}
.suselbeek.news .grid .item .body p.date {
margin: 0;
}
.suselbeek.contact-banner {
margin: 40px 20px 0 20px;
padding: 0;
}
.suselbeek.contact-banner .contact-banner .content .buttons {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.suselbeek.contact-banner .contact-banner .content .buttons p {
margin: 0;
}
.suselbeek.contact-banner .contact-banner .content .buttons p a {
display: inline-block;
}
.suselbeek.contact-banner .contact-banner .content .buttons p.editor-button:not(:only-child):first-child a:after {
background-color: #FFFFFF;
display: inline-block;
visibility: visible;
}
.banner {
display: flex;
flex-direction: column;
}
.banner > p:nth-child(1) {
width: 112px;
}
.banner > p:nth-child(2) {
margin-top: 20px;
align-self: unset;
}
.banner > p.link:after {
align-self: center;
}
.suselbeek.content-banner:not(.inset)::before {
width: 100%;
height: 8px;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg, rgba(120, 190, 32, 0.00) 51.37%, #78BE20 100%), url(../images/gradient.png) lightgray 50% / cover no-repeat;
position: absolute;
content: "";
z-index: 2;
}
.suselbeek.content-banner.overlay {
margin: 20px 20px 40px 20px;
padding: 0;
padding: 40px 20px;
background-color: #F1F3F2;
display: flex;
flex-direction: column;
gap: 0;
}
.suselbeek.content-banner.overlay .content:before {
display: none;
visibility: hidden;
}
.suselbeek.content-banner.overlay .content {
margin: 0;
padding: 0;
background-color: transparent;
}
.suselbeek.content-banner.overlay .content:after {
display: none;
visibility: hidden;
}
.suselbeek.content-banner.overlay .image {
margin: 40px 0 -80px 0;
}
.suselbeek.content-banner.overlay .image img {
width: 100%;
height: auto;
}
.suselbeek.image-text {
width: 100%;
padding: 40px 20px 0 20px;
display: flex;
flex-direction: column;
}
.suselbeek.image-text div:last-child {
/*gap: 24px;*/
}
.suselbeek.content-banner.inset {
margin-top: 40px;
padding: 0 20px;
}
.suselbeek.content-banner.inset .content-banner .content {
padding: 40px 20px;
}
.suselbeek.contact-banner .contact-banner .content {
padding: 40px 20px;
}
.suselbeek.breadcrumb {
padding: 104px 20px 40px 20px;
}
.suselbeek.footer .outer-wrapper .inner-wrapper {
padding: 50px 20px 20px 20px;
flex-wrap: wrap;
}
.suselbeek.footer .outer-wrapper .inner-wrapper > div:last-child {
flex-basis: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.suselbeek.footer .outer-wrapper .inner-wrapper > div:last-child .logos {
margin: 40px 0 0 0;
display: flex;
align-self: center;
}
.suselbeek.footer .outer-wrapper .inner-wrapper > div:last-child .logos:first-child {
margin-right: 20px;
}
/*
.suselbeek.footer .outer-wrapper .inner-wrapper > div:last-child .logos img {
width: auto;
height: unset;
}
*/
.suselbeek.footer .outer-wrapper .inner-wrapper > div ul.mega-menu {
display: block !important;
}
.suselbeek.footer .outer-wrapper .inner-wrapper > div ul.mega-menu li {
list-style: none;
}
.suselbeek.copyright {
padding: 14px 20px;
text-align: center;
}
.menu-title, .mega-menu-responsive {
display: none;
visibility: hidden;
}
.grid.columns-4-8 {
}
.grid.columns-4 {
grid-template-columns: repeat(2, 1fr);
}
.grid.columns-6 {
grid-template-columns: repeat(3, 1fr);
}
.product-detail .suselbeek.contact-banner .contact-banner {
display: flex;
flex-direction: column;
gap: 0;
}
.product-detail .suselbeek.contact-banner .contact-banner:before {
mask-size: cover;
}
.product-detail .suselbeek.contact-banner .contact-banner .content {
width: 100%;
}
.product-detail .suselbeek.contact-banner .contact-banner .content .buttons p.editor-button a:after {
background-color: #FFFFFF;
}
.product-detail .suselbeek.contact-banner .contact-banner .image {
width: 100%;
mask-image: unset;
position: relative;
z-index: 1;
}
}
@media (max-width: 1000px) {
.hamburger {
display: block;
}
}
.download { margin: 0; }
.fix-alignment { display: flex; flex-wrap: wrap; }
.file-size { margin-top: -2px; color: gray; }
.download-name { font-size: 16px; margin-top: 0; font-weight: 700; line-height: 22px; }
.download-name a { color: #1C4220; }
.page-title { margin-bottom: 15px; }
.download .row { margin-top: 15px; }
.downloads:first-child { margin-top: 52px; }
.downloads-alt { margin-top: 52px; }
@media (max-width: 992px) {
.fix-alignment {
display: block;
}
}
#CybotCookiebotDialog button {margin: 0 !important;}
#CybotCookiebotDialog button::after {display: none;}
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonsWrapper {gap: 0.5rem;}
.CookieDeclaration a {text-decoration: underline;}
.CookieDeclaration a:hover {text-decoration: none;}