/**
 * CTA button
 */
.cta-btn a {
  background-color: #fbaa19 !important;
  color: #ffffff;
  padding: 15px 35px !important;
  border-radius: 8px !important;
  font-family: Montserrat, serif;
  font-weight: 700;
  font-style: normal;
  font-size: 24px !important;
  text-transform: uppercase;
  letter-spacing: 0px;
}

.cta-btn a:hover {
  background-color: #e29100 !important;
}

.cta-btn--wide.grve-align-center .grve-btn {
  width: 100%;
  max-width: 400px;
  margin-left: 0;
  margin-right: 0;
}

@media only screen and (max-width: 767px) {
  #grve-theme-wrapper .cta-btn a.grve-btn {
    font-size: 16px !important;
    line-height: 24px;
  }
}

/**
 * Aqua CTA button
 */
.cta-btn-aqua {
  max-width: 320px;
  margin: 0 auto;
}

.cta-btn-aqua a.grve-btn {
  width: 100%;
  background-color: #49e0c1 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  line-height: 24px;
  text-transform: none;
  padding-top: 15px;
  padding-bottom: 15px;
}

@media only screen and (max-width: 767px) {
  #grve-theme-wrapper .cta-btn-aqua a.grve-btn {
    font-size: 16px !important;
  }
}

/**
 * Icon image text
 */
.grve-image-text.icon-image-text .grve-image {
  width: 64px;
  margin-right: 24px;
}

.grve-image-text.icon-image-text.icon-image-text--large .grve-image {
  width: 80px;
  margin-right: 24px;
  padding-bottom: 0px;
}

.grve-image-text.icon-image-text.icon-image-text--large .grve-image > img {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.grve-image-text.icon-image-text.icon-image-text .grve-content {
  padding-left: 88px !important;
}

.grve-image-text.icon-image-text.icon-image-text--large .grve-content {
  padding-left: 104px !important;
}

@media only screen and (max-width: 767px) {
  .grve-image-text.icon-image-text .grve-image,
  .grve-image-text.icon-image-text.icon-image-text--large .grve-image {
    width: 48px;
  }
  .grve-image-text.icon-image-text .grve-image {
    margin-right: 16px;
  }

  .grve-image-text.icon-image-text.icon-image-text .grve-content {
    padding-left: 64px !important;
  }

  .grve-image-text.icon-image-text.icon-image-text--large .grve-content {
    padding-bottom: 24px !important;
    padding-left: 72px !important;
  }
}

.grve-image-text.icon-image-text .grve-content {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  float: none;
  width: 100%;
}

.grve-image-text.icon-image-text h2,
.grve-image-text.icon-image-text h3,
.grve-image-text.icon-image-text h4 {
  color: #000;
}

@media only screen and (max-width: 767px) {
  .grve-image-text.icon-image-text .grve-image {
    float: left;
  }
}

/**
 * CTA button in header
 */
#grve-main-menu .menu-button-free span {
  font-weight: bold;
}

/**
 * Fancy numbered list
 */
.fancy-numbered-list ol {
  counter-reset: number;
  list-style-type: none;
  margin-left: 0px;
}

.fancy-numbered-list li {
  padding: 22px 0 22px 25px;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.7px;
  margin-left: 50px;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .fancy-numbered-list li {
    font-size: 16px;
    line-height: 24px;
  }
}

.fancy-numbered-list li::before {
  counter-increment: number;
  content: counter(number) '\a0';
  position: absolute;
  left: -24px;
  margin-right: 20px;
  padding: 4px 6px 4px 12px;
  color: #fa9913;
  background: rgba(250, 153, 19, 0.2);
  border-radius: 50%;
  font-size: 16px;
  line-height: 24px;
  font-family: 'Montserrat';
  font-weight: 800;
}

.fancy-tabs-mobile.grve-row {
  position: absolute;
  top: 140px;
  left: 46px;
  right: 0;
  z-index: 5;
  transform: rotate(-10deg) translate(-30%, -50px);
  pointer-events: none;
}

.fancy-tabs-background.grve-row {
  position: absolute;
  top: 132px;
  left: 0;
  z-index: 1;
}

.fancy-tabs-background--desktop.grve-row {
  margin-left: -118px;
  max-width: 1390px;
}

.fancy-tabs-background--mobile.grve-row {
  display: none;
}

.fancy-tabs-background--mobile.grve-row > .grve-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.laptop-tab-wrap,
.mobile-tab-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.laptop-tab-wrap__swiper,
.mobile-tab-wrap__swiper {
  position: relative;
}

.laptop-tab-wrap__frame,
.mobile-tab-wrap__frame {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: top center;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 6;
  top: 0;
  left: 0;
  pointer-events: none;
}

.laptop-tab-wrap {
  max-width: 820px;
  padding-bottom: 48px;
}

.mobile-tab-wrap {
  max-width: 207px;
}

.laptop-tab-wrap__swiper {
  max-width: 76.6%;
  margin: 0 auto;
  overflow: hidden;
}

.laptop-tab-wrap__swiper .swiper-container {
  margin-top: 6.8%;
  background: white;
  padding-bottom: 8px;
}

.mobile-tab-wrap__swiper {
  margin: 0 3px;
  padding-top: 214%;
  background-color: white;
  border-radius: 12%;
  clip-path: polygon(0 0%, 100% 0, 100% 99%, 0% 99%);
  overflow: hidden;
}

.mobile-tab-wrap__swiper .swiper-container {
  position: absolute;
  top: 0;
  left: -1px;
  max-width: 208px;
}

.mobile-tab-wrap__swiper .grve-image {
  padding-top: 26px;
}

.laptop-tab-wrap__frame {
  background-image: url('/wp-content/themes/blade-child/images/mac-book-frame.png');
}

.mobile-tab-wrap__frame {
  background-image: url('/wp-content/themes/blade-child/images/smartphone-frame.png');
  padding-top: 214%; /* aspect ratio for 416x892 image */
}

/* Breakpoint for when desktop background icons become too large */
@media only screen and (max-width: 1395px) {
  .fancy-tabs-laptop.grve-row {
    max-width: 72%;
    margin-left: auto;
    margin-right: auto;
  }

  .fancy-tabs-mobile.grve-row {
    max-width: 74%;
    margin-bottom: 6%;
    top: unset;
    bottom: -10px;
    left: -56px;
    margin-left: auto;
    margin-right: auto;
  }

  .fancy-tabs-background--desktop.grve-row {
    max-width: 100%;
    margin-left: 0px;
    margin-right: 0px;
  }

  .mobile-tab-wrap__swiper .swiper-container {
    max-width: 100%;
    left: 0;
  }

  .mobile-tab-wrap {
    max-width: 23%;
    border-radius: 18%;
    top: -5px;
    left: -20px;
  }

  .mobile-tab-wrap__swiper .grve-image {
    padding: 0 3%;
    padding-top: 13%;
  }
}

/* Tablet */
@media only screen and (max-width: 1024px) {

  .fancy-tabs-mobile.grve-row {
    left: 0;
    bottom: 0;
  }

  .fancy-tabs-background--desktop.grve-row {
    top: 132px;
  }

  .mobile-tab-wrap__swiper .swiper-container {
    max-width: 100%;
    left: 0;
  }

  .mobile-tab-wrap {
    max-width: 23%;
    border-radius: 18%;
    top: -5px;
    left: -20px;
  }

  .mobile-tab-wrap__swiper .grve-image {
    padding: 0 3%;
    padding-top: 13%;
  }
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .fancy-tabs-nav {
    margin-bottom: 0px !important;
  }

  .fancy-tabs-laptop {
    margin-top: 218px;
    padding-top: 0 !important;
  }

  .fancy-tabs-mobile.grve-row {
    margin-bottom: 10%;
    bottom: 8px;
  }

  .fancy-tabs-background--desktop.grve-row {
    display: none;
  }

  .fancy-tabs-background--mobile.grve-row {
    display: block;
    max-width: 375px;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    top: 62px;
  }

  #grve-main-content .fancy-tabs-nav.vc_tta.vc_general .vc_tta-tab > a {
    padding: 10px 0;
  }
}

@media only screen and (max-width: 490px) {
  .fancy-tabs-laptop.grve-row {
    max-width: 100%;
    right: -14px;
  }

  .fancy-tabs-mobile.grve-row {
    max-width: 100%;
    bottom: 20px;
    transform: rotate(-10deg) translate(-25%, -50px);
  }
}

@media only screen and (max-width: 404px) {
  .fancy-tabs-laptop.grve-row {
    margin-top: 64%;
  }
}

/**
 * Columns
 */
.grve-column-1-12.is-centered,
.grve-column-5-12.is-centered,
.grve-column-7-12.is-centered,
.grve-column-11-12.is-centered,
.grve-column-1-6.is-centered,
.grve-column-1-5.is-centered,
.grve-column-2-5.is-centered,
.grve-column-3-5.is-centered,
.grve-column-1-4.is-centered,
.grve-column-1-2.is-centered,
.grve-column-1-3.is-centered,
.grve-column-2-3.is-centered,
.grve-column-3-4.is-centered,
.grve-column-4-5.is-centered,
.grve-column-5-6.is-centered,
.grve-column-1 {
  float: none;
}

/**
 * Row with background + overlay
 */
.bg-image-contain-on-top .grve-bg-image {
  background-size: contain;
  z-index: 4;
}

.bg-image-contain-on-top.bg-image-contain-on-top-max-width-912 .grve-bg-image {
  max-width: 900px;
  margin: auto;
}

.better-white-gradient .grve-bg-overlay {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,2989d8+3,ffffff+3,ffffff+16,ffffff+54,000000+66,ffffff+66,ffffff+100&0+0,0.2+3,1+16,1+54,0.2+66,0+100 */
  background: -moz-linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 3%,
    rgba(255, 255, 255, 1) 16%,
    rgba(255, 255, 255, 1) 54%,
    rgba(255, 255, 255, 0.2) 66%,
    rgba(255, 255, 255, 0) 100%
  ) !important; /* FF3.6-15 */
  background: -webkit-linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 3%,
    rgba(255, 255, 255, 1) 16%,
    rgba(255, 255, 255, 1) 54%,
    rgba(255, 255, 255, 0.2) 66%,
    rgba(255, 255, 255, 0) 100%
  ) !important; /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 3%,
    rgba(255, 255, 255, 1) 16%,
    rgba(255, 255, 255, 1) 54%,
    rgba(255, 255, 255, 0.2) 66%,
    rgba(255, 255, 255, 0) 100%
  ) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ) !important; /* IE6-9 */
}

/**
 * Main menu
 */
#grve-main-menu .current_page_item > a > span {
  color: #fa9913;
  font-weight: bold;
}

#grve-main-menu .current_page_item > a.menu-get-started > span {
  color: #fff;
}

/**
 * Fancy Tabs
 */
.fancy-tabs-nav .vc_tta-panels-container {
  display: none;
}

.fancy-tabs-nav {
  margin-bottom: 120px;
}

.fancy-tabs-nav.vc_tta-tabs-position-top .vc_tta-tabs-list {
  border-bottom: none;
}

#grve-main-content .fancy-tabs-nav.vc_tta.vc_general .vc_tta-tab > a {
  text-transform: none;
}

.fancy-tabs-nav .vc_tta-tab > a > span {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.7px;
  font-family: 'Montserrat';
}

.fancy-tabs-nav .vc_tta-tab.vc_active > a > span {
  color: #fa9913;
}

#grve-main-content .fancy-tabs-nav.vc_tta.vc_general .vc_tta-tab.vc_active > a:after {
  height: 3px;
  margin-top: -3px;
}

.wpb-js-composer .vc_tta.vc_general.fancy-tabs-nav .vc_tta-tab > a {
  padding: 14px 0px;
  margin: 0 32px;
}

.wpb-js-composer .vc_tta.vc_general.fancy-tabs-nav .vc_tta-tabs-list {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0 -25px;
}

.wpb-js-composer .vc_tta.vc_general.fancy-tabs-nav .vc_tta-tab {
  flex-shrink: 0;
}

.wpb-js-composer .vc_tta.vc_tta-tabs.fancy-tabs-nav .vc_tta-tabs-container {
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media only screen and (max-width: 1024px) {
  .wpb-js-composer .vc_tta.vc_general.fancy-tabs-nav .vc_tta-tab > a {
    margin: 0 20px;
  }
}

@media only screen and (max-width: 820px) {
  .fancy-tabs-nav {
    margin-bottom: 90px;
  }

  .fancy-tabs-background--desktop.grve-row {
    top: 118px;
  }  

  .wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top.fancy-tabs-nav .vc_tta-tabs-list {
    overflow: auto;
  }

  .wpb-js-composer .vc_tta.vc_general.fancy-tabs-nav .vc_tta-tab > a {
    padding: 14px 0px;
    margin: 0 14px;
  }

  .wpb-js-composer .vc_tta.vc_general.fancy-tabs-nav .vc_tta-tab:first-of-type {
    margin-left: 25px;
  }

  .wpb-js-composer .vc_tta.vc_general.fancy-tabs-nav .vc_tta-tab:last-of-type {
    padding-right: 25px;
  }

  .wpb-js-composer .vc_tta.vc_general.fancy-tabs-nav .vc_tta-tabs-container {
    overflow: visible;
  }

  .fancy-tabs-nav .vc_tta-tabs-container:after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    right: -25px;
    z-index: 2;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+98 */
    background: -moz-linear-gradient(
      left,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 98%,
      rgba(255, 255, 255, 1) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      left,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 98%,
      rgba(255, 255, 255, 1) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 98%,
      rgba(255, 255, 255, 1) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

    pointer-events: none;
  }

  .fancy-tabs-nav .vc_tta-tabs-container:before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    left: -25px;
    z-index: 2;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100 */
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      left,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    pointer-events: none;
  }
}

/**
 * Micromodals
 */
.micromodal-pp {
  display: none;
}

.micromodal-pp.is-open {
  display: block;
}

.micromodal-pp__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.micromodal-pp__container {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}

.micromodal-pp__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}

.micromodal-pp__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.micromodal-pp__close {
  background: transparent;
  border: 0;
  margin: 0 !important;
}

.micromodal-pp__header .micromodal-pp__close:before { content: "\2715"; }

.micromodal-pp__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0,0,0,.8);
}