/* CSS Document */
html {
	scroll-behavior: smooth;
}
body{
	color:#67756A;
	text-align: left;
	font-size:16px;
	line-height:28px;
}
h1, h2, h3, h4, h5, h6{
	color:black;
}
.quote{
	text-align: center;
	padding: 30px;
	width:100%;
	line-height:22px;
}
.btn-standard{
	width:100%;
	text-align: center;
	padding: 40px 0px 40px 0px;
}
a.btn-standard{
	padding:8px 25px 8px 25px;
	background-color:#8CC83C !important;
	border-radius: 20px;
	width:100%;
	margin:auto;
	color:white;
	font-weight: bold;
	letter-spacing: 0.5px;
}
.submit{
	width:100%;
	text-align: center;
	padding: 40px 0px 40px 0px;
}
.submit{
	padding:8px 25px 8px 25px;
	background-color:#8CC83C !important;
	border-radius: 20px;
	width:100%;
	margin:auto;
	color:white;
	font-weight: bold;
	letter-spacing: 0.5px;
	border:none;
}
.btn-footer{
	width:100%;
	text-align: center;
	padding: 40px;
	display:block;
}
a.btn-footer{
	padding:4px 25px 4px 25px;
	border:1px solid white;
	border-radius: 20px;
	width:100%;
	margin:10px auto 10px auto;
	color:white;
	font-weight: bold;
	letter-spacing: 0.5px;
}
.max-width{
	width:100%;
}
h2{
	margin-top:20px
}
.values-icons{
	padding:10px;
	color: #067A36;
}
.text-green{
	color: #067A36;
}
.flex-center{
	justify-content: center;
}
.image-subtitle{
	color:white;
	font-style: italic;
	text-align: left;
	width:100%;
    padding: 240px 0px 0px 20px;
	font-size:12px;
	line-height: 18px;
}
.video-subtitle{
	    color: white;
    font-style: italic;
    text-align: left;
    width: 100%;
    padding: 106px 0px 0px 20px;
    font-size: 12px;
    line-height: 18px;
}
.top-menu{
	padding: 9.5px;
	max-width:1180px;
	margin: auto;
}
.top-menu-item:hover {
	opacity: 0.5;
}
.top-menu-item {
	margin:0px 5px 0px 0px;
}
@media (max-width: 767.98px){
	.top-menu-item {
		display:none;
	}
}
.navbar-wrapper{
	text-align: right;
	-webkit-box-shadow: 0px 2px 12px rgba(68, 68, 68, 0.3);
 	-moz-box-shadow: 0px 2px 12px rgba(68, 68, 68, 0.3);
    box-shadow: 0px 2px 12px rgba(68, 68, 68, 0.3);
}
.footer-wrapper{
	background-color:#67756A;
	padding-top:20px;
}
.footer-fields{
	width:100%;
	margin:10px 0px 0px 0px;
	border-radius: 20px;
	border:0px;
	line-height:30px;
	padding:5px;
}
.footer-wrapper .nav-link{
	margin-bottom:10px;
}
a.nav-link:hover{
	text-decoration: underline;
	font-weight: bold;
}
.space{
	height:40px;
	width:100%;
}
.nav-link.active{
	font-weight: bold;
}
input[type='text']{
  width:100%;
	border: solid 2px #bbb;
	font-weight: normal;
	font-family: 'Roboto';
	color:#6d6e71 !important;
	padding:5px;
	border-radius: 15px;
	margin-bottom:8px;
}
textarea{
 	width:100%;
	border: solid 2px #bbb;
	font-weight: normal;
	font-family: 'Roboto';
	color: #6d6e71 !important;
	padding:5px;
	border-radius: 15px;
	margin-bottom:15px;
}
.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  min-height: 90vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: hidden;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 2px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling:touch;
}
.section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  /*position: relative;*/
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 430px;
	scroll-behavior: smooth;
  /* For text formatting. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}
@media (min-width: 768px){
	.parallax::after {
	  /* Display and position the pseudo-element */
	  content: " ";
	  position: absolute;
	  top: 90px;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  /* Move the pseudo-element back away from the camera,
	   * then scale it back up to fill the viewport.
	   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
	  transform: translateZ(-1px) scale(1.5);
	  /* Force the background image to fill the whole element. */
		background-repeat:no-repeat;
		background-position: center top;
	  /* Keep the image from overlapping sibling elements. */
	  z-index: -1;
	}
}
@media (max-width: 768px){
	.parallax::after {
		  /* Display and position the pseudo-element */
		content: " ";
		position: absolute;
		top: 90px;
		right: 0;
		bottom: 0;
		left: 0;
	  /* Force the background image to fill the whole element. */
		background-repeat:no-repeat;
		background-position: center top;
		  /* Keep the image from overlapping sibling elements. */
		z-index: -1;
	}
	.video-subtitle{
	    color: white;
		font-style: italic;
		text-align: left;
		width: 100%;
		padding: 86px 0px 0px 20px;
		font-size: 12px;
		line-height: 18px;
	}
}
.bg-contact::after {
  background-image: url("../images/Banner_contact.jpg");
}
.bg-home::after {
  background-image: url("../images/EcoFarms_8AbsoluteOrganic.gif");
	background-size:1900px;
}
.bg-export::after {
  background-image: url("../images/Banner_export.jpg");
}
.bg-fresh-produce::after {
  background-image: url("../images/Banner_freshproduce.mp4");
	background-size:1900px;
}
.bg-grocery::after {
  background-image: url("../images/EcoFarms_2AbsoluteOrganic.gif");
	background-size:1900px;
}
.bg-retail::after {
  background-image: url("../images/Banner_retail.jpg");
}
.bg-bulk::after {
  background-image: url("../images/Banner_bulk.jpg");
}
.bg-about::after {
  background-image: url("../images/Banner_aboutus.jpg");
}

.homepage-product-content{
	background-color:white;
}
.white-bg{
	background-color:white;
}
img{
	max-width:100%;
}
.top-margin{
margin-top:130px;
}

a[href="bulk.html"]{
	display: none;
}
a[href="/bulk.html"]{
	display: none;
}