/* ============================================================
  Resets/normalizing files.
  ============================================================ */
/* ============================================================
  Preprocessors, fonts, variables.
  These ITCSS naming conventions and structure are inspired by Lindsay Grizzard's article on Medium: https://medium.com/gusto-design/creating-the-perfect-css-system-fa38f5bcdd9e
  ============================================================ */
/* ============================================================
  Vendor-specific styles.
  ============================================================ */
/* ============================================================
  Breakpoints
  ============================================================ */
/* ============================================================
  Colors
  ============================================================ */
/* Opacity Mixin for background color only */
/* ============================================================
  Styles for fonts/typefaces.
  ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;500;700&display=swap");
/* ============================================================
  Placeholders for repeat styles.
  ============================================================ */
.layout-container, .section-padded {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 1em; }
  @media (min-width: 1025px) {
    .layout-container, .section-padded {
      padding: 2em; } }
  @media (min-width: 1440px) {
    .layout-container, .section-padded {
      padding: 2em 0; } }


.nomargin {
  margin: 0 !important; }


.nopadding {
  padding: 0 !important; }


.nospacing {
  margin: 0 !important;
  padding: 0 !important; }

.hideClass {
  display: none; }

.showClass {
  display: block; }

::placeholder {
  color: #404040;
  opacity: 1;
  font-family: "Red Hat Text", sans-serif !important;
  font-size: 1.125rem; }

/* ============================================================
  Styles for layout structure, including a column system!
  ============================================================ */
.not-found .layout-container {
  margin: 0 3rem; }

.layout-container .content-top {
  margin: 0 0 1.5rem;
  position: relative; }

@media (min-width: 768px) {
  .layout-container .layout-content.left-sidebar {
    margin: 0 0 0 1rem; } }

@media (min-width: 1025px) {
  .layout-container .layout-content.left-sidebar {
    max-width: 800px;
    margin: 0 0 0 1.5rem; } }

@media (min-width: 1280px) {
  .layout-container .layout-content.left-sidebar {
    margin: 0 0 0 2.5rem; } }

@media (min-width: 768px) {
  .layout-container .layout-content.right-sidebar {
    margin: 0 1rem 0 0; } }

@media (min-width: 1025px) {
  .layout-container .layout-content.right-sidebar {
    max-width: 800px;
    margin: 0 1.5rem 0 0; } }

@media (min-width: 1280px) {
  .layout-container .layout-content.right-sidebar {
    margin: 0 2.5rem 0 0; } }

.layout-container .layout-sidebar-first,
.layout-container .layout-sidebar-second {
  z-index: 1; }

.section-full {
  margin: 0 auto;
  padding: 0 1em; }
  @media (min-width: 1025px) {
    .section-full {
      padding: 0; } }

.section-padded {
  margin: 1rem;
  padding: 0; }
  @media (min-width: 1440px) {
    .section-padded {
      margin: 2rem auto; } }
  .section-full > .section-padded,
  .section-full > .layout__region--content > .section-padded {
    padding: 1rem 0; }
    @media (min-width: 1440px) {
      .section-full > .section-padded,
      .section-full > .layout__region--content > .section-padded {
        padding: 2rem 0; } }

.row {
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap; }
  @media (min-width: 768px) {
    .row {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between; }
      .row.no-justify {
        justify-content: flex-start; } }
  .row .col {
    flex: 1; }
    .row .col.percent-25 {
      flex: 0 0 auto;
      margin: 2rem 0 0;
      order: 1;
      width: 100%; }
      @media (min-width: 1025px) {
        .row .col.percent-25 {
          flex: 0 0 auto;
          margin: 0 1rem 2rem;
          order: 0;
          width: calc(25% - 0.75rem);
          min-width: 23%; } }
      @media (min-width: 1280px) {
        .row .col.percent-25 {
          flex: 0 0 auto;
          margin: 0 3rem 0 0; }
          .row .col.percent-25:nth-child(4n) {
            margin: 0; } }
      @media (min-width: 1025px) {
        .row .col.percent-25.layout-sidebar-second {
          margin: 0 0 0 2rem; } }
      @media (min-width: 1280px) {
        .row .col.percent-25.layout-sidebar-second {
          margin: 0 0 0 3rem; } }
    .row .col.percent-33 {
      flex: 0 0 auto;
      margin: 2rem 0 0;
      width: 100%; }
      @media (min-width: 1025px) {
        .row .col.percent-33 {
          flex: 0 0 auto;
          margin: 0;
          width: calc(33% - 0.75rem);
          min-width: 32%; } }
      @media (min-width: 1025px) {
        .row .col.percent-33.layout-sidebar-second {
          margin: 0 0 0 2rem; } }
      @media (min-width: 1280px) {
        .row .col.percent-33.layout-sidebar-second {
          margin: 0 0 0 3rem; } }
    .row .col.percent-50 {
      flex: 0 0 auto;
      width: 100%; }
      @media (min-width: 1025px) {
        .row .col.percent-50 {
          flex: 0 0 auto;
          width: calc(50% - 1rem); } }
      @media (min-width: 768px) {
        .row .col.percent-50.med-grid {
          flex: 0 0 auto;
          width: calc(50% - 1rem); } }

.half {
  width: 50%;
  margin: 0 auto; }

aside a,
aside p {
  margin: 0; }

aside a :active {
  border-left: 2px solid #4a5978;
  font-weight: 600; }

aside h1,
aside h2,
aside h3,
aside h4 {
  margin-bottom: 0;
  color: #404040; }

/* ============================================================
  Reset styles.
  ============================================================ */
* {
  box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: auto; }

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-family: "Red Hat Text", sans-serif;
  color: #404040; }

button {
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  font-family: "Red Hat Text", sans-serif;
  font-size: 1rem; }

ul,
ol {
  margin: 0;
  padding: 0; }
  ul li,
  ol li {
    list-style: none; }

/*# sourceMappingURL=generic.css.map */