/**********
COLOURS - HOME

Header/Dark blue stripe: #2D649A
Light blue stripe: #439FD6
Footer/Darker grey stripe: lightgray #D3D3D3
Background light grey: whitesmoke #F5F5F5
Default font color: midnightblue #191970;


**********/

/*********
FONTS
*********/

@font-face {
		font-family: 'PT Sans Regular';
    src: url('../fonts/ptsans_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
		font-family: 'PT Sans Bold';
    src: url('../fonts/ptsans_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/**********
GENERAL
**********/

body {
  background-color: whitesmoke;
  font: 16px 'PT Sans Regular', 'Trebuchet MS', sans-serif;
  color: midnightblue;

}

.wrapper {
  max-width: 1024px;
  margin: 0 auto;

}

ul {
  padding-left: 0;
  list-style: none;
  margin: 0;

}

a {
	text-decoration: none;

}

hr {
  border: 0;
  border-top: 1px solid #2D649A;
  border-bottom: 1px solid #2D649A;

}

h1 {
	font-family: 'PT Sans Bold', 'Trebuchet MS', sans-serif;

}
/*
p {
	line-height: 1.15;

} */

main#page {
	margin: 0 10px 30px;
	min-height: 400px;

}

main#page h1 {
	text-align: center;

}

main#page p {
	font-size: 1.125em;

}


/**********
HEADER
**********/

#header-bg {
  height: 130px;
  background-color: #2D649A;

}

header {
  max-width: 1024px;
	height: 130px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
	align-items: center;
  font: 1.125em 'PT Sans Bold', 'Trebuchet MS', sans-serif; /* 18px */
  color: white;

}

header a {
	color: white;

}

header .contact-methods a:hover, header .contact-methods a:focus, header nav a:hover, header nav a:focus, header nav li.selected a {
	border-bottom: solid 2px white;

}

#site-logo {
	margin-left: 8%;

}

#site-logo img {
	width: 125px;

}

header li, nav li {
	margin-bottom: 10px;

}

header li:last-child, nav li:last-child {
	margin-bottom: 0;

}

.contact-methods li {
	display: flex;
	align-items: center;

}

.contact-methods li div {
	width: 30px;

}

.contact-methods li div img, .contact-methods li div svg {
	display: block;
	margin: 0 auto;

}

header nav {
	margin-right: 7%;

}

/**********
HOME
**********/

/* SLIDERS */

#slider-images.flexslider {
  max-width: 880px;
	max-height: 450px;
	position: relative;
	margin: 30px auto 50px;
	border: none;

}

/* Overlay graphic using pseudo-selector */
#slider-images:before {
	content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url(../assets/slider-overlay.svg) no-repeat;

}

/* Lower z-index on the slides insures the image will be below the graphic */
#slider-images .slides {
    position: relative;
  	z-index: 0;

}

#slider-images .slides img {
  max-width: 800px;
	height: auto;
	float: right;

}

/* SERVICES */
#services {
	background-color: #D3D3D3;

}

#services .wrapper {
	display: flex;
	justify-content: space-between;
	padding: 55px 0 20px;

}

#services .container {
	background-color: #2D649A;
	color: white;
	transform: skewX(-5deg);
	width: 248px;
	max-width: 24%;
	height: 225px;
	font-size: 1.625em; /* 26px */
	text-align: center;
	position: relative;

}

#services .container img {
	position: absolute;
	top: -45px;
	left: 34%;
	transform: skewX(5deg); /* undo container's skew */

}

#services .container:nth-child(even) {
	background-color: #439FD6;
	color: midnightblue;

}

#services h1 {
	font: 1.538em 'PT Sans Bold', 'Trebuchet MS', sans-serif; /* 40px */
	margin: 60px 0 5px;
	transform: skewX(5deg); /* undo container's skew */

}

#services .container ul {
	transform: skewX(5deg); /* undo container's skew */

}

/* INTRO */
#intro {
	font-size: 1.375em; /* 22px */
	padding-bottom: 1em;

}

#intro p {
	margin: 1em 20px;

}

#checks {
	display: flex;
	justify-content: space-around;
	margin: 0 5px;

}

#checks li {
	display: flex;
	align-items: start;
	width: 200px;

}

#checks img {
	margin: 0 5px;
	width: 30px;
	display: block;

}

/* REVIEWS */
#reviews {
	background-color: #2D649A;
	color: white;

}

#reviews .wrapper {
	min-height: 300px;
	padding: 20px 0 1px;

}

#reviews h2, #contact h2 {
	font: 1.625em 'PT Sans Bold', 'Trebuchet MS', sans-serif; /* 26px */
	text-align: center;

}

#reviews h2 {
	margin-top: 0;

}

#slider-reviews.flexslider {
	background-color: #2D649A;
	border: none;
	margin: 0 auto 60px;

}

#reviews blockquote {
	display: flex;
	margin: 0 0 1em;

}

#reviews blockquote::before {
	content: url('/themes/user/site/assets/quote-left.svg');
	align-self: flex-start;

}

#reviews blockquote::after {
	content: url('/themes/user/site/assets/quote-right.svg');
	align-self: flex-end;

}

#reviews p {
	font-size: 1.375em; /* 22px */
	margin: 0px 15px;
	padding: 15px 0;

}

#reviews .source {
	font-size: 1.25em; /* 20px */
	font-style: italic;
	text-align: right;
	margin-right: 65px;

}

#slider-reviews.flexslider .flex-control-paging li a {
	background-color: #FFFFFF80;

}

#slider-reviews.flexslider .flex-control-paging li a.flex-active {
	background-color: #FFFFFF;

}


/**********
 CONTACT
 **********/
#contact .container {
  display: flex;
	margin-bottom: 30px;

}

/* CONTACT FORM */

#contact #form-container {
	width: 60%;

}

#contact #form {
	width: 90%;
	margin: 0 auto;
	font-size: 1.125em; /* 18px */

}

#contact-form input, #contact-form textarea {
	width: 75%;
	border-radius: 5px;
	border: solid 1px lightgrey;
	padding: 5px 3px 0 3px;
	margin: 2px 0 15px;

}

#contact-form input:focus, #contact-form textarea:focus {
		outline: 2px solid #439FD6;

}

#contact-form textarea {
	height: 120px;

}

#form .error span {
	display: flex;
	align-items: start;
	margin: 1em 0;

}

#form .error span svg {
	padding-right: 2px;
	width: 22px;
	min-width: 22px;

}

#form .error p {
	color: crimson;
	font-weight: bold;
	margin: 0;

}

#contact-form p.required {
	color: crimson;
	margin-top: 0;

}

#contact-form button[type=submit], #service-list a.button, .enquiry-conf a.button {
	width: max-content;
	border-radius: 5px;
	margin: 0 0 30px 28%;
	padding: 7px 10px;
	background-color: #2D649A;
	color: white;
	border: none;
	cursor: pointer;
	font-weight: bold;
	display: block;

}

.enquiry-conf a.button {
	margin: 50px auto 0;
	font-size: 1.125em;

}

#contact-form button[type=submit]:hover, #service-list a.button:hover, .enquiry-conf a.button:hover, #contact-form button[type=submit]:focus, #service-list a.button:focus, .enquiry-conf a.button:focus {
	background-color: #439FD6;
	color: midnightblue;

}

#contact .contact-methods {
	font: 1.375rem 'PT Sans Bold', 'Trebuchet MS', sans-serif; /* 22px */
	margin-top: 50px;

}

#contact .contact-methods li {
	line-height: 1.75;

}

.enquiry-conf p {
	margin-left: 10px;
	margin-right: 10px;

}

p.recaptcha-notice {
	color: dimgrey;
	font-size: 0.875em;
	width: 75%;
	margin-bottom: 1.5em;

}

p.recaptcha-notice a {
	text-decoration: underline;
	color: midnightblue;

}

.grecaptcha-badge {
	visibility: hidden;

}

/* AREAS */
#areas {
	font-size: 1.25em; /* 20px */

}

#areas h3 {
	font: 1em 'PT Sans Bold', 'Trebuchet MS', sans-serif; /* 20px */

}

#areas ul {
	display: inline-block;

}

#areas ul li {
	line-height: 1.5;

}

#areas ul:first-child {
	margin-right: 70px;

}


/**********
 PAGE CONTENT CREATED IN WYSIWYG EDITOR
 **********/

.rte-content p {
	font-size: 1.125em; /* 18 px */

}

 .rte-content a {
	 text-decoration: underline;
	 color: midnightblue;

 }

 .rte-content a:hover, .rte-content a:focus {
	 color: #2D649A;

 }

 .rte-content ul {
 	list-style: unset; /* undo the syling applied to overall <ul> above */

 }

 .rte-content ul, .rte-content ol {
	 padding-left: 40px;
  	margin: 15px 0;

 }

 .rte-content ul > li > ul {
	 list-style-type: circle;

 }


/**********
GALLERY
**********/

.thumbnails {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;

}

.thumbnails li {
	margin: 5px;

}

.thumbnails figure.tile {
	margin: 0;

}

.thumbnails .image-container {
	width: 320px;
	height: 240px;
	background: center / cover no-repeat;

}

.image-container {
  position: relative;
	width: max-content;

}

/* combo of overlay divs creates skew on just one edge */
/* container ensures horizontal lefthand edge by hiding child's skew on that side */
.overlay-container {
	position: absolute;
  top: 0px;
	left: 0px;
	background-color: #2D649A;
	width: 30px;
	height: 26px;

}

/* skew to righthand edge is visible */
.overlay {
	position: absolute;
  top: 0px;
	left: 5px;
	background-color: #2D649A;
	transform: skewX(-15deg);
	height: 26px;

}

.overlay .caption {
	color: white;
	font-weight: bold;
	padding: 2px 7px 0 0;
	display: block;
	transform: skewX(15deg); /* undo inherited skew */

}

.image-large {
	font-size: 1.125em;
	margin-bottom: 25px;

}

.image-large .image-container {
	max-width: 100%;
	margin: 0 auto;

}

.image-large figcaption {
	text-align: center;

}

.image-large .overlay .caption {
	text-align: left;

}

.image-large img {
	max-width: 100%; /* display at native size but no bigger than container */

}

.gallery-nav ul {
	display: flex;
	justify-content: center;
	color: #2D649A;
	font: 1.125em 'PT Sans Bold', 'Trebuchet MS', sans-serif; /* 18px */

}

/**********
REVIEWS
**********/
.wrapper.split {
	display: flex;

}

#reviews-list blockquote {
	margin-left: 0;
	margin-right: 0;

}

#reviews-list .source {
	font-style: italic;
	text-align: right;

}

main#page #reviews-list blockquote p, main#page #reviews-list figcaption.source {
	font-size: 1.125em; /* 18px */

}

#reviews-list li {
	padding: 10px 0;

}

#reviews-list li:nth-child(odd) {
	background-color: white;

}

.checkatrade-feedback-chart-widget {
		flex: 1 0 30%;
    margin: 84px 5px 50px 5px;

}

.checkatrade-feedback-chart-widget a {
		margin-bottom: 20px;
		display: block;

}

.checkatrade-feedback-chart-widget img {
    width: 100%;
    max-width: 100%;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;

}

#checkatrade-reviews-link, #services-link {
	background-color: #2D649A;
	border: solid 2px #2D649A;
	border-radius: 8px;

}

.checkatrade-feedback-chart-widget p {
	font: 1.25em 'PT Sans Bold', 'Trebuchet MS', sans-serif;
	color: white;
	text-align: center;
	padding: 0 8px;

}

#gallery-link {
	background-color: #439FD6;
	border: solid 2px #439FD6;
	border-radius: 8px;

}

#gallery-link p {
	color: midnightblue;

}

#gallery-link p, #services-link p {
	margin: 5px 0;

}


/**********
SERVICES
**********/

.wrapper.split.services {
	flex-wrap: wrap;
	margin-bottom: 30px;

}

.services figure {
	background-size: cover;
	background-repeat: no-repeat;
	width: 48%;
	height: 520px;
	margin: 35px 10px 16px 5px;

}

#service-list {
	width: 48%;
	margin: 0 5px 0 10px;

}

#service-list h1 {
	text-align: center;

}

#service-list .container {
	display: flex;
	position: relative;
	margin-left: 20px;

}

#service-list > ul > li:nth-child(even) .container {
	background-color: #D3D3D3;
	transform: skewX(-5deg);

}

#service-list > ul > li:nth-child(odd) .container {
	background-color: white;
	transform: skewX(-5deg);

}

#service-list > ul > li {
	margin: 20px 0;

}

#service-list .container img {
	width: 74px;
	height: auto;
	position: absolute;
	top: -15px;
	left: -20px;
	transform: skewX(5deg); /* unset inherited skew */

}

#service-list .container ul {
	padding: 10px 10px 10px 70px;
	transform: skewX(5deg); /* unset inherited skew on text */

}

#service-list .container ul li, #service-list a.button {
	font-size: 1.25em; /* 20px */

}

.qualifications {
	width: 98%;
	margin: 0 5px;

}

.qualifications li {
	font-size: 1.125rem; /* 18 px */

}

/**********
Footer
**********/

#footer-bg {
  background-color: lightgray;
	height: 265px;

}

footer {
  max-width: 1024px;
	height: 265px;
  margin: 0 auto;
	font: 1.125em 'PT Sans Bold', 'Trebuchet MS', sans-serif; /* 18px */
  color: #2D649A;

}

footer nav a, #site-credits a, .gallery-nav a {
	color: #2D649A;

}

footer nav a:hover, footer nav a:focus, footer nav li.selected a, #site-credits a:hover, #site-credits a:focus, .gallery-nav a span:hover, .gallery-nav a:focus span {
	border-bottom: solid 2px #2D649A;

}

#nav-container {
	display: grid;
	height: 235px;
	grid-template-columns: 100px 1fr;
	grid-gap: 15px;
	width: 100%;

}

footer nav {
	width: 100px;

}

footer nav ul {
	margin: 10px 0 0 20px;

}

#accreditation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	justify-self: end;
	width: 85%;
	margin-right: 10px;

}

#accreditation li {
	display: block;

}

#accreditation li a {
	cursor: pointer;

}

#accreditation li img {
	width: 100%;

}

.checkatrade, .watersafe {
	flex: 0 1 250px;
	margin-right: 15px;

}

.checkatrade img, .watersafe img {
	border-radius: 8px;

}

.gassafe {
	flex: 0 1 100px;

}

#site-credits {
	font-size: 0.778em; /* x18px = 14px */

}

#site-credits p {
	margin: 0 5px;
	text-align: right;

}

#copyright {
	font-size: 1.285em; /* x14px = 18px */

}


/**********
COOKIES MESSAGE
**********/
.show-cookies-message input.cookies-save, .show-cookies-message a.cookies-settings {
	width: auto;
	margin: 0 auto 15px;
	padding: 7px 10px;
	cursor: pointer;
	font-weight: bold;
	font-size: 1rem;
	border-radius: 5px;

}

input.cookies-save  {
	background-color: forestgreen;
	border: 1px solid forestgreen;
	color: white;

}

.show-cookies-message input.cookies-save {
	margin: 20px auto 0 auto;
	display: block;

}

input.cookies-save:hover, input.cookies-save:focus {
	background-color: seagreen;

}

.annoying-cookie-bar {
	position: fixed;
	bottom: 40px;
	left: 40px;
	width: 520px;
	z-index: 9999999;
	background-color: white;
	border: solid 2px #F9917F;
	border-radius: 6px;

}

.cookies-message, .annoying-cookie-bar ul {
	padding: 0 20px;

}

.cookies-message h3 {
	font-family: 'PT Sans Bold', 'Trebuchet MS', sans-serif;

}

.annoying-cookie-bar ul {
	display: flex;
	justify-content: end;
	align-items: center;
	margin-bottom: 20px;

}

.annoying-cookie-bar a.cookies-settings {
	background-color: unset;
	border: 1px solid #2D649A;
	color: #2D649A;
	border-radius: 5px;
	padding: 6px 10px;
	margin-right: 15px;
	display: block;
	text-align: center;

}

.annoying-cookie-bar a.cookies-settings:hover, .annoying-cookie-bar a.cookies-settings:focus {
	color: midnightblue;

}

.annoying-cookie-bar input.cookies-save {
	background-color: #2D649A;
	color: white;
	border: none;
	cursor: pointer;
	font-weight: bold;
	display: block;
	border: 1px solid #2D649A;
	border-radius: 5px;
	padding: 7px 10px;

}

.annoying-cookie-bar input.cookies-save:hover, .annoying-cookie-bar input.cookies-save:focus {
	background-color: #439FD6;
	color: midnightblue;
	border-color: midnightblue;

}


/**********
MANAGE COOKIES
**********/
.hide-cookies-message {
	display: none;

}

fieldset.consent-choice {
	border: none;
	padding-top: 0;
	padding: 0 0 15px 0;

}

.consent-choice .slider-container {
	display: flex;

}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 66px;
  height: 34px;
	margin: 0 0 20px 10px;
	cursor: pointer;

}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.essential {
	cursor: not-allowed;

}

.essential .slider:before {
	left: 36px;

}

.off, .on {
	position: absolute;
	top: 7px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.0625em;

}

.off {
	right: 6px;

}

.on {
	left: 5px;
	color: white;

}

.on:not(.essential){
	display: none;

}

span.always {
	text-transform: uppercase;
	display: inline-block;
	margin: auto 0 26px 5px;

}

/* display 'switching on' */
.consent-choice input:checked + .slider, .essential .slider {
  background-color: green;

}

.consent-choice input:focus + .slider {
  outline: solid 2px grey;

}

.consent-choice input:checked + .slider:before {
  -webkit-transform: translateX(32px);
  -ms-transform: translateX(32px);
  transform: translateX(32px);

}

/* when switched on, change associated text */
.consent-choice input:checked ~ .off {
	display: none;

}

.consent-choice input:checked ~ .on {
  display: inline-block;

}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;

}

.slider.round:before {
  border-radius: 50%;

}