@import url("https://fonts.googleapis.com/css?family=Archivo:400,600,700|Montserrat:400,500,700,800&display=swap");

:root {
  --main-brown-black: #54472d; /* all colors are from brand branding except hyperlink blue */
  --main-light-brown: #ac6200;
  --main-green: #568e14; /* from brand color doc; prev was #7baa44 in h1 tags*/
  --main-orange: #ff6000;
  --main-tan: #ffe7a2;
  --main-gray: #f4f4f4;
  --blue-link: #0000EE;
}
/*----------------- BODY/HTML  ----------- */
body,
html {
  margin: 0 auto;
  padding: 0;
  color: var(--main-brown-black);
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  max-width: 1500px;
}

/*----------------- GLOBAL HTML DEFAULT STYLES  ----------- */
a {
  color: var(--blue-link);
  text-decoration: none;
}
a:hover {
  color: rgb(51, 102, 153, 0.5);
}
em {
  color: #369;
}

h1 {
  color: var(--main-green);
  font-family: Archivo, sans-serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: bold;
  margin: 16px 0;
}

h2 {
  color: var(--main-brown-black);
  font-family: Archivo, sans-serif;
  font-size: 28px;
  line-height: 35px;
  font-weight: bold;
  margin: 16px 0;
}

h3 {
  color: var(--main-brown-black);
  font-family: Archivo, sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: bold;
  margin: 16px 0;
}

h4 {
  color: var(--main-green);
  font-family: Archivo, sans-serif;
  font-size: 22px;
  line-height: 28px;
  font-weight: bold;
  margin: 16px 0;
}

h5 {
  color: var(--main-brown-black);
  font-family: Archivo, sans-serif;
  font-size: 22px;
  line-height: 28px;
  font-weight: bold;
  margin: 16px 0;
}

h6 {
  color: var(--main-brown-black);
  font-family: Archivo, sans-serif;
  font-size: 20px;
  line-height: 26px;
  font-weight: bold;
  margin: 16px 0;
}

p {
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  line-height: 24px;
  margin: 16px 0;
  padding: 0;
}
img {
  margin: 0;
  padding: 0;
  border: none;
}

.rounded-corners {
  border-radius: 30px;
}

table {
  background-color: #fff;
  padding: 5px 5px 5px 0px;
  color: #000000;
}
th {
  padding: 5px 5px 5px 5px;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-color: #669933;
}
td {
  background-color: #fff;
  padding: 5px 5px 5px 5px;
  color: #000000;
  text-align: left;
}
label {
  font-size: 16px;
  font-family: Archivo, sans-serif;
}
small {
  display: block;
  font-size: 12px;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
.center {
  text-align: center;
}
.green-text {
  color: var(--main-green);
}
.orange-text {
  color: var(--main-orange);
}

/*--------- CONTAINER FOR EVERY PAGE (opening div tag on header.php; closing div tag on footer.php)  ----------- */
#wrap {
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}

/*------- CONTAINER FOR THE CONTENT AREA FOR EVERY PAGE - divs called index.php  ---------------  */
/* #content_wrap contains #sidebar, #main and #main_content_bottom_ad */

#content_wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
  max-width: 100vw;
}

#main,
#main_full_width {
  padding: 8px 16px;
  width: 95%;
}

#main_content_bottom_ad {
  padding: 8px 16px;
  width: 95%;
  text-align: center;
}

img.bottom_ad {
  object-fit: cover;
  max-width: 95%;
  max-height: 200px;
}

/* -------------- CUSTOM BUTTONS -------------- */
a.button-link {
  display: block;
  width: 250px;
  margin: 0 auto;
}

.register-button {
  width: 255px; /* ------was 250--------- */
  height: 50px;
  background-color: var(--main-green);
  font-size: 20px;
  color: white;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
  margin: 16px auto;
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.get-review-button {
  height: 35px;
  width: 200px;
  font-size: 18px;
  padding: 4px 12px;
  background-color: var(--main-green);
  color: white;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.register-button:hover,
.get-review-button:hover {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.8)
  );
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
}

/*---------- CONTAINER FOR THE HEADER ON EVERY PAGE (header.php)  ----------- */
#header {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  font-family: Archivo, sans-serif;
  background-color: #fff;
  padding: 10px 0px;
  margin: 0 0 8px 0;
}

#header_logo {
  margin-right: 16px;
  margin-bottom: 8px;
  width: 100%;
}

#header #header_logo img {
  max-width: 280px;
}

#header #header_links {
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* -----------  HEADER MENU LINKS (header.php)  ----------- */
#header_links a {
  color: white;
  width: 100%;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#header_links a:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
}

/* First button - Explore BAO Events - Green */
#header_links a:first-of-type {
  background-color: #4B7D12; /* was #7baa44 but made darker for accessibility */
}

#header_links a:first-of-type:hover {
  background-color: var(--main-green);
}

/* Second button - Plan Your Own - Blue */
#header_links a:nth-of-type(2) {
  background-color: #007a85; /* was #00929f but made darker for accessibility */
}
#header_links a:nth-of-type(2):hover {
  background-color: #00929f; /* made lighter upon hover */
}

/* All buttons except for first one */
#header_links a:not(:first-of-type) {
  margin-left: 0px;
  margin-top: 8px;
}

/* Last two buttons - orange */
#header_links a:last-child,
#header_links a:nth-last-child(2) {
  width: 48%;
}

#header_links a:nth-of-type(3),
#header_links a:nth-of-type(4) {
  background-color: #c74C00;  /* was var(--main-orange) but made darker for accessibility */
}

#header_links a:nth-of-type(3):hover,
#header_links a:nth-of-type(4):hover {
  background-color: var(--main-orange); /* was #a84000 but made lighter for hover*/
}
/* This is a div inside of each header link a tag, containing the img and p */
.header-button {
  display: flex;
  align-items: center;
}

.header-button img {
  border-radius: 8px 0 0 8px;
  height: 50px;
}

.header-button p {
  transform: translate(-25px, 0);
  margin: 0;
  line-height: 20px;
}

/* --------------- FOOTER STYLES ------------------------------*/

#footer {
  clear: both;
  margin: 0;
  padding: 48px 0;
  font-weight: normal;
  height: 80px;
  width: 100%;
  text-align: center;
  font-family: Archivo, sans-serif;
  font-size: 18px;
}
#footer ul {
  clear: both;
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
#footer ul li {
  margin: 5px 5px 0 5px;
  padding: 0;
}

#footer ul li span {
  display: none;
}
#footer ul li a:link,
#footer ul li a:visited,
#footer ul li a:active {
  color: var(--main-brown-black);
  text-decoration: none;
}
#footer ul li a:hover {
  color: var(--main-light-brown);
}
#footer ul .bar {
  margin: 0 0 0 10px;
}
#footer #subfooter {
  font-size: 16px;
  padding: 0;
  margin: 16px 0;
  width: 100%;
  text-align: center;
}

/* -------------------- MENU NAVBAR STYLES (menu.php / menu_bao_events.php) ---------------------------*/

#menu h2 {
  text-align: center;
  padding: 0;
  margin: 8px;
  color: var(--main-green);
  font-size: 20px;
  line-height: 24px;
}

#menu ul {
  list-style: none;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
}

.menu-button {
  width: 45%;
  margin: 12px 12px 0 0;
  padding: 8px 0;
  border: 1px solid #bfbfbf;
  border-radius: 8px;
  background: linear-gradient(to bottom, #ffffff, #dadada);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--main-brown-black);
}
#menu li.selected,
#menu a.selected {
  background: var(--main-green);
  color: #fff;
}

#menu a:hover {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.8)
  );
  color: #fff;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
}

/* ---------------------- VIDEO IFRAME Class Container  ----------- */

.responsive-container {
  position: relative;
  height: 0;
  margin: 0 auto;
  padding-bottom: 53.25%;
  padding-top: 30px;
  overflow: hidden;
}

.responsive-container,
.responsive-container iframe {
  max-width: 1280px;
  max-height: 720px;
}

.responsive-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ------------------- BAO GROUP EVENTS / PLAN YOUR OWN / DYNAMIC PAGES - Event Button Categories with Images  ------------- */

.event-buttons,
#top_grid {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}

#top_grid h2 {
  width: 100%;
  margin-bottom: 24px;
  color: var(--main-orange);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.event-button {
  width: 100%;
  min-width: 250px;
  max-width: 350px;
  border: 1px solid black;
  margin: 16px auto;
  border-radius: 8px;
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.5);
}

.box {
  width: 100%;
  min-width: 250px;
  margin-bottom: 40px;
  text-align: center;
}

.box img {
  object-fit: contain;
  width: 100%;
  min-width: 250px;
  max-width: 350px;
}

.event-button:hover,
.box:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
}

.event-button > a {
  color: var(--main-brown-black);
}

.event-button > a:hover {
  color: var(--main-light-brown);
}

.event-button img {
  object-fit: cover;
  width: 100%;
  border-radius: 10px 10px 0 0;
  height: 200px;
}

.event-button p {
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
}

ul.event-list {
  list-style-type: none;
  padding-inline-start: 0px;
}

.event-list p {
  line-height: 24px;
  margin-bottom: 16px;
  margin-top: 5px;
}

/* --------- BAO event category pages (e.g. bao-hikes.php) ------------------*/

.bao-event-page-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.bao-event-page-header > img {
  width: 100%;
  height: auto;
  min-height: 200px;
  object-fit: cover;
}

.bao-event-page-header > h1 {
  position: absolute;
  text-align: center;
  color: white;
  margin: 0;
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 30px;
}

.bao-event-title {
  border-top: 1px solid var(--main-brown-black);
  border-bottom: 1px solid var(--main-brown-black);
  padding: 12px 0;
}
.bao-event-image {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  margin: 8px auto;
  border-radius: 10px;
}

/* ---------------- Sponsors/Partners section on Event pages, etc. -------------- */
h3.sponsor-headline {
  color: var(--main-orange);
  text-align: center;
  margin-top: 24px;
}

.about-sponsor-logos,
.sponsor-logos {
  display: flex;
  flex-flow: column wrap;
}

.logo {
  display: flex;
  flex-direction: column;
  width: 95%;
  margin: 24px auto;
  text-align: center;
}

.logo p {
  font-weight: bold;
  font-size: 12px;
  width: 75%;
  margin: 0 auto;
  line-height: unset;
}

.logo img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  -o-object-fit: contain;
  border: none;
  margin: 0 auto;
}	

/* --------- Jump to section links (e.g. travel-registration.php) ------------------*/

.jump-to-section-container {
  text-align: center;
  display: flex;
  flex-flow: column wrap;
}

.jump-to-section a {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
}

/* ----------------- STAFF BIOs on ABOUT US Page ----------------- */
.staff-bio img {
  width: 100%;
  margin: 16px 0;
}

/*------------------ DYNAMIC PAGES -------------------- */
/* These styles need to be reviewed. */

p.message {
  color: var(--main-green);
  font-weight: bold;
  font-family: Montserrat, sans-serif;
}

.status {
  clear: both;
  margin: 10px 0 10px 0;
  padding: 4px 4px 4px 10px;
  color: #555;
  font-size: 14px;
  font-weight: bold;
  background-color: #ffe7a2;
  border: 1px solid var(--main-green);
}
.error_message {
  clear: both;
  margin: 10px 0 10px 0;
  padding: 4px 4px 4px 10px;
  color: red;
  font-size: 14px;
  font-weight: bold;
  background-color: #ffe7a2;
  border: 1px solid #669933;
}
span.highlight {
  font-weight: bold;
  text-transform: uppercase;
}
span.superscript {
  vertical-align: top;
  font-size: xx-small;
  font-weight: normal;
  text-transform: uppercase;
}
.clr {
  clear: both;
  margin: 0;
  padding: 0;
}

/*------------------- FORM ELEMENTS ----------------------- */

form > h3 {
  font-size: 20px;
  line-height: 24px;
}
.form_field {
  width: 100%;
  padding: 5px 10px 5px 0;
  margin: 0;
}

.form_field .left_col {
  padding: 0 10px 0 0;
  margin: 0;
  width: 100%;
}
.form_field .right_col {
  padding: 0 5px 0 0px;
  margin: 0;
  width: 100%;
}
.input,
.input_select {
  margin: 0;
  padding: 8px;
  border: 1px solid #cbcbcb;
  background-color: #fff;
  font-size: 16px;
  font-weight: normal;
}
.input {
  min-width: 250px;
  width: 50%;
}

textarea {
  margin: 0;
  padding: 8px;
  width: 300px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #cbcbcb;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: normal;
}

.input:hover,
.input_select:hover,
textarea:hover {
  border: 1px solid #669933;
  background: #f4f4f4;
}

.button {
  width: 250px;
  height: 40px;
  background-color: var(--main-green);
  font-size: 18px;
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  margin: 8px auto;
  padding: 8px 24px;
  border-radius: 10px; /* rounds the edges of the photo */
  cursor: pointer;
}

.button:hover {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.8)
  );
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
}

.form_field_inline {
  float: left;
  padding: 5px 10px 5px 0;
  margin: 0;
  width: 90px;
  font-family: Montserrat;
}

.form_holder {
  margin: 0;
  padding: 20px 0 20px 30px;
}
span.form_human_color {
  color: blue;
  font-weight: bold;
}
.form_human_box {
  float: left;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  background-color: blue;
  border: 2px solid #fff;
  cursor: pointer;
}
.form_human_box_1 {
  background-color: green;
}
.form_human_box_2 {
  background-color: yellow;
}
.form_human_box_selected {
  border-color: black;
}

/* ------- NEW STYLES FOR FORM CHECKBOXES & RADIO BUTTONS ---------------- */

.checkbox_container,
.radio_container {
  margin: 8px 0;
}

.checkbox_container > input[type="checkbox"],
.radio_container > input[type="radio"] {
  opacity: 0;
  position: absolute;
}

.checkbox_container label,
.radio_container label {
  position: relative;
  display: inline-block;
  padding-left: 34px;
}

.checkbox_container label {
  line-height: 24px;
}

.radio_container label,
.checkbox_container > .accept_terms {
  line-height: 30px;
}

.checkbox_container label::before,
.checkbox_container label::after,
.radio_container label::before,
.radio_container label::after {
  content: "";
  display: inline-block;
  position: absolute;
}

.checkbox_container label::before,
.radio_container label::before {
  height: 22px;
  width: 22px;
  border: 1px solid #cbcbcb;
  left: 0px;
  top: 3px;
}

.checkbox_container label::before {
  border-radius: 3px;
}

.radio_container label::before {
  border-radius: 12px;
}

.checkbox_container label::after {
  height: 4px;
  width: 10px;
  border-left: 2px solid var(--main-green);
  border-bottom: 2px solid var(--main-green);
  transform: rotate(-45deg);
  top: 10px;
  left: 6px;
}

.radio_container label::after {
  height: 18px;
  width: 18px;
  border-radius: 12px;
  background-color: var(--main-green);
  opacity: 70%;
  left: 3px;
  top: 6px;
}

.checkbox_container input[type="checkbox"] + label::after,
.radio_container input[type="radio"] + label::after {
  content: none;
}

.checkbox_container input[type="checkbox"]:checked + label::after,
.radio_container input[type="radio"]:checked + label::after {
  content: "";
}

.checkbox_container input[type="checkbox"]:hover + label::before,
.checkbox_container input[type="checkbox"]:focus + label::before {
  outline: var(--main-green) auto 3px;
  background-color: var(--main-gray);
}

.radio_container input[type="radio"]:hover + label::before,
.radio_container input[type="radio"]:focus + label::before {
  border: 1px solid var(--main-green);
  background-color: var(--main-gray);
}

/*------------ STYLE FOR ELEMENTS IN HOME (home.php) --------------------- */

/* #home_text is the headline and subhead on the homepage */

#home_banner img {
  height: auto;
  width: 100%;
}

#home_text {
  text-align: center;
  width: 90%;
  margin: 16px auto 0 auto;
}

#home_text h1 {
  font-size: 24px;
  line-height: 30px;
}

#home_text h2 {
  font-size: 16px;
  line-height: 22px;
}

/* Home buttons are the main category buttons on the home page (i.e. Explore BAO Events, Plan Your Own, Join for Free) */

#home_buttons {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#home_buttons a {
  text-decoration: none;
  color: var(--main-brown-black);
}

.home_button {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #555;
  margin-top: 20px;
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.5);
}

.home_button:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
}

.home_button_title {
  padding: 0 12px 0 0;
  border-radius: 8px 8px 0px 0px;
  display: flex;
  align-items: center;
}

.home_button_title p {
  font-size: 18px;
  color: white;
  font-weight: 600;
  letter-spacing: 1px;
}

.home_button_title img {
  border-radius: 8px 0px 0px 0px;
}

.home_button_content {
  padding: 32px;
  color: var(--main-brown-black);
}

.home_button_content:hover {
  color: var(--main-light-brown);
}

.home_button_title.blue {
  background-color: #00929f;
}

.home_button_title.green {
  background-color: #568e14;
}

.home_button_title.orange {
  background-color: #ff6000;
}

/* Homepage - Featured Activities Container */

#featured_activities_container {
  margin-top: 32px;
}

#featured_activities_container > h1 {
  text-align: center;
  width: 90%;
  margin: 16px auto;
  font-size: 24px;
  line-height: 30px;
}

.featured_activity {
  padding: 16px 0;
  border-bottom: 1px solid var(--main-brown-black);
  display: flex;
  flex-flow: column wrap;
}

.featured_activity > img {
  width: 100%;
  border-radius: 10px;
}

#featured_activities_container h2 {
  font-size: 16px;
  line-height: 22px;
}

.learn_more {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}

/*---------------------------- PHOTO GALLERY NEW STYLES -------------------  */

#photo-gallery h1 {
  text-align: center;
}

.timeline-container {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.timeline-container > .row {
  width: 100%;
  position: relative;
  padding-bottom: 12px;
}

.row h4 {
  width: 100%;
  text-align: center;
  color: var(--main-orange);
  font-style: italic;
}

.row h4,
.row h5 {
  margin-top: 0;
  margin-bottom: 12px;
}

.back-button img {
  display: inline-block;
  width: 30px;
  vertical-align: middle;
  margin-right: 8px;
}

.back-button p {
  display: inline-block;
  width: 100px;
  vertical-align: middle;
  font-weight: bold;
  color: var(--main-brown-black);
  text-transform: uppercase;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
}

.back-button:hover {
  border: 2px solid var(--main-brown-black);
  border-radius: 5px;
  background-color: var(--main-gray);
}

.select-year-button {
  background-color: var(--main-gray);
  color: var(--main-green);
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  width: 60px;
  height: 40px;
  padding: 4px;
  margin: 0 4px 8px 4px;
  border: 2px solid var(--main-green);
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}

.select-year-button:hover {
  background-color: var(--main-green);
  color: #fff;
}

.album-title {
  margin-top: 0;
}

.timeline-container > .photobox {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 16px 0;
  width: 100%;
}

.timeline-container h3 {
  margin: 8px 0;
}

.timeline-container img.img-responsive {
  max-width: 280px;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top center;
  border-radius: 5px;
}

.timeline-container img.img-responsive:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
}

/* -------Sidebar Left - Both Dynamic and Static pages  ---------------- */

#sidebar {
  background: #f8f8f8;
  width: 100%;
  margin: 8px;
  padding: 16px;
  font-family: Archivo, sans-serif;
}

#sidebar_top {
  background-color: var(--main-orange);
  width: 100%;
  margin-bottom: 10px;
  padding: 4px 0;
}

#sidebar .dropdown {
  width: 185px;
  margin: 4px 16px;
  padding: 2px;
  overflow: visible;
  font-family: Archivo, sans-serif;
}

#sidebar .sidebar_category {
  padding: 8px 0;
  font-family: Archivo, sans-serif;
}

#sidebar h2 {
  margin: 0;
  padding: 4px 8px;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* background: url("../images/sidebar/menu_top_bg.jpg") no-repeat top left; */
}

#sidebar h2.selected {
  background-color: #669933;
  color: #fff;
}

#sidebar h2 a:link,
#sidebar h2 a:visited,
#sidebar h2 a:active {
  color: #4e402a;
  text-decoration: none;
}
#sidebar h2.selected a:link,
#sidebar h2.selected a:visited,
#sidebar h2.selected a:active {
  color: #fff;
  text-decoration: none;
}

#sidebar ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  /* font-size: 14px; */
}

#sidebar ul li {
  margin: 0;
  padding: 8px 12px; /* was 4px 12 px but increased spacing for mobile */
}

@media (min-width: 768px) {
  #sidebar {
    margin: 8px 0;
    padding: 16px 4px;
  }

  #sidebar_top {
    display: flex;
    justify-content: center;
  }

  #sidebar .sidebar_categories_container {
    display: flex;
    flex-flow: row wrap;
  }

  #sidebar .sidebar_categories_container .sidebar_category {
    width: 20%;
    min-width: 140px;
  }

  #sidebar h2 {
    padding: 4px;
    font-size: 14px;
  }

  #sidebar ul li {
    padding: 4px;
    font-size: 14px;
  }
}

@media (min-width: 1000px) {
  #sidebar {
    margin: 8px;
    padding: 16px;
  }

  #sidebar_top {
    display: block;
  }

  #sidebar .sidebar_categories_container {
    display: block;
  }

  #sidebar .sidebar_categories_container .sidebar_category {
    width: 100%;
  }

  #sidebar h2 {
    padding: 10px 8px; /* was 4px 8px */
    font-size: 16px;
  }
  #sidebar ul li {    
    padding: 10px 12px; /* was 8px 12px */
  }
}

#sidebar ul li.image {
  margin: 0;
  padding: 5px 5px 5px 0px;
  font-weight: bold;
}
#sidebar ul li a:link,
#sidebar ul li a:visited,
#sidebar ul li a:active {
  color: #4e402a;
  font-weight: normal;
  text-decoration: none;
}
#sidebar ul li a:hover {
  text-decoration: underline;
}
#sidebar ul li.selected a:link,
#sidebar ul li.selected a:visited,
#sidebar ul li.selected a:active {
  color: #669933;
  font-weight: bold;
}

#sidebar .heading {
  margin: 0;
  padding: 5px 0 5px 15px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}

#sidebar .heading a {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
}

/* ----------------------------- This is for the list of months in sidebar_left */

#sidebar_left_months {
  width: 100%;
  text-align: center;
}

.months {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

.months h3 {
  width: 100%;
  font-size: 20px;
  letter-spacing: 1px;
}

.months a {
  display: block;
  width: 48%;
  font-size: 14px;
  padding-top: 8px;
  letter-spacing: 1px;
  color: var(--main-brown-black);
}

.months a:hover {
  font-weight: 600;
  color: var(--main-green);
}

/* --------------------------------- other sidebar styles */

#sidebar #sidebar_ad_box {
  width: 155px;
  /* margin: 20px 0 0 15px !important; */
  padding: 0;
  text-align: center;
  overflow: hidden;
}
#sidebar #sidebar_ad_box ul {
  width: 155px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidebar #sidebar_ad_box ul li {
  margin: 0;
  padding-bottom: 10px;
}

#sidebar #sidebar_buttons {
  float: left;
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
  font-size: 14px;
}
#sidebar #sidebar_buttons ul {
  clear: left;
  float: left;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
#sidebar #sidebar_buttons ul li {
  margin: 0;
  padding: 4px 5px 4px 12px;
  font-weight: normal;
}

#sidebar #sidebar_member_login {
  margin: 10px 0 0 12px;
  padding: 10px;
  width: 140px;
  text-align: center;
  background-color: #ffffff;
  border: #ff5f00 solid 1px;
}
#sidebar #sidebar_member_login .heading {
  color: #4e402a;
  font-size: 14px;
  margin: 0 0 10px 0;
  padding: 0;
}
#sidebar #sidebar_member_login label {
  color: #4e402a;
  font-size: 11px;
  margin: 0;
  padding: 0;
}
#sidebar #sidebar_member_login input {
  color: #4e402a;
  width: 125px;
  height: 20px;
  border: #e3e3e3 solid 2px;
  margin: 0;
  padding: 0;
}
#sidebar #sidebar_member_login #sidebar_member_login_button {
  background: url("../images/sidebar/log_in.png") no-repeat top left;
  width: 94px;
  height: 29px;
  border: none;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  margin: 10px 0 0 0;
}
#sidebar #sidebar_member_login a:link,
#sidebar #sidebar_member_login a:visited,
#sidebar #sidebar_member_login a:active {
  color: #4e402a;
  font-weight: normal;
  text-decoration: none;
  font-size: 15px;
}

/*----------------  DYNAMIC PAGES - activity_list.php ----------- */
#activity_list .activity {
  margin-bottom: 12px;
}

#activity_list .activity .name {
  padding: 12px;
  background-color: var(--main-tan);
  color: #555;
  font-weight: bold;
  border-radius: 3px;
}
#activity_list .activity .description {
  margin: 0;
  padding: 8px 12px;
}

#activity_list .activity .more {
  margin: 0;
  padding: 8px 12px;
  font-size: 16px;
  text-align: right;
}
#activity_list .activity .more a {
  color: var(--main-green);
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}

/* -------------- DYNAMIC PAGES - activity_detail.php -------------- */

#activity_topbar {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
#activity_avg_rating {
  margin-left: 16px;
  width: 110px;
  text-align: right;
  font-size: 0.7em;
  color: var(--main-green);
  font-weight: bold;
}

#social_media_buttons {
  margin-left: 16px;
  width: 110px;
  text-align: right;
}
#social_media_buttons .social_button {
  margin-left: 8px;
}

#activity_detail .description,
#activity_detail .info {
  padding: 12px 0;
}

#activity_detail .info img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 10px;
  object-fit: cover;
  margin: 16px auto;
}

#activity_detail .info h2 {
  margin: 8px 0;
  font-size: 20px;
}

#activity_detail .info p {
  margin: 0;
  line-height: 28px;
}

#activity_detail .comments {
  padding: 12px 0;
}

#activity_detail .comments .title .text,
#activity_detail .comments .title .links {
  margin: 8px 0;
}

#activity_detail .comments .comment .rating {
  width: 150px;
  margin: 16px 4px;
}

#activity_detail .comments .comment .content {
  min-width: 280px;
  width: 50%;
  margin: 16px 4px;
}

#activity_detail .comments .comment .user {
  width: 150px;
  margin: 16px 4px;
}

/* ---------- DYNAMIC PAGES -- activity_review.php -------- */

#activity_detail .comments .comment_full {
  margin: 0;
  padding: 16px 0;
  font-family: Montserrat, sans-serif;
  color: var(--main-brown-black);
  border-bottom: var(--main-brown-black) solid 1px;
}

#activity_detail .comments .comment_full p {
  margin: 0;
}

#activity_detail .comments .comment_full img {
  margin-top: 16px;
  margin-right: 16px;
}

#activity_detail .comments .comment_full p span {
  font-family: Montserrat, sans-serif !important;
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* -------------- RESPONSIVE MEDIA QUERIES -------------------------  */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

@media (min-width: 380px) {
  .months a {
    width: 33%;
  }
}

/* ------------------------------------------------------------------ */
/* ---------- MEDIA QUERIES FOR TABLET ---------- */
/* ------------------------------------------------------------------ */

@media (min-width: 560px) {
  /* Menu buttons (menu.php menu_bao_events.php) */
  .menu-button {
    width: 30%;
    padding: 8px 0;
    font-size: 16px;
  }

  /* Footer (footer.php)  */
  #footer ul li {
    display: inline;
  }

  #footer ul li span {
    display: inline;
  }
}

@media (min-width: 600px) {
  /* Header (header.php)  */
  #header {
    margin: 0 24px;
  }

  #header #header_logo img {
    max-width: 400px;
  }

  #header_links a {
    width: 48%;
    height: 60px;
  }

  #header_links a:not(:first-of-type) {
    margin-top: 0;
  }

  #header_links a:last-child,
  #header_links a:nth-last-child(2) {
    margin-top: 16px;
  }

  .header-button img {
    height: 60px;
  }
}

@media (min-width: 768px) {
  /* Tablet styles for category buttons */

  .event-buttons,
  #top_grid {
    flex-flow: row wrap;
    justify-content: space-between;
    margin-bottom: 32px;
  }

  .event-button,
  .box {
    width: 48%;
  }

  /* Tablet styles for sidebar_left.php -> months */
  .months a {
    width: 16%;
  }

  /* Tablet styles for Form fields */
  .form_field {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .form_field .left_col {
    width: 32%;
    max-width: 350px;
  }
  .form_field .right_col {
    width: 66%;
    max-width: 700px;
  }

  /* Tablet styles for BAO Group Events page  */
  .bao-event-page-header > img {
    min-height: unset;
  }

  /* Tablet styles for Sponsor logos section across the site  */
  .sponsor-logos {
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }

  .about-sponsor-logos {
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
  }

  .logo {
    max-width: 40%;
    min-width: 30%;
    margin: 28px 18px;
  }

  .logo p {
    text-align: left;
  }

  /* Tablet styles for Jump links across the site (e.g. travel-registration)  */
  .jump-to-section-container {
    flex-flow: row wrap;
    justify-content: space-evenly;
    margin-bottom: 16px;
  }

  .jump-to-section {
    width: 30%;
    margin: 0 8px;
  }

  small {
    font-size: 14px;
  }

  /* Tablet styles for Homepage (home.php) - Main buttons */
  #home_buttons {
    margin: 24px;
  }

  .home_button {
    width: 48%;
  }

  .home_button:last-of-type {
    width: 100%;
  }

  /* Tablet styles for Homepage (home.php) - Featured Activities Section */
  #featured_activities_container {
    margin: 48px 24px;
  }

  .featured_activity {
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .featured_activity > img {
    width: 40%;
    object-fit: cover;
    margin-top: 16px;
  }

  .featured_activity_details {
    width: 56%;
    text-align: left;
  }

  #featured_activities_container h1,
  #home_text h1 {
    font-size: 32px;
    line-height: 38px;
  }

  #featured_activities_container h2,
  #home_text h2 {
    font-size: 24px;
    line-height: 30px;
  }

  /* Tablet styles for Staff bios on about us page  */
  .staff-bio img {
    width: 25%;
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    margin: 0 16px 16px 0;
    float: left;
  }

  /* Tablet styles for photo gallery section */
  .timeline-container {
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-around;
  }

  .timeline-container > .photobox {
    width: 50%;
  }

  .back-button {
    position: absolute;
    left: 0;
    top: 25%;
    width: 150px;
  }

  .select-year-container {
    width: 75%;
    margin: 0 auto;
  }

  .select-year-button {
    font-size: 20px;
    width: 80px;
    margin: 0 8px 8px 8px;
  }

  /* Tablet styles for image on activity_detail.php pages  */
  #activity_detail .info img {
    width: 75%;
    max-width: unset;
    max-height: 300px;
  }
}
/* end of media query for min-width 768px*/

/* ------------------------------------------------------------------ */
/* ---------- MEDIA QUERIES FOR DESKTOP ---------- */
/* ------------------------------------------------------------------ */

@media (min-width: 1000px) {
  /* Main layouts (index.php) */
  #content_wrap {
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: stretch;
  }

  #main {
    padding: 16px 20px;
    width: 68%;
    margin: 0;
  }

  #main_full_width {
    width: 100%;
    padding: 16px;
    margin: 0 auto;
  }

  /* sidebar_left.php */
  #sidebar {
    width: 22%;
    padding-left: 32px;
    padding-bottom: 64px;
    margin-left: 0;
    margin-right: 0;
  }

  #sidebar_left_months {
    text-align: left;
  }

  .months {
    flex-flow: column nowrap;
    justify-content: flex-start;
  }

  .months h3 {
    margin-bottom: 16px;
    line-height: 32px;
  }

  .months a {
    font-size: 22px;
    padding-top: 12px;
    width: unset;
  }

  /* Header (header.php) */
  #header_links a,
  #header_links a:not(:first-of-type),
  #header_links a:last-child,
  #header_links a:nth-last-child(2) {
    width: 23%;
    margin: 0 8px;
  }

  #header_links a:last-child,
  #header_links a:nth-last-child(2) {
    margin-top: 0;
  }

  /* Menu Buttons (menu.php and menu-bao-events.php) */
  .menu-buttons {
    margin-top: 0;
  }

  #menu h2 {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 0;
  }

  /* Category buttons (bao-group-events.php, plan-your-own.php) */

  .event-buttons {
    justify-content: space-evenly;
  }

  .event-button {
    width: 28%;
    min-width: 250px;
    margin: 0 8px 32px 8px;
  }

  #top_grid {
    justify-content: flex-start;
  }

  .box {
    width: 28%;
    min-width: unset;
    margin: 0 8px 32px 8px;
  }

  .box img {
    min-width: unset;
  }

  /* BAO Event Category pages (e.g. bao-hikes) */
  .bao-event-page-header > h1 {
    font-size: 40px;
    letter-spacing: 2px;
  }

  .bao-event-page-header > img {
    object-fit: contain;
    border-radius: 10px;
  }

  /* Sponsor logos section across the site  */
  h3.sponsor-headline {
    text-align: left;
  }
  .sponsor-logos {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .logo {
    max-width: 30%;
    margin: 28px 16px;
  }

  .logo img {
    max-height: 170px;
  }

  /* Desktop styles photo gallery  */
  .timeline-container > .photobox {
    margin: 16px 8px;
    width: 30%;
  }

  .timeline-container img.img-responsive {
    max-width: unset;
  }
}
/* End of media query for min-width 1000 */

@media (min-width: 1100px) {
  /* Homepage (home.php) */
  .home_button {
    width: 32%;
  }
  .home_button:last-of-type {
    width: 32%;
  }

  .featured_activity {
    padding: 24px 0;
  }

  .featured_activity > img {
    max-height: 300px;
  }

  .menu-button {
    width: 15%;
    font-size: 18px;
  }
}
/* End of media query for min-width 1100 */

/* ------------------------------------------------------------------ */
/* ----------------- MEDIA QUERIES LARGE DESKTOP --------------------- */
/* ------------------------------------------------------------------ */

@media (min-width: 1350px) {
  /* Full width pages */
  /* .main_full_width {
    width: 85%;
    padding: 16px 24px;
    margin: 0 auto;
  } */

  /* Header (header.php) */
  #header {
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 16px;
  }

  #header #header_logo {
    width: 32%;
    margin-bottom: 0;
  }

  #header #header_links {
    width: 66%;
  }

  /* home.php featured activities section */
  .featured_activity > img {
    width: 40%;
    max-height: 500px;
    margin: 16px auto;
  }

  .featured_activity_details {
    width: 40%;
    margin: 0 auto 0 0;
  }

  /* Photo gallery section */
  .timeline-container img.img-responsive {
    height: 250px;
    max-width: unset;
  }
}

/* ------------------------------------- CALENDAR PICKER STYLES */
/* .dpDiv {
} */

/* the table (within the div) that holds the date picker calendar */
.dpTable {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  color: #505050;
  background-color: #fff;
  border: 1px solid #669933;
}

/* a table row that holds date numbers (either blank or 1-31) */
/* .dpTR {
} */
/* the top table row that holds the month, year, and forward/backward buttons */
/* .dpTitleTR {
} */

/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
/* .dpDayTR {
} */

/* the bottom table row, that has the "This Month" and "Close" buttons */
/* .dpTodayButtonTR {
} */

/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
  border: 1px solid #fff;
}

/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
  background-color: #ff5f01;
  border: 1px solid #aaaaaa;
}

/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
  background-color: #ff5f01;
  border: 1px solid #888888;
  cursor: pointer;
  color: white;
}

/* the table cell that holds the name of the month and the year */
.dpTitleTD {
  font-weight: bold;
}

/* a table cell that holds one of the forward/backward buttons */
/* .dpButtonTD {
} */

/* the table cell that holds the "This Month" or "Close" button at the bottom */
/* .dpTodayButtonTD {
} */

/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
  background-color: #669933;
  border: 1px solid #aaaaaa;
  color: #fff;
}

/* additional style information for the text that indicates the month and year */
.dpTitleText {
  font-size: 12px;
  color: #669933;
  font-weight: bold;
}

/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlight {
  color: white;
  font-weight: bold;
}

/* the forward/backward buttons at the top */
.dpButton {
  font-size: 9px;
  color: white;
  background: #669933;
  font-weight: normal;
  padding: 0px;
}

/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
  font-size: 12px;
  color: white;
  background: #669933;
  font-weight: normal;
  padding: 0px;
}

a.joinbutton {
  text-decoration: none !important;
  padding: 15px;
  text-align: center;
  background: #669933;
  border: solid 2px white;
  border-radius: 5px;
  color: white !important;
  margin-left: 20%;
  margin-bottom: 10%;
}

#plan-your-own,
#group-event {
  padding: 30px;
}