*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.top-0 {
  top: 0px;
}

.top-\[-20px\] {
  top: -20px;
}

.top-\[-25px\] {
  top: -25px;
}

.top-\[100px\] {
  top: 100px;
}

.top-\[10vh\] {
  top: 10vh;
}

.top-\[20vh\] {
  top: 20vh;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[50\] {
  z-index: 50;
}

.z-\[99\] {
  z-index: 99;
}

.m-0 {
  margin: 0px;
}

.m-6 {
  margin: 1.5rem;
}

.m-auto {
  margin: auto;
}

.mx-12 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-24 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.-mr-2 {
  margin-right: -0.5rem;
}

.-mt-8 {
  margin-top: -2rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.mb-24 {
  margin-bottom: 6rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-44 {
  margin-bottom: 11rem;
}

.mb-48 {
  margin-bottom: 12rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-72 {
  margin-bottom: 18rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-\[10rem\] {
  margin-bottom: 10rem;
}

.mb-\[22rem\] {
  margin-bottom: 22rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-20 {
  margin-top: 5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-\[200px\] {
  margin-top: 200px;
}

.mt-auto {
  margin-top: auto;
}

.mb-32 {
  margin-bottom: 8rem;
}

.mb-36 {
  margin-bottom: 9rem;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-60 {
  height: 15rem;
}

.h-\[20vw\] {
  height: 20vw;
}

.h-\[6\.5rem\] {
  height: 6.5rem;
}

.h-full {
  height: 100%;
}

.max-h-\[130px\] {
  max-height: 130px;
}

.max-h-\[300px\] {
  max-height: 300px;
}

.max-h-full {
  max-height: 100%;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[250px\] {
  min-height: 250px;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-\[300px\] {
  width: 300px;
}

.w-\[500px\] {
  width: 500px;
}

.w-\[800px\] {
  width: 800px;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.min-w-\[340px\] {
  min-width: 340px;
}

.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}

.max-w-\[2000px\] {
  max-width: 2000px;
}

.max-w-\[350px\] {
  max-width: 350px;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-full {
  max-width: 100%;
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize {
  resize: both;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

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

.place-items-center {
  place-items: center;
}

.content-center {
  align-content: center;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.gap-12 {
  gap: 3rem;
}

.gap-16 {
  gap: 4rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.divide-x-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(0px * var(--tw-divide-x-reverse));
  border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-solid > :not([hidden]) ~ :not([hidden]) {
  border-style: solid;
}

.divide-\[\#ffffff1f\] > :not([hidden]) ~ :not([hidden]) {
  border-color: #ffffff1f;
}

.overflow-hidden {
  overflow: hidden;
}

.text-balance {
  text-wrap: balance;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-b-\[5px\] {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.rounded-t-\[5px\] {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-solid {
  border-style: solid;
}

.border-\[\#626262\] {
  --tw-border-opacity: 1;
  border-color: rgb(98 98 98 / var(--tw-border-opacity));
}

.border-\[\#c7c7c7\] {
  --tw-border-opacity: 1;
  border-color: rgb(199 199 199 / var(--tw-border-opacity));
}

.border-\[\#ffffff1f\] {
  border-color: #ffffff1f;
}

.bg-\[\#03102088\] {
  background-color: #03102088;
}

.bg-transparent {
  background-color: transparent;
}

.p-4 {
  padding: 1rem;
}

.p-8 {
  padding: 2rem;
}

.px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.py-32 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-80 {
  padding-bottom: 20rem;
}

.pb-\[30px\] {
  padding-bottom: 30px;
}

.pl-8 {
  padding-left: 2rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-24 {
  padding-top: 6rem;
}

.pt-32 {
  padding-top: 8rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pt-\[100px\] {
  padding-top: 100px;
}

.pt-\[12rem\] {
  padding-top: 12rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

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

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

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

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-black {
  font-weight: 900;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.italic {
  font-style: italic;
}

.text-\[\#fff\] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.line-through {
  text-decoration-line: line-through;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-60 {
  opacity: 0.6;
}

.outline {
  outline-style: solid;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* general stuff for all pages
================================================================================================== */

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #2196f3;
  font-weight: 700;
  text-decoration: none;
}

a:hover {
  color: #1c7fce;
  text-decoration: none;
}

li {
  text-indent: -2rem;
  margin-left: 2rem;
}

li p {
  /* overcome bug in markdown processor that puts p tags inside li tags */
  display: inline;
}

ul ul,
ul ol,
ol ol,
ol ul {
  /* override weird defaults in skeleton.css */
  margin: 2.5rem 0rem 0rem -2rem;
  font-size: 100%;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 4.2rem;
}

h3 {
  font-size: 3rem;
}

h4 {
  font-size: 2.4rem;
}

h5 {
  font-size: 2rem;
}

h6 {
  font-size: 1.4rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  text-wrap: balance;
}

.inline-img {
  height: 1.5rem;
  margin-right: 0.5rem;
  position: relative;
  top: 0.2rem;
}

h1 .inline-img {
  height: 4.6rem;
}

h2 .inline-img {
  height: 3.8rem;
}

h3 .inline-img {
  height: 2.6rem;
}

h4 .inline-img {
  height: 2rem;
}

.tight-spacing p {
  margin-bottom: 0.5rem;
}

.who-what-ani {
  position: relative;
  top: 1rem;
  text-shadow: -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000,
    1px 1px 2px #000;
}

#who-what-fader {
  background-color: rgba(0, 0, 0, 0.5);
  transition: background 0.3s;
  height: 30rem;
}

#who-what-background {
  background-color: #000;
  background-position: center;
  background-size: cover;
  color: #fff;
}

.user-stats {
  /* opacity: 0; */
  color: #fdbf4d;
}

.wide {
  display: block;
}

.narrow {
  display: none;
}

@media (max-width: 600px) {
  .wide {
    display: none;
  }

  .narrow {
    display: block;
  }
}

@media (max-width: 550px) {
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 2rem;
  }
}

@media (max-width: 750px) {
  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 3.5rem;
  }

  h3 {
    font-size: 2.5rem;
  }
}

.clickable {
  cursor: pointer;
}

.small-text {
  font-size: 80%;
}

.img-scale,
.mainPageImage,
.docs-section img {
  max-width: 100%;
}

.mainPageImage {
  margin-bottom: 3rem;
}

.avatar {
  border-radius: 10rem;
}

.blog-meta {
  position: absolute;
  left: 25rem;
}

@media (max-width: 550px) {
  .blog-meta {
    position: relative;
    left: 2rem;
    top: 5rem;
  }
}

.author-avatar {
  border-radius: 100rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.paging-nav .button {
  height: 26px;
  padding: 0 10px;
  line-height: 26px;
  margin: 0 1rem;
}

.paging-nav .button.prev {
  margin-left: 0;
}

.paging-nav .button.next {
  margin-right: 0;
}

.button.disabled {
  color: #aaa;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  border-color: #bbb;
}

.button.disabled:hover {
  color: #aaa;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  border-color: #bbb;
  cursor: default;
}

.container {
  width:80%;
  max-width: 850px;
}

.container.wide-container {
  width:90%;
  max-width: 925px;
}

.container.very-wide-container {
  max-width: 1000px;
  width: 95%;
  margin: auto;
}

.container.ultra-wide-container {
  max-width: 1160px;
  width: 95%;
  margin: auto;
}

.header {
  text-align: center;
}

.docs-section {
  padding: 4rem 0;
  margin-bottom: 0;
}

.docs-section.keep-close-to-next {
  padding-bottom: 2rem;
}

.docs-section-tutorials {
  padding: 2rem 0;
  margin-bottom: 0;
}

.docs-section-guide {
  padding-top: 2rem;
  padding-bottom: 8rem;
  margin-bottom: 0;
}

.section-line {
  border-top: 1px solid #888;
}

.heading-font-size {
  font-size: 1.2rem;
  color: #999;
  letter-spacing: normal;
}

.shadowed,
.shadowed-images img:not(.no-shadow) {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.round-images img {
  border-radius: 100rem;
}

.round-corner-images img:not(.no-round-corner) {
  border-radius: 1rem;
}

.large-icon {
  max-width: 15rem;
  max-height: 15rem;
}

/* Button changes */

.button,
button,
input[type="button"] {
  font-size: 13px;
  text-transform: none;
  background-color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.button:hover,
button:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #fff;
  font-size: 15px;
  height: 50px;
  line-height: 50px;
  background-color: #009634;
  border-color: #009634;
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #fff;
  background-color: #009634;
  border-color: #009634;
}

.side-images img {
  width: 100%;
  border-radius: 100rem;
}

@media (max-width: 550px) {
  .side-images img {
    max-width: 15rem;
  }
}

.keep-300 {
  max-width: 30rem;
  margin: auto;
}

.keep-400 {
  max-width: 40rem;
  margin: auto;
}

.keep-500 {
  max-width: 50rem;
  margin: auto;
}

.keep-narrow {
  max-width: 60rem;
  margin: auto;
}

.keep-medium {
  max-width: 80rem;
  margin: auto;
}

.brain-background {
  background-image: url("../png/screenshotjerrynonverbal.png");
}

.parallax {
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.imgbullet img,
.imgbullet svg {
  display: block;
}

.imgbullet img:before,
.imgbullet svg:before {
  content: "";
  display: table;
  clear: both;
}

.imgbullet.left img,
.imgbullet.left svg {
  float: left;
}

.imgbullet.small-img img,
.imgbullet.small-img svg {
  width: 3rem;
}

.imgbullet.small-img.left p {
  margin-left: 4rem;
}

.imgbullet.small-img.left li {
  text-indent: -2rem;
  margin-left: 6rem;
  margin-bottom: 0.5rem;
}

.imgbullet.smedium-img img:not(.inline-img),
.imgbullet.smedium-img svg {
  width: 4rem;
}

.imgbullet.smedium-img.left p {
  margin-left: 5rem;
}

.imgbullet.smedium-img.left li {
  text-indent: -2rem;
  margin-left: 7rem;
  margin-bottom: 0.5rem;
}

.imgbullet.medium-img img:not(.inline-img),
.imgbullet.medium-img svg {
  width: 6rem;
}

.imgbullet.medium-img.left p {
  margin-left: 7rem;
}

.imgbullet.medium-img.left li {
  text-indent: -2rem;
  margin-left: 9rem;
  margin-bottom: 0.5rem;
}

.imgbullet.large-img img:not(.inline-img),
.imgbullet.large-img svg {
  width: 10rem;
}

.imgbullet.large-img.left p {
  margin-left: 11rem;
}

.imgbullet.large-img.left li {
  text-indent: -2rem;
  margin-left: 13rem;
  margin-bottom: 0.5rem;
}

.imgbullet.news-img img:not(.inline-img),
.imgbullet.news-img svg {
  width: 15rem;
}

.imgbullet.news-img.left p {
  margin-left: 17rem;
}

.imgbullet.news-img.left li {
  text-indent: -2rem;
  margin-left: 19rem;
  margin-bottom: 0.5rem;
}

.imgbullet.avatar-img img:not(.inline-img),
.imgbullet.avatar-img svg {
  width: 4rem;
}

.imgbullet.avatar-img.left p {
  margin-left: 5rem;
}

.imgbullet.auto-heading p:first-of-type {
  font-weight: 500;
}

.imgbullet p {
  margin-bottom: 0.5rem;
}

.imgbullet p:last-of-type {
  padding-bottom: 1.5rem;
}

.imgbullet li:first-of-type {
  margin-top: -1.5rem;
}

.imgbullet li:last-of-type {
  padding-bottom: 1.5rem;
}

.quote-container{
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.quote {
  margin-top:1rem;
  margin-left: 5rem;
  margin-right: 5rem;
  margin-bottom: 1rem;
  font-size: 120%;
  font-style: italic;
}

.quote-info {
  margin-left: 5rem;
  margin-right: 5rem;
  font-size: 80%;
  text-align: right;
  margin-top: 0rem;
}

.quote p {
  margin-bottom: 0rem;
}

@media(max-width:640px){
  .quote {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    margin-bottom: 2rem;
  }

  .quote-info{
    margin-left:2.5rem;
    margin-right:2.5rem;
  }
}

/* Page on top of page look (for narrower sections to not look isolated, used for blog posts)
================================================================================================== */

.floating-page {
  padding: 4rem;
  background: #fff;
  border: 1px solid #aaa;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.behind-floating-page {
  background: #ddd;
}

@media (max-width: 1000px) {
  .behind-floating-page {
    background: #fff;
  }

  .floating-page {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: unset;
  }
}

.floating-page-dark {
  padding: 4rem;
  background: #46485a80;
  border: 1px solid #ffffff1f;
  border-radius: 1rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.behind-floating-page-dark {
  background: #031020;
}

@media (max-width: 1000px) {
  .behind-floating-page-dark {
    background: #031020;
  }

  .floating-page-dark {
    padding: 2rem;
    background: #46485a80;
    border: 1px solid #ffffff1f;
    box-shadow: unset;
  }
}

/* Video buttons with background images
================================================================================================== */

.full-image-background {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Navbar
================================================================================================== */

.navbar + .docs-section {
  border-top-width: 0;
}

.has-docked-nav .navbar {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.navbar,
.navbar-spacer {
  display: block;
  width: 100%;
  height: 5rem;
  z-index: 99;
  background: #eee;
}

.navbar-spacer {
  display: none;
}

.navbar-fullmenu {
  display: none;
}

.navbar-minimenu {
  display: block;
}

.navbar > .container {
  width: 100%;
  top: -0.6rem;
}

.navbar-list {
  list-style: none;
  margin-bottom: 0;
}

.navbar-list > li > a:after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  position: relative;
  top: 1px;
  background: transparent url("../svg/triangle.svg") no-repeat;
}

.navbar-list li > a:only-child:after {
  display: none;
  content: "";
}

.navbar-list li.noTriangle > a:after {
  display: none;
  content: "";
}

.navbar-logo {
  width: 16rem;
  position: relative;
  margin: -0.8rem;
  margin-left: 8px;
  top: 0.8rem;
}

.navbar-logo-big {
  display: inline;
}

.navbar-logo-small {
  width: 4rem;
  margin-right: 0.5rem;
  display: none;
}

@media (max-width: 750px) {
  .navbar-logo-big {
    display: inline;
  }

  .navbar-logo-small {
    display: none;
  }
}

@media (max-width: 850px) {
  .navbar-logo-big {
    display: none;
  }

  .navbar-logo-small {
    display: inline;
  }
}

.navbar-search-icon {
  width: 3rem;
  height: 2.5rem;
  position: relative;
  margin: -0.3rem;
  top: 0.6rem;
}

.navbar-search-input {
  position: fixed;
  top: 1.3rem;
}

.search-input {
  width: calc(100% - 4rem);
  margin-right: 1rem;
  background: rgba(255, 255, 255, 0.09) !important;
  color: rgb(255, 255, 255) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

@media (max-width: 750px) {
  .navbar-search-input {
    top: 0.6rem;
  }
}

.search-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.5rem;
  background: #bbb;
  z-index: 10;
  opacity: 0;
  display: none;
}

.search-row {
  margin-top: 2.5rem;
}

.navbar-item {
  position: relative;
  float: left;
  margin-bottom: 0;
  height: 5rem;
}

.navbar-link {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2rem;
  margin-right: 1.5rem;
  text-decoration: none;
  line-height: 6.5rem;
  color: #222;
}

.navbar-link.download {
  background: #04a;
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

.navbar-link.last {
  margin-right: 0px;
}

.navbar-link.active {
  color: #33c3f0;
}

.has-docked-nav .navbar {
  position: fixed;
  top: 0;
  left: 0;
}

.has-docked-nav .navbar-spacer {
  display: block;
}

.navbar > .container {
  padding: 0;
}

/* Re-overiding the width 100% declaration to match size of % based container */

.has-docked-nav .navbar > .container {
  width: 100%;
  padding: 0 20px;
}

@media (min-width: 400px) {
  .has-docked-nav .navbar > .container {
    width: 85%;
    padding: 0;
  }
}

@media (min-width: 550px) {
  .has-docked-nav .navbar > .container {
    width: 80%;
    padding: 0;
  }
}

/* Toggling of platform specific stuff
================================================================================================== */

.is-win,
.is-mac,
.is-ios,
.is-android,
.is-unknown {
  display: none;
}

.platform-win .is-win,
.platform-mac .is-mac,
.platform-ios .is-ios,
.platform-android .is-android,
.platform-unknown .is-unknown {
  display: inline-block;
}

.platform-win .not-win,
.platform-mac .not-mac,
.platform-ios .not-ios,
.platform-android .not-android,
.platform-unknown .not-unknown {
  display: none;
}

/* Navbar Popover
================================================================================================== */

.popover.open {
  display: block;
}

.popover {
  display: none;
  position: absolute;
  top: 0;
  left: -2rem;
  z-index: 10;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  top: 92%;
  -moz-filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
}

#productsNavPopover {
  width: 18rem;
}

#learnNavPopover {
  width: 16rem;
}

#miniNavPopover {
  width: 15rem;
  left: -14.5rem;
}

.popover-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.popover-list li {
  text-indent: 0;
  margin-left: 0;
}

.popover-item {
  padding: 0;
  margin: 0;
}

.popover-link {
  position: relative;
  color: #222;
  display: block;
  padding: 8px 20px;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.1rem;
}

.right {
  float: right;
}

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

.popover-item:first-child .popover-link {
  border-radius: 4px 4px 0 0;
}

.popover-item:last-child .popover-link {
  border-radius: 0 0 4px 4px;
  border-bottom-width: 0;
}

.popover-link:hover {
  color: #fff;
  background: #04a;
  border-bottom-color: #04a;
}

/* fullscreen overlay for playing videos and showing other content
================================================================================================== */

#fullscreenContainer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 9999;
}

#fullscreenBackground {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #00000094;
  opacity: 1;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

#fullscreenClose {
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: 3rem;
  height: 3rem;
  z-index: 10000;
}

#videoFSContainer {
  width: 100vw;
  height: 56.25vw;
  max-width: 1200px;
  max-height: 675px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10000;
}

#otherFSContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10000;
}

/* sections are for creating full width color bands across the page */

.section-alt {
  position: relative;
  z-index: 1;
  background-color: #efefef;
}

.section-alt-fade {
  position: relative;
  z-index: 1;
  background: linear-gradient(0deg, #00000000 0%, #efefef 10%, #efefef 50%, #efefef 90%, #00000000 100%);
}

.section-alt-light-blue {
  position: relative;
  z-index: 1;
  background-color: #d5e1fb;
}

.section-alt-fade-light-blue {
  position: relative;
  z-index: 1;
  background: linear-gradient(0deg, #00000000 0%, #d5e1fb 10%, #d5e1fb 50%, #d5e1fb 90%, #00000000 100%);
}

.section-alt-dark-blue {
  position: relative;
  z-index: 1;
  background-color: #1c3250;
}

.section-alt-fade-dark-blue {
  position: relative;
  z-index: 1;
  background: linear-gradient(0deg, #00000000 0%, #1c3250 10%, #1c3250 50%, #1c3250 90%, #00000000 100%);
}

.section-alt-light-gray {
  position: relative;
  z-index: 1;
  background-color: #b1b4b7;
}

.section-alt-fade-light-gray {
  position: relative;
  z-index: 1;
  background: linear-gradient(0deg, #00000000 0%, #b1b4b7 10%, #b1b4b7 50%, #b1b4b7 90%, #00000000 100%);
}

.section-alt-dark-gray {
  position: relative;
  z-index: 1;
  background-color: #414d5d;
}

.section-alt-fade-dark-gray {
  position: relative;
  z-index: 1;
  background: linear-gradient(0deg, #00000000 0%, #414d5d 10%, #414d5d 50%, #414d5d 90%, #00000000 100%);
}

.section-alt h1, 
.section-alt h2, 
.section-alt h3, 
.section-alt h4, 
.section-alt h5, 
.section-alt h6
.section-alt-fade h1, 
.section-alt-fade h2, 
.section-alt-fade h3, 
.section-alt-fade h4, 
.section-alt-fade h5, 
.section-alt-fade h6,
.section-alt-light-blue h1,
.section-alt-light-blue h2,
.section-alt-light-blue h3,
.section-alt-light-blue h4,
.section-alt-light-blue h5,
.section-alt-fade-light-blue h6,
.section-alt-fade-light-blue h1,
.section-alt-fade-light-blue h2,
.section-alt-fade-light-blue h3,
.section-alt-fade-light-blue h4,
.section-alt-fade-light-blue h5,
.section-alt-fade-light-blue h6,
.section-alt-light-gray h1,
.section-alt-light-gray h2,
.section-alt-light-gray h3,
.section-alt-light-gray h4,
.section-alt-light-gray h5,
.section-alt-fade-light-gray h6,
.section-alt-fade-light-gray h1,
.section-alt-fade-light-gray h2,
.section-alt-fade-light-gray h3,
.section-alt-fade-light-gray h4,
.section-alt-fade-light-gray h5,
.section-alt-fade-light-gray h6 {
  color: #000;
}

.section-container-example {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#testimonialto-thebrain-tag-all-light-animated {
  -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
  );
}

/* prior to the 2022 redesign, blocks were for full width color bands across the page - these are now obsolete and mostly all look the same now */

.block-white {
  position: relative;
  background-color: #031020;
}

.block-light-blue {
  position: relative;
  background-color: #d6e8ff;
}

.block-fade {
  position: relative;
  background-color: #031020;
  z-index: 1;
  /* position above screenshot */
}

.block-blue {
  position: relative;
  background-color: #1c3250;
}

.block-gray {
  position: relative;
  background-color: #031020;
}

.block-photo {
  position: relative;
  background-color: #031020;
  background-position: center;
  background-size: cover;
}

.block-black {
  position: relative;
  background-color: #031020;
}

.block-blue a, block-blue a:hover,
.block-gray a, block-gray a:hover,
.block-photo a, block-photo a:hover,
.block-black a, block-black a:hover
/* .block-black a */ {
  color: #11b9ff;
}

.block-navblock {
  position: relative;
  background-color: #eee;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  z-index: 9;
}

.has-docked-nav .block-navblock {
  box-shadow: none;
}

/* homepage and download page stuff
================================================================================================== */

.slogan {
  /* matches h2 */
  font-size: 4.2rem;
  letter-spacing: -0.1rem;
  font-weight: 500;
  line-height: 1.25;
  position: relative;
}

#slogan-holder {
  height: 7rem;
  margin: auto;
  padding-top: 8vw;
  padding-bottom: 4vw;
}

.definition {
  max-width: 30rem;
  margin: auto;
  margin-bottom: 2rem;
}

.vcenter-holder {
  display: table;
  width: 100%;
  height: 80vh;
  max-height: 80rem;
}

.vcenter {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  margin: auto;
}

.customer-list img,
.customer-list svg {
  /* width: 100%; */
  height: 5rem;
  max-width: 12rem;
  padding: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.customer-list svg path,
.customer-list svg polygon,
.customer-list svg rect,
.customer-list svg polyline {
  fill: #888 !important;
}

.block-main {
  position: relative;
  background-color: #e8f3ff;
  background: linear-gradient(to bottom, #e8f3ff, #55aafd);
}

.block-main.theme1 {
  background: #fff;
}

.block-main.theme2 {
  background: #fff;
}

.block-value-prop {
  position: relative;
  /* background-color: #003796;
  background: linear-gradient(to bottom, #003796 , #002053); */
  background-color: #192e49;
  background: linear-gradient(to bottom, #192e49, #000);
  color: #fff;
  z-index: 1;
  /* position above screenshot */
}

.block-value-prop.theme1 {
  background: #d8d8d8;
  color: #000;
}

.white-transparent {
  background-color: rgba(255, 255, 255, 0.65);
}

.center,
.center img,
.center div {
  margin-left: auto;
  margin-right: auto;
}

.center img {
  display: block;
}

.center-text,
.center-text * {
  text-align: center;
}

.logo-img {
  display: block;
  width: 25rem;
  margin: auto;
}

@media (max-width: 750px) {
  .slogan {
    font-size: 3.5rem;
  }

  #slogan-holder {
    height: 5rem;
    padding-bottom: 2vw;
  }
}

@media (max-width: 550px) {
  .slogan {
    font-size: 2.5rem;
  }

  #slogan-holder {
    height: 4rem;
    padding-bottom: 1vw;
  }

  .logo-img {
    display: none;
  }

  .vcenter-holder {
    height: 47vh;
  }
}

@media (max-height: 500px) {
  .logo-img {
    display: none;
  }

  #slogan-holder {
    padding-top: 12vw;
  }

  .slogan {
    font-size: 2.5rem;
  }
}

.screenshot-video-back {
  width: 100%;
}

.screenshot-video-back-holder {
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  position: absolute;
}

#header {
  /* position must be set to relatve to enable z-index to work so content can show above animated links */
  position: relative;
  z-index: 1;
}

.header-download {
  margin: 5rem 0;
}

.download-title {
  animation: header-download-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), header-download-transform 1.5s ease;
  -webkit-animation: header-download-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), header-download-transform 1.5s ease;
}

@keyframes header-download-fadeIn {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes header-download-transform {
  from {
    top: -100px;
  }

  to {
    top: 0;
  }
}

.download-inner-content {
  animation: download-inner-content-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), download-inner-content-transform 1.5s ease;
  -webkit-animation: download-inner-content-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), download-inner-content-transform 1.5s ease;
}

@keyframes download-inner-content-fadeIn {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes download-inner-content-transform {
  from {
    top: -100px;
  }

  to {
    top: 0;
  }
}

#PlayButton {
  margin: 10rem;
  width: 15vw;
  max-width: 20rem;
  position: relative;
}

.value-prop {
  margin-top: 1rem;
  text-align: center;
}

.value-prop p {
  margin: 0.5rem;
}

.value-props {
  padding-top: 1rem;
  padding-bottom: 4rem;
}

.value-img {
  display: block;
  text-align: center;
  width: 6rem;
  margin: 2.5rem auto 0;
}

#screenshot {
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  z-index: -1;
}

#screenshotHolder {
  position: relative;
  width: 100%;
  height: 0;
}

#controls-area {
  position: fixed;
  left: 1rem;
  bottom: 0;
  width: 100%;
  z-index: 9999;
}

/* Compare Editions page
================================================================================================== */

.compare-editions {
  margin: auto;
}

.compare-editions * {
  text-align: center;
  font-size: 1.2rem;
}

.compare-editions td:first-of-type:not(.table-section),
.compare-editions th:first-of-type {
  text-align: left;
}

.table-section {
  background-color: #ffffff0a;
  font-weight: 500;
}

.title-row {
  font-weight: 300;
  color: #888;
  background-color: #00000012;
}

/* FAQ
================================================================================================== */

.fit-width {
  max-width: 100%;
}

/* Store page
================================================================================================== */

.store-container {
  text-align: center;
}

.sku-details {
  text-align: left;
  margin: 1rem 1rem;
  padding-top: 2rem;
  border-top: 1px solid #aaa;
}

.sku-details-side {
  padding-top: 0;
  border: 0;
}

.sku-details ul,
.sku-details li {
  margin: 0;
}

.sku-details li {
  margin-left: 2rem;
}

.sku-details li:last-of-type {
  margin-bottom: 1rem;
}

.sku-logo {
  --padding: 1rem;
  max-width: 14rem !important;
  box-shadow: none !important;
}

/* Upgrade info
================================================================================================== */

.inline-loading {
  display: none;
  margin-left: 2rem;
  position: relative;
  top: 1rem;
}

.floating-box {
  border: 1px solid #888;
  background: #ddd;
  padding: 2rem;
  border-radius: 0.5rem;
  margin: auto;
  padding-bottom: 0;
}

.floating-box-light {
  border: 1px solid #8884;
  background: #ddd2;
  padding: 2rem;
  border-radius: 0.5rem;
  margin: auto;
  padding-bottom: 0;
}

.floating-box-glassy {
  border: 1px solid #ffffff1f;
  background: #46485a80;
  padding: 2rem;
  border-radius: 1rem;
  margin: auto;
  padding-bottom: 0;
}

.floating-box input {
  margin: 1rem;
}

/* TheBrain product page
================================================================================================== */

#full-quote {
  display: none;
}

#full-quote-holder {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #ffffff00;
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
  border: 1px solid #3c3c3c;
  border-radius: 1rem;
  width: 60vw;
  height: 80vw;
  overflow: auto;
  padding: 4rem;
  max-width: 60rem;
  max-height: 80rem;
}

/* TheBrain 9 page
================================================================================================== */

.fixed-medium-backound {
  background-attachment: fixed, scroll;
  background-position: 50% 25%, 100% 100%;
  background-repeat: no-repeat;
  background-size: 50%, 100%;
}

.fixed-medium-backound.tb9-circle-faded {
  background-image: url("../svg/tb9-circle-faded.svg");
  background-image: url("../svg/tb9-circle-faded.svg"),
    linear-gradient(to bottom, #ddd, #fff);
}

.fixed-medium-backound.tb9-circle-outline {
  background-image: url("../svg/tb9-circle-outline.svg");
}

.fixed-medium-backound.tb9-circle-outline-gray {
  background-image: url("../svg/tb9-circle-outline-gray.svg");
}

/* TheBrain GWT (store popups, etc)
================================================================================================== */

.brainPopup table {
  padding: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.brainPopup td,
#purchasePageHolder td {
  padding: 0;
  margin: 1rem 0;
  border-bottom: none;
}

.brainPopup label {
  display: inherit;
}

.brainPopup input[type="text"],
#purchasePageHolder input[type="text"],
#purchasePageHolder select {
  padding: 0;
  height: 28px;
  width: 250px;
}

#purchasePageHolder input,
#purchasePageHolder select {
  padding: 0;
  margin: 0.2rem 0;
}

.brainPopup input {
  margin: 0.5rem 0;
}

.brainPopup .dialogMiddleCenter {
  padding: 2rem !important;
}

.gwt-Button {
  margin-top: 2rem;
}

#purchasePageHolder .gwtButton {
  margin-top: 0;
}

#purchasePageHolder td {
  padding: 0 1rem;
  margin: 1rem 0;
  border-bottom: none;
}

.pricing p {
  margin-bottom: 0.5rem;
}

.pricing {
  display: block;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 1rem 0;
  border: 1px solid #ccc;
}

.pricing.primary {
  background-color: #eee;
  border-color: #888;
}

.pricing .button {
  padding: 0 1rem;
  margin-top: 1rem;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 875px) {
  .pricing .button {
    padding: 0 1rem;
    margin-top: 4rem;
  }
}

#dInfo {
  font-weight: 500;
}

/* blog stuff
================================================================================================== */

.blogVideo {
  width: 80vw;
  height: 45.1vw;
  max-width: 100%;
  margin-bottom: 3rem;
}

.blog-background-holder {
  position: relative;
  width: 0;
  height: 0;
}

.blog-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 230px;
  z-index: 0;
}

.above-social {
  z-index: 1;
}

#disqus_thread {
  max-width: 82rem;
}

.current-selection,
.other-selection {
  border: 1px solid #888;
  border-radius: 4px;
  padding: 3px;
  font-weight: 500;
  color: #000;
}

.current-selection a,
.other-selection a,
.current-selection a:hover,
.other-selection a:hover {
  font-weight: 500;
  color: #000;
}

.current-selection {
  background-color: #000;
  color: #fff;
}

.blog-content {
  margin-top: 6rem;
  margin-left: 2rem;
  min-height: 1200px;
  z-index: 1;
  position: relative;
}

.blog-row {
  margin-bottom: 3rem;
}

.blog-row p {
  margin-bottom: 1rem;
}

.blog-row h4 {
  margin-bottom: 0.5rem;
}

.required-column {
  float: left;
  width: calc(100% - 24rem);
}

.optional-column {
  float: left;
  width: 22rem;
  margin-left: 2rem;
}

@media (max-width: 1000px) {
  .optional-column {
    display: none;
  }

  .required-column {
    width: 100%;
  }
}

.categories-title {
  margin-bottom: 1rem;
}

.categories-box {
  border: 1px solid #eee;
  background: #fff;
  border-radius: 0.5rem;
  margin: auto;
}

.categories-box-offset-top {
  margin-top: 3rem;
}

.categories-box h5 {
  margin: 0;
  border-bottom: 1px solid #eee;
  padding: 8px 20px;
}

.current-category .category-link {
  color: #888;
}

.category-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.category-list li {
  text-indent: 0;
  margin-left: 0;
}

.category-item {
  padding: 0;
  margin: 0;
}

.category-link {
  position: relative;
  color: #222;
  display: block;
  padding: 8px 20px;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.1rem;
}

.category-item:first-child .category-link {
  border-radius: 4px 4px 0 0;
}

.category-item:last-child .category-link {
  border-radius: 0 0 4px 4px;
  border-bottom-width: 0;
}

.category-link:hover {
  color: #fff;
  background: #04a;
  border-bottom-color: #04a;
}

.under-category,
.under-author,
.under-tag {
  margin: 0px;
  padding-left: 20px;
  background-image: url("../svg/under-category.svg");
  background-repeat: no-repeat;
  font-weight: 100;
}

img.map,
map area {
  outline: none;
}

.socialShare {
  margin-bottom: 2rem;
  margin-left: 2rem;
  border-radius: 5px;
  background-color: transparent;
  border: 1px solid #ffffff21;
  padding: 0.5rem;
  width: 2.5rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transition: background-color ease-out 100ms;
}

.socialShare:hover {
  background-color: #ffffff21;
}

#shareDivReference {
  width: 0px;
  height: 0px;
  position: relative;
  float: right;
}

#shareDiv {
  width: 100%;
  height: 40px;
  position: relative;
  float: right;
}

.has-docked-share #shareDiv {
  position: fixed;
  top: 90px;
}

.box-container {
  display: flex;
  flex-wrap: wrap;
}

.medium-box,
.large-box {
  display: flex;
  text-align: center;
  flex-wrap: wrap;
}

.medium-box {
  width: 16rem;
  margin: 2rem;
}

@media(max-width: 768px){
  .medium-box {
    width: 12rem;
    margin-bottom: 7rem;
  }
}

.medium-box > *,
.large-box > * {
  margin: auto;
}

.medium-box-text {
  height: -webkit-fill-available;
}

.large-box {
  width: 26rem;
}

.large-box > * {
  margin: auto;
}

.large-box-text {
  height: 15rem;
  font-size: 2rem;
}

/* @media queries (width dependent stuff) starts here
================================================================================================== */

/* Larger than phone */

@media (min-width: 550px) {
  #videoFSContainer {
    width: 84vw;
    height: 47.25vw;
  }

  .value-props {
    padding-top: 1rem;
    padding-bottom: 4rem;
  }

  .value-img {
    margin-bottom: 1rem;
  }

  .docs-section {
    padding: 6rem 0;
  }

  #shareDiv {
    width: 7rem;
  }
}

/* Larger than tablet */

@media (min-width: 750px) {
  /* make nav bar full height */

  .navbar,
  .navbar-spacer {
    height: 6.5rem;
  }

  .navbar > .container {
    top: 0rem;
  }

  /* show full menu */

  .navbar-fullmenu {
    display: block;
  }

  .navbar-minimenu {
    display: none;
  }

  .compare-editions * {
    font-size: inherit;
  }
}

/* sticky footer
================================================================================================== */

html,
body {
  height: 100%;
}

.page-wrap {
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
  /* prevent animated background links from making page wider than it really is */
}

.page-wrap:after {
  content: "";
  display: block;
}

.site-footer {
  background: #c1c1c1;
  color: #616161;
  position: relative;
}

.footer-left {
  float: left;
}

.footer-right {
  float: right;
}

.legalese {
  font-size: 1.2rem;
  clear: both;
  padding-top: 2rem;
}

.site-footer a {
  color: #616161;
}

.footer-section {
  padding-top: 4rem;
}

#social-buttons {
  position: relative;
  top: 0.6rem;
  margin-bottom: 1.5rem;
}

#social-channels {
  padding: 1rem;
  background: #e2e2e2;
  border-radius: 100rem;
  margin: 0 auto;
  width: 26rem;
}

#social-channels img {
  width: 2.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: -0.5rem;
}

@media (max-width: 550px) {
  #social-channels img {
    width: 2rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  #social-channels {
    padding: 0.5rem;
    width: 18rem;
  }
}

/* varying footer height depending on device size */

.page-wrap {
  margin-bottom: -260px;
}

.site-footer,
.page-wrap:after {
  height: 260px;
}

@media (min-width: 550px) {
  .page-wrap {
    margin-bottom: -240px;
  }

  .site-footer,
  .page-wrap:after {
    height: 240px;
  }
}

@media (min-width: 750px) {
  .page-wrap {
    margin-bottom: -220px;
  }

  .site-footer,
  .page-wrap:after {
    height: 220px;
  }
}

.monthly-yearly-container {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  margin-bottom: 2rem;
  text-align: center;
}

.monthly-yearly-switch input {
  position: absolute;
  opacity: 0;
}

.monthly-yearly-switch {
  display: inline-block;
  font-size: 20px;
  /* 1 */
  height: 1em;
  width: 2em;
  margin-top: 10px;
  background: #444764;
  border-radius: 1em;
}

.monthly-yearly-switch div {
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: #e1e1e1;
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3);
  transition: all 300ms;
}

.monthly-yearly-switch input:checked + div {
  transform: translate3d(100%, 0, 0);
}

.monthly-yearly-labels {
  font-size: 10px;
  margin-top: 12px;
}

#monthly-label {
  float: right;
  padding-right: 55px;
  opacity: 0.2;
}

#yearly-label {
  float: left;
  padding-left: 55px;
  opacity: 1;
}

/* ############################# */

/* NEW CSS FOR USE WITH REDESIGN */

/* ############################# */

.gradient-heading {
  background: rgb(135, 255, 239);
  background: linear-gradient(163deg, rgba(135, 255, 239, 1) 15%, rgba(120, 200, 255, 1) 50%, rgba(117, 155, 255, 1) 85%);
  background-clip: text;
  background-position: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-heading-wide {
  background: rgb(135, 255, 239);
  background: linear-gradient(163deg, rgba(135, 255, 239, 1) 0%, rgba(120, 200, 255, 1) 50%, rgba(117, 155, 255, 1) 100%);
  background-clip: text;
  background-position: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark .gradient-heading, .dark .gradient-heading-wide {
  background: rgb(117, 155, 255);
  background: linear-gradient(163deg, rgba(117, 155, 255, 1) 15%, rgba(35, 58, 117, 1) 85%);
  background-clip: text;
  background-position: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-heading.animated {
  animation: gradient-heading-animated-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), gradient-heading-animated-transform 1.5s ease;
  -webkit-animation: gradient-heading-animated-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), gradient-heading-animated-transform 1.5s ease;
}

@keyframes gradient-heading-animated-fadeIn {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes gradient-heading-animated-transform {
  from {
    top: -100px;
  }

  to {
    top: 0;
  }
}

.page-container {
  position: relative;
  min-height: 100vh;
}

.content-wrap {
  min-height: calc(100vh - 20rem);
  /* subtract height of footer */
}

.block-dark {
  position: relative;
  background-color: #031020;
}

.block-light {
  position: relative;
  padding: 4rem;
  padding-top: 100px;
  background-color: #031020;
}

.navbar-glassy-item {
  position: relative;
  float: left;
  margin-bottom: 0;
  height: 5rem;
}

.navbar-glassy-link {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2rem;
  margin-right: 1.5rem;
  text-decoration: none;
  line-height: 6.5rem;
  color: #fff;
}

.navbar-glassy-link:hover {
  color: #4e92ff;
}

.navbar-glassy-list {
  list-style: none;
  margin-bottom: 0;
}

.navbar-glassy-list > li > a:after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  position: relative;
  top: 1px;
  background: transparent url("../svg/triangle.svg") no-repeat;
  filter: invert(1);
}

.navbar-glassy-list li > a:only-child:after {
  display: none;
  content: "";
}

.navbar-glassy-list li.noTriangle > a:after {
  display: none;
  content: "";
}

.popover-glassy {
  display: none;
  position: absolute;
  top: 0;
  left: -2rem;
  z-index: 10;
  background: #080a1d;
  border: 1px solid #ffffff1f;
  border-radius: 6px;
  top: 92%;
  -moz-filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
}

.popover-glassy.open {
  display: block;
}

.popover-glassy-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.popover-glassy-list li {
  text-indent: 0;
  margin-left: 0;
}

.popover-glassy-item {
  padding: 0;
  margin: 0;
}

.popover-glassy-item:first-child .popover-link {
  border-radius: 4px 4px 0 0;
}

.popover-glassy-item:last-child .popover-link {
  border-radius: 0 0 4px 4px;
  border-bottom-width: 0;
}

.popover-glassy-link {
  position: relative;
  color: #ffffff;
  background: #020a14;
  display: block;
  padding: 8px 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.1rem;
}

.popover-glassy-link:hover {
  color: #fff;
  background: #0e57cb;
}

.search-bar-glassy {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.5rem;
  background: transparent;
  z-index: 100;
  opacity: 0;
  display: none;
}

.navbar-search-input-glassy {
  text-align: center;
  position: fixed;
  top: 1.3rem;
}

.navbar-search-input-glassy::-moz-placeholder {
  font-weight: 300;
  opacity: 0.5;
  color: #fff;
}

.navbar-search-input-glassy::placeholder {
  font-weight: 300;
  opacity: 0.5;
  color: #fff;
}

.navbar-glassy-light-item {
  position: relative;
  float: left;
  margin-bottom: 0;
  height: 5rem;
}

.navbar-glassy-light-link {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2rem;
  margin-right: 1.5rem;
  text-decoration: none;
  line-height: 6.5rem;
  color: #000;
}

.navbar-glassy-light-link:hover {
  color: #4e92ff;
}

.navbar-glassy-light-list {
  font-weight: 400;
  list-style: none;
  margin-bottom: 0;
}

.navbar-glassy-light-list > li > a:after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  position: relative;
  top: 1px;
  background: transparent url("../svg/triangle.svg") no-repeat;
}

.navbar-glassy-light-list li > a:only-child:after {
  display: none;
  content: "";
}

.navbar-glassy-light-list li.noTriangle > a:after {
  display: none;
  content: "";
}

.popover-glassy-light {
  display: none;
  position: absolute;
  top: 0;
  left: -2rem;
  z-index: 10;
  background: #d1d1d1;
  border: 1px solid #d1d1d1;
  border-radius: 6px;
  top: 92%;
  -moz-filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
}

.popover-glassy-light.open {
  display: block;
}

.popover-glassy-light-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.popover-glassy-light-list li {
  text-indent: 0;
  margin-left: 0;
}

.popover-glassy-light-item {
  padding: 0;
  margin: 0;
}

.popover-glassy-light-item:first-child .popover-link {
  border-radius: 4px 4px 0 0;
}

.popover-glassy-light-item:last-child .popover-link {
  border-radius: 0 0 4px 4px;
  border-bottom-width: 0;
}

.popover-glassy-light-link {
  position: relative;
  color: #000;
  background: #fff;
  display: block;
  padding: 8px 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.1rem;
}

.popover-glassy-light-link:hover {
  color: #fff;
  background: #0e57cb;
}

.search-bar-glassy-light {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.5rem;
  background: transparent;
  z-index: 100;
  opacity: 0;
  display: none;
}

.navbar-search-input-glassy-light {
  text-align: center;
  position: fixed;
  top: 1.3rem;
  color: #000;
}

.illuminated {
  box-shadow: 0px 11px 300px 200px #a1aaff14,
    inset 0px 0px 300px 625px #a1aaff12;
  background: transparent;
}

.illuminated-no-inset {
  box-shadow: 0px 11px 300px 200px #a1aaff14;
  background: transparent;
}

.illuminated-strong {
  box-shadow: 0px 11px 300px 200px #a1aaff2e,
    inset 0px 0px 300px 200px #a1aaff12;
  background: transparent;
}

.homepage-hero-wrapper {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .homepage-hero-wrapper {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.homepage-hero-wrapper {
  position: relative;
  color: #ffffff;
  background: transparent;
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  z-index: 10;
}

.homepage-hero-wrapper h1, .fancy-headings h1 {
  font-size: clamp(48px, 6.5vw, 54px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.015em;
  margin: auto;
  padding: 0.3em 0;
  position: relative;
}

.homepage-hero-wrapper h2, .fancy-headings h2 {
  font-size: clamp(40px, 5vw, 48px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.015em;
  margin: auto;
  padding: 0.3em 0;
  position: relative;
}

.homepage-hero-wrapper h3, .fancy-headings h3 {
  font-size: clamp(40px, 5vw, 48px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.015em;
  margin: auto;
  padding: 0.3em 0;
  position: relative;
}

.homepage-hero-wrapper h4, .fancy-headings h4 {
  font-size: 42px;
  font-size: clamp(24px, 3vw, 28px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.015em;
  margin: auto;
  padding: 0.3em 0;
  position: relative;
}

.homepage-hero-wrapper h5, .fancy-headings h5 {
  font-size: clamp(16px, 2.5vw, 18px);
  font-weight: 400;
  letter-spacing: -.015em;
  position: relative;
}

.homepage-hero-wrapper h6, .fancy-headings h6 {
  font-weight: 300;
}

.downloads-wrapper {
  position: relative;
  color: #ffffff;
  padding-top: 3rem;
  background: transparent;
  width: 90%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.homepage-hero-heading {
  animation: hero-text-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), hero-text-transform 1.5s ease;
  -webkit-animation: hero-text-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), hero-text-transform 1.5s ease;
}

@keyframes hero-text-fadeIn {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes hero-text-transform {
  from {
    top: -100px;
  }

  to {
    top: 0;
  }
}

.homepage-hero-subheading {
  text-align: center;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 40px;
  animation: hero-subheading-fadeIn 1.5s cubic-bezier(0.565, 0.005, 0.675, 0.995), hero-text-transform 1.5s ease;
  -webkit-animation: hero-subheading-fadeIn 1.5s cubic-bezier(0.565, 0.005, 0.675, 0.995), hero-text-transform 1.5s ease;
}

@keyframes hero-subheading-fadeIn {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes hero-subheading-transform {
  from {
    top: -100px;
  }

  to {
    top: 0;
  }
}

.hero-download-button {
  background: #009634;
  color: #fff;
  border-radius: 0.75rem;
  padding: 25px;
  font-size: 21px;
  font-weight: 400;
  line-height: 6.5rem;
  box-shadow: 0px 11px 300px 200px #10b3ff41;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-in;
  animation-name: animate-download;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
}

@keyframes animate-download {
  from {
    box-shadow: 0px 11px 300px 200px #10b3ff00;
  }

  to {
    box-shadow: 0px 11px 300px 200px #10b3ff41;
  }
}

.hero-download-button:hover {
  background: #05c046;
  color: #fff;
  box-shadow: 0px 11px 300px 200px #10b3ff62;
  transition: box-shadow 0.25s background 0.1s;
  transition-timing-function: ease-out;
}

@media (max-width: 768px){
  .hero-download-button{
    position: relative;
    z-index: 10;
    box-shadow: 0px 11px 76px 44px #10b3ff42;
    animation-name: animate-download-mobile;
  }

  .hero-download-button:hover {
    box-shadow: 0px 11px 76px 44px #10b3ff56;
  }
}

@keyframes animate-download-mobile {
  from {
    box-shadow: 0px 11px 76px 44px #10b3ff00;
  }

  to {
    box-shadow: 0px 11px 76px 44px #10b3ff42;
  }
}

.hero-download-button-alt {
  background: #009634;
  color: #fff;
  border-radius: 0.75rem;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 21px;
  font-weight: 400;
  line-height: 6.5rem;
  box-shadow: 0px 11px 300px 200px #10b3ff21;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-in;
}

.hero-download-button-alt:hover {
  background: #05c046;
  color: #fff;
  box-shadow: 0px 11px 300px 200px #10b3ff33;
  background-size: 400%;
  font-weight: 400;
  transition: box-shadow 0.25s background 0.1s;
  transition-timing-function: ease-out;
}

@media (max-width: 768px){
  .hero-download-button-alt{
    box-shadow: none;
    animation-name: none;
  }

  .hero-download-button-alt:hover {
    box-shadow: none;
  }
}

.hero-buy-button {
  background: #009634;
  color: #fff;
  border-radius: 0.75rem;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 21px;
  font-weight: 400;
  line-height: 6.5rem;
  color: #ffffff;
  transition: box-shadow 1s;
  transition-timing-function: ease-in;
}

.hero-buy-button:hover {
  box-shadow: 0px 11px 300px 200px #0096342d;
  color: #fff;
  background: #00be43;
  transition: box-shadow 0.5s;
  transition-timing-function: ease-out;
}

@media (max-width: 550px) {
  .hero-download-button {
  }

  .hero-buy-button {
    box-shadow: none;
  }
}

.youtube-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid #626262;
  margin: auto;
  margin-bottom: 12rem;
  text-align: center;
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.feature-container {
  gap: 8rem;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

@media (min-width: 640px) {
  .feature-container {
    gap: 10rem;
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}

.feature-container {
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.feature-wrapper {
  display: flex;
  justify-content: space-between;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
  max-width: 1184px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  opacity: 0;
  transition: transform 1.25s, opacity 1.25s;
}

.feature-wrapper.scroll-left {
  transform: translateX(-150px);
}

.feature-wrapper.scroll-right {
  transform: translateX(150px);
}

.feature-wrapper.scrolled-into-view {
  transform: translateX(0);
  opacity: 1;
}

@media (max-width: 768px) {
  .feature-wrapper {
    flex-direction: column;
  }
}

.feature-text-right {
  flex: 1;
  margin-left: 90px;
  max-width: 570px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .feature-text-right {
    width: 100%;
    order: 1;
    text-align: center;
    margin-left: 0;
  }
}

.feature-video-left {
  height: -moz-min-content;
  height: min-content;
  display: flex;
  flex: 1;
  justify-content: end;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .feature-video-left {
    width: 100%;
    order: 2;
  }
}

.feature-text-left {
  flex: 1;
  margin-right: 90px;
  max-width: 570px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .feature-text-left {
    width: 100%;
    order: 1;
    text-align: center;
    margin-right: 0;
  }
}

.feature-video-right {
  height: -moz-min-content;
  height: min-content;
  display: flex;
  flex: 1;
  justify-content: start;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .feature-video-right {
    width: 100%;
    order: 2;
  }
}

.embedded-video {
  border-radius: 1rem;
  border: 1px solid #c3c0c0;
  width: 150%;
}

@media (max-width: 768px) {
  .embedded-video {
    width: 100%;
  }
}

.brain-carousel-wrapper {
  margin-bottom: 4rem;
  text-align: center;
}

.info-card-background {
  background-color: #46485a80;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.info-card {
  height: -moz-fit-content;
  height: fit-content;
  padding: 2rem;
  margin-bottom: 6rem;
  background-color: #46485a80;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.info-card-dark {
  height: -moz-fit-content;
  height: fit-content;
  padding: 2rem;
  margin-bottom: 6rem;
  background-color: #00000088;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.info-card.small-gap{
  margin-bottom: 2rem;
}

.no-bottom-margin {
  margin-bottom:0;
}

.homepage-three-cards-light {
  height: -moz-fit-content;
  height: fit-content;
  padding: 2rem;
  margin-bottom: 6rem;
  background-color: #46485a1a;
  border-radius: 10px;
  border: 1px solid #46485a29;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.homepage-three-cards-light a {
  color: #2196f3;
}

.homepage-three-cards-light a:hover {
  color: #1c7fce;
}

.homepage-info-section {
  text-align: center;
  padding: 0.5rem;
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: 2rem;
}

.homepage-quick-info {
  backdrop-filter:blur(17px);
  -webkit-backdrop-filter: blur(17px);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
}

.marquee-wrapper {
  background: transparent;
  text-align: center;
  mask: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}

.marquee-wrapper::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 4em;
}

.marquee-wrapper .marquee-container {
  overflow: hidden;
}

.marquee-inner span {
  float: left;
  width: 50%;
}

.marquee-wrapper .marquee-block {
  --total-marquee-items: 36;
  height: 80px;
  width: calc(140px * (var(--total-marquee-items)));
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  background: transparent;
  padding: 0 0;
}

.marquee-inner {
  display: block;
  width: 200%;
  position: absolute;
}

.marquee-inner p {
  font-weight: 800;
  font-size: 30px;
}

.marquee-inner.to-left {
  animation: marqueeLeft 120s linear infinite;
}

.marquee-inner.to-right {
  animation: marqueeRight 120s linear infinite;
}

.marquee-item {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
  float: left;
  transition: all 0.2s ease-out;
  background: transparent;
  opacity: 0.85;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.marquee-item img {
  height:50px;
}

.cta-wrapper {
  margin-bottom: 8rem;
  text-align: center;
}

.cta-buy-button {
  margin-bottom: -25px;
}

.cta-download-button {
  /* intentionally empty */
}

.trusted-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
  margin-left: 2rem;
  margin-right: 2rem;
  gap: 20px;
  margin-bottom: 18rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .trusted-section {
    margin-left: 4rem;
    row-gap: 30px;
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
}

.trusted-section-logo-container {
  display: inline-flex;
  box-sizing: border-box;
}

.trusted-section-logo-container img {
  max-width: 256px;
}

.trusted-section-logo {
  filter: brightness(1.3);
  max-height: 64px;
  max-width: 180px;
  display: block;
  height: 100%;
  width: 100%;
  flex-grow: 0;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-box-flex: 0;
  -ms-flex-positive: 0;
  -o-object-fit: contain;
  object-fit: contain;
}

@media (min-width: 1080px) {
  .trusted-section-logo {
    max-height: 80px;
    max-width: 256px;
  }
}

@keyframes marqueeLeft {
  0% {
    left: 0;
  }

  100% {
    left: -100%;
  }
}

@keyframes marqueeRight {
  0% {
    left: -100%;
  }

  100% {
    left: 0;
  }
}

#social-channels-glassy {
  padding: 1rem;
  background: #46485a80;
  border: 1px solid #ffffff1f;
  border-radius: 100rem;
  margin: 0 auto;
  width: 26rem;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

#social-channels-glassy img {
  width: 2.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: -0.5rem;
}

#social-channels-glassy-light {
  padding: 1rem;
  background: #00000017;
  border: 1px solid #0000001f;
  border-radius: 100rem;
  margin: 0 auto;
  width: 26rem;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

#social-channels-glassy-light img {
  width: 2.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: -0.5rem;
}

.site-footer-light, .site-footer-dark {
  position: relative;
  width: 100%;
  left: 50%;
  transform: translate(-50%);
  bottom: 0;
  height: 20rem;
  z-index: 20;
  font-weight: 400;
}

.site-footer-dark a {
  color: #2196f3;
}

.site-footer-dark a:hover {
  color: #1c7fce;
}

.site-footer-light a {
  color: #0045aa;
}

.glassy-text-input {
  color: #fff !important;
  text-align: center !important;
  background-color: #46485a80 !important;
  border: 1px solid #ffffff1f !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

.hero-dark-button {
  background: #0ea1e6;
  color: #fff;
  border-radius: 0.75rem;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 21px;
  font-weight: 400;
  line-height: 6.5rem;
  box-shadow: 0px 11px 300px 200px #10b3ff41;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-in;
  animation-name: animate-hero-button-dark;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
}

.hero-dark-button:hover {
  background: #10b3ff;
  color: #fff;
  box-shadow: 0px 11px 300px 200px #10b3ff62;
  transition: box-shadow 0.25s background 0.1s;
  transition-timing-function: ease-out;
}

@keyframes animate-her-button-dark {
  from {
    box-shadow: 0px 11px 300px 200px #10b3ff00;
  }

  to {
    box-shadow: 0px 11px 300px 200px #10b3ff41;
  }
}

.download-button {
  background: #0ea1e6;
  color: #fff;
  border-radius: 0.75rem;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 21px;
  font-weight: 400;
  line-height: 6.5rem;
  box-shadow: 0px 11px 300px 200px #10b3ff41;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-in;
  animation-name: animate-download;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
}

.download-button.no-shadow {
  transition: background 0.25s;
  transition-timing-function: ease-in;
  animation:none;
  box-shadow:none;
}

.download-button.no-shadow:hover {
  animation:none;
  box-shadow:none;
  background: #10b3ff;
  color: #fff;
  transition: background 0.1s;
  transition-timing-function: ease-out;
}

@keyframes animate-download {
  from {
    box-shadow: 0px 11px 300px 200px #10b3ff00;
  }

  to {
    box-shadow: 0px 11px 300px 200px #10b3ff41;
  }
}

.download-button:hover {
  background: #10b3ff;
  color: #fff;
  box-shadow: 0px 11px 300px 200px #10b3ff62;
  transition: box-shadow 0.25s background 0.1s;
  transition-timing-function: ease-out;
}

@media (max-width: 768px){
  .download-button{
    position: relative;
    z-index: 10;
    box-shadow: 0px 11px 76px 44px #10b3ff42;
    animation-name: animate-download-mobile;
  }

  .download-button:hover {
    box-shadow: 0px 11px 76px 44px #10b3ff56;
  }
}

@keyframes animate-download-mobile {
  from {
    box-shadow: 0px 11px 76px 44px #10b3ff00;
  }

  to {
    box-shadow: 0px 11px 76px 44px #10b3ff42;
  }
}

.dark-button {
  background: #0ea1e6;
  color: #fff;
  border-radius: 0.75rem;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 6.5rem;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-in;
  text-decoration: none;
  cursor: pointer;
}

.dark-button:hover {
  background: #10b3ff;
  color: #fff;
  box-shadow: 0px 0px 64px 20px #10b3ff38, 0px 5px 12px 0px #10b3ff24;
  transition: box-shadow 0.5s, background 0.1s;
  transition-timing-function: ease-out;
}

.dark-button.no-hover-shadow:hover {
  box-shadow: none;
  transition: background 0.25s;
  transition-timing-function: ease-out;
}

.dark-button.navbar-download-button {
  font-size: 11px;
  padding: 5px;
}

.light-button {
  background: #fff;
  color: #5e5e5e;
  border-radius: 0.75rem;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 6.5rem;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-in;
}

.light-button:hover {
  box-shadow: 0px 0px 64px 20px #ffffff24, 0px 5px 12px 0px #0000004a;
  color: #5e5e5e;
  background: #fff;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-out;
}

.light-button.no-hover-shadow:hover {
  box-shadow: none;
  transition: background 0.25s;
  transition-timing-function: ease-out;
}

.green-button {
  background: #009634;
  color: #fff;
  border-radius: 0.75rem;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 6.5rem;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-in;
  text-decoration: none;
  cursor: pointer;
}

.green-button:hover {
  background: #00be43;
  color: #fff;
  box-shadow: 0px 0px 64px 20px #00be4338, 0px 5px 12px 0px #00be4324;
  transition: box-shadow 0.5s, background 0.1s;
  transition-timing-function: ease-out;
}

.green-button.no-hover-shadow:hover {
  box-shadow: none;
  transition: background 0.25s;
  transition-timing-function: ease-out;
}

.hero-dark-button {
  background: #0ea1e6;
  color: #fff;
  border-radius: 0.75rem;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 21px;
  font-weight: 400;
  line-height: 6.5rem;
  box-shadow: 0px 11px 300px 200px #10b3ff41;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-in;
  animation-name: hero-dark-button-animate;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
}

.hero-dark-button:hover {
  background: #10b3ff;
  color: #fff;
  box-shadow: 0px 11px 300px 200px #10b3ff62;
  transition: box-shadow 0.25s background 0.1s;
  transition-timing-function: ease-out;
}

@keyframes hero-dark-button-animate {
  from {
    box-shadow: 0px 11px 300px 200px #10b3ff00;
  }

  to {
    box-shadow: 0px 11px 300px 200px #10b3ff41;
  }
}

.hero-light-button {
  background: #fff;
  color: #5e5e5e;
  border-radius: 0.75rem;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 21px;
  font-weight: 400;
  line-height: 6.5rem;
  box-shadow: 0px 11px 300px 200px #ffffff28;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-in;
  animation-name: hero-light-button-animate;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
}

.hero-light-button:hover {
  background: #fff;
  color: #5e5e5e;
  box-shadow: 0px 11px 300px 200px #ffffff41;
  transition: box-shadow 0.25s background 0.1s;
  transition-timing-function: ease-out;
}

@keyframes hero-light-button-animate {
  from {
    box-shadow: 0px 11px 300px 200px #ffffff00;
  }

  to {
    box-shadow: 0px 11px 300px 200px #ffffff28;
  }
}

.hero-green-button {
  background: #009634;
  color: #fff;
  border-radius: 0.75rem;
  padding: 25px;
  font-size: 21px;
  font-weight: 400;
  line-height: 6.5rem;
  box-shadow: 0px 11px 300px 200px #00963441;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-in;
  animation-name: hero-green-button-animate;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
}

.hero-green-button:hover {
  background: #00be43;
  color: #fff;
  box-shadow: 0px 11px 300px 200px #00963462;
  transition: box-shadow 0.25s background 0.1s;
  transition-timing-function: ease-out;
}

.hero-green-button-alt {
  background: #009634;
  color: #fff;
  border-radius: 0.75rem;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 21px;
  font-weight: 400;
  line-height: 6.5rem;
  box-shadow: 0px 11px 300px 200px #00963441;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-in;
  animation-name: hero-green-button-animate;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
}

.hero-green-button-alt:hover {
  background: #00be43;
  color: #fff;
  box-shadow: 0px 11px 300px 200px #00963462;
  transition: box-shadow 0.25s background 0.1s;
  transition-timing-function: ease-out;
}

@keyframes hero-green-button-animate {
  from {
    box-shadow: 0px 11px 300px 200px #00963400;
  }

  to {
    box-shadow: 0px 11px 300px 200px #00963441;
  }
}

.download-button-alt {
  background: #fff;
  color: #5e5e5e;
  border-radius: 0.75rem;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 6.5rem;
  transition: box-shadow 1s, background 0.5s;
  transition-timing-function: ease-in;
}

.download-button-alt.no-shadow {
  transition: color 0.25s;
  transition-timing-function: ease-in;
  animation: none;
  box-shadow: none;
}

.download-button-alt:hover {
  box-shadow: 0px 0px 64px 20px #ffffff24, 0px 5px 12px 0px #0000004a;
  color: #5e5e5e;
  background: #fff;
  transition: box-shadow 0.5s, background 0.25s;
  transition-timing-function: ease-out;
}

.download-button-alt.no-shadow:hover {
  animation:none;
  box-shadow:none;
  background: #fff;
  color: #000;
  transition: color 0.1s;
  transition-timing-function: ease-out;
}

.mobile-download-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

#upgrade-container {
  animation: upgrade-container-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995);
  -webkit-animation: upgrade-container-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995);
}

@keyframes upgrade-container-fadeIn {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

.vertical-card {
  position: relative;
  background-color: #46485a80;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
  padding: 2rem;
  margin-bottom: 6rem;
  width: 250px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  animation: vertical-card-fadeIn 1.5s cubic-bezier(0.565, 0.005, 0.675, 0.995), vertical-card-transform 1.5s ease;
  -webkit-animation: vertical-card-fadeIn 1.5s cubic-bezier(0.565, 0.005, 0.675, 0.995), vertical-card-transform 1.5s ease;
}

.vertical-card.primary {
  border:none;
  --shadow-color: rgb(0 39 255 / 23%);
  box-shadow: 0 2px 1px var(--shadow-color), 0 4px 2px var(--shadow-color), 0 8px 4px var(--shadow-color), 0 16px 8px var(--shadow-color), 0 32px 50px var(--shadow-color);
  animation: vertical-card-primary-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), vertical-card-primary-transform 1.5s ease;
  -webkit-animation: vertical-card-primary-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), vertical-card-primary-transform 1.5s ease;
}

.vertical-card.dark {
  background-color: #00000088;
}

.vertical-card.no-animation {
  animation: none;
}

.vertical-card.primary:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: 3px;
  border-radius: 1rem;
  background: linear-gradient(to bottom right, #39a5f4, #8339f4);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes vertical-card-primary-fadeIn {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes vertical-card-primary-transform {
  from {
    top: 100px;
  }

  to {
    top: 0;
  }
}

@keyframes vertical-card-fadeIn {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes vertical-card-transform {
  from {
    top: 150px;
  }

  to {
    top: 0;
  }
}

.pricing-container {
  position: relative;
  background-color: #46485a80;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
  padding: 2rem;
  width: 245px;
  height:670px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  animation: pricing-container-fadeIn 1.5s cubic-bezier(0.565, 0.005, 0.675, 0.995), pricing-container-transform 1.5s ease;
  -webkit-animation: pricing-container-fadeIn 1.5s cubic-bezier(0.565, 0.005, 0.675, 0.995), pricing-container-transform 1.5s ease;
}

.pricing-container.primary {
  border:none;
  --shadow-color: rgb(0 39 255 / 23%);
  box-shadow: 0 2px 1px var(--shadow-color), 0 4px 2px var(--shadow-color), 0 8px 4px var(--shadow-color), 0 16px 8px var(--shadow-color), 0 32px 50px var(--shadow-color);
  animation: pricing-container-primary-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), pricing-container-primary-transform 1.5s ease;
  -webkit-animation: pricing-container-primary-fadeIn 1s cubic-bezier(0.565, 0.005, 0.675, 0.995), pricing-container-primary-transform 1.5s ease;
}

.pricing-container.primary:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: 3px;
  border-radius: 1rem;
  background: linear-gradient(to bottom right, #39a5f4, #8339f4);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes pricing-container-primary-fadeIn {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes pricing-container-primary-transform {
  from {
    top: 100px;
  }

  to {
    top: 0;
  }
}

@keyframes pricing-container-fadeIn {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes pricing-container-transform {
  from {
    top: 150px;
  }

  to {
    top: 0;
  }
}

.license-details {
  color: rgb(156 163 175);
}

.button.add-to-cart {
  background: #39a5f4;
  border-radius: 0.75rem;
  color: #fff;
  box-shadow: none;
  border: none;
  width: 100%;
  font-size: medium;
  font-weight: 400;
  transition: background 0.5s ease;
}

.button.add-to-cart:hover {
  background: #2e87c7;
}

.button.check-for-discounts {
  background: #39a5f4;
  border-radius: 0.75rem;
  color: #fff;
  box-shadow: none;
  border: none;
  width: 100%;
  font-size: medium;
  font-weight: 400;
  transition: background 0.5s ease;
}

.button.check-for-discounts:hover {
  color: #fff;
  background: #2e87c7;
}

.button.check-for-discounts:focus {
  color: #fff;
  border-color: inherit;
}

#upgradeEmailBox::-moz-placeholder{
  font-weight: 300;
  opacity: 0.7;
  color: #fff;
}

#upgradeEmailBox::placeholder{
  font-weight: 300;
  opacity: 0.7;
  color: #fff;
}

.button.checkout {
  background: #39a5f4;
  border-radius: 0.75rem;
  color: #fff;
  box-shadow: none;
  border: none;
  width: 100%;
  font-size: medium;
  font-weight: 400;
  transition: background 0.5s ease;
}

.button.checkout:hover {
  background: #2e87c7;
}

.free-edition-container {
  position: relative;
  z-index: 10;
  background-color: #46485a80;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
  border-radius: 1rem;
  padding: 2rem;
  max-width: 450px;
  margin: auto;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  animation: free-edition-container-fadeIn 1.5s cubic-bezier(0.565, 0.005, 0.675, 0.995), free-edition-container-transform 1.5s ease;
  -webkit-animation: free-edition-container-fadeIn 1.5s cubic-bezier(0.565, 0.005, 0.675, 0.995), free-edition-container-transform 1.5s ease;
}

.free-edition-container.primary {
  border: 2px solid #39a5f4;
}

@keyframes free-edition-container-fadeIn {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes free-edition-container-transform {
  from {
    top: 150px;
  }

  to {
    top: 0;
  }
}

.button.free-edition {
  background: #39a5f4;
  border-radius: 0.75rem;
  color: #fff;
  box-shadow: none;
  border: none;
  font-size: medium;
  font-weight: 400;
  transition: background 0.5s ease;
}

.button.free-edition:hover {
  background: #2e87c7;
}

.pricing-title {
  margin-bottom: 2rem;
}

.pricing-download {
  text-align: center;
}

.features-list li {
  list-style: none;
}

.features-list li:before {
  content: '✓';
  margin-right: 0.5rem;
}

.pricing-container {
  margin-bottom: 2rem;
  box-shadow: 0 2px 1px rgb(0 0 0 / 9%), 0 4px 2px rgb(0 0 0 / 9%), 0 8px 4px rgb(0 0 0 / 9%), 0 16px 8px rgb(0 0 0 / 9%), 0 32px 16px rgb(0 0 0 / 9%);
}

@media (max-width: 741px){
  .pricing-container {
    height: auto;
    width: 70%;
    max-width: 245px;
    margin-bottom: 6rem;
  }

  .free-edition-container {
    width: 70%;
    margin-bottom: 2rem;
  }

  .license-details {
    position: relative;
    bottom: auto;
  }

  .button.add-to-cart {
    width: 60%;
  }

  .pricing-title {
    text-align: center;
  }

  .pricing-price {
    text-align: center;
  }

  .products {
    margin-bottom: 0rem;
  }

  #cartDiv {
    margin-bottom: 2rem;
  }
}

.events-section {
  border-radius: 1rem;
  box-shadow: 0 0px 1px 1px rgb(0 0 0 / 2%),
              0 0px 2px 2px rgb(0 0 0 / 2%),
              0 0px 4px 4px rgb(0 0 0 / 2%),
              0 0px 8px 8px rgb(0 0 0 / 2%),
              0 0px 16px 16px rgb(0 0 0 / 1%);
}

.events-section-dark {
  background: #46485a80;
  border-radius: 1rem;
  border: 1px solid #ffffff1f;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.event-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: center;
}

.event-card-image-container {
  height: 60px;
  width: 60px;
  min-height: 60px;
  min-width: 60px;
}

.event-card-image {
  height: 60px;
  width: 60px;
  min-height: 60px;
  min-width: 60px;
}

.event-header {
  margin-bottom: 0px;
}

.event-description {
  margin-bottom: 0px;
}

.event-card-signup {
  margin-right: 0;
  margin-left: auto;
  min-width: -moz-max-content;
  min-width: max-content;
}

.event-card-signup-button {
  margin-top: 0;
  margin-bottom: auto;
  background: #04a;
  color: #fff;
  border-radius: 1rem;
  padding: 1rem;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2rem;
  transition: background 0.125s;
  transition-timing-function: linear;
}

.event-card-signup-button:hover {
  background: #0059df;
  color: #fff;
  transition: background 0.125s;
  transition-timing-function: linear;
}

.class-schedule-container {
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0px 1px 1px rgb(0 0 0 / 2%),
              0 0px 2px 2px rgb(0 0 0 / 2%),
              0 0px 4px 4px rgb(0 0 0 / 2%),
              0 0px 8px 8px rgb(0 0 0 / 2%),
              0 0px 16px 16px rgb(0 0 0 / 1%);
}

.class-schedule-card {
  height: 5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 2rem;
  align-items: center;
}

.class-schedule-signup-button {
  margin-top: 0;
  margin-bottom: auto;
  background: #04a;
  color: #fff;
  border: 1px solid #7aaeff70;
  border-radius: 1rem;
  padding: 1rem;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2rem;
  transition: background 0.125s;
  transition-timing-function: linear;
}

.class-schedule-signup-button:hover {
  background: #0059df;
  color: #fff;
  transition: background 0.125s;
  transition-timing-function: linear;
}

.class-schedule-container-dark {
  border-radius: 1rem;
  background: #46485a80;
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
  border: 1px solid #ffffff1f;
  box-shadow: 0 0px 1px 1px rgb(0 0 0 / 2%),
              0 0px 2px 2px rgb(0 0 0 / 2%),
              0 0px 4px 4px rgb(0 0 0 / 2%),
              0 0px 8px 8px rgb(0 0 0 / 2%),
              0 0px 16px 16px rgb(0 0 0 / 1%);
}

.class-schedule-card-dark {
  height: 5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 2rem;
  align-items: center;
}

.class-schedule-signup-button-dark {
  margin-top: 0;
  margin-bottom: auto;
  background: #0ea1e6;
  color: #fff;
  border-radius: 1rem;
  padding: 1rem;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2rem;
  transition: background 0.125s;
  transition-timing-function: linear;
}

.class-schedule-signup-button-dark:hover {
  background: #10b3ff;
  color: #fff;
  transition: background 0.125s;
  transition-timing-function: linear;
}

.tb101-recording {
  box-shadow: 0px 0.2px 1.4px -8px rgba(0, 0, 0, 0.209),
              0px 0.5px 3.9px -8px rgba(0, 0, 0, 0.3),
              0px 1.2px 9.3px -8px rgba(0, 0, 0, 0.391),
              0px 4px 31px -8px rgba(0, 0, 0, 0.6);
}

.categories-title-dark {
  margin-bottom: 1rem;
}

.categories-box-dark {
  border: 1px solid #ffffff1f;
  background: #46485a80;
  color: #fff;
  border-radius: 0.5rem;
  margin: auto;
}

.categories-box-dark-offset-top {
  margin-top: 3rem;
}

.categories-box-dark h5 {
  margin: 0;
  border-bottom: 1px solid #eee;
  padding: 8px 20px;
}

.current-category-dark .category-link-dark {
  color: #888;
}

.category-list-dark {
  padding: 0;
  margin: 0;
  list-style: none;
}

.category-list-dark li {
  text-indent: 0;
  margin-left: 0;
}

.category-item-dark {
  padding: 0;
  margin: 0;
}

.category-link-dark {
  position: relative;
  color: #fff;
  display: block;
  padding: 8px 20px;
  border-bottom: 1px solid #ffffff1f;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.1rem;
}

.category-item-dark:first-child .category-link-dark {
  border-radius: 4px 4px 0 0;
}

.category-item-dark:last-child .category-link-dark {
  border-radius: 0 0 4px 4px;
  border-bottom-width: 0;
}

.category-link-dark:hover {
  color: #fff;
  background: #04a;
  border-bottom-color: #04a;
}

.current-selection-dark,
.other-selection-dark {
  border: 1px solid #ffffff1f;
  border-radius: 4px;
  padding: 3px;
  font-weight: 500;
  color: #fff;
}

.current-selection-dark a,
.other-selection-dark a,
.current-selection-dark a:hover,
.other-selection-dark a:hover {
  font-weight: 500;
  color: #fff;
}

.other-selection-dark {
  background: #020a14;
}

.current-selection-dark {
  background-color: #2e87c7;
  color: #fff;
}

.button.next {
  border-color: #ffffff1f;
  background: #020a14;
  color: #fff;
}

.button.prev {
  border-color: #ffffff1f;
  background: #020a14;
  color: #fff;
}

.featured-brain {
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: 6rem;
  background-color: #27293c;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  padding-top: 2rem;
  min-height: 568px;
}

.featured-brain-button {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 1rem;
  background: #04a;
  color: #fff;
  border-radius: 1rem;
  padding: 1rem;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1rem;
  transition: background 0.125s;
  transition-timing-function: linear;
}

.featured-brain-button:hover {
  background: #0059df;
  color: #fff;
  transition: background 0.125s;
  transition-timing-function: linear;
}

.brain-thumbnail {
  border: 1px solid #ffffff36;
}

/* Input fields for newsletter and store forms */

.input-problem {
  opacity: 0;
  font-size: 14px;
  margin-top: 1px;
  margin-bottom: -10px;
  color: #f40;
  transition: opacity 0.3s;
}

.input-info {
  font-size: 14px;
  margin-bottom: 2px;
  color: #ffffff88;
}

input[type="text"].text-input {
  background-color:#46485a80;
  background:#46485a80;
  border: 1px solid #ffffff1f;
  width: 100%;
  margin: 0;
}

input[type="checkbox"].checkbox-input {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 25%;
  margin: 0;
  margin-right: 1rem;
}

label.checkbox-label {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
}

.progress-wheel {
  margin: auto;
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #7d41f3;
  border-radius: 50%;
  animation: animate-progress-wheel 1.5s linear infinite;
}

@keyframes animate-progress-wheel {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  60% {
    transform: translateX(-10px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0);
  }
}

.shake {
  animation: shake 0.5s;
  animation-iteration-count: 1;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:brightness-200:hover {
  --tw-brightness: brightness(2);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 640px) {
  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

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

@media (min-width: 768px) {
  .md\:top-\[-50px\] {
    top: -50px;
  }

  .md\:top-\[-60px\] {
    top: -60px;
  }

  .md\:top-\[-80px\] {
    top: -80px;
  }

  .md\:order-1 {
    order: 1;
  }

  .md\:order-2 {
    order: 2;
  }

  .md\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:max-h-\[150px\] {
    max-height: 150px;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-11\/12 {
    width: 91.666667%;
  }

  .md\:max-w-\[1200px\] {
    max-width: 1200px;
  }

  .md\:max-w-\[900px\] {
    max-width: 900px;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-nowrap {
    flex-wrap: nowrap;
  }

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

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

@media (min-width: 1024px) {
  .lg\:gap-20 {
    gap: 5rem;
  }
}