/* cmsms stylesheet: WEBSITE - HTML Reset modified: Friday, June 12, 2020 5:38:58 PM */
/* html5reset.css - 01/11/2011 */

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display: block;
}

nav ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000; 
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration:  line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;   
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}
/* cmsms stylesheet: WEBSITE - Slick Theme modified: Saturday, April 27, 2024 9:33:15 PM */
/* ===== SLICK THEME LAYOUT CSS ===== */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -khtml-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 -ms-touch-action: pan-y;
 touch-action: pan-y;
 -webkit-tap-highlight-color: transparent;
}
.slick-list {
 position: relative;
 display: block;
 overflow: hidden;
 margin: 0;
 padding: 0;
}
.slick-list:focus {
 outline: none;
}
.slick-list.dragging {
 cursor: pointer;
 cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
 -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 {
 position: relative;
 top: 0;
 left: 0;
 display: block;
 margin-left: auto;
 margin-right: auto;
}
.slick-track:before,
.slick-track:after {
 display: table;
 content: '';
}
.slick-track:after {
 clear: both;
}
.slick-loading .slick-track {
 visibility: hidden;
}
.slick-slide {
 display: none;
 float: left;
 /* height: 100%; */ /* knocked this out to allow my own css to size the images */
 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-loading .slick-slide {
 visibility: hidden;
}
.slick-vertical .slick-slide {
 display: block;
 height: auto;
 border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
 display: none;
}

/* ===== SLICK THEME CONTROLS CSS ===== */
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list{
 background: #fff url(https://select-line.co.uk/uploads/images/slick/ajax-loader.gif) center center no-repeat;
}

/* Arrows */
.slick-prev,
.slick-next{
 font-size: 0;
 line-height: 0;
 position: absolute;
 display: block;
 width: 50px;
 height: 50px;
 padding: 0;
 -webkit-transform: translate(0, -50%);
 -ms-transform: translate(0, -50%);
 transform: translate(0, -50%);
 cursor: pointer;
 color: transparent;
 border: none;
 outline: none;
 background: transparent;
 z-index: 1;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus{
 color: transparent;
 outline: none;
 background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before{
 color: rgba(153,153,153,.6);
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before{
 color: rgba(153,153,153,.1);
}

.slick-prev:before,
.slick-next:before{
 font-family: 'slick';
 font-size: 48px;
 line-height: 1;
 color: rgba(153,153,153,.3);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
} 

.slick-prev{   
 left: 25px;
}
[dir='rtl'] .slick-prev{
 left: auto;    
 right: 25px;
}
.slick-prev:before{
 content: '←'; /* using slick font */
 font-family: "Font Awesome 5 Pro";
 font-weight: 900;
 content: "\f0a8"; /* arrow-circle-left */
}
[dir='rtl'] .slick-prev:before{
 content: '→';
 font-family: "Font Awesome 5 Pro";
 font-weight: 900;
 content: "\f0a9"; /* arrow-circle-right */
}

.slick-next{
 right: 25px;
}
[dir='rtl'] .slick-next{
 right: auto;
 left: 25px;
}
.slick-next:before{
 content: '→';
 font-family: "Font Awesome 5 Pro";
 font-weight: 900;
 content: "\f0a9"; /* arrow-circle-right */
}
[dir='rtl'] .slick-next:before{
 content: '←';
 font-family: "Font Awesome 5 Pro";
 font-weight: 900;
 content: "\f0a8"; /* arrow-circle-left */
}

/* Dots */
.slick-dotted.slick-slider{
 margin-bottom: 60px;
}

.slick-dots{
 position: absolute;
 display: block;
 width: 100%;
 padding: 0;
 margin: 0;
 list-style: none;
 text-align: center;
 z-index:0;
}
.slick-dots li{
 position: relative;
 display: inline-block;
 /* width: 50px;
 height: 50px;*/
 margin: 0 25px;
 padding: 0;
 cursor: pointer;
}
.slick-dots li button{
 font-size: 0;
 line-height: 0;
 display: block;
 width: 20px;
 height: 20px;
 padding: 5px;
 cursor: pointer;
 color: transparent;
 border: 0;
 outline: none;
 background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus{
 outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before{
 opacity: 1;
}
.slick-dots li button:before{
 font-family: 'slick';
 font-size: 12px;
 line-height: 20px;
 position: absolute;
 top: 0;
 left: 0;
 width: 20px;
 height: 20px;
 content: '•';
 font-family: "Font Awesome 5 Pro";
 font-weight: 900;
 content: "\f111"; /* solid circle */
 text-align: center;
 opacity: .25;
 color: black;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before{
 opacity: .75;
 color: black;
}

/* SLICK SLIDESHOW AMENDS */
#slideshow .slick-prev{   
 left: 10px;
 top: 35vh;
}
#slideshow .slick-next{   
 right: 10px;
 top: 35vh;
}
#slideshow .slick-dots{
 z-index:10;
 margin-top: -5vh;
}

/* SLICK CAROUSEL AMENDS */
#carousel .slick-prev{   
 left: 0;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}
#carousel .slick-next{   
 position: absolute;
 right: 0;
 top: 50%;
 transform: translateY(-50%);
}
#carousel .slick-dots{
 margin-top: 35px;
}
/* cmsms stylesheet: WEBSITE - Print Stylesheet modified: Friday, June 12, 2020 5:43:59 PM */
@media only print{
body {padding:0;margin:0;color: #000;background-color: #fff;}

img#logo {filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(150%);} /* reverses a white logo to black for printing on pages */
}
/* cmsms stylesheet: WEBSITE - Main Stylesheet modified: Saturday, April 27, 2024 9:38:50 PM */
:root {
  --headings: rgb(102,102,102); /* lighter grey */
  --text: rgb(66,85,99); /* dark grey */
  --link: rgb(253,0,153);
  --linkhover: rgb(0,0,0);
  --backgroundbanner: rgba(255,0,153,.05); /* light pink */
  --backgroundbanner: rgba(255,0,153,.05); /* light pink */ 
  --button: rgba(255,0,153,.95); 
  --buttontext: rgba(255,255,255,1);
  --buttonhover: rgb(0,0,0);
  --focus: rgb(253,0,153); /* pink */
  --headericons: rgb(255,0,153);
}
/* [1] ===== FONTS ===== [1] */
*:focus-visible {
  outline: 2px solid var(--focus);
}
html {
 scroll-behavior: smooth;
 scroll-padding-top: 5vh;
 -webkit-tap-highlight-color: rgba(255,255,255,.1);
}
body {
 background: rgb(255,255,255);
}
/* [2] ===== HEADINGS ===== [2] */
h1, h2, h3, h4, h5, h6, .contactform legend {
 font-family: 'Poppins', Arial, Helvetica, sans-serif;
 font-weight: 400;
 margin-top: 32px;
 margin-bottom: 24px;
 letter-spacing: 0;
 color: var(--headings);
 text-transform: capitalize;
 width: 100%;
}
h1 {
 font-size: 34px;
 font-weight: 400;
 line-height: 1;
 margin-top:0;
}
h2, .contactform legend {
 font-size: 30px;
 line-height: 1;
}
h3 {
 font-size: 27px;
 line-height: 1;
}
h4 {
 font-size: 21px;
 line-height: 1.25;
}
h5 {
 font-size: 18px;
 line-height: 1.25;
}
h6 {
 font-size: 18px;
 line-height: 1.25;
}

@media screen and (max-width: 650px) {
 h1 {
  font-size: 24px;
 }
 h2{
  font-size: 21px;
 }
 h3 {
  font-size: 18px;
 }
 h4, h5, h6 {
  font-size: 16px;
 }
}
/* END OF HEADINGS ===== */

/* [3] ===== TYPOGRAPHY ===== [3] */
p, ol, ul, dl, address {
 margin-bottom: 1.5em;
 font-size: 1em;
 line-height: 1.5;
 color: var(--text); /* dark grey */
 font-family: 'Raleway', Arial, Helvetica, helve, sans-serif;
}
p {
 -webkit-hyphens: none;
 hyphens: none;
}
ul, ol {
 margin: 0 0 1.5 0;
 padding: 0 0 0 15px;
}
li ul, li ol {
 margin: 0;
 font-size: 100%;
}
a:link, a:visited {
 color: var(--link);
}
a:hover, a:visited:hover {
 color: var(--linkhover);
}
@media screen and (max-width: 640px) {
 p, ul {
  font-size: 14px;
 }
}
dl, dd {
 margin-bottom: 1.5;
}
dt {
 font-weight: normal;
}
b, strong {
 font-weight: bold;
}
hr {
 display: block;
 margin: 1.5 0;
 padding: 0;
 height: 1px;
 border: 0;
 border-top: 1px solid #ccc;
}
blockquote {
 border: 1px solid rgb(224,224,224);
 padding: 20px 20px 0 20px;
 margin: 40px 0;
}
blockquote p {
 color: var(--text);
}
button, .button, input[type='submit'], .NewsButton a{
  background: var(--button);
  color: var(--buttontext) !important;
  margin: 10px 0;
  padding: 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
}
button:hover, .button:hover, input[type='submit']:hover, .NewsButton a:hover{
  background: var(--buttonhover); /* mid grey */
}
div.button-container,
div.button-container-projects {
 width: 100%;
 text-align: center;
 padding: 25px 0;
 text-decoration: none;
}
div.button-container-projects {
 text-align: right;
}
.NewsButton a{
 padding: 25px 5%;
}
table {
 font-size: 1em;
 line-height: 1.5;
 color: rgba(0,0,0,1);
 font-family: 'Open Sans', Arial, Helvetica, helve, sans-serif;
}
tr:nth-of-type(odd) {
 background: rgba(0,0,0,.025);
}
th {
 font-weight: bold;
 border-bottom: 1px solid rgb(0,0,0);
 background: rgba(0,0,0,.05);
 vertical-align: bottom;
}
th, td {
 padding: 10px;
 text-align: left;
}
td:nth-of-type(1) {
 font-weight: bold;
}
@media screen and (max-width: 480px) {
 div.button-container,
 div.button-container-projects {
  font-size: 12px;
 }
}

/* END OF TYPOGRAPHY ===== */

/* [4] ===== ELEMENTS ===== [4] */

/* render an element invisible */
.hideme {
 opacity: 0;
}
#skiptomain,
#skiptonav,
.offscreen {
 position: absolute;
 left: -10000px;
 top: auto;
 width: 1px;
 height: 1px;
 overflow: hidden;
}
.hidden {
 visibility: hidden;
}
section, header, footer {
 max-width: 100vw;
 overflow-x: hidden;
}
.content-block {
 margin: 50px 0;
}
.container_1column,
.container {
 margin: 5vh auto;
 max-width: 90vw;
}
@media screen and (min-width: 800px) {
 .container_1column {
  max-width: 70vw;
 }
}
@media screen and (min-width: 1280px) {
 .container_1column {
  max-width: 50vw;
 }
}
/* END OF ELEMENTS ===== */

/* [5] ===== HEADER ===== [5] */
header {
 background: none;
 position: fixed;
 z-index:100;
 top: 0;
 width: 100vw;
 height: 90px;
 background-color: rgba(255,255,255,1);  /* header bar white bg */
 border-bottom: 1px solid rgb(245,245,245);
}
nav {
 z-index: -1;
 position: fixed;
 top: 0;
 right: 0;
 width: 65%;
 height: 90px;
}

#logo {
 position:fixed;
 top:25px;
 left:10px;
 z-index:1;
 width: 100%;
 max-width: 175px;
 height:auto;
 margin: 0;
 float:left;
}

#header-icons {
 position:fixed;
 z-index:1;
 right: 100px;
 top: 18px;
}
#header-icons .fas{
 font-size: 2.4em;
 color: var(--headericons);
 margin-top: 3px;
}
#header-icons .fas:hover{
 font-size: 2.4em;
 color: rgba(255,0,153,.5);
 margin-top: 3px;
}
@media screen and (max-width: 640px) {
#header-icons {
 top: 21px;
}
}
#header-icons li {
 display:inline;
 margin: 0 0 0 10px;
}
#header-icons a {
/* color:#fff;*/
 color: rgb(102,102,102);
 text-decoration: none;
}
.header-email-icon,
.header-telephone-text {
 display: none;
}
.header-telephone-text {
 font-family:'Open Sans';font-size:28px;line-height:48px;vertical-align:top;margin-right:15px;
}
@media screen and (max-width: 390px) {
#logo {
 max-width: 125px;
 top: 30px;
}
}

@media screen and (min-width: 340px) {
#header-icons li {
 display:inline;
 margin: 0 0 0 20px;
}
.header-email-icon {
 display: unset;
}
.header-telephone-text {
 font-size:18px;
}
}
@media screen and (min-width: 420px) {
#logo {
 max-width: 175px;
 top: 30px;
}
}
@media screen and (min-width: 580px) {
nav {
 width: 50%;
}
.header-telephone-text {
 display: unset;
}
}
@media screen and (min-width: 640px) {
#logo {
 max-width: 175px;
}
.header-telephone-text {
 font-size:24px;
}
}
@media screen and (min-width: 800px) {
#logo {
 max-width: 250px;
 top: 10px;
}
nav {
 width: 40%;
}
}

@media screen and (min-width: 1366px) {
#header-icons {
 right: 20px;
}
nav {
 width: 25%;
}
.header-telephone-text {
 font-size: 18px;
}
}

/* END OF HEADER CONTENT ===== */

/* END OF HEADER ===== */

/* [6] ===== NAVIGATION ===== [6] */
/* --- Main Menu --- */
@media screen and (max-width: 1365px) {
#menuToggle {
 display: block;
 position: fixed;
 top: 25px;
 right: 25px;
 z-index: 1; 
 -webkit-user-select: none;
 user-select: none;
}
#menuToggle a {
 text-decoration: none; 
 color: rgb(204,204,204); 
 transition: color 0.3s ease;
}
#menuToggle a:hover {
 color: rgb(250,0,153);
}
#menuToggle input {
 display: block;
 width: 60px;
 height: 60px;
 position: absolute;
 top: -20px; 
 right: 0; 
 cursor: pointer;  
 opacity: 0; /* hide this */
 z-index: 2; /* and place it over the hamburger */  
 -webkit-touch-callout: none;
}

/* * Just a quick hamburger */
#menuToggle span {
 display: block;
 width: 50px;
 height: 6px;
 margin-bottom: 9px;
 position: relative;
 background: rgb(102,102,102); /* burger line color */
 border-radius: 3px;
 z-index: 1;  
 transform-origin: 0 -2px;  
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 opacity 0.55s ease;
}
#menuToggle span:first-child {
 transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
 transform-origin: 0% 100%;
}
/*  * Transform all the slices of hamburger * into a crossmark. */
#menuToggle input:checked ~ span {
 opacity: 1;
 transform: rotate(45deg) translate(-2px, -1px);
 transform: rotate(45deg) translate(0, 0);
 background: rgb(255,0,153); /* nhs yellow cross */
}
/* * But let's hide the middle one. */
#menuToggle input:checked ~ span:nth-last-child(3) {
 opacity: 0;
 transform: rotate(0deg) scale(0.2, 0.2);
}
/* * Ohyeah and the last one should go the other direction */
#menuToggle input:checked ~ span:nth-last-child(2) {
 transform: rotate(-45deg) translate(-3px, 0);
}

/* * Make this absolute positioned * at the top right of the screen */
#menu {
 position: absolute;
 right:0;
 width: 50vw;
 height: 100vh;
 height: calc(100vh + 100px);
 overflow-x: hidden;
 overflow-y: auto;
 margin: -100px -30px 0 0;
 padding: 125px 50px;
 background: rgba(0,0,0,.9); /* mobile menu bg - black */
 list-style-type: none;
 -webkit-font-smoothing: antialiased;
 /* to stop flickering of text in safari */  
 transform-origin: 0% 0%;
 transform: translate(200%, 0); 
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

/* ===  menu options format */

#menu .wrapper {
 height: auto;
 overflow-x: hidden;
 overflow-y: auto;
}

#menu ul li {
 font-size: 21px;
 border: 1px solid clear;
 cursor: pointer;
 padding: 0;
 margin: 20px 0;
 color: rgb(204,204,204);
}

/* #menu li.subsection::after {
 content: "+";
} */

#menu li:hover {
 color: rgb(255,0,153);
}

#menu ul li a {
 display: block;
}

#menu ul li ul li a {
 display: block;
 padding: 5px;
 margin: 0;
}
#menu ul li ul li a:before {
content: "--  ";
}

/* === end of menu options format */

/* * And let's slide it in from the left */
#menuToggle input:checked ~ div {
 transform: none;
}
}

@media screen and (max-width: 640px) {
#menu {
 width: 95vw;
}

#menu ul li {
 font-size: 18px;
}
}

@media screen and (min-width: 1366px) {

/*.subsection ul.hide {
 display: block;
} can probably be removed */

#menuToggle input {
 display: none;
}

#menu {
 position: absolute;
 left: -50vw;
 margin: 21px 0;
 padding: 0;
}

#menu ul,
#menu .wrapper {
 margin: 0;
 padding: 0;
}

#menu ul > li {
 font-size: 16px;
 cursor: pointer;
 margin: 0;
 padding: 0;
 float: left;
}

#menu ul > li:nth-of-type(1) {
 display: none;
}

#menu li div > ul,
#menu li > ul {
 position: absolute;
 left 0;
 display: none;
}

#menu li:hover div > ul,
#menu li:hover > ul {
 display: block;
}

#menu li ul li {
 float: left;
 clear: left;
 margin: 0;
 padding: 0;
}

#menu li div,
#menu li a:link,
#menu li a:visited {
 display: block;
 padding: 10px 25px;
 color: white;
 color: rgb(102,102,102);
 text-decoration: none;
}

#menu li li a:link,
#menu li li a:visited {
 width: 250px;
 color: rgb(204,204,204);
 background: rgba(51,51,51,1); /* submenu bg */
 text-decoration: none; 
}
#menu li li a:hover,
#menu li li a:visited:hover {
 background: rgba(0,0,0,1);
 text-decoration: none;
}
}

@media screen and (min-width: 1600px) {
#menu li div,
#menu li a:link,
#menu li a:visited {
 padding: 10px 30px;
}
#menu li li a:link,
#menu li li a:visited {
 width: 350px;
}
}

@media screen and (min-width: 1800px) {
#menu li div,
#menu li a:link,
#menu li a:visited {
 padding: 10px 30px;
}
}



/* --- Section Menu --- */
#section-navigation{
 text-align: centre;
}

#section-navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#section-navigation ul li {
 margin: 20px 0;
}

#section-navigation ul li li {
 display: block;
 margin: 2px 0;
}

#section-navigation a,
#section-navigation .sectionheader {
 display: block;
 padding: 20px;
 margin: 5px;
 text-align: center;
 text-decoration: none;
}

#section-navigation a:link,
#section-navigation a:visited {
 color: rgb(102,102,102);
 border: 1px solid rgb(204,204,204);
}

#section-navigation a:hover,
#section-navigation a:visited:hover {
 background: rgba(0,0,0,.05);
 color: rgb(50,99,59);
 font-weight: bold;
 border: 1px solid rgb(50,99,50);
}

#section-navigation a:hover::before {
 content: "+ ";
}

#section-navigation a:hover::after {
 content: " +";
}

/* --- end of Section Menu */

/* --- Sitemap Menu --- */
#sitemap{
 text-align: left;
}

#sitemap ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#sitemap ul li {
 margin: 20px 0;
}

#sitemap ul li li {
 display: inline-block;
 margin: 2px 0;
}

#sitemap a,
#sitemap .sectionheader {
 display: inline-block;
 padding: 20px;
 margin: 5px 10px 5px 0;
 text-decoration: none;
 border: 1px solid rgb(204,204,204);
}

#sitemap a:hover,
#sitemap a:visited:hover {
 background: rgba(0,0,0,.05);
 color: rgb(50,99,50);
 border: var(--focus);
}
/* --- end of Sitemap Menu */

/* END OF NAVIGATION ===== */

/* [7] ===== HOMEPAGE ===== [7] */


/* == SLIDESHOW HOMEPAGE ===== */
#slideshow {
 width: 100%;
 height: 70vh;
 max-height: 70vh;
 padding: 0;
 margin:0;
 overflow:hidden;
 background: rgba(0,0,0,.25);
}
/* Slider */
/* see slick style for controls */
#slideshow img {
 width: 100%;
 height: 70vh;
 object-fit: cover;
 object-position: 50% 20%;
}
#slideshow h2 {
 position: absolute;
 z-index: 100;
 margin: 40vh 5vw 40vh 5vw;
 width: 90vw;
 max-width: 90vw;
 text-align: center;
 color: rgba(255,255,255,1);
 text-shadow: 2px 2px 15px rgba(0,0,0,0.6);
 font-size: 36px;
 font-weight: 800;
}
#slideImageMedium,
#slideImageLarge {
 display: none;
}
#slideImageSmall {
 display: block;
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
 #slideImageSmall,
 #slideImageLarge {
  display: none;
 }
 #slideImageMedium {
  display: block;
 }
}
@media screen and (min-width: 1024px) {
 #slideshow h2 {
  font-size: 48px;
 }
}
@media screen and (min-width: 1025px) {
 #slideImageSmall,
 #slideImageMedium {
  display: none;
 }
 #slideImageLarge {
  display: block;
 }
}
@media screen and (min-width: 1600px) {
 #slideshow h2 {
  font-size: 60px;
 }
}

#homepage-payroll {
 background: rgba(255,0,153,.05);
}

/* Why Us Homepage Blocks */
#why-us {
background: rgba(255,0,153,.05);
background: rgba(225,225,225,.25);
}

#why-us .container,
#homepage-products .container,
#homepage-jobs .container,
#jobs-summary .container {
 display: flex;
 flex-flow: row wrap;
 -webkit-justify-content: left;
 justify-content: left;
}

#why-us h2{
 text-align: center;
}

#why-us .item {
  flex: 0 0 auto;
  margin-bottom:10px;
  padding:20px;
  background:rgb(255,255,255);
  color: rgb(255,0,153);
  text-align: center;
  width: 100%;
  height: auto;
  margin: 1%;
  overflow: hidden;
}

#why-us h4 {
 color: rgb(102,102,102);
 font-size: 16px;
 font-weight: 700;
}

#why-us i{
 color: rgb(255,0,153);
}

#why-us img {
 width: 30%;
 min-width: 100px;
 height: auto;
}

@media screen and (min-width: 320px) {
#why-us .item {
 width: 48%;
}
}

@media screen and (max-width: 360px) {
#why-us h4 {
 font-size: 12px;
}
}

@media screen and (min-width: 640px) {
#why-us h4 {
 font-size: 20px;
}
}

@media screen and (min-width: 1150px) {
#why-us .item {
 width: 23%;
}
}

/* Homepage Products Area */
#homepage-products h2 {
 text-align: center;
}
#homepage-products .item {
  flex: 0 0 auto;
  margin-bottom:10px;
  padding:0;
  width: 100%;
  height: auto;
  margin: 1%;
  overflow: hidden;
  background: rgba(255,0,153,.05);
  /* set 'more' button to bottom of box */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#homepage-products img {
 max-height: 200px;
 width: 100%;
 object-fit: cover;
}

#homepage-products img {
 height: 20vh;
 min-height: 150px;
 width: 100%;
 object-fit: cover;
}

#homepage-products h4,
#homepage-products p {
 padding: 0 20px;
}

@media screen and (min-width: 374px) {
#homepage-products .item {
 width: 48%;
}
}

@media screen and (max-width: 420px) {
#homepage-products .item h4,
#homepage-products .item p {
 padding: 0 10px;
 font-size: 90%;
}
}

@media screen and (min-width: 1150px) {
#homepage-products .item {
 width: 23%;
}
}

/* Homepage & Summary Page jobs area */
#homepage-jobs .item,
#jobs-summary .item {
  flex: 0 0 auto;
  margin-bottom:10px;
  padding:0;
  width: 100%;
  height: auto;
  margin: 1%;
  overflow: hidden;
  background: rgba(255,0,153,.05);
  /* set 'more' button to bottom of box */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 
}
/* only show the latest four jobs on homepage */
#homepage-jobs .item:nth-child(n+7) {
 display: none;
}

#homepage-jobs h2,
#homepage-jobs h3,
#jobs-summary h2,
#jobs-summary h3,
#homepage-jobs p,
#jobs-summary p {
 padding: 0 20px;
}
#homepage-jobs a,
#jobs-summary a {
 margin-right: 20px;
}
.job-post-date,
.job-post-reference {
 color:rgb(0,132,148); /* darker aqua green */
}

@media screen and (min-width: 374px) {
#homepage-jobs .item,
#jobs-summary .item {
 width: 48%;
}
}

@media screen and (max-width: 420px) {
#homepage-jobs .item h2,
#homepage-jobs .item h3,
#homepage-jobs .item p,
#jobs-summary .item h2,
#jobs-summary .item h3,
#jobs-summary .item p {
 padding: 0 10px;
 font-size: 90%;
}
}

@media screen and (min-width: 1150px) {
#homepage-jobs .item,
#jobs-summary .item {
 width: 23%;
}
}


/* Testimonials Homepage Area */
#homepage-testimonials {
 background: black;
 padding: 25px 0;
 position: flex;
 text-align: center;
}
#carousel-testimonials {
 margin: 50px 0;
}
#homepage-testimonials h2,
#homepage-testimonials i,
#homepage-testimonials p{
 color: white;
}

#homepage-testimonials i{
 font-size: 50px;
}

#homepage-testimonials p.quote{
 margin: 25px auto;
 max-width: 800px;
 line-height: 1em;
}
#homepage-testimonials p.quote:before {
 content: "\201C"; /* left double quote */
 position: relative;
 font-size: 3em;
 top: 20px;
 left: -5px;
 color: rgb(255,153,204);
}
#homepage-testimonials p.quote:after {
 content: "\201D"; /* left double quote */
 position: relative;
 font-size: 3em;
 top: 20px;
 left: 5px;
 color: rgb(255,153,204);
}
@media screen and (min-width: 1366px) {
#homepage-testimonials .item i {
 font-size: 60px;
}
}

/* --- homepage accreditations carousel --- */
#carousel {
 background: rgba(255,255,255,1);
 margin: 0;
 padding: 25px 0;
 position: flex;
}

#carousel-logo-work img {
 margin: 10px;
 padding: 0 75px; /* use for 5 items */
 padding: 0 50px; /* use for 6 items */
 height: auto;
 background: rgb(255,255,255);
}

@media screen and (min-width: 1280px) {
#carousel-logo-work img {
 /* max-width: 200px; */
 }
}

/* --- end of homepage accreditations carousel */

/* --- homepage news carousel --- */
#carousel-news-container {
 background: rgba(0,94,184,.05);  
 margin: 0;
 padding: 25px 0;
 position: flex;
}
#carousel-news-container h4 {
 text-align: left;
 height: 40px;
}
#carousel-news-container ul{
 list-style: none;
}
#carousel-news-container .NewsSummary{
 background: rgba(0,94,184,.05); /* semi-transparent overlay which doubles the colour */
 padding: 5px;
}
#carousel-news-container span.NewsSummarySummary{
 display: flex;
 height: 150px;
 overflow: hidden;
}
#carousel-news-container span.flex-news-button{
 display: flex;
 text-align: right;
}

#carousel-news-container img {
 height: 20vh;
 min-height: 150px;
 width: 100%;
 object-fit: cover;
}

@media screen and (max-width: 800px) {
 #carousel-news-container img {
  max-height: 150px;
 }
 #carousel-news-container h4 {
  height: 20px;
 }
 #carousel-news-container .NewsPostDate,
 #carousel-news-container .NewsCategory {
  font-size: 11px;
 }
 #carousel-news-container span.NewsSummarySummary{
  height: 46px;
 }
}
/* --- end of homepage accreditations carousel */

footer {
 background: rgba(0,0,0,1);
 color: white;
 padding: 25px 5px;
 border-top: 1px solid rgb(51,51,51);
}
footer .container {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: flex-start;
 max-width: 98vw;
 margin:0 auto;
}
footer .item {
 width: 48%;
 height: auto;
 /* margin-bottom: 2%; */
 text-align: left;
}
 footer .item:nth-of-type(2){
  text-align: center;
 }
footer h4 {
 color: rgb(255,255,255);
}
footer img.footer-logo {
 width: 100%;
 max-width: 300px;
 height: auto;
}
footer img.footer-brochure {
 width: 100%;
 max-width: 140px;
 height: auto;
 border: 1px solid white;
}
footer .item i {
 font-size: 24px;
 margin: 0 8px 40px 8px;
}
footer a i {
 color: white;
}
footer a i:hover {
 color: rgba(255,255,255,0.5);
}
footer p {
color: white;
font-size: 12px;
}
footer a:link, footer a:visited {
 color: var(--link);
}
footer a:hover, footer a:visited:hover {
 color: white;
}
footer ul {
 list-style: none;
}
footer li {
 margin: 2px 0;
}
footer li a:link,
footer li a:visited {
 display: block;
 padding: 10px 5px;
 color: white;
 text-decoration: none;
 background: rgba(255,255,255,.1);
}
footer li a:hover,
footer li a:visited:hover {
 display: block;
 color: white;
 background: rgba(255,255,255,.25);
}
@media (min-width: 769px) {
 footer .item:nth-of-type(2){
  text-align: right;
 }
}
@media screen and (max-width: 768px) {
footer .container {
 align-items: flex-start;
}
footer .item {
  width: 100%;
  justify-content: space-evenly;
}
footer p,
footer li {
text-align: center;
}
footer img {
 max-width: 150px;
}

}

/* END OF HOMEPAGE ===== */

/* [8] ===== SECTION CONTENT ===== [8] */
#section-header img {
 width: 100vw;
 height: auto;
 min-height: 175px;
 max-height: 40vh;
 object-fit: cover;
 background: rgba(240,240,240,1);
}
#general-content-page li {
 margin: 10px 0;
}

/* --- accreditations page --- */
#accreditations-page .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid rgb(204,204,204);
}
#accreditations-page img {
 width: 90vw;
 height: auto;
}
@media screen and (min-width: 640px) {
#accreditations-page .item{
  display: flex;
  flex-direction: row;
  align-items: center;
}
#accreditations-page img {
 width: 30vw;
 max-width: 200px;
 height: auto;
 margin-right: 25px;
}
}
/* end of accreditations page ---*/

/* --- testimonials page --- */
.reviewer,
.reviewer-detail {
 margin: 5px 0;
 padding: 0;
 line-height: 14px;
}
.reviewer {
 font-weight: bold;
}
.reviewer-detail {
 font-style: italic;
}
/* end of testimonials page --- */

/*  PRODUCT SECTION ===== */
#product img {
 max-height: 60vh;
 min-height: 150px;
 width: 100%;
 object-fit: cover;
}

/* product text content styling */
ul.product-list-items  {
 list-style: none;
 margin: 0;
 padding:0;
}
.product-list-items li {
 margin: 6px 6px 6px 0;
 padding: 10px 15px;
 border: 1px solid silver;
 display: inline-block;
}

@media screen and (max-width: 420px) {
 .product-list-items li {
  margin: 4px 4px 4px 0;
  padding: 4px 8px;
  border: 1px solid silver;
  display: inline-block;
 }
}

/* Product Gallery layout */
#product-gallery {
  margin: 0 -0.5vw;
}

#product-gallery .container {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
#product-gallery .item {
  /* width: 100%; single image */
  width: 48%;
  height: auto;
  margin: 1%;
  overflow: hidden;
}
#product-gallery img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Lightbox CSS Overrides */
.lb-caption {
 font-size: 24px;
 font-family: Arial, Helvetica, sans-serif;
}

/* END OF PRODUCTS SECTION ===== */

/*  FAQ SECTION ===== */
#faqs .ui-widget {
 font-family: unset;
 font-size: unset;
}
#faqs .ui-state-default {
 background: none; /* header background unclicked */
 border: 0;
 color: rgba(0,0,0,1);
}
#faqs .ui-state-active {
 color: rgba(255,0,153,.9);
}
#faqs .ui-accordion .ui-accordion-header {
 font-size: revert; /* get rid of jquery's own font sizing for our H2 */
 font-weight: revert; /* get rid of jquery's own font styling for our H2 */
 padding: 10px 10px 10px 35px;
 font-size: 18px;
}
#faqs .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    left: 0;
}
#faqs .ui-state-focus,
#faqs .ui-accordion .ui-accordion-content {
 border: 0;
}
#faqs .ui-corner-all {
 border-radius: 0;
}
#faqs .ui-icon, .ui-widget-content .ui-icon {
 background-image: url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/images/ui-icons_222222_256x240.png");
}

/* End of FAQ SECTION ===== */

/* ===== CONTACT PAGE SECTION ===== */
#contact-page .container {
 display: flex;
 flex-flow: row wrap;
 -webkit-justify-content: left;
 justify-content: left;
}

#contact-page .item {
  flex: 1;
  padding:0;
  margin: 1%;
}
#contact-page .double-item {
  flex: 2;
  margin: 1%;
}
.contactform input, .contactform textarea, .job-form-static-text, .contactform select, .contactform select option, input[type='password'], #lisedeclarationofconformity_filter input {
  border: 0;
  background: var(--backgroundbanner);
  padding: 25px;
  margin: 10px 0;
  width: 100%;
  min-width: 250px;
  display: block;
}
.contactform select,
.job-form-static-text{
 width: 50%;
}
.job-form-static-text {
 font-weight: bold;
}
.form-radio label {
 display: block;
}
.form-radio div {
 background: rgba(0,94,184,.1);
 padding: 25px;
 margin: 10px 0;
 display: inline-block;
 min-width: 100px;
 border-right: 1px solid white;
}
.contactform .form-radio div input,
.contactform .form-radio div label,
.contactform .agreement input,
.contactform .agreement label {
 display: inline;
 width: 50px;
 min-width: 25px;
}
#cyearstart_month,
#cyearstart_year {
 display: inline-block;
 width: 20%;
 min-width: 50px;
}
.tradeform-intro legend {
 font-size: 14px;
}

.contactform input[type='submit'],
.conformity input[type='submit'],
#lisedeclarationofconformity_filter input[type='submit'] {
 background: var(--button);
 border: 0;
  width: 50%;
  padding: 30px 0;
  font-size: 18px;
  margin-bottom: 50px; 
 border-radius: 50px; 
 color: white;
 cursor: pointer;
}
.contactform input[type='submit']:hover,
.conformity input[type='submit']:hover,
#lisedeclarationofconformity_filter input[type='submit']:hover {
 background: black;
}

.contactform .submit input.fbsubmit_prev,
.contactform .submit input.fbsubmit_next {
 width: 20%;
 display: inline-block;
 margin: 50px 2vw;
}

/* #contact-page input[type="submit"] {
  width: 50%;
  padding: 30px 0;
  font-size: 18px;
  margin-bottom: 50px;
} */

.contactform span,
.contactform label,
.products-heading {
 font-family: Arial, sans-serif;
 font-size: 14px;
 font-weight: bold;
}
.contactform span {
 display:inline-block;
 color: red;
 padding-bottom: 25px;
}
.contactform label {
 display:block;
 margin-top: 20px;
}
.contact-details h2 {
 text-align: left;
 margin: 0 0 10px 0;
}
.contact-details h3 {
 font-size: 18px;
 margin: 25px 0 5px 0;
 padding:0;
}
.contact-details p {
 margin-bottom: 10px;
}
.contact-details table {
 width: 100%;
 text-align: left;
}
.fb_invalid {
 color: red;
}
.error_message {
 display: none;
}

@media screen and (min-width: 799px) {
#contact-page .item {
 flex: 1;
}
.contactform input, .contactform textarea {
  width: 80%;
}
}

@media screen and (min-width: 1025px) {
#contact-page .item {

}
}
/* END OF CONTACT PAGE SECTION ===== */


.products-heading {
  margin: 10px 0 0 0;
  padding: 10px;
}
.product-listing {
 background: #efefef;
 margin: 0 5px 5px 0;
 padding: 10px;
 display: inline-block;
}

.product-listing input {
 display: inline;
 width: 50vw;
 max-width: 50vw;
}

/* Create a custom checkbox */
input.cms_checkbox {
  height: 35px;
  width: 35px;
}

/* END OF ENQUIRY FORM ===== */

/* [10] NEWS & OFFERS SECTION */
.NewsSummary,.NewsSummarySummary,.NewsDetail,.NewsDetailContent{padding: 0 0 25px 0; font-family:sans-serif;}
.NewsSummary h2 a{text-decoration: none; color: rgba(0,94,184,1)}
.NewsSummary h4 a{text-decoration: none; color: rgba(0,94,184,1)}
.NewsDetailContent{padding:10px 0;margin-top:20px;}
.NewsDetailContentHomepage{padding:25px 0;}
.NewsDetailContentHomepage p{padding:0 5%;text-align:center;}
.NewsAuthor,.NewsCategory,.NewsCategoryHomepage{color:white;background:rgba(102,102,102,1);display:inline-block;padding:10px;}
.NewsPostDate,.NewsPagination,.NewsPaginationLink,.NewsPostDateHomepage{color:white;background:rgba(0,94,184,1);display:inline-block;padding:10px;}
.NewsPaginationLink{margin: 0 1px;padding:0;}
.NewsPostDateHomepage,.NewsCategoryHomepage{margin-right:2px;font-size:12px;}
.NewsPaginationLink a:link,.NewsPaginationLink a:visited{color:white;font-weight:bold;display:block;padding:10px;text-decoration:none;}
.NewsPaginationLink a:hover,.NewsPaginationLink a:visited:hover{color:white;background:black;font-weight:bold;text-decoration:none;}
.NewsImage{width:100%;height:30vh;object-fit:cover;}
.NewsDetailContent th, .NewsDetailContent td{padding:10px;border:1px solid white;overflow-x:hidden;overflow-y:scroll}
/* == END OF NEWS & OFFERS SECTION ===== */

/* DECLARATION OF CONFORMITY PAGE */
#lisedeclarationofconformity_filter {

}



/* [100] ===== SCREEN SIZE TWEAKS ===== [100] */

@media screen and (orientation: portrait) {

#slideshow {
 height: 70vh;
 max-height: 70vh;
}

#slideshow img {
 height: 70vh;
}

#slideshow h2 {
 margin: 50vh 5vw 20vh 5vw; 
}

#section-header img {
 height: 40vh;
 max-height: 40vh;
}

}

@media screen and (min-width: 480px) {

#product-gallery .item {
  width: 48%;
}

}

@media screen and (min-width: 640px) {

#products .item {
  width: 48%;
  margin-top: 2%;
}
#product-gallery .item {
  width: 31.333%;
}
}

@media screen and (min-width: 768px) {
#enquiryform {
  margin: 100px 20vw;
}

.product-listing input {
 display: inline;
 width: 40vw;
 max-width: 40vw;
}
input.cms_checkbox {
  height: 35px;
  width: 35px;
}

.product-content-image {
  width: 30vw;
  margin-bottom: 20px;
}

}

@media screen and (min-width: 1024px) {

.product-listing input {
 display: inline;
 width: 45vw;
 max-width: 10vw;
}
input.cms_checkbox {
  height: 35px;
  width: 35px;
}

#products .item {
  width: 31.333%;
  margin-top: 2%;
}

#product-gallery .item {
  width: 23%; 
}

.product-content-image {
  width: 25vw;
  margin-bottom: 25px;
}

}

@media screen and (min-width: 1600px) {

#products .item {
  width: 23%;
  margin-top: 1.5%;
}

#product-gallery .item {
  width: 18%; 
}

}