@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oleo+Script:400&display=swap');
@import url('https://fonts.googleapis.com/css?family=GFS+Didot&display=swap');

/* ===================================
		DEFAULT
====================================== */
	
body { 
	font-family: 'Maven Pro', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: #212529;
	background: url(../images/bg.png) 0 0 repeat; }

p {
	display: block;
	width: 100%; }

a { color: #000; }
a:hover { text-decoration: none; color: #F36B21; }

ul,li { 
	margin: 0;
	padding: 0;
	list-style: none; }

/* ===================================
		PLUGINS
====================================== */

.p-relative { position: relative; }

.color2 { color: #c6a866; }

.title { 
	font-family: 'GFS Didot', serif;
	color: #c6a866; }

.font2 { 
	font-family: 'GFS Didot', serif !important;
	font-style: italic; }

.f-300 { font-weight: 300 !important; }
.f-400 { font-weight: 400 !important; }
.f-500 { font-weight: 500 !important; }
.f-600 { font-weight: 600 !important; }

.lead { 
	position: relative;
	font-family: 'GFS Didot', serif;
	font-style: italic;
	font-size: 22px; }
	
.lead.line:before,
.lead.line:after { 		
	position: absolute;
	height: 16px; width: 50px;
	top: 50%; margin-top: -8px;
	background: url(../images/icons/leaf-left.svg) center center no-repeat ;
	content:""; }
.lead.line:after { background: url(../images/icons/leaf-right.svg) center center no-repeat ; }

.lead.line:before { margin-left: -60px; }
.lead.line:after { margin-left: 8px; }

.img-border { 
	position: relative;
	width: 100%; height: auto;
	display: inline-block; }
	
.img-border:before {
	position: absolute;
	width: 100%; height: 100%;
	top: -15px; right: -15px;
	background: #c6a866;
	content:"";
	z-index: -99; }

.btn-outline-secondary {
	padding: 6px 20px;
	font-size: 14px;
	color: #FFF;
	border-color: #FFF;
	border-radius: 35px; }

.btn-outline-secondary:hover {	
	color: #000;
	border-color: #000;
	background: #FFF; }

/* ===================================
		TYPOGRAPHY
====================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5 {
	font-family: 'Oleo Script', cursive;
	font-weight: 400;	}

.h1 { font-size: 36px; }
.h2 { font-size: 32px; }
.h3 { font-size: 28px; }
.h4 { font-size: 24px; }
.h5 { font-size: 20px; }
.h6 { font-size: 16px; }

/* ===================================
		HEADER
====================================== */

#header-desktop { 
	position: absolute; 
	width: 100%; 
	background: rgba(55, 46, 48, 0.8); }

#header-desktop.fixed-header {
	position: fixed;
	background: #000;
	animation:slide-down 0.5s;
	z-index: 999;
}
@keyframes slide-down {
	0% {
	  opacity: 0;
	  transform: translateY(-100%);
	} 
	100% {
	  opacity: 0.9;
	  transform: translateY(0);
	} 
}

#logo { 
	max-width: 210px;
	margin: 15px 0;
	text-align: center; }
#logo img { max-width: 140px; }

/* ===================================
		NAVIGATION
====================================== */
	
#menu-right ul,
#menu-left ul,
#menu-center ul {
	list-style: none;
	margin: 0;	padding: 0;
	font-family: 'GFS Didot', serif;
	font-weight: 500;
	text-transform: uppercase; }

#menu-left ul li,
#menu-right ul li {
	float: right;
	padding: 45px 20px 30px 20px; }

#menu-right ul li { float: left; }

#menu-left ul li a,
#menu-right ul li a { color: #c6a866; }

#menu-left ul li a:hover,
#menu-right ul li a:hover { text-decoration: underline; }

#menu-center { text-align: center; }
#menu-center ul { display: inline-flex; }
#menu-center ul li { padding: 0  20px; margin-bottom: 20px; }

/* ===================================
		VIDEOS
====================================== */
.video {
	position: relative;
	width: 100%; height: 100%;
	display: block;
}

.video:before {
	content: " ";
	position: absolute;
	width: 100%; height: 100%;
	left: 0; top: 0;
	background: #FFF;
	border-radius: 4px;
	opacity: 0.4;
	z-index: 98;
}
.video:after {
	content: " ";
	position: absolute;
	width: 60px; height: 50px;
	left: 50%; top: 50%;
	margin-left: -30px;
	margin-top: -25px;
	background: url(../images/icons/youtube.svg) center center no-repeat;
	opacity: 0.6;
	z-index: 99;
}
.video:hover:before {
	opacity: 0;
}

/* ===================================
		DONATE BOX
====================================== */
#donate-box { 
	position: absolute;
	max-width: 730px;
	top: 0; left: 50%;
	margin-left: -365px; }

#donate-box img {
	padding: 12px 15px;
	border-radius: 5px;
	box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.5);
	background: rgba(255, 255, 255, 0.5); }

#donate-box img:hover { background: rgba(255, 255, 255, 0.8); }

/* ===================================
		PRODUCT SLIDER
====================================== */
.thumbnail-box {
	background: none;
	padding: 20px 30px;
	border-radius: 10px; }

.thumbnail-box .item:hover:after {	
	position: absolute;
	content: '';
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(199, 168, 103, 0.1);
	border-radius: 50%;
	border: 2px solid #c6a866;
}

.thumbnail-box .owl-prev,
.thumbnail-box .owl-next { 
	position: absolute;
	width: 20px; height: 30px;
	margin-top: -15px; }
.thumbnail-box .owl-prev { left: -40px; top: 50%; }
.thumbnail-box .owl-next { right: -40px; top: 50%; }

#our-approach:hover,
#local-farming:hover,
#womens-empowerment:hover,
#sustainability:hover,
#events:hover { cursor: pointer; }

/* ===================================
		PRODUCT FRAMES
====================================== */
.product-box img { margin-bottom: 25px; }

.carousel-indicators li {
	width: 10px; height: 10px;
	border-radius: 50%; }

.image-text {
	position: absolute;
	left: 0; top: 0; }

#apricot:hover,
#pistachio:hover,
#fig:hover,
#fig-chips:hover,
#hazelnut:hover,
#mulberries:hover { cursor: pointer; }

#apricot-frames img,
#pistachio-frames img,
#fig-frames img,
#fig-chips-frames img,
#hazelnut-frames img,
#mulberries-frames img { width: 100%; }


/* ===================================
		CONTENT SLIDER
====================================== */
.efforts-box {
	background: #000;
	padding: 30px 40px 20px 40px;
	border-radius: 5px; }
	
.efforts-box .owl-prev,
.efforts-box .owl-next { 
	position: absolute;
	width: 20px; height: 30px;
	margin-top: -15px; }
.efforts-box .owl-prev { left: -40px; top: 50%; }
.efforts-box .owl-next { right: -40px; top: 50%; }	

.thumb-title { 
	display: inline-block;
	width: 100%;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	color: #FFF; }

/* ===================================
		OUR-EFFORTS
====================================== */

#our-efforts .item:hover:after {	
	position: absolute;
	content: '';
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(122, 194, 66, 0.3);
}
	
/* ===================================
		WHERE TO BUY
====================================== */
	
#where-to-buy	{ 
	padding: 50px 0;
	color: #FFF;
	background: #000; }

#where-to-buy .item:hover:after {	
	position: absolute;
	content: '';
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(122, 194, 66, 0.3);
	border-radius: 50%;
}

#where-to-buy .item:hover { cursor: pointer; }

/* ===================================
		PRODUCT FRAMES
====================================== */

#page_footer {
	padding: 50px 0 30px 0; }

#page_footer h3.widget-title {
	font-size: 14px;
	font-weight: 600; }	
	
#page_footer .widget_text {
	font-size: 13px; }

#page_footer .sitemap h3.widget-title {
	color: #000; }

#page_footer .social img { 
	margin-right: 5px;
	max-width: 15px; }


#page_footer .widget_text.product-list a {
	color: #212529; }

#page_footer .widget_text.product-list a:hover {
	color: #000; }


#page_footer input,
#page_footer .form-control {
	float: left;
	width: 130px;
	margin-right: 2px;
	font-size: 11px; }

#page_footer button,
#page_footer .btn { 
	float: left;
	padding: 6px 3px 6px 8px;	
	font-size: 11px;
	text-align: center;
	color: #FFF;
	background: #000; }

#page_copyright {	
	font-size: 12px; }
	
#page_copyright {
	padding: 30px 0 20px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1); }
	

/* ===================================
		RESPONSIVE
====================================== */
	
@media (max-width: 1199px) {

	#logo { 
		max-width: 160px;
		margin: 17px 0; }

	#menu-left ul li,
	#menu-right ul li {
		padding: 30px 12px 20px 12px; }

	#menu-left ul li a,
	#menu-right ul li a { font-size: 12px; }

}

@media (max-width: 1023px) {

	#header-desktop { position: relative; }
	
	#menu-left,
	#menu-right { 
		padding-left: 0 !important;
		padding-right: 0 !important; }
	
	.h1 { font-size: 32px; }
	.h2 { font-size: 28px; }
	.h3 { font-size: 24px; }
	.h4 { font-size: 20px; }
	.h5 { font-size: 18px; }
	.h6 { font-size: 14px; }
	
	.lead {  
		font-size: 16px; }
		
	#donate-box {
		max-width: 576px;
		margin-left: -288px; }

	#donate-box img {
		max-width: 160px;
		padding: 10px 13px; }		
}

@media (min-width: 768px) { 
	#menu-center {
		display: none; }
}

@media (max-width: 767px) {

	body {
    font-size: 12px;
    line-height: 1.5;
    color: #212529; }

	#menu-left,
	#menu-right {
		display: none; }

	.h1 { font-size: 30px; }
	.h2 { font-size: 26px; }
	.h3 { font-size: 22px; }
	.h4 { font-size: 18px; }
	.h5 { font-size: 16px; }
	.h6 { font-size: 13px; }	

	.lead {  
		font-size: 14px; }

	#image-block-2 {
		padding-top: 150px;	}
	
	.thumb-title { font-size: 10px; }
	
	#page_footer .widget { margin-bottom: 20px; }
	#page_footer h3.widget-title { font-size: 12px; }
	#page_footer .widget_text { font-size: 10px; }

	#page_copyright { font-size: 10px; }
	#page_copyright .text-left img {
		max-height: 15px; }
	#page_copyright .text-right img {
		max-height: 40px;
	}
}

@media (max-width: 575px) {
	
}

@media (max-width: 375px) {
	
	#menu-center { text-align: center; }
	#menu-center ul { display: inline-flex; }
	#menu-center ul li { 
		padding: 0  10px; 
		margin-bottom: 20px;
		font-size: 10px; }

	#image-block-2 {
    padding-top: 250px; }
	#donate-box {
    max-width: 360px;
    margin-left: -180px; }
	.thumbnail-box {
    padding: 10px 10px;
    border-radius: 10px; }
	.efforts-box {
    padding: 10px 10px 10px 10px; }


	#where-to-buy .mb-5 { margin-bottom: 20px !important; }

}