@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap');

.animate__animated.animate__fadeIn {--animate-duration: 3s;}

body{
margin: 0 auto;
height:100%;
font-size: 15px;
font-family: 'Rubik', sans-serif;
font-weight: 300;
color: #111111;
}
a{
text-decoration: none; color:inherit;
}
h1, h2, h3, h4, h5, p{
margin:0;
padding:0;	
}
h1{
font-size: 2.8em;
font-weight: 400;
line-height: 1.2em;
margin:.4em 0;
}
header h1 span.green{
font-family: 'Yellowtail', cursive;font-size: 1.3em;
}
h2{
font-size: 1.2em;
font-weight: 500;
}
p{
line-height: 1.4em;
margin:.5em 0;	
}
.main{
margin:0 auto;
}
section.splashdeal, section.products, section.educate, section.deal_blurb aside{ /* ALL SECTION WIDTHS 840px*/
width:840px;
margin: 0 auto;
}
ul, li {
list-style: none;
text-decoration: none;
}
a, li, h3, .thumbnails .content {
cursor: pointer;
}
span.break{
display: none;
}
.underbar::after{
content:'';
border-bottom: 1px solid;
margin: 14px 0 14px 0;
width:72px;
display: block;
}

.green{
color:#93D529;
}  
.drkgreen{
color:#88A533;
}
.orange{
color:#E08E22;
}
.pink{
	color: #FF66B9;
}
.blue{
color:#29D5C8;
}

.overbar::before{
content:'';
border-bottom: 1px solid;
margin: 0px auto 24px;
width:100%;
display: block;

}
span.green{
color:#93D529;
}

strong{
font-weight: 500;
}

/*B U T T O N S---------------------------------------------*/
.button{
margin:10px 0;
display: block;
}

btn.btn, btn.btn {
cursor: pointer;
align-self: flex-start; /*prevents growing full-width due to flexbox*/
transition: .2s;
}

btn.btn.drk{
background-color: #323231;
color:#93D529;
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
padding:4px 6px;
margin-bottom: 6px;

	}
	btn.btn.drk:hover{
	color:#fff;
	}

btn.btn.light{
	background-color: #fff;
	color: #111111;
	text-transform: inherit;
	font-size: .85em;
	padding: 6px 10px;
	margin: 0 4px 0 0;
	border: solid 1px #93D529;
	}
	btn.btn.light:hover{
	background-color: #D1EB79;
	}


/*H E A D E R---------------------------------------------*/
header{
height:420px;
padding: 0 20px;
text-align: center;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
background: url("images/splash_1371.jpg") no-repeat center center; background-size: cover;
}

p.subsplash{
font-size: 1.4em;
margin:0 0;	
}
header aside.icon{
text-align: center;
margin-top: 30px;
font-weight: 700;
font-size: .85em;
text-transform: uppercase;
letter-spacing: .4px;
}
	aside.icon .content{
	display:inline-block;
	padding-top: 46px;
	margin:0 23px 0;
	background:no-repeat center top;
	background-size: 36px 36px;
	}



/*FEATURED DEAL AND COLOR WRAPS---------------------------------------------*/
.color-wrap{
background-color: #F2ECE1;
padding: 20px 10px;
margin: 0 auto 0;
}

.color-wrap.reduce{
margin: 20px auto 0;
}


section.splashdeal aside{
min-height: 187px;
padding: 0 0 0 180px;
background:no-repeat left center;
background-size: 160px auto;
display: flex;
justify-content: center;
flex-direction:column;
background-image:url("images/wilddeal.gif");
}

	section.splashdeal aside h2{
	margin: .2em 0 .2em 0;
	}
		section.splashdeal aside h2 span.price{
		font-weight: 300;
		}	
		section.splashdeal aside h2 span.strike{
		color:#A82525;
		text-decoration: line-through;
		}	

	section.splashdeal aside p.byline{
	margin:0em 0;
	}
		section.splashdeal aside p.byline:after{ /*dividing style line*/
		content: '';
		border-bottom: solid 1px black;
		margin: 10px 0 4px 0;
		width:72px;
		display: block;
		}



/*P R O D U C T S---------------------------------------------*/
.prodwrap{
padding: 36px 10px 16px;
}
section.products{
margin:0 auto;
padding: 0 0 50px;
}
section.products h2, section.products p{
text-align: center;
}
.thumbnails{
margin: 24px auto 0;
text-align: center; /*align columns center*/
}
.thumbnails h3{
font-weight: 400;
text-align: center;
font-size: 1em;
transition: .24s;
}
/*
section.products h2:after, section.products h2:before{
content: ' – ';
font-weight: 300;
color:#000;
width:50px;
}
*/
.thumbnails aside{
width:22%;
display: inline-block;
text-align: left;  /*align text left*/
margin:0 10px 0;
}
.thumbnails .content{
width:auto;
padding-top: 200px;
background:no-repeat center top;
background-size: 100% auto;
transition: .24s;
text-align: left;  /*align text left*/
}
.thumbnails .content:hover, .thumbnails .content:focus{
opacity: .84;
}
.thumbnails .content:hover h3, .thumbnails .content:focus h3{
color:#484848;
}
.thumbnails .content .btn{
display: none;
}


/*BOTTOM SPLASH and IMPACT---------------------------------------------*/
.bottom-splash{
min-height:320px;
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
}

.bottom-splash section{
width:820px;
text-align: left;
color:#fff;
padding:10px;
}
.bottom-splash section aside{
padding: 60px 0 60px 160px;
background:no-repeat left center;
background-size: 130px auto;
}

.bottom-splash.deal section aside,
.bottom-splash.mtn section aside,
.bottom-splash.ocean section aside,
.bottom-splash.leaves section aside{
padding: 40px 0 40px 0;
background:no-repeat left center;
background-size: 180px auto;
}

.bottom-splash.candle section aside h1.prodname{color:#E08E22;}
.bottom-splash.bottle section aside h1.prodname{color:#93D529;}


.bottom-splash section aside h1.prodname{
font-size: 2.4em;
font-weight: 300;
margin: 0;
}
.bottom-splash section aside p.subsplash{
font-size: 1.15em;}

.bottom-splash section aside p{
font-size: 1em;}

/*IMPACT LINKS*/
.bottom-splash section aside p a {
border-bottom: solid 1px #fff;
}
.bottom-splash section aside p a:hover {
border-bottom: solid 1px #93D529;
color:#93D529;
}

/*WILD DEALS----------------------------------------------------*/
.dealpic{color:#fff;min-height: 200px;}


/*FOCUS PRODUCTS---------------------------------------------*/
.focus{
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #fff;
}
.focus section{
width:820px;
text-align: left;
padding:30px 10px 10px;
}
.focus section aside{
padding: 0 0 0 410px;
background:no-repeat left top;
background-size: 380px auto;
}
.focus.candle section aside{
background-image:url("images/products/candle/candle_focus.jpg")}

.focus.bottle section aside{
background-image:url("images/products/cleanser/bottle_focus.jpg")}

.focus.serum section aside{
background-image:url("images/products/serum/serum_focus.jpg")}

.focus section aside h1.prodname, section.educate aside h1.prodname{ /*FOCUS and EDUCATE*/
font-size:1.2em; 
margin: 16px 0 .2em; 
font-weight: 500;}

section.educate aside h1.prodname{ /*FOCUS and EDUCATE*/
margin: 0em 0em; 
}

.focus section aside p{
font-size: 1em;
}
.focus section aside p.focus-p, section.educate aside p.focus-p{ /*FOCUS and EDUCATE*/
font-weight:300;
}
.focus .button {
margin: 20px 0;
}




/*EDUCATIONAL AREA----BORROWING FROM FOCUS & SPLASH DEAL--------------*/
section.educate aside{
min-height: 187px;
padding: 0 0 0 0;
display: flex;
justify-content: center;
flex-direction:column;
}


/*WILD DEALS--------------*/
section.deal_blurb{
	background-color:#F2ECE1;;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	min-height: 70px;
}
section.deal_blurb aside{
padding:10px 10px;
}

/*M E D I A   Q U E R I E S---------------------------------------------*/

@media screen and (max-width:900px){
/*SPLASH DEAL----------------*/
section.splashdeal{
margin: 0 auto;
width:90%;
}
}

@media screen and (max-width:850px){ /*Footer and products break*/
/*SPLASH DEAL----------------*/
section.products{
width:540px;
}
/*PRODUCTS----------------*/
.thumbnails aside{
width:40%;
margin:10px 10px 10px;
}	
.thumbnails .content{
padding:228px 0 0 0 ;
}
	
/*BOTTOM SPLASH AND IMPACT PAGE-------------*/	
.bottom-splash{
background: url("images/splash_candle.jpg") no-repeat center center; background-size: cover;
min-height:auto;
}
.bottom-splash section{
width:90%;
}	
.bottom-splash section aside{
padding: 46px 0 46px 120px;
background-size: 100px auto;
}
.bottom-splash section aside h1.prodname{
font-size: 2.4em;
}
.bottom-splash section aside p.subsplash{
font-size: 1.2em;}
.bottom-splash section aside p{
font-size: 1em;}

/*FOCUS PRODUCTS-------------*/	
.focus section, section.educate,section.deal_blurb aside{
width:590px;
padding:20px 20px 20px;
}
.focus section aside{
padding: 0 0 0 236px;
background-size: 220px auto;
}
}

@media screen and (max-width:640px){ /*Focus product break*/
.color-wrap.reduce{
margin: 8px auto 0;
}
	
.focus section, section.educate,section.deal_blurb aside{
width:auto;
 padding: 0 0 10px;
}
.focus section aside{
padding:260px 10px 0;
background:no-repeat center top;
background-size: auto 240px;
}
	.focus.candle section aside{
	background-image:url("images/products/candle/candle_focus_mobile.jpg");
	}
	.focus.bottle section aside{
	background-image:url("images/products/cleanser/bottle_focus_mobile.jpg");
	}
	.focus.serum section aside{
	background-image:url("images/products/serum/serum_focus_mobile.jpg");
	}
	section.deal_blurb aside{
	padding:10px 10px;
	}
}

@media screen and (max-width:580px){
	
body{
font-size: 14px;
}
/*HEADER--------------------*/
span.break{
display: block;
}
/*SPLASH DEAL---------------*/
section.splashdeal{
width:auto;
}
section.splashdeal aside{
min-height: 187px;
padding: 0 20px 0 130px;
background:no-repeat left top;
background-size: 110px auto;
background-image:url("images/wilddeal.gif");
}
section.splashdeal aside h2 {
    margin: 0.3em 0 0.5em 0;
	font-size: 1.2em;
	}
	
	
/*PRODUCTS-----------------*/
section.products{
width:400px;
}	
.thumbnails aside{
width:44%;
margin: 6px 6px;		
}
.thumbnails .content{
padding:190px 0 0 0 ;
}
.prodwrap {
padding: 20px 10px;
}
}


@media screen and (max-width:515px){ /*Focus product break*/

section.products { 
padding: 0 0 20px;
}
}
	

@media screen and (max-width:414px){
/*HEADER------------------*/
body{
font-weight: 400;
}
header{
height:200px;
}
h1{
font-size: 2em;
margin:.4em 0;
}
h1 span.break{
display: block;
}
p {
margin: .1em 0 0.5em;}
p.subsplash{
font-size: 1.2em;
margin:0 0;	
}
header p.subsplash{
font-size: 1em;
margin:0 0;	
}
aside.icon, .bottom-splash section aside p.subsplash{
display: none;
}	
header aside.icon{
margin-top: 24px;
}
header aside.icon p.content{
font-size: .8em;
margin:0 12px 0;
}
btn.btn.drk{margin-bottom:2px;}
	
/*SPLASH DEAL-----------------------*/
.color-wrap {
padding: 14px 8px;
}
section.splashdeal aside{
min-height: 130px;
padding: 0 0 0 106px;
background:no-repeat left center;
background-size: 94px auto;
background-image: url("images/wilddeal.gif")
}
h2 {
font-size: 1.4em;
}
section.splashdeal aside p{
display: none;
}	
/*
section.splashdeal aside h2 span.price{
font-weight: 400;
}
*/
	
/*PRODUCTS-----------------------*/	
section.products {
width: 94%;
}
.thumbnails {
margin: 10px auto 0;
}	
.thumbnails aside{
width:auto;
display: block;
margin:4px 0;
}
.thumbnails .content{
padding: 10px 0 10px 110px;
background:no-repeat center left;
background-size: 100px auto;
}
section.products h3, section.products .thumbnails p{
text-align: left;
}
.prodwrap {
padding: 20px 0 6px 0;
}
section.products h2, section.products p{
text-align: left;
}
section.products h2:before{
content: '';
font-weight: 300;
}
.thumbnails .content .btn{
display: inline-block;
}

	
/*BOTTOM SPLASH-----------------------*/	
.bottom-splash section{
width: 92%;
}
.bottom-splash section aside{
padding: 20px 0 20px 100px;
background-size: 82px auto;
}
.bottom-splash section aside h1.prodname{
font-size: 1.4em; font-weight: 500;}
	
.focus section aside{
padding:214px 10px 0;
background-size: auto 200px;
}	
.focus section aside h1.prodname, section.educate aside h1.prodname {
    font-size: 1.4em;
	}
.focus section aside p.focus-p, section.educate aside p.focus-p{ /*FOCUS and EDUCATE*/
font-weight:400;
}
}
	
@media screen and (max-width:380px){
span.break{
display: none;
}
.focus section aside{
padding:214px 10px 0;
}	
}


@media screen and (max-width:330px){
	.btn.light.wishlist{display: none;}
	}