/* Navigation Bar */

.nav-wrapper {
  height: 152.4px;
}

.nav-container {
  position: fixed;
  top: 0;
  background: white;
  width: 100%;
  height: 100px;
  z-index: 3;
}

.logo {
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 10px;
  height: 80px;
}

/* WHEN ADDING NEW LOGO change school-name left to 90px (instead of 10px) */
.school-name {
  position: absolute;
  top: 10px;
  left: 90px;
  height: 80px;
  padding: 5px 15px;
}

@media only screen and (max-width: 499px) {
  .school-name {
    width: 220px;
    object-fit: contain;
  }
}

.navbar-top {
  font-family: var(--font-family-body);
}

.navbar-top .button {
  position: absolute;
  top: 10px;
  right: 10px;
}

.navbar-top .email a {
  position: absolute;
  top: 70px;
  right: 150px;
  color: #555;
  text-decoration: none;
  font-size: 14px;
}

.navbar-top .phone a {
  position: absolute;
  top: 70px;
  right: 20px;
  color: #555;
  text-decoration: none;
  font-size: 14px;
}

.navbar-bottom {
  position: absolute;
  top: 100px;
  background: var(--color-green);
  color: white;
  width: 100%;
}


#navbar a {
  text-decoration: none;
  padding: 16px 22px;
  font-size: 18px;
  display: block;
  float: left;
  text-align: left;
  font-weight: 600;
  color: white;
  background: var(--color-green);
  font-family: var(--font-family-body);
}

.dropdown {
  float: left;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  transition: none;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 16px 22px;
  font-size: 18px;
  font-weight: 600;
  background: var(--color-green);
  font-family: var(--font-family-body);
}

.dropdown-content {
  position: absolute;
  background: var(--color-green);
  box-shadow: 5px 5px 10px #666;
}

#navbar .dropdown-content a {
  float: none;
  display: block;
  color: white;
  padding: 16px 22px;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-family-body);
}

#navbar a:hover, 
.dropdown:hover .dropbtn,
.dropdown-content a:hover,
#navbar a.active,
.dropdown-content a.active {
  color: white;
  background: #7C9D30;
}

#navbar a.active,
#navbar button.active,
.dropdown-content a.active {
  color: white;
  background: #55730F;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#navbar #icon {
  display: none;
  background: rgba(0,0,0,0);
}
/* SCREEN WIDTH FOR NAVBAR TO SWITCH TO SIDEBARS */
@media only screen and (max-width: 850px) {
  .navbar-top-contact {display: none;}
  #navbar a, .dropdown .dropbtn {display: none;}
  #navbar #icon {
    display: block;
    float: right;
  }
  #navbar.responsive {
    position: absolute;
    top: 100px;
    left: 0;
    background-color: var(--color-green);
  }
  #navbar.responsive #icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 28px;
    padding: 10px 22px;
  }
  #navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
    padding: 16px 22px;
  }
  #navbar.responsive .dropdown {
    float: none;
  }
  #navbar.responsive .dropdown.hide {
    visibility: hidden;
  }
  #navbar.responsive .dropdown .dropdown-content {
    position: absolute;
    display: block;
    box-shadow: none;
    width: 0;
    opacity: 0;
    right: 0;
    top: 0;
    transition: 0.5s;
  }
  #navbar.responsive .dropdown .dropbtn:hover,
  #navbar.responsive .dropdown .dropdown-content .backbtn:hover {
    cursor: pointer;
  }
  #navbar.responsive .dropdown .expanded {
    width: 100%;
    opacity: 1;
  }
  #navbar.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 16px 22px;
  }
}

/* When a phone is in landscape mode, allow navbar to scroll with everything else on the page. Max-height is 4x the height of the navbar. Anything less than that and in landscape mode should trigger this change. */
@media screen and (max-height: 600px) and (orientation: landscape) {
  .nav-container {position: static;}
}

.rotate {
  animation: rotation 120s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}