/* Montclair Bike Bus                         */
/* Style Sheet - ted@montclairbikebus.org     */
/* Last updated: 4/22/25                     */
/* Main design variables */
@import url("https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,600;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,400;0,600;1,400;1,600&family=Vollkorn:ital,wght@0,600;1,600&display=swap");
.mbb-bg-teal {
  background-color: #d2ecea; }

.force-sans {
  font-family: "Barlow Semi Condensed", lato, verdana, sans-serif !important; }

/*  @extend */
section.border-box, section.multibox div, section.border-box p:first-child, #introduction p {
  font-family: Vollkorn, serif;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600; }

section.mbb-box, section.border-box p, section.white-box p, section.mbb-box p {
  font-family: "Barlow Semi Condensed", lato, verdana, sans-serif;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  margin-bottom: 28px; }

h3 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  margin-bottom: 10px; }

.mbb-flex-content, .yellow-button button, button.orange-button {
  display: flex;
  align-items: center;
  justify-content: center; }

section.white-box, section.yellow-box, section.mbb-box {
  margin: 0;
  border-top: 3px solid #282805;
  border-bottom: 3px solid #282805; }

/* HOME BANNER */
#mbb-main-container {
  padding-top: 65px; }

#carouselBikeBus {
  background-color: #DC4B28;
  height: auto;
  --bs-gutter-x: 0; }

/* COMMON and SHARED */
.nowrap {
  white-space: nowrap !important; }

.svg-shadow {
  filter: drop-shadow(20px 10px 0px rgba(239, 177, 147, 0.8)); }

.default-shadow {
  box-shadow: rgba(100, 100, 100, 0.1) 0px 4px 12px; }

span.separator {
  display: inline-block;
  padding: 0 15px;
  color: #4f4f3d;
  opacity: .5; }

.mbb-standard-padding {
  padding: 25px !important; }

.float-right {
  float: right !important; }

.mbb-light-gray {
  color: #7f7f6d !important; }

/* 
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
*/
/* navigation */
ul.dropdown-menu {
  margin: 0;
  padding: 0;
  border-radius: 7px; }

ul.dropdown-menu li {
  padding: 0; }

ul.dropdown-menu li:first-child {
  padding-top: 5px; }

ul.dropdown-menu li:last-child {
  padding-bottom: 10px; }

ul.dropdown-menu {
  /* left: -25px !important; */
  left: auto !important;
  right: -10px !important; }

ul.dropdown-menu.routes-menu li:first-child {
  border-bottom: 1px solid #d2ecea;
  padding-bottom: 5px; }

ul.dropdown-menu.routes-menu li:nth-child(2) {
  padding-top: 5px; }

ul.dropdown-menu li a:hover {
  color: black !important; }

ul.mbb-bike {
  margin-bottom: 30px; }
  ul.mbb-bike li {
    padding-left: 50px;
    background: transparent url("/assets/images-www/icon-bike.png") left center no-repeat;
    background-size: 37px 37px;
    padding-top: 5px;
    padding-bottom: 5px; }

/* NAVEBAR - SIDE SLIDE */
#mbb-sidenav ul.navbar-nav {
  height: auto !important; }
  #mbb-sidenav ul.navbar-nav li.nav-item {
    border-top: 1px solid #DC4B28;
    font-size: 25px;
    padding: 7px 0 9px 0; }
    #mbb-sidenav ul.navbar-nav li.nav-item a, #mbb-sidenav ul.navbar-nav li.nav-item a.nav-link {
      padding: 0; }
      #mbb-sidenav ul.navbar-nav li.nav-item a:hover, #mbb-sidenav ul.navbar-nav li.nav-item a.nav-link:hover {
        color: black !important; }
    #mbb-sidenav ul.navbar-nav li.nav-item ul.dropdown-menu {
      background-color: transparent;
      box-shadow: none; }
      #mbb-sidenav ul.navbar-nav li.nav-item ul.dropdown-menu a.dropdown-item {
        font-weight: 400;
        font-size: 15px;
        padding: 4px 0 5px 0;
        color: black !important;
        text-transform: none; }
      #mbb-sidenav ul.navbar-nav li.nav-item ul.dropdown-menu:hover a.dropdown-item:hover {
        color: #C53513 !important;
        background-color: transparent; }
    #mbb-sidenav ul.navbar-nav li.nav-item:last-child {
      border-bottom: 1px solid #DC4B28; }
  #mbb-sidenav ul.navbar-nav li.nav-item:hover a.nav-link, #mbb-sidenav ul.navbar-nav li.nav-item:hover a.nav-link:hover {
    color: black !important; }

a.mbb-top-nav:hover {
  color: black !important; }

.navbar-nav .nav-link.dropdown-toggle:not(.nav-link-caret-hide):before {
  border: 0;
  content: "";
  display: inline-block;
  width: 20px;
  height: 100%;
  background-image: url("../images-www/icon-plus.png");
  background-size: contain;
  background-repeat: no-repeat;
  top: 35%; }

.navbar-nav .nav-link.dropdown-toggle:not(.nav-link-caret-hide)[aria-expanded='true'] {
  color: #C53513 !important; }
  .navbar-nav .nav-link.dropdown-toggle:not(.nav-link-caret-hide)[aria-expanded='true']:before {
    background-image: url("../images-www/icon-minus.png"); }

h2.sec_about-us {
  margin-top: 55px; }

@media only screen and (max-width: 991px) {
  #mbb-sidenav .navbar-nav .nav-item.dropdown > .nav-link {
    font-size: 25px;
    font-weight: 600; } }
#mbb-sidenav .navbar-toggler {
  border: none !important; }
  #mbb-sidenav .navbar-toggler:hover, #mbb-sidenav .navbar-toggler:active, #mbb-sidenav .navbar-toggler:focus {
    border: none !important;
    box-shadow: none;
    outline: none; }

#mbb-sidenav .offcanvas-header {
  justify-content: space-between;
  padding-right: 24px;
  padding-top: 25px;
  color: #C53513 !important; }

#mbb-sidenav .btn-close {
  background-image: url("../images-www/icon-close.png");
  opacity: 1;
  height: 20px;
  width: 20px;
  background-size: 20px; }
  #mbb-sidenav .btn-close:hover {
    opacity: .5; }

/* page intro */
section.page-intro {
  padding: 25px !important;
  padding-bottom: 70px !important; }

section.page-intro.no-bottom-padding {
  padding-bottom: 0 !important; }

/* white curved border content box */
section.border-box, section.multibox div {
  margin: 15px;
  background-color: #FAFAFA;
  border: 3px solid #282805;
  border-radius: 10px;
  padding: 25px 15px 50px 15px !important; }

/* white full-width content box */
section.white-box {
  background-color: #FAFAFA; }

section.yellow-box {
  background-color: #E9EB79;
  border: none; }

section.mbb-box {
  border: none;
  background-color: inherit;
  padding: 35px 30px 50px 30px !important; }

section.teal-box {
  background-color: #d2ecea; }

section.yellow-box {
  background-color: #E9EB79; }

/* standard text link */
a {
  font: 100% "Barlow Semi Condensed", lato, verdana, sans-serif;
  text-transform: uppercase;
  text-decoration: underline;
  color: #DC4B28;
  font-weight: 600; }

a:visited, a:hover {
  color: #C53513; }

a:active {
  color: #282805; }

section.multibox div a {
  font-size: 25px; }

.navbar a {
  text-decoration: none;
  font-weight: 600;
  color: #DC4B28 !important; }

.black-a a, a.black-a {
  color: black !important; }

.black-a a:hover, a.black-a:hover {
  text-decoration: none;
  color: #C53513 !important; }

.plain-a a, a.plain-a {
  font-style: inherit;
  font-weight: inherit;
  text-transform: none; }

h4 a {
  text-decoration: none; }

h4 a:hover, .mbb-news-text-listing h4 a:hover {
  color: #DC4B28 !important; }

/* last link in a content block */
section.border-box a:last-child {
  margin-top: 45px;
  display: inline-block;
  font-size: 25px; }

/* section header */
.sec-header {
  font-family: Vollkorn, serif;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 30px;
  line-height: 36px; }

.sec-header-old {
  font-family: Vollkorn, serif;
  font-size: 48px;
  line-height: 48px;
  color: #DC4B28;
  margin: 90px 34px 100px 34px; }

.white-box .sec-header {
  margin: 0 34px 30px 34px;
  color: black; }

/* section yellow button */
.yellow-button button {
  position: absolute;
  bottom: -42px;
  width: 294px;
  height: 84px;
  background-color: #E9EB79;
  border: 3px solid #282805;
  border-radius: 150px;
  left: calc(50% - 147px);
  left: -webkit-calc(50% - 147px);
  z-index: 20; }
  .yellow-button button a {
    display: block;
    margin: 0 !important;
    font-size: 27px;
    color: #C53513;
    text-decoration: none; }

.white-box.yellow-button button {
  bottom: 40px; }

.white-box.yellow-button {
  padding-bottom: 150px; }

/* section yellow button */
button.orange-button {
  /* position: absolute;
  bottom: -42px; */
  margin: 30px auto;
  width: 294px;
  height: 84px;
  background-color: #DC4B28;
  border: none;
  border-radius: 150px;
  left: calc(50% - 147px);
  left: -webkit-calc(50% - 147px);
  z-index: 20; }
  button.orange-button a {
    display: block;
    margin: 0 !important;
    font-size: 27px;
    color: #FAFAFA;
    text-decoration: none; }

button.orange-button:hover {
  background-color: #a02b10; }

/* MAIN */
body {
  	/* background-image: url(/assets/images-www/mbb-logo-bikes.png), 
  										url(/assets/images-www/bg_top-slant.svg);
  	background-position: 0 142px, 0 0;
    background-repeat: no-repeat;	
  	background-size: contain; */
  background-color: #FAFAFA;
  font: 100% Vollkorn, serif;
  color: #282805; }

/* HOME */
#introduction {
  margin-top: 20px; }

#introduction h1 {
  font-size: 48px;
  line-height: 50px;
  color: #DC4B28; }

#introduction h2 {
  margin-top: 40px;
  font-size: 30px;
  line-height: 36px; }
  #introduction h2 em {
    display: block;
    color: #DC4B28;
    font-style: inherit; }

ol.mbb, ul {
  margin: 15px 0 0 20px;
  padding: 0;
  font: 20px "Barlow Semi Condensed", lato, verdana, sans-serif; }

ol.mbb li, ul li {
  padding: 0 10px 15px 0; }

ul {
  list-style: none;
  margin-left: 0;
  margin-bottom: 10px; }

#start-here, #start-here-arrow, #coming-soon {
  position: absolute;
  width: 50%;
  top: -70px;
  left: -5px; }

#start-here img, #start-here-arrow img, #coming-soon img {
  width: 100%;
  margin: 0; }

#start-here-arrow {
  left: auto;
  right: 10px;
  top: -150px;
  width: 33%; }

#coming-soon {
  top: -90px;
  right: 15px;
  left: auto; }

#sec_survey {
  padding-top: 140px !important; }

h2.sec_social, h2.sec_calendar {
  font-size: 28px;
  margin-bottom: 30px;
  margin-left: 20px; }

h2.sec_calendar {
  margin-top: 50px; }

h2.sec_faq {
  margin: 0;
  padding: 90px 30px 30px 30px;
  background-color: #C53513;
  color: #FAFAFA;
  background-image: url(/assets/images-www/mbb-logo-bikes.png);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  background-size: contain; }

.yellow-box > div {
  padding: 0 30px; }

.yellow-box h3 {
  font-family: "Barlow Semi Condensed", lato, verdana, sans-serif;
  color: #C53513;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 30px;
  margin-bottom: 10px; }

.yellow-box div ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 19px;
  font-weight: 400; }
  .yellow-box div ul li {
    padding-bottom: 4px; }

.yellow-box div:not(div:first-child) {
  margin-top: 30px; }

#sec_social {
  padding-top: 0;
  padding-bottom: 120px; }

.mbb-social-strip div {
  position: relative;
  margin: 50px 0; }

.mbb-social-strip a.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  background-color: #DC4B28;
  color: white;
  border-radius: 75px;
  text-decoration: none;
  padding: 0;
  margin: 0 10px; }

.mbb-social-strip a.social-icon:hover {
  background-color: #a02b10; }

.mbb-social-strip a.social-icon svg, .mbb-social-strip a.social-icon img {
  width: 33px;
  height: 33px; }

div.bg-graphic {
  display: block;
  position: absolute;
  width: 100%;
  height: 375px;
  background-image: url("/assets/images-www/bg-road-graphic1.png");
  background-size: cover;
  background-position: 0 0;
  z-index: 10;
  bottom: -200px; }

section.bg-graphic {
  margin-bottom: 197px; }

#sec_calendar {
  padding-top: 35px; }

.mbb-accordion {
  font-family: "Barlow Semi Condensed", lato, verdana, sans-serif; }

.mbb-accordion > .card {
  margin: 0;
  border: 0;
  border-top: 3px solid #282805;
  border-radius: 0; }

.mbb-accordion > .card:last-child {
  border-bottom: 3px solid #282805; }

.mbb-accordion > .card > .card-header > h2 {
  padding: 20px 5px 20px 20px; }

.mbb-accordion > .card > .card-header > h2 > button:not(.collapsed) {
  font-weight: bold; }

.mbb-accordion > .card > .card-header > h2 button span em {
  color: #DC4B28; }

.mbb-accordion > .card > .card-header > h2 button span em:first-child {
  display: none; }

.mbb-accordion > .card > .card-header > h2 button span em:last-child {
  display: inline-block; }

.mbb-accordion > .card > .card-header > h2 button.collapsed span em:first-child {
  display: inline-block; }

.mbb-accordion > .card > .card-header > h2 button.collapsed span em:last-child {
  display: none; }

.mbb-accordion .card .card-body {
  padding: 0 30px 40px 35px; }

#sec_faq {
  padding: 0; }

#btnScrollTo {
  color: white; }

.mbb-iframe-map {
  width: 100%;
  height: 700px; }

#instagram-hdr {
  display: block;
  margin: 0 0 20px 0;
  width: 200px; }

#footer {
  width: 100%;
  height: calc(100vw);
  margin: 0;
  padding: 0;
  /* background-image: url('/assets/images-www/bg-road-graphic2b.png');
  background-size: cover; */
  background-color: #DC4B28;
  /* background-position: top left; */
  flex-direction: column; }

#footer img {
  width: 55%;
  height: auto;
  position: relative; }

#mbb-copyright {
  font-family: "Barlow Semi Condensed", lato, verdana, sans-serif;
  font-size: 20px;
  color: white;
  padding-top: 20px; }

.embedsocial-instagram {
  max-width: 892px;
  margin: 0 auto; }

#mc_embed_signup {
  background-color: inherit !important;
  margin-top: 30px;
  font-family: "Barlow Semi Condensed", lato, verdana, sans-serif !important;
  width: 100% !important; }

#mc_embed_signup .indicates-required, #mc_embed_signup span.asterisk {
  display: none; }

#mc_embed_signup_scroll h3:after {
  content: " to stay informed!"; }

.mbb-btn {
  background-color: #DC4B28;
  border: none;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: none; }

.mbb-btn:hover {
  background-color: #a02b10;
  box-shadow: none !important;
  text-shadow: none !important; }

#mc_embed_signup .mc-field-group label {
  font-size: 20px;
  margin-bottom: 5px; }

#mc_embed_signup .mce_inline_error, #mc_embed_signup #mce-success-response {
  margin-top: 5px !important;
  border-radius: 5px;
  font-size: 15px; }

#mc_embed_signup #mce-success-response {
  background-color: #e2f1d6;
  color: #41701d;
  padding: 5px; }

#mbb-event-col1 {
  background-color: #DC4B28;
  padding: 0 !important; }

#mbb-event-col1 img {
  width: 100%; }

.mbb-data-container {
  background-color: #d2ecea;
  padding: 15px; }

.mbb-data-list {
  list-style: none;
  margin: 0;
  padding: 0; }

.mbb-data-list li {
  padding: 0 0 10px 40px;
  background-size: auto 20px;
  background-repeat: no-repeat;
  background-position: left 3px; }

.mbb-data-list li.data-date {
  background-image: url(/assets/images-www/icon-event.svg); }

.mbb-data-list li.data-loc {
  background-image: url(/assets/images-www/icon-location.svg); }

.mbb-data-list li.data-time {
  background-image: url(/assets/images-www/icon-clock.svg); }

.mbb-data-list li.data-loc a {
  font-family: inherit;
  color: inherit;
  text-transform: none;
  font-weight: inherit; }

.mbb-event-teaser {
  border-bottom: 1px solid #4f4f3d;
  padding-bottom: 30px; }

.mbb-event-description h3 {
  margin-bottom: 0; }

.mbb-event-description p {
  margin-top: 0;
  margin-bottom: 30px; }

.mbb-event-description p a:not(.mbb-btn) {
  text-transform: none;
  font-weight: normal; }

.mbb-event-description ul {
  list-style: disc;
  margin: 0 0 20px 20px; }

.mbb-event-description ul li {
  padding-bottom: 10px; }

.mbb-event-menublock h2.sec-header {
  line-height: 1em; }

.mbb-event-menublock img {
  width: 125px; }

/* NEWS */
.news-post {
  height: 100%;
  padding-bottom: 35px; }

.news-post .content p {
  color: #4f4f3d; }

#news-listing {
  padding: 25px !important;
  padding-top: 0 !important; }

img.source-logo {
  height: 30px;
  display: block;
  margin-top: 20px;
  position: absolute;
  bottom: 10px;
  left: 15px; }

.mbb-video-embed {
  margin: 0 auto !important;
  width: fit-content;
  block-size: fit-content; }

.mbb-news-text-listing h4 a, .mbb-news-feature-listing h4 a {
  color: #4f4f3d;
  text-transform: capitalize; }

.news-img a:hover img {
  opacity: .8; }

/* COPIED CODE */
/*
.news-post {
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}

.news-post .news-img .overlay,
.news-post .news-img .post-meta {
  position: absolute;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.news-post .news-img .overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.news-post .news-img .post-meta {
  bottom: 5%;
  right: 5%;
  z-index: 1;
}

.news-post .news-img .post-meta .read-more:hover {
  color: #6dc77a !important;
}

.news-post .content h1, .news-post .content h2, .news-post .content h3, .news-post .content h4, .news-post .content h5, .news-post .content h6 {
  line-height: 1.2;
}

.news-post .content .title {
  font-size: 18px;
}

.news-post .content .title:hover {
  color: #6dc77a !important;
}

.news-post .content .author .name:hover {
  color: #6dc77a !important;
}

.news-post:hover {
  -webkit-transform: translateY(-7px);
          transform: translateY(-7px);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.news-post:hover .news-img .overlay {
  opacity: 0.65;
}

.news-post:hover .news-img .post-meta {
  opacity: 1;
}

.news-post .post-meta .like i,
.profile-post .like i {
  -webkit-text-stroke: 2px #dd2427;
  -webkit-text-fill-color: transparent;
}

.news-post .post-meta .like:active i, .news-post .post-meta .like:focus i,
.profile-post .like:active i,
.profile-post .like:focus i {
  -webkit-text-stroke: 0px #dd2427;
  -webkit-text-fill-color: #dd2427;
}

.avatar.avatar-ex-sm {
    height: 36px;
}
.shadow {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) !important;
}

.text-muted {
    color: #8492a6 !important;
}


.para-desc {
    max-width: 600px;
}
.text-muted {
    color: #8492a6 !important;
}

.section-title .title {
    letter-spacing: 0.5px;
    font-size: 30px;
}
*/
/* END */
@media only screen and (min-width: 720px) {
  #mbb-main-container {
    padding-top: 80px; }

  #introduction {
    padding-top: 50px !important; }

  #sec_find-route {
    padding-top: 52px !important; }

  #sec_about-us {
    border-top: 2px solid #d2ecea; }

  #mc_embed_signup {
    width: 400px !important; }

  #footer {
    width: 100%;
    height: 200px; }

  #footer img {
    width: 150px;
    height: auto; }

  #mbb-copyright {
    font-size: 16px; } }