@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;}


aside.icon p.content.organic {background-image:url("images/print/SVG/organic.svg");}
aside.icon p.content.crueltyfree {background-image:url("images/print/SVG/crueltyfree.svg");}
aside.icon p.content.recyclable {background-image:url("images/print/SVG/recycled.svg");}


.thumbnails .content.green1 {background-image:url("images/print/products/green/candle_green.jpg");}
.thumbnails .content.green2 {background-image:url("images/print/products/green/incense_green.jpg");}
.thumbnails .content.green3 {background-image:url("images/print/products/green/lotion_green.jpg");}
.thumbnails .content.green4 {background-image:url("images/print/products/green/serum_mint.jpg");}

.thumbnails .content.noir1 {background-image:url("images/print/products/noir/noir_cleanser.jpg");}
.thumbnails .content.noir2 {background-image:url("images/print/products/noir/noir_cologne.jpg");}
.thumbnails .content.noir3 {background-image:url("images/print/products/noir/noir_spray.jpg");}
.thumbnails .content.noir4 {background-image:url("images/print/products/noir/noir_stick.jpg");}

.thumbnails .content.candle1 {background-image:url("images/print/products/candle/candle_blue.jpg");}
.thumbnails .content.candle2 {background-image:url("images/print/products/candle/candle_green.jpg");}
.thumbnails .content.candle3 {background-image:url("images/print/products/candle/candle_orange.jpg");}
.thumbnails .content.candle4 {background-image:url("images/print/products/candle/candle_pink.jpg");}

.thumbnails .content.spray1 {background-image:url("images/print/products/spray/spray_cardamon.jpg");}
.thumbnails .content.spray2 {background-image:url("images/print/products/spray/spray_ginger tea.jpg");}
.thumbnails .content.spray3 {background-image:url("images/print/products/spray/spray_hibiscus.jpg");}
.thumbnails .content.spray4 {background-image:url("images/print/products/spray/spray_winter.jpg");}

.thumbnails .content.incense1 {background-image:url("images/print/products/incense/incense_blue.jpg");}
.thumbnails .content.incense2 {background-image:url("images/print/products/incense/incense_green.jpg");}
.thumbnails .content.incense3 {background-image:url("images/print/products/incense/incense_orange.jpg");}
.thumbnails .content.incense4 {background-image:url("images/print/products/incense/incense_pink.jpg");}

.thumbnails .content.serum1 {background-image:url("images/print/products/serum/serum_blue.jpg");}
.thumbnails .content.serum2 {background-image:url("images/print/products/serum/serum_mint.jpg");}
.thumbnails .content.serum3 {background-image:url("images/print/products/serum/serum_purple.jpg");}
.thumbnails .content.serum4 {background-image:url("images/print/products/serum/serum_yellow.jpg");}

.thumbnails .content.lotion1 {background-image:url("images/print/products/lotion/lotion_blue.jpg");}
.thumbnails .content.lotion2 {background-image:url("images/print/products/lotion/lotion_green.jpg");}
.thumbnails .content.lotion3 {background-image:url("images/print/products/lotion/lotion_pink.jpg");}
.thumbnails .content.lotion4 {background-image:url("images/print/products/lotion/lotion_purple.jpg");}



.color-wrap.dealpic{
background:no-repeat center center;background-image:url("images/print/splash_deal.jpg");}



.bottom-splash.candle section aside{
background-image:url("images/print/products/candle/BaseCandle.png")}

.bottom-splash.bottle section aside{
background-image:url("images/print/products/cleanser/bottle.png")}

.bottom-splash.candle{
background: url("images/print/splash_candle.jpg") no-repeat center center; background-size: cover;
}
.bottom-splash.bottle{
background: url("images/print/splash_bottle.jpg") no-repeat center center; background-size: cover;	
}
.bottom-splash.deal{
background: url("images/print/splash_deal.jpg") no-repeat center center; background-size: cover;
border-bottom: 3px solid #93D529;
}
.bottom-splash.leaves{
background: url("images/print/splash_green.jpg") no-repeat center center; background-size: cover;
border-bottom: 3px solid #93D529;
}
.bottom-splash.mtn{
background: url("images/print/splash_mtn.jpg") no-repeat center center; background-size: cover;
border-bottom: 3px solid #FF66B9;
}
.bottom-splash.ocean{
background: url("images/print/splash_ocean.jpg") no-repeat center center; background-size: cover;	
border-bottom: 3px solid #29D5C8;
}







body{
margin: 0 auto;
height:100%;
font-size: 15px;
font-family: 'Rubik', sans-serif;
font-weight: 300;
color: #000;
}
a{
text-decoration: none; color:inherit;
}
h1, h2, h3, h4, h5, p{
margin:0;
padding:0;	
}
h1{
font-size: 1.6em;
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:#fff;
}  
.drkgreen{
color:#fff;
}
.orange{
color:#fff;
}
.pink{
	color: #fff;
}
.blue{
color:#fff;
}

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

}
span.green{
color:#fff;
}

strong{
font-weight: 500;
}


nav{
	background-color: #000;
	height: 60px;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	flex-direction: column;
	font-weight: 300;
}

nav #navbar {
position: relative;
}

nav ul{
margin-left: 158px;
padding:0;}

a.logo, nav ul li{
display: inline;
margin-right:32px;	
color:#fff;
}

	a.logo{
	position:absolute;
	display: block;
	width:85px; height:31px;
	background: url("images/print/SVG/lotus2_gr.svg") no-repeat 0 0; background-size: contain;
	top:13px; left:32px;
	z-index:1;
	}
	a.logo span, .search span, .ham span {display:none;}

.search, .ham{
position:absolute;
z-index:1;
}	
.search{
display: block;
width:16px; height:16px;
background: url("images/print/SVG/search.svg") no-repeat 0 0; background-size: contain;
top:22px; right:20px;	
margin:0 16px;
}


/*Breadcrumnbs------------------------*/
nav.breadcrumbs{
	background-color: #000;
	height: 36px;
	position: relative;
	z-index: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

nav.breadcrumbs ul{
margin-left: 32px;
padding:0;
color: #fff;

}

nav.breadcrumbs ul li{
display: inline;
margin-right:2px;
margin-left:2px;
padding:0px 2px;
}


nav.breadcrumbs ul li.active-crumb {
	background-color: #000;
}


/*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: #000;
color:#fff;
text-transform: uppercase;
font-weight: 700;
font-size: .85em;
padding:4px 6px;
margin-bottom: 6px;
}

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 #000;
}


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

p.subsplash{
font-size: 1.2em;
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:none;
	}



/*FEATURED DEAL AND COLOR WRAPS---------------------------------------------*/
.color-wrap{
background-color: none;
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/print/wildeal.jpg");
}

	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:#000;
		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 30px;
}
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 .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:#fff;}
.bottom-splash.bottle section aside h1.prodname{color:#fff;}


.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;
}


/*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/print/products/candle/candle_focus.jpg")}

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

.focus.serum section aside{
background-image:url("images/print/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:#fff;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	min-height: 70px;
}
section.deal_blurb aside{
padding:10px 10px;
}

footer{
	display: none;
}

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}