/*! ================================
// Description: Custom CSS for Elite Coatings (elitecoatings.ca).
// Version: 2.0
// Author: Jonathan Gallivan @ Gallivan Media
// Author URI: https://gallivanmedia.com
// Date created: Jul 02, 2018
// Date revised: Nov 18, 2021
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css 
    _   __                           ___          
   / | / /___  _________ ___  ____ _/ (_)___  ___ 
  /  |/ / __ \/ ___/ __ `__ \/ __ `/ / /_  / / _ \
 / /|  / /_/ / /  / / / / / / /_/ / / / / /_/  __/
/_/ |_/\____/_/  /_/ /_/ /_/\__,_/_/_/ /___/\___/ 

*/button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

/* Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* { margin: 0; padding: 0; box-sizing: border-box; min-height: 0; min-width: 0; focus: none; }
* :before, * :after { box-sizing: border-box; }
body { width: 100%; height: 100%; margin: 0; padding: 0; color: #000; background-color: #000; font-family: 'Libre Franklin', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 1em; line-height: 1em; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.full-container { width: 100%; margin: 0 auto; padding: 0; }
.boxed-container { margin: 0 auto; padding: 0 15px; }
img { display: block; width: 100%; height: auto; outline: 0; }
.mobile-image { position: relative; width: 100%; padding-bottom: 50%; background-size: cover; background-repeat: no-repeat; box-shadow: inset 0 0 200px rgba(0,0,0,.7); }
.mobile-image img { display: block; opacity: 0; }
.clear { clear: both; }
.nobr { white-space: nowrap; }
.no-mobile { display: none; }
.padh { padding: 0 10px; font-weight: normal; }
.padh.white { color: #ccc; }
.bold { font-weight: bold; }
.button { padding: 15px; }
.button:hover { text-decoration: none; }
#page-sections { position: static; margin: 0; min-height: 56vh; padding: 0vh 0 5vh 0; background: #f9f9f9; color: #000; }
.woocommerce-page #page-sections, #page-sections.woocommerce { padding-top: 8vh; }
.home #page-sections { padding-bottom: 0; }
@media (min-width: 54em) {
	.boxed-container { width: 100%; max-width: 1440px; padding: 0 30px; }
	.mobile-image { position: relative; width: 100%; padding-bottom: inherit; background-size: 100% auto; }
	.no-mobile { display: inherit; }
	#page-sections { padding: 0 0 5vh 0; border-top: 3vh solid #fefefe; }
}

/* Font Sizing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.fs12 { font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1440 - 300))); line-height: calc(12px*1.3 + (14*1.3 - 12*1.3) * ((100vw - 300px) / (1440 - 300))); }
.fs16 {
	font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1440 - 300)));
	line-height: calc(14px * 1.618 + (16 * 1.618 - 14 * 1.618) * ((100vw - 300px) / (1440 - 300)));
}
.fs19 { font-size: calc(16px + (19 - 16) * ((100vw - 300px) / (1440 - 300))); line-height: calc(16px*1.3 + (19*1.3 - 16*1.3) * ((100vw - 300px) / (1440 - 300)));}
.fs24 { font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1440 - 300))); line-height: calc(18px*1.3 + (24*1.3 - 18*1.3) * ((100vw - 300px) / (1440 - 300)));}
.fs32 { font-size: calc(18px + (32 - 18) * ((100vw - 300px) / (1440 - 300))); line-height: calc(18px*1.3 + (32*1.3 - 18*1.3) * ((100vw - 300px) / (1440 - 300)));}
.fs42 { font-size: calc(22px + (42 - 22) * ((100vw - 300px) / (1440 - 300))); line-height: calc(22px*1.3 + (42*1.3 - 22*1.3) * ((100vw - 300px) / (1440 - 300)));}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:focus { outline: none; }
::-moz-focus-inner { border: 0; }
::selection { color: #fff; background: #921a1c; }
.wow { visibility: hidden; }
a { color: #921a1c; font-weight: normal; text-decoration: none; transition: color .2s ease-in-out; }
a:hover { color: #222; text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin: -5px 0 2vh 0; font-family: AkBe; font-weight: bold; text-transform: uppercase; line-height: 1.2em !important; color: #921a1c }
.red { color: #921a1c; }

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#topbar-container { position: fixed; z-index: 1010; top: 0; left: 0; width: 100%; background-color: #921a1c; color: #ccc; }
#topbar { display: flex; align-items: center; width: 100%; height: 0; font-size: 13px; line-height: 16px; }
#topbar a { text-decoration: none; color: #fff; }
#topbar i { margin-top: -1px; padding-right: 5px; font-size: 16px; color: #fff; }
#quick-contact { flex: 1 1 50%; white-space: nowrap; }
#commerce-kit { flex: 1 1 50%; text-align: right; }
#header-container { position: fixed; z-index: 1000; top: 0px; left: 0; width: 100%; background-color: #fff; box-shadow: -1px 1px 3px 2px rgb(35 31 32 / 10%); background-position: center; background-repeat: no-repeat; background-size: cover; }
header#main { display: flex; align-items: center; width: 100%; height: 90px; transition: all .3s ease-in-out; }
header#main.shrunk { height: 88px; }
#logo { flex: 1 1 50%; position: relative; z-index: 10001; }
#logo img { width: auto; height: 70px; transition: all .3s ease-in-out; }
#logo .logo { padding: 8px; }
#stage { position: relative; width: 100%; padding: 80px 0 0 0; }
.mega-menu-horizontal { max-height: 300px; overflow: auto; }
#mega-menu-wrap-main-navigation .mega-menu-toggle + #mega-menu-main-navigation { overflow: scroll; height: 87vh; }
.mega-sub-menu .mega-sub-menu { padding: 10px 20px 30px 20px !important; }
.mega-sub-menu .mega-sub-menu .mega-sub-menu { padding: 10px 0 30px 0px !important; }
@media (min-width: 54em) {
	#topbar-container { padding: 0; }
	#topbar { font-size: 14px; height: 40px; line-height: 18px; }
	#topbar.shrunk { height: 30px; }
	#topbar i { font-size: 18px; }
	#header-container { top: 40px; padding: 0 30px; }
	header#main { height: 110px; }
	#logo img { height: 80px; }
	header#main.shrunk #logo img { height: 60px; }
	#logo { flex: 1 1 25%; }
	.mega-menu-horizontal li a:before { content: ""; position: absolute; width: 100%; height: 3px; top: 20px; left: 0; background: #b5272e; visibility: hidden; transform: scaleX(0); transition: .2s linear; }
	.mega-menu-horizontal li:hover a { color: #fff; }
	.mega-menu-horizontal li a:hover:before, .mega-menu-horizontal li a:focus:before { visibility: visible; transform: scaleX(1); }
	#stage { padding: 150px 0 0 0; }
	.mega-sub-menu .mega-sub-menu { padding: 0 !important; }
	.mega-sub-menu .mega-sub-menu .mega-sub-menu { padding: 0 !important; }
}
@media (min-width: 64em) {
	header#main { height: 125px; }
	#logo img { height: 88px; }
	header#main.shrunk #logo img { height: 66px; }
}
@media (min-width: 76em) {
	header#main { height: 130px; }
	#logo img { height: 96px; }
	#logo .logo { padding: 10px; }
	header#main.shrunk #logo img { height: 70px; }
	#stage { padding: 118px 0 0 0; }
	#mega-menu-wrap-main-navigation .mega-menu-toggle + #mega-menu-main-navigation { overflow: inherit; height: auto; }
}

/* Homepage Galleries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#homepage-galleries { display: flex; flex-wrap: wrap; background-color: #fff; }
#commercial-gallery { position: relative; flex: 1 1 100%; border-bottom: 4px solid #fff; }
#residential-gallery { position: relative; flex: 1 1 100%;  border-top: 4px solid #fff; }
#homepage-galleries .gallery-title { position: absolute; top: 15%; left: 50%; transform: translate(-50%, -15%); width: 100%; padding-right: 15px; text-align: center; font-family: AkBe; font-weight: bold; text-transform: uppercase; color: #fff; text-shadow: 0 5px 10px rgba(0,0,0,0.5); }
#homepage-galleries .gallery-buttons { margin-top: 30px; text-align: center; }
.fancybox__backdrop { background: rgba(0, 0, 0, .95); }
@media (min-width: 36em) {
	#commercial-gallery { flex: 1 1 50%; border-right: 8px solid #fff; border-bottom: none; }
	#residential-gallery { flex: 1 1 50%; border-left: 8px solid #fff; border-top: none; }
}

/* Slideshow
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.slideshow { display: block; background: #fff; }
.slideshow.padded { border-bottom: solid 10vh #fff; }
.slide { position: relative; display: block !important; background: #000; }
.slide-text { position: relative; padding: 30px 15px 0 15px; background-color: #f9f9f9; text-align: center; }
.slide-text h3 { margin: 0; padding: 0 0 10px 0; color: #921a1c; }
.slide .button { display: inline-block; margin: 20px 0; }
.slide .mobile-image { opacity: 1 !important; }
@media (min-width: 60em) {
	.slideshow { display: block; background: #000; }
	.slide-text { position: absolute; z-index: 2; max-width: 75vw; padding: 30px 30px 0 30px; background-color: transparent; left: 50%; top: 50%; transform: translate(-50%, -50%); }
	.slide-text h3 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); }
	.slide-text p { color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.7); }
}

/* Text Block
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.text-block-full { position: relative; padding-top: 3vh; }
.text-block-sidebar { position: relative; padding-top: 3vh; }
.text-block { padding: 0 0 1vh 0; }
.sidebar { padding: 0 0 1vh 0; }
.text-block p { margin: 0 0 2vh 0; }
.text-block ul, .text-block ol { margin: 0 0 2vh 45px; }
.text-block h1, .text-block h3 { margin: 2vh 0; }
.text-block ul { list-style: square; margin: 0 0 2vh 30px; }
@media (min-width: 54em) {
	.text-block-full { padding-top: 5vh; }
	.text-block-sidebar { padding-top: 5vh; }
	.text-block-sidebar .text-block { float: left; width: 56.5%; }
	.text-block-sidebar .sidebar { float: right; width: 39.5%; padding-top: 3vh; }
}

/* Message
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.message-container { background-color: #fff; }
.message { position: relative; width: 90%; margin: 0 auto; padding: 20px 0; text-align: left; }
.message p, .message ul, .message ol { margin: 0 0 2vh 0; }
.message h1 { margin: 4vh 0 2vh 0; }
.message ul { list-style: square; margin: 0 0 2vh 30px; }
.message .button { display: inline-block; margin: 20px 0; }
.message img.COR { float: right; margin: 0 0 15px 15px !important; max-width: 110px !important; }
@media (min-width: 54em) {
	.message { width: 50%; padding: 4vh 0 8vh 0; }
	.message ul, .message ol { margin: 0 0 2vh 45px; }
	.message img.COR { margin: 0 0 30px 30px !important; max-width: 220px !important; }
}

/* Single Image
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.single-image { position: relative; width: 100%; padding-bottom: 50%; background-size: 50% 50%; background-repeat: no-repeat; background-size: cover; }
.single-image img { display: block; opacity: 0; }
.single-image-caption { width: 100%; text-align: right; margin: 1.2vh 0 5vh 0; }
.single-image-caption p { margin: 0; padding: 0; font-size: .8em; }
.single-image-overlay { display: none; }
.single-image-overlay h1, .single-image-overlay-mobile h1 { text-align: left; text-transform: none; color: #000; font-size: 2rem; }
.single-image-mobile { display: block; }
.single-image-overlay-mobile { margin-bottom: -30px; padding: 20px; background-color: #f2f2f2; }
.padded-container .single-image { background-image: none !important; padding: 0 15px; }
.padded-container .single-image img { opacity: 1; }
.padded-container .single-image-caption { padding: 0 15px; }
@media (min-width: 42em) {
	.padded-container.image-container { max-width: 50%; }
}
@media (min-width: 42em) {
	.single-image { position: relative; width: 100%; padding-bottom: inherit; background-size: 100% auto; }
	.full-container .single-image-caption p { padding: 0 30px; }
}
@media (min-width: 60em) {
	.single-image-caption { margin: 1.5vh 0 1vh 0; }
	.single-image-overlay { display: block; position: absolute; bottom: 30px; left: 30px; width: 75%; padding: 30px; background-color: rgba(255, 255, 255, .9); }
	.single-image-overlay-mobile { display: none; }
	.padded-container .single-image { padding: 0 30px; }
	.padded-container .single-image-caption { padding: 0 30px; }
	.padded-container.image-container { max-width: 60%; }
}
@media (min-width: 72em) {
	.single-image-overlay { bottom: 30px; left: 30px; width: 60%; padding: 30px; }
	.single-image-overlay h1, .single-image-overlay-mobile h1 { font-size: 3rem; }
	.padded-container .single-image { padding: 0; }
	.padded-container .single-image-caption { padding: 0; }
	.padded-container.image-container { max-width: 1160px; }
}

/* Single Video
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.video { padding: 0; }
.gm-video-wrapper { position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden; }
.gm-video-wrapper img { width: 100%; height: auto; }
.gm-video-wrapper iframe, .video-wrapper object, .video-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.gm-video-wrapper img.icon-video { position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; width: 20%; margin: auto; opacity: .65; transition: opacity 0.2s ease; }
.gm-video-wrapper img.icon-video:hover { opacity: .9; }
@media (min-width: 1139px) {
	.video { padding: 0 15vw 10vh 15vw; }
}

/* Message
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.terrys-tips { background-color: #f0f0f0; }
.terrys-tips .message { width: 90%; padding: 3vh 0 5vh 0; }
.terrys-tips .message h1 { margin-top: 0; }
.terrys-tips .message .tip-image img { margin: 15px auto 30px auto;  max-width: 200px; }
@media (min-width: 46em) {	
	.terrys-tips .message { display: flex; padding: 5vh 0 3vh 0; }
	.terrys-tips .message .tip-image { flex: 1 0 30%; }
	.terrys-tips .message .tip-image img { max-width: 100%; margin: 0; padding: 0 30px 0 0; }
	.terrys-tips .message .tip-content { flex: 1 0 70%; text-align: left; } 
}
@media (min-width: 54em) {
	.terrys-tips .message .tip-image img { padding: 0 45px 0 0; }
}
@media (min-width: 72em) {	
	.terrys-tips .message { width: 60%; padding: 7vh 0 9vh 0; }
}

/* Image Gallery
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grid { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; margin: 0 -15px -15px 0; }
.grid-item { position: relative; flex: 0 0 50%; padding: 0 15px 15px 0; }
@media (min-width: 32em) {
	.grid-item { flex: 0 0 33.333%;  }
}
@media (min-width: 60em) {
	.grid-item { flex: 0 0 25%; }
}
@media (min-width: 92em) {
	.grid-item { flex: 0 0 20%; }
}
@media (min-width: 120em) {
	.grid-item { flex: 0 0 16.667%; }
}

/* Colour Charts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.colours { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; margin: 0 -15px -15px 0; }
.colour { position: relative; flex: 0 0 50%; padding: 0 15px 15px 0; text-align: center; }
.colour-pod { position: relative; width: 100%; }
.colour-pod:after { content: ""; display: block; padding-bottom: 100%; }
.colour-label { padding: 1vh 0 3vh; }
@media (min-width: 32em) {
	.colour { flex: 0 0 33.333%;  }
}
@media (min-width: 42em) {
	.colour { flex: 0 0 25%; }
}
@media (min-width: 60em) {
	.colour { flex: 0 0 20%; }
}
@media (min-width: 72em) {
	.colour { flex: 0 0 16.667%; }
}
@media (min-width: 96em) {
	.colour { flex: 0 0 14.2857142857143%; }
}

/* Distributors
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.distributor-listing { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 30px -15px -15px 0; }
.distributor { position: relative; flex: 0 0 100%; padding: 0 15px 45px 0; line-height: 1.5em; }
.distributor a { color: #000; text-decoration: none; }
.distributor a:hover { color: #921a1c; }
.distributor-name { font-weight: bold; margin: 0 0 5px 0; padding: 0; line-height: 1.7em; }
.distributor-region { margin-bottom: 30px; }
@media (min-width: 32em) {
	.distributor { flex: 0 0 50%;  }
}
@media (min-width: 60em) {
	.distributor { flex: 0 0 33.3333%;  }
}

/* Data Sheets
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#list-data-sheets { padding-top: 3vh; }
#list-data-sheets table td { vertical-align: top; }
.data-sheet-link-sku { line-height: 1.5em; white-space: nowrap; }
.data-sheet-link-details { line-height: 1.5em; padding-left: 1em; padding-bottom: 10px; }
.data-sheet-sub-heading { display: none; }
.label { display: inline; }
@media (min-width: 54em) {
	#list-data-sheets { padding-top: 5vh; }
}

/* Systems
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#systems-listing { margin-top: 0; padding-top: 8vh; }
#systems-listing.internal { margin-top: 0; padding-top: 2vh; }
.systems-listing li { margin-bottom: 15px; }
.systems-listing li a { font-weight: bold; }
.systems-listing-flex { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 30px -15px -15px 0; }
.systems-listing-flex-item { flex: 1 1 100%; max-width: 50%; padding: 0 30px 30px 0; }
.systems-listing-flex-item a { font-weight: bold; color: #333; }
.systems-listing-flex-item a:hover { color: #921a1c; text-decoration: none; }
.system-flex-image { padding-bottom: 10px; }
#system-component-graphic { position: relative; display: block; width: 100%; min-height: 320px; margin: 0 0 3vh 0; }
.system-component { position: absolute; width: 60%; left: 40%; transition: top .3s ease-in-out; }
.system-component-label { position: absolute; width: 37%; top: 50px; left: 0; text-align: right; transition: top .3s ease-in-out; font-size: .9em; }
#system-component-1 { top: 0px; z-index: 11; }
#system-component-2 { top: 40px; z-index: 10; }
#system-component-3 { top: 80px; z-index: 9; }
#system-component-4 { top: 120px; z-index: 8; }
#system-component-5 { top: 160px; z-index: 7; }
#system-component-6 { top: 200px; z-index: 6; }
#system-component-label-1 { top: 25px; z-index: 12; }
#system-component-label-2 { top: 65px; z-index: 11; }
#system-component-label-3 { top: 105px; z-index: 10; }
#system-component-label-4 { top: 145px; z-index: 9; }
#system-component-label-5 { top: 185px; z-index: 9; }
#system-component-label-6 { top: 225px; z-index: 7; }
#system-component-graphic.spread #system-component-1 { top: 0px; z-index: 11; }
#system-component-graphic.spread #system-component-2 { top: 50px; z-index: 10; }
#system-component-graphic.spread #system-component-3 { top: 100px; z-index: 9; }
#system-component-graphic.spread #system-component-4 { top: 150px; z-index: 8; }
#system-component-graphic.spread #system-component-5 { top: 200px; z-index: 7; }
#system-component-graphic.spread #system-component-6 { top: 250px; z-index: 6; }
#system-component-graphic.spread #system-component-label-1 { top: 25px; z-index: 12; }
#system-component-graphic.spread #system-component-label-2 { top: 75px; z-index: 11; }
#system-component-graphic.spread #system-component-label-3 { top: 125px; z-index: 10; }
#system-component-graphic.spread #system-component-label-4 { top: 175px; z-index: 9; }
#system-component-graphic.spread #system-component-label-5 { top: 225px; z-index: 8; }
#system-component-graphic.spread #system-component-label-6 { top: 275px; z-index: 7; }
#system-image { padding: 2vh 0; }
@media (min-width: 60em) {
	.systems-listing li { max-width: 800px; }
	.systems-listing-flex { margin: 30px -30px -30px 0; }
	.systems-listing-flex-item { flex: 1 1 20%; max-width: 20%; padding: 0 30px 30px 0; }
	.system-component { position: absolute; width: 60%; left: 40%; transition: top .3s ease-in-out; }
	.system-component-label { position: absolute; width: 37%; top: 50px; left: 0; text-align: right; transition: top .3s ease-in-out; font-size: .9em; }
	#system-component-1 { top: 0px; z-index: 11; }
	#system-component-2 { top: 30px; z-index: 10; }
	#system-component-3 { top: 60px; z-index: 9; }
	#system-component-4 { top: 90px; z-index: 8; }
	#system-component-5 { top: 120px; z-index: 7; }
	#system-component-6 { top: 150px; z-index: 6; }
	#system-component-label-1 { top: 40px; z-index: 12; }
	#system-component-label-2 { top: 70px; z-index: 11; }
	#system-component-label-3 { top: 100px; z-index: 10; }
	#system-component-label-4 { top: 130px; z-index: 9; }
	#system-component-label-5 { top: 160px; z-index: 8; }
	#system-component-label-6 { top: 190px; z-index: 7; }
	#system-component-graphic.spread #system-component-1 { top: 0px; z-index: 11; }
	#system-component-graphic.spread #system-component-2 { top: 60px; z-index: 10; }
	#system-component-graphic.spread #system-component-3 { top: 120px; z-index: 9; }
	#system-component-graphic.spread #system-component-4 { top: 180px; z-index: 8; }
	#system-component-graphic.spread #system-component-5 { top: 240px; z-index: 7; }
	#system-component-graphic.spread #system-component-6 { top: 300px; z-index: 6; }
	#system-component-graphic.spread #system-component-label-1 { top: 40px; z-index: 12; }
	#system-component-graphic.spread #system-component-label-2 { top: 100px; z-index: 11; }
	#system-component-graphic.spread #system-component-label-3 { top: 160px; z-index: 10; }
	#system-component-graphic.spread #system-component-label-4 { top: 220px; z-index: 9; }
	#system-component-graphic.spread #system-component-label-5 { top: 280px; z-index: 8; }
	#system-component-graphic.spread #system-component-label-6 { top: 340px; z-index: 7; }
}

/* Mailing List Sign-Up
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#mailing-list-sign-up { display: block; clear: both; margin: 0; padding: 30px 15px; color: #fff; background-color: #921a1c; }
#mailing-list-form { display: flex; flex-wrap: wrap; align-items: center; }
#mc_embed_intro { flex: 1 1 100%; padding-bottom: 15px; text-align: center; font-weight: bold; font-size: 20px; line-height: 36px; }
#mc_embed_intro span { display: block; font-weight: normal; font-size: 15px; line-height: 15px; }
#mc_embed_intro i { font-size: 22px; padding-right: 20px; }
#mc_embed_signup { flex: 1 1 100%; }
#mc_embed_signup form { text-align: center !important; padding: 0 !important; }
#mc_embed_signup input { font-family: 'Libre Franklin' !important; }
#mc_embed_signup input.button { font-family: AkBe !important; background-color: #81090b !important; }
@media (min-width: 76em) {
	#mailing-list-sign-up { padding: 30px; }
	#mc_embed_intro { flex: 1 1 50%; padding-bottom: 0; text-align: left; font-size: 26px; line-height: 36px; }
	#mc_embed_intro span { font-size: 17px; line-height: 17px; }
	#mc_embed_intro i { font-size: 58px; float: left; padding-right: 30px; }
	#mc_embed_signup { flex: 1 1 50%; text-align: right; }
	#mc_embed_signup form { text-align: right !important; }
}

/* Maps
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.map-container { position: relative; width: 100%; height: 400px; margin: 0; }
#map-canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer { clear: both; padding: 3vh 0; background-color: #333; color: #fff; text-align: center; }
footer #sub-links { display: block; }
footer #sub-links .padh { display: none; }
footer a { display: inline-block; padding: 15px 8px 0 8px; color: #999; text-decoration: none; }
footer a:hover { color: #fff; }
footer #social i { margin: 0 15px; font-size: 24px; }
@media (min-width: 54em) {
	footer { text-align: left; }
	footer #sub-links { display: inline; }
	footer #sub-links .padh { display: inline; }
	footer a { display: inline; padding: 15px 0 0 0; }
	footer #social { float: right; margin-top: -7px; }
	footer #social i { margin: 0 0 0 30px; font-size: 26px; }
}

/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
    font-family:'AkBe';
    src:url('../fonts/ak-be-webfont.eot');
    src:url('../fonts/ak-be-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ak-be-webfont.woff') format('woff'),
         url('../fonts/ak-be-webfont.ttf') format('truetype'),
         url('../fonts/ak-be-webfont.svg#AkBe') format('svg');
    font-weight:normal;
    font-style:normal;
}

/* =======================================================================================
	Slick Slider
==========================================================================================*/
@charset 'UTF-8';.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-dots li button:before,.slick-next:before,.slick-prev:before{font-family:slick;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-dots li,.slick-dots li button{cursor:pointer;height:30px;width:30px}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;min-height:1px}[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-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-loading .slick-list{background:url(../images/ajax-loader.gif) center center no-repeat #fff}@font-face{font-family:slick;font-weight:400;font-style:normal;src:url(../fonts/slick.eot);src:url(../fonts/slick.eot?#iefix) format('embedded-opentype'),url(../fonts/slick.woff) format('woff'),url(../fonts/slick.ttf) format('truetype'),url(../fonts/slick.svg#slick) format('svg')}.slick-next,.slick-prev{font-size:0;line-height:0;position:absolute;z-index:10;top:47%;display:block;width:60px;height:60px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0}.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:.95}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-size:40px;line-height:1;opacity:.75;color:#eee}.slick-prev{left:25px}[dir=rtl] .slick-prev{right:25px;left:auto}.slick-prev:before{content:'←'}.slick-next:before,[dir=rtl] .slick-prev:before{content:'→'}.slick-next{right:25px}[dir=rtl] .slick-next{right:auto;left:25px}[dir=rtl] .slick-next:before{content:'←'}.slick-dots{position:relative;width:100%;padding:0;margin:0;list-style:none;text-align:center}@media (min-width:959px){.slick-dots{display:block}}.slick-dots li{position:relative;display:inline-block;margin:0 2px;padding:0}.slick-dots li button{font-size:0;line-height:0;display:block;padding:2px;color:transparent;border:0;outline:0;background:0 0}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:.95}.slick-dots li button:before{font-size:12px;line-height:30px;position:absolute;top:0;left:0;width:30px;height:30px;content:'•';text-align:center;opacity:.65;color:#ddd}@media (min-width:959px){.slick-dots li button:before{color:#fff}}.slick-dots li.slick-active button:before{opacity:.99;color:#c6383f}@media (min-width:54em){.slick-next,.slick-prev{top:50%}}
@media (min-width: 60em) {
	.slick-dots{position:absolute;bottom:40px;}
}

/* =======================================================================================
	WooCommerce
==========================================================================================*/

.woocommerce { width: 100%; }
.woocommerce-ordering { display: none; }
.product-filtering { margin-bottom: 30px; }
.technical-data-sheet-section { display: none; }
fieldset { margin-bottom: 30px; }
.button { background-color: #921a1c !important; color: #fff !important; transition: background-color .2s ease-in-out; text-transform: uppercase; font-family: AkBe; border-radius: 0 !important; }
.button:hover { background-color: #b5272e !important; }
.mailing-list-sign-up .button { background-color: #71030a !important; }
.mailing-list-sign-up .button:hover { background-color: #b5272e !important; }
.woocommerce-MyAccount-navigation { line-height: 1.3em; }
.woocommerce-MyAccount-content { line-height: 1.3em; }
.woocommerce-MyAccount-content p { margin-bottom: 30px; line-height: 1.4em; }
.woocommerce-MyAccount-navigation ul { list-style-type: none; }
.woocommerce-account .addresses .title h3 { width: 100%; }
.woocommerce-info { border-top-color: #921a1c; }
.woocommerce-info::before { color: #921a1c; }
.woocommerce form .form-row { margin: 10px 0; padding: 0; }
.price { margin: 6px 0 15px 0; font-weight: bold; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: #921a1c; }
.sku_wrapper { margin: 5px 0 30px 0; font-family: AkBe; text-transform: uppercase; }
.sku { display: inline-block; margin-top: 5px; font-weight: bold; color: #fff; background: #921a1c; padding: 7px 10px; }
input { padding: 6px; }
.product_title { line-height: 1; margin: 0 !important; padding: 0 !important; }
.product-details-heading { margin-top: 40px; padding-bottom: 7px; border-bottom: 1px solid #b5272e; }
.product-details td { margin: 0; padding: 15px; 0; border-bottom: 1px solid #444; line-height: 23px; }
.product-details ul { list-style: square; margin: 0 18px 30px 45px; padding: 0; }
.product-details ol { margin: -10px 18px 30px 45px; padding: 0; }
.product-details li { width: 100%; margin: 0; padding: 0; }
.product-details p { margin-bottom: 30px; }
.product-details a { font-weight: bold; }
.product-details p:last-child { margin-bottom: 0; }
.product_meta p, .product_meta  li { font-size: 15px; line-height: 20px; }
h3.product-category { margin: -15px 0 30px 0; padding: 0; }
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width: 100%; }
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary { width: 100%; }
.product table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.product th { background: #ccc; color: #000; font-weight: bold; }
.product td, .single-product th { padding: 7px; border: 1px solid #777; text-align: left; font-size: .85em; line-height: 1.3em; }
.data-sheets { margin: 10px 0; }
.data-sheets i { font-size: 2em; padding-right: 10px; }
.data-sheets a { display: block; margin-left: 25px; margin-bottom: 15px; }
.data-sheets a:hover { text-decoration: none; }
.return-to-shop { margin-top: 30px; }
#add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img { width: 128px; }
.product-name a { font-weight: bold; }
@media (min-width: 530px) {
	.technical-data-sheet-section { display: block; }
}
@media (min-width: 54em) {
	.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width: 35.5%; }
	.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary { width: 60.5%; }
	.product_meta p, .product_meta li { font-size: 16px; line-height: 23px; }
	.product.system { padding-top: 0; }
}
@media (min-width: 72em) {
}

/* Blog
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Blog posts: drop the .slideshow.padded 10vh bottom whitespace so the slideshow
   flows directly into the content area without an awkward gap. */
.single-post .slideshow.padded { border-bottom: 0; }

/* Single posts: force .fs16 sizing on .copy elements so plain Text Block
   sections (inc/text-block.php — which doesn't apply .fs16 itself) still
   get golden-ratio line-height. The blog listing applies .fs16 directly
   on the excerpt wrapper in page-blog.php, so no extra rule needed there. */
body.single-post .copy {
	font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1440 - 300)));
	line-height: calc(14px * 1.618 + (16 * 1.618 - 14 * 1.618) * ((100vw - 300px) / (1440 - 300)));
}

/* Single posts: keep body sections in the same 56.5% narrow column the ABOUT
   page uses, regardless of which ACF section type the post is built from.
   Without this, plain Text Block (inc/text-block.php) and Colour Chart
   (inc/colour-chart.php) render their .text-block at full width because their
   wrappers don't carry a width rule — only .text-block-sidebar does. */
@media (min-width: 54em) {
	body.single-post #page-sections > section > .text-block,
	body.single-post #page-sections > section > .text-block-full > .text-block,
	body.single-post #page-sections > section > .text-block-sidebar > .text-block {
		float: left;
		width: 56.5%;
	}
	/* Clearfix on each wrapper level so they auto-size to the floated child. */
	body.single-post #page-sections > section::after,
	body.single-post #page-sections > section > .text-block-full::after,
	body.single-post #page-sections > section > .text-block-sidebar::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* Listing pages (page-blog.php) */
.post-list { padding: 1vh 0 2vh 0; }
.post-summary { padding: 2vh 0 3vh 0; border-bottom: 1px solid #e2e2e2; }
.post-summary:last-child { border-bottom: none; }
.post-summary .post-title { margin: 0 0 1vh 0; }
.post-summary .post-title a { color: #921a1c; text-decoration: none; }
.post-summary .post-title a:hover { color: #222; text-decoration: none; }
.post-excerpt { margin: 0 0 1vh 0; }
.post-excerpt p { margin: 0 0 1vh 0; }
.post-readmore { margin: 1vh 0 0 0 !important; }
.post-readmore a { color: #921a1c; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; font-size: .85em; }
.post-readmore a:hover { color: #222; text-decoration: none; }

/* Post meta (just date) — used on both listings and single posts */
.post-meta { margin: 0 0 1.5vh 0; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }

/* Single post: prev/next navigation */
.post-navigation { margin: 1vh 0 0 0; }
.post-navigation .post-prev { float: left; max-width: 48%; }
.post-navigation .post-next { float: right; max-width: 48%; text-align: right; }
.post-navigation a { color: #921a1c; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.post-navigation a:hover { color: #222; text-decoration: none; }

/* Listing pagination */
.pagination { margin: 2vh 0 0 0; }
.pagination .pag-prev { float: left; }
.pagination .pag-next { float: right; }
.pagination a, .pagination .page-numbers { display: inline-block; padding: 0 8px; color: #921a1c; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.pagination .page-numbers.current { color: #222; }
.pagination a:hover { color: #222; text-decoration: none; }

@media (min-width: 54em) {
	.post-list { padding: 2vh 0 3vh 0; }
	.post-summary { padding: 3vh 0 4vh 0; }
}