html{
	scroll-behavior: smooth;
	font-family: sans-serif;
}
body{
	background-color: var(--main-bg-color);
}

#adbanner iframe{
    max-width: 100%;
}
#adbanner iframe{
    width: 100%;
    height: 300px;
}
@keyframes fadeout {
    0%{
        opacity: 1;
    }
    50% {
        transform: translatey(0) scale(1.35);
    }
    100% {
        transform: translatey(-15%) scale(1.35);
        opacity: 0;
        display: none;
    }
}
@keyframes fadein {
    0%{
        opacity: 0.5;
        transform: translatey(-15%) scale(1.35);
    }
    100% {
        
        transform: translatey(0) scale(1);
        opacity: 1;
    }
}

#search{
    max-width: 640px;
    margin: auto;
}
#searchbox{
    width: -webkit-fill-available;
    height: 2.5em;
    padding: 0.5em;
    font-size: large;
    margin: auto;
    display: block;
    background: #fefefeee;
}
#searchresultheader{
    padding-block-start: 8em;
    color: var(--main-text-color);
    padding-inline: 1em;
    max-width: 640px;
    margin-inline: auto;
}
.is-hidden { 
    display:  none !important;
    height: 100px;
}
#loader {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  max-height: 100vh;;
  padding: 0;
  margin: 0;
  z-index: 99999;  
  background: #fff;
  animation: fadein 0.25s forwards; 
}

#loader img{
  display: block;  
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
}
.hide{
	display: none !important;
	width: 0px;
}
.fade{
    animation: fadeout 0.25s forwards !important; 
}
#tableNumberModal{
    height: 100vh;
    width: 100vw;
    background: #000000ee;
    position: fixed;
    z-index: 200;
}
.modal{
    margin: 50px auto auto;
    padding: 0.5em;
    width: 85vw;
    max-width: 420px;
    max-height: 70vh;
    overflow: scroll;
    overflow-x: hidden;
    box-shadow: 0 0 10px #fff;
    scroll-behavior: smooth;

}
.modal h2, .modal .container a{
    text-align: center;
}
.options{
    margin: auto;
    width: fit-content;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.modal .container div{
    display: flex;
    flex-wrap: wrap;
    margin: 10px auto;
    width: 90%;
    align-items: center;
    justify-content: center;
    
}
.modal .container a, .options a{
    padding: 0.5em 1em;
    margin: 0.125em;
    font-weight: bolder;
    background: #000;
    transition: 0.25s;
    display: block;
    color: #fff;
}
.modal .container a{
     font-size: small;
} 

.main {
    max-width: 2560px;
    margin: 0 auto;
    overflow: hidden;
}
.main-header{
	position: fixed;
	top: 0;
	width: 100%;
	max-height: 4.3em;
  background-color: var(--header-color);
	z-index: 100;
	border-bottom: 1px solid var(--header-bordercolor-1);
}
.main-header .container{
  max-width: 2560px;
  margin: 0 auto;
  overflow: hidden;
}
.main-header ul{
	display: flex;
  overflow: scroll;
  overflow-y: hidden;
}
.main-header ul::-webkit-scrollbar {
    display: none;
}
.contactinfo .locations{
	display: block; 
}
.contactinfo .locations .all{
	width: 100vw; 
	display: flex;
}
.contactinfo .social {
	width: fit-content !important;
    padding-inline: 1.5em !important;
}
.contactinfo .locbtn{
	width: 98% !important;
}.flickity-button {
    display: none;
}.flickity-page-dots {
    position: initial !important;
}.flickity-page-dots .dot {
    background: #fff !important;
    box-shadow: 0px 0px 2px black !important;
}
.contactinfo .btn {
   	padding: 15px 0;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 5px;
    border: 1px solid;
    border-radius: 35px;
    max-width: 488px;
    width: -webkit-fill-available;
    scroll-snap-align: start;
    
}
.contactinfo i {
    padding: 5px;
    margin: auto 0;
}
.subbtn{
    display: flex;
    margin: 0 auto;
    justify-content: center;
}
.contactinfo .btn img{
    max-width: 20px;
    max-height: 20px;
    min-width: 20px;
    min-height: 20px;
}

/* Hide scrollbar for IE, Edge and Firefox */
.main-header ul {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#menublock{
	height: 4.3em;
	list-style: none;
}
.icon{
	width: 3.6em;
  padding: 7px;
}
#menublock i{
	font-size: 40px;
  padding: 14px;
}
#menublock li {
	border-right: 1px solid var(--header-bordercolor-2)
}
/*RATING*/
.rateus{
	width: fit-content;
    margin: 0 auto;
    font-size: x-large;
}
.star-rating {
	white-space: nowrap;
}
.star-rating [type="radio"] {
	appearance: none;
}
.star-rating i {
	font-size: 1.2em;
	transition: 0.3s;
}
.main-hero img{
	max-width: 100%;
	height: auto;
}
.star-rating label:is(:hover, :has(~ :hover)) i {
	transform: scale(1.35);
	color: #fffdba;
	animation: jump 0.5s calc(0.3s + (var(--i) - 1) * 0.15s) alternate infinite;
}
.star-rating label:has(~ :checked) i {
	color: #faec1b;
	text-shadow: 0 0 2px #ffffff, 0 0 10px #ffee58;
}
.menu tr td p{
    font-size: small;
}
.cartcount{
    position: absolute;
    background: #00aa00cc;
    border-radius: 5em;
    padding: 0.5em;
    text-decoration: none;
    top: 0px;
    font-size: medium;
}

/*FOOTER STYLES*/
#footer{
	position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0;
  color: #ffffff;
  text-align: center;
  z-index: 100;
  display: inline-block;
  transition: 0.5s;	
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#footerBtns{
	transition: 0.5s;
  width: -webkit-fill-available;
  padding-block: 10px 15px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.grad1{
	background: #000;
	border-top: 1px solid #fff;
}
.grad2{
	background-image: linear-gradient(transparent, #00000055, #000);
}
#footerBtns div{
	margin:0 auto;
	width: fit-content;
	
}
#footerBtns a{
	color: #ffffff;
	max-width: 100px;
  width: 15vw;
  min-width: 36px;
  display: inline-block;
}
.smallfont{
  font-size: small;
}
.largefont{
  font-size: large;
}
.bigfont{
  font-size: xx-large;
}

/*END FOOTER STYLES*/



#btn_SubInfo .fa-apple{
	position:relative;
	padding: 15px 8px;
}
#btn_SubInfo .fa-info-circle{
    position: absolute;
    top: -5px;
    right: -10px;
    font-size: 13px;
}
.subSettings{
    display: flex;
    margin: auto;
    width: max-content;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.onesignal-customlink-container{
	min-height: fit-content !important;
}
.onesignal-customlink-container button{
	font-family:sans-serif; !important;
	font-size: large !important;
	padding: 0px 5px !important;
    margin: 3px 0px !important;
    width: min-content !important;
}
/*APPLE ONLY STYLES*/
#btn_SubInfo {
    padding:4px 15px;
    width: auto;
    display: none;
}
#appleMessage{
  position: fixed;
  background-color: #000000aa;
  height: 90vh;
  width: 100vw;
  margin: 0;
  top: 69px;
  left: 0;
  z-index: 1000;
  color: #000;
	/*display: none;
}
.appleInstallHide{
	display:none !important;
*/}
#appleMessage .container{
  margin: 10px;
  background: linear-gradient(#fff, #ffffffaa);
  position: relative;
  border-radius: 15px;
}
#appleMessage .card{
	background: url(images/apple/bg1.webp);
  padding: 0 15px 15px;
  position: relative;
  border-radius: 15px;
}
#appleMessage .header{
	display: flex;
  position: relative;
}
#appleMessage #slides{
	display: flex;
  margin: 0 auto;
  width: fit-content;
}
#appleMessage .text{
	padding: 10px;
  width: -webkit-fill-available;
  text-align: center;
}
#appleMessage .msg .msgtxt{
	display: flex;
   
    margin: 0 auto;
    width: fit-content;
    padding: 0px;
}
#appleMessage .msg p{
    padding: 5px 0;
     text-align: center;
}
#appleMessage .appleMsgBtns{
	padding: 0;
  position: absolute;
  margin: 0;
  color: #000;
}
#appleMessage .appleMsgBtnClose{
	right: 0;
}
#appleMessage .appleMsgBtnRight{
	right: 0;
	top: 50%;
}
#appleMessage .appleMsgBtnLeft{
	left: 0;
	top: 50%;
}
#appleMessage .appleMsgBtns .fa{
  font-size: xx-large;
}
#appleMessage .apple_tutorial_img{
	height: 65vh;
  width: auto;
  max-width: 100%;
  margin: 10px auto;
  display: block;
  border-radius: 15px;
}
#appleMessage .icon{
	height: 24px;
  width: 24px;
  padding:0 5px ;
}
#appleMessage .fa-warning{
	color: #fe2;
	text-shadow: 0 0 1px #000;
}

@supports (-webkit-touch-callout: none) { /* CSS specific to iOS devices */
/* CSS specific to iOS devices */
 #btn_SubInfo {
 		display: initial !important;
 }
 #pizza,#burgers,#gyros,#hawawshi,#pasta,#combo,#portions{
		scroll-margin: 5em;
 }
}

/*Footer AD FRAMEWORK*/
/*CART STYLES*/
@keyframes openwa {
  0% {
    width: 0px;
    bottom: -40vh;
	}
	75%{
		bottom: 6px;
	}
	100% {
    width: 100%;
    bottom: 0;
	}
}
@keyframes openshopmodal {
  0% {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
	}
	100% {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
	}
}
@keyframes openshop {
  0% {
    opacity: 0;
	}
	100% {
    opacity: 1;
	}
}
#mymodal{
	position: fixed;
    width: -webkit-fill-available;
    height: 100vh;
    z-index: 1000;
    animation-name: openshopmodal;
    animation-duration: 0.5s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: sans-serif;
} 
#mymodal .container{
	height: 100%;
	background: var(--modal-bg-container-color);
  display: flex;
}
#wamodal{
	background: #000;
    padding: 1em;
    margin: 50px auto auto;
    width: 85%;
    max-height: 80%;
    max-width: 400px;
    height: fit-content;
    position: relative;
    animation-name: openshop;
    animation-duration: 0.6s;
    opacity: 1;
    border: 1px solid #fff;
    overflow: scroll;
    box-shadow: 0 0 10px #fff;
    overflow-x: hidden;
    scrollbar-color: black;
}
#wamodal .header, 
.modal .header{
	display: flex;
	width: -webkit-fill-available;
	text-align: center;
    position: sticky;
    top: 0;
    z-index: 1100;
}#wamodal .header img, 
.modal .header img{
	width: 32px;
  height: 32px;
  margin: auto;
  position: relative;
  top: -3px;
}

.menu button{
	padding: 0.5em;
  font-size: large;
}
#itemCategory,
.selectTableTitle{
	color: #fff;
	width: -webkit-fill-available;
	padding: 0;
    text-align: center;
    text-shadow: 2px 2px 5px black;
}
#wamodal .image{
	display: flex;
  width: -webkit-fill-available;
  overflow: scroll;
  scroll-snap-type: x mandatory;
  overflow-y: hidden;
  max-height: 200px;
}
#wamodal .image img {
	scroll-snap-align: start;
    object-fit: cover;
    width: 85vw;
    max-width: max-content;
}
#itemName{
    position: sticky;
    top: 1.33em;
    text-shadow: 2px 2px 5px black;
    z-index: 1100;
}
#itemName, #itemDesc, #itemCost{
	width: -webkit-fill-available;
    color: #fff;
    max-height: 100px;
       
} 
#itemDesc{
	overflow: scroll;
	overflow-x: hidden;
}
#cart #itemDesc{
 	max-width: 42vw;
  overflow-y: hidden;
  overflow-x: scroll !important;
}

#itemAmt{
	color:#FFF;
	font-size: x-large;
	margin: auto;
  padding: 0.5em;
  text-align: center;
}
#itemPrice{
 	color: #FFF;
    margin: auto;
    font-size: xx-large;
    text-align: right;
    width: 150%;
}
#itemSizeControl, #itemFlavourControl{
    flex-wrap: wrap;
}
#itemAmtcontrol, #itemSizeControl, #itemFlavourControl{
	width: -webkit-fill-available;
	display: flex;
	padding: 0.5em;
    justify-content: center;
}
.sepline{
    border-bottom: 1px solid #fff;
}
.select{
	transform: perspective(1000px) translate3d(0px, -2px, 10px) !important;
	background: linear-gradient(#0dc143, #003506) !important;
	box-shadow: 0px 0px 10px #fff;
    font-size: x-large !important;
}
.confirm{
    padding: 1em;
}
#itemSizeControl a,
#itemFlavourControl a,
#itemSideControl a,
#itemAdditionControl a,
#itemModControl a{
    font-size: x-large;
    color: #fff;
    text-align: center;
	background: #000;
	margin: 0.15em;
    padding: 0.25em 0.5em;
	display: block;
    min-width: 85px;
    transition: 0.25s;
}
#itemSideControl b{
    color: #fff;
    position: absolute;
    left: 21px;
    font-size: x-large;
    rotate: -25deg;
    background: #000;
    padding: 0 0.25em;
    margin-top: 0px;
    z-index: 1000;
    animation: fadein 0.25s forwards;
}
#itemSideControl p{
    position: absolute;
    color: #fff;
    font-size: xx-large;
    left: 86%;
    margin-top: -60px;
    padding: 0;
    animation: fadein 0.25s forwards;
}
#itemSizeContainer .title,
#itemFlavourContainer .title,
#itemSideContainer .title,
#itemAddContainer .title,
#itemModContainer .title{
	display: block;
	padding: 0.5em;
	margin-block:0.5em ;
	color: #fff;
}

#itemAmtcontrol a{
	font-size: xx-large;
  color: #fff;
  text-align: center;
  margin: 0.15em;
	display: block;
  
}
#search{
    display:flex;
}
#searchClose{
    position: relative;
    float: right;
    z-index: 1001;
    color: #f11;
    right: 0px;
    top: 0px;
    margin: 0;
    background: #000000da;
}
#itemClose{
	position: relative;
    float: right;
    z-index: 1001;
    color: #f11;
    top: -6px;
    padding: 0;
}
#itemAddCart{
	padding: 0.33em;
  font-size: xx-large;
  width: -webkit-fill-available;
  position: sticky;
    bottom: 0;
    z-index: 1100;
}
#footer #cart{
	background: #000;
    border: 1px solid #fff;
    border-bottom: none;
    max-width: 500px;
    max-height: 30vh;
    height: auto;
    overflow: scroll;
    overflow-x: hidden;
    animation-name: openwa;
    animation-duration: 0.25s;
    text-align: left;
    margin: 0 auto;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    transition: 0.5s;
}
#cart .titleRow{
 		text-align: center;
    width: -webkit-fill-available;
    padding: 10px;
    display: block;
    font-weight: bolder;
    text-shadow: 0px 0px 5px black;
    font-family: sans-serif;
    background: linear-gradient(#0dc143, #003506);
    text-transform: capitalize;
    text-transform: capitalize;
    font-size: x-large;
    margin-top: -1px;
 }
#cart .titleRow:active,
#cart .close{
 	background: #000;
}
#whatsappOrder{
 	border-top: 1px solid;
	width: -webkit-fill-available;
}
#whatsappOrder tr:nth-child(1) {
    font-size: x-small;
}
#whatsappOrder  tr:nth-child(odd){
	 background-color: #ffffff19;
}
#whatsappOrder  tr:nth-child(even){
	 background-color: #00000019;
}
#itemTotal{
 	font-size: x-large;
  font-weight: bold;
  text-align: end;
  padding: 0.5em 1em;
  border-bottom: 1px solid;
  background-color: #00000019;
}
#whatsappOrderBtn{
	 padding-inline: 1em;
	 padding-block: 0 1em;
}
#whatsappOrderBtn .placeOrder{
 	padding: 0.5em;
 	margin-top: 0.66em;
    color: #fff;
    display: grid;
    text-align: center;
    width: -webkit-fill-available;
    border-radius: 30px;
    background-color: #0dc143;
    font-size: large;
    font-weight: bolder;
    text-shadow: 0px 0px 5px black;
}
#cart td, #cart th {
    padding: 5px;
    font-size: x-small;
}
#itemNo{
	vertical-align: top;
}
#itemNo, #itemCost{
	text-align: right;
}
#itemSize{
	text-align: center;
}
#itemXBtn a{
	padding: 0 5px;
  color: #f11;
  font-size: x-large;
}
.waBtn {
	display: flex;
    position: sticky;
    top:0;
}
.cartexpanded{
    max-height: 91vh !important;
}
.close{
	font-size: xx-large;
    padding: 0 0.25em;
    margin: auto;
    color: #fff;
}
.close:active{
	color: #f11;
}

#footer #accessibility a{
	background: #000000ee;
	display: inline-block;
	padding: 15px;
	margin: 5px 0;

}
#footer #accessibility i{
	padding: 0 0 0 5px;
}

.main-footer .openinghours {
    border: 1px solid var(--header-bordercolor-2);
    margin: 0px auto 10px;
    padding: 16px 13px;
    border-radius: 10px;
    width: fit-content;
    font-size: larger;
    background: linear-gradient(#11111188, #000);
}
.main-footer .openinghours .center{
    padding:5px;
}
@media (min-width:300px) { 
    .menu tr td, .descrow tr:nth-child(odd) td {
        font-size: larger;
    }
    #cart td, #cart th {
        font-size: revert;
    }
}
@media (min-width:500px) { 
	#itemDesc{
		max-width: max-content;
	}
	#cart #itemDesc{
  	overflow-y: auto !important;
  	overflow-x: auto !important;
	}
}


@media (min-width:961px) { /* big landscape tablets, laptops, and desktops */}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */}
@media (min-width:1281px) { /* hi-res laptops and desktops */}
@media (min-width:1440px) { /* hi-res laptops and desktops */}