.mobile-only { display: none !important; } input, select { border: 1px solid #9999cc; margin: 0; padding: 1px; height: 16px; vertical-align: middle; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 12px; } .hasWatermark { font-style: italic; color: #999999; } select { height: 20px; vertical-align: middle; } a, a:visited, a:hover, a:active { color: #004e96; text-decoration: none; } a:hover { text-decoration: underline; } div, form { padding: 0; margin: 0; border: 0; } h1, h2 { font-weight: bold; font-size: 16px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; line-height: 18px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-bottom: 5px; margin-top: 10px; } h3 { font-size: 1.17em; color: #125987; margin: 0.5em 0; } p { margin: 0.5em 0; } img { border: 0; vertical-align: middle; } address { font-style: normal; } table { border-collapse: collapse; } th { background-color: #004e96; color: #ffffff; padding: .3em .3em .4em; white-space: nowrap; } th a, th a:visited, th a:hover, th a:active { color: #ffffff; } td { padding: .2em .3em; } td { border-bottom:1px solid #999999; } #Instructions { width:99%; } body { background: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin: 0px 10px 10px; padding: 0; position: relative; } textarea { font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 12px; } #sheet { margin: 0 auto; margin-top:32px; background: #ffffff; width: 990px; position: relative; border:1px solid #cccccc; } #sheet.showingCookieLaw { margin-top: 85px; } #cookieLaw { position: absolute; top: -86px; border-bottom: 5px solid #004e96; background-color: #f0f0f0; padding: 0 10px; width: 970px; } #cookieLawText { margin-right: 80px; } #cookieLawButton { position: absolute; right: 10px; bottom: 0.5em; } #header { height: 145px; margin-bottom: 28px; position: relative; background-image: url(gfx/header.jpg); } #loginDetails, #basketDetails { position: absolute; top: 0px; left: 0px; color: #444444; width:100%; } #loginDetails .loginRegister { position:absolute; top:149px; color:#fff; font-weight:bold; right:12px; } #loginDetails .loginRegister .plain { color:#fff; font-weight:bold; } #loginDetails .loggedInAs { position: absolute; display: block; width: 100%; box-sizing: border-box; top: -26px; left: 0px; margin: 0; padding: 0; white-space: nowrap; overflow: hidden; } #search { position: absolute; top: 115px; right: 5px; background-color: transparent; } #menubar { position: absolute; left: 0px; top: 145px; height: 26px; background: #004e96; width: 100%; border-top:1px solid #ffffff; border-bottom: 1px solid #ffffff; font-size:11px; } .sidebar { width: 175px; } .sidebarbottom { } .sidebarinner { overflow: hidden; } #contentmain { float: right; width: 990px; position: relative; } #content { width: 990px; padding: 0px; float: left; position: relative; background-color:#ffffff; } #leftnav { float: left; } #news { float: right; } #page.showNavigation #contentmain { width:808px; } #page.showNavigation #content { width:800px; } #page.showNews #content { width:625px; } #footer { clear: both; background: #ffffff; color: black; padding: 4px; margin-top: 20px; border-top:1px solid #ccc; } #footer a { text-decoration:underline; color: darkblue; } #footer a:hover { color: #3399FE; } #footer a:visited { color: purple; } #imageRotatePane1 { width: 580px; height: 193px; } .clear { clear: both; } .floatLeft { float: left; } .floatRight { float: right; } .row { clear: both; } .nowrap { white-space: nowrap; } .grid { margin: 8px -4px; width: calc(100% + 8px); } .grid:after, .grid:before { clear: both; display: block; content: ""; } .grid + * { clear: both; } .grid .box { float: left; margin: 4px; box-sizing: border-box; } .grid .box.border, .grid.boxborder .box { border: 1px solid #999999; } .grid .box.padding, .grid.boxpadding .box { padding: 8px; } .grid .box img.fullwidth { width: 100%; height: auto; } .grid.with5 .box { width: calc(20% - 8px); } .grid.with5 .box:nth-child(5n+1) { clear: both; } .grid.with4 .box { width: calc(25% - 8px); } .grid.with4 .box:nth-child(4n+1) { clear: both; } .grid.with3 .box { width: calc(33.3% - 8px); } .grid.with3 .box:nth-child(3n+1) { clear: both; } .grid.with2 .box { width: calc(50% - 8px); } .grid.with2 .box:nth-child(2n+1) { clear: both; } .grid.with1 .box { width: calc(100% - 8px); } .grid.with1 .box:nth-child(1n+1) { clear: both; } #header #headerbgimg { position: absolute; } #header h1 { display: block; position: absolute; left: 43px; top: 13px; width: 192px; height: 120px; margin: 0; padding: 0; text-indent: -9999px; background: transparent; } #header h1 a { display: block; width: 120px; height: 120px; border-radius: 60px; transform: scale(1.6, 1); transform-origin: left; overflow: hidden; } #search label { color: #004e96; font-weight: bold; vertical-align: middle; } #search select { width: 250px; } #loginDetails { font-size:11px; } #loginDetails a, #basketDetails a { color: #444444; text-decoration: underline; } #basketDetails .headerBasket { position:absolute; font-weight:bold; font-size:13px; right:0px; top:-26px; } #basketDetails .iconBasket { display: none; } .menuLeft { float: left; margin-left: 57px; } .menuRight { float: right; } #menubar ul { margin: 0px 0px 0px; padding: 0px; } #menubar li { float: left; list-style: none; padding: 0; position: relative; white-space: nowrap; } .menuLeft li { margin: 0 0 0 5px; } .menuRight li { margin: 0 5px 0 0; } #menubar li a { display: block; color: #ffffff; font-weight: bold; text-decoration: none; padding: 3px 6px 4px; } #menubar li:hover a { background-color: #4fa7ff; color: #ffffff; } #menubar li a:hover { background-color: #4fa7ff; color: #ffffff; } #menubar li ul li a:hover { color:#000; } #menubar ul ul { position: absolute; top: 100%; background-color: #4fa7ff; margin: 0px; } .menuLeft ul ul { left: 0; } .menuRight ul ul { right: 0; } #menubar ul ul ul { top: 50%; } .menuLeft ul ul ul { left: 50%; } .menuRight ul ul ul { right: 50%; } #menubar li li { float: none; margin: 0; } #menubar li ul { display: none; } #menubar li:hover ul { display: block; } #menubar li:hover li ul { display: none; } #menubar li li:hover ul { display: block; } #menubar li li:hover li ul { display: none; } #menubar li li li:hover ul { display: none; } #tree ul { list-style: none; margin:0px; padding:0px; } #tree { margin:0px; padding:0px; list-style: none; font-size: 11px; border-right:1px solid #cccccc; position:relative; } #tree li { height:1%; } #tree li a { color:#000; display:block; padding:3px; } #tree li a:hover { color:#fff; background-color:#004e96; text-decoration:none; } #tree li li { border-bottom:1px solid #ccc; } #tree li li a{ padding: 3px; } #tree li li.open a { background-color:#004e96; color:#fff; } #tree li span.fore, #tree li span.aft { display: none; } #tree li span.label { color:#000; display:block; padding:3px; border-bottom:1px solid #ccc; background-color:#ccc; } .frame { background-color: #ffffff; position: relative; padding: 32px 10px 10px; margin: 10px 0px; border:1px solid #999999; } .grid .box .frame { margin: 0; } .frame .borders span { position: absolute; } .frame .borders .t { width: 100%; height: 24px; background-color: #004e96; left: 0px; top: 0px; display:block; } .frame .inner input[type="text"] { max-width: calc(100% - 2px); } .product .borders span.t { height: 17px; margin-bottom:0px; line-height:0px; } .frame.product { padding:24px 5px 5px 5px; } .frame h3.title { position: absolute; top: -2px; left: 0; color: #ffffff; font-size:11px; text-align:center; width:100%; padding:0; } .half { width: 395px; } .drill .half { width: 490px; } .half .half { width: 192px; } .columnLeft { margin-right: 5px; } .columnRight { margin-left: 5px; } .half .columnRight { width: 183px; } .column { float: left; position: relative; height: 100%; } .center { margin-left: auto; margin-right: auto; } div.frame div.half { width: 365px; } .frame.closed { padding: 0 10px 0; height: 24px; } .frame.closed .inner { display: none; } #CheckoutWizard2 .frame h3 button { color: white; text-decoration: none; width: 100%; } input.factoryFormButton, a.factoryLinkButton img { border: 0; padding: 0; margin: 0; } input.imageButton, input.button { border: 0; padding: 0; margin: 0; height: inherit; } button.plain { border: 0; padding: 0; background: none; color: #444444; text-decoration: underline; font: inherit; } button.plain:hover { cursor: pointer; } a.plain { color: #444444; text-decoration: underline; } dl.form { position: relative; margin: 0; } dl.form dd { margin: 0 0 .2em 7.7em; } dl.form dt { position: absolute; left: 0; width: 7.5em; padding: 2px 0 0; } #DualCatalogueRequest dd { margin: 0 0 .2em 10em; } #DualCatalogueRequest dt { width: 10em; } #fullLogin dd { margin: 0 0 .2em 8em; } #fullLogin dt { width: 8em; } #ManualAddress dt, .SID_Login_Remind dl.form dt, #CheckoutWizard2 .frame dl.form dt { width: 9em; } #ManualAddress dd, .SID_Login_Remind dl.form dd, #CheckoutWizard2 .frame dl.form dd { margin: 0 0 .2em 9em; } .frame.contact-info h3.title span { font-weight: normal; } td.decimal, th.decimal { text-align: right; } td.block, th.block { text-align: center; } table.basket { margin-bottom: 10px; } table.vertical th { text-align: left; } .dataGridContainer { float: left; } .dataGrid th.sortedDown small, .dataGrid th.sortedUp small { vertical-align: 1px; } .dataGrid tr.footer { background-color: #004e96; } .dataGridContainer .pagerControl { background-color: #C8E3FE; text-align: center; padding: .2em .3em; border-top: 1px solid #999999; border-bottom: 1px solid #999999; } .filterControl { margin-bottom: 5px; } table.basket { width:100%; border-top:1px solid #999999; } table.basket tr { } .product { width: 182px; margin-right: 8px; float: left; } .product h3, .product .productImage, .product .productDetails { text-align: center; margin: 10px 0; } .product h3 { height:58px; margin-top:0px; } .product .productPurchase { font-weight: bold; margin: 10px 0; } .product .productPurchase table th { background: none; padding: 4px 10px 2px 0; border: none; color: black; } .product .productPurchase table td { background: none; padding: 3px 0 2px 0; border: none; } .productImageCard { height:128px; } ul.cardBullets { height: 40px; padding-left: 20px; margin: 1em 0; } .product h3 { margin-top: 0px; } .product .productBrief { margin: 10px 0; } .product .productDetails th, .product .productDetails td { border: 0; background: none; color: #000000; } .products .qtyEntry { text-align:center; } .productDetails ul { margin: 5px 15px 0px 0px; padding: 0px; padding-left: 15px; font-size: 11px; display: inline-block; *display: inline; *zoom: 1; *padding-left: 0px; vertical-align: top; } .productDetails li { margin: 0px; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 16px; } .productDetails .productInformation { } .productDetails .productInformation p { margin: 5px 0 0; font-size: 11px; line-height: 16px; } .borders2 { border-bottom:1px dotted #666666; height:1px; } .productNotepad { padding: 20px 0 0; clear: both; } ul.pdfLinks { list-style-type: none; padding: 0; margin: 10px 0; padding: 0px 0 0 35px; background: url(/dual/style/gfx/pdf_icon.png) no-repeat; min-height: 50px; } ul.pdfLinks1 { padding-top: 15px; } ul.pdfLinks2 { padding-top: 5px; } #productDetails > div { margin-top: 15px; } #productDetails > div > *:first-child { margin-top: 0px; } #productDetails .productImage { float: left; } #productDetails .productDetails { line-height: 18px; float: right; width: calc(100% - 360px); } #productDetails .info { display: table; width: 100%; } #productDetails h4 { margin: 10px 0 0; font-size: 12px; } .productCardM { width: 100%; border-bottom: 1px solid #999; margin-bottom: 10px; display: table; padding-bottom: 10px; } .productCardM .productImage { float: left; } .productCardM .productText { float: left; margin-left: 20px; width: 440px; } .productCardM .productTitle { margin-bottom: 10px; } .productCardM .productDetails { float: left; width: 250px; overflow: hidden; } .productCardM .productPurchase { float: left; font-weight: bold; } #productDetails .productPurchase { float: left; clear: left; display: table; width: 100%; max-width: 340px; margin-top: 10px; font-weight: bold; } .productCardM .productPurchase .prices { display: table; } #productDetails .productPurchase .prices { float: left; margin-right: 20px; } .productCardM .productPurchase .prices .list, #productDetails .productPurchase .prices .list { float: left; margin-right: 20px; } .productCardM .productPurchase .prices .net, #productDetails .productPurchase .prices .net { float: left; } .addQty { position: relative; } .addQty form { display: inline-block; } .productCardM .productPurchase .addQty, #productDetails .productPurchase .addQty { margin-top: 10px; position: relative; } .productCardM .productPurchase .addQty { clear: both; } .favButton { display: inline-block; } .group { margin-top: 20px; } .subGroups .subGroup { list-style-type: none; background: #fff; border: 1px solid #999999; } .subGroups h3 { text-align: center; background: #004e96; margin: 0px; padding: 3px; left: 0px; font-size:13px; clear:both; } .subGroups div.last { margin-right:0px; } .subGroups .blankThumb { width: 190px; height: 190px; border: none; } .groupA .subGroup h3 { height: 38px; } .groupB .subGroup .blankThumb { width: 110px; height: 110px; } .groupB .subGroup img, .groupC .subGroup img { float:left; } .groupB .subGroup ul, .groupC .subGroup ul { margin: 5px 0px 5px 140px; padding:0px; } .groupD .subGroup .blankThumb { width: 392px; height: 122px; } .groupE .subGroup .blankThumb { width: 793px; height: 180px; } .groupB .subGroup h3, .groupD .subGroup h3 { height:18px; } .groupM .products { margin-top: 20px; } .SID_Home div.subGroups li { } .SID_Home div.subGroups h3 { } div.subGroup h3 a, div.subGroup h3 a:visited { color: #ffffff; } #groupImage { float: left; } .productsGroupA { clear: both; margin-right: -10px; } table.variants { border: 1px solid black; } table.variants td { border: 1px solid black; background: #ffffff; } table.variants tr.even td { background: #dddddd; } table.variants th { border: 1px solid black; background: #004e96; color: #000000; } table.variants th.code { background: #dddd00; }  p.small { margin: 0; } .pageLinks { float: right; margin: 0 0 20px 0; font-size: 1.17em; font-weight: bold; } .pageLinks span.disabled { color: grey; } #carouselContainer { width: 560px; height: 270px; padding: 10px; margin: 0 auto 30px; background-color: #d6e6c1; } #carousel { width: 560px; height: 270px; position: relative; } .carouselItem { position: absolute; border: 1px solid #55a528; } .carouselItem h3 { background-color: #55a528; text-align: center; color: #ffffff; margin: 0; height: 3em; padding: 0; overflow: hidden; position: absolute; left: 0px; bottom: 0px; width: 100%; } .carouselItem h3 a { color: #ffffff; } dl.statusCodes { margin-left: 3em; } dl.statusCodes dt { float: left; } dl.statusCodes dd { margin: 0 0 .2em 2em; } .raff-breadcrumbs, .raff-breadcrumbs a { margin-top:10px; font-weight:bold; font-size:9px; color:#888; } .addressItems { margin: 0 -5px; } .addressItem { float: left; width: calc(50% - 10px); margin: 0 5px 10px; border: 1px solid #cccccc; padding: 5px; box-sizing: border-box; } .addressItem button { margin-top: 5px; background: #004e96; color: white; text-decoration: none; font-weight: bold; width: calc(100% + 10px); position: relative; left: -5px; bottom: -5px; height: 24px; border: 0; } ul.messages { margin: 10px 0; border: 0; border-top: 5px solid #3399ff; border-bottom: 5px solid #3399ff; padding: 10px; background: #f0f0f0; } .collatorC .collatorImage { float: left; } .collatorC .bullets { margin-left: 190px; }  body { background-color:#fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; } h1 { font-size: 20px; } h1, h2 { font-weight: bold; font-size: 16px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; line-height: 18px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-bottom: 5px; margin-top: 10px; } h3 { font-size: 1.17em; color: #000; margin: 0.5em 0; } .basketView { clear: both; margin: 20px 0; } .basketView .line { clear: both; border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px; } .basketView .line:last-child { border-bottom: 1px solid #ccc; margin-bottom: 10px; } .basketView .productDetails, .basketView .orderDetails { float: left; margin-bottom: 10px; position: relative; } .basketView .productDetails { width: 60%; } .basketView .orderDetails { width: 40%; } .basketView .productDetails .image { width: 100px; height: 100px; float: left; margin: 0 10px 0 0; } .basketView .productDetails .prodcode { font-weight: bold; } .basketView .productDetails .price { margin-top: 10px; font-weight: bold; } .basketView .orderDetails .quantity, .basketView .orderDetails .discount, .basketView .orderDetails .value, .basketView .orderDetails .update, .basketView .orderDetails .delete { display: inline-block; } .basketView .orderDetails .quantity { font-weight: bold; } .basketView .orderDetails .quantity th { padding: 0 .4em .7em 0; color: inherit; background: none; text-align: right; } .basketView .orderDetails .quantity td { border: none; padding: 0 0 .7em 0; } .basketView .orderDetails .quantity span.inputty { padding: 1px 4px; border: 1px solid #ccc; position: relative; } .basketView .orderDetails .discount { position: absolute; left: 110px; font-weight: bold; } .basketView .orderDetails .value { float: right; font-weight: bold; } .basketView .orderDetails .buttons { display: block; margin-top: 10px; } .basketView div.terms { clear: both; float: left; } .basketView div.totals { float: right; } .basketView div.totals th { background: inherit; color: inherit; padding: .2em .3em; border-bottom: 1px solid transparent; font-weight: normal; } .basketView div.totals td { border-bottom-color: transparent; } @media screen and (max-width: 800px) { .mobile-only { display: initial !important; } div.mobile-only { display: block !important; } .not-mobile { display: none !important; } body { margin: 0px; background-color: #004e96; } #cookieLaw { box-sizing: border-box; width: 100%; } #sheet { box-sizing: border-box; width: 100%; margin: 32px 0 0; border: none; } #header { height: 110px; overflow: hidden; margin-bottom: 0px; background: #e9edf5 url(gfx/mobile/header_2022.png) no-repeat; } #header h1 { left: 6px; top: 6px; width: 91px; height: 57px; } #header h1 a { width: 57px; height: 57px; border-radius: 28.5px; } #search { } #loginDetails .loginRegister { position: absolute; overflow: hidden; display: block; right: 8px; top: 10px; width: 55px; height: 55px; background: transparent url(gfx/mobile/icon_login_2022.png) no-repeat 50% 0; text-indent: 100px; } #loginDetails .loginRegister.loggedIn { background-image: url(gfx/mobile/icon_account_2022.png) } #loginDetails .loginRegister a { display: block; width: 100%; height: 100%; } #loginDetails .loggedInAs { color: white; padding-left: 8px; } #basketDetails .headerBasket { display: none; } #basketDetails .iconBasket { position: absolute; overflow: hidden; display: block; right: 75px; top: 10px; width: 55px; height: 55px; background: transparent url(gfx/mobile/icon_basket_2022.png) no-repeat 50% 0; color: white; } #basketDetails .iconBasket a { display: block; color: #fff; text-decoration: none; font-size: 14px; font-weight: bold; width: 100%; height: 100%; text-align: center; line-height: 47px; } #search { left: 8px; right: 8px; top: 80px; background: white; padding: 2px 5px; border-radius: 8px; white-space: nowrap; } #QuickSearch > label, #QuickSearch #Group { display: none; } input#Search { border: none; width: calc(100% - 22px) !important; } #menubar { height: 0; top: 110px; } #menubar .menuLeft, #menubar .menuRight { display: none; } #menubar ul { display: none; } #menubar .menuRight.toggledOn ul { display: block; z-index: 1000001; } #menu-toggle { position: absolute; right: 140px; top: 10px; width: 55px; height: 55px; background: transparent url(gfx/mobile/icon_menu_2022.png) no-repeat 50% 0; } #menu-toggle a { display: block; width: 100%; height: 100%; } #page { box-sizing: border-box; } #leftnav { display: none; position: absolute; top: 110px; background: white; width: inherit; box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.25); } .toggledOn { display: block !important; z-index: 1000001; } #closeTree { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #004e96; color: white; } #closeTree a { display: block; padding: 5px; color: white; text-decoration: none; text-align: right; } #tree, #closeTree { font-size: 13px; } #tree.showing > li { display: none; } #tree.showing > li.showing { display: block; } #tree > li > ul { display: none; } #tree > li.showing > ul { display: block; } #tree > li > span.label { background-color: white; cursor: pointer; padding: 5px; } #tree > li > span.label:hover { background-color: #004e96; color: white; } #tree > li.showing > span.label { background-color: #ccc; color: black; } #tree > li.showing span.aft { display: inline; } #tree > li span.fore { float: right; padding-left: 5px; } #tree > li span.fore { display: inline; } #tree.showing > li span.fore { display: none; } #tree > li > a { border-bottom: 1px solid #ccc; padding: 5px; } #tree li li a { padding: 5px; } #contentmain { float: none; width: 100% !important; padding: 0 8px; box-sizing: border-box; } #content { width: 100% !important; box-sizing: border-box; } .half { box-sizing: border-box; width: 100%; } .columnLeft, .columnRight { margin: 0; } dl.form dt { position: static; } dl.form dd { margin-left: 0 !important; } #usefulInfo { float: left; box-sizing: border-box; width: 100%; clear: both; border: 1px solid #ccc; margin-top: 20px; } #usefulInfo h3 { padding: 0 8px; } #usefulInfo h3:hover { cursor: pointer; } #usefulInfo h3 span { display: none; float: right; } #usefulInfo h3 span.closed { display: inline-block; } #usefulInfo.open h3 span.open { display: inline-block; } #usefulInfo.open h3 span.closed { display: none; } #usefulInfo > div { display: none; border-top: 1px solid #ccc; } #usefulInfo.open > div { display: block; } #menubar .menuRight > ul > li { margin: 0; } #menubar .menuRight > ul > li > a { display: none; } #menubar .menuRight ul ul { position: absolute; top: -1px; background-color: white; font-size: 13px; box-shadow: -4px 4px 4px 4px rgba(0, 0, 0, 0.25); } #menubar .menuRight li a { color: black; font-weight: normal; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; padding: 5px; background: white; } #menubar .menuRight li a:hover { background: #004e96; color: white; } #menubar .menuRight ul li ul .closeRightMenu a { color: white; background-color: #004e96; text-align: right; } .product:nth-child(4n + 4) { margin-right: 8px; } .groupA .subGroup h3 { font-size: 2.1vw; line-height: 3vw; height: 6.5vw; } .groupD .subGroup img { max-width: 100%; height: auto; } .productCardM .productImage, #productDetails .productImage { float: none; width: 100%; display: table; } .productCardM .productImage img { max-width: 100%; height: auto; display: block; margin: 0 auto; } .productCardM .productText { width: 100%; margin-left: 0; } .productCardM .productTitle { float: none; margin: 10px 0; width: 100%; } .productCardM .productDetails, #productDetails .productDetails { float: none; width: 100%; } #productDetails .productDetails { margin: 10px 0 0; } .productCardM .productPurchase { width: 100%; margin-top: 10px; } .productCardM .productPurchase .prices { float: left; margin-right: 20px; } .productCardM .productPurchase .addQty { clear: none; float: left; margin-top: 5px; } .basketView .productDetails, .basketView .orderDetails { width: 100%; float: none; clear: both; } .basketView .totals { clear: both; } .grid.with5 .box, .grid.with4 .box, .grid.with3 .box, .grid.with2 .box { width: calc(100% - 8px); } .grid.with5 .box:nth-child(5n+1), .grid.with4 .box:nth-child(4n+1), .grid.with3 .box:nth-child(3n+1), .grid.with2 .box:nth-child(2n+1), .grid.with1 .box:nth-child(1n+1) { clear: none; } .grid.mobile5 .box { width: calc(20% - 8px); } .grid.mobile5 .box:nth-child(5n+1) { clear: both; } .grid.mobile4 .box { width: calc(25% - 8px); } .grid.mobile4 .box:nth-child(4n+1) { clear: both; } .grid.mobile3 .box { width: calc(33.3% - 8px); } .grid.mobile3 .box:nth-child(3n+1) { clear: both; } .grid.mobile2 .box { width: calc(50% - 8px); } .grid.mobile2 .box:nth-child(2n+1) { clear: both; } .grid.mobile1 .box { width: calc(100% - 8px); clear: both; } }