/*
color brand
purple #2B3990
green #86B817
yellow #F5AF02
orange #F15A29
*/


  :root {
    --window: #ffffff;
    --link-bg: hsla(0, 0%, 100%, 0.04);
    --link-bg-hover: hsla(0, 0%, 100%, 0.08);
    --code: hsla(0, 0%, 100%, 0.15);
    --nav: hsla(0, 0%, 100%, 0.1);
    --nav-hover: hsla(0, 0%, 100%, 0.5);
    --nav-active: #fff;
  }

  html {
    font-size: 18px;
  }
  body,
  html {
    color: #2B3990;
    margin: 0;
  }
  html {
    background: var(--window);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
      sans-serif, Apple Color Emoji, Segoe UI Emoji;
    line-height: 1.4;
    scroll-behavior: smooth;
    scroll-snap-stop: always;
    -webkit-scroll-snap-stop: always;
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
    -webkit-scroll-snap-type: y mandatory;
  }
  body {
    -webkit-animation: a 1s ease-in-out;
    animation: a 1s ease-in-out;
    font-size: 100%;
  }
  h1, h2,h3 {
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 32px 0 0;
  }
  h3{
    font-size: 1.3rem;
    line-height: 1.2;
    margin: 0 0 16px;
  }
  ::selection,
  ul li a:hover{
    color: white;
    background: #2B3990;
  }
  section{
    grid-column-gap: 7vw;
    /*grid-row-gap: 5vh;*/
    display: grid;
    grid-template-areas: ". . ." ". a ." ". b ." ". c ." ". . .";
    grid-template-columns: 1fr minmax(0, 1000px) 1fr;
    grid-template-rows: 1fr minmax(100px, -webkit-min-content) -webkit-max-content -webkit-max-content 1fr;
    grid-template-rows: 1fr minmax(100px, min-content) max-content max-content 1fr;
  }
  header section{
    grid-template-rows: 1fr minmax(32px, -webkit-min-content) -webkit-max-content -webkit-max-content 1fr;
    grid-template-rows: 1fr minmax(32px, min-content) max-content max-content 1fr;
  }
  section picture {
    grid-area: a;
  }
  section .parentlogo img {
    display: block;
    margin: 0 auto;
    max-height: 48px;
  }
  section picture.hero{
    display: block;
  }
  section picture.hero img {
    display: block;
    max-width: 100%;
  }
  section article {
    font-size: 1.333rem;
    grid-area: b;
    text-align: center;
    margin-bottom: 64px;
  }
  section article p {
    stroke-width: 1.5px;
    margin: 1.333rem 0 0;
  }
  section article p span{
    color: #F15A29;
    position: relative;
    display: inline-block;
  }
  section ul {
    grid-area: c;
  }
  p.shortdesc{
    max-width: 640px;
    margin: 0 auto;
  }
  footer {
    display: block;
    font-size: 12px;
    text-align: center;
    padding: 64px 0px;
  }
  footer p,
  footer a{
    color: #666666;
  }
  footer a{
    text-decoration: none;
  }
  footer a:hover{
    text-decoration: underline;
  }
  ul.grid {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #peoplestack ul.grid li.max {
    grid-column: 1/-1;
    position: relative;
  }
  ul li.center{
    text-align: center;
  }
  ul li.right{
    text-align: right;
  }
  ul li.color{
    font-size: 0.9rem;
    line-height: 1.3rem;
    margin: 0.5rem;
    padding: 1.2rem;
    border-radius: 8px;
    position: relative;
  }
  ul li.color div{
    width: 80%;
  }
  ul li.color.purple{
    background-color: rgba(43, 57, 144, 0.15);
  }
  ul li.color.purple::before{
    content: "";
    display: block;
    width: 250px;
    height: 200px;
    position: absolute;
    right: -20px;
    bottom: 0px;
    background: url("../images/peeps001.svg") no-repeat;
    background-size: cover;
    background-position-y: 0px;
    background-position-x: 50px;
  }
  ul li.color.green{
    background-color: rgba(134, 184, 23, 0.15);
  }
  ul li.color.green::before{
    content: "";
    display: block;
    width: 250px;
    height: 200px;
    position: absolute;
    right: -20px;
    bottom: 0px;
    background: url("../images/peeps005.svg") no-repeat;
    background-size: cover;
    background-position-y: 0px;
    background-position-x: 25px;
  }
  ul li.color.yellow{
    background-color: rgba(245, 175, 2, 0.15);
  }
  ul li.color.yellow::before{
    content: "";
    display: block;
    width: 250px;
    height: 200px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: url("../images/peeps003.svg") no-repeat;
    background-size: cover;
    background-position-y: 0px;
    background-position-x: 50px;
  }
  ul li.color.orange{
    background-color: rgba(241, 90, 41, 0.15);
  }
  ul li.color.orange::before{
    content: "";
    display: block;
    width: 250px;
    height: 200px;
    position: absolute;
    right: -20px;
    bottom: 0px;
    background: url("../images/peeps004.svg") no-repeat;
    background-size: cover;
    background-position-y: 0px;
    background-position-x: 50px;
  }
  ul li.color.grey{
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /*
  ul li.max.color div{
    border: 1px solid red;
  }
  */
  .more{
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
    line-height: 1.2rem;
    background-color: #2B3990;
    padding: 8px 48px 8px 12px;
    margin-top: 20px;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
  }
  .more.line{
    color: #2B3990;
    background: none;
    border: 1px solid #2B3990;
  }
  .more.noarrow{
    padding: 8px 12px;
  }
  .more::before{
    content: "";
    display: inline-block;
    background: url("../images/arrow-right.svg");
    width: 16px;
    height: 16px;
    position: absolute;
    right: 12px;
    top: 10px;
  }
  .more.noarrow::before{
    background: none;
  }
  ul li.color.green .more{
    background-color: #86B817;
  }
  ul li.color.yellow .more{
    background-color: #F5A623;
  }
  ul li.color.orange .more{
    background-color: #F15A29;
  }
  i.one {
    background: url("../images/one.svg");
  }
  ul li a:hover i.one {
    background: url("../images/one-white.svg");
  }
  i.two {
    background: url("../images/two.svg");
  }
  ul li a:hover i.two {
    background: url("../images/two-white.svg");
  }
  i.three {
    background: url("../images/three.svg");
  }
  ul li a:hover i.three {
    background: url("../images/three-white.svg");
  }
  i.four {
    background: url("../images/four.svg");
  }
  ul li a:hover i.four {
    background: url("../images/four-white.svg");
  }
  i.five {
    background: url("../images/five.svg");
  }
  ul li a:hover i.five {
    background: url("../images/five-white.svg");
  }
  i.six {
    background: url("../images/six.svg");
  }
  .parentlogo{
    text-align: left;
    width: 200px;
  }
  .parentlogo a,
  .parentlogo a:hover{
    background: none;
  }
  .parentlogo span{
    display: inline-block;
    text-align: left;
    color: white;
    font-size: 10px;
    padding: 4px 8px;
    margin-bottom: 4px;
    background-color: #F15A29;
    border-radius: 4px;
  }
  nav{
    display: flex;
    align-items: center;
    justify-content: right;
    height: 100%;
  }
  nav li{
    display: inline-block;
    list-style: none;
    font-size: 0.85em;
    margin-right: 16px;
  }
  nav li:last-child{
    margin-right: 0;
  }
  small{
    display: block;
    line-height: normal;
    margin-top: 16px;
  }
  @media (max-height: 500px), screen and (max-width: 500px) {
    html {
      font-size: 15px;
    }
    section picture.hero img {
      max-width: fit-content;
      max-height: 200px;
      left: -25%;
      position: absolute;
    }
    section picture.hero{
      height: 200px;
      position: relative;
      overflow-x: hidden;
    }
    nav{
      align-items: center;
      justify-content: center;
    }
    nav ul{
      padding: 0;
      margin: 0;
    }
    nav li{
      font-size: 1em;
    }

    .parentlogo{
      display: block;
      width: 100%;
    }
  }
  @media screen and (max-width: 700px) {
    ul.grid {
      grid-template-columns: 1fr;
    }
  }