html, body {
    margin: 0;
    padding: 0;
    background-color: #f2efea;
}
.productbody {
  background-color: #254128;
}
body {
  height: 100%;
  min-height: 100%;
  font-family: "Stack Sans Text", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
footer{
  margin-top:auto; 
  }

  .padded {
  padding-left: 6rem;
  padding-right: 6rem;
  max-width: 1344px;
  }
.halfpadded {
  padding-left: 6rem;
  padding-right: 0rem;
  max-width: 1344px;
}
.maxipadded {
  padding-left: 6rem;
  padding-right: 6rem;
  max-width: 1344px;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}
li {
    list-style-type: none;
}

/* FONTS & TEXT ================================== */

/* font-family: 'Clash Grotesk', sans-serif;
font-family: 'Switzer', sans-serif;
font-family: 'Red Hat Display', sans-serif;
font-family: 'JetBrains Mono', sans-serif; */

br {
line-height: 150%;
}
.hcolour {
  font-family: "Clash Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  max-width: 60ch;
  margin-top: 0;
  color: #cc5728;
}
.h3 {
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 650;
  font-size: 5em;
  color:#254128;
    --transition-easing: cubic-bezier(0.34,0,0.23,1);
  --transition-duration: 0.3s;
  transition: color 0.3s, font-size 0.2s;
  margin-bottom: 60px;
  line-height: 5.6rem;
  margin-top: 1rem;
}
.h3-white {
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 650;
  font-size: 5em;
  color:#f2efea;
    --transition-easing: cubic-bezier(0.34,0,0.23,1);
  --transition-duration: 0.3s;
  transition: color 0.3s, font-size 0.2s;
  margin-bottom: 60px;
  line-height: 5.6rem;
  margin-top: 6rem;
}
.h1 {
  font-family: 'Stack Sans Text', sans-serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
  max-width: 60ch;
  margin-top: -12px;
  margin-bottom: 30px;
  font-size: 2.6em;
}
.h2 {
  font-family: "Clash Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  max-width: 60ch;
  margin-top: 0;
}
.p-top {
  font-family: "JetBrains Mono", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  max-width: 70ch;
  font-size: 26px;
  color: #aa4b2e;
}
.p-mid {
  font-family: "JetBrains Mono", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 26px;
  color: #aa4b2e;
  padding-bottom: 1rem;
  padding-top: 0;
  margin-top: 0rem;
}
.p-mid2 {
  font-family: "JetBrains Mono", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 26px;
  color: #aa4b2e;
  padding-bottom: 0;
  padding-top: 0;
  margin-top: 3rem;
}
.para {
  font-family: "Stack Sans Text", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  max-width: 70ch;
  font-size: 20px;
  margin-top: 0;
  padding-top: 0;
}
.nav-text {
  font-family: "Switzer", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color:#254128;
  text-decoration: none;
}
.nav-text.changeColor {
  color:#f2efea;
  transition: all 0.25s ease;
  font-weight: 400;
}
.nav-text:hover,
.hovertext:hover {
  color: #cc5728;
  transition: all 0.25s ease;
}
.footer-text {
  font-family: "Switzer", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color:#f2efea;
  text-decoration: none;
  line-height: 150%;
}
.underline {
  font-family: "Stack Sans Text", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color: #aa4b2e;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.underline::after {
    content: '';
    position: absolute;
    height: 2px;
    left: 0;
    bottom: -1px;
    width: 0;
    background: #8ea8d8;
    transition: width .2s;
}
.underline:hover::after {
    width: 90%;
}

.splash {
 display: none;
}


/* padding etc ==================================== */

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sixrem {
    padding-top: 80px;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.onerem {
    padding-top: 0.5rem;
    margin-top: 0;
}
.threerem {
    padding-top: 3rem;
}


/* NAVBAR & LIST ======================================= */

.header-main {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f2efea;
  color:#254128;
  transition: all 0.25s ease;
  z-index: 1500;
  border-bottom: #53635496;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.header-main.changeColor {
  background-color:#254128;
  color: black;
  transition: all 0.25s ease;
}
.nav-wrapper {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  font-family: acumin-pro-condensed,sans-serif;
  font-weight: 400;
  height: 80px;
  justify-content: space-between;
  margin: 0;
  position: relative;
  width: 100%;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  flex-shrink: 0;
  max-width: 100%;
  padding: 0;
  position: relative;
}
.navbar {
  --transition-easing: cubic-bezier(0.34,0,0.23,1);
  --transition-duration: 0.3s;
  align-items: center;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  top: 0;
  width: 100%;
}
.nav-left {
  align-items: center;
  display: inherit;
  flex-flow: row nowrap;
}
.nav-left-text {
  padding: 30px;
}
.nav-group {
  display: inline;
}
li {
  margin-right: 17px;
}
li:first-child {
  margin-right: 17px;
}
li:last-child {
  margin-right: 0;
}
.dropbtn {
  display: none;
}


/* SCROLL MENU ===================================== */

.scroll-menu {
  display:flex;
  left:3.875rem;
  opacity:0;
  pointer-events:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  transition:opacity .5s cubic-bezier(.19,1,.22,1);
  will-change:transform;
  z-index:10
}
.scroll-menu .bar {
  background-color:hsla(0,0%,100%,.5);
  border-radius:12px;
  display:block;
  height:calc(100% - 25px);
  left:0;
  opacity:.4;
  position:absolute;
  top:12.5px;
  transform:scaleY(0);
  transform-origin:top;
  width:4px
}
.scroll-menu .point {
  background-color:#000000;
  border-radius:6px;
  display:block;
  height:8px;
  left:-2px;
  position:absolute;
  top:8.5px;
  width:8px
}
.scroll-menu .items {
  margin-left:20px;
  position:relative
}
.scroll-menu .items .item {
  align-items:center;
  color:#161616;
  cursor:pointer;
  display:flex;
  font-family: "Stack Sans Text", sans-serif;
  font-size:13.5px;
  font-size:.7941176471vw;
  height:25px;
  justify-content:flex-start;
  line-height:1em;
  opacity:.5;
  position:relative;
  transition:opacity .5s cubic-bezier(.19,1,.22,1)
}
.scroll-menu .items .item:first-of-type {
  padding-top:0
}
.scroll-menu .items .item:last-of-type {
  padding-bottom:0
}
.scroll-menu .items .item.active {
  opacity:1
}
@media(hover:hover) {
  .scroll-menu .items .item:hover {
    opacity:1
  }
}

/* IMAGES ======================================================= */

.imgfill {
  width: 535px; /* ie8 */
  object-fit: cover;
  height: 467px;
}
.imgfilldiv {
  object-fit: cover;
  overflow: hidden;
}
.imgduo {
  vertical-align: -webkit-baseline-middle;
  max-height: 581px;
  max-width: 428px;
  overflow: hidden;
}
.imgtrio {
  vertical-align: -webkit-baseline-middle;
  height: 581px;
  width: 428px;
  overflow: hidden;
}
img {
  vertical-align: -webkit-baseline-middle;
}
.siim-icon2.scrolled {
  display: none;
}
.siim-icon1.scrolled {
  display: none;
}


/* SITE BODY =============================================== */

.topline {
  border-top: solid 1rem #cc5728;
  border-width: 3px;
  padding-top: 30px;
}
.topline2 {
  border-top: solid 1rem #cc5728;
  border-width: 3px;
  padding-top: 30px;
}
div {
  padding: 0;
}
.sitemain-top {
  padding-top: 100px;
  background-color:#f2efea;
  padding-bottom: 10px;
  /* max-height: 460px; 
  solve in media. test on smaller screens; image viablilty vs long opener text on about page. looks ok on large monitors but may need to scale text to view width. 6rem also good on monitor but dodgy all else. will just max width it and let it scale vs padding/vw */
}
.sitemain-green {
  background-color: #254128;
}
.sitemain-top-green {
  padding-top: 100px;
  background-color:#254128;
  padding-bottom: 10px;
}
.empty {
  padding-top: 4rem;
  padding-bottom: 3rem;
}
.container-top {
    display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
  padding-top: 80px;
  padding-bottom: 0;
  column-gap: 4rem;
  padding-bottom: 0rem;
  border-bottom:#53635496; 
  border-bottom-style: solid; 
  border-bottom-width: 1px;
}
.container1 {
  display: grid;
  grid-template-columns: 3fr 2fr 1fr;
  grid-template-rows: 1fr;
  padding-top: 4rem;
  column-gap: 30px;
  padding-bottom: 4rem;
}
.container2 {
  display: grid;
  grid-template-columns: 3fr 2fr 1fr;
  grid-template-rows: 1fr;
  padding-top: 4rem;
  column-gap: 30px;
  padding-bottom: 4rem;
}
.container3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding-top: 2rem;
  column-gap: 0px;
  padding-bottom: 4rem;
  text-align: right;
}
.container-centre {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding-top: 2rem;
  column-gap: 0px;
  padding-bottom: 4rem;
  text-align: center;
}
.container4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  padding-top: 0rem;
  column-gap: 0px;
  margin-bottom: 0;
}
.container5 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding-top: 2rem;
  column-gap: 0px;
  padding-bottom: 4rem;
  text-align: left;
}


/* REPO ------------- */

.container6 {
  /*file repo*/
  display: flex;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}
  .repo {
    margin-top: 30px;
    font-size: 16px;
    margin-left: 40px;
    margin-bottom: 35px;
  }
  .repo-1 {
    margin-left: 0!important;
    margin-right: 60px;
  }
  .repo-h1 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .repo-i {
    font-size: 20px;
    color:#000000;
    margin-top: -5px;
    margin-left: 35px;
  }
  .repo-i:hover {
    color:#cc5728;
  }
  .repo-1 {
    width: 700px;
  }
  .repo-r {
    display: flex;
    border-left:#53635496; 
    border-left-style: solid; 
    border-left-width: 1px;
  }
  /*REPO END --------------------- */

.vdiv60 {
    width: 60px;
  }

.container4l {
  margin-right: 2rem;
}
.borderbottom {
  border-bottom:#53635496; 
  border-bottom-style: solid; 
  border-bottom-width: 1px;
}
.bordersides {
  border-right:#53635496; 
  border-right-style: solid; 
  border-right-width: 1px;
  border-left:#53635496; 
  border-left-style: solid; 
  border-left-width: 1px;
}
.borderright{
  border-right:#53635496; 
  border-right-style: solid; 
  border-right-width: 1px;
}
.borderleft {
  border-left:#53635496; 
  border-left-style: solid; 
  border-left-width: 1px;
}
.button {
  align-self: end;
  color: white;
  margin-top: 17px;
  background-color: #aa4b2e;
  border: none;
  font-family: "Stack Sans Text", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: #ffffff;
  text-decoration: none;
  padding: 15px 30px 15px 30px;
  font-size: 1em;
}
.button:hover {
  background-color: #d18c77;
  color: #000000;
}

.fa-arrow-right {
  margin-left: 6px;
}
.scale-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* FOOTER ======================================== */
footer {
  background-color: #254128;
  bottom: 0;
  width: 100%;  
}
.footer {
  display: flex;
    width: calc(100% - 180px);
    max-width: 1344px;
    padding: 0px 6rem 0px 6rem;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
}
.footer-text {
    padding-left: 0;
    display: block;
    text-align: left;
    margin-top: 10px;
    line-height: 2.5;
    text-align:justify;
}
.footer-content {
    margin: 30px;
}
.footer-box {
  margin-top: 4rem;
  display: flex;
  margin-left: 4rem;

}


/* media queries ================================= */


@media (min-width: 901px) and (max-width: 1024px) {
        /* styles for browsers larger than 960px; */
.padded {
    max-width: 900px;
}
.container6 {
  /*file repo*/
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
.repo {
  margin-left: 0px;
}
.repo-r {
  border-top:#53635496; 
  border-top-style: solid; 
  border-top-width: 1px;
  padding-top: 0;
  margin-top: 0;
  border-left:#53635496; 
  border-left-style: none; 
  border-left-width: 1px;
}
.vdiv60 {
  margin-bottom: 40px;
}
}


@media (min-width: 1440px) {
    /* styles for browsers larger than 1440px; */
.padded {
    max-width: 1344px;
}
}


@media (min-width: 2000px) {
    /* for sumo sized (mac) screens */
}


@media (min-width: 200px) and (max-width: 768px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */

.container-top {
  grid-template-columns: 1fr;
}
.container6 {
  /*file repo*/
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
.repo {
  margin-left: 0px;
}
.repo-r {
  border-top:#53635496; 
  border-top-style: solid; 
  border-top-width: 1px;
  padding-top: 0;
  margin-top: 0;
  border-left:#53635496; 
  border-left-style: none; 
  border-left-width: 1px;
}
.repo-1 {
  width: auto;
  margin-right: 0;
}
.vdiv60 {
  margin-bottom: 40px;
}
.topline2 {
  border-top: solid 1rem #cc562800;
  border-width: 3px;
  padding-top: 30px;
}
  .padded {
      padding-left: 2rem !important;
      padding-right: 2rem !important;
  }
  .h3,
  .h3-white{
    font-size: calc(2px + 9vw);
    color: whitesmoke;
    max-width: 70ch;
  }
  .h1 {
    font-size: 6vw;
    max-width: 70ch;
    line-height: normal;
  }
  .nav-left-text {
    display: none;
  }
  .nav-right {
    display: none;
  }
  .sixrem {
    padding-top: 3rem;
  }
  .p-top {
    font-size: 22px;
  }
  .footer {
    padding-left: 2rem;
    padding-right: 2rem;
    display: grid;
    grid-template-columns: 1fr;
  }
  .footer-span {
    border-bottom-color: #53635496;
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
  .empty {
    padding-top: 2rem;
    padding-bottom: 1rem;
  }
}
@media (min-width: 768px) and (max-width:900px) {
       /* default iPad screens */
       .container6 {
  /*file repo*/
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
.repo {
  margin-left: 0px;
}
.repo-r {
  border-top:#53635496; 
  border-top-style: solid; 
  border-top-width: 1px;
  padding-top: 0;
  margin-top: 0;
  border-left:#53635496; 
  border-left-style: none; 
  border-left-width: 1px;
}
.vdiv60 {
  margin-bottom: 40px;
}
.topline2 {
  border-top: solid 1rem #cc562800;
  border-width: 3px;
  padding-top: 10px;
}
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 10% 30% 30% 10%;
    grid-template-rows: max-content 1fr;
    row-gap: 3em;
    padding-top: 3em;
  }
  .padded {
    max-width: 900px;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .sixrem {
    padding-top: 4rem;
  }
  .h3 {
    font-size: 10vw;
    color: #254128;
    max-width: 70ch;
    line-height: normal;
  }
  .h1 {
    font-size: 6vw;
    max-width: 70ch;
    line-height: normal;
  }
  .nav-left-text {
    display: none;
  }
  .nav-right {
    display: none;
  }
    .dropbtn {
    display: contents;
    align-items: right;
  }
  .footer {
    padding-left: 2rem;
    padding-right: 2rem;
    display: grid;
    grid-template-columns: 1fr;
  }
  .footer-span {
    border-bottom-color: #53635496;
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
  .empty {
    padding-top: 2rem;
    padding-bottom: 1rem;
  }
}