html { scroll-behavior: smooth;}
:root {
    --black: #000;
    --white: #ffffff;
    --red: #ca1029;
    --red-dark: #6e0000;
    --gray-dark: #121212;
    --gray: #6e6e6e;
    --gray-mid: #a4a4a4;
}

.bg-black { background-color: var(--black); }
.bg-white { background-color: var(--white); }
.bg-red { background-color: var(--red); }
.bg-red-dark { background-color: var(--red-dark); }
.bg-gray-dark { background-color: var(--gray-dark); }
.bg-gray-mid { background-color: var(--gray-mid);}

.text-black { color: var(--black); }
.text-white { color: var(--white); }
.text-red { color: var(--red); }
.text-red-dark { color: var(--red-dark); }
.text-gray-dark { color: var(--gray-dark); }
.text-gray-mid { color: var(--gray-mid); }

.text-fs-16 {  font-size:16px; }
.text-fs-18 {  font-size:18px; }
.text-fs-20 {  font-size:20px; }
.text-fs-24 {  font-size:24px; }
.text-fs-32 {  font-size:32px; }
.text-fs-40 {  font-size:40px; }
.text-fs-50 {  font-size:50px; }

.text-ls-09 { letter-spacing: .09rem;}
.text-ls-18 { letter-spacing: .18rem;}

.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, .75) !important; }

@font-face {
    font-family: 'sabonregular';
    src: url('../fonts/sabon-webfont.woff2') format('woff2'),
        url('../fonts/sabon-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'sabonbold';
    src: url('../fonts/sabonbold-webfont.woff2') format('woff2'),
        url('../fonts/sabonbold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'sabonbold_italic';
    src: url('../fonts/sabonbolditalic-webfont.woff2') format('woff2'),
        url('../fonts/sabonbolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'sabonitalic';
    src: url('../fonts/sabonitalic-webfont.woff2') format('woff2'),
        url('../fonts/sabonitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.object-fit-cover { width:100%; height:100%; object-fit:cover; }
body { background-color:var(--white); font-family: 'sabonregular'; padding-top:102px; overflow-x:hidden;  }
header { position:fixed; top:0; left:0; right:0; height:102px; background-color: var(--white); z-index:999;  }
.index-page header { pointer-events: none; }
.logo { width:170px; }
.index-page header { background-color: transparent !important; }
.index-page .logo { filter:invert(1); width:300px; padding-top:15px; padding-left:15px; }
body.index-page { padding-top:0; }
body.index-page.scrolled header { background-color: var(--white) !important;}
body.index-page.scrolled .logo { filter:invert(0); width:170px; padding:0;  }

nav { margin:auto; } 
nav ul { margin: 0; padding: 0; list-style: none; position: relative;  } 
nav ul li { display: inline-block;  } 
nav a { display: block; padding: 0 10px; color: var(--black); font-size: 17px; text-decoration: none; text-transform: uppercase;  font-family: 'sabonbold';  } 
nav ul ul { opacity:0; position: absolute; top: 40px; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;     background: rgba(0,0,0, .8); padding: 1rem;  } 
nav ul li:hover > ul { display:inherit;  top: 30px; opacity:1; } 
nav ul ul li { width: 200px; float: none; display: list-item; position: relative; margin-bottom:5px; } 
nav ul ul ul li { position: relative; top:-60px; left:200px;  } 
nav ul ul a { font-size:13px; }
nav a:hover { color: var(--red) } 
nav ul ul ul a { color: var(--white) } 
nav ul ul li:hover > ul { display:inherit; }

.fade-in { opacity:0; }
.mobile-overlay-wrapper { opacity:0; position:fixed; top:0; left:0; right:0; bottom:0; background-color: rgba(0,0,0,.9); z-index:-1; display:flex; align-items:center; justify-content: center; text-align: center; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; }
.mobile-overlay-wrapper > li { margin-bottom:1rem; }
.mobile-overlay-wrapper a  { color:var(--white); text-decoration: none; font-size:27px; }
.mobile-overlay-wrapper a.order-online-link { font-size:20px; display:inline-block; margin-top:.5rem;  }
.mobile-dropdown { display:none; }
.mobile-dropdown a { font-size:20px; color: var(--white); }
.mobile-trigger { cursor:pointer; width:40px; height:20px; position:fixed; top:40px; right:30px; z-index:1005;  display:none; }
.mobile-trigger span { width:100%; display: block; background-color: var(--black); height:2px; margin-bottom:5px; border-radius: .25rem; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
body.open .mobile-trigger span { background-color: var(--white);}
body.open .mobile-trigger span:nth-child(3) { display:none; }
body.open .mobile-trigger span:nth-child(1) { transform:rotate(45deg) }
body.open .mobile-trigger span:nth-child(2) { transform:rotate(-45deg); margin-top:-7px; }
body.open .mobile-overlay-wrapper { opacity: 1; z-index:1000; }

.mh-670 { min-height: 670px; }

.add-texture-top::before { content:''; position: absolute; top:0; left:0; background: transparent url(../img/texture-maze.png) 0 0 repeat-x; z-index: 1; height:159px; width:100%; pointer-events: none;}

.add-texture-bottom::after { content:''; position: absolute; bottom:0; left:0; background: transparent url(../img/texture-suns.png) 0 0 repeat-x; z-index: 1; height:159px; width:100%; pointer-events: none;}

.recipes-nav a { color:var(--white)}
.section-nav .active, .recipes-nav .active { color: var(--red); }

.frame {   
    border: 20px solid transparent; /* must match your slice values */
    border-image-source: url('../img/timeline/frame.png');
    border-image-slice: 40; /* adjust based on your artwork */
    border-image-repeat: stretch; /* or round */
    border-image-width: 40px;
    align-items: center;
    text-decoration: none;
    padding:.25rem;
    position: relative;
    cursor:pointer;
}

.frame .bg-white { height:100%; }

.timeline-draggable {
    overflow-x: auto;
    cursor: grab;
    user-select: none; /* prevents text highlighting */
    -webkit-user-select: none;
    -ms-user-select: none;
    width:100%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer and Edge */
}

.timeline-draggable:active {
    cursor: grabbing;
}

.timeline-draggable::-webkit-scrollbar  {
    display: none;
}

.timeline-draggable .frame {
    cursor: pointer; /* clickable when not dragging */
}

.timeline-draggable.dragging .frame {
    cursor: grabbing !important; /* override pointer while dragging */
}

.frame.no-link { cursor:default !important}

.timeline-rule { border-top:1px solid #6c6c6c; width:100%; position:absolute; left:0; height:1px; }
.btn-black { display:inline-block; background-color: var(--gray-dark); color: var(--white); font-size:12px; text-decoration: none; padding:.25rem .8rem }
.btn-red-dark{ display:inline-block; background-color: var(--red-dark); color: var(--white); font-size:12px; text-decoration: none; padding:.25rem .8rem }
.year { height:40px; text-align: center; color:var(--white); font-size:28px; position:absolute; }
.timeline-top .year { bottom:-120px; left:0px; }
.timeline-top .year::before { content:''; position:absolute; top:-65px; left:50%; width:1px; border-left:2px solid var(--gray); height:65px; }
.timeline-top .year::after { content:''; position:absolute; top:-9px; width:14px; height:14px;  background-color: var(--gray); left:50%; transform:rotate(45deg) translateX(-60%);}


.timeline-bottom .year { top:-120px; left:0px; }
.timeline-bottom .year::before { content:''; position:absolute; top:40px; left:50%; width:1px; border-left:2px solid var(--gray); height:65px; }
.timeline-bottom .year::after { content:''; position:absolute; top:46px; width:14px; height:14px;  background-color: var(--gray); left:50%; transform:rotate(45deg) translateX(-60%);}
.frame:hover .year { color: var(--red); }
.frame:hover .year::before { border-color:var(--red); }
.frame:hover .year::after { background-color:var(--red); }

.btn-red-fancy { background: transparent url(../img/btn-red-fancy.jpg) 0 0 no-repeat; width:252px; height:73px; display:flex; align-items: center; justify-content: center; color:var(--white); font-size:22px; text-transform: uppercase; text-decoration: none; letter-spacing: .09rem;     border-radius: 0.40rem;}
.btn-red-fancy-sm { background: transparent url(../img/btn-red-fancy.jpg) 0 0 no-repeat; background-size:cover; width:152px; height:44px; display:flex; align-items: center; justify-content: center; color:var(--white); font-size:16px; text-transform: uppercase; text-decoration: none; letter-spacing: .09rem;}
.mw-860 { max-width: 860px;}
    footer { min-height: 415px; display:flex; align-items: center; justify-content: center; padding: 4rem; }
::placeholder { color: var(--gray-mid) !important; opacity: 1; }
:-ms-input-placeholder { color: var(--gray-mid)  !important; }
::-ms-input-placeholder { color: var(--gray-mid)  !important; }
    
@media (max-width:990px){
    footer {  padding: 2rem; }
    footer .border-end { border:none !important; }
    .timeline-rule { transform: rotate(0deg) translateX(-50%);
        left: 50%;
        top: 0;
        height: 100%;
        width: 1px;
        border-top: none;
        border-left: 1px solid #6c6c6c; z-index:1; opacity:0; }
        .timeline-rule.show { opacity:1; }
    .frame { position:relative; z-index:2; margin-bottom:5rem !important; }
    .mobile-trigger { display:block; }
    .index-page .mobile-trigger { display:none; }
    .timeline-top .year,  .timeline-bottom .year { position:absolute; top:-84px; left:0; bottom:auto; color:var(--white); font-size:60px; }
    /* .year::before, .year::after { display:none; } */
    .timeline-top .year::before, .timeline-bottom .year::before { display:none; }
    .timeline-top .year::after, .timeline-bottom .year::after { display:none; }
    .text-fs-sm-20 { font-size:20px; }
    .timeline-draggable { padding-top:42px; }
    
}