/*#region VARIABLES */
/*link - https://fonts.google.com/specimen/Covered+By+Your+Grace?query=cov&sidebar.open=true&selection.family=Covered+By+Your+Grace|Dancing+Script|Roboto|Shadows+Into+Light*/
/* rgb(214, 215, 216) */
/* rgb(14, 38, 38); */
/* rgb(28, 63, 63) 25; */
/* an = #A58F7C; rgb(165, 143, 124) 65; */
/* rgb(165, 143, 124) */
/* rgb(89, 61, 51) 35; */
/*rgb(166, 73, 79)*/
/*#region GLOBAL STYLES */
:root {
  color-scheme: light dark;
}

* {
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  font-size: 18px;
  letter-spacing: 0.075em;
  font-family: "Shadows Into Light", cursive;
}

.logo-container {
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  padding: 3px 5px;
  background-color: #0e2626;
  align-self: center;
  text-decoration: none;
}
.logo-container .material-icons {
  font-size: 1.4rem;
  vertical-align: middle;
}
.logo-container .logo-mountain {
  margin-left: -1rem;
}
.logo-container .logo-text {
  font-family: "Dancing Script", cursive;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Dancing Script", cursive;
}

form .required-text {
  color: tomato;
  font-weight: 700;
  font-size: 0.8rem;
}
form .required-asterisk {
  color: tomato;
}
form .form-note {
  font-size: 0.85rem;
  font-weight: 600;
}
form label {
  display: block;
  font-weight: 600;
}

img {
  width: 50%;
}

button {
  display: block;
  padding: 0.5rem 1.25rem;
  border: 3px ridge;
  text-transform: uppercase;
  border-radius: 35px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  letter-spacing: 0.075em;
  background-color: #A6494F;
  color: #ffffff;
  cursor: pointer;
  margin: auto;
}

a:hover {
  opacity: 55%;
}

.btn-light {
  background-color: #ffffff;
  color: #A6494F;
}

.no-go, .dummy-link {
  cursor: not-allowed;
}

.social-link img {
  width: 20px;
}

.card-divider {
  text-align: center;
  margin: 1.15rem auto;
}
.card-divider .material-icons {
  font-size: 36px;
}

/*#endregion*/
/* #region NAV */
nav {
  padding: 0.5rem 1rem;
  background-color: rgba(14, 38, 38, 0.7);
  color: #D6D7D8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 55;
}
nav .nav-links {
  display: none;
}
nav .nav-links.mobile-links {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
nav .nav-links.mobile-links a {
  align-items: center;
  text-align: center;
  padding: 8px 0;
}
nav .nav-links.mobile-links a ~ .nav-link {
  padding: 0 0 8px;
}
nav a {
  color: #D6D7D8;
  text-decoration: none;
  font-weight: 600;
}
nav a:hover {
  opacity: 0.7;
}
nav a.nav-active {
  color: #3DA691;
  font-weight: 500;
}

/* #endregion */
header {
  position: relative;
  min-height: 500px;
  background-color: #a58f7c;
  background-image: url("../images/Hikers-on-W-trek.jpg");
  background-size: cover;
  background-position: center;
  padding: 18vh 16px 16px;
  color: #ffffff;
}
header h1 {
  font-size: 2.75em;
  font-family: "Covered By Your Grace", cursive;
  font-weight: 800;
}
header .tag-line {
  font-weight: 800;
  margin-left: 2.3rem;
}
header h1, header .tag-line {
  text-shadow: 2px -0.5px #000000;
}
header .sign-cta {
  width: 40%;
  border: 3px solid;
  border-radius: 35px;
  padding: 1.3rem;
  margin: 1.25rem 0.75rem;
  text-align: center;
  background-color: rgba(166, 73, 79, 0.6);
}
header .sign-cta h2 {
  font-size: 2.15rem;
  margin-bottom: 0.8rem;
}
header .sign-cta .cta-content {
  font-weight: 600;
  margin-bottom: 1.15rem;
}
header .address-social {
  text-align: center;
}

main {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 25% 75%);
}
main #sidebar {
  background-color: #593D33;
  color: #ffffff;
  padding: 1.5rem;
  text-align: center;
  font-size: 16px;
}
main #sidebar button ~ h3 {
  margin-top: 1.5rem;
}
main #sidebar a {
  color: #ffffff;
}
main #sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
main #sidebar ul li {
  margin-bottom: 0.5rem;
}
main #sidebar .note {
  font-weight: 600;
}
main #sidebar .material-icons {
  vertical-align: text-bottom;
  margin-right: 0.5rem;
}
main #sidebar .logo-container {
  margin-left: auto;
  margin-right: auto;
}
main #sidebar .logo-container .material-icons {
  margin-right: 0;
}
main #sidebar .sb-detail {
  border: 2px solid;
  border-radius: 35px;
  margin-bottom: 2rem;
  padding: 0 1rem 1rem;
}
main #sidebar .sb-detail .top-10-list {
  list-style-position: inside;
  padding: 0;
}
main #sidebar .sb-detail h2 {
  padding: 1rem 0 0.5rem;
}
main #sidebar .sb-detail button {
  margin-top: 1.75rem;
}
main #sidebar .sb-detail a.link-heading {
  display: block;
  font-family: "Dancing Script", cursive;
  font-size: 1.5rem;
  margin: 1rem 0 0.5rem;
}
main #sidebar .sb-detail:last-of-type {
  margin-bottom: 0;
}
main #sidebar .where-to {
  display: grid;
  grid-template-columns: 40% auto;
  grid-template-rows: 1fr;
  justify-content: center;
  padding: 0 2.5rem;
  text-align: left;
}
main #sidebar .where-to figure img {
  width: 100%;
  border: 3px solid;
}
main #sidebar .where-to h2 {
  align-self: center;
  padding: 0 0 0 12px;
}
main #sidebar ul ~ .where-to {
  margin-top: 1.5rem;
}
main #sidebar .end-cap {
  position: sticky;
  top: 70px;
}
main #main-content {
  padding: 2.5rem;
}
main #main-content h1 {
  color: #A6494F;
  font-size: 2.75rem;
  padding: 0 0 0.75rem;
}
main #main-content .highlight-text {
  font-weight: 600;
  font-size: 1.15rem;
  color: #593D33;
}
main #main-content .sign-cta {
  background-color: #A6494F;
  color: #ffffff;
  border-radius: 35px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 1rem;
  text-align: center;
}
main #main-content .sign-cta .sign-container {
  color: #ffffff;
  border: 3px solid #ffffff;
  border-radius: 30px;
  padding: 1.5rem;
}
main #main-content .sign-cta .sign-container .cta-text {
  font-weight: 600;
  font-size: 1.3em;
  margin-bottom: 1.5rem;
}
main #main-content #hikes .hikes-content {
  margin-bottom: 3rem;
}
main #main-content .trail-cards {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 1fr;
  gap: 0 1.3rem;
  justify-content: center;
  margin: 1.5rem 0;
}
main #main-content .trail-cards .trail-card {
  background: #1C3F3F;
  color: #ffffff;
  padding: 1.5rem 2rem;
  text-align: center;
  border-radius: 35px;
}
main #main-content .trail-cards .trail-card h2 {
  margin-bottom: 8px;
}
main #main-content .trail-cards .trail-card h2 + p {
  text-align: left;
  margin-bottom: 1.15rem;
}
main #main-content .trail-cards .trail-card .highlight-text {
  color: #ffffff;
}
main #main-content .trail-cta {
  width: 70%;
  display: grid;
  grid-template-columns: 60% auto;
  justify-content: center;
  border: 3px solid #A6494F;
  border-radius: 35px;
  padding: 1.3rem;
}
main #main-content .trail-cta figure img {
  width: 100%;
}
main #main-content #rock-climbing .climb-content {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background-image: url("../images/bradley-dunn-red-jacket-rock-climber-cropped.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right;
}
main #main-content #rock-climbing .climb-content .sign-cta {
  background-color: rgba(166, 73, 79, 0.75);
  margin: 1.5rem;
  width: 35%;
}
main #main-content #rock-climbing .climb-content .sign-cta .card-close {
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0.75rem 0 0.5rem;
}
main #main-content .sign-cta, main #main-content .trail-cta, main #main-content .zipline-cta {
  margin: 1.5rem auto;
}
main #main-content #ziplining .zipline-cta {
  width: 70%;
  display: grid;
  grid-template-columns: 60% auto;
  gap: 1.3rem;
  justify-content: center;
  align-items: center;
  border: 3px solid #A6494F;
  border-radius: 35px;
  padding: 1.3rem;
}
main #main-content #ziplining .zipline-cta h2 {
  text-align: center;
  margin-bottom: 0.25rem;
}
main #main-content #ziplining .zipline-cta figure img {
  width: 100%;
}
main #main-content #ziplining .zipline-cta p {
  text-align: left;
}
main #main-content #ziplining .zipline-cta button {
  margin-top: 1.5rem;
}
main #main-content #about h2 {
  color: #A6494F;
}
main #main-content #about p {
  margin-bottom: 0.75rem;
}
main #main-content #about .about-header {
  text-align: center;
  margin-bottom: 1.3rem;
}
main #main-content #about .about-owner {
  position: relative;
  width: 75%;
  margin: 0.75rem auto 0;
}
main #main-content #about .card-divider {
  color: #1C3F3F;
}
main #main-content #about .member-img {
  height: 140px;
  overflow: hidden;
}
main #main-content #about .member-header-content h2 {
  color: #593D33;
  margin-top: 0.4rem;
}
main #main-content #about .member-header-content .team-title {
  font-weight: 700;
  color: #A6494F;
  padding-left: 0.75rem;
  margin-bottom: 0.3rem;
}
main #main-content #about .three-dots {
  font-weight: 700;
}
main #main-content #about .hidden-bio {
  display: none;
  transition: height 2s;
}
main #main-content #about .team-content {
  position: relative;
  display: flex;
  gap: 1rem;
  overflow: auto;
}
main #main-content #about .member-container {
  min-width: 250px;
  border: 3px solid #593D33;
  border-radius: 35px;
  margin: 1.5rem 0;
  padding: 1.2rem;
  background-color: #ffffff;
}
main #main-content #about .member-container figure img {
  width: 100%;
  border-radius: 30px 30px 0 0;
}
main #main-content #about .member-container .team-btn {
  margin-top: 1.5rem;
}
main #main-content #contact h1, main #main-content #contact .note, main #main-content #contact form, main #main-content #contact .required-text, main #main-content #contact .required-asterisk {
  color: #ffffff;
}
main #main-content #contact form {
  padding: 1.5rem 0 1.75rem 1.75rem;
  background-image: url("https://picsum.photos/id/118/1500/1000");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
}
main #main-content #contact form .form-content {
  width: 45%;
}
main #main-content #contact form .form-content button {
  margin-top: 1.5rem;
}
main #main-content #contact form input, main #main-content #contact form textarea {
  background: transparent;
  padding: 8px;
  border: 2px solid #ffffff;
  border-radius: 0.5rem;
  width: 100%;
  color: white;
}
main #main-content #contact .sign-cta p {
  margin-bottom: 1.5rem;
}
main #main-content .cta-none {
  display: none;
}
main .license-note {
  font-weight: 600;
  font-size: 1.4rem;
  text-align: center;
}

.page-footer {
  display: flex;
  padding: 12px;
  background-color: #1C3F3F;
  color: #ffffff;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.page-footer a {
  color: #ffffff;
}

/*#region @MEDIA*/
@media screen and (min-width: 992px) {
  nav {
    flex-direction: row;
    justify-content: space-between;
  }
  nav .menu-open {
    display: none;
  }
  nav .nav-links {
    display: block;
  }
  nav .nav-links .nav-link ~ .nav-link {
    margin-left: 0.8rem;
  }
}
@media screen and (max-width: 992px) {
  header {
    min-height: 250px;
    padding: 1vh 16px 16px;
  }
  header .sign-cta {
    width: 60%;
  }
  main {
    grid-template-columns: 100%;
  }
  main #sidebar {
    order: 2;
  }
  main #sidebar .end-cap {
    position: relative;
    top: 0;
  }
  main #main-content .trail-cta {
    width: auto;
  }
  main #main-content .trail-cards {
    grid-template-columns: 80%;
  }
  main #main-content .trail-cards .trail-card ~ .trail-card {
    margin-top: 1.5rem;
  }
  main #main-content #rock-climbing .climb-content .sign-cta {
    width: 50%;
    margin: 0;
  }
  main #main-content #ziplining .zipline-cta {
    width: 90%;
    grid-template-columns: 100%;
    gap: 0.5rem;
  }
  main #main-content #ziplining .zipline-cta .zipline-content {
    order: 2;
  }
  main #main-content #contact form {
    background-position: bottom left;
    padding-left: 0;
  }
  main #main-content #contact form .form-title, main #main-content #contact form .form-note {
    padding-left: 1.75rem;
  }
  main #main-content #contact form .form-content {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .page-footer {
    flex-direction: column;
  }
}
/*#endregion*//*# sourceMappingURL=TriHikie-styles.css.map */