@font-face {
  font-family: "GothamLight";
  src: url(Gotham-Light.otf);
}
     
@font-face {
font-family: "GothamBold";
src: url(GothamBold.otf);
     }
     
@font-face {
font-family: "GothamMedium";
src: url(GothamMedium.otf);
     }

@font-face {
font-family: "Odachi";
src: url(Odachi.otf);
     }

*{
    margin: 0px;
    padding: 0px;
}

body{
    font-family: "GothamLight";
    color: white;
    background-color: #121212;
    background-image: url('/contact/images/customBG.png');
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.waves-right{
    position: fixed;
    right: 0px;
    top: 0px;
    width: 15vw;
    height: auto;
    z-index: 1000000000000000;
}

.waves-left{
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 15vw;
    height: auto;
    z-index: 1000000000;
}

.customBG{
    position: relative;
    width: 100vw;
    height: 100%;
    z-index: -1;
}

main{
    margin-top: 30px;
    flex: 1 0 auto;
}

.logo{
    position: relative;
    left: 40px;
    max-height: 175px;
}


nav{
    background-color: transparent;
    box-shadow: none;
    height: 175px;
}

.navbar-fixed ul {
    text-align: center;
}
.navbar-fixed ul li {
    display: inline;
    float: none;
    margin-right: 15px;
}
.navbar-fixed ul li a {
    display: inline-block;
    position: relative;
    color: #f5f5f5;
    transition: 0.3s ease;
    height: auto;
}

.navbar-fixed ul li a:hover{
    color: #ffffff;
}

nav ul a:hover {
  background-color: rgba(0, 0, 0, 0);
}

.navbar-fixed ul li .about::after, .tickets::after, .gallery::after, .contact::after, .faq::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 0.175rem;
    background: #0899EA;
    left: 0;
    bottom: 0;
}

.navbar-fixed ul li .about::after, .tickets::after, .gallery::after, .contact::after, .faq::after{
    transform:scale(0,1);
    transition: 0.3s ease;
}



.menu{
    position: absolute;
    top: 10px;
    left: 10px;
}

.sidenav-menu{
    position: absolute;
    left: 0px;
    top: 10px;
    margin: auto;
}

.sidenav{
    width: 100%;
    align-content: center;
    display: grid;
    place-items: center;
    background-color: #212121;
    font-family: "Odachi";
}

.sidenav ul{
    position: relative;
}

.sidenav ul:hover{
    background-color: transparent !important;
}

.sidenav li a {
    font-size: 5rem;
    color: white;
    margin-bottom: 60px;
    transition: 0.3s;
}

.sidenav li:hover{
    background-color: transparent !important;
}

.sidenav li a:hover{
    color: #0899EA;
    background-color: transparent !important;
}

.sidenav-trigger{
    position: absolute;
    top: 20px;
    left: 10px
}

.bar1, .bar2, .bar3{
    width: 50px;
    height: 10px;
    background: blue;
    
    margin: 6px 0;
    transition: 0.5s;
}



.container-poster{
    width: 100%;

}

.poster{
    max-height: 60vh;
    width: auto;
    height: auto;
    transition: 0.3s;
}

.poster-mobile{
    height: auto;
    width: 100%;
    height: auto;
    transition: 0.3s;
}

.poster:hover{
    cursor: pointer;
    transform: scale(1.03);
}

.shows{
    background-color: rgba(24, 24, 26, .95);
    padding: 30px;
    margin-bottom: 30px;
}

.btn {
    background-color: #0899EA;
    transition: 0.3s;
}

.sidenav .btn:hover{
    background-color: #24A5EA;
}

.artist{
    padding: 10px;
    color: #ffffff;
    background-color: #0899EA;
    border-radius: 3px;
    transition: 0.3s;
}

.artist:hover{
    background-color: #24A5EA;
}

.btn:hover{
    background-color: #24A5EA;
}

b{
    color: white;
    font-family: "GothamMedium"
}

b:hover{
    color: #24A5EA;
}

.socialmedia{
    width: 50px;
    height: auto;
    margin-right: 20px;
    transition: 0.3s ease;
}

.socials{

    position: absolute;
  bottom: 0; right: 50%;
  transform: translate(50%,-50%);
}

.socialmediaevent{
    width: 30px;
    margin-right: 10px;
    transition: 0.3s;
}

.socialmediaevent:hover{
    transform: scale(1.1);
}

.map{
    display: inline-block;
    width: 60%;
    height: auto;
    margin-bottom: 20px;
}





h4{
    font-family: "GothamMedium";
    color: #0899EA;
}

.contact a{
    color: white;
}

.faq{
        margin-bottom: 20px;
    }

.faq a{
    display: inline;
}

.faq h4{
    min-height: 100%;
}


h1{
    font-family: "GothamMedium";
    margin: 0px; padding: 0px;
    color: white;
    font-size: 4rem;
}

.socialmediasidenav{
    position: absolute;
  bottom: 30px; right: 50%;
  transform: translate(50%,-50%);
}

.socialmedia:hover{
    transform: scale(1.1);
}

b{
    color: white;
    transition: 0.3s;
}

.page-footer {
    background-color: transparent;
    box-shadow: none;
}


@media all and (min-width: 1920px) {
    body{
        
    }
}


@media all and (max-width: 992px) {
   .poster{
    width: 70%;
}
    
    .logo {
        max-height: 150px;
    }
    
    nav {
        height: 150px;
    }
    
    .contact{
        margin-bottom: 20px;
    }
    
    .waves-right{
        width: 20vw;
    }
    
    .waves-left{
        width: 20vw;
    }
    
    .map{
        width: 65%;
    }
    
}

@media screen and (max-width: 600px) {
       .poster{
    width: 90%;
}
    
    body{
        background-image: url('/contact/images/customBG_Mobile.png');
        background-size: 100% 100vh;
    }
    
    .socialmedia{
        margin-right: 5px
    }
    
    .logo{
        max-height: 100px;
    }
    
    .sidenav li a{
        margin-bottom: 40px;
        font-size: 3.5rem;
    }
    
    
    nav{
        height: 100px;
    }
    
    .waves-right{
        width: 25vw;
    }
    
    .waves-left{
        width: 25vw;
    }
    
    .map{
        width: 80%;
    }
    
    .faq{
        margin-bottom: 15px;
    }
    
    .socialmedia{
        width: 35px;
        margin: 5px;
    }
    
    .socialmediasidenav{
        bottom: 10px;
}
    
}

@media all and (max-height: 600px) {
    .sidenav li a{
        font-size: 3rem;
        margin-bottom: 0px;
    }
    
    .socialmedia{
        width: 35px;
    }
}

@media all and (max-width: 400px) {
    .socialmedia{
        width: 30px;
    }   
}

@media all and (max-height: 400px) {
    .sidenav li a{
        font-size: 2rem
    }
    
    .socialmedia{
        width: 30px;
    }   
}