.nav-bar { 
    background: transparent; 
    width: 100%; 
    height: 130px; 
    position: fixed; 
    top: 0; 
    z-index: 3;  
    display: flex; 
    align-items: center;
    
    .logo{
        padding: 40px 40px; 
        
        img { 
            display: block; 
            margin: 3px auto; 
            margin-left: 15px;
            width: 60px; 
            height: auto;
            
            &.sub-logo { 
                width: 150px; 
                margin-left: -14px;
            }
        }
    }
    nav { 
        display: flex; 
        align-items: center;
        justify-content: space-evenly; 
        padding-left: 0;
        flex-grow: 1;
        a { 
            font-size: 25px; 
            color: #f0f0f083;
            display: block; 
            margin: 0 80px; 
            position: relative; 
            text-decoration: none; 

            i { 
                transition: all 0.3s ease-out; 
            }

            &:hover { 
                color: #fff;
                
                svg { 
                    opacity: 0; 
                }

                &:after { 
                    opacity: 1; 
                }
            }

            &:after { 
                content: ""; 
                font-size: 20px; 
                letter-spacing: 2px; 
                position: absolute; 
                bottom: 0; 
                display: block; 
                text-align: center; 
                opacity: 0; 
                transition: all 0.3s ease-out;
            }

            &:first-child { 
                &::after { 
                    content: 'HOME'; 
                    margin-left: -12px;
                }
            }
        }

        a.search-link { 
            &:after { 
                content: "SEARCH";
                margin-left: -20px;
            }
        }

        a.calendar-link { 
            &:after { 
                content: "CALENDAR"; 
                margin-left: -28px;
            }
        }
        a.history-link { 
            &:after { 
                content: "HISTORY"; 
                margin-left: -28px;
            }
        }
        a.contact-link {
            &:after {
                content: "CONTACT";
                margin-left: -25px;
            }
        }

        a.active{
            svg{
                color: #fff; 
            }
        }
        .button-link {
            border: none;
            color: #fff;
            background-image: linear-gradient(30deg, #ff4000, #fd9815);
            border-radius: 10px;
            background-size: 100% auto;
            font-family: inherit;
            font-size: 15px;
            padding: 0.6em 1.5em;
            white-space: nowrap;
        }
        .button-link:hover {
            background-position: right center;
            background-size: 200% auto;
            -webkit-animation: pulse 2s infinite;
            animation: pulse512 1.5s infinite;
        }

        @keyframes pulse512 {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.6);
            }
            
            70% {
                box-shadow: 0 0 0 10px rgba(255, 165, 0, 0%);
            }
            
            100% {
                box-shadow: 0 0 0 0 rgba(255, 165, 0, 0%);
            }
            
           }
    }
    .icon{
        width: 50px;
        margin: 30px;
        opacity: 0.8;
        color: #ff4000; 

        &:hover { 
            opacity: 1;
        }
    }
}

.hamburger-icon, 
.close-icon { 
    display: none;
}
@media screen and (max-width: 1150px){
    .nav-bar{
        position: initial; 
        height: 100px; 
        .logo{
            img { 
                width: 50px; 
                &.sub-logo { 
                    width: 100px; 
                    margin-left: -7px;
                }
            }
        }

        nav{
            display: none;
            width: 100%; 
            height: 100%;
            background: #1a0408;
            top: 0; 
            left: 0; 
            position: fixed; 
            z-index: 2; 
            margin: 0;

            a { 
                display: flex;
                padding-left: 33%; 
                margin: 30px;
            }

            a:after{
                opacity: 1;
                position: initial;
                width: auto;
                padding-left: 50px;;
            }

            a svg {
                opacity: 1 !important;
            }

            &.mobile-show { 
                display: block;
            }
            .button-link{
                margin-top: 150px;
                margin-left: 40%;
                width: 100px;
            }
        }
        .hamburger-icon, 
        .close-icon {
            display: block;
            position: absolute; 
            top: 15px; 
            right: 15px;
            color: #f76d3f; 
        }

    }
  }
  
  @media screen and (max-width: 500px){
    .nav-bar{
        nav{
            a { 
                padding-left: 22%; 
                margin: 30px;
            }
            .button-link{
                margin-left: 32%;
            }
        }
    }
}