/** Shopify CDN: Minification failed

Line 15:2 Unexpected "custom-overlay("
Line 438:2 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:subscription-page (INDEX:63, SCOPED:FALSE) */
.okeConnect.okeQuizzes{
    display: none !important;
  }
  custom-overlay([open][data-loading]){
    border-radius: 0 !important;
  }
  .image-wrapper {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    transition-property: opacity;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    background: #f5f5f5;
  }

  .image-wrapper.is-active {
    opacity: 1;
  }

  .image-transition {
    opacity: 1;
  }

  .image-transition {
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .animate-float-slow {
    animation: float 3s ease-in-out infinite;
  }

  .image-transition.fade-out {
    opacity: 0;
  }

  @keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-30px);
    }
    100% {
      transform: translatey(0px);
    }
  }
  [data-page-container] {
    grid-template-rows: 75px 1fr 75px;
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'main  '
      'footer';
    display: grid;
    min-height: 100vh;
  }

  [data-header] {
    grid-area: header;
    border-bottom: 1px solid #c3c3c3;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  [data-header] a{
    width: auto;
    height: 100%;
  }
  [data-header] img {
    filter: invert(1);
    width: auto;
    max-width: 100%;
  }
  [data-footer] {
    grid-area: footer;
    border-top: 1px solid #c3c3c3;
    display: flex;
    justify-content: space-between;

    align-items: center;
  }
  [data-back] {
    padding: 0px 60px;
    border-right: 1px solid #c3c3c3;
    cursor: pointer;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  [data-back] svg {
    width: 32px;
    height: 32px;
  }
  path {
    fill: #232323;
    fill-opacity: 0.7;
  }
  [data-forward] {
    padding: 15px;
    border-left: 1px solid #c3c3c3;
    height: 100%;
    max-height: 100%;
    display: flex;
    align-content: center;
  }
  [data-breadcrumbs] {
    display: flex;
    justify-content: space-evenly;
    width: 33%;
    margin-inline: auto;
    align-items: center;
  }
  .desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 10px;
  }
  .mobile {
    display: none;
  }
  [data-breadcrumbs] button {
    background: transparent;
    border: none;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    color: #ccc;
  }

  [data-breadcrumbs] button.active {
    text-decoration: underline;
    color: #232323;
  }
  [data-breadcrumbs] button span:first-child {
    border: 1px solid #c3c3c3;
    border-radius: 100%;
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
  }
  [data-checkout] {
    /* padding: 30px 60px; */
    border-radius: 40px;
    background: #ccc;
    border: none;
    font-size: 1.5rem;
    line-height: 1rem;
    color: white;
    cursor: pointer;
    min-width: 180px;
    width: 100%;
    cursor: not-allowed;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  [data-forward-icon] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  [data-forward-icon] svg {
    width: 30px;
    height: 30px;
    filter: grayscale(1) invert(1);
    transform: rotate(-180deg);
  }

  [data-forward-icon] svg path {
    fill-opacity: 1;
  }

  [data-checkout].btn-active {
    background: #232323;
    cursor: pointer;
  }
  [data-content-container] {
    grid-area: main;
    display: flex;
    flex-flow: row nowrap;
  }

  [data-product-image] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 50%;
    border-right: 1px solid #c3c3c3;
    position: relative;
  }
  [data-product-image] img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 720px;
    max-height: 100%;
  }

  [data-product-image] img:nth-child(1) {
    filter: sepia(0);
  }
  [data-flow-container] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    max-width: 500px;
    flex: 0 0 50%;
  }
  div:empty {
    display: unset !important;
  }

  .loader {
    display: none;
  }

  .loader.visible {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 2.5em;
  }
  .loader.visible svg {
    width: 2.5em;
    height: 2.5em;
  }
  .loader.visible path {
    fill: #fff;
  }
  .animate-spin {
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media screen and (max-width: 786px) {
    .desktop {
      display: none;
    }
    .noscroll{
      overflow: hidden;
      position: fixed;
    }
    [data-page-container] {
      display: grid;
      grid-template-rows: 120px 1fr;
      min-height: 100vh;
      padding-bottom: 60px;
    }
    [data-product-image] {
      min-height: 300px;
      flex: unset;
      max-height: 300px;
    }
    [data-product-image] img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    [data-content-container] {
      flex-direction: column;
      overflow-y: auto;
    }
    [data-flow-container] {
      padding-inline: 15px;
      flex: unset;
    }
    [data-footer] {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: 60px;
      padding: 0;
      width: 100%;
      min-width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-flow: row nowrap;
      padding: 0;
    }

    [data-back] {
      padding: 0;
      display: none;
    }
    [data-back] svg {
      width: 30px;
      height: 30px;
      margin: auto;
    }
    [data-forward] {
      border-left: none;
      padding: 0;
      flex: 0 0 100%;
    }
    [data-breadcrumbs] {
      display: flex;
      width: 100%;
      height: 100%;
      background: white;
      color: black;
      flex-flow: row nowrap;
      overflow-x: auto;
      transition: all 0.3s;
      border: none;
    }
    [data-breadcrumbs].desktop {
      display: none;
    }
    [data-breadcrumbs].mobile {
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-inline: 10px;
      position: fixed;
      top: 60px;
      padding: 10px;
      min-height: 60px;
    }

    [data-breadcrumbs] svg {
      display: none;
    }

    [data-checkout] {
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 0;
      font-size: 2.5rem;
      min-height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }
    [data-header] {
      display: flex;
      justify-content: center;
      align-items: baseline;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      max-height: 60px;
      height: 100%;
    }
    [data-header],
    [data-footer] {
      background: white;
      z-index: 1000;
    }
    [data-header] a{
      width: 100%;
      height: 100%;
      text-align: center;
    }
    [data-header] img{
      
      max-width: 250px;
      height: auto;
      max-height: 60px;
    }
    /* [data-header] img {
      filter: invert(1);
      width: 100%;
      max-width: 180px;
      height: auto;
      max-height: 100%; */
    }
    /*

      [data-breadcrumbs] button{
      background: transparent;
      border: none;
      display: flex;
      align-items: center;
      cursor: pointer;
      border-right: 1px solid #c3c3c3;
      height: 100%;
      align-content: center;
      text-align: center;
      justify-content: center;
      color: black;
      margin-block: auto;
      flex: 0 0 20%;
      gap: 1rem;
    }

  [data-breadcrumbs] button:first-child{
    border-left: none;
  }
  [data-breadcrumbs] button:last-child{
    border-right: none;
  }
    */
  }
/* END_SECTION:subscription-page */