/*
======================================================
Marketing Roadmap.CSS
---------------------
- This CSS file works only for marketing-roadmap.
======================================================
*/


/* First Fold Section CSS */

body .strat-first-fold-shortcode .scroll-down-element .scroll-text {
    opacity: 0;
}

body .strat-first-fold-shortcode .scroll-down-element .scroll-circle {
    transform: scale(0);
}

body .strat-first-fold-shortcode .ff-main-text h1 {
    color: #FFF;
    text-align: center;
    margin-bottom: 50px;
}

body .strat-first-fold-shortcode .ff-main-text h1 .yellow-text {
    color: #F7D54E;
}

body .strat-first-fold-shortcode .ff-sub-heading-text h3 {
    color: #FFF;
    text-align: center;
    margin-bottom: 10px;
}

body .strat-first-fold-shortcode .ff-sub-heading-text h3 .underline {
    position: relative;
}

body .strat-first-fold-shortcode .ff-sub-heading-text h3 .underline {
    border-bottom: 3px solid #F7D54E;
}

body .strat-first-fold-shortcode .ff-sub-heading-text {
    margin-bottom: 60px;
}

body .strat-first-fold-shortcode .inner-section .section-content .text-container .underline-text .underline.line-6 .underline-elem {
    transform: scaleY(0.7);
    bottom: -15px;
}


/* Second Fold Section */

body .strat-second-fold-shortcode {
    margin-bottom: 20px;
}

body .strat-second-fold-shortcode .tilt-text h3 {
    margin-bottom: 60px;
}

body .strat-second-fold-shortcode .inner-section .section-content .text-container {
    position: relative;
}

body .strat-second-fold-shortcode .inner-section .section-content .text-container .text-circle-bg {
    position: absolute;
    top: -12%;
    left: 3%;
    width: 52vh;
    height: 52vh;
    background: #fff;
    border-radius: 50%;
    z-index: -2;
}

body .strat-second-fold-shortcode .inner-section .section-content .text-container .underline-text .underline.line-1 .underline-elem {
    transform: scaleY(0.8);
    bottom: -15px;
}

body .strat-second-fold-shortcode .inner-section .section-content .text-container .underline-text .underline.line-3 .underline-elem {
    transform: scaleY(1) scaleX(1.3);
    bottom: -7px;
}

body .strat-second-fold-shortcode .inner-section .section-content .text-container .underline-text .underline.line-4 .underline-elem {
    transform: scaleY(1) scaleX(1);
    bottom: -7px;
}

body .strat-second-fold-shortcode .inner-section .section-content .text-container .underline-text .underline.line-2 .underline-elem {
    transform: scaleY(0.7) scaleX(1.1);
    bottom: -13px;
}

body .strat-second-fold-shortcode .inner-section .section-content .text-container .underline-text .underline.line-5 .underline-elem {
    transform: scaleY(0.8) scaleX(1);
    bottom: -7px;
}


/* Fourth Section CSS */

body .fourth-fold-section.testimonial-section .testimonial-image .mk-image-inner {
    position: relative;
    overflow: visible;
}

body .fourth-fold-section.testimonial-section .testimonial-image .mk-image-inner:after {
    position: absolute;
    content: '';
    top: 27%;
    left: 5%;
    width: 110%;
    height: 110%;
    /* 	background: #fff; */
    z-index: -1;
}


/* Building Blocks CSS */

body .building-blocks-fold-shortcode .inner-section .section-content .bb-main-text {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    z-index: 1;
}

body .building-blocks-fold-shortcode .inner-section .section-content .bb-main-text h1 {
    text-align: center;
}

body .building-blocks-fold-shortcode .inner-section .section-content .text-container {
    width: 100%;
    height: 100%;
}

body .building-blocks-fold-shortcode .text-container .mega-main-heading {
    padding-left: 9%;
    margin-bottom: 60px;
}

body .building-blocks-fold-shortcode .text-container .bb-main-section {
    position: relative;
    height: 100%;
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 98vh;
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col {
    flex: 1;
    padding: 0 40px;
    height: 100%;
    cursor: pointer;
    padding: 100px 70px;
    -webkit-clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 100%, 40px 100%);
    clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 100%, 40px 100%);
    transition: flex 0.4s cubic-bezier(.16, .84, .44, 1);
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col .col-inner {
    padding-top: 100px;
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col.active {
    flex: 3;
    transition: flex 0.4s cubic-bezier(.16, .84, .44, 1);
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col-2 {
    background: #F7F7F7;
    margin-left: -25px;
    padding-right: 80px;
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col-3 {
    background: #F0F0F0;
    margin-left: -50px;
    padding-right: 80px;
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col-4 {
    margin-left: -50px;
    background: #E8E8E8;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%);
    padding-right: 80px;
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .icon-elem svg {
    display: block;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-text-container {
    position: relative;
    width: 50%;
    min-height: 320px;
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-text-container .inner-text {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-heading {
    margin-bottom: 20px;
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-sub-heading h2 {
    position: relative;
    top: 40px;
    opacity: 0;
    margin-bottom: 15px;
    transition: all 0.1s cubic-bezier(.16, .84, .44, 1);
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .col.active .inner-sub-heading h2 {
    position: relative;
    top: 0px;
    opacity: 1;
    transition: all 0.7s 0.4s cubic-bezier(.16, .84, .44, 1);
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-desc-text h3 {
    position: relative;
    top: 40px;
    opacity: 0;
    transition: all 0.1s cubic-bezier(.16, .84, .44, 1);
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .col.active .inner-desc-text h3 {
    position: relative;
    top: 0px;
    opacity: 1;
    transition: all 0.6s 0.5s cubic-bezier(.16, .84, .44, 1);
}

body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-icons-container {
    position: relative;
    display: flex;
    width: 50%;
}


/* How it works Section */

body .how-it-works-section .icons-row {
    padding: 0 12%;
}

body .how-it-works-section .icons-row .icons-image img {
    margin-bottom: 10px;
}


/* Weeks Section CSS */

body #mk-theme-container .weeks-section .section-content.jupiter-donut-visible-sm {
    display: none;
}

body #mk-theme-container .weeks-section .section-content.jupiter-donut-hidden-sm {
    display: flex;
}

body .weeks-section .text-container {
    width: 80%;
}

body .weeks-section .text-container .weeks-container {
    display: flex;
}

body .weeks-section .text-container .weeks-container .week-elem {
    position: relative;
    flex: 1;
    opacity: 0.3;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(.16, .84, .44, 1);
}

body .weeks-section .text-container .weeks-container .week-elem.active {
    flex: 1;
    opacity: 1;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(.16, .84, .44, 1);
}

body .weeks-section .text-container .weeks-container .week-elem .tilt-text h2 {
    position: relative;
    display: inline-block;
    padding: 1px 10px;
    padding-right: 20px;
    margin-bottom: 20px;
}

body .weeks-section .text-container .weeks-container .week-elem .tilt-text h2:before {
    left: -5px;
    background: #E0DFD8;
    transition: all 0.4s cubic-bezier(.16, .84, .44, 1);
}

body .weeks-section .text-container .weeks-container .week-elem.active .tilt-text h2:before {
    background: #F7D54E;
    transition: all 0.6s cubic-bezier(.16, .84, .44, 1);
}

body .weeks-section .text-container .weeks-container .week-elem .weeks-desc-text {
    position: absolute;
    top: -75px;
    left: 0;
    pointer-events: none;
    height: 0;
    opacity: 0;
    transition: all 0.4s cubic-bezier(.16, .84, .44, 1);
}

body .weeks-section .text-container .weeks-container.container-2 .week-elem .weeks-desc-text {
    top: 55px;
}

body .weeks-section .text-container .weeks-container.container-1 {
    margin-top: 70px;
}

body .weeks-section .text-container .weeks-container .week-elem.active .weeks-desc-text {
    height: auto;
    opacity: 1;
    transition: all 0.4s cubic-bezier(.16, .84, .44, 1);
}

body .weeks-section .text-container .weeks-container {
    display: flex;
}

body .weeks-section .text-container .weeks-container.container-1 {
    align-items: flex-end;
}

body .weeks-section .text-container .weeks-container.container-2 {
    position: relative;
    left: 12%;
}

body .weeks-section .text-container .weeks-nav-container {
    position: relative;
    display: flex;
    margin-top: 20px;
    margin-bottom: 40px;
}

body .weeks-section .text-container .weeks-nav-container:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    background: #F7D54E;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    z-index: -1;
}

body .weeks-section .text-container .weeks-nav-container .week-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

body .weeks-section .text-container .weeks-nav-container .week-nav .nav-elem {
    display: block;
    height: 15px;
    width: 15px;
    border: 2px solid #202945;
    border-radius: 50%;
    background: #fff;
    transition: all 0.4s cubic-bezier(.16, .84, .44, 1);
    cursor: pointer;
}

body .weeks-section .text-container .weeks-nav-container .week-nav.active .nav-elem {
    background: #202945;
    transition: all 0.6s cubic-bezier(.16, .84, .44, 1);
}

body .weeks-section.seventh-fold-section {
    position: relative;
}

body .weeks-section.seventh-fold-section:after {
    position: absolute;
    content: '';
    bottom: -18vw;
    right: -18vw;
    width: 36vw;
    height: 36vw;
    background: #FBF9F2;
    border-radius: 50%;
    z-index: -1;
    -webkit-clip-path: polygon(100% 0, 100% 50%, 0 50%, 0 0);
    clip-path: polygon(100% 0, 100% 50%, 0 50%, 0 0);
}


/* Activity Flow Section CSS */

body .activity-flow-section .mega-main-heading h1 {
    color: #F7D54E;
}

body .activity-flow-section .activity-flow-row {
    padding: 0 7%;
}

body .activity-flow-section .activity-flow-row .col .vc_column-inner>.wpb_wrapper {
    background: #FFF;
    padding: 40px;
}

body .activity-flow-section .activity-flow-row .col .icons-image .mk-image-holder {
    background: #202945;
    padding: 25px;
    max-width: 100px;
    border-radius: 50%;
    margin-bottom: 15px;
}

body .activity-flow-section .activity-flow-row .col .sub-heading-2 h3 {
    line-height: 125%;
}


/* Eighth Section CSS */

body .eighth-fold-section.testimonial-section {
    position: relative;
    z-index: 1;
}

body .eighth-fold-section.testimonial-section:after {
    position: absolute;
    content: '';
    top: -18vw;
    right: -18vw;
    width: 36vw;
    height: 36vw;
    background: #fff;
    border-radius: 50%;
    z-index: -1;
}


/* Cornerstone FAQ Section */

body .cornerstone-section a,
body .cornerstone-section a span {
    color: #202945;
    font-weight: 600 !important;
}

body .cornerstone-section .mk-faq-container.fancy-style-wrapper {
    border: none;
}

body .cornerstone-section .cornerstone-faq-element {
    max-width: 36%;
    margin: 0 auto;
}

body .cornerstone-section .cornerstone-faq-element .mk-toggle.fancy-style {
    border: none;
}

body #mk-theme-container .cornerstone-section .cornerstone-faq-element .mk-toggle-title {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 0px;
}

body .cornerstone-section .cornerstone-faq-element .mk-toggle-title:after {
    position: absolute;
    content: '';
    bottom: 12px;
    left: 0;
    width: 0%;
    height: 2px;
    background: #202945;
    transition: all 0.4s cubic-bezier(.16, .84, .44, 1);
}

body .cornerstone-section .cornerstone-faq-element .mk-toggle-title.active-toggle:after {
    width: 100%;
    transition: all 0.6s cubic-bezier(.16, .84, .44, 1);
}

body .cornerstone-section .cornerstone-faq-element .mk-toggle-title.active-toggle {
    border: none;
}

body .cornerstone-section .cornerstone-faq-element .mk-toggle-title:hover {
    background: transparent;
}

body .cornerstone-section .cornerstone-faq-element .mk-toggle-title i {
    display: none;
}

body .cornerstone-section .cornerstone-faq-element .mk-toggle-title span {
    display: block;
    font-size: 18px;
    text-align: center;
    line-height: 150%;
}

body .cornerstone-section .cornerstone-faq-element .mk-toggle .mk-toggle-pane p {
    text-align: center;
}

body #mk-theme-container .cornerstone-section .cornerstone-faq-element .mk-toggle .mk-toggle-pane .main-cta a {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    padding: 10px 22px;
}

body .cornerstone-section .cornerstone-faq-element .filter-faq {
    margin-bottom: 20px;
}

body .cornerstone-section .cornerstone-faq-element .filter-faq ul li:nth-child(1) {
    display: none;
}

body .cornerstone-section .cornerstone-faq-element .filter-faq ul li a {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

body .cornerstone-section .cornerstone-faq-element .filter-faq ul li a.current {
    background: #202945;
    color: #fff;
    padding: 16px 30px;
    pointer-events: none;
}

body .cornerstone-section .cornerstone-faq-element .mk-toggle-title>.mk-svg-icon {
    display: none;
}


/* Smaller Screen Desktops */

@media only screen and (max-width: 1280px) {
    body .cornerstone-section .cornerstone-faq-element .mk-toggle-title span {
        font-size: 16px;
    }
    body .cornerstone-section .cornerstone-faq-element {
        max-width: 34%;
    }
    /* Building Blocks Section */
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container {
        height: 90vh;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col .col-inner {
        padding-top: 140px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-heading {
        margin-bottom: 20px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-sub-heading h2 {
        margin-bottom: 15px;
    }
    body .cornerstone-section .cornerstone-faq-element .filter-faq ul li a {
        font-size: 12px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col.active {
        flex: 3;
    }
}


/* Mid Large Screen Desktops */

@media only screen and (min-width: 1440px) {
    body .cornerstone-section .cornerstone-faq-element .mk-toggle-title span {
        font-size: 20px;
    }
    body .cornerstone-section .cornerstone-faq-element {
        max-width: 38%;
    }
    body .cornerstone-section .cornerstone-faq-element .filter-faq ul li a {
        font-size: 15px;
    }
    /* Building Blocks Section */
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container {
        height: 85vh;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col .col-inner {
        padding-top: 140px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-heading {
        margin-bottom: 20px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-sub-heading h2 {
        margin-bottom: 20px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col.active {
        flex: 3;
    }
}


/* Large Screen Desktops */

@media only screen and (min-width: 1920px) {
    body .cornerstone-section .cornerstone-faq-element .mk-toggle-title span {
        font-size: 22px;
    }
    body .cornerstone-section .cornerstone-faq-element {
        max-width: 32%;
    }
    body .cornerstone-section .cornerstone-faq-element .filter-faq ul li a {
        font-size: 16px;
    }
    /* Building Blocks Section */
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container {
        height: 85vh;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col .col-inner {
        padding-top: 140px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-heading {
        margin-bottom: 30px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-sub-heading h2 {
        margin-bottom: 25px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col.active {
        flex: 2;
    }
}


/* Mobile Devices */

@media only screen and (max-width: 765px) {
    /* First Fold Section CSS */
    body #mk-theme-container .first-fold-section {
        padding: 0 20px;
    }
    body .strat-first-fold-shortcode .background {
        position: absolute;
        top: 20%;
        left: 50%;
        height: 16%;
        width: 40%;
    }
    /* Second Fold Section CSS */
    body #mk-theme-container .second-fold-section {
        padding: 0 20px;
    }
    body .strat-second-fold-shortcode .inner-section .section-content .text-container .underline-text .underline.line-1 .underline-elem {
        transform: scaleY(0.8);
        bottom: -15px;
    }
    body .strat-second-fold-shortcode .inner-section .section-content .text-container .underline-text .underline.line-3 .underline-elem {
        transform: scaleY(0.7) scaleX(1);
        bottom: -10px;
    }
    body .strat-second-fold-shortcode .inner-section .section-content .text-container .underline-text .underline.line-4 .underline-elem {
        transform: scaleY(1) scaleX(1);
        bottom: -10px;
    }
    body .strat-second-fold-shortcode .inner-section .section-content .text-container .underline-text .underline.line-2 .underline-elem {
        transform: scaleY(0.7) scaleX(0.9);
        bottom: -15px;
    }
    body .strat-second-fold-shortcode .inner-section .section-content .text-container .underline-text .underline.line-5 .underline-elem {
        transform: scaleY(1.1) scaleX(1);
        bottom: auto;
        top: 16px;
    }
    /* Third Fold Section CSS */
    body #mk-theme-container .third-fold-section {
        padding: 0 20px;
    }
    /* 	Building Blocks CSS */
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container {
        height: auto;
        display: block;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col {
        clip-path: none;
        webkit-clip-path: none;
        padding: 40px;
        margin-left: 0px;
        margin: 0 30px;
        margin-bottom: 20px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col.col-4 {
        margin-bottom: 80px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .bb-row-container .col .col-inner {
        padding-top: 0px;
    }
    body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-sub-heading h2,
    body .building-blocks-fold-shortcode .text-container .bb-main-section .inner-desc-text h3 {
        opacity: 1;
        top: 0;
    }
    body .building-blocks-fold-shortcode .inner-section .section-content .bb-main-text {
        position: relative;
        top: 0;
        margin-top: 100px;
    }
    body .building-blocks-fold-shortcode .inner-section .section-content {
        display: block;
    }
    /* How it works CSS */
    body .how-it-works-section .icons-row .col {
        margin-bottom: 50px;
    }
    body .how-it-works-section .icons-row .col.col-4 {
        margin-bottom: 20px;
    }
    /*  Weeks Section CSS */
    body .weeks-section .text-container {
        width: 90%;
    }
    body .weeks-section .text-container .weeks-container {
        flex-wrap: wrap;
    }
    body .weeks-section .text-container .weeks-container .week-elem,
    body .weeks-section .text-container .weeks-container .week-elem.active {
        text-align: center;
        width: 100%;
        flex: auto;
        margin-bottom: 30px;
    }
    body .weeks-section .text-container .weeks-container.container-2 {
        left: 0%;
    }
    body .weeks-section .text-container .weeks-nav-container {
        margin-bottom: 60px;
        margin-top: 25px;
        display: none;
    }
    body .weeks-section.seventh-fold-section:after {
        bottom: -35vw;
        right: -35vw;
        width: 70vw;
        height: 70vw;
    }
    body .weeks-section .text-container .weeks-container .week-elem .weeks-desc-text {
        position: relative;
        top: 0px;
    }
    body .weeks-section .text-container .weeks-container.container-2 .week-elem .weeks-desc-text {
        top: 0px;
    }
    body .weeks-section .text-container .weeks-container.container-1 {
        margin-top: 0px;
    }
    /* Activity Flow CSS */
    body .activity-flow-section .activity-flow-row .col-1,
    body .activity-flow-section .activity-flow-row .col-2 {
        margin-bottom: 40px;
    }
    body .activity-flow-section .activity-flow-row .col .icons-image .mk-image-holder img {
        display: block;
        width: 50px;
        height: 50px;
    }
    /* Eighth Section CSS */
    body .eighth-fold-section.testimonial-section {
        position: relative;
        z-index: 1;
    }
    body .eighth-fold-section.testimonial-section:after {
        top: -35vw;
        right: -35vw;
        width: 70vw;
        height: 70vw;
    }
    /* 	FAQ CSS */
    body .cornerstone-section .cornerstone-faq-element .mk-toggle-title span {
        font-size: 18px;
    }
    body .cornerstone-section .cornerstone-faq-element {
        max-width: 100%;
        padding: 0 20px;
    }
    body .cornerstone-section .cornerstone-faq-element .mk-toggle-title>.mk-svg-icon {
        display: none;
    }
    body .cornerstone-section .cornerstone-faq-element .filter-faq ul li a {
        font-size: 12px;
        padding: 2px;
    }
    /* Tenth Fold CSS */
    body #mk-theme-container .tenth-fold-section {
        padding: 0 20px;
    }
    body #mk-theme-container .weeks-section .section-content.jupiter-donut-visible-sm {
        display: flex !important;
    }
    body #mk-theme-container .weeks-section .section-content.jupiter-donut-hidden-sm {
        display: none !important;
    }
    body #mk-theme-container .weeks-section .text-container .weeks-container .week-elem {
        opacity: 1;
    }
    body #mk-theme-container .weeks-section .text-container .weeks-container .week-elem .tilt-text h2:before {
        background: #F7D54E;
        transition: all 0.6s cubic-bezier(.16, .84, .44, 1);
    }
    body #mk-theme-container .weeks-section .text-container .weeks-container .week-elem .weeks-desc-text {
        height: auto;
        opacity: 1;
        transition: all 0.4s cubic-bezier(.16, .84, .44, 1);
    }
}