/*
Theme Name: Web Anchor Boilerplate
Theme URI: http://webanchor.co.za
Author: WebAnchor
Author URI: http://themetailor.co.za
Description: Webanchor Boiler Plate Theme
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: web-anchor-boilerplate
Tags: editor-style
*/

/** Keep drop-downs working **/
#access li { position: relative; }
#access ul ul { display: none; float: left; position: absolute; top: 35px; left: 0; z-index: 99999; background: #012c5c; width: 240px; text-align: left; padding: 20px!important; box-sizing: border-box; }
#access ul ul li { display: block!important; margin: 10px 0; }
#access ul ul li a { padding: 0!important; margin: 0!important; }
#access ul ul ul { left: 100%; top: 0; }
#access ul li:hover > ul { display: block; }

input[type=text] { border: 1px solid #CCC; background: #FFF; width: 100%; padding: 10px; margin-bottom: 10px; }
textarea { height: 100px; border: 1px solid #CCC; background: #FFF; width: 100%; padding: 10px; margin-bottom: 10px; }
input[type=submit] { border: 1px solid #CCC; background: none; text-align: center; padding: 10px; cursor: pointer; color: #CCC; }
input[type=submit]:hover { background: none; border-color: #FFF; color: #FFF; }
input, textarea { box-sizing: border-box; }
#commentform a,.commentlist a { color: #FFF; }

.group:after,.container:after,header:after { content: ""; display: table; clear: both; }

.screen-reader-text { text-indent: -9999px; height: 1px; display: block; }

/* ========================================================================== */
/* CUSTOM STYLES */
img { max-width: 100%; height: auto; display: block; }
body {  font-family: 'Lato', sans-serif; font-weight: 300; color: #012c5c; line-height: 1.4; font-size: 14px; margin: 0; padding: 0; }
body { background: url('img/klenly-bg.png') no-repeat; background-position: 80% 0; background-attachment: fixed; background-size: 300px; }
h1,h2,h3,h4,h5,h6 { font-family: 'Lato', serif; } 

header { background: #012c5c; position: relative; margin: 0; padding: 20px; border-bottom: 1px solid #FFF; }
header h1 { margin: 0 50px 0 0; padding: 0; text-align: left; display: inline-block; float: left; }
header h1 a { background: url('img/logo.png') no-repeat; text-indent: -99999px; width: 245px; height: 60px; display: block; background-size: 100%; margin: 0; color: #FFF; font-size: 60px; text-decoration: none; line-height: 1; } 

nav#access { float: right; text-align: right; padding: 0; color: #FFFFFF; font-size: 14px; letter-spacing: 1px; line-height: 37px; height: 60px; }
nav#access ul { margin: 0; padding: 0; }
nav#access ul li { display: inline-block; margin: 0 auto; }
nav#access ul li a { color: #FFFFFF; padding: 0 10px; display: block; margin:  0 10px; text-decoration: none; }
nav#access ul li:last-child a { padding-right: 0; margin-right: 0; }
nav#access ul li a:hover,nav#access ul li.current-menu-item a { color: #CCC; text-decoration: none; }
#mobibox { display: none; }

footer { border-top: 5px solid #012c5c; letter-spacing: 1px; text-align: left; padding: 20px 0; color: #012c5c; font-size: 11px; margin-top: 20px; }
footer a { color: #012c5c; text-decoration: none; text-transform: uppercase; }
footer a:hover { color: #CCC; text-decoration: none; }
footer .lefter { width: 30%; float: left; }
footer .righter { width: 70%; float: right; text-align: right; }
footer .righter ul { margin: 0; padding: 0; }
footer .righter ul li { display: inline-block; margin: 0 auto; }
footer .righter ul li a { color: #012c5c; padding: 0 10px; display: block; text-decoration: none; }
footer .righter ul li a:hover { color: #CCC; }

.container,.woocommerce-page #content { max-width: 960px; width: 96%; margin: 0 auto; padding: 0; }

main { max-width: 960px; width: 96%; margin: 0 auto; display: flex;  flex-wrap: wrap; justify-content: center; }
main article { flex: 2; }
main aside { flex: 1; }

section#content h1 { font-size: 50px; margin: 0; line-height: 1; text-align: center; font-weight: bold; letter-spacing: 2px; padding: 20px 0; }
.category main { display: grid; overflow: hidden; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-gap: 20px; }
.category article {  margin-bottom: 20px; }
.category article img { width: 100%; height: auto; }
.category article h2 { color: #FFF; font-size: 16px; line-height: 1.4; }
.category article h2 a { color: #FFF; text-decoration: none; }
.category article h2 a:hover { color: #CCC; }
.category article a.btn-read-more { color: #FFF; text-decoration: none; text-transform: uppercase; font-size: 11px; }
.category article a.btn-read-more:hover { color: #CCC; }
.category article p { font-size: 14px; line-height: 1.4; }

.entry-meta,.entry-meta a { font-size: 11px; color: #FFF; text-decoration: none; text-transform: uppercase; }
.entry-meta a {  color: #795C34;  }
.entry-meta a:hover { color: #FFF; }


.heading { text-align: left; max-width: 960px; width: 96%; margin: 0 auto; }

aside.pagination { max-width: 960px; width: 96%; margin: 0 auto; }
.paginate-links { display: block; width: 100%; text-align: center; margin: 0; padding: 0; }
.paginate-links span { list-style: none; display: inline-block; display: inline-block;border: 1px solid #CCC; height: 30px; line-height: 30px; min-width: 30px; width: 30px; }
.paginate-links a { text-decoration: none; background: #CCC; color: #FFF; display: inline-block; border: 1px solid #CCC; height: 30px; line-height: 30px; min-width: 30px; width: 30px; }
.paginate-links a:hover { background: #FFF; color: #CCC;}
.paginate-links a.prev,.paginate-links a.next { background: none; border: none; color: #CCC; text-align: center; } 
.paginate-links  a.prev:hover,.paginate-links a.next:hover { color: #CCC; }

#entry-author-info { text-align: left; padding-top: 0; }
#entry-author-info .avatar { display: none; }

#nav-below { border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; padding: 20px 0; }
#nav-below > div { width: 50%; float: left; }
#nav-below > div a { color: #FFF; text-transform: uppercase; text-decoration: none; }
#nav-below > div a:hover { color: #CCC; }
#nav-below .nav-next {text-align: right; }

.sidebar { margin: 20px 0; padding: 0; }
.sidebar ul { margin: 0 0 15px 20px; padding: 0; list-style: inside; }
.sidebar ul li a { color: #FFF; text-decoration: none; }
.sidebar ul li a:hover { color: #CCC; }

.wp-block-group { padding: 30px 0; }
.wp-block-group .wp-block-group { padding: 0; }

.normarginblock { background: #012c5c; padding: 0!important; }
.normarginblock figure { margin: 0; }

.flexcenter { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.wp-block-columns { margin-top: 28px; }
.wp-block-column h4 { font-size: 18px; font-weight: 400; margin-top: 0; margin-bottom: 0; }
.wp-block-columns p { line-height: 2; margin: 0; }

section#content h2 { font-size: 40px; margin-bottom: 20px; line-height: 1; text-align: center; font-weight: bold; letter-spacing: 1px; }
.wp-block-image { margin: 0; }

nav#access ul li.btn.menu-item a { border: 1px solid #FFF; padding: 10px 15px; background: #FFF; color: #012c5c; border-radius: 37px; }
nav#access ul li.btn.menu-item a:hover { background: #012c5c; color: #FFF; }


section#content h2.wc-block-grid__product-title a,section#content h2.woocommerce-loop-product__title { font-size: 20px; text-decoration: none; color: #00aeef; }

nav#access ul li.thecart a { color: #012c5c; }
nav#access ul li.thecart a::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; font-size: 20px; font-weight: 900; color: #FFF; content: "\f07a"; }
nav#access ul li.thecart a:hover::before { color: #00aeef; }
.empty-cart nav#access ul li.thecart { background: none!important; }

#product-categories { width: 100%; margin-bottom: 30px; }
#product-categories ul { display: flex; text-align: center; list-style: none; margin: 0; padding: 0; }
#product-categories li { flex: 1; list-style: none; margin: 0 0 20px 0; padding: 0; }
#product-categories li.sanitiser-sprays a { background: #24afee; }
#product-categories li.sanitiser-gels a { background: #2bb4bb; }
#product-categories li.disinfectants-aerosols a { background: #ed2f61; }
#product-categories li.disinfectant-air-fresheners a { background: #ec278f; }
#product-categories li.antibacterial-hand-creams a { background: #f06164; }
#product-categories li.antibacterial-hand-soaps a { background: #674b9b; }
#product-categories li.alcohol-free-sterilisers a { background: #2579bd; }
#product-categories li a { display: flex; height: 100px; text-decoration: none; color: #FFF; align-items: center; justify-content: center; padding: 20px; flex-direction: column; }
#product-categories li a:hover { opacity: .8; }
#product-categories li a span.material-icons { display: block; margin-top: 20px; border: 1px solid #FFF; border-radius: 30px; }
#product-categories li a span.txt { display: block; width: 100%; }

#product-slider { margin: 0 0 30px 0; padding: 0; display: flex; flex-wrap: wrap; }
#product-slider li { list-style: none; box-sizing: border-box; display: block; float: left; width:220px; margin: 10px; }
#product-slider li a { color: #012c5c; text-decoration: none; font-size: 12px; text-align: center; }
#product-slider li a h3 { font-weight: normal; }
#product-slider li h3 { padding: 0 15px; display: flex; margin: 20px auto 0; color: #FFF; text-transform: uppercase; height: 60px; justify-content: center; align-items: center; }
#product-slider li span.border { display: block; margin-bottom: 2px; }
#product-slider li.sanitiser-sprays span.border { border: 2px solid #24afee; }
#product-slider li.sanitiser-gels span.border  { border: 2px solid #2bb4bb; }
#product-slider li.disinfectants-aerosols span.border  { border: 2px solid #ed2f61; }
#product-slider li.disinfectant-air-fresheners span.border  { border: 2px solid #ec278f; }
#product-slider li.antibacterial-hand-creams  span.border { border: 2px solid #f06164; }
#product-slider li.antibacterial-hand-soaps span.border  { border: 2px solid #674b9b; }
#product-slider li.alcohol-free-sterilisers span.border  { border: 2px solid #2579bd; }
#product-slider li span.cat-dot { position: relative; z-index: 99999; color: #FFF; font-weight: 800; background: #24afee; height: 80px; width: 80px; border-radius: 50px; border: 2px solid #FFF; display: flex; justify-content: center; align-items: center; margin: 0px auto -45px; }
#product-slider li span.prod-name { padding: 40px 10px 5px; height: 50px; display: flex; justify-content: center; align-items: center; }
#product-slider li span.prod-size { text-transform: uppercase; font-weight: 900; box-sizing: border-box; display: block; color: #FFF; text-align: center; padding: 5px 10px; width: 100%; }
#product-slider li.sanitiser-sprays span.prod-size, #product-slider li.sanitiser-sprays span.cat-dot { background: #24afee; }
#product-slider li.sanitiser-gels span.prod-size, #product-slider li.sanitiser-gels span.cat-dot { background: #2bb4bb; }
#product-slider li.disinfectants-aerosols span.prod-size, #product-slider li.disinfectants-aerosols span.cat-dot { background: #ed2f61; }
#product-slider li.disinfectant-air-fresheners span.prod-size, #product-slider li.disinfectant-air-fresheners span.cat-dot { background: #ec278f; }
#product-slider li.antibacterial-hand-creams span.prod-size, #product-slider li.antibacterial-hand-creams span.cat-dot { background: #f06164; }
#product-slider li.antibacterial-hand-soaps span.prod-size, #product-slider li.antibacterial-hand-soaps span.cat-dot { background: #674b9b; }
#product-slider li.alcohol-free-sterilisers span.prod-size, #product-slider li.alcohol-free-sterilisers span.cat-dot { background: #2579bd; }

section.related.products ul { margin: 0 0 30px 0; padding: 0; display: flex; flex-wrap: wrap; }
section.related.products ul li { list-style: none; box-sizing: border-box; display: block; float: left; width:220px; margin: 10px; }
section.related.products ul li a { color: #012c5c; text-decoration: none; font-size: 12px; text-align: center; }
section.related.products ul li a h3 { font-weight: normal; }
section.related.products ul li h3 { padding: 0 15px; display: flex; margin: 20px auto 0; color: #FFF; text-transform: uppercase; height: 60px; justify-content: center; align-items: center; }
section.related.products ul li span.border { display: block; margin-bottom: 2px; }
section.related.products ul li.sanitiser-sprays span.border { border: 2px solid #24afee; }
section.related.products ul li.sanitiser-gels span.border  { border: 2px solid #2bb4bb; }
section.related.products ul li.disinfectants-aerosols span.border  { border: 2px solid #ed2f61; }
section.related.products ul li.disinfectant-air-fresheners span.border  { border: 2px solid #ec278f; }
section.related.products ul li.antibacterial-hand-creams  span.border { border: 2px solid #f06164; }
section.related.products ul li.antibacterial-hand-soaps span.border  { border: 2px solid #674b9b; }
section.related.products ul li.alcohol-free-sterilisers span.border  { border: 2px solid #2579bd; }
section.related.products ul li span.cat-dot { position: relative; z-index: 99999; color: #FFF; font-weight: 800; background: #24afee; height: 80px; width: 80px; border-radius: 50px; border: 2px solid #FFF; display: flex; justify-content: center; align-items: center; margin: 0px auto -45px; }
section.related.products ul li span.prod-name { padding: 40px 10px 5px; height: 50px; display: flex; justify-content: center; align-items: center; }
section.related.products ul li span.prod-size { text-transform: uppercase; font-weight: 900; box-sizing: border-box; display: block; color: #FFF; text-align: center; padding: 5px 10px; width: 100%; }
section.related.products ul li.sanitiser-sprays span.prod-size, section.related.products ul li.sanitiser-sprays span.cat-dot { background: #24afee; }
section.related.products ul li.sanitiser-gels span.prod-size, section.related.products ul li.sanitiser-gels span.cat-dot { background: #2bb4bb; }
section.related.products ul li.disinfectants-aerosols span.prod-size, section.related.products ul li.disinfectants-aerosols span.cat-dot { background: #ed2f61; }
section.related.products ul li.disinfectant-air-fresheners span.prod-size, section.related.products ul li.disinfectant-air-fresheners span.cat-dot { background: #ec278f; }
section.related.products ul li.antibacterial-hand-creams span.prod-size, section.related.products ul li.antibacterial-hand-creams span.cat-dot { background: #f06164; }
section.related.products ul li.antibacterial-hand-soaps span.prod-size, section.related.products ul li.antibacterial-hand-soaps span.cat-dot { background: #674b9b; }
section.related.products ul li.alcohol-free-sterilisers span.prod-size, section.related.products ul li.alcohol-free-sterilisers span.cat-dot { background: #2579bd; }

ul.products { margin: 0 0 30px 0; padding: 0; }
ul.products li { list-style: none; box-sizing: border-box; padding: 20px 20px 0; }
ul.products li a { color: #012c5c; text-decoration: none; font-size: 12px; text-align: center; }
ul.products li a h2 { font-weight: normal; }
ul.products li h2 { padding: 20px; display: block; margin: 20px auto 0; color: #FFF; text-transform: uppercase; }
ul.products li h2 { background: #24afee; color: #FFF !important; font-size: 14px !important; height: 60px; margin: 0!important; flex-direction: column; display: flex; text-decoration: none; color: #FFF; align-items: center; justify-content: center; color: #012c5c; text-decoration: none; font-size: 12px; text-align: center; }
ul.products li.product_cat-sanitiser-sprays  { border: 2px solid #24afee; }
ul.products li.product_cat-sanitiser-gels  { border: 2px solid #2bb4bb; }
ul.products li.product_cat-disinfectants-aerosols  { border: 2px solid #ed2f61; }
ul.products li.product_cat-disinfectant-air-fresheners  { border: 2px solid #ec278f; }
ul.products li.product_cat-antibacterial-hand-creams  { border: 2px solid #f06164; }
ul.products li.product_cat-antibacterial-hand-soaps  { border: 2px solid #674b9b; }
ul.products li.product_cat-alcohol-free-sterilisers  { border: 2px solid #2579bd; }
ul.products li.product_cat-sanitiser-sprays h2 { background: #24afee; }
ul.products li.product_cat-sanitiser-gels h2 { background: #2bb4bb; }
ul.products li.product_cat-disinfectants-aerosols h2 { background: #ed2f61; }
ul.products li.product_cat-disinfectant-air-fresheners h2 { background: #ec278f; }
ul.products li.product_cat-antibacterial-hand-creams h2 { background: #f06164; }
ul.products li.product_cat-antibacterial-hand-soaps h2 { background: #674b9b; }
ul.products li.product_cat-product_cat-sterilisers h2 { background: #2579bd; }
ul.products li.product_cat-sanitiser-sprays h2 { background: #24afee; }
ul.products li.product_cat-sanitiser-gels h2 { background: #2bb4bb; }
ul.products li.product_cat-disinfectants-aerosols h2 { background: #ed2f61; }
ul.products li.product_cat-disinfectant-air-fresheners h2 { background: #ec278f; }
ul.products li.product_cat-antibacterial-hand-creams h2 { background: #f06164; }
ul.products li.product_cat-antibacterial-hand-soaps h2 { background: #674b9b; }
ul.products li.product_cat-alcohol-free-sterilisers h2 { background: #2579bd; }
ul.products li a:hover { opacity: .8; }

.product-wrapper.products-list { width: 100%; }
.single-product aside { display: none!important; }
.single-product .summary .price,.single-product .summary form { display: none; }
section.related.products { clear: both; }
section.related.products .button,section.related.products span.price { display: none; }
.woocommerce ul.products li.product .price { display: none!important; }
.nocomments { display: none!important; }
.woocommerce ul.products li.product .button { display: none; }


ul#slider { border-bottom: 2px solid #FFF; }
ul#slider li { background-color: #012c5c; }
ul#slider li .imgleft { width: 50%; float: left; }
ul#slider li .textright { margin-top: 10%; box-sizing: border-box; display: flex; justify-content: center; flex-direction: column; padding: 50px; text-align: center; width: 50%; float: left; color: #FFF; }

h2.page-top { background-color: #012c5c; color: #FFF; margin: 0 auto 40px; font-size: 40px; letter-spacing: 1px; padding: 20px 0; text-align: center; }

.woocommerce-page .woocommerce-result-count { display: none!important; }
.woocommerce-page form.woocommerce-ordering { display: none!important; }

.woocommerce .products ul, .woocommerce ul.products { margin: 40px 0!important; }

/* DROPDOWN */

.dropdown-wrapper{ width: 300px; margin: 0 auto 20px; position: relative; }
.dropdown-wrapper .ae-select { padding: 8px; position: relative; border: 1px solid #012c5c; height: 20px; }
.dropdown-wrapper .ae-select.chosen { color: #012c5c; font-weight: bold; }
.dropdown-wrapper .ae-select .down-icon, .ae-select .up-icon { position: absolute; right: 8px; top: 7px; }
.dropdown-wrapper .ae-dropdown .dropdown-menu { background: #FFF; box-shadow: none; border-radius: 0px; position: absolute; z-index: 9999; width: 288px; top: 37px; left: 0; }
.dropdown-wrapper .ae-dropdown .ae-select, .dropdown-wrapper .ae-dropdown .dropdown-menu>li { cursor: pointer; }
.dropdown-wrapper .ae-disabled { pointer-events: none; }
.ae-hide { display:none; }
ul.dropdown-menu { list-style-type: none; }
ul.dropdown-menu { margin:0px; padding: 0; border: 1px solid #012c5c; }
ul.dropdown-menu li { margin: 0; padding: 0; }
.dropdown-wrapper .ae-dropdown .dropdown-menu a { text-decoration: none; color: #012c5c; display: block; padding: 5px; }
.dropdown-wrapper .ae-dropdown .dropdown-menu a:hover { background-color: #012c5c; color: #FFF; }

#tab-description h2 { display: none; }

.sku_wrapper { display: none!important; }

.product_meta .posted_in a { color: #012c5c; text-decoration: none; font-weight: 900; }

.woocommerce strong { font-weight: 900; }

.wp-pagenavi { text-align: center; display: block; }
.wp-pagenavi a, .wp-pagenavi span { color: #012c5c; border-color: #012c5c!important; }

table { border: 1px solid #333; }
table tr { border: 1px solid #333; }
table tr td { border: 1px solid #333; }


figure.wp-block-image.is-resized { margin: 0 auto; }

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { margin: 0 1% 0!important; width: 23%!important; }

/* MEDIA QUERIES */

@media all and (max-width: 2400px) {

}

@media all and (max-width: 1280px) {

}

@media all and (max-width: 768px) {
  nav#access { position: absolute; top: 0; right: 0; }
  nav#access .menu-header { display: none; position: absolute; top: 35px; right: 0; z-index: 99999; background: #012c5c; width: 300px; }
  nav#access .menu-header ul { margin: 0; padding: 0; width: 100%; }
  nav#access .menu-header ul li { margin: 0; padding: 0; width: 100%; }
  nav#access .menu-header ul li a { box-sizing: border-box; margin: 0; }
  #mobibox { display: block; margin: 0; position: absolute; top: 0; right: 0;  }
  #mobibox #showmobi {  color: #FFFFFF;  float: left; cursor: pointer; width: 35px; height: 35px; line-height: 35px; text-align: center; }
  #mobibox #showmobi i { color: #FFFFFF; font-size: 25px; text-align: center; line-height: 35px; }

}

@media all and (max-width: 568px) {
  main { width: 90%; display: block; }
  header h1 a { width: 200px; height: 49px; }

  .sidebar { margin: 20px 0; padding: 0; }
  .sidebar ul { margin: 0; padding: 0; list-style: inside; }

  #product-categories ul { display: block; }
  #product-categories li { display: block; width: 100%; margin: 0; }
  #product-categories li a { padding: 5px 0; font-size: 12px; height: auto; }
  section#content h2 { font-size: 30px; }
  #product-slider li { width: 44%; }
  footer .lefter { width: 100%; text-align: center; }
  footer .righter { width: 100%; text-align: center; }
}