@media (max-width: 480px) {
  #toplogo {
  }
}

@media (max-width: 480px) {
  iframe {
    width: 320px;
    margin-top: -50px;
  }
}

@media (max-width: 480px) {
  .topphotogrid {
    padding-top: 20%;
  }
}

@media (min-width: 900px) {
  .topphotogrid {
    padding-top: 5%;
  }
}

@media (max-width: 480px) {
  #WhyNature {
    padding-top: 15%;
  }
}

@media (min-width: 480px) {
  #WhyNatureImg {
    margin-top: 10%;
  }
}

@media (max-width: 480px) {
  #WhyBlue {
    margin-top: 10%;
  }
}

@media (max-width: 480px) {
  #navcol-2 {
    display: none;
    position: fixed;
    /*width: 120%;*/
    /*height: 100%;*/
    background: linear-gradient(rgba(0,0,0,0.82) -1%, rgba(0,0,0,0.84) 100%), rgba(0,0,0,0);
    padding-top: 424px;
    padding-left: 14%;
    padding-bottom: 50px;
    z-index: -1;
  }
}

@media (max-width: 480px) {
  #homebt {
    margin-top: 5%;
  }
}

@media (max-width: 480px) {
  #navtoggle {
    z-index: 1;
  }
}

@media (max-width: 480px) {
  nav {
    background: linear-gradient(rgba(0,0,0,0.82) -1%, rgba(0,0,0,0.84) 100%), rgba(0,0,0,0);
  }
}

.btn {
  --bs-primary-rgb: 49,179,219;
  border-style: solid;
  border-color: #31b3db;
  border-radius: 54px;
}

.btn:hover {
  --bs-primary-rgb: 49,179,219;
  border-style: solid;
  border-color: #31b3db;
  border-radius: 54px;
  background-color: #31b3db;
}