*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* start animation on scroll */

.start {
    animation: fade-in 1s ease-out;
}

.float-up {
    animation: float-up .6s ease-out;
}

/* hr{
    animation: fade-in-right .8s;
} */

.fade-in-element {
    animation: fade-in 1.8s;
  }

.title{
    color: white;
/*    background: black;*/
    animation: fade-in-right .8s ease-in-out;

}

.banner{
    color: white;
/*    background: goldenrod;*/
}
.openBanner{
    color: white;
    background: #D3D3D3;
}

.container {
		width: 98%;
    column-count: 2;
    column-gap: 20px;
}

.menuCatImg {
	float: right;
	width: 35%;
	margin: auto 1.2% 2% 2%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.menutitle {
    height: auto;
    display: flex;
/*    background: url(../img/navbackground.jpg) no-repeat center center/cover;*/
/*  	background-color: rgba(245, 240, 167, 0.5);*/
    overflow: auto;
    flex-flow: column;   
    position: fixed;
  	top: 185px;
  	width: 100%;
  	z-index: 10;
}

.menutitle a2 {
		display: align-self;
    text-align: center;
    color: white;
/*    font-family: 'Architects Daughter', cursive;*/
    font-family: 'Nunito Sans', sans-serif;
		text-shadow: 4px 4px black;
    margin: 10px 0px 10px 0px;
    padding-top: 0px;
    font-size: 28px;
    opacity: 1.0;
}


main{
    background: white ;
    text-align: center;
    font-family: 'Nunito Sans', sans-serif;
    /* background-image: linear-gradient(rgba(245, 240, 167, 0.513), rgb(248, 230, 169) ); */ 
    background: url('../img/bg2.png') repeat fixed;     
}

main ul {
    /* margin: 0rem 10rem; */
    justify-content: center;
    list-style: none;
    /*width: 768px; */
    width: 90%;
    max-width: 900px; 
    /*min-width: 350px;*/
    /* background: chocolate; */
    text-align: left;    
}


li {
    margin: 0rem;
    padding-right: 0;
    padding-left: 0;
    font-size: 18px;
}

i {
    margin: 0rem;
    padding-right: 0;
    padding-left: 0;
    font-size: 18px;
}

button {
    cursor: pointer;
    background-color: rgb(122, 22, 236);
    border: none;
    border-radius: 4px;
    color: #ffffff;
    margin: 10px;
    padding: 20px;
    width: 50%;
    font-size: 20px;
}

button:hover{
    background-color: blueviolet;
}

:root {
	--menu_color1: #F0F0F0;
	--menu_color2: #F7F7F7;
}
   
.menu-info{
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
/* 	margin: auto; */
/*  background-image: linear-gradient(rgba(245, 240, 167, 0.500), rgb(248, 230, 169) );*/
/*  background-image: linear-gradient(red, yellow 10%, green 20%);*/
/*  background: url(../img/siamfoodbanner.jpg);*/
   	background: url(../img/foodsample.jpg);
  	background-repeat: no-repeat;
  	background-size: cover;
    background-color: #808080;
/*  background-color: var(--menu_color2);*/
/*   	
  	position: fixed;
  	top: 172px;
  	width: 100%;
  	z-index: 1;
*/
}

.menu-info h1 {
	font-size: 30px;
	text-shadow: 5px 5px #004;
}

.menu_group{
/*		border-style: groove;*/

    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin: auto; */
  		background-size: auto;
/*  		background-color: rgba(245, 240, 167, 0.5);
  		background: url('../img/bg2.png') repeat fixed;*/
}


.menu_group li
{
    margin: 1rem;
/*    padding: 5px 5px 5px 5px;*/
    font-size: 16px;
/*    background-color: rgba(245, 240, 167, 0.2);
	  border: 3px double grey;*/
}

hr {
    border-left: 80px solid rgb(0, 0, 0);
    margin-bottom: 10px;
}

h2 {
	font-family: 'Architects Daughter', cursive;
	color: purple; /*#FF7F50 #FFD700*/
/*	font-size: 38px;*/
	text-shadow: 3px 3px silver;
	letter-spacing: -1px;
	font-size: 3rem;
	line-height: 3rem;
	font-weight: normal;
	display: block;
/*	width: 80%;*/
	border-bottom: 2px solid purple;
	margin-bottom: 0.2em;
}

h3 {
	font-size: 26px;
	text-shadow: 3px 3px black;
}

h4 {
	font-family: 'Architects Daughter', cursive;
	color: purple; /*#FF7F50 #FFD700*/
	font-size: 26px;
}

i {
	font-size: 16px;
  color: gray;
  font-weight: normal;
}

/* menu items */

.mi {
/*  background-color: #333;*/
  overflow: hidden;
}

.mi_ln {
  float: left;
  font-weight: 350;
}

.mi_lb {
  float: left;
  color: maroon;
  font-weight: 500;
  font-size: 20px;
}

.mi_rb {
  float: right;
 	padding-left: 30px;
 	padding-right: 30px;
  color: maroon;
 	font-weight: 500;
  font-size: 17px;
}