/* Styles for Contempo Placement and Positioning (Colours and Appearance are Below) ----------------------------------- */ body { padding: 0; margin: 0; border: 0; background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%232c2e4d' fill-opacity='0.64' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); font-size:15px; } h1 { margin: 0; padding: 0.5em 0 1em; } h2 { margin: 0; padding: 0.75em 0 0.5em; } h3, h4, p { margin: 0; padding: 0 0 0.5em; } a, p, h1, h2, h3, h4, * { font-family: 'Roboto', sans-serif; } /* --- key default styles ---*/ .hide-lg, .hide-md, .hide-sm { display: block; } .show-lg, .show-md, .show-sm { display: none; } .central-area { max-width: 1151px; margin: 0 auto; background: white; padding: 0 28px; } .main-menu-bar .central-area { background: #362354; padding: 0; width: 100%; max-width: 1207px; } .header-area { background: #362354; } .contains-floating-group:after { content: ""; display: table; clear: both; } .full-width { clear: both; width: auto; float: none; } .menu-area { display: block; margin: 0 auto; max-width: 1200px; } .footer-area .central-area { background: #362354; } /* ---- buttons ---- */ .button { float: left;  } /* why buy */ .why-buy { float: left; width: 99.9%; margin: 25px 0 10px 0; display: flex; display: -webkit-flex; flex-wrap:wrap; } .why { flex: 1 0 20%; text-align: center; } .why i { color: white; font-size: 2em; margin-top: 24%; } .why-text h3 { margin: 0; padding: 0; } .why-text { margin-top: 5px; } span.why-icon { background: #2e2f4d; border-radius: 100%; display: inline-block; width: 4em; height: 4em; position: relative; } /* ---- default list styles ---- */ .product-list { display: flex; float: left; flex-wrap: wrap; margin: 20px 0; } .product-list h2 { flex: 1 0 100%; flex-wrap: wrap; text-align:center; } .marketing-list-entry { flex: 1 1 23%; border: 1px solid #ddd; margin: 0.5%; padding: 0.5% 0; } .mini-product-summary a, .mini-product-summary a img { max-width: 100%; max-height: 220px; text-align: center; margin: 0 auto; height:100%; width:auto; } .mini-product-summary-image { min-height: 220px; } .mini-product-summary-image a { display: block; } .mini-product-summary-price { text-align: center; font-size: 20px; margin-top: 5px; } .mini-product-summary-link a { text-align: center; /* width: 100%; */ padding: 5px 10px; border: 1px solid #ccc; background: #ddd; color: #2e2f4d; font-weight: bold; } .mini-product-summary-link { text-align: center; margin: 7px 0; } .mini-product-summary h3 { padding: 0; text-align:center; width:100%; margin-top: 10px; } .marketing-list-entry:empty { display: none; } .fragment-list { float: left; width: 100%; display: flex; display: -webkit-flex; flex-wrap: wrap; } .fragment-list .text-left-of-image { width: auto; border: 0; margin: 5px 5px; padding: 15px; } ul.horiz-list, ul.grid-list, ul.text-list { padding:0; margin: 0; list-style: none; } ul.horiz-list li { display: inline; } ul.horiz-list li a { display: block; float: left; } ul.text-list li a { padding: 10px; display: block; } ul.grid-list { width: 100%; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } li.grid-item { box-sizing: border-box; -webkit-flex: 1 0 25%; -ms-flex: 1 0 25%; flex: 1 0 25%; padding: 5px; margin-bottom:45px; } .bulk-area > h1 { background: #362354; color: #ffffff; padding: 7px 0 7px 10px; } div#idBreadcrumbsTop { margin: 0; padding:0; visibility:visible !important; } /* ---- mobile-nav ---- */ .mobile-nav { position: fixed; top: 0; left: 0; width: 100%; height: 40px; z-index:9999; } .mobile-nav ul { padding: 0; margin: 0; list-style: none; } .mobile-nav li { display: block; float: left; } .mobile-nav li a { display: block; float: left; height: 40px; } li.mobile-cart, li.mobile-checkout { float: right; } li.mobile-cart a { margin: 3px; height: 34px; line-height: 34px; } /* --- header area --- */ .top-menu { height: 1.5em; float: right; margin-top: 1em; } .top-menu a { padding: 0 10px; line-height: 1.5em; border-left: dotted 1px #362354; } .top-menu li:first-child a { border-left: 0; } .logo-area { float: none; margin: 25px 0; } .logo-image { float: none; } .customer-service-image { float: right; } .shopping-cart-summary { margin: 0; padding-left:15px; } .shopping-cart-summary, .search-icon { float: right; } .shopping-cart-summary a { display: block; float: right; } .header-area a { color: #fff; } .search-bar-area { margin:0 auto; width:85%; clear:right; } .search-bar-area .search-icon { float: right; margin: 3px 5px 0 0; } .search-bar-area input[type="text"] { float: left; width: 98.3%; padding: 0 5px; height: 38px; line-height: 38px; } .contact-info { float: Left; text-align: center; margin: 1em 0; font-size: 20px; } /* --- bulk-area and sidebars --- */ .bulk-area { padding: 8px 1.5% 30px 1.5%; } .central-column { width: 960px; margin: 0 auto; } .left-area { float: left; width: 100%; } .sidebar { width: auto; max-width: 245px; float: left; margin-left: 3px; } .list-item { -webkit-box-flex:  1 0 47%; -moz-box-flex: 1 0 47%; -webkit-flex:  1 0 47%; -ms-flex:  1 0 47%; flex:  1 0 47%; border: 1px solid #ddd; margin: 6px; } .left-sidebar { float: left; } .right-sidebar { float: right; } .content-area { width: 940px; float: right; } .sidebar-item { margin-bottom: 20px; } /* --- breadcrumb --- */ ul.breadcrumb { padding: 0; margin:0; } ul.breadcrumb li.you-are-here { display: block; float: left; margin-right: 10px; } ul.breadcrumb li a { padding-right: 15px; margin-right: 10px;  } /* --- product summary grid --- */ .product-summary { padding: 0 10px; position: relative; } .product-summary-image-holder { height: auto; } .product-summary img { } .feefoproductlogo img { width: auto !important; } .promotion-list .product-summary { width: auto; height: auto; } .promotion-list .product-summary-image-holder { height: auto; } .promotion-list .product-summary img { width: 135px; } .promotion-list .product-summary h3 { padding: 10px 0; } .promotion-list .product-summary .feefo-image { float: none; margin: 0; } /* --- filter-tools --- */ .filter-tools { padding: 0 1em; } .filter-tools h4 { margin-top: 1em; } /* --- Contempo product details --- */ .product-details { float: none; width: 100%; clear: both; } .product-details h1, .product-details .feefo-image { margin-top: 0; padding: 0; font-size: 20px; text-transform: uppercase; font-weight: bold; margin-bottom:10px; } .product-details .feefo-image {} .product-details-image { margin: 0 0 20px 0; } .product-details-image img { max-width: 100%; float: left; } .product-image-left .product-details-image { float: left; } .product-image-right .product-details-image { float: left; } .product-details-text { min-width: 43%; margin: 0 0 0 20px; } .product-image-left .product-details-text { float: left; } .product-image-right .product-details-text { float: left; } .product-details-actions { margin-bottom: 2em; } .product-options { margin-bottom: 2em; } .product-options label { font-weight: bold; } .product-options ul { list-style: none; padding: 1em 0; margin: 0; } .radio-button { padding: 0.75em 0 0 0; } .product-details-price { font-size: 28px; font-weight: bold; float:left; } .product-quantity { float: left; width: 40%; } .product-quantity label { float: left; line-height: 40px; padding-right: 1em; } .product-quantity input { width: 30px; } .stock-message { float: left; padding: 0.75em 0 0 1em; font-weight: bold; } .product-description { clear: both; float: none; margin: 1em 0; border: 1px solid #cccccc; padding: 15px 2.5%; width: 95%; } .diff { margin-top: 1em; } .diff img { float: left; margin: 0 20px 0 10px; } .diff-text { display: block; float: left; margin: 0.5em 0; max-width: 255px; } .attribute-widget { float: left; margin: 0 10px 10px 0; } .attribute-widget select { width: 200px; } /* --- footer area --- */ .footer-area  { padding: 25px 1.5%; } .footer-area ul.bulleted-list { float: left; width: 230px; margin: 0; margin: 0 1em 1em 0; padding: 0; list-style: none; } .footer-right { float: right; text-align: right; } .social-icons, .payment-icons { padding: 0 0 0.5em 0; } /* --- home page --- */ .home-top-row { width: auto; margin-bottom: 10px; } .slideshow { width: 100%; float: left; } .home-right { float: right; width: 40%; } .home-right-pos-1, .home-right-pos-2 { float: right; } .home-right-pos-1 { margin-bottom: 15px; } .home-promo-grid { width: auto; clear: both; } .home-promo { width: 230px !important; height: 230px !important; float: left; margin: 0 1.35% 10px 1.35%; position: relative; } .horiz-list li:first-child div { margin: 0 1.35% 10px 0px; } .horiz-list li:nth-child(6) div { margin: 0 0px 10px 1.35%; } .home-promo a { display: block !important; width: 230px !important; height: 230px !important; margin: 0 !important; padding: 0 !important; font-weight: normal !important; line-height: 1.4em !important; position: absolute; top: 0; left: 0; z-index: auto !important; } .home-promo-label { height: 65px !important; margin: 155px 0 0 0 !important;  padding: 8px 5px 2px !important; float: none !important; width: auto !important; } .home-icon { width: 200px; float: left; text-align: center; font-weight: bold; text-transform: uppercase; margin:0 auto; } /* --- cart and checkout --- */ .shopping-cart-grid { width: 100%; border-collapse: collapse; margin-bottom: 1em; } .mobileHeader { display: none; } .shopping-cart-grid td, .shopping-cart-grid th { padding: 0.25em; } .shopping-cart-items td { padding: 0.25em 0; } .shopping-cart-items input { width: 40px; } .floated-button-right { float: right; margin-bottom: 0.5em; } .floated-button-left { float: left; margin-right: 1em; margin-bottom: 0.5em; } table.checkout { width: 100%; border-collapse: collapse; margin-bottom: 1em; } table.checkout td { padding: 0.25em; } .checkout-field-label { width: 40%; } table.checkout th, table.checkout td.address-table-heading { text-align: left; padding: 0.25em; } table.checkout th.change { text-align: right; } .checkout-buttons { margin: 1em 0; } /* --- search --- */ .sort_by { padding: 5px; text-align: right; } /* --- terms and conditions --- */ .terms-and-conds { margin: 2em; } .terms-and-conds h3 { margin-top: 2em; } /* ---- contact form ---- */ .contact-field { margin: 1em 0; } .contact-field input,  .contact-field textarea { width: 500px; } fieldset { border: 0; padding: 0; margin: 0; }  /* Styles for Colours and Appearance --------------------------------------- */ html, body { font-size: 100%; } body { background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%232c2e4d' fill-opacity='0.64' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 14.5px; line-height: 1.4em; color: #444; } h1 { line-height: 1.2em; font-size:21px; font-family: 'Lato', sans-serif; padding:0.2em 0; } h2, h3, h4 { font-size: 18px; line-height: 1.2em; font-family: 'Lato', sans-serif; } a { color: #362354; text-decoration: none; } a img { border: none; } a:hover { text-decoration: underline; } img.logoimage { max-width: 350px; height: auto; width: auto; } /* ---- buttons ---- */ .button { height: 38px; padding: 0 15px; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 1.2em; background: #777; color: #fff; cursor: pointer; float: left; border: solid 1px #aaa;  -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 2px 2px 4px 0px rgba(170,170,170,1); -moz-box-shadow: 2px 2px 4px 0px rgba(170,170,170,1); box-shadow: 2px 2px 4px 0px rgba(170,170,170,1); } a.button { display: block; } .button:hover { background: #362354; border: solid 1px #362354; color: white; text-decoration: none; } .green-button { background: #257300; } .cart-button { padding: 0 2em 0 0.5em; text-align: right; background: #257300 url('cart-button-icon.png') 20px 3px no-repeat; border: solid 1px #257300; width: 200px; } .cart-button:hover { background: #362354 url('cart-button-icon.png') 20px 3px no-repeat; border: solid 1px #362354; } .small-button { height: 25px; padding: 0 5px; font-size: 1em; color: #fff; float: none; -webkit-border-radius: 3px; border-radius: 3px; } /* ---- input fields ---- */ input[type="text"], input[type="number"], input[type="password"], select { padding: 10px; border: solid 1px #dddddd; box-shadow: inset 1px 1px 2px 0 #707070; transition: box-shadow 0.3s; font-family: Roboto, Arial, Helvetica, sans-serif; } input[type="text"]:focus, input[type="text"].focus, input[type="number"]:focus, input[type="number"].focus { box-shadow: inset 1px 1px 2px 0 #c9c9c9; } /* ---- mobile-nav ---- */ .mobile-nav { background: #362354; } li.mobile-nav-button { background: #362354; } li.mobile-cart a { background: #20af69 url('cart-button-icon.png') 5px 3px no-repeat; color: white; padding: 0 10px 0 50px; } /* --- top bar --- */ .top-bar { background: #362354; } .top-bar ul li a { color: white; text-transform: uppercase; font-size: 15px; } .top-bar ul li a:hover { text-decoration: none; background: #666; } /* ---- header area ---- */ .shopping-cart-summary a { line-height: 36px; font-weight: bold; text-transform: uppercase; } .search-bar-area { background: #fff; border: solid 1px #362354; } .search-bar-area .search-button { } .search-bar-area input[type="text"] { border: solid 1px #fff; box-shadow: none; transition: none; -webkit-border-radius: 0px; border-radius: 0px; } .search-bar-area input[type="text"]:focus, .search-bar-area input[type="text"].focus { box-shadow: none; } /* --- bulk-area and sidebars --- */ .left-sidebar h3 { color: #362354; border-bottom: solid 1px #362354; } .left-sidebar ul { margin: 10px; } .left-sidebar ul.text-list li a { border: 0; } .left-sidebar ul.text-list li a:hover { background: #362354; color: white; } .sidebar-item h3 { padding: 10px; } ul.text-list li { border-bottom: dotted 1px #362354; } ul.text-list li a { background: #fff; font-weight: 600; } ul.text-list li a:hover { text-decoration: none; background: #ffffff; } .right-sidebar h3 { font-size: 1em; color: #444; } /* --- filter-tools --- */ .filter-tools { } /* --- breadcrumb --- */ ul.breadcrumb li a { background: url('breadcrumb-arrow.png') right no-repeat;  font-weight: bold;  } /* --- product details --- */ .magic-zoom img { border: solid 1px #ddd; float: left; max-width: 100%; } .diff { border: solid 1px #ddd; } /* --- footer area --- */ .footer-area { background: #362354; } .footer-area h3, .footer-area li, .footer-area p, .footer-area a { color: #ffffff; } /* --- home page --- */ .home-promo a { color: white !important; } .home-promo a:hover { color: white !important; background: none !important; text-decoration: none; } .home-promo-label { background: url('shading.png') !important; } .home-promo a:hover .home-promo-label { background: #362354 !important; } /* --- cart and checkout --- */ td.cart { border-bottom: solid 1px #362354; } .shopping-cart-grid th, td.total-cell, tr.ShowAlways { background: #362354; color: white; } .shopping-cart-grid th a { color: white; } table.checkout th, table.checkout td.address-table-heading { background: #362354; color: white; font-weight: bold; } table.checkout tr { border-bottom: solid 1px #362354;  } /* --- search --- */ .sort_by { color: white; background: #362354; } .actrequired { color: #cc0000; } /* ----------------------- Styles for 'Customisable Product Details' ------------------------------ */ .cust-product-wrapper { clear: both; border-bottom: dotted 1px #362354; padding-bottom: 1em; margin-bottom: 1em; } .cust-product-details { width: 50%; margin-bottom: 1em; } .cust-product-image { width: 45%; margin-bottom: 1em; font-size: 1.35em; } .cust-left { float: left; } .cust-right { float: right; } .cust-product-image img { max-width: 100% !important; } .product-details .cust-right img, .cust-right img { float: right; } .top-spec-wrapper { width: auto; overflow: auto; margin-bottom: 1em; font-size: 1.35em; } .top-spec-label { float: left; width: 100px; clear: left; font-weight: bold; } .top-spec-value { float: left; } .cust-main-price { padding-bottom: 1em; color: #362354; font-weight: bold; font-size: 1.35em; } .cust-stock-message { padding-bottom: 1em; line-height: 1.5em; font-size: 1.35em; } .cust-product-description { clear: both; padding: 1em 0; } .cust-cart-button { font-size: 1.35em; line-height: 1.7em; padding-top: 1em; clear: both; } .description-text { font-size: 1.35em; } /* --- fragment image --- */ img.fragment-image { width: auto; max-width: 100%; } #FilterResultElements { width: 100%; } .clear-button { padding: 0 5px; font-family:  "Open Sans", Verdana, sans-serif;; font-size: 1em; background: #aaa; color: #fff; cursor: pointer; float: right;  border: solid 1px #444; font-weight: 700;    -webkit-appearance: none; -webkit-border-radius: 0; font-size: 0.75em; } .clear-button:hover { background: #6c89c5; color: white; text-decoration: none; } .std-product-details { float: left; height: 250px; margin: 0.75em; } .product-details-actions input[type="image"] { max-width: 200px; height: auto; } .row ul li a { text-align: left !important; float: left; clear: right; } .row ul li a:hover { color: #858ac0 !important; transition: 0.5s; } .sy-slides-wrap .sy-controls { display: block; } .sy-controls li a:after { background-color:#444444 !important; } .sy-slide > a > img { width:auto !important; max-width:100%; margin:0 auto !important; max-height:359px; } .header-right { float: right; } .header-left { float:left; } .header-right, .header-left { font-size: 16px; margin-top: 32px; } .phone { float: left; margin:0; line-height: 36px; font-weight: bold; text-transform: uppercase; } .selectOptions { float: left; clear: both; margin: 6px 0; width: 100%; } .attribute-list { float: left; width: 90%; margin: 5px 0 10px 0; } .selectOptions select { width: 100%; float: left; max-width: 400px; } .text-left-of-image { float: left; width: 100%; margin: 1em 0; border-bottom: 2px solid #362354; padding: 0 0 20px 0; } .text-left-of-image .fragment-text { } .product-summary img { max-width: 100%; max-height: 250px; } i.fa.fa-shopping-basket { margin-left: 5px; } h1.stripped, h2.stripped { text-align: center; position: relative; z-index: 2; font-size: 30px; text-transform: uppercase; height: 22px; margin: 0 0 2px 0; line-height: 1.1; height: 40px;  padding:0; } h1.stripped span.line-center, h2.stripped span.line-center { margin: 0; padding: 0 10px; background: #fff; display: inline-block;  font-size:33px; } h1.stripped em, h2.stripped em { font-weight: bold; font-style: normal; } h1.stripped:after, h2.stripped:after { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: solid 1px #d2d2d2; z-index: -1;  } .ks-header { text-align:center; margin-bottom:25px; margin-top:35px; } .product-price > span { font-size: 12px; margin: 0 5px; } .magic-zoom img { max-width: 300px !important; width:100%; } .footer-address { float: left; } .footer-address { float: right; text-align: right; margin-left:10px; } .footer-area h3, .footer-area li { text-transform:uppercase; } .middle-area { margin-bottom:5px; } img.logoimage { display:block; margin:0 auto; float:none; } #searchbar { display: none; } #close-search { position: absolute; right: 9px; z-index: 99; color: #444444; font-size: 20px; top: 10px; font-family: FontAwesome; } .search-bar-area form { position: relative; } .search-icon { line-height: 32px; padding-right:15px; border-right: 1px solid #fff; } .header-area { display:flex; } .middle-area { flex: 1 0 60%; } .header-right { flex: 1 1 17%; } .header-left { flex: 0 0 18.4%; } .logo-image a { display: block; margin: 0 auto; float: none; max-width: 350px; } /* ---------------------- RESPONSIVE STYLES ---------------------------------- */ @media screen and (max-width:1750px) { .menu-area { display: block; margin: 0 auto; max-width: 100%; } } @media screen and (max-width: 1200px) { .hide-lg { display: none; } .show-lg { display: block; } .central-area { max-width: 1100px; } .header-right { flex:0 0 17%; } .section-banner-image img { max-width: 100%; } .include-left-sidebar { width: 700px; } .product-details .left-area, .product-details .sidebar, .product-details .left-sidebar { float: none; width: 100%; clear: both; } .slideshow { float: none; margin: 0 10px 10px 0; } .slideshow img { width: 100%; height: auto; max-width: 950px; } .home-right-pos-1, .home-right-pos-2 { float: left; margin: 0 10px 10px 0; } .home-promo-grid  { width: auto; max-width: 960px; } .home-promo { margin: 0 10px 10px 0; } .home-top-row { width: 810px; margin: 10px auto; } .sidebar { max-width:530px; } } @media screen and (max-width: 1150px) { .sidebar { max-width:470px; } } @media screen and (max-width: 1050px) { .sidebar { max-width:430px; } } @media screen and (max-width: 960px) { .image-left { float:right; } .list-item:nth-child(2) { display:none; } .text-left-of-image > div > a > img { margin: 0 auto; float: none; display: block; } .header-right { flex: 0 0 23%; } .middle-area {flex: 0 0 57%;}  .header-left {flex: 0 0 22.4%} .why { flex: 1 0 48%; } .header-right { float: none; width:100%; } .phone { width:100%; text-align:center; margin:0; display:block; } .logo-area { float: none; width: auto; text-align: center; clear: both; margin:0 auto; display:block; margin-top:20px; } .logo-image {float:none;} .shopping-cart-summary a { float: left; padding-right: 36px; } .search-bar-area { width: 100%; max-width: 350px; margin: 10px auto !important; float: none; clear:both; display:block; } .central-area { max-width: 97%; padding:0 1.5%; } .bulk-area { padding:8px 1.5%; } li.grid-item { -webkit-flex: 1 0 30%; -ms-flex: 1 0 30%; flex: 1 0 30%; } .central-column { width: auto; margin: 0; } .left-area, .left-sidebar, .right-sidebar, .content-area { float: none; width: auto; margin: 0; } .content-area { width: 700px; margin: auto; margin-bottom: 20px; } .product-details-text { width: 340px; } .product-quantity { float: none; width: 100%; margin-bottom: 1em; } .diff-text { max-width: 230px; } .home-top-row { width: auto; margin-bottom: 10px; } .home-right-pos-1, .home-right-pos-2 { float: none; margin-right: 0px; width: auto; text-align: center; } .home-right-pos-1 img, .home-right-pos-2 img { width: auto; max-width: 100%; } .home-promo-grid { width: 480px; margin: 0 auto; float: none; } .footer-area.central-area { padding: 1.5%; } .header-left { display:none; } .header-area { flex-wrap:wrap; } .middle-area { flex:1 0 100%; } .header-right { flex:1 0 100%; margin-top:10px; } .search-icon, .shopping-cart-summary, .shopping-cart-summary a { text-align: center; width: 100%; border: 0; float: none; } } @media (max-width:840px) { .footer-area ul.bulleted-list { float: left; width: 150px; margin: 0; margin: 0 9px 1em 0; padding: 0; list-style: none; } } @media screen and (max-width:750px) { .list-item { -webkit-box-flex: 1 0 99%; -moz-box-flex: 1 0 99%; -webkit-flex: 1 0 99%; -ms-flex: 1 0 99%; flex: 1 0 99%; } } @media screen and (max-width: 700px) { .marketing-list-entry { flex: 1 1 48%; } .header-right { width:99%; } .hide-md { display: none; } .show-md { display: block; } .central-area { } .top-menu { display: none; } .main-menu-bar { } .main-menu-bar > .central-area{ margin: 0; } li.grid-item { max-width: 100%; } .logo-area { height: auto; margin-top: 55px; } .logo-image { clear: both; float: none; height: auto; } .logo-image img { width: auto; height: auto; max-width: 100%; } .search-bar-area { float: none; clear: both; margin: 0 auto 1em auto; } .content-area { width: auto; } .product-details-text, .product-details-image { float: left !important; clear: both; margin-bottom: 1em; width: auto; } .product-details-text { margin-top:1em; margin-left:0; } .product-details-actions { float:left; margin:10px 0 0 0; } .widget { /* tabber */ margin-right: 0; } .product-details-actions { height: auto; margin-top: 1em; } .product-summary { width: auto; height: auto;    } .contact-field input,  .contact-field textarea { width: auto; } li.grid-item { -webkit-flex: 1 0 48%; -ms-flex: 1 0 48%; flex: 1 0 48%; } } @media screen and (max-width:550px) { .footer-area.central-area, .footer-address { text-align: center; } .footer-area ul.bulleted-list { width:100%; margin:1em 0; } .footer-address { width:100%; margin:1em 0; } } @media screen and (max-width: 480px) { .hide-sm { display: none; } .show-sm { display: block; } .top-bar ul li a { width: 20px;  overflow: hidden; } .product-details-text .magic-zoom img { max-width: 100%;  } .home-promo-grid { width: 240px; } .diff-text, .home-diffs .diff-text { max-width: 50%; } .shopping-cart-items td { float: left; text-align: left !important; width: 100% !important; } table.checkout td { float: left; width: 100%; box-sizing: border-box; } table.checkout td.address-table-heading { width: 50%; } table.checkout td.InvoiceField, table.checkout td.DeliverField { width: 50%; } table.checkout td.InvoiceField input[type="text"], table.checkout td.DeliverField input[type="text"] { padding: 10px 3px; width: auto !important; max-width: 100%; } .cust-left, .cust-right, .cust-product-details, .cust-product-image { width: auto; float: none; margin-bottom: 1em; } .cust-right img { float: none; } } @media screen and (max-width:400px) {  li.grid-item { -webkit-flex: 1 0 99%; -ms-flex: 1 0 99%; flex: 1 0 99%; } } @media screen and (max-width: 320px) { li.mobile-cart a { background: #20af69; color: white; padding: 0 10px 0 10px; } } /* Recently Viewed Products List Style ------------------------------------ */ option:disabled { color: #dddddd; } /* ---- mega menu ---- */ .main-menu-bar { height: 51px; } .miniNav { display: none; } #mega-menu { z-index:999999; position: relative; } #mega-menu ul { width: 100%; margin: 0; padding: 0; position: relative; z-index: 1; list-style: none; height: 51px; display:flex; } #mega-menu ul li { float: left; width: auto; height: auto; margin: 0; padding: 0; word-wrap: break-word; max-width: 178px; vertical-align: middle; } #mega-menu ul li a { color: #ffffff; line-height: 14px; padding: 0 6px; display: flex; align-items: center; text-align: center; } #mega-menu ul li a:hover { text-decoration: none; background: #ffffff; color: #362354; } #mega-menu ul li div { display: none; width: 100%; position: absolute; left: 0 !important; background: #ffffff; z-index: 9999999999; border: solid 1px #362354; } #mega-menu ul li div div { display: block; position: relative; border: 0; float: left; width: 25%; margin: 0.5em; } #mega-menu ul li ul { float: none; width: auto; height: auto; } #mega-menu ul li ul li { float:none;  } #mega-menu ul li ul li a { color: #362354; font-weight: normal; border: 0; line-height: 1.4em; margin-right: 0; padding: 5px; } #mega-menu ul li ul li a:hover { background: #ffffff; color: #362354; } @media screen and (max-width: 960px) { .main-menu-bar { height: auto; background: none; border: none; box-shadow: none; } .menuHide { display:none; } .menuShow { display:block; } .miniNav { display: block; width:100%; } .miniNav a.menu-toggle { display: block; width:100%; background: url('burger.png') right no-repeat; } .miniNav > div.mainNav, .miniNav > div.productFiltersTitle { font-weight:bold; color: #ffffff; background: #362354; line-height: 41px; font-size: 1.2em; padding: 0 1%; box-sizing: border-box; } .miniNav > div > a { color: #fff; } .miniNav > div > a:hover { text-decoration:none; } #mega-menu ul { display:block; width:100%; height:auto; overflow: hidden; border: 0; } #mega-menu ul li { height: auto !important; border-bottom: solid 1px #fff; float: left; background: #362354; width: 100%; clear: left; max-width: 100%; } #mega-menu ul li:last-child { border-bottom:none; } #mega-menu ul li a { width: 96%; margin: 0; padding: 10px 2%; color: #fff; } #mega-menu ul li div { position:relative; display:none; } #mega-menu ul li div div { width: auto }   #mega-menu ul li ul { width:100%; position:relative; top:0; } #mega-menu ul li ul li, #mega-menu ul li ul li a, div[id^="tc"] { width:100%; border-bottom:none; } #productFiltersLeft { background: #362354; } } /* Formatting for Feefo customer feedback --------------------------------- */  /* My Account pages  --------------------------------------------------------------*/ .myaccount-shadow { display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-image: url('myaccount-popup-bg.png'); background-repeat: repeat; } .myaccount-popup { position: fixed; width: 500px; height: 250px; left: 50%; top: 50%; margin-left: -250px; margin-top: -125px; padding-left: 85px; padding-top: 50px; background-color: #ffffff; } /* start auto suggestion list */ .sf_suggestion { position: absolute; line-height: 15px; z-index: 2147483637; } .sf_suggestion ul { margin: 1px; padding: 0px; background: #ffffff;  border: 1px solid rgb(51, 51, 51); top: 0; left: 0; } .sf_suggestion li{ margin: 0px; padding: 0px; list-style: none; } .sf_suggestion li a { display: block; text-indent: 5px; text-align: left; padding: 5px; text-decoration: none; } .sf_suggestion li.selected a { background: #cccccc; color: #000000; font-weight: normal; } .sf_suggestion li.notselected a{ color: #000000; font-weight: normal; } /* end auto suggestion list */ /* start filter loading dialog */ .loading-block	{ display: table; height: 100%; width: 100%; overflow: hidden; margin-left: 50%; z-index: 2147483638; } .loading-gif { display: table-cell; vertical-align: middle; } .loading-shadow { display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-repeat: repeat; opacity:0.9; } /* start filter loading dialog */ span.line-center u { text-decoration: none; } .text-left-of-image img { max-width: 100%; height: auto; max-height: 367px; width: auto; } .footer-address i { font-size: 60px; margin: 0 2px; } /* Drillpine V3.02 - Magic Zoom Plus Responsive icon positioning with respect to main image */ .mzp-ftab-icons-above 		{float: none !important; text-align:center !important; padding:0px !important;} .mzp-ftab-icons-above br	{clear:both;} .mzp-ftab-icons-above img	{margin:3px !important;} .mzp-ftab-icons-below 		{clear:both !important; float: none !important; text-align:center !important; padding:0px !important;} .mzp-ftab-icons-below br	{clear:both;} .mzp-ftab-icons-below img	{margin:3px !important;} .mzp-ftab-icons-left 		{float:left !important; text-align:center !important; padding:0px !important;} .mzp-ftab-icons-left br		{clear:both;} .mzp-ftab-icons-left img	{margin:3px !important;} .mzp-ftab-icons-right 		{float:right !important; text-align:center !important; padding:0px !important;} .mzp-ftab-icons-right br	{clear:both;} .mzp-ftab-icons-right img	{margin:3px !important;} .mzp-ptab						{} .mzp-ptab-icons-above		{float:none !important; text-align:center !important; padding:0px !important;} .mzp-ptab-icons-above img	{margin-right:2px !important;} .mzp-ptab-icons-below		{float:none !important; text-align:center !important; padding:0px !important;} .mzp-ptab-icons-below br	{clear:both;} .mzp-ptab-icons-below img	{margin-top:2px !important; margin-right:2px !important;} .mzp-ptab-icons-left 		{float:left !important; text-align:center !important; padding:0px !important; padding-right:5px !important;} .mzp-ptab-icons-left img	{margin-right:2px !important;} .mzp-ptab-icons-right 		{float:left !important; margin-left: 5px; text-align:center !important; padding:0px !important;} .mzp-ptab-icons-right img	{margin-right:2px !important;} .mzp-xtab						{padding: 0px;} .mzp-xtab img					{float: none !important; text-align:center !important; margin: 5px !important; padding:0px} .mzp-xtab-icons-above 		{float: none !important; text-align:center !important; padding:0px !important;} .mzp-xtab-icons-below 		{clear:both; float: none !important; text-align:center !important; padding:0px !important;} .mzp-xtab-icons-left 		{float:left !important; margin-left:20px !important; text-align:center !important; padding:0px !important;} .mzp-xtab-icons-right 		{float:right !important; margin-left:20px !important; text-align:center !important; padding:0px !important;} .mz_icon							{padding: 2px !important; border:1px solid silver !important; width:auto !important;} /* MZP V5 tweaks */ .mz-thumb						{background-color:inherit !important;} .mz-thumb img					{box-shadow:none !important;} img.cartthumbnail { max-width: 50px; margin: 0 2px 0 0; float: left; } span.cartText { float: left; margin-top:5px; } span.floatRight { float: right; } .mini-product-summary.home { border: 1px solid #ddd; padding: 8px; } li.grid-item.home { margin-bottom: 5px; } .bx-wrapper .bx-viewport { margin: 21px 5px; border: 0 !important; box-shadow: none !important; } #mega-menu ul li ul li { border-bottom: 1px solid #ddd; max-width: 240px; } .image-right { float:right; margin: 5px 2px 5px 5px; } .home.section-list { float: left; margin-top: 25px; } .bulk-area > h2.stripped { margin-top: 35px; } .list-item:nth-child(2) { flex: 0 0 25%; } .image-left { float:left; margin-right:25px; } .bx-wrapper { margin:0 auto 30px !important; } .section-image-container { display: flex; flex-wrap:wrap; } .section-image img { max-height: 415px; width: auto; border: 1px solid #ccc; margin:0 10px; } .section-image { display: block; margin: 0 auto; }