* {
	outline: none;
}
html {
	word-wrap: break-word;
}
/* word-wrap does not work in table-cells */
.media-object-section {
	word-break: break-all;	/* All browsers */
	word-break: break-word;	/* WebKit */
}
/* Make a .media-object-section grow to fill all remaining space,
   like flex-grow: 1 (which we can't use due to IE browser support). */
.media-object-section.grow {
	width: 100%;
}

.container {
	max-width: 75rem;
	margin: 0 auto;
}

button {
	cursor: pointer;
}

address {
	font-style: normal;
	font-size: 0.9rem;
}

@media print, screen and (min-width: 40em) {
	h1 {
		font-size: 2rem;
	}
}

.accent {
	color: #1d82ca;
}

.bg-light {
	background-color: #fefefe;
}
.bg-1 {
	background-color: #ffffff;
}
.bg-2 {
	background-color: #fefefe;
}
.bg-3 {
	background-color: rgb(241, 241, 241);
}
.bg-4 {
	background-color: rgb(225, 225, 225);
}
.bg-5 {
	background-color: rgb(247, 247, 247);
}

i[class*=facebook] {
	color: #3B5998;
}
i[class*=twitter] {
	color: #1DA1F2;
}
i[class*=youtube] {
	color: #ff0000;
}

.break-word {
	word-wrap: break-word;
}

.card {
	box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
	border: none;
}

/**
 * Desktop header
 */
header .top-bar {
	padding: 0;
}
header #top-menu.top-bar,
header #top-menu.top-bar ul {
   background-color: #222;
	font-size: 0.8rem;
}
header #top-menu .menu > li > a {
	padding: 0.6em;
}
header #main-menu.top-bar,
header #main-menu.top-bar ul {
   background-color: #6f787d;
}
header #main-menu .menu > li > a {
	padding: 3em 0.6em;
}
header #main-menu .menu > li > a.logo {
	padding: 0;
	margin-left: 0.5rem;
	margin-right: 4rem;
}
header #main-menu .menu > li > a.logo img {
	margin-right: 0;
}
header nav li a,
header nav li a:focus,
header nav li a:hover {
	color: #FFFFFF;
}
header nav li a:hover {
	background-color: #1d82ca;
}

/**
 * Mobile header
 */
header .nav-mobile {
   background-color: #222;
	color: #FFFFFF;
}
.nav-mobile i[class*=fa-] {
	font-size: 2.1em;
   color: #ffffff;
	vertical-align: middle;
}
.menu-icon {
	width: 1.72375em; /* Same width as font-size: 2.5em; */
}
/* Add off-canvas support for older webkit browsers (iOS < 9, Android < 5) because the non-sass downloads have been prefixed incorrectly */
.position-right {
	-webkit-transform: translateX(250px);
}
.off-canvas.is-open {
   -webkit-transform: translate(0, 0);
}

/**
 * A bar like Foundation's .title-bar but with the ability to centrally align content
 * as well as to the left and right.
 */
.center-bar {
	position: relative;
	height: 3.5em;
	line-height: 3.5em;
	margin: 0;
	padding: 0;
	border: none;
}
.center-bar .left {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.center-bar .center {
	display: block;
	margin: 0 3.5em;
	text-align: center;
}
.center-bar .right {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
}
.center-bar .icon-container {
	height: 3.5em;
   width: 3.5em;
	line-height: 3.5em;
   text-align: center;
   display: block;
}

#cat-refine-btn {
	background-color: #868686;
}
#cat-refine-btn i[class*=fa-] {
	font-size: 1.75em;
   color: #ffffff;
	vertical-align: middle;
}
#cat-refine-btn .center {
	font-size: 1rem;
}

main {
	padding-bottom: 1rem; /* Make room for the social section in the footer */
}
main > *:last-child {
	margin-bottom: 0;
}

/**
 * Footer
 */
footer {
	background-color: #c3c3c3;
	/*color: #1d82ca;*/
	font-size: 0.8rem;
	text-align: center;
}
footer .social {
	border: 2px solid #1d82ca;
	/*position: relative;
	top: -1.5rem;
	left: -0.5rem;*/
}
footer .social i[class*=fa-] {
	font-size: 3rem;
	margin: 0.9rem;
}
footer h2 {
	font-size: 1rem;
	font-weight: bold;
}
footer address {
	text-align: left;
}
.cat-footer-bottom {
	font-size: 0.7em;
	background-color: #2a2a2a;
	color: #a5a5a5;
}
footer nav.cat-footer-bottom {
	padding: 0.5rem;
}
footer nav.cat-footer-bottom .menu.simple li {
	margin-right: 0.5rem;
	line-height: inherit;
}
footer nav.cat-footer-bottom li a {
	color: #a5a5a5;
	display: inline-block;
	text-decoration: none;
}
footer nav.cat-footer-bottom li a:hover {
	color: #c5c5c5;
}

/**
 * Home page slideshow / orbit
 */
.orbit #quick-search {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	width: 60%;
	padding: 0.5rem 1rem 0;
	background-color: rgba(111, 120, 125, 0.35);
	color: #ffffff;
	border-radius: 5px;
}

.orbit-container .bottom-right,
.banner .bottom-right.show-for-medium {
	position: absolute;
	right: 2rem;
	bottom: 1rem;
}

.bottom-right {
	position: absolute;
	right: 0;
	bottom: 0;
}

#simple-search {
	border: 2px solid #1d82ca;
	margin-bottom: 1rem;
}

#mobile-categories-container {
	margin: 0.625rem 0; /* Same as .column */
}
.overlay-caption {
	position: relative;
}

.banner {
	position: relative;
}
.banner img {
	width: 100%;
}
.banner .bottom-right > div {
	display: table-cell;	/* This makes the <select>s sit on one line next to each other and adjust their widths to fit their content and not overflow the viewport width ("shinkwrap") */
	padding-right: 0.625rem;
}
.banner .bottom-right select {
   margin-bottom: 0.625rem;
   font-size: 0.9rem;
   border: none;
   height: auto;
}
/* Used when there's no banner image */
.no-banner {
	background-color: rgb(225, 225, 225);
}
.no-banner .result-options {
	text-align: center;
}
.no-banner .result-options > div {
	display: inline-block;
	padding-right: 0.625rem;
}
.no-banner .result-options select {
   margin: 0.625rem 0;
   font-size: 0.9rem;
   height: auto;
}

#recently-added h1 {
   color: #444444;
   font-size: 1.75rem;
   text-align: center;
   padding: 1.2rem;
}
.card.dark {
	background-color: rgb(58, 58, 60);
   color: #ffffff;
   border: none;
}
.card-compact {
	padding: 0.5em;
}
.card-compact > .left {
	float: left; /* Prevent wrapping of the text underneath the button to the left */
   margin-right: 0.7em;
}
.card-compact > .right {
   overflow: hidden; /* Prevent wrapping of the text underneath the button to the left */
   margin: 0;
   line-height: normal;
	text-align: center;
}
#recently-added .title {
	font-size: 0.875em;
	line-height: 1.2;
	height: 2.1em; /* font-size * line-height Makes sure all cards are the same height whilst remaining responsive */
	overflow: hidden;
}

#advanced-search {
	background-color: rgb(241, 241, 241);
}
#advanced-search .heading {
	font-size: 2rem;
	background-color: rgb(58, 58, 60);
	color: #ffffff;
	padding: 0 0.4em;
}

label {
	color: #1d82ca;
	font-size: 0.8rem;
	font-weight: bold;
}

.cat-field-group legend {
	font-weight: bold;
}

#refine-search {
	background-color: rgb(241, 241, 241);
	padding: 0 0.75rem;
}
.side-bar h1 {
	text-align: center;
	font-size: 1.5rem;
	color: rgb(140, 140, 140);
}
#refine-search-modal {
	padding: 0;
}
#refine-search-modal h1 {
	font-size: 1.5rem;
}
#refine-search-modal .main {
	padding: 0.625rem;
}

#search-results-header {
	background-color: rgb(58, 58, 60);
	color: #ffffff;
	line-height: 2rem;
	padding: 0.5rem;
}
#search-results-header select {
   margin: 0;
   font-size: 0.9rem;
   border: none;
   height: auto;
}
#search-results-header label {
	font-size: 0.9rem;
	color: #ffffff;
}

.form-inline label {
	display: inline;
}
.form-inline select {
	width: auto;
}

@media (min-width: 40em) { /* The same as Foundation's "medium" breakpoint */
	#search-results {
		/* Todo: Needs to be as long as #refine-search when the #search-results section is shorter, and as long as the #search-results section when it is taller but not including the pagination */
		border-left: 0.8rem solid rgb(58, 58, 60);
	}
}

#search-results > * {
	margin-top: 1rem;
}

.callout .title {
	font-size: 1.8em;
	line-height: 1;
}

.listing {
	background-color: rgb(225, 225, 225);
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 1rem;
}
.listing > a > .row {
	background-color: rgb(225, 225, 225); /* Set on the .row as well as the .article-listing to cope with the negative margin applied to nested .rows */
}
.listing > a > div > div > * {
	margin-bottom: 0.5rem;
}
.listing .title {
	font-size: 1.5rem;
   font-weight: bold;
   background: transparent;
   color: rgb(58, 58, 60);
}
.listing .unit_price {
	font-size: 1.5rem;
	text-align: center;
}
.listing ul.details {
	list-style-type: none;
	color: rgb(58, 58, 60);
}
.listing .button i[class*="fa-"] {
	font-size: 1.4em;
	margin: 0 0.9rem;
	vertical-align: middle;
	line-height: 0.9rem;	/* Same as .button font-size */
}
@media (max-width: 39.9375em) {
	.listing .button {
		padding: 0.85em 0.5em;
	}
}
@media (min-width: 40em) {	/* Same as Foundation's "medium" breakpoint */
	.listing .title {
		font-size: 1.1rem;
	}
	.listing .unit_price {
		font-size: 1rem;
	}
	.listing .click-area .middle-column {
		padding: 0 1rem;
	}
}
@media (min-width: 64em) {	/* Same as Foundation's "large" breakpoint */
	.listing .title {
		font-size: 1.2rem;
	}
	.listing .unit_price {
		font-size: 1.4rem;
	}
}

.row.left-pad > .column,
.row.left-pad > .columns {
	padding: 0;
}
.row.left-pad > .column:not(:first-child),
.row.left-pad > .columns:not(:first-child) {
	padding-left: 1em;
}
.row.right-pad > .column,
.row.right-pad > .columns {
	padding: 0;
}
.row.right-pad > .column:not(:last-child),
.row.right-pad > .columns:not(:last-child) {
	padding-right: 1em;
}
.row .row.left-pad,
.row .row.right-pad {
    margin-right: 0;
    margin-left: 0;
}
.pad {
	padding: 1em;
}
.spacer {
	margin-top: 1rem;
}

.pagination {
	margin: 1rem 0;
/* To remove left border from pagination
	margin: 0 -1.7375rem !important;
   background: #fefefe;
   padding: 1rem 0;
*/
}
.pagination li {
	display: inline-block; /* Show all links on mobile too. Same as setting the Sass variable $pagination-mobile-items to true */
}
.pagination .pagination-total {
	margin: 0 0.5em;
}

.item-title {
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	color: rgb(58, 58, 60);
}
/*@media (min-width: 40em) {
	.item-title {
		font-size: 1.5rem;
	}
}*/
@media (min-width: 64em) {
	.item-title {
		font-size: 2rem;
	}
}
header .item-title {
	padding: 1rem;
	margin: 0;
}
#item-details {
	color: rgb(118, 118, 118);
}
#item-details .item-spec {
	text-align: center;
	padding: 0.5em 1em;
}
#item-details .item-spec ul {
	list-style-type: none;
	display: inline-block;
	margin: 0;
}
#item-details .item-spec ul li {
	display: inline-block;
	padding: 0 0.8em 0 0.6em;
}
@media (min-width: 40em) { /* The same as Foundation's "medium" breakpoint */
	/* The border looks silly when the list items wrap across 2 or more lines,
		so only add when there is space */
	#item-details .item-spec ul li:not(:last-child) {
		border-right: 6px solid rgb(176, 176, 176);
	}
}
#item-details .sub-heading {
	font-size: 1.125rem;
}
#ctas-wrapper {
	margin-bottom: 1em;
}
#ctas {
	background-color: rgb(190, 190, 190);
	text-align: center;
	padding: 1em;
}
#ctas .button {
	font-weight: bold;
}
#ctas i[class*="fa-"] {
	font-size: 1.8em;
	margin: 0.2em 0.9rem 0.2em 0;
	vertical-align: middle;
}
#ctas .button.short {
	padding: 0.3em 1em;
}
#ctas .addthis_toolbox {
	display: inline-block; /* Allow this element to be centered */
}
#ctas #details-correct i[class*="fa-"] {
	color: #44c155;
}
.callout.xsmall {
	padding: 0.3rem;
	font-size: 0.9rem;
}
#ctas-wrapper .unit_price {
	font-size: 1.5rem;
}
#ctas .unit_price:not(.commercial) {
	line-height: 2.2rem;	/* Make the price container the same height as the #details-correct container */
	text-align: center;
}
#ctas .unit_price.commercial .gross,
#ctas .unit_price.commercial .nett {
	text-align: center;
}
@media (max-width: 39.9375em) {
	main.item {
		padding: 1em;
	}
	.small-bg-white,
	#ctas-wrapper,
	#item-details {
		background-color: white;
	}
	#ctas-wrapper {
		text-align: center;
		margin-bottom: 0;
	}
	#ctas {
		margin: 1em 4em;
	}
	#item-details {
		padding-bottom: 1em;
	}
	#item-details > .detail-section {
		border: 8px solid rgb(225, 225, 225);
		padding: 0.5em 1em;
	}
	/* This basically collapses the borders between .detail-sections */
	#item-details > .detail-section + .detail-section {
		border-top: none;
	}
}
@media (max-width: 38.75em) { /* The button text wraps to multiple lines below this width */
	#ctas {
		margin: 1em 0;
	}
}
.no-margin {
	margin: 0;
}
.responsive-embed {
	margin: 1rem 0;
}

.heading-card {
	margin-bottom: 1rem;
}
.heading-card .heading-card-heading {
	background-color: rgb(134, 134, 134);
	color: #ffffff;
	font-size: 1.5em;
	text-align: center;
	padding: 0.2em;
}
.heading-card .heading-card-content {
	background-color: #ffffff;
	padding: 1em;
}
.heading-card .heading-card-content .column,
.heading-card .heading-card-content .columns {
	padding: 0;
}
.heading-card .heading-card-content .subtitle {
	font-weight: bold;
	margin-bottom: 0.3em;
}
@media (min-width: 40em) {
	.heading-card.heading-card-horizontal .heading-card-heading {
		display: inline-block;
		width: 33%;
	}
	.heading-card.heading-card-horizontal .text-right .button {
		margin: 0;
	}
}
.related-item {
	font-size: 1rem;
}
.related-item .media-object-section * {
	margin: 0;
}
.related-item .title {
	font-size: 1em;
	color: #1d82ca;
}
.related-item .desc {
	color: rgb(94, 117, 92);
}

.image-gallery {
	margin-bottom: 1rem;
}
.image-gallery .orbit-container .orbit-image {
	display: block;
	max-width: 100%;		/* Do not let the images become wider than their container */
	max-height: 350px;	/* Restrict the images height, so portrait images don't become excessively tall */
	width: auto;			/* Make the images width responsive */
	height: auto;			/* Make the images height responsive */
	margin: 0 auto;		/* Center narrow images */
}
.standalone-image {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
ul.thumbnails {
	list-style-type: none;
	background-color: #ffffff;
	padding: 0 0.5rem;
	margin: 1rem 0 0 0;
	text-align: justify;
	max-height: 108px;	/* Image height + top & bottom padding + top & bottom margin */
	overflow: hidden;
}
ul.thumbnails li {
	display: inline-block;
	padding: 1px;
	margin: 0.5rem 0;
}

.sitemap-section a {
	color: rgb(58, 58, 60);
}
.sitemap-section h2 {
	font-size: 1.4rem;
	font-weight: bold;
	margin: 1em 0 0.5em;
}
.sitemap-section h3 {
	font-size: 1rem;
	font-weight: bold;
	margin: 1em 0 0.5em;
}
.sitemap-section h4 {
	font-size: 0.875rem;
	font-weight: bold;
	margin: 1em 0 0.5em;
}
.sitemap-section .sitemap-item {
	font-size: 0.75rem;
}

.heading-colourful {
	color: #1d82ca;
	font-size: 2rem;
	margin: 2rem auto;
	border-bottom: 5px solid rgb(225, 225, 225);
	display: inline-block;
}

.button.saved {
	background-color: #44c155 !important;
}
.button.saved:hover,
.button.saved:focus,
.button.saved:active {
	background-color: #369A44 !important;
}

#slideshow #cat-findit-slide-frame {
	position: relative;
}
#slideshow #cat-findit-slide-frame0,
#slideshow #cat-findit-slide-frame1 {
    position: absolute;
    top: 0;
    left: 0;
	 width: 100%;
}
#slideshow img {
	display: block;
	max-width: 100%;		/* Do not let the images become wider than their container */
	max-height: 575px;	/* Restrict the images height, so portrait images don't become excessively tall */
	width: auto;			/* Make the images width responsive */
	height: auto;			/* Make the images height responsive */
	margin: 0.5em auto;	/* Center narrow images */
}
#slideshow #cat-findit-slide-counter {
	text-align: center;
	font-size: 0.75rem;
}
#slideshow #cat-findit-slide-counter .button {
	margin: 0 0.5em;
}
#slideshow .card {
	margin-top: 0.5rem;
	border-top: 1px solid rgba(0,0,0,0.2); /* Matches the card shadow */
}
#slideshow .price {
	float: right;
	color: #1d82ca;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1;
}
#slideshow .title {
	margin-bottom: 0.2em;
}
#slideshow .location {
	margin-bottom: 1rem;
}

/* Attempt to fix bugs in iOS Safari and Android Chrome (or maybe Foundation?)
	that result in the content at the bottom of the modal being cut off */
html.is-reveal-open body {
	position: fixed;
}
.reveal {
	-webkit-overflow-scrolling: touch;
}
.reveal.full > *:last-child {
    padding-bottom: 5rem !important;
}

/* Standard unit price UI across the entire site */
.unit_price {
	color:  #1d82ca;
	font-weight: bold;
	line-height: 1;
}
.unit_price.commercial {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
.unit_price.commercial .gross,
.unit_price.commercial .nett {
	flex: 1 1 50%;
}
.unit_price.commercial .gross span,
.unit_price.commercial .nett span {
	display: block;
	font-size: calc(12px + 10%);	/* Ensure a minimum font-size of 12px */
	font-weight: normal;
	margin-top: 5px;
}
.unit_price.commercial .vat-info {
	flex: 0 1 auto;
	display: unset;
	font-weight: unset;
	border: none;
}
.unit_price.commercial .vat-info i[class*=fa-] {
	font-size: calc(12px + 33%) !important;	/* Ensure a minimum font-size of 12px */
	margin: 0 !important;
}