/* The line below imports most of the styles for your chosen theme.
It is recommended that you leave this here to receive bug fixes or additions to this theme. */

@import url('../../assets/theme_cooper.css');

/* The styles below are automatically turned into controls on the Design Bar.
For more information, see the FAQ. */

/* Colors */

.store_name a:link, .store_name a:hover, .store_name a:visited {
  color: #222222;                   /*: Store Name :*/
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6, #product_name, #price {
  color: #222222;                   /*: Titles :*/
}

body, #main .faq h2, .label label, #product .better-select-selected-label {
  color: color|transparent|initial|inherit;                   /*: Text :*/
}

a:link, a:visited, a:active, #footer a, .no-products p {
  color: #222222;                   /*: Links :*/;
}

a:hover, #sidebar ul li.current a, body.faq #buttons .faqs, body.contact #buttons .contact_us {
  color: #888888;                   /*: Link Hover :*/
}

#main .button, #main button, #items_in_cart, #promotion, #variant_id_chzn .result-selected, #variant_id_chzn .result-selected.highlighted, .stock-remaining, .stock-sold {
  background-color: #919191;        /*: Buttons :*/
}

#main .button, #main button, #items_in_cart a, #promotion, #variant_id_chzn .result-selected, #variant_id_chzn .result-selected.highlighted {
  color: #FFFFFF;                   /*: Button Text :*/
}

hr, #thumbs a:hover, #product #variant_id, #footer, #product #variant_id_chzn > * {
  border-color: #FFFFFF;               /*: Lines :*/
}

.product .flag.status, #product .status {
  background-color: #FF0000;           /*: Product Status :*/
}

#content, #header, #footer{
background: none;
}

#container, #content{
background: none;
}




/* Layout */

#header .store_name {
  font-family: "Rokkitt", serif; /*: Store Name Font :*/
  text-align: center;                     /*: Store Name Alignment :*/
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6, #product_name{
  font-family: "Rokkitt", serif; /*: Title Font :*/
}

#banner {
  text-align:center;                /*: Header Image Alignment :*/
}


body{
  background-color:transparent;          /*: Body Background :*/
  font-family: "Enriqueta", serif; /*: Body Font :*/
  background-attachment: fixed;      /*: Background Attachment :*/
  background-repeat: no-repeat;          /*: Background Image Repeat :*/
  background-position: top center;    /*: Background Image Position :*/
}

/* These are non-CSS custom settings for the theme. It's best to leave these alone.
To create custom Design Bar attributes for your theme, view this help article:
http://support.storenvy.com/customer/portal/articles/1226033-how-do-i-add-settings-to-the-store-owner-ui- */

storenvy {
  storenvy-featured-collection: collection-all;    /*: Featured Collection :*/
  storenvy-use-theme-background: if-false;         /*: Use Theme Background :*/
  storenvy-show-store-name: if-false;               /*: Show Store Name :*/
  storenvy-show-logo: if-false;                     /*: Show Logo :*/
  storenvy-show-stock-bars: if-false;              /*: Show Stock Bars :*/
  
}

/****** THIS IS FOR THE ARTIST PAGE *******/

      .cbp-rfgrid {
        margin: 35px 0 0 0;
        padding: 0;
        list-style: none;
        position: relative;
        width: 100%;
      }

      .cbp-rfgrid li {
        position: relative;
        float: left;
        overflow: hidden;
        width: 16.6666667%; /* Fallback */
        width: -webkit-calc(100% / 3);
        width: calc(100% / 3);
      }

      .cbp-rfgrid li a,
      .cbp-rfgrid li a img {
        display: block;
        width: 100%;
        cursor: pointer;
      }

      .cbp-rfgrid li a img {
        max-width: 100%;
      }

      /* Flexbox is used for centering the heading */
        .cbp-rfgrid li a div {
        position: absolute;
        left: 30px;
        top: 30px;
        right: 30px;
        dbottom: 30px;
        background: white; /*** THIS IS THE BACKGROUND COLOR FOR ARTIST NAME ****/
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: flex;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        align-items: center;
        text-align: center;
        opacity: 0;
      }

      .cbp-rfgrid li a:hover div {
        opacity: 1;
      }

      .cbp-rfgrid li a div h3 {
        width: 100%;
        color: #fff;
        text-transform: uppercase;
        font-size: 1.2em;
        letter-spacing: 2px;
        padding: 0 10px;
      }

      @media screen and (max-width: 1190px) {
        .cbp-rfgrid li {
        width: 20%; /* Fallback */
        width: -webkit-calc(100% / 5);
        width: calc(100% / 5);
        }
      }

      @media screen and (max-width: 945px) {
        .cbp-rfgrid li {
        width: 25%; /* Fallback */
        width: -webkit-calc(100% / 4);
        width: calc(100% / 4);
        }
      }

      @media screen and (max-width: 660px) {
        .cbp-rfgrid li {
        width: 33.3333333%; /* Fallback */
        width: -webkit-calc(100% / 3);
        width: calc(100% / 3);
        }
      }

      @media screen and (max-width: 660px) {
        .cbp-rfgrid li {
        width: 33.3333333%; /* Fallback */
        width: -webkit-calc(100% / 3);
        width: calc(100% / 3);
        }
      }

      @media screen and (max-width: 400px) {
        .cbp-rfgrid li {
        width: 50%; /* Fallback */
        width: -webkit-calc(100% / 2);
        width: calc(100% / 2);
        }
      }

      @media screen and (max-width: 300px) {
        .cbp-rfgrid li {
        width: 100%;
        }
      }