@font-face {
    font-family: 'Gilroy';
    src: url(/toolkit/wp-content/themes/generatepress_child/fonts/gilroy-light-webfont.woff2), url(http://localhost:8888/toolkit/wp-content/themes/generatepress_child/fonts/gilroy-light-webfont.woff);
    font-weight: 300;
  }
  
  @font-face {
    font-family: 'Gilroy';
    src: url(/toolkit/wp-content/themes/generatepress_child/fonts/gilroy-extrabold-webfont.woff2), url(http://localhost:8888/toolkit/wp-content/themes/generatepress_child/fonts/gilroy-extrabold-webfont.woff);
    font-weight: 700;
  }

  body {
    background-image: url("/lens-flare-hero.jpg");
    background-color: #000000;
    background-repeat: no-repeat, repeat;
    background-size: cover;
    font-family: 'Gilroy', sans-serif;
  }
  .desktop-only {
    display: none;
  }

/*------------------------------------*/
/*-------- Landing Page Splash Grid ----------*/
/*------------------------------------*/

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.3fr 2fr 0.5fr;
  grid-template-areas: "splash-header" ". ." ". .";
  grid-template-columns: auto auto;
  margin-top: 10px;
}

.splash-header {
    background-color: white;
}


/*------------------------------------*/
/*-------- Mobile Styles ----------*/
/*------------------------------------*/
h2 /* text on section 2 of homepage: policing is civil rights issue...*/{
    font-family: "Gilroy", sans-serif, Arial;
    font-weight: 700;
    font-size: 30px;
    color: #ffffff;
    line-height: 1.66;
  }
  h3 /* section 3 text over image*/ {
    font-family: 'Gilroy', sans-serif, Arial;
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.7;
    margin: 0;
    letter-spacing: 1px;
  }
  
  h6 /* text on section 2 of homepage "now more than ever"*/{
    font-family: 'Gilroy', sans-serif;
    color: #38A5A8;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.24;
    margin: 0;
  }
  p {
    color: #091C27;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px;
    line-height: 1.44;
  }
  
  /*------------------------------------*/
  /*------- Site Header Styles ---------*/
  /*------------------------------------*/
  .site-header {
    background-color: transparent;
    position: absolute;
    width: 90%;
    z-index: 1;
    padding: 20px 5% 0 5%;
  
  }
  
  /* Search icon positioning */
  .site-header .site-logo {
      position: absolute;
      left: 20px;
      top: 20px;
  }
  /* Search icon positioning */
  .site-header .site-nav {
      position: absolute;
      right: 60px;
      top: 20px;
  }
  /* Search icon positioning */
  .site-header .search-form {
      position: absolute;
      right: 20px;
      top: 15px;
  }
  /*------------------------------------*/
  /*----------- Logo Styles ------------*/
  /*------------------------------------*/
  
  /*------------------------------------*/
  /*--- Main Navigation Styles ---------*/
  /*------------------------------------*/
  
  /*------------------------------------*/
  /*--- Main Nav Search Styles ---------*/
  /*------------------------------------*/
  
  
  .site-header .search-field {
      background-color: transparent;
      background-image: url('img/icon-search@2x.png');
      background-position: 5px center;
      background-repeat: no-repeat;
      background-size: 24px 24px;
      border: none;
      cursor: pointer;
      height: 30px;
      margin: 0;
      padding: 0 0 0 34px;
      position: relative;
      -webkit-transition: width 400ms ease, background 400ms ease;
      transition:         width 400ms ease, background 400ms ease;
      width: 0;
  }
  
  .site-header .search-field:focus {
      background-color: #fff;
      border: 2px solid #c3c0ab;
      cursor: text;
      outline: 0;
      width: 330px;
  }
  .search-form
  .search-submit {
  display:none;
  }
  /*------------------------------------*/
  /*--- Individual Underline Styles ----*/
  /*------------------------------------*/
  .underline-red {
    text-decoration: underline;
    text-decoration-color: #E23425;
    te
  }
  
  a.underline-teal,
  a:visited .underline-teal,
  a:hover .underline-teal,
  a:focus .underline-teal {
    border-bottom: 2px solid #38A5A8;
  }
  
  span a.underline-teal-large,
  span a:visited .underline-teal-large,
  span a:hover .underline-teal-large,
  span a:focus .underline-teal-large {
    text-decoration-color: #38A5A8;
  }
  
  /*------------------------------------*/
  /*-------- Highlight Styles ----------*/
  /*------------------------------------*/
  h3.highlight {
    line-height: 0.85em;
    margin-bottom: 1px;
  }
    .highlight {
      display: inline;
      color: #ffffff;
    }
  
    .highlight-wrapping {
      position: relative;
      padding: 4px 10px 4px 20px; /* top and bottom padding adds to highlighted area*/
    }
  
    .highlight-wrapping-inline {
      position: relative;
      padding: 0 8px 0 8px;
    }
  
    .highlight-teal {
      background: #38A5A8;
      box-shadow: 0 0 0 #38A5A8,
                  0 -1 0 0 #38A5A8;
    }
    .highlight-red {
      background: #E23425;
      box-shadow: 0 0 0 #E23425,
                  0 -1 0 0 #E23425;
    }
    span.highlight a:hover {
      text-decoration: underline;
    }
    /*highlight with links */
    h3 span a{
      text-decoration: underline;
    }
  
    h3 span a:visited {
      color: #ffffff;
    }
  
    /*------------------------------------*/
    /*-------- Inline Icons Styles -------*/
    /*------------------------------------*/
    img.inline-icon {
      padding: 0 12px 0 0;
    }
    .homepage-subtitle img.inline-icon {
      padding: 0 0 0 6px;
    }
  
  /*------------------------------------*/
  /*-------- Accesibility Styles -------*/
  /*------------------------------------*/
  #skip-to-content {
    padding: 1em;
    position: absolute;
    top: -40px;
    left: 1em;
    z-index: 1000;
    color: white;
  }
  
  #skip-to-content:focus {
    position: absolute;
    top: 0;
    background: #222;
  }

  /*------------------------------------*/
    /*-------- Frontpage Styles ----------*/
    /*------------------------------------*/
    .section-one {
        height: 767px;
        display: grid;
        grid-template-rows: 300px auto;
        background-size: 2000px;
      }
      .s1content {
        justify-self: right;
        max-width: 60vw;
        padding-top: 0px;
      }
      .homepage-subtitle {
        font-size: 30px;
        padding-right: 10%;
      }
      .scrollarrow {
        align-self: end;
        padding-bottom:25px;
        background: transparent;
      }
  
      /* section two and four styles*/
      .section-two, .section-four {
        grid-template-columns: 35% 65%;
        padding: 80px 40px 100px 0px;
      }
  
          .s2content {
            grid-template-columns: 60% 40%;
            grid-template-rows: auto auto;
            padding: 0 0 20px 5%;
          }
            .s2item1 {
              font-family: 'Gilroy', sans-serif;
              max-width: 500px;
              padding: 30px 0 0 0;
            }
            .s2item2 {
              padding: 10px 0 10px 27px;
              margin: 90px 0;
              border-left: 0.5px solid #991B1F;
            }
  
            .s2item3 {
              grid-column: 1/3;
              display: flex;
              align-items: center;
            }
                .s2item3 a {
                  margin: 0 100px 0 0;
                }
        /* section four styles */
        .s4content {
          padding: 80px 0 27px 8%;
        }
  
          .s4item2 {
              font-size: 36px;
            padding: 0 5% 0 0;
          }
          .s4item3 {
            grid-column: 1/3;
            margin: 10px 0 0 0;
            display: flex;
          }
              .s4item3 a {
                margin: 0 80px 0 0;
              }
  
        /* Section Three and Five Styles */
        .section-three, .section-five {
          background-position: center center;
          background-size: cover;
        }
          .highlight-text-overlay {
            top: -30px;
          }
        .section-five h3 {
          line-height: .9;
        }
  
        .section-five-content {
          max-width: 547px;
          margin-top: 100px;
        }
  
          .s5item1 {
              line-height: 26px;
          }
            .s5item1 a.underline-teal {
              padding: 0 0 -4px 0;
            }
          .s5item2 {
            display: block;
            padding: 0 0 0 0;
            float: right;
            margin: 1px 0 0 0;
          }
          #glossary-link, #tools-link{
            display: inline-block;
          }
          div#tools-link {
            padding: 0 45px 0 0;
          }
          div#glossary-link {
            padding: 0 0 0 0;
          }
  
          .section-five div#share-button {
            padding: 100px 0 0 0;
          }
              .share-button {
                max-width: 200px;
              }
  
  
      /* Section 6 styles Desktop */
      .not-tablet {
        display: block;
      }
      .section-six {
        display: grid;
        grid-template-columns: repeat(4, calc(25% - 15px));
        grid-template-rows: repeat (2, 320px);
        padding: 56px 40px 56px 40px;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        width: calc(100% - 80px);
      }
      .section-six #toolkit-title {
        grid-column: 1/2;
      }
      .toolkit-item {
        padding: 20px 0 0 0;
      }
        div.toolkit-item a {
          grid-column-gap: 16px;
          grid-template-columns: calc(15% - 8px) calc(85% - 8px);
          grid-template-rows: auto 120px;
        }
  
      .section-six div.toolkit-item a h6{
        font-size: 20px;
        padding: 0 0 0 0;
        align-self: start;
      }
  
  
  
  /*------------------------------------*/
  /*--- Desktop Highlight Styles -------*/
  /*------------------------------------*/
        .highlight-wrapping {
          padding: 5px 10px 5px 60px;
        }
  
  
  
  /* --------------------------------------- */
  /* ---- Desktop Footer Styles ------------ */
  /* --------------------------------------- */
  #footer {
    padding: 65px 10% 65px 10%;
    grid-template-columns: 25% 35% 40%;
    grid-template-rows: auto auto auto auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  #footer-logo {
    grid-column: 1/2;
    grid-row: 1/5;
    padding: 20px 10% 0 0;
    margin-right: 6%;
    border-bottom: none;
    border-right: 2px solid #29373E;
  }
    #footer-logo p {
      padding: 20px 0 0 0;
    }
  
  #footer-additional-links {
    grid-column: 2/3;
    grid-row: 1/2;
    padding-left: 0px;
  }
  #footer-location{
    grid-column: 3/4;
    grid-row: 1/2;
    padding-left: 0px;
  }
  #footer-email {
    grid-column: 3/4;
    grid-row: 2/3;
    padding-left: 0px;
    align-self: end;
  }
  
  #footer-download-toolkit {
    grid-column: 2/3;
    grid-row: 3/4;
  }
  
  #footer-download-guidebook {
    grid-column: 3/4;
    grid-row: 3/4;
  }
        .footer-download-div {
          padding-left: calc(10% + 12px);
          max-width: 350px;
        }
        .footer-download-div p.download-spanish {
          text-align: left;
        }
  
  #footer-social {
    grid-column: 3/4;
    grid-row: 1/2;
    justify-self: right;
    align-self: top;
  }
  
  #footer-copyright {
    grid-column: 2/4;
    grid-row: 4/5;
  }
    #footer-copyright p {
      text-align: left;
      padding: 5% 0 5% 5%;
    }
  
  /* --------------------------------- */
  /* ---- Desktop TOC (main) -----------*/
  /* --------------------------------- */
  .toc-loop {
    grid-template-columns: repeat(3,1fr);
    padding-bottom: 50px;
  }
  a div.toc-item {
    grid-template-rows: 80px 100px;
  }
  section.toc-grid,
  .secondary-page.section-two {
    max-width: 1440px;
    margin: 0 auto;
  }
  
  
  /* --------------------------------- */
  /* ---- Desktop PBN Styles  ----------*/
  /* --------------------------------- */
  section.pbn.section-one {
    height: 500px;
    display: grid;
    padding: 150px 0% 0% 0%;
    grid-template-columns: 50% 50%;
    grid-template-rows: 300px auto;
  }
  .pbn .hero-highlight {
    position: static !important;
    top: 0px !important;
    align-self: start;
  }
    .pbn .s1content {
      padding: 0 20% 0 0;
    }
        .pbn .download-button {
          margin: 10% 0 0 0;
        }
        .pbn .download-button img.inline-icon {
            padding: 0 0 0 20px;
          }
  .pbn div.scrollarrow {
    grid-column: 1/3;
  }
  
  
  #pbn-facts-section {
    display: grid;
    grid-template-columns: 42% 16% 42%;
  }
    #pbn1 {
      grid-column: 1/3;
      grid-row: 1/2;
    }
    #pbn1-img {
      grid-column: 3/4;
      grid-row: 1/2;
      background-image: url('img/pbn_placeholder_1.png');
      height: 100%;
      background-size: cover; 
      background-position: center; 
    
    }
    #pbn2 {
      grid-column: 2/4;
      grid-row: 2/3;
    }
    #pbn2-img {
      grid-column: 1/2;
      grid-row: 2/3;
      background-image: url('img/pbn_placeholder_2.png');
      height: 100%;
      background-size: cover; 
      background-position: center; 
    }
    #pbn3 {
      grid-column: 1/3;
      grid-row: 3/4;
    }
    #pbn3-img {
      grid-column: 3/4;
      grid-row: 3/4;
      background-image: url('img/pbn_placeholder_3.png');
    }
    #pbn4 {
      grid-column: 2/4;
      grid-row: 4/5;
    }
    #pbn4-img {
      grid-column: 1/2;
      grid-row: 4/5;
      background-image: url('img/pbn_placeholder_4.png');
      height: 100%;
      background-size: cover; 
      background-position: center; 
    }
  
  section.section-two.secondary-page {
    display: grid;
    grid-template-columns: 100%;
    padding: 5% 5% 5% 5%;
  }
  .secondary-page h3 {
    font-size: 70px;
  }
  .secondary-page #pbn-facts-section h3 {
    font-size: 70px;
  }
  section.section-two.secondary-page h2 {
    font-size: 40px;
  }
  section.section-two.secondary-page .s2item1 {
    max-width: 1000px;
  }
  .related-topics-div {
    display: grid;
    grid-template-columns: repeat(3, auto);
    padding: 5% 0 0 0;
    grid-row-gap: 40px;
  }
      .related-topics-div h4 {
        grid-column: 1/4;
        grid-row: 1/2;
      }
      .related-topic-item a {
        grid-template-columns: 35px auto;
        grid-template-rows: 50px;
        grid-column-gap: 10px;
        padding: 0 0 0 0;
        align-content: end;
      }
      .related-topics-div img {
        max-width: 30px;
      }
      .related-topic-item a#policing-icon {
        align-items: center;
      }
  
  /* --  mobile TOPICS OF CONCERN SINGLES -- */
  /* -- section one of tertiary page - */
  
  
  /* -- desktop content section tertiary page - */
  .toc-hero {
    height: 360px;
  }
  .page-title {
    padding-top: 10%;
  }
  .return-toc {
    padding: 2% 0 2% 60px;
  }
  .return-toc a,
  .return-toc a:hover,
  .return-toc a:visited {
    font-size: 25px;
    line-height: 31px;
  }
  
  
  section.toc-content {
      display: grid;
      grid-template-columns: calc(65% - 30px) calc(35% - 30px);
      grid-template-rows: repeat(4, auto);
      grid-column-gap: 60px;
  }
      .toc-content-item-1 {
        grid-column: 1/2;
        grid-row: 1/4;
      }
        .toc-content h2 {
          font-size: 40px;
          line-height: 58px;
        }
      .toc-content-item-2 {
        grid-column: 2/3;
        grid-row: 1/2;
        padding: 0 5% 0 0;
      }
      .toc-content-item-3 {
        grid-column: 1/3;
        grid-row: 4/5;
        width: 100%;
        justify-self: start;
      }
      .toc-content-item-4 {
        grid-column: 2/3;
        grid-row: 2/3;
      }
      .toc-content-item-5 {
        grid-column: 2/3;
        grid-row: 3/4;
      }
  .download-div {
    grid-template-columns: calc(65% - 30px) calc(35% - 30px);
    grid-column-gap: 60px;
    grid-template-rows: 200px;
    align-items: center;
  }



  .download-button {
    border: 2px solid #38A5A8;
    padding: 1.16em 5% 1.16em 5%;
    margin: 20px 0 0 0;
    display: flex;
    justify-content: space-around;
    align-content: center;
    font-weight: 800;
    width: 40%;
  }
  .download-button a,
  .download-button a:visited {
    color: #FFFFFF;
    text-decoration: none;
  }
  .download-button img,
  .video-button img {
    margin: 0 0 0 24px;
  }
  .pbn .download-button img {
    margin: 0 0 0 5px;
  }
.download-spanish {
    padding: 14px 0 0 0;
    font-family: 'Gilroy', sans-serif;
}

    .download-spanish a {
      color: #FFFFFF;
      font-size:14px;
      font-weight: 800;
      line-height: 17px;
    }

  .scrollarrow {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
  }