@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;900&display=swap');
*{
    font-family: 'Montserrat', sans-serif;
}

.masking{
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
    mask-image: linear-gradient (rgba(0, 0, 0, 0.6), transparent);
}

.main {
    position:relative;
}
  
.overlay {
    position:absolute;
    top:0;
    right:0;
}

.landing-heading{
    font-size: 3vw;
}

.heading{
    font-size: 40px;
}

.heading404{
    font-size: 100px;
}

.img-index{
    height:10%;
    width:10%;
}

.bg-image-bula{
    background-image: url("../img/bg-imgs/kava-bula.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.bg-image-menu{
    background-image: url("../img/bg-imgs/palm-trees.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

p, h4, h5, label, .aliceblue-text{
    color: aliceblue;
}

.aliceblue-text:hover{
    color: rgb(139, 177, 211);
}

.neonText {
    color: #fff;
    text-shadow:
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
        0 0 42px #FF7BC7,
        0 0 82px #FF7BC7,
        0 0 92px #FF7BC7,
        0 0 102px #FF7BC7,
        0 0 151px #FF7BC7;
  }

  .neonTextGreen {
    color: #fff;
    text-shadow:
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
        0 0 42px #00FF7F,
        0 0 82px #00FF7F,
        0 0 92px #00FF7F,
        0 0 102px #00FF7F,
        0 0 151px #00FF7F;
  }

  .neonTextRed {
    color: #fff;
    text-shadow:
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
        0 0 42px #FF0009,
        0 0 82px #FF0009,
        0 0 92px #FF0009,
        0 0 102px #FF0009,
        0 0 151px #FF0009;
  }

  .neonTextOrange {
    color: #fff;
    text-shadow:
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
        0 0 42px #FFA400,
        0 0 82px #FFA400,
        0 0 92px #FFA400,
        0 0 102px #FFA400,
        0 0 151px #FFA400;
  }

  .neonTextWhite {
    color: #fff;
    text-shadow:
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
        0 0 42px #00F6FF,
        0 0 82px #00F6FF,
        0 0 92px #00F6FF,
        0 0 102px #00F6FF,
        0 0 151px #00F6FF;
  }

.neonFlickerText {
    animation: flicker 1.5s infinite alternate;
    color: #fff;
  }

  
  /* Flickering animation */
  @keyframes flicker {
      
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
  
        text-shadow:
        0 0 4px #fff,
        0 0 11px #fff,
        0 0 19px #fff,
        0 0 40px #0085ff,
        0 0 80px #0085ff,
        0 0 90px #0085ff,
        0 0 100px #0085ff,
        0 0 150px #0085ff;
    
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
    }    
  }

body {
    margin: 0;
}

.scroll-element {
    height: 100%;
}

.scroll-element {
    height: 100%;
}

/**Styling scrollable elements*/

.js-scroll {
    opacity: 0;
    transition: opacity 500ms;
}

.js-scroll.scrolled {
    opacity: 1;
}

.scrolled.fade-in {
    animation: fade-in 1s ease-in-out both;
}

.scrolled.fade-in-bottom {
    animation: fade-in-bottom 1s ease-in-out both;
}

.scrolled.slide-left {
    animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
    animation: slide-in-right 1s ease-in-out both;
}

/* ----------------------------------------------
* Generated by Animista on 2021-2-11 23:32:31
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

video {
    height: 350px;
}

.promo{
    width: 250px;
    height: auto;
}

@media screen and (min-height: 720px) {
    video {
        height: 700px;
    }
}

@media screen and (min-height: 480px) {
    video {
        height: 460px;
    }
}