*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face {
  font-family: Elsie;
  src: url("fonts/Elsie-Regular.ttf");
}

@font-face {
  font-family: Lato;
  src: url("fonts/Lato-Regular.ttf");
}

:root {
/*.two {*/
/* CSS HEX */
--light-cornflower-blue: #8ecae6ff;
--blue-green: #219ebcff;
--prussian-blue: #023047ff;
--honey-yellow: #ffb703ff;
--orange: #fb8500ff;
/*}*/

/*.three {*/
	/* CSS HEX */
--red-salsa: #f94144ff;
--orange-red: #f3722cff;
--yellow-orange-color-wheel: #f8961eff;
--mango-tango: #f9844aff;


/*.one {*/
/* CSS HEX */
--imperial-red: #e63946ff;
--honeydew: #f1faeeff;
--powder-blue: #a8dadcff;
--celadon-blue: #457b9dff;
--prussian-blue: #1d3557ff;
/*}*/

	--main-bg: var(--honeydew);
	--sub-bg: var(--sunglow);
	--alt-bg: var(--blue-green);
	--secondary-color: #457b9d;
	--primary-color: var(--honey-yellow);
	--alt-color: var(--);
--button-active: var(--primary-color);
--button-hover:;
--button-clicked:;

	--font: Lato, Source Sans Pro, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
}


.dark {
	--main-bg: #141414;
	--sub-bg: var(--sunglow);
	--alt-bg: var(--blue-green);
	--secondary-color: #457b9d;
	--primary-color: var(--honey-yellow);
	--alt-color: var(--);
	color: #fff;
}

.dark svg {
	fill: #fff;
}
 

body {
  font-family: var(--font);
  font-display: swap;
	background: var(--main-bg);

}

#splash {
	background: var(--primary-color);
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 10;
	animation: slideIn 1300ms cubic-bezier(0.16,1, 0.3,1), slideOut 500ms 2s ease-in-out forwards;

}

@keyframes slideIn {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0%);
	}
}

@keyframes slideOut {
	0% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(100%);
	}
}

header {
	transition: 1s all;
	position: fixed;
	width: 100vw;
	top: 0;
	left: 0;
	background: transparent;
	height: 9vh;
	padding: 10px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
    font-family: Lato;
  z-index: 6;
}
.dark header .logo {
	filter: invert()
}
header nav {
	/*display: none;*/
	transform-origin: top;
	/*transform: translateY(-100%);*/
	opacity: 0;
	transition: opacity 400ms;
	/*height: 14em;*/
	position: fixed;
	top: 3em;
	right: 20px;
	border-radius: 4px;
	/*width: 100vw;*/
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: var(--main-bg);
	box-shadow: 0px 0px 8px 1px #1112;
}
header nav.active {
	opacity: 1;
	/*transform: translateY(0%);*/
}

header nav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	/*grid-gap: 40px;*/
}
.btn_set {
	display: flex;
	grid-gap: 10px;
}
header nav ul li {
	position: relative;
	padding: 5px 20px;
	cursor: pointer;
	font-size: 1.1em;
	/*border-bottom: 1px solid #6666;*/
	/*background: #bbb1;*/
}
header nav ul li:hover::before {
	content: "";
	position: absolute;
	bottom: 5px;
	left: 0;
	right: 0;
	background: var(--primary-color);
	/*filter: brightness(90%);*/
	z-index: -1;
	height: 7px;

}

.menu-btn {
	width: 30px;
	height: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	/*background: #000;*/
	transition: transform 400ms;
	transform: rotate(0deg);
}
.menu-btn-lines {
	width: 100%;
	height: 3px;
	background: #000;
	border-radius: 100px;
	transition: all 300ms;
}

.menu-btn.active {
	transform: rotate(-180deg);
	/*height: 10px;*/
	/*justify-content: center;*/
}
.active .menu-btn-lines:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.active .menu-btn-lines:nth-child(2) {
	width: 3px;
}
.active .menu-btn-lines:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}
.active .menu-btn-lines {
	width: 100%;
	height: 3px;
	background: #000;
	border-radius: 1000px;
}
.logo img {
	filter: hue-rotate(180deg);
}

 header.small {
	/*height: 6vh;*/
	background: var(--primary-color)
}

button,.button {
	border: none;
	margin: 10px 0;
	border-radius: 2px;
	font-size: 0.9em;
	background: var(--button-active);
	padding: 10px 3em;
	box-shadow: 2px 2px 10px 1px #1111
}
a.button {
	display: inline-block;
	margin-top: 20px;
	align-self: center;
	text-decoration: none;
	color: #000;

}
button:hover, .button:hover {
	
filter: brightness(105%);
}
button:active, .button:active {
	filter: brightness(96%);
	}

h1 {
	font-size: 3.07em;
}
h2 {
	font-size: 2.47em;
}
.highlight-text {
	position: relative;
	display: inline-block;
}
.highlight-text::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: -1;
	background: var(--primary-color);
	padding: 5px 10px;
}
section {
	margin-top: 20px;
	text-align: center;
	padding: 0 1em;
}

#hero {
	margin-top: 0;
	background-color: var(--primary-color);
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url("img/bg4.svg");
	background-repeat: no-repeat;
	overflow: hidden;
	/*clip-path: url(#waveSvg)*/
}

.hero_text {
	flex: 1;
	display: flex;
	flex-direction: column;
	grid-gap: 10px;
	align-items: center;
}

.hero_img {
	position: relative;
	/*left: 10px;*/
	/*flex: 1;*/
	height: 40%;
	width: 80%;
	/*overflow: hidden;*/
	display: flex;
	justify-content: center;
	align-items: flex-end;
	/*padding-left: 100px;*/
	padding-bottom: 100px;

	/*background: #000*/
}

.hero_img img{
	position: relative;
	left: 5px;
	top: 70px;
	filter: drop-shadow(8px 10px 4px #0008);
	/*background: #000;*/
	transform: scale(0.7);
	/*width: 2000px;*/
}
#hero {
	flex-direction: column-reverse;
	grid-gap: 20px;
	background-size: 200%;
	background-position: -300px -10px;
}

.hero_img {
	width: 100%;
	padding-bottom: 0;
	/*position: absolute;*/
	/*z-index: -1;*/
}

#highlights {
	text-align: center;
}

.highlights_nav {
	display: flex;
	justify-content: center;
	margin: 10px 0;
	grid-gap: 10px;
	padding: 10px;
	width: 100%;

}

.highlights_slides {
	display: inline-flex;
	grid-gap: 20px;
	max-width: 90vw;
	overflow: hidden
}
/*
.order {
	min-width: 400px;
}*/

.nav_item {
	padding: 1em 10px;
	background-color: var(--button-active);
	flex: 1;
	filter: grayscale(100%);
	transition: filter 300ms;
}
.nav_item:hover {
	filter: grayscale(80%);
}

.nav_item-active,.nav_item-active:hover {
	filter: grayscale(0%);
}


.order {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-gap: 20px;
	padding: 20px;
}

.order_img {
	height: 140px;
	width: 140px;
	/*background-color: #777;*/
	/*background: url("burger.jpg");
	background-position: 0px;
	background-size: 120px;
	background-repeat: no-repeat;*/
}


.order_info {
	text-align: left;
}
#menu {
	text-align: center;
	/*display: flex;*/
	grid-gap: 30px;
	align-items: center;
	padding: 10px;
}

.menu-set {
	margin-top: 30px;
}

.menu-list {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 45% 45%;
	justify-content: center;
	align-items: center;
	grid-gap: 15px;
	list-style: none;
}

.menu-item {
	/*background: #999;*/
	display: flex;
	flex-direction: column;
	align-items: center;
}

.menu-item-img {

	width: 120px;
	height: 120px;
	margin-bottom: 10px;
}

#contact {
	padding: 50px 1em;
}

.contact-info {
	padding: 30px;

}
.contact-info div {
	display: flex;
	grid-gap: 15px;
	justify-content: center;
	background: /*#000*/;
}
#contact form {
	display: flex;
	flex-direction: column;
	padding: 0 10%;
	grid-gap: 10px;
}
#contact form label {
	display: flex;
	flex-direction: column;
	text-align: left;
}

#contact form label p {
	margin-bottom: 5px;
}

#contact form button {
	
}


input, textarea {
	padding: 10px;
	resize: none;
	caret-color: var(--primary-color) ;
	caret-shape: block;
	font-family: var(--font);
}
input:focus, textarea:focus {
	outline-color: var(--primary-color)

}
footer {
	display: flex;
	grid-gap: 70px;
	justify-content: center;
	align-items: center;
	height: 8vh;
}

footer span svg {
	fill: #000;
        transition: fill 400ms;
}
footer span:hover svg {
	fill: var(--primary-color);
}
@media (min-width: 640px) {
h1 {
	font-size: 3.47em;
}
		header {
			
			height: 15vh;
			padding: 10px 4em;
		}
		header.small {
			height: 9vh;
		}

		.highlights_nav {
				padding: 0 16vw;
			}
			#hero {
				justify-content: start;
				text-align: left;
				flex-direction: row;
				background-size: 100%;
				grid-gap: 0;
				padding-right: 0;
	/*With bg4*/
	background-position: 90px -210px;
			}
			.hero_img {
				padding: 0;
					flex: 1;
					left: 0px;
					top: 10px;
					transform: scale(1);
					height: 80%;
					overflow: hidden;
					display: flex;
					justify-content: center;
					align-items: center;
					/*padding-left: 100px;*/
					padding-bottom: 100px;

					/*background: #000*/
				}
				.hero_img img {
					position: relative;
					left: 100px;
					width: 550px;
				}
			.hero_text {
				text-align: left;
				align-items: start;
			}

			section {
				padding: 0 4em;
			}

			.menu-list {
				  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			
			}

			#contact form {
				/*padding: 0 16vw;*/
				max-width: 700px;
				margin: 0 auto ;
			}

		}
@media (min-width: 800px) {
			header nav {
				transform: scaleY(1);
				height: unset;
				width: unset;
				position: static;
				background: unset;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		header nav ul {
			flex-direction: row;
		}

		header nav ul li {
			font-size: 1em;
		}

		header .menu-btn {
				display: none;
		}
		.hero_img {
				
					transform: scale(1.3);
}
.hero_img img{
					top: 5px;
					left: -40px;
				}
}
		@media (min-width: 640px) {}

/*	UTILITIES */

.fade-out {

}

.fade-in {
	animation: fadeIn 1s forwards;
}

@keyframes fadeOut {
	to {
		opacity: 0;
		transform: translateY(3px);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
}