/* START CSS Reset */
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style-type:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}a{color:inherit;text-decoration:none;}
/* END CSS Reset */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@1,300;1,700&display=swap');
html{
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    user-select: none;
}
body{
    background-color: #0F0F0F;
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1.1em;
}
section{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    background: #0f0f0f;
}
.next-sec{
    font-size: 80px;
    color: #8FBF39;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    transition: color 0.25s, text-shadow 0.25s;
    cursor: pointer;
}
section.animate .next-sec{
    animation: next-but 1.5s forwards;
}
@keyframes next-but{
    0% {bottom: 60px}
    100% {bottom: 0}
}
section.animate .next-sec:hover{
    animation-play-state: paused;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
}
.hero{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 154vh;
    height: 100vh;
    position: absolute;
    left: 30vw;
}
.hero-banner{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    position: relative;
}
.hero-image-group{
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
}
.hero .hero-image{
    width: auto;
    height: 100%;
    position: absolute;
    bottom: 0;
}
section.animate .hero-image{
    animation-name: hero-img;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
.container{
    position: relative;
    top: 0;
    left: 10vw;
    height: 100vh;
}
.custom-scrollbar{
    overflow: hidden;
}
h1{
    font-size: 2.2em;
    font-weight: 700;
    line-height: 1em;
}
.logo{
    color: #8FBF39;
    font-size: 1.5em;
    font-weight: 400;
    position: relative;
    top: 5vh;
    opacity: 0;
    transition: all 1.8s;
}
section.animate .logo{
    top: 6vh;
    opacity: 1;
}
.logo img{
    width: 2.6em;
}
.content{
    position: relative;
    top: 20vh;
    text-shadow: 2px 2px 2px #000;
    opacity: 0;
    transition: all .8s;
}
section.animate .content{
    top: 24vh;
    opacity: 1;
}
.copy{
    margin-top: 1em;
}
.line-length{
    display: block;
    border-left: solid 1px #8FBF39;
    height: 0;
    transform-origin: 0% 100%;
    transition: height .25s;
    position: absolute;
}
.line-rotate-left{
    transform: rotate(29deg);
    position: absolute;
    transform-origin: 0% 100%;
    height: 50vh;
}
.line-rotate-right{
    transform: rotate(-29deg);
    position: absolute;
    transform-origin: 0% 100%;
    height: 50vh;
}
#intro .hero{
    width: 100vh;
    height: 90vh;
    bottom: 0;
}
#intro .hero-banner{
    height: 90vh;
    width: 100vh;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background-color: #025594;
}
#intro .hero-image{
    position: relative;
    bottom: -8vh;
}
#intro .hero-prop1, #intro .hero-prop2{
    position: absolute;
    height: auto;
    width: 100%;
    left:50%;
    transform: translate(-50%);
}
#intro.animate .hero-prop1{
    animation-name: mountains;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
#intro.animate .hero-prop2{
    animation-name: mountains;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}
#intro .hero-prop3{
    position: absolute;
    width: 60%;
    bottom: 10%;
}
#intro.animate .hero-prop3{
    animation-name: sun-ani;
    animation-duration: 6s;
    animation-fill-mode: forwards;
}
#intro .hero-prop4{
    position: absolute;
    width: 35%;
    bottom: 55%;
}
#intro.animate .hero-prop4{
    animation-name: cloud-ani;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
#intro .line1{
    left: -4vh;
}
#intro.animate .line1 .line-length{
    height: 22vh;
    transition: height 4s;
    bottom: 0;
}
#intro .line2{
    left: 12vh;
    top: 5vh;
}
#intro.animate .line2 .line-length{
    height: 25vh;
    transition: height 5s;
}
#intro .line3{
    left: 18vh;
    top: 1vh;
}
#intro.animate .line3 .line-length{
    height: 15vh;
    transition: height 2s;
}
#intro .line4{
    right: 17vh;
    top: 3vh;
}
#intro.animate .line4 .line-length{
    height: 15vh;
    transition: height 2s;
}
#intro .line5{
    right: -4vh;
}
#intro.animate .line5 .line-length{
    height: 28vh;
    transition: height 5s;
    bottom: 0;
}
#intro .line6{
    right: -8vh;
}
#intro.animate .line6 .line-length{
    height: 15vh;
    transition: height 3s;
    bottom: 0;
}
#intro h1{
    width: 9em;
}
#intro .copy{
    width: 19em;
}
#about .hero-banner{
    clip-path: polygon(0 0, 65% 0, 100% 100%, 35% 100%);
}
#about .watering{
    position: absolute;
    height: 40vh;
}
#about.animate .watering{
    animation-name: watering;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
#about .plant{
    position: absolute;
    height: 80vh;
    bottom: -6vh;
}
#about.animate .plant{
    animation-name: plant;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
#about .line1{
    left: 46vh;
}
#about.animate .line1 .line-length{
    height: 18vh;
    transition: height 2.5s;
    bottom: 0;
}
#about .line2{
    left: 50vh;
}
#about.animate .line2 .line-length{
    height: 32vh;
    transition: height 5s;
    bottom: 0;
}
#about .line3{
    left: 29vh;
    top: 10vh;
}
#about.animate .line3 .line-length{
    height: 15vh;
    transition: height 2s;
}
#about .line4{
    right: 16vh;
    top: 12vh;
}
#about.animate .line4 .line-length{
    height: 20vh;
    transition: height 2.5s;
}
#about .line5{
    right: -4vh;
}
#about.animate .line5 .line-length{
    height: 32vh;
    transition: height 4s;
    bottom: 0;
}
#about .line6{
    right: -8vh;
}
#about.animate .line6 .line-length{
    height: 15vh;
    transition: height 1.5s;
    bottom: 0;
}
#about h1{
    width: 10em;
}
#about .copy{
    width: 20em;
}
#strategy .hero-banner{
    height: 100%;
    width: 100%;
    clip-path: polygon(35% 0, 100% 0, 65% 100%, 0% 100%);
}
#strategy .puzzle-BL, #strategy .puzzle-BR, #strategy .puzzle-TR, #strategy .puzzle-TL{
    position: absolute;
    height: 100vh;
}
#strategy.animate .puzzle-BL{
    animation-name: puzzle-BL;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
#strategy.animate .puzzle-TR{
    animation-name: puzzle-TR;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
#strategy.animate .puzzle-BR{
    animation-name: puzzle-BR;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
#strategy.animate .puzzle-TL{
    animation-name: puzzle-TL;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
#strategy .notes{
    position: absolute;
    left: 9vh;
    bottom: 10vh;
    height: 30vh;
}
#strategy .line1{
    left: -4vh;
}
#strategy.animate .line1 .line-length{
    height: 14vh;
    transition: height 1.5s;
    bottom: 0;
}
#strategy .line2{
    top: 1vh;
    left: 18vh;
}
#strategy.animate .line2 .line-length{
    height: 18vh;
    transition: height 3s;
}
#strategy .line3{
    left: 23vh;
    top: -1vh;
}
#strategy.animate .line3 .line-length{
    height: 32vh;
    transition: height 5s;
}
#strategy .line4{
    right: 30vh;
    top: 12vh;
}
#strategy.animate .line4 .line-length{
    height: 20vh;
    transition: height 2.5s;
}
#strategy .line5{
    right: 50vh;
}
#strategy.animate .line5 .line-length{
    height: 38vh;
    transition: height 5s;
    bottom: 0;
}
#strategy .line6{
    right: 46vh;
}
#strategy.animate .line6 .line-length{
    height: 15vh;
    transition: height 1.5s;
    bottom: 0;
}
#strategy .copy{
    width: 20em;
}
#studies .copy{
    width: 20em;
}
#studies .hero-banner{
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 65% 0, 100% 100%, 35% 100%);
}
#studies .cup{
    position: absolute;
    bottom: 6vh;
    height: 35vh;
}
#studies.animate .cup{
    animation-name: cup;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
#studies .line1{
    left: 46vh;
}
#studies.animate .line1 .line-length{
    height: 18vh;
    transition: height 2.5s;
    bottom: 0;
}
#studies .line2{
    left: 50vh;
}
#studies.animate .line2 .line-length{
    height: 10vh;
    transition: height 1s;
    bottom: 0;
}
#studies .line3{
    left: 24vh;
    top: 2vh;
}
#studies.animate .line3 .line-length{
    height: 32vh;
    transition: height 5s;
}
#studies .line4{
    right: 16vh;
    top: 12vh;
}
#studies.animate .line4 .line-length{
    height: 20vh;
    transition: height 2.5s;
}
#studies .line5{
    right: -8vh;
}
#studies.animate .line5 .line-length{
    height: 44vh;
    transition: height 5s;
    bottom: 0;
}
#studies .line6{
    right: -4vh;
}
#studies.animate .line6 .line-length{
    height: 20vh;
    transition: height 2s;
    bottom: 0;
}
#studies.animate .hero .line6{
    height: 20vh;
    transition: height 2s;
}
.gallery{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.gallery li{
    list-style: none;
    font-size: 1.2em;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    padding: 20px 0;
    transition: all ease-in-out 0.3s;
    text-shadow: 5px 5px 5px #000;
}
.gallery li:hover{
    color: #8FBF39;
}
.gallery li span{
    font-size: .8em;
    padding-right: 10px;
}
#contact h1{
    border-bottom: solid 1px #8FBF39;
    padding-bottom: 20px;
    width: 360px;
}
#contact .copy{
    width: 360px;
}
#contact .copy p{
    padding-bottom: 20px;
}
#contact .copy h2{
    border-top: solid 1px #8FBF39;
    padding: 20px 0;
}
#contact .icon-mail, #contact .icon-mobile{
    padding-right: 10px;
}
#contact span.icon-at{
    padding: 0;
}
#contact .hero-banner{
    width: 100%;
    height: 100%;
    clip-path: polygon(35% 0, 100% 0, 65% 100%, 0% 100%);
}
#contact .arm, #contact .phone{
    position: absolute;
    height: 100vh;
}
#contact.animate .arm, #contact.animate .phone{
    animation-name: hands;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}
#contact form{
    display: flex;
    flex-direction: column;
}
#contact form input, #contact form textarea, #contact form button{
    margin-bottom: 20px;
    font-family: 'Work Sans', sans-serif;
    padding: 5px 10px;
    border-radius: 5px;
}
#contact form textarea{
    resize: none;
    overflow-y: auto;
}
#contact form input:focus, #contact form textarea:focus{
    outline: none !important;
    border: solid 2px #8FBF39;
}
#contact form button{
    width: 50%;
    background-color: #fff;
    border: 0;
    transition: all 0.4s;
    cursor: pointer;
}
#contact form button:hover{
    background-color: #8FBF39;
}
#contact .line1{
    left: -4vh;
}
#contact.animate .line1 .line-length{
    height: 20vh;
    transition: height 2s;
    bottom: 0;
}
#contact .line2{
    top: 1vh;
    left: 18vh;
}
#contact.animate .line2 .line-length{
    height: 18vh;
    transition: height 3s;
}
#contact .line3{
    left: 23vh;
    top: -1vh;
}
#contact.animate .line3 .line-length{
    height: 15vh;
    transition: height 1.5s;
}
#contact .line4{
    right: 30vh;
    top: 12vh;
}
#contact.animate .line4 .line-length{
    height: 24vh;
    transition: height 3s;
}
#contact .line5{
    right: 50vh;
}
#contact.animate .line5 .line-length{
    height: 32vh;
    transition: height 5s;
    bottom: 0;
}
#contact .line6{
    right: 46vh;
}
#contact.animate .line6 .line-length{
    height: 10vh;
    transition: height 1.5s;
    bottom: 0;
}
.copyright{
    color: #797878;
    padding: 15px;
    font-size: .8em;
    position: absolute;
    bottom: 30px;
    left: 50px;
    transform: rotate(-90deg);
    transform-origin: 0 100%;
}

/* Accordian */
.block {
    width: 100%;
    height: 100%;
    padding-bottom: 15px;
    z-index: 10;
    box-sizing: border-box;
}
.block > div {
    display: block;
    position: relative;
    padding: 0 0 0 35px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.block > div::before {
    content: "1";
    width: 20px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px 7.5px;
    border-right: 1px solid #8FBF39;
    margin: 0;
    color: #8FBF39;
}
.block > div:nth-child(2):before {
    content: "2";
}
.block > div:nth-child(3):before {
    content: "3";
}
.block > div:nth-child(4):before {
    content: "4";
}
.block > div input + label {
    font-weight: 700;
    cursor: pointer;
    display: block;
    padding: 0 0 10px 15px;
    transition: all 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;
}
.block > div input ~ div {
    visibility: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.25s, padding 0s ease-in-out 0s;
    width: calc(100% + 35px);
    margin-left: -35px;
}
.block > div input ~ div p {
    padding: 15px;
    border-top: 1px solid #8FBF39;
}
.block > div input:checked + label {
    color: #8FBF39;
    transition: 0s ease-in-out 0s;
}
.block > div input:checked ~ div {
    display: block;
    opacity: 1;
    visibility: visible;
    max-height: 215px;
    transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
}
/* Overlays */
  .overlayBg {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5;
    width: 100vw;
    height: 100vh;
    display: none;
    background-color: #000;
    opacity: .97;
  }
  .overlayBg.open {
    display: block;
  }
  [overlay] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 100%;
    height: 100%;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition:
      visibility 0s linear 0.4s,
      opacity 0.4s,
      transform 0.4s;
    overflow: auto;
  }
  [overlay].open {
    visibility: visible;
    opacity: 1;
    transition:
      opacity 0.7s,
      transform 0.7s;
  }
  [overlay] button.close {
    background: none;
    border: none;
    position: absolute;
    right: 50px;
    top: 50px;
    font-size: 3em;
    color: #8FBF39;
    cursor: pointer;
    outline: none;
  }
  [overlay] button.close:hover,
  [overlay] button.close:focus {
    color: #fff;
    transition: all 0.4s;
  }
  .overlay-body{
    padding: 80px 20px;
    max-width: 650px;
    display: inline-block;
  }
  .overlay-body img{
    width: 100%;
  }
  .overlay-body p{
    text-align: left;
    padding: .5em 0;
  }
  /* Logo Scroller */
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-220px * 8));
    }
    }
    .logo-slider{
        width: 23em;
    }
    .slider {
        height: 120px;
        margin: auto;
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    .slider .slide-track {
        animation: scroll 15s linear infinite;
        display: flex;
        width: calc(220px * 16);
    }
    .slider:hover .slide-track {
        animation-play-state: paused;
      }
    .slider .slide {
        height: 120px;
        width: 200px;
        padding: 0 10px;
    }

  @media screen and (max-width: 1600px){
    #about .hero-banner, #studies .hero-banner{
        clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%);
    }
    #strategy .hero-banner, #contact .hero-banner{
        clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    }
    .hero{
        width: 117.5vh;
        left: 35vw;
    }
    .container{
        width: auto;
        height: 100vh;
        left: 0;
        padding-left: 50px;
    }
    #about .line-rotate-right, #studies .line-rotate-right{
        transform: rotate(-10deg);
    }
    #strategy .line-rotate-left, #contact .line-rotate-left{
        transform: rotate(10deg);
    }
    #about .line1{
        left: 10vh;
    }
    #about .line2{
        left: 14vh;
    }
    #about .line3{
        left: 7vh;
    }
    #about .line4{
        right: 3vh;
    }
    #strategy .line2{
        left: 1vh;
    }
    #strategy .line3{
        left: 5vh;
    }
    #strategy .line4{
        right: 7vh;
    }
    #strategy .line5{
        right: 14vh;
    }
    #strategy .line6{
        right: 10vh;
    }
    #studies .line1{
        left: 10vh;
    }
    #studies .line2{
        left: 14vh;
    }
    #studies .line3{
        left: 5vh;
    }
    #studies .line4{
        right: 3vh;
    }
    #contact .line2{
        left: 1vh;
    }
    #contact .line3{
        left: 5vh;
    }
    #contact .line4{
        right: 7vh;
    }
    #contact .line5{
        right: 14vh;
    }
    #contact .line6{
        right: 10vh;
    }
    #about.animate .watering{
        animation-name: watering-1600;
    }
    #about.animate .plant{
        animation-name: plant-1600;
    }
    #strategy .notes{
        left: 0vh;
        transform: rotate(-10deg);
    }
    #strategy.animate .puzzle{
        height: 100%;
        width: 100%;
        transform: rotate(-10deg) translate(-15vh);
    }
    #studies.animate .cup{
        animation-name: cup-1600;
    }
    #contact.animate .arm, #contact.animate .phone{
        transform: translateX(-12%);
    }
    #contact.animate .hero-banner .hero-image{
        position: relative;
        right: 18vh
    }
}
@media screen and (max-width: 1400px){
    .container{
        left: 10%;
    }
    #intro .hero{
        height: 80vh;
        width: 600px;
        left: auto;
        right: 0;
    }
    .line1, .line2, .line3, .line4, .line5, .line6{
        display: none;
    }
    .hero{
        width: 600px;
        right: 0;
        left: auto;
    }
    #intro .hero-banner{
        height: 100%;
        width: 100%;
    }
    #about .hero-banner, #studies .hero-banner{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
    }
    #strategy .hero-banner, #contact .hero-banner{
        clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);
    }
    #about .line-rotate-right, #studies .line-rotate-right{
        transform: rotate(-3deg);
    }
    #strategy .line-rotate-left, #contact .line-rotate-left{
        transform: rotate(3deg);
    }
    #about.animate .watering{
        animation-name: watering-1440;
        height: 40vh;
    }
    #about.animate .plant{
        animation-name: plant-1440;
        height: 70vh;
    }
    #strategy .notes{
        display: none;
    }
    #strategy.animate .puzzle{
        height: 90%;
        width: 90%;
        transform: rotate(20deg) translateX(-50%) translateY(5%);
    }
    #strategy .puzzle-BL, #strategy .puzzle-BR, #strategy .puzzle-TR, #strategy .puzzle-TL{
        height: 100%;
    }
    #studies.animate .cup{
        animation-name: cup-1440;
    }
    #contact.animate .arm, #contact.animate .phone{
        transform: translateX(-17%);
    }
    #contact.animate .hero-banner .hero-image{
        position: relative;
        right: 25vh
    }
}
@media screen and (max-width: 1200px){
    .content{
        background: rgb(15, 15, 15, 0.5);
        background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.8) 10%, rgba(15, 15, 15, 0.8) 90%, rgba(15, 15, 15, 0) 100%); 
    }
    .container{
        left: 0;
        width: 100%;
        height: 60%;
        padding-left: 0;
    }
    .hero{
        width: 100%;
        height: 40vh;
        bottom: 0;
    }
    #intro .hero{
        width: 80%;
        height: 60%;
        margin: 0 10%;
    }
    #intro .hero-image{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
    #intro .hero-image-group{
        height: 100%;
        width: 90%;
    }
    #intro .hero-banner .hero-image-group{
        height: 100%;
        width: 100%;
    }
    #intro .hero-prop4{
        display: none;
    }
    .hero-image-group{
        height: 100%;
        overflow: hidden;
    }
    .hero .hero-image{
        width: 100%;
        height: auto;
    }
    #contact .hero .hero-image{
        width: auto;
        height: auto;
    }
    #about .hero-banner, #studies .hero-banner{
        clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
    }
    #strategy .hero-banner, #contact .hero-banner{
        clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    }
    #about .hero-banner.overlay{
        background-color: transparent;
    }
    .hero-image-overlay{
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(15,15,15,1) 0%, rgba(15,15,15,0) 15%);
    }
    #about .watering, #about .plant{
        transform: translate(-50%);
    }
    #about.animate .watering{
        animation-name: watering-1080;
        height: 45%;
    }
    #about.animate .plant{
        animation-name: plant-1080;
        height: 75%;
    }
    section .content{
        top: 80px;
        padding: 0 10%;
    }
    section.animate .content{
        top: 100px;
    }
    .logo{
        margin-left: 10%;
    }
    #about .copy, #strategy .copy, #studies .copy, #contact .copy{
        width: 100%;
    }
    #about h1, #strategy h1, #studies h1, #contact h1{
        width: 100%;
    }
    #strategy.animate .puzzle{
        height: 100%;
        width: 100%;
        transform: rotate(0deg) translateX(30%) translateY(0);
    }
    #strategy .hero-image{
        height: 100%;
        width: auto;
        left: 30%;
    }
    #strategy .hero-banner{
        background-color: #e4e3ec;
    }
    #studies .cup{
        transform: translate(50%);
        height: auto;
        width: 17%;
    }
    #contact.animate .hero-banner .hero-image{
        width: 80%;
        position: absolute;
        right: 0%;
        top: -10%;
    }
    #contact.animate .arm, #contact.animate .phone{
        width: 80%;
        height: auto;
        animation-name: hands-mobile;
    }
    @keyframes hands-mobile {
        0% {right: -16%;  bottom: -25%;}
        100% {right: -16%; bottom: -10%;}
    }
    .logo-slider{
        width: 100%;
    }
}
@media screen and (max-width: 920px){
    #intro .hero{
        height: 50%;
    }
    #strategy.animate .puzzle{
        transform: rotate(0deg) translateX(20%) translateY(0);
    }
    #strategy .hero-image{
        left: 20%;
    }
    #contact.animate .hero-banner .hero-image{
        height: 100%;
        width: auto;
        bottom: 0;
        top: auto;
        position: absolute;
    }
}
@media screen and (max-width: 760px){
    #intro .hero-image-group{
        height: 100%;
        width: 90%;
    }
    #intro .hero-banner .hero-image-group{
        height: 100%;
        width: 100%;
    }
    #intro .hero-image{
        height: auto;
    }
    #strategy.animate .puzzle{
        transform: rotate(0deg) translateX(10%) translateY(0);
    }
    #strategy .hero-image{
        left: 10%;
    }
    #contact.animate .arm, #contact.animate .phone{
        height: 110%;
        width: auto;
     }
     [overlay] button.close {
        right: 20px;
        top: 20px;
     }
}
@media screen and (max-width: 680px){
    #contact.animate .arm, #contact.animate .phone{
        width: auto;
        height: 100%;
    }
}
@media screen and (max-width: 600px){
    #intro .hero{
        width: 100%;
        margin: 0;
    }
    #intro .copy{
        width: 100%;
    }
    #intro h1{
        width: 100%;
    }
    #intro .hero-prop4{
        display: block;
    }
    #strategy.animate .puzzle{
        transform: rotate(0deg) translateX(0) translateY(0);
    }
    #strategy .hero-image{
        left: 0;
    }
}
@media screen and (max-width: 500px){
    .hero .hero-image{
        width: auto;
        height: 100%;
    }
    #studies .cup{
        height: 110px;
        width: auto;
    }
    #contact.animate .hero-banner .hero-image{
        right: auto;
        left: 0;
        width: 100%;
    }
}
@media screen and (max-width: 460px){
    #strategy.animate .puzzle{
        transform: rotate(0deg) translateX(-10%) translateY(0);
    }
    #strategy .hero-image{
        left: -10%;
    }
    #contact.animate .arm, #contact.animate .phone{
        animation-name: hands-lowres;
    }
    @keyframes hands-lowres {
        0% {left: 14%;  bottom: -25%;}
        100% {left: 5%; bottom: -10%;}
    }
}
@keyframes hero-img{
    0% {transform: scale(115%);}
    100% {transform: scale(100%);}
}
@keyframes mountains {
    0% {bottom: -8%;}
    100% {bottom:0;}
}
@keyframes sun-ani {
    0% {left: 0;}
    100% {left:-8%;}
}
@keyframes cloud-ani {
    0% {left: 30%;}
    100% {left:36%;}
}
@keyframes puzzle-BL {
    0% {left: -15vh; bottom: -15vh;}
    100% {left: 0; bottom: 0;}
}
@keyframes puzzle-TR {
    0% {left: 15vh; bottom: 15vh;}
    100% {left: 0; bottom: 0;}
}
@keyframes puzzle-BR {
    0% {left: 15vh; bottom: -15vh;}
    100% {left: 0; bottom: 0;}
}
@keyframes puzzle-TL {
    0% {left: -15vh; bottom: 15vh;}
    100% {left: 0; bottom: 0;}
}
@keyframes plant-1600 {
    0% {left: 20vh;}
    100% {left: 2vh;}
}
@keyframes watering {
    0% {left: 85vh; top: -12vh;}
    100% {left:65vh; top: -2vh;}
}
@keyframes plant {
    0% {left: 30vh;}
    100% {left: 18vh;}
}
@keyframes watering-1600 {
    0% {left: 85vh; top: -12vh;}
    100% {left:55vh; top: -2vh}
}
@keyframes plant-1440 {
    0% {left: 8vw;}
    100% {left: -2vw;}
}
@keyframes watering-1440 {
    0% {left: 40vw; top: -12vh;}
    100% {left:20vw; top: -2vh}
}
@keyframes plant-1080 {
    0% {left: 70%;}
    100% {left: 50%;}
}
@keyframes watering-1080 {
    0% {left: 80%; top: -20%;}
    100% {left:60%; top: 0;}
}
@keyframes cup {
    0% {left: 40vh;}
    100% {left: 35vh;}
}
@keyframes cup-1600 {
    0% {left: 15vh;}
    100% {left: 6vh;}
}
@keyframes cup-1440 {
    0% {left: 10vh;}
    100% {left: -1vh;}
}
@keyframes hands {
    0% {left: -15vh;  bottom: -15vh;}
    100% {left: 0; bottom: 0;}
}