.sr-only {
  display: none;
}

:root {
  --light: #f8f9fa;
  --dark: #343a40;
  --box-shadow-default: 2px 2px 10px black;
  --blur-default: blur(5px);
  --menu_background_rgba: var(--menu_background_rgb), 0.35;
  --menu_background_rgba_dark: var(--menu_background_rgb), 0.85;
  --fix-width: 950px;
}
body {
  /*display: flex;*/
  margin: 0px;
  flex-direction: column;
  flex-wrap: wrap;
  font-family: "Avenir Next", "Avenir", sans-serif;
  color: var(--text_color);
}
body .logo_header .logo_text a {
  color: var(--logo_text) !important;
}
.Primary-color {
  color: var(--primary) !important;
}
.Secondary-color {
  color: var(--secondary) !important;
}

h1 {
  color: var(--primary) !important;
}
h2,
h3,
h4 {
  color: var(--secondary) !important;
}
h2 a, h3 a, h4 a {
    color: var(--secondary) !important;
}

#page {
  margin: 0px;
  padding: 10px;
  grid-template-areas:
    "header"
    "main"
    "footer";
  gap: 15px;
  display: grid;
}

#wrapper-nav {
  flex-direction: row;
  grid-area: header;
}

#content {
  grid-area: main;
}
#wrapper-footer {
  display: flex;
  grid-area: footer;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */

  -webkit-touch-callout: none;
}
@media screen and (max-width: 699px) {
  html #wpadminbar {
    display: none;
  }
  html {
    margin-top: 0px !important;
  }
}
@media screen and (max-width: 699px) {
  #wrapper-nav {
    display: grid;
    grid-template-columns: 1fr 45px;
    grid-template-areas: "logo-nav menu-side";
    grid-gap: 0.5rem;
  }
  #wrapper-nav #logo-branding {
    grid-area: logo-nav;
  }

  #menuToggle {
    display: block;
    position: relative;
    padding-top: 6px;
    top: 0px;
    left: 0px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    grid-area: menu-side;
  }
  #menuToggle a:hover,
  #menuToggle li:hover {
    color: tomato;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: var(--menu_text);
  }

  /*
 * But let's hide the middle one.
 */
  #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
 * Ohyeah and the last one should go the other direction
 */
  #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background-color: rgba(var(--menu_background_rgba_dark));
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }
  #main-menu {
    position: absolute;
    width: 800px;
    margin: -44px 0px 0 -744px;
    padding: 30px;
    padding-top: 45px;
    /* background: #edededb8; */
    list-style-type: none;
    /* -webkit-font-smoothing: antialiased; */
    transform-origin: 0% 0%;
    transform: translate(-355%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    background-color: rgba(var(--menu_background_rgba_dark));
    backdrop-filter: var(--blur-default);
    border-radius: 25px;
    border: 1px solid #9092fc3b;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    justify-content: flex-start;
    align-items: flex-end;
  }

  #main-menu li {
    padding: 10px 0;
    font-size: 22px;
  }
  #menuToggle input:checked ~ ul {
    transform: none;
  }
  #menuToggle li ul {
    width: max-content;
    right: 1px;
    text-decoration: none;
  }
  #menuToggle li ul li {
    text-decoration: none;
    list-style: none;
  }
}
@media screen and (max-width: 470px) {
  #wrapper-nav #logo-branding {
    display: grid;
    grid-template-columns: 64px auto;
    grid-template-areas:
      "logo logotext"
      "logo logotagline";
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    justify-content: center;
    filter: drop-shadow(2px 4px 6px black) drop-shadow(-2px 0px 6px white);
  }
  #wrapper-nav #logo-branding .custom-logo-link {
    grid-area: logo;
  }
  #wrapper-nav #logo-branding .custom-logo-link img {
    height: 64px;
    width: auto;
  }
  #wrapper-nav #logo-branding .logo_text {
    grid-area: logotext;
    align-self: end;
  }
  #wrapper-nav #logo-branding .logo_tagline {
    grid-area: logotagline;
  }
  #wrapper-nav #logo-branding .custom-logo-link,
  #wrapper-nav #logo-branding .logo_text,
  #wrapper-nav #logo-branding .logo_tagline {
    margin: 0;
  }
}
@media screen and (min-width: 700px) {
  #wrapper-nav {
    display: flex;
    flex-direction: column;
  }

  #menuToggle {
    display: flex;
    padding: 10px;
  }
  #menuToggle ul {
    margin: 0px;
    display: flex;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
    unicode-bidi: isolate;
    gap: 15px;
  }

  #menuToggle {
    background-color: rgba(var(--menu_background_rgba));
    backdrop-filter: blur(10px) drop-shadow(2px 4px 3px black)
      drop-shadow(-2px -25px 1px white);
    padding: 10px;
    margin: 5px;
    border-radius: 25px;
    border: 1px solid #ffffff3b;
    filter: drop-shadow(2px 4px 4px black) drop-shadow(-2px -1px 2px white);
  }
}

#menuToggle li ul {
  position: absolute;
  background-color: rgba(var(--menu_background_rgba_dark));
  backdrop-filter: blur(10px) drop-shadow(2px 4px 3px black)
    drop-shadow(-2px -25px 1px white);
  margin: -0px 0px 0 0px;
  padding: 20px;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  transform: translate(-1300%, 0px);

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transform-origin: 0% 0%;
}
#menuToggle li:hover ul {
  transform: none;
}
#wrapper-nav {
  background-color: #ea9c001f;
  backdrop-filter: var(--blur-default);
  padding: 10px;
  border-radius: 25px;
  border: 1px solid #f8da9e3b;
  box-shadow: var(--box-shadow-default);
}

#wrapper-nav #logo-branding .logo_text a {
  color: var(--logo_text);
  text-decoration: none;
  background-color: transparent;
}
@media screen and (min-width: 471px) {
  #wrapper-nav #logo-branding {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(2px 4px 6px black) drop-shadow(-2px 0px 6px white);
    font-size: 1.2em;
  }
}
#wrapper-nav #logo-branding .logo_tagline {
  color: var(--logo_text);
}
#menuToggle ul li,
#menuToggle ul li a {
  color: var(--menu_text);
  text-decoration: none;
  background-color: transparent;
}
@media (min-width: 700px) {
  #wrapper-nav #logo-branding .logo_tagline {
    position: relative;
    left: 0;
    top: 11px;
    font-size: 0.6em;
  }

  #wrapper-nav #logo-branding {
    font-size: 2em;
  }
}
@media screen and (max-width: 699px) {
  #wrapper-nav #logo-branding .logo_tagline {
    color: var(--logo_text);
    display: inline;
    font-size: x-small;
  }
}
.container {
  max-width: var(--fix-width);
  margin: 0 auto;
  width: min(100%, var(--fix-width));
}
#wrapper-footer-full.container,
#wrapper-footer.container,
#wrapper-nav.container {
  padding: 0px;
  border: 0px;
}
@media screen and (max-width: 699px) {
  .container #menuToggle {
    padding-top: 16px;
  }
  .container #menuToggle #main-menu {
    margin: -44px 0px 0 -754px;
  }
}
#content img {
  max-width: 100%;
  height: auto;
}
#content main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
#wrapper-footer-full,
#wrapper-footer,
#content main,
#content aside {
  background-color: #ffffff79;
  backdrop-filter: var(--blur-default);
  padding: 30px;
  margin: 0 0 5px 0;
  border-radius: 25px;
  border: 1px solid #ffffff3b;
  box-shadow: var(--box-shadow-default);
}

#content aside ul {
  list-style-type: none;
  padding-inline-start: 0px;
}
#content a,
#wrapper-footer-full a,
#wrapper-footer a {
  color: var(--text_color);
  text-decoration: underline;
}

article figure {
  width: 100%;
}

article figure img {
  width: 100%;
}
article .wp-post-image {
  max-width: 640px;
}
article .tiled-gallery__gallery {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}

article h1 {
  /*text-align: center;*/
}
@media (max-width: 700px) {
  .container-fluid {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: stretch;
  }
}
@media (min-width: 700px) {
  .container-fluid {
    display: grid;

    grid-template-columns: auto 200px;
    grid-template-areas:
      "left-sidebar left-sidebar"
      "primary rightsidebar";
    column-gap: 12px;
  }

  
}
.container-fluid #left-sidebar {
  grid-area: left-sidebar;
}
.container-fluid #primary {
  grid-area: primary;
}
.container-fluid #right-sidebar {
  grid-area: rightsidebar;
}
@media (min-width: 950px) {
  .container-fluid {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "primary";
    column-gap: 12px;
  }
  .container-fluid:has( #left-sidebar):has( #right-sidebar) {
    grid-template-columns: 200px auto 200px;
    grid-template-areas: "left-sidebar primary rightsidebar";
  }
  .container-fluid:has( #right-sidebar) {
    grid-template-columns: auto 200px;
    grid-template-areas: "primary rightsidebar";
  }
  .container-fluid:has( #left-sidebar) {
    grid-template-columns: 200px auto;
    grid-template-areas: "left-sidebar primary";
  }
 
}
/*
 #wrapper-nav > * {
  border: 4px;
  border-color: rgb(255, 145, 0);
  border-style: solid;
  padding: 2px;
}


#wrapper-nav {
  border: 4px;
  border-color: red;
  border-style: solid;
  padding: 2px;
}
#wrapper-hero {
  border: 4px;
  border-color: red;
  border-style: solid;
  padding: 2px;
}
#wrapper-index {
  border: 4px;
  border-color: rgb(68, 0, 255);
  border-style: solid;
  padding: 2px;
}
#wrapper-footer-full {
  border: 4px;
  border-color: rgb(255, 0, 212);
  border-style: solid;
  padding: 2px;
}
#wrapper-footer {
  border: 4px; 
  border-color: rgb(255, 208, 0);
  border-style: solid;
  padding: 2px;
}
*/