/* COLORS */
/* ---- PASTELS ---- */
/* ---- OTHER COLORS ---- */
nav {
  background-color: #ff6699;
}
nav .full-button-book-session {
  background-color: #003399;
  color: #fff !important;
}
nav .full-button-book-session:hover {
  background-color: #0099cc;
  color: #003399;
}
nav .full-button-donate {
  background-color: #ff0033;
  color: #fff !important;
}
nav .full-button-donate:hover {
  background-color: #fff;
  color: #003399 !important;
}
nav .full-button-shop {
  background-color: #ff6600;
  color: #fff !important;
}
nav .full-button-shop:hover {
  background-color: #fff;
  color: #003399 !important;
}
nav .full-button-members {
  background-color: #0099cc;
  color: #fff !important;
}
nav .full-button-members:hover {
  background-color: #003399;
  color: #fff;
}
nav.light-blue {
  background-color: #0099cc;
}
nav.light-blue .nav-wrapper li a {
  color: #fff;
}
nav.light-blue .nav-wrapper li a:hover {
  color: #663399;
}
nav.light-blue .full-button-book-session {
  background-color: #003399;
  color: #fff !important;
}
nav.light-blue .full-button-book-session:hover {
  background-color: #fff;
  color: #003399 !important;
}
nav.light-blue .full-button-donate {
  background-color: #ff0033;
  color: #fff !important;
}
nav.light-blue .full-button-donate:hover {
  background-color: #fff;
  color: #003399 !important;
}
nav.light-blue .full-button-members {
  background-color: #cc0066;
  color: #fff !important;
}
nav.light-blue .full-button-members:hover {
  background-color: #fff;
  color: #003399 !important;
}

nav.for-mobile {
  display: none;
}

nav.for-desktop {
  font-weight: bold;
  border-bottom: 2px #a7a7a7 solid;
  margin-bottom: 0px;
  padding: 30px 0;
}
nav.for-desktop a {
  text-decoration: none;
  color: #663399;
  box-sizing: border-box;
  padding: 6px 20px;
  border-radius: 10px;
}
nav.for-desktop a:hover {
  color: #fff;
}
nav.for-desktop ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav.for-desktop ul li {
  display: inline-block;
}
nav.for-desktop ul li .nav-logged-in-line {
  text-align: right;
  cursor: pointer;
  font-size: 14px;
  display: flex;
}
nav.for-desktop .nav-container .nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav.for-desktop .nav-container .members-nav-wrapper {
  width: 100%;
  border-radius: 16px;
  margin-top: 10px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #0099cc;
}
nav.for-desktop .nav-container .members-nav-wrapper .members-nav-title {
  flex: 0 0 12%;
  color: #fff;
  border-radius: 16px;
  background-color: #003399;
  padding: 5px 40px 5px 10px;
  margin-right: 10px;
}
nav.for-desktop .nav-container .members-nav-wrapper .members-nav {
  flex: 0 0 80%;
  width: 80%;
  justify-content: flex-start;
}
nav.for-desktop .nav-container .members-nav-wrapper .members-nav a {
  border-radius: 0;
}
nav.for-desktop .nav-container .members-nav-wrapper .members-nav a:hover {
  background-color: #003399;
  color: #fff;
}
nav.for-desktop a {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  body {
    position: relative;
  }
  nav.for-desktop {
    display: none;
  }
  nav.for-mobile {
    position: absolute;
    top: 5px;
    right: 10px;
    display: flex;
  }
  nav.for-mobile i {
    font-size: 26px;
  }
  nav.for-mobile .nav-list {
    position: absolute;
    display: none;
    top: 32px;
    right: 0px;
    list-style-type: none;
    border: 1px #003399 solid;
    padding: 0;
  }
  nav.for-mobile .nav-list li {
    background-color: #ff6699;
    border-bottom: 1px #003399 solid;
  }
  nav.for-mobile .nav-list li:last-of-type {
    border-bottom: 0;
  }
  nav.for-mobile .nav-list li .nav-logged-in-line {
    background-color: #bfe5f2;
    padding: 10px 0;
    text-align: center;
  }
  nav.for-mobile .nav-list li:has(> .nav-logged-in-line) {
    border-top: 4px #003399 solid;
  }
  nav.for-mobile .nav-list li a {
    display: inline-block;
    width: 180px;
    padding: 5px 0 5px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
  }
  nav.for-mobile .nav-list li a.full-button-blue {
    background-color: #003399;
    color: #fff;
  }
  nav.for-mobile .nav-list li a.full-button-red {
    background-color: #ff0033;
    color: #fff;
  }
  nav.for-mobile .nav-list li a.full-button-light-blue {
    background-color: #0099cc;
    color: #fff;
  }
  nav.for-mobile .nav-list li a.member-menu-item {
    background-color: #0099cc;
  }
}