/* Theme Name: Porcelain Tiles 2026 Theme URI: http://www.steptoandson.co.uk Author: Stepto & Son Design Author URI: http://www.steptoandson.co.uk Description: The 2026 Porcelain Tiles Theme. Version: 2.0.01 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, white Porcelain Tiles WordPress Theme 2026 updated to work with ACF Pro */ /* font-family:'Futura PT W01 Light'; font-family:'Futura PT W01 Book'; font-family:'Futura PT W01 Demi'; font-family:'Futura PT W01 Heavy'; © */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, html { font-size: 100%; padding: 0; margin: 0;} html, body { margin: 0; padding: 0; font-family:sans-serif; } ::-webkit-scrollbar{display: none;} h1,h2,h3,h4, h5{font-weight:100; font-family:sans-serif;} body{ text-align:center; font-family:'Futura PT W01 Book', arial,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size:1.1em; color:#fff; line-height: 1.4; margin:0; background: #222; } html.sr .load-hidden, html.sr .tm-fade-in, html.sr .tm-fade-in-slow, html.sr .tm-fade-up, html.sr .tm-fade-down, html.sr .tm-fade-side, html.sr .tm-benefits-list li, html.sr .products-list li, html.sr .section-gallery li, html.sr .tm-section .range-accordion > h3, html.sr .range-attributes li{ visibility: hidden;} a:focus { outline: 0;} a:active,a:hover { outline: 0;} .grecaptcha-badge {visibility: hidden !important;} h1{font-family:'Futura PT W01 Light',sans-serif; font-size:55px; font-weight: 100; letter-spacing: 0.05em; text-transform: none;} h2{font-family:'Futura PT W01 Light',sans-serif; font-size:26px; font-weight: 100; letter-spacing: 0.02em; } h3{font-family:'Futura PT W01 Book',sans-serif; font-size:22px; font-weight: 100; letter-spacing: 0.05em; } h4{font-family:'Futura PT W01 Book',sans-serif; font-size:20px; font-weight: 100; } h5{font-family:'Futura PT W01 Demi',sans-serif; font-size:16px; font-weight: 100; letter-spacing: 0.2em; text-transform: uppercase;} h6{font-family:'Futura PT W01 Light',sans-serif; font-weight: 100; letter-spacing: 0.05em; text-transform: none; margin-top:1em; margin-bottom:1em;} a{color:#ccc;} em{font-style: normal;} strong{font-weight: normal;} sup{font-size: 70%; line-height:1;} *, *:before, *:after { box-sizing: border-box; } blockquote { background: #fff; border-left: 5px solid #000; margin: 1.5em 0px; padding: 0.7em 15px; quotes: "\201C""\201D""\2018""\2019"; font-family:'Futura PT W01 Book'; font-size: 1em; color: #333; line-height: 1; } blockquote:before { color: #ccc; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } blockquote p { display: inline; } .clear{clear:both;} .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ div.hr{margin:20px auto; max-width:400px; line-height:1px; border-bottom:1px solid #444; height:1px !important; text-align:center;} div.hr span{display:none;} div.hrleft span{float:left;} div.hrright span{float:right;} .subtle em, .subtle span, .range-benefits ul li h3, .rsGCaption, .tileactions li span, .sharelinks, .sharelinks a, .brochure-list ul li a, .brochure-list ul li p, .brochure-list ul li, .threebox ul li, .frontpanel .button a, .tile-selections li, .homeboxes li, .homeboxes h2, .homeboxes ul li img, .boxlink, .outlines div, .range-colours li img, .spacerimg, .spacerimg img, .dropdown-menu table tbody tr, .dropdown-menu h5, .mobilemenu, div.logo a, .homenav li a, .mininav-container li a, .footer a, .slick-dots li, #pageslide ul li a, .article-content a, .tileactions a, .button a, .tm-round-btn, .document-details, .document-wall img, .glance-panel{webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .mobilemenu{cursor: pointer; position: fixed; margin:0; background:#fff; width:60px; height:50px; cursor:pointer; float:left; z-index:200; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .mobilemenu a{transition: transform 400ms ease-in-out; padding:0; width:100%; height:50px; background:url(images/symbol-black.svg) no-repeat center center; background-size:65%;display:block; text-align: center;} .angle .open{-webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -o-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); } .open{ -moz-animation-name: spinner; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in-out; -moz-animation-duration: 0.6s; -webkit-animation-name: spinner; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 0.6s; animation-name: spinner; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-duration: 0.6s; } @-moz-keyframes spinner { 0% { -moz-transform: rotate(360deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(360deg); } 100% { -webkit-transform: rotate(0deg); } } @keyframes spinner { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .toggleMenu{cursor:pointer;} .logo{float:left; margin-left: 60px; position: relative; z-index: 2; width:37%; height:50px; max-width: 220px;} .ptbodyclass .logo a{text-indent:-10000px; background: url(images/porcelain-tiles-logo.svg) no-repeat center center; background-size: 100% auto; display:block; height:100%; width:100%; } .home .logo a{background: #000 url(images/porcelain-tiles-logo.svg) no-repeat center center; background-size: 100% auto; } .tmbodyclass .logo a, .tmbodyclass.home .logo a{text-indent:-10000px; background: none; display:block; height:100%; width:100%; } .logo:hover a{opacity:0.8} .site-navigation{z-index:2200; display:block; position:fixed; top:0; left:0px; right:0px;} .site-navigation .nav-background{position:absolute; z-index: -2; top:0px; width:100%;height:100%; background:rgba(0, 0, 0, 1);} .mininav-container{position: fixed; top: 0; height:50px; webkit-transition: top 0.2s ease-in-out; -moz-transition: top 0.2s ease-in-out; -o-transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out;} .site-navigation .nav-background{display:none;} .pagecontainer {overflow: hidden;} .home .site-navigation .nav-background{background:none;} .home .mininav-container{display: none;} .site-navigation ul,#pageslide ul{list-style-type:none; margin:0; padding:0;} .wishMenu, .cartMenu, .searchMenu, .telMenu{display:none;} #navCart{float:right;} #navCart .btn-group{position:initial; float:left; z-index: 2;} .dropdown-menu{position:absolute; top:0px; right:0px; width:100%; z-index:-1; background:#000; color:#fff; text-align:center;} .dropdown-menu h5{text-align:center; padding-top:30px; margin-bottom:10px;} .dropdown-menu a{text-decoration:none;} .dropdown-menu table{margin:0 auto 10px auto; border-collapse:collapse; width:100%; max-width:400px; text-align:center;} .telMenu table{max-width:800px;} .dropdown-menu table tbody td{padding:5px; font-size: 1em;} .dropdown-menu table tbody td img{width:40px; height:auto; border:1px solid #222; } .dropdown-menu table tfoot td{padding:10px 2px; text-align:center;} .dropdown-menu table tbody h5, .dropdown-menu table tbody p{padding:0; margin:0 auto 10px auto; color:#fff; font-size: 0.8em; } .dropdown-menu table tbody p{color:#999; line-height: 1.5; } .dropdown-menu table tbody tr{opacity: 0; transform:translateY(-100%);} .menuopen table tbody tr{opacity: 1; transform:translateY(0);} .dropdown-menu h5{opacity: 0;} .menuopen h5{opacity: 1;} #navCart .dropdown-toggle{ position:relative; color:#fff; font-size:12px; line-height:50px; display:block; cursor:pointer; height:50px; width:60px; padding:0; float:left; text-decoration:none; margin-left:6px;} #navCart .dropdown-toggle span{position:absolute; top:0; right:28px;} #navCart .dropdown-toggle .fa{line-height:50px; position:absolute; top:0; right:5px; text-align:center; font-size:15px; width:20px;} #navCart .dropdown-toggle em{display:none;} #navCart .dropdown-toggle a{ line-height:60px;} #navCart .toggleMenu .fa {right: 15px;} #navCart .highlight{background-color:#000; color:#fff; } a.btn{ cursor:pointer; text-decoration:none;} .dropdown-menu a.btn{line-height:40px; text-decoration: none; display:inline-block; padding:0 10px ; background:#222; color:#ccc; margin:5px 5px 0 5px; color:#fff; text-transform: uppercase; font-size: 13px; letter-spacing: 0.2em;} .dropdown-menu a.remove-product{line-height:normal; padding:5px 10px; margin:0;} #add-product-save-link{color:#111; background:#fff;} .close-dropdown{text-align:center; margin-bottom:20px;} #navCart .close-dropdown a{color: #fff; margin: 0; line-height:40px; text-align:center; padding:0; display:block; cursor:pointer; clear:both; font-size:14px; text-transform:uppercase; letter-spacing:0.2em; } .showCart{ -webkit-transition:background 1s; -moz-transition:background 1s; -o-transition:background 1s; transition:background 1s} .cartfull{background:#fff;} .cartfull .cartCount, .cartfull .fa, #navCart .cartfull em{color:#000;} .highlight .cartCount, .highlight .fa, #navCart .highlight em{color:#fff;} .tilesearch{max-width:300px; margin:auto; padding:10px 0;} .tilesearch input[type=text], .tilesearch button{background:#222; border-radius: 0; color:#ccc; border:1px solid #222; width:200px; font-size:15px; line-height:30px; height:44px; padding:0 0 0 10px; margin:0;} .tilesearch button{width:50px; padding:0; cursor:pointer; -webkit-appearance: none;} .tilesearch button:hover{cursor:pointer; background-color:#000;} .homenav{position: relative; z-index: 210;} .homenav, .mininav-container{background: #fff; font-size: 17px; text-align: center;} .homenav ul, .mininav-container ul{margin: 0; padding: 0; display: inline-block;} .homenav li, .mininav-container li{display: inline-block; line-height: 1 ;position: relative;} .homenav li a, .mininav-container li a{text-decoration: none; display: block; line-height: 50px; padding:0px 10px; color:#666; letter-spacing: 0.2em;} .homenav li a:hover{color:#000;} .mininav-container li a:hover{color:#999;} .mininav-container{position:absolute; top:0; left:0; width:100%; background:none; z-index: -1;} .home .mininav-container {opacity: 0;} .mininav-container li a{color:#fff;} .hamburger{position: relative; top:13px;} .hamburger .line{ width: 28px; height: 2px; background-color: #000; display: block; margin: 4px auto; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .hamburger:hover{ cursor: pointer; } /* EIGHT */ .angle #hamburger-8 .line:nth-child(2){ -webkit-transform: translateX(2px) rotate(90deg); -ms-transform: translateX(2px) rotate(90deg); -o-transform: translateX(2px) rotate(90deg); transform: translateX(2px) rotate(90deg); background-color: #fff; } .angle #hamburger-8 .line:nth-child(1){ -webkit-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); } .angle #hamburger-8 .line:nth-child(3){ -webkit-transform: translateY(-6px) rotate(270deg); -ms-transform: translateY(-6px) rotate(270deg); -o-transform: translateY(-6px) rotate(270deg); transform: translateY(-6px) rotate(270deg); } #slidenavcontainer{display:none;} #pageslide { display: none; position: fixed; top: 0; height: 100%; z-index: 110; width:360px; background:rgba(0, 0, 0, 1); border-left:60px solid #fff; padding-top:50px; overflow: auto; -webkit-overflow-scrolling: touch; } .home #pageslide {background:rgba(0, 0, 0, 0.9);} #pageslide .nav-menu{padding:0 30px 150px 30px;} #pageslide ul ul{margin-top:14px; margin-bottom:10px;} #pageslide ul, #pageslide ul li{margin:0; padding:0; display:block; text-align: left; font-size:1.05em; letter-spacing:0.05em;} #pageslide ul li a{line-height: 40px;display: block;text-decoration:none; color: #ddd; margin-top:20px; font-family:'Futura PT W01 Demi';} #pageslide ul ul li a{padding:0; margin:0; font-family:'Futura PT W01 Book'; font-size:0.85em;} #pageslide ul li a:hover{color: #fff;} /* End of Navigation Styles */ .entry-content img, .followoncontent-wider img, .followoncontent img{max-width:100%; height:auto;} .entry-header h2 .share-gallery{display:none; font-size:14px; margin-top:15px;} .entry-header h2 .share-gallery a{text-decoration:none; color:#ddd;} .entry-header h2 .share-gallery .squares{border:1px solid #999; width:15px; height:15px; line-height:0; position:relative; display:inline-block; top:2px; left:5px;} .squares div{background:#999; width:8px; height:8px; line-height:0; position:absolute; bottom:0; left:0;} .range-header .entry-meta, .single-tile .page-header .entry-meta{display:none;} .page-id-7055 .entry-header, .page-id-5081 .entry-header{display:none;} /* layout styles */ /* column container */ .columns{margin:auto;} .page-template-about-template-php .columns{max-width: 1400px;} .colmask { position:relative; /* This fixes the IE7 overflow hidden bug */ clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ } /* common column settings */ .colmid, .colleft { float:left; width:100%; /* width of page */ position:relative; } .col1, .col2, .col3 { float:left; position:relative; padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */ } /* 3 Column settings */ .threecol { background-color:none; /* right column background colour */ } .threecol .colmid { right:25%; /* width of the right column */ background-color:none; /* center column background colour */ } .threecol .colleft { right:50%;/* width of the middle column */ background-position: right top; background-color:none; /* left column background colour */ } .threecol .col1 { width:46%; /* width of center column content (column width minus padding on either side) */ left:104%; /* 100% plus left padding of center column */ } .threecol .col2 { width:21%; /* Width of left column content (column width minus padding on either side) */ left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */ } .threecol .col3 { width:21%; /* Width of right column content (column width minus padding on either side) */ left:85%; /* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */ } .page-id-29 .threecol .colleft {} /* 3 Column settings */ .page-template-page-templatesfull-width-php .threecol { } .page-template-page-templatesfull-width-php .threecol .colmid { right:25%; /* width of the right column */ } .page-template-page-templatesfull-width-php .threecol .colleft { right:50%; /* width of the middle column */ } .page-template-page-templatesfull-width-php .threecol .col1 { /* width of center column content (column width minus padding on either side) */ left:102%; /* 100% plus left padding of center column */ } .page-template-page-templatesfull-width-php .threecol .col2 { width:25%; /* Width of left column content (column width minus padding on either side) */ left:26%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */ } .range-loading { background: url(images/ring-alt.svg), #000; background-repeat: no-repeat, repeat; background-position: center; position: fixed; top:0px; left:0px; z-index: 10000; height: 100%; width: 100%; } .range-intro{max-width: 100%; overflow: hidden; position: relative;} .top-banner{height:480px; width:100%; overflow: hidden; margin-left:auto; margin-right:auto; background-color:#222224; background-size:cover; background-repeat:no-repeat; background-position:center center; opacity: 0;} .top-banner { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation: banner-zoom 11s ease-out; animation: banner-zoom 11s ease-out; } .top-banner:after{content: ""; display: block; position: absolute; top:0; left:0; height:100%; width:100%; background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(top, rrgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 40%); background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 40%); } /* video styles */ @media screen and (min-width: 501px) { .videocontainer{object-position:center center; object-fit:cover; width:100%; height:100%;} .top-banner.hasvideo{background: none; -webkit-transform: scale(1.0, 1.0); transform: scale(1.0, 1.0); -webkit-animation: none; animation: none;} .top-banner.hasvideo:after{content: none;} .single-range .hasvideo .entry-title{background: rgba(0,0,0,0.2);} } /* video styles */ @-webkit-@keyframes banner-zoom { 0% { opacity: 0.75; transform: scale(0.75, 0.75); } 10% { opacity: 1; transform: scale(1, 1); } 100% { opacity: 1; transform: scale(1.1, 1.1); } } @keyframes banner-zoom { 0% { opacity: 0.75; transform: scale(0.75, 0.75); } 10% { opacity: 1; transform: scale(1, 1); } 100% { opacity: 1; transform: scale(1.1, 1.1); } } .single-range .top-banner{position:absolute; z-index: -1;} .entry-header{padding:150px 2% 20px 2%; color: #fff;} .tax-range_classification .entry-header, .page-template-mix-it-filter-page .entry-content{padding-top:100px;} .page-id-7055 .entry-header, .page-id-7055{background: #111;} .tax-range_classification .entry-header h1{display: none;} .entry-header p{font-size:20px; max-width:800px; margin:20px auto 30px auto; font-family:'Futura PT W01 Light';} .entry-header p a{text-decoration: none; border-bottom: 1px solid #ccc;} .entry-header h1{margin:0 auto;} .entry-header h2{font-size:30px; margin-left: auto;margin-right: auto; max-width: 700px;} .col1{text-align:left; padding:50px 0 70px ;} .col2{text-align:right; padding:60px 0 70px; font-size: 0.72em; letter-spacing: 0.1em; font-family:'Futura PT W01 Light';} .col2 aside, .widget-meta-data-filter{margin:0 0 50px auto; max-width:180px; text-align:left; text-transform:uppercase; } .col2 h5, .col2 h3, .col2 h4{color:#999; text-transform:uppercase; text-align:left; padding:0; margin-bottom:10px; font-size:1em; font-family:'Futura PT W01 Demi';} .col2 ul{text-align:left; list-style-type:none; padding:0; margin:10px 0;} .col2 li{text-transform:uppercase; padding:0; margin:0 0 10px 0;} .col2 a{text-decoration:none;} .contrast .col2 a{color:#fff;} /*.forimage .col2{display:none;}*/ ul .selectitem{display:none;} .call-to-action{background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); clear:both; padding:40px 0; color:#ccc;} .page-id-10 .call-to-action, .page-id-903 .call-to-action, .home .call-to-action{display:none;} .call-to-action h3{display:none;} .call-to-action h6{font-size:45px; text-transform: none; letter-spacing: 0.05em; background:url(images/symbol.svg) no-repeat center top; background-size:40px auto; padding-top:80px;} .call-to-action p{font-size:19px; max-width:600px; margin:30px auto 20px;} /* About Us */ .page-id-4{background: white;} #nav_menu-2 .widget-title{display:none;} .page-id-4 .post-4{font-size: 1.7em; font-family:'Futura PT W01 Demi'; color:#000;} .page-id-4 .post-4 strong{font-family:'Futura PT W01 Demi';} .page-id-4 .call-to-action{display:none;} .about-message a.btn{font-family:'Futura PT W01 Demi'; color: #fff; font-size: clamp(0.5rem, 2vw, 1.5rem); padding: 0.5vw 4vw; line-height: 2.5em; background: #222; text-transform: uppercase; letter-spacing: 0.15rem; display: inline-block;} .about-message-01 h2{font-family:'Futura PT W01 Demi'; font-size: 5vw; margin-top:0;} .about-message-02 a{text-decoration:none;border-bottom: 1px dotted #000; color:#000;} .about-message-06 h6 {font-family: 'Futura PT W01 Book';font-size: clamp(1.5rem, 6vw, 4rem); margin:0 auto;} .about-message-text{padding:1em 0; position: relative; -webkit-text-size-adjust: none;} .about-message-02 .about-message-text{padding:2em 0 1em 0;} .about-message-01{text-align: left; font-family:'Futura PT W01 Light'; min-height: 90vh; font-size: 2.5vw; background-image: url(images/about-porcelain-tiles-01.jpg); background-position: right top; background-size: cover; background-repeat: no-repeat;} .about-message-02{background-image: url(images/about-porcelain-tiles-02.jpg); background-position: right bottom; background-size: 50%; background-repeat: no-repeat;} .about-message-03{background-image: url(images/about-porcelain-tiles-03.jpg);} .about-message-04{background-image: url(images/about-porcelain-tiles-04b.jpg), url(images/about-porcelain-tiles-04.jpg); background-position: left top, right center; background-size: auto 100%, 50% auto; background-repeat: no-repeat;} .about-message-05{background-image: url(images/about-porcelain-tiles-05.jpg);} .about-message-02 .about-message-text::after, .about-message-03 .about-message-text::after, .about-message-05 .about-message-text::after{content: ''; display: block; height:2%; width: 100%; background-repeat: no-repeat; background-size: contain; position: absolute; bottom: 0.5em;} .about-message-02 .about-message-text::after{background-image: url(images/about-porcelain-tiles-02c.png); background-position: left;} .about-message-03 .about-message-text::after{background-image: url(images/about-porcelain-tiles-03c.png); background-position: right;} .about-message-05 .about-message-text::after{background-image: url(images/about-porcelain-tiles-05c.png); background-position: right;} .about-message-06{text-align:center; color:#fff; font-size: 0.8em; min-height: 100vh; background-image: url(images/about-porcelain-tiles-06.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: center; } .about-message-02, .about-message-04{color:#000; text-align: left; } .about-message-03,.about-message-05{color:#fff; text-align: right; background-color: #222; background-position: left center; background-size: 50%; background-repeat: no-repeat;} .about-message-01{padding:10% 4em; color:#fff; } .about-message-02, .about-message-03, .about-message-04, .about-message-05{padding:5em 4em; font-size: 1.5vw;} .about-message-04 {padding: 5em 0 5em 5em;} .all-tiles h2 a{text-decoration:none;} .all-tiles{width:100%; margin:auto; position:relative;} .all-tiles ul{margin:0; text-align:center; width:100%; list-style-type:none; padding:0; display: inline-block; position: relative; } .all-tiles ul li{display: block; position:relative; vertical-align: bottom; text-align:center; background-repeat:no-repeat; background-position:center center; background-size:cover; padding:0; white-space:nowrap; overflow: hidden; color:#fff; float:left; margin:1%; box-shadow: 0px 2px 5px rgba(0,0,0,0.2);} .single-client .all-tiles ul li{white-space:normal;} .listcontrols{list-style-type:none; padding:20px 0; display:block; clear:both; text-align:center; margin: 0 auto; max-width: 800px;} .listcontrols li{margin:0 1px; padding:0; display:inline-block; white-space:nowrap; cursor: pointer; display: block; margin-top: 4px; background: rgba(255,255,255,0.25); color: #fff; display: inline-block; padding: 0 20px; text-decoration: none; text-shadow: none; font-size: 15px; line-height:44px; text-align: center; min-width:110px; } .listcontrols li.active{background: rgba(255,255,255,0.1); color: #666;} .listcontrols a{color:#999; display:block; text-decoration:none;} .listcontrols .fa{font-size: 15px; top:2px; position:relative;} .listcontrols .all-term, .signifier{display: none;} .term-stone-effect .allstone{display: inline-block;} .term-marble-effect .allmarble{display: inline-block;} .term-wood-effect .allwood{display: inline-block;} .term-concrete-effect .allconcrete{display: inline-block;} .term-metallic-effect .allmetallic{display: inline-block;} .term-latest .alllatest{display: inline-block;} .page-template-landing-page .theallfilter, .page-template-landing-page .theallfilter .term-all .listcontrols .all-term{display: inline-block;} .onecolumnlayout{max-width:1200px;} .search-results .all-tiles li{display: inline-block;} .boxlink, .outlines div{webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} /* lazy load styles */ img.lazy { opacity: 0; } img:not(.initial) { transition: opacity 1s; } img.initial, img.loaded, img.error { opacity: 1; } img:not([src]) { visibility: hidden; } .all-tiles ul li img{width:100%;} .tile-index ul{position: relative; overflow:hidden; color: #666; background:#f7f7f7; padding:1em;} .label.toplabel, .tile-index h4{} .all-tiles a{color:#fff; text-decoration:none; display: block; width: 100%;} a.boxlink img {vertical-align:bottom;} .mosaic-specials{display: none;} .all-tiles ul .special-piece{overflow: visible;} .all-tiles ul li.special-piece:hover:before{opacity: 0;} .all-tiles ul .special-piece, .all-tiles .quicklook .label, .quicklook .label h3, .quicklookbg{webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;} .mask {display: block; background-repeat: no-repeat; background-position: center; background-size: cover; font-size: 0; } .quicklook .mask{-webkit-box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.75); box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.75);} .maskbg{display: block; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative;} .quicklook{transform: scale(2.25); z-index:200;} .mask em{position: absolute; bottom:10px; right:10px; z-index: 10; font-size:9px;} .no-overlay em{display: none;} .label h3 em{display: none; position: absolute; text-transform:uppercase; font-size: 0.8em;} .quicklook .label h3 em{display: block;} .quicklook .label h3{transform: scale(0.5);} .all-tiles .quicklook .label{background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)); background-size: 100%;} .mosaic-58x58{background-image:url(images/mask/mask-mosaic-55x55.png);} .mosaic-55x55{background-image:url(images/mask/mask-mosaic-55x55.png);} .mosaic-52x52{background-image:url(images/mask/mask-mosaic-50x50.png);} .mosaic-50x50{background-image:url(images/mask/mask-mosaic-50x50.png);} .mosaic-48x48{background-image:url(images/mask/mask-mosaic-48x48.png);} .mosaic-30x30{background-image:url(images/mask/mask-mosaic-30x30.png);} .mosaic-305x305{background-image:url(images/mask/mask-mosaic-30x30.png);} .mosaic-28x28{background-image:url(images/mask/mask-mosaic-28x28.png);} .mosaic-24x24{background-image:url(images/mask/mask-mosaic-24x24.png);} .mosaic-23x48{background-image:url(images/mask/mask-mosaic-23x48.png);} .mosaic-24x48{background-image:url(images/mask/mask-mosaic-24x48.png);} .mosaic-16x16{background-image:url(images/mask/mask-mosaic-16x16.png);} .mask-3D-mosaic{background-image:url(images/mask/mask-3D-mosaic.png);} .mask-3D-design{background-image:url(images/mask/mask-timeless-3D-design.png);} .mask-antica-hydro{background-image:url(images/mask/mask-antica-hydro.png);} .step-tile-01{background-image:url(images/mask/mask-step-tile-01.png);} .skirting-tile-01{background-image:url(images/mask/mask-skirting-tile-01.png);} .mask-chevron{background-image:url(images/mask/mask-chevron.png);} .mask-muretto{background-image:url(images/mask/mask-muretto-01.png);} .mask-stripes{background-image:url(images/mask/mask-stripes-12x150.png);} .mask-brick-muretto{background-image:url(images/mask/mask-brick-muretto.png);} .mask-brick-mosaic{background-image:url(images/mask/mask-brick-mosaic.png);} .cemento-decorato{background-image:url(images/mask/mask-cemento-decorato.png);} .cemento-magazine{background-image:url(images/mask/mask-cemento-magazine.png);} .portland-tratti{background-image:url(images/mask/mask-portland-tratti.png);} .blackandwhite{filter: contrast(1.4) grayscale(90%);} .no-overlay{} .quicklookbg{display: none; position: fixed; z-index:190; top:0; bottom:0; left:0; right:0; background: rgba(0,0,0,0.75);} .quicklooking{display: block;} .edit-link{position:absolute;} .search-results-container{max-width: 1200px; margin:auto;} .search-tiles{margin:0; padding:2%; list-style-type: none;} .search-tiles li{text-align: left; margin:0; padding:0; vertical-align: top;} .search-tiles ul{margin:0; padding:0; list-style-type: none;} .search-tiles > li{display: block; padding:2%; margin-bottom: 2em;} .search-tiles a{text-decoration: none;} .the-result{clear:both;} .the-result li{display: inline-block;} .the-result h3{margin:0;} .the-result p{margin:0;} .result-thumb{width:25%; display: inline-block;} .search-tiles li.result-details{width:70%; padding-left:2%;} .search-tiles ul.result-attributes, .search-tiles ul.results-colours, .search-tiles ul.results-tags{margin:1% auto;} .result-attributes li{display: inline;text-align: left; margin-right:3%; text-transform: uppercase; letter-spacing: 0.05em; font-size: 80%;} .results-colours li{width:9%; margin-right:1%; } .results-colours li.example-no{display: none;} .results-tags li{display: inline-block; margin-right:0.1em;} .results-tags li{color: #999;} .image_count { position: absolute; background: rgba(0,0,0,0.5); padding: 0.5em; font-size: 0.8em; letter-spacing: 0.1em; line-height: 0; } .threebox{background: rgba(0, 0, 0, 1); clear:both; padding:30px 0;} .threebox h3{display:none;} .threebox ul{margin:0 auto; list-style-type:none; padding:0; display: table; width:100%; max-width: 1200px;} .threebox ul li{font-size:14px; letter-spacing: 0.1em; text-transform:uppercase; text-align:center; width:25%; margin:0; padding:30px 0 0 0; color:#fff; display: table-cell; vertical-align: top;} .threebox ul li a{color:#fff; text-decoration:none;} .threebox ul li .fa{display:block; height:40px; font-size:20px; } .paging-navigation{text-align:center;} .paging-navigation h1{display:none;} .paging-navigation .pagination{margin:auto; display:inline-block;} .paging-navigation .page-numbers{ text-decoration:none; line-height:30px; padding:0 10px; display:inline-block; text-align:center; border:1px solid #ccc;} .page-id-335 .entry-header{display:none;} .showcontact{display:none;} .contact-banner{height:0px; width:100%; clear:both;} .mapcontainer{height:600px; width:100%;} .showrooms{ margin:0 auto; list-style-type:none; padding:0; font-size: 90%;} .showrooms li{margin:0 10% 0 0%; padding:0; width: 40%; float:left;} .showrooms li h3{line-height:1; font-size:18px; margin-bottom: -10px;} .showrooms li i{width:20px; text-align:left;} .showrooms li a{text-decoration: none; border-bottom: 1px dashed #fff;} .showrooms li strong{font-family:'Futura PT W01 Demi'; line-height: 40px;} .showrooms span{width:150px; display:inline-block;} .showrooms li{white-space:nowrap;} .showrooms .xmas-opening{width:100%; color: rgb(158, 175, 162);} .tile-selections{ clear:both; padding:0px;} .tile-selections ul{ margin:0 auto; list-style-type:none; padding:0; text-align:center; max-width:1200px; } .tile-selections li{margin:0; padding:0; position:relative; background-repeat:no-repeat; background-position: right top; background-size:auto 225px;} .tile-selections .selection-header{color:#fff; background:#000; width:50%; position:relative; float:left;} .tile-selections li:nth-child(even) .selection-header{float:right;} .tile-selections li:nth-child(even){background-position: left top;} .tile-selections .selection-header p {background:none; margin:0; padding:0;} .tile-selections h3, .tile-selections h4{margin:0; letter-spacing:1px;} .tile-selections h3{padding:40px 0 0 0; line-height:35px; font-size:30px;} .tile-selections h4{font-size:14px; text-transform:uppercase; padding:0 0 30px 0;} .tile-selections p{margin:0; padding:40px 5%; clear:both; line-height:1.4; text-align:center; font-size:18px; } .tile-selections a{position:absolute; bottom:0px; left:0px; width:100%; height:100%; color:#fff; text-align:center; display:block; text-indent:-10000px; border-right: 1px solid transparent; background-color: #fff filter: alpha(opacity=0); } .tile-selections .hr{background:none; max-width:190px;} .tile-selections div.hr span{background:#fff;} .tile-selections li{margin:0 0 30px 0;} .about-porcelain ul{max-width:700px;} .about-porcelain p{padding:10px 20px 0 20px; text-align:left; margin:0px;} .about-porcelain p:last-child{padding-bottom:30px;} .about-porcelain .selection-header{color:#fff; background:none; width:100%; position:relative; float:left; margin:0 auto; padding:0;} .about-porcelain .selection-header .hr{display:none;} .about-porcelain li, .about-porcelain li:nth-child(even), .about-porcelain li:nth-child(odd){background-position:center top; background-size:auto 245px; padding-top:240px} .about-porcelain h3{padding:15px 5px 5px 5px; margin:0; } .tile-selections h3 span{text-indent:-10000px; display:inline-block; width:0px;} .single-project{} .single-project article, .single-project .entry-header, .single-project .entry-header h2, .single-project .entry-header p{} .single-project .entry-header {border-bottom: none;} .single-project .entry-header h1{margin:20px auto 0px auto; cursor:pointer; display:inline-block; line-height:34px; padding:2px 68px; background:url(images/pin-it.png) no-repeat right top;} .single-project .entry-header h2{margin-top:50px;} .single-project .entry-header p{margin-bottom:50px; font-size:20px;} .single-project article {} .single-project .hr{border:none;} .followoncontent{max-width:700px; margin:auto; padding:2%;} .followoncontent p{text-align:left;} .followoncontent-wider{max-width:900px; margin:auto;} .followoncontent-wider p{text-align:left;} .tile-index{padding:0px 10px; min-height: 700px;} .range-accordion > div.tile-index-container{text-align: left; background: #222224; padding:0;} .tile-index a{text-decoration: none; padding:12px; } .tile-index h4{margin:10px 0 0 0; padding:5px 10px; background: #3c3c3e; text-transform: none; background: #323234;} .tile-index ul {padding:0; margin:0; list-style-type: none; background: none;} .the-index li{padding:0; margin:0; background: #3c3c3e; width:100%;} .the-index li:nth-child(even){background:#39393b;} .quickorder{padding:0 0 0 10px; display:block;} .quickorder li{margin:0 2% 0 0; padding:0; display:inline-block; width:auto; background: none;} .quickorder li:first-child{padding-left:20px;} .quickorder li:nth-child(even){background:none;} .quickorder li img{width:50px; vertical-align: middle; margin:10px 0; background-size: 120% 120%; background-position: center center; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);} .quickorder span {color: #666; margin-left:5px;} .spotlight{padding-top:0px; padding-bottom:50px;} .spotlight p{margin:0px auto 25px auto; text-align:justify; text-align-last: center; max-width:800px;} .spotlight ul li{height:250px; margin-bottom:60px; position:relative; overflow:visible;} .spotlight ul{background:#222; padding:30px 0;} .spotlight ul li span{position:absolute; display:block; top:260px; text-transform:uppercase; font-size:12px; color:#999;} .spotlight ul li:hover{ background-size:150% auto;} .spotlight ul li a{line-height:30px; padding-top:220px;} .spotlight ol{margin:0 auto 10px auto; list-style-type:disc; padding:0; text-align:left; max-width:800px;} .spotlight ol li{margin:0 0 7px 20px; padding:0;} .spotlight h2{font-size:40px; margin-top:30px;} .document-wall{margin:4em auto; padding:0 1em; list-style: none; max-width:1200px; font-size: initial;} .document-wall li{padding:0; text-align: left; margin:2% 1%; display: inline-block; width:31%; position: relative;} .document-details{position: absolute; bottom:0; padding: 1em; border-bottom: 6px solid #000; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); width:100%; } .document-wall li span{position: absolute; top:0px; right:0px; background: #000; padding: 0 3px 0 5px; text-transform: uppercase; font-size: 14px; letter-spacing: 0.1em;} .document-wall h2{font-family: 'Futura PT W01 Demi',arial,sans-serif; text-transform: uppercase;font-size: 0.95em; letter-spacing: 0.1em; margin:0;} .document-wall img, .document-wall img.alignnone{margin:0; border: 1px solid rgba(0,0,0,1); width:100%; aspect-ratio: 16 / 9; object-fit: cover;} .document-wall li:hover img, .document-wall li:hover img.alignnone{border: 1px solid rgba(0,0,0,0);} .document-wall li:hover .view-pdf .document-details, .document-wall li:hover .popup-video .document-details{padding-top:2em;} .document-wall p{margin:0; line-height: 20px; font-size: 1em;letter-spacing: 0.02em; height:40px; overflow: hidden;} .document-wall a{position: relative; display: block; z-index: 2; transition: all 5s ease-out; text-decoration: none;} .support-doc .document-details{position: relative; padding: 0.5em 0 1em 0; background: none; border: none; } .document-wall.single-wall p{height:auto; font-size: 1.05em;} .document-wall.single-wall li{margin:2% auto; width:97%; max-width: 600px; display: block;} .document-wall.single-wall .popup-video a:after{background-position: center; background-size:100%;} .popup-video a:after, .view-pdf a:after { background: url(images/video-play-button.png) center bottom no-repeat; background-size:130%; transition: all 0.2s ease-in-out; content: ""; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .view-pdf a:after { background: url(images/pdf-view-button.png) center bottom no-repeat; background-size:130%;} /* support pages */ .support-pages{max-width:1100px; margin:auto; padding:0 2% 5% 2%; text-align:left;} ul.support-partners {margin:0 0 2em 0; padding:0; list-style:none; } ul.support-partners > li {margin:0; padding:0; list-style:none; width:44%; display:inline-block; vertical-align:top;} ul.support-partners > li:first-child{margin-right:10%;} ul.support-partners > li img{max-width:65%;} ul.support-partners .popup-video a:after{content:none;} /* end support pages */ /* Magnific Video Popup CSS */ .mfp-close { position: absolute; top: -50px; right: 0px; font-size: 3em; line-height: 1em; background: none; -webkit-appearance: none; color: #fff; border: none; opacity: 0; -webkit-transition: all 2.5s ease-out; -moz-transition: all 2.5s ease-out; transition: all 2.5s ease-out; width:50px;padding: 0; margin: 0; } .mfp-fade.mfp-wrap.mfp-ready .mfp-close { opacity: 1; -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; opacity: 0;} .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { position: absolute; width: 100%; height: 100%; left: 0; top: 0; text-align: center; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-hide { display: none !important; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 95%; max-width: 1200px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* overlay at start */ .mfp-bg{background: #1e1e1f url(images/tile-range-bg.jpg);} .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } /* overlay animate in */ .mfp-fade.mfp-bg.mfp-ready { opacity: 1; } /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } /* content animate it */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } /* content animate out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } /* End Magnific Popup CSS */ .inside-showrooms{padding-bottom:1px;} .inside-showrooms .theimage{position:relative;} .inside-showrooms .theimage img{width:100%;} .inside-showrooms .thecaption{position:absolute; bottom:7px; width:100%; background:rgba(0, 0, 0, 0.7); border-bottom:1px solid #000;} .inside-showrooms .thecaption h3{text-align:right; padding-right:30px;font-size:30px; color:#fff; text-transform:uppercase; line-height:100px; margin:0;} .inside-showrooms p{margin:20px auto 70px auto; text-transform:uppercase; font-size:13px;} li.tile-finder, li:nth-child(even).tile-finder{background:#f3f3f2 url(images/tile-icon.png) no-repeat 7.5% center; background-size:10.5%; } li.tile-finder .selection-header{width:75%; float:right;} li.tile-finder p{padding:0;} li.tile-finder span{text-decoration:underline;} li.tile-finder h4{max-width:440px; margin:auto;} .col2 li.tile-finder a{border:none;} .widget-meta-data-filter{padding:130px 10px 30px 10px; background:rgba(0, 0, 0, 0.1) url(images/tile-icon.png) no-repeat center 20px;} .widget-meta-data-filter h3{font-size:19px; text-align:center; letter-spacing:1px;} ul.page-list {display:none;} ul.lcp_catlist, ul.page-list { -moz-column-count: 4; -moz-column-gap: 20px; -webkit-column-count: 4; -webkit-column-gap: 20px; column-count: 4; column-gap: 20px; list-style-type:none; margin:30px auto 60px auto; font-size:14px; } ul.lcp_catlist a, ul.page-list a{text-decoration:none;} ul.lcp_catlist li, ul.page-list li{text-align:left; margin-bottom:6px; text-transform:capitalize;} /* range page */ .widest{display: none;} .landingpage .filter, .landingpage .landingpagehide, .landingpageshow, figcaption .landingpageshow, .landingpage .my-specials, .landingpage .my-singles, .landingpage .my-decors, .landingpage .range-colours, .landingpage .photo-gallery{display: none !important;} .landingpage .landingpageshow{display: inline !important;} .single-range.landingpage .entry-title span{font-size:0;} .landingpage-title{margin-bottom:1em; line-height: 1;} .landingpage .splitpageleft, .landingpage .splitpageright{width: 98%; float: none; margin: 0 1% 0 1%; clear: both; padding-bottom:20px;} .landingpage.single-range .single-tiles > li {width: 48%; float: left; margin: 20px 1% 20px 1%;} .landingpage .tile-specification {margin: 0 1%;} .nav-down{ bottom: -41px !important; transition: bottom 0.2s ease-in-out; } .nav-up { bottom: 0px !important; transition: bottom 0.2s ease-in-out; } .range-menu {position: fixed; bottom: -41px; left: 0px; background: #fff; width: 100%; z-index: 2150;} .sharelinks{list-style-type:none; padding:0; display:inline-block; text-align:left; text-transform:uppercase; margin: 0; float: right;} .sharelinks li{margin:0; padding:0; display:inline-block; white-space:nowrap; line-height: 40px} .sharelinks a{letter-spacing:0.1em; font-size:0.7em; display:block; text-decoration:none; padding:0 10px;} .sharelinks .fa{font-size: 15px;} .range-menu h2, .sharelinks .fa,.sharelinks a, .range-attributes a{color:#000; text-decoration:none;} .range-menu h2{line-height:40px; float: left; text-align: left; margin:0 0 0 20px; display: inline-block; text-transform: capitalize; font-size: 33px; letter-spacing: 0.1em;} .single-range .entry-content{min-height:400px; padding:60px 0 60px 0;} .mapbubbledetails{ text-align: left; color:#333; } #map_canvas{ margin-top:50px; width: 100%; height: 480px; opacity: 0; } .page-id-22 .about-slider{opacity:0;} .page-id-22 #map_canvas{opacity:1; z-index:2000;} /* Effect 1: opacity */ .effect-1 li.animate { -webkit-animation: fadeIn 0.65s ease forwards; animation: fadeIn 0.65s ease forwards; } @-webkit-keyframes fadeIn { 0% { } 100% { opacity: 1; } } @keyframes fadeIn { 0% { } 100% { opacity: 1; } } /* Effect 2: Move Up */ .effect-2 li.animate { -webkit-transform: translateY(200px); transform: translateY(200px); -webkit-animation: moveUp 0.65s ease forwards; animation: moveUp 0.65s ease forwards; } @-webkit-keyframes moveUp { 0% { } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes moveUp { 0% { } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /* Effect 3: Scale up */ .effect-3 li.animate { -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: scaleUp 0.65s ease-in-out forwards; animation: scaleUp 0.65s ease-in-out forwards; } @-webkit-keyframes scaleUp { 0% { } 100% { -webkit-transform: scale(1); opacity: 1; } } @keyframes scaleUp { 0% { } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } /* Effect 4: fall perspective */ .effect-4 { -webkit-perspective: 1300px; perspective: 1300px; } .effect-4 li.animate { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg); transform: translateZ(400px) translateY(300px) rotateX(-90deg); -webkit-animation: fallPerspective .8s ease-in-out forwards; animation: fallPerspective .8s ease-in-out forwards; } @-webkit-keyframes fallPerspective { 0% { } 100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } } @keyframes fallPerspective { 0% { } 100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } } /* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */ .effect-5 { -webkit-perspective: 1300px; perspective: 1300px; } .effect-5 li.animate { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50% -300px; transform-origin: 50% 50% -300px; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); -webkit-animation: fly .8s ease-in-out forwards; animation: fly .8s ease-in-out forwards; } @-webkit-keyframes fly { 0% { } 100% { -webkit-transform: rotateX(0deg); opacity: 1; } } @keyframes fly { 0% { } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } } /* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */ .effect-6 { -webkit-perspective: 1300px; perspective: 1300px; } .effect-6 li.animate { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotateX(-80deg); transform: rotateX(-80deg); -webkit-animation: flip .8s ease-in-out forwards; animation: flip .8s ease-in-out forwards; } @-webkit-keyframes flip { 0% { } 100% { -webkit-transform: rotateX(0deg); opacity: 1; } } @keyframes flip { 0% { } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } } /* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */ .effect-7 { -webkit-perspective: 1300px; perspective: 1300px; } .effect-7 li.animate { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-animation: helix .8s ease-in-out forwards; animation: helix .8s ease-in-out forwards; } @-webkit-keyframes helix { 0% { } 100% { -webkit-transform: rotateY(0deg); opacity: 1; } } @keyframes helix { 0% { } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } } /* Effect 8: */ .effect-8 { -webkit-perspective: 1300px; perspective: 1300px; } .effect-8 li.animate { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: scale(0.4); transform: scale(0.4); -webkit-animation: popUp .8s ease-in forwards; animation: popUp .8s ease-in forwards; } @-webkit-keyframes popUp { 0% { } 70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform: scale(1); opacity: 1; } } @keyframes popUp { 0% { } 70% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .grid { display: block; list-style: none; margin: 2vw 1vw; padding: 0; min-height: 300px; width: auto; column-count: 2; column-gap: 2vw; } .grid-item { margin: 0 0 2vw 0; border-radius: 16px; overflow: hidden; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .pswp__img {border-radius: 16px;} /* 3 columns at medium size */ @media ( min-width: 760px ) { .grid {column-count: 3;} } /* 4 columns at large size */ @media ( min-width: 950px ) { .grid {column-count: 4;} } /* 4 columns at large size */ @media ( min-width: 1601px ) { .grid {column-count: 5;} } .grid li img { outline: none; border:none; display: block; max-width: 100%;} .grid-item figcaption a { display: inline-block; background: #eee; line-height: 1em; padding: 0.75em; border-radius: 2px; letter-spacing: 0.15em; text-transform: uppercase; font-size: 12px; } .grid li.appended{display: none;} .grid-item{height: auto; cursor: pointer;} figcaption a, .pswp__caption__center a{text-decoration: none; color: #999; white-space: nowrap; background: #eee; padding: 0.3em 0.7em;} .grid-item figcaption a{display: none;} .single-tiles figcaption {display: none;} .pswp__caption__center em{white-space: nowrap;} .single-range .pswp__caption__center a{display: none;} .single-range.landingpage .pswp__caption__center a{display: inline-block;} .grid-item p{position: absolute; text-align: left; bottom: 0px; color: #FFF; padding: 13px 0px 10px 0px; margin: 0; width: 100%; font-size: 11px; letter-spacing:1px; text-transform: uppercase; overflow: hidden;} .grid-item p span{float: left; margin-left: 10px;} .grid-item p i{display: none; float: right; margin-right: 10px; font-size: 17px;} .grid-item img{width: 100%; height: auto; vertical-align: top; display: block;} .single-range .entry-title{font-size:60px; margin:0; padding:0px; color:#FFF; width:100%; line-height: 440px; position:relative; top:0%; white-space: nowrap; overflow: scroll; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); } .single-range .entry-title em{display:none;} .single-range .entry-title span{font-size:30px; display:block; line-height:350px; position: absolute; top:0px; width:100%;} .range-header h2{font-size:55px;} .range-header h2 em{display:none;} .range-header > p{font-size:1.3em; text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; line-height: 1.5; font-family: 'Futura PT W01 Light', arial,sans-serif; } .range-header p.range-prompts{text-align: center;} .range-header p a{text-decoration: none; border-bottom:1px solid rgba(255,255,255,0.3);} .mobilesize{display:none;} .desktopsize{} .share-edit{position: absolute;} .range-header{padding:5% 2% 2% 2%;} .range-header, .homenav, .page-id-4 .entry-content{-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:fadeInUp;animation-name:fadeInUp} @-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}} @keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}} .fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp} .wrapper{max-width:2500px; margin:auto;} .site-navigation{-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:fadeInDown;animation-name:fadeInDown} @-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}} @keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}} .fadeInDown{-webkit-animation-name:fadeInUp;animation-name:fadeInUp} .range-navigation{display:block; clear:both;} .prevnextlinks{display: inline-block; vertical-align:top; width:23%; margin:20px 1%;} .range-navigation a.discover {display: inline-block;text-decoration: none;white-space: nowrap;padding: 0.5em 1em;background: rgba(0,0,0,0.2); color: #fff;} .range-navigation .post-thumbnail img{width:100%; height:auto;} .prevnextwrapper{position: relative; overflow: hidden; text-align: left; font-size: 0.8em; background-color:rgba(255,255,255,0.1);} .range-navigation:after{content: " "; width:100%; clear:both; display: block;} .next {float:right;} .previous {float:left;} .prevnextwrapper p{margin:0 0 10px 0;} .prevnextwrapper h5{font-size: 14px;margin: 0; letter-spacing: 0.1em;} .prevnextwrapper .post-link{padding:4%; display: block;} .splitpageright{width:49%; float:right; margin-right:1%;} .splitpageleft{width:49%; float:left; margin-left:1%;} .range-attributes{text-align:center; margin:auto; list-style-type:none; padding:0; display:block; background: #fff; width:100%; white-space: nowrap; } .range-colours{text-align:center; margin:auto; list-style-type:none; padding:10px 0 0 0; max-width:1210px; grid-template-columns: repeat(7, minmax(0, 1fr)); display: grid; grid-gap: 0.5vw; width: auto;} .postid-12143 .range-colours{max-width:none;} .range-attributes li{white-space: nowrap; overflow: hidden; text-transform:uppercase; text-align: left; line-height:40px; letter-spacing:0.1em; margin:0; padding:0; display: inline; font-size:0.7em; margin-right:0.7em; padding-right:0.5em; color: #000;} .range-colours li{text-align:center; margin:0; padding:0; opacity:0;} .results-colours li{ max-width: 150px; min-width: 90px; text-align:center; } .range-attributes li:last-child{border-right:none;margin-right:0;} .tilecloseups li{width:20%;} .range-attributes li span{font-family: 'Futura PT W01 Demi';} .range-colours li img{width:100%; height:auto; background-position:center center; background-size:100%; margin:0 auto 0 auto;} .range-colours li:hover img{background-size:150%; } .range-colours li a{color: #fff; text-decoration: none; display: block; cursor: pointer;} .range-colours li em, .results-colours li em{margin:0; overflow:hidden; display: block; white-space: nowrap; text-overflow: ellipsis; text-transform:uppercase; font-size:9px; line-height:15px; letter-spacing:0.2em;} .range-attributes li:hover, .range-colours li:hover{cursor:pointer;} .range-attributes li.cert span{text-indent:-10000px; white-space:nowrap; background-size:cover; background-repeat: no-repeat; background-position:center center; cursor:help;} .range-attributes li.cert-ecolabel span{background-image:url(images/ecolabel-certified.png);} .range-attributes li.cert-leed span{background-image:url(images/leed-certified.png);} .tooltip { display:none; text-transform:none; width:60%; min-width:300px; max-width:600px; position:absolute; left:50%; z-index:5; border-left: 15px solid #000; background-color:rgba(255, 255, 255, 1); text-align:left; padding:20px; color:#333; margin: -50px 0 0 0; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); animation: fadein 0.5s; -moz-animation: fadein 0.5s; /* Firefox */ -webkit-animation: fadein 0.5s; /* Safari and Chrome */ -o-animation: fadein 0.5s; /* Opera */ } .single-range .tooltip p{ text-align: left; } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } } @-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity: 1; } } .tooltip h4{text-transform:uppercase; font-size:18px; line-height:18px; letter-spacing:0.1em;} .tooltip .toolclose{position:absolute; top:10px; right:10px; } .gritter-close { display:block !important; position:absolute; top:5px; right:10px; } .gritter-close, .tooltip .toolclose{ cursor:pointer; width:30px; height:30px; font-size: 30px; color:#000; } .range-accordion .stand-button{margin:0; line-height:40px; text-decoration: none; display:inline-block; padding:0 10px ; background:#222; color:#ccc; color:#fff; text-transform: uppercase; font-size: 13px; letter-spacing: 0.2em;} .checkout{display: inline;} .sharelinks .checkout{display: none;} .sharelinks .share-samples.checkout{display: inline-block;} .sharelinks .share-samples.checkout.cartfull{display: none;} .sharelinks .checkout.cartfull{display: inline-block;} .tile-singles ul, .single-tiles, .tileactions{text-align:left; margin:0; list-style-type:none; padding:0;} .single-tiles > li, .tile-singles > li{text-align:left; background:rgba(255,255,255,0.1); margin:20px 0 0 0; padding:2% 2% 0 2%;} .single-tiles li{margin: 20px 1% 0 0%;} .single-tile .single-tiles > li, .single-tile .tile-finally{margin: 0px auto; background: none; padding:0;} .single-tile .single-tiles{padding:0;} .single-tile-controls{width:49.5%; float:right; text-transform: uppercase;font-size: 0.75em;letter-spacing: 0.1em;} .single-tile-swatch{width:49.5%; margin:0px 1% 0 0; display:block; position: relative; float:left; font-size: 0;} .single-tile .single-tile-swatch{float: none; width: 100%;} .single-tile-swatch:before { content: "\f030"; left: 50%; transform: translate(-50%, -50%); top: 50%; position: absolute; opacity: 1; font-size: 50px; font-family: FontAwesome; color: #000; opacity: 0.25; } /*.surface-polished{position:relative; display: inline-block; font-size: 0;} .surface-polished:after{ content: " "; position: absolute; top: 0px; width:100%; bottom:0px; display: block; background: -moz-linear-gradient(-135deg, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 50%,rgba(0,0,0,0.02) 50.1%,rgba(0,0,0,0.2) 100%); background: -webkit-linear-gradient(-135deg, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 50%,rgba(0,0,0,0.02) 50.1%,rgba(0,0,0,0.2) 100%); background: linear-gradient(-135deg, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 50%,rgba(0,0,0,0.02) 50.1%,rgba(0,0,0,0.2) 100%); } .tile-graphics-div .surface-polished:after{display: none;}*/ .single-tiles{text-align:left; margin:auto; padding-bottom:50px;} .single-tile .single-tiles{max-width: 700px;} .single-tile .section-split-left .single-tiles{max-width: 1000px;} .single-tiles .hr{margin-left:0;} .single-tiles img{width:100%; height:auto;} .tile-singles h3, .single-tiles h3{text-transform:uppercase; color:#fff; margin: 0px; line-height:50px; letter-spacing: 0.1em; font-size:16px; white-space: nowrap; overflow: scroll;} .tile-singles h3 em{display:none;} .tile-singles h3 span, .all-tiles h3 span, .single-tiles h3 span{} .tileactions{position: relative; z-index: 1;} .tileactions li{margin:0 0 1px 0; padding:0px;} .tileactions .fa{width:35px; text-align: center;} .range-prompts a{text-decoration:none; background:#1c1c1c; color:#fff; padding:0px 20px; margin-right:1px; margin-top: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; line-height: 40px; white-space: nowrap; display: inline-block;} .tileactions a{text-decoration:none; line-height:40px; display:block; background:rgba(255,255,255,0.05); color:#fff; padding:0 10px; white-space: nowrap;} .tileactions .order a{background:rgba(255,255,255,0.15);} .range-prompts .share-samples a{background-color:#fff; color:#3c3c3e;} .tileactions a:hover{background:rgba(255,255,255,0.1);} .tileactions span{display:none;} .tile-specification{text-align: left;} .table-scroller{overflow:auto; max-width: 100%; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch;} .outlines{width: 48vw; height: 48vw; display:block; text-align: left; vertical-align: bottom;} .outlines div{background:rgba(0,0,0,0.2); margin:0 1% 1% 0; display:inline-block!important; text-align:center; vertical-align:bottom; -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.2); -moz-box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.2); box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.2);} .outlines div.average-man, .swatch-outlines .outlines div.average-man{position: relative; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow:none; background: none; display: inline} .outlines div.average-man img{width:auto; height: 100%;} .outlines-label {text-transform: uppercase; font-size: 0.7em; text-align:right; margin: 15px 0 0 0; display:inline-block; width:10px; line-height: 1px; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.75); -webkit-transform: rotate(-270deg); -webkit-transform-origin: center top; -moz-transform: rotate(-270deg); -moz-transform-origin: center top; -ms-transform: rotate(-270deg); -ms-transform-origin: center top; -o-transform: rotate(-270deg); -o-transform-origin: center top; transform: rotate(-270deg); transform-origin: center top; } .outlines .boxxundefined{display:none;} .outlines div.box200x1200\.00 p{-webkit-transform: rotate(90deg) skewX(45deg);-moz-transform: rotate(90deg) skewX(45deg);-ms-transform: rotate(90deg) skewX(45deg);-o-transform: rotate(90deg) skewX(45deg);transform: rotate(90deg) skewX(45deg);} .outlines .box200x1200\.00{position: relative; top: 27px; max-height: 267px; -webkit-transform: skewY(45deg); -moz-transform: skewY(45deg);-ms-transform: skewY(45deg);-o-transform: skewY(45deg);transform: skewY(45deg); display: inline !important;} td .hidedecimal{display:none;} .outlines .hidedecimal{color:#323234; display:inline-block; position:relative; z-index:-1;} .outlines .hidedecimal:after{content:"chevron"; color:#fff; position:absolute; top:10px; left:0px; } .outlines-tooltip { display:none; position:absolute; border:1px solid #333; background-color:#161616; border-radius:5px; padding:10px; z-index: 300000; color:#fff; } .zone{margin:0 auto 50px auto; max-width:1200px; padding:0 1%;} .zone .range-accordion{margin:auto;} .range-accordion{text-align: left; margin-top:20px;} .single-tile .range-accordion{margin:auto; } .range-accordion > h3, h3.accordian-style{text-align: left; outline: none; letter-spacing:0.1em; line-height:50px; text-decoration:none; text-transform:uppercase; color:#fff; padding:0 1%; margin:0; cursor:pointer; position:relative; border-top: 1px solid rgba(255,255,255,0.2); font-size:0.9em;} h3.ui-state-default:after{content:"\f0d7"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; /*--adjust as necessary--*/ color: #fff; font-size: 18px; line-height:50px; padding-right: 10px; position: absolute; top: 0px; right: 0;} h3.ui-state-active:after{content: "\f0d8";} h3.ui-state-active{} h3.accordian-style{ margin-top: -10px;} .range-accordion > h3.ui-accordion-header-active{cursor:default;} .range-accordion > div{ margin:0 auto 0 auto; padding:1%; color:#fff;} .splitpageright .range-accordion > div{ } .range-accordion h2, .range-accordion h4{text-align: center; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; border-bottom:1px solid rgba(255,255,255,0.5); padding: 4px 0;} .range-accordion table{width:100%; text-align: left; overflow:scroll; text-transform:capitalize; margin-top:15px; margin-bottom:25px; border-spacing: 0px; letter-spacing: 0.03em;} .range-accordion table th, .range-accordion table thead td{font-weight:normal; font-size: 16px; padding-right:40px; text-align:left; max-width: 300px;} .range-accordion table th, .range-accordion table thead td, .range-accordion table tr > td:first-child, .range-accordion table tr > td:nth-child(2){white-space:nowrap;} .range-accordion table td{width:30%; padding:7px 9px 7px 2px; font-size:12px; -webkit-text-size-adjust: none; min-width: 130px;} .range-accordion table tr:nth-child(even) td{background:rgba(255,255,255,0.05); } .range-accordion table tr:hover td{background:rgba(0,0,0,0.15); } .range-accordion table tr:hover:nth-child(even) td{background:rgba(0,0,0,0.15); } .range-accordion table.ptv-test, .range-accordion table.ptv-test th, .range-accordion table.ptv-test td, .range-accordion table.ramp-test, .range-accordion table.ramp-test td{width:auto; } .range-accordion table.ptv{width:auto; border-collapse:collapse;} .range-accordion table.ptv th, .range-accordion table.ptv td, .tooltip table.ptv td, .tooltip table.ptv th{text-align: center; border:1px solid #999; padding: 7px 2px; width:auto;} .range-accordion table.ptv tr td , .tooltip table.ptv tr td{background: rgba(255,255,255,0.05); min-width: 130px;} .ptv-test .ptv-moderate .ptv-result-pot:after {content: "Moderate"} .ptv-test .ptv-low .ptv-result-pot:after {content: "Low"} .ptv-test .ptv-high .ptv-result-pot:after {content: "High"} .ramp-test .ramp-r9 .ramp-result-pot:after {content: "Minimal"} .ramp-test .ramp-r10 .ramp-result-pot:after {content: "Normal"} .ramp-test .ramp-r11 .ramp-result-pot:after {content: "Good"} .ramp-test .ramp-r12 .ramp-result-pot:after {content: "Good"} .ramp-test .ramp-r13 .ramp-result-pot:after {content: "Very High"} .ptv-result{font-weight:bold;} .pt-ptv, .ramptest, .variationspt{padding-bottom:50px;} .tooltip figcaption, .variationspt figcaption{display: none;} .thevariancerating{text-transform: capitalize;} .variationsgrid{text-align: left; padding-top: 1em; max-width: 500px;} .variationsgrid img{width:90%; margin: auto;} .flex-no-wrap{display: flex!important; flex-wrap: nowrap!important;} .single-tile .range-accordion .glance-sizes-div table tbody tr td{color:#777} .single-tile .range-accordion .glance-sizes-div table tbody tr.showme td{color:#fff;} .single-tile .range-accordion .glance-sizes-div-with-decors table tbody tr.hideme td{color:#fff;} .tilecloseups{margin:auto; text-align:left; list-style-type:none; padding:0; display: flex; flex-wrap: wrap; row-gap: 0.5em;justify-content: center;} .tilecloseups li{margin:0; position:relative;} .gallery-div .tilecloseups li, .single-client .tilecloseups li{max-width:none;} .tile-graphics-div .tilecloseups li{padding:0.5% 0.5px;} .tilecloseups li img{width:100%; max-width:100%; height:auto; cursor:zoom-in;} .loop1.tilecloseups li img{width:auto;} .single-tile .tilecloseups li img{cursor:pointer;} .single-range .single-bookmatched{display:none;} .single-range.landingpage .single-bookmatched{display:block;} .single-bookmatched .tileactions .order, .single-bookmatched .tileactions .favorite{display:none;} .photoid{display:none; text-transform: uppercase; text-align: right;} .logged-in .photoid{display:inline-block;} .logged-in.role-webclient .photoid{display:none;} .tile-finally{background:rgba(255,255,255,0.1); margin:20px 0; padding:0 20px 20px 20px; color:#fff; text-align: left;} .tile-finally > h3{margin:0px; line-height:50px; white-space: nowrap; font-size:16px; text-transform: uppercase;} .downloads {margin:30px 0; padding:0; list-style-type: none;} .downloads li{margin:0 0 30px 0; padding:0;} .downloads a{text-decoration: none; color:#fff;} a.brochure-link{cursor: pointer; height: 100%; display: block; text-align: center; background:rgba(0, 0, 0, 0.21); -moz-text-shadow: 0px 0px 30px rgba(0, 0, 0, 1); -webkit-text-shadow: 0px 0px 30px rgba(0, 0, 0, 1); text-shadow: 0px 0px 30px rgba(0, 0, 0, 1); padding:107px 10% 110px 10%; letter-spacing: 2px; font-size:13px; color:#fff; text-transform:uppercase; text-decoration:none;} .brochure-wrapper {display: flex; justify-content: center; flex-wrap: wrap;} .brochure-shadow{position:relative; height: auto; width:230px; margin:20px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); background-repeat: no-repeat; background-position: center center; background-size: auto 100%;} .single-tile .brochure-shadow { float: none; display: block; //margin: auto; } .brochure-shadow img, .brochure-logo{ position: absolute; bottom: 20px; width: 100%; height: auto; background:url(images/porcelain-tiles-logo.svg) no-repeat center center; background-size:100% auto; } a.brochure-link span{font-size:12px; letter-spacing:1px; display:block; position:absolute; bottom:20px;} .brochure-link .fa{font-size: 30px; margin:-40px auto 20px auto;} /* product feature page style */ .page-template-product-feature, .page-template-landing-page, .tax-group_classification{background:#fff;} .tax-group_classification .call-to-action, .page-template-product-feature .call-to-action, .page-template-landing-page .call-to-action {background: #fff; padding: 0 0 40px 0; color: #000;} .page-template-product-feature .call-to-action h6, .page-template-landing-page .call-to-action h6{padding-top:0;} .page-template-product-feature .top-banner{width:72%; margin-left:0; background-position: left center; -webkit-transform-origin: left bottom; transform-origin: left bottom;} .page-template-product-feature .entry-header {padding: 4em; position: absolute; z-index: 2; right: 5%; background: #000; text-align: left; width: 50%; max-width: 900px;} /* Fabrication Styles */ .wireframe-container h1:after {background: url(images/symbol-black.svg);} .page-id-12986 .entry-title, .wireframe-container h1{font-size: 29px; margin-left: 0em;} .fabrication-layout{margin:4em auto 0 auto; padding:0; list-style:none;} .fabrication-layout li{margin:0; padding:0 0 2em 0; list-style:none;} .fabrication-layout ul{margin:0 auto; padding:0; list-style:none; display: block; max-width:1450px;} .fabrication-layout li li{margin:auto; padding:0; list-style:none;display: block; width:100%;} .fabrication-layout figcaption{display:none;} .fabrication-layout li li img{width:100%; height: auto;} .fabrication-type li ul{width:60%; margin:auto;} .fabrication-type{position: relative;} .fabrication-type-header{position: absolute; height: 0px;} .fabrication-type-header h1{margin-top:0; line-height:1; font-size:2em;} .fabrication-type-header a, .page-template-product-feature .entry-header .feature-link, .box-container .wireframe-link, .box-container .conversation-link{display: inline-block; color: #fff; background: #000; line-height:40px; padding:0 20px; text-decoration:none; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'Futura PT W01 Book';} .box-container a{text-decoration: none;} .page-template-product-feature .entry-header .feature-link, .box-container .wireframe-link, .box-container .conversation-link{background: #fff; color: #000;} .fabrication-type li:nth-child(1) ul{margin: 0 auto -50px 0} .fabrication-layout li:nth-child(odd) .fabrication-type li.fabrication-type-header ul{transform: translate(55%,-100%);margin-top: 120px;} .fabrication-layout li:nth-child(even) .fabrication-type li.fabrication-type-header ul{transform: translate(-55%,0%); margin-top: -80px;} .fabrication-type li.fabrication-type-header ul{width: 45%;} .fabrication-type li.fabrication-type-header ul li{padding:2em; background:#fff; color: #000; text-align: left;} .fabrication-type li:nth-child(3) ul{margin: -50px 0 0 auto} .page-template-fabrication, .tax-group_classification, .page-template-mix-it-fabrication, .tax-bespoke_classification, .single-design, .single-creation{background: #fff; color: #111; padding-top:50px;} .page-template-fabrication .site-navigation, .tax-group_classification .site-navigation, .page-template-mix-it-fabrication .site-navigation, .tax-bespoke_classification .site-navigation, .single-design .site-navigation, .single-creation .site-navigation{position: absolute;} .page-template-fabrication .site-navigation .nav-background, .tax-group_classification .site-navigation .nav-background, .page-template-mix-it-fabrication .site-navigation .nav-background, .tax-bespoke_classification .site-navigation .nav-background, .single-design .site-navigation .nav-background, .single-creation .site-navigation .nav-background {display: block;} .tm-description{display:none;} .page-template-fabrication .tm-description, .tax-group_classification .tm-description, .single-creation .tm-description, .single-design .tm-description{display: inline;} .page-template-fabrication .call-to-action, .page-template-tm-single-colour .call-to-action, .single-design .call-to-action, .tax-group_classification .call-to-action{display: none;} .tailor-made-container{text-align:left; margin: auto 4vw;color: #111;} .menu-tailormadenav-container .tm-menu-logo {display: inline-block;overflow: hidden;} img.tailor-made-logo{max-width:730px; margin: 6vw auto 0 auto; width: 80%;} .ptbodyclass img.tailor-made-logo {margin: 7vw auto 5.5vw auto; display:none;} .pp-logo-container{text-align:center; padding: 0 1vw 4vw 1vw;} .tailor-made-container .pp-logo-container h2{font-size: 0.7em; margin-top: 0;} .pp-logo{margin:auto; padding: 0 1em 1em; max-width:340px; width: 60%;} .pp-logo img{width:90%; margin:auto;} .page-template-mix-it-fabrication .pswp__top-bar, .page-template-fabrication .pswp__top-bar, .single-design .pswp__top-bar, .single-creation .pswp__top-bar, .tax-group_classification .pswp__top-bar {background-image: url(images/porcelain-tiles-logo-black.svg);background-size: 240px;} .tm-grad {background: linear-gradient(35deg, rgb(149 151 134) 0%,rgb(225 216 192) 25%,rgb(149 140 120) 45%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .menu-tailormadenav-container{display: block; text-align:center; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); background-color: rgba(255,255,255,0.72); position: relative; z-index:100; line-height: 0;} .sticky { position: fixed; top: 0px; width: 100%; } .controls-container.float { bottom:-200px;} .sticky + article, .sticky + div, .sticky + header {padding-top: 50px;} .tm-section, .tm-benefits-list, .tm-followon-list { max-width: 1480px;} .tm-section{ margin-left: auto; margin-right: auto; padding:0; padding-left: 4vw; padding-right: 4vw;} .tm-section.full-width{max-width:none; padding-left:0; padding-right:0; margin-left: -4vw; margin-right: -4vw;} .slimmer{max-width:1100px;} .padded-top{padding-top:4vw;} .padded-bottom{padding-bottom:4vw;} .padded{padding-top:4vw; padding-bottom:4vw;} .centered{text-align:center;} .centered .tm-benefits-list{margin:0px auto;} .centered p{margin-left:auto; margin-right:auto;} .tm-highlight-box{background:rgb(247,247,247);} header.tm-highlight-box{text-align: center;} .disclaimer{font-size:0.8em; color:#999} .section-fifty-fifty, .section-quarters{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; align-items: center; } .block {display: block;} .section-fifty-fifty .block:first-child {margin-right: 20px;} .section-fifty-fifty .block:last-child {margin-left: 20px;} .section-fifty-fifty .block {width: 50%;} .section-quarters .block {width: 24%; margin:0.5%} .section-gallery ul {display: flex; flex-wrap:wrap; margin: 0; padding: 0; list-style: none; } .section-gallery li{width: 24%; margin:0.5% 0.5% 0 0.5%; padding:0;} .section-gallery ul li:first-child, .section-gallery ul li:nth-child(5), .section-gallery ul li:nth-child(11){width: 49%;} .section-gallery li img {object-fit: cover;width:100%; height:20vw; display: block;} img.featured-img {display: block; object-fit: cover;width:100%;height:50vw;} img.featured-img {display: block; width:100%;} .section-fifty-fifty .block-img img {object-fit: cover;width:100%;height:50vw; display: block;} .block-text {display: block; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .block-text p{max-width: 500px !important; margin-left: auto; margin-right: auto;} .tailor-made-container h2, .tm-call-to-action h2{font-size:0.95em; text-transform:uppercase; letter-spacing: 0.2em; font-family:'Futura PT W01 Demi'} h3.tm-tagline{font-size:2.5em; text-transform:uppercase; letter-spacing: 0.2em; font-family:'Futura PT W01 Light'; width: 90%; margin: 0.5em auto; line-height: 1em;} .tm-section p, .tm-terms-list {max-width:890px;} p.oversize{font-size:1.85em; font-family:'Futura PT W01 Demi'; line-height:1.25em; } p.oversize a{text-decoration:none; border-bottom: 2px solid #999;} p.midsize{font-size:1.25em; font-family:'Futura PT W01 Demi'; line-height:1.35em;} .coloured-text{color: #999;} span.highlight {color: #111;} .call-to-action-link a {text-decoration: none;color: #968762;} .morelink {text-decoration: none;color: #968762; white-space: nowrap;} .morelink .fa-external-link {font-size: 60%; vertical-align: super;} .tm-terms-list{text-align: left; margin-bottom:2em;} .tm-terms-list li{margin-bottom:1em;} .tailor-made-container a {color: #aaa;} .tm-section hr{background: none; border: none; height: 1px; border-top: 1px solid #aaa; margin:4vw 20%;} /*.tailor-made{text-transform:uppercase; letter-spacing: 0.2em; font-size: 80%; line-height:100%; font-family:'Futura PT W01 Heavy'; margin-left: 0.3em; white-space: nowrap;} .tailor-made sup {font-size:100%; line-height:100%; font-family:'Futura PT W01 Book';} */ /* now imagine updates */ #menu-item-17189, #menu-item-17914, #menu-item-18398, section.tm-call-to-action, .tm-warranty-badge{display:none;} .tailor-made::after { content: "Now Imagine"; text-transform: uppercase; font-size: initial; letter-spacing: 0.2em; margin-left: 0.2em; font-family: 'Futura PT W01 Heavy'; white-space: nowrap;} .tailor-made sup {display: none;} .tailor-made {font-size: 0; line-height: 100%; letter-spacing: 0.2em;} .tm-section .range-accordion {margin: 0px auto; max-width: 550px;} .tm-section .range-accordion > h3 { font-family:'Futura PT W01 Demi'; letter-spacing: 0; text-transform: none; color: #111; font-size:1.2em; padding: 4% 0; border-top: 1px solid rgb(247,247,247);} .tm-section .range-accordion > div {padding: 0%;color: #111;} .tm-benefits-list li {width:25%; padding: 0 1%; text-align:center;} .tm-benefits-list h3, .tm-followon-list h3{margin:0 auto; line-height: 1; white-space: nowrap; text-transform: uppercase; font-size: 1vw; letter-spacing: 0.2em;} .tm-benefits-list img, .tm-followon-list img{margin:0 auto; max-width:50%;} .tm-followon-list a{text-decoration: none; color:#222;} img.tm-warranty-badge{max-width: 250px;} .page-template-mix-it-fabrication .range-grid, .page-template-fabrication .range-grid {display: none;} .tm-order{position: absolute; top: 1vw; right: 1vw;} .tm-order a{color:#fff; padding: 0 1em; line-height:2.5em; background: #968762; text-transform:uppercase; font-size: 0.65em; letter-spacing: 0.15em;} .page-template-mix-it-fabrication .bookmatched .tm-order{display:none;} .with-banner-cta{position:relative; line-height:0;background:black;height: calc(100vh - 50px);} .with-banner-cta-half{position:relative; line-height:0; padding-left: 0; padding-right: 0;} .with-banner-cta-half img {width: 100%; min-height: 50vh; object-fit: cover;} .with-banner-cta-first{height: calc(100vh - 120px);} .with-banner-cta{} .backstretch-target{height:100%; width:100%} .banner-cta {position: absolute;bottom: 0;padding: 1em 0 2em 0;text-align: center;width: 100%;text-align: center;background: rgb(0,0,0);background: linear-gradient(0deg, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0) 100%);} a.banner-cta-logo {padding-top: 20px; display: block;} a.banner-cta-logo img {max-width: 400px; width: 60%;}.with-banner-cta p {max-width: none; color: white; margin: 0 3em; line-height: 1.2em;} .banner-cta .tm-btn{background: rgba(0,0,0,0.4);color: #c7b68c !important; border: 2px solid #c7b68c !important; border-radius: 53px; font-family: 'Futura PT W01 Heavy';} .product-banners,.parallax-columns{position: relative; display: flex; padding:0; margin:0; list-style:none; flex-wrap: nowrap; line-height: 0; width:100%; align-items: center; justify-content: center;} .product-banners .product-banner,.parallax-columns .parallax-column{position: relative; text-align:center;} .product-banner-01, .product-banner-03{width:50%} .product-banner-02{width:30%; position: absolute;z-index: 2; margin-left: -100px; margin-right: -100px; min-width:300px;} .product-banner-cta{padding:10%; } .product-banner-cta img{width:80%} .product-banner .button-container:before, .product-banner .button-container:after,.parallax-columns h2:before {content: '';border-left: 2px solid #999;display: block;width: 1px;height: 40px;position: relative; left: 50%;} .parallax-columns{ gap: 2%; align-items: start;} .parallax-columns .parallax-column{width: 100%;} .parallax-column img {width: 100%; margin-top:5%;} .parallax-columns h2{margin-top: 15px; line-height: 1.5em; display:inline-block; color:#999;} .parallax-columns h2:before {top: -15px;} a.tm-round-btn{ background: rgba(255,255,255,1); color: #999; border: 2px solid #999; border-radius: 53px; font-family: 'Futura PT W01 Heavy'; text-align: center; padding: 0 3em; margin: 0 auto; display: inline-block; text-decoration: none; line-height: 56px; text-transform: uppercase; font-size: 0.7em; letter-spacing: 0.1em;} a.tm-round-btn:hover{color:#999; background: rgba(0,0,0,0.05); border-color: #999;} .grout-container{display: flex; flex-wrap: wrap;} .grout-swatch{width: 25%; padding: 0.5vw;} .grout-swatch-bg{height: 4vw; border-top: 1px solid rgba(0,0,0,0);} .page-template-mix-it-fabrication .tm-section h1{display: none;} .page-template-mix-it-fabrication .all-tiles .label p, .tax-bespoke_classification .all-tiles .label p{text-overflow: ellipsis; max-width: 100%; overflow: hidden;} .tm-call-to-action{border-top: 4vw solid transparent;} .ptbodyclass .tm-onlycontent{display:none;} .tmbodyclass .pt-onlycontent{display:none;} .tmbodyclass .hamburger .line {background-color: #968762;} .tmbodyclass #pageslide {background: #222; border-left: 60px solid #222;} .specification-table, .bespoke-panel table{border:none; max-width:1000px; width:100%; padding:0; margin:0 auto; border-collapse: collapse;} .specification-table thead th{text-transform:uppercase; letter-spacing: 0.2em; font-family:'Futura PT W01 Demi'; color:#aaa; text-align:left; border-bottom: 1px solid #ccc;} .specification-table .row1 td{text-align:center;} .specification-table th{font-family:'Futura PT W01 Demi'; text-align:right; width:25%; font-weight: 100;} .specification-table th span{display: block; font-family:'Futura PT W01 Light'} .specification-table tr, .specification-table th, .specification-table td{vertical-align:top;} .specification-table td, .specification-table th, .bespoke-panel table td, .bespoke-panel table th{padding:1vw 1vw 2vw 1vw;} .specification-table thead th{padding:2vw 1vw 1vw 0vw;} .specification-table td, .bespoke-panel td{border-top:1px solid #ccc; text-align:left; } .specification-table .span-row td{border-top:1px solid #ccc;} .specification-table .span-row td{border-left:1px solid #ccc;} .specification-table .span-row td:nth-child(2){border-left:none;} .specification-table .row-spacer td{height:2vw; border-top:1px solid #fff;} .specification-table img{width: 20vw; max-width:100%; height:auto;} .specification-table i.fa {color: #aaa;} .pricing-table td,.pricing-table th{padding: 0.5vw 1vw 0.5vw 1vw;} .pricing-table tr:hover td{background:rgb(234, 232, 223);} .page-template-fabrication .sample-orders-list ul {display: flex;} .page-template-fabrication .sample-orders-list li {width: auto; float:none; min-width:90px; max-width: 130px;} .page-template-fabrication .sample-orders-list li a{color:#111;pointer-events: none; cursor: default;} .page-template-fabrication .sample-orders-list li h5{white-space: normal;margin: 0.5em 0; height:auto;} /* tabs */ ul.tab-contents-list { list-style-type: none; padding: 0; margin: 0px; display: flex; overflow: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } ul.tab-contents-list li { min-width:23%; padding: 0; text-align: left; display: inline-block; flex-wrap:wrap; margin: 0 1% 0 0; } ul.products-list, ul.tm-benefits-list, ul.tm-followon-list {list-style-type: none; padding: 0; margin: 0px; display: flex; flex-wrap:wrap;} ul.products-list li,ul.tm-followon-list li{width:24.25%; padding: 0; overflow:hidden; display: block; margin: 0 1% 1% 0; background: rgb(247,247,247);} ul.tm-followon-list li {padding: 2% 1% 1% 1%; margin: 1.5% 1% 1.5% 0; text-align:center;} ul.products-list li:nth-child(4n),.tm-followon-list li:nth-child(4n) {margin-right: 0;} ul.tm-followon-list.thirdslist li{width:32.66%;} .tm-followon-list.thirdslist li:nth-child(4n) {margin-right: 1%;} .tm-followon-list.thirdslist li:nth-child(3n) {margin-right: 0;} ul.products-list.fifthslist li{width:19%;} .products-list.fifthslist li:nth-child(4n) {margin-right: 1%;} .products-list.fifthslist li:nth-child(5n) {margin-right: 0;} .omni-calculator-header {padding-top: 0 !important; background: none !important; color: #111;} .omni-calculator {background: none !important;border: none !important;} .omni-calculator-footer {height: 0px !important;overflow: hidden;} ul.products-list li a{text-decoration: none;} .tm-clients li img{ max-width: 80px; border-radius: 50%; background-color: #222; position: absolute; bottom: -25px; left: 50%; transform: translate(-50%, 10px);} .tm-clients h3 { font-family: 'Futura PT W01 Demi',arial,sans-serif; white-space: normal;} .tm-clients h3:after { border-bottom: 2px solid #222; display: block; width: 40%; height: 15px; content: " "; margin: auto auto -10px; } .tm-clients p{margin: 0 auto; font-size:1vw; line-height:1.3;} .tm-clients a { color: #222; background:#fff; display:block; padding: 2% 5%; border-bottom: 20px solid #fff; } ul.tm-clients li{ padding: 12% 5%; position:relative; overflow: visible; background-blend-mode: normal, saturation, normal;} .tm-clients li:nth-child(1){background: radial-gradient(circle, transparent 40%, black 95%), linear-gradient(to right, grey, grey), url(https://www.porcelain-tiles.co.uk/wp-content/uploads/majestic-gold-calacatta-cut-to-shape.jpg);background-position: right center;} .tm-clients li:nth-child(2){background: radial-gradient(circle, transparent 40%, black 95%), linear-gradient(to right, grey, grey), url(https://www.porcelain-tiles.co.uk/wp-content/uploads/Grandi-Marmi-Sahara-Black-4-533x800.jpg);background-position: right center;} .tm-clients li:nth-child(3){background: radial-gradient(circle, transparent 40%, black 95%), linear-gradient(to right, grey, grey), url(https://www.porcelain-tiles.co.uk/wp-content/uploads/grandi-marmi-calacatta-covelano-cut-to-shape-001.jpg);background-position: right center;} .tm-clients li{background-size: cover !important;} .tm-edge-swatches li{background: rgb(247,247,247);} ul.tab-contents-list li img{display: block;} .tm-colour-swatches li img {object-fit: cover; width:100%; height:35vw;} .label, .tm-section div.wp-caption .wp-caption-text {-webkit-text-size-adjust: 100%; font-size:0.6em; letter-spacing: 0.2em; text-transform: uppercase; color: #111; padding: 1em; margin:auto; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;} p.wp-caption-text a:after { content: "\f0c1 "; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; margin-left: 0.5em; } p.wp-caption-text a { color: #111; text-decoration: none; } .label h3{font-family:'Futura PT W01 Demi';font-size:1.2em; letter-spacing: 0.1em;} figcaption { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.6em; text-align: center; line-height: 1.5em; margin-top: 0em; padding: 1vw; overflow: hidden; text-overflow: ellipsis; color: #111; background: #f7f7f7; -webkit-text-size-adjust: 100%;} .tailor-made-container figcaption, div.wp-caption .wp-caption-text {background: rgb(247,247,247); white-space: nowrap; max-width:none;} .all-tiles .label{color: #111; background:#f7f7f7;} .tailor-made-container .all-tiles .label{background:none;} figcaption.closeup-caption, .tilecloseups figcaption{color:#fff; margin: 1px 0 0 0; background:none; white-space: nowrap; padding:0; letter-spacing: 0.1em;} .tilecloseups figcaption.closeup-caption {font-size: clamp(0.3em, 0.5em, 0.7em);} @media(max-width: 1200px) {.tile-figcap-title { display: none; }} .single-client .tilecloseups figcaption a, .single-client .tilecloseups .photoid{display:none;} .all-singles .label h3{min-height:38px;} .tailor-made-container .grid li {box-shadow:none;} .tabs .slider, .tabs > ul > li {width: 24%;} /* tabs contents */ .tabs { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: relative; width: 100%; min-height: 250px; min-width: 240px; } .tabs input[name="tab-control"] { display: none; } .tabs .content section h2, .tabs ul li label {font-size:0.95em; text-transform:uppercase; letter-spacing: 0.2em; font-family:'Futura PT W01 Demi';} .tabs > ul { list-style-type: none; padding: 0; margin-bottom: 0px; border-bottom: 4px solid rgb(247,247,247); } .tabs > ul > li { box-sizing: border-box; padding: 0px; text-align: left; display: inline-block; vertical-align:top; } .tabs ul li label { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color: #968f7f; padding: 20px; overflow: hidden; text-overflow: ellipsis; display: block; cursor: pointer; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; white-space: nowrap; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tabs ul li label br { display: none; } .tabs ul li label svg { fill: #968f7f; height: 1.2em; vertical-align: bottom; margin-right: 0.2em; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active { outline: 0; color: #bec5cf; } .tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg { fill: #bec5cf; } .tabs .slider { position: relative; top:-4px; -webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07); transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07); } .tabs .slider .indicator { position: relative; width: 200px; max-width: 100%; /* margin: 0 auto; */ height: 4px; background: #111; border-radius: 1px; } .tabs .content { margin-top: 30px; } .tabs .content section { display: none; -webkit-animation-name: content; animation-name: content; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; line-height: 1.4; } .tabs .content section h2 { color: #111; display: none; } .tabs .content section h2::after { content: ""; position: relative; display: block; height: 4px; background: #111; margin-top: 5px; left: 1px; } .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label { cursor: default; color: #111; } .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider { -webkit-transform: translateX(0%); transform: translateX(0%); } .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) { display: block; } .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label { cursor: default; color: #111; } .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider { -webkit-transform: translateX(100%); transform: translateX(100%); } .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) { display: block; } .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label { cursor: default; color: #111; } .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider { -webkit-transform: translateX(200%); transform: translateX(200%); } .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) { display: block; } .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label { cursor: default; color: #111; } .tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider { -webkit-transform: translateX(300%); transform: translateX(300%); } .tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) { display: block; } @-webkit-keyframes content { from { opacity: 0; -webkit-transform: translateY(5%); transform: translateY(5%); } to { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes content { from { opacity: 0; -webkit-transform: translateY(5%); transform: translateY(5%); } to { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } /* end tabs */ /* tm Menu */ .menu-tailormadenav-container ul { margin: 0 auto; padding: 0; display: inline-block; list-style-type:none; overflow: hidden; } .menu-tailormadenav-container li { display: inline-block; position: relative; } .menu-tailormadenav-container li a, .tm-menu-logo{ text-decoration: none; display: block; line-height: 70px; padding: 0 10px; color: #111; letter-spacing: 0.1em; transition: all 0.5s ease-in-out; } .menu-tailormadenav-container.sticky li a, .sticky .tm-menu-logo{line-height:50px;} .menu-tailormadenav-container li.current-menu-item a, .tm-menu-logo, .menu-tailormadenav-container li.current-page-ancestor a{font-family: 'Futura PT W01 Demi', arial,sans-serif;} /* menu */ .menu-tailormadenav-container .menu { max-height: auto; transition: max-height .5s ease-out; display: inline-block; } /* menu icon */ .menu-tailormadenav-container .menu-icon { cursor: pointer; display:none; float: right; padding: 24px 20px; position: absolute; user-select: none; } .menu-tailormadenav-container .menu-icon .navicon { display: block; height: 2px; position: relative; transition: background .5s ease-out; width: 11px; } .menu-tailormadenav-container .menu-icon .navicon:before, .menu-tailormadenav-container .menu-icon .navicon:after { background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; top:0; } .menu-tailormadenav-container .menu-icon .navicon:before {transform: rotate(35deg);top:0px; left:-2px;} .menu-tailormadenav-container .menu-icon .navicon:after {transform: rotate(-35deg);top:0px; left:6px;} /* menu btn */ .menu-tailormadenav-container .menu-btn { display: none; } .menu-tailormadenav-container .menu-btn:checked ~ .menu { max-height: 500px; display: block; padding-bottom: 20px; } .menu-tailormadenav-container .menu-btn:checked ~ .menu-icon .navicon { background: transparent; } .menu-tailormadenav-container .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-35deg); } .menu-tailormadenav-container .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(35deg); } .menu-tailormadenav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .menu-tailormadenav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0; } /* Now Imagine Styles */ .nicwordmark {font-family: 'Futura PT W01 Heavy';text-transform: uppercase; font-size: 80%;letter-spacing: 0.1em; white-space: nowrap;} .niccontent{text-align:center;} .niccontent p {font-size: 25px;max-width: 850px;margin: 1em auto;} .niccontent .tm-btn {border: none !important; background:rgba(255,255,255,0.1)!important; width: 200px; color: #fff !important;} .niclogo{ margin:auto; width:30%; } .niclogo img{width:100%; max-width:150px;} .nicbanner{margin:1em auto 4em auto; position:relative; padding-top: 170px; max-width:200px;} .nicimage{ position:relative; border:3px solid #fff; background-image:url(/wp-content/uploads/Cosmic-black-f01-300x300.jpg); background-position: center; background-size: cover; width:220px; height:220px; margin-left: 62px;} .nicimage01:before{ content:"Imagine \A your dream \A countertop. \A \A Now imagine it \A made from this.";} .nicimage02:before{ content:"Imagine \A your dream \A vanity top. \A \A Now imagine it \A made from this.";} .nicimage:before{white-space: pre-wrap; position:absolute; z-index:-1; top:-150px; left:-150px; text-transform: uppercase; letter-spacing: 0.2em; font-size: 15px; font-family: 'Futura PT W01 Heavy'; text-align:left; padding:12px; width:200px; height:200px; border:3px solid #fff; background:#fff; color:#222; line-height: 17px;} /* End Now Imagine Styles */ /* End Fabrication Styles */ /* Landing page styles */ .box-container{background: rgb(247,247,247); display: block; padding: 4vw; margin: 0 auto 1% auto; text-align: left;} .box-container h1{line-height: 1; margin-top:0; font-size: 1.25em; text-transform: uppercase; letter-spacing: 0.2em; font-family: 'Futura PT W01 Demi';} .box-container p{max-width: 890px;} .box-container hr { background: none; border: none; border-top: 1px solid #968762; margin: 1em 0; max-width:890px; } .box-container li.cat-item-none {display: none;} .box-container ul {margin: 0;padding: 0;list-style: none; text-transform: uppercase; font-size: 14px; letter-spacing: 0.1em; } .box-container ul li{margin:1.5em 0; font-family:'Futura PT W01 Demi'; display: block;} .box-container ul ul li {margin:0.5em 0 0 0; font-family:'Futura PT W01 Book';} .box-container ul a {color: #968762; padding: 0.5em; background: #fff; margin: 0 0.5em 0 0; display: inline-block; border-radius:5px; } .box-container ul li .children li {display: inline-block;} .wireframe-container{color:#000; margin:auto; padding:4em; max-width: 900px;} .wireframes ul{padding:0; margin:0; list-style: none;} .wireframes li{position:relative; padding: 0; margin:0; border: 2px solid #fff; background: #f7f7f7; float:left; width:33.33333%; color: #000000; font-size: 0.8em; letter-spacing: 0.02em;} .wireframes li img{width:100%; height:auto;} .wireframes figcaption{text-align: left; padding:0 5%; cursor: pointer; border-top: 1px dotted #bbb; line-height: 60px;} .wireframes figcaption span{text-transform: uppercase; white-space: nowrap; display: block; overflow: hidden; width: 80%; float: left; text-overflow: ellipsis;} .wireframes figcaption span.frame-sizes-trigger{position: absolute; right:5%; width:15%; float: right; text-align: right;} .wireframes figcaption span.frame-sizes-trigger em{display: none;} .wireframes table{color: #000; width: 100%; text-align: left;} .wireframes table tr{background: #e6e6e6;} .wireframes table td{padding: 1% 2%;} .wireframes table tr:nth-child(even){background:none;} .frame-sizes{display: none; position: absolute; width: 100%; padding:2%; background: #f7f7f7; bottom:62px;} .tax-group_classification .all-tiles a, .page-template-landing-page .all-tiles a {color: #000;} .tax-group_classification .all-tiles .label, .tile-index ul, .page-template-landing-page .all-tiles .label, .tile-index ul {background: #f7f7f7;} .tax-group_classification .grid, .page-template-landing-page .grid{margin:0 auto;} /* End landing page styles */ .sample-orders-list ul{margin:30px auto; text-align:center; font-size:0; list-style-type:none; padding:0;} .sample-orders-list li{text-align:left; margin:0 0 5px 0; padding:0; width:33.3%; float:left; } .sample-orders-list li img{width:90%; height:auto; max-width:250px;} .sample-orders-list li a{text-decoration:none;} .sample-orders-list li h5{text-transform:none; font-weight:100; font-family: 'Futura PT W01 Book'; height:50px; color:#ececeb; font-size: 15px; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sample-orders-list li h5 a span{display:none;} .demo-order1, .demo-order2{background:url(images/demo-order-icon.png) no-repeat left center; padding-left:40px; display:block; line-height:33px; white-space:nowrap;} .demo-order2{background:url(images/demo-tile-icon.png) no-repeat; display:inline-block; line-height:28px; padding-left:32px;} /* General styles for the modal */ /* Styles for the html/body for special modal where we want 3d effects Note that we need a container wrapping all content on the page for the perspective effects (not including the modals and the overlay). */ .md-perspective, .md-perspective body { height: 100%; overflow: hidden; } .md-perspective body { background: #222; -webkit-perspective: 600px; -moz-perspective: 600px; perspective: 600px; } .md-trigger{cursor:pointer;} .md-modal { position: fixed; top: calc(50% + 32px); left: 50%; width:90%; min-width: 320px; max-height: 90%; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .md-show { visibility: visible; } .md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(0,0,0,0.6); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show ~ .md-overlay { opacity: 1; visibility: visible; } /* Content styles */ .md-content { color: #fff; background: #222; position: relative; margin: 0 auto; } .md-content h3 { line-height:30px; text-align:center; margin:0; padding:10px; white-space:nowrap; color: #fff; letter-spacing: 0.1em; font-family: 'Futura PT W01 Demi'; font-size: 15px; } .md-content > div { padding: 0 30px 0 30px; margin: 0; text-align:center; overflow:hidden; border-top:40px solid #222; border-bottom:30px solid #222; } .md-content > div img{ clear:both; width:100%; height:100%; border-top:5px solid #222; -webkit-background-size: 245px 62px, contain; -moz-background-size: 245px 62px, contain; -o-background-size: 245px 62px, contain; background-size: 245px 62px, contain; background-repeat:no-repeat; background-position:center bottom, center center; cursor:zoom-in; } .md-content > div img.zoom-bg{ -webkit-background-size: 0%, auto; -moz-background-size: 0%, auto; -o-background-size: 0%, auto; background-size: 0%, auto; cursor:zoom-out; } .md-content a{ color: #fff; background: #333; margin: 10px auto 0 auto; line-height:40px; padding:0 20px; display:inline-block; cursor:pointer; clear:both; font-size:14px; text-transform:uppercase; letter-spacing:1px; } .md-content .video-contain{width: 60%; margin: 30px auto;} .md-content a.btn{position:absolute; top:40px; width:150px; right:160px; text-align:center; padding:0; color: #333; background: #fff;} .md-content a.md-close{position:absolute; top:40px; width:120px; right:30px; padding:0px; text-align:center;} /* Effect 1: opacity */ .grid.effect-1 li.animate { -webkit-animation: fadeIn 0.65s ease forwards; animation: fadeIn 0.65s ease forwards; } @-webkit-keyframes fadeIn { 0% { } 100% { opacity: 1; } } @keyframes fadeIn { 0% { } 100% { opacity: 1; } } /* Effect 2: Move Up */ .grid.effect-2 li.animate { -webkit-transform: translateY(200px); transform: translateY(200px); -webkit-animation: moveUp 0.65s ease forwards; animation: moveUp 0.65s ease forwards; } @-webkit-keyframes moveUp { 0% { } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes moveUp { 0% { } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /* Effect 8: 3D flip horizontal */ .md-effect-3.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .md-effect-3 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-70deg); -moz-transform: rotateY(-70deg); -ms-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } .md-show.md-effect-3 .md-content { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } .col2 .tile-finder{display:block; background: rgba(144, 141, 132, 0.2) url(images/tile-icon.png) no-repeat center 20px; background-size:80px; } .col2 .tile-finder .selection-header{color:#999; background:none; float:none; clear:both; width:100%;} .col2 .tile-finder h3{font-size:18px; line-height:20px; text-align:center; padding-top:120px;} .col2 .tile-finder h4{font-size:14px; letter-spacing:none; line-height:15px; padding:10px 10px 20px 10px; margin:0 auto; text-transform:none;} .col2 .tile-finder .hr{ max-width:90px; margin-top:12px; margin-bottom:5px;} .col2 .tile-finder .hr span{background:#fff;} .col2 .tile-finder span{text-decoration:none;} .pdfdownloads{ clear:both; padding:30px 0 40px 0;} .pdfdownloads ul{margin:0 auto; list-style-type:none; padding:0; display:inline-block; text-align:center; max-width:980px; } .pdfdownloads ul li{width:280px; margin:0 20px; padding:0; display:inline-block; height:500px; position:relative;} .pdfdownloads h3{color:#fff; background:#111; margin:0; line-height:30px; letter-spacing:1px; font-size:14px;} .pdfdownloads p{margin:10px 0 0 0; line-height:1.4; text-align:left; font-size:14px;} .pdfdownloads p span{color:#ababab; text-decoration:underline; display:block;} .pdfdownloads .cover img{max-width:280px;} .pdfdownloads .cover .pdfeffects{position:absolute; top:0px; background:url(images/pdf-effects.png) right top no-repeat; width:280px; height:350px;} .pdfdownloads a{position:absolute; text-decoration:none; top:0px; left:-10px; width:100%; height:100%; text-transform:uppercase; display:block; background:url(images/pdf-download.png) no-repeat 0px 40px;} .pdfdownloads a span{width:185px; position:relative; top:60px; left:10px; color:#fff; text-align:center; line-height:1.2; font-size:16px; text-decoration:none;} .brochure-list{padding:50px 0;} .brochure-list p{margin:auto; max-width:700px;} .brochure-list ul{margin:30px auto 0 auto; margin-bottom:40px; list-style-type:none; padding:0;} .brochure-list ul li{-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5); font-size:0; text-align:center; width:45%; max-width:270px; background-repeat:no-repeat; background-position:center bottom 34px; background-size:100% auto; padding:0; display:inline-block; white-space:nowrap; margin:20px 1%; position:relative; height:370px; overflow: hidden;} .brochure-list ul li .brochure{cursor: pointer; -moz-box-shadow: inset 0 0 0 1px #000; -webkit-box-shadow: inset 0 0 0 1px #000; box-shadow: inset 0 0 0 1px #000; background-color:rgba(0, 0, 0, 0.4); position: absolute; top: 0px; left: 0px; width: 100%; font-size:15px; color:#fff; text-transform:uppercase; text-decoration:none; display:block; height:100%;} .brochure-list ul li .brochure.selected{border: 1px solid #fff;} .brochure-list ul li input{position: absolute; bottom: 0px; right: 0px;} .brochure-list ul li h3{padding: 0px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); margin-top: 50%; letter-spacing: 0.15em;} .brochure-list ul li .brochure-logo{position: absolute; bottom: 20px; left: 20%; width: 60%; height: auto;} .select-all input[type="submit"]{background:rgba(0, 0, 0, 0.4); border: 2px solid rgba(255, 255, 255, 0.3); color: #999; padding: 10px 0px; width:160px; cursor: pointer; display: inline-block; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;} .select-all input[type="submit"]:hover, .select-all input[type="submit"]:focus{background:rgba(0, 0, 0, 0.8); color: #999; } input[type="submit"].active-button {background: #000; color: #fff; } .select-all{position:absolute; z-index: 2; width: 100%; left: 0%;} .select-all.float{position: fixed;top: 60px; } .select-all .custom-checkbox-label{display: inline-block; position: relative; right: auto; bottom: auto; margin-top: 0px;} .select-all.float .custom-checkbox-label{ -webkit-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.5);} .select-all .custom-checkbox-label .fa-check{margin-left: 1px;} .select-all .selected .fa-check{opacity:1 !important;} .brochure-list .brochure{background:#333; background-size: cover; background-position: center;} .sample-brochures-list, .brochure-sample-order-field{display: none;} .brochure-order-list{margin-left: 0; padding-left: 0;} .brochure-order-list li{list-style-type: none; display: inline-block; margin-right: 10px;} .select-all input[type="checkbox"], .brochure-list input[type="checkbox"]{display: none;} .custom-checkbox-label{cursor: pointer; display: block; margin-top: 10px; background:rgba(0, 0, 0, 0.4); border: 2px solid rgba(255, 255, 255, 0.3); color: #999; display: inline-block; padding: 10px 0; text-decoration: none; width:160px; text-transform:uppercase; text-shadow:none; text-transform:uppercase; font-size:14px; letter-spacing:2px; text-align:center;} .custom-checkbox-label .fa-stack{height: 0em; margin: 0px 10px 0px 0px; padding: 0px; width: 1em;} .custom-checkbox-label.selected{border: 2px solid #fff; color: #fff;} .custom-checkbox-label .fa-square{font-size: 25px; color: #333;} .custom-checkbox-label .fa-check{margin-top: -2px; margin-left: 5px; font-size: 15px; line-height: 0; color: #111;} .custom-checkbox-label.selected .fa-check{color: #fff;} .footer{width:100%; background: rgba(0, 0, 0, 1); clear:both; text-align:center; padding-bottom: 50px;} .tmbodyclass .footer{padding-bottom: 7em; background: #222 url(images/iris-platform-plus-logo-03.svg) no-repeat; background-size: auto 60%; background-position: center;} .footer ul{margin:0; padding:0; list-style-type:none; text-transform:uppercase; font-size:14px; line-height:45px;} .footer ul li{display:inline-block; margin:0 5px;} .footer a{color:#777; text-decoration:none; padding:0 7px; display: block;} .footer ul a:hover{color:#aaa;} .error404 .threebox, .error404 .showcontact, .error404 .call-to-action,.error404 .footer,.error404 .site-header{display:none;} .page404{padding-top:100px; background:url(images/porcelain-tiles-logo.svg) no-repeat center top; background-size:60% auto;} .footer ul li.toplink{display:none;} .frontpanel{position: relative; background: rgba(0,0,0,0.1); background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0.5) 100%); } .frontpanel .intro{display:none;} .spacerimg{width:100%; font-size: 0;} .spacerimg img{width:100%; min-height:400px;} .home .container { position: absolute; width: 100%; z-index: 100; top:0; bottom:0; left:0; right:0; text-align:center; } body.vegas-container>.vegas-slide{position:fixed;} .collections{} .collections-swatch { position: absolute !important; bottom: 20px; right: 20px; height: 65px; width:65px; background: #000; cursor: pointer; display:none; } .collections-label { position: absolute; width: 150px; right:0px; height:65px; bottom: 50px; text-align: left; background:rgba(0, 0, 0, 0.8); color: #fff; text-transform: uppercase; display: inline-block; transition: 1s; opacity: 0; font-family:'Futura PT W01 Demi'; letter-spacing: 0.3em; white-space: nowrap; overflow: hidden; line-height: 1.2; border-left:2px solid #000; } .collections-label.animated { border-left:2px solid #fff; width: 300px; opacity: 1; } .collections-label em{display: block; font-style: normal; color:#666; font-family:'Futura PT W01 Book'; text-transform: none; letter-spacing: 0em;} .collections-label a{display: block; padding:10px 5px 6px 20px;} /* .vegas-timer { z-index: 10000 !important; display: none !important; } .vegas-timer-progress { background: #666; display: none !important; }*/ .collections { position: absolute; bottom: 0; right: 0; animation: fadein 5s; -moz-animation: fadein 5s; /* Firefox */ -webkit-animation: fadein 5s; /* Safari and Chrome */ -o-animation: fadein 5s; /* Opera */ } .collections-list { position: absolute; display:none; bottom: 0px; left: auto; right:150px; width: 160px; list-style: none; margin: 0; padding: 0; text-transform: uppercase; text-align: right; line-height: 1.7; } .collections-list li { opacity: 0; transition: 0.5s; margin: 0; display: block; } .collections-list li a { padding: 5px 20px; color:#fff; text-decoration: none; } .animated .collections-list li { opacity: 1; } .collections-list .active a { color: #888; } .mouse-icon-scroll { position: fixed; z-index:1000; bottom: 40px; left: 50%; margin-left:-14px; width: 28px; height: 45px; margin-top: -45px; box-shadow: inset 0 0 0 1.5px #fff; border-radius: 16px; } .mouse-icon-scroll, .mouse-icon-scroll:before { position: absolute; left: 50%; } .mouse-icon-scroll:before { content: ''; width: 4px; height: 4px; background: #fff; margin-left: -2px; top: 8px; border-radius: 8px; animation-duration: 2s; animation-iteration-count: infinite; animation-name: scroll; } .mouse-icon-scroll, .mouse-icon-scroll:before { position: absolute; left: 50%; } @keyframes scroll{0%{opacity:1}100%{opacity:0;transform:translateY(20px)}} @-webkit-keyframes scroll{0%{opacity:1}100%{opacity:0;transform:translateY(20px)}} .homeboxes,.carousel-container{background: #000;} .homeboxes ul, .carousel-container ul{margin:0 auto; padding:0; list-style-type:none; max-width:1650px;} .homeboxes li{margin:0; padding:0; position:relative; display: block; line-height: 0; float: left; background-color: rgba(0,0,0,1); overflow: hidden;} .home .homeboxes li:nth-child(1){display: none;} li.box-1of4{width: 25%;} li.box-2of4{width: 50%;} li.box-4of4{width: 100%;} .homeboxes li img{opacity:1; background-position: center center; background-size: cover; background-repeat:no-repeat;} .homeboxes li:nth-child(1) img{background-image: url('images/homeboxes/surface-banner-full.jpg?v=1252'); background-size: cover; } .homeboxes li:nth-child(2) img{background-image: url('images/homeboxes/marble-square-full.jpg?v=1254'); background-size: cover; background-position: center bottom;} .homeboxes li:nth-child(3) img{background-image: url('images/homeboxes/stone-landscape-full.jpg?v=1252'); background-size: cover; background-position: left bottom;} .homeboxes li:nth-child(4) img{background: #000;} .homeboxes li:nth-child(5) img{background-image: url('images/homeboxes/wood-square-full.jpg?v=1252'); background-size: cover;background-position: center bottom;} .homeboxes li:nth-child(8) img{background-image: url('images/homeboxes/fabrication-landscape-full.jpg?v=1252'); background-size: cover;} .homeboxes li:nth-child(7) img{background-image: url('images/homeboxes/concrete-square-full.jpg?v=1252'); background-size: cover; background-position: left bottom;} .homeboxes li:nth-child(6) img{background-image: url('images/homeboxes/12mm-tops-landscape-full.jpg?v=1253'); background-size: cover;} .homeboxes li:nth-child(9) img{background-image: url('images/homeboxes/bookmatched-square-full.jpg?v=1252'); background-size: cover; background-position: center bottom;} .homeboxes li:nth-child(10) img{background-image: url('images/homeboxes/now-imagine-homepage-box.svg?v=1252'); background-size: cover; } .homeboxes li:nth-child(11) img{background-image: url('images/homeboxes/now-imagine-bespoke-vanities.jpg?v=1252'); background-size: cover;} .homeboxes li:nth-child(12) img{background-image: url('images/homeboxes/outside-space-02.jpg?v=1252'); background-size: cover;} .homeboxes li:nth-child(13) img{background-image: url('images/homeboxes/showrooms-square-full.jpg?v=1252'); background-size: cover;} .homeboxes li:nth-child(14) img{background-image: url('images/homeboxes/contact-square-full.jpg?v=1252'); background-size: cover;} .homeboxes ul li:nth-child(7){float: right;} .homeboxes ul li:nth-child(9), .homeboxes ul li:nth-child(6){clear: left;} .homeboxes ul li:nth-child(10) h2{display: none;} .homeboxes h2{font-family:'Futura PT W01 Book'; opacity: 1; width:100%; display:block; position:absolute; top:50%; font-size:18px; letter-spacing: 0; line-height:55px; text-transform: uppercase; text-align:center; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); margin:0 auto; padding:0; background: rgba(0,0,0,0); } .homeboxes span, .container h2 span{display:block; } .homeboxes strong{font-size:26px; font-family:'Futura PT W01 Demi'; letter-spacing: 0.5em; padding: 0 0.3em 0 0.5em; display: inline-block; min-width: 55%;} .homeboxes em{display:block; font-family: 'Futura PT W01 Light'; text-transform: none; font-style: normal; letter-spacing: 0.1em; font-size: 24px; line-height: 1.1; display: inline-block; min-width: 55%;} .homeboxes li:hover h2{background: rgba(0,0,0,0); } .container h2{font-family:'Futura PT W01 Light'; position:absolute; top:50%; width:100%; font-size:22px; line-height:80px; text-transform: uppercase; letter-spacing: 0.5em; text-align:center; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); margin:0 auto; padding:0;} .container h2 { opacity: 0; animation-delay: 2s; -webkit-animation: mymove 1s normal forwards ease-in-out; animation: mymove 1s normal forwards ease-in-out; -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { from {opacity: 0;} to {opacity: 1;} } @keyframes mymove { from {opacity: 0;} to {opacity: 1;} } .container h2 strong{display:block; font-size:20px;letter-spacing: 0.3em;} .container h2 em{display:block; text-transform: none; font-style: normal; letter-spacing: 0.05em; font-size: 55px; line-height: 1.1;} .subtle strong{font-size:20px;} .container h2 span{display:none;} .homeboxes a, .container a {text-decoration: none; color:#fff; display: block;} .homeboxes .inverse a{color: #333} .homeboxes .boxbanner strong{text-transform: capitalize; font-size: 55px; font-family: 'Futura PT W01 Light';letter-spacing: 0.07em;} .homeboxes li img{width:100%; height:auto; max-width: 100%; max-height: 100%; -webkit-box-shadow: inset 0px 0px 50px 30px rgba(0,0,0,0.15); -moz-box-shadow: inset 0px 0px 50px 30px rgba(0,0,0,0.15); box-shadow: inset 0px 0px 50px 30px rgba(0,0,0,0.15);} .homeboxes li img{-webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity:0.8; -webkit-filter: contrast(1.1) grayscale(30%); filter: contrast(1.1) grayscale(30%); } .homeboxes li:hover img{ -webkit-transform: scale(1.01); transform: scale(1.01); opacity:1; -webkit-filter: contrast(1.2) grayscale(10%); filter: contrast(1.2) grayscale(10%); } .homeboxes li:first-child img, .homeboxes li:first-child:hover img{ -webkit-transform: scale(1.05); transform: scale(1.05); opacity:1; -webkit-filter: contrast(1.2) grayscale(30%); filter: contrast(1.2) grayscale(30%); } .homeboxes li:nth-child(10) img, .homeboxes li:nth-child(10):hover img{opacity:1; -webkit-filter:none; filter:none; -webkit-transform: scale(1.0); transform:scale(1.0);} /*Homepage Popup Styles */ .ptpopup{position: fixed; top:0px; left:0; bottom:0px; right:0px; background: rgba(0,0,0,0.6); z-index:2500;} .ptpopup-container{width:80%; max-width:750px; background: #fff; color: #666; position: absolute; top:50%; left:50%; transform:translate(-51%, -51%);} .ptpopup-contents{padding:5% 5% 5% 55%; position: relative; text-align:left; background:url(https://www.porcelain-tiles.co.uk/wp-content/uploads/ptpopup-banner.jpg) left center no-repeat; background-size:50% auto;} .ptpopup-contents h2{line-height: 1; font-size:40px; margin-top:0;} .ptpopup-contents a{color: #666;} .ptpopup-close-button{position: absolute; top:10px; right:10px; cursor: pointer; line-height: 35px; padding:0 10px; color: #000;} a.ptpopup-button{color: #fff; text-transform:uppercase; letter-spacing: 0.1em; margin-right:1em; font-size: 0.8em;text-decoration:none; background: #000; padding: 0 10px; line-height:35px; display: inline-block;} @media screen and (max-width: 1400px) { .ptpopup-contents{padding:5% 5% 5% 50%;background-size:45% auto;} .ptpopup-close span{display:none;} } @media screen and (max-width: 1025px) { .ptpopup-contents h2{font-size:28px;} .ptpopup-container{max-width:500px;} .ptpopup-contents{padding:5% 5% 46% 5%;background:url(https://www.porcelain-tiles.co.uk/wp-content/uploads/ptpopup-widebanner.jpg) center bottom no-repeat; background-size:100% auto;} } @media screen and (max-width: 500px) { .ptpopup-contents{padding:10% 5%; background:none;} } /* Carousel and Slick styles */ .carousel-container{position:relative;} .carousel-container li{margin:0; padding:0; display: flex; } .carousel-container li:focus, .slick-arrow:focus {outline: 0;} .carousel-container li div{ float:left;} .article-image{ display: flex; -webkit-flex: 1; -ms-flex: 1; -moz-flex: 1; flex: 1} .article-image img{width:100%; height: auto; margin:0 !important;} img.articleimage{background-size: cover; background-position: center;} .article-content{ background: rgba(255,255,255,1); clear:right; color: #000; padding:2em 0 1em 0; text-align: left; -webkit-flex: 1; -ms-flex: 1; -moz-flex: 1; flex: 1} .article-content a{text-decoration: none; display: inline-block; line-height: 40px; padding:0 5%; margin-top:5%; border:1px solid #000; color: #000; background: rgba(255,255,255,1);} .article-content a:hover{color: #fff; background: rgba(0,0,0,0.9);} .article-content h5 {font-size: 13px;margin-left:7%;} .article-content h2 {font-size: 42px; line-height: 1; margin: 0.5em 0 0.5em 7%; max-width: 500px; } .article-content p{margin:0.5em 50px 1em 7%;} .slick-arrow{ -webkit-appearance: none;-moz-appearance:none;appearance: none; border: none; background: transparent; text-indent: -10000px; width: 44px;} .slick-prev, .slick-next{position: absolute; top:50%; z-index: 2; transform: translate(0, -50%); -webkit-transform: translate(0, -50%);} .slick-prev{left:5px;} .slick-next{right:5px;} .slick-next:before, .slick-prev:before { content: ''; z-index: 2; background-color: rgba(0,0,0,0.3); background-image: url(https://www.porcelain-tiles.co.uk/wp-content/themes/porcelain-tiles-2026/photoswipe/css/default-skin.png); background-size: 264px 88px; width: 44px; height: 44px; position: absolute; display: block; top: 0; left: 0; } .slick-next:before {background-position: -88px -38px;} .slick-prev:before {background-position: -132px -38px;} .carousel-container ul.slick-dots{position: absolute; bottom:-30px; display: inline-block; left:50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); background:none;} .slick-dots li{display: inline-block; position: relative; margin:0 10px; width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,0.3);} .slick-dots li.slick-active{background: rgba(255,255,255,0.9);} .slick-dots button{opacity: 0; -webkit-appearance: none;-moz-appearance:none;appearance: none; min-height: 25px; text-indent: -10000px; padding:0; height: 25px; width: 25px; display: block; position: absolute; top:-25%; left:-25%;} /* Slider */ .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* End Carousel styles */ /* Mix it up controls styles */ li.selection-panel {width: 100% !important;background:rgba(0, 0, 0, 0.3);} .panel-options {width: 100%;text-align: center; padding:2em 0; } .panel-options h3{margin-top:0; font-size: 0.9em;} .panel-options a{margin:0.1em; cursor: pointer !important;} .panel-options div{display: inline-block; } .panel-options div:after{clear: both;content: ""; display: block;} .filter-loading { background: url(images/ring-alt.svg), rgba(0,0,0,0.75); background-repeat: no-repeat, repeat; background-position: center; position: fixed; top:0px; left:0px; z-index: 10000; height: 100%; width: 100%; display: table-cell; vertical-align: middle; text-align:center; } .filter-loading span{ color: rgba(255,255,255,0.5); position: absolute; top: 50%; left: 0; width: 100%; margin-top: 40px; text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.75em; } .filter-loading span:after { overflow: hidden; display: inline-block; vertical-align: bottom; -webkit-animation: ellipsis steps(4,end) 900ms infinite; animation: ellipsis steps(4,end) 900ms infinite; content: "\2026"; /* ascii code for the ellipsis character */ width: 0px; position: absolute; text-align: left; } @keyframes ellipsis { to { width: 20px; } } @-webkit-keyframes ellipsis { to { width: 20px; } } .page-template-mix-it-filter-page .entry-header{display:none;} .page-template-mix-it-filter-page .entry-content h2 {letter-spacing: 0.15em;font-size: 18px;font-family: 'Futura PT W01 Book',sans-serif;} .page-template-mix-it-filter-page .container{min-height:500px;} .mixCount{display: table; text-align: center; -webkit-transition: .5s;} .controls-container {padding: 1em;} .controls{clear:both; display: inline-block;} .controls legend{color: #999; text-align:center; letter-spacing: 0.2em;text-transform: uppercase;font-size: 0.75em; width:100%;} .controls fieldset{border: 1px solid transparent; padding:0.5vw 1vw 0.5vw 1vw;} .control{display: inline-block; line-height: 40px; min-height:0; margin: 0.1em 0; color: rgba(150,150,150,0.9); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75vw; text-align: center; margin-top: 0.5em; padding: 0 10px; white-space: nowrap; width:auto; } .control:active{background: rgba(0,0,0,0.9);} .page-template-mix-it-filter-page .controls{width:24%; max-width:400px;} .page-template-mix-it-filter-page .control{width:32%; padding:0;} .page-template-mix-it-filter-page .label span, .page-template-mix-it-fabrication .label span{display:none;} .all-tiles ul li.listbreak { width: 98%; background: none; text-align: left; font-family: monospace; color: #222; font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.2em; font-family: 'Futura PT W01 Demi'; } .control-all{display:none;} .term-all .control-all{display: inline-block;} .term-all .back-to-all{display:none;} .controls-sort{white-space: nowrap; display: inline-block; margin: 0 1%; padding:2em 1em; position: absolute; right:0;} .control-sort, .control-sort.mixitup-control-active{padding: 0 0.5em; background: rgba(0,0,0,0); color: rgba(255,255,255,0.2); border:none;} .control-sort.mixitup-control-active{color: rgba(255,255,255,0.5);} .tax-range_classification .controls legend, .tax-bespoke_classification .controls legend{display: none;} .reset{/*background:rgba(255,255,255,0.1); color: #fff;*/} button.control:focus{outline: 0;} .mixitup-control-active{color: #fff; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.2);} .tailor-made-container .control {color: #666;background: rgb(247,247,247);} .tailor-made-container .mixitup-control-active {color: #fff; background:#968762; border:1px solid #968762;} h1.hashTitle {text-transform: capitalize;} .page-template-mix-it-fabrication .all-tiles ul li, .tax-bespoke_classification .all-tiles ul li{margin: 1% 1% 2% 1%; box-shadow: none;} .tailor-made-container .controls{display: block;} .tailor-made-container .controls-container{ padding: 0.25em 0; background:#fff; position: fixed; border: 0; z-index: 10; width: 100%; text-align: center; box-shadow: 0px -2px 15px rgba(0,0,0,0.1); left: 0;} .controls-container{bottom:0; transition:all 1000ms;} .tm-controls {padding: 1vw 4vw;} .controls fieldset.tm-control-group{padding:0;} .page-template-mix-it-fabrication .tailor-made-container .control-group{width:29%; display: inline-block;} .page-template-mix-it-fabrication .tailor-made-container .control{width:23%;} .page-template-mix-it-fabrication .tailor-made-container .control-group-design .control:nth-child(3) {width:21%} .page-template-mix-it-fabrication .tailor-made-container .control-group-design .control:nth-child(2),.page-template-mix-it-fabrication .tailor-made-container .control-group-design .control:nth-child(4){width:38%} .page-template-mix-it-fabrication .tailor-made-container button.control.reset {width: 10%;} .tailor-made-container .tm-controls .control {width: 100px !important; max-width: 100px;margin:0 1vw 0 0;border-radius: 0; padding: 1em 0.5em; line-height: 0; background: rgb(228, 226, 217);} .tailor-made-container .tm-controls .mixitup-control-active{border: 1px solid rgba(255,255,255,0); background: rgb(150, 135, 97);} /* End Mix it up controls */ /* New Single Tile Page */ .glance-panel{position: absolute; left:50%; width: 40%; top:50%; transform: translate(-100%, -50%);} .glance-panel-container{background:rgba(255,255,255,0.95); color: #000; padding: 2vw;} .glance-favourite-button {position: absolute;top: 0;right: 0;} .glance-favourite-button a{color: #000; line-height: 50px; display: inline-block; width: 50px;} .glance-panel h1, .section h2{ font-size: 2.75em; margin-bottom: 0; line-height: 0.8em; letter-spacing: 0.05em; } .glance-panel h1 span, .section h2 span{display: block; font-family:'Futura PT W01 Book'; text-transform:uppercase;font-size:35%; letter-spacing: 0.2em;} .tile-introduction{max-width:550px; margin:auto;} .tile-introduction a{color:#000; text-decoration:none; border-bottom:1px dotted #000;} .alt-finishes{display: none; margin:auto; padding:0; list-style: none; max-width: 600px;} .alt-finishes li{display: inline-block; margin:auto; padding: 0 1%; white-space: nowrap;} .alt-finishes.finishes-1 li{width:50%;} .alt-finishes.finishes-2 li{width:48%;} .alt-finishes.finishes-3 li{width:30%;} .alt-finishes.finishes-4 li{width:23%;} .alt-finishes.finishes-5 li{width:18%;} .alt-finishes li a, .single-tile .order-button .btn{line-height: 32px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.1em; text-decoration: none; display: block; padding: 0; background: #fff; border:1px solid #000; color: #000; margin:2px 0 0 0;} .range-menu .order-button{display: inline-block; float: right; margin:2px 2px 0 0;} .single-tile .order-button .btn{ display: block; padding:0; margin: 0; background: #000; color: #fff;} .range-menu .order-button a.btn{padding: 0 20px; font-size: 0.7em;} .glance-panel .order-button .btn{line-height: 56px;} .alt-finishes.active{display: block;} .range-accordion .order-button a.btn{display: inline-block; text-align:center; padding: 0 20px;} li.current-finish a{color:#fff; background: #c7c7c7; border:1px solid #c7c7c7;} .tile-thickness div, .tile-sizes, .tile-rating{display: inline-block;width:100px; height:112px; margin: 0; position: relative; line-height:112px; letter-spacing: -0.025em; vertical-align: middle; font-family:'Futura PT W01 Light'; text-align:center;} .sizes-size-1 em{display: none;} .tile-sizes, .tile-rating{font-size:3em;} .tile-sizes h4, .tile-rating h4{display: block; position: absolute; top: 80px; font-size:12px; letter-spacing: 0.15em; line-height:16px; margin:0 5%; text-transform:uppercase; text-align:center; width:90%; overflow: hidden; text-overflow: ellipsis; font-family:'Futura PT W01 Demi';} .tile-thickness div{font-size:16px; letter-spacing: 0.05em; font-family:'Futura PT W01 Demi'; background: url(https://www.porcelain-tiles.co.uk/wp-content/themes/porcelain-tiles-2026/images/tile-thickness-icon.png); background-position: center; background-size: 100%;} .tile-sizes a{display: block; color: rgba(255,255,255,0.5);} .columncontrols .hideme{display: none;} .section {display: block;clear: both;margin:auto;padding:2em 1%;max-width:1200px;} /*.gallery-section.section{background: rgba(255,255,255); max-width:1920px; padding:1% !important; line-height: 0;}*/ .gallery-section.section img{width:100%; max-width: none;} .wood-effect-tile-swatch {width: 33% !important; margin-right: 0.333%;} .tile-thickness .boxxundefined{display: none;} .outlines .average-man { display: inline; } .swatch-outlines .outlines div{display: none;} .swatch-outlines .outlines div.showme {display: inline !important;} .section.swatch-outlines {max-width:none; padding:2em 0 2em 0;} .single-tile-gallery{margin:0; padding:0; list-style:none; display: inline-block; width:100%;} .single-tile-gallery li{margin:0; width: 25%; float: left; padding: 0.5%; font-size: 0;} .single-tile-gallery li:nth-child(5n+1){width: 50%; float: right;} .single-tile-gallery li:nth-child(10n+1){float:left;} .single-tile-gallery figcaption{display: none;} .single-tile-gallery.single-loop1 li{width: 100% !important; float: none; margin: auto; max-width: 700px;} .single-tile-gallery.single-loop2 li{width: 50% !important; float: none; margin: auto; max-width: 700px; display: inline-block;} .section-split-left{float:left; width:40%; margin-left:10%;} .section-split-right{float:right; width:48%;} .paragraph-content {max-width: 700px; margin:auto;} .story-section.section p {font-size:1.2em;} .single-tile .sizetablehading {display: none;} .decors-section .tilecloseups{text-align:center;} .decors-section .tilecloseups li {max-width: 300px;} .single-tile .outlines{margin:auto;} /*.glance-panel {opacity: 1; animation-name: GlancefadeIn; animation-duration: 1s; animation-delay: 0s; animation-iteration-count: 1; animation-timing-function: ease-out; }*/ @keyframes GlancefadeIn { from { opacity: 0; transform: translate(-100%, 55%); } to { opacity: 1; transform: translate(-100%, -50%); } } /* End New Single Tile Page */ /* New Bespoke Designs page */ .tax-bespoke_classification h1.entry-title, .page-id-16548 header.tm-section {display: none;} .tailor-made-banner{background: url(images/tailor-made-logo-black.png) no-repeat center; background-size: contain; height:90px; display: inline-block; width:100%; margin:auto; max-width:350px;} .bespoke-panel .tailor-made-banner{height:170px;} .tailor-made-banner a {display: block;height: 100%;} .single-design .my-gallery figcaption{display: none;} .single-design .pricetd{display: none;} .logged-in.single-design .pricetd{display: table-row;} .bespoke-top-section{text-align: left;} .bespokepageleft{ position: relative; max-width: 1150px; margin: auto; padding: 0; } .bespokepageright, .bespoke-specifications{ position: relative; max-width: 1680px; margin: auto; padding: 0 4vw; } .bespoke-specifications{padding-bottom:4vw;} .single-design .image_count{bottom: 0; right: 0vw; color: #fff;} .single-design .my-gallery, .single-design .my-gallery li{margin: 0; padding: 0; list-style-type:none; font-size: 0;} .single-design .bespokepageleft .my-gallery li img{width:100%; max-height:85vh; object-fit: cover; object-position: center;} .single-design .my-gallery li.example-no{display: none;} .bespoke-panel {margin:auto; position: relative; max-width:1000px;} .bespoke-panel h5, .bespoke-panel h1 {margin-bottom: 0;} .bespoke-panel h5{margin-top:0.5em;} .bepoke-panel h2{text-transform:uppercase;} .followoncontent-wider .bespoke-panel{padding-top: 1em;} .followoncontent-wider .bespoke-panel p {text-align: center; margin-top:0;} .bespoke-wireframe{text-align:center; background: rgb(247,247,247); margin-top: 2em;} .bespoke-wireframe img{margin:auto; width: 60%; height:auto;} .button {padding:1em 0; text-align: center;} .button a { text-align: center; padding: 0 3em; margin: 1em auto; display: inline-block; text-decoration: none; line-height: 56px; color: #666; text-shadow: none; text-transform: uppercase; font-size: 0.7em; letter-spacing: 0.1em; border: 1px solid #666;} .tm-btn{ background: #222; white-space: nowrap; overflow: hidden; color: #fff !important; border: none !important;} .tm-btn-reverse {background: rgb(247,247,247); color: #222 !important;} .virtual-360{position: absolute; display: block; bottom: 7%; right: 5%; font-size: 0px;} .virtual-360 a{display: block; background: url(images/360-virtual-view.png); width: 75px;height: 75px; background-size: cover;} .visualiser-3d{display: inline-block; font-size: 0px;} .all-tiles li .visualiser-3d, .bespoke-panel .visualiser-3d{position: absolute; bottom: 45px; right: 2%; display:none;} .visualiser-3d a{display: block; background: url(images/tm/icons/3d-badge.svg); width: 4vw; height: 4vw; min-width: 50px; min-height: 50px; background-size: 100%; background-repeat: no-repeat;} .visualiser-3d.intro-3d a{height: 20vw; width:20vw;} .tm-identifier{ position: absolute; bottom: 2.1em; right: 50%; display: block; background-color: rgb(247,247,247); min-width: 65px; min-height: 30px; background-size: 90%; background-repeat: no-repeat; border-top-left-radius: 12px; border-top-right-radius: 12px; background-position: center bottom; transform: translate(50%, 0px); } .tm-identifier-TM6{background-image: url(images/tm/icons/tm-6-gold.svg);} .tm-identifier-TM12{background-image: url(images/tm/icons/tm-12-gold.svg);} .tm-identifier-TM20{background-image: url(images/tm/icons/tm-20-gold.svg);} .tm-identifier-TMGrip{background-image: url(images/tm/icons/tm-grip-gold.svg);} .bespoke-panel table{-webkit-text-size-adjust: none;} .example-plane{white-space: nowrap;} .bespoke-note{display: block;width: 170px;height: 170px;padding: 55px 1em 0 1em;background: rgba(255,255,255,1);border-radius: 50%;text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8em;color: #000; font-family: 'Futura PT W01 Demi';} .note-1, .note-2 {display: none;} /* End New Bespoke Designs page */ .theintro{position:absolute;text-indent:-10000px;} .follow-on-links a{text-decoration:none; color:#fff; padding:0 10px; display:inline-block; line-height:35px; font-size:15px; letter-spacing:1px; text-transform:none;} a.tm-btn:hover{color:#fff; background: rgba(0,0,0,0.2);} .tile-photos{display:none;} .wp-caption { max-width: 100%; width: auto; text-align:center; } figure.wp-caption.alignleft, img.alignleft { margin: 10px 24px 20px 0; } .wp-caption.alignleft { margin: 10px 14px 20px 0; } figure.wp-caption.alignright, img.alignright { margin: 10px 0 20px 24px; } .wp-caption.alignright { margin: 10px 0 20px 14px; } blockquote.aligncenter, img.aligncenter, .wp-caption.aligncenter { margin: 10px auto 20px auto; } .wp-caption { margin-bottom: 20px; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption-text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 10px; line-height: 1.4; margin: 10px auto; max-width:900px; } div.wp-caption .wp-caption-text { padding-right: 0px; text-align:center; letter-spacing:2px; text-transform:uppercase; } div.wp-caption.alignright img[class*="wp-image-"], div.wp-caption.alignright .wp-caption-text { padding-left: 10px; padding-right: 0; } img.alignright{float:right; margin-left:10px;} img.alignleft{float:left; margin-right:10px;} img.alignnone{clear:both; margin-top:10px; margin-bottom:10px;} /* form styles */ /* Form fields, general styles first. */ .page-id-124 .showcontact, .page-id-10 .showcontact{display:none;} div.wpcf7 {max-width: 900px;} .wpcf7 ul{margin:0; padding:0; list-style-type:none;} .wpcf7 ul > li{margin:0; padding:2px 2% 8px 0; width:100%; display: inline-block;} .wpcf7 ul li p{margin:0;} .wpcf7 legend { font-family: 'Futura PT W01 Demi',arial,sans-serif; padding: 0; font-size: 1.2em; letter-spacing: 0.05em; margin: 0.5em 0 0 0; } .wpcf7 .hr{clear:both;} .wpcf7 label{display:block; max-width:100%; margin:0; font-family: 'Futura PT W01 Demi',arial,sans-serif; padding: 0.5em 0 0 0;} .wpcf7 ul li.halfwidth{width:49%;} .wpcf7 ul li.thirdwidth{width:33.33%;} .wpcf7 ul li.quarterwidth{width:25%;} span.wpcf7-not-valid-tip {position: absolute;} .wpcf7 .submit-item{clear:both; text-align:center;} .wpcf7 .submit-item input{margin:20px auto;} .wpcf7 ul li.tile-order{display:none;} .wpcf7 ul li.thelookup{display:none;} #crafty_postcode_result_display{min-height:150px; display: block; width: 72%; max-width:100%;} #example-1-search{background: #168cbe; border-color: #168cbe; color:#fff; width:50%; min-width:120px; max-width:250px;} #example-1-search.manual-lookup{background: #333; border-color: #333; color:#555;} /** Brochure request form, if form successfully submitted allow HTML block rather than CF7 stripping out **/ .wpcf7 form.sent div.visible-if-sent { display: block; } button, input[type=text], input[type=submit], input[type=button], input[type=email], input[type=tel], input[type=number], input[type=date], select, textarea{ box-sizing: border-box; -webkit-appearance:none; border: 1px solid #cccccc; background: #fff; /* Old browsers */ font-family: inherit; padding: 10px; border-radius: 6px; font-size:16px; color: #666; height:auto; width: 100%; } select{-webkit-appearance: menulist; -moz-appearance: menulist; -ms-appearance: menulist; -o-appearance: menulist; appearance: menulist; vertical-align: middle; padding:0px 10px;} textarea{min-height:80px;} input[type=text]:hover, input[type=email]:hover, input[type=tel]:hover, input[type=date]:hover, select:hover, textarea:hover{} input:focus, textarea:focus { border: 1px solid #aaa; outline: 0; } /* Buttons */ input[type="submit"], input[type="button"], input[type="reset"] { background: #000; /* Old browsers */ border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; color: #fff; display: inline-block; padding: 20px 0; text-decoration: none; width:230px; text-transform:uppercase; text-shadow:none; text-transform:uppercase; font-size:14px; letter-spacing:3px; text-align:center; cursor: pointer; } .select-css{ display: block; padding: 10px; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; border: 1px solid #ccc; border-radius: 6px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E); background-repeat: no-repeat; background-position: right .7em top 50%; background-size: .65em auto;} input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="button"]:focus, input[type="reset"]:focus { background: #333; /* Old browsers */ outline: none; } input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active { background: #333; /* Old browsers */ } .multiple-label{display:inline-block; width:210px; overflow:hidden;} .wpcf7 ul.feedback-form .wpcf7-form-control-wrap{display:inline-block; overflow:hidden;} .wpcf7 ul.feedback-form .wpcf7-list-item-label{ margin-right:20px;} .wpcf7 ul.feedback-form li{margin-bottom:15px;} .wpcf7 ul.feedback-form label{display:inline-block;} div.hidden-fields{opacity: 0.2} @media screen and (min-width: 1601px) { .widest{display: block;} .prevnextlinks{width:18%;} .tm-benefits-list h3, .tm-followon-list h3 {font-size: 0.8vw;} .control {font-size: 0.5vw;} .single-range .single-tiles > li{width:49%; float: left;} .landingpage.single-range .single-tiles > li {width: 31%;} .single-range .singletileloop3 > li, .single-range .singletileloop2 > li,.single-range .singletileloop1 > li{width:99%; float: left;} .splitpageright{width:37.5%; } .splitpageleft{width:58.5%; } .outlines{ width: 36.5vw; height: 36.5vw; } .about-message-01{padding: 8% 4em 2% 4em;} .range-header > p{text-align: left; max-width: 1200px; -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2;} } @media screen and (min-width: 1400px) { #navCart .dropdown-toggle em{display:block; text-align: right; position:absolute; top:20px; right:45px; line-height:1; white-space: nowrap; text-transform: uppercase; font-family:'Futura PT W01 Light'; letter-spacing: 0.05em;} #navCart .dropdown-toggle {width: 80px;} #navCart .showWish{width:120px;} #navCart .showCart{width:105px;} #navCart .showTel em, #navCart .showSearch em{right:30px;} .wireframes figcaption span.frame-sizes-trigger em{display: inline-block; padding-right: 5px;} .page-template-product-feature .entry-header {padding: 8em; right: 10%;} .fabrication-type li.fabrication-type-header ul li{padding:4em;} } @media screen and (max-width: 1025px) { .all-tiles ul a span{display:none;} .logo{width: 20%;} .range-benefits ul li h3 span{display:block;} .top-banner{height: 320px; overflow:hidden;} .single-range .entry-title{ line-height: 320px;} .single-range .entry-title span{line-height:220px;} .tileactions em{display:none;} .collections-label{height:auto;} .collections-label.animated {width: 220px;} .page-template-mix-it-filter-page .control{width:48%;} .control{padding:0 1em;} .controls-sort{ position: relative;} .about-message-01{font-size: 4vw; padding: 10% 0 10% 2em;} .about-message-01 .about-message-text {padding-top:4em;} .bespoke-specifications{width:100%;} .bespoke-wireframe img{width: 90%;} .bespoke-note{width:140px; height:140px; padding-top:46px; font-size: 0.65em;} .glance-panel { position: relative; left: 0%; width: 100%; top:auto; margin-top: -110px; transform: translate(0%, 0%);} @keyframes GlancefadeIn { from { opacity: 0; transform: translate(0%, 20%); } to { opacity: 1; transform: translate(0%, 0%); } } .glance-panel-container {padding: 0.1em 2em 2em 2em; background:rgba(255,255,255,1);} .glance-panel h1, .section h2 {font-size: 2em;} .section {padding:1em 1%;} .section.swatch-outlines {padding:2em 1%;} .section-split-left{width:50%; margin-left:0%;} .range-menu .alt-finishes li a{line-height: 30px; font-size:0.6em; margin:1px 2px 0 2px;} .single-tile .range-menu .order-button .btn{font-size:0.6em; margin:1px 2px 0 2px;} } /* For ipads screens */ @media screen and (max-width: 950px) { .mininav-container{display: none;} h2{font-size:22px;} a.brochure-link{padding: 75px 10% 80px 10%; line-height: 1.2;} .logo{width: 30%;} .the-index li{font-size:0.9em;} .brochure-shadow{width: 200px;} .tile-selections h3{line-height:30px; font-size:25px;} .threecol .colmid { right:2%; /* width of the right column */ } .threecol .colleft { right:70%; /* width of the middle column */ } .threecol .col1 { width:66%; /* width of center column content (column width minus padding on either side) */ left:104%; /* 100% plus left padding of center column */ } .threecol .col2 { width:21%; /* Width of left column content (column width minus padding on either side) */ left:10%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */ } .tailor-made-container{margin: auto 0vw;} p.oversize {font-size: 1.2em;} p.oversize a{text-decoration: none; border-bottom: 2px solid #aaa;} p.midsize {font-size: 1.1em;} h3.tm-tagline {font-size: 1.6em;} .menu-tailormadenav-container li a, .tm-menu-logo{line-height:50px;} .section-fifty-fifty {display: block;} .section-fifty-fifty .block{width:100%;} .section-fifty-fifty .block:first-child, .section-fifty-fifty .block:last-child {margin: 0px;} .tm-followon-list li{width:47%} .tm-call-to-action .tm-followon-list li{width:30.333%} .tm-benefits-list li {width: 50%; padding: 0 5vw;} .section-gallery ul li:first-child, .section-gallery ul li:nth-child(5) {width: 100%;} .section-gallery li {width: 32.333%;} .section-gallery ul li:nth-child(10), .section-gallery ul li:nth-child(11) {width: 65.666%;} .tm-colour-swatches li img, .section-gallery li img {height: 40vw;} .menu-tailormadenav-container li {display: block;} .menu-tailormadenav-container .menu {max-height: 0px; display: block;} .menu-tailormadenav-container .menu-icon {display: inline-block;} .tabs ul li label { padding: 10px 0; } .tabs ul li label { font-size: 0.8em; letter-spacing: 0.1em;} .controls-sort{padding:1em 0;} .page-template-mix-it-fabrication .tailor-made-container .control {width: 48%;} .page-template-mix-it-fabrication .tailor-made-container .control-group-design .control:nth-child(2){width:98%} .page-template-mix-it-fabrication .tailor-made-container .control-group-design .control:nth-child(3){width:36%} .page-template-mix-it-fabrication .tailor-made-container .control-group-design .control:nth-child(4){width:60%} .label em{display:none;} .tooltip {width:70%;} .inside-showrooms .thecaption h3{font-size:20px; line-height:60px;} .document-wall li{width:47%;} ul.lcp_catlist, ul.page-list {-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;} .single-range .range-menu h2, .single-tile .range-menu h2{display: none;} .prevnextlinks{width: 31.333%;} .homeboxes h2{font-size:18px; letter-spacing: 0.3em; line-height: 30px;} .homeboxes strong{font-size:22px; letter-spacing: 0.4em;} .homeboxes .boxbanner strong{font-size: 35px; letter-spacing: 0.07em;} .homeboxes em{font-size: 18px;} .subtle strong{font-size:18px;} .homenav li a{letter-spacing: 0.1em; font-size: 15px;} .article-content h2 {font-size: 32px;} .page-template-product-feature .entry-header {padding: 2em;} .page-template-product-feature .top-banner {width:100%;} h1{font-size:35px;} h2{font-size:22px;} h3{ font-size:20px;} h4{font-size:18px;} .tileactions a{padding:0 8px; font-size: 0.85em;} .threebox ul li{font-size:13px; letter-spacing: 0.1em;} .section-split-left, .section-split-right{width:100%; margin-left:0%; float: none;} .section-split-right{padding: 2em 1% 0 1%;} .section.swatch-outlines {padding:0;} .swatch-outlines .outlines div.average-man{display: none;} .section-fifty-fifty .block-img img {height: auto;} .padded-top{padding-top:6vw;} .padded-bottom{padding-bottom:6vw;} .padded{padding-top:6vw; padding-bottom:6vw;} .tm-clients p {font-size: 0.9em;} } /* For small screens and phones */ @media screen and (max-width: 760px) { .col1,.col2,.col3 {float:none;} .threecol .colmid { right:auto; /* width of the right column */ } .threecol .colleft,.threecol .col1, .threecol .col2, .page-id-4 .threecol .col1{ right:auto; /* width of the middle column */ width:96%; left:auto; margin-left:2%; margin-right:2%; } .threecol .col3 { display:none; } li.box-1of4{width: 50%;} li.box-2of4{width: 100%;} .tilecloseups li{width:33.3%;} .top-banner{height:250px;} .single-range .entry-title{ line-height: 250px; font-size:40px;} .single-range .entry-title span{line-height:160px;} .range-colours{grid-template-columns: repeat(3, minmax(0, 1fr));} .sharelinks em{display:none;} .entry-header {padding-top:100px; padding-bottom: 30px;} ul .selectitem{display:block;} .page-template-product-feature .entry-header {width:90%;} .fabrication-layout li:nth-child(odd) .fabrication-type li.fabrication-type-header ul, .fabrication-layout li:nth-child(even) .fabrication-type li.fabrication-type-header ul{transform: translate(0%,0%); margin-top: 0px;} .fabrication-type li:nth-child(1) ul, .fabrication-type li:nth-child(3) ul{margin: 0} .pswp__img {border-radius: 0px;} .fabrication-type-header{position: relative; height: auto;} .fabrication-type li ul, .fabrication-type li.fabrication-type-header ul{width:100%;} .with-banner-cta-first{height: calc(100vh - 180px);} figcaption, .page-template-mix-it-fabrication .all-tiles .label, .tax-bespoke_classification .all-tiles .labels, div.wp-caption .wp-caption-text {padding: 1em;} .wireframes li{width:50%;} .frame-sizes{bottom:42px;} .results-colours li em {display: none;} .call-to-action p, .entry-header p{font-size:18px;} .call-to-action h6, .entry-header h2{font-size:22px;} .col1, .col2 {padding: 20px 0; } blockquote{margin:10px 0 0 0; padding:10px 0 10px 35px; font-size:20px;} .col2 aside, .col2 .widget-meta-data-filter{max-width:100%;} .col2 #nav_menu-2 {display:none;} ul.lcp_catlist, ul.page-list {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;} .follow-on-links a{display:block; line-height:30px;} .follow-on-links{padding-bottom:20px;} .inside-showrooms .thecaption h3{font-size:15px; line-height:40px;} .threebox ul li{margin:10px auto; display:block; width:100%;} .grout-swatch{width: 50%;} .spotlight ul li{margin-bottom:60px;} .tile-selections .selection-header{width:100%; margin-top:180px;} .tile-selections li, .tile-selections li:nth-child(even){background-position: center -60px; background-size:auto 300px;} .tile-selections h3{padding:20px 0 0 0; line-height:27px; font-size:25px;} .tile-selections h4{padding:0 0 10px 0;} li.tile-finder, li:nth-child(even).tile-finder{background:#222 url(images/tile-icon.png) no-repeat center 30px; background-size:80px; } li.tile-finder .selection-header{width:100%; margin-top:140px;} .about-porcelain .selection-header{margin-top:0px;} .about-porcelain h3{line-height:23px; font-size:20px; padding:20px;} .about-porcelain li:nth-child(even), .about-porcelain li:nth-child(odd){background-position: center top; background-size:auto 245px !important;} .col2 li.tile-finder .selection-header{margin-top:0px;} .wpcf7 ul li.halfwidth{width:100%;} .wpcf7 ul.feedback-form label{min-width:120px; line-height:2;} .article-content p{margin-right:7%;} .showcontact .col1{text-align:center;} .splitpageright, .splitpageleft{width:98%; float:none; margin:0 1%;} .outlines{width: 96vw; height: 96vw;} .single-tiles > li {margin: 20px 0 0 0;} .landingpage.single-range .single-tiles > li {width: 98%;} .tax-group_classification .all-tiles ul li, .page-template-landing-page .all-tiles ul li {width: 48%;} .mobilesize{display:inline;} .desktopsize{display:none;} .range-benefits{display:none;} .single-range .entry-content{min-height:200px; } .md-content h3{font-size:14px;} .md-content > div img{width:100% !important; height:160% !important;} .md-content > div {padding: 0 10px 0 10px;border-bottom:10px solid #222;} .single-project article {border-left:none;border-right:none;} ul.products-list li, ul.tm-followon-list li {width: 49.5%;} ul.products-list li:nth-child(2n), .tm-followon-list li:nth-child(2n) {margin-right: 0;} .tm-benefits-list h3, .tm-followon-list h3{font-size:calc(10px + 0.5vw);} .block-text p { max-width: 760px !important; } .col2 h3{text-align:center;} .col2 ul li{line-height:30px; display:block; margin:0; padding:5px 0; text-align:center;} .col2 ul li a{display:block; border-bottom:1px solid #eee;} .contrast .col2 a{color:#666;} .footer ul li.toplink {display: block;} .TextBoxAP{width:auto; min-width:100px; margin-left:0; padding:10px;} .TextBoxAP h1{font-size:28px;} .TextBoxAP h2{font-size:23px;} .TextBoxAP p{font-size:17px;} .footer ul{margin:0; padding:0; font-size: 13px} .footer ul li{line-height:40px; display:block; margin:0px; padding:5px 0; text-align:center;} .footer ul li a{display:block;} .parallax-columns .parallax-column, .parallax-columns{position: unset;} .parallax-column-01, .parallax-column-03{display:none;} .product-banners{display: block;} .product-banner-01, .product-banner-03{width:100%} .product-banner-02{margin:-80px 10%; width: 80%;} #menu-item-2676, .home #menu-item-749{display:none;} .photo-gallery{display: none;} .prevnextlinks {width: 48%;} .range-grid{margin:auto;} .range-header p{font-size: 1.2em; text-align: left;} .page-template-mix-it-filter-page .control{width:98%; line-height: 34px;} .page-template-mix-it-filter-page .label h3 {font-size:0.7em} .range-attributes li.attribute-type{display: none;} .about-message-01 {min-height: auto; font-size: 5vw; } ul.tm-followon-list.thirdslist li , ul.products-list.fifthslist li{width: 100%;} .tm-clients li img {max-width: 70px;position: relative;bottom: 30px;left: 0%;transform:none;} .tabs .slider, .tabs>ul>li {width: 30%;} .tm-benefits-list h3, .tm-followon-list h3 {white-space: normal;} .tm-controls {transform: scale(0.7); transform-origin: left; white-space: nowrap;} } /* Mobile Landscape and Portrait */ @media only screen and (max-width: 500px) { body {font-size: 1.1em; background-attachment: scroll;} h1 {font-size: 25px;} .mouse-icon-scroll{display:none !important; bottom: 130px;} .ptbodyclass .logo {display:none;} div.logo a{width:60px; background:#000; } #navCart .dropdown-toggle {font-size: 14px;} .videocontainer{display: none;} .dropdown-menu a.btn {font-size: 10px;} .md-modal {top: calc(50% + 0px);} .showrooms li{width: 80%;} .collections-label.animated{width: 180px;} .collections-label a{padding:8px; font-size:0.75em; letter-spacing: 0.1em;} .md-content a.md-close{right: 20px;} .md-content a.btn{right: 150px;} .post-648 .wp-image-5639{float: none; width: 100%; margin: 0 auto;} .about-map-button{display: none !important;} .homenav li a{font-size: 15px; padding:0 6px;} .brochure-list ul li{margin:0 1%;} .brochure-list ul li .brochure{font-size:13px;} .brochure-list ul li h3{letter-spacing: 0.05em;} #map_canvas{height: 250px;} .document-wall li{width:97%;} .range-header {padding: 0%;} //.range-colours{padding: 0%;} .range-colours li em{margin:-5px -5px 10px -5px} .range-header p {padding:2%;} .sharelinks a{font-size:0.6em;} .tileactions a {padding: 0 4px;}visualiser-3d .tileactions .fa {width: 25px;} .box-container, .wireframe-container{ width: 100%; padding:5em 1em;} .wpcf7 ul li.thirdwidth{width:100%;} .search-tiles > li{font-size: 90%;} .tailor-made-container .controls-container, .tax-bespoke_classification .controls-container {position: relative;box-shadow:none;} .controls-container {padding: 0;} .page-template-mix-it-filter-page .control, .page-template-mix-it-fabrication .tailor-made-container .control, .tax-range_classification .control, .tax-bespoke_classification .control {padding: 0em; width: 48%; font-size: 0.4em;} .page-template-mix-it-filter-page .control{width:98%;} .page-template-mix-it-fabrication .tailor-made-container button.control.reset {width: 100%;clear: both;} .tax-range_classification .controls {display: block;} .tm-followon-list li { padding: 2vw } ul.tab-contents-list li {min-width: 31%;} .panel-options .control{padding:0; width: 45%;} .controls legend {text-align: center;font-size: 0.5em;} .control span{display:none;} .controls fieldset, .controls-sort {padding: 0em;} .bespoke-panel table, .specification-table {font-size: 0.6em;} .specification-table td, .specification-table th, .bespoke-panel table td {padding: 2vw 1vw 3vw 1vw;} .tailor-made-container h2, .tm-call-to-action h2 {font-size: 0.8em;} .about-message-01 h2 {font-size: 7vw;} .about-message-02, .about-message-03, .about-message-04, .about-message-05 {padding: 1.5em 2em 2em 2em;font-size: 4.5vw;} .about-message-02, .about-message-03, .about-message-04, .about-message-05 { background-position: left 0px top 160%; background-size: 100% auto; background-repeat: no-repeat; background-image:none; } .about-message-04 {background-position: left bottom; padding:2em; background-image: url(images/about-porcelain-tiles-04.jpg);} .about-message-05{background-image: none; padding:2em;} /*.outlines {transform: scale(0.75); transform-origin: top left;}*/ .quickorder span {display:none;} .quickorder li{margin:0 0.5% 0 0;} .quickorder li:first-child{padding-left:0px;} .quicklook{transform: scale(1);} .quicklook .label h3{transform: scale(1);} .tile-index a {padding:8px;} .subtle strong{padding-top:0;} h3{font-size: 18px;} .label p {font-size: 0.8em;} .tooltip {min-width:100px; width:90%; padding:5%;} .single-range .tooltip p{font-size: 0.8em;} .zone{margin:0 1% 50px 1%;} .range-accordion table tr:hover td{background:none } .range-accordion table tr:hover:nth-child(even) td{background:rgba(255,255,255,0.05); } .range-attributes li {font-size: 0.6em;} .range-attributes li:nth-child(6){display: none;} .single-tile-gallery li{width: 25%;} .single-tile-gallery li:nth-child(5n+1){width: 100%;} .page-id-12986 .entry-title, .wireframe-container h1{font-size: 20px;} li.box-1of4{width: 100%;} .boxbanner img, .portrait img, .landscape img, img.articleimage{background-position: bottom; height: 300px !important;} .homeboxes h2{font-size:16px; line-height: 30px; background-color: rgba(0,0,0,0.4); top:auto; bottom:0; transform: translate(0, 0); -webkit-transform: translate(0, 0);} .homeboxes em{margin:0 auto;} .homeboxes h2 strong{font-size:16px; letter-spacing: 0.3em;} .homeboxes h2 a{padding-top:10px; padding-bottom:15px;} .homeboxes .boxbanner strong{font-size: 25px;} .homeboxes .boxbanner a{color: #fff;} .homeboxes li:nth-child(4){display: none;} .carousel-container li {display: block;} .article-content h2 {font-size: 25px;} ul.support-partners > li {width:100%;} ul.support-partners > li:first-child{margin-right:0%;} .container h2 em{font-size:50px;} .container h2 strong{font-size:15px;} nav#primary-navigation{background:#000} #pageslide { width:100%; background:rgba(0, 0, 0, 1);} .ptbodyclass #pageslide .nav-menu{padding:50px 30px 150px 30px; background:url(images/porcelain-tiles-logo.svg) no-repeat left 30px; background-size:100% auto;} #pageslide ul, #pageslide ul li{font-size:1.00em;} #pageslide ul ul{margin:0px; } #pageslide ul li a{line-height: 60px;} #pageslide ul ul li a{border-top:1px solid #333; line-height: 50px; font-size:1em;} .thetextarea textarea{width:100%;} input[type=text], input[type=email], input[type=tel], select, textarea {width: 100%;} #crafty_postcode_result_display {width: 100%;} } .all-tiles li{width:23%;} .page-template-mix-it-filter-page .all-tiles li{width:18%;} .single-client .all-tiles ul li{width:31.333%;} @media screen and (min-width: 1601px) { .all-tiles li{width:18%;} .page-template-mix-it-filter-page .all-tiles li {width: 14.666%; } } @media screen and (max-width: 1115px) { .all-tiles li{width:31.333%;} .page-template-mix-it-filter-page .all-tiles li{width:23%;} } @media screen and (max-width: 760px) { .all-tiles li, .page-template-mix-it-filter-page .all-tiles li{width: 48%;} .single-client .all-tiles ul li{width:48%;} } @media print{ body {font-size:90%;margin:0;} h1 {font-size: 3em;} .bespokepageleft, .mininav-container, .range-loading, .print-buton, .single-design .site-navigation .nav-background, #navCart, .mobilemenu, .menu-tailormadenav-container .menu, .button, .tm-call-to-action, .call-to-action, .threebox, .footer, .virtual-360{ display:none !important; } .menu-tailormadenav-container{margin-top: 4vw;} .single-design, .bespoke-panel h1 {margin: 0;padding:0;} table, .specification-table, .bespoke-panel table {page-break-inside: avoid; font-size:90%; margin:0;} .specification-table td, .specification-table th, .bespoke-panel table td {padding: 1vw;} .logo{background:black; margin:auto; float: none;} .site-navigation .nav-background, .bespoke-wireframe{background:transparent;} .bespoke-wireframe img {width: 50%;} .sticky{position: relative;} }