body {font-family: 'Roboto';font-size: 1em;margin: 0%;}
h3 {font-family:'Oswald';text-transform: uppercase;font-weight: 700;font-size: 1.5em;}
h2 {font-family:'Oswald';text-transform: uppercase;font-weight: 700;font-size: 2em;line-height: 1.25em;}
.section-header {color: #919191;text-align:center;margin-bottom: 20px;font-weight: 500;}

.wrapper {
    margin: 0px;
  }
  
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
  }
  
.hero-column {
    display: flex;
    flex-direction: column;
    flex-basis: 0%;
    flex: 1;
  }

.spotlight-column {
    display: flex;
    flex-direction: column;
    flex-basis: 0%;
    flex: 1;
  }

.spotlight-column:nth-of-type(even){
    flex: 2;
  }

.hero-column:nth-of-type(even){
    flex: 2;
  }
  
.tagline-column {
    background-color: white;
    height: 480px;
    align-self: center;
  }
  
.photo-column {
    background-image: url(images/hero-photo.jpg);
    background-size: cover;
    background-position: center;
    height: 480px;
    flex:2;
    background-size: cover;background-position: center;animation: slide-in-right  1.5s ease-out;z-index: 10;
  }
  .photo-hero {
    background-image: url(images/hero-photo.jpg);
    background-size: cover;
    background-position: center;
    height: 380px;
    background-size: cover;background-position: center;animation: fadeIn  1.5s ease-out;z-index: 10;
  }


  
.tagline {text-align: left;padding:2rem;animation: fadeIn 2s ease-out;line-height: 1.25em;align-self: center;}
.hero-photo-overlay-480 {content: url(images/hero-photo-overlay.svg);height: 480px;z-index: 20;}
.hero-photo-overlay-380 {content: url(images/hero-photo-overlay-mobile.svg);height: 380px;z-index: 20;}
.blue-diagonal-480 {float: right;height: 480px;z-index: 50;position: relative;}
.blue-diagonal-380 {float: right;height: 380px;z-index: 50;position: relative;}
.logo-mark {float: left;max-height: 80px;opacity: .6;padding-left: 20px;margin-top: 10px;}

.spotlight-wrapper {
    display:flex;
    margin: auto;
    justify-content: center;
    width: 100%;
  }
 
  .single-spotlight {
    width: calc(100% / 3);
    padding: 2rem;
    text-align: center;
  }

 
.cta-btn-orange {
      background-color: #ff5522;
      color: #fff;
      font-weight: 700;
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      text-align: center;
                  }
.cta-btn-orange-large {
      background-color: #ff5522;
      color: #fff;
      font-weight: 700;
      text-decoration: none;
      padding: 1rem 2rem;
    border-radius: 0.25rem;
      text-align: center;
      font-size: 1.125em;
                                }
.cta-btn-gray {
    background-color: #555;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-align: center;
                        }
           

.mission-text {padding: 1rem 0rem 1rem 2rem;color: #fff;font-size: 1.15em;line-height: 1.5em;}
.logo-mark {float: left;max-height: 80px;opacity: .6;padding-right:10px;}
.full-image {background-image: url(images/fotccentralor-friend-youth-1600x500-04.jpg);background-size:cover;height:420px;}
.half-image {background-image: url(images/hero-photo.jpg);background-size:cover;}
.outcomes {background-color: #ffffff;padding: 2rem;margin: auto;}
.method {background-color: #eeeeee;padding: 2rem;}
.method-column {  width: 50%;margin-top: 1rem;}

  @keyframes slide-in-right  {
      from {
          transform: translateX(100%);
        }
        to {
          transform: translateX(0%);
        }
    }
  
  @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    @media (max-width: 859px) {
        .hero-column {flex: 1 1 auto;}
        .single-chart {width: 100%;flex: 1 1 auto;}
        .photo-column {display: none;}
        .hide-mobile {display: none;}
        .section-header {font-size: 1.25em!important;}
        .nav {padding-bottom: 0rem!important;}
        .single-chart {width: 100%!important;}
        }
        

      

    @media (min-width: 860px) {
        .photo-mobile {display: none;}
        .hide-desktop {display: none;}
      }
    
    @media (max-width: 959px) {
        .desktop {display: none;}
        .nav {display: flex; justify-content:flex-start}
      }
    @media (min-width: 960px) {
        .mobile {display: none;}
      }


    .social-container {
        background-color: #000;
        padding:0;
        padding: 0 2rem;
    }
    .social {
        width: 100%;
        margin: auto;
        text-align: right;
    }
    .nav-container {
        background-color: #282828;
    }
    
    .nav { 
        margin: auto;
        align-items: center; 
        padding: 1rem 2rem;  
    }
    
    .nav-bar {
        display: flex;
        flex-direction: row;
        margin: auto;
        color: #fff;
        font-weight: 400;
        font-size: 1.125rem;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;   
        font-family:'Oswald';text-transform: uppercase;
    }
    
    .nav-list {
        display: inline-block;margin-right: 1.5rem;
    }
    .logo {float: left;margin-top: 10px;}

    .donate-sticky {
        position: fixed;
        top: 60px;
        z-index: 100;
        right:0px;
        padding: 1rem 2rem 1rem .75rem;
        background-color: #282828;
        border-radius: 6px 0px 0px 6px;
      }
      .donate-sticky-mobile {
        position: fixed;
        top: 60px;
        z-index: 100;
        right:0px;
        padding: .75rem .5rem .75rem .75rem;
        background-color: #282828;
        border-radius: 6px 0px 0px 6px;
      }
      
      .flex-wrapper {
        display: flex;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
    }
    .flex-wrapper-outcomes {
      display: flex;
      margin: 0 auto;
      justify-content: center;
  }
     
      .single-chart {
        width: 25%;
      }
      
      .circular-chart {
        display:flex;
        margin: auto;
        
        max-height: 150px;  
        background-size: cover;
        background-repeat: no-repeat;
      }
    
      .youth {
        background-image: url(images/FOTC-icon-youth.svg);
      }
      .ged {
        background-image: url(images/FOTC-icon-ged.svg);
      }
      .justice {
        background-image: url(images/FOTC-icon-justice.svg);
      }
      .parent {
        background-image: url(images/FOTC-icon-parent.svg);
      }
      
      .circle-bg {
        fill: none;
    
      }
      
      .circle {
        fill: none;
        stroke-width: 2.8;
        stroke-linecap: butt;
        animation: progress 1s ease-out forwards;
      }
      
      @keyframes progress {
        0% {
          stroke-dasharray: 0 100;
        }
      }
      
      .circular-chart.orange .circle {
        stroke: #ff5522;
      }
      
      .circular-chart.green .circle {
        stroke: #66AAAA
      }
      
      .circular-chart.blue .circle {
        stroke: #00AAEE;
      }
    
      .circular-chart.yellow .circle {
        stroke: #EEBB11;
      }
      
      .percentage {
        fill: #666;
        font-family: sans-serif;
        font-size: 0.5em;
        text-anchor: middle;
      }