.orbital-regular {
font-family: "orbital", sans-serif;
font-weight: 400;
font-style: normal;
}
.orbital-italic {
font-family: "orbital", sans-serif;
font-weight: 400;
font-style: italic;
}
.orbital-bold {
font-family: "orbital", sans-serif;
font-weight: 700;
font-style: normal;
}
.orbital-bold-italic {
font-family: "orbital", sans-serif;
font-weight: 700;
font-style: italic;
}



header,
	nav,
	main,
	footer,
	section,
	aside {
	  display: block;
	  position: relative;
	}

	html {
	  scroll-behavior: smooth;
	}

	html,
	body {
	  width: 100%;
	  max-width: 100%;
	  overflow-x: hidden;
	}

	body {
		background: #000;
		color: #fff;
		font-family: 'Montserrat', sans-serif;
		font-optical-sizing: auto;
		font-size: 20px;
		font-weight: 300;
		font-style: normal;
		line-height: 1.55em;	
		overflow-x: hidden;
	}

	@media screen and (max-width: 992px) {
		body {
			font-size: 17px;
		}
	}
	@media screen and (max-width: 768px) {
		body {
			font-size: 16px;
		}
	}

	header .container,
	footer .container {
	  max-width: 1350px;
	}

	header {
	  background: transparent;
	  max-width: 100%;
	  margin: auto;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  margin: auto;
	  z-index: 9999;
	  transition: all 1s;
	}
	@media screen and (max-width: 992px) {
		header {
			position: relative;
		}
	}

	a#m-logo {
	  display: inline-block;
	  width: 100%;
	  max-width: 550px;
	  position: relative;
	  z-index: 999;
	  transition: all 1s;
	}

	header.scrol {
		background-color: #000;
	}
	header.scrol a#m-logo {
		max-width: 200px;
	}


	#top-header {
		display: none;
		background-color: transparent;
		padding: 6px;
	}
	#top-header p {
		color: #fff;
		font-size: 14px;
		margin: 0;
	}
	#top-header p a.link-yellow {
		font-size: 18px;
		font-style: italic;
		font-weight: 500;
		margin-left: 15px;
		margin-right: 15px;
	}

	
	nav {
	  display: inline-block;
	}
	nav ul {
	  display: inline-block;
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}
	nav ul li {
	    display: inline-block;
		line-height: 20px;
		padding: 0 15px;
		position: relative;
		vertical-align: middle;
	}
	nav ul li:last-child {
	  padding-right: 0;
	}
	nav ul li a,
	nav ul li a:visited {
	    display: inline-block;
		font-weight: 400;
		font-style: normal;
		color: rgb(255,255,255);
		color: rgba(255,255,255,0.75);
		font-size: 16px;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 7px;
		outline: 0;
		border: 0;
		position: relative;
		transition: all 0.5s;
	}
	nav ul li a:hover {
	  color: #fff;
	  text-decoration: none;
	  outline: 0;
	  border: 0;
	}

	@media screen and (max-width: 1200px) {
		nav ul li a, nav ul li a:visited {
		font-size: 15px;
		letter-spacing: 5px;
		}
	}
	@media screen and (max-width: 992px) {
		nav ul li {
			padding: 0 12px;
		}
		nav ul li a, nav ul li a:visited {
			font-size: 14px;
		}
	}
	@media screen and (max-width: 768px) {
		nav ul li {
			padding: 0 10px;
		}
		nav ul li a, nav ul li a:visited {
			font-size: 14px;
		}
	}
	@media screen and (max-width: 475px) {
		nav ul li {
			padding: 0 4px;
		}
		nav ul li a, nav ul li a:visited {
			font-size: 11px;
		}
	}

	#main {
		min-height: 500px;
	}



	a.link,
	a.link:visited {
	  color: #d6161e;
	  text-decoration: none;
	}
	a.link:hover {
	  color: #d6161e;
	  text-decoration: underline;
	}

	a.link-black,
	a.link-black:visited {
	  color: #070606;
	  text-decoration: none;
	}
	a.link-black:hover {
	  color: #070606;
	  text-decoration: underline;
	}

	a.link-white,
	a.link-white:visited {
	  color: #fff;
	  text-decoration: none;
	}
	a.link-white:hover {
	  color: #fff;
	  text-decoration: underline;
	}

	a.link-yellow,
	a.link-yellow:visited {
	  color: #fbff62;
	  text-decoration: none;
	}
	a.link-yellow:hover {
	  color: #fbff62;
	  text-decoration: underline;
	}

	.white {
	  color: #fff;
	}
	.bg-white {
	  background-color: #fff;
	}

	.black {
	  color: #000;
	}
	.bg-black {
	  background-color: #000;
	  color: #fff;
	}

	.gray {
	  color: #eee;
	}
	.bg-gray {
	  background-color: #eee;
	}

	.dk-gray {
	  color: #333;
	}
	.bg-dk-gray {
	  background-color: #333;
	}

	.blue {
	  color: #394ccc;
	}
	.bg-blue {
	  background-color: #394ccc;
	  color: #fff;
	}

	.red {
		color: #bb2026;
	}
	.bg-red {
		background-color: #bb2026;
		color: #fff;
	}

	.yellow {
		color: #fbff62;
	}
	.bg-yellow {
		background-color: #fbff62;
	}

	


	.flex {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	}

	.img-cover img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}

	.liner {
		display: inline-block;
		background-color: #fbff62;
	    background: linear-gradient(to right, rgba(211, 163, 69, 0) 0%, rgba(251, 255, 98, 0.98) 51%, rgba(0, 0, 0, 0) 100%);
		width: 35%;
		height: 2px;
		margin-top: 20px;
		margin-bottom: 15px;
	}
	.liner-center {
		background-color: #fbff62;
	    background: linear-gradient(to right, rgba(211, 163, 69, 0) 0%, rgba(251, 255, 98, 0.98) 51%, rgba(0, 0, 0, 0) 100%);
	}


	h1,
	h2,
	h3,
	h4,
	h5 {
		color: #000;
		font-weight: 800;
		font-style: normal;
	    line-height: 1em;
		transition: all 1s;
	}

	h1 {
	  font-size: 52px;
	  margin: 15px 0;
	}

	h1.yellow,
	h2.yellow {
		color: #fbff62;
	}

	h2 {
		font-size: 52px;
	}
	@media screen and (max-width: 1200px) {
	  h2, .h2 {
		font-size: 46px;
	  }
	}
	@media screen and (max-width: 992px) {
	  h2, .h2 {
		font-size: 42px;
	  }
	}
	@media screen and (max-width: 768px) {
	  h2, .h2 {
		font-size: 36px;
	  }
	}


	h3 {
	  font-size: 34px;
	}
	@media screen and (max-width: 1200px) {
		h3 {
		  font-size: 32px;
		}
	  }
	@media screen and (max-width: 992px) {
	  h3 {
		font-size: 26px;
	  }
	}
	@media screen and (max-width: 768px) {
	  h3 {
		font-size: 24px;
	  }
	}


	h4 {
	  font-size: 18px;
	}

	h5 {
	  font-size: 16px;
	}

	.text-lg p {
	  font-size: 20px;
	  line-height: 25px;
	}


	

	#intro-bbq-plate {
		display: block;
		width: 100vw;
		min-height: auto;
		margin: 0 auto;
		position: relative;
	}
	#intro-bbq-plate::before {
		content:'';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000333+100&0.75+0,0+61 */
		background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,2,31,0) 75%,rgba(0,3,51,0) 100%)
	}
	@media screen and (max-width: 768px) {
		#intro-bbq-plate h1 {
			font-size: 42px;
		}
		#intro-bbq-plate p {
			font-size: 18px;
		}
	}


	#intro, 
	#cookin,
	#contact,
	#location,
	#reviews {
		background: url('../images/bg-wood-v2.jpg') no-repeat center center / cover;
		border-bottom: solid 2px #333;
		position: relative;
		z-index: 99;
	}
	#intro::before,
	#cookin::before,
	#contact::before,
	#location::before,
	#reviews::before {
		content:'';
		background: rgba(0,0,0,0.5);
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}
	#intro .container,
	#cookin .row,
	#contact .container,
	#location .container,
	#reviews .row {
		position: relative;
		z-index: 9999;
	}


	#intro img {
		max-width: 550px;
    	margin: -12rem auto -2rem;
    	padding: 0 20px;
	}
	#intro h1 {
		color: #fff;
		font-size: 150px;
    	line-height: 0.85em;
	}
	#intro p {
		font-size: 28px;
		line-height: 1.45em;
   		max-width: 900px;
		margin: auto;
	}
	@media screen and (max-width: 1200px) {
		#intro img {
			max-width: 350px;
		}
		#intro h1 {
			font-size: 115px;
		}
		#intro p {
			font-size: 24px;
		}
	}
	@media screen and (max-width: 992px) {
		#intro img {
			max-width: 325px;
			margin: -10rem auto -2rem;
		}
		#intro h1 {
			font-size: 85px;
		}
		#intro p {
			font-size: 21px;
		}
	}
	@media screen and (max-width: 768px) {
		#intro h1 {
			font-size: 65px;
		}
		#intro p {
			font-size: 21px;
		}
	}
	@media screen and (max-width: 575px) {
		#intro h1 {
			font-size: 48px;
		}
		#intro img {
			max-width: 300px;
        	margin: -8rem auto -1rem;
		}
	}

	        


	#generations {
		border-top: solid 5px #fbff62;
	}


	#family {
		position: relative;
		z-index: 999;
	}
	#family article {
		background-color: #fff;
		color: #050404;
		margin-left: -9rem;
		padding: 4rem;
		transition: all 1s;
	}
	#family article p {
		font-size: 24px;
		line-height: 1.3em;
		font-weight: 400;
	}
	@media screen and (max-width: 1200px) {
		#family article {
			padding: 3rem;
		}
		#family article p {
			font-size: 22px;
		}
	}
	@media screen and (max-width: 992px) {
		#family article {
			margin-left: 0;
		}
		#family article p {
			font-size: 21px;
		}
	}
	@media screen and (max-width: 768px) {
		#family article {
			padding: 3rem 2.5rem;
		}
		#family article p {
			font-size: 20px;
		}
	}


	.gallery figure {
		display: block;
		width: 100%;
		height: 650px;
		margin: 0;
		outline: 0;
		border: solid 2px #333;
		transition: all 1s;
	}
	.gallery figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	@media screen and (max-width: 992px) {
		.gallery figure {
			height: 550px;
		}
	}
	@media screen and (max-width: 768px) {
		.gallery figure {
			height: auto;
		}
	}

	#cookin h3 {
		display: none;
		color: #fff;
	}
	#cookin {
		margin-top: -4rem;
		border-top: solid 5px #fbff62;
	}
	@media screen and (max-width: 1200px) {
		#cookin {
			margin-top: -2.5rem;
		}
	}
	@media screen and (max-width: 992px) {
		#cookin {
			margin-top: 0rem;
		}
	}


	.showcase {
		background-repeat: no-repeat;
		background-position: bottom center;
		background-size: cover;
		background-attachment: fixed;
		width: 100vw;
		min-height: 100vh;
		padding: 25rem 15px 7rem;
		border: solid 1px #333;
		position: relative;
	}
	.showcase-v2 {
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		background-attachment: fixed;
		width: 100vw;
		height: 100vh;
		position: relative;
	}
	.showcase .liner,
	#location .liner {
		background-color: #fbff62;
	    background: linear-gradient(to right, rgba(211, 163, 69, 0) 0%, rgba(251, 255, 98, 0.98) 51%, rgba(0, 0, 0, 0) 100%);
		width: 225px;
		height: 3px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.showcase-bbq {
		background-image: url('../images/pik-n-pig-bbq.jpg');
	}
	.showcase-brisket {
		background-image: url('../images/pik-n-pig-brisket.jpg');
	}
	.showcase-chicken {
		background-image: url('../images/pik-n-pig-smoked-chicken.jpg');
	}
	.showcase-dessert {
		background-image: url('../images/piknpig-nanner-puddin-v2.jpg');
	}
	.showcase-gethere {
		background-image: url('../images/get-here.jpg');
	}
	.showcase-aerial {
		background-image: url('../images/piknpig-aerial.jpg');
	}

	.video {
		display: block;
		width: 100%;
		height: auto;
	}
	.video iframe {
		display: block;
		width: 100%;
		height: auto;
		outline: 0;
		border: 0;
	}


	.showcase::before {
		content: '';
		display: block;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+36,0.58+99 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,.65) 100%,rgba(0,0,0,0.7) 100%);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
	.showcase article {
		position: relative;
		z-index: 999;
		padding: 20px 5px;
	}
	.showcase h2 {
		font-size: 4em;
		color: #fff;
		text-shadow: 0 0 15px rgba(0,0,0,0.5);
		margin: 15px 0 8px;
	}
	.showcase p {
		font-size: 23px;
		font-weight: 400;
		line-height: 1.3em;
		max-width: 650px;
	}
	@media screen and (max-width: 1450px) {
		.showcase {
			background-attachment: scroll;
			padding: 25rem 30px 7rem;
			min-height: auto;
		}
		.showcase-v2 {
			background-attachment: scroll;
			height: auto;
			min-height: 700px;
		}
		.showcase h2 {
			font-size: 4em;
		}
		.showcase p {
			font-size: 21px;
		}
	}
	@media screen and (max-width: 992px) {
		.showcase {
			min-height: auto;
			padding: 15rem 25px 5rem;
		}
		.showcase h2 {
			font-size: 3em;
		}
		.showcase p {
			font-size: 20px;
		}
	}
	@media screen and (max-width: 768px) {
		.showcase p {
			font-size: 19px;
		}
	}



	#get-here article {
		background-color: #fff;
		text-align: center;
		margin-top: -5rem;
		margin-bottom: -5rem;
		padding: 2.75rem 15px 1rem;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		position: relative;
	}
	#get-here article h3 {
		color: #222;
	}
	#get-here article h3 small {
		display: block;
		color: #222;
		font-size: 65%;
	}
	#get-here article p {
		font-family: "orbital", sans-serif;
		color: #bb2026;
		font-size: 31px;
		font-style: italic;
		margin: 20px 0;
	}
	@media screen and (max-width: 1200px) {
		#get-here article p {
			font-size: 28px;
		}
	}
	@media screen and (max-width: 768px) {
		#get-here article {
			max-width: 500px;
			margin: 10px auto;
		}
	}

	#location {
		color: #fff;
	}
	#location h2, #location h3 {
		color: #fff;
	}
	#location p {
		color: #fff;
	}

	#gmap {
		width: 100%;
		height: 550px;
	}
	#gmap iframe {
		display: block;
		width: 100%;
		height: 100%;
		outline: 0;
		border: 0;
		z-index: 1;
	}


	#work-with-us {
		background: url('../images/work-with-us-v2.jpg') no-repeat top center / cover;
	}
	#work-with-us article {
		background-color: rgba(0,0,0,0.7);
		text-align: center;
		max-width: 575px;
		margin: 350px 0 25px;
		padding: 35px 25px;
		box-shadow: 0 0 12px rgba(0,0,0,0.25);
		position: relative;
		z-index: 999;
	}
	#work-with-us article h3 {
		color: #fff;
	}
	#work-with-us article p {
		color: #fff;
		font-size: 16px;
		max-width: 800px;
		margin: 12px auto;
	}
	@media screen and (max-width: 1200px) {
		#work-with-us article p {
			font-size: 17px;
		}
	}
	@media screen and (max-width: 992px) {
		#work-with-us article {
			margin: 375px 0 25px;
		}
		#work-with-us article p {
			font-size: 16px;
		}
	}
	

	#contact h2 {
		color: #fff;
	}


	#banner {
		background-color: #333;
		text-align: center;
		position: relative;
		transition: all 0.5s;
		padding: 8rem 15px 3rem;
	}
	#banner h1 {
		display: inline-block;
		color: #fff;
		font-size: 3.75rem;
		text-transform: uppercase;
		text-shadow: 0 0 5px #222;
		transition: all 0.5s;
	}


	ul.social {
		display: inline-block;
		margin: 0;
		padding: 0;
		list-style: none;
	  }
	  ul.social li {
		display: inline-block;
		padding: 0 1px;
	  }
	  ul.social li img {
		display:block;
		width: 30px;
		outline: 0;
		border: 0;
	  }
	  ul.social li a,
	  ul.social li a:visited {
		display: block;
		color: #fff;
		font-size: 21px;
		text-align: center;
		text-decoration: none;
		outline: 0;
		border: 0;
		width: 65px;
		height: 65px;
		line-height: 65px;
		margin: 0;
		padding: 18px;
		border: 0;
		border-radius: 65px;
		transition: all 1s;
	  }
	  ul.social li a:hover {
		background-color: #d6161e;
		color: #fff;
		text-decoration: none;
		border: 0;
		outline: 0;
	  }
  
  
  
		#mobile-btn {
		  display: inline-block;
		  color: #fff;
		  white-space: nowrap;
		  vertical-align: middle;
		  margin: 2px 15px;
		  cursor: pointer;
		  z-index: 9999;
		}
		.button-bar {
		  display: block;
		  position: relative;
		  width: 50px;
		  height: 2px;
		  margin-bottom: 10px;
		  border-radius: 1px;
		  background-color: #fff;
		  transition: all 0.5s;
		}
		.button-bar:nth-child(2) {
			width: 40px;
			margin-left: auto;
			margin-right: auto;
		}
		#mobile-btn:hover .button-bar:nth-child(2) {
		  background-color: #fbff62;
		  width: 50px;
		}
  
  

		.slideout-menu {
			background-color: rgba(0, 0, 0, 0.88);
			padding: 75px 0;
			position: fixed;
			top: 0;
			right: -100%;
			transition: right 0.5s;
			height: 100vh;
			width: 100%;
			z-index: 9999;
		  }
		  
		  .slideout-menu.is-open {
			right: 0;
		  }
		  .slideout-menu p {
			color: #fff;
			font-size: 14px;
			line-height: 17px;
			margin: 0;
			padding: 12px 20px;
		  }
		  @media screen and (min-width: 767px) {
			.slideout-menu p {
			  font-size: 13px;
			}
		  }
		  
		  .slideout-menu ul {
			list-style: none;
			width: 100%;
			margin: 0;
			padding: 10px 20px;
		  }
		  
		  .slideout-menu ul li {
			display: block;
			text-align: center;
			line-height: 1;
			margin: 0;
			padding: 0;
		  }
		  
		  .slideout-menu ul li a {
			color: #fff;
			display: block;
			font-size: 21px;
			font-weight: 600;
			padding: 18px 15px;
			border-bottom: solid 1px rgba(255, 255, 255, 0.15);
			text-decoration: none;
			text-transform: uppercase;
			transition: all 0.5s;
			letter-spacing: 1px;
		  }
		  
		  .slideout-menu ul li a:hover {
			background-color: rgba(0, 0, 0, 1);
			color: #fbff62;
			border-bottom: solid 1px rgba(255, 255, 255, 0.15);
		  }
		  
		  .slideout-menu a.slideout-close {
			display: none;
			color: #fff;
			font-size: 2em;
			padding: 0 20px 0 0;
			position: relative;
			text-decoration: none;
		  }


	  #mobile-phone-btn {
		color: #fff;
		font-size: 22px;
		cursor: pointer;
		position: relative;
		z-index: 9999;
	  }
	  #mobile-phone-btn a,
	  #mobile-phone-btn a:visited {
		color: #fff;
		text-decoration: none;
		outline: 0;
		border: 0;
	  }
	  #mobile-phone-btn a:hover {
		color: #fbff62;
		text-decoration: none;
		outline: 0;
		border: 0;
	  }
  





	.bttn,
	.bttn:visited {
	  display: inline-block;
	  background-color: transparent;
	  background-color: #000;
	  color: #fff;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 2px;
		outline: 0;
		border: solid 1px #000;
		border-radius: 35px;
		padding: 5px 30px;
		min-width: 190px;
		cursor: pointer;
		transition: all 0.5s;
	}
	.bttn:hover {
	  background-color: #ad141a;
	  color: #fff;
	  text-decoration: none;
	  outline: 0;
	  border-color: solid 1px #7b0c0f;
	}

	.bttn-red,
	.bttn-red:visited {
		background-color: #ad141a;
		border-color: #ad141a;
	}
	.bttn-red:hover {
		background-color: #7b0c0f;
		border-color: #7b0c0f;
	}

	.bttn-trans,
	.bttn-trans:visited {
		background-color: transparent;
		border-color: #fff;
	}
	.bttn-trans:hover {
		background-color: transparent;
		border-color: #fff;
	}


	footer {
	  background: #000;
	  color: #fff;
	  font-size: 15px;
	  line-height: 1.5em;
	  clear: both;
	}
	p.footer-address {
		display: inline-block;
		font-size: 13px;
		font-weight: 400;
		letter-spacing: 1px;
		padding: 15px 5px 15px 15px;
    	border-left: solid 2px #d2232a;
	}
	@media screen and (max-width: 768px) {
		p.footer-address {
			padding: 15px;
			border-left: 0;
		}
	}

	footer h6 {
		color: #fff;
		font-weight: bold;
		margin: 0 0 12px;
	}
	img#f-logo {
	  display: inline-block;
	  width: 100%;
	  height: auto;
	}

	  ul.f-nav {
		margin-top: 0;
		margin-bottom: 0;
		padding: 0;
		list-style: none;
	  }
	  ul.f-nav li {
		display: block;
		padding: 7px 0;
	  }
	  ul.f-nav li a,
	  ul.f-nav li a:visited {
		display: inline-block;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 2px;
		outline: 0;
		border: 0;
		transition: all 0.5s;
	  }
	  ul.f-nav li a:hover {
		color: #d2232a;
		text-decoration: none;
		outline: 0;
		border: 0;
	  }

	#disclaimer {
		background-color: #000;
		padding: 20px;
	}
	#disclaimer p {
	    color: rgba(255, 255, 255, 0.4);
		font-size: 9px;
		line-height: 13px;
		margin: 0;
		text-transform: uppercase;
		letter-spacing: .5px;
	}
	#disclaimer a,
	#disclaimer a:visited {
	  color: rgba(255, 255, 255, 0.4);
	  text-decoration: none;
	  outline: 0;
	  border: 0;
	  transition: 0.75s;
	}

	#disclaimer a:hover {
	  color: #fff;
	  text-decoration: underline;
	  outline: 0;
	  border: 0;
	}