/* tfa page layout styles */

body {
	color: #000 !important;
	background: #fff;
}


.call-to-action {
	background: black;
}

.footer {
	margin-bottom: 4em;
}

.ptbodyclass .logo a {
	/* background: url(/wp-content/themes/porcelain-tiles-2016/images/porcelain-tiles-logo-black.svg) no-repeat center center; */
}

div#main {
	border-left: 60px solid #000;
	border-top: 50px solid #000;
}

.wrapper {
	max-width: none;
}


#navCart .dropdown-toggle,
.mininav-container li a {
	/* color: #000; */
}

.tfa-content {
	padding: 15px 1vw;
	background: #eaeaea;
}

.tfa-mixitup-wrapper:after {
	content: " ";
	display: block;
	clear: both;
	height: 3em;
}

.tile-data-links,
.tile-data-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 900px;
	margin: auto;
}

.tfa-textlink {
	color: #333;
}

.tile-data-links {
	padding: 1vw;
}

.tile-data-actions {
	padding: 2vw 0 0 0;
}

.tile-data-buttons a,
.tile-data-actions a,
.sample-quick-search-container .button-style {
	display: inline-block;
	margin: 0.2em 0;
	padding: 0;
	line-height: 4em;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-right: 0px;
	color: #fff;
	text-decoration: none;
	background: rgba(0, 0, 0, 1);
	white-space: nowrap;
	text-transform: uppercase;
	font-size: 0.6em;
	letter-spacing: 0.2em;
	font-family: 'Futura PT W01 Book';
	min-width: 100px;
	transition: 0.5s;
	flex-grow: 1;
}

.tfa-mixitup .tile-data-buttons a {
	background: rgba(0, 0, 0, 0.5);
}

.tile-data-links-level-two a {
	background: rgba(0, 0, 0, 0.3);
}

.tile-data-links-level-three a {
	background: rgba(0, 0, 0, 0.2);
}

.sample-quick-search-container .button-style {
	border: none;
	margin-top: 1.5em;
	border-radius: 2em;
	background: rgba(0, 0, 0, 0.2);
	transition: 0.5s;
}

.sample-quick-search-container .button-style.active {
	background: rgba(0, 0, 0, 1);
}

.fixed-controls {
	position: fixed;
	z-index: 2;
	bottom: 0px;
	width: 100%;
	left: 0;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	background-color: rgba(255, 255, 255, 0.72);
}

.tfa-top-controls {
	padding: 0.5em;
}

@keyframes fadeInAnimation {
	0% {
		background: rgb(113 164 152);
	}

	100% {
		background-color: rgba(255, 255, 255, 0.72);
	}
}


a.show-filters.hidemenu {
	background: rgba(0, 0, 0, 1);
}


a.view-selected.items-selected {
	background: rgb(113 164 152);
}

.fixed-controls.items-selected {
	animation: fadeInAnimation ease 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.tfa-top-controls a:nth-child(1),
.tile-data-links a:nth-child(1),
.tile-data-buttons a:nth-child(1) {
	border-top-left-radius: 2em;
	border-bottom-left-radius: 2em;
}


.tfa-top-controls a:last-child,
.tile-data-links a:last-child,
.tile-data-buttons a:last-child {
	border-top-right-radius: 2em;
	border-bottom-right-radius: 2em;
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.tfa-mixitup-list {
	overflow: hidden;
}

.tfa-mixitup-filters,
.tfa-multi-view-controls,
.tfa-tile-intro {
	width: 18vw;
	margin: 0 0 3vw 0;
	background: rgba(255, 255, 255, 0.5);
	padding: 2vw 1em;
	border-radius: 6px;
	transition: 0.5s;
	position: absolute;
}

.tfa-tile-intro {
	background: none;
}

.hidemenu .tfa-mixitup-filters {
	width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
}

.tfa-mixitup-list,
.tfa-multi-view,
.tfa-tile-tabs-container {
	padding-left: 19vw;
	transition: 0.5s;
	min-height: 140vh;
}

.hidemenu .tfa-mixitup-list {
	padding-left: 0vw;
}

/* tile list */

.tfa-tile-list {
	margin: 0;
	padding: 0;
	text-align: justify;
	display: grid;
	grid-gap: 1vw;
	align-items: start;
	grid-template-columns: repeat(4, 1fr);
	position: relative;
	justify-content: start;

}

.tfa-tile-list:not(:has(.show)):before {
	content: "There are no products that match with the filters you have selected. Click Reset Filters or select different filter criteria.";
	display: block;
	text-align: center;
	width: 100%;
	position: absolute;
	font-size: 30px;
	padding: 10%;
	z-index: 2;
	color: #333;
	left: 0;
	top: 0;
}

.tfa-tile-list>li {
	position: relative;
	text-align: left;
	overflow: hidden;
	line-height: 0;
	padding: 0.5vw;
	background: #fff;
	border-radius: 6px;

}

.tfa-tile-list>li img {
	aspect-ratio: 1 / 1;
	border-radius: 3px;
	width: 100%;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeOutOpacity {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.5;
	}
}


/** Sorting transition **/
.tile-finder-list>li {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.25s;
}

/* Hide effect (fade out and shrink) */
.tile-finder-list>li.hide {
	opacity: 0;
	animation-name: fadeOutOpacity;
	pointer-events: none;
	/* Prevent interaction with hidden items */
}

/* Show effect (fade in and slide up) */
.tile-finder-list>li.show {
	opacity: 1;
	animation-name: fadeInOpacity;
}

.tile-finder-list>li.displaynoneclass {
	display: none;
}

/** Reset button styles */
.clear-all {
	pointer-events: none;
}

.clear-all.active {
	pointer-events: unset;
}

.clear-all.active:hover {

	cursor: pointer;
}

.tfa-tile-list .select-box {
	position: absolute;
	line-height: 3em;
	padding: 0 0.75em 0 0;
	background: #fff;
	color: #000;
	text-transform: uppercase;
	font-size: 0.7em;
	letter-spacing: 0.1em;
	transition: 0.5s;
}

.tfa-tile-list .select-box:has(input[type=checkbox]:checked) {
	background: #71a498;
	color: #fff;
}

.select-box input[type=checkbox] {
	position: relative;
	cursor: pointer;
	margin-right: 15px;

}

.select-box input[type=checkbox]:before {
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0;
	left: 0;
	background-color: #fff;
	border: 1px solid #71a498;
	border-radius: 2px;
}

.select-box input[type=checkbox]:checked:before {
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0;
	left: 0;
	background-color: #71a498;
	border: #71a498;
}

.select-box input[type=checkbox]:checked:after {
	content: "";
	display: block;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 3px;
	left: 7px;
}

.select-box label {
	display: block;
	padding-right: 0.75em;
}

.tfa-tile-list a {
	color: #333 !important;
}

.colourname {
	background: #fff;
	text-align: center;
	line-height: 1.1em;
	padding: 0.5em 0 0 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

span.colourname-post-range {
	display: block;
	color: rgba(0, 0, 0, 0.5);
	text-transform: uppercase;
	font-size: small;
	letter-spacing: 0.1em;
}

span.colourname-post-summary {
	color: rgba(0, 0, 0, 0.5);
	font-size: smaller;
}


/* tfa-filters */


.filters-loading {
	background: rgba(100, 100, 100, 0.5);
	background-repeat: no-repeat, repeat;
	background-position: center;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	height: 100%;
	width: 100%;
	border-radius: 6px;
	transition: 1s;
	display: none;
}

.filters-loading:before {
	content: "Filtering...";
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
	font-size: x-large;
	color: #fff;
}

.filters-loading.active {
	display: block;
}

@keyframes fadeOutAnimation {
	0% {
		opacity: 1;
		visibility: visible;
	}

	100% {
		opacity: 0;
		visibility: hidden;
	}
}

.tfa-mixitup-filters fieldset {
	border: none;
	padding: 0 0 1em 0;
	margin: 0;
	position: relative;
}


.control-group button.tfa-control {
	background: none;
	color: #333;
	text-align: left;
	letter-spacing: 0.07em;
	text-transform: initial;
	line-height: 30px;
	padding: 0;
	margin: 0;
	font-size: 1em;
	font-weight: 400;
	position: relative;
	border: none;
	white-space: nowrap;
}

.control-group button.tfa-control:before {
	content: " ";
	display: inline-block;
	width: 16px;
	height: 16px;
	/* border: 1px solid #999; */
	position: relative;
	left: 0;
	vertical-align: top;
	top: 7px;
	margin: 0 15px 0 19px;
	border-radius: 50%;
	background: #dadad9;
}

.control-group button.tfa-control:after {
	display: inline-block;
	position: absolute;
	width: 10px;
	height: 10px;
	vertical-align: top;
	left: 22px;
	top: 10px;
	font-size: 31px;
	background: none;
	border-radius: 50%;
	border: 5px solid #000;
}

.control-group button.mixitup-control-active:after {
	content: " ";
}

.control-group button[filter-name='filter-full-body'],
.control-group button[filter-name='filter-3280-x-770'],
.control-group button[filter-name='filter-327-x-327'],
.control-group button[filter-name='filter-750-x-375'],
.control-group button[filter-name='filter-marble-slabs'],
.control-group button[filter-name='filter-stone-slabs'],
.control-group button[filter-name='filter-concrete-slabs'],
.control-group button[filter-name='filter-wood-slabs'],
.control-group button[filter-name='filter-mother-of-pearl'],
.control-group button[filter-name='filter-vogue'],
.control-group button[filter-name='filter-bohemian'],
.control-group button[filter-name='filter-4mm'],
.control-group button[filter-name='filter-2mm'],
.control-group button[filter-name='filter-4d-slabs'],
.control-group button[filter-name='filter-slabs'] {
	display: none;
}

fieldset[data-filter-group='r_rating']:after,
fieldset[data-filter-group='finish']:after,
fieldset[data-filter-group='pp_collection']:after {
	text-align: left;
	display: block;
	padding: 1vw 1vw 0;
}

fieldset[data-filter-group='r_rating']:after {
	content: "The 'R' Rating is a ranking given to floor tiles to show their slip resistance. R11 has the highest slip resistance. Note that Polished finish does not have a slip rating.";
}

fieldset[data-filter-group='finish']:after {
	content: "Honed has a satin-like surface. Grip finish tiles offer a highly slip-resistant surface for external flooring. Structured finish means that the face of the tile has a textured surface. ";
}

fieldset[data-filter-group='pp_collection']:after {
	content: "Large format slabs in 12mm, 20mm and 6mm thicknesses. Use filters to find large format slabs for specification on feature walls, surface cladding and Now Imagine fabrication projects.";
}


.control-group[data-filter-group="shade"] {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 3vw 10px;
	padding: 1em 0 2em 0;
	justify-items: center;
}

.control-group[data-filter-group="shade"] button.tfa-control {
	padding: 0;
	margin: 0;
	position: relative;
	border: none;
	white-space: nowrap;
	font-size: 0px;
	width: 30px;
}

.control-group[data-filter-group="shade"] button.tfa-control:before {
	width: 30px;
	height: 30px;
	border: none;
	left: 0;
	top: 0px;
	margin: 0;
}

.control-group[data-filter-group="shade"] button.tfa-control:after {
	width: 42px;
	height: 42px;
	vertical-align: top;
	left: -6px;
	top: -6px;
	border: 5px solid #000;
}

.control-group button.tfa-control[toggle-btn="black"]:before {
	background: #363636;
}

.control-group button.tfa-control[toggle-btn="blue"]:before {
	background: #589acf;
}

.control-group button.tfa-control[toggle-btn="brown"]:before {
	background: #a28269;
}

.control-group button.tfa-control[toggle-btn="cream"]:before {
	background: #dfd8b5;
}

.control-group button.tfa-control[toggle-btn="green"]:before {
	background: #72ac35;
}

.control-group button.tfa-control[toggle-btn="grey"]:before {
	background: #b8b8b8;
}

.control-group button.tfa-control[toggle-btn="pink"]:before {
	background: #ffdbdb;
}

.control-group button.tfa-control[toggle-btn="tan"]:before {
	background: #e7bf78;
}

.control-group button.tfa-control[toggle-btn="white"]:before {
	background: #ffffff;
	border: 1px solid #000;
}

.control-group button.tfa-control[toggle-btn="coloured"]:before {
	background: linear-gradient(90deg, rgba(201, 109, 154, 1) 0%, rgba(202, 179, 255, 1) 0%, rgba(252, 252, 252, 1) 20%, rgba(158, 248, 255, 1) 40%, rgba(255, 171, 150, 1) 60%, rgba(255, 255, 255, 1) 80%, rgba(255, 186, 169, 1) 100%);
}


.control-group[data-filter-group="pp_collection"] button.tfa-control  {
    text-transform:uppercase;
}

/* accordian */

.tfa-filter-accordion {
	border-radius: 6px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.025);
}

.tfa-filter-accordion>h3 {
	color: #333;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	font-family: 'Futura PT W01 Demi', sans-serif;
	text-align: left;
	outline: none;
	letter-spacing: 0.1em;
	line-height: 50px;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0 1% 0 30px;
	margin: 0;
	cursor: pointer;
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 1);
	font-size: 0.9em;
	white-space: nowrap;

}

.tfa-filter-accordion>h3:first-child {
	border-top: none;
}

.tfa-filter-accordion h3.ui-state-default:after {
	color: #333;
	content: "\f0d7";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	font-size: 18px;
	line-height: 10px;
	padding-right: 0;
	position: absolute;
	top: 18px;
	left: 10px;
	transition: 0.5s;
	width: 10px;
	height: 10px;
	right: unset;
	transform: rotate(-90deg);
	transform-origin: center;
}

.tfa-filter-accordion h3.ui-state-active:after {
	transform: rotate(0deg);
}

.tfa-filter-accordion .ui-accordion-content {
	max-height: 70vh;
	overflow: scroll;
}

.ui-accordion-header:has(+ .ui-accordion-content .mixitup-control-active)::before {
	content: "\f058";
	font-family: FontAwesome;
	color: #000;
	position: absolute;
	right: 0.5em;
	font-size: 1.2em;
}


.sample-quick-search-container .live-filter {
	background: rgba(0, 0, 0, 0.1);
	border: none;
	padding: 0 0 0 38px;
	line-height: 3em;
	text-overflow: ellipsis;
}

.sample-quick-search-container .control-group:before {
	content: "\f002";
	position: absolute;
	font-family: 'FontAwesome';
	line-height: 2.75em;
	left: 14px;
	color: rgba(0, 0, 0, 0.3);
}

/* quick view page styles */

.single-tile-quickview {}

.tfa-tile-intro {
	padding: 0em;
	display: flex;
	flex-direction: column;
}


.tile-data-titles {
	text-align: center;
	background: rgba(255, 255, 255, 0.5);
	border-top-right-radius: 6px;
	border-top-left-radius: 6px;
	padding: 3vw 0;
}


h2.tile-title-colour {
	font-family: 'Futura PT W01 Demi', sans-serif;
	margin: 0 auto 1em 0;
	line-height: 1.3;
	font-size: 24px;
	letter-spacing: 0em;
}

.tfa-error-message {
	letter-spacing: normal;
}

.tfa-error-message a {
	display: inline-block;
	background: #000;
	border-radius: 1.25em;
	font-size: smaller;
	line-height: 2.5em;
	color: #fff;
	text-decoration: none;
	padding: 0 1em;
	margin-top: 1em;
}

h2.tile-title-colour span {
	font-family: 'Futura PT W01 Book', sans-serif;
	display: block;
	color: rgba(0, 0, 0, 0.5);
	text-transform: uppercase;
	font-size: small;
	letter-spacing: 0.15em;
	padding-top: 0.5em;
}

span.result-count {
	position: absolute;
	display: inline !important;
	margin-left: 0.5em;
	padding-top: 0.75em !important;
}

.tile-details h4 {
	font-family: 'Futura PT W01 Demi';
	font-size: 18px;
}

.tile-title-finish {
	text-transform: capitalize;
}

em.tile-title-finish:before {
	content: "- ";
}

.tfa-tile-intro .my-gallery {
	margin: 0;
	padding: 0.5em 0;
	list-style-type: none;
	font-size: 0;
}

.tfa-tile-intro .my-gallery figcaption {
	display: none;
}

#qrcode {
	display: block;
	font-size: 0;
}

.pdfimage img {
	width: 100%;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	margin: 0;
	cursor: zoom-in;
	aspect-ratio: 1 / 1;
}

#qrcode img {
	margin: auto;
	width: 120px;
	height: 120px;
}


.tfa-date-stamp {
	font-size: small;
	padding-top: 1em;
}

.tfa-tile-tabs-container {

	display: flex;
}

.finish-tabs {
	width: 100%;
}

.tab-buttons {
	display: flex;
	justify-content: flex-start;
	position: relative;
	top: 3px;
	align-content: flex-end;
	align-items: flex-end;
}


.tab {
	display: none;
}

.tab.active {
	display: block;
}


.tab-buttons div {
	margin-right: 1%;
	margin-top: -3px;
	border-bottom: 3px solid #fff;
	line-height: 3em;
	background: #d3d3d3;
	border-top-right-radius: 6px;
	border-top-left-radius: 6px;
	flex-grow: 1;
	max-width: 40%;
}

.tab-buttons .tab-button.active {

	background: white;
	line-height: 3.25em;
}

.finish-tabs-inner {
	border: 1px solid #fff;
	background: white;
	border-radius: 6px;
}

.tile-details {
	padding: 0 4vw;
}

table.sizetablehading {
	display: none;
}

.tfa-table {
	border-collapse: collapse;
	border: 1px solid #bbb;
	width: 100%;
	font-size: 0.8em;
	line-height: 1.2;

	text-align: left;
}

.tfa-table .tfa-table-firstrow th {
	background: #bbb;
	color: #fff;
}

.tfa-table td,
.tfa-table th {
	padding: 0.4em 0.5em;
	border: none;
	border-right: 0;
}

.tfa-table th {
	font-weight: 100;
}

.tfa-table th:first-child {
	width: 30%;
}

.tfa-table.tfa-table-certification th:first-child {
	text-align: center;
}

.tfa-table tr:nth-child(odd) {
	background-color: #efefef;
}

.tfa-table .cert-icon {
	width: 130px;
}

span.tfa-variation-rating-V1:before {
	content: " (Uniform Appearance)";
}

span.tfa-variation-rating-V2:before {
	content: " (Slight Variation)";
}

span.tfa-variation-rating-V3:before {
	content: " (Moderate Variation)";
}

span.tfa-variation-rating-V4:before {
	content: " (Substantial Variation)";
}

span.tfa-slip-rating-R9:before {
	content: "(Minimal)";
}

span.tfa-slip-rating-R10:before {
	content: "(Normal)";
}

span.tfa-slip-rating-R11:before {
	content: "(Good)";
}

span.tfa-slip-rating-R12:before {
	content: "(Good)";
}

span.tfa-slip-rating-R13:before {
	content: "(Very High)";
}

.outlines {

	text-align: center !important;
	margin: auto;
}

.outlines div {
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: unset !important;
	margin: 0 1% 1% 0 !important;
	vertical-align: top !important;
	box-shadow: unset !important;
}

.outlines-label {
	text-transform: unset !important;
	font-size: 0.7em !important;
	text-align: left !important;
	margin: 0 !important;
	width: 1px !important;
	text-shadow: unset !important;
	white-space: nowrap;
}

.outlines div.average-man {
	border: none;
}

p.outlines-label:after {
	content: "mm";
}


/* native share pop up */

.tfa-page.is-open:after {
	background: rgba(0, 0, 0, 0.5);
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
	position: fixed;
	top: 0px;
}


.native-share {
	display: block;
	position: relative;
	width: 100%;
	text-align: center;
}

.share-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.share-dialog {
	width: 90%;
	max-width: 700px;
	z-index: -1;
	padding: 4vw;
	background-color: #fff;
	color: #000;
	opacity: 0;
	transition: all 0.5s ease;
	visibility: hidden;
	border-radius: 6px;
}

.share-dialog h2 {
	margin: 0 auto 0.75em auto;
}

.share-dialog.is-open {
	opacity: 1;
	z-index: 2;
	visibility: visible;
}

.share-dialog .share-close-button {
	color: #000;
	transform: scale(1.5);
	transform-origin: right top;
	position: absolute;
	right: 5%;
	top: 5%;
}


.share-dialog header {
	display: flex;
	justify-content: space-between;
}

.targets {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	column-gap: 0.5em;
}

.share-link {
	display: flex;
	flex-direction: column-reverse;
}


.share-link-url input {
	pointer-events: none;
	background: none !important;
	border: none !important;
	appearance: none;
	line-height: 2.5em;
	padding: 0 !important;
	margin: 0 !important;
}

.share-link-tooltip {
	position: relative;
}


.share-link-tooltip .tooltiptext {
	visibility: hidden;
	width: 140px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 110%;
	left: 50%;
	margin-left: -75px;
	opacity: 0;
	transition: opacity 0.3s;
	text-transform: initial;
	letter-spacing: normal;
}

.share-link-tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.share-link-tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.share-dialog .button,
.copy-link {
	-webkit-appearance: none;
	border: none;
	background: #000;
	line-height: 3em;
	white-space: nowrap;
	text-align: center;
	padding: 0;
	display: block;
	width: 100%;
	margin: 0.5em auto;
	cursor: pointer;
	color: #fff;
	transition: 0.3s;
	border: none;
	border-radius: 1.5em;
	text-decoration: none;
}

.copy-link {
	background: #ccc;
	color: #000;
}

.share-close-button {
	cursor: pointer;
}

/** Table appearing, not sure why. Hiding with CSS for now */
.sizetablehading {
	display: none;
}

/* end native share pop up */


/* multi tile page styles */


/* Hidden element to construct custom drag preview */
#drag-preview {
	position: absolute;
	top: -10000px;
	left: -10000px;
	pointer-events: none;
}

.preview-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fff;
	color: black;
	max-width: 200px;
	padding: 0.5vw;
	border-radius: 6px;
}

.preview-container img {
	aspect-ratio: 1/1;
}


.preview-container p {
	margin: 0;
	font-size: 14px;
}

.reorder-remove {
	position: absolute;
	display: flex;
	justify-content: space-between;
	color: #fff;
	flex-direction: row;
	width: 93%;
	padding: 0.75vw;
	font-size: 0.8em;
}

.fa-trash {
	cursor: cell;
}

.fa-arrows-up-down-left-right {
	cursor: move;
}

@media screen and (max-width: 1700px) {

	.tfa-mixitup-filters,
	.tfa-multi-view-controls,
	.tfa-tile-intro {
		width: 24vw;
	}

	.tfa-mixitup-list,
	.tfa-multi-view,
	.tfa-tile-tabs-container {
		padding-left: 25vw;
	}

	.tfa-tile-list {
		grid-template-columns: repeat(3, 1fr);
	}

}

/* end max-width: 1700px */


@media screen and (max-width: 1200px) {

	.tfa-mixitup-filters,
	.tfa-multi-view-controls,
	.tfa-tile-intro {
		width: 32vw;
	}

	.tfa-mixitup-list,
	.tfa-multi-view,
	.tfa-tile-tabs-container {
		padding-left: 33vw;
	}

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

}

/* end max-width: 1200px */

@media screen and (max-width: 900px) {
	div#main {
		border-left: none;
	}

	.tfa-content {
		padding: 15px 3vw;

	}


	.tfa-mixitup-list,
	.tfa-multi-view,
	.tfa-tile-tabs-container {
		padding: 0;
		min-height: 80vh;
	}

	.tfa-top-controls span {
		display: none;
	}

	.tfa-tile-list {
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 3vw 1vw;
	}

	.tfa-mixitup-filters,
	.tfa-tile-intro,
	.tfa-multi-view-controls {
		position: relative;
		width: 94vw;
	}

	.hidemenu .tfa-mixitup-filters {
		width: auto;
		height: 0;
	}

	.filters-loading:before {
		content: "Results displayed below";
	}

	.tfa-tile-list>li {
		position: relative;
		text-align: left;
		line-height: 0;
		padding: 3vw;
		background: #fff;
		border-radius: 6px;
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;
	}

	.tfa-tile-list .select-box {
		position: unset;
		line-height: unset;
		background: unset;
		border-left: 3px dotted rgba(0, 0, 0, 0.2);
		width: 60px;
		padding: 0;
	}

	.tfa-tile-list .select-box:has(input[type=checkbox]:checked) {
		background: #fff;
	}

	.select-box label {
		position: relative;
		font-size: 0px;
		text-align: right;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
	}

	.select-box input[type=checkbox] {
		position: relative;
		margin-right: unset;
		width: 30px;
		height: 30px;
	}

	.select-box input[type=checkbox]:checked:before {
		width: 30px;
		height: 30px;
	}

	.select-box input[type=checkbox]:before {

		width: 30px;
		height: 30px;
	}

	.select-box input[type=checkbox]:checked:after {
		width: 6px;
		height: 15px;
		top: 5px;
		left: 13px;
	}

	.tfa-top-controls a,
	.tile-data-actions a,
	.sample-quick-search-container .button-style {
		padding: 0 4vw;
	}

	.tfa-tile-list.container a {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-grow: 1;
	}

	.tfa-tile-list>li img {
		width: 25%;
	}

	.reorder-remove {
		color: #000000;
		flex-direction: column-reverse;
		height: 100%;
		width: auto;
		padding: 3vw 1vw;
	}

	.colourname {
		padding: 0 0 0 2vw;
		display: block;
		text-align: left;
		line-height: 1;
	}


	.tile-data-titles {
		padding: 10vw 0;
	}

	.tile-data-actions {
		padding: 6vw 0 3vw 0;
	}

	.outlines {
		width: 86vw !important;
		height: 86vw !important;
	}

	.tfa-table.tfa-table-technical {
		font-size: 0.6em;
	}

	.tfa-table.tfa-table-certification tr {
		display: flex;
		flex-direction: column;
	}

	.tfa-table.tfa-table-certification tr:nth-child(odd) {
		background-color: #fff;
	}

	.tfa-table.tfa-table-certification th {
		width: auto;
	}

	.tfa-table.tfa-table-certification td,
	.certification {
		text-align: justify;
	}


}

/* end max-width: 900px */


/* hide printed elements */

.tfa-pdf-filename,
.tfa-pdf-logo,
.tfa-contact-details,
.tfa-date-stamp {
	display: none;
}

#pdf-wrapper,
#pdf-wrapper p {
	font-size: 9pt !important;
	font-size-adjust: none;
	font-weight: 100;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

#pdf-wrapper .tile-details h4 {
	font-size: 12pt !important;
}

#pdf-wrapper .tfa-content {
	padding: 0;
}

#pdf-wrapper table,
#pdf-wrapper .tfa-table th,
#pdf-wrapper .tfa-table td {
	font-size: 9pt !important;
	font-size-adjust: none;
	font-weight: 100;
}

#pdf-wrapper table.tfa-table.tfa-table-certification tr {
	display: table-row;
}


#pdf-wrapper table.tfa-table.tfa-table-certification th {
	width: auto;
}

#pdf-wrapper .tfa-table.tfa-table-certification td {
	text-align: left;
}

#pdf-wrapper .tfa-table .cert-icon {
	width: 90pt;
}

#pdf-wrapper .tfa-tile-intro {
	margin: 0;
	display: flex;
	align-items: center;
	width: 100%;
	text-align: center;
	position: relative;
}

#pdf-wrapper .tile-data-titles {
	padding-top: 0;
}

#pdf-wrapper .tfa-contact-details {
	display: flex;
	justify-content: space-between;
}

#pdf-wrapper .tfa-contact-details a {
	color: #000;
	text-decoration: none;
}

.tfa-contact-details div {
	padding: 1em;
}

.tfa-contact-details h5 {
	margin: 0 auto;
}

#pdf-wrapper .tile-data-titles span {
	color: #000;
}

#pdf-wrapper .tile-data-titles span:after {
	content: " Collection";
}

#pdf-wrapper .pdfimage {
	padding: 0;
	background: none;
}

#pdf-wrapper .pdfimage img {
	width: 425px;
	height: 425px;
}

#pdf-wrapper .tfa-pdf-logo,
#pdf-wrapper .tfa-date-stamp {
	display: block;
	margin-bottom: 1em;
}

#pdf-wrapper .tfa-pdf-logo img {
	width: 300px;
}

#pdf-wrapper .tfa-hideonpdf {
	display: none;
}

#pdf-wrapper #qrcode img {
	width: 130px;
	height: 130px;
}

#pdf-wrapper .tile-details {
	padding: 0;
}

#pdf-wrapper .outlines {
	overflow: visible;
	transform: scale(0.9);
	transform-origin: center top;
	width: 500px;
	height: 500px;
}

#pdf-wrapper .outlines div.average-man {
	display: none !important;
}