/***************************
Add your custom styles below
****************************/
  

.alert-warning p {
  color: #cc0000;
  padding: 0 5em;
  font-weight: bold;
}

.menu > li > a { padding: 0 0.8em; }

.well {
  background: #eaeaea;
  padding: 25px;
}

nav {
  background: #fff;
}

.panel-cratejoy {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #eaeaea;
}

.my-account a.btn {
  color: #fff;
}

h3.panel-title {
 	font-size: 1.5em; 
}

.thumb {
	vertical-align: middle;
	padding:0;margin:0;
	max-width: 60px;
}

#in-the-box .col-sm-3 {
    padding-left: 8px;
    padding-right: 8px
}

.feature span {
	font-family: 'Montserrat', 'Helvetica', 'Arial', sans-serif !important;
    margin-left: 10px;
    font-size: 13px;
    vertical-align: middle;
    text-transform: uppercase;
}

@media screen and (max-width: 767px) {
  .feature {
    text-align: center;
  }
  #in-the-box .col-xs-6:nth-child(2n+3) { clear: left; }
}
  
.menu > li {
	font-size: 12px;
}

.nav-bar.nav--fixed {
	padding: 0 40px;
}

.navbar-center {
    position: absolute;
    top: 6px;
    text-align: center;
    width: 100%;
    height: 0;
    margin: 0 auto;
    z-index: -1;
}
.hero {
	background-position: 100% 0 !important;
}

.card .background-image-holder {
	background-position: 100% 40% !important;
}

.nav-bar .nav-module.right:not(.logo-module):not(.menu-module):not( :nth-last-child(2)) {
	border-left: none;
}

.galaxy-pattern {background: url('//d3a1v57rabk2hm.cloudfront.net/goddessprovisions/fresh-copy-0/images/galaxy-pattern.jpg?ts=1493928286&host=my.cratejoy.com') repeat;}

.heading p {
	font-size: 1.2em;
	line-height: 1.6em;
}

.partners-1 .slider img {
	max-height: inherit;
	opacity: 1.0;
}

.footer-4 {
	background: url('//d3a1v57rabk2hm.cloudfront.net/goddessprovisions/fresh-copy-0/images/galaxy-pattern.jpg?ts=1493928286&host=my.cratejoy.com') repeat;
}

.footer-4 .logo {
	max-height: 140px;
}

.footer-4 hr {
	border-color: #888;
}

.bg--primary {
	background: #9F8ABC;
}

.purple-btn {
	background: #6f2b9a;
}

.purple-btn .btn__text { color: #fff; }

.background-image-holder {
	/*background-position: 80% 100% !important;*/
}
.background-image-holder video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.box-slider {
	background: url('//d3a1v57rabk2hm.cloudfront.net/goddessprovisions/fresh-copy-0/images/pattern.jpg?ts=1493928284&host=my.cratejoy.com');
}

.galaxy-pattern {
	
}

.brand-partners {
	background: url('//d3a1v57rabk2hm.cloudfront.net/goddessprovisions/fresh-copy-0/images/footer-pattern.png?ts=1493928287&host=my.cratejoy.com');
}

.owl-theme .owl-controls .owl-dots .owl-dot span {
	background: red;
}

i span {
	font-family: 'Montserrat', 'Helvetica', 'Arial', sans-serif !important;
	margin-left: 20px;
	font-size: 14px;
	vertical-align: middle;
	text-transform: uppercase;
}

.card__body ul {
	list-style-type: circle;
}

.fb-page {margin-bottom:20px;}

.footer-4 .footer__navigation li {
	font-size: .8em;
}

span.copy, span.copy a { color: #999 !important; font-size: 90%; }

section, footer {
    padding-top: 4.5em;
    padding-bottom: 5.125em;
}

.loader:before {
	background-color: #794f7c;
}

.owl-theme .owl-controls .owl-dots .owl-dot span { background: #000; }
.owl-theme .owl-controls .owl-dots .owl-dot.active span { background: #d214a7; }

.notice {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
  font-weight: bold;
}

.highlight { background: #b9f2a7; padding: 4px; color: #333; }

.nav-mobile-toggle { text-align: right !important; opacity: 1 !important; }

.footer__lower {
    background: url('//d3a1v57rabk2hm.cloudfront.net/goddessprovisions/fresh-copy-0/images/galaxy-pattern.jpg?ts=1493928286&host=my.cratejoy.com') repeat;
}

section { padding-bottom: 3em; }
a.highlight-purple {
color: #6f2b9a !important; font-weight: bold !important;
}
.shop-item-detail .item__price:not(:last-child) { margin-bottom: 1em; }

.shop-item-detail .item__addtocart button {
    border-radius: 4px 4px 4px 4px;
    min-width: 100%;
}

.white-bg { background-color: #fff; }

span.ig-credit {
  bottom: 10px;
  right: 10px;
  position: absolute;
  background: #fff !important;
  color: #333!important;
  padding: 4px 8px 4px 8px;
  font-size: 12px;
}

.footer-4 .footer__navigation li a {
  color: #ffffff !important;
}

.footer-4 .footer__navigation li {
  color: #ffffff !important;
}

.btn--lg {
    padding-right: 2em;
    padding-left: 2em;
}

@media (max-width: 990px) {
  
  .menu > li > a {
  padding: 0;
  }
  
}

.heading h2 {
	font-family: 'Montserrat', 'Helvetica', 'Arial', sans-serif;
	font-weight: 600;
	font-size: 3em;
}

@media (min-width: 1200px) {
  
  .heading h2 {
		font-size: 3.7em !important;
    }
  
}
     
  
section.subscribe-header { padding-bottom: 0!important; }

.holday-sales-bg {
  background: #794f7c;
}

.holday-sales-bg a {
  color: #fff !important;
  font-weight: bold;
  text-decoration: underline !important;
}

/* For doing equal-height columns */
.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

/*
 * The solution recommended by Bootstrap
 * https://getbootstrap.com/docs/3.4/css/#grid-responsive-resets
 * didn't work so instead we clear-left the 3rd column in each row
 * when in xs or sm views.
 */
@media (max-width: 991px) {
  .boutique-listing .col-xs-6:nth-child(3) { clear: left; }
}
.boutique-listing .thumbnail {
  margin-bottom: 20px;
  background-color: transparent;
}
.boutique-listing .thumbnail img {
  margin-bottom: 10px;
}
.boutique-listing .caption {
  padding: 10px 0;
}
.boutique-listing .caption h3 {
  font-size: 15px;
}
.boutique-listing .caption h3 a {
  color: #767676;
}    
.boutique-listing .caption .lead {
  font-size: 14px;
}

.gallery-of-past-boxes h3 {
  color: #767676;
  font-size: 1.25em;
  margin-bottom: 8px;
}
@media all and (max-width: 767px) {
  .gallery-of-past-boxes h3 {
    font-size: 1em;
  }
}
.gallery-of-past-boxes a {
  text-decoration: underline;
}

/* Theme applies an opaque background to iframes, but we don't want that for the iframes
 * in the Stripe credit card fields */
.form-control.StripeElement iframe {
  background-color: transparent;
}

.job-posting ul,.job-posting ol {
  margin-left: 1.2em;
}
.job-posting ol {
  list-style-position: outside;
}
.subscribe .terms .purple-btn .btn__text {
  font-weight: bold;
}
.social-icons {
  text-align: center;
}

@media (min-width: 760px) {
  #CybotCookiebotDialog {
    margin-left: 40px !important;
    margin-right: 40px;
    width: calc(100% - 2*40px) !important;
    border-radius: 15px !important;
  }
}
#CybotCookiebotDialogPoweredbyLink {
  overflow: hidden;
}
img#CybotCookiebotDialogPoweredbyImage {
  margin-left: 48px;
}
#CybotCookiebotDialogPoweredbyLink {
  background-image: url("https://s3.amazonaws.com/cratejoy_vendor_images/goddessprovisions/fresh-copy-0/images/cookie_icon_v2.png");
  background-repeat: no-repeat;
  height: 52px !important;
}
#CybotCookiebotDialogBodyContentText a,
#CybotCookiebotDialogBodyContentText a:hover {
  color: #794f7c !important;
}
#CybotCookiebotDialogBodyButtonDecline {
  color: white !important;
  background-color: #9F8ABC !important;
  border-color: #9F8ABC !important;
}

iframe[title^='Help Scout Beacon'] {
  background-color:transparent;
}

.countdown-banner {
  background-color: #9f8abc;
  background-image: url('//d3a1v57rabk2hm.cloudfront.net/goddessprovisions/fresh-copy-0/images/bg-stars.svg?ts=1637012583&host=my.cratejoy.com');
  background-repeat: repeat;
  background-position: top;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 0.5em;
}
@media (min-width: 768px) {
  .countdown-banner .timer {
    text-align: right;
  }
  .countdown-banner .button {
    text-align: left;
  }
}
.countdown-banner .timer .timer-component {
  display: inline-block;
  color: white; /* #9f8abc */
  background-color: #6f2b9a;
  text-align: center;
  text-transform: uppercase;
  font-variant: small-caps;
  font-size: 12px;
  line-height: initial;
  border-radius: 3.75px;
  padding: 4px;
}
.countdown-banner .timer .timer-component .num {
  font-size: 20px;
  font-weight: 300;
}
.countdown-banner .message {
  font-family: Roboto, sans-serif;
  padding: 12px 0;
  font-size: 18px;
  color: white;
}
@media screen and (min-width: 768px) and (max-width: 991.99px) {
  .countdown-banner .message {
    font-size: 10px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199.99px) {
  .countdown-banner .message {
    font-size: 13px;
  }
}
@media screen and (min-width: 1200px){
  .countdown-banner .message {
    font-size: 16px;
  }
}
.countdown-banner .button a {
  display: inline-block;
  vertical-align: top;
  color: white; /* #9f8abc */
  font-family: Roboto, sans-serif;
  font-size: 20px;
  font-weight: bold;
  background-color: #6f2b9a;
  text-decoration: none;
  padding: 10px 20px;
}
#sign-up h4,
#box-highlights h3,
#what-goddesses-are-saying h3 {
  color: #6f2b9a;
}
#sign-up h4 {
  font-weight: 300;
}
#always-cruelty-free {
  color: #9F8ABC;
  font-weight: bold;
  font-size: larger;
}
#what-goddesses-are-saying .name {
  font-size: larger;
}
/*
 * The solution recommended by Bootstrap
 * https://getbootstrap.com/docs/3.4/css/#grid-responsive-resets
 * didn't work so instead we clear-left the 3rd column in each row
 * when in xs or sm views.
 */
@media (max-width: 991px) {
  #what-goddesses-are-saying .col-xs-6:nth-child(3) { clear: left; }
}
a.purple-btn {
  text-decoration: none;
}
.promo-conditions {
  font-style: italic;
}