@charset "utf-8";
/* CSS Document */
/*----------------------------------------------*/
html {scroll-behavior: smooth; scroll-padding-top: 150px;}
nav.navbar {position: sticky; top:0; background-color: #000000;}
#home {margin-top: -130px;}
#navbarSupportedContent{background-color: rgba(0, 0, 0, 0.75)!important; padding; 20px;}
/*---------------------------------------*/

body {background: #000; color:#fff; }
#home {background-image: url("images/hero02.png");
background-size: cover; height:98vh  ;width: 100%; background-position: center; padding: 0;} 

.flavorwrap {background-image: url("assets/modalbg.png");
background-size: cover; width: 100%; background-position: center; padding-top: 60px;} 

h1 {color: #fff; }

a {color: #fff; font-family: poppins; text-transform: uppercase;}
p {color: #fff; font-size: 20px; font-family: poppins;}

h1 {font-family: "abril-fatface", serif;
font-weight: 400;
font-style: normal;font-size: 60px; text-transform: uppercase;}

h2 {font-family: "abril-fatface", serif;
font-weight: 400;
font-style: normal;font-size: 45px; text-transform: uppercase;}

h2 fab {display: inline; float: right;}

h3 {font-family: "abril-fatface", serif;
font-weight: 400;
font-style: normal;font-size: 26px; text-transform: uppercase; letter-spacing: .15em;}

.fabnav { color: #fff;}



a.nav-link  {color: #fff; font-size: 20px; font-weight: 400;}

a.nav-link:hover  {color: gold; }

.nav-link.active {color: #ccc !important;}

.navbar-brand img {max-height: 130px;}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url("assets/burger.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}




    /* Styles for screens 768px or narrower */
    @media screen and (max-width: 768px) {
.navbar-collapse {

    position: absolute;
    top: 150px;       
	right: 0px;
    text-align: right;
	padding-left: 10px;
}
    }



h1.hometag {text-align: center; text-shadow: 0px 0px 6px #000000; }

    /* Styles for screens 768px or narrower */
    @media screen and (max-width: 768px) {
h1.hometag {font-size: 40px; }
    }

.homeherotxt {display: flex; padding-top: 300px;  align-items: flex-end;}
section {padding-bottom: 60px;}
section.flavnav {padding-bottom: 15px;}
.flavorwrap h1 {padding-bottom: 30px;}

.mthumb {cursor:pointer;}
.mthumb img {max-height: 600px;}

/*.mthumb img {max-height: 450px;}*/

.mthumb h3 {text-align: center; color: #ccc; }

.modal-body img {height: 600px !important;}
.modal-body p {color: #000;}

.modal-content {background-image: url("assets/modalbg.png")}

.modal-header {border: none;}

#about h3 {font-size: 30px;}

#about p {font-size: 21px;}

footer img {max-height: 120px;}

/*
Flav Page
*/

#flavors {min-height: 100vh;}
.flavorwrap h1,.flavorwrap h2 {color: #000; }

.flavorwrap a {color: #000; font-family: poppins; text-transform: uppercase;}
.flavorwrap p {color: #000; font-size: 20px; font-family: poppins;}
.flavorwrap a.nav-link  {color: #fff; font-size: 20px; font-weight: 400;}
.flavorwrap a.nav-link  {color: #000; font-size: 20px; font-weight: 400;}
.flavorwrap img {max-height: 600px;}
.flavor {margin-top:60px;}