@charset "utf-8";
/* CSS Document */
/* font */
/**/
.primary-bg {
	background-color: #fb172b;
}

.banner-row {
	background-color: #fb172b;
}

.btn-primary {
	background-color: #fb172b;
	text-decoration: none !important;
	border-color: #fb172b;
}

/*Call to action band - the "Book your appointment today" strip under the home page, the services
list, a service, the blog and a post. All five printed the same 85px of padding and the same 45px
heading inline on the markup, so no media query could reach them and a 360px phone got a 45px
title in a band 170px taller than the screen needed*/

.cta-band {
	padding-top: 85px;
	padding-bottom: 85px;
	max-width: inherit;
}

.cta-band-title {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 45px;
	color: #fff;
}

@media (max-width: 991px) {

	.cta-band {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.cta-band-title {
		font-size: 34px;
	}
}

@media (max-width: 767px) {

	.cta-band {
		padding-top: 45px;
		padding-bottom: 45px;
	}

	.cta-band-title {
		font-size: 26px;
	}
}

/*Map and shop details, side by side on a wide screen and stacked below it. Shared by the home page
and by the band the services list, a service, the blog and a post all end with.

These were col-lg-6 with their spacing inline, so the pair only split past 1200px - every tablet
held sideways got a full width map with the details stacked under it - and the 350px the details
column was held open to could not be reached by a media query once they had*/

.home-contact-row {
	margin: 0px;
	background: #fff;
}

.home-contact-map {
	padding: 0px;
}

.home-contact-details {
	display: flex;
	align-items: center;
	min-height: 350px;
	background-color: #fff;
}

.home-contact-details-inner {
	width: 100%;
}

.home-contact-title {
	font-size: 36px;
}

@media (max-width: 767px) {

	.home-contact-details {
		min-height: 0px;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.home-contact-title {
		font-size: 26px;
	}
}

/*The band's own wrapper, its map and its list of details. These were inline on the markup, in two
copies that had to be kept in step by hand - one in index.php and one in the helper the other pages
included*/

.home-contact-section {
	max-width: inherit;
}

.home-contact-map-embed {
	padding: 0px;
	min-height: 350px;
}

.home-contact-list {
	text-align: center;
	padding-left: 0px;
	margin-left: 0px;
	font-size: 16px;
	line-height: 32px;
	list-style: none;
}

/*<address> is a block element and italic by default, which would put the street on a line of its
own under its own pin*/
.home-contact-list address {
	display: inline;
	margin: 0px;
	font-style: normal;
	line-height: inherit;
}

.home-contact-button-link {
	text-decoration: none;
}

/*Google reviews band.

The rotating row is a fixed height window onto a list the script reorders. The arrows used to be
absolutely positioned inside a wrapper of their own that sat after that window, at top:180px with
another 60px of margin on top - which put them roughly 240px below the row they belong to, over
whatever section came next. They are positioned against the row itself now.

The row's height was inline, so a phone - where a card is the full width of the screen rather than
a third of it - clipped the bottom off every review that ran past five lines*/

/* The two review bands - the Google one and the shop's own. Same card, two sources, so they share
   every rule here and differ only in the ids themes/mecanopro/js/index.js rotates them by. */
.google-reviews-carousel,
.site-reviews-carousel {
	position: relative;
}

#google-reviews-container,
#site-reviews-container {
	height: 200px;
	overflow: hidden;
}

.google-review-container,
.site-review-container {
	height: 200px;
	padding: 20px;
	text-align: center;
}

.google-review-container-inner,
.site-review-container-inner {
	height: 100%;
	margin-bottom: 10px;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: #fff;
}

.google-reviews-arrow,
.site-reviews-arrow {
	position: absolute;
	top: 50%;
	margin-top: -20px;
	z-index: 20;
	height: 40px;
	width: 40px;
	border-radius: 20px;
	background: rgba(0,0,0,0.8);
	color: #fff;
	text-align: center;
	line-height: 40px;
}

#google_reviews_left,
#site_reviews_left {
	left: 0px;
}

#google_reviews_right,
#site_reviews_right {
	right: 0px;
}

/* Only a first-party review has these - see AduvioReview */

.site-review-title {
	font-weight: 600;
	margin-bottom: 4px;
}

.site-review-verified {
	color: #4caf50;
	font-size: 13px;
}

/* The shop's answer. Clamped so one long reply cannot make its card taller than the fixed-height
   row it rotates in, which would clip it anyway */
.site-review-reply {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid #eee;
	color: #666;
	font-size: 12px;
	line-height: 1.45;
	overflow: hidden;
	max-height: 52px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

.site-review-reply-from {
	display: block;
	font-weight: 600;
	color: #333;
}

@media (max-width: 991px) {

	#google-reviews-container,
	#site-reviews-container,
	.google-review-container,
	.site-review-container {
		height: 240px;
	}
}

@media (max-width: 767px) {

	#google-reviews-container,
	#site-reviews-container,
	.google-review-container,
	.site-review-container {
		height: 270px;
	}

	.google-review-container,
	.site-review-container {
		padding: 10px 0px;
	}
}


/*Footer bottom bar and the Loi 25 cookie notice - the second half of each was right aligned
inline, and on a phone the two halves stack, which left it right aligned against nothing*/

.site-footer-legal {
	text-align: right;
}

.loi-25-accept {
	text-align: right;
}

@media (max-width: 767px) {

	.site-footer-legal,
	.footer-bottom .col-sm-6:first-child {
		text-align: center;
	}

	.loi-25-accept {
		text-align: center;
	}

	.loi-25-accept .btn {
		width: 100%;
	}
}