@font-face {
    font-family: Gilroy Bold;
    src: url("../font/Gilroy-Bold.ttf") format("truetype");
}
@font-face {
    font-family: Gilroy Regular;
    src: url("../font/Gilroy-Regular.ttf") format("truetype");
}
@font-face {
    font-family: Gilroy Light;
    src: url("../font/Gilroy-Light.ttf") format("truetype");
}
:root {
    --color-rojo: #D50032;
    --color-beige: #D6D2C4;
    --color-negro: #000000;
    --texto-menu: 1.2rem;
}

/* **** Generales **** */
/* **** Home **** */

/* **** Generales **** */
body {
    font-family: "Gilroy Regular";
}

/* **** Home **** */
.hola,
.logo,
.carta {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.ma-blanca,
.ma-roja {
    position: absolute;
    margin: auto;
    top: 245px;
    left: 315px;
    bottom: 0;
    right: 0;
}
.ma-roja {
    display: none;
}
.logo {
    max-width: 450px !important;
}
.carta {
    max-width: 650px !important;
}
.bx-wrapper img.slide {
    width: 100% !important;
    max-width: none;
}
.bx-wrapper .bx-controls-direction,
.bx-wrapper .bx-pager {
    display: none;
}
.slider-footer {
    margin: auto;
    position: absolute;
    left: 0;
    bottom: 50px;
    right: 0;
    width: 750px;
}
.slider-footer > div {
    display: inline-block;
    padding: 0 25px;
}
.slider-footer > div,
.slider-footer > div a {
    text-decoration: none;
    color: var(--color-rojo);
}
.slider-footer .slider-pictogramas > div {
    display: inline-block;
    padding: 0 20px;
}
.slider-footer img {
    max-width: 50px !important;
}
.slider-footer div.slider-footer-telf {
    font-family: "Gilroy Regular";
    font-size: 1.5rem;
}
.slider-footer div.slider-footer-adreca {
    font-family: "Gilroy Light";
}
.slider-footer-logo > img.logo {
    top: initial;
    left: initial;
    bottom: 50px;
    right: 100px;
    width: 170px;
}
.slide_mobile {
    display: none;
}
.fadein img {
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 4s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
.ma-blanca {
    -webkit-animation-delay: -2s;
}

/* **** Carta **** */
body.carta {
    background-color: var(--color-negro);
    position: relative;
}
body.carta.item {
    background-color: #ffffff;
}
body.carta header {
    padding-top: 50px;
}
body.carta header .logo {
    position: relative;
    text-align: center;
}
body.carta header .logo img {
    max-width: 400px;
}
body.carta header .languages {
    margin: 0 auto;
    text-align: center;
    margin-top: 75px;
}
body.carta header .languages div {
    color: var(--color-beige);
    font-family: "Gilroy Bold";
    text-transform: uppercase;
    font-size: var(--texto-menu);
    padding: 0 5px;
    display: inline-block;
}
body.carta header .menu {
    margin: 75px 0;
}
body.carta header .menu div:nth-child(1) {
    border-top:    3px solid var(--color-beige);
    border-right:  0;
    border-bottom: 3px solid var(--color-beige);
    border-left:   0;
}
body.carta header .menu div {
    border-top:    0;
    border-right:  0;
    border-bottom: 3px solid var(--color-beige);
    border-left:   0;
    color: var(--color-beige);
    text-align: center;
    font-family: "Gilroy Bold";
    padding: 7px 0;
}
body.carta.item header .menu div:nth-child(1) {
    border-top:    3px solid var(--color-rojo);
    border-bottom: 3px solid var(--color-rojo);
}
body.carta.item header .menu div {
    border-bottom: 3px solid var(--color-rojo);
}
body.carta header .menu div a {
    color: var(--color-beige);
    text-decoration: none;
}
body.carta.item header .menu div.menu-principal a {
    color: var(--color-rojo);
}
body.carta header .menu div.menu-principal a {
    color: var(--color-rojo);
}
body.carta header .imatge-carta img {
    width: 100%;
}
body.carta main {
    width: 550px;
    margin: 0 auto;
}
body.carta main .msg {
    color: var(--color-beige);
    font-size: 1.4rem;
    font-family: "Gilroy Bold";
}
body.carta main .msg span {
    color: var(--color-rojo);
}

/* **** Footer **** */
footer {
    width: 550px;
    margin: 100px auto 25px auto;
}
footer .logo-instagram {
    width: 30px;
}
footer > div {
    display: inline-block;
    color: var(--color-beige);
    font-size: 1rem;
    font-family: "Gilroy Bold";
}
footer > div a {
    color: var(--color-beige);
    text-decoration: none;
}
footer > div:nth-child(1) {
    width: 15%;
}
footer > div:nth-child(2) {
    width: 75%;
}
footer.footer-item > div,
footer.footer-item > div a {
    color: var(--color-beige);
    text-decoration: none;
}

/* **** Media Queries **** */
@media screen and (max-width: 767px) {
    .bx-wrapper {
        height: 100% !important;
        max-width: none;
    }
    .bx-wrapper img.slide {
        width: auto !important;
    }
    .hola, .carta, .slider-footer {
        max-width: 90% !important;
    }
    .ma-blanca, .ma-roja {
        width: 20%;
        left: 40%;
        top: 170px !important;
    }
    .slider-footer .slider-pictogramas {
        float: right;
        margin-top: 15px;
    }
    .slider-footer div.slider-footer-telf {
        width: 35%;
        font-size: 15px;
    }
    .slider-footer div.slider-footer-adreca {
        width: 63%;
        font-size: 15px;
    }
    .slider-footer > div {
        padding: 0;
    }
    body.carta header .logo img {
        max-width: 60%;
    }
    body.carta {
        width: 100%;
    }
    body.carta main,
    body.carta footer {
        width: 60%;
    }
    footer > div:nth-child(1) {
        width: 30%;
    }
    footer > div:nth-child(2) {
        width: 45%;
    }
    .slider-footer-logo {
        position: absolute;
        left: 0;
        right: 0;
        top: 100px;
    }
    .slider-footer-logo img {
        position: relative;
        right: initial !important;
    }
    .slide_desktop {
        display: none !important;
    }
    .slide_mobile {
        display: block !important;
    }
}