/* Mobile First - 24/11/2020 */
/*#region Reset*/
@font-face { font-family: 'Roboto', Arial; font-style: normal;  }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  img, ins, kbd, q, s, samp,small, strike,  sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
/*#endregion*/

/* Google Tag Manager */
#gtmf{display:none;visibility:hidden}

.hidden { display: none; visibility: hidden; }
.d-none { display: none; }

/*#region Top level blocks*/
body { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 0.85em; min-height: 100%; overflow: auto; }

#PageWrapper { margin: 0 auto; text-align: left;  overflow: hidden; position: relative; }
#header, #Menu #NavContainer, #FooterContainer, #Footer #subfootercontainer, .subcats, .menu ul, #cookiecrumb, .productlist, .homeboxes, .bodycopy, .articleshome { max-width: 103em; }
#header { margin: 0 auto; color: #000; border: 0; min-height: 10em; z-index: 10; position: relative;  background: #8fabd3 ; background-size: cover; padding:0 1em; }

#headcontact { float: right; padding-top: 2em; white-space: nowrap; }
#content .white70 { background-color: #e6ebf4; padding-bottom:1em;}
#content .white50 { background-color: rgba(255,255,255,0.6); }

.infopage{max-width:60em; margin:0 auto;}


/*#endregion*/


/*#region General formatting */
.menu , .nosmall, a.nosmall, #account, #headerbasket, .d1000 { display: none; }
.floatright{ float:right;}
a:disabled{ background-color:#666;}
.text-nowrap{ white-space:nowrap;}

.icon { width: 1em; height: 1.1em; fill: #fff; display: inline-block; line-height: 100%; vertical-align: text-top;}
.icon-1-5x { width: 1.5em; height: 1.5em; fill: #fff; }
.icon-2x { width: 2em; height: 2em; fill: #fff; }
.icon-666 { fill: #666; }
.rating svg { fill: #f3ca00; }
.clearme:after { content: ""; display: table; clear: both; }

/*#endregion*/


/*#region Header */
#Logo { float: left;  }
#Logo a { display: block; width: 130px; height: 80px;  }
#Logo a svg { width: 130px; height: 80px; }

.notext { line-height: 0; font-size: 0; color: transparent;  position:absolute; }

label.notext{ margin:0;display:block;}

#phone { display: none; }

#header .Search { clear: both; width: auto;   }

.text-box, input[type="text"], input[type="password"], textarea, input[type="search"], select { width: auto; border: solid 1px #ccc; font-family: Arial; font-size: 1.2em; padding: 0.4em 0.7em;  }

#SearchResults{display:none; background-color:#fff; }

.navbar-toggle { cursor: pointer; }
.navbar-toggle, #search-toggle, #cart-toggle, #account-toggle { display: block; padding: 0.3em 0.5em; font-size:1.4em; line-height: 1.15em; height: 1.15em; float: right; cursor: pointer; background-color: #47a3da; }
#cart-toggle, #account-toggle, .navbar-toggle { margin: 0 0 0 0.5em; display: block; color: #fff; }

.input-wrapper {position: absolute;	right: 2.5em;	left: 0px;	top: 0px; bottom: 0px; }
.form-wrapper {	position: relative; height: 2em; font-size:1.5em; margin:0.5em 0em 0.2em;  }
.form-wrapper input[type="text"] {height: 2em;	width: 100%; float: left;	color: #333; border: 0;	background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: inherit; }
    .form-wrapper input[type="text"]:focus { background: #fff;  outline: none; }
.form-wrapper button {position: absolute;right: 0px;top: 0px;overflow: visible;	border: 0; padding: 0.5em;	cursor: pointer;height: 2em;width: 2.5em;color: #fff;background:#47a3da; font-size: inherit; line-height:1em;	}  

.form-wrapper button::-moz-focus-inner {border: 0; padding: 0;}    


/*#endregion*/
/* Accounts page */
#content ul.accountactions { margin: 0; padding: 0; }
#content ul.accountactions li { list-style: none; margin: 0 0 1em; padding: 0; }
#content ul.accountactions li:last-child { margin: 0; }
#content ul.accountactions li a i { width: 1em; }
#content ul.accountactions li a { display: block; width: auto; min-width: 12em; background-color: #47a3da; color: #fff !important; padding: 0.5em 1em; margin: 0; font-size: 1.2em; }
#content ul.accountactions li a:hover, #content ul.accountactions li a.actionpage { color: #000; text-decoration: none !important; background-color: #47a3da; }


/*#region Content */
.bodycopy{ margin:0 auto; padding:1em 1em 0 ;   }

#content p, #content td { line-height: 140%; color: #333; }

#content .proddescription ul li, #content .categorydescription ul li, #content .plitem2 ul li { line-height: 140%; margin-bottom: 0.8em; padding-left: 0.5em; }
#content .proddescription ul li::marker, #content .categorydescription ul li::marker, #content .plitem2 ul li::marker { content: "⚫  "; font-size: 9px; }



#content p { padding-top: 2px; padding-bottom: 10px; }
#content li { color: #333; }
a { color: #0782C1;  }
a:hover { color: #900; text-decoration: underline; }

#content {  padding:0px;    margin:0px;  clear:both;  }
.clear{ clear:both; }
.bigclear{ clear:both; height:3em;}
.medclear{ clear:both; height:1.5em;}
span.clear{ display:block;}

#content h1 {margin-top: 0em; color:#900; font-size:1.6em; font-weight:normal;  margin-bottom:0.3em; padding:0px; line-height:140%;}
#content .redder{ color:#990000; margin-left:-4px;}
#content h2 {margin-top: 0.7em; margin-bottom:.3em; font-size:1.3em; clear:both; line-height:130%;}



#content .mini{ font-size:x-small;}
#content a{text-decoration:none; }
#content a:hover{ text-decoration:underline;}

ul.nb {margin-top:0.5em; clear:both;}
ul.nb li,p.nb, span.nb{ font-size:0.9em; color:#666;  }
p.nb ul.nb { padding-top: 0em; }
.validity { background-color:#fff;}
/*#endregion*/

/*#region Menu */
.menu { background-color: #40638E; }
.menu ul { margin: 0 auto; padding: 0; list-style-type: none; z-index: 9999; }
.menu a { color: #fff; padding: 0em 0.8em; color: #fff; display: block; height: 2.16em; line-height: 2.2em; font-size: 1.2em; text-decoration: none; }
.menu a:hover, .menu a.selected { background: #47a3da; text-decoration: none; color: #fff; }    
/*endregion*/
.formflex { display: grid; grid-gap: 1em;  }
.formblock {  background-color: #fff; padding: 1em; }
.formblock.formblockblank { background-color: transparent; }


@media screen and (min-width:600px) {
    #header .Search { clear: none; margin: 0em auto ; padding-top: 1em; width:18em; display: block; z-index: 990; }
    #header .SearchInner { height: 2em; }
    #header { min-height: 6em; background: #8fabd3 url(https://cdn.hygienedepot.co.uk/hd/cloudbg2.jpg); }
    #header .Search { width: 18em; }
}

@media screen and (min-width:880px) {
    #Logo a svg { width: 170px; height: 80px; }
    .menu { display: block;  }
    .menu > ul > li { display: inline-block; float: left; }
    .menu ul li.floatright { float: right; display: block; }
    .menu a.offers { background-color: #d00; }
    .menu a.offers:hover { background-color: #b00; color: #fff; }
    .menu a.eco { background-color: #37bc37; }
    .menu a.eco:hover { background-color: #31a131; }

    #account a{ cursor:pointer;}
    #account ul { display: none; position: absolute; background-color: #47a3da; padding: 0em; width: 16em; top: 2.6em; margin: 0; top: 2.6em; }
    #account ul li a { float: none; padding: 0.2em 0.5em; }
    #account ul li a:hover { background-color: #40638E; }
    .nosmall, a.nosmall, #account, #headerbasket, #phone { display:inline-block; }
    td.nosmall{ display:table-cell;}
    th.nosmall{ display:table-cell;}

    .navbar-toggle, #search-toggle, #cart-toggle, #account-toggle { display: none; }

    #account a span, #headerbasket a span  { display: none; }
    #phone a { padding: 0.3em 0.5em 0.3em 0.5em; }
    #phone a:hover { background-color: #47a3da; }
    #phone { padding: 0.3em 0.5em; font-size: 1.4em; line-height: 1.15em; height: 1.15em; float: right; margin: 0 0 0 1em; cursor: pointer; }

    #content .bodycopynopadding { padding: 1em 1em 0em; }

    #headerbasket a, #account a, #social a, #phone a { color: white; text-decoration: none;  }
    #headerbasket a:hover { color: white; }
    #headerbasket, #account { color: white; float: right; }
    #headerbasket svg, #account svg{ padding: 0 0.3em 0 0;  }
    
    #headerbasket a:hover, #account a:hover, #account:hover { text-decoration: none; background-color: #47a3da; }
    #header .Search { width: 24em; }


    #accountflex { display: flex; }
    #content #actionlistcol { flex: 0, 0, 14em; padding-right: 1em; order: 1; }

   
}

@media screen and (min-width:1000px) {
    #account a span, #headerbasket a span, .d1000 { display: inline-block; }
    .h1000, .nobig { display: none; }
    .menu a { padding: 0em 1em; }
    .formflex { display:flex; }
    .formblock { width: 100%;  min-height: 30em; }
   
}

@media screen and (min-width: 1200px) {
    #header { background: none; }
    body { background: #8fabd3 url(https://cdn.hygienedepot.co.uk/hd/cloudbg2.jpg); background-size: contain; background-repeat: no-repeat; }
}