/** HEADER **/ .header { background: white; padding: 0 } .header .headerLeft { width: auto; float: right; } .header .headerRight { width: 235px; float: right; } .header .headerRight .btn-group.small { float: right; margin-right: -1px; } .header .headerRight .btn-group.small .btn.btn-white { line-height: 30px; border: 0; height: 30px; font-size: 15px; font-weight: 400; color: #262626; padding: 0px 7px; background: white; margin-left: 5px; transition: all ease 0.1s; -webkit-box-shadow: 0 0px 0 #d6d6d6; box-shadow: 0 0px 0 #d6d6d6; } .header .headerRight .btn-group.small .btn.btn-white label { font-size: 14px; font-weight: 300; } .header .headerRight .btn-group.small .btn.btn-white img { margin: 9px 5px 0 0; } .header .headerRight .btn-group.small .btn.btn-white:hover { background: #f3f3f3; } .header .headerLogo { padding-top: 15px; } /* USP Points */ .uspBlock { float: left; width: 100%; min-height: 100%; padding: 0; margin: 15px 0 5px 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .uspBlock div { float: left; color: #555; font-weight: 500; font-size: 14px; line-height: 24px; margin-right: 28px; margin-left: 28px; border: 1px solid #fff; border-radius: 6px; padding-left: 8px; padding-right: 8px; -webkit-transition: width 0.2s; /* Safari */ transition: width 0.2s; } .uspBlock span { color: #3ea300; font-weight: 500; } .uspBlock .fa.fa-check-circle { color: #3ea300; font-size: 18px; margin-right: 5px; position: initial; float: left; margin-top: 2px; display: inline-block; } .uspBlock .fa.fa-star { margin-left: 2px; } .usp-points.header { padding: 15px 3px; } .usp-points { text-align: center; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 15px 3px; } .usp-points .uspItem { color: #262626; font-weight: 400; line-height: 30px; font-size: 14px; text-align: center; padding: 0 10px; } .usp-points .uspItem i { margin-right: 5px; line-height: 30px; color: #262626; font-size: 16px; } .usp-points .uspItem span { color: #448A10; font-weight: 700; } .usp-points .uspItem:hover { cursor: default; } /* Colophon */ .header .headerColophon { padding: 20px 15px 0px 15px; } .header .userInteractions { padding: 10px 15px 24px 15px; } .header .headerColophon .headerRight .btwToggle { color: #262626; font-weight: 600; font-size: 14px; line-height: 30px; } .header .headerColophon .headerRight .btwToggle i { color: #262626; font-weight: 600; font-size: 14px; line-height: 30px; } .header .headerColophon .headerRight #btw-on-span, .header .headerColophon .headerRight #btw-off-span { font-weight: 600; color: #262626; font-size: 12px; line-height: 30px; } .header .headerColophon li { float: right; list-style: none; color: #262626; font-weight: 300; margin-top: 1px; } .header .headerColophon li a { color: #262626; font-size: 14px; line-height: 19px; } .header .headerColophon li .btn.btn-lang { padding: 4px; background: white; font-weight: 300; line-height: 25px; border: 0; height: 32px; } .header .headerColophon li .btn.btn-lang .caret { margin-left: 5px; color: #014587; border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; } .header .headerColophon li .btn.btn-lang img { margin-top: 6px; margin-right: 6px; } .header .headerColophon ul.dropdown-menu flags { margin: 0; padding: 0} .header .headerColophon ul.dropdown-menu.flags li { float: left; width: 100%; margin: 0; padding: 0; } .header .headerColophon ul.dropdown-menu.flags li a { font-size: 13px; line-height: 27px; padding: 5px; } .header .headerColophon ul.dropdown-menu.flags li img { margin-right: 10px; } .header .headerColophon .btn-group.small .caret { margin-left: 3px; color: #014587; } /* Website rating */ .header .headerColophon .certificationMark { margin-right: 40px; } .header .headerColophon .certificationMark img { width: 152px; } .header .headerColophon .websiteRating { width: auto; height: auto; float: right; /* background: url('/images/allgifts.nl/ratingBg.png'); */ background-position:31px 3px; background-repeat: no-repeat; } .header .headerColophon .websiteRating a { float: right; } .header .headerColophon .ratingOverlay { float: right; } .header .headerColophon .ratingText { float: left; display: block; width: auto; padding: 0 9px; font-size: 14px; font-weight: 700; line-height: 22px; } .header .headerColophon .countText { display: none; } /* User buttons */ .header .btn-group.open .dropdown-toggle { background: transparent; opacity: 1; z-index: 3333; } .header .btn-group.pull-right.open .btn.btn-white { background-color: white; z-index: 1000; border-radius: 6px 6px 0 0; margin-bottom: 0px; } .header .btn-group button i:hover { cursor: pointer; font-weight: 400; color: #014587; } .header .btn-group .btn { margin-left: 10px; } .header .ordercount { font-weight: bold; font-size: 14px; color: white; text-align: center; position: absolute; border-radius: 21px; width: 22px; height: 22px; line-height: 24px; background: #FF7602; margin-left: 20px; margin-top: -50px; } .callBack { display: none; } .callbackConfirm { display: none; } .callback-error { display: none; } .ordercount.empty { display: none; } .header .btn-group.pull-right.open #recentlyAdd .cartIcons .btn.btn-small.btn-white.buttonRemove { padding: 0px 13px; border-radius: 6px; } .header .btn-group .open .btn.btn-white.icon { background-color: white; z-index: 999; position: relative; border-radius: 6px 6px 0 0; margin-bottom: 0; } .header .navbar-fixed-userBar .btn-group .open .btn.btn-white.icon { background-color: white; color: #262626; z-index: 999; position: relative; border-radius: 6px 6px 0 0; margin-bottom: 0; } /* Navbar */ .navbar-default { background-color: #014587; } .navbar.navbar-default.navbar-fixed-top .headerLogo { display: none} .navbar.navbar-default.navbar-fixed-top .headerColophon { display: none; } .navbar.navbar-default.navbar-fixed-top .userInteractions { padding: 0; float: right; } /* Search */ .searchHeader.quickSearch { width: 560px; margin-right: 0; float: right } .searchHeader.quickSearch .btn.btn-default { -moz-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; display: inline-block; margin-bottom: 0; padding: 6px 12px; text-align: center; vertical-align: middle; white-space: nowrap; -webkit-user-select: none; } .searchHeader.quickSearch .form-control { width: 100%; margin-left: -40px; border-radius: 6px 0px 0px 6px!important; } .searchHeader.quickSearch input { height: 46px; } .searchHeader.quickSearch input[type="search"] { font-size: 14px; font-weight: bold; color: #262626; background-color: white; box-shadow: 0px -1px 0px 0px #CCCCCC; border-radius: 6px; border-top: 3px solid #F2F2F2; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; } .searchHeader.quickSearch button[type="button1"] { color: #555555; height: 43px; border-style: solid!important; border-color: #cccccc!important; border-width: 1px 0px 1px 0px!important; background: white; border-radius: 0!important; } .searchHeader.quickSearch button[type="button2"] { height: 46px; color: #262626; background-color: white; box-shadow: 0px -1px 0px 0px #CCCCCC; border-radius: 0 6px 6px 0; border-top: 3px solid #F2F2F2; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; } .searchHeader.quickSearch button[type="button2"]:hover { background-color: #f3f3f3; } /** PULLDOWN MENUS **/ .dropdown-menu.loginForm { width: 300px; padding: 0 30px 30px 30px; margin-top: -2px; border: 0; border-radius: 6px 0 6px 6px; } .dropdown-menu.loginForm legend { margin-top: 30px; margin-bottom: 25px; } .navbar-fixed-userBar legend { margin-bottom: 15px; padding-bottom: 6px; font-size: 19px; } /* Login */ .dropdown-menu.loginForm ul { margin-top: 0; } .dropdown-menu.loginForm li { margin-left: 0; } .dropdown-menu.loginForm li a { border: 0; padding: 0; color: #262626; line-height: 30px; font-weight: 400; font-size: 14px; } .dropdown-menu.loginForm li a:hover { text-decoration: underline; background: none; } .dropdown-menu.loginForm li .strongWeight { font-size: 15px; line-height: 30px; } .dropdown-menu.loginForm .userIntro { padding-top: 15px; margin-bottom: 10px; display: none } .dropdown-menu.loginForm .btn { width: 100%; background-color: #ff7600!important; } .dropdown-menu.loginForm .input-group { margin-bottom: 10px; } .dropdown-menu.loginForm .input-group .input-group-addon { background: white; } .dropdown-menu.loginForm p { padding: 0; margin: 20px 0 0 0; } .dropdown-menu.loginForm p a, .dropdown-menu.loginForm p a:link, .dropdown-menu.loginForm p a:visited { color: #1d5994; font-weight: bold } /* Contact options */ .dropdown-menu.contactForm { min-width: 315px; padding: 30px 30px 15px 30px; border-radius: 6px 0 6px 6px; border: 0; margin-top: -1px; } .dropdown-menu.contactForm .socialBox { float: left; width: 100%; margin-top: 25px; } .dropdown-menu.contactForm .socialBox .socialItem { margin-bottom: 18px; font-size: 13px; line-height: 23px; font-weight: 300; color: #262626; float: left; } .dropdown-menu.contactForm .socialBox .socialItem .title { color: #555; font-size: 16px; font-weight: 600; } .dropdown-menu.contactForm .socialBox .socialItem .btn { width: 100%; margin-top: 20px; text-decoration: none!important; } .dropdown-menu.contactForm .socialBox .socialItem a, .dropdown-menu.contactForm .socialBox .socialItem a:link, .dropdown-menu.contactForm .socialBox .socialItem a:visited { text-decoration: underline; font-weight: bold; color: #014587; cursor: pointer; } .dropdown-menu.contactForm .socialBox .socialItem a:hover { text-decoration: none; } .dropdown-menu.contactForm .socialBox .socialItem span { width: 100%; float: left; margin: 0; } .dropdown-menu.contactForm .socialBox .socialItem.left { float: left; max-width: 20%; margin: 0 17px 0 0; } .dropdown-menu.contactForm .socialBox .socialItem.left i { font-size: 18px; line-height: 24px; color: #262626; width: auto; text-align: center; margin-top: 3px; } .dropdown-menu.contactForm .socialBox .socialItem.right { float: left; width: 80%; margin: 0; } .dropdown-menu.contactForm .socialBox .socialItem.email a { text-transform: lowercase; } .dropdown-menu.contactForm .socialBox .phoneActive { width: 8px; height: 8px; border-radius: 9px; background: #448A10; float: left; margin-right: 5px; margin-top: 8px; } .dropdown-menu.contactForm .socialBox .smallNote { font-size: 13px; font-weight: 300; text-align: center; width: 100%; float: left; margin: 0 0 0 0; padding: 0; line-height: 19px; } .dropdown-menu.contactForm .socialBox hr { float: left; width: 100%; margin:20px 0 10px 0; } /* Callback */ .dropdown-menu.contactForm form p { margin: 0 0 15px 0; padding: 0; font-size: 13px; line-height: 20px; } .dropdown-menu.contactForm form .btn { width: 100%; margin-top: 10px; margin-bottom: 10px; /* padding: 5px; */ } .dropdown-menu.contactForm form .btn:hover { background: #ff7b00; } .dropdown-menu.contactForm form .input-group { margin-bottom: 10px; } .dropdown-menu.contactForm form .input-group.error { margin-bottom: 10px; } .dropdown-menu.contactForm form .input-group-addon { background: white; } .dropdown-menu.contactForm form .input-group i { font-size: 15px; color: #555; } .dropdown-menu.contactForm form .input-group.error i { color: red; } .dropdown-menu.contactForm form input[type="text"] { font-weight: 300; box-shadow: none; } .dropdown-menu.contactForm .btn-back { position: absolute; right: 28px; top: 23px; border: 1px solid #e5e5e5; padding: 4px 11px; font-size: 12px; font-weight: 300; color: #555; } .dropdown-menu.contactForm .btn-back i { font-size: 11px; line-height: 11px; padding-right: 4px; } /* Cartitems */ .dropdown-menu.cartView { padding: 0 20px 30px 20px; margin-top: -2px; border-radius: 6px 0 6px 6px; border: 0; } .dropdown-menu.cartView legend { margin-top: 30px; border: 0; margin-bottom: 20px; } #recentlyAdd .dropdown-menu.cartView .btn { width: 100%; } #recentlyAdd .pull-right > .dropdown-menu { z-index: 9999; border-radius: 0; } #recentlyAdd .navbar-form .btn { padding:9px 9px 10px 9px; border-radius: 0 6px 6px 0; } #recentlyAdd .cartItemFront p strong { font-size: 16px; padding: 0 0 10px 0; margin: 0 0 10px 0; width: 100%; float: left; font-weight: bolder; text-transform: uppercase; border-bottom: 1px solid #e3e3e4;} #recentlyAdd { width: 100%; float: left; min-width: 375px; } #recentlyAdd p { /* font-size: 14px; font-weight: 300; line-height: 26px; color: #555555; */ } #recentlyAdd h3 { font-size: 16px; font-weight: 500;line-height: 16px; display: none; } #recentlyAdd h3 span { line-height: 16px; } #recentlyAdd a:link, #recentlyAdd a:visited { text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; } #recentlyAdd .cartButtons { margin: 15px 0 0px 0; float: left; width: 100%; } #recentlyAdd .cartButtons #goToCart { font-size: 13px; margin-right: 10px; } #recentlyAdd .cartPrices ul { margin-bottom: 0; } #recentlyAdd .cartPrices .text-right { text-align: right; float: right; } #recentlyAdd .printInfoList:first-letter { text-transform: capitalize} #recentlyAdd .cartButtons { width: 100%; float: left; } #recentlyAdd .btn.btn-small.btn-white.buttonRemove { right: -10px; position: relative; top: 4px; padding: 0px 12px; } #recentlyAdd .buttonRemove { float: left; } #recentlyAdd .cartButtons .btn.btn-success { width: 100%; background-color: #4eb400; margin-left: 0; } .maxheightShoppingcart { width: 100%; float: left; overflow-x: hidden; overflow-y: auto; max-height: 40vh; white-space: nowrap; margin-top: 10px; } .recentAdded { border-bottom: 1px solid #e5e5e5; width: 100%; float: left; margin-bottom: 20px; padding-bottom: 20px; padding-top: 0px; min-height: auto; } ul.orderInfo { margin:0 ; padding: 0 0 0 15px; } ul.orderInfo li p a { margin-bottom: -4px; float: left; width: 100%; } .recentAdded .cartFooter { background: #f6f6f6; border-style: solid; border-color: #e2e2e2; border-width: 1px 1px 0px 1px; margin-top: 10px; } .recentAdded .cartFooter p { padding: 5px 0; font-size: 11px; } .recentAdded .cartFooter .cartIcons i { color: #262626; } .recentAdded .cartFooter .cartIcons div { float: left; border-left: 1px solid #e2e2e2; padding: 5px 10px;} .recentAdded .cartIcons div { float: right; } .recentAdded .cartExtraInfo { color: #4eb400; line-height: 22px; font-size: 13px; font-weight: 500; text-align: right; padding: 0 10px 0 0; margin-top: 1px; text-transform: lowercase; width: auto; position: absolute; right: 0 } .recentAdded .cartExtraInfo:first-letter { text-transform: capitalize; } .recentAdded a:link, .recentAdded a:visited { color: #59378c; font-weight: 400; } .recentAdded .orderInfo a:link, .recentAdded .orderInfo a:visited { color: #262626!important; font-weight: bold; line-height: 23px; } .recentAdded .recentAddedPricebox { float: right; text-align: right; margin-right: -10px; font-size: 14px; font-weight: 400; color: #262626; line-height: 23px; margin-bottom: 6px; } .recentAdded .recentAddedPricebox strike { font-size: 12px; color: #555;} .recentAdded .recentAddedPricebox .salePrice { font-weight: bold; color: #448A10; top: -3px; position: relative; } .recentAdded .cartTitle { float: left; width: 96%; text-overflow: ellipsis; overflow: hidden; overflow: hidden; white-space: nowrap; margin-bottom: 0; } .recentAdded img { padding: 0 15px 0 0; max-width: 100%;} /** BREADCRUMBS **/ .breadcrumbs { font-size: 14px; font-weight: 300; } .breadcrumbs a { font-size: 14px; line-height: 23px; color: #262626; font-weight: bold } .breadcrumbs i.breadcrumb-separator { font-size: 8px; line-height: 23px; color: #262626; margin-left: 3px; margin-right: 3px; top: -2px; position: relative; } .breadcrumbs i.fa.fa-home { font-size: 17px; line-height: 23px; } /* NAVBAR */ .themeBlockNavbar .imageWrapper { width: 100%; float: left; position: relative; border-radius: 6px; } .themeBlockNavbar .contentOverlay { width: 100%; position: absolute; bottom: 15px; border-radius: 6px; color: white; padding: 20px; height: auto; background: rgb(38,38,38); background: -moz-linear-gradient(0deg, rgba(38,38,38,1) 2%, rgba(38,38,38,0.7063200280112045) 15%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(0deg, rgba(38,38,38,1) 2%, rgba(38,38,38,0.7063200280112045) 15%, rgba(255,255,255,0) 100%); background: linear-gradient(0deg, rgba(38,38,38,1) 2%, rgba(38,38,38,0.7063200280112045) 15%, rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#262626",endColorstr="#ffffff",GradientType=1); top: auto } .themeBlockNavbar .contentOverlay .headingTiny { float: left; width: 100%; color: white; border: 0!important; margin-bottom: 0!important;; padding-bottom: 0!important; } .themeBlockNavbar .contentOverlay a:link, .themeBlockNavbar .contentOverlay a:visited { float: left; width: 100%; color: white; text-decoration: underline; color: white!important; } .subCategories.themas img { max-width: 100%; border-radius: 6px; margin-bottom: 15px; } /** CHECKOUT **/ .clean-header-brand { float: left; padding: 19px 0px 17px 15px; } .clean-header-brand img { width: 135px; max-height: 85px; } .clean-header-icongroup { float: right; padding: 26px 0; } .clean-header-icongroup .btn.btn-success { -webkit-backface-visibility: hidden; outline: 0; padding: 0px 15px; transition: all ease 0.1s; margin-bottom: 3px; z-index: 1; position: relative; } .clean-header-icongroup .btn.btn-success:hover { transform: translate(0, 1px); -webkit-transform: translate(0, 1px); -ms-transform: translate(0, 1px); } .row.counter:last-of-type .cartContent { border-bottom: 0; } /* Checkout steps **/ .steps { margin: 0 auto; display: block; max-width: 1000px; position: relative; } .steps-background { padding: 60px 0 60px 0; } .checkout-proces { padding: 0px 60px; } .checkout-proces .first-phase-order { float: left; } .checkout-proces .first-phase-order .checkoutBlock { padding: 0 15px; } .checkout-proces .second-phase-order { float: right; } .checkout-proces .second-phase-order .checkoutBlock { padding: 0 15px; } .checkout-proces .progressBar { width: 100%; height: 2px; background-color: #e5e5e5; } .checkout-proces .progress { width: 50%; height: 2px; position: absolute; top: 13px; left: 0; background-color: #014586; } .checkout-proces .text-label { position: relative; width: 100%; float: left; padding-top: 6px; opacity: 0.85; text-align: center; font-size: 11px; font-weight: 400; color: #262626; line-height: 19px; } .checkout-proces .text-label a, .checkout-proces .text-label a:link, .checkout-proces .text-label a:visited { font-weight: 400; } .checkout-proces .checkoutFaseCircle { width: 10px; height: 10px; background-color: #014586; border-radius: 99px; margin-top: 6px; margin-left: 6px; } /* Fase 1 */ .checkout-proces .fase1, .checkout-proces .fase2, .checkout-proces .fase3 { float: left; position: relative; margin-top: -15px; } .checkout-proces .fase1 .circle { width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; background: white; position: relative; z-index: 2; border-radius: 50%; background: white; border: 2px solid #014586; } /* completed */ .checkout-proces .fase1 .fa-check { position: absolute; left: 6px; top: 5px; color: #014586; font-size: 17px; font-weight: bold; line-height: 19px; text-align: center; } .checkout-proces .fase1 .progress { width: 100%; } .checkout-proces .fase1 .text-label { opacity: 1; font-weight: bold; } .checkout-proces .fase1 .text-label a { font-weight: bold; color: #262626; } /* Fase 2 */ .checkout-proces .fase2 .circle { width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; position: relative; z-index: 2; background: white; border: 2px solid #e7e7e7; } /* current fase */ .checkout-proces .fase2 .progress { width: 50%; } .checkout-proces .fase2 .circle-active { width:8px; height: 8px; border-radius: 50%; margin: 0 auto; position: absolute; top: 7px; left: 7px; background-color: #084684; border: 0px solid #C8C8C8; } .checkout-proces .fase2 .text-label { opacity: 1; font-weight: bold; } .checkout-proces .fase2 .text-label a:link, .checkout-proces .fase2 .text-label a:visited { color: #262626; font-weight: bold; } /* Fase 3 */ .checkout-proces .fase3 .circle { width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; background: white; position: relative; z-index: 2; background: white; border: 2px solid #C8C8C8; } /* later */ .checkout-proces .fase3 .progress { width: 0%; } .checkout-proces .fase4 .circle { width: 28px; height: 28px; margin: 0 auto; border-radius: 50%; background: white; position: relative; z-index: 2; background: white; border: 2px solid #C8C8C8; } /* large */ .checkout-proces .fase4 .progress { width: 0%; } /* Progress bar */ .progressBarDynamic { height: 2px; width: 0%; position: absolute; float: left; transition: 0.7s; background-color: #084684; } .progressBarDynamic.fase1b { width: 70%; margin-top: -2px; } .progressBarDynamic.fase2b { width: 85%; margin-top: -2px; } .progressBarDynamic.fase3b { width: 95%; margin-top: -2px; } .checkoutBlock.fase3 a:link, .checkoutBlock.fase3 a:visited { color: #262626; font-weight: 400!important; } /* SLIDE IN */ .menuOverlay { position: fixed; width: 100%; height: 100%; background: #333; z-index: 999; opacity: 0.3; display: none; transition: all 400ms linear 0s; } .menuOverlay.toggle { display: block; transition: all 400ms linear 0s; } .mobile-hide { display:none!important; } /** NO MOBILE- RES **/ @media (min-width: 768px) { .headerContainer .sidenav { display: none; } .headerContainer .sidenavMain { display: none; } .mobileCart { display: none; } /* Navbar */ .section.navbar { margin-bottom: 0; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { background: white; color: #555!important; } #top-element .navbar-header { float: left; width: 100%; } #top-element .navbar-header .collapse.in { display: none; } #navbar-main { width: 100%; float: left; margin-top: -1px; } #main-navBar { border: 0; border-radius: 0; margin: 0; transition: 0.2s; } #navbar-main ul { width: 100%; min-width: 100%; } #navbar-main ul li { margin-left: 0; float: right } #navbar-main ul li i { margin-left: 8px; margin-right: 0; line-height: 30px; } #navbar-main-allCats { float: left!important; width: 260px; } #main-navBar .mainLinks { color: white; line-height: 30px; z-index: 999; font-size: 15px!important; float: left; font-weight: 500; } .dropdown-navbar.open a.mainLinks.dropdown-toggle { background: white; } #mainCatArrow { float: left; } #main-navBar .mainLinks .fa.fa-bars { line-height: 30px; } #main-navBar .mainLinks span { margin-left: 10px; } #navbar-main-allCats .mainLinks { width: 260px; z-index: 9999; } #main-navBar .cta-category a { color: #e93641!important; font-weight: bold; } #main-navBar .cta-category.beDomain a { color: #e93641!important; } #main-navBar .mainLinks .caret { margin-left: 5px; } #main-navBar .mainLinks:hover { background: white; transition: 0.2s; color: #014587; cursor: pointer; } #main-navBar .listContainer { width: 100%; padding: 0; display: inline-block; } #main-navBar .subLinks { padding: 0px 0px 15px 0px; width: 260px; border: 0; } #main-navBar .subLinks svg { width: 14px; height: 14px; float: left; margin-right: 10px; margin-top: 7px; } #main-navBar .subLinks .infotxt-small.navBar { margin: 10px 0 15px 30px; color: #262626; text-transform: uppercase; font-weight: 900; font-size: 12px; } #main-navBar .subLinks div a { float: left; padding: 0 30px; width: 100%; color: #262626; line-height: 30px; font-size: 14px; border-radius: 0; } #main-navBar .subLinks div a:hover { text-decoration: none; } #main-navBar .subLinks.dropdown-menu .divider { border-left: 30px solid white; border-right: 30px solid white; float: left; width: 100%; margin: 10px 0; } #main-navBar .subLinks.dropdown-menu .divider.first { margin-top: 0; } #main-navBar .subLinks .normalLinks { float: left; width: 100%; margin-bottom: 20px;} #main-navBar .subLinks .normalLinks a:hover { text-decoration: underline } #main-navBar .subLinks .normalLinks svg { display: none; } .mobileArrow { display:none; } .listContainer .mainListCat .mobileSubArrow { display: none; } .navbar.navbar-default.navbar-fixed-top .navbar-form { display: block; } .navbar.navbar-default.navbar-fixed-top .dropdown.subNavRight { display: none} .dropdown-navbar.subNavRight span.NavBarSales { font-weight: 700; } .navbar.navbar-default.navbar-fixed-top #navbar-main-allCats { margin-left: 15px!important; } /* Pulldown */ #main-navBar .subCategories { background-color:white; border: 1px solid #e5e5e5; display:none; padding: 20px 40px; position: absolute; left: 258px; top: 0; width: 882px; height:100%; border-radius: 0 0 6px 0; -webkit-box-shadow: 5px 6px 12px 0 rgba(0,0,0,.175); box-shadow: 5px 6px 12px 0 rgba(0,0,0,.175); z-index: -1; overflow: auto; } #main-navBar .subCategories .headingTiny { display:block; float: left; width: 100%; border-bottom: 1px solid #e5e5e5; padding-bottom: 10px; margin-bottom: 20px; } #main-navBar .subCategories .headingTiny.mobile { display:none; } #main-navBar .subCategories .headingSmallest { display: block; float: left; width: 100%; border-bottom: 1px solid #e5e5e5; padding-bottom: 10px; margin-bottom: 5px; } #main-navBar .subCategories .badge { background-color: white; color: #014587; font-weight: 600; margin-bottom: 7px; font-size: 14px; text-decoration: underline; padding: 0; } #main-navBar .subCategories .mainListCat { width: 33.33%; float: left; padding: 0; border: 0px solid #e5e5e5; margin-top: 15px; } #main-navBar .subCategories .mainListCat a { padding: 0; } #main-navBar .subCategories .mainListCat ul { margin-left: 0; } #main-navBar .subCategories .mainListCat ul li { margin-left: 0; font-size: 14px; float: left; width: 100%; } #main-navBar .subCategories .mainListCat ul li a { padding: 0; float: left; width: 92%; line-height: 27px; font-size: 14px; } #main-navBar .subCategories .mainListCat ul li a:hover { text-decoration: underline; } #main-navBar .subCategories .mainListCat ul li i { float: left; line-height: 25px; font-size: 14px; color: #555; opacity: 0.3; margin-right: 6px; margin-left: 0; } #main-navBar .subCategories .mainListCat.other .badge.badge-secondary { text-decoration: none; background-color: white; color: #262626; font-weight: 600; margin-bottom: 7px; font-size: 14px; padding: 0; } #main-navBar .subCategories .mainListSubCat { float: left; } #main-navBar .subCategories .mainListSubCat li { margin-left: -40px!important; } #main-navBar .subCategories .mainListSubCat li .desktopOnly { display: block; } #main-navBar .subCategories .mainListSubCat li .mobileOnly { display: none; } #main-navBar .subCategories ul.mainListSubCat li.navbarExtraList i { margin-right: 6px!important; } #main-navBar .subCategories.rightSide { top: 0; width: 100%; position: static; border: 0; padding: 21px 40px 10px 40px; float: left; max-height: 50vh; } #main-navBar .subCategories.rightSide .mainListCat { margin-top: 0; } #main-navBar .subCategories.rightSide .mainListCat ul { margin-bottom: 10px; } #main-navBar .subCategories.rightSide .mainListCat a:hover { text-decoration: underline; } #main-navBar .subCategories.rightSide .badge { margin: 0;color: #014587; float: left; width: 100%; text-align: left; line-height: 27px; } #main-navBar .subCategories.rightSide .badge:hover { text-decoration: none; } #main-navBar .subCategories.rightSide .categoryTitle { margin-bottom: 23px; } #main-navBar .subCategories.rightSide .fa.fa-chevron-right { padding-right: 0; margin-right: 0; } #main-navBar .subLinks.rightSide { left: -918px; width: 1140px; padding: 0; border: 0; overflow: hidden; } #main-navBar .subLinks.rightSide.second { left: -1028px; width: 1140px; } #main-navBar .subLinks.rightSide div a { padding: 0; } #main-navBar .subLinks.rightSide div a:hover { border: 0; padding: 0; text-decoration: underline; } #main-navBar .subLinks.dropdown-menu .second.dropdown-subcat { float: left; width: 100%; border-top: 1px solid transparent; border-bottom: 1px solid transparent; } #main-navBar .subLinks.rightSide.second.dropdown-menu .subCategories.rightSide .mobileArrow { display: block; float: left; margin-right: 6px; color: #014587; font-size: 10px; } #main-navBar .subLinks.dropdown-menu .second.dropdown-subcat.activeHover { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; border-left: 3px solid #014587!important; border-right: 2px solid white!important; z-index: 99; } #main-navBar .subLinks.dropdown-menu .second.dropdown-subcat.branche { border: 0; } #main-navBar .subLinks.dropdown-menu .second.dropdown-subcat.branche:hover { padding: 0; border: 0; } #main-navBar .subLinks.dropdown-menu .second.dropdown-subcat.branche.activeHover { border: 0!important; } /* FIXED NAVBAR */ .navbar-fixed-userBar { position: fixed; z-index: 1040; top: 10px; width: 950px; display: inline-block; } .navbar-fixed-userBar .searchHeader.quickSearch { width: 560px; float: left; margin-left: 130px; } .navbar-fixed-userBar .searchHeader.quickSearch input[type="search"] { margin-top: 1px; height: 39px; border: 0; } .navbar-fixed-userBar .searchHeader.quickSearch button[type="button2"] { margin-top: 1px; height: 39px; border-width: 0!important; } .navbar-fixed-userBar .navbar-phone { display: block; } .navbar-fixed-userBar .navbar-phone p { margin: 0; padding: 0 40px 0 30px; line-height: 44px; } .navbar-fixed-userBar .navbar-phone a:link, .navbar-fixed-userBar .navbar-phone a:visited { color: white} .navbar-fixed-userBar .btn-group.pull-right.open i { color: #262626; } .navbar-fixed-userBar .btn-group.pull-right.open .caret { color: #262626; } .navbar-fixed-userBar .btn-group.open .dropdown-toggle:hover { background: white; } .navbar-fixed-userBar .btn.btn-user { background: #014587; margin: -11px 0 0 0; height: 61px; border: 0; border-radius: 0; } .navbar-fixed-userBar .btn.btn-user i { color: white; transition: 0.2s; } .navbar-fixed-userBar .btn.btn-user .caret { color: white; margin-top: 6px; } .navbar-fixed-userBar .btn.btn-user:hover { background: white; } .navbar-fixed-userBar .btn.btn-user:hover i { color: white; } .navbar-fixed-userBar .btn.btn-user:hover .btn-text .initialsUser { background: #014587; color: white; } .navbar-fixed-userBar .btn.btn-user:hover .caret { color: #014587; } .header .btn-group.open .dropdown-toggle .initialsUser { background: transparent; border: none; color: #262626; } .navbar-fixed-top .subNavRight { display: none; } .navbar-fixed-userBar .initialsUser { transition: 0.2s } .navbar-fixed-userBar .btn.btn-white.dropdown-toggle.pull-right { background-color: #014587; color: white; -webkit-box-shadow: 0 1px 0 #022450; box-shadow: 0 1px 0 #022450; border-color: #022450; line-height: 42px; border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 1px solid transparent; margin: 0 0 0 4px; } .navbar-fixed-userBar .btn.btn-white.dropdown-toggle.pull-right:hover { color: white; } .navbar-fixed-userBar .ordercount { margin-left: 14px; margin-top: -43px; } .navbar-fixed-userBar .btn-group button i:hover { color: white} } /** MOBILE- RES **/ @media (max-width: 767px) { /* Header */ .banner-message-header p { font-size: 13px; line-height: 21px; } .outOfOfficeWarning p { line-height: 18px; font-size: 12px; padding-top: 4px; padding-bottom: 4px; } .mobileItems { display: block; } /** USP's **/ .uspBlock { display: none!important; } /** Breadcrumbs **/ .product-view .breadcrumbs { margin: 0.5rem 0 0 -0;} .category-view .breadcrumbs { margin: 0.5rem 0 0 -0;} .breadcrumbs a, .breadcrumbs a:link, .breadcrumbs span, .breadcrumbs i.breadcrumb-separator { display: none; } /* Header - Dropdown Menus */ .mobileCartContainer .cartExtraInfo { display: none; } /* quickfix */ .mobileCart .btn:active, .mobileCart .btn.active { background: white; border-radius: 0; border: 0; } .mobileCart .btn:hover, .mobileCart .btn:focus { background: white; border-radius: 0; border: 0; } .mobileCart .btn { padding: 17px; background: #014587; border-radius: 0; border: 0; } .mobileCart { display: block; position: fixed; top: 0px; right: 0px; /* z-index: 9999; */ } .mobileCart .fa.fa-shopping-cart { color: white; font-size: 24px; } .cartItemDropDown { width: 100%; float: left; position: fixed; left: 0; z-index: 999; background: white; padding: 0 30px 30px; } .cartItemDropDown .list-small { margin-bottom: 0; } #recentlyAdd .btn.btn-small.btn-white.buttonRemove { padding: 5px 13px 1px 13px!important; } .maxheightShoppingcart { margin-top: 0; max-height: 50vh; } /* Navbar */ .navbar-default { border: 0; } .header { background-color: transparent; border: 0; padding: 0 25px; } .header img.logo { position: absolute; left: 50%; top: 17px; transform: translate(-50%); z-index: 111; max-width: 85px; } .header .btn.btn-user i { color: white; padding: 4px 6px; line-height: 30px; font-size: 21px; } .header .btn-group button i:hover { color: white; } .header .btn-group.pull-right.open button i { color: #262626; } .header .ordercount { margin-left: 10px; margin-top: -45px; } .search-form-header { padding: 10px 10px 10px 0px; float: left; width: 100%; } .header .userInteractions { padding: 12px 0px 12px 0px; } .header .headerLeft { width: 100%; } .searchHeader.quickSearch { width: 100%; } .searchHeader.quickSearch .input-group-btn { position: absolute; z-index: 9; right: 36px; } .searchHeader.quickSearch .form-control { margin: 0; } .searchHeader.quickSearch input { height: 40px; } .searchHeader.quickSearch button[type="button2"] { height: 40px; } .navbar.navbar-default.navbar-fixed-top .userInteractions { padding: 15px 0px 10px 0px; } .navbar-header button.navbar-toggle[type="button"] { margin: 7px 10px; background: #014587; } .navbar-header button.navbar-toggle[type="button"]:hover { background: #012c64; } .navbar-header .ordercount { margin-left: 25px; margin-top: 10px; } .navbar-default .navbar-toggle { border: none; padding: 0; margin: 12px 0; } .navbar-default .navbar-toggle .icon-bar { background-color: white; } #navbar-collapse-search { /* box-shadow: #d5d5d5 0 2px 5px; */ z-index: 9999; position: absolute; width: 100%; top: 64px; display: block; } #navbar-collapse-cart { box-shadow: #d5d5d5 0 2px 5px; z-index: 99999999; position: fixed; width: 100%; top: 65px; } #navbar-collapse-sorting { box-shadow: #d5d5d5 0 2px 5px; } .navbar-collapse-sorting .btn-group, .btn-group-vertical { width: 100%; padding: 20px; background: #014587; } .navbar-collapse-sorting .btn-group, .btn-group-vertical .btn-white { background: #fff; font-size: 14px; line-height: 21px; } .navbar-collapse-sorting .btn-group, .btn-group-vertical .btn.active { background: #d5d5d5; color: #014587; font-weight: 500; } .navbar-default .mobileCartContainer { background: white; float: left; width: 100%; padding: 30px 1F5px; box-shadow: #d5d5d5 0 2px 5px; } .navbar-default .mobileCartContainer .recentAdded img { display: block; } .mobileNavIcons i.fa-regular.fa-caret-left { transition: 0.2s; margin-left: -40px; position: absolute } .mobileNavIcons.firstStepMenu i.fa-regular.fa-caret-left { display: block; transition: 0.2s; margin-left: 0; position: absolute } .header .btn-group .btn.icon { margin-left: 1px; border-radius: 6px !important; background: transparent; border: none; box-shadow: none; color: white; padding: 0 10px; } .header .btn-group .btn.icon a { color: white} /* Navbar - Pulldown */ #recentlyAdd { min-width: auto!important; } #recentlyAdd .cartButtons #goToCart { width: 100%; margin: 8px 0 0 0; } #recentlyAdd a:link, #recentlyAdd a:visited { width: 100%; ; } .open>.dropdown-menu li { float: left; width: 100%; margin-left: 0;} .open>.dropdown-menu li a { border: 0} .recentAdded .recentAddedPricebox { margin-bottom: 0; } /* Checkout */ .clean-header-brand { padding: 20px 0 20px 0; } .clean-header-brand img { max-width: 195px; max-height: 40px; } .clean-header-icongroup { padding: 22px 10px 22px 0; } .clean-header-icongroup .payoff-header { font-size: 12px; line-height: 67px; position: absolute; width: 100%; text-align: center; top: 0; left: 0; margin-right: 0; } .clean-header-icongroup .btn.btn-user { padding: 5px; } .clean-header-icongroup .btn.btn-info { margin-left: 5px; } .clean-header-icongroup .payoff-header { display: none; } .clean-header-icongroup .btn.btn-success { margin-right: 10px; } .btn.btn-success.btn-lg { width: 100%; } .secure-checkout.alt { display: block; float: left; margin: 55px 25px -66px 0px; } .checkout-customer #register-form { padding-right: 0!important; } /* Checkout steps */ .steps-background { background-color: white; border-bottom:0; padding: 30px 10px 0px 10px; margin-bottom: 30px; } .checkout-proces { padding: 15px 30px 0px 30px; } .checkout-proces .progress { height: 1px; display: none; } .checkout-proces .progressBar { height: 1px; background-color: #E5E5E5; } .checkout-proces .text-label { padding-top: 8px; opacity: 1; font-size: 11px; } .checkout-proces .second-phase-order .checkoutBlock { padding: 0 4px; } .checkout-proces .first-phase-order .checkoutBlock { padding: 0 4px; } .checkout-proces .fase1 .circle { border: 1px solid #C8C8C8!important; width: 16px; height: 16px; margin: 10px auto 0px auto; } .checkout-proces .fase1 .fa-check { left: 3px; top: 3px; background: #014586; color: #014586; border-radius: 99px; width: 8px; height: 8px; font-size: 1px } .checkout-proces .fase1 .text-label a { text-decoration: none; color: #014586; } .checkout-proces .fase2 .circle { width: 16px; height: 16px; margin: 10px auto 0px auto; border: 1px solid #CCCCCC!important; } .checkout-proces .fase2 .circle-active { top: 3px; left: 3px; width: 8px; height: 8px; background-color: #014586!important; border: none!important; } .checkout-proces .fase2 .text-label a:link, .checkout-proces .fase2 .text-label a:visited { color: #014586; font-weight: bold; } .checkout-proces .fase3 .circle { width: 16px; height: 16px; margin: 10px auto 0px auto; border: 1px solid #C8C8C8!important; } .checkout-proces .progressBarDynamic { background-color: #262626; height: 1px; margin-top: -2px; } .checkout-proces .fase1, .checkout-proces .fase2, .checkout-proces .fase3 { margin-top: -19px; } .checkout-proces .checkoutFaseCircle { width: 8px; height: 8px; margin-top: 3px; margin-left: 3px; } /* Submenu Navbar Top */ .navbarSubMenu { background: #014587; float: left; width: 100%; padding: 0; margin: 0; border-radius: 0; } .navbarSubMenu .btn { margin: 0; border-radius: 0; border-width: 0px!important; font-size: 13px; line-height: 45px!important; box-shadow: none!important; } .navbarSubMenu .btn i { line-height: 45px; font-size: 10px; margin-left: 0.5rem; } .navbarSubMenu .btn.btn-default:hover { background: transparent!important; } .navbarSubMenu .btn:focus { background: transparent!important } .navbarSubMenu .btn-catname { max-width: 138px; overflow: hidden; padding-left: 5px!important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: none; } .navbarSubMenu .btn-catname .fa.fa-chevron-left { margin-right: 5px; line-height: 45px; } } /** LOW- RES VIEW **/ @media (min-width: 768px) and (max-width: 991px) { /* Header */ .header .headerRight { width: 210px; } .header .certificationMark { margin-right: 25px!important; } .searchHeader.quickSearch { width: 225px; } #main-navBar .subCategories { width: 447px; } #main-navBar .subLinks.rightSide.second { left: -618px; width: 720px; } #main-navBar .subLinks.rightSide { left: -518px; width: 720px; } #main-navBar .subCategories .mainListCat { width: 100%; } /* Navbar */ .navbar-fixed-userBar { position: fixed; z-index: 1040; top: 10px; width: 590px; display: inline-block; } .navbar-fixed-userBar .searchHeader.quickSearch { width: 190px; margin-left: 0px; margin-right: 0; } .navbar-fixed-userBar .navbar-phone p { padding: 0 15px 0 0px; } .navbar-fixed-userBar .headerLeft { width: 183px!important; } .navbar-fixed-userBar .headerRight { width: 200px; } /** USP Points **/ .uspBlock div { margin-left: 8px; margin-right: 8px; margin-left: auto; margin-right: auto; line-height: 15px; } .uspBlock .fa.fa-check-circle { font-size: 22px; margin-right: 9px; } .usp-points.header { margin-top: 0px; float: left; width: 100%; margin-bottom: 0; padding: 17px 16px; } .usp-points .uspItem { font-size: 12px; text-align: center; padding: 0 0px;} .usp-points .uspItem i { display: none; } /** Breadcrumbs **/ .breadcrumbs { float: left; width: 90%; text-overflow: ellipsis; overflow: hidden; overflow: hidden; white-space: nowrap; padding: 3px 0 0px 0; margin: 15px 0 20px 0; } /* Checkout steps */ .steps-background { padding: 60px 50px; } .checkout-proces .second-phase-order .checkoutBlock { padding: 0 10px; } .checkout-proces .first-phase-order .checkoutBlock { padding: 0 10px; } } /** MED- RES VIEW **/ @media (min-width: 992px) and (max-width: 1199px) { /* Header */ .headerPayoff { background: none;} .headerContent .cleanBlock { padding: 0px 25px; } .searchHeader.quickSearch { width: 387px; transition: 0.2s } .navbar-fixed-userBar { position: fixed; z-index: 1040; top: 10px; width: 753px; display: inline-block; } .navbar-fixed-userBar .searchHeader.quickSearch { width: 300px; margin-left: 0; } .navbar-fixed-userBar .headerRight { width: 230px; } #main-navBar .subCategories { width: 666px; } #main-navBar .subLinks.rightSide.second { left: -828px; width: 940px; } #main-navBar .subLinks.rightSide { left: -718px; width: 940px; } #main-navBar .subCategories .mainListCat { width: 50%; } /** USP **/ .uspBlock div { margin-left: 3px; margin-right: 8px} .uspBlock .fa.fa-check-circle { font-size: 20px; margin-right: 9px; } .usp-points .uspItem { font-size: 13px; } /* Checkout steps */ .steps { max-width: 810px; } }