/*  PANDAY Ver. 1.0.0
    Copyright 1999 - 2022 JAM Studio
    Visit Us (https://www.jamstudio.it/)    */

/*  =====================================================
    =   Font utilizzati                                 =
    =   font-family: 'Figtree', sans-serif;             =
    =   font-family: 'Montserrat', sans-serif;          =
    =====================================================   */

/*  =====================================================
    =   PALETTE E TYPOGRAPHY                            =
    =====================================================   */
:root {
    --green-d       : #004416;
    --green         : #3B5317;
    --green-c       : #56B040;
    --yellow        : #FDC500;
    --yellow-l      : #FFFAD2;
    --black         : #1F1F1F;
    --black-m       : #2B2B2B;
    --grey-m        : #808080;
    --grey          : #CECECE;
    --white-m       : #F5F5F5;
    --white         : #FFF;
    --red           : #FC2A3B;
    --header-font   : 'Montserrat', sans-serif;
    --text-font     : 'Figtree', sans-serif;
}
/*  =====================================================
    =   SCROLL BAR                                      =
    =====================================================   */
::-webkit-scrollbar {
  width: .5rem;
}
::-webkit-scrollbar-track {
  box-shadow: none;
  border-radius: 0;
  background: var(--green);
}
::-webkit-scrollbar-thumb {
  background: var(--white);
  border: 0;
  border-radius: 0;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--yellow);
  border: 0;
  background-clip: content-box;
}
/*  =====================================================
    =   SETTING BASE PAGINA                             =
    =====================================================   */
html, body { height: 100%; margin: 0; }
html { scroll-padding-top: 8rem; }
body {
    font-family: var(--text-font);
    background-image: url('../images/misc/bg-pattern.svg');
    background-repeat: repeat;
    background-position: center;
    background-size: 10rem;
    background-color: var(--green);
}
/*      --> Typography                                      */
h1, h2, h3, h4, h5, h6 { font-family: var(--header-font);}
h1, h2 { font-weight: 900; }
p, li, a, th, td { text-decoration: none; }
b, strong { font-weight: 700!important; }
a { color: var(--green-d); }
a:hover { color: var(--yellow); }
/*  =====================================================
    =   ICONS                                           =
    =====================================================   */
.icon {
    min-width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
}
.icon.green { background-color: var(--green-d); }
.icon.white { background-color: var(--white); }
.icon-sm { min-width: 1rem!important; height: 1rem!important; }
.icon-md { min-width: 1.5rem!important; height: 1.5rem!important; }
.icon-lg { min-width: 2rem!important; height: 2rem!important; }
.icon-xl { min-width: 2.5rem!important; height: 2.5rem!important; }
.icon-xxl { min-width: 3rem!important; height: 3rem!important; }
.icon-big { min-width: 5rem!important; height: 5rem!important; }
/*      --> Icone varie                                     */
.ico-menu {
    -webkit-mask: url("../images/icons/sys-menu.svg") no-repeat center;
    mask: url("../images/icons/sys-menu.svg") no-repeat center;
}
.ico-back {
    -webkit-mask: url("../images/icons/sys-back.svg") no-repeat center;
    mask: url("../images/icons/sys-back.svg") no-repeat center;
}
.ico-close {
    -webkit-mask: url("../images/icons/sys-close.svg") no-repeat center;
    mask: url("../images/icons/sys-close.svg") no-repeat center;
}
.ico-chevron-x {
    -webkit-mask: url("../images/icons/sys-chevron-x.svg") no-repeat center;
    mask: url("../images/icons/sys-chevron-x.svg") no-repeat center;
}
.ico-chevron-y {
    -webkit-mask: url("../images/icons/sys-chevron-y.svg") no-repeat center;
    mask: url("../images/icons/sys-chevron-y.svg") no-repeat center;
}
/*      --> Icone Contatti                                  */
.ico-address {
    -webkit-mask: url("../images/icons/contacts-address.svg") no-repeat center;
    mask: url("../images/icons/contacts-address.svg") no-repeat center;
}
.ico-phone {
    -webkit-mask: url("../images/icons/contacts-phone.svg") no-repeat center;
    mask: url("../images/icons/contacts-phone.svg") no-repeat center;
}
.ico-whatsapp {
    -webkit-mask: url("../images/icons/contacts-whatsapp.svg") no-repeat center;
    mask: url("../images/icons/contacts-whatsapp.svg") no-repeat center;
}
/*      --> Icone social                                    */
.ico-facebook {
    -webkit-mask: url("../images/icons/social-facebook.svg") no-repeat center;
    mask: url("../images/icons/social-facebook.svg") no-repeat center;
}
.ico-instagram {
    -webkit-mask: url("../images/icons/social-instagram.svg") no-repeat center;
    mask: url("../images/icons/social-instagram.svg") no-repeat center;
}
/*  =====================================================
    =   BUTTONS                                         =
    =====================================================   */
.btn-circle, .btn-social, .btn-dropdown-menu, .btn-top {
    width: 3rem;
    height: 3rem;
    border-radius: 50rem;
    background-color: var(--yellow);
}
.btn-circle .icon, .btn-dropdown-menu .btn-dropdown-menu-icon {
    background-color: var(--black);
}
.btn-circle:hover, .btn-dropdown-menu:hover {
    background-color: var(--green);
}
.btn-circle:hover .icon, .btn-dropdown-menu:hover .btn-dropdown-menu-icon {
    background-color: var(--yellow);
}
.btn-social {
    background-color: var(--green-d);
}
.btn-social .icon {
    background-color: var(--white);
}
.btn-social:hover {
    background-color: var(--yellow);
}
.btn-social:hover .icon {
    background-color: var(--black);
}
.btn-top, .btn-top:hover {
    width: 3rem;
    height: 3rem;
    border-radius: .5rem 0 0 .5rem;
    background-color: var(--black-m);
    opacity: .75;
    position: fixed;
    right: 0;
    bottom: 3rem;
    z-index: 1040;
}
.btn-top .icon {
    background-color: var(--white);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*      --> Dropdown Lingua                                 */
.btn-lang, .btn-lang:hover {
    min-width: 3rem;
    width: 100%;
    height: 3rem;
    color: var(--white);
    font-size: .875rem;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--black-m);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-lang.show, .btn-lang:hover.show {
    border-radius: 1.5rem 1.5rem 0 0;
}
.btn-lang-flag {
    width: 2rem;
    height: 2rem;
}
.btn-lang-icon, .menu-collapse-icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--white);
    -webkit-mask: url("../images/icons/sys-chevron-y.svg") no-repeat center;
    mask: url("../images/icons/sys-chevron-y.svg") no-repeat center;
    display: inline-block;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: -webkit-transform .5s ease-in-out !important;
    transition: transform .5s ease-in-out !important;
}
.btn-lang:not(.show) .btn-lang-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform .5s ease-in-out !important;
    transition: transform .5s ease-in-out !important;
}

.btn-modal, .btn-modal:hover {
    background-color: var(--yellow);
    color: var(--black);    
}

.lang-dropdown-menu {
    margin-top: 0!important;
    width: 100%;
    min-width: 100%;
    background-color: var(--black-m);
    left: 0;
    right: 0;
    border: 0;
    border-radius: 0 0 1.5rem 1.5rem;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.25);
    overflow: hidden;
}
.lang-dropdown-item {
    padding: .5rem;
    font-weight: 300;
    color: var(--white);
    text-align: center;
    display: flex;
    align-items: center;
}
.lang-dropdown-flag {
    margin-left: .25rem;
    width: 2rem;
    height: 2rem;
}
.lang-dropdown-item:hover {
    color: var(--yellow);
    background-color: var(--black);
}
.lang-dropdown-item.active, .lang-dropdown-item:active {
    color: var(--black);
    text-decoration: none;
    background-color: var(--yellow);
}
/*      --> Dropdown Menu Desktop                           */
.btn-dropdown-menu-icon {
    width: 2rem;
    height: 2rem;
    -webkit-mask: url("../images/icons/sys-close.svg") no-repeat center;
    mask: url("../images/icons/sys-close.svg") no-repeat center;
    display: inline-block;
}
.btn-dropdown-menu:not(.show) .btn-dropdown-menu-icon {
    -webkit-mask: url("../images/icons/sys-menu.svg") no-repeat center;
    mask: url("../images/icons/sys-menu.svg") no-repeat center;
}
.btn-dropdown-menu.show, .btn-dropdown-menu:hover.show {
    border-radius: 1.5rem 1.5rem 0 0;
    background-color: var(--black-m);
}
.btn-dropdown-menu.show .btn-dropdown-menu-icon, .btn-dropdown-menu:hover.show .btn-dropdown-menu-icon {
    background-color: var(--yellow);
}
.nav-dropdown-menu {
    margin-top: 0!important;
    padding: 1rem 0;
    width: 100%;
    min-width: 14rem;
    background-color: var(--black-m);
    left: auto;
    right: 0;
    border: 0;
    border-radius: 1.5rem 0 1.5rem 1.5rem;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.25);
    overflow: hidden;
}
.big-button {
    width: 12rem;
    height: 5rem;
    font-family: var(--header-font);
    font-size: 2rem;
    font-weight: 700;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-card {
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50rem;
}
.btn-card.drink {
    padding: .125rem .5rem;
    font-size: .75rem;
    border-radius: .5rem;

}
.btn-prenota, .btn-prenota:hover {
    color: var(--white);
    background-color: var(--green-c);
    border-color: var(--green-c);
}
.btn-prenota-icon {
    min-width: 4rem;
    height: 4rem;
    display: inline-block;
    position: absolute;
    top: 3.5rem;
    right: 4rem;
}
.btn-contacts {
    width: 10rem;
    height: 3rem;
    font-family: var(--header-font);
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-contacts-icon {
    width: 2rem;
    height: 2rem;
}

.btn-green, .btn-green:hover {
    color: var(--white);
    background-color: var(--green-d);
    border-color: var(--green-d);
}
.btn-yellow, .btn-yellow:hover {
    color: var(--green-d);
    background-color: var(--yellow);
    border-color: var(--yellow);
}
.btn-category, .btn-category:hover {
    width: 100%;
    height: 7rem;
    font-family: var(--header-font);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--green-d);
    background-color: var(--yellow);
    border-color: var(--yellow);
    border-radius: 1.5rem;
    display: flex;
    align-items:flex-end;
    justify-content: center;
}
.btn-list, .btn-list:hover {
    width: 10rem;
    height: 10rem;
    background-color: var(--yellow);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.btn-list-label {
    font-family: var(--header-font);
    font-size: .875rem;
    font-weight: 700;
    color: var(--yellow);
    text-align: center;
    line-height: 1;
    background-color: var(--green-d);
    display: block;
}
.btn-list-img {
    width: 100%;
    height: 100%;
    max-width: 9rem;
    max-height: 6rem;
}
@media (max-width: 575.98px) {
    .btn-category, .btn-category:hover {
        height: 6rem;
    }
}
@media (min-width: 992px) {
    .btn-top {
        position: absolute;
        right: 0;
        bottom: 3rem;
    }
}

/*  =====================================================
    =   ELEMENTI COMUNI                                 =
    =====================================================   */
.mw-1920 { max-width: 1920px; }
.mw-1760 { max-width: 1760px; }
.mw-1600 { max-width: 1600px; }
.mw-1400 { max-width: 1400px; }
.mw-1200 { max-width: 1200px; }
.mw-992  { max-width: 992px;  }
.mw-960  { max-width: 960px;  }
.mw-768  { max-width: 768px;  }
.mw-576  { max-width: 576px;  }
.mw-480  { max-width: 480px;  }
.mw-320  { max-width: 320px;  }
.big-button-container {
    width: 100%;
    position: relative;
}
.big-button-icon {
    width: 8rem;
    height: auto;
}
.big-button-icon.menu-category {
    position: absolute;
    top:0;
}
.big-button-icon.right {
    margin-top: -1.75rem;
    margin-left: auto;
}
.green-text {
    color: var(--green-d);
    font-weight: 500;
}
.menu-page {
    background-color: var(--yellow-l)
}
@media (max-width: 575.98px) {
    .big-button-icon.menu-category {
        width: 7rem;
    }
}
/*  =====================================================
    =   NAVBAR                                          =
    =====================================================   */
.custombar {
    width: 100%;
    background: var(--black);
}
.main-logo {
    width: 10rem;
    height: auto;
}
.quick-links-box {
    width: 100%;
    max-width: 6rem;
}
@media (min-width: 992px) {
    .custombar {
        border-radius: 2rem 2rem 0 0;
    }
}

/*  =====================================================
    =   OFFCANVAS MENU                                  =
    =====================================================   */
.main-menu {
    width: 19rem!important;
    background-color: rgba(31, 31, 31, 0.85);
    backdrop-filter: blur(.25rem);
    -webkit-backdrop-filter: blur(.25rem);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.25)!important;
}
.menu-item {
    padding: .5rem 1rem;
    font-family: var(--header-font);
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    display: flex;
    align-items: center;
}
.menu-item:hover {
    color: var(--yellow);
    background-color: var(--black);
}
.menu-item:hover .menu-collapse-icon  {
    background-color: var(--yellow);
}
.menu-item.active, .menu-item:active {
    color: var(--black);
    text-decoration: none;
    background-color: var(--yellow);
}
.menu-item .prenota-icon {
    min-width: 2rem;
    height: 2rem;
    display: inline-block;
}
.menu-collapse-link:focus, .menu-collapse-link:active {
    color: var(--yellow);
    background-color: transparent;
}
.menu-collapse-link:focus .menu-collapse-icon, .menu-collapse-link:active .menu-collapse-icon {
    background-color: var(--yellow)
}
.menu-collapse-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform .5s ease-in-out !important;
    transition: transform .5s ease-in-out !important;
}
.menu-collapse-link:not(.collapsed) {
    color: var(--yellow);
    background-color: var(--black);
}
.menu-collapse-link:not(.collapsed) .menu-collapse-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: -webkit-transform .5s ease-in-out !important;
    transition: transform .5s ease-in-out !important;
}
.menu-collapse {
    background-color: var(--black);
}
.menu-collapse-item {
    padding: .25rem 1rem;
    font-family: var(--text-font);
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--white);
}
@media (max-width: 991.98px) {
    .menu-item:hover {
        background-color: transparent;
    }
    .menu-collapse-link:not(.collapsed) {
        background-color: transparent;
    }
    .menu-collapse {
        background-color: transparent;
        border-left: 1px solid var(--white);
    }
}
@media (min-width: 576px) {
    .main-menu {
        width: 25rem!important;
    }
}
/*  =====================================================
    =   HEADERS                                         =
    =====================================================   */
.fullheight-header {
    height: 100%;
    background-color: var(--yellow-l);
}
.fullheight-header.homepage {
    height: 100%;
    min-height: 640px;
    max-height: 720px;
    background-image: url('../images/misc/wave-bg.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 1080px;
    background-color: var(--yellow);
}
.fullheight-header .navbar {
    position: unset;
    background-color: var(--black);
}
.list-header {
    width: 100%;
}
.prod-header {
    width: 100%;
    position: relative;
}
.contacts-header {
    height: auto;
    background-image: url('../images/misc/wave-bg.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 1080px;
    background-color: var(--yellow);
}
@media (max-width: 575.98px) {
    .fullheight-header {
        height: auto;
    }
}
@media (min-width: 992px) {
    .fullheight-header {
        height: 97.5%;
        border-radius: 2rem 2rem 0 0;
    }
    .list-header, .contacts-header, .fullheight-header .navbar {
        border-radius: 2rem 2rem 0 0;
    }
}
/*  =====================================================
    =   FOOTER                                          =
    =====================================================   */
.footer-container {
    color: var(--white);
    font-size: .875rem;
    font-weight: 500;
    background-color: var(--black-m);
    overflow: hidden;
}
.footer-logo-text {
    color: var(--yellow);
    font-size: 1.5rem;
}
.footer-logo-subtext {
    font-size: .875rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.footer-bottom {
    color: var(--yellow);
    font-size: .75rem;
    font-weight: 400;
    background-color: var(--black);
}
.footer-link {
    color: var(--yellow);
    font-size: .875rem;
    white-space: nowrap;
}
.footer-link:hover {
    color: var(--white);
}
/*      --> Firma                                           */
#jamstudio {
    width: auto;
    height: 1.5rem;
}
.logo-signature {
    fill: var(--grey);
}
@media (min-width: 992px) {
    .footer-container {
        border-radius: 0 0 2rem 2rem;
    }
}
/*  =====================================================
    =   HOMEPAGE                                        =
    =====================================================   */
.welcome-container, .map-container {
    width: 100%;
    color: var(--black);
    font-size: .875rem;
    position: relative;
}
.welcome-box-deco, .box-mappa-deco {
    width: 100%;
    position: absolute;
    top: 0;
}
.welcome-box-img {
    width: 6.25rem;
    height: auto;
}
.welcome-box {
    color: var(--black);
    background-color: var(--white);
    border-radius: 1.5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
/*  =====================================================
    =   CATEGORY MENU                                   =
    =====================================================   */
.cat-menu-title {
    color: var(--green-d);
    font-weight: 900;
}
/*  =====================================================
    =   CATEGORY LIST                                          =
    =====================================================   */
.list-container {
    min-height: 86%;
    background-color: var(--green-d);
    position: relative;
}
.list-label {
    width: 100%;
    max-width: 320px;
    height: 4rem;
    background-color: var(--yellow);
}
.list-label-s, .list-label-e {
    width: 2rem;
    height: 4rem;
    -webkit-mask: url("../images/deco/list-label-deco.svg") no-repeat center;
    mask: url("../images/deco/list-label-deco.svg") no-repeat center;
    background-color: var(--green-d);
    display: inline-block;
}
.list-label-s {
    margin-left: -1px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.list-label-e {
    margin-right: -1px;
}
.label-text {
    margin-bottom: 0;
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--green-d);
    line-height: 1;
}
.list-dep {
    width: 100%;
}
.list-dep-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dep-title {
    width: 100%;
    font-family: var(--header-font);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--yellow);
    letter-spacing: .04em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dep-title-icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--yellow);
    -webkit-mask: url("../images/icons/sys-chevron-y.svg") no-repeat center;
    mask: url("../images/icons/sys-chevron-y.svg") no-repeat center;
    display: inline-block;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform .5s ease-in-out !important;
    transition: transform .5s ease-in-out !important;
}
.dep-title:not(.collapsed) .dep-title-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: -webkit-transform .5s ease-in-out !important;
    transition: transform .5s ease-in-out !important;
}
.dep-item {
    width: 100%;
    max-width: 19rem;
    padding: 2rem;
    color: var(--green-d);
    background-color: var(--white);
    border-radius: 1.5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    display: flex;
    position: relative;
}
.dep-item-thumb {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 1rem;
}
.dep-item-title, .dep-item-price {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}
.dep-item-text {
    font-size: .875rem;
    line-height: 1.2;
}
.dep-item.drinks {
    max-width: 20rem;
    padding: .5rem;
    border-radius: 1rem;
}
.dep-item-thumb.drinks {
    width: 6rem;
    height:6rem;
    border-radius: .5rem;
}
.dep-item-title.drinks, .dep-item-price.drinks {
    font-size: 1rem;
    line-height: 1;
}
.dep-item-text.drinks {
    font-size: .75rem;
    line-height: 1;
}
@media (min-width: 992px) {
    .list-container {
        min-height: 768px;
    }
}
/*  =====================================================
    =   SCHEDA PRODOTTO                                        =
    =====================================================   */
.prod-img {
    width: 100%;
    height: auto;
}
.prod-title {
    font-weight: 700;
    color: var(--green-d);
}
.btn-back-list {
    position: absolute;
    top: 1rem;
    left: 1rem;
}
.ico-allergeni {
    width: 4rem!important;
    height: 4rem!important;
}
.title-allergeni {
    font-size: 1.125rem;
    color: var(--green-d);
    line-height: 1;
}
.label-allergeni {
    font-size: .75rem;
    font-weight: 700;
    color: var(--black-m);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .prod-img {
        border-radius: 2rem 2rem 0 0;
    }
}
/*  =====================================================
    =   CONTATTI                                        =
    =====================================================   */
.contacts-label {
    width: 100%;
    max-width: 320px;
    height: 3rem;
    background-color: var(--green-d);
}
.contacts-label-s, .contacts-label-e {
    width: 1.5rem;
    height: 3rem;
    -webkit-mask: url("../images/deco/list-label-deco.svg") no-repeat center;
    mask: url("../images/deco/list-label-deco.svg") no-repeat center;
    background-color: var(--yellow);
    display: inline-block;
}
.contacts-label-s {
    margin-left: -1px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.contacts-label-e {
    margin-right: -1px;
}
.contacts-label-text {
    margin-bottom: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
}
.contacts-link, .contacts-link:hover {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--green-d);
    line-height: 1.3;
    display: flex;
}
.contacts-link .icon {
    background-color: var(--green-d);
}

/*      --> Box Mappa                                       */
.map-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.box-mappa-img {
    width: 8rem;
    height: auto;
}
.box-mappa {
    width: 100%;
    background-color: transparent;
}
.box-mappa iframe {
    width: 100%;
    height: 480px;
    overflow: hidden;
    border: 1px solid var(--grey);
    border-radius: 1.5rem;
}
@media (max-width: 575.98px) {
    .box-mappa iframe {
        height: 320px;
    }
}

.panday-modal{
	color: var(--white);
	background-color: var(--black);	
	border:0;
}

.panday-modal-boby{
	color: var(--white);
	background-color: var(--black-m);	
}