/* CSS Document */
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed|Oswald:400,400');
@import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC&display=swap');
/* 
	 ______    _                     _          _____      _               _   _               _____          
	|  ____|  | |                   | |        / ____|    | |             | | (_)             |  __ \         
	| |__   __| |_   _  __ _ _ __ __| | ___   | (___   ___| |__   __ _ ___| |_ _  __ _ _ __   | |__) |_ _ ____
	|  __| / _` | | | |/ _` | '__/ _` |/ _ \   \___ \ / _ \ '_ \ / _` / __| __| |/ _` | '_ \  |  ___/ _` |_  /
	| |___| (_| | |_| | (_| | | | (_| | (_) |  ____) |  __/ |_) | (_| \__ \ |_| | (_| | | | | | |  | (_| |/ / 
	|______\__,_|\__,_|\__,_|_|  \__,_|\___/  |_____/ \___|_.__/ \__,_|___/\__|_|\__,_|_| |_| |_|   \__,_/___|
	
*/
*{margin:0;}
#content-desktop {display: block;}
#content-mobile {display: none;}
a { font-size:1vw; font-family: 'Barlow Condensed', sans-serif; color:black; font-weight:400; text-transform: uppercase; }
body {font-family: 'Barlow Condensed', sans-serif; color:black; font-weight:400;}
.current{font-size: 100%; 
		font-family: 'Barlow Condensed', sans-serif; 
		color: orange; 
		font-weight: 400; 
		text-transform: uppercase; 
		border: none;
		background-color: white;
		text-decoration: underline;
	}
/* 	Button Styles */
	.home-button, .about-button, .menu-button, .locations-button, .contact-button {
		font-size: 100%; 
		font-family: 'Barlow Condensed', sans-serif; 
		color: black; 
		font-weight: 400; 
		text-transform: uppercase; 
		border: none;
		background-color: white;
	}
	.locations-dropdown, .menu-dropdown {
		position: relative;
		display: inline-block;
	}
	.ldropdown-content, .mdropdown-content {
		display: none;
		position: absolute;
		background-color: white;
		min-width: 8.34vw;
		box-shadow: 0vw .42vw .84vw 0vw rgba(0,0,0,0.2);
		z-index: 1;
	}
	.ldropdown-content a, .mdropdown-content a{
		color: black;
		padding: .625vw .84vw;
		text-decoration: none;
		display: block;
		text-align: left;
	}
	.home-button:link, .about-button:link, .contact-button:link  {text-decoration: none; color: black;}
	.home-button:visited, .about-button:visited, .contact-button:visited {text-decoration: underline; color: black;}
	.home-button:hover, .about-button:hover, .menu-dropdown:hover .menu-button, .locations-dropdown:hover .locations-button, .contact-button:hover   {text-decoration: underline; color:orange;}
	.home-button:active, .about-button:active, .contact-button:active {text-decoration: underline; color:orangered;}
	.mdropdown-content a:hover, .ldropdown-content a:hover  {background-color: orange; text-align: center;}
	.menu-dropdown:hover .mdropdown-content, .locations-dropdown:hover .ldropdown-content {display: block;}


#content {display: block; height: auto; width: 100%; overflow: auto;  padding: 0%;}
		img{width:100%; height:auto;}
		iframe {width:100%; height:100%; float: right;}
		.coverphoto {overflow:auto;}
		.cover{width:100%; height:auto; float:left; position: relative;}
		.information {overflow:auto; width:100%;}
		.info {width:100%; height:auto; background-color:white; float:left;}
		.info h1 {padding: 3vw 5vw 3vw 5vw;text-transform:capitalize; font-size:5vw;text-align: left; font-family: 'Bowlby One SC', sans-serif;}
		.info p {padding: 0vw 5vw 5vw 5vw; font-size:20px;text-align: justify;}
		.locations {overflow:auto; display: flex;}
		.serviceinfo {width:100%; float:left; background-color: white;} 
		.serviceinfo h1 {padding: 3vw 5vw 3vw 5vw;text-transform:capitalize; font-size:4vw; text-align: center; font-family: 'Bowlby One SC', sans-serif;}
		.serviceinfo p {padding: 0vw 5vw 5vw 5vw; font-size:20px;text-align: center;}
		.serviceinfo img {width: 27.5%; padding:0vw 1vw 5vw 1vw;}
		.map {width:100%; float:right; position: relative; height: auto;}
		.map iframe {position: absolute;top: 0; left: 0;width: 100% !important; height: 100% !important;}
		.food {width: 100%; padding: 50px 0; text-align: justify; background-color: white;}
		.food h1 {padding: 0vw 5vw 3vw 5vw;text-transform:capitalize; font-size:5vw;text-align: center; font-family: 'Bowlby One SC', sans-serif;}
		.food img{width:100%;} 
		table {padding:5vw; vertical-align: top; border: none;}
		th, td {border: none; padding: 2vw;}
footer {height:5vw; width: 100%; background: black;}
	.icons {
		float: right;
		padding-right: 1.3vw;
		padding-top: 1.7vw;
	}
	.icons i {
		margin: 0 1.5vw;
		color: white;
		font-size: 1.5vw;
	}
/* -- Desktop -- */
@media (min-width: 1025px){
	header {height:5vw; width: 100%; background: white; }
	#logo{width: 20vw; float: left; padding-left: 3vw;  padding-top: .5vw;}
	nav{width: 75%; float: left; padding-top: .5vw; text-align: right;}
	ul {list-style-type:none; padding-left:0;}
	li {display:inline-block;}
	li a {background-color:white; display:block; text-align:center;  padding-top:1.3vw;padding-left:5vw;}
}
/* -- Tablet -- */
@media (min-width: 768px) and (max-width: 1024px){
	header {height:20vw; width: 100%;  background: white; }
	#logo{ display: block; margin-left: auto; margin-right: auto; width: 50%; padding-top: 1.5vw}
	nav{width: 100%; height:5vw; text-align: center; background-color: white;}
	a { font-size:2vw;}
	ul {list-style-type:none; }
	li {display:inline-block;}
	li a {background-color: white; display: inline-block; text-align: center; padding: 2.5vw 7vw 3vw 2vw;}
	footer {height:10vw; width: 100%; background: black;}
	.icons {
		float: right;
		padding-right: 2vw;
		padding-top: 3.5vw;
	}
	.icons i {
		margin: 0 1.5vw;
		color: white;
		font-size: 3vw;
		padding-right: 2vw;
	}
	.ldropdown-content a, .mdropdown-content a{
		padding: 1.5vw 2vw;
	}
}
/* -- Mobile -- */
@media (max-width: 767px){
	#content-desktop {display: none;}
	#content-mobile {display: block;}
	header {height:20vw; background: white;}
	.info h1 {padding: 10vw 5vw 5vw 5vw;text-transform:capitalize; font-size:10vw;text-align: center; font-family: 'Bowlby One SC', sans-serif;}
	.info p {padding: 5vw 5vw 15vw 5vw; font-size:20px;text-align: justify;}
	.serviceinfo h1 {padding: 5vw 5vw 3vw 5vw;text-transform:capitalize; font-size:10vw; text-align: center; font-family: 'Bowlby One SC', sans-serif;}
	.serviceinfo p {padding: 5vw 5vw 10vw 5vw; font-size:20px;text-align: center;}
	.serviceinfo img {width: 27.5%; padding:0vw 0vw 7vw 2vw;}
	.food h1 {padding: 0vw 5vw 3vw 5vw;text-transform:capitalize; font-size:10vw;text-align: center; font-family: 'Bowlby One SC', sans-serif;}
	#logo{width: 80%; float: left; padding-left: 3%; padding-top: 1.5vw;}
	footer {height:20vw; width: 100%; background: black;}
	.icons {
		float: right;
		padding-right: 1vw;
		padding-top: 6vw;
	}
	.icons i {
		margin: 0 1.5vw;
		color: white;
		font-size: 7vw;
		padding-right: 3.5vw;
	}
	.ldropdown-content a, .mdropdown-content a{
		padding: 10vw 20vw;
	}
	a { font-size:7vw;}
	.home-button, .about-button, .menu-button, .locations-button, .contact-button {
		font-size: 7vw; 
		font-family: 'Barlow Condensed', sans-serif; 
		color: white; 
		font-weight: 400; 
		text-transform: uppercase; 
		border: none;
		background-color: orange;
	}
	.ldropdown-content, .mdropdown-content {
		display: none;
		position: absolute;
		background-color: orange;
		min-width: 50vw;
		box-shadow: 0vw 0vw 0vw 0vw rgba(0,0,0,0);
		z-index: 1;
	}
	.mdropdown-content a, .ldropdown-content a{
		color: white;
		padding: 2vw .84vw;
		text-decoration: none;
		display: block;
		text-align: left;
	}
	.mdropdown-content a:hover, .ldropdown-content a:hover  {background-color: orange; text-align: left;}
	.home-button:hover, .about-button:hover, .menu-dropdown:hover .menu-button, .locations-dropdown:hover .locations-button, .contact-button:hover  {text-decoration: none; color:white;}
}
/* -- Sidebar Menu -- */
	.slideout-sidebar {
		position: fixed;
	  	top: 0;
	  	right: -100vw;
	  	z-index: 0;
	  	width: 35vw;
	  	height: 100%;
	  	padding: 5vw;
	  	background-color: orange;
	  	transition: all 50ms ease-in-out;
	}
	.slideout-sidebar ul {
	  	list-style: none;
	 	margin: 0;
	 	padding: 0;
	}
	.slideout-sidebar ul li {
	  	cursor: pointer;
	  	padding: 5vw 0;
	  	border-bottom: .3vw solid rgba(244,244,244,0.4);
	  	color: white;
	}
	.slideout-sidebar ul li:last-child {
	  	border-bottom: 0;
	}
	
/* -- Hamburger Menu Icon -- */
	#menu-toggle {
	  	display: none;
	}
	#menu-toggle2 {
	  	display: none;
	}
	.menu-icon {
	  	position: absolute;
	  	top: 4vw;
	  	right: 0vw;
	  	font-size: 6vw;
	  	z-index: 1;
	  	transition: all 50ms ease-in-out;
	}
	.menu-icon i {
		display: inline-block;
	    width: 12vw;
	    height: 12vw;
	    line-height: 12vw;
	    text-align: center;
		color: white;
		background-color: orange;
	}

/*-- Toggle Function --*/
	#menu-toggle:checked ~ .slideout-sidebar {right: 0vw;}
	#menu-toggle:checked + .menu-icon{right: 0vw;}
 
/*	Contact Form   */
*{ /*	SELECTOR FOR ALL ELEMENTS!!!   */
  padding: 0;
  outline: none;
  font-family: 'Barlow Condensed', sans-serif;
}

.contact-form{
  display: flex;
  max-width: 80%;
  margin: 0 auto;
  padding: 0vw 0vw 5vw 0vw;
  box-sizing: border-box;
}
 
.input-fields{
  display: flex;
  flex-direction: column;
  margin-right: 5%;
  box-sizing: border-box;
}
 
.input-fields,
.msg{
  width: 60%;
  box-sizing: border-box;
}
 
.input-fields .input,
.msg textarea{
  margin: .7vw 0;
  background: transparent;
  border: 0vw;
  border-bottom: 2px solid orange;
  padding: 10px;
  color: black;
  width: 100%;
  font-size: 100%;
  box-sizing: border-box;
}
 
.msg textarea{
  height: 20vw;
  box-sizing: border-box;
}
 
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: orange;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: orange;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: orange;
}
 
.send-button {
    background: orangered;
    text-align: center;
    padding: 15px;
    border: none;
	border-radius: 5px;
	width: 100%;
    color: white;
    cursor: pointer;
    text-transform: uppercase;
	font-size: 17px;
}
/*Form Layout for Mobile*/
@media screen and (max-width: 768px){
  .contact-form{
    flex-direction: column;
  }
  .msg textarea{
    height: 30vw;
  }
  .input-fields,
  .msg{
    width: 100%;
  }
}
/*Scroll Menu*/
div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu button {
  display: inline-block;
  background-color: #333;
  color: white;
  font-size: 100%;
  text-transform: uppercase; 
  text-align: center;
  border: none;
  padding: 2vw;
  text-decoration: none;
}

div.scrollmenu button:hover {
  background-color: #777;
}

.current2{
		background-color: #777;
}