/* 
RESTAURANT
*/
.r-brunch-bg {
    position: relative;
    width: 100%;
    height: 60vh;
}

@media only screen and (min-width: 1024px) {
    .r-brunch-bg {
        height: 40vw;
    }
}

#r_brunch-pic {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r_brunch-title {
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: calc(100vw - .4rem);
    z-index: 2;
}

#r_brunch-peppers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 5;
}

#r_brunch-peppers img {
    position: absolute;
    height: 32vw;
    width: auto;
    rotate: -5deg;
    opacity: 0;
    animation: fall-small 4s linear 0s forwards infinite;
}

@media only screen and (min-width: 1024px) {
    #r_brunch-peppers img {
        height: 16vw;
    }
}

.r_brunch-peppers_pic:nth-of-type(1) {
    top: 0;
    left: 2rem;
    animation-delay: 200ms !important;
}

.r_brunch-peppers_pic:nth-of-type(2) {
    top: 0;
    right: 25vw;
    animation-delay: 1s !important;
}

.r_brunch-peppers_pic:nth-of-type(3) {
    top: 0;
    left: 0;
    animation-delay: 2s !important;
}

.r_brunch-peppers_pic:nth-of-type(4) {
    top: 0;
    right: -1rem;
    animation-delay: 500ms !important;
}

.r_brunch-peppers_pic:nth-of-type(5) {
    top: 0;
    left: 43vw;
    animation-delay: 3s !important;
}

.r_brunch-peppers_pic:nth-of-type(6) {
    top: 0;
    right: 1rem;
    animation-delay: 2500ms !important;
}

.r-brunch-text {
    padding: .3rem;
}

/* 
LANDING
*/ 
/* #brunch-landing {
    position: relative;
    width: 100%;
    min-height: calc(calc(var(--vh) * 100) - 4rem);
    max-height: calc(calc(var(--vh) * 100) - 4rem);
    padding: 0 1rem;
    transition: 500ms;
}

.b_section-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#b_landing-label {
    position: absolute;
    top: calc(50% - 50vw);
    left: 1.5rem;
    width: 75vw;
    translate: 0 -50%;
    rotate: -12deg;
}
@media only screen and (min-width: 1024px) {
    #b_landing-label {
        width: 20rem;
        top: 3rem;
        left: 2.5rem;
        rotate: -9deg;
    }
}

#b_landing-hat {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    width: calc(100vw - 2.5rem);
    rotate: -5deg;
}
@media only screen and (min-width: 1024px) {
    #b_landing-hat {
        height: 80vh;
        top: calc(50% - 1rem);
        width: auto;
    }
}

#b_landing-schedule2 {
    position: absolute;
    bottom: .75rem;
    right: .75rem;
    transform: rotate(2deg);
    z-index: 15;
}
@media only screen and (min-width: 1024px) {
    #b_landing-schedule2 {
        bottom: 2rem;
        right: 1rem;
    }
}

#b_landing-sch2-first {
    position: relative;
    margin-top: -.5rem;
    margin-left: 10vw;
    z-index: 5;
}
@media only screen and (min-width: 1024px) {
    #b_landing-sch2-first {
        margin-top: -1rem;
        margin-left: auto;
        margin-right: 1rem;
    }
} */


/* 
INFO
*/
.brunch-info {padding: 0 1rem;}
.brunch_info-block > * {
    grid-column: 1/-1;
}

@media only screen and (min-width: 1024px) {
    .brunch_info-block > * {
        min-height: 42vw;
        max-height: 42vw;
    }

    .brunch_info-block.--left .brunch-info-bg {grid-column: 1/4; grid-row: 1;}
    .brunch_info-block.--left .b-info_text_container {grid-column: 4/-1; grid-row: 1;}
    .brunch_info-block.--right .b-info_text_container {grid-column: 1/4; grid-row: 2;}
    .brunch_info-block.--right .brunch-info-bg {grid-column: 4/-1; grid-row: 2;}
}

.brunch-info-bg {
    width: 100%;
    height: 60vh;
    position: relative;
}

.brunch-info-pic,
.brunch-info-elements {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brunch-info-elements img {
    position: absolute;
    height: 50vw;
    width: auto;
    rotate: -8deg;
}

@media only screen and (min-width: 1024px) {
    .brunch-info-elements img {
        height: 18vw;
    }
}

.b-info_title {
    position: absolute;
    top: 1.5rem;
    display: flex;
    align-items: center;
}
.brunch_info-block.--left .b-info_title {left: .5rem; rotate: -12deg;}
.brunch_info-block.--right .b-info_title {right: .5rem; rotate: 12deg;}

@media only screen and (min-width: 1024px) {
    .b-info_title {
        top: 2rem;
        display: block;
    }

    .brunch_info-block.--right .b-info_title {right: 1rem;}
}

.b-info_text_container {
    display: flex;
    flex-direction: column;
    padding: .3rem;
}

.b-info_buttons-container {margin-top: 1rem;}
.b-info_buttons-container a {
    display: block;
    background: black;
    padding: .5rem 1rem;
    border-radius: 2rem;
    width: fit-content;
}
.b-info_buttons-container a:not(:last-of-type) {margin-bottom: .25rem;}

@media only screen and (min-width: 1024px) {
    .b-info_text_container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: .5rem;
    }

    .b-info_buttons-container {
        margin-top: 2rem;
        display: flex;
        flex-wrap: wrap;
    }

    .b-info_buttons-container a {margin-right: .5rem;}
    .b-info_buttons-container a:not(:last-of-type) {margin-bottom: 0;}
}



/* 
CARTA
*/
#brunch-carta {
    position: relative;
    width: 100%;
    min-height: calc(calc(var(--vh) * 100) - 4rem);
    max-height: calc(calc(var(--vh) * 100) - 4rem);
    padding: 0 1rem;
    transition: 500ms;
}

.b_carta-imgs {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.b_carta-imgs img {
    position: absolute;
    opacity: 0;
    width: auto;
    height: 22vh;
    transition: 500ms;
    top: -50vh;
    rotate: -17deg;
}
@media only screen and (min-width: 1024px) {
    .b_carta-imgs img {
        height: 35vh;
    }
}

.b_carta-imgs img:nth-of-type(1) {
    top: 50vh;
    left: 2rem;
    animation: fall 6s linear 0s forwards infinite;
}

.b_carta-imgs img:nth-of-type(2) {
    top: 50vh;
    right: 10vw;
    animation: fall 6s linear 1s forwards infinite;
}

.b_carta-imgs img:nth-of-type(3) {
    top: 50vh;
    left: 20vw;
    animation: fall 6s linear 2s forwards infinite;
}

.b_carta-imgs img:nth-of-type(4) {
    top: 50vh;
    right: 33vw;
    animation: fall 6s linear 500ms forwards infinite;
}

.b_carta-imgs img:nth-of-type(5) {
    top: 50vh;
    left: 50vw;
    animation: fall 6s linear 3500ms forwards infinite;
}

.b_carta-imgs img:nth-of-type(6) {
    top: 50vh;
    right: 2rem;
    animation: fall 6s linear 2500ms forwards infinite;
}

.b_carta-title,
.b_carta-title_hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    z-index: 5;
}

@media (hover: hover) {
    #brunch-carta:hover .b_section-bg {
        display: none;
    }
    
    #brunch-carta:hover .b_section-bg_hover {
        display: block !important;
    }

    #brunch-carta:hover .b_carta-title_hover {
        transform: translate(-50%, -50%) rotate(16deg);
        background-color: black !important;
        color: var(--c-yellow) !important;
    }

    #brunch-carta:hover .b_carta-title_hover span {
        background-color: black;
        color: var(--c-yellow) !important;
    }

    .b-info_buttons-container a:hover {
        background: var(--c-yellow) !important;
        color: black !important;
    }
}


/* 
BOOKING
*/
.b-booking {
    position: relative;
    padding: 0 1rem;
}

.b-booking-header {
    padding-bottom: .3rem;
}

@media only screen and (min-width: 1024px) {
    .b-booking-header {
        display: flex;
        padding: .3rem;
    }
}

.b-booking-title {
    padding: .35rem .3rem;
}

@media only screen and (min-width: 1024px) {
    .b-booking-title {
        min-width: max-content;
        padding: 0;
    }
}

.b-booking-description {
    padding: 0 .3rem;
}

@media only screen and (min-width: 1024px) {
    .b-booking-description {
        padding-left: 1rem;
    }
}

.b-booking-rooms > * {grid-column: 1/-1;}

.b-booking-room {
    position: relative;
    width: 100%;
    max-height: 83vw;
    min-height: 83vw;
}

@media only screen and (min-width: 1024px) {
    .b-booking-rooms>* {
        grid-column: span 3;
    }

    .b-booking-room-solo {
        grid-column: 1/-1;
    }

    .b-booking-room {
        min-height: 42.5vw;
        max-height: 42.5vw;
    }
}

.b-booking-room-pic {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.b-booking-room .b-booking-room-pic_hover {
    display: none;
}

.b-booking-room .b-booking-room-title_hover {
    display: none;
}

.b-booking-room-title {
    position: absolute;
    top: .5rem;
    right: .5rem;
    left: .5rem;
    bottom: 0;
    height: 73vw;
    width: auto;
    margin: 0 auto;
    z-index: 5;
}

@media only screen and (min-width: 1024px) {
    .b-booking-room-title {
        height: 42.5vw;
    }
}

.b-booking-room.hoverOn .b-booking-room-pic {
    display: none;
}

.b-booking-room.hoverOn .b-booking-room-pic_hover {
    display: block;
}

.b-booking-room.hoverOn .b-booking-room-title {
    display: none;
}

.b-booking-room.hoverOn .b-booking-room-title_hover {
    display: block;
}

@media (hover: hover) {
    .b-booking-room:hover .b-booking-room-pic {
        display: none;
    }

    .b-booking-room:hover .b-booking-room-pic_hover {
        display: block;
    }

    .b-booking-room:hover .b-booking-room-title {
        display: none;
    }

    .b-booking-room:hover .b-booking-room-title_hover {
        display: block;
    }
}



/* 
MARQUEE
*/
#brunch_marquee-left {
    position: fixed;
    top: 3.5rem;
    bottom: 0;
    left: 0;
} 

#brunch_marquee-right {
    position: fixed;
    top: 3.5rem;
    bottom: 0;
    right: 0;
}