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

  @font-face {
    font-family: desc;
    src: url("fonts/CheddarGothicRough-Regular.otf") format("opentype");
}
  
  @font-face {
    font-family: saloon;
    src: url("fonts/LandasansMedium.otf") format("opentype");
  }
  
  @font-face {
    font-family: ontap;
    src: url("fonts/CheddarGothicRough-Regular.otf") format("opentype");
  }
  
  @font-face {
      font-family: insta;
      src: url("fonts/LandasansMedium.otf") format("opentype");
  }
  
  @font-face {
      font-family: neon;
      src: url("fonts/CheddarGothicRough-Regular.ttf") format("opentype");
  }

* {
    touch-action: manipulation;
}

:root {
        --HighAlc-color: #e7ffa6 !important;
        --border-rad: 30px;
        --bannerIcoPad: 30px;
    }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0rem;
}

.irishGreen{
    color: #169B62
}
.white{
    color: #fff
}
.irishOrange{
    color: #FF883E
}
.peach{
    color: #fecf93
}
.amber{
    color: #e75b12
}
.toasted{
    color: #da9e4c
}
.heff{
    color: #ffde53
}
.hazy{
    color: #fff01a
}

body, html {
    font-family: "Tahoma" !important;
    letter-spacing: 1px !important;
    margin-right: 0px !important;
    color:  var(--lite-color) !important;
    background-color: #181818 !important;
    text-shadow: 2px 2px 2px #000;
    height: 100%;
    z-index: 1;
    line-height: 1.2 !important;
    overflow: hidden;
}

.row {
    margin-left: 0 !important;
}

.TopBannerBack {
    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;
}

.EventTitle {
    letter-spacing: 4px !important;
    font-size: 3.2vw;
}

.bannerAct{
    letter-spacing: 2px !important;
    font-size: 3vw  !important;
}

.accentFont{
    font-size: var(--accentFont) !important;
}

.highAlc{
    font-weight: var(--titleWeight) !important;
    color: var(--HighAlc-color)
}

*,
*::before,
*::after {
  box-sizing: revert;
}

.modal-header {
    font-size: 3.5vw  !important;
    font-family: "main" !important;
    background-color: var(--orng-color) !important;
    border-bottom: 1px solid #c2c2c2 !important;
    padding: 1rem 1rem 1rem !important;
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: none !important;
    border-width: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

p {
    margin-bottom: .1rem !important;
}

.KegMod{
    color: #000 !important;
    font-size: 2rem  !important;
    text-shadow: 0px 0px 0px #000 !important;
    padding: 8px;
}

.KegModTable{
    width: 100%;
    padding: 8px;
}
    
.modal-backdrop {
    --bs-backdrop-bg: #000 !important;
    --bs-backdrop-opacity: 0.6;
}

.modal-content {
    font-family: main  !important;
    background-color: #dadada !important;
}

.Oddtr { background: #00000035; }

.modal-content tr:nth-child(odd) { background: #f0f0f0; }
.modal-content tr:nth-child(even) { background: #fff; }

.form-select-lg {
    font-family: saloon !important;
    color: #000 !important;
    font-size: 2rem  !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.form-control-lg{
    font-family: saloon !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    font-size: 2rem  !important;
    color: #000 !important;
    width: 90% !important;
    min-height: 0 !important;
    padding: .4rem .4rem !important;
}

.form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--blue-color) !important;
    border-color: var(--blue-color) !important;
}

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: .1em;
}

.form-label {
    font-family: saloon !important;
    margin-bottom: .5rem;
    font-size: 2rem  !important;
    font-weight: 510 !important;
    color: #000 !important;
}

.MenuToptd {
    border-width: 1px !important;
    border-top: 1pt solid rgb(130, 130, 130) !important;
}

.Menutd {
    border-width: 1px !important;
    border-bottom: 1pt solid rgb(130, 130, 130) !important;
    border-right: 1pt solid rgb(130, 130, 130) !important;
}

.MenuDesctd {
    border-width: 1px !important;
    border-bottom: 1pt solid rgb(130, 130, 130) !important;
    padding-bottom: 6px;
    padding-left: 8px !important
}

.MenubotTd {
    border-width: 1px !important;
    border-right: 1pt solid rgb(130, 130, 130) !important;
}

.menuTable{
    height:100%;
}

a:link {
  color: #0dcaf0 !important;
}

a:visited {
  color: #0dcaf0 !important;
}

.modal-nosha{
    text-shadow: 0px 0px 0px #fff !important;
}

.container {
    position: absolute;
    padding-left: 0 !important;
    max-width: 100% !important;
    z-index: 40 !important;
}

.beerTable{
    width: 100%;
    border-spacing: 0 !important;
    border-collapse: collapse !important;

}

.ontapBanner{
    margin: auto;
    background-color: #874E3E !important;
    font-size: 3.7vw  !important;
    text-align: center !important;
    background: url(img/beertop.png) !important;
    background-repeat: no-repeat;
    background-position: center; 
    background-size: 100% !important;
    color:  #fff !important;
}


.wifi{
    font-family: "insta";
    text-align: right;
    font-size: var(--wifiInstaSiz) !important;
    padding: 20px;
    letter-spacing: 2px;
    padding-right: 20px !important;
}

.Insta{
    font-family: "insta";
    padding: 20px;
    font-size: var(--wifiInstaSiz) !important;
    letter-spacing: 2px;
    padding-left: 20px;
    border-width: 1px !important;
    border-right: 1pt solid rgb(130, 130, 130) !important;
}

.flights{
    font-family: "main" !important;
    text-align:left;
    padding: 20px;
    font-size: 2vw  !important;
}

.comingsoon{
    font-family: "main" !important;
    text-align: center !important;
    min-width:100%;
    display:block;
}


.offLine{
    opacity: .35;
}

.EventCaro{
    position: fixed;
    bottom: 5px;
    left: 0px;
    right: 0px;
    height: 160px;
    --bs-gutter-x:  0px !important;
}

.GuestTap {
    font-family: "main" !important;
    position: fixed; 
    top: 510px;
    left: 0px;
    right: 0px;
    --bs-gutter-x:  0px !important;
}

.guest-title{
    font-family: var(--titleFace) !important;
    font-weight: var(--titleWeight) !important;
    color:  var(--lite-color) !important;
    font-size: 2.8vw !important;
    padding-top: 15px;
    text-align: center !important;
}

.GuestDesc{
    font-family: var(--descFace) !important;
    font-size: var(--descFont) !important;
    color:  var(--purp-color) !important;
    padding-top:  0px !important;
    padding-bottom: 15px;
    border-width: 1px !important;
    border-bottom: 1pt solid rgb(130, 130, 130) !important;
}

.GuestDarktr{
    background-color:rgba(0, 0, 0, 0) !important;
}


.item{
    display:block;
    text-align: center;
}

.carousel-caption{
    color:#fff;
    position:static;
}

.carousel-item {
    transition: transform 2s ease, opacity 2s ease-out;
}

.sixPackCansLeft{
    position: absolute;
    z-index: 101 !important;
    top: 4px;
    left: 0px;
    padding-left: var(--bannerIcoPad);
    height: 100%;
}
.sixPackCansRight{
    position: absolute;
    z-index: 100 !important;
    top: 4px;
    right: 0px;
    padding-right: var(--bannerIcoPad);
    height: 100%;
}

.triviaLeft{
    position: absolute;
    z-index: 102 !important;
    left: 0px;
    padding-left: var(--bannerIcoPad);
    height: 100%;
}
.triviaRight{
    position: absolute;
    z-index: 104 !important;
    right: 0px;
    padding-right: var(--bannerIcoPad);
    height: 100%;
}

.musicLeft{
    position: absolute;
    z-index: 103 !important;
    top: 2px;
    left: 0px;
    padding-left: var(--bannerIcoPad);
    height: 100%;
}
.musicRight{
    position: absolute;
    z-index: 105 !important;
    top: 2px;
    right: 0px;
    padding-right: var(--bannerIcoPad);
    height: 100%;
}

.containw {
    position: absolute;
    z-index: -0 !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background: url(img/menuBackDrop.jpg) !important; */
    background-repeat: no-repeat;
    background-position: center; 
    background-size: 100% !important;
    opacity: .2;
    width: 100%;
    height: 100%;
}
.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;
}

.title {
    font-family: var(--titleFace) !important;
    font-weight: var(--titleWeight) !important;
    color:  var(--lite-color) !important;
    font-size: var(--titleFont);
    max-height: 50px !important;
    width: 40% !important;
    padding-bottom:  0px !important;
    padding-top:  6px !important;
}
.title_web {
    font-family: var(--titleFace) !important;
    font-weight: var(--titleWeightWeb) !important;
    color:  var(--lite-color) !important;
    font-size: var(--titleFontWeb);
    max-height: 50px !important;
    width: 40% !important;
    padding-bottom:  0px !important;
    padding-top:  6px !important;
}

.ed-btn{
    --bs-btn-padding-y: .12rem !important;
    --bs-btn-padding-x: .12rem !important;
    --bs-btn-font-size: 1.85vw  !important;
    color: #f59378 !important;
}

.price{
    font-family: "saloon" !important;
    width: 6%;
    font-size: 2.2vw !important;
    text-align: right;
    padding-right: 10px !important;
}

.description {
    font-family: var(--descFace) !important;
    font-weight: var(--desWeight) !important;
    font-size: var(--descFont) !important;
    color:  var(--purp-color) !important;
    padding-top:  0px !important;
    padding-bottom:  6px !important;
}
.description_web {
    font-family: var(--descFace) !important;
    font-weight: var(--desWeightWeb) !important;
    font-size: var(--descFontWeb) !important;
    color:  var(--purp-color) !important;
    padding-left: 20px !important;
    padding-top:  0px !important;
    padding-bottom:  6px !important;
}

.abv {
    font-family: "saloon" !important;
    font-size: var(--abvFont)  !important;
    color:  var(--lite-color) !important;
}

/* Colors */

.guest {
    font-size: 2.75vw  !important;
    color:  #fff !important;
    text-align:center !important;
}

.pale {
    color:  #49C2EB !important;
}

.lager {
    color:  #FFC600 !important;
}

.stout {
    color:  #C4AFAF !important;
}

.sour {
    color:  #FCF300 !important;
}