@font-face { font-family: 'Avenir Heavy'; src: url(/common/font/avenir-heavy.ttf) format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Avenir Book'; src: url(/common/font/avenir-book.ttf) format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Mermaid'; src: url(/common/font/mermaid.ttf) format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Shopicons'; src: url(/css/fonts/Shopicons.eot?xrhsmw); src: url(/css/fonts/Shopicons.eot?xrhsmw#iefix) format('embedded-opentype'), url(/css/fonts/Shopicons.ttf?xrhsmw) format('truetype'), url(/css/fonts/Shopicons.woff?xrhsmw) format('woff'), url(/css/fonts/Shopicons.svg?xrhsmw#Shopicons) format('svg'); font-weight: normal; font-style: normal; } h1 { font-family: 'Avenir Book', sans-serif; font-size: 28px; line-height: 36px; font-weight: normal; margin-bottom: 18px; } h1 .title-mermaid { font-family: 'Mermaid', sans-serif!important; font-size: 30px; text-transform: lowercase; } h2 { font-family: 'Avenir Book', sans-serif; font-size: 24px; line-height: 30px; font-weight: normal; margin-bottom: 16px; } #body_home h2 { margin-top: 40px; } h2 .title-mermaid { font-family: 'Mermaid', sans-serif!important; font-size: 25px; text-transform: lowercase; } h3 { font-family: 'Avenir Heavy', sans-serif; font-size: 20px; line-height: 26px; margin-top: 40px; margin-bottom: 16px; } h4 { font-family: 'Avenir Heavy', sans-serif; font-size: 18px; line-height: 22px; margin-top: 40px; margin-bottom: 16px; } body, p { font-family: 'Avenir Book', sans-serif; font-size: 15px; color: #2B2B2B; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { line-height: 24px; margin-bottom: 16px; } p .title-mermaid { font-family: 'Mermaid', sans-serif!important; font-size: 20px; text-transform: lowercase; } h1.title-lg { font-family: 'Avenir Book', sans-serif; font-size: 38px; line-height: 46px; font-weight: normal; margin-bottom: 18px; } .title-lg-mermaid { font-family: 'Mermaid', sans-serif!important; font-size: 42px; line-height: 46px; text-transform: lowercase; } a { color: #8AAA91; text-decoration: underline; } #crumbs a { color: #AAAAAA; text-decoration: none; } .page-anchor { display: block; position: relative; top: 0; visibility: hidden; } @media only screen and (max-width: 767px) { #mid { margin-top: 70px; } .crumb-link::before { content: "\e408"; margin-right: 5px; display: inline-block; font-family: 'Shopicons'; vertical-align: middle; } .page-anchor { display: block; position: relative; top: -60px; visibility: hidden; } } :focus { outline: none; } ul.bulletpoints { list-style: disc inside; } .icon-search:after { content: "\e8b6"; } .shopicons-search::before { content: "\e8b6"; display: inline-block; vertical-align: middle; line-height: 26px; } .shopicons-close::before { content: "\e5cd"; display: inline-block; vertical-align: middle; } .shopicons-hamburger::before { content: "\e3c7"; display: inline-block; vertical-align: middle; } .contact-phone { display: inline-block; font-size: 22px; line-height: 36px; text-decoration: none; color: #2b2b2b; } button, .button { font-family: 'Avenir Heavy', sans-serif ; font-size: 12px; letter-spacing: 1.4px; line-height: 20px; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer; } .button.button-success { color: #fff; background-color: #2B2B2B; border-color: #2B2B2B; padding: 16px 24px; } .button.button-success:hover { color: #fff; background-color: #5E6262; border-color: #5E6262; } .button-white { color: #2B2B2B; background-color: #fff; border: 1px solid #2B2B2B; padding: 16px 24px; } .button-white:hover { color: #fff; background-color: #2B2B2B; border: 1px solid #2B2B2B; } .button-center { text-align: center; padding: 22px 15px; } @media only screen and (max-width: 480px) { .button-success, .button-white { width: 100%; } } #footer { margin-top: 61px; } #body_home #footer { margin-top: -25px; } #footer a { font-weight: normal; font-size: 14px; color: #2B2B2B; line-height: 28px; text-decoration: none; } #footer .footer-content span { font-weight: bold; font-size: 12px; letter-spacing: 1.4px; line-height: 24px; text-transform: uppercase; } .footer-usps { border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; display: flex; justify-content: center; align-items: center; padding: 30px; flex-wrap: wrap; } #footer .footer-usps span { padding-right: 24px; font-weight: bold; } #footer .footer-usps span a { font-size: 14px; font-weight: bold; } span#thuiswinkel img { padding-right: 11px; } #footer .footer-content { padding: 50px; } #footer .footer-content ul { margin-top: 12px; } #footer .footer-content li { line-height: 28px; } #footer .footer-content p { margin-top: 16px; } #footer .footer-content__phone { display: inline-block; font-size: 22px; line-height: 36px; } #footer .footer-disclaimer { text-align: center; padding: 24px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .footer-disclaimer__social span { font-weight: bold; margin-right: 16px; } .footer-disclaimer__social a { background-color: #2b2b2b; border-radius: 100%; display: inline-block; width: 32px; height: 32px; margin-right: 16px; } .footer-disclaimer__social i { color: #fff; padding: 9px 1px 8px 8px; } #disclaimer a { padding: 0 8px; } #disclaimer span.copyright { padding-left: 8px; } @media only screen and (max-width: 991px) { #footer { margin-bottom: 60px; } #footer .footer-usps { text-align: center; padding: 30px 16px; } #footer .footer-usps span { padding-right: 15px; } #footer #thuiswinkel img { padding-right: 0; } #footer #thuiswinkel strong { display: none; } #footer .footer-content { padding: 0; } #footer .accordion-button { padding: 16px 9px; } #footer .footer-content__service { padding: 16px 24px; } #disclaimer { padding-top: 22px; } #footer .footer-disclaimer { padding: 30px 16px; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; flex-direction: column; } } #footer .accordion { margin-bottom: 0; } @media only screen and (min-width: 992px) { #footer .accordion { border-bottom: none; } #footer .accordion > a { padding: 0; } #footer .accordion .accordion-body { display: block; padding: 0; } #footer .accordion .accordion-body ul li a { padding: 0; } } @media only screen and (max-width: 991px) { #footer .accordion > .active { color: #414141 !important; } #footer .accordion .show { display: block !important; } #footer .accordion > a > i { float: right; font-size: 18px; } #footer .accordion .accordion-body { display: none; padding: 5px; } #footer .accordion .accordion-body ul { margin-bottom: 0; margin-top: 0; } } .flex-container { display: flex; align-items: stretch; margin-right: auto; margin-left: auto; clear: both; max-width: 1200px; } .flex-wrapper { display: flex; justify-content: center; margin: 0 -15px; } .item-box { cursor: pointer; margin: 25px 15px; flex-direction: column; display: flex; } .item-box__col-2 { width: 50%; } .item-box__col-3 { width: 33.33%; } .item-box__col-4 { width: 24.97%; } .item-box__footer { text-align: center; padding: 24px 0; font-family: 'Avenir Heavy', sans-serif; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; background-color: rgba(43, 43, 43, 0.03); } #info-block .item-box__content { text-align: center; background-color: rgba(165, 197, 181, 0.6); flex: 1 0 auto; display: flex; justify-content: center; flex-direction: column; } #info-block .item-box__content img { height: 50px; padding-right: 12px; } .item-box:hover img, #info-block.item-box:hover { opacity: 1; -webkit-animation: flash 1.7s; animation: flash 1.7s; } @-webkit-keyframes flash { 0% { opacity: .7; } 100% { opacity: 1; } } @keyframes flash { 0% { opacity: .7; } 100% { opacity: 1; } } #info-block .item-box__content h1 { margin-top: 0; } #info-block .item-box__footer { background-color: rgba(165, 197, 181, 0.2); } @media only screen and (min-width: 992px) { #info-block p { font-size: 20px; } } @media only screen and (max-width: 767px) { .flex-wrapper { flex-direction: column; } .item-box { height: 88px; display: flex; margin: 8px 15px; width: auto; flex-direction: row; position: relative; overflow: hidden; } .item-box__content { height: 116px; width: 116px; position: absolute; top: -14%; overflow: hidden; } #info-block{ flex-direction: row; } .item-box img { width: auto; height: 100px; max-width: none; max-height: none; } #info-block p, #info-block strong { display: none; } #info-block .item-box__content img { height: 30px; width: 30px; margin-right: 12px; } #info-block h1 { font-size: 34px; margin-bottom: 0; } .item-box__footer { text-align: left; padding: 32px 19px; width: 100%; margin-left: 116px; } } .text-columns .row { display: flex; flex-wrap: wrap; margin: 0 -10px; } .text-columns .column { flex: 33.33%; max-width: 33.33%; padding: 0 10px; } .text-columns .column li { margin-top: 20px; vertical-align: middle; padding: 10px; } .text-columns .column p:last-child { margin-bottom: 0; } @media (max-width: 800px) { .text-columns .column { flex: 50%; max-width: 50%; } } @media (max-width: 600px) { .text-columns .column { flex: 100%; max-width: 100%; } } .main-items h1{ margin-top: 10px; } .main-items h1, .main-items h2{ text-align: center; margin-bottom: 25px; } #body_home .flex-wrapper { margin: 0; } @media only screen and (max-width: 767px) { .main-items { margin-top: 40px; } } #body_home .navbar { margin-bottom: 0; } .homepage-banner__left { background-color: #DBE8E1; } .homepage-banner__left-content a { color: #2B2B2B; font-weight: bold; } .homepage-banner__right { background-color: #fff; } @media only screen and (min-width: 1200px) { .homepage-banner__left-content { padding-top: 41px; max-width: 70%; } .homepage-banner__right img { margin-left: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .homepage-banner__left { width: 40%!important; } .homepage-banner__left-content { padding-top: 20px; max-width: 70%; } } @media only screen and (min-width: 992px) { .homepage-banner { height: 460px; position: relative; background-color: #DBE8E1; } .homepage-banner__left { display: flex; -webkit-clip-path: polygon(0 0, 36% 0%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 36% 0%, 100% 100%, 0% 100%); height: 460px; width: 53%; position: absolute; z-index: 2; } .homepage-banner__left-content { padding-top: 20px; padding-left: 16px; max-width: 49%; } .homepage-banner__left-content p { font-size: 16px; } .homepage-banner__left-content .button { margin-top: 16px; width: fit-content; } .homepage-banner__right { position: absolute; z-index: 1; height: 100%; max-height: 460px; width: auto; padding-left: 50px; top: 0; right: 0; } } @media only screen and (max-width: 991px) { .homepage-banner__wrapper { display: flex; flex-direction: column-reverse; } .homepage-banner__left { display: flex; padding: 16px 16px 48px 16px; } h1.title-lg { font-size: 28px; line-height: 40px; } span.title-lg-mermaid { font-size: 37px; } } .usp-box { padding: 42px 15px; } .usp-box li::before { content: "\e5ca"; font-family: 'Shopicons'; display: inline-block; vertical-align: middle; padding-right: 12px; } .usp-box__left { width: 100%; } .usp-box__right { width: 100%; padding-top: 25px; padding-left: 40px; background-color: rgba(165, 197, 181, 0.4); } @media only screen and (max-width: 992px) { .usp-box__right { padding: 0 16px 40px 16px; } .usp-box h1.title-lg { font-size: 30px; } .flex-container { flex-direction: column; } } @media only screen and (max-width: 767px) { .usp-box { padding: 42px 0; } .usp-box__left img { margin: 0 auto; } } .feedback-box { max-height: 381px; background-color: rgba(165, 197, 181, 0.4); margin-top: 85px; } .feedback-box__rating { display: flex; justify-content: center; padding-top: 40px; padding-bottom: 12px; } .feedback-box__rating-stars { padding: 0 24px; align-self: center; } .feedback-box__rating-logo img { height: 70px; } .feedback-box__rating-stars h3 { float: left; margin: 0; padding-right: 12px; } .feedback-box__rating-stars li { display: inline-block; } .feedback-box__rating-stars p, .feedback-box__rating-stars ul { margin-bottom: 0; } .feedback-box__rating-stars i.shopicons.shopicons-star { margin-right: -9px; } .feedback-box__rating-stars i.shopicons.shopicons-star::before { color: #e2cc00; font-size: 21px; } #swiper-feedback .swiper-button-next.swiper-button-disabled, #swiper-feedback .swiper-button-prev.swiper-button-disabled { opacity: 1; } @media only screen and (max-width: 767px) { .feedback-box { max-height: 100%; margin-top: 32px; margin-bottom: 1px; } #swiper-feedback.swiper-container { max-height: 100%!important; margin-bottom: 32px; } .feedback-box .swiper-button-prev, .swiper-container-rtl .swiper-button-prev { top: auto; bottom: 0; left: 34%!important; } .swiper-container-rtl .swiper-button-next, .feedback-box .swiper-button-next { top: auto; bottom: 0; right: 37%!important; } .swiper-buttons__wrapper { margin-top: 30px; } } #swiper-feedback.swiper-container { max-height: 260px; margin-bottom: 52px; } #customer-reviews .swiper-slide, #customer-reviews .swiper-slide { background-color: transparent; } .swiper-slide_text { width: 630px; padding: 30px; } .swiper-slide_quote-open { padding-right: 30px; } .swiper-slide_quote-close { padding-left: 30px; } .feedback-box .swiper-button-prev, .swiper-container-rtl .swiper-button-next, .feedback-box .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background: none; right: 25px; } #swiper-feedback .shopicons-navigate-before:before, #swiper-feedback .shopicons-navigate-next:before { font-size: 32px; display: inline-block; vertical-align: middle; background: #fff none; border-radius: 50%; opacity: 0.6; padding: 6px; } .service-box { text-align: center; } .service-box__portraits { padding: 0 15px; } .service-box__col { padding: 0 15px; } .service-box__portraits .swiper-slide { display: grid; margin-top: 17px; } .service-box__portraits img { padding: 14px 8px; } .service-box__row { text-align: left; display: flex; justify-content: center; margin-top: 40px; margin-bottom: 0; } .service-box__col-title { display: flex; align-items: center; padding: 20px 0; } .service-box__col-title img { height: 49px; width: 49px; } #body_home .service-box__col-title h2 { margin: 0; padding-left: 16px; } .jubileum-img img { margin: 0 auto; } #team-portraits.swiper-wrapper .swiper-slide { width: 161px!important; height: auto; } @media only screen and (max-width: 991px) { .service-box__row { flex-direction: column; } } @media only screen and (max-width: 480px) { .service-box h1 { font-size: 22px; } h1 .title-mermaid { font-size: 25px; } .jubileum-img { margin-top: 74px; } } .text-box { flex-direction: row; display: flex; } .text-box__content { padding: 24px; margin: 15px; } .text-box.text-box__peach { margin: 0 -15px; } .text-box.text-box__peach .text-box__content { background-color: #fcf1ee; } .text-box__green { display: block; background-color: rgb(237, 243, 240); padding: 15px; } .text-box__green p { margin-bottom: 0; } @media only screen and (min-width: 768px) { .col-2 { width: 50%; } .col-3 { width: 33.33%; } .col-4 { width: 24.97%; } } @media only screen and (max-width: 767px) { .text-box { flex-direction: column; } } .sidebar_widget.widget_menu { padding: 12px; background-color: #f8f8f8; margin-bottom: 12px; } .sidebar_widget.widget_menu h3 { text-transform: uppercase; line-height: 24px; font-size: 13px; letter-spacing: 1px; margin-top: 0; margin-bottom: 0; } #sidebar .list-collapsible>li>a { text-transform: none; text-decoration: none; font-weight: normal; padding-left: 12px; font-size: 15px; line-height: 28px; letter-spacing: normal; } #sidebar .sidebar_widget.widget_menu h3::after { font-family: Shopicons; content: '\e5c7'; float: right; transition: all 0.4s ease; cursor: pointer; } #sidebar .sidebar_widget.widget_menu h3.is_collapsed::after { transform: rotateZ(-180deg); } #filter_header h2 { font-size: 20px; font-weight: 800; line-height: 26px; } #filter_menu ul li input[type=checkbox]:checked+label .custom_checkbox { background-color: #5E6262; } #filter_menu ul li input[type=checkbox]:checked+label .custom_checkbox:after, #filter_menu ul li label:hover .custom_checkbox:after { font-family: Shopicons; content: "\e5ca"; color: #fff; font-size: 12px; line-height: .5em; vertical-align: text-top; padding-left: 1px; } #filter_pills li { border: 1px solid #dbe8e1; border-radius: 0; color: #5E6262; background-color: #dbe8e1; display: inline-block; } .icon-times:after { content: "\e5cd"; font-family: Shopicons; } #sidebar .tag-group-ul.collapsed h3::after { transform: rotateZ(-180deg); } #sidebar .tag-group-ul h3::after { font-family: Shopicons; content: '\e5c7'; font-size: 13px; float: right; transition: all 0.4s ease; cursor: pointer; } .category-sub-menu a { font-weight: 800; margin-left: 16px; padding: 0 3px; background: linear-gradient( to bottom, #8AAA91 0%, #8AAA91 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 4px 1px; text-decoration: none; transition: background-size 1s; } .category-sub-menu a:hover { background-size: 4px 50px; color: #fff; } .list-vertical li a { display: inline-block; vertical-align: middle; width: 100%; padding: 5px 0; color: #2b2b2b; text-decoration: none; text-transform: uppercase; line-height: 24px; font-size: 13px; letter-spacing: 1px; } .list-vertical li ul { margin: 0; padding-left: 12px; border: none; } .list-vertical li ul li a { text-transform: none; font-weight: normal; letter-spacing: normal; } @media only screen and (min-width: 992px) { #body_design .design_page__bottom_wrapper { background-color: #edf3f0; padding: 60px 0; } } @media only screen and (max-width: 991px) { .design_page__bottom_wrapper.margin-t-30 { margin-top: 0 !important; } } #body_design #footer { margin-top: 0; } #body_design .open_calculator { background-color: #2B2B2B; border: 1px solid #2B2B2B; } #body_design .open_calculator a { color: #fff; text-decoration: none; } #body_design .icon-calculator:after { content: "\e905"; color: #fff; } #body_design .desUsp, #body_product .product-usp { background-color: #fff; border: none; padding: 0; margin: 30px 0px; } #body_design .desUsp li::before, #body_product .product-usp li::before { content: "\e5ca"; font-family: Shopicons; padding-right: 8px; } #body_design .design_button_preview #choose_preview { width: 100%; margin-right: 8px; } #body_design .design_button_preview .button-white { width: auto; margin-left: 8px; display: none; } #body_design .add_to_collection { border: none; padding: 0; } #body_design .add_to_collection { text-decoration: none; color: #5E6262; display: none; } #body_design .icon-favorite-heart:after { content: "\e87e"; color: #5E6262; font-family: Shopicons; display: inline-block; vertical-align: middle; margin-left: -7px; } #body_design .proof_price_usp, #body_product .proof_price_usp { display: none; } #card_previews_horizontal-rail { background-color: #fff; } @media screen and (min-width: 768px) { #body_design #card-info-right, #body_product #env-select-left, #body_product #product-info-right { border-top: none; } } @media only screen and (max-width: 767px) { #body_design .crumb-mobile, #body_product .crumb-mobile { border-bottom: none; top: 0; } #body_design .design_button_preview #choose_preview, #body_design .design_button_preview .button-white { width: 100%; margin-left: 0; } #body_design .design_page__bottom_wrapper { background-color: #fff; } } #card_tag_list { display: none; } #product_supplier { display: none; } #prijs_calculator { max-width: 350px; background-color: #faf9f7; } #prijs_calculator h4 { margin-top: 5px; } #prijs_calculator table { margin: 0; padding: 0; background-color: transparent; } #prijs_calculator select { border-radius: 4px; width: 95%; outline: none; height: 25px; margin-bottom: 10px; border: solid 1px #ccc; padding: 0px 0px 0px 5px; } #prijs_calculator select:focus { background: #f3f3f3; } #prijs_calculator input[type=text] { border-radius: 4px; width: 95% !important; outline: none; height: 25px; margin-bottom: 10px; border: solid 1px #ccc; padding: 0px 0px 0px 5px; box-shadow: inset 0px 0px 0px 0px; } #prijs_calculator input[type=text]:focus { background: #f3f3f3; } #prijs_calculator input.output:focus { background: transparent; } #prijs_calculator input.output { border: none; background: transparent; font-weight: bold; color: inherit; font-size: inherit; padding: 6px; display: inline; } #calculator .ttl { margin: 0; padding: 16px 0 4px 0; } #calculator .amount .ttl { padding: 16px 0 10px 0; } #prijs_calculator .tbl-size { width: 100%; } #prijs_calculator .tbl-size td { width: 50%; } #prijs_calculator .fader { max-width: 160px; } #prijs_calculator table.amount { width: 100%; } #prijs_calculator .fader { max-width: 160px; } #prijs_calculator table td { padding-left: 8px; padding-top: 8px; border: 0; } #prijs_calculator p.ttl { margin: 0 0 4px; } #result td { width: auto; vertical-align: baseline; padding: 8px 0; } .result-cal { margin-top: 18px; background: #dfeaef; width: 418px; padding: 9px 0 0 8px; } #prijs_calculator .result-cal { width: 100%; } #amount-envelop, #amount-card { border: none; box-shadow: none; background: none; width: auto !important; padding: 0; height: auto; } #result-input { font-size: 18px; font-weight: bold; display: inline-block; width: auto; } .inclusief { color: #616161; font-size: 12px; display: block; line-height: 1.3; margin-top: 0; } .alert { margin-bottom: 20px; font-size: 11px; padding: 0 0 0 10px !important; color: #999; font-style: italic; width: 393px; } #calculator #message { display: none; width: 403px; text-align: center; color: #F00; font-size: 18px; font-family: Arial; } .page-cal { width: 705px !important; height: 115px !important; } .page-cal a { top: 62px !important; font-size: 20px !important; height: 34px !important; line-height: 34px !important; } #calculator #sliderb, #calculator #slider { background: #5e989a; border-radius: 5px; box-sizing: border-box; margin-top: 10px; position: relative; height: 3px; } #calculator .ui-slider-horizontal .ui-slider-handle { display: block; height: 16px; position: absolute; z-index: 2; width: 16px; background: #6ac4c2 !important; border-radius: 50%; box-shadow: 0 0 0 1px #737373; top: -0.4em; } .wrap-sel { height: 31px; } #calculator select { height: 31px !important; line-height: 31px; position: relative; width: 190px !important; z-index: 10; opacity: 1 !important; background: #e9ecf3; border: none; border-bottom: solid 2px #d7dae1; color: #000 !important; font-size: 14px; outline: none; } #calculator select:hover { border-bottom: solid 2px #5f969d; opacity: 1 !important; } #calculator select.ui-state-active { border-bottom: solid 2px #5f969d; } #calculator span.select { display: none; } #total { font-size: 12pt; } #total, #price, #priceb, #pricec, #priced, #pricee, #pricef, #pricez { text-align: right; width: 60px; } #quoteme input { background: transparent; color: #ddd; font-family: Georgia; border: 0px solid #fff; margin-bottom: 20px; } #quoteme label { float: left; padding-top: 10px; display: block; color: #fff; font-family: Georgia; width: 340px; } #slider, #sliderb, #sliderc, #sliderd, #slidere { width: 209px; } .price-table-content { margin: 0; border-left: 1px solid #fff; } .price-table-content li.prijzen-table-title { color: #fff; background-color: #A5C5B5; } .price-table-col { padding: 0; } .price-table-content ul { margin-bottom: 0; } .price-table-content li { background-color: #f8f8f8; padding: 16px; border: 1px solid #fff; border-width: 0px 1px 1px 0px; } .pricecalculator-box { margin: 0 -15px; flex-direction: row; display: flex; align-items: flex-end; } .pricecalculator-box__left, .pricecalculator-box__right { margin: 15px; } .pricecalculator-box__right img { display: block; height: 100%; max-height: 100%; } @media only screen and (max-width: 767px) { .pricecalculator-box { flex-direction: column; margin: 0; } #prijs_calculator, .pricecalculator-box__left, .pricecalculator-box__right { margin: 15px auto; } } .text-box__green { display: block; background-color: rgb(237, 243, 240); padding: 15px; } .text-box__green p { margin-bottom: 0; } .usp-check li { font-size: 14px; } .usp-check li::before { content: "\e5ca"; font-family: Shopicons; padding-right: 8px; font-size: 14px; } .flex-row { display: flex; flex-direction: row; align-items: center; } .flex-column { padding: 15px; } .flex-column.col-2 { width: 50%; } .flex-column.col-3 { width: 33.33%; } .flex-column.col-4 { width: 24.97%; } .flex-row__contact { background-color: #dfeaef; padding-left: 15px; } .flex-row__peach .flex-column { background-color: #fcf1ee; margin: 0 15px; } @media only screen and (max-width: 767px) { .flex-row__contact { flex-direction: column; align-items: normal; } .mob-column { flex-direction: column; } } .faq-box .accordion-faq { background-color: #dbe8e1; color: #5E6262; font-size: 16px; cursor: pointer; padding: 16px; width: 100%; text-align: left; border: none; outline: none; letter-spacing: 0; transition: 0.4s; text-transform: none; } .accordion-faq i.shopicons { float: right; } .faq-box .active, .faq-box .accordion-faq:hover { background-color: #edf3f0; } .faq-box .panel { padding: 16px; background-color: #edf3f0; display: none; overflow: hidden; } .sub-item-box__content:hover img, .main-item-box__content:hover img, #info-block .sub-item-box__content:hover { opacity: 1; -webkit-animation: flash 2.5s; animation: flash 2.5s; } @-webkit-keyframes flash { 0% { opacity: .7; } 100% { opacity: 1; } } @keyframes flash { 0% { opacity: .7; } 100% { opacity: 1; } } .promo-banner { display: flex; flex-direction: row; } #promo-text { position: relative; height: 290px; width: 100%; } .promo-banner-content__wrapper { height: 290px; padding: 17px 0 32px 32px; background-color: #F1B9A9; } .promo-banner-content img { display: block; } @media only screen and (min-width: 768px) { #promo-text { position: relative; height: 290px; width: 100%; } #promo-text:after { content: ''; position: absolute; top: 0; bottom: 0; width: 346px; left: 173px; height: 290px; background: #F1B9A9; -webkit-transform: skew(50deg); -moz-transform: skew(50deg); -o-transform: skew(50deg); } .promo-banner-content__wrapper { position: absolute; z-index: 2; width: 346px; } } @media only screen and (max-width: 767px) { .promo-banner { flex-direction: column; } #promo-text { height: auto; } .promo-banner-content__wrapper { height: auto; padding: 32px; } .promo-banner-content img { display: block; max-width: 100%; height: auto; max-height: 100%; } } .navbar a { text-decoration: none; } .navbar .topbar a.js-dropdown-hover.account::before, .inloggen::before { font-family: shopicons; content: "\e7fd"; font-size: 18px; color: #5E6262; opacity: 0.6; padding-right: 5px; margin-bottom: 3px; display: inline-block; vertical-align: middle; } .navbar .topbar a.basket::before { font-family: shopicons; content: "\e8cb"; font-size: 18px; color: #5E6262; opacity: 0.6; padding-right: 5px; margin-bottom: 3px; display: inline-block; vertical-align: middle; } .navbar .topbar #navbar-basket { color: #fff; background-color: #7D8080; font-family: 'Avenir Heavy', sans-serif; font-size: 13px; border-radius: 11px; width: 22px; height: 22px; display: inline-block; line-height: 1.8; text-align: center; margin-left: 15px; } .navbar .topbar .topbar-menu-left ul { margin-bottom: 0; } .navbar .topbar .topbar-menu-left a { font-size: 13px; color: #3a3a3a; display: list-item; list-style: disc inside; } .navbar .topbar .topbar-menu-right > ul > li.dropdown > ul { min-width: max-content; right: auto; left: 0; } .navbar .topbar .topbar-menu-right > ul > li.dropdown .dropdown-content { box-shadow: 2px 2px 3px #f2f2f2; } .navbar .topbar .topbar-menu-right > ul > li.dropdown > ul > li:hover, .navbar .topbar .topbar-menu-right > ul > li.dropdown.active > ul > li:hover a { color: #3a3a3a; background-color: rgba(43, 43, 43, 0.03); } .navbar .topbar .topbar-menu-right>ul>li a { padding: 6px 11px; } .navbar .topbar .topbar-menu-right > ul > li.account.dropdown.active > ul > li:last-of-type { border-top: none; } .navbar .menubar .menubar-items > li > a, .menubar-dropdown-content.js-dropdown-content span { font-family: 'Avenir Heavy', sans-serif; font-size: 12px; color: #2B2B2B; text-transform: uppercase; letter-spacing: 1.4px; line-height: 24px; } .navbar .dropdown > a:after { content: "\e5cf"; font-family: shopicons; margin-left: 5px; display: inline-block; vertical-align: middle; } .navbar .dropdown.active > a:after, .navbar .dropdown.active > a:after { content: "\e5ce"; } .menubar-mobile { display: none; } @media only screen and (min-width: 1200px){ .navbar .topbar .topbar-menu-left li { padding: 0 5px; margin: 8px 0; } .navbar .topbar .topbar-menu-left a { margin: 0; } .navbar .topbar .topbar-menu-right { position: relative; right: 0; } .navbar .logobar { max-width: 1200px; margin: 0 auto; } .navbar .menubar ul.menubar-items { width: 1200px; margin: 0 auto; } } @media only screen and (min-width: 992px) and (max-width: 1024px) { .navbar .menubar .menubar-items > li > a, .menubar-dropdown-content.js-dropdown-content span { padding: 6px 10px 14px 10px; } } @media only screen and (min-width: 992px) { .navbar { background-color: #fff; height: 159px; border-bottom: 1px solid #E6E6E6; } .navbar .topbar { height: 40px; background-color: #f2f2f2; } .navbar .topbar .topbar-menu-right { right: 15px; } #navbar-basket .basket_count-text { display: none; } .navbar a.logo { display: flex; flex-flow: row wrap; height: 72px; width: 100%; justify-content: center; align-items: center; } .navbar a.logo-mob { display: none; } .navbar a.logo img { width: 142px; margin: 0 auto; } .navbar .menubar { position: relative; } .navbar .mob-menu-top { display: none; } .navbar .menubar-items { display: flex; flex-flow: row wrap; height: 47px; justify-content: center; align-items: center; } .navbar .menubar .menubar-items > li > a { flex-grow: 1; text-align: center; display: inline-block; } .navbar .menubar .menubar-items > li > a:hover, .navbar .menubar .menubar-items > li > a:active, li.menubar-dropdown.js-dropdown.active { box-shadow: inset 0 -4px 0 0 #A5C5B5; } .navbar .mob-menu-dropdown { display: none; } .dropdown-row > .col-lg-2 { width: 20%; float: left; } .dropdown-row > .col-lg-3 { width: 30%; float: left; } .dropdown-row > .col-lg-4 { width: 40%; float: left; } .logo-mob__menu.js-open-menubar-dropdown { display: none; } } .menubar-dropdown-content.js-dropdown-content { position: absolute; z-index: 2; width: 100%; height: 400px; top: 45px; left: 0; text-align: left; background-color: #fff; border-bottom: 1px solid #ddd; } .dropdown-container { position: relative; max-width: 1200px; height: 100%; background-color: #fff; padding: 30px 40px; margin: 0 auto; } .dropdown-row { display: block; position: relative; } .menubar-dropdown-content.js-dropdown-content a { color: #2B2B2B; } .menubar-dropdown-content.js-dropdown-content a:hover { text-decoration: underline; } .menubar-dropdown-content.js-dropdown-content span { padding: 0; margin-bottom: 12px; display: inline-block; } .menubar-dropdown-content.js-dropdown-content li { line-height: 28px; } .dropdown-row__visual { position: relative; padding: 0 30px; } .dropdown-row__visual img:hover { opacity: 1; -webkit-animation: flash 1.7s; animation: flash 1.7s; } @media only screen and (min-width: 992px) and (max-width: 1170px) { .dropdown-row__visual { padding: 0; } } .search-input-field { display: inline-block; width: 90%; } button.search-button-field { background: transparent; border: none; font-size: 18px; } .search-input-field input[type="text"] { background: transparent; border: none; width: 100%; text-align: center; } button.search-button-close { background-color: transparent; border: none; font-size: 15px; color: #5E6262; opacity: 0.6; float: right; cursor: pointer; } .swiper-wrapper { align-items: center; } @media only screen and (min-width: 992px) { .navbar .menubar .menubar-items > li > a { padding: 6px 16px 14px 16px; } .swiper-slide-rail { position: static!important; } .mob-menu-dropdown { display: none; } .navbar-search-field.js-navbar-search-field { display: none; background: #F2F2F2; border-radius: 25px; position: absolute; width: calc(100% - 30px); max-width: 1170px; top: 0; left: 0; right: 0; margin: 0 auto; padding: 6px; } .open-navbar-search { padding: 6px 0 14px 20px; cursor: pointer; color: #3A3A3A; font-size: 18px; } } @media only screen and (max-width: 991px) { .navbar .topbar { height: 60px; } .open-navbar-search.js-open-navbar-search { display: none; } .navbar-search-field.js-navbar-search-field { position: absolute; top: 0; background: #f4f4f4; border-radius: 25px; left: 0; right: 0; margin: 8px; } .search-input-field { width: 84%; height: 40px; padding: 8px; background-color: #f4f4f4; border: 1px solid #f4f4f4; border-top-left-radius: 25px; border-bottom-left-radius: 25px; } button.search-button-field { color: #fff; background: #A5C5B5; float: right; width: 15%; height: 40px; border: 1px solid #A5C5B5; border-top-right-radius: 25px; border-bottom-right-radius: 25px; } button.search-button-field .shopicons-search::before { content: "\e8b6"; display: inline-block; vertical-align: middle; line-height: 28px; font-size: 28px; } button.search-button-close { display: none; } } @media only screen and (max-width: 991px) { .navbar { height: auto; } .navbar .topbar.topbar-border { border-bottom: 1px solid #E6E6E6; border-bottom-color: #E6E6E6; } .navbar .topbar .topbar-menu-right { display: inline-block; position: absolute; right: 0; top:0; z-index: 2; height: 60px; } .navbar.navbar-collapsed { height: 60px; } .mob-menu-top__hamburger { position: absolute; left: 0; font-size: 36px; } .mob-menu-top__hamburger .shopicons-hamburger::before { padding: 12px; } .mob-menu-top { position: absolute; display: flex; top: 0; width: 100%; } .mob-menu-top__logo { margin: 0 auto; } .mob-menu-top__logo img { padding: 10px 15px; height: 60px; } .navbar .topbar .topbar-menu-right>ul>li a { padding: 6px 6px 6px 0; } .navbar .topbar a.js-dropdown-hover.account::before, .inloggen::before { font-size: 32px; color: #2B2B2B; opacity: 1; padding-right: 0; margin-bottom: 0; margin-top: 7px; } .navbar .topbar a.basket::before { font-size: 27px; color: #2B2B2B; opacity: 1; margin-bottom: 0; padding-right: 22px; padding-top: 10px; } .navbar .mob-hide, .navbar .dropdown > a:after { display: none!important; } .topbar #navbar-logout { display: inline-block!important; } .navbar .topbar .topbar-menu-right > ul > li.dropdown > ul { min-width: max-content; right: 0; left: auto; } .navbar .topbar #navbar-basket { right: 10px; position: absolute; color: #2b2b2b; background-color: #A5C5B5; padding: 1px 6px; border-radius: 50%; font-size: 11px; height: 20px; line-height: 1.8; text-align: center; top: 12px; } .menubar { display: none; position: fixed; height: calc(100% - 100px); width: 100%; overflow-y: scroll; background-color: #fff; } .menubar-items { border-top: 1px solid #E6E6E6; margin-top: 60px; } .menubar-items li { border-bottom: 1px solid #E6E6E6; } .mob-menu-dropdown a { width: 100%; display: block; padding: 15px 10px; } .navbar .menubar .menubar-items > li > a:after { font-family: 'Shopicons'; content: "\e409"; font-size: 15px; display: inline-block; vertical-align: middle; float: right; } } @media only screen and (min-width: 769px) { .mob-menu-bottom { display: none; } } @media only screen and (max-width: 768px) { .mob-menu-bottom { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 60px; justify-content: center; align-items: center; background-color: #fff; border-top: 1px solid #E6E6E6; } .mob-menu-item { text-align: center; font-size: 9px; font-weight: 800; text-transform: uppercase; } .mob-menu-item a { color: #2b2b2b; display: block; height: 100%; } .mob-menu-item span { display: block; } .item-col-2 { width: 50%; } .item-col-3 { width: 33.33%; } .item-col-4 { width: 24.97%; } } #body_contact-support .icon { font-family: kcicons; } #body_contact-support .icon-calculator:after { content: "\e006"; } .thumbs-card-items { margin-top: 40px; } .card-item-wrapper { margin-bottom: 30px; } .card-item { background-color: #fbf9fa; text-align: center; cursor: pointer; padding: 8px; min-height: 270px; } .card-item:hover { box-shadow: 1px 3px 2px #ddd; } .card-item-title { color: #666; font-size: 20px; } .card-item-image { padding: 13px 0; height: 175px; display: inline-flex; } .card-item-size li { font-size: 13px; } .card-item-size span { font-weight: bold; color: #00c8b4; } @media only screen and (min-width: 768px) { .card-item-size { height: 57px; } } .designlabel { color: #000; background-color: rgba(165, 197, 181, 0.2); font-size: 12px; padding: 0 10px; margin: 0 auto; transform: translate(-50%, -50%); border-radius: 2px; z-index: 1; text-transform: uppercase; position: absolute; bottom: 15px; left: 45px; } @media only screen and (max-width: 992px) { .designlabel { bottom: -3px !important; } } .content-video iframe { max-width: 560px; } .abc-template .row { border-bottom: 1px solid #8AAA91; padding: 10px 0; } .text-columns.abc-template .column li { padding: 0; } .abc-template .abc-title { font-family: 'Avenir Book', sans-serif; font-size: 28px; line-height: 36px; font-weight: normal; margin-bottom: 18px; margin-top: 15px; } #body_styleguide .faq-box { margin-top: 20px; } .faq-box pre { background-color: transparent; border: none; } @media only screen and (max-width: 480px) { #body_design .mob-menu-bottom, #body_design .zopim, #body_design .jx_ui_Widget, #body_product .mob-menu-bottom, #body_product .zopim, #body_product .jx_ui_Widget { display: none; } } .text-column-bg-peach .column li { background-color: #fcf1ee; } .text-column-bg-mint .column li { background-color: #edf3f0; } .content-block { padding: 15px; } .styleguide-colours span { width: 150px; padding: 12px; display: inline-block; text-align: center; } .styleguide-colours__1 { background-color: #B4CCBC; color: #000; } .styleguide-colours__2 { background-color: #DBE8E1; color: #000; } .styleguide-colours__3 { background-color: #F0F5F2; color: #000; } .styleguide-colours__4 { background-color: #E2CC00; color: #000; } .styleguide-colours__6 { background-color: #F9F5CC; color: #000; } .styleguide-colours__7 { background-color: #F1B9A9; color: #000; } .styleguide-colours__8 { background-color: #F7D5CB; color: #000; } .styleguide-colours__9 { background-color: #FCF1EE; color: #000; } .styleguide-colours__10 { background-color: #E73D51; color: #000; } .styleguide-colours__11 { background-color: #B0CAD7; color: #000; } .styleguide-colours__12 { background-color: #B78D21; color: #000; } .styleguide-colours__13 { background-color: #5E6262; color: #FFF; } .styleguide-colours__14 { background-color: #2B2B2B; color: #fff; } .bg-mint__dark {background-color: #A5C5B5;} .bg-mint {background-color: #DBE8E1;} .bg-mint__light {background-color: #F0F5F2;} .bg-gold {background-color: #E2CC00;} .bg-gold__light {background-color: #F9F5CC;} .bg-peach__dark {background-color: #F1B9A9;} .bg-peach {background-color: #F7D5CB;} .bg-peach__light {background-color: #FCF1EE;} .bg-pink {background-color: #E73D51;} .bg-blue {background-color: #B0CAD7;} .bg-gold__dark {background-color: #B78D21;} .thumbnail-product .thumbnail-product-label a.thumbnail-title{ margin-top: -79px; } @media only screen and (max-width: 992px) { #product_previews .thumbnail-product .thumbnail-product-label { display: block; } } .swiper-button-next:after, .swiper-button-prev:after { display: none; } @media only screen and (min-width: 768px) { #body_home .shopicons-navigate-before { margin-left: 30px; } } .wenskaart #env-select-button { display: none !important; } .homepage-banner:after { content: ''; background-image: url(/media/HB1fotobanner.jpg); background-repeat: no-repeat; position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 160px; } .homepage-banner { position: relative; } @media only screen and (max-width: 991px) { .homepage-banner:after { background-size: 100% 100%; } .homepage-banner__left { display: flex; padding: 16px 16px 48px 16px; position: relative; z-index: 1; margin-top: 160px; } } @media only screen and (min-width: 992px) { .homepage-banner:after { background-position: right; height: auto; background-size: 60% 100%; margin-left: 9rem; } }