@charset "utf-8";
/* CSS Document - Custom styles that overwrite the template CSS code*/

/* Social share icons in the utility header only load a social sharing window when they have the
proper .ca-gov-icon-share-* classes, so we are restyling the .ca-gov-icon-share-* classes to look 
like the current .ca-gov-icon-* style on CA.gov (which don't work properly for social sharing 
without inline JS */

.utility-links.social-media-links [class^="ca-gov-icon-share-"] {
  color: #fff !important;
}

.utility-links.social-media-links .ca-gov-icon-share-facebook::before {
  content: "\e616" !important;
}

.utility-links.social-media-links .ca-gov-icon-share-twitter::before {
  content: "\e619" !important;
}

.utility-links.social-media-links .ca-gov-icon-share-email::before {
  content: "\e609" !important;
}

/* Vertically center the links in the utility header */
.utility-header .flex-row .settings-links {
    padding-top: 7px;
}

.utility-header .flex-row .social-media-links .header-cagov-logo {
    padding-left: 0;
}

/* We want the headings in the featured-footer and main-secondary to be one level smaller  */
.featured-footer h2
.main-secondary > h2 {
  font-size: 24.64px;
  font-size: 1.54rem;
  margin-top: 1em;
  margin-bottom: 0.7em;
}

.featured-footer h3
.main-secondary > h3 {
  font-size: 20px;
  font-size: 1.25rem;
  margin-top: 1.33em;
  margin-bottom: 1em;
}

.featured-footer h4
.main-secondary > h4 {
  font-size: 16px;
  font-size: 1rem;
  margin-top: 1.67em;
  margin-bottom: 1.3em;
}

.featured-footer h5
.main-secondary > h5 {
  font-size: 13.92px;
  font-size: 0.87rem;
  margin-top: 1.67em;
  margin-bottom: 1.3em;
}

/* FIX: breadcrumb wrapping doesn't look good on mobile  */

.breadcrumb {
    margin-bottom: 0.5rem;
}

.breadcrumb li {
    margin-bottom: 0.5rem;
    height: auto;
    line-height: 1.45rem;
}

@media (min-width: 768px) {
    .news-item .thumbnail {
        float: left;
        width: 20%;
    }
}

@media (min-width: 992px) {
  .news-item .thumbnail {
    float: left;
    width: 20%;
  }
}

@media (min-width: 1200px) {
    .news-item .thumbnail {
        float: left;
        width: 20%;
    }
}


.utility-header .quarter, .utility-header .three-quarters, .utility-header .third, .utility-header .two-thirds  {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 4px;
  padding-left: 80px;
}


@media (min-width: 768px) {
  .utility-header .quarter {
    float: left;
    width: 25%;
  }
  .utility-header .three-quarters {
    float: left;
    width: 75%;
  }
  .utility-header .third {
    float: left;
    width: 33.33333%;
  }
  .utility-header .two-thirds {
    float: left;
    width: 66.66667%;
  }
}

@media (max-width: 767px) {
  .utility-header .quarter, .utility-header .three-quarters, .utility-header .third, .utility-header .two-thirds  {
    padding-top: 2px;
    float: left;
  }
  .utility-header .quarter {
    padding-left: 70px;
    padding-right: 0 !important;
    width: 25%;
  }
  .utility-header .three-quarters {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 75%;
  }
  .utility-header .third {
    padding-left: 70px;
    padding-right: 0 !important;
    width: 33.33333%;
  }
  .utility-header .two-thirds {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 66.66667%;
  }
  .utility-header .hide-mobile {
    display: none;
  }
}

/* CA.gov doesn't offer wrapping columns for text or lists. I want to have that available.   */

.columns3 {
    column-count: 3;
} 


.columns4 {
    column-count: 4;
} 

@media (max-width: 767px) {
  .columns3 {
    column-count: 1;
  } 

  .columns4 {
    column-count: 2;
  }
} 


/* -----------------------------------------
   SUBSITE BRAND BAR -
----------------------------------------- */
.subsite-bar {
}

.subsite {
    font-size: 1rem;
}

.subsite-bar a:not(.btn) {
  color: whitesmoke;
  text-decoration: none;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.subsite-bar a:not(.btn):hover, .subsite-bar a:not(.btn):focus {
  color: #FDB81E;
  text-decoration: underline;
}

.subsite-bar a:not(.btn):focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.subsite-bar ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.subsite-bar ul::after {
  display: block;
  clear: both;
  content: "";
}

.subsite-bar ul > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

.subsite-bar ul .list-inline-item {
  display: inline-block;
}

.subsite-bar ul .list-inline-item:not(:last-child) {
  margin-right: 5px;
}

@media (max-width: 767px) {
  .subsite-bar ul li {
    width: 50%;
    float: left;
    margin-right: 0 !important;
  }
  .subsite-bar ul a {
    display: block;
    margin-bottom: 11.5px;
  }
}

@media (max-width: 767px) {
  .subsite-bar .socialsharer-container {
    width: 100%;
    float: inherit !important;
  }
  .subsite-bar .socialsharer-container li {
    width: auto;
    margin-left: 0;
  }
}

.owl-item .scLooseFrameZone {
    height: 100%;
}

/* Pagination on the List pages */
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 22px 0;
    border-radius: 0
}

    .pagination > li {
        display: inline
    }

        .pagination > li > a,
        .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            line-height: 1.42857143;
            text-decoration: none;
            color: #428bca;
            background-color: #fff;
            border: 1px solid #ddd;
            margin-left: -1px
        }

        .pagination > li:first-child > a,
        .pagination > li:first-child > span {
            margin-left: 0;
            border-bottom-left-radius: 0;
            border-top-left-radius: 0
        }

        .pagination > li:last-child > a,
        .pagination > li:last-child > span {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0
        }

        .pagination > li > a:hover,
        .pagination > li > span:hover,
        .pagination > li > a:focus,
        .pagination > li > span:focus {
            color: #2a6496;
            background-color: #d6d6d6;
            border-color: #ddd
        }

    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        z-index: 2;
        color: #fff;
        background-color: #046B99;
        border-color: #046B99;
        cursor: default
    }

    .pagination > .disabled > span,
    .pagination > .disabled > span:hover,
    .pagination > .disabled > span:focus,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
        color: #777;
        background-color: #fff;
        border-color: #ddd;
        cursor: not-allowed
    }

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 20px
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 14px
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px
}

/* For Navigation Alignment in Edit Mode */
.top-level-nav > .nav-item > .scEnabledChrome {
    text-align: center;
}

/* Remove extra padding on the 2-column pages */
.two-column .main-content .main-primary {
    padding-left: 0;
}

.two-column .main-content .main-secondary {
    padding-right: 0;
}

/* Remove top margin from all H1's */
h1 {
    margin-top: 0;
}

/* Move the CA logo on the top utility bar to the left */
.header-cagov-logo img {
    left: 16px;
}

/* Page Navigation */
.main-secondary > .list-standout {
    background: #f0f0f0;
    padding: 12px 1.5em;
    margin-bottom: 22px;
}

/* Remove Top margin for H2 in section */
.section > .container > .row > .half > h2 {
    margin-top: 0;
}

/*Featured Links Bar CSS*/
.featured-links-bar {
    padding-top: 23px 0;
    background: #222;
}

.featured-links-bar .featured-links a:not(.btn) {
    color: whitesmoke;
    text-decoration: none;
    display: block;
    margin-top: 11.5px;
    margin-bottom: 11.5px;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    background-image: none;
}

.featured-links-bar a:not(.btn):hover, .featured-links-bar a:not(.btn):focus {
    color: #FDB81E;
    text-decoration: none;
}

.featured-links-bar a:not(.btn):focus {
    outline: none;
    background-repeat: no-repeat;
    outline-offset: -2px;
}

/* Make images and tables responsive in Rich text*/
.rich-text img {
    display: block;    
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.rich-text::after {
    display: block;
    content: "";
    clear: both;
}

.goog-te-gadget-icon {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

#google_translate_element {
    color: transparent !important;
    
}

.header-slideshow-banner{
    height:325px !important;
}

/* Moves carousel buttons to top of image on small screens to prevent overlap with text. */
@media (max-width: 767px) {
    .header-slideshow-banner .banner-pager, .header-slideshow-banner .banner-play-pause {
        top: 20px !important;
    }
}

.section-standout .published, .section-inverted .published, .section-primary .published{
    color: white !important;
}

/*Alert Banner*/
.container .alert-level {
    padding-left: 0;
    margin-left: 0;
}

.pagePlaceholder > div {
    padding-bottom: 20px;
}

/* -----------------------------------------
   MAKE LIST ITEMS WRAP FLOATED IMAGES
----------------------------------------- */

.rich-text ol, .rich-text ul {
    margin-left: 1.5em;
    padding-left: 0;
}

.rich-text li {
    position: relative;
    left: 1em;
    padding-right: 1em;
}

.banner-pager, .banner-play-pause {
    top: auto !important;
}

.figure-medium {
    max-width: 400px;
    float: left;
    margin-right: 30px;
}

/* Active button highlight */
.btn-default.toggle-active {
    background-color: #E1F2F7;
}