:root {
    --lite-color: #fff;
    --orng-color: #ffca58 !important;
    --purp-color: #ffca58 !important;
    --purpD-color: #d7fd66 !important;
    --green-color: #0f8d11 !important;
    --purple-color: #696cff !important;
    --blue-color: #8ccfff !important;
    --HighAlc-color: #e7ffa6 !important;
    --border-rad: 30px;
    --letter-spacing: 3.2px;
    --titleFont: 2.8vw;
    --titleFace: "main";
    --titleWeight: 300;
    --desWeight: 100;
    --titleFontWeb: 2vw;
    --titleWeightWeb: 300;
    --desWeightWeb: 200;
    --descFontWeb: 1.8vw;
    --banrFont: 2.5vw;
    --descFont: 2.5vw;
    --descFace: "desc";
    --elseFont: 2vw;
    --priceFont: 2.6vw;
    --abvFont: 2.4vw;
    --wifiInstaSiz: 2.5vw;
}

.TopBannerBack {
    /*
        background-image: url("img/menuBackgrounds/blackboard-backgrounds.jpg");
        background-repeat: no-repeat;
        background-position: top;
        background-size: 100% !important;
    */
        font-family: "ontap" !important;
        background-color: rgba(18, 13, 2, 0.44);
        padding-bottom: 6px;
        padding-top: 6px;
        background-position-y: 1px;
        font-weight: var(--titleWeight) !important;
    }

.orngC{
    color:  var(--orng-color) !important;
}
.liteorngC{
    color:  var(--purp-color) !important;
}
.pipes{
    color:  var(--orng-color) !important;
}
.icons{
    color:  var(--lite-color) !important;
}
.tapNum{
    color:  var(--orng-color) !important;
}
.blueCol{
    color:  var(--blue-color) !important;
}
.eventDate{
    color: var(--lite-color) !important;
}
.beerSize{
    color:  var(--purpD-color) !important;
}

.EventTitle {
    color: var(--purp-color) !important;
}

.bannerSubtitle{
    color:  var(--purpD-color) !important;
}


.containl {
    position: absolute;
    z-index: 0 !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    /*height: 100% !important;*/
    opacity: .6;
}
/* Desktop styles (default) */
.containl {
    background: url(img/menuBackgrounds/beerBackdrop.jpeg) !important;
	position: absolute;
    z-index: 0 !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    /*height: 100% !important;*/
    opacity: .6;
}

/* Mobile styles */
@media (max-width: 768px) {
    .containl {
        background: url(img/menuBackgrounds/schoonerBeerDrop.jpeg) !important;
		position: absolute;
    z-index: 0 !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    /*height: 100% !important;*/
    opacity: .6;
    }
}

.containLogo {
    position: absolute;
    z-index: 2 !important;
    top: 26%;
    left: 794px;
    background: url(img/SSB-logo.png) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    opacity: .2;
    width: 320px;
    height: 350px;
}
/*
.containLogo2 {
    position: absolute;
    z-index: 2 !important;
    top: 24%;
    left: 704px;
    background: url(img/SSB-logo.png) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    opacity: .2;
    width: 300px;
    height: 330px;
}
*/
.containLogo2 {
    position: absolute;
    z-index: 2 !important;
    top: 53%;
    left: 707px;
    background: url(img/SSB-logo.png) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    opacity: .2;
    width: 30px;
    height: 50px;
}