/* -----------------------
Base styles
------------------------*/

html { overflow-x:hidden; }

body
{
	overflow-x:hidden;
	margin: 0;
	padding: 0;
	color: #333333;
	background-color: #fff;
	font: 1em/1.2 Raleway, Verdana, Arial, Helvetica, sans-serif;
	font-weight: 500;
	-webkit-font-feature-settings: "lnum";
	-moz-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
}

h1,h2,h3,h4,h5,h6
{
	margin: 0 0 .5em;
	font-weight: 500;
	line-height: 1.1;
}

h1 { font-family: Arima Madurai, Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 3em; font-weight: 700; } /* 36px */
h2 { font-size: 1.75em; padding-top: 0.5em; font-weight: 700; } /* 28px */
h3 { font-size: 1.375em; font-weight: 700; } /* 22px */
h4 { font-size: 1.125em; } /* 18px */
h5 { font-size: 1em; } /* 16px */
h6 { font-size: .875em; } /* 14px */

h3.booklist { font-size: 2em; font-weight: bold; padding-top: .1em; padding-bottom: .5em; }

/* img { aspect-ratio: attr(width) / attr(height);} */

p
{
	/* margin: 0 0 1.5em; */
	margin: 0 0 1em;
	line-height: 1.5;
}

blockquote
{
	padding: 1em 1em;
	margin: 0 0 2em;
	/* border-left: 5px solid #eee; */
}

hr
{
	height: 0;
	margin-top: 1em;
	margin-bottom: 2em;
	border: 0;
	border-top: 1px solid #ddd;
}

table
{
	background-color: transparent;
	border-spacing: 0;
	border-collapse: collapse;
	border-top: 1px solid #ddd;
}

th, td
{
	padding: .5em 1em;
	vertical-align: top;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

li {
    margin-bottom: 0.5em;
}

.standard { color: #333333; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 120%; line-height: 160%; -webkit-font-feature-settings: "lnum"; }

.tiny { color: #333333; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 80%; font-weight: normal }

.pins{ color: #333333; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 100%; line-height: 160%; padding-top: 1.5em; }

.aromatherapy-book-disclosure { color: #333333; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 80%; line-height: 100%; }

.book-images { border: 1px solid #000000; float: left; margin-right: 1em; margin-bottom: 1.5em; margin-top: 0.5em; }

.book-list-paragraph { color: #333333; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 120%; line-height: 160%; margin-bottom: 1.5em; overflow: hidden; }

.breadcrumbs{ 
color: #000000; 
font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; 
font-size: 100%; 
font-weight: 500; 
/* background-color: #f0ede8; */
/* background-color: #DBE6E0; */
background-color: #f7f7f7;
background: linear-gradient(#fefefe, #fafafa);
padding: .1em .5em .1em .5em; 
border: 1px dotted #e7e4df; 
border-radius: 12px;
-webkit-font-feature-settings: "lnum";
}

.tinyarticles { color: #333333; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 120%; font-weight: normal; line-height:180%; }

.aromatherapy-rotation
{ text-align: left; background-color: #670268; color: #FFFFFF; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; line-height: 130%; border: solid; border-width: 1px; border-color: #996699; padding: 0.5em; margin: .25em; margin-top: 0.5em; }

.aromatherapy-rotation-caption
{ color: #b995b9; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; }

.aromatherapy-featured-rotation-caption
{ font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 110%; }

aromatherapy-rotation-link
{ color: #FFFFFF; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 13pt; line-height: 150% }
a.aromatherapy-rotation-link
{ color: #FFFFFF; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 13pt; line-height: 150% }
a.aromatherapy-rotation-link:link
{ color: #FFFFFF; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 13pt; line-height: 150% }
a.aromatherapy-rotation-link:visited
{ color: #FFFFFF; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 13pt; line-height: 150% }
a.aromatherapy-rotation-link:hover
{ color: #b995b9; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 13pt; line-height: 150% }


a.featuredrotation:link { color: #72922c; text-decoration: none; font-weight: bold; font-size: 140%; }
a.featuredrotation:visited { color: #6c65ce; }
a.featuredrotation:focus { color: #333333; }
a.featuredrotation:hover { text-decoration: underline; }
a.featuredrotation:active { color: #333333; }





/*
a:link { color: #3676cb; text-decoration: none; font-weight: 500; }
a:visited { color: #7737cf; }
a:focus { color: #84a048; }
a:hover { text-decoration: underline; }
a:active { color: #84a048; }
*/

/*
a:link { color: #678c18; text-decoration: none; font-weight: normal; }
a:visited { color: #6c65ce; }
a:focus { color: #333333; }
a:hover { text-decoration: underline; }
a:active { color: #333333; }
*/

/*
a:link { color: #678c18; text-decoration: underline; font-weight: normal; }
a:visited { color: #678c18; }
a:focus { color: #2c67b5; }
a:hover { color: #2c67b5; text-decoration: underline; }
a:active { color: #2c67b5; }
*/

/*
a:link { color: #1d781d; text-decoration: underline; font-weight: normal; }
a:visited { color: #678c18; }
a:focus { color: #2c67b5; }
a:hover { color: #2c67b5; text-decoration: underline; }
a:active { color: #2c67b5; }
*/


a:link { color: #008600; text-decoration: underline; }
a:visited { color: #902bb5; }
a:focus { color: #2c67b5; }
a:hover { color: #2c67b5; text-decoration: underline; }
a:active { color: #2c67b5; }



.searchlink { color: #FFFFFF; font-size: 100%; font-weight: normal }
a.searchlink:link { color: #FFFFFF; font-size: 100%; font-weight: normal }
a.searchlink:visited { color: #FFFFFF; font-size: 100%; font-weight: normal }
a.searchlink:hover  { color:#b995b9 }


.bookcontainer {right: 0; text-align: left;}
.bookcontainer .left, .bookcontainer .center, .bookcontainer .right { display: inline-block; }
.bookcontainer .left { float: left; vertical-align: top; width:80px;}
.bookcontainer .center { vertical-align:top; width:10px;}
.bookcontainer .right { vertical-align:top; width:470px; }
.bookclear { clear: both; }



.listingcontainer { border-bottom: 2px dotted #aaaaaa; line-height: normal; padding-bottom: 1em; }

.h2listing { color: #000000; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif;  font-size: 190%; font-weight: bold; padding-top: 1em; margin-bottom: 0em;  padding-bottom: .5em; line-height: 1.2em; }

.listinglink { font-weight: bold; padding-bottom: .5em; }

.listingdescription { color: #000000; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 130%; line-height: 125%; font-weight: 500; }

.listingcontactinfo { color: #000000; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 100%; line-height: 160%; }

.listingcategories { color: #000000; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 80%; font-weight: normal; }

.paragraphcurvedborder { border: 2px dotted #aaaaaa; border-radius: 20px 0px; line-height: normal; padding: 25px; }

.primarycontentlinksul { color: #000000; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 140%; line-height: 120%; padding-bottom: 1.5em; }

.section-divider { border-top: 2px dotted #aaaaaa; }



.tinybook { color: #333333; font-family: Raleway, Verdana, Arial, Helvetica, sans-serif; font-size: 55%; font-weight: normal }

.grid-container-book-main {
  display: inline-grid;
  grid-template-columns: auto auto;
 /* background-color: #ffff; */
  padding: 2px;
  /* justify-items: center; */
  
}

.grid-item-book-main {
 /*  background-color: #f7f7f7; */
  border: 2px solid #ffffff;
  padding: 5px;
  font-size: 14px;
  text-align: left;
}

.grid-container-book-review {
  display: inline-grid;
  grid-template-columns: auto auto;
  background-color: #f7f7f7;
  padding: 0px;
  /* justify-items: center; */
  
}

.grid-item-book-review {
  background-color: #f7f7f7;
  border: 0px solid #f7f7f7;
  padding: 10px;
  font-size: 14px;
  text-align: left;
}




.shrink img {
transition: 1s ease;
}

.shrink img:hover{
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
transition: 1s ease;
}


.grow img {
transition: 1s ease;
}

.grow img:hover{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: 1s ease;
}


/* -----------------------
Layout styles
------------------------*/

.container
{
	max-width: 70em;
	margin: 0 auto;
}




.navcontainer
{
	max-width: 70em;
	margin: 0 auto;
	padding-left: .5em; 
	padding-right: .5em;
}





.header
{
	color: #fff;
	/* background: #670268; */
	background: linear-gradient(#b477b5, #490049);
	padding: 0.5em 1em;
}

.header-heading { margin: 0; }

.nav-bar
{
	background: #000;
	padding: 0;
}

.content
{
	overflow: hidden;
	padding: 1em 1.5em;
	background-color: #fff;
	margin-right: -30px;
}

.contentnoaside
{
	overflow: hidden;
	padding: 1em 1.5em;
	background-color: #fff;

}

.main, .aside
{
	margin-bottom: 1em;
}

.main
{
	padding-right: 1em;

}


.footer
{
	color: #fff;
	background: #7c007d;
	padding: 1em 1.25em;
}

.facebook-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.facebook-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* -----------------------
Nav
------------------------*/

.nav
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav li
{
	display: inline;
	margin: 0;
}

.nav a
{
	display: block;
	padding: .7em 1.25em;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid gray;
}

.nav a:link { color: white; }
.nav a:visited { color: white; }

.nav a:focus
{
	color: black;
	background-color: white;
}

.nav a:hover
{
	color: white;
	background-color: green;
}

.nav a:active
{
	color: white;
	background-color: red;
}

/* -----------------------
Single styles
------------------------*/

.img-responsive { max-width: 100%; height: auto; aspect-ratio: attr(width) / attr(height); }

.img-responsive-share { max-width: 100%; padding: .25em; height: auto; aspect-ratio: attr(width) / attr(height); }

/* height: auto; aspect-ratio: attr(width) / attr(height); */




.share-image-right-profiles {

margin-top: 1em; 
float: right; 
margin-left: 1em; 
max-width: 45%;

}

.share-image-left-profiles {

margin-top: 1em; 
float: left; 
margin-left: 1em; 
max-width: 45%;

}

.share-image-right {

margin-top: 0.5em; 
float: right; 
margin-left: 1em; 
max-width: 45%;

}

.share-image-left {

margin-top: 0.5em; 
float: left; 
margin-left: 1em; 
max-width: 45%;

}




.searchbtn
{
	color: #fff !important;
	background-color: #99569a;
	border-color: #222;
	display: inline-block;
	padding: .25em .5em;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: .2em;
	text-decoration: none;
	-webkit-appearance: none;
}

.searchbtn:hover
{
	color: #fff !important;
	background-color: #884d89;
	-webkit-appearance: none;
}


.searchbtnlarger
{
	color: #fff !important;
	background-color: #99569a;
	border-color: #222;
	display: inline-block;
	padding: .25em .5em;
	margin-bottom: 0;
	font-size: 1.5em;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: .2em;
	text-decoration: none;
	-webkit-appearance: none;
}

.searchbtnlarger:hover
{
	color: #fff !important;
	background-color: #884d89;
	-webkit-appearance: none;
}




/*
.btn
{
	color: #fff !important;
	background-color: royalblue;
	border-color: #222;
	display: inline-block;
	padding: .5em 1em;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: .2em;
	text-decoration: none;
}

.btn:hover
{
	color: #fff !important;
	background-color: green;
}

*/

.btn:focus
{
	color: #fff !important;
	background-color: black;
}

.btn:active
{
	color: #fff !important;
	background-color: red;
}

.table
{
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
}

.list-unstyled
{
	padding-left: 0;
	list-style: none;
}

.list-inline
{
	padding-left: 0;
	margin-left: -5px;
	list-style: none;
}

.list-inline > li
{
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
}

/* -----------------------
Wide styles
------------------------*/

/*@media (min-width: 55em)*/
/*@media (min-width: 49em)*/
/*@media (min-width: 48em)*/
@media (min-width: 35em)

{
	.header { padding: 1.5em 3em; }
	.nav-bar { padding: 1em 3em; }
	.content { padding: 1em .5em .5em 1em; }

	.main
	{
		float: left;
		width: 58%;
		margin-right: 1%;
		padding-left: 2%;
		margin-bottom: 1em;
	}

	.main-no-aside
	{

		width: 65%;
		margin: auto;
	}


	.aside
	{
		float: left;
		width: 32%;
		margin-bottom: 1em;
		margin-top: 0px;
		padding-top: 0px;
		padding: 0px;
		margin: 0px;

		background-color: #ffffff;
		/* background-image: url("https://www.aromaweb.com/images/backgroundpattern2.jpg"); */
	}

	.footer { padding: 2em 3em; }
	
	.nav li
	{
		display: inline;
		margin: 0 1em 0 0;
	}
	
	.nav a
	{
		display: inline;
		padding: 0;
		border-bottom: 0;
	}
}



/* -------------------------------------------------------------------------- */
/* This section was originally embedded in the initial prototype default file */
/* -------------------------------------------------------------------------- */



body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #490049;
  line-height: 180%; 
  font-size: 110%; 
  font-family: Fira Sans Condensed, Raleway, Verdana, Arial, Helvetica, sans-serif;
}

.topnav a {

  color: #f2f2f2;
  text-align: center;
  padding: 2px 10px;
  text-decoration: none;
  font-family: Fira Sans Condensed, Raleway, Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.25em;
  font-style: underline;
  white-space: nowrap; 
  font-weight: 600;
}

.topnav a:hover {
background-color: #612361;
/* background: linear-gradient(#fefefe, #fafafa); */
border-radius: 12px;
/* border: 1px dotted #e7e4df; */
/* background-color: #89008a; */
color: #ffffff;
}

.topnav .icon {
  display: none;
}

/* Centered Hamburger Menu */
/*
@media screen and (max-width: 600px) 
{
.topnav a:not(:last-child)  {display: none; } 
  .topnav a.icon {
    display: block;
  }
}
*/

/*
@media screen and (max-width: 600px) 
{
 .topnav a:not(:first-child)  {display: none; } 
  .topnav a.icon {
    float: left;
    display: block;
  }
}
*/

 

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

/* -------------------------------------------------------------- */


.bottomnav {
  overflow: hidden;
  background-color: #670268;
}

.bottomnav a {


  color: #f2f2f2;
  text-align: center;
  padding: 2px 10px;
  text-decoration: none;
  font-size: 1.25em;
  font-weight: normal;
  font-style: underline;
}

.bottomnav a:hover {
  background-color: #7a007b;
  border-radius: 12px;
  /* background-color: #89008a; */
  color: #ffffff;
}

.bottomnav .icon {
  display: none;
}


.MenuWrap {
	background-color: #490049;
	font-family: 'Oswald', sans-serif;
	font-size: 1rem;
	min-height: 2.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 1rem;
}

@media (min-width: 31.25em) {
	.MenuWrap {
		flex-direction: row;
	}	
}

.ListItem,
.LastItem {
	color: #ebebeb;
	text-decoration: none;
}

@media (min-width: 31.25em) {
	.ListItem {
		margin-right: 1rem;
	}
	.LastItem {
		margin-left: auto;
	}
}

/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */


/* Testing Start */
@media screen and (min-width: 0px) and (max-width: 600px) {
  #footerimagewide { display: none; } 
}

@media screen and (min-width: 601px) and (max-width: 10000px) {
  #footerimagewide { display: inline-block; } 
}

@media screen and (min-width: 0px) and (max-width: 599px) {
  #footerimagenarrow { display: inline-block; } 
}

@media screen and (min-width: 601px) and (max-width: 10000px) {
  #footerimagenarrow { display: none; } 
}
/* Testing End */



@media screen and (min-width: 0px) and (max-width: 550px) {
  #wide-item { display: none; } 
}

@media screen and (min-width: 551px) and (max-width: 10000px) {
  #wide-item { display: inline-block; } 
}



@media screen and (min-width: 0px) and (max-width: 550px) {
  #narrow-item { display: inline-block; } 
}

@media screen and (min-width: 551px) and (max-width: 10000px) {
  #narrow-item { display: none; } 
}