/** SIDEBARS **/ /** Category List **/ .catListContainer { width: 100%; float: left; } .catListContainer .categoryList { padding: 0; margin: 0 0 30px 0; float: left; width: 100%; } .catListContainer .categoryHeader { float: left; width: 100%; font-weight: 600; color: #262626; } .catListContainer .categoryHeader a { color: #014587; font-weight: 600; line-height: 30px; font-size: 14px; } .catListContainer .categoryHeader .fa.fa-angle-down { margin-right: 4px; } .catListContainer .categoryHeader .fa-regular.fa-caret-down { margin-right: 4px; } .catListContainer .categoryHeader .fa-regular.fa-caret-left { margin-right: 4px; } .catListContainer .fa.fa-angle-left { margin: 0 3px 0 0; } .catListContainer ul.fullCatLists { float: left; width: 100%; padding: 0 0 0 10px; margin: 0 0 0 0; } .catListContainer ul.fullCatLists li { width: 100%; float: left; margin: 0; list-style: none; font-size: 14px; line-height: 30px; } .catListContainer ul.fullCatLists li i { float: left; margin: 0 7px 0 0; width: 12px; line-height: 30px; font-size: 11px; text-align: center; color: #555555; opacity: 0.8; } .catListContainer ul.fullCatLists li a { width: 89%; float: left; font-size: 14px; line-height: 30px; color: #262626; } .catListContainer ul.fullCatLists li.selected { float: left; width: 100%; margin-left: 19px; font-weight: 600; } .catListContainer ul.fullCatLists li.selected i { display: none} .catListContainer ul.fullCatLists > ul.fullCatLists { float: left; width: 100%; padding-left: 15px; } .catListContainer ul.fullCatLists .fa.fa-angle-up { margin: 0 7px 0 0; float: left; line-height: 30px; font-weight: 600; float: left; line-height: 30px; } .catListContainer .fa.fa-angle-left { font-weight: 600; color: #014587; } /* Homepage sidebar */ .subCategories .categoryTitle.mobile { display: none; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background: #f3f3f3; } .sidebar-nav .navbar-nav > li > .dropdown-menu { z-index: 9000; } .sidebar-nav .navbar-default .navbar-nav > li > a:hover { color: #262626; z-index: 2060; } .sidebar-nav .navbar-default .navbar-nav > li > a { line-height:28px; padding-left: 0px!important; padding-top: 0px!important; padding-bottom: 0!important; font-size: 13px; } .sidebar-nav .navbar li i { top: 9px; right: -25px; } .sidebar-nav .navbar-nav > li > .dropdown-menu { margin: -0px 0 0 0px; } /* Homepage sidebar - Container */ .sidebar-nav .navbar-default { border: 0; z-index: 5; background-color: white; } .sidebar-nav .navbar.navbar-default ul { width: 100%; margin-bottom: 0; } .sidebar-nav .navbar.navbar-default ul li { clear: both; float: left; width: 100%; } .sidebar-nav .navbar.navbar-default ul li i { position: relative; right: 0; top: 8px; color: #C8C8C8; font-size: 14px; } .sidebar-nav .navbar.navbar-default ul li .level-2 { display: none; } .sidebar-nav .navbar.navbar-default ul li a { display: inline; float: left; } .sidebar-nav .navbar.navbar-default .navbar-nav > li { border-right: 0; } .sidebar-nav .navbar.navbar-default .navbar-nav > li > a { font-size: 14px; line-height: 30px; color: #555555; border: none; margin: 0; padding: 0; width: 100%; position: relative; text-align: left; font-weight: 400; } .sidebar-nav .navbar.navbar-default .navbar-nav > li > a:hover { background: #f3f3f3; transition: background-color 0.5s ease; z-index: 10; border: none; } .sidebar-nav .navbar.navbar-default .navbar-nav > li svg { width: 14px; height: 14px; float: left; margin-right: 9px; margin-top: 7px; opacity: 0.7; } /* Homepage sidebar - active */ .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu { border-radius: 6px; } .sidebar-nav .navbar-nav > li > .dropdown-menu { width: 666px; padding: 0px; margin: -34px 0 0 200px; position: absolute; float: left; } /* Homepage sidebar - left list */ .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .sidebarSideMenu { padding: 1px; min-height: 251px; position: relative; float: left; width: 40%; border-right: 1px solid #DEDEDE; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .sidebarSideMenu ul { margin-left: 15px; padding: 0px 0 0px 0px; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .sidebarSideMenu ul li { padding: 0; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .sidebarSideMenu ul li:first-of-type { padding-top: 5px;} .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .sidebarSideMenu ul li:last-of-type { padding-bottom: 5px;} .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .sidebarSideMenu ul li a { color: #262626; font-weight: 400; font-size: 14px; line-height: 30px; } .sidebar-nav .sidebarSideMenu ul { padding: 0; margin-left: 0; float: left; width: 100%; } .sidebar-nav .sidebarSideMenu ul li { margin-left: 0; padding: 0; float: left; width: 100%; } .sidebar-nav .sidebarSideMenu .subCat a { width: 264px; padding: 0px 5px 0 15px; } .sidebar-nav .sidebarSideMenu .subCat a:hover { background: #f3f3f3; text-decoration: none; } /* Homepage sidebar - product side */ .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .productArea { float: left; width: 58%; border-left: 1px solid #e5e5e5; padding: 25px; margin-left: -1px; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .productArea .dropdown-header { margin: 0; padding: 5px 20px 5px 0px; background-color: hotpink; display: none; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .productArea .topCatList i { padding: 10px; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .productArea li.dropdown-header { float: left; width: 100%; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .productArea .product-box { height: auto; width: 50%; float: left; margin-bottom: 0; border: 0; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .productArea .product-box .priceBox { width: 100%; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .productArea .product-box .colorChart { height: auto; overflow: hidden; margin-bottom: 7px; min-height: 17px; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .productArea .product-box-image { width: 60%!important; height: auto; margin-bottom: 9px; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .productArea .homepagePrices { width: 100%; float: left; padding-bottom: 10px; } .sidebar-nav .site-index .productArea .homepagePrices { margin: 0 0 1rem 0; padding: 0; } .sidebar-nav .site-index .productArea .productInfo { margin: 0; } .sidebar-nav .navbar.navbar-default .productArea .productInfo .headingSmallest { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .sidebar-nav .navbar.navbar-default .productArea .productInfo .productName { border: 0; height: auto; display: block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin: 0px 0 0 0; padding: 0; line-height: 24px; float: left; width: 100%; } /* Homepage sidebar -extra cat */ .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .extraCat { height: auto; display: block; position: absolute; z-index: 999; border-left: 1px solid #e8e8e8; height: auto; left: 40%; width: 60%; padding: 0; margin-top: 0px; height: 100%; background: #ffffff; margin-left: -1px; flex-direction: unset; display: flex; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .extraCat ul { background: #ffffff; padding: 0; margin: 5px 0 0 1px; float: left; display: block; min-height: 277px; display: block; z-index: 9999; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .extraCat ul li { background: #ffffff; padding: 0; margin: 0; background: white; float: left; padding: 0; margin: 0; width: 100%; display: block; z-index: 9999; } .sidebar-nav .navbar.navbar-default li.dropdown.open ul.dropdown-menu .extraCat ul li a { z-index: 100; border-bottom: 0px; width: 100%; float: left; display: block; z-index: 9999; color: #262626; font-weight: 400; font-size: 14px; } .subCat:hover { background: white; display: block; } .extraCat ul li a { margin: 0; padding: 0 0 0 20px; z-index: 100; border-bottom: 0px; width: 100%; float: left; } .extraCat ul li a:hover { background: #f3f3f3 ; text-decoration: none; } .extraCat:hover { display: block!important; } /* Homepage sidebar -no Sidebar */ .sidebar-nav .noSideBar { width: 100%;} .sidebar-nav .noSideBar .productInfo h2 { padding: 0; margin: 0; } .sidebar-nav .noSideBar .product-box .colorChart { padding: 0; margin: 0; } .sidebar-nav .noSideBar.productArea { width: 100% !important; } .sidebar-nav .noSideBar.productArea .product-box { width: 33.33% !important; border-left: 1px solid #e8e8e8; } .sidebar-nav .noSideBar.productArea .homepagePrices { line-height: 24px; font-size: 14px; float: left; width: 100%; padding: 0; margin: 0 0 1rem 0; } .sidebar-nav .noSideBar.productArea .product-box-image { width: 45%; } /* Homepage sidebar -show all link */ .showAllProdutcs { width: 100%; float: left; border-top: 1px solid #e5e5e5; border-right: none; border-left: none; background: #fff; margin-top: 0; padding: 15px; border-radius: 0 0 6px 6px; } .showAllProdutcs a:link, .showAllProdutcs a:visited { text-align: center; width: 100%; color: #1d5994; font-weight: bold; font-size: 14px; line-height: 30px; } .showAllProdutcs i { top: 0!important; } /* Content */ .sidebar-head { background: #f3f3f3; padding: 14px 20px; border: 1px solid #e8e8e8; width: 90%; float: right; border-radius: 6px 6px 0 0; margin: 0; } .sidebar-content { padding: 20px 25px 25px 25px; border-bottom: 3px solid #e5e5e5; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; border-radius: 0 0 5px 5px; float: right; width: 90%; margin-bottom: 30px; } .sidebar-content p { margin: 0!important; padding: 0!important; font-size: 14px; } .sidebar-content strong { color: #262626; } .sidebar-content .btn { margin-top: 15px; } .sidebar-content-clean { padding: 20px 30px; border: 1px solid #e8e8e8; border-radius: 5px; float: right; width: 90%; margin-bottom: 30px; } .sidebar-content-clean strong { float: left; margin-top: 10px; color: #262626; } .sidebar-content-clean p { padding: 0; margin: 0; } .sidebar-content.empty { margin: 0; border-radius: 0; padding: 0px; border:1px; } .sidebar-content.form input[type="text"] { border: 1px solid #b2c7db; border-radius: 5px; padding: 7px; width: 100%; margin-bottom: 5px; font-weight: 300; font-size: 14px; color: #262626; } .sidebar-content.form textarea { border: 1px solid #b2c7db; border-radius: 5px; padding: 7px; width: 100%; font-weight: 300; font-size: 14px; color: #262626; } .sidebar-content.form label { margin-bottom: 5px; color: #555; font-weight: 300; font-size: 14px; line-height: 28px; } .sidebar-content.form .btn { width: 100%; } .sidebar-content.form span.required { color: red; position: relative; font-size: 21px; } .sidebar-content.empty .errorSummary { color: #a94442; background-color: #f2dede; border-color: #ebccd1; padding: 20px 25px; } .sidebar-content.empty .errorSummary p { color: #a94442; font-size: 12px; line-height: 22px; font-weight: bold } .sidebar-content.empty .errorSummary ul { margin: 0} .sidebar-content.empty .errorSummary ul li { color: #a94442; font-size: 13px; line-height: 24px; font-weight: 300 } .sidebar-content.empty .flash-success { border: 1px solid #b2dba1; color: #3c763d; background-color: #dff0d8; padding: 20px 25px; } .sidebar-contact { width: 100%; float: left; margin: 0 0 25px 0; } .sidebar-contact img { width: 80px!important; float: left; margin-right: 25px; } .sidebar-contact strong { font-weight: 500; } .sidebar-contact ul { float: left; padding: 0; margin: 0; width: auto!important; width: 175px!important; } .sidebar-content ul { margin: 0!important; list-style: none!important; } .sidebar-content ul li { list-style: none!important; margin: 0!important;} .sidebar-content ul li a:link, .sidebar-content ul li a { font-weight: 400!important; } .sidebar-contact a:link, .sidebar-contact a:visited { color: #262626; } .sidebar-contact.last { margin-bottom: 0; } .sidebar-contact.last { margin-bottom: 0; } .sidebar-content.last ul { margin-bottom: 0; } .sidebar-content .list-medium a, .section.content .sidebar-content .list-medium a:link, .section.content .sidebar-content .list-medium a:visited { color: #262626; font-weight: 400; } .section.content .sidebar-banners { padding: 30px 10px; border-bottom: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; border-radius: 0 0 5px 5px; float: right; width: 90%; margin-bottom: 30px; } .section.content .sidebar-list { width: 100%; float: left; margin: 0; } .section.content .sidebar-list p { margin: 0; padding: 0; } .section.content .sidebar-list p.first { margin-bottom: 30px; } /** NO MOBILE- RES **/ @media (min-width: 768px) { /* Homepage sidebar */ .sidebar-nav .navbar .navbar-collapse { padding: 0; max-height: none; } .sidebar-nav .navbar ul { float: none; } .sidebar-nav .navbar ul:not { display: block; } .sidebar-nav .navbar li { float: none; display: block; } } /** MOBILE- RES **/ @media (max-width: 767px) { /* Sidebars */ .btn.btn-small.btn-primary i { color: #262626; font-size: 17px; padding: 0; } /* Custom content */ .section.content .sidebar-head { width: 100%; } .section.content .sidebar-content { width: 100%; } /** Slide in **/ /* Sidebar */ .sidenav { top: 0; height: 100%; z-index: 999999999; left: -0vw; background-color: #014587; width: 100vw; position: fixed; left: 0; overflow-x: hidden; transition: 0.5s; padding: 0px 0 30px 0; } .sidenav a { padding: 8px 20px 8px 20px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .cta-item { color: #262626; font-size: 14px; font-weight: 400; line-height: 40px; padding: 0 30px; float: left; width: 100%; background-color: white; border-top: 0px; } .sidenav .cta-item .fa.fa-chevron-right { float: right; line-height: 40px; font-size: 10px; color: #C8C8C8; } .sidenav .cta-item .mobileArrow { color: #e84530; font-weight: 500; line-height: 42px; padding: 0 15px; } .sidenav .sub-item { color: #555; font-size: 14px; font-weight: 400; line-height: 40px; padding: 0 30px; float: left; width: 100%; background-color: white; border-top: 0px; } .sidenav .sub-item .fa-regular.fa-caret-right { float: right; line-height: 40px; color: #C8C8C8; font-size: 14px; } .sidenav .sub-item .fa-star { color: #FF7602; margin-right: 4px; } .sidenav .sub-item .mobileArrow { color: #e84530; font-weight: 500; line-height: 40px; padding: 0 15px; } .sidenav .categoryContainer .highlight { color: #e93641; font-weight: bold; } #mySidenav { left: -100vw; } .sidenav .mobileNavIcons { background: #fff; height: 50px; width: 100%; padding-top: 5px; } .sidenav .mobileNavIcons a { padding: 0; color: #555555; } .sidenav .mobileNavIcons .closebtn { position: absolute; top: 15px; right: 20px; color: #262626; z-index: 999999; padding: 0 15px; } .sidenav .mobileNavIcons .backbtn { position: absolute; top: 30px; left: 30px; color: #262626; border: 0; box-shadow: none; } .sidenav .navigationContainer { float: left; width: 100%; padding-top: 30px; padding-bottom: 40px; } .sidenav .navigationContainer a:link, .sidenav .navigationContainer a:visited { color: white!important; font-size: 14px; width: 100%; float: left; border-bottom: 0px; line-height: 40px; padding: 0 30px; } .sidenav .navigationContainer .fa-regular.fa-caret-right { float: right; line-height: 40px; font-size: 14px; color: #C8C8C8; } .sidenav .socialContainer { width: 100%; float: left; padding: 0 0 0 30px; margin-bottom: 40px; } .sidenav .socialContainer a { line-height: 43px; color: white; float: left; padding: 0; margin-right: 15px; width: auto; } .sidenav .menuDisclaimer { width: 100%; float: left; color: #fff; padding: 0 30px; } .sidenav .menuDisclaimer p { color: #fff; font-size: 13px; } .sidenav .menuDisclaimer a { width: auto!important; padding: 0; color: #fff; font-size: 14px; line-height: 33px; text-decoration: underline; } .sidenav .btwToggle.mobile { width: auto; float: left; padding: 0 15px 0 15px; margin-bottom: 40px; } .sidenav .btwToggle.mobile a { width: auto; padding: 0; float: left; color: white } .sidenav .btwToggle.mobile label { margin-bottom: 0; line-height: 37px; color: white; margin-left: 10px; } .sidenav .languageSelector .btn.btn-small.btn-white img { position: relative; top: 11px; margin-right: 7px; } .sidenav .languageSelector { z-index: 9999999999999; position: relative; float: left; } .sidenav .languageSelector .dropdown-menu.flags li a { font-size: 14px; line-height: 27px; } /* Category Container */ .sidenav .categoryContainer { padding-bottom: 15px; padding-top: 0; position:relative; background-color: white } .sidenav .categoryContainer h3 { float: left; width: 100%; color: #262626; font-weight: 600; font-size: 16px; line-height: 40px; background: white; padding: 0px 15px 0 30px;margin: 0px; border-bottom: 0px; } .sidenav .categoryContainer .subCategories { left: -100vw; position: absolute; background: white; width: 100%; z-index: 100000; top: 10px; min-height: 100%; padding-bottom: 20px; } .sidenav .categoryContainer .subCategories a { width: 100%; float: left; margin: 0; padding: 0; font-size: 14px; color: #262626; font-size: 14px; line-height: 40px; border-bottom: 0; } .sidenav .categoryContainer .subCategories a .mobileSubArrow { color: #C8C8C8; } .sidenav .categoryContainer .subCategories a .badge.badge-secondary { background: transparent; color: #262626; padding: 0; font-weight: 300; font-size: 14px; line-height: 40px; font-weight: 400; } .sidenav .categoryContainer .subCategories .headingSmallest { padding-left: 30px; line-height: 40px; } .sidenav .categoryContainer .dropdown { border-bottom:1px solid #eee; } .sidenav .categoryContainer .dropdown > a { font-size:14px; color:#555555; } .sidenav .categoryContainer .dropdown > a .mobileArrow { display:inline-block; float:right; color: #014587; font-size:12px; padding:4px 5px; } .sidenav .categoryContainer .listContainer .mainListSubCat { display: block; } .sidenav .categoryContainer .listContainer .mainListSubCat li { margin-left:-10px; } .sidenav .categoryContainer .listContainer .other .mainListSubCat { display: block; } .sidenav .categoryContainer .listContainer .other .mainListSubCat i { font-size: 10px; line-height: 40px; margin-right: 0; color: #555555; } .sidenav .categoryContainer .listContainer .other .mainListSubCat li { margin-left: -40px; } .sidenav .categoryContainer .listContainer .other .badge { display: none; } /* Main cats */ .second.dropdown-subcat a:link, .second.dropdown-subcat a:visited { font-size: 14px; line-height: 40px; padding: 0 30px; color: #262626; font-weight: 400; border-top: 0px; background-color: white} .second.dropdown-subcat .mobileArrow { font-size: 14px; line-height: 40px; float: right; color: #C8C8C8; } .second.dropdown-subcat svg { width: 15px; height: 15px; float: left; margin-right: 9px; margin-top: 10px; } /* Sub cats */ .sidenav .categoryContainer ul.listContainer li.mainListCat { width: 100%; float: left; } .sidenav .categoryContainer ul.listContainer li.mainListCat ul.mainListSubCat { width: 100%; float: left; margin-left: 0; padding: 0; display: none; } .sidenav .categoryContainer ul.listContainer li.mainListCat ul.mainListSubCat li { width: 100%; padding: 0; margin: 0; float: left; border-top: 0px; } .sidenav .categoryContainer ul.listContainer li.mainListCat ul.mainListSubCat .extra-arrow { float: right!important; line-height: 40px; font-size: 10px; color: #555; padding: 0; margin-right: 0px; } .sidenav .categoryContainer ul.listContainer li.mainListCat ul.mainListSubCat .subcatTitle { margin: 0; padding: 0 0 0 0px; float: left; width: 90%; color: #262626; font-weight: 400; } .sidenav .categoryContainer ul.listContainer li.mainListCat ul.mainListSubCat li a { font-weight: 400; } .sidenav .listContainer { float: left; width: 100%; padding: 0 30px; margin: 0;} .sidenav .listContainer .mainListCat.categoryTitle.mobile .openSubCat i { display: none; } .sidenav .listContainer .mainListCat.categoryTitle.mobile .badge.badge-secondary { color: #262626; font-weight: bold; } .sidenav .listContainer .mainListCat { float: left; width: 90%; margin-left: 0 } .sidenav .listContainer .mainListCat .mobileSubArrow { float: right; display: block; font-size: 14px; line-height: 40px; margin-right: 0px; color: #C8C8C8; } .sidenav .listContainer .mainListCat.categoryTitle.mobile .subcatTitle { text-decoration: none!important; } /* Href to cat */ li.mainListCat.other ul.mainListSubCat { display: block!important; } .subCategories .mainListSubCat li .desktopOnly { display: none; } .subCategories .mainListSubCat li .mobileOnly { display: block; } .subCategories li.mainListCat.other { float: left; width: 100%; margin-top: 20px; padding-top: 10px; padding-bottom: 10px; border-top: 1px dashed #e5e5e5; border-bottom: 1px dashed #e5e5e5; } .subCategories li.mainListCat.other i { float: right; } /* Active cat */ .sidenav .categoryContainer .subCategories .categoryTitle { display: none; } .sidenav .categoryContainer .subCategories .categoryTitle.mobile { display: block; margin-top: 10px; color: #262626; font-weight: 700; float: left; width: 100%; text-decoration: underline; padding: 0 0px; } .sidenav .categoryContainer .subCategories .categoryTitle.mobile a { color: #1d5994; font-weight: 600; } .sidenav .categoryContainer .subCategories .categoryTitle.mobile a:link, .sidenav .categoryContainer .subCategories .categoryTitle.mobile a:visited { text-decoration: underline; padding: 0 30px; } .mainListCat.categoryTitle.mobile a.openSubCat { float: left; padding: 0!important; } } /** LOW- RES VIEW **/ @media (min-width: 768px) and (max-width: 991px) { /** Custom content **/ .section.content .sidebar-head { width: 100%; } .section.content .sidebar-content { width: 100%; } .section.content .sidebar-content i { margin: 0 5px 0 0 } .section.content .sidebar-contact img { width: 62px; margin-left: -10px; margin-top: 10px; margin-right: 10px; } } /** MED- RES VIEW **/ @media (min-width: 992px) and (max-width: 1199px) { /* Custom content */ .section.content .sidebar-contact img { margin-left: -10px; width: 69px; margin-right: 15px; margin-top: 11px; } }