body {
  width: 100%;
  *zoom: 1;
}

body:before,
body:after {
  content: "";
  display: table;
}

body:after {
  clear: both;
}

/* ---
/* --- GENERIC CATEGORY
/* --------------- */
.category-intro#js-mobile-category-intro {
  display: none;
}

.category-intro {
  margin: 10px 0;
  align-items: center;
  background: white;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px -2px rgba(219, 219, 219, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  padding: 1%;
  text-align: justify;
}

.ekm-search-page-no-results {
  grid-column: 1 / span 4;
  padding: 0 15px !important;
}

.category-intro .text-content {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  max-width: 100%;
  width: 80%;
}

.category-intro .text-content h1 {
  font-size: 1.3rem;
  margin-top: 0.5rem;
}

.category-intro .perrin-branding {
  float: right;
  margin-left: 2%;
  margin-right: 3%;
  margin-top: 10px;
  width: 20%;
  min-width: 20%;
}

.category-intro .category-desc-image {
  flex: 1 0 auto;
  margin-left: 3%;
  margin-top: 10px;
  width: 20%;
  max-width: 212px;
}

.category-intro .category-desc-image img {
  max-width: 100%;
  height: auto !important;
}

.category.grid {
  margin: 0;
  width: 100%;
}

.category .grid .grid-item a {
  text-decoration: none;
}

.category .category-grid .grid {
  grid-template-columns: repeat(4, 1fr);
}

.category .category-grid .grid .grid-item h3 {
  padding: 0 2%;
}

.category .category-grid .grid .grid-item:hover {
  background: var(--accent-hover);
}

.category .category-grid .grid .grid-item:hover a {
  color: white;
}

/* ---
/* --- CATEGORIES WITH PRODUCTS
/* --------------- */
/* -- FILTERS --*/
.ekm-filterby-form {
  float: left;
  width: 25%;
}

.panel {
  background: white;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 15px 10px;
  overflow: hidden;
}

.filters {
  padding-bottom: 0;
}

.filters h2 {
  margin-bottom: 0.5rem;
  margin-top: 0;
  font-size: 1.2em;
  text-align: center;
}

.filters h3 {
  margin: 0.5em 0;
}

.filters ul {
  border-bottom: 1px solid #e8e8e8;
  list-style-type: none;
  padding-bottom: 10px;
}

.filters ul li {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.filters ul li span.ekm-filter-count {
  padding-left: 5px;
}

.filters ul input[type="checkbox"] {
  margin-right: 10px;
}

.filters button {
  margin-bottom: 10px;
}

.brochures {
  margin-top: 10px;
}

.ui-slider-horizontal {
  margin: 0 10px 3px;
}

/* -- PRODUCT LIST -- */
.product-list {
  width: 100%;
}

.product-list .ekm-sortby-form {
  display: inline;
  float: left;
  width: 97.9166666667%;
  margin: 0 1.0416666667%;
  -webkit-box-shadow: 2px 2px 2px -2px rgba(219, 219, 219, 0.5);
  box-shadow: 2px 2px 2px -2px rgba(219, 219, 219, 0.5);
}

.product-list.has-filters {
  float: left;
  margin-right: 0;
  margin-left: 1%;
  width: 74%;
}

.product-list.has-filters .grid .grid-item {
  display: flex;
}

.rrp-cont {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  font-size: 0rem;
}

.cat-saving {
  margin: 0px;
  font-size: 0rem;
}

/* -- NO FILTERS --*/
.product-list.no-filters {
  float: left;
  margin: 0;
  width: 100%;
}

.product-list.no-filters .grid {
  grid-template-columns: repeat(4, 1fr);
}

.product-list .grid {
  margin: 0;
  width: 100%;
}

/*.product-list.no-filters .grid .grid-item {*/
/*  @include column(3;*/
/*}*/
.ekm-sortby {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: wrap;
  margin-bottom: 10px;
  padding: 0 1% 10px 1%;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-bottom: 1px solid #e8e8e8;
}

.ekm-sortby label {
  font-family: 'Bree Serif', serif;
  font-size: 1.2em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.ekm-sortby select {
  font-size: 14px;
  padding: 5px 1%;
  text-transform: capitalize;
}

.pagination {
  box-sizing: border-box;
  display: flex;
  grid-column:1/5;
  justify-content: space-between;
  padding: 10px 1%;
}

.pagination a {
  text-decoration: none;
}

.pagination .pages {
  display: flex;
}

.pagination .next,
.pagination .prev {
  width: 25%;
}

.pagination .next {
  text-align: right;
}

.pagination .next a,
.pagination .prev a,
.pagination .page a {
  background: white;
  box-sizing: border-box;
  padding: 0.5rem 1rem;
}

.pagination .pages .current-page {
  background: var(--accent);
  color: white;
}

.product-detail .product-title {
  align-items: center;
  background: white;
  display: block;
  flex-direction: row;
  padding: 10px 2%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.product-detail h3 {
  margin: 0 0 10px;
  text-transform: uppercase;
}

.product-detail .product-title h1 {
  font-size: 1.3rem;
  margin: 0;
}

.product-detail .content-block {
  background: white;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px 4%;
  margin-bottom: 10px;
}

/* ---
/* --- TEXT CONTENT
/* --- Usually on the left
/* --------------- */
.product-detail .text-content {
  -webkit-box-shadow: 2px 2px 2px -2px rgba(219, 219, 219, 0.5);
  box-shadow: 2px 2px 2px -2px rgba(219, 219, 219, 0.5);
  float: right;
  margin-right: 1%;
  width: 60%;
}

.product-detail .text-content ul {
  /*  list-style-position: outside;*/
  margin-left: 1rem;
}

.product-detail .text-content .tab-controls {
  display: flex;
  justify-content: space-between;
}

.product-detail .tab-controls h3 {
  border-bottom: none;
  background: #ddd;
  flex: 1 0 auto;
  margin-bottom: 0;
  margin-right: 0.5rem;
  text-align: center;
}

.product-detail .text-content .tab-controls a {
  background: #ddd;
  box-sizing: border-box;
  display: block;
  padding: 7px 0.7rem;
  margin: 0 0.5rem 0 0;
  text-decoration: none;
  width: 100%;
}

.product-detail .text-content .tab-controls a.active {
  background: white;
}

.product-detail .text-content .tab-content {
  display: none;
}

.product-detail .text-content .tab-content.active {
  display: block;
}

.filtration-info {
  align-items: center;
  background: url('https://files.ekmcdn.com/justperrin/resources/design/filtration-taps-cross-sell-banner.png') #ded7d4 no-repeat left center;
  display: flex;
  height: 100px;
  justify-content: flex-end;
  padding: 1rem 0;
  margin-top: 1rem;
}

.filtration-info h3 {
  box-sizing: border-box;
  margin: 0;
  padding-right: 5%;
  width: 60%;
}

.filtration-info a {
  text-decoration: none;
}

/*-- Swatches etc -- */
.product-detail .content-block img {
  height: auto !important;
  max-width: 100%;
}

.product-detail .finishes.inactive {
  display: none;
}

.product-detail .finishes ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style-type: none;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.js-product-swatches {
  margin: 0px !important;
}

.product-detail .finishes ul li {
  border: 1px solid transparent;
  font-weight: bold;
  text-align: center;
  transition: border-color 0.25s ease-in;
  width: 11%;
}

.product-detail .finishes ul li:hover {
  border-color: #686d79;
}

.product-detail .finishes ul li.selected {
  border-color: var(--accent-hover);
}

.product-detail .product-info {
  line-height: 25.6px;
  line-height: 1.6rem;
}

.product-detail .product-info ul {
  list-style-type: none;
}

.product-detail .product-info li {
  overflow: hidden;
  padding-bottom: 10px;
}

.product-detail .product-info li .attribute-title {
  clear: both;
  float: left;
  font-weight: bold;
}

.product-detail .product-info li .attribute-value {
  float: right;
  text-align: right;
}

/* ---
/* --- IMAGE AND PRICE CONTENT
/* --- Usually on the right
/* --------------- */
.product-detail .images-price {
  float: right;
  width: 39%;
}

.product-detail .product-images {
  margin-bottom: 10px;
}

.product-detail .product-images .large-image {
  position: relative;
}

.product-detail .product-images .large-image {
  display: none;
}

.product-detail .product-images .slick-slide img {
  height: auto;
  width: 100%;
}

.product-detail .product-images .slick-dotted.slick-slider {
  margin-bottom: 10px;
}

.product-detail .product-images .slick-prev,
.product-detail .product-images .slick-next {
  color: var(--accent);
  height: 40px;
  width: 40px;
  z-index: 9;
}

.product-detail .product-images .slick-next {
  right: 20px;
}

.product-detail .product-images .slick-prev {
  left: 20px;
}

.product-detail .product-images .slick-dots {
  bottom: 4px;
}

.product-detail .product-images .slick-next::before,
.product-detail .product-images .slick-prev::before {
  color: var(--accent);
  font-size: 40px;
}

.product-detail .product-images .slick-dots li.slick-active button::before {
  color: var(--accent);
}

.category-notification {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: var(--accent);
  color: white;
  text-align: center;
  font-size: 1.0rem;
  font-family: 'Bree Serif', serif;
  text-transform: uppercase;
  margin: 10px 0 0 0;
  padding: 5px;
}

.product-notification {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: var(--accent);
  color: white;
  text-align: center;
  font-size: 1.1rem;
  font-family: 'Bree Serif', serif;
  text-transform: uppercase;
  margin-top: 10px;
  padding: 10px 2%;
}

.product-detail .quantity {
  color: white;
  text-align: center;
  width: 25%;
  min-width: 100px;
  margin-left: 5%;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
}

.product-detail .quantity .quantity-cont {
  display: flex;
  flex-flow: wrap;
  margin-bottom: 5px;
}

.quantitycontrol {
  background: #131821;
  color: #ffffff;
  margin: 5px 0;
  min-width: 10px;
  padding: 5px 10px;
  font-weight: 900;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
}

.product-detail .quantity .quantity-label {
  display: inline-block;
  width: 100%;
}

.product-detail .quantity .quantity-input {
  width: 25%;
  flex: 1 0 auto;
  text-align: center;
}


.variant-block {
  background: #686d79;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: white;
  padding: 10px 4% 0;
}

.product-options a {
  color: white;
  font-weight: bold;
}

.product-options label {
  display: inline-block;
  margin-bottom: 5px;
}

.product-options select {
  border: 1px solid #686d79;
}

.product-options .option-row {
  padding-bottom: 10px;
}

.product-options .option-row:last-of-type {
  margin-bottom: 0;
}

.delivery-time {
  font-weight: 700;
}

.delivery-time p,
.special-order p {
  margin: 5px 0;
  font-size: 0.85em;
  line-height: 1rem;
}

#urgentorder {
  font-size: 1.0em;
  line-height: 1.3rem;
}

.special-order p:last-of-type {
  margin-bottom: 0;
}

.product-detail select {
  font-size: 16px;
  font-size: 1rem;
}

.price-container {
  text-align: left;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

.product-detail .price-block {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #131821;
  color: white;
  padding: 10px 4%;
}

.product-detail h3.product-rrp {
  color: var(--accent-light);
  font-size: 0px;
  font-size: 00rem;
  margin: 0;
}

.product-detail h2.product-saving {
  margin: 0 0 5px;
}

.product-detail h2.product-price {
  font-size: 30px;
  font-size: 2.0rem;
  padding-bottom: 0;
  margin: 0;
}

.product-detail .price-block #inc-vat,
.product-detail .price-block #ourprice {
  font-size: 1.0rem;
}

.product-detail .add-to-cart input[type="submit"] {
  padding: 20.8px 0;
  padding: 1.0rem 0;
}

.rrp-delivery {
  text-align: left;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

#deliverycost {
  font-size: 16px;
  font-size: 1.0rem;
}

#deliverycost a {
  color: #ffffff;
  text-decoration: none;
}

.usps {
  margin-top: 10px;
  display: flex;
  flex-flow: wrap;
}

.usps-header {
  display: flex;
  align-items: center;
}

.usps-header h3 {
  text-transform: none;
  margin-right: 5%;
  margin-bottom: 0px;
}

.usps ul,
.usps li {
  margin-bottom: 5px;
}

.delivery ul,
.guarantee ul {
  margin-top: 0;
}

.related-products {
  display: inline;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.related-products-header {
  background: white;
  padding: 10px 4%;
  margin-bottom: 10px;
}

.related-products-header h3 {
  margin: 0px;
}

.related-products .grid .grid-item .item-img {
  min-height: 1px;
}

.related-products .grid .grid-item .text-content {
  margin: 0;
  width: 100%;
}

.related-products .grid .grid-item .text-content h4 {
  margin: 0.25em 0.75em;
  font-size: 0.85em;
}

.related-products .grid .grid-item .price-block {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 5px 4%;
  margin-top: 5px;
}

.related-products .grid .grid-item .price-block h3 {
  margin: 0px;
  font-size: 0.8em;
  text-align: center;
}

.related-products .grid .grid-item .price-block #inc-vat {
  font-size: 0.6em;
}

.related-products .grid .grid-item .price-block h4,
.related-products .grid .grid-item .price-block h5 {
  width: 100%;
}

.related-products .grid .grid-item .button {
  padding: 5px 1%;
  font-size: 14px;
}

/* ---
/* --- WEB PAGES
/* --------------- */

.webpage .content-container {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  margin-top: 10px;
}

.webpage .container-block {
  width: 49%;
}

.webpage.finish .container-block {
  width: 32%;
  padding: 10px;
  box-sizing: border-box;
  background: #FFFFFF;
  margin-bottom: 10px;
}

#brass-finishes .container-block {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.webpage.finish h2 {
  margin: 0 0 10px;
}

.webpage.finish .container-block h2 {
  text-align: center;
}

.webpage.finish .container-block img {
  width: 100%;
}

.webpage .text-header {
  width: 100%;
  background: white;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 20px 2%;
}

.webpage .text-header h1 {
  margin-top: 0px;
  margin-bottom: 1.0rem;
}

.webpage .text-header p:last-of-type {
  margin-bottom: 0px;
}

.webpage .text-content {
  width: 100%;
  margin-bottom: 10px;
  background: white;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
}

.webpage .text-content p:last-of-type {
  margin-bottom: 0px;
}

.webpage .button {
  margin-bottom: 5px;
}

.webpage .wide-image {
  display: inherit;
  margin: 0 auto;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.webpage.delivery .text-content h3:first-of-type {
  margin-top: 0px;
}

.webpage.delivery .text-content h3{
  margin-bottom:5px;
}

.webpage.delivery .text-content h3 + p{
  margin-top:0px;
}

.webpage.delivery .panel {
  background: #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1px 3% 10px;
  margin-bottom:10px;
}

.filtration-header {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.filtration-header img {
  width: 100%;
}

.filtration-content li {
  padding-bottom: 0.5rem;
}

.filtration-content .filtration-benefits {
  background: white;
  box-sizing: border-box;
  padding: 1rem;
  margin-top: 1rem;
  width: 100%;
}

.filtration-content .filtration-benefits ul {
  column-count: 2;
  column-gap: 1%;
}

.filtration-content .filtration-cta {
  align-items: center;
  background: url('https://files.ekmcdn.com/justperrin/resources/design/filtration-taps-cross-sell-banner.png') #ded7d4 no-repeat left center;
  display: flex;
  margin-top: 1rem;
}

.filtration-content .filtration-cta .text-content {
  flex: 1 0 auto;
  margin-left: 315px;
  margin-right: 5%;
  padding: 1rem 0;
}

.filtration-content .filtration-cta .text-content h2 {
  margin-bottom: 0;
}

.filtration-content .filtration-cta .text-content p {
  margin-top: 7px;
}

.filtration-content .filtration-cta .text-content a {
  text-decoration: none;
}

.filtration-content .filtration-cta .button {
  margin-right: 2%;
}

.filtration-content .handle-types {
  background: white;
  box-sizing: border-box;
  padding: 1rem;
  margin-top: 1rem;
}

.filtration-content .handle-type-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.filtration-content .handle-type {
  width: 24%;
}

.filtration-content .handle-type img {
  width: 100%;
}

.filtration-content .handle-type ul {
  list-style-position: outside;
  margin-left: 1rem;
}

.filtration-content .columns {
  align-items: center;
  background: white;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.filtration-content .triflow {
  background: white;
  box-sizing: border-box;
  padding: 1rem;
  max-width: 41.5%;
}

.filtration-content .filter-diagram {
  background: white;
  display: flex;
  justify-content: center;
  padding: 1rem 5% 0 10%;
  width: 49.5%;
}

.filtration-content .about-triflow {
  align-items: center;
  background: white;
  box-sizing: border-box;
  display: flex;
  padding: 1rem;
}

.filtration-content .about-triflow .benefits-image {
  flex: 1 0 auto;
}

.filtration-content .about-triflow .benefits-image img {
  max-width: 100%;
}

.filtration-content .tested-by {
  background: white;
  box-sizing: border-box;
  padding: 1rem;
  margin-top: 1rem;
}

.filtration-content .faqs {
  background: white;
  box-sizing: border-box;
  padding: 1rem;
  margin-top: 1rem;
}

.filtration-content .faqs .question {
  border-bottom: 1px solid #ccc;
}

.filtration-content .faqs .question:last-of-type {
  border-bottom: none;
}

.webpage.contact .text-content {
  padding: 20px 4%;
}

.webpage.contact .text-content h2:first-of-type,
.webpage.contact .contact-form-container h2 {
  margin-top: 0px;
}

.webpage.contact .text-content h3 {
  margin-bottom: 0px;
}

.webpage.contact .text-content h3 a,
.webpage.contact .contact-form-container h3 a {
  text-decoration: none;
  font-size: 1.25em;
}

.webpage.contact .text-content h4 {
  margin-top: 5px;
}

.webpage.contact .text-content h4 a {
  text-decoration: none;
  font-size: 1.1em;
}

.webpage.contact .contact-form-row {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.webpage.contact .contact-form-row label {
  width: 25%;
}

.webpage.contact .contact-form-row input,
.webpage.contact .contact-form-row textarea {
  width: 100%;
}

.webpage.contact .contact-form-row textarea {
  height: 15vh;
  margin: 5px 0;
}

.webpage.contact #contact-form-submit {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.webpage.contact #contact-form-button {
  width: 40%;
}

#brochures h2 {
  margin-top: 0px;
  margin-bottom: 10px;
  text-align: center;
}

#brochures h2 a {
  text-decoration: none;
}

#brochures .text-content {
  height: 100%;
}

#brochures .content {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

#brochures .button {
  text-align: center;
}

.webpage .issuuembed {
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
  height: 900px;
}

.finishes-container {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  background: #FFFFFF;
  padding: 0 2% 10px;
}

.finish-type {
  display: flex;
  flex-flow: column;
  text-align: center;
}

.finish-type img {
  width: 100%;
  max-width: 200px;
}

.finish-name {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 5px;
}

#js-leadtimes-content .finish-name, .webpage.delivery .finish-name {
  font-size: 16px;
}

#js-description .finish-name{
  font-size:14px;
}

.finish-leadtime {
  border-top: 1px solid #3A3A3A;
  padding-top: 5px;
}

#js-leadtimes-content .finish-leadtime {
  font-size: 14px;
}

.webpage.delivery .finish-leadtime {
  font-size: 12px;
}

.description-finishes {
  display:flex;
  flex-flow:row;
  align-items: flex-start;
}

.description-finishes-image{
  flex:1 0 30%;
}

.description-finishes-text p:first-of-type{
  margin-top:0px;
}

/* -- search page -- */
.search-results .results.grid .pagination {
  display: flex;
  font-size: 1rem;
  grid-column: 1/5;
  justify-content: space-around;
  margin: 1rem 1.0416666667%;
  width: 97.9166666667%;
}

.search-results .results.grid .pagination>div {
  width: 33%;
}

.search-results .results.grid .pagination .prev a,
.search-results .results.grid .pagination .next a {
  align-items: center;
  background: var(--accent);
  border: 1px solid #141821;
  color: white;
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
  text-decoration: none;
  width: 100%;
}

.search-results .results.grid .pagination .prev a:hover,
.search-results .results.grid .pagination .next a:hover,
.search-results .results.grid .pagination .pages a:hover {
  background: var(--accent-hover);
  color: white;
}

.search-results .results.grid .pagination .pages {
  display: flex;
  justify-content: center;
  margin: 0 6%;
}

.search-results .results.grid .pagination .pages a {
  background: white;
  box-sizing: border-box;
  text-decoration: none;
  padding: 0.5rem 1rem;
  margin: 0 2%;
}

.search-results .results.grid .pagination .pages a.current-page {
  background: var(--accent);
  border: 1px solid #141821;
  color: white;
}

/* ---
/* --- TABLET STYLES
/* --------------- */
@media screen and (max-width: 1024px) {
  .category-intro {}

  .category-intro .perrin-branding {
    margin-top: 20px;
  }

  .category-intro .text-content {
    width: 100%;
  }

  .price-container {
    margin-top: 5px;
  }

  .product-detail .images-price .price-block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  /* -- Duplicated from below because the product detail page has a smaller container */
  .product-detail .filtration-info {
    background: url('https://files.ekmcdn.com/justperrin/resources/design/filtration-taps-tablet-mobile-cross-sell.jpg') #ded7d4 no-repeat center top;
    background-size: contain;
    flex-direction: column;
    padding: 50% 0 0;
  }

  .product-detail .filtration-info h3 {
    background: #ded7d4;
    box-sizing: border-box;
    padding: 1rem 5%;
    width: 100%;
  }

  .filtration-content .filtration-cta {
    flex-direction: column;
  }

  .filtration-content .filtration-cta {
    background: url('https://files.ekmcdn.com/justperrin/resources/design/filtration-taps-tablet-mobile-cross-sell.jpg') #ded7d4 no-repeat center top;
    background-size: contain;
    flex-direction: column;
  }

  .filtration-content .filtration-cta .text-content {
    background: #ded7d4;
    box-sizing: border-box;
    margin: 50% 0 0;
    padding: 1rem;
    text-align: center;
    width: 100%;
  }

  .filtration-content .filtration-cta .button {
    margin: 0 auto 1rem;
    min-width: 200px;
    width: 25%;
  }

  .webpage .issuuembed {
    height: 768px;
  }

  .usps-header img {
    display: none;
  }

  .product-detail h2.product-saving {
    font-size: 1.1rem;
    width: 100%;
  }
}

@media screen and (max-width: 900px) {
  .product-detail .finishes ul li {
    width: 18%;
  }

  .product-detail .text-content .tab-controls a {
    font-size: 14px;
  }

  #js-leadtimes-content .finishes-container {
    flex-flow: row wrap;
  }

  #js-leadtimes-content .finish-type img {
    max-width: 75px;
  }
}

@media screen and (max-width: 700px) {
  .finishes-container {
    flex-flow: row wrap;
  }

  .finish-type img {
    max-width: 100px;
  }

  #js-description .description-finishes{
    flex-flow:column;
  }

  #js-description .finishes-container .finish-type{
    width:75px;
  }

  .finishes-page-container {
    flex-flow: wrap;
  }

  .finishes-page-box {
    width: 100% !important;
  }

  .product-detail .finishes ul li {
    width: 21%;
  }

  /* -- Duplicated from above because the category has a bigger container */
  .category .filtration-info {
    background: url('https://files.ekmcdn.com/justperrin/resources/design/filtration-taps-tablet-mobile-cross-sell.jpg') #ded7d4 no-repeat center top;
    background-size: contain;
    flex-direction: column;
    padding: 50% 0 0;
  }

  .category .filtration-info h3 {
    background: #ded7d4;
    box-sizing: border-box;
    padding: 1rem 5%;
    width: 100%;
  }


  .category-intro#js-mobile-category-intro {
    display: flex;
  }

  #js-filters>.collapsable-content {
    display: none;
  }

  .ekm-filterby-form {
    display: flex;
  }

  .filters {
    margin-bottom: 10px;
    margin-right: 0;
    width: 100%;
  }

  .filters.desktop-filters {
    display: none;
  }

  .webpage .issuuembed {
    height: 525px;
  }

  .filtration-content .handle-type {
    border-bottom: 1px solid #ccc;
    width: 50%;
    margin-bottom: 1rem;
  }

  .filtration-content .columns {
    flex-direction: column;
  }

  .filtration-content .filter-diagram {
    padding: 1rem 0;
    width: 100%;
  }

  .filtration-content .triflow {
    max-width: 100%;
    width: 100%;
  }

  .filtration-content .about-triflow {
    flex-direction: column-reverse;
  }
}

/* ---
/* --- MOBILE STYLES
/* --------------- */
@media screen and (max-width: 480px) {
  .category-intro .category-desc-image {
    flex: 1 0 auto;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
  }

  .category-intro .category-desc-image img {
    width: 100% !important;
  }

  .product-list.has-filters {
    margin: 0;
    width: 100%;
  }

  .grid, .search-results .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid .grid-item {
    display: flex;
  }

  .category {
    display: flex;
    flex-direction: column;
  }

  .category .breadcrumbs {
    order: 0;
  }

  .category .category-grid {
    order: 1;
    margin-top: 0.5rem;
  }

  .category .category-grid .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category .ekm-filterby-form {
    order: 2;
    width: 100%;
  }

  .category .ekm-filterby-form #js-filters {
    width: 100%;
  }

  .category .ekm-filterby-form .brochures {
    display: none;
  }

  .category .product-list {
    order: 3;
  }

  .category-intro {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    order: 4;
  }

  .category-intro .perrin-branding {
    display: none;
  }

  .category-intro .text-content {
    display: inline;
    float: left;
    width: 97.9166666667%;
    margin: 0 1.0416666667%;
  }

  .product-detail .images-price {
    width: 100%;
  }

  .product-detail .text-content {
    margin-right: 0;
    width: 100%;
  }

  .product-detail .text-content .tab-controls {
    display: none;
  }

  .product-detail .text-content .tab-content {
    display: block;
  }

  .product-detail .finishes {
    margin-top: 10px;
  }

  .product-detail .finishes ul li {
    width: 21%;
  }

  .product-detail .quantity {
    padding-top: 5px;
  }

  .webpage .content-container {
    display: block;
  }

  .webpage .container-block,
  .webpage.finish .container-block {
    width: 100%;
  }

  .webpage.contact #contact-form-submit {
    flex-flow: column;
  }

  .webpage .issuuembed {
    height: 360px;
  }

  .handle-type {
    width: 100%;
  }

  .filtration-benefits ul {
    column-count: 1;
    column-gap: 0;
  }

  .search-results .variantfinish {
    font-size:10px;
  }

  .search-results #finish-image {
    max-width:30px;
  }

  .search-results .results.grid .pagination {
    flex-direction: row;
    grid-column: 1/3;
  }

  .search-results .results.grid .pagination>div {
    margin-bottom: 0.5rem;
    width: 100%;
  }

  .search-results .results.grid .pagination .pages {
    margin: 0 0 0.5rem;
  }

  .search-results .results.grid .pagination .pages a {
    padding: 0.5rem 0.8rem;
    margin: 0 2%;
  }
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .usps-header img {
    display: none;
  }

  .category .category-grid .grid .grid-item:hover,
  .product-notification {
    background-color: #0991a9;
  }
}