.nf-container {
    width: 300px;
    font-size: 10pt;
}

.nf-panel {
    border: .1em solid;
    padding: 2%;
    font-family: arial,helvetica,sans-serif;
    font-weight: normal;
    /*IE Hack*/
}

    .nf-panel svg {
        width: 100%;
    }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .nf-panel svg {
        height: 2.35em;
    }
}

.nf-panel .nf-servings-per {
    border-top: .1em solid;
    padding: .2em 0 0 0;
}

    .nf-panel .nf-servings-per .nf-servings-per-content {
        font-size: 110%;
    }

.nf-panel .nf-serving-size {
    font-family: Helvetica Black,Arial Black,Sans-Serif;
    font-weight: 900;
    display: flex;
    font-size: 125%;
    line-height: 110%;
    padding: 0 0 .2em 0;
    border-bottom: 1em solid;
    margin: 0 0 .2em 0;
}

    .nf-panel .nf-serving-size > div {
        flex-grow: 1;
    }

        .nf-panel .nf-serving-size > div:last-of-type {
            text-align: right;
        }

.nf-panel .nf-amount-title {
    font-family: Helvetica Black,Arial Black,Sans-Serif;
    font-weight: 900;
    font-size: 75%;
}

.nf-panel .nf-calories {
    display: inline-block;
    width: 100%;
    padding: 0 0 .1em 0;
}

.nf-panel .nf-calories-content {
    font-family: Helvetica Black,Arial Black,Sans-Serif;
    font-weight: 900;
    display: flex;
    margin: 0 0 .1em 0;
}

    .nf-panel .nf-calories-content > div {
        flex-grow: 1;
        align-self: flex-end;
    }

        .nf-panel .nf-calories-content > div.nf-calories-value {
            text-align: right;
            font-size: 275%;
            line-height: 110%;
        }

.nf-panel .nf-calories-label {
    font-size: 200%;
    line-height: 120%;
}

.nf-panel .nf-multicolumn {
    display: flex;
    padding: 0 0 .2em 0;
}

    .nf-panel .nf-multicolumn > div {
        flex-grow: 1;
    }

.nf-panel .nf-values-column {
    border-left: .1em solid;
    padding: 0 0 0 .2em;
    margin: 0 0 0 .2em;
}

    .nf-panel .nf-values-column .nf-calories-content {
        text-align: right;
    }

.nf-panel .nf-dv-header {
    border-top: .5em solid;
    text-align: right;
    margin: 0 0 .1em 0;
}

    .nf-panel .nf-dv-header .nf-dv-header-label {
        font-size: 75%;
        font-family: Helvetica Black,Arial Black,Sans-Serif;
        font-weight: 900;
    }

.nf-panel .nf-value-line {
    border-top: .1em solid;
    line-height: 115%;
    box-sizing: content-box;
    height: 1.25em;
    font-family: Helvetica Black,Arial Black,Sans-Serif;
    font-weight: 900;
    display: flex;
    margin: 0 0 .1em 0;
    padding: .1em 0 0 0;
}

    .nf-panel .nf-value-line .nf-value-amount {
        font-family: arial,helvetica,sans-serif;
        font-weight: normal;
        font-size: 95%;
    }

        .nf-panel .nf-value-line .nf-value-amount:before {
            content: " ";
        }

    .nf-panel .nf-value-line > div {
        flex-grow: 1;
    }

        .nf-panel .nf-value-line > div.nf-dv {
            text-align: right;
            font-family: Helvetica Black,Arial Black,Sans-Serif;
            font-weight: 900;
        }

    .nf-panel .nf-value-line.nf-level-1 {
        margin: 0 0 .1em 0;
        padding: .1em 0 0 6%;
        font-family: arial,helvetica,sans-serif;
        font-weight: normal;
    }

    .nf-panel .nf-value-line.nf-level-2 {
        margin: 0 0 1% 12%;
        font-family: arial,helvetica,sans-serif;
        font-weight: normal;
    }

.nf-panel .nf-vitamin-row {
    display: flex;
    justify-content: space-between;
    margin: 0 0 .1em 0;
    font-size: 95%;
    border-top: .1em solid;
    line-height: 115%;
    height: 1.25em;
    box-sizing: content-box;
}

    .nf-panel .nf-vitamin-row > div {
        padding: .1em 0 0 0;
    }

        .nf-panel .nf-vitamin-row > div:last-of-type {
            text-align: right;
        }

    .nf-panel .nf-vitamin-row:first-of-type {
        border-top: 1em solid;
        padding: .1em 0 0 0;
    }

.nf-panel .nf-footnote {
    border-top: .5em solid;
    padding: .3em 0 0 0;
}

    .nf-panel .nf-footnote .nf-footnote-content {
        font-size: 75%;
    }

/*IE Hack*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .nf-panel.nf-columns-2 svg {
        height: 3.6em;
    }
}

.nutrition-listing {
    padding-top: 3rem;
}

.nutrition-area {
    clear:both;
    margin: 0 15px;
}

.nutrition-title-and-label, .nutrition-listing {
    float: right;
    max-width: 48%;
}

.nutrition-title-and-label {
    float: left;
    max-width: 48%;
}

@media screen and (max-width: 1225px) {

    .nutrition-listing {
        padding-top: 2.5rem;
        float: none;
        width: 85%;
        max-width: 85%;
        clear: both;
    }

    .nutrition-info.nutrition-sku {
        float: none;
        width: 100%;
        max-width: 100%;
    }

    .nutrition-title-and-label {
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 750px) {

    .nutrition-listing {
        padding-top: 2.5rem;
        float: none;
        margin: 0 30px;
    }

    .label-title {
        margin: 0 30px 15px 30px;
    }

    .nutrition-info.nutrition-sku {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nutrition-area {
        margin: 15px -15px;
    }
}

.nutrition-section {
    display: flex;
    margin: 0 -15px;
    flex-direction: column;
    margin-bottom: 1em;
}