h1.colourname-pt, h4.colourname.pt{display:none;}


.page-template-tm-propose-colour, .page-template-tm-colours{
    color: rgb(17, 17, 17);
    padding-top: 50px;
    background: rgb(255, 255, 255);
} 



 
 
 /* Collection Page */
   .colourlist .pp-section, .colour  .pp-section, .search, .filter-search, .pp-section {position: relative;}
   .colourlist h3::before {border-top: 1px solid #fff;}


    .pp-colourlist{    
    margin:2em auto;
    padding: 0;
    list-style: none;display: grid;
    grid-template-columns: repeat(4, minmax(23%, 1fr));grid-gap: 2vw;
    grid-row: auto;
    text-align: justify;}
    
   .pp-colourlist li{margin: 0; padding: 0; position: relative;}
   .pp-colourlist li.bookmatch{grid-column: span 2 / span 2;}
   .page-id-16624 .mix a{font-size:unset !important;}
   .pp-colourlist h4{text-align:center;margin:0; letter-spacing: 0.05em; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; font-size:0.9em;}
   .pp-colourlist a{text-decoration:none; color:#222;}
   .pp-colourlist img{max-width:100%; object-fit: cover; aspect-ratio: 1/2; width: 100%; background: rgb(247 246 240);}
   .pp-colourlist .bookmatch img{aspect-ratio: 1/0.96;}
   .tmgrip img {aspect-ratio: 1 / 1;}
   .colourname{text-transform: capitalize; letter-spacing: 0.05em;}
   .colourname::after, .colourname span, .colourname-id {font-size: 85%; text-transform: initial; color: #999;}

   .pp-tag-tm20 .colourname::after {content: " (20mm)";}
   .pp-tag-tm12 .colourname::after {content: " (12mm)";}
   .tm6 .colourname::after {content: " (6mm)";}
   .pp-tag-none.active .colourname::after {content: " (Active)";}




   .pp-colourlist li::after, .pp-colourlist li::before{
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    color: #fff;
    top: -10px;
    right: -5px;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    font-size: 8px;
    font-family: 'Futura PT W01 Heavy';
    text-transform:uppercase;
    background: rgba(50,50,50,1);
    z-index:1;
}

.pp-colourlist li::before{border-radius: 0px; height: 30px; line-height: 30px;  width: 65px; top: 0px; right: 38px;}
.pp-colourlist li.tm6::before{right: 0px;}

 .pp-colourlist li.novelty::before {
  content: "Novelty";
 }



 .pp-colourlist li.active::after {
  content: "Active";
 }

 .pp-colourlist li.tm12::after {
  content: "TM12";
 }

 .pp-colourlist li.tm20::after {
  content: "TM20";
 }
 
 .pp-colourlist li.tmgrip::after {
  content: "TMGrip";
 }

 .pp-colourlist li.bookmatch::after {
  content: "Bookmatch";
  font-size: 7px;
 }

 .pp-colourlist li.fullbody::after {
  content: "Full Body";
  font-size: 7px;
 }



    /* End Collection Page */



/* filter controls */

.tailor-made-container .controls-container {
    background: unset;
    position: relative;
    box-shadow: unset;}
    
    
form.controls, .propose-actions {
    margin: auto;
}

fieldset.control-group {
    border: none;
    margin:  0.5em 0;
    text-align: left;
    position: relative;
    padding:0;
}

.control-group legend {
    text-align: left;
    line-height: 15px;
}

button.control:active, button.control:focus {
    outline: none;
}

 button.control {
    border: none;
    padding: 0 0.75em;
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.55em;
    appearance: none;
    -webkit-appearance: none;
    font-weight: 100;
    margin: 0.2em 0;
    border: 1px solid rgba(228, 226, 217, 1);
    color: #666;
    cursor: pointer;
    transition: all 0.5s ease;
    background-color: #fff;
    border-radius:4px;
}

button.mixitup-control-active{
  color: #fff;
  border: 1px solid rgb(189 185 175);
  background: rgb(189 185 175);}

button.control.reset{
  font-family: 'Futura PT W01 Demi';
  color: #000;
}


.mixCount {
    display: inline;
}


/* End Filter Controls */

/* Send Selected Swatches */

.sendselect{position:absolute; top:0%; left:0; border:10px solid transparent; background:rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7em;}
.sendselect.highlighted{background:#96805e; color:#fff;}
.uncheckallbutton{text-transform:uppercase; text-decoration:none; letter-spacing:0.2em; font-size:0.7em; margin-left:10px;}
.createlist.highlighted{background:#96805e; color:#fff;border: none;}
input[type=checkbox] {
        position: relative;
        cursor: pointer;
       margin-right: 10px;
   }
   input[type=checkbox]:before {
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 0;
        left: 0;
        background-color:#fff;
        border:1px solid #96805e;
}
input[type=checkbox]:checked:before {
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 0;
        left: 0;
        background-color:#96805e;
        border:1px solid #96805e;
}
   input[type=checkbox]:checked:after {
        content: "";
        display: block;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        top: 3px;
        left: 7px;
}

/*  End Selected COlours Swatches */



/* Colour Page */
img {
    max-width: 100%;
}
   
.columns {
    display: flex;
    max-width: 1200px;
    margin: auto;
    align-items: flex-start;
    justify-content: space-evenly;
}

  .swatches ul {list-style: none; position: relative; z-index:1; padding: 2vw; margin: auto; line-height: 0;}
  .swatches li{padding: 0; margin:0; z-index: 4; overflow: visible; display: block; width:100%;}
  .swatches ul img{max-height: 75vh;border-left: 1px solid rgba(255,255,255,0.5);border-right: 1px solid rgba(0,0,0,0.05);border-top: 1px solid rgba(255,255,255,0.5);border-bottom: 1px solid rgba(0,0,0,0.05);
    aspect-ratio: 1 / 2;
    object-fit: cover;}
  
  .swatches li:nth-child(1){right:0vw; top:0vw; position: relative; z-index: 5;}
  .swatches li:nth-child(2){right:0.5vw; top:0.5vw; position: absolute; z-index: 3; transform: scale(0.90, 0.90); transform-origin: 0% 50%;}
  .swatches li:nth-child(3){right:2.25vw; top:1vw; position: absolute; z-index: 2; transform: scale(0.80, 0.80); transform-origin: 0% 50%;}
  .swatches li:nth-child(4){right:3.25vw; top:1.5vw; position: absolute; z-index: 1; transform: scale(0.70, 0.70); transform-origin: 0% 50%;}
  .swatches li:nth-child(5), .swatches li:nth-child(6), .swatches li:nth-child(7), .swatches li:nth-child(8), .swatches li:nth-child(9), .swatches li:nth-child(10){display:none;}

  .swatches{flex-basis: 0;
        flex-grow: 1;}
  .details {text-align:left; flex-basis: 0;
        flex-grow: 1;}
  .details-content{margin-top:2.5vh;}
  .details h1.colourname {margin-top: 0; font-size: 36px; line-height:1;}

  
  /* modal */
  
  .blocker {z-index: 100; background-color: rgba(0,0,0,0.5); padding:0;}
  .modal {max-width: 1000px; padding: 2vw; border-radius:5px; box-shadow: none; background: rgba(247,246,241,0.9);}
  .modal h3::before{content:none;}
  .specification-table th span.pp-helper{  display: inline-block;}
  .pp-helper{width: 18px;
      height: 18px;
      background-size: contain;
      background-color: transparent;
      padding: 0;
      margin: 0;
      position: relative;
      top: -3px;
    
      background-position: center;
      background-image:url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTEwLjUsOTYuNmwyNS42LTE3LjNoNDUuOGM2LjEsMCwxMS00LjksMTEtMTFWMTRjMC02LjEtNC45LTExLTExLTExSDE4LjFjLTYuMSwwLTExLDQuOS0xMSwxMXY0NnY4LjJ2MjYuNSAgQzcuMSw5Ni42LDkuMSw5Ny42LDEwLjUsOTYuNnogTTUzLjYsNjAuMWMwLDEuMi0wLjksMi4xLTIuMSwyLjFoLTUuNGMtMS4yLDAtMi4xLTAuOS0yLjEtMi4xdi0zLjVjMC0xLjIsMC45LTIuMSwyLjEtMi4xaDUuNCAgYzEuMiwwLDIuMSwwLjksMi4xLDIuMVY2MC4xeiBNMzkuNSwyMy4xYzIuNi0yLDYtMywxMC4yLTNjNC41LDAsOC4xLDEuMSwxMC43LDMuNGMyLjYsMi4zLDMuOSw1LjQsMy45LDkuMmMwLDIuNC0wLjcsNC42LTIuMSw2LjYgIGMtMS40LDItMy4yLDMuNi01LjQsNC43Yy0xLjIsMC44LTIsMS43LTIuNSwyLjZDNTQsNDcuMiw1My44LDQ4LDUzLjcsNDljLTAuMSwwLjgtMC43LDEuMy0xLjUsMS4zaC02LjZjLTAuOSwwLTEuNi0wLjctMS41LTEuNiAgYzAuMi0xLjksMC42LTMuMywxLjQtNC40YzAuOS0xLjMsMi42LTIuOSw1LjEtNC42YzEuMy0wLjgsMi4zLTEuOCwzLTNjMC43LTEuMiwxLjEtMi41LDEuMS00LjFjMC0xLjYtMC40LTIuOS0xLjMtMy44ICBjLTAuOS0xLTIuMS0xLjQtMy43LTEuNGMtMS4zLDAtMi4zLDAuNC0zLjIsMS4yYy0wLjUsMC41LTAuOSwxLjEtMS4xLDEuOWMtMC4zLDEtMS4yLDEuNi0yLjIsMS41TDM3LjEsMzJjLTAuOCwwLTEuNC0wLjctMS4zLTEuNCAgQzM2LDI3LjMsMzcuMiwyNC44LDM5LjUsMjMuMXoiPjwvcGF0aD48L3N2Zz4=")
      ;
      }
     .modal a.close-modal{ top: 12.5px; right: 12.5px;}
  
  .table-scroller {overflow: auto;max-width: 100%;-ms-overflow-style: -ms-autohiding-scrollbar;-webkit-overflow-scrolling: touch;}
  .pp-table{text-align: left; font-size: 80%; display: table; border-collapse: collapse; width: 100%;}
  .pp-table th {text-transform: uppercase; font-weight: 500;}
  .pp-table th,.pp-table td {padding: 1.5em 0.3em; vertical-align: middle; border: 1px solid rgba(0,0,0,0.1); white-space: nowrap;}
  
  .pp-sizes {display: flex;flex-wrap: wrap;margin-left: -1%;}
  .pp-sizes span {transform: translate(0px, -100%); display: block; white-space: nowrap;}
  .pp-sizes div {display: block; box-shadow: -2px 2px 4px rgba(0,0,0,0.15); margin: 1% 1% 20px 1%; background-position: center; color: #383838; vertical-align: middle; text-align: center;}
  .pp-sizes div.pp-sizes-full{font-size:0.8em; ;}
  .pp-sizes div.pp-sizes-scaled{font-size:0.5em;display: none}
  
  .modal-bookmatch .pp-sizes div{width:150px !important; height:150px !important; background-size: 100% !important;}
  .modal-bookmatch p::before {content: "Two slabs, both Block A and Block B are shown in the swatch image. ";}
  
  
  .pp-sizes div:nth-child(3),.pp-sizes div:nth-child(4){background-position: right top;}
  .pp-sizes div:nth-child(5),.pp-sizes div:nth-child(6){background-position: left bottom; }
  .pp-sizes div:nth-child(7),.pp-sizes div:nth-child(8){background-position: left top; }
  .pp-sizes div:nth-child(9),.pp-sizes div:nth-child(10){background-position: right bottom;}
  .pp-sizes div:nth-child(11),.pp-sizes div:nth-child(12){background-position: center; }
  .pp-sizes div:nth-child(13),.pp-sizes div:nth-child(14){background-position: left bottom; }
  
  #faces{max-width: 1200px;}
  .pp-faces ul{list-style: none; display:flex; position: relative; padding: 0; margin: 1em auto 2em auto; line-height: 0;}
  .pp-faces li {position: relative; margin: 0; padding: 0;}
  
  .pp-faces li img{border-right: 1px solid rgba(0,0,0,0.2); border-left: 1px solid rgba(255,255,255,0.3);}
  .pp-faces li:last-child img {border-right: 1px solid transparent;}
  .pp-faces li:first-child img {border-left: 1px solid transparent;}
  .pp-faces li figcaption span{display:none;}



  
  .pp-tag-active .tile-thickness {display: none !important;}
  
  ul.flex{margin:0 0 3em 0; padding:0; list-style:none; display: flex;}
     ul.flex li{display: block; margin: 0;
      text-align: center;
      flex-basis: 0;
      flex-grow: 1;}
  
  .swatches figcaption, .pp-faces figcaption {
      width: 100%;
      text-align: center;
      background: none;
      font-size: 0.8em;
      position: absolute;
      display: none;
  }

  
  .pp-faces figcaption {display: block;}
  /*.swatches li:nth-child(1) figcaption {display: block;}*/
  
  .pswp__caption__center {
      text-align: center;
      max-width: 420px;
      line-height: 20px;
      color: #CCC;
      font-size: 0.8em;
  }

.specification-table{margin-bottom: 7vh;}
.specification-table thead th{font-size:0.8em;}
.specification-table th{width:25%; white-space: nowrap;}
.specification-table th, .specification-table td{padding: 1em;}
.specification-table th span{display: block; font-weight: 400;}
.specification-table th a {text-decoration:none; color:unset;}

  /* End Colour Page */
  
  
  


/* for mobile screens */


/* for mobile screens */
@media screen and (max-width: 1023px) {
.mobilehide{display:none !important;}
.columns{flex-direction: column; align-items: center;}
.swatches{margin-top:40px;}
.details-content {padding:5vw;}
.details{width:unset;}

}


@media screen and (max-width: 800px) {
  .specification-table {font-size: 0.8em;}
  .pp-colourlist{grid-template-columns: repeat(2, minmax(48%, 1fr));grid-gap: 2vw;}


  
}