@charset "UTF-8";
/* CSS Document */

/*COMMENT1: Positions

All positions use top bottom left and right (tblr) plus z-index, except Static
Cant use top and bottom; can't use left and right;
Use Absolute when you want to remove element from the document. tblr will be relative to last nth container with a position value.
Use Relative to stay in the normal flow of the document. tblr will be relative to parent container.
Use Fixed when you want to remove element from the document but stay in same position while scrolling. tblr will always be relating to HTML element.
Use Sticky when you want the element to stay on screen but relevant to its parent element through scrolling, then stay leave when scrolling past parent container. Only works with defined Top property.
Static is default

*/

/*comment2*/
#active {
    background-color: #e62930;
    border-radius: 10px;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
    scroll-behavior: smooth;
}
.germania {
  font-family: "Germania One", serif;
  font-weight: 400;
  font-style: normal;
}
.center {
    text-align: center;
}
.placeOrderButton {
	/*width: 100px;*/
    font-size: 1.5rem;
	padding: 9px 25px;
	background-color: #e62930;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: all 2s ease 0s;
}
li, a, button {
	color: #fff;
	text-decoration: none;
}
button:hover {
	background-color: darkred;
    transition: all 0.3s ease 0s;
}
body {
    background-color: #000000;
    margin: 0;
    padding: 0;
	overflow-x: hidden;
	min-height: 100 vh;
	width: 100%;
    height: 100 vh;
}
body, p {
  font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 1.2em;
  font-weight: normal;
  margin: 0;
  padding: 0;
  color: white;
  box-sizing: border-box;
}
p {
  margin: 0 0 10px;
}
h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 200;
}
.redContainer {
    width: 100%;
    background-color: rgba(230,41,48,1);
    padding: .2rem;
    margin-bottom: 20px;
}
.blackContainer {
    width: 100%;
    background-color: rgba(0,0,0,1);
    padding: .2rem;
    margin-bottom: 20px;
}
/* HEADER SECTION */
.header {
	width: 100%;
	position: fixed;
	display: flex;
	top: 0px;
	left: 0px;
	border-radius: 0;
	z-index: 1;
	height: 100px;
    background-color: rgba(0,0,0,0.75);
	justify-content: space-between;
	align-items: center;
/*	margin-left: 20px;
	margin-right: 20px;*/
	padding-right: 20px;
	/*padding: 30px 10%;*/
}
.orderNowButton {
	/*width: 100px;*/
    font-size: 1.5rem;
	padding: 9px 25px;
	background-color: #e62930;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: all 2s ease 0s;
}
.mobileHeader {
    position: fixed;
    top: 70px;
    left: 0px;
    display: none;
    align-content: center;
    justify-content: center;
/*    align-items: center;*/
    height: 100%;
    width: 100%;
    background-color: black;
    z-index: 2;
    text-align: center;
    padding-top: 50px;
}
.mobileNavLinks li, .mobileNavLinks a{
    width: 100%;
    padding: 20px;
	text-decoration: none;
    font-size: 2rem;
    list-style: none;
}
.openMobileHeader {
    display: flex;
    transition: all 0.3s;
}
.logo_link{
    display: block;
	height: 100%;
}
.logo{
    padding: 10px;
	cursor: pointer;
	height: 100%;
    transition: all 0.3s;
}
.logo:hover{
    padding: 5px;
    transition: all 0.3s;
}
.nav_links{
	display: flex;
	justify-content: space-around;
	list-style: none;
	/*background-color: dimgray;*/
	height: 80%;
}
.nav_links > li {
    font-size: 1.5rem;
    display: flex;
	/*padding: 20px 20px;*/
	/*Margin: 20px 20px;*/
	width: 10rem;
	border-radius: 10px;
/*	align-items: center;*/
	align-content: center;
}
.nav_links > li > a {
    transition: all 0.5s ease 0s;
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center;
	padding: 20px 0px;
}

.nav_links > li > a:hover {
	color: white;
	background-color: #e62930;
	border-radius: 10px;
    transition: all 0.5s;
}

/* HAMBURGER MENU SECTION */

.ham {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 50px;
	height: 50px;
	margin-left: 1rem;
	margin-top: 1rem;
/*	background-image: linear-gradient(to right, #e91e63, #f44336);*/
	cursor: pointer;
	z-index: 3;
	display: none;
}

.ham > div{
	width: 45px;
	height: 45px;
/*	margin: 5px;*/
	position: relative;
}

.ham > div > span{
	background: #fff;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
	transition: transform 0.5s, width 0.5s;
}

.ham .line-1 {
	transform: translate(-50%, -20px);
}

.ham .line-3 {
	transform: translate(-50%, 14px);
}

.openham .line-1{
	transform: translate(-50%, -50%) rotate(-45deg);
}

.openham .line-3{
	transform: translate(-50%, -50%) rotate(45deg);
}

.openham .line-2{
	width: 0;
}

/* HOME CSS SECTION */

.heroHome {
    position: relative;
      margin-bottom: -90px;
}

.heroHome > video {
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}
.homepics, .homeLoc {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin: 25px 0px;
}
.homepics img, .homeLoc img{
    border-radius: 20px;
    box-shadow: 0 0px 4px 3px rgba(0, 0, 0, 0.5), 0 0px 10px 3px rgba(0, 0, 0, 0.19);
    width: 100%;
}
.homecat img{
    border-radius: 20px;
    box-shadow: 0 0px 4px 3px rgba(200, 200, 200, 0.5), 0 0px 10px 3px rgba(200, 200, 200, 0.19);
    width: 100%;
}
.homecat {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin: 25px 0px;
}
.ordernow {
  display: flex;
  flex-direction: column;
/*  justify-content: center;*/
/*  align-content: center;*/
  align-items: flex-start;
  margin-left:  auto;
  margin-right:  auto;
  /*margin-top: 20px;*/
  width: 100%;
  min-height: 20px;
/*  padding-top: 10px;
  padding-bottom: 10px;*/
/*  background-image: url("../../images/fire.png");*/
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}
.placeOrderSection {
  position: relative;
  bottom: 100px;
  display: block;
  width: 100%;
  text-align: center;
}
.placeOrderSection > button{

  width: 20rem;
}
.menulist{
  display: none;
  margin: auto;
  margin-top: 10px;
  width: 100%;
  background-color: #222222;
  border-top: 2px solid #e62930;
  border-bottom: 2px solid #e62930;
  padding-bottom: 2rem;
}
.menulistItem {
  display: block;
  margin: auto;
  width: 100%;
  text-align: center;
  padding-top: 2rem;
/*  padding-bottom: 2rem;*/
}
.locationOptions {
    display: flex;
    justify-content: space-around;
/*    align-content: center;
    align-items: center;*/
    width: 100%;
    padding: 0px 5rem;
    margin: 0px;
}
/*.locationOptions div{
    padding: 1rem;
}*/
.locationOptions > button{
    font-size: 1.5rem;
    width: 20rem;
    padding: 1rem;
    margin: 10px;
}
.locationOptions > button > a {
    width: 100%;
}
.menulistOn {
  display: block;
}
.rotate180 {
    transform: rotate(180deg);
}
.row:before, .row:after {
  display: table;
  content: " ";
}

h1 {
    font-size: 2rem;
    font-weight: 200;
    margin-top: 1rem;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 1rem;
    color: #fff;
    text-align: center;
}

.lead {
  font-size: 21px;
  font-weight: 200;
  margin-bottom: 20px;
  color:#fff;
}

.footer {
/*	position: fixed;
	bottom: 0px;
	left: 0px;*/
    padding: 2rem;
	border-radius: 0;
	width: 100%;
	text-align: center;
}

/* DELIVERY LOGOS SECTION */

.delivery_logos {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
.delivery_logo {
	vertical-align: bottom;
	width: 150px;
	height: 150px;
	cursor: pointer;
}
.ubereats {
	background-image: url("../../images/delivery_logos_circle_png/ubereats.png");
	background-size: cover;
}
.postmates {
	background-image: url("../../images/delivery_logos_circle_png/postmates.png");
	background-size: cover;
}
.clover {
	background-image: url("../../images/delivery_logos_circle_png/clover.png");
	background-size: cover;
}
.doordash {
	background-image: url("../../images/delivery_logos_circle_png/doordash.png");
	background-size: cover;
}
.grubhub {
	background-image: url("../../images/delivery_logos_circle_png/grubhub.png");
	background-size: cover;
}

/* SOCIAL LOGOS SECTION */

.social_logos {
	display: flex;
	justify-content: space-around;
	align-items: center;
    padding: 20px 300px;
    background-color: #e62930;
}
.social_logo {
	vertical-align: bottom;
	width: 100px;
	height: 100px;
	cursor: pointer;
}
.ig {
	background-image: url("/images/social_logos_circle_png/ig.png");
	background-size: cover;
}
.tiktok {
	background-image: url("/images/social_logos_circle_png/tiktok.png");
	background-size: cover;
}
.fb {
	background-image: url("/images/social_logos_circle_png/fb.png");
	background-size: cover;
}
.yelp {
	background-image: url("/images/social_logos_circle_png/yelp.png");
	background-size: cover;
}
.googlemaps {
	background-image: url("/images/social_logos_circle_png/googlemaps.png");
	background-size: cover;
}

/* MENU PAGE CSS SECTION */

.menuTables {
    text-align: center;
}

.choices, .meats {
    text-align: center;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    border-collapse: collapse;
    border: 0px;
    padding: .5em;
}
.meats td {
        width: 33%;
    }
.choices td:nth-child(1) {
    text-align: left;
}

.choices th , .meats th{
    font-size: 1.5em;
    background-color: #e62930;
    padding: .2em;
    height: 2em;
}

.choices td, .meats td {
    padding: .2em;
    font-size: 1.2em;
}

/* MEDIA CSS SECTION LARGE SCREENS */
@media (max-width: 1335px) {
li, a, button {
	font-size: 1.2rem;
	color: #fff;
	text-decoration: none;
}
.nav_links > li {
	display: flex;
	/*padding: 20px 20px;*/
	/*Margin: 20px 20px;*/
	width: 8rem;
	border-radius: 10px;
/*	align-items: center;*/
	align-content: center;
}
}
@media (max-width: 1150px) {
li, a, .cta {
	font-size: 1.1rem;
}
.nav_links li {
	display: flex;
	/*padding: 20px 20px;*/
	/*Margin: 20px 20px;*/
	width: 6rem;
	border-radius: 10px;
	align-items: center;
	align-content: center;
}
.nav_links li a {
	width: 100%;
	height: 80px;
	padding-top: 30%;
}
.social_logos {
    padding: 20px 200px;
	}
.delivery_logo {
	vertical-align: bottom;
	width: 100px;
	height: 100px;
	cursor: pointer;
	}
.homepics {
    display: flex;
    justify-content: space-around;
    text-align: center;
    background-color: #e62930;
    margin: 25px 0px;
}
.homepics img, .homecat img, .homeLoc img {
    border-radius: 20px;
    box-shadow: 0 0px 4px 3px rgba(0, 0, 0, 0.5), 0 0px 10px 3px rgba(0, 0, 0, 0.19);
    width: 90%;
}
}
@media (max-width: 980px) {
li, a, .cta, button {
	font-size: .8rem;
}
.logo{
	height: 70%;
	
}

.nav_links li {
	display: flex;
	/*padding: 20px 20px;*/
	/*Margin: 20px 20px;*/
	width: 6rem;
	border-radius: 10px;
	align-items: center;
	align-content: center;
}
.nav_links li a {
	width: 100%;
	height: 60px;
	padding-top: 25%;
}
.social_logos {
    padding: 20px 150px;
	}
.delivery_logo {
	vertical-align: bottom;
	width: 50px;
	height: 50px;
	cursor: pointer;
	}
}
@media (max-width: 815px) {
nav {
		display: none;
    }
.ham {
	display: block;
}
.logo_link{
    height: 100%;
    margin: 0px auto;
    }
.logo{
    height: 100%;
    margin: auto;
	}
.header{
    height: 70px;
    }
li, a, .cta {
	font-size: .8rem;
}
    .locationOptions > button > a{
        font-size: 1.5rem;
    }
/*.header {
	height: 80px;	
}*/
.logo{
	height: 100%;	
}
.cta{
		display: none;
	}
.social_logos {
    padding: 20px 100px;
	}
.delivery_logo {
	vertical-align: bottom;
	width: 150px;
	height: 150px;
	cursor: pointer;
	}
}
@media (max-width: 615px) {
p {
    font-size: .8em;      
    }
.hero div {
        max-width: 350px;
    }
.choices, .meats {
    text-align: center;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    border: 0px;
    padding: .5em;
}
.social_logos {
    padding: 20px 10px;
	}
    .social_logo {
	vertical-align: bottom;
	width: 75px;
	height: 75px;
	cursor: pointer;
}
.choices th , .meats th{
    font-size: 1em;
    background-color: #e62930;
    padding: .2em;
    height: 2em;
}

.choices td, .meats td {
    padding: .2em;
    font-size: 1em;
}
.header{
        height: 70px;
    }
.heroHome {
  /*margin-top: 70px;*/
  width: 100%;
  min-height: 600px;
  max-height: 600px;
  margin-bottom: -10px;
/*  background-image: url("../images/hero_fire_center2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;*/
}
/*.container img{
    display: none;
    }*/
    nav{
		display: none;
	}
    .logo_link{
		height: 100%;
		margin: 0px auto;
	}
    .logo{
		height: 100%;
		margin: auto;
	}
	button {
	padding: 12px 35px;
}
	.ham {
	display: block;
}
.homepics {
    display: flex;
    justify-content: space-around;
    text-align: center;
    background-color: #e62930;
    margin: 10px 0px;
}

.placeOrderSection {
  display: block;
  width: 100%;
  margin: auto;
  text-align: center;
}
}