.bar1, .bar2, .bar3 {
    width: 20px;
    height: 2px;
    background-color: #fff;
    margin: 4px 5px;
    transition: 0.4s;
}
  
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-8px, 4px);
transform: rotate(-45deg) translate(-4px, 5px);
}
  
.change .bar2 {opacity: 0;}
  
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-6px, -6px);
transform: rotate(45deg) translate(-4px, -5px);
}
  
#encapsNavIconDiv {
    background-color: #e69500;
    width: 0px;
    height: 0px;
    float: left;
    margin-left: 3%;
    margin-top: 30px;
    padding-top: 4px;
    text-align: center;
}

header {
    /*border: 1px solid red;*/
    height: 100px;
}

#logoImg {
    margin-left: 4%;
    margin-top: 20px;
    height: 50px;
    float: left;
    /*border: 1px solid red;*/
}

#middleHeaderDiv {
    float: left;
    margin-left: 23%;
    /* border: 1px solid blue; */
}

.nav-icon {
    width: 0px;
    margin-left: 5px;
    position: relative;
    top: 30%;
    transform: perspective(1px) translateY(-56%);
}

.nav-icon:after, 
.nav-icon:before, 
.nav-icon div {
  background-color: white;
  content: '';
  display: block;
  height: 2.5px;
  width: 20px;
  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);
}

#navbar,
#navbarSmall {
    list-style: none; 
    float: left;
}

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

#navbar>li>a{
    display: block;
    color: gray;
    font-size: 16px; 
    line-height: 1;
    white-space: nowrap;
	text-align: center; 
    text-decoration: none;
}

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

#navbarSmall>li { 
    margin-top: 15px;
}

#navbarSmall>li>a{
    color: black;
    font-size: 16px; 
    white-space: nowrap;
	text-align: center; 
    text-decoration: none;
}

#navBarSmallWidth {
    background-color: white;
    border-radius: 4px;
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
    height: 190px;
    margin-left: 20px;
    margin-top: 75px;
    position: absolute;
    width: 200px;
    visibility: hidden;
}

#rightHeaderDiv {
    /* border: 1px solid blue; */
    float: right;
    margin-top: 37px;
    margin-right: 7%;
}

.selectpicker {
    margin-top: 27px;
    margin-left: 40px;
}

#signUpLi {
    border: 1px solid orange;
    border-radius: 1.6rem;
    margin-top:-10px;
    padding: 10px 25px;
}

#signUpLi:hover {
    background-color: orange;
}

@media screen and (max-width:1100px) {
    .bar1, .bar2, .bar3 {
        width: 25px;
        margin: 6px 8px;
    }
      
    .change .bar1 {
        transform: rotate(-45deg) translate(-6px, 5px);
    }
            
    .change .bar3 {
        transform: rotate(45deg) translate(-6px, -5px);
    }

    #encapsNavIconDiv {
        margin-top: 25px;
        width: 40px;
        height: 40px;
    }

    #logoImg {
        /*border: 1px solid red;*/
        margin-left: 33%;
    }

    #middleHeaderDiv {
        margin-left: 0%;
        visibility: hidden;
        height: 0px;
        width: 0px;
    }

    .navBarLi {
        /* border: 1px solid blue; */
        visibility: hidden;
        height: 0px;
        width: 0px;

    }

    #rightHeaderDiv {
        margin-right: 20px;
    }
}

@media screen and (max-width:695px) {
    .bar1, .bar2, .bar3 {
        width: 20px;
        margin: 4px 5px;
    }

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

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

    #encapsNavIconDiv {
        margin-top: 30px;
        width: 30px;
        height: 30px;
    }

    #logoImg {
        margin-left: 4%;
    }

    .nav-icon {
        width: 25px;
    }

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

    .selectpicker {
        margin-top: 10px;
    }

    #signUpLi {
        margin-top:-7px;
        padding: 5px 15px;
    }
}