/*The first section correponds to the maximum width version of 1000 pixels ~~ */

@import url("customStylesBootstrap.css");

body {
    border-top: 0;
    font-family: Verdana, Arial, sans-serif;
}

.mobileOnly { display: none; }

ul.topLink li a {
    color: #573720;
}

.logo_row {
    padding: 10px 0;
}

div.logo img { width: 450px; }

.logo_right { 
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;       
    height: 70px;      
}
/*
.topNav_wrapper {
    border-bottom: 3px solid #573720;
    border-top: 1px solid #573720;
    min-height: 52px;
    background: #573720;
}
*/
.topNav_wrapper {
    border-bottom: 3px solid #b58c66;
    border-top: 1px solid #b58c66;
    min-height: 52px;
    background: #b58c66;
}
/*
.topNav_blueBackground {
    background: #573720;
    height: 52px;
}
*/
.topNav_blueBackground {
    background: #b58c66;
    height: 52px;
}

.menu_right {
    padding-right: 10px;
}

.searchBox {
    float: none;
    width: 750px;
    margin: 10px 0 0 10px;
}

.searchBox .search_btn {
    background: url("../images/search_iconCustomNew.png") no-repeat scroll center 2px rgba(0, 0, 0, 0);
    height: 30px;
    width: 30px;
    margin-right: 1px;
}

.searchBox Input.search_look {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}

.service_section {
    display: none;
}

.sidebar {
    margin-left: 0;
    width: 22%;
}

#home_sidebar .option_click {
    cursor:pointer ;
    color: #573720;
    font-weight:bold;
    text-decoration: none;
    display:block;
    padding: 10px 10px 10px 20px;
    font-size: 14px;
}

#home_sidebar .option_click.green {
    color: #2c840c;
}

#home_sidebar .option_click_menu {
    border-top: 1px solid #573720;
}

#home_sidebar .option_click_menu.green {
    border-top: 1px solid #2c840c;
}

.option_click_menu ul {
    list-style: none; margin-left: -10px;
}

.option_click_menu ul li { padding: 10px 0; }

.option_click_menu ul li a {
    color: #573720;
    text-decoration: none;
}

.option_click_menu.green ul li a {
    color: #2c840c;
}

#home_sidebar .option_click.brands {
    color: #5D5E60;
}

.main_content_images {
    margin-bottom: 30px;
}

div.option_brands { background: #573720; color: #fff; height: 13px; padding: 22px 20px; font-family: 'Montserrat', Verdana, sans-serif;
  line-height: 1; font-size:16px; text-transform:uppercase; width: 100%; display:block }

.NormalRed {
    color: #FF0000;
}

/*Internal store naviagtion*/
a.ectlink:link { color: #573720; }
a.ectlink:visited { color: #573720; }
a.ectlink:active { color: #573720; }

div.catnavigation {
    background-color: #b58c66;
    border-bottom: 1px solid #573720;
    border-radius: 5px;
    color: #ffffff;
}

div.catnavigation a.ectlink, div.prodnavigation a.ectlink { color: #FFFFFF; }

div.category {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05);    
    padding: 0;
   height:auto;
   min-height:207px /*190px*/;
   width: 46%;
}

div.category:hover {
    border: 1px solid #573720;
}

div.catname {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-repeat: repeat-x;
    color: #333;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
    border-left-color: #ddd;
    border-right-color: #ddd;
    border-top-color: #ddd;
}

div.catname a.ectlink:link {
    color: #573720;
}

    div.catname h1 {
        font-size: 1em;
        font-weight: normal;
        margin: 0;
    }

div.catdesc {
    float: left;
    width: 62%;
    font-size: 1em;
}

div.catdesc ul {
    margin-left: -40px;
    margin-top: 0;
    list-style: none;
}

div.catimage {
    width:33%;
    margin-right:10px;
}

img.catimage {
    width: 100%;
}

div.product {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05);    
    padding: 0;
    height: auto /*600px*/;
}

div.prodname {
    padding-top: 0;
    margin: 10px 0 20px;
}

    div.prodname h1 {
        font-size: 1em;
        font-weight: normal;
        margin: 0;
    }

div.listprice {
    float:none; padding: 0; display:none;
}

div.prodprice { float:none;margin-top:0; }

div.prodoptions {
    margin-bottom: 20px;
}
.prodoptions .option span {
    
    padding-left: 5px;
}
.prodoptions .option input {
    margin-top: 0px;
}
.proddiscounts.allproddiscounts {
    float: none;
}
.prodid {
    float:left; padding: 10px 0 0;
}

#divProductRCol { float:left;width:70%; }

h1.prodmanunumber {
    color:#573720;
    font-size: 18px; margin: 10px 0;
}

div.detailname {
    font-weight: bold;
}

div.detailid {
    width: 40%; float:none; margin-left: 0;
}

div.detailprice {
    color:#573720; width: 47%; margin-top: 7px;
}
div.detailoptions {
    width: 100%;
}
div.detaildescription { float:none; margin: 0; padding: 0; width: 100%; }

div.detailaddtocart {
    width: 100%; text-align: right; padding-bottom: 0; margin-top: 0px;
}

div.detailquantityinput {
    height: auto; margin-top: 0;
}

div.detailquantitytext {
    margin-top: 7px;
}

div.detailoptiontext { float:none; width:100%; }
span.detailoption {
    font-weight: bold;
}

.previousnext {
    border: 0px;
    text-align:right;
}

.footer_wrapper {
    /*
    background-color: #573720;*/
    background-color: #373837;
    padding-bottom:30px;
}
.footer_wrapper ul {
    padding-left: 0px;
}
.footer_wrapper li {
    list-style-type: none;
}
.align-center {
    text-align: center;
}

.footer_bottom_links {
    background-color: #573720;
}

.bottom_links {
    float: none;
    text-align: center;
}

.footer_bottom_links {
    color: #fff;
}

.footer_bottom_links a:hover {
    color: #e3ecf3;
}

.footer_custom_links {
    color: #573720;
    text-transform: uppercase;
    font-size: 16px;
    text-align:center;
    margin-bottom:10px;
    line-height: 1.5em;
}

.footer_custom_links a {
    color: #573720;
    text-decoration: none;
}

.footer_social_row {
    border: 0px;
}

.footer_wrapper a {
    color: white;
}

ul.footer_social_icon li a {
    color: #573720 !important;
    font-size: 2em;
}

.payment_icon {
    margin-right: 10px;
}

.slick-slider { padding: 10px; margin-bottom: 0px !important; border: 1px solid #573720; background: #fff;}

.slick-prev:before, .slick-next:before { color: #573720 !important; }

.mid_area_space { padding: 10px 0; }
.main_content_images img { /*width: 245px; margin: 0 5px 5px 0; */}
div.mc_img { float:left; margin: 0 17px; }

.main_content_top_link {
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #573720;
}

.main_content_top_link a {
    text-decoration: none;
    color: #573720;
}

.main_content_logos {
    margin-bottom: 10px;
}

.main_content_content {
    background: #e3ecf3;
    color: #573720;
    padding:10px 20px;
    margin-bottom: 10px;
}

.main_content_green { margin-bottom:30px; }

.green_header { color:#2c840c;border-bottom:5px solid #dbead7;text-align:center; margin-bottom:10px; }
.green_header h3 { margin-bottom:5px;font-size:24px; }
.green_img_box { float:left;width:20%; }
.green_img_box a { text-decoration: none; }
.green_img_img { height: 200px; text-align:center; }
.green_img_img.small { height: 160px; padding-top: 40px; }
.green_img_img img { width: 130px; }
.green_img_text { text-align:center;color:#2c840c;font-size:16px; }
.green_img_text a { text-decoration: none; }

div.prodnavigation.catnavwrapper { padding: 0px; width: 100%; margin-bottom: 80px; }
div.prodnavigation { background-color: #b58c66; border-bottom: 1px solid #573720; border-radius: 5px; color: #fff; }

.contact_box_left { background-color: #E3ECF3; border: 1px solid #573720; }
.contact_box_header { background: #573720; color: #fff; height: 13px; padding: 15px 20px; font-family: 'Montserrat', Verdana, sans-serif; line-height: 1; font-size:16px; text-transform:uppercase; margin:-10px -10px 10px -10px; }

table.mincart { background: #fff; width:100%; }
td.mincart { background: transparent; text-align:center;padding: 3px 0px; }
div.minicartcnt { padding: 10px; }
div.mcLNitems { text-align: left; border-bottom: 1px solid #eee; border-top: 1px solid #eee; margin: 0 -3px; }
.row1 { background-color: transparent; }
.row2 { background-color: #eee !important; }

.contact_box_body {
    background-color: #fff; padding: 10px;
}
.ectpattitle {
    color: #573720;
}

.custom-input-group {
    display: inline-flex;
}
input.form-control.cartinput { height:34px; width: 22px; }

select.sidefilter, input#inputValue99 { display: block;
  width: 100%;
  height: 34px;
  padding:  6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }

.btn-adjustprice { padding: 0 11px; }

.products_category_box h2, .features_products_wrapper h2 { color:#573720; }
a { color: #573720; text-decoration:none; }

.divPoliciesLeft { float: left; width: 70%; }
.divPoliciesRight { float: left; }


#inputValue99 {
    margin: 0 !important;
    width: 100px !important;
    padding: 0 !important;
}

.custom-form-group {
    margin-right: 30px;
}

table.cobtbl { background:none;border:0;border-collapse:collapse;}
td.cobhdr {
    background-color: #573720;
}

select.form-control, #divSidebarFilter input.form-control {
    height: 34px;
}

.custom-input-group-addon,
.custom-input-group-btn {
    width: auto;
}

input.buybutton, input.sccheckout, input.checkoutbutton, input.vieworderstatus, input.viewlicense, input.trackpackage {
    background-color: #573720; border-color: #573720; color: #FFFFFF;
}

input.buybutton:hover, input.sccheckout:hover, input.checkoutbutton:hover, input.vieworderstatus:hover, input.viewlicense:hover, input.trackpackage:hover {
    background-color:#e6e6e6; border-color:#adadad; color: #333;
}

.btn-primary {
    text-decoration: none;
}

div#divProgressBar { margin: 20px 0; }
div.divPBCol { float:left;width:20%;text-align:center; }
div.divPBIcon { font-size:30px;color:#bbb; }
div.divPBText { font-size:15px;color:#bbb;font-weight:bold; }
div.divPBIcon.blue { font-size:30px;color:#573720; }
div.divPBText.blue { font-size:15px;color:#573720;font-weight:bold; }

div.divCartLeftColumn { float: left; width: 76%; }
div.divCartRightColumn { float: left; width: 24%; }

td.cobll, td.cobhl {
    padding: 1em;
}

.cartquant {
    float: right;
    text-align: right;
}

td.cartbborder {
    border-bottom: 1px solid #bbb;
}

img.cartimage {
    width: 100px;
}

#grandtotalspan { color: #573720;font-weight:bold;font-size:18px;}
input#zip {
    float: right;
}
.page-container {
    padding-left: 15px;
}
.text-white {
    color: #fff;
}
.text-black {
    color: #000;
}
.bg-dark-blue {
    background-color: #0b4467;
}
.bg-tan {
    background-color: #b58c66;
}
.bg-light-blue {
    background-color: #3081c1;
}
.bg-dark-brown {
    background-color: #573720;
}
.bg-light-brown {
    background-color: #b58c66;
}
.subcat-link {
    color:black;
    font-size: 16px;
}
.category-header {
    text-align: left;
    font-size: 24px;
    padding: 10px 0px;
}
.category-column {
    padding-left: 30px !important;
}
.subcat-links ul {
    padding: 5px;
    margin-bottom: 10px;
    margin-left: 15px;
}
.subcat-links li {
    text-align: left;
}
.manu-title {
    margin: 40px 0px;
}
.manu-col {
    margin: 10px 0px;
}
.category-section-header {
    margin: 80px 0px 40px 0px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.section-title {
    font-size: 28px;
    font-weight: 700;
}
.main-page-top .section-title {
    font-size: 30px;
}
@media screen and (max-width: 800px) {
    .section-title {
        font-size: 20px;
        font-weight: 700;
    }
}
.flex-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}
.row-main-page-top {
    margin:0px;
}
.main-page-top {
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/*
@media screen and (max-width: 768px) {
    .main-page-top {
        padding: 0px;
        margin-top: 5px;
    }
}
*/
.main-page-image {
    
}
.main-page-intro {
    padding: 40px 15px;
    margin-right: 40px;
    border-radius: 3px;
    box-shadow: 1px 1px 7px grey;
}
@media screen and (max-width: 768px) {
    .main-page-intro {
        margin-right: 0px;
    }
    .logo_right { 
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-end;       
        height: 45px;      
    }
}
@media screen and (max-width: 768px) {
    .logo_right {
        justify-content: center;  
    }
}
@media screen and (min-width: 769px) {
    .main-page-intro {
        max-width: 500px;
    }
}

.main-page-intro .section-title {
    padding-bottom: 30px;
}
.main-page-desc {
    padding: 40px 20% !important;
    font-size: 18px;
    margin-top: 20px;
}
.main-page-desc .section-title {
    padding-bottom: 40px;
}
.intro-blurb {
    font-size: 20px;
}
.main-page-bottom {
    padding: 30px 10px;
    margin-top: 20px;
}
.align-left {
    text-align: left;
}
.btn-manufacturer {
    background-color: #0b4467;
    color: #FFFFFF;
    padding: 10px 30px;
    min-width: 200px;
    font-size: 20px !important;
    margin: 10px 0px;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
.btn-manufacturer:hover {
    color: #e5e5e5 !important;
}
.btn-contact {
    background-color: #fff;
    color: #000;
    padding: 10px 30px;
    min-width: 200px;
    font-size: 20px !important;
    margin: 30px 0px;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
.btn-contact:hover {
    color: #e5e5e5 !important;
}

/* This is the first breakpoint and is for screen sizes between 800 and 780 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below ~~ */
@media screen and (max-width: 800px) { 
    div.logo img { width: 300px; }
    .searchBox { width: 640px; }
    .service_section { display: inherit; }
    .menu_right2 .searchBox { width: 455px;}
    .green_img_img { height: 145px; }
    .green_img_img.small { height: 120px; padding-top: 25px; }
    .green_img_img img { width: 100px; }
     div.category { height: auto; width: 100%; margin-left: 0px; min-height:inherit; }
    div.catdesc { width: 61%; }
}

/* This is the second breakpoint and is for screen sizes between 780 and 640 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below ~~ */
@media only screen and (max-width: 780px) {
    div.option_brands { width: 100px; }
    .green_img_box { float:left;width:50%; }
    .divPoliciesLeft { width: 100%; }
    div.divCartLeftColumn {  width: 100%; }
    div.divCartRightColumn { width: 100%; }
   
}

/* This is the third breakpoint and is for screen sizes between 640 and 500 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below ~~ */
@media screen and (max-width: 640px) { 
    .logo_right { text-align: center; width: 100%;}
    .logo_right {float: none;}
    .green_img_box { width:100%; }
    .green_img_img { height: auto; }
    .green_img_img.small { height: auto; }
    div.option_brands { width: 96%; }
    .sidebar { width: 100%; }
    div.product { height: auto; width:100%;}
}


/* This is the fourth breakpoint and is for screen sizes between 500 and 360 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below ~~ */
@media screen and (max-width: 500px) { 
    .menu_right2 .searchBox { width: 330px;}
    div.logo img { width: 300px;}
    .green_header h3 { font-size: 16px; }
    .green_img_text { font-size: 14px; }
    .mobileOnly { display: none; }
    div.option_brands { width: 91%; }
    #divProductRCol { width: 95%; }
    
}


/* This is the fifth breakpoint and is for screen sizes between 360 and below. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below ~~ */
@media screen and (max-width: 360px) { 
    .menu_right2 .searchBox {width: 270px;}
    div.logo img { width: 214px;}
    .mobileOnly { display: normal; }
    .desktopOnly { display: none !important; }
}


@media screen and (max-width: 320px) { 


}

/* The Modal (background) */
.modalPic {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
}

/* The Close Button */
.closeModal {
    color: white !important;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

    .closeModal:hover,
    .closeModal:focus {
        color: #999;
        text-decoration: none;
        cursor: pointer;
    }

/* Hide the slides by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Caption text */
.caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
}

img.demo {
    opacity: 0.6;
}

.active,
.demo:hover {
    opacity: 1;
}

img.hover-shadow {
    transition: 0.3s;
}

.hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}