/* Presentation image section */

.restaurant-img {
    background-image: url("../images/restaurant.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    padding-top: 250px;
    padding-bottom: 200px;
    text-align: center;
    display: block;
    color: #000000;
}

.presentation-address {
    background-color: black;
    opacity: 0.6;
    -webkit-animation: scale-in-center 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* Presentation text section */

.welcome-title, .presentation-card {
    color: #000000;
}

.presentation-card {
    background-color: #BB9457;
    border: 1px solid #913732;
}

.presentation-text {
    white-space: pre-line;
}


/* Concept section */

.card-concept-chef {
    background-color: #913732;
    border: 1px solid #BB9457;
}

.img-concept {
    border: 1px solid black;
}


/* Chef section */

.restaurant-link {
    color: #FFE6A7;
}

.restaurant-link:hover {
    color: white;
}


/* Dishes photos Gallery */

#gallery a {
    position: relative;
    display: inline;
}

#gallery a:hover img {
    opacity: 0.4;
}

#gallery a span {
    position: absolute;
    top: 0;
    left: 2rem;
    display: none;
}

#gallery a:hover span {
    display: inline;
}

#gallery span.caption-photo {
    top: 4rem;
    color: #FFFFFF;
    z-index: 2;
}

#gallery span.bg {
    top: 0;
    left: 0;
    z-index: 1;
}


/*********************************************************************
                    Media queries
**********************************************************************/

/* Mobile phones */

@media screen and (min-device-width: 280px) and (max-device-width: 767px) {

    .chef {
        display: flex;
        flex-direction: column-reverse;
    }
}