/*
======================================================
Campaigns.CSS
-------------
- This CSS file works only for campaigns.
======================================================
*/


/* First Fold Section CSS */

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

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

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

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

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

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

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

body .campaigns-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 #mk-theme-container .mk-page-section.second-fold-section {
    overflow: hidden;
}

body .campaigns-second-fold-shortcode {
    position: relative;
}

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

body .campaigns-second-fold-shortcode .inner-section .section-content .text-container {
    position: relative;
    width: 100%;
}

body .campaigns-second-fold-shortcode .inner-section .section-content .text-container .row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30vw;
}

body .campaigns-second-fold-shortcode .inner-section .section-content .text-container .row .col-1 {
    position: relative;
    width: 40%;
    height: 32vw;
}

body .campaigns-second-fold-shortcode .inner-section .section-content .text-container .row .col-2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 60%;
    padding-top: 60px;
    padding-bottom: 0px;
    flex-wrap: wrap;
    padding-left: 5%;
}

body .campaigns-second-fold-shortcode .inner-section .section-content .text-container .row .col-1 .background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom left;
    -webkit-clip-path: circle(63% at 35% 26%);
    clip-path: circle(63% at 35% 26%);
    margin-top: -2%;
}

body .campaigns-second-fold-shortcode .anim-heading .yellow-text {
    color: #F7D54E;
}

body .campaigns-second-fold-shortcode .animation-container {
    position: relative;
    height: 250px;
    width: 52vw;
}

body .campaigns-second-fold-shortcode .animation-container .anim-heading {
    position: absolute;
    top: 0;
    width: 100%;
}

body .campaigns-second-fold-shortcode .animation-container h1 span {
    color: #F7D54E;
}

body .campaigns-second-fold-shortcode .animation-container h1 .blue-text {
    color: #202945;
}

body .campaigns-second-fold-shortcode .animation-container .anim-heading .break-text span {
    display: none;
}


/* Third Fold Section CSS */

body .third-fold-section.blue-circle {
    position: relative;
}

body .third-fold-section.blue-circle:before {
    position: absolute;
    content: '';
    top: 40px;
    right: 17%;
    width: 14vw;
    height: 14vw;
    background: #141A2B;
    border-radius: 50%;
}


/* Things we do Section */

body .things-we-do-section .icons-row {
    padding: 0 12%;
}

body .things-we-do-section .icons-row .icons-image img {
    margin-bottom: 10px;
}


/* Fifth Fold Section CSS */

body .fifth-fold-section .row-intro h1,
body .fifth-fold-section .row-intro .tilt-text {
    text-align: center;
}

body .fifth-fold-section .row-intro .tilt-text {
    margin-top: 40px;
    margin-bottom: 40px;
}

body .fifth-fold-section .row-intro .tilt-text h3 {
    padding-right: 25px;
    padding-left: 25px;
}

body .fifth-fold-section .row-intro .tilt-text h3:before {
    left: 0;
}

body .fifth-fold-section .row-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
}

body .fifth-fold-section .row-main .image-col {
    position: relative;
    display: flex;
    width: 30%;
    height: 30vw;
    align-items: flex-start;
    justify-content: flex-start;
    left: -8%;
}

body .fifth-fold-section .row-main .image-col:before {
    position: absolute;
    content: '';
    left: 25%;
    bottom: -28vw;
    height: 50vw;
    width: 50vw;
    background: url('../../../../../../wp-content/uploads/2020/04/shape.svg') center/contain no-repeat;
    transform: rotate(8deg);
}

body .fifth-fold-section .row-main .text-col {
    position: relative;
    display: flex;
    width: 55%;
    align-items: center;
    justify-content: flex-start;
}

body .fifth-fold-section .row-main .image-col .background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
}

body .fifth-fold-section .row-main.row-3 .text-col {
    justify-content: flex-end;
}

body .fifth-fold-section .row-main.row-3 .image-col {
    left: 8%;
}

body .fifth-fold-section .row-main.row-3 .image-col:before {
    left: -100%;
    transform: rotate(-10deg) rotateY(180deg);
}

body .fifth-fold-section .row-main.row-4 .image-col:before {
    display: none;
}

body .fifth-fold-section .row-main .text-col .main-heading {
    margin-bottom: 30px;
}


/* 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 #mk-theme-container .cornerstone-section .cornerstone-faq-element .mk-toggle-pane {
    background: transparent;
}

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%;
    }
}


/* 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;
    }
}


/* 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;
    }
}


/* Mobile Devices */

@media only screen and (max-width: 765px) {
    /* Scroll Element */
    body .fold-shortcode .inner-section .scroll-down-element {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    /* First Fold Section CSS */
    body #mk-theme-container .first-fold-section {
        padding: 0 20px;
    }
    body .campaigns-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 0px;
    }
    body .campaigns-second-fold-shortcode .inner-section .section-content .text-container .row {
        display: block;
    }
    body .campaigns-second-fold-shortcode .inner-section .section-content .text-container .row .col {
        width: 100%
    }
    body .campaigns-second-fold-shortcode .inner-section .section-content .text-container .row .image-col {
        width: 75vw;
        height: 75vw;
    }
    body .campaigns-second-fold-shortcode .inner-section .section-content .text-container .row .col-2 {
        padding-top: 20px;
        padding-bottom: 60px;
    }
    body .campaigns-second-fold-shortcode .animation-container .anim-heading {
        width: 100%;
    }
    body .campaigns-second-fold-shortcode .animation-container {
        height: 115px;
        width: calc(100% - 20px);
    }
    /* Third Fold Section CSS */
    body #mk-theme-container .third-fold-section {
        padding: 0 20px;
    }
    body .third-fold-section.blue-circle:before {
        width: 40vw;
        height: 40vw;
    }
    /* Things we do CSS */
    body .things-we-do-section .icons-row .col {
        margin-bottom: 50px;
    }
    body .things-we-do-section .icons-row .col.col-4 {
        margin-bottom: 20px;
    }
    /* 	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;
    }
    /*  Fifth Fold Section */
    body .fifth-fold-section .row-main {
        display: block;
        padding-bottom: 60px;
    }
    body .fifth-fold-section .row-main.row-4 {
        padding-bottom: 0px;
    }
    body .fifth-fold-section .row-main .image-col {
        left: 50%;
        width: 70vw;
        height: 70vw;
        margin-bottom: 40px;
        transform: translateX(-50%);
    }
    body .fifth-fold-section .row-main.row-3 .image-col {
        left: 50%;
    }
    body .fifth-fold-section .row-main .text-col {
        width: 100%;
        padding: 0 30px;
    }
    body .fifth-fold-section .row-main.row-3 .image-col:before {
        left: 28%;
        transform: rotate(12deg) rotateY(0deg);
    }
    body .fifth-fold-section .row-intro h1 {
        padding: 0 30px;
        padding-bottom: 30px;
    }
    /*  Seventh Section CSS */
    body #mk-theme-container .seventh-fold-section {
        padding: 0 20px;
    }
}