@charset "UTF-8";


@font-face {
  font-family: 'CabinetGrotesk-Medium';
  src: url('../fonts/CabinetGrotesk-Medium.woff2') format('woff2'),
       url('../fonts/CabinetGrotesk-Medium.woff') format('woff'),
       url('../fonts/CabinetGrotesk-Medium.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: normal;
}
@font-face {
  font-family: 'CabinetGrotesk-Bold';
  src: url('../fonts/CabinetGrotesk-Bold.woff2') format('woff2'),
       url('../fonts/CabinetGrotesk-Bold.woff') format('woff'),
       url('../fonts/CabinetGrotesk-Bold.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: normal;
}
@font-face {
  font-family: 'CabinetGrotesk-Extrabold';
  src: url('../fonts/CabinetGrotesk-Extrabold.woff2') format('woff2'),
       url('../fonts/CabinetGrotesk-Extrabold.woff') format('woff'),
       url('../fonts/CabinetGrotesk-Extrabold.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: normal;
}


:root {
  --black: rgb(0, 0, 0);
  --white: rgb(255, 255, 255);
  --offwhite: #EDE3D9;
  --darkgreen: #053B40;
  --offblack: #0F1516;
  --lightgrey: #E0D6CF;
  --lightgreen: #7FB5A1;
  --neongreen: #A6E0C2;

  --fontSize1: 16px;
  --fontSize2: 20px;
  --fontSize3: 28px;
  --fontSize4: 52px;
  --lineHeightStandard: 1.3;

  --regular: "CabinetGrotesk-Medium", sans-serif;
  --bold: "CabinetGrotesk-Bold", sans-serif;
  --extrabold: "CabinetGrotesk-Extrabold", sans-serif;

  --line: 1px;
  --underline-thickness: var(--line);
  --underline-offset: 2px;

  --smallEdge: 10px;
  --mainEdge: 1rem;
  --bigEdge: calc(var(--mainEdge) * 2);
  --giantEdge: 80px;

  --gridGap: var(--mainEdge);
  --gridColumn: calc((100vw - (var(--gridGap) * 13)) / 12);

  --corner-radius: 5px;

  --imageHeightBig: 50vh;
  --imageHeightSmall: 30vh;

  --iconSize: 40px;
}
:root .darkmode{
  --darkgreen: #064649;
}
* {
	margin:0;
	padding:0;
	list-style:none;
  box-sizing: border-box;
}
*::-webkit-scrollbar {
  display: none;
}
html{
  scroll-behavior: smooth;
}
body{
  font-family: var(--regular);
  font-size: var(--fontSize2);
  line-height: var(--lineHeightStandard);
  font-weight: 400;
  background-color: var(--offblack);
  color: var(--darkgreen);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100vw;
}
body::-webkit-scrollbar {
  display: none;
}
*::-webkit-scrollbar {
  display: none;
}
a{
  color: var(--darkgreen);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-thickness);
  cursor: pointer;
}
nav a, .slider a, .article-list a{
  text-decoration: none;
}
.bold{
  font-family: var(--bold);
}
.extrabold{
  font-family: var(--extrabold);
}
.bold, strong, em{
  font-style: normal;
  font-family: var(--extrabold);
}
ul li{
  line-height: 1.4;
}
ul li:not(nav ul li){
  margin-bottom: var(--mainEdge);
}
h1, h2, h3, h4, h5, h6{
  font-weight: 400;
}
h1{
  font-size: var(--fontSize2);
  line-height: var(--lineHeightStandard);
}
h2{
  font-size: var(--fontSize2);
  line-height: var(--lineHeightStandard);
}
h3{
  font-size: var(--fontSize2);
  font-family: var(--extrabold);
  line-height: var(--lineHeightStandard);
}
.font-size1{
  font-size: var(--fontSize1);
  line-height: 1.45;
}
.font-size2{
  font-size: var(--fontSize2);
  line-height: var(--lineHeightStandard);
}
.font-size3{
  font-size: var(--fontSize3);
  line-height: 1.2;
}
.font-size4{
  font-size: var(--fontSize4);
  line-height: 1.1;
}
p{}
p:not(.nav-container p, .box-display p:last-of-type), h1, h2, h3, h4{
  margin-bottom: var(--mainEdge);
}
.underline{
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}
.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gridGap);
  padding: 0 var(--gridGap);
  align-content: start;
}
.grid img{
  width: 100%;
}
.color-light{
  color: var(--lightgreen)
}



/* DEDICATED GRIDSTYLES */
.gridstyle-bottomlinklist-column-li{
  grid-column: 2/5;
}
.gridstyle-bottomlinklist-column-re{
  grid-column: 5/8;
}
.gridstyle-legal-col1{
  grid-column: 1/5
}
.gridstyle-legal-col2{
  grid-column: 5/9
}
.gridstyle-home-quote{
  grid-column: 2/8
}
.gridstyle-home-personal-description {
  grid-column: 2/6
}
.gridstyle-home-personal-portrait {
  grid-column: 6/8
}
.gridstyle-about-personal-text{
  grid-column: 2/6
}
.gridstyle-about-personal-portrait{
  grid-column: 6/8
}
.gridstyle-article-textbox{grid-column: 2/8}



/* BUTTON */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: var(--lineHeightStandard);
  margin: 0;
  border: none;
  background: none;
  color: var(--darkgreen);
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],[type="reset"],[type="submit"] {
  -webkit-appearance: button;
}
button{
  position: relative;
  cursor: pointer;
  text-align: left;
  z-index: 1;
}
button, button a{
  text-decoration: none;
}
button, button::after{
  transition: 150ms;
  transition-timing-function: ease-in-out;
}
.button-style1{
  background-color: var(--darkgreen);
  color: var(--lightgreen);
  width: 100%;
  padding: 16px 50px 16px 15px;
  border-radius: 5px;
}
.button-style2{
  padding: 16px 50px 16px 15px;
  border-radius: 5px;
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}
.button-style3{
  padding-right: 50px;
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}
.button-style1:hover{
  color: var(--neongreen);
}
button::after{
  content:"";
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  width: 20px;
  background-repeat: no-repeat;
  background-position-y: center;
  background-size: contain;
  background-image: url(../img/snowtree_arrow2.svg);
}
.button-style1::after{
  background-image: url(../img/snowtree_arrow1.svg);
}
button:hover::after{
  right: 10px;
}
.section-cta{
  padding-bottom: var(--giantEdge);
  background-color: var(--offwhite);
}
input, textarea{
  background-color: var(--lightgrey);
  border-radius: var(--corner-radius);
  padding: var(--mainEdge);
}



/* GLOBAL PAGE ELEMENTS*/

.content {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}
.textbox ul li{
  padding-left: var(--bigEdge);
  position: relative;
}
.textbox ul li::after{
  content: "";
  position: absolute;
  left:0;
  top: calc(50% - var(--gridGap) * 0.5);
  background-color: var(--lightgrey);
  width: var(--gridGap);
  height: var(--gridGap);
  border-radius: 50%;
  transition: 150ms;
  transition-timing-function: ease-in-out;
}
.page-headline{
  margin: var(--bigEdge) 0;
}
.portrait-container{
  display: flex;
  height: 100%;
}
.border-radius{
  border-radius: var(--corner-radius);
}
.portrait-container.top{
  align-items: start;
}
.portrait-container.bottom{
  align-items: end;
}
.padding-top{
  padding-top: var(--giantEdge) !important;
}
.padding-bottom{
  padding-bottom: var(--giantEdge) !important;
}
.padding-bottom-big{
  padding-bottom: calc(var(--giantEdge) * 2) !important;
}
.margin-top{
  margin-top: var(--giantEdge) !important;
}
.margin-bottom{
  margin-bottom: var(--giantEdge) !important;
}
.margin-top-small{
  margin-top: var(--mainEdge) !important;
}
.margin-bottom-small{
  margin-bottom: var(--mainEdge) !important;
}
.margin-bottom-big{
  margin-bottom: calc(var(--giantEdge) * 2) !important;
}
section, header{
  background-color: var(--offwhite);
  transition: 300ms;
  transition-timing-function: ease-in-out;
}
.section-links{
  background-color: var(--lightgrey);
}
.bottom-line{
  border-bottom: 1px solid var(--darkgreen);
}
.bottom-line2{
  border-top: 1px solid var(--darkgreen);
}
.bottom-line3{
  height: 1px;
  width: 100%;
  /* background-color: var(--darkgreen); */
  position: relative;
}
.bottom-line3::after{
  content: "";
  position: absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-color: var(--darkgreen);
}
.line{
  height: var(--line);
  background: var(--darkgreen);
  width: 100%;
}
.bottom-gradient{
  /* width: 100%; */
  height: 0;
  position: relative;
}
.bottom-gradient::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  /* background-color: var(--neongreen); */
  background-image: linear-gradient(0, var(--neongreen), rgba(255,255,255,0));
  opacity: 0.5;
  width: 100%;
  pointer-events: none;
  border-radius: 0 0 var(--corner-radius) var(--corner-radius);
}
.quote1{
  padding-bottom: var(--bigEdge);
}
.quote1::after, .quote1::before{
  width: 28px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  display: inline-block;
}
.quote1::after{
  content: "";
  background-image: url(../img/snowtree_quotemark2.svg);
  transform: rotate(180deg);
}
.quote1::before{
  content: "";
  background-image: url(../img/snowtree_quotemark2.svg);
}
.quoter{
  margin-left: var(--mainEdge);
}
.box-display{
  padding: var(--gridGap);
  padding-left: calc(var(--gridColumn) + var(--gridGap));
  background-color: var(--lightgrey);
  position: relative;
  border-radius: var(--corner-radius);
}
.box-display::after{
  content: "";
  position: absolute;
  left:calc(var(--gridColumn) * 0.5);
  top: calc(50% - var(--gridGap) * 0.5);
  background-color: var(--offwhite);
  width: var(--gridGap);
  height: var(--gridGap);
  border-radius: 50%;
  transition: 150ms;
  transition-timing-function: ease-in-out;
}
.box-display:hover::after{
  left:calc(var(--gridColumn) * 0.5 + 10px);
}
.callout{
  color: var(--lightgreen);
}
#share-overlay{
  display: none;
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color: var(--offwhite);
  opacity: 0.97;
  transition-duration: 0.2;
  transition-timing-function: ease-in-out;
  z-index: 4;
}
#share-overlay .share-info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}



/* SLIDESHOW */

.slider{
  position: relative;
}
.slider-container{
  left:0;
  width:100%;
  height: var(--imageHeightBig);
  position: relative;
}
.slider-container.plustext{
  height: calc(var(--imageHeightBig) + 300px);
}
.slider-controls{
  position: absolute;
  width: 100%;
  top: 0;
}
.slide{
  height:100%;
  width:100%;
  position:absolute;
  transition-duration: 0.5s;
}
.slider-title{
}
.slider-image{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--imageHeightBig);
  border-radius: var(--corner-radius);
  overflow: hidden;
}
.slider-image img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.slider-text{
  margin-top: calc(var(--imageHeightBig) + var(--bigEdge));
  transition-delay: 1s;
}
.arrow{
  height: var(--imageHeightBig);
  /* width: var(--gridColumn); */
  width:50%;
  padding:1rem;
  cursor:pointer;
  position: absolute;
}
.arrow::after{
  content:"";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  background-repeat: no-repeat;
  background-position-y: center;
  background-size: contain;
  transition: 150ms;
  transition-timing-function: ease-in-out;
}
.larr{
  left: calc(var(--gridColumn) * -1);
}
.larr::after{
  background-image: url(../img/snowtree_arrow2.svg);
  transform: rotate(180deg);
  /* right: 40px; */
  left:0;
}
.larr:hover::after{
  /* right: 50px; */
  left:-20px;
}
.rarr{
  right: calc(var(--gridColumn) * -1);
}
.rarr::after{
  background-image: url(../img/snowtree_arrow2.svg);
  /* left: 40px; */
  right: 0;
}
.rarr:hover::after{
  /* left: 50px; */
  right: -20px;
}



/* NAV */

.nav-container{
  position: absolute;
  right: var(--gridGap);
  top: 0;
  bottom: 0;
  width: calc(4 * var(--gridColumn) + 3 * var(--gridGap));
  z-index: 1;
  padding-left: calc(var(--gridColumn) + var(--gridGap));
  border-left: 1px dashed var(--darkgreen);
  background-color: transparent;
  z-index: 2;
}
.nav-list{
  transition: 300ms;
  transition-timing-function: ease-in-out;
  position: fixed;
  top: 100vh;
  transform: translateY(calc(-100% - var(--gridGap)));
}
.logo1{
  margin-top: var(--gridGap);
  width:180px;
}
.logo1, .logo-subtext, .logo1-container{
  transition: 300ms;
  transition-timing-function: ease-in-out;
  opacity: 1;
}
.indicator2, .indicator1{
  width: 1px;
  height: 1px;
  background-color: blue;
  position: sticky;
  top: -1px;
  opacity: 0;
}
.indicator2.is-pinned ~ .nav-list{
  top: var(--gridGap);
  transform: translateY(0);
}
.indicator1.is-pinned ~ .logo1-container, .indicator1.is-pinned ~ .logo-subtext{
  opacity: 0;
}
#nav-toggle{
  display: none;
}
#nav-toggle{
  position: fixed;
  right: var(--gridGap);
  top: calc(100vh - var(--gridGap) - var(--iconSize) - 80px);
  width: var(--iconSize);
  height: var(--iconSize);
  z-index: 3;
  overflow: hidden;
  cursor: pointer;
  transition: 300ms;
  transition-timing-function: ease-out;
  /* transform: rotate(0); */
}
#nav-toggle.is-pinned{
  top: var(--gridGap)
}
#nav-toggle:hover, #nav-toggle:active{
  transform: rotate(180deg);
}
.nav-icon, .nav-icon-close{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transition: 150ms;
  transition-timing-function: ease-in-out;
  opacity: 0;
  z-index: 3;
}
.nav-icon{
  background-image: url(../img/snowtree_icon_menuOpen2.svg);
}
.nav-icon.visible, .nav-icon-close.visible{
  opacity: 1;
  z-index: 4;
}
.nav-icon-close{
  background-image: url(../img/snowtree_icon_menuClose1.svg);
}
#nav-toggle input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--lightgrey);
  -webkit-transition: .4s;
  transition: .4s;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--offwhite);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: calc(var(--corner-radius) * 0.5);
}
input:checked + .toggle-slider {
  background-color: var(--lightgreen);
}
input:focus + .toggle-slider {
  box-shadow: 0 0 1px var(--lightgreen);
}
input:checked + .toggle-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
label input:checked ~ .nav-container{
  /* width:200px; */
}
/* .test{
  opacity: 0
}
input:checked ~ .test {
  opacity: 1
} */



/* HOME */

#home{
}
#home header{
  .background-color: yellow;
}
.home-image{
  margin-top: var(--gridGap);
  /* height: calc(100vh - var(--gridGap) * 2); */
  border-radius: var(--corner-radius);
  background-color: var(--lightgreen);
  position: relative;
  overflow: hidden;
}
.home-image.ratio-quad{
  aspect-ratio: 1 / 1;
  display: none;
}
.home-image.ratio-169{
  aspect-ratio: 16 / 9;
  display: block;
}

.home-personal-description, .home-slider, .blog-slider{
  padding-bottom: var(--giantEdge);
}



/* BLOG */

.section-blog-slider{
  padding-top:var(--gridGap);
}
.article-bigimage{
  height: 50vh;
}
.article-smallimage{
  height: 30vh;
}
.article-bigimage img, .article-smallimage img{
  object-fit: contain;
  height: 100%;
  width: 100%;
}



/* FOOTER */

footer{
  width: 100vw;
  height: 66vh;
  background-color: var(--offblack);
  padding: var(--gridGap) 0;
  position: relative;
}
.footer-line{
  padding-top: var(--gridGap);
}
.footer-icon{
  width: 100%;
  aspect-ratio: 1 / 1;
  background-image: url(../img/snowtree_footericon1.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  bottom: var(--gridGap);
}



/* ARTICLE */

.hero-container{
  margin-top: var(--gridGap);
  height: calc(50vh - var(--gridGap));
  border-radius: var(--corner-radius);
  overflow: hidden;
}
.hero-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  /* object-position: center; */
}
#article header {
  min-height: 100vh;
}
.article-textbox {
  margin-bottom: var(--bigEdge);
}
.article-video{
  width: 100%;
  aspect-ratio: 16 / 9;
}
iframe{
  border: 0;
}



/* DARKMODE */

body.darkmode{
  color: var(--lightgreen);
}

/* body.darkmode a {
  color: var(--neongreen);
} */

body.darkmode section, body.darkmode header{
  background-color: var(--offBlack);;
}






@media only screen and (min-width: 1400px) {
  :root {
    --fontSize1: 19px;
    --fontSize2: 24px;
    --fontSize3: 32px;
    --fontSize4: 64px;
    --lineHeightStandard: 1.3;

  }
  footer{
    height: 80vh;
  }
}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 960px) {
  .desktop {
    display: none;
  }
  .grid{
    grid-template-columns: repeat(8, 1fr);
  }
  :root {
    --fontSize1: 16px;
    --fontSize2: 19px;
    --fontSize3: 24px;
    --fontSize4: 40px;
  }
  #nav-toggle{
    display: inline-block;
  }
  .nav-container{
    right: -75vw;
    width: 75vw;
    background-color: var(--offwhite);
    transition: 300ms;
    transition-timing-function: ease-in-out;
  }
  .nav-container:not(.nav-container.hidden){
    right: 0;
  }
  .gridstyle-bottomlinklist-column-li{grid-column: 1/5;}
  .gridstyle-bottomlinklist-column-re{grid-column: 5/9;}
  .gridstyle-legal-col1{grid-column: 1/9}
  .gridstyle-legal-col2{grid-column: 1/9}
  .gridstyle-home-quote{grid-column: 1/9}
  .gridstyle-home-personal-description {grid-column: 1/6}
  .gridstyle-home-personal-portrait {grid-column: 6/9;}
  .gridstyle-about-personal-text{grid-column: 1/6}
  .gridstyle-about-personal-portrait{grid-column: 6/9}
  .gridstyle-article-textbox{grid-column: 1/8}

  .home-image.ratio-quad{
    display: block;
  }
  .home-image.ratio-169{
    display: none;
  }
  .larr{
    left: calc(var(--gridColumn) * -2.5);
  }
  .larr::after{
    background-image: url(../img/snowtree_arrow2.svg);
    transform: rotate(180deg);
    /* right: 40px; */
    left:0;
  }
  .larr:hover::after{
    /* right: 50px; */
    left: 0;
  }
  .rarr{
    right: calc(var(--gridColumn) * -2.5);
  }
  .rarr::after{
    background-image: url(../img/snowtree_arrow2.svg);
    /* left: 40px; */
    right: 0;
  }
  .rarr:hover::after{
    /* left: 50px; */
    right: 0;
  }
}

@media (min-aspect-ratio: 12/7) {
}