header {
    height: 50px;
    width: 100%;
    background-color: #ffa333;
}

#encapsNavIconDiv {
    width: 50px;
    height: 50px;
    float: left;
    margin-left: 11.3%;
    padding-top: 3px;
    background-color:#cc7000;
    text-align: center;
    cursor: pointer;
    padding-top: 12px;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 4px;
  background-color: #fff;
  margin: 4px 7.5px;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-8px, 4px);
  transform: rotate(-45deg) translate(-6px, 5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -6px);
  transform: rotate(45deg) translate(-6px, -5px);
}

/*
.nav-icon {
    width: 25px;
    margin-left: 12px;
    position: relative;
     top: 44%;
     transform: perspective(1px) translateY(-56%);
}

.nav-icon:after, 
.nav-icon:before, 
.nav-icon div {
  background-color: #ffffff;
  content: '';
  display: block;
  height: 4px;
  margin-top: 3px;
  transition: all .2s ease-in-out;
}

.nav-icon:hover:before {
  transform: translateY(7px) rotate(135deg);
}

.nav-icon:hover:after {
  transform: translateY(-7px) rotate(-135deg);
}

.nav-icon:hover div {
  transform: scale(0);
} */

#logoNameDiv > a > img {
  width: 130px;
  height: 50px;
  margin-left: 2%;
  float: left;
}

#navbar {
  margin-top: 17px;
  margin-left: 23%;
  list-style: none; 
  float: left;
}

#navbar>li { 
    float: right; 
    margin-right: 30px;
}

#navbar>li>a{
	display: block; 
	color:white; 
  font-weight: 600;
  line-height: 1;
    white-space: nowrap;
	text-align: center; 
  text-decoration: none;
  font-family: 'Ubuntu';
}

#navbar>li>a:hover {
    color: white;
}

#searchDiv {
  float: right;
  margin-right: 5%;
  margin-top: 15px;
  color: white;
}

@media screen and (max-width:500px) {
  #encapsNavIconDiv {
    margin-left: 30px;
  }
}

@media screen and (max-width:400px) {
  #encapsNavIconDiv {
    margin-left: 0px;
  }
}