@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

/* Mobile First */

/* Generic */
body{
    background-color: #eceaea !important;
}
body div{
    font-family: Lobster, helvetica;
    font-size: 16px;
}

body p{
    /* font-family:poppins; */
}

.input-group-append .input-group-text{
    background: white !important;
    border: 0 !important;
    border-bottom: 1px solid !important;
    border-radius: 0 !important;
}


/* Header */

.menu-header{
    background-size: cover !important;
}

.menu-header .menu-overlay-header{
    background: rgba(0,0,0,0.86);
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.86) 0%, rgba(1,2,5,0.86) 2%, rgba(32,124,229,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,0.86)), color-stop(2%, rgba(1,2,5,0.86)), color-stop(100%, rgba(32,124,229,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.86) 0%, rgba(1,2,5,0.86) 2%, rgba(32,124,229,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.86) 0%, rgba(1,2,5,0.86) 2%, rgba(32,124,229,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.86) 0%, rgba(1,2,5,0.86) 2%, rgba(32,124,229,1) 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.86) 0%, rgba(1,2,5,0.86) 2%, rgba(32,124,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#207ce5', GradientType=1 );
}

.menu-header .menu-overlay-header .menu-header-content{
    color:white;
}

.menu-header .menu-overlay-header .menu-header-content img{
    max-width: 100px;
}
.menu-logo-box{
    padding:1.5em;
}
.logo-circle{
    width: 100px;
    height: 100px;
    margin: auto;
    background: white;
    display: flex;
    align-items: center;
    border-radius: 50%;
}

/*Header when sticky*/

.is-sticky{
    position:sticky;
    top:0;
    min-height: 80px;
    z-index: 9999;
    transition: .5s;

  
} 

.is-sticky .menu-sections{
    background:#f8f8f8;
    box-shadow: 0px 0px 5px 1px #585858;
    transition: .2s;
    padding: .2em 0;
}

/* Menu Sections */

.menu-sections{
    margin-top:-2em;
}

.menu-sections-item{
    background: white;
    border-radius: 4px;
    padding: 1em;
    text-align: center;
    border:1px solid #d3d3d3;
    margin:0 5px;

}
.menu-sections-item-content{
    color: #585858;
    margin:0;
    font-size:1.4em;
}

/*Menu dishes*/

.menu-dishes-section{
    margin-top:1em;
}
.menu-dishes-title{
    text-align: center;
    text-transform: capitalize;
    
}
.menu-dishes-item h3{
    font-size: 1.4rem;
}

.menu-dishes-block{
    border-radius: 4px;

}
.menu-dishes-item{
    border-bottom: 1px solid #f7f7f7;
    padding: .5em;
    border-radius: 4px;
    margin-bottom: .4em;
    background: white;
}
.menu-dishes-item-desc{
    color: #868686;
    text-transform: capitalize;
}
.menu-dishes-item .menu-dishes-allergic img{
    width: 25px;
    height:25px;
}
.details-button{
    padding:0;
}
.details-modal{
    z-index:9999 !important;
}
/*Pricing*/

/* .half-dish::before{
    content:'1/2';
    font-size: .8em;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: -10px;
    border-radius: 4px;
}
.whole-dish::before{
    content:'Entera';
    font-size: .8em;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: -10px;
    border-radius: 4px;
} */

/*Modal*/

.modal-header{
    padding:0 !important;
}
.modal-header .modal-close{
    position:absolute;
    right: 10px;
    top:10px;
}

.modal .modal-img{
    width: 100%;
}
.modal .alergenos img{
    margin-top:1em;
    width:20px;
    height:20px;
}

/*Footer*/
.footer{
    margin-top:2em;
}

footer img{
    max-width: 100px;
    margin-bottom:1em;
}

.footer-contact-restaurant{
    margin-bottom:1em;
}

.footer .copyright{
    font-size: .8em;
}


/* Desktop Styles */


@media(min-width:768px){
    .menu-header .menu-overlay-header .menu-header-content{
        color:red;
    }
}

/*Print Styles*/

@media print {
   #sticker{display:none;}
   #moreDetails{display:none;}
   #hide-print{display:none;}
   
  }