body {
  cursor: default;
  background: #fff url(../background/body.png) 50% 0;
  font: normal 16px/1.5 'Sreda Regular', Arial, sans-serif;
  color: #26330f;
}

.wrapper {
  padding: 0 1em 1em 1em;
  }
  .container {
    max-width: 1200px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
    margin: 0 auto;
  }
  .container > * {
    flex: 1 100%;
}

.hide {
  display: block;
  position: relative;
  z-index: 10;
  margin: -250px 0 0 0;
  }
  .perchHide {
    display: none !important;
}

h1,
h2 {
  overflow: hidden;
}

h2 {
  font: bold 2.1rem Worstveldslingextra2obliqueRg;
  color: #4897c7;
  margin: 1rem .5rem;
}

h3,
h4 {
  font-size: 1.1rem;
  color: #435a1b;
  border-top: 1px solid #cce3a4;
  padding: 1rem 0 0 0;
  margin: 1rem .5rem
  }
  h3:first-child {
    border: 0;
    padding:0;
  }
  .onSale {
    color: #c74858;
  }
  .onSale:hover {
    color: #435a1b;
  }
  .fieldset h3 {
    width: 100%;
    border: 0;
    margin: 0 0 .5rem 0;
  }
  h4 {
    font-size: .9rem;
}

p {
  font-size: .9rem;
  margin: 1rem .5rem;
  }
  em {
    font-style: italic;
    color: #435a1b;
  }
  .highlight {
    clear: both;
    background: rgba(152,199,072,.05);
    padding: .25rem .5rem;
  }
  .red {
    color: #c74858 !important;
  }
  .note {
    color: #c74858;
    font-size: .7rem;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  opacity: 1;
  color: #98c748;
  }
  a:hover {
    color: #435a1b;
}


/*****  fonts  *****/


@font-face {
  font-family: 'Sreda Regular';
  src: url('../fonts/sreda-webfont.eot');
  src: url('../fonts/sreda-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/sreda-webfont.woff2') format('woff2'),
       url('../fonts/sreda-webfont.woff') format('woff'),
       url('../fonts/sreda-webfont.ttf') format('truetype'),
       url('../fonts/sreda-webfont.svg#sredaregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Worstveldslingextra2obliqueRg';
  src: url('../fonts/worstveldslingextra2oblique-webfont.eot');
  src: url('../fonts/worstveldslingextra2oblique-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/worstveldslingextra2oblique-webfont.woff2') format('woff2'),
       url('../fonts/worstveldslingextra2oblique-webfont.woff') format('woff'),
       url('../fonts/worstveldslingextra2oblique-webfont.ttf') format('truetype'),
       url('../fonts/worstveldslingextra2oblique-webfont.svg#worstveldslingextra2obliqueRg') format('svg');
  font-weight: normal;
  font-style: normal;
}


/*****  header  *****/


.header {
  color: #878787;
  text-align: center;
  padding: 0;
  }
  .h1 {
    margin: 2rem 0 -1.5rem 0;
  }
  .h2 {
    margin: 0;
  }
  .header p {
    text-align: right;
    font-size: .8rem;
    margin: -6.1rem .5rem 0 0;
  }
  .logout {
    color: #c74858;
  }
  .logout:hover {
    opacity: .5;
  }
  .header ul {
    font-size: 1.1rem;
    line-height: 2.3rem;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    margin: .5rem 0 2px 0;
  }
  .header li {
    display: inline-block;
    background: #e1e1e1;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 0 .5rem;
    margin: 0 .5rem;
  }
  .header li a {
    display: block;
    background: #fff;
    padding: 0 .5rem;
    margin: 0 -.5rem;
  }
  .header li a:hover {
    background: #d9eabd;
  }
  .cartLink {
    float: right;
    display: block;
    font-size: 1.1rem;
    line-height: 2.3rem !important;
    color: #e1e1e1;
    background: url(../background/cart.png) .5rem 50% no-repeat !important;
    border: 0 !important;
    padding: 0 .5rem 0 50px;
    margin: -2.3em 0 0 0;
  }
  .cartLink a {
    display: block;
    background: url(../background/cart-a.png) .5rem 50% no-repeat !important;
    padding: 0 .5rem 0 50px;
    margin: 0 -.5rem 0 -50px;
  }
  .cartLink a:hover {
    background: #d9eabd url(../background/cart-hover.png) .5rem 50% no-repeat !important;
  }
  .header .imageBlock {
    margin: 1rem 0 0 0;
  }
  .header .imageBlock img {
    width: 100%;
    margin: 0 0 -.5rem 0;
}

.covid-19 {
  float: left;
  border: 2px solid red;
  margin: .5rem 0 0 0;
  }
  .covid-19 h3 {
    text-align: center !important;
    padding: 0 !important;
    margin: .5rem 0 1rem 0 !important;
  }
  .covid-19 p {
    text-align: left !important;
    color: #26330f !important;
    padding: 0 !important;
    margin: .5rem 1rem !important;
  }


/*****  main  *****/


.main,
.aside {
  text-align: left;
  padding: 1rem .5rem;
  }
  .main {
    min-height: 220px;
    background: url(../background/main.png) 0 1.5rem no-repeat;
    }
    .products {
      background: none;
  }
  .map {
    margin: 0 .5rem;
  }
  .main .imageBlock {
    width: 100%;
    padding: .5rem 0 0 0;
  }
  .imageWrapper {
    float: left;
    width: 20%;
    height: 40px;
    text-align: center;
    padding: 0 1.5rem 0 .5rem;
    margin: 0 0 3rem 0;
  }
  .imageWrapper img {
    margin: 0 1rem 0 0;
  }
  .imageWrapper a img:hover {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    opacity: .75;
  }
  .main ul {
    width: 60%;
    margin: 0 .5rem;
  }
  .main li {
    margin: .5rem 0;
  }
  .secondary {
    margin: 0 1rem 0 1.5rem !important;
  }
  .customer {
    border: 1px solid #e1e1e1;
    color: #c3c3c3;
    padding: 0 0 0 .5rem;
    margin: .75rem 0 !important;
}

.hcg {
  background: url(../background/aside-2.png) no-repeat;
}

.aside li {
  margin: -1px .5rem 0 .5rem;
}

.fb {
  line-height: 1.75rem;
  }
  .fb a {
    display: block;
    color: #fff;
    background: #4897c7;
  }
  .fb a:hover {
    opacity: .75;
  }
  .fb img {
    margin: 0 .5rem -10px 0;
}

.product,
.order {
  border: 1px solid #e1e1e1;
  padding: 0 .5rem .5rem .5rem;
  margin: 0 0 1rem 0;
  }
  .product p {
    padding: 0 0 0 120px;
    margin: 0 1rem 1rem 1.5rem;
  }
  .hbl {
    text-align: right;
    color: #4897c7;
  }
  .sale {
    text-align: right;
    color: #c74858;
  }
  .small {
    clear: both;
    font-size: .7rem;
    color: #435a1b;
    border-bottom: 1px solid #cce3a4;
    padding: 0 0 .5rem 0 !important;
    margin: -.5rem .5rem 1rem .5rem !important;
  }
  .retail {
    text-align: right;
  }
  .hbl,
  .sale,
  .retail {
    float: right;
  }
  .product span span {
    font-family: Tahoma;
  }
  .product img {
    float: left;
    width: 120px;
    margin: 0 0 .5rem .5rem;
  }
  .product:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }
  .soldOut {
    clear: both;
    display: block;
    width: 50%;
    line-height: 1.75rem;
    text-align: center;
    color: #fff;
    background: #c74858;
    margin: 0 auto .5rem auto;
  }
  .checkBack {
    font-size: .7rem;
    text-align: center;
    padding: 0 !important;
}

.paging .small {
    border-top: 1px solid #cce3a4;
    border-bottom: 0;
    padding: .5rem 0 0 0 !important;
    margin: 0 .5rem 1rem .5rem !important;
}


/*****  map  *****/


iframe {
  width: 100%;
  height: auto;
}


/*****  cart  *****/


#form1_cart {
  margin: 0 .5rem 0 0;
}

.cart {
  width: 100%;
  border-collapse: collapse;
  }
  .cartHeader {
    background: #e1e1e1;
  }
  .itemQty,
  .itemPrice {
    text-align: center;
  }
  .itemTotal {
    text-align: right;
  }
  .cart td,
  .cart th,
  .cartItem {
    border: 1px solid #e1e1e1;
    vertical-align: top;
    padding: 5px;
  }
  .cart td p {
    margin: .5rem 0;
  }
  .cart .total,
  .cart .total th,
  .cart .money {
    text-align: right;
  }
  .cartItem td,
  .cart .total th {
    border: 0;
  }
  .cart .itemQty input,
  .cart .money,
  .money {
    font-family: Tahoma;
  }
  .cart .cartItem,
  .cart .total {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    opacity: 1;
  }
  .cart .cartItem:hover,
  .cart .total:hover {
    background: rgba(072,151,199,.05);
  }
  .cartItem img {
    float: left;
    max-width: 120px;
    margin: 0 .5rem 0 0 !important;
  }
  .cartItem .desc p {
     font-size: .7rem;
     padding-left: 120px;
     margin: .5rem;
}

.discount {
   width: 33%;
   margin: 1rem 0 -4px 0;
}

.removeFromCart {
  float: right;
  color: #c74858;
  font-family: 'Sreda Regular';
  font-size: .7rem;
  background: none;
  border: 0;
  border-bottom: 1px solid #c74858;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  opacity: 1;
  padding: 5px 0 0 0;
  margin: 0 0 .5rem .5rem;
  }
  .removeFromCart:hover {
    opacity: .5;
}

input[type=number] {
  width: 35px;
}

.update {
  float: right;
  width: 33%;
  margin: -2rem 0 2rem 0;
  }
  .update input {
    width: 100%;
    cursor: pointer;
    display: block;
    font-family: 'Sreda Regular';
    font-size: .9rem;
    line-height: 1.75rem;
    text-align: center;
    color: #fff;
    border: 1px solid #4897c7;
    background: #4897c7;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    opacity: 1;
  }
  .update input:hover {
    opacity: .85;
}

.comments {
  clear: both;
  padding: 0 .5rem 0 0;
  }
  .comments textarea {
    width: 100%;
}

.continue,
.reset {
  clear: both;
  text-align: center;
  }
  .aside .ca {
    font-size: .7rem;
  }
  .arrow {
    font-family: Tahoma;
    font-weight: bold;
}

.address {
  padding: 0 .5rem;
  }
  .address p {
    color: #c74858;
}

.checkout a,
.create a {
  clear: both;
  display: block;
  width: 50%;
  text-align: center;
  line-height: 1.75rem;
  color: #fff;
  background: #98c748;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  opacity: 1;
  margin: 0 auto;
  }
  .checkout a:hover {
    background: #435a1b;
  }
  .create a {
    background: #4897c7;
  }
  .create a:hover {
    opacity: .85;
}


/*****  forms  *****/


.fieldset {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  overflow: hidden;
  margin: 1rem .5rem;
  }
  input,
  textarea {
    width: 80%;
    font-family: 'Sreda Regular';
    font-size: .9rem;
    line-height: 1.75rem;
    color: #4897c7;
    border: 1px solid #e1e1e1;
    background: rgba(255,255,255,.75);
    padding: 0 4px;
    margin: 0 0 .5rem 0;
  }
  .search input {
    width: 100%;
  }
  ::-webkit-input-placeholder {
    font-family: 'Sreda Regular';
    font-style: italic;
    color: rgba(072,151,199,.5);
  }
  :-moz-placeholder {
    font-family: 'Sreda Regular';
    font-style: italic;
    color: rgba(072,151,199,.5);
    }
  ::-o-placeholder {
    font-family: 'Sreda Regular';
    color: rgba(072,151,199,.5);
  }
  :-ms-input-placeholder {
    font-family: 'Sreda Regular';
    font-style: italic;
    color: rgba(072,151,199,.5);
  }
  label {
    width: 20%;
    font-size: .9rem;
    line-height: 1.75rem;
    margin: 0 -10px .5rem 0;
  }
  .send {
    width: 100%;
    margin: 0 auto;
  }
  .send input[type=submit],
  .addCart input[type=submit] {
    cursor: pointer;
    display: block;
    width: 50%;
    border: 0;
    font-family: 'Sreda Regular';
    font-size: .9rem;
    line-height: 1.75rem;
    text-align: center;
    color: #fff;
    background: #98c748;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    opacity: 1;
    margin: 0 auto .5rem auto;
  }
  .send input[type=submit]:hover,
  .addCart input[type=submit]:hover {
    background: #435a1b;
  }
  .addCart input[type=submit] {
    clear: both;
}

#form1_postcode,
#form2_postcode {
  width: 15%;
  }
  .postcode {
    float: right;
    width: 65%;
    font-size: .7rem;
    line-height: 1.75rem;
    color: #c3c3c3;
    text-align: left;
    margin: 0;
  }
  .postcode:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

select {
  width: 80%;
  font-family: 'Sreda Regular';
  font-size: .9rem;
  line-height: 1.75rem;
  color: #4897c7;
  border: 1px solid #e1e1e1;
  background: rgba(255,255,255,.75);
  padding: 2px 4px;
  margin: 0 0 .5rem 0;
  }
  .aside select {
    width: 100%;
}

/*****  lower  *****/


.lower {
  background: url(../background/lower.png) 50% 0 repeat-x;
  padding: 1rem 0;
  }
  p#open {
    padding: .5rem 0 0 0;
  }
  .quote {
    font: 1.7rem Worstveldslingextra2obliqueRg;
    color: #4897c7;
  }
  .testimonials {
    background: rgba(152,199,072,.05);
    border-bottom: 1px solid #e1e1e1;
    padding: 1rem 0 0 0;
  }
  .testimonials p {
    margin: 1rem 1rem 2rem 1rem;
}

/*****  footer  *****/


.footer {
  color: #c3c3c3;
  }
  .footer p {
    font-size: .8rem !important;
    color: #435a1b;
    margin: 1.5rem .5rem;
  }
  .gstNote {
    float: left;
    text-align: left;
  }
  .fbText {
    float: right;
  }
  .fbText a {
    color: #4897c7;
  }
  .fbText a:hover {
    opacity: .75;
  }
  .footer p:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }
  .last {
    clear: both;
    border-top: 1px solid #e1e1e1;
    padding: 1rem 0 0 0;
  }
  .footer ul {
    width: 50%;
    font-size: .8rem;
    border-top: 1px solid #e1e1e1;
    padding: .5rem 0;
    margin: .5rem 0 0 0;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    opacity: 1;
  }
  .footer ul:hover {
    background: rgba(072,151,199,.05);
  }
  .footer .right {
    float: right;
  }
  .footer .left {
    float: left;
  }
  .footer .right li {
    text-align: left;
    margin: .5rem 0 .5rem 1.5rem;
  }
  .footer .right li:first-child {
    margin: .5rem 0 1rem 1.5rem;
  }
  .footer .left li {
    text-align: right;
    margin: .5rem 1.5rem .5rem 0;
  }
  .footer .left li:first-child {
    margin: .5rem 1.5rem 1rem 0;
}


/*****  @media  *****/


@media all and (min-width: 240px) {
  html { font-size: 14px; }
}

@media all and (min-width: 500px) {
  html { font-size: 15px; }
  }
  @media all and (max-width: 500px) {
    .header p { text-align: center; margin: .5rem; }
    .header p span { display: none; }
    .header ul { width: 100%; border-bottom: 0 !important; margin: 0; }
    .header li { float: none; width: 100%; padding: 0 !important; margin: 5px 0 0 0 !important; }
    .cartLink { float: none; text-align: center; padding: 0 !important; margin: 0 0 5px 0 !important; }
    .cartLink a { padding: 0 !important; margin: 0 !important; }
    .header li:last-child { margin: 5px 0 !important; }
    .header li a { padding: 0 !important; margin: 0 !important; }
    .header .imageBlock { border-top: 1px solid #e1e1e1; padding: 1rem 0 0 0; margin: 0 !important; }
    .main { border-bottom: 1px solid #e1e1e1; }
    .main ul { width: 100%; }
    .imageWrapper { width: 38%; height: 35px; }
    .product p { padding: 0; }
    .product img { width: 90px; margin: 0 .5rem .5rem .5rem !important;}
    input, textarea, select { width: 100%; }
    .lower { text-align: left; }
    .footer li { margin: 0 .5rem !important; }
}

@media all and (min-width: 620px) {
  html { font-size: 16px; }
  .aside { flex: 1 150px; }
}


@media all and (min-width: 800px) {
  html { font-size: 17px }
  .main { flex: 3 0px; }
  .aside-1 { order: 1; }
  .main { order: 2; }
  .aside-2 { order: 3; }
  .lower { order: 4; }
  .footer { order: 5; }
  }
  @media all and (max-width: 800px) {
}