#hero	{ background-image: url('/images/about/hero.jpg'); }

.green			 		{ font-size: 5em; line-height: 1.3em; margin: 0 0 18px; }
.left, .right	 		{ float: left; }

.leftInfo img 	{ float: right; }
.rightInfo img { float: left; }
.leftInfo, .rightInfo { overflow: auto;clear: both; }
.divider 		{ background: url('../images/global/divider.png') no-repeat center bottom; padding-bottom: 74px;  }

/* LEFT */

.intro					{ margin-bottom: 30px; overflow: auto; }
#last					{ margin-right: 0; }
.testimonial .author 	{ color: #C73F17; text-align: right; font-size: 1.3em; }
.logos			 		{ background: url('../images/global/med_divider.jpg') no-repeat center top; padding-top: 20px; }
.testimonial			{ padding-bottom: 30px; font-size: 1.2em; line-height: 2em; }
.logos					{ clear: both; padding: 30px 0; }
.logos img				{ margin-left: 3.5%; }
#haccp					{ width: 35%; margin-right: 20px; }
#kiki					{ width: 31%; }
#ulladulla				{ width: 16.9%; }
#kiss					{ width: 45%; }


/* RIGHT */
.right img				{ margin: 10px 0; width: 100%; }



/* ///////////////////////////// MEDIA QUERIES //////////////////////////////////////////////////////////// */
/* MOBILES AND TABLETS /////////////////////////////////// */
@media screen and (max-width: 829px) { 
	.info img	{ width: 100%; float: none; margin: 10px 0; }
	.info { width: 100%; }
}



/* TABLETS (IN PORTRAIT) /////////////////////////////////////// */
@media screen and (min-width: 481px) and (max-width: 959px) { 
	.right		{ width: 103.33%; margin-right: -3.33%; }
	.right img { width: 46.67%; float: left; margin-right: 3.33%; }	
	
}

/* 960 DESKTOPS /////////////////////////////////////// */
@media screen and (min-width: 960px) and (max-width: 1279px) { 

	.green					{ text-align: center; font-size: 5.4em; line-height: 1.4em; }
	/* LEFT CONTENT */
	.left					{ width: 60%; margin-right: 3.33%; }
	.intro p				{ width: 100%; }
	.right					{ width: 36.67%; }
	
	.info { }
	.info img	{ width: 42%; }
	.leftInfo img { margin-left: 3%; }
	.rightInfo img { margin-right: 3%; }
}

/* 1280 AND GREATER DESKTOPS /////////////////////////////////////// */
@media screen and (min-width: 1280px) { 
	
	/* LEFT CONTENT */
	.left					{ width: 686px; margin-right: 40px; }
	.right					{ width: 389px; }
	
	.info {  }
	.info img	{ width: 48.5%; }
	.leftInfo img { margin-left: 20px; }
	.rightInfo img { margin-right: 20px; }
}