@font-face {
  font-family: "Designer";
  src: url('/htdocs/fonts/Designer.woff2') format('woff2'), url('/htdocs/common/webfonts/Designer.woff') format('woff');
}

.btn {
    border-radius: .4rem;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    padding: 1rem 2rem;
}

.btn-success {
    background-color: #ff9500;
    border:none;
}
 .btn-success:hover,.btn-success:focus,.btn-success:active {
  border:none;
  background-color:#ff7800;
  box-shadow:none;
}
/* GRID XXL */
.col-xxl, .col-xxl-1, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 1400px) {
    .col-xxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
    .row-cols-xxl-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row-cols-xxl-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row-cols-xxl-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row-cols-xxl-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row-cols-xxl-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .row-cols-xxl-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .col-xxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .col-xxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .col-xxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-xxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-xxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .col-xxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .col-xxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-xxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .col-xxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .col-xxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .order-xxl-first {
        -ms-flex-order: -1;
        order: -1;
    }
    .order-xxl-last {
        -ms-flex-order: 13;
        order: 13;
    }
    .order-xxl-0 {
        -ms-flex-order: 0;
        order: 0;
    }
    .order-xxl-1 {
        -ms-flex-order: 1;
        order: 1;
    }
    .order-xxl-2 {
        -ms-flex-order: 2;
        order: 2;
    }
    .order-xxl-3 {
        -ms-flex-order: 3;
        order: 3;
    }
    .order-xxl-4 {
        -ms-flex-order: 4;
        order: 4;
    }
    .order-xxl-5 {
        -ms-flex-order: 5;
        order: 5;
    }
    .order-xxl-6 {
        -ms-flex-order: 6;
        order: 6;
    }
    .order-xxl-7 {
        -ms-flex-order: 7;
        order: 7;
    }
    .order-xxl-8 {
        -ms-flex-order: 8;
        order: 8;
    }
    .order-xxl-9 {
        -ms-flex-order: 9;
        order: 9;
    }
    .order-xxl-10 {
        -ms-flex-order: 10;
        order: 10;
    }
    .order-xxl-11 {
        -ms-flex-order: 11;
        order: 11;
    }
    .order-xxl-12 {
        -ms-flex-order: 12;
        order: 12;
    }
    .offset-xxl-0 {
        margin-left: 0;
    }
    .offset-xxl-1 {
        margin-left: 8.333333%;
    }
    .offset-xxl-2 {
        margin-left: 16.666667%;
    }
    .offset-xxl-3 {
        margin-left: 25%;
    }
    .offset-xxl-4 {
        margin-left: 33.333333%;
    }
    .offset-xxl-5 {
        margin-left: 41.666667%;
    }
    .offset-xxl-6 {
        margin-left: 50%;
    }
    .offset-xxl-7 {
        margin-left: 58.333333%;
    }
    .offset-xxl-8 {
        margin-left: 66.666667%;
    }
    .offset-xxl-9 {
        margin-left: 75%;
    }
    .offset-xxl-10 {
        margin-left: 83.333333%;
    }
    .offset-xxl-11 {
        margin-left: 91.666667%;
    }
}


/* PRODUCT PAGE */
/* .product-banner {
    background: url(/images/banners/multivitamin-banner.jpg);
    background-repeat: no-repeat;
    background-position: 19%;
    background-size: cover;
    margin-bottom: 4rem;
    min-height: 360px;
    padding-top: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .product-banner {
        background-position: 26%;
        min-height: 480px;
    }
}

@media (min-width: 992px) {
    .product-banner {
        background-position: 34%;
        min-height: 480px;
    }
}

@media (min-width: 1200px) {
    .product-banner {
        background-position: 50%;
    }
}

@media (min-width: 1400px) {
    .product-banner {
        margin: 0 auto 4rem;
        width: 140rem;
    }
}

.product-banner__text-container {
    margin-left: 4rem;
    padding-top: 2.5rem;
}

@media (min-width: 600px) {
    .product-banner__text-container {
        margin-left: 50%;
    }
}

@media (min-width: 768px) {
    .product-banner__text-container {
        margin-left: 14rem;
        padding-top: 5rem;
    }
}

@media (min-width: 800px) {
    .product-banner__text-container {
        margin-left: 16rem;
    }
}

@media (min-width: 992px) {
    .product-banner__text-container {
        margin-left: 2rem;
        padding-top: 5rem;
    }
}

@media (min-width: 1200px) {
    .product-banner__text-container {
        margin-left: 8rem;
        padding-top: 5rem;
    }
}

.product-heading {
    line-height: .9;
}

.product-add-to-cart__section {
    margin-bottom: 4rem;
} */

    .product-add-to-cart__section {
        margin-top: 4rem;
    }

    .product-add-to-cart__images-container {
        display: flex;
        flex-direction: row;
    }

    .product-viewer-thumbnails {
        display: flex;
        justify-content: center;
        margin-right: 2rem;
    }

    .product-viewer-thumbnails__wrapper {
        overflow: auto;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .product-viewer-thumbnails__item {
        /* margin: 0 10px 0 0; */
        margin-bottom: 1rem;;
        /* float: left; */
    }

    .product-viewer__thumbnail {
        display: block;
        background: #fff;
        cursor: pointer;
        padding: .4rem;
        line-height: 20px;
        border: 2px solid #dfe3e9;
        /* border-radius: 4px; */
        box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
        height: 10rem;
        width: 10rem;
        transition: all .2s ease-in-out;
    }

    .product-viewer__thumbnail--selected {
        border: 2px solid #66a92f;
    }

    .product-viewer-thumbnails__img {
        -webkit-user-drag: none;
        display: block;
        height: auto;
        width: 100%;
    }

.product-add-to-cart__image-container {
    display: flex;
    align-items: center;
    margin: 0 auto 2rem;
    width: 100%;
}

.product-add-to-cart__image {
    height: auto;
    width: 264px;
}


/* MEMBERSHIP PAGE */
.product-description__text-bottom {
    font-weight: bold;
    text-align: center;
}



.join-now-btn {
    display: inline-block;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
}

@media (min-width: 768px) {
    .join-now-btn {
        width: auto;
    }
}

.list-item {
    display: flex;
    margin-bottom: 1.5rem;
}

.list-item-number {
    display: block;
    background-color: #00c389;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    height: 3.4rem;
    line-height: 34px;
    margin-right: 1.2rem;
    width: 3.4rem;
    text-align: center;
}

.list-item-text {
    flex: 1;
    font-family: 'Designer',serif;
    padding-top: 4px;
}

/* MODALS */
.modal-header {
    padding: 2rem;
}

.modal-body {
    padding: 2rem;
}

.product-name-container {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 2rem;
}

.product-qty-select-box-container {
    padding: 1rem 0 2rem;
}

.close-popup-btn {
    margin-right: 1rem;
}

.memberSavings {
    font-size:14px !important;
}

.shoppingCartLiButton {
    background: #66a92f;
    border: 1px solid #66a92f;
    border-radius: .25rem;
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    color: #fff !important;
    line-height: 14.2857px;
    margin: 0;
    padding: 10px;
    text-decoration:none;
}

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

.shoppingCartLabelText {
    float:left;
    padding:10px 0px;
}

#loginModal .modal {
   box-shadow: 0 0 15px #888888;
}

#loginModal .modal-dialog {
   width:100% !important;
}

.shoppingCartLoginModal {
    width: 90%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: auto;
    display:block;
    overflow:scroll;
}

#loginModal .loginForm {
    margin:0px 20px;
}

#loginModal .loginForm .tab-content > .tab-pane {
 padding: 0px;
}


/* VUE ADD TO CART */
.pro-cont ul li img {
    width: 65px;
    height: 65px;
    border-radius: 100px;
}
.pro-cont ul li span {
    font-size: 12px;
    color: #7f8fa4;
    display: block;
    line-height: 12px;
    margin: 10px 0 0 0;
}

.pro-cont ul li {
/*    width: 30%;*/
/*      float: left; */

    text-align: center;
    margin: 0 2% 0 0;
}
.pro-cont ul {
    padding-left: 0px;
    display: flex;
    list-style-type: none;
}

.pro-cont h6 {
    color: #7f8fa4;
    font-size: 14px;
    font-weight: bold;
}
.flavor h6 {
    color: #7f8fa4;
    font-size: 14px;
    font-weight: bold;
    margin-top:20px;
}

.pro-cont {
    margin: 25px  0 0;
}

.pro-cont {}

.pro-cont input {
    display: none;
}

.pro-cont label {
    width: 100%;
    border: 1px solid #DFE3E9;
    box-sizing: border-box;
    border-radius: 4px;
    color: #7f8fa4;
    padding: 14px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 16px;
    cursor: pointer;
}

.pro-cont input[type="radio"]:checked+label {
    border: 1px solid #579a3f;
    color: #579a3f;
}
.flavor select {
    font-size: 20px;
    box-sizing: border-box;
    border-radius: 4px;
    color: #7f8fa4;
    padding: 14px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 16px;
    cursor: pointer;
    margin-right:10px;
}

#productQuantity select {
    font-size: 20px;
    box-sizing: border-box;
    border-radius: 4px;
    color: #7f8fa4;
    padding: 14px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 16px;
    cursor: pointer;
    margin-right:10px;
}

#productQuantity .add-to-cart-btn {
    margin-bottom: 0px;
    font-size: 21px;
}

.product-modal {
    max-width:700px;
    margin: 0px auto;
}

@media (max-width: 500px) {
    .product-modal-centered {
        max-width: 100%;
    }
}

#add-to-cart-error-popup {
    display:none;
}
#addToCartErrorButton,#addToCartErrorButtonCart {
    margin-left:20px;
}

 .text--blue {
   color:#1133bb !important;
 }
 .text--green {
   color:#00c389 !important;
 }
 .text--black {
   color:#000000 !important;
 }
 .text--darkgrey {
   color:#404040 !important;
 }
 .text--center {
   text-align:center;
 }

.text--orange {
    color: #f15a24;
}

.text--red {
    color: #dd1f1f;
}

.text--mid-blue {
  color:#0070C0;
}	
.large--link {
  font-size:24px;
}

.background--green {
    background-color: #00c389 !important;
}

.background--dark-green {
    background-color: #158e2b !important;
}

.background--blue {
    background-color: #1133bb !important;
}

.background--dark-blue {
    background-color: #171d4d !important;
}

.background--gold {
    background-color: #ffa723 !important;
}
.background--orange {
    background-color: #f15a24;
}

.background--red {
    background-color: #f12724;
}

 .corp-page-title-highlight {
   position:relative;
   color:white;
   background:#1133bb;
   padding: 10px 9px 0px 9px;
   display:inline-block;
   z-index:15;
 }
 .corp-page-title-highlight:after {
                position: absolute;
                z-index: -1;
                content: "";
                right: -12px;
                top: 0;
                height: 100%;
                width: 100%;
                background-color: inherit;
                -webkit-transform: skewX(-10deg);
                -moz-transform: skewX(-10deg);
                -ms-transform: skewX(-10deg);
                transform: skewX(-10deg);
                border-radius:6px;
 }

 .corp-page-title-highlight:before {
                z-index: -1;
                content: "";
                position: absolute;
                left: -12px;
                top: 0;
                height: 100%;
                width: 100%;
                background-color: inherit;
                -webkit-transform: skewX(-10deg);
                -moz-transform: skewX(-10deg);
                -ms-transform: skewX(-10deg);
                transform: skewX(-10deg);
                border-radius:6px;
 }
 .corp-page-title-highlight-point {
   position:relative;
   color:white;
   background:#1133bb;
   padding: 10px 9px 0px 9px;
   display:inline-block;
   z-index:15;
 }
 .corp-page-title-highlight-point:after {
                position: absolute;
                z-index: -1;
                content: "";
                top: 0;
                height: 100%;
                width: 100%;
                background-image: url("/images/corp-page-title-highlight-point-2.svg");
                background-repeat:no-repeat;
 }

 .corp-page-title-highlight-point:before {
                z-index: -1;
                content: "";
                position: absolute;
                left: -12px;
                top: 0;
                height: 100%;
                width: 100%;
                background-color: inherit;
                -webkit-transform: skewX(-10deg);
                -moz-transform: skewX(-10deg);
                -ms-transform: skewX(-10deg);
                transform: skewX(-10deg);
                border-radius:6px;
 }

 .video-thumbnails {
   width:400px;
   padding-bottom:20px;
 }
 .video-thumbnails_container {
    display: block;
    background: #fff;
    cursor: pointer;
    padding: .4rem;
    line-height: 20px;
    /* border-radius: 4px; */
    height: 30rem;
    width: 40rem;
    transition: all .2s ease-in-out;
 }
 .video-thumbnails_video_cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height:auto;
    width:100%;
    overflow:hidden
 }
 .video-thumbnails_video_container {
 }
 .video-thumbnails_button-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0px;
    opacity: .7;
 }
 .video-thumbnails_video_button {
    padding:.25rem 1.65rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color:#0050ad;
    color:white;
 }
 .video-thumbnails_date {
    width:100%;
    text-align:center;
    font-weight:bold;
 }
 .video-thumbnails_title {
    width:100%;
    text-align:center;
    font-weight:bold;
    font-size: 14px;
 }
 @media (max-width: 540px) {
    .video-thumbnails {
       margin: 0px auto;
    }
 }