@import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Muli:400,600&display=swap');

@media (max-width: 996px) {
  .center-if-sm {
    text-align: center;
  }
}

:root {
  --black: #000;
  --bright-cyan-50: rgba(63, 196, 254, 0.2);
  --bright-cyan: #3fc4fe;
  --dark-blue-grey: #211b50;
  --dark-slate-blue: #2d2665;
  --dodger-blue-10: rgba(63, 187, 254, 0.1);
  --dodger-blue: #3fbbfe;
  --dusk-blue: #412a94;
  --greenblue-10: rgba(31, 216, 152, 0.1);
  --greenblue: #1fd898;
  --greyish-brown: #474747;
  --pale-grey: #e8e6f5;
  --periwinkle-50: rgba(136, 89, 255, 0.2);
  --periwinkle: #8759ff;
  --sea-green-50: rgba(66, 255, 172, 0.2);
  --sea-green: #42ffac;
  --white: #fff;

  --uni-background-color: var(--white);
  --uni-heading-color: var(--dusk-blue);
  --uni-heading-helper-color: var(--dusk-blue);
  --uni-hero-bgcolor: var(--dark-blue-grey);
  --uni-oval-background-color: var(--white);
  --uni-oval-shadow-color: var(--pale-grey);
  --uni-testimonial-text-color: var(--greyish-brown);

  --ifm-button-color: var(--white);
}

:root[data-theme='dark'] {
  --uni-background-color: var(--ifm-background-color);
  --uni-heading-color: var(--ifm-font-base-color);
  --uni-heading-helper-color: var(--ifm-font-base-color);
  --uni-oval-shadow-color: var(--black);
  --uni-testimonial-text-color: var(--ifm-font-base-color);
}

.padding {
  padding-top: 2em;
}

.landing table thead {
  color: var(--black);
  background-attachment: fixed;
  background-image: linear-gradient(
    to right,
    var(--periwinkle),
    var(--bright-cyan),
    var(--sea-green)
  );
}

.landing table thead tr th {
  width: 15%;
}

.landing table thead tr th a {
  color: inherit;
}

.landing table thead tr th:first-child {
  width: 30%;
}

.landing table tr td {
  background-color: var(--dark-slate-blue);
  color: var(--white);
}

.landing table tr td:first-child,
.landing table tr th:first-child {
  padding-left: 4em;
}

.landing table tr td > img {
  width: 1em;
}

.landing tr:nth-child(odd) td {
  background-color: var(--dark-blue-grey);
}

.landing ul {
  padding: 0;
  opacity: 0.7;
  font-family: Muli;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.33;
}

.landing ul li {
  list-style: none;
  position: relative;
  padding-left: 1em;
  margin-bottom: 1em;
}

.landing ul li::before {
  content: '';
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: var(--ifm-font-base-color);
}

.landing :global .hero.hero--primary {
  --ifm-hero-background-color: var(--dark-blue-grey);
}

.overflow-hidden {
  overflow: hidden;
}

.landing .section-content :global .row {
  position: relative;
}

@media (min-width: 997px) {
  .landing :global .section {
    margin-top: 4em;
  }
}

.landing :global .hero .container {
  margin-top: 0em;
  margin-bottom: 0em;
}

.landing :global .container {
  margin-top: 4em;
  margin-bottom: 4em;
}

@media (max-width: 996px) {
  .landing :global .col {
    margin-bottom: 2em;
  }
  .landing :global .col:last-of-type {
    margin-bottom: 0;
  }
}

.gitter {
  margin-top: 0 !important;
}

.floating-example {
  position: relative;
}

@media (max-width: 996px) {
  .floating-example > *:first-child {
    margin-bottom: 4em;
  }
  .floating-example .system-window {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 997px) {
  .floating-example > div:last-child {
    position: absolute;
    top: 12.5%;
    left: 40%;
  }
}

.system-window {
  width: 80%;
  padding: 0;
  border-radius: 1em;
  overflow: hidden;
  background: rgb(33, 27, 80);
}

.system-window iframe {
  border-radius: unset;
}

.system-window pre {
  margin: 0;
  background: none !important;
}

.system-top-bar {
  background-image: linear-gradient(
    to right,
    var(--periwinkle-50),
    var(--bright-cyan-50) 90%,
    var(--sea-green-50)
  );
  padding: 0.25em 1em;
}

.system-top-bar-circle {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.3em;
  border-radius: 50%;
  filter: brightness(100%);
}

.showcase-card {
  padding: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
}

@media (min-width: 997px) {
  .showcase-card {
    flex-direction: column;
  }
}

.showcase-card img {
  height: 4em;
  margin: 1em;
}

.showcase-card p {
  display: block;
  margin-left: 1em;
}

.footer li {
  color: var(--white);
}

.footer .bullets {
  color: var(--white);
}

.footer .bullets li::before {
  background-color: var(--dodger-blue);
}

.footer .offset-column {
  margin-left: 2em !important;
}

.simple-yet-powerful-text {
  margin-left: -5em;
  margin-top: -8em;
}

.fully-customizable-text {
  margin-right: -5em;
  margin-top: -8em;
}

.reverse-wrap {
  flex-wrap: wrap-reverse;
}

.example + .example {
  margin-bottom: 4em;
}

@media (min-width: 997px) {
  .example {
    margin: 16em 0 !important;
  }
  .example + .example {
    margin-bottom: 0 !important;
  }
}

.preview-border {
  box-shadow: 0 6px 58px 0 var(--uni-box-shadow-color);
  border: solid 1px var(--uni-border-color);
}

.preview {
  position: relative;
  background-color: var(--uni-background-color);
  padding: 2em;
}

@media (max-width: 500px) {
  .preview {
    padding: 1em;
  }
}

.solid-border-box {
  border: solid 6px var(--uni-border-color);
  padding: 4em;
}

@media (max-width: 996px) {
  .solid-border-box {
    margin: 4em 0;
  }
}

@media (max-width: 400px) {
  .solid-border-box {
    padding: 4em 1em;
  }
}

.green-accent {
  --uni-border-color: var(--greenblue);
  --uni-box-shadow-color: var(--greenblue-10);
  --ifm-menu-color-active: var(--uni-border-color);
}

.blue-accent {
  --uni-border-color: var(--dodger-blue);
  --uni-box-shadow-color: var(--dodger-blue-10);
  --ifm-menu-color-active: var(--uni-border-color);
}

.grid3x3 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  text-align: center;
  height: 100%;
  padding: 4em 0;
}

.item3x3 {
  width: 33%;
  align-self: center;
  padding: 1.5em 1em;
}

.company {
  width: 100%;
  transition: 0.2s filter;
}

.company:hover {
  filter: none;
}

.border-dashed {
  border: 2px dashed var(--pale-grey);
}

.border-gradient {
  border-style: solid;
  border-width: 6px;
  border-image-source: linear-gradient(
    var(--uni-border-gradient-degrees),
    var(--periwinkle),
    var(--bright-cyan) 51%,
    var(--sea-green)
  );
  border-image-slice: 1;
}

.border-disable-top-right {
  --uni-border-gradient-degrees: 41deg;
  border-top: 0;
  border-right: 0;
}

.border-disable-bottom-left {
  --uni-border-gradient-degrees: 221deg;
  border-bottom: 0;
  border-left: 0;
}

.testimonials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.testimonial {
  margin: 2em;
  background: var(--ifm-background-surface-color);
}

.testimonial-content {
  max-width: 320px;
  height: 100%;
  padding: 4em 2em;
}

.testimonial-description::before {
  content: '„';
}

.testimonial-description::after {
  content: '”';
}

.section-heading {
  margin: 1.5em 0;
}

.section-bgwhite {
  color: var(--ifm-font-base-color);
}

.section-bgwhite-block {
  position: absolute;
  width: 200%;
  height: 100%;
  top: 0;
  left: 0;
}

.section-bgwhite-block-left {
  background: var(--white);
  margin-left: -100%;
}

.section-bgwhite-block-right {
  background: var(--uni-background-color);
  margin-right: -100%;
}

@media (min-width: 997px) {
  .section-bgwhite-block-left,
  .section-bgwhite-block-right {
    height: 200%;
  }
}

.section-content {
  position: relative;
  padding: 0 4em !important;
}

.section-content.logos {
  padding-left: unset !important;
}

@media (max-width: 996px) {
  .section-content,
  .section-content.logos {
    margin-top: 0;
    padding: 4em !important;
  }
}

@media (max-width: 400px) {
  .section-content {
    margin-top: 0;
    padding: 0 1em !important;
  }
}

.fluid {
  padding: 8em 0;
}

.whyus {
  --ifm-hero-background-color: var(--dusk-blue) !important;
  color: black;
}

.oval {
  display: inline-block;
  width: 64px;
  height: 64px;
  padding: 20px;
  border-radius: 50%;
  box-shadow: 0 8px 23px 0 var(--uni-oval-shadow-color);
  background-color: var(--uni-oval-background-color);
}

.oval.white {
  background-color: var(--white);
  width: 100px;
  height: 100px;
}

.top-right-corner {
  position: absolute;
  right: 0;
  transform: translate(45%, -45%);
}

.badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.badge-number {
  font-size: 3em;
  font-weight: bold;
}

.badge {
  position: relative;
  height: 170px;
  width: 260px;
  margin: 2em;
}

.badge-image {
  position: absolute;
  display: block;
}

.badge-centered {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.call-to-action {
  --ifm-button-background-color: var(--periwinkle) !important;
  --ifm-button-border-color: var(--periwinkle) !important;
  --ifm-color-primary-darker: var(--bright-cyan) !important;
  margin-top: 4em;
  border-radius: 2em;
  min-width: 240px;
}

.theme-icon {
  width: 40px;
  height: 40px;
  margin-right: 25px;
  display: inline-block;
}

.theme-icon:last-child {
  margin-right: 0;
}

.section {
  margin-bottom: 8em;
}

.text {
  font-family: Poppins, sans-serif;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  line-height: normal;
  color: var(--ifm-font-base-color);
}

.text-big {
  font-size: 1.5em;
  font-weight: bold;
}

.text-huge {
  font-size: 2.5em;
  font-weight: bold;
  line-height: 1.25;
}

.text.heading-helper {
  color: var(--uni-heading-helper-color);
  font-family: Muli;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 1px;
  opacity: 0.6;
}

.heading {
  color: var(--uni-heading-color);
  font-family: Poppins;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.31;
  margin-bottom: 2em;
}

.heading-white {
  --uni-heading-color: var(--white);
}

.text.emphasis {
  color: var(--dodger-blue);
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.42;
}

.text.paragraph {
  color: var(--white);
  font-family: Muli;
  font-size: 1em;
  line-height: 1.75;
  margin-bottom: 0.8em;
  opacity: 0.8;
}

.text.section-subtitle {
  color: var(--white);
  font-family: Muli;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 1px;
  opacity: 0.6;
}

.text.footer-heading {
  color: var(--dodger-blue);
  font-family: Muli;
  font-size: 18px;
  font-weight: 600;
}

.supported {
  color: var(--white);
  font-family: Muli;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 2;
  margin-top: 3em;
  opacity: 0.6;
}

.title {
  color: var(--white);
  display: block;
}

.description {
  color: var(--bright-cyan);
  display: block;
  margin: 24px 0;
}

@supports (background-clip: text) {
  .description {
    background-image: linear-gradient(
      81deg,
      var(--periwinkle),
      var(--bright-cyan),
      var(--sea-green)
    );
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.text.testimonial-description {
  color: var(--uni-testimonial-text-color);
  font-family: Muli;
  font-size: 1em;
  line-height: 1.75;
  opacity: 0.8;
  text-align: center;
}

.bullets {
  color: var(--white);
}

.bullets li {
  margin-bottom: 0;
}

.bullets li::before {
  background-color: var(--periwinkle) !important;
}

.vazco {
  margin-top: 2em;
}
