/*https://coolors.co/00b1bc-00dce4-ffb700-f23619-273f44*/
:root{
    --c1 : #00818A;
    --c2 : #00DCE4;
    --c3 : #FFB700;
    --c4 : #F23619;
    --c5 : #273F44;
    --c6 : #333333;
    --c7 : #ffffff;
    
    --btn-color: var(--c5);
    --input-border-color : var(--c5);
    --radius:.45em;
	--headingfont :'Roboto', sans-serif;
}

body { font-family:var(--headingfont); font-weight:400; }
.bold { font-weight:700;  }

.c1 { background-color: var(--c1); }
.c2 { background-color: var(--c2); }
.c3 { background-color: var(--c3); }
.c4 { background-color: var(--c4); }
.c5 { background-color: var(--c5); }
.c6 { background-color: var(--c6); }
.c7 { background-color: var(--c7); }

.c1-text { color: var(--c1); }
.c2-text { color: var(--c2); }
.c3-text { color: var(--c3); }
.c4-text { color: var(--c4); }
.c5-text { color: var(--c5); }
.c6-text { color: var(--c6); }
.c7-text { color: var(--c7); }


a:hover { color:var(--c1); }
.btn:hover { background:var(--c1);  color:var(--c7); }
.btn:hover::after { background:rgba(0,0,0,.05); border-radius:var(--radius);  }

.btn.spl { background:var(--c4); }
.btn.spl:hover { background:var(--c2);  }

.container { width:90%; }

nav#sidebar:not(is-visible) { display:none;  }
nav#sidebar.is-visible { display:grid; position:fixed; top:0px; height:100vh; min-width:200px;  left:0px; z-index:3; background:#333; color:#fff; overflow:hidden; overflow-y: auto; align-content: start; transition:3s all ease;  }
nav#sidebar  a { padding:1em 2em; transition:.5s all ease;  }
nav#sidebar  a:hover { background-color: red; }


.searchpanel { display:grid; padding:2em 1em; background-color: var(--c1); }
.searchbar { display:grid; grid-template-columns:2fr 1fr auto; grid-gap:0px; }
.searchbar .btn { margin:0px; border-radius:0px;  }

.heading > h5 { font-size:1.5em;  }

a.category { position: relative; display:block; border-radius:var(--radius); overflow:hidden; transition:.5s all;   }
a.category img { display:block; width:100%; height:100%; object-fit:cover; max-height:250px;   }
a.category span { text-transform:capitalize;  position:absolute; left:0; right:0; top:50%; transform:translate(0%,-50%);  background-color:rgba(255,255,255,.8); color:var(--c5); text-align:center; font-weight:500; display:grid; justify-content:center; align-content:center; padding:.5em .5em; font-size:1.5em;    }
a.category:hover span { background-color:var(--c3); color:var(--c7); font-weight:500;  }
a.category:hover { box-shadow:0px 0px 10px 0px rgba(0,0,0,.4);  }


/* .. */

main { min-height:500px; }
header.sticky { position:sticky; top:0px;  }

section { margin:0px; }

main .tabs { background:var(--c1); padding:.5em 1em; border-radius:var(--radius); display:grid; grid-template-columns:repeat(4,1fr); grid-gap:.5em; grid-auto-flow: column; justify-content:stretch;   margin-bottom:1em; width:100%; overflow:hidden; overflow-x: auto;  text-align:center;   }
main .tabs a { transition:.2s all ease-in-out;  background:var(--c1); color:var(--c3); padding:.5em 1em; width:100%; border-radius:var(--radius); white-space:nowrap;  }
main .tabs a:hover,main .tabs li.active { animation:fadeInLeft .5s;  background:var(--c2); color:var(--c1);  border-radius:var(--radius); }
main .tabs a:hover,main .tabs li.active a { background:var(--c1); color:var(--c2); border:1px solid var(--c2);  border-radius:50%; }

.shop { background-color:white; padding:.5em 1em; border-radius:var(--radius); border:1px solid rgba(0,0,0,.1); position:relative;  }
.shop strong { color:var(--c6); text-transform:capitalize;}
.shop small { color:rgba(0,0,0,.5); text-transform:capitalize;}
.shop .callbtns {   }
.shop .callbtns a { display:grid; grid-auto-flow:column;  align-items: center; justify-content:start; grid-gap:.5em; }
.shop .callbtns a.mdi::before { font-size:2em; }
.shop .badge { text-transform:capitalize;  font-size:.7em;  border-radius:30px; padding:.2em .5em;  justify-self:center; position:absolute;  top:.7em; right:.7em; }
.shop .badge.delivery { border:2px solid var(--c1); color:var(--c1); background:var(--c7);}
.shop .badge.takeaway { border:2px solid var(--c4); color:var(--c4); background:var(--c7);}

.shop:hover { border-color:var(--c2); box-shadow:0px 0px 10px 2px rgba(0,0,0,.1);  }

footer img { max-width:200px; }


@media (max-width:800px){	
	
	.container { width:100%;  }
	.searchbar { display:grid; grid-template-columns:5fr 3fr auto; grid-gap:0px; }
	.heading > h5 { font-size:1.2em;  }
	a.category span { font-size:1.2em;  }
    .modal.active .modal-container { width:95%; max-height:90vh; overflow:hidden; overflow-y:auto; }
    .input-group-h { grid-auto-flow: row; }
    .searchpanel h4 { font-size:1.2rem; }
}


@media (max-width:400px){
    .input-group-h { grid-auto-flow: row; }
}