@charset "UTF-8";

	* {margin: 0;
		padding: 0;
		font-family: Gorgia, Arial, sans-serif;
		text-decoration: none;
		list-style-type: none;
		color: #000;
	}

	body {
		background-image: url(../images/red-background.png);
		text-align: center;
	}

	p {
		text-align:justify;
		font-size: 1.2vw;
	}
	h3 {
			font-size: 12vw;
		}
	h4 {
		font-size: 3vw;
	}
	

	form {
		float: right;
		margin-right: 17vw;
		padding: 1vw;
	}
/* USER INPUT FORM LABELS */


	li {
		margin: 2vh;

	}

/* USER INPUT FORM FIELDS */

	input {
		font-size: 1vw;
		padding: 0.4vh;
		color: black;
		border: 2px solid black;
		background-color: white;
	}

	input:hover {
		color: black;
		border: 2px solid green;
	
	}


	#textbox {
		width: 30vw;
		height: auto;
		float: left;
		padding: 1vw;
		margin-left: 5vw
	}
	
	#map {
		width: 18vw;
		height: 18vh;
		float: left;
		padding:;
		margin:1vw 10vw 1vw 1vw;
		 
	}
	
	#logo {
 	width: 30vw;
 	height: auto;
 	margin-top: 1.5vw;
 	}

	
	section {
		width: 85vw;
		height: 98vh;
		background-image: url(../images/green-background.png);
		}
	

	/* home photo albume */
	figure {
		width: 11vw;
		height: 11vw;
		margin: 2vw 1vw;
		border: 0.5vw solid black;
		float: left;
		border-radius: 5%;
		background-size: cover;
		background-position: center;
		transition: transform 0.1s;
			-moz-transition: transform 0.1s;
			-ms-transition: transform 0.1s;
			-o-transition: transform 0.1s;
			-webkit-transition: transform 0.1s;
		}


		#thumbnail-one {
			 background-image:url("../images/sandwich-1.png");
		}

		#thumbnail-two {
			background-image: url("../images/sandwich-2.png");
		}

		#thumbnail-three {
			background-image:url("../images/sandwich-3.png");
		}

		#thumbnail-four {
			background-image: url("../images/sandwich-4.png");
		}

		#thumbnail-five {
			background-image: url("../images/sandwich-5.png");
		}

		#thumbnail-six {
			background-image:url("../images/sandwich-6.png") ;
		}

		#thumbnail-seven {
			background-image:url("../images/sandwich-7.png") ;
		}

		#thumbnail-eight {
			background-image: url("../images/sandwich-8.png");
		}

		#thumbnail-nine {
			background-image: url("../images/sandwich-9.png");
		}

		#thumbnail-ten {
			background-image: url("../images/sandwich-10.png");
		}

		#thumbnail-eleven {
			background-image: url("../images/sandwich-11.png");
		}

		#thumbnail-twelve {
			background-image:url("../images/sandwich-12.png") ;
		}

		#thumbnail-thirteen {
			background-image:url("../images/sandwich-13.png") ;
		}

		#thumbnail-fourteen {
			background-image:url("../images/sandwich-14.png") ;
		}

		#thumbnail-fifteen {
			background-image:url("../images/sandwich-15.png") ;
		}

		#thumbnail-sixteen {
			background-image:url("../images/sandwich-16.png") ;
		}

		#thumbnail-seventeen {
			background-image:url("../images/sandwich-17.png") ;
		}

		#thumbnail-eighteen {
			background-image:url("../images/sandwich-18.png") ;
		}

		figure:hover {
		border-color: #36bc2a;
		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;
		}
		
		#sidemenu {
			width: 36%;
			height: auto;
			float: left;
			
		}
		#mainmenu {
			width: 36%;
			height: auto;
			float: left;
			margin-left: 1vw;
		}
		#drinksmenu {
			width: 24.8%;
			height: auto;
			float: left;
		}

		#summary {
			width: 40%;
			height: auto;
		}
		#checkout {
			width: 25.9%;
			height: auto;

		}

		#aboutpage {
			width: 33%;
			height: auto;
			float: left;
			margin-left: 2vw;
		}
		

	

		nav {
		position: fixed;
		top: 15vh;
		right: 1.5vw;
		}

		#nav:link {
			display: inline-block;
			width: 4vw;
			height: 4vw;
			border: 0.2vw solid black;
			border-radius: 20%;
			background-color: rgba(255,255,255,0.2);
			margin-bottom: 3.7vh;
		}

			span {
				font-size: 0;
				margin: 0;
				opacity: 0;
				position: relative;
				white-space: nowrap;
				
			}

		#nav:hover span {
			font-size: 5vw;
			font-weight: bold;
			right: 5.8vw;
			opacity: 1;
			}

		.hamburgernav {
			display: none;
			position: fixed;
			left: -30vw;
			height: 80vh;
			font-size: 3vw;
			line-height: 4vw;
			background-color: rgba(255,255,255,0.9);
			padding: 20vh 5vw 0 5vw;
			transition: 1s transform;
		}
		button#hamburger-button {
		position: fixed;
		background-color: rgba(255,255,255,0.7);
		border: 0.3vw solid #000;
		font-size: 3vw;
		line-height: 2vw;
		padding: 0.2vw 0.5vw 0.5vw 0.5vw;
		margin: 0.5vw;
		border-radius: 25%;
		outline: none;
	}

		button#hamburger-button:hover {
			color: #fff;
			background-color: rgba(0,0,0,0.7);
			border-color: rgba(255,255,255,0.1);
		}

		button#hamburger-button:active {
			color: #000;
			background-color: rgba(255,255,255,0.7);
			border-color: #000;
		}

		.hamburgernav, #hamburger-button {
			display:none;
		}




/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-= MOBILE DISPLAY -=-=-=-=-=-
=-=-=- (0px WIDE - 512px WIDE) -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
		@media screen and (max-width: 768px) {

			#map, .mainnav {
				display: none;
			}

			.hamburgernav, #hamburger-button {
				display: active;
			}
			#aboutpage, #checkout, #summary,#sidemenu, #drinksmenu, #mainmenu {
				width: 90%;
				float: none;
				margin: 0;
				padding: 0;

			}

	#textbox {
		width: 90vw;
		float: none;
		margin-left: none;
		}

	p {
		text-align:left;
		font-size: 3vw;
	}
	h3 {
			font-size: 12vw;
		}
	h4 {
		font-size: 5vw;
	}
	

	form {
		float: none;
		margin: 0vw;
		padding: 1vw;
	}

	section {
		height: auto;
		width: auto;

	}
	#logo {
		width: 40%;
		height: auto;
	}

	input {
		font-size: 3vw;
		padding: 0.4vh;
		color: black;
		border: 2px solid black;
		background-color: white;
	}

	input:hover {
		color: black;
		border: 2px solid green;
	
	}

	figure {
		width: 40vw;
		height: 40vw;
		margin: 1vw 1vw;
		border: 0.5vw solid black;
		float: left;
		border-radius: 5%;
		background-size: cover;
		background-position: center;
		transition: transform 0.1s;
			-moz-transition: transform 0.1s;
			-ms-transition: transform 0.1s;
			-o-transition: transform 0.1s;
			-webkit-transition: transform 0.1s;
		}

	button#hamburger-button {
		position: fixed;
		background-color: rgba(255,255,255,0.7);
		border: 0.3vw solid #000;
		font-size: 5vw;
		line-height: 5vw;
		padding: 0.2vw 0.5vw 0.5vw 0.5vw;
		margin: 0.5vw;
		border-radius: 25%;
		outline: none;
		}
	nav {
		left: -100vw;
		height: 88vh;
		font-size: 12vw;
		line-height: 10vh;
		padding: 12vh 2vw 0 5vw;
	}

	.slide-drawer {
			transform: translateX(100vw);
		}

	button#hamburger-button {
		border: 1vw solid #000;
		font-size: 12vw;
		line-height: 5vw;
		padding: 4vw 1vw;
		margin: 4vw;
		outline: none;
	}






		}