/* Inflation 101 landing page styles */

/* Intro text and other content at top of page */
.intro {
    margin-bottom: 30px;
}

/* Design selected background colors for the 3 columns */
.what-is {
    background-color: #EFEFEF;
}

.why-you {
    background-color: #EBF2F5;
}

.why-fed {
    background-color: #E2E6E8;
}

/* Column sections */

/* Section containing the column header (image/video/content) */
.header {
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Don't center header image/video when not mobile */
@media (min-width: 736px) {
    .header {
        display: block;
    }
}

/* Section containing the learning path title (Get Started, Get Technical) */
.title {
    padding: 1em;
    margin-top: 0;
}

/* Title text style */
.title-text {
    font-size: 24px;
    line-height: 27px;
    color: #201f1f;
    font-family: 'HelveticaNeueLT-Light', sans-serif;
    padding: 0;
    margin-top: 0;
}

/* Section with text describing the learning path question */
.description {
    padding: 1em;
}

/* remove default p margin-bottom from text inside description section for better spacing */
.description-text {
    margin-bottom: 0;
}

/* Learning paths refer to the "Get started" and "Get technical" paths for each section */

/* Section listing questions you can find answers to for "Get started" content */
.started {
    padding: 1em;
}

/* Section with a list of questions you can find answers to for "Get technical" content */
/* Add bottom margin to get technical sections on mobile since they are the last element 
in their sections  */
.technical {
    padding: 1em;
    margin-bottom: 30px;
}

/* Remove bottom margin from last get technical section on mobile */
[class~='technical']:last-of-type {
    margin-bottom: 0;
}

/* Elements inside .started or .technical learning path divs*/

/* Contains path title and list of questions */
.learning-path-body {
    padding: 0;
}

.learning-path-title {
    margin-top: 0;
    font-family: 'HelveticaNeueLT-Roman', sans-serif;
    font-size: 18px;
    line-height: 18px;
    color: #e67a17;
}

/* Unordered list of questions */
.learning-path-questions {
    margin-left: 0;
    margin-bottom: 15px;
}

/* Contains a button to navigate to the associated sub-page */
.learning-path-footer {
    padding: 0;
    border: none;
}




/* Remove bottom margin from all get technical sections on larger than mobile */
@media (min-width: 736px) {
    .technical {
        margin-bottom: 0;
    }
}

/* Grid areas */
.header.what-is {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: hd-what-is;
}

.title.what-is {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: tl-what-is;
}

.description.what-is {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: ds-what-is;
}

.started.what-is {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    grid-area: gs-what-is;
}

.technical.what-is {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    grid-area: gt-what-is;
}

.header.why-you {
    -ms-grid-row: 6;
    -ms-grid-column: 1;
    grid-area: hd-why-you;
}

.title.why-you {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    grid-area: tl-why-you;
}

.description.why-you {
    -ms-grid-row: 8;
    -ms-grid-column: 1;
    grid-area: ds-why-you;
}

.started.why-you {
    -ms-grid-row: 9;
    -ms-grid-column: 1;
    grid-area: gs-why-you;
}

.technical.why-you {
    -ms-grid-row: 10;
    -ms-grid-column: 1;
    grid-area: gt-why-you;
}

.header.why-fed {
    -ms-grid-row: 11;
    -ms-grid-column: 1;
    grid-area: hd-why-fed;
}

.title.why-fed {
    -ms-grid-row: 12;
    -ms-grid-column: 1;
    grid-area: tl-why-fed;
}

.description.why-fed {
    -ms-grid-row: 13;
    -ms-grid-column: 1;
    grid-area: ds-why-fed;
}

.started.why-fed {
    -ms-grid-row: 14;
    -ms-grid-column: 1;
    grid-area: gs-why-fed;
}

.technical.why-fed {
    -ms-grid-row: 15;
    -ms-grid-column: 1;
    grid-area: gt-why-fed;
}

/* Grid setup */
.landing-page-grid {
    display: -ms-grid;
    display: grid;
    grid-auto-rows: minmax(50px, auto);
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "hd-what-is"
        "tl-what-is"
        "ds-what-is"
        "gs-what-is"
        "gt-what-is"
        "hd-why-you"
        "tl-why-you"
        "ds-why-you"
        "gs-why-you"
        "gt-why-you"
        "hd-why-fed"
        "tl-why-fed"
        "ds-why-fed"
        "gs-why-fed"
        "gt-why-fed";
}

@media (min-width: 736px) {
    .landing-page-grid {
        -webkit-column-gap: 15px;
        -moz-column-gap: 15px;
        column-gap: 15px;
        -ms-grid-columns: 1fr 15px 1fr 15px 1fr;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "hd-what-is hd-why-you hd-why-fed"
            "tl-what-is tl-why-you tl-why-fed"
            "ds-what-is ds-why-you ds-why-fed"
            "gs-what-is gs-why-you gs-why-fed"
            "gt-what-is gt-why-you gt-why-fed";
    }

    .header.what-is {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .title.what-is {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }

    .description.what-is {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    .started.what-is {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }

    .technical.what-is {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }

    .header.why-you {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }

    .title.why-you {
        -ms-grid-row: 2;
        -ms-grid-column: 3;
    }

    .description.why-you {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
    }

    .started.why-you {
        -ms-grid-row: 4;
        -ms-grid-column: 3;
    }

    .technical.why-you {
        -ms-grid-row: 5;
        -ms-grid-column: 3;
    }

    .header.why-fed {
        -ms-grid-row: 1;
        -ms-grid-column: 5;
    }

    .title.why-fed {
        -ms-grid-row: 2;
        -ms-grid-column: 5;
    }

    .description.why-fed {
        -ms-grid-row: 3;
        -ms-grid-column: 5;
    }

    .started.why-fed {
        -ms-grid-row: 4;
        -ms-grid-column: 5;
    }

    .technical.why-fed {
        -ms-grid-row: 5;
        -ms-grid-column: 5;
    }
}


/* Sub-page Navigation and Image Styles */
.inflation-nav {
    margin: 1em 0 2em !important;
}

.inflation-article-image {
    margin: 0 0 1em 1em;
}

@media (max-width: 600px) {
    .inflation-article-image {
        display: none;
    }
}

.inflation-question {
    font-family: 'HelveticaNeueLT-Roman', sans-serif;
    padding-bottom: 7px;
    font-size: 18px;
    color: #e67a17;
    margin-top: 0px !important;
}

.inflation-footer {
    font-size: 16px;
}

.inflation-footer--icon {
    color: #e67a17;
    font-size: 22px;
}

.inflation-footer-keep-reading {
    text-align: left;
}

.inflation-footer-back {
    text-align: right;
}

@media screen and (max-width: 600px) {
    .inflation-footer-back {
        text-align: left;
    }
}

/* Color the learning path icons orange in regular copy */
.path-icon {
    color: #e67a17;
}

/* Larger icons used in landing page column sections */
.path-icon-nav {
    color: #e67a17;
    margin-right: 15px;
}


/* Styles for added content on page (embedded videos, images, links with images) */
/* Added on 9/28/2020 by Chris Vecchio */
.inset-content {
    font-family: HelveticaNeueLT-Italic;
    color: #414b56;
    margin-bottom: 20px;
    line-height: 24px;
}

@media (max-width:640px) {
    .inset-content {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width:640px) {
    .inset-content {
        /* max-width: 270px; */
    }
}

div>[class='inset-content']:last-of-type {
    /* margin-bottom: 0; */
}

.inset-content-heading {
    font-family: HelveticaNeueLTStd-MdIt;
    font-size: 14px;
}

.inset-content-text {
    color: #201f1f;
    /* font-size: 13px; */
}

.embed-video {
    margin-top: 17px;
}

@media (max-width:640px) {
    .embed-video {
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* Text beneath Inflation 101 Quiz image on landing page */
/* Added on 10/29/2020 by Chris Vecchio */
.quiz-text {
    font-family: HelveticaNeueLT-Italic;
    color: #201f1f;
    line-height: 24px;
}