/*
Theme Name: The Bromley Bathroom Company
Theme URI: https://www.bromleybathroomcompany.co.uk/
Author: Supersonic Playground
Author URI: http://www.supersonicplayground.com/
Description: The Bromley Bathroom Company WordPress Theme
Version: 1.1
License: All work ©2017 Supersonic Playground Ltd. Not for public use.
License URI: http://www.supersonicplayground.com/
Tags: 
Text Domain: bromleybathroomcompany
*/
/* The global.less stylesheet is where all of the previous separate LESS stylesheets are compiled into one main style.css stylesheet. In this process, the LESS is converted to standard CSS that can be read by the web browser

To complie global.less into stadard CSS you will need a CSS Preprocessor that works with LESS. On Macs we use CodeKit and you can find out more about configuring CodeKit here. */
/* 
Use: Reset
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 01-reset.less stylesheet is intended to remove many of the default browser settings and styles that browsers apply as standard and which can be detrimental to a design. It essentially resets the browser to a blank canvas so that we can style our projects as they should look without the browser adjusting our styles. */
@import url("https://use.typekit.net/oaj6xel.css");
*,
*:before,
*:after {
  box-sizing: border-box !important;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: top;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* 
Use: Mixins
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 02-mixins.less stylesheet contains a selection of common mixin classes that can themselves be used within other classes. */
/*************************************************************************
 #Input Override
**************************************************************************/
/* This can be used on things like form input to ensure that browsers don't apply their own styling. For more info check out https://css-tricks.com/almanac/properties/a/appearance/. */
/*************************************************************************
 #Transition Bezier
**************************************************************************/
/* This creates a transition using the @cubicBezier variable that is set in setup.less. When you use this class in the styling for the element, you can replace the @timing with the actual time that you want, for example 500ms.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-bezier(500ms);
} */
/*************************************************************************
 #Transition Bezier Delay
**************************************************************************/
/* This works exactly the same as the above class, except that you can also add a delay by replacing the @delay with the time that you want the delay to be.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-bezier-delay(500ms, 250ms);
} */
/*************************************************************************
 #Transition Linear
**************************************************************************/
/* This creates a transition using the simple linear movement. As above, you can replace @timing with the time of the transition.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-linear(500ms);
} */
/*************************************************************************
 #Transition None
**************************************************************************/
/* This can be used to cancel any previous transitions on an element.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-none();
} */
/* 
Use: Measurements
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 03-measurements.less sets the global Base Level and Base Size, as well as the various breakpoint sizes. The purpose of this is so that all measurements throughout the site are based off of the one - which itself is a calculation based on the which is set in setup.less - in order to achieve uniformity across the project.

The benefit of this is that all sizes and measurements will share a common scale, i.e. be multiples of the Base Level - if the scale then needs to be adjusted up or down, only the Base Level would need adjusting here and the whole site will scale proportionally, avoiding the need to arbitrarily update all measurements throughtout the site. */
/*************************************************************************
 #Base Level
**************************************************************************/
/* This is the Base Level. All measurements throughout the project will be based from this. It uses the Base Pixel Equivalent which is set in setup.less which is then converted into a percentage by overwriting the browser's default setting of 16px for body copy. If the Base Level needs to be another pixel value equivalent, then adjust the Base Pixel Equivalent in setup.less. For example, if 18px was required, then set the Base Pixel Equivalent to 18 in setup.less. */
/*************************************************************************
 #Base Size
**************************************************************************/
/* This is the Base Size. The @base-level variable effectively sets the project's base font size to a certain level, which becomes the equivalent to 1rem. The @base-size variable then converts 1rem into a global variable that can be used throughout the project to set the size of elements such as text or modules.

So for example, if the Base Pixel Equivalent in setup.less is set to 20, and you needed to create an element that would normally be width: 100px, you would instead set this to width: @base-size*5. */
/*************************************************************************
 #Breakpoints
**************************************************************************/
/* These are the predefined breakpoint measurements. They convert the browser's default font size (16px) into 1em and then multiply it to achieve a predefined set of screen sizes for the various media queries below to be based off of. */
/* 400px */
/* 500px */
/* 650px */
/* 750px */
/* 850px */
/* 1000px */
/* 1100px */
/* 1250px */
/* 1500px */
/* 1750px */
/* 2000px */
/*************************************************************************
 #From Media Queries
**************************************************************************/
/* These are the predefined breakpoint variables for 'from' media queries. They take the breakpoint measurements from above and wrap them up as variables that can be called throughout the site's LESS files for media queries where stuff needs to happen 'from' a particular screen size.

Your LESS code would look something like this:

.my-class-name {
	@media @from-750 {
		.do-something;
	}
} */
/*************************************************************************
 #To Media Queries
**************************************************************************/
/* These are the predefined breakpoint variables for 'to' media queries. They take the breakpoint measurements from above and wrap them up as variables that can be called throughout the site's LESS files for media queries where stuff needs to happen 'to' a particular screen size.

Your LESS code would look something like this:

.my-class-name {
	@media @to-750 {
		.do-something;
	}
} */
/*************************************************************************
 #HTML Font Size Adjustment
**************************************************************************/
/* This is a series of media queries that adjusts the html font size to achieve responsive typography whereby all the text on the site will scale proportionally very slightly from small the large screens. It ensures that the text scales to be slightly larger on large screens and slightly smaller on small screens. If the text is too small/large at either end of the scale, you can adjust the multiples to suit. */
html {
  font-size: 90%;
}
@media screen and (min-width: 31.25em) {
  html {
    font-size: 98.4375%;
  }
}
@media screen and (min-width: 46.875em) {
  html {
    font-size: 104.0625%;
  }
}
@media screen and (min-width: 62.5em) {
  html {
    font-size: 112.5%;
  }
}
@media screen and (min-width: 78.125em) {
  html {
    font-size: 118.125%;
  }
}
@media screen and (min-width: 93.75em) {
  html {
    font-size: 123.75%;
  }
}
@media screen and (min-width: 109.375em) {
  html {
    font-size: 129.375%;
  }
}
@media screen and (min-width: 125em) {
  html {
    font-size: 135%;
  }
}
/* 
Use: Grid
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 04-grid.less contains the underlying grid system. It works based on a combination of Fluid Margins and Column Widths which are set in setup.less. */
/*************************************************************************
 #Multi-Column Layout
**************************************************************************/
/* This part creates a set of Column Modules, which group a set number of Fluid Margins and Column Widths. These are then used later in 07-content-layout.less to create the various layout Grid Modules that form the overall grid system and allow us to create our responsive grid system layouts. */
/* 
Use: Colours
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 05-colours.less stylesheet allows you to customise the colours of your project. This allows the colours to be set in once here and then referenced throughout the site's LESS files. The benefit of this is that they only need to be changed here and they will then update automatically throughout the site. The colours included in the Basic Front End Boilerplate are the standard Supersonic Playground brand colours, so you'll need to change them to whatever your project requires.

Also included are brand colours for various popular social networks. These can be kept if elements such as social sharing modules are included in the project, or removed if not.

Each colour consists of two parts: a variable and a mixin.

The Variable

This part is the variable. It contains the colour's hex value. This would be used throught the site's LESS files where a hex value would usually be used. For example: 'background-color: @blue-01'.

@blue-01: #133b75;

The Mixin

This part is the mixin. It creates a class that uses the variable's hex value to set the colour. This would be used throughtout the site's LESS files where a hex value would be used for the 'color:' property, for example text.

.blue-01() {
	color: @blue-01;
} */
/*************************************************************************
 #Colours
**************************************************************************/
/* #Core Colours ------------------------------------------------------------------------ */
/* 
Use: Typography
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 06-typography.less stylesheet allows you to customise the typography of your project. Certain elements will be consistent across all project, but some elements should be changed to suit the project - for example the fonts included in the Basic Front End Boilerplate are the standard Supersonic Playground fonts and should be replaced by the fonts that are specific to your project.

Please remember: the Base Pixel Equivalent will be used to create the base font size, and the actual size of elements like h1's, h2's etc should then be scaled from this base size. Both of these settings should be updated in the setup.less stylesheet and not within 06-typography.less. */
/*************************************************************************
 #Import Fonts
**************************************************************************/
/* Depending on the fonts being used, this section may or may not be needed so consult the documentation from the font provider in each case. Where possible, always try and host the fonts within your project as this places less dependancy on referencing external websites. For more information on creating font projects with external resources, see our guides on Setting Up a Fonts.com Project and Setting Up a Typekit Project. */
/*************************************************************************
 #Font Styles
**************************************************************************/
/* This part allows you to set the font styles for the site. Wherever possible, try and host the fonts locally to avoid external server calls. Insert your fonts below. */
/* Font Awesome is an icon font and is great for user interface iconography. The font files are hosted locally in the /fonts/ folder. For more info and to download the latest version visit http://fontawesome.io/ */
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("fonts/font-awesome/fa-brands-400.eot");
  src: url("fonts/font-awesome/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("fonts/font-awesome/fa-brands-400.woff2") format("woff2"), url("fonts/font-awesome/fa-brands-400.woff") format("woff"), url("fonts/font-awesome/fa-brands-400.ttf") format("truetype"), url("fonts/font-awesome/fa-brands-400.svg#fontawesome") format("svg");
}
.fab {
  font-family: 'Font Awesome 5 Brands';
}
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 300;
  src: url("fonts/font-awesome/fa-light-300.eot");
  src: url("fonts/font-awesome/fa-light-300.eot?#iefix") format("embedded-opentype"), url("fonts/font-awesome/fa-light-300.woff2") format("woff2"), url("fonts/font-awesome/fa-light-300.woff") format("woff"), url("fonts/font-awesome/fa-light-300.ttf") format("truetype"), url("fonts/font-awesome/fa-light-300.svg#fontawesome") format("svg");
}
.fal {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
}
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 400;
  src: url("fonts/font-awesome/fa-regular-400.eot");
  src: url("fonts/font-awesome/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("fonts/font-awesome/fa-regular-400.woff2") format("woff2"), url("fonts/font-awesome/fa-regular-400.woff") format("woff"), url("fonts/font-awesome/fa-regular-400.ttf") format("truetype"), url("fonts/font-awesome/fa-regular-400.svg#fontawesome") format("svg");
}
.far {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
}
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 900;
  src: url("fonts/font-awesome/fa-solid-900.eot");
  src: url("fonts/font-awesome/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("fonts/font-awesome/fa-solid-900.woff2") format("woff2"), url("fonts/font-awesome/fa-solid-900.woff") format("woff"), url("fonts/font-awesome/fa-solid-900.ttf") format("truetype"), url("fonts/font-awesome/fa-solid-900.svg#fontawesome") format("svg");
}
.fa,
.fas {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
}
.benton-modern {
  font-family: benton-modern-display, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.gill-sans {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
}
.gill-sans-italic {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  font-style: italic;
}
.gill-sans-bold {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 600;
}
.gill-sans-bold-italic {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 600;
  font-style: italic;
}
/*************************************************************************
 #Line Heights
**************************************************************************/
/* This part sets various line heights as mixins which can then be used further on in the LESS files. It's best practice to use straigh numbers instead of %, px or em. */
/*************************************************************************
 #Basic HTML
**************************************************************************/
/* This part allows you to customise the various basic typographic elements of the site. Please remember to set the Base Pixel Equivalent and header sizes in the setup.less stylesheet. */
/* This part sets a background colour for when a user selects a section of text. */
::-moz-selection {
  background-color: #1d1d1b;
  text-shadow: none;
  color: #FFFFFF;
}
::selection {
  background-color: #1d1d1b;
  text-shadow: none;
  color: #FFFFFF;
}
::-moz-selection {
  background-color: #1d1d1b;
  text-shadow: none;
  color: #FFFFFF;
}
/* This part sets the basic global font styles for the whole site. This acts as a fall back for when no other styles are being used. The fact that the font size is set to @base-size will reference the Base Size that we set in the Measurements LESS file. By default this is the equivalent to 20px. */
body {
  font-size: 1rem;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  color: #1d1d1b;
  line-height: 1.4;
}
/* This part sets the styles for headers. */
h1,
h2,
h3,
h4,
h5 {
  font-family: benton-modern-display, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #1d1d1b;
}
h1 {
  line-height: 1;
}
h2,
h3,
h4 {
  margin-bottom: 1rem;
  line-height: 1.2;
}
h5 {
  margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
p {
  margin-bottom: 1.5rem;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
p:last-child {
  margin-bottom: 0;
}
/* This part sets the anchor styles. */
a {
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  font-family: gill-sans-nova, sans-serif;
  font-weight: 600;
  color: #1d1d1b;
}
a.no-decoration {
  text-decoration: none;
}
p a {
  position: relative;
  text-decoration: none;
  padding: 0 0.25rem;
}
p a:after {
  position: absolute;
  content: '';
  bottom: -2px;
  left: 0;
  background-color: #33A5B8;
  height: 3px;
  width: 100%;
  opacity: 0.5;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  z-index: -1;
}
p a:hover {
  color: #FFFFFF;
}
p a:hover:after {
  height: 100%;
  opacity: 1;
}
/* This class allows text to be transformed to uppercase if required */
.uppercase {
  text-transform: uppercase;
}
/* This creates styles for a stand first, which is a way of emphasising the first paragraph in a block of copy. */
.standfirst {
  font-size: 1.5rem;
}
/* This sets the styles for bold/strong text. */
strong {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 600;
}
strong em,
strong i {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 600;
  font-style: italic;
}
/* This sets the styles for italic text. */
em,
i {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 600;
}
em strong,
i strong {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 600;
  font-style: italic;
}
/* This sets the styles for blockquotes. */
blockquote {
  margin-bottom: 1.5rem;
  padding: 2rem;
  background-color: #33A5B8;
  color: #FFFFFF;
}
blockquote:last-child {
  margin-bottom: 0;
}
blockquote p {
  font-family: benton-modern-display, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #FFFFFF;
}
blockquote p:before,
blockquote p:after {
  display: inline;
  font: inherit;
}
blockquote p:before {
  content: '“';
}
blockquote p:after {
  content: '”';
}
/* This creates a style for faded text. */
.faded {
  opacity: 0.5;
}
/* This class allows text to be striked through if required */
.strikethrough {
  text-decoration: line-through;
}
/* These classes allow text to hidden from view but still readable for screen readers for visually impaired people. */
.screen-reader,
.screenReader {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
}
/*************************************************************************
 #Font Awesome
**************************************************************************/
/* This creates a style for Font Awesome fonts. */
.font-awesome {
  font-family: 'FontAwesome';
  font-size: inherit;
  text-rendering: auto;
}
/* 
Use: Content Layout
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 07-content-layout.less stylesheet contains the various core elements that, when combined, allow you to create a vast array of layouts based on the core 12 column grid system that underpins this system.

The Basic Front End Boilerplate contains everything you need to start building layouts, but there are also a wide variety of extra modules throughout the The Bromley Bathroom Company that can be added to your project to further enhance the layout and functionality. */
/*************************************************************************
 #Outer Container
**************************************************************************/
/* The Outer Container is the basic top level wrapper that is intended to contain all of the content of a particular layout. You can use as many Outer Containers as you need to, and by default they are set to width: 100% and float: left so you can stack them on top of each other to create different sections withoin a layout.

The Outer Container can be used on its own to create a full width layout, or it can be combined with an Inner Container as a direct child element where the content of a layout needs a finite width. */
.outer-container {
  position: relative;
  float: left;
  width: 100%;
}
/*************************************************************************
 #Inner Container
**************************************************************************/
/* The Inner Container is intended to sit as a direct child of the Outer Container to give the content of the page a maximum width so that it does not stretch the full width of the page. It has a left and right margin of auto by default so that it is horizontally centered, but instead of using max-width, we adjust the left and right margin at certain media queries to give a more responsive adjustment.

The Inner Container is not intended to be used on its own, but is instead intended to house the various Grid Modules that are designed to create the various page layouts.

As the Inner Container can contain floated elements, it includes a psuedo :after element that clears the floats of the elements within the Inner Container, so that it will retain the overall height of the content within it. */
.inner-container {
  position: relative;
  margin: 0 1rem;
}
.inner-container:after {
  display: block;
  position: relative;
  content: '';
  clear: both;
}
@media screen and (min-width: 40.625em) {
  .inner-container {
    margin: 0 4%;
  }
}
@media screen and (min-width: 93.75em) {
  .inner-container {
    margin: 0 6%;
  }
}
@media screen and (min-width: 109.375em) {
  .inner-container {
    margin: 0 auto;
    max-width: 1500px;
  }
}
/*************************************************************************
 #Grid Modules
**************************************************************************/
/* The Grid Modules are a series of elements that are used to build the various layouts of the pages. Built on the underlying 12 column grid system found in 04-grid.less, each module is a made up of a certain number of @fluid-margin and @column-width measurements. For example, a one-third-page module is made up of 4x @column-width and 3x @fluid-margin.

They are designed to work in tandem with each other and are named accordingly, so a one-third-page element will sit alongside a two-thirds-page element.

By default, the Grid Modules only specify the width of the element and no other styles are applied. To position the modules correctly, they must also be combined with the various alignment and positioning classes found elsewhere in the system, most notably Vertical Margins, Vertical Padding, Internal Padding, Horizontal Positioning and Text Alignment.

Many of the classes have float clearing applied using :nth-child. This is to eliminate any odd rearrangements if the height of previous elements knocks them out of alignment. Please note: this float clearing is designed to work when classes of the same type are being used together, i.e. all one-third-page elements. It will cause errors in the arrangement if different classes are mixed together, so it should be removed if errors occur. */
.full-page,
.half-page,
.two-thirds-page,
.one-third-page,
.three-quarters-page,
.one-quarter-page,
.five-sixths-page,
.one-sixth-page {
  position: relative;
  z-index: 1;
}
.full-page .vertical-outer,
.half-page .vertical-outer,
.two-thirds-page .vertical-outer,
.one-third-page .vertical-outer,
.three-quarters-page .vertical-outer,
.one-quarter-page .vertical-outer,
.five-sixths-page .vertical-outer,
.one-sixth-page .vertical-outer {
  width: 100%;
}
.full-page,
.half-page,
.one-third-page,
.two-thirds-page,
.three-quarters-page,
.five-sixths-page {
  width: 93.996%;
}
@media screen and (min-width: 40.625em) {
  .half-page {
    width: 45.498%;
  }
  .half-page:nth-child(2n+3) {
    clear: both;
  }
}
@media screen and (min-width: 40.625em) {
  .two-thirds-page.center-align {
    width: 61.664%;
  }
}
@media screen and (min-width: 40.625em) {
  .one-third-page {
    width: 29.332%;
  }
  .one-third-page:nth-child(2n+3) {
    clear: none;
  }
  .one-third-page:nth-child(3n+4) {
    clear: both;
  }
}
.one-quarter-page {
  width: 45.498%;
}
.one-quarter-page:nth-child(2n+3) {
  clear: both;
}
@media screen and (min-width: 40.625em) {
  .one-quarter-page {
    width: 29.332%;
  }
  .one-quarter-page:nth-child(2n+3) {
    clear: none;
  }
  .one-quarter-page:nth-child(3n+4) {
    clear: both;
  }
}
@media screen and (min-width: 62.5em) {
  .one-quarter-page {
    width: 21.249%;
  }
  .one-quarter-page:nth-child(3n+4) {
    clear: none;
  }
  .one-quarter-page:nth-child(4n+5) {
    clear: both;
  }
}
@media screen and (min-width: 40.625em) {
  .three-quarters-page {
    width: 61.664%;
  }
}
@media screen and (min-width: 62.5em) {
  .three-quarters-page {
    width: 69.747%;
  }
}
.one-sixth-page {
  width: 45.498%;
}
.one-sixth-page:nth-child(3n+4) {
  clear: both;
}
@media screen and (min-width: 40.625em) {
  .one-sixth-page {
    width: 29.332%;
  }
  .one-sixth-page:nth-child(3n+4) {
    clear: none;
  }
  .one-sixth-page:nth-child(4n+5) {
    clear: both;
  }
}
@media screen and (min-width: 62.5em) {
  .one-sixth-page {
    width: 13.166%;
  }
  .one-sixth-page:nth-child(4n+5) {
    clear: none;
  }
  .one-sixth-page:nth-child(6n+7) {
    clear: both;
  }
}
.five-sixths-page {
  width: 61.664%;
}
@media screen and (min-width: 40.625em) {
  .five-sixths-page {
    width: 69.747%;
  }
}
@media screen and (min-width: 93.75em) {
  .five-sixths-page {
    width: 77.83%;
  }
}
/*************************************************************************
 #Vertical Margins
**************************************************************************/
/* The Vertical Margins allow you to create vertical spacing outside of both parent containers and their child elements. It’s very useful for separating sections and the modules within them by applying external spacing. The classes can be applied to Outer Containers, Inner Containers and any element within them, particularly Grid Modules.

There are two variants – full and half. By default full is @base-size*3, which is the pixel equivalent of 60px, and half is @base-size*1.5, which is the pixel equivalent of 30px. These values can changed to match your designs by updating the two variables @full-margin and @half-margin. */
/* Vertical Margin - this class has full margins top and bottom */
.vertical-margin {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
/* Vertical Margin Top - this class has only full margin top */
.vertical-margin-top {
  margin-top: 4rem;
}
/* Vertical Margin Bottom - this class has only full margin bottom */
.vertical-margin-bottom {
  margin-bottom: 4rem;
}
/* Vertical Half Margin - this class has half margins top and bottom */
.vertical-half-margin {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
/* Vertical Half Margin Top - this class has only half margin top */
.vertical-half-margin-top {
  margin-top: 2rem;
}
/* Vertical Half Margin Bottom - this class has only half margin bottom */
.vertical-half-margin-bottom {
  margin-bottom: 2rem;
}
/*************************************************************************
 #Vertical Padding
**************************************************************************/
/* The Vertical Padding allows you to create vertical spacing inside of both parent containers and their child elements. It's very useful for controlling the vertical rhythm of the page by applying internal spacing. The classes can be applied to Outer Containers, Inner Containers and any element within them, particularly Grid Modules.

There are two variants – full and half. By default full is @base-size*3, which is the pixel equivalent of 60px, and half is @base-size*1.5, which is the pixel equivalent of 30px. These values can changed to match your designs by updating the two variables @full-padding and @half-padding. */
/* Vertical Padding - this class has full padding top and bottom */
.vertical-padding {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
/* Vertical Padding Top - this class has only full padding top */
.vertical-padding-top {
  padding-top: 3rem;
}
/* Vertical Padding Bottom - this class has only full padding bottom */
.vertical-padding-bottom {
  padding-bottom: 3rem;
}
/* Vertical Half Padding - this class has half padding top and bottom */
.vertical-half-padding {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
/* Vertical Half Padding Top - this class has only half padding top */
.vertical-half-padding-top {
  padding-top: 1.5rem;
}
/* Vertical Half Padding Bottom - this class has only half padding bottom */
.vertical-half-padding-bottom {
  padding-bottom: 1.5rem;
}
/*************************************************************************
 #Modular Wrappers
**************************************************************************/
/* Modular Wrappers allows you to remove the bottom margin of the bottom row of multiple elements, therefore removing any unwanted white space when you have multiple elements stacked on top of each other. It works by wrapping the elements in a container that has a negative margin-bottom that is the same value of the element's bottom margin, which essentially cancels it out. This is useful if you have elements which need a margin-bottom to separate themselves from each other, but that don't need margin-bottom on the last row. For example if the parent container has padding top and bottom, there would be unwanted white space below the last row.

There are two variants - modular-wrapper-full and modular-wrapper-half. The former should be used with elements that have the vertical-margin or vertical-margin-bottom classes applied, while the latter should be used with elements that have the vertical-half-margin or vertical-half-margin-bottom classes applied. */
/* This gives both the Modular Wrappers the .clear-fix-after class so that any floats are cleared at the end. */
.modular-wrapper:after,
.modular-wrapper-full:after,
.modular-wrapper-half:after {
  display: block;
  position: relative;
  content: '';
  clear: both;
}
/* Modular Wrapper Full - this removes the bottom margin from the last row of elements that have the vertical-margin or vertical-margin-bottom classes applied. */
.modular-wrapper-full {
  margin-bottom: -4rem;
}
/* Modular Wrapper Half - this removes the bottom margin from the last row of elements that have the vertical-half-margin or vertical-half-margin-bottom classes applied. */
.modular-wrapper-half {
  margin-bottom: -2rem;
}
/*************************************************************************
 #Internal Padding
**************************************************************************/
/* The Internal Padding is a simplified alternative to the Vertical Margins and Vertical Padding, and is intended to be used with elements to create a uniform padding within the element. By default full is @base-size*3, which is the pixel equivalent of 60px, and half is @base-size*1.5, which is the pixel equivalent of 30px. These values can be adjusted based on the designs. */
/* Internal Padding - this class has full padding */
.internal-padding {
  padding: 1.5rem;
}
@media screen and (min-width: 46.875em) {
  .internal-padding {
    padding: 3rem;
  }
}
/* Internal Half Padding - this class has half padding */
.internal-half-padding {
  padding: 1rem;
}
@media screen and (min-width: 46.875em) {
  .internal-half-padding {
    padding: 1.5rem;
  }
}
/*************************************************************************
 #Horizontal Alignment
**************************************************************************/
/* The Horizontal Alignment classes allow you to set the horizontal position that elements will occupy within an Inner Container. There are a range of classes to suit the layout of the designs.

Centred Alignment

This allows you to centre items within a container, and is particularly useful if you have modules of an uneven number of modules across multiple rows and don't want empty white space to the left or right of the bottom row, i.e. 3 on the top row and 2 on the bottom row. The central alignment is achieved using display: inline-block instead of floats.

In order to achieve centre alignment, you will need to combine two classes: center-container and center-align.

center-container

This class needs to be applied to the parent container of the modules, i.e. to the Inner Container. */
.center-container {
  /* This will align the items centrally, but will also align the text centrally as well, so if you want the text to be left-aligned, you can overwrite this with the .left-text class further on. */
  text-align: center;
  /* The negative word-spacing gets rid of the extra empty space to the right that inline-block elements create. It is a better alternative to setting a negative margin-right. */
  word-spacing: -0.35rem;
}
/* center-align

This class needs to be applied to the actual modules themselves, with the above center-container class applied to the parent container. */
.center-align {
  display: inline-block;
  float: none;
  /* This sets the left and right margins of the modules to be half the Fluid Margin. This is so that when the modules but up against each other, the combined half margins give the illusion of a full Fluid Margin. */
  margin-left: 1.5%;
  margin-right: 1.5%;
  /* This resets the negative word-spacing that is set on the parent container and ensures that the words within the module read as they should. */
  word-spacing: normal;
}
/* Left- and right-aligned

This allows you to align items either to the left or right using floats. Both classes are very similar, but whereas the center-align class has @fluid-margin*0.5 on both sides, these classes have a full @fluid-margin on just the side that they are floating. */
.left-align {
  display: block;
  float: left;
  margin-left: 3%;
  margin-right: 0;
  word-spacing: normal;
}
.right-align {
  display: block;
  float: right;
  margin-right: 3%;
  margin-left: 0;
  word-spacing: normal;
}
/* Clear Fix

These two classes allow you to add elements after modules to clear any floats. The first clear-fix class can be applied to an element to make it clear the floats. The second clear-fix-after can be applied to a parent container to create a pseudo element within the container that will clear the floats of all elements within it. */
.clear-fix {
  clear: both;
}
.clear-fix-after:after {
  display: block;
  position: relative;
  content: '';
  clear: both;
}
/*************************************************************************
 #Text Alignment
**************************************************************************/
/* The Text Alignment allows you to set the alignment of text within an element. */
.center-text {
  text-align: center;
}
.left-text {
  text-align: left;
}
.right-text {
  text-align: right;
}
/*************************************************************************
 #Table-Based Vertical Positioning
**************************************************************************/
.vertical-outer-table {
  display: table!important;
  width: 100%;
  height: 100%;
}
.vertical-outer-table .vertical-top,
.vertical-outer-table .vertical-middle,
.vertical-outer-table .vertical-bottom {
  display: table-cell;
}
.vertical-outer-table .vertical-top {
  vertical-align: top;
}
.vertical-outer-table .vertical-middle {
  vertical-align: middle;
}
.vertical-outer-table .vertical-bottom {
  vertical-align: bottom;
}
/*************************************************************************
 #Flex-Based Vertical Positioning
**************************************************************************/
.vertical-outer-flex {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}
.vertical-outer-flex .vertical-top,
.vertical-outer-flex .vertical-middle,
.vertical-outer-flex .vertical-bottom {
  width: 100%;
}
.vertical-outer-flex .vertical-top {
  align-self: flex-start;
}
.vertical-outer-flex .vertical-middle {
  align-self: center;
}
.vertical-outer-flex .vertical-bottom {
  align-self: flex-end;
}
/*************************************************************************
 #Even Height
**************************************************************************/
@media screen and (max-width: 40.625em) {
}
/*************************************************************************
 #Modules
**************************************************************************/
.full-width,
.half-width,
.one-third-width,
.quarter-width {
  float: left;
  word-spacing: normal;
}
@media screen and (max-width: 40.625em) {
  .full-width.even-height,
  .half-width.even-height,
  .one-third-width.even-height,
  .quarter-width.even-height {
    height: auto!important;
  }
}
.full-width {
  width: 100%;
}
.half-width {
  width: 50%;
}
@media screen and (max-width: 40.625em) {
  .half-width {
    width: 100%;
  }
}
.half-width.content-right {
  float: right;
}
.one-third-width {
  width: 33.3%;
}
@media screen and (max-width: 78.125em) {
  .one-third-width {
    width: 50%;
  }
}
@media screen and (max-width: 40.625em) {
  .one-third-width {
    width: 100%;
  }
}
.quarter-width {
  width: 25%;
}
@media screen and (max-width: 40.625em) {
  .quarter-width {
    width: 50%;
  }
}
@media screen and (max-width: 78.125em) {
  .row:nth-child(odd) .one-third-width {
    float: right;
  }
}
/* 
Use: Image Treatments
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* This file contains the various classes that apply to the images throughout the site. */
/*************************************************************************
 #Scaling
**************************************************************************/
.full-width-image {
  width: 100%;
  height: auto;
}
.full-height-image {
  height: 100%;
  width: auto;
}
/*************************************************************************
 #Lazy Loading Images
**************************************************************************/
.image-container img {
  transition: all 350ms cubic-bezier(0.5, 0, 0.5, 1);
  opacity: 1;
}
.image-container img.lazy {
  opacity: 0;
}
/*************************************************************************
 #CSS Object Fit Responsive Image
**************************************************************************/
.responsive-image {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.responsive-image.responsive-background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.responsive-image > .image-container {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%!important;
  height: 100%!important;
}
.responsive-image > .image-container img {
  width: 100%;
  height: 100%;
}
.responsive-image-crop,
.responsive-image-fit {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.responsive-image-crop.responsive-background-image,
.responsive-image-fit.responsive-background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.responsive-image-crop > .image-container,
.responsive-image-fit > .image-container {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%!important;
  height: 100%!important;
}
.responsive-image-crop > .image-container img,
.responsive-image-fit > .image-container img {
  width: 100%;
  height: 100%;
}
.responsive-image-crop .image-container img {
  -o-object-fit: cover;
     object-fit: cover;
}
.responsive-image-fit .image-container img {
  -o-object-fit: contain;
     object-fit: contain;
}
/*************************************************************************
 #Aspect Ratios for Responsive Images
**************************************************************************/
/* #4:3 Ratio ------------------------------------------------------------------------ */
.four-by-three {
  padding-bottom: 75%;
}
/* #16:9 Ratio ------------------------------------------------------------------------ */
.sixteen-by-nine {
  padding-bottom: 56.25%;
}
/* #16:10 Ratio ------------------------------------------------------------------------ */
.sixteen-by-ten {
  padding-bottom: 62%;
}
/* #3:1 Ratio ------------------------------------------------------------------------ */
.three-by-one {
  padding-bottom: 33%;
}
/* #2:1 Ratio ------------------------------------------------------------------------ */
.two-by-one {
  padding-bottom: 50%;
}
/* #3:2 Ratio ------------------------------------------------------------------------ */
.three-by-two {
  padding-bottom: 66%;
}
/* #1:1 Ratio ------------------------------------------------------------------------ */
.one-by-one {
  padding-bottom: 100%;
}
/* #1:14 Ratio ------------------------------------------------------------------------ */
.one-by-one-four {
  padding-bottom: 141%;
}
/* #1:2 Ratio ------------------------------------------------------------------------ */
.one-by-two {
  padding-bottom: 200%;
}
/*************************************************************************
 #Parallax Image
**************************************************************************/
.parallax-image {
  position: relative;
  overflow: hidden;
}
.parallax-image > img:first-of-type {
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  transform: translate3D(-50%, 0px, 0);
  opacity: 0.2;
}
/*************************************************************************
 #Standard WordPress Alignment Classes
**************************************************************************/
img {
  height: auto;
}
img.alignleft {
  width: 100%;
  margin-bottom: 1rem;
}
@media screen and (min-width: 31.25em) {
  img.alignleft {
    float: left;
    width: auto;
    margin-right: 1rem;
  }
}
img.aligncenter {
  display: block;
  margin-left: auto;
  margin-bottom: 1rem;
  margin-right: auto;
}
img.alignright {
  width: 100%;
  margin-bottom: 1rem;
}
@media screen and (min-width: 31.25em) {
  img.alignright {
    float: right;
    margin-left: 1rem;
  }
}
img.full-width {
  width: 100%;
  height: auto;
}
img.size-thumbnail {
  width: 50%;
}
@media screen and (min-width: 31.25em) {
  img.size-thumbnail {
    width: 25%;
  }
}
img.size-medium {
  width: 100%;
}
@media screen and (min-width: 31.25em) {
  img.size-medium {
    width: 50%;
  }
}
img.size-large {
  width: 100%;
}
@media screen and (min-width: 40.625em) {
  img.size-large {
    width: 75%;
  }
}
/*************************************************************************
 #Responsive Video Container
**************************************************************************/
.video-container {
  position: relative;
  margin-bottom: 1.5rem;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*************************************************************************
 #Standard WordPress Alignment Classes
**************************************************************************/
img {
  height: auto;
}
img.alignleft,
img.alignright {
  width: 100%;
  margin-bottom: 1rem;
}
@media screen and (min-width: 31.25em) {
  img.alignleft,
  img.alignright {
    width: auto;
  }
}
@media screen and (min-width: 31.25em) {
  img.alignleft {
    float: left;
    margin-right: 1rem;
  }
}
@media screen and (min-width: 31.25em) {
  img.alignright {
    float: right;
    margin-left: 1rem;
  }
}
img.aligncenter {
  display: block;
  margin-left: auto;
  margin-bottom: 1rem;
  margin-right: auto;
}
img.full-width,
img.size-full,
img.alignnone {
  width: 100%;
  height: auto;
}
img.size-thumbnail {
  width: 50%;
}
@media screen and (min-width: 31.25em) {
  img.size-thumbnail {
    width: 25%;
  }
}
img.size-medium {
  width: 100%;
}
@media screen and (min-width: 31.25em) {
  img.size-medium {
    width: 50%;
  }
}
img.size-large {
  width: 100%;
}
@media screen and (min-width: 40.625em) {
  img.size-large {
    width: 75%;
  }
}
.wp-caption-text {
  color: #33A5B8;
  padding: 0.5rem 0;
  margin-bottom: 1.5rem !important;
}
/* 
Use: UI
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 09-ui.less stylesheet contains the core button styles for you to customise buttons. The core .button class can be applied to both button and anchor elements, and more styles can be added to it.

Included Styles

There are a number of styles included within the Basic Front End Boilerplate to help you get a project up and running. You'll notice that the additional styles are included within the main .button class using &.class. This is because each of the styles needs to be added to the HTML element in order to combine them - on their own, the won't work.

So when creating a button in your HTML, your markup should look like the below:

<a href="" class="button medium blue-fill">Click me</a>

Size Classes

There are three different size classes using the small, medium and large classes.

Visual Classes

There are two different visual classes; expanding-button and static-button. However, these two classes are mixins and are not intended to be be used on their own. Instead they have been included within the blue-fill, blue-static, white-fill and white-static classes. The expanding-button class uses the :before and :after psuedo classes to create an expanding animation effect. The static-button classes are fall backs for instances where psuedo classes are not supported, for example within buttons. */
/*************************************************************************
 #UI controls
**************************************************************************/
/* #Buttons ------------------------------------------------------------------------ */
.button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  display: inline-block;
  position: relative;
  margin: 0 0 1.5rem 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  text-align: center;
  text-indent: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  border: none;
  border-bottom: none;
  text-shadow: none;
  cursor: pointer;
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 1;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.button:last-child {
  margin-bottom: 0;
}
.button:focus {
  outline: none;
}
.button:hover {
  border-bottom: none;
}
.button:before,
.button:after {
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  display: block;
  position: absolute;
  content: '';
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
}
.button:before {
  z-index: -2;
}
.button:after {
  z-index: -1;
}
.button.small {
  padding: 1rem;
}
.button.medium {
  padding: 1rem 1.5rem;
}
.button.large {
  padding: 1rem 2rem;
}
.button.white-button {
  color: #33A5B8;
  background-color: #FFFFFF;
}
.button.white-button:before {
  position: absolute;
  content: '';
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.button.white-button:after {
  position: absolute;
  content: '';
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #78cbd9;
  transform: scale(0.65);
  opacity: 0;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
}
.button.white-button:hover {
  color: #FFFFFF;
}
.button.white-button:hover:after {
  transform: scale(1);
  opacity: 1;
}
.button.teal-button {
  color: #FFFFFF;
  background-color: #33A5B8;
}
.button.teal-button:before {
  position: absolute;
  content: '';
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.button.teal-button:after {
  position: absolute;
  content: '';
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #288190;
  transform: scale(0.65);
  opacity: 0;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
}
.button.teal-button:hover:after {
  transform: scale(1);
  opacity: 1;
}
.button.static-button {
  transition: none;
}
.button.black-static-button {
  transition: none;
  color: #FFFFFF;
  background-color: #1d1d1b;
}
/* 
Use: Forms
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 10-lists.less stylesheet contains the basic list styles, as well as allowing custom list styles to be created to suit the design of the project.

For uls and ols, there is some basic indenting and styling defined that will affect all standard lists. There is also an additional .no-style-list class that can be added to a ul and ol to remove the basic styling when needed. */
/*************************************************************************
 #Basic Lists
**************************************************************************/
ul,
ol {
  /* This part indents the lists and creates common list styles. */
  margin-bottom: 1.5rem;
  margin-left: 2rem;
  list-style-position: outside;
}
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}
ul li,
ol li {
  margin-bottom: 0.5rem;
}
ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}
ul li ul,
ol li ul,
ul li ol,
ol li ol {
  margin-top: 0.5rem;
}
ul li {
  list-style-type: square;
}
ol li {
  list-style-type: decimal;
}
/* This part allows the above list styles to be removed. */
.no-style-list {
  margin-left: 0;
}
.no-style-list li {
  list-style-type: none;
  margin-bottom: 0;
}
.no-style-list li ul,
.no-style-list li ol {
  margin-top: 0;
}
ul.social-links {
  margin-left: 0;
}
ul.social-links li {
  list-style-type: none;
  margin-bottom: 0;
}
ul.social-links li ul,
ul.social-links li ol {
  margin-top: 0;
}
ul.social-links li {
  display: inline-block;
  position: relative;
  text-align: center;
}
ul.social-links li a {
  display: block;
  background-color: #33A5B8;
  height: 1.5rem;
  width: 1.5rem;
  line-height: 1.5rem;
}
ul.social-links li a:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background-color: #1d1d1b;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  opacity: 0.25;
}
ul.social-links li a:hover:after {
  height: 100%;
}
ul.social-links li a:before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  transition: all 350ms cubic-bezier(0.5, 0, 0.5, 1);
  font-family: 'Font Awesome 5 Brands';
  color: #FFFFFF;
  font-size: 0.75rem;
  height: 1.5rem;
  width: 1.5rem;
  line-height: 1.5rem;
}
ul.social-links li.facebook a:before {
  content: '\f39e';
}
ul.social-links li.twitter a:before {
  content: '\f099';
}
ul.social-links li.linkedin a:before {
  content: '\f0e1';
}
ul.social-links li.instagram a:before {
  content: '\f16d';
}
ul.social-links li.pinterest a:before {
  content: '\f231';
}
ul.social-links li.youtube a:before {
  content: '\f167';
}
ul.social-links li.email a:before {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  content: '\f0e0';
}
/* #Share Module ------------------------------------------------------------------------ */
.share-module p,
.share-module ul.social-links {
  display: inline-block;
}
.share-module p {
  font-size: 0.9rem;
  font-family: benton-modern-display, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 0;
  line-height: 1.5rem;
}
.share-module ul.social-links li {
  margin: 0 0.125rem;
}
.share-module ul.social-links li a {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.25rem;
}
.share-module ul.social-links li i:before {
  font-size: 0.75rem;
}
/*************************************************************************
 #Pagination
**************************************************************************/
.pagination ul {
  margin-left: 0;
  margin: 0 auto;
}
.pagination ul li {
  list-style-type: none;
  margin-bottom: 0;
}
.pagination ul li ul,
.pagination ul li ol {
  margin-top: 0;
}
.pagination ul li {
  display: inline-block;
  margin-right: 0.5rem;
}
.pagination ul li a {
  color: #FFFFFF;
  text-decoration: none;
  background-color: #33A5B8;
  overflow: hidden;
}
.pagination ul li:last-child {
  margin-right: 0;
}
.pagination ul .page-numbers {
  position: relative;
  display: block;
  height: 2rem;
  width: 2rem;
  line-height: 2rem;
  text-align: center;
}
.pagination ul .page-numbers:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background-color: #1d1d1b;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  opacity: 0.25;
}
.pagination ul .page-numbers:hover:after {
  height: 100%;
}
.pagination ul .page-numbers.current {
  color: #FFFFFF;
  background: #1d1d1b;
  cursor: default;
}
.pagination ul .page-numbers.current:after {
  display: none;
}
.pagination ul .page-numbers.current:hover {
  color: #FFFFFF;
  background: #1d1d1b;
}
.pagination ul .page-numbers.next,
.pagination ul .page-numbers.prev {
  display: none;
  font-size: 3rem;
  line-height: 1.5rem;
  color: #FFFFFF;
  background-color: #33A5B8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.pagination ul .page-numbers.next:hover,
.pagination ul .page-numbers.prev:hover {
  background-color: #1d1d1b;
}
/* 
Use: Modular
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 11-modular.less stylesheet allows custom module styles to be created to suit the design of the project. These should be any modular item that is used in a continuous or repetitive way. */
/*************************************************************************
 #Section Colours
**************************************************************************/
.black-section {
  background-color: #1d1d1b;
  color: #FFFFFF;
}
.black-section h1,
.black-section h2,
.black-section h3,
.black-section h4,
.black-section a {
  color: #FFFFFF;
}
.teal-section {
  background-color: #33A5B8;
  color: #FFFFFF;
}
.teal-section h1,
.teal-section h2,
.teal-section h3,
.teal-section h4,
.teal-section a {
  color: #FFFFFF;
}
.grey-section {
  background-color: #EAEAEA;
  color: #1d1d1b;
}
.grey-section h1,
.grey-section h2,
.grey-section h3,
.grey-section h4,
.grey-section a {
  color: #1d1d1b;
}
/*************************************************************************
 #Service modules
**************************************************************************/
.service-modules h3 {
  position: relative;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #33A5B8;
  text-transform: uppercase;
  width: 66.6%;
  margin: 0 auto 2rem;
}
.service-modules h3 span {
  position: relative;
  padding: 0 0.75rem;
  background-color: #EAEAEA;
}
.service-modules h3:before {
  position: absolute;
  content: '';
  width: 100%;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -1px;
  height: 1px;
  background-color: #33A5B8;
}
.service-modules h4 {
  font-size: 1.75rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 78.125em) {
  .service-modules .row .image-container img {
    transition: all 1500ms cubic-bezier(0.5, 0, 0.5, 1);
  }
  .service-modules .row:hover .image-container img {
    transform: scale(1.05);
  }
}
/*************************************************************************
 #Side by side modules
**************************************************************************/
.side-by-side-module h3 {
  margin-bottom: 2rem;
}
.side-by-side-module .button {
  margin-top: 0.5rem;
}
.side-by-side-module .image-container img {
  transition: all 1500ms cubic-bezier(0.5, 0, 0.5, 1);
}
.side-by-side-module:hover .image-container img {
  transform: scale(1.05);
}
/*************************************************************************
 #Image modules
**************************************************************************/
.image-module .responsive-image-crop.landscape {
  padding-bottom: 50%;
}
@media screen and (min-width: 40.625em) {
  .image-module .responsive-image-crop.landscape {
    padding-bottom: 56.25%;
  }
}
/*************************************************************************
 #Testimonials
**************************************************************************/
.testimonials {
  margin: 1rem 0;
}
@media screen and (min-width: 40.625em) {
  .testimonials {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
}
.testimonials .mark {
  width: 4rem;
  margin-bottom: 2rem;
}
.testimonials blockquote {
  padding: 0;
}
.testimonials + .map-section {
  margin-top: 0;
}
.testimonials + .brands {
  margin-top: 0;
}
/*************************************************************************
 #Process Steps
**************************************************************************/
.process-introduction {
  margin: 1rem 0;
}
@media screen and (min-width: 40.625em) {
  .process-introduction {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
}
.process-steps .left {
  float: left;
}
@media screen and (min-width: 62.5em) {
  .process-steps .left.step-content {
    padding: 2rem 2rem 2rem 0;
  }
  .process-steps .left.step-image {
    padding: 0 2rem 0 0;
  }
}
.process-steps .right {
  float: right;
}
@media screen and (min-width: 62.5em) {
  .process-steps .right.step-content {
    padding: 2rem 0 2rem 2rem;
  }
  .process-steps .right.step-image {
    padding: 0 0 0 2rem;
  }
}
.process-steps .step-content,
.process-steps .step-image {
  width: 50%;
  word-spacing: normal;
}
@media screen and (max-width: 62.5em) {
  .process-steps .step-content,
  .process-steps .step-image {
    width: 100%;
  }
}
@media screen and (max-width: 62.5em) {
  .process-steps .step-content.even-height,
  .process-steps .step-image.even-height {
    height: auto!important;
  }
}
.process-steps .step-image .responsive-image-crop {
  padding-bottom: 100%;
}
@media screen and (min-width: 40.625em) {
  .process-steps .step-image .responsive-image-crop {
    padding-bottom: 56.25%;
  }
}
@media screen and (min-width: 62.5em) {
  .process-steps .step-image .responsive-image-crop {
    padding-bottom: 100%;
  }
}
@media screen and (max-width: 62.5em) {
  .process-steps .step-content {
    margin: 3rem 0 1rem;
    text-align: center;
  }
}
.process-steps .step-content .vertical-outer-table {
  border: 2px solid #EAEAEA;
}
.process-steps .step-content .vertical-outer-table .vertical-middle {
  padding: 3rem;
}
.process-steps .step-content .step-title {
  position: relative;
}
.process-steps .step-content .step-title h3 {
  margin-bottom: 2rem;
}
.process-steps .step-content .step-title .step-counter {
  position: absolute;
  background-color: #33A5B8;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  color: #FFFFFF;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem;
  height: 4rem;
  width: 4rem;
  left: -5rem;
  top: -1rem;
}
@media screen and (max-width: 62.5em) {
  .process-steps .step-content .step-title .step-counter {
    top: -5rem;
    left: 50%;
    margin-left: -2rem;
  }
}
.process-steps .step-content .step-title .step-counter:before,
.process-steps .step-content .step-title .step-counter:after {
  content: '';
  position: absolute;
  height: 1.5rem;
  width: 4rem;
  left: 0;
  background-color: #FFFFFF;
}
.process-steps .step-content .step-title .step-counter:before {
  top: -1.5rem;
}
@media screen and (max-width: 62.5em) {
  .process-steps .step-content .step-title .step-counter:before {
    height: 4rem;
    width: 1.5rem;
    top: 0;
    left: -1.5rem;
  }
}
.process-steps .step-content .step-title .step-counter:after {
  bottom: -1.5rem;
}
@media screen and (max-width: 62.5em) {
  .process-steps .step-content .step-title .step-counter:after {
    height: 4rem;
    width: 1.5rem;
    top: 0;
    right: -1.5rem;
    left: auto;
    bottom: auto;
  }
}
.process-steps .step-content .step-title .step-counter .title,
.process-steps .step-content .step-title .step-counter .count {
  display: block;
  width: 100%;
}
.process-steps .step-content .step-title .step-counter .title {
  font-size: 0.75rem;
}
.process-steps .step-content .step-title .step-counter .count {
  font-size: 1.75rem;
  line-height: 2rem;
}
/*************************************************************************
 #Contact Page
**************************************************************************/
.hero-map {
  width: 100%;
  min-height: 30vh;
}
@media screen and (min-width: 40.625em) {
  .hero-map {
    min-height: 60vh;
  }
}
.hero-map img {
  max-width: inherit !important;
}
.contact-information .email,
.contact-information .telephone {
  display: block;
  clear: left;
  text-decoration: none;
  margin-top: 1rem;
}
.contact-information .email span,
.contact-information .telephone span {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
}
.contact-information .telephone + .email {
  margin-top: 0;
}
.contact-information .opening-times {
  margin-top: 1rem;
  margin-left: 0;
}
.contact-information .opening-times li {
  list-style-type: none;
  margin-bottom: 0;
}
.contact-information .opening-times li ul,
.contact-information .opening-times li ol {
  margin-top: 0;
}
/*************************************************************************
 #Inspiration
**************************************************************************/
.post-type-archive-inspiration .video-content,
.post-type-archive-inspiration .image-content {
  text-decoration: none;
}
.post-type-archive-inspiration .video-content h2,
.post-type-archive-inspiration .image-content h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
.post-type-archive-inspiration .video-content .subtitle,
.post-type-archive-inspiration .image-content .subtitle {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-bottom: 0;
}
.post-type-archive-inspiration .video-content .image:before,
.post-type-archive-inspiration .image-content .image:before {
  position: absolute;
  content: '';
  background-color: #33A5B8;
  height: 50%;
  width: 50%;
  left: 25%;
  top: 25%;
  right: 25%;
  bottom: 25%;
  opacity: 0;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  z-index: 10;
}
.post-type-archive-inspiration .video-content:hover .image:before,
.post-type-archive-inspiration .image-content:hover .image:before {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
}
.post-type-archive-inspiration .video-content:hover .image-container:before,
.post-type-archive-inspiration .image-content:hover .image-container:before {
  color: #33A5B8;
}
.post-type-archive-inspiration .video-content:hover .image-container:after,
.post-type-archive-inspiration .image-content:hover .image-container:after {
  background-color: #FFFFFF;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.post-type-archive-inspiration .video-content:hover .image-container img,
.post-type-archive-inspiration .image-content:hover .image-container img {
  transform: scale(1.05);
}
.post-type-archive-inspiration .video-content .image-container:before,
.post-type-archive-inspiration .image-content .image-container:before,
.post-type-archive-inspiration .video-content .image-container:after,
.post-type-archive-inspiration .image-content .image-container:after {
  position: absolute;
  z-index: 10;
  content: '';
  height: 3rem;
  width: 3rem;
  top: 50%;
  margin-top: -1.5rem;
  left: 50%;
  margin-left: -1.5rem;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.post-type-archive-inspiration .video-content .image-container:before,
.post-type-archive-inspiration .image-content .image-container:before {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  color: #FFFFFF;
  font-size: 1.25rem;
  line-height: 3rem;
  z-index: 20;
  -webkit-font-smoothing: none;
}
.post-type-archive-inspiration .video-content .image-container:after,
.post-type-archive-inspiration .image-content .image-container:after {
  background-color: #33A5B8;
  border-radius: 50%;
}
.post-type-archive-inspiration .video-content .image-container:before {
  content: '\f04b';
  padding-left: 5px;
}
.post-type-archive-inspiration .image-content .image-container:before {
  content: '\f067';
}
.post-type-archive-inspiration .additional-gallery-items {
  display: none;
}
/* 
Use: Carousels
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/*************************************************************************
 #Hero Carousels
**************************************************************************/
/* #CSS Carousel Setup ------------------------------------------------------------------------ */
.css-carousel-items {
  margin-left: 0;
  margin-bottom: 0;
}
.css-carousel-items li {
  list-style-type: none;
  margin-bottom: 0;
}
.css-carousel-items li ul,
.css-carousel-items li ol {
  margin-top: 0;
}
.css-carousel-items li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.css-carousel-items li:nth-of-type(2),
.css-carousel-items li:nth-of-type(3),
.css-carousel-items li:nth-of-type(4) {
  opacity: 0;
}
.css-carousel-items.two li:nth-of-type(1) {
  -webkit-animation: twofade 10s infinite;
          animation: twofade 10s infinite;
}
.css-carousel-items.two li:nth-of-type(2) {
  -webkit-animation: twofade2 10s infinite;
          animation: twofade2 10s infinite;
}
@-webkit-keyframes twofade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes twofade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes twofade2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes twofade2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.css-carousel-items.three li:nth-of-type(1) {
  -webkit-animation: threefade 15s infinite;
          animation: threefade 15s infinite;
}
.css-carousel-items.three li:nth-of-type(2) {
  -webkit-animation: threefade2 15s infinite;
          animation: threefade2 15s infinite;
}
.css-carousel-items.three li:nth-of-type(3) {
  -webkit-animation: threefade3 15s infinite;
          animation: threefade3 15s infinite;
}
@-webkit-keyframes threefade {
  0% {
    opacity: 1;
  }
  33.333% {
    opacity: 0;
  }
  66.666% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes threefade {
  0% {
    opacity: 1;
  }
  33.333% {
    opacity: 0;
  }
  66.666% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes threefade2 {
  0% {
    opacity: 0;
  }
  33.333% {
    opacity: 1;
  }
  66.666% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes threefade2 {
  0% {
    opacity: 0;
  }
  33.333% {
    opacity: 1;
  }
  66.666% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes threefade3 {
  0% {
    opacity: 0;
  }
  33.333% {
    opacity: 0;
  }
  66.666% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes threefade3 {
  0% {
    opacity: 0;
  }
  33.333% {
    opacity: 0;
  }
  66.666% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.css-carousel-items.four li:nth-of-type(1) {
  -webkit-animation: fourfade 20s infinite;
          animation: fourfade 20s infinite;
}
.css-carousel-items.four li:nth-of-type(2) {
  -webkit-animation: fourfade2 20s infinite;
          animation: fourfade2 20s infinite;
}
.css-carousel-items.four li:nth-of-type(3) {
  -webkit-animation: fourfade3 20s infinite;
          animation: fourfade3 20s infinite;
}
.css-carousel-items.four li:nth-of-type(4) {
  -webkit-animation: fourfade4 20s infinite;
          animation: fourfade4 20s infinite;
}
@-webkit-keyframes fourfade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fourfade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fourfade2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fourfade2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fourfade3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fourfade3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fourfade4 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fourfade4 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* #Hero Carousel ------------------------------------------------------------------------ */
.hero-carousel {
  position: relative;
  min-height: 30vh;
  overflow: hidden;
  background-color: #1d1d1b;
  color: #FFFFFF;
}
.hero-carousel h1,
.hero-carousel h2,
.hero-carousel h3,
.hero-carousel h4,
.hero-carousel a {
  color: #FFFFFF;
}
@media screen and (min-width: 40.625em) {
  .hero-carousel {
    min-height: 60vh;
  }
}
.hero-carousel:before {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #1d1d1b;
  opacity: 0.45;
}
.hero-carousel ul {
  margin-left: 0;
  margin-bottom: 0;
}
.hero-carousel ul li {
  list-style-type: none;
  margin-bottom: 0;
}
.hero-carousel ul li ul,
.hero-carousel ul li ol {
  margin-top: 0;
}
.hero-carousel ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.hero-carousel ul li:nth-of-type(2),
.hero-carousel ul li:nth-of-type(3),
.hero-carousel ul li:nth-of-type(4) {
  opacity: 0;
}
.hero-carousel ul.two li:nth-of-type(1) {
  -webkit-animation: twofade 10s infinite;
          animation: twofade 10s infinite;
}
.hero-carousel ul.two li:nth-of-type(2) {
  -webkit-animation: twofade2 10s infinite;
          animation: twofade2 10s infinite;
}
@keyframes twofade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes twofade2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.hero-carousel ul.three li:nth-of-type(1) {
  -webkit-animation: threefade 15s infinite;
          animation: threefade 15s infinite;
}
.hero-carousel ul.three li:nth-of-type(2) {
  -webkit-animation: threefade2 15s infinite;
          animation: threefade2 15s infinite;
}
.hero-carousel ul.three li:nth-of-type(3) {
  -webkit-animation: threefade3 15s infinite;
          animation: threefade3 15s infinite;
}
@keyframes threefade {
  0% {
    opacity: 1;
  }
  33.333% {
    opacity: 0;
  }
  66.666% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes threefade2 {
  0% {
    opacity: 0;
  }
  33.333% {
    opacity: 1;
  }
  66.666% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes threefade3 {
  0% {
    opacity: 0;
  }
  33.333% {
    opacity: 0;
  }
  66.666% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.hero-carousel ul.four li:nth-of-type(1) {
  -webkit-animation: fourfade 20s infinite;
          animation: fourfade 20s infinite;
}
.hero-carousel ul.four li:nth-of-type(2) {
  -webkit-animation: fourfade2 20s infinite;
          animation: fourfade2 20s infinite;
}
.hero-carousel ul.four li:nth-of-type(3) {
  -webkit-animation: fourfade3 20s infinite;
          animation: fourfade3 20s infinite;
}
.hero-carousel ul.four li:nth-of-type(4) {
  -webkit-animation: fourfade4 20s infinite;
          animation: fourfade4 20s infinite;
}
@keyframes fourfade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fourfade2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fourfade3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fourfade4 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.hero-carousel h1 {
  text-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.5);
}
/* #Hero Carousel ------------------------------------------------------------------------ */
.testimonial-carousel {
  position: relative;
  overflow: hidden;
  background-color: #33A5B8;
  color: #FFFFFF;
}
.testimonial-carousel h1,
.testimonial-carousel h2,
.testimonial-carousel h3,
.testimonial-carousel h4,
.testimonial-carousel a {
  color: #FFFFFF;
}
.testimonial-carousel ul {
  margin-left: 0;
  margin-bottom: 0;
  margin-left: 1.5%;
}
.testimonial-carousel ul li {
  list-style-type: none;
  margin-bottom: 0;
}
.testimonial-carousel ul li ul,
.testimonial-carousel ul li ol {
  margin-top: 0;
}
.testimonial-carousel ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.testimonial-carousel ul li:nth-of-type(2),
.testimonial-carousel ul li:nth-of-type(3),
.testimonial-carousel ul li:nth-of-type(4) {
  opacity: 0;
}
.testimonial-carousel ul.two li:nth-of-type(1) {
  -webkit-animation: twofade 10s infinite;
          animation: twofade 10s infinite;
}
.testimonial-carousel ul.two li:nth-of-type(2) {
  -webkit-animation: twofade2 10s infinite;
          animation: twofade2 10s infinite;
}
@keyframes twofade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes twofade2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.testimonial-carousel ul.three li:nth-of-type(1) {
  -webkit-animation: threefade 15s infinite;
          animation: threefade 15s infinite;
}
.testimonial-carousel ul.three li:nth-of-type(2) {
  -webkit-animation: threefade2 15s infinite;
          animation: threefade2 15s infinite;
}
.testimonial-carousel ul.three li:nth-of-type(3) {
  -webkit-animation: threefade3 15s infinite;
          animation: threefade3 15s infinite;
}
@keyframes threefade {
  0% {
    opacity: 1;
  }
  33.333% {
    opacity: 0;
  }
  66.666% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes threefade2 {
  0% {
    opacity: 0;
  }
  33.333% {
    opacity: 1;
  }
  66.666% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes threefade3 {
  0% {
    opacity: 0;
  }
  33.333% {
    opacity: 0;
  }
  66.666% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.testimonial-carousel ul.four li:nth-of-type(1) {
  -webkit-animation: fourfade 20s infinite;
          animation: fourfade 20s infinite;
}
.testimonial-carousel ul.four li:nth-of-type(2) {
  -webkit-animation: fourfade2 20s infinite;
          animation: fourfade2 20s infinite;
}
.testimonial-carousel ul.four li:nth-of-type(3) {
  -webkit-animation: fourfade3 20s infinite;
          animation: fourfade3 20s infinite;
}
.testimonial-carousel ul.four li:nth-of-type(4) {
  -webkit-animation: fourfade4 20s infinite;
          animation: fourfade4 20s infinite;
}
@keyframes fourfade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fourfade2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fourfade3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fourfade4 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.testimonial-carousel ul li blockquote {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: benton-modern-display, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.75rem;
  line-height: 2rem;
}
.testimonial-carousel ul li blockquote cite {
  display: block;
  clear: left;
  padding-top: 1rem;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  font-size: 1rem;
}
/*************************************************************************
 #Basic Carousel Elements
**************************************************************************/
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  display: block;
  margin: 0 auto;
}
.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[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 {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
.slick-prev,
.slick-next {
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  position: absolute;
  z-index: 10;
  display: block;
  height: 1rem;
  width: 1rem;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  margin-top: -3rem;
  /*lte IE 8*/
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover,
.slick-next:hover {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev {
  width: 0.75rem;
  height: 1.5rem;
  border-right: solid 1.5rem #EAEAEA;
  border-bottom: solid 1.5rem transparent;
  border-top: solid 1.5rem transparent;
  left: -1.5rem;
}
.slick-prev:hover {
  border-right: solid 1.5rem #33A5B8;
}
.slick-prev[dir="rtl"] {
  left: auto;
  right: -1rem;
}
.slick-next {
  width: 0.75rem;
  height: 1.5rem;
  border-left: solid 1.5rem #EAEAEA;
  border-bottom: solid 1.5rem transparent;
  border-top: solid 1.5rem transparent;
  right: -1.5rem;
}
.slick-next:hover {
  border-left: solid 1.5rem #33A5B8;
}
.slick-next[dir="rtl"] {
  left: -1rem;
  right: auto;
}
/*************************************************************************
 #General Carousel Styles
**************************************************************************/
ul.slick-dots {
  margin-left: 0;
  position: absolute;
  width: 100%;
  bottom: 1rem;
  left: 0;
  height: 0.75rem;
  overflow: hidden;
  text-align: center;
  z-index: 101;
}
ul.slick-dots li {
  list-style-type: none;
  margin-bottom: 0;
}
ul.slick-dots li ul,
ul.slick-dots li ol {
  margin-top: 0;
}
ul.slick-dots li {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  min-height: 0.75rem !important;
  margin-right: 0.75rem;
  background-color: #EAEAEA;
  overflow: hidden;
}
ul.slick-dots li:last-child {
  margin-right: 0;
}
ul.slick-dots li button {
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
  background-color: #EAEAEA;
  overflow: hidden;
  text-indent: -9999px;
}
ul.slick-dots li button:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background-color: #33A5B8;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  opacity: 0.75;
}
ul.slick-dots li button:hover::after {
  height: 100%;
}
ul.slick-dots li.slick-active {
  background-color: #33A5B8;
  opacity: 1;
}
ul.slick-dots li.slick-active button {
  background-color: #33A5B8;
}
.brand-carousel .item {
  padding: 2rem;
}
/* 
Use: Animations
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 13-animations.less stylesheet allows custom animation styles to be created to suit the design of the project. */
/*************************************************************************
 #Entrance Animations
**************************************************************************/
.entrance-animation,
.entrance-fade-in,
.entrance-slide-left,
.entrance-slide-right,
.entrance-slide-up,
.entrance-scatter-flip-in .scatter-element,
.entrance-scatter-fade-in .scatter-element {
  transition: all 750ms cubic-bezier(0.5, 0, 0.5, 1);
  opacity: 0;
}
.entrance-fade-in,
.entrance-slide-left,
.entrance-slide-right,
.entrance-slide-up,
.entrance-scatter-flip-in .scatter-element,
.entrance-scatter-fade-in .scatter-element {
  z-index: 99;
}
.entrance-fade-in.entrance-activated,
.entrance-slide-left.entrance-activated,
.entrance-slide-right.entrance-activated,
.entrance-slide-up.entrance-activated,
.entrance-scatter-flip-in .scatter-element.entrance-activated,
.entrance-scatter-fade-in .scatter-element.entrance-activated {
  opacity: 1;
}
/* #Entrance Slide Left ------------------------------------------------------------------------ */
.entrance-slide-left {
  transform: translateX(-50%);
}
.entrance-slide-left.entrance-activated {
  transform: translateX(0);
}
/* #Entrance Slide Right ------------------------------------------------------------------------ */
.entrance-slide-right {
  transform: translateX(50%);
}
.entrance-slide-right.entrance-activated {
  transform: translateX(0);
}
/* #Entrance Slide Up ------------------------------------------------------------------------ */
.entrance-slide-up {
  transform: translateY(5%);
}
.entrance-slide-up.entrance-activated {
  transform: translateY(0);
}
/* #Entrance Scatter Flip In ------------------------------------------------------------------------ */
.entrance-scatter-flip-in .scatter-element {
  transform: scale(0.5) perspective(500px) rotateX(-90deg);
}
.entrance-scatter-flip-in .scatter-element.entrance-activated {
  transform: scale(1) perspective(500px) rotateX(0);
}
.mfp-bg {
  background-color: #FFFFFF !important;
  opacity: 0.75 !important;
  display: none !important;
}
.wrap {
  transition: all 750ms cubic-bezier(0.5, 0, 0.5, 1);
}
.wrap:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background: #FFFFFF;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all 500ms cubic-bezier(0.5, 0, 0.5, 1);
}
.mfp-ready + .wrap {
  position: absolute;
  -webkit-filter: blur(3px);
  filter: blur(3px);
}
.mfp-ready + .wrap:after {
  opacity: 0.7;
  z-index: 99;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  transition: all 0.5s ease-in-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.75;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}
.mfp-image-holder .mfp-close {
  color: #1d1d1b !important;
}
.mfp-container .mfp-arrow:before {
  content: '';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
  color: #33A5B8;
  font-size: 2rem;
  opacity: 1;
  text-align: center;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  display: block;
  height: 55px;
  margin: 0;
  border: none;
}
.mfp-container .mfp-arrow:after {
  display: none;
}
.mfp-container .mfp-arrow-right:before {
  content: '\f054';
}
.mfp-container .mfp-arrow-left:before {
  content: '\f053';
}
.mfp-container .mfp-figure:after {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
/* 
Use: Forms
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 14-forms.less stylesheet contains the basic form styles, as well as allowing custom form styles to be created to suit the design of the project. */
/*************************************************************************
 #Global Form Elements
**************************************************************************/
button,
input,
textarea,
select,
option {
  transition: all 500ms cubic-bezier(0.5, 0, 0.5, 1);
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
button:focus,
input:focus,
textarea:focus,
select:focus,
option:focus {
  outline: none;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="submit"],
select {
  min-height: 1.5rem;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
select {
  padding: 0.25rem 0.5rem;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea {
  /* Add a background colour to match the design of your project */
  /* Add a text colour to match the design of your project */
}
button,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
textarea {
  font-size: 100%;
  overflow: auto;
  vertical-align: top;
  padding: 0.5rem;
}
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
  border: 0;
  border-radius: 0;
  padding: 0;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}
button[disabled],
input[disabled] {
  cursor: default;
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  border-color: transparent;
}
.nf-form-wrap .nf-form-content .ninja-forms-field {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  height: auto;
}
.nf-form-wrap .nf-form-content label {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 600;
  color: #1d1d1b;
  font-size: 1rem;
  line-height: 1rem;
}
.nf-form-wrap .nf-form-content label .ninja-forms-req-symbol {
  color: #B83333;
  font-size: 0.9rem;
}
.nf-form-wrap .nf-form-content input,
.nf-form-wrap .nf-form-content textarea {
  color: medium-grey;
}
.nf-form-wrap .nf-form-content input:not([type=button]),
.nf-form-wrap .nf-form-content textarea:not([type=button]) {
  border: 2px solid #E4E4E4;
  background-color: white;
}
.nf-form-wrap .nf-form-content input:not([type=button]):focus,
.nf-form-wrap .nf-form-content textarea:not([type=button]):focus {
  color: #1d1d1b;
  border-color: #33A5B8;
}
.nf-form-wrap .nf-form-content textarea {
  min-height: 14rem;
}
.nf-form-wrap .nf-form-content select {
  border: 2px solid #E4E4E4 !important;
  background-color: white !important;
  height: auto !important;
}
.nf-form-wrap .nf-form-content select:focus {
  color: #1d1d1b !important;
  border-color: #33A5B8 !important;
}
.nf-form-wrap .nf-form-content .list-select-wrap .nf-field-element:after {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  z-index: 20;
  content: '\f078';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  color: #33A5B8;
  font-size: 1rem;
}
.nf-form-wrap .nf-form-content .html-wrap a {
  position: relative;
  text-decoration: none;
  padding: 0 0.25rem;
}
.nf-form-wrap .nf-form-content .html-wrap a:after {
  position: absolute;
  content: '';
  bottom: -2px;
  left: 0;
  background-color: #33A5B8;
  height: 3px;
  width: 100%;
  opacity: 0.5;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  z-index: -1;
}
.nf-form-wrap .nf-form-content .html-wrap a:hover {
  color: #FFFFFF;
}
.nf-form-wrap .nf-form-content .html-wrap a:hover:after {
  height: 100%;
  opacity: 1;
}
.nf-form-wrap .nf-form-content .checkbox-container label {
  display: table;
  margin: 0 auto 1rem;
}
.nf-form-wrap .nf-form-content .checkbox-container label:before,
.nf-form-wrap .nf-form-content .checkbox-container label:after {
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
}
.nf-form-wrap .nf-form-content .checkbox-container label:before {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
  content: '\f00c';
  width: 1rem;
  font-size: 0.7rem;
  text-align: center;
  margin-left: 2px;
}
.nf-form-wrap .nf-form-content .checkbox-container label:after {
  width: 1rem;
  height: 1rem;
  border: 2px solid #E4E4E4;
}
.nf-form-wrap .nf-form-content .checkbox-container label:hover:before {
  color: #33A5B8;
  opacity: 1;
}
.nf-form-wrap .nf-form-content .checkbox-container label:hover:after {
  border-color: #33A5B8;
}
.nf-form-wrap .nf-form-content .checkbox-container label.nf-checked-label:before {
  color: #FFFFFF;
}
.nf-form-wrap .nf-form-content .checkbox-container label.nf-checked-label:after {
  border-color: #33A5B8;
  background-color: #33A5B8;
}
.nf-form-wrap .nf-form-content .checkbox-container .nf-after-field {
  width: 100%;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element {
  display: table !important;
  margin: 0 auto !important;
  width: auto !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  display: inline-block;
  position: relative;
  margin: 0 0 1.5rem 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  text-align: center;
  text-indent: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  border: none;
  border-bottom: none;
  text-shadow: none;
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 1;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 1rem 2rem;
  color: #FFFFFF;
  background-color: #33A5B8;
  padding: 0 !important;
  cursor: pointer;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element:last-child {
  margin-bottom: 0;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element:focus {
  outline: none;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element:hover {
  border-bottom: none;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element:before,
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element:after {
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  display: block;
  position: absolute;
  content: '';
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element:before {
  z-index: -2;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element:after {
  z-index: -1;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.small {
  padding: 1rem;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.medium {
  padding: 1rem 1.5rem;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.large {
  padding: 1rem 2rem;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.white-button {
  color: #33A5B8;
  background-color: #FFFFFF;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.white-button:before {
  position: absolute;
  content: '';
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.white-button:after {
  position: absolute;
  content: '';
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #78cbd9;
  transform: scale(0.65);
  opacity: 0;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.white-button:hover {
  color: #FFFFFF;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.white-button:hover:after {
  transform: scale(1);
  opacity: 1;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.teal-button {
  color: #FFFFFF;
  background-color: #33A5B8;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.teal-button:before {
  position: absolute;
  content: '';
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.teal-button:after {
  position: absolute;
  content: '';
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #288190;
  transform: scale(0.65);
  opacity: 0;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.teal-button:hover:after {
  transform: scale(1);
  opacity: 1;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.static-button {
  transition: none;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element.black-static-button {
  transition: none;
  color: #FFFFFF;
  background-color: #1d1d1b;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element:before {
  position: absolute;
  content: '';
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element:after {
  position: absolute;
  content: '';
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #288190;
  transform: scale(0.65);
  opacity: 0;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element:hover:after {
  transform: scale(1);
  opacity: 1;
}
.nf-form-wrap .nf-form-content .submit-wrap .nf-field-element input[type=button] {
  position: relative;
  z-index: 20;
  color: #FFFFFF !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 1rem 2rem;
  background: none !important;
}
.nf-form-wrap .nf-form-content .nf-pass .nf-field-element input,
.nf-form-wrap .nf-form-content .nf-pass .nf-field-element textarea {
  border-color: #33A5B8 !important;
}
.nf-form-wrap .nf-form-content .nf-pass .nf-field-element:after {
  content: '\f00c';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  color: #33A5B8;
  font-size: 1rem;
}
.nf-form-wrap .nf-form-content .nf-error .nf-field-element input,
.nf-form-wrap .nf-form-content .nf-error .nf-field-element textarea {
  border-color: #B83333 !important;
}
.nf-form-wrap .nf-form-content .nf-error .nf-field-element:after {
  content: '\f00d';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  color: #B83333;
  font-size: 1rem;
  background: none;
}
.nf-form-wrap .nf-error-msg {
  color: #B83333 !important;
  font-size: 0.9rem !important;
}
/*************************************************************************
 #Cookie Bar
**************************************************************************/
#moove_gdpr_cookie_info_bar {
  border: none !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
  padding: 1rem !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-cookie-notice p {
  font-family: gill-sans-nova, sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.9rem !important;
  line-height: 1.25rem !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-cookie-notice p span {
  position: relative;
  text-decoration: none !important;
  padding: 0 0.25rem;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-cookie-notice p span:after {
  position: absolute;
  content: '';
  bottom: -2px;
  left: 0;
  background-color: #33A5B8;
  height: 3px;
  width: 100%;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  z-index: -1;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-cookie-notice p span:hover {
  color: #FFFFFF !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-cookie-notice p span:hover:after {
  height: 100%;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1) !important;
  display: inline-block !important;
  position: relative !important;
  margin: 0 0 1.5rem 0 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: transparent !important;
  text-align: center !important;
  text-indent: inherit !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  outline: none !important;
  border: none !important;
  border-bottom: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transform: translate(0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  z-index: 1 !important;
  font-size: 0.75rem !important;
  padding: 1rem !important;
  background-color: #33A5B8 !important;
  color: #FFFFFF !important;
  font-family: gill-sans-nova, sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:last-child {
  margin-bottom: 0 !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:focus {
  outline: none !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:hover {
  border-bottom: none !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:before,
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:after {
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1) !important;
  display: block !important;
  position: absolute !important;
  content: '' !important;
  transform: translate(0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:before {
  z-index: -2 !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:after {
  z-index: -1 !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.small {
  padding: 1rem !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.medium {
  padding: 1rem 1.5rem !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.large {
  padding: 1rem 2rem !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.white-button {
  color: #33A5B8 !important;
  background-color: #FFFFFF !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.white-button:before {
  position: absolute !important;
  content: '' !important;
  z-index: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.white-button:after {
  position: absolute !important;
  content: '' !important;
  z-index: -1 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background-color: #78cbd9 !important;
  transform: scale(0.65) !important;
  opacity: 0 !important;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1) !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.white-button:hover {
  color: #FFFFFF !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.white-button:hover:after {
  transform: scale(1) !important;
  opacity: 1 !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.teal-button {
  color: #FFFFFF !important;
  background-color: #33A5B8 !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.teal-button:before {
  position: absolute !important;
  content: '' !important;
  z-index: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.teal-button:after {
  position: absolute !important;
  content: '' !important;
  z-index: -1 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background-color: #288190 !important;
  transform: scale(0.65) !important;
  opacity: 0 !important;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1) !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.teal-button:hover:after {
  transform: scale(1) !important;
  opacity: 1 !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.static-button {
  transition: none !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all.black-static-button {
  transition: none !important;
  color: #FFFFFF !important;
  background-color: #1d1d1b !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:before {
  position: absolute !important;
  content: '' !important;
  z-index: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:after {
  position: absolute !important;
  content: '' !important;
  z-index: -1 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background-color: #288190 !important;
  transform: scale(0.65) !important;
  opacity: 0 !important;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1) !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:hover:after {
  transform: scale(1) !important;
  opacity: 1 !important;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:hover {
  background-color: #33A5B8 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content {
  border-radius: 0 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content .moove-gdpr-company-logo-holder img {
  max-width: 100%;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu button {
  border-radius: 0;
  font-family: gill-sans-nova, sans-serif !important;
  font-weight: 400 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content {
  border-radius: 0 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .tab-title {
  font-family: benton-modern-display, serif !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-size: 1.75rem !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-tab-main-content p {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-tab-main-content .moove-gdpr-status-bar .switch .slider {
  background-color: #B83333;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-tab-main-content .moove-gdpr-status-bar .switch .slider:before {
  left: 2px !important;
  bottom: 2px !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-tab-main-content .moove-gdpr-status-bar .switch .slider:after {
  color: #B83333;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-tab-main-content .moove-gdpr-status-bar .switch input:checked + .slider {
  background-color: #33A5B8;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-tab-main-content .moove-gdpr-status-bar .switch input:checked + .slider:after {
  color: #33A5B8;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1) !important;
  display: inline-block !important;
  position: relative !important;
  margin: 0 0 1.5rem 0 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: transparent !important;
  text-align: center !important;
  text-indent: inherit !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  outline: none !important;
  border: none !important;
  border-bottom: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transform: translate(0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  z-index: 1 !important;
  font-size: 0.75rem !important;
  padding: 1rem !important;
  background-color: #33A5B8 !important;
  color: #FFFFFF !important;
  font-family: gill-sans-nova, sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all:last-child,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings:last-child {
  margin-bottom: 0 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all:focus,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings:focus {
  outline: none !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all:hover,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings:hover {
  border-bottom: none !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all:before,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings:before,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all:after,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings:after {
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1) !important;
  display: block !important;
  position: absolute !important;
  content: '' !important;
  transform: translate(0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all:before,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings:before {
  z-index: -2 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all:after,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings:after {
  z-index: -1 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.small,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.small {
  padding: 1rem !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.medium,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.medium {
  padding: 1rem 1.5rem !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.large,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.large {
  padding: 1rem 2rem !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.white-button,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.white-button {
  color: #33A5B8 !important;
  background-color: #FFFFFF !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.white-button:before,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.white-button:before {
  position: absolute !important;
  content: '' !important;
  z-index: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.white-button:after,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.white-button:after {
  position: absolute !important;
  content: '' !important;
  z-index: -1 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background-color: #78cbd9 !important;
  transform: scale(0.65) !important;
  opacity: 0 !important;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1) !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.white-button:hover,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.white-button:hover {
  color: #FFFFFF !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.white-button:hover:after,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.white-button:hover:after {
  transform: scale(1) !important;
  opacity: 1 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.teal-button,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.teal-button {
  color: #FFFFFF !important;
  background-color: #33A5B8 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.teal-button:before,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.teal-button:before {
  position: absolute !important;
  content: '' !important;
  z-index: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.teal-button:after,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.teal-button:after {
  position: absolute !important;
  content: '' !important;
  z-index: -1 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background-color: #288190 !important;
  transform: scale(0.65) !important;
  opacity: 0 !important;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1) !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.teal-button:hover:after,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.teal-button:hover:after {
  transform: scale(1) !important;
  opacity: 1 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.static-button,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.static-button {
  transition: none !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all.black-static-button,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.black-static-button {
  transition: none !important;
  color: #FFFFFF !important;
  background-color: #1d1d1b !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all:before,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings:before {
  position: absolute !important;
  content: '' !important;
  z-index: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all:after,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings:after {
  position: absolute !important;
  content: '' !important;
  z-index: -1 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background-color: #288190 !important;
  transform: scale(0.65) !important;
  opacity: 0 !important;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1) !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all:hover:after,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings:hover:after {
  transform: scale(1) !important;
  opacity: 1 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-allow-all:hover,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings:hover {
  background-color: #33A5B8 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings {
  display: none !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content .moove-gdpr-button-holder button.moove-gdpr-modal-save-settings.button-visible {
  display: inline-block !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close {
  top: 0 !important;
  right: 0 !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close span.gdpr-icon {
  background: none !important;
  border: none !important;
  color: #33A5B8 !important;
}
/* 
Use: Custom Styling
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 14-custom-styling.less stylesheet allows custom one-off styles to be created to suit the design of the project. */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}
.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}
.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  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;
  text-align: left;
  z-index: 1045;
}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}
.mfp-ajax-cur {
  cursor: progress;
}
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: zoom-out;
}
.mfp-zoom {
  cursor: pointer;
  cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
  cursor: auto;
}
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
}
.mfp-counter,
.mfp-loading.mfp-figure {
  display: none;
}
.mfp-hide {
  display: none !important;
}
.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}
.mfp-preloader a {
  color: #CCC;
}
.mfp-preloader a:hover {
  color: #FFF;
}
.mfp-s-ready .mfp-preloader {
  display: none;
}
.mfp-s-error .mfp-content {
  display: none;
}
button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}
.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}
.mfp-close:active {
  top: 1px;
}
.mfp-close-btn-in .mfp-close {
  color: #333;
}
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}
.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
  margin-top: -54px;
}
.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}
.mfp-arrow:before,
.mfp-arrow:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}
.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}
.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}
.mfp-arrow-left {
  left: 0;
}
.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}
.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}
.mfp-arrow-right {
  right: 0;
}
.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}
.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}
.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
  top: -40px;
}
.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;
}
/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}
/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}
.mfp-figure:after {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}
.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}
.mfp-figure figure {
  margin: 0;
}
.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}
.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}
.mfp-image-holder .mfp-content {
  max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    transform-origin: 0;
  }
  .mfp-arrow-right {
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
/* 
Use: Header
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/*************************************************************************
 #Navigation
**************************************************************************/
header .logo {
  position: relative;
  z-index: 99;
  padding: 1rem 0;
  max-width: 400px;
  margin: 0.5rem auto 1.5rem;
}
@media screen and (max-width: 40.625em) {
  header .logo {
    max-width: 320px;
    padding: 1rem 1rem 1rem 5rem;
  }
}
header .main-navigation {
  border-bottom: 3px solid #33A5B8;
  z-index: 200;
}
header .main-navigation nav#main-navigation {
  position: relative;
  z-index: 99;
}
header .main-navigation nav#main-navigation ul {
  position: relative;
  margin-left: 0;
}
header .main-navigation nav#main-navigation ul li {
  list-style-type: none;
  margin-bottom: 0;
}
header .main-navigation nav#main-navigation ul li ul,
header .main-navigation nav#main-navigation ul li ol {
  margin-top: 0;
}
@media screen and (min-width: 40.625em) {
  header .main-navigation nav#main-navigation ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 100%;
  }
}
header .main-navigation nav#main-navigation ul li {
  position: relative;
  float: left;
}
header .main-navigation nav#main-navigation ul li.menu-item-has-children a.sub-menu-link {
  display: none;
}
header .main-navigation nav#main-navigation ul li.current-menu-item a:after {
  position: absolute;
  z-index: -1;
  content: '';
  background-color: #33A5B8;
  height: 3px;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
}
header .main-navigation nav#main-navigation ul li a {
  position: relative;
  display: table;
  height: 100%;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  color: #1d1d1b;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.75rem;
  padding: 1rem 0.75rem;
  transition: all 300ms cubic-bezier(0.5, 0, 0.5, 1);
}
header .main-navigation nav#main-navigation ul li a:after {
  position: absolute;
  z-index: -1;
  content: '';
  background-color: #33A5B8;
  height: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
}
header .main-navigation nav#main-navigation ul li a span {
  display: table-cell;
  vertical-align: middle;
}
header .main-navigation nav#main-navigation ul li:hover a {
  color: #33A5B8;
}
header .main-navigation nav#main-navigation ul li:hover a:after {
  height: 3px;
}
header .main-navigation nav#main-navigation ul li:hover .sub-menu {
  visibility: visible;
  margin-top: 1rem;
  opacity: 1;
}
header .main-navigation nav#main-navigation ul li .sub-menu {
  visibility: hidden;
  opacity: 0;
  transition: all 500ms cubic-bezier(0.5, 0, 0.5, 1);
  position: absolute;
  min-width: 8rem;
  margin-top: 2rem;
  left: 50%;
  height: auto;
  transform: translateX(-50%);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 40.625em) {
  header .main-navigation nav#main-navigation ul li .sub-menu {
    display: block;
    opacity: 1;
    position: relative;
    left: 0;
    top: 0;
  }
}
header .main-navigation nav#main-navigation ul li .sub-menu:before,
header .main-navigation nav#main-navigation ul li .sub-menu:after {
  display: block;
  position: absolute;
  content: '';
}
header .main-navigation nav#main-navigation ul li .sub-menu:before {
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-bottom: 0.5rem solid #FFFFFF;
}
header .main-navigation nav#main-navigation ul li .sub-menu:after {
  width: 100%;
  height: 1rem;
  top: -1rem;
  left: 0;
  background-color: transparent;
}
header .main-navigation nav#main-navigation ul li .sub-menu li {
  padding: 0;
  width: 100%;
  height: auto;
  background-color: #FFFFFF;
}
header .main-navigation nav#main-navigation ul li .sub-menu li:hover {
  background-color: #ffffff;
}
header .main-navigation nav#main-navigation ul li .sub-menu li a {
  float: left;
  display: block;
  width: 100%;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.7rem;
  color: #1d1d1b;
}
header .main-navigation nav#main-navigation ul li .sub-menu li a:hover {
  color: #33A5B8;
}
header .main-navigation nav#main-navigation ul li .sub-menu li a:after {
  display: none;
}
header .main-navigation nav#main-navigation ul li .sub-menu li a:before {
  position: absolute;
  content: '';
  width: 50%;
  height: 1px;
  left: 25%;
  bottom: 0;
  background: #EAEAEA;
  opacity: 0.75;
}
header .main-navigation nav#main-navigation ul li .sub-menu li:last-child a:before {
  display: none;
}
header .main-navigation nav#main-navigation ul li.current a {
  color: #33A5B8;
}
/* ==== Responsive Navigation Menu ==== */
.nav-menu header nav#main-navigation {
  transition: all 500ms cubic-bezier(0.5, 0, 0.5, 1);
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
  max-height: 0;
  background-color: #FFFFFF;
  overflow: hidden;
}
.nav-menu header nav#main-navigation::-webkit-scrollbar {
  display: none;
}
.nav-menu header nav#main-navigation ul {
  position: relative;
  display: block;
  left: 0;
  top: 0;
  float: left;
  width: 100%;
  margin: 0;
}
.nav-menu header nav#main-navigation ul li {
  width: 100%;
  text-align: left;
  border-left: none;
  border-bottom: 1px solid #EAEAEA;
}
.nav-menu header nav#main-navigation ul li:first-child {
  border-top: 1px solid #EAEAEA;
}
.nav-menu header nav#main-navigation ul li a {
  display: block;
  position: relative;
  height: auto;
  font-size: 1rem;
  padding: 1.5rem;
  line-height: 140%;
  border: none;
}
.nav-menu header nav#main-navigation ul li:hover .sub-menu {
  margin-top: 0;
  visibility: hidden;
  opacity: 0;
}
.nav-menu header nav#main-navigation ul li:hover:before,
.nav-menu header nav#main-navigation ul li.current:before {
  display: none;
}
.nav-menu header nav#main-navigation ul li.reveal {
  border-bottom: 0 !important;
}
.nav-menu header nav#main-navigation ul li.reveal:hover .sub-menu {
  visibility: visible;
  opacity: 1;
}
.nav-menu header nav#main-navigation ul li.menu-item-has-children {
  position: relative;
}
.nav-menu header nav#main-navigation ul li.menu-item-has-children a.sub-menu-link {
  display: table;
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  right: 1rem;
  top: 1rem;
  z-index: 20;
  border: none !important;
  padding: 0.5rem;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
}
.nav-menu header nav#main-navigation ul li.menu-item-has-children a.sub-menu-link span {
  position: relative;
  top: -1px;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  font-size: 2rem;
  text-align: center;
  color: #b2b2b2;
}
.nav-menu header nav#main-navigation ul li.menu-item-has-children a.sub-menu-link:hover span {
  color: #33A5B8;
}
.nav-menu header nav#main-navigation ul li.menu-item-has-children a.sub-menu-link:after {
  display: none;
}
.nav-menu header nav#main-navigation ul li ul.sub-menu {
  visibility: visible;
  opacity: 0;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  max-height: 0;
  margin-top: 0;
  left: 0;
  transform: translateX(0);
  box-shadow: none;
}
.nav-menu header nav#main-navigation ul li ul.sub-menu:before {
  display: none;
}
.nav-menu header nav#main-navigation ul li ul.sub-menu li {
  border-bottom: 1px solid #2b8a9a;
}
.nav-menu header nav#main-navigation ul li ul.sub-menu li a {
  text-align: left;
  padding: 1.5rem;
  background-color: #33A5B8;
  color: #FFFFFF;
  font-size: 0.9rem;
}
.nav-menu header nav#main-navigation ul li ul.sub-menu li a:hover {
  color: #174b54;
}
.nav-menu header nav#main-navigation ul li ul.sub-menu li a:before {
  display: none;
}
.nav-menu header nav#main-navigation ul li.reveal a.sub-menu-link span {
  transform: rotate(-45deg);
}
.nav-menu header nav#main-navigation ul li.reveal ul.sub-menu {
  opacity: 1;
  height: auto;
  max-height: 100em;
}
.nav-menu header nav#main-navigation ul li.reveal li a.sub-menu-link span {
  transform: rotate(0deg);
}
.nav-menu header nav#main-navigation ul li.reveal li ul.sub-menu {
  opacity: 0;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  max-height: 0;
  left: 0;
}
.nav-menu header nav#main-navigation ul li.reveal li:first-child {
  border-top: 1px solid #33A5B8;
}
.nav-menu header nav#main-navigation ul li.reveal li.reveal a.sub-menu-link span {
  transform: rotate(-45deg);
}
.nav-menu header nav#main-navigation ul li.reveal li.reveal ul.sub-menu {
  display: block;
  opacity: 1;
  height: auto;
  max-height: 100em;
}
.menu-header,
.menu-button,
.close-button {
  display: none;
}
.menu-button,
.close-button {
  top: 0.75rem;
  right: 1rem;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.5rem;
  background: #33A5B8;
  overflow: hidden;
  transition: all 500ms cubic-bezier(0.5, 0, 0.5, 1);
}
.menu-button {
  position: fixed;
  z-index: 999;
  /* Icon 3 */
}
.menu-button:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background-color: #2b8a9a;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  opacity: 0.75;
}
.menu-button:hover::after {
  height: 100%;
}
.menu-button span {
  display: block;
  position: absolute;
  height: 2px;
  width: 50%;
  background: #FFFFFF;
  border-radius: 9px;
  opacity: 1;
  left: 25%;
  transform: rotate(0deg);
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  z-index: 10;
}
.menu-button span:nth-child(1) {
  top: 1rem;
}
.menu-button span:nth-child(2),
.menu-button span:nth-child(3) {
  top: 50%;
  margin-top: -1px;
}
.menu-button span:nth-child(4) {
  bottom: 1rem;
}
.close-button {
  position: absolute;
  z-index: 99;
}
.close-button:before {
  content: '\f00d';
}
.nav-menu .button-container {
  display: block;
  height: 2rem;
  width: 100%;
}
.nav-menu .menu-button {
  display: block;
}
.nav-menu #open-menu {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
  z-index: 999;
}
.show-menu.nav-menu header nav#main-navigation {
  z-index: 999;
  overflow-y: scroll;
  -ms-overflow-style: none;
  max-height: 999rem;
  transition: all 1000ms cubic-bezier(0.5, 0, 0.5, 1);
}
.show-menu.nav-menu header .menu-button span:nth-child(1) {
  top: 1rem;
  width: 0%;
  left: 50%;
}
.show-menu.nav-menu header .menu-button span:nth-child(2) {
  transform: rotate(45deg);
}
.show-menu.nav-menu header .menu-button span:nth-child(3) {
  transform: rotate(-45deg);
}
.show-menu.nav-menu header .menu-button span:nth-child(4) {
  top: 1rem;
  width: 0%;
  left: 50%;
}
@media screen and (max-width: 40.625em) {
  nav#main-navigation {
    display: none;
  }
  .nav-menu nav#main-navigation {
    display: block;
  }
  .main-navigation .inner-container {
    margin: 0;
  }
}
/*************************************************************************
 #Contact Bar
**************************************************************************/
.contact-bar {
  padding: 1rem 0 0;
  z-index: 10;
}
.contact-bar .email,
.contact-bar .telephone {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  text-decoration: none;
}
.contact-bar .email:before,
.contact-bar .telephone:before {
  display: inline-block;
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  color: #33A5B8;
  content: '';
  margin-right: 1rem;
}
.contact-bar .email:hover,
.contact-bar .telephone:hover {
  color: #33A5B8;
}
.contact-bar .email:before {
  content: '\f2b6';
}
.contact-bar .telephone:before {
  content: '\f095';
}
/* 
Use: Footer
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The 16-footer.less stylesheet allows custom footer styles to be created to suit the design of the project. */
.map-section {
  margin: 1rem 0;
}
@media screen and (min-width: 40.625em) {
  .map-section {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
}
.map-section .contact-map {
  width: 100%;
}
.map-section .contact-map img {
  max-width: inherit !important;
}
.map-section .contact-details a {
  clear: left;
  float: none;
  text-decoration: none;
}
.map-section .contact-details a span {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
}
.footer-logo {
  display: block;
  position: relative;
  z-index: 99;
  max-width: 340px;
  margin: 1rem auto;
}
@media screen and (max-width: 40.625em) {
  .footer-logo {
    max-width: 280px;
  }
}
footer {
  border-top: 4px solid #33A5B8;
  font-size: 0.8rem;
}
footer ul.footer-nav {
  margin-left: 0;
  display: flex;
  justify-content: space-around;
}
footer ul.footer-nav li {
  list-style-type: none;
  margin-bottom: 0;
}
footer ul.footer-nav li ul,
footer ul.footer-nav li ol {
  margin-top: 0;
}
footer ul.footer-nav li a {
  text-transform: uppercase;
  text-decoration: none;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
}
footer ul.footer-nav li a:hover {
  color: #33A5B8;
}
footer ul.social-links {
  text-align: center;
}
footer ul.social-links li {
  margin: 0 0.5rem;
}
footer .contact-details {
  margin-left: 0;
  clear: left;
  margin: 0 auto 1rem;
}
footer .contact-details li {
  list-style-type: none;
  margin-bottom: 0;
}
footer .contact-details li ul,
footer .contact-details li ol {
  margin-top: 0;
}
footer .contact-details a {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 400;
  text-decoration: none;
}
footer .contact-details a span {
  color: #FFFFFF;
  font-family: gill-sans-nova, sans-serif;
  font-weight: 600;
}
footer .contact-details a:hover {
  color: #33A5B8;
}
footer .contact-details a:hover span {
  color: #FFFFFF;
}
footer .copyright {
  font-size: 0.75rem;
}
footer .copyright .credit span {
  position: relative;
  top: 3px;
  margin-right: 4px;
}
@media screen and (max-width: 53.125em) {
  footer .copyright p {
    clear: left;
    display: block;
    text-align: center;
    width: 100%;
    margin: 0 0 1rem;
  }
  footer .copyright p.credit {
    margin-top: 1rem;
  }
}
/* 
Use: Setup
Scope: All devices
Theme: The Bromley Bathroom Company
Copyright 2019, The Bromley Bathroom Company Ltd
Author: Supersonic Playground
*/
/* The setup.less stylesheet is one of the most important files in the system, but also one of the simplest to use. It contains a handful of key settings that are used universally across the site. The default settings may be okay for your project, in which case you may never need to update this file. */
/*************************************************************************
 #Base Pixel Equivalent
**************************************************************************/
/* The Base Pixel Equivalent is one of the most important settings as it is used to set the size of text and elements across the project. We avoid using fixed pixel measurements, as by their nature, they are fixed and do not give us the level of adjustment we need for responsive layouts. Instead we use the Base Pixel Equivalent, which is the pixel size equivalent of the body copy used in the designs. This number is then converted into the variable @base-size which is used as the basis for all dimensions throughout the site.

We then use a series of media queries to adjust @base-size responsively, so that all elements within the project universally adjust to become smaller or larger depending on the size of the screen.

So for example, if the Base Pixel Equivalent is set to 20, and you needed to create an element that would normally be width: 100px, you would instead set this to width: @base-size*5.

The main advantage of all of this is that it means that all text and elements share a common scale. If we want to adjust this scale, we just have to update one setting - the Base Pixel Equivalent - and the dimensions across the project will update universally, instead of having to manually update countless arbitrary measurements throughout the project. */
/*************************************************************************
 #Grid Measurements
**************************************************************************/
/* This part sets the width of the @fluid-margin and @column-width variables. The grid system is based on 12 columns in total, with Fluid Margins in between each column, and also on the far left and right of the layout. This means that there are 12 columns and 13 margins in total. Therefore, when the @fluid-margin and @column-width variables are multiplied by these amounts, they should equal 100% or slightly under (13 x 3% = 39%, 12 x 5.083% = 60.996%, 39% + 60.996% = 99.996%).

If the design that you're working to requires larger margins and thinner columns (a more spacious design) or thinner margins and larger columns (a tighter design) then adjust these percentages as you need to. */
/* Horizontal margin equal to 30px @ 1000px */
/* Column width - equal to 50.83px @ 1000px */
/*************************************************************************
 #Animation Easing
**************************************************************************/
/* This creates the bezier curve variable that is used within many of the animations throughout the project. It gives the animation the illusion of physics/friction. For more info check out http://cubic-bezier.com/ */
/*************************************************************************
 #Typographic Scale
**************************************************************************/
/* This allows you to set the scale of how each typographic element relates to each other. The base body size for the project is set using @base-size, and all other elements are multiples of this setting. */
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.75rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
.small {
  font-size: 0.75rem;
}
/*************************************************************************
 #Basic HTML Settings
**************************************************************************/
html,
body {
  overflow-x: hidden;
}
body {
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
          text-size-adjust: none;
  overflow-y: hidden;
}
@media screen and (min-width: 46.875em) {
  body::-webkit-scrollbar {
    width: 0.5rem;
    background-color: #EAEAEA;
  }
  body::-webkit-scrollbar-thumb {
    background-color: #33A5B8;
  }
}
img,
svg {
  border: 0;
  margin: 0;
  padding: 0;
  image-rendering: auto;
}
svg {
  display: block;
}
/*# sourceMappingURL=style.css.map */