body{
  font-size:15px;
  font-family: Arial;
  font-weight:normal;
  color:#000;
}

hr{
  border-color:#a7a9ac;
  margin-top:30px;
  margin-bottom:30px;
}

a{
  color:inherit;
}

h1,h2{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

.relative{position: relative;}


.roboto{font-family: 'Roboto Slab', serif}


.spacer{height:30px;}

.white{color:#FFF;}
.orange{color:var(--colour-primary);}
.green{color:var(--colour-secondary);}

.bold{font-weight:bold;}
.italic{font-style: italic;}
.underline{text-decoration: underline;}

.social{
  display: inline-block;
}

.social a{
  color:var(--colour-primary);
  margin-left:5px;
  font-size:18px;
  line-height: 18px;
  vertical-align: middle;
}

.social a:hover{
  text-decoration: none;
}

.content{
  padding:30px 0;
}

img.pull-left{
  margin:0 20px 20px 0;
}

.tight-cells .form-group{
  margin-bottom:4px;
}



.custom-input,
.custom-select{
  display: block;
  position: relative;
  width: 100%;
  padding:0 8px;
  border:1px solid #000;
  height:40px;
}

textarea.custom-input{
  height: auto;
}

.custom-select{
  padding:0;
}

.custom-select select:disabled,
.custom-select select[readonly],
.custom-input:disabled,
.custom-input[readonly]{
  background:#dadada;
  cursor:not-allowed
}

.custom-select:after,.refinement-dropdown .dropdown-btn:after{
  font-family:'Font Awesome 5 Free';
  content:'\f107';
  font-weight:900;
  font-style:normal;
  font-size:22px;
  position:absolute;
  z-index:10;
  right:8px;
  top:50%;
  -webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);
  color:#000;
  pointer-events:none;
  background:none
}

.custom-select select{
  padding:0 8px;
  height:100%;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  position:relative;
  z-index:5;
  width:100%;
  -webkit-box-shadow:none;
  box-shadow:none;
  background:none;
  border-radius:0;
  border:none;
}

.custom-select select::-ms-expand{
  display: none;
}

.custom-select select:focus{
  outline:none
}


.custom-btn{
  display: inline-block;
  font-family: 'Arial';
  color:#FFF;
  font-size:16px;
  line-height: 16px;
  padding:10px 15px;
  text-transform: uppercase;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.custom-btn:hover{
  text-decoration: none;
}

.background-white{background:#FFF;}
.background-green{background:var(--colour-secondary);}
.background-orange{background:var(--colour-primary);}


.custom-btn.background-white{
  color:var(--colour-primary);
  border:1px solid #FFF;
}

.custom-btn.background-white:hover{
  background:var(--colour-primary);
  color:#FFF;
}

.custom-btn.background-orange{
  border:1px solid var(--colour-primary);
}

.custom-btn.background-orange:hover{
  background:#FFF;
  color:var(--colour-primary);
}

.heading{
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  font-size:38px;
  line-height: 45px;
}

.medium-heading{
  font-family: 'Roboto Slab', serif;
  font-weight:bold;
  font-size:24px;
}

.small-heading{
  font-family: 'Roboto Slab', serif;
  font-weight:bold;
  font-size:17px;
  margin-bottom:0;
}

.tight-cells{
  margin-left:-2px;
  margin-right:-2px;
}

.tight-cells div[class*="col-"]{
  padding-left:2px;
  padding-right:2px;
}

.col-xs-5ths,.col-sm-5ths,.col-md-5ths,.col-lg-5ths{
  position:relative;
  min-height:1px;
  padding-right:15px;
  padding-left:15px
}

.col-xs-5ths{
  width:20%;
  float:left
}

@media (min-width: 768px) {
  .col-sm-5ths
  {
    width:20%;
    float:left
  }
}

@media (min-width: 992px) {
  .col-md-5ths
  {
    width:20%;
    float:left
  }
}

@media (min-width: 1200px) {
  .col-lg-5ths
  {
    width:20%;
    float:left
  }
}

header{
  background:#FFF;
  padding:10px 0;
  position: relative;
  font-size:0; /* prevent spacing for inline-block elements*/
}

#logo-container,
#nav-container{
  display: inline-block;
  vertical-align: middle;
}

#logo-container{
  width:175px;
}

@media(max-width:767px){
  #logo-container{
    width:150px;
  }
}

@media(max-width:480px){
  #logo-container{
    width:115px;
  }
}

#logo-container img{
  max-width: 100%;
}

#nav-container{
  width: calc(100% - 175px);
  text-align: right;
  font-size:15px;
}

@media(max-width:767px){
  #nav-container{
    opacity: 0;
    z-index:-1;
    float:none;
    text-align: left;
    width:100%;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    -webkit-transform:translateY(100%);
        -ms-transform:translateY(100%);
            transform:translateY(100%);
    background:#FFF;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    box-shadow:0 5px 10px -5px #333;
  }
  
  #nav-container.active{
    opacity: 1;
    z-index:100;
  }
}

#nav-container > div:first-child{
  padding:15px 0;
}

@media(max-width:767px){
  #nav-container > div:first-child{
    display: none;
  }
}

#search-container{
  max-width:350px;
  float:right;
}

#top-nav{
  display: inline-block;
  position: relative;
}

@media(max-width:767px){
  #top-nav{
    display: block;
  }
}

#top-nav:after{
  content:'';
  position: absolute;
  top:0;
  right:0;
  width:90%;
  height:1px;
  background:#a7a9ac;  
}

@media(max-width: 767px){
  #top-nav:after{
    width:0; 
    height:0;
  }
}

#top-nav a{
  font-family: 'Roboto Slab', serif;
  font-size:18px;
  font-weight: bold;
  display: inline-block; 
}

#top-nav a:not(.quote){
  padding:15px 10px;
  color:#000;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

@media(max-width: 991px){
  #top-nav a:not(.quote){
    padding:15px 8px;
  }
}

@media(max-width:767px){
  #top-nav a{
    display: block;
  }
  
  #top-nav a:not(.quote){
    padding:5px 10px;
  }
}

#top-nav a:hover{
  text-decoration: none;
}

#top-nav a:not(.quote):hover,
#top-nav a:not(.quote).active{
  color:var(--colour-primary);
}

#top-nav a.quote{
  color:#FFF;
  background:var(--colour-secondary);
  padding:5px 10px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  border:1px solid var(--colour-secondary);
}

#top-nav a.quote:hover{
  background:#FFF;
  color:var(--colour-secondary);
}

#mobile-items{
  display: none;
  vertical-align: middle;
  width:calc(100% - 150px - 75px - 10px);
  text-align: right;
  padding-right:20px;
  font-size:15px;
}

@media(max-width:767px){
  #mobile-items{
    display: inline-block;
  }
}

@media(max-width: 480px){
  #mobile-items{
    width:calc(100% - 115px - 60px - 10px);
    /*display: none;*/
  }
}

#mobile-items a{
  text-align: center;
  display: inline-block;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  padding:0 10px;
}

@media(max-width: 480px){
  #mobile-items a{
    display: none;
  }
}

#mobile-items a .fa{
  font-size:40px;
  display: block;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  margin-bottom:5px;
}
#mobile-items a:hover{
  text-decoration: none;
}
#mobile-items a:hover .fa{
  color:var(--colour-primary);
}

#toggle-mobile-nav{
  display: none;
  vertical-align: middle;
  text-align: center;
  font-size: 50px;
  cursor: pointer;
  width:75px;
}

@media(max-width:767px){
  #toggle-mobile-nav{
    display: inline-block;
  }
}

@media(max-width: 480px){
  #toggle-mobile-nav{
    width:60px;
  }
}

.page-banner{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  font-size:22px;
  color:#FFF;
  text-align: center;
  height:300px;
}

@media(max-width: 991px){
  .page-banner{
    height:250px;
  }
}

@media(max-width:767px){
  .page-banner{
    height:200px;
  }
}

.page-banner .container{
  height:100%;
}

.page-banner .caption{
  position: relative;
  top:50%;
  -webkit-transform:translateY(-50%);
      -ms-transform:translateY(-50%);
          transform:translateY(-50%);  
}

.page-banner .title{
  display: block;
  font-size:38px;
}

.page-banner h1{
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  margin:inherit;
  line-height: inherit;
}

.page-banner .caption a{
  color:inherit;
  text-decoration: underline;
}

.orange-caption{
  color:#FFF;
  padding:40px 0;
  text-align: center;
  font-size:22px;
  line-height: 38px;
  background:var(--colour-primary);
  font-weight: bold;
  font-family: 'Roboto Slab', serif;
}

@media(max-width:767px){
  .orange-caption{
    padding:25px 0;
    font-size:18px;
    line-height:24px;
  }
}

.orange-banner{
  color:#FFF;
  background:var(--colour-primary);
  font-family: 'Roboto Slab', serif;
  font-weight:bold;
  font-size:38px;
  line-height:45px;
  padding:15px 0;
}

.orange-banner h1{
  font-size: inherit;
  font-family: inherit;
  margin:inherit;
  font-weight:inherit;
  line-height: inherit;
}

#homepage-slider .item{
  height:450px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media(max-width: 991px){
  #homepage-slider .item{
    height:350px;
  }
}

@media(max-width: 767px){
  #homepage-slider .item{
    height: 250px;
  }
}

#homepage-slider .item .container{
  height:100%;
  position: relative;
}

#homepage-slider .controls a{
  position: absolute;
  top:calc(450px / 2);
  -webkit-transform:translateY(-50%);
      -ms-transform:translateY(-50%);
          transform:translateY(-50%);
  z-index:10;
  font-size:70px;
  color:#FFF;
  opacity: 0.6;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

#homepage-slider .controls a:hover{
  opacity: 1;
}

#homepage-slider .controls .left{
  left:0;
}

#homepage-slider .controls .right{
  right:0;
}

#homepage-slider .caption{
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
      -ms-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
  text-align: center;
  width:75%;
}

@media(max-width:767px){
  #homepage-slider .caption{
    width:95%;
  }
}

#homepage-slider .caption p{
  color:#FFF;
  font-size:36px;
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  text-shadow: 0 0 8px #000;
}

@media(max-width:767px){
  #homepage-slider .caption p{
    font-size:24px;
  }
}

#homepage-slider .custom-btn{
  -webkit-box-shadow: 0 0 8px #000;
          box-shadow: 0 0 8px #000;
}

#home-categories{
  padding:30px 0;
}

.home-category-cell{
  /*width:14%;
  float:left;
  */
  width:calc((100% - 30px) / 7);
  vertical-align: top;
  display: inline-block;
  text-align: center;
  font:bold 16px 'Roboto Slab', serif;
  margin:15px 0;
  padding:0 15px;
}

@media(max-width: 991px){
  .home-category-cell{
    width:20%;
  }
}

@media(max-width: 767px){
  .home-category-cell{
    width:33%;
  }
}

.home-category-cell a{
  color:var(--colour-secondary);
  text-decoration: none;
}

.home-category-cell svg{
  display: block;
  margin:auto;
  width:70px;
  max-width:100%;
  margin-bottom:10px;
  fill: var(--colour-secondary);
}

.home-category-cell a,
.home-category-cell svg rect,
.home-category-cell svg path,
.home-category-cell polygon{
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.category-icon rect,
.category-icon path{
  fill:var(--colour-secondary);
}

.category-icon .border{
  fill:none;
  stroke:var(--colour-secondary);
  stroke-width:2px;
}

.home-category-cell a:hover{
  color:var(--colour-primary);
}

.home-category-cell a:hover rect,
.home-category-cell a:hover path,
.home-category-cell a:hover polygon{
  fill:var(--colour-primary);
}

.home-category-cell a:hover .border{
  fill:none;
  stroke:var(--colour-primary);
}

#home-about{
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  font-size:22px;
  color:#FFF;
  background:var(--colour-primary);
  padding:75px 0;
  position: relative;
}

@media(max-width: 767px){
  #home-about{
    padding:20px 0;
    font-size:20px;
  }
}

#home-about .bm{
  background-image:url('/a/img/BM2.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  position: absolute;
  z-index:10;
  top:0;
  right:15%;
  height:100%;
  width:100%;
}

@media(max-width: 991px){
  #home-about .bm{
    right:0;
  }
}

@media(max-width: 767px){
  #home-about .bm{
    left:0;
    right:0;
    background-size: cover;
    background-position: center;
  }
}

#home-about p{
  margin-bottom:20px;
}

#home-about .title{
  font-size:36px;
}

@media(max-width: 767px){
  #home-about .title{
    font-size:30px;
  }
}

#home-cells{
  padding:30px 0;
}

.home-cell{
  height:300px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}

@media(max-width: 991px){
  .home-cell{
    margin-bottom:15px;
    height:250px;
  }
}

.home-cell .overlay{
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  background:rgba(var(--colour-secondary-rgb),0.8);
  padding:15px;
  line-height:1.1;
  color:#FFF;
}

.home-cell .caption{
  padding-right:75px;
}

@media(max-width: 767px){
  .home-cell .caption{
    padding-right:0;
  }
}

.home-cell .icon{
  position: absolute;
  right:10px;
  top:50%;
  -webkit-transform:translateY(-50%);
      -ms-transform:translateY(-50%);
          transform:translateY(-50%);
  opacity: 0.4;
  font-size:70px;
}

@media(max-width: 767px){
  .home-cell .icon{
    display: none;
  }
}

.home-cell .overlay,
.home-cell .icon{
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.home-cell:hover .overlay{
  background:rgba(var(--colour-secondary-rgb),1);
}

.home-cell:hover .icon{
  opacity: 1;
}


.cell{
  border:1px solid #a7a9ac;
}

#suppliers .cell{
  height:150px;
  padding:15px;
  margin-bottom:4px;
}

#products .cell{
  height:170px;
  padding:15px;
  margin-bottom:5px;
}

.cell img{
  max-width: 100%;
  max-height: 100%;
  position: relative;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
      -ms-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
}


#side-nav{
  border-right:1px solid #a7a9ac;
}

#side-nav a{
  display: block;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

#side-nav .category{
  color:var(--colour-secondary);
  font-family: 'Roboto Slab', serif;
  font-weight:bold;
  font-size:16px;
  line-height: 32px; 
}

#side-nav .sub-categories{
  padding-left:10px;
  display: none;
}

#side-nav .sub-category{
  color:inherit;
}

#side-nav a:hover,
#side-nav a.active{
  color:var(--colour-primary);
  text-decoration: none;
}

#side-nav a .fa{
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

#side-nav a.active .fa{
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transform:rotate(90deg);
      -ms-transform:rotate(90deg);
          transform:rotate(90deg);
}

.breadcrumbs,
.breadcrumbs a{
  color:#939598;
}

.breadcrumbs{
  border-bottom:1px solid #a7a9ac;
  font-size: 14px;
  padding:10px 0;
  margin-bottom:15px;
}

#products{
  padding:15px 0;
}

a .product-cell{
  color:#414042;
}
.product-cell{
  margin-bottom:8px;
}


.service-cell{
  height:375px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-bottom:30px;
}

.service-cell .overlay{
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:rgba(var(--colour-secondary-rgb),0.8);
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.service-cell:hover .overlay{
  background:rgba(var(--colour-secondary-rgb),1);
}

.service-cell .overlay svg{
  height:100px;
}

.service-cell .caption{
  color:#FFF;
  text-align: center;
  padding:25px;
  font-size:14px;
  position: absolute;
  left:0;
  width:100%;
  top:50%;
  -webkit-transform:translateY(-50%);
      -ms-transform:translateY(-50%);
          transform:translateY(-50%);
}

.service-cell .caption .text{
  display: none;
}

@media(max-width: 991px){
  .service-cell .caption .text{
    display: block !important;
  }
}

.service-cell .caption p{
  font-size:16px;
  font-weight: bold;
  font-family: 'Roboto Slab', serif;
  transition: 0.3s;
}

.service-cell:hover .caption p{
  color:var(--colour-primary);
}

.service-cell .service-icon{
  margin-bottom:10px;
}

.service-icon path{
  fill:#FFF;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.service-cell:hover .service-icon path{
  fill:var(--colour-primary);
}

@media(max-width: 991px){
  .service-cell{
    height:auto;
  }
  
  .service-cell .overlay,
  .service-cell .caption{
    position: relative;
    /*transform:none;*/
  }
}


.contact-details a{
  display: block;
  line-height: 2em;
}

#associations{
  background:#000;
  color:#FFF;
  padding:20px 0;
}
.association-cell{
  text-align: center;
  padding: 0 15px;
  margin:5px 0;
  font-style: italic;
}

.association-cell .img-cell{
  padding:15px;
}
.association-cell .img-cell img{
  display: inline-block;
  position: relative;
  top:50%;
  transform:translateY(-50%);
}

footer{
  
}

#slogan-footer{
  text-align: center;
  font-size:22px;
  font-style: italic;
  border-top:1px solid #a7a9ac;
  padding:8px 0;
}

@media(max-width: 767px){
  #slogan-footer{
    font-size:18px;
  }
}

#top-footer,
#bottom-footer{
  padding:20px 0;
  border-top:1px solid #a7a9ac;
}

#top-footer{
  line-height:1.9em;
}

@media(max-width: 991px){
  #top-footer .small-heading{
    margin-top:15px;
  }
}

#top-footer .nav-group a{
  display: block;
  color:#000;
}

#instafeed .insta-cell{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom:4px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

#instafeed .insta-cell:hover{
  -webkit-box-shadow: 0 0 5px #000;
          box-shadow: 0 0 5px #000;
}

#bottom-footer a{
  color:#000;
  text-decoration: underline;
} 

@media(max-width: 767px){
  #bottom-footer{
    text-align: center;
  }
  
  #bottom-footer .pull-left,
  #bottom-footer .pull-right{
    float: none !important;
  }
}



/* START ADMIN */
#admin-nav-bar{
  background:#666563;
  color:#FFF;
  font-size:22px;
  padding: 15px 0;
}

.open-admin-nav,
.close-admin-nav{
  cursor: pointer;
}

#admin-nav{
  position: fixed;
  -webkit-transform:translateX(-100%);
      -ms-transform:translateX(-100%);
          transform:translateX(-100%);
  top:0;
  left:0;
  height:100vh;
  background:#404040;
  color:#FFF;
  min-width:20vw;
  z-index:1000;
  -webkit-transition: 0.3s ease-in;
  -o-transition: 0.3s ease-in;
  transition: 0.3s ease-in;
}

#admin-nav.open{
  -webkit-transform:none;
      -ms-transform:none;
          transform:none;
}

#admin-nav .nav-head{
  margin-bottom:25px;
  padding:20px 30px;
  border-bottom:1px solid #272626;
}

#admin-nav .nav-body{
  padding: 20px 0;
}

#admin-nav a{
  display: block;
  color:#FFF;
  font-size:22px;
  padding:10px 30px;
  border-bottom:1px solid #272626;
  -webkit-transition: 0.3s ease-in;
  -o-transition: 0.3s ease-in;
  transition: 0.3s ease-in;
}

#admin-nav a:hover{
  text-decoration: none;
  background:#FFF;
  color:#404040;
}

#admin-nav a > div{
  padding: 0 30px;
  position: relative;
}

#admin-nav a > div:before,
#admin-nav a > div:after{
  font-family: 'Font Awesome 5 Free';
  position: absolute;
  font-weight: bold;
  font-size:20px;
}

#admin-nav a > div:before{left:0;}
#admin-nav .categories:before{content: '\f0ca';}
#admin-nav .homepage-slides:before{content: '\f302';}
#admin-nav .products:before{content: '\f02c';}
#admin-nav .suppliers:before{content: '\f4de';}
#admin-nav .users:before{content: '\f0c0';}
#admin-nav .logout:before{content: '\f060';}

#admin-nav a > div:not(.logout):after{
  content: '\f105';
  right:0;
}

#admin-nav a:hover > div:before{
  -webkit-animation: tada 2s linear infinite;
  animation: tada 2s linear infinite;
}

#admin-nav a:hover > div:after,
#admin-nav a:hover > div.logout:before{
  -webkit-animation: horizontal 2s ease infinite;
  animation: horizontal 2s ease infinite;
}

.no-sort,
.sorting_disabled{
  width: 1% !important;
  white-space: nowrap;
}

#notification{
  -webkit-transition: 0.3s ease-in;
  -o-transition: 0.3s ease-in;
  transition: 0.3s ease-in;
}

.logo-preview{
  height:150px;
  width:150px;
  padding:5px;
  border:1px solid #000;
}

.logo-preview.small{
  height:50px;
  width:50px;
}

.logo-preview > div{
  height:100%;
  width:100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.image-upload-container{
  height:200px;
  border:1px solid #000;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.image-upload-container input{
  position: absolute;
  top:-100px;
  left:-100px;
}

.image-upload-container .upload-image{
  position: absolute;
  top:0;
  right:0;
  border:none;
  border-bottom-left-radius: 5px;
  padding:5px 12px;
}

/* END ADMIN */

.sweet-alert h2{
  font-size:30px;
  font-weight:500;
}