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


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

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

p:empty {
  display: none !important;
}

h1, h2, h3, h4, h5 {
  width:100%;
  letter-spacing: 1px;
  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.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:'A';
  display: block;
  font-family: 'royal';
  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);
  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: "royal";
  src:url("../fonts/royal.eot");
  src:url("../fonts/royal.eot?#iefix") format("embedded-opentype"),
    url("../fonts/royal.woff") format("woff"),
    url("../fonts/royal.ttf") format("truetype"),
    url("../fonts/royal.svg#royal") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "royal" !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: "royal" !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: 6, 29, 55;

    --light: 14, 84, 170;

    --lighter: 255, 249, 235;


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

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

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

    --grey: 100, 100, 100;

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


    /*first*/

    --first: 29, 124, 240;

    --first-dark: 7, 83, 176;

    --first-light: 141, 189, 246;


   

    /*blue*/
    --accent: 91, 201, 0;

    --accent-light: 91, 201, 0;


    /*teal*/


    --second:12, 65, 130 ;

    --second-light: 129, 232, 238;

    --second-lighter: 201, 245, 248;

    --second-dark: 12, 65, 130;



   --alt-font: "area-normal", sans-serif;

    /*--main: "rubik", sans-serif;*/

    --main: "Urbanist", sans-serif;

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

    --heading-alt: "proxima-nova", sans-serif;

    --heading-alt: "poppins", sans-serif;

    --headline: "DM Serif Display", serif;

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

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

 .full {
    width:100%;
    
  }

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

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


/* Reset Margins*/
.col:first-child, .span { 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 {
  
}


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


/*Containers*/

.wrapper {
  width:90%;
  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.5rem 1rem;
 padding-right: 2.25rem;
 margin-right: 0.5rem;
 position: relative;
 font-weight: 600;
 font-size: 0.85rem;
 color: rgba(var(--accent),1);
 position: relative;
 background: transparent;
 border: 1px solid rgba(var(--second), 1.0);
 border-radius: 2rem ;
}

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

button:hover, .button:hover{
  background:transparent;
  
}

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

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


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

.upsell button, .upsell .button, .site-mast button{
 margin-top: 1rem;
 padding: 0.5rem 1rem;
 padding-right: 2.25rem;
 margin-right: 0.5rem;
 position: relative;
 font-weight: 600;
 font-size: 0.85rem;
 color: rgba(var(--accent),1);
 position: relative;
 background: rgba(var(--white), 1.0);
 border: 1px solid rgba(var(--second), 1.0);
 border-radius: 2rem ;
}




/*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: "r";
  font-family: 'royal';
  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: 'u';
  font-family: 'royal';
  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;
}


.single .block.view {
  position: absolute;
  right: 0;
  top:0;
  top:-6rem;
}


h1.heading {
  color: rgba(var(--white), 1.0);;
}


main h2 {
  max-width: 40rem;
  margin-bottom: 4rem;
  position: relative;
  font-weight:900;
}

main h2:before {
  content: '';
  width:20%;
  height:1rem;
  background-color: transparent;
  background-image: repeating-linear-gradient(45deg, rgba(var(--grey-light), 1), rgba(var(--grey-light), 1) 2px, rgba(var(--white), 0) 2px, rgba(var(--white), 0) 5px);
  display: block;
}

.subheading h2 {
  font-weight: 900;
}

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