/** Shopify CDN: Minification failed

Line 89:2 Expected identifier but found "*"
Line 106:15 Expected identifier but found whitespace
Line 106:16 Unexpected "#402317"

**/
/*

This file will override styles defined in default_collection_styles.css.

What are the codes for various colors?
These are the colors that were used for theshoutingmatches theme:
  #b9a293 is tan
  #e5ded4 is light tan
  #9d8273 is dark tan
  #eb7d3c is orange
*/


/* change the background color of the whole page */
body {
  background: transparent;
}

/* If you want to use a font from https://google.com/fonts 
   change the font-family from "Montserrat" to whatever the Google font is.
   So if you wanted to use the Google font "Lato", you'd do this:
   font-family:"Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

   There are 2 places where the Google font is current used. Change both the body and the .btn.
*/
body {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* default link colors */
a:link {
  color:#402317;
}
a:visited {
  color:#402317;
}
a:hover, 
a:active {
  color:#402317;
}

/* change the button style */
.btn,
.btn:link, 
.btn:visited {
  color:#ffffff;
  text-transform:uppercase;
  font-family:"Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:700;
  
  /* first number is vertical offset (negative goes up), second is horizontal (negative goes left) third values is 0-255 r, g, b, fourth number is the opacity (1=100% opacity) */
  /* if you want to get rid of the text-shadow, put text-shadow:none; */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  
  /* to add rounded corners, set all three radius numbers to 5px, 8px, etc. Must have the letters px after the number. */
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  
  /* Change the button colors, the first value is the top color, second is the bottom color. Also set the background-color value for browsers that dont support gradients. */
  background-color: #402317;
  background-image: -moz-linear-gradient(top, #402317, #402317);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#402317), to(#402317));
  background-image: -webkit-linear-gradient(top, #402317, #402317);
  background-image: -o-linear-gradient(top, #402317, #402317);
  background-image: linear-gradient(to bottom, #402317, #402317);
  
  /* Put ff before the both gradient colors for this one. so #eb7d3c would be #ffeb7d3c */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff402317', endColorstr='#ff402317', GradientType=0);
  
}

/* Also copy the background color to the hover state. If you wanted to have a different color when hovering over a button, you could define different colors here */
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  color: #402317;
  background-color: #ffffff;
  *background-color: #ffffff;

  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  
  /* Put ff before the both gradient colors for this one. so #eb7d3c would be #ffeb7d3c */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffffff', GradientType=0);
}
.btn:active,
.btn.active {
  background-color: #ffffff \9;
}

  /* border colors go clockwise: top right bottom left */
  border-color: #402317 #402317 #402317;
}

.link_cart { display:block; float:right; width:100px; height:30px; text-align:center; line-height:30px; font-size:14px; margin-top:15px; }
.link_cart:hover, 
.link_cart:active { text-decoration:none; }
.link_cart .badge {
  background:#402317;
  color:white;
  text-shadow:none;
  padding:5px 10px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

/* Change the logo here. Upload an image in Settings > Files, then copy and paste the URL for the background-image */
.logo {
  height: 57px;
  background-image:none;
}


/* Change the header background color, and color of the border at the bottom of the header */
.header {
  background:transparent;
  border-bottom:solid #402317 3px;
}

/* Change the footer background color, and color of the border at the top of the footer */
.footer {
  background:transparent;
  border-top:solid #ffffff 3px;
}
.footer_ambientmerch_logo {
  background: transparent url(../../../../../../cdn/shop/files/AI-new-webstores_2519862778691022408.png) no-repeat scroll center top;
}

/* Change the background color and background image of the content area (which is below the header, above the footer) */
/* You have to change the background in both of these styles. They should both be the same thing. */
.content {
  background-color:transparent;
  background-image:none;
}
body.page_product .content {
  background-color:transparent;
  background-image:none;
}

/* change the color of the background box behind each result (it's current a 70% opacity white image) */
/* to change it from white to a different transparent image, upload a PNG-24 image with transparency (it can just be a 1px by 1px square, copy the URL here */
.result {
  /* semi-transparent white image */
  background:transparent url( ../../../../../../cdn/shop/t/4/assets/white70.png ) repeat scroll left top;
  border-bottom:solid #402317 2px; /* black border under eadh result (this should match the background color of the page */
}

@media (min-width: 768px) {
  .results {
    min-height:340px;
  }
}

/* If you change the semi-transparent background image, also change that here. */
.page_content {
  background:transparent url( ../../../../../../cdn/shop/t/4/assets/white70.png ) repeat scroll left top;
}

/* change the color of the stripe that appears below a result when you hover over it */
.result:hover {
  -webkit-box-shadow: 0 5px 0 #ffffff;
     -moz-box-shadow: 0 5px 0 #ffffff;
          box-shadow: 0 5px 0 #ffffff;
}

/* Change the color of the product title. It has a light gray shadow under it that you might want to change if the background color changes. */
.result .title {
  color:#402317;
  text-shadow: 1px 1px 1px #CCCCCC;
}

/* You'll also need to change the color of the product titles here. These colors should be the same as the ".result .title" style. But the a:hover,a:active color could be different (that's the color when your mouse hovers over the text) */
.result .title a:link,
.result .title a:visited {
  color:#402317;
  text-decoration:none;
}
.result .title a:hover,
.result .title a:active {
  color:#402317;
  text-decoration:underline;
}

/* Uncomment this if you want to remove the shadow under the images */
.result .image img {
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}


/* Change the color of the boxy links like "HOME" in the header and "CONTACT US" in the footer. */
.link_block:link, 
.link_block:visited {
  color:#402317;
  text-decoration:none;
}
/* the color when you hover over one of these links */
.link_block:hover, 
.link_block:active, 
.link_block:focus {
  color:#ffffff;
  text-decoration:none;
  background:#402317;
}

/* The tooltip pop-out things (when you hover over the Cart link and an orange "Checkout" pop-out appears. */
/* Each of these colors should be the same: */
.tooltip-inner { background-color: #402317; }
.tooltip-inner { color: #ffffff; }
.tooltip.top .tooltip-arrow { border-top-color: #402317; }
.tooltip.right .tooltip-arrow { border-right-color: #402317; }
.tooltip.left .tooltip-arrow { border-left-color: #402317; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #402317; }

/* Navigation text color. */
.navbar .nav {
  color: #402317;
}

/*
With 4 links in the navigation, use these values:

margin-right:.33%;
width:24.7%;

If there were 5 links in the navigation, the percentages would be :

margin-right:.5%;
width:19.5%;

*/
.navbar .nav > li {
  color: #402317;
  margin-right:.33%;
  width:24.7%;
}

@media (max-width: 460px) {
  .navbar .nav > li,
  .navbar .nav > li:last-child {
    margin-right:0;
    width:100%;
  }
}

/* Also change the navigation text color here. (should be the same as ".navbar .nav" above. */
.navbar .nav > li > a {
  color: #ffffff;
  background:#402317;
  border-bottom:solid #ffffff 3px;
}

/* Color the navigation should be when you hover over a nav link: */
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: #402317;
  text-decoration: none;
  background-color:#FFFFFF;
  border-bottom:solid #402317 3px;
  
  /* this is the stripe that appears below the navigation link when you hover over it */
  -webkit-box-shadow: 0 5px 0 #ffffff;
     -moz-box-shadow: 0 5px 0 #ffffff;
          box-shadow: 0 5px 0 #ffffff;
}

/* Here are the colors for the individual-product page. */
.page_content {
  color:#402317;
  /*REMOVED THE TEXT SHADE FOR POLICA*/
  text-shadow:none; /* text has a light gray shadow */
  border-bottom:solid #402317 2px;
}

/* The links on the individual-product page are orange. Change that here: */
.page_content a:link,
.page_content a:visited {
  color:#bc2f00; text-decoration:none;
}
/* and the color when you hover over a link: */
.page_content a:hover, 
.page_content a:active {
  color:#402317;
  text-decoration:underline;
}

/* Colors for a divider line (the hr tag) It's 2 lines, dark gray on top and white on bottom: */
.page_content hr {
  border-top:solid #333333 1px;
  border-bottom:solid #FFFFFF 1px;
}

/* The colors for the Twitter and Facebook icons: */
.share_links a:link, 
.share_links a:visited {
  color:#402317;
  text-decoration:none;
}
.share_links a:hover, 
.share_links a:active {
  color:#ffffff;
  text-decoration:none;
}

/* The heading for the Related items "You might also like:" */
.related h3 {
  color:#333333;
  text-transform:uppercase;
  text-shadow:none;
}

/* The contact info colors. (the black boxes where it has the phone, email and address on the contact page) */
.contact-info .table .cell {
  background:#402317;
  color:#FFFFFF;
}

/* also set the text color here */
.contact-info .table .cell p,
.contact-info .table .cell address {
  color:#FFFFFF;
}

/* Here's the color for the email link in the contact info. Right now it's just white, same as the text. */
.contact-info .table .cell a:link,
.contact-info .table .cell a:visited {
  color:#FFFFFF;
}
.contact-info .table .cell a:hover,
.contact-info .table .cell a:active {
  color:#FFFFFF;
}
.additional-checkout-buttons {
  display:none;
}