/*
Theme Name: 308
Theme URI: http://www.proofbranding.com
Author: Proof Branding
Author URI: http://proofbranding.com
Description: 2015 Theme for 308
Version: 1.0
*/

/**
 * CUSTOM ICONS
 */
@charset "UTF-8";

@font-face {
  font-family: "untitled-font-3";
  src:url("fonts/untitled-font-3.eot");
  src:url("fonts/untitled-font-3.eot#iefix") format("embedded-opentype"),
    url("fonts/untitled-font-3.ttf") format("truetype"),
    url("fonts/untitled-font-3.svg") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "untitled-font-3" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "untitled-font-3" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-peanut:before {
  content: "a";
}
.icon-cassette:before {
  content: "c";
}
.icon-bug:before {
  content: "d";
}
.icon-fox:before {
  content: "b";
}

@font-face {
  font-family: 'CircularStd-Book';
  src: url('fonts/CircularStd-Book.eot') format('embedded-opentype'),  url('fonts/CircularStd-Book.otf')  format('opentype'),
	     url('fonts/CircularStd-Book.woff') format('woff'), url('fonts/CircularStd-Book.ttf')  format('truetype'), url('fonts/CircularStd-Book.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CircularStd-Bold';
  src: url('fonts/CircularStd-Bold.eot') format('embedded-opentype'),  url('fonts/CircularStd-Bold.otf')  format('opentype'),
	     url('fonts/CircularStd-Bold.woff') format('woff'), url('fonts/CircularStd-Bold.ttf')  format('truetype'), url('fonts/CircularStd-Bold.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}


*, *:focus { outline: none!important; }

html, body {
	height: 100%;
}

body {
	font-family: 'CircularStd-Book', sans-serif;
	/*overflow-x: hidden!important;*/
}

/**
 * HEADER
 */
#header {
	position: fixed;
	top: 20px;
	width: 100%;
	z-index: 9;
}
#mobile-menu-button {
	display: none;
}
	/**
	 * LOGO
	 */
	#logo {
		margin-bottom: 80px;
	}
		#logo a {

		}
			#logo img {

			}
	/**
	 * NAV
	 */
	#header-nav {
		text-align: center;
	}
		#header-nav ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
			#header-nav ul li {
				background: url('img/menu_border.png') right bottom no-repeat;
				display: inline-block;
				margin: 0 40px 0 0;
				padding: 0 40px 0 0;
			}
			#header-nav ul li:last-child {
				background: transparent;
				margin: 0;
			}
				#header-nav ul li a,
				#header-nav ul li a:active,
				#header-nav ul li a:visited,
				#header-nav ul li a:focus {
					color: #fff;	
					text-decoration: none;
					-moz-transition: all ease .5s;
					-ms-transition: all ease .5s;
					-o-transition: all ease .5s;
					-webkit-transition: all ease .5s;		
					transition: all ease .5s;
				}
				#header-nav ul li a:hover {
					color: #fff;
				}
				#header-nav ul li a i {
					font-size: 50px;
					line-height: 0;
				}
				#header-nav ul li a .nav-name {
					color: #fff;
					display: inline-block;
					font-size: 15px;
					letter-spacing: 4px;
					position: relative;
					text-transform: uppercase;
					width: 100%;
				}

				#header-nav ul li a.active .nav-name:after {
					background: #808080;
					content: "";
					display: block;
					height: 5px;
					margin: 10px auto 0;
					position: absolute;
					width: 100%;
				}

				#header-nav.dark ul li a,
				#header-nav.dark ul li a:active,
				#header-nav.dark ul li a:visited,
				#header-nav.dark ul li a:focus {
					color: #828282;
				}
				#header-nav.dark ul li a .nav-name {
					color: #000;
				}				
/**
 * MAIN
 */
#main-content {
	display: table;
	height: 100%;
	width: 100%;	
}

#footer {
	bottom: 0;
	color: #fff;
	display: none;
	left: 0;
	padding: 0 128px;
	position: fixed;
	width: 100%;
}
	#footer-left,
	#footer-right {
		float: left;
		padding: 20px;
		width: 50%;
	}
	#footer-right {
		text-align: right;
	}
		#footer a,
		#footer a:active,
		#footer a:visited,
		#footer a:focus {
			text-decoration: underline;		
		}

/**
 * SECTIONS/PAGES
 */
.panel-308 {
	background-position: center top;
	background-repeat: no-repeat;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	display: table;
	height: 100%;
	width: 100%;
}
	.panel-inner {
		display: inline-block;
		width: 100%;
	}
	.center-content {
		text-align: center;
		vertical-align: middle;
	}

#panel-308-1 {
	background-color: #000;
	background-image: url('img/panel_1_large.jpg');
	text-align: center;
	vertical-align: middle;
}

#panel-308-2 {
	background: #fff;
}
	#hours-wrap {
		background: url('img/panel_2_large.png') center center no-repeat;
		display: table;
		height: 553px;
		margin: 100px auto 0;
		width: 814px;
	}
		.hours-text {
			color: #fff;
			display: table-cell;
			font-size: 18px;
			text-align: center;
			text-transform: uppercase;
			vertical-align: middle;
			width: 33.333333%;
		}
		#hours-wrap img {
			
		}
#panel-308-3 {
	background-color: #000;
	background-image: url('img/panel_3_large.jpg');
	position: relative;
	text-align: center;
	vertical-align: middle;
}	
	#sorry-wrap {
		border-image: none;
		border-right: 0.6vw solid #fff;
		border-style: none solid solid none;
		border-width: 0 0.6vw 0.6vw 0;
		color: #fff;
		height: 28.5vw;
		padding: 20px 40px 40px;
		position: absolute;
		right: 6.1vw;
		text-align: left;
		top: 21vw;
		width: 60vw;
	}
	#sorry-wrap:before {
		background: #fff;
		bottom: 0;
		content: "";
		height: 20%;
		left: 0;
		position: absolute;
		width: 0.6vw;
	}
		#sorry-wrap-inner {
			float: right;
			height: 90%;
			overflow-y: scroll;
			width: 60%;
		}
			#sorry-scroll-btn {
				background: url('img/arrow.png') center center no-repeat;
				border: 0;
				clear: both;
				display: block;
				float: right;
				height: 20px;
				margin: 3% 30% 0 0;
				text-indent: -9999px;
				width: 20px;
			}
		.sorry-item {
			border-bottom: 1px solid #fff;
			margin-bottom: 20px;
		}
			.sorry-item h4 {
				font-size: 20px;
				text-transform: uppercase;
			}
			.sorry-item-date {
				font-size: 15px;				
			}
			.sorry-item p {
				font-size: 16px!important;
				margin-bottom: 20px;
			}
#panel-308-4 {
	background-color: #000;
	background-image: url('img/panel_4_large.jpg');	
	padding: 60px 150px 40px;
	text-align: center;
	vertical-align: bottom;
}
	#press-wrap {
		border: 5px solid #fff;
		color: #fff;
		font-size: 16px;
		padding: 40px 40px 40px;
		text-align: left;
	}
		#press-wrap h3 {
			border-bottom: 2px solid #fff;
			font-size: 20px;
			font-weight: 300;
			padding-bottom: 10px;
			text-transform: uppercase;			
		}
		#press-logos {
			margin: 0 auto;
			text-align: center;
			width: 80%;
		}
			#press-logos a:hover {
				opacity: .5;
			}
			#press-logos img {
				margin: 10px;
			}

#menu-wrap {
	background: #fff url('img/menu_background.jpg') top center no-repeat;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;	
	display: none;
	height: 100%;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}
	#menu-close {
		background: transparent;
		border: 0;
		font-family: 'CircularStd-Bold';
		font-size: 24px;
		position: absolute;
		right: 20px;
		top: 20px;
	}
	#menu-sidebar {
		background: #fff;
		display: table;
		float: left;
		padding: 20px;
		height: 100%;
		width: 20%;
	}
		#menu-sidebar-header {
			text-align: center;
		}
			#menu-sidebar-header i {
				font-size: 100px;
				line-height: 0;
			}
			#menu-h3 {
				margin: -40px 0 20px 0;
				text-align: center;
				text-transform: uppercase;
			}
		#menu-nav {

		}	
			#menu-nav ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}
				#menu-nav li {
					margin-bottom: 15px;
					text-align: center;
				}
					#menu-nav li a,
					#menu-nav li a:active,
					#menu-nav li a:visited,
					#menu-nav li a:focus {
						border-bottom: 5px solid #fff;
						color: #808080;			
						font-size: 17px;	
						outline: none!important;					
						padding-bottom: 5px;				
						text-transform: uppercase;
					}
					#menu-nav li a:hover,
					#menu-nav li a.menu-active {
						border-bottom: 5px solid #808080;
						text-decoration: none!important;
					}
	#menu-content {
		background: transparent;
		display: table;
		float: left;
		height: 100%;
		padding: 40px;
		width: 80%;
	}
		h2.sep-h2 {
			border-bottom: 1px solid #404040;
			margin-bottom: 20px;
		}	
		#menu-content-inner {			
			height: 90vh;
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
		}
			.menu-section {
				display: none;
			}
				.menu-section-header {
					height: auto;
			
					margin-bottom: 40px;
					max-width: 100%;
					width: 100%;
				}
				.menu-wrap-row {
					overflow: hidden;
				}
				.drink-type {
					margin-bottom: 40px;
					padding-left: 0;
					padding-right: 30px;
				}
					.drink-type-name {
						font-size: 18px;
						font-weight: 700;
						margin-top: 0;
						text-transform: uppercase;
					}
					.drink-types {

					}
						.drink {
							font-size: 18px;
						}
							.drink-left {
								display: inline-block;
								font-weight: 700;
								margin-right: 10px;
							}
							.drink-name {
								display: inline-block;
							}
						.drink.highballs {
							padding-left: 0;
						}
							.drink.highballs .drink-name {
								font-weight: 700;
							}
							.drink.highballs .drink-info {
								font-size: 16px;
							}
				.food {
					margin-bottom: 20px;
					overflow: hidden;
				}
					.food-price {
						float: left;
						font-size: 21px;
						line-height: 1;
						margin-right: 1%;
						width: 4%;
					}
					.food-info {
						float: left;
						width: 95%;
					}
						.food-info h3 {
							font-size: 21px;
							font-weight: 900;
							margin-top: 0;
							text-transform: uppercase;
						}
				#happy-hour h2 {
					text-transform: uppercase;
					margin-bottom: 20px;
				}
/**
 * Links
 */
a,
a:active,
a:visited,
a:focus {
	color: #fff;
	-moz-transition: all ease .25s;
	-ms-transition: all ease .25s;
	-o-transition: all ease .25s;
	-webkit-transition: all ease .25s;		
	transition: all ease .25s;
}

a:hover,
.current-menu-item a,
a.read-more {
	color: #aaa;
	text-decoration: none!important;
}

a.read-more:hover {
	color: #000;
}

/**
 * Headers
 */
h1, h2, h3, h4, h5, h6 {

} 

/**
 * Other
 */
.alignright  { float: right; margin: 0 0 20px 20px; }
.alignleft   { float: left; margin: 0 20px 20px 0; }
.aligncenter { text-align: center; }

.full-width-video iframe { width: 100%; }

@media only screen and (min-width: 0px) and (max-width: 768px) {
	.break {
		color: rgba(0,0,0,0);
		display: block;
		height: 0;
	}
}

.mobile-only {
	display: none;
}
@media only screen and (min-width: 0px) and (max-width: 1129px) {
	.mobile-only {
		color: #fff;
		display: block;
		margin-bottom: 0;
		margin-left: 20px;
		text-align: left;
	}
}


/**
 * Mobile Nav
 */
	.hamburger {
		display: none;
		position: absolute;
		right: 10px;
		text-align: right;
		top: 10px;
		z-index: 9999;		
	}
		.hamburger img {}
		.nav-button.hamburger { position: relative!important; left: 0; }
	#hamburger-nav {
		background: #222;
		display: none;
		overflow: hidden;
	}
		#hamburger-nav .nav-button {
			border: 0!important;
			color: #fff;
			display: block;
			font-size: 18px;
			margin: 0;
			padding: 20px;
			text-align: left;
			text-decoration: none!important;
			width: 100%;				
		}

/**
 * FORMS
 */
.ninja-forms-cont { margin: 20px 0; }
.ninja-forms-required-items { display: none; }
.ninja-forms-field-error { color: red; }

input[type="text"].ninja-forms-field,
textarea.ninja-forms-field {
	background: #e6e9eb;
	border: 2px solid #09262d;
	border-radius: 5px;	
	padding: 10px;
	-moz-transition: all ease .25s;
	-ms-transition: all ease .25s;
	-o-transition: all ease .25s;
	-webkit-transition: all ease .25s;		
	transition: all ease .25s;	
}
	input[type="text"].ninja-forms-field:focus,
	textarea.ninja-forms-field:focus {
		background: #fff;
		border-color: #C7A900;
	}

input[type="submit"].ninja-forms-field {
	background: #7d99a0;
	border: 6px solid #09262d;
	border-radius: 5px;
	color: #09262d;
	font-family: 'Dosis', sans-serif;
	font-size: 30px;
	font-weight: 700;	
	padding: 10px 60px;
	text-transform: uppercase;
	-moz-transition: all ease .25s;
	-ms-transition: all ease .25s;
	-o-transition: all ease .25s;
	-webkit-transition: all ease .25s;		
	transition: all ease .25s;	
}
input[type="submit"].ninja-forms-field:hover {
	background: #09262d;
	color: #fff;
}
.field-wrap.label-left .ninja-forms-field,
.field-wrap.label-left .ninja-forms-star-rating-control {
	margin-left: 0!important;
}

/**
 * COMMENTS
 */
.comments { margin: 40px 0; }
	.comments h2 { font-size: 18px; }
	.comments ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.comments ul.children {}
		.comments ul li.comment {
			border-bottom: 1px dashed #BBBBBB;
			border-top: 1px dashed #BBBBBB;
			font-size: 14px;
			padding: 20px 0;
		}
		.comments ul.children li.comment {
			border: 0;
			border-left: 5px solid #ccc;
			margin: 20px 20px 0 20px;
			padding-left: 20px;
		}
		.comments ul.children li.comment.bypostauthor { border-color: #C7A900; }
		.comments ul li.comment a,
		.comments ul li.comment a:active,
		.comments ul li.comment a:visited {
			color: #2A5662;
		}
		.comments ul li.comment a:hover { color: #2A5662; }
			.comment-body {}
				.comment-author {}
					.avatar { float: right; }
					.fn { font-weight: 400; }
					.says { display: none; }
				.comment-meta { margin: 10px 0; }
				.comment-body p {}
#respond { margin-top: 40px; word-wrap: break-word; }
	#respond code { white-space: normal!important; }
	#respond label { display: block; }
	#respond textarea,
	#respond input[type="text"] { width: 100%; }

	.form-allowed-tags { display: none; }

::selection {
  background: #fff;
  color: #000;
}
::-moz-selection {
  background: #fff;
  color: #000;
}

@media only screen and (min-width: 0px) and (max-width: 1130px) {

	body {
		overflow: auto!important;
	}

	#header-nav {
		display: none;
	}
	#logo img {
		max-width: 400px;
		width: 90%;
	}

	.panel-308 {
		display: table;
		height: 100%;
	}

	.panel-inner {
		display: table-cell;
		height: 100%;
	}
	.fp-tableCell .panel-inner {
		display: inline;
	}

	#panel-308-2 {
		background: #fff url('img/mobile_hours.gif') center center no-repeat;
		-webkit-background-size: 100%;
		   -moz-background-size: 100%;
		    -ms-background-size: 100%;
		     -o-background-size: 100%;
		        background-size: 100%;
	}
		#hours-wrap {
			background: none;
			display: table;
			height: auto;
			margin: 0;
			width: 100%;
		}
			.hours-text {
				display: inline-block;
				margin-bottom: 20px;
				width: 100%;
			}
			.hours-text:last-child {
				margin-bottom: 0;
			}
	#panel-308-3 {
		background-color: #000;
		background-image: url('img/mobile_sorry.jpg');
		position: relative;
		text-align: center;
		vertical-align: middle;
	}
	#panel-308-3 .fp-tableCell {
		vertical-align: top;
	}
		#sorry-wrap {
			border: 0;
			color: #fff;
			height: 90%;
			padding: 20px;
			position: absolute;
			right: auto;
			text-align: left;
			top: auto;
			width: auto;
		}
		#sorry-wrap:before {
			display: none;
		}
			#sorry-wrap-inner {
				float: none;
				height: 80%;
				margin-bottom: 20px;
				overflow-y: scroll;
				width: auto;
			}
				#sorry-scroll-btn {
					float: none;
					margin: 0 auto;
				}
			.sorry-item {
				border-bottom: 1px solid #fff;
				margin-bottom: 20px;
			}
				.sorry-item h4 {
					font-size: 20px;
					text-transform: uppercase;
				}
				.sorry-item-date {
					font-size: 15px;				
				}
				.sorry-item-description {
					font-size: 13px;
					margin-bottom: 20px;
					}
	#panel-308-4 {
		background-color: #161616;
		background-image: none;
		display: none;
		padding: 20px;
		text-align: center;
		vertical-align: bottom;
	}
		#press-wrap {
			border: 0;
			color: #fff;
			padding: 0;
			text-align: left;
		}
			#press-wrap h3 {
				border: 0;
				font-size: 30px;
				font-weight: 300;
				padding-bottom: 10px;
				text-transform: uppercase;			
			}
	#mobile-menu-button {
		background: url('img/mobile_button.svg') no-repeat;
		display: block;
		height: 25px;
		position: fixed;
		right: 20px;
		top: 20px;
		width: 125px;
		z-index: 8;
	}
#menu-wrap {
	background: transparent;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;	
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}
	#menu-close {
		background: transparent;
		border: 0;
		font-family: 'CircularStd-Bold';
		font-size: 24px;
		padding: 5px 20px;
		position: absolute;
		right: -10px;
		top: 0px;
	}
	#menu-sidebar {
		background: #fff;
		display: block;
		float: none;
		padding: 0;
		height: auto;
		width: 100%;
	}
		#menu-sidebar-header {
			display: none;
			text-align: center;
		}
			#menu-sidebar-header i {
				font-size: 100px;
				line-height: 0;
			}
			#menu-h3 {
				margin: -40px 0 20px 0;
				text-align: center;
				text-transform: uppercase;
			}
		#menu-nav {
			background: #4d4d4d;
		}	
			#menu-nav ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}
				#menu-nav li {
					border-bottom: 2px solid #404040;
					margin-bottom: 0;
					text-align: center;
				}
					#menu-nav li a,
					#menu-nav li a:active,
					#menu-nav li a:visited,
					#menu-nav li a:focus {
						border-bottom: 0;
						color: #fff;			
						display: block;
						font-size: 17px;	
						outline: none!important;					
						padding: 10px;				
						text-transform: uppercase;
					}
					#menu-nav li a:hover,
					#menu-nav li a.active {
						border: 0;
						color: #aaa;
					}
					#menu-nav li a.menu-active {
						border-bottom: 0!important;
					}					
	#menu-content {
		background: rgba(255,255,255,.95);
		display: block;
		float: none;
		font-size: 16px;
		height: 70%;
		overflow-y: scroll;
		padding: 40px;
		width: 100%;
	}
		h2.sep-h2 {
			border-bottom: 1px solid #404040;
			font-size: 18px;
			margin-bottom: 20px;
		}
		#menu-content-inner {			
			height: 80%;
			overflow-y: scroll;
		}
			.menu-section {
				display: none;
			}
				.menu-section-header {
					height: auto;
					margin-bottom: 20px;
					max-width: 100%;
					width: 100%;
				}
				.menu-wrap-row {
					overflow: hidden;
				}
				.drink-type {					
					margin-bottom: 20px;
					padding-left: 0;
					padding-right: 15px;
				}
					.drink-type-name {
						font-size: 20px;
						font-weight: 700;
						margin-top: 0;
						text-transform: uppercase;
					}
					.drink-types {

					}
						.drink {
							font-size: 15px;
							margin-bottom: 10px;
						}
							.drink-left {
								display: inline-block;
								font-weight: 700;
								margin-right: 10px;
							}
							.drink-name {
								display: inline-block;
							}
				.food {
					margin-bottom: 20px;
					overflow: hidden;
				}
					.food-price {
						float: none;
						font-size: 21px;
						line-height: 1;
						margin-right: 0;
						width: 100%;
					}
					.food-info {
						float: none;
						width: 100%;
					}
						.food-info h3 {
							font-size: 21px;
							font-weight: 900;
							margin-top: 0;
							text-transform: uppercase;
						}
				#happy-hour h2 {
					border-bottom: 1px solid #404040;
					text-transform: uppercase;
					margin-bottom: 20px;
				}

	
	#footer {
		background: #000;
		display: block;
		padding: 10px;
		position: relative;		
	}
		#footer-left,
		#footer-right {
			float: none;
			padding: 0;
			text-align: center;
			width: 100%;
		}	
	body,
	html {
		height: 100%!important;
	}		
}

@media only screen and (min-width: 480px) and (max-width: 1129px) {
	#menu-sidebar {
		background: #4d4d4d;
		float: left;
		height: 100%;
		width: 30%;
	}
	#menu-content {
		float: left;
		min-height: 100%;
		height: 100%;
		width: 70%;
	}
		#menu-content-inner {
			height: 100%;
		}
	#panel-308-2 {
		background: #fff url('img/mobile_hours_md.gif') center center no-repeat;
		-webkit-background-size: 100%;
		   -moz-background-size: 100%;
		    -ms-background-size: 100%;
		     -o-background-size: 100%;
		        background-size: 100%;
	}	
}