section.orangebar { background: #DCEFDD; padding: 30px 0 28px 0; color: #FFF; } section.orangebar .title { font-size: 25px; color: #1f5081; text-transform: uppercase; font-weight: 700; text-transform: uppercase; padding: 0 0 30px 0; } section.orangebar a { color: #2F2F2F; } section.orangebar ul.shopadmin { list-style: none; padding-left: 0; } section.orangebar ul.shopadmin li { display: inline; margin-right: 10px; } section.orangebar ul.shopadmin li a { padding: 2px; color: #2F2F2F; } section.orangebar ul.shopadmin li a:hover, section.orangebar ul.shopadmin li a:focus, section.orangebar ul.shopadmin li a:active { color: #1f5081; text-decoration: none; } section.orangebar ul.shopadmin li a .svg-inline--fa { margin: 0 4px 0 0; } /* section.languagebar { background: #FFF; padding: 20px 0; } */ section.languagebar strong { color: #1f5081; font-weight: 700; } section.bluebar { padding: 40px 0 0 0; } .bluebar .form-inline { margin: 7px 0 10px 0; } .bluebar .form-group { margin: 0 15px 0 0; } .bluebar .form-group input[type="text"] { border-radius: 0; background: transparent; border-top: 0; border-right: 0; border-bottom: 1px solid #1f5081; border-left: 0; width: 100%; color: #2F2F2F; font-size: 16px; padding: 20px 10px !important; box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(102,175,233,0) !important; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .bluebar .form-group input[type="text"]:hover, .bluebar .form-group input[type="text"]:focus, .bluebar .form-group input[type="text"]:active { outline: 0; border-bottom: 1px solid #FEDE30; } .bluebar .form input[type="submit"] { position: relative; display: inline-block; margin: 0 0 0 0 !important; z-index: 1; font-size: 16px; font-weight: 400; border: 0; outline: none; padding: 10px 30px; background: #2F2F2F; margin-top: 20px; color: #FFF; line-height: 20px !important; border-radius: 0px; -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -ms-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -o-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .bluebar .form input[type="submit"]:hover, .bluebar .form input[type="submit"]:focus, .bluebar .form input[type="submit"]:active { background: #FFF; color: #2F2F2F; text-decoration: none; } .bluebar .form-group ::-webkit-input-placeholder { color: #2F2F2F; } .bluebar .form-group ::-moz-placeholder { color: #2F2F2F; } .bluebar .form-group :-ms-input-placeholder { color: #2F2F2F; } .bluebar .form-group :-moz-placeholder { color: #2F2F2F; } #product_canvas h2, #product_canvas h3 { font-size: 20px; font-weight: 100; } .page .product .panel-default { border: 0; background: #FFF; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.20); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.20); -ms-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.20); -o-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.20); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.20); } .page .product .panel-default:hover, .page .product .panel-default:focus, .page .product .panel-default:active { background: #FEDE30; } .page .product.yellow .panel-default { background: #1f5081; color: #FFF; } .page .product.yellow .panel-default:hover, .page .product.yellow .panel-default:focus, .page .product.yellow .panel-default:active { background: #FEDE30; } .page .product.yellow .panel-default:hover .panel-link, .page .product.yellow .panel-default:focus .panel-link, .page .product.yellow .panel-default:active .panel-link { color: #2F2F2F; } .page .product.yellow .panel-default .imgcontainer { height: 122px !important; } .page .product.yellow .panel-default .panel-link { font-size: 25px; text-transform: uppercase; line-height: 40px; margin-top: 0; } .page .product .productcat { display: block; width: 100%; font-size: 14px; line-height: 16px; color: #1f5081; text-align: left; font-weight: 700; text-transform: uppercase; padding: 20px 20px 5px 20px; } .page .product .producttitle { display: block; width: 100%; font-size: 20px; line-height: 25px; color: #2F2F2F; text-align: left; font-weight: 700; padding: 5px 20px 20px 20px; } .page .product .panel-default:hover .producttitle, .page .product .panel-default:focus .producttitle, .page .product .panel-default:active .producttitle { color: #FFF; } .page .product .panel-default:hover .productprice, .page .product .panel-default:focus .productprice, .page .product .panel-default:active .productprice { color: #FFF; } .page .product .panel-default:hover .panel-link, .page .product .panel-default:focus .panel-link, .page .product .panel-default:active .panel-link { color: #FFF; } .page .product a:hover, .page .product a:focus, .page .product a:active { text-decoration: none; } #filterform { margin: 30px 0 0 0; } #filterform label { margin-left: 15px; } .webshop_container .hoofdafbeelding .img-thumbnail { padding: 0 !important border: 0 !important; border-radius: 0 !important; -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -ms-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -o-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); } .webshop_container ul.thumbs { list-style-type: none; padding-left: 0; display: flex; justify-content: space-around; align-items: center; width: 100%; margin: 30px 0 0 0; } .webshop_container ul.thumbs li { display: inline; margin: 0 10px 0 0; } .webshop_container ul.thumbs li:last-child { margin: 0 0 0 0; } .webshop_container ul.thumbs li:only-child { display: none; } .webshop_container ul.thumbs li .subimage { display: inline; margin: 0; } .webshop_container .infobox { margin: 0 0 30px 0; font-weight: 400; line-height: 26px; } .webshop_container .prijs-title { font-size: 25px; font-weight: 700; color: #2F2F2F; } .webshop_container .prijs-title .prijs_oud { color: #1f5081; font-size: 75%; } .webshop_container .prijs-title .prijs { color: #2F2F2F; } .webshop_container .productbox { margin: 30px 0; line-height: 26px; } .webshop_container h2.specs, .webshop_container .productbox h2 { margin: 0 0 30px 0; font-size: 16px; font-weight: 900; color: #0573AA; } .webshop_container .productbox .readmore-uit { font-weight: 100; } .relaties .title { font-size: 25px; color: #1f5081; text-transform: uppercase; font-weight: 700; margin-bottom: 30px; } .producten-highlight { padding: 40px 0; } .ww-info { margin: 20px 0 10px 0; line-height: 27px; } .bestelvak { } #voorraadmsg { position: relative; font-size: 20px; line-height: 20px; font-weight: 700; color: #DC1C23; } .filtervak { margin: 0 0 10px 0; } .filtertable table { width: auto; } .filtertable table td { padding: 0 4px; } .filtertable table td .btn-default { padding: 10px; } .filtertable table td .svg-inline--fa { margin: 0; } ul.pagernew { list-style: none; padding-left: 0; margin: 60px 0 0 0; text-align: center; } ul.pagernew .previous a { float: left; } ul.pagernew .next a { float: right; } ul.pagernew .disabled a { pointer-events: none; background: white; color: rgba(44, 44, 44, 1); } .whitebgwrap h2 a { font-size: 38px; margin: 0 0 30px 0; color: #000; } .whitebgwrap h2 a:hover, .whitebgwrap h2 a:focus, .whitebgwrap h2 a:active { text-decoration: none; color: #DC1C23; } ul.catlist { list-style-type: none; padding-left: 0; margin: 0; } ul.catlist li { position: relative; font-size: 16px; color: #333; margin: 0 0 5px 0; } ul.catlist li:last-child { margin: 0; } ul.catlist li a.catitem { position: relative; display: block; padding: 5px 20px; font-size: 16px; font-weight: 700; color: rgba(44, 44, 44, 1); border: 1px solid rgba(44, 44, 44, 1); z-index: 1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } ul.catlist li a.catitem:hover { color: #FFF; text-shadow: 2px 2px 5px rgba(0,0,0,0.55); text-decoration: none; } ul.catlist li a.catitem:focus, ul.catlist li a.catitem:active { color: rgba(44, 44, 44, 1); text-decoration: none; } ul.catlist li a.catitem:before { content: " "; display: block; position: absolute; background: #DC1C23; bottom: 0; left: 0%; width: 0%; height: 100%; margin: 0 auto; transition: all 0.5s; z-index: -1; } ul.catlist li a.catitem:hover:before { width: 100%; height: 100%; left: 0%; } ul.catlist li.active a { color: #FFF; text-shadow: 2px 2px 5px rgba(0,0,0,0.55); text-decoration: none; } ul.catlist li.active a:hover { color: rgba(44, 44, 44, 1); text-shadow: 2px 2px 5px rgba(0,0,0,0); text-decoration: none; } ul.catlist li.active a.catitem:before { width: 100%; height: 100%; left: 0%; } ul.catlist li.active a.catitem:hover:before { width: 0%; height: 100%; } .shopbtn { position: absolute; left: 15px; top: -120px; } .shopwrap { margin: 0 0 30px 0; } .shopwrap .imagewrap { z-index: 1; position: relative; } .shopwrap h2.title { position: relative; font-size: 30px; line-height: 30px; font-weight: 700; text-transform: uppercase; margin-top: -20px; margin-left: 10px; margin-bottom: 10px; z-index: 2; text-shadow: 2px 2px 10px rgba(0,0,0,0.75); } .shopwrap h2.title a { color: #FFF; } .shopwrap h2.title a:hover, .shopwrap h2.title a:focus, .shopwrap h2.title a:active { color: #DC1C23; text-decoration: none; } .shopwrap .prijs { font-size: 30px; line-height: 30px; font-weight: 700; text-transform: uppercase; color: #DC1C23; margin-left: 10px; } .shopwrap .btnwrap { text-align: right; line-height: 60px; margin: 15px 0 0 0; } .cartbtn { display: block; padding: 20px; margin: 10px 0 0 0; } .winkelmandbtn { } .winkelmandbtn a { color: #FFF; line-height: 76px; } .winkelmandbtn:hover a, .winkelmandbtn:focus a, .winkelmandbtn:active a, .winkelmandbtn a:hover, .winkelmandbtn a:focus, .winkelmandbtn a:active { color: rgba(44, 44, 44, 1); } h3.relatedtitle { font-size: 40px; line-height: 40px; font-weight: 700; text-transform: uppercase; margin: 60px 0 0 0; color: #FFF; text-shadow: 2px 2px 10px rgba(0,0,0,0.75); } .prijs-title { display: block; font-size: 20px; line-height: 20px; font-weight: 700; text-transform: uppercase; color: #DC1C23; } /* Grayscale effect */ .blogitem .afbeelding img { /*filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(100%);*/ } a.catwraplink { display: block; margin: 0 0 30px 0; } a.catwraplink:hover, a.catwraplink:focus, a.catwraplink:active { text-decoration: none; } .catwrapper h2.title { font-size: 25px; line-height: 25px; font-weight: 700; text-transform: uppercase; border-top: 5px solid #F2F2F2; padding: 15px 0; margin: 0 0 15px 0; min-height: 85px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } a.catwraplink:hover .catwrapper h2.title, a.catwraplink:focus .catwrapper h2.title, a.catwraplink:active .catwrapper h2.title { border-top: 5px solid #DC1C23; } .catwrapper .imgcatwrap { display: block; width: 100%; height: 200px; z-index: 8; } .catwrapper .imgcolorbox { position: relative; display: block; width: 100%; height: 200px; z-index: 9; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .catwrapper .imgcolorbox:before { position: absolute; content: "⌕"; font-size: 80px; color: rgba(255, 255, 255, 0); top: 50%; margin-top: -22px; left: 50%; margin-left: -22px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } a.catwraplink:hover .catwrapper .imgcolorbox, a.catwraplink:focus .catwrapper .imgcolorbox, a.catwraplink:active .catwrapper .imgcolorbox { background: rgba(47, 46, 46, 0.5); } a.catwraplink:hover .catwrapper .imgcolorbox:before, a.catwraplink:focus .catwrapper .imgcolorbox:before, a.catwraplink:active .catwrapper .imgcolorbox:before { color: rgba(255, 255, 255, 1); } /* Title/hover effects */ .introtekst { float: right; width: 50%; padding-left: 15px; } .blogitem .afbeelding .imagetitle { width: 100%; display: block; } .blogitem a.imagetitle, .blogitem a.imagetitle h3 { margin-top: 0px; } .blogitem .afbeelding .imagetitle h2 { } @media(max-width:768px){ .blogitem .afbeelding .imagetitle h2 { font-size:20px !important; } } .blogitem:hover .imagetitle { } .noimage { opacity: 0.4; } .fbthumb { position: relative; float: left; margin: 5px 10px 10px 0px; max-width: 150px; } .blogitem .fbimage { width: 100%; } .btn.btn-default.fbreadmore { background: none; background-color: #3a5795; color: #FFFFFF !important; } .btn.btn-default.fbreadmore i { font-weight: bold; font-size: 18px; margin-right: 15px; } .btn.btn-default.fbreadmore:hover { background-color:#5370AD; } .btn.btn-default.instareadmore { background: none; background-color: #125688; color: #FFFFFF !important; } .btn.btn-default.instareadmore i { font-weight: bold; font-size: 18px; margin-right: 15px; } /* Main css */ .blogitem { position: relative; } .blogitem .afbeelding { position: relative; width: 50%; float: left; padding: 0px 15px 0px 0px; } .blogitem .content { } .blogbtn { } .well.blogitem h2 { margin: 0; } .well.blogitem .blogbtn { margin-right: 0px; margin-bottom: 0px; } ul.catlist { list-style-type: none; padding-left: 0; margin: 0; } ul.sublist { margin: 5px 0 0 0; } ul.catlist li { position: relative; font-size: 16px; color: #333; margin: 0 0 5px 0; } ul.catlist li:last-child { margin: 0; } ul.catlist li a.catitem { position: relative; display: block; padding: 5px 20px; font-size: 16px; font-weight: 700; color: rgba(44, 44, 44, 1); border: 1px solid rgba(44, 44, 44, 1); z-index: 1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } ul.catlist li a.catitem:hover { color: #FFF; text-shadow: 2px 2px 5px rgba(0,0,0,0.55); text-decoration: none; } ul.catlist li a.catitem:focus, ul.catlist li a.catitem:active { color: rgba(44, 44, 44, 1); text-decoration: none; } ul.catlist li a.catitem:before { content: " "; display: block; position: absolute; background: #DC1C23; bottom: 0; left: 0%; width: 0%; height: 100%; margin: 0 auto; transition: all 0.5s; z-index: -1; } ul.catlist li a.catitem:hover:before { width: 100%; height: 100%; left: 0%; } ul.catlist li.active a { color: #FFF; text-shadow: 2px 2px 5px rgba(0,0,0,0.55); text-decoration: none; } ul.catlist li.active a:hover { color: rgba(44, 44, 44, 1); text-shadow: 2px 2px 5px rgba(0,0,0,0); text-decoration: none; } ul.catlist li.active a.catitem:before { width: 100%; height: 100%; left: 0%; } ul.catlist li.active a.catitem:hover:before { width: 0%; height: 100%; } ul.catlist li .adminoptions { position: absolute; display: block; background: #FFF; padding: 0 5px; z-index: 3; top: -4px; right: 0px; -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -ms-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -o-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); } ul.catlist li.active ul.sublist li a.catitem { color: rgba(44, 44, 44, 1); text-shadow: 2px 2px 5px rgba(0,0,0,0); } ul.catlist li.active ul.sublist li a.catitem:hover { color: #FFF; text-shadow: 2px 2px 5px rgba(0,0,0,0.55); } ul.catlist li.active ul.sublist li a.catitem:before { background: #DC1C23; width: 0%; height: 100%; } ul.catlist li.active ul.sublist li a.catitem:hover:before { width: 100%; height: 100%; left: 0%; } .vacaturebtn { position: absolute; left: 15px; top: -120px; } .blogwrap { margin: 0 0 30px 0; } .blogwrap .imagewrap { z-index: 1; position: relative; } .blogwrap .imagewrap .linkedin { position: absolute; bottom: 15px; right: 15px; } .blogwrap .imagewrap .linkedin a { font-size: 40px; color: #FFF; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .blogwrap .imagewrap .linkedin a:hover, .blogwrap .imagewrap .linkedin a:focus, .blogwrap .imagewrap .linkedin a:active { color: rgba(220, 28, 35, 1); } .blogwrap h2.title { position: relative; font-size: 40px; line-height: 40px; font-weight: 700; text-transform: uppercase; margin-top: -60px; margin-left: 10px; z-index: 2; text-shadow: 2px 2px 10px rgba(0,0,0,0.75); } .blogwrap h2.smalltitle { font-size: 30px; } .blogwrap h2.title a { color: #FFF; } .blogwrap h2.title a:hover, .blogwrap h2.title a:focus, .blogwrap h2.title a:active { color: #DC1C23; text-decoration: none; } .blogwrap .btnwrap { text-align: right; line-height: 60px; margin: 15px 0 0 0; }