/*!
 * Senate Democratic Caucus
 * Guava Theme Styling
 *
 * Last Worked On By: Sundarong - 3/14/2024
 */


/* Table of Contents
*************************
 ** Main Fonts
 ** Global (override)
 ** Typography (override)
 ** Buttons (override)
 ** Navigation
 *  - Main Navigation
 *  - Menu Animation
 *  - Dropdown
 *  - Menu Button
 ** Featured Top
 *  - Flexslider
 ** General Page (override)
 ** Home Page Blocks (override)
 *  - Senator Block
 *  - Latest News
 *  - Latest Videos
 ** District Page
 *  - District Tables
 *  - Deferred Area
 *  - District Map
 ** Newsroom Pages
 ** Contact Page
 *  - Accordion
 *  - Webform (override)
 ** Sidebar (override)
 ** Pagination (override)
 ** Footer
 ** Misc
 *  - Slant Accent
 *  - Blockquote Accent
 *  - Sidebar Accent
 *  - Read More Accent
*/


/* Main Fonts 
*************************/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');

:root {
   --primary-color: #05274E;
   --secondary-color: #144681;
   --accent-color: #f0791e;
   --dark-color: #153049;
   --light-color: #F8FBFF;
   --table-color: #AEC8E5;
   --rgba-color: rgba(5, 39, 78, .9);
   --head-font: 'Oswald', serif;
   --body-font: 'Montserrat', serif;
   --subhead-font: 'Montserrat', sans-serif;
   --head-weight: 700;
   --subhead-weight: 500 --body-weight: 400;
   --link-weight: 600;
   --box-shadow: 0px 4px 20px rgba(149, 157, 165, 0);
}

/* Global (override) 
*************************/
body {
   background: white;
}

.fixed-width .main-content {
   max-width: 1280px !important;
}

@media (max-width: 767px) {
   body {
      font-size: 1.6rem !important;
   }
}

/* Typography (override)  
*************************/
h1 {
   position: relative;
   margin-bottom: 0px !important;
   font-family: var(--head-font) !important;
   font-size: 5.4rem !important;
   letter-spacing: 0px;
   font-weight: 500 !important;
   text-transform: uppercase;
   border-bottom: 0px solid #d6d6d6 !important;
   z-index: 1;
}

.not-front h1 {
   width: 100%;
   text-align: left;
}

h2 {
   position: relative;
   font-family: var(--head-font) !important;
   font-size: 4.8rem !important;
   letter-spacing: 0px;
   font-weight: 500 !important;
   text-transform: uppercase;
   border-bottom: 0px solid #d6d6d6 !important;
   z-index: 1;
}

.header-wrapper h2 span {
   background: #fff;
   color: var(--accent-color);
   padding-right: 20px;
}


.header-wrapper h2:after {
   content: '\a0';
   display: block;
   position: relative;
   transform: translateY(-18px);
   width: 100%;
   height: 1px;
   background-color: var(--secondary-color);
   overflow: hidden;
   z-index: -1;
}

h3,
.teaser-wrapper .teaser-wrapper-txt a:not(.arrow),
.teaser-wrapper a:not(.arrow) {
   font-family: var(--subhead-font);
   font-size: 2.4rem !important;
   line-height: 1.3;
   font-weight: var(--link-weight) !important;
   letter-spacing: 0px;
   text-transform: capitalize;
   text-align: left;
   margin-bottom: 12px !important;
}

h4,
.hero-tabs li,
.site-footer__top h2 {
   font-family: var(--subhead-font);
   font-size: 1.8rem !important;
   font-weight: var(--link-weight) !important;
   text-transform: uppercase;
   margin: 0px !important;
}

h5 {
   color: var(--accent-color);
   font-family: var(--subhead-font);
   font-size: 2rem;
   font-weight: var(--link-weight);
   letter-spacing: 1.5px;
   text-transform: capitalize;
}

a,
p a {
   color: var(--dark-color);
   font-family: var(--body-font);
   font-weight: var(--link-weight);
}

a:hover {
   color: var(--accent-color);
}

.accent {
   color: var(--accent-color);
}

.views-field-taxonomy-vocabulary-2 {
   margin: 8px 0px 20px;
}

.fa-angle-right {
   font-size: 1.4rem;
}

.contact-blk {
   color: var(--light-color);
   font-weight: var(--link-weight);
   font-size: 1.4rem !important;
}

.contact-blk p {
   margin: 0px !important;
}

.contact-blk a {
   color: var(--accent-color);
   font-size: 1.4rem;
}

@media (max-width: 991px) {

   .latest-news h2:before,
   .latest-news h2:after,
   .view-footer p a:before,
   .view-footer p a:after {
      display: none;
   }

   h1,
   .node--type-news .field--name-node-title h2 {
      font-size: 3.6rem !important;
   }

   h2 {
      font-size: 3.2rem !important;
   }
}

/* Buttons (override)
*************************/
.btn {
   border-radius: 0px !important;
}

.btn-primary {
   display: inline-block;
   background: var(--accent-color) !important;
   color: #fff !important;
   font-size: 1.4rem !important;
   padding: 10px 16px !important;
   border: 2px solid var(--accent-color) !important;
}

.btn-primary:hover {
   background-color: transparent !important;
   color: var(--accent-color) !important;
   border: 2px solid var(--accent-color) !important;
}


.btn-secondary {
   display: inline-block;
   background: transparent !important;
   color: var(--accent-color) !important;
   font-size: 1.4rem !important;
   padding: 10px 16px !important;
   border: 2px solid var(--accent-color);
}

.btn-secondary:hover {
   background-color: var(--accent-color) !important;
   color: #fff !important;
   border: 2px solid var(--accent-color) !important;
}

/* Navigation 
*************************/
/* Main Navigation */
#navbar-top {
   background: var(--primary-color);
   justify-content: space-between;
   padding: 0px 40px;
}

.navbar-expand-lg {
   background: var(--secondary-color);
   padding: 12px 4% !important;
   z-index: 100;
}

.scrolled .navbar-expand-lg.affix {
   background: var(--secondary-color) !important;
}

.navbar-brand {
   position: relative;
   height: 100%;
   max-width: 100%;
   padding: 0px !important;
   overflow: hidden;
   opacity: 1;
   z-index: 10;
}

.affix .navbar-brand {
   opacity: 1;
}

.navbar-brand img {
   position: relative;
   max-height: 72px;
   margin: 0px auto;
   padding: 0px;
   text-align: center;
   z-index: 1;
}

.navbar-nav {
   display: flex;
   flex-wrap: nowrap;
}

.navbar-expand-lg .navbar-nav .nav-link {
   padding: 12px 20px !important;
   text-align: center;
   font-size: 1.4rem;

}

nav.block-menu ul li .nav-link,
nav.block-menu ul li .dropdown-toggle,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.nav-link {
   position: relative;
   color: var(--light-color);
   cursor: pointer;
}

.scrolled nav.block-menu ul li .nav-link {
   color: var(--light-color) !important;
}

.scrolled nav.block-menu ul li .nav-link:hover:not(.nav-link--contact) {
   color: var(--accent-color) !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
   .navbar-expand-lg {
      padding: 0px 2% !important;
   }

   .navbar-expand-lg .navbar-nav .nav-link {
      padding: 0px 12px !important;
   }
}

@media (max-width: 991px) {
   .navbar-expand-lg {
      background: var(--primary-color) !important;
      padding: 20px !important;
   }

   .header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
   }

   .navbar-brand {
      display: block;
      width: 240px;
      text-align: left;
      margin: 0px 0px;
      padding: 0px;
      opacity: 1;
   }

   .navbar-nav {
      margin: 0px auto !important;
      padding: 120px 0px;
      text-align: left;
      float: none;
      z-index: -10;
   }

   .navbar-nav>li {
      justify-content: center;
      flex-direction: column;
      height: auto;
      width: 280px;
      padding: 0px;
      margin: 0px auto;
   }

   .show .navbar-nav {
      z-index: 100
   }

   .navbar-expand-lg .navbar-nav .nav-link {
      display: none;
      padding: 20px !important;
   }

   .navbar-expand-lg .show .navbar-nav .nav-link {
      display: block;
   }

   .navbar-nav .nav-item {
      opacity: 0;
      transform: translateY(36px);
      transition: transform 0.2s 0.14s, opacity 0.2s 0.14s;
   }

   .show .navbar-nav .nav-item {
      border-bottom: 1px solid #cacaca;
      opacity: 1;
      transform: translateY(0px);
      transition: transform 0.2s 0.14s, opacity 0.2s 0.14s;
   }

   .show .navbar-nav .nav-item:last-child {
      border-bottom: 0px solid #cacaca;
   }

   .show ul.navbar-nav li:nth-child(1) {
      transition-delay: 0.55s !important;
   }

   .show ul.navbar-nav li:nth-child(2) {
      transition-delay: 0.65s !important;
   }

   .show ul.navbar-nav li:nth-child(3) {
      transition-delay: 0.75s !important;
   }

   .show ul.navbar-nav li:nth-child(4) {
      transition-delay: 0.85s !important;
   }

   .show ul.navbar-nav li:nth-child(5) {
      transition-delay: 0.95s !important;
   }

   .show ul.navbar-nav li:nth-child(6) {
      transition-delay: 1.05s !important;
   }

   .show ul.navbar-nav li:nth-child(7) {
      transition-delay: 1.15s !important;
   }

   .show .navbar-nav .nav-item.active-trail {
      background: var(--light-color);
   }

   .navbar-nav>li>a,
   .navbar-nav>li>span {
      font-size: 1.4rem;
      letter-spacing: 2px;
   }

   header nav.block-menu>ul>li:last-child>a {
      background-color: transparent;
   }
}

@media screen and (max-width: 767px) {
   .navbar-nav {
      max-width: 100%;
      padding: 40px 0px;
   }

   .navbar-nav>li>a:hover {
      color: var(--light-color) !important;
   }
}

/* Menu Animation */
.navbar-nav>li,
.nav-link {
   display: flex;
   align-items: center;
   position: relative;
   background: transparent;
   color: var(--light-color);
   font-family: var(--subhead-font);
   font-weight: 600;
   font-size: 1.4rem;
   letter-spacing: 0.5px;
   line-height: 36px;
   text-transform: capitalize;
   z-index: 100;
}

.navbar-nav>li {
   height: 60px;
}

.navbar-nav>li:hover,
.navbar-nav>li:focus,
.navbar-nav>li:active {
   background-color: transparent;
   color: var(--secondary-color);
}

.navbar-nav>li:active {
   border: 2px solid var(--accent-color);
}

.navbar-nav>li:hover::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   height: 0;
   width: 0;
   z-index: 1;
   border-bottom: 2px solid var(--accent-color);
   animation: grow .35s linear;
   animation-fill-mode: forwards;
}

@keyframes grow {
   100% {
      width: 100%;
   }
}

.navbar-nav>li>a {
   color: var(--dark-color);
}

.navbar-nav>li>a:hover {
   color: var(--secondary-color);
}

nav#block-senate-ux-v1-main-menu ul li .nav-link:before,
nav#block-senate-ux-v1-main-menu ul li .dropdown-toggle:before {
   content: '.';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   margin: auto;
   width: 0%;
   height: 4px;
   background: transparent;
   color: transparent;
}

nav#block-senate-ux-v1-main-menu ul li .nav-link,
nav#block-senate-ux-v1-main-menu ul li .dropdown-toggle {
   transition: all 2s;
}

nav#block-senate-ux-v1-main-menu ul li .nav-link:before,
nav#block-senate-ux-v1-main-menu ul li .dropdown-toggle:before {
   content: '.';
   margin: 0;
   text-align: left;
   opacity: 0;
}

nav#block-senate-ux-v1-main-menu ul li .nav-link:hover,
nav#block-senate-ux-v1-main-menu ul li .dropdown-toggle:hover,
.menu-item--expanded:hover .dropdown-toggle {
   color: var(--accent-color);
   z-index: 1;
}

nav#block-senate-ux-v1-main-menu ul li .nav-link:hover:before,
nav#block-senate-ux-v1-main-menu ul li .dropdown-toggle:hover:before,
.menu-item--expanded:hover .dropdown-toggle:before {
   z-index: -10;
   animation: fill 1s forwards;
   -webkit-animation: fill 1s forwards;
   -moz-animation: fill 1s forwards;
   opacity: 1 !important;
}

@-webkit-keyframes fill {
   0% {
      width: 0%;
      height: 2px;
   }

   50% {
      width: 100%;
      height: 2px;
   }

   100% {
      width: 100%;
      height: 4px;
      background: var(--accent-color);
   }
}

@media screen and (max-width: 991px) {

   nav.block-menu ul li .nav-link,
   nav.block-menu ul li .dropdown-toggle {
      position: relative;
      color: var(--light-color);
      cursor: pointer;
   }

   nav#block-senate-ux-v1-main-menu ul li .nav-link:hover,
   nav#block-senate-ux-v1-main-menu ul li .dropdown-toggle:hover,
   .menu-item--expanded:hover .dropdown-toggle {
      color: #fff !important;
      z-index: 1;
   }

   nav#block-senate-ux-v1-main-menu ul li .nav-link:hover:before,
   nav#block-senate-ux-v1-main-menu ul li .dropdown-toggle:hover:before,
   .menu-item--expanded:hover .dropdown-toggle:before {
      border-radius: 0px;
   }

   @-webkit-keyframes fill {
      0% {
         width: 0%;
         height: 100%;
      }

      50% {
         width: 100%;
         height: 100%;
      }

      100% {
         width: 100%;
         height: 100%;
         background: var(--accent-color);
      }
   }
}

/* Dropdown */
.navbar-expand-lg .navbar-nav .nav-item .dropdown-menu {
   position: absolute;
   top: 60px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--secondary-color);
   color: var(--light-color);
   width: 200px;
   margin: 0px auto;
   padding: 8px 8px 8px;
   border: 0px !important;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
}

.path-frontpage .navbar-expand-lg .navbar-nav .nav-item .dropdown-menu {
   background: var(--secondary-color);
}

.scrolled .navbar-expand-lg.affix .navbar-nav .nav-item .dropdown-menu {
   background: var(--primary-color) !important;
}

.dropdown-item {
   white-space: initial !important;
}

.dropdown-item.active {
   background: var(--accent-color) !important;
}

.dropdown-item.active a {
   color: var(--light-color) !important;
}

.dropdown-menu>li {
   background: transparent;
   text-align: center;
   padding: 4px;
   margin: 0px auto;
}

.dropdown-menu>li:last-child {
   border-bottom-left-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
}

.dropdown-menu>li:focus,
.dropdown-menu>li:hover {
   background: var(--accent-color);
   text-decoration: none !important;
}

.scrolled .dropdown-menu>li:focus,
.scrolled .dropdown-menu>li:hover {
   background: var(--secondary-color);
}


.dropdown-menu>li>a {
   font-family: var(--subhead-font);
   font-weight: 600;
   font-size: 1.4rem;
   color: var(--light-color);
   letter-spacing: 0.5px;
   text-transform: capitalize;
   text-decoration: none;
}

.scrolled .dropdown-menu>li>a {
   color: var(--light-color);
}

.dropdown-menu>li:focus>a,
.dropdown-menu>li:hover>a,
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
   color: white !important;
}

.dropdown-toggle::after {
   content: "";
   display: inline-block;
   position: relative;
   top: 2px;
   left: 4px;
   margin-left: 0px;
   border-top: .3em solid;
   border-right: .3em solid transparent;
   border-right: .3em solid transparent;
   border-bottom: 0;
   border-left: .3em solid transparent;
}

@media (min-width: 992px) {
   .navbar-collapse.collapse {
      display: flex !important;
      width: 100%;
   }

   .nav>li>a {
      padding: 10px 12px;
   }

   .navbar-collapse {
      display: inline-block !important;
      float: right;
   }

   ul.nav li.dropdown:hover>ul.dropdown-menu {
      display: block;
   }
}

@media (max-width: 991px) {
   .navbar-expand-lg .navbar-nav .nav-item .dropdown-menu {
      position: relative;
      top: 0px;
      left: 0px;
      transform: translateX(0%);
      width: 100%;
      border-radius: 0px;
   }

   .nav-item .dropdown-toggle {
      display: flex;
      justify-content: space-between;
   }

   .navbar-expand-lg .navbar-nav .dropdown-menu {
      position: static;
      left: 0%;
      transform: translateX(0%);
   }

   .dropdown-toggle.is-visible+.dropdown-menu {
      display: block;
   }

   .dropdown-menu>li {
      margin: 8px auto;
      padding: 12px 36px;
      border-radius: 8px;
   }

   .dropdown-menu>li:focus,
   .dropdown-menu>li:hover {
      background: transparent;
      color: var(--accent-color);
   }

   .dropdown-menu>li:hover:last-child {
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
   }

   .dropdown-menu>li>a {
      display: block;
   }

   .dropdown-menu>li>a:focus,
   .dropdown-menu>li>a:hover {
      color: var(--accent-color);
   }

   .navbar-expand-lg .navbar-collapse:not(.show) {
      display: block;
      height: 0px;
      overflow: hidden;
   }

   .navbar-expand-lg .navbar-collapse {
      display: block;
      height: 100vh;
   }

   .dropdown-toggle::after {
      top: 0px;
      left: 8px;
      transform: rotate(-90deg);
   }

   .dropdown-toggle.is-visible::after {
      transform: rotate(0deg);
   }

   .dropdown-item.active {
      background: var(--primary-color) !important;
   }

   .navbar-nav .nav-link.active {
      color: var(--primary-color) !important;
   }
}

@media (max-width: 767px) {
   .navbar-expand-lg .navbar-nav .nav-item .dropdown-menu {
      width: 100%;
   }
}

/* Menu Button */
.navbar-toggler {
   position: absolute;
   top: 0px;
   right: 0px;
   height: 30px;
   width: 30px;
   z-index: 110;
}

.navbar-toggler>span {
   position: absolute;
   left: 50%;
   top: 50%;
   background-color: var(--secondary-color);
   border-radius: 1px;
   height: 3px;
   width: 72%;
   margin: -1px 0 0 -15px;
   transition: height 100ms;
}

.navbar-toggler>span:after,
.navbar-toggler>span:before {
   content: '';
   position: absolute;
   left: 64%;
   background-color: var(--secondary-color);
   border-radius: 1px;
   height: 3px;
   width: 72%;
   margin-left: -14px;
   transition: all 200ms;
}

.navbar-toggler>span:after {
   top: -8px;
}

.navbar-toggler>span:before {
   bottom: -8px;
}

.navbar-toggler.act>span {
   height: 0;
}

.navbar-toggler.act>span:after,
.navbar-toggler.act>span:before {
   background-color: var(--accent-color);
   top: 1px;
}

.navbar-toggler.act>span:after {
   transform: rotate(45deg);
}

.navbar-toggler.act>span:before {
   transform: rotate(-45deg);
}

@media (max-width: 991px) {
   .navbar-toggler {
      position: relative;
      float: none !important;
      background-color: var(--light-color) !important;
      height: 42px;
      width: 42px;
      border-radius: 2px !important;
   }
}

/* Featured Top
*************************/
/* Flexslider */
.region-featured-top {
   display: contents;
}

.path-frontpage .featured-top {
   display: block;
   position: relative;
   height: 920px;
   z-index: 10;
}

.flexslider {
   height: 800px;
   overflow: hidden;
}

.flexslider .slides img {
   position: relative;
}

.flexslider:hover .flex-direction-nav .flex-next {
   right: 40px !important;
   opacity: 1 !important;
}

.flexslider:hover .flex-direction-nav .flex-prev {
   left: 40px !important;
   opacity: 1 !important;
}

.flex-direction-nav a {
   width: 60px !important;
}

.flex-direction-nav a:before {
   color: #fff !important;
}


/* General Page (override)
*************************/
#featured-bottom,
#featured-bg,
#featured-misc {
   position: relative;
   max-width: 100%;
   margin-top: 0px !important;
   padding: 80px 4% 80px;
}

main#content.main-content.col {
   margin-left: 0px !important;
}

#main-wrapper {
   max-width: 100%;
   margin-top: 0px !important;
   padding: 140px 8% 80px;
}

.page-node-252 #main-wrapper {
   padding: 0px 8% 80px;
}

.featured-bottom .region-featured-bottom-first,
.featured-misc .region-featured-bottom-second,
.featured-misc .region-featured-bottom-third {
   margin: 0px auto !important;
}

.region-featured-bottom-second {
   max-width: 100% !important;
}

@media (max-width: 767px) {
   #main-wrapper {
      padding: 80px 20px !important;
   }
}

/* Home Page Blocks (override)
*************************/
/* Senator Block */
.senator-blk {
   padding: 0px;
}

.senator-blk .senator-info {
   margin-top: 0px;
   padding: 40px 40px 40px 0px;
}

.senator-img img {
   max-width: 100%;
}

/* Latest News */
.region-featured-bottom-first h2,
.region-featured-bottom-second h2 {
   text-align: center;
   margin: 0px auto 40px !important;
}

.region-featured-bottom-first .view-footer,
.region-featured-bottom-second .view-footer {
   position: relative;
   text-align: center;
   margin: 40px auto 0px !important;
}

.region-featured-bottom-first h2:before,
.region-featured-bottom-first .view-footer:before {
   content: '';
   display: block;
   position: relative;
   transform: translateY(32px);
   width: 100%;
   height: 1px;
   background-color: var(--secondary-color);
   overflow: hidden;
   z-index: -2;
}

.region-featured-bottom-first h2:after {
   content: '';
   display: block;
   position: relative;
   top: -30px;
   left: 50%;
   transform: translateX(-50%);
   width: 500px;
   height: 8px;
   background: #fff;
   text-align: center;
   z-index: -1;
}

.region-featured-bottom-first .view-footer:after {
   content: '';
   display: block;
   position: relative;
   top: -24px;
   left: 50%;
   transform: translateX(-50%);
   width: 500px;
   height: 2px;
   background: #fff;
   text-align: center;
   z-index: -1;
}

.news-content {
   padding: 20px !important;
}

.field--name-field-front-image {
   text-align: center;
}

.latest-news h2,
.latest-news .view-footer p {
   text-align: center;
}

.latest-news .view-footer p {
   position: relative;
}

.teaser-wrapper {
   bottom: 0px;
   margin: 0px auto;
   border: 1px solid #AEC8E5;
}

.teaser-wrapper-txt {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   gap: 12px;
   height: 400px;
   padding: 40px;
}

.path-frontpage .teaser-wrapper-txt {
   gap: 0px;
}

.teaser-wrapper-txt h3 {
   margin-bottom: 20px !important;
}

.teaser-wrapper .views-field-title {
   margin-top: 0px;
}

.teaser-wrapper .views-field-title a,
.teaser-wrapper-txt p,
.teaser-wrapper-txt a,
.accordion-content p:first-child {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
}

.teaser-wrapper-txt>a:after {
   content: '';
   display: inline-block;
   position: relative;
   margin-left: 8px;
}

.teaser-wrapper img {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
}

.teaser-wrapper-txt>a>i {
   font-size: 1.5rem;
}

.path-frontpage .view-id-newsroom,
.path-frontpage .view-content-video {
   padding: 0px;
}

div.views-field.views-field-field-pubdate.pubdate {
   text-align: left !important;
}

@media (max-width: 991px) {
   .latest-news .view-id-newsroom .view-content>*:last-child {
      display: none;
   }

   .teaser-wrapper {
      margin: 20px auto;
   }
}

/* Latest Videos */
.not-front .featured-bg {
   display: none;
}

.featured-bg {
   position: relative;
   background: url('/sites/sd08.senate.ca.gov/files/website/sd08_bg.jpg');
   background-size: cover;
   padding: 80px 4%;
}

.featured-bg:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--rgba-color);
   z-index: 0;
}

.featured-bg .teaser-wrapper {
   color: var(--accent-color);
   border: 0px solid;
}

.featured-bg h2,
.featured-bg .teaser-wrapper .field-content a {
   color: #fff;
}


/* District Page
*************************/
/* District Table */
.district-table h4 {
   color: var(--accent-color);
}

table {
   border-collapse: separate !important;
   border-spacing: 0;
   border-bottom: 1px solid var(--table-color) !important;
}

table tr th {
   background-color: inherit !important;
}

.table .thead-dark th {
   color: var(--light-color) !important;
   font-family: var(--head-font);
   font-size: 2.4rem;
   padding: 20px;
   border-color: var(--table-color) !important;
   border-bottom: 0px;
}

.table>:not(caption)>*>* {
   padding: 20px 20px 8px;
}

thead>tr>th:first-child {
   border-left: 1px solid var(--table-color);
   border-top: 1px solid var(--table-color);
   border-top-left-radius: 0px;
}

thead>tr>th:nth-child(2) {
   border-top: 1px solid var(--table-color);
   border-left: 0px solid var(--table-color);
   border-right: 0px solid var(--table-color);
}

thead>tr>th:last-child {
   border-right: 1px solid var(--table-color);
   border-top: 1px solid var(--table-color);
   border-top-right-radius: 0px;
}

table tbody tr th {
    color: var(--dark-color);
   border-left: 1px solid var(--table-color);
   border-right: 1px solid var(--table-color);
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
   --bs-table-bg-type: white !important;
}

.table-striped>tbody>tr:nth-of-type(even)>* {
   --bs-table-bg-type: var(--light-color) !important;
}

table .thead-dark th p,
table tbody tr th p {
   margin-bottom: 0px !important;
}

table tbody tr th p {
   color: #000 !important;
}

table tbody tr td:last-child {
   border-left: 1px solid var(--table-color);
   border-right: 1px solid var(--table-color);
}


.table-striped tbody tr:nth-of-type(odd) {
   background-color: white !important;
}

.table-striped tbody tr:nth-of-type(even) {
   background-color: var(--light-color) !important;
}

/* Deferred Area */
.reap-blk .district-header {
   border: 1px solid var(--primary-color);
   padding: 0px;
   border-radius: 8px;
}

.reap-blk .district-header .district-banner-bg {
   display: block;
   position: relative;
   background: url(/sites/sd02.senate.ca.gov/files/website/sd02_bg5.jpg) no-repeat;
   background-size: cover;
   background-position: center 50%;
   width: 50%;
   height: 1100px;
}

.reap-blk .district-header .district-banner-contents {
   max-width: 50%;
   padding: 60px;
}

@media (max-width: 991px) {
   .district-table {
      width: 100%;
      margin-bottom: 40px;
   }

   .reap-blk .district-header .district-banner-contents {
      max-width: 100%;
      padding: 8% 40px 40px 40px;
   }

   .reap-blk .district-header .district-banner-bg {
      width: 100%;
      height: 400px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
   }
}

/* District Map */
.page-node-251 .block-page-title-block {
   display: none;
}

.district-map {
   position: relative;
   height: 820px;
   margin: 66px 0 0 40px;
}

.district-map a {
   cursor: zoom-in;
}

.district-map a:after {
   background: transparent;
}

.district-map a:hover:after {
   content: 'Click To View';
   position: absolute;
   left: 0;
   top: 0;
   background: var(--rgba-color);
   color: #fff;
   height: 100%;
   width: 100%;
   padding: 50% 0px;
   text-align: center;
   font-size: 3.6rem;
   z-index: 1;

}

.district-map img {
   height: 100%;
   object-fit: cover;
}


/* Newsroom Pages
*************************/
.path-newsroom .teaser-wrapper {
   display: flex;
   position: relative;
   align-items: center;
   margin-bottom: 12px;
}

.teaser-wrapper-txt span {
   color: var(--accent-color);
   font-weight: var(--link-weight);
   text-transform: uppercase;
}

.path-newsroom .block-system-main-block .teaser-wrapper,
.path-newsroom .block-system-main-block .teaser-wrapper a {
   background: var(--light-color);
}

.path-newsroom .teaser-wrapper .teaser-img,
.path-newsroom .teaser-wrapper .teaser-wrapper-txt {
   width: 50%;
}

.path-newsroom .mini .views-row:first-child .teaser-wrapper,
.path-newsroom .mini .views-row:nth-child(4) .teaser-wrapper,
.path-newsroom .mini .views-row:nth-child(5) .teaser-wrapper,
.path-newsroom .mini .views-row:nth-child(8) .teaser-wrapper,
.node--type-news .views-row:nth-child(2) .teaser-wrapper {
   background: var(--light-color);
}

.path-newsroom .mini .teaser-wrapper .teaser-wrapper-txt {
   width: 100%;
}

.path-newsroom .teaser-wrapper .teaser-img img {
   height: 420px;
}

/* Contact Page
*************************/
.contact-page-blk {
   height: 100%;
   margin: 0px auto;
   border: 0px solid #ffffff;
}

.contact-page-blk .banner-contents {
   max-width: 100%;
   padding: 10% 80px;
}

.contact-page-header {
   display: flex;
   justify-content: space-between;
   background: transparent;
   padding: 0px 0px 0px 40px;
   color: var(--dark-color);
   border-radius: 4px;
   z-index: 10;
}

.contact-page-header>.banner-contents>h4 {
   color: var(--accent-color);
}


.contact-page-blk .accordion {
   padding: 10% 40px;
}

.contact-page-blk .accordion-top {
   justify-content: space-between;
   background: white;
   border-top: 1px solid var(--primary-color);
   border-radius: 0px;
}

.contact-page-blk .accordion-content {
   flex-direction: row;
   border-radius: 0px;
}

.contact-page-blk .accordion-content.active {
   padding: 70px 40px 70px;
}

.contact-page-blk .accordion-top h4 {
   padding: 20px 40px;
   color: var(--primary-color);
}

.contact-page-blk .accordion .accordion-top>p {
   position: relative;
   width: 40%;
   margin: 20px;
   text-align: right !important;
}

.contact-page-blk .accordion-top.active {
   background: white;
}

.contact-page-blk .accordion-top.active h4 {
   color: var(--accent-color);
}

/* .contact-page-blk .accordion-content.active {
   padding: 40px 40px 100px;
} */

.phone p span {
   color: var(--secondary-color);
}

/* Accordion */
.accordion {
   display: block;
   position: relative;
   z-index: 1;
}

.accordion-content.active {
   height: 200px !important;
   padding: 28px;
}

.accordion-top {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-direction: row;
   position: relative;
   background: var(--primary-color);
   border-radius: 8px;
}

.accordion-top.active {
   background: var(--secondary-color);
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
}

.accordion-top .icon {
   height: 100px;
   width: 100px;
   padding: 20px;
   border-right: 1px solid var(--light-color);
}

.accordion-top h3,
.accordion-top h4 {
   color: var(--light-color);
   padding: 20px;
}

.accordion .accordion-top>p {
   display: block;
   position: absolute;
   width: 100%;
   margin-top: 112px;
   text-align: center;
}

.open {
   background: white;
   color: var(--primary-color);
   width: 48px;
   height: 48px;
   padding-top: 4px;
   border: 1px solid var(--primary-color);
   border-radius: 50%;
}

.accordion-top.active .open {
   background: var(--accent-color);
   color: var(--light-color);
   border: 1px solid var(--accent-color);
}

.open:hover {
   background: var(--accent-color);
   color: var(--light-color);
   border: 1px solid var(--accent-color);
}

.accordion-content {
   display: flex;
   flex-direction: column;
   gap: 40px;
   position: relative;
   top: 0px;
   background: white;
   height: 0px;
   padding: 0px 40px;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
   overflow: hidden;
   z-index: -1;
}

.accordion-content.active {
   padding: 32px 40px 0px;
}

@media (max-width: 991px) {
   .accordion-content p:first-child {
      -webkit-line-clamp: 3;
   }
}

@media (max-width: 767px) {
   .accordion-content {
      gap: 20px;
      padding: 0px 20px 0px;
   }

   .accordion-content.active {
      padding: 40px 20px 0px;
   }
}


/* Webform */
body.node--type-webform {
   background: white;
}

.node--type-webform .title {
   display: none;
}

#edit-meeting-or-event--wrapper-legend .fieldset-legend:before,
#edit-meeting-or-event--wrapper-legend .fieldset-legend:after {
   content: '\a0';
   position: absolute;
   top: 51%;
   width: 20%;
   height: 1px;
   background-color: var(--dark-color);
   overflow: hidden;
}

#edit-meeting-or-event--wrapper-legend .fieldset-legend:before {
   left: -1%;
}

#edit-meeting-or-event--wrapper-legend .fieldset-legend:after {
   right: -1%;
}

#edit-meeting-or-event--wrapper-legend .fieldset-legend {
   display: block;
   position: relative;
   width: 100%;
   font-family: var(--head-font);
   font-size: 4rem !important;
   text-align: center;
   letter-spacing: 0px;
   font-weight: 500 !important;
   border-bottom: 0px solid #d6d6d6 !important;
   z-index: 1;
}

.page-node-649 #edit-select-a-county--wrapper-legend .fieldset-legend:before,
.page-node-649 #edit-select-a-county--wrapper-legend .fieldset-legend:after {
   content: '\a0';
   position: absolute;
   top: 51%;
   width: 30%;
   height: 1px;
   background-color: var(--dark-color);
   overflow: hidden;
}

.page-node-649 #edit-select-a-county--wrapper-legend .fieldset-legend:before {
   left: -1%;
}

.page-node-649 #edit-select-a-county--wrapper-legend .fieldset-legend:after {
   right: -1%;
}

.page-node-649 #edit-select-a-county--wrapper-legend .fieldset-legend {
   display: block;
   position: relative;
   width: 100%;
   font-family: var(--subhead-font);
   font-size: 4rem !important;
   text-align: center;
   letter-spacing: 0px;
   font-weight: var(--link-weight) !important;
   text-transform: capitalize;
   border-bottom: 0px solid #d6d6d6 !important;
   z-index: 1;
}

.address {
   padding-right: 20px;
}

.webform-form-section .webform-options-display-buttons .form-check-input {
   color: var(--primary-color);
   font-weight: 600;
}

/* For the contact LCMS form */
div#contactForm.container {
   margin-left: 0px !important;
}

.form-control:not(.btn) {
   text-transform: inherit !important;
}

input#edit-choice-1.form-date {
   text-transform: uppercase !important;
}

input#edit-date2.form-date {
   text-transform: uppercase !important;
}

input#edit-last-day-of-work.form-date {
   text-transform: uppercase !important;
}

input#edit-date-case-first-filed.form-date {
   text-transform: uppercase !important;
}

input#edit-date-of-last-payment.form-date {
   text-transform: uppercase !important;
}


#edit-dates-and-times-are-flexible {
   margin-top: .9rem !important;
}

label.form-check-label {
   margin-left: 20px !important;
}

/* Makes radio label specific color when checked or active */
.webform-form-section .webform-options-display-buttons .form-check-label {
   border: 1px solid var(--dark-color);
   border-radius: 0px;
}

.webform-form-section .webform-options-display-buttons .form-check-label {
   font-weight: 600 !important;
   text-transform: uppercase;
   border-left: 0px;
   border-top: 0px;
   border-bottom: 0px;
   color: var(--secondary-color) !important;
}

.webform-form-section .webform-options-display-buttons .form-check-label:hover {
   color: var(--accent-color) !important;
   cursor: pointer;
}

.webform-form-section .webform-options-display-buttons .form-check-label:active {
   color: var(--accent-color) !important;
}

.webform-form-section .webform-options-display-buttons-wrapper:last-child .form-check-label {
   border-right: 0px;
}

.webform-form-section .webform-options-display-buttons .form-check-input:checked~.form-check-label {
   background-color: transparent;
   color: var(--accent-color) !important;
   font-weight: var(--link-weight);
   border-color: var(--dark-color);
}

.webform-form-section .webform-options-display-buttons .form-check-input:checked~.form-check-label:active {
   color: var(--accent-color) !important;

}


.contact-form {
   height: 1080px;
   width: 680px;
}

.webform-actions {
   width: 100%;
}

.btn:not(:disabled):not(.disabled) {
   height: 44px;
   border-radius: 8px;
}

.webform-options-display-buttons .form-check-label {
   border: 1px solid var(--dark-color);
   border-radius: 4px;
}

.webform-options-display-buttons .form-check-input:checked~.form-check-label {
   background: var(--dark-color);
   color: var(--light-color);
}

.webform-header-section>legend {
   display: none;
}

.webform-header-section>.fieldset-wrapper {
   position: relative;
   top: 80px;
   width: 64.5%;
   padding: 0px 80px 40px
}

.webform-header-section>.fieldset-wrapper h4 {
   color: var(--accent-color);
}

.webform-header-section>legend:first-child {
   border: 0px solid #ddd;
   margin: 10px auto 0px;
   padding: 12px 20px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
}

label {
   text-transform: uppercase;
}

/* make the form submit text in black */
.webform-header-section {
    border: 1px solid var(--dark-color);
    border-radius: 8px;
    height: 1600px !important;
}

.webform-header-section .banner-bg,
.webform-header-section > .fieldset-wrapper {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}


@media (max-width: 991px) {
   .webform-form-section .webform-options-display-buttons .form-check-label {
      margin: 8px 0px;
   }

   .webform-options-display-buttons .webform-options-display-buttons-wrapper {
      margin: 1%;
   }

   .webform-header-section .banner-bg,
   .page-node-649 .webform-header-section .banner-bg {
      width: 100%;
      height: 300px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
   }

   .webform-header-section>.fieldset-wrapper {
      top: 20px;
      width: 100%;
   }
}

@media (max-width: 767px) {

   .webform-header-section .banner-bg,
   .page-node-649 .webform-header-section .banner-bg {
      display: none;
   }

   .webform-header-section>.fieldset-wrapper {
      position: relative;
      top: 0px;
      width: 100%;
      padding: 40px 40px 40px;
   }

   .webform-form-section .webform-options-display-buttons .form-check-label:hover {
      color: var(--dark-color);
   }

   .webform-form-section .webform-options-display-buttons .form-check-label {
      background: transparent;
      color: var(--dark-color);
      font-weight: var(--link-weight);
      margin: 1%;
      border: 1px solid var(--dark-color);
      border-radius: 4px;
   }

   .webform-form-section .webform-options-display-buttons-wrapper:last-child .form-check-label {
      border-right: 2px solid var(--dark-color);
   }

   .webform-form-section .webform-options-display-buttons .form-check-input:checked~.form-check-label {
      background: var(--dark-color);
      color: var(--light-color);
      border-radius: 4px;
   }

   .contact-form {
      height: 1200px;
      width: 100%;
   }
}

@media (max-width: 480px) {
   .webform-header-section {
      height: 1900px !important;
   }
}


@media (max-width: 991px) {
   .contact-page-blk {
      width: 100%;
   }

   .contact-page-header {
      padding: 0px;
   }

   #edit-meeting-or-event--wrapper-legend .fieldset-legend:before,
   #edit-meeting-or-event--wrapper-legend .fieldset-legend:after,
   .page-node-649 #edit-select-a-county--wrapper-legend .fieldset-legend:before,
   .page-node-649 #edit-select-a-county--wrapper-legend .fieldset-legend:after {
      display: none;
   }
}

@media screen and (max-width: 767px) {
   .contact-page-blk .banner-contents {
      padding: 160px 10% 40px;
   }

   .contact-page-blk .accordion {
      padding: 8% 0px;
   }

   .contact-page-blk .accordion-top h4 {
      padding: 20px;
   }

   .contact-page-blk .accordion-content.active {
      padding: 40px 20px 60px;
   }

   .address {
      width: 50%;
   }

   .phone span {
      display: block;
   }

   #edit-meeting-or-event--wrapper-legend .fieldset-legend {
      font-size: 3rem !important;
   }
}

/* Sidebar
*************************/
.sidebar a {
   color: var(--light-color) !important;
   font-family: var(--subhead-font);
   font-size: 1.6rem;
   font-weight: var(--link-weight);
}

.sidebar a:active,
.sidebar a:focus,
.sidebar a:hover {
   color: var(--accent-color) !important;
}

#sidebar_first,
#sidebar_second {
   display: flex;
   justify-content: flex-start;
   position: relative;
   top: 0px;
   margin-left: 80px;
}

#sidebar_first>aside {
   position: relative !important;
}

.sidebar .block {
   padding: 0px;
}

.sidebar-content.fixed {
   position: fixed;
   top: 80px;
   width: 100%;
}

.sidebar-content a.active {
   color: var(--accent-color) !important;
}

.fixed img {
   display: none;
}

@media (min-width: 768px) and (max-width: 991px) {
   .sidebar .block {
      top: 200px;
      padding: 20px 0px !important;
   }
}

/* Pagination
*************************/
.page-link:hover {
   background: var(--secondary-color) !important;
}

/* Footer Style
*************************/
.region-footer-top {
   padding-left: 0px !important;
   padding-right: 0px !important;
}

footer {
   background: var(--primary-color);
   border-top: none;
   margin-top: 0 !important;
   padding: 35px 35px 25px 35px;
}

.site-footer {
   display: block;
   position: relative;
   background: var(--primary-color) !important;
   width: 100%;
   padding: 40px 4%;
   margin: 0px auto !important;
   border-top: 4px solid var(--accent-color);
   overflow: hidden;
   z-index: 0;
}

.site-footer__top {
   position: relative;
   z-index: 1;
}

.site-footer__top .region {
   width: 25%;
   padding: 0px 1.5% !important;
}

.site-footer__top h2,
.site-footer__top h4 {
   color: var(--light-color);
   font-weight: var(--head-weight);
   text-transform: uppercase;
}

.site-footer__top .region img {
    display: none;
}

.site-footer .block {
   margin: 20px auto;
   border: 0px solid #444;
   border-color: rgba(255, 255, 255, 0.1);
   padding: 10px;
}

.site-footer__top p {
   color: #fff !important;
   margin: 0.5em auto;
}

.site-footer__bottom .block {
   text-align: center;
   margin: 0px auto;
}

.site-footer__top .nav {
   display: flex;
   flex-direction: column;
}

.site-footer__top nav.block-menu ul li .nav-link {
   color: var(--light-color);
   font-family: var(--body-font);
   font-weight: var(--link-weight);
   font-size: 0.857em;
   padding: 4px 0px;
}

.site-footer__bottom {
   border-top: 0px solid var(--light-color);
}

@media (max-width: 991px) {
   .site-footer__top .region:first-child {
      width: 100% !important;
   }

   .site-footer__top .region {
      width: 100%;
      margin: 0px auto;
   }

   .site-footer__top .region:first-child,
   .site-footer__top .region:first-child .content {
      width: 100%;
      text-align: left;
      margin: 0px auto;
   }

   .site-footer .content {
      margin: 0px auto;
   }

   .site-footer__bottom {
      margin-top: 0px;
      margin-bottom: 0px;
   }

   .site-footer__bottom .region {
      margin: 0px;
      padding: 0px 2%;
   }
}

@media (max-width: 767px) {
   .site-footer {
      padding: 40px 4% 0px;
   }

   .site-footer__top .region:first-child {
      width: 100% !important;
   }

   .site-footer__top .region:first-child,
   .site-footer__top .region:first-child .content {
      text-align: center;
   }

   .site-footer__top .region {
      width: 100%;
      margin: 0px auto;
   }

   .site-footer__top>.region>* {
      text-align: center;
   }

   .site-footer__top h1 {
      text-align: center;
   }
}

/* Misc
*************************/
.header-wrapper {
   padding-top: 40px;
}

.header-wrapper h4 {
   color: var(--secondary-color);
   margin-bottom: 6px !important;
}

.header-wrapper h2 {
   color: var(--primary-color);
}

/* Slant Accent */
.slant-wrapper {
    position: relative;
    background: var(--primary-color);
    width: 116%;
    padding: 40px 0px 40px 180px;
    margin: 0px auto 40px;
    border: 0px !important;
    left: -180px;
}

.slant-wrapper:after {
   content: '';
   position: absolute;
   border-style: solid;
}

.slant-wrapper.tr:after {
   top: 0;
   right: 0;
   border-width: 40px 0px 0px 40px;
   border-color: #fff var(--secondary-color);
}

.slant-wrapper.br:after {
   bottom: 0;
   right: 0;
   border-width: 40px 40px 0px 0px;
   border-color: var(--primary-color) #fff;
}

.slant-wrapper h4 {
   color: var(--accent-color);
}

.slant-wrapper h1 {
   color: #fff;
   margin: 0px auto !important;
}

/* Blockquote Accent */
blockquote {
   color: var(--secondary-color);
   font-size: 3rem;
   font-weight: var(--head-weight);
   letter-spacing: 0px;
   margin: 40px auto;
   padding: 0px 40px;
   border-left: 8px solid var(--accent-color);
}

blockquote span {
   color: var(--accent-color);
}

/* Sidebar Accent */
.sidebar-container {
   background: var(--primary-color);
}

.fixed .sidebar-container:after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   width: 100%;
   background: url('/sites/sd00.senate.ca.gov/files/website/seal_logo_bw.png') 10% 20% no-repeat;
   opacity: .2;
}

.sidebar-container img {
   border-bottom: 8px solid var(--accent-color);
   border-radius: 0px;
}

.sidebar-wrapper {
   display: block;
   position: relative;
   color: #fff;
   padding: 40px;
   font-size: 1.6rem;
   z-index: 1;
}

.sidebar-wrapper>ul>li,
.sidebar-wrapper>ol>li {
   margin-top: 12px;
}

.ellipsis {
   height: 128px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   -moz-binding: url('http://seancannon.com/_test/ellipsis.xml#ellipsis');
}

.sidebar-wrapper span {
   font-weight: var(--link-weight);
}

::marker {
   color: var(--accent-color);
   font-weight: var(--link-weight);
   font-size: 1.6rem;
}

.table-of-content {
   margin: 40px auto;
}

.table-of-content .bio-wrapper>ol>li>a {
   color: #fff;
   font-size: 1.6rem;
   /* transform:  */
}

/* Read More Accent */
#read_more {
   display: inline-block;
   position: absolute;
   bottom: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   margin-top: 20px;
}

.triangle {
   position: relative;
   background: linear-gradient(to bottom right, transparent 0%, transparent 50%, var(--accent-color) 50%, var(--accent-color) 100%);
   bottom: -20px;
   right: -20px;
   width: 20px;
   height: 20px;
}

#read_more:hover {
   animation: bounce 1s infinite;
   -webkit-animation: bounce 1s infinite;
   -moz-animation: bounce 1s infinite;
   -o-animation: bounce 1s infinite;
}

@-webkit-keyframes bounce {

   0%,
   100% {
      -webkit-transform: translate(0);
   }

   50% {
      -webkit-transform: translate(12px, 12px);
   }
}

@-moz-keyframes bounce {

   0%,
   100% {
      -moz-transform: translate(0);
   }

   50% {
      -moz-transform: translate(12px, 12px);
   }
}

@-o-keyframes bounce {

   0%,
   100% {
      -o-transform: translate(0);
   }

   50% {
      -o-transform: translate(12px, 12px);
   }
}

@keyframes bounce {

   0%,
   100% {
      transform: translate(0);
   }

   50% {
      transform: translate(12px, 12px);
   }
}