@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700); @import url(https://fonts.googleapis.com/css?family=Dancing+Script); @font-face { font-family: 'handsome_prothin'; src: url(/css/fonts/handsomepro-thin-webfont.woff2) format("woff2"), url(./fonts/handsomepro-thin-webfont.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: 'handsome_proregular'; src: url(/css/fonts/handsomepro-regular-webfont.woff2) format("woff2"), url(./fonts/handsomepro-regular-webfont.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: 'handsome_probold'; src: url(/css/fonts/handsomepro-bold-webfont.woff2) format("woff2"), url(./fonts/handsomepro-bold-webfont.woff) format("woff"); font-weight: normal; font-style: normal; } * { margin: 0px; padding: 0px; box-sizing: border-box; } html, body, input, select, textarea { font-family: 'Roboto', sans-serif; color: #333; font-size: 18px; line-height: 1.5em; font-weight: 200; } body { background: #fff; } img { border: 0px; display: block; } :focus { outline: none; } fieldset { border: none; } a, i, img, div { vertical-align: baseline; } a { color: #F05B61; text-decoration: none; } .icon { margin-top: 0px; } h1, h2 { font-family: 'handsome_proregular'; color: #F05B61; font-weight: 400; } h1 { font-size: 3em; line-height: 1em; } h2 { font-size: 2em; line-height: 1em; } h3 { font-size: 1.2em; line-height: 1.2em; color: #F05B61; } @media (min-width: 992px) { #pagecontent.pagecontent-fullwidth { width: 100%; padding-left: 0px; padding-right: 0px; } } #footer { background-color: #37566A; color: #fff; height: auto; } #footerCntr { overflow: hidden; width: 100%; background: #7694a4; } @media only screen and (max-width: 1149px) { .center { padding: 0px 10px; } .footerBox .left { padding-right: 40px; } .envelopBox li { padding-bottom: 10px; float: none; display: inline-block; } } @media only screen and (max-width: 979px) { .topBox ul { margin-right: -7px; } .topBox li { padding-right: 7px; } .topBox li a { font-size: 13px; } .topBox p { font-size: 13px; } .menuBox:not(.mm-menu) li { padding: 6px 8px; } .menuBox:not(.mm-menu) li a { font-size: 11px; } .searchBox .heart { height: 28px; } .ticketsBox { padding: 20px 0px; } .ticketsBox ul { margin-right: -20px; } .ticketsBox li { padding: 0px 20px 0 0; } #leftCntr { display: none; width: 100%; background: #fff; z-index: 9; } #rightCntr { width: 100%; } .leftpannel { color: #000; font-size: 18px; display: inline-block; text-decoration: none; vertical-align: middle; margin-bottom: 10px; } .leftpannel span { font-size: 25px; margin-right: 5px; } .galleryBox ul { margin-right: -15px; } .galleryBox li { margin-right: 15px; width: calc(33.3% - 15px); } } @media only screen and (max-width: 767px) { .menu { display: none; } .mobileMenu { display: block; } .topBox p { width: 100%; text-align: center; } .topBox ul { width: 100%; text-align: center; } .topBox ul li { float: none; display: inline-block; } .headerBox .button small { display: none; } .searchBox { width: 250px; } .envelopBox { padding: 25px 0px; } .ticketsBox li { width: 33.3%; padding-bottom: 30px; } .contentBox h2 { font-size: 30px; } .contentBox .gallery { margin-right: -20px; } .contentBox .gallery li { padding-right: 20px; } } @media only screen and (max-width: 479px) { #headerCntr .logo { width: 120px; margin-left: -70px; top: 19px; } .hidden-mobile { display: none; } .envelopBox h2 span { padding: 0px 10px; } .ticketsBox h2 span { padding: 0px 10px; } .galleryBox ul { margin: 0px; } .galleryBox li { width: 100%; margin-right: 0px; margin-bottom: 20px; } .serviceBox .button { font-size: 13px; } .contentBox h2 { font-size: 22px; } .contentBox .gallery li { width: 33.3%; } .cookie_description { width: 100%; } } .clear { clear: both; visibility: hidden; line-height: 0; height: 0; } .center { margin: 0 auto; max-width: 1150px; position: relative; } #wrapper { position: relative; display: block; width: 100%; min-height: 100%; } #mainCntr { width: 100%; } .topBox { padding: 8px 0px; width: 100%; overflow: hidden; border-bottom: 2px solid #f4f6f8; } .topBox p { font-size: 15px; color: #7694a4; float: left; } .topBox ul { float: right; } .topBox li { padding: 0px 18px 0px 6px; float: left; } .topBox li a { font-size: 15px; color: #7694a4; text-decoration: none; } .topBox li span { margin-right: 8px; } .topBox li:last-child a:before { font-family: 'FontAwesome'; content: "\f0d7"; position: absolute; top: 2px; right: 0px; } .topBox li a:hover { color: #000; } .headerBox { height: 93px; width: 100%; overflow: hidden; } .headerBox .button { margin-top: 20px; float: left; padding: 0px 17px; line-height: 40px; font-size: 15px; color: #000; text-transform: uppercase; text-decoration: none; border: 2px solid #a7c8c4; } .headerBox .button span { margin-right: 8px; font-size: 16px; color: #a7c8c4; } .headerBox .button.right { float: right; } .headerBox .button:hover { background: #a7c8c4; } .headerBox .button:hover span { color: #000; } .headerBox .button small { font-size: 15px; } .menuBox:not(.mm-menu) { padding: 16px 0px 14px 0; background: #eaeef1; overflow: hidden; } .menuBox:not(.mm-menu) ul { list-style: none; } .menuBox:not(.mm-menu) li { float: left; padding: 9px 13px; border-right: 1px dotted #7a7c7e; } .menuBox:not(.mm-menu) li a { display: block; font-size: 15px; color: #000; text-decoration: none; text-transform: uppercase; border-bottom: 2px solid transparent; } .menuBox:not(.mm-menu) li a:hover { border-bottom: 2px solid #e14249; } .menuBox:not(.mm-menu) li.active a { border-bottom: 2px solid #e14249; } .menuBox .menu { width: calc(100% - 150px); float: left; } .searchBox { width: 150px; float: right; } .searchBox .heart { width: 30px; float: left; height: 30px; padding: 8px 11px 0px 0; color: #000; border-right: 1px dotted #7a7c7e; } .searchBox .heart:hover { color: #e54e53; } .searchBox .search { width: calc(100% - 40px); margin-left: 10px; padding: 7px; float: left; background: #fff; border: 1px solid #dfdfdf; } .searchBox input[type="text"] { width: calc(100% - 16px); float: left; line-height: 18px; background: none; border: none; } .searchBox .button { float: left; background: none; border: none; } .mobileMenu { display: none; cursor: pointer; z-index: 15; float: left; width: 40px; height: 30px; position: relative; transition: .2s; overflow: hidden; } .mobileMenu span { display: block; height: 4px; text-indent: -9999px; border-radius: 5px; background: #000; position: absolute; top: 50%; right: 20%; left: 20%; transition: .2s; } .mobileMenu span:before, .mobileMenu span:after { display: block; width: 100%; height: 4px; content: ''; border-radius: 5px; background-color: #000; transition-duration: 0.2s, .2s; position: absolute; left: 0; } .mobileMenu span:before { top: -7px; transition-property: top, -webkit-transform; transition-property: top, transform; transition-property: top, transform, -webkit-transform; } .mobileMenu span:after { bottom: -7px; transition-property: bottom, -webkit-transform; transition-property: bottom, transform; transition-property: bottom, transform, -webkit-transform; } .mm-opened .mobileMenu span { background: none; } .mm-opened .mobileMenu.active span:before { transition-delay: 0s, .2s; } .mm-opened .header__menu-toggle.active span:after { transition-delay: 0s, .2s; } .mm-opened .mobileMenu span:before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mm-opened .mobileMenu span:after { bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #contentCntr { width: 100%; } .ticketsBox { padding: 45px 0px; width: 100%; overflow: hidden; } .ticketsBox h2 { padding-bottom: 14px; text-align: center; display: block; max-width: 495px; margin: 0px auto; } .ticketsBox h2 span { position: relative; top: -14px; font-size: 20px; font-weight: normal; background: #fff; padding: 0px 62px; display: inline-block; } .ticketsBox ul { list-style: none; margin-right: -35px; } .ticketsBox li { width: 16.6%; padding: 0px 35px 30px 0px; float: left; } .ticketsBox li img { width: 100%; } #leftCntr { padding: 0px 30px 0px 0px; float: left; width: 296px; } .accordionBox { width: 100%; overflow: hidden; border-bottom: 2px solid #82c8cb; } .accordionBox h3 { padding: 8px 9px 8px 0; font-size: 18px; color: #000; cursor: pointer; font-weight: normal; border-top: 2px solid #82c8cb; } .accordionBox h3 span { font-size: 20px; color: #e14249; float: right; } .accordionBox ul { list-style: none; } .accordionBox li { display: block; line-height: 25px; } .accordionBox li a { font-size: 15px; color: #3c3c3c; text-decoration: none; } .accordionBox li span { padding-right: 12px; color: #7694a4; } .accordionBox li a:hover, .accordionBox li.active a, .accordionBox li a:hover span, .accordionBox li.active a span { color: #e54e53; } .accordionBox ul.hide { display: none; } .ratingBox { margin-top: 56px; padding: 40px 30px; width: 100%; overflow: hidden; text-align: center; background: #e0dfd1; } .ratingBox .rating { text-align: center; } .ratingBox .rating span { margin-bottom: 10px; display: inline-block; color: #e14249; } .ratingBox p { padding-bottom: 20px; font-size: 18px; color: #000; } .ratingBox small { font-size: 15px; color: #000; line-height: 25px; } .ratingBox small a { font-size: 13px; color: #e14249; text-decoration: underline; } .linkBox { margin-top: 30px; padding: 45px 30px 30px 30px; width: 100%; overflow: hidden; text-align: center; background: #eaeef1; } .linkBox h3 { padding-bottom: 20px; font-size: 18px; color: #000; font-weight: normal; } .linkBox ul { list-style: none; } .linkBox li { display: block; font-size: 15px; color: #e14249; } .linkBox li a { font-size: 13px; color: #e14249; text-decoration: underline; } .linkBox li a:hover { text-decoration: none; } #rightCntr { float: right; width: calc(100% - 296px); } .galleryBox { width: 100%; overflow: hidden; } .galleryBox ul { margin-right: -30px; } .galleryBox li { position: relative; margin: 0px 30px 0px 0px; width: calc(33.3% - 30px); float: left; overflow: hidden; } .galleryBox li img { width: 100%; transition: 0.2s; } .galleryBox li:hover img { -webkit-transform: matrix(1.169, 0, 0, 1.139, 0, 0); transform: matrix(1.169, 0, 0, 1.139, 0, 0); } .galleryBox .button { position: absolute; left: 9px; bottom: 10px; width: calc(100% - 18px); line-height: 42px; display: block; font-size: 15px; color: #000; font-weight: 600; text-decoration: none; text-align: center; background: #fff; box-shadow: 1px 1px 1px 0px rgba(16, 25, 42, 0.67); } .contentBox { width: 100%; overflow: hidden; } .contentBox h2 { font-family: 'handsome_proregular'; font-weight: normal; font-size: 40px; line-height: 40px; color: #e14249; } .contentBox p { padding: 10px 0px 30px 0px; font-size: 16px; color: #3c3c3c; line-height: 27px; } .contentBox .gallery { padding: 0px 0px 35px 0px; overflow: hidden; margin-right: -55px; list-style: none; } .contentBox .gallery li { padding: 0px 55px 30px 0px; width: 25%; float: left; } .contentBox .gallery img { width: 100%; } .contentBox h3 { font-size: 22px; color: #e14249; } .contentBox h4 { font-size: 16px; color: #e14249; } .lazy-load { transition: opacity 1s; opacity: 1; position: relative; width: 100%; z-index: 1; -webkit-filter: blur(3px); filter: blur(3px); } .lazy-load-wrapper { overflow: visible; position: relative; display: block; background: #aaa center center no-repeat; background-size: cover; } .lazy-load-wrapper .lazy-load-large { transition: opacity 0.5s; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .lazy-load-wrapper.is-loaded .lazy-load-large { opacity: 1; } .lazy-load-wrapper.is-loaded .lazy-load { opacity: 0; } .lazy-load-container { -webkit-filter: blur(1px); filter: blur(1px); transition: opacity 0.5s; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1; opacity: 1; } .lazy-load-container-large { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -2; opacity: 1; } .lazy-load-background.is-loaded .lazy-load-container { opacity: 0; } #highlight-menus { display: none; } .nav-m { height: 35px; display: block; position: relative; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .nav-m:after { position: absolute; z-index: 2; top: 23px; height: 1px; right: 80px; content: ''; box-shadow: -4px 0px 15px 11px #fff; } .nav-m .mobile-nav__menu { z-index: 3; top: 0px; line-height: 24px; font-size: 16px; height: 33px; right: 0px; padding: 3px 5px; position: absolute; background-color: #888; color: #fff; transition: color 0.3s, background 0.3s; float: initial; margin: 0; width: 82px; } .nav-m a { color: #575757; } .nav-m .navbar-hamburger > button { margin-top: 1px; display: inline-block; position: relative; float: left; background-color: transparent; background-image: none; border: 1px solid transparent; border-color: transparent; outline: none; width: 26px; height: 16px; padding-left: 2px; } .navbar .nav-m .navbar-hamburger .icon-bar { width: 15px; height: 2px; margin: 3px 0; background-color: #fff; transition: background 0.3s; position: absolute; opacity: 1; transition: opacity 0.3s, top 0.3s, -webkit-transform 0.2s; transition: opacity 0.3s, top 0.3s, transform 0.2s; transition: opacity 0.3s, top 0.3s, transform 0.2s, -webkit-transform 0.2s; } .nav-m .navbar-hamburger .icon-bar:nth-child(1) { top: calc(50% - 5px); } .nav-m .navbar-hamburger .icon-bar:nth-child(2) { top: 50%; } .nav-m .navbar-hamburger .icon-bar:nth-child(3) { top: calc(50% + 5px); } .nav-m .navbar-hamburger.open .icon-bar:nth-child(1) { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .nav-m .navbar-hamburger.open .icon-bar:nth-child(2) { opacity: 0; } .nav-m .navbar-hamburger.open .icon-bar:nth-child(3) { top: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .mobile-nav__highlight-items { padding-left: 5px; padding-right: 5px; font-size: 14px; width: calc(100% - 82px); overflow-x: auto; height: 33px; white-space: nowrap; position: relative; z-index: 1; } .mobile-nav__highlight-item a { line-height: 32px; padding: 0 3px; transition: color; } .mobile-nav__highlight-item a:hover { color: #8ac0cf; text-decoration: none; } @media screen and (min-width: 768px) { .nav-m { display: none; } } .navbar { height: auto; } .navbar .topbar .navbar-hamburger { display: none; } .navbar .topbar .topbar-account-mob, .navbar .topbar .topbar-favourites-mob { display: inline-block; font-size: 24px; padding: 11px 5px; float: right; } .navbar .topbar .topbar-account-mob { margin-right: 45px; } .navbar .topbar .topbar-basket-mob { width: 24px; } .navbar .topbar .topbar-basket-mob i { font-size: 24px; } .navbar .topbar .topbar-account-menu-mob { position: relative; background-color: #FFFFFF; margin-top: 50px; z-index: 99; display: none; } .navbar .topbar .topbar-account-menu-mob .account-mobile-menu-title { padding: 5px 10px; margin-bottom: 0; } .navbar .topbar .topbar-account-menu-mob ul li { border-top: 1px solid #eee; } .navbar .topbar .topbar-account-menu-mob ul li a { padding: 5px 10px; display: block; } .navbar .navbar-search-field { display: none; } @media only screen and (min-width: 768px) { .navbar .topbar .navbar-hamburger { display: inline-block; } .navbar .topbar a.logo { height: 60px; padding: 5px 0; } .navbar .topbar .topbar-account-mob, .navbar .topbar .topbar-favourites-mob { padding: 15px 5px; } .navbar .middlebar .navbar-search-field { width: 210px; display: block; } .hidden-desktop { display: none; } .huisstijl-img { height: 296px; } } @media only screen and (min-width: 992px) { .navbar { height: auto; margin-bottom: 0px; background: none; } .navbar .topbar { height: 50px; } .navbar .topbar .navbar-hamburger { display: none; } .navbar .topbar .topbar-basket-mob, .navbar .topbar .topbar-account-mob, .navbar .topbar .topbar-favourites-mob { display: none; } .navbar .topbar a.logo { display: none; } .navbar .middlebar { position: relative; top: 0px; } .navbar .middlebar a.logo { line-height: 1em; height: 75px; } .navbar .middlebar a.logo img { height: 100%; } } .js-component-read-more { position: relative; border-bottom: 1px solid rgba(159, 197, 232, 0.5); margin-bottom: 20px; padding-bottom: 10px; } .js-component-read-more .read-more-link { position: absolute; bottom: 0px; right: 0px; font-size:.9em; cursor: pointer; color: #9FC5E8; white-space: nowrap; line-height: 1em; } .js-component-read-more .read-more-text { display: none; } .js-component-read-more.open .read-more-text { display: block; } @media only screen and (min-width: 768px) { .js-component-read-more { border-bottom: none; margin-bottom: none; } .js-component-read-more.open { padding-bottom: 0px; } .js-component-read-more .read-more-link { display: none; } .js-component-read-more .read-more-text { display: block; } } #body_algemene_voorwaarden .custom_content { font-size: 14px; line-height: 20px; } #body_algemene_voorwaarden .custom_content ul > li { list-style: disc; } #body_design h1 { font-family: 'Roboto', sans-serif; font-size: 24px; line-height: 1.5em; color: #000; font-weight: 400; } #body_design .button-success { background-color: #e85154; border-color: #e85154; } #body_design .button-success:hover { color: #e85154; background-color: #fff; } #card_tag_list { display: none; } #product_supplier { display: none; } #body_home .serviceBox { background: #eaeef1; } #body_home .serviceBox.big { background: #fff; } #body_home h2 { font-family: 'Roboto'; font-weight: 200; color: #333; text-transform: uppercase; font-style: normal; font-size: 25px; text-align: center; line-height: 36px; } #body_home h2 span { position: relative; top: -14px; font-size: 20px; font-weight: normal; background: #e0dfd1; padding: 0px 62px; display: inline-block; } #body_home .envelopBox { padding: 45px 0px; } #body_home .envelopBox ul { list-style: none; text-align: center; margin-bottom: 0px; } #body_home .envelopBox li { padding: 0px 4px 30px 4px; display: inline-block; } #body_home .envelopBox img { width: 84px; } #body_home .envelopBox .button { text-transform: uppercase; font-weight: 400; box-shadow: 1px 1px 1px 0px rgba(16, 25, 42, 0.67); } #body_home .simpleBox { padding: 45px 0px; width: 100%; overflow: hidden; background: #e0dfd1; } #body_home .simpleBox .image { padding: 20px 0 45px 0; max-width: 900px; margin: 0px auto; overflow: hidden; } #body_home .simpleBox .image img { width: 100%; } #body_home .simpleBox .button { display: block; width: 300px; margin: 0px auto; text-align: center; padding: 10px; } #body_home form[lpformnum="1"] { display: none; } #body_home .visual { background-color: #A7C8C4; } @media only screen and (min-width: 768px) { #body_home .visual { height: 204px; } #body_home .serviceBox { padding-top: 10px !important; padding-bottom: 10px !important; } #body_home .serviceBox h4 { font-size: 18px; } #body_home .serviceBox .servicebox-item .detail .servicebox-button { font-size: 14px; line-height: 28px; } } #body_jubileumkaarten .visual { background-color: #e7e8ec; } #body_jubileumkaarten .visual .container h1 { color: #7c7672; } #body_jubileumkaarten #pagecontent h1 { display: block !important; } #body_uitnodigingen .visual { background-color: #a9d4d3; } #body_uitnodigingen .visual .container h1 { color: #fff; } #body_uitnodigingen #pagecontent h1 { display: block !important; } #body_verhuiskaarten .visual { background-color: #ceccae; } #body_verhuiskaarten .visual .container h1 { color: #8d2962; margin-right: 25%; } #body_verhuiskaarten #pagecontent h1 { display: block!important; } #body_wenskaarten .visual { background-color: red; } #body_wenskaarten .visual .container h1 { color: #fff; } #body_wenskaarten #pagecontent h1 { display: block!important; } #body_zelf-maken .visual { background-color: #ebecee; } #body_zelf-maken .visual .container h1 { color: #676842; } #body_zelf-maken #pagecontent h1 { display: block; } .bannerBox { padding: 20px; width: 100%; height: 204px; overflow: hidden; background: url(../media/header.png) center top no-repeat; background-size: cover; background-color: #7faeaa; } .bannerBox h1 { font-family: 'handsome_proregular'; font-size: 30px; line-height: 1.1em; color: #fff; font-weight: normal; float: right; } .bannerBox h1 br { display: none; } @media only screen and (min-width: 480px) { .bannerBox h1 { font-size: 35px; line-height: 40px; } .bannerBox h1 br { display: block; } } @media only screen and (min-width: 1200px) { .bannerBox h1 { padding: 40px 100px 0px 0px; line-height: 45px; font-size: 50px; } } .button { text-transform: uppercase; font-weight: 400; box-shadow: 1px 1px 1px 0px rgba(16, 25, 42, 0.67); text-decoration: none; border-radius: 3px; } .button.button-default { background-color: #F05B61; border-color: #F05B61; } .button.button-default:hover { background-color: #d2131b; color: #fff; } #crumbs { display: none; } #filter_menu li.tag-li .custom_checkbox { vertical-align: middle; } #filter_menu ul li input[type=checkbox]:checked + label .custom_checkbox:after, #filter_menu ul li label:hover .custom_checkbox:after { line-height: 12px; } .footerBox { overflow: hidden; } .footerBox strong { padding-bottom: 5px; font-size: 15px; color: #fff; display: block; border-bottom: 1px solid #fff; font-weight: normal; } .footerBox p { padding: 15px 0px 0px 0px; font-size: 15px; color: #fff; line-height: 22px; } .footerBox address { padding: 15px 0px 0px 0px; font-size: 15px; color: #fff; font-style: normal; } .footerBox a { color: #fff; text-decoration: none; } .footerBox a:hover { text-decoration: underline; } .footerBox .left { width: 100%; padding: 0px 0px 20px 0px; } .footerBox .right { width: 100%; } .footerBottomBox { padding: 30px 0px 12px 0px; width: 100%; overflow: hidden; background: #375669; text-align: center; } .footerBottomBox .left { width: 100%; } .footerBottomBox .right { padding: 10px 0px 0px 0px; width: 100%; } .footerBottomBox ul.payment { padding: 21px 0px 0px 0px; margin-right: -16px; list-style: none; } .footerBottomBox ul.payment li { padding: 0px 16px 0px 0px; float: none; display: inline-block; } .footerBottomBox ul.social { list-style: none; } .footerBottomBox ul.social li { padding: 0px 9px 0px 0px; float: none; display: inline-block; } .footerBottomBox ul.social li a { font-size: 20px; color: #7694a4; text-decoration: none; transition: color 0.2s; } .footerBottomBox ul.social li a:hover { color: #fff; } .footerBottomBox p { padding: 23px 0px 0px 0px; overflow: hidden; font-size: 15px; color: #fff; } .footerBottomBox p a { font-size: 15px; color: #fff; text-decoration: underline; } .footerBottomBox p a:hover { text-decoration: none; } .footerBottomBox strong { font-weight: normal; font-size: 16px; color: #fff; text-transform: uppercase; } @media only screen and (min-width: 768px) { .footerBox .left { width: calc(100% - 260px); } .footerBox .right { width: 260px; } .footerBottomBox { text-align: left; } .footerBottomBox .left { width: calc(100% - 365px); float: left; } .footerBottomBox .right { width: 365px; float: left; } .footerBottomBox ul.social li { float: left; } .footerBottomBox ul.payment li { float: left; } } @media only screen and (min-width: 992px) { .footerBox { padding: 26px 0px; } .footerBox .left { padding: 0px 120px 0px 0px; width: calc(100% - 365px); float: left; } .footerBox .right { width: 365px; float: left; } } #sidebar .sidebar_widget > h3 { font-weight: normal; } #sidebar .sidebar_widget .sidebar-rating { margin: 30px 0; color: #333; font-size: 14px; background-color: #eaeef1; padding: 20px; text-align: center; } #sidebar .sidebar_widget .sidebar-rating .stars i { padding: 10px 0; font-size: 20px; color: #EB5C5F; } #sidebar .sidebar_widget .sidebar-more { margin: 30px 0; background-color: #ded7cb; padding: 20px; text-align: center; } #sidebar .sidebar_widget .sidebar-more h4 { color: #000; font-size: 18px; line-height: 28px; } #sidebar .sidebar_widget .sidebar-more a { color: #EB5C5F; font-size: 16px; line-height: 24px; display: block; } #sidebar .sidebar_widget .sidebar-more a:before { font-size: 10px; margin-right: 5px; content: 'f'; font-family: kcicons; } .navbar .logobar { display: none; position: fixed; width: 100%; top: 0px; padding: 0px; } .navbar .logobar a.logo { display: inline-block; height: 50px; overflow: hidden; } .navbar .logobar a.logo img { width: 85px; margin-top: 7px; } .navbar .logobar a.logobar-button { font-weight: 400; width: 50px; margin: 3px 0px; font-size: 14px; display: inline-block; line-height: 40px; text-align: center; border-width: 2px; border-style: solid; border-color: rgba(167, 200, 196, 0); color: #333; } .navbar .logobar a.logobar-button i { font-size: 18px; margin-top: -3px; margin-right: 5px; color: #a7c8c4; } .navbar .logobar a.logobar-button .desktop-text { display: none; } .navbar .logobar a.logobar-button:hover { color: #069297; } .navbar .logobar a.logobar-button:hover i { color: #069297; } @media only screen and (min-width: 768px) { .navbar .logobar { display: block; position: relative; width: initial; top: initial; padding: 10px 15px 5px 15px; border-bottom: 1px solid #EAEEF1; } .navbar .logobar a.logo { height: initial; } .navbar .logobar a.logo img { width: initial; margin-top: initial; } .navbar .logobar a.logobar-button { width: 135px; margin: 18px 0px; line-height: 40px; border-color: #a7c8c4; } .navbar .logobar a.logobar-button .desktop-text { display: inline; } } @media only screen and (min-width: 768px) { .navbar .logobar { border-bottom: 1px solid #EAEEF1; } } #sidebar a { text-decoration: none; } #sidebar .sidebar_widget > h3 { font-family: 'handsome_proregular'; font-size: 32px; padding-top: 3px; color: #079191; line-height: 1.2em; font-weight: normal; } #sidebar .sidebar_widget ul.list { border-bottom: 1px solid #079191; } #sidebar .sidebar_widget ul.list > li { border-top: 1px solid #079191; } #sidebar .sidebar_widget ul.list > li > a { display: block; color: #666; font-size: 18px; line-height: 30px; padding: 0; } #sidebar .sidebar_widget ul.list > li > a:after { float: right; margin-right: 5px; font-family: kcicons; content: 'f'; color: #EB5C5F; font-size: 8px; transition: -webkit-transform 0.15s; transition: transform 0.15s; transition: transform 0.15s, -webkit-transform 0.15s; padding-top: 1px; } #sidebar .sidebar_widget ul.list > li ul { border: none; margin: 0; padding: 0; max-height: 0px; opacity: 0; overflow: hidden; transition: max-height 0.3s, opacity 0.5s; } #sidebar .sidebar_widget ul.list > li ul li a { color: #999; font-size: 16px; line-height: 24px; padding: 3px 0; } #sidebar .sidebar_widget ul.list > li ul li a:hover { color: #EB5C5F; } #sidebar .sidebar_widget ul.list > li ul li:last-child { margin-bottom: 8px; } #sidebar .sidebar_widget ul.list > li ul li.active a { color: #EB5C5F; } #sidebar .sidebar_widget ul.list > li.active > a:after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #sidebar .sidebar_widget ul.list > li.active ul { max-height: 599px; opacity: 1; } #mid { margin-top: 85px; margin-bottom: 30px; } @media only screen and (min-width: 768px) { #mid { margin-top: 134px; } } @media only screen and (min-width: 992px) { #mid { margin-top: 0px; } } .navbar.navbar-style-1 .middlebar { height: 39px; border-bottom: 1px solid #EAEEF1; background-color: #fff; } .navbar.navbar-style-1 .middlebar ul.middlebar-menu-left { height: 39px; margin-bottom: 0px; } .navbar.navbar-style-1 .middlebar .middlebar-menu-right a:hover { color: #069297; } .navbar.navbar-style-1 .middlebar .menu-mob-middlebar-left { font-size: 16px; } .navbar.navbar-style-1 .middlebar .menu-mob-middlebar-left:before { box-shadow: -5px 0 5px #fff; background: #fff; } .navbar.navbar-style-1 .middlebar .navbar-search-field { top: 39px; } .navbar.navbar-style-1 .middlebar ul.middlebar-menu-left > li a { top: 87px; font-size: 10px; text-transform: uppercase; color: #363341; } .navbar.navbar-style-1 .middlebar ul.middlebar-menu-right { top: 87px; } @media only screen and (min-width: 768px) { .navbar.navbar-style-1 .middlebar { height: 0px; } .navbar.navbar-style-1 .middlebar .collapse { top: 135px; } .navbar.navbar-style-1 .middlebar ul.middlebar-menu-left > li a, .navbar.navbar-style-1 .middlebar ul.middlebar-menu-right { padding-top: 35px; } .navbar.navbar-style-1 .middlebar ul.middlebar-menu-left > li a > li a, .navbar.navbar-style-1 .middlebar ul.middlebar-menu-right > li a { font-weight: 400; font-style: normal; font-size: 16px; text-transform: uppercase; transition: color 0.2s; } .navbar.navbar-style-1 .middlebar .navbar-search-field { top: 0px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } .navbar .middlebar .navbar .middlebar ul.middlebar-menu-left > li a:hover, .navbar .middlebar ul.middlebar-menu-right > li a:hover, .navbar .middlebar ul.middlebar-menu-left > li a.active, .navbar .middlebar ul.middlebar-menu-right > li a.active { background-color: transparent; color: #069297; } } @media only screen and (min-width: 992px) { .navbar.navbar-style-1 .middlebar { height: 75px; display: block; background-color: #eaedf0; } .navbar.navbar-style-1 .middlebar .collapse { top: 0px; } .navbar.navbar-style-1 .middlebar ul.middlebar-menu-right { padding-top: 0px; top: 0px; right: auto; left: auto; height: 100%; } .navbar.navbar-style-1 .middlebar ul.middlebar-menu-right li { border-color: transparent; } .navbar.navbar-style-1.navbar-default-a .middlebar .navbar-search-field { display: none; } } .navbar.navbar-style-1 a { text-decoration: none; } .navbar.navbar-style-1 .collapse { top: 85px; } .navbar.navbar-style-1 .topbar a.logo { margin: 0; height: 42px; overflow: visible; padding: 5px; } .navbar.navbar-style-1 .topbar a.logo img { height: 42px; max-width: initial; } @media only screen and (min-width: 768px) { .navbar.navbar-style-1 { height: auto; } } @media only screen and (min-width: 992px) { .navbar.navbar-style-1 { height: 209px; } .navbar.navbar-style-1 .collapse { top: 0px; } } #body_home .reviewBox { padding: 40px 0px 20px 0px; width: 100%; overflow: hidden; } #body_home .reviewBox .left { max-width: 350px; margin: 0 auto; padding: 20px 10px; text-align: center; overflow: hidden; background: #eaeef1; } #body_home .reviewBox .left .stars { width: 86px; margin: 0 auto; white-space: nowrap; overflow: hidden; text-align: left; } #body_home .reviewBox .left .stars i { width: 20px; margin-left: -5px; color: #e85154; } #body_home .reviewBox .left p { padding: 0px 0 20px 0px; font-size: 13px; line-height: 18px; font-weight: 200; color: #000; } #body_home .reviewBox .left p a { font-size: 13px; color: #000; text-decoration: none; font-style: italic; } #body_home .reviewBox .left .button { display: block; width: 100%; margin: 0px auto; text-align: center; padding: 10px; } #body_home .reviewBox .right { text-align: left; } #body_home .reviewBox .right h2 { padding: 20px 10% 35px 10%; font-family: 'handsome_proregular'; font-size: 24px; line-height: 24px; font-weight: normal; color: #e14249; text-transform: initial; } #body_home .reviewBox .right span { padding-bottom: 14px; border-top: 1px solid #a7c8c4; text-align: center; display: block; max-width: 275px; margin: 0px auto; } #body_home .reviewBox .right span small { position: relative; top: -9px; font-size: 15px; color: #a7c8c4; font-weight: normal; background: #fff; padding: 0px 23px; display: inline-block; } @media only screen and (min-width: 768px) { #body_home .reviewBox .right h2 { font-size: 30px; line-height: 32px; } } @media only screen and (min-width: 992px) { #body_home .reviewBox .right h2 { font-size: 34px; line-height: 36px; } } .serviceBox { padding-top: 30px; padding-bottom: 0px; width: 100%; position: relative; } .serviceBox.no-top-padding { padding-top: 0px !important; } .serviceBox .cols > div:nth-child(even) > .servicebox-item .detail { right: 0; left: initial; } .serviceBox .cols > div:nth-child(even) > .servicebox-item .image { float: left; } .serviceBox .servicebox-item { position: relative; background-color: #A8C8C5; margin-bottom: 30px; max-width: 400px; margin-left: auto; margin-right: auto; } .serviceBox .servicebox-item:after { content: ""; display: table; clear: both; } .serviceBox .servicebox-item .image { width: 50%; float: left; overflow: hidden; position: relative; } .serviceBox .servicebox-item .image img { width: 100%; transition: 0.2s; } .serviceBox .servicebox-item:hover img { -webkit-transform: matrix(1.169, 0, 0, 1.139, 0, 0); transform: matrix(1.169, 0, 0, 1.139, 0, 0); } .serviceBox .servicebox-item .diamond { width: 30px; height: 30px; transition: -webkit-filter 0.3s; transition: filter 0.3s; transition: filter 0.3s, -webkit-filter 0.3s; background-color: #A8C8C5; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); z-index: 10; } .serviceBox .servicebox-item .detail { padding: 20px 9px 9px 9px; width: 50%; top: 0; bottom: 0; right: 0; position: absolute; z-index: 11; } .serviceBox .servicebox-item .detail p { padding: 0px; overflow: hidden; font-size: 15px; color: #fff; text-align: center; } .serviceBox .servicebox-item .detail .servicebox-button { font-size: 16px; font-weight: 400; padding: 7px 0; position: absolute; left: 9px; bottom: 9px; width: calc(100% - 18px); line-height: 42px; line-height: 22px; display: block; color: #000; text-decoration: none; text-align: center; background: #fff; box-shadow: 1px 1px 1px 0px rgba(16, 25, 42, 0.67); border-radius: 3px; } .serviceBox .servicebox-item .detail .servicebox-button:hover { color: #000; text-decoration: underline; background: #fff; box-shadow: 3px 3px 3px 0px rgba(16, 25, 42, 0.67); } .serviceBox .servicebox-item.blue { background: #658698; } .serviceBox .servicebox-item.blue .diamond { background-color: #658698; } .serviceBox .servicebox-item.gray { background: #a9a4a3; } .serviceBox .servicebox-item.gray .diamond { background-color: #a9a4a3; } .serviceBox .servicebox-item.lightred { background: #e14249; } .serviceBox .servicebox-item.lightred .diamond { background-color: #e14249; } .serviceBox .servicebox-item.darkgreen { background: #01858b; } .serviceBox .servicebox-item.darkgreen .diamond { background-color: #01858b; } .serviceBox .servicebox-item.lightyellow { background: #e4d2a4; } .serviceBox .servicebox-item.lightyellow .diamond { background-color: #e4d2a4; } .serviceBox .servicebox-item.lightgreen { background: #7faeaa; } .serviceBox .servicebox-item.lightgreen .diamond { background-color: #7faeaa; } .serviceBox .servicebox-item.light { background: #a7c8c4; } .serviceBox .servicebox-item.light .diamond { background-color: #a7c8c4; } .serviceBox .servicebox-item.lightgray { background: #b8b4b3; } .serviceBox .servicebox-item.lightgray .diamond { background-color: #b8b4b3; } .serviceBox.big { margin: 0px; background: #fff; } .serviceBox.big .servicebox-item { max-width: initial; } .serviceBox.big li { width: calc(50% - 30px); } .serviceBox h4 { font-size: 14px; color: #fff; font-weight: normal; line-height: 1.3em; padding-bottom: 10px; text-align: center; } @media only screen and (min-width: 768px) { .serviceBox { padding-top: 10px; padding-bottom: 10px; } .serviceBox h4 { font-size: 18px; } .serviceBox .cols > div:nth-child(4n+1) > .servicebox-item .detail, .serviceBox .cols > div:nth-child(4n+2) > .servicebox-item .detail { right: 0; left: initial; } .serviceBox .cols > div:nth-child(4n+1) > .servicebox-item .image, .serviceBox .cols > div:nth-child(4n+2) > .servicebox-item .image { float: left; } .serviceBox .cols > div:nth-child(4n+3) > .servicebox-item .detail, .serviceBox .cols > div:nth-child(4n+4) > .servicebox-item .detail { right: initial; left: 0; } .serviceBox .cols > div:nth-child(4n+3) > .servicebox-item .image, .serviceBox .cols > div:nth-child(4n+4) > .servicebox-item .image { float: right; } .serviceBox .servicebox-item .detail .servicebox-button { font-size: 14px; line-height: 28px; } } @media only screen and (min-width: 992px) { .serviceBox .cols > div:nth-child(6n+1) > .servicebox-item .detail, .serviceBox .cols > div:nth-child(6n+2) > .servicebox-item .detail, .serviceBox .cols > div:nth-child(6n+3) > .servicebox-item .detail { right: 0; left: initial; } .serviceBox .cols > div:nth-child(6n+1) > .servicebox-item .image, .serviceBox .cols > div:nth-child(6n+2) > .servicebox-item .image, .serviceBox .cols > div:nth-child(6n+3) > .servicebox-item .image { float: left; } .serviceBox .cols > div:nth-child(6n+4) > .servicebox-item .detail, .serviceBox .cols > div:nth-child(6n+5) > .servicebox-item .detail, .serviceBox .cols > div:nth-child(6n+6) > .servicebox-item .detail { right: initial; left: 0; } .serviceBox .cols > div:nth-child(6n+4) > .servicebox-item .image, .serviceBox .cols > div:nth-child(6n+5) > .servicebox-item .image, .serviceBox .cols > div:nth-child(6n+6) > .servicebox-item .image { float: right; } } .table .table-hover h2, h3 { font-size:.7em; text-align: left; } .table tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { font-size:.8em; } .top-cards { display: none; } .full-thumbs .thumbnail .thumbnail-footer { position: relative !important; bottom: 0px; width: 100%; background: transparent; padding: 10px; opacity: 1; } .full-thumbs .thumbnail h3 { line-height: 40px; display: block; font-size: 16px; color: #000; font-weight: 400; text-decoration: none; text-align: center; background: #fff; box-shadow: 1px 1px 1px 0px rgba(250, 250, 251, 0.67) !important; } .full-thumbs .thumbnail img { transition: 0.2s; } .full-thumbs .thumbnail:hover img { -webkit-transform: matrix(1.169, 0, 0, 1.139, 0, 0); transform: matrix(1.169, 0, 0, 1.139, 0, 0); opacity: 1; } .full-thumbs .thumbnail:hover .thumbnail-footer h3 { color: #000; text-decoration: none; box-shadow: 3px 3px 3px 0px rgba(16, 25, 42, 0.67); } ul.tip-list { color: #999; font-size:.9em; font-weight: 200; padding-left: 25px; } ul.tip-list li { position: relative; } ul.tip-list li:before { font-family: kcicons; position: absolute; left: -20px; color: #079191; content: '\e021'; font-size:.9em; } .navbar.navbar-style-1 .topbar { font-size: 14px; border-bottom: 1px solid #EAEEF1; line-height: 30px; height: 50px; } .navbar.navbar-style-1 .topbar .open-favorites-dynamic .favorites-dynamic-count { top: 5px; } .navbar.navbar-style-1 .topbar .navbar-hamburger { margin: 0px 15px; } .navbar.navbar-style-1 .topbar .topbar-menu-right > ul > li a { padding: 6px 0px 6px 5px; } .navbar.navbar-style-1 .topbar .topbar-menu-left a:active, .navbar.navbar-style-1 .topbar .topbar-menu-left a:focus, .navbar.navbar-style-1 .topbar .topbar-menu-left a:hover { color: red; } .navbar.navbar-style-1 .topbar .topbar-basket-mob { padding: 8px 5px; } .navbar.navbar-style-1 .topbar .topbar-basket-menu-mob { margin-top: 47px; height: calc(100vh - 89px); } @media only screen and (min-width: 768px) { .navbar.navbar-style-1 .topbar { height: 35px; background-color: #fff; } .navbar.navbar-style-1 .topbar a.logo { display: none; } .navbar.navbar-style-1 .topbar .topbar-menu-left { display: none; } .navbar.navbar-style-1 .topbar .topbar-menu-right { right: 0px; margin: 0 auto; } .navbar.navbar-style-1 .topbar .topbar-menu-right > ul > li.dropdown.active .dropdown-content { top: 35px; } .navbar.navbar-style-1 .topbar .topbar-basket-mob { display: none; } .navbar.navbar-style-1 .topbar .topbar-menu-right > ul > li a { display: block; padding: 0px 5px; margin: 0; border: none; color: #7693a3; } .navbar.navbar-style-1 .topbar .topbar-menu-right > ul > li a:active, .navbar.navbar-style-1 .topbar .topbar-menu-right > ul > li a:hover { color: #EB5C5F; } .navbar .topbar .topbar-menu-right > ul { margin-bottom: 0; } .navbar .topbar .topbar-menu-right { position: absolute; top: 0; right: 15px; display: inline-block; } .navbar .topbar .topbar-menu-right > ul > li { position: relative; display: inline-block; vertical-align: middle; border: 1px solid transparent; } .navbar .topbar .topbar-menu-right > ul > li:last-of-type a { padding-right: 0; } .navbar .topbar .topbar-menu-right > ul > li a i { display: inline-block; vertical-align: middle; font-size: 16px; } .navbar .topbar .topbar-menu-right > ul > li i { display: inline-block; vertical-align: middle; padding-right: 5px; } .navbar .topbar .topbar-menu-right > ul > li .icon-chevron-down { padding-left: 0; padding-right: 0; } .navbar .topbar .topbar-menu-right > ul > li.dropdown { position: relative; } .navbar .topbar .topbar-menu-right > ul > li.dropdown.active { border-left: 1px solid #eee; border-right: 1px solid #eee; background-color: #fff; z-index: 999; } .navbar .topbar .topbar-menu-right > ul > li.dropdown .dropdown-content { display: none; } .navbar .topbar .topbar-menu-right > ul > li.dropdown > a { position: relative; display: block; background-color: transparent; z-index: 33; } .navbar .topbar .topbar-menu-right > ul > li.dropdown > ul { width: auto; right: 0; margin-top: -1px; background-color: #fff; border: 1px solid #eee; position: absolute; left: auto; } .navbar .topbar .topbar-menu-right > ul > li.dropdown > ul > li { display: block; position: relative; } .navbar .topbar .topbar-menu-right > ul > li.dropdown > ul > li > a { display: block; padding: 5px 10px; text-align: left; } .navbar .topbar .topbar-menu-right > ul > li.dropdown > ul > li:hover { background-color: [[kleur4]]; } } @media only screen and (min-width: 992px) { .navbar.navbar-style-1 .topbar .topbar-menu-left { padding-left: 15px; display: inline-block; } .navbar.navbar-style-1 .topbar .topbar-menu-left a { display: inline-block; vertical-align: middle; padding: 0 5px; margin: 0; height: 100%; color: #7693a3; } .navbar.navbar-style-1 .topbar .topbar-menu-right { padding-right: 15px; float: right; position: relative; top: 0; right: initial; display: inline-block; } .navbar.navbar-style-1 .topbar .topbar-menu-right > ul > li.dropdown.active .dropdown-content { top: 34px; border-top: none; } .navbar.navbar-style-1 .topbar .topbar-menu-right > ul > li a { padding: 1px 5px; } .navbar.navbar-style-1 .topbar .topbar-menu-right > ul > li.dropdown.active a:active, .navbar.navbar-style-1 .topbar .topbar-menu-right > ul > li.dropdown.active a:hover, .navbar.navbar-style-1 .topbar .topbar-menu-right > ul > li a:active, .navbar.navbar-style-1 .topbar .topbar-menu-right > ul > li a:hover { color: #fff; background: #7693a3; } } .visual { background-image: none; background-size: cover; background-position: center; background-repeat: no-repeat; margin-top: 85px; margin-bottom: -85px; padding: 0; } .visual .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; height: 100%; background-size: auto 100%; background-repeat: no-repeat; background-position: left center; } .visual .container h1 { color: #fff; font-size: 35px; line-height: 1.2em; padding: 0; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; margin-right: 15px; max-width: calc(100% - 30px); } .visual:after { content: ""; display: table; clear: both; } .visual.visual--trouwkaarten { background-color: #EEF0EF; } .visual.visual--trouwkaarten .container h1 { color: #000; } .visual.visual--trouwen { background-color: #EEF0EF; } .visual.visual--trouwen .container h1 { color: #000; } .visual.visual--geboortekaartjes { background-color: #ded7cb; } .visual.visual--wenskaarten { background-color: red; } .visual.visual--wenskaarten .container h1 { color: #fff; } .visual.visual--uitnodigingen { background-color: #a9d4d3; } .visual.visual--uitnodigingen .container h1 { color: #fff; } .visual.visual--jubileumkaarten { background-color: #e7e8ec; } .visual.visual--jubileumkaarten .container h1 { color: #7c7672; } .visual.visual--rouwkaarten { background-color: #f5f4ee; } .visual.visual--rouwkaarten .container h1 { color: #694e38; margin-right: 25%; } .visual #pagecontent h1 { display: none; } @media only screen and (min-width: 600px) { .visual .container { min-height: 200px; } .visual .container h1 { max-width: 60%; } } @media only screen and (min-width: 768px) { .visual { margin-top: 134px; margin-bottom: -134px; } .visual .container h1 { font-size: 45px; } } @media only screen and (min-width: 992px) { .visual { margin-top: 0px; margin-bottom: 0px; } .visual .container h1 { margin-right: 10%; } } .thumbnail-card:hover .thumbnail-card-img { opacity: 1; } #filter_menu .tag-li label { font-weight: 100!important; } .table .table-hover h2, h3 { font-size: 0.9em!important; font-weight: 100; line-height: 1em; margin-bottom: 3px; } @media only screen and (max-device-width: 992px) { #body_contact-support #pagecontent h1 { margin-top: 55px; } .visual.visual--home { display: none; } #body_home .visual { background-image: none!important; } } #body_zoeken #pagebody a img { float: left; } #body_zoeken #pagecontent { width: 100%; } @media only screen and (min-width: 768px) { .navbar.navbar-style-1 .middlebar .navbar-search-field { left: 90% !important; } } #card_order_info .desUsp a:before { font-size: 13px; padding-right: 5px; content: 'h'; color: #f08288; font-family: 'kcicons'; text-decoration: none !important; } button.accordion { width: 100%; background-color: white; border: none; outline: 1px solid #eaedf0; text-align: left; color: #333; font-size: 18px; padding: 15px 20px; margin: 0px; cursor: pointer; transition: background-color 0.2s linear; } button.accordion::after { content: '\002B'; font-size: 14px; float: right; } button.accordion.is-open::after{ content: "\2212"; } button.accordion:hover { background-color: #eaedf0; color: #222; } .accordion-content { padding: 0px 20px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-in-out; color: #333; font-size: 18px; line-height: 1.5em; font-weight: 200; } .flex-container { display: flex; flex-wrap: wrap; } .flex-container > div { flex: 1 0 26%; } @media ( max-width: 768px) { .flex-container > div { flex-basis: 40%; } } @media ( max-width: 320px) { .flex-container > div { flex-basis: 80%; } } .flex-container > div { height: 150px; border: 2px solid white; display: flex; justify-content: center; align-items: center; color: black; font-size: 1.2em; } .flex-container-blue { background-color: #658698; } .flex-container-green{ background-color: #a7c6c3; } .flex-container-mint{ background-color: #7faeaa; } @media only screen and (max-width: 480px) { .thumbnail img { width: 40%; float: left; } .full-thumbs .thumbnail .thumbnail-footer { display: inline-block; width: 60%!important; float: left!important; height: 116px; } .thumbnail h3 { display: inline-block !important; padding-top: 30px; } .navbar .middlebar ul.middlebar-menu-left li a, .navbar .middlebar ul.middlebar-menu-right li a { padding: 10px 10px; color: #7693a3; text-transform: uppercase; } #body_design .desUsp { font-size: 13px; } } .thumbnail{ border-top:#dfe5e5; border-right: #dfe5e5; border-left: #dfe5e5; } .navbar.navbar-style-1 .middlebar ul.middlebar-menu-right { padding-top: 90px; } .middlebar-menu-right > li > ul.dropdown-content > li { display: block!important; min-width: 100%!important; font-family: 'Roboto', sans-serif; font-size: 18px!important; line-height: 1.5em; font-weight: 300; } .middlebar-menu-right > li > ul.dropdown-content > li > a { display: block!important; font-size: 18px!important; } .navbar.navbar-style-1 .middlebar ul.middlebar-menu-right > li > ul.dropdown-content > li > a { font-size: 18px !important; border-bottom: 1px solid #EAEEF1 !important; padding: 14px 15px !important; color: #7693a3 !important; padding-left: 2rem !important; } .navbar.navbar-style-1 .middlebar .middlebar-menu-right li.active a { color: #f05b61 !important; } .navbar.navbar-style-1 .middlebar .middlebar-menu-right a:hover { color: #f05b61; } #body_design .proof_price_usp { display: none; } #body_design .design-content { margin-top: 20px; } #body_design #card-info-right { border-top: none; margin-bottom: 25px!important; } #body_design .open_calculator { background-color: #e85154; border: #e85154; box-shadow: 1px 1px 1px 0px rgba(16, 25, 42, 0.67); } #body_design .open_calculator i { color: white; } #body_design .open_calculator .openPrijsCalculator { color: white; } .bannerPocketfold { margin-top: 20px; max-width: 100%; height: auto; content: url(/media/pocketfoldmapjes_banner_lovz.jpg) } .bannerProefdruk { margin-top: 20px; max-width: 100%; height: auto; content: url(/media/voorbeeldsetje-banner-lovz.jpg) } .bannerPoster { margin-top: 20px; max-width: 100%; height: auto; content: url(/media/geboorte-poster-banner_breed-lovz.jpg) } .bannerStudio { margin-top: 20px; max-width: 100%; height: auto; content: url(/media/studio-banner-lovz.jpg) } @media only screen and (max-width: 480px) { .bannerPocketfold { margin-top: 20px; max-width: 100%; height: auto; content: url(/media/pocketfoldmapjes_mobiel.jpg) } .bannerProefdruk { margin-top: 20px; max-width: 100%; height: auto; content: url(/media/proefdruk-lovz-home.jpg) } .bannerStudio { margin-top: 20px; max-width: 100%; height: auto; content: url(/media/studio-trouwen-opmaat-lovz.jpg) } } .home:link { color:white; text-decoration:underline; } .home:hover { text-decoration:underline; color:white; } .home:visited { color:white; } @media only screen and (max-width: 480px) { h1 { font-family: 'Roboto'!important; font-size: 1.5em!important; font-weight: 400!important; color: #000!important; } } h2 { font-family: 'Roboto'!important; font-size: 1.2em!important; font-weight: 400!important; color: #000!important; } @media only screen and (max-width: 991px) { .navbar .topbar-menu-right .info { display: inline-block !important; } } .designlabel { color: #000; background-color: #fff; font-size: 12px; padding: 0 12px; top: auto!important; bottom: -8px; margin: 0 auto; position: absolute!important; left: 50%; transform: translate(-50%, -50%); border-radius: 2px; border: solid 1px #000; z-index: 1; text-transform: uppercase; } .navbar.navbar-style-1 .topbar { font-size: 13px !important; } @media only screen and (max-width: 480px) { #body_design .sticky_bar_mob #choose_preview, #body_product .sticky_bar_mob #add_product_to_basket, #body_product .sticky_bar_mob .button-group-justified { width: 100%; } } @media only screen and (max-width: 320px) { #body_design .sticky_bar_mob #choose_preview, #body_product .sticky_bar_mob #add_product_to_basket, #body_product .sticky_bar_mob .button-group-justified { width: 100%; } } #body_product .imgprev { margin: 0px !important; } .styleguide-heading { text-align: center; margin: 0 auto; text-transform: uppercase; padding: 16px; width: 50%; border-bottom: 1px solid #3A3A3A; } .styleguide-menu { text-align: center; margin: 20px 0; color: #a5baaf; } .styleguide-menu a { color: #a5baaf; padding: 8px; } .styleguide-category { margin-bottom: 60px; } .styleguide-category .cols-stretch-vertical { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #eee; } .styleguide-title { color: #a5baaf; } .styleguide-colours span { width: 150px; padding: 12px; margin: 8px; display: inline-block; text-align: center; } .styleguide-colours__1 { color: #fff; background-color: #e14249; } .styleguide-colours__2 { color: #fff; background-color: #01858b; } .styleguide-colours__3 { color: #fff; background-color: #7faeaa; } .styleguide-colours__4 { color: #666; background-color: #A8C8C5; } .styleguide-colours__9{ color: #666; background-color: #e0dfd1; } .styleguide-colours__5 { color: #fff; background-color: #658698; } .styleguide-colours__6 { color: #666; background-color: #eaedf0; } .styleguide-colours__7 { color: #fff; background-color: #333; } .styleguide-colours__8 { color: #fff; background-color: #a9a4a3; } .html-box .accordion-faq { width: 100%; text-align: left; padding: 12px; border: none; background-color: #f3f3f3; cursor: pointer; } .html-box .accordion-faq i { float: right; } .html-box .panel { display: none; overflow: hidden; } .html-box .panel pre { background-color: #ebebeb; border: none; } ul.bullets li { list-style: disc inside; } html, body { overflow-x: hidden; } body { position: relative } .navigation-bar-body, .navigation-bar-body .navigation-bar-item, .navigation-bar-body .account-menu-item{ color: #7693a3; } .navigation-bar-footer .navigation-bar-item{ color: #333; } .navigation-bar-body .navigation-usp-item:hover, .navigation-bar-footer .navigation-bar-item:hover, .navigation-bar-footer .navigation-bar-dropdown .navigation-bar-item span:hover { color: #F05B61; } .navigation-bar-footer .navigation-bar-item.active, .navigation-bar-item.active, .navigation-bar-footer .navigation-bar-dropdown.open>.navigation-bar-dropdown-toggle, .navigation-bar-dropdown.open>.navigation-bar-dropdown-toggle, .navigation-bar-body .navigation-bar-dropdown-menu .account-menu-item { background-color: transparent; } .navigation-bar-body .navigation-bar-item .icon-angle-right:after { content: "\e035"; } .shopicons-hamburger:before { color: #7693a3; font-size: 1.6rem; font-weight: 600; } .navigation-bar-body .navigation-bar__contact::before { content: "d"; font-family: "kcicons"; color: #7693a3; line-height: 1; font-size: 16px; margin-right: 0.25rem; } .navigation-bar__info::before { content: "k"; font-family: "kcicons"; color: #7693a3; line-height: 1; font-size: 16px; margin-right: 0.25rem; } .navigation-bar__085---743-07-68::before { content: "b"; font-family: "kcicons"; color: #7693a3; line-height: 1; font-size: 16px; margin-right: 0.25rem; } .shopicons-person::before, .shopicons-shopping-cart::before { color: #7693a3; } .navigation-bar-badge { height: 15px; width: 15px; font-size: 0.5rem; } @media only screen and (max-width: 991px) { .navigation-bar__info span { display: none; } .navigation-bar-item-logo > img { height: 75px; } } @media only screen and (max-width: 320px) and (min-width: 280px) { .navigation-bar-item-logo > img { margin-left: -8px; } .navigation-bar-body .navigation-bar-dropdown { margin-left: -7px; } .navigation-bar-body .navigation-bar-item { padding: 0.25rem; } } @media only screen and (min-width: 992px) { .navigation-bar-item.navigation-bar-item-logo { width: 100%; } .navigation-bar-item-logo > img { margin: auto; width: auto; } .navigation-bar-body .navigation-bar-label { font-size: 13px; } .navigation-bar-body { border-bottom: 1px solid #EAEEF1; line-height: 30px; } .navigation-bar-input-group .navigation-bar-input { font-size: 13px; width: 100px; } .navigation-bar-footer .navigation-bar-container { flex-wrap: wrap; } .navigation-bar-footer .navigation-bar-container:before { background: #eaedf0; content: ''; position: absolute; right: 0; bottom: -18px; left: 0; height: 90px; } .navigation-bar-footer .navigation-bar-container > .navigation-bar-group { flex: auto; } .navigation-bar-footer .navigation-bar-group.navigation-bar-group-logo { flex: none; width: 100%; display: block!important; } .dropdown-search.dropdown-search-visible .navigation-bar-dropdown-menu { background: #eaedf0; } .navigation-bar-footer .navigation-bar-item span { font-size: 14px; text-transform: uppercase; } .navigation-bar-body .navigation-bar-dropdown-menu .navigation-bar-item:hover, .navigation-bar-body .account-menu-item:hover, .navigation-bar-footer .navigation-bar-dropdown-body .navigation-bar-item:hover { background-color: #7693a3; color: #fff !important; } } @media only screen and (max-width: 1025px) and (min-width: 1024px) { .navigation-bar-label { font-size: 10px !important; } .navigation-bar-item { font-size: 10px !important; padding: 0.6rem !important; } } @media only screen and (min-width: 1200px) { .navigation-bar-item { font-size: 13px !important; padding: 0.6rem !important; } .navigation-bar-footer .navigation-bar-item span { padding: calc(20.5px - 0.5em) 0.9em; } } @media (max-width: 1199px) and (min-width: 1024px) { .navigation-bar-footer .navigation-bar-item span { padding: calc(20.5px - 0.5em) 0; } } @media only screen and (max-width:767px) { #body_home .hidden-mobile { display: none; } .serviceBox .servicebox-item { background-color: transparent; } .serviceBox .servicebox-item .diamond { display: none; } .serviceBox .servicebox-item .image { width: 100%; } .img-half-width { width: 50% !important; } .serviceBox .servicebox-item .detail { width: 100%; } .serviceBox .servicebox-item .detail.detail-big-servicebox { width: 50% !important; } .serviceBox .servicebox-item .detail .servicebox-button { font-size: 14px; } } @media only screen and (max-width: 991px) { .serviceBox .servicebox-item .detail p { font-size: 13px; } .hidden-ipad { display: none; } .serviceBox { padding-top: 0; } } h3.footer-title { font-size: 15px !important; color: #fff !important; font-weight: bold; margin-bottom: 15px; } .footer-item { font-size: 15px; } @media only screen and (max-width: 991px) { .footer-accordion { border-bottom: 1px solid #fff; padding: 8px 0 8px 0; } .footer-section { display: none; padding: 0 0 15px 0; } .footer-title:after { font-family: "kcicons"; content: "\e035"; float: right; font-size: medium; font-weight: bold; } } @media only screen and (min-width: 992px){ .footer-section { display: block !important; } .footer-title { padding-bottom: 10px; border-bottom: 1px solid #fff; } } li#tagli-goudkleur.tag-li label, #mf__tag-goudkleur+label:before { background-image : url(/media/goudkleur.jpg); background-size : cover; } li#tagli-donker-blauw.tag-li label, #mf__tag-donker-blauw+label:before { background-color : #00008b; } li#tagli-pastel-roze.tag-li label, #mf__tag-pastel-roze+label:before { background-color : #F2DCDD; } li#tagli-lila.tag-li label, #mf__tag-lila+label:before { background-color : #DCCFE9; } li#tagli-pastel-groen.tag-li label, #mf__tag-pastel-groen+label:before { background-color : #DEE7D5; } li#tagli-petrol.tag-li label, #mf__tag-petrol+label:before { background-color : #1f6679; } #tagli-oker label, #mf__tag-oker+label:before { background: #e9b146; } .wenskaarten #env-select-button { display: none !important; }