#navbarwrap {
height: 40px;;
 background: rgba(1,146,166,0.9);
padding: 0px;
   box-shadow:         0px 4px 10px -2px rgba(80, 80, 80, 1);
    position: fixed;
    width: 100%;
}

#navbar {
width: 1024px;
height: 100%;
margin: 0px auto;
    position: relative;
    display: block;
    
}

#searchwrap {
height: 40px;
width:100px;
overflow: hidden;
//transition: .2s height ease-in-out;
position: relative;
    display: inline-block;
     width:390px;
    margin-left: 10px;

    
}
#searchwrap:hover { height: 390px;}


.results {
 opacity: 0; 
    transition: .2s opacity ease-in-out;
}

#searchwrap:hover .results {
    opacity: 1;
}

#search_input {
margin: 0px;
height: 30px;
background-color: #01C0DC;
padding-left: 40px;
border: 0px;
outline: 0px;
color: #01C0DC;
font-size: 20px;
transition: .2s all ease-in-out;
border-radius: 5px;
width: 100px;
    margin-top: 5px;
         width:390px;
}
#searchwrap:hover #search_input {
    background-color: #fff;
    color: #000;
    width: 390px;
    
}
#searchwrap svg {
    position: absolute;
    display: inline;
    margin-top:11px;
    margin-left: 6px;
    fill: #ffffff;
    height: 18px;
    width: 22px;
    transition: .2 fill ease-in-out;
}
#searchwrap:hover svg { fill:#0192A6;}
.results {
    width: 350px;
    height:300px;
    background: rgba(1,146,166,0.9);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
    overflow-y: scroll;
    margin-top: 5px;
    position: relative;
   
    
}
.results::-webkit-scrollbar { display: none; }

.results a {
 display: block;
    width: 336px;;
    height: 20px;
    text-align: left;
    padding: 8px;
    
    text-decoration: none;
    color: #fff;
    background-color: #01B4CD;
    border-radius: 7px;
    margin-bottom: 8px;
    
    font-size: 16px;
    font-weight: bold;
    transition: .1s background ease-in-out;
    
    
}
.results a:hover {
 background: #01C0DC;
    
}



#navelementwrap {
    right: 0px;
    position: absolute;
    display: inline
    
}
.navelement {
margin: 0px 10px 0px 10px;
display: inline-block;
    transition: .2s background ease-in-out;
    border-bottom: 3px solid transparent;


    
 

}

.navelement:hover {
   border-bottom:3px solid #01C0DC; 
}

.navelement svg {
    
       height: 27px;
    width: 32px;
    fill: #ffffff;
    padding: 5px 10px 5px 10px
}