/* ------------Global------------ */
:root {
    --slide-gap: 1.25rem;
    --slide-padding: 1.75rem;
    --slide-border: 1px solid var(--secondary-purple, #5949A7);
    --slide-background: white;
    --slide-basis: 20.025rem;
       --slide-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);
   
    --quote-size: 1.125rem;
    --quote-weight: 400;
    --quote-height: 1.66;
   
    --quote-decoration-size: 1.875rem;
    --quote-decoration-weight: 400;
    --quote-decoration-height: 1.06;
   
    --section-padding-x: 3rem;
    --section-padding-y: 3.5rem;
}
   
body {
    color: #000;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1.125rem;
    margin: 0 auto;
}

.cfa h1, .cfa h2, .cfa h3, .cfa h4{
    line-height: 1.1;
    margin: 0 0 0.75rem;
}

.cfa h1 {
    font-size: 2.33rem;
    font-weight: 900;
}
   
.cfa h2 {
    font-size: 2rem;
    font-weight: 600;
}
   
.cfa h3 {
    font-size: 1.68rem;
    color: #5949a7;
    font-weight: 600;
}
   
   .cfa h3.underline {
       margin-bottom: 3rem;
       position: relative;
   }
   
   .cfa h3.underline:after {
       content: "";
       width: 3.45rem;
       height: 0.425rem;
       background: #5949A7;
       position: absolute;
       bottom: -1rem;
       left: 0;
   }
   
.cfa h4 {
    font-size: 1.33rem;
    font-weight: 600;
}

.cfa p {
    font-size: 1.125rem;
    line-height: 1.65;
    margin: 0 0 1.5rem 0;
}
   
.cfa ul {
    font-size: 1.125rem;
    line-height: 1.65;
    margin: 0;
}
   
/* Main Content */
/* Section Formatting */
.container,
.container-lg {
    padding: 1rem;
    margin: auto;
}
   
.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.cfa .pannel-right,
.cfa .pannel-left {
    flex: 1 100%;
}
.bg-gray {
    color: #231f20;
    background-color: #f5f5f5;
    border-top: #e8e8e8 solid 2px;
    border-bottom: #e8e8e8 solid 2px;
}
  
.bg-purple {
    background-color: #5949a7;
}
   
.pannel-top,
.pannel {
    flex: 1 100%;
}
   
/* ------------GATED CSS------------ */
/* Top Banner */
.banner {
    text-align: center;
}
.banner p {
    padding: 0.5rem 0;
    color: #fff;
}

/* Hero Section */
.hero-pannel {
    padding: 25px;
}
   
.pannel-left .hero-img {
    margin-bottom: 0.75rem;
    border: gray solid 0.1rem;
    width: 50%;
}

   .hero-text h2 {
    margin-bottom: 0.5rem;
   }
   
   fieldset {
    border-color: transparent;
   }
   
   /*.highlight {
    color: #017acd;
    font-weight: 400;
    pointer-events: none;
   }*/
   
   /* Slider CSS */
   .position__root {
    position: relative;
   }
   
   .bg--bottom {
    background-position: center bottom;
   }
   
   .scroll--horizontal {
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
   }
   
   .scroll--horizontal::-webkit-scrollbar {
    display: none;
   }
   
   .slides {
    display: inline-flex;
    gap: var(--slide-gap);
   }
   
   .slide article {
    padding: var(--slide-padding);
    border: var(--slide-border);
    background: var(--slide-background);
       box-shadow: var(--slide-shadow);
    display: flex;
    gap: 1.75rem;
    flex-direction: column;
    justify-content: space-between;
    width: var(--slide-basis);
    flex-shrink: 0;
    flex-grow: 0;
   }
   
   .slide__controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
   }
   
   .slide__controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
   }
   
blockquote {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: var(--quote-size);
    font-weight: var(--quote-weight);
    line-height: var(--quote-height);
}
   
cite {
    font-size: var(--quote-size);
    font-weight: var(--quote-weight);
    line-height: var(--quote-height);
}

/* Thank you page */ 
.hero-img{
    width: 20rem;
}
.hero-section .container {
    padding-bottom: 0;
}
.hero-section{
    background-image: url("https://image.mail.cfainstitute.org/lib/fe3011717d640478711577/m/1/6780761c-e2ab-4384-9a09-b3354919fe2f.jpg");
    background-color: #5949a7;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero-section .pannel-left{
    background-color: #5949a7;
    height: fit-content;
}
.hero-section{
    color: #fff;
}
.hero-section .form-btn {
    padding-right: 0.8rem;
    padding-left: 0.8rem;
}
.hero-text{
    padding: 1rem;
}
.hero-text h2{
    margin-bottom:2rem;
}
.resources{
    background-color:#e7ebf7;
    padding: 1.5rem;
}
.overview a{
    color: #003da5;
    text-decoration: none;
}
.overview ul{
    margin-bottom:1.5rem;
}
.overview .pannel-right, .overview .pannel-left, .list-right, .list-left {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.callout p{
    font-size: 1.75rem;
    line-height: 1.25;
}
.cta{
    background-color: #5949a7;
}
.cta .container{
    text-align: center;
}
.cta h3, .cta p{
    color: #fff;
}
.cta .form-btn{
    margin-top: 1.5rem;
}

@media (min-width: 900px) {
/* ------------GATED CSS------------ */
    .cfa .container {
        padding: 3rem 0rem;
        margin: auto;
        width: 85%;
    }
    .cfa .container-lg{
        padding: 3rem 0rem;
        margin: auto;
        width: 95%;
    }
    .cfa .flex-container{
        gap: 20px 40px;
    }
    .hero-section .container{
        padding: 0;
    }
    .cfa .hero-img {
        max-width: 20rem;
    }
    .cfa .pannel-left p {
        margin-right: 1rem;
    }
    .cfa .pannel-right, .cfa .pannel-left{
        flex: 1 40%;
    }
    .cfa .pannel-left{
        order: 1;
    }
    .cfa .pannel-right{
        order: 2;
    }
    /*Thank you page */
    .hero-section .hero-img{
        max-width: 90rem;
        width: 100%;
    }
    
    .hero-text{
        padding: 2rem;
    }
    .list{
        display: flex;
        flex-flow: row;
        gap: 2rem;
        margin-top: 2rem;
    }

    .cta .container{
        max-width: 600px;
    }
}
   
@media (min-width: 1300px) {
    /* ------------Global------------ */
    .cfa h1 {
        font-size: 3rem;
    }
    .cfa h2 {
        font-size: 2rem;
    }
    .cfa h3 {
        font-size: 1.875rem;
    }
    .cfa .header-container {
        padding: 1rem 5rem;
    }
    .cfa .pannel-top {
        margin-bottom: 1.5rem;
    }

    .cfa .pannel-left p {
        margin-right: 1.5rem;
        max-width: 37rem;
    }
    .resources {
        max-width: 21rem;
    }
    .cfa .container-lg{
        width: 85%;
    }
    .header-container {
        padding: 1rem 5rem;
    }
}
@media (min-width: 1450px) {
    .info .pannel-right, .info .pannel-left{
        flex: 1 auto;
    }
    .cfa .container {
        width: 75%;
    }
}