:root {
  font-size: 1em;
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

html {
  --navbar-charcoal: hsl(200, 4%, 17%);
  --navbar-charcoal-med: hsl(200, 4%, 35%);
  --light-charcoal: hsl(200, 4%, 60%);
  --white-green: hsl(73, 32%, 91%);
  --pale-green: hsl(73, 32%, 87%);
  --light-green: hsl(73, 91%, 60%);
  --strong-green: hsl(62 95% 34%);
  --dark-green: hsl(73, 91%, 15%);
  --med-green: hsl(76, 66%, 19%);
  --dark-grey: hsl(45, 3%, 25%);
  --light-grey: hsl(0, 0%, 87%);
  --white-grey: hsl(0, 0%, 97%);
  --white: hsl(360, 100%, 100%);
  --black: hsl(0, 0%, 0%);
  --transparent: hsla(360, 100%, 100%, 0);
}

body {
  font: normal 0.8em 'trebuchet ms', arial, sans-serif;
  background: var(--white-green);
  color: var(--navbar-charcoal-med);
  padding-top: 70px;
}

.ggs-align-top {
  vertical-align: top;
}

.ggs-float-right {
  float: right;
}

.ggs-center {
  text-align: center;
}

.ggs-bold {
  color: var(--black);
  font-weight: bolder;
}

p {
  padding: 0 0 20px 0;
  line-height: 1.7em;
}

a,
a:hover,
a,
a:hover {
  outline: none;
  text-decoration: underline;
  color: var(--strong-green);
}

.cryptedmail:after {
  content: attr(data-name) '@' attr(data-domain) '.' attr(data-tld);
}

.ggs-navbar .nav-item > .nav-link {
  color: var(--white);
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 0rem 1rem 1rem 1rem;
  text-transform: uppercase;
}

.ggs-navbar-container {
  width: 520px;
}

.ggs-navbar .nav-item > .nav-link:hover {
  background: var(--navbar-charcoal-med);
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--white);
  padding: 0rem 1rem 1rem 1rem;
  height: 110%;
}

.ggs-navbar-nav {
  margin-left: -25px;
  margin-top: -40px;
}

.ggslogo_text {
  width: 100vw;
  text-align: center;
  margin-top: -10px;
  padding-bottom: 10px;
}

.ggslogo_text h1,
.ggslogo_text h1 a,
.ggslogo_text h1 a:hover {
  padding: 8px 0 0 0;
  margin: 15px 0 0 -50px;
  color: var(--white);
  letter-spacing: 0.1em;
  text-decoration: none;
  font-size: 1.625rem;
  transform: scale(1, 2);
}

.ggslogo_text h1 a .logo_colour {
  color: var(--light-green);
}

.ggslogo_text h2 {
  font-size: 0.75rem;
  padding: 4px 0 0 0;
  color: var(--light-grey);
  margin-left: -3px;
  position: absolute;
  left: 120px;
  top: 132px;
}

.ggslogo-text-collapse {
  display: none;
}

.ggs-navbar-brand-collapse {
  display: none;
}

.ggs-navbar-toggler {
  position: relative;
  left: 380px;
  top: -50px;
}

.ggs-navbar-brand {
  width: 100px;
  height: 150px;
  padding: 0;
}

.ggs-site-content {
  margin: 125px auto 0 auto;
}

.ggs-site-content h1 {
  text-align: center;
  text-transform: uppercase;
}

.ggs-content {
  flex: 0 0 630px;
  background: var(--white) url(../img/content-left.png) repeat-y;
  padding: 20px 24px 20px 37px;
}

.ggs-content h1 {
  font: normal 175% 'century gothic', arial, sans-serif;
  font-weight: bold;
  color: var(--med-green);
  padding: 15px 0 5px 0;
  transform: scale(1, 1);
}

.ggs-content h2 {
  font: normal 150% 'century gothic', arial, sans-serif;
  font-weight: 550;
  color: var(--med-green);
  padding: 15px 0 5px 0;
  transform: scale(1, 1);
}

.ggs-content h3 {
  font: normal 125% 'century gothic', arial, sans-serif;
  font-weight: 450;
  color: var(--med-green);
  padding: 15px 0 5px 0;
  transform: scale(1, 1);
}

.ggs-content h4 {
  font: normal 115% 'century gothic', arial, sans-serif;
  font-weight: 400;
  color: var(--med-green);
  padding: 15px 0 5px 0;
  transform: scale(1, 1);
}

.ggs-content a {
  margin: 0 0 0 0;
}

.ggs-content table {
  border-collapse: separate;
  text-indent: initial;
  border-spacing: 2px;
  border-collapse: collapse;
}

.ggs-content table th {
  color: var(--light-green);
  background-color: var(--navbar-charcoal);
}

.ggs-content table tr td {
  background: var(--pale-green);
  color: var(--dark-grey);
  border-top: 1px solid var(--white);
  height: auto;
}

.ggs-content td {
  vertical-align: text-top;
  text-align: left;
  padding: 5px 5px 0 5px;
}

.ggs-content table a {
  margin: 0 0;
  color: var(--strong-green);
}

.ggs-content table td p {
  margin: 0 5px;
  padding: 0;
}

/* .ggs-content *+* {
  margin-left: 30px;
} */

.ggs-content img {
  margin-bottom: 10px;
}

.ggs-content li {
  padding: 0 0 7px 0;
  margin-left: 0;
}

.ggs-side-content {
  flex: 0 0 220px;
  background: var(--white) url(../img/content-right.png) repeat-y;
  padding: 20px 20px 0 0;
}

.ggs-meeting-body {
  background-color: var(--white-grey);
  text-align: center;
  height: 297px;
}

.ggs-outings-body {
  background-color: var(--white-grey);
  text-align: center;
  height: 347px;
}

.ggs-side-content h3 {
  font: bold 145% 'century gothic', arial, sans-serif;
  color: var(--dark-grey);
  padding: 10px 0px 5px 0;
  margin-bottom: 0;
}

.ggs-side-content h4 {
  font: 600 100% 'century gothic', arial, sans-serif;
  color: var(--navbar-charcoal);
  padding: 6px 0 0 0;
}

.ggs-side-content h5,
.ggs-side-content h6,
.ggs-footer h5 {
  font: italic 800 95% arial, sans-serif;
  text-decoration: none;
  padding: 0 0 0px 0;
  color: var(--black);
}

.ggs-side-content h6 {
  font: 750 95% 'century gothic', arial, sans-serif;
  color: var(--navbar-charcoal-med);
  padding: 6px 0 0 0;
}

.ggs-side-content li {
  list-style: none;
  padding: 0 0 7px 0;
}

.ggs-side-content li a,
.ggs-side-content li a:hover {
  padding: 0 0 0 40px;
  display: block;
  background: transparent url(../img/linkIcon.png) no-repeat left center;
}

.ggs-links li {
  margin-left: -40px;
}

.ggs-side-tbl-scroll {
  height: 125px;
  width: 95%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  margin: 0 auto;
  background-color: var(--light-grey);
}

.ggs-side-tbl-scroll > .ggs-side-tbl {
  width: 100%;
}

.ggs-side-tbl {
  /* font-family: "Inter", sans-serif; */
  border-collapse: collapse;
  font-size: 10px;
}

.ggs-side-tbl th {
  background-color: var(--strong-green);
  color: aliceblue;
  text-align: center;
  position: sticky;
  /* text-indent: 10px; */
  top: 0;
  z-index: 99;
}

.ggs-side-tbl th,
.ggs-side-tbl td {
  padding: 3px 4px;
  /* font-weight: normal; */
  /* text-align: left; */
}

.ggs-side-tbl tr {
  scroll-snap-align: start;
}

.ggs-side-tbl tbody tr:nth-of-type(even) {
  background-color: var(--white-green);
}

.ggs-side-tbl tbody tr td:nth-child(2) {
  width: 40px;
}

#outingscal .ggs-side-tbl tbody tr td:nth-child(2) {
  width: 45%;
}

.ggs-side-tbl .selected {
  /* background-image: linear-gradient(rgb(0 0 0/7%) 0 0); */
  color: var(--black);
}

.ggs-side-tbl .selected img {
  max-height: 100%;
  width: auto;
  float: right;
}

.ggs-side-tbl thead tr th:first-child,
.ggs-side-tbl tbody tr td:first-child {
  display: none;
}
/* Radio Buttons https://www.sliderrevolution.com/resources/styling-radio-buttons */
.rb {
  padding: 16px 0px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.3em;
}

.rb-tab {
  position: relative;
  width: 20%;
}

.rb-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.5em;
  color: var(--transparent);
}

.rb-spot {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 2px solid var(--light-charcoal);
  border-radius: 100%;
  cursor: pointer;
  transition: ease 0.5s;
}

.left-margin3 {
  margin: 0 0 0 3px;
}

.rb-sel {
  position: relative;
  left: 12px;
  display: none;
  background: url('../img/Selected.png');
  background-repeat: no-repeat;
  width: 28px;
  height: 14px;
}

.rb-tab-active .rb-txt {
  color: var(--strong-green);
}

.rb-tab-active .rb-spot {
  background: var(--transparent);
  border: 2px solid var(--strong-green);
}

.rb-tab-active .rb-sel {
  display: block;
}

.ggs-outings-body .rb-tab {
  width: 50%;
}

.ggs-outings-body .rb-spot {
  left: 8%;
}

.ggs-outings-body .ggs-calendar-item h4 a {
  color: var(--strong-green);
}

.ggs-outings-body .ggs-calendar-item h4 span:nth-child(1) {
  font: 800 115% 'century gothic', arial, sans-serif;
}

.ggs-outings-body .ggs-calendar-item h4 span:nth-child(2) {
  display: inline-block;
  margin-top: 8px;
}

.rb-date {
  position: relative;
  left: 10px;
}

.ggs-event-title {
  vertical-align: top;
  font-weight: bold;
}

/* Footer */
.ggs-footer h5 {
  color: var(--navbar-charcoal-med);
}

.light-100 {
  border-top: 1px solid var(--light-grey);
  width: 100%;
  margin-top: 0.8rem;
  margin-bottom: 1rem;
}

/* BreadCrumb Styles taken from https://bbbootstrap.com/snippets/dark-breadcrumb-arrow-and-buttons-11471662# */

#breadcrumbs {
  font-size: 1rem;
  background-color: var(--navbar-charcoal);
  border-top-right-radius: 200px !important;
  border-bottom-right-radius: 200px !important;
  border-top-left-radius: 200px !important;
  border-bottom-left-radius: 200px !important;
  margin-top: -23px !important;
  margin-bottom: 7px !important;
  /* height: 25px; */
}

.breadcrumb > li + li:before {
  content: '' !important;
}

.breadcrumb {
  padding: 19px;
  font-size: 14px;
  /* color: #aaa !important; */
  color: var(--light-grey) !important;
  letter-spacing: 2px;
  border-radius: 5px !important;
}

.first-1 {
  background-color: white !important;
}

#breadcrumbs > li > a {
  text-decoration: underline;
  color: var(--white) !important;
}

#breadcrumbs > li > a:hover {
  background: var(--navbar-charcoal-med);
  text-decoration: none;
  /* font-weight: bold;
  letter-spacing: 0.1em; */
  color: var(--white);
  padding: 0rem 0rem 1rem 0rem;
  height: 110%;
}

a:focus,
a:active {
  outline: none !important;
  box-shadow: none !important;
}

img {
  vertical-align: bottom;
}

.first span {
  color: var(--white);
}

.active-1 {
  font-size: 1rem !important;
  padding-bottom: 12px !important;
  padding-top: 12px !important;
  padding-right: 25px !important;
  padding-left: 25px !important;
  border-radius: 200px !important;
  background-color: var(--pale-green) !important;
  /* height: 15px; */
}

.first ol li a.active-1 span {
  color: var(--med-green);
}

.test-colour {
  color: var(--navbar-charcoal-med) !important;
}

#breadcrumbs .text-colour-last {
  color: var(--navbar-charcoal-med) !important;
  text-decoration: none;
}

.ggs-breadcrumb-empty {
  display: none;
}

/* SMALL DEVICES  768px */

@media (max-width: 768px) {
  /* :root {
  font-size: calc(0.5em + 4vw);
}
 */
  .ggs-navbar-brand {
    width: 50px;
    height: 75px;
    padding: 0;
    margin-left: -75px;
    display: none;
  }

  .ggs-navbar-brand-collapse {
    width: 225px;
    height: 75px;
    padding: 0;
    margin: -4px 0 0 -225px;
    display: inline;
  }

  .ggslogo_text h1,
  .ggslogo_text h2,
  .ggslogo_text h1 a,
  .ggslogo_text h1 a:hover {
    display: none;
  }

  .ggslogo-text-collapse h1 {
    padding: 8px 0 0 0;
    margin: 25px 0 0 -50px;
    color: var(--white);
    letter-spacing: 0.1em;
    text-decoration: none;
    font-size: 1rem;
    transform: scale(1, 2);
  }

  .ggslogo-text-collapse h2 {
    font-size: 0.5rem;
    padding: 4px 0 0 0;
    color: var(--light-grey);
    margin: 10px 0 0 -45px;
  }

  .ggslogo-text {
    width: 80vw;
    text-align: center;
    margin-top: -10px;
    padding-bottom: 10px;
    display: none;
  }

  .ggslogo-text-collapse h1 .logo_colour {
    color: var(--light-green);
  }

  .ggs-navbar-toggler {
    left: 390px;
    top: -10px;
    z-index: 999;
  }

  .ggslogo-text-collapse {
    display: inline;
    width: 80vw;
    text-align: center;
    padding-bottom: 10px;
    position: relative;
    top: -100px;
    left: 0;
  }

  #site_content {
    width: 100vw;
    overflow: hidden;
    margin: 85px auto 0 auto;
    padding: 20px 24px 20px 37px;
  }

  .ggs-content {
    flex: 0 0 100vw;
    background: var(--white) url(../img/content-left.png) repeat-y;
    padding: 20px 24px 20px 37px;
    margin-left: -10px;
  }

  img {
    max-width: 86vw;
    object-fit: cover;
  }

  .ggs-side-content {
    flex: 0 0 100vw;
    background: var(--white) url(../img/content-right.png) repeat-y;
  }

  /* .ggs-side-tbl-scroll {
    height: 125px;
    width: 95%; 
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    margin: 0 auto;
    background-color: var(--light-grey);
  } */

  .ggs-side-tbl-scroll {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    margin: auto;
  }

  .rb-img {
    position: relative;
    /* left: 12px; */
    left: -30px;
    display: none;
  }

  .ggs-news-content hr {
    margin-left: 0px;
  }

  .ggs-news-content .ggs-outings-body {
    margin-left: 0px;
  }

  .ggs-news-content .ggs-outings-body .rb-date {
    margin-left: 0px;
  }

  .ggs-outings-body .rb-tab {
    margin-left: 0px;
    width: 50%;
  }

  .ggs-outings-body .rb-spot {
    left: 8%;
  }

  #breadcrumbs > li > a {
    font-size: 0.55rem !important;
  }

  #breadcrumbs {
    font-size: 0.7rem;
    margin-top: -31px !important;
    margin-bottom: 4px !important;
    border-top-left-radius: 100px !important;
    border-bottom-left-radius: 100px !important;
    border-top-right-radius: 100px !important;
    border-bottom-right-radius: 100px !important;
  }

  .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    margin-left: -0.5rem;
  }

  #breadcrumbs > Li > img {
    width: 11px;
    height: 11px;
    vertical-align: middle;
    margin-left: 5px;
  }

  .active-1 {
    font-size: 10px !important;
    padding: 4px 4px !important;
    width: 100% !important;
  }

  .breadcrumb {
    padding: 7px;
    letter-spacing: 0.75px !important;
  }

  .breadcrumb > * div {
    max-width: 60px;
  }
}

@media (max-width: 900px) {
  .ggs-content {
    flex: 0 0 100vw;
    background: var(--white) url(content-full.png) repeat-y;
    padding: 20px 24px 20px 37px;
  }

  .ggs-side-content {
    flex: 0 0 100vw;
    background: var(--white) url(content-full.png) repeat-y;
  }

  .ggs-news-content * + * {
    margin-left: 50px;
  }

  .ggs-side-content h3 {
    margin-left: 50px;
  }

  .ggs-links ul {
    margin-left: 50px;
  }

  .ggs-side-tbl-scroll {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    margin: auto;
  }

  .rb-img {
    position: relative;
    /* left: 12px; */
    left: -30px;
    display: none;
  }

  .ggs-news-content :is(h3, h4, h5, h6, span, hr) {
    margin-left: 0px;
  }

  .ggs-news-content .ggs-outings-body {
    margin-left: 0px;
  }

  .ggs-news-content .ggs-outings-body .rb-date {
    margin-left: 0px;
  }

  .ggs-outings-body .rb-tab {
    margin-left: 0px;
    width: 50%;
  }

  .ggs-outings-body .rb-spot {
    left: 8%;
  }
  .ggs-side-tbl-scroll {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    margin: auto;
  }

  .rb-img {
    position: relative;
    /* left: 12px; */
    left: -30px;
    display: none;
  }

  .ggs-news-content hr {
    margin-left: 0px;
  }

  .ggs-news-content .ggs-outings-body {
    margin-left: 0px;
  }

  .ggs-news-content .ggs-outings-body .rb-date {
    margin-left: 0px;
  }

  .ggs-outings-body .rb-tab {
    margin-left: 0px;
    width: 50%;
  }

  .ggs-outings-body .rb-spot {
    left: 8%;
  }
}