  .main-info-section {
    padding:                    10px;
    width:                      100%;
  }

  .bannerCenter {
    justify-content:            space-around;
    display:                    inline-flex;
    flex-direction:             row;
    align-items:                center;
    vertical-align:             middle;
  }

  .summary-row {
    width:                      100%;
    border-top:                 2px solid var(--listing-background-color);
    margin-top:                 0px;
    margin-bottom:              0px;
    height:                     20vh;
    min-height:                 20vh;
    max-height:                 20vh;
    background-color:           #f9f9f9 !important;
    overflow-x:                 hidden;
    overflow-y:                 hidden;
    white-space:                nowrap;
    -ms-overflow-style:         -ms-autohiding-scrollbar;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
  }

  /* Remove the default scrollbar for WebKit implementations */
  .summary-row::-webkit-scrollbar {
    display:                    none;
  }

  .summary-row .col {
    overflow:                   hidden;
  }

  .tabContent {
    background:                 var(--listing-background-color);
    width:                      100%;
    max-width:                  100%;
    min-width:                  100%;
    height:                     100%;
    overflow-y:                 auto;
    overflow-x:                 hidden;
    box-shadow:                 0 0 6px rgba(0,0,0,.4);
  }

  .title-item,
  .content-item {
    margin:                     0px 10px;
    text-align:                 left;
    display:                    none;
    position:                   relative;
    transition:                 0.3s ease-in-out;
    animation:                  0.3s ease-in-out;
    -webkit-animation:          0.3s ease-in-out;
    -moz-animation:             0.3s ease-in-out;
    -o-animation:               0.3s ease-in-out;
  }

  .title-item.active,
  .content-item.active {
    display:                    block;
    animation:                  slideUp .5s linear;
    -webkit-animation:          slideUp .5s linear;
    -moz-animation:             slideUp .5s linear;
    -o-animation:               slideUp .5s linear;
  }

  .content-item .card-body {
    text-align:                 start;
  }

  .content-item .card,
  .panel-item .card {
    border:                     2px solid var(--club-secondary-color);
    border-radius:              25px;
    margin:                     5px 10px;
    padding:                    0;
  }

  .content-item .card-header,
  .panel-item .card-header {
    border-radius:              25px 25px 0 0;
    width:                      -webkit-fill-available;
    background-color:           var(--club-primary-color);
    color:                      #ffffff;
  }

  .panel-item:hover  .card-header,
  .panel-item.active .card-header {
    background-color:           var(--club-highlight-color);
    color:                      var(--club-secondary-color);
  }

  a.panel-item,
  a.panel-item:hover,
  a.panel-item.active {
    text-decoration:            none !important;
  }

  .panel-item .card-body i,
  .panel-item .card-body img {
    color:                      var(--club-secondary-color);
  }

  .panel-item .card-body i {
    font-size:                  8em;
  }

  .panel-item:hover  .card-body i,
  .panel-item:hover  .card-body img,
  .panel-item.active .card-body i,
  .panel-item.active .card-body img {
    color:                      var(--club-highlight-color);
  }

  @media (max-width: 767px) {
    .tabContent {
      background:               #ffffff;
    }

    .content-item {
      margin:                   5px 5px 0px 5px;
    }

    .content-item .card,
    .panel-item   .card {
      margin:                   10px;
    }

    .panel-item .card-header {
      padding:                  12px 4px;
    }
  }

  @media (max-width: 1200px) {
    .panel-item .card-body i {
      font-size:                3em;
    }
  }

  @media (max-width: 1300px) {
    .panel-item .card-body i {
      font-size:                4em;
    }
  }

  @media (max-width: 1500px) {
    .panel-item .card-body i {
      font-size:                6em;
    }
  }

  :root {
    --menu-width:                         150px;
    --dropdown-bgcolor:                   #dddddd;
    --dropdown-highlight:                 #ebebeb;
    --menu-text-color:                    #ffffff;
  }

  .menu {
    display:                              block;
    position:                             relative;
    cursor:                               pointer;
  }

  .menu {
    color:                                var(--menu-text-color) !important;
  }

  a.menu {
    text-decoration:                      none;
  }

  .dropdown-item.active,
  .dropdown-item:hover,
  .filter.active,
  .menu li:hover {
    background-color:                     var(--club-highlight-color) !important;
    color:                                var(--menu-text-color) !important;
  }

  .dropdown-header:hover,
  .dropdown-header.active {
    background-color:                     var(--club-highlight-color);
    color:                                var(--club-secondary-color) !important;
  }

  .menu-title {
    display:                              block;
    width:                                var(--menu-width);
    height:                               40px;
    padding:                              12px 0 0;
    background:                           var(--club-secondary-color);
    text-align:                           center;
    color:                                var(--menu-text-color);
    font-weight:                          bold;
    text-transform:                       uppercase;
    transition:                           0.3s background-color;
    border-radius:                        10px;
    margin:                               5px;
  }

  .menu-title:before {
    content:                              "";
    display:                              block;
    height:                               0;
    border-top:                           5px solid var(--club-secondary-color);
    border-left:                          (var(--menu-width) / 2) solid transparent;
    border-right:                         (var(--menu-width) / 2) solid transparent;
    border-bottom:                        0 solid var(--dropdown-bgcolor);
    position:                             absolute;
    top:                                  100%;
    left:                                 0;
    z-index:                              101;
    transition:
      0.2s 0.2s border-top ease-out,
      0.3s border-top-color;
  }

  .menu-title.active,
  .menu:has(.active) .menu-title,
  .menu-title:hover {
    background-color:                     var(--club-highlight-color) !important;
  }

  .menu-title:hover:before {
    border-top-color:                     var(--club-highlight-color) !important;
  }

  .menu:hover > .menu-title:before {
    border-top-width:                     0;
    transition:
      0.2s border-top-width ease-in,
      0.3s border-top-color;
  }

  .menu-title:after {
    content:                              "";
    display:                              block;
    height:                               0;
    border-left:                          (var(--menu-width) / 2) solid transparent;
    border-right:                         (var(--menu-width) / 2) solid transparent;
    border-bottom:                        0 solid var(--dropdown-highlight);
    position:                             absolute;
    bottom:                               0;
    left:                                 0;
    z-index:                              101;
    transition:                           0.2s border-bottom ease-in;
  }

  .menu:hover > .menu-title:after {
    border-bottom-width:                  5px;
    transition:                           0.2s 0.2s border-bottom-width ease-out;
  }

  .menu-dropdown {
    min-width:                            100%;
    padding:                              15px 0;
    position:                             absolute;
    background:                           var(--club-primary-color);
    z-index:                              100;
    border-radius:                        10px;
    margin:                               5px;
    transition:
      0.5s padding,
      0.5s background;
  }

  .menu-dropdown:after {
    content:                              "";
    display:                              block;
    height:                               0;
    border-top:                           5px solid var(--dropdown-highlight);
    border-left:                          (var(--menu-width) / 2) solid transparent;
    border-right:                         (var(--menu-width) / 2) solid transparent;
    position:                             absolute;
    top:                                  100%;
    left:                                 0;
    z-index:                              101;
    transition:                           0.5s border-top;
  }

  .menu:not(:hover) > .menu-dropdown {
    padding:                              4px 0;
    background:                           var(--dropdown-bgcolor);
    z-index:                              99;
  }

  .menu:not(:hover) > .menu-dropdown:after {
    border-top-color:                     var(--dropdown-bgcolor);
  }

  .menu:not(:hover) > .menu-title:after {
    border-bottom-color:                  var(--dropdown-bgcolor);
  }

  .menu-dropdown > * {
    overflow:                             hidden;
    height:                               30px;
    padding:                              5px 10px;
    background:                           rgba(0,0,0,0);
    white-space:                          nowrap;
    transition:                                 
      0.5s height cubic-bezier(.73,.32,.34,1.5),
      0.5s padding cubic-bezier(.73,.32,.34,1.5),
      0.5s margin cubic-bezier(.73,.32,.34,1.5),
      0.5s 0.2s color,
      0.2s background-color;
  }

  .menu:not(:hover) > .menu-dropdown > * {
    visibility:                           hidden;
    height:                               0;
    padding-top:                          0;
    padding-bottom:                       0;
    margin:                               0;
    color:                                rgba(25,25,25,0);
    transition:                                 
      0.5s 0.1s height,
      0.5s 0.1s padding,
      0.5s 0.1s margin,
      0.3s color,
      0.6s visibility;
    z-index:                              99;
  }

  .hList > * {
    float:                                left;
  }

  .hList > * + * {
    margin-left:                          0;
  }

  .hList .dropdown-item.program-gender-filter,
  .hList .dropdown-item.program-filter,
  .hList .dropdown-item.club-filter {
    color:                                var(--club-secondary-color) !important;
  }

  li.padding-level-one {
    padding-left:                         10px;
  }

  li.padding-level-two {
    padding-left:                         20px;
  }

  li.padding-level-three {
    padding-left:                         30px;
  }

  li.padding-level-four {
    padding-left:                         40px;
  }

  .fee-line {
    display:            flex;
    flex-direction:     column;
    justify-content:    space-between;
    text-align:         center;
    box-shadow:         inset
                        0 3px 6px rgba(0,0,0,0.16),
                        0 4px 6px rgba(0,0,0,0.45);
    border-radius:      10px;
    padding:            8px;
    margin:             10px;
  }

  a .fee-line:hover {
    background-color:   var(--club-highlight-color) !important;
    color:              var(--club-primary-color) !important;
  }

  .fee-line .text-blk {
    margin-top:         10px;
    font-size:          1.5em;
  }

  .fee-line .text-blk.name {
    display:            flex;
    flex-direction:     column;
    justify-content:    center;
    align-items:        center;
  }

  .fee-line .text-blk a {
    text-decoration:    none;
  }

  .card-img.card {
    padding:            0 0 20px 0;
    margin:             0 0 20px 0;
    box-shadow:         0 5px 15px 0px rgba(0,0,0,0.6);
    border-radius:      25px;
  }

  .card-img-overlay,
  .card-img.card .card-img-top {
    border-radius:      23px 23px 0 0;
  }

  .card-img-top {
    height:             50%;
  }

  .card-img.card:hover {
    transform:          translatey(0px);
    animation:          floatImage 6s ease-in-out infinite;
    border:             2px solid var(--club-secondary-color);
  }

  a.card-img-overlay {
    position:           absolute; 
    top:                0; 
    background:         transparent; /* Black see-through */
    color:              red; 
    width:              100%;
    transition:         .5s ease;
    opacity:            0;
    padding:            50px;
    text-align:         center;
  }

  .card.card-img:hover .card-img-overlay {
    opacity:            1;
  }

  .page-image {
    width:                      100%;
    height:                     80vh;
    margin:                     auto;
    justify-content:            center;
  }

  .page-image::before {
    content:                    "";
    background-image:           url('<?php echo $pageImageUrl; ?>');
    background-size:            cover;
    opacity:                    0.1;
    position:                   absolute;
    top:                        0px;
    right:                      0px;
    bottom:                     0px;
    left:                       0px;
  }