.light-bg {
      background: #fff;
      color: #000;
      padding: 0 0 1px;
}

section {
      padding: 40px;
}

@media (min-width: 992px){
      section {
            padding: 40px 120px;
      }
}

.section-row {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 20px;
}

.section-col {
      width: 100%;
}

@media (min-width: 992px){
      .section-col {
            width: 50%;
      }

      .section-col-66 {
            width: 66%;
      }


      .section-col-50 {
            width: 50%;
      }

      .section-col-33 {
            width: 33%;
      }
}

.shifty-section-alternate > .shifty-row {
      gap: 100px;
}

.shifty-section-alternate:nth-child(2n) {
      background: #f0f4f9;
}

#hero-bg {
      width: 100vw;
      height: 1000px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      pointer-events: none;
      user-select: none;
}

#hero {
      padding: 30px;
      color: #fff;
      row-gap: 50px;
}

@media (min-width: 1200px){
      #hero {
            background: url(../images/hero-bg.webp) no-repeat;
            background-position: top left;
            background-size: 400px;
            padding: 60px 120px 0;
      }
}

#hero-title {
      display: flex;
      flex-direction: column;
      gap: 35px;
}

#hero .logo {
      width: 66%;
      min-width: 300px;
}

#hero .cta-block {
      text-align: center;
}

@media (min-width: 992px){
      #hero .cta-block {
            text-align: left;
      }
}

#hero-caption-inner {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
}

#hero-caption h1 {
      font-size: 2em;
      margin: 0;
}

#hero-caption h2 {
      color: #fae716;
      font-size: 2em;
      margin: 0;
      font-family: SpaceGrotesk-Bold;
      text-transform: uppercase;
}

#hero-caption h3 {
      margin: 0;
      font-size: 2em;
      font-family: SpaceGrotesk-SemiBold;
}

@media (min-width: 992px){
      #hero-caption h1 {
            font-size: 3em;
            margin: 0;
      }

      #hero-caption h2 {
            color: #fae716;
            font-size: 3em;
            margin: 0;
            font-family: SpaceGrotesk-Bold;
            text-transform: uppercase;
      }

      #hero-caption h3 {
            margin: 0;
            font-size: 2em;
            font-family: SpaceGrotesk-SemiBold;
            align-self: flex-end;
      }

}

.shifty-row,
.shifty-col {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
}

.shifty-row-separated {
      margin: 50px 0;
}

.shifty-row-separated-small {
      margin: 30px 0;
}

.shifty-row-secondary {
      padding: 40px 0;
      background: #ededed;
}

.shifty-row-fullwidth {
      width: 100%;
}

@media (min-width: 993px) {
      .shifty-row-fullwidth {
            margin-left:-30px;
            margin-right:-30px;
            width: calc(100% + 60px);
      }
}

@media (min-width: 1200px){
      .shifty-row-fullwidth {
            margin-left:-60px;
            margin-right:-60px;
            width: calc(100% + 120px);
            border: unset;
      }
}

@media (min-width: 769px){
      .shifty-row-same-height > div,
      .shifty-full-height {
            height: 100%;
      }
}

.shifty-col-33,
.shifty-col-50,
.shifty-col-66 {
      width: 100%;
}

.shifty-col-25,
.shifty-col-50-s,
.shifty-col-75 {
      width: calc(50% - 50px);
}

@media (min-width: 769px){
      .shifty-col-50 {
            width: calc(50% - 50px);
      }

      .shifty-col-25 {
            width: calc(25% - 25px;);
      }

      .shifty-col-33 {
            width: calc(33% - 50px);
      }

      .shifty-col-66 {
            width: calc(66% - 50px);
      }

      .shifty-col-75 {
            width: calc(75% - 50px);
      }
}

.shifty-col-padded {
      padding: 15px 30px;
}


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

@media (max-width: 768px) {
      .justify-center-on-mobile {
            justify-content: center;
      }
}

.justify-evenly {
      justify-content: space-evenly;
}

.justify-end {
      justify-content: flex-end;
}

.align-bottom {
      align-items: flex-end;
}

.align-top {
      align-items: flex-start;
}

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

.align-right {
      justify-content: flex-end;
}

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

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

.block-centered {
      display: block;
      text-align: center;
}

.is-hidden {
      display: none !important;
}

.no-border {
      border: unset !important;
}

.simple-col-gap {
      column-gap: 15px;
}

.simple-row-gap {
      row-gap: 15px;
}

.shifty-grid-2-col {
      display: block;
}

@media (min-width: 768px){
      .shifty-grid-2-col {
            display: grid;
            grid-template-columns: 1fr 1fr;
      }
}

.shifty-auto-grid {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      gap: 15px 7px;
      list-style: none;
}

.shifty-flex-list {
      margin: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 5px 5px;
}

.shifty-condition-list a {
      display: flex;
      flex-direction: column;
      width: 80px;
      background: #fff300;
      height: 80px;
      align-items: center;
      justify-content: space-evenly;
      border-radius: 15px;
      border: 2px solid #000;
      color: #000;
      text-decoration: none;
      font-size: .7em;
      text-align: center;
}

.shifty-btn,
.woocommerce-Button,
#place_order {
      display: inline-block;
      padding: 10px 20px;
      border: 1px solid #373625;
      border-radius: 15px;
      background: #fff;
      color: #000;
      font-family: SpaceGrotesk-SemiBold;
      text-decoration: none;
      line-height: 1em;
      cursor: pointer;
}

.shifty-btn.shifty-btn-action {
      border-color: #fff300;
      background: #fff300;
      color: #000;
}

.shifty-btn.shifty-btn-brand,
#place_order {
      background: #fb4313;
      color: #fff;
      border-color: #fb4313;
}

.shifty-btn-s {
      padding: 5px 10px;
      font-size: .9em;
}

.shifty-icon {
      width: 1em;
}

.shifty-info-box {
      font-family: SpaceGrotesk-SemiBold;
}

.shifty-info-box-light {
      background: #fff;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 2px 2px 4px rgba(0,0,0,.2);
      font-size: 1.25em;
      line-height: 1.5em;
}

@media (max-width: 768px){
      .hide-on-mobile	{
            display: none;
      }
}

@media (min-width: 768px){
      .show-on-mobile	{
            display: none;
      }
}


h1,h2,h3,h4,h5,h6 {
      font-family: SpaceGrotesk-SemiBold;
      font-weight: normal;
}

h1 {
      display: inline-block;
      margin: 20px 60px;
      font-size: 3em;
      position: relative;
      box-sizing: border-box;
}

@-moz-document url-prefix() {
      h1::after {
            transform: skewX(-15deg);
      }
}

h2 {
      font-size: 4em;
      line-height: 1em;
      margin: 0 0 30px;
}

em {
      font-family: SpaceGrotesk-SemiBold;
}

#live-editor h3 {
      font-size: 2em;
      color: #00aef9;
      margin: 0 0 30px;
      text-align: center;
}

#live-editor h2 {
      font-size: 2.5em;
      text-align: center;
}

#live-editor .video-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 0;
      background: #000;
}

#live-editor iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
}

@media(min-width: 992px){
      #live-editor h2 {
            font-size: 4em;
            margin: 0 0 50px;
      }

      #live-editor .video-wrapper {
            padding: 50px 100px;
      }
}

.shifty-badge {
      position: absolute;
      top: 0;
      right: 0;
      transform: translateY(-50%);
      background: #fff300;
      padding: 4px 8px;
      border-radius: 15px;
      text-transform: uppercase;
      font-size: 0.7em;
      font-family: SpaceGrotesk-SemiBold;
}

.shifty-highlight-wrapper {
      position: relative;
      margin: 0 5px;
}

.shifty-highlight-wrapper a {
      position: relative;
      color: #fff;
}

.shifty-highlight-wrapper::before {
      content: " ";
      display: block;
      height: 92%;
      width: 92%;
      margin-left: -3px;
      margin-right: -3px;
      position: absolute;
      background: #fa4313;
      transform: rotate(2deg);
      top: -6px;
      left: -1px;
      border-radius: 20% 25% 20% 24%;
      padding: 10px 3px 3px 10px;
}

.shifty-box {
      font-size: 0.75em;
      background: #ededed;
      border: 1px solid #cccccc;
}

@media (min-width: 1200px) {
      .shifty-box {
            font-size: 1em;
      }
}

.shifty-info-list {
      width: 75%;
      background: #fff;
      list-style: none;
      border-radius: 15px;
      margin: 0;
      padding: 25px;
      font-size: 1.5em;
}

.shifty-info-list li {
      margin: 15px 0;
}

.shifty-info-list-grid-2 {
      display: grid;
      grid-template-columns: 50% 50%;
}

.shifty-info-list-inline {
      width: auto;
      margin: 10px 0;
      padding: 0 50px 0 10px;
      font-size: 1em;
}

.shifty-nice-list {
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0 20px;
      font-size: 0.75em;
}

.shifty-nice-list li {
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      background: #fff;
      border-radius: 50px;
      margin: 20px 0;
      padding: 10px;
      width: 100%;
      height: 60px;
      max-width: 500px;
}

.shifty-nice-list li::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      background: #d7d7d7;
      border-radius: 50px;
      transition: all ease 1s;
}

.shifty-nice-list li.is-disabled::before {
      opacity: .7;
}

.shifty-nice-list li.is-disabled img {
      filter: grayscale(1);
      opacity: 0.45;
}

.shifty-nice-list li img {
      width: 200px;
      height: auto;
}

.pseudo-nice-list-element {
      width: 180px;
      vertical-align: middle;
      border: 1px solid #d6d6d6;
      padding: 5px 20px;
      border-radius: 50px;
}

.shifty-gauge-badge {
      text-align: center;
}

.shifty-gauge-outer {
      position: relative;
}

.shifty-gauge-result {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      font-size: 3em;
      font-family: monospace;
}

.shifty-gauge-result-small {
      font-size: 2.6em;
      transform: translate(-50%, -60%);
}

.shifty-gauge-pass .shifty-gauge-result {
      color: #0cce6b;
}

.shifty-gauge-average .shifty-gauge-result {
      color: #ffa400;
}

.shifty-gauge-fail .shifty-gauge-result {
      color: #ff4e42;
}

.shifty-gauge {
      width: 120px;
      transform: rotate(-90deg);
}

.shifty-gauge-inner {
      stroke-width: 8;
      transition: all ease 1s;
}

.shifty-gauge-pass .shifty-gauge-inner {
      fill: #e5f9ef;
}

.shifty-gauge-average .shifty-gauge-inner {
      fill: #fff5e4;
}

.shifty-gauge-fail .shifty-gauge-inner {
      fill: #ffeceb;
}

.shifty-gauge-border {
      fill: transparent;
      transition: all ease 1s;
}

.shifty-gauge-pass .shifty-gauge-border {
      stroke: #0cce6b;
}

.shifty-gauge-average .shifty-gauge-border {
      stroke: #ffa400;
}

.shifty-gauge-fail .shifty-gauge-border {
      stroke: #ff4e42;
}

.shifty-fox-header {
      position: relative;
}

.shifty-fox-header-first-letter {
      position: absolute;
      top: 50%;
      left: 55px;
      transform: translateY(-50%);
}

.shifty-fox-header-inner {
      background-image: url(../images/live-editor.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 195px;
      display: inline-block;
      text-align: right;
      padding-right: 18px;
      margin-right: -15px;
}

.shifty-fox-header-inner {
      position: relative;
      z-index: 2;
}

.shifty-fox-header-last-word {
      font-family: SpaceGrotesk-Light;
}

.shifty-animated-editor {
      height: 400px;
      background: #fff;
      border-radius: 10px;
      padding: 5px;
      font-size: 0.85em;
      width: 100%;
      margin: 10px;
      overflow: hidden;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
}

.shifty-animated-editor span::selection {
      background: #B4D5FF;
}

.shifty-animated-editor span.injected::selection {
      background: rgba(255,243,0,0.3);
}

.shifty-animated-editor .shifty-injected {
      background: #fff300;
      border-radius: 15px;
      position: relative;
      margin: 10px;
      animation-duration: 1s;
      animation-name: bounceIn;
}

.shifty-animated-editor .shifty-injected::before {
      content: "";
      width: 75px;
      height: 75px;
      background: #fff;
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(10px, -15px);
      border: 6px solid #fff300;
      border-radius: 100px;
}

.shifty-animated-editor .shifty-injected::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(-4px, 4px);
      width: 50px;
      background-image: url(../images/fox.png);
      background-size: contain;
      background-repeat: no-repeat;
      height: 50px;
}

.shifty-animated-editor .shifty-injected.fadeOut {
      animation-name: fadeOut;
      opacity: 0;
      max-height: 0;
      margin: 0 10px;
}

.shifty-waterfall {
      width: 100%;
      background: #fff;
      border-left: 1px solid #efefef;
      font-family: Arial,sans-serif;
      font-size: 11px;
      table-layout: fixed;
}

.shifty-waterfall td {
      padding: 2px 3px;
      border-bottom: 1px solid #efefef;
      white-space: nowrap;
      text-overflow: clip;
      overflow: hidden;
}

.shifty-waterfall thead {
      font-weight: bold;
}

.shifty-waterfall tr.is-moving {
      box-shadow: 0px 0px 1px 2px #fff300;
}

.shifty-waterfall tr td:nth-child(1){
      font-weight: bold;
      width: 30%;
}

.shifty-waterfall tr td:nth-child(2){
      width: 55px;
}

.shifty-waterfall tr td:nth-child(3){
      width: 120px;
}

.shifty-waterfall tr td:nth-child(4){
      width: 50px;
}

.shifty-waterfall tr td:nth-child(5){
      width: 70%;
}

.shifty-timeline {
      height: 16px;
      float: left;
}

.shifty-timeline-blocking {
      background: #e0d0b8;
}

.shifty-timeline-dns {
      background: #57b0bf;
}

.shifty-timeline-connecting {
      background: #b0dc59;
}

.shifty-timeline-sending {
      background: #a18f36;
}

.shifty-timeline-waiting {
      background: #9788b6;
}

.shifty-timeline-receiving {
      background: #b7b7b7;
}

#pricing-section h2 {
      text-align: center;
      font-size: 2.5em;
      margin: 0 0 20px;
}

#pricing-section h3 {
      font-size: 1.5em;
      text-align: center;
      color: #0dc167;
      margin: 0;
}

@media (min-width: 992px){
      #pricing-section h2 {
            font-size: 4em;
      }

      #pricing-section h3 {
            margin: 0 0 50px;
            font-size: 2em;
            margin: 0 0 50px;
      }
}


@media (min-width: 992px){
      #pricing-section {
            scroll-margin-top: 100px;
      }
}

.pricing-table {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
      padding: 40px 20px;
}

.pricing-table-group {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      justify-content: center;
}

.pricing-table-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 300px;
      background: #f0f4f9;
      border-radius: 15px;
      padding: 15px 15px 50px;
}

.plan-details {
      margin: 0 0 30px;
}

.plan-details span {
      display: block;
      margin: 0 0 30px;
      font-size: 1.25em;
}

.plan-details strong {
      font-family: SpaceGrotesk-SemiBold;
      font-weight: normal;
      font-size: 1.2em;
}

@media (min-width: 992px){
      .pricing-table-inner {
            width: 225px;
      }

      .plan-details {
            padding: 0 25px;
      }
}

@media (min-width: 1200px){
      .pricing-table-inner {
            width: 275px;
      }
}

.pricing-table-unlimited {
      position: relative;
      background: #525963;
      color: #fff;
}

.pricing-table-title {
      width: 100%;
      text-align: center;
      padding: 20px 10px;
      border-radius: 20px;
      font-size: 1.3em;
      color: #fff;
      text-transform: uppercase;
}

.pricing-table-single .pricing-table-title {
      background: #f28300;
}

.pricing-table-multi .pricing-table-title {
      background: #f25b00;
}

.pricing-table-developer .pricing-table-title {
      background: #f23700;
}

.pricing-table-unlimited .pricing-table-title {
      background: #212a2e;
}

.pricing-table-license {
      height: 20px;
}

.pricing-table-developer .pricing-table-license {
      height: 60px;
      margin-top: -40px;
}

.pricing-table-unlimited .pricing-table-license {
      height: 60px;
      margin: -20px 0;
}

.price {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      color: #555a63;
      font-size: 4.8em;
      font-family: SpaceGrotesk;
}

@media (min-width: 992px){
      .price {
            width: 150px;
            height: 150px;
            font-size: 3.8em;
      }
}

@media (min-width: 1200px){
      .price {
            width: 180px;
            height: 180px;
            font-size: 4.5em;
      }
}

.pricing-table-unlimited .price {
      color: #fff;
}

.price-inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      line-height: 1;
      transform: translateY(10px);
}

.price-inner sup:first-of-type {
      font-size: .55em;
      transform: translateY(-10px);
}

.pricing-table-single .price-inner sup:first-of-type {
      font-size: .55em;
      transform: translate(5px, -10px);
}

.price-inner sup:last-of-type {
      font-size: .3em;
      transform: translateY(-5px)
}

.subscription-period {
      width: 100%;
      text-align: right;
      font-size: .3em;
      font-family: SpaceGrotesk-Light;
}

.pricing-table-unlimited .subscription-period {
      font-size: .2em;
}

.license-include-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      list-style: none;
      padding: 0;
      margin: 0;
      font-family: SpaceGrotesk;
      font-size: .85em;
}

.license-include-list li {
      display: flex;
      gap: 20px;
      align-items: center;
}

.license-include-list li i {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,.1);
      background: #42cc70;
      border-radius: 100%;
      padding: 5px;
      color: #fff;
      font-size: .8em;
}


.license-include-list em {
      font-style: normal;
      font-size: 1.3em;
      color: #42cc70;
      font-family: SpaceGrotesk-SemiBold;
}

.pricing-table a {
      color: #fff;
      text-decoration: none;
      background: #51e381;
      padding: 10px 20px;
      border-radius: 50px;
      box-shadow: 4px 4px 10px rgba(0,0,0,.2);
}

.pricing-table a:hover {
      background: #42cc70;
}

.shifty-mback-guarantee {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
}

.shifty-mback-guarantee-sun {
      width: 450px;
      color: #fb4313;
      position: relative;
      display: inline-block;
      font-size: 0.7em;
      z-index: 2;
}

@media (min-width: 768px){
      .shifty-mback-guarantee-sun {
            width: 200px;
            transform: translateX(70px);
            font-size: 1em;
      }

      .shifty-mback-guarantee-sun::before {
            content: "";
            width: 110px;
            height: 110px;
            background: #fff;
            border-radius: 100%;
            position: absolute;
            top: 30px;
            left: -10px;
            z-index: -1;
      }
}

.shifty-mback-guarantee-text {
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      transform: translate(-50%, -50%);
      font-size: 1.5em;
      line-height: 1em;
}

@media (min-width: 992px){
      .shifty-mback-guarantee-text {
            font-size: 2em;
      }
}

.shifty-mback-guarantee-body {
      background: #fff300;
      height: 100px;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 600px;
      transform: translate(-45px, -3px);
      border-radius: 50px;
      padding-left: 50px;
      font-family: SpaceGrotesk-Bold;
      text-transform: uppercase;
}

@media (min-width: 768px){
      .shifty-mback-guarantee-body {
            letter-spacing: 3px;
            font-size: 1.15em;
      }
}

.shifty-mback-guarantee-body::after {
      content: "";
      width: 0px;
      height: 0px;
      position: absolute;
      border-left: 48px solid #fff300;
      border-right: 48px solid transparent;
      border-top: 24px solid transparent;
      border-bottom: 24px solid #fff300;
      right: -48px;
      top: 50%;
      transform: translateY(-100%);
      z-index: -1;
}

.shifty-faq-list {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      list-style: none;
      padding: 0px;
      margin: 0 10px;
      row-gap: 10px;
}

.shifty-faq-list li {
      position: relative;
      width: 100%;
      background: #fff300;
      padding: 20px;
}

.shifty-faq-label {
      position: absolute;
      top: 10px;
      right: 20px;
      width: 30px;
      height: 30px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      border-radius: 50px;
      color: #0cce6b;
      cursor: pointer;
      user-select: none;
      overflow: hidden;
}

.shifty-faq-trigger {
      display: none;
}

.shifty-faq-label span {
      font-family: Arial;
      transition: all ease-in-out .3s;
      transform: translateY(1px);
}

.shifty-faq-trigger:checked + .shifty-faq-label {
      background: #0cce6b;
      color: #fff;
}

.shifty-faq-trigger:checked + .shifty-faq-label span {
      transform: rotate(45deg);
}

.shifty-faq-q {
      cursor: pointer;
      user-select: none;
      font-family: SpaceGrotesk-SemiBold;
      width: 90%;
}

.shifty-faq-a {
      position: relative;
      transition: all ease-in-out .3s;
      max-height: 0;
      overflow: hidden;
}

.shifty-faq-a a {
      color: #000;
      font-family: SpaceGrotesk-SemiBold;
      text-decoration: none;
}

.shifty-faq-trigger:checked + label + .shifty-faq-a::before {
      content: "";
      position: absolute;
      top: 20px;
      left: 50%;
      width: 80%;
      height: 1px;
      background: #000;
      transform: translateX(-50%);
}

.shifty-faq-trigger:checked + label + .shifty-faq-a {
      padding-top: 40px;
      max-height: 200px;
}

#faq-section {
      padding: 0 40px;
      margin: 50px 0;
}

#faq-section h2 {
      text-align: center;
      font-size: 2em;
      font-family: SpaceGrotesk-Bold;
      margin: 0 0 40px;
}

#faq-section h2 strong {
      color: #00aef9;
      font-weight: normal;
}

.faq-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px 50px;
}

.faq-col {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
      padding: 0;
      margin: 0;
      list-style: none;
}

@media (min-width: 992px){
      #faq-section {
            scroll-margin-top: 100px;
            padding: 0 120px;
            margin: 100px 0;
      }

      #faq-section h2 {
            font-size: 2.9em;
            margin: 0 0 80px;
      }

      .faq-col h2 {
            font-size: 3em;
      }

      .faq-col {
            width: calc(50% - 50px);
      }
}

.faq-col input {
      display: none;
}

.faq-wrapper {
      position: relative;
      background: #eef2f7;
      border-radius: 5px;
}

:checked + .faq-wrapper {
      border-color: #00aef9;
}

.faq-wrapper label {
      display: flex;
      justify-content: space-between;
      padding: 20px 40px;
      cursor: pointer;
      font-family: SpaceGrotesk-SemiBold;
}

.faq-trigger {
      position: absolute;
      right: 15px;
      display: block;
      width: 15px;
      height: 15px;
      transform: rotate(45deg);
      transition: all .4s ease;
      border-right: 4px solid #00aef9;
      border-bottom: 4px solid #00aef9;
}

:checked + .faq-wrapper .faq-trigger {
      transform: rotate(-45deg);
}

.faq-a {
      max-height: 0;
      overflow: hidden;
      transition: all .5s ease;
      padding: 0 40px 0 40px;
}

:checked + .faq-wrapper .faq-a {
      padding: 0 40px 40px 40px;
      max-height: 400px;
}



/* Features */

#features {
      color: #000;
      background: #fff;
      padding: 40px;
}

#features > * {
      scroll-margin-top: 100px;
}

#features .shifty-row-separated {
      margin: 0 0 100px;
}

#features h2 {
      font-size: 1.8em;
      text-align: center;
}

@media (min-width: 992px){
      #features h2 {
            font-size: 2.8em;
      }
}

.shifty-condition-icon {
      display: flex;
      flex-direction: column;
      width: 80px;
      background: #fff300;
      height: 80px;
      align-items: center;
      justify-content: space-evenly;
      border-radius: 15px;
      border: 2px solid #000;
      color: #000;
      text-decoration: none;
      font-size: .7em;
      text-align: center;
}

.shifty-condition-icon h4 {
      font-size: 1em;
      margin: 0;
}

.shifty-condition-icon + p {
      width: calc(100% - 95px);
}

.shifty-condition-tag {
      display: inline-block;
      background: #ededed;
      padding: 5px 10px;
      border-radius: 50px;
      margin: 0 5px;
      line-height: 1;
}

.shifty-condition-apply {
      background: #fa4313;
      color: #fff;
}

.shifty-condition-except {
      background: #0cce6b;
      color: #fff;
}

/* Video */
.video-container {
      overflow: hidden;
      position: relative;
      width:100%;
}

.video-container::after {
      padding-top: 56.25%;
      display: block;
      content: '';
}

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



/* Animations */

@keyframes bounceIn {
      from,
      20%,
      40%,
      60%,
      80%,
      to {
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }

      0% {
            opacity: 0;
            transform: scale3d(0.3, 0.3, 0.3);
      }

      20% {
            transform: scale3d(1.1, 1.1, 1.1);
      }

      40% {
            transform: scale3d(0.9, 0.9, 0.9);
      }

      60% {
            opacity: 1;
            transform: scale3d(1.03, 1.03, 1.03);
      }

      80% {
            transform: scale3d(0.97, 0.97, 0.97);
      }

      to {
            opacity: 1;
            transform: scale3d(1, 1, 1);
      }
}


@keyframes fadeOut {
      from {
            opacity: 1;
            max-height: 200px;
            margin: 10px;
      }

      to {
            margin: 0 10px;
            opacity: 0;
            max-height: 0;
      }
}

#comparison h2 {
      text-align: center;
}

#comparison h3 {
      font-size: 2.5em;
      text-align: center;
      color: #fb4313;
      margin: 0 0 50px;
}

@media (min-width: 992px){
      #comparison h3 {
            margin: 0 0 100px;
      }
}


.comparison-wrapper {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin: 0 auto;
      gap: 20px;
}

.comparison-title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
      height: 90px;
      background: #f3f3f7;
      text-transform: uppercase;
}

.comparison-cell {
      padding: 40px;
      background: #f3f3f7;
      width: 100%;
      border-radius: 25px;
}

@media (min-width: 992px){
      .comparison-wrapper:not(.wide) {
            width: 66%;
      }

      .comparison-title {
            position: sticky;
            top: 0;
            bottom: 100px;
            z-index: 2;
      }

      .comparison-cell {
            width: calc(50% - 20px);
      }

      .comparison-wrapper.wide .comparison-cell {
            width: calc(33% - 20px);
            padding: 20px;
      }
}

.comparison-cell:nth-child(1),
.comparison-cell:nth-child(1) .comparison-title {
      background: #2c3539;
      color: #fff;
}

.comparison-subtitle {
      display: block;
      position: relative;
      margin: 60px 0 20px 0;
      font-size: 1.3em;
      text-decoration: none;
      color: inherit;
}

.comparison-subtitle sup {
      font-size: .75em;
}

.comparison-elements {
      display: flex;
      flex-direction: column;
      gap: 20px;
      font-family: SpaceGrotesk;
}

.comparison-elements span {
      display: flex;
      align-items: center;
      column-gap: 10px;
      height: 45px;
}

.comparison-elements .fas {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      padding: 10px;
      width: 30px;
      height: 30px;
      background: #ccc;
      color: #fff;
}

.comparison-elements .fa-check {
      background: #4fe480;
}

.comparison-elements .fa-check.basic {
      background: #ffd147;
}

.comparison-elements .fa-times {
      background: #f2280d;
}

.comparison-elements .fa-dollar-sign {
      color: #000;
}

.comparison-elements a {
      text-decoration: none;
      color: #000;
}

.comparison-cell:nth-child(1) .comparison-elements a {
      color: #fff;
}

.comparison-elements .feature-spacer {
      display: none;
}

@media (min-width: 992px){
      .comparison-elements .feature-spacer {
            display: block;
            width: 100%;
      }
}


/* FEATURES */

.shifty-row-separated {
	margin-top: 100px;
	margin-bottom: 100px;
}

.wpshifty-hidden {
    display: none !important;
}

.wpshifty-fullwidth {
    width: 100%;
}

#complex-scenarios {
	margin-top: 30px;
}

#wpshifty-what-live-plugins{
	width: 100%;
	max-height: 450px;
	overflow-y: scroll;
	background: #fff;
	padding: 10px 0;
	border-radius: 15px;
	box-shadow: 2px 2px 4px rgba(0,0,0,.2);
}

.wpshifty-live-plugin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 20px;
    font-size: .8em;
    border: 1px solid #d9d9d9;
        border-left-color: rgb(217, 217, 217);
        border-left-style: solid;
        border-left-width: 1px;
    padding: 10px;
    border-left: 6px solid #0cce6b;
}

.wpshifty-live-plugin-inner {
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.wpshifty-switch-checkbox {
    display: none !important;
}

.wpshifty-switch {
    position: relative;
    width: 3.7em;
    height: 1.8em;
    display: inline-block;
    border-radius: 20px;
    background: #0cce6b;
    cursor: pointer;
}

.wpshifty-switch-checkbox:checked + .wpshifty-switch {
    background: #fb4313;
}

.wpshifty-switch::before {
    content: "";
    width: 1.3em;
    height: 1.3em;
    border-radius: 100%;
    background: #fff;
    display: block;
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translate(1.8em, -50%);
    border: 1px solid #f1f1f1;
    transition: all ease .3s;
}

.wpshifty-switch-checkbox:checked + .wpshifty-switch::before {
    transform: translate(0, -50%);
}

.wpshifty-resource-list, .wpshifty-what-list-container:empty::after {
    position: relative;
    background: #fff;
    margin: 10px 0;
    padding: 10px;
}

.wpshifty-resource-list label {
    display: flex;
    align-items: center;
    column-gap: 4px;
    cursor: pointer;
}

.wpshifty-resource-list-checkbox {
    display: none;
}

.wpshifty-resource-list-inner {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 0;
    overflow: hidden;
}

.wpshifty-resource-list-inner > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 20px 10px;
    font-size: .8em;
    border: 1px solid #d9d9d9;
    padding: 10px 10px 0 10px;
    border-left: 6px solid #0cce6b;
    font-family: Arial;
}

.wpshifty-resource-data, .wpshifty-resource-overwrite-data {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    margin-bottom: 10px;
}

.wpshifty-resource-element {
    width: 100%;
    display: block;
    max-height: 80px;
    overflow: hidden;
    margin-bottom: 8px;
}


.wpshifty-resource-size, .wpshifty-resource-media {
    font-size: 0.9em;
    font-family: IsidoraSans;
    background: #f1f1f1;
    padding: 2px 5px;
    border-radius: 50px;
}

.wpshifty-resource-actions {
    display: flex;
    align-self: center;
    gap: 5px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
    padding: 5px 0;
}

.wpshifty-resource-element-wrapper {
	position: relative;
}


.wpshifty-resource-element-wrapper.wpshifty-resource-disabled {
    border-left-color: #fa4313;
}

.wpshifty-resource-element-wrapper:not(.wpshifty-resource-disabled) .wpshifty-enable-resource,
.wpshifty-resource-element-wrapper.wpshifty-resource-disabled .wpshifty-disable-resource,
.wpshifty-resource-element-wrapper.wpshifty-resource-disabled .wpshifty-overwrite-resource,
.wpshifty-resource-element-wrapper.wpshifty-resource-disabled .wpshifty-preload-resource,
.wpshifty-resource-element-wrapper.wpshifty-resource-disabled .wpshifty-lazyload-resource {
    display: none;
}

.wpshifty-resource-element-wrapper.wpshifty-resource-lazyloaded .wpshifty-lazyload-resource,
.wpshifty-resource-element-wrapper:not(.wpshifty-resource-lazyloaded) .wpshifty-unlazyload-resource,
.wpshifty-resource-element-wrapper:not(.wpshifty-resource-lazyloaded) .wpshifty-badge-lazyloaded {
	display: none;
}

.wpshifty-resource-list label {
    display: flex;
    align-items: center;
    column-gap: 4px;
    cursor: pointer;
}

.wpshifty-resource-list-toggle {
    width: 20px;
    height: 20px;
    background: #fff300;
    padding: 5px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.wpshifty-resource-list-checkbox:checked + .wpshifty-resource-list-inner {
    max-height: unset;
    padding-bottom: 40px;
}

.wpshifty-resource-list-checkbox:checked + .wpshifty-resource-list-inner + .wpshifty-resource-list-toggle {
    transform: rotate(180deg);
    top: unset;
    bottom: 10px;
}

.wpshifty-resource-list label {
    display: flex;
    align-items: center;
    column-gap: 4px;
    cursor: pointer;
}

.wpshifty-resource-list-toggle {
    width: 20px;
    height: 20px;
    background: #fff300;
    padding: 5px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.wpshifty-resource-actions li a,
.wpshifty-resource-actions li span {
    text-align: center;
    background: #ededed;
    color: #000;
    display: block;
    padding: 0 10px;
    text-decoration: none;
    transition: background-color ease .3s;
    font-family: IsidoraSans-SemiBold;
    font-size: .8em;
    border-radius: 20px;
}


.wpshifty-resource-actions li.wpshifty-disable-resource a,
.wpshifty-resource-actions li.wpshifty-disable-resource span {
    background: #fb4313;
    color: #fff;
}

.wpshifty-resource-actions li.wpshifty-enable-resource a {
    background: #0cce6b;
    color: #fff;
}

.wpshifty-not-object {
	opacity: 0.4;
}

.wpshifty-resource-actions + svg {
	position: absolute;
	bottom: 72px;
	left: 15px;
	width: 100px;
	fill: transparent;
	stroke: #fff300;
	stroke-width: 4px;
	-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
	filter: drop-shadow( 1px 2px 1px rgba(0, 0, 0, .3));
	pointer-events: none;
	stroke-miterlimit: 10;
	stroke-dasharray: 0;
	stroke-dashoffset: 0;
	stroke-linecap: round;
	transform: rotate(-5deg);
	opacity: 1;
	transition: stroke-dashoffset 0s 0.2s, opacity 0s;
}

.wpshifty-resource-actions:hover + svg {
	opacity: 0;
}

.wpshifty-what-editor-rule {
    position: relative;
    margin: 10px;
    padding: 10px 20px;
    border: 2px solid #cfd0d2;
    font-size: .8em;
	background: #fff;
}

.wpshifty-rule-editor-area {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    row-gap: 10px;
}

.wpshifty-buttonset-rule-type, .wpshifty-buttonset-match-type, .wpshifty-buttonset-load-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    text-transform: uppercase;
    font-size: .8em;
    margin: 10px 0;
}

.wpshifty-rule-title {
    display: flex;
    align-items: center;
    margin-right: 10px;
    column-gap: 8px;
    text-transform: initial;
}

.wpshifty-radio-square-input {
    display: none;
}

.wpshifty-radio-square {
    position: relative;
    width: 15px;
    height: 15px;
    display: inline-block;
    border: 2px solid #e5e5e5;
    cursor: pointer;
}

.wpshifty-autocomplete-set {
    position: relative;
}

.wpshifty-autocomplete-toggle {
    position: absolute;
    left: 5px;
}

.wpshifty-autocomplete-toggle svg {
    width: 16px;
    height: 24px;
}

.wpshifty-what-editor-rules {
	align-self: center;
	margin: 0;
	padding: 0;
	width: 100%;
	list-style: none;
}

#wpshifty-what-editor-body input[type="text"], #wpshifty-what-editor-body select {
    min-height: 24px;
    outline: 0;
    border: 1px solid #e5e5e5;
    border-radius: 15px;
}
.wpshifty-autocomplete-toggle:not(.wpshifty-hidden) + input {
    padding-left: 25px;
}

.wpshifty-autocomplete-toggle + input {
    width: 100%;
    height: 24px;
}

.wpshifty-autocomplete-wrapper {
    position: absolute;
    top: 20px;
    z-index: 2;
    background: #fff;
    width: 90%;
    margin: 5px 0;
    padding: 5px 3px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
}

.wpshifty-autocomplete-list {
    list-style: none;
    padding: 10px;
    max-height: 120px;
    overflow: scroll;
    white-space: nowrap;
    font-family: Arial;
}

.wpshifty-autocomplete-list li {
    cursor: pointer;
    line-height: 1em;
    padding: 6px 0;
    margin: 0;
    font-size: .8em;
    font-weight: 500;
    max-width: 555px;
    overflow: hidden;
}

#wpshifty-what-editor-body input[type="text"], #wpshifty-what-editor-body select {
    min-height: 24px;
    outline: 0;
    border: 1px solid #e5e5e5;
    border-radius: 15px;
}

html .wpshifty-autocomplete-wrapper .wpshifty-autocomplete-search {
    margin: 5px;
    width: calc(100% - 10px);
    border: 1px solid #ededed;
    padding: 4px 8px;
}

.wpshifty-radio-square + label {
    cursor: pointer;
}

.wpshifty-radio-square-input:checked + .wpshifty-radio-square::before, .wpshifty-radio-square-input:checked + .wpshifty-radio-square::after {
    opacity: 1;
}

.wpshifty-radio-square::before {
    opacity: 0;
    content: "";
    width: 5px;
    height: 2px;
    position: absolute;
    bottom: 1px;
    left: 1px;
    background: #0cce6b;
    display: block;
    transform: rotate(60deg);
    transition: opacity ease .2s;
}

.wpshifty-radio-square::after {
    opacity: 0;
    content: "";
    position: absolute;
    bottom: 4px;
    right: -2px;
    width: 11px;
    height: 2px;
    background: #0cce6b;
    display: block;
    transform: rotate( -60deg);
    transition: opacity ease .2s;
}

.shifty-sample-list {
	padding: 0 30px;
	margin: 0;
	color: #000;
}

.shifty-sample-list a {
	color: #000;
	text-decoration: none;
}

.shifty-sample-list a:hover {
	text-decoration: underline;
}

.wpshifty-what-editor-rule input[type="text"],
.wpshifty-what-editor-rule select {
    min-height: 24px;
    outline: 0;
    border: 1px solid #e5e5e5;
    border-radius: 15px;
}
.wpshifty-colorful-select {
    appearance: none;
    border-radius: 15px;
    border: 0;
    background-color: #fff;
    background-image: url(../images/arrow-down.png);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: right;
    padding: 0 25px 0 5px;
    font-family: IsidoraSans;
    font-size: 1em;
    height: 24px;
}

.wpshifty-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px 5px;
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.1);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.1);
  }

  70% {
    transform: scale(1);
  }
}

.heartBeat {
  animation-name: heartBeat;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

.shifty-buttonset {
	margin: 5px 0;
}

#shifty-editor-wrapper {
	max-width: 100%;
}

.shifty-file-editor-file {
	font-family: Arial;
	font-size: .8em;
	margin: 5px 0;
}

.wpshifty-file-preview {
    width: 100% padding: 10px;
    border: 1px solid #d9d9d9;
    padding: 4px;
    font-family: Arial;
    font-size: 0.85em;
    font-style: italic;
    cursor: pointer;
    overflow: hidden;
}

.wpshifty-badge {
    padding: 4px 8px;
    background: #e5e5e5;
    color: #000;
    border-radius: 15px;
    line-height: 1em;
    font-size: .9em;
    font-family: IsidoraSans;
}

.wpshifty-badge-secondary {
    background: #fff300;
}

.wpshifty-badge-top-right {
    position: absolute;
    top: -10px;
    right: -10px;
}