/* https://magazine.joomla.org/all-issues/february-2022/joomla-4-cassiopeia-template-a-bunch-of-tips-tricks */
/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */
@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');
/* Use the imported font on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */
body {
    font-family: 'Georama', sans-serif;
}
:root {
    --cassiopeia-color-primary: rgba(35,35,35, .8);
    /*--cassiopeia-color-link: green;*/
    --cassiopeia-color-hover: rgba(75,75,75, .8);
    --link-color: black;
    --link-color-rgb: 34, 79, 170;
    --link-decoration: underline;
    --link-hover-color: green;
    --link-hover-color-rgb: 66, 64, 119;
    --body-bg: #ededed;
    --body-bg-rgb: 237, 237, 237;
    --body-font-size: 1.1rem;
    --body-font-weight: 900;
    --body-line-height: 1.5;
    --body-color: #22262a;
    --body-color-rgb: 34, 38, 42;
}
.colors1 {
    --website-color-primary: 37, 143, 167;
    --website-color-hover: 242, 48, 48;
    --cassiopeia-color-primary: rgba(var(--website-color-primary),0.5);
    --cassiopeia-color-hover: rgb(var(--website-color-hover));
    --cassiopeia-color-link: rgb(var(--website-color-primary));
}
footer div.mod-footer {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
@media (min-width: 768px) {
    footer div.mod-footer {
      flex-direction: row;
    }
}
  

@media (width <= 767.98px) {
  --body-color: #22262a;
  --body-color-rgb: 34, 38, 42;
  .table-responsive-md {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
}

@supports (display: grid) {
    .site-grid {
        grid-template-areas:
          ". banner banner banner banner ."
          ". top-a top-a top-a top-a ."
          ". top-b top-b top-b top-b ."
          ". comp comp comp comp ."
          ". side-r side-r side-r side-r ."
          ". side-l side-l side-l side-l ."
          ". bot-a bot-a bot-a bot-a ."
          ". bot-b bot-b bot-b bot-b .";
    }
    @media (min-width: 992px) {
        .site-grid {
            grid-template-areas:
              ". banner banner banner banner ."
              ". top-a top-a top-a top-a ."
              ". top-b top-b top-b top-b ."
              ". side-l comp comp side-r ."
              ". bot-a bot-a bot-a bot-a ."
              ". bot-b bot-b bot-b bot-b ."
        }
    }
}



/* CLASSIC BANNER */
.container-banner .banner-overlay .overlay {
    background-image: linear-gradient(120deg, rgba(231, 48, 42, 0.7), rgba(234, 174, 2, 0.7));
}




/* VIDEO BANNER - see https://codepen.io/woluweb/pen/rNGROZj */
div.video-banner {
    display: grid;
    grid-template-areas: "hero";
    place-items: center;
    height: max(300px, calc(100vh - 152px)); /* viewport height minus the fixed height of menu header on current website, with a minimum of X pixels */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}
div.video-banner > * {
    grid-area: hero; /* stacking all the child elements of the grid - could simply have set 1 / 1 / 2 / 2 instead of naming the area hero */
}
div.video-banner div.text {
    z-index: 1; /* to be sure that this is on top of the video */
    text-align: center;
    color: white;
    text-shadow: 2px 2px 5px black;
}
div.video-banner div.overlay {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, var(--cassiopeia-color-link), var(--cassiopeia-color-hover));
    opacity: 0.7;
}
div.video-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}