
:root {
    --white: #fff;
    --black: #000;
    --gray: #202020;
    --red: #660a1a;
    --yellow: #f0a820;
    --orange: #e04626;
    --green: #afbfb1;
    --cream: #f4ead4;
    --moss: #545828;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin:unset; line-height: unset;}

.text-white { color: var(--white); }
.text-black { color: var(--black); }
.text-gray { color: var(--gray); }
.text-red { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-orange { color: var(--orange); }
.text-green { color: var(--green); }
.text-cream { color: var(--cream); }
.text-moss { color: var(--moss); }

.bg-white { background-color: var(--white); }
.bg-white { background-color: var(--white); }
.bg-gray { background-color: var(--gray); }
.bg-red { background-color: var(--red); }
.bg-yellow { background-color: var(--yellow); }
.bg-orange { background-color: var(--orange); }
.bg-green { background-color: var(--green); }
.bg-cream { background-color: var(--cream);}
.bg-moss { background-color: var(--moss);}

.text-lulo { font-family: "lulo-one", sans-serif; font-weight: 400; font-style: normal; line-height: normal}
.text-lulo-bold { font-family: "lulo-one", sans-serif; font-weight: 700; font-style: normal; line-height: normal; }
.text-roboto {  font-family: "Roboto", sans-serif;  line-height: normal}
.text-gothic {  font-family: "Didact Gothic", sans-serif; font-weight: 400; font-style: normal; }

.text-fs-13 { font-size:13px; }
.text-fs-14 { font-size:14px; }
.text-fs-17 { font-size:17px; }
.text-fs-18 { font-size:18px; }
.text-fs-22 { font-size:22px; }
.text-fs-23 { font-size:23px; }
.text-fs-29 { font-size:29px; }
.text-fs-34 { font-size:34px; }
.text-fs-56 { font-size:56px; }
.text-fs-73 { font-size:73px; }

.lh-13 { line-height:13px; }
.lh-14 { line-height:14px; }
.lh-17 { line-height:17px; }
.lh-23 { line-height:23px; }
.lh-29 { line-height:29px; }
.lh-34 { line-height:34px; }
.lh-56 { line-height:56px; }
.lh-73 { line-height:73px; }

body { background-color:var(--white); overflow-x:hidden;  font-smooth: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
nav { margin:auto; height:100%; } 
nav ul { margin: 0; padding: 0; list-style: none; position: relative;  height:100%; } 
nav ul li { display: inline-block;  } 
nav a { display: block; padding: 0 8px; color: var(--gray); font-size: 13px; text-decoration: none; font-family: "lulo-one", sans-serif; font-weight: 700; font-style: normal; text-align:center; } 
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;  height:auto; } 
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; color:var(--white) }
nav a:hover { color: var(--orange); }
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: var(--orange); z-index:1000; 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; pointer-events:none;  }
.mobile-overlay-wrapper > li { margin-bottom:1rem; }
.mobile-overlay-wrapper a  { color:var(--white); text-decoration: none; font-size:20px; font-family: "lulo-one", sans-serif; font-weight: 700; font-style: normal; line-height: normal; margin-bottom:.5rem; display:block; }
.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); font-family: "lulo-one", sans-serif; font-weight: 400; font-style: normal; line-height: normal }
.mobile-trigger { cursor:pointer; width:40px; height:20px; position:fixed; top:55px; right:30px; z-index:1005;  display:none; }
.mobile-trigger span { width:100%; display: block; background-color: var(--red); 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:nth-child(3) { display:none; }
body.open .mobile-trigger span:nth-child(1) { transform:rotate(45deg); background-color: var(--yellow); }
body.open .mobile-trigger span:nth-child(2) { transform:rotate(-45deg); margin-top:-7px; background-color: var(--yellow); }
body.open .mobile-overlay-wrapper { opacity: 1; pointer-events:all;  }

li.mt-30 {  position:relative; }
li.mt-30.bullet { color:var(--yellow); font-size:100px; width:24px;  }
li.mt-30.bullet span { display:block; margin-top:-20px; text-shadow: 2px 2px 0px var(--red);}

.logo-bodega { position:absolute; top:0; left:-1.5rem; width:255px; height:255px; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; }

.btn-black-sm { display:inline-block; border-radius: .6em; background-color: var(--black); color: var(--white); font-size:11px; text-transform:uppercase; padding:.6rem .8rem; }

.bg-checkerboard-yellow { width:100%; height:56px; background:var(--white) url(../img/bg-checkerboard-yellow.gif) 0 0 repeat; }
.bg-checkerboard-yellow-large { width:100%; height:56px; background:var(--white) url(../img/bg-checkerboard-yellow-large.gif) 0 0 repeat;background-size:100%; }
footer { background:var(--gray); color:var(--white); padding:3rem 0;  }
footer a { color:var(--white); text-decoration: none; display:block; }

.triple-sep { height:22px; width:100%; border-bottom:2px solid var(--yellow); border-top:2px solid var(--yellow); position:relative; }
.triple-sep::before { content:''; position:absolute; height:1px; left:0; top:8px; width:100%; border-top:2px solid var(--yellow);  }
.circle-red { background:var(--red); width:60px; height:60px; color:var(--yellow); border-radius: 100%; display:flex; align-items:center; justify-content:center; box-shadow: 2px 2px 0px var(--yellow); }

.btn-red { background:var(--red); color:var(--yellow); border-radius: .5rem;  box-shadow: 3px 3px 0px var(--yellow);  border:0; font-size:16px;  font-family: "lulo-one", sans-serif; font-weight: 700; font-style: normal; padding:.6rem 1rem; }
#ml-form { text-align: left;}
#ml-form label { display:block; width:125px; font-size:15px; }

.ls--8 { letter-spacing: -8px;}

header { position:fixed; background:var(--white); top:0; left:0; right:0; width:100%; z-index:900; height:130px; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;   }
.logo-spacer { width:200px;height:130px;   }
.wrapper { padding-top:130px }
body.scrolled .logo-bodega { width:150px; height:150px;  }
body.scrolled .logo-spacer { width:100px; height:100px; }
body.scrolled header { height:100px; }
body.scrolled .wrapper { padding-top:100px; }

.bg-green.as-spacer { height:100%; }
.bg-striped { background: var(--white) url(../img/bg-srtriped.jpg) 0 bottom repeat;  }
.text-shadow-orange { text-shadow: 3px 3px 0 var(--orange); }
.mw-1170 { max-width:1170px; }
.bg-stripes-vertical { background: url(../img/bg-stripes-vertical.jpg) 0 0 repeat-y; background-size:100%; }
.object-fit-cover { width:100%; height:100%; object-fit:cover; }

@media (max-width:1280px){
    .logo-bodega { width:220px; height:220px; }
    nav a { padding:0; }
    li.mt-30.bullet span { margin-top:-15px;  }
    li.mt-30.bullet {  font-size:70px; width:18px;  }
    nav .btn-black-sm { font-size:10px; }
    nav .icon,  nav .icon svg { max-width:35px !important; }
    .resize-to-100-1280  {font-size:100%;}
    .resize-to-130-1280  {font-size:130%;}
    .lh-29 { line-height:normal; }
    .lh-56 { line-height:normal; }
    .lh-73 { line-height:normal; }
}

@media (max-width:990px){
    .mobile-trigger { display:block; }
}

@media (max-width:575px){
    .bg-green.as-spacer { height:auto; }
}