/* All Devices */
    /**
     * The default font-family.
     */
    body {
        font-weight: 300;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    /**
     * The default link color.
     */
    a {
        color: #1450C8;
    }

    /**
     * The default hover styles for links.
     */
    a:hover {
        text-decoration: none;
    }

    /**
     * The -page- BG color/image of the enclosed design.
     */
    body.enclosed {
        background: url('../../images/bg.png');
        background-color: #aaa;
    }

    /**
     * The -footer- BG color of the full-width design.
     */
    body.full {
        background-color: #222;
    }

    /**
     * The -page- BG color of the isolated design.
     */
    body.isolated {
        background: url('../../images/bg.png');
        background-color: #aaa;
    }

    /**
     * The BG color of the top bar.
     */
    #top {
        background-color: #f8f8f8;
        border-bottom: 1px solid #eee;
    }

    /**
     * The BG color of the header area.
     */
    #header {
        background-color: #fff;
    }

    /**
     * The BG color and outer border colors of the navigation menu.
     */
    #header #nav {
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        background-color: #5c5c5c;
    }

    /**
     * The BG color of the sub-menu items in the navigation menu.
     */
    #header #nav ul ul {
        background-color: #000;
    }

    /**
     * The link color of the items in the navigation menu.
     */
    #header #nav a {
        color: #fff;
    }

    /**
     * The hover BG color of the root menu items in the navigation menu.
     * This setting does not affect the mobile navigation menu. See bottom
     * of this stylesheet to adjust mobile menu.
     */
    #header #nav li.active a.hover {
        background-color: #3498db;
    }

    /**
     * The colors of the lines that separate each menu item.
     * These can be a tad tricky to get right.
     */
    #header #nav li:first-child { border-left: 1px solid #000; }
    #header #nav li:last-child { border-right: 1px solid #888; }
    #header #nav li a { border-right: 1px solid #000; border-left: 1px solid #888; }
    #header #nav ul ul li { border-left: 1px solid transparent; }

    /**
     * The BG color and text color of the content area.
     * This will rarely need changed.
     */
    .content,
    #isolated {
        background-color: #fff;
        color: #333;
    }

    /**
     * The BG color and text color of the "standout" sections
     * in the content area.
     */
    .contrast {
        background-color: #eee;
        color: #000;
    }

    /**
     * The BG color and text color of the alternate "standout" sections
     * in the content area.
     */
    .contrast.alternate {
        background-color: #444;
        color: #fff;
    }

    /**
     * The color of all header tags inside a contrast area.
     */
    .contrast h2, .contrast .h2,
    .contrast h3, .contrast .h3,
    .contrast h4, .contrast .h4,
    .contrast h5, .contrast .h5,
    .contrast h6, .contrast .h6 {
        color: #555;
    }

    /**
     * The color of all header tags inside an alternate contrast area.
     */
    .contrast.alternate h2, .contrast.alternate .h2,
    .contrast.alternate h3, .contrast.alternate .h3,
    .contrast.alternate h4, .contrast.alternate .h4,
    .contrast.alternate h5, .contrast.alternate .h5,
    .contrast.alternate h6, .contrast.alternate .h6 {
        color: #fff;
    }

    /**
     * Slider & title text background. Change image to change background color.
     */
    #slider .inside.overlay,
    #title .inside.overlay {
        background: url('../images/transparent.png');
    }

    /**
     * Slider & title text color when text overlay background is NOT being used.
     */
    #slider .inside *,
    #title .inside * {
        color: #000;
        text-shadow: 3px 3px 2px rgba(70, 70, 70, 1);
    }

    /**
     * Slider & title text color when text overlay background is being used.
     */
    #slider .inside.overlay *,
    #title .inside.overlay * {
        color: #fff;
        text-shadow: 3px 3px 2px rgba(0, 0, 0, 1);
    }

    /**
     * The styles of the home-page slogan for desktops & laptops.
     * You can only have one slogan per page.
     */
    #slogan {
        color: #777;
        vertical-align: middle;
        text-align: center;
        font-weight: 300;   /* 300, 400 */
        font-style: italic; /* normal, italic */
        font-size: 4.25em;
        font-family: 'Roboto', sans-serif;
        line-height: 1.8;
    }

    /**
     * The text color of the captions below images.
     */
    .image-left span,
    .image-right span ,
    .image-center span {
        color: #555;
    }

    /**
     * The BG color and text color of the footer.
     */
    #footer {
        border-top: 1px solid #000;
        background-color: #444;
        color: #fff;
    }

    /**
     * Some misc styles to tidy up the <ul> menus in the footer.
     */
    #footer ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0.9em;
    }

    /**
     * Some misc styles to tidy up the <ul> menus in the footer.
     */
    #footer ul a {
        color: #fff;
        text-decoration: none;
    }

    /**
     * Some misc styles to tidy up the <ul> menus in the footer.
     */
    #footer ul a:hover {
        text-decoration: underline;
    }

    /**
     * Footer header/title tags.
     */
    #footer h1,
    #footer h2,
    #footer h3,
    #footer h4,
    #footer h5,
    #footer h6 {
        border-bottom: 1px solid #656565;
        color: #ccc;
        font-weight: normal;
        font-size: 1em;
    }

    /**
     * Footer <h1> tag. Will likely never get used.
     */
    #footer h1 {
        font-size: 2em;
    }

    /**
     * Footer <h2> tag. Will likely never get used.
     */
    #footer h2 {
        font-size: 1.6em;
    }

    /**
     * Footer <h3> tag.
     */
    #footer h3 {
        font-size: 1.4em;
    }

    /**
     * Footer <h4> tag. This tag is most common.
     */
    #footer h4 {
        font-size: 1.3em;
    }

    /**
     * Newsletter text field styles.
     */
    #newsletter input[type="text"] {
        border: 1px solid #222;
        background-color: #777;
        color: #fff;
    }

    /**
     * Newsletter button styles.
     */
    #newsletter button {
        border: 1px solid #222;
        background-color: #333;
        color: #fff;
    }

    /**
     * The BG color and text color of the copyright area in the footer.
     */
    #bottom {
        border-top: 1px solid #000;
        background-color: #222;
        color: #eee;
    }

    /**
     * Copyright link styles.
     */
    #bottom a {
        text-decoration: none;
    }

    /**
     * Copyright Link Styles.
     */
    #bottom a:hover {
        color: #ddd;
    }

    /**
     * Price grid header BG color and border-color.
     */
    .price-grid .name,
    .price-grid .price,
    .price-grid .desc {
        border-bottom: 1px solid #fff;
        background-color: #ccc;        
    }

    /**
     * Price name styles.
     */
    .price-grid .name {
        font-size: 1.3em !important;
    }

    /**
     * Price value styles.
     */
    .price-grid .price {
        font-size: 4.5em !important;
    }

    /**
     * Price description styles.
     */
    .price-grid .desc {
        font-size: 1.2em !important;
    }

    /**
     * Price grid item BG color and border-color.
     */
    .price-grid .info {
        border-bottom: 1px solid #ccc;
        background-color: #eee;
    }
/* End All Devices */

/* Desktops & Laptops Only */
@media (min-width: 1025px) {
    body.enclosed #footer a,
    body.enclosed #bottom a {
        color: #eee;
    }

    body.enclosed #header {
        border-right: 1px solid #656565;
        border-left: 1px solid #656565;
    }

    body.enclosed.margins #header {
        border-top: 1px solid #656565;
    }

    body.enclosed .content,
    body.enclosed #slider,
    body.enclosed #title {
        border-right: 1px solid #656565;
        border-left: 1px solid #656565;
    }
    
    body.enclosed #footer {
        border-right: 1px solid #333;
        border-left: 1px solid #333;
    }
}
/* End Desktops & Laptops Only */

/* Tablets & Phablets Only */
@media (min-width: 768px) and (max-width: 1024px) {
    /**
     * This is the color of the footer and copyright links on tablets.
     */
    #footer a,
    #bottom a {
        color: #eee;
    }

    #footer {
        font-size: 0.8em;
    }

    #footer ul {
        font-size: 1em;
    }
}
/* End Tablets & Phablets Only */

/* Phones Only */
@media (max-width: 767px) {
    /**
     * This is the color of the "Menu" text on phones.
     */
    #mobile-menu .text {
        color: #fff;
    }

    /**
     * This is the color of the little 3-bar menu icon.
     */
    #mobile-menu .bar {
        background-color: #fff;
    }

    /**
     * Menu font size for mobile phones.
     */
    #header #nav #menu,
    #header #nav #menu {
        font-size: 1.2em;
    }

    /**
     * This is the BG color of the menu dropdown on mobile phones.
     */
    #header #nav #menu,
    #header #nav #menu ul {
        background-color: #656565;
    }

    /**
     * This is the color of the line that separates the menu items on phones.
     */
    #header #nav #menu li {
        border-top: 1px solid #aaa;
    }

    /**
     * This is the color of the line that separates sub-menu items on phones.
     * This style is not used by default. See developer/designer if needed.
     */
    #header #nav #menu ul li {
        border: 0;
    }

    /**
     * The hover BG color of the menu items in the navigation menu.
     */
    #header #nav a.hover {
        background-color: #777 !important;
    }

    /**
     * This is the color of the footer and copyright links on phones.
     */
    #footer a,
    #bottom a {
        color: #eee;
    }
}
/* End Phones Only */

/* Button Styles */
    /**
     * Default button colors.
     */
    .button { border: 1px solid #ccc; background-color: #fff; }
    .button:hover, .button:focus { border: 1px solid #bbb; background-color: #eee; }
    .button:active { border-color: #aaa; background-color: #eee; }

    /**
     * Fixated button colors. These are usually "submit", "yes", or "OK" buttons.
     */    
    .button.fixate { border-color: #226491; background-color: #378cd2; color: #fff; }
    .button.fixate:hover, .button.fixate:focus { background-color: #3282be; }

    /**
     * Link button colors. These are usually "read more", "order now", and "continue" buttons.
     */
    .button.link { border-color: #ccc; background-color: #f2f2f2; color: #333; }
    .button.link:hover, .button.link:focus { background-color: #eee; }

    /**
     * Success button colors. These are usually "confirm", "thank you", "I understand" type buttons.
     */
    .button.success { border-color: #2d963c; background-color: #3cb950; color: #fff; }
    .button.success:hover, .button.success:focus { background-color: #37aa4a; }

    /**
     * Cautionary button colors. These are usually "confirm", "thank you", "I understand" type buttons.
     */    
    .button.caution { border-color: #e6a555; background-color: #f5af5f; color: #fff; }
    .button.caution:hover, .button.caution:focus { border-color: #d28c46; background-color: #eba055; }

    /**
     * Failure button colors. These are usually "cancel", "try again", or "confirm delete" type buttons.
     */
    .button.failure { border-color: #c34646; background-color: #eb5a5a; color: #fff; }
    .button.failure:hover, .button.failure:focus { border-color: #962323; background-color: #cd4646; }
/* End Button Styles */

/* Project Specific Styles */
div.tip {
    display: inline-block;
    margin-left: 10px;
    border: none;
    vertical-align: middle;
    cursor: pointer;
    color: #20549A;
    line-height: 40px;
    font-size: 21px;
}

.tip span {
    display: none !important;
}

.fa {
    color: #444;
}


.standout a {
    text-decoration: none;
}

.standout {
    padding: 0;
    margin: 30px auto;
    text-align: center;
}

.standout-left {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
}

.standout-right {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
}

.standout-button {
    display: inline-block;
    float: none;
    width: auto;
    padding: 0 20px !important;
    margin: 10px 0 0 40px;
    color: #fff;
    font-size: 1.1em;
    height: 40px;
    line-height: 40px;
}

.standout .title {
    margin: 0;
    padding: 0;
    border: none;
    color: #555;
    text-decoration: none;
    font-size: 30px;
    line-height: 47px;
    font-weight: bold;
}

.standout .title:hover {
    color: #555;
}

.standout .text {
    line-height: 27px;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) and (max-width: 1024px) {
    div.tip {
        font-size: 21px; line-height: 33px;
    }
}

@media (max-width: 767px) {
    .content .gigantic {
        font-size: 1.6em !important;
    }

    .content .large {
        font-size: 1em !important;
    }

    .standout .title {
        margin: 0;
        padding: 0;
        border: none;
        color: #555;
        text-decoration: none;
        font-size: 20px;
        line-height: 47px;
        font-weight: bold;
    }

    .standout-left {
        width: 100%;
        white-space: normal;
    }

    .standout-right {
        width: 100%;
        white-space: normal;
    }

    .standout-button {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 20px 0 0;
    }

    .standout {
        text-align: center;
    }

    div.tip {
        display: none;
    }

    
}
/* End Project Specific Styles */