/* ------------------------------------------------------------------------------------------
                                          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,
 h2,
 h3,
 h4,
 h5,
 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
    ------------------------------------------------------------------------------------------
  */

 .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;
 }

 .leden_zeggen {
   background-image: url("https://images.foys.io/foys/4e1e2b2c-a23d-4f7c-9cde-c9667a42c340/65bc023f-b17b-404a-b748-3c8fca3c1b0b.png");
   background-position: center;
 }

 .atletiek-trainingen {
   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 image header */
 .page-top-image-section {

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

   & .page-top-image__inner {
     background-color: rgba(0, 0, 0, 0.2);
   }

   & .page-top-image__text>* {

     -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-light);
   }

   .page-top-image__text>*:nth-child(1) {
     animation-delay: .1s;
   }

   .page-top-image__text>*:nth-child(2) {
     animation-delay: .2s;
   }

   .page-top-image__text>*:nth-child(3) {
     animation-delay: .3s;
   }

   .page-top-image__text>*:nth-child(4) {
     animation-delay: .4s;
   }

 }

 .home.page-top-image-section .container .row {

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

 .page-top-image-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;
     }
   }
 }




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