*, *:before, *:after {
  box-sizing: border-box;
}

@media(min-width:0px) and (max-width:5000px){
html{
  font-size: 1em;
}

body{
  font-family: 'Raleway';
  letter-spacing: 0.05em;
  color: black;
}

nav{
  position: fixed;
  height: 100%;
  background-color: white;
  z-index: 1001;
  width: 100%;
  display: none;
}

.products-sub-menu{
  display: none;
}

.shown-menu{
  display:block;
}

.nav-content-container{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.navigation-section, .contact{
  width: 85%;
  margin: 0 auto;
}

.nav-header{
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: 1.25em;
  color: #B2B2B2;
  text-align: center;
}

.navigation-section ul, .contact-1, .contact-2{
  text-align: center;
}

.contact{
  padding-top: 3.5em;
}

.contact .nav-header{
  margin-top: 0;
}

.navigation-section ul li{
  margin-bottom: 1.25em;
}

.navigation-section ul :nth-child(1){
  margin-top: 0.25em;
}

.navigation-section ul li a, .contact-1 a, .contact-2 p{
  text-decoration: none;
  color: black;
  font-size: 1.4em;
}

.navigation-section ul li a,.contact-1 a, .contact-2 p {
  font-family: 'Lora';
}

.contact-1 a, .contact-2 p{
  font-size: 0.85em;
}

.contact-1{
  padding-bottom: 1em;
}

.contact-1 :nth-child(1), .contact-2 :nth-child(1){
  line-height: 1.25em;
  display: block;
}

#sub-menu{
  font-size: 1.2em;
  display: inline-block;
  margin: 0 auto;
  color: grey;
}

.products-sub-menu li{
  display: inline-block;
}

.medium-sub-menu{
  margin: 0 1.3em;
}

.navigation-section ul li a{
  transition: 0.3s ease-in-out;
}

.navigation-section ul li a:hover {
  color: #B2B2B2;
}

.header-bg{
  background-image: url(../images/new-banner.jpg);
  background-repeat: no-repeat;
  height: 100vh;
  background-position: bottom;
  background-size: 400%;
}

.header-content{
  width:85%;
  margin:0 auto;
  overflow: auto;
  padding-top: 2em;
  height: auto;
}

header img{
  width: 5em;
  float:left;
  padding-top: 0.4em;
}

#nav-icon3{
  width: 2.2em;
  height: 1.9em;
  position: fixed;
  top: 2.3em;
  right: 7.5%;
  margin: auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 2000;
}

#nav-icon3 span{
  display: block;
  position: absolute;
  height: 0.25em;
  width: 100%;
  background: #707070;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
  top: 1px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 11.25px;
}

#nav-icon3 span:nth-child(4) {
  top: 21px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.shop-shortcut{
  display: none;
}

h1{
  padding-top: 8em;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.3em;
  letter-spacing: 0.01em;
  font-family: "Ancizar Serif", serif;
  text-align: center;
  color: #c69210;
}

.header-content p{
  font-size: 0.95em;
  font-family: 'Lora';
  width: 15.5em;
  font-weight: bold;
  letter-spacing: 0;
  text-align: center;
  width: 100%;
  line-height: 1.5em;
}

.body-text{
  font-family: 'Lora';
  line-height: 1.8em;
  padding-top: 1em;
  font-size: 0.75em;
  -webkit-font-smoothing: antialiased;
}

main{
  padding-top: 3.5em;
  position: relative;
}

.recipe, .our-story, .benefits, .our-partners, .product-small, .product-medium, .product-large{
  width: 100%;
  margin: 0 auto;
}

.vertical-text{
  display: none;
}

img{
  width: 100%;
}

.line-break{
  display: none;
}

.recipe-img-container{
  position: relative;
}

.organic-icon{
  width: 3.5em;
  position: absolute;
  top: 0.9%;
  left: 78%;
  z-index: 2;
}

.recipe .text-container p {
  width:100%;
  position: relative;
  left:0;
}

h2{
  font-size: 1.4em;
  font-weight: 800;
  padding: 1.25em 0 0.2em 0;
  font-family: "Ancizar Serif", serif;
  color: #c69210;
}

.line-divider{
  width: 8em;
  height: 0.25em;
  background-color: black;
  margin: 5em 0;
  clear: both;
}

.l2{
  float: right;
}

.benefits{
  overflow: auto;
  padding: 0 7.5%;
}

.benefits h2{
  padding: 0 0 0.5em 0;
}

.icon-container{
  padding-top: 2em;
}

.icons img{
  width: 3.5em;
}

h4{
  font-family: 'Lora';
  font-weight: bold;
  font-size: 1.1em;
  padding-top: 1.1em;
  letter-spacing: 0;
}

.icons{
  padding-bottom: 3.5em;
}

.icon-4{
  padding-bottom: 0;
}

.products{
  margin-top: 5em;
  background-color: #f4f4f4;
  padding-bottom: 4em;
}

.products h2{
  font-size: 1.4em;
  text-align: center;
  padding: 4em 0 1.5em;
}

.product-small, .product-medium, .product-large{
  position: relative;
}

.product-large, .product-medium{
  margin-top: 4em;
}

.product-number{
  font-family: 'Lora';
  text-align: center;
  font-size: 3.5em;
  position: absolute;
  top: -5%;
  left: 0;
  right: 0;
  margin: auto;
  color: #CCCECF;
  z-index: 99;
}

.contactIcon{
  position: fixed;
  right: 7.5%;
  z-index: 10000;
}

.contactIcon img{
  width: 2.5em;
  padding-top: 0;
}

.phoneIcon{
  top: 4.5em;
}

h3{
  font-size: 1em;
  font-weight: bold;
  display: inline-block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

.product-small a, .product-medium a, .product-large a{
  color: black;
}

.price{
  padding-top: 0.5em;
}

.all-products p{
  text-align: center;
  padding-top: 1.5em;
}

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
  transform: scale(1.1);
}

.img-container{
  position: relative;
  overflow: hidden;
}

.product-img{
  vertical-align: middle;
}

footer{
  padding: 4em 0;
}

.social-media p, .info-section p {
  text-transform: uppercase;
  font-size: 0.85em;
  color: #B7B7B7;
  text-align: center;
  font-family: "Ancizar Serif", serif;
}

.social-media ul, .info-section ul{
  text-align: center;
  /* padding-top: 0.5em; */
}

.social-media ul li, .info-section ul li{
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: 700;
  font-family: "Ancizar Serif", serif;
}

.info-section{
  padding-top: 3em;
}

.social-media ul li, .info-section ul li{
  margin-top: 0.5em;
}

.social-media ul .li-1, .info-section ul .li-1{
  margin-top: 1.1em;
}

.social-media ul li a, .info-section ul li a{
  text-decoration: none;
  color:black;
  font-size: .875em;
  font-family: "Ancizar Serif", serif;
}

.copyright, .powered-by{
  font-size: 0.75em;
  text-transform: uppercase;
  color: #B7B7B7;
  text-align: center;
  padding-top: 3.25em;
  font-family: "Ancizar Serif", serif;
}

.powered-by{
  padding-top: 4em;
}

.text-container{
  padding: 0 7.5%;
}
}

@media(max-width:700px){
.nav-line-3{
  display: block;
}

h1{
  font-size: 1.5em;
  position: absolute;
  width: 100%;
  padding-top: 0;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-content p {
  position: absolute;
  width: 100%;
  padding-top: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-content{
  width:85%;
  margin:0 auto;
  overflow: auto;
  padding-top: 2em;
  height: 100vh;
  position: relative;
}
}

@media(min-width:410px){
.product-number{
  top:-4%;
}
}

@media(min-width:500px){
.products{
  overflow: auto;
  overflow-x: hidden;
}

.product-number{
  top: -6%;
  font-size: 3em;
}

.product-small, .product-medium, .product-large{
  width: 37.5%;
  float: left;
}

.product-small, .product-large{
  margin-left: 7.5%;
}

.product-medium{
  margin-top: 0;
  margin-left: 10%;
  margin-right: 7.5%;
}

.product-large{
  margin-top: 4em;
}
}

@media(min-width:600px){
header img{
  padding-top: 1em;
}

.body-text{
  font-size: 0.8em;
}

#nav-icon3 {
  top: 3em;
}

#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
  top: 11px;
}

h1{
  padding-top: 5.5em;
}

main{
  padding-top: 5em;
}

.line-divider{
  margin: 7em 0;
}

.recipe .text-container p, .our-story .text-container p{
  width: 100%;
}

.our-story, .our-partners{
  overflow: auto;
}

.recipe{
  overflow: auto;
}

.recipe .text-container, .our-story .text-container{
  float: right;
}

.recipe .text-container{
  padding-top: 40%;
}

.our-story img, .our-partners img{
  width: 65%;
}

.our-story h2, .our-partners h2{
  padding-top: 2em;
}

.icon-container{
  float:right;
}

.our-partners{
  clear: both;
}

.our-partners .text-container{
  /* width: 59%; */
  float: right;
}

.recipe-img-container{
  width: 100%;
}

.recipe-img-container :nth-child(1) {
  width:80%;
}

/* .recipe .text-container, .our-story .text-container, .icon-container{
  width:59%;
} */

.recipe .text-container{
  padding-top: 0;
}

.recipe .text-container h2{
  padding-top: 2em;
}

.recipe .text-container h2, .our-story .text-container h2{
  width:100%;
}

.organic-icon {
  top: 1.2%;
  left: 51.5%;
  width: 4em;
  margin: 0;
}

.icons img {
  width: 4em;
}

footer{
  margin: 0 7.5%;
}

.footer-content{
  position: relative;
}

.social-media, .copyright, .powered-by{
  display: inline-block;
}

.social-media p, .social-media ul, .info-section p, .info-section ul{
  text-align: left;
}

.social-media{
  float: left;
}

.info-section{
  padding: 0 0 0 8%;
  display: inline-block;
}

.copyright, .powered-by{
  position: absolute;
  right: 0;
  bottom: 0;
}

.powered-by{
  bottom: 2.4em;
}
}

@media(min-width:768px){
h1 {
  padding-top: 6.5em;
}

.recipe, .our-story, .benefits, .our-partners, .product-small, .product-medium, .product-large {
  width: 85%;
}

.recipe .text-container, .our-story .text-container, .icon-container, .our-partners .text-container {
  width: 59%;
}

.text-container, .benefits {
  padding: 0;
}

.nav-header {
  font-size: 1em;
}

#nav-icon3 {
  top: 4em;
}

#nav-icon3 span:nth-child(4) {
  top: 23px;
}

#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
  top: 12px;
}

.shop-shortcut{
  display: block;
  position: fixed;
  top: 7.5em;
  right: 9%;
  z-index: 9;
  text-decoration: none;
  color: #707070;
}

.shop-shortcut p{
  text-align: center;
  width: auto;
  line-height: 1.2em;
  font-size: 1em;
}

.navigation-section ul li a, .contact-1 a, .contact-2 p {
  font-size: 1.75em;
}

.contact-1 a, .contact-2 p {
  font-size: 0.9em;
}

.header-bg{
  background-image: url(../images/new-banner.jpg);
}

header img{
  padding-top: 2em;
}

main{
  padding-top: 5.5em;
}

.organic-icon {
  top: 1.5%;
}

h2, .products h2{
  font-size: 1.9em;
}

.body-text{
  line-height: 1.7em;
}

.icon-text{
  width: 26em;
}

.benefits h2{
  width: 7em;
}

.line-divider {
  width: 9.5em;
}

.products{
  margin-top: 6em;
}

.product-number {
  font-size: 3.5em;
}

footer {
  padding: 5em 0;
}

.contactIcon{
  top: 3em;
}

.phoneIcon {
  top: 5.5em;
}
}

@media(min-width:880px){
.organic-icon {
  left: 51.7%;
}
}

@media(min-width:900px) {
.powered-by{
  left: 0;
  right: 0;
  width: 13em;
  margin: 0 auto;
  bottom: 0;
}

.shop-shortcut{
  right: 8.9%;
}

.icon-container {
  width: 100%;
  padding-top: 4.5em;
}

.icons {
  float: left;
}

.icon-2 {
  clear: right;
}

.icon-2, .icon-4 {
  padding-left: 11%;
}

.icon-3 {
  padding-bottom: 0;
  clear: left;
}
}

@media(min-width:950px) {
.product-number {
  top: -4%;
}
}

@media(min-width:1000px) {
.header-bg{
  background-image: url(../images/new-banner.jpg);
}

.shop-shortcut {
  right: 8.6%;
  top: 8.5em;
}

.header-content .shop-shortcut p{
  font-size: 1.3em;
}

main {
  padding-top: 8em;
}

h1 {
  font-size: 2.75em;
  padding-top: 4.5em;
}

.header-content p {
  font-size: 1.15em;
}

.recipe {
  overflow: hidden;
  position: relative;
}

.line-divider {
  margin: 5em 5%;
}

/* .first-line{
  margin-top: 10em;
} */

.recipe .text-container h2{
  padding: 0;
  line-height: 1.3em;
  text-align: right;
}

.recipe .text-container{
  padding-top: 3em;
  width: 100%;
}

.recipe-img-container{
  overflow: visible;
}

.recipe-img-container :nth-child(1), .recipe-img-container :nth-child(3) {
  width: 37%;
}

.recipe-img-container :nth-child(3){
    text-align: left;
    position: absolute;
    right: 0;
    left: inherit;
}

.organic-icon {
  left: 50%;
  top: 3.5%;
}

.our-story, .our-partners {
  padding-top: 3em;
  overflow: hidden;
}

.our-story .text-container{
  float: left;
}

.our-story{
  overflow: hidden;
  position: relative;
  padding: 3em 0 5em;
}

.our-story img{
  float: right;
}

.our-story img, .our-partners img {
  width: 57%;
}

.recpie .text-container, .our-story .text-container, .our-partners .text-container {
  width: 37%;
}

.our-story .text-container h2, .our-partners .text-container h2{
  padding-top: 0;
}

.benefits{
  padding-bottom: 3em;
  float: left;
  clear: both;
  margin: 0 0 0 7.5%;
  position: relative;
}

.last-line{
  float: left;
}

.our-partners img {
  float: left;
}

.our-partners .text-container{
  position: absolute;
  right: 0;
  top: 7em;
}

.products {
  margin-top: 9em;
  padding-bottom: 7.5em;
  overflow-y: hidden;
}

.products h2 {
  padding-bottom: 1.5em;
}

.product-small, .product-medium, .product-large {
  width: 25%;
}

.product-small {
  margin-right: 0;
  margin-left: 7.5%;
}

.product-medium {
  margin-top: 0;
  margin-left: 5%;
  margin-right: 5%;
}

.product-large {
  margin-top: 0;
  margin: 0 7.5% 0 0;
}

/******** Scroll Animations ********/

.fromTopIn
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: translate(0,0);
	opacity: 1.0;
}

.fromTopOut
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: translate(0,-15px);
	opacity: 0.0;
}

.fromBottomIn
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: translate(0,0);
	opacity: 1.0;
}

.fromBottomOut
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: translate(0,15px);
	opacity: 0.0;
}

.fromLeftIn
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: translate(0,0);
	opacity: 1.0;
}

.fromLeftOut
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: translate(-20px,0);
	opacity: 0.0;
}

.fromRightIn
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: translate(0,0);
	opacity: 1.0;
}

.fromRightOut
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: translate(20px, 0);
	opacity: 0.0;
}

.scaleUpIn
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleUpOut
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: scale(1.3,1.3);
	opacity: 0.0;
}

.scaleDownIn
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleDownOut
{
	transition: transform 1.25s ease, opacity 1.25s ease;

	transform: scale(0.7,0.7);
	opacity: 0.0;
}

/******** Scroll Animations End ********/
}

@media(min-height:1000px){
h1{
  /* padding-top: 6.5em; */
  font-size: 3em;
}

.header-content p {
  font-size: 1.25em;
}

.header-bg {
  background-position: bottom;
  background-size: 300%;
}
}

@media (min-width: 1020px){
.organic-icon {
  left: 50.2%;
  top: 3.4%;
}
}

.all-products h3{
  letter-spacing: 0;
  text-transform: inherit !important;
}

@media (min-width: 1025px){
h3 {
  font-size: 1.1em;
}

.all-products h3{
  font-size: 1.2em;
  }
}

@media(min-width:1000px) and (min-height: 768px) {
  .header-bg{
    background-image: url(../images/new-banner.jpg);
    background-size: 175%;
  }

  h1 {
    padding-top: 35vh;
  }
}

@media (min-width: 1150px){
.header-bg {
  background-image: url(../images/new-banner.jpg);
  background-size: 100%;
}

.shop-shortcut {
  right: 8.5%;
}

h1 {
  font-size: 2.75em;
  padding-top: 30vh;
}

/* h1, .header-content p, main .l1 {
  margin-left: 3.5%;
} */

.l2 {
  margin-right: 3.5%;
}

.recipe, .our-story, .benefits, .our-partners {
  margin: 0 10%;
  width: auto;
}

main {
  position: relative;
}

.our-partners{
  position: relative;
}

.our-partners .text-container {
  position: absolute;
  right: 0;
  bottom: 0;
}

.organic-icon {
  top: 3.5%;
  left: 49.8%;
}

.benefits {
  clear: both;
}
}

@media(min-height:1100px){
h1{
  padding-top: 7.5em;
}

.header-bg{
  background-size: 350%;
}
}

@media (min-width: 1200px){
.header-bg {
  background-image: url(../images/new-banner.jpg);
  background-position: bottom;
}

/* h1 {
  padding-top: 3.75em;
} */

.contactIcon img{
  width: 3em;
}

.contactIcon{
  right: 11%;
}

.phoneIcon {
  top: 6em;
}

.header-content p {
  font-size: 1.25em;
  padding-top: .5em;
}

.shop-shortcut {
  right: 8.3%;
}

header img {
  position: absolute;
  left: 7.3%;
  z-index: 1000;
  width: 7em;
}

header, main, .all-products, footer {
  max-width: 1250px;
  margin: 0 auto;
}

.footer-content {
  margin: 0 3.5%;
}

.container-1 .body-text{
  padding-top: 1.5em;
}
}

@media(min-height:1200px){
h1{
  padding-top: 8.5em;
}
}

@media(min-width:1300px){
  .header-bg{
    background-image: url(../images/new-banner.jpg);
    background-size: 50% 110%;
  }
}

@media(min-width:1400px){
  h1 {
    padding-top: 28vh;
  }
}

@media(min-width:1500px){
.contactIcon {
  right: 10%;
}

h1 {
  padding-top: 35vh;
  font-size: 3em;
}
}

@media(min-width:1600px){
.header-bg {
  background-size: 100%;
}

.contactIcon img {
  width: 3.5em;
}

.contactIcon {
  right: 12.5%;
}

.contactIcon {
  top: 5em;
}

.phoneIcon {
  top: 8.5em;
}

header img {
  left: 10%;
  padding-top: 4em;
}

.shop-shortcut {
  right: 10.6%;
  top: 9.5em;
}

header, main, .all-products, footer{
  max-width: 1500px;
}

#nav-icon3 {
  right: 10%;
  top: 6em;
}

.organic-icon {
  top: 3.2%;
  left: 50.4%;
}
}


@media(min-height:900px){
  h1{
    padding-top: 36vh
  }
}

@media(min-width:1700px){
  .header-bg {
    background-size: 106%;
  }
  h1{
    padding-top: 5.5em;
    font-size: 3em;
  }
  header, main, .all-products, footer{
    max-width: 2000px;
  }
}