/* mobile new */
  .filterSection {
    display: none;
  }
  .productGrid {
    display: grid;
    grid-template-columns: 100%;
  }
  .pageTitle {
    padding: 20px;
  }
  .productItems {
    padding-top: 0px;
  }
  .productItems .product {
    padding: 5 15px;
  }

  .orderImage {order: 1;}
  .orderContent {order: 2;}

  .bgColourdd {background-color: var(--greyF);}

  .grid-module .grid-module__item.grid-module__item--small {
    width: 50%;
  }

  .grid-module .grid-module__item.grid-module__item--large {
    width: 100%;
  }

  :root {--textMultiplier: 0.7; --lineHeightMultiplier: 2; --genericGap: 10px; --highlightSize: 26px; --barWidth: 100%;}

  .vw50 {height: 100vw;}
  .vw30 {height: 70vw;}
  .h50 {width: 100vw;}
  /*.imageContentRHS {height: 30vw !important;}*/
  .flexColRow {flex-direction: column; margin-bottom: calc(var(--genericGap) * 4);}
  .portraitImage {height: calc(var(--portraitAspect) * 50vw);}
  .textContent {padding: var(--genericGap);}
  #optionToggle {font-size: 30px;}

  #sideNav {
    right: calc(0px - var(--barWidth) - 2 * var(--genericGap));
    width: calc(var(--barWidth) - 2 * var(--genericGap));
  }
  .removeBottomMargin {
    margin-bottom: 0 !important;
  }

  .grid-module__item h2 {
    line-height: 22px;
    margin: 0;
    padding: 14px 14px;
  }


/* >404 */
@media only screen and (min-width: 404px) {
  :root {--textMultiplier: 0.8;}
  
}

/* >768 */
@media only screen and (min-width: 768px) {
  :root {--textMultiplier: 0.9; --highlightSize: 30px;}
  .productGrid {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
  }
  #sideNav {
    width: calc(25% - 2 * var(--genericGap));
  }
  .filterSection {
    display: block;
  }
  .pageTitle {
    padding: 40px;
  }
  .productItems {
    padding-top: 20px;
  }
  .productItems .product {
    padding: 20 35px;
  }
  
}

/* >1024 */
@media only screen and (min-width: 1024px) {
  :root {--textMultiplier: 1; --lineHeightMultiplier: 1.7; --genericGap: 16px; --highlightSize: 50px; --barWidth: 25%;}

  .orderImage {order: 2;}
  .orderContent {order: 1;}

  .grid-module .grid-module__item.grid-module__item--small {
  width: 25%;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 85px;
  align-self: flex-start;
}
  .grid-module .grid-module__item.grid-module__item--large {
    width: 50%;
  }

  .vw50 {height: 50vw;}
  
  .h50 {width: 50vw; height: 50vw;}
  .imageContentRHS {height: 50vw !important;}
  .flexColRow {flex-direction: row; margin-bottom: calc(var(--genericGap) * 4);}
  .portraitImage {height: calc(var(--portraitAspect) * 25vw);}


  .bgColourdd {background-color: var(--greyD);}

  .textContent {padding: calc(2 * var(--genericGap));}

  .vw30 {height: 30vw;}
  .imageContentRHS {height: 30vw !important;}

    .removeBottomMargin {
      margin-bottom: calc(var(--genericGap) * 4) !important;
    }

  .grid-module__item h2 {
    line-height: 28px;
    margin: 0;
    padding: 25px 18px;
  }
}

/* >1200 */
@media only screen and (min-width: 1200px) {
  :root {--textMultiplier: 1;}
}



/* mobile */
  

  
  .h25 {
    width: 50vw;
    /*height: 100vw;*/
  }

  nav {
    display: none;
  }

  

  .imageCover {
    opacity: 0;
  }
  
  

.blackWhite {
  -webkit-filter: none;
  filter: none;
}
:root {
  --headerHeight: 75px;
  
}



/* >768 */
@media only screen and (min-width: 768px) {
  
  
  
  .h25 {
    width: 50%;
    /*height: 50vw;*/
  }

  
  .imageCover {
    opacity: 0.45;
    /*opacity: 0;*/
  }
}

/* >1024 */
@media only screen and (min-width: 1024px) {
  
  nav {display: flex;}
  :root {
    --headerHeight: 85px;
  }
  
  
  .blackWhite {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    transition: 0.4s;
    /*-webkit-filter: none;*/
  }

  .blackWhite:hover {
    -webkit-filter: none;
    filter: none;
  }
}