﻿
/*********** CSS RESET **********/
* {
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
}

    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

html {
    margin: 0 !important;
    -webkit-text-size-adjust: none;
    -ms-overflow-style: scrollbar;
}

ol, ul {
    list-style: none;
}

a img {
    border: none;
}

a:active {
    outline: none;
}

input[type="checkbox"], input[type="radio"] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 0 4px 4px;
}

input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    margin: 0;
    border: 0;
    padding: 0;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="text"],
input[type="password"],
textarea {
    border-radius: 0;
}

input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-appearance: none;
}

input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px #fff;
}

script {
    display: none !important;
}

body {
    padding: 0;
    margin: 0;
    font-size: 16px;
    color: #58595b;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    line-height: 1.5;
    overflow-x: hidden;
}


/*Typography*/
h1, h2, h3, h4, h5 {
    font-family: Lobster, sans-serif;
    line-height: 1.3;
    padding: 0;
    margin: 5px 0 10px;
    color: #56585b;
    font-weight: 400;
}

.block h3 a {
    font-family: Lobster, sans-serif !important;
}

h1 {
    font-size: 300%;
}

h2 {
    font-size: 220%;
}

h3 {
    font-size: 180%;
}

h4, h5 {
    font-size: 120%;
}

h2.large-font {
    font-size: 300%;
}

h3.large-font {
    font-size: 250%;
}

p {
    padding: 0;
    margin: 0 0 10px;
    font-size: 100%;
}

a {
    color: inherit;
    cursor: pointer;
}

    a img {
        opacity: 0.99; /*firefox scale bug fix*/
    }

img {
    max-width: 100%;
}

/*Global Styles*/
.text-center, .page.not-found-page {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.inline-block {
    display: inline-block;
}

.clear {
    clear: both;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.paddingtop50 {
    padding-top: 50px;
}

.bordertop-grey {
    border-top: 1px solid #ccc;
}

.uppercase {
    text-transform: uppercase;
}

.section {
    padding: 0 0 10px;
}

table.data-table {
    width: 100%;
}

    table.data-table th, table.data-table td {
        border: 1px solid #e0e0e0;
        padding: 10px;
    }

    table.data-table td {
        font-size: 90%;
    }

    table.data-table th {
        background: #f2f2f2;
        font-weight: normal;
    }

.newsletter-result, .required, .field-validation-error, .result, .message-error, .message-failure {
    color: #e2820a;
}

.newsletter-result, .field-validation-error, .message-error, .message-failure, .message-success {
    font-size: 90%;
}

.font-CG {
    font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
    font-size: 120%;
}

.blue-text {
    color: #00acc8;
}

.orange-text {
    color: #f89828;
}

input[type="text"], input[type="password"], select, textarea, input[type="file"], .form-control {
    box-shadow: 1px 1px 4px 0px #e0e0e0 inset;
    background: #f8f9f8;
    line-height: 24px;
    padding: 5px 10px;
    margin-right: 2px;
    border: 1px solid #d0d0d0;
    border-radius: 0;
}

input[type="file"] {
    padding: 0;
}

.ghost-button {
    display: inline-block;
    text-transform: uppercase;
    width: 180px;
    padding: 6px 0;
    border: 1px solid #58595b;
}

    .ghost-button:hover {
        background: #e58f24;
        border-color: #e58f24;
        color: #fff;
        text-decoration: none;
    }

.btn-orange {
    font: bold 90% 'Century Gothic', Arial, Helvetica, sans-serif;
    color: #fff;
    display: inline-block;
    width: 218px;
    line-height: 39px;
    height: 39px;
    text-align: center;
    background-image: url("../images/btn-orange.jpg");
    background-position: center top;
}

    .btn-orange:hover {
        background-position: center bottom;
        text-decoration: none;
        color: #fff;
    }

.button-1 {
    color: #fff;
    background: #00acc8;
    display: inline-block;
    padding: 10px 20px;
    text-transform: uppercase;
    border: 0;
    font: bold 95% 'Century Gothic', Arial, Helvetica, sans-serif;
}

    .button-1:hover {
        text-decoration: none;
        background-color: #e58f24;
        color: #fff !important;
    }

.button-2 {
    display: inline-block;
    background: transparent;
    padding: 9px 20px;
    border: 1px solid #999;
    font: normal 95% 'Century Gothic', Arial, Helvetica, sans-serif;
}

    .button-2:hover {
        background: #e58f24;
        border-color: #e58f24;
        color: #fff;
        text-decoration: none;
    }

/*Header*/
.admin-header-links {
    background: #eee;
    margin: 3px 0;
}

.header {
    color: #61646c;
    font-family: 'Century Gothic', Helvetica, sans-serif;
    padding: 10px 0;
}

.header-contact {
    margin-bottom: 10px;
}

    .header-contact p {
        margin-bottom: 0;
        font-size: 13px;
        font-weight: bold;
        font-family: 'Century Gothic', Helvetica, sans-serif;
        color: #8f9090;
        line-height: 1.45;
    }

    .header-contact .phone {
        padding-top: 5px;
        padding-left: 25px;
        background-image: url('../images/sprite.png');
        background-repeat: no-repeat;
        background-position: -66px 2px;
    }

    .header-contact .email {
        padding-left: 28px;
        background-image: url('../images/sprite.png');
        background-repeat: no-repeat;
        background-position: -46px -28px;
    }

.header-links-wrapper {
    margin-top: 15px;
    font-size: 15px;
}

    .header-links-wrapper .f-right:not(.first), .header-links li {
        padding-left: 16px;
    }

.header-links li {
    float: right;
}

.header-links::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.header-links-wrapper .first {
    position: relative;
}

.header-social table {
    float: right;
}

    .header-social table td {
        padding: 0 10px 5px;
        text-align: center;
    }

.footer .social-icon {
    width: 33px;
    height: 33px;
    display: inline-block;
    text-decoration: none;
    background: url('../images/social_icons.png');
}

    .footer .social-icon#facebook {
        background-position: -1px -1px;
    }

        .footer .social-icon#facebook:hover {
            background-position: -1px -46px;
        }

    .footer .social-icon#instagram {
        background-position: -37px -1px;
    }

        .footer .social-icon#instagram:hover {
            background-position: -37px -46px;
        }

    .footer .social-icon#twitter {
        background-position: -74px -1px;
    }

        .footer .social-icon#twitter:hover {
            background-position: -74px -46px;
        }

    .footer .social-icon#google {
        background-position: -110px -1px;
    }

        .footer .social-icon#google:hover {
            background-position: -110px -46px;
        }

    .footer .social-icon#youtube {
        background-position: -147px -1px;
    }

        .footer .social-icon#youtube:hover {
            background-position: -147px -46px;
        }

    .footer .social-icon#share {
        background-position: -228px -1px;
    }

        .footer .social-icon#share:hover {
            background-position: -228px -46px;
        }

        .footer .social-icon#share > span {
            display: none;
        }

#topcartlink {
    padding-right: 30px;
    background-image: url('../images/sprite.png');
    background-repeat: no-repeat;
    background-position: 130px -51px;
}

.header-links-wrapper .dropdown {
    padding-right: 20px;
    background-image: url('../images/dropdown_icon.png');
    background-repeat: no-repeat;
    background-position: right center;
}

.flyout-cart, .header-links-wrapper .dropdown-menu {
    box-shadow: 0 0 2px rgba(0,0,0,0.25);
    background-color: #e9e9e9;
    border: 0 !important;
    border-radius: 0 !important;
}

.flyout-cart {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 100;
    width: 300px;
    padding: 15px;
    font-size: 90%;
    text-align: left;
}

    .flyout-cart.active {
        display: block;
    }

.mini-shopping-cart .items {
    border-top: 1px solid #d0d0d0;
}

.mini-shopping-cart .item {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #d0d0d0;
    padding: 10px 0;
    font-size: 90%;
}

.mini-shopping-cart .totals {
    border-top: 1px solid #f0f0f0;
    padding: 10px 0 20px;
    text-transform: uppercase;
    font-weight: bold;
}


/*Top Menu*/

.header-menu {
    background: #dce0e1;
    background: -webkit-linear-gradient(90deg, #ababab, #dce0e1, #ababab);
    background: -o-linear-gradient(90deg, #ababab, #dce0e1, #ababab);
    background: -moz-linear-gradient(90deg, #ababab, #dce0e1, #ababab);
    background: linear-gradient(90deg, #ababab, #dce0e1, #ababab);
}

.top-menu .sublist {
    list-style: none;
}

@media all and (max-width: 1024px) {
    .header-menu {
        position: relative;
        z-index: 1;
        margin: 0 auto;
    }

        .header-menu > .container, .account-pages > .container {
            width: 100%;
            padding: 0;
        }

    .menu-toggle {
        padding: 0;
        font-size: 15px;
        text-transform: uppercase;
        cursor: pointer;
    }

        .menu-toggle > img {
            margin-right: 10px;
        }

    .header-menu a {
        color: #61646c;
        font-family: 'Century Gothic', Helvetica, sans-serif;
        text-transform: uppercase;
    }

        .header-menu a:hover {
            text-decoration: none;
        }

    .top-menu, .search-box, .header-links-wrapper {
        display: none;
    }

        .search-box .uppercase {
            display: none;
        }

    .search-column {
        background: #3EBBD0;
        padding: 15px 18px;
        width: 100%;
    }

    .search-box input {
        border: none;
        background: none;
    }

    .search-column input[type="submit"] {
        text-indent: -9999px;
        width: 35px;
        background-image: url("../images/sprite.png");
        background-repeat: no-repeat;
        background-position: 12px 2px;
        float: right;
    }

    .search-column > input[type="text"] {
        padding: 0;
        line-height: 20px;
        width: 85%;
        color: #fff;
        box-shadow: none !important;
    }

    .search-column input[type="text"]::-webkit-input-placeholder {
        color: #fff;
    }

    .search-column input[type="text"]:-moz-placeholder { /* Firefox 18- */
        color: #fff;
    }

    .search-column input[type="text"]::-moz-placeholder { /* Firefox 19+ */
        color: #fff;
    }

    .search-column input[type="text"]:-ms-input-placeholder {
        color: #fff;
    }

    .search-box.pull-right {
        float: none !important;
    }

    .top-menu > li {
        position: relative;
        border-bottom: 1px solid #fff;
        background-color: #dce0e1;
        display: block !important;
        float: none !important;
    }

    .top-menu .header-links ul > li, .top-menu li.orange {
        position: relative;
        border-bottom: 1px solid #239FB3;
        background-color: #048094;
        display: block !important;
        float: none !important;
    }

        .top-menu .header-links ul > li > a, .top-menu li.orange .dropdown > a {
            color: #fff;
        }

    .top-menu .header-links ul #topcartlink {
        background-image: none;
    }

    .top-menu .header-links ul > li {
        padding-left: 0;
        padding-right: 0;
    }

        .top-menu > li > a, .top-menu > li > .sublist > a, .top-menu .header-links ul > li > a, .top-menu.mobile .orange > .dropdown {
            display: block;
            min-height: 50px;
            padding: 15px 18px;
            font-size: 15px;
            text-transform: uppercase;
            text-decoration: none !important;
        }

            .top-menu.mobile .orange > .dropdown a {
                display: block;
            }

    .top-menu .sublist {
        background-color: #fff;
        padding: 5px 0;
        list-style: none;
        display: none;
    }

        .top-menu .sublist li {
            position: relative;
            margin: 1px 0 1px 20px;
        }

            .top-menu .sublist li a {
                display: block;
                padding: 15px 18px;
                font-size: 15px;
            }

        .top-menu .sublist > li > a {
            display: block;
            padding: 15px 36px;
            font-size: 15px;
        }

        .top-menu .sublist a:hover {
            color: #e58f24;
            text-decoration: none;
        }

    .sublist-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 55px;
        height: 50px;
        border-left: 1px solid #fff;
        background: url('../images/toggle-black.png') center no-repeat;
        padding: 15px;
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        text-transform: uppercase;
        cursor: pointer;
    }

    .sublist .sublist-toggle {
        height: 44px;
    }

    .sublist .sublist li {
        background-color: #f6f6f6;
    }

    .sublist .sublist .sublist li {
        background-color: #fff;
    }

    .top-menu.mobile .dropdown-menu {
        border-radius: 0;
        width: 100%;
        margin-top: 0;
    }

        .top-menu.mobile .dropdown-menu a {
            padding: 6px 18px;
        }
}

@media all and (min-width: 1025px) {
    .header-menu {
        position: relative;
        z-index: 5;
        padding: 0;
    }

    .menu-toggle {
        padding-left: 20px;
    }

    .menu-toggle,
    .sublist-toggle {
        display: none;
    }

    .search-box {
        display: block !important;
        float: right;
        margin: 10px 0;
        min-width: 257px;
    }

        .search-box input {
            border: none;
            background: none;
        }

    .search-column {
        background: #fff;
        box-shadow: 1px 1px 5px 0px #999 inset;
        margin-left: 5px;
        padding: 0;
        display: inline-block;
    }

    .search-box .uppercase {
        line-height: 32px;
    }

    .search-column input[type="submit"] {
        text-indent: -9999px;
        width: 25px;
        background-image: url("../images/sprite.png");
        background-repeat: no-repeat;
        background-position: -1px 2px;
    }

    .search-column input[type="text"] {
        padding: 0 2px 0 10px;
        line-height: 30px;
        height: 30px;
        font-size: 95%;
        width: 160px;
        box-shadow: none !important;
    }

    .header-menu > .container > ul {
        display: block !important; /* prevents toggle display:none on resize */
        font-size: 0;
        margin: 0;
    }

        .header-menu > .container > ul.mobile {
            display: none !important;
        }

        .header-menu > .container > ul > li {
            display: inline-block;
            padding: 16px 0;
            vertical-align: middle;
            margin: 0;
        }

            .header-menu > .container > ul > li > a {
                border-right: 1px solid #61646b;
            }

            .header-menu > .container > ul > li.first, .header-menu > .container > ul > li.first > a {
                margin: 0;
                border: 0;
                padding: 0;
            }

            .header-menu > .container > ul > li:last-child > a {
                border-right: none;
            }

    .header-menu a {
        color: #61646c;
        font-family: 'Century Gothic', Helvetica, sans-serif;
        text-transform: uppercase;
    }

    .header-menu > .container > ul > li > a {
        display: block;
        padding: 0 17px;
        line-height: 20px;
        font-size: 15px; /*reset zeroing*/
        cursor: pointer;
    }

        .header-menu > .container > ul > li > a:hover, .header-menu > .container > ul > li > a:focus, .header-menu > .container > ul > li > a:active {
            color: #00acc8;
            text-decoration: none;
        }

    .header-menu .sublist {
        display: none;
        position: absolute;
        width: auto;
        min-width: 160px;
        background-color: #fff;
        padding: 10px 0;
        text-align: left;
    }

        .header-menu .sublist li {
            position: relative;
        }

            .header-menu .sublist li a {
                display: block;
                position: relative;
                padding: 10px 20px 10px 30px;
                font-size: 14px;
            }

            .header-menu .sublist li:hover > a {
                background-color: #f6f6f6;
            }

    .top-menu .sublist a:hover {
        color: #e58f24;
        text-decoration: none;
    }

    .header-menu ul li:hover > .sublist {
        display: block;
    }

    .header-menu .sublist .sublist {
        top: -10px;
        left: 100% !important;
    }
}

.top-menu:not(.mobile) .sublist {
    background-color: #fff;
    border: 0 !important;
    border-radius: 0 !important;
    top: 52px;
    margin: 0;
    box-shadow: 0 1px 4px -2px gray;
    -webkit-box-shadow: 0 1px 4px -2px gray;
}

    .top-menu:not(.mobile) .sublist li a {
        padding: 10px 25px;
    }

.top-menu:not(.mobile) li.has-sublist:hover {
    background-image: url('../images/dropdown-menu-open.png');
    background-position: center bottom;
    background-repeat: no-repeat;
}

/*.top-menu li.full-width {
    position: static;
}*/

.top-menu li.full-width .sublist {
    width: 100% !important;
    left: 0;
    right: 0;
}

.top-menu li.full-width .sublist {
    font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 24px;
}

.top-menu .menu-steps {
    margin: 20px 0;
    line-height: 30px;
}

.top-menu li.full-width .sublist p {
    margin: 0;
}

.top-menu li.full-width .sublist strong a {
    color: #e58f24;
}

.top-menu li.full-width .sublist a > b {
    color: #61646c;
}

.top-menu li.full-width .sublist a:hover {
    color: #000;
}

.top-menu li.full-width .sublist img {
    max-height: 200px;
}

@media only screen and (max-width: 500px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 500px), only screen and ( min--moz-device-pixel-ratio: 2) and (max-width: 500px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 999px), only screen and ( min-device-pixel-ratio: 2) and (max-width: 999px), only screen and ( min-resolution: 192dpi) and (max-width: 999px), only screen and ( min-resolution: 2dppx) and (max-width: 500px) {
    .header {
        position: relative;
    }

        .header .col-xs-15 img {
            vertical-align: bottom;
        }

        .header .col-xs-8 img {
            min-width: 135px;
            z-index: 2;
        }

        .header .header-contact {
            margin-bottom: 20px;
        }
}


/*Footer*/
.footer-lower {
    background: #00acc8;
    color: #fff;
    font-size: 85%;
    padding: 20px 0;
}

.footer-upper {
    padding: 40px 0 20px;
}

.footer-block .title, .footer-block .title-link a {
    color: #00acc8;
    font-size: 19px;
    margin: 6px 0;
    display: block;
}

.footer-logo {
    height: 70px;
    margin-bottom: 0;
    background-image: url('../images/sprite.png');
    background-repeat: no-repeat;
    background-position: 0 -150px;
}

.footer-block .phone {
    padding-left: 30px;
    background-image: url('../images/sprite.png');
    background-repeat: no-repeat;
    background-position: -124px -228px;
    margin: 0 0 5px 5px;
}

.footer-block .email {
    padding-left: 30px;
    background-image: url('../images/sprite.png');
    background-repeat: no-repeat;
    background-position: 0px -261px;
    margin: 0 0 5px 5px;
}

@media (min-width: 768px) {
    .footer-block {
        margin-bottom: 10px;
    }

        .footer-block ul.list, .block .listbox {
            display: block !important;
            margin-bottom: 15px;
        }

        .footer-block .list a:hover {
            color: #fff;
        }
}

@media (max-width: 767px) {
    .block {
        padding: 40px 0;
    }

    .footer-upper {
        width: 95%;
        margin: auto;
        border-bottom: 1px solid #ddd;
        overflow: hidden;
        padding: 40px 0;
        font-size: 0;
    }

    .footer-logo {
        margin-top: 20px;
    }

    .footer-block {
        width: 95%;
        margin: 1px auto;
        text-align: left;
        font-size: 14px; /*reset zeroing*/
    }

        .footer-block .title {
            margin: 0 0 1px;
            background: #048094 url('../images/toggle-white.png') right center no-repeat;
            padding: 10px 15px;
            font-size: 15px;
            color: #fff;
            cursor: pointer;
        }

            .footer-block .title strong {
                font-weight: normal;
            }

        .footer-block .title-link a {
            margin: 0 0 1px;
            background: #3EBBD0;
            padding: 10px 15px;
            font-size: 15px;
            color: #fff;
            display: block;
            cursor: pointer;
        }

        .footer-block .list {
            display: none;
            margin: 0;
            background-color: #dee0e1;
            padding: 10px 15px;
        }

            .footer-block .list a, .footer-block .list {
                display: block;
                line-height: 20px;
                color: #0689a4;
            }
}

/*Homepage*/
.theme-custom {
    margin: 0 !important;
    max-width: 100% !important;
}

    .theme-custom .nivo-controlNav a {
        border-radius: 15px;
    }

@media (max-width: 768px) {
    .theme-custom .nivo-controlNav a {
        height: 8px !important;
        width: 8px !important;
        margin: 0 3px !important;
    }
}

#banner-section {
    position: relative;
}

    #banner-section > #banner-products {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

        #banner-section > #banner-products h1 {
            text-transform: uppercase;
            color: #56585b;
            font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
            font-weight: normal;
            font-size: 150%;
            line-height: 1.2;
        }

            #banner-section > #banner-products h1 span {
                display: block;
                font-size: 240%;
                font-family: Lobster, sans-serif;
                text-transform: lowercase;
            }

.home-section-1 {
    padding: 50px 0 0;
}

#home-login, #home-community, #home-stockists {
    margin-bottom: 30px !important;
}

.home-section-1 h2 {
    font-size: 250%;
}

.home-section-1 a, .home-section-2 a {
    display: inline-block;
    text-transform: uppercase;
    width: 180px;
    padding: 6px 0;
    border: 1px solid #58595b;
}

    .home-section-1 a:hover, .home-section-2 a:hover {
        background: #e58f24;
        border-color: #e58f24;
        color: #fff;
        text-decoration: none;
    }

.home-section-2 {
    padding: 30px 0;
}

    .home-section-2 table {
        width: 100%;
    }

        .home-section-2 table td {
            vertical-align: top;
            position: relative;
        }

        .home-section-2 table .offer {
            background: #e5f7f9;
        }

            .home-section-2 table .offer > div {
                padding: 50px 20px;
                position: absolute;
                bottom: 0;
                top: 0;
                left: 15px;
                right: 15px;
            }

    .home-section-2 h2 {
        font-size: 250%;
    }

#customer-review {
    background-image: url("../images/home-customer-review_bg.jpg");
    background-size: cover;
    background-position: left top;
    font-family: "Century Gothic", Arial, Helvetica, sans-serif;
    font-size: 120%;
    padding: 8% 0 16%;
    margin-bottom: 30px;
}

    #customer-review h2, #customer-review p {
        color: #fff;
    }

    #customer-review a {
        color: #fff;
        border: 1px solid #fff;
        font-size: 15px;
        margin-top: 35px;
    }

#news-block {
    background-image: url("../images/home-news_bg.jpg");
    background-size: cover;
    background-position: right top;
    padding: 8%;
}

#blog-block {
    background-image: url("../images/home-blog_bg.jpg");
    background-size: cover;
    background-position: center;
    padding: 8%;
}

.home-block-wrapper {
    background: rgba(255, 255, 255, 0.8);
    padding: 25px;
}

.home-newsletter {
    background-color: #fdf9f2;
    background-image: url("../images/newsletter-box_bg_us.png");
    background-position: right bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 30px 0;
}

    .home-newsletter h2 {
        font-weight: normal;
        font-size: 280%;
        line-height: 1.2;
        color: #5b5d60;
        margin: 30px 0;
    }

    .home-newsletter .newsletter {
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 1px 1px 5px 0px #ccc inset;
    }

    .home-newsletter .title, .home-newsletter #newsletter-email {
        margin-bottom: 15px;
    }

    .home-newsletter #newsletter-email {
        width: 100%;
        text-align: center;
        background: #fff;
        padding: 12px 10px 10px;
        font-size: 15px;
    }

        .home-newsletter #newsletter-email::-webkit-input-placeholder {
            color: #56585b;
            text-transform: uppercase;
            font-size: 15px;
        }

        .home-newsletter #newsletter-email:-moz-placeholder { /* Firefox 18- */
            color: #56585b;
            text-transform: uppercase;
            font-size: 15px;
        }

        .home-newsletter #newsletter-email::-moz-placeholder { /* Firefox 19+ */
            color: #56585b;
            text-transform: uppercase;
            font-size: 15px;
        }

        .home-newsletter #newsletter-email:-ms-input-placeholder {
            color: #56585b;
            text-transform: uppercase;
            font-size: 15px;
        }

#newsletter-subscribe-button {
    font-size: 80%;
    padding: 3px 10px;
    border: 1px solid #00acc8;
    background: #00acc8;
    color: #fff;
}

    #newsletter-subscribe-button:hover {
        background-color: #e58f24;
        border-color: #e58f24;
    }

.home-section-4, .blue-bg {
    background-color: #dcf8fc;
    padding: 20px 0 30px;
}

    .home-section-4 h2, .home-section-5 h2 {
        color: #5b5d60;
        margin: 20px 0;
    }

    .home-section-4 h4, .home-section-5 h4 {
        font-size: 110%;
        font-family: Arial, Helvetica, sans-serif;
        color: #64676f;
        font-weight: normal;
    }

    .home-section-4 .step {
        margin: 25px 0 50px;
        padding: 10px 20px 0;
        background: #fff;
        color: #231f20;
    }

        .home-section-4 .step .number {
            display: inline-block;
            padding: 3px 10px;
            background: #00acc8;
            color: #fff;
            font-size: 80%;
            position: relative;
            top: -20px;
        }

        .home-section-4 .step h3 {
            color: #61646c;
            font-size: 145%;
            font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
        }

        .home-section-4 .step a {
            color: #fff;
            background: #00acc8;
            display: inline-block;
            padding: 8px 20px;
            text-transform: uppercase;
            position: relative;
            bottom: -18px;
        }

            .home-section-4 .step a:hover {
                text-decoration: none;
                background-color: #e58f24;
            }

.home-section-5 {
    padding: 30px 0;
}

.home-section-6 {
    color: #fff;
    background-image: url('../images/home-video-bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    font-size: 110%;
    min-height: 450px;
}

    .home-section-6 h2 {
        color: #fff;
    }

    .home-section-6 a.button {
        text-indent: -9999px;
        display: inline-block;
        width: 101px;
        height: 72px;
        background-color: transparent;
        background-image: url('../images/home-video-btn.png');
        background-position: top;
        margin: 5% 0 3%;
    }

        .home-section-6 a.button:hover {
            text-decoration: none;
            background-position: bottom;
            color: #fff;
        }

    .home-section-6 a:not(.button):hover {
        text-decoration: underline;
        color: #fff;
    }

#video-bpopup {
    width: 92%;
    max-width: 800px;
}

    #video-bpopup .content {
        float: none;
        clear: both;
        width: 100%;
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        height: 0;
    }

        #video-bpopup .content iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

.popup-container {
    position: relative;
}

span.b-close {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url("../images/sprite.png");
    background-position: -65px -109px;
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    cursor: pointer;
}

    span.b-close:hover {
        background-position: -65px -84px;
    }

.mfp-close {
    width: 25px !important;
    height: 25px !important;
    background-image: url("../images/sprite.png") !important;
    background-position: -65px -109px !important;
    opacity: 1.0 !important;
    text-indent: 9999px;
    right: -5px !important;
    top: -5px !important;
}

    .mfp-close:hover {
        background-position: -65px -84px !important;
    }

.mfp-content .slide {
    position: relative !important;
    display: inline-block !important;
}

.home-section-7 {
    padding: 30px 0 50px;
}

    .home-section-4 h2, .home-section-5 h2, .home-section-6 h2, .home-section-7 h2, .key-media h2 {
        font-size: 300%;
    }

    .home-section-7 img {
        margin: 25px 0;
        max-width: 100%;
    }

    .home-section-7 .wrapper {
        height: 210px;
    }

    .home-section-7 button {
        text-indent: -9999px;
        width: 150px;
        height: 193px;
        background-image: url('../images/home-features-icons.png');
        background-color: transparent;
        border: 0;
        margin: 20px 0 0;
    }

        .home-section-7 button:hover {
            background-image: url('../images/home-features-icons-hover.png');
        }

    .home-section-7 #vitamin {
        background-position: -37px -14px;
    }

    .home-section-7 #vegan {
        background-position: -37px -221px;
    }

    .home-section-7 #skin {
        background-position: -37px -429px;
    }

    .home-section-7 #oil {
        background-position: -254px -14px;
    }

    .home-section-7 #natural {
        background-position: -254px -221px;
    }

    .home-section-7 #fragrance {
        background-position: -254px -429px;
    }

    .home-section-7 #balance {
        background-position: -471px -14px;
    }

    .home-section-7 #reduction {
        background-position: -471px -221px;
    }

    .home-section-7 #animals {
        background-position: -471px -429px;
    }

    .home-section-7 #types {
        background-position: -688px -14px;
    }

    .home-section-7 #benzoyl {
        background-position: -688px -221px;
    }

    .home-section-7 #potent {
        background-position: -688px -429px;
    }

/*Account*/
.account-pages:after, .content-pages:after, .section-shadow:after, .contact-page:after, .shopping-cart-page:after, .checkout-page:after, .topic-page:after, .news-item-page:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    right: 0;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 15px 3px #999;
    -moz-box-shadow: 0px 0px 15px 3px #999;
    box-shadow: 0px 0px 15px 3px #999;
}

.account-pages, .shopping-cart-page, .checkout-page, .topic-page, .news-item-page {
    background-image: url("../images/home-features_bg.jpg");
    background-size: cover;
}

    .account-pages .container .main, .shopping-cart-page .container .main, .checkout-page .container .main, .topic-page .container .main, .news-item-page .container .main {
        padding: 60px 0;
        background: rgba(255, 255, 255, 0.8);
        min-height: 500px;
    }

    .account-pages .main .main-wrapper, .shopping-cart-page .main .main-wrapper, .checkout-page .main .main-wrapper, .topic-page .main .main-wrapper, .news-item-page .main .main-wrapper {
        max-width: 1200px;
        padding: 0 15px;
        margin: 0 auto;
    }

    .account-pages .fieldset .title, .account-pages .section .title, .account-pages .current-balance {
        text-transform: uppercase;
        margin: 30px 0 10px;
    }

    .account-pages .fieldset .form-fields, .account-pages .section .info, .edit-address, .news-item-page .form-fields, .news-item-page .comments {
        border: 1px solid #e5e5e5;
        padding: 20px;
        margin-bottom: 20px;
    }

    .account-pages .fieldset .inputs > label {
        color: #888;
    }

    .account-pages .fieldset input[type="text"], .account-pages .fieldset input[type="password"], .account-pages .fieldset select, .news-item-page input[type="text"], .news-item-page textarea {
        width: 100%;
    }

    .account-pages .date-of-birth select {
        width: auto;
    }

    .account-pages .current-balance, .login-page a {
        color: #FF8814;
    }

.edit-address label {
    font-size: 90%;
    min-width: 150px;
}

.edit-address .inputs {
    margin-bottom: 10px;
}

.login-page .form-fields {
    min-height: 300px;
    max-width: 450px;
}

.login-page .text {
    margin-bottom: 20px;
}

.news-item-page h3 {
    margin-top: 30px;
}

.news-item-page .comment-content {
    padding: 10px 0;
}

/*SideBar*/
.block a {
    font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
}

    .block a:hover, .block a.active {
        color: #00acc8;
        text-decoration: none;
    }

.block ul li {
    margin: 5px 0 0;
}

.block {
    padding: 70px 0;
}

.side-2 .block {
    padding: 0;
}

/*New Footer*/
.footer-lower {
    background: #fff;
    color: #61646c;
}

.footer-upper {
    color: rgba(255, 255, 255, 0.85);
    background: #028FA7;
    font-size: 14px;
    line-height: 1.5;
}

    .footer-upper li {
        margin: 3px 0;
    }

.footer-block .title, .footer-block .title-link a {
    color: #fff;
    font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    text-shadow: 0 0 2px #0689a4;
    font-size: 18px;
}

.footer-disclaimer {
    padding-top: 15px;
}

.footer-logo {
    height: 80px;
}

.key-media {
    padding: 30px 0;
}

    .key-media img {
        padding-bottom: 15px;
    }

.productreviewwidget {
    max-width: 800px;
    margin: 10px auto;
}

/*Content Page*/
.home-section-7, .sky-bg {
    background-image: url("../images/home-features_bg.jpg");
    background-size: cover;
}

.white {
    background: #fff;
}

.beige {
    background: #fde7cb; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(#fef8f0, #fde7cb); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(#fef8f0, #fde7cb); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(#fef8f0, #fde7cb); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#fef8f0, #fde7cb); /* Standard syntax */
}

.home-section-1, .grey {
    background: url("../images/home-section-1_bg.png"), #dce0e1;
    background: url("../images/home-section-1_bg.png"), -webkit-linear-gradient(90deg, #dee0e1, #f4f5f5, #dee0e1);
    background: url("../images/home-section-1_bg.png"), -o-linear-gradient(90deg, #dee0e1, #f4f5f5, #dee0e1);
    background: url("../images/home-section-1_bg.png"), -moz-linear-gradient(90deg, #dee0e1, #f4f5f5, #dee0e1);
    background: url("../images/home-section-1_bg.png"), linear-gradient(90deg, #dee0e1, #f4f5f5, #dee0e1);
    background-repeat: no-repeat;
    background-position: center;
}

#health-approval {
    display: inline-block;
    width: 111px;
    height: 111px;
    background-image: url('../images/difference/health-approval.png');
    background-position: center top;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    font-size: 0;
}

#fight-inside-out {
    display: inline-block;
    width: 111px;
    height: 111px;
    background-image: url('../images/difference/fight-inside-out.png');
    background-position: center top;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    font-size: 0;
}

#active-powerful-ingredients {
    display: inline-block;
    width: 111px;
    height: 111px;
    background-image: url('../images/difference/active-powerful-ingredients.png');
    background-position: center top;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    font-size: 0;
}

#natural-formulation {
    display: inline-block;
    width: 111px;
    height: 111px;
    background-image: url('../images/difference/natural-formulation.png');
    background-position: center top;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    font-size: 0;
}

#quality {
    display: inline-block;
    width: 111px;
    height: 111px;
    background-image: url('../images/difference/quality.png');
    background-position: center top;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    font-size: 0;
}

    #health-approval:hover, #fight-inside-out:hover, #active-powerful-ingredients:hover, #natural-formulation:hover, #quality:hover {
        background-position: center bottom;
        cursor: pointer;
    }

.how-to-choose-product-table {
    table-layout: fixed;
    width: 100%;
}

    .how-to-choose-product-table td {
        vertical-align: bottom;
        color: #000;
        font-size: 90%;
    }

.how-to-choose-details-table {
    width: 100%;
    background: #fff;
}

    .how-to-choose-details-table td.title-col {
        background: #00b5cc;
    }

    .how-to-choose-details-table td.syndrome {
        background: #f89828;
        color: #000;
        min-width: 165px !important;
    }

    .how-to-choose-details-table td.text-left {
        vertical-align: middle;
    }

    .how-to-choose-details-table td.options {
        background: #99e1eb;
        vertical-align: bottom;
        color: #000;
        font-size: 85%;
        width: 65px;
    }

    .how-to-choose-details-table td {
        padding: 10px 8px;
    }

        .how-to-choose-details-table td.title-col h2 {
            font: normal 250% 'Century Gothic', Arial, Helvetica, sans-serif;
            color: #fff;
            margin-bottom: 0;
        }

    .how-to-choose-details-table tr td {
        border: 1px solid #99e1eb;
    }

    .how-to-choose-details-table .visible-xs {
        color: #f89828;
        font-weight: bold;
        font: bold 90% 'Century Gothic', Arial, Helvetica, sans-serif;
    }

.how-to-use-steps {
    padding: 100px 0;
}

    .how-to-use-steps hr {
        margin: 50px 10%;
        background: #fff;
        width: 80%;
    }

.ingredients-page button {
    background: none;
    border: 0;
    margin: 20px 0 0;
}

.ingredients-products .tooltip-inner {
    width: 370px;
    height: 360px;
    background-image: url('../images/tooltip-big-container.png');
    background-size: cover;
    padding: 22px 15px 60px 20px;
    color: #231f20;
    line-height: 1.40;
    text-align: left;
}

.ingredients-products.less-tooltip .tooltip-inner {
    width: 370px;
    height: 306px;
    background-image: url('../images/tooltip-middle-container.png');
}

.ingredients-products .tooltip-inner p {
    color: #00b5cc;
    margin: 0;
}

.ingredients-products .tooltip-inner table td {
    padding: 0 5px 1px 0;
}

.ingredients-page button.element {
    text-indent: -9999px;
    width: 150px;
    height: 190px;
    background-image: url('../images/ingredients/ingredient-sprite.png');
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0;
    margin: 20px 0 0;
}

    .ingredients-page button.element:hover {
        background-image: url('../images/ingredients/ingredient-sprite.png');
    }

.ingredients-page .vitamin-b5-151c {
    background-position: 0 0;
}

    .ingredients-page .vitamin-b5-151c:hover {
        background-position: 0 -195px;
    }

.ingredients-page .vitamin-a {
    background-position: -151px 0;
}

    .ingredients-page .vitamin-a:hover {
        background-position: -151px -195px;
    }

.ingredients-page .vitamin-b3 {
    background-position: -303px 0;
}

    .ingredients-page .vitamin-b3:hover {
        background-position: -303px -195px;
    }

.ingredients-page .vitamin-b9 {
    background-position: -454px 0;
}

    .ingredients-page .vitamin-b9:hover {
        background-position: -454px -195px;
    }

.ingredients-page .vitamin-h {
    background-position: -606px 0;
}

    .ingredients-page .vitamin-h:hover {
        background-position: -606px -195px;
    }

.ingredients-page .zinc {
    background-position: -757px 0;
}

    .ingredients-page .zinc:hover {
        background-position: -757px -195px;
    }

.ingredients-page .copper {
    background-position: -909px 0;
}

    .ingredients-page .copper:hover {
        background-position: -909px -195px;
    }

.ingredients-page .silicone {
    background-position: -1060px 0;
}

    .ingredients-page .silicone:hover {
        background-position: -1060px -195px;
    }

.ingredients-page .vitamin-e {
    background-position: -1212px 0;
}

    .ingredients-page .vitamin-e:hover {
        background-position: -1212px -195px;
    }

.ingredients-page .cactus {
    background-position: -1363px 0;
}

    .ingredients-page .cactus:hover {
        background-position: -1363px -194px;
    }

.ingredients-page .bergamot {
    background-position: -1516px 0;
}

    .ingredients-page .bergamot:hover {
        background-position: -1516px -194px;
    }

.ingredients-page .aloe-vera {
    background-position: -1668px 0;
}

    .ingredients-page .aloe-vera:hover {
        background-position: -1668px -194px;
    }

.ingredients-page .jojoba-oil {
    background-position: -1820px 0;
}

    .ingredients-page .jojoba-oil:hover {
        background-position: -1820px -194px;
    }

.ingredients-page .green-tea {
    background-position: -1972px 0;
}

    .ingredients-page .green-tea:hover {
        background-position: -1972px -194px;
    }

.ingredients-page .french-green-clay {
    background-position: -2124px 0;
}

    .ingredients-page .french-green-clay:hover {
        background-position: -2124px -194px;
    }

.ingredients-page .avocado-oil {
    background-position: -2276px 0;
}

    .ingredients-page .avocado-oil:hover {
        background-position: -2276px -194px;
    }

.ingredients-page .sea-mineral {
    background-position: -2428px 0;
}

    .ingredients-page .sea-mineral:hover {
        background-position: -2428px -194px;
    }

.ingredients-page .eucalyptus-oil {
    background-position: -2580px 0;
}

    .ingredients-page .eucalyptus-oil:hover {
        background-position: -2580px -194px;
    }

.ingredients-page .horsetail-extract {
    background-position: -2732px 0;
}

    .ingredients-page .horsetail-extract:hover {
        background-position: -2732px -194px;
    }

.ingredients-page .ginko-extract {
    background-position: -2884px 0;
}

    .ingredients-page .ginko-extract:hover {
        background-position: -2884px -194px;
    }

.ingredients-page .chamomile {
    background-position: -3037px 0;
}

    .ingredients-page .chamomile:hover {
        background-position: -3037px -194px;
    }

.ingredients-page .grapefruit-extract {
    background-position: -3190px 0;
}

    .ingredients-page .grapefruit-extract:hover {
        background-position: -3190px -194px;
    }

.ingredients-page .salicylic-acid {
    background-position: right 0;
}

    .ingredients-page .salicylic-acid:hover {
        background-position: right -194px;
    }

/*video*/
.vid-container {
    position: relative;
    background: #000;
    overflow: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    .vid-container > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

.vid-list-container {
    overflow: hidden;
}

.vid-item {
    display: block;
    width: 100%;
    margin: 0;
}

.thumb {
    overflow: hidden;
    height: 100%;
}

    .thumb img {
        width: 100%;
        position: relative;
    }

.vid-container .arrow-left {
    position: absolute;
    height: 40px;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url("../images/stories/video-arrow-top.png");
    background-position: center 11px;
    background-repeat: no-repeat;
    width: 100%;
    z-index: 3;
}

    .vid-container .arrow-left:hover {
        background-position: center -30px;
        background-color: rgba(255, 255, 255, 0.9);
    }

.vid-container .arrow-right {
    position: absolute;
    height: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url("../images/stories/video-arrow-bottom.png");
    background-position: center 11px;
    background-repeat: no-repeat;
    width: 100%;
    z-index: 3;
}

    .vid-container .arrow-right:hover {
        background-position: center -29px;
        background-color: rgba(255, 255, 255, 0.9);
    }

    .vid-container .arrow-right:hover, .vid-container .arrow-left:hover, .thumb img:hover {
        cursor: pointer;
    }

.thumb img:hover {
    opacity: 0.7;
}

@media (min-width: 1400px) {
    .vid-container, .vid-container iframe, .vid-list-container {
        height: 720px;
    }
}

@media (min-width: 1300px) and (max-width: 1399px) {
    .vid-container, .vid-container iframe, .vid-list-container {
        height: 550px;
    }
}

@media (min-width: 1200px) and (max-width: 1299px) {
    .vid-container, .vid-container iframe, .vid-list-container {
        height: 550px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .vid-container, .vid-container iframe, .vid-list-container {
        height: 490px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .vid-container, .vid-container iframe, .vid-list-container {
        height: 400px;
    }
}

@media (max-width: 767px) {
    .vid-container {
        height: 480px;
        position: relative;
    }

        .vid-container iframe, .vid-container .col-sm-18 {
            height: 260px;
        }

    .vid-list-container .thumb img {
        height: 120px;
        width: 160px;
    }

    .vid-list-container .vid-item {
        height: 140px;
        width: 200px;
        padding: 10px 20px;
        box-sizing: border-box;
        float: left;
    }

    .vid-list-container {
        height: 220px;
        padding: 40px 0;
    }

        .vid-list-container::after {
            content: ".";
            display: block;
            height: 0;
            overflow: scroll !important;
        }
}

.stories-connect a {
    display: block;
}

    .stories-connect a:hover {
        color: #00acc8;
    }

.stories-connect:hover {
    cursor: pointer;
}

.stories-review-section {
    padding: 30px 40px;
    background: #dcf8fc;
}

.stories-review-section-inner {
    padding: 10px;
    margin: 40px 0;
    max-height: 700px;
    overflow-y: scroll;
    overflow-x: hidden;
}

    .stories-review-section-inner .text-left {
        margin-bottom: 40px;
    }

.news-items {
    margin-bottom: 30px;
}

    .news-items .media-releases-wrapper {
        padding: 10px;
        background: #dcf8fc;
        text-align: left;
        margin-bottom: 40px;
    }

    .news-items .news-date, .news-item-page .news-date {
        font-size: 90%;
    }

    .news-items .news-title {
        line-height: 1.4;
        margin-bottom: 0;
    }

    .news-items .news-title {
        color: #000;
        font-weight: bold;
    }

    .news-items .news-head, .news-items .news-body {
        margin: 10px 0;
    }

    .news-items .video-preview, .news-items .infographic-preview {
        margin-top: 25px;
    }

        .news-items .video-preview .title, .news-items .infographic-preview .title {
            padding-left: 37px;
            margin: 10px 0;
            background-image: url("../images/sprite.png");
            background-repeat: no-repeat;
        }

        .news-items .video-preview .title {
            background-position: -120px -308px;
        }

        .news-items .infographic-preview .title {
            background-position: -70px -344px;
        }

.pager {
    margin: 30px 0 60px;
}


    .pager ul li {
        display: inline-block;
        margin: 0 3px 5px;
    }

        .pager ul li > * {
            padding: 5px 10px;
        }


        .pager ul li > * {
            color: #fff;
            background: #00acc8;
            display: inline-block;
            padding: 10px 20px;
            text-transform: uppercase;
            border: 0;
            font: bold 95% 'Century Gothic', Arial, Helvetica, sans-serif;
        }

        .pager ul li.current-page > * {
            background: none;
            color: #00acc8;
        }

        .pager ul li > *:hover {
            text-decoration: none;
            background-color: #e58f24;
            color: #fff !important;
        }

.hidden {
    display: none;
}

#radio-carousel {
    position: relative;
    box-shadow: -2px 0 15px 2px #999;
    padding: 40px 0;
}

.owl-carousel .owl-buttons .owl-prev, .owl-carousel .owl-buttons .owl-next {
    display: inline-block;
    width: 20px;
    height: 55px;
    background-repeat: no-repeat;
    top: 30%;
    position: absolute;
}

.owl-carousel .owl-buttons .owl-prev {
    left: 15px;
    background: url("../images/video-arrow-left.png");
    background-position: -40px 0;
}

.owl-carousel .owl-buttons .owl-next {
    right: 15px;
    background: url("../images/video-arrow-right.png");
    background-position: -21px 0;
}

.owl-carousel .owl-buttons .owl-prev:hover {
    background-position: 0 0;
}

.owl-carousel .owl-buttons .owl-next:hover {
    background-position: -61px 0;
}

#radio-carousel .owl-item > .item > div, #locator-carousel .owl-item > .item > div {
    margin-top: 25px;
    border-top: 3px solid #fff;
    padding: 20px 20px 0;
}


#radio-carousel .owl-item > .item img, #locator-carousel .owl-item > .item img {
    height: 100px;
}

.share-story .beige img {
    margin: 20px 20px 5px;
}

.share-story .reviewer-photos p {
    font-size: 90%;
}

.share-story .reviewer-photos div {
    display: inline-block;
}

.media-appearance-articles img {
    box-shadow: 0 0 10px #999;
    -webkit-box-shadow: 0 0 10px #999;
}

.search-map-wrapper {
    padding: 25px 0;
}

    .search-map-wrapper select, .search-map-wrapper input[type="text"] {
        line-height: 20px;
        padding: 8px 10px;
        margin-bottom: 5px;
    }

.store-locator-results {
    max-height: 550px;
    overflow-y: scroll;
    background: #fff;
    text-align: left;
    padding: 15px;
}

    .store-locator-results .store {
        margin-bottom: 15px;
        font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
    }

.store-locator-results-col {
    width: 30%;
}

.store-locator-map-col {
    width: 70%;
    background: #ffeedd;
}

.store-locator-map {
    width: 100%;
    height: 550px;
}

.store-locator-table {
    margin: 20px;
}

/*Product Page*/
.shop-products .col-sm-12 .text-center {
    padding: 5px;
    margin: 15px 0;
    border-top: 4px solid #aaa;
    border-bottom: 4px solid #aaa;
}

.shop-products img {
    vertical-align: top;
    margin: 4px 5px 0;
}

#choose_products {
    display: inline-block;
    width: 113px;
    height: 113px;
    background-image: url("../images/products/products-icons.png");
    background-position: -4px 0;
}

    #choose_products:hover {
        background-position: -4px -113px;
    }

#how_to_use {
    display: inline-block;
    width: 113px;
    height: 113px;
    background-image: url("../images/products/products-icons.png");
    background-position: -119px 1px;
}

    #how_to_use:hover {
        background-position: -119px -112px;
    }

#skinb5_ingredients {
    display: inline-block;
    width: 112px;
    height: 112px;
    background-image: url("../images/products/products-icons.png");
    background-position: -234px -1px;
}

    #skinb5_ingredients:hover {
        background-position: -234px -113px;
    }

.product-grid .product-item {
    margin: 25px 0 50px;
    padding: 10px 20px 0;
    background: #fff;
    color: #231f20;
}

    .product-grid .product-item .picture-thumbs, .product-item-mask .picture-thumbs {
        display: none;
    }

.thumb-popup-link {
    font-size: 12px;
    font-family: Arial, Arial, Helvetica, sans-serif !important;
    color: #00acc8;
    padding: 5px 0;
}

.mfp-content {
    text-align: center !important;
}

.product-grid .product-item img {
    max-height: 250px;
}

.product-grid .product-item .details, .product-item-mask .details {
    font-size: 93%;
    line-height: 1.4;
    color: #231f20;
    margin: 15px 10px;
}

.product-grid .product-item .details {
    min-height: 350px;
}

    .product-grid .product-item .details h3, .product-item-mask .details h3 {
        color: #00acc8;
        text-transform: uppercase;
        font: bold 100% Arial, Helvetica, sans-serif;
    }

    .product-grid .product-item .details ul li, .product-item-mask .details ul li, .product-kits-item .details ul li, .build-your-own-kit ul li {
        position: relative;
    }

        .product-grid .product-item .details ul li:before, .product-item-mask .details ul li:before, .product-kits-item .details ul li:before, .build-your-own-kit ul li:before {
            content: url("../images/blue-bullet.png");
            width: 7px;
            height: 20px;
            position: absolute;
            top: -4px;
            margin-left: -14px;
        }

    .product-grid .product-item .details a, .product-item-mask .details a, .product-kits-item .details a {
        color: #00acc8;
        text-transform: uppercase;
        text-decoration: underline;
        padding-top: 10px;
        display: block;
    }

        .product-grid .product-item .details a:hover, .product-item-mask .details a:hover, .product-kits-item .details a:hover {
            text-decoration: none;
        }

.product-grid .product-item .number, .product-item-mask .number {
    display: inline-block;
    padding: 3px 10px;
    background: #00acc8;
    color: #fff;
    font-size: 80%;
    position: relative;
    top: -20px;
}

.product-grid .product-item h2.product-title, .product-kits-item .product-title, .build-your-own-kit .product-title {
    color: #61646c;
    font-size: 140%;
    font-weight: bold;
    font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
}

.product-grid .product-item h2.product-title {
    min-height: 56px;
}

.product-grid .product-item .prices, .product-item-mask .prices {
    color: #00acc8;
    font: bold 120% 'Century Gothic', Arial, Helvetica, sans-serif;
    min-height: 40px;
}

.product-grid .product-item .product-box-add-to-cart-button, .product-item-mask .product-box-add-to-cart-button {
    color: #fff;
    background: #00acc8;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    bottom: -18px;
}

.product-grid .kit-box {
    position: relative;
}

.gift-card .product-box-add-to-cart-button {
    position: relative;
    bottom: -36px;
}

.product-grid .kit-box .buttons {
    position: absolute;
    text-align: center;
    bottom: -18px;
    left: 0;
    width: 100%;
}

.product-grid .product-item .product-box-add-to-cart-button:hover, .product-item-mask .product-box-add-to-cart-button:hover, .product-kits-item .product-box-add-to-cart-button:hover {
    text-decoration: none;
    background-color: #e58f24;
}

.product-item-mask {
    padding: 0 30px;
    margin-bottom: 30px;
}

.products-mask-table .grey, .products-mask-table .beige {
    padding: 30px 35px;
    margin-bottom: 20px;
}

.products-mask-table {
    width: 100%;
}

    .products-mask-table td {
        vertical-align: top;
    }

@media (max-width: 991px) {
    .products-mask-table td {
        display: block !important;
    }

    .single-product-grid > .col-md-6:nth-child(2n+1) {
        clear: both;
    }
}

.product-kits-item {
    margin: 25px 0 100px;
    padding: 0 20px 20px;
    background: #fff;
    color: #231f20;
}

.product-grid-kits .col-sm-12:nth-child(2n+1) {
    clear: both;
}

.build-your-own-kit {
    margin: 25px 0 60px;
    padding: 30px 20px 20px;
    color: #231f20;
}

    .product-kits-item .product-title, .build-your-own-kit .product-title {
        margin-top: 30px;
    }

.product-kits-item .number {
    height: 85px;
    position: relative;
    top: -49px;
    display: inline-block;
}

    .product-kits-item .number span {
        display: inline-block;
        padding: 3px 30px 3px 15px;
        background: #00acc8;
        color: #fff;
        font-size: 80%;
        margin-top: 34px;
    }

.build-your-own-kit .number {
    display: inline-block;
    padding: 3px 30px;
    background: #f9a11b;
    color: #fff;
    font-size: 80%;
    position: relative;
    top: -45px;
}

.wholesale-page .build-your-own-kit .number {
    display: none !important;
}

.wholesale-page .build-your-own-kit table {
    margin: 0 auto;
}

.product-kits-item .number.first-time {
    padding-left: 85px;
    background-image: url("../images/superkits/first-time-icon.png");
    background-repeat: no-repeat;
}

.product-kits-item .number.moderate-severe {
    padding-left: 85px;
    background-image: url("../images/superkits/moderate-severe.png");
    background-repeat: no-repeat;
}

.product-kits-item .number.mild-prevent {
    padding-left: 85px;
    background-image: url("../images/superkits/mild-prevent.png");
    background-repeat: no-repeat;
}

.product-kits-item .picture {
    position: relative;
}

.product-kits-item .prices-tag {
    position: absolute;
    left: 0;
    bottom: -10px;
    z-index: 1;
    max-width: 120px;
}

    .product-kits-item .prices-tag > .actual-price {
        color: #fff;
        font: bold 125% Arial, Helvetica, sans-serif;
        background: #f9a11b;
        width: 120px;
        height: 120px;
        border-radius: 66px;
        display: inline-block;
        padding: 25px 10px 0;
        box-sizing: border-box;
        box-shadow: 2px 1px 5px #666;
    }

.old-price {
    text-decoration: line-through;
}

.product-kits-item .prices {
    margin: 15px 0;
    text-transform: uppercase;
}

    .product-kits-item .prices .actual-price {
        margin: 10px 0;
        color: #00acc8;
        font-weight: bold;
    }

.bonus-mask-container {
    max-width: 300px;
    margin: 40px auto;
    position: relative;
}

.bonus-mask {
    padding: 5px 70px 5px 10px;
    text-align: left;
    background: #00acc8;
    background: -webkit-linear-gradient(90deg, #00acc8 60%, #dbf8fc);
    background: -o-linear-gradient(90deg, #00acc8 60%, #dbf8fc);
    background: -moz-linear-gradient(90deg, #00acc8 60%, #dbf8fc);
    background: linear-gradient(90deg, #00acc8 60%, #dbf8fc);
    text-transform: initial;
    font-size: 90%;
    color: #fff;
}

.bonus-mask-container select {
    margin-top: 10px;
}

.bonus-mask-container img {
    position: absolute;
    right: 0;
    top: -20px;
}


.byok-product-item td {
    padding: 0 10px 10px;
    text-align: left;
    vertical-align: top;
    font-size: 95%;
}

.byok-product-item input[type="text"] {
    width: 50px;
}

.byok-add-to-cart {
    color: #fff;
    background: #e58f24;
    display: inline-block;
    text-transform: uppercase;
    padding: 10px 20px;
    text-transform: uppercase;
    border: 0;
    font: bold 95% 'Century Gothic', Arial, Helvetica, sans-serif;
}

    .byok-add-to-cart:hover {
        text-decoration: none;
        background-color: #00acc8;
    }

.gift-card .picture {
    padding: 30px 0 10px;
}

.contact-page .fieldset {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 40px 0;
}

.contact-page .required {
    color: #61646c;
}

.contact-page .field-validation-error {
    font-size: 120%;
}


/*********** NOTIFICATIONS & POPUPS  ***********/



.bar-notification {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: 15px 25px 15px 10px;
    line-height: 16px;
    color: #fff;
    opacity: 0.95;
}

    .bar-notification.success {
        background-color: #4bb07a;
    }

    .bar-notification.error {
        background-color: #e4444c;
    }

    .bar-notification .content {
        float: left;
        margin: 0 10px 0 0;
    }

        .bar-notification .content a {
            color: #fff;
            text-decoration: underline;
        }

    .bar-notification .close {
        position: absolute;
        top: 0;
        right: 0;
        width: 32px;
        height: 32px;
        margin: 7px;
        background: #fff url('../images/close.png') center no-repeat;
        cursor: pointer;
    }

.noscript {
    border-bottom: 1px solid #333;
    background-color: #ff9;
    padding: 30px 15px;
    text-align: center;
    line-height: 22px;
    color: #444;
}

.ajax-loading-block-window {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    background: url('../images/loading.gif') center no-repeat;
}

.please-wait {
    background: url('../images/ajax-loader-small.gif') no-repeat;
    padding-left: 20px;
    font-size: 14px;
}

.ui-dialog {
    width: 350px !important;
    max-width: 90%;
    border: 1px solid #ddd;
    box-shadow: 0 0 2px rgba(0,0,0,0.15);
    overflow: hidden;
    background-color: #fff;
    /*override jQuery UI styles, do not delete doubled properties*/
    border-radius: 0;
    padding: 0;
    font: normal 14px Arial, Helvetica, sans-serif;
}

    .ui-dialog:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
    }

.ui-dialog-titlebar {
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    background-color: #eee;
    padding: 10px 15px;
    /*override jQuery UI styles, do not delete doubled properties*/
    border-width: 0 0 1px;
    border-radius: 0;
    background-image: none;
    padding: 10px 15px !important;
    font-weight: normal;
    cursor: auto !important;
}

    .ui-dialog-titlebar > span {
        float: left;
        font-size: 18px;
        color: #444;
        /*override jQuery UI styles, do not delete doubled properties*/
        margin: 0 !important;
    }

    .ui-dialog-titlebar button {
        position: absolute;
        top: 0;
        right: 0;
        width: 42px;
        height: 42px;
        border: none;
        overflow: hidden;
        background: url('../images/close.png') center no-repeat;
        font-size: 0;
        /*override jQuery UI styles, do not delete doubled properties*/
        top: 0 !important;
        right: 0 !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0;
        background: url('../images/close.png') center no-repeat !important;
        padding: 0 !important;
    }

        .ui-dialog-titlebar button span {
            display: none !important;
        }

.ui-dialog-content {
    height: auto !important;
    padding: 15px;
    line-height: 20px;
    /*override jQuery UI styles, do not delete doubled properties*/
    background-color: #fff !important;
    padding: 15px !important;
    color: #777;
}

.eu-cookie-bar-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1050;
    width: 320px;
    height: 180px;
    margin: -90px 0 0 -160px;
    border: 1px solid #ccc;
    box-shadow: 0 0 2px rgba(0,0,0,0.15);
    background-color: #fff;
    padding: 20px;
    text-align: center;
}

    .eu-cookie-bar-notification .text {
        margin-bottom: 20px;
        line-height: 20px;
    }

    .eu-cookie-bar-notification button {
        min-width: 60px;
        margin: 5px 0 10px;
        border: none;
        background-color: #4ab2f1;
        padding: 8px 12px;
        font-size: 14px;
        color: #fff;
    }

        .eu-cookie-bar-notification button:hover {
            background-color: #248ece;
        }

    .eu-cookie-bar-notification a {
        display: block;
        color: #4ab2f1;
    }

        .eu-cookie-bar-notification a:hover {
            text-decoration: underline;
        }

.success_addtocart_pop_up {
    display: none;
    width: 670px;
    box-sizing: border-box;
    font-size: 95%;
}

.kit-success-popup-white {
    height: 330px;
}

.dialog-popup, #bar-notification, #dialog-notifications-success, #dialog-notifications-error, #terms-of-service-warning-box {
    width: 500px;
    box-sizing: border-box;
    font-size: 95%;
    text-align: center;
    background: #fff;
    min-height: 100px;
    padding: 30px;
    font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
    font-size: 18px;
}

.giftcard-popup {
    display: none;
    width: 670px;
    box-sizing: border-box;
    font-size: 95%;
    text-align: center;
}

    .giftcard-popup .giftcard-popup-wrapper {
        background: #fff;
        padding: 20px 15px;
    }

    .giftcard-popup .giftcard-popup-bottom {
        background: #dcf8fc;
        padding: 20px 15px;
    }

    .giftcard-popup table {
        width: 90%;
        margin: 0 auto;
    }

        .giftcard-popup table td {
            padding: 10px 5px 5px;
            text-align: left;
        }

        .giftcard-popup table input, .giftcard-popup table textarea {
            width: 100%;
        }

.success_addtocart_pop_up > .row {
    width: 100%;
    background: #dcf8fc;
}

.success_addtocart_pop_up .col-sm-15 {
    padding: 20px;
    background: #fff;
}

    .success_addtocart_pop_up .col-sm-15 h3 {
        margin: 5px 0 10px;
    }

    .success_addtocart_pop_up .col-sm-15 .row {
        margin: 15px 0;
    }

.success_addtocart_pop_up .col-sm-9 {
    padding: 20px;
    background: #dcf8fc;
}

    .success_addtocart_pop_up .col-sm-9 a {
        margin: 10px 0;
    }

    .success_addtocart_pop_up .col-sm-9 table {
        font-size: 13px;
    }

.success_addtocart_pop_up .product-title {
    padding-top: 20px;
}

.success_addtocart_pop_up .button-1 {
    width: 218px;
    font-size: 13px;
    text-align: center;
}

.cross-sell-successful {
    display: none;
}

.order-summary-content table {
    width: 100%;
    margin: 20px 0;
}

    .order-summary-content table td {
        min-width: 60px;
        vertical-align: middle;
    }

        .order-summary-content table td .qty-input {
            max-width: 50px;
        }

        .order-summary-content table td.remove-from-cart, .order-summary-content table td.sku,
        .order-summary-content table td.product-picture, .order-summary-content table td.quantity {
            text-align: center;
        }

        .order-summary-content table td.product-picture {
            min-width: 100px;
        }

        .order-summary-content table td.unit-price, .order-summary-content table td.subtotal {
            width: 200px;
        }

            .order-summary-content table td.subtotal .product-subtotal {
                font-weight: bold;
                color: #00acc8;
            }

            .order-summary-content table td.subtotal .discount {
                font-weight: bold;
                color: #e58f24;
            }

.order-summary-content .common-buttons input {
    margin-bottom: 10px;
}

.order-summary-content .cart-footer {
    margin: 30px 0;
}

.order-summary-content .totals {
    text-align: right;
}

    .order-summary-content .totals table {
        width: auto;
        float: right;
    }

        .order-summary-content .totals table td {
            padding: 5px 0 0 15px;
        }

            .order-summary-content .totals table td label {
                font-weight: bold;
            }

.cart-collaterals .coupon-box, .cart-collaterals .shipping, .cart-collaterals .giftcard-box {
    padding: 15px 20px;
    background: #fde7cb;
    border: 1px solid #E8D3B7;
    margin: 15px 10px 0 0;
    float: left;
    max-width: 265px;
}

    .cart-collaterals .coupon-box input, .cart-collaterals .giftcard-box input {
        display: block;
        margin-top: 5px;
    }

.order-summary-content .checkout-button {
    font-size: 120%;
    padding: 10px 25px;
}

.opc .step-title h2 {
    display: inline-block;
    font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 110%;
    margin: 0;
}

.opc .step-title .number {
    font-size: 110%;
    padding-right: 10px;
}

.opc .step-title {
    background: #f4f4f4;
    border: 1px solid #e5e5e5;
    padding: 10px 15px;
    margin: 0 0 5px;
}

.opc .active .step-title, .opc .allow .step-title:hover {
    background: #fde7cb;
    border: 1px solid #E8D3B7;
}

.opc .allow .step-title:hover {
    cursor: pointer;
}

.opc .step {
    padding: 10px 15px;
    margin-bottom: 30px;
}

.opc .buttons {
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
    margin-top: 20px;
}

.opc .back-link a {
    color: #00acc8;
}

.opc .method-name label {
    padding-left: 10px;
}

.opc .method-description {
    padding-left: 36px;
}

.opc .step .method-list li {
    margin-bottom: 20px;
}

.opc #opc-payment_method .step, .opc #opc-payment_info .step {
    background-image: url("../images/Geotrust.jpg");
    background-position: right bottom;
    background-repeat: no-repeat;
}

.opc table#paymentInfoPAge > tbody > tr > td {
    padding-bottom: 20px;
}

.opc .payment-info .info {
    margin-top: 20px;
}

.opc span#btnDelete {
    color: #e58f24;
    cursor: pointer;
}

.opc .payment-method .payment-details {
    line-height: 50px;
}

.opc .payment-method .payment-details, .opc .payment-method .payment-logo {
    float: left;
}

.opc .cardinfo td {
    padding: 5px 0;
}

.opc #opc-payment_info .tooltip .classic {
    opacity: 0;
    position: absolute;
    width: 282px;
}

.opc #opc-payment_info .tooltip:hover {
    cursor: help;
}

    .opc #opc-payment_info .tooltip:hover .classic {
        opacity: 1.0;
    }

.opc .order-summary-content .totals table {
    width: auto;
    float: none;
}

    .opc .order-summary-content .totals table td {
        text-align: left !important;
    }

.order-details-area, .order-review-data {
    border: 1px solid #e5e5e5;
    margin: 10px 0;
}

    .order-review-data li, .order-details-area li {
        font-size: 14px;
    }

        .order-review-data li.title, .order-details-area li.title {
            font-weight: bold;
            margin-top: 15px;
            font-size: 16px;
        }

.order-details-page .page-title .button-2 {
    float: right;
    margin: 0 5px;
}

.checkout-complete-nextstep img {
    margin-bottom: 10px;
}

.checkout-complete-nextstep {
    font-size: 14px;
    margin-bottom: 10px;
}

.order-completed-continue-button {
    border: 0;
    margin-top: 50px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .order-summary-content table td.unit-price, .order-summary-content table td.subtotal {
        width: 150px !important;
    }
}

@media (max-width: 767px) {
    .success_addtocart_pop_up, .giftcard-popup {
        max-width: 400px;
    }

    .order-summary-content table.data-table tr, .order-summary-content table.data-table td {
        display: block;
        text-align: center;
        background: #fff;
    }

    .order-summary-content table.data-table tr {
        margin-bottom: 40px;
        border: 2px solid #e0e0e0;
    }

        .order-summary-content table.data-table tr .remove-from-cart {
            background: #f2f2f2;
        }

    .order-summary-content table.data-table th, .order-summary-content table.data-table thead tr {
        display: none;
    }

    .edit-address label {
        font-size: 90%;
        display: block;
    }

    .order-summary-content table td.unit-price, .order-summary-content table td.subtotal {
        width: 100% !important;
    }

    .opc #opc-payment_method .step, .opc #opc-payment_info .step {
        padding-bottom: 70px;
    }

    .giftcard-popup table td {
        display: block;
    }
}

/*Newsletter PopUp*/
#newsletter-form-bpopup {
    width: 90%;
    max-width: 500px;
    min-height: 240px;
    background: #fff;
    padding: 20px 30px 10px 30px;
    background-image: url("../images/newsletter-popup_bg.jpg");
    background-position: left bottom;
    background-repeat: no-repeat;
}

.newsletter-form-bpopup-wrapper {
    background: rgba(255,255,255,0.6);
    margin-left: 170px;
}

#newsletter-form-bpopup h2 {
    font-size: 22px;
    margin-bottom: 25px;
}

.newsletter-form-bpopup-wrapper input[type="email"] {
    width: 100%;
    background: #fff;
    padding: 6px 10px;
    font-size: 15px;
    box-shadow: 1px 1px 4px 0px #e0e0e0 inset;
    border: 1px solid #d0d0d0;
    margin: 0 0 8px;
}

.newsletter-form-bpopup-wrapper .message-error {
    line-height: 1.4;
    font-size: 13px;
}


/*Gallery Page*/
img.mfp-img {
    padding: 10px 0 !important;
}

#menu-buy {
    float: right;
    z-index: 99999999;
    margin: 8px 8px 0 0;
    color: #fff;
}

.freewall-wrapper {
    margin: 0 40px;
}

    .freewall-wrapper > .item {
        height: 200px;
        width: 300px;
        background-size: cover;
        background-position: center top;
    }

.mfp-title {
    padding: 10px;
    text-align: left;
    display: block;
    color: #fff;
    background: rgba(0,172,200,1);
}

.freewall-wrapper > .item a {
    padding: 10px;
    text-align: left;
    display: block;
    color: #fff;
    background: rgba(0,172,200,0.82);
    width: 100%;
    height: 100%;
    opacity: 0;
}

    .freewall-wrapper > .item a:hover {
        opacity: 1.0;
    }

@media (max-width: 640px) {
    .freewall-wrapper {
        margin: 0 20px;
    }

        .freewall-wrapper > .item {
            height: 180px;
        }
}
