/* SHOP RESET */

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, font, 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{background: transparent; border: 0; margin: 0; padding: 0;} ol, ul{list-style: none;} img{max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast;}

::-moz-selection{background: #3b541f; color: #fff; text-shadow: none;} ::selection{background: #3b541f; color: #fff; text-shadow: none;}

strong{font-family: 'Open Sans', sans-serif; font-weight: 800;}

h1{font-family: 'Bree Serif', serif; color: #3b541f; font-size: 28px; line-height: normal;}
h2{font-family: 'Bree Serif', serif; text-transform: uppercase; color: #3b541f; font-size: 26px; line-height: normal;}
h3{font-family: 'Bree Serif', serif; color: #3b541f; font-size: 22px; line-height: normal;}
h4{font-family: 'Bree Serif', serif; color: #3b541f; font-size: 20px; line-height: normal;}
h5{font-family: 'Bree Serif', serif; color: #3b541f; font-size: 18px; line-height: normal;}

a{color: inherit; text-decoration: none; transition: all .2s ease-in-out;}
a:hover{color: #3b541f;}

/* SITE FRAMEWORK */

html, body{background: #333; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 26px;}
body {overflow-x: hidden;}
.container-width{max-width: 1100px; margin: 0 auto;}

/* SHOP */

#hs-outside-wrapper{background: url(../siteart/bg.png);}
#hs-content-wrapper {width: 93%; max-width: 1100px; font-family: 'Open Sans', sans-serif!important;}
.hs-btn.hs-highlighted {background-color: #3b541f!important; color: #fff!important;}
.hs-btn.hs-highlighted:hover {background-color: #333!important; color: #fff!important;}
.product-variations .variation .variation-selection-values a.active {border-color: #3b541f!important; color: #3b541f!important;}


/* HEADER */
.header{position: relative; width: 100%;}
.header #logo{float: left; width: 33.3333%; text-align: center;}
.header #small-logos{float: right; width: 33.3333%; text-align: center;}
.top-header{background: #fff; padding: 15px; box-sizing: border-box;}
#logo{float: left; width: 280px;}
#small-logos{float: left;}
#small-logos img{max-height: 60px; margin: 15px 0 0 20px;}
.bottom-header{background: #3b541f; color: #fff; font-family: 'Bree Serif', serif; font-size: 14px; text-align: center;}
#nav{float: left; width: 33.3333%; position: relative; padding: 25px 0 0; text-align: left;}
#menu-button{background: #3b541f; font-size: 24px; padding: 5px 15px; border-radius: 5px; text-decoration: none; color: #fff;}
#menu-button .fa{display: inline;}


/* FOOTER STYLES */

.footer{position: relative; z-index: 99; background: #333; padding: 5px 25px; box-sizing: border-box; width: 100%; font-family: 'Bree Serif', serif; font-size: 14px; color: #ccc;}
.footer a{color:#ccc;}
.footer a:hover{color: #fff;}
#site-host{float: left;}
#copyright{float: right;}
 
.clear{clear: both;}	

/* RESPONSIVE STYLES */

.show-menu-for-mobile{display: none;}

@media screen and (max-width: 1024px){
	.header{position: relative; top: 0; left: 0; width: 100%; max-width:none; text-align: center;}
}

@media screen and (max-width: 1024px) and (min-width: 796px){
  .container-width{padding: 0 25px;}
  
  #logo, #small-logos{float: none; width: auto;}
  #small-logos img{max-height: 45px; margin: 10px 15px;}	
}

@media screen and (max-width: 795px) and (min-width: 481px){
  .container-width{padding: 0 25px;}
  .column2{float: none; width: 100%; padding: 0; margin-bottom: 15px;}
  .header{position: relative; top: 0; left: 0; width: 100%; text-align: center;}
  #logo{float: none; width: auto;}
  #small-logos{display: none;}
  #nav{position: absolute; left: 25px; float: none; width: auto;}
  #menu-button{font-size: 16px; padding: 5px 10px;}
  .header #logo{float: none; width: 280px; margin: 0 auto;}
  #site-host, #copyright{float: none; width: 100%; text-align: center; margin: 3px 0;}
}
 
@media screen and (max-width: 480px){
  .container-width{padding: 0 25px;}
  .header{position: relative; top: 0; left: 0; width: 100%; text-align: center;}
	
  #logo{float: none; width: auto;}
  #small-logos{display: none;}
  .home-container .cycle-slideshow{display: none;}
  #nav{position: absolute; left: 25px; padding: 20px 0 0; float: none; width: auto;}
  #menu-button{font-size: 16px; padding: 5px 10px;}
  .header #logo{float: none; width: 200px; margin: 0 auto;}
  #site-host, #copyright{float: none; width: 100%; text-align: center; margin: 3px 0;}
}