@-webkit-keyframes skeleton {
    0% {
        background-color: rgba(165, 165, 165, .1)
    }

    50% {
        background-color: rgba(165, 165, 165, .3)
    }

    100% {
        background-color: rgba(165, 165, 165, .1)
    }
}

@-moz-keyframes skeleton {
    0% {
        background-color: rgba(165, 165, 165, .1)
    }

    50% {
        background-color: rgba(165, 165, 165, .3)
    }

    100% {
        background-color: rgba(165, 165, 165, .1)
    }
}

@keyframes skeleton {
    0% {
        background-color: rgba(165, 165, 165, .1)
    }

    50% {
        background-color: rgba(165, 165, 165, .3)
    }

    100% {
        background-color: rgba(165, 165, 165, .1)
    }
}


.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    background-color: #8c8c8c;
    border-radius: 10px
}

.badge:empty {
    display: none
}

.btn .badge {
    position: relative;
    top: -1px
}

.btn-group-xs>.btn .badge,
.btn-xs .badge {
    top: 0;
    padding: 1px 5px
}

.list-group-item.active>.badge,
.nav-pills>.active>a>.badge {
    color: #1976d2;
    background-color: #fff
}

.list-group-item>.badge {
    float: right
}

.list-group-item>.badge+.badge {
    margin-right: 5px
}

.nav-pills>li>a>.badge {
    margin-left: 3px
}

.badge.badge-small {
    font-size: 10px;
    padding: 2px 7px
}

.badge.badge-danger {
    background-color: #f10200
}

a.badge:focus,
a.badge:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer
}

.badge-unread {
    width: 8px;
    height: 8px;
    background-color: #d32f2f;
    border-radius: 8px;
    display: inline-block
}

@keyframes skeleton {
    0% {
        background-color: rgba(165, 165, 165, .1)
    }

    50% {
        background-color: rgba(165, 165, 165, .3)
    }

    100% {
        background-color: rgba(165, 165, 165, .1)
    }
}

@-ms-viewport {
    width: device-width
}

.visible-xs {
    display: none !important
}

.visible-sm {
    display: none !important
}

.visible-md {
    display: none !important
}

.visible-lg {
    display: none !important
}

.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block {
    display: none !important
}

@media (max-width:767px) {
    .visible-xs {
        display: block !important
    }

    table.visible-xs {
        display: table !important
    }

    tr.visible-xs {
        display: table-row !important
    }

    td.visible-xs,
    th.visible-xs {
        display: table-cell !important
    }
}

@media (max-width:767px) {
    .visible-xs-block {
        display: block !important
    }
}

@media (max-width:767px) {
    .visible-xs-inline {
        display: inline !important
    }
}

@media (max-width:767px) {
    .visible-xs-inline-block {
        display: inline-block !important
    }
}

@media (min-width:768px) and (max-width:991px) {
    .visible-sm {
        display: block !important
    }

    table.visible-sm {
        display: table !important
    }

    tr.visible-sm {
        display: table-row !important
    }

    td.visible-sm,
    th.visible-sm {
        display: table-cell !important
    }
}

@media (min-width:768px) and (max-width:991px) {
    .visible-sm-block {
        display: block !important
    }
}

@media (min-width:768px) and (max-width:991px) {
    .visible-sm-inline {
        display: inline !important
    }
}

@media (min-width:768px) and (max-width:991px) {
    .visible-sm-inline-block {
        display: inline-block !important
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .visible-md {
        display: block !important
    }

    table.visible-md {
        display: table !important
    }

    tr.visible-md {
        display: table-row !important
    }

    td.visible-md,
    th.visible-md {
        display: table-cell !important
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .visible-md-block {
        display: block !important
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .visible-md-inline {
        display: inline !important
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .visible-md-inline-block {
        display: inline-block !important
    }
}

@media (min-width:1200px) {
    .visible-lg {
        display: block !important
    }

    table.visible-lg {
        display: table !important
    }

    tr.visible-lg {
        display: table-row !important
    }

    td.visible-lg,
    th.visible-lg {
        display: table-cell !important
    }
}

@media (min-width:1200px) {
    .visible-lg-block {
        display: block !important
    }
}

@media (min-width:1200px) {
    .visible-lg-inline {
        display: inline !important
    }
}

@media (min-width:1200px) {
    .visible-lg-inline-block {
        display: inline-block !important
    }
}

@media (max-width:767px) {
    .hidden-xs {
        display: none !important
    }
}

@media (min-width:768px) and (max-width:991px) {
    .hidden-sm {
        display: none !important
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .hidden-md {
        display: none !important
    }
}

@media (min-width:1200px) {
    .hidden-lg {
        display: none !important
    }
}

.visible-print {
    display: none !important
}

@media print {
    .visible-print {
        display: block !important
    }

    table.visible-print {
        display: table !important
    }

    tr.visible-print {
        display: table-row !important
    }

    td.visible-print,
    th.visible-print {
        display: table-cell !important
    }
}

.visible-print-block {
    display: none !important
}

@media print {
    .visible-print-block {
        display: block !important
    }
}

.visible-print-inline {
    display: none !important
}

@media print {
    .visible-print-inline {
        display: inline !important
    }
}

.visible-print-inline-block {
    display: none !important
}

@media print {
    .visible-print-inline-block {
        display: inline-block !important
    }
}

@media print {
    .hidden-print {
        display: none !important
    }
}

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    background-color: #ccc;
    border-radius: 10px
}

.badge:empty {
    display: none
}

.btn .badge {
    position: relative;
    top: -1px
}

.btn-group-xs>.btn .badge,
.btn-xs .badge {
    top: 0;
    padding: 1px 5px
}

.list-group-item.active>.badge,
.nav-pills>.active>a>.badge {
    color: #004093;
    background-color: #fff
}

.list-group-item>.badge {
    float: right
}

.list-group-item>.badge+.badge {
    margin-right: 5px
}

.nav-pills>li>a>.badge {
    margin-left: 3px
}

a.badge:focus,
a.badge:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer
}

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

:after,
:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}

.container:before {
    content: " ";
    display: table
}

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

@media (min-width:768px) {
    .container {
        width: 750px
    }
}

@media (min-width:992px) {
    .container {
        width: 970px
    }
}

@media (min-width:1200px) {
    .container {
        width: 1170px
    }
}

@media (min-width:1400px) {
    .container {
        width: 1358px
    }
}



.row {
    margin-left: -15px;
    margin-right: -15px
}

.row:before {
    content: " ";
    display: table
}

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

.col-buffer,
.row-buffer {
    margin-bottom: 15px
}

.col-buffer-xl,
.row-buffer-xl {
    margin-bottom: 30px
}

.col-buffer-lg,
.row-buffer-lg {
    margin-bottom: 25px
}

.col-buffer-md,
.row-buffer-md {
    margin-bottom: 20px
}

.col-buffer-sm,
.row-buffer-sm {
    margin-bottom: 10px
}

.col-buffer-xs,
.row-buffer-xs {
    margin-bottom: 5px
}

.container-buffer {
    margin-bottom: 40px
}

.container-buffer-lg {
    margin-bottom: 40px
}


ul {
    margin: 0;
    padding: 0;
    outline-color: transparent;
    list-style: none
}

input,
select,
textarea {
    font: inherit;
    margin: 0
}

menu {
    padding: 0;
    margin: 0
}

.s20 {
    font-size: 20px;
    line-height: 23px
}

.s24 {
    font-size: 24px
}

.fLeft {
    float: left
}

.fRight {
    float: right
}

.mgnB20 {
    margin-bottom: 20px
}

.mgnR20 {
    margin-right: 20px
}

.red {
    color: #f10200
}

.color-primary,
.green {
    color: #458500
}

.color-secondary {
    color: #ff8a00
}

.clear-both,
.clearBoth {
    clear: both
}


.ar input[type=password],
.ar input[type=text],
.ar textarea {
    direction: rtl
}

#mainWrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -375px
}

#push {
    height: 375px
}

#mainContent {
    overflow: hidden
}

@-webkit-keyframes spinning-leaf {
    from {
        -webkit-transform: rotateY(0) translate3d(0, 0, 0);
        transform: rotateY(0)
    }

    to {
        -webkit-transform: rotateY(360deg) translate3d(0, 0, 0);
        transform: rotateY(360deg)
    }
}

@-moz-keyframes spinning-leaf {
    from {
        -webkit-transform: rotateY(0) translate3d(0, 0, 0);
        -moz-transform: rotateY(0);
        transform: rotateY(0)
    }

    to {
        -webkit-transform: rotateY(360deg) translate3d(0, 0, 0);
        -moz-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }
}

@keyframes spinning-leaf {
    from {
        -webkit-transform: rotateY(0) translate3d(0, 0, 0);
        -moz-transform: rotateY(0);
        transform: rotateY(0)
    }

    to {
        -webkit-transform: rotateY(360deg) translate3d(0, 0, 0);
        -moz-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }
}

.leaf {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .75);
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    z-index: 29
}

.leaf .icon-iherbleaf {
    color: #4f9900;
    font-size: 80px;
    width: 96px;
    height: 80px;
    display: block;
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: spinning-leaf;
    -moz-animation-name: spinning-leaf;
    animation-name: spinning-leaf;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.disable-events,
.disable-events * {
    pointer-events: none
}

.hide {
    display: none
}

.Catalog .hide {
    display: none !important
}

.qanda .hide {
    display: none !important
}

.off.on,
.on {
    display: block
}

.float-left {
    float: left
}

.float-right {
    float: right
}

#iherb-account .logged-in.hide,
#iherb-account .logged-out.hide {
    display: none !important
}

.busted {
    padding: 0
}

#my-account-body {
    padding-top: 20px;
    padding-bottom: 20px
}

#MyAccountMenu .category-title {
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 6px;
    padding-bottom: 4px
}

#MyAccountMenu .category-title i {
    display: table-cell;
    vertical-align: middle;
    padding-right: 10px
}

#MyAccountMenu .category-title i:before {
    font-size: 1.6em
}

#MyAccountMenu .category-title a,
#MyAccountMenu .category-title span {
    font-weight: 700;
    display: table-cell;
    vertical-align: middle;
    color: #333
}

#MyAccountMenu .category-links {
    margin-bottom: 24px
}

#MyAccountMenu .category-links li {
    padding: 6px 0
}

#MyAccountMenu .category-links li a {
    color: #000;
    margin: 0;
    text-decoration: none
}

#MyAccountMenu .category-links li a:hover {
    text-decoration: underline
}

#MyAccountMenu .category-links li a.selected {
    font-weight: 700;
    text-decoration: underline
}

#MyAccountMenu .category-links li .badge {
    margin-left: 8px;
    position: absolute;
    margin-top: 3px
}

#MyAccountMenu .category-links li .badge-unread {
    margin-left: 8px
}


#MyAccountMenu.universal .category-title i {
    color: #121212 !important
}

@media (max-width:991px) {
    #MyAccountMenu {
        overflow-y: auto;
        width: 0%;
        height: 0;
        padding-right: 0;
        padding-left: 0;
        left: -110%;
        -moz-transition: left .5s ease;
        transition: left .5s ease
    }

    #MyAccountMenu.opened {
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 20px;
        width: 25%;
        height: 100%;
        min-width: 200px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1501;
        background-color: #fff;
        box-shadow: -1px 0 8px 0 #292929
    }

    #MyAccountMenu.opened .myaccount-hamburger-menu {
        position: absolute;
        top: 2px;
        right: 20px;
        font-size: 16px
    }

    #MyAccountMenu.opened .category-title i {
        padding-right: 0 !important
    }

    #MyAccountMenu .category-title a,
    #MyAccountMenu .category-title span {
        display: none
    }

    #MyAccountMenu .category-links {
        margin-bottom: 20px
    }

    .myaccount-container.shadow {
        box-shadow: -1px 0 8px 0 #292929
    }
}

.transparency {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .4;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500
}