#heroContainer {
    width: 100%;
    height: 100vh;
    padding: 0;
    background: url(images/heroimage_xs.png) center/cover no-repeat; 
}

#heroText {
    height: 150px;
    padding-top: calc(60vh - 150px);
}

#heroText > h1 {
    position: relative;
    z-index: 3;
    text-align: center;
    margin-bottom: 28px;
}

#heroLine {
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #EF6D28;
    margin-top: -36px
}

#soundWavesContainer {
    margin-top: -53px;
}

#soundWavesContainer h1 {
    text-align: center;
    visibility: hidden;
}

#soundWaves {
    position: absolute;
    margin-top: -91px;
    margin-left: -223px;
    visibility: visible;
    z-index: 0;
}

#heroContainer h6 {
    margin: auto;
    width: 250px;
    padding: 0px;
    text-align: center;
    position: relative;
}

#heroContainer em {
    font-weight: 400;
    color: #EF6D28;
}

#tapMe {
    position: absolute;
    bottom: 0;
    width: 100%;
    cursor: pointer;
    padding-bottom: 10px;
}

#tapMe h4 {
    line-height: 1;
    margin-top: -22px;
    letter-spacing: 2.8px;
    padding-left: 1px;
}

#tapMeLED {
    position: relative;
    height: 20px;
    margin-top: -37px;
    margin-bottom: 13px;
    z-index: -1;
}

h2 {margin-top: 20px}

/*--- MENU ---*/
/* ---------- */

#menu {
    position: absolute;
    margin-top: -1px;
    padding-top: 15px;
    left: -293px;
}

#mask {top: 0;}

#menuButton {visibility: hidden;}

/*--- NAVBAR ---*/
/* ------------ */

#navbar {
    position: relative;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: none;
}

#navbarTitle {
    padding-left: 1px;
    cursor: pointer;
}

#navbarTitle span {
    opacity: 0;
}

#navbarLine {
    width: 100% !important;
    height: 3px;
    margin: 0;
    background-color: #EF6D28;
}


/*--- MEDIA QUERIES ---*/
/* ------------------- */

@media only screen and (min-width: 768px) {
    
    #heroContainer {background-image: url(images/heroimage_sm.png)}
    
    #heroText {padding-top: calc(55vh - 150px);}
}

@media only screen and (min-width: 992px) {
    
    #heroContainer {background-image: url(images/heroimage_sm.png)}
    
    #heroText {padding-top: calc(55vh - 150px);}
    
    #heroText > h1 {margin-bottom: 20px}
    
    h1 {font-size: 2.4rem; letter-spacing: 4.4px;}
    
    #heroContainer h6 {width: 500px;}
    
    #heroLine {margin-top: -42px}
    
    #soundWaves {margin-top: -89px; margin-left: -251px;}
}

@media only screen and (min-width: 1200px) {
    
    #heroContainer {background-image: url(images/heroimage_m.png)}
    
    #heroText {padding-top: calc(55vh - 150px);}
}