/*

reg-fonts: grey;
green-main titles:#767A65;
light grey-details:#D0D0D0;
orange-links:#e69102;
rosybrown;

*/



body{
	margin: 0;
	font-family: 'Gotham', "Helvetica Neue", 'Helvetica', 'Arial', "sans-serif";
	color: grey;
	font-size: 18px;
	line-height: 1.3em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: lightgray;
}

p{
	width: 80%;
	font-size: 18px;
	line-height: 1.3em;
}

p.texto{
	padding: 5px 0 0 8.7%;
	font-size: 20px;
	width: 60%px;
	line-height: 1.3em;
}


h1, h2, h3, h4{
	color: #767A65;
	margin: auto;
}

h1{
	font-size: 50px;
	line-height: 1.1em;
	text-transform: uppercase;
	font-weight: 400;
	font-family: "Helvetica Neue", 'Helvetica', "serif";
	color: #767A65;
}

h2{
	font-size: 50px;
	line-height: 1.1em;
	text-transform: uppercase;
	font-weight: 400;
	font-family: "Helvetica Neue", 'Helvetica', "serif";
	color: #767A65;
	padding: 60px 0 5px 0;

}

h3{
	font-size: 50px;
	line-height: 1.1em;
	text-transform: uppercase;
	font-weight: 400;
	font-family: "Helvetica Neue", 'Helvetica', "serif";
	color: #767A65;
}

h4{
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 3px;
	color: white;
	
}

h5{
	font-size: 25px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: .03px;
	color: #767A65;
}

h6{
	font-size: 35px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 3px;
	color: white;
}

h7{
	font-size: 35px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 3px;
	color: white;
	font-weight: 400;
}

a{
	color: #767A65;
	text-decoration: none;
	font-family: 'Helvetica', "sans-serif";
	font-weight: 400px;
}

a:hover{
	color: rosybrown;
}



#toggle{
	display: none;
}



	.clearfix{
	clear: both;
}

	input, textarea{
	width: 50%;
	padding: 15px;
	box-sizing: border-box;
	border-width: 5px;
	border-style: solid;
	border-color: white;
	background-color: whitesmoke;
	font-size: 17px;
	color: #767A65;
}

	.button-two{
	background-color:grey;
	color: white;
	font-size: 20px;
	padding:10px 20px;
}

	button-two hover{
	background-color: #767A65;
}

	.wrapper{
	max-width: 1500px;
	width: 95%;
	padding-left: 2.5%;
	padding-right: 2.5%;
	margin-left: auto;
	margin-right: auto;
}


	img{
	height: auto;
}


/* HEADER */

	header{
	
	padding-top: 0px;
	padding-bottom: 0px;
}

	#logo{
	float: left;
	width: 400px;
	background-color: #767A65;
}

	#logo img{
	width: 100%;
	height: auto;
}

	#headernav{
	float: right;
	margin-top: 52px;
}

	#headernav ul{
	margin: 0;
	padding: 0;
}

	#headernav li{
	list-style: none;
	margin: 0;
	font-size: 20px;
	float: left;
	margin-left: 35px;
}

	#headernav a{
	color: #767A65;
	
}

	#headernav a:hover {
	color: rosybrown;
	text-decoration: none;
}

	#secondaryheadernav{
	display: none;
}

/* BANNER*/


	#banner{ 
	height: 775px;	
	background-image: url("../images2/from-farm-coffeebeans.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left bottom;
	position: relative;
}


	.valueprop{
	width: 460px;
	opacity: 0.7;
	position: absolute;
	top:50%;
	left: 3%;
	transform: translateY(-50%);
	background-color: white;
	padding:20px 30px;
}


	#banner2{ 
	height: 775px;
	background-image: url("../images2/spain.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left bottom;
	position: relative;
	margin: 17px auto 70px auto;
}
	.page{
	width: 420px;
	opacity: 0.7;
	position: absolute;
	top:50%;
	left: 3%;
	transform: translateY(-50%);
	background-color: white;
	padding: 20px 30px;
}

	#banner3{ 
	height: 700px;
	background-image: url("../images2/sustainable.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left bottom;
	margin: 60px auto 15px auto;
	padding-bottom: 25px;
}

.third{
	width: 500px;
	opacity: 0.7;
	position:relative;
	top:50%;
	left: 3%;
	transform: translateY(-50%);
	background-color: white;
	padding:20px 20px;
}

	.botton-final{
	width: 460px;
	opacity: 0.7;
	position: absolute;
	top:50%;
	left: 3%;
	transform: translateY(-50%);
	background-color: white;
	padding: 20px 30px;
}

	.botton a{
	color: #767A65;
}

	


	h1 span{
	font-size: 125%;
	font-weight:700;
	display: block;
}
	h2 span{
	font-size: 125%;
	font-weight:700;
	display: block;
}
	h3 span{
	font-size: 125%;
	font-weight:700;
	display: block;
}

	h4 span{
	font-size: 125%;
	font-weight:700;
	display: block;
	
}

	h6 span{
	font-size: 125%;
	font-weight:700;
	display: block;
}

	h7 span{
	font-size: 125%;
	font-weight:700;
	display: block;
}


/* MENUES */

	#menues{
	margin: 20px 0;
	text-align: center;
}

	.menu-container{
	margin-top: 75px;
}

	.menu{
	width: 350px;
	display: inline-block;
	
}
	.menu img{
	width: 100%; 
}


/* STORY 1 */

	#storiesone{
	text-align: center;
	margin: auto;
}


	.story{
	width: 27%;
	margin: 0 2.5% 3% 0;
	display: inline-block;
	vertical-align: top;
}

	.story img{
	width: 100%;
}

/* STORY 2 */

	#storiestwo{
	padding-bottom: 25px;
	text-align: left;
	background-color: #D0D0D0;
	background-size: 1500px;
	
}

	.story-second{
	width: 20%;
	margin: 10px 1%;
	display: inline-block;
	padding: 20px 4px 3px 12px;
	vertical-align: top;
}

	.story-second img{
	width: 105%;
}


/* FORM */
	.box-section{
	max-width: 1300px;
	width: 100%;
	background-image: url("../images2/sendmessage.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	opacity: 60%;
	text-align: center;
	padding-top: 80px;
	padding-bottom: 80px;
	margin: 70px auto;
}

	legend{
	color: white;
	padding: 5px 0 0 0%;
}

/* FOOTER */

	footer{
	text-align: center;
}


	#social{
	text-align: center;
	padding: inherit;
}


	#social li{
	list-style: none;
	display: inline-block;
	width: 50px;
	vertical-align: top;
	padding: 25px;
	
}

	.copyright-container{
	
	background-color: #D0D0D0;
	color: white;
	text-align: center;
	height: 20px;
	width: 100%;
	font-size: 12px;
	padding: 15px 0 1.5px 0;
}

 	#footernav{
	display: none;
}

	#footernav2{
	display: none;
}


	#footernav ul{
	margin: 0;
	padding: 0;
}

	#footernav li{
	list-style: none;
	margin-bottom: 10px;
}

	#footernav a{
	color: grey;
	background-color: white;
		font-size: 16px;
}




/*MEDIA QUERIES - */

@media screen and (max-width: 1700px){	
	
	#banner, #banner2, #banner3{
		height: 740px;}
	
	}/*end 1700media*/




/*MEDIA QUERIES - */

@media screen and (max-width: 1500px){
	
	#banner, #banner2, #banner3{
		height: 625px;}
	
	
	}/*end 1500media*/


/*MEDIA QUERIES - */

@media screen and (max-width: 1400px){
	
	p.texto{
	padding: 5px 0 0 6%;
	font-size: 19px;
	width: 85%;
}
	
	
	
	}/*end 1400media*/


/*MEDIA QUERIES - */

@media screen and (max-width: 1300px){
	
	#banner, #banner2, #banner3{
		height: 575px;}
	
	p.texto{
	font-size: 18px;
}
	
	}/*end 1300media*/


/*MEDIA QUERIES - */

@media screen and (max-width: 1200px){
	
	p.texto{
		padding: 5px 0 0 4.5%;
		font-size: 17px;
		width: 88%;
}
	
	}/*end 1200media*/

@media screen and (max-width: 1100px){
	
	p.texto{
		font-size: 16.1px;
		width: 90%;
}
	h5{
	font-size: 20px;
}
	}/*end 1100media*/


/*MEDIA QUERIES*/
@media screen and (max-width: 1000px){
		
p{
	font-size: 14px;
	
}
	p.texto{
		font-size: 14.5px;
		width: 90%;
}
	
#headernav li{
	font-size: 17px;
	margin-left: 35px;
}
	
	#headernav{
		margin-top: 45px;
	}
	
	
	#banner, #banner2, #banner3{
		height: 500px;}
	

	#logo{
		width: 345px;
	}
	
	h1{
	font-size: 45px;
}
	
	h1 span{
	font-size: 115%;
}

	h2{
	font-size: 40px;

}
	
	h2 span{
	font-size: 105%;
}

	h3{
	font-size: 30px;
}
	
	h3 span{
	font-size: 95%;
}

	h4{
	font-size: 17px;
	
}
	h4 span{
	font-size: 90%;
	
}

	h6{
	font-size: 30px;
}	

	h6 span{
	font-size: 115%;
}
	
	
	h7{
	font-size: 30px;
}
		h7 span{
		font-size: 115%;
		}
	
	.valueprop{
	width: 400px;
}


	.page{
	width: 300px;
	
}

	.third{
	width: 350px;
}
	}/*end 1000media*/



/*MEDIA QUERIES - TABLET*/

@media screen and (max-width: 900px){
	
	#banner, #banner2, #banner3{
		height: 450px;}
	
	
	#headernav{
	display: none;
}

	#toggle{
		display: inline-block;
		width: 6%;
		float: right;
		padding: 27px 3% 0px 0;
}	
	
	#footernav{
		display: block;
		padding-top: 45px;
		padding-bottom: 3px;
	}
	
	p.texto{
		padding: 5px 0 0 4.5%;
		font-size: 12.5px;
		width: 88%;
}
	p{
	font-size: 12px;
	
}
	h1{
	font-size: 35px;
}
	
	h1 span{
	font-size: 100%;
}

	h2{
	font-size: 30px;

}
	
	h2 span{
	font-size: 95%;
}

	h3{
	font-size: 20px;
}
	
	h3 span{
	font-size: 85%;
}

	h4{
	font-size: 13px;
	
}
	h4 span{
	font-size: 83%;
	
}

	h5{
	font-size: 15px;
}
	
	h6{
	font-size: 20px;
}	

	h6 span{
	font-size: 100%;
}
	
	
	h7{
	font-size: 20px;
}
		h7 span{
		font-size: 100%;
		}
	
.valueprop{
	width: 300px;
}


.page{
	width: 250px;

}

	.third{
	width: 250px;
}
	
	input, textarea{
		width: 65%;
		font-size: 75%;
}
	
	.button-two{
	font-size: 15px;
}
	
	
/*MEDIA QUERIES - 850*/

@media screen and (max-width: 850px){
	
	p.texto{
	padding: 5px 0 0 4.5%;
	font-size: 12.3px;
	width: 90%;
}
	
	}/*end 850media*/



/*MEDIA QUERIES*/

@media screen and (max-width: 800px){
	
	p.texto{
		padding: 5px 0 0 11.7%;
		width: 75%;
}
	
	}/*end 800media*/


/*MEDIA QUERIES - 750*/

@media screen and (max-width: 750px){
		#logo{
		width: 300px;
	}
	#banner, #banner2, #banner3{
		height: 400px;
}
	
	#storiestwo{
	padding: 0px 0px 5px 0px;
	
}
	.story-second{
	width: 19%;
	margin: 6px 1%;
	padding: 10px 4px auto 8px;
	vertical-align: top;
}

	.story-second img{
	width: 95%;
}
	
	
	h1{
	font-size: 30px;
}
	
	h1 span{
	font-size: 95%;
}

	h2{
	font-size: 25px;

}
	
	h2 span{
	font-size: 90%;
}

	h3{
	font-size: 17px;
}
	
	h3 span{
	font-size: 80%;
}

	h4{
	font-size: 12px;
	
}
	h4 span{
	font-size: 80%;
	
}
	
	h5{
	font-size: 13px;
}
	
	h6{
	font-size: 18px;
}	

	h6 span{
	font-size: 95%;
}
	
	h7{
	font-size: 25px;
	}
		h7 span{
		font-size: 95%;
			
		}
	
.valueprop{
	width: 275px;
}

.page{
	width: 200px;
}

	.third{
	width: 280px;
}
	
	}/*end 750media*/


/*MEDIA QUERIES - 700*/

@media screen and (max-width: 700px){
	
	p.texto{
		padding: 5px 0 0 4.5%;
		width: 86%;
}
	.page{
	width: 250px;
}
	
	}/*end 700media*/



/*MEDIA QUERIES - CELL PHONE*/

@media screen and (max-width: 600px){
	
	#logo{
		width: 275px;
	}	
	
	.story{
		display: none;
	}
	
	#footernav2{
		display: inline-block;
		

	}
	
	#footernav2 a{
	color: #767A65;
	border: .7px solid #767A65;
	padding: 1px 7px;
		
}
	
	
	#footernav2 li{
	list-style: none;
	padding: 0 50px 3px 3%;
	font-size: 15px;
	margin-top: 3px;
	}
	
	
	#banner{
		background-position: left bottom;
		position: relative;
		height: 350px;
	}
	
	
	#banner2{
		background-position: right bottom;
		position: relative;
		height: 350px;
	}
	
	#banner3{
		background-position: left bottom;
		position: relative;
		height: 350px;}
	
	p.texto{
		padding: 5px 0 0 8.5%;
		font-size: 12px;
		width: 80%;
}
	p{
	font-size: 12px;
	
}
	
	
	#storiestwo{
	text-align: left;
}
	

	.story-second{
	width: 80%;
	margin: 0 auto 5px;
	padding: 5%;
}

	.story-second img{
	width: 105%;
}	
	
	.valueprop{
	width: 272px;
}
	.page{
	width: 350px;
}
	
	.third{
	width: 400px;
}
	
	input, textarea{
		width: 60%;
		font-size: 65%;
}
	
	.button-two{
	font-size: 10px;
}
	
	}/*end 600media*/
	

	/*MEDIA QUERIES - 565*/

@media screen and (max-width: 571px){
	
	p.texto{
		width: 86%;
}
	
	
	}/*end 532media*/
	
	
	@media screen and (max-width: 532px){
	
	p.texto{
		padding: 5px 0 0 4.5%;
		font-size: 12px;
		width: 90%;
}
	#social li{
	width: 37px;
}	
		
	}/*end 510media*/
	
	@media screen and (max-width: 510px){
	
	p.texto{
			padding: 5px 0 0 8.5%;
		font-size: 12.3px;
		width: 85%;
}
	}/*end 510media*/
	

/*MEDIA QUERIES - 420*/

@media screen and (max-width: 420px){	
	
	#logo{
		width: 200px;
	}
		#toggle{
		padding: 20px 3% 0px 0;
}
	p.texto{
			padding: 5px 0 0 8.5%;
		
		width: 80%;
}
	
	#banner{
		background-position: left bottom;
		position: relative;
		height: 320px;
	}
	
	
	#banner2{
		background-position: right bottom;
		position: relative;
		height: 320px;
	}
	
	#banner3{
		background-position: left bottom;
		position: relative;
		height: 320px;}
	

	.valueprop{
	width: 180px;
}


	.page{
	width: 245px;
	
}

	.third{
	width: 300px;
}
	
	p{
	font-size: 12px;
	
}
	
		h1{
	font-size: 20px;
}
	
	h1 span{
	font-size: 110%;
}

	h2{
	font-size: 20px;

}
	
	h2 span{
	font-size: 85%;
}

	h3{
	font-size: 23px;
}
	
	h3 span{
	font-size: 80%;
}

	h4{
	font-size: 15px;
	
}
	h4 span{
	font-size: 75%;
	
}
	
	h5{
	font-size: 10px;
}
	
	h6{
	font-size: 15px;
}	

	h6 span{
	font-size: 90%;
}
	
	h7{
	font-size: 25px;
}
		h7 span{
		font-size: 90%;
		}
	
	#social li{
	width: 30px;
	}
	
}/*end 420media*/
	
	/*MEDIA QUERIES - 360*/

@media screen and (max-width: 360px){	
	
	#logo{
		width: 175px;}
	
	
	#banner, #banner2, #banner3{
		background-position: left bottom;
		position: relative;
		height: 250px;}
	}
	
/*end 360media*/