.buttonNavTop {
    align-self: flex-start;
    width: 100%;
}

#kitDetails .folderTab {
    border-bottom: 1px solid #cccccc;
}

.fullWidth tbody tr td {
    /*display: flex;*/
}

#loginForm .button.greenLG {
    border: 1px solid #519548;
    display: block !important;
}

#accountLogin {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 2rem;
    margin: 0 auto 4rem;
}

@media (min-width: 768px) {
    #accountLogin {
        width: 400px;
    }
}

#accountLogin div {
    display: flex;
    flex-direction: column;
    /*width: 400px;*/
    margin-bottom: 2rem;
    box-sizing: border-box;
}

#accountLogin input {
    margin-right: 0 !important;
    margin-bottom: 1rem;
    padding: 0.5rem;
    font-size: 14px;
}

#mainCart .comment {
    background-color: transparent;
}

#loginForm {
    margin-bottom: 2rem;
}

    #loginForm .folderTab,
    .fullWidth .mbottom .folderTab {
        margin: 0 -0 2rem;
        border-bottom: 1px solid #cccccc;
        padding: 0 0 1rem;
    }

.folderTab.h3 {
    margin-bottom: 1rem !important;
}

#loginForm .padded {
    /*border-top: 1px solid #CCCCCC;*/
    margin: 2rem -1rem 0.5rem;
    padding-top: 2rem;
    padding-bottom: 0;
}

#oneClickNotLoggedInBtn {
    margin-top: -2rem;
}

#logInAndCheckoutBtn {
    margin-top: 2rem;
}

/* ============================== Manufacturer Detail Page */

.categoryHeader {
    margin: 0 0 10px;
    border-radius: 5px;
    padding: 20px 0;
}

    .categoryHeader p {
        font-size: 18px;
        line-height: 1.4;
    }

    .categoryHeader h1 {
        color: #0166c0;
        padding: 0 0 10px;
        letter-spacing: 1px;
        border-bottom: 2px solid #cdcdcd;
        margin-bottom: 10px;
        width: 100%;
    }

    .categoryHeader span.right {
        font: 10pt CeraPRO;
        letter-spacing: normal;
    }

.manufacturer-intro img {
    width: 100%;
    padding-left: 4rem;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .manufacturer-intro img {
        margin-top: 2rem;
        padding-left: 0;
    }
}

#mainCart .button.greenLG {
    float: right;
}

.hero-sub {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.jimmys-pick {
    padding: 1rem;
    border-radius: 6px;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    background-size: cover;
}

    .jimmys-pick .details {
        margin-top: 18rem;
        color: white;
        text-shadow: 0px 0px 6px #828282;
    }

@media (max-width: 1028px) {
    .jimmys-pick {
        margin-bottom: 1rem;
    }
}

.details h2 {
    font-size: 1.8rem;
}

.details span {
    display: block;
    margin-bottom: 10px;
}

.kit-pick {
    padding: 1rem;
    background-color: #ccc;
    border-radius: 6px;
    height: 60%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    background-size: cover;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

    .kit-pick:hover {
        padding-bottom: 1.2rem;
    }

    .kit-pick .details {
        color: white;
        text-shadow: 0 0 6px #828282;
    }

.details span {
    display: block;
    margin-bottom: 10px;
}

.hero-sub__btn-wrapper {
    padding-top: 1rem;
    height: 40%;
}

.hero-sub__btn {
    padding: 2rem;
    text-align: center;
    background: #ccc;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 22px;
    line-height: 1.2;
    text-decoration: none;
}

    .hero-sub__btn:hover {
        text-decoration: none;
        color: white;
    }

.hero-sub__btn--yellow {
    background-color: #fbc145;
}

    .hero-sub__btn--yellow:hover {
        background-color: #ecb541;
    }

.hero-sub__btn--green {
    background-color: #0e736f;
}

    .hero-sub__btn--green:hover {
        background-color: #0d6864;
    }

/* Intro Section */

.manufacturer-intro {
    padding: 6rem 0;
    /*border-bottom: 1px solid #CCCCCC;*/
    /*border-top: 1px solid #CCCCCC;*/
}

    .manufacturer-intro h1 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
        color: #727272;
    }

/* Nav Secondary */

.nav-secondary {
    background-color: #f9f9f9;
    padding: 2rem;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    margin-left: -20px;
    margin-right: -20px;
}

@media (min-width: 1024px) {
    .nav-secondary {
        margin-left: -30px;
        margin-right: -30px;
    }
}

@media (min-width: 1200px) {
    .nav-secondary {
        padding: 2rem;
        margin-left: calc(-100vw / 2 + 1215px / 2);
        margin-right: calc(-100vw / 2 + 1215px / 2);
    }
}

.nav-secondary ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

    .nav-secondary ul li {
        list-style: none;
        padding: 0 1rem;
    }

        .nav-secondary ul li a {
            color: #383d44;
        }

            .nav-secondary ul li a:hover {
                color: #999;
            }

@media (max-width: 376px) {
    .nav-secondary ul {
        flex-direction: column;
    }

        .nav-secondary ul li {
            padding: 0.8rem 1rem;
            text-align: center;
        }
}

/* Featured Manufacturer Product */

.manufacturer-featured {
    background-color: #f9f9f9;
    padding: 2rem;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    margin-left: -20px;
    margin-right: -20px;
}

@media (min-width: 1024px) {
    .manufacturer-featured {
        margin-left: -30px;
        margin-right: -30px;
    }
}

@media (min-width: 1200px) {
    .manufacturer-featured {
        padding: 6rem 2rem;
        margin-left: calc(-100vw / 2 + 1215px / 2);
        margin-right: calc(-100vw / 2 + 1215px / 2);
    }
}

.manufacturer-featured img {
    box-sizing: border-box;
    padding-right: 4rem;
    width: 100%;
}

.manufacturer-featured h3 {
    font-size: 2.8rem;
    line-height: 1.2;
    font-family: CeraPro-Light;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .manufacturer-featured h3 {
        margin-top: 0;
    }
}

.manufacturer-featured__specs {
    margin-top: 0;
}

    .manufacturer-featured__specs div {
        flex-wrap: wrap;
        margin-top: 1rem;
    }

        .manufacturer-featured__specs div div {
            width: 100%;
        }

    .manufacturer-featured__specs ul {
        width: 100%;
        list-style: none;
        padding-left: 0;
        padding-right: 1rem;
        box-sizing: border-box;
    }

        .manufacturer-featured__specs ul:nth-child(3) {
            padding-right: 0;
        }

        .manufacturer-featured__specs ul li {
            font-family: CeraPro-Medium;
            padding: 0.3rem 0;
        }

@media (min-width: 540px) {
    .manufacturer-featured__specs {
        margin-top: 3rem;
    }

        .manufacturer-featured__specs ul {
            width: 50%;
        }

            .manufacturer-featured__specs ul li {
                padding: 0.2rem 0;
            }
}

.btn-holder {
    text-align: center;
    margin-top: 6rem;
}

/* ============================== misc */

.page-width {
    max-width: 1200px;
    margin: 0 auto;
}

#kitDetails div div {
    flex-grow: 1;
    flex-wrap: wrap;
}

.product.vtop.full div a img,
.product.vtop.full a img {
    border-radius: 10px;
}

.readmore {
    max-height: 120px;
    overflow: hidden;
}

.lead {
    font-size: 1.7rem;
    line-height: 1.2;
    font-family: CeraPro-Medium;
}

    .lead.light {
        font-family: CeraPro-Light;
    }

.separator-stretch {
    height: 1px;
    border-bottom: 1px solid #cccccc;
    margin-left: -40px;
    margin-right: -40px;
}

@media (min-width: 1200px) {
    .separator-stretch {
        margin-left: calc(-100vw / 2 + 1200px / 2);
        margin-right: calc(-100vw / 2 + 1200px / 2);
    }
}

/*img {
		width: 100%;
  }*/


/* ============================== Color Filter */

.filter-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid #cccccc;
}

.sort-options {
    align-self: flex-end;
    display: inline-block;
    font-size: 0.8rem;
}

.color-filter {
    display: inline-block;
    width: 100%;
}

@media (min-width: 740px) {
    .color-filter {
        width: 66%;
    }
}

.color-filter .color-filter__container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

@media (min-width: 740px) {
    .color-filter .color-filter__container {
        margin-bottom: 0;
        height: 24px;
    }
}

.color-filter .color-filter__title {
    margin-right: 0.5rem;
    font-size: 0.8rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

@media (min-width: 740px) {
    .color-filter .color-filter__title {
        width: initial;
        margin-bottom: 0;
    }
}

.color-filter .color-filter__clear {
    text-decoration: none;
    text-transform: uppercase;
    color: #464646;
    font-size: 10px;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    background: #e7e9ec;
    background: url(../images/style/2014/close.png) no-repeat right 4px, linear-gradient(to bottom, #f7f8fa, #e7e9ec);
    background: url(../images/style/2014/close.png) no-repeat right 4px, -webkit-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
    background: url(../images/style/2014/close.png) no-repeat right 4px, -moz-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
    background: url(../images/style/2014/close.png) no-repeat right 4px, -o-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
    border: 1px solid #b6b6ab;
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    padding: 2px 20px 2px 10px;
    white-space: pre;
    margin-left: 0.5rem;
    transition: all 0.137s ease-in-out;
}

    .color-filter .color-filter__clear:hover {
        background-color: #f7f8fa;
    }

/* Customize the label (the container) */
.color-filter label {
    display: inline-block;
    position: relative;
    padding-left: 36px;
    height: 36px;
    /* margin-bottom: 12px; */
    cursor: pointer;
    font-size: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media (min-width: 740px) {
    .color-filter label {
        padding-left: 25px;
        height: 24px;
    }
}

/* Hide the browser's default radio button */
.color-filter label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.color-filter label .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    /* background-color: #eee; */
    border-radius: 50%;
    border: 2px solid;
    border-color: #ffffff;
    transition: all 0.137s ease-in-out;
}

@media (min-width: 740px) {
    .color-filter label .checkmark {
        height: 20px;
        width: 20px;
    }
}

.cf-blue {
    background-color: #0166c0;
}

.cf-purple {
    background-color: #7045c4;
}

.cf-pink {
    background-color: #bd1b8d;
}

.cf-red {
    background-color: #e0242b;
}

.cf-orange {
    background-color: #f46b32;
}

.cf-yellow {
    background-color: #fdc234;
}

.cf-green {
    background-color: #65c152;
}

.cf-brown {
    background-color: brown;
}

.cf-gray {
    background-color: gray;
}

.cf-black {
    background-color: black;
}

.cf-white {
    background-color: white;
}

.color-filter label .cf-white {
    border-color: #cccccc;
}

/* On mouse-over, add a grey background color */
.color-filter label:hover input ~ .checkmark {
    background-color: inherit, rgba(0, 0, 0, 0.4);
    border-color: #bbbbbb;
}

/* When the radio button is checked, add a blue background */
.color-filter label input:checked ~ .checkmark {
    background-color: inherit, rgba(0, 0, 0, 0.4);
    border-color: #555555;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.color-filter label .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.color-filter label input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.color-filter label .checkmark:after {
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid white;
}

@media (min-width: 740px) {
    .color-filter label .checkmark:after {
        width: 20px;
        height: 20px;
    }
}

/* ============================== global styles */

.clearfix {
    overflow: auto;
}

    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }

.flex {
    display: flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}

.flex__align--center {
    align-items: center;
}

a {
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.fa-white,
.t-white {
    color: #ffffff;
}

.t-pink {
    color: #ba248c;
}

/* ============================== NEW styles */

.account-controls {
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.7rem 0 0;
    width: 100%;
    padding: 0 2rem;
    border-bottom: 1px solid #cdcdcd;
    box-sizing: border-box;
}

    .account-controls span {
        line-height: 2.5;
    }

.nav-top {
    padding: 0.7rem 2rem;
    border-bottom: 1px solid #cdcdcd;
}

.nav-top__search {
    align-self: flex-start;
}

.nav-top__search-container {
    width: 100%;
}

    .nav-top__search-container input {
        padding-bottom: 0.5rem !important;
    }

#searchBar {
    display: inline-block;
}

.nav-top__search input {
    font-size: 14px;
    width: 140px !important;
    height: 24px;
    width: 100%;
    border: 2px solid #ddd;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    padding: 5px 20px;
    outline: none;
    color: #0166c0;
    background: #ffffff;
    -webkit-transition: all 0.2222222222s;
    transition: all 0.2222222222s;
}

    .nav-top__search input::placeholder {
        color: #727272;
    }

    .nav-top__search input:focus {
        color: #009cd5;
        border-color: #009dd6;
    }

.btn__search {
    display: inline-block;
    position: relative;
    margin-left: 5px;
    height: 26px;
    width: 26px;
    cursor: pointer;
    background: #cccccc;
    padding: 6px;
    text-align: center;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-transition: all 0.2222222222s;
    transition: all 0.2222222222s;
}

    .btn__search:hover {
        background: #009dd6;
    }

    .btn__search em {
        font-size: 1.4em;
        line-height: 1.3em;
    }

.search-manufacturers {
    max-width: 100%;
}

    .search-manufacturers span {
        padding: 0 10px;
        color: #727272;
    }

.nav-top__controls {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    height: 38px;
}

@media (max-width: 540px) {
    .btn__nav-top--madtosh,
    .btn__nav-top--livechat,
    .btn__nav-top--dellaq,
    .btn__nav-top--sandbox,
    .btn__nav-top em {
        display: none;
    }
}

@media (max-width: 768px) {
    /*.nav-top__search {
			    margin: 0 auto;
			  }*/

    .nav-top__search input {
        width: 60% !important;
        padding: 5px 10px;
        font-size: 12px;
    }

    .btn__nav-top--madtosh,
    .btn__nav-top--livechat,
    .btn__nav-top--dellaq,
    .btn__nav-top em {
        display: none;
    }

    .nav-top {
        flex-wrap: wrap;
        padding: 10px 10px;
    }
}

@media (max-width: 930px) {
    .btn__nav-top--madtosh,
    .btn__nav-top--livechat,
    .btn__nav-top--dellaq,
    .btn__nav-top em {
        display: none;
    }
}

@media (max-width: 1065px) {
    .btn__nav-top--livechat,
    .btn__nav-top--dellaq {
        display: none;
    }
}

@media (max-width: 1190px) {
    .btn__nav-top em {
        display: none;
    }
}

.btn__nav-top {
    border: 2px solid #cccccc;
    border-radius: 60px;
    padding: 7px 16px;
    margin-left: 10px;
    font-size: 13px;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    color: #727272;
}

    .btn__nav-top:hover {
        text-decoration: none;
        background-color: #009cd5;
        border-color: #009cd5;
        color: #ffffff;
    }

    .btn__nav-top em {
        padding-left: 5px;
    }

.btn__nav-top--dellaq {
    border-color: #257997;
    color: #257997;
    fill: #257997;
    stroke: #257997;
}

    .btn__nav-top--dellaq svg {
        width: 15px;
        stroke-width: 3;
        stroke-miterlimit: 10;
    }

    .btn__nav-top--dellaq:hover {
        background-color: #257997;
        border-color: #257997;
        fill: #fff;
        stroke: #fff;
    }

.btn__nav-top--sandbox {
    border-color: #AF0B84;
    color: #AF0B84;
    fill: #AF0B84;
    stroke: #AF0B84;
}

    .btn__nav-top--sandbox:hover {
        background-color: #AF0B84;
        border-color: #AF0B84;
        fill: #fff;
        stroke: #fff;
    }

.btn__nav-top--madtosh {
    border-color: #5e58a4;
    color: #5e58a4;
}

    .btn__nav-top--madtosh:hover {
        background-color: #5e58a4;
        border-color: #5e58a4;
        color: #fff;
    }

.btn__nav-top--livechat {
    border-color: #ba248c;
    color: #ba248c;
}

    .btn__nav-top--livechat:hover {
        background-color: #ba248c;
        border-color: #ba248c;
        color: #fff;
    }

.btn__nav-top--livechatPopup {
    border-color: #257997;
    color: #257997;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

    .btn__nav-top--livechatPopup em {
        display: inline;
    }

    .btn__nav-top--livechatPopup:hover {
        background-color: #257997;
        border-color: #257997;
        color: #fff;
    }

.btn__nav-top--account {
    border-color: #007b23;
    color: #007b23;
}

    .btn__nav-top--account:hover {
        background-color: #007b23;
        border-color: #007b23;
        color: #fff;
    }

.btn__nav-top--cart {
    border-color: #dd3400;
    color: #dd3400;
}

    .btn__nav-top--cart:hover {
        background-color: #dd3400;
        border-color: #dd3400;
        color: #fff;
    }

.header__nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.2rem 0;
}

.logo {
    width: 180px;
    height: 126px;
}

.logoTosh {
    width: 258px;
    height: 100px;
    padding-right: 100px;
}

.logo__link {
    display: block;
    float: left;
}

@media (max-width: 1200px) {
    .header__nav {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .header__nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .header__logo {
        display: flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        flex-grow: 2;
        justify-content: center;
    }

    .logo {
        width: 140px;
        height: 98px;
    }

    .logoTosh {
        width: 200px;
        height: 78px;
        padding-right: 0;
    }
}

/* ============================== Navigation */

nav {
    display: flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav__main ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .nav__main ul li {
        padding: 0 1.25rem 1.20rem;
        max-width: 165px;
        text-decoration: none;
        display: flex;
    }

        .nav__main ul li:first-child {
            padding-left: 0;
        }

        .nav__main ul li:last-child {
            padding-right: 0;
        }

        .nav__main ul li a {
            color: #424242;
            font-size: 18px;
            font-family: "CeraPRO-Medium", Helvetica, sans-serif;
        }

            .nav__main ul li a:hover {
                color: #0166c0;
                text-decoration: underline;
            }

.nav__sub ul {
    width: 100%;
    text-align: right;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .nav__sub ul li {
        padding: 0.5rem 1rem 0;
        max-width: 140px;
        text-decoration: none;
        display: flex;
        align-items: flex-start;
        color: #424242;
    }

        .nav__sub ul li a {
            color: #727272;
            font-size: 15px;
        }

            .nav__sub ul li a:hover {
                color: #0166c0;
                text-decoration: underline;
            }

.nav__mobile {
    display: none;
}

.nav__mobile--left {
    align-items: flex-start;
}

.nav__mobile em {
    font-size: 26px;
    color: #383d44;
}

.icon--burger {
    cursor: pointer;
}

@media (max-width: 1200px) {
    nav {
        justify-content: center;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    nav {
        padding: 0;
        display: none;
    }

    .nav__mobile {
        display: flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
    }

    .nav__main,
    .nav__sub {
        flex: 100%;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

        .nav__main ul {
            //flex-direction: column;
            align-items: center;
            border-top: 1px solid #cdcdcd;
            border-bottom: 1px solid #cdcdcd;
            margin-top: 20px;
            padding: 20px 0;
        }

            .nav__main ul li {
                flex: 1 100%;
                width: 100%;
                padding: 15px 0;
                justify-content: center;
            }

        .nav__sub ul {
            //flex-direction: column;
            align-items: center;
            padding: 20px 0 25px;
            margin-bottom: -20px;
            background-color: #f9f9f9;
        }

            .nav__sub ul li {
                padding: 0.9rem 1rem;
            }
}

/* ============================== END Navigation */

.sub-header {
    background: url("https://www.JimmyBeansWool.com/images/style/2019/shipBack.jpg") center center;
    background-size: cover;
    background-blend-mode: multiply;
}

.sub-header__overlay {
    background: #ba248c;
    /* Old browsers */
    background: -moz-linear-gradient( 135deg, rgba(186, 36, 140, 0.7) 0%, rgba(0, 156, 213, 0.9) 100% );
    /* FF3.6-15 */
    background: -webkit-linear-gradient( 135deg, rgba(186, 36, 140, 0.7) 0%, rgba(0, 156, 213, 0.9) 100% );
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient( 135deg, rgba(186, 36, 140, 0.7) 0%, rgba(0, 156, 213, 0.9) 100% );
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ba248c', endColorstr='#009CD5', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    padding: 1rem 0;
    background-blend-mode: multiply;
}

.sub-header__container {
    max-width: 1200px;
    margin: 0 auto;
}

.shipping-message {
    text-align: center;
}

    .shipping-message span {
        font-size: 0.9rem;
        font-family: "CeraPro-Medium", Helvetica, sans-serif;
        font-weight: normal;
        color: #ffffff;
    }

        .shipping-message span strong {
            font-family: "CeraPro-Medium", Helvetica, sans-serif;
        }

@media (max-width: 1200px) {
    .sub-header__container {
        margin: 0 20px;
    }
}

footer {
}

.site-footer {
    border-top: 1px solid #cdcdcd;
    flex-direction: row;
    padding: 3rem 2rem;
}

@media (min-width: 720px) {
    .site-footer {
        padding: 4rem 3rem;
    }
}

.site-footer__brand {
    flex-grow: 1;
    width: 30%;
    padding-right: 5em;
}

@media (max-width: 940px) {
    .site-footer__brand {
        padding-right: 2em;
    }
}

.social-linklist {
    margin-top: 30px;
    flex-wrap: wrap;
}

.social-linklist__logos {
    padding: 1.5rem 0;
}

    .social-linklist__logos a {
        float: left;
        margin-right: 0.5rem;
    }

.logo--footer {
    width: 290px;
    margin-bottom: 20px;
}

.site-footer__brand span {
    display: block;
    font-size: 1rem;
    line-height: 1.8em;
}

.site-footer__linklist {
    flex-grow: 1;
    width: 100%;
    padding: 0 0 2rem;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .site-footer__linklist {
        flex-grow: 1;
        width: 25%;
        padding: 0 2rem;
    }
}

.site-footer__linklist ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.linklist__title {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    color: #383d44;
}

.site-footer__linklist ul li {
    padding: 7px 0;
}

    .site-footer__linklist ul li a {
        font-size: 1rem;
        color: #383d44;
    }

        .site-footer__linklist ul li a:hover {
            color: #0166c0;
        }

.legal-footer {
    border-top: 3px solid #cdcdcd;
    padding: 2rem 2rem;
    justify-content: space-between;
}

@media (min-width: 720px) {
    .legal-footer {
        padding: 2rem 3rem;
    }
}

.legal-footer__linklist a {
    display: inline-block;
    color: #727272;
    font-size: 0.9rem;
    margin-right: 1.2rem;
    margin-bottom: 1rem;
}

@media (min-width: 1200px) {
    .legal-footer__linklist a {
        margin-bottom: 0;
    }
}

.copyright {
    color: #727272;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .site-footer {
        flex-direction: column;
    }

    .site-footer__brand {
        width: 100%;
        margin-top: 2rem;
        padding-right: 0;
        order: 4;
    }

    .legal-footer {
        flex-direction: column;
        justify-content: space-between;
    }

    .copyright {
        margin-top: 2rem;
    }
}

.btn__social {
    border: 2px solid #cccccc;
    border-radius: 60px;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    padding: 7px 16px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #727272;
    text-transform: capitalize;
}

    .btn__social:hover {
        text-decoration: none;
    }

.btn__social--blue {
    border-color: #257997;
    color: #257997;
}

    .btn__social--blue:hover {
        background-color: #257997;
        color: #ffffff;
    }

.btn__social--purple {
    border-color: #5e58a4;
    color: #5e58a4;
}

    .btn__social--purple:hover {
        background-color: #5e58a4;
        color: #ffffff;
    }

.btn__social--pink {
    border-color: #ba248c;
    color: #ba248c;
}

    .btn__social--pink:hover {
        background-color: #ba248c;
        color: #ffffff;
    }

.btn__social--green {
    border-color: #007b23;
    color: #007b23;
}

    .btn__social--green:hover {
        background-color: #007b23;
        color: #ffffff;
    }

.btn__social--orange {
    border-color: #dd3400;
    color: #dd3400;
}

    .btn__social--orange:hover {
        background-color: #dd3400;
        color: #ffffff;
    }

.btn__social--red {
    border-color: #e2252c;
    color: #e2252c;
}

    .btn__social--red:hover {
        background-color: #e2252c;
        color: #ffffff;
    }

/* ================================================== 2019 style upgrades */

.cart {
    margin-top: .8rem;
    margin-bottom: .8rem;
    font-family: "CeraPro-Bold", Helvetica, sans-serif;
}

.name {
    padding: 0.5rem 0;
}

.salerack .center,
.showcase .center {
    display: flex;
    flex-wrap: wrap;
    // padding-top: 2rem;
    align-items: stretch;
    padding-right: 0 !important;
}

.salerack .center {
    margin-left: -6px;
    margin-right: -6px;
}

    .salerack .center .product {
        flex-grow: 1;
        border-radius: 10px !important;
    }

@media (max-width: 980px) {
    .salerack .center .product {
        width: 30%;
    }
}

@media (max-width: 768px) {
    .salerack .center .product {
        width: 30%;
        margin-bottom: 2rem;
    }

    .name,
    .cart {
        font-size: 1rem !important;
    }
}

@media (max-width: 400px) {
    .salerack .center .product {
        width: 50%;
    }
}

#container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.bodyWrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.folderTab {
    text-align: left !important;
    color: #207a99;
    overflow: hidden;
    // border-bottom: 3px solid #CDCDCD;
    // border-top: 1px solid #009DD6;
    margin: 1rem 0;
}

@media (max-width: 768px) {
    .folderTab {
        margin: 1em 0;
    }
}

.folderTab h1 {
    color: #383d44;
    font-size: 1.5rem;
    line-height: 2em;
    letter-spacing: 0.5px;
    margin: 0;
}

.folderTab h2 {
    color: #383d44;
    font-size: 1.4rem;
    line-height: 2em;
    letter-spacing: 0.5px;
    margin: 0;
    float: left;
}

@media (max-width: 375px) {
    .folderTab h2 {
        font-size: 1rem;
    }
}

.folderTab h3 {
    color: #383d44;
    font-size: 1.2rem;
    line-height: 2em;
    letter-spacing: 0.5px;
    margin: 0;
    float: left;
}

.folderTab h4 {
    color: #383d44;
    font-size: 1.2rem;
    line-height: 2em;
    letter-spacing: 0.5px;
    text-align: left;
    margin: 0;
    float: left;
}

/* ============================== Product styles */

.product {
    width: 23%;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 10px 6px;
}

    .product.slim {
        width: 16%;
        margin: 0 6px;
        //border: 1px solid #CCCCCC;
        border-radius: 6px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

@media (max-width: 768px) {
    .product.slim {
        flex-grow: 1;
        width: 50%;
    }
}

.prodPrice {
    font-size: 10.5pt;
    width: 100%;
    align-self: flex-end;
}

.product.featureRow {
    margin: 0;
    padding: 0 0 0 15px;
}

.product .smallBox {
    display: inline-block;
    max-width: 92px;
    max-height: 92px;
    overflow: hidden;
    border-radius: 10px;
    padding-right: 0 !important;
}

.product .mediumBox {
    display: inline-block;
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
    border-radius: 10px;
    padding-right: 0 !important;
}

.product img {
    margin-bottom: 5px;
}

.full {
    width: 160px;
    padding: 10px 0 0 5px;
}

/* ==================================== Main body Grid / Structure */

.wrapper {
    width: 100%;
    //padding: 0 2rem;
    background: #ffffff;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .wrapper {
        padding: 0 2rem;
    }
}

@media (max-width: 1100px) {
    .wrapper {
        padding: 0 2rem;
    }
}

@media (max-width: 940px) {
    .wrapper {
        padding: 0 20px;
    }
}

#mainColumn {
    width: 100%;
    float: left;
}

@media (min-width: 768px) {
    #mainColumn {
        width: 70%;
    }
}

@media (min-width: 940px) {
    #mainColumn {
        width: 70%;
    }
}

.borderBox.barSection.center {
    display: flex;
}

/*div#mainColumn {
			  margin: 0 2% 3% 0;
			  width: 75%;
			  float: left
			}*/

#mainColumn .salerack:nth-last-child(1) {
    border-bottom: none !important;
}

.bodyWrap {
    display: flex;
    flex-wrap: wrap;
}

#sideColumn .sidebar,
#rightColumn .sidebar {
    width: 100% !important;
    padding-left: 0;
}

.sidebar {
    width: 100%;
    text-align: center;
    padding: 30px 0 30px 0;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .sidebar {
        width: 25% !important;
        padding-left: 40px;
    }
}

.showcase,
.salerack {
    margin: 0;
    padding-bottom: 3rem;
    border-bottom: 2px solid #cdcdcd;
}

    .showcase:last-child,
    .salerack:last-child {
        border-bottom: none;
    }

    .showcase .rating {
        margin-bottom: 1rem;
    }

    .showcase .borderBox {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

@media (max-width: 768px) {
    .showcase,
    .salerack {
        margin: 0;
        padding-bottom: 1em;
    }

        .showcase .borderBox {
            flex-direction: column;
        }

            .showcase .borderBox div:first-child {
                padding-right: 0;
            }
}

.largeImageBox {
    border-radius: 300px;
}

    .largeImageBox img {
        width: 100%;
        height: auto;
        border-radius: 30px;
    }

@media (min-width: 400px) {
    .largeImageBox img {
        width: 300px;
        height: auto;
    }
}

.featureDesc {
    display: inline-block;
    vertical-align: top;
}

    .featureDesc p {
        margin-bottom: 2.5rem;
    }

    .featureDesc h2 a {
        font: 2rem "CeraPRO-Medium";
        line-height: 1.2em;
        letter-spacing: 0.5px;
        color: #0166c0;
    }

    .featureDesc h3 a {
        font: 2rem "CeraPRO-Medium";
        line-height: 1.2em;
        letter-spacing: 0.5px;
        color: #0166c0;
    }

@media (max-width: 980px) {
    .featureDesc {
        margin-top: 1rem;
    }

        .featureDesc h2 a {
            font-size: 1.8rem;
            color: #0166c0;
        }

        .featureDesc h3 a {
            font-size: 1.8rem;
            color: #0166c0;
        }
}

@media (max-width: 375px) {
    .featureDesc h2 a {
        font-size: 1.4rem;
        color: #0166c0;
    }

    .featureDesc h3 a {
        font-size: 1.4rem;
        color: #0166c0;
    }
}

/* ============================== Pre-footer styles */

.pre-footer {
    box-sizing: border-box;
    background: #ffffff url(images/bg-news-callout.png) repeat-x center center;
    padding: 80px 30px;
    width: 100%;
    text-align: center;
    border-top: 1px solid #cccccc;
    margin-top: 3rem;
}

.page-container {
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}

    .page-container div {
        flex-grow: 1;
    }

@media (max-width: 980px) {
}

@media (max-width: 768px) {
    .page-container div {
        margin-bottom: 6rem;
    }

        .page-container div:last-child {
            margin-bottom: 0;
        }

    .pre-footer {
        background: none;
    }
}

@media (max-width: 400px) {
}

.pre-footer__col {
    color: #383d44;
}

.pre-footer h3 {
    font-size: 1.3rem;
    line-height: 2.6rem;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
}

.pre-footer p {
    margin-bottom: 2em;
}

.pre-footer__col .icon {
    width: 50px;
    height: 43px;
    display: block;
    margin: 0 auto;
    margin-bottom: 1rem;
    background: no-repeat center center;
    background-size: 50px 43px;
}

    .pre-footer__col .icon.icon-chat {
        background-image: url("images/icon-chat@2x.png");
    }

    .pre-footer__col .icon.icon-envelope {
        background-image: url("images/icon-envelope@2x.png");
    }

    .pre-footer__col .icon.icon-calculator {
        background-image: url("images/icon-calculator@2x.png");
    }

/* ============================== button styles */

.btn-outline {
    background-color: #ffffff;
    border: 2px solid #cccccc;
    border-radius: 60px;
    padding: 0.7em 2.8em;
    font-size: 16px;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    color: #727272;
    cursor: pointer;
    display: inline-block;
}

    .btn-outline:hover {
        background-color: #f46b32;
        color: #ffffff;
        text-decoration: none;
    }

.btn-outline--red {
    border-color: #e0242b;
    color: #e0242b;
}

    .btn-outline--red:hover {
        background-color: #e0242b;
        color: #ffffff;
    }

.btn-outline--orange {
    border-color: #f46b32;
    color: #f46b32;
}

    .btn-outline--orange:hover {
        background-color: #f46b32;
        color: #ffffff;
    }

.btn-outline--darkblue {
    border-color: #257997;
    color: #257997;
}

    .btn-outline--darkblue:hover {
        background-color: #257997;
        color: #ffffff;
    }

.btn-outline--blue {
    border-color: #0166c0;
    color: #0166c0;
}

    .btn-outline--blue:hover {
        background-color: #0166c0;
        color: #ffffff;
    }

.btn-outline--yellow {
    border-color: #fdc234;
    color: #fdc234;
}

    .btn-outline--yellow:hover {
        background-color: #fdc234;
        color: #ffffff;
    }

.btn-outline--green {
    border-color: #65c152;
    color: #65c152;
}

    .btn-outline--green:hover {
        background-color: #65c152;
        color: #ffffff;
    }

.btn-outline--purple {
    border-color: #5e57a6;
    color: #5e57a6;
}

    .btn-outline--purple:hover {
        background-color: #5e57a6;
        color: #ffffff;
    }

/* ================================================ 2019 style upgrades */

/* BEGIN jbwOnline20150826.css */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    font-family: "CeraPro", Helvetica, Arial, sans-serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
    letter-spacing: 0.03em;
    -webkit-font-smoothing: antialiased !important;
}

input,
select {
    font-family: "CeraPro", Helvetica, Arial, sans-serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
    letter-spacing: 0.03em;
    font-size: 1em;
}

ol,
ul,
li {
    font-family: "CeraPro", Helvetica, Arial, sans-serif;
    padding: 0 0 0 20px;
}

body {
    background: #fff;
    font-family: "CeraPRO", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #555;
    margin: 10px 0 0;
}

caption,
th,
td {
    text-align: left;
}

strong,
b {
    font-family: "CeraPRO-Bold", Helvetica, sans-serif;
    font-weight: normal;
}

body a {
    color: #0166c0;
}

a:hover,
a:active {
    color: #0166c0;
    text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "CeraPRO", Helvetica, Arial, sans-serif;
    letter-spacing: 0.05rem;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

h3 {
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

h4 {
    font-size: 12pt;
    -webkit-font-smoothing: antialiased;
}

h6 {
    font-size: 10pt;
    -webkit-font-smoothing: antialiased;
}

p {
    margin-bottom: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h2.spaceIt,
h3.spaceIt,
h4.spaceIt {
    margin: 8px 0 5px;
    padding: 8px 0 5px;
}

h5.spaceIt {
    margin: 4px 0 2px;
    padding: 4px 0 2px;
}

#container table {
    width: 100%;
}

#container_vert {
    margin: 0 5px 0 3px;
    padding: 0 5px 0 3px;
}

.containerVert {
    margin: 0 10px 0 3px;
    padding: 0 10px 0 3px;
}

#cart {
    clear: both;
    margin-bottom: 4px;
    text-align: right;
}

    #cart a {
        color: #222;
        font-family: "CeraPro-Medium", Helvetica, sans-serif;
        font-size: 11px;
    }

    #cart img {
        margin-top: -2px;
        vertical-align: middle;
    }

#search img {
    vertical-align: middle;
    margin: 0 2px 0 4px;
}

#nav,
#navMobile {
    background: #b6b6ab;
    clear: both;
    width: 100%;
    max-width: 1100px;
    text-transform: uppercase;
    font-family: "CeraPro", Helvetica, Arial, sans-serif;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    font-size: 10.5pt;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}

    #nav div {
        background: transparent;
        padding: 2px;
    }

    #nav a,
    #navMobile a {
        margin-right: 17px;
        color: #fff;
        font-size: 10.5pt;
        padding: 0 3px;
    }

#navSub {
    background: #cdcdcd;
    clear: both;
    width: 100%;
    max-width: 1100px;
    font-family: "CeraPro", Helvetica, Arial, sans-serif;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    text-align: center;
    margin: 0 auto;
}

    #navSub div {
        background: transparent;
    }

    #navSub a {
        margin-right: 17px;
        color: #999;
        font-size: 14px;
        padding: 0 7px;
    }

#footer {
    margin-bottom: 40px;
    color: #555;
}

    #footer #looking {
        border-top: solid 1px #b6b6ab;
        border-bottom: solid 1px #b6b6ab;
        margin: 15px 0;
        padding: 15px 0;
    }

        #footer #looking img {
            margin-bottom: 5px;
            vertical-align: middle;
        }

#looking div {
    margin-right: 5px;
}

#footer .links,
#footer .contact {
    margin-bottom: 20px;
    font-size: 12px;
}

    #footer .links a {
        font-size: 12px;
        margin: 0 4px;
    }

#whats_new {
    background: #5495ae;
    color: #fff;
    width: 290px;
}

    #whats_new .section .header {
        height: 1%;
        border-bottom: 1px solid #d3e9ef;
        margin: 0 0 16px;
        padding: 0 6px;
    }

        #whats_new .section .header h2 {
            margin-bottom: 7px;
            color: #fff;
        }

    #whats_new a {
        font-family: "CeraPro-Medium", Helvetica, sans-serif;
        color: #fff;
        text-decoration: underline;
    }

        #whats_new a:hover {
            font-family: "CeraPro-Medium", Helvetica, sans-serif;
            text-decoration: none;
        }

    #whats_new hr {
        border: 1px solid #d3e9ef;
    }

    #whats_new h4 {
        padding: 4px 0 5px;
    }

        #whats_new h4 a {
            margin-bottom: 12px;
            font-family: "CeraPro-Medium", Helvetica, sans-serif;
            text-decoration: none;
        }

            #whats_new h4 a:hover {
                text-decoration: underline;
            }

#feature {
    background: #cdcdcd;
}

    #feature td {
        padding: 3px 7px 2px;
    }

    #feature h4 {
        color: #297b9a;
        padding: 4px 0 5px;
    }

    #feature .links a {
        display: block;
        margin: 6px;
    }

#viewMore {
    background: #d4e5eb;
}

    #viewMore td {
        padding: 3px 7px 0;
    }

    #viewMore h3,
    #viewMore h5 {
        text-align: center;
        padding: 4px 0 3px;
    }

    #viewMore a {
        font-family: "CeraPro-Medium", Helvetica, sans-serif;
        display: block;
    }

.supplement td {
    padding: 0 8px 5px;
}

.featured_products {
    background: #ecf3f6;
    font-size: 14px;
}

    .featured_products td {
        text-align: center;
        padding: 0 8px 5px;
    }

    .featured_products h3,
    .featured_products h4,
    .featured_products h5 {
        margin-bottom: 8px;
        color: #666;
        border-bottom: 1px solid #999;
        text-transform: capitalize;
    }

.section {
    margin-bottom: 0;
}

    .section .strong_links a {
        display: block;
        margin-bottom: 8px;
        font-family: "CeraPro-Medium", Helvetica, sans-serif;
        font-size: 11pt;
        color: #297b9a;
    }

.saleText {
    color: red;
}

.saleTextBold {
    color: red;
}

.saleTextLarge {
    color: red;
    font-size: 13pt;
}

.sectionHeader {
    border-bottom: 1px solid #297b9a;
    color: #666;
    margin: 8px 0;
    padding: 5px 0 5px 5px;
}

.quote {
    text-align: center;
    font-size: 10pt;
    margin: 10px 0;
    padding: 20px 0 10px;
}

.video_reviews img {
    float: left;
    margin-right: 12px;
}

.last {
    margin-bottom: 0;
    padding-bottom: 0;
}

.border {
    padding: 10px 7px 3px;
}

.centerIt td {
    text-align: center;
}

.centerItBlue td {
    text-align: center;
    background: #ecf3f6;
}

.tabsLine img {
    vertical-align: bottom;
}

td.subHeader {
    text-align: right;
    font-size: 14px;
}

.specs h2 {
    color: #297b9a;
    font-size: 12pt;
    border-bottom: #9cccf4 1px solid;
    margin: 5px 0 5px 3px;
    padding: 5px 0 5px 3px;
}

.specs td {
    font-size: 14px;
    margin-right: 5px;
}

.specs .attrName {
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    font-size: 14px;
}

.floatW {
    position: absolute;
    z-index: 10;
    background-color: #d4e5eb;
    border: 1px solid #555;
    color: #555;
}

    .floatW .floatHead {
        background-color: #555;
        border-bottom: 1px solid #555;
        color: #fff;
    }

.floatHead a {
    background-color: #555;
    border-bottom: 1px solid #555;
    color: #fff;
    font-size: 14px;
}

#newsletter h1 {
    border-bottom: 1px solid #297b9a;
    text-align: center;
    margin: 5px 0 7px;
    padding: 8px 0 6px;
}

#newsletter h2 {
    font-size: 12pt;
    border-bottom: 1px solid #297b9a;
    margin: 5px 0 7px;
    padding: 8px 0 6px;
}

.ECHeaderTabOutline {
    border-top: #297b9a 1px solid;
    border-right: #297b9a 1px solid;
    border-left: #297b9a 1px solid;
    background-color: #cbe4f9;
}

.ECHeaderTabBack {
    border-top: #297b9a;
    border-bottom: #297b9a 1px solid;
    background-color: #cbe4f9;
}

.ECHeaderTabDiv {
    font-size: 14pt;
}

.ECHeaderTab {
    font-size: 14pt;
    padding: 2px 5px;
}

    .ECHeaderTab:hover {
        font-size: 14pt;
        color: #cbe4f9;
        background-color: #297b9a;
        padding: 2px 5px;
    }

.ECHeaderTabSubBack {
    border-top: #297b9a 1px solid;
    border-bottom: #297b9a 1px solid;
}

.ECHeaderTabSub {
    font-size: 11pt;
    padding: 2px 5px;
}

    .ECHeaderTabSub:hover {
        font-size: 11pt;
        color: #cbe4f9;
        background-color: #297b9a;
        padding: 2px 5px;
    }

.ECTop {
    border-top: #9cccf4 1px solid;
}

.ECRight {
    border-right: #9cccf4 1px solid;
}

.ECLeftRightBottom {
    border-right: #297b9a 1px solid;
    border-left: #297b9a 1px solid;
    border-bottom: #297b9a 1px solid;
}

.ECTopRight {
    border-right: #9cccf4 1px solid;
    border-top: #9cccf4 1px solid;
}

.ECBottomLight {
    border-bottom: #9cccf4 1px solid;
}

.ECLeft {
    border-left: #9cccf4 1px solid;
}

.ECActionPaneProduct {
    color: #404040;
    border-bottom: #9cccf4 1px solid;
    vertical-align: top;
    text-align: center;
    padding: 3px;
}

.ECActionPaneProductTop {
    border-top: #9cccf4 1px solid;
    border-bottom: #9cccf4 1px solid;
    vertical-align: top;
    text-align: center;
    padding: 3px;
}

.ECActionPaneProductTopSelected {
    border-top: #9cccf4 1px solid;
    color: #e3e3e3;
    border-bottom: #9cccf4 1px solid;
    background-color: #404040;
    padding: 3px;
}

.ECActionPane {
    border-right: #9cccf4 1px solid;
    border-top: #9cccf4 1px solid;
    border-left: #9cccf4 1px solid;
}

.ECActionPaneHeader {
    font-size: 11pt;
    color: #0e556b;
    background-color: #e7f5fd;
}

.ECActionPaneHeaderSmall {
    font-size: 10pt;
    color: #0e556b;
    background-color: #e7f5fd;
}

.ECTableHeaderLeftCenter {
    border-top: #cbe4f9 1px solid;
    border-left: #cbe4f9 1px solid;
    border-bottom: #cbe4f9 1px solid;
    text-align: left;
    padding: 5px;
}

.ECTableHeaderRight {
    border: #cbe4f9 1px solid;
    text-align: left;
    padding: 5px;
}

.ECTableBoldLeftCenter {
    border-left: #cbe4f9 1px solid;
    border-bottom: #cbe4f9 1px solid;
    padding: 5px;
}

.ECTableLeftCenter {
    border-left: #cbe4f9 1px solid;
    border-bottom: #cbe4f9 1px solid;
    padding: 5px;
}

.ECTableLeftCenterAlignRight {
    border-left: #cbe4f9 1px solid;
    border-bottom: #cbe4f9 1px solid;
    text-align: right;
    padding: 5px;
}

.ECTableTopLeftCenter {
    border-top: #cbe4f9 1px solid;
    border-left: #cbe4f9 1px solid;
    border-bottom: #cbe4f9 1px solid;
    padding: 5px;
}

.ECTableTopFullShaded {
    border-left: #cbe4f9 1px solid;
    border-right: #cbe4f9 1px solid;
    border-bottom: #cbe4f9 1px solid;
    border-top: #cbe4f9 1px solid;
    background: #ecf3f6;
    text-align: center;
    font-size: 11pt;
    padding: 3px;
}

.ECTableRight {
    border-right: #cbe4f9 1px solid;
    border-left: #cbe4f9 1px solid;
    border-bottom: #cbe4f9 1px solid;
    padding: 5px;
}

.ECTableTopRight {
    border: #cbe4f9 1px solid;
    padding: 5px;
}

.ECTableHeaderLarge {
    font-size: 12pt;
    color: #155081;
    padding-top: 5px;
    text-decoration: none;
}

.ECTableHeader {
    font-size: 11pt;
    color: #155081;
    padding-top: 5px;
    text-align: left;
}

.ECButton {
    border-top: #155081 2px solid;
    border-right: #155081 2px solid;
    border-left: #155081 2px solid;
    border-bottom: #155081 2px solid;
    color: #155081;
    background-color: #e7f5fd;
    text-decoration: none;
}

    .ECButton:hover {
        color: #e7f5fd;
        background-color: #155081;
        text-decoration: none;
    }

.messageDetailHeader {
    border-right: #9cccf4 1px solid;
    border-top: #9cccf4 1px solid;
    border-left: #9cccf4 1px solid;
    border-bottom: #9cccf4 1px solid;
    background-color: #cbe4f9;
}

    .messageDetailHeader .head {
        font-size: 11pt;
    }

.messageDetailHeaderButton {
    background-color: #e7f5fd;
}

.messageDetailSubHeader {
    border-right: #9cccf4 1px solid;
    border-left: #9cccf4 1px solid;
    border-bottom: #9cccf4 1px solid;
    background-color: #e7f5fd;
}

.messageDetailBottom {
    border-right: #9cccf4 1px solid;
    border-left: #9cccf4 1px solid;
    border-bottom: #9cccf4 1px solid;
}

.corner td {
    background: #fff;
    padding: 0 8px 5px;
}

.imageList {
    list-style: none;
    margin: 5px 0 5px 5px;
    padding: 0;
}

    .imageList li {
        display: inline-block;
        vertical-align: top;
        margin: 0 2px;
        padding: 0;
    }

    .imageList img {
        display: block;
    }

    .imageList .imgWrap {
        border: 1px solid #a9b0b3;
        max-width: 92px;
        height: 92px;
        overflow: hidden;
        display: table-cell;
        vertical-align: middle;
    }

    a,
    .imageList a {
        text-decoration: none;
    }

h1,
h2 {
    font-size: 25px;
    line-height: 1.1em;
}

h5,
a.large,
.ECHeaderTabSubDiv,
.ECTableTextLarge {
    font-size: 11pt;
}

a.small,
select.small,
input.small,
#search select {
    font-size: 14px;
}

.cartContents,
.supplement .small,
.featured_products .small,
.specs .prodName,
.corner .small {
    font-size: 9pt;
}

#nav a.last,
#navSub a.last,
#footer #looking div.last {
    margin-right: 0;
}

#nav a.first,
#navSub a.first {
    margin-left: 0;
}

#nav a:hover,
#navMobile a:hover,
#navSub a:hover {
    text-decoration: none;
    color: #297b9a;
}

.navBottom,
.navSubBottom {
    padding: 0 0 15px;
}

#footer a {
    color: #555;
    font-size: 13px;
    text-align: center;
}

#footer .left,
.floatW td {
    text-align: left;
}

#footer .right,
.addThis {
    text-align: right;
}

#whats_new td,
.section td {
    padding: 3px 10px;
}

#feature .links img,
span.rating img,
.feed img,
.productLink img {
    vertical-align: middle;
}

span.price,
a.price {
    display: block;
    color: #555;
    font-size: 11pt;
}

    span.price em,
    em.price {
        display: block;
        color: #e9182d;
        font-size: 10.5pt;
    }

td.price {
    color: #555;
    font-size: 10.5pt;
    text-align: center;
    padding-bottom: 7px;
}

span.rating,
a.name,
a.rating {
    display: block;
    font-size: 14px;
    line-height: 1.2rem;
}

a.cart {
    display: block;
    font-size: 1rem !important;
    line-height: 1.2rem;
}

.supplement,
.corner {
    background: #ecf3f6;
}

    .supplement .section,
    .featured_products .section,
    .corner .section {
        margin: 8px 0 20px;
    }

    .supplement h4,
    .corner h4 {
        margin-bottom: 8px;
        color: #666;
        border-bottom: 1px solid #999;
    }

    .supplement .subHeader,
    .corner .subHeader {
        border-bottom: 1px solid #999;
        border-top: 1px solid #999;
    }

.section .header,
.header {
    height: 1%;
    position: relative;
    border-bottom: 1px solid #297b9a;
    margin: 0 0 16px;
    padding: 0 6px;
}

    .section .header h1,
    .section .header h2,
    .section .header h3,
    .header h1,
    .header h2,
    .header h3 {
        color: #666;
        margin: 5px 0 7px;
    }

    .section .header a,
    .header a {
        position: absolute;
        bottom: 5px;
        right: 6px;
        color: #0166c0;
    }

.ECHeaderTabSubBackNoTop,
.ECBottom {
    border-bottom: #297b9a 1px solid;
}

/* END jbwOnline20150826.css */

/* BEGIN jbwOnline20161103CSS3.css */

body {
    margin: 0 auto;
    overflow-x: hidden;
}

.hide {
    visibility: hidden;
}

.container {
    width: 100%;
    max-width: 1100px;
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
}

.imgwrap {
    display: block;
    float: left;
    width: 100%;
    max-width: 1100px;
    overflow: hidden;
    margin: 0 auto;
}

div.imgContainer img,
div.imgSmContainer img {
    display: block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0 auto;
}

div.descContainer {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto 15px;
}

img.imgFeatured {
    display: block;
    border-radius: 10px;
    margin: 0 auto 10px;
}

.imgDescContainer {
    border-radius: 10px;
    background: #fff;
    display: inline-block;
    float: left;
    overflow: hidden;
    margin: 10px;
}

.breadcrumbs {
    display: block;
    margin: 1rem 0;
    font-size: 0.9rem;
}

a img {
    border: none;
}

div.imgContainer:hover div.caption,
div.imgSmContainer:hover div.caption,
ul.prodGroupList li:hover div.prodCaption {
    background-color: #0166c0;
}

.main,
.content {
    background: #fff;
    margin-bottom: 10px;
    overflow: hidden;
}

    .content p {
        padding: 0 0 0 10px;
    }

.nav {
    background: #ecf3f6;
    margin-bottom: 10px;
    padding: 10px;
}

    .nav h1 {
        display: inline-block;
        float: left;
    }

.label {
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    font-size: 10pt;
    text-transform: uppercase;
}

.navCol {
    width: 100%;
    float: left;
    clear: left;
}

.filter {
    background: #fff;
}

    .filter label a {
        background: #e7e9ec;
        background: url(../images/style/2014/sprite.png) 8px 7px no-repeat, linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: url(../images/style/2014/sprite.png) 8px 7px no-repeat, -webkit-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: url(../images/style/2014/sprite.png) 8px 7px no-repeat, -moz-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: url(../images/style/2014/sprite.png) 8px 7px no-repeat, -o-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        font-family: "CeraPro-Medium", Helvetica, sans-serif;
        font-size: 12px;
        color: #464646;
        border: 1px solid #b6b6ab;
        border-radius: 4px;
        margin: 0 0 5px;
        padding: 5px 5px 5px 25px;
    }

    .filter label.open a {
        background: #e7e9ec;
        background: url(../images/style/2014/sprite.png) 8px -31px no-repeat, linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: url(../images/style/2014/sprite.png) 8px -31px no-repeat, -webkit-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: url(../images/style/2014/sprite.png) 8px -31px no-repeat, -moz-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: url(../images/style/2014/sprite.png) 8px -31px no-repeat, -o-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
    }

    .filter label.tan a {
        background: #e7e9ec;
        background: url(../images/style/2014/sprite.png) 8px 7px no-repeat, linear-gradient(to bottom, #fffcf0, #e5e0cc);
        background: url(../images/style/2014/sprite.png) 8px 7px no-repeat, -webkit-linear-gradient(to bottom, #fffcf0, #e5e0cc);
        background: url(../images/style/2014/sprite.png) 8px 7px no-repeat, -moz-linear-gradient(to bottom, #fffcf0, #e5e0cc);
        background: url(../images/style/2014/sprite.png) 8px 7px no-repeat, -o-linear-gradient(to bottom, #fffcf0, #e5e0cc);
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        font-family: "CeraPro-Medium", Helvetica, sans-serif;
        font-size: 12px;
        color: #464646;
        border: 1px solid #b6b6ab;
        border-radius: 4px;
        margin: 0 0 5px;
        padding: 5px 5px 5px 25px;
    }

    .filter label.tan.open a {
        background: #e7e9ec;
        background: url(../images/style/2014/sprite.png) 8px -31px no-repeat, linear-gradient(to bottom, #fffcf0, #e5e0cc);
        background: url(../images/style/2014/sprite.png) 8px -31px no-repeat, -webkit-linear-gradient(to bottom, #fffcf0, #e5e0cc);
        background: url(../images/style/2014/sprite.png) 8px -31px no-repeat, -moz-linear-gradient(to bottom, #fffcf0, #e5e0cc);
        background: url(../images/style/2014/sprite.png) 8px -31px no-repeat, -o-linear-gradient(to bottom, #fffcf0, #e5e0cc);
    }

.options,
.tagCrumbs {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.options {
    margin-bottom: 10px;
}

.tagWrap {
    background: #f9f9f9;
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 0.5rem 0.5rem;
    border: 1px solid #cccccc;
}

.tagCrumbs {
    padding: 0;
}

    .tagCrumbs li {
        float: left;
        margin: 0 5px 15px 0;
        padding: 0;
    }

    .tagCrumbs li a {
        text-decoration: none;
        text-transform: uppercase;
        color: #464646;
        font-size: 10px;
        font-family: "CeraPro-Medium", Helvetica, sans-serif;
        background: #e7e9ec;
        background: url(../images/style/2014/close.png) no-repeat right 4px, linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: url(../images/style/2014/close.png) no-repeat right 4px, -webkit-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: url(../images/style/2014/close.png) no-repeat right 4px, -moz-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: url(../images/style/2014/close.png) no-repeat right 4px, -o-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        border: 1px solid #b6b6ab;
        border-radius: 4px;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
        padding: 5px 20px 6px 10px;
        white-space: pre;
    }

            .tagCrumbs li a:hover {
                background-color: #f7f8fa;
            }

.check {
    background: url(../images/style/2014/checkbox.png) 0 -84px no-repeat;
    display: block;
    padding-left: 20px;
    text-decoration: none;
    margin: 0;
}

.uncheck {
    background: url(../images/style/2014/checkbox.png) 0 3px no-repeat;
    display: block;
    padding-left: 20px;
    text-decoration: none;
    margin: 0;
}

.options li:hover {
    background: #e8f3f8;
    border-radius: 4px;
}

.toTop {
    height: 0.8em;
    background: #b6b6ab;
    color: #fff;
    position: fixed;
    bottom: 20px;
    right: 10px;
    display: none;
    font-size: 30pt;
    border-radius: 4px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    padding: 10px 5px 5px;
}

.arrow {
    color: gray;
    background: #fff;
    padding: 2px 5px;
}

    .arrow:hover {
        text-decoration: none;
        color: #0166c0;
    }

.stageWrap {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    background: #fff;
    /*overflow: hidden*/
}

#body {
    margin: auto;
}

.main {
    float: left;
    background: #fff;
    margin: 0;
    padding: 0;
}

.folderTab.sub h3 {
    text-align: center;
    float: none;
    padding: 3px;
    font: 13pt CeraPRO;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    line-height: 2em;
}

ul.prodGroupListFeatured {
    list-style: none;
}

    ul.prodGroupListFeatured li {
        position: relative;
        float: left;
        overflow: hidden;
        list-style: none;
        margin: 0 10px 10px 0;
        padding: 0;
    }

.folderTab.barSection li {
    list-style: none;
    text-align: left;
    padding: 5px 5px 5px 10px;
}

.folderTab.featuredSub a {
    color: #0166c0;
    text-shadow: none;
    font-size: 10pt;
}

.featuredSub.featuredSubPrice {
    color: #555;
    text-shadow: none;
    font-size: 11pt;
}

.smallImageBox {
    display: inline-block;
    max-width: 120px;
    max-height: 150px;
    margin-bottom: 15px;
    overflow: hidden;
}

.borderBox.featuredProduct {
    background: #ffffff;
}
    .borderBox.featuredProduct div:first-child {
        padding-right: 2rem;
    }

.folderTab.section {
    background: #fff;
    text-align: center;
}

.barSection ul {
    padding: 0;
    margin: 0;
}

.barSection li a:hover {
    text-decoration: underline;
}

span.highlight {
    color: #bd1b8d;
    font: 1.5rem "CeraPRO";
}

span.blue {
    color: #0166c0;
}

span.small {
    font-size: 14px;
}

.borderBox {
    border-top: none;
    background: #fff;
    overflow: hidden;
    margin: 0;
}

    .borderBox.surround {
    }

.vtop,
.vtop > div {
    vertical-align: top;
}

.vbot {
    vertical-align: bottom;
}

.manuName {
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    color: #464646;
    margin: 10px 0 5px;
}

.prodName {
    color: #464646;
    margin: 0 0 5px;
}

.specs {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 20px;
}

    .specs li {
        padding: 0 0 15px;
    }

.sortOptions {
    float: right;
    padding: 0;
}

    .sortOptions select {
        border-radius: 4px;
        outline: none;
        min-width: 150px;
        padding: 0.5rem;
    }

.pagination {
    border-top: 1px solid #009dd6;
    margin-top: -3px;
}

.pages {
    float: right;
    padding: 5px 5px 0;
}

    .pages a {
        color: #464646;
        background: #e7e9ec;
        background: linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: -webkit-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: -moz-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        background: -o-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
        border: 1px solid #b6b6ab;
        border-radius: 4px;
        padding: 5px 9px;
        display: inline-block;
        margin: 0 5px 5px 0;
    }

        .pages a:hover {
            background: #f7f8fa;
            text-decoration: none;
        }

        .pages a.current {
            background: #0166c0;
            background: linear-gradient(to bottom, #388caf, #0166c0);
            background: -webkit-linear-gradient(to bottom, #388caf, #0166c0);
            background: -moz-linear-gradient(to bottom, #388caf, #0166c0);
            background: -moz-linear-gradient(to bottom, #388caf, #0166c0);
            border: 1px solid #0166c0;
            color: #fff;
        }

.imgContainer,
.imgSmContainer {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

    .imgContainer a:hover,
    .imgSmContainer a:hover,
    li a:hover,
    .cornerProdContainer a,
    .tagCrumbs li a,
    .options li a,
    .product a,
    .prodPrice {
        text-decoration: none;
    }

        .prodPrice .infoSmall {
            margin: 0;
        }

.prodPriceLarge {
    font-size: 14pt;
    padding-top: 5px;
}

    .prodPriceLarge em.price {
        display: block;
        color: #e9182d;
        font-size: 14pt;
    }

.cornerProdContainer a:hover,
.product a:hover {
    text-decoration: underline;
}

.tagSearch {
    width: 100%;
    overflow: hidden;
    margin: 0 0 10px;
}

.keyword {
    outline: none;
    border: 1px solid #b6b6ab;
    border-radius: 4px;
    width: 155px;
    color: #555;
    padding: 3px;
}

    .keyword:focus {
        background: #fff;
        font-style: normal;
    }

.list {
    list-style-type: none;
    margin: 0 0 10px;
    padding: 0;
}

.button {
    color: #fff;
    border-radius: 4px;
    padding: 5px 20px;
    text-decoration: none;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    word-wrap: break-word;
    display: inline-block;
    margin-bottom: 10px;
}

    .button a {
        color: #fff;
        font: 10px "CeraPRO-Medium";
        text-decoration: none;
        text-transform: uppercase;
        display: block;
    }

    .button:hover {
        color: white;
        text-decoration: none;
    }

    .button img {
        position: relative;
        top: 7px;
    }

.clearSm {
    color: #fff;
    border: 1px solid #0166c0;
    float: right;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    margin: 0;
    line-height: 10pt;
    font: bold 10px CeraPRO;
    text-transform: uppercase;
}

    .clearSm:hover {
        background: #388caf;
        border: 1px solid #184a5a;
    }

.options li,
.list li {
    margin: 0;
    padding: 0 0 0 5px;
}

    .product span,
    .product div,
    .options li a {
        display: block;
    }

#cornerComment {
    text-align: center;
    max-height: 350px;
}

    #cornerComment p {
        margin: 0;
        padding: 20px;
    }

#cornerTitleBox {
    border: 1px solid #b6b6ab;
    border-radius: 0 0 5px 5px;
    margin-bottom: 15px;
    overflow: hidden;
}

#cornerTitleImg {
    text-align: center;
    display: block;
    margin-top: 10px;
    overflow: hidden;
}

span.right {
    float: right;
    color: #fff;
    padding: 10px 0 10px 0;
}

span.left {
    float: left;
    color: #fff;
    padding: 10px 0 10px 0;
}

span.right.h3 {
    padding: 3px 10px 3px 0;
}

.folderTab a {
    color: #0166c0;
}

.sectionWrap {
    margin: 0 0 10px;
}

.leftbar {
    float: left;
    width: 220px;
    margin-right: 10px;
}

.leftbar.searchClient {
    width: 360px;
}

.searchClient {
    margin-bottom: 10px;
}

    .searchClient table {
        border-spacing: 5px;
        margin: auto;
    }

    .searchClient tr {
        vertical-align: top;
    }

    .searchClient table > tbody > tr > td:first-child {
        text-align: right;
        padding-top: 5px;
    }

    .searchClient table > tbody > tr > td:nth-child(2) select,
    .searchClient table > tbody > tr > td:nth-child(2) input {
        width: 100%;
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #b6b6ab;
    }

#nav,
#navMobile {
    background: #b6b6ab;
    padding: 5px 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid #999980;
}

#navSub {
    background: #cdcdcd;
    padding: 3px 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #cacaca;
    border-top: none;
}

.fleft {
    float: left;
}

.fright {
    float: right;
}

.newsStand table {
    border-collapse: collapse;
}

.newsStand td {
    border-bottom: 1px solid #b6b6ab;
    padding: 10px;
}

.newsStand table > tbody > tr > td:first-child {
    width: 80%;
}

.review {
    margin: 0 0 20px;
}

.comment {
    color: #555;
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
    /*box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.1)*/
}

.review span.title {
    padding: 0 0 10px;
}

.reviewImg {
    width: 100px;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    text-align: center;
    overflow: hidden;
    margin: 0 0 10px;
}

.review .comment:hover .vote {
    opacity: 1;
}

.review span {
    display: block;
}

.vote,
.response {
    float: right;
    font-style: italic;
    margin: -20px 0;
}

span.title {
    text-align: left;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    padding: 0 0 10px;
}

span.author {
    padding: 15px 0 10px;
}

.stars {
    margin-bottom: 10px;
}

.commentWrapper {
    display: inline-block;
    width: 770px;
}

.commentSlim {
    width: 560px;
}

.commentFull {
    width: 100%;
}

.smallBold {
    font: bold 14px CeraPRO;
}

a.submit {
    color: #555;
    text-decoration: none;
    font-style: normal;
    padding: 5px;
    border: 1px solid #b6b6ab;
    border-radius: 3px;
    margin: 0 0 0 5px;
}

    a.submit:hover {
        background: #f7f8fa;
    }

.green {
    color: #519548;
}

.red {
    color: #b11623;
}

#header table,
#footer table,
#accountRegister {
    margin: 0 auto;
}

.blueLG {
    background: #0166c0;
    background: linear-gradient(to bottom, #388caf, #0166c0);
    background: -webkit-linear-gradient(to bottom, #388caf, #0166c0);
    background: -moz-linear-gradient(to bottom, #388caf, #0166c0);
    background: -o-linear-gradient(to bottom, #388caf, #0166c0);
}

    .blueLG:hover {
        background: #388caf;
    }

.button.blueLG {
    border: 1px solid #0166c0;
}

.ltTan {
    background: #fffcf0;
}

.tanLG {
    background: #e5e0cc;
    background: linear-gradient(to bottom, #fffcf0, #e5e0cc);
}

    .tanLG:hover {
        background: #fffcf0;
    }

.grayLG {
    background: #e7e9ec;
    background: linear-gradient(to bottom, #f7f8fa, #e7e9ec);
    background: -webkit-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
    background: -moz-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
    background: -o-linear-gradient(to bottom, #f7f8fa, #e7e9ec);
}

    .grayLG:hover {
        background: #f7f8fa;
    }

.button.grayLG {
    color: #777;
    border: 1px solid #b6b6ab;
}

.greenLG {
    background: #519548;
    background: linear-gradient(to bottom, #5caf51, #519548);
    background: -webkit-linear-gradient(to bottom, #5caf51, #519548);
    background: -moz-linear-gradient(to bottom, #5caf51, #519548);
    background: -o-linear-gradient(to bottom, #5caf51, #519548);
}

    .greenLG:hover {
        background: #5caf51;
    }

.button.greenLG {
    border: 1px solid #519548;
    /*display: block !important;*/
}

.yellowLG {
    background: #fad567;
    background: linear-gradient(to bottom, #fad567, #ffbf00);
    background: -webkit-linear-gradient(to bottom, #fad567, #ffbf00);
    background: -moz-linear-gradient(to bottom, #fad567, #ffbf00);
    background: -o-linear-gradient(to bottom, #fad567, #ffbf00);
}

    .yellowLG:hover {
        background: #fad567;
    }

.button.yellowLG {
    border: 1px solid #ffbf00;
    color: #555;
}

.dkgrayLG {
    background: #8f9a9c;
    background: linear-gradient(to bottom, #8f9a9c, #65727a);
    background: -webkit-linear-gradient(to bottom, #8f9a9c, #65727a);
    background: -moz-linear-gradient(to bottom, #8f9a9c, #65727a);
    background: -o-linear-gradient(to bottom, #8f9a9c, #65727a);
}

    .dkgrayLG:hover {
        background: #8f9a9c;
    }

.button.dkgrayLG {
    border: 1px solid #65727a;
    color: #fff;
}

.button.search {
    display: block;
    background: #0166c0;
    background: linear-gradient(to bottom, #3d7d93, #0166c0);
    background: -webkit-linear-gradient(to bottom, #3d7d93, #0166c0);
    background: -moz-linear-gradient(to bottom, #3d7d93, #0166c0);
    background: -o-linear-gradient(to bottom, #3d7d93, #0166c0);
    border: 1px solid #0166c0;
    padding: 10px;
    text-transform: none;
    width: 100px;
    line-height: normal;
}

    .button.search:hover {
        color: #0166c0;
        background: #fff;
        border: 1px solid #0166c0;
        font-weight: bold;
    }

a.search {
    text-decoration: none;
}

.borderBox.feature {
    background: #ecf3f6;
}

.module {
    width: 445px;
}

.notice {
    padding: 15px 25px 15px 15px;
    border-radius: 4px;
    border: 1px solid #fff;
    font: 10pt CeraPRO;
    color: #555;
    margin: 0 0 10px;
    width: 100%;
    box-sizing: border-box;
}

    .notice.nobg {
        background: #fff;
    }

.warning {
    background: #ffef86;
    border-color: #ffba58;
}

.error {
    background: #ffd9c8;
    border-color: #ff8571;
}

.alert {
    background: #d1f5a6;
    border-color: #86ce3a;
}

.reminder {
    background: #caf1f9;
    border-color: #82c8d6;
}

.separator {
    border-bottom: 1px solid #cdcdcd;
    margin: 5px 0 10px;
}

#productImageStage,
#kitImageStage {
    display: inline-block;
    width: 30%;
    vertical-align: top;
    text-align: center;
    margin: 0 10px 10px;
    overflow: hidden;
}

#manuImageStage {
    display: inline-block;
    width: 45%;
    vertical-align: top;
    text-align: center;
    margin: 0 10px 10px;
    overflow: hidden;
}

#productDescription {
    display: inline-block;
    width: 65%;
}

#kitDescription {
    display: inline-block;
    width: 55%;
}

#manuDescription {
    display: inline-block;
    width: 50%;
}

#starRating {
    margin: 0 0 10px;
}

#cartSection {
    margin: 10px 0;
    text-align: center;
}

select {
    padding: 3px;
    border: 1px solid #b6b6ab;
    border-radius: 4px;
}

#productOptionsList select,
.columnTable select,
form select {
    max-width: 540px;
    min-width: 150px;
    margin: 0 0 10px;
}

#productQuantityBox {
    margin: 0 0 10px;
}

    #productQuantityBox div {
        margin: 10px 0;
    }

    #productQuantityBox input,
    #productQuantityBox select,
    .cartTable input,
    .cartTable select,
    #woolWatcherModule input {
        padding: 3px;
        text-align: center;
        border: 1px solid #b6b6ab;
        border-radius: 4px;
    }

    #productQuantityBox input,
    #woolWatcherModule input {
        width: 60px;
    }

#productDetails,
#content,
#kitDetails {
    width: 70%;
    padding-right: 30px;
    float: left;
    box-sizing: border-box;
}

.button.addToCart {
    display: block;
    background: #519548;
    background: linear-gradient(to bottom, #5caf51, #519548);
    background: -webkit-linear-gradient(to bottom, #5caf51, #519548);
    background: -moz-linear-gradient(to bottom, #5caf51, #519548);
    background: -o-linear-gradient(to bottom, #5caf51, #519548);
    border: 1px solid #519548;
    padding: 10px;
    text-transform: none;
    width: 100px;
}

    .button.addToCart:hover {
        background: #5caf51;
        text-decoration: none;
    }

.specificProduct {
    float: left;
    padding: 5px 0 0 5px;
}

#tabs {
    display: block;
    padding: 0;
}

    #tabs ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #tabs li {
        box-sizing: border-box;
        text-align: center;
        margin: 0 -1px -1px 0;
        padding: 0;
    }

        #tabs li a {
            box-sizing: border-box;
            border: 1px solid #cccccc;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            color: #0166c0;
            font: 11pt "CeraPRO-Medium";
            text-decoration: none;
            padding: 10px;
            display: block;
            min-width: 100px;
        }

            #tabs li a.current {
                background: #0166c0;
                color: #ffffff;
                border-color: #0166c0;
            }

.tabbedBox {
    background: #fff;
    border: 1px solid #cccccc;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    margin: 0;
    padding: 10px;
}

@media (max-width: 515px) {
    #tabs ul {
        align-items: flex-end;
        justify-content: space-between;
    }

    #tabs li {
        width: 49.5%;
        margin: 0 0 4px 0;
    }

        #tabs li a {
            border-radius: 4px;
            width: 100%;
            padding: 10px 0;
        }

    .tabbedBox {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
    }
}

.center {
    text-align: center;
}

.mcenter {
    margin-left: auto;
    margin-right: auto;
}

.folderTab .center {
    float: none;
}

.tabbedBox .comment {
    margin-top: 2em;
    margin-bottom: 0;
}

.comment h3 {
    color: #666666;
    font: 13pt CeraPRO;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    line-height: 2em;
    margin: 0 0 1rem 0;
    padding: 0;
    border-bottom: 1px solid #cccccc;
}

#sideColumn {
    width: 100%;
    float: right;
    text-align: center;
    margin-bottom: 10px;
    margin: 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #sideColumn {
        width: 30% !important;
        padding-left: 2rem;
    }
}

.sidebar h4,
.sidebar h5,
.featuredSubHeader h4 {
    color: #383d44;
    font: normal 16px CeraPRO;
    letter-spacing: 0.5px;
    padding: 10px 0;
    text-align: center;
    float: none;
    // border-bottom: 3px solid #CDCDCD;
}

.sidebar h4 {
}

.sidebar h5 {
}

.module {
    width: 445px;
    margin-bottom: 10px;
}

.barSection {
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
    border-radius: 10px;
}

    .barSection ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .barSection li {
        display: block;
        text-align: left;
        padding: 0 0 5px 5px;
    }

.sideBarColumn {
    text-align: center;
    //width: 185px;
    font-size: 14px;
}

#Manufacturers {
    height: 38px;
    width: 200px;
    border-radius: 3px;
    color: #202020;
    margin-bottom: 0;
}

    #Manufacturers option:first-child {
        color: #009cd5;
    }

.productAttributes table,
.tabbedBox table,
.fullWidth,
.fullWidth table,
.leftHalf table,
.rightHalf table {
    width: 100%;
}

.productAttributes.slim h4 {
    font: normal 14px "CeraPRO-Bold";
    display: inline-block;
}

.productAttributes.slim {
    font: 14px CeraPRO;
    vertical-align: top;
    line-height: 1.5em;
    background-color: #f9f9f9;
}

    .productAttributes.slim a {
        font-size: 14px;
    }

.productAttributesHeader h2 {
    font-size: 15px;
    font-weight: bold;
    display: inline;
    border-bottom: 1px solid #cccccc;
}

.productAttributesHeader h3 {
    font-size: 13px;
    font-weight: bold;
    display: inline;
    border-bottom: 1px solid #cccccc;
}

.divider {
    background: #cdcdcd;
    border: 1px solid #b6b6ab;
    border-radius: 4px;
    margin: 0 0 10px;
    display: block;
    padding-left: 5px;
}

    .divider h2,
    .divider h3,
    .divider h4 {
        display: inline-block;
        font: bold 10pt CeraPRO;
        text-transform: uppercase;
        color: #777;
        line-height: 2em;
        letter-spacing: 1px;
    }

    .divider span.right {
        background: #cdcdcd;
        padding: 3px 10px 3px 0;
    }

.dividerLine {
    border-top: 1px solid #caccbf;
    margin: 10px 0;
}

#rightColumn {
    float: right;
    width: 25%;
}

.doubleWide {
    width: 290px;
}

.columnTable,
.rowTable,
.cartTable {
    margin: auto;
    border-collapse: collapse;
}

    .columnTable td,
    .rowTable td,
    .rowTable th {
        padding: 10px;
        border: 1px solid #889ba5;
    }

    .cartTable td {
        text-align: center;
        padding: 10px;
    }

    .cartTable input {
        max-width: 60px;
    }

    .columnTable.tan td {
        border: 1px solid #b6b6ab;
    }

    .columnTable.tan tr > td:first-child {
        background: #cdcdcd;
    }

    .columnTable tr > td:first-child {
        font-family: "CeraPro-Medium", Helvetica, sans-serif;
        text-align: right;
        background: #ecf3f6;
    }

    .rowTable tr:first-child > td,
    .cartTable tr:first-child > td,
    .rowTable tr > th {
        font-family: "CeraPro-Medium", Helvetica, sans-serif;
        text-align: center;
        background: #cbe4f9;
    }

        .cartTable tr:first-child > td:first-child {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .cartTable tr:first-child > td:last-child {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

.fullWidth {
    width: 100%;
}

.halfWidth {
    width: 50%;
}

.leftHalf {
    display: block;
    width: 49%;
    float: left;
    clear: both;
}

.rightHalf {
    display: block;
    width: 49%;
    float: right;
}

.small {
    font-size: 14px;
}

#emailForm span,
#emailForm input,
#emailForm textarea {
    display: block;
    margin: 0 0 5px;
}

.tabledList td {
    padding: 5px;
}

.radioButtons input {
    margin: 10px 10px 0;
}

.helpBtn img,
.availableBtn img,
.sandboxBtn img {
    vertical-align: middle;
}

.sandboxBtn {
    padding-top: 4px;
    display: block;
}

.options.padded li {
    padding: 10px;
}

.padded {
    padding: 10px;
}

.thirds {
    width: 300px;
}

.twoThirds {
    width: 585px;
}

.mright {
    margin-right: 15px;
}

.mbottom {
    margin-bottom: 15px;
}

.mtop {
    margin-top: 10px;
}

.inlineBlock {
    display: inline-block;
}

.imageColumn div {
    margin-bottom: 15px;
}

.imageColumn.thirds div {
    max-width: 300px;
    max-height: 300px;
    overflow: hidden;
}

.imageColumn div img {
    border-radius: 5px;
}

.rowSection h4 {
    text-align: center;
    float: none;
    display: inline-block;
    padding-top: 10px;
}

.endOfRow {
    margin-right: 0;
}

.borderBox .ECTableHeader {
    font: normal 11pt CeraPRO;
}

.nestedList ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;
    width: 100%;
}

    .nestedList ul li {
        padding-left: 10px;
    }

        .nestedList ul li:before {
            content: url(../secure-html/images/dright.png);
            float: left;
            padding-right: 5px;
        }

        .nestedList ul li.first:before {
            content: none;
        }

    .nestedList ul.options {
        margin-left: 15px;
    }

        .nestedList ul.options li:before {
            content: none;
        }

.fRed {
    color: red;
}

.fSmall {
    font-size: 14px;
}

#productPricing {
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    width: 100%;
}

#searchBar {
    display: inline-block;
}

.headerSearchTerm {
    width: 40%;
    height: 24px;
    border: 2px solid #ddd;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    padding: 5px 20px;
    outline: none;
    color: #009cd5;
    background: #ffffff;
    -webkit-transition: all 0.2222222222s;
    transition: all 0.2222222222s;
}

    .headerSearchTerm::placeholder {
        color: #999999;
    }

    .headerSearchTerm:focus {
        color: #009cd5;
        background: #ffffff;
        border-color: #009dd6;
    }

.headerSearchButton {
    position: absolute;
    right: -46px;
    height: 24px;
    cursor: pointer;
    background: #009cd5;
    padding: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

#footerShort {
    border-top: 1px solid #b6b6ab;
    border-bottom: 1px solid #b6b6ab;
    margin: 15px 0;
    padding: 15px 0;
    text-align: center;
    display: none;
}

.featureDesc.slim {
    max-width: 300px;
}

#footerShort a {
    color: #555;
}

#videoClient {
    text-align: center;
}

#videoMore {
    width: 500px;
    margin: 0 auto;
    background: #ecf3f6;
    padding: 10px;
    border-radius: 4px;
    text-align: left;
}

table.rtAlign tr > td:first-child {
    text-align: right;
}

.ltAlign {
    text-align: left;
}

.rtAlign {
    text-align: right;
}

.disable {
    cursor: default;
    opacity: 0.4;
}

.block {
    display: block;
}

#greeting {
    font-size: 13px;
    text-align: right;
    padding-left: 10px;
}

#mobileNavigation {
    display: none;
}

#navMobile {
    border-radius: 4px;
    padding: 7px 0;
}

    #navMobile a {
        font: bold 10.5pt CeraPRO;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-right: 10px;
    }

    #navMobile ul {
        margin: 10px 0 0;
        padding: 0;
    }

    #navMobile li {
        list-style: none;
        text-align: center;
        padding: 5px;
        border-top: 1px solid #999980;
    }

        #navMobile li a {
            margin: 0;
            padding: 0;
        }

.mauto {
    margin: auto;
}

#listBtn {
    margin-top: -3px;
    position: relative;
    right: 6px;
    display: none;
    background: #b6b6ab;
}

#filterBtn {
    margin-top: 5px;
    position: relative;
    right: 6px;
    display: none;
}

#mobileFilter {
    display: none;
}

.wellRounded {
    border-radius: 5px;
}

.featureImg img {
    max-width: 500px;
    height: auto;
}

.searchKeywordBtn {
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: 4px;
}

#mobileShipping {
    background: #cdcdcd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 5px 0;
    border: 1px solid #b6b6ab;
    font-size: 14px;
    text-align: center;
    width: 100%;
    position: relative;
    top: -2px;
}

.clearFix:after {
    content: "";
    display: table;
    clear: both;
}

#checkoutBar {
    text-align: right;
}

.removeBtn {
    background: #cf4647;
    font-family: "CeraPro-Medium", Helvetica, sans-serif;
    padding: 2px 6px;
}

.width200 {
    width: 200px;
}

.widthMin480 {
    min-width: 480px;
}

.shortPrev,
.shortNext {
    display: none;
}

.buttonNavTop {
    border-bottom: 1px solid #cdcdcd;
    margin-bottom: 10px;
}

.buttonNavBot {
    border-top: 1px solid #cdcdcd;
    padding-top: 10px;
}

.kitLineItem {
    border: none;
    border-spacing: 10px;
    padding: 10px;
}

    .kitLineItem td {
        padding: 5px 5px 0;
    }

        .kitLineItem td:first-child {
            width: 50px;
        }

.commentBlue {
    padding: 10px;
    background: #ecf3f6;
    border: 1px solid #b6b6ab;
    border-radius: 4px;
    box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.15);
    margin-bottom: 15px;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: top;
}

#woolWatcherModule,
#woolWatcherFAQ {
    width: 235px;
    vertical-align: top;
}

table .normal {
    border: 0;
    border-spacing: 0;
}

    table .normal td {
        padding: 0;
    }

.wwColumn {
    width: 850px;
    float: left;
    margin-right: 15px;
}

.toggleBtn {
    display: block;
    text-align: center;
    padding: 5px;
    border-radius: 0 0 4px 4px;
    border: 1px solid #b6b6ab;
    cursor: pointer;
    font: bold 10px CeraPRO;
    text-transform: uppercase;
    margin-top: -3px;
}

.toggleBox {
    border: 1px solid #b6b6ab;
    border-radius: 4px;
}

.tableish {
    display: table;
}

    .tableish .image,
    .tableish .description {
        display: table-cell;
    }

.sectionH {
    padding: 0 0 5px;
    border-bottom: 1px solid #0166c0;
    margin-bottom: 5px;
}

table .secondaryAttrs {
    margin-top: 5px;
}

    table .secondaryAttrs td {
        vertical-align: top;
    }

td .extraRow {
    display: none;
}

#packageValueDetails select {
    max-width: 450px;
}

.code {
    font: 10pt Monospace;
    background: #cdcdcd;
}

.productCompare {
    text-align: center;
    display: inline-block;
    text-decoration: none;
    margin-bottom: 5px;
    overflow: hidden;
    padding: 5px 6px;
}
.compareBtn {
    color: #fff;
    border: 1px solid #0166c0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    margin: 0;
    line-height: 10pt;
    font: bold 11px CeraPRO;
}
.compare-wrap {
    padding-top: 5px;
    opacity: 0.8;
}

.compare-wrap label {
    font: 14px CeraPRO;
    cursor: pointer;
}

.compare-wrap input[type="checkbox"] {
    vertical-align: middle;
    cursor: pointer;
    height: 10px;
}

#compare-box {
    background: #fff;
    padding: 10px;
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
    border: 1px solid #b6b6ab;
    box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: opacity 0.5s;
}

#compare-corral {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#compare-corral div {
    margin: 10px;
}

#clear-compare {
    cursor: pointer;
    color: #0166c0;
    font-size: small;
}

.compare > .product {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 10px;
}

.flex-box {
    display: flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.hide-o {
    opacity: 0;
    z-index: -1;
}

div.star-rating {
    unicode-bidi: bidi-override;
    width: 100px;
    height: 22px;
    overflow: hidden;
    position: relative;
}

.star-top span,
.star-bottom span {
    font-size: 22px;
    color: #d8d8d8;
}

div.star-top {
    z-index: 1;
    position: absolute;
    overflow: hidden;
}

.star-top span {
    color: #388caf;
}

div.star-bottom {
    position: absolute;
    z-index: 0;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

#compare-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

#compare-table td {
    text-align: center;
    padding: 10px;
    vertical-align: top;
    border-right: 1px solid #b6b6ab;
    width: 200px;
}

    #compare-table > tbody > tr > td:first-child {
        font-family: "CeraPro-Medium", Helvetica, sans-serif;
        width: 150px;
    }

    #compare-table > tbody > tr:nth-child(2n + 0) td {
        background: #eee;
    }

.c-item {
    position: relative;
    max-height: 92px;
    max-width: 92px;
    overflow: hidden;
}

    .c-item .removeBtn {
        opacity: 1;
        position: absolute;
        top: -10px;
        right: -10px;
    }

    .c-item:hover .removeBtn {
        opacity: 1;
    }

.result-width {
    max-width: 100%;
}

.clickdesk_bubble {
    display: none !important;
}

.visuallyHidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
/* END jbwOnline20161103CSS3.css */

/*  SECTIONS  ============================================================================= */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  GROUPING  ============================================================================= */

.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

    .col:first-child {
        margin-left: 0;
    }

/* all browsers except IE6 and lower */

/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col {
        margin: 1% 0 1% 0%;
    }
}

/*  GRID OF TWELVE   ============================================================================= */

.span_12_of_12 {
    width: 100%;
}

.span_11_of_12 {
    width: 91.53%;
}

.span_10_of_12 {
    width: 83.06%;
}

.span_9_of_12 {
    width: 74.6%;
}

.span_8_of_12 {
    width: 66.13%;
}

.span_7_of_12 {
    width: 57.66%;
}

.span_6_of_12 {
    width: 49.2%;
}

.span_5_of_12 {
    width: 40.73%;
}

.span_4_of_12 {
    width: 32.26%;
}

.span_3_of_12 {
    width: 23.8%;
}

.span_2_of_12 {
    width: 15.33%;
}

.span_1_of_12 {
    width: 6.86%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 600px) {
    .span_12_of_12 {
        width: 100%;
    }

    .span_11_of_12 {
        width: 100%;
    }

    .span_10_of_12 {
        width: 100%;
    }

    .span_9_of_12 {
        width: 100%;
    }

    .span_8_of_12 {
        width: 100%;
    }

    .span_7_of_12 {
        width: 100%;
    }

    .span_6_of_12 {
        width: 100%;
    }

    .span_5_of_12 {
        width: 100%;
    }

    .span_4_of_12 {
        width: 100%;
    }

    .span_3_of_12 {
        width: 100%;
    }

    .span_2_of_12 {
        width: 100%;
    }

    .span_1_of_12 {
        width: 100%;
    }
}

#searchWrapper {
    width: 100%;
}

#loginInfo {
    text-align: right;
}

.underline {
    border-bottom: 2px solid #009cd5;
}

#nav2 {
}

    #nav2 a {
        font-size: 20px;
    }

#navSub2 {
}

    #navSub2 a {
        font-size: 14px;
    }

.navMainUl {
    width: 100%;
    text-align: right;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}

    .navMainUl li {
        padding: 0 1.3rem 1.25rem;
        max-width: 140px;
        text-decoration: none;
        display: flex;
        align-items: flex-start;
    }

        .navMainUl li:first-child {
            padding-left: 0;
        }

        .navMainUl li:last-child {
            padding-right: 0;
        }

        .navMainUl li a {
            color: #424242;
        }

            .navMainUl li a:hover {
                color: #199ed3;
            }

.navSubUl {
    width: 100%;
    text-align: right;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}

    .navSubUl li {
        padding: 0.5rem 1rem 0;
        max-width: 140px;
        text-decoration: none;
        display: flex;
        align-items: flex-start;
        color: #424242;
    }

        .navSubUl li a {
            color: #888888;
            font-size: 1rem !important;
        }

            .navSubUl li a:hover {
                color: #5e58a4;
            }

.firstNav {
    color: #5e57a6;
}

.secondNav {
    color: #bd1b8d;
}

.thirdNav {
    color: #e0242b;
}

.fourthNav {
    color: #f46b32;
}

.fifthNav {
    color: #fdc234;
}

.sixthNav {
    color: #bddc48;
}

.seventhNav {
    color: #65c152;
}

.eighthNav {
    color: #007a24;
}

@media (max-width: 940px) {
    #manu {
        display: none;
    }

    #searchWrapper {
        max-width: 350px;
    }

    #nav2 a {
        font-size: 17px;
    }

    .navMainUl li {
        padding: 0px 0px 0px 3px;
    }

        .navMainUl li:before {
            padding-right: 1px;
        }

    .navSubUl li {
        padding: 0px 0px 0px 0px;
    }

    .navMainUl li:before {
        padding-right: 0px;
    }

    .hideNav {
        display: none;
    }

    .navSubUl li:nth-child(6):before {
        content: "";
    }
}

@media (max-width: 768px) {
    #fullNavigation2 {
        display: none;
    }

    .underline {
        border: 0px;
    }

    #shortcuts {
        margin-top: 44px;
    }
}

@media (max-width: 600px) {
    #cart {
        text-align: center;
    }

    #cartExtras {
        display: none;
    }

    #searchWrapper {
        max-width: 93%;
        width: 93%;
        text-align: center;
    }

    #searchBar {
        width: 93%;
        text-align: center;
    }
}

@media (max-width: 400px) {
    #searchWrapper {
        max-width: 89%;
        width: 89%;
        text-align: center;
    }

    #searchBar {
        width: 89%;
        text-align: center;
    }
}

h4 a {
    color: #0166c0;
    font-size: 18px;
    font-family: "CeraPro-Bold";
    font-weight: normal;
}

.borderBox.mbottom .largeImageBox {
    width: 30% !important;
}

tr td .borderBox.mbottom .featureDesc {
    max-width: 500px;
}

.wwColumn .borderBox.mbottom {
    display: block;
}

/* BEGIN jbwMobile20150826CSS3.css */

@media (max-width: 1280px) {
    #compare-box {
        bottom: 10px;
        right: 70px;
        top: auto;
        transform: none;
        box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.2);
    }

    #compare-corral {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }
}

@media (max-width: 1024px) {
    #nav a,
    #navMobile a {
        font-size: 9pt;
    }

    .showcase,
    .salerack {
        margin: 0 15px 15px 0;
        width: 100%;
    }

    div#productImageStage,
    div#manuImageStage {
        margin: 0px auto 10px auto;
        width: 100%;
        display: block;
    }

    #productDescription,
    #kitDescription,
    #manuDescription {
        display: block;
        width: 100%;
    }

    #rightColumn,
    .sideBarColumn {
        margin: 0;
        width: 100%;
        float: left;
        max-width: none;
    }

    #productDetails,
    #kitDetails {
        width: 100%;
        padding-right: 0;
        padding-bottom: 10px;
        display: block;
    }

    .stageWrap,
    .bodyWrap,
    div#navMobile,
    #mainColumn .featureDesc {
        width: 100%;
    }

    #mainColumn .showcase,
    #mainColumn .salerack {
        margin-right: 0;
        width: 100%;
    }

    .largeImageBox {
        max-width: none;
        width: 100%;
        text-align: center;
    }

    .featureDesc,
    .featureDesc.slim {
        // padding: 10px 0;
        max-width: none;
        width: 100%;
    }

    .review span.title {
        text-align: center;
    }

    .reviewImg {
        width: 100%;
        text-align: center;
    }

    .commentWrapper {
        width: 100%;
    }

    .vote,
    .response {
        float: none;
        display: block;
        margin: 20px 0 0;
        text-align: right;
    }

    .searchClient table > tbody > tr > td:nth-child(2) select,
    .searchClient table > tbody > tr > td:nth-child(2) input {
        width: 100%;
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #b6b6ab;
    }

    #productImageStage,
    #kitImageStage,
    #manuImageStage {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    #kitDetails form select {
        width: 70%;
    }

    select#productList {
        width: 100%;
    }

    #videoClient object,
    #videoClient embed {
        width: 300px;
        height: auto;
    }

    div#manu,
    div#footer,
    #fullNavigation,
    #shipping {
        display: none;
    }

    a.name,
    .prodPrice {
        font-size: 14px;
    }

    a.cart {
        font-size: 1rem !important;
    }

    .twoThirds.mauto,
    .halfWidth.mauto,
    #extra_info,
    #content,
    .module {
        width: 100%;
    }

    .leftbar,
    .leftbar.searchClient {
        float: none;
        width: 100%;
        margin: 0 0 15px 0;
        display: block;
    }

    .leftbar > .folderTab {
        border-radius: 4px;
    }

    div#footerShort,
    #listBtn,
    #filterBtn,
    #mobileFilter,
    #mobileShipping,
    #mobileNavigation {
        display: block;
    }

    .product {
        width: 155px;
    }

    input.keyword {
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #b6b6ab;
        width: 80%;
    }

    .leftHalf,
    .rightHalf,
    .thirds,
    .twoThirds {
        width: 100%;
        display: block;
    }

    #content {
        margin-right: 0;
    }

    #cornerTitleImg img {
        display: block;
        width: 100%;
        height: auto;
    }

    #cornerComment {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
    }

    .wwColumn,
    #woolWatcherFAQ {
        width: 100%;
        display: block;
    }

    object embed,
    iframe {
        width: 90%;
        height: auto;
    }

    .imageColumn.thirds div {
        display: inline-block;
        width: 200px;
        vertical-align: top;
    }

    .imageColumn.thirds img {
        width: 200px;
        height: auto;
    }

    .flex-box {
        justify-content: center;
    }
}

@media (max-width: 515px) {
    div#cart {
        width: 100%;
        text-align: center;
    }

    .divider span.right {
        display: block;
        /*float: none*/
    }

    .featureImg img {
        max-width: 300px;
        height: auto;
    }

    #checkoutBar {
        text-align: center;
    }

    .shortPrev,
    .shortNext {
        display: block;
    }

    .prevBtn,
    .nextBtn {
        display: none;
    }

    table.inputForm tr > td:first-child {
        width: 30%;
    }

    table.inputForm input[type="text"],
    table.inputForm select {
        width: 100%;
    }

    #accountLogin,
    .kitLineItem {
        width: 100%;
    }

        .kitLineItem td:first-child {
            width: auto;
        }

        .kitLineItem td {
            display: block;
            text-align: center;
        }

    .respTable tr > th {
        display: none;
    }

    .respTable td {
        display: block;
        border: none;
        background: #fff;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .respTable tr {
        border: 1px solid #889ba5;
        background: #cbe4f9;
    }

    .respTable td::before {
        content: attr(data-th) ": ";
        display: inline-block;
        width: 110px;
        background: #cbe4f9;
        padding: 10px;
        border-right: 1px solid #889ba5;
        margin-right: 10px;
        white-space: normal;
    }

    table .columnTable input[type="text"],
    table .columnTable select,
    table .columnTable td select {
        width: 100%;
    }

    .categoryHeader textarea {
        width: 90%;
    }

    #packageValueDetails select {
        width: 100%;
    }

    #cartExtras {
        display: none;
    }
}

@media (max-width: 375px) {
    #navMobile a {
        font: bold 9pt CeraPRO;
    }

    #productImageStage,
    #kitImageStage,
    #manuImageStage {
        width: 280px;
    }

    .vote a.voteHelpful {
        margin: 5px 0 0;
    }

    span.right {
        /*float: none;*/
        display: block;
    }

    .featureImg img {
        max-width: 250px;
        height: auto;
    }

    #productMainImage,
    #kitMainImage {
        width: 250px;
        height: auto;
    }

    .columnTable tr > td:first-child {
        width: 100px;
    }

    .columnTable tr > td:nth-child(2) {
        width: 150px;
    }

    #accountLogin input {
        width: 100%;
        margin: 0;
    }

    .respTable td {
        max-width: 280px;
    }
}

/* END jbwMobile20150826CSS3.css */

/* BEGIN magnific-popup20150826.css */

.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.7;
    filter: alpha(opacity=80);
}

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden;
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .mfp-container:before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

.mfp-align-top .mfp-container:before {
    display: none;
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto;
}

.mfp-ajax-cur {
    cursor: progress;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
    cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
}

.mfp-loading.mfp-figure {
    display: none;
}

.mfp-hide {
    display: none !important;
}

.mfp-preloader {
    color: #ccc;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044;
}

    .mfp-preloader a {
        color: #ccc;
    }

        .mfp-preloader a:hover {
            color: #fff;
        }

.mfp-s-ready .mfp-preloader {
    display: none;
}

.mfp-s-error .mfp-content {
    display: none;
}

button.mfp-close,
button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    -webkit-box-shadow: none;
    box-shadow: none;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    filter: alpha(opacity=65);
    padding: 0 0 18px 10px;
    color: #fff;
    font-style: normal;
    font-size: 28px;
    font-family: "CeraPro", Baskerville, monospace;
}

    .mfp-close:hover,
    .mfp-close:focus {
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .mfp-close:active {
        top: 1px;
    }

.mfp-close-btn-in .mfp-close {
    color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #fff;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #ccc;
    font-size: 12px;
    line-height: 18px;
}

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    filter: alpha(opacity=65);
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

    .mfp-arrow:active {
        margin-top: -54px;
    }

    .mfp-arrow:hover,
    .mfp-arrow:focus {
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .mfp-arrow:before,
    .mfp-arrow:after,
    .mfp-arrow .mfp-b,
    .mfp-arrow .mfp-a {
        content: "";
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 35px;
        margin-left: 35px;
        border: medium inset transparent;
    }

    .mfp-arrow:after,
    .mfp-arrow .mfp-a {
        border-top-width: 13px;
        border-bottom-width: 13px;
        top: 8px;
    }

    .mfp-arrow:before,
    .mfp-arrow .mfp-b {
        border-top-width: 21px;
        border-bottom-width: 21px;
        opacity: 0.7;
    }

.mfp-arrow-left {
    left: 0;
}

    .mfp-arrow-left:after,
    .mfp-arrow-left .mfp-a {
        border-right: 17px solid #fff;
        margin-left: 31px;
    }

    .mfp-arrow-left:before,
    .mfp-arrow-left .mfp-b {
        margin-left: 25px;
        border-right: 27px solid #3f3f3f;
    }

.mfp-arrow-right {
    right: 0;
}

    .mfp-arrow-right:after,
    .mfp-arrow-right .mfp-a {
        border-left: 17px solid #fff;
        margin-left: 39px;
    }

    .mfp-arrow-right:before,
    .mfp-arrow-right .mfp-b {
        border-left: 27px solid #3f3f3f;
    }

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px;
}

    .mfp-iframe-holder .mfp-content {
        line-height: 0;
        width: 100%;
        max-width: 1100px;
    }

    .mfp-iframe-holder .mfp-close {
        top: -40px;
    }

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}

    .mfp-iframe-scaler iframe {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
        background: #000;
    }

img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 0;
    margin: 0 auto;
}

.mfp-figure {
    line-height: 0;
}

    .mfp-figure:after {
        content: "";
        position: absolute;
        left: 0;
        top: 40px;
        bottom: 40px;
        display: block;
        right: 0;
        width: auto;
        height: auto;
        z-index: -1;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
        background: #444;
    }

    .mfp-figure small {
        color: #bdbdbd;
        display: block;
        font-size: 12px;
        line-height: 14px;
    }

    .mfp-figure figure {
        margin: 0;
    }

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto;
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #f3f3f3;
    word-wrap: break-word;
    padding-right: 36px;
}

.mfp-image-holder .mfp-content {
    max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0;
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0;
    }

    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0;
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px;
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

        .mfp-img-mobile .mfp-bottom-bar:empty {
            padding: 0;
        }

    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px;
    }

    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0;
    }
}

@media all and (max-width: 1100px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }

    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0;
    }

    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%;
    }

    .mfp-container {
        padding-left: 6px;
        padding-right: 6px;
    }
}

.mfp-ie7 .mfp-img {
    padding: 0;
}

.mfp-ie7 .mfp-bottom-bar {
    width: 600px;
    left: 50%;
    margin-left: -300px;
    margin-top: 5px;
    padding-bottom: 5px;
}

.mfp-ie7 .mfp-container {
    padding: 0;
}

.mfp-ie7 .mfp-content {
    padding-top: 44px;
}

.mfp-ie7 .mfp-close {
    top: 0;
    right: 0;
    padding-top: 0;
}

.white-popup {
    position: relative;
    background: #fff;
    padding: 20px 40px 20px 20px;
    width: auto;
    max-width: 1100px;
    border-radius: 4px;
    margin: 20px auto;
}
.bottom-popup {
    position: fixed;
    bottom: 0;
    width: 95%;
    background: white;
    color: #555;
    border: 2px solid #519548;
    border-radius: 4px;
    padding: 4px 4px 4px 4px;
    margin: 10px;
    font-size: 14px;
}
/* END magnific-popup20150826.css */


/* BEGIN sandbox */
.sandboxHighlight {
    border: 2px solid #388CAF;
    border-radius: 4px;
}
.sandboxImageNoHighlight {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.sandboxProdList img {
    float: left;
    padding: 5px 5px 5px 0;
}

.sandboxProdList li {
    padding: 10px 0 0 0;
    display: flex;
}

.sandboxProdListHide {
    visibility: hidden;
    display: none;
}

.sandboxProdBar {
    float: left;
    width: 240px;
    margin-right: 10px;
    max-height: 650px;
    overflow-y: auto;
}

@media (max-width: 1024px) {
    .sandboxProdBar {
        float: none;
        width: 450px;
        margin: 0 0 15px 0;
        display: block;
        height: 150px;
        overflow-y: auto;
    }
}

.sandboxTagName {
    width: 100%;
    overflow: hidden;
}

.sandboxName {
    outline: none;
    border: 1px solid #b6b6ab;
    border-radius: 4px;
    width: 175px;
    color: #555;
    padding: 3px;
}

.sandboxName:focus {
    background: #fff;
    font-style: normal;
}

.sandboxSaveNameBtn {
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: 6px;
}

.sandboxImageGrayscale {
    filter: grayscale(100%);
}

.sandboxCheck {
    padding-left: 10px;
    padding-bottom: 5px;
}
/* END sandbox */