/* 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. */
img {max-width:100%}

/* Header */

header {
  text-align: center;
  background: #29abd2;
  font:600 14px/1 'Raleway', sans-serif;
  text-transform: uppercase;
}
header .level1 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 ;
  position: relative;
  height: 72px;
}
header .ht-logo {
  position: absolute;
  left: calc(50% - 24px);
  top: 12px;
}
header .ht-logo img {
  transition: all .2s ease-in-out;
}
@media screen and (min-width:801px) {
 header .ht-logo:hover img {
    transform: scale(1.3)
 }
}
header .level1 nav {
  float: left;
}
header .level1 nav a {
  color: #fff;
  margin: 0;
  padding: 29px 18px;
  display: inline-block;
}
header .level1 nav a:hover {
  background: rgba(255,255,255,0.9);
  color: #29abd2;
}
header .level2 {
  background: rgba(255,255,255,0.9);
}
header .level2 a {
  color: #5d6267;
  margin: 0 12px;
  font-size: 16px;
  padding: 18px 12px;
  display: inline-block;
}
header .level2 a:hover {
  color: #29abd2;
}

.row {margin: 0!important;}

/* Colors */

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

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

body, #main .faq h2, .label label, #product .better-select-selected-label {
  color: #5d6267;                   /*: Text :*/
}

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

a:hover, #sidebar ul li.current a, body.faq #buttons .faqs, body.contact #buttons .contact_us {
  color: #29abd2;                   /*: 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: #29d2a5;        /*: Buttons :*/
}
#main .button:hover, #main button:hover {background-color:#29abd2}

#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: #ccc;               /*: Lines :*/
}

.product .flag.status, #product .status {
  background-color: #ccc;           /*: Product Status :*/
}
.product .flag.status.on_sale {background:#29abd2;}
.product .flag {font:600 0.7125rem 'Raleway', sans-serif!important;}
#content, #header, #footer{
  background-color: #FFFFFF;        /*: Content Background :*/
}

#header .links a, #content p, #footer #footer_info p {font-family: 'Alegreya', serif; font-weight: 400;}

/* Layout */
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6, #product_name, #price, #footer .footer-large, #cart_add_form input.add_to_cart_button{ font-family: 'Raleway', sans-serif; font-weight: 600;}
#cart_add_form input.add_to_cart_button {text-transform:uppercase; font-size:1.4rem;}
#product_info #product_description {font-size:16px;}

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


body{
  background-color: #ffffff;          /*: Body Background :*/
  font-family: 'Alegreya', serif; /*: Body Font :*/
  background-attachment: scroll;      /*: Background Attachment :*/
  background-repeat: repeat;          /*: Background Image Repeat :*/
  background-position: top center;    /*: Background Image Position :*/
}
li.product .product_name {font-weight:400;}
#product_info #product_name, #main .home-h3 {font-family: 'Alegreya', serif; font-style:italic; font-weight: 700; font-size:42px;}

li.collection .collection_name {text-align:center; font-size:2.4em!important; padding:0.5em 0 0.75em; color:#5d6267!important; margin:-18px 0 0; line-height:1;}
li.collection:hover .collection_name {background:none; color: #29abd2!important;}

#content li.product .product_name, #browse-more .related-products .product_name {font:600 18px 'Raleway', sans-serif; text-align:center;}
#browse-more .related-products .product_name {font-size:14px; text-transform:none;}
li.product .product_price, #browse-more .related-products .product_price {font-size:16px;  text-align:center; display:block;}
#product_description a {color: #333;}
#product_description a:hover {text-decoration:underline}

.commission_button {font:400 14px  'Raleway', sans-serif!important; text-transform:uppercase; display:block; margin: 30px 0;}


#promotion {position:relative; font-size:1.25rem;z-index:999;}
/* homepage banners*/
.hp-hero {margin:12px 0 60px; width:100%; display:block; cursor:pointer;}
.hp-hero img {max-width:100%;}

.home-h3 {text-align:center; font-size: 3em;}

.flexslider {width: 100%; margin: 0; position:relative; padding: 0 0 30px;}
ul.slides {padding:0; margin:0;}
.flexslider .slides > li {display: none;} 
.flexslider .slides > li:first-child {display: block;}
.flexslider .slides img {max-width: 100%; display: block;}


.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; position: absolute; top: 50%; top:calc(50% - 26px); cursor: pointer; color:rgba(0,0,0,0.2); opacity:0;}
.flexslider:hover .flex-direction-nav li a {opacity:1;}
.flex-direction-nav li a:hover {color:rgba(0,0,0,0.7);}
.flex-direction-nav li .next:before, .flex-direction-nav li .prev:before {font-size:36px; color:inherit;}
.flex-direction-nav li .next {background-position: -52px 0; right: -22px;}
.flex-direction-nav li .next:before {content:'\3009';}
.flex-direction-nav li .prev {left: -12px;}
.flex-direction-nav li .prev:before {content:'\3008';}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

.flex-control-nav {width: 100%; position: absolute; bottom: -18px; text-align: center; padding:0;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 9px; height: 9px; display: block; background:#ddd; cursor: pointer; text-indent: -9999px; border-radius:50%;}
.flex-control-nav li a.active {background:#999;}
.flex-control-nav li a:hover {background:#444;}

#stock li div.stock-sold {opacity:1; background:#d1d1d6; z-index:1; height:4px; }
#stock li div.stock-remaining {background:#29abd2; z-index:2; height:4px; max-width:99.5%!important;}
#stock li p.sout-note {text-transform:none; font-weight:400;}

ul.collections {margin:0;}
li.collection {margin:0 3.3% 42px 0; width: 22.5%;}
li.collection:nth-child(4n+4) {margin-right:0}
#main .col3 {margin: 0 2% 42px 0; width: 32%;}
#main .col3:nth-child(3n+3) {margin-right:0;}

h3.htb-h3 {margin-bottom:-8px;}

#footer {padding: 30px 0; margin: 30px 0 0!important;}
#mc_embed_signup form {padding:18px 0 0!important; border-top:1px solid;}
#mc_embed_signup .button {background-color:#29abd2!important; border-radius:0!important;}
#mc_embed_signup .button:hover {background-color:#29d2a5!important;}

#contact-page #main {margin: 0 auto 60px!important; float:none; max-width:500px;}
#contact-page h1 {text-align:center;}

.free-ship {font:600 normal 14px/1 'Raleway', sans-serif; text-transform: uppercase; border-top: 1px dotted #ddd; display:block; padding-top: 15px; color:#888;}
.free-ship small {display:block; font-weight:300; text-transform:none; margin-top:3px;}

#product-photo {position:relative;}
#product .status {position: absolute; left: -12px; top: 12px; line-height: 1; padding: 8px 24px; color: #fff; text-transform: uppercase; font-size: 12px; font-weight: bold; margin-bottom: 5px; background: #5d6267;}

#product-navigation, #browse-more {width:100%; margin-left:0; margin-top: 8px}
#product-photo, #product_info {margin-top: 60px;}
#browse-more {margin-top: 90px;}
#browse-more h3 {font:700 italic 24px 'Alegreya', serif; margin-top:24px; display:block; text-align:center;}
#browse-more ul {display:none;}

#main #title.collection-title {font:700 italic 60px 'Alegreya', serif; text-align:center; margin: 30px 0 12px}
#collection_description {text-align:center; margin: 12px 0 48px;}

/* !--- rwd larger than small --- */
@media screen and (min-width:568px) {
#content {padding:0;}
#content > .row > #sidebar {display:none;}
#content > .row > #main {width:100%; margin-left:0;}
#product {margin-left:0;}
#product-photo {width: 65%; margin-left:0;}
#product_info {width:30%; margin-left:5%; margin-bottom:30px;}
#main_photo > a {width:100%;}
#thumbs {margin-left:0; padding: 0;}
#thumbs li {width:15%; float: none; display: inline-block;} 
#thumbs li:first-child {margin-left: 0;}
#browse-more .related-products {width:20%}
#footer {background: #e8f0f3; overflow: hidden; border: 0;}
#footer section{max-width:1400px; margin: 0 auto; padding: 0 2%;}
}


/* !--- rwd small --- */
@media screen and (max-width:568px) {
  #wrapper {padding-top: 0!important;}
  #content {padding:0 3% 30px}
li.collection {width:94%; margin-bottom:18px}
li.collection .img-wrapper {float: left; width: 20%;}
li.collection .collection_name {font-size: 1.6em!important;    text-align: left;    padding-left: 12px;}
#header #store_info .store_name {font-size:24px; padding:12px 0;}
#promotion { padding:8px 3%; display: block!important; height:auto; font-size:0.75rem; line-height:1.3;}
#product-navigation {display:none;}
#product, #product-photo, #product_info {width:100%!important; margin:0 0 12px;}
.hp-hero {margin-bottom:30px;}
.home-h3 {font-size: 1.8em;}
.flex-direction-nav li a {display:none!important;}
#footer ul {display:block!important}
#footer #footer_info li {margin:0; width:100%;}
.footer-large, #footer #footer_info p {display:none;}
.mailchimps {width:100%; display:block; padding: 0 3%;border-bottom:1px solid;}
#mc_embed_signup input.email {width:100%!important; margin:0 0 12px!important;}
#footer #footer_info li+li {width:44%!important; margin:0 3%!important;}
}

/* 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-1225959;    /*: Featured Collection :*/
  storenvy-use-theme-background: if-false;         /*: Use Theme Background :*/
  storenvy-show-store-name: if-true;               /*: Show Store Name :*/
  storenvy-show-logo: if-true;                     /*: Show Logo :*/
  storenvy-show-stock-bars: if-false;              /*: Show Stock Bars :*/
}

.inline-promo {border:1px solid #ccc; padding:12px; text-align:center; font-size:0.875rem;}
.inline-promo strong {display:block; font-size: 1.4rem;}

#container {max-width:none; padding: 0;}

#content {max-width:1400px; margin:0 auto; padding: 0 2%;}

/* !--- RWD full --- */
@media screen and (min-width:801px) {
.photo img, .album-art img, .videoWrapper {max-width:800px}
}

/* !--- RWD sm+med --- */
@media screen and (max-width:801px) {
header .level1 {height: 42px}
header .level1 nav a, header .level2 a {padding: 14px 12px; font-size: 14px;}
header .level2 a {margin: 0 3px;}
header .ht-logo {top:8px; left: calc(50% - 15px);}
.ht-logo img {width:30px; vertical-align:middle; position:relative; top: -2px;}
#header .links li a {padding: 16px 8px; font-size:0.75em;}
header a.tumblr, a#drawer_button {display:none!important;}
#header #store_info .store_name {padding: 12px 3%; font-size:2em;}
#header {margin-bottom:0;}
.blog-description {font-size:10px; margin:0; line-height:1;}
.post {margin-bottom:0;}
.narrow {padding: 0 3%;}
.caption p {font-size:0.875em; line-height:1.4;}
.date, .tags, .notes-count {font-size:0.75em;}
}

@media only screen and (max-width: 600px){
.mc-modal {top: 80px!important;}
.mc-closeModal {padding-left:100px;}
}

/* !--- RWD sm --- */
@media screen and (max-width:599px) { 
  header .level1 nav a {font-size: 12px; padding: 16px 8px 13px;}
  header a.insta, header a.gcards, header a.originals, header a.apparel {display:none!important;}
body #se_iframe_wrapper iframe {max-width:150px!important}
.hp-hero {margin-bottom:0;}
 #main .home-h3 {margin:12px 0; font-size:2em;}
#product_info #product_name {font-size:2em; margin:0;}
#product-photo, #thumbs {margin:0;}
#main .col3 {width:49%; margin-bottom:12px;}
#main .col3:nth-child(3n+3) {margin-right:2%;} 
#main .col3:nth-child(2n+2) {margin-right:0;} 
#main #title.collection-title {font-size: 30px; margin: 8px 0;}
#collection_description {margin: 6px 0 18px;}
}