body{
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	background-color: #c0c0c0;
	color: #555;
}

/*** General Styling ***/

.superscript-icon{
	height: 16px;
    width: 16px;
}

/*** Accordion ***/
.trc-accordion-button{
	width: 100%;
}

.trc-accordion-panel{ /* Contains the hidden details when accordion button is pressed */
	padding: 0 10px;
	background-color: green;
	display: none;
	overflow-y: scroll;
}

/*** Wrappers and Containers ***/
.wrapper{
	width: 1024px;
	height: auto;
	margin: 0 auto;
	position: relative;
	/*box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #ffffff;*/
	overflow: hidden;
	background-color: white;
}

.trc-row{
	height: auto;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.trc-row:after {
  content: "";
  display: table;
  clear: both;
}

.trc-column-2 {
  float: left;
  width: 50%;
}

.trc-column-3 {
  float: left;
  width: 31%;   
}

.trc-column-4{
	float: left;
	width: 26.6%;
}

.trc-column-13 {
  float: left;
  width: 19%;
  padding: 0;
  height: auto; /* Should be removed. Only for demonstration */
}

.trc-column-31 {
  float: left;
  width: 79%;
  padding: 0;
  height: auto; /* Should be removed. Only for demonstration */
}

.container-10-pad{
	padding: 10px;
	height: auto;
	width: inherit;
}

.container-75{
	width: 75%;
	height: 400px;
	margin: 0 auto;
	padding: 25px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	display: block;
	overflow-y: scroll;
}

/* Alignments */
.left{
	float: left;
}

.right{
	float: right;
}

/*** Font Style ***/

.headline1{
	font-family: 'Cinzel Decorative', cursive;
	font-size: 1.5em;
	color: #acacac;
}

.headline2{
	text-align: center;
	font-family: 'Lora', serif;
	font-size: 1.3em;
}

.subtitle1{
	
}

.subtitle2{
	font-family: 'Roboto', sans-serif;
	font-size: 1.1em;
	font-weight: 100;
}

.caption1{
	
}

.caption2{
	
}

/*** Top Navigation Section ***/

.top-nav-bar,
.toggle-nav-bar{	
	
}

.top-nav-bar{
	width: 100%;
	border: none;
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 6px 31.85px 3.15px rgba(81, 86, 84, 0.26);
}

.top-nav-bar p,
.top-nav-bar img{
	float: left;
	cursor: pointer;
} 

.top-nav-bar p{
	padding: 12px;
	font-size: 17px;
	color: #36454F;
}

.top-nav-bar p:hover{
	background-color: #fff;
}

.top-nav-bar img{
	width: 30px;
    height: 30px;
    margin-left: 10px;
    margin-top: 8px;
	margin-right: 10px;
}

/* Toggle Nav Bar */
.toggle-nav-bar{
	display: none;
	position: absolute;
	width: 150px;
	height: auto;
	right: 0;
	padding-left: 5px;
	background-color: #ffffff;
	z-index: 20;
}

.toggle-nav-bar p,
.toggle-nav-bar img{
	cursor: pointer;
}

.toggle-nav-bar img{
	width: 30px;
    height: 30px;
	margin-left: 5px;
	margin-bottom: 5px;
}

.toggle-nav-bar p{
	color: #555;
	padding: 5px;
}

.toggle-nav-bar p:hover{
	background-color: #acacac;
}

.toggle-nav-bar p:nth-child(1){
	margin-top: 5px;
}

#toggle-nav-icon{
	float: right;
	display: none;
}

/*** Header Section ***/
.front-header{
	width: inherit;
	overflow: hidden;
	height: 600px;
}

.header-stack{
	display: block;
	margin: 5px auto;
	width: 100%;
}

.front-header video{
	position: absolute;
	width: inherit;
	z-index: 2;
	top: 0;
	left: 0;	
}

.front-header svg{
	position: absolute;	
	width: 100%;
	top: 0;
	left: 0;
	z-index: 4;
	opacity: .8;
}

/* Fixed Header Accesory */

#fixed-header-item{
	position: absolute;
	width: 250px;
	height: inherit;
	padding: 0 10px;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 3;
	left: 10%;
	top: 0;
	color: #acacac;
	text-align: center;
}
#fixed-header-item img{
	display: block;
	margin: 0 auto;
	margin-top: 75px;
	width: 70%;
}

#fixed-header-item h2{
	margin-top: 5px;
	margin-bottom: 5px;
	color: #fff;
}

#fixed-header-item h4{
	font-size: 1em;
	color: #fff;
}

.fixed-header-item-p{
		
}

/*** Main Section ***/
/* Front Mini Gallery */
.front-gallery{
	background: url(../public/assets/images/sushi-3.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: inherit;
  height: 250px;
}

/* About */
.about{
	padding: 0 100px 0px 100px;
	background: rgb(64,31,92);
	background: linear-gradient(90deg, rgba(64,31,92,1) 0%, rgba(28,47,94,1) 100%);
	height: auto;
}

.mid-section img{
	display: block;
	width: 100%;
	heigt: 100%;
	margin: 0 auto;
}
.about h1{
	text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
	color: #fff;
	
}

.about p{
	line-height: 2;
	padding: 10px 50px;
	color: #fff;
}

.about img{
	display: block;
	width: 300px;
	heigt: 300px;
	margin: 150px auto;
}
/* Image Subsection */
.image-subsection img{
	width: inherit;
}

/* Business Hours and Map */
.business-hours{
	padding: 25px;
	text-align: center;
}
.text-business-hours{
	text-align: center;
}
#map{
	border: 2px solid #808080;
	height: 400px;
	margin: 4% auto;
}

/* Menu */
#main-section{
	
}
#menu-contents, #main-1{
	height: auto;
	width: 70%;
	margin: 0 auto;
	
	/*padding-top: 15px;
	padding-bottom: 75px;*/
	/*background-color: #383838;*/
}

#select-container {
	position: absolute;
	bottom: 40px;
	width: 60%;
	left: 16%;
	height: auto;
	z-index: 20;
	border-radius: 5px;
	border: 1px solid grey;
	padding: 3px;
	
}
#select-container select {
	height: 50px;
	width: 98%;
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	color: #555;
	font-weight: 700;
}

#select-container select:active{
	border: 1px solid #ff6363;
}

/* Menu Table */
.order-menu-table,
.menu-table{
	width: 90%;
	border-collapse: collapse;
    margin: 25px auto;
    font-size: 1em;
    font-family: sans-serif;
}

.noodle-bar-table{
	width: 70%;
}
.order-menu-table thead tr,
.order-menu-table tfoot tr,
.menu-table thead tr,
.menu-table tfoot tr
{
	border: none;
}

.order-menu-table thead tr,
.menu-table thead tr
{
	text-align: left;
}

.th-main-category,
.th-sub-category
{
	text-align: center;
}

.th-main-category{
	font-size: 1.5em;
}

.th-sub-category{
	font-size: 1.3em;
}

.th-description{
	text-align: center;
	font-size: 1em;
	font-weight: 100;
}

.th-description-2{
	text-align: left;
	font-size: 1em;
	font-weight: 100;
}


.order-menu-table tbody tr,
.menu-table tbody tr{
	border-bottom: 1px dotted black;
}

.order-menu-table th,
.menu-table th
{
    padding: 8px 0;
}

/* Bulletin */
#bulletin{
	
}
.bulletin-container{
	
}

.bulletin-container h1{
	margin-top: 20px;
	margin-bottom: 25px;
}

.bulletin-container h1{
	text-align: center;
}

.bulletin-container:after {
  content: "";
  display: table;
  clear: both;
}
.bulletin-post-container{
	width: 80%;
	height: 400px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	display: block;
}

.bulletin-post{
	width: 80%;
	height: auto;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	display: block;
	overflow-y: scroll;
}

.bulletin-post:nth-child(odd){
	background-color: #fff;
}

.bulletin-post:nth-child(even){
	background-color: #c0c0c0;
}

.author-date-container{
	display: inline-block;
	height: auto;
	width: 100%;
}

.author{
	margin-left: 10px;
}

.date{
	margin-right: 10px;
}
/* Subscriber */
.subscriber{
	position: absolute;
	width: 70%;
	height: 200px;
	top: 95px;
	left: 15%;
	z-index: 10;
	background-color: #FAFAFA;
}

.panel-liner{
	background-color: #3eb489;
	width: 100%;
	text-align: center;
	position: relative;
}

#subscriber-closer{
	position: absolute;
	right: 10px;
	top: -2px;
	font-weight: bold;
	font-size: 1.3em;
	color: red;
	cursor: pointer;
}

.panel-liner p{
	padding: 10px 0;
}

.subscriber-content-wrapper{
	margin-top: 50px;
	width: 100%;
}

.subscriber-content-wrapper p{
	margin-left: 30px;
}
.subscribe-input{
	width: 70%;
	padding: 12px 20px;
	margin-left: 30px;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	
}

.subscriber-content-wrapper button{
	padding: 12px 20px;
	display: inline-block;
	border-radius: 4px;
}

/* Adding specific width on the item columns */
.menu-td-item, 
.order-td-item{
	padding: 8px 8px 8px 0;
	word-wrap: break-word;
}


.menu-td-item{
	width: 80%;
}


.order-td-item{
	width: 60%;
}



.menu-td-description,
.order-td-description{
	text-align: left;
	font-size: .7em;
	word-wrap: break-word;
}

.menu-td-price, .order-td-price{
	padding: 8px 0;
}
.menu-td-price{
	width: 10%;
}


.order-td-price{
	width: 15%;
}



.order-td-price .hidden {
	visibility: hidden;
}


.menu-td-action img,
.order-td-action img{
	width: 25px;
	height: 25px;
	cursor: pointer;
}

.order-td-action{
	width: 10%;
	padding: 8px 10px;
	cursor: pointer;
	color: #3eb489;
	font-weight: bold;
}


/* Gallery */

.gallery-container{ /* Contains all of contents of the Gallery */
	width: 85%;
	height: auto;
	margin: 0 auto;
}
.gallery-container h1{
	width: inherit;
	text-align: center;
	color: #acacac;
	margin-top: 20px;
	margin-bottom: 20px;
}

.gallery-image-container{
	height: auto;
	overflow: hidden;
	margin-right: 15px;
	margin-bottom: 15px;
	position: relative;
}

.gallery-image-container img {
	width: 120%;
	height: 200px;
	margin: 0 auto;
}

.gallery-image-container button{
	background-color: #E5E4E2;
	margin-top: 5px;
	color: #555;
	padding: 12px 0;
	font-weight: bold;
}

/*** Footer ***/
#pre-footer{
	width: 80%;
	margin: 0 auto;
}
.pre-footer{
	border-top: 1px solid white;
	background-color: white;
	padding-top: 10px;
	padding-bottom: 40px;
	color: #36454F;
}
.pre-footer svg{
	position: absolute;	
	z-index: 4;
	bottom: 0;
	width: 100%;
	left: 0;
	opacity: .9;
}
.post-footer{
	padding: 12px;
	border-top: 1px solid #D8D8D8;
	background: rgb(64,31,92);
	background: linear-gradient(90deg, rgba(64,31,92,1) 0%, rgba(28,47,94,1) 100%);
	color: #fff;
}

.post-footer p{
	text-align: center;
}

/* Shopping Cart Table */
#shopping-cart-container{
	width: 80%;
	top: 50px;
	left: 10%;
	position: absolute;
	background-color: transparent;
	height: auto;
	display: none;
	z-index: 1000;
}

.shopping-cart-table{
	border-collapse: collapse;
    margin: 10px auto;
    font-size: 0.9em;
    font-family: sans-serif;
    width: 80%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	background-color: #fff;
}
.shopping-cart-table thead tr, .shopping-cart-table tfoot tr{
	border-bottom: 2px solid black;
}

.shopping-cart-table tbody tr{
	border-bottom: 1px dotted black;
}
 
.shopping-cart-table tfoot tr{
	border-top: 2px solid black;
}


.shopping-cart-table thead tr{
    /*background-color: #009879; /* #98001F */
    color: #000;
    text-align: left;
	font-weight: 600;
	font-size: 1.2em;
}

.shopping-cart-table tfoot tr{
	color: #000;
    text-align: left;
	font-weight: 600;
} 

.shopping-cart-table th,
.shopping-cart-table td {
    padding: 12px 15px;
	
}


.shop-td-item {
    width: 50%;
	word-wrap: break-word;
}

.shop-td-item p{
	font-size: 1em;
}

.td-quantity {
    width: 20%;
	word-wrap: break-word;
}
.shop-td-price {
    width: 15%;
}
.shop-td-action {
    width: 15%;
	color: #98001F;
	cursor: pointer;
	font-weight: 600;
}

.pill{
	/*height: 25px;*/
	width: 100px;
	border: 1px solid grey;
	border-radius: 16px;
	position: relative;
}

.pill-content{
	display: inline-block;
	height: 25px;
	margin-top: 2px;
	background-color: #fff;
	overflow: hidden;
}

.pill-content:nth-child(1), .pill-content:nth-child(3){
	width: 25px;
	border-radius: 0 16px 16px 0;
	background-color: #c0c0c0;
	cursor: pointer;
}
.pill-content:nth-child(1){
	border-radius: 16px 0 0 16px;
	margin-left: 1px;
}

.pill-content:nth-child(2){
	width: 39px;
	padding: 1px;
}


.pill p{
	font-size: 1.5em;
	font-weight: bold;
	margin: auto;
	text-align: center;
	margin: 3px auto;
	color: #000000;
}


.pill input{
	height: 98%;
	width: 99%;
	padding: 0;
	/*background-color: red;*/
	display: inline-block;
	border: 1px solid grey;
	text-align: center;
}

.pill input:focus{
	outline-width: 1px;
	outline-color: #c0c0c0;
}

#empty-cart-button{
	color: #fff;
    font-weight: 100;
	font-size: .8em;
    cursor: pointer;
    background-color: #708090;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    padding: 5px 3px;
	text-align: center;
}



/*** Other Accesories and Accents ***/
.white-bar{
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 6px 31.85px 3.15px rgba(81, 86, 84, 0.26);
	width: 100%; /* inherit parents width */
	height: auto;	
}
.top-glossy-lining{
	position: absolute;
	top: -10px;
	left: 0;
	width: 100%; /* inherit parents width */
	background: rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	height: 15px;
	z-index: 11;
}

.bottom-glossy-lining{
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 100%; /* inherit parents width */	
	background: rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	height: 15px;
	z-index: 11;
}
/* extra feature */
.gallery {
  --g: 8px;   /* the gap */
  --s: 400px; /* the size */
  
  display: grid;
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1/1;
  width: 400px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  transform: translate(var(--_x,0),var(--_y,0));
  cursor: pointer;
  z-index: 0;
  transition: .3s, z-index 0s .3s;
}
.gallery img:hover {
  --_i: 1;
  z-index: 1;
  transition: transform .2s, clip-path .3s .2s, z-index 0s;
}
.gallery:hover img {
  transform: translate(0,0);
}
.gallery > img:nth-child(1) {
  clip-path: polygon(50% 50%,calc(50%*var(--_i,0)) calc(120%*var(--_i,0)),0 calc(100%*var(--_i,0)),0 0,100% 0,100% calc(100%*var(--_i,0)),calc(100% - 50%*var(--_i,0)) calc(120%*var(--_i,0)));
  --_y: calc(-1*var(--g))
}
.gallery > img:nth-child(2) {
  clip-path: polygon(50% 50%,calc(100% - 120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100% - 100%*var(--_i,0)) 0,100% 0,100% 100%,calc(100% - 100%*var(--_i,0)) 100%,calc(100% - 120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
  --_x: var(--g)
}
.gallery > img:nth-child(3) {
  clip-path: polygon(50% 50%,calc(100% - 50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)),100% calc(100% - 120%*var(--_i,0)),100% 100%,0 100%,0 calc(100% - 100%*var(--_i,0)),calc(50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)));
  --_y: var(--g)
}
.gallery > img:nth-child(4) {
  clip-path: polygon(50% 50%,calc(120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100%*var(--_i,0)) 0,0 0,0 100%,calc(100%*var(--_i,0)) 100%,calc(120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
  --_x: calc(-1*var(--g))
}