/****** CUSTOM CSS *****/
/*** FONTS ***/
@font-face {
    font-family: 'Alesantria Mane Demo Version';
    src: local('../fonts/AlesantriaManeDemoVersion.woff2') format('woff2'),
         local('../fonts/AlesantriaManeDemoVersion.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*** Root ***/
:root {
    /* colors */
    --brown-color: #603813;
    --white-color: #fff;
    --black-color: #000;
    --beige-color: #f3d8c3;
    /* fonts */
    --main-font: 'Nunito', sans-serif;
    --heading-font: 'Alesantria Mane Demo Version';
}
/*** GENERAL ***/
html {scroll-behavior: smooth;-webkit-scroll-behavior: smooth;}
html:focus-within {scroll-behavior: smooth;}
body {overflow-x: hidden;}
body, p, h1, h2, h3, h4 {font-family: var(--main-font);}
p {font-size: 1.1rem;}
.no-padding {padding: 0 !important;}
.p-destacado {color: var(--brown-color);font-weight: bold;}
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: var(--beige-color);}
::-webkit-scrollbar-thumb {background: var(--brown-color);}
::-webkit-scrollbar-thumb:hover {background: var(--brown-color);} 
/** Nav Pills **/
.nav-pills {grid-gap: 15px;justify-content: center;}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {background-color: var(--brown-color);}
.nav-pills .nav-link {font-family: var(--main-font);text-shadow: none;}
.nav-pills .nav-link:hover, .nav-pills .nav-link:focus {background-color: var(--brown-color);color: var(--white-color);}
/** Tabs **/
.tab-pane {padding: 40px 0;}
.tab-pane .row {grid-row-gap: 30px;row-gap: 30px;}
.tab-pane img.img-fluid {width: 200px;height: 150px;object-fit: contain;}
.tab-pane h5 {color: var(--white-color);font-weight: bold;}
.tab-pane small {color: var(--white-color);font-size: 14px;}
.tab-pane span.text-primary {color: var(--beige-color) !important;}
/*** MENU ***/
.navbar-expand-lg .navbar-collapse {justify-content: center;}
.navbar-expand-lg .navbar-nav {grid-gap: 20px;}
.nav-link {color: var(--white-color);font-family: var(--heading-font);font-size: 24px;text-shadow: 2px 2px rgba(0,0,0,.7);}
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover, .navbar-nav .nav-link:active {color: var(--brown-color);text-shadow: 2px 2px rgba(255,255,255,.7);transition: all .5s ease;}
.sticky {position: fixed;width: 100%;padding: 0;left: 0;top: 0;z-index: 100;border-top: 0;-moz-transition: padding .2s ease-in;-o-transition: padding .2s ease-in;-webkit-transition: padding .2s ease-in;transition: padding .2s ease-in;-moz-transition: background .2s ease-in;-o-transition: background .2s ease-in;-webkit-transition: background .2s ease-in;transition: background .2s ease-in;background: rgba(0,0,0,.6);}
.navbar-brand img {transition: all .2s ease-out;}
.sticky .navbar-brand img {width: 100px;height: auto;transition: all .2s ease-in;}
/*** COVER ***/
#hero {height: 100vh;}
video.bg-video {position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;transform: translateX(-50%) translateY(-50%);z-index: 0;}
/*** ABOUT ***/
#about {position: relative;z-index: 9;height: 100%;background-color: var(--white-color);}
#about.container-fluid::after {content: '';position: absolute;width: 100%;height: 100%;display: block;background-image: url(../../img/bowling-background.png);background-size: 25%;background-position: left bottom;background-repeat: no-repeat;bottom: 0;z-index: -1;opacity: .4;}
#about > .container {justify-content: space-between;grid-gap: 60px;align-items: center;    padding: 70px 0 !important;}
.about-text {display: flex;flex-direction: column;position: relative;}
.about-text > span {font-family: 'Alesantria Mane Demo Version';position: relative;color: var(--brown-color);font-size: 25px;align-self: center;margin-bottom: 0;}
.about-text > span::before {content: '';position: relative;margin-right: 15px;height: 2px;width: 70px;background-color: var(--brown-color);display: inline-block;vertical-align: middle;}
.about-text > span::after {content: '';position: relative;margin-left: 15px;height: 2px;width: 70px;background-color: var(--brown-color);display: inline-block;vertical-align: middle;}
.about-text h1 {font-weight: bold;text-align: center;margin-bottom: 35px;}
.about-text h1 > span {font-size: 30px;color: var(--brown-color);font-weight: bold;}
.about-text p {text-align: justify;}
.about-imgs {position: relative;}
.about-imgs .container {position: relative;display: flex;flex-wrap: wrap;grid-gap: 20px;}
.about-imgs .container div {max-width: 320px;display: flex;}
.about-imgs .container div img {object-fit: cover;height: 320px;}
.about-imgs > .container > div:nth-child(2) > img {max-width: 250px;max-height: 250px;align-self: flex-end;}
.about-imgs > .container > div:nth-child(3) {justify-content: flex-end;}
.about-imgs > .container > div:nth-child(3) > img {max-width: 250px;max-height: 250px;align-self: flex-start;}
/*** IDIOMAS ***/
.languages {display: flex;margin: 0 auto;justify-content: center;flex-wrap: nowrap;align-items: center;padding: 15px 0;}
.languages > ul {list-style: none;padding: 0;margin: 0;display: flex;grid-gap: 15px;}
.languages > ul > li {}
/*** CARTA ***/
#carta {position: relative;z-index: 9;height: 100%;background-image: url(../../img/fondo-carta.jpg);background-size: cover;background-repeat: no-repeat;background-position: center;}
#carta_restaurant {position: relative;z-index: 9;height: 100vh;background-image: url(../../img/fondo-carta.jpg);background-size: cover;background-repeat: no-repeat;background-position: center;overflow: hidden;}
#carta_restaurant::before {content: '';display: block;position: absolute;right: 30px;bottom: 30px;width: 150px;height: 114px;background-image: url(../../brand/friends-kitchen-logo.png);background-repeat: no-repeat;background-size: contain;background-position: center;}
#carta > .container {justify-content: center;align-items: center;padding: 70px 0 !important;flex-direction: column;}
#carta_restaurant > .container {justify-content: space-between;align-items: center;padding: 20px 0 !important;flex-direction: column;max-height: 100vh;max-width: 1920px;}
#carta > .container > span, #carta_restaurant > .container > span {font-family: 'Alesantria Mane Demo Version';position: relative;color: var(--white-color);font-size: 25px;align-self: center;margin-bottom: 0;}
#carta > .container > span::before, #carta_restaurant > .container > span::before {content: '';position: relative;margin-right: 15px;height: 2px;width: 70px;background-color: var(--white-color);display: inline-block;vertical-align: middle;}
#carta > .container > span::after, #carta_restaurant > .container > span::after {content: '';position: relative;margin-left: 15px;height: 2px;width: 70px;background-color: var(--white-color);display: inline-block;vertical-align: middle;}
#carta > .container h2, #carta_restaurant > .container h2 {font-weight: bold;text-align: center;margin-bottom: 55px;color: var(--black-color);}
#carta > .container h2 > span, #carta_restaurant > .container h2 > span {font-size: 30px;color: var(--white-color);font-weight: bold;}
#carta .nav-pills {position: relative;grid-gap: 0;white-space: nowrap;overflow: auto;max-width: 100%;flex-wrap: nowrap;justify-content: flex-start;cursor: grab;padding-bottom: 10px;}
#carta .nav-pills::-webkit-scrollbar {height: 5px;}
#carta .nav-pills::-webkit-scrollbar-track {border-radius: 5px;}
.menu-tab-container {margin: 30px auto;max-width: 100%;}
.food-left {padding-left: 0;padding-right: 40px;}
.food-right {padding-left: 40px;padding-right: 0;}
.alergenos-div {display: flex;margin: 5px 0;grid-gap: 8px;}
.tab-content {max-width: 1600px;margin: 0 auto;}
.tab-pane h2 {font-family: 'Alesantria Mane Demo Version';color: var(--white-color) !important;}
.tab-pane h2 span {color: var(--beige-color) !important;}
.img-link {min-width: 200px;height: 150px;cursor: zoom-in;}
.lb-container {background-image: url(../../img/fondo-carta.jpg);background-size: cover;background-repeat: no-repeat;background-position: center;}
.lightbox .lb-image {border: 1px solid #fff;}
/** SWIPER **/
.swiper {width: 100%;height: 100vh;}
.swiper-wrapper {height: auto !important;}
.swiper-slide {width: 100%;display: flex !important;justify-content: center;align-items: center;}
.swiper-slide .d-flex .prod-img {min-width: 900px;}
.swiper-slide .d-flex .prod-img img {max-width: 100%;border-radius: 10px;max-height: 650px;}
.prod-descrip {align-self: center;min-width: 360px;}
.swiper-slide .d-flex .prod-descrip h2 {font-family: 'Alesantria Mane Demo Version';color: var(--white-color) !important;}
.swiper-slide .d-flex .prod-descrip h2 span {font-family: 'Nunito', sans-serif;font-size: 18px !important;line-height: 2;font-weight: 400 !important;}
.swiper-slide .d-flex .prod-descrip p {color: var(--white-color);font-size: 22px;margin-bottom: 30px;max-width: 360px;}
.swiper-slide .d-flex .prod-descrip h3 {color: var(--beige-color);font-weight: bold;font-family: inherit;margin: 50px auto;text-align: center;font-size: 30px;background-color: var(--brown-color);max-width: fit-content;padding: 10px 10px 4px;border-radius: 10px;/*border: 1px solid var(--beige-color);*/}
.swiper-button-next, .swiper-button-prev {color: var(--white-color) !important;width: 35px !important;height: 35px !important;border-radius: 50%;border: 1px solid var(--white-color);background-color: var(--brown-color);}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {font-size: 18px !important;font-weight: bold;}
.swiper-button-next {right: 0 !important;top: var(--swiper-navigation-top-offset, 35%) !important;}
.swiper-button-prev {left: 0 !important;top: var(--swiper-navigation-top-offset, 35%) !important}
/*** MAP ***/
#map {max-width: 100%;overflow: hidden;}
/**** FOOTER ****/
footer {background-color: var(--black-color);}
footer .nav-link, footer p {font-family: var(--main-font);color: var(--white-color) !important;font-size: 13px;margin-bottom: 0;}
footer a {color: var(--beige-color);text-decoration: none;}
/**** RESPONSIVE ****/
@media only screen and (max-width: 480px) {
    html, body {overflow-x: hidden;}
    /** HOME **/
    .navbar-dark {background-color: var(--beige-color);padding: 0 10px;}
    .navbar>.container {padding: 0;justify-content: center;}
    .navbar-brand img {max-width: 100px;height: auto;}
    .navbar-toggler {background-color: var(--brown-color);}
    .navbar-expand-lg .navbar-collapse {background-color: var(--black-color);padding: 0 20px;}
    #hero {max-width: 100%;height: 100%;min-height: 300px;}
    video.bg-video {min-height: 200px;height: 210px;top: 190px;}
    #about > .container {padding: 40px 15px 200px !important;flex-wrap: wrap;}
    .about-text > span::before, .about-text > span::after {width: 50px;}
    .about-imgs .container div img {max-width: 100% !important;}
    #about.container-fluid::after {background-size: 60%;background-position: center bottom;}
    #carta > .container {padding: 50x 0 !important;}
    .food-left .d-flex, .food-right .d-flex {flex-wrap: wrap;padding: 0 15px !important;}
    .food-left, .food-right {padding: 0;}
    .food-right .d-flex {order: 2;} 
    .food-right .img-link {order: 1;}
    .food-right .d-flex h5 {order: 1;}
    .food-right .d-flex small {order: 2;}
    .food-right .d-flex .alergenos-div {order: 3;}
    .img-link {min-width: 100%; height: auto;margin: 0 auto 15px;}
    .tab-pane img.img-fluid {display: block; margin: 0 auto;width: 300px;height: auto;}
    .alergenos-div {flex-wrap: wrap;}
    #map iframe {max-width: 100%;}
}