@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,700;0,800;1,300;1,400;1,500;1,700;1,800&family=Road+Rage&display=swap');

*{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

html, body {height: 100%}
body {
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	line-height:20px;
	background-color: #231f20;
}


#sidenav {
	height: 100%;
	width: 20%;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #F8F3E5;
	background-color: #F8F3E5;
	overflow-x: hidden;
	text-align:center;
	display: flex;
    flex-direction: column;
    justify-content: center;
}


#sidenav a{color:#000;text-decoration:none;}
#sidenav .content{margin-top:-20%;position:relative;}
#sidenav .content .logo{margin:0 30px 30px 30px;position:relative;}
#sidenav .content .logo img{max-width:100%;z-index:5;position:relative;}

.fb{width:30px;margin-bottom:10px;filter: grayscale(100%);margin-top: 15px;vertical-align: middle;}
.fb:hover{filter: grayscale(0%);}

.instagram{width:42px;margin-bottom:10px;filter: grayscale(100%);margin-top: 15px;vertical-align: middle;margin-left: 5px;}
.instagram:hover{filter: grayscale(0%);}

#sidenav .content .order{margin-bottom:30px;}
#sidenav .content .order .phone{font-size: 36px;padding-top: 5px;font-family: 'Road Rage', cursive;}

#sidenav .content h1{color:#E31E23;font-family: 'Road Rage', cursive;font-size:32px;text-transform:uppercase;margin-bottom:10px;padding:5px 10px;}
#sidenav .content ul{margin-top:10px;margin-bottom:30px;}
#sidenav .content ul li{font-family: 'Road Rage', cursive;font-size:24px;padding:5px 10px;text-transform:uppercase;cursor:pointer;color: rgba(0,0,0,0.5);}
#sidenav .content ul li.on{color: rgba(0,0,0,0.9);}
#sidenav .content ul li:hover{color: rgba(0,0,0,0.9);}





#main{
	min-height: 100%;
	margin-left: 20%;
	padding:0 3%;
	color:rgba(0,0,0,0.9);
	background:#E9DEB8;
	position:relative;
	padding-bottom:200px;
}
#main .bg{
	width: 313px;
    height: 100%;
    background: #F8F3E5 url(img/paper.png);
    background-position: -15px;
    position: absolute;
    left: -15px;
    top: 0;
    bottom: 0;
    z-index: 1;
}


section{padding:20px;position:relative;z-index:2;}


section h2{font-family: 'Road Rage', cursive;font-size:42px;padding:30px;text-transform:uppercase;text-align:center;}

section .items_box{display: grid;grid-template-columns: 20% 20% 20% 20% 20%;}
section .items_box{display: grid;grid-template-columns: 25% 25% 25% 25%;}
section.kebab .items_box{display: grid;grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;}




section .items_box .item{margin:20px;position:relative;border-radius:3px;}




section .items_box .item .image{width:100%;height:180px;background:#000;border-radius:3px;overflow:hidden;position:relative;margin-bottom:10px;}
section .items_box .item .image img{width:100%;height:100%;object-fit: cover;transition:0.5s;transform: scale(1);filter: saturate(1.2);background-position: bottom;}
section .items_box .item .image img:hover{transform: scale(1.3);}

.item .title{font-size:24px;margin-bottom:5px;font-family: 'Road Rage', cursive;border-bottom:1px solid rgba(0,0,0,0.1);padding-bottom:5px;}
.item .desc{font-size:14px;}
.item .prices{font-size:15px;margin:5px 0;font-weight:600;}


section .items_box .item .top{
	position: absolute;
	top: 5px;
	right: 5px;
	background: green;
	color:#FFF;
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 5px;
	opacity: 0.9;
	text-transform: uppercase;
}

section .items_box .item .number{
	color:white;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 60px 0 0;
	border-color: #E31E23 transparent transparent transparent;
	border-color: #292828 transparent transparent transparent;
	position:absolute;
	top:0;
	left:0;
}
section .items_box .item .number span{position:absolute;width:35px;height:50px;line-height:30px;top:-50px;left:0px;font-size:18px;font-weight:700;text-align:center;}

#main .bar{width:80%;height:142px;position:fixed;bottom:0;left:20%;z-index:3;}
#main .bar .topbg{width:100%;height:108px;background:url('img/bar.webp');background-size:cover;}
#main .bar .leftbg{width:142px;height:30px;background:url('img/bar.webp');background-position:top center;transform: rotate(-90deg);position:absolute;left:-72px;top:67px;}
#main .bar .barBox{width:100%;height:108px;background:#292828;display:grid;grid-template-columns:  40% 40% 10%;text-align:center;color:#FFF;position:relative;margin-top:-65px;padding:0 5%;}
#main .bar .barBox h3{font-family: 'Road Rage', cursive;font-size:28px;margin-bottom:10px;color:#E31E23;text-transform:uppercase;}


@media only screen and (max-width: 1500px) {
	section .items_box {grid-template-columns: 25% 25% 25% 25%;}
	section.kebab .items_box {grid-template-columns: 25% 25% 25% 25%;}
	#main{padding: 0;}
	#main .bar .barBox {font-size: 12px;}
	#main .bar {position: relative;display:block;left:0;width:100%;}
	#main {padding-bottom: 0px;}
	#main .bar .barBox{width: 90%;padding:0 5%;grid-template-columns: 40% 40% 10%;}
   
    
}
@media only screen and (max-width: 1200px) {
	section .items_box {grid-template-columns: 33% 33% 33%;}
	section.kebab .items_box {grid-template-columns: 33% 33% 33%;}
	#sidenav {width: 25%;}
	#main {margin-left: 25%;}
	#main .bar .barBox {font-size: 12px;}
}
@media only screen and (max-width: 900px) {
	#sidenav {width: 100%;height:auto;position: relative;padding: 30px 0 70px 0;}
	#sidenav .content {margin-top: 0;}
	#main {margin-left: 0;}
	#sidenav .content .logo img {max-width: 170px;}
	#main .bg {
    width: 100%;
    height: 313px;
    background: #F8F3E5 url(img/paper2.png);
    background-position: 0;
    position: absolute;
    left: 0;
    top: -50px;
    bottom: 0;
    z-index: 1;}
	#sidenav .content ul li {
    font-family: 'Road Rage', cursive;
    font-size: 28px;
    padding: 7px 10px;}
	section .items_box .item {margin: 10px;}
}

@media only screen and (max-width: 769px) {
	section .items_box {grid-template-columns: 50% 50%;}
	section.kebab .items_box {grid-template-columns: 50% 50%;}
	#main .bar .barBox {grid-template-columns: 100%;height:auto;padding-bottom:30px;}
	#main .bar .barBox div{padding-bottom:15px;}
}