@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.zonePlace.zoneWAbranding {
    display: none;
}
.WaGadgetAuthorizationRequired .openAuthFormContainer {
  display: none;
}
.WaGadgetAuthorizationRequired .loginPageTable #idLoginBox .mandatory, .WaGadgetAuthorizationRequired .loginPageTable #idPasswordBox .mandatory {
  color: #fff;
}
.mandatorySymbol, .requiredSymbol {
    color: #f37578;

}
.WaGadgetAuthorizationRequired .authFormContainer {
  border: none;
}
/* CUSTOM STYLES */
.mobileOnly {
  display: none;
}
.boxImg {
  height: 672px;
}
.heroContainer {
      background: linear-gradient(to right, #00198D, transparent);
}
#idMembershipLevelRadioGroupContainer .fieldItem {
    padding: 30px;
    background: #f1f1f1;
    border-radius: 30px;
    width: auto;
    margin: 5px;   
}
.joinGadget #idMembershipLevelRadioGroupContainer {
  margin: 0 auto;
 max-width: 700px;
}
.groupContainer span.typeCheckboxContainer, .groupContainer span.typeRadioContainer {
  margin: 0;
}
.joinGadget .formTitleOuterContainer {
  display: none;
}
.joinGadget #idMembershipLevelRadioGroupContainer > div > div.fieldLabel {
  display: none;
}
.joinGadget .fieldSubContainer>.fieldBody {
  width: 100%;
}
.headerContainer {
  padding-top: 15%; 
  max-width: 1466px; 
  margin: 0 auto;
  min-height: 60vh;
  position: relative;
}
.vertBox {
  position: relative;
  padding: 30px;
}
a.buttonStyle002, a:link.buttonStyle002 {
  border-radius: 40px;
  padding: 15px 25px;
  text-wrap: wrap;
}
a.buttonStyle004, a:link.buttonStyle004 {
  border-radius: 20px;
  padding: 22px 60px;
  text-wrap: wrap;
}
a.buttonStyle005, a:link.buttonStyle005 {
  border-radius: 20px;
  padding: 22px 60px;
  text-wrap: pretty;

}
/* END CUSTOM STYLES */

/* SOCIAL ICONS */
.WaGadgetSocialProfile.socialProfileStyle001 a.Facebook {
    background: url(/resources/Theme/facebook.png);
    background-size: contain;
}
.WaGadgetSocialProfile.socialProfileStyle001 a.Instagram {
    background: url(/resources/Theme/instagram.png);
    background-size: contain;
}
.WaGadgetSocialProfile.socialProfileStyle001 a.Pinterest {
    background: url(/resources/Theme/WhatsApp.png);
    background-size: contain;
}
.WaGadgetSocialProfile.socialProfileStyle001 li a {
  text-indent: 999999px;
}
/* END SOCIAL ICONS */

/* TYPOGRAPHY */
H1.promo, .gadgetStyleNone H1.promo {
  font-size: 72px;
  font-weight: 800;
  color: #FF6E23;
  text-transform: none;
      margin: .42em 0 .25em;
}
.gadgetStyle002 h1:not(.promo):not(.header):not(.h1Alt) {
  font-size: 32px;
  font-weight: 800;
  color: #c5fe79;
  text-transform: none;
      margin: .42em 0 .25em;
}

H1, .gadgetStyleNone H1 {
  font-weight: 800;
  text-transform: none;
  font-size: 55px;
}
H1.h1Alt, .gadgetStyleNone H1.h1Alt {
font-size: 24px;
text-transform: none;
font-weight: 300;
margin: 0;
}
.gadgetStyle002 H1.h1Alt {
  font-size: 24px;
text-transform: none;
margin: 0;
font-weight: 300;
}

H2, .gadgetStyleNone H2 {
  font-weight: 800;
  text-transform: none;
  font-size: 40px;
}

H3, .gadgetStyleNone H3 {
  font-weight: 800;
  text-transform: none;
  font-size: 40px;
}

H4, .gadgetStyleNone H4 {
  font-weight: 800;
  text-transform: none;
  font-size: 20px;
}
.WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxHeaderOuterContainer h4.boxHeaderTitle, .WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxHeaderOuterContainer h4.boxHeaderTitle a, .WaGadgetBlog .blogEntryOuterContainer .boxHeaderOuterContainer h4, .WaGadgetEventsStateList .boxOuterContainer .boxHeaderOuterContainer h4.boxHeaderTitle, .WaGadgetEventsStateList .boxOuterContainer .boxHeaderOuterContainer h4.boxHeaderTitle a, .WaGadgetEventsStateDetails .pageTitleOuterContainer .eventsTitleContainer h1 {
  font-size: 18px !important;
  line-height: 1.3 !important;
}
/* END TYPOGRAPHY */

/* MEMBER LEVELS */
#idMembershipLevelRadioGroupContainer .fieldSubContainer {
  font-size: 21px;
}
#idMembershipLevelRadioGroupContainer .fieldSubContainer .typeInstruction {
    width: 550px;
    padding: 2px 0 0;
}
/* END MEMBER LEVELS */

/* LOGIN */
.WaGadgetLoginForm.LoginFormStyle002 .loginUserName, .WaGadgetLoginForm.LoginFormStyle002 .loginPassword, .WaGadgetLoginForm.LoginFormStyle002 .loginActionRememberMe, .WaGadgetLoginForm.LoginFormStyle002 .loginPasswordForgot {
  width: 154px;
}
.WaGadgetLoginForm.LoginFormStyle002 .loginContainer.authenticated.loginContainer.authenticated .loginLink:hover {
  background: transparent;
  color: #C5FE79;
}
.WaGadgetLoginForm.LoginFormStyle001 .alignRight, .WaGadgetLoginForm.LoginFormStyle002 .alignRight, .WaGadgetLoginForm.LoginFormStyle001 .authenticated.alignRight .loginPanel, .WaGadgetLoginForm.LoginFormStyle002 .authenticated.alignRight .loginPanel {
  text-align: left;
}
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.loginContainer .loginLink, .WaGadgetLoginForm.LoginFormStyle002 .loginContainer.loginContainer .loginLink, .WaGadgetLoginForm.LoginFormStyle001 .loginContainer.authenticated.loginContainer.authenticated .loginLink, .WaGadgetLoginForm.LoginFormStyle002 .loginContainer.authenticated.loginContainer.authenticated .loginLink {
  width: 170px;
  height: 40px;
  background: transparent;
}
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.loginContainer .loginLink:before, .WaGadgetLoginForm.LoginFormStyle002 .loginContainer.loginContainer .loginLink:before {
    font: normal 18px/39px 'Inter';
    content: 'LOGIN';
    color: #FD892E;
}
.WaGadgetLoginForm.LoginFormStyle002 .loginContainer.authenticated.loginContainer.authenticated .loginLink::before {
      font: normal 18px/39px 'Inter';
    content: 'MY ACCOUNT';
    color: #FD892E;
}
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.authenticated.loginContainer.authenticated .loginLink::before {
    font: normal 18px/40px 'Inter';
    content: 'My Account';
    color: #FD892E;
}
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.loginContainer .loginLink:hover, .WaGadgetLoginForm.LoginFormStyle002 .loginContainer.loginContainer .loginLink:hover, .WaGadgetLoginForm.LoginFormStyle001 .loginContainer.loginContainer .loginLink.hover, .WaGadgetLoginForm.LoginFormStyle002 .loginContainer.loginContainer .loginLink.hover {
  background: transparent;
  text-decoration: underline;
}
.WaGadgetLoginForm.LoginFormStyle001 .loginButton, .WaGadgetLoginForm.LoginFormStyle002 .loginButton {
      background: #e19157;
}
.WaGadgetLoginForm.LoginFormStyle001 .loginButton:hover, .WaGadgetLoginForm.LoginFormStyle002 .loginButton:hover {
    background: #d6874e;
    color: white;
}
/* END LOGIN */
/* BULLETS */
[class*='EditableArea'] ul {
    margin: 1em 0 1em 2.5em;
}
/* END BULLETS */

/* Menu */
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li > .item > a {
  padding: 8px 30px;
}
#id_6NfRKGL > div > div.menuInner > ul > li:nth-child(1) > div {
  display: none;
}
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel {
   float: right;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .stickyMenu.active {
  background: #000;
}
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .stickyMenu.active .firstLevel {
  margin: 0 auto;
  float: none;
}
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel>li.sel>.item>a>span {

    border-bottom: 2px solid #C5FE79;
}
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel>li>.item>a>span:hover {

    border-bottom: 2px solid #C5FE79;
}
/* End Menu */



/* Events */
.upcomingEventsContainer div.boxContainer {
    padding: 20px;
    box-shadow: 0 0px 40px 10px rgba(0, 0, 0, .1);
    border-radius: 25px;
}
.WaGadgetEvents .boxInfoContainer ul.boxInfo li > div {
margin: 0 0 0 102px;
}
@media screen and (min-width: 767px) {
  .vertBox {
    position: absolute;   
    top: 50%;  
    transform: translateY(-50%);
    padding: 30px;
  }

  .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer {
      float: left;
      width: 40%;
      position: absolute;   
      top: 50%;  
      transform: translateY(-50%);
      padding: 30px;
  }
  .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyContentOuterContainer {
      float: right;
      width: calc(60% - 100px);
  }
}
.inner .gadgetEventEditableArea img:first-child {
  width: 100%;
  border-radius: 5px;
 text-align: center;
  margin: 0 auto;
}
.WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyContainer .boxBodyContentOuterContainer .boxBodyContentContainer.fixedHeight {
    max-height: 645px;
    min-height: 400px;
}
.WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer, .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer {
  background: transparent;
  border-radius: 5px;
}
.WaGadgetEventsStateCalendar .sectionTitle {
  color: #030405
}
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td > div {
  display: block;
  display: -webkit-box;
  max-height: 70px;
  padding: 8px 12px;
  border-left: 2px solid #c1f976;
  background: #f4f4f4;
  color: #222;
  font-size: 16px;
  line-height: 1.5;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.WaGadgetEventsStateList .boxOuterContainer .boxHeaderOuterContainer {
    margin: 0 0 12px;
    width: 40%;
    float: left;
    padding-top: 3%;
    position: relative;
    z-index: 99;
}
/* End Events */


.infoOuterContainer {
   background: #f9f9f9;
}
.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfoContainer h4.infoTitle {
  color: #030405;
}
/* SYSTEM BUTTONS */
.WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxActionContainer input.typeButton, .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .boxActionContainer input.typeButton, .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton, .forumPanelOuterContainer .forumPanelContainer input.typeButton, .WaGadgetForum .forumBottomPanelOuterContainer .forumBottomPanelContainer input.typeButton, .WaGadgetAuthorizationRequired .loginPageTable input.loginButton, .WaGadgetLoginForm.LoginFormStyle001 .loginButton, .WaGadgetLoginForm.LoginFormStyle002 .loginButton, .navigationOuterContainer input.nextButton, .navigationOuterContainer input.typeButton, .navigationOuterContainer input[type="submit"] {
border-radius: 5px;
    background: #FF6E23;
}

.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .boxActionContainer input.typeButton:hover, .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxActionContainer input.typeButton:hover, .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton:hover, .forumPanelOuterContainer .forumPanelContainer input.typeButton:hover, .WaGadgetForum .forumBottomPanelOuterContainer .forumBottomPanelContainer input.typeButton:hover, .WaGadgetAuthorizationRequired .loginPageTable input.loginButton:hover,.WaGadgetLoginForm.LoginFormStyle001 .loginButton, .WaGadgetLoginForm.LoginFormStyle002 .loginButton:hover, .navigationOuterContainer input.nextButton:hover, .navigationOuterContainer input.typeButton:hover, .navigationOuterContainer input[type="submit"]:hover, .navigationOuterContainer input.nextButton:hover, .navigationOuterContainer input.typeButton:hover, .navigationOuterContainer input[type=submit]:hover {
background: rgb(255, 127, 63);
}
/* END SYSTEM BUTTONS */

/* Slider */
.camera_wrap {
    width: 100%;
    background: #030405;
}
/* End Slider */
/* MOBILE PANEL */
.WaGadgetMobilePanel .mobilePanel {
  position: relative;
  height: 50px;
  background: #030405;
  color: white;
  background-image: url(/resources/Theme/MC%20Logo.png);
  background-repeat: no-repeat;
  background-size: 45px;
  background-position: center;
}

.WaGadgetMobilePanel .mobilePanel .mobilePanelButton.active {
  background: #363636;
  color: white;
}
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel, .WaGadgetMobilePanel .mobilePanel .loginInner {
    background: #363636;
  border-top: 1px solid #363636;
}
.WaGadgetMobilePanel .mobilePanel .menuInner ul ul {
  padding: 0;
  background: #363636;
  font-weight: normal;
  text-transform: none;
  list-style: none;
}
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton:hover {
  background: #363636;
  color: white;
}
.WaGadgetMobilePanel .mobilePanel .menuInner ul ul li > .item > a {
    color: #fff;
}
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.sel > .item > a{
    color: #fff;
}
.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm [class$="TextBox"] input[class$="TextBoxControl"], .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginActionRememberMe label::before {
      background: #363636;
}
.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton {
    background: #e19157;
}
.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton:hover {
    background: #d6874e;
}
/* END MOBILE PANEL */

/* Tablet View */
@media screen and (max-width: 1066px) {
  .WaGadgetEventsStateList .boxOuterContainer .boxHeaderOuterContainer {
    margin: 0 0 12px;
    width: 100%;
    float: none;
    padding-top: 0%;
  }
  .headerContainer img {
    max-width: 220px;
  }
  .homeHeader {
    background: rgba(255,255,255,.8);
    border-radius: 20px;
  }
  .logoHeaderImg img {
    max-width: 180px;
  }
  H1.promo, .gadgetStyleNone H1.promo {
    font-size: 3.0em;
    font-weight: 800;
    color: #FF6E23;
    text-transform: none;
  }
  H2, .gadgetStyleNone H2 {
    font-weight: 800;
    text-transform: none;
    font-size: 2.5em;
  }
  .WaGadgetSocialProfile .alignLeft {
    text-align: center;
  }
  .mobileText{
    text-align: center;
  }
  .vertBox {
    position: relative;   
    top: auto;  
    transform: none;
    padding: 30px;
  }
}
/* END TABLET VIEW */

/* MOBILE VIEW - PHONE ONLY */
@media screen and (max-width: 766px) {
  
  /* HIDE the big circular logo - THIS IS THE KEY */
  .headerContainer img {
    display: none !important;
  }
  
  /* Reduce black header space */
  .headerContainer {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-height: auto !important;
  }
  
  /* Keep gradient background */
  .heroContainer {
    background: linear-gradient(to right, #00198D, transparent);
    display: flex;
    flex-direction: column;
  }
  
  /* Text first */
  .vertBox {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    padding: 20px;
    order: 1;
  }
  
  /* Adjust text sizes */
  H1.promo, .gadgetStyleNone H1.promo {
    font-size: 2em;
    font-weight: 800;
    color: #FF6E23;
    text-transform: none;
    line-height: 1.2;
    margin: 0.5em 0 0.3em;
  }
  
  H1.h1Alt, .gadgetStyleNone H1.h1Alt {
    font-size: 1.2em;
    line-height: 1.4;
    margin: 0.3em 0;
    font-weight: 300;
  }
  
  /* Image second */
  .boxImg {
    height: 375px;
    order: 2;
    margin-bottom: 20px;
  }
  
  .mobileText {
    text-align: center;
  }
  
  /* Buttons */
  a.buttonStyle005, a:link.buttonStyle005, 
  a.buttonStyle004, a:link.buttonStyle004, 
  a.buttonStyle003, a:link.buttonStyle003, 
  a.buttonStyle002, a:link.buttonStyle002 {
    font-size: 16px;
    display: inline-block;
    margin: 10px 5px;
    min-width: 140px;
  }
}
/* END MOBILE VIEW */

/* BACK TO TOP */
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 10px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: #C5FE79;
    color: #000;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: #c1f976;
}
#back-to-top.show {
    opacity: 1;
}
