/*<!--- 
Restaurant Menu
-->*/

:root {
	--bg: #ffffff;
	--tst: #d1e8ff;
	--radius: 10px;
	--icolor1: #399188;
	--icolor2: #399188;
	--icolor3: #399188;
	--icolor4: #399188;
	--icolor5: #399188;
}

body {
	font-family: "Rubik", sans-serif;
	color: #111;
	
}

.container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-template-rows: 60px 40px auto 10px 60px;
	background: var(--bg);
	/* mobile viewport bug fix */
	height: -webkit-fill-available;
	background-image: url(img/arka-ust-min.png), url(img/arka-alt-min.png);
	background-position: right top, left bottom;
	background-repeat: no-repeat;
	background-attachment: fixed , fixed;
}

.header {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}

.title {
	width: 100%;
	height: 100%;
	font-size: 55px;
	text-align: center;
}

.indicators {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 5;
	grid-row-end: 5;
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-template-rows: 0px;
}



#i1,
#i2,
#i3,
#i4,
#i5 {
	grid-column-start: 1;
	grid-column-end: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
#i2 {
	grid-column-start: 2;
	grid-column-end: 2;
}
#i3 {
	grid-column-start: 3;
	grid-column-end: 3;
}
#i4 {
	grid-column-start: 4;
	grid-column-end: 4;
}
#i5 {
	grid-column-start: 5;
	grid-column-end: 5;
}

.navi-indicator {
	height: 4px;
	width: 60px;
	border-radius: 20px;
	transition: width 0.2s;
}

#ni1{
	background: var(--icolor1);	
}
#ni2{
	background: var(--icolor2);
}
#ni3{
	background: var(--icolor3);
}
#ni4{
	background: var(--icolor4);
}
#ni5{
	background: var(--icolor5);
}

.navi {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 5;
	grid-row-end: 5;
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-template-rows: 60px;
}

.navi-item1,
.navi-item2,
.navi-item3,
.navi-item4,
.navi-item5 {
	grid-column-start: 1;
	grid-column-end: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.navi-item2 {
	grid-column-start: 2;
	grid-column-end: 2;
}
.navi-item3 {
	grid-column-start: 3;
	grid-column-end: 3;
}
.navi-item4 {
	grid-column-start: 4;
	grid-column-end: 4;
}
.navi-item5 {
	grid-column-start: 5;
	grid-column-end: 5;
}
.nav-button {
	width: 100px;
	background-color: #399188;
	color: #ffffff;
	font-family: "Rubik", sans-serif;
	font-weight: 700;
	cursor: pointer;
	border-style: solid;
    border-width: 1px;
    border-color: #e7e7e7;
    border-radius: 15px;
	padding: 10px;
	
}

#startersbutton .navi-icon {
	color: var(--icolor1);
}
#mainsbutton .navi-icon {
	color: var(--icolor2);
}
#dessertsbutton .navi-icon {
	color: var(--icolor3);
}
#drinksbutton .navi-icon {
	color: var(--icolor4);
}
#fitbutton .navi-icon {
	color: var(--icolor5);
}
.navi-text {
	text-align: center;
	font-size: 0.8em;
	font-weight: 600;
}

.logo {
	width: 100%;
	height: auto;
	max-width: 350px;
}

.urun {
	width: 100%;
	height: auto;
	max-width: 120px;
	border-radius: 15px;
}
.sponsor{
	width: 100%;
	height: auto;

}
.menu {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 4;
	overflow-y: auto;
	overflow: -moz-scrollbars-none;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.menu::-webkit-scrollbar {
    width: 0 !important
    }

.menu-item {
	grid-column-start: 2;
	grid-column-end: 2;
	margin: 10px;
	display: grid;
	grid-template-columns: 120px 1fr 50px;
	font-size: 0.8em;
	padding: 5px;
	border-style: solid;
    border-width: 1px;
    border-color: #e7e7e7;
    border-radius: 15px;
	background-color: #ffffff;
}

.menu-item-img{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}
.menu-item-name {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	font-weight: 700;
	line-height: 15px;
	padding-left: 15px;
}
.menu-item-description {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	padding-left: 15px;
	padding-top: 35px;
}
.menu-item-price {
	grid-column-start: 3;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
	font-weight: 700;
	line-height: 100px;
	text-align: center;
}

.menu-separator {
	grid-column-start: 2;
	grid-column-end: 2;
	height: 50px;
	font-size: 1.2em;
	line-height: 50px;
	font-weight: 700;
	border-radius: var(--radius);
	text-align: center;
}


.drink-item {
	opacity: 0.7;
	grid-column-start: 2;
	grid-column-end: 2;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	justify-items: center;
	align-items: center;
}

.drink-item-bas{
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 1;
}
.drink-item-img{
	grid-column-start: 1;
	grid-column-end: 1;
	grid-row-start: 2;
	grid-row-end: 2;
}
.drink-item-name {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 2;
}
.drink-item-description {
	grid-column-start: 3;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 2;
}
.drink-item-price {
	grid-column-start: 4;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 2;
}

/*Desktop Stuff*/
@media only screen and (min-width: 800px) {
	.container {
		grid-template-rows: 150px 75px 20px auto 20px;
	}
	.indicators {
		grid-row-start: 3;
		grid-row-end: 4;
	}
	.navi-indicator {
		height: 4px;
		width: 100%;
		margin: 15px;
	}
	.navi {
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.navi-item1,
	.navi-item2,
	.navi-item3,
	.navi-item4
	.navi-item5 {
		display: flex;
	}
	.nav-button {
		height: 70px;
		width: 100%;
		margin: 15px;
		display: flex;
		justify-content: center;
		border-radius: var(--radius);
	}
	.navi-icon {
		height: 100%;
		line-height: 70px;
		font-size: 25px;
		text-align: center;
	}
	.navi-text {
		line-height: 45px;
		margin-left: 10px;
		text-align: left;
		font-size: 1.3em;
		font-weight: 700;
	}
	.menu {
		grid-row-start: 4;
		grid-row-end: 4;
	}
}

/*prevent defaults*/
button,
p {
	display: inline-block;
	border: none;
	margin: 0;
	text-decoration: none;
	padding: 0;
	background: none;
	border-radius: 0;

	overflow: hidden;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
input {
	padding: 0;
}
input:focus {
	outline: none;
}
button:focus {
	outline: none;
	color: var(--maincolor);
}

textarea:focus {
	outline: none;
}
select:focus {
	color: #39a;
}
a,
a:link,
a:visited {
	color: var(--maincolor);
}