/* ------------------------------------------------------------------------------------------
                                          START: AVF Styling

      1 - Variables
      2 - Essentials
      3 - Bootstrap overwrites
      4 - Bootstrap extensions
      5 - Volta My-Env overwrites
      6 - Animations & special effects
      7 - User CSS modifications (Mobile First)

    ------------------------------------------------------------------------------------------
  */


  /* ------------------------------------------------------------------------------------------
                                              1 - Variables
    ------------------------------------------------------------------------------------------
  */

  *,
  :root {
    --background-color: white;
    --text-color: #0F0F0F;
    --text-color-hover: #F0F0F0;
    --link-text-color: var(--bs-dark);
    --bs-font-sans-serif: Montserrat;
    --bs-body-font-family: Montserrat;
    --bs-body-bg: var(--bs-light);
    --bs-btn-font-family: Outfit !important;
    --header-font-family: Outfit;
    --bs-body-color: #432c07;
    --header-font-color: #432c07;
    --bs-primary: #0079fe;
    --bs-primary-rgb: 0, 121, 254;
    --bs-secondary: #FFFAE7;
    --bs-secondary-rgb: 151, 185, 255;
    --bs-white: #FFFFFF;
    --bs-light: #FFFAE7;
    --bs-light-rgb: 255, 250, 231;
    --bs-highlight-color: #E0FE00;
    --bs-primary-bg-subtle: #97B9FF;
    --bs-primary-bg-subtle-rgb: 151, 185, 255;
    --bs-primary-bg-subtle-opacity: 0.15;
    --bs-dark: #001eac;
    --bs-dark-rgb: 0, 30, 172;
    --bs-tertiary-bg-rgb: 19, 51, 110;
    --bs-navbar-color: var(--bs-body-color);
    --bs-navbar-link-color: var(--bs-body-color);
    --bs-nav-link-font-size: 0.9rem;
    --bs-nav-link-hover-color: #000000;
    --bs-nav-link-hover-bg-color: #FFFFFF;
    --bs-navbar-padding-x: 1rem !important;
    --bs-navbar-nav-link-padding-x: 0.75rem;
    --bs-navbar-toggler-focus-width: 0px;
    --bs-dropdown-font-size: 0.9rem;
    --bs-dropdown-bg: var(--bs-light) !important;
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-light);
    --bs-dropdown-link-hover-bg: var(--bs-primary);
    --bs-dropdown-link-active-bg: #001129;
    --bs-dropdown-padding-y: 0 !important;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-border-width: 0px;
    --bs-box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
    --bs-border-color: #432c07;
    --bs-border-radius: 0;
    --bs-table-bg: #f2f2f2;
    --bs-btn-hover-color: var(--bs-primary) !important;
    --bs-btn-hover-bg: #dae0e5 !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
    

    scroll-margin-top: 225px;
  }


  /* ------------------------------------------------------------------------------------------
                                              2 - Essentials
    ------------------------------------------------------------------------------------------
  */

  :root {
    touch-action: pan-x pan-y;
    height: 100%;
  }

  html {
    scroll-behavior: smooth;
  }

  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6 {
    font-family: var(--header-font-family);
    font-weight: 700;
  }

  .outfit-400 {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }


  /* ------------------------------------------------------------------------------------------
                                              3 - Bootstrap overwrites
    ------------------------------------------------------------------------------------------
  */

  /*
    .btn-primary,
    .my-env .btn-primary,
    .btn-secondary,
    .my-env .btn-secondary,
    .btn-light {
      border: 0;
      background-color: var(--bs-btn-bg);
      color: var(--bs-btn-color);
    }
  */

  .btn-primary:active,
  .btn-primary:not(:disabled):not(.disabled):active,
  .btn-primary:focus,
  .btn-primary:hover,
  .my-env .btn-primary:hover {
    background-color: var(--bs-btn-hover-bg);
  }

  .btn-secondary:active,
  .btn-secondary:not(:disabled):not(.disabled):active,
  .btn-secondary:focus,
  .btn-secondary:hover,
  .my-env .btn-secondary:hover {
    background-color: var(--bs-btn-hover-bg);
  }

  /*.btn-primary {
    --bs-btn-hover-color: var(--bs-light);
    --bs-btn-hover-bg: var(--bs-btn-hover-bg);
    --bs-btn-hover-border-color: var(--bs-primary);
  } */

  .btn-secondary {
    --bs-btn-color: var(bs-primary);
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-border-width: 3px;
  }

  .btn-light {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-border-width: 3px;
    --bs-btn-hover-bg: var(--bs-white);
  }

  .list-group-item:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }


  /* ------------------------------------------------------------------------------------------
                                              4 - Bootstrap extensions
    ------------------------------------------------------------------------------------------
  */

  .fs-7 {
    font-size: 0.85rem;
  }

  .py-6 {
    padding-block: 4.5rem;
  }

  .pt-6 {
    padding-top: 4.5rem;
  }

  .pb-6 {
    padding-bottom: 4.5rem;
  }

  .my-6 {
    margin-block: 4.5rem;
  }

  .mt-6 {
    margin-top: 4.5rem;
  }

  .mb-6 {
    margin-bottom: 4.5rem;
  }

  .mb-6 {
    margin-bottom: 4.5rem;
  }

  .py-8 {
    padding-block: 5rem;
  }

  .pt-8 {
    padding-top: 5rem;
  }

  .pb-8 {
    padding-bottom: 5rem;
  }

  .my-8 {
    margin-block: 5rem;
  }

  .mt-8 {
    margin-top: 5rem;
  }

  .mb-8 {
    margin-bottom: 5rem;
  }

  .mb-8 {
    margin-bottom: 5rem;
  }


  /* ------------------------------------------------------------------------------------------
                                              5 - Volta My-Env overwrites
    ------------------------------------------------------------------------------------------
  */

  @supports(position: sticky) {
    .my-env .sticky-top {
      z-index: 40 !important;
    }
  }

  .my-env {

    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6 {
      font-family: var(--header-font-family);
      text-transform: capitalize;
    }

    & a:hover {
      text-decoration: underline;
      text-underline-offset: .5rem;
      text-decoration-thickness: .1rem
    }
  }


  /* ------------------------------------------------------------------------------------------
                                              6 - Animations & special effects
    ------------------------------------------------------------------------------------------
  */

  .border-animation {
    position: relative;
    border: 1px solid transparent;
    border-radius: 50rem
    isolation: isolate;

    &::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: -1;
      border: inherit;
      background-image: conic-gradient(from var(--angle), #33333d 80%, #E0D1FF 88%, #E0D1FF 92%, #381D6A 100%);
      background-origin: border-box;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-clip: content-box, border-box;
      mask-clip: content-box, border-box;
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }

    &:hover::before {
      animation-play-state: paused;
    }
  }

@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

  .callout {
    /* position: relative;
    border: 2px solid var(--bs-primary);
    border-radius: 15px; */
    

    &::before {
      position: absolute;
      bottom: -40px;
      left: 22px;
      width: 0;
      height: 0;
      z-index: 2;
      content: "";
      border-left: 18px solid transparent;
      border-right: 18px solid transparent;
      border-top: 40px solid var(--bs-white);
    }

    &::after {
      position: absolute;
      bottom: -45px;
      width: 0;
      left: 20px;
      height: 0;
      z-index: 1;
      content: "";
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 45px solid var(--bs-primary);
    }
  }

  .hover-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bs-primary-bg-subtle);
    opacity: 0;
    transition: all 0.5s ease;

    &:hover {
      opacity: 0.15;
    }
  }

  .highlight {
    background: url("//s2.svgbox.net/pen-brushes.svg?ic=brush-8&color=e0fe00");
    /* --bs-highlight-color */
    margin: -2px -10px;
    padding: 2px 10px;
  }

  .skew-x-10 {
    transform: skewX(10deg);
  }

  .skew-x-n10 {
    transform: skewX(-10deg);
    margin-left: -5px;
  }

  .zoom {
    transition: all 0.3s linear;
  }

  .zoom:hover {
    transform: scale(1.05);
    transition: all 0.3s linear;
  }

  .animated {
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
  }

  .fadeInUp {
    animation-name: fadeInUp;
  }

  .fadeInDown {
    animation-name: fadeInDown;
  }

  .fadeInLeft {
    animation-name: fadeInLeft;
  }

  .fadeInRight {
    animation-name: fadeInRight;
  }

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateX(0px) translateY(20px);
    }

    100% {
      opacity: 1;
      transform: translateX(0px) translateY(0px);
    }
  }

  @keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: var(--transform, translateX(0)) translateY(-20px);
      transform: var(--transform, translateX(0)) translateY(-20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: var(--transform, translateX(0)) translateY(0px);
      transform: var(--transform, translateX(0)) translateY(0px);
      ;
    }
  }

  @keyframes fadeInRight {
    0% {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  /* Wave backgrounds on homepage */
  .wave {
    background-size:contain;
    background-repeat: no-repeat;
  }
    .testimonials {
      background-image: url("https://images.foys.io/foys/4e1e2b2c-a23d-4f7c-9cde-c9667a42c340/65bc023f-b17b-404a-b748-3c8fca3c1b0b.png"); 
      background-position:center;
    }

    .athletics {
      background-image: url("https://images.foys.io/foys/4e1e2b2c-a23d-4f7c-9cde-c9667a42c340/fdf10e7c-aa0c-45d5-abbc-fb13d75b8b96.png");
      background-position:center;
    }

  /* -----------------------------------------------------------------------------------------
                                    7 - User CSS Modifications (Mobile First)
    -----------------------------------------------------------------------------------------
  */


  /* Top announcement bar (with max height, long text will overflow) */
  .announcement-top-section {
    position: relative;
    z-index: 1050;
    background-color: var(--bs-dark) !important;

    & .container {
      overflow: hidden;

      & .announcement__text {
        height: 40px;
        display: grid;
        text-align: center;
        align-items: center;
        margin: 0;
      }
    }
  }

  /* Main & fixed header bar; toggle element colors, default & when scrolled */
  .header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--bs-light);
    box-shadow: 0px -3px 10px 3px rgba(0, 30, 172, 0.4);
    z-index: 50;

    /* --- Default colors --- */

    /* Navbar */
    & nav {
      align-items: center;
      gap: 1rem;
      width: 100%;

      @media only screen and (max-width: 992px) {
        display: block;
      }

      /* Logo color */
      & .navbar-logo svg * {
        color: var(--bs-primary);
      }

      /* Nav items (and states) */
      & .nav-item {
        text-decoration: none;

        /* Menu-links */
        & .nav-link {
          --bs-nav-link-font-size: 1rem;

          @media only screen and (max-width: 992px) {
            --bs-nav-link-font-size: 1.25rem;
          }

          font-weight: 600 !important;
        }

        /* Hover, Active link & Dropdown-item */
        &:hover:not(.dropdown.show):not(.btnCta),
        &.active-link-container:not(.navbar-logo):not(.btnCta),
        &.dropdown:has(div.active-link-container) {
          text-decoration: underline;
          text-underline-offset: .5rem;
          text-decoration-thickness: .1rem;
          text-decoration-color: var(--bs-body-color);
        }
      }

      /* CTA button (last menu option) */
      .btnCta {
        background-color: var(--bs-primary);
        border-radius: var(--bs-border-radius-pill);
        border: solid transparent 2px;

        & .nav-link {
          color: var(--bs-light);
          padding-left: var(--bs-navbar-nav-link-padding-x);
          padding-right: var(--bs-navbar-nav-link-padding-x);
        }

        &:hover {
          background-color: var(--bs-btn-hover-bg);
          border: solid var(--bs-primary) 2px;

          & .nav-link {
            color: var(--bs-primary);
          }
        }
      }
    }

    /* --- When scrolled invert default colors --- */
    &.scrolled {

      /* Navbar */
      & .navbar-nav {

        /* Invert Navbar background */
        & .nav-bg {
          background-color: var(--bs-primary);
        }

        /* Invert Logo color */
        & .navbar-logo svg * {
          color: var(--bs-light);
          stroke: var(--bs-primary);
        }

        & .navbar-logo svg *.open {
          color: var(--bs-primary);
        }

        /* Invert Nav items (and states) */
        & .nav-item {
          text-decoration: none;

          /* Menu-links - not on mobile*/
          @media only screen and (min-width: 992px) {
            & .nav-link {
              color: var(--bs-light);
            }
          }

          /* Hover, Active link & Dropdown-item */
          &:hover:not(.dropdown.show):not(.btnCta),
          &.active-link-container:not(.navbar-logo):not(.btnCta),
          &.dropdown:has(div.active-link-container) {
            text-decoration: underline;
            text-underline-offset: .5rem;
            text-decoration-thickness: .1rem;
            text-decoration-color: var(--bs-body-color);

            @media only screen and (min-width: 992px) {
              text-decoration-color: var(--bs-light);
            }
          }
        }

        /* Invert CTA button */
        & .btnCta {
          background-color: var(--bs-light);

          & .nav-link {
            color: var(--bs-primary);
          }

          &:hover {
            background-color: var(--bs-primary);
            border-color: var(--bs-light);

            & .nav-link {
              color: var(--bs-light);
            }
          }

        }
      }
    }
  }


  /* Handle appropriate color inversions on mobile default/scrolled. It differs from desktop */
  .navbar-toggler.open+.offcanvas .btnCta,
  .scrolled .navbar-toggler.open+.offcanvas .btnCta {
    background-color: var(--bs-primary);
    border: solid var(--bs-primary) 2px;

    & .nav-link {
      color: var(--bs-light);
    }

    &:hover {
      background-color: var(--bs-light);
      border-color: var(--bs-primary);

      & .nav-link {
        color: var(--bs-primary);
      }
    }
  }


  /* Animate submenu when hovered */
  .navbar .nav-item.dropdown {

    & .dropdown-menu {
      box-shadow: var(--bs-dropdown-box-shadow);
    }

    /* Submenu hides when leaving hover */
    & .dropdown-menu {
      @media only screen and (min-width: 992px) {
        display: none;
        opacity: 0;
        transition: all .2s ease-in-out;
      }
    }

    /* Show submenu when hovered on parent dropdown*/
    &:hover {

      & .dropdown-menu {
        @media only screen and (min-width: 992px) {
          display: block;
          opacity: 1;
        }

        & .dropdown-item {
          transition: all .8s ease;
        }
      }
    }
  }


  /* Put an Bootstrap person icon before "login" menuoption */
  .header .navbar-nav {
    flex: 1;

    & .nav-item:first-child,
    & .nav-item:nth-last-child(2) {
      @media only screen and (min-width: 992px) {
        margin-left: auto;
      }
    }

    & .nav-item:nth-last-child(2) {

      & a::before {
        content: '\F4D7';
        /* background-image: url(//s2.svgbox.net/materialui.svg?ic=person_outline&color=432c07);
        width: 18px;
        height: 18px;
        background-size: 18px 18px;
        background-repeat: no-repeat; */
        display: inline-block;
        font-family: bootstrap-icons !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        /* vertical-align: -.25em; */
        vertical-align: -.15em;
        -webkit-font-smoothing: antialiased;
      }
    }
  }

  /* Put logo in mobile menu on top, so mobile background slides underneath */
  .navbar-logo {
    position: relative;
    z-index: 1050;
  }

  /* Center menu items on mobile */
  .dropdown,
  .dropdown-item,
  .nav-item {
    @media only screen and (max-width: 992px) {
      text-align: center;
    }
  }


  /* Mobile menu toggler */
  .navbar-toggler {
    background-color: transparent;
    border: none;
    padding: 0;
    width: 1.875rem;
    height: 1.875rem;
    display: grid;
    place-content: center;
    position: relative;
    z-index: 1050;

    & .icn-menu {
      position: relative;
      display: block;
      width: 1.5625rem;
      height: .125rem;
      color: inherit;

      &:before {
        top: -.375rem;
      }

      &:after {
        top: .375rem;
      }

      &:before,
      &:after {
        content: "";
        transition-delay: 0s, .05s, .1s;
        transition-duration: .1s;
        transition-property: transform, top, background-color;
        transition-timing-function: ease-in-out;
      }

      &>span {
        transform: scale(1);
        transform-origin: top left;
        transition-delay: .1s, .075s;
        transition-duration: .1s;
        transition-property: transform, background-color;
        transition-timing-function: ease-in-out;
      }

      &::before,
      &::after,
      &>span {
        position: absolute;
        display: block;
        width: 100%;
        height: .2rem;
        background-color: var(--bs-primary);
        border-radius: 2px;
      }

      &>span {
        width: 1.0rem;
      }
    }

    /* Mobile menu is open: change hamburger style */
    &.open {

      & .icn-menu {

        &:before {
          transform: rotate(-45deg);
        }

        &:after {
          transform: rotate(45deg);
        }

        &:before,
        &:after {
          top: 0;
          transition-delay: .4s, .2s, 0s;
        }

        & span {
          transform: scaleX(0);
          transform-origin: top right;
          transition-delay: 0s, 0s, 0s;
        }
      }
    }
  }

  /* When scrolled, change colors of hamburger */
  .scrolled .icn-menu::before,
  .scrolled .icn-menu::after,
  .scrolled .icn-menu>span {
    background-color: var(--bs-light);
  }

  /* When scrolled, menu is open, change colors of hamburger */
  .scrolled .navbar-toggler.open .icn-menu::before,
  .scrolled .navbar-toggler.open .icn-menu::after,
  .scrolled .navbar-toggler.open .icn-menu>span {
    background-color: var(--bs-primary);
  }


  /* Animate the offcanvas menu */
  .offcanvas {
    --bs-offcanvas-transition: transform 0.2s ease-in-out;
    --bs-offcanvas-width: 100vw;
  }

  /* End mobile menu */


  /* Back to top button */
  .scrollButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    font-size: 25px;
    border: solid 2px var(--bs-primary);
    outline: none;
    background-color: var(--bs-light);
    color: var(--bs-primary);
    cursor: pointer;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    opacity: 0;

    &:hover {
      color: var(--bs-primary);
      background-color: var(--bs-primary-bg-subtle);
    }
  }

  /* Fade In Text On Scroll */
  .fadeInSection {
    opacity: 0;
    transform: translateY(50px);
    transition: 0.4s ease;
  }

  /* Page hero section (with image & text) */
  .page-hero-section {

    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    /* margin-top: 4rem; */

    & .page-hero-section-inner {
      background-color: rgba(0, 0, 0, 0.2);
    }

    & .page-hero-section-content>* {

      -webkit-animation-duration: 0.5s;
      animation-duration: 0.5s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown;
      -webkit-animation-delay: .3s;
      animation-delay: .3s;
      color: var(--bs-body);

      @media only screen and (max-width: 1024px) {
        color: var(--bs-light);
      }
      
    }

    .page-hero-section-content>*:nth-child(1) {
      animation-delay: .1s;
    }

    .page-hero-section-content>*:nth-child(2) {
      animation-delay: .2s;
    }

    .page-hero-section-content>*:nth-child(3) {
      animation-delay: .3s;
    }

    .page-hero-section-content>*:nth-child(4) {
      animation-delay: .4s;
    }

  }
  
  .home.page-hero-section {
    background-image: url('https://images.foys.io/foys/4e1e2b2c-a23d-4f7c-9cde-c9667a42c340/a520fc4c-058e-46c2-9792-0e0437f58ba0.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    & .page-hero-section-inner {
      background-image: url('https://foys-prod.imgix.net/4e1e2b2c-a23d-4f7c-9cde-c9667a42c340/c020b6cf-50e9-4b43-aeeb-a50439914910.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-color: unset;
    
      @media only screen and (max-width: 1024px) {
        background-image: url('https://images.foys.io/foys/4e1e2b2c-a23d-4f7c-9cde-c9667a42c340/99daf8d0-66f1-4e77-b4c8-e6396b14d7d8.png');
      }
    }
      
    & .container .row {

      & [class*="col"] {
        height: 100vh;
      }
    }
  }

  .page-hero-section:not(.home) .container .row [class*="col"] {
    height: 50vh;

    @media only screen and (max-width: 768px) {
      height: 45vh;
    }

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  /* Figure Caption placement */
  figcaption {
    position: absolute;
    top: 0;
    padding: 0.7rem 2rem 0.3rem;
    border-bottom-right-radius: 8px;
    background-color: var(--bs-primary);

    & h3 {
      color: var(--bs-white) !important;
    }
  }


  /* Default added Foys footer - temporarily disabled */
  .container.foys-footer {

    background: var(--bs-dark);
    max-width: 100%;
    color: var(--bs-light);
    text-align: center;
    font-size: 0.7rem;
    padding-bottom: 1rem;

    & a {
      color: var(--bs-light);
      text-decoration: none;
    }

    & a::after {
      text-transform: uppercase;
      content: " - ERWIN & EEFJE";
    }
  }

  /* Calendar */
  .calendar-event {
    & a {
      color: unset;
      text-decoration: none;
    }
  }

  #calendar-event {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0 !important;
    border-bottom: solid 1px #707070;

    &:hover {
      background-color: rgba(var(--bs-primary-bg-subtle-rgb), var(--bs-primary-bg-subtle-opacity));
      transition: background-color 0.5s ease;
    }

    &>div {
      align-items: center;
    }

    .big-date {
      padding-left: 0.8rem;

      & .big-date-block {
        color: var(--bs-primary);
        font-weight: 700;
        font-size: .9rem;
        text-align: center;
        text-transform: capitalize;
      }
    }

    .event-details {

      &:after {
        content: "\F134";
        position: absolute;
        top: 5px;
        right: 15px;
        color: var(--bs-primary);
        font-family: 'bootstrap-icons';
        font-size: 1.4rem;
      }

      & .event-title {
        font-weight: 600 !important;
        font-family: var(--bs-body-font-family);
        font-size: var(--bs-body-font-size);
        text-transform: math-auto;
        margin-bottom: 0;

        & a {
          color: var(--bs-body-color);
        }
      }

      & .event-location {
        font-size: 0.8rem;
      }
    }
  }

  .calendar-event:nth-child(even) {
    & .big-date-block {
      /* background-color: var(--bs-dark); */
    }
  }

  .calendar-event:nth-child(odd) {
    & .big-date-block {
      /* background-color: var(--bs-primary); */
    }
  }


  /* News items */
  .website-news-items-widget {

    .news-item {
      filter: drop-shadow(0px 3px 2px rgba(112, 112, 112, 0.3));

      & .news-image-container {

        & .news-item-image-div {
          background-size: cover;
          background-repeat: no-repeat;
          height: 200px;
          width: 100%;
        }
      }

      & .news-content-container {
        background-color: var(--bs-white);
        clip-path: polygon(0% 7%, 101% 0%, 100% 100%, 0% 100%);
        padding: 2.5rem 1.5rem;
        margin-top: -25px;

        & .news-title {
          padding-bottom: 0.5rem;

          & a {
            font-family: var(--bs-body-font-family), sans-serif;
            color: var(--bs-body-color);
            font-size: 1rem;
            text-decoration: none;
            font-weight: 700;
          }
        }

        & .news-date {
          color: var(--bs-primary);
          font-size: 0.8rem;
          padding-bottom: 0.9rem;
        }

        & .news-short-description {

          & .news-short-description-content {
            font-size: 0.9rem;
          }

          /* & a.news-read-more {
            display: none;
          } */
        }

        /* &:hover {
          background-color: var(--bs-primary-bg-subtle);
          transition: background-color 0.5s ease;
        } */
      }
    }
  }

  /* News Items details */
  .website-news-item-details {

    & .news-header-container {

      & .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;


      }

      & .news-header-image-container {
          padding-bottom: 1.5rem;

          & img {
            width: 100%;
            aspect-ratio: 16 / 8;
            object-fit: cover;
          }
      }
    
      & .news-info-container{

        &.pl-md-3 {
          padding-left: 1.8rem !important;
          padding-right: 1.8rem !important;
        }

        & .news-title {
          margin-top: 20px;
        }

        & .news-date {
          margin-bottom: 2rem;
        }

        & .news-short-description {
          font-weight: 600;
        }
      }
    }

    & .news-body {
      padding-left: 1.2rem;
      padding-right: 1.2rem;
    }
  }


  /* Events section */
  .events-section {

    & .events-block {
      box-shadow: 0px 1px 2px 2px rgba(112, 112, 112, 0.3);
      margin-top: -110px;
    }
  }

  
  /* Registration form */
  .registration-section {


    & a {
      text-decoration: underline dotted;
      text-decoration-thickness: 0.05rem;
      text-underline-offset: 3px;

    }

    & .row {
      background-color: var(--bs-light);
    }
  }

  .form-control {
    border: 0;
    border-bottom: rgba(var(--bs-primary-rgb), .5) solid 3px;
  }

  .custom-select,
  .custom-control-input {
    border: rgba(var(--bs-primary-rgb), .5) solid 2px;
  }

  .input-group-append button.btn.btn-outline-secondary {
    border: 0;
  }

  .b-calendar-grid-body .btn {
    font-family: var(--bs-body-font-family);
    font-size: 0.8rem;
    font-weight: normal !important;
  }

  .b-form-datepicker>.btn {
    background-color: rgba(var(--bs-primary-rgb), .5);
    padding: 5px;
    margin-left: 15px;
  }


  /* Sidebar quick links  */
  .list-group {
    background-color: var(--bs-white);
    flex-direction: row;

    & .list-group-item {
      font-size: 0.75rem;
    }
  }


  /* Place Sidebar items vertical on bigger screens */
  @media only screen and (min-width: 992px) {
    .list-group {
      flex-direction: column;
    }
  }


  /* Place sidebar above text when pinned at scroll */
  .sidebar-wrapper {
    z-index: 1;

    @media only screen and (min-width: 992px) {

      /* Move sidebar up on larger screens */
      .sidebar-wrapper {
        margin-top: -5rem;
      }
    }
  }

  /* Carousel with testimonial cards */
  .carousel img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 1rem;
    overflow: hidden;
  }

  .carousel-inner {
    padding: 0 1em;
  }

  .card-text {
    color: var(--bs-primary);
  }

  .card {
    background-color: var(--bs-white);
  }

  @media screen and (min-width: 576px) {
    .carousel-inner {
      display: flex;
      /*width: 90%;
      margin-inline: auto; */
      padding: 1em 0;
      overflow: hidden;
    }

    .carousel-item {
      display: block;
      margin-right: 0;
      padding-bottom: 130px;
      flex: 0 0 calc(100% / 2);
    }
  }

  @media screen and (min-width: 1024px) {
    .carousel-item {
      display: block;
      margin-right: 0;
      flex: 0 0 calc(100% / 3);
    }
  }

  .carousel .card {
    margin: 0 0.5em;
    border: 0;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 2.5rem;
    height: 2.5rem;
    background-color: grey;
    border-radius: 50%;
    top: 35%;
    transform: translateY(-35%);
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .card-body {
    overflow: hidden;
  }


  /* ------------------------------------------------------------------------------------------
                                          END: AVF Styling
    ------------------------------------------------------------------------------------------
  */