body{ padding: 0; margin: 0; color: #424141; font-size: 16px; font-family: 'Gotham',sans-serif; background-color: #FFFAF7; }
img{ max-width: 100%; }
a,a:hover,a:active,a:focus,a:visited{ text-decoration: none; }

#right_lines{ background-image: url(img/right-lines.png); background-repeat: repeat-y; position: fixed; right: 30px; top: 0; z-index: -1; width: 57px; height: 100vh;}
#three_bars{ background-image: url(img/lines-bg.png); background-repeat: repeat-y; background-position: 30px; background-size: 75px; position: fixed; left: 15px; top: 0; z-index: 1; height: 100vh; width: 105px; }

.button{ display: inline-block; border: 1px solid transparent; border-radius: 10px; text-align: center; padding: 10px 20px; text-transform: uppercase; font-size: 20px; line-height: 23px; font-family: 'Mikela',sans-serif; }
.orange-button,.orange-button:hover,.orange-button:active,.orange-button:focus,.orange-button:visited{ background-color: #F26427; border-color: #F26427; color: #ffffff; }
.light-orange-button,.light-orange-button:hover,.light-orange-button:active,.light-orange-button:focus,.light-orange-button:visited{ background-color: #F79233; border-color: #F79233; color: #ffffff; }

.announcement{ position: relative; z-index: 2; background-color: #FCB247; padding: 12px 0; }
.announcement p{ font-size: 14px; color: #ffffff; text-transform: uppercase; margin: 0; font-weight: 500; }
header.header-desktop{ position: relative; z-index: 10; padding: 15px 30px; background-color: #FFFAF7; }
header.header-desktop ul.menu{ padding: 0; margin: 0; list-style-type: none; text-align: center; }
header.header-desktop ul.menu > li{ display: inline-block; padding: 0 20px; }
header.header-desktop ul.menu > li a{ display: block; color: #424141; }
header.header-desktop ul.menu > li a > img{ max-width: 150px; }
.header-desktop .header-socials{ width: 100%; margin-top: 10px; text-align: center; }
header.header-desktop .logo img{ width: 150px; }
.header-desktop .header-actions{ text-align: right; }
.header-desktop .header-socials a{ display: inline-block; }
.header-desktop .header-socials a + a{ margin-left: 10px; }
.header-desktop .header-socials img{ width: 24px; }
header.header-desktop .button{ padding: 10px 15px; font-size: 16px; line-height: 16px; }


header.header-desktop li.menu-item-has-children{ position: relative; }
header.header-desktop .sub-menu{ display: none; position: absolute; top: 100%; left: 0; padding: 10px 10px 0; margin: 0; width: 200px; background-color: #FFFAF7; z-index: 100; text-align: left; box-shadow: 3px 3px 3px rgba(0,0,0,.3); }
header.header-desktop li.menu-item-has-children:hover .sub-menu{ display: block; }
header.header-desktop .sub-menu li{ display: block; padding: 6px 10px; }
header.header-desktop .sub-menu li + li{ border-top: 1px solid #F79233; }
header.header-desktop ul.sub-menu > li a{ display: block; color: #424141; }

#home_banner{ position: relative; z-index: 2; }
#home_banner .carousel-item{ height: 500px; overflow: hidden; }
#home_banner .carousel-indicators [data-bs-target]{ width: 17px; height: 17px; border-radius: 100%; margin-left: 5px; margin-right: 5px; }
#home_banner .carousel-caption{ bottom: 60px; }
#home_banner .carousel-caption h1{ font-size: 42px; line-height: 50px; color: #ffffff; font-weight: 500; margin: 0 0 30px; letter-spacing: 1px; }

#personal_note{ position: relative; z-index: 2; }
#personal_note *{ font-family: 'Rock Salt',sans-serif; }
#personal_note h2{ font-size: 36px; margin: 0 0 45px; }
#personal_note p{ font-size: 24px; margin: 0 0 30px; }
#personal_note p.signed{ font-size: 32px; max-width: 75%; text-align: right; margin: 0 auto; }

#instagram_feed{  overflow: hidden; position: relative; z-index: 2; }
#instagram_feed h2{ font-family: 'Mikela',sans-serif; font-size: 36px; margin: 0 0 15px; letter-spacing: 2px; }
#instagram_feed h2 a{ color: #424141; }
.ig-feed{ margin-left: -30px; margin-right: -30px; }

.body-socials{ text-align: center; }
.body-socials a{ display: inline-block; }
.body-socials a + a{ margin-left: 30px; }

.giftcards{ flex: 0 1 calc(100% / 3); text-align: center; padding: 0 30px; }
.team{ flex: 0 1 calc(100% / 3); text-align: center; padding: 0 30px; }
.giftcards h3,.team h3{ font-family: 'Mikela',sans-serif; font-size: 32px; margin: 0 0 15px; letter-spacing: 1px; }

#newsletter_signup{ position: relative; z-index: 2; }
#newsletter_signup .form-control{ border: 1px solid #FCB247; font-size: 18px; color: #424141; }
#newsletter_signup .button{ border-top-left-radius: 0; border-bottom-left-radius: 0; }
#newsletter_signup h2{ font-size: 36px; margin: 0 0 15px; font-family: 'Mikela',sans-serif; }
#newsletter_signup p{ font-size: 20px; margin: 0 0 30px; }

footer{ background-color: #fde3ca; padding: 60px 30px 30px; position: relative; z-index: 2; }
footer ul{ margin: 0; padding: 0; list-style-type: none; max-width: 300px; }
footer ul li{ font-weight: 500; font-size: 20px; line-height: 23px; display: flex; flex-wrap: nowrap; justify-content: space-between; }
footer a,footer a:hover{ color: #424141; }
.footer-socials a{ display: inline-block; }
.footer-socials a + a{ margin-left: 15px; }

.palm-bg{ background-image: url(img/palms.png); background-repeat: repeat-y; background-size: 2400px; background-position: center -135px; }
#cta{ position: relative; z-index: 2; }
#cta h2{ font-family: 'Mikela',sans-serif; font-size: 36px; margin: 0 0 15px; letter-spacing: 2px; }

#banner{ max-height: 500px; overflow: hidden; position: relative; z-index: 2; }
#about{ position: relative; background: linear-gradient(to right,#fcd8c9 65%,transparent 35%); margin: 60px 0 120px; padding: 60px 0; }
#about > img{ position: absolute; right: 0; bottom: -120px; z-index: 5; width: 45%; }
#about h2{ font-size: 42px; font-family: 'Mikela',sans-serif; letter-spacing: 2px; margin: 0 0 30px; }
#about .about-text *{ font-size: 24px; }
.about-box{ max-width: 40%; margin-left: 120px; }
#team{ position: relative; padding: 120px 0 200px; margin-bottom: 60px; }
#team > img{ position: absolute; left: 0; top: 0; width: 40%; z-index: 3; }
#team .bg-square{ background-color: #fcd8c9; width: 70%; position: absolute; bottom: 0; right: 60px; height: 50%; z-index: -1; }
#team h2{ font-size: 42px; font-family: 'Mikela',sans-serif; letter-spacing: 2px; margin: 0 0 30px; }
#team .team-text *{ font-size: 24px; }
.news-item{ flex: 0 1 calc(100% / 3); padding: 30px; overflow: hidden; }
.news-item-link{ position: relative; display: block; width: 100%; padding-top: 100%; overflow: hidden; box-shadow: 3px 3px 3px rgba(0,0,0,.3); }
.news-item-link-bg{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-repeat: no-repeat; background-size: cover; background-position: center; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; }
.news-item:hover .news-item-link-bg{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); }
.news-item-link > div{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 30px; background-color: rgba(0,0,0,.4); display: flex; align-items: center; align-content: center; flex-wrap: nowrap; z-index: 3; }
.news-item-link > div p{   margin: 0; color: #ffffff; font-size: 24px; text-align: center;  }
#color_block{ height: 60px; background-color: #fcd8c9; }
#news h1{ font-family: 'Mikela',sans-serif; font-size: 42px; margin: 0 0 30px; }
#page h1{ font-family: 'Mikela',sans-serif; font-size: 42px; margin: 0 0 30px; }

#catering_gallery{ padding: 120px 0 200px; }
.catering-images{ display: flex; flex-wrap: wrap; gap: 30px; padding-left: 120px; }
.catering-image{ flex: 0 1 calc((100% / 3) - 20px); }

#reservations{ z-index: 2; }
#reservations iframe{ width: 100% !important; height:200px!important; }
#yelp_reservations{ position: relative; z-index: 2; }
#yelp_reservations h2{ font-size: 42px; font-family: 'Mikela',sans-serif; letter-spacing: 2px; margin: 0 0 5px; color: #ffffff; text-align: center; }
.reservations-box{ background-color: #212121; padding: 30px; }
#yelp_reservations h2 + p{ font-size: 24px; color: #ffffff; margin: 0 0 30px; text-align: center; }
#reservation_form button{ background-color: #ea4545; color: #FFFFFF; display: inline-block; border: 1px solid #ea4545; text-align: center; padding: 10px 20px; text-transform: uppercase; font-size: 20px; line-height: 23px; font-family: 'Mikela',sans-serif; letter-spacing: 1px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
#reservation_form > .d-flex > *{ flex: 0 1 25%; }
#reservation_form > .d-flex > select:first-of-type{ border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.reservations-box img{ width: 50px; }
#reservation_form select{ padding: 7px 15px 7px 25px; font-size: 16px; color: #424141; border: 1px solid #cccccc; background-repeat: no-repeat; background-position: 7px center; background-size: 15px; }
#reservation_form select + select{ border-left: none; }
#reserve_date{ background-image: url(img/calendar.png); }
#reserve_time{ background-image: url(img/clock.png); }
#reserve_covers{ background-image: url(img/people.png); }

header.header-mobile{ display: none; background-color: #FFFAF7; padding: 10px 15px; position: relative; z-index: 2; }
header.header-mobile .open-mobile-menu img{ width: 30px; }
header.header-mobile .logo > img{ max-width: 125px; }
#mobile_menu{ position: fixed; width: 250px; right: -250px; top: 0; background-color: #FFFAF7; z-index: 1000; padding: 30px; transition: right .3s ease-in-out; -webkit-transition: right .3s ease-in-out; -moz-transition: right .3s ease-in-out; max-height: 100vh; overflow-y: auto; }
.announcement + .header-desktop + .header-mobile + #mobile_menu{ top: 45px; }
.announcement + .header-desktop + .header-mobile.sticky + #mobile_menu{ top: 0; }
#mobile_menu.open{ right: 0; }
#mobile_menu ul{ padding: 0; margin: 15px 0 0; list-style-type: none; }
#mobile_menu ul li{ padding: 5px 0; }
#mobile_menu ul li a{ display: block; font-size: 16px; color: #424141; }
#mobile_menu ul ul{ padding-left: 10px; margin: 0; }
#mobile_menu .header-socials a img{ width: 32px; }
#mobile_menu .close-mobile-menu img{ width: 20px; }

#news{ position: relative; z-index: 2; }

header.header-desktop.sticky,header.header-mobile.sticky{ position: fixed; top: -75px; left: 0; width: 100%; transition: top .5s ease-in-out; -webkit-transition: top .5s ease-in-out; -moz-transition: top .5s ease-in-out; z-index: 1000; }
header.header-desktop.sticky.in,header.header-mobile.sticky.in{ top: 0; }

.delivery-options a img{ height: 150px; max-width: none; width: auto; }
.delivery-options a + a{ margin-left: 15px; }

@media only screen and (max-width: 1299px){
    header.header-desktop ul li{ padding: 0 10px; }
}

@media only screen and (max-width: 1099px){
    header.header-desktop{ display: none; }
    header.header-mobile{ display: block; }
}

@media only screen and (max-width: 767px){
    #home_banner .carousel-item{ height: 300px; }
    #home_banner .carousel-caption{ bottom: 45px; }
    #home_banner .carousel-caption h1{ font-size: 34px; line-height: 40px; }
    footer ul{ margin: 0 auto 30px; }
    footer ul li{ font-size: 16px; }
    footer{ padding: 30px; }
    .about-box{ max-width: none; }
    #about{ background: #fcd8c9; padding: 30px 0; margin: 30px 0; }
    #about > img{ display: none; }
    #team{ padding: 30px 0; }
    #catering_gallery{ padding: 30px 0; }
    .catering-image{ flex: 0 1 calc(50% - 15px); }
    #team > img{ display: none; }
    #team h2,#team .about-team-text{ margin-left: 120px; }
    #team .bg-square{ top: 0; left: 0; bottom: 0; right: 0; height: auto; width: auto; }
    #three_bars{ background-position: 15px; background-size: 60px; }
    .news-item{ flex: 0 1 50%; padding: 15px; }
    .news-item-link > div p{ font-size: 16px; }
    #color_block{ height: 30px; }
    #banner{ max-height: 300px; }
    #reservation_form > .d-flex > *{ flex: 0 1 calc((100% / 3) - 10px); }
    #reservation_form select:last-of-type{ border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
    #reservation_form > .d-flex > button{ margin-top: 15px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; flex: 0 1 100%; }
    .reservations-box{ padding: 15px; }
    #personal_note h2{ font-size: 30px; margin: 0 0 30px; }
    #personal_note p{ font-size: 18px; margin: 0 0 15px; }
    .giftcards,.team{ flex: 0 1 100%; }
    .team{ margin-top: 30px; }
}

@media only screen and (max-width: 575px){
    .news-item{ flex: 0 1 100%; max-width: 250px; margin: auto; }
    #three_bars{ display:none; }
    .about-box{ margin-left: 60px; }
    #team h2,#team .about-team-text{ margin-left: 60px; }
    #reservation_form > .d-flex > *{ flex: 0 1 100%; margin-top: 15px; border-radius: 10px; }
    #yelp_reservations h2 + p{ margin-bottom: 15px; }
    .delivery-options a{ display: block; text-align: center; }
    .delivery-options a img{ height: auto; max-width: none; width: 100%; }
    #home_banner .carousel-caption h1{ font-size: 24px; line-height: 27px; }
    #home_banner .carousel-caption{ bottom: auto; top: 15px; }
    #about > img,#team > img{ display: block; width: 100%; position: static; margin-bottom: 15px; }
    .catering-images{ padding-left: 0; }
    .catering-image{ flex: 0 1 100%; }
}