@charset "UTF-8";


	* {
		margin: 0;
		padding: 0;
		font-family: "Futura", sans-serif;
	}

	html,body,main {
		width: 100%;
		height: 100%;
	}



	section {
		width: 12.5%;
		height: 100vh;
		float: left;
	}

		h3 {
			font-size: 4vw;
			transform: rotate(90deg)translateX(5vw);
			white-space: nowrap;
		}



.none {
	background-color: none;
}

.black {
	background-color: #32D7DA;
}

.gray {
	background-color: #B44040;
}

.white {
	background-color: #fff;
}

.red {
	background-color: #B44040;
}

.orange {
	background-color: #32D7DA;
}

.yellow {
	background-color: #B44040;
}

.green {
	background-color: #32D7DA;
}

.cyan {
	background-color: #B44040;
}

.blue {
	background-color: #32D7DA;
}

.purple {
	background-color: #B44040;
}

.magenta {
	background-color: #32D7DA;
}



figure {
		width: 10vw;
		height: 10vw;
		margin: 2vw 4vw;
		border: 0.5vw solid black;
		float: left;
		background-size: cover;
		transition: transform 0.1s;
			-moz-transition: transform 0.1s;
			-o-transition: transform 0.1s;
			-webkit-transition: transform 0.1s;
	}

		figure:hover {
			transform: scale(1.05,1.05);
				-moz-transform: scale(1.05,1.05);
				-ms-transform: scale(1.05,1.05);
				-o-transform: scale(1.05,1.05);
				-webkit-transform: scale(1.05,1.05);
			box-shadow: 10px 10px 20px 0px black;
				-moz-box-shadow: 10px 10px 20px 0px black;
				-webkit-box-shadow: 10px 10px 20px 0px black;
		}




figure.exterior {
			background-image: url("../img/outside-bw.jpg");
		}

figure.exterior:hover {
				background-image: url("../img/outside-restaurant-17477622.jpg");
			}


figure.food {
			background-image: url("../img/food-bw.jpg");
		}

figure.food:hover {
				background-image: url("../img/food-color.jpg");
			}



section {
		text-align: center;
	}

		.rotate-one-eighty:hover {
			transform: rotate(180deg);
				-ms-transform: rotate(180deg);
				-webkit-transform: rotate(180deg);
		}

li {
			display: inline-block;
			background-color: white;
			margin: 5vw;
			padding: 0.5vw 1vw;
			border: 10px solid black;
			font-size: 3vw;
			font-weight: bold;
			color: black;
		}

	li:hover {
				background-color: yellow;
				cursor: pointer;
			}