html {
    font-size:12px;
    font-size: 100%;
    font-family: var(--main);
    
}


body,
button,
input,
select,
textarea,
ul, ol { 
  font-family: var(--main);
  font-weight: 400;
  font-size: 1rem;
}

body {
  color: rgba(var(--dark), 1);
}

p:empty {
  display: none !important;
}

h1, h2 {
  width:100%;
  font-family: var(--heading);
  font-weight: 600;
}

h1 {
  font-size:2.5rem;
  font-weight: 800;
}

h2 {
  font-size: 2rem;
  
}

h2 strong {
  font-weight: 900;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
  
}

h5 {
  font-size: 1.15rem;
  
}


a.scrollup:focus {
  outline: none;
}

a.scrollup {
  color: #fff;
}

a.scrollup:hover {
    text-decoration: none;
    color: #03f;
}


a, a:active {
  color: rgba(var(--first), 1.0);
}

a:hover {
  color: rgba(var(--first-bright), 1.0);
}

.heading {
  margin-bottom:2rem;
}

.heading h2 {
  font-size: 3rem;
}

.smallest { font-size: 0.444rem; }
.caption { font-size: 0.667rem; }
body { font-size: 1rem; }

h2 {
  font-weight: 900;
}

figcaption {
    font-weight: 100;
    font-size: 0.65rem;
}


.panel ul {
  margin-top: 1rem;
}


ul:last-of-type {
  margin-bottom: 0;
}


li {
  margin-bottom: 0.5rem;
  position: relative;
}

ul li {
  padding-left: 2rem;
  padding-bottom: 0.5rem;
  position: relative;
}

ul li.slide {
  padding-left: 0;
}

ol li {
  line-height: 1.75;
  padding:1rem;
  padding-left: 2.75rem;

}


ul li:before {
  content:'\ea25';
  display: block;
  font-family: 'unique';
  position: absolute;
  left:0;
  top:-0.25rem;
  color: rgba(var(--first),1);
  text-transform: none;
  margin-top:0.125rem;
  font-size: 1.25rem;
}

ol > li:before {
  width:2rem;
  height:2rem;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: var(--main);
  background: rgba(var(--first), 1);
  border-radius: 100%;
  color: #fff;
  margin-top: 1rem;
}


ol > li > ol {
  margin-bottom: 0;
}

table {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

table td {
    padding: 0.5rem 1rem;
}
/*Icons*/

@font-face {
  font-family: "unique";
  src:url("../fonts/unique.eot");
  src:url("../fonts/unique.eot?#iefix") format("embedded-opentype"),
    url("../fonts/unique.woff") format("woff"),
    url("../fonts/unique.woff2") format("woff2"),
    url("../fonts/unique.ttf") format("truetype"),
    url("../fonts/unique.svg#unique") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "unique" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "unique" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/*Colours*/

:root {

    --white: 256, 256, 256;

    --black: 1, 22, 30;

    --dark: 31, 31, 31;

    --light: 246, 246, 246;

    --lighter: 237, 230, 227;


    --grey-lighter: 244, 245, 246;

    --grey-light: 233, 241, 247;

    --grey: 97, 97, 97;

    --grey-dark: 51, 51, 51;


    /*first*/

    --first: 2, 153, 153;

    --first-dark: 2, 121, 121;

    --first-light: 101, 191, 194;

    --first-bright: 62, 164, 187;

   

    /*blue*/
    --accent-01: 35, 115, 149;

    --accent-01-light: 80, 138, 168;

     --accent-01-lighter: 110, 154, 175;


    --accent-02: 224, 220, 218;

    --accent-02-light: 237, 233, 233;


    /*teal*/

    --second: 52, 153, 0 ;

    --second-light: 88, 164, 98;

    --second-dark: 41, 122, 0;

   /*Fonts*/

    --main: "neue-haas-grotesk-display", sans-serif;

    --heading: "alternate-gothic-condensed-a", sans-serif;


    /*Effect*/

    --box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    
}



/*<>Framework
---------------------------------------------------------------------------------------------*/

 .full {
    width:100%;
    
  }

.col { 
  display: block;
  float:left;
  width: 100%;
}

@media ( min-width : 960px) {
  .col {
    margin-left: 2%;
  }
}


/* Reset Margins*/
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
.col.nomargin {
  margin-left: 0; 
}


/* COLUMN WIDTH ON DISPLAYS +768px */
@media ( min-width : 960px ) {
  .span-1 { width: 6.5%; }
  .span-2 { width: 15.0%; }
  .span-3 { width: 23.5%; }
  .span-4 { width: 32.0%; }
  .span-5 { width: 40.5%; }
  .span-6 { width: 49.0%; }
  .span-7 { width: 57.5%; }
  .span-8 { width: 66.0%; }
  .span-9 { width: 74.5%; }
  .span-10 { width: 83.0%; }
  .span-11 { width: 91.5%; }
  .span-12 { width: 100%; }


  .span10 {
    width:10%;
  }

  .span12 {
    width:12%;
  }

  .span20 {
    width:20%;
  }

  .span25 {
    width:25%;
  }

  .span30 {
    width:30%;
  }

  .span40 {
    width:40%;
  }

  .span50 {
    width:50%;
  }

  .span60 {
    width:60%;
  }

  .span70 {
    width:70%;
  }

  .span75 {
    width:75%;
  }


  .span80 {
    width:80%;
  }

  .span90 {
    width:90%;
  }

  .span100 {
    width:100%;
  }

  .paddingright {
    padding-right: 2rem;
  }

  .paddingleft {
    padding-left: 2rem;
  }

}


/*<>Alignment
---------------------------------------------------------------------------------------------*/

.alignleft {
  float: left;
  padding-right: 1rem
}

.alignright {
  float: right;
  padding-left: 1rem
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.center {
  margin: 0 auto;
  clear:both;
}

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

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

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

.align-justify {
  text-align: justify;
}

.vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


/*<>Display
---------------------------------------------------------------------------------------------*/

.hide {
  display: none;
}

.show, .block {
  display: block;
}

.inline {
  display: inline-block;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.equalcol {
  
}


.shadow {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  margin: 6rem auto;
}


.grid {
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(3, 1fr);
  margin: 2rem 0;
   width:100%;
}

.grid .item {
  padding:4rem;
  border-right: 1px dashed rgba(var(--grey-light),1.0);
  border-top: 1px dashed rgba(var(--grey-light),1.0);
}

.grid .item:nth-child(3n) {
  border-right: none;
}

.grid .item:nth-child(-n+3) {
    border-top: none;
}

.columns{
  display: flex;
  column-gap: 5%;
}

.column {
  width:100%;
}


/*Containers*/

.wrapper {
  width:96%;
  max-width: 1440px;
  margin:0 auto;
  padding:0;
  position: relative;
}

.panel {

}

.section {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.row {
  margin-bottom: 1rem;
}

.spacer{
  min-height: 0.15rem;
  margin-left: 0;
}


.block {
  overflow: hidden;
}

.block .image {
  background-size:cover;
  background-position: 45% center;
  background-repeat: no-repeat;
  transition: all 1500ms;
}

.block .image:hover{
  /*transform: scale(1.05);*/
  transition: all 1500ms;
  background-size: auto 105%;
}


button, .button{
 margin-top: 1rem;
 padding: 0.75rem 1.25rem;
 padding-right: 2rem;
 margin-right: 0.5rem;
 position: relative;
 font-weight: 600;
 font-size: 0.75rem;
 color: rgba(var(--first),1);
 position: relative;
 background: rgba(var(--first-light), 1.0);
 border-radius: 0.5rem ;
}

button a, button a:visited, button a:hover, button a:active, .button a, .button a:visited, .button a:hover, .button a:active{
  color: #fff;
}

button a:after, .button a:after {
  content:"\ea6e";
  position: absolute;
  right:0.5rem;
  top:0.5rem;
  display: block;
  font-size: 1.25rem;
  text-transform: none;
  font-family: 'unique';
  text-transform: none;
  font-weight: 600;
  color: rgba(var(--first-dark),1);
  font-weight: 300;
  color: #fff;
}

button:hover, .button:hover{
  background: rgba(var(--accent-01), 0.85);;
  
}


/*.site-mast button:hover, .site-mast .button:hover{
  background: rgba(var(--white), 0.85);;
  
}*/

button:hover a, .button:hover a{ 
  color: rgba(var(--dark),1);
  }

button a, button a:visited, button a:active{
  color: rgba(var(--white),1);
  font-size: 0.75rem;
}


a.button {
  border-bottom: 1px solid rgba(var(--blue),1);
  font-weight: 600;
}



/*Effects*/

.blend {
  background-color: rgba(var(--first-bright, 0.15));
  background-blend-mode: multiply;
}



/*Elements*/

div:before {
  font-family: 'unique';
}


.background{
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    position: relative;
    width:100%;
}

.background:before{
  content:'';
  display: block;
}


/*.background:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}*/

.label {
  padding:0.25rem 0.5rem;
  background: rgba(var(--white), 1.0);
  color: rgba(var(--first), 1.0);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  width: fit-content;
}


.more {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.85rem;
  padding-right:1rem;
  position: relative;
}

.more:after {
  content:'\e809';
  font-family: 'unique';
  font-size: 1.75rem;
  margin-left: 0.5rem;
  position: absolute;
  top:-0.75rem;
  font-weight: 700;
  color: rgba(var(--accent02), 1.0);
}



.scrollup{ 
    bottom: 1.25em;
    display: none;
    position:fixed;
    right: 1.25em;
    background: rgba(var(--first),0.25);
    border-radius: 100%;
    color: #fff;
    z-index: 1000;
    color: #fff;
    border: 1px solid #fff;
    height:2rem;
    width:2rem;
    text-align: center;
    line-height: 1.75rem;
}

.scrollup span {
  position: relative;
  top:0.1rem;
  font-size: 1rem;
}

.scrollup span:before{
  content: '\e803';
  font-family: 'unique';
  color: #fff;
  text-transform: none;
  font-size: 1.5rem;

}

.scrolldown, .scrolldown a {
  text-align: center;
  width:100%;
  display: block;
  justify-content: center;
  position: relative;
}

.scrolldown a:before {
  content: 'h';
  font-family: 'unique';
  display:flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  position: absolute;
  left: calc(50% - 0.75rem);
  bottom: 0;
  color: rgba(var(--white),1);
  font-size: 2rem;
}

.scrolldown .separator{
    width: 2px;
    height: 4rem;
    background: rgba(var(--light), 1);
    position: absolute;
    left: calc(50% - 1px);
}

.scrolldown .separator:before {
  content: '';
  display:flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: rgba(var(--light), 1);
  border-radius: 100%;
  top: 4rem;
  left: calc(50% - 0.25rem);
}

.scrolldown a {
    width: 100%;
    display: block;
    text-align: center;
}


/*popup*/

.popup {
  position: relative;
  padding: 1.5rem;
  width: 96%;
  max-width:840px;
  margin: 1.25rem auto;
  background-color: rgba(255,255,255,0.95);
  border-radius: 4px;
  color:#010A14;
  font-size: 0.75rem;
}

.popup-form {
  position: relative;
  padding: 1.5rem;
  width: auto;
  width:600px;
  margin: 1.25rem auto;
  background-color: rgba(255,255,255,0.95);
  border-radius: 4px;
  color:#010A14;
  font-size: 0.75rem;
}

.popup-image {
  position: relative;
  padding: 1.5rem;
  width: auto;
  width:80%;
  margin: 1.25rem auto;
  background-color: rgba(255,255,255,0.95);
  border-radius: 4px;
  color:#010A14;
  font-size: 0.75rem;
}

.popup-image img {
  width: 96%;
  max-width: 1200px;
  height:auto;
}

.popup-form .query {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
}

.popup-form .querytitle {
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(var(--dark), 1.0);
}