﻿@charset "UTF-8";
/* CSS Document */


body,
p {
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    padding-bottom: 15px;
    color: #000;
}

h1,
h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 2.2rem;
    line-height: 3rem;
    font-weight: 700;
    color: #14487e;
    padding-bottom: 15px;
}

.ca-btn-primary {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    padding: 15px 0;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    text-transform: uppercase;
    border: none;
    border-radius: 35px;
    background-color: #f1a81e;
}

a.ca-btn-primary:hover,
a.ca-btn-primary:active,
a.ca-btn-primary:focus {
    color: #fff;
    background-color: #c65d28;
}

/*------------- Header -----------------*/
.ca-branding {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 0;
}

    .ca-branding::after {
        content: "";
        clear: both;
        display: table;
    }

    .ca-branding img {
        width: 50%;
        max-width: 225px;
        float: left;
    }

.ca-headerbutton {
    float: right;
    padding: 5px 35px;
    margin-top: 2%;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.75rem;
    text-transform: uppercase;
    border: none;
    border-radius: 35px;
    background-color: #f1a81e;
}

a.ca-headerbutton:hover,
a.ca-headerbutton:active,
a.ca-headerbutton:focus {
    color: #fff;
    background-color: #c65d28;
}

.ca-dropdown {
    position: relative;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #c65d28;
}

.dropdown-item:active {
    background-color: #f1a81e;
}

/*------------- Top CTA-----------------*/
.ca-topctaouter {
    width: 100%;
    background-color: #14487e;
    background-image: url(../images/confused-chart3.jpg);
    background-position: 80% center;
    background-size: cover;
    padding: 25vh 0 10vh;
    position: relative;
}

.ca-freemarker {
    position: absolute;
    width: 40%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 999;
}

.ca-topcta {
    width: 90%;
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
}

    .ca-topcta h1 {
        font-size: 2.2rem;
        line-height: 3.4rem;
        color: #fff;
        padding-bottom: 50px;
    }

.supered {
    font-size: 1rem;
    position: relative;
    top: -1rem;
}

.ca-topcta p {
    font-size: 1.5rem;
    line-height: 2rem;
    color: #fff;
    padding-bottom: 75px;
}

.ca-ctabutton {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    padding: 10px 0;
    text-transform: uppercase;
    border: none;
    border-radius: 35px;
    background-color: #f1a81e;
}
/*------------- Top CTA-----------------*/
/*------------- Challenge -----------------*/
.ca-challengeouter {
    position: relative;
    width: 100%;
    padding: 50px 0 0;
    z-index: 1;
    background-color: #14487e;
}

    .ca-challengeouter::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #14487e;
        transform-origin: bottom left;
        transform: skewY(5deg);
        z-index: -10;
    }

.ca-challengecontent {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

    .ca-challengecontent::after {
        content: "";
        clear: both;
        display: table;
    }

.ca-challengeleft {
    width: 100%;
}

.ca-challengeright {
    width: 100%;
}

.ca-challengecontent h2 {
    color: #fff;
    padding-bottom: 40px;
}

.ca-challengecontent p {
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.ca-italics {
    font-style: italic;
}
/*------------- Challenge -----------------*/
/*------------- Changes -----------------*/
.ca-changesouter {
    width: 100%;
    padding: 30% 0 75px;
    z-index: -20;
    background-image: url(../images/jumblewires.jpg);
    background-position: 35% center;
    background-size: cover;
}

.ca-changescontent {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

    .ca-changescontent h2 {
        width: 75%;
        max-width: 240px;
        margin: 0 5% 340px auto;
        font-size: 2rem;
        line-height: 1.5em;
        color: #14487e;
        text-align: right;
    }

    .ca-changescontent p {
        width: 60%;
        max-width: 400px;
        margin: 0 5% 0 auto;
        color: #14487e;
        text-align: right;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
/*------------- Changes -----------------*/
/*------------- Video -----------------*/
.ca-videoouter {
    width: 100%;
    padding: 75px 0 25px;
    background-color: transparent;
    text-align: center;
    position: relative;
    background-color: #14487e;
}

    .ca-videoouter::after {
        content: "";
        clear: both;
        width: 100%;
        height: 8.5vw;
        position: absolute;
        bottom: -8.5vw;
        left: 0;
        z-index: -2;
        background-color: #14487e;
        background-image: url("../images/bottomarroww.svg");
        background-size: 101% auto;
        background-repeat: no-repeat;
        background-position: center top;
    }

    .ca-videoouter h2 {
        width: 90%;
        margin: 0 auto;
        color: #fff;
        text-align: center;
    }

.ca-videoarea {
    width: 100%;
    max-width: 800px;
    margin: 30px auto 50px;
    ;
}

.ca-videowrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 56.25%; /* 16x9 */
    height: 0;
}

.ca-videoarea iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ca-videobutton {
    width: 90%;
}
/*------------- Video -----------------*/
/*------------- Features -----------------*/

.ca-featureouter {
    width: 100%;
    padding: 0 0 60px;
}

.freeforever {
    width: 90%;
    margin: 0 auto;
    font-size: 1.5rem;
    font-style: italic;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
}

.ca-featurearea {
    width: 80%;
    max-width: 1200px;
    margin: 25% auto 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ca-feature {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

    .ca-feature img {
        width: 45%;
        margin-bottom: 30px;
    }
/*------------- Features -----------------*/
/*------------- Free features -----------------*/
.ca-freefeaturesouter {
    width: 100%;
    padding: 60px 0 0;
    background-color: #45a5dc;
    position: relative;
}

    .ca-freefeaturesouter::after {
        content: "";
        clear: both;
        width: 100%;
        height: 8.5vw;
        position: absolute;
        bottom: -8.5vw;
        left: 0;
        z-index: -2;
        background-color: #45a5dc;
        background-image: url("../images/bottomarroww.svg");
        background-size: 101% auto;
        background-repeat: no-repeat;
        background-position: center top;
    }

    .ca-freefeaturesouter h2 {
        color: #fff;
        text-align: center;
    }

.ca-freefeatures {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ca-freefeature {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

    .ca-freefeature img {
        width: 100%;
        margin-bottom: 30px;
    }
/*------------- Free features -----------------*/
/*------------- Get CA now -----------------*/
.ca-getnowouter {
    width: 100%;
    padding: 150px 0;
    text-align: center;
}

    .ca-getnowouter h2 {
        text-align: center;
    }

.ca-getnow {
    width: 90%;
    max-width: 700px;
    margin: 0 auto;
}

    .ca-getnow p:last-of-type {
        margin-bottom: 50px;
    }
/*------------- Get CA now -----------------*/
/*------------- Future -----------------*/
.ca-futureouter {
    width: 100%;
    padding: 50px 0;
    background-color: #afd8f3;
    text-align: center;
}

.ca-future {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

    .ca-future::after {
        content: "";
        clear: both;
        display: table;
    }

.ca-futureleft {
    width: 100%;
    margin-bottom: 30px;
}

    .ca-futureleft p {
        font-size: 1.5rem;
        font-style: italic;
    }

.ca-futureright {
    width: 100%;
}
/*------------- Future -----------------*/
/*------------- FAQ -----------------*/
.ca-faqouter {
    width: 100%;
    padding: 50px 0 100px;
    background-color: #e9e9e9;
}

.ca-faq {
    width: 90%;
    max-width: 700px;
    margin: 0 auto;
}

    .ca-faq h2 {
        color: #14487e;
        margin-bottom: 30px;
    }
/*------------- FAQ -----------------*/
/*------------- FAQ accordion -----------------*/
.faqcontainer {
    width: 100%;
}

.ca-faq .container {
    padding-left: 0;
    padding-right: 0;
}

.ca-faq .card {
    border: none;
    border-radius: 0;
    background-color: transparent;
}

.ca-faq .card-header {
    padding: 0.75rem 0;
    border-bottom: none;
    background-color: transparent;
}

.ca-faq .card-body {
    padding: 0 0 30px 60px;
}

.ca-faq .btn-link {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.material-icons {
    font-family: 'Open Sans', sans-serif;
    font-size: 2rem;
    line-height: 1.5rem;
    color: #F2871D;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    float: left;
    width: 20px;
    margin-right: 20px;
}

.leg-faqitemheader {
    display: inline-block;
    width: calc(100% - 40px);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: #14487e;
}
/*------------- FAQ accordion -----------------*/
/*------------- Affirm -----------------*/
.ca-affirmouter {
    width: 100%;
    padding: 100px 0 100px;
    background-image: url("../images/straightwires.jpg");
    background-position: center 40%;
}

.ca-affirmarea {
    width: 90%;
    max-width: 574px;
    margin: 0 auto;
    text-align: center;
}

    .ca-affirmarea p {
        font-size: 1.125rem;
        line-height: 1.75rem;
        color: #000;
    }

        .ca-affirmarea p:nth-child(3) {
            margin-bottom: 150px;
        }

    .ca-affirmarea .ca-ctabutton {
        margin-top: 40px;
    }
/*------------- Affirm -----------------*/
/*------------- Cross promo -----------------*/
.ca-crosspromoouter {
    width: 100%;
    padding: 75px 0;
    border-top: 6px solid #45a5dc;
    background-color: #45a5dc;
}

.ca-crosspromo {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
}

    .ca-crosspromo h2 {
        font-size: 1.5rem;
        line-height: 1.3em;
        text-align: center;
    }

.ca-message {
    width: 100%;
    margin: 20px 0;
}

    .ca-message:nth-child(2) {
        margin: 0 0 20px;
    }

.ca-messageupper {
    width: 100%;
    padding: 20px 10% 0;
    background-color: #fff;
}

.ca-messagelower {
    width: 100%;
    background-color: #14487e;
    padding: 20px 10%;
}

.ca-messageupper img {
    display: block;
    width: 160px;
    margin: 0 auto 20px;
}

.ca-messageupper h2 {
    font-size: 1.2rem;
    color: #f1a81f;
    text-align: center;
    margin: 0;
}

.ca-messagelower p {
    color: #fff;
    font-size: .9rem;
    line-height: 1.3rem;
    text-align: center;
    padding-bottom: 5px;
}

.ca-messagelower a:link,
.ca-messagelower a:visited {
    display: block;
    color: #fff;
    font-size: .9rem;
    line-height: 1.2rem;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.ca-messagelower a:hover,
.ca-messagelower a:active,
.ca-messagelower a:focus {
    color: #f18721;
}

/*------------- Cross promo -----------------*/
/*------------- Contact form -----------------*/
.leg-contactformouter {
    width: 100%;
    padding: 75px 0;
    background-color: #F2F5F8;
}

.leg-contactformarea {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
}

    .leg-contactformarea h2 {
        font-size: 1.5rem;
    }

    .leg-contactformarea .container {
        padding: 0;
    }

.leg-required {
    color: #e62b2b;
    font-weight: 700;
}

.leg-submitspacer {
    padding-top: 20px;
}

.leg-contactformarea .btn {
    width: 100%;
    max-width: 300px;
    display: block;
    font-weight: 700;
    color: #000;
    background-color: transparent;
    border: 2px solid #000;
    padding: 10px 0;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 30px;
}

/*------------- Contact form -----------------*/

/*------------- Footer-----------------*/
.ca-footer-outer {
    width: 100%;
    padding: 35px 0 75px;
    background-color: #45a5dc;
}

.ca-footer-content {
    width: 90%;
    max-width: 450px;
    margin: 0 auto;
    text-align: center;
}

    .ca-footer-content img {
        display: block;
        width: 210px;
        margin: 0 auto;
    }

.ca-legallinks {
    width: 100%;
    margin-bottom: 25px;
}

.ca-footer-content a:link,
.ca-footer-content a:visited {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: #fff;
    line-height: 1.75rem;
    padding: 0 10px;
}

.ca-footer-content p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: #fff;
    line-height: 1.75rem;
}

/*------------- Footer-----------------*/

/**
 *  - >= 568px
 */

@media screen and (min-width: 35.5em) {
    .ca-freemarker {
        width: 25%;
        max-width: 300px;
    }

    .ca-changesouter {
        padding: 25% 0 75px;
        background-position: 35% center;
    }

    .ca-changescontent h2 {
        max-width: 300px;
        margin: 0 5% 200px auto;
    }

    .ca-changescontent p {
        max-width: 330px;
    }
    /*------------- Features -----------------*/
    .ca-feature img {
        width: 150px;
    }
    /*------------- Features -----------------*/
    .ca-affirmouter {
        /*background-size: cover;*/
        background-position: center 42%;
    }

    .ca-affirmarea p:nth-child(3) {
        margin-bottom: 100px;
    }
}


/**
 *  - >= 667px
 */

@media screen and (min-width: 41.687em) {
    .ca-topcta h1 {
        font-size: 2.5rem;
    }

    .ca-changesouter {
        padding: 25% 0 75px;
        background-position: 35% top;
    }

    .ca-changescontent h2 {
        max-width: 350px;
        margin: 0 5% 200px auto;
    }

    .ca-changescontent p {
        max-width: 370px;
    }
}
/**
 *  - >= 710px
 */

@media screen and (min-width: 44.375em) {
    /*------------- Challenge -----------------*/
    .ca-challengecontent h2 {
        text-align: center;
    }

    .ca-challengeleft {
        width: 46%;
        float: left;
    }

    .ca-challengeright {
        width: 46%;
        float: right;
    }

    .ca-challengecontent p {
        color: #fff;
    }

    .ca-italics {
        font-style: italic;
    }
    /*------------- Challenge -----------------*/
    /*------------- Features -----------------*/
    .ca-featureouter {
        padding: 0 0 60px;
    }

    .ca-featurearea {
        width: 90%;
        margin: 18% auto 0;
    }

    .ca-feature {
        width: 30%;
    }

        .ca-feature img {
            width: 45%;
        }
    /*------------- Features -----------------*/
    /*------------- Free features -----------------*/
    .ca-freefeatureouter {
        padding: 0 0 60px;
    }

    .ca-freefeaturearea {
        width: 90%;
        margin: 18% auto 0;
    }

    .ca-freefeature {
        width: 30%;
    }

        .ca-freefeature:nth-last-child(-n+3) {
            margin-bottom: 20px;
        }
    /*------------- Free features -----------------*/
    /*------------- Future -----------------*/
    .ca-futureleft {
        width: 30%;
        margin-bottom: 30px;
        float: left;
        text-align: right;
    }

    .ca-futureright {
        width: calc( 60% - 20px);
        margin-left: 20px;
        padding-left: 20px;
        border-left: 3px solid #14487e;
        float: left;
        text-align: left;
    }

        .ca-futureright p:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }
    /*------------- Future -----------------*/
    .ca-affirmouter {
        background-position: center 45%;
    }
}
/**
 *  - >= 768px
 */

@media screen and (min-width: 48em) {
    .ca-changesouter {
        background-position: 27% top;
    }
    /*------------- Get now -----------------*/
    .ca-getnowouter {
        padding: 250px 0 150px;
    }
    /*------------- Get now -----------------*/
}
/**
 *  - >= 1000px
 */

@media screen and (min-width: 62.5em) {
    .ca-changesouter {
        padding: 20% 0 75px;
        background-position: center top;
    }

    .ca-changescontent h2 {
        max-width: 450px;
        margin: 0 5% 250px auto;
    }

    .ca-changescontent p {
        max-width: 450px;
    }
}
/**
 *  - >= 1200px
 */

@media screen and (min-width: 75em) {
    .ca-changesouter {
        padding: 15% 0 75px;
        background-position: 35% 30%;
    }

    /*------------- Features -----------------*/
    .ca-featurearea {
        margin: 15% auto 0;
    }

    /*------------- Features -----------------*/
    /*------------- Free features -----------------*/
    .ca-freefeaturearea {
        margin: 15% auto 0;
    }

    /*------------- Free features -----------------*/

    /**
 *  - >= 1920px
 */
}
    @media screen and (min-width: 120em) {
        .ca-affirmouter {
            background-size: cover;
            background-position: center center;
        }

        .ca-affirmarea p:nth-child(3) { margin-bottom: 100px; }
    }
