/* 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 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, white This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* 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: #1e1e1f url(images/tile-range-bg.jpg); background-attachment: fixed; } 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;} .page-template-tm-single-colour .mininav-container{background: #000;} .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; padding: 0 1.5em; line-height: 2.5em; background: #222; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; 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: 5vw;margin-top:0;} .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), url(images/about-porcelain-tiles-01b.jpg); background-position: right top, left top; background-size: cover; background-repeat: no-repeat, repeat;} .about-message-02{background-image: url(images/about-porcelain-tiles-02.jpg); background-position: right top; 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; font-size: 0.8em; min-height: 130vh; background-image: url(images/about-porcelain-tiles-06.jpg), url(images/about-porcelain-tiles-06b.jpg); background-position: right top, left top; background-size: cover; background-repeat: no-repeat, repeat;} .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 top; background-size: 50%; background-repeat: no-repeat;} .about-message-01,.about-message-06{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 1%; text-align: center; list-style-type: none; padding: 0; display: grid; grid-gap: 1%; row-gap: 20px; position: relative; grid-template-columns: repeat(4, minmax(24%, 1fr)); } .all-tiles ul li{ position: relative; vertical-align: bottom; text-align: center; padding: 0; white-space: nowrap; margin: 0; } /* 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; } .page-template-mix-it-fabrication .all-tiles ul li img { aspect-ratio: 1/2; } .all-tiles ul li.pp-bookmatch img { aspect-ratio: 1/0.98; } li.pp-bookmatch { grid-column: span 2 / span 2; } .page-id-16624 .mix a { font-size: 12px; } .page-template-mix-it-fabrication .mix a.colourlink{font-size:0;} /* End lazy load styles */ .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;} .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;} .lazyload { opacity: 0; } .lazyloading { opacity: 0.5; transition: opacity 300ms; background: url(images/ring-alt.svg) no-repeat scroll center center; } .lazyloaded { opacity: 1; transition: opacity 300ms; } .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:30.33%; 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%;} .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 { list-style: none; margin: 30px auto; padding: 0; min-height: 300px; } .grid li { display: block; float: left; padding: 0%; width: 23%; opacity: 0; margin: 1%; border: none; box-shadow: 0px 2px 5px rgba(0,0,0,0.2); } .grid li.shown, .no-js .grid li, .no-cssanimations .grid li { opacity: 1; } .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; display:block;} .range-colours{max-width: 900px;} .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{max-width: 120px; min-width: 80px; text-align:center; text-transform:uppercase; font-size:10px; line-height:20px; letter-spacing:0.2em; margin:0; padding:0em; display: inline-block; opacity:0;} .results-colours li{ max-width: 150px; text-align:center; text-transform:uppercase; font-size:10px; letter-spacing:0.2em; } .range-attributes li:last-child{border-right:none;margin-right:0;} .loop1 li{width:100%;} .loop2 li{width:50%;} .loop3 li{width:33.3333%;} .loop4 li{width:25%;} .loop5 li{width:20%;} .loop6 li{width:16.66666%;} .loop7 li{width:14.2%;} .loop8 li{width:12.5%;} .loop9 li{width:11.1111%;} .loop10 li{width:10%;} .loop11 li{width:9.09%;} .loop12 li{width:8.3333%;} .loop13 li{width:7.69%;} .loop14 li{width:7.14%;} .loop15 li{width:6.666%;} .tilecloseups.loop6 li, .tilecloseups.loop7 li, .tilecloseups.loop8 li, .tilecloseups.loop9 li, .tilecloseups.loop10 li, .tilecloseups.loop11 li, .tilecloseups.loop12 li, .tilecloseups.loop13 li, .tilecloseups.loop14 li, .tilecloseups.loop15 li, .tilecloseups.loop16 li, .tilecloseups.loop17 li, .tilecloseups.loop18 li, .tilecloseups.loop19 li, .tilecloseups.loop20 li, .tilecloseups.loop21 li, .tilecloseups.loop22 li, .tilecloseups.loop23 li, .tilecloseups.loop24 li, .tilecloseups.loop25 li, .tilecloseups.loop26 li, .tilecloseups.loop27 li, .tilecloseups.loop50 li, .tilecloseups.loop51 li, .tilecloseups.loop52 li, .tilecloseups.loop53 li, .tilecloseups.loop54 li, .tilecloseups.loop55 li, .tilecloseups.loop46 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:5px -5px 0 -5px; max-height:26px; overflow:hidden; display: block;} .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;} .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{ height:400px; width:800px; display:block;} .outlines div{background:rgba(0,0,0,0.2); margin:0 1% 1% 0; float:left; display:inline-block; text-align:center; vertical-align:top; -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;} .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; 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-shadow{position:relative; height: auto; width:230px; margin:20px auto; -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, .page-template-tm-single-colour, .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;} .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 0 1em 0; max-width:400px; width: 60%;} .pp-logo img{margin:auto;} .page-template-tm-single-colour .pswp__top-bar, .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/tm/tailor-made-logo.svg);background-size: 160px; background-repeat: no-repeat; background-position: center;} .tm-grad {background: linear-gradient(35deg, rgb(150, 135, 98) 0%,rgb(232, 214, 168) 25%,rgb(150, 135, 98) 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,246,241);} 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 #968762;} p.midsize{font-size:1.25em; font-family:'Futura PT W01 Demi'; line-height:1.35em;} .coloured-text{color: #968762;} 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: #968762;} .tm-section hr{background: none; border: none; height: 1px; border-top: 1px solid #968762; 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';} .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,246,241);} .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: clamp(0.65rem, 1rem, 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: 0; right: 0;} .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;} .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 #c7b68c;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:#c7b68c;} .parallax-columns h2:before {top: -15px;} a.tm-round-btn{ background: rgba(255,255,255,1); color: #c7b68c; border: 2px solid #c7b68c; 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:#968762; background: rgba(0,0,0,0.05); border-color: #968762;} .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:#968762; text-align:left; border-bottom: 1px solid #cdc4ad;} .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 #cdc4ad; text-align:left; } .specification-table .span-row td{border-top:1px solid #cdc4ad;} .specification-table .span-row td{border-left:1px solid #cdc4ad;} .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: #968762;} .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.tab-contents-list li.bookmatchswatch{min-width:46%;} 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,246,241);} 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: #968762; position: absolute; bottom: -25px; left: 50%; transform: translate(-50%, 10px);} .tm-clients h3 { font-family: 'Futura PT W01 Demi',arial,sans-serif;} .tm-clients h3:after { border-bottom: 2px solid #968762; display: block; width: 40%; height: 15px; content: " "; margin: auto auto -10px; } .tm-clients p{margin: 0 auto; font-size:0.9em; line-height:1.3;} .tm-clients a { color: #968762; 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,246,241);} ul.tab-contents-list li img{display: block;} .tm-colour-swatches li img {object-fit: cover; width:100%; aspect-ratio: 1 / 2;} .tm-colour-swatches li.bookmatchswatch img {aspect-ratio: 1 / 1;} .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: 0 1em; line-height:50px; 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; line-height:normal;} .label h3 + p{line-height:normal;} figcaption { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.6em; text-align: center; line-height:50px; margin-top: 0em; padding: 0 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,246,241); 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,246,241); } .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; } /* End Fabrication Styles */ /* Landing page styles */ .box-container{background: rgb(247,246,241); 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;} .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/tm-platform-plus-logo-03.svg) no-repeat; background-size: 250px auto; background-position: center 90%;} .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;} .accreditations{margin:auto; padding: 2em 0 0 0; width:100%; max-width: 650px; align-items: center; display: flex; flex-wrap: wrap; opacity: 0.8; transition: all 0.5s ease-in-out;} .accreditation{width:37%;} .accreditation.sbid{width:26%;padding-left: 1%;} .accreditation img{width:100%;} .accreditation-intro{text-align:left; font-size: 12px; line-height: 1.1em; letter-spacing: 0.2em; font-weight: 100; text-transform: uppercase;color: #a2a2a2; font-family: 'Futura PT W01 Demi', arial,sans-serif;} .accreditation-intro p{margin: 0 0 0 1em;} .accreditations:hover{opacity:1;} .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=1248'); background-size: cover; } .homeboxes li:nth-child(2) img{background-image: url('images/homeboxes/marble-square-full.jpg?v=1248'); background-size: cover; background-position: center bottom;} .homeboxes li:nth-child(3) img{background-image: url('images/homeboxes/stone-landscape-full.jpg?v=1248'); 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=1248'); background-size: cover;background-position: center bottom;} .homeboxes li:nth-child(8) img{background-image: url('images/homeboxes/fabrication-landscape-full.jpg?v=1248'); background-size: cover;} .homeboxes li:nth-child(7) img{background-image: url('images/homeboxes/concrete-square-full.jpg?v=1248'); background-size: cover; background-position: left bottom;} .homeboxes li:nth-child(6) img{background-image: url('images/homeboxes/lifestyle-landscape-full.jpg?v=1248'); background-size: cover;} .homeboxes li:nth-child(9) img{background-image: url('images/homeboxes/bookmatched-square-full.jpg?v=1248'); background-size: cover; background-position: center bottom;} .homeboxes li:nth-child(10) img{background-image: url('images/homeboxes/tailor-made-square-full.gif?v=1248'); background-size: cover; } .homeboxes li:nth-child(11) img{background-image: url('images/homeboxes/full-body-square-full.jpg?v=1248'); background-size: cover;} .homeboxes li:nth-child(12) img{background-image: url('images/homeboxes/outside-space-02.jpg?v=1248'); background-size: cover;} .homeboxes li:nth-child(13) img{background-image: url('images/homeboxes/showrooms-square-full.jpg?v=1248'); background-size: cover;} .homeboxes li:nth-child(14) img{background-image: url('images/homeboxes/contact-square-full.jpg?v=1248'); 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 ul{background: rgba(255,255,255,1);} .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%; display:none;} .controls fieldset{border: 1px solid transparent; padding:0 1vw 0 1vw;} .control{display: inline-block; line-height: 40px; min-height:0; margin: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; white-space: nowrap; width:auto; overflow:hidden; } .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,246,241);} .tailor-made-container .mixitup-control-active {color: #fff; background:#968762; border:1px solid #968762;} h1.hashTitle {text-transform: capitalize;} .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{display:grid;grid-template-columns: repeat(4, minmax(24%, 1fr));grid-gap: 1%; max-width:500px; padding:0;} .tailor-made-container .tm-controls .control {padding: 1vh 0; 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: 2em 2em 2em 2em;} .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%; width:28%; min-width: 100px;} .alt-finishes.finishes-1 li{width:38%;} .alt-finishes.finishes-3 li{width:18%;} .alt-finishes li a, .single-tile .order-button .btn{line-height: 32px; text-transform: uppercase; font-size: 13px; 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: #b0a486; /*rgb(247,246,241); To change */ 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: #968762; white-space: nowrap; overflow: hidden; color: #fff !important; border: none !important;} .tm-btn-reverse {background: rgb(247,246,241); color: #968762 !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: 49px; right: 50%; display: block; background-color: rgb(247,246,241); 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 2%; 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;} .range-colours li {font-size: 12px;} .grid li, .prevnextlinks{width:18%;} .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%; } .about-message-01, .about-message-06 {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%;} .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 #968762;} 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%;} .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;} .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;} .grid li, .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;} } /* 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.loop1 li, .tilecloseups.loop2 li, .tilecloseups.loop3 li, .tilecloseups.loop4 li, .tilecloseups.loop5 li, .tilecloseups.loop6 li, .tilecloseups.loop7 li, .tilecloseups.loop8 li, .tilecloseups.loop9 li, .tilecloseups.loop10 li, .tilecloseups.loop11 li, .tilecloseups.loop12 li, .tilecloseups.loop13 li, .tilecloseups.loop14 li, .tilecloseups.loop15 li, .tilecloseups.loop16 li, .tilecloseups.loop17 li, .tilecloseups.loop18 li, .tilecloseups.loop19 li, .tilecloseups.loop20 li, .tilecloseups.loop21 li, .tilecloseups.loop22 li, .tilecloseups.loop23 li, .tilecloseups.loop24 li, .tilecloseups.loop25 li, .tilecloseups.loop26 li, .tilecloseups.loop27 li, .tilecloseups.loop46 li {width:25%;} .top-banner{height:250px;} .single-range .entry-title{ line-height: 250px; font-size:40px;} .single-range .entry-title span{line-height:160px;} .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} .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);} .page-template-mix-it-fabrication .all-tiles .label, .tax-bespoke_classification .all-tiles .labels {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;} .accreditations {padding: 2em 2em 0 2em; max-width: 450px; width:auto;} .accreditation.biid {width: 60%;} .accreditation-intro {width: 100%;} .accreditation.sbid {width: 40%; padding-left:0;} .accreditation-intro p {margin: 0 0 1em 0.5em;} .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%;} .single-tiles > li {margin: 20px 0 0 0;} .landingpage.single-range .single-tiles > li {width: 98%;} .mobilesize{display:inline;} .desktopsize{display:none;} .control{ font-size: 1.5vw;} .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;} .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;} .grid li, .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: 25px;left: 0%;transform:none;} .tabs .slider, .tabs>ul>li {width: 30%;} .tm-benefits-list h3, .tm-followon-list h3 {white-space: normal;} } /* 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, .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 } .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 83% 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; } .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;} .tilecloseups.loop1 li, .tilecloseups.loop2 li, .tilecloseups.loop3 li, .tilecloseups.loop4 li, .tilecloseups.loop5 li, .tilecloseups.loop6 li, .tilecloseups.loop7 li, .tilecloseups.loop8 li, .tilecloseups.loop9 li, .tilecloseups.loop10 li, .tilecloseups.loop11 li, .tilecloseups.loop12 li, .tilecloseups.loop13 li, .tilecloseups.loop14 li, .tilecloseups.loop15 li, .tilecloseups.loop16 li, .tilecloseups.loop17 li, .tilecloseups.loop18 li, .tilecloseups.loop19 li, .tilecloseups.loop20 li, .tilecloseups.loop21 li, .tilecloseups.loop22 li, .tilecloseups.loop23 li, .tilecloseups.loop24 li, .tilecloseups.loop25 li, .tilecloseups.loop26 li, .tilecloseups.loop27 li, .tilecloseups.loop46 li{width:33.333%;} .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;} .range-colours li {max-width: 300px;} .loop4 li, .loop5 li, .loop6 li, .loop7 li, .loop8 li, .loop9 li, .loop10 li, .loop11 li, .loop12 li, .loop13 li, .loop14 li, .loop15 li{width:25%;} .single-tile-gallery li{width: 33.3333%;} .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{height: 300px !important; background-position: bottom;} .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%;} } @media screen and (min-width: 1601px) { .all-tiles ul{grid-template-columns: repeat(6, minmax(15%, 1fr));} } @media screen and (max-width: 760px) { .all-tiles ul{grid-template-columns: repeat(2, minmax(48%, 1fr));} } @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;} }