#homepage-desktop {
  background-image: url('../storage/luxury-bathroom-for-organic-in-home-spa-experiences-tiny.jpg');
  background-color: #573526;
}
#homepage-desktop, #saltology-story-desktop {
	background-image: url('../storage/bath-salt-bowls-with-eucalyptus-and-lavender-background-tiny.jpg');
  background-color: #b5b4bc;
}
#organic-essential-oils-hero {
	background-image: url('../storage/lavender-and-eucalpytus-on-marble-background-tiny.jpg');
  background-color: #e4e3eb;
}
#organic-essential-oils-parallax-lavender {
	background-image: url('../storage/organic-lavender-blossoms-for-essential-oil-background.jpg');
  min-height: 50vh;
}
.three-column {
	display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 2vh;
  margin: 5vh auto;
}
.three-column h3 {
	margin-bottom: 0.5em;
}
.bullets {
  margin-left: 1em;
  list-style-type: disc;
  line-height: 1.75em;
}
.no-disc {
  margin-left: 0;
  list-style-type: none;
}
.bullets li {
	margin-bottom: 0.5em;
}

/* HOMEPAGE */
#homepage-all-products-products {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2vh;
}
.homepage-brand:nth-child(1) {
  margin-left: 5vh
}
.homepage-brand:nth-child(2) {
  margin-right: 5vh
}
.homepage-brand {
  height: 100%;
}
.homepage-brand-details {
	display: grid;
  grid-template-rows: repeat(auto-fit, minmax(0px, 1fr));
  padding: 2em;
}
.homepage-brand-details h3 {
	margin-bottom: 0.5em;
}
.homepage-brand-logo {
  width: 100%;
  max-width: 140px;  
}
.homepage-brand-logo-image {
  width: 100%;
  max-width: 140px;
}

/* ORGANIC ESSENTIAL OILS */

.essential-oil-box {
  position: relative;
  border-radius: 10px;
  margin-bottom: 2em;
  overflow: hidden;
  display: grid;
  grid-template-columns: 25% 1fr;
  align-items: center;
  justify-items: center;
  min-height: 180px;
}
.essential-oil-box span[class^="icon"] {
  position: absolute;
  top: 50%;
  left: -130px;
  display: block;
  font-size: 22em;
  opacity: 0.9;
  transform: translateY(-50%);
}
.essential-oil-box div:nth-child(2) {
  padding: 2em 2em 2em 0;
}
#essential-oil-box-lavender {
  background: url('../img/subtle-wave-texture.png') repeat, linear-gradient(80deg, rgba(112,89,115,1) 20%, rgba(59,27,93,1) 100%);
  background-size: 40%, 100%;
}
#essential-oil-box-eucalyptus {
  background: url('../img/subtle-wave-texture.png') repeat, linear-gradient(90deg, rgba(66,119,145,1) 20%, rgba(0,59,93,1) 100%);
  background-size: 40%, 100%;
}
#essential-oil-box-grapefruit {
  background: url('../img/subtle-wave-texture.png') repeat, linear-gradient(90deg, rgba(178,60,60,1) 20%, rgba(148,34,45,1) 100%);
  background-size: 40%, 100%;
}
#essential-oil-box-neroli {
  background: url('../img/subtle-wave-texture.png') repeat, linear-gradient(90deg, rgba(250,172,24,1) 20%, rgba(168,87,38,1) 100%);
  background-size: 40%, 100%;
}
#essential-oil-box-spearmint {
  background: url('../img/subtle-wave-texture.png') repeat, linear-gradient(90deg, rgba(99,119,46,1) 20%, rgba(59,80,36,1) 100%);
  background-size: 40%, 100%;
}
#essential-oil-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  grid-column-gap: 1em;
  margin-top: 2em;
}
.essential-oil-benefits {
  display: grid;
  grid-template-columns: 35% 1fr;
  grid-row-gap: 1em;
  align-items: center;
  margin-bottom: 1em;
}
.essential-oil-benefit {
  text-align: center;
  padding: 1em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
}
.essential-oil-icons {
  padding: 10px 0;
  background: rgba(255,255,255,0.75);
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  justify-items: center;
}
.essential-oil-icons span {
  display: inline-block;
  font-size: 4em;
  transform: translateY(2px);
  text-shadow: 0px 0px 10px rgba(255,255,255,0.7);
}
#essential-oil-energize {
  background: #9cc378;
  color: #7aa84f;
}
#essential-oil-detox {
  background: #e9d73a;
  color: #c29a21;
}
#essential-oil-refresh {
  background: #e1914d;
  color: #c77c3a;
}
#essential-oil-skin {
  background: #d45a41;
  color: #ba4730;
}
#essential-oil-mood {
  background: #d55c8c;
  color: #bd4877;
}
#essential-oil-sleep {
  background: #6e609f;
  color: #564985;
}
#essential-oil-breathe {
  background: #4585c1;
  color: #3470a8;
}
#essential-oil-muscle-pain {
  background: #51aca8;
  color: #3d918d;
}

@media (max-width: 1040px) {
	#essential-oil-table {
    grid-template-columns: 1fr; 
  }
}

@media (max-width: 768px) {
	.three-column {
  	grid-template-columns: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 5vh;
  }
  .three-column h3 {
  	font-size: 1.5em;
  }
}

@media (max-width: 480px) {
	.essential-oil-box {
    grid-template-columns: 1fr; 
    text-align: center;
  }
  .essential-oil-box div:nth-child(1) {
    min-height: 100px;
    width: 100%;
    order: 2;
  }
  .essential-oil-box div:nth-child(2) {
    padding: 1em;
    order: 1;
  }
  .essential-oil-box span[class^="icon"] {
    position: relative;
    top: 0;
    left: 0px;
    display: block;
    font-size: 10em;
    opacity: 0.9;
    transform: translateY(0%);
  }
  #essential-oil-box-lavender {
    background: linear-gradient(150deg, rgba(162,134,175,1) 20%, rgba(84,62,119,1) 100%);
  }
  #essential-oil-box-eucalyptus {
    background: linear-gradient(90deg, rgba(76,139,133,1) 20%, rgba(53,102,109,1) 100%);
  }
  #essential-oil-box-grapefruit {
    background: linear-gradient(90deg, rgba(202,85,82,1) 20%, rgba(161,59,64,1) 100%);
  }
  #essential-oil-box-neroli {
    background: linear-gradient(90deg, rgba(215,152,64,1) 20%, rgba(162,99,54,1) 100%);
  }
  #essential-oil-box-spearmint {
    background: linear-gradient(90deg, rgba(120,146,77,1) 20%, rgba(66,80,46,1) 100%);
  }
  .essential-oil-benefits {
    display: block;
  }
  .essential-oil-icons {
    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  }
  
  /* HOMEPAGE */
  .homepage-brand:nth-child(1) {
    margin-left: 0;
  }
  .homepage-brand:nth-child(2) {
    margin-right: 0;
  }
  #homepage-all-products-products {
    display: block;
  }
 }