/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••OO••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••OO••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••OO••••••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••••••OOOO•••••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••••••OOOO•••••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••••••OOOO•••••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••••••OOOO•••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••OOOOOO••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••OOOOOO••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••OOOOOO••••••••••••••••••••••••••••••••••••••
••••••••O••••••••••••••••••••••••••••••OOOOOO••••••••••••••••••••••••••••O•••••••••
•••••••••OO•••••••••••••••••••••••••••OOOOOOOO•••••••••••••••••••••••••OO••••••••••
•••••••••••OOO••••••••••••••••••••••••OOOOOOOO••••••••••••••••••••••OOO••••••••••••
•••••••••••••OOOO•••••••••••••••••••••OOOOOOOO•••••••••••••••••••OOOO••••••••••••••
•••••••••••••••OOOOOO•••••••••••••••••OOOOOOOO••••••••••••••••OOOOOO•••••••••••••••
•••••••••••••••••OOOOOOO•••••••••••••OOOOOOOOOO•••••••••••••OOOOOO•••••••••••••••••
•••••••••••••••••••OOOOOOO•••••••••••OOOOOOOOOO••••••••••OOOOOOO•••••••••••••••••••
••••••••••••••••••••••OOOOOOOO•••••••OOOOOOOOOO•••••••OOOOOOOO•••••••••••••••••••••
•••••••••••••••••••••••OOOOOOOOOO••••OOOOOOOOOO••••OOOOOOOOO•••••••••••••••••••••••
•••••••••••••••••••••••••OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO•••••••••••••••••••••••••
••••••••••••••••••••••••••••OOOOOOOOOOOOOOOOOOOOOOOOOOOO•••••••••••••••••••••••••••
••••••••••••••••••••••••••••••OOOOOOOOOOOOOOOOOO000000•••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••OOOOOOOOOOOOOOOOOOOO•••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••OOOOOOOOOOOOOOOOOO••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••OOOOOOOOOOOOOO••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••OOOOOOOOOO••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••OOOOOO••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••••DESIGN BY••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••MARCELO LAYERA•••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* CSS RESET */

*{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* FONT-FACE CUSTOM FONTS
	Google web hosted linked stylesheet
	Bitter & Montserrat */


/* MAIN */

	main#canvas {
		width: 100vw;
		height: 100vh;
	}

/* HEADER */

	header {
		width: 100%;
		height: 12%;
	}

/* logo */

		a {
			width: 17.7%;
			height: auto;
			padding-left: 10%;
			float: left;
		}

		#logo {
			width: 17.7%;
			height: auto;
			padding-left: 10%;
			float: left;
		}

		/* NAV */

	nav {
		padding-top: 3%;
		width: 60%;
		float: left;
		padding-right: 10%;				

	}

		ul#navigation {
			list-style-type: none;
			float: right;
		}

			#navigation li {
				float: left;
			}

				#navigation li a {
					font-family: 'Bitter', 'Garamond', serif;
					font-size: 12pt;
					text-decoration: none;
					font-weight: bold;
				    color: white;
					width: 110px;
					height: 25px;
					margin-left: 30px;
					margin-bottom: 10px;
					padding: 5px;
					background-color: #df8e30;

				}

/* hover link */

					#navigation li a:hover {
						background-color: #ffcd00;
						color: black;
					}

/* active link */

.active {
	color: black;
}

/* yellow row */

section#yellow-row {
	width: 100%;
	height: 1%;
}

	#yellow-row h6	{
		display: none;
	}

section	h1 {
		padding-top: 1%;
		height: 7%;
	}


/* Home - landing splash */

section#splash {
		width: 100%;
		height: 83%;
		background-image: url(../img/home-pie-splash.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position:center;
}

	#canvas-splash	{
		background-image: url(../img/home-pie-splash.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position:center;
	}

	#splash h5{
		padding-top: 42%;
	}

/* The Pies */

section#the-pies {
	width: 80%;
	height: 83%;
	margin-right: 10%;
	margin-left: 10%;
	text-align: center;
}

	#the-pies article {
		display: inline-block;
		width: 40%;
		height: 93%;
		vertical-align: top;
	}

		#the-pies figure {
			display: inline-block;
			height: 180px;
			width: 300px;
			margin-bottom: 5%;
		}

			#the-pies p {
				font-family: 'Montserrat', 'Arial', sans-serif;
				font-size: smaller;
				line-height: 1.4;
				text-align: justify;
				text-justify: inter-word;
			}

/* Menus */

section#menus {
	width: 80%;
	height: 83%;
	margin-right: 10%;
	margin-left: 10%;
	text-align: center;
}

	#menus	article {
		display: inline-block;
		width: 26%;
		height: 60%;
		vertical-align: top;
		padding-left: 5%;
	}

		#menus figure {
			width: 100%;
			height: 50%;
			margin-bottom: 10%;
		}

			#menus figcaption	{
					font-family: 'Montserrat', sans-serif;
					font-size: x-small;
					line-height: 1.6;
			}

article#dietary  {
	width: 100%;
	height: 20%;
	padding: 5% 0 0 0;
}

/* Locations */

section#locations {
	width: 80%;
	height: 83%;
	margin-right: 10%;
	margin-left: 10%;
	text-align: center;
}

	#locations article {
		display: inline-block;
		width: 40%;
		height: 50%;
		vertical-align: top;
	}

		#locations figure {
			display: inline-block;
			height: 180px;
			width: 300px;
			font-family: 'Montserrat', 'Arial', sans-serif;
			font-size: smaller;
			line-height: 1.4;
		}

		figure#address-box-1 {
			height: 130px;
			width: 300px
			}

			#address-box-1 li {
				display: block;
				text-align: center;
			}

		figure#address-box-2 {
			height: 130px;
			width: 300px
			}

			#address-box-2 li {
				display: block;
				text-align: center;
			}

		figure#delivery-partners-1  {
			width: 300px;
			height: 260px;
			padding-top: 3%;
			text-align: center;
		}

			#delivery-partners-1 h4 {
				margin-bottom: 10px;
			}

				#delivery-partners-1 li {
					float: left;
					width: 110px;
					height: 20px;
					margin-left: 10px;
					margin-bottom: 10px;
					padding: 5px;
				}

		figure#delivery-partners-2  {
			width: 300px;
			height: 260px;
			padding-top: 3%;
			text-align: center;
		}

			#delivery-partners-2 h4 {
				margin-bottom: 10px;
			}

				#delivery-partners-2 li {
					float: left;
					width: 110px;
					height: 20px;
					margin-left: 10px;
					margin-bottom: 10px;
					padding: 5px;
				}

/* Catering */

section#catering {
	width: 80%;
	height: 83%;
	margin-right: 10%;
	margin-left: 10%;
	text-align: center;
}

	#catering h1 {
		padding-top: 1%;
		height: 7%;
	}

	#catering article {
		width: 90%;
		height: 10%;
		margin-right: 5%;
		margin-left: 5%;
	}

		#catering li{
			display: inline-block;
		    color: white;
			width: 220px;
			height: 30px;
			margin-left: 10px;
			margin-bottom: 10px;
			padding: 5px;
		}

			#catering h2 {
				margin-bottom: 10px;
				font-size: 14pt;
			}

	article#catering-splash {
		width: 70%;
		height: 60%;
		margin-right: 15%;
		margin-left: 15%;
		background-image: url(../img/catering.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position:center;
	}

	#catering-splash h6 {
		display:none;
	}


	article#catering-partners  {
		width: 80%;
		height: 20%;
		margin-right: 10%;
		margin-left: 10%;
		padding: 1% 0 0 0;
	}

		#catering-partners li  {
			display: inline-block;
			width: 110px;
			height: 20px;
			margin-left: 20px;
			margin-bottom: 10px;
			padding: 5px;
		}

/* Image Gallery */

section#image-gallery {
	width: 80%;
	height: 83%;
	margin-right: 10%;
	margin-left: 10%;
	text-align: center;
}

	#image-gallery h6	{
		display: none;
	}

/* Contact Us */

section#contact {
	width: 80%;
	height: 83%;
	margin-right: 10%;
	margin-left: 10%;
	text-align: center;
}

	#contact h6	{
		display: none;
	}

/* FOOTER */

footer {
	width: 100%;
	height: 4%;
}

		footer figure  {
			width: 95%;
			height: 100%;
			margin-right: 5%;
		}

			footer a {
				float: right;
				width: 120px;
				height: 20px;
				padding: 5px;
				margin-left: 20px;
				text-align: center;
			}

/* BUTTON CLASSES */

.button {
	font-family: 'Montserrat', 'Garamond', sans-serif;
	font-size: 10pt;
	font-weight: normal;
	text-decoration: none;
    color: white;
	background-color: #9ec54f;
}

	.button:hover	{
		color: black;
		background-color: #ffcd00;
	}

.footer-button {
	font-family: 'Montserrat', 'Garamond', sans-serif;
	font-size: 10pt;
	font-weight: normal;
	text-decoration: none;
    color: white;
	background-color: #9ec54f;
}

	.footer-button:hover	{
		color: black;
		background-color: #ffcd00;
	}



/* TEXT CLASSES */

.left {
	text-align: left;
}

.center {
	text-align: center;
}

/* HTML HEADINGS */

h1 {
	font-family: 'Montserrat', 'Garamond', sans-serif;
	font-size: 24pt;
	font-weight: bold;
	color: #44a756;
}

h2 {
	font-family: 'Montserrat', 'Garamond', sans-serif;
	font-size: 18pt;
	font-weight: medium;
	color: #44a756;
}

h3 {
	font-family: 'Montserrat', 'Garamond', sans-serif;
	font-size: 12pt;
	color: black;
}

h4 {
	font-family: 'Montserrat', 'Garamond', sans-serif;
	font-size: 10pt;
	font-weight: black;
	color: #44a756;
}

h5 {
	font-family: 'Montserrat', 'Garamond', sans-serif;
	font-size: 30pt;
	font-weight: bold;
	color: #df8e30;
	text-align: center;
}

h6 {
	font-family: 'Montserrat', 'Garamond', sans-serif;
	font-size: 10pt;
	font-weight: 400;
	color: black;
}

/* COLOR CLASSES */

.green {
	background-color: #9ec54f;
}

.dark-green {
	background-color: #44a756;
}

.orange {
	background-color: #df8e30;
}

.yellow {
	background-color: #ffcd00;
}

.white {
	background-color: #fff;
}

.cyan {
	background-color: cyan;
}

.red {
	background-color: red;
}