html {
    width:100%;
    height:100%;
}
body {
    overflow: hidden;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-size: 16px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/*animation*/
.loaded {
    animation: color-me-in 2s; /* other keywords like "infinite alternate" can be useful here */
    background-color: transparent;
    animation-timing-function: ease-in-out;
 }
 
@keyframes color-me-in {
    /* You could think of as "step 1" */
    0% {
      background: transparent;
    }
    50% {
      background: #fdc34e;
    }
    /* You could think of as "step 2" */
    100% {
      background: transparent;
    }
  }

/* 

 .card {
    -webkit-transition: background-color 1s ease-in-out;
    -moz-transition: background-color 1s ease-in-out;
    -o-transition: background-color 1s ease-in-out;
    transition: background-color 1s ease-in-out;    
 } */

/* Fonts */
h1 {
    font-size: 4em;
}
h2 {
    font-size: 3em;
}
h3 {
    font-size: 1.5em;
}
h4 {
    font-size: 1.8em;
}

.tap-number {
    font-size: 1.5em;
    text-align: center;
    margin-top: .5rem;
}

/* Background image */
.background-image {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Pages */

.pages-title {
    text-align: center;
    /* flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 7rem; */
    margin-bottom: 2rem;
}

.pages-title h1 {
    margin-bottom: 0;
}

.bar-logo {
    max-height: 15rem;
    max-width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.page {
    padding: 0 2rem 0 2rem;
    max-width: 100%;
}

.beverage-label {
    overflow:hidden;
    margin-right: 1.5rem;
}

.beverage-label img{
    max-width:5rem;
}


.keg-wrapper {
    margin-left: 1rem;
}

.keg-fill {
    margin-left: 1rem;
    width: 5em;
    height: 8em;
    position:relative;
    border-radius: 0px 0px 10px 10px;
    overflow:hidden;
}

.keg-fill:before {
    opacity: 0.5;
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    background-image: url(../assets/keg-bg-light.svg);
    background-size: cover;
    background-position: center;
    mix-blend-mode: darken;
    z-index:100;
}

.keg-fill .beer {
    background-color:rgba(255, 193, 7, 0.75);
    bottom:0;
    position:absolute;
    width:100%;
    height:95%;
    font-size:1px;
}

.keg-info {
    font-size: .8em;
}

/* Bootstrap overwrite */
.row {
    margin-left: -1rem;
    margin-right: -1rem;
}
.col {
    padding: 1rem;
}

/* */
.swiper-container {
    width: 100%;
    max-width: 100%;
}