@font-face {
  font-family: Gotham;
  src: url("/resources/Fonts/Gotham/GOTHMMED.ttf");
}

/** If the Wild Apricot CDN fails or delays the load of a gradient background image then we need to make sure we have a solid background colour set **/

.gradient_backstop,
#id_Header,
#id_Footer1 
{ background-color: #37285e !important; }

.mLayout.layoutMain {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.zonePlace.zoneFooter2 {
    margin-top: auto;
}

#idClassForItem_3 h1.header {
    color: red !important;
}

[class^="WaGadget"].customMenuHorizontal {
    overflow: visible;
}

/* 
    Headers - global
*/

/* 
h1 font,
h2 font,
h3 font,
h4 font {
    font-family: 'Raleway',sans-serif;
}

h1 font {
    color: #371e79;
    font-size: 30px !important;
    line-height: 36px;
    font-weight: bold;
    text-align: center;
}

h2 font {
    color: #676767;
    font-size: 30px !important;
    line-height: 36px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

h4 font {
    color: #371e79;
    font-size: 24px;
    line-height: 36px;
    font-style: italic;
    text-align: center;
}
*/

/* 
    Headers - homepage
*/

.homepage-layout h1 font {
    color: white;
    font-size: 28px !important;
    line-height: 42px;
    text-align: left;
}

.homepage-layout h2 font {
    color: #371e79;
    font-size: 24px !important;
    line-height: 36px;
}

.homepage-layout h3 font {
    color: #000000;
    font-size: 30px !important;
    line-height: 36px;
}

.homepage-layout h4 font {
    font-size: 18px !important;
    text-align: left !important;
}

/* 
    Headers - homepage // old
*/

.homepage h1 font {
    text-align: left;
}

.homepage h2 font {
    color: #371e79;
    font-size: 28px !important;
    line-height: 36px;
    text-align: center;
    font-weight: bold;
}

/* 
    Headers - dept
*/


/* Dropdown */

.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul ul {
    border: none;
    border-radius: 6px;
    overflow: hidden;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul ul ul {
    top: 0;
    left: -100%;
}

/* Header and layout */

.homepage-header h2 {
    width: fit-content;
    position: relative;
}

.homepage-header h2::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50%;
    height: 2px;
    background-color: #371e79;
}

@media screen and (min-width:479px) {
    .homepage-layout {
        padding: 0 100px;
    }
}

@media screen and (min-width:1079px) {
    .homepage-layout {
        padding: 0 200px;
    }
}

/* User icon */

.WaGadgetLoginButton .loginContainer.authenticated.loginContainer.authenticated .loginLink {
    color: white;
    transition: opacity .25s ease;
}

.WaGadgetLoginButton .loginContainer.authenticated.loginContainer.authenticated .loginLink:hover, .WaGadgetLoginButton .loginContainer.authenticated.loginContainer.authenticated .loginLink.hover {
    opacity: .6;
    background: transparent;
}

/* Buttons */

@media screen and (max-width:480px) {
    .homepage-buttons {
        flex-direction: column;
    }
    .homepage-buttons a {
        margin-bottom: 24px;
    }
}

.homepage-buttons {
    display: flex;
    justify-content: center;
}

.homepage-buttons a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    padding: 0 16px;
    position: relative;
    transition: all .5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.homepage-buttons a::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0);
}

.homepage-buttons img {
    width: 80px;
    margin-bottom: 16px;
}

.homepage-buttons span {
    padding: 12px 24px;
    text-transform: uppercase;
    font-family: 'Raleway',sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 1px;
    color: white;
    text-align: center;
    min-width: 150px;
    border: 1px solid white;
    background: rgba(255, 255, 255, .1);
}

.homepage-buttons span,
.homepage-buttons a::before {
    transition: all .25s ease;
}

.homepage-buttons a:hover span,
.homepage-buttons a:hover::before {
    background: rgba(255,255,255, .3);
}

/* News */

details.homepage-news summary {
  cursor: pointer;
  transition: margin 150ms ease-out;
}

details[open].homepage-news summary {
  margin-bottom: 12px;
  padding-bottom: 0;
}

.homepage-news {
    background: rgba(255,255,255,.1);
    
}

.homepage-news .mySummary {
    padding: 12px;
}

.homepage-news .mydetails {
    padding: 0 12px;
    margin-top: 0;
    }

.homepage-news .mySummary,
.homepage-news .mydetails {
    color: white;
}

.homepage-news .mydetails a {
    font-weight: bold;
    position: relative;
    display: inline-block;
    transition: all .25s ease;
}

.homepage-news .mydetails a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 2px;
    background: white;
    transition: all .5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.homepage-news .mydetails a:hover {
    color: white;
}

/* 
    Homepage Galleries 
*/

.homepage-gallery .photoGalleryGadgetScrollBar {
    display: none;
}

.homepage-gallery .photoGalleryGadgetScrollElement {
    width: calc(100% + 20px);
    justify-content: space-between;
    position: absolute;
    top: calc(50% - 26px);
    left: -12px;
    background: transparent;
    height: 0;
    opacity: 1;
}

.homepage-gallery .button_leftPhotoGallery,
.homepage-gallery .button_rightPhotoGallery {
    opacity: 1;
    cursor: pointer;
}

.homepage-gallery .button_leftPhotoGallery,
.homepage-gallery .button_rightPhotoGallery {
    width: 20px;
    height: 40px;
}

.homepage-gallery.WaGadgetPhotoGallery .img_horizontal {
    transition: all .25s ease;
}

.homepage-gallery .button_leftPhotoGallery svg,
.homepage-gallery .button_rightPhotoGallery svg {
    width: 16px;
    height: 20px;
    opacity: 1;
    transition: all .25s ease;
}

.homepage-gallery .button_leftPhotoGallery:hover svg {
    transform: translateX(-5px);
}

.homepage-gallery .button_rightPhotoGallery:hover svg {
    transform: translateX(5px);
}

.homepage-gallery .button_leftPhotoGallery path,
.homepage-gallery .button_rightPhotoGallery path {
    fill: #371e79;
}

.homepage-gallery.WaGadgetPhotoGallery .button_leftPhotoGallery.disabled,
.homepage-gallery.WaGadgetPhotoGallery .button_rightPhotoGallery.disabled {
    opacity: 0;
}

/* 
    Homepage Testimonials
*/

@media screen and (max-width:480px) {
    .homepage-testimonials .button_leftPhotoGallery {
        margin-left: -6px;
    }
    .homepage-testimonials .button_rightPhotoGallery {
        margin-right: 14px;
    }
    .homepage-testimonials {
        margin-left: 12px !important;
    }
}

/* 
    Homepage Webinars
*/

.homepage-webinars {
    width: 100%;
    overflow: visible;
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul {
    width: calc(100% + 16px);
    margin: 0 -8px;
    display: flex;
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li {
    width: calc(33% - 8px);
    margin: 0 8px;
    padding: 80px 28px 16px 28px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    background-image: url("/resources/Pictures/Webinars 2022/webinars-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    box-sizing: border-box;
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li .date {
    margin-bottom: 32px;
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li .location {
    font-weight: bold;
    font-style: normal;
    margin-top: auto;
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li a {
    text-decoration: none;
    font-size: 24px;
    transition: all .25s ease;
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li a,
.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li span {
    color: white !important;
    text-shadow: 0 0 5px rgb(255, 255, 255, .6);
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li::before,
.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li::after,
.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li a::before {
    content: '';
    position: absolute;
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li::before,
.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li::after {
    background-repeat: no-repeat;
    background-size: contain;
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li::before {
    width: 100%;
    height: 20px;
    top: 28px;
    left: 28px;
    background-image: url("/resources/Pictures/Webinars 2022/filmbase-sessions.png");
    background-position: left;
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li::after {
    width: 100px;
    height: 22px;
    bottom: 16px;
    right: 16px;
    background-image: url("/resources/Pictures/Logo%202022/FB_Filmbase%20Logo_Vector_White_with%20Glow%2012-22.png");
    background-position: right;
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li a::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    box-sizing: border-box;
    border: 0px solid rgba(255,255,255, .1);
    transition: all .25s ease;
    z-index: 100;
}

@media screen and (max-width:480px) {
.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul {
        flex-direction: column;
    }
    .homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li {
        width: 100%;
        margin: 0 0 16px 0;
    }
}

.homepage-webinars.WaGadgetUpcomingEvents.upcomingEventsStyle001 ul li:hover a::before {
    opacity: 1;
    border-width: 6px;
}

/* 
    Homepage Dark Section
*/

.homepage-dark-section .homepage-header h2::before {
    background: white;
}

.homepage-dark-section .homepage-header h2 font,
.homepage-dark-section .homepage-header h2 strong {
    color: white !important;
}

.homepage-dark-section .homepage-gallery .button_leftPhotoGallery path,
.homepage-dark-section .homepage-gallery .button_rightPhotoGallery path {
    fill: white;
}

/* 
    Homepage Footer
*/

.zonePlace.zoneWAbranding {
    display: none;
}

.homepage-footer {
    margin-top: 40px;
    border-top: 6px solid rgba(255,255,255, .1);
}

.homepage-footer ul {
    margin: 0;
    list-style: none;
}

.homepage-footer ul li {
    padding-bottom: 8px;
}

.homepage-footer ul li a {
    position: relative;
}

.homepage-footer ul li a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: white;
    transition: all .5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.homepage-footer ul li a:hover::after {
    width: 100%;
}

.homepage-footer .WaGadgetSocialProfile li a {
    transition: all .25s ease;
}

.homepage-footer .WaGadgetSocialProfile.socialProfileStyle003 li a:hover {
    color: white;
    transform: translateY(-3px);
}

/* 
    TL 21/02/21
    Sticky header 
    .header-sticky
    Add class to a header to stick to top of page
*/

@media screen and (min-width:479px) {
    /* Add this to the placeholder containing the header */
    .header-sticky {
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        right: 0;
    }

  

    /* NB: You need to add this to the placeholder BELOW the
    sticky header so it doesn't get lost underneath it */
    .header-sticky-next {
        margin-top: 133.617px;
    }
}

    .header-sticky-next-set {
        margin-top: 97px;

    }


/* 
    TL 21/02/21
    Boxes CSS 
    div.boxes > div.box
    When creating a single button use div.button > a
*/

/* Boxes wrapper */
.boxes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: -1rem;
}

/* Boxes wrapper */
.box {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 300px;
    text-align: center;
    margin: 1rem;
    padding: 1rem;
    font-family: 'Raleway',sans-serif;
}

.box h4 {
    margin-top: 0;
}

/* Boxes dark variant */
.boxes--dark {
    color: white;
}

.boxes--dark h4 {
    color: white!important;
    text-transform: uppercase;
    text-decoration: underline;
    font-family: 'Raleway',sans-serif;
    
    
}

.boxes--dark a {
    color: white!important;
    font-weight: bold;
    
}

.boxes--dark .box {
    background-image: url("/resources/Pictures/Images 01/FB_Homepage_Banner_BG.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.boxes--dark .box:first-child {
    background-position: left center;
}

.boxes--dark .box:last-child {
    background-position: right center;
}

/* Button group class */
.buttons {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.button-find_out_more h3 > strong > font {
    display: flex;
    align-items: center;
}

.button-find_out_more h3 > strong > font > font:last-child {
    height: 45px;
}

/* 
    TL 21/02/21
    Button CSS
    When creating multiple buttons follow the pattern 
    ul.buttons > li.button > a
    When creating a single button use div.button > a
*/

/* Button class */

.button {
    display: block;
    background-color: #371e79;
    padding: 8px 20px;
    margin: .5rem;
}

/* Button anchor class */

.button a {
    color: #FFFFFF !important;
    font-family: 'Raleway','Arial',sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1.5;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase;
}

/* 
    KH 23/03/21
    Hide when on mobile screen
*/
@media screen and (max-width: 479px) {
  .hidden_menu {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}





/* 
    KH 23/09/21
   centre vertically
*/
.vertical_centre {
    
 display: flex;
  justify-content: center;
  align-items: center;
  
  
    
  }

  


/* 
    KH 23/09/21
    show on mobile screen only
*/
  @media screen and (min-width: 479px) {
   .publicContentView .mobile_menu {
     display: hidden;
  

  }
}

#FunctionalBlock1_ctl00_messageList_subsctibeLinkText {
    color: #371e79;
    font-weight: bold;
    font-size: 20px;
    font-family: lato, sans-serif;
    text-transform: uppercase;

}

#FunctionalBlock1_ctl00_topicList_subsctibeLinkText {
    color: #371e79;
    font-weight: bold;
    font-size: 20px;
    font-family: lato, sans-serif;
    text-transform: uppercase;
    }
/* 
    KH 27/05/21
    on Profile page membership - credit card button - make white text
*/
#FunctionalBlock1_ctl00_ctl00_Membership_updateCreditCardBottomButton {
    color: #FFFFFF;
    font-weight: bold;
    
    }



#FunctionalBlock1_ctl00_messageList_sortOrderLinkButton {
    display: none;
   }



#FunctionalBlock1_ctl00_messageList_messages_ctl01_forumMessage_messageIdText {
    display: none;
   }

#FunctionalBlock1_ctl00_messageList_messages_ctl02_forumMessage_messageIdText {
    display: none;
   }

   


.WaGadgetHeadline
 {
  letter-spacing: 1px;
}

.WaGadgetH1.promo
 {
  letter-spacing: 1px;
}

.WaGadgetMenuVertical.VerticalMenuStyle002 ul.firstLevel>li>.item:hover>a {
    color: #8e1b7e;
}

.WaGadgetMenuVertical.VerticalMenuStyle002 ul.firstLevel>li.sel>.item>a {
    color: #371e79;
}


.WaGadgetCustomMenu.menuStyle001 ul li a {
    color: #808080;
}

.WaGadgetForumStateList.membersTable thead th {
    font-family: 'Raleway','Arial',sans-serif;
    }


.WaGadgetAuthorizationRequired .openAuthFormContainer {
display: none !important;
}


#socialLoginContainer, #idSocialLoginContainer {
    display: none;
}

/**
 * horizontal menu css
 */


.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel {
    margin: 0 auto;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li > .item > a, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item > a {
    padding: 8px 0;
    margin: 0 16px;
    font-size: 18px;
    text-align: center;
    text-transform: capitalize;
    transition: all .25s ease;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item {
    padding: 0 8px;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item > a {
    margin: 0 auto;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.secondLevel > li > .item > a,
.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.secondLevel > li > .item > a {
    transition: all .25s ease;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li:not(.phantom) > .item > a::after, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li:not(.phantom) > .item > a::after,
.WaGadgetCustomMenu.menuStyle002 ul li a::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: 4px;
    left: 0;
    background: white;
    transform: scaleX(0);
    transition: background, .25s ease, transform .5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li:not(.phantom) > .item > a::after {
    background: #808080;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li > .item:hover > a::after, .WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.sel:hover > .item > a::after,
.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item:hover > a::after, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel:hover > .item > a::after, .WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.sel > .item > a::after, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel > .item > a::after {
    transform: scaleX(1);
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li > .item:hover > a::after, .WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.sel:hover > .item > a::after {
    background: #353a50;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.sel > .item > a::after {
    background: #371e79;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item:hover > a::after, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel:hover > .item > a::after, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel > .item > a::after,.WaGadgetCustomMenu.menuStyle002 ul.orientationHorizontal > li > a::after, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item > a::after {
    background: #ffffff;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item:hover > a, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel > .item > a, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel > .item:hover > a{
    color: #FFFFFF;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item > a,.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item > a > span {
    width: fit-content
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel>li.dir>.item>a span:after, .WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul li.dir>.item>a:after , .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel>li.dir>.item>a span:after, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul ul li.dir>.item>a:after, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner .firstLevel>li.last-child ul li.dir>.item>a:before, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner .firstLevel>li:last-child ul li.dir>.item>a:before {
    display: none;
}

/**
 * secondary menu css
 */

.WaGadgetFirst {
    overflow: visible;
    margin: 0;
}

.WaGadgetCustomMenu.menuStyle002 ul.orientationHorizontal > li {
    padding: 0;
    position: relative;
}

 .WaGadgetCustomMenu.menuStyle002 ul.orientationHorizontal > li > a {
    position: relative;
    padding: 8px 0px;
    margin: 0 16px;
    font-size: 18px;
    text-align: center;
    text-transform: capitalize;
    transition: all .25s ease;
}

@media screen and (max-width: 1000px) {
    .WaGadgetCustomMenu.menuStyle002 ul.orientationHorizontal > li > a {
        margin: 0 6px;
    }
}

.WaGadgetCustomMenu.menuStyle002 ul.orientationHorizontal > li > a:hover {
    text-decoration: none;
}

.WaGadgetCustomMenu.menuStyle002 ul.orientationHorizontal > li > a:hover::after {
    transform: scaleX(1);
}

/**
 * secondary menu dropdown
 */

@media screen and (max-width: 479px) {
    .secondary-dropdown.WaGadgetCustomMenu.menuStyle001 {
        display: none;
    }
}

.secondary-dropdown.WaGadgetCustomMenu.menuStyle001 {
    background: #353a50;
    position: absolute;
    min-width: 300px;
    top: 34px;
    left: 16px;
    border-radius: 6px;
    opacity: 0;
    z-index: -1;
}

.secondary-dropdown.WaGadgetCustomMenu.menuStyle001.dropdown-show {
    opacity: 1;
    z-index: 1;
}

#idAdminContentHolder .secondary-dropdown.WaGadgetCustomMenu.menuStyle001 {
    opacity: 1;
    z-index: 1;
    position: relative;
}


.secondary-dropdown.WaGadgetCustomMenu.menuStyle001,
.secondary-dropdown.WaGadgetCustomMenu.menuStyle001 li > a {
    transition: all .25s ease;
}

.secondary-dropdown.WaGadgetCustomMenu.menuStyle001 .gadgetStyleBody {
    padding: 0;
}

.secondary-dropdown.WaGadgetCustomMenu.menuStyle001 li {
    padding: 0;
    display: block;
}

.secondary-dropdown.WaGadgetCustomMenu.menuStyle001 li > a {
    padding: 4px 16px;
    font-weight: normal;
    text-transform: capitalize;
    display: block;
}

.secondary-dropdown.WaGadgetCustomMenu.menuStyle001 ul li a {
    color: white;
}

.secondary-dropdown.WaGadgetCustomMenu.menuStyle001 li > a:hover {
    text-decoration: none;
}

.secondary-dropdown.WaGadgetCustomMenu.menuStyle001 ul li:hover {
    background: #242830;
}

/**
 * vertical menu css
 */
.WaGadgetMenuVertical.VerticalMenuStyle001 ul.firstLevel>li>.item:hover>a {
    color: #371e79;
}

.WaGadgetMenuVertical.VerticalMenuStyle001 .menuInner ul.firstLevel
 {
    border: hidden;
}






/**
 * blog header
 */
 .WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxHeaderOuterContainer h4.boxHeaderTitle a {
    
    color: #371e79 !important;
    font-family: 'Raleway',sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: bold;
    
    
 }

 .WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxHeaderOuterContainer {
    
    border-top: 4px solid #371e79;
    margin-top: 20px;
    padding-top: 50px;
    
}

.WaGadgetRecentBlogPosts.recentBlogPostsStyle001 ul li .title a{
  color: #371e79 !important;
    font-family: 'Raleway',sans-serif;
    font-size: 20px;
    font-style: normal;
    text-decoration: underline;
    
 }

/**
 * Directory formatting
 */

#membersTable.membersTable tbody tr.normal td.memberDirectoryColumn1 div.memberValue h5 a{
    color: #371e79;
    font-weight: bold;
    font-size: 18px;
    font-family: Raleway, sans-serif;
    

}


#membersTable.membersTable tbody tr.hover td.memberDirectoryColumn1 div.memberValue h5 a{
    color: #808080;
    font-weight: bold;
    font-size: 18px;
    font-family: Raleway, sans-serif;
    

}



/**
 * Add scrollbars to directories
 */

.filterOptions::-webkit-scrollbar {
    -webkit-appearance: none;
}

.filterOptions::-webkit-scrollbar:vertical {
    width: 11px;
}

.filterOptions::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

/**
 * give details and summaries standard fonts etc
 */

.mySummary {
    color: #371e79;
    font-size: 19px;
    font-family: raleway, Arial, sans-serif;
}

.mySummaryBold {
    color: #371e79;
    font-size: 24px;
    font-weight: bold;
    font-family: raleway, sans-serif;
}

.mydetails {
    color: #22252D;
    font-size: 16px;
    font-family: Raleway, Arial, sans-serif;
    line-height: 1.8;
}

.mytable {
    color: #808080;
    font-size: 18px;
    font-family: raleway, Arial, sans-serif;
}

.mylinksmenu {
    color: #5b5b5b;
    font-size: 22px;
    font-family: Raleway, Arial, sans-serif;
    line-height: 44px; 
} 
    
 



  /**
 * members section custom div
 */  
.grid-container {
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: auto;
  gap: 10px 10px;
  grid-template-areas:
    "memicon memsection";
}
.memicon { grid-area: memicon; }
.memsection {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px 10px;
  grid-template-areas:
    "memtitle memtitle memtitle"
    "memdescription memdescription memdescription";
  grid-area: memsection;
}
.memtitle { grid-area: memtitle; }
.memdescription { grid-area: memdescription; }




/**
 * Smooth scrolling on the whole document
 */
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/**
 * keep svg and words together - put <span class="nowrap">
 */
.nowrap {
    white-space: nowrap;
}

/**
 * give button 4 different font 
 */
a.stylizedButton.buttonStyle001 {
    transition: background-color .25s ease;
}

a.stylizedButton.buttonStyle001:hover {
    background-color: #8e1b7e;
}

a.stylizedButton.buttonStyle004 {
    font-family: Raleway, sans-serif;
    border-color: transparent;
    border: 0px;
    font-size: 30px;
    padding: 0px 0px;
    line-height: 1.2;
    transition-duration: 0.4s;
}

/**
 * custom button 7 - members section menu
 */
.button7{
    color: rgba(129, 126, 125, 0.897)!important;
    font-family: 'Raleway',sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.2;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: uppercase;
    transition-duration: 0.4s;
}

.button7:hover {
    color: #371e79 !important;
}

    /**
 * members section header
 */
.header10{
    color: rgba(129, 126, 125, 0.897)!important;
    font-family: 'Raleway',sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.2;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: uppercase;
   
}

 /**
 * members section header
 */
.header11{
    color: rgba(129, 126, 125, 0.897)!important;
    font-family: 'Raleway',sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    line-height: 28px;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: uppercase;
   
}


/**
 * custom button 8 - big buttons on homepage
 */
.button8{
    color: #37302D !important;
    font-family: 'Raleway',sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.2;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase;
    transition-duration: 0.4s;
}

.button8:hover {
    color: rgba(129, 126, 125, 0.897) !important;
    }

    /**
 * custom button 9 - big buttons on homepage
 */
.button9{
    color: #22252D !important;
    font-family: 'Raleway',sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.5;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase;
    transition-duration: 0.4s;
    letter-spacing: 0.8px
}

.button9:hover {
    color: rgba(129, 126, 125, 0.897) !important;
    }

      /**
 * custom button 10 - buttons members section
 */
.button10{
    color: #22252D !important;
    
    font-family: 'Raleway',sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.2;
    text-align: center !important;
    text-decoration: none !important;

    transition-duration: 0.4s;
}

.button10:hover {
    color: rgba(129, 126, 125, 0.897) !important;
    }
 /**
 * custom button 11 - big buttons on homepage
 */
.button11{
    color: #22252D !important;
    font-family: 'Raleway',sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.5;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase;
    transition-duration: 0.4s;
    letter-spacing: 0.8px
}

.button11:hover {
    color: rgba(129, 126, 125, 0.897) !important;
    }
    
     

     /**
 * custom button 12 - new small menu on members section - header button
 */
.button12{
     color: rgba(129, 126, 125, 0.897)!important;
    font-family: 'Raleway',sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    line-height: 2;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase;
    transition-duration: 0.4s;
    letter-spacing: 0.8px
}

.button12:hover {
    color: rgba(129, 126, 125, 0.897) !important;
    }
    
    



     /**
 * Events header font on both main page and registration page
 */

.WaGadgetEventsStateDetails .pageTitleOuterContainer .eventsTitleContainer h1
{
    
    font-family: 'lato',sans-serif !important;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.2;
    
    text-decoration: none !important;

}


   .WaGadgetEvents .titleContainer h1
   {
    
    font-family: 'lato',sans-serif !important;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.2;
    
    
    

}

.WaGadgetEventsStateList .pastEventsOuterContainer h3.sectionTitle
{
font-family: 'Raleway',sans-serif !important;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.2;
    text-transform: uppercase;
    color: #371e79;
    }

    .WaGadgetEventsStateList .upcomingEventsOuterContainer h3.sectionTitle
{
font-family: 'Raleway',sans-serif !important;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.2;
    text-transform: uppercase;
    color: #371e79;
    }

.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfoContainer h4.infoTitle
{
font-family: 'Raleway',sans-serif !important;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.2;
    
    
    }
.WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList {

    font-family: 'Raleway',sans-serif !important;
    font-style: normal;
    line-height: 2;
}


    
   /**
 * custom button 13 - Information small text menu
 */
.button13{
    color: rgba(129, 126, 125, 0.897)!important;
    font-family: 'Raleway',sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: 1.4;
    text-align: left !important;
    text-decoration: none !important;
    transition-duration: 0.4s;
    
}

.button13:hover {
    color: #371e79 !important;
}

/* Css for the tabs on the Directory pages */

/* The wrapper that encapsualtes the tab */

.tab-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* An individual tab */

.tab {
    width: 100%;
    height: 80px;
    font-family: 'raleway',sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    background-image: url("/resources/Theme/Background/2022/FB_Homepage Banner 07.jpg");
    background-repeat: no-repeat;
    background-position-y: 30%;
       background-size: 1080px;
    border-radius: 50px;
    box-sizing: border-box;
}


.tab:nth-child(1) {
    background-position-x: left;
}
.tab:nth-child(2) {
    background-position-x: 35%;
}
.tab:nth-child(3) {
    background-position-x: 65%;
}
.tab:nth-child(4) {
    background-position-x: right;
}

.tab span {
    position: relative;
    max-width: 150px;
}

.tab span::after {
    content: '';
    position: absolute;
    background: #ffffff;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    transform: scaleX(0);
    transition: transform .5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.tab img {
    width: 45px;
    margin-left: 4px;
}

.tab span,
.tab img {
    opacity: .8;
    transition: opacity .25s ease;
}


/* The active tab */

.tab.active span,
.tab.active img,
.tab:hover span,
.tab:hover img {
    opacity: 1;
}
.tab.active span::after,
.tab:hover span::after {
    transform: scaleX(.8);
}


/* Mobile view */
@media screen and (max-width: 559px) {
    .tab:not(:last-child) {
        margin-bottom: 8px;
    }
}


/* Tablet view */

@media (min-width:479px) and (max-width:559px) {
    .tab {
        width: 70%;
    }
}

@media screen and (min-width:560px) {
    .tab-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0 -4px;
        justify-content: center;
    }
    .tab {
        width: calc(50% - 8px);
        margin: 0 4px;
    }
}

@media screen and (min-width:679px) {
    .tab {
        width: calc(40% - 8px);
    }
}

@media (min-width:560px) and (max-width:999px) {
    .tab:nth-child(3),
    .tab:nth-child(4) {
        margin-top: 4px;
    }
}


/* Desktop view */
@media screen and (min-width:1000px) {
    .tab {
        width: calc(25% - 8px);
    }
}




/* Style for rates tables */

.ratestableheader {

color: #333333 !important;
  font-family: 'raleway',sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 26px;
  
}
.ratestable {

  color: #333333 !important;
  font-family: 'raleway',sans-serif;
  font-size: 16px;
  white-space: nowrap;
  line-height: 22px;
  overflow-x:auto;
      
}


/* Style A for floating menu on members section */
 

  .floating-menu {
    font-family: sans-serif;
    background: white;
    line-height: 0.9 !important;
       z-index: 100;
    position: fixed;
  }

  .floating-menu a, 
  .floating-menu h3 {
   
    display: block;
    line-height: 0.9 !important;
    color: white;
  }

/* Style B for floating menu on members section with JS */
  
.content { height: 500px; }
.fixme { 
background: white;
z-index: 1000;


}

/* Loader */
.loader-container iframe {
    position: relative;
}
.loader {
  display: inline-block;
  position: absolute;
  width: 80px;
  height: 80px;
  left: calc(50% - 40px);
  top: 20px;
}
.loader div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #371e79;
  border-radius: 50%;
  animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #371e79 transparent transparent transparent;
}
.loader div:nth-child(1) {
  animation-delay: -0.45s;
}
.loader div:nth-child(2) {
  animation-delay: -0.3s;
}
.loader div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Job alerts */

.job-alert {
    padding: 4px;
    background-image: url("/resources/Theme/Background/2022/FB_Homepage Banner 07.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.job-alert-container {
    background-color: white;
}

.job-alert-container:not(:last-child) {
    margin-bottom: 16px;
}

.job-alert,
.job-alert .top,
.job-alert .bottom {
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
}

.job-alert .top,
.job-alert .bottom {
    display: flex;
}

.job-alert .top {
    padding: 8px;
    background: white;
}

.job-alert h3 {
    color: #371e79;
    font-size: 18px !important;
    font-weight: bold;
    margin-top: 0;
    width: 80%;
}

.job-alert h3,
.job-alert .infos {
    text-transform: capitalize;
}

.job-alert .icons {
    display: flex;
    align-items: flex-start;
}

.job-alert .icons img {
    width: 60px;
    margin-right: 8px;
}

.job-alert .infos img {
    width: 20px;
    height: 20px;
    margin: 2px 8px 0 0;
}

.job-alert .infos p {
    margin-top: 0;
    display: flex;
}

.job-alert .infos p:last-child {
    margin: 0;
}

.job-alert .bottom {
    padding: 8px;
    color: white;
}

/* Mobile only */
@media screen and (max-width:479px) {
    .job-alert .top,
    .job-alert .bottom {
        flex-direction: column;
    }
    .job-alert .top > *:not(last-child) {
        margin-bottom: 16px;
    }
    .job-alert .bottom strong:first-child {
        margin-bottom: 8px;
    }
}

/* Tablet and desktop */
@media screen and (min-width:480px) {
    .job-alert .top {
        padding: 12px;
    }
    .job-alert .bottom {
        padding: 8px 16px;
    }
    .job-alert h3 {
        width: 60%;
        margin: 0;
    }
    .job-alert .icons {
        width: 20%;
        margin: 0 2%;
        justify-content: flex-end;
    }
    .job-alert .infos {
        width: 25%;
    }
    .job-alert .bottom {
        justify-content: space-between;
    }
}

/* Rounded tiles */

.rounded-tiles tr,
.rounded-tiles .WaLayoutItem,
.rounded-tiles .placeHolderContainer {
    display: flex !important;
}

.rounded-tiles .placeHolderContainer,
.rounded-tiles .placeHolderContainer > div {
    width: 100%;
}

.rounded-tiles td .placeHolderContainer > div {
    background: white;
    margin: 30px;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
}

@media screen and (max-width:767px) {
    .rounded-tiles-slider .WaLayoutItem {
        width: calc(100% - 48px) !important;
        flex-shrink: 0;
    }
    .rounded-tiles-slider td:first-child .placeHolderContainer > div {
        margin-right: 0;
    }
    .rounded-tiles-slider td:nth-child(3) .placeHolderContainer > div {
        margin-right: 8px;
        margin-left: 8px;
    }
    .rounded-tiles-slider td:last-child .placeHolderContainer > div {
        margin-left: 0;
    }
    .rounded-tiles-slider tr {
        overflow-x: auto;
    }
    .rounded-tiles-blocks tr {
        flex-direction: column;
    }
    .rounded-tiles-blocks .WaLayoutItem {
        width: 100% !important;
    }
}

/* Modal */

.modal-trigger,
.job-alert {
  cursor: pointer;
  transition: 0.3s;
}

.modal-trigger:hover,
.job-alert:hover {
    opacity: 0.7;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content (no image) */
.modal-content {
    width: 500px;
    background: white;
    padding: 40px;
    border-radius: 6px;
    margin: auto;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    box-sizing: border-box;
    font-family: 'Raleway',sans-serif;
}

.modal-content p {
    margin-top: 0;
}

.modal-content a {
    margin: 16px auto 0;
    width: 80%;
}

.modal-text:last-of-type {
    margin-bottom: 32px;
}

/* Modal Content (image) */
.modal-img {
  margin: auto;
  display: block;
  width: 80%;
}

/* Caption of Modal Image */
.modal-caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-img, .modal-caption, .modal-content {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.25s;
  animation-name: zoom;
  animation-duration: 0.25s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.modal-close:hover,
.modal-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-img {
    width: 100%;
  }
}

/* Specific to Job Alerts modal */
#job-alert .modal {
    padding-top: 0;
    background-color: transparent;
}
#job-alert > .modal > .modal-close {
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(0,0,0,.2);
    cursor: inherit;
}

#job-alert .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#job-alert .modal-content .modal-close {
    top: -5px;
    right: 15px;
    color: #371e79;
}

#job-alert .modal-content a.stylizedButton {
    margin-bottom: 10px;
}

/* MEMBERSHIPS */


@media screen and (min-width:479px) {
    .splide__list {
        justify-content: center;
    }
}
.membership:last-child {
    margin-right: 0 !important;
}
.membership * {
    box-sizing: border-box;
    font-family: 'Raleway',sans-serif;
}
.membership h2,
.membership h3,
.membership h4,
.membership p {
    margin: 0;
}
.membership h2 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
.membership-inner {
    border-radius: 6px;
    border-width: 2px;
    border-style: solid;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.membership-inner.purple {
    border-color: #371e79;
}
.membership-inner.pink {
    border-color: #8E1B7E;
}

/* MEMBERSHIP TOP */

.membership-top h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 8px;
}
.membership-inner.purple .membership-top > h2 {
    color: #371e79;
}
.membership-inner.pink .membership-top > h2 {
    color: #8E1B7E;
}

/* MEMBERSHIP BLOCKS */

.membership-block {
    width: 100%;
    padding: 16px;
    margin-bottom: 16px;
    text-align: center;
}
.membership-block.row {
    display: flex;
    padding: 0;
}
.membership-block.row .membership-block {
    width: 50%;
}
.membership-block h3,
.membership-block h4 {
    color:#000000 !important;
    margin-bottom: 8px;
}
.membership-block h3 {
    font-size: 24px;
    font-weight: bold;
}
.membership-block h4 {
    font-size: 18px;
    font-weight: normal;
}
.membership-block.blue {
    background-color: #C3D0E5;
}
.membership-block.light {
    background-color: #e0ecf5;
}
.membership-block.pink {
    background-color: #EDDDEC;
}
.membership-block.purple {
    background-color: #d8d5e9;
}
.membership-block.grey {
    background-color: #F4F4F4;
}

/* MEMBERSHIP PLAN */

.membership-plan {
    padding: 16px;
    margin-top: auto;
}
.membership-plan h2 {
    color: #371e79;
}
.membership-plan ul {
    padding: 0;
}
.membership-plan li {
    list-style: none;
    position: relative;
    margin-top: 16px;
    padding-left: 32px;
    font-size: 14px;
}
.membership-plan li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: cover;   
}
.membership-plan li.check::before {
  background-image: url("/resources/Pictures/Icons%202022/Ticks/FB_Tick01.svg")
}
.membership-plan li.uncheck::before {
  background-image: url("/resources/Pictures/Icons%202022/Ticks/FB_Cross01.svg")
}

/* MEMBERSHIP INFOS */

.membership-infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
}
.membership-infos span {
    color: #371e79;
    font-size: 60px;
    font-weight: bold;
    line-height: 60px;
    margin-bottom: 8px;
}
.membership-infos p {
    text-align: center;
}
.membership-infos a {
    margin: 24px 0 !important;
    font-size: 24px !important;
}
.membership-infos p:last-child {
    font-size: 14px;
}

/* HEIGHTS */

/* mobile */

.membership-top {
    height: 45rem;
}
.membership-plan {
    height: 55rem;
}
.membership-top > .membership-block:first-of-type {
    height: 10rem;
}
.membership-top > .membership-block:last-of-type {
    height: 25rem;
}

/* tablet vertical */
@media screen and (min-width:479px) {
    .membership-top {
        height: 35rem;
    }
    .membership-plan {
        height: 45rem;
    }
    .membership-top > .membership-block:last-of-type {
        height: 16rem;
    }
}

/* desktop 
@media screen and (min-width:1024px) {
    .membership-top {
        height: 32%;
    }
    .membership-plan {
        height: 43%;
    }
    .membership-infos {
        height: 25%;
    }
    .membership-top h2 {
        height: 20%;
    }
    .membership-top > .membership-block:first-of-type {
        height: 30%;
    }
    .membership-top > .membership-block:last-of-type {
        height: 45%;
    }
}
*/

/*
.membership-top {
    border: 1px solid red;
}
.membership-plan {
    border: 1px solid blue;
}
.membership-infos {
    border: 1px solid green;
}
*/

/* Memberships on the join page */

.memberships tr,
.memberships td {
    display: flex !important;
}
.memberships td.WaLayoutItem {
    min-width: 300px;
}
.memberships td.WaLayoutSeparator {
    display: none;
}
.memberships .placeHolderContainer {
    background: white;
    border-radius: 4px;
    margin: 30px;
    padding: 16px;
    border-width: 2px;
    border-style: solid;
}
.memberships tr > td:first-of-type .placeHolderContainer {
    border-color: #371e79;
}
.memberships tr > td:last-of-type .placeHolderContainer {
    border-color: #8E1B7E;
}
.memberships a.stylizedButton {
    display: block;
    margin: 0 auto;
    width: fit-content;
}
.memberships [class^="WaGadget"] {
    margin-bottom: 0;
}

.memberships .placeHolderContainer > div > div:nth-child(4) .gadgetContentEditableArea > p > font {
    display: flex;
    align-items: flex-start;
}
.memberships .placeHolderContainer > div > div:nth-child(4) .gadgetContentEditableArea > p > font > img {
    width: 20px;
    margin-right: 8px;
}

/* Props layout 

.memberships-props .row {
    display: flex;
    margin: 0 -8px;
}
.memberships-props .column {
    padding: 16px;
    margin: 0 8px;
}
.memberships-props .column.blue {
    background: #c3d0e5;
}
.memberships-props .column.light {
    background: #e0ecf5;
}
.memberships-props .column.pink {
    background: #edddec;
}
.memberships-props .column.purple {
    background: #d8d5e9;
}
*/

@media screen and (max-width:767px) {
    .memberships {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .memberships tr {
        overflow-x: auto;
    }
    .memberships .placeHolderContainer {
        margin: 8px;
    }
}
@media screen and (max-width:999px) {
    /*
    .memberships-props .row {
        flex-direction: column;
        margin: 0;
    }
    .memberships-props .column {
        margin: 0;
    }
    .memberships-props .column.light,
    .memberships-props .column.purple {
        margin-top: 16px;
    }
    */
    
    .memberships .placeHolderContainer > div > div:nth-child(2) .gadgetContentEditableArea {
        padding: 16px !important;
    }
}

@media (min-width:1000px) and (max-width:1205px) {
    .memberships .placeHolderContainer > div > div:nth-child(1) {
        padding: 0 50px;
    }
}

/* Tabs inside tiles */

.memberships .tab {
    width: 100%;
    height: 90px;
    flex-direction: column;
}
.memberships .tab:not(:last-child) {
    margin-bottom: 16px;
}
.memberships .tab span {
    max-width: 100%;
    opacity: 1;
}
.memberships .tab span:not(:nth-of-type(2))::after {
    display: none;
}
.memberships .tab span:nth-of-type(2) {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 24px;
    margin: 8px 0;
}
@media screen and (max-width:480px) {
    .memberships .tab span:not(:nth-of-type(2)) {
        font-size: 11px;
    }
}


/* Thomas Join Page */

.plan-picker-wrapper {
    max-width: 100vw;
    padding: 0 30px;
    display: none;
}

.plan-picker {
    display: flex;
    -moz-box-pack: center;
    justify-content: center;
    width: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
}

.plan-picker-button {
    background-color: rgb(255, 255, 255);
    color: #22252D;
    padding: .5rem;
    font-size: 0.8rem;
    flex: 1 1 0%;
    border-style: none;
    border-radius: 5px;
    margin: 0.5rem;
    font-weight: bold;
    transition: all 0.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    }

.plan-picker-button.u-active,
.plan-picker-button:hover {
    color: rgb(255, 255, 255);
    background: #22252D;
    cursor: pointer;
}

#plan-carousel {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    padding: 20px;
    margin: 0px auto;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

.plan-button .button {
    background-color: #371E79;
    color: white !important;
    border-radius: 3px;
    text-decoration: none;
    font-weight: bold;
    font-family: "Lato";
    margin: 0;
    transition: all 0.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

.plan-button .button:hover {
    background-color: #1b0f3c;
}

.plan-button--muted .button {
    background-color: #755aa6;
}

.plan-button--muted .button:hover {
    background-color: #3a2d53;
}

.plan {
    text-align: center;
    width: 25vw;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    font-family: 'Lato'
}

.plan h3 {
    font-weight: bold;
    font-family: "Raleway";
    font-size: 1rem;
    text-align: left;
}

.plan-benefits p {
    text-align: left;
}

.plan-benefits li {
    display: flex;
}

.plan-resources {
    text-align: left;
}

.plan-resources ul {
    margin: 0;
    padding: 1rem;
}

.plan-prefix {
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-frame {
    background-color: white;
    border-radius: 5px;
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.plan-flag {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: red; */
    width: 0px;
    height: 0px;
    border-radius: 5px 0px 0px 0px;
    border-top: 50px solid #8e1b7e;
    border-left: 50px solid #8e1b7e;
    border-bottom: 50px solid transparent;
    border-right: 50px solid transparent;
    box-sizing: border-box;
}

.plan-flag span {
    font-size: 1.1rem;
    color: white;
    text-align: center;
    /* border: 1px solid black; */
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    line-height: 15px;
    display: inline-block;
    transform: translateX(-45px) translateY(-45px) rotate(-45deg);
}

.prefix--active + .plan-frame .plan-flag {
    left: -2px;
    border-radius: 0px;
}

.plan-flag span small {
    font-size: .8rem;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.plan--transparent .plan-frame {
    background: none;
    border: 2px solid white;
}

.plan--transparent * {
    color: white !important;
}

.plan--transparent .tick:after {
    border-color: white;
}

.plan--transparent .button {
    background-color: white;
    color: black !important;
    border: 2px solid transparent;
}

.plan--transparent .button:hover {
    color: white !important;
    border: 2px solid white;
}

.prefix--active {
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid white;
    color: white;
    font-weight: bold;
    border-radius: 5px 5px 0px 0px;
}

.prefix--active + .plan-frame {
    border: 2px solid white;
    border-top: none;
    border-radius: 0px 0px 5px 5px;
}

.plan-price {
    color: #371E79;
    font-weight: bold;
    font-size: 4.5rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.plan-price::before {
    content: '£';
    font-size: 2.6rem;
    display: block;
    margin-right: 0.5rem;
}

.plan-price span {
    display: block;
}

.plan-price small {
 font size: 3rem;
}

.plan-title {
    font-size: 1.5rem;
    font-family: 'Raleway';
    font-weight: bold!important;
    margin: 0;
    margin-top: 1rem;
}

.plan-title sub {
    color: #222;
    font-weight: normal;
    display: block;
    font-size: 1.4rem;
    margin-top: .5rem;
    font-family: 'Lato';
}

.plan-discount {
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.plan-desc {
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin-bottom: 2rem;
}

.plan-desc-2 {
    margin-top: -1rem;
    margin-bottom: 2rem;
}

.plan-benefits {
    text-align: left;
    font-size: 1rem;
}

.plan-benefits p {
    text-align: left;
}

.plan-benefits ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.plan-benefits li, .plan-resources li {
    padding-bottom: .8rem;
}

.tick:after {
    content: '';
    display: inline-block;
    transform: rotate(45deg);
    height: 12px;
    width: 5px;
    border-bottom: 2px solid #78b13f;
    border-right: 2px solid #78b13f;
    margin-right: 10px;
}

@media only screen and (max-width: 768px) {
    #plan-carousel {
        gap: 5vw;
        padding: 1.5rem 3rem;
    }
    .plan {
        width: 75vw;
        flex-shrink: 0;
    }

    #plan-carousel.u-show-A {
        transform: translateX(80vw);
    }

    #plan-carousel.u-show-B {
        transform: translateX(0vw);
    }

    #plan-carousel.u-show-C {
        transform: translateX(-80vw);
    }
    .plan-picker-wrapper {
        display: block;
    }
}

/* 
    Join us page - accordion
*/

.accordion h2 {
    font-family: "Raleway";
    font-size: 2rem;
    font-weight: bold;
    margin-top: unset;
}

.accordion--faqs {
    max-width: 800px;
    margin: 0px auto;
}

.accordion summary {
    font-family: "Raleway";
    font-size: 1.4rem;
    padding: 1.5rem 1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.accordion summary::-webkit-details-marker {
    display: none
}

.accordion .answer {
    padding: 0rem 1rem 1.5rem 1rem;
    display: block;
    font-family: "Raleway";
}

.summary-indicator:after {
    font-family: 'Menlo', 'Lucida Console', 'Monaco', 'Consolas', monospace;
    content: '+'
}

.accordion details[open] .summary-indicator:after {
    content: '-'
}

.accordion summary:hover {
    background-color: #FAFAFA;
}

.accordion details {
    border-bottom: 0.2rem solid #FAFAFA;
}

.accordion details:first-of-type {
    border-top: 0.2rem solid #FAFAFA;
}

.accordion + .accordion details {
    border-top: none;
}

@media only screen and (max-width: 768px) {
    .accordion summary {
        font-size: 1.2rem;
    }
    .accordion .summary-indicator {
        font-size: 1.6rem;
    }
    .accordion .answer {
        padding-top: 1.5rem;
    }
} 

/* CALC */

            #calculator {
                background-color: #f6f6f6;
                padding: 20px;
                max-width: 400px;
            }

            #calculator hr {
                height: 1px;
                background-color: rgb(128, 128, 128);
                border: none;
                margin-top: 1rem;
                margin-bottom: 2rem;
                margin-left: 0rem;
                margin-right: 0rem;
            }

            #calculator h1,
            #calculator h2 {
                margin-top: 0rem;
                margin-bottom: .5rem;
            }

            #calculator h2 {
                /* text-transform: uppercase; */
                font-family: 'Raleway','Arial',sans-serif;
            }

            #calculator h1 + p {
                margin-top: 0rem;
                margin-bottom: 1rem;
            }

            #calculator select,
            #calculator input[type="text"] {
                min-width: 200px;
                margin-bottom: 1rem;
            }

            #calculator table td,
            #calculator table th {
                padding-right: 1rem;
            }

            #calculator table th {
                font-size: 15px;
            }

            #calculator #results-header {
                display: flex;
                align-items: baseline;
                justify-content: start;
            }

            #calculator #results-label {
                color: #676767;
            }

            #calculator .header {
                margin-right: .5rem;
                margin-bottom: 0;
                margin-top: 0;
                margin-left: 0;
            }

            #calculator #role-choice {
                margin-bottom: 2rem;
            }

            #calculator * {
                font-family: 'Raleway','Arial',sans-serif!important;
            }

            #calculator .calculator-button {
                border: none;
                background-color: #371E79;
                transition: background-color .25s ease;
                position: relative;
                display: inline-block;
                box-sizing: border-box;
                min-width: 112px;
                margin: 0;
                padding: 8px 20px;
                color: white;
                font-family: 'Lato','Arial',sans-serif;
                font-size: 16px;
                font-style: normal;
                font-weight: normal;
                line-height: 1.5;
                white-space: nowrap;
                text-align: center;
                text-transform: uppercase;
            }

            #calculator .calculator-button:disabled {
                opacity: .5;
                background-color: grey;
                cursor: not-allowed
            }

            #calculator .calculator-button:disabled:hover {
                opacity: .5;
                background-color: grey;
                cursor: not-allowed;
            }

            #calculator .calculator-button:hover {
                background-color: #8e1b7e;
            }

            #calculator .calculator-button:active {
                background-color: #8e1b7e;
            }

            #calculator .calculator-reset {
                background-color: #353a50;
            }

            #calculator .calculator-reset:active {
                background-color: #22252d;
            }

            #calculator .calculator-reset:hover {
                background-color: #22252d;
            }

            #calculator #switch-weekly,
            #calculator #switch-daily {
                margin-top: 2rem;
            }

            #calculator label {
                display: inline-block;
                margin-bottom: .5rem;
                color: #676767;
                font-style: italic;
            }

            #calculator .calculator-input,
            #calculator #results-wrapper {
                display: flex;
                flex-direction: column;
            }

            #calculator #results-header {
                margin-bottom: 1rem;
            }

            #calculator table {
                /* margin-bottom: 1rem; */
                text-align: center;
            }

            #calculator button {
                margin-bottom: 1rem!important;
            }

             #calculator .calculator-footer {
                 margin-top: 1rem;
                 text-align: center;
             }

             #calculator .calculator-footer summary {
                 font-style: italic;
                 font-size: .9rem;
             }

            #calculator .calculator-footer div {
               display: block;
            }

            #calculator .calculator-footer div + div {
               margin-top: .5rem;
            }

            #calculator #results-table-weekly td,
            #calculator #results-table-weekly th,
            #calculator #results-table-daily td,
            #calculator #results-table-daily th {
                width: 50%;
            }

            #calculator #result-message {
                text-align: center;
                margin-top: -30px;
                height: 30px;
                line-height: 30px;
            }

            #calculator #result-note {
                text-align: center;
                font-size: 14px;
                font-style: italic;
                max-width: 300px;
                margin: 10px auto 0px auto;
            }

            #calculator th {
                font-size: 1.2rem;
                text-align: center;
            }

            #calculator th span {
                color: #676767;
                font-style: italic;
                font-size: 1rem;
                display: block;
                font-weight: lighter;
            }

            #calculator .results-row,
            #calculator .results-message {
                height: 30px;
            }

            #calculator .results-row {
                font-size: 1.5rem;
            }

            #calculator #data-source {
                display: flex;
                flex-direction: column;
                font-size: 14px;
                font-style: italic;
                gap: .25rem;

                
            }

            #calculator #data-credit {
                margin-top: 1.5rem;
            }

    /* WRAPPER - HORIZONTAL VARIANT */

     #calculator-wrapper {
        background-color: #f6f6f6;
        margin-bottom: 2rem;
        padding: 20px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    #calculator-wrapper #calculator {
        background-color: unset;
        padding: 0px;
    }

    #calculator-wrapper h1 {
        margin-top: 0rem;
        margin-bottom: .5rem;
    }

    .calculator-info {
        max-width: 400px;
    }

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

    #calculator-wrapper {
        display: block;
    }
   
    #calculator-wrapper .calculator-button {
        min-width: 250px
    }

    .calculator-info {
        max-width: unset;
    }

    #calculator-wrapper .calculator-info {
        text-align: center;
    }
    
    #calculator-wrapper .calculator-button + .calculator-button {
        margin-left: 1rem!important;
    }

    #calculator-wrapper #calculator {
        display: flex;
        flex-direction: row;
        gap: 20px;
        flex-wrap: wrap;
        max-width: unset;
    }

    #calculator-wrapper .calculator-input,
    #calculator-wrapper #results-wrapper {
        flex: 1;
    }

    #calculator-wrapper #results-wrapper {
        justify-content: center;
    }

     #calculator-wrapper #calculator .calculator-footer {
         flex: 100%;
     }

    

    #calculator-wrapper #role-choice {
        margin-bottom: unset;
    }

    #calculator-wrapper #switch-daily,
    #calculator-wrapper #switch-weekly {
        margin: unset !important;
    }

    #calculator-wrapper #calculator table td {
        padding-top: 1rem;
    }

    #calculator #data-source {
        gap: 1rem;
        text-align: center;  
        justify-content: center;
        flex-direction: row;
    }

    #calculator #data-credit br {
        display: none;
    }
    
    }

.rates-table {
                color: #333333 !important;
                font-family: 'raleway',sans-serif;
                font-size: 16px;
                line-height: 22px;
                overflow-x: auto;
            }

            .rates-table-footer p {
                font-size: 12px;
                margin-bottom: 0px !important;
            }

            .rates-table td,
            .rates-table th {
                padding: 10px;
            }

            .rates-table thead th {
                font-size: 18px;
                font-weight: bold;    
                line-height: 26px;
                
            }

            .rates-table tbody th {
                text-align: left;
                font-size: 16px;
                background-color: rgb(247, 247, 247);
            }

            .rates-table thead th:first-of-type {
                text-align: left;
            }

            .rates-table tbody tr td {
                text-align: center;
            }
            
            .rates-table tbody tr td:nth-child(2) {
                background-color: rgb(197, 144, 192,0.3);
            }

            .rates-table tbody tr td:nth-child(3) {
                background-color: rgb(123, 111, 177, 0.3);
            }

            .rates-table tbody tr td:nth-child(4) {
                background-color: rgb(54, 96, 170, 0.3);
            }

            .rates-table tbody tr td:nth-child(5) {
                background-color: rgb(149, 189, 219, 0.3);
            }


            .rates-table thead th:nth-child(2) {
                background-color: rgb(197, 144, 192,0.4);
            }

            .rates-table thead th:nth-child(3) {
                background-color: rgb(123, 111, 177, 0.4);
            }

            .rates-table thead th:nth-child(4) {
                background-color: rgb(54, 96, 170, 0.4);
            }

            .rates-table thead th:nth-child(5) {
                background-color: rgb(149, 189, 219, 0.4);
            }

            .rates-table thead th .period {
                font-weight: normal;
            }

            .rates-table-wrapper .rates-table {
                width: 100%;
            }

            details .rates-table-wrapper {
                margin: 20px 0px
            }

            .rates-table-wrapper {
                overflow-x: scroll;
                overscroll-behavior-x: none;
            }

            .rates-table-wrapper .rates-table tr th:first-of-type {
                position: -webkit-sticky;
                position: sticky;
                left: 0;
            }

            .rates-table-wrapper .rates-table thead tr th:first-of-type {
                background-color: white;
            }

            .rates-table-wrapper .rates-table-footer {
                position: sticky;
                left: 0;
            }