@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

/* body {
overflow: auto;
} */

div#result-count {
  text-align: center;
}
div#result-count span {
  color: red;
}
button.accordion-button {
  font-size: 0.5em;
}
button.btn.btn-primary.activityBtn.gray-btn {
  background: #989c9f;
}

button.btn-close.rounded-close-btn i {
  color: #fff;
}
button.btn-close.rounded-close-btn {
  background: #e00000;
  color: #fff;
  border-radius: 2em;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  margin: -1em -0.5em;
  font-size: 1.4em;
  padding: 0.5em 0.5em 0.5em 0.5em;
  border: solid #fff 0.2em;
  filter: drop-shadow(1px 2px 2px black);
  transition: 0.2s;
}
button.btn-close.rounded-close-btn:hover {
  background: #333;
}
button.btn-close.rounded-close-btn {
  padding-top: 0.45em !important;
  padding: 0.6em !important;
  padding-bottom: 0.7em !important;
}
div#schoolsOffcanvas {
  width: 94%;
  margin: auto;
  border-radius: 0.5em;
  padding: 2%;
}
div#activityOffcanvas,
div#schoolsOffcanvas {
  filter: drop-shadow(2px 2px 20px black);
}
div#activity-grid,
div#club-grid {
  filter: drop-shadow(1px 1px 4px black);
}
.no-padding {
  padding: 0;
}
.offcanvas-backdrop {
  display: none;
}
p.more-info-text {
  margin: 0 0 1.5em 0;
}
p.more-info-text strong {
  color: green;
}
.welcome-container {
  padding: 2em 20% 0em 20%;
  margin: 0;
}
.welcome-container p {
  font-weight: 300;
  font-size: 0.95em;
}

.gold-text {
  color: gold !important;
}
.bg-warning {
  background-color: rgb(255 255 255) !important;
}
.bg-success {
  background-color: rgb(255 255 255) !important;
  color: #333;
}
main {
  background: #fff;
}
/* div#nav-hero {
  background: #00456e;
  height: 12em;
  overflow: hidden;
} */

div#nav-hero {
  background: #00456e;
  height: 17em;
  overflow: hidden;
  border-bottom: solid #172022 0.5em;
}

.webapp-title-Navbar-text {
  display: none;
}

/* div#siteContent {
  background: #00456e;
} */
/* div#wideLogo {
width: 100%;
height: 28em;
background: url(/afterschoolmemphis/img/25/AM%20APP%20BG10.png);
/* background-attachment: fixed; */
/* background-position: center;
position: relative;
background-size: contain;
background-position-y: 7em;
} */

/* div#wideLogo {
width: 100%;
height: 24em;
background: url(/afterschoolmemphis/img/25/AM%20APP%20BG9.png);
background-position: center;
position: relative;
background-size: contain;
background-position-y: -4.5em;
background-repeat: repeat-x;
} */
/* div#wideLogo {
width: 100%;
height: 17em;
background-position: center;
position: relative;
background-size: contain;
background-repeat: repeat-x;
background: url(/AfterSchoolMemphis/img/25/hero.jpg);
background-position: center;
position: relative;
background-size: cover;
background-repeat: repeat-x;
background-position-y: -0.1em !important;
transition: .2s;
} */

div#wideLogo {
  width: 100%;
  background: url(/AfterSchoolMemphis/img/25/hero5.svg);
  background-position: center;
  position: relative;
  border-bottom: solid 0.5em;
  background-size: cover;
  background-repeat: repeat-x;
  background-position-y: -2.9em !important;
  background-position-x: -9em;
  height: 24em;
  transition: 0.2s;
}

.wideLogo-Overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  background: rgb(26 29 30 / 40%);
  height: 100%;
  z-index: 1;
  display: none;
}
.template-pages p,
.template-pages li {
  font-weight: 300;
  font-size: 1.1em;
}
nav.navbar.navbar-expand-lg.bg-body-tertiary.shadow.fixed-top {
  background: #0e76bb;
  border-bottom: solid #606261 0.2em;
  border: none;
}

span.badge.bg-darkD.text-light.me-1.clubs-count {
  background: #fff;
  color: #333 !important;
  font-size: 0.75em;
  padding: 0.35em 0.45em;
}

p.chair-info {
  display: block;
  margin: auto;
  text-align: center;
  font-weight: 500;
  font-size: 1.1em;
  margin-top: 0em;
}
p.chair-info span {
  color: #ff0808;
}
.nav-link {
  font-size: 1.2em;
  color: #ffffff;
  text-transform: uppercase;
}
.promo-container {
  display: none;
}

.image-card {
  background: none;
}
img.afterschoolAppLogo {
  margin: auto;
  display: block;
  width: 200px;
  margin-top: -2em;
  left: 0;
  right: 0;
  position: absolute;
  background: #fff;
  padding: 0.2em;
  border-radius: 0.5em;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
  display: none;
  transition: 0.2s;
}
.no-bkgnd {
  background-color: none !important;
  background: none !important;
}
nav.navbar.navbar-expand-lg.bg-body-tertiary {
  background: #0e76bb;
}
/* a#schoolcard {
  margin-top: .5em;
}
div#schoolListContainer {
  padding-top: 7em;
} */
button.btn.btn-primary.open-school-district {
  width: 99%;
  margin-top: 0.2em;
}
.disabled-btn {
  opacity: 0.6;
  cursor: not-allowed;
}
button.btn.btn-primary.open-school-district {
  background: #517ec3;
}
.image-card.schoolcard.scrolled,
.image-card.scrolled {
  height: 3em;
  padding-top: 0.7em;
}
.nav-bar-locked-on-scroll-bg {
  display: none;
}
.activity-grid {
  background-color: #ffffff;
}

.activity-grid {
  background-color: #ffffff;
  margin-top: 0em;
}
/* #activityContainer h3 {
position: absolute;
margin: 1em auto 0 auto;
display: block;
color: #FFF;
color: #3d3d3d;
width: 70%;
font-weight: 500;
} */
h3.supeschoolsviewTitle,
/* div#BoardZonesContainer h3 {
  color: #606261;
} */

div#SchoolsPage {
  width: 100%;
  padding: 0.5em;
  padding-top: 5em;
  background-color: #fff;
  display: block;
  margin: auto;
}

/* .pageName {
margin-top: -1em;
font-weight: 700;
text-align: center;
text-transform: uppercase;
} */
/* .pageName {
margin-top: -1em;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: .25em;
color: #8293a1;
margin-top: .5em;
} */

/* .pageName {
  font-family: 'Anton', sans-serif;
font-weight: 400;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 4.2em;
color: #0e76bb;
margin-top: 0;
position: relative;
line-height: 1.1;
} */
/* .pageName {
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 4.2em;
  color: #ffffff;
  margin-top: 0;
  position: relative;
  line-height: 1.1;
  position: absolute;
  margin: 3.5em auto;
  left: 0;
  right: 0;
  top: 0;
  filter: drop-shadow(1px 1px 1px black);
  z-index: 1;
} */
.pageName {
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 3.2em;
  color: #00466d;
  filter: none;
  position: relative;
  line-height: 1.1;
  margin: 0em auto;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  margin-top: -0.5em;
}
.pageName::after {
  content: "";
  display: block;
  width: 150px;
  height: 4px;
  background: linear-gradient(to right, #ffeb3b, #ff9800);
  margin: 0.1em auto 0;
  border-radius: 3px;
}

.nav-link:focus,
.nav-link:hover {
  color: #ffc107;
}

img.afterschoolAppLogo.scrolled {
  width: 7em;
  padding: 0.5em;
}
dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 300;
}
.fade-in-fwd {
  -webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-fwd 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.fade-out-bck {
  -webkit-animation: fade-out-bck 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: fade-out-bck 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

#helppage {
  padding: 2em;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
#helpcard {
  margin: 0.85em 0;
  text-align: center;
}
h2:nth-child(1) {
  padding: 0em;
  text-align: center;
}
button.accordion-button.collapsed {
  font-weight: bold;
}
.accordion-button:not(.collapsed) {
  color: #2196f3;
  background-color: #f4f4f4;
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0
    var(--bs-accordion-border-color);
  font-weight: bold;
}
.filter-text-spacing {
  margin-top: 0em;
}
.help-text {
  border-bottom: 0.2em solid rgb(255, 234, 123);
  padding: 0.5em;
  font-weight: 300;
  font-weight: bold;
  text-align: center;
}
.help-text span {
  color: orangered;
}
div#school-levels {
  text-align: center;
}

.wideLogo img {
  margin: auto;
  display: block;
  padding-top: 5em;
  width: 90em;
}
.view-schools-btn {
  background: #1f96f5;
  color: #fff !important;
  padding: 0.4em 2em;
  border-radius: 0.2em;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.35s;
}
.view-schools-btn:hover {
  background: #1862cd !important;
}
@media only screen and (min-width: 1980px) {
}

@media only screen and (max-width: 4000px) {
  div#nav-hero {
    background-position: center;
    position: relative;
    background-size: cover;
    background-repeat: repeat-x;
    background-position-y: -3.9em;
    background-position-x: -10em;
    background: #00456e;
    height: 17em;
    overflow: hidden;
  }
  div#wideLogo {
    width: 100%;
    background: url(/AfterSchoolMemphis/img/25/hero5.svg);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    position: relative;
    border-bottom: solid 0.5em;
    background-size: cover;
    background-repeat: repeat-x;
    background-position-y: -3.9em !important;
    background-position-x: -9em;
    height: 29em;
    transition: 0.2s;
  }
}

@media only screen and (max-width: 1800px) {
  div#wideLogo {
    height: 24em;
    transition: 0.2s;
  }
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    padding: 1em !important;
  }
  .pageName {
    margin-top: 0em;
  }
}

@media only screen and (max-width: 1500px) {
  div#nav-hero {
    background: #00456e;
    height: 15em;
    overflow: hidden;
  }
  div#wideLogo {
    background-position-y: -2.9em !important;
    background-position-x: -9em;
    height: 23em;
    transition: 0.2s;
  }
  .schoolActivityModal-content {
    width: 100%;
    max-width: 100%;
  }
  .schoolActivityModal-body img {
    width: 50% !important;
    height: auto !important;
  }
  div#SchoolsPage {
    padding: 2em 0em;
    width: 90%;
  }
}
@media (min-width: 1000px) {
  #navbarText {
    display: flex !important;
    justify-content: center;
  }
}
@media only screen and (max-width: 990px) {
  .welcome-container {
    padding: 1em 10% 0em 10%;
    margin: 0;
  }

  .pageName {
    font-size: 2.7em;
  }

  div#nav-hero {
    background: #00456e;
    height: 13em;
    overflow: hidden;
  }
  div#wideLogo {
    width: 100%;
    background-position: center;
    position: relative;
    background-size: cover;
    background-repeat: repeat-x;
    background-position-y: -2.9em !important;
    background-position-x: -9em;
    height: 21em;
    transition: 0.2s;
  }
  .wideLogo img {
    width: 60%;
  }

  a.nav-link {
    padding: 0;
    margin: 0;
  }
  img.afterschoolAppLogo {
    width: 80px;
    margin-top: -1em;
    padding: 0.2em;
    border-radius: 0.5em;
    transition: 0.2s;
  }
  /* div#navbarText {
    margin-top: 2em;
  } */
  /* #activityContainer h3 {
position: absolute;
margin: 3em auto;
display: block;
} */
  #activityContainer h3 {
    /* position: absolute;
    margin: 10em auto; */
    display: block;
    font-size: 2em;
  }
  .pageName {
    margin-top: 0em;
  }
  .filter-text-spacing {
    margin-top: 0em;
  }
}

@media only screen and (max-width: 650px) {
  div#nav-hero {
    background: #00456e;
    height: 13em;
    overflow: hidden;
  }
  div#wideLogo {
    background-position-x: -44em;
  }
}

@media only screen and (max-width: 500px) {
  h3.supeschoolsviewTitle.fix-space {
    font-size: 1.1em !important;
  }

  /* div#wideLogo {
background-position-y: -4em !important;
} */
}