/***
 * Global Variables
 *
 * Defines reusable values for fonts, colors, and
 * so on to ensure consistency across the site.
 */

:root {
  --sitefont: Lato;
  --font2: Merriweather;
  --lwvblue: #005596;
  --lwvred: #be0f34;
  --white: #fff;
  --black: #000;
  --radius: 0px;
}


/***
 * General and utility styles
 */

#nav_header_container {
  padding-bottom: 0px;
}

.below-content,
footer {
  background-color: var(--white);
}

.footer-container,
.footer-container a,
.footer-container span {
  color: var(--black);
  font-family: var(--sitefont), sans-serif;
  line-height: 2;
}

.layout-wrapper-new,
.layout-wrapper2 {
  max-width: 80rem !important;
  margin-left: auto;
  margin-right: auto;
}


/***
 * Button Styles
 */

/* Default button hover state */
a.ce-button:hover,
#mobile_content_column a.ce-button:hover,
.inner-column a.ce-button:hover {
  border: 2px solid var(--lwvred) !important;
  background-color: var(--lwvred) !important;
  color: var(--white);
  text-shadow: none !important;
}

/* Buttons in admin/popup contexts */
.admin-page-wrapper a.ce-button,
.popup-wrapper a.ce-button {
  font-size: 13px !important;
  text-shadow: none !important;
}

/* Top bar login buttons */
.login-buttons a {
  color: var(--white) !important;
  background-color: var(--lwvblue) !important;
  border-radius: var(--radius);
  border: 2px solid var(--lwvblue) !important;
}

.login-buttons span {
  padding-right: 0px;
  background-image: none !important;
}

.login-buttons a:hover {
  background-color: var(--lwvred) !important;
  color: var(--white);
  border: 2px solid var(--lwvred) !important;
}

/* Custom reusable blue button */
.custom-blue-button {
  background-color: var(--lwvblue);
  font-family: var(--sitefont), sans-serif;
  border-radius: 8px;
  text-decoration: none;
  color: var(--white);
  font-size: 16px;
  font-weight: normal;
  padding: 10px 25px;
  transition: all 0.5s ease;
  border: 2px solid var(--lwvblue);
}

.button-column .ce-button {
  border-radius: 7px !important;
  width: auto;
  padding-left: 20px !important;
  padding-right: 20px !important;
}


/***
 * Navigation and menu
 */

/* Hides the login link in the static top bar */
.static-bar #non_member_panel .login-link {
  display: none;
}

/* Main desktop navigation menu container */
#menu_container,
ul.horizontal.site-menu {
  background-color: var(--lwvred) !important;
  border-top: none;
  border-bottom: none;
}

ul.horizontal.site-menu li,
ul.horizontal.site-menu li:hover span span {
  background-color: transparent;
}

/* Search panel button text color */
.search-panel .ce-button {
  color: var(--black) !important;
}


/***
 * Mobile navigation and layout
 */

.menu-toggle {
  background-color: var(--lwvblue);
}

.mobile-site-menu li {
  background-color: var(--lwvblue) !important;
}

.mobile-site-menu ul.sub-menu li {
  background-color: #f3f3f3 !important;
}

/* Hiding desktop-specific social sharing on mobile */
#mobile_layout_wrapper #share_hover_button,
#mobile_layout_wrapper .social-network-panel {
  display: none;
}

#mobile_layout_wrapper .bsoc #social_panel {
  left: initial;
}

#mobile_content_column .home-page h1 {
  padding-right: 0px !important;
}

.layout-social-container {
  display: inline-block;
}


/***
 * Homepage/homebox styles
 */

.home-page .build-column {
  padding: 0px;
}

.homebox {
  position: relative;
  min-height: 400px;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

/* Dark overlay for the homebox banner image */
.homebox:after {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  content: "";
  background: rgba(0, 0, 0, 0.25);
  z-index: 0;
}

/* Text on top of the homebox banner */
.homebox .hometext {
  position: absolute;
  top: 10%;
  left: 20px;
  z-index: 1;
  color: var(--white);
  font-size: 36px;
  font-family: var(--sitefont);
  font-weight: bold;
}

a .hometext {
  text-decoration: none;
}

.build-column .hmbanner {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

/* Horizontal rule for homepage sections */
.homehr {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.build-column .homehr {
  margin-top: 30px;
  margin-bottom: 30px;
}


/***
 * Content column and cell styles
 */

.build-column {
  position: relative;
}

.sscwrapper {
  margin-top: -10px;
}

.sscwrapper h2 {
  margin-top: 0px;
}

.build-column .sscwrapper img {
  margin-bottom: 3px;
}

/* News cell styling */
.newscell .inner-column {
  text-align: center;
  padding-top: 30px;
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  padding-left: 10px;
  padding-right: 10px;
}

.newscell a {
  font-weight: bold;
  text-decoration: none;
  font-size: 20px;
  color: var(--black);
}

.newscell h2 {
  width: 100%;
  text-align: center;
  padding: 0px;
  font-weight: bold;
}

/* Caption column styling */
.cap-col .inner-column {
  padding: 30px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.cap-col .caption {
  text-align: center;
  box-sizing: border-box;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 18px;
  line-height: 1.4;
}

.cap-col .caption h2 {
  font-weight: bold;
}

.quarter,
.half {
  border-right: none !important;
}


/***
 * Widget styles
 */

.rn-summary {
  font-size: 14px;
}

.ue-event {
  clear: both;
  padding-bottom: 5px;
  float: left;
  width: 100%;
  border-bottom: 1px solid var(--black);
  margin-bottom: 5px;

}

.ue-desc,
.ba-date,
.job-desc {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px !important;
  color: var(--black) !important;
  line-height: 1.3;
}


/***
 * Responsive media queries
 *
 * Styles within the @media {...} blocks only apply to screens
 * that are sized according to the rules immediately following
 * @media.
 */

/*
 * Targets mobile devices in portrait and landscape.
 * (e.g., iPhones, smaller Android devices)
 */
@media (min-width: 320px) and (max-width: 767px) {
  .homebox {
    min-height: 200px;
    margin-top: 20px;
  }
  .homebox .hometext {
    font-size: 26px;
  }

  .newscell .inner-column {
    padding-top: 0px;
  }
  .home-page .hmbanner .thirty,
  .home-page .hmbanner .seventy {
    text-align: center;
  }
  .home-page .cap-col .inner-column {
    padding: 0px;
  }
  .home-page .cap-col {
    margin-bottom: 20px;
  }
}

/*
 * Targets tablets and larger mobile devices.
 * (e.g., iPads, Galaxy Tabs)
 */
@media (min-width: 768px) and (max-width: 1024px) {
  .homebox {
    min-height: 300px;
  }
  .homebox .hometext {
    font-size: 26px;
  }
  .newscell .inner-column {
    padding-top: 0px;
  }
  #fkftr .layout-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/*
 * Targets large desktop monitors.
 * (e.g., screens wider than 1824px)
 */
@media (min-width: 1824px) {
  .homebox {
    min-height: 500px;
  }
}