/*Colours*/

:root {

    --white: 256, 256, 256;

    --black: 1, 22, 30;

    --dark: 0, 38, 66;

    --light: 230, 229, 207;

    --lighter: 242, 242, 227;


    --grey-lightest: 250, 250, 250;

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

    --grey-light: 203, 211, 217;

    --grey: 100, 100, 100;

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




    /*teal*/

    --first: 86, 162, 201;

    --first-light: 208, 230, 240;

    --first-lighter: 252, 252, 255;

    --first-dark: 11, 129, 173;

    --first-darker: 8, 98, 131;
  


    /*gold*/

    --second:245, 169, 76;

    --second-dark: 254, 144, 0;





    --serif: "rockwell-nova", sans-serif;;
    
    --serif-display: "ivyora-display", serif;

    --serif-comp: "freightdispcmp-pro", serif;

    --main-font: "gotham", sans-serif;

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

    --head-font: "quador-display", serif;

    --quote: font-family: "miller-display", serif;





/*Effects*/


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


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


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

input[type="submit"]  {
  padding:0.5rem 0.75rem;
  background: rgba(var(--second-dark), 1.0);
  font-weight: 400;
}

input[type="submit"]:hover  {
  background: rgba(var(--second), 1.0);
}

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

p:empty {
  display: none !important;
}

h1, h2, h3, h4, h5 {
  width:100%;
  font-weight: 600;
}

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


h2 {
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 700;
}


h3 {
  font-size: 1.75rem;
  
}

h4 {
  font-size: 1.5rem;
  
}

h5 {
  font-size: 1.25rem;
  
}


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);
}



.smallest { font-size: 0.444rem; }
.caption { font-size: 0.667rem; }
body { font-size: 1rem; }
h6 { font-size: clamp(0.938rem, 0.903rem + 0.174vw, 1.25rem); }
h5 { font-size: clamp(1.172rem, 1.129rem + 0.217vw, 1.5rem); }
h4 { font-size: clamp(1.465rem, 1.411rem + 0.271vw, 2rem); }
h3 { font-size: clamp(1.831rem, 1.763rem + 0.339vw, 2.5rem); }
h2 { font-size: clamp(2.289rem, 2.204rem + 0.424vw, 3rem); }
h1 { font-size: clamp(2.861rem, 2.755rem + 0.530vw, 3.5rem); }

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


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


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

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

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

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

}


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

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-font);
  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;
}


/*<>Fonts
---------------------------------------------------------------------------------------------*/

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


[data-icon]:before {
  font-family: "arm" !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: "arm" !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;
  color: #fff;
  display: block;
}




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

 .full {
    width:100%;
  }

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

@media ( min-width : 720px) {
  .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 : 760px ) {
  .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 {
  flex:1;
}


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


.blur {
  backdrop-filter: blur(20px) brightness(0.75);
}


.plaque {
  color: rgba(var(--white), 1.0);
  font-weight: 500;
  padding:4rem;
  border:1px solid rgba(var(--light), 0.25);
  border-radius: 0.5rem;
}

.plaque strong {
  font-size: 1.25rem;
  font-weight: 700;
}


.quote {
  background: rgba(var(--lighter), 0.5);
  padding: 2rem;
  font-family: var(--serif-display);
  font-weight: 300;
  font-style: italic;
  border-radius: 0.5rem;
  margin: 2rem 0;
  border:1px solid rgba(var(--light), 1.0);
  font-size: 1.25rem;
  letter-spacing: 1px;

}


.background{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.background:after {
  content: '';
  display: block;
  padding-top: 75%;
}


.site-mast.background:after {
  padding-top:25%;
}

.site-mast.background {
    background-color: rgba(var(--dark), 0.5);
    background-blend-mode: overlay;
}



/*Element*/

address {
  font-style: normal;
  margin:0;
  display: inline-block;
}


.scrollup{ 
    bottom: 1.25em;
    display: none;
    position:fixed;
    right: 1.25em;
    background: rgba(10,10,10,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: "h";
  font-family: 'arm';
  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: 'i';
  font-family: 'arm';
  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: 2rem;
  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;
}


.scroll a:focus {
  outline: none;
}


.scroll a {
  text-align: center;
  width: fit-content;
  display: block;
  justify-content: center;
  margin-top: 4rem;
  margin-bottom: 0;
}


.scroll a:before {
  content: 'g';
  font-family: 'arm';
  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: 2rem;
  color: rgba(var(--dark),1);
  font-size: 2rem;
}