/* 
    __ _____ _____    _____ _____ ____  _____ _____     _    
 __|  |  _  |     |  |     |   __|    \|     |  _  |   ( o>  
|  |  |     | | | |  | | | |   __|  |  |-| |-|     |  {| )   
|_____|__|__|_|_|_|  |_|_|_|_____|____/|_____|__|__| --"-"-- 
                                                        V    
*/

* {
	margin: 0;
	padding: 0;
	font-family: 'Cormorant Garamond', serif;
	text-decoration: none;
}

html,body,main {
	width: 100%;
	scroll-behavior: smooth;
	margin: auto;
	background-color: #fff;
	background-image: url("../img/rice-paper.png");
}

/* 
--------------------------------------
-------------COLOR CLASSES------------
--------------------------------------
*/

.red {
	background-color: #EE4023;
}

.yellow {
	background-color: #EEA723;
}

.grey {
	background-color: #B3B3B3;
}

/* 
--------------------------------------
--------------FONT STUFF--------------
--------------------------------------

font-family: 'Bowlby One SC', cursive;
font-family: 'Cormorant Garamond', serif;
font-family: 'Open Sans', sans-serif;

*/

/* 
--------------------------------------
---TABLET/DESKTOP (768px or bigger)---
--------------------------------------
*/

@media screen and (min-width: 1024px) {

h1 {
	font-family: 'Bowlby One SC', cursive;
	text-align: center;
	font-size: 4vw;
	color: #EE4023;
	padding-top: 2vh;
	margin-bottom: 4vh;
}

h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 2vw;
	color: #828282;
}

h3 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-size: 1.75vw;
}

p {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-size: 1.75vw;
}

a {

}

	a:hover {
		color: #EE4023;
		text-decoration: overline;
	}

#hamburger {
	display: none;
}

nav {
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 10vw;
	background-color: #EE4023;
}

/*--------transform/transition------*/

	.logo {
		top: ;
		float: left;
		width: 8vw;
		padding: 1vh;
		transition: transform 3s;
			-moz-transition: transform 3s;
			-ms-transition: transform 3s;
			-o-transition: transform 3s;
			-webkit-transition: transform 3s;
	}

		.logo:hover {
			transform: rotate(360deg);
				-moz-transform: rotate(360deg);
				-ms-transform: rotate(360deg);
				-o-transform: rotate(360deg);
				-webkit-transform: rotate(360deg);
		}

	ul {
		float: right;
		list-style-type: none;
		padding-top: 1vh;
	}

		li {
			float: left;
		}

		li a {
			display: inline-block;
			padding: 2vw;
			text-decoration: none;
			font-family: 'Bowlby One SC', 'Impact';
			color: white;
			font-size: 3vw;
			letter-spacing: 0.10vw;
		}

		li a:hover {
			color: white;
			text-decoration: overline;
		}

/*---------ICON/BREAK---------*/

#icon {
	display: inline;
	width: 8vw;
	height: auto;
	padding-right: 1vw;
}

#divider {
	position: relative;
	display: inline-block;
	padding-top: 15vw;
	width: auto;
	height: auto;
	left: 40vw;
}

	#divider img {
		position: static;
		width: 20vw;
		height: auto;
	}
/*----------SPLASH-------*/

#splash {
	position: relative;
	width: 100%;
}

	#splash img {
		width: 100%;
		height: auto;
		margin-top: 10vh;
	}

.btn {
		position: absolute;
		width: 250px;
		height: 250px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
		border-radius: 50%;
		border: 0;
		box-shadow: 5px 10px 20px #000;
		background-color: #EEA723;
	}

	.btn:hover {
		background-color: #EE4023;
	}

	.btn h1 {
		position: fixed;
		margin: 0;
		padding: 0;
		top: 50px;
		text-align: center;
		font-size: 36pt;
		color: white;
	}

/*--------EATS---------*/

#eat {
	width: 80%;
	left: 50%;
	padding-top: 20vh;
	margin: auto;
}

	#menu {
		display: inline-block;
		width: 24vw;
		padding: 1vw;
		float: left;
		height: 34vw;
	}
		#menu img {
			width: 24vw;
		}

		#menu h1 {
			font-size: 2.5vw;
			margin: 0;
			padding: 0;
		}

		article#item {
			display: inline-block;
			width: 18vw;
		}

		article#price {
			display: inline-block;
			width: 5vw;
		}

		#menu h1 {

		}
/*--------US---------*/

#us {
	display: block;
	width: 80%;
	left: 50%;
	margin: auto;
	padding-top: 20vh;
	padding-bottom: 10vh;
}

	#us p {
		margin: 1vh 0 0 0;
	}

	#us h1 {
		text-align: left;
	}

	#us-img {
		float: left;
		width: 50%;
		height: auto;
		padding: 0 2vw 0 0;
	}

/*--------RES---------*/

#res {
	width: 100%;
	height: auto;
	margin: auto;
	padding-top: 20vh;
	text-align: center;
}

/*--------MAP---------*/

#map {
	width: 100vw;
	height: 70vh;
	padding-top: 20vh;
}
	
	#map iframe {
		width: 100%;
		height: 100%;
	}

/*------------FOOTER----------*/

#footy {
	width: 100%;
	height: 20vh;
	margin: auto;
}

	#footy-section {
		display: inline;
		float: left;
		width: 48vw;
		height: auto;
		text-align: center;
		padding-top: 2vh;
		padding-left: 2vw;
	}

	#footy p {
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		letter-spacing: 0.5pt;
		font-size: 1.5vw;
		color: white;
	}

	#footy p strong {
		font-family: 'Open Sans', sans-serif;
		font-weight: 700;
		letter-spacing: 0.5pt;
		font-size: 2vw;
		color: white;
	}

}
 
/*--------@keyframes img fade---------*/

@keyframes img-fade {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}

	@-moz-keyframes img-fade {
		0%		{opacity: 0;}
		100%	{opacity: 1;}
	}

	@-ms-keyframes img-fade {
		0%		{opacity: 0;}
		100%	{opacity: 1;}
	}

	@-o-keyframes img-fade {
		0%		{opacity: 0;}
		100%	{opacity: 1;}
	}
	
	@-webkit-keyframes img-fade {
		0%		{opacity: 0;}
		100%	{opacity: 1;}
	}

.img-fade {
	animation-name: img-fade;
	animation-duration: 2s;
		-moz-animation-name: img-fade;
		-moz-animation-duration: 2s;
		-ms-animation-name: img-fade;
		-ms-animation-duration: 2s;
		-o-animation-name: img-fade;
		-o-animation-duration: 2s;
		-webkit-animation-name: img-fade;
		-webkit-animation-duration: 2s;
	padding: 0 0 1vh 0;
}

/*-----------FORMS----------*/

input {
	padding: 0.5vw;
	margin: 0.5vw;
	font-weight: 300;
}

	input:hover {
		border: 2px double #EE4023;
	}

input.form-text {
	width: 30vw;
	height: 3vh;
}

input.form-number {
	width: 100px;
	height: 3vh;
}

input[type=submit] {
	width: 15vw;
	height: 5vh;
	background-color: #EE4023;
	padding: 0.5vw;
	margin: 0.5vw;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	color: white;
	font-size: 1.5vw;
	border: 2px double #EE4023;
}
	input[type=submit]:hover {
		background-color: white;
		color: #EE4023;
	}