@charset "UTF-8";
/* CSS Document - Flavors of Palestine */
/* Website Colors:
	Gable Green: #153d2d;
	Claret: #76172b;
	Thunder: #231f20;
	Eastern Blue: #2493a3;
	Sun: #FDB913
*/

/* ------------------------*/ /* ---------->>> RESET <<<-----------*/ /* ------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ------------------------*/ /* ---------->>> GLOBAL <<<-----------*/ /* ------------------------*/

body {
	background-color: #ffffff;
	text-align: left;
}

nav {
	background-color: #153d2d;
	font-family:'Roboto', sans-serif;
}

nav a {
	text-decoration: none;
	color: #ffffff;
}

nav #logo {
	display: inline;
}

h2 {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	padding-bottom: 1%;
	padding-top: 1%;
}

footer {
	background-color: #76172b;
	color: #ffffff;
}

footer a {
	color: #ffffff;
}

footer ul {
	display: inline-block;
	float: left;
	margin-right: 30%;
}

p {
	font-family: 'Open Sans', sans-serif;
	line-height: 1.3em;
}

a {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: #153d2d;	
}

ul, ol {
	font-family: 'Open Sans', sans-serif;
}

.intro {
	margin-bottom: 3%;	
}

.ingredients {
	list-style-image: url('images/icon/ChickPea-small.png');
	margin: 3% 10% 3% 10%; 
}

.button {
	background-color: #153d2d;
	text-decoration: none;
	color: #ffffff;
	padding: 5px;
	margin: 10px;
	display: inline-block;
}

.icons {
	width: 40px;
	height: auto;
}

.section-title {
	background-color: #76172b;
	color: #ffffff;
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	padding-left: 10px;	
}

.head-title {
	background-color: #153d2d;
	color: #ffffff;
	width: 100% ;
	padding: 20px 30% 20px 20px;
	margin-left: -15%;
}
/* ------------------------Begin Recipes Page------------------------*/ 
ul.rig {
	list-style: none;
	font-size: 0px;
	margin-left: -2.5%; /* should match li left margin */
}
ul.rig li {
	display: inline-block;
	padding: 10px;
	margin: 0 0 2.5% 2.5%;
	background: #fff;
	border: 1px solid #ddd;
	font-size: 16px;
	font-size: 1rem;
	vertical-align: top;
	box-shadow: 0 0 5px #ddd;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
ul.rig li img {
	max-width: 100%;
	height: auto;
	margin: 0 0 10px;
}
ul.rig li h3 {
	margin: 0 0 5px;
}
ul.rig li p {
	font-size: .9em;
	line-height: 1.5em;
	color: #999;
}
/* class for 2 columns */
ul.rig.columns-2 li {
	width: 47.5%; /* this value + 2.5 should = 50% */
}
/* class for 3 columns */
ul.rig.columns-3 li {
	width: 30.83%; /* this value + 2.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
	width: 22.5%; /* this value + 2.5 should = 25% */
}
/* ------------------------End Recipes------------------------*/ 
.mySlides {
	display: none;
}
/* ------------------------*/ /* ---------->>> MOBILE <<<-----------*/ /* ------------------------*/

@media only screen and (max-width: 480px) {
/* ------------------------Animated Hamburger Menu------------------------*/ 
	#hamburgerMenu {
    	display: inline-block;
    	cursor: pointer;
    	float: right;
		margin: 5% 5% 0 2%;
	}

	.bar1, .bar2, .bar3 {
    	width: 35px;
    	height: 5px;
   		background-color: #ffffff;
    	margin: 6px 0;
    	transition: 0.4s;
	}

/* Rotate first bar */
	.change .bar1 {
    	-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    	transform: rotate(-45deg) translate(-9px, 6px) ;
	}

/* Fade out the second bar */
	.change .bar2 {	
		opacity: 0;
	}

/* Rotate last bar */
	.change .bar3 {
		-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
		transform: rotate(45deg) translate(-8px, -8px) ;
	}
/* ------------------------End Animated Hamburger Menu------------------------*/ 	

	nav a:not(#logo) {
		display: none;
	}
	
	nav #logo img {
		width: 80%;
		height: auto;
		margin: 0 10% 5% 10%;
	}
	
	.topnav.responsive {
		position: relative;
	}
	
	.topnav.responsive li {
		float: none;
		display: block;
		text-align: left;
	}
	
	main {
		width: 80%;
		margin: 5% 5% 5% 10%;
	}
	
	img.mySlides {
		width:100%;
	}
	
	h2 {
		font-size: 2em;
		padding-bottom: 3%;
	}
	
	p {
		font-size: 1.1em;
		padding-top: 5%;
		padding-bottom: 5%;
	}
	
	strong {
		font-weight: 600;
		font-family: 'Open Sans', sans-serif;
	}
	
	.icons {
		display: inline-block;
		margin: 10px 45px;
		
	}
	.head-title {
		width: 91%;
	}
	.section-title {
		font-size: 1.2em;
		margin: 3% 0;
	}
	
	.steps {
		width: 100%;
		height: auto;
		padding: 3% 0;
	}
	
	ol li {
		line-height: 1.3em;
		font-size: 1.1em;
		list-style-type: decimal;
	}
	
	#full-size-image img {
		width: 100%;
	}
	
	img#right-image  {
		width: 100%;
		height: auto;
		align-content: left;
		margin-top: 2%;
	}
	
	img#left-image {
		width: 100%;
		height: auto;
		margin-top: 2%;
	}
	
	footer li{
		display: inline;
	}
	
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	}
	
	ul.grid-nav li a {
		display: block;
	}
	
	ul.rig {
		margin-left: 0;
	}
	
	ul.rig li {
		width: 100% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	}
	
	.button {
		padding: 5px;
		margin: 10px;
	}
}
/* ------------------------*/ /* ---------->>> TABLET <<<-----------*/ /* ------------------------*/

@media only screen and (min-width:481px) and (max-width:768px) {
/* ------------------------Animated Hamburger Menu------------------------*/ 
	#hamburgerMenu {
    	display: inline-block;
    	cursor: pointer;
    	float: right;
		margin: 5% 5% 0 2%;
	}

	.bar1, .bar2, .bar3 {
    	width: 35px;
    	height: 5px;
   		background-color: #ffffff;
    	margin: 6px 0;
    	transition: 0.4s;
	}

/* Rotate first bar */
	.change .bar1 {
    	-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    	transform: rotate(-45deg) translate(-9px, 6px) ;
	}

/* Fade out the second bar */
	.change .bar2 {	
		opacity: 0;
	}

/* Rotate last bar */
	.change .bar3 {
		-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
		transform: rotate(45deg) translate(-8px, -8px) ;
	}
/* ------------------------End Animated Hamburger Menu------------------------*/ 	
	nav a:not(#logo) {
		display: none;
	}
	
	nav #logo img {
		width: 80%;
		height: auto;
		margin: 0 10% 5% 10%;
	}
	
	.topnav.responsive {
		position: relative;
	}
	
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	
	main {
		width: 80%;
		margin: 5% 5% 5% 10%;
	}
	
	img.mySlides {
		width:100%;
	}
	
	h2 {
		font-size: 2em;
		padding-bottom: 3%;
	}
	
	p {
		font-size: 1.1em;
		padding-top: 5%;
		padding-bottom: 5%;
	}
	
	strong {
		font-weight: 600;
		font-family: 'Open Sans', sans-serif;
	}
	
	.icons {
		display: inline-block;
		margin: 10px 30px;
		
	}
	
	.head-title {
		width: 91%;
		/*padding-left: 10%;*/
		margin-left: -12%;
	}
	
	.section-title {
		font-size: 1.2em;
		margin: 3% 0;
	}
	
	.steps {
		width: 100%;
		height: auto;
		padding: 3% 0;
	}
	
	ol li {
		line-height: 1.3em;
		font-size: 1.1em;
		list-style-type: decimal;
	}
	
	#full-size-image img {
		width: 100%;
	}
	
	img#right-image  {
		width: 100%;
		height: auto;
		align-content: left;
		margin-top: 2%;
	}
	
	img#left-image {
		width: 100%;
		height: auto;
		margin-top: 2%;
	}
	
	footer li{
		display: inline;
	}
	
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	}
	
	ul.grid-nav li a {
		display: block;
	}
	
	ul.rig {
		margin-left: 0;
	}
	
	ul.rig li {
		width: 100% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	}
	
	.button {
		padding: 20px;
		margin: 0 10px;
	}
}
/* ------------------------*/ /* ---------->>> DESKTOP <<<-----------*/ /* ------------------------*/

@media only screen and (min-width:769px) {
	.hamburgerMenu {
		display: none;	
	}
	
	nav {
		height: 100px;
		position: fixed;
		width: 100%;
		
	}
	
	nav li {
		text-align: right;
		display: inline-block;
		font-size: 2em;
		padding: 30px;
		float: left;
		margin-left: 40px;
		margin-top: 5px;
	}
	
	
	nav li:hover {
		background-color: #0E2A1F;
		padding: 30px;
		border-radius: 700px;
	}
	
	#logo img{
		width: 240px;
		display: block;
		float: left;
		margin-left: 5%;
		margin-right: 10%;
		position: relative;
		z-index: 3;
		margin-top: -30px;
	}
		
	img#logo:hover {
		background-color: none;
	}
	
	main {
		width: 70%;
		margin: 5% 15% 5% 15%;
	}
	
	img.mySlides {
		width:100%;
	}
	
	
	h2 {
		font-size: 2em;
		padding-bottom: 3%;
	}
	
	p {
		font-size: 1.3em;
		padding-top: 5%;
		padding-bottom: 5%;
		margin-left: 0;
	}
	
	strong {
		font-weight: 600;
		font-family: 'Open Sans', sans-serif;
	}
	
	.icons {
		display: inline-block;
		margin: 10px 45px;
		
	}
	
	.section-title {
		font-size: 1.6em;
		margin: 3% 0;
	}
	
	.head-title {
		width: 100%;
		padding-left: 32%;
		margin-left: -30%;
	}
	
	.steps {
		width: 100%;
		height: auto;
		padding: 3% 0;
	}
	
	ol li {
		line-height: 1.6em;
		font-size: 1.6em;
		list-style-type: decimal;
	}
	
	img#full-size-image {
		width: 100%;
	}
	
	img#right-image  {
		width: 40%;
		height: auto;
		align-content: left;
		margin: 2% 3%;
		display: inline-block;
		float: right;
	}
	
	img#left-image {
		width: 40%;
		height: auto;
		margin: 2% 3% 2% 0;
		display: inline-block;
		float: left;
		
	}
	
	footer li{
		display: inline;
	}
	
	.button {
		padding: 20px;
		margin-top: -60px;
		margin-bottom: 40px;
		display: inline-block;
		font-size: 1.3em;
	}
	
	footer p {
		text-align: center;
		
	}
	
	footer li {
		padding-top: 10px !important;
		
	}

	
	
}