@font-face {
  font-family: 'ComeniaSansCondRegular';
  src: url('../fonts/comenia_sans_co-webfont.eot');
  src: url('../fonts/comenia_sans_co-webfont.woff') format('woff'),
       url('../fonts/comenia_sans_co-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ComeniaSansCondBold';
  src: url('../fonts/comenia_sans_co_bold-webfont.eot');
  src: url('../fonts/comenia_sans_co_bold-webfont.woff') format('woff'),
       url('../fonts/comenia_sans_co_bold-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ----------------------- HEADER ----------------------- */

.page-header-custom {
  background-color: #7b2240;
  color: white;
  font-family: 'Trebuchet MS', sans-serif;
}

/* .page-header-custom { */
.page-header-custom-top {
  height: 110px;
  align-content: center;
}

/* .row {
    display: flex;
    flex-wrap: wrap;
    margin: 10px auto;
    max-width: 1170px;
    padding: 10px;
  } */

.page-header-custom .col-alert {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* .col-logo {
    -ms-flex: 0 0 15%;
    flex: 0 0 15%;
    max-width: 16%;
  } */

/* .col-heading {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    padding-left: 15px;
  } */

/* .col-hours {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  } */

.alert-custom {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.bc-logo {
  display: inline-block;
}

.bc-logo img {
  height: 70px; /* IE */
  width: 150px;
  vertical-align: bottom;
}

.library-heading {
  border-left: 2px solid white;
  display: inline-block;
  margin-left: 10px;
  padding-left: 10px;
  /* text-align: center; */
}

.library-heading h1 {
  color: white;
  font-family: 'EB Garamond', serif;
  font-size: 30px;
  font-weight: 500;
  margin: 0;
  padding: 0;
  text-align: left;
  text-shadow: 1px 1px #3a3a3a;
}

.library-heading a {
  text-decoration: none;
  /* color: white; */
}

/* Library Hours */

.todays-hours {
  display: block;
  padding-right: 0;
  /* color: white; */
  text-align: center;
  font-size: 11pt;
  line-height: 16pt;
}

.todays-hours a,
.todays-hours a:hover {
  color: white;
  text-decoration: none;
}

.todays-hours-heading {
  font-size: 15pt;
}

.todays-hours-link span {
  display: block;
}

.todays-hours-mobile {
  display: none;
  padding: 5px 40px 5px 0;
  text-align: center;
}

.todays-hours-mobile a {
  text-decoration: none;
  color: maroon;
}

/* ----------------------- NAVBAR ----------------------- */

.navbar-custom {
  /* VARIABLES */
  --bc-red: #7b2240;
  --nav-background: #f1f1f1;
  --nav-height: 50px;
  --nav-link-horizontal-padding: 15px;
  --dropdown-menu-link-vertical-padding: 3px;
  /* VARIABLES */
  align-items: center;
  background-color: var(--nav-background);
  color: black;
  display: flex;
  font-family: 'ComeniaSansCondRegular', 'Lucida Grande', 'Lucida Sans Unicode',
    Arial, sans-serif;
  height: var(--nav-height);
  width: 100%; /* Bootstrap 4 */
}

@media print {
    .navbar-custom, /* main navbar menu */
    .lcs_slide_out /* chat with librarian button */
    {
        display: none;
    }
}

/* Override Bootstrap's unordered list styles */
.navbar-custom ul {
  border: none;
  border-radius: 0;
}

.page-header-custom .hide-dropdown {
  display: none !important;
}

.page-header-custom .dropdown {
  /* width: 100px; */
  font-size: 18px;
}

.page-header-custom .dropdown a,
.page-header-custom .dropdown a:visited,
.page-header-custom .dropdown-link:hover {
  text-decoration: none !important;
  color: white !important;
}

.page-header-custom .dropdown-link {
  color: black !important;
  cursor: pointer;
}

.page-header-custom .dropdown-menu-link:hover a {
  color: black !important;
}

.page-header-custom .dropdown .highlight,
.page-header-custom .dropdown:hover {
  background-color: var(--bc-red);
  color: white !important;
}

.page-header-custom .dropdown-link {
  line-height: var(--nav-height);
  padding: 0 var(--nav-link-horizontal-padding);
}

.dropdown-menu-new {
  background-color: var(--bc-red);
  position: absolute;
  display: none;
  list-style-type: none;
  padding: 10px 0;
  margin: 0;
  z-index: 1000;
  width: 275px;
  font-size: 16px;
}

.show-dropdown-menu {
  display: block;
}

.page-header-custom .dropdown-menu-link {
  padding: var(--dropdown-menu-link-vertical-padding) 0
    var(--dropdown-menu-link-vertical-padding)
    var(--nav-link-horizontal-padding);
}

.page-header-custom .dropdown-menu-link a,
.page-header-custom .dropdown-menu-link a:visited {
  text-decoration: none !important;
  color: white;
}

.page-header-custom .dropdown-menu-link:hover {
  background-color: white;
}

.page-header-custom .dropdown-menu-link:hover a {
  color: var(--bc-red);
}

/**** BOOTSTRAP BREAKPOINTS ****/

@media (max-width: 1199.98px) {
  .page-header-custom .dropdown {
    font-size: 18px;
  }

  .page-header-custom .dropdown-link {
    /* padding-right: 15px; */
  }

  .dropdown-menu-new {
    /* width: 225px; */
    font-size: 16px;
  }
}

@media (max-width: 991.98px) {
  .page-header-custom-top {
    display: flex;
    align-items: center;
  }

  .navbar-custom {
    --nav-link-horizontal-padding: 5px;
  }

  .page-header-custom .dropdown {
    /* display: block; */
    font-size: 16px;
  }

  /* .dropdown-link {
      padding-right: 10px;
    } */

  .dropdown-menu-new {
    /* width: 150px; */
    font-size: 15px;
  }
}

.page-header-custom .navbar-mobile-button {
  display: none;
  margin: 0;
  font-family: inherit;
  overflow: visible;
  text-transform: none;
  padding: 0.25rem 0.75rem;
  font-size: 20px;
  line-height: 1;
  background-color: transparent;
  color: black;
  border: 0;
}

.page-header-custom .navbar-mobile-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: '';
  background: 50% / 100% 100% no-repeat;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/**** Mobile ****/
@media (max-width: 767.98px) {
  .page-header-custom .container {
    padding-left: 0;
    padding-right: 0;
    max-width: inherit;
  }

  .page-header-custom .row {
    margin-left: 0;
    margin-right: 0;
  }

  .page-header-custom-top {
    height: 90px;
  }

  .bc-logo img {
    width: 90px;
    height: auto;
  }

  .library-heading {
    border-left: none;
  }

  .library-heading h1 {
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -17px;
    margin-left: -48px;
    width: 220px;
    height: 30px;
  }

  .navbar-custom {
    --nav-link-horizontal-padding: 10px;
  }

  .page-header-custom .navbar-mobile-button {
    display: block;
  }

  .navbar-custom {
    flex-direction: column;
    align-items: baseline;
    /* align-items: center; */
    justify-content: space-between;
    height: auto;
    padding: 0 12px;
  }

  .page-header-custom .dropdown {
    width: inherit;
  }

  .dropdown-menu-new {
    position: inherit;
    width: inherit;
  }

  .page-header-custom .dropdown-link {
    font-size: 17px;
  }

  .dropdown-item-custom {
    font-size: 16px;
  }
  /* } */

  /**** Mobile ****/
  @media (max-width: 575.98px) {
    .page-header-custom-top {
      height: 80px;
    }

    .bc-logo img {
      width: 80px;
    }

    .library-heading h1 {
      font-size: 20px;
      margin-left: -90px;
    }
  }

  /* Doesn't exist in Bootstrap 3
     1:1 copy from BS 4/5
     Should be added to a custom class
  */

  .page-header-custom .d-block {
    display: block !important;
  }

  .page-header-custom .d-none {
    display: none !important;
  }

  @media (min-width: 767.98px) {
    .page-header-custom .d-md-block {
      display: block !important;
    }

    .page-header-custom .d-md-none {
      display: none !important;
    }
  }
}

/**** Mobile ****/
@media (max-width: 767.98px) {
  .page-header-custom {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ----------------------- FOOTER ----------------------- */

.page-footer {
  background-color: #7b2240;
  color: white;
}

.page-footer .row {
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
  /* max-width: 1170px; */
}

.page-footer address {
  font-size: 0.75rem;
  font-family: sans-serif;
  color: white;
}

.page-footer address a {
  text-decoration: underline;
  color: white;
}

.page-footer a.page-footer-icons {
  opacity: 0.8;
  transition: all 500ms ease-in;
  background-color: #7b2240;
  color: white;
  border-radius: 20px;
  margin-left: 5px;
  display: inline-block;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
}
.page-footer a.page-footer-icons:hover {
  opacity: 1;
}
.page-footer a.page-footer-icons .bc-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
}

.page-footer a.page-footer-login-link {
  background-color: rgba(255, 255 , 255, .65);
  margin-right: 10px;
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
}
.page-footer a.page-footer-login-link .bc-icon {
  width: 1.15rem;
  height: 1.5rem;
}
.page-footer a.page-footer-login-link::after {
  border: none;
  display: none;
}

.social img {
  width: 32px;
  height: 32px;
}

/* Mobile version */
@media only screen and (max-width: 768px) {
  .social img {
    width: 28px;
    height: 28px;
  }
}

/* iPhone 6 Plus/7 Plus/8 Plus/XR, Galaxy Note 9, Pixel 2/2 XL */
@media only screen and (max-width: 475px) {
  .page-footer .address div {
    font-size: x-small;
  }
}

/* iPhone 6/7/8/X/XS, LG Optimus L70, Microsoft Lumia 550/950, Galaxy S5/S9/S9+, Galaxy Note 3 */
@media only screen and (max-width: 384px) {
  .page-footer .address div {
    font-size: x-small;
  }

  .social img {
    width: 22px;
    height: 22px;
  }
}

/* iPhone 5, SE */
@media only screen and (max-width: 320px) {
  .social img {
    width: 18px;
    height: 18px;
  }
}