@charset "UTF-8";
/* ------------------- */
/* STYLESHEET SECTIONS */
/* ------------------- */
/*  1__Resets
    2__Layout
    3__Header
    4__Main content
    5__Footer
    6__Typo3 overrides
   7__Bootstrap overrides
    8__Media queries
*/
:root {
  --colour-primary: #5e9fac;
  --colour-primary-darker: #327584;
  --colour-pistachio-green: #A3CF91;
  --colour-pistachio-green-darker: #7ba16a;
}

/* ------------------------ */
/* 1__Resets                */
/* ------------------------ */
/* Limited CSS reset */
/* See normalize.css */
html, body, button, input, select, textarea,
.pure-g [class*=pure-u] {
  font-family: "Questrial", Helvetica, sans-serif;
  font-weight: 400;
}

html {
  height: 100%;
  font-size: 16px; /* This is the base size the rem unit refers to */
}

body {
  font-size: 1rem;
  min-height: 100%;
  margin: 0;
  padding: 0;
  color: #000;
  line-height: 1.2;
}

/* ------------------------ */
/* 2__Layout styles         */
/* ------------------------ */
.clear {
  clear: both;
}

.clearfix {
  zoom: 1;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.halign-l {
  text-align: left;
}

.halign-r {
  text-align: right;
}

.halign-c {
  text-align: center;
}

.valign-t {
  vertical-align: top;
}

.valign-m {
  vertical-align: middle;
}

.valign-b {
  vertical-align: bottom;
}

.css-table {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.css-table-cell {
  display: table-cell;
}

.full-width-img {
  width: 100%;
  height: auto;
  display: block;
}

.img-width-auto {
  max-width: 100%;
  width: auto;
  height: auto;
}

.constrain {
  width: 1000px;
  margin: 0 auto;
}

.constrain-1000w {
  max-width: 1000px;
  margin: 0 auto;
}

.constrain-1920w {
  width: 1920px;
  margin: 0 auto;
}

/* START object-fit:cover Fix for IE & IE Edge */
/* Note, requires JS to write the "compat-object-fit class to appropriate container element */
.compat-object-fit {
  background-size: cover;
  background-position: center center;
}

.compat-object-fit-x-left {
  background-size: cover;
  background-position-x: left;
}

.compat-object-fit-x-center {
  background-size: cover;
  background-position-x: center;
}

.compat-object-fit-x-right {
  background-size: cover;
  background-position-x: right;
}

.compat-object-fit-y-top {
  background-size: cover;
  background-position-y: top;
}

.compat-object-fit-y-center {
  background-size: cover;
  background-position-y: center;
}

.compat-object-fit-y-bottom {
  background-size: cover;
  background-position-y: bottom;
}

/* Hide the image if object fit is not supported in IE/Edge - opacity to 0 for the link area */
.compat-object-fit img {
  opacity: 0;
}

/* ----------------------------- */
/* Bootstrap full height columns */
/* ----------------------------- */
/* Full height Bootstrap row */
/* Requires the following HTML structure
            <div class="row">
               <div class="bs-row-full-height">
                <div class="col-xs-6 bs-col-full-height">
                  <div class="bs-col-inside">
                    Your content in here
                  </div>
                </div>
              </div>
            </div>
*/
.bs-row-full-height {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;
}

/* Full height Bootstrap column */
.bs-col-full-height {
  display: table-cell;
  float: none;
  height: 100%;
}

/* Column internal container for full height Bootstrap column */
.bs-col-inside {
  margin-top: 1px;
  margin-bottom: 1px;
}

/* Responsive container for Youtube video clips. The Youtube iframe should be a child of a div with a class of
  "video-container". If creating such a container is not possible because you don't have access to the HTML eg in
  a CMS content element, you can call the ICIT responsifyYoutubeClips() JavaScript function to do it programmatically.
*/
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------ */
/* 3__Header styles         */
/* ------------------------ */
#top-header {
  padding: 30px 0 10px;
  position: relative;
}
#top-header .gradient-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 100%;
  background: linear-gradient(to right, var(--colour-primary), var(--colour-pistachio-green));
  margin: 0;
  padding: 0;
}

#header-logo--mobile {
  display: none;
}

#header-row1 {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 20px;
}
#header-row1 .header-row1-left {
  display: flex;
  align-items: center;
}
#header-row1 .header-row1-left #header-logo--desktop {
  max-width: 300px;
  height: auto;
}
#header-row1 .header-row1-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}
#header-row1 .header-row1-left img {
  max-width: 100%;
  height: auto;
}
#header-row1 .header-row1-right img {
  max-width: 250px;
  height: auto;
}

/* ------------------------ */
/* 4__Main Content          */
/* ------------------------ */
#top-hero-wrap {
  position: relative;
  min-width: 100%;
  text-align: center;
  overflow: hidden;
  height: 54px;
}

#top-hero-wrap img {
  position: relative;
  /*left: 100%;*/
  height: 100%;
  /*width: auto;*/
  width: 100%;
  /*margin-left: -200%;*/
  /*display: inline-block;*/
}

#site-body img {
  max-width: 100%;
  height: auto;
}

a,
a:visited,
a:hover,
a:active,
a:focus {
  color: var(--colour-primary);
  text-decoration: none;
}

a:hover,
a:active,
a:focus {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--colour-primary);
  font-weight: normal;
}

h1 {
  font-size: 1.8em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.25em;
}

#site-body ul,
footer ul {
  list-style-type: none;
  padding-left: 15px;
}

#site-body ul li,
footer ul li {
  list-style-position: inside;
}

#site-body ul li:before {
  display: inline-block;
  position: relative;
  content: "•";
  margin-right: 7px;
  font-size: 1.8em;
  line-height: 0.5em;
  color: var(--colour-primary);
  top: 5px;
}

#site-body ol,
footer ol {
  padding-left: 32px;
}

.figcaption-special {
  padding: 6px 0;
  font-size: 0.9em;
}

.figcaption-special .figcaption-title {
  color: var(--colour-primary);
}

.two-col-layout {
  margin-top: 35px;
}

.two-col-layout .left-col {
  background: #eee;
  border: 1px solid #666;
  padding: 20px;
  -webkit-box-shadow: 5px 5px 5px 1px rgb(153, 153, 153);
  -moz-box-shadow: 5px 5px 5px 1px rgb(153, 153, 153);
  box-shadow: 5px 5px 5px 1px rgb(153, 153, 153);
}

.two-col-layout .left-col h1:first-child,
.two-col-layout .left-col h2:first-child,
.two-col-layout .left-col h3:first-child,
.two-col-layout .left-col h4:first-child,
.two-col-layout .left-col h5:first-child,
.two-col-layout .left-col h6:first-child,
.two-col-layout .left-col p:first-child {
  margin-top: 0;
}

.two-col-layout .left-col h1,
.two-col-layout .left-col h2,
.two-col-layout .left-col h3,
.two-col-layout .left-col h4,
.two-col-layout .left-col h5,
.two-col-layout .left-col h6 {
  margin-top: 0.3em;
}

.two-col-layout .right-col {
  padding-left: 20px;
}

.home-pg-button-grid {
  margin-bottom: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5em;
}
.home-pg-button-grid .contact-details {
  margin-top: 0.5em;
}
.home-pg-button-grid .contact-details a,
.home-pg-button-grid .contact-details a:visited {
  color: black;
}
.home-pg-button-grid .contact-details a:hover,
.home-pg-button-grid .contact-details a:active,
.home-pg-button-grid .contact-details a:focus {
  color: var(--colour-primary);
}
@media all and (max-width: 940px) {
  .home-pg-button-grid {
    grid-template-columns: 1fr;
  }
}

.tx-powermail > .container-fluid {
  padding-inline: 0;
}

/* ------------------------ */
/* 5__Footer Content        */
/* ------------------------ */
footer {
  margin-top: 30px !important;
  padding: 30px 0 10px;
  position: relative;
}
footer .gradient-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 13px;
  width: 100%;
  background: linear-gradient(to left, var(--colour-primary), var(--colour-pistachio-green));
  margin: 0;
  padding: 0;
}

#footer__left-col {
  width: 730px;
}

#footer-copyright {
  /*display: inline-block;*/
  color: #666;
  font-size: 0.625rem;
  text-align: right;
}

#footer__menu .footer-nav {
  list-style: none;
}

#footer__menu .footer-nav ul {
  display: block;
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#footer__menu .footer-nav ul > li {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  padding: 0;
  font-size: 0.85em;
}

#footer__menu .footer-nav a {
  padding: 0 0.5em;
  color: #222;
  text-transform: uppercase;
}

#footer__menu .footer-nav a:hover,
#footer__menu .footer-nav a:focus,
#footer__menu .footer-nav a:active {
  color: var(--colour-primary);
  text-decoration: none;
}

#footer__menu .footer-nav > ul > li > a.selected-page {
  color: var(--colour-primary);
}

#footer__menu .footer-nav > ul > li:not(:first-child) a {
  border-left: var(--colour-primary) 1px dotted;
}

/* ------------------------ */
/* 6__Typo3 Overrides       */
/* ------------------------ */
/* This fixes issues caused by Typo3 fluid layouts for our top hero image */
#top-hero-wrap .ce-gallery,
#top-hero-wrap .ce-gallery .ce-column {
  float: none;
}

#top-hero-wrap .ce-gallery img {
  max-width: inherit;
  width: auto;
  height: 100%;
}

#top-hero-wrap .ce-intext.ce-right .ce-gallery {
  margin-left: 0;
  margin-bottom: 0;
}

#top-hero-wrap > div[id^=c],
#top-hero-wrap .ce-textpic,
#top-hero-wrap .ce-gallery,
#top-hero-wrap .ce-outer,
#top-hero-wrap .ce-inner,
#top-hero-wrap .ce-row,
#top-hero-wrap .ce-column,
#top-hero-wrap .ce-media {
  height: 100%;
}

/* Typo3 overrides for correct image height in #top-hero-wrap once inside of a flexslider */
#top-hero-wrap .flexslider {
  margin-bottom: 0;
  border: none;
}

#top-hero-wrap > div {
  height: 100%;
}

#top-hero-wrap > div .tx-ws-flexslider {
  height: 100%;
}

#top-hero-wrap > div .tx-ws-flexslider .flexslider {
  height: 100%;
}

#top-hero-wrap > div .tx-ws-flexslider .flexslider ul.slides {
  height: 100%;
}

#top-hero-wrap > div .tx-ws-flexslider .flexslider ul.slides > li {
  height: 100%;
}

#top-hero-wrap > div .tx-ws-flexslider .flexslider ul.slides > li > div {
  height: 100%;
}

#top-hero-wrap > div .flexslider .slides img {
  width: inherit;
}

/* Typo3 overrides - fixes for IE 11 */
.ce-gallery,
.ce-column {
  max-width: 100%;
  width: 100%;
}

.ce-gallery img {
  max-width: 100%;
  height: auto;
}

/* ------------------------ */
/* 7__Bootstrap Overrides   */
/* ------------------------ */
.btn-primary {
  color: #fff;
  background-color: var(--colour-primary);
  border: none;
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--colour-primary-darker);
}

.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background-color: var(--colour-primary-darker);
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: var(--colour-primary-darker);
}

.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
  color: #fff;
  background-color: var(--colour-primary-darker);
}

/*----  social icons ---------*/
#c51 img {
  padding-bottom: 10px;
}

/* ------------------------ */
/* 8__Media Queries         */
/* ------------------------ */
@media only screen and (min-width: 0px) {
  .flex-row {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-row > [class*=col-] {
    display: flex;
    flex-direction: column;
  }
  .flex-row.row:after,
.flex-row.row:before {
    display: flex;
  }
}
/* Large Devices, Wide Screens (Bootstrap col-lg-*) */
@media all and (max-width: 1030px) {
  .constrain-1000w {
    width: 100%;
  }
  #header-row1 .header-row1-left .pad-box,
#footer__left-col .pad-box {
    padding-left: 10px;
  }
  #header-row1 .header-row1-right .pad-box,
#footer-copyright .pad-box {
    padding: 0 10px 5px 0;
  }
  #site-body {
    padding: 0 10px;
  }
  .two-col-layout .left-col {
    background: #eee;
    border: 1px solid #666;
    padding: 20px;
    -webkit-box-shadow: 4px 4px 4px 1px rgb(153, 153, 153);
    -moz-box-shadow: 4px 4px 4px 1px rgb(153, 153, 153);
    box-shadow: 4px 4px 4px 1px rgb(153, 153, 153);
  }
}
/* Medium Devices, Desktops (Bootstrap col-md-*) */
@media all and (max-width: 940px) {
  #footer__left-col {
    display: none;
  }
  footer > div.css-table,
footer #footer-copyright {
    display: block;
    width: 100%;
    text-align: left;
  }
  footer #footer-copyright .pad-box {
    padding: 0 0 0 15px;
  }
}
@media all and (max-width: 849px) {
  #header-row1 {
    margin-bottom: 0;
  }
  #header-row1 .header-row1-right {
    align-items: flex-end;
  }
}
/* Small Devices, Tablets (Bootstrap col-sm-*) */
@media only screen and (max-width: 595px) {
  #header-row1 .header-row1-right {
    display: none;
  }
  #top-header,
footer {
    padding-top: 20px;
  }
  #header-row1,
#header-row1 .header-row1-left {
    display: block;
  }
  #header-row1 .header-row1-left {
    width: 75%;
  }
  #header-logo--desktop {
    display: none;
  }
  #header-logo--mobile {
    display: inline;
  }
}
/* Extra Small Devices, Phones (Bootstrap col-xs-*) */
@media only screen and (max-width: 480px) {
  header,
footer {
    padding-top: 16px;
  }
}
/* Custom, iPhone Retina */

/*# sourceMappingURL=main.css.map */