:root {
  --primary: #003C5E;
  --primary-hover: #047B9B;
  --secondary: #FFB838;
  --secondary-hover: #FFCD42;
  --error: #f36b36;
  --warning: #fcb600;
  --success: #99cc66;
  --black: #353436;
  --transparent-black-05: rgba(0, 0, 0, 0.05);
  --transparent-black-25: rgba(0, 0, 0, 0.25);
  --transparent-black-80: rgba(0, 0, 0, 0.80);
  --light-grey: #DEDEDE;
  --off-white: #F0F0F0;
  --white: #FFFFFF;
  --transparent-white: rgba(255,255,255,0.96);

  --size-minus-4: 0.25rem;
  --size-minus-3: 0.375rem;
  --size-minus-2: 0.5rem;
  --size-minus-1: 0.625rem;
  --size-0: 1rem;
  --size-plus-1: 1.3125rem;
  --size-plus-2: 1.8125rem;
  --size-plus-3: 2.625rem;
  --size-plus-4: 3.975rem;
  --size-plus-5: 6rem;
  --size-plus-6: 8rem;

  --body-line-height: 1.6rem;
  --small-caps-font-size: 0.8rem;
  --border-radius: 3px;
}

/* DOCUMENT
-------------------------------------------------------*/

*, *:before, *:after {
  box-sizing: border-box;
}

::selection {
  background-color: var(--secondary);
  color: var(--white);
}

body, html {
  width: 100%;
  height: 100%;
}

html {
  font-size: 16px;
}

body {
  background-color: var(--white);
  color: var(--black);
  font-family: 'open-sans-light', Helvetica, sans-serif;
  line-height: var(--body-line-height);
}

/* PAGE
-------------------------------------------------------*/

#content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto;
  width: 100%;
  outline: none;
}

header {
  background-color: var(--transparent-white);
  border-bottom: 1px solid var(--light-grey);
  position: sticky;
  top: 0;
  z-index: 2;
}
header .container {
  padding-left: var(--size-plus-1);
  padding-right: var(--size-plus-1);
}
header .logo {
  height: 38px;
}
header .logo:hover {
  opacity: 0.8;
}
header nav a {
  border-bottom: 3px solid transparent;
  display: inline-block;
  padding-top: var(--size-0);
  padding-bottom: var(--size-0);
}
header nav a:hover,
header nav a.active {
  text-decoration: none;
  border-bottom: 3px solid var(--secondary);
}
.hamburger {
  display: none;
}

main {
  flex: 1;
}

section {
  border-bottom: 1px solid var(--light-grey);
  position: relative;
  width: 100%;
}
section.primary {
  background-color: var(--primary);
  color: var(--white);
}
section.primary .browser-screenshot {
  box-shadow: 0 1px 7px 5px var(--transparent-black-25);
}
section .container {
  padding: var(--size-plus-4) var(--size-plus-2);
}

footer {
  background-color: var(--black);
  color: var(--white);
}
footer .container {
  padding: var(--size-plus-2);
}
footer img {
  max-width: 160px;
}
footer li {
  margin-bottom: var(--size-minus-3);
}

/* STRUCTURE
-------------------------------------------------------*/

.container {
  margin: 0 auto;
  position: relative;
/*  max-width: 90%;*/
}
.container.width-400 {
  max-width: 400px;
}
.container.width-440 {
  max-width: 440px;
}
.container.width-480 {
  max-width: 480px;
}
.container.width-500 {
  max-width: 500px;
}
.container.width-600 {
  max-width: 600px;
}
.container.width-860 {
  max-width: 860px;
}
.container.width-960 {
  max-width: 960px;
}
.container.width-1200 {
  max-width: 1200px;
}
.container.width-1600 {
  max-width: 1600px;
}
.container.inset-0 {
  padding: var(--size-0);
}
.container.inset-plus-1 {
  padding: var(--size-plus-1);
}
.container.inset-plus-2 {
  padding: var(--size-plus-2);
}
.container.inset-plus-3 {
  padding: var(--size-plus-3);
}
.container.vertical-scroll {
  height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.row {
  display: flex;
  position: relative;
  width: 100%;
}
.row.height-100 .card {
  height: 100%;
}

.column {
  flex: 1;
  min-width: 0;
  position: relative;
  width: 100%;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.inliner {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  gap: var(--size-0);
  width: auto;
}
.inliner.space-between {
  justify-content: space-between;
}
.inliner li {
  flex-shrink: 0;
}

.layerer {
  position: relative;
  width: 100%;
  height: 100%;
}
.layerer .background-layer, .layerer .foreground-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  inset: 0;
}
.layerer .background-layer {
  z-index: -1;
}
.layerer .midground-layer {
  z-index: 1;
}
.layerer .foreground-layer {
  position: relative;
  z-index: 1;
}
.layerer .cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}
.layerer .cover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.layerer .cover.left-aligned img {
  object-position: left center;
}
.layerer .align-center {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}
.layerer .justify-center {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
}
.layerer .justify-left {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: left;
}
.layerer.full-height {
  height: 100vh;
}

.card {
  background-color: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--border-radius);
  color: var(--black);
}

.fieldset-group {
  display: flex;
  gap: var(--size-minus-1);
}
.fieldset-group fieldset, .fieldset-group div {
  flex: 1;
  position: relative;
}

.button-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-minus-1);
}
.button-group button, .button-group .button {
  display: inline-block;
  flex: 1;
  width: auto;
}
.button-group.centered {
  justify-content: center;
}
.button-group.centered button, .button-group.centered .button {
  flex: 0 1 auto;
}
.button-group.full-width button, .button-group.full-width .button {
  flex: 1;
}

aside {
  position: sticky;
  top: var(--size-plus-5);
}

/* MINI-CLASSES
-------------------------------------------------------*/

.no-scroll {
  overflow: hidden;
}

.desktop {
  display: block;
}

.mobile {
  display: none;
}

.border-top {
  border-top: 1px solid var(--light-grey);
}
.border-bottom {
  border-bottom: 1px solid var(--light-grey);
}

hr {
  background-color: var(--light-grey);
  border: 0;
  height: 1px;
  margin: var(--size-plus-1) 0;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.text-align-center {
  display: block;
  text-align: center;
}

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

.text-align-right {
  text-align: right;
}

.text-inliner {
  align-items: baseline;
  display: flex;
  gap: 0.25rem;
}

.center-div {
  display: block;
  margin: 0 auto;
}

.flex-align-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gap-minus-4 {
  gap: var(--size-minus-4);
}
.gap-minus-3 {
  gap: var(--size-minus-3);
}
.gap-minus-2 {
  gap: var(--size-minus-2);
}
.gap-minus-1 {
  gap: var(--size-minus-1);
}
.gap-0 {
  gap: var(--size-0);
}
.gap-plus-1 {
  gap: var(--size-plus-1);
}
.gap-plus-2 {
  gap: var(--size-plus-2);
}
.gap-plus-3 {
  gap: var(--size-plus-3);
}
.gap-plus-4 {
  gap: var(--size-plus-4);
}
.gap-plus-5 {
  gap: var(--size-plus-5);
}
.gap-plus-6 {
  gap: var(--size-plus-6);
}

.margin-top-minus-4 {
  margin-top: var(--size-minus-4);
}
.margin-top-minus-3 {
  margin-top: var(--size-minus-3);
}
.margin-top-minus-2 {
  margin-top: var(--size-minus-2);
}
.margin-top-minus-1 {
  margin-top: var(--size-minus-1);
}
.margin-top-0 {
  margin-top: var(--size-0);
}
.margin-top-plus-1 {
  margin-top: var(--size-plus-1);
}
.margin-top-plus-2 {
  margin-top: var(--size-plus-2);
}
.margin-top-plus-3 {
  margin-top: var(--size-plus-3);
}
.margin-top-plus-4 {
  margin-top: var(--size-plus-4);
}
.margin-top-plus-5 {
  margin-top: var(--size-plus-5);
}
.margin-top-plus-6 {
  margin-top: var(--size-plus-6);
}

.margin-bottom-minus-4 {
  margin-bottom: var(--size-minus-4);
}
.margin-bottom-minus-3 {
  margin-bottom: var(--size-minus-3);
}
.margin-bottom-minus-2 {
  margin-bottom: var(--size-minus-2);
}
.margin-bottom-minus-1 {
  margin-bottom: var(--size-minus-1);
}
.margin-bottom-0 {
  margin-bottom: var(--size-0);
}
.margin-bottom-plus-1 {
  margin-bottom: var(--size-plus-1);
}
.margin-bottom-plus-2 {
  margin-bottom: var(--size-plus-2);
}
.margin-bottom-plus-3 {
  margin-bottom: var(--size-plus-3);
}
.margin-bottom-plus-4 {
  margin-bottom: var(--size-plus-4);
}
.margin-bottom-plus-5 {
  margin-bottom: var(--size-plus-5);
}
.margin-bottom-plus-6 {
  margin-bottom: var(--size-plus-6);
}

.margin-left-minus-4 {
  margin-left: var(--size-minus-4);
}
.margin-left-minus-3 {
  margin-left: var(--size-minus-3);
}
.margin-left-minus-2 {
  margin-left: var(--size-minus-2);
}
.margin-left-minus-1 {
  margin-left: var(--size-minus-1);
}
.margin-left-0 {
  margin-left: var(--size-0);
}
.margin-left-plus-1 {
  margin-left: var(--size-plus-1);
}
.margin-left-plus-2 {
  margin-left: var(--size-plus-2);
}
.margin-left-plus-3 {
  margin-left: var(--size-plus-3);
}
.margin-left-plus-4 {
  margin-left: var(--size-plus-4);
}
.margin-left-plus-5 {
  margin-left: var(--size-plus-5);
}

.margin-right-minus-4 {
  margin-right: var(--size-minus-4);
}
.margin-right-minus-3 {
  margin-right: var(--size-minus-3);
}
.margin-right-minus-2 {
  margin-right: var(--size-minus-2);
}
.margin-right-minus-1 {
  margin-right: var(--size-minus-1);
}
.margin-right-0 {
  margin-right: var(--size-0);
}
.margin-right-plus-1 {
  margin-right: var(--size-plus-1);
}
.margin-right-plus-2 {
  margin-right: var(--size-plus-2);
}
.margin-right-plus-3 {
  margin-right: var(--size-plus-3);
}
.margin-right-plus-4 {
  margin-right: var(--size-plus-4);
}
.margin-right-plus-5 {
  margin-right: var(--size-plus-5);
}

.no-margin {
  margin: 0;
}

.padding-top-minus-4 {
  padding-top: var(--size-minus-4);
}
.padding-top-minus-3 {
  padding-top: var(--size-minus-3);
}
.padding-top-minus-2 {
  padding-top: var(--size-minus-2);
}
.padding-top-minus-1 {
  padding-top: var(--size-minus-1);
}
.padding-top-0 {
  padding-top: var(--size-0);
}
.padding-top-plus-1 {
  padding-top: var(--size-plus-1);
}
.padding-top-plus-2 {
  padding-top: var(--size-plus-2);
}
.padding-top-plus-3 {
  padding-top: var(--size-plus-3);
}
.padding-top-plus-4 {
  padding-top: var(--size-plus-4);
}
.padding-top-plus-5 {
  padding-top: var(--size-plus-5);
}

.padding-bottom-minus-4 {
  padding-bottom: var(--size-minus-4);
}
.padding-bottom-minus-3 {
  padding-bottom: var(--size-minus-3);
}
.padding-bottom-minus-2 {
  padding-bottom: var(--size-minus-2);
}
.padding-bottom-minus-1 {
  padding-bottom: var(--size-minus-1);
}
.padding-bottom-0 {
  padding-bottom: var(--size-0);
}
.padding-bottom-plus-1 {
  padding-bottom: var(--size-plus-1);
}
.padding-bottom-plus-2 {
  padding-bottom: var(--size-plus-2);
}
.padding-bottom-plus-3 {
  padding-bottom: var(--size-plus-3);
}
.padding-bottom-plus-4 {
  padding-bottom: var(--size-plus-4);
}
.padding-bottom-plus-5 {
  padding-bottom: var(--size-plus-5);
}

.padding-left-minus-4 {
  padding-left: var(--size-minus-4);
}
.padding-left-minus-3 {
  padding-left: var(--size-minus-3);
}
.padding-left-minus-2 {
  padding-left: var(--size-minus-2);
}
.padding-left-minus-1 {
  padding-left: var(--size-minus-1);
}
.padding-left-0 {
  padding-left: var(--size-0);
}
.padding-left-plus-1 {
  padding-left: var(--size-plus-1);
}
.padding-left-plus-2 {
  padding-left: var(--size-plus-2);
}
.padding-left-plus-3 {
  padding-left: var(--size-plus-3);
}
.padding-left-plus-4 {
  padding-left: var(--size-plus-4);
}
.padding-left-plus-5 {
  padding-left: var(--size-plus-5);
}

.padding-right-minus-4 {
  padding-right: var(--size-minus-4);
}
.padding-right-minus-3 {
  padding-right: var(--size-minus-3);
}
.padding-right-minus-2 {
  padding-right: var(--size-minus-2);
}
.padding-right-minus-1 {
  padding-right: var(--size-minus-1);
}
.padding-right-0 {
  padding-right: var(--size-0);
}
.padding-right-plus-1 {
  padding-right: var(--size-plus-1);
}
.padding-right-plus-2 {
  padding-right: var(--size-plus-2);
}
.padding-right-plus-3 {
  padding-right: var(--size-plus-3);
}
.padding-right-plus-4 {
  padding-right: var(--size-plus-4);
}
.padding-right-plus-5 {
  padding-right: var(--size-plus-5);
}

/* TYPOGRAPHY
-------------------------------------------------------*/

h1 {
  font-family: 'open-sans-bold', Helvetica, sans-serif;
  font-size: var(--size-plus-5);
  letter-spacing: 2px;
  line-height: 5.5rem;
  text-transform: uppercase;
}

h2 {
  font-family: 'open-sans-bold', Helvetica, sans-serif;
  font-size: var(--size-plus-4);
  letter-spacing: 1px;
  line-height: var(--size-plus-4);
  text-transform: uppercase;
}

h3, legend {
  font-family: 'open-sans-bold', Helvetica, sans-serif;
  font-size: var(--size-plus-3);
  line-height: 3.3rem;
}
h3 span, legend span {
  font-family: 'open-sans-light', Helvetica, sans-serif;
}

h4 {
  font-family: 'open-sans-regular', Helvetica, sans-serif;
  font-size: var(--size-plus-2);
  line-height: 2.5rem;
}

h5 {
  font-family: 'open-sans-bold', Helvetica, sans-serif;
  font-size: var(--size-0);
/*  line-height: 1rem;*/
}

h6, label, th {
  font-family: 'open-sans-bold', Helvetica, sans-serif;
  font-size: var(--size-minus-1);
  letter-spacing: 0.5px;
/*  line-height: 0.85rem;*/
  text-transform: uppercase;
}
h6 span, label span, th span {
  font-family: 'open-sans-light', Helvetica, sans-serif;
/*  font-size: 1rem;*/
/*  line-height: 1.5rem;*/
  text-transform: none;
}

.small-caps {
/*  font-size: 0.75em;*/
  line-height: var(--size-plus-1);
  text-transform: uppercase;
}

small {
  display: inline-block;
/*  font-size: 0.75em;*/
/*  line-height: 1.15em;*/
}

a {
  color: var(--secondary);
  font-family: 'open-sans-regular', Helvetica, sans-serif;
  text-decoration: none;
}
a:hover {
  color: var(--secondary-hover);
  cursor: pointer;
  text-decoration: underline;
}

i, em {
  font-family: 'open-sans-light-italic', Helvetica, sans-serif;
}

b, strong {
  font-family: 'open-sans-bold', Helvetica, sans-serif;
}

small {
  display: inline-block;
/*  font-size: 0.75em;*/
/*  line-height: 1.15em;*/
}

.note {
  color: var(--light-grey);
}

.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

article p,
article ul,
article ol,
article img {
  margin-bottom: var(--size-0);
}
article li {
  margin-bottom: var(--size-minus-3);
}

.error {
  color: var(--error);
}

.success {
  color: var(--success);
}

.warning {
  color: var(--warning);
}


/* FORMS
-------------------------------------------------------*/

fieldset {
  margin-bottom: 1rem;
}

fieldset:last-child {
  margin-bottom: 0;
}

fieldset label {
  display: block;
  line-height: 1rem;
  margin-bottom: 0.375rem;
}

input, textarea {
  line-height: 1.5rem;
  width: 100%;
  font-family: 'open-sans-light', Helvetica, sans-serif;
  border: 1px solid var(--light-grey);
  padding: 0.5rem 1rem 0.5rem;
  position: relative;
  background-color: var(--white);
  border-radius: 3px;
  display: inline-block;
  color: var(--black);
}

input:focus, textarea:focus {
  background-color: var(--white);
  border-color: var(--secondary);
  box-shadow: 0 0.5px 3px 3px var(--secondary);
  outline: none;
  z-index: 12;
}

input::placeholder, textarea::placeholder {
  color: var(--light-grey);
  font-family: 'open-sans-light-italic', Helvetica, sans-serif;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: var(--light-grey);
  font-family: 'open-sans-light-italic', Helvetica, sans-serif;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--light-grey);
  font-family: 'open-sans-light-italic', Helvetica, sans-serif;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: var(--light-grey);
  font-family: 'open-sans-light-italic', Helvetica, sans-serif;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: var(--light-grey);
  font-family: 'open-sans-light-italic', Helvetica, sans-serif;
}

input:disabled, input.disabled, textarea:disabled, textarea.disabled {
  color: var(--light-grey);
  cursor: not-allowed;
}

input[type=text] {
/*  height: 2.5rem;*/
}

label.inline-checkbox, label.inline-radio {
  align-items: flex-start;
  display: flex;
  font-family: 'open-sans-light', Helvetica, sans-serif;
  font-size: size-0;
  gap: var(--size-minus-2);
  letter-spacing: 0;
  line-height: var(--body-line-height);
  text-transform: none;
}

label.inline-checkbox:hover, label.inline-radio:hover {
  cursor: pointer;
}

label.inline-checkbox input, label.inline-radio input {
  margin-top: var(--size-minus-3);
}

label.inline-checkbox p, label.inline-radio p {
  font-size: var(--size-0);
  text-transform: none;
}

button, .button {
  line-height: var(--body-line-height);
  font-family: 'open-sans-regular', Helvetica, sans-serif;
  border: 1px solid var(--black);
  padding: var(--size-minus-2) var(--size-0) var(--size-minus-2);
  text-align: center;
  white-space: nowrap;
  position: relative;
  text-decoration: none;
  background-color: var(--white);
  border-radius: var(--border-radius);
  display: inline-block;
  color: var(--black);
}

button .fa-solid, button .fa-regular, .button .fa-solid, .button .fa-regular {
  font-size: 0.85em;
}

button:focus, .button:focus {
  box-shadow: 0 0.5px 3px 3px var(--secondary);
  outline: none;
  z-index: 12;
}

button:hover, .button:hover {
  background-color: var(--white);
  border-color: var(--secondary-hover);
  color: var(--secondary-hover);
  cursor: pointer;
  text-decoration: none;
}

button.knockout, .button.knockout {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--black);
}
button.knockout:hover, .button.knockout:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
}

button.primary, .button.primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
button.primary:hover, .button.primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(white);
}

button.secondary, .button.secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
}
button.secondary:hover, .button.secondary:hover {
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
  color: var(--white);
}

button:disabled, button.disabled, .button:disabled, .button.disabled {
  background-color: var(--light-grey);
  border-color: var(--light-grey);
  color: var(--white);
}

button:disabled:hover, button.disabled:hover, .button:disabled:hover, .button.disabled:hover {
  background-color: var(--light-grey);
  border-color: var(--light-grey);
  color: var(--white);
  cursor: not-allowed;
}

button.outline, .button.outline {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}
button.outline:hover, .button.outline:hover {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--black);
}

button.primary.outline, .button.primary.outline {
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
button.primary.outline:hover, .button.primary.outline:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--white);
}

button.secondary.outline, .button.secondary.outline {
  background-color: transparent;
  border-color: var(--secondary);
  color: var(--secondary);
}
button.secondary.outline:hover, .button.secondary.outline:hover {
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
  color: var(--white);
}

button.knockout.outline, .button.knockout.outline {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}
button.knockout.outline:hover, .button.knockout.outline:hover {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--black);
}

button.centered, .button.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 320px;
  text-align: center;
}

button.full-width, .button.full-width {
  max-width: 100%;
  width: 100%;
}

button.small, .button.small {
/*  height: 34px;*/
/*  line-height: 1rem;*/
  padding: var(--size-minus-4) var(--size-minus-1);
}

button.large, .button.large {
  font-size: var(--size-plus-1);
  letter-spacing: 1px;
  max-width: 450px;
  padding: var(--size-minus-1) var(--size-plus-1);
  text-transform: uppercase;
}

button.extra-large, .button.extra-large {
  font-family: 'open-sans-bold', Helvetica, sans-serif;
  font-size: var(--size-plus-2);
  letter-spacing: 1.5px;
  max-width: 450px;
  padding: var(--size-0) var(--size-plus-2);
  text-transform: uppercase;
}


/* LISTS
-------------------------------------------------------*/

article ul,
article li,
.bulleted-list li {
  position: relative;
}
article ul li:before,
.bulleted-list li:before {
  width: 4px;
  top: 10px;
  height: 4px;
  position: absolute;
  content: '';
  background-color: #231f20;
  border-radius: 50%;
  display: block;
  left: -8px;
}

article ol,
.ordered-list {
  list-style-type: decimal;
}

.indented {
  margin-left: 0.5rem;
}

.flex-list {
  display: flex;
  flex-direction: column;
}

/* MEDIA
-------------------------------------------------------*/

img, video {
  display: block;
  max-width: 100%;
}
.height-20 {
  max-height: 32px;
}

.object-fit-contain-container, .object-fit-cover-container {
  overflow: hidden;
  position: relative;
  object-position: center center;
}

.object-fit-contain-container.width-20, .object-fit-cover-container.width-20 {
  width: 20px;
  height: 20px;
}

.object-fit-contain-container img, .object-fit-cover-container img {
  width: 100%;
  height: 100%;
}

.object-fit-contain-container img {
  object-fit: contain;
}

.object-fit-cover-container img {
  object-fit: cover;
}

.browser-screenshot {
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  box-shadow: 0 0.5px 3px 3px var(--transparent-black-25);
}

/* MODALS
-------------------------------------------------------*/

.modal-background {
  align-items: center;
  background-color: var(--transparent-black-80);
  display: flex;
  flex-direction: row;
  justify-content: center;
  overflow: auto;
  padding: var(--size-plus-3);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  inset: 0;
  z-index: 13;
}
.modal-background.width-440 .modal {
  max-width: 440px;
}
.modal-background .modal {
  background-color: white;
  border: 1px solid var(--light-grey);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  max-width: 440px;
  position: relative;
  width: 100%;
}
.modal-background .container {
  width: 100%;
}
.modal-background .modal-header {
  border-bottom: 1px solid var(--light-grey);
  color: var(--black);
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: flex-end;
  padding: var(--size-minus-3) var(--size-0);
}
.modal-background .modal-header .fa-solid {
  display: inline-block;
}
.modal-background .modal-header .fa-solid:hover {
  color: var(--secondary-hover);
  cursor: pointer;
}
.modal-background .modal-body {
  padding: var(--size-0);
}
.modal-background .vertical-scroll {
  flex: 1 1 auto;
  width: 100%;
}


/* COMPONENTS
-------------------------------------------------------*/

.hero .container {
  max-width: 1800px;
  padding-left: var(--size-plus-2);
  padding-right: var(--size-plus-2);
}
.hero .column:first-child {
  align-items: center;
  display: flex;
  flex: 0 0 28rem;
}
.hero .column:first-child div {
  height: fit-content;
}
.hero img {
  position: absolute;
}

.hero-secondary {
  border-bottom: none;
  margin-bottom: -10rem;
  z-index: 1;
}
.hero-secondary .container {
  max-width: 1200px;
  padding: var(--size-plus-4);
}

.redacted-logos {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  gap: var(--size-plus-5);
  width: 100%;
}
.redacted-logos li {
/*  max-height: 100px;*/
  max-width: 33%;
}
.redacted-logos img {
  max-height: 100px;
}

.slick-container {
  width: 100%;
}
.slick-arrow {
  align-items: center;
  background-color: var(--white);
/*  border: 1px solid ;*/
  border-radius: 50%;
  display: flex;
  font-size: 0;
  justify-content: center;
  line-height: 0;
  padding: 0;
  width: var(--size-plus-2);
  height: var(--size-plus-2);
  position: absolute;
  top: 0;
  z-index: 1;
}
.slick-arrow:after {
  color: var(--black);
  font-size: var(--size-plus-1);
}
.slick-prev {
  top: calc(50% - 1.8125rem);
  left: -2.625rem;
}
.slick-prev:after {
  content: '❮';
  padding: 0 3px 1px 0;
}
.slick-next {
  top: calc(50% - 1.8125rem);
  right: -2.625rem;
}
.slick-next:after {
  content: '❯';
  padding: 0 0 1px 3px;
}
.slick-arrow:hover:after {
  color: var(--secondary);
}

.slick-container.screenshots img {
  border: 1px solid var(--light-grey);
  border-radius: 8px;
}

blockquote h3 {
  line-height: 3.6rem;
}

.container.width-860-scroll {
  max-width: 860px;
  overflow: auto;
  padding: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.container.width-860-scroll::-webkit-scrollbar {
  display: none;
}
.container.width-860-scroll img {
  max-width: 800px;
}

.bios {
  display: grid;
  gap: var(--size-plus-2);
  grid-template-columns: 1fr 1fr;
}

.posts,
.case-studies {
  display: grid;
  gap: var(--size-plus-2);
  grid-template-columns: 1fr 1fr 1fr;
}
.posts a,
.case-studies a {
  color: var(--black);
}
.posts a:hover,
.case-studies a:hover {
  text-decoration: none;
}
.posts a:hover img {
  opacity: 0.7;
}
.posts a:hover h4,
.posts a:hover p,
.case-studies a:hover h4,
.case-studies a:hover h6 {
  color: var(--secondary-hover);
}
.posts a:hover .button {
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
}
.posts .card {
  height: 540px;
}
.posts .object-fit-cover-container {
  height: 100%;
  max-height: 300px;
  width: 100%;
}
.posts h4 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.posts p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.case-studies .card {
  height: 100%;
}

.bios .card {
  height: 100%;
}

.headshot {
  border-radius: 50%;
  margin: auto;
  max-width: 200px;
}

.charts-3 {
  display: grid;
  gap: var(--size-plus-2);
  grid-template-columns: 1fr 1fr 1fr;
}

.hanging-icon {
  background-color: var(--white);
  border-radius: 50%;
  font-size: var(--size-plus-4);
  position: absolute;
  top: -2.3rem;
  left: calc(50% - 2rem);
}



/* RESPONSIVE
-------------------------------------------------------*/

@media screen and (max-width: 1300px) {
  .hero .column:first-child {
    flex: 0 0 19rem;
  }

  h1 {
    font-size: var(--size-plus-4);
    line-height: 4rem;
  }
}

@media screen and (max-width: 1100px) {
  .posts {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 1000px) {
  .hero .row {
    flex-direction: column;
  }
  .hero .column:first-child {
    flex: 0 1 auto;
  }
  .hero img {
    position: static;
  }

  h1 {
    font-size: var(--size-plus-5);
    line-height: 5.5rem;
  }
}

@media screen and (max-width: 950px) {
  .hamburger {
    display: block;
  }
  .hamburger:hover {
    color: var(--secondary);
    cursor: pointer;
  }
  nav {
    background-color: var(--white);
    border: 1px solid var(--light-grey);
    display: none;
    padding: var(--size-0);
    position: absolute;
    top: 58px;
    right: 0;
  }
  nav .inliner {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--size-minus-1);
  }
  nav.open {
    display: block;
  }

  .hero.margin-bottom-plus-6 {
    margin-bottom: var(--margin-bottom-plus-2);
  }

  button.extra-large, .button.extra-large {
    font-size: var(--size-plus-1);
  }
  blockquote h3 {
    font-size: var(--size-plus-2);
    line-height: 2.6rem;
  }
}

@media screen and (max-width: 900px) {
  .slick-slider.blockquote {
    margin: 0 auto;
    width: 90%;
  }
}

@media screen and (max-width: 800px) {
  .row {
    flex-direction: column;
  }

  .bios {
    grid-template-columns: 1fr 1fr;
  }

  .case-studies {
    grid-template-columns: 1fr 1fr;
  }

  .charts-3 {
    gap: var(--size-0);
  }

  article ul, article ol {
    margin-left: var(--size-0);
  }
}

@media screen and (max-width: 700px) {
  h2 {
    font-size: var(--size-plus-3);
    line-height: 2.75rem;
  }

  h3 {
    font-size: var(--size-plus-2);
    line-height: 2.3rem;
  }

  .redacted-logos {
    flex-direction: column;
    gap: var(--size-plus-4);
  }  

  .charts-3 {
    gap: var(--size-minus-1);
  }
}

@media screen and (max-width: 650px) {
  .posts {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  .bios {
    grid-template-columns: 1fr;
  }
  
  .case-studies {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 500px) {
  h1 {
    font-size: var(--size-plus-4);
    line-height: 4rem;
  }
}

/* FONTS
-------------------------------------------------------*/

@font-face {
  font-family: 'open-sans-light-italic';
  src: url('../fonts/open-sans-light-italic.woff2') format('woff2'),
      url('../fonts/open-sans-light-italic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-regular-italic';
  src: url('../fonts/open-sans-regular-italic.woff2') format('woff2'),
      url('../fonts/open-sans-regular-italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-light';
  src: url('../fonts/open-sans-light.woff2') format('woff2'),
      url('../fonts/open-sans-light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
/*  font-display: swap;*/
}

@font-face {
  font-family: 'open-sans-regular';
  src: url('../fonts/open-sans-regular.woff2') format('woff2'),
      url('../fonts/open-sans-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-semibold';
  src: url('../fonts/open-sans-semibold.woff2') format('woff2'),
      url('../fonts/open-sans-semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-semibold-italic';
  src: url('../fonts/open-sans-semibold-italic.woff2') format('woff2'),
      url('../fonts/open-sans-semibold-italic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-condensed-semibold';
  src: url('../fonts/open-sans-condensed-semibold.woff2') format('woff2'),
      url('../fonts/open-sans-condensed-semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-extrabold';
  src: url('../fonts/open-sans-extrabold.woff2') format('woff2'),
      url('../fonts/open-sans-extrabold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-extrabold-italic';
  src: url('../fonts/open-sans-extrabold-italic.woff2') format('woff2'),
      url('../fonts/open-sans-extrabold-italic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-condensed-regular';
  src: url('../fonts/open-sans-condensed-regular.woff2') format('woff2'),
      url('../fonts/open-sans-condensed-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-condensed-light-italic';
  src: url('../fonts/open-sans-condensed-light-italic.woff2') format('woff2'),
      url('open-sans-condensed-light-italic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-condensed-semibold-italic';
  src: url('open-sans-condensed-semibold-italic.woff2') format('woff2'),
      url('../fonts/open-sans-condensed-semibold-italic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-condensed-regualar-italic';
  src: url('../fonts/open-sans-condensed-regualar-italic.woff2') format('woff2'),
      url('../fonts/open-sans-condensed-regular-italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-condensed-bold';
  src: url('../fonts/open-sans-condensed-bold.woff2') format('woff2'),
      url('../fonts/open-sans-condensed-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-condensed-bold-italic';
  src: url('../fonts/open-sans-condensed-bold-italic.woff2') format('woff2'),
      url('../fonts/open-sans-condensed-bold-italic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-condensed-light';
  src: url('../fonts/open-sans-condensed-light.woff2') format('woff2'),
      url('../fonts/open-sans-condensed-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-condensed-extrabold';
  src: url('../fonts/open-sans-condensed-extrabold.woff2') format('woff2'),
      url('../fonts/open-sans-condensed-extrabold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-condensed-extrabold-italic';
  src: url('../fonts/open-sans-condensed-extrabold-italic.woff2') format('woff2'),
      url('../fonts/open-sans-condensed-extrabold-italic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-bold-italic';
  src: url('../fonts/open-sans-bold-italic.woff2') format('woff2'),
      url('../fonts/open-sans-bold-italic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans-bold';
  src: url('../fonts/open-sans-bold.woff2') format('woff2'),
      url('../fonts/open-sans-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}