@font-face {
    font-family: scaryFont;
    src: url("fonts/halloween.otf") format("opentype");
}

:root {
    --lite-color: #fff;
    --orng-color: #ff9510 !important;
    --purp-color: #ff9510 !important;
    --purpD-color: #ff5055 !important;
    --green-color: #0f8d11 !important;
    --purple-color: #696cff !important;
    --blue-color: #ff5055 !important;
    --HighAlc-color: #e7ffa6 !important;
    --border-rad: 30px;
    --letter-spacing: 3.2px;
    --titleFont: 2.8vw;
    --titleFace: "scaryFont";
    --titleWeight: 300;
    --desWeight: 100;
    --titleFontWeb: 2vw;
    --titleWeightWeb: 300;
    --desWeightWeb: 200;
    --descFontWeb: 1.8vw;
    --banrFont: 2.5vw;
    --descFont: 2.5vw;
    --descFace: "scaryFont";
    --elseFont: 2vw;
    --priceFont: 2.5vw;
    --abvFont: 2.2vw;
    --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: "scaryFont" !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;
}

/* Falling Leves */
.dot{
    width:35px;
    height:35px;
    position:absolute;
    background: url(img/ghost.png);
    background-size: 100% 100%;
  }
    div#containerLeaves {
      width: 100vw !important;
      height: 100vh !important;
      opacity: .35;
      z-index: 2;
      position: fixed !important;
      left:0;
      right:0;
      top:0;
      bottom:0;
      pointer-events: none;
  }
  
  section, .section-border, .section-background {
      background-color: transparent !important;
  }


.containl {
    position: absolute;
    z-index: 0 !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background: url(img/SSB-logo_tran.png) !important; */
    background: url(img/menuBackgrounds/schoonerHalloween.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    height: 100% !important;
    opacity: .35;
}
.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;
}