@import url(http://fonts.googleapis.com/css?family=Oswald|Open+Sans);
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

@charset "UTF-8";
/* Base Styles */

* {
    margin: 0;
    padding: 0;
}

.nav-container {
    height: 71px;
}

/* <ul> tag for the main menu */

.nav {
    z-index: 999;
}

.nav > ul {
    position: relative;
    z-index: 597;
    float: left;

}

/* all <li> tags */

.nav > ul li {
    float: left;
    min-height: 1px;
    line-height: 1.3em;
    vertical-align: middle;
}

.nav > ul li:hover {
    z-index: 599;
    cursor: default;
}

/* all <ul> tags in the sub menu and sub sub menu */

.nav > ul ul {
    visibility: hidden;
    position: absolute;
    top: 100%;

    z-index: 598;
}

/* all <li> tags in the sub menu and sub sub menu */

.nav > ul ul li {
    float: none;
}



.nav > ul li:hover > ul {
    visibility: visible;
}


.nav > ul a:link {
    text-decoration: none;
}

.nav > ul a:active {
    color: #EF5350;
}


/* all <li> tags */

.nav li {
    padding: 0;
    color: #000;
    list-style: none;

}

.nav {
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    text-align: center;
    margin: 0 auto;
    font-family: 'Oswald', sans-serif;
    width: 100%;
    background: rgba(0, 0, 0, 0.95);
    font-size: 22px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    

}

/* <ul> tags in the main menu */

.nav > ul {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    position: relative;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    float: none;
    zoom: 1;
}

.nav > ul:before {
    content: '';
    display: block;
}

.nav > ul:after {
    content: '';
    display: table;
    clear: both;
}

/* <li> tags in the main menu*/

.nav > ul > li {}

/* <a> tags in the main menu*/

.nav > ul > li > a {
    text-shadow: 0 -1px 1px #004881;
    color: #fff;
    margin: 10px 20px;
    padding: 10px 10px;
    display: block;

}

.nav > ul > li > a:hover,
.nav > ul > li:hover > a {
    color: #EF5350;
}

/* all <a> tags under the main menu */

.nav li li a {
    color: #F5F5F5;
}

.nav li li a:hover,
.nav li li:hover > a {
    color: #EF5350;
}


/* only <ul> tags in the submenu */

.nav > ul > li > ul {
    background: rgba(0, 0, 0, 0.95);
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

}

/* all <ul> tags under the main menu */

.nav ul ul {

    margin: 0 10px;
    padding: 0 10px;
    float: none;
    left: 0;
    right: 0;
}

/* All <li> tags under main menu */

.nav ul > li > ul > li {


    position: relative;
    padding: 0;
    float: left;
}

/* All <a> tags under main menu */

.nav ul > li > ul > li > a {
    margin: 10px 20px;
    padding: 10px 10px;
    display: inline-block;
}


/* <li> tags in the sub sub menu */

.nav > ul > li > ul > li > ul > div {
    background: rgba(0, 0, 0, 0.95);
    display: inline-block;
    text-align: left;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
}

.nav > ul > li > ul > li > ul > div > li {
    margin: 10px 20px;
    padding-bottom: 10px;
    display: inline-block;

}

.nav ul ul ul li a {
    text-align: left;
}

.nav > ul > li.last {
    margin-right: 10px;
    position: absolute;
    right: 0;
}

.nav > ul > li.last > form {}

.nav > ul > li.last > form > button {
    
    padding: 10px 10px;
    text-align: center;
    background: #ddd;
    font-size: 20px;
    border: none;
    cursor: pointer;

}

.nav > ul > li.last > form > button > i::before {
    content: "\f002";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

#search-bar {
    font-size: 20px;
    width:200px;
    padding: 10px 10px;
    border: none;

}

#search-bar:focus {
    outline: none;
}
#button{
	width:50px;
}

.nav > ul > li.icon {
    display: none;
}

@media screen and (max-width:1024px) {
    .nav > ul {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    

}

.sticky {
    position: fixed;
    top: 0;
    width: 100%
}



/* When the screen is less than 480 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 720px) {
    .nav > ul > li.middle {
        display: none;
    }
    .nav > ul > li.icon {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    .nav > ul > li > ul > li > ul > div {
        vertical-align: bottom;
    }
    
    .nav {
    	max-height:100vh;
    overflow:auto;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 720px) {

    .nav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .nav.responsive li.middle {
        float: none;
        display: block;
        text-align: left;
    }

    .nav.responsive > ul {
        display: block;
        text-align: left;
    }

    .nav.responsive > ul > li.first,
    .nav.responsive > ul > li.middle,
    .nav.responsive > ul > li.last {
        position: relative;
        display: inline-block;
        float: left;
        clear: both;
    }

    .nav.responsive > ul > li.middle {
        width: 100%;
        background: rgba(0, 0, 0, 0.95);


    }
    .nav.responsive > ul > li.last {
        margin-left: 20px;
    }

    .nav.responsive ul > li > ul {
        display: none;
        position: absolute;
    }
    .nav > ul > li.active:hover > ul {
        display: block;
    }

    .nav > ul > li > ul > li:hover > ul {
        display: block;
    }

    .nav ul > li > ul > li {
    	margin: 10px 0px;
        float: left;
        clear: both;
        width:100%;
    }

    #search-bar,
    .nav.responsive > ul > li.last > form > button {
        float: none;
        margin-bottom: 20px;

    }

    .nav.responsive ul > li > ul {
        position: relative;
    }

    .nav.responsive ul > li > ul > li > a {
        padding: 0;
    }
    .nav.responsive > ul > li > ul > li > ul > div {
        background: none;
        padding-top: 10px;
        width: 100%;
    }

    .nav.responsive > ul > li > ul > li > ul > div > li {
        float: left;
        clear: both;
        margin: 10px 0px;
        padding: 10px;
        width: 100%;

    }
    
}
    .autocomplete-suggestions {
    border: 1px solid #999;
    background: #fff;
    cursor: default;
    overflow: auto;

}
.autocomplete-suggestion {
    padding: 10px 5px;
    font-size: 1.2em;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: #f0f0f0;
}

.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399ff;
}