.rating-stars__rated--1:after { width: 20%;
}
.rating-stars__rated--0-9:after { width: 18%;
}
.rating-stars__rated--0-8:after { width: 16%;
}
.rating-stars__rated--0-7:after { width: 14%;
}
.rating-stars__rated--0-6:after { width: 12%;
}
.rating-stars__rated--0-5:after { width: 10%;
}
.rating-stars__rated--0-4:after { width: 8%;
}
.rating-stars__rated--0-3:after { width: 6%;
}
.rating-stars__rated--0-2:after { width: 4%;
}
.rating-stars__rated--0-1:after { width: 2%;
}
.rating-stars__rated--0:after { width: 0%;
}
.sf__rating-stars--lg .rating-stars__rated.rating-stars__rated--0 { background-position: 0 -36px;
}
.sf__rating-stars--sm .rating-stars__rated.rating-stars__rated--0 { background-position: 0 -78px;
}
.share-container { position: absolute; right: 0; top: -10px; z-index: 10;
}
.no-js .share-container { display: none;
}
.share-container .share__toggle { width: 118px;
}
.share-container .share__toggle li { background-color: #003d76; border-bottom: 1px solid #001b64; font-size: 13px; line-height: 1.5; display: block; height: 51px;
}
.share-container .share__toggle li.is-closed { background-color: transparent; border-bottom: 1px solid transparent;
}
.share-container .share__toggle li.is-closed a { color: #636363; text-decoration: underline;
}
.share-container .share__toggle a { color: #fff; padding: 17px 0 14px 15px; display: block; text-decoration: none; position: relative;
}
.share-container .share__toggle a .icon-share { font-size: 175%; position: absolute; top: 10px; right: 4px;
}
@media only screen and (max-width:40em) { .share-container .share__toggle { width: 50px; } .share-container .share__toggle a .icon-share { top: 8px; left: 9px; } .share-container .share__toggle a span { display: none; }
}
.share-container .addthis_toolbox { width: 118px;
}
.share-container .addthis_toolbox li { background-color: #0053a0; border-bottom: 1px solid #001b64; border-top: 1px solid #0091ca; font-size: 13px; line-height: 1.5; display: block; height: 52px; position: relative;
}
.share-container .addthis_toolbox li:last-child { border-bottom: 0; height: 51px;
}
.share-container .addthis_toolbox li:hover { background: #003d76;
}
.share-container .addthis_toolbox a { color: #fff; padding: 17px 0 14px 49px; display: block;
}
.share-container .addthis_toolbox a .icon { position: absolute; font-size: 160%;
}
.share-container .addthis_toolbox a.addthis_button_facebook .icon { top: 12px; left: 11px;
}
.share-container .addthis_toolbox a.addthis_button_twitter .icon { top: 10px; left: 10px;
}
.share-container .addthis_toolbox a.addthis_button_googleplus .icon { top: 13px; left: 11px;
}
.share-container .addthis_toolbox a.addthis_button_pinterest .icon { top: 12px; left: 10px;
}
.share-container .addthis_toolbox a.addthis_button_email .icon { top: 10px; left: 10px;
}
.share-container .addthis_toolbox span { display: inline-block;
}
@media only screen and (max-width:40em) { .share-container .addthis_toolbox { width: 50px; } .share-container .addthis_toolbox span { display: none; }
}
.help-zone { position: relative; margin: 0 -.6em 0 0; width: auto; max-width: none;
}
@media only screen and (max-width:40em) { .help-zone { margin: 0 -.6em; }
}
.help-zone img.press-welcome { max-width: 171px;
}
.help-zone img.bin { padding-bottom: 15px; border: 0;
}
.help-zone h2 { color: #0053a0; font-size: 22px; line-height: 24px; margin-top: 0;
}
@media only screen and (max-width:40em) { .help-zone h2 { font-size: 20px; line-height: 22px; margin-bottom: 16px; }
}
.help-zone .h2__separator { border-bottom: 2px solid #d1d1d1; padding: 0 0 16px; margin: 27px 0 22px;
}
.help-zone h3 { font-size: 16px; line-height: 18px; color: #0053a0;
}
.help-zone .break { display: block;
}
.help-zone .hlp-ul { font-size: 13px; line-height: 18px;
}
.help-zone .hlp-ul.no-indent { padding-left: 18px;
}
.help-zone hr { margin: 15px 0; border: 0; border-bottom: 1px #d1d1d1 solid;
}
.help-zone hr.fm-hr--dashed { border-style: dashed;
}
@media only screen and (max-width:40em) { .help-zone hr.fm-hr--dashed { margin-bottom: 20px; }
}
.help-zone hr.fm-hr--dashed.pad-lg { margin: 40px 0;
}
@media only screen and (max-width:40em) { .help-zone hr.fm-hr--dashed.pad-lg { margin: 20px 0; }
}
.help-zone .ac__body li { margin-bottom: 10px;
}
.help-zone h4 { color: #0053a0; font-size: 22px; line-height: 21px;
}
.help-zone h4.pad20 { margin: 0 0 20px;
}
@media only screen and (max-width:40em) { .help-zone h4 { font-size: 20px; line-height: 19px; } .help-zone h4.pad20 { margin: 0 0 10px; }
}
.help-zone h4.pad45 { margin: 0 0 45px;
}
@media only screen and (max-width:40em) { .help-zone h4.pad45 { margin: 0 0 20px; }
}
.help-zone h4.no-top-margin { margin-top: 0;
}
.help-zone h4.no-margin { margin: 0;
}
.help-zone h5 { font-size: 18px; line-height: 20px; color: #0053a0; margin: 0 0 15px;
}
.help-zone .red-label,
.help-zone .warning-message { color: #ed1c24;
}
@media only screen and (max-width:40em) { .help-zone h5 { margin: 0 0 10px; }
}
.help-zone .underline { margin: 0 0 9px; border-bottom: 2px #d1d1d1 solid;
}
@media only screen and (min-width:40.063em) { .help-zone .underline { margin-top: 0; padding: 0 12px 14px 0; }
}
@media only screen and (max-width:40em) { .help-zone .underline { margin-top: 9px; padding: 0 10px 14px 0; }
}
.help-zone .no-margin-top { margin-top: 0;
}
@media only screen and (min-width:40.063em) { .help-zone .add-top-margin { margin-top: 20px; }
}
@media only screen and (max-width:40em) { .help-zone .add-top-margin { margin-top: 10px; }
}
.help-zone .add-bottom-margin { margin-bottom: 20px;
}
.help-zone .footnote { font-size: 10px; line-height: 17px;
}
@media only screen and (min-width:64.063em) { .help-zone .sf__bz--wrp.row { padding-left: 12px; padding-right: 12px; }
}
@media only screen and (max-width:64em) { .help-zone .add-bottom-margin { margin-bottom: 10px; } .help-zone .sf__bz--wrp.row { padding-left: 8px; padding-right: 8px; }
}
.help-zone .row--padbottom20.row { padding-bottom: 20px;
}
@media only screen and (min-width:40.063em) { .help-zone .add-top-margin-heavy { margin-top: 40px; } .help-zone .add-top-margin-inner { margin-top: 20px; } .help-zone .row--extra-margin-bottom.row { margin-bottom: 20px; }
}
@media only screen and (min-width:64.063em) { .help-zone .hlp-content-pad.row { padding-left: 38px; padding-right: 38px; } .help-zone .hlp-content-pad.add-top-pad.row { padding-top: 38px; }
}
@media only screen and (min-width:64.063em) { .help-zone .hlp-content-pad.add-btm-pad.row { padding-bottom: 25px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .help-zone .hlp-content-pad.row { padding-left: 21px; padding-right: 21px; } .help-zone .hlp-content-pad.add-top-pad.row { padding-top: 22px; } .help-zone .hlp-content-pad.add-btm-pad.row { padding-bottom: 15px; }
}
@media only screen and (max-width:40em) { .help-zone .add-top-margin-heavy { margin-top: 20px; } .help-zone .add-top-margin-inner { margin-top: 12px; } .help-zone .hlp-content-pad.row { padding-left: 9px; padding-right: 9px; } .help-zone .hlp-content-pad.add-top-pad.row { padding-top: 18px; } .help-zone .hlp-content-pad.add-btm-pad.row { padding-bottom: 20px; } .help-zone .cols--extra-padding-mobile { margin-bottom: 15px; }
}
.help-zone .bg-phone { font-size: 13px; font-weight: 700; font-family: 'Arial Black';
}
.help-zone .remove-left-pad { padding-left: 0;
}
.help-zone .ac__body { border-top: dashed 1px #d1d1d1;
}
.help-zone .ac__title.no-top-border { border: 0;
}
.help-zone .scr-logo-marg { margin-bottom: 20px;
}
@media only screen and (min-width:40.063em) { .help-zone .scr-logo-marg { margin-top: 30px; }
}
@media only screen and (max-width:40em) { .help-zone .scr-logo-marg { margin-top: 20px; }
}
@media only screen and (min-width:40.063em) { .help-zone .scr-card-marg { margin-top: 30px; text-align: left; } .help-zone .screw-h-fix { height: 25px; }
}
.help-zone .required-notice { top: 10px; right: 0;
}
@media only screen and (max-width:40em) { .help-zone .scr-card-marg { margin-top: 20px; text-align: center; } .help-zone .required-notice { top: 24px; font-size: 10px; }
}
.help-zone .delivery-item { width: 100%;
}
.help-zone .delivery-item-holder { margin: 50px 150px 0 90px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .help-zone .delivery-item-holder { margin: 20px 50px 0 21px; }
}
.help-zone .clps-time { text-transform: uppercase; display: block;
}
.help-zone .clps-delvr { font-size: 14px; line-height: 14px;
}
@media only screen and (max-width:64em) { .help-zone .clps-delvr { font-size: 13px; line-height: 13px; }
}
.help-zone .li-h { line-height: 20px;
}
.help-zone .hld-logo { display: inline-block; vertical-align: top;
}
@media only screen and (min-width:64.063em) { .help-zone .hld-logo>img { margin: 20px 20px 35px 0; } .help-zone .vAlign { display: flex; align-items: center; justify-content: center; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .help-zone .hld-logo>img { margin: 20px 10px 35px 0; }
}
@media only screen and (max-width:40em) { .help-zone .hld-logo>img { margin: 18px 0 25px; } .help-zone .screw-h-fix { height: 15px; }
}
@media only screen and (min-width:40.063em) { .help-zone .plumb-h-fix { height: 21px; }
}
@media only screen and (max-width:40em) { .help-zone .plumb-h-fix { height: 12px; }
}
@media only screen and (min-width:40.063em) { .help-zone .elect-h-fix { height: 21px; }
}
.help-zone .hld-bttn { margin: 38px 0 30px;
}
.help-zone .lig-label { color: #ccc;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .help-zone .hld-bttn { margin: 28px 0 30px; } .help-zone .cstm-say-lg { width: 30%; padding-top: 25px; padding-left: 10px; }
}
@media only screen and (max-width:40em) { .help-zone .elect-h-fix { height: 12px; } .help-zone .hld-bttn { margin: 28px 0 21px; } .help-zone .cstm-say-lg { width: 50%; padding-top: 25px; padding-left: 10px; }
}
.help-zone .cstm-say { font-size: 15px; line-height: 19px; margin: 20px 30px 20px 10px; font-family: screwfix_betaregular; font-style: italic; font-weight: 600;
}
@media only screen and (max-width:40em) { .help-zone .cstm-say { margin: 10px 0; font-size: 13px; }
}
.help-zone .cstm-say.blue { color: #3e74a6;
}
.help-zone .cstm-say.red { color: #ed1c24; font-size: 13px;
}
.help-zone .wiw-ico { width: 53px; height: 53px; float: left; margin: 15px 10px 30px 15px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .help-zone .wiw-ico { margin: 24px 18px 5px 0; }
}
.help-zone .wiw-head { font-size: 18px; line-height: 20px; margin: 25px 10px 0 15px;
}
@media only screen and (max-width:64em) { .help-zone .wiw-head { font-size: 16px; line-height: 17px; margin: 25px 0 0 15px; }
}
.help-zone .wiw-head span { font: 400 12px/18px Arial,Helvetica,sans-serif; color: #636363; display: block;
}
.r-r-numbering .circle,
.r-r-numbering p { font-family: archivo_narrowbold,sans-serif; font-weight: 700;
}
.help-zone .wiw-bimg { padding: 0 8px; max-width: 100%;
}
.help-zone .wiw-p { margin: 25px 10px 0 15px;
}
@media only screen and (max-width:64em) { .help-zone .wiw-p { font-size: 12px; line-height: 18px; margin: 0; } .hlp-cont-col.hlp-bdr-sep { border-bottom: 1px solid #d1d1d1; }
}
@media only screen and (max-width:40em) { .help-zone .wiw-p { margin: 0 0 0 15px; }
}
.help-zone .black { color: #222;
}
.help-zone .add-top-margin { margin-top: 25px;
}
@media only screen and (min-width:64.063em) { .hlp-bdr-sep { border-right: 1px solid #d1d1d1; } .hlp-cont-col { min-height: 250px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .hlp-cont-col { padding: 30px 0; }
}
@media only screen and (max-width:40em) { .hlp-cont-col { padding: 20px 10px 10px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .hlp-cont-col:first-child { padding-top: 5px; }
}
@media only screen and (max-width:64em) { .hlp-cont-col h4 { margin: 0; }
}
@media only screen and (max-width:40em) { .hlp-cont-col:first-child { padding-top: 0; } .hlp-cont-hdr { margin-bottom: 20px; }
}
.hlp-cont-hdr h4,
.hlp-cont-hdr img { display: inline-block; vertical-align: middle;
}
.hlp-cont-hdr img { margin-right: 4px;
}
.rr-banner { margin-bottom: 10px;
}
.rr-banner img { width: 100%;
}
.r-r-numbering { position: relative; height: 75px; padding: 0 0 0 72px; display: table;
}
.r-r-numbering:first-of-type { margin-top: 7px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .r-r-numbering:first-of-type { margin-top: 0; }
}
.r-r-numbering:last-of-type { margin-bottom: 20px;
}
.r-r-numbering p { font-size: 17px; line-height: 20px; display: table-cell; vertical-align: middle;
}
@media only screen and (max-width:40em) { .r-r-numbering { height: 66px; padding: 0 0 0 75px; } .r-r-numbering:first-of-type { margin-top: 9px; } .r-r-numbering:last-of-type { margin-bottom: 15px; } .r-r-numbering p { font-size: 15px; line-height: 17px; }
}
.r-r-numbering .circle { position: absolute; top: 15px; left: 0; border-radius: 50%; width: 47px; height: 47px; padding: 2px; background: #fbfbfb; border: 1px solid #ccc; color: #0053a0; font-size: 32px; text-align: center;
}
.btn--cat span,
.hp__haz-item,
.pagi,
.pagination,
.quickshop__enter,
.quickshop__enter form,
.r-and-r-image,
.r-r-bazzarvoice { position: relative;
}
@media only screen and (max-width:40em) { .r-r-numbering .circle { top: 10px; }
}
.r-and-r-image { top: 5px; right: 43px;
}
.r-r-howto { float: left; margin: 0; padding-left: 20px; font-size: 13px; padding-top: 20px; line-height: 17px; list-style-image: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/img/help/rate-review-tick.png?yocs=n_s_);
}
@media only screen and (min-width:64.063em) { .r-r-howto { width: 65%; }
}
.r-r-howto>li { padding-left: 20px; margin-bottom: 10px;
}
.r-r-bazzarvoice { float: right; top: 32px; right: -10px;
}
.hlp-dlv--table.tc-nd--table { margin-bottom: 12px; border: 0;
}
.hlp-dlv--table.tc-nd--table thead { border: 2px solid #0053a0;
}
.hlp-dlv--table.tc-nd--table thead tr { border: 10px solid #0053a0; border-width: 0 10px;
}
.hlp-dlv--table.tc-nd--table thead th { font-size: 18px; line-height: 18px; color: #fff; padding: 12px 6px; border: 0; background-color: #0053a0; text-align: center;
}
@media only screen and (max-width:64em) { .hlp-dlv--table.tc-nd--table thead th { font-size: 14px; line-height: 15px; }
}
.hlp-dlv--table.tc-nd--table thead th.no-border { background: #0053a0;
}
.hlp-dlv--table.tc-nd--table tbody { border: 0; background-color: #f6f6f6;
}
.hlp-dlv--table.tc-nd--table tbody tr th[scope=row] { font-family: Arial,Helvetica,sans-serif; font-size: 14px; line-height: 1.2; text-align: left; text-transform: none; color: #ed1c24; border-bottom: 1px dashed #d1d1d1; padding: 12px; vertical-align: top;
}
@media only screen and (max-width:64em) { .hlp-dlv--table.tc-nd--table tbody tr th[scope=row] { font-size: 13px; }
}
@media only screen and (max-width:40em) { .hlp-dlv--table.tc-nd--table tbody tr th[scope=row] { padding: 6px; }
}
.hlp-dlv--table.tc-nd--table tbody tr th[scope=rowgroup] { font-family: archivo_narrowbold,sans-serif; font-size: 17px; font-weight: 400; line-height: .9; color: #0053a0; background-color: #f6f6f6; border: 1px solid #ccc; border-width: 0 0 1px;
}
@media only screen and (max-width:64em) { .hlp-dlv--table.tc-nd--table tbody tr th[scope=rowgroup] { font-size: 14px; }
}
.hlp-dlv--table.tc-nd--table tbody tr.spacer-row td { background-color: #fff; padding: 7px; border: 0;
}
.hlp-dlv--table.tc-nd--table tbody tr.spacer-row.spacer-row--lg td { padding: 14px;
}
.hlp-dlv--table.tc-nd--table tbody tr:not(.spacer-row) { border: 10px solid #f6f6f6; border-width: 0 10px;
}
.hlp-dlv--table.tc-nd--table tbody tr:last-child td,
.hlp-dlv--table.tc-nd--table tbody tr:last-child th { border-bottom: 0;
}
.hlp-dlv--table.tc-nd--table td { color: #0053a0; font-size: 14px; line-height: 16px; padding: 12px; text-indent: 0; border-bottom: 1px dashed #d1d1d1; vertical-align: top;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .hlp-dlv--table.tc-nd--table td { font-size: 13px; line-height: 15px; }
}
@media only screen and (max-width:40em) { .hlp-dlv--table.tc-nd--table td { font-size: 11px; line-height: 13px; padding: 6px; }
}
.hlp-dlv--table.tc-nd--table.hlp-dlv--table-condensed th { font-family: Arial,Helvetica,sans-serif; font-size: 11px; line-height: 14px; padding: 12px 2px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .hlp-dlv--table.tc-nd--table.hlp-dlv--table-condensed th { font-size: 10px; line-height: 13px; }
}
@media only screen and (max-width:40em) { .hlp-dlv--table.tc-nd--table.hlp-dlv--table-condensed th { font-size: 9px; line-height: 12px; }
}
.hlp-dlv--table.tc-nd--table.hlp-dlv--table-condensed th:first-child { width: inherit;
}
.hlp-dlv--table.tc-nd--table.hlp-dlv--table-condensed th span { font-weight: 400;
}
@media only screen and (max-width:64em) { .hlp-dlv--table.tc-nd--table.hlp-dlv--table-condensed td { font-size: 10px; line-height: 13px; }
}
.hlp-dlv--table.first-column--50p tbody th:first-child,
.hlp-dlv--table.first-column--50p thead th:first-child { width: 50%;
}
.hlp-dlv--table.hlp-dlv--table-alt td { text-align: left;
}
.hlp-dlv--table .toggler { font-size: 13px; line-height: 17px; color: #636363;
}
.hlp-img-float { float: left; display: block; margin: 0 25px 15px 0;
}
.hp__haz-item { display: block; margin-bottom: 10px; background-color: #F7F7F7; min-height: 345px;
}
.hp__haz-item .cat-link { position: relative; display: block; height: 100%; padding: 9px 9px 0; color: #0053a0;
}
.hp__haz-item .cat-link img { width: 100%;
}
@media only screen and (max-width:40em) { .hp__haz-item { min-height: 285px; } .hp__haz-item .cat-link { padding: 6px 6px 0; }
}
.hp__haz-item .hp__haz-item-img { display: table-cell; vertical-align: middle; width: 1%;
}
.hp__haz-item .hp__haz-item-title { display: table; margin-top: 10px; text-align: center; width: 100%; height: 29px;
}
.hp__haz-item .hp__haz-item-description { color: #616161; width: 73%; text-align: center; margin: 0 auto; min-height: 90px;
}
@media only screen and (max-width:40em) { .hp__haz-item .hp__haz-item-description { width: 95%; display: block; }
}
.btn--cat { text-align: left; height: 164px;
}
.btn--cat .btn--cat1 { width: 97px; height: 138px; float: left; margin-right: 10px;
}
.btn--cat span { font-size: 13px; display: block; top: 50%; transform: translateY(-50%); word-break: break-all;
}
.wufoo__wrapper { display: none;
}
.pagination { margin-bottom: 16px;
}
@media only screen and (max-width:64em) { .pagination--bottom .pagination { text-align: center; } .pagi { float: right; display: inline-block; }
}
.pagi { float: right; clear: both; text-align: right; min-height: 24px;
}
.pagination--bottom .pagi { float: none;
}
.pagi__link { font-size: 18px; padding-left: 4px; padding-right: 4px;
}
.pagi__link:first-of-type { margin-left: 20px;
}
@media only screen and (max-width:64em) { .pag__pp-wrap .pagi { max-width: 205px; } .pagi__link:first-of-type { margin-left: 0; }
}
.pagi__link.btn--disabled { padding-right: 4px!important;
}
.pagi__text { display: inline-block; height: 36px; line-height: 1; padding: 10px 2px 8px; font-size: 16px; text-decoration: none; vertical-align: text-bottom; text-transform: none; margin-bottom: 0;
}
.pagi__show,
a.pagi__text:focus,
a.pagi__text:hover { color: #636363; text-decoration: underline;
}
.cookie-modal__header h2,
.hp__banner a h2 { text-transform: uppercase;
}
.pagi__text.pagi__page--total { margin: 0 6px;
}
@media only screen and (max-width:40em) { label.pagi__text { float: none; margin: 0; } .pagination--top label.pagi__text { display: block; font-size: 14px; }
}
.pagi__show-container,
.sort-order label { display: inline-block;
}
a.pagi__text { font-weight: 700;
}
.pagi__show { padding: 7px 4px; margin-bottom: 3px; height: auto;
}
.pagi__show.pagi__show--slctd,
.pagi__show.pagi__show--slctd:focus,
.pagi__show.pagi__show--slctd:hover { text-decoration: none; color: #fff;
}
.pagi__show.pagi__show--slctd { padding: 7px 10px; border-radius: 5px; background-color: #0053a0;
}
.sort-order label { float: left; margin: 0 14px 0 0; line-height: 36px;
}
@media only screen and (max-width:64em) { .sort-order label { font-size: 16px; }
}
@media only screen and (max-width:40em) { .sort-order label { float: none; display: block; } .sort-order select { font-size: 12px; }
}
.sort-order select { display: inline-block; float: left; max-width: 190px; margin-bottom: 17px;
}
.sort-order.sort-order--previous select { max-width: 200px; font-size: 13px;
}
@media only screen and (max-width:64em) { .sort__pp-wrap .sort-order { max-width: 275px; } .pagination--bottom .pagi__page-total, .pagination--top .pagi__page-results, .sort-order--top .sort-order { display: block; } .pagination--bottom .pagi__page-results, .pagination--top .pagi__page-total, .sort-order--bottom .sort-order { display: none; }
}
.pagination__border { margin-bottom: 16px; margin-top: 0; background-color: #d1d1d1; color: #d1d1d1; height: 1px; border: 0; clear: both;
}
@media only screen and (max-width:40em) { .pagination__border { margin-bottom: 12px; } .pagination__border.pb__top { display: none; }
}
.quickshop__enter .grand-title { margin: 7px 0 22px;
}
@media only screen and (max-width:40em) { .quickshop__enter .grand-title { margin-bottom: 8px; }
}
.quickshop__enter .infobox { margin-bottom: 30px;
}
.quickshop__enter .infobox.infobox--last { margin-top: 0;
}
.quickshop__enter form { display: block; overflow: hidden; padding: 20px 0 0; margin: 0;
}
@media only screen and (min-width:40.063em) { .quickshop__enter form { margin: 0 0 50px; }
}
.wrp .inner.confirm--mod { padding-bottom: 50px;
}
@media only screen and (max-width:40em) { .quickshop__enter form { margin: 0 0 25px; padding-top: 10px; } .confirm__content { text-align: center; } .confirm__content .bullets { display: inline-block; text-align: left; }
}
.confirm__content h1 { margin-bottom: 5px;
}
.confirm__content ul { padding-left: 16px; margin: 36px 0 0;
}
.confirm__content ul li { font-size: 13px; font-weight: 700; line-height: 15px; margin-bottom: 10px;
}
.confirm__content ul li:last-child { margin-bottom: 0;
}
.confirm__content .btn { margin-top: 25px;
}
.wrp__modal,
.wrp__modal--error { background: #fff; padding-bottom: 20px;
}
.wrp__modal .item-added ul,
.wrp__modal--error .item-added ul { margin-bottom: 30px;
}
.wrp__modal--error { padding-bottom: 50px;
}
@media only screen and (max-width:40em) { .wrp__modal .infobox, .wrp__modal--error .infobox { margin-right: 6px; margin-left: 6px; } .wrp__modal--error { padding-bottom: 20px; }
}
.wrp__modal--error.modal__qty { padding-bottom: 30px;
}
.wrp__modal--error.modal__qty .infobox--error .infobox__block { padding-top: 0;
}
.wrp__modal--error .infobox--error { margin-top: 50px; margin-bottom: 20px; padding-top: 10px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .wrp__modal--error.modal__qty { padding-bottom: 0; } .wrp__modal--error .infobox--error { margin-top: 30px; margin-bottom: 30px; }
}
@media only screen and (max-width:40em) { .wrp__modal--error.modal__qty { padding-right: 9px; padding-bottom: 0; padding-left: 9px; } .wrp__modal--error .infobox--error { margin: 10px 0; }
}
.wrp__modal--error .infobox--error .infobox__block { text-align: left; margin-left: 10px; padding-top: 15px;
}
.wrp__modal--error .infobox--error .infobox__icon { top: -3px;
}
.spinner__overlay,
.spinner__wrapper { position: fixed; top: 0; width: 100%; left: 0;
}
.spinner__overlay { height: 100%; background-color: rgba(255,255,255,.8); z-index: 100;
}
.lister__items .spinner__overlay,
.ls__banner .spinner__overlay { background-color: rgba(251,251,251,.8);
}
.spinner__wrapper { margin: auto; right: 0; bottom: 0; height: 140px; text-align: center; z-index: 101; overflow: show;
}
.bulk-saving-popup,
.bulk-saving-popup .missed-offer__item { overflow: hidden;
}
.pr__media--spinview .spinner__wrapper { bottom: auto; top: 260px;
}
.pr__media--spinview .spinner__wrapper h2 { color: #fff;
}
.spinner__overlay--modal { margin: 0 auto; background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/gfx/spinner.png?yocs=n_s_) no-repeat; width: 113px; height: 111px; -webkit-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear; -ms-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; animation: spin 2s infinite linear; z-index: 101;
}
.pr__media--spinview .spinner__overlay--modal { background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/gfx/spinner-white.png?yocs=n_s_) no-repeat;
}
@media only screen and (max-width:40em) { .wrp__modal--error .infobox--error .infobox__block { padding: 0 0 2px 18px; } .pr__media--spinview .spinner__overlay--modal, .spinner__overlay--modal { width: 61px; height: 60px; background-size: 60px 60px; }
}
.spinner__overlay--message { position: absolute; top: 110px; left: 0; width: 100%; text-align: center; z-index: 101;
}
@media only screen and (max-width:40em) { .spinner__overlay--message { top: 70px; font-size: 18px; }
}
@-webkit-keyframes rotation { from { -webkit-transform: rotate(0); } to { -webkit-transform: rotate(359deg); }
}
.item-added { display: block; padding: 40px 0;
}
.item-added h2 { font-size: 22px; width: 85%;
}
.item-added h2:nth-of-type(2) { margin-top: -10px;
}
.item-added h2 .h2 { font-size: inherit;
}
@media only screen and (max-width:40em) { .item-added h2 { margin-top: 20px; font-size: 18px; width: 100%; } .item-added h2:nth-of-type(2) { margin-top: -5px; }
}
.item-added ul { margin: 0 0 20px; padding-left: 16px; width: 80%;
}
.item-added li { font-size: 13px; line-height: 17px; margin-bottom: 6px;
}
@media only screen and (max-width:40em) { .item-added { padding: 0; } .item-added ul { margin-left: 12px; width: 100%; } .item-added ul li { width: 92%; } .item-added p { font-size: 11px; line-height: 13px; width: 100%; }
}
.bulk-saving-popup_pad { padding-left: 36px; padding-right: 36px;
}
@media only screen and (max-width:40em) { .bulk-saving-popup_pad { padding-left: 0; padding-right: 0; }
}
.bulk-saving-popup .bulk-savings.first-child { margin-top: 30px;
}
.bulk-saving-popup .row-add-more { overflow: hidden; padding: 0 0 20px; border-bottom: 1px solid #d1d1d1;
}
.bulk-saving-popup .row-add-more .h2 { font-size: 26px;
}
.bulk-saving-popup .row-add-more .fm-input--items { vertical-align: middle; margin: 0 10px; font-family: sans-serif,Arial,Helvetica;
}
.bulk-saving-popup .missed-offer-checkbox label,
.bulk-saving-popup .missed-offer-price,
.cookie-modal-setup strong,
.cookie-modal__show-details { font-family: archivo_narrowbold,sans-serif;
}
.bulk-saving-popup .row-add-more_btn h2 { line-height: 46px; margin: 0; float: left; width: 41.66667%;
}
.bulk-saving-popup .row-add-more_no-btn { margin-bottom: 25px;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .row-add-more .h2 { font-size: 22px; } .bulk-saving-popup .row-add-more_btn h2 { float: none; width: 100%; line-height: 42px; } .bulk-saving-popup .row-add-more_btn .cols { margin-top: 20px; } .bulk-saving-popup .row-add-more_no-btn { margin-bottom: 15px; padding-bottom: 10px; }
}
.bulk-saving-popup .row-cta { margin: 30px 0 15px; font-size: 26px;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .row-cta { padding-bottom: 10px; margin-top: 25px; border-bottom: 1px solid #d1d1d1; font-size: 22px; }
}
.bulk-saving-popup .row-cta_border { margin: -10px 0 23px; font-size: 26px; padding-bottom: 10px; border-bottom: 1px solid #d1d1d1;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .row-cta_border { font-size: 22px; padding-bottom: 5px; margin-bottom: 15px; } .bulk-saving-popup { padding-bottom: 16px; } .bulk-saving-popup .cols+.cols { margin-top: 10px; }
}
.bulk-saving-popup .missed-offer-image { padding: 5px 5px 5px 20px; max-width: 125px; float: left;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .missed-offer-image { padding: 10px; max-width: 100px; }
}
.bulk-saving-popup .missed-offer-description { padding: 0 10px 30px 40px; margin-left: 125px;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .missed-offer-description { padding: 0 10px 20px 0; margin-left: 100px; }
}
.bulk-saving-popup .missed-offer-description_btn { padding-top: 40px; padding-bottom: 45px;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .missed-offer-description_btn { position: absolute; bottom: -60px; left: 0; margin: 0; padding: 0; width: 100%; } .bulk-saving-popup .missed-offer-description_btn .btn { width: 100%; }
}
.bulk-saving-popup .missed-offer-checkbox { padding: 0; margin: 30px 0 5px;
}
.bulk-saving-popup .missed-offer-checkbox label { font-size: 22px; color: #0053a0; line-height: 24px; min-height: 21px;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .missed-offer-checkbox { margin: 20px 0 5px; } .bulk-saving-popup .missed-offer-checkbox label { font-size: 16px; line-height: 18px; margin: 0; }
}
.bulk-saving-popup .missed-offer-price { margin-left: 30px; color: #ed1c24; font-size: 18px; line-height: 20px; display: block;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .missed-offer-price { font-size: 14px; line-height: 16px; } .bulk-saving-popup .bulk-savings_mixed-product .missed-offer-item { overflow: visible; } .bulk-saving-popup .bulk-savings_mixed-product .missed-offer-image { float: none; margin: 0 auto; max-width: 135px; }
}
@media only screen and (min-width:40.063em) { .bulk-saving-popup .bulk-savings_mixed-product .missed-offer-image { line-height: 131px; }
}
.bulk-saving-popup .bulk-savings_mixed-product+.row-cta_border { width: 100%;
}
.atb__top .infobox .infobox__icon { top: -3px;
}
.atb__top .infobox .infobox__block { width: 95%;
}
.atb__btm { border-top: 2px solid #d1d1d1; padding: 15px; background-color: #f6f6f6;
}
@media only screen and (max-width:40em) { .atb__btm { padding: 15px 0 0; } .modal__btn .btn { width: 100%; }
}
.atb__btm h2.underline { margin-top: 6px; margin-bottom: 15px;
}
.sl__modal { margin: 0 -.3em 20px;
}
.modal__btn { text-align: center; padding-bottom: 20px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .modal__btn { margin-top: -15px; padding-bottom: 30px; }
}
.cookie-modal { display: none; z-index: 101; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #d1d1d1; box-shadow: 0 4px 6px 4px rgba(0,0,0,.2);
}
.cookie-modal__container { max-width: 1148px; margin: 0 auto;
}
.cookie-modal__container h2,
.cookie-modal__container h3 { color: #0053a0;
}
.cookie-modal__header { position: relative; padding: 10px; border-bottom: 1px solid #d1d1d1;
}
.cookie-modal__header p { font-size: 16px; line-height: 20px;
}
.cookie-modal__footer { background: #fff; padding: 20px 10px;
}
@media only screen and (max-width:40em) { .cookie-modal__header p { font-size: 13px; line-height: 17px; } .cookie-modal__header h2 { font-size: 21px; } .cookie-modal__footer { padding: 20px; }
}
.cookie-modal__footer p { font-size: 11px; line-height: 1.5; margin-bottom: 0;
}
.cookie-modal__body { padding: 30px 0 0; -webkit-overflow-scrolling: touch;
}
.cookie-modal__body .cookie-modal__details,
.cookie-modal__body>.cookie-modal-setup,
.cookie-modal__body>h3,
.cookie-modal__body>p { padding-left: 10px; padding-right: 10px;
}
@media only screen and (max-width:64em) { .cookie-modal__body .cookie-modal__details, .cookie-modal__body>.cookie-modal-setup, .cookie-modal__body>h3, .cookie-modal__body>p { padding-left: 20px; padding-right: 20px; }
}
.cookie-modal__body h3 { line-height: 1;
}
.cookie-modal__body>p>strong { display: block; padding-top: 10px;
}
.cookie-modal__body ul { font-size: 13px; line-height: 17px; padding: 0 10px 0 20px; margin-left: 5px;
}
@media only screen and (max-width:64em) { .cookie-modal__body ul { padding: 0 20px 0 30px; }
}
.cookie-modal__body ul li+li { padding-top: 10px;
}
.cookie-modal__body h3 { border-top: 1px solid #d1d1d1; padding-top: 30px; margin-top: 30px; font-style: italic;
}
.cookie-modal__body h3:first-child { border: none; margin-top: 0;
}
.cookie-modal__show-details { font-size: 16px; color: #0053a0; text-decoration: underline;
}
.tile__link,
.tile__link--all,
.tile__link--big { text-decoration: none;
}
.cookie-modal__show-details-container { display: block; margin-bottom: 30px; margin-top: 35px;
}
.cookie-modal__details { display: none; overflow: hidden;
}
.cookie-modal-setup { margin: 30px 0 35px;
}
.cookie-modal-setup .fm-item--switch,
.cookie-modal-setup strong { display: inline-block; vertical-align: middle;
}
.cookie-modal-setup strong { font-size: 14px; color: #0053a0; width: 280px;
}
@media only screen and (max-width:40em) { .cookie-modal-setup { min-height: 32px; } .cookie-modal-setup strong { line-height: 32px; width: calc(100% - 60px); } .cookie-modal-setup .fm-item--switch { float: right; }
}
.cookie-modal__details .cookie-modal-setup { padding: 18px 0 25px; margin: 0; position: relative;
}
.cookie-modal__details .cookie-modal-setup strong { display: block; width: auto; font-size: 18px; line-height: 1.3;
}
.cookie-modal__details .cookie-modal-setup strong span { font-size: 14px; display: block;
}
.cookie-modal.mode-full-view .cookie-modal__header .btn-change-settings,
.cookie-modal.mode-full-view .cookie-modal__header p,
.cookie-modal.mode-preview .cookie-modal__body { display: none;
}
.cookie-modal__details .cookie-modal-setup strong p { font-size: 13px; font-family: Arial,Helvetica,sans-serif; font-weight: 400; color: #636363; margin: 10px 0 20px; padding-right: 10px;
}
.cookie-modal__details .cookie-modal-setup .fm-item--switch { position: absolute; left: 280px; bottom: 18px;
}
.cookie-modal__details .cookie-modal-setup .fm-item--switch,
.cookie-modal__details .cookie-modal-setup strong { vertical-align: top;
}
.cookie-modal__details .cookie-modal-setup+.cookie-modal-setup { border-top: 1px dashed #d1d1d1;
}
.cookie-modal__details .cookie-modal-setup+p { clear: both; padding-top: 12px;
}
@media only screen and (max-width:40em) { .cookie-modal__details .cookie-modal-setup .fm-item--switch { left: auto; right: 0; } .cookie-modal.mode-preview .cookie-modal__header { padding: 10px 20px; } .cookie-modal.mode-preview .cookie-modal__container { height: 100%; overflow-y: auto; overflow-x: hidden; }
}
@media only screen and (max-width:64em) { .cookie-modal.mode-preview .cookie-modal__header { padding: 10px; } .cookie-modal.mode-preview .cookie-modal__header .btns-container { position: static; margin: 20px 0 10px; }
}
.cookie-modal.mode-preview .cookie-modal__header p { margin-bottom: 10px;
}
.cookie-modal.mode-full-view { top: 250px;
}
@media only screen and (min-width:64.063em) { .cookie-modal.mode-preview .cookie-modal__header { padding: 10px 465px 10px 10px; } .cookie-modal.mode-full-view .cookie-modal__header { padding-right: 230px; }
}
.cookie-modal.mode-full-view .cookie-modal__body { max-height: 400px; overflow-y: auto;
}
.cookie-modal.mode-full-view .cookie-modal__footer { border-top: 1px solid #d1d1d1; position: relative;
}
@media only screen and (max-width:64em) { .cookie-modal.mode-full-view .cookie-modal__header { padding: 10px 20px; } .cookie-modal.mode-full-view { top: 0; overflow: hidden; } .cookie-modal.mode-full-view .cookie-modal__header h2 { display: none; } .cookie-modal.mode-full-view .cookie-modal__header .btns-container { position: static; margin: 10px 0; } .cookie-modal.mode-full-view .cookie-modal__header .btns-container .btn { width: 100%; margin: 0; } .cookie-modal.mode-full-view .cookie-modal__footer { padding-left: 20px; padding-right: 20px; }
}
.cookie-modal__header .btns-container { position: absolute; bottom: 20px; right: 10px;
}
.cookie-modal__body .btns-container { overflow: hidden; margin-top: 20px; padding: 20px 10px; border-top: 1px solid #d1d1d1;
}
@media only screen and (min-width:40.063em) { .cookie-modal:not(.privacy-modal) .btns-container .btn { min-width: 220px; } .cookie-modal:not(.privacy-modal) .btns-container .btn:last-child { float: left; margin-right: 12px; } .privacy-modal .cookie-modal__body { overflow-x: hidden; }
}
@media only screen and (max-width:40em) { .cookie-modal__body .btns-container { padding: 20px; } .btns-container .btn { width: 100%; } .btns-container .btn+.btn { margin: 10px 0 0; } .privacy-modal .help-zone .h1--help { margin-top: 0; }
}
.btns-container .btn { vertical-align: middle;
}
.privacy-modal .help-zone { margin: 0;
}
.privacy-modal .help-zone .hlp-content-pad.add-top-pad.row { padding-top: 0;
}
.privacy-modal .help-zone .h1--help { padding-left: 10px; padding-right: 10px; margin-bottom: 0;
}
@media only screen and (max-width:64em) { .privacy-modal .help-zone .h1--help { padding-left: 20px; padding-right: 20px; }
}
.privacy-modal .help-zone .main-col { border: none;
}
.privacy-modal .help-zone .main-col>div { padding: 0;
}
.privacy-modal .help-zone .main-col>div .hlp-ul,
.privacy-modal .help-zone .main-col>div h3,
.privacy-modal .help-zone .main-col>div p { padding-left: 10px; padding-right: 10px;
}
.privacy-modal .help-zone .main-col>div .tc-nd--table { margin-left: 10px; margin-right: 10px; width: calc(100% - 20px);
}
.privacy-modal .help-zone .main-col>div .hlp-ul { margin-left: 15px; margin-right: 10px;
}
@media only screen and (max-width:64em) { .privacy-modal .help-zone .main-col>div .hlp-ul, .privacy-modal .help-zone .main-col>div h3, .privacy-modal .help-zone .main-col>div p { padding-left: 20px; padding-right: 20px; } .privacy-modal .help-zone .main-col>div .tc-nd--table { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } .privacy-modal .help-zone .main-col>div .hlp-ul { margin-left: 25px; margin-right: 20px; }
}
.privacy-modal .html-content { padding: 0 20px;
}
@media only screen and (min-width:64.063em) { .privacy-modal .html-content { padding: 0 10px; }
}
.privacy-modal .html-content h2:first-child { margin-top: 0;
}
.disable-scroll { overflow: hidden; position: fixed;
}
.modal-registration-consent-error { text-align: center; background: #fff; padding: 35px 10px 30px;
}
.modal-registration-consent-error .fm-item { margin-bottom: 30px;
}
@media only screen and (max-width:40em) { .modal-registration-consent-error { padding: 10px; } .modal-registration-consent-error .fm-item { margin-top: 0; margin-bottom: 10px; }
}
.tile__item { position: relative; width: 32%; float: left; padding: 10px; margin: 0 1% 10px 0; border: 1px solid #e5e5e5; background-color: #FFF;
}
.tile__title { margin: 0 0 10px;
}
.tile__blurb { font-size: 14px;
}
.tile__link--big:focus,
.tile__link--big:hover,
.tile__link:focus,
.tile__link:hover { color: #ed1c24;
}
.tile__link { font-size: 12px;
}
.tile__link--all { display: block; height: 100%;
}
.tile__link--all:focus .tile__title,
.tile__link--all:hover .tile__title { text-decoration: underline;
}
.hp__banner a,
.sl__nearby-stores li a,
.sl__use-current i { text-decoration: none;
}
.tile__link--all .tile__blurb { color: #222;
}
.tile__link--big { display: block; font-size: 16px; font-weight: 700; margin-left: 0;
}
.tile__link--big:before { margin-left: 0; text-align: left;
}
.btn-no-video,
.hp-tiles,
.hp-tiles-cont,
.pr__media--video,
.pr__options__ul li .btn,
.pr__promo-line,
.pr__tabs__li,
.sl__col .sl__map-marker,
.video-disabled { text-align: center;
}
.survey-container { width: 100%; position: fixed; z-index: 21; background: #000; background-color: rgba(0,0,0,.8); bottom: 0; transition: bottom .5s ease-in-out;
}
.survey-container .survey-content { padding: 40px 0; margin: 0 88px; overflow: hidden;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .survey-container .survey-content { margin: 0 58px; }
}
@media only screen and (max-width:40em) { .survey-container .survey-content { padding: 20px 0; margin: 0 15px; }
}
.survey-container h3 { font-size: 22px; line-height: 17px; color: #fff; margin: 0 0 18px;
}
.survey-container h4 { font-size: 18px; line-height: 17px; color: #fff; margin: 0 0 22px;
}
@media only screen and (max-width:64em) { .survey-container h4 { font-size: 16px; line-height: 18px; }
}
.survey--state-down { bottom: 0;
}
.survey--state-up { bottom: -300px;
}
.survey--state-load { bottom: 0!important;
}
.home-video-iframe-inner .video-disabled.home-video-iframe-thumbnail { background: #f6f6f6;
}
.video-disabled .icon-sad-cloud { margin-bottom: 30px; height: auto;
}
.video-disabled .icon-sad-cloud img { opacity: 0; width: 100%;
}
.video-disabled__container { position: absolute; top: 50%; transform: translateY(-50%); left: 60px; right: 60px;
}
.video-disabled__strong { font-size: 18px; line-height: 1.444; display: block;
}
.video-disabled__message { font-size: 14px; line-height: 1.571; margin: 12px 0 0;
}
.video-disabled__anchor { color: #636363; font-weight: 700;
}
@media only screen and (max-width:40em) { .video-disabled .icon-sad-cloud { display: none; } .video-disabled__container { left: 25px; right: 25px; } .video-disabled__strong { font-size: 12px; line-height: 1.333; } .video-disabled__message { font-size: 12px; line-height: 1.167; margin-top: 8px; }
}
@media only screen and (min-width:64.063em) { .video-disabled .icon-sad-cloud { width: 183px; } .lg-12 .video-disabled .icon-sad-cloud { width: 144px; max-width: 30%; margin-bottom: 20px; } .lg-12 .video-disabled .video-disabled__container { left: 40px; right: 40px; } .lg-12 .video-disabled .video-disabled__message { font-size: 12px; } .lg-12 .video-disabled .video-disabled__strong { font-size: 16px; } .dotd-cont { min-height: 494px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .help-zone .video-disabled .icon-sad-cloud { width: 144px; max-width: 28%; margin-bottom: 20px; } .help-zone .video-disabled .video-disabled__container { left: 40px; right: 40px; } .help-zone .video-disabled .video-disabled__message { font-size: 12px; } .help-zone .video-disabled .video-disabled__strong { font-size: 16px; }
}
.truste_box_overlay_inner [id^=closebtn-] { display: none!important;
}
.truste_overlay { opacity: .55!important;
}
.truste_box_overlay { position: fixed!important; padding: 0!important; width: 100%!important; background: #fff!important; margin: 0!important; border-radius: 0!important; bottom: 0!important; top: auto!important; -webkit-overflow-scrolling: touch; overflow-y: auto; max-height: 55%;
}
.dotd-cont,
.hp__banner { border: 1px solid #d1d1d1;
}
.dotd-inner,
.hp__banner a,
.pr__btns,
.pr__options__ul,
.pr__product,
.sl__store { overflow: hidden;
}
@media (min-width:1025px) { .truste_box_overlay { max-height: 50%; }
}
.truste_box_overlay_inner { max-width: 1148px!important; max-height: 100%!important; position: absolute!important; bottom: 0; left: 0; right: 0; margin: 0 auto;
}
.dotd-inner,
.large,
.tile-cols,
.tiles { position: relative;
}
.truste_box_overlay_inner iframe { height: 100%!important;
}
.hp__banner { height: 178px; padding: 9px; background: #fff; box-shadow: 0 4px 6px -2px rgba(0,0,0,.2);
}
@media only screen and (max-width:40em) { .hp__banner { padding: 5px; height: 127px; }
}
.hp__banner a { background: url(https://cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/images/general/assets/gfx/homepage-service-sprite.jpg?yocs=n_s_) 100% 100% no-repeat; display: block; height: 158px; padding-left: 18px;
}
.hp__banner a h2 { width: 130px; font-family: screwfix_betabold; font-size: 32px; line-height: 32px; margin: 20px 0;
}
@media only screen and (max-width:40em) { .hp__banner a { padding-left: 9px; height: 117px; } .hp__banner a h2 { width: 75px; font-size: 18px; line-height: 18px; margin: 10px 0 8px; }
}
.hp__banner a p { color: #636363; font-family: archivo_narrowbold,sans-serif; font-size: 16px; width: 120px;
}
.hp__banner a.hp__cc { background-position: 100% -240px;
}
@media only screen and (max-width:40em) { .hp__banner a p { font-size: 13px; width: 50px; } .hp__banner a.hp__cc { background-position: 100% -123px; }
}
.hp__banner a.hp__nd { background-position: 100% -408px;
}
.hp__banner a.hp__nd p { width: 160px;
}
@media only screen and (max-width:40em) { .hp__banner a.hp__nd { background-position: 100% 0; } .hp__banner a.hp__nd p { width: 46px; }
}
.dotd-cont { background: #fff; height: 100%; padding: 9px; -webkit-box-shadow: 0 4px 6px -2px rgba(0,0,0,.2); -moz-box-shadow: 0 4px 6px -2px rgba(0,0,0,.2); box-shadow: 0 4px 6px -2px rgba(0,0,0,.2);
}
@media only screen and (max-width:64em) { .dotd-cont { margin-bottom: 30px; height: auto; }
}
@media only screen and (max-width:40em) { .dotd-cont { padding: 6px; }
}
.dotd-inner { height: 100%; background: rgba(255,34,5,.94); background: -moz-radial-gradient(center,ellipse cover,rgba(255,34,5,.94) 0,rgba(231,25,4,.94) 26%,#a30000 100%); background: -webkit-gradient(radial,center center,0,center center,100%,color-stop(0,rgba(255,34,5,.94)),color-stop(26%,rgba(231,25,4,.94)),color-stop(100%,#a30000)); background: -webkit-radial-gradient(center,ellipse cover,rgba(255,34,5,.94) 0,rgba(231,25,4,.94) 26%,#a30000 100%); background: -o-radial-gradient(center,ellipse cover,rgba(255,34,5,.94) 0,rgba(231,25,4,.94) 26%,#a30000 100%); background: -ms-radial-gradient(center,ellipse cover,rgba(255,34,5,.94) 0,rgba(231,25,4,.94) 26%,#a30000 100%); background: radial-gradient(ellipse at center,rgba(255,34,5,.94) 0,rgba(231,25,4,.94) 26%,#a30000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2205', endColorstr='#a30000', GradientType=1 );
}
@media only screen and (min-width:64.063em) { .dotd-inner { min-height: 474px; }
}
.dotd-inner .banner { box-shadow: none;
}
.large,
.sl__col,
.stnd__section.sl--mod-shadow { box-shadow: 0 4px 6px -2px rgba(0,0,0,.2);
}
.tiles { margin: 0 auto; padding: 0; float: left;
}
.tiles .lg-3.cols:nth-of-type(10) .mt__item,
.tiles .lg-3.cols:nth-of-type(11) .mt__item,
.tiles .lg-3.cols:nth-of-type(12) .mt__item,
.tiles .lg-3.cols:nth-of-type(13) .mt__item,
.tiles .lg-3.cols:nth-of-type(14) .mt__item,
.tiles .lg-3.cols:nth-of-type(15) .mt__item,
.tiles .lg-3.cols:nth-of-type(16) .mt__item,
.tiles .lg-3.cols:nth-of-type(9) .mt__item,
.tiles .lg-4.cols:nth-of-type(10) .mt__item,
.tiles .lg-4.cols:nth-of-type(11) .mt__item,
.tiles .lg-4.cols:nth-of-type(12) .mt__item,
.tiles .lg-4.cols:nth-of-type(7) .mt__item,
.tiles .lg-4.cols:nth-of-type(8) .mt__item,
.tiles .lg-4.cols:nth-of-type(9) .mt__item,
.tiles .lg-6.cols:nth-of-type(5) .mt__item,
.tiles .lg-6.cols:nth-of-type(6) .mt__item,
.tiles .lg-6.cols:nth-of-type(7) .mt__item,
.tiles .lg-6.cols:nth-of-type(8) .mt__item,
.tiles .lg-8.cols:nth-of-type(4) .mt__item,
.tiles .lg-8.cols:nth-of-type(5) .mt__item,
.tiles .lg-8.cols:nth-of-type(6) .mt__item { margin-bottom: 0!important;
}
@media only screen and (max-width:40em) { .tiles .lg-3.cols:nth-of-type(10) .mt__item, .tiles .lg-3.cols:nth-of-type(11) .mt__item, .tiles .lg-3.cols:nth-of-type(12) .mt__item, .tiles .lg-3.cols:nth-of-type(13) .mt__item, .tiles .lg-3.cols:nth-of-type(14) .mt__item, .tiles .lg-3.cols:nth-of-type(15) .mt__item, .tiles .lg-3.cols:nth-of-type(16) .mt__item, .tiles .lg-3.cols:nth-of-type(9) .mt__item, .tiles .lg-4.cols:nth-of-type(10) .mt__item, .tiles .lg-4.cols:nth-of-type(11) .mt__item, .tiles .lg-4.cols:nth-of-type(12) .mt__item, .tiles .lg-4.cols:nth-of-type(7) .mt__item, .tiles .lg-4.cols:nth-of-type(8) .mt__item, .tiles .lg-4.cols:nth-of-type(9) .mt__item, .tiles .lg-6.cols:nth-of-type(5) .mt__item, .tiles .lg-6.cols:nth-of-type(6) .mt__item, .tiles .lg-6.cols:nth-of-type(7) .mt__item, .tiles .lg-6.cols:nth-of-type(8) .mt__item, .tiles .lg-8.cols:nth-of-type(4) .mt__item, .tiles .lg-8.cols:nth-of-type(5) .mt__item, .tiles .lg-8.cols:nth-of-type(6) .mt__item { margin-bottom: 10px!important; }
}
.sub-banner-cont { float: left; display: inline;
}
.sub-banner-cont .top { margin-bottom: 12px;
}
.tile-cols { padding: 0 9px 9px 0; float: left;
}
.large { width: 100%; height: auto; background-color: #fff; border: 1px solid #d6d6d6; float: left; margin-bottom: 10px;
}
.tab-mob-link { display: none;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .tab-mob-link { display: block; }
}
@media only screen and (max-width:40em) { .tile-cols { padding: 0 6px 6px 0; } .tab-mob-link { display: block; }
}
.desk-link,
.tab-mob-link>span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;
}
.hp-tiles,
.hp-tiles-outer,
.sl__col ol li,
.sl__store,
.sl_deliver-all { position: relative;
}
.hp-tiles-outer { padding: 9px 0 0 9px;
}
.hp-tiles { background: #f6f6f6; float: left; width: 100%;
}
.hp-tiles p { margin-bottom: 20px;
}
.hp-tiles img { margin-top: 20px; margin-bottom: 10px;
}
@media only screen and (max-width:40em) { .hp-tiles-outer { padding: 6px 0 0 6px; } .hp-tiles img { margin: 6px 0; height: 36px; } .hp-tiles-cont { display: none; }
}
.hp-tiles-cont { width: 70%; margin: 0 auto 30px; min-height: 85px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .hp-tiles-cont { min-height: 10px; width: 80%; margin: 0 auto 30px; } .hp-tiles-cont .btn { display: none; }
}
.hp-tiles-cont .center { margin-left: 31%;
}
@media only screen and (min-width:40.063em) and (max-width:64em) and (max-width:40em) { .hp-tiles-cont .btn { display: none; }
}
.sl__search { height: 46px;
}
.sl__search__lbl { float: right; font-size: 24px; line-height: 45px; margin-right: 6px;
}
.sl__search__lbl.sl__search--select { line-height: 37px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .sl__search__lbl { font-size: 18px; }
}
@media only screen and (max-width:40em) { .sl__search__lbl.sl__search--select { line-height: 18px; } .sl__search__lbl { font-size: 16px; float: none; line-height: 18px; padding-top: 0; padding-bottom: 0; }
}
.sl__use-current { font-size: 13px; margin: -6px 0 0 -6px;
}
@media only screen and (max-width:40em) { .sl__use-current { margin-top: 6px; }
}
.sl__use-current i { font-size: 23px; position: relative; top: 5px; display: inline-block;
}
.sl__subheading { margin-top: -12px;
}
.sl__title { font-size: 26px; line-height: 24px; margin: 30px 0 14px;
}
@media only screen and (max-width:40em) { .sl__title { font-size: 18px; margin: 18px 0 17px 13px; }
}
.sl__title-sm { font-size: 22px; line-height: 22px; margin: 10px 0 0 -17px;
}
@media only screen and (max-width:40em) { .sl__title-sm { font-size: 18px; line-height: 18px; margin: 0 0 10px; }
}
.sl__stores { border-top: 2px solid #e5e5e5; padding: 0; margin-top: 10px; margin-bottom: 30px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .sl__stores { margin-bottom: 20px; }
}
@media only screen and (max-width:40em) { .sl__stores { margin-bottom: 10px; }
}
.sl__stores.sl__stores--no-margin-bottom { margin-bottom: 0;
}
.sl__stores.sl__stores--border-li-orphan { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin-bottom: 50px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .sl__stores.sl__stores--border-li-orphan { margin-bottom: 40px; }
}
.sl__store { padding: 20px 24px 20px 13px; border-bottom: 1px solid #e5e5e5;
}
.sl__store__unavailable { padding-bottom: 24px; color: #d0030b;
}
@media only screen and (max-width:40em) { .sl__stores.sl__stores--border-li-orphan { margin-bottom: 20px; } .sl__store { padding: 20px 4px; }
}
.sl__store:last-child { border-top: 1px solid #e5e5e5; border-bottom: 0 solid #e5e5e5;
}
.sl__store.sl__store--noborder { border-bottom: 0;
}
.sl__store.sl__store--error { background: #fef3f4;
}
.sl__store.sl__store--selected { margin-bottom: -4px; padding-bottom: 0; padding-top: 25px; font-size: 13px;
}
.sl__store p { font-size: 12px; line-height: 16px; margin-bottom: 0;
}
.sl__store dl { margin: 0 0 24px;
}
.sl__store dl dd { clear: both;
}
.sl__store dl dd span.days { display: inline-block; width: 114px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .sl__store dl dd span.days { width: 80px; }
}
@media only screen and (max-width:40em) { .sl__store dl dd span.days { width: 60px; } .sl__store .btn { margin-top: 12px; } .sl__store .fm-item--radio { margin: .8em 0; }
}
.sl__store .sl__make--selected { margin-bottom: 18px;
}
.sl__store .sl__store--error-message { clear: both; color: #d0030b; font-size: 13px; line-height: 15px; padding: 10px 0 8px 25px;
}
@media only screen and (max-width:40em) { .sl__store .sl__store--error-message { font-size: 11px; line-height: 14px; }
}
.sl__store .sl__store--error-message:before { font-family: font-awesome-custom; font-size: 15px; font-weight: 400; content: '\e807'; margin-left: -20px; padding-right: 5px;
}
.sl__store .infobox--error { margin: -10px -24px;
}
.sl__store .fm-item--radio label { font-weight: 700; font-size: 14px;
}
@media only screen and (max-width:40em) { .sl__store .fm-item--radio label { font-size: 13px; }
}
.sl__store .fm-item--radio:first-child { margin: 12px 0 10px;
}
.sl__store .show-details { display: inline-block; min-width: 80px; font-size: 12px; line-height: 17px; color: #636363; font-weight: 700;
}
.sl__store .show-details .icon { font-size: 18px;
}
.sl__store .item-list__subtitle:first-child { margin-top: 40px;
}
@media only screen and (max-width:40em) { .sl__store .item-list__subtitle:first-child { margin-top: 25px; }
}
.sl__store-table { display: table; width: 100%;
}
.item-list__overview { display: table-header-group;
}
.sl__vw-store { display: inline-block; font-size: 13px; font-weight: 400; font-family: Arial,Helvetica,sans-serif; margin-left: 20px;
}
@media only screen and (max-width:64em) { .sl__vw-store { display: block; margin: 5px 0; }
}
.sl__store--left,
.sl__store--right { display: inline-block; float: left; width: 70%;
}
.sl__store--right { width: 30%;
}
.sl__store-name { margin: 0 0 12px; font-size: 22px; line-height: 24px; color: #0053a0;
}
.sl__store-name span { display: inline-block;
}
.sl__store-name .sl__vw-store { line-height: 13px;
}
.sl_deliver-all { padding: 25px 24px; margin-top: 0;
}
.sl__mod { margin: 25px 20px 30px;
}
@media only screen and (max-width:40em) { .sl__store-name { font-size: 18px; line-height: 20px; } .sl__mod { margin: 15px 9px 30px; }
}
.sl__mod.sl__mod--no-margin-bottom { margin-bottom: 0;
}
.sl__mod-indent { padding: 0 0 0 13px;
}
@media only screen and (max-width:40em) { .sl__st--pad { margin: 0 4px; }
}
.sl__col { border: 1px solid #d1d1d1; background-color: #FFF; margin: 0 0 20px -9px;
}
@media only screen and (max-width:64em) { .sl__col { margin-right: -9px; }
}
.sl__col h2,
.sl__col h3,
.sl__col h4 { text-transform: none; color: #636363;
}
.sl__col h1 { font-size: 26px; line-height: 24px; margin: 4px 0 15px;
}
@media only screen and (max-width:40em) { .sl__col h1 { font-size: 18px; line-height: 20px; }
}
.sl__col h1 span { display: inline-block;
}
.sl__col h2 { font-size: 26px; line-height: 1em; margin: 4px 0 15px;
}
@media only screen and (max-width:40em) { .sl__col h2 { font-size: 18px; margin: 20px 0 15px; }
}
.sl__col h4 { font-size: 16px; margin: 0;
}
.sl__col address { margin-bottom: 5px;
}
.sl__col hr { margin: 25px 0;
}
@media only screen and (max-width:40em) { .sl__col hr { margin: 15px 0; }
}
.sl__col .sl__nearby-view { margin-top: -6px;
}
.sl__col ol { margin-top: 14px; padding-left: 4px; list-style: none;
}
.sl__col ol li { margin: 20px 63px 10px 0; padding: 0 0 22px 20px; border-bottom: 1px dotted #d1d1d1; font-size: 13px; line-height: 17px;
}
.sl__col ol li:first-child { margin-top: 3px;
}
.sl__col ol li .step { float: left; display: inline-block; width: 25px;
}
.sl__col ol li .instructions { display: inline-block; max-width: 85%;
}
.sl__col ol li .miles { position: absolute; right: -46px; bottom: -6px;
}
.sl__col .print { margin: 27px 0 20px;
}
.sl__col .print .icon { float: right;
}
.sl__col .sl__bank { padding: 17px 10px 17px 15px; margin: 30px 0; background-color: #0053a0; color: #fff;
}
.sl__col .sl__bank h2 { font-size: 22px; line-height: 1em; margin: 0 0 11px; color: #ff0; text-transform: uppercase;
}
@media only screen and (max-width:40em) { .sl__col ol li .instructions { max-width: 83%; } .sl__col .sl__bank h2 { font-size: 18px; line-height: 20px; }
}
.sl__col .sl__bank a { color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase;
}
@media only screen and (max-width:40em) { .sl__col .sl__bank a { font-size: 12px; }
}
.sl__col .sl__bank p:last-child { margin-bottom: 0;
}
.sl__col .sl__map-marker { float: left; margin: 0 3px 0 6px; width: 30px; height: 37px; color: #fff; background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/img/store-locator/map-marker-blank.png?yocs=n_s_) no-repeat; font-family: archivo_narrowbold,sans-serif; font-size: 18px;
}
.sl__col .sl__map-marker .letter { position: relative; top: 4px;
}
.sl__col .sl__end-point,
.sl__col .sl__start-point { margin-left: 5px; min-height: 37px;
}
.sl__col .sl__end-point p,
.sl__col .sl__start-point p { font-size: 16px; line-height: 20px; margin-bottom: 0;
}
.sl__col .sl__end-point p:first-child,
.sl__col .sl__start-point p:first-child { font-weight: 700;
}
.sl__col .sl__end-point .sl__point-address,
.sl__col .sl__start-point .sl__point-address { display: inline-block; max-width: 85%; padding-left: 5px;
}
@media only screen and (max-width:40em) { .sl__col .sl__end-point .sl__point-address, .sl__col .sl__start-point .sl__point-address { max-width: 80%; } .sl__col .sl__start-point { margin-top: 25px; }
}
.sl__col .sl__point-distance p { margin: 4px 0 10px; font-size: 22px; line-height: 24px; color: #0053a0; font-family: archivo_narrowbold,sans-serif;
}
@media only screen and (max-width:40em) { .sl__col .sl__point-distance p { font-size: 18px; line-height: 20px; } #directions-container { margin-top: 25px; }
}
.sl__directions-icons { margin: 0 0 21px; list-style: none; padding: 0;
}
.sl__directions-icons li { display: inline-block; width: 35px; height: 35px; overflow: hidden; margin: 0 6px 0 0; color: #fff; background-color: #b4b4b4; cursor: pointer;
}
.sl__directions-icons li.selected { background-color: #0053a0;
}
.sl__directions-icons li .icon { font-size: 32px;
}
.sl__directions-icons li .icon:before { margin-right: 0; margin-left: -10px;
}
.sl__nearby-stores { padding-left: 0;
}
.sl__nearby-stores li { list-style: none; border-top: 1px solid #e5e5e5; padding: 20px 0 14px;
}
.sl__nearby-stores li.selected { background-color: #fffdcf;
}
.sl__nearby-stores li:first-child { border-top: 2px solid #e5e5e5;
}
.sl__nearby-stores li a address { color: #636363;
}
.sl__nearby-stores li a .sl__nearby-stores--unavailable { color: #d0030b;
}
.sl__nearby-stores li a:hover .sl__nearby-stores--text,
.sl__nearby-stores li a:hover h3 { text-decoration: underline;
}
.sl__nearby-stores .sl__nearby-address { display: block; width: 100%; padding: 0 42px;
}
.sl__nearby-stores .sl__nearby-address h3 { margin: 4px 0 10px; font-size: 22px; line-height: 24px; color: #0053a0;
}
@media only screen and (max-width:40em) { .sl__nearby-stores .sl__nearby-address h3 { font-size: 18px; line-height: 20px; }
}
.sl__nearby-stores .sl__nearby-address h3 span { display: inline-block;
}
.sl__nearby-stores .sl__nearby-address .sl__link-divider { margin: 0 10px;
}
.sl__nearby-stores .sl__new-store { text-transform: uppercase; font-weight: 700; color: #0053a0; font-family: archivo_narrowbold,sans-serif;
}
.sl__nearby-stores .sl__new-store span { color: #ed1c24; padding: 0 3px; border: 2px solid #0053a0;
}
.sl__bank-nearby,
.sl__selected-store { font-weight: 700; color: #fff; font-family: archivo_narrowbold,sans-serif; background: #0053a0; display: inline-block; text-transform: uppercase;
}
.sl__selected-store { line-height: 1.75; padding: 1px 6px 0;
}
.sl__selected-store+a { float: right; line-height: 1.75; padding: 1px 0 0;
}
.sl__nearby-address-text { font-size: 18px; line-height: 1em;
}
.sl__bank-nearby { padding: 3px 5px 3px 10px; margin-top: 8px; text-align: center;
}
@media only screen and (max-width:40em) { .sl__nearby-address-text { font-size: 16px; } .sl__bank-nearby { font-size: 11px; }
}
.sl__bank-nearby span { color: #ff0;
}
.sl__bank-nearby a,
.sl__bank-nearby a:focus,
.sl__bank-nearby a:hover,
.sl__bank-nearby a:visited { color: #fff; display: inline-block;
}
.sl__bank-nearby a i,
.sl__bank-nearby a:focus i,
.sl__bank-nearby a:hover i,
.sl__bank-nearby a:visited i { display: inline-block;
}
.stnd__section.sl--mod-margin { margin-right: -9px;
}
.stnd__section .map--img { max-width: 100%;
}
.page-bottom { margin-bottom: 42px;
}
.sl__map-popup .sl__nearby-address { padding: 0;
}
.sl__map-popup.sl__nearby-stores .sl__nearby-address h3 span { display: block;
}
.sl__map-popup a { font-size: 13px; line-height: 17px; text-decoration: none;
}
.sl__map-popup a:hover { text-decoration: underline;
}
.sl__map-popup dl { margin-top: 0; margin-bottom: 12px;
}
.sl__map-popup dt { margin-bottom: 4px;
}
.sl__map-popup a,
.sl__map-popup address,
.sl__map-popup dl,
.sl__map-popup p { font-family: sans-serif,Arial,Helvetica;
}
.store-letter { margin: 0 0 44px;
}
@media only screen and (max-width:64em) { .store-letter { margin: 0; } .store-letter__last { margin: 0 0 44px; }
}
.store-letter span { float: left; font-family: archivo_narrowbold,sans-serif; font-size: 22px; line-height: 25px;
}
.store-letter__last { margin: 0 0 44px;
}
.store-column ul { margin: 0; padding: 0 0 0 38px;
}
.store-column ul li { padding: 0; margin-bottom: 10px; list-style: none;
}
.store-column ul li a { font-size: 13px; line-height: 17px; text-decoration: none;
}
.stores-list .grand-title { margin-bottom: 44px;
}
@media only screen and (max-width:40em) { .stores-list .grand-title { padding-bottom: 16px; margin: 16px 0; }
}
.inner.sl__modal { background: #fff; border: 1px solid #ccc; padding: 44px; margin: 0 0 20px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .inner.sl__modal { padding: 30px; }
}
.inner.sl__modal h2 { margin: 0; line-height: 1em;
}
@media only screen and (max-width:40em) { .inner.sl__modal { padding: 10px 13px; } .inner.sl__modal h2 { margin-top: 5px; font-size: 22px; }
}
.inner.sl__modal .sl__col { border-color: #fff; box-shadow: 0 4px 6px -2px transparent; margin-bottom: 0;
}
.pr__btns,
.pr__options { border-bottom: 1px solid #d1d1d1;
}
.inner.sl__modal .sl__mod { margin: 0 30px 0 0;
}
.inner.sl__modal .sl__bank-view { display: none;
}
.inner.sl__modal .sl__bank { margin: 0;
}
.inner.sl__modal .sl__bank dl { margin-bottom: 0;
}
#map { width: 100%; height: 740px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { #map { height: 696px; }
}
.pac-container { z-index: 30!important;
}
.pr__product { padding: 30px 25px;
}
.pr__product h1 { font-size: 24px; line-height: 24px; color: #0053a0; text-transform: uppercase; margin-top: 0;
}
@media only screen and (max-width:40em) { .inner.sl__modal .sl__mod { margin: 0; } #map { height: 580px; } .pr__product { padding: 10px 0 20px; } .pr__product h1 { font-size: 21px; line-height: 21px; }
}
.pr__product .pr__desc { margin-bottom: 20px; position: relative; z-index: 3; clear: both;
}
.pr__product .pr__view { display: inline-block; font-size: 11px; line-height: 15px;
}
.pr__product .bulk-savings { padding-top: 0; margin-bottom: 8px;
}
.pr__media { position: relative; width: 100%; margin-bottom: 15px;
}
.pr__media .slider-for { left: 12%;
}
@media only screen and (max-width:64em) { .pr__product .pr__desc a { padding-bottom: 10px; } .pr__product .bulk-savings .bulk-savings--header { margin-right: 0; } .pr__media { text-align: center; }
}
@media only screen and (max-width:40em) { .pr__media { overflow: hidden; padding: 15px 0; margin-bottom: 10px; }
}
.pr__media .banner__promo-icon { top: 0; left: 0; z-index: 9;
}
.pr__media--img { z-index: 1; margin: 0 auto;
}
.pr__media--img img { width: 75%; cursor: pointer; margin-top: 20px;
}
.pr__media--modal { background: #fff; padding: 10px 0;
}
.pr__media--modal .pr__media--main { border-bottom: 1px solid #d1d1d1; height: 75%; width: 100%;
}
.pr__media--modal .pr__media--main .pr__media--img { margin-top: 20px; width: 60%;
}
.pr__media--modal .pr__media--main .pr__media--img .slider-for-modal { left: 15%;
}
.pr__media--video { margin-bottom: 30px;
}
.product__video { padding: 10px; background: #fff;
}
.product__video .stnd__vid { margin: 0; padding-bottom: 55.55%;
}
.pr__media--enlarge { position: absolute; top: 0; right: 10%; display: block; background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/gfx/magnifying-glass.png?yocs=n_s_) no-repeat; width: 33px; height: 33px; z-index: 9;
}
.pr__media--carousel { position: relative; margin: 40px auto 30px; cursor: pointer;
}
@media only screen and (max-width:40em) { .product__video { padding: 6px; } .pr__media--enlarge { display: none; } .pr__media--carousel { margin-bottom: 0; } .pr__product__logo { display: none; }
}
.pr__media--carousel img { width: 46px; height: 46px; border: 1px solid #d1d1d1;
}
.pr__media--carousel .pagi__link { position: absolute; top: 4px; right: -45px; width: 36px;
}
.pr__media--carousel .pagi__link.slick-prev { margin: 0; left: -50px; right: auto;
}
.pr__product__logo,
.pr__spec-list { margin-bottom: 25px;
}
.pr__media--modal .pr__media--carousel .pagi__link { top: 18px; right: -50px;
}
.pr__media .pr__media--carousel { max-width: 180px;
}
.pr__media--modal .pr__media--carousel { margin-top: 24px; width: 80%;
}
.pr__media--modal .pr__media--carousel img { width: 80px; height: 80px;
}
.pr__spec-list { font-size: 13px; line-height: 17px; padding-left: 20px;
}
.pr__spec-list li { margin: 0 0 6px;
}
@media only screen and (max-width:40em) { .pr__spec-list li { margin: 0; }
}
@media only screen and (max-width:64em) { .pr__prices.row { border-top: 1px solid #d1d1d1; padding-top: 12px; margin: 0 .1em 3px; }
}
.pr__pricepoint { margin: 0 0 12px;
}
.pr__pricepoint .lii__discounts { float: none;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .pr__pricepoint { margin-top: -5px; }
}
.pr__discounts { display: inline-block; float: right; margin-top: 19px;
}
.pr__save,
.pr__was { font-family: screwfix_betaregular; display: block; font-size: 14px; line-height: 16px; color: #999;
}
.pr__save { color: #d0030b;
}
.pr__price { display: inline-block; font-family: screwfix_betabold; font-size: 46px; line-height: 48px; font-weight: 600; vertical-align: text-top;
}
@media only screen and (max-width:64em) { .pr__discounts { float: left; } .pr__price { float: left; margin-right: 10px; }
}
.pr__price .pence,
.pr__price .pound { position: relative; top: 2px; font-size: 30px; vertical-align: text-top;
}
.pr__price .pence { padding-left: 2px;
}
.pr__price .incvat { position: absolute; bottom: 13px; right: -3px; font-size: 12px; height: 10px; white-space: nowrap;
}
@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) { .pr__price .incvat { bottom: 31px; }
}
.pr__price .price__extra { display: block; font-size: 11px; font-family: screwfix_betaregular; color: #636363; margin: -5px 0 5px 18px; line-height: 24px;
}
.pr__p { font-size: 14px; margin-bottom: 7px;
}
.pr__options { width: 100%; margin-bottom: 10px;
}
.pr__options__ul { display: block; width: 100%; margin: 0 0 20px; padding: 0; list-style: none;
}
.pr__options__ul li { width: 45px; margin: 0 12px 10px 0; float: left;
}
.pr__options__ul li .btn { padding: 10px 0 8px; margin: 0;
}
.pr__options__ul li .btn.btn--selected:after { display: none;
}
.pr__btns { border-top: 1px solid #d1d1d1; padding-top: 18px; padding-bottom: 10px;
}
.pr__btns p { height: 34px;
}
.pr__btns p.tcnd-ie strong { position: unset;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .pr__btns p.tcnd-ie strong { position: absolute; top: 72px; left: 5px; } .pr__btns p.tcnd-ie ._btn--link { top: 55px; right: 5px; left: unset; }
}
@media only screen and (min-width:40.063em) and (max-width:725px) { .pr__btns p.tcnd-ie ._btn--link { top: 89px; left: 5px; right: unset; }
}
.pr__btns ._btn--link { display: block; clear: both; position: absolute;
}
@media only screen and (min-width:40.063em) { .pr__btns .oneline--link { position: unset; }
}
.pr__lists,
.pr__qty { padding-top: 6px;
}
.pr__lists .btn,
.pr__qty .btn { margin-bottom: 6px;
}
.pr__qty { padding-bottom: 6px;
}
.pr__qty label { display: inline-block; margin-right: 12px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .pr__btns ._btn--link { display: inline-block; clear: none; top: 72px; left: 5px; } .pr__qty { float: right; }
}
.pr__lists { border: 0; padding-top: 18px;
}
.pr__tabs--container,
.pr__tabs__li { border: 1px solid #d1d1d1; overflow: hidden;
}
.pr__tabbed-content { margin: 0 -.3em 20px;
}
@media only screen and (max-width:64em) { .pr__tabbed-content { margin: 0 -.6em 20px; }
}
.pr__xsell { margin: 0 -.6em 15px;
}
@media only screen and (max-width:40em) { .pr__xsell { margin-bottom: 5px; }
}
@media only screen and (min-width:64.063em) { .pr__xsell { overflow: hidden; margin-left: 6px; } .pr__xsell .sl__full { margin: 0; } .pr__xsell .ct__pt>div { width: 49%; } .pr__xsell .ct__pt>div:nth-child(odd) { margin-right: 10px; } .pr__xsell .ct__pt>div:nth-child(even) { float: right; } .pdp-float-cta__container { max-width: 1148px; }
}
.pr__xsell .slider-certona .pagi__link { top: -65px;
}
.pr__xsell h2.underline { color: #0053a0; border-bottom: 1px solid #d1d1d1; padding-bottom: 12px; margin: 6px 0 15px;
}
.pr__tabs--container { padding: 9px; box-shadow: 0 4px 6px -2px rgba(0,0,0,.2); margin-bottom: 20px; margin-left: -.3em; background-color: #fff;
}
@media only screen and (max-width:64em) { .pr__xsell h2.underline { margin-top: 22px; } .pr__tabs--container { margin-left: 0; }
}
@media only screen and (max-width:40em) { .pr__tabs--container { padding: 6px; }
}
.pr__tabs--container .tc-nd { padding-top: 0;
}
.pr__tabs--container .tc-nd p { margin-bottom: 10px;
}
.pr__tabs--container .tc-nd p.product__hazardous { margin: 30px 0;
}
.pr__tabs--container .tc-nd h3 { margin-bottom: 5px;
}
@media only screen and (max-width:40em) { .pr__tabs--container .tc-nd h3 { margin-top: 16px; }
}
.pr__tabs { position: relative; display: block; list-style: none; background: #fbfbfb; background-image: -webkit-linear-gradient(top,#f1f1f1 0,#f6f6f6,#fff 100%); background-image: linear-gradient(to bottom,#f1f1f1 0,#f6f6f6,#fff 100%); overflow: hidden; margin: 0 0 -1px; padding: 12px 0 0 12px;
}
.pr__tabs__li { position: relative; display: inline-block; margin-left: 12px; padding: 12px 24px; background: #f6f6f6; background-image: -webkit-linear-gradient(top,#fcfcfc 0,#f6f6f6 50%,#f0f0f0 50%,#e7e7e7 100%); background-image: linear-gradient(to bottom,#fcfcfc 0,#f6f6f6 50%,#f0f0f0 50%,#e7e7e7 100%); -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: archivo_narrowbold,sans-serif; font-size: 26px; line-height: 100%; text-transform: none; cursor: pointer; float: left;
}
.pr__tabs__li a { color: #636363; text-decoration: none;
}
.pr__tabs__li:first-child { margin: 0;
}
.pr__tabs__li__selected { border-bottom-color: #fff; background: #fff; z-index: 2;
}
.pr__tabs__li__selected a { color: #0053a0;
}
.pr__tabs__content { display: none; position: relative; background: #fff; border-top: 1px solid #d1d1d1; padding: 24px 0 8px; z-index: 1; overflow: hidden;
}
.pr__tabs__content.pr__tabs__content--show { display: block;
}
@media only screen and (max-width:40em) { .pr__tabs__content { padding-top: 0; } .pr__xsell h2 { margin-top: 0; } .pr__tabs { padding-left: 6px; } .pr__tabs__li { margin-left: 6px; padding: 12px 10px; font-size: 24px; }
}
.pr__promo-line { margin: 2px auto 15px; max-width: 1148px; padding: 4px; background: #ed1c24; color: #fff; text-transform: uppercase; word-wrap: break-word;
}
.pr__promo-line>span { line-height: 1; vertical-align: middle;
}
.pr__promo-h1,
.pr__promo-h2 { font-family: screwfix_betabold; font-size: 22px;
}
@media only screen and (max-width:40em) { .pr__promo-line { padding: 3px; } .pr__promo-h1, .pr__promo-h2 { font-size: 14px; }
}
.pr__promo-h1 { color: #fcdf00;
}
.pr__promo-link { font-size: 18px; font-family: screwfix_betaregular;
}
@media only screen and (max-width:40em) { .pr__promo-link { font-size: 12px; }
}
.pr__promo-link a { color: #fff; font-family: screwfix_betabold;
}
.pr__promo-link a span { text-decoration: underline;
}
.pr__promo-text { font-size: 16px; font-family: screwfix_betaregular;
}
@media only screen and (max-width:40em) { .pr__promo-text { font-size: 12px; }
}
.pr__infobox { clear: both; margin: 20px 0; border: 1px solid #ed1c24; padding: 7px; font: italic 700 13px/15px Arial,Helvetica,sans-serif; color: #ed1c24;
}
@media only screen and (max-width:40em) { .pr__infobox { font-size: 11px; line-height: 14px; }
}
.btn-no-video { font-size: 12px; line-height: 14px; color: #ed1c24; vertical-align: top; display: inline-block; padding: 4px 10px; border: 1px solid #d1d1d1; border-radius: 5px; background: #fff;
}
.btn-no-video strong { display: block;
}
.pdp-float-cta { position: fixed; z-index: 99; overflow: hidden; margin: 0 auto; width: 100%; left: 0; right: 0;
}
@media only screen and (min-width:40.063em) { .pdp-float-cta { display: none; top: 0; background: #fff; box-shadow: 0 4px 6px -2px rgba(0,0,0,.2); }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .pdp-float-cta { padding: 0 12px; } .pdp-float-cta .col-btns { min-width: 382px; }
}
.pdp-float-cta.sticky-on { display: block;
}
.pdp-float-cta__container { margin: 0 auto;
}
@media screen and (max-width:1170px) and (min-width:1025px) { .pdp-float-cta__container { max-width: calc(100% - 24px); }
}
.pdp-float-cta__col { vertical-align: middle;
}
@media only screen and (min-width:40.063em) { .pdp-float-cta__container { display: table; table-layout: fixed; margin: 10px auto; width: 100%; } .pdp-float-cta__col { display: table-cell; }
}
@media only screen and (max-width:40em) { .pdp-float-cta { padding: 0; bottom: 0; background: #328d1b; } .pdp-float-cta__col { width: 100%; } .pdp-float-cta .col-price { display: none; }
}
.pdp-float-cta__title { font-family: archivo_narrowbold,sans-serif; font-size: 24px; line-height: 24px; color: #0053a0; text-transform: uppercase; margin: 0; max-height: 48px; overflow: hidden;
}
.pdp-float-cta__title span.sm { font-size: .6em;
}
@media only screen and (max-width:64em) { .pdp-float-cta .col-title { display: none; }
}
@media only screen and (min-width:40.063em) { .pdp-float-cta .col-price { width: 265px; text-align: right; }
}
.pdp-float-cta .pr__discounts { float: none; text-align: left; margin-right: 20px; margin-top: 11px;
}
.pdp-float-cta .pr__price { vertical-align: top; margin-right: 20px;
}
.pdp-float-cta .pr__price .incvat { font-size: 11px; font-family: screwfix_betaregular;
}
.pdp-float-cta .pr__price .pence,
.pdp-float-cta .pr__price .pound { font-size: 26px; top: -3px;
}
.pdp-float-cta .pr__price .price__extra { text-align: left;
}
@media only screen and (min-width:56em) and (max-width:64em) { .pdp-float-cta .col-btns, .pdp-float-cta .col-price { width: 50%; }
}
@media only screen and (min-width:64.063em) { .pdp-float-cta .col-title { padding-right: 20px; } .pdp-float-cta .col-btns { width: 420px; }
}
.pdp-float-cta .pr__btns { height: 101px;
}
@media only screen and (max-width:40em) { .pdp-float-cta .pr__btns { padding: 10px; border: none; } .pdp-float-cta .pr__p { display: none; }
}
@media only screen and (min-width:40.063em) { .pdp-float-cta .pr__btns { border-left: 1px solid #d1d1d1; border-width: 0 0 0 1px; padding: 0 0 0 20px; }
}
.pdp-float-cta .pr__qty { float: left; vertical-align: top; padding: 0; min-width: 50px;
}
.pdp-float-cta .pr__qty label { display: none;
}
.pdp-float-cta .pr__qty input { margin: 0;
}
@media only screen and (min-width:23.437em) and (max-width:40em) { .pdp-float-cta .pr__qty input { padding: 0; height: 36px; margin-top: 1px; }
}
.pdp-float-cta .pr-btns__container { float: right; width: calc(100% - 50px); text-align: right;
}
@media only screen and (min-width:20em) and (max-width:23.43em) { .pdp-float-cta .pr__qty { display: none; } .pdp-float-cta .pr-btns__container { width: 100%; }
}
@media only screen and (min-width:40.063em) { .pdp-float-cta .pr-btns__container div:first-child { padding-left: 16px; }
}
@media only screen and (max-width:40em) { .pdp-float-cta .pr-btns__container div:first-child .btn+p { margin: 10px -104% 10px 0; } .pdp-float-cta .pr-btns__container div:first-child .btn+p strong { position: absolute; top: 17px; left: 0; } .pdp-float-cta .pr-btns__container div:last-child { float: right; }
}
@media only screen and (min-width:23.437em) and (max-width:40em) { .pdp-float-cta .pr-btns__container div:first-child { padding-left: 5px; } .pdp-float-cta .pr-btns__container div:first-child .btn+p { margin-left: -55px; margin-right: calc(-104% - 5px); }
}
@media only screen and (min-width:40.063em) { .pdp-float-cta .pr-btns__container div:last-child { padding-left: 8px; }
}
@media only screen and (max-width:40em) { .pdp-float-cta .pr-btns__container div:last-child .btn+p { margin: 10px 0 10px -104%; }
}
@media only screen and (min-width:23.437em) and (max-width:40em) { .pdp-float-cta .pr-btns__container div:last-child .btn+p { margin-left: calc(-104% - 50px); }
}
.pdp-float-cta .collect-btn-col,
.pdp-float-cta .delivery-btn-col { float: left; width: 50%; vertical-align: top; text-align: left;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .pdp-float-cta .pr__p { font-size: 12px; } .pdp-float-cta .collect-btn-col .btn, .pdp-float-cta .delivery-btn-col .btn { padding-left: 12px; padding-right: 12px; }
}
.pdp-float-cta .collect-btn-col .btn span,
.pdp-float-cta .delivery-btn-col .btn span { vertical-align: top;
}
@media only screen and (max-width:40em) { .pdp-float-cta .collect-btn-col, .pdp-float-cta .delivery-btn-col { width: 49%; } .pdp-float-cta .collect-btn-col ._btn--link, .pdp-float-cta .delivery-btn-col ._btn--link { color: #fff; float: right; } .pdp-float-cta .collect-btn-col .btn--spinner, .pdp-float-cta .delivery-btn-col .btn--spinner { color: transparent; } .pdp-float-cta .collect-btn-col .btn--spinner:before, .pdp-float-cta .delivery-btn-col .btn--spinner:before { color: #fff; position: absolute; left: 50%; margin-left: -9px; font-family: font-awesome-custom; } .pdp-float-cta .collect-btn-col .btn--loading, .pdp-float-cta .delivery-btn-col .btn--loading { color: transparent; } .pdp-float-cta .collect-btn-col .btn--loading:after, .pdp-float-cta .delivery-btn-col .btn--loading:after { color: #fff; right: 50%; margin-right: -9px; } .pdp-float-cta .collect-btn-col .btn span, .pdp-float-cta .delivery-btn-col .btn span { font-size: 12px; } .pdp-float-cta .collect-btn-col .btn+p, .pdp-float-cta .collect-btn-col .btn+p a, .pdp-float-cta .delivery-btn-col .btn+p, .pdp-float-cta .delivery-btn-col .btn+p a { color: #fff; }
}
@media only screen and (min-width:40.063em) { .pdp-float-cta .collect-btn-col .btn span, .pdp-float-cta .delivery-btn-col .btn span { font-size: 13px; } .pdp-float-cta .collect-btn-col .btn+p, .pdp-float-cta .delivery-btn-col .btn+p { display: none; } .pdp-float-cta .col-btns.out-of-stock .btn { text-align: left; }
}
.pdp-float-cta .collect-btn-col .btn--green,
.pdp-float-cta .delivery-btn-col .btn--green { white-space: nowrap;
}
@media only screen and (max-width:40em) { .pdp-float-cta .collect-btn-col .btn--green, .pdp-float-cta .delivery-btn-col .btn--green { padding-left: 10px; padding-right: 10px; } .pdp-float-cta .collect-btn-col .btn--green+p, .pdp-float-cta .delivery-btn-col .btn--green+p { padding-right: 85px; position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; min-height: 17px; } .pdp-float-cta .collect-btn-col .btn--green+p ._btn--link, .pdp-float-cta .delivery-btn-col .btn--green+p ._btn--link { position: absolute; top: 0; right: 0; } .pdp-float-cta .collect-btn-col .btn--disabled, .pdp-float-cta .delivery-btn-col .btn--disabled { color: #fff; }
}
.pdp-float-cta .collect-btn-col .btn--disabled,
.pdp-float-cta .delivery-btn-col .btn--disabled { background: 0 0; border: none; font-size: 16px; padding: 0; height: 38px; display: table-cell; vertical-align: middle;
}
@media only screen and (max-width:40em) { .pdp-float-cta .collect-btn-col { display: block; } .pdp-float-cta .collect-btn-col .btn--disabled { width: 320px; }
}
.pdp-float-cta .col-btns.out-of-stock .pr__qty { display: none;
}
.pdp-float-cta .col-btns.out-of-stock .pr-btns__container { width: 100%;
}
.pdp-float-cta .col-btns.out-of-stock .pr-btns__container div:first-child { padding-left: 0;
}
@media only screen and (max-width:40em) { .pdp-float-cta .col-btns.out-of-stock .pr-btns__container div:first-child .btn+p { margin-left: 0; margin-right: -104%; } .pdp-float-cta .col-btns.out-of-stock .pr-btns__container div:last-child .btn+p { margin-left: -104%; } .pdp-float-cta .col-btns.out-of-stock .pr-btns__container .btn+p strong { display: inline-block; max-width: 20%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
}
@media only screen and (min-width:20em) and (max-width:23.43em) { .pdp-float-cta .col-btns.out-of-stock .pr-btns__container .btn+p strong { max-width: 18%; }
}
.compare-table.tc-nd--table { border: none; margin: 0;
}
.compare-table.tc-nd--table tr td { position: relative; z-index: 1;
}
.compare-table.tc-nd--table tr td:nth-child(2) { background: 0 0;
}
.compare-table.tc-nd--table tr td:first-child { position: relative; background: 0 0; font-weight: 700; border-right: 1px solid #e5e5e5; text-indent: 0; min-width: 235px; max-width: 235px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .compare-table.tc-nd--table tr td:first-child { position: absolute; left: 0; background-color: #fff!important; border-right: 1px solid #e5e5e5; border-top: 1px dashed #d1d1d1; z-index: 2; } .compare-table.tc-nd--table tr td:first-child.ct__tiles__title { position: absolute; border-top-width: 0; }
}
.compare-table.tc-nd--table tr td:first-child.ct__tiles__title { vertical-align: top; min-width: 235px; padding-left: 20px; height: 396px;
}
.compare-table.tc-nd--table tr td:first-child.ct__tiles__title h1 { text-transform: uppercase; font-size: 26px; line-height: 26px;
}
.compare-table.tc-nd--table tr td:first-child.ct__tiles__title a { position: absolute; bottom: 30px; left: 20px;
}
@media only screen and (max-width:40em) { .compare-table.tc-nd--table tr td:first-child.ct__tiles__title { border-right: 0; height: auto; } .compare-table.tc-nd--table tr td:first-child.ct__tiles__title h1 { font-size: 24px; margin: 15px 10px 10px; } .compare-table.tc-nd--table tr td:first-child.ct__tiles__title p { font-weight: 400; margin: 10px; }
}
@media only screen and (max-width:40em) and (max-width:40em) { .compare-table.tc-nd--table tr td:first-child.ct__tiles__title p { margin: 10px 10px 20px; }
}
.compare-table.tc-nd--table tr .ct__title { vertical-align: top; font-size: 24px; text-align: left!important; color: #0053a0; text-transform: uppercase; font-weight: 700; line-height: 32px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .compare-table.tc-nd--table tr .ct__title { font-size: 18px; line-height: 24px; }
}
.compare-table.tc-nd--table tr .ct__tiles,
.compare-table.tc-nd--table tr .ct__title { background: 0 0; min-width: 225px; height: 396px;
}
@media only screen and (max-width:40em) { .compare-table.tc-nd--table tr .ct__tiles, .compare-table.tc-nd--table tr .ct__title { height: auto; } .ct__tiles .icon-cancel, .ct__tiles .icon-problem { display: none; }
}
.compare-table.tc-nd--table tr .ct__tiles,
.compare-table.tc-nd--table tr .ct__tiles__title { border-bottom: 1px solid #e5e5e5;
}
.compare-table.tc-nd--table tr.ct__desc td:first-child,
.compare-table.tc-nd--table tr.ct__values td:first-child { padding-left: 30px;
}
.ct__controls__btm td,
.ct__controls__top td { background: 0 0; border-bottom: 1px solid #e5e5e5; padding-top: 15px; height: 183px;
}
.ct__controls__btm .btn,
.ct__controls__top .btn { margin-bottom: 10px; height: 40px;
}
.ct__controls__btm .fm-input--items[disabled],
.ct__controls__top .fm-input--items[disabled] { margin-bottom: 10px;
}
.ct__tiles .certona-tile .row { margin: 0;
}
.ct__tiles .certona-tile__container { position: relative; width: 100%; box-shadow: 0 0 0 0 transparent; border: 0; z-index: 5; margin: 10px 0 0;
}
.ct__tiles .certona-tile__container * { text-align: left;
}
.trolley-item .trolley-txt,
.trolley-txt { text-align: center;
}
.ct__tiles .certona-tile__container .ct__promo-img { margin-right: 15px;
}
.ct__tiles .certona-tile__container .ct__bulk-savings--header h3 { padding-left: 5px;
}
.ct__tiles .icon-cancel,
.ct__tiles .icon-problem { position: absolute; top: 10px; right: 10px; font-size: 20px; width: 30px; height: 30px; background: 0 0; color: #555; text-decoration: none; z-index: 10;
}
.ct__desc td { vertical-align: top;
}
.ct__foot td { border: 0; height: 80px;
}
.ct__foot td a { margin: 15px 0 15px 20px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .ct--out:after { position: absolute; top: 0; left: 100%; width: 20px; height: 100%; box-shadow: -5px 0 20px rgba(0,0,0,.25); content: ''; z-index: 10; } .ct--in { padding-left: 235px; } .compare-table.tc-nd--table tr td.ct__tiles { height: 396px; } .compare-table.tc-nd--table tr.ct__desc td { border-bottom: 1px solid #e5e5e5; } .compare-table.tc-nd--table tr.ct__desc td:first-child { min-height: 150px; } .compare-table.tc-nd--table tr.ct__controls__btm td:first-child, .compare-table.tc-nd--table tr.ct__controls__top td:first-child { height: 183px; border-right: 1px solid #e5e5e5; border-top-width: 0; top: 396px; border-bottom: 1px solid #e5e5e5; z-index: 3; } .compare-table.tc-nd--table tr.ct__controls__btm td .pr__qty, .compare-table.tc-nd--table tr.ct__controls__top td .pr__qty { float: none; } .compare-table.tc-nd--table tr.ct__controls__btm td { height: 125px; } .compare-table.tc-nd--table tr.ct__controls__btm td:first-child { top: auto; height: 126px; border-top: 1px solid #e5e5e5; }
}
@media only screen and (max-width:40em) { .ct--out:after, .pinned { position: absolute; top: 0; } .ct--out:after { left: 100%; width: 20px; height: 100%; border-radius: 10px 0 0 10px/50% 0 0 50%; content: ''; } .compare--items { margin: 0 -.3em; } .compare-table thead td { display: table-row; } .compare-table tbody, table.responsive td:first-child, table.responsive th:first-child, table.responsive.pinned td { display: none; } table.responsive { margin-bottom: 0; } .pinned { left: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } .pinned table { border-right: none; border-left: none; width: 100%; } .pinned table td, .pinned table th { white-space: nowrap; } .pinned td:last-child { border-bottom: 0; } div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; } div.table-wrapper div.scrollable { margin-left: 35%; overflow: scroll; overflow-y: hidden; } table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
}
.product__row,
.product__rows { position: relative;
}
.title-section { border-bottom: 2px solid #d1d1d1; padding: 4px 0; margin: 20px -4px; overflow: hidden;
}
.title-section h1 { display: inline-block; font-size: 40px; float: left; margin-top: 0; margin-bottom: 20px;
}
@media only screen and (max-width:40em) { .title-section h1 { margin-bottom: 6px; } .title-section__btn-email { width: 100%; }
}
.title-section .title-section__link { display: inline-block; font-family: archivo_narrowbold,sans-serif; font-size: 18px; font-weight: 700; margin: 20px 0 0 30px; float: left;
}
.title-section .title-section__btn { float: right;
}
.title-section__btn,
.title-section__btn-email { min-width: 220px;
}
@media only screen and (min-width:64.063em) { .title-section__btn-email { margin-left: 7px; }
}
.tab-list__title { margin: 16px 0; color: #0053a0; min-height: 20px;
}
.tab-list--text { font-size: 18px; line-height: 22px; margin-bottom: 6px; width: 85%;
}
.tab-list--text .bluebold { color: #0053a0; font-weight: 600;
}
.tab-list--text .need { font-size: 14px; line-height: 17px;
}
.tab-list--text .btn { vertical-align: middle;
}
.indent { padding-left: 10px;
}
.trolley-txt { margin: 12px 0; font-size: 12px; font-weight: 400; line-height: 14px;
}
@media only screen and (max-width:40em) { .tab-list--text { width: 100%; } .trolley-txt { font-size: 11px; }
}
table.open-hrs { font-size: 13px; line-height: 17px;
}
table.open-hrs td { width: 100px;
}
.row.row-pdg--xl { padding-top: 30px; padding-bottom: 35px;
}
@media only screen and (max-width:40em) { .row.row-pdg--xl { padding-top: 0; padding-bottom: 4px; }
}
.row.row-pdg--md { padding-top: 10px; padding-bottom: 35px;
}
@media only screen and (max-width:40em) { .row.row-pdg--md { padding-top: 0; padding-bottom: 4px; }
}
.product__row { padding: 10px; overflow: hidden;
}
.product__row.product__row--trolley { padding: 30px 12px; margin-bottom: 10px; background-image: -webkit-linear-gradient(top,#e1e1e1 0,#f6f6f6 3%); background-image: linear-gradient(to bottom,#e1e1e1 0,#f6f6f6 3%);
}
.product__row.product__row--trolley.product__row--error { background: #fef3f4;
}
@media only screen and (max-width:40em) { .product__row.product__row--trolley { padding: 12px; }
}
.product__row.product__row--quickshop { padding: 30px 12px; margin: 0 0 10px; background-color: #FFF;
}
.product__row .product__thumb { display: inline-block; float: left; border: 1px solid #d1d1d1; margin-left: 20px; max-width: 164px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .product__row .product__thumb { margin-left: 0; }
}
@media only screen and (max-width:40em) { .product__row .product__thumb { margin: 0 12px 15px 0; max-width: 145px; min-width: 79px; }
}
.product__row .product__desc { font-size: 14px; font-weight: 700; line-height: 17px; margin-top: 0; width: 90%;
}
.product__row .product__desc a,
.product__row .product__desc a:hover { text-decoration: none; color: #636363;
}
.product__row .product__desc span { font-size: 10px; font-weight: 400;
}
@media only screen and (max-width:40em) { .product__row .product__desc { font-size: 13px; }
}
.product__row .product__price { font-weight: 700;
}
.product__row .product__error-message { clear: both; color: #ed1c24; font-size: 13px; line-height: 15px; padding-left: 30px; margin-top: 24px;
}
.product__row .product__error-message:before { font-family: font-awesome-custom; font-weight: 400; content: '\e807'; margin-left: -20px; padding-right: 5px;
}
.product__row .product__error-message a { color: #ed1c24;
}
.product__row .product__total__sm { font-size: 18px; font-weight: 700; line-height: 22px;
}
.product__row .product__total { font-size: 24px; font-weight: 700; float: right; line-height: 40px;
}
.product__row .product__offer-met { line-height: 1; text-align: right; margin-top: -10px;
}
.product__row .product__offer-met .product__new-price { color: #ed1c24; text-transform: uppercase; display: block;
}
.product__row .product__discount { color: #0053a0; font-size: 12px; line-height: 14px; clear: both;
}
@media only screen and (max-width:40em) { .product__row .product__discount { font-size: 11px; }
}
.product__row .product__row-actions { list-style: none; padding: 6px 0; margin: 0; overflow: hidden;
}
.product__row .product__row-actions li { float: left;
}
.product__row .product__row-actions li a { font-size: 12px; padding: 0 10px; border-right: 1px solid #d1d1d1; line-height: 15px; color: #222;
}
@media only screen and (max-width:64em) { .product__row .product__desc { width: 100%; } .product__row .product__row-actions li a { padding: 0 6px; } .product__row .product__row-actions li a.update.btn--disabled { padding-right: 6px!important; }
}
.product__row .product__row-actions li a.remove,
.product__row .product__row-actions li a.update { padding-left: 0;
}
.product__row .product__row-actions li a.update.btn--disabled { background: 0 0; color: #999;
}
.saved__list .product__row .product__row-actions li a.remove { border-right-width: 0;
}
.product__row .product__row-actions li a.move { padding-right: 0; border: 0;
}
.product__row input[type=number] { height: 30px; padding: 0 .68em;
}
.product__row .border-top-dotted { padding-top: 0;
}
.product__hazardous { background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/gfx/hazardous.png?yocs=n_s_) no-repeat; padding: 2px 0 0 30px;
}
.trolley--split { margin-top: 20px;
}
.trolley--split .fm-item--radio label { font-weight: 700; font-size: 14px;
}
.trolley--split .fm-item--radio:first-child { margin: 0 0 10px;
}
.trolley--split a,
.trolley--split a:focus,
.trolley--split a:hover { color: #636363;
}
.bulk-savings { padding: 6px 0 12px; overflow: hidden;
}
.saved__list .bulk-savings { padding: 30px 0 0;
}
.bulk-saving-popup .bulk-savings { border: 2px solid #ed1c24; padding: 0; margin-bottom: 20px;
}
.bulk-saving-popup .bulk-savings_missed-offer { margin-bottom: 40px;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .bulk-savings_missed-offer { margin-bottom: 30px; } .bulk-saving-popup .bulk-savings_mixed-product { position: relative; margin-top: 0; margin-bottom: 95px; overflow: visible; }
}
.row.missed-offer { padding: 0 0 8px;
}
.bulk-savings--header { display: block; overflow: hidden; background-color: #ed1c24; padding: 0 4px;
}
.bulk-savings--header .bulk-savings__message,
.bulk-savings--header h3 { margin: 0; padding: 0; color: #fee502; font-family: screwfix_betabold; font-size: 18px; text-transform: uppercase; line-height: 25px; text-align: center;
}
@media only screen and (max-width:40em) { .bulk-savings--header .bulk-savings__message, .bulk-savings--header h3 { font-size: 14px; line-height: 20px; }
}
.saved__list .bulk-savings--header .bulk-savings__message,
.saved__list .bulk-savings--header h3 { float: left; display: inline-block; text-align: left;
}
.bulk-saving-popup .bulk-savings--header .bulk-savings__message,
.bulk-saving-popup .bulk-savings--header h3 { font-size: 24px; line-height: 1; padding: 7px 0 9px;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .bulk-savings--header .bulk-savings__message, .bulk-saving-popup .bulk-savings--header h3 { font-size: 14px; padding: 3px 0 5px; }
}
.missed-offer .bulk-savings--header .bulk-savings__message,
.missed-offer .bulk-savings--header h3 { line-height: 16px; padding: 4px 0;
}
@media only screen and (max-width:40em) { .missed-offer .bulk-savings--header .bulk-savings__message, .missed-offer .bulk-savings--header h3 { padding: 3px 0; line-height: 13px; }
}
.missed-offer .bulk-savings--header .bulk-savings__message .ab,
.missed-offer .bulk-savings--header .bulk-savings__message .ae,
.missed-offer .bulk-savings--header h3 .ab,
.missed-offer .bulk-savings--header h3 .ae { line-height: 17px;
}
.missed-offer .bulk-savings--header .bulk-savings__message .ae,
.missed-offer .bulk-savings--header h3 .ae { font-family: screwfix_betaregular; text-transform: none; font-size: 14px;
}
.missed-offer .bulk-savings--header .bulk-savings__message .ae a,
.missed-offer .bulk-savings--header h3 .ae a { font-family: screwfix_betabold; text-transform: uppercase; color: #fff;
}
@media only screen and (min-width:40.063em) { .missed-offer .bulk-savings--header .bulk-savings__message .long-promo, .missed-offer .bulk-savings--header h3 .long-promo { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .missed-offer .bulk-savings--header .bulk-savings__message .long-promo.w-full, .missed-offer .bulk-savings--header h3 .long-promo.w-full { max-width: 98%; } .missed-offer .bulk-savings--header .bulk-savings__message .long-promo.w-calc_s, .missed-offer .bulk-savings--header h3 .long-promo.w-calc_s { max-width: calc(100% - 220px); } .missed-offer .bulk-savings--header .bulk-savings__message .long-promo.w-calc_m, .missed-offer .bulk-savings--header h3 .long-promo.w-calc_m { max-width: calc(100% - 200px); } .missed-offer .bulk-savings--header .bulk-savings__message .long-promo.w-calc_l, .missed-offer .bulk-savings--header h3 .long-promo.w-calc_l { max-width: calc(100% - 87px); }
}
@media only screen and (max-width:40em) { .missed-offer .bulk-savings--header .bulk-savings__message .ab, .missed-offer .bulk-savings--header .bulk-savings__message .ae, .missed-offer .bulk-savings--header h3 .ab, .missed-offer .bulk-savings--header h3 .ae { line-height: 14px; display: inline; } .missed-offer .bulk-savings--header .bulk-savings__message .ae, .missed-offer .bulk-savings--header h3 .ae { font-size: 12px; } .missed-offer .bulk-savings--header .bulk-savings__message .long-promo, .missed-offer .bulk-savings--header h3 .long-promo { word-wrap: break-word; } .bulk-savings--header .bulk-savings__message, .bulk-savings--header h3 { font-size: 14px; }
}
.bulk-savings--header .bulk-savings__message .ab,
.bulk-savings--header .bulk-savings__message .ae,
.bulk-savings--header h3 .ab,
.bulk-savings--header h3 .ae { display: inline-block; vertical-align: middle;
}
.bulk-savings--header .bulk-savings__message .ab_missed-offer,
.bulk-savings--header h3 .ab_missed-offer { color: #fff; background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/gfx/hazardous.png?yocs=n_s_) 0 -1px/17px 17px no-repeat; padding: 0 0 0 23px;
}
@media only screen and (max-width:40em) { .bulk-savings--header .bulk-savings__message .ab_missed-offer, .bulk-savings--header h3 .ab_missed-offer { background-size: 14px 14px; padding-left: 20px; background-position: left 1px; }
}
.bulk-savings--header .bulk-savings__message .ae,
.bulk-savings--header h3 .ae { color: #fff;
}
.bulk-savings--header .bulk-savings--link { float: right; font-size: 12px; color: #fff; text-decoration: none; display: inline-block; line-height: 25px;
}
.js--bulk-savings-table { display: none;
}
.tbl--bulk-savings { display: table; border-top: 1px solid #fff; font-size: 11px; width: 100.5%;
}
.bulk-saving-popup .tbl--bulk-savings { border: 2px solid #fff; width: 100%;
}
.tbl--bulk-savings th { color: #fff; background-color: #636363; border: 1px solid #fff; border-left-width: 0; padding: 3px 0;
}
.bulk-saving-popup .tbl--bulk-savings th { font-size: 13px; line-height: 2;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .tbl--bulk-savings th { font-size: 11px; line-height: normal; }
}
.tbl--bulk-savings td { background-color: #e9e9e9; border-right: 1px solid #fff; padding: 3px 0; text-align: center; font-size: 11px; line-height: 1.5;
}
.tbl--bulk-savings td em { font-size: 10px;
}
.tbl--bulk-savings td:first-child { padding-left: 15px; padding-right: 15px;
}
.tbl--bulk-savings td.has-icon { padding-left: 15px; padding-right: 0;
}
.bulk-saving-popup .tbl--bulk-savings td { font-size: 12px; padding: 5px 0;
}
.bulk-saving-popup .tbl--bulk-savings td.has-icon { padding-left: 15px; padding-right: 0;
}
@media only screen and (max-width:40em) { .bulk-saving-popup .tbl--bulk-savings td { font-size: 11px; }
}
.tbl--bulk-savings tr td:last-child,
.tbl--bulk-savings tr th:last-child { border-right-width: 0;
}
.border-top-dotted { margin-top: 20px; border-top: 1px dashed #d1d1d1;
}
.promo-code--container { display: inline-block; padding: 20px 42px; width: 100%;
}
.lister__items,
.ls__banner { width: auto; overflow: hidden;
}
.promo-code--container .label--optional { color: #636363; font-size: 18px;
}
.promo-code--container input { margin: 6px 0 12px;
}
.promo-code--container .btn--sm { padding: 6px 24px 7px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .promo-code--container { padding: 20px; }
}
@media only screen and (max-width:40em) { .promo-code--container { padding: 0; }
}
.promo-code--container .promo--applied,
.promo-code--container .promo--error-message { background: #fef3f4; clear: both; color: #ed1c24; font-size: 13px; line-height: 15px; padding: 12px 12px 12px 30px; margin-top: 6px;
}
.promo-code--container .promo--applied:before,
.promo-code--container .promo--error-message:before { font-family: font-awesome-custom; font-weight: 400; content: '\e807'; margin-left: -20px; padding-right: 5px;
}
.lii__title,
.lii_price h4 { font-family: Arial,Helvetica,sans-serif;
}
.promo-code--container .promo--applied { background: 0 0; color: #636363; font-weight: 700; padding: 6px 12px 0 30px; margin-bottom: 6px;
}
.promo-code--container .promo--applied:before { content: '\e801'; color: green;
}
.saved__list { padding: 12px 12px 0;
}
.saved__list .border-top-dotted { padding-top: 18px;
}
.sl__add--btns { margin: 15px 0; overflow: hidden;
}
@media only screen and (max-width:40em) { .sl__add--btns { margin: 15px -.3em 6px; } .sl__add--btns.product__row { padding: 3px 0 0; } .sl__add--btns.product__row .btn--add { margin-bottom: 10px; }
}
.sl__add--btns.pg--btm { border-top: 2px solid #d1d1d1; padding: 20px 0;
}
.remove-item { font-size: 13px; padding: 0 12px; line-height: 15px; color: #222; text-align: center;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .tab-list--content { border-top: 1px solid #d1d1d1; padding: 8px 24px 16px; z-index: 1; overflow: hidden; } .tab-list__title { position: relative; color: #0053a0; min-height: 20px; } .border--dots { border: 0; } .trolley-item--product-img { margin-right: 6px; margin-left: 10px; } .trolley-item--actions li { padding: 0 6px; font-size: 12px; }
}
@media only screen and (max-width:40em) { .tab-list { padding-left: 0; margin: 0; } .tab-list--item { padding: 0 0 6px; font-size: 22px; margin: 0 0 0 30px; } .tab-list--item__selected { border-bottom-width: 3px; } .tab-list--content { padding: 24px 0 8px; } .tab-list--text { font-size: 14px; font-weight: 700; line-height: 16px; } .tab-list--text .need { display: block; padding-bottom: 3px; } .product__total__sm, .title-section .title-section__btn { display: none; } .tab-list--text .sm-txt { font-size: 13px; font-weight: 400; } .tab-list__title { position: relative; } .tab-list__title .item-list__title--type img { margin-top: -20px; margin-bottom: 5px; margin-left: 10px; } .tab-list__title .item-list__title--place { position: absolute; top: 20px; left: 45px; } .title-section { margin: 4px 0 12px; } .title-section h1 { font-size: 22px; float: left; margin-top: 11px; } .title-section .title-section__link { font-size: 16px; margin: 12px 6px 0 0; float: right; }
}
.ls__banner { position: relative; margin: 0 -.3em; max-width: none;
}
@media only screen and (max-width:64em) { .ls__banner--container { display: none; } .ls__banner { margin: 0 -.3em; }
}
.ls__banner.cloned { display: block;
}
.ls__banner.cloned.cloned--old { margin: 0 -.6em 12px 0;
}
@media only screen and (max-width:40em) { .ls__banner.cloned.cloned--old { margin: 0 -.6em 12px; }
}
.ls__banner--old .ls__banner { margin: 0 -.6em 12px 0;
}
@media only screen and (max-width:40em) { .ls__banner--old .ls__banner { margin: 0 -.6em 12px; }
}
.sticky-right { position: static;
}
.lii,
.lii__title,
.lii_bullets,
.lii_head,
.lister__items { position: relative;
}
.lister__items { margin: 0 -.6em 0 0; max-width: 902px; transition: .5s;
}
@media only screen and (max-width:40em) { .lister__items { margin: 0 -.6em; }
}
.lister__items h2.underline { padding-left: 6px;
}
.lister__items .sl__semi { margin-right: 2px;
}
.lii { height: 380px; margin-bottom: 12px; padding: 12px 12px 0; border: 1px solid #d1d1d1; background-color: #FFF; box-shadow: 0 4px 6px -2px rgba(0,0,0,.2);
}
@media only screen and (max-width:64em) { .lii { height: auto; } .in-the-basket { left: 0; right: 0; }
}
.saved__list .lii { height: 345px;
}
@media only screen and (max-width:40em) { .lister__items .sl__semi { margin-right: 0; } .lii { width: 100%; padding: 12px 12px 10px; overflow: hidden; } .saved__list .lii { height: auto; }
}
.lii_head { width: 61%; float: right; margin: 12px 0;
}
.lii_head .pr__view { display: inline-block; font-size: 11px; line-height: 15px;
}
@media only screen and (max-width:40em) { .lii_head { width: 100%; float: none; overflow: hidden; margin-top: 0; } .lii_head a { font-size: 12px; line-height: 13px; } .lii__compare, .lii__remove { display: none; }
}
.lii__l { width: 33%; float: left;
}
.lii__compare { height: 66px;
}
.lii__compare,
.lii__remove { position: relative; margin: 6px 0 18px; color: #b4b4b4;
}
.lii__compare .fm-item--checkbox,
.lii__remove .fm-item--checkbox { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 6px 0 4px; margin-bottom: 8px;
}
.lii__compare .btn,
.lii__remove .btn { background: #1867b1; background-image: -webkit-linear-gradient(top,#186ab8 0,#1867b1 50%,#004c92 50%,#004587 100%); background-image: linear-gradient(to bottom,#186ab8 0,#1867b1 50%,#004c92 50%,#004587 100%); border-color: #255d92; color: #fff;
}
.lii__compare label,
.lii__remove label { font-size: 11px; text-transform: uppercase; margin-left: 4px; margin-bottom: 2px;
}
.lii__remove { margin-top: 36px; text-align: center;
}
.lii__remove a { font-size: 13px; color: #b4b4b4;
}
.lii__r { width: 61%; float: right;
}
.lii__title { font-size: 14px; color: #636363; line-height: 16px; margin: 0 0 6px; float: left;
}
.lii__title a { color: #636363; text-decoration: none; font-weight: 700;
}
.lii__title a:focus,
.lii__title a:hover { text-decoration: underline; color: #636363;
}
.lii__title span { font-size: 11px;
}
.lii__offer .lii__title { width: 75%;
}
.lii__offer--flag { float: right; margin: 0;
}
.lii__rating { display: block; float: left; clear: both; padding: 8px 0;
}
a.lii__bullets--wrp { color: inherit; text-decoration: none; height: 100px; overflow: hidden;
}
a.lii__bullets--wrp:hover { color: inherit;
}
.lii_bullets { margin: 0 0 10px 15px; padding: 0; font-size: 13px; line-height: 18px;
}
.lii_bullets li { font-size: 13px; line-height: 15px; margin-bottom: 6px;
}
.lii__btm { position: absolute; bottom: 0; margin-right: 12px; clear: both; overflow: hidden; padding: 12px 0 0; border-top: 1px solid #d1d1d1;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .lii__btm { position: relative; bottom: 0; margin-right: 12px; width: 100%; }
}
@media only screen and (max-width:40em) { .lii_bullets li { font-size: 11px; line-height: 13px; } .lii__btm { position: relative; width: 100%; margin: 18px 0 0; padding: 6px 0; }
}
.lii__btm--l { width: 49%; float: left; height: 56px;
}
@media only screen and (max-width:40em) { .lii__btm--l { margin-right: 0; height: 36px; }
}
.lii__btm--r { width: 49%; float: right; height: 56px;
}
.lii_price { float: right;
}
.lii__quantity,
.lii_price .lii__vat,
.lii_price h4 { float: left; display: inline-block;
}
.lii_price h4 { font-size: 30px; font-weight: 700; margin: 7px 6px 15px 0; letter-spacing: -1px;
}
@media only screen and (max-width:40em) { .lii__btm--r { height: 36px; } .lii_price h4 { font-size: 26px; }
}
.lii_price .lii__vat { position: relative; width: 22px; font-size: 10px; line-height: 10px; text-transform: uppercase; padding-top: 12px;
}
.lii__quantity { margin: 0 0 0 3px;
}
.lii__quantity .update { float: right; padding: 12px 0 0 12px; font-size: 13px; color: #636363;
}
.lii__quantity .update.btn--disabled { background: 0 0; padding-right: 0!important;
}
.lii__discounts { display: inline-block; float: left; margin: 10px 0 10px 18px;
}
@media only screen and (max-width:40em) { .lii__discounts { float: left; margin-left: 5px; }
}
.lii__save,
.lii__was { display: block; font-size: 11px; line-height: 11px;
}
.lii__save { color: #d0030b;
}
.thumb__link--sm { display: block; max-width: 136px; height: auto; margin: 0 auto;
}
img.thumb__img--sm { max-width: 136px;
}
@media only screen and (max-width:40em) { img.thumb__img--sm { width: 100%; margin-bottom: 12px; }
}
.del__disclaimer { margin: 10px 0 20px;
}
@media only screen and (max-width:40em) { .lii__btm--btns { width: 49%; margin-top: 10px; } .lii__quantity { margin-left: 0; } .lii__quantity .fm-input--items { padding: 6px 2px 4px; width: 33px!important; height: auto; margin-top: 5px; } .lii__discounts { max-width: calc(100% - 40px); } .lii__discounts span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.saved__list { margin: 0 -6px;
}
.cat-link { text-align: center; text-decoration: none; color: #222; padding: 10px;
}
.cat-link img { width: 90%; margin: auto;
}
.h1wrapper { margin-top: 22px; margin-bottom: 16px;
}
.h1wrapper__h1-special { display: inline; margin-right: 4px;
}
span.h1wrapper__title-category-itemfound { color: #0053a0; display: inline-block; font-family: archivo_narrowbold,sans-serif; font-weight: 400; margin-top: 2px;
}
.in-the-basket .lii__btm--btns,
.in-the-basket .lii__btm--l .lii__quantity,
.lii__btm--upd { display: none;
}
.search__term { color: #636363;
}
@media only screen and (min-width:40.063em) { .sticky, .sticky-right-column { position: sticky; top: 0; } .sticky-sidebar__container .ls__banner--container { float: none; } .sticky-sidebar { will-change: min-height; float: left; } .sticky-sidebar__inner { transform: translate(0,0); transform: translate3d(0,0,0); will-change: position,transform; } .sticky-sidebar__inner .ln__col { margin-right: .3em; margin-left: -.3em; } .sticky-right-column { float: none; } .invisible-scroll { overflow: hidden; } .invisible-scroll__inner { width: calc(100% + 17px); overflow-y: scroll; max-height: 100vh; } .invisible-scroll .ln__col { margin-left: 0; } .invisible-scroll .scroll-me { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; opacity: .5; background: #999; font-size: 10px; color: #fff; font-weight: 700; text-align: center; }
}
.in-the-basket { margin: 0;
}
@media only screen and (min-width:64.063em) { .in-the-basket { left: 12px; right: 12px; bottom: 15px; }
}
@media only screen and (max-width:40em) { .in-the-basket .lii__discounts { margin-left: 0; } .in-the-basket .lii__btm--upd { margin-top: 47px; }
}
@media only screen and (min-width:40.063em) { .in-the-basket .lii__discounts { margin-left: 12px; }
}
.in-the-basket .lii__btm--upd { display: block; position: relative; clear: both; padding: 4px; background: #f2fde3;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .in-the-basket .lii__btm--upd { margin-bottom: 12px; }
}
@media only screen and (max-width:64em) { .in-the-basket .lii__btm--upd .btn--less, .in-the-basket .lii__btm--upd .btn--more, .in-the-basket .lii__btm--upd .fm-input--items { height: 34px; } .in-the-basket .lii__btm--upd .fm-input--items { vertical-align: top; }
}
.in-the-basket .lii__btm--upd .fm-input--items { width: 58px!important; margin: 0; padding: 8px 0; font-size: 14px; font-weight: 400; vertical-align: middle; line-height: 16px;
}
.in-the-basket .lii__btm--upd .btn--less,
.in-the-basket .lii__btm--upd .btn--more { display: inline-block; vertical-align: middle; padding: 7px 12px; cursor: pointer; font-family: Arial,Helvetica,sans-serif; font-size: 18px;
}
.in-the-basket .lii__btm--upd .btn--less { border-radius: 5px 0 0 5px;
}
.in-the-basket .lii__btm--upd .btn--more { position: absolute; left: 93px; border-radius: 0 5px 5px 0;
}
.in-the-basket .lii__btm--upd .btn--update { display: none; vertical-align: middle; padding: 7px 20px; cursor: pointer; font-size: 18px; border-radius: 0 5px 5px 0;
}
.in-the-basket .lii__btm--upd .btn--update,
.in-the-basket .lii__btm--upd .fm-input--items { margin-left: -4.5px;
}
.in-the-basket .lii__btm--upd.mode-focus .btn--more { display: none;
}
.in-the-basket .lii__btm--upd.mode-focus .btn--less { visibility: hidden; width: 0; padding: 0; margin: 0; border: 0;
}
.in-the-basket .lii__btm--upd.mode-focus .btn--update { display: inline-block;
}
.in-the-basket .lii__btm--upd.mode-focus .item-basket-status { width: calc(100% - 155px); margin-left: 0;
}
.in-the-basket .item-basket-status { display: inline-block; width: calc(100% - 130px); margin-left: 35px; vertical-align: middle; color: #10701d; text-align: center; font-weight: 700; line-height: 16px;
}
@media only screen and (min-width:40.063em) { .in-the-basket .item-basket-status { font-size: 14px; }
}
.in-the-basket .item-basket-status a { display: inline-block; padding: 0 .3em; white-space: nowrap; font-weight: 400;
}
.false-hide { width: 0; padding: 0; margin: 0; border: 0;
}
.account--wrp { display: block; width: 100%; padding: 40px 30px 20px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .account--wrp { padding: 30px 10px 10px; } .account--wrp.add-btm-pad { overflow: hidden; padding: 30px 10px 20px; }
}
@media only screen and (max-width:40em) { .in-the-basket .item-basket-status { font-size: 12px; } .account--wrp { padding: 20px 0 0; }
}
.account--wrp>.item-list--plain { padding-top: 0; padding-bottom: 0; margin-top: -15px;
}
@media only screen and (max-width:40em) { .account--wrp>.item-list--plain { margin-top: 0; margin-bottom: -5px; }
}
.account--wrp .tc-nd--table { table-layout: fixed; width: 100%;
}
.account--wrp .tc-nd--table th:first-child { width: auto; text-transform: none;
}
.account--wrp .tc-nd--table td { word-wrap: break-word; width: 15%;
}
.account--wrp p.initial { margin-bottom: 30px;
}
@media only screen and (max-width:40em) { .account--wrp p.initial { margin-bottom: 20px; }
}
@media only screen and (max-width:64em) { .account--wrp .tc-nd--table, .account--wrp tbody, .account--wrp td, .account--wrp th, .account--wrp thead, .account--wrp tr { display: block; } .account--wrp .tc-nd--table thead tr { position: absolute; top: -9999px; left: -9999px; } .account--wrp .tc-nd--table tr { border-bottom: 1px solid #d1d1d1; } .account--wrp .tc-nd--table tr:nth-child(odd) { background: #f6f6f6; } .account--wrp .tc-nd--table td { background: 0 0; position: relative; padding-left: 35%; width: auto; text-align: left; }
}
@media only screen and (max-width:64em) and (max-width:40em) { .account--wrp .tc-nd--table.first { margin-top: 25px; } .account--wrp .tc-nd--table td { padding-left: 45%; }
}
@media only screen and (max-width:64em) { .account--wrp .tc-nd--table td:before { position: absolute; top: 0; left: 0; width: 35%; padding: 6px; white-space: nowrap; font-weight: 700; background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/gfx/stupid-little-dividing-line-for-stupid-tables.png?yocs=n_s_) 95% 50% no-repeat; content: attr(data-label); } .account--wrp .tc-nd--table td:nth-of-type(2):before { color: #0053a0; } .account--wrp .tc-nd--table td:first-child { text-indent: 0; font-weight: 400; } .account--wrp .tc-nd--table td:last-child { border: 0; }
}
@media only screen and (max-width:64em) and (max-width:40em) { .account--wrp .tc-nd--table td:before { width: 45%; }
}
.account--wrp .splitlist li { word-wrap: break-word; line-height: normal;
}
.account--wrp .fm__title--link { margin-top: 0;
}
.account--wrp .fm-item p.agree { font-size: 11px; margin-top: 15px;
}
@media only screen and (max-width:64em) { .account--wrp .fm-item { padding-left: 0; padding-right: 0; } .account--wrp .fm-item p.agree { margin-top: -8px; text-align: center; }
}
.account--wrp .fm-item.fm-item--last { padding-bottom: 10px;
}
.account--wrp .il { margin: 0; padding: 0;
}
.account--wrp .il li { padding-right: 50px;
}
.account--wrp .il li:last-child { padding-right: 0;
}
.account--wrp .btn--add { padding-right: 24px;
}
.account--wrp hr.fm-hr--dashed { margin-top: 40px; margin-bottom: 50px;
}
@media only screen and (max-width:40em) { .account--wrp .btn--add { padding-right: 12px; padding-left: 12px; } .account--wrp hr.fm-hr--dashed { margin-top: 15px; margin-bottom: 30px; }
}
.account--wrp .fm-row { margin: 0 0 15px;
}
@media only screen and (max-width:40em) { .account--wrp .fm-row { margin: 0; } .account--wrp .fm-row .sm-24.cols { padding: 0; }
}
.account--wrp .fm-minor+.fm-row-action { margin-top: 0;
}
.account--wrp .fm-row-action { margin-bottom: 0; margin-top: 35px;
}
.account--wrp .fm-row-action .fm-row { margin-top: 15px;
}
@media only screen and (max-width:40em) { .account--wrp .fm-row-action { margin-top: 15px; } .account--wrp .fm-row-action .btn { margin-bottom: 15px; } .account--wrp .fm-pad { padding-bottom: 10px; }
}
@media only screen and (max-width:64em) { .account--wrp .fm-row-action { padding-top: 8px; } .account--wrp .fm-row-action .fm-row { margin-top: 15px; } .account--wrp .md-fill { width: 100%; }
}
.account--wrp .fm-address-input { padding-top: 20px;
}
.account--wrp .fm-address-input .fm-pad--multi-line { margin: 0;
}
.account--wrp .promo-code--container { padding: 0 42px 10px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .account--wrp .promo-code--container { padding: 0 20px 10px; }
}
@media only screen and (max-width:40em) { .account--wrp .promo-code--container { padding: 0; } .account--wrp .multi-buttons .btn { margin-bottom: 10px; }
}
.account--wrp .js--show-details { display: none;
}
@media only screen and (min-width:40.063em) { .account--wrp .btn--new-thing { padding-top: 46px; padding-bottom: 46px; }
}
@media only screen and (min-width:40.063em) and (max-width:40em) { .account--wrp .btn--new-thing { padding-top: 18px; padding-bottom: 18px; }
}
.account--wrp.add-btm-pad { overflow: hidden;
}
.account--wrp h2.label { font-size: 18px;
}
@media only screen and (max-width:40em) { .account--wrp h2.label { font-size: 16px; }
}
.acc__default-card,
.acc__saved-card { padding: 20px 0;
}
.acc__default-card h2.fm__title,
.acc__saved-card h2.fm__title { text-transform: uppercase; font-size: 18px;
}
.acc__default-card .btn,
.acc__saved-card .btn { margin-bottom: 10px;
}
.acc__saved-card { border-bottom: 1px dotted #d1d1d1; padding-top: 30px; padding-bottom: 40px; margin-bottom: 20px;
}
.acc__saved-card:first-of-type { padding-top: 10px;
}
@media only screen and (max-width:40em) { .acc__default-card h2.fm__title, .acc__saved-card h2.fm__title { font-size: 16px; } .acc__default-card .btn.btn--saved-card, .acc__default-card p:last-child, .acc__saved-card .btn.btn--saved-card, .acc__saved-card p:last-child { margin-bottom: 20px; } .acc__saved-card { padding-bottom: 20px; }
}
.account__key--acc { border: 1px solid #d1d1d1; background-color: #fff; padding: 9px; overflow: hidden; margin-bottom: 12px;
}
.account__key--acc.key--full { margin-right: -4px; margin-left: -4px;
}
.account__key--acc .account__key--acc-bg { background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/gfx/bg-key-acc.jpg?yocs=n_s_) 100% 100% no-repeat; padding: 20px 30px 10px;
}
.account__key--acc .title-key { font-family: archivo_narrowbold,sans-serif; font-size: 18px; font-weight: 700; line-height: 20px; margin-bottom: 10px;
}
.account__key--acc .title-key,
.account__key--acc p { color: #636363; width: 75%;
}
@media only screen and (max-width:40em) { .account__key--acc .title-key, .account__key--acc p { width: 100%; } .account__key--acc { border: 0; background: 0 0; padding: 6px; } .account__key--acc .account__key--acc-bg { background: 0 0; padding: 0; }
}
.order-history__search-utils,
.order-history__search-utils+.order-history-table__row { border-top: 1px solid #d1d1d1;
}
.order-history__search-utils { padding: 10px 0; text-align: left; background: #fbfbfb;
}
.order-history__search-utils+.md-17 { margin-top: 15px;
}
.account--wrp .order-history__search-utils+.infobox { margin-top: 30px; margin-bottom: 35px;
}
@media only screen and (max-width:40em) { .account--wrp .order-history__search-utils+.infobox { margin: 25px 0; }
}
.order-history__search-utils~.text-right { margin-top: 30px;
}
@media only screen and (max-width:40em) { .order-history__search-utils~.text-right { margin-top: 25px; }
}
.order-history__search-utils+.tc-nd--table.first { margin-top: 0; margin-bottom: 15px;
}
.account--wrp .infobox:last-child,
.order-history__pagination .pagination { margin-bottom: 0;
}
@media only screen and (min-width:64.063em) { .order-history__filters { width: 78%; padding-left: 20px; border-right: 1px solid #d1d1d1; display: inline-block; }
}
@media only screen and (max-width:64em) { .order-history__search-utils { padding-bottom: 0; } .order-history__filters { width: 100%; border-bottom: 1px solid #d1d1d1; padding-bottom: 10px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .order-history__filters { text-align: center; }
}
@media only screen and (max-width:40em) { .order-history__filters { padding-left: 10px; }
}
.order-history__filters label { text-transform: none; text-align: left; font-size: 16px;
}
.order-history-table__row .order-history-table__price-col,
.order-history-table__secondary-col { text-align: center;
}
.order-history__filters input { padding: 7px 5px 5px; margin: 0; width: 20%; min-width: 85px; font-size: 14px; border: 1px solid #d1d1d1; height: auto; vertical-align: bottom;
}
@media only screen and (max-width:30em) { .order-history__filters label { font-size: 14px; } .order-history__filters input { font-size: 12px; padding: 7px 0 5px; text-align: center; min-width: 70px; }
}
.order-history__filters input+label { margin-left: 10px;
}
@media only screen and (max-width:20em) { .order-history__filters label span { display: none; } .order-history__filters input+label { margin-left: 5px; }
}
.order-history__filters button { width: 15%; padding-top: 5px; padding-bottom: 6px; margin-left: 10px; min-width: 71px; vertical-align: bottom;
}
@media only screen and (max-width:30em) { .order-history__filters button { padding-top: 4px; padding-bottom: 5px; min-width: 60px; }
}
@media only screen and (max-width:20em) { .order-history__filters button { margin-left: 5px; }
}
.order-history__select-all { padding: 0; margin: 0;
}
@media only screen and (min-width:64.063em) { .order-history__select-all { display: inline-block; padding-left: 25px; vertical-align: middle; }
}
.order-history__select-all label { font-weight: 700;
}
.order-history__select-all.hide { display: none;
}
.order-history__pagination { display: inline-block; width: 30%; vertical-align: middle;
}
@media only screen and (max-width:64em) { .order-history__select-all { padding: 4px 0; background: #f6f6f6; text-align: center; } .order-history__select-all label { margin-bottom: 0; } .order-history__pagination { display: none; }
}
.account--wrp .infobox { margin-top: 0;
}
.nbr { white-space: nowrap;
}
#ui-datepicker-div { font-size: 80%; line-height: 20px; border-radius: 0;
}
#ui-datepicker-div>* { border-radius: 0;
}
#ui-datepicker-div .ui-datepicker-header { background: #0053a0; color: #fff;
}
#ui-datepicker-div .ui-datepicker-calendar thead { color: #0053a0;
}
@media only screen and (max-width:40em) { #ui-datepicker-div { font-size: 12px; line-height: 16px; } #ui-datepicker-div th { padding: 0; }
}
#ui-datepicker-div .ui-state-default,
#ui-datepicker-div .ui-widget-content .ui-state-default,
#ui-datepicker-div .ui-widget-header .ui-state-default { background: #fff;
}
#ui-datepicker-div .ui-datepicker-next-hover,
#ui-datepicker-div .ui-datepicker-prev-hover { top: 2px; border-width: 0; background: 0 0;
}
#ui-datepicker-div .ui-datepicker-next-hover .ui-icon,
#ui-datepicker-div .ui-datepicker-prev-hover .ui-icon { background-image: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/css/images/ui-icons_d8e7f3_256x240.png?yocs=n_s_);
}
#ui-datepicker-div .ui-datepicker-next-hover { right: 2px;
}
#ui-datepicker-div .ui-datepicker-prev-hover { left: 2px;
}
#ui-datepicker-div .ui-state-default.ui-state-hover { background: #f6f6f6;
}
#ui-datepicker-div .ui-state-default.ui-state-highlight { color: #0053a0; font-weight: 700; background: #fff; border-color: #d3d3d3;
}
#ui-datepicker-div .ui-state-default.ui-state-highlight.ui-state-hover { border-color: #999; background: #f6f6f6;
}
#ui-datepicker-div .ui-state-default.ui-state-active,
#ui-datepicker-div .ui-state-default.ui-state-active.ui-state-highlight { background: #0053a0; color: #fff;
}
.order-history-table__row { overflow: hidden; position: relative; padding: 10px 0; border-bottom: 1px solid #d1d1d1; cursor: default;
}
.order-history-table__row>div { float: left; vertical-align: top; padding: 10px; min-height: 100px;
}
.order-history-table__row+.order-history__search-utils { border-bottom: 1px solid #d1d1d1; border-top-width: 0;
}
.order-history-table__row .order-history-table__main-col { font-family: archivo_narrowbold,sans-serif; color: #636363;
}
@media only screen and (min-width:64.063em) { .order-history-table__row .order-history-table__main-col { width: 28%; border-right: 1px solid #d1d1d1; padding-left: 20px; }
}
@media only screen and (max-width:64em) { .order-history-table__row .order-history-table__main-col { width: 100%; clear: both; }
}
.order-history-table__row .order-history-table__main-col p { font-size: 18px; margin-bottom: 8px;
}
.order-history-table__row .order-history-table__main-col p strong { color: #0053a0;
}
@media only screen and (max-width:40em) { .order-history-table__row>div { min-height: unset; } .order-history-table__row:nth-child(odd) { background: #fbfbfb; } .order-history-table__row .order-history-table__main-col p { font-size: 16px; margin-bottom: 2px; }
}
.order-history-table__row .order-history-table__main-col>strong { font-size: 26px;
}
@media only screen and (min-width:64.063em) { .order-history-table__secondary-col { width: 25%; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .order-history-table__row .order-history-table__main-col { min-height: unset; } .order-history-table__secondary-col { width: 32%; }
}
@media only screen and (min-width:40.063em) { .order-history-table__secondary-col+.order-history-table__secondary-col { border-right: 1px solid #d1d1d1; }
}
.order-history-table__secondary-col p { padding: 0; margin: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 1.5;
}
@media only screen and (max-width:40em) { .order-history-table__row .order-history-table__main-col>strong { font-size: 22px; } .order-history-table__secondary-col { width: 50%; border-top: 1px dotted #d1d1d1; } .order-history-table__secondary-col p { font-size: 12px; }
}
.order-history-table__secondary-col .btn { margin-top: 15px;
}
@media only screen and (min-width:64.063em) { .order-history-table__row .order-history-table__price-col { width: 22%; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .order-history-table__row .order-history-table__price-col { width: 36%; }
}
.order-history-table__price { color: #0053a0; font-size: 16px; font-family: archivo_narrowbold,sans-serif;
}
.order-history-table__price strong { font-size: 26px;
}
@media only screen and (max-width:40em) { .order-history-table__row .order-history-table__price-col { width: 100%; text-align: left; padding: 0 10px; } .order-history-table__price { position: absolute; top: 38px; right: 10px; font-size: 14px; } .order-history-table__price strong { font-size: 22px; }
}
.order-history-table__contact { font-size: 13px; color: #636363; font-weight: 700; line-height: 1.3; margin-top: 15px;
}
@media only screen and (max-width:40em) { .order-history-table__contact { padding: 10px 0 0 10px; margin: 0 -10px; border-top: 1px dotted #d1d1d1; font-size: 12px; line-height: 2; }
}
.order-history-table__checkbox.fm-item { padding: 0; margin: 15px 0 0;
}
.order-history-table__checkbox.fm-item label { font-size: 13px; color: #636363; font-weight: 700; line-height: 1.2; margin-bottom: 0;
}
@media only screen and (max-width:40em) { .order-history-table__checkbox.fm-item { display: block; clear: both; padding: 10px 0 0 10px; margin: 0 -10px; border-top: 1px dotted #d1d1d1; } .order-history-table__checkbox.fm-item label { font-size: 12px; line-height: 24px; }
}
.certona-tile__container,
.mt__item { border: 1px solid #d1d1d1; box-shadow: 0 4px 6px -2px rgba(0,0,0,.2);
}
@media only screen and (-webkit-min-device-pixel-ratio:2) { .fudwrap, .main-nav, .sh-wrapper, .wrp { cursor: pointer; } .fudwrap>*, .main-nav>*, .sh-wrapper>*, .wrp>* { cursor: default; }
}
.register-consent-error { background: #f6f6f6; padding: 30px 20px 15px; text-align: center;
}
.register-consent-error h4 { padding: 20px 0 5px; margin: 0; font-weight: 700; font-family: Arial,Helvetica,sans-serif; font-size: 18px; color: #636363;
}
.register-consent-error p { font-size: 14px; line-height: 1.7; margin-bottom: 12px;
}
.fm-item label+.register-consent-error { margin-top: 12px; margin-bottom: 25px;
}
@media only screen and (max-width:40em) { .register-consent-error strong { font-size: 16px; } .register-consent-error p { font-size: 13px; } .fm-item label+.register-consent-error { margin-top: 8px; }
}
.typ-consent-error { padding-bottom: 45px;
}
.typ-consent-error .register-consent-error { margin: 40px 0;
}
.typ-consent-error .text-center+.fm-item_typ { margin-top: 40px;
}
.icon-sad-cloud { height: 66px; width: 108px; display: inline-block; background: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 570 350'%3E%3Cstyle%3E.st1%7Bfill:%23636363%7D%3C/style%3E%3Cpath d='M454.1 128c-5.5-36.8-37.3-65-75.6-65-11.9 0-23.2 2.7-33.3 7.6C322.9 34.9 281.7 11 234.5 11 164.4 11 107.3 63.9 106 129.7c-52.4 5.9-93 50.4-93 104.3 0 58 47 105 105 105h334c58 0 105-48 105-106 0-57.3-45.9-103.8-102.9-105z' fill='%23e5e5e5'/%3E%3Cpath class='st1' d='M452 347H118C55.7 347 5 296.3 5 234c0-55.2 39.7-101.9 93.4-111.3C100.7 91.3 115 62 139 39.8 164.7 16.1 198.6 3 234.5 3c24.1 0 47.8 6 68.5 17.4 18.1 9.9 33.6 23.8 45.2 40.2 9.6-3.7 19.8-5.6 30.3-5.6 20.4 0 40 7.3 55.4 20.7a84.34 84.34 0 0 1 26.9 44.7c27.2 2.1 52.5 13.9 71.8 33.5 20.9 21.3 32.3 49.4 32.3 79.1.1 62.9-50.6 114-112.9 114zM234.5 19c-31.9 0-61.9 11.6-84.6 32.6-22.5 20.8-35.3 48.6-35.9 78.3l-.1 7-7 .8c-49 5.6-85.9 47-85.9 96.4 0 53.5 43.5 97 97 97h334c53.5 0 97-44 97-98 0-25.6-9.9-49.7-27.8-67.9-17.9-18.2-41.8-28.5-67.3-29l-6.7-.1-1-6.7c-2.4-16-10.5-30.8-22.8-41.5C410.9 76.9 395 71 378.5 71c-10.4 0-20.5 2.3-29.8 6.8l-6.5 3.1-3.8-6.1C316.9 40.4 277 19 234.5 19z'/%3E%3Cpath class='st1' d='M240.4 131.1c-3.3-3.3-8.7-3.3-12 0l-17.2 17.2-17.2-17.2c-3.3-3.3-8.7-3.3-12 0-3.3 3.3-3.3 8.7 0 12l17.2 17.2-17.2 17.2c-3.3 3.3-3.3 8.7 0 12 1.7 1.7 3.8 2.5 6 2.5s4.4-.8 6-2.5l17.2-17.2 17.2 17.2c1.7 1.7 3.8 2.5 6 2.5s4.4-.8 6-2.5c3.3-3.3 3.3-8.7 0-12l-17.2-17.2 17.2-17.2c3.3-3.3 3.3-8.7 0-12zM350.3 160.3l17.2-17.2c3.3-3.3 3.3-8.7 0-12-3.3-3.3-8.7-3.3-12 0l-17.2 17.2-17.2-17.2c-3.3-3.3-8.7-3.3-12 0-3.3 3.3-3.3 8.7 0 12l17.2 17.2-17.2 17.2c-3.3 3.3-3.3 8.7 0 12 1.7 1.7 3.8 2.5 6 2.5s4.4-.8 6-2.5l17.2-17.2 17.2 17.2c1.7 1.7 3.8 2.5 6 2.5s4.4-.8 6-2.5c3.3-3.3 3.3-8.7 0-12l-17.2-17.2zM360.6 268.8c-.9-1.3-22.2-32.3-84.1-32.8-61.9.5-83.2 31.5-84.1 32.8-2.6 3.9-1.5 9.2 2.4 11.8 1.4 1 3.1 1.4 4.7 1.4 2.8 0 5.5-1.3 7.1-3.8 0-.1 4.2-5.9 14.3-11.9 10.1-6 27.8-13 55.6-13.3 27.8.2 45.6 7.3 55.6 13.3 10.1 6 14.2 11.8 14.3 11.9 1.6 2.5 4.3 3.8 7.1 3.8 1.6 0 3.2-.5 4.7-1.4 3.9-2.6 5-7.9 2.4-11.8z'/%3E%3C/svg%3E") no-repeat; background-size: contain;
}
@media only screen and (max-width:40em) { .typ-consent-error { padding: 0 10px 30px; } .typ-consent-error .register-consent-error { margin: 30px 0; } .typ-consent-error .text-center+.fm-item_typ { margin-top: 30px; } .icon-sad-cloud { height: 50px; width: 82px; }
}
#pci-payment-frame { line-height: 0;
}
#pci-payment-frame iframe { display: block;
}
.bl-country .fm-text { font-size: 12px; font-weight: 700; display: none;
}
.flag-mode-on { padding-left: 45px; position: relative; background-color: transparent;
}
.select-country-flag { position: relative; width: 0; height: 0;
}
.fm-item--error .select-country-flag { z-index: 10;
}
.select-country-flag i { display: block; width: 64px; height: 64px; transform: scale(.469); position: absolute; top: -13px; left: -7px; background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/img/flags.png?yocs=n_s_) no-repeat;
}
.pp--pound .pp__pnd,
.pp--thou .pp__pnd { left: -2px;
}
.select-country-flag.flag-at i { background-position: -64px 0;
}
.select-country-flag.flag-be i { background-position: -128px 0;
}
.select-country-flag.flag-bg i { background-position: -192px 0;
}
.select-country-flag.flag-cy i { background-position: -256px 0;
}
.select-country-flag.flag-cz i { background-position: -320px 0;
}
.select-country-flag.flag-de i { background-position: 0 -64px;
}
.select-country-flag.flag-dk i { background-position: -64px -64px;
}
.select-country-flag.flag-ee i { background-position: -128px -64px;
}
.select-country-flag.flag-es i { background-position: -192px -64px;
}
.select-country-flag.flag-fi i { background-position: -256px -64px;
}
.select-country-flag.flag-fr i { background-position: -320px -64px;
}
.select-country-flag.flag-gb i,
.select-country-flag.flag-uk i { background-position: 0 -128px;
}
.select-country-flag.flag-gr i { background-position: -64px -128px;
}
.select-country-flag.flag-hr i { background-position: -128px -128px;
}
.select-country-flag.flag-hu i { background-position: -192px -128px;
}
.select-country-flag.flag-ie i { background-position: -256px -128px;
}
.select-country-flag.flag-is i { background-position: -320px -128px;
}
.select-country-flag.flag-it i { background-position: 0 -192px;
}
.select-country-flag.flag-li i { background-position: -64px -192px;
}
.select-country-flag.flag-lt i { background-position: -128px -192px;
}
.select-country-flag.flag-lu i { background-position: -192px -192px;
}
.select-country-flag.flag-lv i { background-position: -256px -192px;
}
.select-country-flag.flag-mt i { background-position: -320px -192px;
}
.select-country-flag.flag-nl i { background-position: 0 -256px;
}
.select-country-flag.flag-no i { background-position: -64px -256px;
}
.select-country-flag.flag-pl i { background-position: -128px -256px;
}
.select-country-flag.flag-pt i { background-position: -192px -256px;
}
.select-country-flag.flag-ro i { background-position: -256px -256px;
}
.select-country-flag.flag-se i { background-position: -320px -256px;
}
.select-country-flag.flag-si i { background-position: 0 -320px;
}
.select-country-flag.flag-sk i { background-position: -64px -320px;
}
.fm-item .country-change-step1 { margin-top: -10px;
}
.country-change-step1 a { font-size: 13px; vertical-align: text-top;
}
.country-change-step2,
.non-uk-form .bl-postcode,
.non-uk-form .country-change-step1 { display: none;
}
.non-uk-form .bl-postcode-results,
.non-uk-form .non-uk-form__hide { display: none!important;
}
.non-uk-form .non-uk-form__show { display: block!important;
}
.non-uk-form .bl-country .fm-text,
.non-uk-form .country-change-step2 { display: block;
}
.non-uk-form .bl-address-input,
.non-uk-form .id-new-address-fields { display: block!important;
}
.price-point { background-color: #ed1c24; text-align: center; color: #FFF; font-family: screwfix_betabold;
}
.pp__bmsg,
.pp__tmsg { font-size: 15px; line-height: 12px; min-height: 12px;
}
.pp__price { position: relative; letter-spacing: 0; text-align: center;
}
.pp__price .pp__p4pence,
.pp__price .pp__pnc,
.pp__price .pp__pnd { font-size: 50%;
}
.pp__price .pp_numbs { position: relative; display: inline-block; margin: 0 auto;
}
.pp__price .pp_vat { position: absolute; font-size: 9px; line-height: 9px; text-align: left;
}
.pp--pence { padding: 26px 0 0;
}
.pp--pound,
.pp--thou { padding: 32px 0 0;
}
.pp--pence .pp__price { font-size: 63px; line-height: 48px; margin: 10px 0;
}
.pp--pence .pp__p4pence { line-height: 12px; top: -22px;
}
.pp--pence .pp_vat { bottom: -1px; right: -32px;
}
.pp--pound .pp__price { font-size: 53px; line-height: 40px; margin: 12px 0 14px;
}
.pp--pound .pp__pnc,
.pp--pound .pp__pnd { line-height: 12px; top: -19px;
}
.pp--pound .pp_vat { bottom: -1px; right: -34px;
}
.pp--thou .pp__price { font-size: 44px; line-height: 34px; margin: 12px 0 14px;
}
.pp--thou .pp__pnc,
.pp--thou .pp__pnd { line-height: 12px; top: -15px;
}
.pp--thou .pp_vat { bottom: -1px; right: -33px;
}
.spring-deals .wrp.boxed .inner { background-color: #abd037;
}
.certona-tile__container { position: relative; background: #fff; width: 100%; padding: 0; margin-bottom: 12px; float: left;
}
.certona-tile__container a { color: #636363; text-decoration: none;
}
.certona-tile__container a.pr__view { font-size: 11px; color: #0053a0;
}
.certona-tile__container a:hover p { text-decoration: underline; color: #636363;
}
.certona-tile__container a:hover div { color: #636363;
}
.ct__ls .certona-tile__container { padding: 0 5px 10px;
}
.ct__pt .certona-tile__container { display: block; width: 100%;
}
.certona--slider .certona-tile__container { width: 100%;
}
.certona-tile { background-color: #fff; position: relative; padding: 20px 13px; overflow: hidden; cursor: pointer; cursor: hand;
}
.ct__pt .certona-tile { padding: 13px; height: 373px;
}
@media only screen and (max-width:40em) { .certona-tile__container { float: none; width: 100%; } .ct__pt .certona-tile { height: auto; }
}
.certona-tile .lii__rating { display: block; float: none; clear: both; padding: 6px 0;
}
.certona-tile .lii__rating.rating { color: #0053a0;
}
.ct__product-thumb { display: block; float: none; width: 30%; max-width: 160px; margin: 0 auto;
}
.ct__pt .ct__product-thumb { float: none; width: auto; text-align: center; max-width: 160px;
}
.ct__pt__e .ct__product-thumb { margin-top: 70px;
}
@media only screen and (max-width:40em) { .ct__pt .ct__product-thumb { width: 40%; float: left; } .ct__pt__e .ct__product-thumb { margin-top: 0; }
}
.ct__product-info { display: inline-block; float: left; min-height: 80px;
}
.ct__pt .ct__product-info { padding: 10px 0; float: none; width: 100%;
}
@media only screen and (max-width:40em) { .ct__pt .ct__product-info { float: left; width: 60%; padding: 0 0 0 10px; }
}
.ct__product-desc { font-size: 12px; font-weight: 700; line-height: 16px; margin-top: 0;
}
.ct__product-desc .ct__product-sku { font-size: 10px; font-weight: 400;
}
.ct__pt .ct__product-desc { max-width: 100%; margin: 0;
}
.ct__pt__e .ct__product-desc { position: absolute; top: 13px; left: 13px; padding-right: 13px; font-size: 18px; font-weight: 700; line-height: 20px;
}
.ct__pt__e .ct__product-desc .ct__product-sku { display: none;
}
@media only screen and (max-width:40em) { .ct__pt__e .ct__product-desc { position: relative; top: 0; left: 0; } .ct__product-desc { max-width: 100%; margin: 0 10px; }
}
.ct__price-row { display: block; position: absolute; bottom: 5px; left: 13px; height: 65px; line-height: normal;
}
.ct__pt .ct__price-row { margin: 10px 0;
}
.ct__pt__e .ct__price-row { bottom: 19px;
}
.ct__pt__e .ct__price-row .ct__price-from { font-size: 14px; font-weight: 700;
}
.ct__price-now { width: 62%; float: left;
}
.ct__pt .ct__price-now { display: block; float: none; width: 100%;
}
@media only screen and (max-width:40em) { .ct__price-row { position: relative; top: 0; left: 0; margin: 10px; height: auto; } .ct__price-now { display: block; float: none; width: 100%; }
}
.ct__price { font-size: 36px; font-weight: 700; float: left; padding-right: 5px;
}
.ct__pt .ct__price { font-size: 24px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .ct__price { font-size: 30px; }
}
@media only screen and (max-width:40em) { .ct__price { font-size: 26px; }
}
.ct__price-vat { font-size: 11px; line-height: normal; float: left; padding-top: 11px; text-transform: uppercase;
}
.ct__pt .ct__price-vat { font-size: 10px; padding-top: 3px; line-height: 1em;
}
.ct__ls2 .ct__price-vat { padding-top: 33px;
}
.ct__pt2 .ct__price-vat { padding-top: 25px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .ct__price-vat { padding-top: 6px; }
}
@media only screen and (max-width:40em) { .ct__price-vat { font-size: 10px; padding-top: 4px; }
}
.ct__price-before { width: 30%; float: left;
}
.ct__pt .ct__price-before { display: block; clear: both; float: none; width: 100%; padding-top: 1px; line-height: 11px;
}
.ct__ls2 .ct__price-before { padding-top: 22px; width: 36%;
}
.ct__price-was { display: block; font-size: 11px; margin-top: 7px; color: #999;
}
.ct__price-save { font-size: 11px; color: #ed1c24;
}
.ct__bulk-savings { padding: 20px 0 0;
}
.ct__pt .ct__bulk-savings { position: absolute; bottom: 70px; left: 0; padding: 0 13px 16px; width: 100%;
}
@media only screen and (max-width:40em) { .ct__price-before { display: block; clear: both; float: none; width: 100%; } .ct__bulk-savings { padding: 10px 0 0; margin: 0 10px; width: 100%; } .ct__pt .ct__bulk-savings { position: relative; top: 0; margin: 0; padding: 10px 0 0; }
}
.ct__bulk-savings--header { display: block; overflow: hidden; background-color: #ed1c24; padding: 0 12px;
}
.ct__pt .ct__bulk-savings--header { padding: 0;
}
@media only screen and (max-width:40em) { .ct__bulk-savings--header { padding: 0; } .ct__bulk-savings--header h3 { line-height: normal; }
}
.ct__bulk-savings--header h3 { margin: 0; padding: 2px 0; color: #fee502; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; text-align: center;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .ct__bulk-savings--header h3 { line-height: normal; }
}
.ct__pt .ct__bulk-savings--header h3 { font-size: 10px; line-height: normal;
}
.ct__bulk-savings--header h3 .ab { font-family: "Arial Black",Arial,Helvetica,sans-serif;
}
.ct__bulk-savings--header h3 .ae { color: #fff;
}
.ct__promo-img { position: absolute; top: 20px; right: 20px;
}
.mt__item,
.mt__item .cat-link { position: relative; display: block;
}
.ct__pt .ct__promo-img { top: 13px; right: 13px;
}
@media only screen and (max-width:40em) { .ct__pt .ct__promo-img { right: auto; left: 13px; }
}
.ct__pt2__alt .ct__promo-img,
.ct__pt__alt .ct__promo-img { top: 100px; right: 10px;
}
.mt__item { margin-bottom: 10px; background-color: #FFF;
}
.mt__item .cat-link { height: 100%; padding: 9px 9px 0; color: #0053a0;
}
.mt__item .cat-link img { width: 100%;
}
@media only screen and (max-width:40em) { .mt__item .cat-link { padding: 6px 6px 0; }
}
.mt__item .cat-link:hover .h3 { color: inherit; text-decoration: underline;
}
.mt__item .mt__item-img { display: table-cell; vertical-align: middle; width: 1%;
}
.mt__item .mt__item-title { display: table; margin: 10px 0; text-align: center; width: 100%; height: 40px;
}
.mt__item .mt__item-title .h3,
.mt__item .mt__item-title h3 { display: table-cell; vertical-align: middle; text-align: center; text-transform: uppercase; margin: 0; padding: 0; font-size: 16px; line-height: 16px;
}
@media only screen and (max-width:64em) { .mt__item .mt__item-title .h3, .mt__item .mt__item-title h3 { font-size: 16px; line-height: 16px; }
}
.mt__item .mt__item-description { color: #616161; margin: -5px 0 25px;
}
@media only screen and (max-width:40em) { .mt__item .mt__item-description { display: none; } .sm-24.cols .mt__item .cat-link { padding: 6px; overflow: hidden; display: block; } .sm-24.cols .mt__item .mt__item-img { float: left; vertical-align: top; height: 86px; width: 100px; overflow: hidden; position: relative; } .sm-24.cols .mt__item .mt__item-img img { height: 86px; width: auto; float: left; position: absolute; left: 50%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); } .sm-24.cols .mt__item .mt__item-title { display: table-cell; width: 60%; height: 86px; padding-left: 13px; padding-right: 7px; vertical-align: middle; } .sm-24.cols .mt__item .mt__item-title .h3 { padding: 0; text-align: left; }
}
.ugly-tiles .mt__item { border: none;
}
.ugly-tiles .mt__item .cat-link { padding: 13px 13px 0;
}
@media only screen and (max-width:40em) { .ugly-tiles .mt__item .cat-link { padding: 6px 6px 0; }
}
.ugly-tiles .mt__item .cat-link img { width: 100%; margin: auto;
}
.ugly-tiles .mt__item-title { height: 51px;
}
.ugly-tiles .mt__item-title .h3 { margin: 10px 0 0; color: #fff;
}
body[class*=landing] { background-repeat: no-repeat; background-attachment: fixed;
}
body[class*=landing] .bc__mini li { margin-bottom: 2px;
}
body[class*=landing] .bc__mini li a,
body[class*=landing] .bc__mini li:last-child span { padding: 4px 10px; background-color: #FFF;
}
body[class*=landing] .me__title { margin-top: 50px; margin-bottom: 30px;
}
body[class*=landing] .me__title span { position: relative; display: inline-block; padding: 12px; background-color: #d0030b; font-family: archivo_narrowbold,sans-serif; text-transform: uppercase; font-size: 32px;
}
body[class*=landing] .me__title span:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 48px 24px 0 0; border-color: #d0030a transparent transparent; position: absolute; bottom: 0; right: -24px;
}
.landing-spring .me__title,
.landing-winter .me__title { border-color: #FFF; color: #FFF;
}
.landing-wrapper { overflow: hidden;
}
.landing-spring { background-color: #7e9d35; background-image: -webkit-linear-gradient(#7e9d35,#aed143); background-image: linear-gradient(#7e9d35,#aed143);
}
.landing-spring .ugly-tiles .mt__item { background-color: #004f6d;
}
.landing-winter { background-color: #005b78; background-image: -webkit-linear-gradient(#005b78,#46adcb); background-image: linear-gradient(#005b78,#46adcb);
}
.landing-winter .ugly-tiles .mt__item { background-color: #004f6d;
}
.mt--top .certona-tile__container { padding: 0;
}
.certona-tile__container.eq-height { padding: 0; margin-bottom: 10px;
}
.ln-title-row { margin: 0 0 20px;
}
.ln-title-row--wide { height: 224px; margin-bottom: 20px; background-position: top center; background-size: cover; background-image: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/img/merch/winter-header.png?yocs=n_s_); background-repeat: no-repeat;
}
.mt--lndscp .certona-tile__container { width: 100%; margin-bottom: 20px;
}
.landing-minimal { background-color: #7e9d35!important; background-image: none;
}
.landing-minimal div { box-shadow: 0 0!important;
}
.landing-h1 { font-size: 144px; text-transform: uppercase; text-shadow: 4px 4px 8px #004f6d; font-weight: 700; margin: 80px 0 20px; text-align: center;
}
.landing-h1 .landing-h1--l { color: #FFF;
}
.landing-h1 .landing-h1--r { color: #abd037;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .landing-h1 { font-size: 92px; margin: 40px 0 -20px; } .hero-tile-2.eq-height { height: 350px!important; } .ln-title-row--wide { height: 180px; background-size: cover; }
}
@media only screen and (max-width:40em) { .landing-h1 { font-size: 86px; margin: 10px 0 -20px; line-height: 72px; } .landing-h1 span { display: block; } .hero-tile-2.eq-height { height: 350px!important; } .ln-title-row--wide { height: 120px; background-size: cover; }
}
.dummy-space { margin: 80px 0 10px;
}
.banner-image-typ img,
.banner-image-typ--slim-product img,
.banner-image-typ--url img { width: 100%;
}
.banner-image-typ--url a { position: absolute; right: 0; bottom: 0;
}
.banner-image-typ--link-view,
.banner-image-typ--link-view:hover { text-decoration: none; color: #f6f6f6;
}
.banner-image-typ--slim-product_msg { color: #f6f6f6; position: absolute; left: 15px; top: 10px;
}
.banner-image-typ--slim-product_pp { width: 70px; height: 70px; border: none; border-radius: 100%; background-color: #ed1c24; position: absolute; bottom: 2%; right: 2%;
}
.banner-image-typ--slim-product_pp-content { width: 58%; display: block; margin: 4px auto; color: #f6f6f6;
}
.banner-image-typ--slim-product_pp-content span { font-size: 10px; line-height: 12px; display: block; width: 100%;
}
.banner-image-typ--fat-product { background-color: #f6f6f6; white-space: nowrap;
}
.banner-image-typ--fat-product .cont-left,
.banner-image-typ--fat-product .cont-right { display: inline-block; white-space: normal; vertical-align: top;
}
.banner-image-typ--fat-product .cont-left { width: 40%; padding: 15px 25px; background-color: #d1d1d1;
}
.banner-image-typ--fat-product .cont-right { width: 60%;
}
.banner-image-typ--fat-product_pp { width: 80px; height: 80px; display: block; position: absolute; top: 40%; right: 20px; background-color: red;
}
.banner-image-typ--fat-product_prodimg { width: 100%; margin: 5px -5px;
}
.banner-title-typ { color: #f6f6f6; background-color: #636363; padding: 5px 20px;
}
.banner-title-typ_url { color: #f6f6f6; text-decoration: none; position: absolute; right: 5px; bottom: 0;
}
.banner-title-typ_url:hover { color: #f6f6f6;
}
.banner-carousel-title-typ { overflow: hidden; white-space: nowrap; background-color: #f6f6f6;
}
.banner-carousel-title-typ_content,
.banner-carousel-title-typ_nav { display: inline-block; vertical-align: middle; white-space: normal;
}
.banner-carousel-title-typ_content { width: 91.5%; color: #f6f6f6; background-color: #636363; overflow: hidden;
}
.banner-carousel-title-typ_content ul { white-space: nowrap; display: block; position: relative; margin: 0; padding: 0;
}
.banner-carousel-title-typ_content li { white-space: normal; margin-left: -4px; list-style: none; padding-left: 10px; display: inline-block;
}
.banner-carousel-title-typ_content li:first-child { margin-left: 0;
}
.banner-carousel-title-typ_nav { width: 8.5%; background-color: #d1d1d1; margin-left: -5px; text-align: right; padding-left: 5px;
}
.banner-carousel-title-typ_nav .btn { padding: 6px 4px 3px;
}
@media only screen and (max-width:40em) { .banner-image-typ--fat-product .cont-left { width: 60%; } .banner-image-typ--fat-product .cont-right { width: 40%; } .banner-carousel-title-typ_content { width: 77.5%; } .banner-carousel-title-typ_nav { width: 22.5%; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner-image-typ--fat-product .cont-left { width: 60%; } .banner-image-typ--fat-product .cont-right { width: 40%; } .banner-carousel-title-typ_content { width: 86%; } .banner-carousel-title-typ_nav { width: 14%; }
}
.banner-mg-wrap { height: 376px; overflow: hidden; margin-bottom: 12px;
}
.banner-mg-wrap a { display: block; height: 100%; overflow: hidden; position: relative; width: 100%;
}
.banner-mg-wrap img { height: 376px; left: 50%; margin-left: -574px; position: absolute;
}
.banner,
.banner--var1.banner--level3 .banner__wrapper,
.banner--var3.banner--level3 .banner__wrapper,
.banner__wrapper { position: relative;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner-mg-wrap img { margin-left: -512px; }
}
.banner-mg-wrap>div { float: left; height: 100%; margin: 0!important; padding: 0!important; width: 100%;
}
.eu-modal-container { background: #fff; padding: 25px 45px 35px;
}
@media only screen and (max-width:40em) { .banner-mg-wrap { height: 205px; } .banner-mg-wrap img { margin-left: -320px; height: 205px; } .eu-modal-container { padding: 5px 0 0; } .eu-modal-container .eu-zone .btn { display: none; }
}
.eu-modal-container .eu-zone { padding: 10px;
}
.eu-modal-container .eu-zone h1 { text-align: center; color: #0053a0; font-size: 24px; margin-bottom: 0;
}
.eu-modal-container .eu-zone h3 { font-size: 30px;
}
@media only screen and (max-width:40em) { .eu-modal-container .eu-zone h1 { margin-bottom: 0; } .eu-modal-container .eu-zone h3 { font-size: 22px; }
}
.eu-modal-container .eu-zone h4 { color: #0053a0; margin: 4px 0 0;
}
.banner,
.banner:focus,
.banner:hover { color: #636363; text-decoration: none;
}
@media only screen and (max-width:40em) { .eu-modal-container .eu-zone h4 { margin: 0; }
}
.eu-modal-container .eu-zone .btn--lg { margin-top: 15px;
}
.eu-modal-container .eu-zone .row .row { min-height: 100px; border-bottom: .5px dashed #d1d1d1; padding: 10px 30px; position: relative;
}
.eu-modal-container .eu-zone .row .row img { margin-top: 6px;
}
.eu-modal-container .eu-zone .row .row:first-child,
.eu-modal-container .eu-zone .row .row:last-child { border-bottom: none;
}
@media only screen and (max-width:40em) { .eu-modal-container .eu-zone .row .row { padding: 17px 0 0; } .eu-modal-container .eu-zone .row .row img { margin-top: 0; } .eu-modal-container .eu-zone .row .row:first-child { min-height: 20px; }
}
.ib { overflow: hidden; text-align: center;
}
.ib_img { margin: 0 auto; max-width: 100%;
}
.banner { display: block; margin-right: -.3em; margin-bottom: 15px; margin-left: -.3em; border: 1px solid #d1d1d1; overflow: hidden; height: 376px; background-color: #fff; box-shadow: 0 4px 6px -2px rgba(0,0,0,.2);
}
.ls__banner .banner,
.row-wrp--mod .banner.banner--half { margin-right: 0; margin-left: 0;
}
.banner.banner--var6 { margin-bottom: 0; border: 0; background-color: transparent; height: 100%;
}
.banner.banner--border { border: 9px solid #0053a0;
}
.banner.banner--border.banner--var4,
.banner.banner--border.banner--var8 { border-color: #000;
}
.banner * { padding: 0; margin: 0;
}
@media only screen and (max-width:40em) { .banner.banner--border { border-width: 6px; } .banner { height: 205px; }
}
.banner.banner--level3 { height: 186px;
}
@media only screen and (max-width:40em) { .banner.banner--level3 { height: 135px; }
}
.banner.banner--var5.banner--level3 { height: 229px; margin-left: 0; margin-right: 0;
}
@media only screen and (max-width:40em) { .banner.banner--var5.banner--level3 { height: 175px; } .row-wrp--mod .banner.banner--half { margin-right: 0; }
}
.banner sup { font-size: 50%; top: -.7em;
}
.banner.banner--var7 { height: auto;
}
a.banner:not([href]),
a.banner[href='#'],
a.banner[href=''] { cursor: default;
}
.banner__wrapper { margin: 10px; overflow: hidden;
}
@media only screen and (max-width:40em) { .banner__wrapper { margin: 5px; background-size: auto 205px!important; background-position: right!important; }
}
.banner--border .banner__wrapper { margin: 2px;
}
.banner--var3.banner--level3 .banner__wrapper { margin: 0;
}
.banner--var4 .banner__wrapper { margin: 0; border: 2px solid #000;
}
@media only screen and (max-width:40em) { .banner--half .banner__wrapper { background-size: auto 205px!important; background-position: right!important; } .banner--var4 .banner__wrapper { height: 193px; }
}
.banner--var6 .banner__wrapper { margin: 9px; height: 100%;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner__wrapper { background-position: right!important; } .banner--var6 .banner__wrapper { height: 356px; }
}
@media only screen and (max-width:40em) { .banner--var6 .banner__wrapper { height: 185px; margin: 9px 5px; }
}
.banner--var8 .banner__wrapper { margin: 0; height: 168px; background-color: #000;
}
@media only screen and (max-width:40em) { .banner--var8 .banner__wrapper { height: 123px; }
}
.banner.banner--red .banner__wrapper { background-color: #ed1c24; color: #fff;
}
.banner--var2 .banner__deal,
.banner.banner--white .banner__deal { color: #ed1c24;
}
.banner--var3.banner--level3.banner--border { border-color: #ed1c24;
}
.banner--arrow { overflow: visible; margin-bottom: 37px;
}
.banner--arrow .banner__arrow { width: 0; height: 0; border-style: solid; border-width: 25px 65px 0; border-color: #0053a0 transparent transparent; position: absolute; display: block; top: 100%; right: -12px; margin-top: 12px;
}
@media only screen and (max-width:40em) { .banner--arrow .banner__arrow { border-width: 15px 35px 0; right: -6px; margin-top: 6px; }
}
.banner--arrow.banner--var3 .banner__arrow { border-color: #ed1c24 transparent transparent;
}
.banner--arrow .banner__arrow--inner { width: 0; height: 0; border-style: solid; border-width: 11px 34px 0; border-color: #fff transparent transparent; position: absolute; top: -25px; left: -34px;
}
.banner--arrow.banner--var3 .banner__arrow--inner { border-color: #fff200 transparent transparent;
}
.banner__bullets li,
.banner__deal-msg { font-size: 16px; line-height: 1.125; font-family: screwfix_betaregular;
}
.banner__trade-quote { font-size: 24px; line-height: 1; font-family: screwfix_betaregular;
}
@media only screen and (max-width:64em) { .banner__trade-quote { font-size: 18px; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner__wrapper { background-position: right!important; } .banner--half .banner__trade-quote { font-size: 18px; }
}
.banner__prod-title,
.banner__text,
.banner__trade-msg { font-size: 30px; line-height: 1; font-family: screwfix_betaregular;
}
@media only screen and (max-width:64em) { .banner__prod-title, .banner__text, .banner__trade-msg { font-size: 24px; }
}
@media only screen and (max-width:40em) { .banner--arrow .banner__arrow--inner { border-width: 7px 17px 0; top: -15px; left: -17px; } .banner--level3.banner--var1 .banner__deal-value { margin-bottom: 4px; } .banner__prod-title, .banner__text, .banner__trade-msg { font-size: 13px; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner__prod-title, .banner--half .banner__text, .banner--half .banner__trade-msg { font-size: 24px; }
}
.banner--level3 .banner__prod-title,
.banner--level3 .banner__text,
.banner--level3 .banner__trade-msg { font-size: 24px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--level3 .banner__prod-title, .banner--level3 .banner__text, .banner--level3 .banner__trade-msg { font-size: 24px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner__prod-title, .banner--level3 .banner__text, .banner--level3 .banner__trade-msg { font-size: 13px; }
}
.banner__title { font-size: 68px; line-height: .956; font-family: screwfix_betaheavy;
}
@media only screen and (max-width:64em) { .banner__title { font-size: 54px; }
}
@media only screen and (max-width:40em) { .banner__title { font-size: 24px; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner__title { font-size: 54px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--level3 .banner__title { font-size: 46px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner__title { font-size: 24px; }
}
.banner--level3 .banner__title { font-size: 98px; line-height: .918; font-family: screwfix_betaheavy;
}
@media only screen and (max-width:64em) { .banner--level3 .banner__title { font-size: 76px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner__title { font-size: 34px; line-height: 1; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner--level3 .banner__title { font-size: 76px; }
}
.banner--level3 .banner--level3 .banner__title { font-size: 68px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--level3 .banner--level3 .banner__title { font-size: 54px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner--level3 .banner__title { font-size: 24px; line-height: .918; }
}
.banner--var3 .banner__deal-value,
.banner--var5 .banner__deal-value,
.banner__deal-save,
.banner__deal-text { font-size: 98px; line-height: .918; font-family: screwfix_betaheavy;
}
@media only screen and (max-width:64em) { .banner--var3 .banner__deal-value, .banner--var5 .banner__deal-value, .banner__deal-save, .banner__deal-text { font-size: 76px; }
}
@media only screen and (max-width:40em) { .banner--var3 .banner__deal-value, .banner--var5 .banner__deal-value, .banner__deal-save, .banner__deal-text { font-size: 34px; line-height: 1; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner--var3 .banner__deal-value, .banner--half .banner--var5 .banner__deal-value, .banner--half .banner__deal-save, .banner--half .banner__deal-text { font-size: 76px; }
}
.banner--level3 .banner--var3 .banner__deal-value,
.banner--level3 .banner--var5 .banner__deal-value,
.banner--level3 .banner__deal-save,
.banner--level3 .banner__deal-text { font-size: 68px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--level3 .banner--var3 .banner__deal-value, .banner--level3 .banner--var5 .banner__deal-value, .banner--level3 .banner__deal-save, .banner--level3 .banner__deal-text { font-size: 54px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner--var3 .banner__deal-value, .banner--level3 .banner--var5 .banner__deal-value, .banner--level3 .banner__deal-save, .banner--level3 .banner__deal-text { font-size: 24px; line-height: .918; }
}
.banner--var8 .banner__deal-text { line-height: 1em;
}
.banner__deal-value { font-size: 142px; line-height: .775; font-family: screwfix_betaheavy; margin-bottom: 12px;
}
@media only screen and (max-width:64em) { .banner__deal-value { font-size: 108px; line-height: .833; margin-bottom: 10px; }
}
@media only screen and (max-width:40em) { .banner__deal-value { font-size: 50px; margin-bottom: 8px; }
}
.banner__deal,
.banner__title { margin-bottom: 30px;
}
.banner--half .banner__deal,
.banner--half .banner__title { margin-bottom: 25px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--half .banner__deal, .banner--half .banner__title { margin-bottom: 25px; }
}
@media only screen and (max-width:40em) { .banner--half .banner__deal, .banner--half .banner__title { margin-bottom: 12px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner__deal, .banner__title { margin-bottom: 25px; }
}
@media only screen and (max-width:40em) { .banner__deal, .banner__title { margin-bottom: 12px; }
}
.banner--level3 .banner__deal,
.banner--level3 .banner__title { margin-bottom: 12px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--level3 .banner__deal, .banner--level3 .banner__title { margin-bottom: 10px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner__deal, .banner--level3 .banner__title { margin-bottom: 4px; }
}
.banner--var3 .banner__deal,
.banner--var5 .banner__deal { background: #ed1c24; color: #fff; padding-top: 6px; padding-bottom: 9px; height: 105px; margin-bottom: 18px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var3 .banner__deal, .banner--var5 .banner__deal { padding-top: 15px; padding-bottom: 15px; }
}
.banner--var3 .banner__deal { padding-left: 36px;
}
@media only screen and (max-width:64em) { .banner--var3 .banner__deal { padding-left: 25px; }
}
@media only screen and (max-width:40em) { .banner--var3 .banner__deal, .banner--var5 .banner__deal { padding-top: 11px; padding-bottom: 10px; height: 57px; } .banner--var3 .banner__deal { padding-left: 12px; margin-bottom: 10px; }
}
.banner--var3.banner--level3 .banner__deal { height: auto; margin: 0; padding: 2px 0 16px 25px;
}
@media only screen and (max-width:40em) { .banner--var3.banner--level3 .banner__deal { padding: 7px 0 13px 14px; }
}
.banner--var5.banner--level3 .banner__deal { height: auto; margin: 0; padding: 11px 0 13px 27px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var5.banner--level3 .banner__deal { padding: 18px 0 19px 27px; }
}
@media only screen and (max-width:40em) { .banner--var5.banner--level3 .banner__deal { padding: 12px 0 14px 12px; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner__deal-value { font-size: 108px; } .banner--var3.banner--freetype.banner--half .banner__deal { padding-top: 24px; }
}
.banner--var3.banner--freetype .banner__deal { padding-top: 16px;
}
.banner--var3 .banner__deal span:nth-child(n+2) { padding-left: 10px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var3.banner--freetype .banner__deal { padding-top: 24px; } .banner--var3 .banner__deal span:nth-child(n+2) { padding-left: 7px; }
}
@media only screen and (max-width:40em) { .banner--var3.banner--freetype .banner__deal { padding-top: 17px; } .banner--var3 .banner__deal span:nth-child(n+2) { padding-left: 3px; }
}
.banner--var3.banner--half .banner__deal span:nth-child(n+2) { padding-left: 10px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var3.banner--half .banner__deal span:nth-child(n+2) { padding-left: 7px; }
}
@media only screen and (max-width:40em) { .banner--var3.banner--half .banner__deal span:nth-child(n+2) { padding-left: 3px; }
}
.banner--var3.banner--freetype .banner__deal span:nth-child(n+2) { padding-left: 12px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var3.banner--freetype .banner__deal span:nth-child(n+2) { padding-left: 9px; }
}
@media only screen and (max-width:40em) { .banner--var3.banner--freetype .banner__deal span:nth-child(n+2) { padding-left: 3px; }
}
.banner--var3.banner--half.banner--freetype .banner__deal span:nth-child(n+2) { padding-left: 9px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var3.banner--half.banner--freetype .banner__deal span:nth-child(n+2) { padding-left: 9px; }
}
@media only screen and (max-width:40em) { .banner--var3.banner--half.banner--freetype .banner__deal span:nth-child(n+2) { padding-left: 3px; }
}
.banner--var5 .banner__deal { margin-bottom: 25px; padding-left: 36px;
}
@media only screen and (max-width:64em) { .banner--var5 .banner__deal { padding-left: 25px; }
}
@media only screen and (max-width:40em) { .banner--var5 .banner__deal { margin-bottom: 25px; padding-left: 12px; }
}
.banner--var7 .banner__deal { text-align: center; margin-bottom: 0;
}
.banner__deal .banner__deal-up-to { display: inline-block; width: 1em; font-size: .45em; line-height: .9; margin-left: .2em;
}
@media only screen and (min-width:64.063em) { .banner__trade-msg, .rating-stars { margin-bottom: 15px; }
}
.banner--var3 .banner__deal--save { font-size: 98px;
}
@media only screen and (max-width:64em) { .banner--var3 .banner__deal--save { font-size: 76px; }
}
@media only screen and (max-width:40em) { .banner--var3 .banner__deal--save { font-size: 34px; }
}
@media only screen and (min-width:64.063em) { .banner--var3.banner--half .banner__deal--save { font-size: 76px; }
}
@media only screen and (max-width:64em) { .banner--var3.banner--half .banner__deal--save { font-size: 76px; }
}
@media only screen and (max-width:40em) { .banner--var3.banner--half .banner__deal--save { font-size: 34px; }
}
.banner--var3.banner--freetype .banner__deal-value { font-size: 68px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner__trade-msg, .rating-stars { margin-bottom: 20px; } .banner--var3.banner--freetype .banner__deal-value { font-size: 54px; }
}
@media only screen and (max-width:40em) { .banner--var3.banner--freetype .banner__deal-value { font-size: 24px; }
}
@media only screen and (min-width:64.063em) { .banner--var3.banner--freetype.banner--half .banner__deal-value { font-size: 54px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var3.banner--freetype.banner--half .banner__deal-value { font-size: 54px; }
}
@media only screen and (max-width:40em) { .banner--var3.banner--freetype.banner--half .banner__deal-value { font-size: 24px; }
}
.banner--var3 .banner__text--large,
.banner--var3 .banner__text--medium,
.banner--var3 .banner__text--small,
.banner--var3 .banner__text--xlarge,
.banner--var3 .banner__text--xsmall,
.banner--var3 .banner__text--xxlarge { font-size: 68px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var3 .banner__text--large, .banner--var3 .banner__text--medium, .banner--var3 .banner__text--small, .banner--var3 .banner__text--xlarge, .banner--var3 .banner__text--xsmall, .banner--var3 .banner__text--xxlarge { font-size: 54px; }
}
@media only screen and (max-width:40em) { .banner--var3 .banner__text--large, .banner--var3 .banner__text--medium, .banner--var3 .banner__text--small, .banner--var3 .banner__text--xlarge, .banner--var3 .banner__text--xsmall, .banner--var3 .banner__text--xxlarge { font-size: 24px; }
}
@media only screen and (min-width:64.063em) { .banner--var3.banner--half .banner__text--large, .banner--var3.banner--half .banner__text--medium, .banner--var3.banner--half .banner__text--small, .banner--var3.banner--half .banner__text--xlarge, .banner--var3.banner--half .banner__text--xsmall, .banner--var3.banner--half .banner__text--xxlarge { font-size: 54px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var3.banner--half .banner__text--large, .banner--var3.banner--half .banner__text--medium, .banner--var3.banner--half .banner__text--small, .banner--var3.banner--half .banner__text--xlarge, .banner--var3.banner--half .banner__text--xsmall, .banner--var3.banner--half .banner__text--xxlarge { font-size: 54px; }
}
@media only screen and (max-width:40em) { .banner--var3.banner--half .banner__text--large, .banner--var3.banner--half .banner__text--medium, .banner--var3.banner--half .banner__text--small, .banner--var3.banner--half .banner__text--xlarge, .banner--var3.banner--half .banner__text--xsmall, .banner--var3.banner--half .banner__text--xxlarge { font-size: 24px; }
}
@media only screen and (min-width:64.063em) { .banner--level3 .banner__deal-text, .banner--level3 .banner__deal-value { font-size: 78px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--level3 .banner__deal-text, .banner--level3 .banner__deal-value { font-size: 64px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner__deal-text, .banner--level3 .banner__deal-value { font-size: 34px; } .banner--level3 .banner__deal-value { font-size: 50px; line-height: .918; }
}
@media only screen and (min-width:64.063em) { .banner--level3.banner--level3--under .banner__deal-text, .banner--level3.banner--level3--under .banner__deal-value { font-size: 68px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--level3.banner--level3--under .banner__deal-text, .banner--level3.banner--level3--under .banner__deal-value { font-size: 54px; }
}
@media only screen and (max-width:40em) { .banner--level3.banner--level3--under .banner__deal-text, .banner--level3.banner--level3--under .banner__deal-value { font-size: 24px; } .banner--level3.banner--level3--under .banner__deal-value { font-size: 50px; line-height: .918; }
}
.banner--var7 .banner__deal-text { font-size: 60px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var7 .banner__deal-text { font-size: 46px; }
}
@media only screen and (max-width:40em) { .banner--var7 .banner__deal-text { font-size: 24px; }
}
.banner--var8 .banner__deal-text { font-size: 48px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var8 .banner__deal-text { font-size: 46px; }
}
@media only screen and (max-width:40em) { .banner--var8 .banner__deal-text { font-size: 16px; line-height: 1em; font-family: screwfix_betabold; }
}
.banner--var3.banner--level3 .banner__deal-text { font-size: 48px; color: #fff200; transform: scale(1.5,1); -webkit-transform: scale(1.5,1); -moz-transform: scale(1.5,1); -ms-transform: scale(1.5,1); -o-transform: scale(1.5,1); transform-origin: left; -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; display: block;
}
@media only screen and (max-width:40em) { .banner--var3.banner--level3 .banner__deal-text { font-size: 24px; }
}
.banner--var3.banner--level3 .banner__text { font-size: 30px; display: table-cell; vertical-align: middle; padding-left: 27px;
}
.banner--var7 .banner__text span:empty,
.banner--var8 .banner__text span:empty { display: none;
}
@media only screen and (max-width:40em) { .banner--var3.banner--level3 .banner__text { font-size: 13px; padding-left: 17px; }
}
.banner--var5.banner--level3 .banner__deal-text { font-size: 60px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var5.banner--level3 .banner__deal-text { font-size: 46px; }
}
@media only screen and (max-width:40em) { .banner--var5.banner--level3 .banner__deal-text { font-size: 26px; }
}
.banner--var4.banner--half .banner__prod-title { font-size: 30px; line-height: 1; font-family: screwfix_betabold;
}
.banner__text { width: 410px;
}
@media only screen and (max-width:64em) { .banner__text { width: 290px; }
}
@media only screen and (max-width:40em) { .banner--var4.banner--half .banner__prod-title { font-size: 18px; } .banner__text { width: 130px; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner__text { width: 266px; }
}
.banner--var3 .banner__text { padding-left: 36px;
}
@media only screen and (max-width:64em) { .banner--var3 .banner__text { padding-left: 25px; }
}
@media only screen and (max-width:40em) { .banner--half .banner__text { width: 130px; } .banner--var3 .banner__text { padding-left: 12px; }
}
.banner--level3 .banner__text { width: 440px; padding-right: 40px;
}
@media only screen and (max-width:64em) { .banner--level3 .banner__text { width: 340px; padding-right: 20px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner__text { width: 140px; padding-right: 10px; }
}
.banner--var7 .banner__text { font-size: 24px; width: auto; text-align: center; padding-right: 0; text-transform: none; font-family: screwfix_betabold;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var7 .banner__text { font-size: 18px; }
}
@media only screen and (max-width:40em) { .banner--var7 .banner__text { font-size: 13px; }
}
.banner--var7 .banner__text span { margin-top: 3px;
}
.banner--var8 .banner__text { font-size: 36px; width: auto; padding-right: 0; color: #fff;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var8 .banner__text { font-size: 30px; }
}
@media only screen and (max-width:40em) { .banner--var8 .banner__text { font-size: 13px; }
}
.banner--var8 .banner__text span { margin-top: 10px;
}
.banner__prod-title { font-family: screwfix_betabold; text-align: left; margin-bottom: 20px;
}
@media only screen and (max-width:64em) { .banner__prod-title { font-size: 30px; line-height: 1; }
}
@media only screen and (max-width:40em) { .banner__prod-title { margin-bottom: 0; font-size: 18px; }
}
.banner--var4 .banner__prod-title { color: #ed1c24;
}
.banner--var6 .banner__prod-title { color: #fff; margin-top: 34%; font-size: 27px; max-width: 88%;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var6 .banner__prod-title { margin: 30px 0; font-size: 30px; max-width: 92%; display: table-cell; vertical-align: middle; }
}
@media only screen and (max-width:64em) { .banner--var4 .banner__prod-title { text-align: center; color: #fff; }
}
@media only screen and (max-width:40em) { .banner--var6 .banner__prod-title { margin: 30px 0; font-size: 18px; max-width: 92%; display: table-cell; vertical-align: middle; } .banner--var4 .banner__prod-title { margin-bottom: 10px; }
}
.banner .banner__bullets li { text-align: left; color: #636363; list-style-type: none; margin-bottom: 5px; padding-left: 35px; background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/img/tick.png?yocs=n_s_) 10px top no-repeat;
}
.banner__deal-msg { margin: 15px 3px 0 20px; font-size: 16px; font-weight: 700; color: #fff;
}
@media only screen and (max-width:64em) { .banner__deal-msg { margin-top: 37px; font-size: 30px; }
}
@media only screen and (max-width:40em) { .banner__deal-msg { margin-top: 20px; font-size: 13px; }
}
@media only screen and (max-width:64em) { .banner--var6 .banner__deal-msg { width: 80%; margin-top: 1.5%; font-size: 27px; max-width: 500px; }
}
.banner__deal-msg .hide { display: inline;
}
.banner .banner__bullets--search { padding-left: 27px; position: relative; height: 130px; padding-top: 25px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner .banner__bullets--search { padding-left: 27px; }
}
@media only screen and (max-width:40em) { .banner--var6 .banner__deal-msg { margin-top: 3%; font-size: 17px; max-width: 250px; margin-right: 55px; } .banner__deal-msg .hide { display: none; } .banner .banner__bullets--search { padding-left: 12px; height: 112px; padding-top: 16px; }
}
.banner .banner__bullets--search li { color: #636363; list-style-type: none; margin-bottom: 14px; font-size: 13px;
}
.banner .banner__bullets--search li a { color: #636363;
}
.banner .banner__bullets--search li a:hover { color: #0053a0;
}
.banner__bullets--search li:nth-child(n+4) { margin-left: 175px;
}
.banner__bullets--search li:nth-child(4) { margin-top: -86px;
}
.banner__deal span,
.banner__product-title span,
.banner__text span,
.banner__title span { display: block;
}
.banner--var3 .banner__deal span,
.banner--var5 .banner__deal span { display: inline;
}
.banner--var3 .banner__deal span span,
.banner--var5 .banner__deal span span { display: block;
}
.banner--var3 .banner__deal .banner__deal-up-to,
.banner--var5 .banner__deal .banner__deal-up-to { display: inline-block; margin-right: 0;
}
.banner--level3 .banner__deal span,
.banner--level3 .banner__title span { display: inline;
}
.banner--level3 .banner__deal span span,
.banner--level3 .banner__title span span { display: block;
}
.banner--level3 .banner__deal .banner__deal-up-to,
.banner--level3 .banner__title .banner__deal-up-to { display: inline-block; margin-right: 0;
}
.banner--level3 .banner__deal span:nth-child(1),
.banner--level3 .banner__title span:nth-child(1) { margin-right: .1em;
}
@media only screen and (min-width:40.063em) { .banner--level3 .banner__deal span.banner__deal-up-to, .banner--level3 .banner__title span.banner__deal-up-to { margin-right: -7px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner__deal span, .banner--level3 .banner__title span { display: block; } .banner--level3 .banner__deal span:nth-child(2), .banner--level3 .banner__title span:nth-child(2) { font-size: 50px; line-height: .918; }
}
.banner--var8 .banner__deal { color: #fff;
}
.banner--var8 .banner__deal span span { display: inline; color: #feec00;
}
.banner--var8:hover .banner__deal span span { text-decoration: underline;
}
.banner--var7 .banner__deal span:nth-child(1),
.banner--var8 .banner__deal span:nth-child(1) { margin-right: 0;
}
.banner__text--base { font-size: 16px; line-height: 1.125; font-family: screwfix_betaregular;
}
.banner__text--large,
.banner__text--medium,
.banner__text--small,
.banner__text--xlarge,
.banner__text--xxlarge { font-family: screwfix_betaheavy;
}
.banner__text--small { font-size: 68px; line-height: .956;
}
@media only screen and (max-width:64em) { .banner__text--small { font-size: 54px; }
}
@media only screen and (max-width:40em) { .banner__text--small { font-size: 24px; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner__text--small { font-size: 54px; }
}
.banner--level3 .banner__text--small { font-size: 60px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--level3 .banner__text--small { font-size: 46px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner__text--small { font-size: 24px; }
}
.banner__text--medium { font-size: 98px; line-height: .918;
}
@media only screen and (max-width:64em) { .banner__text--medium { font-size: 76px; }
}
@media only screen and (max-width:40em) { .banner__text--medium { font-size: 34px; line-height: 1; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner__text--medium { font-size: 76px; }
}
.banner--level3 .banner__text--medium { font-size: 68px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--level3 .banner__text--medium { font-size: 54px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner__text--medium { font-size: 24px; line-height: .918; }
}
.banner__text--large { font-size: 120px; line-height: .917;
}
@media only screen and (max-width:64em) { .banner__text--large { font-size: 92px; }
}
@media only screen and (max-width:40em) { .banner__text--large { font-size: 42px; line-height: .952; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner__text--large { font-size: 92px; }
}
.banner--level3 .banner__text--large { font-size: 78px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--level3 .banner__text--large { font-size: 64px; }
}
@media only screen and (max-width:40em) { .banner--level3 .banner__text--large { font-size: 34px; }
}
.banner__text--xlarge { font-size: 142px; line-height: .775; margin-bottom: 12px;
}
@media only screen and (max-width:64em) { .banner__text--xlarge { font-size: 108px; line-height: .833; margin-bottom: 10px; }
}
@media only screen and (max-width:40em) { .banner__text--xlarge { font-size: 50px; margin-bottom: 8px; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner__text--xlarge { font-size: 108px; }
}
.banner__text--xxlarge { font-size: 142px; line-height: .775; margin-bottom: 12px;
}
@media only screen and (max-width:64em) { .banner__text--xxlarge { font-size: 108px; line-height: .833; margin-bottom: 10px; }
}
@media only screen and (max-width:40em) { .banner__text--xxlarge { font-size: 50px; margin-bottom: 8px; }
}
@media only screen and (min-width:40.063em) { .banner--half .banner__text--xxlarge { font-size: 108px; }
}
.banner__content-wrapper { position: relative; text-transform: uppercase; display: table; width: 100%;
}
.banner__content-wrapper .banner__content { position: relative; display: table-cell; vertical-align: middle;
}
.banner--var1 .banner__content-wrapper,
.banner--var2 .banner__content-wrapper,
.banner--var4 .banner__content-wrapper { width: 410px; height: 356px; padding-left: 66px; padding-right: 36px;
}
@media only screen and (max-width:64em) { .banner--var1 .banner__content-wrapper, .banner--var2 .banner__content-wrapper, .banner--var4 .banner__content-wrapper { width: 290px; padding-left: 36px; padding-right: 16px; }
}
@media only screen and (max-width:40em) { .banner--var1 .banner__content-wrapper, .banner--var2 .banner__content-wrapper, .banner--var4 .banner__content-wrapper { height: 192px; width: 130px; padding-left: 12px; padding-right: 0; }
}
.banner--var3 .banner__content-wrapper,
.banner--var5 .banner__content-wrapper { height: 356px;
}
.banner--var3 .banner__content-wrapper .banner__content,
.banner--var5 .banner__content-wrapper .banner__content { vertical-align: top;
}
@media only screen and (max-width:40em) { .banner--var3 .banner__content-wrapper, .banner--var5 .banner__content-wrapper { height: 192px; }
}
.banner--var1.banner--border .banner__content-wrapper,
.banner--var2.banner--border .banner__content-wrapper { height: 348px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var1.banner--border .banner__content-wrapper, .banner--var2.banner--border .banner__content-wrapper { width: 290px; }
}
@media only screen and (max-width:40em) { .banner--var1.banner--border .banner__content-wrapper, .banner--var2.banner--border .banner__content-wrapper { height: 189px; }
}
.banner--var5.banner--border .banner__content-wrapper { height: 348px;
}
@media only screen and (max-width:40em) { .banner--var5.banner--border .banner__content-wrapper { height: 189px; }
}
.banner--var4.banner--border .banner__content-wrapper { height: 350px;
}
@media only screen and (max-width:40em) { .banner--var4.banner--border .banner__content-wrapper { height: 193px; width: 120px; }
}
.banner--var1 .banner__content-wrapper { background: #ed1c24; color: #fff;
}
.banner--var4 .banner__content-wrapper { text-transform: none; background: #000; color: #fff; text-align: center; width: 312px; padding-left: 6px; padding-right: 20px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var4 .banner__content-wrapper { width: 250px; }
}
@media only screen and (max-width:40em) { .banner--var4 .banner__content-wrapper { width: 120px; padding-left: 6px; padding-right: 12px; }
}
.banner--var1 .banner__content-wrapper:after { display: block; content: ""; width: 0; height: 0; position: absolute; right: -30px; top: 0; border-top: 188px solid transparent; border-bottom: 188px solid transparent; border-left: 30px solid #ed1c24; -moz-transform: scale(.9999);
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var1 .banner__content-wrapper:after { right: -29px; border-top-width: 185px; }
}
@media only screen and (max-width:40em) { .banner--var1 .banner__content-wrapper:after { border-top: 103px solid transparent; border-bottom: 103px solid transparent; border-left: 15px solid #ed1c24; right: -15px; }
}
.banner--var1.banner--border .banner__content-wrapper:after { border-top: 175px solid transparent; border-bottom: 175px solid transparent;
}
.banner--var1.banner--level3 .banner__content-wrapper { height: 186px; width: 490px; padding-left: 28px; padding-right: 0;
}
@media only screen and (max-width:64em) { .banner--var1.banner--level3 .banner__content-wrapper { padding-left: 28px; padding-right: 0; width: 390px; }
}
@media only screen and (max-width:40em) { .banner--var1.banner--border .banner__content-wrapper:after { border-top: 95px solid transparent; border-bottom: 95px solid transparent; border-left: 15px solid #ed1c24; right: -15px; } .banner--var1.banner--level3 .banner__content-wrapper { height: 129px; padding-left: 12px; padding-right: 0; width: 140px; }
}
.banner--var1.banner--border.banner--level3 .banner__content-wrapper,
.banner--var2.banner--border.banner--level3 .banner__content-wrapper { height: 164px;
}
.banner--level3 .banner__content-wrapper:after { border-top: 94px solid transparent; border-bottom: 94px solid transparent;
}
@media only screen and (max-width:40em) { .banner--var1.banner--border.banner--level3 .banner__content-wrapper, .banner--var2.banner--border.banner--level3 .banner__content-wrapper { height: 119px; } .banner--level3 .banner__content-wrapper:after { border-top: 65px solid transparent; border-bottom: 65px solid transparent; border-left: 15px solid #ed1c24; right: -15px; }
}
.banner--level3.banner--border .banner__content-wrapper:after { border-top: 82px solid transparent; border-bottom: 82px solid transparent;
}
.banner--var7 .banner__content-wrapper { margin-bottom: 16px; margin-top: 13px;
}
.banner--var3.banner--level3 .banner__content-wrapper,
.banner--var8 .banner__content-wrapper { height: 168px;
}
@media only screen and (max-width:40em) { .banner--level3.banner--border .banner__content-wrapper:after { border-top: 59px solid transparent; border-bottom: 59px solid transparent; border-left: 15px solid #ed1c24; right: -15px; } .banner--var7 .banner__content-wrapper { margin-bottom: 11px; margin-top: 11px; } .banner--var3.banner--level3 .banner__content-wrapper, .banner--var8 .banner__content-wrapper { height: 123px; }
}
.banner--var3.banner--level3 .banner__content-wrapper { width: 101%;
}
.banner--var5.banner--level3 .banner__content-wrapper { height: 229px;
}
@media only screen and (max-width:40em) { .banner--var5.banner--level3 .banner__content-wrapper { height: 169px; }
}
.banner--var5.banner--level3.banner--border .banner__content-wrapper { height: 207px;
}
@media only screen and (max-width:40em) { .banner--var5.banner--level3.banner--border .banner__content-wrapper { height: 159px; }
}
.banner--var3.banner--level3 .banner__content--inner { height: 106px; display: table;
}
@media only screen and (max-width:40em) { .banner--var3.banner--level3 .banner__content--inner { height: 81px; }
}
.banner--var5.banner--level3 .banner__content--inner { height: 138px; display: table; text-transform: none;
}
@media only screen and (max-width:40em) { .banner--var5.banner--level3 .banner__content--inner { height: 115px; }
}
.banner--var5.banner--level3.banner--border .banner__content--inner { height: 130px;
}
.banner--var8 .banner__deal,
.banner--var8 .banner__text { text-align: left; margin-right: 7px;
}
.banner--var8 .banner__content:nth-child(1) { width: 138px;
}
@media only screen and (max-width:40em) { .banner--var5.banner--level3.banner--border .banner__content--inner { height: 105px; } .banner--var8 .banner__content:nth-child(1) { width: 85px; }
}
.banner__trade-quote:after,
.banner__trade-quote:before { content: '"';
}
.banner__trade-quote:empty { display: none;
}
.banner__product-panel { width: 365px; text-transform: none;
}
.banner--var4 .banner__product-panel { display: table-cell; vertical-align: middle; position: relative;
}
@media only screen and (max-width:64em) { .banner--var4 .banner__product-panel { position: static; width: auto; }
}
.banner--var5 .banner__product-panel { display: table-cell; vertical-align: middle; position: relative;
}
.banner--var6 .banner__product-panel { width: 248px; padding-left: 11px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var6 .banner__product-panel { width: 248px; padding-left: 18px; height: 365px; display: table; padding-top: 40px; }
}
@media only screen and (max-width:40em) { .banner--var6 .banner__product-panel { width: 90px; height: 194px; display: table; padding-top: 18px; }
}
@media only screen and (min-width:64.063em) { .banner--var4:not(.banner--half) .banner__product-wrapper { left: 360px; top: 0; position: absolute; width: 286px; height: 348px; display: table; }
}
.banner--var5 .banner__product-wrapper { padding-left: 36px; position: absolute; width: 326px; height: 263px; display: table; bottom: 0;
}
@media only screen and (max-width:64em) { .banner--var5 .banner__product-wrapper { width: 255px; padding-left: 25px; }
}
@media only screen and (max-width:40em) { .banner--var5 .banner__product-wrapper { width: 110px; padding-left: 12px; height: 140px; }
}
.banner--var5.banner--border .banner__product-wrapper { height: 241px;
}
.banner__img-align { position: absolute; bottom: 0; left: 370px;
}
@media only screen and (max-width:64em) { .banner__img-align { left: 260px; }
}
@media only screen and (max-width:40em) { .banner--var5.banner--border .banner__product-wrapper { height: 130px; } .banner__img-align { left: 112px; }
}
@media only screen and (min-width:64.063em) { .banner--var4 .banner__img-align { left: 644px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var4 .banner__img-align { left: 255px; }
}
@media only screen and (max-width:40em) { .banner--var4 .banner__img-align { left: 143px; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var1 .banner__img-align, .banner--var5 .banner__img-align { left: 260px; }
}
.banner--var6 .banner__img-align { bottom: -9px;
}
@media only screen and (min-width:64.063em) { .banner--var6 .banner__img-align { left: 0; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var6 .banner__img-align { left: 35%; }
}
@media only screen and (max-width:40em) { .banner--var6 .banner__img-align { left: 34%; }
}
.banner--var6 .banner__img-align.add--msg { bottom: 13px;
}
.banner--level3 .banner__img-align { left: 440px;
}
@media only screen and (max-width:64em) { .banner--level3 .banner__img-align { left: 340px; }
}
.banner__img { position: relative; z-index: 2; max-height: 352px;
}
@media only screen and (max-width:40em) { .banner--level3 .banner__img-align { left: 140px; } .banner__img { max-height: 193px; } .add--msg .banner__img { max-height: 146px; }
}
.banner--var2 .banner__img,
.banner--var5 .banner__img { max-height: 374px;
}
@media only screen and (max-width:40em) { .banner--var2 .banner__img, .banner--var5 .banner__img { max-height: 203px; } .banner--var5.banner--border .banner__img { max-height: 193px; }
}
.banner--var4 .banner__img { max-height: 348px;
}
@media only screen and (max-width:40em) { .banner--var4 .banner__img { max-height: 189px; }
}
.banner--level3 .banner__img { max-height: 186px;
}
@media only screen and (max-width:40em) { .banner--level3 .banner__img { max-height: 128px; }
}
.banner--level3.banner--border .banner__img { max-height: 166px;
}
@media only screen and (max-width:40em) { .banner--level3.banner--border .banner__img { max-height: 121px; }
}
.banner--level3.banner--var5 .banner__img { max-height: 229px;
}
@media only screen and (max-width:40em) { .banner--level3.banner--var5 .banner__img { max-height: 128px; }
}
.banner--level3.banner--var5.banner--border .banner__img { max-height: 207px;
}
.banner__promo-icon { position: absolute; top: 20px; right: 20px; z-index: 2; max-width: 78px; height: auto;
}
.banner__save-flag,
.price-point { font-weight: 400; z-index: 5; position: absolute;
}
@media only screen and (max-width:64em) { .banner__promo-icon { top: 15px; right: 15px; }
}
@media only screen and (max-width:40em) { .banner--level3.banner--var5.banner--border .banner__img { max-height: 121px; } .banner__promo-icon { max-width: 45px; top: 8px; right: 8px; }
}
.banner__trade-icon { display: block; margin: 0 auto 25px; max-width: 145px; height: auto;
}
@media only screen and (max-width:64em) { .banner__trade-icon { max-width: 110px; margin-bottom: 15px; }
}
.banner--var8 .banner__trade-icon { margin: 0 26px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var6 .banner__img-align.add--msg { bottom: -20px; } .banner--var8 .banner__trade-icon { margin: 0 16px; }
}
@media only screen and (max-width:40em) { .banner__trade-icon { max-width: 65px; } .banner--var8 .banner__trade-icon { margin: 0 8px; }
}
.banner__product-icon { display: block; margin-bottom: 25px; max-height: 40px; width: auto;
}
@media only screen and (max-width:40em) { .banner__product-icon { max-height: 26px; margin-bottom: 15px; }
}
.banner__deal-icon { float: left; margin: 10px; max-width: 199px; height: auto;
}
@media only screen and (max-width:64em) { .banner__deal-icon { max-width: 278px; margin: 20px 20px 57px 18px; }
}
@media only screen and (max-width:40em) { .banner__deal-icon { max-width: 138px; margin: 15px 15px 26px 12px; }
}
.price-point { bottom: 22px; right: 42px; border-radius: 50%; padding: 32px 0 0; display: block; width: 155px; height: 155px;
}
@media only screen and (max-width:64em) { .price-point { right: 15px; bottom: 12px; }
}
.banner--var3 .price-point { bottom: 12px; right: auto; left: 36px;
}
@media only screen and (max-width:64em) { .banner--var3 .price-point { left: 25px; }
}
.banner--var6 .price-point { bottom: 24px; right: 6px; border: solid;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var6 .banner__deal-icon { margin: 1% 2%; } .banner--var6 .price-point { bottom: 3px; }
}
@media only screen and (max-width:40em) { .banner--var6 .banner__deal-icon { margin: 5px 5px 26px; } .price-point { transform: scale(.55) translate(45%,45%); -webkit-transform: scale(.55) translate(45%,45%); } .banner--var3 .price-point { left: 12px; transform: scale(.55) translate(-45%,45%); -webkit-transform: scale(.55) translate(-45%,45%); } .banner--var6 .price-point { bottom: 12px; }
}
@media only screen and (min-width:64.063em) { .banner--level3 .price-point { right: 15px; bottom: 8px; }
}
@media only screen and (max-width:64em) { .banner--level3 .price-point { right: 9px; bottom: 8px; }
}
.banner__save-flag { top: -2px; right: 62px; padding: 10px 6px 6px; background: #ed1c24; color: #ff0; font-family: screwfix_betabold; text-transform: uppercase; font-size: 36px; line-height: .9em; text-align: center; width: 100px; border: 2px solid #fff;
}
.banner__save-flag:after,
.banner__save-flag:before { content: ""; width: 0; height: 0; left: 0; position: absolute; border-left: 48px solid transparent; border-right: 48px solid transparent;
}
.banner__save-flag:after { bottom: -20px; border-top: 20px solid #ed1c24;
}
.banner__save-flag:before { bottom: -22px; border-top: 20px solid #fff;
}
@media only screen and (max-width:64em) { .banner__save-flag { right: 29px; } .banner--half.banner .banner__title, .banner--half.banner--var3 .banner__deal { margin-bottom: 5px; }
}
@media only screen and (max-width:40em) { .banner__save-flag { transform: scale(.55) translate(45%,-45%); -webkit-transform: scale(.55) translate(45%,-45%); right: 17px; } .banner--level3 .banner__save-flag { right: 12px; }
}
.banner--level3 .banner__save-flag { right: 12px;
}
.banner--var6 .banner__save-flag { top: 85px; right: 30px;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--var6 .banner__save-flag { top: 13px; right: 3.5%; }
}
@media only screen and (max-width:40em) { .banner--var6 .banner__save-flag { top: 3px; right: 12px; } .banner--half.banner.banner--border { border-width: 6px; }
}
.banner__save-flag .banner__save-flag-price { display: block; color: #fff; text-align: center;
}
.banner__save-flag .banner__save-flag-price sup { font-size: 60%; top: -.5em;
}
@media only screen and (max-width:64em) { .banner--half.banner--var3 .banner__deal { margin-bottom: 10px; } .banner--half.banner--var5 .banner__deal { margin-bottom: 18px; }
}
@media only screen and (min-width:40.063em) { .banner--half.banner--var5 .banner__product-wrapper { padding-left: 15px; width: 255px; } .banner--half.banner--var3 .banner__deal, .banner--half.banner--var5 .banner__deal { padding-top: 15px; padding-bottom: 15px; }
}
@media only screen and (min-width:64.063em) { .banner--half.banner .banner__trade-msg, .banner--half.banner .rating-stars { margin-bottom: 20px; } .banner--half.banner--var3 .banner__deal, .banner--half.banner--var3 .banner__text, .banner--half.banner--var5 .banner__deal { padding-left: 25px; } .banner--half.banner .banner__prod-title { font-size: 24px; line-height: 1; }
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .banner--half.banner--var3 .banner__deal, .banner--half.banner--var3 .banner__text, .banner--half.banner--var5 .banner__deal { padding-left: 25px; }
}
@media only screen and (max-width:40em) { .banner--half .banner__wrapper { height: 192px; } .banner--half.banner--var4 .banner__wrapper { height: 193px; } .banner--half.banner--var3 .banner__deal, .banner--half.banner--var3 .banner__text, .banner--half.banner--var5 .banner__deal { padding-left: 12px; }
}
@media only screen and (min-width:64.063em) { .banner--half.banner--var1 .banner__content-wrapper, .banner--half.banner--var2 .banner__content-wrapper { width: 290px; padding-left: 36px; padding-right: 16px; }
}
@media only screen and (max-width:40em) { .banner--half.banner--var1 .banner__content-wrapper, .banner--half.banner--var2 .banner__content-wrapper { height: 205px; width: 130px; padding-left: 12px; padding-right: 0; } .banner--half.banner--var1.banner--border .banner__content-wrapper, .banner--half.banner--var2.banner--border .banner__content-wrapper { height: 189px; } .banner--half.banner--var1.banner--border .banner__content-wrapper:after, .banner--half.banner--var2.banner--border .banner__content-wrapper:after { border-top: 94px solid transparent; border-bottom: 94px solid transparent; border-left: 15px solid #ed1c24; right: -15px; }
}
@media only screen and (min-width:64.063em) { .banner--half.banner--var4 .banner__content-wrapper { width: 250px; }
}
@media only screen and (max-width:40em) { .banner--half.banner--var4 .banner__content-wrapper { width: 120px; padding-left: 6px; padding-right: 12px; } .banner--half.banner--var1 .banner__content-wrapper:after { border-top: 99px solid transparent; border-bottom: 99px solid transparent; border-left: 15px solid #ed1c24; right: -15px; }
}
@media only screen and (min-width:40.063em) { .banner--half.banner--var3 .banner__deal-value, .banner--half.banner--var5 .banner__deal-save, .banner--half.banner--var5 .banner__deal-text, .banner--half.banner--var5 .banner__deal-value { font-size: 76px; } .banner--half .banner__img-align { left: 260px; }
}
@media only screen and (max-width:40em) { .banner--half .banner__img-align { left: 112px; }
}
@media only screen and (min-width:40.063em) { .banner--half.banner--var1 .banner__img-align, .banner--half.banner--var5 .banner__img-align { left: 260px; } .banner--half.banner--var4 .banner__img-align { left: 255px; } .banner--half.banner .price-point { bottom: 12px; }
}
@media only screen and (min-width:64.063em) { .banner--half.banner--var5 .banner__product-panel { width: 250px; padding-left: 12px; } .banner--half.banner--var4 .banner__product-panel { position: static; width: auto; } .banner--half.banner--var4 .banner__prod-title { text-align: center; color: #fff; margin-top: 10px; } .banner--half .banner__promo-icon { top: 15px; right: 15px; }
}
@media only screen and (max-width:40em) { .banner--half.banner--var4 .banner__img-align { left: 143px; } .banner--half .banner__promo-icon { max-width: 45px; top: 8px; right: 8px; } .banner--half .banner__product-icon { max-height: 26px; margin-bottom: 15px; }
}
@media only screen and (min-width:64.063em) { .banner--half .banner__trade-icon { max-width: 110px; margin-bottom: 15px; } .banner--half.banner .price-point { right: 15px; } .banner--half.banner--var3 .price-point { left: 25px; } .banner--half .banner__save-flag { right: 29px; } .banner--var4.banner--half .banner__bullets, .banner--var4.banner--half .banner__product-icon, .banner--var5.banner--half .banner__bullets { display: none; }
}
.banner--container__mx { max-width: 893px!important;
}
@media only screen and (max-width:64em) { .banner--container__mx { max-width: 975px!important; } .banner--var4 .banner__bullets, .banner--var4 .banner__product-icon { display: none; }
}
@media only screen and (max-width:40em) { .banner--half.banner--var3 .price-point { left: 12px; transform: scale(.55) translate(-45%,45%); -webkit-transform: scale(.55) translate(-45%,45%); } .banner--half .banner__save-flag { transform: scale(.55) translate(45%,-45%); -webkit-transform: scale(.55) translate(45%,-45%); right: 17px; } .banner--container__mx { max-width: 607px!important; } .banner--var5 .banner__bullets, .banner__bullets--search li:nth-child(n+4), .banner__trade-msg, .banner__trade-quote { display: none; }
}
.dot-header { position: absolute; width: 100%; height: 100%; top: 5px; left: 10px; z-index: 1; text-indent: -9999px;
}
.dot--weekend .dot-header { max-width: 96%; background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/img/deal-weekend-logo.png?yocs=n_s_) no-repeat; -o-background-size: 100% auto; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .dot-header { top: 12px; left: 17px; } .dot--weekend .dot-header { width: 76%; max-width: 525px; }
}
@media only screen and (max-width:40em) { .dot-header { top: 0; left: 7px; } .dot--weekend .dot-header { width: 73%; max-width: 295px; }
}
.dot--day .dot-header { max-width: 96%; background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/img/deal-logo.png?yocs=n_s_) no-repeat; -o-background-size: 100% auto; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .dot--day .dot-header { width: 76%; max-width: 525px; }
}
@media only screen and (max-width:40em) { .dot--day .dot-header { width: 73%; max-width: 295px; }
}
.dot--week .dot-header { max-width: 98%; background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/img/deal-week-logo.png?yocs=n_s_) no-repeat; -o-background-size: 100% auto; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .dot--week .dot-header { width: 76%; max-width: 525px; }
}
@media only screen and (max-width:40em) { .dot--week .dot-header { width: 73%; max-width: 295px; }
}
.dot--11 .dot-header { max-width: 98%; background: url(//cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.2aa/assets/img/deal-logo-11.png?yocs=n_s_) no-repeat; -o-background-size: 100% auto; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto;
}
@media only screen and (min-width:40.063em) and (max-width:64em) { .dot--11 .dot-header { width: 76%; max-width: 525px; }
}
.half-price .banner__save-flag { padding: 6px 6px 0;
}
.half-price .banner__save-flag-text { font-size: 41px;
}
.save-up-to .banner__save-flag-text { font-size: 32px;
}
@media only screen and (max-width:40em) { .dot--11 .dot-header { width: 73%; max-width: 295px; } .half-price .banner__save-flag-text { font-size: 32px; line-height: .9em; } .save-up-to .banner__save-flag-text { font-size: 30px; }
}
.bogof .banner__save-flag-text { font-size: 25px; display: inline-block; line-height: .9em;
}
.great-deal .banner__save-flag-text { font-size: 30px;
}
@media only screen and (max-width:40em) { .two-for .banner__save-flag-text { font-size: 30px; line-height: .8em; } .great-deal .banner__save-flag-text { font-size: 28px; line-height: .8em; }
}
.save-over .banner__save-flag-text { font-size: 24px; line-height: .9em; display: inline-block;
}
.bogof .banner__save-flag-price { font-size: 33px; line-height: .8em;
}
.two-for .banner__save-flag-price { color: #ff0;
}
@media only screen and (max-width:40em) { .bogof .banner__save-flag-price { font-size: 30px; } .half-price .banner__save-flag-price { font-size: 32px; line-height: .9em; } .two-for .banner__save-flag-price { font-size: 30px; line-height: .8em; }
}
.great-deal .banner__save-flag-price { font-size: 40px;
}
@media only screen and (max-width:40em) { .great-deal .banner__save-flag-price { font-size: 36px; line-height: .9em; }
}
.up-to { display: inline-block; width: 1em; font-size: .45em; line-height: .95em; margin-left: .2em;
}
.banner__basket--msg { position: absolute; bottom: 0; left: 0; padding-left: 10px; background: #5e0201; color: #fff; line-height: 30px; font-size: 10px; width: 100%;
}
.slick-list,
.slick-slider,
.slick-track,
.slider-brands,
.slider-certona { position: relative;
}
.slick-slider { display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.slick-slider.slick-list,
.slick-slider.slick-track { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
}
.slick-list { display: block; overflow: hidden; margin: 0; padding: 0;
}
.slick-list:focus { outline: 0;
}
.slick-list.dragging { cursor: pointer; cursor: hand;
}
.slick-track { top: 0; left: 0; display: block;
}
.slick-track:after,
.slick-track:before { display: table; content: '';
}
.slick-track:after { clear: both;
}
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; z-index: 1; padding: 0 5px;
}
.slick-slide:focus { outline: 0;
}
.slick-slide img { display: block;
}
[dir=rtl] .slick-slide { float: right;
}
.slick-slide.slick-loading img { display: none;
}
.slick-initialized .slick-slide { display: block;
}
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent;
}
.slick-arrow.slick-hidden { display: none;
}
.slider-brands .pagi__link,
.slider-certona .pagi__link { position: absolute; top: -65px; right: 6px;
}
.slider-brands .pagi__link.slick-prev,
.slider-certona .pagi__link.slick-prev { right: 50px;
}
.sl__full { margin: 0 -.3em;
}
@media only screen and (min-width:64.063em) { .sl__full { margin-right: 0; }
}
.slider-banners { padding-bottom: 20px; margin-right: -.3em; margin-left: -.3em;
}
.slick-dots { margin: 13px 0 0; padding: 0; list-style: none; width: 100%; text-align: center;
}
.slick-dots li { margin: 0 6px; display: inline-block;
}
.slick-dots li a { width: 45px; height: 11px; display: block; background: #e7e7e7; cursor: pointer; text-indent: -9999px; box-shadow: inset 0 4px 5px 0 rgba(0,0,0,.29);
}
.slick-dots li a:hover { background: #acacac;
}
.slick-dots li.slick-active a { background: #0053a0; cursor: default;
}
@media only screen and (max-width:40em) { .break { width: 60%; word-wrap: break-word; display: block; line-height: 1em; }
}
@media print { .btn, .checkout-header__globalsign, .checkout-header__opening-times, .checkout-header__phone, .footer-wrp, .item-list--product-note, .item-list__title--type, .received, .title-buttons, [class*=icon] { display: none!important; } * { color: #000!important; font-size: 11px; } .wrp, body { background-color: #FFF!important; } .summary, .summary * { background-color: transparent!important; } .wrp.boxed { border: none; margin-bottom: 4px; } .wrp.boxed .inner { border: none; box-shadow: none; } .row .row { margin: 0; } .md-1 { width: 4.16667%; } .md-2 { width: 8.33333%; } .md-3 { width: 12.5%; } .md-4 { width: 16.66667%; } .md-5 { width: 20.83333%; } .md-6 { width: 25%; } .md-7 { width: 29.16667%; } .md-8 { width: 33.33333%; } .md-9 { width: 37.5%; } .md-10 { width: 41.66667%; } .md-11 { width: 45.83333%; } .md-12 { width: 50%; } .md-13 { width: 54.16667%; } .md-14 { width: 58.33333%; } .md-15 { width: 62.5%; } .md-16 { width: 66.66667%; } .md-17 { width: 70.83333%; } .md-18 { width: 75%; } .md-19 { width: 79.16667%; } .md-20 { width: 83.33333%; } .md-21 { width: 87.5%; } .md-22 { width: 91.66667%; } .md-23 { width: 95.83333%; } .md-24 { width: 100%; } .md-offset-0 { margin-left: 0!important; } .md-offset-1 { margin-left: 4.16667%!important; } .md-offset-2 { margin-left: 8.33333%!important; } .md-offset-3 { margin-left: 12.5%!important; } .md-offset-4 { margin-left: 16.66667%!important; } .md-offset-5 { margin-left: 20.83333%!important; } .md-offset-6 { margin-left: 25%!important; } .md-offset-7 { margin-left: 29.16667%!important; } .md-offset-8 { margin-left: 33.33333%!important; } .md-offset-9 { margin-left: 37.5%!important; } .md-offset-10 { margin-left: 41.66667%!important; } .md-offset-11 { margin-left: 45.83333%!important; } .md-offset-12 { margin-left: 50%!important; } .md-offset-13 { margin-left: 54.16667%!important; } .md-offset-14 { margin-left: 58.33333%!important; } .md-offset-15 { margin-left: 62.5%!important; } .md-offset-16 { margin-left: 66.66667%!important; } .md-offset-17 { margin-left: 70.83333%!important; } .md-offset-18 { margin-left: 75%!important; } .md-offset-19 { margin-left: 79.16667%!important; } .md-offset-20 { margin-left: 83.33333%!important; } .md-offset-21 { margin-left: 87.5%!important; } .md-offset-22 { margin-left: 91.66667%!important; } .md-offset-23 { margin-left: 95.83333%!important; } .wrp .inner { padding: 0; } .grand-title { font-size: 30px; } .item-list__title--place { font-size: 20px; } .confirm-donation h3, .item-list__footer--total, .item-list__subtitle, .minutiae__h3, .page-totals div[class^=totals__number], .page-totals div[class^=totals__which] span, .pagi__text { font-size: 15px; } .confirm-donation p, .confirm-donation span, .minutiae__details--left, .minutiae__details--right { font-size: 11px; } .logo__european, .logo__screwfix, .logo__screwfix_ireland { width: 131px; height: 26px; } .row { clear: both; } .item-list__list li { padding: 3px 0 2px; } .item-list__footer--total { margin: 0; } .checkout-header { position: relative; overflow: hidden; padding-bottom: 25px; z-index: 1; } .checkout-header .logo { position: absolute; top: 30px; left: 4.16667%; } .summary { position: relative; z-index: 10; margin-top: -85px; } .summary .grand-title { text-align: right; margin-top: 49px; } .received__thanks h2 { margin: 10px 0; } .received__thanks { padding: 0; } .received__details { padding: 0; margin: 0; } .item-list, .item-list--plain { margin-bottom: 4px; padding: 0; } .item-list__list { margin-bottom: 20px; } .item-list__title:before { content: "Delivery "; display: inline-block; font-size: 20px; } .item-list__title .item-list__title--place { margin-left: 4px; display: inline-block; } .breadcrumb, .container-footer, .footer-main, .footer-top, .header-wrap, .js--site-header, .lii__compare, .lii__quantity, .ln__col, .main-nav, .nav-wrap, .pr__btns, .pr__lists, .pr__qty, .pr__tabs, .pr__xsell, .print--hide { display: none; } .item-list__title--first:before { content: "Click & Collect "; } .infobox { margin-top: 0; margin-bottom: 0; border: 1px solid #aaa; } .infobox * { text-align: center!important; float: none!important; } .infobox .infobox__block { border-color: #000; padding: 5px 0; } .infobox .infobox__text { padding: 0; } .item-list__title .item-list__title--type { float: left; padding-right: 24px; margin-top: -2px; } #map-details { padding: 0; margin: 0; } .tcName { font-size: 24px; } .letter { color: #fff!important; } .lg-19 { width: 100%; float: none; } .pr__tabs__content { display: block; } .pr__tabs__content#qas, .pr__tabs__content#reviews { display: none; } .lii__price .lii__vat, .lii__price h4 { float: left; } .hide-md, .stnd__section { display: block; } .pagi__page-results, .sl__search, .sl__search__lbl, .sort-order, div[class*=banner] { display: none; } .pagi__page-total { float: right; } #map { page-break-before: auto; page-break-after: auto; page-break-inside: avoid; }
}