*{box-sizing:border-box;}

body,html{
    min-width: 100%;
    font-family:Roboto,sans-serif;
    width:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-content:center;
    }

header{
    position: fixed;
    top: 6vh;
    z-index: 2;
    display: flex;
    min-width: 100%;
    justify-content: center;}
    
.logok{
    width:30vw;
    height:auto;
    max-width:200px}
    
    .nav{width:93%;background-color:transparent;position:relative;display:flex;justify-content:space-between;}
    
    .nav>.nav-links{
        font-size:17px;
        position:fixed;
        display:block;
        width:100%;
        max-width: 25rem;
        background-color:#000925;
        overflow-y:hidden;
        top:6rem;
        right:0}

        
    .active{font-size:1.5rem;color:#32cd32!important;border-radius:5px!important}
        
    .nav>#nav-check{display:none}

            
    .nav>.nav-btn>label>span {
        display: flex;
        width: 9vw;
        max-width: 3rem;
        height: 33%;
        border-top: 5px solid #fff;
        cursor: pointer;
        justify-content: space-evenly;
        flex-direction: column;
    }
        
            
    .nav>#nav-check:not(:checked)~.nav-links{height:0}
            
    header a{color:#fff!important;text-decoration:none}
            
    .nav-links{border-radius:10px;max-height: 75vh;}
            
    menu{margin:0;padding:0;list-style-type:none}
            
    menu li{text-align:center;margin:0;padding:15px;line-height:1.2}


h1{
    text-shadow:0.0625rem 0.0625rem 0.3125rem rgba(0,0,0,.7);
    letter-spacing:.05em;
    padding:0 1rem;
    color: whitesmoke;
    text-align:center;
    font-size:1.8rem;
    line-height:1.2;
    min-height: calc(1.8rem * 1.2);
    min-width: 100%;
    margin: 0 auto;
   }
    p {
        font-weight: 300;
        text-rendering: optimizeSpeed;
        text-align: center;
        font-size: 1.4rem;
        color: white;
        padding: 0 1rem 1rem 1rem;
        max-width: 60ch;
        letter-spacing: 0.05em;
        margin: 0 auto;
        line-height: 1.6;
        opacity: .9;
    }
    
.fareharbour{
    position:fixed;
    bottom:12px;
    right:15px;
    z-index:3}
    
.topbox{
    height:100vh;
    min-width:100%;
    position:relative;
    overflow:hidden;
}
.topbox-50-30 {
object-position: 50% 30%
}
.fixed-image{
    position:fixed;
    width:100%;
    height:100vh;
    object-fit:cover;
    top:0;
    left:0;
 opacity: .9;}
    
.titlebox{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:32rem;min-width:100%;position:absolute;top:0;z-index:1}
    
.topicon {    
    height: 30rem;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
}

.icon{background-image:url(https://imagedelivery.net/U2IC6mrT6VB6UTYuhB74NA/c3650fc8-1b21-4173-9f7b-2b9276724000/w=150,fit=scale-down);background-size:cover;height:4rem;width:3rem;min-width:5rem;margin: 0 auto;}
    
.subtitle{font-size:1.3rem;font-weight:300}.sublink{font-weight:300}


        
a{color:#32cd32;font-weight:700;text-align:center;font-size:1.5rem;letter-spacing:.05em;}
        
a.button{text-rendering:optimizeSpeed;padding:.5rem 1rem;font-size:1.7rem;font-weight:700;color:#000925;border-radius:5px;margin:0 auto;background-color:#32cd32;text-decoration:none}
        
.headline{color:#00c04b;font-size:1.5rem;font-weight:700}
        
.learn-more-checkbox{display:none}

.hidden-content{display:none}
        
.collapse-btn{color:silver;font-size:1rem;display:block;margin-top:10px}
        
.textbox{display:flex;flex-direction:column;align-items:center;margin-top:6rem;min-width:100%;}
        
main{background-color:rgba(0, 6, 30, 0.85);z-index: 0;min-width: 100vw}

.canyonlogo {
    width: 15%;
    min-width: 10rem;
    opacity: 0.95;
    margin: 0 auto;
    height: auto;
}

button {
    font-weight: 700;
    font-size: 2rem;
    padding: 10px 20px;
    color: #000925;
    border-radius: 5px;
    margin: 0 auto;
    background-color: limegreen;
    border: none;
    cursor: pointer;
    position: relative;
  }

  .buttonbox {
   display: flex; justify-content: center; min-width: 100%; margin-top: 1rem;
  }

  .social-proof {
    position: relative;
    
}

  .lnt-pp {
    position: absolute;
    z-index: 1;
    top: 17vh;
    left: calc(6% - 3vw);
    background-color: whitesmoke;
    border-radius: 5%;
    width: 30%;
    height: auto;
    max-width: 110px;
    opacity: .9;
  }


  @media screen and (max-width: 1000px) {
    .lnt-pp {
        top: 16vh;
    }
}

  @media screen and (max-width: 600px) {
    .lnt-pp {
        top: 15vh;
    }
}
  
  @media screen and (max-width: 500px) {
        .lnt-pp {
            top: 14vh;
        }
    }

    @media screen and (max-width: 400px) {
        .lnt-pp {
            top: 13vh;
        }
    }