:root {
	--inner-radius: 0.2vw;
	--outer-radius: 0.3vw;
	--button-radius: 0.3vw;
	--grid-gap: 1vw;
	--list-padding: 0.5vw;
}
body{
	color: #000;
	background: #eaeaea;
}
.call-to-action {
	background: rgba(0, 0, 0, 1);
}
#navCart .dropdown-toggle, .mininav-container li a {
	color: #000;
}
.pagecontainer {
	padding-top: 50px;
	border-left: 60px solid #000;
	background: #eaeaea;
}
.wrapper{
	max-width: none;
}
.ptbodyclass .logo a {
	background: url(/wp-content/themes/porcelain-tiles-2026/images/porcelain-tiles-logo-black.svg) no-repeat center center;
}
.hamburger .line {
	background-color: #fff;
}
.mobilemenu {
	background: #000;
}
.angle #hamburger-8 .line:nth-child(2) {
	background-color: #000;
}
.site-navigation .nav-background {
	background: rgba(255, 255, 255, 1);
}
#pageslide {
	border-left: 60px solid #000;
}
.tm-section{
	max-width: unset;
	padding-left: 1vw;
    padding-right: 1vw;
}
.pp-slablist li {
	padding: var(--list-padding);
	background: #fff;
	border-radius: var(--outer-radius);
	margin: 0;
	position: relative;
}
form.controls{
	flex-direction: row;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--inner-radius);
}

.propose-actions {
	margin: auto;
	display: flex;
	justify-content:right;
	align-items: center;
	gap: var(--inner-radius);
    position: fixed;
    right: 2vw;
    bottom:1vh;
    padding: 0;
    z-index: 3;
}



/* filter controls */

.tailor-made-container .controls-container {
    background: unset;
    position: relative;
    box-shadow: unset;}
    


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

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

 button.control {
    
    appearance: none;
    -webkit-appearance: none;
    margin: 0.2em 0;
    cursor: pointer;
    transition: all 0.5s ease;
    
    padding: 0 1vw;
	line-height: 40px;
	border: 3px solid rgba(255, 255, 255, 1);
	color: #777;
	background-color: #f9f9f9;
	border-radius: var(--button-radius);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
	font-family: 'Futura PT W01 Demi';
	font-size: 0.75em;
	letter-spacing: 0.05em;
	text-transform: initial;

}



button.control.reset{
  color: #000;
}


.mixCount {
    display: inline;
}


/* End Filter Controls */

/* Send Selected Swatches */


.uncheckallbutton{
    text-transform:uppercase; 
    text-decoration:none; 
    letter-spacing:0.2em; 
    font-size:0.7em; 
    margin-left:10px;
    line-height: 44px;
    color: #808080;
}
.createlist.highlighted{
    background: #71a498;
	border: 3px solid rgba(255, 255, 255, 1);
	color:#fff;
}
input[type=checkbox] {
        position: relative;
        cursor: pointer;
       margin-right: 10px;
   }
   input[type=checkbox]:before {
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        left: 0;
        background-color:#fff;
        top: -2px;
	    border: 1px solid #000000;
}
input[type=checkbox]:checked:before {
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 0;
        left: 0;
	background-color: #71a498;
	border: 1px solid #71a498;

}
   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 */



fieldset.control-group {
	border: none;
	margin: 0;
	text-align:left;
	position: relative;
	padding: 0;
	text-align: center;
	display: flex;
	gap: var(--inner-radius);
	justify-content: center;
	flex-wrap: wrap;
}
span.resultscount {
	display: inline-block;
	text-align:right;
	margin-right: 2em;
	line-height: 46px;
	margin: 0 0.5em;
	width:90px;
    white-space: nowrap;
}
.propose-actions h4{
	margin: 0;
}
.controls-container{
	padding: 1vh 0 1vh 0;
}

.controls legend{
	display: none;
}


.sendselect.highlighted {
	background: #ffffff;
	color: #000;
}

button.mixitup-control-active{
    color: #fff;
	background-color: #c7c7c7;
}
button.mixitup-control-active.color-white{
	background-color: #f0f0f0;
	color: #000;
}
button.mixitup-control-active.color-cream{
	background-color: #e5d8c2;
}
button.mixitup-control-active.color-grey{
	background-color: #c7c7c7;
}
button.mixitup-control-active.color-brown{
	background-color: #938675;
}
button.mixitup-control-active.color-tan{
	background-color: #ddc29f;
}
button.mixitup-control-active.color-black{
	background-color: #222;
}
button.mixitup-control-active.color-blue{
	background-color: #74a2c8;
}
button.mixitup-control-active.color-green{
	background-color: #709179;
}
button.mixitup-control-active.color-pink{
	background-color: #a78997;
}
button.mixitup-control-active.color-coloured{
	background-color: #dfc5b0;
}



.sendselect:has(input[type=checkbox]:checked) {
    background: #71a498;
    color: #fff;
}


.sendselect {
	top: var(--list-padding);
	border-bottom-right-radius: var(--inner-radius);
	border-top-left-radius: var(--inner-radius);
	left: var(--list-padding);
	padding: 7px 12px 10px 4px;
	border:unset;
    position:absolute; 
    background:rgba(255,255,255,0.5); 
    text-transform: uppercase; 
    letter-spacing: 0.2em; 
    font-size: 0.7em;
}


.swatchfooter, .swatch {
	font-size: 0;
}

.slab-collection {
    list-style-type: none;
    padding: 0;
    margin: 0px;
    display: grid;
    font-size:0;
    grid-template-columns: repeat(3, minmax(33.33%, 1fr));
}
.slab-collection li {
    padding: 0;
    margin: 0;
    text-align: center;
    position: relative;
}
.slab-collection h3{position: absolute; bottom: 0; text-align: center; width:100%; color: #fff; z-index:2; padding:50% 0 8% 0; margin: 0; transition: all 0.5s ease-in-out; font-size: 2.75vw; line-height: 1;}
.slab-collection h3 span{font-size: 42%; display: block;letter-spacing: 0.25em;}
.slab-collection h3::before{content:" ";position: absolute; z-index:-1; border:none; margin:0; bottom:0px; left:0; width:100%; height:100%; background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(34,34,34,1) 10%, rgba(34,34,34,0) 100%); }
.slab-collection li:hover h3 {padding-top:70%}
.slab-collection a{color: #fff;}
.page-id-54928 .entry-header {display: none;}

.colours-container {
    background: #eaeaea;
}

.pp-slablist{
	grid-template-columns: repeat(5, minmax(18%, 1fr));
	gap: var(--grid-gap);
	margin: 0;
	padding: 0 1vw 4vw 1vw;
	list-style: none;
	display: grid;
	align-items: start;
	min-height: 500px;
}
.pp-slablist .swatch img {
	width: auto;
	display: block;
	border-top-right-radius: var(--inner-radius);
	border-top-left-radius: var(--inner-radius);
	aspect-ratio: 1 / 1.75;
	object-position:left top;
	/* border-top: 1px solid rgba(255, 255, 255, 0.3); */
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.pp-slablist li::before {
	display: block;
	position: absolute;
	width: 65px;
	line-height: 40px;
	text-align: center;
	font-size: 8px;
	font-family: 'Futura PT W01 Heavy';
	text-transform: uppercase;
	background: rgba(50, 50, 50, 1);
	z-index: 1;
	bottom: 0px;
	right: 0px;
	border-radius: var(--inner-radius);
	color: #222;
	background: #fff;
}
.pp-slablist li.bookmatch {
	grid-column: unset;
}
.bookmatch .colourname-thickness:before{
	content: "Bookmatched ";
}
.pp-slablist .swatch img, .pp-slablist .swatchfooter img {
	object-fit: cover;
}
.pp-slablist li.bookmatch .swatch img{
	aspect-ratio: 1 / 2.1;
	margin-bottom: -35%;
}
.pp-slablist .swatchfooter img {
	max-width: 100%;
	aspect-ratio: 2 / 0.75;
	border-bottom-right-radius: var(--inner-radius);
	border-bottom-left-radius: var(--inner-radius);
	object-position:left bottom;
}
.pp-slablist li.bookmatch .swatchfooter img {
	object-position: center;
}
.pp-slablist .colournames {
	background: #ffffff;
	color: #222;
	background: linear-gradient(90deg,rgba(255, 255, 255, 1) 35%, rgba(245,245,245, 1) 55%, rgba(245,245,245, 1) 65%, rgba(255, 255, 255, 1) 85%);
	text-align:center;
	font-size: initial;
	line-height: 21px;
	padding: 0.5em 0;
	position: relative;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.colourname-thickness {
	display: block;
	color: #999;
	font-family: 'Futura PT W01 Book';
}
.pp-slablist li.novelty::before {
	content: "Novelty";
}
.colournames {
	font-family: 'Futura PT W01 Demi'
}
.pp-slablist li.tm12::after,.pp-slablist li.tm20::after, .tm12 .colourname::after, .tm20 .colourname::after {
	content: none;
}
.line-through{
	position: relative;
	display: inline-block;
}
.line-through:after{
	content: " ";
	display: block;
	width: 100%;
	border-bottom: 2px solid #222;
	height: 1px;
	position: absolute;
	left: 0;
	top: 53%;
	border-top: 1px solid #fff;
}
.slabs-intro-container {
	text-align: center;
}
.slabs-example {
	display: flex;
	flex-direction: column;
}
.slabs-intro-img-caption {
	text-transform: uppercase;
	text-align:right;
	font-family: 'Futura PT W01 Demi';
	font-size: small;
	letter-spacing: 0.1em;
	padding-right: var(--inner-radius);
	line-height: 25px;
}
.slabs-intro-layer-01 .slabs-intro-img-caption{
	color: #fff;
}
div.slabs-intro-img{
	box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.1);
	font-size: 0;
	padding: var(--inner-radius);
	background: #fff;
	border-radius: var(--outer-radius);
}
img.slabs-intro-img{
	border-radius: var(--inner-radius);
}
.slabs-intro-layer-01 {
	max-width: 320px;
	margin: auto;
	position: relative;
	z-index: 2;
	left: 10%;
	width: 50%;
	padding-top: 1em;
}
.slabs-intro-layer-02 {
	position: relative;
	z-index: 1;
	margin-top: -13%;
}
.slabs-intro-layer-03 {
	display: flex;
	gap: var(--grid-gap);
	max-width: 1100px;
	margin: var(--grid-gap) auto;
}
.slabs-desktop {
	flex-basis: 0;
	flex-grow: 3;
}
.slabs-grid {
	flex-basis: 0;
	flex-grow: 7;
}
.slabs-grid-examples {
	display: flex;
	gap: var(--grid-gap);
}
.slabs-example-01, .slabs-example-02, .slabs-example-03, .slabs-example-04{
	flex-basis: 0;
}
.slabs-grid-examples .slabs-example-02{
	display: none;
	flex-grow: 1;
}
.slabs-example-03{
	flex-grow: 1.7;
}
.slabs-example-04{
	flex-grow: 1.2;
}
.slabs-intro-text {
	text-align:left;
	padding: 0 0.5em 1em;
}
.slabs-intro-text h3{
	font-size: 42px;
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1;
	font-family: 'Futura PT W01 Light';
}
.slabs-intro-text p{
	margin-bottom: 0;
}
.ni-cta-button {
	color: #fff;
	background: #000;
	display: inline-block;
	padding: 0 2em;
	line-height: 3em;
	text-transform: uppercase;
	text-decoration: none;
	font-family: 'Futura PT W01 Demi';
	letter-spacing: 0.15em;
	font-size: smaller;
	border: 1px solid #000;
	margin-top: 0.5em;
}


/* 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%;padding: var(--list-padding);
    background: #fff;
    border-radius: var(--outer-radius);
    margin: 0;}
  .swatches ul img{max-height: 75vh; border-radius: var(--outer-radius);
    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{max-width: 600px;}
  .details {text-align:left; flex-basis: 0;
        flex-grow: 1;}
  .details-content{margin-top:calc(2.5vh + var(--list-padding));}
  .details h1.colourname {margin-top: 0; font-size: 36px; line-height:1;}

  
  /* modal */
  
  .blocker {z-index: 2300; 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: 1.5em;}
.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: 1100px) {
	
	.mobilehide{display:none !important;}
.columns{flex-direction: column; align-items: center;}
.swatches{margin-top:2vh;}
.details-content {padding:0 4vw;}
.details{width:unset;}
	
	.pp-slablist{
	grid-template-columns: repeat(3, minmax(31%, 1fr));
	}
	
	form.controls {flex-direction: column;}
}
@media screen and (max-width: 800px) {
	.slabs-intro-text h3 {
	font-size: 36px;
	}
	.pagecontainer{
	border-left: unset !important;
	}
	.pp-slablist{
	grid-template-columns: repeat(2, minmax(46%, 1fr));
	}
	.slabs-intro-layer-01 .slabs-intro-img-caption{
	display: none
}   .specification-table {font-size: 0.8em;}
	.colournames {
	padding: 0.25em 0 0.25em 0.25em;
	}
	.swatches ul img {max-height: 65vh;}
	.slab-collection h3{font-size: 6vw;}
	.slab-collection {grid-template-columns: repeat(2, minmax(33.33%, 1fr));}
	.slabs-desktop{
	display: none;
	}
	.slabs-grid-examples {
	padding: 0 1vw;
	}
	.slabs-grid-examples .slabs-example-02{
	display: block;
	}
}