@import url("poppins/stylesheet.css");
@import url("Raleway/stylesheet.css");
@import url("poppins_light/stylesheet.css");
@import url("webfonts/poppins/stylesheet.css");
@import url("webfonts/poppins_light/stylesheet.css");
@import url("poppins_light/stylesheet.css");
@import url("poppins_light/stylesheet.css");






/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


body {
    font-size: 2rem;
    line-height: 1.5rem;
    color: #8c7036;
    text-align: center;
    overflow-x: hidden;
    font-family: poppins, poppins-light, Raleway, sans-serif;
}


ol, ul {
	list-style: none;
}


blockquote, q {
	quotes: none;
}


blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}


table {
	border-collapse: collapse;
	border-spacing: 0;
}



/*******End CSS Reset*******/



/*******General CSS Rules*******/

header {
	padding: 20px;
}


.site-header.fixed-header {
    background-color: #FFFFFF;
}


.site-header.fixed-header p {
    font-size: 1.7rem;
    margin-top: 10px;
}


.site-header.fixed-header h1 {
    width: 150px;
    margin: 0;
    padding: 20px;
    border: 3px solid #8C7036;
    background-color: hsla(276,89%,86%,0.55);
    text-align: center;
    text-transform: uppercase;
    font-size: 1.75rem;
}



/*******Navigation Rules*******/

#nav-header ul {
	display: flex;
	justify-content: space-between;
}

#nav-header ul li {
	flex: 1;
	padding: 10px;
}

#nav-header ul li a:hover {
	color: #6CD7EF;
}


.brand {
	padding: 40px 0;
    border-top: 2px solid #8C7036;
}


#container {
    background-color: #F2E9FE;
	margin: auto;
	padding: 40px 0;
}


ul li a, ol li a {
    font-size: 0.75rem;
    text-decoration: none;
    list-style-type: none;
    color: #8C7036;
    text-transform: uppercase;
    padding: 20px 0;
    text-align: center;
}



/*******Top Rules*******/

section {
	padding: 20px;
	background: #fff;
}

p { 
	line-height: 1.5em;
}

#top {
    border-top: 2px solid #8C7036;
}

#top article h2 {
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    font-size: 1.7rem;
}


#top article p {
    font-size: 1.2rem;
    font-family: Raleway;
    text-align: left;
}


#top img {
	display: block;
	width: 100%;
	margin-bottom: 20px;
}



/*******Middle Rules Homepage*******/

#middle {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 40px;
	border-top: 2px solid #8C7036;
}


#middle-pages {
    padding-top: 40px;
}


#middle a {
	text-decoration: none;
    list-style-type: none;
    font-size: 1.2rem;
    color: #8C7036;
}

#middle-pages a:hover {
	color: #6CD7EF;
}


/*********Face Internal Page********/

#facial {
	border-top: 2px solid #8C7036;
}

#face img {
    border: 1px inset hsla(40,44%,38%,1.00);
}


#body-love img {
    border: 1px outset #8C7036;
}


#look img {
    border: 1px inset hsla(40,44%,38%,1.00);
}


#cleanse h2 {
	padding-top: 20px;
	padding-bottom: 50px;
}

.facial-imgs {
    border: 1px inset #8C7036;
}

#facial-pages a {
	color: #8C7036;
	font-size: 1.2rem;
	text-decoration: none;
	list-style-type: none;
}

#facial-pages a:hover {
	color: #6CD7EF;
}

#wash img {
    border: 1px inset hsla(40,44%,38%,1.00);
}

#oil-cleanse img {
    border: 1px inset hsla(40,44%,38%,1.00);
}

#soaps img {
    border: 1px inset hsla(40,44%,38%,1.00);
}

#exfoliate img {
    border: 1px inset hsla(40,44%,38%,1.00);
}

#serums img {
    border: 1px inset hsla(40,44%,38%,1.00);
}

#masks img {
    border: 1px inset hsla(40,44%,38%,1.00);
}

#hydrate img {
    border: 1px inset hsla(40,44%,38%,1.00);
}

#night img {
    border: 1px inset hsla(40,44%,38%,1.00);
}




/********Body Internal Page********/

#body {
	border-top: 2px solid #8C7036;
}

#body-care h2 {
    padding-top: 20px;
    padding-bottom: 50px;
}


#bathe img {
    border: 1px inset #8C7036;
}


#moisturize img {
    border: 1px inset #8C7036;
}


#sculpt img {
    border: 1px inset #8C7036;
}


#body a {
	text-decoration: none;
    list-style-type: none;
    font-size: 1.2rem;
    color: #8C7036;
}


#body a:hover {
	color: #6CD7EF;
}



/********Love Your Look Internal Page********/

#cosmetics {
    border-top: 2px solid #8C7036;
    padding-bottom: 40px;
}

#cosmetics a {
	text-decoration: none;
    list-style-type: none;
    font-size: 1.2rem;
    color: #8C7036;
}

#cosmetics a:hover {
	color: #6CD7EF;
}

#color h2 {
    padding-top: 20px;
    padding-bottom: 40px;
}


#foundation img {
    border: 1px inset #8C7036;
}

#eye img {
    border: 1px inset #8C7036;
}

#lips img {
    border: 1px inset #8C7036;
}

#contour img {
    border: 1px inset #8C7036;
}



#tips {
    border-top: 2px solid #8C7036;
    padding-bottom: 40px;
}


#tips h2 {
    padding-top: 20px;
    padding-bottom: 40px;
}

#tips a {
	text-decoration: none;
    list-style-type: none;
    font-size: 1.2rem;
    color: #8C7036;
}


#tips a:hover {
	color: #6CD7EF;
}



/*******Bottom Section Rules*******/


#bottom {
    padding-top: 40px;
    border-top: 2px solid #8C7036;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 30px;
}


#bottom h2 {
    font-size: 1.7rem;
    padding-bottom: 40px;
    padding-top: 20px;
}


.features {
    padding-top: 30px;
    padding-right: 0;
    padding-left: 0;
}


.features h2 {
    font-size: 1.7rem;
}


#books img {
    margin-bottom: 30px;
    border: 1px outset hsla(40,44%,38%,1.00);
}


#face-bottom {
    border-top: 2px solid #8C7036;
    background-image: url(assets/rewards-background.jpg);
    font-weight: bold;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-size: cover;
}


#face-bottom h2 {
    padding-bottom: 40px;
    padding-top: 20px;
    font-weight: normal;
}

#perks img {
    width: 440px;
	padding-bottom: 40px;
}

.button {
	background-color: hsla(352,85%,90%,0.45);
	border: 1px outset #8C7036;
	color: #8C7036 ;
	font-weight: bold;
	padding: 10px 20px;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
}

.button:hover {
  background-color: #E1BBFB;
}



#extras {
    border-top: 2px solid #8C7036;
    padding-bottom: 40px;
}

#extras h2 {
	padding-bottom: 40px;
    padding-top: 20px;
}

#extras a {
	text-decoration: none;
    list-style-type: none;
    font-size: 1.2rem;
    color: #8C7036;
}

#extras a:hover {
	color: #6CD7EF;
}


#skin-tone img {
	border: 1px outset hsla(40,44%,38%,1.00);
}

#eye-look img {
	border: 1px outset hsla(40,44%,38%,1.00);
}

#lip-shape img {
	border: 1px outset hsla(40,44%,38%,1.00);
}

#tools img {
    border: 1px outset #8C7036;
}


#goodies img {
    border: 1px outset hsla(40,44%,38%,1.00);
}




/*******Footer Rules*******/

footer {
    background-color: hsla(276,89%,86%,0.55);
    border-top: 2px solid #8C7036;
    padding-top: 30px;
    padding-bottom: 30px;
}


footer section {
	font-size: 1.2rem;
    color: #8C7036;
    font-family: poppins-light;
}


#company {
    background-color: hsla(276,89%,86%,0.05);
    font-family: poppins, poppins-light, Raleway, sans-serif;
}

#company h2 {
    padding-bottom: 20px;
}


#company p {
    font-size: 1rem;
    color: #8C7036;
    font-family: Raleway;
}

#company a {
    text-decoration: none;
    list-style-type: none;
    color: hsla(40,44%,38%,1.00);
    font-size: 1rem;
    padding-top: 10px;
    font-family: Raleway;
}

#company a:hover {
	color: #6CD7EF;
}


#my-account {
    background-color: hsla(276,89%,86%,0.05);
    font-family: poppins, poppins-light, Raleway, sans-serif;
}


#my-account h2 {
    padding-bottom: 20px;

}

#my-account p {
    font-size: 1rem;
    font-family: poppins-light;
}


#my-account a {
    text-decoration: none;
    list-style-type: none;
    color: hsla(40,44%,38%,1.00);
    font-family: poppins-light;
}

#my-account a:hover  {
    text-decoration: none;
    list-style-type: none;
    color: #6CD7EF;
}


#join {
	background-color: hsla(276,89%,86%,0.05);
}


#join h2 {
    padding-bottom: 20px;
    font-family: poppins;
}


#join form #email {
    margin-bottom: 20px;
    color: #0A0A0A;
    font-family: Raleway;
    list-style-type: none;
    border: 1px solid #8C7036;
    background-color: #8C7036;
    background-clip: border-box;
    background-origin: border-box;
    background-image: -webkit-linear-gradient(269deg,rgba(255,255,255,1.00) 0%,rgba(255,210,157,0.75) 100%);
    background-image: -moz-linear-gradient(269deg,rgba(255,255,255,1.00) 0%,rgba(255,210,157,0.75) 100%);
    background-image: -o-linear-gradient(269deg,rgba(255,255,255,1.00) 0%,rgba(255,210,157,0.75) 100%);
    background-image: linear-gradient(181deg,rgba(255,255,255,1.00) 0%,rgba(255,210,157,0.75) 100%);
}


#join form input {
    color: #FFFFFF;
    border: 1px solid #8C7036;
    background-color: #8C7036;
    font-family: Raleway;
    width: 50%;
}


#social {
	background-color: hsla(276,89%,86%,0.05);
}


#social h2 {
    font-family: poppins;
	 padding-bottom: 40px;
}


#social #contact a {
	font-family: poppins;
    font-size: 1rem;
    text-decoration: none;
    list-style-type: none;
    color: #8C7036;
}


#social #contact a:hover  {
    font-size: 1rem;
    text-decoration: none;
    list-style-type: none;
    color: #6CD7EF;
}


input[type=text] {
	width: 40%;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
	background-color: #8C7036;
	color: #FFFFFF;
}

#icons {
    padding-bottom: 40px;
}


/*******Angled Divs*******/

#top1 {
    width: 120%;
    height: 200px;
    transform: rotate(-14deg);
    transform-origin: top right;
    background-color: hsla(74,60%,61%,0.50);
    position: absolute;
    top: 0px;
    right: 0;
    z-index: -1;
    color: hsla(85,32%,37%,0.05);
}


#top2 {
    width: 120%;
    height: 200px;
    transform: rotate(15deg);
    transform-origin: top left;
    background-color: hsla(276,89%,86%,0.55);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}






/*******Media Queries*******/

@media only screen and (min-width: 800px) {
	
	#middle-pages {
		display: flex;
		justify-content: space-around;
	}
	
	
	.features {
		display: flex;
		justify-content: space-around;
		margin: auto;
	}
	
	#books {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 35px;
		margin: auto;
	}
	
	
	#face-bottom {
		margin: auto;
		width: 100%;
		border-top: 2px solid #8C7036;
		background-image: url(assets/rewards-background.jpg);
		background-image: 100%;
		font-weight: bold;
		background-repeat: no-repeat;
		background-origin: border-box;
	}
	
	#perks img {
		margin: auto;
		width: 80%;
	}
	
	#body-pages {
		display: flex;
		justify-content: space-around;
		margin: auto;
	}
	
	#cosmetics-pages {
		display: flex;
		justify-content: space-around;
		margin: auto;
	}
	
	
	.tips-tools {
		display: flex;
		justify-content: space-around;
		margin: auto;
	}
	
	
	#goodies {
		display: flex;
		justify-content: space-around;
		margin: auto;
	}
	
		
	footer {
		display: flex;
		justify-content: space-around;
	}
	
	
	
}



@media only screen and (min-width: 900px){
	
	#my-account h2 {
    	padding-bottom: 20px;
}

	.features {
		display: flex;
		justify-content: space-between;
		margin: auto;
}

			
	#books {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 35px;
}
	
		
	#shop {
		padding-top: 15px;
		padding-bottom: 15px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

}
		
	#shop h2 {
	font-size: 2rem;
	padding-bottom: 30px;
	padding-top: 30px;
}
	
	
	
	
	
	
	/*********Face Page Media Queries********/
	
	#facial {
    padding-top: 40px;
    padding-bottom: 40px;
	}
	
	
	#facial-pages {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 20px;
	}

	
	#facial a {
		color: #8C7036;
		font-size: 1.2rem;
		text-decoration: none;
		list-style-type: none;
	}

		
	#cleanse h2 {
		padding-bottom: 40px;
		margin-bottom: 20px;
	}

	

	#facial a:hover {
		color: #6CD7EF;
	}


}