/*!
 * Senate Democratic Caucus
 * Guava Sub Theme Styling
 *
 * Last Worked On By: ST - Active
 */

/* Optional Accent Fonts */
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital@1&display=swap');

:root {
  --primary-color: #05274E !important;
  --secondary-color: #144681 !important;
  --accent-color: #F47824 !important;
}

/* Misc
*************************/
.flexslider .slides img {
    display: block;
    position: relative;
    object-fit: cover;
    height: auto;
    width: 100%;
    object-position: 0px -100px;
}

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

.slant-wrapper-photo:after {
    content: '';
    position: absolute;
    border-style: solid;
 }
 
 .slant-wrapper-photo.tr:after {
    top: 0;
    right: 0;
    border-width: 40px 0px 0px 40px;
    border-color: #fff var(--secondary-color);
 }
 
 .slant-wrapper-photo.br:after {
    bottom: 0;
    right: 0;
    border-width: 40px 40px 0px 0px;
    border-color: var(--primary-color) #fff;
 }
 
 .slant-wrapper-photo h4 {
    color: var(--accent-color);
 }
 
 .slant-wrapper-photo h1 {
    color: #fff;
    margin: 0px auto !important;
 }

@media screen and (max-width: 767px) {
.flexslider .slides img {
    height: 800px !important;
    object-position: 50% 100px !important;    
}
}

fieldset.webform-header-section {
    height: 2310px !important;
} 

.webform-header-section .banner-bg  {
    position: relative;
    width: 35%;
    height: 2310px !important;
    background: url(/sites/sd08.senate.ca.gov/files/website/sd08_bg2.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
} 

.site-footer:after {
    content: '08' !important;
    position: absolute;
    bottom: 140px;
    right: 20px;
    color: #fff;
    font-family: var(--head-font);
    font-size: 46rem !important;
    font-weight: var(--head-weight) !important;
    line-height: 140px;
    letter-spacing: -36px;
    opacity: 0.065;
}

@media (max-width: 767px) {
    .page-node-251 .slant-wrapper {
    position: relative;
    background: var(--primary-color);
    width: 141%;
    padding: 40px 0px 40px 24%;
    margin: 60px auto 40px;
    border: 0px !important;
    left: -24%;
    }
    .not-front .region-featured-bottom-third {
            flex-direction: column-reverse;
        padding: 0px !important
    }
    .not-front .region-featured-bottom-third .cta h2,
    .not-front .region-featured-bottom-third .cta .btn-item {
               text-align: center;     
    }
}