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

}

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

}

:root {
    --black:#000;
    --white:#fff;
    --gray:#32373a;
    --green: #7b9258;
    --green-mid: #8b9b70;
    --green-mid-2: #717f5b;
    --purple:#804592;
    --purple-mid:#965fa7;
    --yellow: #e79e24;
    --yellow-mid: #e79e24;
    --green-bright: #008245;
    --red: #ce202f;
    --blue-light:#70ceea;
    --gray-blue:#4e5958;
    --yellow-light:#f7cf45;
    --orange:#fd6042;
    --orange-shaded: #d35c46;
    --charcoal:#131514;
    --orange-2: #e33d15;
    --blue: #091f40;
    --lavendar:#5a5478;
    --teal-dark:#1f4143;
    --green-faded:#42695b;
    --orange-3: #c87c29;
    --blue-faded: #4d86a0;
    --teal-bright:#00a0d1;
    --teal-dark-2: #002a35;
    --teal-bright-2: #0091a4;
    --teal-bright-3: #32bdd7;
    --tan:#cea559;
    --gray-light:#e5e5e5;
    --orange-4: #ac441e;
    --tan-light:#d9c79e;
    --green-faded-2:#375543;
    --lavendar-light:#a476a5;
    --blue-light-2:#71b6f3;
    --blue-light-3:#aed0eb;
    --blue-light-4:#7cacc3;
    --lime:#8cc63f;
    --blue-faded-2: #5f7b89;

}

.text-fs-11 { font-size:11px; }
.text-fs-14 { font-size:14px; }
.text-fs-15 { font-size:15px; }
.text-fs-18 { font-size:18px; }
.text-fs-20 { font-size:20px; }
.text-fs-22 { font-size:22px; }
.text-fs-24 { font-size:24px; }
.text-fs-26 { font-size:26px; }
.text-fs-30 { font-size:30px; }
.text-fs-36 { font-size:36px; }
.text-fs-40 { font-size:40px; }
.text-fs-45 { font-size:45px; }
.text-fs-60 { font-size:60px; }

.text-nexa {  font-family: 'nexaextra_light'; }
.text-nexa-heavy {   font-family: 'nexaheavy'; }
.text-roboto { font-family: "Roboto", sans-serif; }

.text-gray { color: var(--gray);}
.bg-gray { background-color: var(--gray); }
.text-white { color: var(--white); }
.bg-white { background-color: var(--white); }
.bg-green { background-color: var(--green);}
.text-green { color: var(--green);}
.bg-green-mid { background-color:var(--green-mid); }
.text-green-mid { color:var(--green-mid); }
.bg-green-mid-2 { background-color:var(--green-mid-2); }
.text-green-mid-2 { color:var(--green-mid-2); }
.bg-purple { background-color:var(--purple); }
.text-purple { color:var(--purple); }
.bg-purple-mid { background-color:var(--purple-mid); }
.text-purple-mid { color:var(--purple-mid); }
.bg-yellow { background-color:var(--yellow); }
.text-yellow { color:var(--yellow); }
.text-yellow-mid { color:var(--yellow-mid); }
.bg-yellow-mid { background-color:var(--yellow-mid); }
.bg-green-bright { background-color:var(--green-bright); }
.text-green-bright { color:var(--green-bright); }
.bg-red { background-color:var(--red); }
.text-red { color:var(--red); }
.bg-blue-light { background-color:var(--blue-light); }
.text-blue-light { color:var(--blue-light); }
.bg-gray-blue { background-color:var(--gray-blue); }
.text-gray-blue { color:var(--gray-blue); }
.bg-yellow-light { background-color:var(--yellow-light); }
.text-yellow-light { color:var(--yellow-light); }
.bg-orange { background-color:var(--orange); }
.text-bg-orange { color:var(--orange); }
.bg-orange-shaded { background-color:var(--orange-shaded); }
.text-orange-shaded { color:var(--orange-shaded); }
.bg-charcoal { background-color:var(--charcoal); }
.text-charcoal { color:var(--charcoal); }

.bg-orange-2 { background-color:var(--orange-2); }
.bg-blue { background-color:var(--blue); }
.bg-lavendar { background-color:var(--lavendar); }
.bg-teal-dark { background-color:var(--teal-dark); }
.bg-green-faded { background-color:var(--green-faded); }
.bg-orange-3 { background-color:var(--orange-3); }
.bg-blue-faded { background-color:var(--blue-faded); }
.bg-teal-bright { background-color:var(--teal-bright); }
.bg-teal-dark-2 { background-color:var(--teal-dark-2); }
.bg-teal-bright-2 { background-color:var(--teal-bright-2); }
.bg-teal-bright-3 { background-color:var(--teal-bright-3); }
.bg-tan { background-color:var(--tan); }
.bg-gray-light { background-color:var(--gray-light); }
.bg-orange-4 { background-color:var(--orange-4); }
.bg-tan-light { background-color:var(--tan-light); }
.bg-green-faded-2 { background-color:var(--green-faded-2); }
.bg-lavendar-light { background-color:var(--lavendar-light); }
.bg-blue-light-2 { background-color:var(--blue-light-2); }
.bg-blue-light-3 { background-color:var(--blue-light-3); }
.bg-lime { background-color:var(--lime); }
.bg-blue-faded-2 { background-color:var(--blue-faded-2); }
.bg-blue-light-4 { background-color:var(--blue-light-4); }

.ripped-paper-top { position:absolute; top:-32px; left:0; height:32px; width:100%; z-index:20;  }
.paper-white { background:transparent url(../img/ripped-paper-top-white.png) repeat-x 0 0;   }
.paper-black { background:transparent url(../img/ripped-paper-top-black.png) repeat-x 0 0;   }

.bg-gray .paper { background:transparent url(../img/ripped-paper-top-blue-gray.png) repeat-x 0 0;   }
.bg-red .paper { background:transparent url(../img/ripped-paper-top-red.png) repeat-x 0 0;}
.bg-yellow-light .paper { background:transparent url(../img/ripped-paper-top-yellow.png) repeat-x 0 0;}
.bg-orange-2 .paper { background:transparent url(../img/ripped-paper-top-orange-2.png) repeat-x 0 0;}
.bg-lavendar .paper { background:transparent url(../img/ripped-paper-top-lavendar.png) repeat-x 0 0;}
.bg-teal-dark .paper { background:transparent url(../img/ripped-paper-top-teal-dark.png) repeat-x 0 0;}
.bg-blue-faded .paper { background:transparent url(../img/ripped-paper-top-blue-faded.png) repeat-x 0 0;}
.bg-gray-light .paper { background:transparent url(../img/ripped-paper-top-gray-light.png) repeat-x 0 0;}
.bg-tan-light .paper { background:transparent url(../img/ripped-paper-top-tan-light.png) repeat-x 0 0;}
.bg-green-faded-2 .paper { background:transparent url(../img/ripped-paper-top-green-faded-2.png) repeat-x 0 0;}
.bg-blue-light-3 .paper { background:transparent url(../img/ripped-paper-top-blue-light-3.png) repeat-x 0 0;}
.bg-green-bright .paper { background:transparent url(../img/ripped-paper-top-green.png) repeat-x 0 0;}

.text-shaded { color:rgba(0, 0, 0, .2);}
.text-shaded-light, .text-shaded-light-span span.text-shaded { color:rgba(255, 255, 255, .2);}
.bg-chalkboard { background:var(--black) url(../img/bg-chalkboard.jpg) no-repeat 0 0; background-size:cover;}


body { font-size:17px; font-family: "Roboto", sans-serif; background-color: var(--black); overflow-x:hidden; }
header { position:fixed; top:0; left:0; width:100%; z-index:99; }

nav { max-width:800px; margin:0 0 0 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(--white); font-size: 20px; text-decoration: none;  font-family: 'nexaheavy'; text-transform: uppercase; } 
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, 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;   font-family: 'nexaheavy';}
.mobile-dropdown { display:none; }
.mobile-dropdown a { font-size:20px; color: var(--white);  font-family: 'nexaextra_light';}
.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: #fff; 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) }
body.open .mobile-trigger span:nth-child(2) { transform:rotate(-45deg); margin-top:-7px; }
body.open .mobile-overlay-wrapper { opacity: 1; z-index:1000; }

footer { color:var(--white); }
footer h2 { font-family: 'nexaheavy'; text-transform:uppercase; font-size:27px;  }

.social { max-width:285px; margin:auto; }
.legal { margin-top:40px; margin-bottom:100px; }
.legal, .legal a { font-size:14px; text-align:center; color:var(--gray); text-decoration:none; }
.legal em { font-weight:600;  }
.mailing-list-form .form-group { display:flex; text-align:left; margin-bottom:10px; align-items:center; }
.mailing-list-form label { display:block; width:200px; }
.mailing-list-form .form-control, .modal-body .form-control { border-radius:100px; background:rgba(255, 255, 255, .13); border:none; padding:.6rem .5rem; color:#fff; }
.modal-body textarea.form-control { border-radius: .5rem; }
.btn-white { display:inline-block; padding:.6rem 3rem; background-color: #fff; font-weight:700; text-transform: uppercase; font-size:20px; border-radius: 100px; font-family: 'nexaheavy'; color:#000; text-decoration: none; }

.btn-white-sm { display:inline-block; padding:.5rem 2.3rem; background-color: #fff; font-weight:700; text-transform: uppercase; font-size:14px; border-radius: 100px; font-family: 'nexaheavy'; color:#000; text-decoration: none; }

.btn-gray { display:inline-block; padding:.6rem 3rem; background-color: var(--gray); font-weight:700; text-transform: uppercase; font-size:20px; border-radius: 100px; font-family: 'nexaheavy'; color:var(--white); text-decoration: none; }


.btn-gray-sm { display:inline-block; padding:.5rem 2.3rem;; background-color: var(--gray); font-weight:700; text-transform: uppercase; font-size:14px; border-radius: 100px; font-family: 'nexaheavy'; color:var(--white); text-decoration: none; }

.hero { height:500px; }
.hero img { width:100%; height:100%; object-fit:cover; }
.hero::after { content:''; position:absolute; bottom:0; left:0; height:200px; width:100%; pointer-events:none; background: #000000;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.69) 0%, rgba(0, 0, 0, 0) 50%); }
.hero-text { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:10; }
.hero-text h2 { font-size:60px; font-family: 'nexaheavy'; text-transform:uppercase; color:var(--white); text-align:center; }


.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, .7) !important; }
.shift-left-80 { margin-left:-80px;  width:calc(100% + 80px); position:relative; z-index:1; }
.shift-right-80 { margin-right:-80px;  width:calc(100% + 80px); position:relative; z-index:1;  }
.shift-right-200 { margin-right:-200px;  width:calc(100% + 200px); position:relative; z-index:1;  }
.ls-06 { letter-spacing:.06rem; }
.lh-2 { line-height:2rem; }
.text-fs-12 { font-size:12px; }
.text-fs-30 { font-size:30px; }
.text-fs-50 { font-size:50px; }
.scrolled header { background: #000000; background: linear-gradient(180deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0) 100%);}

.beers-section .hero::after { height:125px; }
.beers-section .hero .hero-text { z-index:25; margin-top:25px; margin-left:-25px; }
.beers-section .beer-can { margin-top:210px; }

.w-lg-900 { width:900px; }
.w-lg-1048 { width:1048px; }
.w-lg-1200{ width:1200px; }
.add-overlay { position:relative; overflow:hidden; }
.add-overlay::before { content: ""; position: absolute; background: rgba(38,38, 38, .5); width: 100%; height: 100%; z-index:1; }
.add-overlay img { width:100%; height:100%; object-fit:cover; }
.add-overlay h2 { font-size:48px; color:var(--white); text-transform:uppercase; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family: 'nexaheavy'; width:90%; z-index:2  }
.object-fit-cover { width:100%; height:100%; object-fit:cover; }
.rounded-4 { overflow:hidden; }
.h-85 { height:85%; }
.border-light { border-bottom-color: rgba(255, 255, 255, .4) !important; }
.mh-600 { max-height:600px;}
.mh-800 { max-height:800px;}
.border-bottom-yellow { border-bottom:2px solid var(--yellow-light)}
.border-top-yellow { border-top:2px solid var(--yellow-light)}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive video{
    left:0;
    top:0px;
    height:100%;
    width:100%;
    position:absolute;
    object-fit: cover;
}

.add-overlay-only::before {     content: ""; position: absolute; background: rgba(38, 38, 38, .60); width: 100%; height: 100%; z-index: 10  }

.hover-zoom { -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.hover-zoom:hover { transform:scale(106%); }

.btn-close { position:absolute; top:20px; right:20px; }

@media (max-width:990px){
    .beers-section .hero { height:650px;  }
    .beers-section .hero .hero-text { margin-left:auto;  }
    .beers-section .beer-can { margin-top:0px; width:200px !important; }
    .w-lg-900, .w-lg-1048, .w-lg-1200 { width:100%; }
    .mobile-trigger { display:block; }
    .hero-text h2 { font-size:40px; }
    .hero { height:400px; }
    .shift-left-80, .shift-right-80, .shift-right-200 { margin:-80px auto auto;  width:90%;  }
    .text-fs-sm-9 { font-size:9px; }
    .text-fs-sm-12 { font-size:12px; }
    .text-fs-sm-14 { font-size:14px; }
    .text-fs-sm-25 { font-size:25px; }
    .text-fs-sm-30 { font-size:30px; }
}

@media (max-width:768px){
    .beers-section .hero { text-align:center; }
    .beers-section .beer-can { margin:auto; width:120px !important; }
    .btn-gray-sm { padding:.3rem 1rem; }
}