@import "//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,800italic,400,300,600,700,800"; @import "//fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"; /* ################################################## # Project ID : 20150615-614 # Reference : Geboortekaartjes 2015 # Latest update : June 30, 2015 ################################################## */ /* #Site Styles ================================================== */ /* #Font-Face ================================================== */ /* ### general ### */ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html,body { font-family: 'Open Sans',sans-serif; font-size: 13px; color: #666; -webkit-text-size-adjust: none; } input,select,textarea { font-family: 'Open Sans',sans-serif; font-size: 13px; color: #666; } body { background: #fff; } img { border: 0; display: block; } ul,li { list-style: none; } :focus { outline: none; } h1,h2,h3,h4,h5,h6, .h2, .h3 { font-weight: 400; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0; border-radius: 0; width: 100%; height: 28px; padding: 0 10px; font-size: 13px; cursor: pointer; border: 1px solid #ccc; background: #fff url(../images/arrow_select.png) no-repeat right; } select::-ms-expand { display: none; } input[type="radio"], input[type="checkbox"] { display:none; } input[type="radio"] + label span { display:inline-block; width:18px; height:18px; margin:-5px 6px 0 0; vertical-align:middle; background:url(../images/check_radio_sheet.png) left top no-repeat; cursor:pointer; } input[type="checkbox"] + label span { display:inline-block; width:18px; height:18px; margin:-5px 6px 0 0; vertical-align:middle; background:url(../images/check_radio_sheet.png) -36px top no-repeat; cursor:pointer; } input[type="radio"]:checked + label span { background:url(../images/check_radio_sheet.png) -18px top no-repeat; } input[type="checkbox"]:checked + label span { background:url(../images/check_radio_sheet.png) -54px top no-repeat; } /* ### global classes ### */ .clear { clear: both; visibility: hidden; line-height: 0; height: 0; } .center { margin: 0 auto; max-width: 1220px; position: relative; } .blue { color: #51a8f8 !important; } .grijs { color: #d3d3d3 !important; } .desktop { display: block; } .mobiel { display: none; } a { font-size: 13px; text-decoration: none; color: #51a9f9; } a:hover { text-decoration: underline; } /* ### wrapper ### */ #wrapper { position: relative; display: block; width: 100%; min-height: 100%; background-color: #fff; } /* ### main container ### */ #mainCntr { width: 100%; float: left; } /* ### header container ### */ #headerCntr { position: relative; width: 100%; height: 133px; } #headerCntr .logo { padding: 0 0 0 22px; float: left; } #headerCntr .logo img { max-width: 100%; } /* ### cookie box ### */ .cookieBox { width: 100%; position: fixed; background: #555; z-index: 20; } .cookieBox .center { color: #fff; line-height: 12px; font-size: 12px; text-align: center; padding: 5px; position: relative; } .cookieBox .message { float: left; width: 100%; } .cookieBox .link { float: left; width: 100%; padding: 5px; } .cookieBox a { color: #60bfff; font-weight: bold; } /* ### top box ### */ .topBox { height: 34px; width: 100%; overflow: hidden; background: #ffe591; } .topBox p { float: left; font-size: 12px; color: #625b3f; line-height: 34px; } .topBox p a { color: #625b3f; font-weight: 700; text-decoration: underline; } .topBox p.close { float: right; } /* ### header box ### */ .headerBox { padding: 18px 0; width: 100%; overflow: hidden; } .headerBox .holder { } .headerBox .right { float: right; width: 65%; } .headerBox .search, #mm-nav .search, #mm-filter .search { padding: 13px 0 0; width: 300px; float: left; overflow: hidden; } .headerBox .search fieldset, #mm-nav .search fieldset, #mm-filter .search fieldset { border: none; } .headerBox .search input.field, #mm-nav .search input.field, #mm-filter .search input.field { float: left; border: 1px solid #ddd; border-right: none; border-radius: 0px; padding: 5px; height: 30px; width: calc(100%-30px); color: #333; } .headerBox .search input.btn, #mm-nav .search input.btn, #mm-filter .search input.btn { width: 37px; height: 30px; float: left; border: none; cursor: pointer; display: block; text-indent: -9999px; background: url(../images/search.png) left top no-repeat; } .headerBox ul.link { padding: 13px 0 0; margin-right: -18px; list-style: none; width: auto; float: right; } .headerBox li { padding: 0 18px 0 0; float: right; } .headerBox li a { padding: 0 0 0 25px; font-family: 'pt_sans_narrowregular'; font-size: 14px; display: block; line-height: 22px; color: #666; text-decoration: none; background: url(../images/icon1.png) left center no-repeat; } .headerBox li.icon2 a { background: url(../images/icon2.png) left center no-repeat; } .headerBox li.icon3 a { background: url(../images/icon3.png) left center no-repeat; padding-left: 20px; } .headerBox li.icon4 a { color: #51a9f9; background: url(../images/icon4.png) left center no-repeat; padding-left: 28px; } .headerBox li a:hover { text-decoration: underline; } .headerBox .menu-btn { display: none; float: left; width: 45px; margin-right: 15px; margin-top: 2px; margin-left: -15px; } .headerBox .menu-btn a { text-decoration: none; color: #000; font-size: 35px; } .headerBox .winkelwagen { display: none; float: right; width: 30px; margin-left: 10px; margin-top: 3px; } .headerBox .winkelwagen a { color: #333; display: inline-block; height: 30px; width: 30px; background: url(../images/winkelwagen_btn.png) no-repeat top left; background-size: 100%; text-decoration: none; font-weight: bold; text-align: center; padding: 2px 15px 0px 0px; font-size: 10px; } .headerBox .winkelwagen:active { color: #666; } .headerBox .klantenservice { display: none; float: right; width: 30px; margin-left: 10px; margin-top: 5px; } .headerBox .menu-btn a[href="#page"] { display: none; } m-burger { width: 30px; height: 30px; --mb-bar-height: 2px; --mb-bar-width: 0.5; color: #000; } /* ### menu box ### */ #headerCntr .menuBox { width: 100%; /*overflow: hidden;*/ height: 45px; position: relative; background: #f4f2f2; } #headerCntr .menu { width: 100%; } #headerCntr .menu ul { list-style: none; } #headerCntr .menu li { padding: 0 10px 0 10px; float: left; } #headerCntr .menu li a { font-family: 'pt_sans_narrowregular'; font-size: 18px; color: #666; text-decoration: none; line-height: 45px; } #headerCntr .menu li a:hover { text-decoration: underline; } #headerCntr .menu li.right { float: right; } #headerCntr .menu li.right a { font-size: 16px; } #headerCntr .menu li.home a { line-height: 45px; width: 30px; display: block; text-indent: -99999px; background: url(../images/home.png) left center no-repeat; } #headerCntr .menu .hidden { display: none; } #headerCntr .menu #geboortekaartjes { background: url('../images/geboortekaartjes.png') no-repeat top left; width: 151px; margin-top:-5px; height:50px; padding-top:4px; text-align:center; margin-right: 10px; } #headerCntr .menu #geboortekaartjes a { color:#fff; font-weight:bold; font-size:21px; } #headerCntr .mobileMenu { display: none; } #contentCntr .mobileFilter { position: fixed; width: 50px; height: 50px; background-color: #ffb400; color: #fff; transform: rotate(90deg); left: 0px; top: 50%; z-index: 100; font-size: 35px; text-align: center; line-height: 45px; } #contentCntr .mobileFilter, #filter { display: none; } .mm-panel .sub-item { background-color: #fff; border-radius: 12px; padding: 3px 7px; color: #868686; text-decoration: none; float: left; margin-right: 5px; margin-bottom: 5px; } /* ### slider box ### */ .sliderBox, .sliderBoxTWA { width: 100%; overflow: hidden; position: relative; padding-bottom: 40px; } .sliderBoxTWA { margin-top: 20px; } .sliderBox ul, .sliderBoxTWA ul { list-style: none; } .sliderBox li, .sliderBoxTWA li { overflow: hidden; position: relative; opacity: 0.25; } .slick-center { opacity: 1 !important; } .sliderBox li .slider, .sliderBoxTWA li .slider { position: absolute; left: 0; top: 0; width: 100%; } .sliderBox li .detail, .sliderBoxTWA li .detail { padding: 0 30px; width: 50%; overflow: hidden; } .sliderBox li .detail h2 { padding: 25px 0 0; font-family: 'janda_safe_and_sound_solidRg'; font-size: 23px; color: #9dc215; } .sliderBox li .detail h2.title2 { padding: 37px 0 0; font-size: 32px; color: #495665; font-family: 'dk_pundakregular'; font-weight: 700; } .sliderBox li .detail h2.title3 { padding: 15px 0 0; font-size: 32px; color: #ded8cf; font-family: 'dk_pundakregular'; font-weight: 700; } .sliderBox li .detail h3 { padding: 15px 0 0; font-family: 'janda_safe_and_sound_solidRg'; font-size: 22px; color: #9dc215; } .sliderBox li .detail p.text { width: 100%; padding: 30px 0 37px; font-family: 'Open Sans',sans-serif; font-size: 18px; color: #495665; line-height: 28px; } .sliderBox li .detail p.text3 { width: 100%; padding: 14px 0; font-family: 'Open Sans',sans-serif; font-size: 18px; color: #ccc7c0; line-height: 28px; } .sliderBox li .detail p { width: 80%; padding: 10px 0 17px; font-family: 'beautiful_every_timeregular'; font-size: 18px; line-height: 28px; color: #676774; } .sliderBox li .detail a { width: 233px; height: 54px; line-height: 54px; text-align: center; display: block; float: left; font-family: 'beautiful_every_timeregular'; font-size: 21px; color: #fff; text-decoration: none; background: url(../images/btnBg.png) left top no-repeat; } .sliderBox li .detail a:hover { background: url(../images/btnBg_hover.png) left top no-repeat; } .sliderBox .slick-next { z-index: 999; width: 55px; height: 55px; position: absolute; right: 50%; top: 50%; text-indent: -9999px; margin: -28px -600px 0 0; border: none; cursor: pointer; background: url(../images/next.png) left top no-repeat; display: none !important; } .sliderBox .slick-prev { z-index: 999; width: 55px; height: 55px; position: absolute; left: 50%; top: 50%; margin: -28px 0 0 -600px; text-indent: -9999px; border: none; background: url(../images/prev.png) left top no-repeat; display: none !important; } .sliderBoxTWA .slick-next { z-index: 999; width: 55px; height: 55px; position: absolute; right: 50%; top: 50%; text-indent: -9999px; margin: -28px -450px 0 0; border: none; cursor: pointer; background: url(../images/next.png) left top no-repeat; } .sliderBoxTWA .slick-prev { z-index: 999; width: 55px; height: 55px; position: absolute; left: 50%; top: 50%; margin: -28px 0 0 -450px; text-indent: -9999px; border: none; background: url(../images/prev.png) left top no-repeat; } .slick-dots { text-align: center; width: 100%; position: absolute; bottom: -30px; left: 0; } .sliderBox .slick-dots { display: none !important; } .slick-dots li { display: inline-block; opacity: 1!important; } .slick-dots li a { margin: 3px; width: 14px; height: 14px; display: inline-block; cursor: pointer; -webkit-border-radius: 100%; border-radius: 100%; text-indent: -9999px; background: #c5c5c5; } .slick-dots li.slick-active a { background: #60bfff; } .slick-slide img { width: 100%!important; } .sliderBox:hover .slick-next,.sliderBox:hover .slick-prev, .sliderBoxTWA:hover .slick-next, .sliderBoxTWA:hover .slick-prev { display: block!important; } .sliderBox:hover .slick-dots, .sliderBoxTWA:hover .slick-dots { display: block!important; } .slick-dots-cards { text-align: center; width: 100%; position: absolute; bottom: -15px; left: 0; } .slick-dots-cards li { float: none !important; position: relative; display: inline-block; opacity: 1 !important; width: 10px !important; height: 10px !important; padding: 0px !important; margin: 0 3px; } .slick-dots-cards li a { margin: 3px; width: 10px !important; height: 10px !important; display: inline-block !important; cursor: pointer; -webkit-border-radius: 100%; border-radius: 100%; text-indent: -9999px; background: #d5d5d5; border: none !important; } .slick-dots-cards li.slick-active a { background: #757575; } #home-naardekaarten { display: none; margin: 0; background: none; margin-bottom: 10px; } #home-naardekaarten a { margin: 0; width: 100%; } #home-naardekaarten .proefdruk { font-family: 'PT Sans',sans-serif; text-transform: uppercase; width: 96%; margin-left: 2%; margin-right: 2%; text-align: left; display: inline-block; background: #ffbb32 url('../images/pijlen.png') no-repeat center right 20px; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 4.4vw; padding: 12px 24px; background-size: 20px; letter-spacing: 2px; } /* ### content container ### */ #contentCntr { padding: 0px 0 50px; float: left; width: 100%; min-height: 750px; position: relative; z-index: 1; box-shadow: 0px 4px 10px rgba(100,100,100,0.3); } /* ### left container ### */ #leftCntr { padding: 0 25px 0 0; float: left; width: 247px; } /* ### video player ### */ .video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; } /* ### category box ### */ .categoryBox { padding: 10px 0 0 15px; width: 100%; } .categoryBox .h2 { padding: 0 0 16px; font-family: 'beautiful_every_timeregular'; font-size: 20px; color: #fd4e6b; } .categoryBox .h2.green { color: #9dc215; } .categoryBox ul { padding: 0 0 30px; list-style: none; } .categoryBox li { line-height: 23px; } .categoryBox li a { font-family: 'Open Sans',sans-serif; font-size: 13px; color: #333; line-height: 23px; text-decoration: none; } .categoryBox li a:hover { text-decoration: underline; } /* ### form box ### */ .formBox { padding: 10px 8px 0; width: 100%; overflow: hidden; background: url(../images/stylebg.png) left top no-repeat; background-size: cover; } .formBox fieldset { border: none; } .formBox .row { padding: 0 0 15px; overflow: hidden; } .formBox label { font-family: 'beautiful_every_timeregular'; font-size: 20px; color: #666; display: block; padding: 0 0 5px; } /* ### gift box ### */ .giftBox { margin: 25px 0 0; padding: 16px 13px; width: 222px; height: 90px; background: url(../images/jarbg.png) left top no-repeat; } .giftBox .image { padding: 0 9px 0 0; float: left; } .giftBox .detail { overflow: hidden; } .giftBox .detail strong { font-size: 16px; } .giftBox .detail p { font-size: 14px; line-height: 18px; } #startIntro2 { display: none; } #categoryStart2 { display: none; } #formBox2 { display: none; } button.betalen { cursor: pointer; font-family: 'PT Sans',sans-serif; text-align: center; display: inline-block; background-color: #9dc215; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 24px; padding: 20px 40px; line-height: 16px; } /* ### center container ### */ #centerCntr { float: left; width: 340px; } /* ### contact box ### */ .contactBox { width: 100%; overflow: hidden; } .contactBox h3 { padding: 0 0 16px; font-family: 'beautiful_every_timeregular'; font-size: 20px; color: #fd4e6b; } .contactBox h3.green { color: #9dc215; } .contactBox ul { margin-right: -26px; list-style: none; } .contactBox li { padding: 0 26px 0 0; margin-bottom: 25px; width: 25%; float: left; font-size: 13px; color: #666;} .contactBox li .inner { padding: 25px; overflow: hidden; background: url(../images/bg3.png) left top no-repeat; background-size: 100%; } .contactBox li a { width: 100%; max-width: 233px; height: 54px; line-height: 54px; text-align: center; display: block; float: left; font-family: 'beautiful_every_timeregular'; font-size: 21px; color: #fff; text-decoration: none; background: url(../images/btnBg.png) left top no-repeat; } .contactBox li a:hover { background: url(../images/btnBg_hover.png) left top no-repeat; } .fancybox-inner h2 { padding: 0 0 16px; font-family: 'beautiful_every_timeregular'; font-size: 24px; color: #9dc215; font-weight: bold; } /* ### kwijt box ### */ .kwijtBox { width: 100%; overflow: hidden; margin-bottom: 25px; } .kwijtBox h2 { padding: 0 0 8px; font-family: 'beautiful_every_timeregular'; font-size: 20px; color: #fd4e6b; } .kwijtBox h3 { float: left; width: 100%; padding: 8px 0; color: #333; font-family: "Open Sans",sans-serif; font-size: 14px; font-weight: 700; } .kwijtBox ul { margin-right: -26px; list-style: none; } .kwijtBox li { padding: 0 26px 0 0; margin-bottom: 25px; width: 33.3%; float: left; font-size: 13px; color: #666;} .kwijtBox input.field { border: 1px solid #ddd; float: left; height: 30px; overflow: hidden; padding: 4px 5px; width: 100%; } .kwijtBox textarea { float: left; width: 100%; border: 1px solid #ddd; padding: 4px 5px; } .kwijtBox img { float: left; height: 30px; } .kwijtBox .controleInput { width: 50% !important; margin-left: 10px; } .kwijtBox a.submit { width: 100%; margin-top: 10px; max-width: 233px; height: 54px; line-height: 54px; text-align: center; display: block; float: left; font-family: 'beautiful_every_timeregular'; font-size: 21px; color: #fff; text-decoration: none; background: url(../images/btnBg.png) left top no-repeat; } .kwijtBox a.submit:hover { background: url(../images/btnBg_hover.png) left top no-repeat; text-decoration: none; } .kwijtBox li a { font-family: 'Open Sans',sans-serif; padding: 0 20px 0 0; font-size: 13px; color: #51a9f9; font-weight: bold; text-decoration: none; display: inline-block; background: url(../images/arrow.png) right 2px no-repeat; } .kwijtBox li a span { color: #333; } .kwijtBox li a:hover { text-decoration: underline; } .terugBox, .terugBoxSmall { float: left; width: 100%; height: 40px; margin-bottom: 20px; padding-top: 10px; } .terugBox .left, .terugBoxSmall .left { width: 40%; float: left; height: 40px; } .terugBox .left a, .terugBoxSmall .left a { width: 133px; float: left; line-height: 40px; font-weight: normal !important; font-family: 'beautiful_every_timeregular'; font-size: 21px !important; color: #fff !important; text-decoration: none; background: url(../images/terugBtn.png) left top no-repeat; padding-left: 65px; } .terugBox .right { width: 60%; float: right; text-align: right; height: 40px; } .terugBox span { font-size: 24px; color: #54606e; font-weight: bold; padding: 0 15px; } .terugBox .right a.vorige { padding-left: 38px; line-height: 40px; font-family: 'beautiful_every_timeregular'; font-size: 21px; color: #d6d6d6; text-decoration: none; background: url(../images/vorigeBtn.png) left top no-repeat; } .terugBox .right a.volgende { padding-right: 38px; line-height: 40px; font-family: 'beautiful_every_timeregular'; font-size: 21px; color: #d6d6d6; text-decoration: none; background: url(../images/volgendeBtn.png) right top no-repeat; } .terugBox .right a.vorige:hover, .terugBox .right a.volgende:hover { color: #d0d0d0; } #kaartImageBox { width: 40%; padding-right: 50px; float: left; text-align: center; } #gekozenKaartje { color: #bbbbbb; margin-bottom: 5px; font-size: 18px; font-family: 'beautiful_every_timeregular'; } .kaartImage { position: relative; } .kaartExtraImage { width: 100%; margin-top: 20px; text-align: left; float: left; } .kaartExtraImage p { width: 30%; float: left; margin-right: 10px; } .kaartExtraImage img { width: 100%; } .kaartImageDetails { width: 100%; text-align: left; margin-top: 20px; } .kaartImageDetails h2 { color: #333; font-weight: 700; } #kaartImageBox .extraInfoPane { width: 100%; display: inline-block; margin-top: 20px; padding-bottom: 15px; font-size: 14px; color: #666; line-height: 24px; } .kaartGekoppeld { width: 100%; margin-top: 20px; text-align: left; float: left; border: 1px dashed #ddd; border-radius: 10px; padding: 20px; margin-bottom: 30px; } .kaartGekoppeld h2 { font-family: 'PT Sans',sans-serif; text-transform: uppercase; color: #333; font-weight: bold; line-height: 45px; } .kaartGekoppeldImage { width: 40%; float: left; margin-bottom: 20px; } .kaartGekoppeldImage img { width: 100%; } .kaartGekoppeldInfo { width: 60%; float: left; padding-left: 20px; margin-bottom: 20px; } .kaartGekoppeldInfo h3 { font-family: 'PT Sans',sans-serif; text-decoration: none; font-weight: bold; color: #5fc2fd; line-height: 27px; margin-bottom: 5px; } .kaartGekoppeldInfo span { color: #9dc115; font-size: 20px; font-weight: bold; } .kaartGekoppeldInfo a.berekenen { margin-top: 10px; font-family: 'PT Sans',sans-serif; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 18px; padding: 7px 20px; line-height: 16px; } .kaartDetailsRegel { width: 100%; margin-top: 10px; font-size: 14px; float: left; } .kaartDetailsRegel .links { width: 30%; float: left; } .kaartDetailsRegel .rechts { width: 70%; float: left; } .fancybox, .fancybox2 { display: inline-block; } #kaart3d { max-width: 435px; width: 100%; } #zoom-btn { position: absolute; bottom: 6px; left: 4px; width:51px; height: 47px; } #p360-btn { position: absolute; bottom: 6px; left: 4px; width:51px; height: 47px; } #kaartDetailBox { float: left; width: 60%; } #kaartDetailBox .kaartDetails { width: 100%; float: left; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 25px; -moz-box-shadow: 0px 0px 7px 1px #bbb; -webkit-box-shadow: 0px 0px 7px 1px #bbb; box-shadow: 0px 0px 7px 1px #bbb; } #kaartDetailBox .kaartDetails h1 { font-weight: bold; color: #333; margin-top: 20px; margin-left: 20px; } #kaartDetailBox .kaartDetails h3 { margin-top: 10px; color: #333; margin-bottom: 10px; margin-left: 20px; } #uniekeService { display: block; position: absolute; background: url(../images/pijl.png) no-repeat left 10px; width: 140px; padding-left: 224px; height: 59px; left: 33%; margin-top: -15px; pointer-events: none; } #getPrijsWrapper #speerpunten { float: left; width: 100%; margin: 20px 0px; } #getPrijsWrapper #speerpunten .left { float: left; width: 45%; background-color: #f9f9f9; padding: 10px; } #getPrijsWrapper #speerpunten .right { float: left; width: 55%; background-color: #f9f9f9; padding: 10px; } .detailRegel { width: 91%; margin-top: 10px; margin-left: 20px; margin-right: 20px; font-size: 13px; float: left; } .detailLinks { width: 25%; float: left; color: #666; } .detailRechts { width: 75%; float: left; color: #666; } .detailRechts ul li { float: left; margin-right: 15px; } .detailRechts ul li a { text-decoration: none; background: url(../images/questionMark.png) no-repeat top right; padding-right: 25px; color: #666; } .detailRechts span { font-size: 24px; font-weight: bold; color: #9dc115; } .detailRechts a.berekenen { font-family: 'PT Sans',sans-serif; text-align: center; display: inline-block; background-color: #d6d6d6; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 18px; padding: 7px 20px; line-height: 16px; } .detailRechts a.berekenen:hover { background-color: #d0d0d0; } .detailButtons { width: 100%; float: left; } #detailButtonsMobile { margin: 0px !important; display: none; padding-bottom: 15px; } .detailButtons .modelkaart { float:left; font-family: 'PT Sans',sans-serif; width: 48%; margin-right: 2%; text-align: left; display: inline-block; background: #5fc2fd url('../images/icon-profielknop-blauw.png') no-repeat 20px 10px; text-shadow: 1px 1px #4c98ca; border-radius: 10px; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 22px; padding: 10px 40px 10px 60px; line-height: 20px; } .detailButtons .modelkaart:hover { background-color: #52b3ec; } .detailButtons .bestellen { float:left; font-family: 'PT Sans',sans-serif; width: 48%; margin-left: 2%; text-align: left; display: inline-block; background: #9dc115 url('../images/icon-profielknop-groen.png') no-repeat 20px 10px; text-shadow: 1px 1px #828c57; border-radius: 10px; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 22px; padding: 10px 40px 10px 60px; line-height: 20px; } .detailButtons .bestellen:hover { background-color: #8eaf13; } .detailButtons .bestellen span, .detailButtons .modelkaart span { font-size: 14px; text-shadow: none; } .detailButtons .proefdruk { margin-left: 0%; margin-right: 0%; } .detailButtons form { display: inline-block; width: 46.5%; } .detailButtons form .bestellen { width: 100%; } .detailSubButtons { width: 100%; float: left; margin-bottom: 30px; font-size: 15px; } #detailSubButtonsMobile { display: none; } .detailSubButtons .favorieten { float: left; width: 45%; margin-left: 3%; margin-right: 2%; text-align: center; display: inline-block; margin-top: 15px; } .detailSubButtons .favorieten.w100 { width: 94%; } .detailSubButtons .favorieten a { width: 100%; font-family: 'PT Sans',sans-serif; -moz-box-shadow: 0px 2px 4px 0px #dbdbdb; -webkit-box-shadow: 0px 2px 4px 0px #dbdbdb; box-shadow: 0px 2px 4px 0px #dbdbdb; background: #f8f8f8 url('../images/toevoegen-aan-favorieten-knop.png') no-repeat 20px 10px; padding-left: 32px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; display:inline-block; cursor:pointer; color:#a4a4a4; font-size:20px; padding:10px 40px 10px 60px; text-decoration:none; text-shadow:0px 1px 0px #ffffff; } .detailSubButtons .favorieten a:hover { background-color: #f2f2f2; } .detailSubButtons .delen { float: left; width: 45%; margin-left: 2%; margin-right: 3%; text-align: center; display: inline-block; margin-top: 15px; } .detailSubButtons .delen a { width: 100%; font-family: 'PT Sans',sans-serif; -moz-box-shadow: 0px 2px 4px 0px #dbdbdb; -webkit-box-shadow: 0px 2px 4px 0px #dbdbdb; box-shadow: 0px 2px 4px 0px #dbdbdb; background: #f8f8f8 url('../images/email-een-vriend-knop.png') no-repeat 20px 10px; padding-left: 32px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; display:inline-block; cursor:pointer; color:#a4a4a4; font-size:20px; padding:10px 40px 10px 60px; text-decoration:none; text-shadow:0px 1px 0px #ffffff; } .detailSubButtons .delen a:hover { background-color: #f2f2f2; } #mailInfoPopup, #prijs-berekenen { display: none; } .mail-info-links { width: 33%; position: relative; float: left; margin-right: 20px; } .mail-info-links img { width: 100%; } .mail-info-rechts { width: calc(67% - 20px); position: relative; float: left;} .mail-info-rechts h2 { font-family: 'Open Sans',sans-serif; font-size: 25px; color: #51a9f9; font-weight: 700; margin-top: 10px; } .mail-info-rechts h2 span { color: #ff0000; font-weight: bold; font-size: 14px; } .extraInformatie { width: 100%; float: left; margin-bottom: 25px; } .extraInformatie a { text-decoration: none; color: #51a9f9; } .extraInformatie h3 { font-family: 'PT Sans',sans-serif; text-transform: uppercase; color: #333; font-weight: bold; background: url(../images/extraInfoDown.png) no-repeat center right; border-top: 1px dashed #ddd; line-height: 45px; } .extraInformatie .active h3 { font-family: 'PT Sans',sans-serif; background: url(../images/extraInfoUp.png) no-repeat center right; } .extraInformatie:last-child { border-bottom: 1px dashed #ddd; } .extraInformatie .extraInfoPane { width: 100%; display: inline-block; padding-bottom: 15px; font-size: 14px; color: #666; line-height: 24px; } .extraInformatie .extraInfoPane .speerpunten { margin-left: 20px; margin-top: 10px; } .extraInformatie .extraInfoPane .speerpunten li { float: left; width: 50%; background: url(../images/infoPaneCheck.png) no-repeat top left; padding-left: 32px; line-height: 24px; margin-bottom: 12px; } .extraInformatie .extraInfoPane img { float: left; padding-right: 20px; margin-left: 20px; } .extraInformatie .extraInfoPane span { font-size: 24px; font-weight: bold; color: #9dc115; } .extraInformatie .extraInfoPane .extraInfoPaneBlok { width: 100%; display: inline-block; border-bottom: 1px dashed #ddd; padding-top: 15px; padding-bottom: 15px; } .extraInformatie .extraInfoPane .extraInfoPaneBlok:last-child { border-bottom: none; } .extraInformatie .extraInfoPane #laatst_bekeken { margin-right: -20px; } .extraInformatie .extraInfoPane #laatst_bekeken li { width: 25%; float: left; padding: 20px 20px 0 0; text-align: center; } .extraInformatie .extraInfoPane #laatst_bekeken li img { width: 100%; } .extraInformatie .extraInfoPane #laatst_bekeken li .fav { margin-top: 8px; display: inline-block; text-decoration: none; background: url(../images/favAdd.png) no-repeat top left; padding-left: 20px; font-weight: bold; color: #5fc2fd; line-height: 15px; } /* ### titel box ### */ .titelBox { width: 100%; overflox: hidden; } .titelBox h1 { font-family: 'Open Sans',sans-serif; font-size: 25px; color: #51a9f9; font-weight: 700; margin-top: 10px; } .titelBox p { font-size: 14px; } .titelBox p a { background: url(../images/linkArrow.png) no-repeat center right; padding-right: 13px; line-height: 15px; font-weight: bold; text-decoration: none; color: #51a9f9; } #inloggenBox { float: left; width: 60%; } #inloggenBox .content { float: left; border: 1px dashed #ddd; border-radius: 10px; margin-bottom: 35px; width: 100%; } #inloggenBox .content h2 { margin-top: 10px; color: #333; margin-bottom: 10px; margin-left: 20px; font-weight: 700; } #inloggenBox .content h2 span { color: #ff0000; font-weight: bold; font-size: 14px; } #inloggenBox .content h3 { margin-top: 10px; color: #333; margin-bottom: 10px; margin-left: 20px; } #inloggenBox .content.opmaken { margin-bottom: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom: 0px; } .inloggenRegel { width: 91%; margin-top: 10px; margin-left: 20px; margin-right: 20px; font-size: 13px; float: left; } #accountQR .inloggenRegel { width: calc(100% - 20px) !important; } .inloggenRegel img { display: inline-block; } .inloggenLinks { width: 35%; float: left; color: #666; margin-top: 5px; } #accountQR .inloggenLinks { width: 20% !important; } .inloggenRegel span { color: #ff0000; font-weight: bold; } .inloggenRechts { width: 65%; float: left; color: #666; } #accountQR .inloggenRechts { width: 80% !important; } .inloggenRechts.noinput { margin-top: 5px; } .inloggenRechts input, .inloggenRechts textarea { border: 1px solid #ddd; float: left; height: 30px; overflow: hidden; padding: 4px 5px; width: 100%; } .inloggenRechts input[type="file"] { border: none; margin-bottom: 5px; } .inloggenRechts a { font-family: 'Open Sans',sans-serif; color: #51a9f9; text-decoration: none; } .inloggenMidden { width: 30%; float: left; color: #666; } .inloggenMidden input { border: 1px solid #ddd; float: left; height: 30px; overflow: hidden; padding: 4px 5px; width: 100%; } .inloggenRechts2 { width: 35%; float: left; color: #666; } .inloggenRechts2 input { border: 1px solid #ddd; float: left; height: 30px; overflow: hidden; padding: 4px 5px; width: 100%; } .inloggenButtons { width: 100%; float: left; background-color: #f4f2f3; margin-top: 20px; margin-bottom: 15px; } .inloggenButtons .registreren, .inloggenButtons .opslaanActie { font-family: 'PT Sans',sans-serif; margin-left: 35%; margin-right: 1%; margin-top: 14px; margin-bottom: 14px; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 20px; } #kaart-opmaken-buttons2 .registreren { font-family: 'PT Sans',sans-serif; float: right; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 20px; } .inloggenButtons .kwijt { width: 35%; margin-top: 25px; padding-left: 20px; float: left; } .inloggenButtons .kwijt a, .inloggenButtons .wijzig a, .inloggenRechts2 a { font-family: 'PT Sans',sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #51a9f9; } .inloggenButtons .kwijt img { display: inline-block; } .inloggenButtons .wijzig { width: 35%; margin-top: 25px; padding-left: 20px; float: left; } .inloggenButtons .aanvragen, .inloggenButtons .inloggen { font-family: 'PT Sans',sans-serif; margin-right: 1%; margin-top: 14px; margin-bottom: 14px; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 20px; } .inloggenRegel .totaal-prijs { font-size: 24px; font-weight: bold; color: #9dc115; } .inloggenRegel .bereken-prijs-zwart { font-size: 16px; font-weight: bold; color: #666; margin-top: 3px; } .inloggenRegel .bereken-prijs-groen { font-size: 16px; font-weight: bold; color: #9dc115; margin-top: 3px; } #lieverBellen { float: left; width: 100%; } #lieverBellen span { font-family: 'beautiful_every_timeregular'; font-size: 20px; color: #fd4e6b; } .errorTooltip { font-size: 12px; font-weight: normal !important; } #getPrijsWrapper { float: left; width: 100%; } #getPrijsUSP { float: left; width: 100%; } #getPrijsUSP div { float: left; padding: 15px 7px; } /*#getPrijsUSP div:last-child { padding-right: 0px; }*/ #getPrijsUSP img { width: 100%; } #getPrijsWrapper .inloggenLinks { width: 35%;} #getPrijsWrapper .inloggenRechts { width: 65%; } /* USP */ .inloggenRegel.usp { width: 100% !important; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; } .inloggenRegel.usp h2 { margin-left: 0px !important; font-weight: bold; color: #51a9f9; margin-bottom: 20px; } .inloggenRegel.usp.account, .inloggenRegel.usp.opmaak { margin-left: 0px; width: 100% !important; margin-right: 0px !important; margin-bottom: 30px; } .inloggenRegel .speerpunten { margin-top: 10px; } .inloggenRegel .speerpunten li { float: left; font-size: 13px; width: 100%; background: url(../images/infoPaneCheck.png) no-repeat left top; padding-left: 32px; line-height: 24px; margin-bottom: 12px; } .inloggenRegel.usp.opmaak .speerpunten { float: left; width: 38%; } .inloggenRegel.usp.opmaak .speerpunten li { height: 40px; width: 100% !important; background: url(../images/infoPaneCheck.png) no-repeat left 12px; } .inloggenRegel.usp.opmaak .speerpuntenImage { float: left; width: 24%; text-align: center; } .klantDetailsRegel { width: 91%; margin-top: 10px; font-size: 14px; float: left; margin-left: 20px; } .klantDetailsRegel p { margin-top: 10px; width: 100%; float: left; } .klantDetailsRegel .links { width: 25%; float: left; color: #666; } .klantDetailsRegel .rechts { width: 75%; float: left; color: #666; } #content100Box { margin-top: 20px; } #content100Box .content { border: 1px dashed #ddd; border-radius: 10px; margin-bottom: 35px; width: 100%; } #content100Box .content .betaalMethodes { padding: 20px; } .betaalMethode { width: 100%; margin-bottom: 10px; } #content100Box .content .inloggenButtons { float: none; padding-left: 20px; } #inloggenLinks { width: 49%; margin-right: 2%; float: left; padding-top: 10px; } #inloggenRechts { width: 49%; overflow: hidden; padding-top: 10px; } #inloggenLinks .content, #inloggenRechts .content, #accountKlantgegevens { border: 1px dashed #ddd; border-radius: 10px; margin-bottom: 35px; width: 100%; float: left; } #inloggenLinks .content h2, #inloggenRechts .content h2, #accountKlantgegevens h2 { margin-top: 10px; color: #333; margin-bottom: 10px; margin-left: 20px; font-weight: 700; } #inloggenLinks .content h2 span, #inloggenRechts .content h2 span, #accountKlantgegevens h2 span { color: #ff0000; font-weight: bold; font-size: 14px; } #inloggenRechts .content p, #accountKlantgegevens p { margin: 0 20px; } /* ###alert box ### */ .alertBox { width: 100%; margin-top: 20px; margin-bottom: 10px; border-radius: 7px; border: 1px solid; padding: 20px; } /*.alertBox ul { padding-left: 15px; }*/ .alertBox li { padding-left: 25px; } .alertBox.error { color: #333; border-color: #ff0000; background: #ffd1d1 url(../images/alertIconError.png) no-repeat 18px 18px; } .alertBox.error a { color: #ff0000; font-weight: bold; } .alertBox.succes { color: #333; border-color: #d6e9c6; background: #dff0d8 url(../images/alertIconSucces.png) no-repeat 18px 18px; } .alertBox.succes a { color: #3c763d; font-weight: bold; } .alertBox.warning { color: #333; border-color: #fcb53f; background: #fff4e2 url(../images/alertIconWarning.png) no-repeat 18px 18px; } .alertBox.warning a { color: #fcb53f; font-weight: bold; } .alertBox.info { color: #333; border-color: #60bfff; background: #d5efff url(../images/alertIconInfo.png) no-repeat 18px 18px; } .alertBox.info a { color: #60bfff; font-weight: bold; } .alertBox button, .statusBox button, #geboorte_doorgeven { font-family: 'PT Sans',sans-serif; margin-right: 1%; text-align: center; display: inline-block; border: 0px; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 16px; padding: 4px 10px; cursor: pointer; } .alertBox button.info, .alertBox.info button, .statusBox button.info, .statusBox.info button { background-color: #60bfff; } .alertBox button.warning, .alertBox.warning button, .statusBox button.warning, .statusBox.warning button, #geboorte_doorgeven { background-color: #fcb53f; } .alertBox button.error, .alertBox.error button, .statusBox button.error, .statusBox.error button { background-color: #ff0000; } .alertBox button.succes, .alertBox.succes button, .statusBox button.succes, .statusBox.succes button { background-color: #3c763d; } .statusBox .speerpunten { margin-top: 10px; } .statusBox .speerpunten li { float: left; width: 100%; background: url(../images/arrow.png) no-repeat top left; padding-left: 24px; line-height: 16px; margin-bottom: 12px; font-weight: bold; } /* ### handig box ### */ #navBox { width: 22%; margin-right: 3%; float: left; padding: 10px; border: 1px dashed #ddd; border-radius: 10px; margin-top: 10px; } #navBox li { width: 100%; background: #f4f3f3; cursor: pointer; margin-bottom: 7px; } #navBox li a { padding: 0 0 0 14px; line-height: 37px; font-size: 16px; color: #666; text-decoration: none; } #navBox li:hover, #navBox li.current { background: #51a9f9; } #navBox li:hover a, #navBox li.current a { color: #fff; } #navBox li a:hover, #navBox li.current a { color: #fff; } #handigBox { width: 75%; float: left; } #handigBox img { max-width: 100% !important; height: auto; } #handigBox h1 { font-family: 'Open Sans',sans-serif; font-size: 25px; color: #51a9f9; font-weight: 700; margin-top: 10px; } #handigBox h2 { font-family: 'Open Sans',sans-serif; font-size: 20px; color: #9dc215; font-weight: bold; } #handigBox p { padding: 10px 0 10px; font-family: 'Open Sans',sans-serif; font-size: 13px; line-height: 21px; color: #666; } #handigBox .handig-list { line-height: 24px; } #handigBox .handig-list li { background: url(../images/arrow_2.png) no-repeat 0px 5px; padding-left: 20px; } #handigBox .klantbeoordeling { width: 100%; border-bottom: 1px dashed #ddd; margin-top: 15px; padding-bottom: 10px; } .klantbeoordeling .stars { background: url(../images/ekomiStarsBg.png) top left no-repeat; height: 28px; width: 100%; float: left; z-index: 1; margin-bottom: 10px; } .klantbeoordeling .stars .overlay { background: url(../images/ekomiStarsOverlay.png) top left no-repeat; height: 28px; float: left; z-index: 2; } .imgRight { float: right; margin-left: 20px; } #handigBox a { font-size: 13px; text-decoration: none; font-weight: bold; color: #51a9f9; } #handigBox a:hover { text-decoration: underline; } #handigBox h3, #handigBox .h3 { font-size: 15px; margin-top: 10px; color: #333; margin-bottom: 10px; font-weight: 700; } #handigBox .d100 { float: left; width: 100%; } #handigBox .d100 ul { padding-left: 20px; } #handigBox .d100 li { list-style: disc outside none !important; } #handigBox .d100.center { text-align: center; } #handigBox .d100.center img { display: inline; } #handigBox #proefdruk_bedankt h2 { color: #222; text-transform: uppercase; margin-top: 20px; font-size: 28px; } #handigBox #proefdruk_bedankt h3 { color: #222; font-weight: normal; text-transform: uppercase; font-size: 22px; margin-top: 0px; } #handigBox #proefdruk_bedankt hr { width: 50%; display: inline-block; color: #222; margin-top: 30px; } #handigBox #proefdruk_bedankt .social img{ width: 77px !important; } #handigBox .borderbottom { border-bottom: 1px dashed #ddd; } #handigBox .alignr { text-align: right; } #handigBox .d33 { float: left; width: 33%; } #handigBox .d33 ul { margin-bottom: 20px; } #handigBox .green { color: #9dc215 !important; } #handigBox .blue, .inloggenRegel .blue { color: #51a8f8 !important; } #handigBox .pink { color: #fd4e6b !important; } #handigBox .d50 { float: left; width: 50%; box-sizing: border-box; } #handigBox .d25 { float: left; width: 25%; box-sizing: border-box; } #handigBox .padding { padding: 15px; } #handigBox .partners { font-size: 13px; line-height: 17px; } #handigBox .partners.right { float: right; } #handigBox .partners h2 { color: #666; margin-bottom: 5px; } #handigBox .partners a { font-weight: normal; } #handigBox .marginright { margin-right: 2% !important; } #handigBox .marginleft { margin-left: 2% !important; } #handigBox .d50.margin.alignr a { display: inline-block !important; color: #fff !important; width: 148px; height: 33px; text-decoration: none !important; text-align: left; padding-left: 10px; padding-top: 7px; margin-top: 5px; } #handigBox .d50.margin.alignr a.blue { background: url(../images/geboorte-teksten/teksten-index-btn-top-blue.png) no-repeat top left; } #handigBox .d50.margin.alignr a.green { background: url(../images/geboorte-teksten/teksten-index-btn-top-green.png) no-repeat top left; } #handigBox .d50.margin.alignr a.pink { background: url(../images/geboorte-teksten/teksten-index-btn-top-pink.png) no-repeat top left; } #handigBox .d50.margin.alignr a.grijs { background: url(../images/geboorte-teksten/teksten-index-btn-top-grijs.png) no-repeat top left; } #handigBox .d50 .card-blue li, #handigBox .d50 .card-green li, #handigBox .d50 .card-pink li { border-radius: 8px; margin-bottom: 16px !important; padding: 12px !important; } #handigBox .d50 .card-green li { background-color: #fafafa !important; border: 1px solid #ededed; } #handigBox .d50 .card-blue li { background-color: #fafafa !important; border: 1px solid #ededed; } #handigBox .d50 .card-pink li { background-color: #fafafa !important; border: 1px solid #ededed; } #handigBox .d50 .card-blue li.extra, #handigBox .d50 .card-green li.extra, #handigBox .d50 .card-pink li.extra { height: 70px; background-color: #ffa200 !important; border: none; color: #fff; font-family: 'pt_sans_narrowregular'; font-size: 20px; background: url('../images/duimpje.png') no-repeat center left 10px; padding-left: 75px !important; } #handigBox .d100.extra_groot { width: 96% !important; border-radius: 8px; padding: 8px; background-color: #ffa200 !important; border: none; color: #fff; font-family: 'pt_sans_narrowregular'; font-size: 20px; background: url('../images/info-icon.png') no-repeat center left 10px; padding-left: 50px !important; padding-bottom: 4px; } #handigBox .margin { margin-top: 10px; margin-bottom: 10px; } #handigBox .shadow { box-shadow: 0px 0px 8px rgba(100,100,100,0.2); } #handigBox .d50.overflow-left, #handigBox .d50.overflow-right { overflow-x: hidden; } #handigBox .d50.overflow-left img { max-width: none !important; height: 100%; float: right; } #handigBox .d50.overflow-right img { max-width: none !important; height: 100%; float: left; } #handigBox #top10 { display: none; } #handigBox #top100titel { display: none; } #handigBox .top10new { display: block !important; } #handigBox .top10new img { position: absolute; right: 12px; height: 252px; width: auto !important; } #handigBox .babynamen-top10-jongens { position: relative; float: left; width: 100%; border: 1px solid #daf1ff; background: #f7fcff; padding-top: 26px; padding-left: 12px; padding-right: 12px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-bottom: 20px; } #handigBox .babynamen-top10-jongens ul { width: 100%; border: 1px solid #daf1ff; border-radius: 3px; background: #fff; float: left; counter-reset: nrJ; } #handigBox .babynamen-top10-jongens ul li.cijfers { float: left; width: 100%; height: 25px; padding: 3px; padding-left: 10px; } #handigBox .babynamen-top10-jongens ul li.cijfers:before { display:inline-block; width: 30px; counter-increment: nrJ; content: counter(nrJ) ' '; font-family: 'pt_sans_narrowregular'; font-weight: bold; font-size: 20px; color: #51a8f8; } #handigBox .babynamen-top10-jongens ul li.grijs { color: #666 !important; background-color: #f7f7f7; } #handigBox .babynamen-top10-jongens .tipslist { margin-bottom: 25px; padding-bottom: 20px; padding-right: 10px; } #handigBox .babynamen-top10-jongens ul li.tips { margin-top: 15px; line-height: 20px; list-style: disc outside none !important; margin-left: 30px; } #handigBox .babynamen-top10-meisjes { position: relative; float: left; width: 100%; border: 1px solid #fcd8dc; background-color: #fff5f6; padding-top: 26px; padding-left: 12px; padding-right: 12px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-bottom: 20px; } #handigBox .babynamen-top10-meisjes ul { width: 100%; border: 1px solid #fcd8dc; border-radius: 3px; background: #fff; float: left; counter-reset: nrM; } #handigBox .babynamen-top10-meisjes ul li.cijfers { float: left; width: 100%; height: 25px; padding: 3px; padding-left: 10px; } #handigBox .babynamen-top10-meisjes ul li.cijfers:before{ display:inline-block; width: 30px; counter-increment: nrM; content: counter(nrM) ' '; font-family: 'pt_sans_narrowregular'; font-weight: bold; font-size: 20px; color: #fd4e6b; } #handigBox .babynamen-top10-meisjes ul li.grijs { color: #666 !important; background-color: #f7f7f7; } #handigBox .babynamen-top10-meisjes .tipslist { margin-bottom: 25px; padding-bottom: 20px; padding-right: 10px; } #handigBox .babynamen-top10-meisjes ul li.tips { margin-top: 15px; line-height: 20px; list-style: disc outside none !important; margin-left: 30px; } #handigBox .babynamen-top10-jongens-tekst, #handigBox .babynamen-top10-meisjes-tekst { position: relative; float: left; width: 100%; margin-top: 20px; margin-bottom: 20px; } #handigBox #jongensnamen-top10-tips, #handigBox #meisjesnamen-top10-tips { display: none; } #handigBox .d50.images img, #handigBox .d33.images img { width: 98%; height: 98%; } #handigBox ol { display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; } #handigBox ol li { background: url(../images/infoPaneCheck.png) no-repeat top left; padding-left: 32px; line-height: 26px; } .handig-oud { display: none !important; } .handig-nieuw { display: block !important; } #handigBox .button { font-family: 'PT Sans',sans-serif; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 20px; padding: 12px 20px; } #handigBox .button:hover { text-decoration: none !important; } #handigBox .button.blue { color: #fff !important; background-color: #51a8f8 !important; } #handigBox .button.green { color: #fff !important; background-color: #9dc215 !important; } #handigBox .button.pink { color: #fff !important; background-color: #fd4e6b !important; } #handigBox #jongensnamen-top-100 ul { counter-reset: nrJ; } #handigBox #jongensnamen-top-100 ul li.cijfers { padding: 3px; padding-left: 10px; } #handigBox #jongensnamen-top-100 ul li.cijfers:before { display:inline-block; width: 30px; counter-increment: nrJ; content: counter(nrJ) ' '; font-family: 'pt_sans_narrowregular'; font-weight: bold; font-size: 20px; color: #51a8f8; } #handigBox #meisjesnamen-top-100 ul { counter-reset: nrM; } #handigBox #meisjesnamen-top-100 ul li.cijfers { padding: 3px; padding-left: 10px; } #handigBox #meisjesnamen-top-100 ul li.cijfers:before{ display:inline-block; width: 30px; counter-increment: nrM; content: counter(nrM) ' '; font-family: 'pt_sans_narrowregular'; font-weight: bold; font-size: 20px; color: #fd4e6b; } /* ### wie zijn wij box ### */ .wiezijnwijBox { width: 100%; float: left; border-top: 1px dashed #ddd; margin-top: 15px; padding-top: 15px; margin-bottom: 40px; } .wiezijnwijBox ul { float: left; } .wiezijnwijBox li { float: left; margin-right: 20px; margin-bottom: 20px; } /* ### informatie qr box ### */ .infoQrBox { width: 100%; float: left; margin-bottom: 20px; } .infoQrBox ul { float: left; margin-bottom: 25px; } .infoQrBox li { float: left; border-bottom: 1px dashed #ddd; height: 330px; margin-top: 20px; } .infoQrBox li h2 { line-height: 30px; } .infoQrBox #qr1 { width: 52%; background: url('../images/geboortekaartje-kiezen.jpg') no-repeat 0px 90px; padding-right: 4%; } .infoQrBox #qr2 { width: 48%; background: url('../images/qr-code-meedrukken.jpg') no-repeat 0px 90px; } .infoQrBox #qr3 { width: 52%; background: url('../images/upload-baby-fotos.jpg') no-repeat 0px 75px; padding-right: 4%; } .infoQrBox #qr4 { width: 48%; background: url('../images/vreugde-geboorte-delen.jpg') no-repeat 0px 75px; } .infoQrBox a.selecteer, .infoQrBox a.voorbeeld { width: 100%; max-width: 233px; height: 54px; line-height: 54px; text-align: center; display: block; font-family: 'beautiful_every_timeregular'; font-size: 21px !important; color: #fff !important; text-decoration: none; background: url(../images/btnBg.png) left top no-repeat; } .infoQrBox a.selecteer { float: left; } .infoQrBox a.voorbeeld { float: right; } .infoQrBox a.selecteer:hover, .infoQrBox a.voorbeeld:hover { background: url(../images/btnBg_hover.png) left top no-repeat; text-decoration: none !important; } /* ## klantenservice ### */ #contactBox { width: 25%; margin-left: 3%; float: right; padding: 15px; background: #f4f2f3; box-shadow: 0px 4px 10px rgba(100,100,100,0.3); color: #333; } #contactBox img { width: 100% !important; height: auto; } #contactBox .blok { width: 100%; margin: 10px 0px; float: left; } #contactBox .blok table { width: 100%; } #contactBox .blok table td { width: 50%; } #contactBox h2 { font-family: 'Open Sans',sans-serif; font-size: 20px; color: #51a9f9; font-weight: bold; } #contactBox h3 { font-family: 'Open Sans',sans-serif; font-size: 16px; color: #51a9f9; font-weight: bold; } #contactBox a { font-size: 13px; color: #333; } #contactForm { display: none; } #contactForm h2 { font-family: 'Open Sans',sans-serif; font-size: 24px; color: #9dc215; font-weight: bold; width: 100%; } #contactForm h3 { font-family: 'Open Sans',sans-serif; font-size: 14px; color: #51a9f9; font-weight: bold; margin-top: 10px; float: left; width: 100%;} #contactForm a.submit { float: left; font-family: 'PT Sans',sans-serif; width: 100%; margin-top: 10px; text-align: center; display: inline-block; background: #9dc215 !important; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 20px; } #contactForm a.submit:hover { background-color: #738f07 !important; text-decoration: none; } #berichtForm .field { border: 1px solid #ddd; float: left; height: 30px; overflow: hidden; padding: 4px 5px; width: 100%; } #klantenserviceBox { width: 72%; overflow: hidden; } #klantenserviceBox img { max-width: 100% !important; height: auto; } #klantenserviceBox h1, #klantenserviceBox h5, #contactBox h5 { float: left; width: 100%; font-family: 'Open Sans',sans-serif; font-size: 25px; color: #51a9f9; font-weight: 700; margin-top: 10px; } #klantenserviceBox h2, #klantenserviceBox h3 { font-family: 'Open Sans',sans-serif; font-size: 20px; color: #9dc215; font-weight: bold; } #klantenserviceBox h5 { border-top: 1px solid #a7a7a7; padding-top: 20px; } #klantenserviceBox p { padding: 10px 0 10px; font-family: 'Open Sans',sans-serif; font-size: 13px; line-height: 21px; color: #666; } #klantenserviceBox .d100 { float: left; width: 100%; } #klantenserviceBox .d100 ul { padding-left: 20px; } #klantenserviceBox .d100 li { list-style: disc outside none !important; } #klantenserviceBox a { font-size: 13px; text-decoration: none; font-weight: bold; color: #51a9f9; } #klantenserviceBox a:hover { text-decoration: underline; } .klantenserviceBlok { position: relative; float: left; width: 100%; padding-left: 15px; padding-right: 15px; padding-top: 10px; margin-bottom: 30px; background-color: #fafafa; border: 1px solid #ececec; border-radius: 10px; background-repeat: no-repeat; background-position: 90%; } .klantenserviceBlok h2 { margin-bottom: 17px; } .klantenserviceBlok .vragen { text-decoration: none; line-height: 31px; padding-left: 15px; font-weight: normal !important; font-size: 14px !important; } .klantenserviceBlok .vragen:hover { text-decoration: underline; } .klantenserviceBlok .vragenBlok { position: relative; background: #fff; border: 1px solid #ececec; border-radius: 5px; width: 50%; height: 140px; padding-left: 40px; padding-right: 20px; } .klantenserviceBlok .vragenBlok .vraagNr { font-family: 'Open Sans',sans-serif; font-size: 16px; color: #9dc215; font-weight: bold; margin-left: -24px; } .klantenserviceBlok .meer { font-family: 'PT Sans',sans-serif; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff !important; text-decoration: none; font-weight: bold; font-size: 20px !important; padding: 8px 20px; margin-top: 15px; margin-bottom: 20px; } .klantenserviceBlok .meer:hover { text-decoration: none !important; } .klantenserviceBlok .meer.green { color: #fff !important; background-color: #9dc215 !important; } .klantenservice-blok-titel { height: 36px; background-repeat: no-repeat; padding-top: 11px; margin-bottom: 15px; } .klantenservice-blok-titel h2 { padding-left: 37px; } .klantenservice-blok-content { margin-bottom: 25px; line-height: 22px; } .klantenservice-blok-content a { float: left; width: 100%; background: url(../images/arrow.png) left 2px no-repeat; padding-left: 20px; font-weight: normal !important; font-size: 14px !important; } #klantenservice-onderwerpen { position: relative; float: left; } .klantenserviceBlokje { width: 33%; float: left; padding-left: 2%; padding-right: 25; margin-top: 20px; } .faqInput { width: 100%; margin-top: 20px; background-color: #fafafa; border: 1px solid #ececec; border-radius: 10px; padding: 20px; float: left; } .faqInput input { width: 100%; height: 30px; padding-left: 10px; } .faqAccordion .h2 { float: left; font-family: 'Open Sans',sans-serif; font-size: 20px; color: #9dc215; font-weight: bold; cursor: pointer; width: 100%; color: #fff !important; background-color: #9dc115; border-radius: 8px; padding: 10px; margin-top: 20px; padding-left: 65px; } .faqAccordion.account .h2 { padding-left: 20px; } .faqAccordion .h2.active { background-color: #fafafa; border: 1px solid #ececec; color: #495666 !important; } .faqAccordion .h2 span { background: url(../images/arrow_faq.png) right 2px no-repeat; display: block; padding-right: 38px; } .faqAccordion .h2.active span { background: url(../images/arrow_faq_active.png) right 0px no-repeat; padding-right: 38px; } #faq_account { background: #9dc115 url('../images/faq-account-groen.jpg') no-repeat 7px 7px; } #faq_account.active { background: #fafafa url('../images/faq-account-grijs.jpg') no-repeat 7px 7px; } #faq_bestelling, .faq_bestelling { background: #9dc115 url('../images/faq-bestelling-groen.jpg') no-repeat 7px 7px; } #faq_bestelling.active, .faq_bestelling.active { background: #fafafa url('../images/faq-bestelling-grijs.jpg') no-repeat 7px 7px; } #faq_betalen { background: #9dc115 url('../images/faq-betalen-groen.jpg') no-repeat 7px 7px; } #faq_betalen.active { background: #fafafa url('../images/faq-betalen-grijs.jpg') no-repeat 7px 7px; } #faq_verzending { background: #9dc115 url('../images/faq-verzending-groen.jpg') no-repeat 7px 7px; } #faq_verzending.active { background: #fafafa url('../images/faq-verzending-grijs.jpg') no-repeat 7px 7px; } #geselecteerd { background: #9dc115 url('../images/faq-zoekresultaat-groen.jpg') no-repeat 7px 7px; } #geselecteerd.active { background: #fafafa url('../images/faq-zoekresultaat-grijs.jpg') no-repeat 7px 7px; } .faqAccordion .h3.title { cursor: pointer; width: 100%; color: #9dc115 !important; background: url('../images/faq-vraag-arrow.png') no-repeat top left; border-radius: 8px; line-height: 34px; padding-left: 50px; } .faqAccordion .h3.active { color: #495666 !important; background: url('../images/faq-vraag-arrow-active.png') no-repeat top left; } .faqAccordion h4 { font-family: 'Open Sans',sans-serif; font-size: 20px; color: #9dc215; font-weight: bold; margin: 15px 0px; } .faqAccordion p { margin: 10px 0; } .faqAccordion a { font-size: 13px; text-decoration: none; font-weight: bold; color: #51a9f9; } .faqPane { padding: 15px; border: 1px solid #ececec; border-top: none; margin-top: -10px; width: 100%; float: left; } .faqPane2 { padding-bottom: 10px; border-bottom: 1px dashed #ececec; } .faqPane2 li { background: url(../images/arrow_2.png) no-repeat 0px 5px; padding-left: 20px; line-height: 24px; } #jongensnamen-top10-tips { position: relative; float: left; width: 707px; height: 444px; background: url('../images/jongensnamen/jongensnamen-tips-top-10.jpg'); margin-bottom: 40px; } #meisjesnamen-top10-tips { position: relative; float: left; width: 100%; height: 444px; background: url('../images/meisjesnamen/meisjesnamen-tips-top-10.jpg') no-repeat top left; margin-bottom: 40px; } .letterMeisje { float: left; height: 68px; width: 54px; background: url(../images/meisjesnamen/meisjesnamen-alfabeth.jpg) no-repeat; } .letterJongen { float: left; height: 68px; width: 54px; background: url(../images/jongensnamen/jongensnamen-alfabeth.jpg) no-repeat; } .meisjesnamen-top { width: 100%; float: left; margin-top: 20px; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 1px solid #fd4e6b; background: #fd4e6b; } .meisjesnamen-top h3 { color: #fff !important; font-family: 'beautiful_every_timeregular' !important; font-size: 20px !important; margin: 0 !important; } .meisjesnamen-alfabet-body { float: left; width: 100%; border: 1px solid #fcd8dc; background-color: #fff5f6; padding-top: 26px; padding-left: 12px; padding-right: 12px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-bottom: 42px; } .meisjesnamen-alfabet-body ul { width: 100%; border: 1px solid #fcd8dc; border-radius: 3px; background: #fff; float: left; } .meisjesnamen-alfabet-body ul li { float: left; width: 25%; height: 25px; border-right: 1px solid #fcd8dc; padding: 4px; padding-left: 10px; } .meisjesnamen-alfabet-body ul li.grijs { color: #666 !important; background-color: #f7f7f7; } .meisjesnamen-alfabet-body img { position: relative; float: right; right: 55px; margin-bottom: -42px; } .jongensnamen-top { width: 100%; float: left; margin-top: 20px; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 1px solid #50a9f9; background: #50a9f9; } .jongensnamen-top h3 { color: #fff !important; font-family: 'beautiful_every_timeregular' !important; font-size: 20px !important; margin: 0 !important; } .jongensnamen-alfabet-body { float: left; width: 100%; border: 1px solid #daf1ff; background-color: #f7fcff; padding-top: 26px; padding-left: 12px; padding-right: 12px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-bottom: 65px; } .jongensnamen-alfabet-body ul { width: 100%; border: 1px solid #daf1ff; border-radius: 3px; background: #fff; float: left; } .jongensnamen-alfabet-body ul li { float: left; width: 25%; height: 25px; border-right: 1px solid #daf1ff; padding: 4px; padding-left: 10px; } .jongensnamen-alfabet-body ul li.grijs { color: #666 !important; background-color: #f7f7f7; } .jongensnamen-alfabet-body img { position: relative; float: right; right: 55px; margin-bottom: -65px; } #hoewerkthet_img { width: 100%; } /* ### voorbeeld box ### */ .voorbeeldBox { width: 100%; border-top: 1px dashed #ddd; padding-top: 20px; margin-top: 35px; overflow: hidden; margin-bottom: 20px; } .voorbeeldBox h2 { font-weight: bold; } .voorbeeldBox p { margin-top: 8px; line-height: 20px; } .voorbeeldBox img { margin: 25px 0; border: 1px solid #ddd; -webkit-box-shadow: 5px 7px 20px -16px rgba(0,0,0,0.5); -moz-box-shadow: 5px 7px 20px -16px rgba(0,0,0,0.5); box-shadow: 5px 7px 20px -16px rgba(0,0,0,0.5); } #kaart-opmaken-zijde-kiezer { position: relative; float: left; height: 30px; margin-bottom: 20px; } #kaart-opmaken-zijde-kiezer-1 { position: relative; float: left; width: 80px; } #kaart-opmaken-zijde-kiezer-2 { position: relative; float: right; width: 80px; } #kaart-opmaken-zijde-kiezer.staand { width: calc(100% - 383px) !important; margin-left: 15px; margin-right: 368px; } #kaart-opmaken-zijde-kiezer.staand #kaart-opmaken-zijde-kiezer-tekst { width: calc(100% - 160px) !important; } .zijde-button { border-radius: 6px; background-color: #d6d6d6; border: none; color: #fff; font-weight: bold; font-family: 'Open Sans',sans-serif; padding: 4px; cursor: pointer; width: 80px; } .zijde-button:hover, .zijde-button.current { background-color: #9dc215; } #kaart-opmaken-zijde-kiezer-tekst { position: relative; float: left; height: 20px; text-align: center; margin-top: 5px; } .background-line { position: relative; z-index: 1; } .background-line:before { border-top: 1px solid #ccc; content: ""; margin: 0 auto; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; width: 100%; z-index: -1; } .background-line span { background: #fff; padding: 0 15px; } .overslaan { float: right; margin-top: -35px; margin-left: 40px; margin-bottom: 20px; color: #7b7b7b !important; font-family: 'PT Sans',sans-serif !important; font-size: 22px !important; font-weight: bold !important; padding: 20px; line-height: 20px; border: 1px solid #eeeeee; border-radius: 10px; text-align: center; -moz-box-shadow: 0px 2px 2px 0px #bbb; -webkit-box-shadow: 0px 2px 2px 0px #bbb; box-shadow: 0px 2px 2px 0px #bbb; } .overslaan span { font-size: 13px; } .overslaan:hover { text-decoration: none !important; } .overslaan2 { float: left; background: url(../images/overslaanBtn.png) no-repeat top left; margin-left: 50px; margin-top: 10px; margin-bottom: 20px; width: 225px; height: 51px; color: #fff !important; font-family: 'PT Sans',sans-serif !important; font-size: 22px !important; font-weight: bold !important; padding-top: 5px; padding-left: 20px; } .overslaan2 span { font-size: 14px; } .overslaan2:hover { text-decoration: none !important; } /* ### kaart opmaken ### */ #kaart-opmaken-tekstvarianten { overflow:hidden; width: 100%; } #kaart-opmaken-tekstvarianten h2 { font-weight: bold; font-size: 18px; } #kaart-opmaken-tekstvarianten p { font-family: 'Open Sans',sans-serif; font-size: 13px; line-height: 14px; color: #666; } #kaart-opmaken-tekstvarianten-kader { float: left; position: relative; width: 100%; border: 1px solid #ececec; border-bottom: 6px solid #e5e5e5; background-color: #f4f2f3; margin-bottom: 10px; margin-top: 20px; padding: 8px; } #kaart-opmaken-tekstvarianten-kader p { margin-top: 0px; margin-bottom: 5px; } #kaart-opmaken-tekstvarianten-kader-voorbeeld { padding-top: 17px; float: left; font-weight: bold; padding-right: 14px; } #kaart-opmaken-tekstvarianten-kader-opgeslagen { float: left; font-weight: bold; width: 50%; } #kaart-opmaken-tekstvarianten-kader-voorbeeld button, #kaart-opmaken-tekstvarianten-kader-opgeslagen button { border-radius: 6px; background-color: #9dc215; border: none; color: #fff; font-weight: bold; font-family: 'Open Sans',sans-serif; padding: 4px; cursor: pointer; } #kaart-opmaken-tekstvarianten-kader-voorbeeld button:hover { background-color: #51a9f9; } #kaart-opmaken-tekstvarianten-kader-opgeslagen select { width: 50%; float: left; } #kaart-opmaken-tekstvarianten-kader-opgeslagen button { background-color: #ff0000 !important; float: left; margin-left: 10px; } #kaart-opmaken-tekstvarianten-kader-opgeslagen button.alleTeksten { background-color: #d6d6d6 !important; float: left; margin-left: 10px; } #kaart-opmaken-tekstvarianten-kader-opgeslagen button.alleTeksten:hover { background-color: #d0d0d0 !important; } #kaart-opmaken-image { width: 100%; margin-bottom: 15px; float: left; position: relative; box-shadow: 2px 2px 10px rgba(100,100,100,0.4); } #kaart-opmaken-image.staand { float: left; max-width: 368px; margin-bottom: 15px; } #kaart-opmaken-image.staand img { width: 100%; } p.al-besteld { position: relative; float: left; width: 100%; color: #ff0000; font-weight: bold; margin: 5px 0px; } #kaart-opmaken-buttons, #kaart-opmaken-buttons2 { overflow: hidden; float: left; position: relative; width: 100%; background-color: #e5e5e5; margin-bottom: 20px; padding: 10px 15px; } #kaart-opmaken-buttons-right { float: right; } #kaart-opmaken-winkelwagen, #kaart-opmaken-proefdruk, #kaart-opmaken-vorige-stap, #kaart-opmaken-opslaan { float: left; } #kaart-opmaken-vorige-stap #opmakenTerugButton { font-family: 'pt_sans_narrowregular'; margin-top: 5px; margin-right: 20px; margin-bottom: 5px; text-align: center; display: inline-block; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 19px; padding: 9px 15px 6px 30px; line-height: 32px; background: #c0c0c0 url('../images/terug-knop.png') no-repeat 10px center; } #kaart-opmaken-vorige-stap #opmakenTerugButton:hover { background-color: #afafaf !important; } #kaart-opmaken-winkelwagen #opmakenVolgendeButton, #saveAccountBtn { font-family: 'pt_sans_narrowregular'; margin-top: 5px; margin-bottom: 5px; margin-left: 20px; text-align: center; display: inline-block; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 19px; padding: 9px 30px 6px 15px; line-height: 32px; background: #9dc115 url('../images/volgende-knop.png') no-repeat right 10px center; } #kaart-opmaken-proefdruk span { display: inline-block; margin-top: 20px; } #kaart-opmaken-opslaan a { font-family: 'pt_sans_narrowregular'; margin-top: 5px; margin-bottom: 5px; text-align: center; display: inline-block; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 19px; padding: 9px 15px 6px 45px; line-height: 32px; background: #5fc2fd url(../images/opmaken-opslaan-icoon.png) no-repeat 10px center; } /*#kaart-opmaken-opslaan a::before { content: url(../images/opmaken-opslaan-icoon.png); margin-left: 10px; }*/ #kaart-opmaken-proefdruk #opmakenProefdrukButton { font-family: 'pt_sans_narrowregular'; margin-top: 5px; margin-bottom: 5px; margin-right: 20px; text-align: center; display: inline-block; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 19px; padding: 9px 15px 6px 15px; line-height: 32px; background: #9dc115; } #kaart-opmaken-controls, #kaart-opmaken-controls-mobile { float: left; margin-bottom: 25px; width: 100%; } #kaart-opmaken-controls h2, #kaart-opmaken-controls-mobile h2 { font-weight: bold; } #kaart-opmaken-controls.staand { float: left; margin-left: 15px; width: calc(100% - 383px); } #kaart-opmaken-tekstkiezen { position: relative; float: left; width: 100%; border: 1px solid #ececec; background-color: #f8f8f8; padding: 8px; padding-top: 6px; padding-left: 11px; margin-top: 25px; } #kaart-opmaken-tekstkiezen.staand { width: 100%; } .tekst-select-link { position: relative; float: left; font-family: 'pt_sans_narrowregular'; text-decoration: none; font-size: 26px; color: #333; margin-right: 5px; margin-left: 5px; width: 20px; text-align: center; font-weight: bold; padding-top: 7px; } .tekst-select-link:hover { text-decoration: none; } .tekst-select-link.current { color: #51a9f9; } #groep-current { position: absolute; background: url('../images/kaart-opmaken-tekst-current.png') no-repeat top left; width: 62px; height: 82px; top: -4px; left: 24px; z-index: 2; } #groep-prev, #groep-next { position: relative; float: left; width: 9px; height: 17px; margin-right: 10px; margin-left: 10px; margin-top: 5px; padding-top: 7px; } #kaart-opmaken-tekstvak-add-remove { float: left; margin-left: 30px; text-transform: uppercase; width: 62px; } .kaart-opmaken-add-remove { float: left; margin-left: 3px; } #kaart-opmaken-sliders { position: relative; float: left; width: 421px; } #kaart-opmaken-sliders.staand { width: calc(100% - 120px); } #kaart-opmaken-opties-rechts { float: left; width: 548px; } #kaart-opmaken-opties-rechts.staand { float: left; width: 100%; } #kaart-opmaken-opties-rechts-boven { float: left; width: 100%; height: auto; } #kaart-opmaken-tekstkleur { position: relative; float: left; width: 108px; margin-left: 4px; } #kaart-opmaken-tekstkleur-label { font-size: 12px; text-align: center; } .kaart-opmaken-huidige-tekstkleur { position: relative; float: left; cursor: pointer; width: 108px; height: 31px; margin-top: 4px; margin-bottom: 10px; border: 1px solid #ddd; } #kaart-opmaken-kies-tekstkleur { position: relative; float: left; width: 112px; } #kaart-opmaken-tekstkleur-popup { position: absolute; background: url('../images/kaart-opmaken-tekstkleur-popup-bg.png') no-repeat top left; width: 460px; height: 116px; top: 0px; right: 108px; z-index: 3; display: none; } #kaart-opmaken-tekstkleur-popup.staand { top: 215px !important; } #kaart-opmaken-tekstkleur-advies-onbedrukt { position: relative; float: left; width: 70px; margin-top: 5px; margin-left: 15px; } #kaart-opmaken-tekstkleur-advieskleur-lbl { position: relative; float: left; width: 70px; height: 20px; font-size: 11px; } #kaart-opmaken-tekstkleur-onbedrukt-lbl { position: relative; float: left; width: 70px; height: 20px; font-size: 11px; } #kaart-opmaken-tekstkleur-kleuren-lbl { position: relative; float: left; width: 345px; height: 20px; font-size: 11px; margin-right: 18px; margin-top: 5px; } #kaart-opmaken-tekstkleur-kleuren { position: relative; float: left; width: 345px; margin-right: 18px; } #kaart-opmaken-tekstkleur-kleuren .kleur-btn { margin-bottom: 4px !important; } .kleur-btn { position: relative; float: left; width: 32px; height: 32px; border: 2px solid #eee; cursor: pointer; margin-right: 2px; } .kleur-btn:hover{ border: 2px solid #9a9a9a; } #kaart-opmaken-opties, #kaart-opmaken-geen-teksten { position: relative; float: left; width: 100%; margin-top: 15px; } #kaart-opmaken-opties.staand, #kaart-opmaken-geen-teksten.staand { width: 100%; } #kaart-opmaken-tekstveld { position: relative; float: left; width: 50%; width: calc(100% - 578px); height: 142px; margin-right: 30px; } #kaart-opmaken-tekstveld.staand { width: 100%; margin-right: 0px; height: 165px; } #kaart-opmaken-tekstveld textarea { width: 100%; height: 142px; } #kaart-opmaken-tekstveld.staand textarea { width: 100%; height: 135px; } #kaart-opmaken-lettertype { position: relative; float: left; width: 277px; height: 36px; margin-bottom: 17px; margin-right: 6px; margin-top: 2px; background: url('../images/kaart-opmaken-lettertype.png') no-repeat top left; padding-top: 4px; } #kaart-opmaken-lettertype.staand, #kaart-opmaken-verplaatsen.staand { margin-right: 8px; } #kaart-opmaken-lettertype a { width: 100%; float: left; } #kaart-opmaken-verplaatsen { position: relative; float: left; width: 140px; height: 38px; padding: 2px; border: 1px solid #a9a9a9; margin-right: 6px; margin-bottom: 17px; } .verplaatsen-btn { position: relative; float: left; width: 32px; height: 32px; cursor: pointer; background: url('../images/kaart-opmaken-verplaatsen.png') no-repeat top left; } .verplaatsen-links, .verplaatsen-boven, .verplaatsen-onder { margin-right: 2px; } .verplaatsen-links:hover { background-position: 0px -32px; } .verplaatsen-boven { background-position: -32px 0px; } .verplaatsen-boven:hover { background-position: -32px -32px; } .verplaatsen-onder { background-position: -64px 0px; } .verplaatsen-onder:hover { background-position: -64px -32px; } .verplaatsen-rechts { background-position: -96px 0px; } .verplaatsen-rechts:hover { background-position: -96px -32px; } #kaart-opmaken-uitlijnen { position: relative; float: left; width: 106px; height: 38px; padding: 2px; border: 1px solid #a9a9a9; margin-bottom: 17px; } .uitlijnen-btn { position: relative; float: left; width: 32px; height: 32px; cursor: pointer; background: url('../images/kaart-opmaken-uitlijnen.png') no-repeat top left; } .uitlijnen-links, .uitlijnen-midden { margin-right: 2px; } .uitlijnen-links:hover, .uitlijnen-links.current { background-position: 0px -32px; } .uitlijnen-midden { background-position: -32px 0px; } .uitlijnen-midden:hover, .uitlijnen-midden.current { background-position: -32px -32px; } .uitlijnen-rechts { background-position: -64px 0px; } .uitlijnen-rechts:hover, .uitlijnen-rechts.current { background-position: -64px -32px; } #kaart-opmaken-grootte { position: relative; float: left; width: 421px; height: 45px; } #kaart-opmaken-grootte.staand { width: 100%; } #kaart-opmaken-grootte-image-klein, #kaart-opmaken-grootte-image-groot, #kaart-opmaken-rotatie-image-links, #kaart-opmaken-rotatie-image-rechts { position: relative; float: left; width: 40px; height: 40px; } .kaart-opmaken-grootte-slider, .kaart-opmaken-rotatie-slider { position: relative; float: left; width: 305px; margin-top: 12px; margin-left: 12px; margin-right: 18px; } #kaart-opmaken-grootte.staand .kaart-opmaken-grootte-slider, #kaart-opmaken-rotatie.staand .kaart-opmaken-rotatie-slider { width: calc(100% - 135px); } #kaart-opmaken-rotatie { position: relative; float: left; width: 436px; height: 45px; margin-top: 10px; } #kaart-opmaken-rotatie.staand { width: 100%; } .fancybox-skin { background-color: #fff !important; } #kaart-opmaken-fonts, #kaart-opmaken-kleur, #kaart-opmaken-foto { display: none; } .font-menu { margin-top: 15px; margin-bottom: 5px; } .kaart-opmaken-fonts-image { position: relative; float: left; width: 240px; height: 28px; margin-bottom: 5px; } .kaart-opmaken-fonts-image.active { background: #ddd; } .opmaken-popup .inner h2 { font-family: 'beautiful_every_timeregular' !important; color: #9dc215; font-weight: bold; font-size: 22px; margin-bottom: 20px; text-align: center; } /*#kaart-opmaken-inloggen-popup, #kaart-opmaken-waarschuwing, .kaart-opmaken-waarschuwing, #kaart-opmaken-tekstvak-verwijderen-popup, #kaart-opmaken-ontwerp-verwijderen-popup, #kaart-opmaken-ontwerp-reset-popup { display: none; }*/ .opmaken-popup { display: none; } .opmaken-popup h2 { font-family: 'beautiful_every_timeregular' !important; color: #9dc215; font-weight: bold; font-size: 22px; margin-bottom: 10px; text-align: center; } .opmaken-popup p { text-align: center; } .opmaken-popup .deleteBtn { font-family: 'PT Sans',sans-serif; margin-top: 15px; float: right; text-align: center; display: inline-block; background-color: #9dc215; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 50px; line-height: 32px; } .background-line-title { position: relative; float: left; width: 100%; text-align: center; /*margin-top: 20px;*/ } #kaart-opmaken-inloggen-popup h3 { font-weight: bold; } #kaart-opmaken-inloggen-terug { position: absolute; width: 133px; height: 40px; left: 0px; bottom: 0px; } #kaart-opmaken-inloggen-terug a { width: 133px; float: left; line-height: 40px; font-weight: normal !important; font-family: 'beautiful_every_timeregular'; font-size: 21px !important; color: #fff !important; text-decoration: none; background: url(../images/terugBtn.png) left top no-repeat; padding-left: 65px; } #kaart-opmaken-inloggen .kwijt { font-family: 'PT Sans',sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #51a9f9; } .kaart-opmaken-inloggen .regel, .kaart-opmaken-inloggen-registreren .regel {} .kaart-opmaken-inloggen-links, .kaart-opmaken-inloggen-registreren-links { position: relative; float: left; width: 160px; height: 30px; margin-left: calc(40% - 160px); margin-top: 10px; text-align: left; } .kaart-opmaken-inloggen-rechts, .kaart-opmaken-inloggen-registreren-rechts { position: relative; float: left; width: 290px; height: 30px; margin-right: calc(60% - 290px); margin-top: 10px; text-align: left; } .kaart-opmaken-inloggen-rechts input, .kaart-opmaken-inloggen-registreren-rechts input { width: 290px; } .kaart-opmaken-inloggen-registreren-links, .kaart-opmaken-inloggen-registreren-rechts { height: 20px; } #kaart-opmaken-inloggen-button, #kaart-opmaken-inloggen-registreren-button { position: relative; text-align: right; width: 100%; float: left; } #kaart-opmaken-inloggen-error, #kaart-opmaken-registreren-error { position: relative; float: left; width: 100%; text-align: center; margin-top: 5px; } #kaart-opmaken-inloggen-button a, #kaart-opmaken-inloggen-registreren-button a { font-family: 'PT Sans',sans-serif; margin-top: 5px; margin-bottom: 5px; margin-left: 20px; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 50px; line-height: 32px; } #kaart-opmaken-opslaan-succes p, #kaart-opmaken-registreren-succes p, #kaart-opmaken-opslaan-popup p { margin-bottom: 60px; } #kaart-opmaken-tekstvak-verwijderen-popup .verwijderen, #kaart-opmaken-ontwerp-verwijderen-popup .verwijderen, #kaart-opmaken-ontwerp-reset-popup .verwijderen { font-family: 'PT Sans',sans-serif; margin-top: 15px; float: right; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 50px; line-height: 32px; } #kaart-opmaken-waarschuwing #winkelwagenBtn { float: right; font-family: 'PT Sans',sans-serif; margin-top: 25px; margin-left: 20px; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 50px; line-height: 32px; } #kaart-opmaken-waarschuwing #saveBtn { float: right; font-family: 'PT Sans',sans-serif; margin-top: 25px; text-align: center; display: inline-block; background-color: #5fc2fd; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 6px 50px; line-height: 32px; } #kaart-opmaken-waarschuwing #saveBtn::after { content: url(../images/kaart-opmaken-opslaan.png); margin-left: 10px; } .kaart-opmaken-inloggen-rechts input, .kaart-opmaken-inloggen-registreren-rechts input { height: 23px; overflow: hidden; float: left; border: 1px solid #ddd; } .kaart-opmaken-inloggen-rechts select, .kaart-opmaken-inloggen-registreren-rechts select { height: 23px; } #toonallefonts { float: left; width: 100%; text-align: center; } #toonallefonts .button { font-family: 'PT Sans',sans-serif; margin-top: 5px; margin-bottom: 5px; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 50px; line-height: 32px; } #toonpopulairefonts { float: left; width: 100%; text-align: center; } #toonpopulairefonts .button { font-family: 'PT Sans',sans-serif; margin-top: 5px; margin-bottom: 5px; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 50px; line-height: 32px; } #kaart-opmaken-controls-mobile { display: none; } #gebruik_foto { width: 100%; font-family: 'PT Sans',sans-serif; margin-top: 10px; margin-bottom: 5px; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 18px; padding: 0px 50px; line-height: 32px; } #copyBtn img, #resetBtn img { margin-left: 14px; padding-right: 0px; padding-top: 2px; } #saveBtn img { margin-left: 14px; padding-right: 0px; padding-top: 2px; } #deleteOntwerp img { margin-left: 14px; padding-right: 0px; } .draggable .topbottom, .draggable .leftright { position:absolute; width:100%; height:100%; } .draggable .leftright:after { content:''; position:absolute; bottom:0; left:0; top:0; right:2px; height:100%; width:2px; background-image: linear-gradient(to top, red 70%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-size: 2px 11px; background-repeat: repeat-y; } .draggable .leftright:before { content:''; position:absolute; bottom:0; top:0; right:0px; height:100%; width:2px; background-image: linear-gradient(to top, red 70%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-size: 2px 11px; background-repeat: repeat-y; } .draggable .topbottom:before { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; width:100%; background-image: linear-gradient(to right, red 71%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-size: 11px 2px; background-repeat: repeat-x; } .draggable .topbottom:after { content:''; position:absolute; top:0; left:0; right:0; height:2px; width:100%; background-image: linear-gradient(to right, red 71%, rgba(255, 255, 255, 0) 0%); background-position: top; background-size: 11px 2px; background-repeat: repeat-x; } @keyframes move-top { 0% { background-position: 0 0; } 100% { background-position: 10px 0px; } } @keyframes move-bottom { 0% { background-position: 0 0; } 100% { background-position: -10px 0px; } } @keyframes move-left { 0% { background-position: 0 0; } 100% { background-position: 0px -10px; } } @keyframes move-right { 0% { background-position: 0 0; } 100% { background-position: 0px 10px; } } .animate .leftright:after { animation: move-left 1s linear infinite; } .animate .leftright:before { animation: move-right 1s linear infinite; } .animate .leftright:after, .animate .leftright:before { background-image: linear-gradient(to top, red 70%, rgba(255, 255, 255, 0) 0%); } .animate .topbottom:after { animation: move-top 1s linear infinite; } .animate .topbottom:before { animation: move-bottom 1s linear infinite; } .animate .topbottom:after, .animate .topbottom:before { background-image: linear-gradient(to right, red 70%, rgba(255, 255, 255, 0) 0%); } .deleteTekstvak { position: absolute; right: -12px; top: -12px; width: 25px; height: 25px; } .deleteTekstvak a { position: relative; float: left; width: 25px; height: 25px; } .deleteTekstvak img { position: relative; width: 100%; height: 100%; max-height: 25px; max-width: 25px; } /* Foto opmaken */ .cropArea { margin-top: 5px; float: left; width: 400px; } .cropArea p.nietToegevoegd { border: 1px solid #ececec; padding: 7px 20px; width: 100%; margin: 0px; float: left; } #kaart-opmaken-fotokiezen { position: relative; float: left; width: 100%; border: 1px solid #ececec; background-color: #f8f8f8; padding: 8px; padding-top: 13px; padding-left: 11px; margin-top: 25px; } #kaart-opmaken-fotokiezen.staand { width: 100%; } .foto-select-link { position: relative; float: left; font-family: 'pt_sans_narrowregular'; text-decoration: none; font-size: 26px; color: #333; margin-right: 5px; margin-left: 5px; width: 20px; text-align: center; font-weight: bold; } .foto-select-link:hover { text-decoration: none; } .foto-select-link.current { color: #51a9f9; } #foto-current { position: absolute; background: url('../images/kaart-opmaken-tekst-current.png') no-repeat top left; width: 62px; height: 82px; top: -10px; left: 24px; z-index: 2; } #foto-prev, #foto-next { position: relative; float: left; width: 9px; height: 17px; margin-right: 10px; margin-left: 10px; } .foto-preview { position: relative; float: left; width: 100%; } .fotoTools { position: relative; float: left; width: calc(100% - 410px); margin-left: 10px; margin-top: 20px; } .fotoUpload { position: relative; float: left; width: calc(100% - 410px); margin-left: 10px; margin-top: 5px; } .fileUpload { position: relative; overflow: hidden; width: 110px; border-radius: 6px; border: none; color: #fff; font-weight: bold; font-family: Arial; padding: 8px; padding-left: 35px; cursor: pointer; background: #9dc115 url(../images/bladeren.png) no-repeat 8px 9px; float: left; } .fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .uploadPlaceholder { position: relative; float: left; margin-left: 10px; } .uploadPlaceholder input { height: 31px; width: 185px; padding: 5px; } .submitUpload { position: relative; overflow: hidden; width: 110px; border-radius: 6px; border: none; color: #fff; font-weight: bold; font-family: Arial; padding: 8px; padding-left: 35px; cursor: pointer; background: #9dc115 url(../images/uploaden.png) no-repeat 8px 9px; float: left; margin-left: 10px; } .submitUpload input { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); width: 120px; } .statustxt { position: relative; float: left; margin-top: 5px; width: 40px; display: none; } .progressbox { position: relative; float: left; margin-top: 5px; width: 100%; display: none; } .progressbar { width: 0px; background: url(../images/progressbar.png) repeat-x top left; height: 19px; } .uploadoutput { position: relative; float: left; margin-top: 5px; width: calc(60% - 10px); font-weight: bold; color: #ff0000; } .roteerFotoLinks { position: relative; float: left; background: url(../images/foto-bewerken.png) no-repeat 0px 0px; height: 49px; padding-left: 50px; padding-top: 20px; width: 50%; font-family: 'PT Sans',sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #51a9f9; } .roteerFotoRechts { position: relative; float: left; background: url(../images/foto-bewerken.png) no-repeat 0px -49px; height: 49px; padding-left: 50px; padding-top: 20px; width: 50%; font-family: 'PT Sans',sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #51a9f9; } .kleurFotoOrigineel { position: relative; float: left; background: url(../images/foto-bewerken.png) no-repeat 0px -98px; height: 49px; padding-left: 50px; padding-top: 23px; width: 33%; font-family: 'PT Sans',sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #51a9f9; } .kleurFotoZwartwit { position: relative; float: left; background: url(../images/foto-bewerken.png) no-repeat 0px -147px; height: 49px; padding-left: 50px; padding-top: 23px; width: 33%; font-family: 'PT Sans',sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #51a9f9; } .kleurFotoSepia { position: relative; float: left; background: url(../images/foto-bewerken.png) no-repeat 0px -196px; height: 49px; padding-left: 50px; padding-top: 23px; width: 33%; font-family: 'PT Sans',sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #51a9f9; } #lettertypeKiezen { width: 40%; float: left; } #lettertypeKiezen h2, #kleurKiezen h2, #kaartVoorbeeld h2, #tekstAanleveren h2 { font-weight: bold; margin-bottom: 15px; } #lettertypeKiezen a { float: left; border: 2px solid #ddd; background-color: #fff; padding: 0px 20px; margin-right: 10px; margin-bottom: 10px; width: calc(50% - 20px); } #lettertypeKiezen a:hover, #lettertypeKiezen a.active { border: 2px solid #ff0000; } #lettertypeKiezen a img { width: 100%; max-width: 120px; } #kleurKiezen { width: 20%; float: left; } #kleurKiezen .colourBtn { display: inline-block; width: 100%; border: 2px solid #ddd; color: #fff; text-decoration: none; padding: 3px; margin-bottom: 3px; } #kleurKiezen .colourBtn:hover, #kleurKiezen .colourBtn.active { border: 2px solid #ff0000; font-weight: bold; } #kaartVoorbeeld { width: calc(40% - 25px); overflow: hidden; padding-left: 25px; } #demolinks { float: left; width: 27%; max-width: 134px; height: auto; margin-bottom: 10px; margin-top: 20px; } #demolinks img { width: 100%; max-width: 134px; } #demorechts { float: left; margin-top: 20px; width: 72%; max-width: 355px; height: auto; margin-bottom: 50px; } #demorechts img { width: 100%; max-width: 355px; } #demoPrijs { float: left; width: 100%; } #demoPrijs img { display: inline; } #demoPrijs span { margin-left: 30px; font-size: 24px; font-weight: bold; color: #9dc115; } #tekstAanleveren { width: 100%; overflow: hidden; } .tekstOptieRegel { float: left; width: 100%; height: 30px; line-height: 30px; } .tekstOptieRegel label { float: left; } .tekstOptieRegel #filearea { float: left; width: 50%; margin-left: 30px; } /* ### bericht box ### */ .berichtBox { width: 100%; overflow: hidden; } /* ### proefdruk ### */ .proefdrukBtn { float: left; width: calc(50% - 5px); height: 300px; border: 2px solid #ddd; border-radius: 10px; opacity: 0.5; padding: 1px; } .proefdrukBtn:hover, .proefdrukBtn.active { border: 2px solid #5FC2FD; opacity: 1; padding: 0px; } .proefdrukBtn.disabled:hover, .proefdrukBtn.disabled { border: 1px solid #ddd !important; opacity: 0.5 !important; cursor: default !important; padding: 1px !important; } #opkaart { margin-right: 9px; } .proefdrukBtnImg img { width: 100%; } .proefdrukBtnTitel { float: left; font-weight: bold; width: 100%; text-align: center; padding: 5px 10px; color: #333 !important; } .proefdrukBtnTekst { float: left; font-weight: normal !important; width: 100%; text-align: center; padding: 5px 10px; color: #333 !important; } /* ### right container ### */ #rightCntr { overflow: hidden; } /* ### text box ### */ .textBox { padding: 10px 0 10px; width: 100%; float: left; } .textBox h1 { font-family: 'Open Sans',sans-serif; font-size: 25px; color: #51a9f9; font-weight: 700; } .textBox.modelkaart h1 { width: 80%; } .textBox p { padding: 10px 0 10px; font-family: 'Open Sans',sans-serif; font-size: 13px; line-height: 21px; color: #666; } .textBox a, #leesmeer { font-weight: bold; color: #ff8a00; text-decoration: none; } .textBox a:hover, #leesmeer:hover { text-decoration: underline; } #leesmeer { cursor: pointer; } .textBox h2 { font-family: 'Open Sans',sans-serif; font-size: 16px; color: #51a9f9; font-weight: 700; } .textBox h3 { font-family: "beautiful_every_timeregular"; font-size: 20px; color: #9dc215; font-weight: bold;} .textBox .hidden { display: none; } .textBox .categorie_img { float: right; margin-top: -20px; margin-left: 20px; margin-bottom: 10px; } /* ### image box ### */ .imageBox { width: 100%; overflow: hidden; } .imageBox .h2, .imageBox .h3 { padding: 0 0 5px; font-family: "Open Sans",sans-serif; font-size: 20px; color: #9dc215; text-align: center; font-weight: bold; } .imageBox ul { margin-right: -26px; list-style: none; } .imageBox li { padding: 0 26px 0 0; width: 50%; float: left; } .imageBox #glansfolie { display: none; } .imageBox .link { margin: 18px auto 0; width: 212px; height: 30px; line-height: 30px; display: block; font-family: 'Open Sans',sans-serif; font-size: 13px; color: #690; text-align: center; text-decoration: none; background: url(../images/btnbg2.png) left top no-repeat; } .imageBox .link:hover { text-decoration: none; } .imageBox .image { margin-top: -36px; } .imageBox li img { width: 100%; } .imageBox .blue { color: #51a9f9; } .imageBox .red { color: #fd4e6b; } .imageBox .orange { color: #fe9528; } #goedkope-kaartjes { display: none; } /* ### block box ### */ .blockBox { padding: 62px 0 0; width: 100%; overflow: hidden; } .blockBox .holder { } .blockBox .block { padding: 0 0 0 55px; width: 50%; float: left; } .blockBox .block.line { padding: 0; background: url(../images/line.png) right top no-repeat; } .blockBox .block .h2, .blockBox .block .h3 { padding: 0 0 12px; font-size: 20px; color: #333; font-weight: 700; } .blockBox .block a, .usp .block a { color: #51a9f9; } .blockBox .link { width: 100%; overflow: hidden; } .blockBox .link ul { list-style: none; } .blockBox .link li { padding: 0 0 4px 35px; line-height: 26px; font-family: 'Open Sans',sans-serif; font-size: 13px; color: #666; position: relative; } .blockBox .link span { position: absolute; left: 0; top: 0; font-family: 'janda_safe_and_sound_solidRg'; font-size: 15px; color: #fff; margin-right: 6px; width: 25px; height: 26px; display: block; text-align: center; line-height: 31px; background: url(../images/circle.png) left top no-repeat; } .blockBox .link small { font-size: 12px; font-style: italic; display: block; } .blockBox .rating, .usp .rating { padding: 0 0 0 10px; display: inline-block; position: relative; top: 4px; } .blockBox .rating a, .usp .rating a { display: inline-block; width: 25px; height: 24px; background: url(../images/fullstar.png) left top no-repeat; } .blockBox .rating a.half, .usp .rating a.half { background: url(../images/halfstar.png) left top no-repeat; } .blockBox .detail { overflow: hidden; } .blockBox p { font-family: 'Open Sans',sans-serif; font-size: 13px; color: #102; line-height: 24px; } .blockBox p .average { font-size: 18px; color: #9dc215; font-weight: bold; } .blockBox p a { padding: 0 25px 0 0; font-size: 13px; color: #51a9f9; text-decoration: none; display: inline-block; background: url(../images/arrow.png) right 5px no-repeat; } .blockBox strong, .usp strong { font-size: 13px; color: #9dc215; font-weight: 700; text-transform: uppercase; } .blockBox .img2 { } .blockBox .img1, .usp .img1 { float: right; } .usp span { color: #666; font-weight: normal; } .usp .block .ekomi_tekst { float: left; width: 50%; padding-left: 20px; padding-top: 5px; } .usp .block .ekomi_img { float: left; width: 35%; } .usp .block .ekomi_img img { width: 100%; } /* ### styles box ### */ .styleBox { padding: 0 0 56px; border-bottom: 1px dashed #ddd; width: 100%; overflow: hidden; } .styleBox .h2 { padding: 0 0 15px; max-width: 720px; margin: 0 auto; font-size: 20px; color: #51a9f9; text-align: center; background: url(../images/border.png) 80px bottom no-repeat; font-weight: 700; } .styleBox ul { padding: 17px 0 0; margin-right: -25px; list-style: none; } .styleBox li { padding: 0 25px 0 0; width: 245px; float: left; } .styleBox li .image img { width: 100%; border: 1px dashed #ddd; } .styleBox li:hover .image img,.styleBox li.active .image img { border: 1px solid #ddd; } .styleBox li a.btn { width: 100%; overflow: hidden; height: 65px; line-height: 40px; font-size: 18px; color: #333; display: block; text-align: center; text-decoration: none; background: url(../images/bg2.png) left top no-repeat; background-size: 100%; } .styleBox li:hover a.btn,.styleBox li.active a.btn { color: #fff; background: url(../images/bg2_hover.png) left top no-repeat; background-size: 100%; } #stijl-klassiek { display: none; } /* ### announcements box ### */ .announcementsBox { padding: 23px 0 0; width: 98%; /*overflow: hidden;*/ } .announcementsBox .holder { margin-right: -62px; } .announcementsBox .block { /*padding: 0 30px 0 0;*/ width: 49%; float: left; } .announcementsBox h2 { padding: 0 0 15px; padding-right: 30px; font-size: 20px; color: #51a9f9; font-weight: 700; } .announcementsBox p { padding: 0 0 23px; padding-right: 30px; font-family: 'Open Sans',sans-serif; font-size: 13px; color: #666; line-height: 21px; min-height: 80px; } .announcementsBox ul { margin-right: -34px; list-style: none; } .announcementsBox li { padding: 0 15px 0; width: 45.8%; float: left; } .announcementsBox li .inner { padding: 0 0 34px; overflow: hidden; background: url(../images/bg3.png) left top no-repeat; background-size: 100%; } .announcementsBox li .image { text-align: center; display: inline; } .announcementsBox li .image img { width: 94%; padding-left: 3%; } .announcementsBox .info { padding: 15px; } .announcementsBox li .h6 { padding: 10px 0 10px; display: block; font-size: 17px; color: #333; } .announcementsBox li a { font-family: 'Open Sans',sans-serif; padding: 0 20px 0 0; font-size: 13px; color: #51a9f9; text-decoration: none; display: inline-block; background: url(../images/arrow.png) right 2px no-repeat; } .announcementsBox li a span { color: #333; } .announcementsBox li a:hover { text-decoration: underline; } /* ### content box ### */ .contentBox { padding: 66px 0 0 13px; width: 100%; overflow: hidden; } .contentBox .detail { overflow: hidden; } .contentBox img { padding: 0 0 0 27px; float: right; } .contentBox h2 { padding: 0 0 20px; font-size: 20px; color: #51a9f9; font-weight: 700; } .contentBox p { padding: 0 0 20px; font-family: 'Open Sans',sans-serif; font-size: 13px; color: #666; line-height: 21px; } .contentBox h3 { font-size: 16px; color: #333; font-weight: 700; } .contentBox a { color: #51a9f9; text-decoration: none; } .contentBox a:hover { text-decoration: underline; } /* ### breadcrumbs box ### */ .breadcrumbsBox { padding: 10px 0 10px; border-bottom: 1px dashed #ddd; width: 100%; overflow: hidden; } .breadcrumbsBox ul { } .breadcrumbsBox li { padding: 0 0 0 20px; float: left; font-family: 'Open Sans',sans-serif; font-size: 13px; color: #666; background: url(../images/arrow3.png) 7px 6px no-repeat; } .breadcrumbsBox li a { font-family: 'Open Sans',sans-serif; color: #51a9f9; text-decoration: none; } .breadcrumbsBox li a:hover { text-decoration: underline; } .breadcrumbsBox li:first-child { background: none; padding: 0; } .breadcrumbsBox .vragen { float: right; } .breadcrumbsBox .vragen span { font-weight: bold; color: #9dc215; } .breadcrumbsBox .vragen img { display: inline; } .winkelwagenStappenBox { width: 100%; overflow: hidden; height: 70px; margin-top: 15px; } .winkelwagenStappenBox .stap { position: relative; float: left; width: calc(33% - 25px); margin-right: 43px; } .winkelwagenStappenBox #bestellen { margin-right: 0px; } .winkelwagenStappenBox .stap a { float: left; width: 100%; font-family: 'beautiful_every_timeregular',sans-serif; text-align: center; display: inline-block; background-color: #f3f1f2; border-radius: 9px; color: #666; text-decoration: none !important; font-size: 22px; padding: 12px 50px 2px 82px; line-height: 32px; } .winkelwagenStappenBox .stap a:hover, .winkelwagenStappenBox .active a { background-color: #5fc2fd; color: #fff; } .winkelwagenStappenBox .active:after { content:''; position: absolute; top: 100%; left: 50%; margin-left: -20px; width: 0; height: 0; border-top: solid 20px #5fc2fd; border-left: solid 20px transparent; border-right: solid 20px transparent; } .winkelwagenStappenBox #winkelmand a { background: #f3f1f2 url('../images/icon_winkelmand.png') no-repeat 116px 7px; } .winkelwagenStappenBox #winkelmand a:hover, .winkelwagenStappenBox #winkelmand.active a { background: #5fc2fd url('../images/icon_winkelmand_active.png') no-repeat 116px 7px; } .winkelwagenStappenBox #klantgegevens a { background: #f3f1f2 url('../images/icon_klantgegevens.png') no-repeat 103px 7px; } .winkelwagenStappenBox #klantgegevens a:hover, .winkelwagenStappenBox #klantgegevens.active a { background: #5fc2fd url('../images/icon_klantgegevens_active.png') no-repeat 103px 7px; } .winkelwagenStappenBox #bestellen a { background: #f3f1f2 url('../images/icon_bestelling.png') no-repeat 74px 7px; } .winkelwagenStappenBox #bestellen a:hover, .winkelwagenStappenBox #bestellen.active a { background: #5fc2fd url('../images/icon_bestelling_active.png') no-repeat 74px 7px; } .uitlegBox { float: left; width: 100%; border-bottom: 1px dashed #eee; margin-bottom: 20px; } .uitlegBox div { position: relative; float: left; width: 53%; padding: 0px 2%; margin-bottom: 20px; } .uitlegBox div:last-child { width: 47%; } .uitlegBox h2 { font-weight: bold; } .uitlegBox #mobileTitel { display: none; } .modelkaartKeuzeBox { width: 100%; float: left; } .modelkaartKeuzeBox #tussen { float: left; width: 6%; text-align: center; color: #bbb; font-size: 20px; font-weight: bold; padding-top: 25px; } .modelkaartKeuzeBox a { float: left; width: 47%; text-align: center; display: inline-block; border-radius: 10px; color: #666; text-decoration: none !important; } .modelkaartKeuzeBox .stap { position: relative; float: left; width: 100%; } .modelkaartKeuzeBox .active:after { content:''; position: absolute; top: 100%; left: 50%; margin-left: -20px; width: 0; height: 0; border-top: solid 20px #5fc2fd; border-left: solid 20px transparent; border-right: solid 20px transparent; } .modelkaartKeuzeBox .stap .header { margin: 0px 4%; background-color: #5fc2fd; color: #fff; font-family: 'PT Sans',sans-serif; font-size: 26px; font-weight: bold; padding: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; line-height: 24px; } .modelkaartKeuzeBox .stap .body { margin: 0px 4%; text-align: left; padding: 30px; color: #bbb; font-size: 18px; font-weight: bold; font-family: 'PT Sans',sans-serif; -moz-box-shadow: 0px 0px 7px 1px #bbb; -webkit-box-shadow: 0px 0px 7px 1px #bbb; box-shadow: 0px 0px 7px 1px #bbb; } .modelkaartKeuzeBox .stap .body ol { list-style: none; counter-reset: item; } .modelkaartKeuzeBox .stap .body li { counter-increment: item; margin-bottom: 15px; } .modelkaartKeuzeBox .stap .body li:before { margin-right: 25px; content: counter(item); background: #bbb; border-radius: 40%; color: white; width: 1.2em; text-align: center; display: inline-block; padding: 2px; } .modelkaartKeuzeBox .stap .body img { float: right; display: inline; width: 100px; max-height: 100px; } .modelkaartKeuzeBox .stap .knop { position: relative; width: 100%; background: #f4f2f2; color: #929292; border-radius: 10px; font-size: 26px; text-align: center; font-weight: bold; font-family: 'PT Sans',sans-serif; padding: 10px; } .modelkaartKeuzeBox .stap .knop span { margin-left: 10px; font-weight: normal; font-size: 14px; } .modelkaartKeuzeBox a.hover .stap .knop { background: #ff8a00; color: #fff; } .modelkaartKeuzeBox a.hover .stap .knop:after { content:''; position: absolute; top: -20px; left: 50%; margin-left: -20px; width: 0; height: 0; border-bottom: solid 20px #ff8a00; border-left: solid 20px transparent; border-right: solid 20px transparent; } .modelkaartKeuzeBox .stap .ditalles { margin: 0px 4%; text-align: center; font-family: 'PT Sans',sans-serif; font-size: 30px; font-weight: bold; color: #43423e; padding: 20px; } .modelkaartKeuzeBox .stap .ditalles span { color: #ff8a00; } .modelkaartKeuzeBox .kaartImage { display: none; } #gepersonaliseerdeModelkaart { position: absolute; right: 0px; top: 180px; width: 305px; height: 97px; } #gepersonaliseerdeModelkaartMobiel { display: none; position: absolute; right: 0px; top: 00px; width: 147px; height: 67px; } #regelsHeader { width: 100%; overflow: hidden; height: 36px; background-color: #f4f2f2; border-radius: 8px; font-size: 14px; padding-top: 8px; } #regelsHeader #regelsHeaderArtikel { float: left; margin-left: 12px; width: 68%; } #regelsHeader #regelsHeaderPrijs { float: left; margin-left: 12px; width: 8%; } #regelsHeader #regelsHeaderAantal { float: left; margin-left: 12px; width: 7%; } #regelsHeader #regelsHeaderSubtotaal { float: left; margin-left: 12px; width: 7%; text-align: right; } .productRegel { width: 100%; overflow: hidden; border-bottom: 1px dashed #eee; padding-top: 20px; padding-bottom: 20px; } .productRegel .image { float: left; width: 12%; margin-right: 20px; } .productRegel .image img { width: 100%; } .productRegel .artikelInfo { float: left; width: 85%; } .productRegel .artikel { float: left; width: 66%; height: 35px; } .productRegel .artikel h2 { font-size: 14px; font-weight: bold; margin-top: 6px; } .productRegel .artikel span { display: inline-block; margin-top: 6px; width: 47%; } .productRegel .artikel select { width: 52% !important; } .productRegel .artikel a { font-family: 'PT Sans',sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #51a9f9; } .productRegel .prijs { float: left; margin-left: 12px; width: 8%; margin-top: 6px; } .productRegel .aantal { float: left; margin-left: 12px; width: 8%; } .productRegel .aantal input { border: 1px solid #ddd; float: left; height: 30px; overflow: hidden; padding: 4px 5px; width: 100%; } .productRegel .aantal span { display: inline-block; margin-top: 6px; } .productRegel .subtotaal { float: left; margin-left: 12px; width: 8%; margin-top: 6px; font-weight: bold; text-align: right; } .productRegel .delete { float: left; margin-left: 12px; width: 2%; margin-top: 5px; } .productRegel .delete2 { display: none; float: right; margin-left: 12px; margin-top: 5px; } .productRegel .gratis { color: #9dc215; font-weight: bold; } .productRegel .label { display: none !important; } #winkelmandjeLeeg { width: 100%; overflow: hidden; text-align: center; margin-top: 20px; } .winkelmandFooter { width: 100%; overflow: hidden; background-color: #f4f2f2; padding: 25px; } .winkelmandFooter .links, .winkelmandFooter .rechts { float: left; width: 50%; } .winkelmandFooter .links h2 { font-size: 14px; font-weight: bold; } .winkelmandFooter .links h2 img { display: inline; } .winkelmandFooter .links p { margin-top: 5px; } .winkelmandFooter .links input { border: 1px solid #ddd; float: left; height: 30px; overflow: hidden; padding: 4px 5px; width: 50%; } .winkelmandFooter .links a.berekenKorting, .inloggenRegel .inloggenRechts a.berekenKorting { font-family: 'PT Sans',sans-serif; margin-left: 20px; text-align: center; display: inline-block; background-color: #5fc2fd; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 18px; padding: 7px 20px; line-height: 16px; } .winkelmandFooter .links a { font-family: 'PT Sans',sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #51a9f9; } .winkelmandFooter .rechts span { width: 100px; display: inline-block; } .winkelmandFooter .rechts .verzendkosten { float: left; width: 71%; padding-bottom: 10px; } .winkelmandFooter .rechts .verzendkosten select { width: 60%; } .winkelmandFooter .rechts .subtotaal { float: left; width: 25%; margin-top: 6px; font-weight: bold; text-align: right; padding-bottom: 14px; } .winkelmandFooter .rechts .streep { border-bottom: 2px solid #5fc2fd; } .winkelmandFooter .rechts .totaal { float: left; width: 71%; padding-top: 20px; font-weight: bold; font-size: 16px; } .winkelmandFooter .rechts .totaalbedrag { float: left; width: 25%; padding-top: 10px; font-size: 22px; font-weight: bold; text-align: right; color: #5fc2fd; } .winkelmandKnoppen { width: 100%; overflow: hidden; background-color: #f4f2f2; padding: 25px; margin-top: 30px; } .winkelmandKnoppen .verderWinkelen, .winkelmandKnoppen .volgendeStap { width: 50%; float: left;} .winkelmandKnoppen .verderWinkelen a { float: left; font-family: 'PT Sans',sans-serif; text-align: center; display: inline-block; background-color: #ccc; border: 1px solid #fff; border-radius: 9px; color: #666; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 50px; line-height: 32px; } .winkelmandKnoppen .volgendeStap a { float: right; font-family: 'PT Sans',sans-serif; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 50px; line-height: 32px; } #tekstenplaatsen h2 { margin: 20px !important; } #tekstenplaatsen p { margin-left: 20px; line-height: 25px; margin-bottom: 120px; } #tekstenplaatsen img { margin: 20px; margin-left: 50px; } .teBestellen { margin-top: 15px; color: #333 !important; } .winkelmandFooter .rechts .verzendkosten.controle { margin-top: 6px; padding-bottom: 14px; } #datumKiezer { float: left; width: 60%; margin-top: 5px; height: 30px; } #al_geboren { float: left; width: 40%; margin-top: 10px; height: 25px; } #akkoordVoorwaarden { float: left; width: 100%; margin-top: 10px; } #selectDag, #selectMaand { width: 75px; } #selectJaar { width: 100px; } #opmerkingen { float: left; width: calc(100% - 20px); } #opmerkingen textarea { width: 100%; margin-top: 5px; height: 76px; } .klantgegevensControle { width: calc(40% - 13px); margin-right: 26px; float: left; border: 1px dashed #ddd; border-radius: 10px; margin-top: 25px; margin-bottom: 25px; padding: 20px; padding-left: 0px; } .klantgegevensControle h2, #whatsNext h2 { font-family: 'PT Sans',sans-serif; padding-left: 20px; } .klantgegevensControle .inloggenLinks { margin-top: 0px !important; font-weight: bold; } .klantgegevensControle .inloggenRechts.noinput { margin-top: 0px !important; } .klantgegevensControle.leveradres { width: calc(50% - 13px) !important; } #whatsNext { width: calc(60% - 13px); float: left; border: 1px dashed #ddd; border-radius: 10px; margin-top: 25px; margin-bottom: 25px; padding: 20px; padding-left: 0px; } #whatsNext.leveradres { width: 100% !important; margin-top: 0px; } #whatsNext .vragen { float: left; padding-left: 20px; } #whatsNext .vragen span { font-weight: bold; color: #9dc215; } #whatsNext .vragen img { display: inline; } #whatsNext ul { margin: 17px 20px; } #whatsNext li { padding: 0 0 0 34px; display: block; background: url(../images/whatsnext_list.png) left 4px no-repeat; line-height: 34px; } #whatsNext li a { font-family: 'PT Sans',sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #51a9f9; } .winkelmandProducten { position: relative; float: left; width: 100%; margin-top: 15px; border: 1px solid #f4f2f2; margin-bottom: 15px; padding: 15px; } .winkelmandProducten h2 { color: #51a9f9; font-family: 'PT Sans'; font-weight: bold; margin-bottom: 10px; } .winkelmandProducten li { width: 14% !important; padding: 0px 20px 0 0 !important; } .winkelmandProducten li .prijs { margin-top: 5px; text-align: center; } .winkelmandProducten li .prijs span { font-size: 20px; color: #51a9f9; font-family: "pt_sans_narrowregular"; font-weight: bold; margin-right: 5px; } .winkelmandProducten li .prijs .leuk { font-family: 'PT Sans',sans-serif; text-align: center; display: inline-block; background-color: #9dc215; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 18px; padding: 7px 20px; line-height: 16px; } .winkelmandProducten li .prijs .type { color: #9dc215; font-family: 'PT Sans'; font-weight: bold; font-size: 16px; } #accountQR h2, #accountOntwerpen h2, #accountModelkaarten h2, #accountBestellingen h2, #actieReclameborden h2 { font-weight: bold; color: #333; } #accountQR .faqPane, #accountBestellingen .faqPane, #actieReclameborden .faqPane { display: inline-block; } .account-qr-img, .modelkaartRegelImg, .account-bestelling-img { width: 20%; margin: 20px; float: left; position: relative; } .account-qr-img img, .modelkaartRegelImg img, .account-bestelling-img img { width: 100%; margin-bottom: 15px; } .account-qr-img a { font-family: 'PT Sans',sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #51a9f9; } .account-qr-content, .modelkaartRegelInfo, .account-bestelling-content { width: calc(80% - 40px); float: left; position: relative; margin-top: 20px; } .account-qr-content h3 { font-family: 'beautiful_every_timeregular'; font-size: 24px; font-weight: bold; color: #9dc215; } .account-bestelling-content h3 { font-weight: bold; color: #51a9f9; margin: 5px 0px; width: 100%; float: left; } #accountQR label { line-height: 22px; } .qr-input { float: left; width: 75%; padding-right: 15px; } .qr-input span { color: #666 !important; } .qr-voorbeeld { float: left; width: 25%; } .qr-voorbeeld .foto { max-height: 95px; max-width: 95px; } #accountQR .registreren { margin-left: calc(20% + 20px) !important; } .qr-telefoon { background: url('../images/iphone.jpg') no-repeat top center; width: 100%; height: 753px; margin-top: 20px; padding-left: 182px; padding-top: 94px; position: relative; float: left; } .modelkaartRegel { float: left; border: 1px dashed #ddd; border-radius: 10px; margin-top: 20px; } .modelkaartRegelInfoLinks { float: left; width: 40%; padding-right: 10px; line-height: 25px; } .modelkaartRegelInfoRechts { float: left; width: 60%; padding-left: 10px; line-height: 25px; } .modelkaartRegelInfoLinks a { margin-top: 10px; float: left; font-family: 'PT Sans',sans-serif; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 50px; line-height: 32px; } .bestellingRegelLinks { float: left; width: 40%; padding-right: 10px; line-height: 25px; } .bestellingRegelMidden { float: left; width: 40%; padding-right: 10px; line-height: 25px; } .bestellingRegelMidden h3.subtotaal { font-family: 'beautiful_every_timeregular'; font-size: 20px; text-align: right; padding-right: 20px; font-weight: bold; color: #9dc215; margin-top: 15px; height: 17px; } .bestellingRegelMidden.subtotaal { text-align: right; padding-right: 20px; } .bestellingRegelRechts { float: left; width: 20%; padding-left: 10px; line-height: 25px; } .bestellingRegelRechts.subtotaal { margin-top: 5px; border-top: 2px solid #ddd; padding-top: 5px; font-weight: bold; } .bestellingRegelRechts.subtotaal.no-line { margin-top: 5px; border-top: none !important; padding-top: 5px; font-weight: normal !important;} .bestellingRegelRechts h3.ordertotaal { margin: 0px !important; } .account-bestelling-content .gratis { color: #9dc215; font-weight: bold; } #leesproefopkaart h2 { font-family: 'beautiful_every_timeregular'; font-size: 28px; color: #9dc215; font-weight: bold; margin-top: -9px; } #leesproefopkaart .inloggen { font-family: 'PT Sans',sans-serif; margin-right: 1%; margin-top: 14px; margin-bottom: 14px; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 20px; } .actieReclameborden { float: left; margin-top: 20px; } .actieReclameborden h2 { font-family: 'beautiful_every_timeregular'; font-size: 28px; color: #9dc215; margin-bottom: 5px; } .actieReclameborden p { margin-top: 5px; } .actieReclameborden .inschrijven { font-family: 'PT Sans',sans-serif; width: 100%; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 22px; padding: 7px 50px; line-height: 32px; } #actieReclameborden #accountKlantgegevens { margin-top: 20px; } #actieKiesMastLinks { float: left; position: relative; width: 20%; } #actieKiesMastLinks .inloggenRegel { width: 100%; } #actieKiesMastLinks .inloggenLinks { width: 100%; } #actieKiesMastRechts { float: left; position: relative; width: 80%; margin-top: 15px; } #actieKiesMastRechts img { width: 100%; } .inloggenButtons .opslaanActie { float: right !important; } .actie_accordion_link { text-decoration: none; } .actie_accordion_link h2 { padding-left: 25px !important; } #actieFotoLinks, #actieFotoRechts { float: left; position: relative; width: 50%; margin-top: 15px; } #actieFotoRechts .cropArea { margin-top: 0px !important; width: 450px !important; } #actieFotoRechts .cropArea img { width: 450px; border: 1px solid #ececec; } #actieFotoLinks .progressbox { padding-right: 22px !important; } #actieVoorbeeld { float: left; width: 230px; } .previewImage { width: 100%; } #actieKlaar { width: 100%; } #actieKlaar img { width: 100%; } .inloggenButtons #delen img { width: 255px; float: right; } /* Accountpagina timeline */ .timeline.flex-parent { display: flex; flex-direction: column; align-items: center; width: 100%; height: 95px; padding-top: 15px; } .timeline .input-flex-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; width: 100%; max-width: 920px; position: relative; z-index: 0; } .timeline .input { width: 25px; height: 25px; background-color: #34ba7d; position: relative; border-radius: 50%; display: block; -moz-appearance: none; -webkit-appearance: none; appearance: none; cursor: pointer; } .timeline .input::before, .timeline .input::after { content: ''; display: block; position: absolute; z-index: -1; top: 50%; transform: translateY(-50%); background-color: #34ba7d; height: 5px; max-width: 120px; } .timeline .input.checked { background-color: #34ba7d; } .timeline .input.checked::before { background-color: #34ba7d; } .timeline .input.checked::after { background-color: #c6c6c6; } .timeline .input.checked ~ .input, .timeline .input.checked ~ .input::before, .timeline .input.checked ~ .input::after { background-color: #c6c6c6; } .dot-info { width: 25px; height: 25px; display: block; position: relative; z-index: 1; background-image: url(../images/tijdlijn-sprite.png); background-repeat: no-repeat; } .dot-info .label { visibility: visible; position: absolute; font-size: 11px; top: 30px; left: 50%; transform: translateX(-50%); width: 100px; text-align: center; } .dot-info#stap-1 { background-position: top left -1px; } .dot-info#stap-2 { background-position: top left -25px; } .dot-info#stap-3 { background-position: top left -51px; } .dot-info#stap-4 { background-position: top left -125px; } .dot-info#stap-5 { background-position: top left -100px; } .dot-info#stap-6 { background-position: top left -75px; } .dot-info#stap-7 { background-position: top left -150px; } #wat-nu { color: #c7c7c7; font-style: italic; float: right; margin-right: 20px; font-size: 14px; } .account-btn { position: relative; float: left; width: 146px; box-sizing: border-box; height: 224px; background-color: #fff; cursor: pointer; margin-right: 15px; } .account-btn input[type=file] { width: 300px; height: 500px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; } .account-btn a { width: 146px; box-sizing: border-box; height: 224px; display: block; } .account-btn a .top { position: relative; float: left; width: 100%; height: 173px; box-shadow: 0px 0px 3px 1px rgba(100,100,100,0.3); background: linear-gradient(to top, #f1f1f1 40%,#fcfcfc 100%); overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px; color: #333; font-weight: normal; font-size: 12px; text-align: center; padding: 15px; } .account-btn a .top .placeholder { width: 80px; height: 90px; margin: 5px 18px 10px 18px; background-image: url(../images/account-btn-sprite.png); background-repeat: no-repeat; } .account-btn a .bottom { position: relative; float: left; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; width: 146px; height: 50px; transition: height ease-in-out 0.3s, padding-top ease-in-out 0.3s; color: #fff; text-transform: uppercase; text-align: center; vertical-align: middle; } .account-btn a:hover .bottom { height: 55px; padding-top: 5px; } .account-btn a .bottom span { position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -50%); } .account-btn.disabled a .bottom { background-color: #b7b7b7 !important; } .account-btn.disabled { opacity: 0.3; } .account-btn.disabled a { cursor: default !important; } .account-btn.disabled a:hover .bottom { height: 50px; padding-top: 0px; } /* Definieer de afbeelding van de knop */ .account-btn #upload .top .placeholder { background-position: top left; } .account-btn #upload .bottom { background-color: #ff6537; } .account-btn #bekijkLeesproef .top .placeholder { background-position: top left -80px; } .account-btn #bekijkLeesproef .bottom { background-color: #70b7e5; } .account-btn #betaalBestelling .top .placeholder { background-position: top left -400px; } .account-btn #betaalBestelling .bottom { background-color: #242e47; } /* einde knopdefinities */ /* ###alert box ### */ .statusBox { float: left; width: 100%; margin-top: 4px; margin-bottom: 4px; border-radius: 7px; border: 1px solid; padding: 10px; } /*.alertBox ul { padding-left: 15px; }*/ .statusBox li { padding-left: 25px; } .statusBox.error { color: #333; border-color: #ff0000; background: #ffd1d1 url(../images/alertIconError.png) no-repeat 9px 9px; } .statusBox.error a { color: #ff0000; font-weight: bold; } .statusBox.succes { color: #333; border-color: #d6e9c6; background: #dff0d8 url(../images/alertIconSucces.png) no-repeat 9px 9px; } .statusBox.succes a { color: #3c763d; font-weight: bold; } .statusBox.warning { color: #333; border-color: #fcb53f; background: #fff4e2 url(../images/alertIconWarning.png) no-repeat 9px 9px; } .statusBox.warning a { color: #fcb53f; font-weight: bold; } .statusBox.info { color: #333; border-color: #60bfff; background: #d5efff url(../images/alertIconInfo.png) no-repeat 9px 9px; } .statusBox.info a { color: #60bfff; font-weight: bold; } /* ### inner container ### */ #innerLeftCntr { width: 291px; float: left; padding: 10px 44px 0 0; } /* ### accordionbox ### */ .accordionBox { width: 100%; overflow: hidden; } .accordionBox .h2 { padding: 0 0 0 14px; line-height: 37px; font-size: 16px; margin-bottom: 7px; color: #666; background: #f4f3f3 /*url(../images/bg4.png) left top no-repeat*/; cursor: pointer; } .accordionBox .h2 span { display: block; background: url(../images/arrow4.png) right center no-repeat; } .accordionBox .h2 a { color: #666; text-decoration: none; } .accordionBox .h2 a:active { color: #666; } .accordionBox ul { padding: 0 0 30px; list-style: none; display: none; } .accordionBox li { padding: 0 0 0 14px; border-bottom: 1px dotted #ddd; line-height: 50px; } .accordionBox li .h3 > a { line-height: 37px; display: block; text-decoration: none; font-size: 15px; color: #666; background: url(../images/plus.png) no-repeat right top 2px; } .accordionBox .h3.active > a { color: #9dc215; background: url(../images/minus.png) no-repeat right top 2px; } .accordionBox .h2.active { color: #fff; background: #51a9f9; /*background: url(../images/bg4_active.png) left top no-repeat;*/ } .accordionBox .h2.active span { background: url(../images/arrow4_active.png) right center no-repeat; } .accordionBox .h2.active a { color: #fff; text-decoration: none; } .accordionBox.account ul { padding-bottom: 3px; } .accordionBox.account li { line-height: 35px; } .accordionBox.account li:last-child { border-bottom: none; } .accordionBox.account li a { font-family: 'Open Sans',sans-serif; font-size: 13px; color: #333; line-height: 23px; text-decoration: none; } .accordionBox.account li a:hover, #collecties-list li a:hover { color: #9dc215 !important; } .accordionBox.account li a.active { color: #9dc215 !important; text-decoration: none; } .accordionBox li ul { } #collecties-list { padding-left: 14px; } .accordionBox li li, #collecties-list li { line-height: 23px; border: none; padding: 0; } .accordionBox li li a, #collecties-list li a { font-family: 'Open Sans',sans-serif; font-size: 13px; color: #333; line-height: 23px; text-decoration: none; } .accordionBox li li a:hover, #collecties-list li a:hover { color: #9dc215 !important; } .accordionBox .open { display: block; } /* ### inner right container ### */ #innerRightCntr { float: left; width: calc(100% - 291px); } #innerRightCntr .margin { padding-top: 20px; } #innerRightCntr .margin p { margin-top: 20px; margin-bottom: 20px; } #innerRightCntr .margin h2.green { padding: 0 0 16px; font-family: 'beautiful_every_timeregular'; font-size: 24px; color: #9dc215; } #innerRightCntr .margin h3.green { font-family: 'Open Sans',sans-serif; font-size: 20px; color: #9dc215; font-weight: bold; } #innerRightCntr .margin .handig-list { line-height: 24px; } #innerRightCntr .margin .handig-list li { background: url(../images/arrow_2.png) no-repeat 0px 5px; padding-left: 20px; } #innerRightCntr .faq { cursor: pointer; } /* ### filter box ### */ .filterBox { padding: 0 13px; width: 100%; overflow: hidden; background: #f4f2f2; } .filterBox .left, .filterBox .left2 { float: left; } .filterBox .col { padding: 11px 8px 11px 0; float: left; border-right: 1px solid #ddd; } .filterBox .label { padding: 0 9px 0 0; display: block; font-family: 'Open Sans',sans-serif; font-size: 14px; color: #666; text-transform: uppercase; float: left; line-height: 28px; } .filterBox .col a { padding: 0 11px 0 0; display: inline-block; } .filterBox .col2 { padding: 11px 0 8px 14px; float: left; } .filterBox .select { position: relative; width: 215px; height: 30px; display: inline-block; } .filterBox select { background: #fff url(../images/select_arrow3.png) no-repeat right; } .filterBox .right, .filterBox .right2 { width: 40%; float: right; padding-bottom: 10px; } .filterBox .paging { padding: 14px 0 0; width: auto; float: right; } .filterBox .paging ul { padding: 0 5px; width: auto; float: left; } .filterBox .paging li { display: inline-block; line-height: 26px; font-size: 14px; color: #666; } .filterBox .paging li a { padding: 0 2px; display: inline-block; color: #5fbfff; text-decoration: none; font-weight: normal !important; } .filterBox .paging li a:hover { text-decoration: underline; } .filterBox .paging a.lastprev { padding: 0 6px 0 0; width: 30px; height: 24px; display: block; float: left; background: url(../images/last_prev.png) left top no-repeat; } .filterBox .paging a.prev { width: 24px; height: 24px; display: block; float: left; background: url(../images/prev2.png) left top no-repeat; font-size:0px; } .filterBox .paging a.next { width: 24px; height: 24px; display: block; float: left; background: url(../images/next2.png) left top no-repeat; font-size:0px; } #grid-small { background: url(../images/grid1.png) left top no-repeat; width: 23px; height: 22px; margin-right: 10px; } #grid-small:hover, #grid-small.active { background: url(../images/grid1_active.png) left top no-repeat; } #grid-large { background: url(../images/grid2.png) left top no-repeat; width: 23px; height: 22px; } #grid-large:hover, #grid-large.active { background: url(../images/grid2_active.png) left top no-repeat; } .voordeelBox { width: 100%; text-align: right; height: 30px; font-family: 'beautiful_every_timeregular'; font-size: 18px; font-weight: bold; } /* ### gallerybox box ### */ .galleryBox { padding: 0 0 40px; width: 100%; overflow: hidden; } .galleryBox ul { margin-right: -40px; } .galleryBox li { position: relative; width: 33.3%; float: left; padding: 32px 40px 0 0; box-sizing: border-box; } .galleryBox.specials { overflow: visible; float: left; } .galleryBox.specials ul { width: 100%; } .galleryBox.specials li { overflow: hidden; width: 31.3%; padding: 0; margin: 0 0 2% 0; border-radius: 5px; } .galleryBox.specials li:nth-child(3n+2) { margin: 0 2% 2% 2%; } .galleryBox.specials img { transition: transform 1s ease; } .galleryBox.specials li:hover img { transform: scale(1.05); } .galleryBox.specials li .label { position: absolute; bottom: 20px; left: 20px; background-color: #fff; border-radius: 3px; color: #333; font-weight: bold; text-align: center; box-shadow: 1px 1px 0px 0px #333; padding: 6px 12px; font-size: 14px; } .galleryBox .voordeelItem { width: 33.3%; } #voordeel13, #voordeel23, #voordeel33 { display: none; } .galleryBox li img { width: 100%; } .galleryBox li .image1 { position:absolute; z-index: 2; left: 0; height: 100%; top: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .galleryBox li .image1:hover { opacity: 0; } .galleryBox li .image2 { position:absolute; z-index: 1; left: 0; top: 0; } /* .galleryBox li .image2:hover { opacity: 1; } */ .galleryBox .image a { float: left; border: 1px solid #e5e5e5; width: 100%; height: 100%; position: relative; } .galleryBox .image { position: relative; float: left; width: 100%; } .galleryBox ul.grid5 li { width: 25%; } .galleryBox ul.grid5 .voordeelItem { width: 25%; } .galleryBox ul.grid4 li { width: 33.3%; } .galleryBox .collectieLink { float: left; text-decoration: none; text-align: center; color: #51a9f9; width: 100%; margin-top: 10px; border: none !important; } .galleryBox .sticker { position:absolute; top: -15px; right: -15px; height:71px; width:71px; z-index: 4; } .galleryBox .sticker_folie { position:absolute; top: 40px; right: 40px; height:26px; width:98px; z-index: 4; color: #fff; text-transform: uppercase; font-weight: bold; padding:4px; text-align: center; box-sizing: border-box; letter-spacing: -0.5px; } .galleryBox .sticker_ltd { position:absolute; bottom: 8px; left: 8px; height:23px; width:30px; background:url('../images/LTD.png'); z-index: 2; } .sticker.nieuw { background:url('../images/nieuw.png'); } /*.sticker.folie { background:url('../images/foliedruk.png'); }*/ .sticker.voorraad { background:url('../images/voorraad.png'); } .sticker.uitverkocht { background:url('../images/uitverkocht.png'); height: 100px; width: 100px; } #kaartImageBox .sticker { position:absolute; top: 25px; left: calc(40% - 90px); z-index: 2; height:100px; width:100px; } .favbuttons a { float: left; width: 100%; border: none; color: #51a9f9; text-decoration: none; font-weight: bold; line-height: 24px; padding-left: 32px; display: block; } .favbuttons .bekijken { background: url('../images/fav_bekijken.png') no-repeat top left; } .favbuttons .bestellen { background: url('../images/fav_bestellen.png') no-repeat top left; } .favbuttons .aanpassen { background: url('../images/fav_aanpassen.png') no-repeat top left; } .favbuttons .proefdruk { background: url('../images/fav_proefdruk.png') no-repeat top left; } .favbuttons .verwijderen { background: url('../images/fav_verwijderen.png') no-repeat top left; } .favbuttons .delen { background: url('../images/fav_delen.png') no-repeat top left; } .favbuttons p { margin: 5px 0px; } /* ### footer container ### */ #footerCntr { width: 100%; float: left; } /* ### footer box ### */ .footerBox { width: 100%; } .footerBox .inner { padding: 40px 0 25px; background: url(../images/footerBg.jpg) left top repeat; } .footerBox .inner2 { padding: 0 25px; background: linear-gradient(to right, #cbf3f2 0%,#ffffff 75%); } .footerBox .design { width: 189px; height: 38px; position: absolute; left: 50%; top: -52px; margin: 0 0 0 -94px; } .footerBox .holder { margin-right: -30px; } .footerBox .block { padding: 0 30px 0 0; width: 20%; float: left; } .footerBox .block .h2 { font-family: 'PT Sans',sans-serif; height: 30px; line-height: 30px; font-size: 26px; color: #a1d2d6; font-weight: 700; } .footerBox .block ul { padding: 10px 0 0; list-style: none; } .footerBox .block li { display: block; } .footerBox .block li a { font-family: 'Open Sans',sans-serif; font-size: 15px; color: #666; text-decoration: none; line-height: 24px; } .footerBox .block li a.meer, .footerBox .block li a:hover { text-decoration: underline; } .footerBox .block .ekomi_tekst { font-family: 'Open Sans',sans-serif; font-size: 15px; color: #666; text-decoration: none; line-height: 24px; padding: 10px 0 60px; background: url(../images/sterren.png) no-repeat bottom center; } .footerBox .block .ekomi_tekst .cijfer { font-family: 'pt_sans_narrowregular'; font-size: 30px; display: inline-block; padding-top: 12px; } .footerBox .block .ekomi_tekst .cijfer img { display: inline; vertical-align: top; margin-top: -10px; } .footerBox .block .ekomi_score { width: 100%; padding: 10px 0 0; float: left; } .footerBox .block .ekomi_score .avg { color: #fff; font-size: 18px; font-weight: bold; background: url(../images/ekomiAvgBg.png) top left no-repeat; height: 29px; line-height: 29px; width: 41px; text-align: center; float: left; } .footerBox .block .ekomi_score .stars { background: url(../images/ekomiStarsBg.png) top left no-repeat; height: 28px; width: 157px; float: left; margin-left: 10px; z-index: 1; } .footerBox .block .ekomi_score .stars .overlay { background: url(../images/ekomiStarsOverlay.png) top left no-repeat; height: 28px; float: left; z-index: 2; } .footerBox .block .ekomi_link { width: 100%; padding: 10px 0 0; float: left; } .footerBox .block .ekomi_link a { font-family: 'Open Sans',sans-serif; font-size: 13px; padding: 0 25px 0 0; color: #51a9f9; font-weight: bold; text-decoration: none; display: inline-block; background: url(../images/arrow.png) right 2px no-repeat; } /* ### bottom box ### */ .footerbottom { padding: 28px 0; width: 100%; overflow: hidden; } .footerbottom .left { width: 35%; float: left; } .footerbottom .h3 { font-size: 20px !important; color: #999999; font-weight: 700; text-transform: uppercase; } .footerbottom .h3::first-letter { font-size: 150%; } .footerbottom .left p { font-family: 'Open Sans',sans-serif; font-size: 15px; color: #999999; } .footerbottom .left p a { color: #51a9f9; text-decoration: none; } .footerbottom .left p a:hover { text-decoration: underline; } .footerbottom .middle { float: left; width: calc(65% - 152px); } .footerbottom .right { width: 152px; float: left; } .footerbottom .right ul { padding: 8px 0 0; overflow: hidden; } .footerbottom .right li { padding: 0 12px 0 0; float: left; } .footerbottom .right .facebook { background-image: url(../images/social_media.png); background-repeat: no-repeat; background-position-x: -11px; background-position-y: -6px; background-size: 386%; width: 38px; height: 38px; display: block; } .footerbottom .right .twitter { background-image: url(../images/social_media.png); background-repeat: no-repeat; background-position-x: -97px; background-position-y: -6px; background-size: 386%; width: 38px; height: 38px; display: block; } .footerbottom .right .instagram { background-image: url(../images/social_media.png); background-repeat: no-repeat; background-position-x: -54px; background-position-y: -6px; background-size: 386%; width: 38px; height: 38px; display: block; } /* ### CopyRight box ### */ .copyRightBox { padding: 14px 0 12px; overflow: hidden; width: 100%; } .copyRightBox p { font-family: 'Open Sans',sans-serif; font-size: 13px; color: #666; float: left; } .copyRightBox a { font-family: 'Open Sans',sans-serif; color: #51a9f9; text-decoration: none; } .copyRightBox a:hover { text-decoration: underline; } .copyRightBox .right { float: right; margin-left: 20px; } #pageTop { display: none !important; position: fixed; bottom: 50px; right: 25px; width: 158px; height: 54px; background-color: #FCEFA1; background: url(../images/omhoog-button.png) no-repeat top left; padding-top: 12px; padding-left: 15px; cursor: pointer; } #pageTop a { font-family: 'Open Sans',sans-serif; font-size: 20px; color: #fff; text-decoration: none; font-weight:bold; } #indexTeksten { display: none; position: fixed; bottom: 15px; right: 25px; width: 158px; height: 54px; background-color: #FCEFA1; background: url(../images/geboorte-teksten/teksten-index-btn-top-grijs.png) no-repeat top left; padding-top: 8px; padding-left: 10px; cursor: pointer; } #indexTeksten a { font-family: 'Open Sans',sans-serif; font-size: 14px; color: #fff; text-decoration: none; font-weight:bold; } #indexTeksten a:hover { text-decoration: none; } #liveSupportS { position: fixed; z-index: 11; cursor: pointer; width: 39px; height: 91px; right: 0px; top: 239px; background: transparent url('../images/support_small.png') no-repeat top left; } #liveSupportL { position: fixed; z-index: 10; cursor: pointer; width: 257px; height: 275px; right: -219px; top: 150px; background: transparent url('../images/support.png') no-repeat top left; color: #fff; font-size: 20px; font-weight: bold; font-family: 'PT Sans',sans-serif; padding-top: 223px; padding-left: 83px; } /* #Media Queries ================================================== */ @media only screen and (max-width: 1299px) { .sliderBox li, .sliderBoxTWA li { opacity: 1 !important; } } @media only screen and (max-width: 1219px) { #headerCntr .menu #geboortekaartjes { background: #51a9f9; margin-top: 0; height: auto; padding-top: 0px; } .center { padding: 0 10px; overflow: hidden; } .headerBox .search input.field { width: 80%; } .sliderBox li .detail, .sliderBoxTWA li .detail { width: 70%; padding: 0 0 0 120px; } .styleBox li { width: 20%; } .announcementsBox .holder { margin-right: -31px; } .announcementsBox .block { padding: 0 15px 0 0; width: 49%; } .sliderBox img, .sliderBoxTWA img { width: 100%; } .sliderBox .slick-prev, .sliderBoxTWA .slick-prev { margin: -28px 0 0; left: 20px; } .sliderBox .slick-next, .sliderBoxTWA .slick-next { margin: -28px 0 0; right: 20px; } .headerBox .search { width: 40%; } .sliderBox ul, .sliderBoxTWA ul { width: 100%; } .sliderBox li, .sliderBoxTWA li { height: 100%; } .galleryBox li { width: 33.3%; } #navBox li a { font-size: 14px; } #pageTop { /*display: block !important;*/ background: url(../images/omhoog-button_small.png) no-repeat top right; right: 10px; width: 80px; } #pageTop a { display: none; } .winkelwagenStappenBox .stap { position: relative; float: left; width: calc(33% - 6px); margin-right: 10px; } .winkelwagenStappenBox .stap a { font-size: 18px; } .winkelwagenStappenBox #winkelmand a, .winkelwagenStappenBox #winkelmand a:hover, .winkelwagenStappenBox #winkelmand.active a { background-position: calc(50% - 45px) 7px; } .winkelwagenStappenBox #klantgegevens a, .winkelwagenStappenBox #klantgegevens a:hover, .winkelwagenStappenBox #klantgegevens.active a { background-position: calc(50% - 58px) 7px; } .winkelwagenStappenBox #bestellen a, .winkelwagenStappenBox #bestellen a:hover, .winkelwagenStappenBox #bestellen.active a { background-position: calc(50% - 82px) 7px; } .footerbottom .middle, .footerbottom .right { width: 100%; margin-top: 15px; padding-left: 44px; } #gepersonaliseerdeModelkaart { display: none; } #gepersonaliseerdeModelkaartMobiel { display: block; } .textBox.modelkaart h1 { width: 100%; } #kaart-opmaken-tekstvarianten-kader-opgeslagen { width: 60%; } #handigBox .d50 .card-blue li.extra, #handigBox .d50 .card-green li.extra, #handigBox .d50 .card-pink li.extra { height: auto; font-size: 18px; } } @media only screen and (max-width: 979px) { #headerCntr { height: auto; } #headerCntr .logo { padding: 0; width: 30%; } #headerCntr .logo img { width: 100%; } #headerCntr .menu li a { font-size: 16px !important; } #headerCntr .menu #geboortekaartjes { padding: 0 !important; margin-right: 0; } #headerCntr .menu li.right a { font-size: 14px !important; } .headerBox .right { width: 67%; } .headerBox ul.link { width: auto; padding: 13px 10px 0 0; } .headerBox .search { width: 36%; } .headerBox .search input.field { width: 70%; } .headerBox li { padding: 0 10px 0 0; } .headerBox li a { font-size: 13px; } .topBox li { padding: 0 0 0 8px; font-size: 11px; } #headerCntr .menu li { padding: 0 0 0 16px; } .imageBox li { width: 50%; padding: 0 26px 25px 0; } .blockBox { padding-top: 0px; } .blockBox .block { width: 100%; padding: 30px 0 0; } .blockBox .block.line { background: none !important; } .styleBox li { width: 33%; padding: 0 25px 25px 0; } /*.announcementsBox li .inner { height: 450px; }*/ .announcementsBox .info { padding-top: 0px; } .announcementsBox ul { margin-right: -10px; } .announcementsBox li { padding: 0 10px 0 0; padding-bottom: 20px; } .announcementsBox li .h6 { font-size: 15px; } .announcementsBox li a { font-size: 12px; } .footerBox .block { width: 33.3%; padding: 0 30px 30px 0; } .announcementsBox h2 { font-size: 18px; } .filterBox { height: auto; } .filterBox .left { width: 100%; } .filterBox .left2 { display: none; } .filterBox .label { font-size: 11px; } .filterBox .right { width: 230px; margin: 0 auto; } .filterBox .right .paging { padding: 0; } .filterBox .col { padding-bottom: 0; } .galleryBox ul { margin-right: -20px; } .galleryBox li { width: 33.3%; padding: 32px 20px 0 0; } .galleryBox .sticker_folie { right: 20px; } #voordeel1, #voordeel2, #voordeel3 { display: none; } #voordeel13, #voordeel23, #voordeel33 { display: block; } .galleryBox .voordeelItem { width: 33.3% !important; } .sliderBox li, .sliderBoxTWA li { opacity: 1 !important; } #goedkope-kaartjes { display: block; } #stijl-klassiek { display: inline-block; } #content { margin-top: 0px !important; } .giftBox { display: none; } .contactBox li { width: 50%; } .laatstBekekenBox li { width: 33.33%; } .kaartDetailsRegel .links { width: 50%; } .kaartDetailsRegel .rechts { width: 50%; } .klantDetailsRegel .links { width: 50%; } .klantDetailsRegel .rechts { width: 50%; } .inloggenRechts, .inloggenLinks, #getPrijsWrapper .inloggenLinks, #getPrijsWrapper .inloggenRechts { width: 50%; } #getPrijsUSP div { box-sizing: border-box; width: 50%; } #navBox { width: 30%; margin-right: 2%; } #handigBox { width: 68%; } .infoQrBox li { width: 100% !important; padding-right: 0px !important; } .top10new { width: 100% !important; } .klantenserviceBlokje { width: 50%; } .klantenserviceBlok { background-size: 200px; } .winkelwagenStappenBox #winkelmand a, .winkelwagenStappenBox #winkelmand a:hover, .winkelwagenStappenBox #winkelmand.active a { background-image: none; padding-left: 0px; padding-right: 0px; } .winkelwagenStappenBox #klantgegevens a, .winkelwagenStappenBox #klantgegevens a:hover, .winkelwagenStappenBox #klantgegevens.active a { background-image: none; padding-left: 0px; padding-right: 0px; } .winkelwagenStappenBox #bestellen a, .winkelwagenStappenBox #bestellen a:hover, .winkelwagenStappenBox #bestellen.active a { background-image: none; padding-left: 0px; padding-right: 0px; } .productRegel .image { width: 8%; } .productRegel .image img { width: 100%; } .productRegel .artikelInfo { float: left; width: 89%; } /*.productRegel .prijs { float: left; margin-left: 12px; width: 100px; margin-top: 6px; } .productRegel .aantal { float: left; margin-left: 12px; width: 80px; } .productRegel .aantal input { border: 1px solid #ddd; float: left; height: 30px; overflow: hidden; padding: 4px 5px; width: 100%; } .productRegel .aantal span { display: inline-block; margin-top: 6px; } .productRegel .subtotaal { float: left; margin-left: 12px; width: 100px; margin-top: 6px; font-weight: bold; text-align: right; } .productRegel .delete { float: left; margin-left: 12px; width: 30px; margin-top: 5px; } .productRegel .gratis { color: #9dc215; font-weight: bold; }*/ .winkelmandFooter .links input { width: 80%; } .winkelmandFooter .links a { margin-left: 0px !important; margin-top: 10px; width: 80%; } #datumKiezer { width: 100%; } #al_geboren { width: 100%; } /*#kaart-opmaken-image.staand { width: 50% !important; max-width: 50%; margin-left: 25%; }*/ #kaart-opmaken-controls.staand { width: 100%; margin-left: 0px; } #kaart-opmaken-zijde-kiezer.staand { width: 100% !important; margin-left: 0px; } #kaart-opmaken-zijde-kiezer.staand #kaart-opmaken-zijde-kiezer-tekst { width: calc(100% - 160px) !important; } .galleryBox .sticker { right: 10%; } .overslaan { margin-top: -25px; } .modelkaartKeuzeBox .stap a { font-size: 15px !important; padding: 12px 10px 2px 10px !important; } #proefdrukLinks { width: 100%; } #proefdrukRechts { width: 100%; } #download-idml { display: none; } #uniekeService { display: none; } } @media only screen and (max-width: 812px) { .topBox { display: none; } /*.topBox { height: 10px; } .topBox ul { display: none; }*/ #headerCntr { height: 48px; background-color: #fff; box-shadow: 0px 4px 10px rgba(100,100,100,0.3); position: sticky; position: -webkit-sticky; top: 0px; z-index: 10000; } #headerCntr .menuBox { /*height: 48px; overflow: hidden;*/ display: none; } #headerCntr .menu { display: none; } .desktop-only { display: none !important; } #headerCntr .mobileMenu { display: block; position: absolute; top: 0; right: 0; } #contentCntr .mobileFilter, #filter { display: block; } .headerBox { padding: 5px 0; width: 100%; overflow: visible; } .headerBox ul.link { display: none; } #headerCntr .logo img { display: inline-block; width: auto; height: auto; max-height: 34px; } #headerCntr .logo { width: calc(100% - 125px); /*text-align: center;*/ } .headerBox .right { display: none; width: 100%; } .headerBox .search, #mm-nav .search, #mm-filter .search { width: 90%; margin: auto; float: none; padding: 0px; margin: 15px; } .headerBox .search input.field, #mm-nav .search input.field, #mm-filter .search input.field { width: calc(100% - 37px); } .headerBox .menu-btn, .headerBox .winkelwagen, .headerBox .klantenservice { display: block; } #leftCntr { display: none; width: 100%; overflow: hidden; padding: 0; } .imageBox #glansfolie { display: block; } .imageBox #foto { display: none; } #startIntro { display: none; } #startIntro2 { display: block; } #categoryStart2 { display: block; } #formBox2 { display: block; margin-bottom: 25px; } .categoryBox ul { overflow: hidden; } .categoryBox li { width: 50%; float: left; } .categoryBox .h2 { padding: 0 0 5px; } .categoryBox ul { padding: 0 0 14px; } .giftBox { margin: 25px auto 0; } #rightCntr { width: 100%; overflow: hidden; padding: 10px 0 0 0; } .blockBox { padding: 10px 0 0; } .styleBox { padding: 0; } .styleBox .h2 { background-size: 100%; background-position: left bottom; } .styleBox ul { text-align: center; width: 100%; } .styleBox li { width: 48%; float: none; margin: 0; padding: 10px; display: inline-block; } /*.announcementsBox .inner { height: 415px; }*/ .announcementsBox ul { width: 100%; } .announcementsBox li { width: 48%; } .announcementsBox .block { width: 100%; padding: 0; padding-right: 15px; } .announcementsBox .info { padding-top: 10px; } .announcementsBox li .h6 { font-size: 17px; } .announcementsBox li a { font-size: 13px; } .contentBox .image { width: 40%; } .contentBox .image img { width: 100%; } #contentCntr { padding: 10px 0; } .footerBox .block { width: 42%; margin-left: 30px; } .footerbottom .left { width: 100%; overflow: hidden; padding-left: 15px; background: none; } .footerbottom .middle, .footerbottom .right { padding-left: 15px; } .footerbottom .middle img { width: 100%; } .headerBox .right { width: 90%; margin: 0 auto; } #innerLeftCntr { padding: 0; width: 100%; } #innerRightCntr { width: 100%; overflow: hidden; } .accordionBox .h2 { background-size: cover; } .accordionBox .h2.active { background-size: cover; } .sliderBox { display: none; } /*.sliderBoxTWA li { display: none; } .sliderBoxTWA li:first-child { display: block; opacity: 1!important; }*/ #mm-andere-kaartjes { display: none; } .breadcrumbsBox { display: none; } .galleryBox ul.grid5 li { width: 33%; } .galleryBox ul.grid4 li { width: 33%; } .galleryItem .image a { display: block !important; } .filterBox .left { display: none; } .filterBox .right { width: 100%; } .filterBox .right .paging { padding-top: 14px; width: 100%; } .filterBox .paging ul { display: none; } .filterBox .paging a.lastprev { display: none; } .filterBox .paging a.prev { width: auto; margin-right: 32px !important;padding-left: 38px; line-height: 30px; font-family: 'beautiful_every_timeregular'; font-size: 21px; color: #5fbfff; text-decoration: none; background: url(../images/prev2.png) left 0px no-repeat; } .filterBox .paging a.next { float: right; width: auto; margin-left: 32px !important; padding-right: 38px; line-height: 30px; font-family: 'beautiful_every_timeregular'; font-size: 21px; color: #5fbfff; text-decoration: none; background: url(../images/next2.png) right 0px no-repeat; } .accordionBox { display: none; } .kwijtBox li { width: 100%; } .detailSubButtons .favorieten a, .detailSubButtons .delen a { font-size: 19px; background-position: 20px 9px; } #kaartImageBox { width: 100%; padding-right: 0px; margin-bottom: 20px; } #kaartDetailBox, #inloggenBox { width: 100%; margin-left: 0px; overflow: visible !important; } #inloggenBox .content { margin-top: 25px; } .extraInformatie .extraInfoPane li { width: 100%; } .kaartImage { margin: 0 auto; max-width: 437px; } .kaartImageDetails { display: none; } .inloggenButtons { text-align: center; } .inloggenButtons .registreren, .inloggenButtons .inloggen { margin-left: 0px; } .inloggenButtons .wijzig, .inloggenButtons .kwijt { width: 100%; padding-left: 0px; margin-top: 15px; } #inloggenLinks { width: 100%; margin-right: 0px; } #inloggenRechts { width: 100%; } .inloggenMidden { width: 25% ; } .inloggenRechts2 { width: 25%; } #navBox { display: none; } #handigBox { width: 100%; } .filterBox .right2 { width: 100%; } .klantenserviceBlokje { padding-left: 5%; padding-right: 5%; height: 200px; } .klantenserviceBlok { background-image: none !important; } .klantenserviceBlok .vragenBlok { width: 100%; } .kaartGekoppeld { display: none; } /* Alle opmaak gerelateerde dingen zijn voor landscape mobiele devices */ /*#kaart-opmaken-image.staand { margin-left: 25%; max-width: 50%; width: 50% !important; }*/ #kaart-opmaken-tekstvarianten-kader-voorbeeld { width: 100%; margin-bottom: 15px; padding-right: 0px; } #kaart-opmaken-tekstvarianten-kader-opgeslagen { width: 100%; } #kaart-opmaken-tekstveld { width: 100%; margin-bottom: 15px; } #kaart-opmaken-opties-rechts { width: 100%; } #kaart-opmaken-lettertype, #kaart-opmaken-verplaatsen { margin-right: 30px; } #kaart-opmaken-tekstkleur { margin-left: 20px; } #kaart-opmaken-tekstkleur.staand { margin-left: 0px !important; } #kaart-opmaken-sliders { width: calc(100% - 128px); } #kaart-opmaken-grootte, #kaart-opmaken-rotatie { width: 100%; } .kaart-opmaken-grootte-slider, .kaart-opmaken-rotatie-slider { width: calc(100% - 110px); } #kaart-opmaken-winkelwagen, #kaart-opmaken-opslaan, #kaart-opmaken-proefdruk, #kaart-opmaken-vorige-stap { width: 100%; text-align:center; font-size: 18px !important; } #kaart-opmaken-winkelwagen a, #kaart-opmaken-opslaan a, #kaart-opmaken-proefdruk a, #kaart-opmaken-vorige-stap a { width: 100%; font-size: 17px !important; padding: 7px 40px; margin-left: 0px; } #kaart-opmaken-winkelwagen #opmakenVolgendeButton, #saveAccountBtn { margin-left: 0px !important; } #kaart-opmaken-opslaan a::after, #kaart-opmaken-waarschuwing #saveBtn::after { content: ''; } #kaart-opmaken-inloggen-terug { display : none; } #kaart-opmaken-buttons-right { width: 100%; } #kaart-opmaken-proefdruk span { margin-top: 0px; font-size: 14px; } #kaart-opmaken-waarschuwing #winkelwagenBtn, #kaart-opmaken-waarschuwing #saveBtn { width: 48%; font-size: 17px !important; padding: 7px 30px; } #kaart-opmaken-waarschuwing #winkelwagenBtn { margin-left: 4%; } #kleiner, #groter { cursor: pointer; } #lettertypeKiezen { width: 60%; } #kleurKiezen { width: 40%; } #kaartVoorbeeld { width: 100%; padding-left: 0px; } .winkelmandKnoppen .verderWinkelen, .winkelmandKnoppen .volgendeStap { width: 100%; } .winkelmandKnoppen .volgendeStap { margin-top: 20px; } .winkelmandKnoppen .verderWinkelen a, .winkelmandKnoppen .volgendeStap a { width: 100%; } .winkelwagenStappenBox .stap a { font-size: 16px; } #regelsHeader #regelsHeaderArtikel { width: 67%; } .winkelmandFooter .rechts .verzendkosten select { width: 100%; } .winkelmandFooter .rechts .subtotaal { margin-top: 24px; } .winkelmandFooter .links input { width: 80%; } .winkelmandFooter .links a { margin-left: 0px; margin-top: 15px;} #whatsNext { width: 100%; } .productRegel .image { width: 25%; margin-right: 2%; } .productRegel .artikelInfo { width: 73%; } #regelsHeader { display: none; } .productRegel .delete { display: none; } .productRegel .delete2 { display: block; } .productRegel .artikel { width: 100%; line-height: 35px; } .productRegel .artikel h2 { margin-top: 0px; } .productRegel .artikel span { width: 46%; } .productRegel .label { display: inline !important; margin-right: 5%; } .productRegel .prijs { margin-left: 0px; width: 30%; } .productRegel .aantal { margin-left: 0px; width: 70%; } .productRegel .aantal input { width: 50%; float: none; } .productRegel .subtotaal { margin-left: 0px; width: 100%; text-align: right; } .productRegel .empty { display: none !important; } .winkelmandFooter .rechts .totaal { width: 50%; padding-top: 7px; } .winkelmandFooter .rechts .totaalbedrag { width: 50%; } #selectDag, #selectMaand { width: 55px; } #selectJaar { width: 72px; } #datumKiezer select { padding: 0px 2px; } #tekstenplaatsen { display: none; } .klantgegevensControle, .klantgegevensControle.leveradres { width: 100% !important; } .mail-info-links { width: 100%; margin-right: 0px; } .mail-info-rechts { width: 100%; } #liveSupportS { display: none; } #liveSupportL { display: none; } .inloggenRegel.usp.opmaak #speerpunten li { width: 100% !important; height: auto; } .modelkaartKeuzeBox { margin-bottom: 40px; } .modelkaartKeuzeBox a { width: 100%; font-size: 16px !important; } .modelkaartKeuzeBox #tussen { width: 100%; padding-top: 0px; font-size: 32px; margin-bottom: 20px; } .inloggenRegel.usp.opmaak .speerpunten { width: 100%; } .inloggenRegel.usp.opmaak .speerpunten li { height: 25px; background-position: left 0px; } .inloggenRegel.usp.opmaak .speerpuntenImage { width: 100%; } .actieReclameborden { display : none; } #actieKiesMastLinks, #actieKiesMastRechts { width: 100%; } #stap2form .kwijt, #stap3form .kwijt { width: 15%; margin-top: 25px; } #actieFotoLinks.stap3, #actieFotoRechts.stap3 { width: 100%; } #actieFotoRechts .cropArea { width: 100%; } #actieFotoRechts .cropArea img { width: 100%; } .galleryBox .sticker { background-size: 75px !important; width: 75px !important; height: 75px !important; } #kaartImageBox .sticker { top: 55px !important; right: 45px !important; left: auto; } .geboorte_doorgeven { font-size: 11px; } .geboorte_doorgeven .mail-info-links { display: none; } .fancybox-inner h2 { padding: 0px; } .geboorte_doorgeven .inloggenRechts, .geboorte_doorgeven .inloggenLinks { font-size: 11px; } #proefdrukLinks { width: 30%; } #proefdrukRechts { width: 70%; } .uitlegBox { border: none; margin: 0px 4% 20px; } .uitlegBox div { display: none; } .uitlegBox #mobileTitel { display: block; } .textBox #kaartOpmaken h1 { float: left; width: 50%; } .textBox #kaartOpmaken .overslaan { margin-bottom: 0; } .textBox #kaartOpmaken p { display: none; } #kaart-opmaken-tekstvarianten p { display: none; } #kaart-opmaken-tekstvarianten-kader { margin-top: 0; display: none; } #kaart-opmaken-tekstvarianten h3 { border-bottom: 1px dashed #ddd; } #kaart-opmaken-controls-mobile { display: block; } #kaart-opmaken-controls { display: none; } .overslaan { float: right; margin-top: 0px; margin-left: 0 !important; width: 50%; background-size: 100%; padding: 10px; font-size: 20px !important; line-height: 20px; } .overslaan span { font-size: 14px !important; } /*#kaart-opmaken-image { overflow-x: scroll !important; }*/ #kaart-opmaken-image img { width: auto !important; } #kaart-opmaken-opties-mobile { float: left; /*width: 1000%; overflow-x: scroll;*/ } /*#kaart-opmaken-opties-mobile::-webkit-scrollbar { -webkit-appearance: none; width: 4px; } #kaart-opmaken-opties-mobile::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); }*/ #kaart-opmaken-opties-mobile ul { display: block; list-style: none; width: 100%; height: 50px; text-align: center; } #kaart-opmaken-opties-mobile li { float: left; display: block; width: 60px; max-width: 60px; height: 40px; font-size: 10px; color: #009bff; } #kaart-opmaken-opties-mobile li div { display: block; } #kaart-opmaken-opties-mobile li img { display: inline; height: 20px; } #textPopup { width: 100%; height: calc(100% - 50px); margin-bottom: 10px; border: 1px solid #ccc; padding: 10px; } #textPopup-terug { position: relative; float: left; width: 40%; } #textPopup-terug a { width: 100%; font-family: 'PT Sans',sans-serif; text-align: center; display: inline-block; background-color: #ff0000; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 16px; padding: 7px 0px; line-height: 24px; } #textPopup-opslaan { position: relative; float: right; width: 40%; text-align: right; } #textPopup-opslaan a { width: 100%; font-family: 'PT Sans',sans-serif; text-align: center; display: inline-block; background-color: #9dc115; border: 1px solid #fff; border-radius: 9px; color: #fff; text-decoration: none; font-weight: bold; font-size: 16px; padding: 7px 0px; line-height: 24px; } .kaart-opmaken-fonts-image { width: 33% !important; height: auto !important; } .kaart-opmaken-fonts-image img { width: 100%; } #fontSizeSelect { height: 20px !important; font-size: 12px !important; } #kaart-opmaken-fonts-inner h2, #kaart-opmaken-kleur-inner h2, #kaart-opmaken-foto-inner h2 { margin-bottom: 0px; } .kleur-btn { border: 2px solid #ddd; margin-right: 6px; margin-bottom: 6px; } .kleur-btn:hover, .kleur-btn.active { border: 2px solid #9a9a9a; } .jspContainer { min-height: 317px; } .cropArea { width: 100%; } .fotoUpload { width: 100%; margin-top: 10px; margin-left: 0px; text-align: center; } .submitUpload { width: 100%; background: #9dc115 url(../images/uploaden.png) no-repeat calc(50% - 35px) 9px; margin-left: 0px; margin-top: 10px; } .submitUpload input { width: 100%; } .uploadoutput { width: 100%; } .fotoTools { width: 100%; margin-left: 0px; margin-top: 10px; } .roteerFotoLinks, .roteerFotoRechts { padding-top: 14px; } .kleurFotoOrigineel, .kleurFotoZwartwit { width: 37%; padding-left: 35px; } .kleurFotoSepia { width: 25%; padding-left: 35px; } .iScrollHorizontalScrollbar { position: absolute; z-index: 9999; height: 16px; left: 2px; right: 2px; bottom: 2px; overflow: hidden; } .iScrollHorizontalScrollbar.iScrollBothScrollbars { right: 18px; } .iScrollVerticalScrollbar { position: absolute; z-index: 9999; width: 16px; bottom: 2px; top: 2px; right: 2px; overflow: hidden; } .iScrollVerticalScrollbar.iScrollBothScrollbars { bottom: 18px; } .iScrollIndicator { position: absolute; background: #5fc2fd; border-width: 1px; border-style: solid; border-color: #a3ddff #33b3ff #33b3ff #a3ddff; border-radius: 8px; } .iScrollHorizontalScrollbar .iScrollIndicator { height: 100%; background: -moz-linear-gradient(left, #8ed5ff 0%, #5fc2fd 100%); background: -webkit-linear-gradient(left, #8ed5ff 0%,#5fc2fd 100%); background: -o-linear-gradient(left, #8ed5ff 0%,#5fc2fd 100%); background: -ms-linear-gradient(left, #8ed5ff 0%,#5fc2fd 100%); background: linear-gradient(to right, #8ed5ff 0%,#5fc2fd 100%); } .iScrollVerticalScrollbar .iScrollIndicator { width: 100%; background: -moz-linear-gradient(top, #8ed5ff 0%, #5fc2fd 100%); background: -webkit-linear-gradient(top, #8ed5ff 0%,#5fc2fd 100%); background: -o-linear-gradient(top, #8ed5ff 0%,#5fc2fd 100%); background: -ms-linear-gradient(top, #8ed5ff 0%,#5fc2fd 100%); background: linear-gradient(to bottom, #8ed5ff 0%,#5fc2fd 100%); } #kaart-image-wrapper { position: relative; float: left; width: 100%; height: 275px; margin-bottom: 15px; } #kaart-opmaken-image { position: absolute; margin-bottom: 0 !important; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; } #kaart-opmaken-image.staand img { width: 600px !important; } #scrollwrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .extraInformatie .extraInfoPane #laatst_bekeken li { width: 50%; } .kaart-opmaken-inloggen-links, .kaart-opmaken-inloggen-registreren-links { margin-left: 0px !important; width: 40% !important; } .kaart-opmaken-inloggen-rechts, .kaart-opmaken-inloggen-registreren-rechts { margin-right: 0px !important; width: 60% !important; } .kaart-opmaken-inloggen-rechts input, .kaart-opmaken-inloggen-registreren-rechts input { width: 100%; } #getPrijsWrapper #speerpunten .left, #getPrijsWrapper #speerpunten .right { width: 100%; } .inloggenRegel.usp.opmaak { margin: 0px; padding: 0px; } .inloggenRegel.usp.opmaak h2 { font-size: 16px; margin-bottom: 0px; } .inloggenRegel.usp.opmaak .speerpunten li { height: auto !important; line-height: auto !important; } #handigBox .d100.extra_groot { font-size: 16px; } #contactBox { width: 33%; } #klantenserviceBox { width: 64%; } #klantenserviceBox h2 { font-size: 16px; } .galleryBox.specials li { width: 48%; } .galleryBox.specials li:nth-child(3n+2) { margin: 0 0 2% 0; } .galleryBox.specials li:nth-child(2n+2) { margin: 0 0 2% 2%; } } @media only screen and (max-width: 667px) { .detailButtons .modelkaart, .detailButtons .bestellen { font-size: 19px; background-size: 27px; } .detailButtons .bestellen span, .detailButtons .modelkaart span { font-size: 13px; } .detailSubButtons .favorieten a, .detailSubButtons .delen a { font-size: 17px; background-position: 20px 7px; } #kaart-opmaken-tekstvarianten-kader-opgeslagen select { width: 60%; } .video-container iframe, .video-container object, .video-container embed { width:100%; height:100%; } #handigBox .d50 .card-blue li.extra, #handigBox .d50 .card-green li.extra, #handigBox .d50 .card-pink li.extra { height: auto; font-size: 16px; } #handigBox .d100.extra_groot { height: auto; font-size: 20px; } #contactBox { width: 47%; } #klantenserviceBox { width: 50%; } .klantenserviceBlokje { width: 100%; height: auto; } #handigBox .d50.overflow-right { float: right;} #handigBox .d50.partners, #handigBox .d50.overflow-left, #handigBox .d50.overflow-right { width: 100% !important; } #handigBox .d25 { width: 50%; } } @media only screen and (max-width: 530px) { .desktop { display: none; } .mobiel { display: block; } #kaart-opmaken-tekstvarianten-kader-opgeslagen select { width: 100%; } #kaart-opmaken-tekstvarianten-kader-opgeslagen button.alleTeksten { margin-left: 25%; margin-top: 15px; width: 50%; padding: 6px; } #resetBtn, #saveBtn, #deleteOntwerp, #copyBtn { float: left; width: 25%; text-align: center; } #resetBtn img, #saveBtn img, #deleteOntwerp img, #copyBtn img { float: none; margin: auto; } #resetBtn.uitgelogd, #saveBtn.uitgelogd, #deleteOntwerp.uitgelogd, #copyBtn.uitgelogd { width: 33.33% !important; } } @media only screen and (max-width: 479px) { #home-naardekaarten { display: block; } /*#headerCntr { height: 188px; }*/ .categoryBox li { width: 100%; } .imageBox ul { margin: 0; } .imageBox li { width: 100%; padding: 5px; } .imageBox #foto { display: block; } .imageBox .link { width: 100%; background-size: 100%; font-size: 11px; line-height: 24px; } .blockBox .img2 { width: 90%; } .styleBox ul { width: 293px; margin: 0 auto; } .styleBox li { width: 100%; padding: 0 0 25px; } .announcementsBox ul { width: 274px; margin: 0 auto; } .announcementsBox li { width: 100%; padding: 0; padding-bottom: 20px; } .contentBox .image { width: 100%; padding: 0; float: none; } .footerBox .block { width: 85%; margin-left: 30px; } .footerbottom .right { width: 100%; } .blockBox .rating { padding: 0; } .galleryBox li, .galleryBox ul.grid5 li { width: 50%; } .galleryBox li, .galleryBox ul.grid4 li { width: 50%; } #voordeel1, #voordeel2, #voordeel3 { display: block; } #voordeel13, #voordeel23, #voordeel33 { display: none; } .galleryBox .voordeelItem { width: 50% !important; } .filterBox .col { border: none; } .filterBox .col2 { padding: 8px 0; } .breadcrumbsBox li { padding: 0 0 0 15px; font-size: 12px; } .contactBox li { width: 100%; } .terugBox .left, .terugBox .right { width: 100%; } .terugBox .right { padding-top: 5px; } .terugBox { height: 75px; } #kaartDetailBox { width: 100%; } .detailLinks { width: 100%; } .detailRechts { width: 100%; } #detailButtonsMobile { display: block; padding: 0px; } #detailSubButtonsMobile { display: block; } #detailButtonsDesktop { display: none; } #detailSubButtonsDesktop { margin-top: 0px; } .detailButtons .modelkaart { width: 96%; margin: 2%; } .detailButtons .bestellen, .detailButtons .proefdruk { width: 96% !important; margin: 2%; margin-top: 0px; } .detailButtons .proefdruk { margin-bottom: 0px; } #detailSubButtonsDesktop .favorieten { display: none; } .detailButtons form { width: 96%; margin-left: 2%; margin-right: 2%; } .detailButtons form .bestellen { width: 100%; margin-left: 0; } .detailSubButtons .eerste-drie { width: 96%; margin-right: 2%; margin-bottom: 10px; } .detailSubButtons .zonder-tekst { width: 96%; margin-left: 2%; } .detailSubButtons .favorieten { width: 96%; margin: 2%; margin-top: 0px; } .detailSubButtons .delen { width: 96%; margin: 2%; } .laatstBekekenBox li { width: 50%; } .inloggenLinks { width: 60%; } .inloggenRechts { width: 40%; } .inloggenButtons .registreren, .inloggenButtons .inloggen { margin-left: 20px; } .textBox h1 { font-size: 18px; } .imgRight { width: 70% !important; margin: 15px 15% !important; } .infoQrBox a.voorbeeld { float: left; } .klantenserviceBlok h2 { font-size: 14px !important; margin-top: 5px; margin-bottom: 20px !important; } .klantenserviceBlokje { width: 100%; } .meisjesnamen-alfabet-body ul li { width: 50%; background-color: #fff !important; } .meisjesnamen-alfabet-body ul li:nth-child(4n-1), .meisjesnamen-alfabet-body ul li:nth-child(4n) { background-color: #f7f7f7 !important; } .meisjesnamen-alfabet-body ul li:nth-child(2n) { border-right: none; } .jongensnamen-alfabet-body ul li { width: 50%; background-color: #fff !important; } .jongensnamen-alfabet-body ul li:nth-child(4n-1), .jongensnamen-alfabet-body ul li:nth-child(4n) { background-color: #f7f7f7 !important; } .jongensnamen-alfabet-body ul li:nth-child(2n) { border-right: none; } #handigBox img { width: 50%; /*height: 100%;*/ } #handigBox .d50.overflow-left img, #handigBox .d50.overflow-right img { width: 100% !important; height: auto !important; } #handigBox a img { width: 100%; height: 100%; } .linkjes { display: none; } #tekstKiezer { display: block !important; } .d50 { width: 100% !important; } .d33 { width: 100% !important; } .d50.margin.alignr img, .noresize { width: auto !important; height: auto !important; } .inloggenMidden { width: 40%; } .inloggenRechts2 { width: 40%; margin-left: 60%; margin-top: 5px; } #lettertypeKiezen a { width: calc(100% - 20px); } .winkelmandKnoppen .verderWinkelen a, .winkelmandKnoppen .volgendeStap a { font-size: 18px; } .winkelwagenStappenBox .stap a { font-family: 'pt_sans_narrowregular'; font-size: 15px; padding-top: 4px; } #handigBox .marginright { margin-right: 0 !important; } /* Alle opmaak gerelateerde dingen zijn voor portrait mobiele devices verborgen, toon melding */ /*#kaartOpmaken, #kaart-opmaken-tekstvarianten, #kaart-opmaken-image, #kaart-opmaken-controls, #kaart-opmaken-buttons2 { display: none; }*/ #screenRotate { display: block !important; } #screenRotate img { width: 100%; } .productRegel .artikelInfo { width: 100%; margin-top: 10px; } .productRegel .image { width: 100%; margin-right: 0px; } .productRegel .artikel { line-height: 13px; } .productRegel .prijs { width: 46%; } .productRegel .aantal { width: 52%; } .productRegel .subtotaal { height: 35px; margin-top: 0px; } .winkelmandFooter .links, .winkelmandFooter .rechts { width: 100%; } .winkelmandFooter .rechts { margin-top: 20px; } .winkelmandFooter .links input { width: 35%; } .winkelmandFooter .links a { width: calc(65% - 10px); margin-left: 10px !important; margin-top: 0px; font-size: 14px; } #selectDag, #selectMaand { width: 69px; } #selectJaar { width: 80px; } #datumKiezer select { padding: 0px 5px; } .winkelmandFooter .rechts .subtotaal { width: 29%; } .winkelmandFooter .rechts .subtotaal.controle { margin-top: 6px; } .account-bestelling-img { width: 100% !important; margin: 0 !important; margin-top: 10px !important; } .account-bestelling-content { width: 100% !important; } .bestellingRegelLinks { width: 40% !important; } .bestellingRegelMidden { width: 60% !important; } .bestellingRegelRechts { width: 100% !important; text-align: right !important; } /*.modelkaartKeuzeBox { height: 85px !important; }*/ .modelkaartKeuzeBox .stap a { font-size: 15px !important; padding: 10px 4px 4px 4px !important; line-height: 24px; } .modelkaartKeuzeBox .kaartImage { display: block; margin-bottom: 20px; } .modelkaartKeuzeBox #kaart3d { width: 90%; margin: 0px 5%; } .modelkaartKeuzeBox .stap .header { font-size: 15px; padding: 16px; line-height: 16px; } .modelkaartKeuzeBox .stap .body { padding: 15px; font-size: 13px; } .modelkaartKeuzeBox .stap .body li:before { margin-right: 10px; } .modelkaartKeuzeBox .stap .body li { margin-bottom: 5px; } .modelkaartKeuzeBox .stap .body img { display: none; } .modelkaartKeuzeBox .stap .knop { font-size: 18px; padding: 10px; } .modelkaartKeuzeBox .stap .knop span { display: block; width: 100%; margin-left: 0px; } .modelkaartKeuzeBox .stap .ditalles { padding: 20px 0px; } #actieFotoLinks, #actieFotoRechts { width: 100%; } #kaartImageBox .sticker { top: 85px !important; } #proefdrukLinks { width: 100%; } #proefdrukRechts { width: 100%; } .proefdrukBtnTitel, .proefdrukBtnTekst { font-size: 12.5px; } .overslaan { float: right; margin-left: 0 !important; width: 40%; background-size: 100%; padding-left: 10px; font-size: 16px !important; padding-top: 4px; line-height: 14px; } .overslaan span { font-size: 11px !important; } #kaartOpmaken h1 { width: 60% !important; padding-right: 15px; } #kaart-image-wrapper { position: relative; float: left; width: 100%; height: 335px; margin-bottom: 15px; } #kaart-opmaken-image { position: absolute; margin-bottom: 0 !important; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; } /*#kaart-opmaken-image.staand { margin-left: 0 !important; max-width: 100% !important; max-height: 350px; }*/ #kaart-opmaken-image.staand img { width: 600px !important; } .kaart-opmaken-fonts-image { width: 50% !important; } #scrollwrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #kaart-opmaken-opties-mobile li { float: left; display: block; width: 63px; max-width: 63px; height: 45px; font-size: 11px; color: #009bff; } #kaart-opmaken-buttons, #kaart-opmaken-buttons2 { padding: 10px; } #kaart-opmaken-tekstvarianten-kader-opgeslagen button.alleTeksten { margin-left: 0; width: 100%; } #handigBox .d50 .card-blue li.extra, #handigBox .d50 .card-green li.extra, #handigBox .d50 .card-pink li.extra { height: auto; font-size: 18px; } #handigBox .d100.extra_groot { height: auto; width: 100% !important; font-size: 20px; } #contactBox { width: 100%; margin: 0; background: none; box-shadow: none; padding-top: 0; } #contactBox h2 { font-size: 16px; } #contactBox img { width: 50% !important; margin-top: 10px; float: left; } #contactBox .blok { font-size: 12px; } #adres1, #ophalen, #bank, #avond { width: 50% !important; float: left; padding-left: 10px; } #openingstijden, #contact, #overdag { width: 50% !important; float: left; } #klantenserviceBox { width: 100%; } .galleryBox.specials li { width: 100%; } .galleryBox.specials li:nth-child(3n+2) { margin: 0 0 2% 0; } .galleryBox.specials li:nth-child(2n+2) { margin: 0 0 2% 0; } }