/****** Override the Template ******/

.mainContent {
    padding-top: 25px !important;
    padding-bottom: 30px !important;
}

.mainContent p.lead {
    margin-bottom: 3px;
}

/* The following has to be here and not in cart.css */
.cart-summary-tax-shipping {
    display: flex; 
    justify-content: space-between;
    margin: 10px 19px 8px 19px;
}

.newsletter {
    width: auto !important;
}

@media screen and (min-width:768px) and (max-width:990px) {
    .navbar-default .navbar-header .navbar-brand {
        margin-top: 38px !important;
        max-width: 225px !important;
    }
}

@media screen and (max-width:990px) {
    .singleProduct.lightSection {
        height: auto !important;
        padding-bottom: 1rem;
    }
}

#sharingMethods, #continueShopping {
    margin-bottom:7px;
}

@media screen and (max-width:767px) {
    #sharingMethods {
        display:flex;
        justify-content: center;
    }
}

@media screen and (min-width:443px) {
    #continueShopping {
        display:flex;
        justify-content: flex-end;
    }
}

@media screen and (max-width:442px) {
    #continueShopping {
        display:flex;
        justify-content: center;
    }
}

@media screen and (min-width:991px) {
    .singleProduct .row {
        display: flex !important;
        align-items: center !important;
    }
}

/********* Supplement the Template **********/
.cart-summary-tax-shipping span {
    color: #ffffff;
}

.no-gutter  [class*='col-'], .no-gutter .column  {
    padding:0 !important;
}

/****** END Template Override ******/


/* Custom Styles */

.text-anchor {
    color: #432B2D;
    border-bottom: 1px dotted #432B2D;
}

.btn-green {
    background-color: #273925 !important;
}

.checkBtnArea .btn-primary {
    width: auto !important;
    min-width: 196px !important;
}

#login-or-register {
    background-color:#432B2D;
    color:white;font-size:120%;
    font-weight:700;
    margin:5px;
    padding:10px 10px 0 10px;
    text-align:center;
    border: 3px solid white;
    box-shadow: 0 0 0 5px #432B2D;"
}

#login-or-register a:hover {
    color: white;
}

.email-list-header {
    margin-bottom: 1rem !important;
}

form.email_list .btn-block:last-of-type {
    margin-top: 1.5rem !important;
}

.nav li.active a {
    background-color: #432B2D !important;
    color: white !important;
}
.nav li.active-dropdown a {
    background-color: rgb(240,240,240) !important;
}

.productsContent {
    padding-top: 2rem !important;
}

.productImage {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    padding: 0 10px !important;
}

.productImage img {
    height: 150px !important;
    width: auto !important;
    margin: 10px !important;
    box-shadow: 0 0 10px #000 !important;
}

.productCaption {
    text-align:center !important;
}

/* Override product masking color*/
.productImage .productMasking {
    background-color: rgba(163,145,99, 0.9) !important;
}


/* Home screen overrides */
.bannercontainer, .fullscreenbanner, .fullscreenbanner-container, .tp-bgimg {
    max-height: 550px !important;
}

.tp-caption rs-caption-1 {
    top:0px !important;
}

#home-content {
    background-image: url("/static/big_bag_store/img/RBJ-BGPattern.34c3bbe9279e.png") !important;
}

#home-content p {
    text-align: justify;
}

@media screen and (min-width:1200px) {
    #home-content p {
        font-size: 15px !important;
        line-height: 19px !important;
    }
    #home-content-text {
        padding: 2rem !important;
    }
}

@media screen and (min-width:992px) and (max-width:1199px) {
    #home-content p {
        font-size: 12px !important;
        line-height: 15px !important;
    }
    #home-content-text {
        padding: 1.5rem !important;
    }
}

@media screen and (min-width:768px) and (max-width:991px) {
    #home-content p {
        font-size: 9px !important;
        line-height: 12px !important;
    }
    #home-content-text {
        padding: 1rem !important;
    }
}

@media screen and (max-width:767px) {
    #home-content p {
        font-size: 9px !important;
        line-height: 12px !important;
    }
    #home-content-text {
        padding: 1rem !important;
    }
    #home-content-RBJ-image {
        margin-bottom: 1.5rem !important;
        min-height: 23rem;
        background-position: center; 
    }
}

/*.fullscreenbanner #home-content {
    background-image: url("/static/big_bag_store/img/RBJ-BGPattern.34c3bbe9279e.png") !important;
    max-height: 550px !important;
}*/
/*.fullscreenbanner .tp-dottedoverlay.twoxtwo {
    background-image: url("/static/big_bag_store/img/RBJ-BGPattern.34c3bbe9279e.png") !important;
    max-height: 550px !important;
}*/

.bannercontainer .text-wrapper {
/*    max-width:300px;*/
    text-align: justify;
    text-justify: inter-word;
    background-color: #4A2D2F;
    padding: 10px;
    width: 446px;
    /*border: 2px white solid;*/
}

.bannercontainer .text-wrapper p {
    color: white;
    text-transform: none !important;
    font-size: 14px;
}

/* Had to do the following series of media queries to handle the sizing of the text on the home screen */
@media screen and (min-width: 1306px) {
    .bannercontainer .text-wrapper p {
        font-size: 14px;
    }
    .bannercontainer .text-wrapper {
        width:446px;
    }
}

@media screen and (min-width: 1235px) and (max-width: 1305px) {
    .bannercontainer .text-wrapper p {
        font-size: 14px;
    }
    .bannercontainer .text-wrapper {
        width:446px;
    }
}

/*@media screen and (min-width: 1200px) and (max-width: 1234px) {
    .bannercontainer .text-wrapper p {
        font-size: 14px;
    }
    .bannercontainer .text-wrapper {
        width:446px;
    }
}

@media screen and (min-width: 1126px) and (max-width: 1199px) {
    .bannercontainer .text-wrapper p {
        font-size: 12px;
    }
    .bannercontainer .text-wrapper {
        width:35%;
    }
}

@media screen and (min-width: 1126px) and (max-width: 1199px) {
    .bannercontainer .text-wrapper p {
        font-size: 12px;
    }
    .bannercontainer .text-wrapper {
        width:35%;
    }
}

@media screen and (min-width: 1095px) and (max-width: 1125px) {
    .bannercontainer .text-wrapper p {
        font-size: 11.5px;
    }
    .bannercontainer .text-wrapper {
        width:38%;
    }
}

@media screen and (min-width: 1050px) and (max-width: 1094px) {
    .bannercontainer .text-wrapper p {
        font-size: 11px;
    }
    .bannercontainer .text-wrapper {
        width:38%;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1049px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.6;
        font-size: 11px;
    }
    .bannercontainer .text-wrapper {
        width:38%;
    }
}

@media screen and (min-width: 996px) and (max-width: 1024px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.5;
        font-size: 11px;
    }
    .bannercontainer .text-wrapper {
        width:38%;
    }
}

@media screen and (min-width: 992px) and (max-width: 995px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.4;
        font-size: 10.5px;
    }
    .bannercontainer .text-wrapper {
        width:37%;
    }
}

@media screen and (min-width: 900px) and (max-width: 991px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.4;
        font-size: 10.5px;
    }
    .bannercontainer .text-wrapper {
        width:33%;
    }
}

@media screen and (min-width: 861px) and (max-width: 899px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.35;
        font-size: 10px;
    }
    .bannercontainer .text-wrapper {
        width:33%;
    }
}

@media screen and (min-width: 845px) and (max-width: 860px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.35;
        font-size: 9.75px;
    }
    .bannercontainer .text-wrapper {
        width:33%;
    }
}

@media screen and (min-width: 800px) and (max-width: 844px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.3;
        font-size: 9.5px;
    }
    .bannercontainer .text-wrapper {
        width:33%;
    }
}

@media screen and (min-width: 770px) and (max-width: 799px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.25;
        font-size: 9.25px;
    }
    .bannercontainer .text-wrapper {
        width:33%;
    }
}

@media screen and (min-width: 720px) and (max-width: 769px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.2;
        font-size: 9px;
    }
    .bannercontainer .text-wrapper {
        width:42%;
    }
}

@media screen and (min-width: 700px) and (max-width: 719px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.15;
        font-size: 8.75px;
    }
    .bannercontainer .text-wrapper {
        width:42%;
    }
}

@media screen and (min-width: 645px) and (max-width: 699px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.1;
        font-size: 8.5px;
    }
    .bannercontainer .text-wrapper {
        width:42%;
    }
}

@media screen and (min-width: 620px) and (max-width: 644px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.09;
        font-size: 8.25px;
    }
    .bannercontainer .text-wrapper {
        width:38%;
    }
}

@media screen and (min-width: 600px) and (max-width: 619px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.09;
        font-size: 8px;
    }
    .bannercontainer .text-wrapper {
        width:38%;
    }
}

@media screen and (min-width: 580px) and (max-width: 599px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.08;
        font-size: 7.75px;
    }
    .bannercontainer .text-wrapper {
        width:38%;
    }
}

@media screen and (min-width: 550px) and (max-width: 579px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.1;
        font-size: 7.25px;
    }
    .bannercontainer .text-wrapper {
        width:35%;
    }
}

@media screen and (min-width: 530px) and (max-width: 549px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.1;
        font-size: 6.5px;
    }
    .bannercontainer .text-wrapper {
        width:33%;
    }
}

@media screen and (min-width: 500px) and (max-width: 529px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.1;
        font-size: 6.25px;
    }
    .bannercontainer .text-wrapper {
        width:30%;
    }
}

@media screen and (min-width: 470px) and (max-width: 499px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.1;
        font-size: 6px;
    }
    .bannercontainer .text-wrapper {
        width:30%;
    }
}

@media screen and (min-width: 462px) and (max-width: 469px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.1;
        font-size: 5.5px;
    }
    .bannercontainer .text-wrapper {
        width:30%;
    }
}

@media screen and (min-width: 440px) and (max-width: 461px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.1;
        font-size: 5.25px;
    }
    .bannercontainer .text-wrapper {
        width:28%;
    }
}

@media screen and (min-width: 430px) and (max-width: 439px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.1;
        font-size: 5px;
    }
    .bannercontainer .text-wrapper {
        width:28%;
    }
}

@media screen and (min-width: 400px) and (max-width: 429px) {
    .bannercontainer .text-wrapper p {
        line-height: 1.1;
        font-size: 4.75px;
    }
    .bannercontainer .text-wrapper {
        width:28%;
    }
}

.el-pagination {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

@media screen and (min-width: 768px) {
    .el-pagination {
        margin-bottom: 0 !important;
    }
}
@media screen and (max-width: 767px) {
    .el-pagination {
        margin-bottom: 3rem !important;
    }
}*/

.el-pagination {
    display: flex;
    align-items:center;
}
.el-pagination a {
    margin: 0 0.75rem;
    font-size:2rem;
    color: rgba(67,43,45, 0.7)
}

.el-pagination > a::first-of-type, .el-pagination > a::last-of-type {
    background:rgba(67,43,45, 0.7);
}

.endless_page_current {
    margin: 0 0.5rem;
    font-size:2.5rem;
    color: #432B2D
}

/* If an item was more than $1,000, then the formatting of the cart summary was messing up - so reduce font size on one item type in cart summary to fix... */
#cart_summary .media-heading span {
    font-size: 16px; /* was 18px */
}

/* Override Bootstrap standard because not included in theme */
.label-primary {
    background-color: rgba(163,145,99, 0.9)
}

/* Override Semantic UI - checkbox checkmark not rendering correctly */

.ui.checkbox label::before, .ui.checkbox label::after {
    margin-left: -5px;
}

.ui.checkbox {
    padding-left: 5px;
}

.sideBar .ui.checkbox label {
    font-size: 1.25rem;
}

/* Message blocks with notification (same text must be in both blocks) */
#msg_block_sm {
    margin-top:1.5rem;
    margin-bottom:1.5rem;
}
@media screen and (max-width: 989px) {
    #msg_block_lg {
        display: none;
    }
    #msg_block_sm {
        display: block;
    }
}
@media screen and (min-width: 990px) {
    #msg_block_lg {
        display: block;
    }
    #msg_block_sm {
        display: none;
    }
}