﻿/* ........Global Styles........ */
@import url(inspira.css);
@font-face {
    font-family: 'Conv_guifx';
    src: url('/fonts/guifx.eot');
    src: local('â˜º'), url('/fonts/guifx.woff') format('woff'), url('/fonts/guifx.ttf') format('truetype'), url('/fonts/guifx.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'geinspira', Arial, sans-serif!important;
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
}
a img,:link img,:visited img {
    border: none
}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {
    margin: 0;
    padding: 0;
}

.sub-menu-list {
    margin: 0;
    font-size: 13px;
}


html {
    font-family: 'geinspirapitch', Arial, sans-serif!important;
    font-weight: normal;
    font-style: normal;
}
body {
    font: 400 15px/22px 'geinspirapitch', Arial, sans-serif!important;
    letter-spacing: 0;
    background-color: #fff;
}
a:link, a:active, a:visited {
    text-decoration: underline;
    color: #2cace3;
}
a:hover {
    text-decoration: none;
}
ul {
    padding-left: 60px;
    padding-bottom: 0;
}
ul li {
    padding-bottom: 3px;
    list-style: circle;
}
ol {
    padding-left: 13px;
    padding-bottom: 0;
}
ol li {
    padding-bottom: 4px;
    list-style: circle;
}
ol li {
    list-style: decimal;
    font-size: 10px;
    line-height: 15px;
    color: #4e4e4e;
}
h1 {
    font-size: 30px;
    line-height:1.25em;
    margin-bottom: 12px;
    font-weight: 300;
    color: #2cace3;
}
h2 {
    color: #4e4e4e;
    font-size: 15px;
    line-height: 18px;
    font-style: italic;
    font-weight: 400;
}
p {
    display: block;
    padding-bottom: 0.5em;
}
.summary strong {
    color: #00aeef;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #dfdedb;
    padding:0 0 20px 0;
}
sup,
sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;

}
sup {
    bottom: 1ex;
}
sub {
    top: .5ex;
}
.break {
    clear: both;
    display: block;
}
.break_line
{
    display: block;
    clear: both;
    height: 1px;
    width: 100%;
    padding-top: 30px;
    margin: 0 0 15px 0;
    border-bottom: 1px solid #dfdedb;
}
.hide {
    display: none !important;
}
/* ........ END Global Styles........ */


/* ........Intro Styles........ */
.interface-wrapper {
    width: 984px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    display: block;
    clear: both;
    text-align: left;
}
.interface-inner {
    max-width: 984px;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    clear: both;
    text-align: left;
    background: rgba(0, 0, 0, 0) url("../img/nutrition-home-bkgd.png") no-repeat scroll 100% 0;
    height: auto;
}
.top-content {
    clear:both;
}
.intro-content {
    padding-left: 100px;
    padding-top: 65px;
    color: #4e4e4e;
    font-size: 18px;
    line-height: 17px;
    float:left;
    width:60%;
    margin-bottom: 70px;
}
.intro-header {
    color: #08a5e1;
    font-size: 41px;
    line-height: 45px;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'geinspira', Arial, sans-serif;
}
.intro-text {
    text-align: left;
}
.intro-text p {
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
}
.intro-text p span.blue{
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
}
.intro-content h2 {
    font-size:24px;
    color:#08a5e1;
    line-height:30px;
    font-style:normal;
}
.blue {
    color:#08a5e1;
    font-weight: 700;
}
ul.blue {
    padding:20px 0 0 25px;
    color:#4e4e4e;
    list-style-type:none;
    max-width: 410px;
}
ul.blue li {
    padding-left:20px;
    list-style-type:none;
    background:url('../img/dark_blue_bullet.png') no-repeat 0 50%;
    vertical-align:top;
    font-size: 16px;
    font-weight: 700;
    font-family: 'geinspira', Arial, sans-serif;
}
ul.blue li + li {
    margin-top:10px;
}
.ref-call,
a.ref-call {
    font-size: 12px;
    font-weight: 700;
    color: #08a5e1;
    padding-right: 5px;
    padding-left: 0;
    display: inline;
    position: relative;
    text-decoration: underline;
    vertical-align: super;
    line-height: 12px;
}
.home-calculate-btn {
    margin-top: 30px;
}
.home-calculate-btn a.button-large {
    background-color:#08a5e1;
    padding: 5px 30px;
    display: block;
    color: #ffffff;
    font-size: 18px;
    line-height: 36px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 1.2em;
    max-width: 350px;
    text-transform: uppercase;
}
a.button-large:hover {
    background-color:#00aeef;
}
.bottom-content {
    background: rgba(0, 0, 0, 0) url("../img/footer-callout-bkgd793x263.png") no-repeat scroll 100% 0;
    clear: both;
    margin: 50px auto 0;
    max-width: 793px;
    height: auto;
    text-align: left;
    width: 100%;
}
.bottom-content .footer-wrapper {
    max-width: 450px;
    width: 100%;
    padding: 3em 3.5em 2.5em;
}
.footer-header {
    color: #ffffff;
    font-size: 35px;
    font-weight: 700;
    line-height: 66px;
}
.footer-content {
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
}
.footer-callout-btn {
    margin-top: 20px;
}
.footer-callout-btn a.button-large {
    background-color:#ffffff;
    padding: 5px 30px;
    display: block;
    color: #08a5e2;
    font-size: 17px;
    line-height: 34px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 1.2em;
    max-width: 225px;
    text-transform: uppercase;
}
.footer-callout-btn a.button-large:hover {
    color: #00aeef;
}
.footer-reference {
    clear: both;
    display: block;
    margin: 0 auto;
    padding: 1em 0 3em;
    width: 100%;
    text-align: center;
}
.footer-reference-link {
    clear: both;
    display: block;
    height: 100%;
    margin: 0 auto;
    padding: 2em 0 0;
    width: 100%;
    text-align: center;
}
a.footer-link {
    color: #08a5e1;
    font-size: 15px;
    line-height: 26px;
    margin-right: 30px;
    text-decoration: underline;
}
a.footer-link:hover {
    color: #00aeef;
}
.ref-right {
    width: 50%;
    float: left;
    max-width: 450px;
}
.ref-left {
    width: 50%;
    float:left;
    max-width:450px;
    margin-right:2.5em;
}
    /* .......Intro Media Queries....... */
    @media (max-width: 480px) {
        .interface-wrapper {
            width: 100%;
        }
        .interface-inner {
            max-width:100%;
            background: none;
        }
        .intro-content {
            font-size: 14px;
            padding: 3em 2em 0;
            width: 85%;
        }
        .intro-header {
            font-size: 28px;
            margin-bottom: 14px;
        }
        .intro-text p {
            font-size: 15px;
            line-height: 20px;
        }
        .intro-text p span.blue {
            font-size: 15px;
            line-height: 20px;
        }
        .intro-text br {
            display: none;
        }
        .ref-call, a.ref-call {
            font-size: 10px;
        }
        .intro-image-right {
            display: none;
        }
        ul.blue li {
            font-size: 14px;
        }
        .home-calculate-btn a.button-large {
            font-size: 16px;
            line-height: 22px;
            max-width: 310px;
            padding: 10px 20px;
        }
        .footer-reference {
            padding: 2em;
            width: 90%;
        }
        .ref-right {
            width: 100%;
        }
        .ref-left {
            width: 100%;
            padding-right:0;
        }
        .bottom-content {
            max-width: 100%;
        }
        .bottom-content .footer-wrapper {
            max-width: 400px;
            padding: 3em 15px 2.5em;
            width: 100%;
        }
        .footer-header {
            font-size: 28px;
            line-height: 36px;
        }
        .footer-content {
            font-size: 14px;
            line-height: 20px;
            padding-top: 10px;
        }
        .footer-callout-btn a.button-large {
            font-size: 16px;
            line-height: 22px;
            max-width: 210px;
            padding: 10px 20px;
        }
        a.footer-link {
            margin-right: 0;
        }
    }
    @media (max-width: 429px) {
        .bottom-content .footer-wrapper {
            max-width: 350px;
        }
    }
    @media (max-width: 416px) {
        .intro-header {
            font-size: 20px;
        }
        .home-calculate-btn a.button-large {
            font-size: 16px;
            line-height: 22px;
            max-width: 200px;
            padding: 10px 20px;
            text-align: center;
            margin: 0 auto;
        }
        .intro-text p {
            font-size: 14px;
            line-height: 20px;
        }
        .bottom-content {
            text-align: center;
        }
        .footer-callout-btn a.button-large {
            margin: 0 auto;
        }
        .bottom-content .footer-wrapper {
            max-width: 100%;
            width: 90%;
        }
        .footer-header {
            font-size: 20px;
            line-height: 30px;
        }
        .footer-reference {
            padding: 2em 0;
            width: 90%;
        }
    }
    @media (max-width: 366px) {
        .intro-content {
            width: 80%;
        }
    }
    /* .......Intro Media Queries....... */

/* ........End Intro Styles........ */


/* ........Calculate Page Styles........ */
.input-wrapper {
    display: block;
    float: left;
    width: 55%;
    padding-top: 4em;
}
.border {
    border-left: 1px solid #e4e4e4;
    padding: 0 1em;
}
.top-input-container {
    min-height: 195px;
}
.top-input-container h1 {
    color: #08a5e1;
    font-size: 25px;
    font-weight: 300;
    line-height: 1.15em;
    margin-bottom: 1.25em;
}
.groups div {
    font-size: 14px;
    display: inline-block;
    float: left;
}
.labels {
    padding-right: 1.25em;
    min-width: 386px;
}
.inputs {
    padding-right: 0.25em;
}
.groups div div {
    display: block;
    float: none;
    line-height: 28px;
    margin-bottom: 10px;
}
.groups input {
    max-width: 70px;
}
.groups input[type="text"],
.groups input[type="number"] {
    font-size: 12px;
    padding: 3px 8px;
    line-height: 20px;
}
input[type="text"],
input[type="number"] {
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    box-shadow: 0 1px 6px 0 rgba(40, 39, 39, 0.2) inset;
    color: #4e4e4e;
    display: block;
    text-align: right;
    width: 70px;
}
input[type="text"]::-ms-clear,
input[type="number"]::-ms-clear {
    width : 0;
    height: 0;
    display: none;
}
.sub-spacer {
    height:2em;
    width: 100%;
}
.submit {
    display: block !important;
    float: none !important;
    margin: 0 auto;
}
input[type="submit"], .submit-btn {
    background-color: #08a5e1;
    border: medium none;
    border-radius: 0.2em;
    color: #ffffff;
    display: block;
    font-size: 18px;
    font-weight: 700;
    height: 40px;
    line-height: 25px;
    margin: 0 auto;
    max-width: 140px;
    padding: 8px 20px 10px;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-appearance: none;
}
input[type="submit"]:hover {
    background-color: #00aeef;
}
input[type="hidden"] {
    display:none;
}
.bottom-input-container {
    clear: both;
    padding: 3em 1em 1em;
}
.input-disclaimer {
    margin-top: 0;
}
.input-disclaimer p {
    font-size: 12px;
    line-height: 15px;
    color: #4e4e4e;
}
.reference {
    padding: 1em 0 0;
}
.reference p {
    font-size: 10px;
    line-height: 15px;
    color: #888888;
}
.chart-wrapper {
    display: block;
    float: left;
    width: 45%;
    padding-top: 4em;
}
.pad {
    padding: 0 1em;
}
.vert-title-wrapper {
    float: left;
    width: 10%;
}
.chart-container {
    padding-left: 8em;
}
.chart-into h2 {
    color: #08a5e1;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.15em;
    margin-bottom: 1.25em;
    margin-left: 24px;
    font-style: normal;
}
.empty-spacer {
    width:44%;
    float:left;
    padding:1em 0 0;
}
.desc-one {
    width:15%;
    float:left;
    padding:1em 0.6em 0.5em 0;
}
.desc-two {
    width:20%;
    float:left;
    padding:1em 0.6em 0.5em 0;
}
.desc-three {
    width:15%;
    float:left;
    padding:1em 0 .5em;
}
.desc-one p,
.desc-two p,
.desc-three p {
    font-size: 8px;
    line-height:10px;
    text-align:center;
}
.hort-img {
    font-size: 14px;
    text-align: right;
    font-style: normal;
}
.horiz-heading {
    text-align: right;
}
.contact-btn-container {
    text-align: center;
    padding: 2em;
}
.hide-btn {
    display: none;
}
.unhidden {
    display: none;
}
a.hidden-contact {
    background-color: #08a5e1;
    border-radius: 0.2em;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    height: 50px;
    display:block;
    line-height: 25px;
    margin: 0 auto;
    max-width: 250px;
    padding: 12px 20px 10px;
    text-decoration: none;
    text-transform: uppercase;
}
a.hidden-contact:hover {
    background-color:#00aeef;
}
.chart-disclaimer p {
    font-size: 12px;
    line-height: 15px;
    color: #4e4e4e;
}
.footer-wrapper {
    clear: both;
    display: block;
    padding: 1em 2em;
}
.disclaimer p {
    font-style: italic;
    font-size: 10px;
    line-height: 15px;
    color: #888888;
}
a.sup-items {
    font-size: 8px;
    font-weight: bold;
    padding-right: 5px;
    padding-left: 0;
    display: inline;
    position: relative;
    text-decoration: underline;
    vertical-align: super;
    line-height: 10px;
    color: #08a5e1;
}
a.foot-note {
    font-size: 8px;
    font-weight: bold;
    padding-right: 5px;
    padding-left: 0;
    display: inline;
    position: relative;
    text-decoration: underline;
    vertical-align: super;
    line-height: 10px;
    color: #08a5e1;
}
.mobile-reference {
    display: none;
}
.mobile-reference p {
    font-size: 10px;
    line-height: 15px;
    color: #888888;
}
    /* .......Calculate Media Queries....... */
        @media (max-width: 480px) {
            .input-wrapper {
                width: 100%;
                padding-top: 2.5em;
            }
            .border {
                border-right: none;
                border-top: 1px solid #e4e4e4;
                padding-top: 3em;
            }
            .top-input-container {
                min-height: 265px;
            }
            .top-input-container h1,
            .chart-into h2 {
                font-size: 18px;
                margin-left: 0;
            }
            .groups div {
                font-size: 12px;
            }
            .labels {
                min-width: 100%;
            }
            .labels div {
                line-height: 18px !important;
            }
            .mid-input-container {
                padding: 1em 0 0;
            }

            input[type="submit"] {
                -webkit-appearance: none;
            }
            .submit_btn {
                display: block !important;
                float: none !important;
                margin: 0 auto;
                -webkit-appearance: none;
            }
            .bottom-input-container {
                clear: both;
                padding: 2em 1em 1em;
            }
            .reference {
                display: none;
            }
            .chart-wrapper {
                width: 100%;
            }
            a.contact-btn {
                font-size: 14px;
                height: 40px;
                line-height: 18px;
            }
            .mobile-reference {
                display: inline;
            }
            .desc-two {
                width: 14%;
            }
            .input-disclaimer {
                margin-top: 0;
            }
            .disclaimer {
                padding: 2em 0 0;
            }
        }
        @media (max-width: 355px) {
            .top-input-container {
                min-height: 290px;
            }
        }
    /* ....... End Calculate Media Queries....... */

/* ........End Calculate Page Styles........ */

/* ......... Overlay ......... */
.overlay {
    width: 984px;
    height: 670px;
    background-color: #333;
    position: absolute;
    display: none;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
}
.overlay-blue,
.overlay-gray {
    width: 756px;
    height: 660px;
    position: absolute;
    top: 20px;
    left: 68px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    z-index: 2;
    padding: 65px 45px;
    text-align: left;
}
.overlay-blue {
    font-size: 12px;
    padding-top: 45px;
    height: 448px;
    line-height: 16px;
}
.overlay-gray {
    background: #f1f1f1 no-repeat 0 100%;
    background-size:contain;
    padding-top: 35px;
    padding-bottom: 35px;
    height: auto;
    border:5px solid rgba(0, 0, 0, 0.5);
}
.overlay-gray h2 { font-weight:700;font-style:normal; }
.overlay-gray p { font-size:11px;color:#4e4e4e;line-height:11px; }
a.overlay-close {
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    position: absolute;
    display: block;
    background: url(../img/overlay-close.png) no-repeat 0 0;
    top: 40px;
    right: 100px;
    z-index: 999;
}
a.overlay-close:hover {
    background-position: 0 -46px;
}
.overlay-blue h1 {
    color: #4e4e4e;
    margin-bottom: 30px;
}
.overlay-blue p {
    color: #4e4e4e;
}
.overlay-blue a {
    color: #4e4e4e;
    font-weight: bold;
    text-decoration: underline;
}
.overlay-blue .annotations {
    margin-top: 10px;
}
.overlay-blue .annotations li {
    color: #ddd;
    padding-right: 200px;
}
.overlay-gray h1 {
    margin-bottom: 20px;
}
.overlay-gray .annotations {
    width: 630px;
    padding-left: 18px;
}
.overlay-gray .annotations li {
    font-size: 11px;
    line-height: 14px;
}
    /* .......Overlay Media Queries....... */
        @media (max-width: 480px) {
            a.overlay-close {
                right: 18%;
                top: 48px;
            }
            .overlay {
                left: 0;
                width: 100%;
                height: 895px;
            }
            .overlay-blue,
            .overlay-gray {
                width: 65%;
                left: 11%;
                padding: 35px 20px;
            }
            .overlay-gray .annotations {
                width: 100%;
                padding-left: 0;
            }

        }
/* ....... END Overlay ....... */
