@keyframes fadeEffect {
    from { opacity: 0; }
    to { opacity: 1; }
}
@-webkit-keyframes fadeEffect {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Alata */
@font-face {
    src: url("assets/fonts/Alata/Alata-Regular.ttf");
    font-family: "Alata";
    font-weight: 400;
    font-style: normal;
}
/* CerebriSans */
@font-face {
    src: url("assets/fonts/CerebriSans/Cerebri-Sans-Regular.ttf");
    font-family: "Cerebri Sans";
    font-weight: 400;
    font-style: normal;
}
@font-face {
    src: url("assets/fonts/CerebriSans/Cerebri-Sans-Bold.ttf");
    font-family: "Cerebri Sans";
    font-weight: 700;
    font-style: normal;
}
/* GlacialIndifference */
@font-face {
    src: url("assets/fonts/GlacialIndifference/GlacialIndifference-Regular.otf");
    font-family: "Glacial Indifference";
    font-weight: 400;
    font-style: normal;
}
@font-face {
    src: url("assets/fonts/GlacialIndifference/GlacialIndifference-Italic.otf");
    font-family: "Glacial Indifference";
    font-weight: 400;
    font-style: italic;
}
@font-face {
    src: url("assets/fonts/GlacialIndifference/GlacialIndifference-Bold.otf");
    font-family: "Glacial Indifference";
    font-weight: 700;
    font-style: normal;
}
/* HolidayFree */
@font-face {
    src: url("assets/fonts/HolidayFree/HolidayFree.otf");
    font-family: "Holiday Free";
    font-weight: 400;
    font-style: normal;
}
/* MADEEvolveSans */
@font-face {
    src: url("assets/fonts/MADEEvolveSans/MADE-Evolve-Sans-Medium.otf");
    font-family: "MADE Evolve Sans";
    font-weight: 500;
    font-style: normal;
}
/* Now */
@font-face {
    src: url("assets/fonts/Now/Now-Bold.otf");
    font-family: "Now";
    font-weight: 700;
    font-style: normal;
}
/* TTDrugs */
@font-face {
    src: url("assets/fonts/TTDrugs/TTDrugs-Regular.ttf");
    font-family: "TT Drugs";
    font-weight: 400;
    font-style: normal;
}
@font-face {
    src: url("assets/fonts/TTDrugs/TTDrugs-Bold.ttf");
    font-family: "TT Drugs";
    font-weight: 700;
    font-style: normal;
}

:root {
    --white: #FFFFFF;
    --hover-white: #DBDAD5;
    --light-yellow: #F7EEDF;
    --light-yellow-2: #F5EAD0;
    --dark-yellow: #96906C;
    --hover-dark-yellow: #7B7656;
    --light-green: #EAEEDB;
    --dark-green: #3E4C33;
    --brown: #413B35;
    --dark-brown: #16110D;
}

html, body { height: 100%; font-family: "Alata", sans-serif; }
::-webkit-scrollbar { display: none; }
body.inactive { overflow: hidden; }
body { background: var(--dark-brown); }

/* #view-img { width: auto; max-width: 90vw; height: auto; max-height: 70vh; object-fit: scale-down; } */

#darken { height: 100vh; width: 100vw; background-color: black; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; opacity: 50%; display: none; transition: 0.4s; }
#view { z-index: 5; width: auto; height: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); display: none; opacity: 0%; transition: 0.4s; }

/* #view .closebtn { position: absolute; width: 1.5rem; height: 1.5rem; top: 1rem; right: 1rem; cursor: pointer; filter: invert(45%) sepia(10%) saturate(424%) hue-rotate(166deg) brightness(97%) contrast(86%); opacity: .5; } */
#view-img { width: auto; max-width: 90vw; height: auto; max-height: 70vh; object-fit: scale-down; }
#view .text { color: var(--white); font-size: .9rem; font-family: "Cerebri Sans"; font-weight: 400; line-height: 1; margin-bottom: 0; }
.ver { display: block!important; }
.ver-2 { opacity: 100%!important; }
.gallery-np-item { display: inline-block; }
.gallery-np-item img { width: auto; height: .9rem; filter: invert(100%); vertical-align: -2px; }
#view .controll { position: absolute; right: 15px; }
/* .gallery-np-item:hover > img { opacity: 1; } */

#wa { text-decoration: none; position: fixed; bottom: 2vh; left: 80vw; z-index: 2; }
#wa img { width: 3rem; height: auto; }

main { min-height: 100vh; position: relative; background-image: url("assets/img/bg-header-restaurant-3.jpg"); background-repeat: no-repeat; background-size: cover; background-position: 60% 50%; z-index: 1; }
header { height: 100vh; position: relative; display: none; z-index: 2; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; }
header.active { display: block; }
header .container { display: flex; height: 100%; justify-content: space-evenly; align-items: center; flex-direction: column; padding: 7rem 0; }
header .container .headerContent { display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; align-content: center; gap: 1rem; }
header .logo { width: 75vw; max-width: 13rem; margin-bottom: 0; }
header .btn-lang-select { border: 2px solid var(--white); background-color: transparent; padding: 0; line-height: 1; outline: none; }
header .btn-lang-select .content { background-color: var(--white); padding: .5rem 1.5rem; margin: .25rem; display: inline-block; color: var(--dark-green); font-size: 1.2rem; font-weight: 700; font-family: "TT Drugs"; line-height: 1; width: calc(100% - .5rem); white-space: nowrap; }
header .btn-lang-select .content .lang-flag { width: auto; height: 1.5rem; vertical-align: text-bottom; margin-left: .5rem; }

nav { height: 100vh; position: relative; display: none; z-index: 2; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; }
nav.active { display: block; }
nav .container { display: flex; height: 100%; justify-content: space-evenly; align-items: center; flex-direction: column; padding: 7rem 0; }
nav .logo { width: 75vw; max-width: 13rem; margin-bottom: 2rem; }
nav .nav { display: none; text-align: center; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 1rem; }
nav .nav.active { display: flex; opacity: 1; }
nav .nav .cat { flex: 0 0 calc(50% - 2rem); border: 2px solid var(--white); background-color: transparent; padding: 0; line-height: 1; outline: none; width: 50vw; max-width: 300px; min-width: 130px; }
nav .nav .cat .content { color: var(--dark-yellow);  background-color: var(--white); transition: 0.5s; border: 0; position: relative; text-align: center; font-family: "TT Drugs"; padding: .5rem 1.5rem; margin: .25rem; display: inline-block; width: calc(100% - .5rem); white-space: nowrap; line-height: 1; font-size: 1.2rem; outline: none; font-weight: 700; }
nav .nav .cat.gal .content { background-color: var(--dark-yellow); color: var(--white); }
nav .nav .cat:hover {  }

.dropdown { position: absolute; top: 2rem; right: 2rem; }
#btn-setLang { color: var(--light-yellow); padding: 4px .5rem; background-color: var(--dark-yellow); font-size: 1rem; line-height: 1; outline: none; border: 0; text-transform: uppercase; }
#btn-setLang[aria-expanded="true"]::after { transform: rotate(180deg); }
#btn-setLang img { width: 1.3rem; height: 1.3rem; vertical-align: sub; margin-right: .3rem; }
.dropdown-menu { background-color: transparent; min-width: 0; border: 0; margin-top: 0; padding-top: 0; }
.dropdown-menu.show { width: 100%; }
.dropdown-item { background-color: var(--dark-yellow); display: inline-block; color: var(--light-yellow); font-size: 1rem; padding: 4px .5rem; }
.dropdown-item.active { background-color: var(--hover-dark-yellow); transition: 0.5s; }
.dropdown-item:hover { background-color: var(--hover-dark-yellow); color: var(--light-yellow); }
.dropdown-item img { width: 1.3rem; height: 1.3rem; vertical-align: sub; margin-right: .3rem; }
.dropdown-toggle::after { margin-left: .5rem; }

.category.gallery { background: var(--dark-brown); }
.category.gallery h2.title { color: var(--white); font-family: "Glacial Indifference"; text-transform: uppercase; font-weight: 400; font-size: 2rem; margin-bottom: 1rem; }
.category.gallery hr.title-line { border-top: 2px solid var(--white); margin-top: 0; margin-bottom: 2rem; }
.category.gallery .content {  }
.category.gallery .content .galeria-img-item { width: 100%; position: relative; padding: .4rem; }
.category.gallery .content .galeria-img-item.col-12::after { content: ""; display: block; padding-bottom: 60%; }
.category.gallery .content .galeria-img-item.col-6::after { content: ""; display: block; padding-bottom: 120%; }
.category.gallery .content .galeria-img-item img { position: absolute; width: calc(100% - .8rem); height: calc(100% - .8rem); object-fit: cover; transition: 0.6s; cursor: pointer; }
.category.gallery .content .galeria-img-item img:hover { opacity: 70%; }

.category { transform: translateX(100%); transition: 0.5s; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3; overflow-y: auto; overflow-x: hidden; padding: 1.5rem 0 3rem 0; background-color: var(--light-yellow); }
.category .subcategory { position: relative; }
.bg-light-yellow-2 { background-color: var(--light-yellow-2)!important; }
.bg-light-yellow { background-color: var(--light-yellow)!important; }
.bg-white { background-color: var(--white)!important; }
.bg-light-green { background-color: var(--light-green)!important; }
.color-dark-green { color: var(--dark-green)!important; }

.category.active { transform: translateX(0); }
.category h2.title { margin-top: 2rem; }
.category h2.title .text { font-size: 2.2rem; text-align: left; margin-bottom: 0; line-height: 1; color: var(--dark-green); font-family: "Glacial Indifference"; text-transform: uppercase; font-weight: 400; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: center; }
.category h2.title .text span.subtitle { font-size: 1.8rem; color: var(--dark-yellow); margin-bottom: .5rem; }
.category h2.title .img {  }
.category h2.title .img img { display: block; width: 100%; height: auto; max-height: 90px; margin: 0 0 0 auto; text-align: end; }
.category img.title { width: auto; height: auto; max-height: 18vh; max-width: 100%; }
.category h2.title img.title-decoration { width: 2rem; height: 2rem; vertical-align: baseline; }

.category button.subtitle { background: transparent; border: 0; display: block; margin: 0 auto; outline: none; width: 100%; padding-left: 0; padding-right: 0; }
.category :is(h3.subtitle, button.subtitle) { position: relative; font-size: 1.7rem; text-align: start; height: 1rem; margin-top: 0; margin-bottom: 1.7rem; line-height: 1; color: var(--dark-yellow); font-family: "Glacial Indifference"; letter-spacing: 1px; text-transform: uppercase; border-bottom: 2px solid var(--dark-green); font-weight: 400; }
.category :is(h3.subtitle, button.subtitle) .subtitle-text { position: relative; padding-right: .5rem; }
.category.bg-light-yellow-2 :is(h3.subtitle, button.subtitle) .subtitle-text { background-color: var(--light-yellow-2); }
.category.bg-light-yellow :is(h3.subtitle, button.subtitle) .subtitle-text { background-color: var(--light-yellow); }
.category.bg-white :is(h3.subtitle, button.subtitle) .subtitle-text { background-color: var(--white); }
.category.bg-light-green :is(h3.subtitle, button.subtitle) .subtitle-text { background-color: var(--light-green); }

.category button.subtitle-2 { background: transparent; border: 0; display: block; margin: 0 auto; outline: none; width: 100%; }
.category :is(h3.subtitle-2, button.subtitle-2) { position: relative; font-size: 1.4rem; text-align: center; height: 1rem; margin-top: 0; margin-bottom: 3.4rem; line-height: 1.5; color: var(--dark-green); font-family: "Holiday Free"; letter-spacing: 1px; border-bottom: 2px solid var(--dark-green); font-weight: 400; }
.category :is(h3.subtitle-2, button.subtitle-2) .subtitle-text { position: relative; padding-left: .5rem; padding-right: .5rem; }
.category.bg-light-yellow-2 :is(h3.subtitle-2, button.subtitle-2) .subtitle-text { background-color: var(--light-yellow-2); }
.category.bg-light-yellow :is(h3.subtitle-2, button.subtitle-2) .subtitle-text { background-color: var(--light-yellow); }
.category.bg-white :is(h3.subtitle-2, button.subtitle-2) .subtitle-text { background-color: var(--white); }
.category.bg-light-green :is(h3.subtitle-2, button.subtitle-2) .subtitle-text { background-color: var(--light-green); }

.category button.subtitle-3 { background: transparent; border: 0; display: block; margin: 0 auto; outline: none; width: 100%; }
.category :is(h3.subtitle-3, button.subtitle-3) { position: relative; font-size: 1.4rem; text-align: center; height: 1rem; margin-top: 0; margin-bottom: 1.7rem; line-height: 1; color: var(--dark-yellow); font-family: "Glacial Indifference"; letter-spacing: 1px; border-bottom: 2px solid var(--dark-green); font-weight: 400; text-transform: uppercase; }
.category :is(h3.subtitle-3, button.subtitle-3) .subtitle-text { position: relative; padding-left: .5rem; padding-right: .5rem; }
.category.bg-light-yellow-2 :is(h3.subtitle-3, button.subtitle-3) .subtitle-text { background-color: var(--light-yellow-2); }
.category.bg-light-yellow :is(h3.subtitle-3, button.subtitle-3) .subtitle-text { background-color: var(--light-yellow); }
.category.bg-white :is(h3.subtitle-3, button.subtitle-3) .subtitle-text { background-color: var(--white); }
.category.bg-light-green :is(h3.subtitle-3, button.subtitle-3) .subtitle-text { background-color: var(--light-green); }

.category hr.title-line { border-top: 2px solid var(--dark-green); margin-top: 0; }
.category span.subtitle-type-2 { padding-left: 15px; color: var(--dark-yellow); text-transform: uppercase; font-size: 1.5rem; font-weight: 400; line-height: 1; font-family: "Glacial Indifference"; font-style: italic; }
.category .subtitle-type-2 hr { --m-size: calc(.6rem - 2px); margin-top: var(--m-size); margin-bottom: var(--m-size); border: 0; border-top: 2px solid var(--dark-green); }
.category .closebtn { position: absolute; width: 1.5rem; height: 1.5rem; top: 1rem; right: 1rem; cursor: pointer; filter: invert(45%) sepia(10%) saturate(424%) hue-rotate(166deg) brightness(97%) contrast(86%); opacity: .5; z-index: 3; }
.category .platillos { padding-top: .1rem; }
.category .platillos .platillo { margin-bottom: 1rem; }
.category .platillos .platillo .veg-icon { width: 1rem; height: 1rem; margin-left: .3rem; vertical-align: bottom; }
.category .platillos .platillo .suggestion-icon { width: 1rem; height: 1rem; margin-left: .3rem; vertical-align: bottom; }
.category .platillos .platillo .gluten-icon { width: 1rem; height: 1rem; margin-left: .3rem; vertical-align: bottom; }
.category .platillos .platillo .chile-icon { width: 1rem; height: 1rem; margin-left: .3rem; vertical-align: bottom; }
.category .platillos .platillo .name { color: var(--dark-green); font-weight: 700; font-size: .95rem; letter-spacing: 1px; line-height: 1; margin-bottom: .5rem }
:is(#Bebidas, #Drinks).category .platillos .platillo .name { text-transform: uppercase; font-family: "TT Drugs"; font-weight: 400; }
.category .platillos .platillo .name .subdescription { color: var(--dark-yellow); font-size: .8rem; }
.category .platillos .name-big { font-family: "Glacial Indifference"; color: var(--dark-green); font-weight: 400; font-style: italic; font-size: 1.5rem; letter-spacing: 1px; line-height: 1; text-transform: uppercase; }
.category .platillos .platillo .price { padding-left: 0; color: var(--dark-green); font-weight: 700; font-size: .9rem; letter-spacing: 1px; text-align: right; line-height: 1; text-transform: uppercase; }
.category .platillos .platillo .description { color: var(--dark-green); font-weight: 400; font-size: .85rem; letter-spacing: 1px; line-height: 1.2; font-family: "Cerebri Sans"; }
:is(#Bebidas, #Drinks).category .platillos .platillo .description { text-transform: uppercase; font-family: "MADE Evolve Sans"; font-weight: 500; }
.category .platillos .platillo-type-1 .price { line-height: 1; }
.category .platillos .platillo-type-2 .text { line-height: 2; }
.category .platillos .platillo-type-2 .prevLH .text { line-height: 1.2; }
.category .platillos .platillo-type-2 .text:before { content: "• "; }
.category .platillos .platillo-type-4 { margin: .5rem 0 1rem 0; }
.category .platillos .platillo-type-4 .name { color: var(--brown); font-family: "TT Drugs"; font-weight: 700; font-size: 1rem; letter-spacing: 0; line-height: 1; }
.category .platillos .platillo-type-4 .price { color: var(--brown); font-family: "TT Drugs"; font-weight: 400; font-size: 1rem; letter-spacing: 0; line-height: 1; }
.category .platillos .platillo-type-5 .name { color: var(--dark-green); font-weight: 400; font-size: 1.2rem; letter-spacing: 0; line-height: 1.5; text-transform: uppercase; font-family: "Glacial Indifference"; font-style: italic; }
.category .platillos .platillo-type-5 .description { color: var(--brown); font-weight: 400; font-size: 1rem; letter-spacing: 0; line-height: 1.5; font-family: "TT Drugs"; margin-bottom: .5rem; }
.category .platillos .platillo-type-5 .description .bold { font-weight: 700; }
.category .platillos .platillo-type-5 .price { color: var(--brown); font-weight: 400; font-size: 1rem; letter-spacing: 0; line-height: 1.5; font-family: "TT Drugs"; }
.category .platillos .platillo-type-6 { margin-left: 0; margin-right: 0; }
.category .platillos .platillo-type-6 .platillo-type-1 { margin-left: 0; margin-right: 0; }
.category .platillos .platillo-type-6 .platillo-type-1 { padding-left: 0; padding-right: 0; }
.category .platillos .platillo-type-6 .platillo-type-1 :is(.name, .description) { padding-left: 0; }
.category .platillos .platillo-type-6 .platillo-small-img { padding: 0; }
.category .platillos .platillo-type-6 .platillo-small-img img { width: 100%; height: auto; display: block; margin: 0 auto; }
.category .platillos .platillo .note { color: var(--dark-yellow); text-transform: uppercase; font-style: italic; }
.category .platillos .platillo-type-extra { color: var(--dark-yellow); text-transform: uppercase; font-weight: 600; font-size: .9rem; letter-spacing: 1px; line-height: 1; }
.category .platillos .platillo-type-extra .veg-icon { width: 1.2rem; height: 1.2rem; vertical-align: bottom; }
.category .platillos .platillo-type-extra .suggestion-icon { width: 1.2rem; height: 1.2rem; vertical-align: bottom; }
.category .platillos .platillo-type-extra .gluten-icon { width: 1.2rem; height: 1.2rem; vertical-align: bottom; }
.category .platillos .platillo-type-extra .chile-icon { width: 1.2rem; height: 1.2rem; vertical-align: bottom; }
.category .note { margin-bottom: 1.5rem; color: var(--dark-yellow); font-weight: 600; font-size: .7rem; letter-spacing: 1px; line-height: 1.2; text-align: center; }
.dark-green { color: var(--dark-green); }
:is(#Desayuno, #Breakfast) .name { text-transform: uppercase; }

footer { background: var(--dark-brown); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 1.5rem 0 3rem 0; text-align: center; }
footer p.title { text-align: center; font-weight: 600; font-size: 1.4rem; margin: 0; margin-bottom: 1.5rem; line-height: 1; color: var(--white); text-transform: uppercase; font-family: "Glacial Indifference"; font-weight: 400; }
footer .text { text-align: center; font-weight: 500; font-size: 1rem; color: var(--white); margin-bottom: 2rem; font-family: "Cerebri Sans"; font-weight: 400; }
footer .box { border: 3px solid var(--dark-yellow); padding: .3rem; margin-bottom: 2rem; max-width: calc(600px + .6rem); margin-left: auto; margin-right: auto; }
/* footer .box .title { background-color: var(--white); margin: 0 -1px; padding: .4rem 0; }
footer .box .text { padding: .7rem 0; } */
footer .tel { line-height: 1; border: 1px solid var(--white); padding: .3rem; }
footer .tel .content { background-color: var(--white); color: var(--dark-brown); font-weight: 500; font-size: 1rem; line-height: 1; padding: .3rem .7rem; text-decoration: none; margin: 1rem auto 3rem auto; display: inline-block; }
footer .redes .icon { display: inline-block; }
footer .redes .icon img { width: 2rem; height: 2rem; border-radius: 25%; filter: invert(100%); }

#qartaonline { position: relative; bottom: 0; width: 100%; background-color: #0f0f0f; }
#qartaonline p { font-size: 0.7rem; }
#qartaonline a { color: #fff; transition: 0.5s; }
#qartaonline a:hover { color: #f91e39; }