@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap");
* {
  font-family: "Open Sans",Helvetica,"Helvetica Neue",Arial,sans-serif;
  font-weight: 300; }

body {
  margin: 0;
  padding: 0; }

h1 {
  font-weight: 400; 
  margin-bottom:0;}

#LastUpdated {
  font-size:.8em;
}

button, .button {
  background-color: #407cca;
  border: none;
  color: #fefefe;
  padding: 1rem;
  border-radius: 0.3rem;
  transition: background-color .2s;
  font-size: .9em;
  text-decoration: none;
  display: inline-block; }
  button:hover, .button:hover {
    background-color: #6696d5;
    cursor: pointer; }
  button.small, .button.small {
    padding: .4rem;
    font-size: .8em;
    background-color: #8cb0df; }
    button.small:hover, .button.small:hover {
      background-color: #407cca; }
    button.small.disabled:hover, .button.small.disabled:hover {
      background-color: #f1f1f1; }
  button.disabled, .button.disabled {
    background-color: #c1c1c1;
    cursor: not-allowed; }

input {
  border: none; }

form .input-container {
  border-radius: 0.3rem;
  padding: .2rem;
  border: 1px #818181 solid;
  width: auto;
  display: inline-block; }
  form .input-container input[type="text"] {
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 1rem; }
  form .input-container a {
    color: #f1f1f1;
    cursor: default; }
    form .input-container a.active {
      color: #818181; }
      form .input-container a.active:hover {
        color: #407cca;
        cursor: pointer; }

form label {
  width: 12%;
  display: inline-block; }

form input[type="text"] {
  border: 1px solid #818181;
  border-radius: 0.3rem;
  padding: .2rem;
  font-size: 1rem; }

form ul {
  display: inline-block;
  width: 90%;
  box-sizing: border-box; }

form p.forminput label {
  font-weight: 400; }

ul.industry-selector {
  list-style: none;
  margin: 0; }
  ul.industry-selector li {
    display: inline-block;
    padding: .3rem;
    background-color: #f1f1f1;
    border: 1px solid #c1c1c1;
    border-radius: 0.3rem;
    font-size: .9em;
    margin: .2rem;
    color: #818181; }
    ul.industry-selector li:hover, ul.industry-selector li.selected:hover {
      background-color: #a4c65e;
      border-color: #88ad3d;
      cursor: pointer;
      color: #556c26; }
    ul.industry-selector li.selected {
      border-size: 3px;
      border-color: #779735;
      background-color: #bfd78e;
      font-weight: bold;
      color: #556c26; }

body > header {
  padding: 2rem;
  border-bottom: 1px #c7c7c7 solid;
  box-sizing: border-box;
  width: 100%;
  position: relative; }
  body > header #HelpButton {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 8rem;
    padding: 4rem 3rem;
    height: 1rem;
    text-align: right; }
    body > header #HelpButton a {
      text-decoration: none;
      color: #818181;
      font-size: .9em; }
      body > header #HelpButton a:hover {
        color: #407cca;
        cursor: pointer; }
  body > header #HeaderContainer {
    display: grid;
    grid-template-columns: 30% 50% 20%;
    width: 100%;
    box-sizing: border-box; 
    margin-top:1em;}
    @media (max-width: 900px) {
      body > header #HeaderContainer {
        grid-template-columns: 40% 60%; } }
    body > header #HeaderContainer #SearchBar #SearchForm label {
      width: auto; }
    body > header #HeaderContainer #SearchBar .checkbox {
      font-size: .9em;
      margin: 1em 1em 0; }
      body > header #HeaderContainer #SearchBar .checkbox:hover {
        cursor: pointer;
        font-weight: 400; }
      body > header #HeaderContainer #SearchBar .checkbox.selected {
        font-weight: bold; }
        body > header #HeaderContainer #SearchBar .checkbox.selected i:before {
          content: '\e80f'; }
    body > header #HeaderContainer #GenerateButton {
      position: relative; }
      @media (max-width: 900px) {
        body > header #HeaderContainer #GenerateButton {
          grid-column: 1 / 4; } }
      body > header #HeaderContainer #GenerateButton #Generate {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%); }
        @media (max-width: 900px) {
          body > header #HeaderContainer #GenerateButton #Generate {
            left: 50%;
            transform: translateX(-50%);
            position: sticky;
            margin: 2em 1em 0em; } }

div#MainContainer {
  padding: 1rem 2rem 2rem;
  position: relative; }
  div#MainContainer h2 {
    display: inline-block;
    margin-right: 3rem; }
  div#MainContainer #ClientLegend {
    list-style: none;
    padding: 0;
    position: absolute;
    left: 50%;
    top: 1.3rem;
    transform: translateX(-50%);
    z-index: 500; }
    div#MainContainer #ClientLegend li {
      z-index: 1000;
      padding: 0;
      margin: 0 1em 0 0;
      display: inline-block;
      max-width: 250px;
      font-weight: bold;
      font-size: .9em;
      border: 1px solid #fefefe;
      border-radius: 0.3rem;
      padding: .2em;
      vertical-align: text-top;
      height: 1rem;
      transition: .2s;
      overflow: hidden;
      width: 20rem;
      background: #fefefe; }
      div#MainContainer #ClientLegend li.orange {
        color: #f8971d; }
      div#MainContainer #ClientLegend li.red {
        color: #9f0000; }
      div#MainContainer #ClientLegend li span {
        display: none;
        color: #818181;
        opacity: 0;
        z-index: 100;
        padding: .5em;
        font-size: .9em;
        font-weight: 700;
        top: .5em; }
      div#MainContainer #ClientLegend li:hover {
        cursor: default;
        height: 8rem; }
        div#MainContainer #ClientLegend li:hover.red {
          border-color: #9f0000; }
        div#MainContainer #ClientLegend li:hover.orange {
          border-color: #f8971d; }
        div#MainContainer #ClientLegend li:hover span {
          opacity: 1;
          display: block; }
  div#MainContainer #ClearSelections {
    display: inline-block;
    position: absolute;
    right: 2rem;
    top: 2rem; }
  div#MainContainer #Clients {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1rem; }
    div#MainContainer #Clients div.client {
      position: relative;
      border: 1px solid #c7c7c7;
      border-radius: 0.3rem;
      height: 200px;
      background-repeat: no-repeat;
      background-size: 80%;
      background-position-x: center;
      background-position-y: 40%;
      transition: .2s;
      overflow: hidden; }
      div#MainContainer #Clients div.client div.download-link a {
        color: #c1c1c1;
        display: inline-block;
        border: 1px solid #c1c1c1;
        border-radius: 3px;
        position: absolute;
        top: 5px;
        left: 5px;
        background-color: white;
      }
        div#MainContainer #Clients div.client div.download-link a:hover {
          color: #407cca;
          border-color: #407cca;
        }
        div#MainContainer #Clients div.client div.download-link a span {
          display: none;
          text-decoration: none;
          font-weight: bold;
          font-size: .9em;
          width: 0em;
        }
        div#MainContainer #Clients div.client div.download-link a:hover span {
          display: inline-block;
          width: 8em;
        }
      div#MainContainer #Clients div.client img {
        max-width: calc(100% - 8rem);
        max-height: 70%;
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -65%); }
      div#MainContainer #Clients div.client .client-checkmark {
        display: none;
        width: 45px;
        height: 45px;
        position: absolute;
        top: 0;
        left: 50%;
        overflow: visible;
        transform: translateX(-50%); }
        div#MainContainer #Clients div.client .client-checkmark i {
          color: #a4c65e;
          font-size: 2rem; }
      div#MainContainer #Clients div.client .client-industries {
        margin: 0;
        list-style: none;
        padding: 0;
        position: absolute;
        right: 0;
        top: 0; }
        div#MainContainer #Clients div.client .client-industries li {
          position: relative;
          opacity: .6;
          margin: .2em;
          padding: .2em;
          display: inline-block;
          border: 1px solid #c1c1c1;
          color: #818181;
          background-color: #f1f1f1;
          border-radius: 0.3rem;
          font-size: .8em;
          transition: .2s; }
          div#MainContainer #Clients div.client .client-industries li > span {
            display: none;
            white-space: pre; }
          div#MainContainer #Clients div.client .client-industries li:hover {
            opacity: 1;
            background-color: #a4c65e;
            border-color: #88ad3d;
            cursor: pointer;
            color: #556c26; }
            div#MainContainer #Clients div.client .client-industries li:hover span {
              display: inline-block;
              top: -15px; }
      div#MainContainer #Clients div.client .case-studies {
        opacity: .6;
        margin: .2em;
        padding: .2em;
        display: inline-block;
        border: 1px solid #c1c1c1;
        color: #818181;
        background-color: #f1f1f1;
        border-radius: 0.3rem;
        font-size: .8em;
        transition: .2s;
        position: absolute;
        right: 0;
        top: 29px; }
        div#MainContainer #Clients div.client .case-studies:hover {
          opacity: 1;
          background-color: #a4c65e;
          border-color: #88ad3d;
          color: #556c26; }
          div#MainContainer #Clients div.client .case-studies:hover > ul {
            display: block; }
        div#MainContainer #Clients div.client .case-studies > ul {
          display: none;
          margin: 0;
          padding: 0 0 0 2em; }
          div#MainContainer #Clients div.client .case-studies > ul li a {
            color: #44561f;
            font-size: .9em;
            text-decoration: none; }
            div#MainContainer #Clients div.client .case-studies > ul li a:hover {
              font-weight: bold;
              text-decoration: underline; }
      div#MainContainer #Clients div.client .need-permission, div#MainContainer #Clients div.client .not-allowed {
        margin: .2em;
        padding: .2em;
        display: inline-block;
        font-size: 1em;
        border-radius: 0.3rem;
        background-color: transparent;
        position: absolute;
        font-weight: bold;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        transition: width .2s, border-color .2s;
        overflow: hidden;
        border: 1px solid #fefefe; }
      div#MainContainer #Clients div.client .need-permission {
        left: 30px; }
        div#MainContainer #Clients div.client .need-permission:hover, div#MainContainer #Clients div.client .not-allowed:hover {
          width: 160px;
          background-color: #fefefe; }
        div#MainContainer #Clients div.client .need-permission div, div#MainContainer #Clients div.client .not-allowed div {
          display: inline-block;
          font-size: .8em;
          position: absolute;
          top: 5px;
          left: 30px;
          white-space: nowrap;
          overflow: visible;
          font-weight: bold; }
      div#MainContainer #Clients div.client .need-permission {
        color: #f8971d; }
        div#MainContainer #Clients div.client .need-permission:hover {
          border: 1px solid #f8971d; }
      div#MainContainer #Clients div.client .not-allowed {
        color: #9f0000; }
        div#MainContainer #Clients div.client .not-allowed:hover {
          border: 1px solid #9f0000; }
      div#MainContainer #Clients div.client.need-permission-filtered, div#MainContainer #Clients div.client.not-allowed-filtered {
        display: none; }
      div#MainContainer #Clients div.client > span {
        display: block;
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%;
        padding: .5rem;
        background-color: #f1f1f1;
        box-sizing: border-box;
        color: #818181;
        font-weight: 400;
        transition: .2s;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px; }
      div#MainContainer #Clients div.client.selected {
        border-size: 3px;
        border-color: #779735; }
        div#MainContainer #Clients div.client.selected .client-checkmark {
          display: block; }
        div#MainContainer #Clients div.client.selected .need-permission, div#MainContainer #Clients div.client.selected .not-allowed {
          left: 42px;
          top: 5px; }
        div#MainContainer #Clients div.client.selected > span {
          background-color: #bfd78e;
          font-weight: bold;
          color: #556c26; }
      div#MainContainer #Clients div.client.hidden {
        display: none; }
      div#MainContainer #Clients div.client.disabled {
        cursor: not-allowed; }
        div#MainContainer #Clients div.client.disabled img {
          opacity: .3; }
        div#MainContainer #Clients div.client.disabled:hover {
          border-color: #818181; }
          div#MainContainer #Clients div.client.disabled:hover > span {
            background-color: #f1f1f1;
            color: #818181; }
        div#MainContainer #Clients div.client.disabled > span {
          background-color: #fefefe;
          color: #f1f1f1; }
      div#MainContainer #Clients div.client:hover {
        border-color: #a4c65e; }
        div#MainContainer #Clients div.client:hover .not-allowed {
          width: 160px;
          background-color: #ffdcdc;
          border: 1px solid #9f0000; }
        div#MainContainer #Clients div.client:hover > span {
          background-color: #e4eecf;
          color: #98be48; }
  div#MainContainer #AddLogo.open #AddLogoButton i:before {
    content: '\e800'; }
  div#MainContainer #AddLogo.open #AddLogoForm {
    display: block; }
  div#MainContainer #AddLogo #AddLogoForm {
    display: none;
    border: 1px solid #e6e6e6;
    background-color: #f9f9f9;
    border-radius: 0.3rem;
    padding: 1rem;
    margin: 1rem 0; }
    div#MainContainer #AddLogo #AddLogoForm.open {
      display: block; }

body > footer {
  display: none;
  background-color: #f1f1f1; }

#Modal {
  display: none;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1000; }
  #Modal #ModalContainer {
    position: relative;
    width: 60vw;
    height: 60vh;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: #fefefe;
    border-radius: 0.3rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2); }
    @media (max-width: 1800px) {
      #Modal #ModalContainer {
        width: 80vw;
        height: 80vh; } }
    #Modal #ModalContainer header {
      width: 100%;
      padding: 1rem;
      background-color: #f1f1f1;
      box-sizing: border-box;
      border-radius: 0.3rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0; }
      @media (max-width: 1800px) {
        #Modal #ModalContainer header {
          padding: .3rem 1rem; } }
    #Modal #ModalContainer #ModalContent {
      padding: 1rem;
      box-sizing: border-box;
      width: 100%;
      display: grid;
      grid-template-columns: auto auto auto;
      grid-gap: 1rem; }
      #Modal #ModalContainer #ModalContent #Results {
        padding: 0 1rem; }
        #Modal #ModalContainer #ModalContent #Results h2 {
          font-size: 3rem;
          text-align: center;
          margin-top: 0; }
          #Modal #ModalContainer #ModalContent #Results h2 i {
            color: #a4c65e; }
        #Modal #ModalContainer #ModalContent #Results p {
          font-size: 1.3rem;
          text-align: center;
          margin: 0; }
          #Modal #ModalContainer #ModalContent #Results p a.button {
            display: inline-block;
            margin: 1rem; }
      #Modal #ModalContainer #ModalContent .need-permission {
        border: 1px solid #f8971d;
        border-radius: 0.3rem;
        text-align: center;
        padding: 0 1rem; }
        #Modal #ModalContainer #ModalContent .need-permission h3 {
          color: #f8971d;
          font-weight: bold; }
      #Modal #ModalContainer #ModalContent .additional-resources {
        border: 1px solid #a4c65e;
        border-radius: 0.3rem;
        padding: 0 1rem; }
        #Modal #ModalContainer #ModalContent .additional-resources h3 {
          color: #779735;
          font-weight: bold; }
        #Modal #ModalContainer #ModalContent .additional-resources ul {
          list-style: none; }
          #Modal #ModalContainer #ModalContent .additional-resources ul li {
            padding: .2em 0;
            font-weight: bold; }
            #Modal #ModalContainer #ModalContent .additional-resources ul li a {
              color: #285692;
              font-weight: bold;
              text-decoration: none;
              transition: color .1s; }
              #Modal #ModalContainer #ModalContent .additional-resources ul li a:hover {
                color: #a4c65e; }
    #Modal #ModalContainer footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 1rem;
      background-color: #f1f1f1;
      box-sizing: border-box;
      border-radius: 0.3rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      text-align: center;
      border-radius: 0.3rem;
      border-top-left-radius: 0;
      border-top-right-radius: 0; }
      @media (max-width: 1800px) {
        #Modal #ModalContainer footer {
          padding: .3rem; } }
      #Modal #ModalContainer footer button#SecondaryModalButton {
        position: absolute;
        right: 2em;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        background: none;
        color: #818181;
        font-weight: 400;
        text-decoration: none; }
        #Modal #ModalContainer footer button#SecondaryModalButton:hover {
          background-color: #818181;
          color: #fefefe; }

.template-selector {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 1rem; }
  .template-selector .template {
    position: relative;
    border: 3px solid #fefefe;
    transition: .1s; }
    .template-selector .template img {
      width: 100%; }
    .template-selector .template:hover {
      border-color: #a4c65e; }
    .template-selector .template p {
      font-size: .8rem;
      font-weight: bold;
      color: #818181;
      text-align: center; }
    .template-selector .template .template-checkmark {
      display: none;
      position: absolute;
      bottom: -45px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 3rem;
      color: #a4c65e; }
    .template-selector .template.selected {
      border-color: #a4c65e; }
      .template-selector .template.selected .template-checkmark {
        display: block; }