html,
    body {
      padding: 0;
      margin: 0;
      font-size: 14px;
      font-family: 'Rubik', sans-serif;
    }


    a:hover {
      color: inherit;
      opacity: 0.5;
    }

    .grid-x {
      max-width: 1200px;
      margin: auto;
    }



    .bg-yellow { background-color: #c4953d; }
    .bg-green { background-color: #71856a; }
    .bg-red { background-color: #a21c34; }

    .bg-yellow-lt { background-color: #f3ead9; }
    .bg-green-lt { background-color: #e2e7e1; }
    .bg-blue-lt { background-color: #d7d8dd; }

    .align-left { text-align: left; }
    .align-center { text-align: center; }
    .align-center { text-align: center; }

    .section-white {
      background-color: #FFF;
    }
    .section-green {
      background-color: #71856a;
      color: #FFF;
    }
    .section-red {
      background-color: #a21c34;
      color: #FFF;
    }
    .section-yellow {
      background-color: #c4953d;
      color: #FFF;
    }

    .lspei-grid .cell {
      background-color: #FFF;
      min-height: 200px;
    }

      .lspei-grid .cell:nth-child(4n+4) { background-color: #FFF; }
      
      .lspei-grid .cell:nth-child(4n+3) { background-color: #d7d8dd; }

      .lspei-grid .cell:nth-child(4n+2) { background-color: #e2e7e1; }

      .lspei-grid .cell:nth-child(4n+1) { background-color: #f3ead9; }
      



    .heading-yellow {
      display: inline-block;
      color: #FFF;
      background-color: #C4943F;
      padding: 5px 8px;
      font-size: 1.5em;
      margin-bottom: 20px;
    }

    .heading-red {
      display: inline-block;
      color: #FFF;
      background-color: #a21c34;
      padding: 5px 8px;
      font-size: 1.5em;
      margin-bottom: 20px;
    }

    .heading-green {
      display: inline-block;
      color: #FFF;
      background-color: #71856a;
      padding: 5px 8px;
      font-size: 1.5em;
      margin-bottom: 20px;
    }

    .heading-blue {
      display: inline-block;
      color: #FFF;
      background-color: #363d57;
      padding: 5px 8px;
      font-size: 1.5em;
      margin-bottom: 20px;
      font-weight: 700;
    }


    .employment-pdf-link {
      display: inline-block;
      color: #FFF;
      background-color: #363d57;
      padding: 5px 8px;
      font-size: 1rem;
    }

    .pdf-btn {
      display: inline-block;
      color: #FFF;
      background-color: #71856a;
      padding: 5px 20px;
      font-size: 1.5rem;
    }


    #MobileNavTriggerContainer { 
      display: none;
      position: relative;
      z-index: 99;
    }
      #MobileNavTrigger {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 2rem;
        color: #FFF;
        text-shadow: 1px 1px 5px #000;
      }


    #MobileNav { display: none; }

    #MainNav {
      position: fixed;
      display: block;
      min-height: 100vh;
      width: 100px;
      background-color: #FFF;
      border-left: 5px solid #363d57;
    }
      a.mainnav-btn {
        display: block;
        /* height: 100px; */
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        border-bottom: 2px solid #363d57;
        color: #403c55;
      }

      #MainNavTopBtn {
        position: absolute;
        width: 100px;
        display: block;
        bottom: 100px;
        text-align: center;
        color: #403c55;
      }

      #MainSubNav { 
        display: none; 
        position: absolute;
        top: 0; 
        left: 95px;
        width: 300px;
        max-height: 100vh;
        height: 100vh;
        background-color: #363d57;
        padding: 0 20px;
        overflow-y: auto;
        /* Scrollbar firefox */
        scrollbar-color: #2a2f42 #444d6e;
        scrollbar-width: thin;
      }
        #MainSubNav.open { display: block; }

        #MainSubNav a {
          color: #FFF;
          padding: 3px 0;
          display: block;
        }
        /* Scrollbar Webkit / chrome */
        /* Width */
        #MainSubNav::-webkit-scrollbar { width: 8px; }
        /* Track */
        #MainSubNav::-webkit-scrollbar-track { background-color: #444d6e; }
        /* Handle */
        #MainSubNav::-webkit-scrollbar-thumb { background: #2a2f42; }

        .mainnav-subnav-section {
          border-bottom: 1px solid #FFF;
          color: #FFF;
        }

        #MainSubNav a.mainnav-subnav-heading {
          font-weight: 700;
          text-transform: uppercase;
          padding: 8px 0;
        }
          #MainSubNav a.mainnav-subnav-heading i {
            padding-left: 20px;
          }
      
        .mainnav-subnav-items {
          overflow: hidden;
          max-height: 0;
        }
        .mainnav-subnav-items.open {
          max-height: 1000px;
        }



    main {
      background-color: #FFF;
      padding-left: 100px;
    }

      #Banner {
        width: 100%;
        min-height: 35vh;
        background-size: cover;
        background-position: center center;
        
        display: flex;
        align-items: center;
        justify-content: center;
      }
        #Banner img {
          padding: 50px;
        }

        .banner-divider {
          background: url('../img/banner-divider.jpg') center top repeat-y;
        }
          .banner-divider .cell {
            height: 25px;
          }

      #Body > .cms-content > .grid-x {
        background-color: #FFF;
      }
      #Body > .cms-content:nth-child(even) > .grid-x {
        background-color: #e2e7e1;
      }
      

      #Footer {
        background-color: #71856a;
        color: #FFF;
      }
        #FooterGreen { padding: 20px 0; }
          .footer-nav { 
            display: block; 
            color: #FFF;
          }

        #FooterBlue {
          background-color: #363d57;
          text-align: center;
          padding: 20px 0;
        }



@media (max-width: 600px) {


  #MobileNavTriggerContainer {
    display: block;
  }

  #MainNav {
    width: 0;
    border-left: none;
  }

  a.mainnav-btn {
    display: none;
  }

  #MainSubNav {
    display: block;
    left: -300px;
    height: 100vh;
    transition: left 0.5s;
  }
    #MainSubNav.open {
      left: 0;
    }


  main {
    padding-left: 0;
  }

  .section-white,
  .section-green,
  .section-red, 
  .section-yellow {
    padding: 10px 5px;
  }
  
  #FooterBlue span {
    display: block;
  }



}