@font-face {
	font-family: 'AGENCY';
	src: url(../fnt/AGENCYB.TTF);
}

@font-face {
	font-family: 'BRUSH';
	src: url(../fnt/BRUSHSCI.TTF);
}

@font-face {
	font-family: 'BASKERVILLE';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("//shop.ezzentialoils.com/cdn/fonts/baskerville_no_2/baskervilleno2_n4.58c0ec927a99385b0402747b6c157538f4cdc10c.woff2?h1=YTg5NGQxLmFjY291bnQubXlzaG9waWZ5LmNvbQ&h2=ZXp6ZW50aWFsb2lscy5teXNob3BpZnkuY29t&h3=ZXp6ZW50aWFsb2lscy5jb20&hmac=1b2e05a9d8acec6c021d70585f43afccda9c69881326180a00073f5f09a8eb76") format("woff2"),
		url("//shop.ezzentialoils.com/cdn/fonts/baskerville_no_2/baskervilleno2_n4.52abb8e92f66631b3778eb51fda69dca851c7d70.woff?h1=YTg5NGQxLmFjY291bnQubXlzaG9waWZ5LmNvbQ&h2=ZXp6ZW50aWFsb2lscy5teXNob3BpZnkuY29t&h3=ZXp6ZW50aWFsb2lscy5jb20&hmac=791d1a540ba65b7bc6f3bb8c36ef49bb39675f51a84960e4a7605227dae140fc") format("woff");
}

* {
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 0% 0%;
        border: none;
        text-decoration: none;
		box-sizing: border-box;
}

html { 
	/* background: url(inc/img/bg.png) no-repeat center center fixed; */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body {
	background-color: #FFFFF0;
	background: #FFFFF0;
	font-family: BASKERVILLE;
	font-size: 16pt;
	color: rgba(40,103,44,0.75);
}

a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color: inherit;
}

a:hover {
	color: rgba(40,103,44) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

table {
	height: 100%;
	width: 100%;
	padding: 0;
	border-spacing: 0;
	border-collapse: collapse; /* separate; */
	font-size: inherit;
	table-layout: fixed;
}

td {
	text-align: center;
}

img {
	border: 0;
}

input {
	line-height: 50px;
	letter-spacing: 2px;
	font-size: 1rem;
}

input::placeholder {
	font-family: BASKERVILLE;
	color: rgba(40,103,44,0.75);
	font-size: medium;
	font-size: 1rem;
	opacity: 1.0;
	padding-left: 15px;
}

input[type=text] {
	width: 600px;
	background-color: #FFFFF0;
	color: rgba(11.40.14);
	font-size: 1rem;
	border: 1px solid rgba(40,103,44,0.75);
	border-radius: 7px;
	padding-left: 15px;
}

input[type=text]:hover {
	outline: 1px solid rgba(40,103,44,0.75);
}

input[type=text]:focus {
	border: 1px solid rgba(11,40,14);
	outline: 1px solid rgba(11,40,14);
}

input[type=password] {
	width: 600px;
	background-color: #FFFFF0;
	font-size: 1rem;
	border: 1px solid rgba(40,103,44,0.75);
	border-radius: 7px;
}

input[type=submit] {
	background-color: rgba(11,40,14);
	font-family: BASKERVILLE;
	color: #FFFFF0;
	max-height: 50px;
	letter-spacing: 1px;
	cursor: pointer;
	border-radius: 7px;
	text-align: center;
	font-size: large;
}

textarea {
	border: 2px solid #535353;
	width: 50%;
	height: 50%;
	color: #535353;
}

h1
{
	font-size: 42pt;
	color: rgba(40,103,44);
	font-weight: normal;
}

h2
{
	font-size: x-large;
	color: rgba(40,103,44,0.75);
	font-weight: normal;
}

h3
{
	font-family: 'BASKERVILLE';
	font-size: 12pt;
	color: rgba(40,103,44,0.75);
	font-weight: normal;
}

h3:hover
{
	color: rgba(40,103,44);
}

h4
{
	font-size: 16pt;
	color: rgba(40,103,44,0.75);
	font-weight: normal;
	padding: 30px 30px 30px 30px;
}

h5
{
	font-family: 'AGENCY'; 
	font-size: 18px;
}

#exploreSelect {
	background-color: #FFFFF0;
	height: 50px;
	color: rgba(40,103,44,0.75);
	font-size: 24px;
	border: 1px solid; 
	border-radius: 7px; 
	box-shadow: 7px 3px; 
	font-family: 'AGENCY';
}

#username, #password
{
	line-height: 25px;
	width: 80%;
}

#login
{
	padding-left: 30px;
	display: none;
}

#main
{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0%;
	left: 0%;
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 0% 0%;
	text-align: center;
}

#hdr 
{
	position: relative;
	height: 250px;
	width: 100%;
	top: 0%;
	left: 0%;
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 0% 0%;
	text-align: center;
}

#cart
{
	position: relative;
	height: 30px;
	width: 100%;
	background: linear-gradient(to bottom, #FFFFF0 0%, rgba(0, 0, 0, 0.45) 100%);
	font-family: AGENCY;
	display:  none;
}

#ftr 
{
	position: relative;
	height: 5%;
	width: 100%;
	bottom: 0%;
	left: 0%;
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 0% 0%;
}

#nav 
{
	position: relative;
	height: 50px;
	width: 100%;
	top: 0%;
	left: 0%;
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 0% 0%;
}

#board
{
	position: relative;
	height: 300px;
	width: 100%;
	top: 0%;
	left: 0%;
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 0% 0%;
	background-image: linear-gradient(to bottom right, #9e7645, #fcc883, #9e7645);
	display: table;
}

#closeMsg
{
	position: relative;
	top: 30px;
	width: 100%;
	text-align: right;
}

.logoSize {
	width: 120px; 
	aspect-ratio: auto 120 / 125.983; 
	height: 125.983px;
}

.grayText
{
	color: #FFFFF0 !important;
}

.overlay
{
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.75);
	z-index: 2;
	font-family: AGENCY;
}

.overlay h4 {
	font-family: BASKERVILLE;
	font-size: 14pt;
}

.overlayMsg
{
	position: fixed;
	display: none;
	width: 50%;
	height: 50%;
	top: 25%;
	left: 25%;
	right: 0;
	bottom: 0;
	background-color: #FFFFF0;
	z-index: 3;
}

/* SLIDESHOW */

/* Slideshow container */
.slideshow-container
{
  max-width: 1000px;
  position: relative;
  margin: auto;
  width: 100%;
}

.mySlides img {
  max-height: 270px;
}

/* Next & previous buttons */
.prev, .next
{
  cursor: pointer;
  padding: 100px;
  color: rgba(40,103,44,0.75);
  font-weight: bold;
  font-size: 36px;
  transition: 0.6s ease;
  border-radius: 8px 8px 8px 8px;
  user-select: none;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover
{
  background-color: rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dot
{
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0%;
  background-color: #98988f;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover
{
  background-color: rgba(40,103,44,0.75);
}

/* Fading animation */
.fade
{
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade
{
  from {opacity: .4}
  to {opacity: 1}
}

ol, ul, li {
	margin-left: 25px;
}

#leftHdrCol {
	width: 33%;
}

#rightHdrCol {
	width: 33%;
}

#leftSearch {
	display: block;
	margin-left: -33%;
}

#rightSearch {
	display: none;
}

.rightCart {
	margin-right: -33%;
}

#hamburger {
	display: none;
}

#closeX {
	display: none;
}

#leftContainer {
	display: table-cell;
	width: 33%;
	vertical-align: middle;
}

#rightContainer {
	display: table-cell;
	width: 33%;
	vertical-align: middle;
}

#showContainer {
	display: table-cell;
	width: 34%;
	vertical-align: middle;
}

#newsletter {
	text-align: left;
}

#subscribeButton {
	min-width: 100px; 
}

#subscribeTable {
	width: 800px;
	color: rgba(40,103,44,0.75);
}

#ftrContainer {
	display: table;
	width: 100%;
	background-color: rgba(11,40,14);
}

#ftrContainer h3 {
	color: #FFFFF0;
	font-size: 16pt;
}

#ftrContainerLeft {
	display: table-cell;
	text-align: left; 
	padding-left: 30px;
	min-width: 33%;
	width: 33%;
}

#ftrContainerRight {
	display: table-cell;
	text-align: right; 
	padding-right: 30px;
	min-width: 33%;
	width: 33%;
}

#ftrContainerMide {
	display: table-cell;
	min-width: 34%;
	width: 34%;
}

#explore {
	height: 60px;
	color: rgba(40,103,44,0.75);
	padding-left: 60px;
}

.navMenuText {
	color: rgba(40,103,44,0.75);
	font-size: 22.8px;
	font-weight: normal;
	line-height: calc(1 + 0.3 / 1.05);
	letter-spacing: 0.06rem;
	-webkit-text-stroke: 1px rgba(40,103,44,0.75);
	font-stretch: ultra-expanded;
	transform: scale(1, 0.90);
}

.navSelected {
	color: rgba(40,103,44);
	font-size: 22.8px;
	font-weight: normal;
	text-decoration: underline;
	text-underline-offset: 3px;
	letter-spacing: 0.06rem;
	-webkit-text-stroke: 1px rgba(40,103,44);
	font-stretch: ultra-expanded;
	transform: scale(1, 0.90);
}

.navSelected:hover {
	text-decoration-thickness: 2px; 
	color: rgba(40,103,44);
}

.menuItem {
	width: 50px;
	height: 50px;
}

.menuItem:hover {
	width: 53px;
	height: 53px;
}

.articleImg {
	width: 500px;
	height: height: 500px;
	margin-left: -15%;
}

.articlePin {
	padding: 5% 5% 5% 5%;
}

.article {
	display: table;
	width: 90%;
}

.articleTitleContainer {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center; 
	justify-content: center;
}

.articleTitle {
	display: flex;
	width: 80%;
	align-items: center; 
	justify-content: center;
}

.articleContainer {
	display: flex;
	width: 100%;
	align-items: center; 
	justify-content: center;
}

.articleContent {
	display: table-cell;
	font-size: 21px;
	color: rgba(40,103,44,0.75);
	font-weight: normal;
	width: 75%;
	text-align: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	vertical-align: top;
}

.articleAdContainer {
	display: table-cell;
	width: 25%;
}

.articleAds {
	display: flex;
	flex-direction: column;
	position: sticky; 
	top: 0;
}

.articleAds a {
	padding-top: 20px;
}

.articleImgSizeLarge_2x3 {
	width: 600px;
	height: 900px;
}

.articleImgSizeLarge_3x2 {
	width: 900px;
	height: 600px;
}

.articleImgSizeLarge_4x3 {
	width: 600px;
	height: 450px;
}

.articleImgSizeLarge_2x1 {
	width: 600px;
	height: 300px;
}

.articleImgSizeSmall_2x3 {
	width: 200px;
	height: 300px;
}

.articleImgSizeSmall_3x2 {
	width: 300px;
	height: 200px;
}

.articleImgSizeBannerLandscape {
	width: 600px;
	height: 150px;
}

.articleImgSizeBannerPortrait {
	width: 150px;
	height: 600px;
}

.articleImgSizeSquareSmall {
	width: 200px;
	height: 200px;
}

.articleImgJustifyCenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.articleImgInlineLeft {
	display: inline-block;
	float: left;
	padding-right: 2%;
}

.articleImgInlineRight {
	display: inline-block;
	float: right;
	padding-left: 2%;
}

.articleTable {
	display: table;
	width: 100%;
}

.articleTableRow {
	display: table-row;
}

.articleTableColumn {
	display: table-cell;
	vertical-align: top;
}

.articleTableColumnSpace {
	width: 50px;
}

.fontAgency {
	font-family: AGENCY;
}

.fontBold {
	font-weight: bolder;
	color: rgba(40,103,44);
}

.faq {
	width: 100%;
	text-align: left;
	padding-left: 10%;
	padding-right: 10%;
}



/* END OF STYLE */

/* MOBILE PHONE CODE */

/* mobile responsive */

@media all and (min-width:0px) and (max-width: 900px) { 
	* {
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}
	
	#leftSearch {
		display: none;
	}

	#rightSearch {
		display: inline;
	}

	.rightCart {
		margin-right: 0;
	}

	#hamburger {
		display: inline;
	}

	#nav {
		display: none;
		z-index: 999;
		height: 100%;
		margin-top: 50px;
	}

	#nav td {
		display: block;
		width: 100%;
		height: 100%;
		height: 50px;
		background-color: #FFFFF0;
		text-align: left;
		padding-left: 6%;
		padding-top: 4%;
		padding-bottom: 4%;
	}

	#nav td h3 {
		font-size: 32pt;
		color: rgba(40,103,44);
		line-height: 48px;
	}

	#previousButton {
		display: none;
	}

	#nextButton {
		display: none;
	}

	.slideshow-container {
		margin-left: 0%;
		overflow-x: scroll;
	}

	.mySlides {
		display: inline;
	}

	.mySlides img {
		max-height: 540px;
		height: 540px;
		min-width: 600px;
		width: 600px;
	}

	#board {
		height: 600px;
	}

	#newsletter {
		max-width: 500px !important;
		margin-left: 60px;
	}

	#subscribeButton {
		width: auto;
		margin-right: 60px;
	}

	#subscribeTable {
		width: 100% !important;
	}

	#ftrContainer {
		display: block;
		width: 100%;
		margin-top: 60px;
	}

	#ftrContainerLeft {
		display: block;
		text-align: center; 
		padding-left: 30px;
		min-width: 100%;
		width: 100%;
	}

	#ftrContainerRight {
		display: block;
		text-align: center; 
		padding-right: 30px;
		min-width: 100%;
		width: 100%;
		padding-top: 30px;
		padding-bottom: 30px;
		margin-top: 60px;
		margin-bottom: 60px;
	}

	#ftrContainerMid {
		display: block;
		min-width: 100%;
		width: 100%;
		padding-top: 60px;
		margin-top: 30px;
	}

	.dot
	{
	  cursor: pointer;
	  height: 60px;
	  width: 60px;
	  margin: 0%;
	  background-color: #98988f;
	  border-radius: 50%;
	  display: inline-block;
	  transition: background-color 0.6s ease;
	  margin-left: 15px;
	  margin-right: 15px;
	  margin-top: 15px;
	}

	.active, .dot:hover
	{
	  background-color: rgba(40,103,44,0.75);
	}

	input::placeholder, input {
		font-size: 24px;
	}

	input newsletter {
		display: inline !important;
	}

	h1 {
		font-size: 72pt;
		color: rgba(40,103,44);
	}

	h2, h3, h4 {
		font-size: 24pt;
		color: rgba(40,103,44,0.75);
	}

	#stay_connected {
		font-size: 48pt;
		color: rgba(40,103,44);
	}

	#explore {
		font-size: 24pt;
	}

	#main td {
		font-size: 24pt;
	}

	.overlayMsg
	{
		width: 80%;
		height: 80%;
		left: 10%;
		top: 10%;
	}

	.overlay h4 {
		font-size: 24pt;
	}

/*
	.article {
		display: block;
	}

	.articleContent {
		font-size: 21px;
		color: rgba(40,103,44,0.75);
		font-weight: normal;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 30px;
		padding-bottom: 30px;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
		border: 1px solid rgba(40,103,44,0.75);
		border-radius: 7px;
		display: block;
	}
*/

	.articleSpace {
		display: none;
		width: 0%;
	}

	.articlePin {
		padding: 5px 5px 5px 5px;
		padding-top: calc(5% + 10px);
	}

	.menuItem {
		width: 100px;
		height: 100px;
	}

	.menuItem:hover {
		width: 106px;
		height: 106px;
	}

	.article {
        	display: flex;
		flex-direction: column;
	}

	.articleContent {
		width: 100%;
	}

	.articleAds {
		flex-direction: row;
		justify-content: space-around;
	}

	.articleImgSizeLarge_2x3 {
		width: 400px;
		height: 600px;
	}

	.articleImgSizeLarge_4x3 {
		width: 400px;
		height: 300px;
	}

	.articleAdContainer {
		width: 100%;
		border-top: none;
	}

	.logoSize {
		width: 220px; 
		aspect-ratio: auto 220 / 230.969; 
		height: 230.969px;
	}

	.articleTableRow {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.articleTableColumnSpace {
		display: none;
		width: 0;
	}

	.navMenuText {
		color: rgba(40,103,44,0.75);
		font-size: 24px;
		font-weight: lighter;
		line-height: calc(1 + 0.3 / 1.05);
		letter-spacing: 0.06rem;
		transform: scale(1, 0.90);
	}

	.navSelected {
		color: rgba(40,103,44);
		font-size: 24px;
		font-weight: lighter;
		text-decoration: none;
		text-underline-offset: 0;
		letter-spacing: 0.06rem;
		transform: scale(1, 0.90);
	}

	#exploreSelect {
		height: 70px;
		border-radius: 13px;
        	box-shadow: 13px 7px;
		font-size: 30px;
	}

}