[class^='WaLayoutContainer'], .gadgetStyleNone {margin-bottom:0px!important;}

.login-link-outer {text-align:right; width:170px;
  margin-left: auto;
  margin-right: 0;
  padding: 25px;
  font-size: 18px;
  background-color: #f0f0f0;
  text-align: right;
  overfow: hidden;
  max-width:100%!important;
  text-decoration:none;}

  .login-link {text-decoration:none; padding:5px;}
  .login-block a {display: inline-block; margin-top: 10px;
color: #ee2a7b; text-decoration: none;}

.header-mobile {
      background-image: url('https://fwn.redrebelcreative.com/FWN_homepage-Hero-v1.jpg');
      background-position: left center;
      background-size: cover;
      background-attachment: scroll;
      background-repeat: no-repeat;
      color:#FFFFFF!important;
      min-height: 300px;
      display: flex;
      align-items: flex-start;
    }

.header-mobile h1 {
  color:#FFFFFF;
  padding: 100px 250px 80px 80px;
  }

.intro-text {padding:40px!important;}

//*.header-mobile {display:none;}

/*.WaLayoutContainer {margin-bottom:0px;}*/
.WaPlaceHolderContent>div {padding: 10px 0;}
.strapline p {font-size:26px; padding:30px 0px;}

/* hide image showing on mobile */
#id_WCo78Yd {
  display: none !important;
}

/* Hide by default (for desktop/tablet) */
#camera_wrap_B7DybBr {
  display: block;
}

/* Mobile Slideshow */
@media (max-width: 768px) {
  .header-slideshow {
    display: block !important;
    width: 100%;
    overflow: hidden;
  }

  .header-slideshow img {
    width: 100%;
    height: auto;
    display: block;
  }

  .camera_wrap_B7DybBr {
    height: auto;}
}   

 /*- End of header CSS to view/edit mobile homepage hero code */

/* partners logo for mobile view Make image layout responsive */
@media (max-width: 768px) {
  /* Table row and table behave as normal */
  #id_BbaE1lD .WaLayoutTable,
  #id_BbaE1lD .WaLayoutRow {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important; /* fix column widths */
  }

  /* Each cell is 25% width inline-block */
  #id_BbaE1lD .WaLayoutItem {
    display: table-cell !important;
    width: 25% !important;
    vertical-align: middle !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Fix 2nd image container margin & alignment */
  #id_BbaE1lD #id_OMIIVxF {
    margin: 0 !important;
    margin-top: -10px !important;
  }

  /* Make all images responsive and contained */
  #id_BbaE1lD img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
    vertical-align: middle;
  }
}
@media (max-width: 768px) {
  /* Target 2nd image specifically */
  #id_BbaE1lD #id_OMIIVxF img {
    max-width: 90% !important;  /* reduce width */
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/* Last parters 4 images */
@media (max-width: 768px) {
  .row.four-images p {
    display: flex;
    flex-wrap: nowrap; /* keep in one row */
    justify-content: space-between; /* space between images */
    margin: 0;
    padding: 0;
    overflow: hidden; /* no scroll */
  }

  .row.four-images p a {
    flex: 1 1 0; /* allow to grow and shrink equally */
    max-width: 25%; /* max 25% each for 4 images */
    box-sizing: border-box;
    padding: 0 5px; /* optional spacing */
  }

  .row.four-images p img {
    width: 100% !important; /* make image fill link container */
    height: auto !important;
    display: block;
    object-fit: contain; /* keep aspect ratio */
  }
}
/* End of partners logo Mobile view */

/* Team images for mobile view */
@media (max-width: 767px) {
  .profile-pics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* space between images */
  }

  .profile-pics img {
    flex: 0 0 calc(50% - 10px); /* 2 images per row with gap */
    height: auto;      /* maintain aspect ratio */
    width: 100%;       /* fill the flex item width */
    object-fit: cover; /* crop or fill nicely if needed */
    transition: transform 0.3s ease;
    border-radius: 8px; /* optional: round corners */
  }

  .profile-pics img:hover {
    transform: scale(1.1);
    z-index: 10;
  }
}

/* End of Team images for mobile view */

h1 {font-size: 26px; font-weight: normal; text-transform: none;}
h2 {font-size: 25px; font-weight: normal; text-transform: none;}
h3 {font-size: 24px; font-weight: normal; text-transform: none;}
h4, h5, h6 {font-size: 22px; font-weight: normal; text-transform: none;}
p {font-size: 20px;}
body {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}
.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; text-transform: none;}
a {color: #ee2a7b;}
a:hover {color:#333;}

.loginPanel {width:220px;
  margin-left: auto;
  margin-right: 0;
  padding: 10px;
  background-color: #f0f0f0;
  text-align: right;
  overfow: hidden;
  max-width:100%!important;
  }

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li.sel>.item>a {color:#ee2a7b;}
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel>li.sel>.item>a {color:#ee2a7b;}
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel>li>.item>a {padding: 55px; border-bottom: 1px solid #666; text-align:center; letter-spacing: 8px;}

.homepage-hero {display: contents;}

.homepage-hero h1 {
  color:#FFFFFF;
  padding: 100px 250px 80px 80px;
  }

.intro-text {padding:40px!important;}

.WaGadgetMobilePanel .mobilePanel .menuInner {font: inherit!important;}
  
a.black-button, .black-button a {border:0px; margin:30px; padding:30px; background-color:#414042; border-radius: 30px; text-align: center; width:300px; display:block; vertical-align: middle; color: #FFFFFF;}

a.pink-button, .pink-button a {border:0px; margin:30px; padding:30px; background-color:#ee2a7b; border-radius: 30px; text-align: center; width:300px; display:block; vertical-align: middle; color: #FFFFFF; align-content: center; align-self: center; cursor: pointer;}

a.pink-button, .pink-button a {align-content: center; align-self: center;}

 a.grey-button, .grey-button a {border:0px; margin:30px; padding:30px; background-color:#e6e7e8; border-radius: 30px; text-align: center; width:300px; display:block; vertical-align: middle; color: #414042!important; align-content: center;}

.footer-letschat-button {margin-top:40px; display:block; vertical-align: middle; align-content: left; }

.footerEventDetailsLink {font-size:16px;}

.homepage-buttons {background-color:#e6e7e8;}
.homepage-section-membership-icons {display:inline-block;}

.homepage-section-membership div p {padding: 20px 50px 0px 300px;}
.homepage-section-membership div h2 {padding: 0px 50px 20px 300px;}

.events-hero-section {background-color: #FFFFFF; min-width: 350px; padding:75px; text-align: center;}
.events-header h1 {text-align: center;}
.events-body p, pink-button {text-align: center;}

.white, .footer-column h3 {color:#ffffff!important;}

 .footer-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20px;
      background-color: #ee2a7b;
      color: #ffffff;
    }

    .footer-column {
      flex: 1 1 300px;
      margin: 10px;
      min-width: 250px;
    }

    .footer-column h4 {
      margin-bottom: 10px;
      color: #ffffff;
      text-transform: none;
    }

    .footer-column a {
      display: block;
      margin-bottom: 5px;
      color: #ffffff;
      text-decoration: none;
    }

    .footer-column button {
      padding: 20px;
      background-color: #ffffff;
      color: #414042;
      border: none;
      border-radius: 40px;
      cursor: pointer;
    }

    .copyright {
      margin-top: 20px;
      font-size: 0.8em;
      color: #ffffff;
    }

   .dark-events-wrapper {
      background-color: #414042;
      padding: 0px 20px 40px 20px;
      color: #fff;
      text-align: center;
    }
    .light-events-wrapper {
      background-color: #E6E7E8;
      padding: 40px 20px;
      color: #fff;
      text-align: center;
    }
      .white-events-wrapper {
      background-color: #ffffff;
      padding: 40px 20px;
      color: #000000;
      text-align: center;
    }

    .events-wrapper h2 {
      margin-bottom: 30px;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }

    .dark-button-column a {
      display: inline-block;
      padding: 15px 25px;
      background-color: #e6e7e8;
      color: #414042;
      border-radius: 15px;
      text-decoration: none;
      min-width: 300px;
      text-align: center;
    }

    .dark-button-column span {
      display: inline-block;
      padding: 15px 25px;
      background-color: #e6e7e8;
      color: #414042;
      border-radius: 15px;
      text-decoration: none;
      min-width: 300px;
      text-align: center;
      font-weight: bold;
      margin-bottom:20px;
    }

    .dark-button-column span br {padding-bottom:5px;}

    .dark-button-column:hover a {
    background-color: #ee2a7b;
    color: white; 
    cursor: pointer;
    } 

    .light-button-column a {
    display: inline-block;
    padding: 15px 25px;
    background-color: #414042;
    color: #ffffff;
    border-radius: 15px;
    text-decoration: none;
    min-width: 300px;
    text-align: center;
    }

    .light-button-column:hover a {
    background-color: #ee2a7b;
    color: white; 
    cursor: pointer;
    } 

    .dark-section {
      display: flex;
      width: 100%;
      background-color: #414042;
      color: #ffffff;
    }

      .mid-grey-section {
      display: flex;
      width: 100%;
      background-color: #e6e7e8;
      color: #414042;
    }

     .white-section {
      display: flex;
      width: 100%;
      background-color: #ffffff;
      color: #414042;
    }

    .left {
      width: 20%;
    }

    .left img {
      width: 100%;
      height: auto;
      display: block;
    }

    .award img {
      width: 100%;
      height: auto;
      display: block;
      max-width:300px;
    }

    .shield img {
      width: 100%;
      height: auto;
      display: block;
      max-width:300px;
    }

    .right-col {
      width: 80%;
      padding: 50px;
      box-sizing: border-box;
    }

    @media (max-width: 50vw) {
      .left {
        display: none;
      }

      .right-col {
        width: 100%;
      }
    }

    .row {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .left-sponsor, .right-supporters {
      padding: 10px;
      box-sizing: border-box;
    }

    .left-sponsor {
      flex: 0 0 20%;
      max-width: 20%;
    }

    .right-supporters {
      flex: 0 0 75%;
      max-width: 75%;
    }

    .top-row .left-sponsor,
    .top-row .right-supporters {
      border-top: 10px solid #ee2a7b;
    }

    .top-row .left-sponsor p,
    .top-row .right-supporters p {
      margin-top: 10px;
      font-weight: bold;
    }

    .sponsor-image {
      width: 100%;
      max-width: 200px;
      height: auto;
    }

    .supporter-images {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

      .supporter-images img {
        flex: 1 1 calc(20% - 10px);
      width: 100%;
      height: auto;
      box-sizing: border-box;
    }

    @media (max-width: 768px) {
      .left-sponsor, .right-supporters {
        flex: 1 1 100%;
        max-width: 100%;
      }

      .supporter-images img {
        flex: 1 1 100%;
      }
    }

.four-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.four-images img {
  flex: 1 1 calc(25% - 10px);
  max-width: 250px;
  padding:30px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .four-images img {
    flex: 1 1 100%;
  }
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.about-columns {
  flex: 1 1 calc(33.33% - 20px);
  box-sizing: border-box;
  text-align: center;
  padding:20px;
}

.about-columns img {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin-bottom: 10px;
}

.about-columns h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #FFFFFF;
}

.about-columns p {
  font-size: 1rem;
  margin-bottom: 10px;
}

.three-columns {padding:40px; background-color: #ee2a7b; color:#ffffff; margin-bottom: 0px;}

.membership-columns {
  flex: 1 1 calc(33.33% - 20px);
  box-sizing: border-box;
  text-align: center;
  padding:20px;
}

.membership-columns img {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin-bottom: 10px;
}

.events-hero {
  background-image: url('/resources/Pictures/FWN_events-page-Hero-v1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  box-sizing: border-box;
}

.events-hero-content {
  background-color: white;
  padding: 50px;
  text-align: center;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  box-sizing: border-box;
}

.events-hero-content h1 {
  margin: 0 0 20px;
  font-size: 2.5rem;
}

.events-hero-content p {
  margin: 0 0 30px;
  font-size: 1.1rem;
}

.events-hero-btn {
  display: inline-block;
  padding: 30px 50px;
  background-color: #ee2a7b;
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: bold;
}



.student-membership-section {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  background-color: #e6e7e8;
}

.two-thirds-left {
  flex: 0 0 70%;
  max-width: 70%;
  position: relative;
}

.two-thirds-left img {
  width: 100%;
  height: auto;
  display: block;
}

.student-text-box {
  bottom: 20px;
  left: 20px;
  padding: 40px;
  max-width: 100%;
  box-sizing: border-box;
}

.third-right {
  flex: 0 0 30%;
  max-width: 30%;
}

.third-right img {
  width: 50%;
  height: auto;
  display: block;
  top:-30px;
}

@media (max-width: 50vw) {
  .third-right {
    display: none;
  }

  .two-thirds-left {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.directors {padding:30px;}
.grey-bg {background-color: #e6e7e8;}
.profile-pics {max-width:200px; text-align: center; padding: 30px;}
#idFooterPoweredByContainer {text-align: center; height: 30px; font-size: 12px; }
.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer, .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer {border-right: 3px solid #ee2a7b; border-left: 3px solid #ee2a7b;}

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li.sel>.item:hover>a, .WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item:hover>a {color: #ee2a7b!important;}

.WaGadgetEventsStateList h3.sectionTitle {font-weight:100;}
.WaGadgetEventsStateDetails .pageTitleOuterContainer .pageBackContainer a {font-size: 22px;}
.WaGadgetEventsStateList .pastEventsOuterContainer h3.sectionTitle {font-size: 34px;}
.WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList {font-size: 16px; line-height: 2em;}

.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel {background-color: #FFFFFFfa; }

.WaGadgetMobilePanel .mobilePanel .mobilePanelButton:hover {color: #ee2a7b;}

#idSectionIdentifyUserContainer {padding:20px}


/* Extra small devices (phones, 767px and down) */
@media only screen and (max-width: 767px) {

/* body padding removal */
.zonePlace {padding:0px;}

.logo-header {width:85%; padding:10px; display: inline-block;}
.mobilewrap {padding-left: 20px;}
.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif!important;}

.header-slideshow {display: none;}
.header-mobile {display: contents!important;}

.typeButton, .registerButton {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif!important;}

.footer-wrapper {padding:10px;}
.third-right img {width: 100%;}

/* login panel mobile container */
#id_BGKqHnG {display: contents;}
.strapline p {font-size:15px; padding:10px 0px;}

  h1 {font-size: 21px;}
  h2 {font-size: 20px;}
  h3 {font-size: 19px;}
  h4, h5, h6 {font-size: 17px; line-height: 22px;}
  p {font-size: 16px;}
  html:not([class*="WaPlaceHolder"]) body {font-size: 17px;}

  .homepage-hero H1 {padding: 40px!important;}
  .homepage-section-membership {padding: 20px!important;}
  .homepage-section-membership-icons div p img {display:inline-block; max-width:120px!important; text-align: center; align-content: center;}
  .black-button { width:80%; align-content: center; padding:25px; margin:10px; font-size: 19px;}
  .pink-button { width:80%; align-content: center; padding:25px; margin:10px; font-size: 19px;}
  .homepage-section-membership div p, .homepage-section-membership div h2, {padding: 20px;}
  .homepage-hero h1 {color:#FFFFFF; padding: 20px;}
  .directors {padding:0px;}
 .about-columns {min-width:300px;}
.membership-columns img {max-width:200px;}
  .WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a {font-size:16px; line-height: 45px; padding: 20px 14px;}
.WaLayoutTable .WaLayoutItem {width: auto!important;}
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton:active {color: #ee2a7b;}

  .hero-content {
    padding: 30px;
  }

  .events-hero {
    padding: 20px;
  }

  .events-hero-content h1 {
    font-size: 2rem;
  }

  .right-col {
    width: 65%;
    padding: 30px;
    box-sizing: border-box;
  }
    .award, .left {
    width: 35%;
    padding: 0px;
  }
  .row .four-images, .four-images img {gap: 0px; max-width: 170px;
    padding: 0px;}
  .profile-pics {max-width:100px; text-align: center; padding: 5px;}
    .light-button-column a {
    padding: 20px;
    background-color: #414042;
    color: #ffffff;
    border-radius: 20px;
    min-width: 300px;
    font-size: 18px;
  }

  .WaGadgetLoginForm .alignRight, .WaGadgetLoginForm .authenticated.alignRight .loginPanel {width:20%;}

  .id_fPkMuPd {width:80%;}
    .WaLayoutTable .WaLayoutItem {display: revert;}

  .upcomingEventsContainer {padding: 0px 10px; width: 98%;}

  .WaGadgetEventsStateRegistration .navigationOuterContainer .left, .WaGadgetEventsStateRegistration .navigationOuterContainer .right {padding-left: 40px; display: inline-block;}

  .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList {line-height: inherit; }

  .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList tbody tr td {padding-bottom:10px!important;}

  .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList td.left+td:before {content:none;}

/* Mobile view: stack the columns vertically */
  .three-column {
    flex: 1 1 100%;
    max-width: 100%;
  }

  #id_P6eiBtz {display: none;}
  #id_BGKqHnG {display: contents;}
  .strapline p {font-size:15px; padding:10px 0px;}
}

@media only screen and (max-width: 480px) {
  /* Applies to most phones */

div#camera_wrap_B7DybBr { height: 300px!important; top: -130px !important;}
.header-slideshow {Height:180px!important;}
div#camera_wrap_B7DybBr {height: 400px!important; top: -80px !important;}
}

  /* Better filtered mobile targeting */
@media only screen and (max-width: 768px) and (hover: none) {
div#camera_wrap_B7DybBr {height: 400px !important; top: -80px !important;}
.header-slideshow {height: 275px!important;}
}

@media only screen and (max-width: 839px) {
    .header-slideshow {display: contents;}
}

.termsfeed-com---palette-light .cc-nb-okagree {background-color:#ee2a7b!important;}
.termsfeed-com---palette-light .cc-nb-reject 
{background-color:#aaaaaa!important;}