:root {
    --olive: #556B2F;
    --green: #006400;
    --cassiopeia-color-primary:#ccc;
    --body-color-rgb: 34, 38, 42;
    --body-bg-rgb: 255, 255, 255;
    --body-font-size: 1.1rem;
    --body-font-weight: 350;
    --body-line-height: 1.7;
    --body-color: black;
    --body-bg: white;
    --link-color: var(--green);
    --link-hover-color: var(--green);
    --template-special-color: var(--green);
    --template-contrast: var(--green); 
    --btn-bg: var(--olive);
    --btn-border-color: var(--olive);
    --btn-hover-bg: var(--green);
    --btn-hover-border-color: var(--green);
    --btn-active-bg: var(--green);
    --btn-active-border-color: var(--green);   
    --btn-active-color: white;
    --menu-pill-bg: rgba(85, 107, 47, 1);
    --menu-pill-bg-hover: rgba(107, 142, 35, 1);
}

@font-face {font-family: 'Sacramento'; src: url('/media/fonts/Sacramento-Regular.woff') format('woff');}
@font-face {font-family: 'Amatic'; src: url('/media/fonts/AmaticSC-Regular.woff') format('woff');}

.container-topbar a:hover {color: var(--olive) !important;}

.btn-info {background-color: var(--olive);}

/* Menu inside mod-info */
.mod-info .nav {display: flex !important; flex-direction: row !important; flex-wrap: nowrap;}   
.mod-info ul.nav > li > a, .apple-maps-link, .google-maps-link {
  background-color: rgba(85, 107, 47, 1); /* #556B2F */
  color: #fff;
  padding: 0.4em 0.8em;
  border-radius: 999px; /* pill shape */
  display: inline-block;
  margin: 0.2em;
  text-decoration: none;
}

/* Hover and active states */
.mod-info ul.nav > li > a:hover,
.mod-info ul.nav > li.active > a {
  background-color: rgba(107, 142, 35, 1); /* OliveDrab, a lighter hover */
  color: #fff;
}

.xcontainer-header nav a:hover,
.xcontainer-header nav .active > a {
  background-color: var(--menu-pill-bg-hover);
}



.google-maps-link, .apple-maps-link {list-style: none;}
.fa-apple a, .fa-google a {font-family: Helvetica; font-size: 14px; color: white; text-decoration: none;}
.fa-apple  a:after {content: "Apple Maps" ; padding-left: 5px;}
.fa-google a:after {content: "Google Maps"; padding-left: 5px;}
.fields-container li {display: inline-flex; flex-wrap: nowrap; flex-direction: row !important; xpadding: 0 0 0 20px;}

.mod-info .navbar {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
    justify-content: space-around;
    }
    
.mod-info .navbar-toggler {
    display: none !important; /* Hides the hamburger menu */
    }

.metismenu-item>a {background-color: transparent !important; color:black !important;}
.tcv_geolink > a {text-decoration: none; }
.pagination {margin-bottom: 60px !important;}
a.next .icon-chevron-right {display: none;}
a.previous .icon-chevron-left {display: none;}
a.previous {position: absolute; right: 0;}
a.next {position: absolute; left: 0;}
a.previous::after {content: " >"; font-weight: normal; font-size: 18px;}
a.next::before {content: "< "; font-weight: normal; font-size: 18px;}

html {background-color: lightgray;}
header, body, footer {background-color: #fff !important; background-image: none !important;}
body.site {max-width: 1200px; margin: 0px auto !important;}
.grid-child, .navbar-brand {margin: 0 !important; padding: 0 !important;}
main {margin: 2em 2em;}

h1, h2, h3 {font-size: 32px; font-weight: bold; font-family:Amatic,Helvetica; letter-spacing: 2.5px;}
h3 {font-size: 24px;}
.tcv-banner p {color: var(--green); font-size: 48px; font-family:Amatic,Helvetica; text-align:center; letter-spacing: 7px;margin:15px 0;}
.tcv-banner a, div.page-header > h2 > a {text-decoration: none !important; color:var(--green); font-weight: bold;}

.icon-calendar .icon-fw {display: none;}

dl.article-info.text-muted dd.create span.icon-calendar.icon-fw {display: none;}
dl.article-info.text-muted dd.create time {font-family:Amatic,Helvetica; color: var(--olive); font-weight: bold; text-transform: capitalize; letter-spacing: 2px;}

p.readmore a.btn.btn-secondary {margin:0;padding:0;background-color:transparent;border:0; font-size: 0.75em; }
p.readmore a.btn.btn-secondary:hover {background-color:transparent;}
p.readmore a.btn.btn-secondary .icon-chevron-right {display: none;}

.footer a {text-decoration: none;}

@media (max-width:480px)
    { 
    main        {margin: 10px !important;}
    .mod-info li a {font-size: 0.9rem;}
    .tcv-banner p {font-size: 32px;}
    a.previous, a.next {width: 40%; background-color: var(--olive;)}
    }