/* helpers */
.grayscale {
  filter: grayscale(1)
}
.absolute-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.text-align-center {
  text-align: center;
}
.justify-content-center {
  justify-content: center !important;
}
.margin-bottom-20 {
  margin-bottom: 20px !important;
}
.margin-bottom-30 {
  margin-bottom: 30px !important;
}
.full-width {
  width: 100%;
}

/* vue */
[v-cloak] { display: none; }

/* generic */
.success-message {
  background: #E8FAED;
  color: #069E2C;
  padding: 20px;
}
.link-bold {
  text-decoration: underline;
}

/* purchase page - loading */
.page-loading .page-loading-logo {
  display: block;
}
.page-loading .w-lightbox-spinner {
  position: relative;
  display: block;
  margin-top: 42px;
}
.page-loading .button-primary {
  margin-top: 20px;
}

/* buttons */
.button-primary[disabled=true] {
  background: rgba(5, 2, 41, 0.4);
}
.button-secondary.full-width {
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}
.button-icon {
  height: 24px;
  margin-right: 10px;
  margin-top: -6px;
}
.button-sublabel {
  font-size: 14px;
  font-weight: normal;
}


/* mobile nav button */
.menu-button .header-menu-button-icon-top, 
.menu-button .header-menu-button-icon-medium,
.menu-button .header-menu-button-icon-bottom {
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  opacity: 1;
  transition: all 0.3s;
}
.menu-button.open .header-menu-button-icon-top {
  transform: translate3d(0px, 7px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(140deg) skew(0deg, 0deg);
  transform-style: preserve-3d;
}
.menu-button.open .header-menu-button-icon-medium {
  opacity: 0;
}
.menu-button.open .header-menu-button-icon-bottom {
  transform: translate3d(0px, -7px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(40deg) skew(0deg, 0deg);
  transform-style: preserve-3d;
}

/* mobile nav */
@media screen and (max-width: 767px) {
  .button-primary.header-button {
    display: block;
  }
}
@media screen and (max-width: 380px) {
  .button-primary.header-button {
    padding: 16px 10px;
    font-size: 13px;
    margin-right: 10px;
  }
}
@media screen and (max-width: 991px) {
  .nav-menu {
    left: 0;
    top: 0;
    height: 100%;
    display: none;
  }
  .nav-menu.show-mobile-menu {
    display: block;
  }
  .w-nav-button {
    display: block;
  }
}

/* hero */
.paragraph-large.home-hero {
  margin-bottom: 16px;
}
._2-buttons {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  ._2-buttons.home-hero {
    margin-bottom: 16px;
  }
}
@media screen and (max-width: 991px) {
  .section.home-hero {
    padding-bottom: 0;
  }
}

/* footer */
.title.footer-menu {
  margin-top: 16px;
}

/* dialog */
.dialog, .dialog-background, .dialog-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.dialog {
  position: fixed;
  z-index: 1000;
}
.dialog-background {
  background: rgba(0,0,0,0.65);
  z-index: 10;
}
.dialog-content {
  z-index: 20;
}
.dialog-content .card {
  max-height: 100%;
  overflow: auto;
}
.dialog-button-close, .dialog-button-close img {
  width: 20px;
  height: 20px;
  display: block;
}
.dialog-button-close {
  position: absolute;
  right: 20px;
  top: 20px;
}
.dialog-loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: white;
}
.dialog .card.password {
  width: 460px;
  max-width: 100%;
}
@media screen and (max-width: 460px) {
  .dialog .card.password {
    height: 100%;
  }
}

/* dialog - login */
.dialog-login .icon-password {
  background: none;
  width: 100px;
  height: 100px;
  border-radius: 20px;
}
.dialog-login .icon-password .icon-password-image {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .dialog-login .icon-password {
    width: 90px;
    height: 90px;
  }
}
@media screen and (max-width: 479px) {
  .dialog-login .icon-password {
    width: 80px;
    height: 80px;
  }
}

/* dialog - purchase failure */
.dialog-purchase-failure .button-primary {
  margin-bottom: 20px;
}

/* dialog - download */
.dialog-download .download-section * {
  visibility: visible !important;
}


/* forms */
.form .error-message {
  margin-top: -10px;
  margin-bottom: 20px;
  font-size: 16px;
  padding: 6px 10px;
  line-height: 1.3em;
  border-radius: 10px;
  display: block;
}

/* wow */
.wow-hide-initial {
  opacity: 0;
}


/* beta signup */
.beta-signup-header {
  border-bottom: 1px solid #c8c8d5;
  padding: 20px;
  margin-bottom: 20px;
}
.beta-signup .header-logo {
  margin-bottom: 20px;
}
.beta-signup-content {
  padding: 20px;
  max-width: 560px;
  margin: 0 auto;
}
.beta-signup-content .button-wrap {
  margin-bottom: 15px;
}
.beta-signup-content .button-wrap-left {
  margin-right: 26px;
}
@media screen and (max-width: 767px) {
  .beta-signup-content .button-wrap {
    margin-right: 0;
  }
}
.beta-signup-content .button-primary._2-buttons-button {
  margin-right: 0;
  margin-bottom: 0;
}
.beta-signup-content .button-active, .beta-signup-content .button-active:hover {
  background: #050229 !important;
  color: #fff;
}
.beta-signup-content .button-secondary:hover {
  background-color: #676788;
}
.beta-signup-content .button-secondary .button-icon {
  transition: filter 0.3s;
  filter: brightness(0);
}
.beta-signup-content .button-secondary:hover .button-icon,
.beta-signup-content .button-secondary.button-active .button-icon {
  transition: filter 0.3s;
  filter: brightness(1);
}
.beta-signup-content .button-wrap .button-slots {
  margin-top: 5px;
  color: #ACACBE;
}
.beta-signup-content .button-wrap .button-slots-red {
  color: #EA3843;
  font-weight: bold;
}
.beta-signup-email .input {
  margin-bottom: 10px;
}
.beta-signup-form .confirm-test-both {
  border-radius: 14px;
  padding: 14px 10px 1px 0px;
}
.beta-signup-submit {
  margin-top: 40px;
}
.beta-signup-loading {
  position: relative;
  height: 100px;
}