/*
Theme Name: Craft Master Growlers
Theme URI: http://www.craftmastergrowlers.com/
Description: Custom theme created for Craft Master Growlers
Version: 1.0
Author: Zach Mikulec
Author URI: http://www.brightononline.com/
Tags: blue, custom header, fixed width, two columns, widgets

    This theme was designed and built by Zach Mikulec,
    whose blog you will find at http://www.brightononline.com/

    The CSS, HTML5 and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php

*/

@font-face {
    font-family: 'roboto-regular';
    src: url('/wp-content/themes/craftmaster/fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: optional;
}

/*@font-face {*/
/*font-family: 'revicons';*/
/*src: url('/wp-content/plugins/revslider/public/assets/fonts/revicons/revicons.woff') format('woff');*/
/*font-weight: normal;*/
/*font-style: normal;*/
/*font-display: optional;*/
/*}*/


/*@font-face {
font-family: 'roboto-bold';
src: url('/wp-content/themes/craftmaster/fonts/Roboto-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'roboto-italic';
src: url('/wp-content/themes/craftmaster/fonts/Roboto-Italic.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}                              */

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-size: inherit;
    color:#333;
    font-family: inherit;
    line-height: 1.3em;
}

body{font-size:20px; font-family: 'roboto-regular', sans-serif;}


.slider-font{
    font-family: 'roboto-regular', sans-serif !important;
}


a{
    color: #0283e5;
    text-decoration: none;
}

.woocommerce-tabs ol li, .woocommerce-tabs ul li{
    margin-left:40px;
}

#slider-box{
    max-width:unset !important;
}

#top-area{
    width: 100%;
    max-width:100%;

    /*    background-color: #fefefe;*/
    /*    box-shadow: 0px 1px 8px rgba(0,0,0,.5);*/
    position: -webkit-sticky;
    position:sticky;
    top: 0px;
    z-index: 100;
    transition: background .3s;
}

#top-area-bar{
    width: 100%;
    height: 2px;
    max-width:100%;
}

#cta-area{
    height: 42px;
    color: #000;
    position: relative;
    display: flex;
    width:100%;
    max-width:100%;
    justify-content: space-between;
}

#logo{
    padding: 5px;
    z-index: 200;
    flex-shink:0;
}


#contact-area{
    min-width: 200px;
    z-index: 501;
    padding-right:10px;
    display:flex;
    justify-content:flex-end;
    height:40px;
    width:100%;
}

.woocommerce-variation-add-to-cart, .simple-quantity-checkout{
    display:grid;
    grid-template-columns:1fr;
    grid-gap:20px;
}

#cart-area{
    display:grid;
    grid-template-columns:1fr 3fr;
    justify-items: center;
    align-items:center;
}


.quantity-checkout-mix{
    display:grid;
    grid-template-columns: 1fr 2fr;
}

/** cart **/
#cart-outline{
    display:grid;
}

.cart-product-grid{
    display:grid;
    grid-template-columns: 6fr 2fr 2fr 2fr;
    padding:25px 0px 25px 0px;
    border-bottom:1px solid #000;
    align-items:center;
}

.cart-product-grid .pic-name-group{
    display:grid;
    grid-template-columns: 1fr 3fr;
    align-items:center;
}

.cart-product-details{
    display:grid;
    grid-gap:5px;
}

.woocommerce .product-thumbnail img {
    width: 100px;
    height: auto;
    border: 1px solid #3d3d3d;
    max-width: 100%;}

dl.variation{
    display:grid;
    grid-template-columns:1fr 3fr;
    grid-gap:2px;
    padding:10px;
}

dl.variation dd p{
    padding:0px;
    margin:0px;
}

dl dt, dl dd p, dl.variation dd p {
    font-size: 15px;
    padding: 0px !important;
    margin: 0px !important;
}

dl.variation dt{
    color:#000;
    font-weight:bold;
}

.cart-collaterals .shop_table tbody tr th{background:unset;}


/** cart header icon **/

#cart-container{
    grid-column:2/3;
    justify-self: end;
}
#the-cart{

    position:absolute;
    top:-12px;
    left:10px;
    color:#fff;

}


#the-cart li a{
    color:#fff;
}
.phone-call{
    font-size: 40px;
}

.phone-number{
    font-size: 40px;
}

.phone-number a{
    color:#DB3600;
    font-size: 40px;
}


#cred{
    padding: 4px 0px;
    height: 40px;
    display: flex;
    width: 100%;
    cursor: pointer;
    z-index: 501;
    text-align:right;
}

.message{
    background:#f3f3f3;
    opacity: .95;
    color:#FFF;
    position:relative;
    width:100%;
    min-height:250px;
    padding:20px 20px 15px 20px;
    transition:top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    overflow:hidden;
    box-sizing:border-box;
    display:none;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 8px 10px rgba(0,0,0,.6);
    max-width:100%;

}
.message h1{color:#FFF;}

#toggle{position:absolute;appearance:none;display:none;cursor:pointer;left:-100%;top:50px;}

#toggle + label{position:absolute;cursor:pointer;padding:10px;background:#26ae90;width:100px;border-radius:3px;padding:8px 10px;color:#FFF;line-height:20px;font-size:12px;text-align:center;-webkit-font-smoothing:antialiased;cursor:pointer;margin:20px 50px;transition:all 500ms ease;}

#toggle + label:after{content:"Open"}

.container{transition:margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);padding:5em 3em;}

#toggle:checked ~ .message{top:0;display:block;}

#toggle:checked ~ .container{margin-top:250px;}

#toggle:checked + label{background:#dd6149;}

#toggle:checked + label:after{content:"Close"}

#static-cta{
    flex-grow: 4;
}



#cta-list{
    list-style: none;
    width: 90%;
    margin: 0px auto;
    max-width:100%;
}

ul#cta-list li{
    width: 100%;
    margin: 10px 0px;
    max-width:100%;
}

#cta-list li a{
    font-size: 25px;
    width: 100%;
    padding: 10px;
    color: #f3f3f3;
    transition: background .15s;
    display: block;
    background: #4a4a4a;
    text-decoration: none;

}

#cta-list li a:hover{
    background-color: #ae3a14;
}


.zposts{
    margin-top:75px;
    width:100%;
    max-width:100%;
}

#zcat{
    display:grid;
    grid-template-columns: 6fr 2fr;
    grid-gap:20px;
}

#zcat-posts{
display:grid;
    grid-gap:50px;
}

#zcat-column{

}

#post-categories{
    list-style:none;
    margin:15px auto;
    text-align:center;
}


#post-categories .category{
    padding: 10px 5px;
    background: #f4f4f4;
}
#post-categories .category:nth-child(odd){ background:#fff;}


#bbb{

    padding: 5px;
}

#social-icons{
    flex-shrink: 2;
}
.social-icon{
    width: 50px;
    height: 40px;
}

.wp-block-image img{
    height: auto;
}


#phone-number-head{
    font-size: 40px;
    font-weight: bold;
}

.woocommerce-breadcrumb{
    padding: 10px 0px 2px 0px;
    margin: 15px 0px 0px 250px;
}

#second-search{
    display: none;
}


#nav-area{
    width: 100%;
    height: 50px;
    background-color: #293227;
    border-top: 1px solid #5f5f5f;
    box-shadow: 0px 4px 6px rgba(0,0,0,.6);
    max-width:100%;
}

/* RESPONSIVE MENU */

#menu-tip{
    display: none;

}

.search-results{

    text-align: center;
}

.search-results .pagetitle{
    font-size: 28px;
    margin: 30px 0px;
}

.page-nav{
    display: flex;
    justify-content: center;
    width: 50%;
    margin: 35px auto 20px auto;
    max-width:100%;

}

.search-result{
    width: 700px;
    margin: 0px auto;
    text-align: left;
    max-width:100%;
}

.sidenav{
    min-height: 50px;
    /*    box-shadow: 0px 1px 5px rgba(0,0,0,.2);*/

    /*    background: url('/wp-content/themes/exchilerator/images/steel-bak.jpg');*/
}

.closebtn {
    display: none !important;
}


#open-menu{
    display: none;
}

#open-menu2
{
    width: 50px;
    text-align: left;
    margin-top: 8px;
    padding: 0px;
    padding: 2px;
    background: #fff;
    display: block;
    z-index:500;
    display:none;
    text-decoration: none;
    position:relative;
}

#open-menu2 a span.mmenu-text{
    text-decoration: none;
}

.icon-bar {
    width: 90%;
    height: 4px;
    background-color: #252525;
    display: block;
    margin: 8px auto;
    max-width:100%;
}

#nav-push {
    transition: margin-left .0s;


}


#open-menu{
    display: none;
}

#open-menu2
{
    width: 50px;
    text-align: left;
    margin-top: 8px;
    padding: 0px;
    padding: 2px;
    background: #fff;
    display: block;
    z-index:500;
    display:none;
    text-decoration: none;


}

#open-menu2 a span.mmenu-text{
    text-decoration: none;
}

.icon-bar {
    width: 90%;
    height: 4px;
    background-color: #252525;
    display: block;
    margin: 8px auto;
    max-width:100%;
}

#nav-push {
    transition: margin-left .0s;


}


#nav-area a{
    color: #fff;
}



.menu-main-container{
    overflow:no-display;
    padding: 0px 0px 0px 250px;
}

.menu-main-container ul {
    margin: 0px auto;
    overflow: hidden;
    display: flex;
    background-color: #293227;
    list-style: none;
    min-width:500px;
    max-width:100%;
}

.menu-main-container ul:nth-child(1) > li:first-child a{
    background:#49380f;
    border: 1px solid #b28c33;
    padding: 10px 20px;

}

.menu-main-container ul:after {
    content: ""; display: block;
}

.menu-main-container ul li{
    border-left: 1px solid #687465;
}

.menu-main-container ul li a{
    font-size: 22px;
    padding: 11px 20px;
    text-decoration: none;
    background-color: #293227;
    color: #fafafa;
    display: block;
    transition: background .05s;
    min-width:50px;
}

/*.menu-main-container ul li:nth-child(n+6) a{
    background-color: #db3600;
    color: #fafafa;
    font-size: 22px;
    padding: 9px 20px;
    text-decoration: none; 
/*    background-color: #293227;*/
/* color: #fafafa;
 display: block;
 transition: background .05s;
 min-width:50px
}

.menu-main-container ul li:nth-child(n+6) ul li a{
 background:#293227;
}


.menu-main-container ul li:nth-child(n+6) a:hover{
   background: #db3600;
   color: #000;
}                 */

#nav-area .menu-main-container ul li a:hover{
    background: #e0b943;
    color: #000;
}

.menu-main-container ul li:hover > ul{
    visibility: visible;
    opacity: 1;

}

.menu-main-container ul ul{
    display: block;

}

.menu-main-container ul ul.sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #293227;
    min-width: 160px;
    overflow:hidden;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    transition: visibility .001s, opacity .001s;
    border-top: 4px solid #000;
}
.menu-main-container ul ul li {
    background: #000;
    color: #fff;
    display: block;
}
.menu-main-container ul ul li a {
    padding: 15px 40px;

    color: #fff;
    display: block;
}
#nav-area      .menu-main-container ul ul li a:hover {
    background: #e0b943;
    color:#000;
}

#main-menu-bar > a
{
    display: none;
}

/* original menu */


#menu-zach-menu{
    margin: 0px auto;
    overflow: hidden;
    display: flex;
    background-color: #293227;
    list-style: none;
    min-width:500px;
}

#menu-zach-menu li{

    border-left: 1px solid #687465;



}


#menu-zach-menu li a{
    font-size: 22px;
    padding: 9px 20px;
    text-decoration: none;
    background-color: #293227;
    color: #fafafa;
    display: block;
    transition: background .15s;
    min-width:50px;
}

#menu-zach-menu li:nth-child(n+6) a{
    background-color: #db3600;
    color: #fafafa;
}

#menu-zach-menu li a:hover{
    background: #d6be1d;
    color: #000;
}

#menu-zach-menu li:nth-child(n+6) a:hover{
    background: #ff4300;
    color: #000;
}


#menu-zach-menu li ul.sub-menu{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #293227;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    transition: visibility .1s, opacity .1s;
    border-top: 4px solid #000;

}

#menu-zach-menu li ul.sub-menu li{
    background: #000;
    color: #fff;
    display: block;
}

#menu-zach-menu li ul.sub-menu li a{
    background: #535248;
    font-size: 20px;
    padding: 10px;
}

#menu-zach-menu li ul.sub-menu li a:hover{
    background: #293227;
    color: #dcdb79;
}

#menu-zach-menu li:hover ul.sub-menu{
    visibility: visible;
    opacity: 1;
}


#slider{
    margin: 5px 0px 10px 0px;
    box-shadow: 0px 0px 12px rgba(0,0,0,.2);
}




.wrapper{
    width: 1280px;
    margin: 0px auto;
    position: relative;
    max-width:100%;

}

#header {
    width: 1100px;
    max-width: 100%;
    background: #fff;
    margin: 0px auto;
}

.pbw-block{
    width:75%;
    max-width:100%;
    margin:20px auto;
    border: 2px solid #000;
    padding:25px;

}

.pbw-block h3 strong{
    font-size:30px !important;
    text-align:center;
    line-height: normal;
}



#wrapper {
    width: 1100px;
    display: block;
    max-width: 100%;
    margin: 0px auto;
    background: rgba(255,255,255,0.5);

}

#header #icons{
    position: absolute;
    top: 0px;
    left: 650px;
    font-size: 13px;
    font-weight: bold;
    text-align: right;
    color: #000;
}

#home-intro{
    padding: 40px 0px;
}

.zyt-embed{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    margin: 0px auto;
}

.zyt-embed iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.home-h2{
    font-size: 45px;
    padding: 20px;
    text-align: center;
    line-height:initial;
}

#growler-visual{
    display:flex;
    margin: 50px 0px;
}

.visual-point{
    padding-bottom: 80px;
}

.visual-point p{
    font-size: 18px;
}

#growler-visual .left{
    flex-shrink: 1;
}

#growler-visual .middle{
    flex-shrink: 0;
}

#growler-visual .right{
    flex-shrink: 1;
}

.clearHeader{

}

.darkHeader {
    /*background-color: rgba(107,107,107,0.66);*/
    background: #fff;

}

.home-h4{
    font-size:25px;
    font-style:italic;
    font-weight:50;
    line-height: 1.5;
    text-align: center;
    width: 80%;
    margin: 0px auto;
    padding: 20px 0px 40px 0px;
    max-width:100%;

}

.build-yours{
    width: 70%;
    margin: 0px auto;
    background-color:#e0a20f;
    padding: 15px 30px;
    font-weight: bold;
    transition: background .15s, box-shadow .3s;
    color: #000;
    border-radius: 6px;
    display: block;
    font-size: 35px;
    text-align:center;
    box-shadow: 0px 0px 2px rgba(0,0,0,.1);
    border: 1px solid grey;
    max-width:100%;
}

.build-yours:hover{
    background:#ecab0f;
    text-decoration:none;
    box-shadow: 0px 6px 8px rgba(0,0,0,.4);
}


/* home page reviews */

.review-space{
    background: #293227;
    margin: 50px 0px;
}

.review-hr{
    display: none;
    color:#fff;
    height:5px;
    width: 100%;
    margin:0px auot;
    background:#fff;
    max-width:100%;
}

#review-block{

    padding: 50px 0px;

}

#home-review-h3{
    color:#f4f4f4;
    font-size: 45px;
    text-align:center;
    padding-bottom: 30px;
}

#review-wrapper{
    display:flex;
    flex-wrap: none;
    justify-content: space-between;
    margin-top: 20px;
}

#review-wrapper .review{
    color:#fff;
    font-style:italic;
    width: 40%;
    font-size: 20px;
    max-width:100%;
    position:relative;
    min-height:400px;
}

blockquote{
    position:relative;


}

blockquote .review-quote{
    font-size: 21px;
    color:#f3f3f3;
    padding: 40px 0px 0px 0px;
}

blockquote .review-quote:before {
    content: open-quote;
    font-weight: bold;
    font-size:100px;
    color:#bfbfbf;
    position:absolute;
    /*top:30px;*/

    vertical-align: top;


}
blockquote .review-quote:after {
    content: close-quote;
    font-weight: bold;
    font-size:100px;
    color:#bfbfbf;
    position: absolute;
    bottom: -50px;

}

.review-name{
    color:#fff;
    position: absolute;

    margin:50px;
    right:0px;

}

.female-head{
     float: right;
}

.male-head{ float: left;}


/* generic site content */
h1{
    font-size: 34px;
    padding: 10px 0px;
}

.home-h1{
    font-size:45px;
    padding:0px 0px 30px 0px;
    line-height:normal;
}

#content {
    line-height: 1.35em;
    margin-top:75px;
}

.no-top-content{
    margin-top:5px !important;
}


#content p{
    padding: 10px 0px;
}

.buttonp{
    margin-top:20px;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

h3.pageh3 {
    text-align: center;
    padding: 10px 0px;
}

.content-area{
    margin-top: 0px;
}

/* my account area */
.woocommerce-MyAccount-navigation ul{
    display: flex;
    flex-direction:row;
    list-style:none;
    justify-content: space-between;
    margin: 0px 0px 20px 0px !important;
    padding: 0px 0px 10px 0px !important;
    border-bottom: 1px solid #000;
}


/* about section */

#john-bio{
    background:  url('/wp-content/themes/craftmaster/images/john-summit.jpg');
    width:100%;
    max-width:100%;

    background-repeat: no-repeat;
    background-position:-250px -200px;
    position:relative;
    display:flex;
    justify-content:flex-end;
    border-radius:12px;
}

#john-text{
    width:40%;
    align-self:flex-end;
    background:rgba(255,255,255,.3);
    padding:20px;
}

.about-h2{
    width:100%;
    max-width:100%;
    text-align:center;
    font-size:42px !important;
    padding:50px 0px !important;
    line-height:normal;
}

#about-growl-box{
    width:100%;
    display:flex;
    justify-content: space-around;
    max-width:100%;
}

.img-left-pad{
    padding:20px;
}

#about-growler-image{
    order:2;
    width:60%;
}

#about-growler-image img{
    border-radius:12px;
}

#about-grwoler-text{
    order:1;
    width:38%;
}

#maint-images{
    width: 100%;
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
}

#maint-images div{align-self:center; padding: 20px;}

.maint-box{

    width: 75%;
    margin: 40px auto 0px auto;
}

.maint-box h2{

    color: #940000;
    font-weight:bold;
    font-size:40px !important;
    line-height:normal !important;
    /*    padding: 20px 30px !important;*/
    text-decoration:underline;
    margin-bottom: 20px;
}


.maint-item{
    padding: 10px 0px;

    margin: 0px auto;
}

.maint-cause{
    font-weight:bold;
    font-size:25px;
    color:#900000;

}

.maint-action{
    font-weight:bold;
    font-size:25px;
    color:#357d00;
}

.maint-maint{
    font-weight:bold;
    font-size:25px;
    color:#b97a00;
}

h5.underline{
    padding-bottom:3px;
    font-size:20px;

}

/* wholesale items */
.wwlc-register{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,550px));}

.wwlc-register input[type="text"], .wwlc-register input[type="email"], .wwlc-register input[type="password"],.wwlc-register input[type="tel"], .wwlc-register select{
    padding: 5px !important;
    width:90% !important;
    background: #fffbf3 !important;
    border: 1px solid #000;
    border-radius: 4px;
}

#wwlc_address_2_field{align-self:end;}
/* woocommerce overrides */


.wwlc-register .form-controls-section{
    text-align: center;
    grid-column: 1 / -1;
}




#product-header-container{
    display:flex;
    width: 100%;
    padding: 10px 0px;
    max-width:100%;
}

#product-header-container header{
    width: 100%;
    max-width:100%;

}

#product-header-right{
    width: 100%;
    text-align: right;
    padding-right:5%;
    max-width:100%;
}

#category-description{
    padding: 20px;
}

.woocommerce-result-count{
    font-size: 16px;

}

.products a{
    color:#000;
}

.products a:hover{
    text-decoration: none;
}

.product-title{
    min-height:50px;
}


.onsale{display:none;}


.price{
    font-weight:bold;
    font-size:18px;
}

.retailer-text, .price-text{font-size:18px;}



.woocommerce-Price-currencySymbol{
    font-size:18px;
    color:#000;
}

.single_variation_wrap .woocommerce-Price-amount, .single_variation_wrap .woocommerce-Price-currencySymbol{

}
.product-price .price del bdi .woocommerce-Price-currencySymbol, .product-price .price del .woocommerce-Price-amount bdi{font-size:20px; color:grey;}

div.woocommerce-variation.single_variation div.product-price.var-margin div.price span.price, div.woocommerce-variation.single_variation div.product-price.var-margin div.price span.price{margin: 0px !important;}

.single_variation_wrap .wc-pao-addon-name .woocommerce-Price-amount, .single_variation_wrap .wc-pao-addon-name .woocommerce-Price-currencySymbol{
    font-size:15px;
}

#addon-153-add-custom-engraving-0{
    padding:10px;
    background:#f3f3f3;
    font-size:18px;
    border:1px solid grey;
    margin: 10px 0px 0px 0px;

}

.wc-pao-addon-chars-remaining{
    margin-left:10px;
    font-size:16px;
}

ul.products{

        display:grid;
        grid-template-columns: repeat(auto-fit, 305px);
        list-style: none;
        width:1280px;
        max-width:100%;
        grid-gap:40px 20px;
        justify-items:center;
        margin-bottom:20px;
        justify-content: center;

}

.cross-sells ul.products{

        display:grid;
        grid-template-columns: repeat(auto-fit, 200px);
        list-style: none;
        max-width:100%;
        grid-gap:20px;
        justify-items:center;
        margin-bottom:10px;
        justify-content: center;
        width:100%;
        padding:0px;
}

.cross-sells .shop-thumb img{
    width:125px;
    height:auto;
}
.cross-sells .product-title{
    min-height: 75px;
}
.cross-sells .product-title h2 a{
    font-size:17px;
}

.cross-sells .products .button{
    font-size:17px;
}

.upsell-cart{
    grid-column: 1 / -1;
    display:grid;
    grid-template-columns: 3fr 2fr;
}

.var-margin{
    margin-bottom:20px;
}

.tupac{
    padding: 10px;
    text-align:center;
    background: #f4f4ca;
    font-weight:bold;
    color:#000;
    margin-bottom:20px;
}


.products .product{
    width: 300px;
    padding: 20px;
    list-style:none;
    margin: 10px;
    box-shadow: 0px 0px 1px rgba(0,0,0,.2);
    max-width:100%;
}

.products .product h2{font-size:17px; font-weight:normal;}

.thumbcar{
    width: 90%;
    margin: 0px auto;

}

.products .button, a.add_file{
    /*    background:#c7c386;*/
    padding: 5px 20px;
    width: 80%;
    margin: 10px auto 0px auto;
    display: block;
    color: #000;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    background: linear-gradient(to bottom,#f7dfa5,#f0c14b);
    box-shadow:0px 1px 2px rgba(0,0,0,.4);
    max-width:100%;
}

.button.product_type_simple{
    transition: background 0s;
}

.products .button:hover{
    /*       background:#e2d816;*/
    background: #f0c14b;
}

.products  li{
    width: 100%;
    max-width:100%;

    overflow: hidden;
    text-align: center;
}

.products  li a img{
    height: 185px;
    width: auto;
    overflow: hidden;
    margin: auto;
}

.products .product a h2{
    height: 80px;
    font-size: 18px;
}

/*cart stuff */
.summary{
    width: 100%;
    max-width:100%;
}

.cart{
    padding: 20px 0px;
}

.quantity{
    padding: 10px 0px;
}

.quantity .screen-reader-text{
    font-size:22px;
}

.quantity input.qty{
    font-size: 22px;
    padding: 5px;
    width:100px;

}

.product-total{
    width:60%;
}

.single_add_to_cart_button, .checkout-button, .zbutton, #wwlc-register{

    background:#e0a20f;
    color:#000;
    text-transform:uppercase;
    transition:background .15s, box-shadow .15s;
    padding: 15px 50px;
    cursor: pointer;
    border: 1px solid #575757;
    border-radius: 4px;
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    display:block;
    text-align:center;
    max-width:100%;
}


.cart .single_add_to_cart_button:hover,.checkout-button:hover, .zbutton:hover{
    background:#ecab0f;
    box-shadow:0px 6px 8px rgba(0,0,0,.4);
    text-decoration:none;

}

.woocommerce-checkout .woocommerce-NoticeGroup{
    grid-column: 1 / -1;
}


#reviews textarea{
    width:100%;
    max-width:100%;
}


.small-button-version{
    width: auto;
    background:#293227;
    color:#e0a20f;
    margin:0px auto;
}

.small-button-version:hover{
    background:#464c45;
}

.variations_form{
    padding: 0px 0px 30px 0px;
}

.variation-title{
    padding: 10px 0px;
    font-size: 22px;
    background: #293227;
    color:#EEAC0E;
    text-align:center;
    font-weight:bold;
}

table.variations{
    padding:15px ;
    background:#f3f3f3;
    margin-bottom:20px;
    margin: 0px auto 30px auto;
    max-width:100%;
}

.variation-table{
    background:#f3f3f3;
}

table.variations td{ padding: 10px 0px;}

table.variations label{ font-size: 19px; padding: 0px 20px 0px 0px;}

table.variations select {font-size: 16px; padding: 5px 15px;}

.reset_variations{
    padding:19px;
}

.woocommerce-notices-wrapper{
    background:#f3f3f3;

}

.woocommerce-notices-wrapper .button{
    padding:5px 10px;
    display:inline-block;
    background-color:#14a025;
    font-size:15px;
    color:#000;
    width: auto;
}

a.wc-forward{
    padding: 20px;
}

.woocommerce-message{
    font-size:25px;
    padding: 10px;
    background-color:#fffbd8;
}



.cart-collaterals{

}


/* checkout */


.checkout {
    display: grid;
    grid-template-columns: 5fr 4fr;
    grid-gap: 30px;
}


#checkout-area{
    padding: 35px;
    border: 1px solid;
    border-radius: 6px;
}



.woocommerce-billing-fields h3{
    font-size:20px !important;
    padding:10px !important;
    background:#293227;
    margin:15px 0px;;
    color:#f3f3f3;

}

.woocommerce-billing-fields{

}

.woocommerce-billing-fields__field-wrapper{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    grid-gap: 2px 20px;
    max-width:100%;
    margin: 0px auto;
}

.woocommerce-billing-fields__field-wrapper p{
    padding: 8px 0px !important;
    display:flex;
    flex-wrap:wrap;
    align-self:flex-end;

}


.woocommerce .product-thumbnail{
    width: 125px; max-width:100%;
}

.woocommerce-billing-fields__field-wrapper p label{
    width: 100%;
    font-size:18px;
    align-self: center;
    padding: 5px 0px;
}

.woocommerce-billing-fields__field-wrapper input[type=text], .woocommerce-billing-fields__field-wrapper input[type=tel], .woocommerce-billing-fields__field-wrapper input[type=email]{
    padding:5px 10px;
    font-size:18px;
    align-self: center;
    width:100%;
    max-width:100%;

    border:1px solid #d9d9d9;
}

.woocommerce-billing-fields__field-wrapper span.woocommerce-input-wrapper{width:100%;}


#billing_first_name_field, #billing_last_name_field, #billing_country_field, #billing_address_1_field{

}

#billing_company_field{
    width: 100%;
}

#billing_company_field span, #billing_company_field span.woocommerce-input-wrapper input {max-width:400px;}

.select2-container--default .select2-selection--single .select2-selection__rendered{}



.woocommerce-shipping-fields h3{
    font-size:25px !important;
    padding:10px !important;
    background:#293227;
    margin:10px 0px;;
    color:#f3f3f3 !important;
}

.woocommerce-shipping-fields h3 label span{
    color:#f3f3f3;
    font-size:20px !important;
    padding:10px !important;
}

.woocommerce-shipping-fields input[type="checkbox"]{
    -webkit-appearance:none;
    width:15px;
    height:15px;
    background:#fff;
    border-radius:5px;
    border:2px solid #555;
    position:relative;
    top:0px;
}
.woocommerce-shipping-fields input[type='checkbox']:checked {
    background: #f7b10b;

}

.woocommerce-shipping-fields__field-wrapper{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    grid-gap: 2px 10px;
    max-width:100%;
    margin: 0px auto;
}

.woocommerce-shipping-fields__field-wrapper p{
    padding: 8px 0px !important;
    display:flex;
    flex-wrap:wrap;
    align-self:flex-end;
}

.woocommerce-shipping-fields__field-wrapper p label{
    width: 100%;
    font-size:18px;
    align-self: center;
    padding: 5px 0px;
}

.woocommerce-shipping-fields__field-wrapper input[type=text], .woocommerce-shipping-fields__field-wrapper input[type=tel], .woocommerce-shipping-fields__field-wrapper input[type=email]{
    padding:5px 10px;
    font-size:18px;
    align-self: center;
    width:100%;
    max-width:100%;

    border:1px solid #d9d9d9;
}

.woocommerce-shipping-fields__field-wrapper span.woocommerce-input-wrapper{width:100%;}


#shipping_first_name_field, #shipping_last_name_field, #shipping_country_field, #shipping_address_1_field{
    width:100%;
}

#shipping_company_field{
    width: 100%;
}

#shipping_company_field span, #shipping_company_field span.woocommerce-input-wrapper input {width:100%;}

.notes{
    display:flex;
    flex-wrap:wrap;
    width:85%;
    margin: 0px auto;
    max-width:100%;
}

.notes label{
    font-weight:bold;
    width:100%;
}

.notes .woocommerce-input-wrapper{
    width:80%;
}
.notes textarea{
    min-height:200px;
    width:100%;
    border: 1px solid #d9d9d9;
    padding:5px;

}

.woocommerce-checkout h3#order_review_heading {
    font-size: 25px;
    padding: 5px 0px;
    margin: 0px auto 10px auto;
    border-bottom: 3px solid #000;
    max-width: 100%;
}
#shipping_method {
    list-style: none;
    width: 100%;
    text-align: left;
    max-width: 100%;
}

#shipping_method label{
    font-size:18px;
}

#shipping_method li{
    padding: 10px 5px;
}

#shipping_method li input[type=radio]{
    padding: 10px;
    margin: 2px 10px;
}

#order_review table{border-collapse: collapse; border-spacing: 20px; padding: 10px;}

#order_review .shop_table{
    width:100%;
}
#order_review thead{
    background: #ffeab9
}

#order_review ul{padding:0px;}

.order-contents {
    display: grid;
    grid-template-columns: 2fr 1fr;
    padding: 10px 0px;
    grid-gap: 10px;
}
.order-contents .cart_item {
    display: grid;
    grid-template-columns: 2fr 1fr;
    border-bottom: 1px solid #989898;
    padding-bottom: 15px;
}

.order-contents .cart_item .product-total{
    text-align:right;
}
.woocommerce #shipping_method li:nth-child(2n) {
    background: #f3f3f3;
}
/* payment area */



.wc_payment_methods{list-style:none; padding: 0px !important;}

.payment_method_klarna_payments_pay_over_time{
    padding: 20px 10px;
    background: pink;
}

.payment_method_stripe{

}
.payment_method_stripe .payment_box{ border: unset; margin: unset;}

.wc-payment-form{padding:20px;}

.woocommerce-error{
    width:500px;
    margin: 0px auto !important;
    max-width:100%;
}

.woocommerce-error li{
    color:#c50000;
}

.woocommerce-checkout .woocommerce-form__input-checkbox{
    transform: scale(1.2);
    margin: 0px 10px;
    position:relative;
    top:-3px;
}

#terms-check {
    background:#ffb18f;
    width:100%;
    padding: 10px 20px;
    margin:20px 0px;
}


.box2{
    display: grid;
    width:100%;
    background:#f4f4f4;
    grid-template-columns: 1fr 1fr;
    justify-items:center;
    padding:50px 0px;
    margin:0px 0px 40px 0px;

}

.box-review{
    display:grid;
    grid-template-rows:120px 1fr;
    grid-gap:40px;
    font-style: italic;
    text-align:left;
}

.box-review .brand-logo{align-self:end; justify-self: center;}

.box-review .brand-logo img{max-width:100%;}

.box-review .brand-review{ width:80%; margin: 0px auto;}

/* wholesale registration */

.wwp_wholesaler_registration_form input[type="text"], .wwp_wholesaler_registration_form input[type="password"], .wwp_wholesaler_registration_form input[type="email"]{
    padding: 5px;
    background:#fdf1cd;
}

.wwp_wholesaler_registration_form, #wholesaler_shipping_address{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(450px,1fr));
    grid-gap:20px;
}

.wwp_wholesaler_registration_form #wholesaler_shipping_address{
    grid-column: 1 / -1;
}
.wwp_form_css_row{
    display:grid;
    align-content:start;
}

.wwp_wholesaler_registration_form .parent p{display:grid;}

.full-grid, .wwp_wholesaler_registration_form h2{
    grid-column: 1 / -1;
}
/* modal stuff */

[id^=modal] {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100vw; /* Full width */
    height: 100vw; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */

}
input[type="checkbox"] {
    scale:1.25;
    display:inline-block;
}

.wc-pao-addons-container{
    font-size:17px;
    display:grid;
    grid-gap:30px;
}

input.wc-pao-addon-checkbox{
    position:relative;
}
#modal1:target {
    display: block;
    transition: display .15s;
}
#modal2:target {
    display: block;
}

#modal3:target {
    display: block;

}
#modal4:target {
    display: block;
}

#modal5:target{
    display:block;
}

[id^=modal] a {
    float: right;
}

.modal{


}

.modal-content {
    display:flex;
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width:100%;
    position:relative;
    justify-content:space-around;
}

.modal-info{
    width:50%;
}

.modal-info h3{
    font-size: 25px;
    padding: 20px 0px;
}

.modal-info ul{
    margin-left:60px;
    padding:20px 0px;
}

.modal-image{
    min-width:300px;
    margin: 10px 90px 10px 10px;
    max-width:100%;
    width:300px;
}

.modal-image img{
    max-width:100%;
    height:auto;
}

.modal-divide{
    display:none;
}

.modal-close{
    position:absolute;
    top: -15px;
    right: 0px;
    background:red;
    padding:10px;
    color:#fff;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.woocommerce-loop-product__title{
    text-align: center;
    padding: 10px 0px 5px 0px;
}


.woocommerce-pagination{
    width: 300px;
    margin: 0px auto;
    padding: 20px 0px 0px 0px;
    max-width:100%;
}

.page-numbers{
    margin: 0px auto;
    display:flex;
    list-style: none;
    text-align: center;


}

.page-numbers li{
    width: 50px;
    text-align:center;
}

.page-numbers a{
    padding: 5px 10px;
    background: #f3f3f3;
    border: 1px solid #fefefe;
}

.page-numbers .current{
    padding: 5px 10px;
}

/* product page */

.product{
    padding: 20px 0px;
}

.product h1{
    background: #f8f8f8;
    padding: 5px 15px;
    width: 100%;
    margin-bottom: 10px;
    font-size:25px;
    max-width:100%;
    grid-column: 2;
    grid-row:1;
    place-self:start start;
}


.price-title{
    font-size:25px;
}

.product-price .price bdi, .product-price .price bdi .woocommerce-Price-currencySymbol{
    font-size:25px;

}

.product .product_meta{
    padding-left: 15px;
}

#main-product-info{
    box-shadow: 0px 0px 4px rgba(0,0,0,.2);

}

.woocommerce-product-gallery{
    max-width:100%;
    grid-column:1;
    grid-row: 1/3;
}

.woocommerce-product-gallery__wrapper{
    display: grid;
    margin: 0px auto;

    max-width:100%;
    justify-content:center;
    grid-template-columns: minmax(300px,1fr);
    justify-items:center;
    grid-gap: 50px 0px;
}

.woocommerce-product-gallery__image{
    margin: 0px 5px;
    max-width:350px
}

.up-sells h2{
    width:100%;
    text-align:center;

    padding: 5px 0px;
}

.related h2{
    width:100%;
    text-align:center;

    padding: 5px 0px;
}
.dimensions{
    display:flex;
    max-width:100%
}

.dimensions img{
    min-width: 0px;
    max-width:100%;
}


.descript-h3{
    font-size:25px;
    text-align:center;
    padding:15px;
}


a.nc_tweet .sw { color: #fff !important; }

.swp_share{ color: #fff;}

.wc-tabs-wrapper{
    box-shadow: 0px 0px 4px rgba(0,0,0,.2);
    padding: 20px;
    margin: 20px 0px;
    display:grid;
    grid-gap:40px;
}

.wc-tabs-wrapper h2{
    font-size: 30px;
    margin:20px 0px;
}

.wc-tabs-wrapper p{
    padding: 10px 0px;
}
.woocommerce-product-attributes td {padding:10px 10px 10px 30px;}
.woocommerce-product-attributes th {padding:10px;}
.woocommerce-product-attributes tr:nth-child(even){
    background-color: #f3f3f3;
}

.product-specs{
    list-style:none;
    display:grid; grid-gap:10px;
}

.woocommerce-product-attributes th{text-align:left;}

.related h2{
    font-size: 20px;
    margin: 0px 0px 20px 0px;
    height:60px;
    width: 100%;
    max-width:100%;

}


/*footer */
footer{
    padding-top: 40px;
}

#footer{
    width: 100%;
    min-height: 200px;
    background-color: #1f2222;
    border-top: 1px solid #d6ded1;
    max-width:100%;

}

#footer-flex{
    display: flex;
    background-position: bottom right;
    background-repeat:no-repeat;
    background-size:initial;
    flex-wrap:wrap;
    padding: 10px 0px;
    justify-content:space-between;

}

.foot-box{
    width:24%;
    max-width:100%;
}

.foot-links{
    list-style:none;
    margin-left:20px;

}

.foot-links li{
    padding:5px 0px;
}

.foot-address{
    color:#f3f3f3;
}

#footer-logo{
    text-align:center;
}

#cm-foot-logo{
    opacity:.9;
}




#footer-flex .title{
    font-size: 21px;
    font-weight: bold;
    text-align: left;
    color: #fff8e0;
    text-align: center;
    padding: 10px 25px 10px 0px;
}

#footer-flex .foot-services{
    padding:0px 75px;
    color: #f3f3f3;
    font-size: 16px;

}
.terms{text-align:center; margin-bottom:40px;}
.terms a{font-size:16px;}
#footer-flex .foot-services title{
    color:#ffebbc;
}

#footer .foot-services a{
    font-size: 16px;
    color: #f3f3f3;
}

#foot-bbb{
    padding: 30px 0px 0px 0px;
}

#map-box{
    width: 500px;

    padding: 10px 0px;
    max-width:100%;
    text-align: center;
}


#map-box .title2{
    font-size: 18px;
    font-weight: bold;
}

#business-hours{
    width: 250px;
    max-width:100%;
    margin:0px auto;


}

#hours-box{
    padding: 10px 0px;
}

#hours-box table{
    width: 300px;
    margin: auto;
    max-width:100%;
}

#hours-box table td{
    padding: 3px 0px 3px 0px;
    color:#f3f3f3;
}



#footer-map iframe{
    width: 500px;
    height: 200px;
    margin: 10px 0px;
    border: 2px solid #000;
    max-width:100%;
}

#footer-logo{

}

#footer-links{
    height: 60px;
    padding: 20px;
    text-align: center;
}

#footer-links a{
    color: #093f5e;
}

.map-image{
    border: 2px solid #000;
    margin: 10px 0px;
}

#social-icons{
    text-align: center;
}

#social-icons img{
    margin: 10px;
}

#foot-phone{
    text-align: center;
    font-size: 27px;
    font-weight: bold;
    padding: 5px 0px 10px 0px;
    color:#F9B30A;
}

#foot-phone a{color:#F9B30A;font-size: 27px;}


#products div, #foot-services div{
    color: #f3f3f3;
    font-size: 16px;
    padding: 5px;
}

#products div, #foot-services div a{
    font-size: 16px;
    color: #f3f3f3;
}



.product-area{
    display:grid;
    grid-template-columns: 5fr 3fr;
    grid-template-rows: minmax(50px,auto);
    grid-gap: 10px 50px;
    padding:15px 15px 40px 0px;
}

.product-area .wp-post-image{ height: auto; max-width:100%;}

#zform{
    width: 420px;
    background: #cecece;
    box-shadow: 0px 2px 6px rgba(0,0,0,.6);
    flex-shrink:1;
    min-width:200px;
    max-width:100%;
}

#zform-mobile{
    width: 420px;
    background: #cecece;
    box-shadow: 0px 2px 6px rgba(0,0,0,.6);
    flex-shrink:1;
    min-width:200px;
    max-width:100%;
}

.desktop-only{

}

.mobile-only{
    display: none;
}

.no-show{
    display: none;
}

/* POSTS */

.post{
    margin-top: 25px;
    /*box-shadow: 0px 0px 2px rgba(0,0,0,.3);*/
    margin: 0px 0px 0px 0px;
    padding: 25px;
}

.post-container{

    position:relative;
}
.post-container-meat{

}

.post-container .entry{
    display:grid;
    grid-template-columns: 200px 1fr;
    grid-gap:20px;

}

.post-container-meat{

}

.cat-read-more{
   text-align:right;
}

.cat-read-more a.xlink{
    padding:10px 30px;
    font-size: 25px;
    text-decoration:none;
    background:#e0a20f;
    transition: background .15s;
    border-radius:6px;
    border:1px solid #000;
    color:#000;
    box-shadow: 0px 1px 9px rgba(0,0,0,.5);
}

.cat-read-more a.xlink:hover{
    background:#ecab0f;
}


#cat-container{
    margin: 0px auto;
}

#cat-title{
    text-align:center;
    font-size:25px;
    padding: 15px 25px;
    color:#f4f4f4;
    background:#293227;

}

.post h1{
    font-size: 45px;
    font-weight: bold;
    padding:25px 0px;

}

h1.post-h1{
    font-size:45px;
    font-weight:bold;
    padding: 0px 0px 40px 0px;
}

.post h2.looph2{
    font-size: 30px;
    font-weight: bold;
    padding: 20px 25px;

}

.post h2.looph2 a{
    font-size:30px;
    color:#000;
    border-bottom: 2px solid #000;
}

.post h2 {
    font-size: 30px;
    font-weight: bold;
    padding:15px 0px;
}

.post h2 a{
    font-size:25px;

}

.post h3{
    font-size: 25px;
}

.post ul, .post ol{
    margin: 16px 0px;
    padding-left: 40px;
}

.post ul li, .post ol li{
    padding: 7px;
}


#content .post p{
    padding: 15px 3px;
}




.h2404{
    font-size: 40px;
    text-align: center;
    padding: 20px
}

#img404{
    text-align: center;
    padding: 10px 0px 30px 0px;
}


#main-content{
    padding: 0px 10px;
    max-width:100% !important;
}

#slider-box{
    margin-top: -110px;
    height: 100vh;
    overflow:hidden;
}




@media screen and (max-width: 960px){
    #growler-visual .middle{
        width:450px;
        align-self:center;

    }

    #john-text{
        width:60%;
        align-self:flex-end;
        background:rgba(255,255,255,.5);
        padding:20px;

    }

    .z-cart-area{
        display:flex;
        flex-wrap: wrap;
    }

}


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

    /* growler visual on home page w/modals */

    .upsell-cart{
        grid-template-columns: 1fr;
    }


    .cart-box{
        width:47%;
    }

    .dimensions{
        flex-wrap:wrap;
    }
    .dimensions img{max-width:100%;}

    #growler-visual{
        display:flex;
        margin: 50px 0px;
    }


    #growler-visual{
        display:none;
    }

    #growler-visual .left{
        display:none
    }

    #growler-visual .middle{
        display:none;
    }


    #growler-visual .right{
        display:none;
    }

    .modal{
        display:block;
        margin: 0px 0px 50px 0px;
    }

    [id^="modal"]{
        position:relative;
        overflow:visible;
        height: unset;
        width:unset;
        background:none;
    }
    .modal-content {
        display:flex;
        padding: 20px;
        flex-wrap:wrap;
        width: 98%;
        margin:0px auto;
        border: 0px;
    }

    .modal-content .modal-close{
        display:none;
    }

    .modal-content .modal-image{
        margin: 0px auto;
    }
    .modal-info h3{
        font-size: 25px;
        padding: 20px 0px;
    }

    .modal-info ul{
        margin-left:60px;
        padding:20px 0px;
    }

    .modal-image{
        min-width:300px;
        margin: 10px 90px 10px 10px;
    }

    .modal-divide{
        display:block;
    }

    /* about section */

    #john-bio{
        background:  url('/wp-content/themes/craftmaster/images/john-summit2.jpg');
        width:100%;
        max-width:100%;
        background-size:contain;
        background-repeat: no-repeat;
        background-position:-50px 0px;
        position:relative;
        display:flex;
        justify-content:flex-end;
    }

    #john-text{
        width:100%;
        align-self:center;
        background:rgba(255,255,255,.6);
        padding:0px;
        margin-top:200px;

    }

    .about-h2{
        width:100%;
        max-width:100%;
        text-align:center;
        font-size:40px;
    }

    #about-growl-box{
        flex-wrap:wrap;
    }

    #about-growler-image{
        order:-1;
        width:90%;
    }

    #about-growler-image img{max-width:100%;}

    #about-grwoler-text{
        order:2;
        width:95%;
    }





    .build-yours{
        font-size: 24px;
    }




    #home-review-h3{
        font-size:45px;
        line-height:1.2
    }

    .review-hr{
        display:block;
        margin:30px 0px;
    }

    .woocommerce-breadcrumb{
        padding: 10px 0px 2px 0px;
        margin:5px 0px 0px 0px;
    }

    #phone-number-head{
        text-align: center;
    }
    .phone-call{
        font-size: 27px;
    }
    .phone-number a{
        font-size: 27px;
    }

    #cta-click-button{
        font-size: 20px;
    }

    .post .homeh1{
        font-size: 40px;

    }

    #contact-area{

    }

    #cart-container{
        position:absolute;
        right:29px;
        top:35px;
        z-index:502;
    }

    #logo{ width: 225px;}

    #open-menu2{
        display: block;
        height: 36px;
        width: 40px;
        margin: 5px;
        padding: 0px;
    }

    .icon-bar {
        width: 90%;
        height: 4px;
        background-color: #252525;
        display: block;
        margin: 6px auto;
    }



    .mmenu-text{
        font-size: 14px;
        margin-top: -2px;
        display: block;
        text-indent:2px;
        background:#fff;

    }



    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 551; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #3f3f3f; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        /* 0.5 second transition effect to slide in the sidenav */
    }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
        display: block !important;
        background: #fff;
        margin: 10px 0px;
        padding: 0px 15px;

    }

    #open-menu{
        display: none;
    }

    .zopenmenu{
        width: 300px;
    }

    .zclosemenu{
        width:0px;
    }

    .znavopen{
        margin-left: 300px;
    }

    .znavclosed{
        margin-left: 0px;
    }

    #main-menu-bar{
        position:relative;
    }

    #open-menu
    {
        display:none;

    }



    #main-menu-bar:target > .menu-main-container #menu-main{
        display: block;


    }

    .menu-main-container{
        display:block;
    }


    #nav-area{
        width: 100%;
        max-width: 100%;

    }

    #main-menu-bar a{
        color: #fff;
    }

    .menu-main-container{

        display: block;
        padding: 2px 0px 0px 0px;

    }


    .menu-main-container ul {
        background: #696969;
        color: #fff;

        border-radius: 4px 4px 0px 0px;
        list-style: none;
        position: relative;
        padding: 0px;
        margin: 0px;
        font-size: 0px;
        display: block;



    }
    .menu-main-container ul:after {
        display: block;
    }

    .menu-main-container ul li{
        display: block;
        border-left: 0px;

    }


    #nav-area .menu-main-container ul li a{
        padding: 10px 10px 10px 10px;
        display: block;
        font-size: 17px;
        font-weight: bold;
        text-decoration: none;
        transition: background-color .15s;

        background: #20201d;
        color:#e0b943;
        border-bottom: 1px solid #000;

    }

    #nav-area .menu-main-container ul li a:hover{
        background-color: #20201d;
        color: #e0b943;
    }

    .menu-main-container ul li:hover > ul{
        display: block;

    }


    .menu-main-container ul li ul.sub-menu {
        visibility:visible;
        opacity:1;
        display: block;
        background: #5f6975;
        position: relative;
        border-radius: 0px;
        padding: 0;
        position: relative;
        top: 0px;
        width: 100%;
        box-shadow: unset;
        border-top: 0px;
    }
    .menu-main-container ul li ul li {


        border-bottom: 1px solid #575f6a;
        text-indent:5px;
        display: block;
        width: 100%;

    }
    #nav-area .menu-main-container ul li ul li a {
        font-weight: normal;
        color: #fff;
        background:#313131;
        display: block;
        border: 0px;

    }
    #nav-area  .menu-main-container ul ul li a:hover {
        background: #313131;
        color:#fff;
    }



    .wrapper{
        min-width: 300px;
    }

    #menu-main{
        min-width: 300px;
    }

    .move-h1{
        font-size:35px;
    }

    .woocommerce-breadcrumb, .woocommerce-breadcrumb a{
        font-size: 15px;
    }

    #slider-box{
        /*       height: auto;*/
    }

    #footer-flex{
        flex-wrap:wrap;
    }

    #footer-flex .foot-box{
        width:98%;
        margin:20px auto 20px auto;

    }

    .foot-links{
        width:40%;
        margin:10px auto 0px auto;
    }


    #cta-area{
        flex-wrap:wrap;

    }

    #top-area{
        height:110px;
    }

    #logo{
        width: 100%;
        text-align: center;
    }

    #top-area{
        box-shadow: 0px 1px 4px rgba(0,0,0,.3);
    }

    .menu-main-container ul li:first-child a{
        border:unset;
    }

    .box2{grid-template-columns: 1fr;}
}

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

    #review-wrapper{
        flex-wrap:wrap;
        width:80%;
        margin:0px auto;
    }

    .post{
        padding:0px;
    }

    .cross-sells ul.products{

        grid-template-columns: repeat(auto-fit, 150px);
        grid-gap:10px;
        justify-items:center;
        justify-content: center;
        width:100%;

    }

    .post-container .entry{
        grid-template-columns: 1fr;
        grid-gap:20px;
        justify-content: center;
        justify-items:center;
    }

    #review-block .content{
        margin: 10px 0px;
    }

    #review-wrapper .review{
        width:96%;
        margin: 20px auto 40px auto;
    }

    #main-product-info{
        flex-wrap:wrap;
    }

    #second-search{
        display:block;
        padding: 3px;
        margin: 5px 0px;
    }
    #bbb-cred{
        display: none;
    }

    .checkout{
        grid-template-columns: 1fr;
    }


    .product-area{
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows:unset;
        padding:unset;
    }

    .summary{padding:10px;}

    .product h1{
        grid-column:1;
        grid-row:1;
    }

    .woocommerce-product-gallery{
        grid-row:2;
    }

    .product h1{
        font-size:30px;
    }

    .variations .select{
        margin-top:10px;
    }

    #zform{
        margin: 0px auto;
    }

    #zform-mobile{
        margin:0px auto;
    }

    .home-h1{
        font-size:35px;
        text-align:center;
    }

    #footer-map{
        margin: 0px auto;
    }


    #business-hours{
        margin: 0px auto;
    }

    .products{
        justify-content: center;
    }

    /** cart **/
    #cart-outline{
        display:grid;
    }

    .cart-grid-titles{
        display:none !important;
    }
    .cart-product-grid{
        display:grid;
        grid-template-columns: 1fr 2fr;
        padding:25px 0px 25px 0px;
        border-bottom:1px solid #000;
        align-items:center;
        grid-gap:10px;
    }

    .cart-product-grid .pic-name-group{
        display:grid;
        grid-template-columns: 1fr 2fr;
        align-items:center;
        grid-column: 1 / -1;
        grid-gap:20px;
    }

    .cart-product-grid .pic-name-group .product-thumbnail{
        width:100px !important;
    }

    .cart-product-grid .product-price{
        grid-column: 2;
        grid-row:2;
        text-align:center;
    }
    .checkout-button{
        padding: 15px;
    }

    .xoo-wsc-sc-subt{display:none;}

    #footer-flex .title{

        text-align: center;
    }

    #hours table{
        width: 250px;
    }

    .post h1{
        padding: 10px 0px 30px 0px;
        font-size: 30px;
    }

    .post h2{
        padding: 20px 0px;
        font-size: 25px;
    }

    .post h3{
        padding: 20px 0px;
        font-size: 22px;
    }

    .zposts{
        margin-top:25px;
    }

    #zcat{
        grid-template-columns: 1fr;
        align-content: center;
    }

    #zcat-posts{
        width:98%;
        margin: 20px auto;
    }


    .cat-read-more{
        position:unset;
        right:unset;
        bottom:unset;
    }

    .post h2{
        padding: 20px;
    }

    .hentry h2 a{
        font-size: 25px;
    }


    #order_review .shop_table{width:100%; margin: 0px auto;}

    .maint-box{width:100%;}

    .maint-box h2{

        font-size:28px !important;
    }




    .foot-address, .foot-bbb{
        text-align:center;
    }

    .product-area{
        grid-template-columns: minmax(300px,1fr);
    }
    .woocommerce-billing-fields__field-wrapper{
        grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    }


    .woocommerce-shipping-fields input[type="checkbox"] {

        width: 15px;
        height: 15px;
        border-radius: 2px;
        top: 3px;
    }

    #open-menu2{
        position: absolute;
        top:40px;
    }

    .product h1{
        font-size:26px;
    }
}


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

    .post .homeh1{
        font-size: 30px;

    }




    .cart-box{
        width:95%;

    }

    .js-sv-wc-payment-gateway-credit-card-form-input{
        font-size:20px !important;
    }

    #billing_first_name_field, #billing_last_name_field, #billing_country_field, #billing_address_1_field, #shipping_first_name_field, #shipping_last_name_field, #shipping_country_field, #shipping_address_1_field{
        width:100%;
    }

    .woocommerce-shipping-fields h3 label span{
        font-size:20px;
    }

    .review-name{
        position:relative


    }

    #product-header-container{
        flex-wrap:wrap;
    }

    .woocommerce-products-header{
        text-align:center;
    }

    #product-header-right{
        text-align: center;
    }

    #footer-flex{
        background: none;
    }

    #logo img{ width: 175px; height: auto}

    #top-area{
        height: 110px;
    }

    #contact-area{
        justify-content:center;
        align-items:center;
    }

    #cred{
        display: none;
    }


    .phone-call{
        font-size: 20px;
    }

    .phone-number, .phone-number a{
        font-size: 23px;
    }

    .phone-number a:hover{
        text-decoration: none;
    }

    ul.products{
        justify-content:center;
        grid-template-columns: repeat(auto-fit,minmax(125px,48%));
        grid-gap:10px;
    }

    ul.products li a img{
        height:auto;
        max-width:100%;
    }

    ul.products .product h2, ul.products bdi{
        font-size:17px;
    }



    ul.products .button{font-size:17px;width:100%;}

    h1{
        font-size: 28px;
    }

    ul.products .product-title{
        height:120px;
    }

    .wc-proceed-to-checkout{
        position:fixed;
        bottom:0px;
        left:0px;
        z-index:10;
        width:100%;
        padding: 20px 0px;
        background:#1F2222;
    }

    a.wc-forward{
        margin:10px auto 0px auto;
        width:95%;
    }

    .modal-info{
        width:98%;
        margin:0px auto;
    }

    blockquote .review-quote:before {
        /*top:160px;*/
    }
    .hide{display:none;}

}