/* CSS Document */

/*Responsive Image Styling*/

img {
	max-width: 100%;
    height: auto;
	}

/* Page Styling */

#wrapper {
	max-width: 1134px;
	height: 150px;
	margin: 0 auto;
}

/*Header Styling */

header img {
	float: left;
	}

/* Navigation Styling */

nav {
	float: right;
	}

nav ul {
	list-style: none;
	text-align: center; 
	padding: 0;
	margin: 0;
	}

nav li {
	font-family: 'Athelas', serif;
	font-size: 1.4em;
	display: inline;
	float: left;
	}

nav a {
	text-decoration: none;
	color: #be1e2d;
	display: block;
	padding: 40px 16px 40px 16px;
	}

nav a:hover {
	color: #ef4e22;
	}

.hero img {
	padding: 10px 0;
	}

/*Footer Styling */

#social-media {
	margin: 0 auto;
  	max-width: 300px;
	display: block;
	}

#social-media ul {
	padding: 0;
	}
	
#social-media li {
	display: inline;
	padding: 0 20px 0 20px;
	}

/*  3 Column Grid Styling */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; }

.group:before, .group:after {
	content:"";
	display:table;
	}
	
.group:after {
	clear:both;
	}
	
.group {
    zoom:1; /* For IE 6/7 */
	}

.span_3_of_3 {
	width: 100%;
	}
	
.span_2_of_3 {
	width: 66.1%;
	}
	
.span_1_of_3 {
	width: 32.2%;
	}

.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 49.2%;
}

/*Menu Items Styling*/

.menu p {
	text-align: center;
	font-style: italic;
	margin: 0;
	}

.menu h6 {
	text-align: Center;
	color: #41393d;
	font-size: 1.5em;
	margin: 10px;
	}

/*Experience Styling*/

.experience img {
	display: block;
	margin: 0 auto;
	}
	
p {
	font-family: 'Athelas', serif;
	color: #41393d;
	font-size: 1.3em;
	text-align: justify;
	}

h1 {
	font-family: 'Athelas', serif;
	color: #be1e2d;
	font-size: 3em;
	text-align: center;}

/*Reservation Styling*/

.reservation {
	text-align: center;
	font-family: 'Athelas', serif;
	font-size: 1.2em;
	}

/*Location Styling*/

.location p {
	text-align: center;
	}

/*Media Queries */

@media (max-width: 915px){
	
	header img {
		max-width: 100%;
		height: auto;
		float: none;
		display: block;
		margin: 0 auto;
	}
	
	nav {
		display: block;
		float: none;
	}
	
	nav li {
		float: none;
		display: inline-block;
	}
	
	nav a {
		padding: 5px 16px 0 16px;
	}
	
	.button {
		font-size: 2em;
		margin: auto;
	}
		.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
}	


@media (max-width: 555px){
	
	nav li {
		display: block;
		border-bottom: 1px solid #8a8c8f;
	}
	
	.button {
		font-size: 1.5em;
	}
	
	.cta {
		position: static;
		margin: 10px auto;
		display: block;
		padding-bottom: 10px;
	}
	
	.col {
		margin: 1% 0 1% 0%;
	}
		
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { 
		width: 100%; 
	}
}

@media (max-width: 370px){
	#social-media {
		margin: 0 auto;
  		max-width: 50px;
		display: block;
	}
	
	#social-media li {
		padding: 10px 0 10px 0;
		display: block;
		float: none;
		margin: 0 auto;
	}
}