:root {
    --bs-info: #73a4ae;
    --bs-success: #9a73ae;
    --bs-danger: #ae7c73;
    --bs-primary: #5d814b;
    --tg-block-bg: rgba(93, 129, 75, 0.8); /*rgba(69, 89, 59,0.8);*/
    --tg-dark-bg: rgb(69, 89, 59);
}

#content.adjust-for-nav {
    padding-top:75px;
}

#mainNav {
    background-color: var(--tg-dark-bg);
    color: var(--bs-white);
}
#mainNav .navbar-nav .nav-item .nav-link.active {
    font-weight: bold;
}

#mainNav .navbar-brand,
#mainNav .navbar-nav .nav-item .nav-link {
    padding: 10px 15px;
}
#mainNav .navbar-brand,
#mainNav .navbar-nav .nav-item .nav-link,
#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-toggler {
    color: var(--bs-white);
}

#mainNav .navbar-toggler {float: right;}

#mainNav .socialicon a {
    padding-top: 0;
    padding-bottom: 2px;
}
@media(max-width:1199px) {
    #mainNav .socialicon a {
        padding-top: 2px;
        padding-bottom: 2px;
    }
}
@media(max-width:767px) {
    #mainNav .socialicon a {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

header {
    padding: 5rem 0;
    text-align: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
}
header h1 {
    color: #fff;
    background-color: var(--tg-block-bg);
    padding: 1rem 0;
    margin: 0 50px;
    text-align: center;
}

header.masthead {
  padding-top: 10.5rem;
  padding-bottom: 6rem;
  text-align: center;
  color: #fff;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  height: 100vh;
  position: relative
}
header.masthead .masthead-subheading {
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.4em;
  margin-bottom: 25px;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: var(--bs-white);
  background-color: var(--tg-block-bg);
  padding: 20px;
}
header.masthead .masthead-heading {
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 3.25rem;
  margin-bottom: 2rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
header.masthead a.normal {
  color: var(--bs-white);
  background-color: transparent;
  text-decoration: none;
}
header.masthead .masthead-text {
  color: var(--bs-white);
  background-color: var(--tg-block-bg);
  padding: 20px;
}
header.masthead .masthead-text p {
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 768px) {
  header.masthead {
    padding-top: 10rem;
    padding-bottom: 12.5rem;
  }
  header.masthead .masthead-subheading {
    font-size: 2.25rem;
    font-style: italic;
    line-height: 1.4em;
    margin-bottom: 2rem;
  }
  header.masthead .masthead-heading {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 4.5rem;
    margin-bottom: 4rem;
  }
}

/* Position the scroll indicator at the bottom center */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    text-decoration: none;
}

/* Mouse outline */
.mouse {
    width: 28px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 20px;
    position: relative;
    margin: 0 auto 10px;
}

/* The scroll wheel / dot */
.mouse-wheel {
    width: 4px;
    height: 10px;
    background: #fff;
    border-radius: 2px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-animation 0.75s infinite alternate;
}

/* Animation keyframes */
@keyframes scroll-animation {
    to {
        transform: translate(-50%, 8px) scale(1, 0.8);
        opacity: 0.7;
    }
}

.scroll-indicator p {
    font-size: 12px;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.breadcrumb li.breadcrumb-item.active { color: var(--bs-light); }
.breadcrumb li a { color: var(--bs-light); }
.breadcrumb-item+.breadcrumb-item::before { color: var(--bs-light); }


.bg-primary {
    background-color: var(--tg-block-bg) !important;
}
.btn-primary {
    --bs-btn-bg: var(--tg-block-bg);
    --bs-btn-border-color: var(--tg-dark-bg);
}

footer {
    background-color: var(--tg-dark-bg);
    padding: 50px;
    margin-top: 50px;
    color: #bed3b3;
}
footer a { color: #bed3b3; }

a.normal { text-decoration: none; color: inherit; }

.youtube-container, .calendar-container {
    position: relative;
    margin-bottom: 10px;
}
.youtube-container { padding-bottom: 56.25%; }  /* 16:9 */
.calendar-container { padding-bottom: 75%; }    /* 4:3 */
.youtube-container iframe, .calendar-container iframe {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%
    ; border: 0 
}

li p { margin-bottom: 0; }


/* The rest is from Umbraco back-office Default Style sheet so can be replaced whenever Umbraco update it */
.umb-block-grid__layout-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, min-content);
    -moz-column-gap: var(--umb-block-grid--column-gap, 0);
    column-gap: var(--umb-block-grid--column-gap, 0);
    row-gap: var(--umb-block-grid--row-gap, 0);
}

.umb-block-grid__layout-item {
    position: relative;
    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
    grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
    grid-row: span var(--umb-block-grid--item-row-span, 1);
    padding: 0 20px;
}


.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, min-content);
    -moz-column-gap: var(--umb-block-grid--areas-column-gap, 0);
    column-gap: var(--umb-block-grid--areas-column-gap, 0);
    row-gap: var(--umb-block-grid--areas-row-gap, 0);
}

.umb-block-grid__area {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
    grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns));
    grid-row: span var(--umb-block-grid--area-row-span, 1);
}

@media (min-width:1024px) {
    .umb-block-grid__layout-item {
        grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
    }

    .umb-block-grid__area {
        grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns));
    }
}