/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••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;
	text-decoration: none;
}

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


/* BODY */

	body {
		width: 100vw;
		height: 100vh;
		overflow-x: hidden;
	}

/* HEADER */

	header {
		width: 100vw;
		height: 12vh;
		min-height: 80px;
	}

	button {
		position: fixed;
		top: 40px;
		left: 30px;
		font-size: 16pt;
		color: #fff;
		padding: 1px 7px 3px 7px;
		border: 0px;
		border-radius: 20%;
		background-color: #df8e30;
	}

		button:hover	{
			background-color: #ffcd00;
			color: #000;
		}

/* NAV */

	nav {
		width: 80%;
		height: 100%;
		margin-right: 10%;
		margin-left: 10%;
		position: relative;
	}

/* logo */

		a#logo-link {
			width: 216px;
			height: 81px;
			display: inline-block;
			position: absolute;
			bottom: 0;
		}

		img#logo	{
			width: 216px;
			height:	81px;
			display: inline-block;
			position: absolute;
			bottom: 0;
		}

		ul#navigation {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 40vw;
			min-width: 480px;
		}

			#navigation li {
				float: left;
			}

				#navigation li a {
					display: block;
					font-family: 'Bitter', 'Garamond', serif;
					font-size: 12pt;
					text-decoration: none;
					font-weight: bold;
				    color: white;
					width: 90px;
					height: 22px;
					margin-left: 20px;
					padding: 5px;
					background-color: #df8e30;
				}

/* hover link */

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

/* active link */

	.active {
		color: black;
	}

/* MAIN */

	main#canvas {
		width: 100%;
		height: 84vh;
		margin-bottom: 4vh;
	}

	/* yellow row */

	section#yellow-row {
		width: 100%;
		height: 1vh;
		min-height: 6.5px;
	}

	#yellow-row h6	{
		display: none;
	}

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

/* Home - landing splash */

	section#splash {
			width: 100%;
			height: 83vh;
			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{
			position: fixed;
			height: 4vh;
		    bottom: 8vh;
			width: 80%;
			margin-right: 10%;
			margin-left: 10%;
		}

/* The Pies */

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

		#the-pies article	{
			height: 180px;
			width: 80%;
			margin-right: auto;
			margin-left: auto;
			margin-bottom: 4vh; 
			display: inline-block;
		}

		#the-pies figure {
			width: 300px;
			height: 180px;
			display: inline-block;
			vertical-align: top;
			margin-right: 2vw;
			margin-left: 2vw;
		}

			#the-pies h2 {
				text-align: left;
			}


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

			#the-pies img {
				display: inline-block;
				margin-right: 2vw;
				margin-left: 2vw;
			}

/* Menus */

	section#menus {
		width: 80vw;
		height: 100%;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

		#menus	article {
			display: inline-block;
			width: 300px;
			padding: 0 4vw 5vw 4vw;
			height: 25%;
			vertical-align: top;
		}

		article#menu-drinks  {
				height: 35%;
		}

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

		article#menu-dessert  {
			padding-bottom: 1vw;
		}

		article#menu-gravies  {
			padding-bottom: 1vw;
		}

		article#dietary  {
			width: 100%;
			height: 10vh;
			padding: 0;
			margin: 0;
		}

/* Locations */

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

		#locations article {
			display: inline-block;
			width: 45%;
			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: 100%;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

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

		#catering article {
			width: 100%;
			height: auto;
		}

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

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

		article#catering-splash {
			width: 80%;
			height: 60%;
			margin: 0 auto;
			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: 100%;
			height: 23%;
			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: 80vw;
		height: 83vh;
		margin-right: 10vw;
		margin-left: 10vw;
		text-align: center;
	}

		#image-gallery h6	{
			display: none;
		}

		figure#gallery {
			width: 43vw;
			height: 43vw;
			margin: 1vh auto 0 auto;
		}

/* Contact Us */

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

		#contact h6	{
			display: none;
		}

			form {
				width: 40vw;
				height: 42vh;
				margin: 5vh auto 0 auto;
				padding: 4vw;
				background-color: #F5F5F5;
				border: 1px solid #D3D3D3;
				font-family: 'Montserrat', 'Garamond', sans-serif;
				font-size: 12pt;
				font-weight: black;
				line-height: 1.6;
				text-align: left;
			}

				form a {
					float: right;
					width: 120px;
					height: 20px;
					padding: 5px;
					margin: 2vw 0 0 0;
					text-align: center;
				}

				form input {
					height: 20px;
					width: 200px;
					margin: 4px 0;
				}

					input#textarea {
						width: 40vw;
						height: 60px;
					}

/* FOOTER */

	footer {
		width: 100%;
		height: 4vh;
		min-height: 26.6px;
		position: fixed;
	    left: 0;
	    bottom: 0;
	}

			footer figure  {
				width: 90%;
				height: 100%;
				margin-right: 10%;
			}

				footer a {
					float: right;
					width: 120px;
					height: 20px;
					padding: 5px;
					margin-left: 15px;
					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: 28pt;
	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: 32pt;
	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;
}