body{
	margin:0;
	height:100%;
	font-family: 'Comfortaa', cursive;
	background-color: #0b1315;
	}
* {
  box-sizing: border-box;
}		
::selection {
  background: #c3af7e;
  
}
#header{
	text-align: center;
}
.top{vertical-align:top;}
.middle{vertical-align:middle;}	
nav{
	position: relative;
}

#lang a{
	color: #0b1315;
}
#menu{
	background-image: linear-gradient(to left, #c3af7e, #86754c);
}	
#menu a{
	color: white;
}
#nav-icon3 {
  width: 35px;
  height: 20px;
  position: relative;
  margin: 10px;
  text-align:left;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span{
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #333333;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
	#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 10px;
}

#nav-icon3 span:nth-child(4) {
  top: 20px;
}



#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.central{
	color: white;
}	
.list ul{
	padding: 10px;
}
li{list-style:none;
	}
a{text-decoration:none;
	color:black;
	}


.title{
	color:white;
	background-image: linear-gradient(to left, #c3af7e, #86754c);
	text-align:center;
	margin:0px;
}
h2{
	padding: 5px;
}
.item{
	text-align: left;
}
#cocktail-list .item{
	cursor: pointer;
}
#kioski-sign .item{
	cursor: pointer;
}
#brunch .item{
	cursor: pointer;
}
#salates .item{
	cursor: pointer;
}
#risotto .item{
	cursor: pointer;
}
#drinkbites .item{
	cursor: pointer;
}
#gril .item{
	cursor: pointer;
}
#so-sweet .item{
	cursor: pointer;
}
.item-pic{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
	z-index: -1;
	border: 2px solid #333333;
	opacity: 0;
	transition: all 0.5s;
	visibility: hidden;
}
.foreground{
	visibility: visible;
	opacity: 1;
	left: 50%;
	z-index: 4 !important;
	cursor: pointer;
}
.price{
	float: right;
}
h3{
	color: white;
}
ul{
	padding:0;
}
#top{
	background-image: linear-gradient(to left, #c3af7e, #86754c);
	border: 0px;
	color: white;
	border-radius: 5px;
	position: fixed;
	right: 10px;
	bottom: 10px;
	padding: 0px 10px;
	visibility:hidden;
	opacity: 0;
	transition: all 0.5s;
	z-index: 3;
	cursor: pointer;
}
#footer{
	padding: 10px 0px;
	color: white;
	text-align: center;
}
#footer p{
	margin:20px;
}
#types li{
	text-align:center;
	padding: 10px 0px;
	
}
.cen{
	cursor:pointer;
}

.cat li{
	margin:10px 0px;
	color: white;
}
	
.cat{
	position: relative;
}
.central{
	position:relative;
	margin: 20px 0px;
	transition: all 0.5s;
}
.cen::before{
	content: "";
	border: 1px solid #c3af7e;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	position: absolute;
	top: -6px;
	left: -6px;
	transition: all 0.5s;
}
.cen:hover::before{
				left: 95%;
				transform:rotate(135deg);
				-web-kit-transform:rotate(135deg);
				-moz-transform:rotate(135deg);
				-o-transform:rotate(135deg);
}
.cen::after{
	content: "";
	border: 1px solid #c3af7e;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	position: absolute;
	bottom: -6px;
	right: -6px;
	transition: all 0.5s;
}
.cen:hover::after{
				right: 95%;
				transform:rotate(135deg);
				-web-kit-transform:rotate(135deg);
				-moz-transform:rotate(135deg);
				-o-transform:rotate(135deg);
}
.cen{
	margin: 0 auto;
	padding: 10px;
	border: 1px solid #c3af7e;
	position: relative;
}





.central ul{
	background-image: linear-gradient(to left, #c3af7e, #86754c);
	width: 100%;
	position: absolute;
	transition: all 0.5s;
	color: white;
	opacity: 0;
	left: -500px;
	z-index: -1;
}

.vis{
	opacity:1 !important;
	left: 0px !important;
	z-index: 3 !important;
}
.vis li{
	cursor: pointer;
}
.pressed{
	background-color: #c3af7e !important;
	transition: all 0.5s;
}

.detail{
	color: #64dd17;	
}
#aboutus{
	background-image: linear-gradient(to left, #c3af7e, #86754c);
	color: white;
	padding: 30px;
	margin-bottom: 20px;
}
#aboutus p{text-align: center;
}




#banner{
		position:relative;
		}
#image{
		width:100%;
		/*animation:anim 25s infinite;
		-web-kit-animation:anim 25s infinite;
		animation-play-state:running;*/
		background:url(../images/Welcome.jpg)no-repeat center;
		position:absolute;
		top:0px;
		left:0px;
		}
/*#image2{
		width:100%;
		animation:anim2 25s infinite;
		-web-kit-animation:anim 25s infinite;
		animation-play-state:running;
		background:url(../images/kioski2.jpg)no-repeat center;
		position:absolute;
		top:0px;
		left:0px;
		}	
#image3{
		width:100%;
		animation:anim3 25s infinite;
		-web-kit-animation:anim 25s infinite;
		animation-play-state:running;
		background:url(../images/kioski3.jpg)no-repeat center;
		position:absolute;
		top:0px;
		left:0px;
		}	
#image4{
		width:100%;
		animation:anim4 25s infinite;
		-web-kit-animation:anim 25s infinite;
		animation-play-state:running;
		background:url(../images/kioski4.jpg)no-repeat center;
		position:absolute;
		top:0px;
		left:0px;
		}	
#image5{
		width:100%;
		animation:anim5 25s infinite;
		-web-kit-animation:anim 25s infinite;
		animation-play-state:running;
		background:url(../images/kioski5.jpg)no-repeat center;
		position:absolute;
		top:0px;
		left:0px;
		}
		
@keyframes anim{
						0%{opacity:0;}
						1%{opacity:1;}
						17%{opacity:1;}
						20%{opacity:0;}
						100%{opacity:0;}
				}
@keyframes anim2{
						0%{opacity:0;}
						17%{opacity:0;}
						20%{opacity:1;}
						37%{opacity:1;}
						40%{opacity:0;}
						100%{opacity:0;}
				}
@keyframes anim3{
						0%{opacity:0;}
						37%{opacity:0;}
						40%{opacity:1;}
						57%{opacity:1;}
						60%{opacity:0;}
						100%{opacity:0;}
				}
@keyframes anim4{
						0%{opacity:0;}
						57%{opacity:0;}
						60%{opacity:1;}
						77%{opacity:1;}
						80%{opacity:0;}
						100%{opacity:0;}
				}
@keyframes anim5{
						0%{opacity:0;}
						77%{opacity:0;}
						80%{opacity:1;}
						97%{opacity:1;}
						100%{opacity:0;}
				}*/
#event{
	text-align: center;
}
#event img{
	margin: 20px 0px;
}
#gallery{margin: 40px auto;
		
		column-gap: 0.3rem;
		}
#gallery ul{padding: 0;
			margin: 0;
			}
#gallery ul li{
			transition:all 0.5s;
			z-index: 1;
			position: relative;
			
			}
#gallery ul li img{margin:0;
					transition: all 0.5s;
					}
#about{
	color: white;
}


#about a{
	color: #86754c;
}