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


body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.normal-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10px;
    font-weight: normal;
}

.add-ingredient-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    margin: 5px;
}




@media only screen and (max-width: 1300px) {
	.add-ingredient-list {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}
@media only screen and (max-width: 850px) {
    .add-ingredient-list {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media only screen and (max-width: 550px) {
    .add-ingredient-list {
        grid-template-columns: 1fr 1fr;
    }
}

.add-ingredients-item {
    border-radius: 15px;
    grid-template-columns: 200px 200px;
    background-color: #edeae8;
    margin: 5px;
    min-height: 75px;
    


}

.add-ingredients-product-image{
    position: relative;
    margin: 5px;
}

.product-image-round-corners {
    border-radius: 15px;
}
.add-ingredients-product-name {
}
.add-ingredient-product-price {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 8px !important;
    font-weight: normal;
    font-style: italic;
}

.add-ingredient-selected{
    border-style: solid !important;
    border-width: 10px !important;
    border-color: #147816 !important;
}

.add-ingredients-sold-out{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index:100;

}
.product-unavailable{
    opacity: 0.2;
}

#KBPopUp {
    visibility: hidden;
    width: 100%;
    height: 99%;
    margin: 5px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
}
#KBContent {
	max-width: 100%;
	margin: auto;
	border-radius: 10px;
	background-color: #e8ccb0;
	border: 2px solid #45290c;
	padding: 5px;
	text-align: center;
}


.bundle-contents{

	width: 100%;
	max-width: 375px;
	align-items: center;




}



.Modifiers_Botton_Window {
	max-width: 500px;
	margin: 50px auto;
	border-radius: 10px;
	background-color: #F1D8C7;
	border: 2px solid #45290c;
	padding: 15px;
	text-align: center;
}


.KBO{
	width: 100%; 
	min-height: 330px;

	
	overflow-y: scroll;
}

.AddOns{
	width: 80%; 

     margin: 50px auto;
	 border-radius: 10px;
     background-color:#F1D8C7;
     border:2px solid #45290c;
     padding:15px;
     text-align:center;	
	
	
}

.SuggestedItem{
	
	border-radius: 10px;
	
}



#orderConfetti {
  display: hidden; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  top: 0px; /* Place the button at the bottom of the page */
  left: 0px; /* Place the button 30px from the right */
  width: 100%;
  height: 100%;
  z-index: 9999999; /* Make sure it does not overlap */
  border:  none; /* Remove borders */
  border-color: white;
  outline: thin; /* Remove outline */
  background-color: transparent; /* Set a background color */
    opacity: 0;
    -webkit-transition: opacity 500ms linear;
    transition: opacity 500ms linear;
}



#myBtn {
  display: visible; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 0px; /* Place the button at the bottom of the page */
  right: 0px; /* Place the button 30px from the right */
  width: 50%;
  height: 60px;
  z-index: 99; /* Make sure it does not overlap */
  border:  thin; /* Remove borders */
  border-color: white;
  outline: thin; /* Remove outline */
  background-color: #541f0b; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 3px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}




#btnCart {
  display: visible; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 0px; /* Place the button at the bottom of the page */
  left: 0px; /* Place the button 30px from the right */
  width: 50%;
  height: 60px;
  z-index: 99; /* Make sure it does not overlap */
  border: thin; /* Remove borders */
  border-color: white;
  outline:  thin; /* Remove outline */
  background-color: #541f0b; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 3px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#btnCart:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}


/*====================================================================  FONTS */
.major_heading{
	font-family: 'Crimson Text', serif; 
	font-size: 40px; 
	font-weight: bold; 
	color: #C5C5C5;
}

.minor_heading{
	font-family: 'Crimson Text', serif; 
	font-size: 24px; 
	font-weight: normal; 
	color: #171616;
}

.medium_heading{
	font-family: 'Crimson Text', serif; 
	font-size: 24px; 
	font-weight: normal; 
	color: #C5C5C5;
}


.product_name_font{
	font-family: 'Crimson Text', serif; 
	font-size: 36px; 
	font-weight: bold; 
	color: #171616;
}
.description_font{
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
	font-size: 18px; 
	font-weight: normal; 
	color: #171616;
}
.price_font{
	font-family: 'Crimson Text', serif; 
	font-size: 36px; 
	font-weight: bold; 
	color: #171616;
}
/*====================================================================  Images */


.product_image {

	border-radius: 15px;

}


/*====================================================================  BUTTONS */
.menu_button {
	-webkit-appearance: none;  
	opacity: 1; 
	transition-duration: 0.5s; 
	border: none; 
	font-size: 12px; 
	font-weight: normal; 
	color: #FFFFFF; 
	background-color: #6b0005; 
	border-radius: 20px; 
	width:98%; 
	height:50px;
	white-space: normal;
}

.menu_button_specials {
	-webkit-appearance: none;  
	opacity: 1; 
	transition-duration: 0.5s; 
	border: none; 
	font-size: 12px; 
	font-weight: normal; 
	color: #FFFFFF; 
	background-color: #147816; 
	border-radius: 20px; 
	width:98%; 
	height:50px;
	white-space: normal;
}

.menu_button_invite {
	-webkit-appearance: none;  
	opacity: 1; 
	transition-duration: 0.5s; 
	border: none; 
	font-size: 20px; 
	font-weight: bold; 
	color: #FFFFFF; 
	background-color: #147816; 
	border-radius: 20px; 
	width:98%; 
	height:98%;
	white-space: normal;
}



.order_button {
	-webkit-appearance: none;
	opacity: 1;
	transition-duration: 0.5s;
	border: none;
	font-size: 14px !important; 
	font-weight: bold;
	color: #FFFFFF;
	background-color: #3B1202;
	border-radius: 20px;
	width: 98%;
	height: 70px;
	white-space: normal;
	cursor: pointer !important;
}

.close_button {
	-webkit-appearance: none;  
	opacity: 1; 
	transition-duration: 0.5s; 
	border: none; 
	font-size: 14px; 
	font-weight: bold; 
	color: #FFFFFF; 
	background-color: #094716; 
	border-radius: 20px; 
	width:150px; 
	height:50px;
	white-space: normal;
}


/*====================================================================  GRIDS */
.header_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
	width: 100%;
	
}

.menubutton_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;


}

.menuProducts_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;


}



/*====================================================================  GRID ITEMS */


.item_div{
	border-radius: 15px;
	background-color: #edeae8;
	width: 98%;
	height: 98%;
}



.accordion {
  background-color: #eee;
  color: white;
  cursor: pointer;
  padding: 0px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 20px;
  transition: 0.7s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  /* content: '\002B'; */
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  /* content: "\2212"; */
}

.panel {
  padding: 0 10px;
  background-color: #ccc;
  max-height: 0;
  border: none;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

















.prod_accordion {
  background-color: #eee;
  color: #444;

  padding: 0px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 20px;
  transition: 0.7s;
}

.prod_active, .prod_accordion:hover {
  background-color: #ccc;
}

.prod_accordion:after {
  /* content: '\002B'; */
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.prod_active:after {
  /* content: "\2212"; */
}

.prod_panel {
  padding: 0 10px;
  background-color: white;
  /*max-height: 0;*/
  border: none;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}













::-webkit-scrollbar {
    width: 5px;
    background: #B7A089;  /*make scrollbar transparent */
}


::-webkit-scrollbar-thumb{
	background: #370506; 
}




.e {
	font-size: 18px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

.includedIngredients {
	font-size: 24px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	color: #290404;
	font-weight: normal;
	cursor:pointer;
}

.excludedIngredients {
	font-size: 24px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	color: #bfb0b0;
	font-weight: normal;
}








/*====================================================================  RESPONSIVE SHIT */

/*	1200 Pixel Changes */
@media (max-device-width: 1200px) {



}

/*	800 Pixel Changes */
@media (max-device-width: 1100px) {

	.menubutton_wrapper {
	   grid-template-columns:  1fr 1fr 1fr 1fr;
	}   

	.menuProducts_wrapper {
		grid-template-columns: 1fr 1fr 1fr;
	}


}
@media (max-width: 1100px) {
	
	.menubutton_wrapper {
	   grid-template-columns:  1fr 1fr 1fr 1fr;
	}   

	.menuProducts_wrapper {
		grid-template-columns: 1fr 1fr 1fr;
	}	
}

@media (max-width: 800px) {
	 .header_wrapper {
		grid-template-columns: 1fr;
	 }
	.menubutton_wrapper {
		grid-template-columns:  1fr 1fr;
	}    
	  
	.menuProducts_wrapper {
		grid-template-columns: 1fr ;
	}



	.order_button {
		font-size: 24px;
		cursor: pointer !important;
	}
	.menu_button{
		font-size: 24px;
		height:65px;
	}
	.menu_button_specials{
		font-size: 24px;
		height:65px;
	}
}



@media (max-height: 800px){
	
	.KBO{
		max-height: 250px;
	}
	
	
	
}



@media (max-width: 500px) {

	.KBContent { 
     max-width: 100%;
	}
	
	
	
 	.menu_button{
		font-size: 24px;
		height:65px;
	} 
	.menu_button_specials{
		font-size: 24px;
		height:65px;
	}
	/*
	.product_name_font{
		font-size: 24px;
	}
	.description_font{
		font-size: 18px;
	}	
	.price_font{
		font-size: 24px;
	} 
	*/
	.order_button {
		font-size: 24px;
		height: 75px;
		cursor: pointer !important;
	}


}

.container {
	display: grid;
	grid-template-columns: 1fr; /* Default: stacked */
	gap: 2px;
	align-content: center;
	width:100%;
	align-items: center;
	justify-items: center; /* Center contents in each grid cell */
	margin: auto; /* Horizontal centering if not using body flex */
}

.box {
	padding: 10px;
	text-align: center;
	width: 350px;
	margin: 0 auto;
}

/* When screen width is 500px or more, switch to two columns */
@media (min-width: 900px) {
	.container {
		grid-template-columns: 350px 350px; /* Two columns */
	}
}

/* The div is hidden by scaling down to zero */
#notification {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	padding: 20px 30px;
	background-color: #333;
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	z-index: 1000;
	width: 350px;
	border-radius: 20px;
}
	/* This class triggers the "spring" effect */
	#notification.show {
		transform: translate(-50%, -50%) scale(1);
	}