/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */

/* css global  variables*/
:root {
  /* Primary Colors */
  --primary-blue-color: #17315A; /* Blue (Primary) */
  --primary-blue-rgb-color: 23, 49, 90; /* RGB values for #17315A */
  --primary-teal-color: #2D6E8D; /* Teal (Primary) */

  /* Secondary Colors */
  --secondary-light-gray-color: #ECEEF0; /* Light Gray */
  --secondary-medium-gray-color: #AAAAAA; /* Medium Gray */
  --secondary-medium-dark-gray-color: #696A6A; /* Medium Dark Gray */
  --secondary-dark-gray-color: #515253; /* Dark Gray */

  /* Accent Colors */
  --accent-yellow-color: #F9A71C; /* Yellow (Accent) */
  --accent-orange-color: #E47225; /* Orange (Accent) */

}


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
  }
  
  /*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */
  
  ::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  ::selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  /*
   * A better looking default horizontal rule
   */
  
  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }
  
  /*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
  
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }
  
  /*
   * Remove default fieldset styles.
   */
  
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  /*
   * Allow only vertical resizing of textareas.
   */
  
  textarea {
    resize: vertical;
  }
  
  /* ==========================================================================
     Author's custom styles
     ========================================================================== */
  
  /* ==========================================================================
     Helper classes
     ========================================================================== */
  
  /*
   * Hide visually and from screen readers
   */
  
  .hidden,
  [hidden] {
    display: none !important;
  }
  
  /*
   * Hide only visually, but have it available for screen readers:
   * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   *
   * 1. For long content, line feeds are not interpreted as spaces and small width
   *    causes content to wrap 1 word per line:
   *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   */
  
  .sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
  }
  
  /*
   * Extends the .sr-only class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */
  
  .sr-only.focusable:active,
  .sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
  }
  
  /*
   * Hide visually and from screen readers, but maintain layout
   */
  
  .invisible {
    visibility: hidden;
  }
  
  /*
   * Clearfix: contain floats
   *
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    `contenteditable` attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that receive the `clearfix` class.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */
  
  .clearfix::before,
  .clearfix::after {
    content: " ";
    display: table;
  }
  
  .clearfix::after {
    clear: both;
  }
  
  @media print,
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 1.25dppx),
    (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
  }
  
  /* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */
  
  
  @media print {
    *,
    *::before,
    *::after {
      background: #fff !important;
      color: #000 !important;
      /* Black prints faster */
      box-shadow: none !important;
      text-shadow: none !important;
    }
  
    a,
    a:visited {
      text-decoration: underline;
    }
  
    a[href]::after {
      content: " (" attr(href) ")";
    }
  
    abbr[title]::after {
      content: " (" attr(title) ")";
    }
  
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
      content: "";
    }
  
    pre {
      white-space: pre-wrap !important;
    }
  
    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }
  
    /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
      display: table-header-group;
    }
  
    tr,
    img {
      page-break-inside: avoid;
    }
  
    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }
  
    h2,
    h3 {
      page-break-after: avoid;
    }
  }
  
  a.mobile-tel {
      color: white;
      text-decoration: none;
  }
  
  a:link.white-link {
  color: white;
  text-decoration: underline;
  }
  
  a:visited.white-link {
  color: white;
  text-decoration: none;
  }
  
  
  a:hover.white-link {
  color: #faa61c;
  }
  
  
  a:active.white-link {
  color: white;
  text-decoration: none;
  font-weight: bold;
  }
  
  a:link.blue-link {
  color: #325976;
  text-decoration: underline;
  font-weight: bold;
  }
  
  a:visited.blue-link {
  color: #325976;
  text-decoration: none;
  font-weight: bold;
  }
  
  
  a:hover.blue-link {
  color: #faa61c;
  font-weight: bold;
  }
  
  
  a:active.blue-link {
  color: #325976;
  text-decoration: none;
  font-weight: bold;
  }
  
  a:link.orng-link {
  background-color: #e67426;
  text-decoration: none;
  }
  
  a:visited.orng-link {
  background-color: #e67426;
  text-decoration: none;
  }
  
  
  a:hover.orng-link {
  background-color: #faa61c;
  }
  
  
  a:active.orng-link {
  background-color: #e67426;
  text-decoration: none;
  }
  
  #nav_services_title a {
  background-color: var(--primary-blue-color);
  color: white;
  text-decoration: none;
  font-weight: 600;
  }
  
  /**
  
  a:visited.#nav_services_title {
  background-color: #269037;
  text-decoration: none;
  }
  
  
  a:hover.#nav_services_title {
  background-color: #32B242;
  }
  
  
  a:active.#nav_services_title {
  background-color: #269037;
  text-decoration: none;
  }
  
  **/
  
  
  a:link.angst-link {
  background-color: #269037;
  text-decoration: none;
  font-weight: 600;
  }
  
  a:visited.angst-link {
  background-color: #269037;
  text-decoration: none;
  }
  
  
  a:hover.angst-link {
  background-color: #32B242;
  }
  
  
  a:active.angst-link {
  background-color: #269037;
  text-decoration: none;
  }
  
  a:link.ATS-link {
  background-color: white;
  text-decoration: none;
  font-weight: 750;
  }
  
  a:visited.ATS-link {
  background-color: white;
  text-decoration: none;
  }
  
  
  a:hover.ATS-link {
  background-color: #deebe5;
  }
  
  
  a:active.ATS-link {
  background-color: white;
  text-decoration: none;
  }
  
  
  .inline-link {
  text-decoration: underline;
  }
  
  a:link.inline-link-f {
  color: white;
  text-decoration: underline;
  }
  
  a:visited.inline-link-f {
  color: white;
  text-decoration: underline;
  }
  
  
  a:hover.inline-link-f {
  color: #ebebeb;
  text-decoration: none;
  }
  
  
  a:active.inline-link-f {
  color: #ebebeb;
  text-decoration: underline;
  }
  
  /* Begin Testing */
  /* End Testing */
  
  /*******************************
   *  Header/Navigation
   */
  
  /* hamburger menu */
  #menuToggle
  {
    display: block;
    position: relative;
    width: 200px;
    top: 57px;
    left: 25px;
    z-index: 1;
    
    -webkit-user-select: none;
    user-select: none;
  }
  
  #menuToggle a
  {
    text-decoration: none;
    color: #325976;
    
    transition: color 0.3s ease;
  }
  
  #menuToggle a:hover
  {
    color: #e67426;
  }
  
  
  #menuToggle input
  {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    
    cursor: pointer;
    
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    
    -webkit-touch-callout: none;
  }
  
  /*
   * Just a quick hamburger
   */
  #menuToggle span
  {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    
    background: #325976;
    border-radius: 3px;
    
    z-index: 1;
    
    transform-origin: 4px 0px;
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
  }
  
  #menuToggle span:first-child
  {
    transform-origin: 0% 0%;
  }
  
  #menuToggle span:nth-last-child(2)
  {
    transform-origin: 0% 100%;
  }
  
  /* 
   * Transform all the slices of hamburger
   * into a crossmark.
   */
  #menuToggle input:checked ~ span
  {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }
  
  /*
   * But let's hide the middle one.
   */
  #menuToggle input:checked ~ span:nth-last-child(3)
  {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  
  /*
   * Ohyeah and the last one should go the other direction
   */
  #menuToggle input:checked ~ span:nth-last-child(2)
  {
    transform: rotate(-45deg) translate(0, -1px);
  }
  
  /*
   * Make this absolute positioned
   * at the top left of the screen
   */
  #menu
  {
    position: absolute;
      width: 350px;
      right: 0;
      margin: -110px 320px 0px -50px;
      padding: 30px 30px 15px 130px;
      padding-top: 125px;
      background: #ededed;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
       /* to stop flickering of text in safari */
      transform-origin: 0% 0%;
      transform: translate(-125%, 0);
      transition: transform 0.7s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  
  #menu li
  {
    padding: 10px 0;
    font-size: 22px;
  }
  
  /*
   * And let's slide it in from the left
   */
  #menuToggle input:checked ~ ul
  {
    transform: none;
  }
  
  .nav-spacing {
    margin-top: 0;
    padding-top: 0;
  }
  
  .spacing {
     margin-top: -10px;
  }
  
  /*end hamburger styles*/
  
  
  .container, .container-fluid {
    padding: 0;
  }
  
  .no-bullet li {
    list-style-image: none;
  }
  
  .container-fluid.nav_header {
    background-color: var(--primary-blue-color);
    text-align: right;
  }
  
  #nav_header {
    padding: 20px 12px 24px 12px;
    background-color: var(--primary-blue-color);
    justify-content: space-evenly;
    text-align: center;_
  }
  
  #nav_header a {
    margin-right: 1.5em;
    /* font-size: 80%; */
    /* font-weight: bold; */
    color: white;
  }
  
  #nav_header a:last-child {
    margin-right: 0;
  }
  
  .container-fluid.header {
    /*min-height: 108px;*/
    background-color: #fff;
  }
  
  #branding_header {
    width: 200px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  
  a {
    color: #2d6e8d; 
  }
  
  a:hover {
    color: #17315a;
  }
  
  .logo_header {
    max-height: 80px;
  }
  
  .tagline {
    float: right;
    margin-top: -85px;
    padding-right: 20px;
    color: #325976;
    font-size: 200%;
  }
  
  .underline_tagline {
    font-weight: bold;
    color: var(--primary-blue-color);
    border-bottom: 4px solid #faa61c;
  }
  
  /*******************************
   *  General
   */
  img {
  
  border: 0px !important;
  outline: 0 !important;
  
  }
  
  .container-fluid.body {
    background-color: #ebebeb;
  }
  
  .bg_white {
    background-color: #fff;
    height: 350px;
  }
  
  .bg-feature {
    background-color: #fff;
    height: 430px;
  }
  
  .row {
    margin-right: 0;
    margin-left: 0;
  }
  
  .row.cards {
    margin-top: 20px;
  }
  
  .row.sub {
    margin-bottom: 20px;
  }
  
  .row.sub.sp {
    margin-bottom: 0px;
  }
  
  .video-sizing {
    height: 120px;	
  }
  
  .row.panel {
    margin-bottom: 20px;
    background-color: #fff;
  }
  
  .row.res-panel {
    margin-bottom: 20px;
    margin-top: 20px;
    background-color: #fff;
  }
  
  .row.panel .col-md-6 {
    padding: 12px 20px 20px 20px;
  }
  
  .divider_vert {
    border-right: 2px solid #d0d0d0;
  }
  
  .spacer {
    height: 15px;
  }
  
  .col-sm-4.fullbleed, 
  .col-sm-6.fullbleed, 
  .col-sm-8.fullbleed, 
  .col-sm-12.fullbleed,
  .col-md-4.fullbleed,
  .col-md-6.fullbleed, 
  .col-md-8.fullbleed {
    padding: 0;
  }
  
  .col-md-6.fullbleed:nth-child(odd) {
    padding-right: 4px;
  }
  
  .col-md-6.fullbleed:nth-child(even) {
    padding-left: 4px;
  }
  
  .familia-spacing.fullbleed:nth-child(odd) {
    padding-right: 4px;
  }
  
  .familia-spacing.fullbleed:nth-child(even) {
    padding-left: 4px;
  }
  
  .col-md-6.spaced:nth-child(even) {
    padding: 0 0 0 0px;
  }
  
  .title_subpage {
    padding: 14px 0 14px 20px;
    background: url("/assets/img/bg_colors_titles.png") repeat-y right center var(--primary-blue-color);
    color: #fff;
  }
  
  .plain-subpage {
    padding: 14px 0 14px 20px;
    background: url("/assets/img/bg_colors_titles.png") repeat-y right center var(--primary-blue-color);
    color: #fff;
  }
  
  .title-plain {
    margin: 0;
    font-size: 1.4rem;
    padding-top: 5px;
    padding-bottom: 10px;
    font-weight: bold !important;
  }
  
  .title_subpage h1 {
    margin: 0;
    font-size: 1.6rem;
    padding-top: 5px;
    font-weight: bold !important;
  }
  
  .title_panel.pdf {
    padding: 16px 0 16px 70px;
    background: url("/assets/img/icon_pdf_orange.png") left center no-repeat var(--primary-blue-color);
    background-size: 60px;
    color: #fff;
    font-weight: bold;
  }
  
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .center p {
    text-align: center;
  }
  
  li {
    list-style-image: url(/assets/img/bullet.svg);
  }
  
  .emphasis {
      font-weight: bold;
      color: #e67426;
  }
  
  .emphasis-b {
      font-weight: bold;
      color: #000;
  }
  
  
  /*******************************
  * 404 Error Webpage
  */
  
  .title_subpage.error1 .content {
    padding: 0px 0 10px 45px;
    background: url("../../../../../../assets/img/icon_404.svg");
    background-size: 30px;
    background-repeat: no-repeat;
    font-size: 120%;
  }
  
  .title_panel.error { 
    padding: 16px 16px 16px 195px;
    background: url("../../../../../../assets/img/404-img.png") left center no-repeat;
    background-size: 177px;
    min-height: 150px;
  }
  
  /*******************************
  * Impact Webpage
  */
  
  .title_subpage.impact .content {
    padding: 0px 0 10px 50px;
    background: url("/assets/img/icon-impact.svg");
    background-size: 40px;
    background-repeat: no-repeat;
    font-size: 120%;
  }
  
  /*******************************
  * Gameplan Webpage
  */
  
  .title_subpage.gameplan .content {
    padding: 0px 0 10px 50px;
    background: url("/assets/img/icon_gameplan.svg");
    background-size: 40px;
    background-repeat: no-repeat;
    font-size: 120%;
  }
  
  .intro-text {
    font-weight: bold;
    color: #325976;
    margin-top: 1rem;
  }
  
  /* MW Edit 2/2/21 */
  
  
  h2.gph2 {
    color: #fff;
    font-size: 100%;
    margin-bottom: 0px
  }
  
  .gph2-color {
    color: #fbaa19;
    font-weight: bold;
  }
  
  .title_panel.gp {
    padding: 10px 0 10px 90px;
    background: left center no-repeat var(--primary-blue-color);
    background-size: 60px;
    color: #fbaa19;
    font-size: 130%;
  
    /*font-weight: bold;*/
  }
  
  /* MW Edit 2/2/21 + KT edit 2/17/21*/
  
  .play-mobile {
      display: none;
  }
  
  .title_panel.play1 { 
    padding: 16px 16px 16px 175px;
    background: url("/assets/img/play1-yellow.png") left center no-repeat;
    background-size: 150px;
    min-height: 150px;
  }
  
  .title_panel.play2 {
    padding: 16px 16px 16px 175px;
    background: url("/assets/img/play2-orng.png") left center no-repeat;
    background-size: 150px;
    min-height: 150px;
  }
  
  .title_panel.play3 {
    padding: 16px 16px 16px 175px;
    background: url("/assets/img/play3-yellow.png") left center no-repeat;
    background-size: 150px;
    min-height: 150px;
  }
  
  .title_panel.play4 {
    padding: 16px 16px 16px 175px;
    background: url("/assets/img/play4-orng.png") left center no-repeat;
    background-size: 150px;
    min-height: 150px;
  }
  
  .title_panel.play5 {
    padding: 16px 16px 16px 175px;
    background: url("/assets/img/play5-yellow.png") left center no-repeat;
    background-size: 150px;
    min-height: 150px;
  }
  
  .title_panel.play6 {
    padding: 16px 16px 16px 175px;
    background: url("/assets/img/play6-orng.png") left center no-repeat;
    background-size: 150px;
    min-height: 150px;
  }
  
  .title_panel.play7 {
    padding: 16px 16px 16px 175px;
    background: url("/assets/img/play7-yellow.png") left center no-repeat;
    background-size: 150px;
    min-height: 150px;
  }
  
  
  /*******************************
   *  Home Webpage
   */
  
  #nav_services {
    margin-top: 0;
    background-color: #faa61c;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.3em;
    
      height: 100%;
      text-align: center;
  }
  
  #nav_services_title {
    float: left;
    padding: 1.15em 2em 1.3em 1em;
    line-height: 1.3;
    color: white;
    background-color: var(--primary-blue-color);
    background-image: url("/assets/img/dbl_chevron_rt.svg");
    background-repeat: no-repeat;
    background-size: 10%;
    background-position-x: 94%;
    background-position-y: 52%;
  }
  
  @media only screen and (min-width: 768px) {	
      
      
      #nav_services_title {
          height: 100%
      }
      #nav_services_title a {
          display: flex;
          align-items: center;
          height: 100%;
      }
  }
  
  
  
  #nav_services a {
    color: #333;
  }
  
  #nav_services a:hover {
    color: #222;
  }
  
  #nav_services ul {
    display: flex;
    /*justify-content: space-evenly;*/
    margin-bottom: -1rem;
    padding: 0;
    
    height: 100%;
  }
  
  #nav_services ul li {
    display: inline-block;
    margin-bottom: 4px;
    list-style: none;
    padding: .25em 1.2em;
    color: #333;
  }
  
  @media only screen and (max-width: 992px) {
      #nav_services ul li {
        display: inline-block;
        margin-bottom: 4px;
        list-style: none;
        padding: 0.25em 0;
        color: #333;
      }
  
  .bg_white {
  height: 460px;		
  }
      
  .CHschools-img {
  padding-left: 300px;
  background: url("/assets/img/CalHOPE-schools2.jpg");
  height: 114%;
  margin: 0;
  background-size: cover;
  background-position: center;
  }	
  
  }
  
  #hero_warmline_mobile {
    padding: 35px;
    background-color: var(--primary-blue-color);
    background-size: cover;
    width: 100%;
    color: #fff;
    display: none;
    line-height: 2rem;
    font-size: 1.3rem;
  }
  
  #hero_warmline {
    background: url("/assets/img/hero.jpg");
    background-size: cover;
    width: 100%;
    color: #333;
    font-size: 110%;
  }
#hero_calmap_mobile {
  padding: 35px;
  background-color: white;
  background-size: cover;
  width: 100%;
  color: black;
  display: none;
  line-height: 2rem;
  font-size: 1.3rem;
}

#hero_calmap {
  background: url("/assets/img/hero_calmap.jpg");
  background-size: cover;
  width: 100%;
  color: #333;
  font-size: 110%;
}

  .mobile h1,
  .mobile h2 {
     font-size: 1.5rem;
  }
  
  .orng-button1 a {
      border: none;
      background-color: #e67426;
      color: white;
      padding: 10px 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      float: left;
      margin: 15px 0px 0px 5px;
  }
  
  
  .orng-button2 a {
      border: none;
      background-color: #e67426;
      color: white;
      padding: 10px 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      margin: 15px 0px 0px 18px;
  }
  
  .orng-button3 a {
      border: none;
      background-color: #e67426;
      color: white;
      font-size: 1.2em;
      padding: 10px 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      float: left;
      margin: 5px 0px 0px 22%;
  }
  
  .angst-button a {
      border: none;
      background-color: #269037;
      color: white;
      padding: 10px 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      float: left;
      margin: 5px 0px 0px 42%;
  }
  
  .ATS-button a {
      border: none;
      background-color: white;
      color: #329c77;
      padding: 10px 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      float: left;
      margin: 5px 0px 0px 42%;
  }
  
  .descr-text {
      padding-top: 265px;
      padding-left: 45px;
  }
  
  .overlay_warmline {
    float: right;
    width: 50%;
    padding: 1em 3em;
    /* background-image: url("/assets/img/bg_tile_blue.png"); */
    background-repeat: repeat-x repeat-y;
    color: #fff;
    background-color:  rgba(var(--primary-blue-rgb-color), 0.8);
  }
  
  .overlay_warmline h1,
  .overlay_warmline h2 {
    line-height: 2rem;
    font-size: 1.5rem;
    padding: 10px;
  }
  
  .overlay_warmline-SP {
    float: right;
    width: 50%;
    padding: 1em 3em;
    /* background-image: url("/assets/img/bg_tile_blue.png"); */
    background-color:  rgba(var(--primary-blue-rgb-color), 0.8);
    background-repeat: repeat-x repeat-y;
    color: #fff;
  }
  
  .overlay_warmline-SP h1 {
    line-height: 1.9rem;
    font-size: 1.4rem;
    padding: 10px;
  }
  
  .card_resources_home {
    height: 200px;
    width: 100%;
    background: url("/assets/img/bg_tile_programs.jpg");
    background-size: cover;
  }
  
  .card_resources_home .content {
    height: 100%;
    width: 100%;
    padding-top: 100px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 180%;
  }
  
  .card_resources_home .content a {
    padding-top: 80px;
    background-image: url("/assets/img/icon_pluses.svg");
    background-repeat: no-repeat;
    background-position: 50% 24%;
    background-size: 60%;
  }
  
  .card_impact_home {
    height: 200px;
    width: 100%;
    background-color: #e67426;
    background-size: cover;
  }
  
  .card_impact_home .content {
    height: 100%;
    width: 100%;
    padding-top: 100px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 180%;
  }
  
  .card_impact_home .content a {
    padding-top: 60px;
    background-image: url("/assets/img/icon-impact.svg");
    background-repeat: no-repeat;
    background-position: 50% 0px;
    background-size: 75%;
  }
  
  .card_media_home {
    height: 200px;
    width: 100%;
    background: url("/assets/img/bg_tile_media.png");
    background-size: cover;
  }
  
  .card_media_home .content {
    height: 100%;
    width: 100%;
    padding-top: 100px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 180%;
  }
  
  .card_media_home .content a {
    padding-top: 80px;
    background-image: url("/assets/img/icon_video.svg");
    background-repeat: no-repeat;
    background-position: 50% 30%;
    background-size: 80%;
  }
  
  .card_resources_home .content a, .card_impact_home .content a, .card_media_home .content a {
    color: #fff;
    text-decoration: none;
  }
  
  .card_resources_home .content a:hover, .card_impact_home .content a:hover, .card_media_home .content a:hover {
    border-bottom: 4px solid #faa61c;
  }
  /*/////////////////////////////////////////////////////////////////////////*/
  
  .row.cards.spaced .col-sm-4 {
    padding: 0;
  }
  
  .row.cards.spaced .col-sm-4:first-child {
    padding: 0;
  }
  
  .row.cards.spaced .col-sm-4:last-child {
    padding: 0;
  }
  
  .row.cards .image_program a {
    width: 100%;
    text-decoration: none;
  }
  
  .row.cards .image_program_button1 {
    height: 200px;
    background: url("/assets/img/prog-button1.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.cards .image_program_button2 {
    height: 200px;
    background: url("/assets/img/place_tfw.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.cards .image_program_button3 {
    height: 200px;
    background: url("/assets/img/prog-button3.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .btn_cta_program {
    width: 100%;
    height: 60px;
    line-height: 1.1;
    padding-top: 20px;
    color: white;
    font-weight: bold;
    text-align: center;
    /* box-shadow: inset 0 0 0 100vw rgba(50, 89, 118, 0.8); */
    box-shadow: inset 0 0 0 100vw rgba(var(--primary-blue-rgb-color), 0.8);;
    -webkit-transition: box-shadow 250ms ease-in-out;
    -moz-transition: box-shadow 250ms ease-in-out;
    -ms-transition: box-shadow 250ms ease-in-out;
    -o-transition: box-shadow 250ms ease-in-out;
    transition: box-shadow 250ms ease-in-out;
  }
  
  .btn_cta_program:hover {
    box-shadow: inset 0 0 0 100vw var(--primary-blue-color); 
  }
  
  .col-sm-4 a { 
    width: 100%; 
    color: #fff;
  }
  
  h2.feature {
    text-align: center;
    background-color: #fff;
    padding: 20px 20px 0px 20px;
    color: #e67426;
    font-weight: bold;
    font-size: 1.3rem;
  }
  
  .card-feature-detail {
    align-items: center;
    background-color: #fff;
    padding: 0px 40px 0px 40px;
  }
  
  .hero-img-mobile {
    width: 100%;
    height: 340px;
    background: url("/assets/img/hero-mobile.jpg");
    background-size: cover;
    background-position-x: center;
    background-repeat: no-repeat;
  }
  
  .calhope-connect-img {
    width: auto;
    height: 100%;
  
    background: url("/assets/img/connect-chat.jpg");
    background-size: cover;
    background-position-x: center;
    background-repeat: no-repeat;
  }
  
  
  
  .familia {
    padding: 20px;
    width: auto;
    height: 672px;
    background: url("/assets/img/familia.jpg");
    background-size: cover;
    background-position-x: center;
    background-repeat: no-repeat;
  }
  
  
  .angst-logo {
    padding: 20px;
    width: auto;
    height: 100%;
    background: url("/assets/img/Angst-logo.png");
    background-size: cover;
  
    background-position-x: center;
    background-repeat: no-repeat;
  }
  
  .angst-vid {
  width: 100%; 
  height: 298px;
  background: url("/assets/img/angst-vid.jpg");
  background-size: cover;
  background-position: center;
  }
  
  .ATS-img {
  padding: 20px;
  height: 100%;
  margin: 0;
  background: url("/assets/img/ATS.jpg");
  background-size: cover;
  background-position: center;
  }
  
  .concert-img {
    width: auto;
    height: 340px;
    background: url("/assets/img/CalHOPE-concerts.png");
    background-size: cover;
    background-position-x: center;
    background-repeat: no-repeat;
  }
  
  .card_optional_image {
    width: 100%;
    height: 240px;
    background: url("/assets/img/bg_card_optional.png");
    background-size: cover;
    background-position-x: center;
    background-repeat: no-repeat;
  }
  
  .card_optional_text {
    display: flex;
    align-items: center;
    height: 100%;
    background-color: #fff;
  
    padding: 20px;
    color: #325976;
    font-weight: bold;
    font-size: 120%;
  }
  
  .card_ca_all {
    display: block;
    margin-bottom: 20px;
    width: 100%;
    height: 182px;
    padding-top: 10px;
    background-color: #faa61c;
    text-align: center;
    color: black !important;
    font-weight: bold;
  }
  
  .ca_all-link a {
    color: #325976;
  }
  
  .card_ca_all img {
    margin-bottom: 12px;
    margin-bottom: 7px;
    height: 100px;
  }
  
  .list_resources_home ul {
    margin-left: -36px;
  }
  
  .lineas {
      padding-left: 10px;
      padding-right: 40px;
      height: fit-content;
      margin-bottom: 25px;
  }
  
  .list_resources_home li {
    margin-bottom: 4px;
    background-color: #fff;
    list-style: none;
  
    -webkit-transition: background-color 250ms ease-in-out;
    -moz-transition: background-color 250ms ease-in-out;
    -ms-transition: background-color 250ms ease-in-out;
    -o-transition: background-color 250ms ease-in-out;
    transition: background-color 250ms ease-in-out;
  }
  
  .list_resources_home li:last-child {
    margin-bottom: 0;
  }
  
  .list_resources_home li a {
    display: block;
    width: 100%;
    padding: 17px 60px 17px 24px;
    background-image: url("/assets/img/icon_chevron_dbl_rt_orange.png");
    background-repeat: no-repeat;
    background-position: right center;
    color: #325976;
    font-weight: bold;
  
    -webkit-transition: background-image 250ms ease-in-out;
    -moz-transition: background-image 250ms ease-in-out;
    -ms-transition: background-image 250ms ease-in-out;
    -o-transition: background-image 250ms ease-in-out;
    transition: background-image 250ms ease-in-out;
  }
  
  .list_resources_home li:hover {
    background-color: #f8f8f8;
  }
  
  .list_resources_home li a:hover {
    background-image: url("/assets/img/icon_chevron_dbl_rt_orange_h.png");
  }
  
  /*****************************************
   *  Typical Single and Double Column Webpages
   */
  
  .text_content {
     margin: 10px 0 10px 0;
     padding: 20px;
     background-color: #fff;
  }
  
  .bumper-top {
      margin-top: 20px;
  }
  
  .bumper-middle {
      margin-top: 0;
      margin-bottom: 0;
  }
  
  .bumper-bottom {
      margin-bottom: 20px;
  }
  
  h2.general {
      font-size: 1.2em;
      font-weight: bold;
      color: var(--primary-teal-color); 
  }
  
  
  /* Double */
  
  
  .col-md-8.text_content {
    border-right: 5px solid #ebebeb;
  }
  
  .col-md-4.text_content {
    border-left: 5px solid #ebebeb;
  }
  
  /******************************
   *  Videos Webpage
   */
  
   .title_subpage.video .content {
    padding: 0px 0 10px 50px;
    background: url("/assets/img/icon_video.svg");
    background-size: 40px;
    background-repeat: no-repeat;
    font-size: 120%;
  }
  
  .col-sm-8.text_video {
    padding: 16px;
    background-color: #fff;
    font-weight: bold;
    color: #325976;
  }
  
  .col-sm-8.text_video a {
    color: #325976;
  }
  
  .row.sub .image_video a {
    width: 100%;
    text-decoration: none;
  }
  
  .row.sub .image_video {
    background: url("/assets/img/placeholder_video.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video001 {
  
    background: url("/assets/img/aguilar-prev.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video002 {
    background: url("/assets/img/ton-prev.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video003 {
    background: url("/assets/img/osg-prev.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video004 {
    background: url("/assets/img/49-prev.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video005 {
    background: url("/assets/img/calhi-prev.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video006 {
    background: url("/assets/img/calhi-prev.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video007 {
    background: url("/assets/img/calhope-prev.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video008 {
    background: url("/assets/img/la-prev.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video009 {
    background: url("/assets/img/erin.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video010 {
    background: url("/assets/img/becky.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video011 {
    background: url("/assets/img/stress-busting-prev.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video012 {
    background: url("/assets/img/lolita.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video013 {
    background: url("/assets/img/angst-telemundo.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video014 {
    background: url("/assets/img/dean.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video015 {
    background: url("/assets/img/springfield.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video016 {
    background: url("/assets/img/arrows.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video017 {
    background: url("/assets/img/danny.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video018 {
    background: url("/assets/img/carson.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video019 {
    background: url("/assets/img/kim.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video020 {
    background: url("/assets/img/glazer.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video021 {
    background: url("/assets/img/darkiel.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video022 {
    background: url("/assets/img/lovato.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video023 {
    background: url("/assets/img/barnes.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video024 {
    background: url("/assets/img/leilani.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video025 {
    background: url("/assets/img/atlas.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video026 {
    background: url("/assets/img/athletes.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video027 {
    background: url("/assets/img/louie.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video028 {
    background: url("/assets/img/shaair.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video029 {
    background: url("/assets/img/brink.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video030 {
    background: url("/assets/img/vivas.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video031 {
    background: url("/assets/img/grouplove.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video032 {
    background: url("/assets/img/lott.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video033 {
    background: url("/assets/img/trainor.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  .row.sub .image_video034 {
    background: url("/assets/img/brown.png") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
  }
  
  
  .btn_cta_video {
    box-shadow: inset 0 0 0 100vw rgba(0,0,0,0.6);
    width: 100%;
    padding: 4px 4px 4px 8px;
    color: white;
    font-weight: bold;
  
  -webkit-transition: box-shadow 250ms ease-in-out;
  -moz-transition: box-shadow 250ms ease-in-out;
  -ms-transition: box-shadow 250ms ease-in-out;
  -o-transition: box-shadow 250ms ease-in-out;
  transition: box-shadow 250ms ease-in-out;
  }
  
  .btn_cta_video:hover {
  box-shadow: inset 0 0 0 100vw rgba(0,0,0,0.9); 
  }
  
  /******************************
   *  Partners Webpage
   */
  
  ul.list_partner {
    margin-left: -40px;
  }
  
  .list_partner li div.text { 
    padding-left: 80px;
  }
  
  
  
  .list_partner li {
    display: inline-block;
    width: 100%;
    margin-bottom: 4px;
    background-color: #fff;
    list-style: none;
  
    -webkit-transition: background-color 250ms ease-in-out;
    -moz-transition: background-color 250ms ease-in-out;
    -ms-transition: background-color 250ms ease-in-out;
    -o-transition: background-color 250ms ease-in-out;
    transition: background-color 250ms ease-in-out;
  }
  
  .list_partner li.pdf {
    background: url("/assets/img/icon_pdf_orange.png") #fff;
    background-position: 0px;
    background-repeat: no-repeat;
  }
  
  .list_partner li.www {
    background: url("/assets/img/partner-logo-sa-kings.jpg") #fff;
    background-position: 0px;
    background-repeat: no-repeat;
  }
  
  
  .list_partner li a.orange { 
    padding-left: 80px;
    background-image: url("/assets/img/icon_chevron_dbl_rt_orange.png");
  }
  
  .list_partner li a.yellow { 
    padding-left: 150px;
    background-image: url("/assets/img/icon_chevron_dbl_rt_yellow.png"); 
  }
  
  .list_partner li a {
    display: block;
    width: 100%;
    padding: 17px 60px 17px 24px;
    background-repeat: no-repeat;
    background-position: right center;
    color: #325976;

  
    -webkit-transition: background-image 250ms ease-in-out;
    -moz-transition: background-image 250ms ease-in-out;
    -ms-transition: background-image 250ms ease-in-out;
    -o-transition: background-image 250ms ease-in-out;
    transition: background-image 250ms ease-in-out;
  }
  
  .list_partner li:hover {
    background-color: #f8f8f8;
  }
  
  .list_partner li a.orange:hover {
    background-image: url("/assets/img/icon_chevron_dbl_rt_orange_h.png");
  }
  
  .list_partner li a.yellow:hover {
    background-image: url("/assets/img/icon_chevron_dbl_rt_yellow_h.png");
  }
  
  
  
  
  
  
  /******************************
   *  Resources Webpage
   */
  
  
  .res-img {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 80px;
    text-align: right;
  }
  
  
  .res-h2 {
    font-size: 1.4rem;
    color: white;
    font-weight: bold;
    display: inline-block;
  }
  
  .res-h2-mobile {
    font-size: 1.4rem;
    color: #325976;
    font-weight: medium;
    text-align: center;
    display: none;
    
  }
  
  .resources-img1 {
    height: auto;
    width: 100%;
    background: url("/assets/img/crisis-counseling.jpg");
    background-size: cover;
    margin-bottom: 5px;
  }
  
  .resources-img2 {
    height: auto;
    width: 100%;
    background: url("/assets/img/state-resources.jpg");
    background-size: cover;
    margin-bottom: 5px;
  }
  
  .resources-img3 {
    height: auto;
    width: 100%;
    background: url("/assets/img/mental-health.jpg");
    background-size: cover;
    margin-bottom: 5px;
  }
  
  .resources-img4 {
    height: auto;
    width: 100%;
    background: url("/assets/img/veterans.jpg");
    background-size: cover;
    margin-bottom: 5px;
  }
  
  .resources-img5 {
    height: auto;
    width: 100%;
    background: url("/assets/img/substance-abuse.jpg");
    background-size: cover;
    margin-bottom: 5px;
  }
  
  .resources-img6 {
    height: auto;
    width: 100%;
    background: url("/assets/img/youth.jpg");
    background-size: cover;
    margin-bottom: 5px;
  }
  
  .resources-img7 {
    height: auto;
    width: 100%;
    background: url("/assets/img/housing.jpg");
    background-size: cover;
    margin-bottom: 5px;
  }
  
  .title_subpage.resources .content {
    padding: 0px 0 10px 50px;
    background: url("/assets/img/icon_pluses.svg");
    background-size: 40px;
    background-repeat: no-repeat;
    font-size: 120%;
  }
  
  .resources {
      margin-bottom: 10px;
  }
  
  h2.title {
    margin-bottom: 8px;
    font-size: 120%;
    color: #555;
  }
  
  ul.list_resources {
    margin-left: -40px;
    margin-bottom: 0;
  }
  
  .list_resources li {
    display: inline-block;
    width: 100%;
    margin-bottom: 4px;
    background-color: #fff;
    list-style: none;
  
    -webkit-transition: background-color 250ms ease-in-out;
    -moz-transition: background-color 250ms ease-in-out;
    -ms-transition: background-color 250ms ease-in-out;
    -o-transition: background-color 250ms ease-in-out;
    transition: background-color 250ms ease-in-out;
  }
  
  .list_resources li.pdf {
    background: url("/assets/img/icon_pdf_orange.png") #fff;
    background-position: 0px;
    background-repeat: no-repeat;
  }
  
  .list_resources li.www {
    background: url("/assets/img/yellow-bar.png") #fff;
    background-position: 0px;
    background-repeat: no-repeat;
  }
  
  
  .list_resources li a.orange { 
    padding-left: 40px;
    background-image: url("/assets/img/icon_chevron_dbl_rt_orange.png");
  }
  
  .list_resources li a.yellow { 
    padding-left: 40px;
    background-image: url("/assets/img/icon_chevron_dbl_rt_yellow.png"); 
  }
  
  .list_resources li a {
    display: block;
    width: 100%;
    padding: 17px 60px 17px 24px;
    background-repeat: no-repeat;
    background-position: right center;
    color: #325976;
    font-weight: bold;
  
    -webkit-transition: background-image 250ms ease-in-out;
    -moz-transition: background-image 250ms ease-in-out;
    -ms-transition: background-image 250ms ease-in-out;
    -o-transition: background-image 250ms ease-in-out;
    transition: background-image 250ms ease-in-out;
  }
  
  .list_resources li:hover {
    background-color: #f8f8f8;
  }
  
  .list_resources li a.orange:hover {
    background-image: url("/assets/img/icon_chevron_dbl_rt_orange_h.png");
  }
  
  .list_resources li a.yellow:hover {
    background-image: url("/assets/img/icon_chevron_dbl_rt_yellow_h.png");
  }
  
  /******************************
   *  Footer
   */
  
  .container-fluid.footer {
    background-color: #fff;
    min-height: 100px;
  }
  
  .container-fluid.footer .row {
    margin-top: 0px;
    margin-bottom: 10px;
    background-color: var(--primary-blue-color);
    color: #fff;
  
    min-height: 180px;
  }
  
  .container-fluid.footer .row h4 {
    font-size: 100%;
  }
  
  
  .container-fluid.footer .row ul {
    margin-left: -40px;
  }
  
  
  
  .container-fluid.footer .row li {
    list-style: none;
  }
  
  .container-fluid.footer .row a {
    color: #fff;
  }
  
  .container-fluid.footer .col-md-4 {
    margin: 20px 0 20px 0;
    padding-left: 30px;
    border-right: 2px solid #8e98ac;
  }
  
  .container-fluid.footer .col-md-4.no_divider {
    border-right: none;
  }
  
  .text-center {
      text-align: center;
  }
  
  .content-center {
      vertical-align: middle;
      align-content: center;
      align-items: center;
  }
  
  /******************************
   * Media Queries
   * 
   * Standard Bootrap 4 breakpoints
   *
   */
  
  
  @media only screen and (min-width: 201px) {		
  
      
  #nav_services_title {
    padding: .25em 2em .5em 1em;
    background-position-y: 50%;
  }	
      
  .text_video {
  min-height: 50px;		
  }
      
  .nav-spacing {
      visibility: visible;
      }
          
  .btn_cta_program {
      padding-bottom: 0px;
  }		
      
  .res-h2 {
      display: none;
    }
      
  .res-h2-mobile {
      display: inline-block;
    }
          
  .resources-img1 {
      width: 100%;
      height: 140px;
      overflow: hidden;
      }
  
      
  .resources-img2 {
      height: 140px;
      overflow: hidden;
      }
      
  .resources-img3 {
      height: 140px;
      overflow: hidden;
      }
      
  .resources-img4 {
      height: 140px;
      overflow: hidden;
      }
      
  .resources-img5 {
      height: 140px;
      overflow: hidden;
      }
      
  .resources-img6 {
      height: 140px;
      overflow: hidden;
      }
      
  .resources-img7 {
      height: 140px;
      overflow: hidden;
      }
      
  }
  
  @media only screen and (min-width: 426px) {
      
  #menu {
  margin: -108px -27px 0px 0px;
  }
  }
  
  @media only screen and (min-width: 576px) {
      
  .text_video {
  min-height: 120px;		
  }	
      
  .btn_cta_program {
      padding-bottom: 50px;
  }	
      
  .res-h2 {
      display: inline-block;
    }
      
  .res-h2-mobile {
      display: none;
    }
  
  .resources-img1 {
      width: 100%;
      height: auto;
      }
      
  .resources-img2 {
      width: 100%;
      height: auto;
      }
      
  .resources-img3 {
      width: 100%;
      height: auto;
      }
      
  .resources-img4 {
  
      width: 100%;
      height: auto;
      }
      
  .resources-img5 {
      width: 100%;
      height: auto;
      }
      
  .resources-img6 {
      width: 100%;
      height: auto;
      }
      
  .resources-img7 {
      width: 100%;
      height: auto;
      }
      
  }
  .resources-mobile{
      display: block;
  }
  .resources-desktop{
      display: none;
  }
  
  
  @media only screen and (min-width: 768px) {
  
  .resources-desktop{
      display: block;
  }
  .resources-mobile{
      display: none;
  }
  
      
  .familia-spacing {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;		
  }	
      
  .angst-vid {
  height: 273px;
  }	
      
   #nav_services_title {
    padding: 1.17em 2em 1.3em 1em;
    background-position-y: 52%;
  }	
      
  .nav-spacing {
      visibility: hidden;
      }
      
  .btn_cta_program {
      padding-bottom: 0px;
  }	
      
  .hero-img-mobile {	
      display: none;
    }
      
  .concert-img {
  display: none;
  }	
      
  .res-h2 {
      display: none;
    }
      
  .res-h2-mobile {
      display: inline-block;
    }
          
  .resources-img1 {
      width: 100%;
      height: 140px;
      overflow: hidden;
      }
      
  .resources-img2 {
      height: 140px;
      overflow: hidden;
      }
  
  
      
  .resources-img3 {
      height: 140px;
      overflow: hidden;
      }
      
  .resources-img4 {
      height: 140px;
      overflow: hidden;
      }
      
  .resources-img5 {
      height: 140px;
      overflow: hidden;
      }
      
  .resources-img6 {
      height: 140px;
      overflow: hidden;
      }
      
  .resources-img7 {
      height: 140px;
      overflow: hidden;
      }
      
  }
  
  @media only screen and (min-width: 992px) {  		
  
  .CHschools-img {
  padding-left: 485px;
  height: 108%;
  margin: 0;
  background: url("/assets/img/CalHOPE-schools.jpg");
  background-size: cover;
  background-position: center;
  }
  
      
  h2.feature {
   padding: 20px 20px 0px 20px;
  }
      
  .angst-vid {
  height: 298px;
  }	
      
  .res-img {
    padding-right: 50px;
  }	
  
  .res-h2 {
  display: inline-block;
  }
      
  .res-h2-mobile {
      display: none;
    }
  
  .resources-img1 {
      width: 100%;
      height: auto;
      }
      
  .resources-img2 {
      width: 100%;
      height: auto;
      }
      
  .resources-img3 {
      width: 100%;
      height: auto;
      }
      
  .resources-img4 {
      width: 100%;
      height: auto;
      }
      
  .resources-img5 {
      width: 100%;
      height: auto;
      }
      
  .resources-img6 {
      width: 100%;
      height: auto;
      }
      
  .resources-img7 {
      width: 100%;
      height: auto;
      }
      
  }
  
  @media only screen and (min-width: 1200px) { 
  
   #nav_services_title {
    padding: .25em 2em .5em 1em;
    background-position-y: 50%;
  }	
      
  .res-img {
   padding-right: 80px;
  }
      
  .CHschools-img {
  padding-left: 585px;
  }
      
  h2.feature {
   padding: 30px 20px 0px 20px;
  }
      
  }
  
  @media only screen and (max-width: 1199.98px) { 
      
  .angst-button a {
      margin: -9px 0px 0px 42%;
  }
  
  .ATS-button a {
      margin: 15px 0px 0px 42%;
  }	
      
  .descr-text {
      padding-top: 255px;
      padding-left: 30px;
  }
      
  .familia {
  height: 812px;
  }
      
  .angst-button1 a {
  margin: 240px 0px 0px 37%;
  }
      
  .angst-button2 a {
  margin: 240px 0px 0px 10px;
  }
    
  .tile_warmline, .tile_srp {
      height: 364px;
    }
      
  .orng-button1 a {
     float: none;
     display: block;
  }
  
  .orng-button2 a {
     float: none;
     display: block;
     margin: 15px 0px 0px 4px;
  }
      
  .orng-button3 a {
     float: none;
     display: block;
     margin: 15px 0px 0px 4px;
  }
      
  #nav_services {
    margin-top: 0;
    padding: 0.25em 1.5em 1.13em 1em;	
  
  }
  
  
  }
  
  @media only screen and (max-width: 991.98px) { 
  
  .angst-button a {
      margin: -10px 0px 0px 35%;
  }
  
  .ATS-button a {
      margin: -10px 0px 0px 35%;
  }	
      
  .descr-text {
      padding-top: 255px;
      padding-bottom: 15px;
      padding-left: 30px;
  }
      
  .bg-feature {
  height: 465px;	
  }
      
  .familia-spacing {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 100%;
  max-width: 100%;		
  }
  
  .familia {
  width: auto;
  height: 100%;
  }	
      
  .angst-button1 a {
  margin: 240px 0px 0px 33%;
  }
      
  .angst-button2 a {
  margin: 240px 0px 0px 10px;
  }	
      
  .overlay_warmline {
     width: 100%;
  }
      
  .overlay_warmline-SP {
     width: 100%;
  }
  
    #nav_services {
    margin-top: 0;
    padding: 0.25em 1.5em 1.13em 1em;	
    }
  
  
    #nav_services ul {
      text-align: center;
    }
  
  
  }
  
  @media only screen and (max-width: 767.98px) { 	
      
  .bg_white {
  height: 335px;		
  }
      
  .CHschools-img {
      width: 100%;
      height: 341px;
      padding-left: 0;
      background: url(/assets/img/CalHOPE-schools.jpg);
      background-size: cover;
      background-position-x: center;
      background-repeat: no-repeat;
      border: none !important;
  }
      
  .bg-feature {
  height: 420px;
  }
      
  .angst-button1 a {
  margin: 240px 0px 0px 40%;
  }
      
  .angst-button2 a {
  margin: 240px 0px 0px 10px;
  }
      
  .logo_header {
    max-height: 70px;
    max-width: 200px;
    padding-right: 10px;
  
  }
  
  .spacing {
    margin-top: -35px;
    max-width: 400px;
  }	
      
   #nav_header {
      display: none;
    }	
      
   #branding_header {
    float: right;
    margin-bottom: 0px;
    }
      
   .tagline {
      display: none;
    }	
      
  .calhope-connect-img {
  display: none;
  }	
  
  .error { 
    display: none;
  }	
      
  .title_panel.gp {
    padding-left: 16px;
    padding-right: 16px;
  }	
      
  
  .play1 {
      display: none;	
    }
      
  .play2 {
      display: none;	
    }
      
  .play3 {
      display: none;	
    }
  
  .play4 {
      display: none;	
    }
      
  .play5 {
      display: none;	
    }
      
  .play6 {
      display: none;	
    }
      
  .play7 {
      display: none;	
    }
      
      
  .play-mobile {
    display: inline-block;
    padding: 16px 16px 16px 16px;
  }
  
    .col-md-6.fullbleed:nth-child(odd) {
      padding-right: 0;
    }
    
    .col-md-6.fullbleed:nth-child(even) {
      padding-left: 0;
    }
      
   .familia-spacing.fullbleed:nth-child(odd) {
      padding-right: 0;
    }
    
    .familia-spacing.fullbleed:nth-child(even) {
      padding-left: 0;
    }
    
    #nav_services_title {
      float: none;
      background-image: none;
      text-align: center;
    }
  
    #nav_services ul {
      flex-direction: column;
    }
  
    #nav_services ul li {
      border-bottom: 1px solid #c88516;
    }
  
    #nav_services ul li:last-child {
      border-bottom: none;
    }
  
    #hero_warmline {
      display: none;
    }
  
    #hero_warmline_mobile {
      display: block;
    }
  
    .card_ca_all {
      height: 206px;
    }
  
    .row.panel .col-md-6 {
      padding: 0px 20px 0px 20px;
      border: none;
    }
  }
  
  @media only screen and (max-width: 575.98px) {  
  
  .card-feature-detail {
    align-items: center;
    background-color: #fff;
    padding: 0px 60px 25px 60px;
  }	
      
  .bg-feature {
  height: 435px;
  }	
      
  .angst-button a {
      margin: -10px 0px 0px 38%;
  }
  
  .ATS-button a {
      margin: -10px 0px 0px 38%;
  }
      
  /*#menu {
   margin: -110px 265px 0px -50px;
  }*/	
      
  .video-sizing {
   height: 240px;	
  }
      
  .card_ca_all {
    height: 180px !important;
    margin-bottom: 0;
  }
  
  .card_resources_home .content, .card_impact_home .content, .card_media_home .content {
     padding-top: 120px;
  }
  
  }
  
  @media only screen and (max-width: 479.98px) {  
  
  .bg_white {
      height: 325px;
      }
      
  .CH-schools {
  margin-bottom: 5%;		
  }
  
  .CHschools-img {
  height: 240px;
  }
      
  h2.feature {
  margin-top: -70px;	
  padding: 0px 20px 0px 20px ;
  }
      
  }
  
  
  @media only screen and (max-width: 424.98px) {  
  
  .CHschools-img {
  height: 255px;
  }
      
  .CH-schools {
  margin-bottom: 5%;		
  }
      
  .card-feature-detail {
    align-items: center;
    background-color: #fff;
    padding: 0px 22px 25px 22px;
  }
      
  .angst-button2 a {
  margin: 240px 0px 0px 10px;
  }	
      
  #menu
  {
      margin: -110px -100px 0 0;
  }
      
  }
  
  @media only screen and (max-width: 324.98px) {  
  
  .CH-schools {
  margin-bottom: 10%;		
  }
      
  }
  
  .CH-schools{
      background: white;
      padding-bottom: 20px;
  }
  .CH-schools .fullbleed{ 
      background: white;
  }
  .add-space-button {
      margin-bottom: 20px;
  }
  
  
  /* launch-info-sectio */
  .launch-info-section{
      padding-top: 30px !important;	
  }
  
  .launch-info-section,
  .resource-section{
      background: var(--primary-blue-color);
      padding: 15px;	
  }
  .launch-info-section{
      color: white;	
  }
  
  .launch-info-section .info-part {
      padding-left: 20px;
  }
  
  .launch-info-section .launching-date {
      font-size:1.3em;
      font-weight:bold;
      position: relative;
      margin-left: 30px;
      margin-bottom:15px;
  }
  .launch-info-section p {
      font-size:1.3em;
      }
  
  .launch-info-section .launching-date::before {
      content: "";
      background-image: url('/assets/img/bullet.svg');
      background-size: contain;
      background-repeat: no-repeat;
      width: 20px; /* Adjust the width and height based on your SVG size */
      height: 20px;
      position: absolute;
      left: -30px;
      top: 50%;
      transform: translateY(-50%);
  }
  
  .launch-info-section .hero-gfx {
      background: url(/assets/img/girlswithsoccer.jpg);
      background-size: cover;
      background-position: center;
      height:100%
  }
  .resource-section .card{
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      min-width: 0;
      word-wrap: break-word;
  }
  
  .resource-section .card .info-part{
      text-align:center;
      max-width:250px;
  }
  
  .resource-section .card .logo>img {
      height:95px;
  }
  
  .cta-button{
      width: 95%;
      margin:15px;
  }
  
  .cta-button a {
      border: none;
      background-color: #e67426;
      color: white;
      padding: 10px 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      float: left;
      width: 100%;
      font-size: 1.2em;
  }
  .hero-gfx img {
      display:none;
  }
  
  /* Override styles for small screens */
  @media (max-width: 575.98px) {
      .hero-gfx img {
      display:block;
          width: 100%;
      }
  }
  @media (max-width: 767px) {
      .header>.header{
          overflow: hidden;
      }
      .hero-gfx img {
          display:block;
          width: 100%;
      }
  
      .resource-section .col-sm-6,
      .launch-info-section .col-sm-6 {
          flex: none;
          max-width: 100%;
      }
  }
.flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
}

  /* CalHOPE school page */
  .calhope-school .overlay_warmline-SP{
    width: 100%;
    text-align: center;
    padding: 50px 0;
  }

  .calhope-school .CH-schools-youth-inspire .overlay_warmline-SP{
    min-height: 450px;
    height: 100%;
  }
  .calhope-school .CH-schools-youth-inspire .img-container img{
    max-width: 450px;
    width: 100%;
  }

  .calhope-school .overlay_warmline-SP > *{
    margin: 0 auto;
    max-width: 500px;
  }

  .calhope-school .cta-btns{
        padding: 20px 0 0;
  }

  .calhope-school .cta-btns .btn{
        max-width: 320px;
        width: 100%;
  }

 .calhope-school #hero_warmline {
    background: url(/assets/img/calhope-school-herobg.jpg);
    background-size: cover;
    width: 100%;
    color: #333;
    font-size: 110%;
  }
  .calhope-school .hero-img-mobile {
    width: 100%;
    height: 340px;
    background: url(/assets/img/calhope-school-herobg.jpg);
    background-position-x: -160px;
  }

  .calhope-school #hero_warmline_mobile .cta-btns {
    padding: 0;
  }

  .calhope-school .img-container {
      overflow: hidden;
  }

  .calhope-school .content-container {
      padding: 20px 0 50px;
  }

  .calhope-school .CH-schools {
      padding-bottom: 0;
  }

  .calhope-school .CHschools-img {
        padding-left: 485px;
        margin: 0;
        background: url(/assets/img/calhope-school-animated-shorts.jpg);
        background-size: cover;
        background-position: center;
  }

  .calhope-school h2.feature {
    text-align: center;
    background-color: #fff;
    padding: 20px 20px 0px 20px;
    color: #e67426;
    font-weight: bold;
    font-size: 1.3rem;
  }


      .calhope-school .CH-trusted-space .v-mobile {
          display:none;
    }
  @media only screen and (max-width: 767.98px) {
      .calhope-school .CH-trusted-space .v-mobile {
          display:block
    }
        .calhope-school .CH-trusted-space .v-desk {
          display:none
    }
  }


    .calhope-school .CH-trusted-space .CHschools-img {
        min-height: 530px;
  }

    .calhope-school .CH-trusted-space .CHschools-img {
        padding-left: 485px;
        height: 100%;
        margin: 0;
        background: url(/assets/img/calhope-shcool-ATS-MtM-photo-grid-cover.jpg);
        background-size: cover;
        background-position: center;
        background-position-x: 100%;
  }


.calhope-school .CH-schools-stories-of-hope .img-container {
    background-image: url('/assets/img/calhope-school-storiesofhope.jpg');
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 

    min-height: 250px; 

    display: flex;
    justify-content: center; 
    align-items: center;
}

.calhope-school .CH-schools-stories-of-hope .img-container img {
    max-width: 100%;
    height: auto;
    display: block;
}


  .calhope-school .CH-schools-youth-inspire.bg-white
  {
      margin-bottom: 20px;
  }
  .calhope-school .CH-schools-youth-inspire h2.feature{
    text-align: left;
    background: none;
    padding: 20px 20px 20px 40px;
    color: white;
    font-weight: bold;
    font-size: 1.3rem;
  }

   .calhope-school .CH-schools-youth-inspire .CHschools-img{
      background: url(/assets/img/calhope-hopejustice-logo.jpg);
      background-size: 80%;
      background-repeat: no-repeat;
      background-position: center;
  }

  .calhope-school .CH-schools-youth-inspire .img-container{
    display: flex; 
    justify-content: center; 
    align-items: center;
  }

  .calhope-school .CH-schools-youth-inspire .img-container img{
    /* padding: 60px 0; */
  }

.calhope-school .CH-schools-youth-inspire .card-feature-detail {
    background: none;
    text-align: left;
}

.calhope-school .CH-schools-youth-inspire #hero_warmline {
    background: url(/assets/img/calhope-school-girl.jpg);
    background-size: cover;
    background-position-x: 80%;
}


.calhope-school h2.general {
    padding: 20px 40px 5px;
}
.calhope-school h6.general {
    padding: 0 40px 5px;
    margin-top: -10px;
}


.calhope-school .card-feature-detail {
    padding: 0px 40px 0px 40px !important;
}