@charset "utf-8";

/* <HOME HEADER> */

#home {
  --color-nav-link: white;
}

/* <FOOTER> */

.footer__main-content {
  flex-shrink: 0;
}

.footer__container {
  align-items: center;
}

.footer__social-media {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  /*align-self: center;*/
  margin-left: 0 var(--gutter-medium);
}

.footer__social-media a {
  max-width: 30px;
  max-height: 30px;
  padding: 0;
}

.footer__social-media a:not(:last-child) {
  margin-right: var(--gutter-medium);
}

.footer__social-media a img {
  width: 100%;
  height: 100%;
  padding: 0;
}

@media all and (max-width: 507px) {
  .footer__main-content {
    display: none;
  }

  .footer__explore {
    flex-direction: column;
  }
}

.footer__about {
  background-color: var(--color-highlight-halo);
}

.footer__about-container > div > :first-child {
  margin-top: 0;
}

.footer__about-container > div > :last-child {
  margin-bottom: 0;
}

@media all and (max-width: 920px) {
  .footer__about .side-by-side .image {
    display: none;
  }
}

/* <FORMS> */

#login__form button.highlight {
  margin-top: var(--gutter-thin);
}

/* For thin horizontal logos */
/*
.form__logo {
	width: 200px;
	margin-bottom: var(--gutter-medium);
}
*/

/* <VERIFY EMAIL> */

body#verify-email {
  text-align: center;
}

.verify-email__notification-logo {
  width: 125px;
  margin: var(--gutter-default) 0;
}

.verify-email__resend-verification {
  font-size: var(--text-size-medium);
}

/* <CONTACT> */

.contact__help-message {
  padding: 0 var(--gutter-default);
}

.contact__help-message > * {
  margin: 0;
}

.contact__help-message > * > :first-child {
  margin-top: 0;
}

/* Admin */

.admin-contact__message {
  padding: var(--gutter-thin);
}

.admin-contact__message > :first-child {
  margin-top: 0;
}

.admin-contact__message > :last-child {
  margin-bottom: 0;
}

.admin-contact__message:hover {
  background-color: var(--color-text-xxxxxlight);
}

.admin-contact__message:hover .wrapped::after {
  background-image: linear-gradient(
    to top,
    var(--color-text-xxxxxlight),
    rgba(255, 255, 255, 0)
  );
}

.admin-contact__message-date {
  text-align: right;
}

.admin-contact__message-body {
  position: relative;
}

.admin-contact__message-delete {
  text-align: right;
}

.admin-contact__message-delete > a {
  color: var(--color-invalid);
  font-size: var(--text-size-small);
}

/* Up to to 920px */
@media all and (max-width: 920px) {
  /* Mimic section.side-by-side form */
  .contact__help-message {
    padding-left: 0;
    padding-right: 0;
  }
}

/* <ADMIN> */

#admin__disk-usage {
  font-size: var(--text-size-small);
}

/* <UPLOAD> */

#upload__form input[type="file"] {
  display: none;
}

#upload__uploads {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

#upload__uploads > * {
  width: 25%;
  padding: 2px;
  cursor: pointer;
}

@media all {
  #upload__uploads > * {
    width: calc(100% / 3);
  }
}

/* <CATEGORIES> */

#blog-categories__interface > div {
  margin-top: var(--gutter-default);
}

#blog-categories__interface input {
  width: 100%;
  margin-bottom: 0;
}

.blog-categories__delete-category {
  margin: 0;
  text-align: right;
}

.blog-categories__delete-category > a {
  color: var(--color-invalid);
  font-size: var(--text-size-small);
}

#blog-categories__add-category {
  margin: var(--gutter-medium) 0 var(--gutter-default) 0;
}

#blog-categories__interface:empty + #blog-categories__add-category {
  margin-top: 0;
}

/* <ANALYTICS> */

body#admin-analytics .analytics__toolbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gutter-medium);
}

/* Segmented group toggle: Content / Admin / API. */
body#admin-analytics .analytics__group-toggle {
  display: inline-flex;
  padding: 3px;
  background-color: var(--color-text-xxxxxxlight);
  border-radius: var(--border-radius-medium);
}

body#admin-analytics .analytics__group-toggle a {
  padding: var(--gutter-thin) var(--gutter-default);
  border-radius: var(--border-radius-medium);
  color: var(--color-text-light);
  font-size: var(--text-size-default);
  text-decoration: none;
}

body#admin-analytics .analytics__group-toggle a.is-active {
  background-color: var(--color-highlight);
  color: white;
}

/* KPI stat tiles. */
body#admin-analytics .analytics__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter-thin);
  margin: var(--gutter-default) 0 var(--gutter-big) 0;
}

@media all and (max-width: 800px) {
  body#admin-analytics .analytics__kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

body#admin-analytics .analytics__kpi {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-xthin);
  padding: var(--gutter-default);
  background-color: var(--color-text-xxxxxxlight);
  border-radius: var(--border-radius-medium);
}

body#admin-analytics .analytics__kpi-title {
  font-size: var(--text-size-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-xlight);
}

body#admin-analytics .analytics__kpi-value {
  font-size: var(--text-size-xbig);
  line-height: var(--line-height-default);
  color: var(--color-text-dark);
}

body#admin-analytics .analytics__kpi-value--up {
  color: var(--color-valid);
}

body#admin-analytics .analytics__kpi-value--down {
  color: var(--color-invalid);
}

body#admin-analytics .analytics__kpi-sub {
  font-size: var(--text-size-small);
  color: var(--color-text-xxlight);
}

/* Sitewide chart. */
body#admin-analytics .analytics__chart-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gutter-medium);
}

body#admin-analytics .analytics__chart-scope {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gutter-medium);
  font-size: var(--text-size-small);
}

body#admin-analytics .analytics__outlier-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gutter-thin);
  cursor: pointer;
  color: var(--color-text-light);
}

/* Sliding on/off switch (native checkbox is display:none via Goji inputs.css). */
body#admin-analytics .analytics__switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background-color: var(--color-text-xxxxlight);
  transition: background-color var(--transition-duration-default) ease;
}

body#admin-analytics .analytics__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: white;
  transition: transform var(--transition-duration-default) ease;
}

body#admin-analytics #analytics__hide-outliers:checked + .analytics__switch {
  background-color: var(--color-highlight);
}

body#admin-analytics
  #analytics__hide-outliers:checked
  + .analytics__switch::after {
  transform: translateX(14px);
}

body#admin-analytics #analytics__scope {
  color: var(--color-text-light);
}

body#admin-analytics .analytics__chart-container {
  position: relative;
  height: 360px;
  margin-bottom: var(--gutter-big);
}

/* Ranked pages list with proportional bars (bar width = views vs #1). */
body#admin-analytics .analytics__top-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gutter-xthin);
}

body#admin-analytics .analytics__top-page {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gutter-medium);
  width: 100%;
  padding: var(--gutter-thin) var(--gutter-medium);
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  border-radius: var(--border-radius-default);
  color: var(--color-text-default);
  font-family: inherit;
  font-size: var(--text-size-default);
}

body#admin-analytics .analytics__top-page-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--bar, 0%);
  background-color: var(--color-highlight-halo);
  border-radius: var(--border-radius-default);
  z-index: 0;
}

body#admin-analytics .analytics__top-page-label,
body#admin-analytics .analytics__top-page-count {
  position: relative;
  z-index: 1;
}

body#admin-analytics .analytics__top-page-path {
  margin-left: var(--gutter-thin);
  color: var(--color-text-xxlight);
  font-size: var(--text-size-small);
}

body#admin-analytics .analytics__top-page-count {
  margin-left: auto;
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
}

body#admin-analytics .analytics__top-page:hover {
  box-shadow: none; /* override the global button hover shadow */
  color: var(--color-text-default);
}

body#admin-analytics .analytics__top-page:hover .analytics__top-page-bar,
body#admin-analytics .analytics__top-page.is-active .analytics__top-page-bar {
  background-color: var(--color-highlight);
}

body#admin-analytics .analytics__top-page.is-active {
  font-weight: 700;
}

body#admin-analytics .analytics__empty {
  list-style: none;
  padding: var(--gutter-thin) var(--gutter-medium);
  color: var(--color-text-light);
}

body#admin-analytics .analytics__back {
  margin-top: var(--gutter-big);
}

/* <PRIVACY & TERMS> */

body#privacy-and-terms {
  counter-reset: h1; /********************/
}
body#privacy-and-terms h1 {
  counter-reset: h2;
  counter-increment: h1;
}
body#privacy-and-terms h2 {
  counter-reset: h3;
  counter-increment: h2;
}
body#privacy-and-terms h3 {
  counter-reset: h4;
  counter-increment: h3;
}
body#privacy-and-terms h4 {
  counter-reset: h5;
  counter-increment: h4;
}
body#privacy-and-terms h5 {
  counter-reset: h6;
  counter-increment: h5;
}
body#privacy-and-terms h6 {
  /****************/
  counter-increment: h6;
}

/*body#privacy-and-terms h1::before { content: counter(h1, upper-roman) ". "; }*/
/*body#privacy-and-terms h2::before { content: counter(h2, upper-alpha) ". "; }*/
body#privacy-and-terms h3::before {
  content: counter(h3, decimal) ". ";
}
body#privacy-and-terms h4::before {
  content: counter(h4, lower-alpha) ". ";
}
body#privacy-and-terms h5::before {
  content: counter(h5, lower-roman) ". ";
}
body#privacy-and-terms h6::before {
  content: "(" counter(h6, lower-alpha) ") ";
}

body#privacy-and-terms ol li {
  list-style-type: none; /*upper-roman;*/
}
body#privacy-and-terms ol li ol li {
  list-style-type: decimal; /*upper-alpha;*/
}
body#privacy-and-terms ol li ol li ol li {
  list-style-type: lower-alpha; /*decimal;*/
}
body#privacy-and-terms ol li ol li ol li ol li {
  list-style-type: lower-roman; /*lower-alpha;*/
}
body#privacy-and-terms ol li ol li ol li ol li ol li {
  list-style-type: lower-alpha; /*lower-roman;*/
}

body#privacy-and-terms .outline {
  padding-left: 0;
}

/* <HOME> */

body#home .header__wrapper {
  height: calc(100vh - var(--gutter-big));
  min-height: var(--header-height);
  max-height: 750px;
  position: relative;
}

.header__wrapper > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  z-index: -1;
  background-color: #474f59;
}

.header__home-hero {
  width: 100%;
  /*max-width: 1440px;*/
  /*margin: auto;*/
  height: calc(100% - var(--header-height));
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding: var(--gutter-default);
}

@media all and (max-width: 700px) {
  .header__home-hero {
    height: calc(100% - var(--header-height-alt));
  }
}

.header__home-hero-headline {
  margin: 0 0 var(--gutter-xthin) 0;
  font-size: var(--text-size-xhuge);
  mix-blend-mode: difference;
  color: var(--color-highlight);
}

.header__home-hero-cta {
  margin: 0;
}

.header__home-hero > img {
  max-width: 50px;
  flex-shrink: 0;
}

/*.header__home-hero-cta > .call-to-action__wrapper {*/
/*	!* When there's text before the button. *!*/
/*	margin-left: var(--gutter-thin);*/
/*}*/

@media all and (max-width: 750px) {
  /*.header__home-hero {*/
  /*	justify-content: center;*/
  /*	align-items: center;*/
  /*}*/

  /*.header__home-hero > img {*/
  /*	display: none;*/
  /*}*/

  .header__home-hero-headline {
    font-size: var(--text-size-huge);
    /*text-align: center;*/
  }

  /*.header__home-hero-cta {*/
  /*	text-align: center;*/
  /*}*/

  .header__home-hero-cta > .call-to-action__wrapper {
    display: block;
    margin-top: var(--gutter-medium);
  }
}

@media all and (max-width: 550px) {
  .header__home-hero-headline {
    font-size: var(--text-size-xxbig);
    /*text-align: center;*/
  }
}

/* <ABOUT> */

body#about .side-by-side {
  margin-bottom: var(--gutter-big);
}

body#about h1 {
  text-transform: uppercase;
  margin-top: var(--gutter-default);
  margin-bottom: var(--gutter-default);
  font-size: var(--text-size-xhuge);
}

@media all and (max-width: 750px) {
  body#about h1 {
    font-size: var(--text-size-huge);
  }
}

.about__slider {
  margin-top: var(--gutter-big);
  margin-bottom: var(--gutter-big);
}

/* <TESTIMONIALS> */

.testimonials__testimonials img,
.testimonials__testimonials video,
.testimonials__testimonials .gallery_image {
  cursor: pointer;
}

/* <BLOG> */

#blog__blog-posts-list-container {
  max-width: 1200px;
  margin: auto;
}

#blog__blog-posts-list {
  display: grid;
  grid-gap: var(--gutter-default);
}

#blog__blog-posts-list.empty {
  display: block;
  text-align: center;
}

@media all and (min-width: 1001px) {
  #blog__blog-posts-list {
    grid-template-columns: repeat(3, 1fr);
  }

  #blog__blog-posts-list > div:nth-child(1) {
    grid-row: 1 / span 2;
  }

  #blog__blog-posts-list > div:nth-child(7) {
    grid-column: 2 / span 2;
  }
}

@media all and (max-width: 1000px) {
  #blog__blog-posts-list-container {
    /* section.text */
    max-width: 800px;
    padding-right: 5%;
  }

  #blog__blog-posts-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media all and (max-width: 670px) {
  #blog__blog-posts-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media all and (max-width: 375px) {
  #blog__blog-posts-list-container {
    /* section.text */
    padding: var(--gutter-medium);
  }

  #blog__blog-posts-list {
    grid-gap: var(--gutter-medium);
  }
}

#blog__blog-posts-list > div {
  padding: var(--gutter-default);
  background-size: cover;
  background-position: center center;
}

#blog__blog-posts-list > div:nth-child(even) {
  background-color: var(--color-grey-xxxxlight);
}

#blog__blog-posts-list > div:nth-child(odd) {
  background-color: var(--color-grey-xxxlight);
}

#blog__blog-posts-list > div hr {
  display: none;
}

/* <FUNNEL> */

.vsl__step-two-text > .call-to-action__wrapper {
  text-align: center;
}