/*
Theme Name: BB Twenty Twenty Three

Theme URI: http://brewerybranding.com

Author: BB

Author URI: http://brewerybranding.com

Description: BB Site Update

Template: twentytwentyone

Version: 1.3

Text Domain: bbtwentytwentythree
*/

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Better box model */
* { box-sizing: border-box; }



:root {
    --secondary-color: #625F61;
    --primary-header: 'Lexia';
    --secondary-header: 'Alkaline';
    --sub-header: 'Interstate';
    --paragraph-text: 'Myriad-pro';
    /* --promo-background: #fff; */
    --promo-background: #fff;
}

/*----------------------------------------------------------------------

*Freight Promo*

----------------------------------------------------------------------*/
.page-id-8675 #breadcrumbs {
    display: none;

}
.freight-banner {
    background-color: var(--promo-background);
}

.freight-banner img {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.freight-info {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;

}

.freight-intro {
    text-align: center;
}


.freight-info h2 {
    margin-top: 50px;
    font-family: var(--primary-header);
    font-weight: 800;
    font-size: 42px;
}

.freight-info p{
    font-family: var(--paragraph-text);
    font-size: 18px;
    background-color: var(--promo-background);
    width: 80%;
    margin: auto;
    margin-top: 25px;
    padding-bottom: 25px;
}

.freight-info h3 {
    font-family: var(--sub-header);
    font-size: 28px;
    text-transform: uppercase;
    color: #3a4451;
    width: 85%;
    margin: auto;
}

.page-id-8675 #post-8675 {
    background-color: var(--promo-background);
    margin-bottom: -30px;
}

.q-and-a {
text-align: left;
}
.q-and-a p {
    width: 80%;
}

.q-and-a h2 {
    margin-bottom: 50px;
    text-align: center;
    color: #a4bcb2;
}

.get-in-deal h2 {
    color: #a4bcb2;
    text-align: center;
}




/*----------------------------------------------------------------------

*headwear pages*

----------------------------------------------------------------------*/


.headwear_grid h2 {
    font-family: var(--primary-header);
    font-weight: 800;
}


/*----------------------------------------------------------------------

*headwear single product page*

----------------------------------------------------------------------*/

.hat-logo-options .hatprogram h4 {
    color: #273349;
    font-weight: 700;
    font-family: var(--sub-header);
}

.headwear_container .hat-logo-options figure .merch-details h2 {
    font-family: var(--sub-header);
    font-size: 16px;
    font-weight: 300;
    background-color: #a4bcb2;
    color: #fff;
    margin-top: 5px;
}
.headwear_container .merch-details h2::before {
    display: none;
}
.headwear_container .button {
    color: #a4bcb2;
    border-color: #a4bcb2;
    
}

.headwear_container .button:hover {
    background-color: #a4bcb2;
    color: #fff;
}

.headwear_container .headwear_details h2 {
    font-family: var(--primary-header);
    font-weight: 700;
    border-bottom-color: #a4bcb2;
    
}

.headwear_container .headwear_details h4 {
    font-family: var(--sub-header);
    font-weight: 700;
    color: #a4bcb2;
}

.headwear_container .headwear_details p {
    font-family: var(--paragraph-text);
}

.headwear_details .quick_details td {
    font-family: var(--sub-header);
    font-weight: 700;
    color: #a4bcb2;
    border-color: #a4bcb2;
    
}

.headwear_details .quick_details tr {
    border-color: #a4bcb2;
}

.headwear_container .hat_options h3 {
    font-family: var(--sub-header);
    font-weight: 700;
    color: #a4bcb2;
    border-color: #a4bcb2;
    
}

.headwear_container .hat_options h4 {
    font-family: var(--paragraph-text);
}

.headwear_container .hat-logo-options table td {
    font-family: var(--sub-header);
    font-weight: 700;
    border-color: #a4bcb2;
    
}

.headwear_container .hat-logo-options table tr {
    border-color: #a4bcb2;
}

.hat-logo-options figure{
    font-family: var(--paragraph-text);
    color: #3a4451;
}

.headwear_container .hat-logo-options .merch-details h2 {
    color: #a4bcb2;
    cursor: pointer;

}

.headwear_container .hat-logo-options .merch-details h2:hover {
    color: #f1b125;
}
.headwear_container .merch-details-add {
    display: block;
    overflow: hidden;
    transition: ease .7s;
}



.headwear_container .ngg-galleryoverview {
    width: 100%;
}

.headwear_container .ngg-galleryoverview span {
    font-family: var(--paragraph-text);
    color: #3a4451;
}
/*----------------------------------------------------------------------

*tabled product pages*

----------------------------------------------------------------------*/


.merch-container .merch-block tr.table-quantity td,
.merch-container .merch-block tr.table-price td{
    
    font-family: var(--sub-header);
    font-weight: 700;
    text-transform: uppercase;
    background-color: transparent;
    color: #273349;
    font-size: 24px;
    border-right: 3px solid #a4bcb2;
    border-left: 3px solid #a4bcb2;
    padding: 15px 5px;
}

@media (max-width: 1640px) {
    .merch-container .merch-block tr.table-quantity td,
    .merch-container .merch-block tr.table-price td {
        font-size: 1.4vw;
    }
}

@media (max-width: 768px) {
    .merch-container .merch-block tr.table-quantity td,
    .merch-container .merch-block tr.table-price td {
        font-size: 28px;
    }
}
.merch-container .merch-block tr.table-quantity td.td-first,
.merch-container .merch-block tr.table-price td:first-child{
    border-left: none;
    text-align: right;
/*     padding-right: 15px; */
}

.merch-container .merch-block tr.table-quantity td.td-last,
.merch-container .merch-block tr.table-price td.td-last {
    border-right: none;
    
}

.merch-container .merch-block tr.table-quantity td {
    border-bottom: 3px solid #a4bcb2;
}

.merch-container h2 {
    font-family: var(--primary-header);
    font-weight: 800;
}

.merch-container .merch-block tr.table-price td {
    border-top: 3px solid #a4bcb2;
}

.merch-container .merch-block table {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}


@media (max-width: 640px) {
    .merch-container .merch-block tr.table-quantity td,
.merch-container .merch-block tr.table-price td{
    font-size: 3.5vw;
}
}

.merch-container .merch-details h2::before {
    display: none;
}

.merch-container .merch-details.active-tab h2,
.merch-container .merch-details h2 {
    font-family: var(--sub-header);
    font-weight: 300;
    font-size: 16px;
    margin-top: 30px;
    padding: 5px 10px;
    border: none;
    background-color: #a4bcb2;
    color: #fff;
    cursor: pointer;    
}

.merch-container .merch-details h2:hover {
    color: #f1b125;
}


.merch-details .merch-details-add {
    border: none;
}

.merch-details .merch-details-add h4 {
    font-family: var(--sub-header);
    font-weight: 700;
    font-size: 25px;
    color: #273349;
    text-transform: uppercase;
    margin-top: 20px;
}

.merch-details .merch-details-add li,
.merch-details .merch-details-add p {
    font-family: var(--sub-header);
    color: #273349;
    font-size: 18px;
    font-weight: 500;
}
.container.prodgallery h3 {
    border-top-color: #a4bcb2;
    font-family: var(--primary-header);
    letter-spacing: 0px;
    color: #273349;
    padding-top: 50px;
}

.ngg-galleryoverview.ngg-template-caption .ngg-gallery-thumbnail-box {
    margin: 0;
}
.ngg-galleryoverview.ngg-template-caption .ngg-gallery-thumbnail-box {
    max-width: 32%!important;
    margin: auto;
}

.ngg-galleryoverview {
    width: 80%;
}
.contact-started {
    width: 35%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: 2px solid #a4bcb2;
    padding: 5px 0px;
}


.contact-button-alt {
    font-family: var(--sub-header);
    font-weight: 700;
    color: #a4bcb2;
    font-size: 24px;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
}

.merch-block .merch-details-add {
    display: block;
    visibility: hidden;
    overflow: hidden;
    transition: .4s ease-in;

}

.merch-block .active-tab .merch-details-add {
    visibility: visible;
}




/*----------------------------------------------------------------------

*Group Buy Spring 2023*

----------------------------------------------------------------------*/
@media (max-width: 768px) {

#spring-group-buy .group-buy-img-2 a {
  
    display: block;
    width: 20%;
    height: 15%;
    top: 80%;
    left: 3%;
}
}
.group-buy-img-4 {
    position: relative;
}
.group-buy-img-4 a {
    position: absolute;
/*     background-color: red; */
    opacity: 0;
    display: block;
    width: 20%;
    height: 50px;
    top: 80%;
    left: 10%;
}

@media (max-width: 768px) {
    .group-buy-img-4 a {
        left: 4%;
        top: 78%;
    }
}

.group-buy-img-6 {
    position: relative;
}
.group-buy-img-6 a {
    position: absolute;
/*     background-color: red; */
    opacity: 0;
    display: block;
    width: 20%;
    height: 50px;
    top: 67%;
    left: 10%;
}

@media (max-width: 768px) {
    .group-buy-img-6 a {
        left: 4%;
        top: 65%;
    }
}
.group-buy-img-7 {
    position: relative;
}
.group-buy-img-7 a {
    position: absolute;
/*     background-color: red; */
    opacity: 0;
    display: block;
    width: 20%;
    height: 50px;
    top: 67%;
    left: 40%;
}

@media (max-width: 768px) {
    .group-buy-img-7 a {
        left: 35%;
        top: 65%;
    }
}
.group-buy-img-8 {
    position: relative;
}
.group-buy-img-8 a {
    position: absolute;
/*     background-color: red; */
    opacity: 0;
    display: block;
    width: 20%;
    height: 50px;
    top: 47%;
    left: 15%;
}

@media (max-width: 768px) {
    .group-buy-img-8 a {
        left: 3%;
        top: 38%;
    }
}


.group-buy-img-3 {
    position: relative;
}
.group-buy-img-3 a {
    position: absolute;
/*     background-color: red; */
    opacity: 0;
    display: block;
    width: 20%;
    height: 50px;
    top: 82%;
    left: 50%;
}

@media (max-width: 768px) {
    .group-buy-img-3 a {
        left: 50%;
        top: 78%;
    }
}


.group-buy-img-5 {
    position: relative;
}
.group-buy-img-5 a {
    position: absolute;
/*     background-color: red; */
    opacity: 0;
    display: block;
    width: 20%;
    height: 50px;
    top: 64%;
    left: 45%;
}

@media (max-width: 768px) {
    .group-buy-img-5 a {
        left: 49%;
        top: 64%;
    }
    .apparel2018 .apparel-grid-block span.more-info {
        bottom: -5px;
    }
}


.page-id-7930 p#breadcrumbs {
    display: none;
}

/* products page redesign (shirts)  */
.apparel-grid-block h3 span.product-brand {
    width: 100%;
/*     color: #26334d; */
/*     font-family: var(--secondary-header); */
/*     text-transform: lowercase; */
/*     font-size: 25px; */
}

.apparel-grid-block h3 {
    flex-direction: column;
}

@media (min-width: 848px) {
    .apparel2018 .apparel-grid-block {
        vertical-align: top;
        margin: 2%;
        width: 29%;
        height: 100%;
    }
    
    .entry-content .apparel-grid-block h3 {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5vw;
        
        height: 59px;
        margin-top: auto;
    }
    
    .apparel-grid-block img {
        margin-top: 5%;
    }
    
    /* THIS IS IN STYLES */
    .entry-content .apparel-grid-block h4 {
        top: 12%;
    }
    }

.product-specs p,
.product-specs li {
    font-size: 14pt;
}

#post-8391 .entry-title {
    display: none;
}

.entry-content .apparel-grid-block h4 {
    font-family: var(--sub-header);
    /* top: 35px; */
    left: 50%;
    transform: translatex(-50%);
/*     undo bottom line 1514 */
    background-color: transparent;
    color: #a4bcb2;
    font-weight: 700;
    letter-spacing: 0;
}
.headwear_grid.beanies .apparel-grid-block h4 {
    transform: none;
    margin-bottom: 10px;
}

.headwear_grid.beanies .apparel-grid-block h3 {
    font-size: 24px;
}
.headwear_grid .apparel-grid-block {
    margin: 20px 30px;
}

.entry-content .apparel-grid-block:hover {
    color: #26334d;

}

.entry-content .apparel-grid-block h3 {
    font-family: var(--sub-header);
    font-weight: 700;
    color: #a4bcb2;
}

.apparel-grid-block span.more-info {
    text-transform: uppercase;
    font-family: var(--sub-header);
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    background-color: #a4bcb2;
    color: #fff;
    padding: 5px 10px;
    bottom: 0;
}
.entry-content .apparel-grid-block:hover {
    border-color: transparent;
}
.apparel-grid-block span.more-info:hover {
    color: #f1b125;
}

.apparel2018 {
    width: 80%;
}

.entry-content .apparel2018 h2{
    font-family: var(--primary-header);
    font-weight: 800;
    border-bottom-color: #a4bcb2;
}

.apparel2018 p {
    margin-top: 15px;
}

.apparel2018 h4:before {

    content: '';
    position: absolute;
    height: 2px;
    width: 80px;
    background-color: #a4bcb2;
    right: 100%;
    top: 20px;
}

.apparel2018 h4:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 80px;
    background-color: #a4bcb2;
    left: 100%;
    top: 20px; 
    
}





/* single propduct page  */

.product-specs h2 {
    font-family: var(--primary-header);
    font-weight: 800;
}
.main-product-wrap .product-details .product-specs h3:first-of-type {
    font-family: var(--sub-header);
    font-weight: 700;
}

.main-product-wrap .product-details .product-specs h3,
.main-product-wrap .product-details .product-specs #description{
    font-family: var(--sub-header);
    font-weight: 700;
}

.product-specs li,
.product-specs {
    font-family: var(--paragraph-text);
}

h1.entry-title {
    display: none;
}

.product-specs #thumbs {
    /* background-color: #a4bcb282; */
    padding: 15px;
    border-radius: 15px;
    transition: .4s ease;
}
/* 
.product-specs #thumbs:hover {
    background-color: #a4bcb2;
} */



/* center aligning heading  */
.product-details .product-specs h3:first-of-type {
    color: #a4bcb2;
    text-align: center;
    position: relative;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.product-specs h2 {
    text-align: center;
}

.product-details .product-specs h3:first-of-type:before {
    content: '';
    position: absolute;
    height: 2px;
    width: 100px;
    right: 105%;
    top: 50%;
    transform: translatey(-50%);
    background-color: #a4bcb2;
}


.product-details .product-specs h3:first-of-type:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100px;
    left: 105%;
    top: 50%;
    transform: translatey(-50%);
    background-color: #a4bcb2;
}


/*----------------------------------------------------------------------

*General Styles*

----------------------------------------------------------------------*/

.ml-form-embedContent p {
    background-color: transparent;
}


.news-signup {
    padding: 100px 0 100px 0;
}



h2.entry-title{
	display:none;
}

body {
	background: white;
	font: 12pt 'interstate', 'helvetica', 'arial', sans-serif;
}

h1 {
	font: 48pt 'Fjalla One', sans-serif;
	color: #3a4451;
	text-transform: uppercase;
}

h2 {
	font: 16pt 'Fjalla One';
	text-transform: uppercase;
	color: #3a4451;
}

p {
	background: white;
	font: 12pt 'interstate', 'helvetica', 'arial', sans-serif;
}

a {
	text-decoration: none;
	color: #3a4451;
}

#nav-box-footer a:hover {
	text-decoration: underline;
}

.container {
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 20px 0;
}

/*----------------------------------------------------------------------

*Hero*

----------------------------------------------------------------------*/

.mainhero {
    width: 100%;
    height: 625px;
    background-image: url(https://brewerybranding.com/wp-content/uploads/2018/11/bb-pattern-bg.gif);
    content: " ";
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-position: top;
    background-repeat: repeat;
    background-attachment: fixed;
    display: none;
}

.hero-container{
    width: 100%;
    height: 470px;
    max-width: 1120px;
    background-color: white;
    content: " ";
    display: flex;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.2), 0 8px 16px 0 rgba(0,0,0,.2);
}

.hero-img{
    height: 100%;
    width: 40%;
    content:" ";
}

#hero-img-1{
    background-image: url(https://www.brewerybranding.com/images/bb-placeholder-person.png);
    background-size: cover;
    background-position: center;
}

.hero-content{
    width: 60%;
    height: 100%;
    padding: 10px;
    float: right;
    content: " ";
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media screen and (max-width: 1000px){
    .mainhero{height: 500px;}
    .hero-container{height: 360px;}
        }

@media screen and (max-width: 800px){
    .hero-container{display: none;}
    .mainhero{
        background: none;
        height:120px;
    }
}


/*----------------------------------------------------------------------

*Navigation*

----------------------------------------------------------------------*/

        .topnav{
            background-color: #36404d;
            width: 100%;
            height: 100px;
            position: fixed;
            display: flex;
            align-items: center;
            padding: 15px;
            z-index:500;
        }
        
        #logo{
            height:100%;
            margin-left: 30px;
        }
        
        .logo-sml{
            display: none;
        }
        
        #logo img{
            height: 100%;
        }
        
        .nav-menu{
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-end;
            width: 100%;
        }
        
        .topnav a{
            text-decoration: none;
            color: white;
            font: 18px 'Raleway', 'helvetica-bold', 'arial', sans-serif;
            text-transform: uppercase;
        }
        
        .topnav a:hover{
            color: #7797b7;
        }
        
        .topnav .icon{
            display: none;
        }
        
        .navbutton{
            width: auto;
            height: 30px;
            padding: 5px 10px;
            margin-right: 20px;
            text-align: center;
            display: inline-block;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        
        /*------ Dropdown ------*/
        
        .dropdown-box{
            background-color: rgba(0, 0, 0, .8);
            display: none;
            justify-content: space-around;
            position: absolute;
            right: 0;
            top: 60px;
            padding: 30px;
            width: 90%;
            max-width: 980px;
            height: 200px;
            right: 40px;
            z-index: 2;
            color: white;
            border-radius: 5px;
            font: 16px 'Raleway-Bold', 'helvetica-bold', 'arial', sans-serif;
        }
        
        .dropdown-box a{
            text-transform: capitalize;
        }
        
        .dropdown:hover{
            background-color: rgba(0, 0, 0, .8);
        }
        
        .dropdown:hover .dropdown-box{
            display:flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .dropdown-item{
            width: 150px;
            height: 150px;
            padding: 0 10px 0 10px;
            text-align: center;
        }
        
        .see-more{
            width: 130px;
            height: 75px;
            display: flex;
            padding-top: 10px;
            padding-bottom: 10px;
            justify-content: center;
            align-items: center;
            border: 2px solid #7797b7;
            border-radius: 5px;
        }
        
        .fa-chevron-circle-right{
            color: #7797b7;
        }
        
        .see-more:hover{
            background: #7797b7;
            transition: 0.3s;
        }
        
        .see-more:hover .fa-chevron-circle-right{
            color: white;
            transition: 0.3s;
        }
        
        /*------ End Dropdown ------*/
        
        
        /*------ Sidebar Nav Styles ------*/
       .sidenav {
            height: 100%;
            width: 100%;
            position: fixed;
            z-index: 400;
            top: 0;
            right: 0;
            background-color: rgba(0,0,0,0.8);
            overflow-x: hidden;
            padding-top: 30px;
            transition: 0.5s;
            display: none;
        }
        
            /* The navigation menu links */
        .sidenav a {
            padding: 10px 20px;
            text-decoration: none;
            font: 22px 'Raleway-Bold', 'helvetica-bold', 'arial', sans-serif;
            text-transform: uppercase;
            color: white;
            display: block;
            transition: 0.3s;
            border-bottom: 1px solid #c3c3c3;
        }
        
            /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            color: #7797b7;
        }

            /* Position and style the close button (top right corner) */
        .sidenav .closebtn {
            position: absolute;
            top: 5px;
            right: 20px;
            font-size: 60px;
            margin-left: 50px;
            border-bottom: none;
        }

            /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
        #main {
            transition: margin-left .5s;
            padding: 20px;
        }

            /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
        @media screen and (max-height: 450px) {
            .sidenav {padding-top: 15px;}
            .sidenav a {font-size: 18px;}
        }
        /*------End Sidenav------*/
        
        
        /*------ Responsive Nav ------*/
        
            /*-- Display Smaller Logo at Smaller Sizes --*/
        @media screen and (max-width: 1000px){
            .logo{display: block;  transition: 0.5s;}
            .logo-sml{display: none}
        }
        
            /*--Display Hamburger Icon at Smaller Sizes*/
        @media screen and (max-width: 880px){
            .nav-menu .navbutton{display: none;}
            .nav-menu a.icon{
                display: block;
            }
            
        }
        
            /*--Dropdown-Item Responsive--*/
        @media screen and (max-width: 1000px){
            .dropdown-box .dropdown-item:not(.see-more) {
                width: 120px;
                padding: 0;
            }
        }
        
            /*--Sidebar Nav Disappears at Larger Screen Size--*/
        @media screen and (min-width: 880px){
            .sidenav{display: none}
        }

/*----------------------------------------------------------------------

*Miscellaneous*

----------------------------------------------------------------------*/

/* Forces a box filled with floated elements to wrap around child elements */
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

#chat-bar {
	display: inline;
	width:100%;
	height: auto;
}

#live-chat {
	width:auto;
	height: 33px;
}

hr {
	height: 1px;
	border: 0;
	border-top: 2px solid #7797b7;
	margin:0;
	padding:0;
}

.container #header{
	margin:20px 0 20px 0;
}

.section-header h1{
	color: white;
}

#merch-header h1{
    width: 100%;
}


#merch-header h1:after{
    content: "";
    position: absolute;
    width: 50vw;
    border-bottom: 2px solid #7797b7;
    margin-top: 64px;
    margin-left: 20px;
}



.button {
	display: inline-block;
	width: auto;
	padding: 15px;
	font: 16pt var(--sub-header);
    font-weight: 700;
	text-transform: uppercase;
	color: #a4bcb2;
	border: 4px solid #a4bcb2;
	text-align: center;
	outline: none;
	text-decoration: none;
    border-radius: 5px;
}

.button:hover{
	background-color: #a4bcb2;
	color: white;
	cursor: pointer;
}

.about-hero { 
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), url("https://www.brewerybranding.com/images/about-us/got-groupphoto-2018.jpg");
	width:100%;
	height:500px;
	background-size: cover;
	background-repeat: no-repeat;
    background-position: center;
	text-align: center;
	line-height: 200px;
	display: table;
}

#about-hero-child {
	display: table-cell;
	vertical-align: bottom;
}

#about-hero-child h1{
	color: white;
}

.about-bios {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	margin-top: 20px;
    margin-bottom: 20px;
	width: 100%;
	max-width:1120px;
}

.imgcaption {
    display: block;
    position: absolute;
    background-color: rgba(239, 125, 48, 1);
    width: 100%;
    z-index: 95;
}

#Our-Clients {
	background-color: #3F3F3F;
    padding: 20px;
    display: none;
}

#Our-Clients img{
	width: 100%;
    max-width: 1120px;
}

#about-brewery-blurb {
	margin-top:15px;
	padding: 0 80px;
}
#about-brewery-blurb p {margin-top: 20px; margin-bottom: 20px;font-size: 20px;}

#contact {
    justify-content: center;
	flex-direction: row;
	flex-wrap: nowrap;
	background-image: url('https://brewerybranding.com/images/bb_candrew.png');
    background-size: 350px;
	background-repeat: no-repeat;
	background-position: right top;
	margin-top: -40px;
	padding-top: 40px;
	padding-bottom: 60px
}
.contact-map figure {
    height: 100%;
}
.mobile-header{
    width:100%;
    text-align: center;
    display:none;
}

@media only screen and (max-width: 850px){
    .mobile-header{
        display: block;
    }
    
    .contact-info h2{
        display: none;
    }
}

.contact-map{
    max-width: 450px;
    width: 33%;
    height: 450px;
    content: " ";
}

.contact-info{
    max-width: 450px;
    width: 33%;
    height: 450px;
    padding: 20px;
    content: " ";
}

.blocker{
    max-width: 370px;
    width: 33%;
    height: 450px;
    content: " ";
}

.contact-info h2 {
	text-align: center;
}

@media only screen and (max-width: 1100px){
    #contact{
        background-image: none;
    }
    .contact-map{
        width: 50%;
        margin-top: 20px;
    }
    
    .contact-info{
        width: 100%
    }
    
    .blocker{
        display: none;
    }
}

@media only screen and (max-width: 850px){
    #contact{
        flex-wrap: wrap;
    }
    
    .contact-map{
        width: 100%; height: auto;
    }
    .contact-info{
        width: 100%
    }
}

@media only screen and (min-width: 1420px){
    .contact-map{
        max-width: 650px;
        padding-top: 20px;
    }
    .contact-info{
        max-width: none;
    }
}

h3 {
	font: 12pt 'interstate', sans-serif;
	font-weight: 800;
	margin-top: 10px;
}

#footer {
	position: relative;
	border-top: 2px solid #3a4451;
	margin-top: 30px;
}
#mobile-foot-social {display: none;}
#sitemap {
	text-align: center;
	margin-top: 20px;
}

@media only screen and (max-width: 850px){
    #sitemap{
        display: none;
    }
}

#nav-box-footer {
	display: flex;
	justify-content: center;
}

.block-footer {
	display: inline-block;
	vertical-align: top;
	margin-right: -4px;
	min-width: 120px;
	text-align: left;
}

.block-footer a{
	color: black;
}

.block-footer h3{
	text-transform: uppercase;
	border-bottom: 1px solid black;
	font-size: 12px;
	font-family: 'interstate', sans-serif;
	padding: 0 20px 0 20px;
	margin-bottom: 10px;
}

.block-footer ul li{
	text-transform: uppercase;
	font-size: 12px;
	padding: 0 20px 10px 20px
}

#footer-nav-about {
	border-left: 1px solid black;
}

#footer-nav-social {
	border-left: 1px solid black;
}

#brewersAssocLogo {
	float: right;
	margin-top: 20px;
}

#disclaimer {
	max-width: 50%;
	padding: 20px 0 0 0px;
	margin-top: 20px
}

#disclaimer p{
	font-size: 12px;
	line-height: 24px;
}

.disclaimer {
	font-size:10px;
	line-height: 10px;
	color: #898989;
	display: block;
}

@media only screen and (max-width: 975px){
    #footer-wrap{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    #disclaimer{
        max-width: none;
        padding: 0px;
    }
}

#footer-wrap {
	width:100%;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.flex-container div h1{
    position: relative;
    color: white;
    bottom: 40px;
    left: 10px;
    text-decoration: none;
}

.flex-container img{
    max-width: 100%;
    position: relative;
    top: 43px;
}

#flex-child {
	overflow: hidden;
	position: relative;
	
}
#flex-child img {width: 100%; height: auto;}

#flex-child.caption{
    padding-top: 50px;
    padding-bottom: 50px;
    margin: auto;
}
#flex-child a.home-back-img:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
	background: rgba(0,0,0,0.2);
}
#flex-child:hover a.home-back-img:before {
    background: rgba(0,0,0,0.6);
    transition-duration: 0.6s;
}

#flex-child:hover h1{
    color: #FFF;
}

#flex-child h1{
    color: white;
    position: absolute;
    bottom: 45%;
    left: 0;
    right: 0;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    text-align: center;
    font-size: 32px;
    z-index: 300;
    font-family: 'Raleway';
}
/*#flex-child h1:before {content: "- ";}
#flex-child h1:after {content: " -";} */
#flex-child.caption h1{
    color: #7797b7;
    bottom: auto;
    position: inherit;
}

#flex-child.caption h2{
    color: black;
}





#test {
    width: 100px;
    height:45px;
    background-color: chartreuse;
}

#test-img-container {
    width:40px;
    height: 40px;
    background-color: red;
    display: block;
}







.one-third {
    width: 32%;
    height: auto;
    background-size:100%;
    background-repeat: no-repeat;
}
.one-qtr {
    width: 25%;
    height: auto;
    background-size:100%;
    background-repeat: no-repeat;
}

.two-thirds {
    width: 660px;
    height: 430px;
    flex-shrink: 2;
    background-color: grey;
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
}

.full {
	max-width: 1120px;
    background-color: grey;
    background-size:100%;
    background-position: center;
    background-repeat: no-repeat;
}

.caption {
    background-color: transparent;
    border: 4px solid #7797b7;
    text-align: center;
}

.caption h2 {width: 80%; margin: auto;}
.full .button{
	margin-top: 50px;
	margin-bottom: 50px;
}

.selector {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.about-bios ul {
    color: white;
    font: 12px 'Fjalla One';
}

table {
    margin: 20px 0;
}

#table-price {
    border-top: 2px solid #7797b7;
}

td {
    font: 18px 'fjalla one';
    text-align: center;
    border-right: 2px solid #7797b7;
    padding: 5px;
}

#table-quantity {
    background-color: #7797b7;
    color: white;
}

#table-quantity td{
    border-right: 2px solid white;
}

#q {
    color: black;
    background-color: white;
}

#td-last {
    border-right: none;
}



#merch-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.merch {
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-bottom: 80px;
}



#merch-contents {
    display: flex;
    margin-bottom: 15px
}

#merch-image {
    width: 450px;
    height: 450px;
    margin-right: 60px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

#merch-image img {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#gal-img img {
    display: block;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.merch li::before {
    content: "• ";
}

.merch h2 {
    color: black;
}

.merch a:hover {
    text-decoration: underline;
}

#merch-gallery {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#gal-img {
    width: 200px;
    height: 200px;
    background-color: darkgray;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin: 0 10px 10px 0px;
}


.last#gal-img {
    margin-right: 0;
}


li#list-head::before {
    display: none;
}

#colors {
    display:flex;
    flex-wrap: wrap;
}

.gallery {
    background-color: #3F3F3F;
    padding: 20px 80px 20px 80px;
    margin-bottom: 0;
}

.gallery h1{
    color: white;
}

#gallery-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#color-changer {
	max-width: 1200px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#product-image-container {
    width: 600px;
	height: 600px;
    padding: 20px;
	display: inline-block;
	position: relative;
}
#produt-image-container img#main-image {max-width: 100%;}

img#main-image{
	width: 600px;
    position: absolute;
    top: 0;
    left: 0;
}

img#main-image-mesh{
	width: 600px;
    position: absolute;
    top: 0;
    left: 0;
}

#shirt-image-container img {
    max-width: 100%;
}

#product-info {
    width: 560px;
}

#color-picker {
    margin: 15px 0;
    width: 100%;
}

#color-picker #front{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

#color-picker #back{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}



.pro-title {
    position: absolute;
    width: 250px;
    height: 250px;
    background:linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, .4) );
    display: none;
}

.title-content {
    position: absolute;
    bottom: 5px;
    width: 100%;
    text-align: center;
}

.title-content.name{
    font: 18px 'fjalla one', sans-serif;
    color: white;
    text-transform: uppercase;
    margin-bottom: 15px
}

.title-content.email{
    font: 12px 'fjalla one', sans-serif;
    color: rgba(239, 125, 48, 1.0);
    text-transform: lowercase;
}

.profile li {
    margin-bottom: 5px;
}

div.crumbs {display: none;}

#profilepic img {
    width:100%;
    height:100%;
}

#stein #profilepic img{
    height: 250px;
}

.work-for-bb {
    width: 100%;
    height: 100%;
    padding: 25px;
    border: 4px solid rgba(239, 125, 48, 1.0);
    font: 20px 'raleway-black';
    text-transform: uppercase;
}

@media only screen and (max-width:1280px){
    .two-thirds{
        width: 600px;
    }
}

@media only screen and (max-width:1220px){
    .two-thirds{
        width: 550px;
    }
}

@media only screen and (max-width:1180px){
    .two-thirds{
        width: 500px;
    }
}

@media only screen and (max-width:1130px){
    .two-thirds{
        width: 450px;
    }
}

@media only screen and (max-width:1080px){
    .two-thirds{
        width: 430px;
    }
    
    #flex-child h1{
        font-size: 3em
    }
}

@media only screen and (max-width:644px){
    .one-third{
        width:225px;
        height: 225px;
    }
    
    .two-thirds{
        width: 225px;
        height: 225px;
    }
    
    #flex-child h1{
        font-size: 1.75em;
        text-align: center;
        bottom: 45%;
    }
    
    #flex-child.caption{
    padding-top: 0;
    padding-bottom: 0;
    padding-left:0;
    padding-right: 0;
    }
    
    #flex-child.caption h2{
        font: 12pt 'raleway';
        text-transform: none;
    }
    
    .button {
	display: inline-block;
	width: auto;
	padding: 5px;
	font: 12pt 'Fjalla One';
	text-transform: uppercase;
	color: rgba(239, 125, 48, 1.0);
	border: 4px solid rgba(239, 125, 48, 1.0);
	text-align: center;
	outline: none;
	text-decoration: none;
    }
}


    /*  FLIP-CARDS  */
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 200px;
	height: 200px;
    overflow: hidden;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
    overflow: hidden;
}

        /*  END FLIP-CARDS  */


.back img{
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width:100%;
}

#card {
    width: 200px;
    margin-right: 18px
}

#card figcaption {
    text-align: center;
    width: 200px;
    margin-bottom: 15px;
}

.jobs {
    flex: 1;
    height: 250px;
    text-align: center;
}

.work-for-bb h2 {
    font-size: 40px;
}

.closure-row{
    display: flex;
}

.closure-option{
    width: 150px;
    text-align: center;
    margin-right: 5px;
}

.closure-option img{
    width: 100%;
}

img#color:hover{
    cursor: pointer;
}

#insta {background-color: rgba(0,0,0,0.9); margin-top: 30px; padding: 30px; text-align: center;}
#insta h3 {font-size: 60px; line-height: 60px; color: #FFF; padding-top: 0px; margin: 0; font-family: 'Fjalla One';}

#merch-contents h2{
	margin-top: 20px;
}
#header h1 {display: none;}
main {padding-top: 100px;}
div#about-us-bios {text-align: center;}
div.aboutbio {
	width: 300px; 
	height: auto; 
	vertical-align: top; 
	display: inline-block; 
	margin: 20px 10px; 
	position: relative;
	text-align: center;
	}
.aboutbio h4 {
	font-size: 20px;
	color: #000;
	font-family: 'Fjalla One';
	letter-spacing: 2px;
	}
#about-us h1 {text-align: center; margin-top: 40px; border-bottom: 2px solid;}
.aboutbio a {color: #6c6c6c; font-size: 14px;}
.aboutbio p {background-color: transparent; text-align: center; line-height: 8px; padding-bottom: 10px;}
.aboutbio img {width: 300px; height: 300px; margin: 0; padding: 0;}
.aboutbio ul {padding: 10px; position: absolute; top: 0; bottom: 0; z-index: 95;opacity: 0; background-color: rgba(0,0,0,.7); max-width: 350px; display: none;}
.aboutbio li {padding-bottom: 15px; max-width: 350px; overflow: hidden;}
.aboutbio li span {color: #F79F3E; font-family: "gnu";}
.aboutbio li strong {color: #7797b7;}
.aboutbio .imgcaption {bottom: 0; position: static; background-color: transparent; text-align: left;}
.work-for-bb h3 {font-size: 32pt; padding: 0; margin: 0;}
.work-for-bb p {line-height: normal; color: #7797b7; font-size: 20px; font-weight: bold;}
#generalhatinfo {max-width: 1200px; margin: auto; padding-top: 20px;}
#generalhatinfo h2 {padding-top: 20px;}	
#hat-custom-options div.tile {display: inline-block; position: relative; margin: 5px;}	
#hat-custom-options .imgcaption {position: absolute; bottom: 0; left: 0; text-align: center;}
p#breadcrumbs {margin-left: 20px; margin-top: 10px;}
.ngg-gallery-thumbnail {border: none !important; margin: 0 !important;}
#brewersAssocLogo img {max-width: 90px; vertical-align: middle;}
.ngg-galleryoverview {text-align: center;}
.ngg-gallery-thumbnail-box {float: none !important; display: inline-block;}
.category-gallery {background-color: #7797b7;}
.category-gallery h3 { text-transform: uppercase; font-size: 36px; color: #FFF;}
.category-gallery .ngg-galleryoverview {margin-top: 20px;}
#jobs-page {margin: auto; margin-top: 20px; max-width: 1200px;}
#jobs-page h2 {font-size: 28px;}
#jobs-page h4 {margin-top: 5px;}
#jobs-page p {margin: 5px 0 10px 0; font-size: 16px;}
#jobs-page p.notice {color: red;}
#jobs-page li {margin-top: 5px;}
div.job-post {margin-bottom: 30px; border-top: 2px solid #f1f1f1; padding-top: 40px;}
div.job-post img {float: left; margin: 0 20px 20px 0; max-width: 500px;}
.job-deets {clear: both; background-color: #ddeffa; padding: 20px 40px 40px 40px;}
.job-deets p {background-color: transparent;}
.job-post h3 {font-size: 20px;}
.job-deets h3 {margin-bottom: 5px; margin-top: 15px; font-size: 18px; text-transform: uppercase;}
.job-deets strong {font-weight: bold;}
.job-deets h5 {margin-top: 15px; font-weight: 800;}
#job-intro {padding: 10px 20px; margin-bottom: 40px; background-color: #eef8fd;}
#job-intro h3 {font-size: 30px;}
#job-intro p {line-height: 26px; background: transparent;}
.ngg-gallery-thumbnail a {margin: 0 !important;}
.ngg-gallery-thumbnail-box {margin: 4px;}

#bbacctform {max-width: 90%; margin: auto; padding: 20px; background-color: #d9e6ec;}
.page-id-7471 #breadcrumbs {display: none;}
.page-id-7471 article h2.entry-title {display: block; margin-top: 20px; margin-bottom: 20px; margin-left: 100px;}

/* Apparel Blocks */
.apparel2018 {max-width: 1600px; text-align: center; margin: 20px auto;}
.apparel2018 h2 {width: 100%; font-size: 42px; border-bottom: 3px solid #7797b7; padding-top: 20px; text-align: left;}
.headwear_grid h2 {width: 100%; font-size: 42px; border-bottom: 3px solid #a4bcb2; padding-top: 40px; text-align: left; padding-left: 40px;}
.apparel-grid-block {display: inline-block; margin: 20px; position: relative; border: 3px solid transparent;}
.apparel-grid-block:hover {border: 3px solid #7797b7; color: #7797b7;}
.apparel-grid-block h3 {text-transform: uppercase; font-family: 'Fjalla One'; font-size: 30px; font-weight: normal;}
.apparel-grid-block h4 {position: absolute; bottom: 20px; left: 0px; font-family: 'Fjalla One'; font-size: 18px; font-weight: bold; text-transform: uppercase; background-color: #7797b7; color: #FFF; padding: 10px 15px; letter-spacing: 2px;}
.apparel-grid-block img {max-width: 400px; height: auto; width: 100%;}
.headwear_grid {text-align: center;}
span.more-info {position: absolute; bottom: 2px; left: 0; right: 0;}
.apparel-grid-block a {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.headwear_grid .apparel-grid-block h3 {position: absolute; top: 0; left: 0; right: 0;}
.ngg-gallery-thumbnail {background-color: transparent !important;}
.headwear_details ul {margin-top: 10px;}
.headwear_details li {list-style-type: circle; margin-left: 45px; padding: 5px;}

/* Apparel Prod Pages */
.main-product-wrap {margin: auto; margin-top: 20px;}
.product-details {max-width: 1400px; margin: auto; text-align: center;}
.product-details .product-image {max-width: 50%; display: inline-block;}
.product-details .product-image img {width: 100%;}
.product-details .product-specs {max-width: 50%; display: inline-block; vertical-align: top; padding-top: 20px; padding-left: 20px; text-align: left;}
.swatches ul li {display: inline-block;}
.product-specs h2 {font-size: 3em; }
.product-specs h3 {display: inline-block;}
.product-specs h5 {font-size: 1.3em; margin: 20px 0;}
.product-specs #description {display: inline-block; margin-left: 10px; font-family: 'Fjalla One'; font-size: 1.5em; text-transform: uppercase; color: #d68821; }
.product-specs #thumbs {margin-top: 10px;}
.product-specs p {padding: 10px 0; max-width: 400px;}
.product-specs h4 {display: block; text-transform: uppercase; font-family: 'Fjalla One'; font-size: 1.5em; font-weight: normal;}
.product-specs ul {margin-left: 20px; margin-bottom: 10px;}
.product-specs ul li {padding: 3px 0; list-style-type: circle;}
.product-details .product-specs h3 {display: block; text-transform: uppercase; font-family: 'Fjalla One'; font-size: 1.5em; font-weight: normal;}
.product-details .product-specs h3.hat-color {display: inline-block;}
.stylenumber {color: #d68821;}
#thumbs img {max-width: 54px; cursor: pointer; border: 3px solid #fff}

#thumbs img:hover {
    border-color: #a4bcb2;
}


/* Merch Pages */
.product_container {
	max-width: 1400px;
	margin: auto;
	margin-bottom: 30px;
	margin-top: 30px;
}
.productinfo {margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #7797b7;}
.productinfo .prodphoto {display: inline-block; margin-right: 30px;}
.productinfo .productinfodesc {display: inline-block; vertical-align: top; max-width: 50%;}
.productinfodesc h2 {font-size: 48px; margin-top: 30px;}
.productinfodesc tr.header {background-color: #7797b7;}
.productinfodesc p {font-size: 18px; line-height: 28px;}

.merch-container {text-align: center;}
.merch-block {display: inline-block; width: 32%; vertical-align: top; padding: 15px; margin-bottom: 20px;}
.merch-block.fivewide {width: 25%;}
.merch-block.fourwide {width: 23%;}
.merch-block p {width: 80%; margin: auto; padding-bottom: 10px;}
.merch-block h2 {font-size: 32px;}
.merch-block table {display: inline-block;}
.merch-block table td {font-size: 22px;}
.merch-block.fivewide table td {font-size: 18px;}
.merch-block.fourwide table td {font-size: 18px;}
.merch-block tr.table-quantity {border-bottom: 1px solid #7797b7;}
.merch-block td.td-last {border-right: none;}
.merch-block tr.table-quantity td {background-color: #7797b7; border-right: 1px solid #FFF; color: #FFF;}
.merch-block tr.table-quantity td.td-first {background-color: transparent; color: #000;}
.merch-block span.oz {font-size: 18px;}

/* Group Buys */
.page-id-7356 p#breadcrumbs {display: none;}
#spring-group-buy {max-width: 1200px; margin: auto;}
#spring-group-buy h2 {font-size: 36px; margin-bottom: 10px; margin-top: 20px;}
#spring-group-buy h3 {font-size: 30px; color: #36404d}
#spring-group-buy ul {margin-bottom: 40px;}
#spring-group-buy ul li {margin: 10px 0;}
img.gbtimeline {display: block; margin: auto; text-align: center; margin-top: 20px; margin-bottom: 20px; max-width: 100%;}

.gpbuycontainer {width: 100%; border: 2px solid #36404d; padding: 30px; margin-bottom: 20px;}
.gpbuycontainer img {max-width: 50%; display: inline-block; vertical-align: top;}
.gpbuyinfo {max-width: 49%; display: inline-block; vertical-align: top;}
.gpbuyinfo h3 {font-size: 34px; text-transform: uppercase; color: #36404d; font-family: 'Fjalla One'; margin-bottom: 20px;}
.gpbuyinfo h4 {font-size: 54px; margin-top: 10px; border-bottom: 2px solid #36404d; color: #36404d; display: inline; font-family: 'Fjalla One';}
.gpbuyinfo h5 { margin-bottom: 20px; margin-top: 10px; color: #36404d; font-family: 'Fjalla One'; font-size: 28px;}
.gpbuyinfo p {font-size: 24px; margin-bottom: 20px;}

.page-id-7700 p#breadcrumbs {
    display: none;
}


/* Decoration Options */
.decoration-options {background-color: #ebf1f6; padding-top: 30px; padding-bottom: 30px;}
.deco-container {max-width: 1600px; margin: auto; text-align: center;}
.deco-container h2 {font-size: 42px; padding-bottom: 20px; text-align: left; margin-left: 10px;}
.deco-opt {display: inline-block; margin: 10px; text-align: center;}
.deco-opt img {max-width: 275px;}
.deco-opt h3 {margin-top: 5px; font-size: 24px;}

section.merch {max-width: 1800px; padding: 20px 0; margin: auto;}
.merch-block small {font-size: 70%;}

/* Category Grids */
#brewery-merchandise-category {text-align: center; margin-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: center;}
#brewery-merchandise-category #flex-child {margin: auto;}
.merch-container h1 {
	font-size: 42px;
    margin: 20px auto;
    border-bottom: 2px solid;
    max-width: 90%;
}
div.merch-category {
	display: inline-block;
	position: relative;
	width: 25%;
	margin: 0;
	font-size: 0;
}
.merch-category h2 {
    color: white;
    position: absolute;
    bottom: 45%;
    left: 0;
    right: 0;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    text-align: center;
    font-size: 32px;
    z-index: 300;
    font-family: 'Raleway';
    }
    .merch-category a {display: block;}
    
   .merch-category a:before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 200; background: rgba(0,0,0,0.1);}
.merch-category:hover a:before {background: rgba(0,0,0,0.6);
    transition-duration: 0.6s;}
#flex-child a.button {border: none;}
.merch-category img {width: 100%; height: 100%;}
#flex-child a {display: block; line-height: 0;}
.merch-block .active-tab {background-color: transparent;}
.merch-block img {width: 80%;}
.merch-details-add {display: none; max-height: 0; padding: 10px 20px; border: 2px solid #7797b7;}
.merch-details-add h4 {color: #7797b7; margin-bottom: 5px; font-family: 'Fjalla One'; font-size: 20px;}
.merch-details-add p {margin-bottom: 5px;}
.merch-details-add ul li {margin-bottom: 5px;}
.merch-details-add .ngg-imagebrowser-nav {display: none;}
.merch-details h2 {
	font-size: 20px;
    color: #7797b7;
    border: 2px solid #7797b7;
    padding: 10px;
    display: inline-block;
}
.merch-container .insert-page {display: inline-block; max-width: 30%; width: 30%; vertical-align: top;}
article h2.entry-title {display: none;}
article section.entry-meta {display: none;}
.single-post #breadcrumbs {display: none;}
.single-post section.entry-content {text-align: center;}
.merch-container .insert-page .merch-block {width: 100%;}
.active-tab.merch-details h2 {color: #fff; background-color: #7797b7; border: none;}
.active-tab .merch-details-add {display: block; max-height: 800px; transition: max-height 1s ease-in;}
.merch-details h2::before {content: '+'; color: #7797b7; padding-right: 10px;}
.active-tab h2::before {content: '-'; color: #fff; padding-right: 10px;}
.prodgallery h3 {
	border-top: 2px solid #7797b7;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 6px;
	font-size: 36px;
	padding-top: 14px;
	margin-top: 20px;
	color: #7797b7;
	
}

#scroll-banner {
	background-color: rgba(57,79,109,0.6);
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
}
#scroll-banner p {
	background-color: transparent;
	font-size: 26px;
    text-align: center;
    font-family: 'Fjalla One';
    text-transform: uppercase;
    padding: 10px;
    color: #FFF;
}

/* Fulfillment Section */
div#fulfillment {max-width: 1600px; padding: 10px 20px; margin: auto;}
#fulfillment h2 {background-color: #394f6d; padding: 5px 20px; margin: 20px 0; font-size: 30px; color: #96b7d8;}
.service_blurb {background-color: #96b7d8; padding: 20px; margin-bottom: 20px;}
.service_blurb p {background-color: transparent; color: #FFF; font-size: 21px; font-family: arial; line-height: 30px;}
#fulfillment li {list-style-type: circle; margin-left: 30px; font-size: 16px; line-height: 24px; max-width: 75%; }
#fulfillment ul {padding: 0 20px;}
#fulfillment h3 {padding-left: 20px; text-transform: uppercase;}
#fulfillment-faq p {padding: 10px 40px;}
#general div.content {
	background-image: url('https://brewerybranding.com/images/fulfillment/ship-background-1.jpg');
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
}
.fulfillment-intro h3 {font-family: 'Fjalla One'; font-size: 32px; margin-bottom: 10px; font-weight: normal; color: #394f6d;}
.fulfillment-intro p {padding-left: 20px; font-size: 22px; line-height: 32px; margin-bottom: 15px;}
#fulfillment .fulfillment-intro li {font-size: 20px; margin-bottom: 10px;}
.fulfillment_banner_wrap {background-image: url('https://brewerybranding.com/images/fulfillment/fulfillment_header_banner.jpg'); height: 300px;}
.fulfillment_banner_wrap h2 {color: #FFF; font-size: 60px; text-shadow: 3px 3px 5px #000; text-align: center; line-height: 250px;}
img.fulfillment-banner {width: 100%; display: block; max-height: 250px; position: absolute; top: 0; left: 0; right: 0;}
.collapsible {
  background-color: #394f6d;
  color: #96b7d8;
  cursor: pointer;
  padding: 5px 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 30px;
  font-family: 'Fjalla One';
  margin-top: 15px;
  text-transform: uppercase;
}
#fulfillment .content img {margin: auto; text-align: center; width: 100%; max-width: 1000px;height: auto; display: block;}
.active, .collapsible:hover {
  background-color: #2a3c54;
}

.collapsible:before {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: left;
  margin-right: 10px;
}

.active:before {
  content: "\2212";
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


/* New Hat Pages */
#gallery h3 {border-bottom: none;}
.headwear_details p {max-width: 50%;}

.hat-logo-options table {margin: 10px auto 40px auto;}
.hat-logo-options table tr {border-bottom: 2px solid #7797b7;}
.hat-logo-options table tr.last {border-bottom: none;}
.hat-logo-options table td {border-right: 2px solid #7797b7; padding: 5px 15px;}
.hat-logo-options table td.last {border-right: none;}
.production-schedule td {text-align: right;}
.production-schedule td.last {text-align: left;}
.hat-logo-options .merch-details h2 {font-size: 16px; border: none; padding: 5px;}
.hat-logo-options .active-tab.merch-details h2 {background-color: transparent; color: #7797b7;}
.hat-logo-options .merch-details-add {padding: 5px;}
.hat-logo-options .active-tab {background-color: transparent;}
.hat-logo-options .active-tab h2::before {color: #7797b7;}

.quick_details table {border: none;}
.quick_details td {text-align: right; font-size: 15px; letter-spacing: 2px; padding: 5px 15px; color: #7797b7;}
.quick_details table tr {border-bottom: 2px solid #7797b7;}
.quick_details table td.last {border-right: none; text-align: left;}
.quick_details table tr.last {border-bottom: none;}

div.vintage figure img {max-width: 100px;}
.main-hat-cat {margin: auto; max-width: 1200px; margin-bottom: 30px;}
.main-hat-top img {max-width: 600px; display: inline-block; }
.main-hat-top-details {display: inline-block; vertical-align: top; padding-top: 60px;}
.main-hat-top-details h2 {font-size: 36px;}
.main-hat-cat figure {display: inline-block; vertical-align: top; text-align: center; margin: 10px; max-width: 23%;}
.main-hat-cat figure img {width: 100%;}
.hat-program-select {text-align: center; font-size: 0; margin-bottom: 30px;}
.hat-program-select h3 {font-family: 'Fjalla One'; border-bottom: 2px solid #394f6d; text-transform: uppercase; color: #394f6d; font-size: 28px; padding-left: 20px; margin-bottom: 20px;}

.hat-program-select-ind {display: table-cell; width: 33%; vertical-align: top; margin: 0px; background-color: #eef4f9; cursor: pointer; border-right: 2px solid #394f6d; padding-bottom: 40px; position: relative;}
.hat-program-select-ind:hover {background-color: #c6dbec;}
.hat-program-select div.last {width: 34%; border-right: none;}
.active-tab {background-color: #c6dbec;}
.hat-program-select-ind.active-tab h4 {background-color: #9cbad2;}
.hat-program-select-ind h4 {text-transform: uppercase; color: #394f6d; font-family: 'Fjalla One'; text-align: center; font-size: 32px; border-bottom: 2px solid #394f6d; padding: 10px 0; background-color: #c6dbec;}
.hat-program-select p {background-color: transparent; padding: 10px 20px; font-size: 16px; line-height: 22px;}
.hat-program-select table {width: 100%; margin-bottom: 0; margin-top: 10px;}
.hat-program-select td {text-align: left; border: none; text-transform: uppercase; padding: 8px 20px;}
.hat-program-select td.t-right {text-align: right; padding-right: 20px;}
.hat-program-select span {display: block; width: 100%; text-align: center; padding: 5px 20px; color: #000; text-transform: uppercase; font-family: 'Fjalla One'; font-size: 18px; position: absolute; bottom: 5px;}

.beanie-decoration {max-width: 1600px; margin: auto; text-align: center; border-top: 1px solid #000; padding: 20px 0;}
.beanie-decoration figure {max-width: 20%; display: inline-block; margin: 10px; vertical-align: top;}
.beanie-decoration.fivewide figure {max-width: 15%;}
.beanie-decoration.twowide figure {max-width: 35%;}
.beanie-decoration figure img {width: 100%;}
.beanie-decoration figcaption {font-size: 1.5em; text-transform: uppercase; font-family: 'interstate';}
.beanie-decoration figcaption span {display: block; font-size: 0.8em;}
.beanie-decoration h3 {font-size: 2em; margin-bottom: 10px; text-transform: uppercase;}

.hat-color-options.beanie div.ngg-gallery-thumbnail-box {max-width: 10% !important;}

table.order-info {margin: 10px 0; border: 2px solid #36404d;}
table.order-info td {padding: 7px 12px; border-right: none; text-align: left;}
.order-info td.first {text-align: left;background-color: #36404d; color: #fff; text-align: right; text-transform: uppercase;}

#gallery {border-top: 1px solid #000; margin: 20px 0;}
.container .ngg-gallery-thumbnail span {display: none;}
.container .stock_headwear .ngg-gallery-thumbnail span {display: block;}

.hat-pricing {padding: 20px; text-align: center;}
.hat-pricing table {margin: auto;}
.hat-logo-options figure {max-width: 15%; display: inline-block; margin: 7px; vertical-align: top;}
.hat-logo-options img {width: 100%; max-width: 1200px;}

.hat-closure-options {margin-top: 30px; padding-bottom: 30px;}
.hat-closure-options figure {max-width: 15%; display: inline-block; margin: 15px; vertical-align: top;}
.hat-closure-options.fivewide figure {max-width: 18%;}
.hat-closure-options img {width: 100%;}

.hat-custom-options figure {max-width: 15%; display: inline-block; margin: 15px; vertical-align: top;}
.hat-custom-options img {width: 100%;}
.hat-custom-options figcaption {
    font-size: 16px;
    font-family: 'interstate';
}
.hat-color-options figure {
	display: inline-block;
	margin: 3px 5px;
}
.hat-color-options figcaption {
    font-size: 0.8em;
    text-transform: uppercase;
    font-family: 'interstate';
}


#stock-hat-options div.twoac {width: 47%;}

.stock-hat-opt-ind {display: inline-block; width: 40%; margin: 10px; padding: 5px 10px; text-align: center; vertical-align: top;}
.stock-hat-opt-ind img {max-width: 80%; border: 2px solid #394f6d;}
.stock-hat-opt-ind h3 {font-family: 'Fjalla One'; text-transform: uppercase; color: #394f6d; text-align: center; margin-bottom: 10px; letter-spacing: 2px; font-size: 28px;}
#stock-hat-options {display: none; padding: 20px; border: 2px solid #394f6d;}
#standard-custom-hat-options {
	display: none; 
	border: 2px solid #394f6d;
	}
#standard-custom-hat-options h3 {padding-top: 20px; margin-bottom: 10px; font-family: 'Fjalla One'; font-size: 28px; color: #394f6d; text-transform: uppercase;}	
#standard-custom-hat-options table tr td {background-color: #fff; border: 1px solid #394f6d; padding: 10px 15px;}

#premium-custom-hat-options h3 {padding-top: 20px; margin-bottom: 10px; font-family: 'Fjalla One'; font-size: 28px; color: #394f6d;}	
#premium-custom-hat-options table tr td {background-color: #fff; border: 1px solid #394f6d; padding: 10px 15px;}
	
#premium-custom-hat-options {
	display: none; 
	border: 2px solid #394f6d;
	}


span.hat-wrapper-line-stock {
    margin-left: 16%;
    max-width: 2px;
    overflow: hidden;
    border-left: 3px solid navy;
    display: block;
    margin-top: -48px;
}
span.hat-wrapper-line-standard {
    margin-left: 50%;
    max-width: 2px;
    overflow: hidden;
    border-left: 3px solid navy;
    display: block;
    margin-top: -48px;
}
span.hat-wrapper-line-premium {
    margin-left: 84%;
    max-width: 2px;
    overflow: hidden;
    border-left: 2px solid navy;
    display: block;
    margin-top: -48px;
}
.questions {margin-top: 20px;}

.notice {background-color: #ff8f63;
    /* margin: 0 30px; */
    max-width: 90%;
    margin: auto;}
.notice p {
	padding: 10px;
    color: white;
    /* font-weight: bold; */
    letter-spacing: 1px;
    font-size: 18px;
    background-color: transparent;
}


.dropdown-box.list {right: 0; left: 0; top: 22px; min-width: 250px; padding: 10px; height: auto;}
.dropdown-box.list ul li {text-align: left; padding: 10px; border-bottom: 1px solid #3b3b3b;}
.dropdown-box.list ul li.last {border-bottom: none;}
.dropdown-box.list ul li a {font-family: 'Raleway'; font-size: 18px; text-transform: uppercase;}
.dropdown-box.list ul li a:hover {color: #ff8f63;}

/* New 2020 Custom Headwear Section */
.headwear_container {max-width: 1600px; margin: auto; padding-top: 40px;}
.headwear_container .questions {margin: 30px;}
.headwear_main_image {width: 45%; display: inline-block;}
.headwear_main_image img {max-width: 100%; width: 100%;}

.headwear_details {
	width: 100%; 
	display: inline-block; 
	vertical-align: top; 
	padding: 20px 40px;
	position: relative;
	min-height: 500px;
	}
.ch_main_img {position: absolute; top: 0; right: 0; z-index: -1; max-width: 60%; max-height: 100%;}	
.hat-logo-option table {margin: 20px auto;}
.hat-logo-option table tr {border-bottom: 1px solid #36404d;}
.headwear_details h2 {font-size: 45px; font-family: 'Fjalla One'; color: #3a4451; border-bottom: 2px solid #3a4451; max-width: 55%; margin-bottom: 10px;}
.headwear_container h3 {font-weight: normal;}
.headwear_details h4 {font-size: 26px; font-family: 'Fjalla One'; color: #7797b7; margin-bottom: 10px;}
.quick_details {margin-top: 30px;}
.quick_details .hat-pricing {width: 50%; display: inline-block; vertical-align: top; padding: 0; text-align: left;}
.quick_details .hat_specs {width: 49%; display: inline-block; vertical-align: top;}

.quick_details .hat_specs table td {font-size: 15px;}
.hat_options {padding: 30px; text-align: center;}
.hat_options h3 {font-size: 32px; border-bottom: 2px solid #7797b7; color: #7797b7; margin-bottom: 20px; text-transform: uppercase; margin-top: 20px;}
#gallery h3 {text-align: center; text-transform: uppercase; font-family: 'interstate'; font-size: 20px; color: #36404d;}
#gallery .ngg-galleryoverview {margin-top: 10px;}
.hat.notice {width: 100%; max-width: 100%; text-align: center; display: none;}
.custom .apparel-grid-block h3 {display: block;}
#headwear_program_select {text-align: center; max-width: 1400px; margin: auto;}
#headwear_program_select h2 {font-size: 50px;  margin: 20px;}
#headwear_program_select img {max-width: 100%; margin-bottom: 10px;}
#headwear_program_select img.mobile {display: none;}
.home p#breadcrumbs {
  display: none;
}
.page-id-2203 p#breadcrumbs {display: none;}
.page-id-2442 p#breadcrumbs {display: none;}
.page-id-3179 p#breadcrumbs {display: none;}
.page-id-1850 p#breadcrumbs {display: none;}
.page-id-1967 p#breadcrumbs {display: none;}
.page-id-4186 p#breadcrumbs {display: none;}
.page-id-5340 p#breadcrumbs {display: none;}


.headwear_grid.beanies .apparel-grid-block h3 {position: static; margin-top: 2px;}
.headwear_grid.beanies .apparel-grid-block h4 {position: static; padding: 10px 15px; }
.headwear_grid.beanies .apparel-grid-block a {position: static;}
.headwear_grid.beanies .apparel-grid-block span.more-info {position: static;}
div.hatprogram {max-width: 49%; display: inline-block; border-right: 2px solid #7797b7;}
.hatprogram p {padding: 10px;}
.hatprogram h4 {color: #7797b7; text-transform: uppercase; font-size: 28px; font-family: 'interstate';}


div.nc_form {
    margin-top: 30px;
    padding: 20px;
    background-color: #e1eaee;
}
.wpforms-confirmation-container-full {background: none;}
.main_nc_form {
    max-width: 1220px;
    margin: auto;
    padding-top: 40px;
}
.nc_form button {
    background-color: #36404d !important;
    color: #fff !important;
}
.cs-hat-color-block h3 {border-bottom: none; font-size: 28px; text-align: left; padding-left: 30px;}
.cs-hat-color-block figure {vertical-align: top; max-width: 100px;}
.nc_form label {
    color: #36404d;
}
/* New 2020 Stock Headwear Section */
.stock_headwear .hat-logo-options.sixwide figure {max-width: 12%;}
.stock_headwear .hat-color-options div.ngg-gallery-thumbnail-box {max-width: 12% !important; margin: 5px; vertical-align: top;}
.headwear_grid  .apparel-grid-block h4 {padding: 0; bottom: 32px; left: 0; right: 0; background-color: transparent; text-align: center;}
.headwear_grid .apparel-grid-block h4 span.brand {background-color: #3b3b3b; padding: 7px 12px; border-right: 2px solid #fff;}
.headwear_grid  .apparel-grid-block h4 span.style {background-color: #d4d4d4; padding: 7px 12px; color: #3b3b3b;}


/* New Stock Beanie Section */
.beanie .headwear_main_image {width: 45%;}
.stock_headwear .hat-logo-options.sevenwide figure {max-width: 12%;}
.stock_headwear .hat-logo-options.eightwide figure {max-width: 18%;}

/* Bulk Hat Buy */
.bulkhat {
	max-width: 1400px;
    margin: auto;
    padding-top: 40px;
}

.bulkhat h2 {
	width: 100%;
    background-color: #36404d;
    color: #fff;
    padding: 10px 30px;
    font-size: 36px;
}
img.bulkmainimg {max-width: 50%; float: right;}
.bulkcontent {padding: 20px;}
p.bulkintro {
	margin-top: 20px;
    font-size: 18px;
    line-height: 26px;
	}
.bulkcontent h3 {
	font-size: 60px;
    margin-top: 20px;
    color: #36404d;
    font-family: 'Fjalla One';
    margin-bottom: 10px;
}
.bulkcontent h5 {font-size: 28px; font-family: 'Fjalla One'; margin-top: 10px;}
span.dollar {
	vertical-align: top;
    padding-top: 10px;
    margin-right: 7px;
    display: inline-block;
    font-size: 28px;
}
p.disclaimer {
    margin-top: 25px;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 40px;
}
.bulktimeline {
    background-color: #ededed;
    padding: 30px  60px;
    /* margin-top: 30px; */
    max-width: 58%;
    display: inline-block;
}
.bulktimeline img {max-width: 100%;}
.bulktimeline h5 {
	    text-align: center;
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #36404d;
}
div.retail{
	font-size: 24px;
	font-family: 'Fjalla One';
	margin-bottom: 30px;
    max-width: 38%;
    display: inline-block;
    float: left;
    width: 38%;
    vertical-align: top;
    margin-top: 40px;
    padding-right: 40px;
   }
.bulkgraphics {margin-top: 40px;}

.retail img {float: left; max-width: 65px; margin-right: 10px;}
.retail p {
	    font-size: 26px;
    font-family: 'Fjalla One';
}
.bulkaction {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.bulkaction a {
	color: #fff;
	font-family: 'Fjalla One';
	background-color: #36404d;
	padding: 15px 25px;
	font-size: 30px;
	margin: 20px;
}

.mainsplashbanner {width: 100%; display: block; border: 2px solid #000;}
.mainsplashbanner img {max-width: 100%; display: block; width: 100%;}

.hatcatalog {max-width: 800px; margin-top: 60px; text-align: center; margin-bottom: 20px;}
.hatcatalog h2 {
	    margin-bottom: 20px;
    font-size: 28px;
}
.hatcatalog img {max-width: 100%;}

/* Mood Boards */
.moodboards .ngg-galleryoverview {text-align: center; margin: auto;}
.moodboards h2 {text-align: center; font-size: 48px; padding-top: 20px; padding-bottom: 20px;}
.moodboards {text-align: center;}
.page-id-8440 p#breadcrumbs {display: none;}

/*Camp Shirts */
.camp-option-group {border: 2px solid #36404d; margin-bottom: 20px;}
.camp-option-group h2 {color: #fff; background-color: #36404d; padding: 10px; font-size: 32px; width: 100%;}
.camp-option-group .hat-logo-options {padding: 0 20px;}
.camp-construction img {max-width: 960px;}

.camp-fabric-design {width: 100%; display: inline-block; vertical-align: top;}
.camp-fabric-design img {max-width: 80%;}
.camp-fab-select {display: inline-block; vertical-align: top; max-width: 30%; margin: 10px 20px;}
.camp-fab-select img {max-width: 150px;}
.camp-fab-select h4 {font-weight: bold;
    margin-bottom: 10px;}
.camp-buttons img {max-width: 75px;}
.camp-buttons figure {
    display: inline-block;
    vertical-align: top;
    padding: 10px;
}
.campaccents figure {display: inline-block; max-width: 25%; padding: 20px; margin: 20px;}
.campaccents figure img {max-width: 100%;}
.camp-decoration img {max-width: 900px;}
.camp-close {display: none;}
.active-tab .camp-close {display: block;}
.camp-option-group.active-tab {background-color: #fff;}
.hat-logo-options.camp-close figure {max-width: 14%;}
.camp-intro {position: relative; padding: 0 30px;}
.camp-intro h2 {position: absolute; top: 30px; right: 40px;}
.camp-intro img {max-width: 100%;}
.headwear_details.camp-intro {min-height: 100px;}
.hat-logo-options.flannel figure {max-width: 11%;}
span.subprice {font-size: 16px; color: #616161;}
div.camp-deco-standard {border: 2px solid #c7c7c7; padding: 20px 0; margin-bottom: 20px; margin-top: 10px;}
div.camp-deco-premium {border: 2px solid #c7c7c7; padding: 20px 0; margin-bottom: 20px; margin-top: 10px;}
.camp-deco-standard figure {max-width: 11%;}
.camp-deco-premium figure {max-width: 11%;}
.camp-deco-standard h5 {color: #7797b7; text-transform: uppercase; font-size: 28px;}
.camp-deco-standard h6 {color: #9a9a9a; text-transform: uppercase; margin-bottom: 10px;}

/* Flannels */
.flannelplaidcolors .ngg-template-caption .ngg-gallery-thumbnail-box {
    max-width: 8% !important;
    vertical-align: top;
    margin-bottom: 10px;
}
.page-id-6868 #breadcrumbs {display: none;}
.page-id-6868 .headwear_container {padding-top: 0;}
.customflannellink img {max-width: 80%; margin-bottom: 20px;}
.customflannellink h2 {margin-top: 40px; text-align: center;}
.customflannellink h3 {padding-bottom: 20px; padding-top: 10px; font-size: 22px;}
.ngg-gallery-thumbnail span {padding-top: 5px;}
.flannelplaidcolors .ngg-galleryoverview {margin-top: 20px;}

h3.sizing-grid {
    text-decoration: none;
    border: 2px solid;
    display: inline-block;
    padding: 5px 20px;
    margin-top: 40px;
}
 
/* Resources */
div.resources {max-width: 1200px; margin: auto; padding-bottom: 40px;}
.resources h3 {
	border-top: 4px solid #96b7d8; 
	margin-top: 30px; 
	padding-top: 30px;
	padding-bottom: 20px;
	font-size: 26px;
	font-family: 'Fjalla One';
	color: #3a4451;
	}

.resources p {margin-bottom: 15px; font-size: 1.2em; line-height: 1.4em;}
.resources ul {margin-bottom: 10px;}
.resources li {list-style-type: circle; margin-left: 20px; font-size: 16px; margin-bottom: 5px;}
.resources a {color: #96b7d8;}
.resources h4 {font-size: 20px; font-family: 'Fjalla One'; margin-bottom: 10px; color: #3a4451;}
.resource-patch {margin-top: 15px;}
.resource-patch img {display: inline-block; max-width: 250px;}
.resource-patch-info {display: inline-block; vertical-align: top; padding-left: 20px; max-width: 800px;}
.resource-patch-info h3 {border-top: none; margin-top: 0; padding-top: 10px;}

.form-conf {
    max-width: 85%;
    margin: auto;
    text-align: center;
    font-size: 2em;
    padding-top: 80px;
    padding-bottom: 200px;
}


.rep-samp-request {    max-width: 95%;
    margin: auto;
    padding-top: 20px;}
    
div.wpforms-container-full .wpforms-form .samp-customhat {border-top: 3px solid #ccc; margin-top: 20px;}  
div.wpforms-container-full .wpforms-form .samp-stockhat {border-top: 3px solid #ccc; margin-top: 20px;}      
div.wpforms-container-full .wpforms-form .samp-apparel {border-top: 3px solid #ccc; margin-top: 20px;}  
 div.wpforms-container-full .wpforms-form .samp-merch {border-top: 3px solid #ccc; margin-top: 20px;}  
div.wpforms-container-full .wpforms-form .samp-other {border-top: 3px solid #ccc; margin-top: 20px;}   

.sitenotice {text-align: center; background-color: #f47b21; display: none;}  
.sitenotice p {max-width: 1200px; margin: auto; background-color: transparent; padding: 5px; line-height: 1.5em;}


/* Rep Dash Board */
#repdashboard {max-width: 90%; margin: auto; text-align: center; padding-top: 20px; padding-bottom: 40px;}
.recblock {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 50px;
}
.recblock h2 {margin-bottom: 20px;}
.recblock ul {
	display: inline-block;
	text-align: left;
	margin: auto;
}
.marketing-mat-div {padding: 20px; background-color: #d1e3e9; margin-top: 30px;}
.marketing-mat-div h1 {color: #36404d; font-size: 32pt; margin-bottom: 30px; border-bottom: 2px solid;}

.department-mat-div {padding: 20px; background-color: #ececec; margin-top: 30px;}
.department-mat-div h1 {color: #36404d; font-size: 32pt; margin-bottom: 30px; border-bottom: 2px solid;}
.page-id-5861 #breadcrumbs {display: none;}
.recblock li {margin-bottom: 4px;}
 
/* Large Size Screens */
@media only screen 
and (min-device-width : 1401px) 
and (max-device-width : 2800px) { 
.headwear_details h2 {font-size: 58px;}
.headwear_details h4 {font-size: 30px;}
.headwear_details p {font-size: 18px; line-height: 24px; max-width: 50%;}
.quick_details td {font-size: 20px;}
.quick_details .hat_specs table td {font-size: 20px;}
.hat_options {font-size: 20px;}
.hat-custom-options figcaption {font-size: 20px;}
.hat-logo-options table td {padding: 10px; font-size: 24px;}
.hat-logo-options .merch-details-add {margin-left: -80px; margin-right: -80px;}
.headwear_details.camp-intro h2 {font-size: 78px;}
.sitenotice p {font-size: 18px; padding: 5px 0;}
}

/* Mid Size Screens */
@media only screen 
and (min-device-width : 668px) 
and (max-device-width : 1400px) { 
.merch-category h2 {font-size: 34px; }
div.merch-category {width: 33.33%;}
.topnav a {font-size: 12px;}
.merch-block table td {font-size: 15px;}
.merch-block h2 {font-size: 28px;}
.merch-details h2 {font-size: 18px;}
.apparel-grid-block {width: 28%;}
.apparel2018 h2 {margin: 0 20px;}
.fivewide h2 {font-size: 16px;}
.merch-block.fivewide table td {font-size: 10px;}
.fivewide .merch-details h2 {font-size: 12px;}
.merch-block.fourwide table td {font-size: 14px;}
.main_nc_form {max-width: 800px;}
.dropdown-box.list ul li {padding: 3px;}
.dropdown-box.list ul li a {font-size: 13px;}
.hat-pricing td {font-size: 16px;}
.headwear_details p {font-size: 14px;}
.merch-block span.oz {font-size: 8px;}
}



/* Mobile Catalog */
@media only screen and (max-width : 768px) { 
	main {padding-left: 0; padding-right: 0; padding-top: 0;}
	.apparel-grid-block {max-width: 100%; margin: 10px;}
	.apparel-grid-block img {max-width: 290px;}
	.ngg-galleryoverview .ngg-gallery-thumbnail img {max-width: 250px !important;}
	.container {padding: 0px;}
	div.aboutbio {width: 45%; margin: 5px;}
	.aboutbio img {width: 100%; height: auto;}
	.aboutbio h4 {font-size: 16px; }
	.aboutbio a {font-size: 10px;}
	.one-third {width: 48%; height: auto;}
	#flex-child h1 {font-size: 20px;}
	.merch-category h2 {font-size: 22px; bottom: 10px; left: 10px;}
	div.merch-category {width: 46%; margin: 3px;}
	.fulfillment_banner_wrap h2 {line-height: inherit; padding-top: 20px; font-size: 28px;}
	#fulfillment li {max-width: 100%;}
	div#fulfillment {padding: 5px;}
	#general div.content {background-image: none;}
	.collapsible {font-size: 18px;}
	.service_blurb p {font-size: 18px; line-height: 22px; }
	.fulfillment-intro p {font-size: 16px; margin-bottom: 25px; line-height: 24px;}
	#fulfillment .fulfillment-intro li {font-size: 16px; margin-bottom: 15px;}
	.fulfillment-intro h3 {font-size: 22px;}
	.fulfillment_banner_wrap {height: 100px;}
	.service_blurb {padding: 10px 15px; }
	.nav-menu .navbutton {display: none;}
	.topnav .icon {display: block;}
	#mobile-nav-button {font-size: 30px;}
	#brewersAssocLogo {float: none; text-align: center; width: 100%;}
	#disclaimer {max-width: 100%; padding: 10px; margin: 0;}
	.disclaimer {font-size: 9px;}
	.topnav {height: 50px; padding: 50px;}
	#brewersAssocLogo img {max-width: 60px;}
	h1 {font-size: 32px;}
	#about-brewery-blurb {padding: 5px;}
	#about-brewery-blurb p {font-size: 16px;}
	#insta {display: none;}
	.topnav {position: static;}
	#flex-child {margin: 0; width: 50%;}
	#logo img {height: 60px;}
	#logo {height: auto; margin-left: 0;}
	#merch-image {width: 100%; height: 300px;}
	#merch-contents {display: block;}
	#merch-header h1:after {display: none;}
	.merch td {font-size: 14px;}
	#mobile-foot-social {display: block;}
	#mobile-foot-social ul li a {padding: 5px;}
	.merch-block {width: 90%; padding: 0;}
	.merch-block h2 {font-size: 26px;}
	.merch-block table td {font-size: 16px;}
	.merch-container h1 {font-size: 32px;}
	.merch-block p {width: 100%;}
	.merch-container .insert-page {display: inline-block; max-width: 100%; width: 90%;}
	.merch-details h2 {font-size: 18px;}
	.product-details .product-image {max-width: 100%;}
	.product-details .product-specs {max-width: 100%; padding: 0;}
	.product-specs h2 {font-size: 2em;}
	.product-specs h4 {font-size: 1.2em;}
	.beanie-decoration h3 {font-size: 1em;}
	.beanie-decoration figcaption {font-size: 1em; word-wrap: break-word;}
	.beanie .headwear_main_image {width: 90%; margin: auto;}
	.merch-block.fivewide {width: 90%;}
	.merch-block.fourwide {width: 90%;}
	.headwear_main_image {width: 100%; display: block;}
	.headwear_details {width: 100%; display: block;}
	.headwear_details h2 {font-size: 30px; text-align: center; max-width: 100%;}
	.quick_details .hat-pricing {width: 100%; display: block;}
	.quick_details .hat_specs {width: 100%; display: block; margin-top: 10px;}
	.hat_options h3 {font-size: 22px;}
	.hat_options {padding: 20px;}
	.hat-logo-options figure {max-width: 25%; margin: 10px; font-size: 14px;}
	.hat-color-options figure {max-width: 15%;vertical-align: top;}
	.hat-color-options figure img{max-width: 100%;}
	.hat-closure-options figure {max-width: 25%; margin: 10px; font-size: 14px;}
	.hat-custom-options figure {max-width: 25%; margin: 10px; font-size: 14px;}
	.hat-custom-options figcaption {font-size: 14px;}
	p#breadcrumbs {font-size: 12px;}
	.stock_headwear .hat-logo-options.sixwide figure {max-width: 26%;}
	.ngg-galleryoverview .ngg-gallery-thumbnail img {max-width: 100% !important;}
	.stock_headwear .hat-color-options div.ngg-gallery-thumbnail-box {max-width: 20% !important;}
	.apparel-grid-block h3 {font-size: 26px;}
	#headwear_program_select img.desktop {display: none;}
	#headwear_program_select img.mobile {display: block;}
	#headwear_program_select h2 {font-size: 24px; margin: 10px;}
	.headwear_grid.beanies h2 {font-size: 26px; text-align: center; padding: 10px 0 0 0; }
	.headwear_grid.beanies .apparel-grid-block h3 {font-size: 22px;}
	.bulkhat h2 {font-size: 30px; text-align: center;}
	.bulkcontent {text-align: center; padding: 15px;}
	img.bulkmainimg {max-width: 80%; float: none;}
	.stock_headwear .hat-logo-options.sevenwide figure {max-width: 40%;}
	p.bulkintro {
    margin-top: 10px;
    font-size: 14px;
    line-height: 20px;}
    .bulkcontent h5 {font-size: 22px;}
    div.retail {float: none; width: 100%; max-width: 100%; padding: 10px; padding-right: 10px;}
    .bulktimeline {max-width: 100%; padding: 10px;}
    .retail p {font-size: 18px;}
    .bulkaction {flex-direction: column; margin-top: 20px; margin-bottom: 40px;}
    .ch_main_img {position: static; max-width: 100%;}
    .headwear_details p {max-width: 100%;}
    .quick_details table {margin: auto;}
    .hat-logo-options table td {font-size: 16px; padding: 5px 8px; }
    .headwear_container {padding-top: 20px;}
    .camp-intro h2 {color: #36404d; position: static; border: none;}
    .camp-fab-select {max-width: 80%;}
    .hat-logo-options.camp-close figure {max-width: 40%;}
    div.hatprogram {display: block; max-width: 100%; border-right: none;}
    .flannelplaidcolors .ngg-template-caption .ngg-gallery-thumbnail-box {max-width: 17% !important;}
    .hat-logo-options.flannel figure {max-width: 25%;}
    .headwear_details.camp-intro {padding: 0 20px;}
    .customflannellink {padding: 20px;}
    .customflannellink img {max-width: 100%;}
    .customflannellink h2 {font-size: 24px; }
    .customflannellink h3 {font-size: 16px;}
    #spring-group-buy {padding: 20px;}
    .gpbuyinfo {max-width: 100%;}
    .gpbuycontainer img {max-width: 100%;}
    .gpbuycontainer {padding: 15px;}
    #spring-group-buy p {font-size: 20px; line-height: 28px;}
}