.topnav {
  background-color: #333;
  overflow: hidden;
  height: inherit;
  width: inherit;
  min-height: 30px;
}

.navList {
  height: inherit;
}

.navList a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  height: 100%;
  width: 140px;
  text-decoration: none;
  font-size: 17px;
  align-content: center;
}


.navList a:hover {
  background-color: #ddd;
  color: black;
}


.navList a.active {
  background-color: #38707D;
  color: white;
}




nav {
margin: 0;
border: 0;
height: 55px;
position: fixed; 
top: 0; 
width: 100vw;
max-width: 100%;
display: flex;
z-index: 100;
background-color: #333;
}
/* Phone nav */
@media (max-width: 800px) {
  nav {
    display: block;
    height: 55px;
    
    }


  .change .hamburger1 {
    /* transform: translate(17.0px, 4.3px) rotate(-45deg); */
    transform: translate(17.0px, 11.3px) rotate(-45deg);
     
    /*transform: rotate(45deg) translate(2vh,0); */
     position: relative;
     right: 1.3vh;
  }

  .change .hamburger2 {opacity: 0;}

  .change .hamburger3 {
    /*transform: rotate(-45deg) translate(calc(2vh),0);*/
    position: relative;
     right: 1.3vh;
    transform: translate(17.0px, -19.5px) rotate(45deg);
  }
  .hamburgers{
    
    position: fixed;
    right: 20px;
    /* top: calc(5vh * 0.14); */

    height: inherit;

    display: flex;
    flex-direction: column;
    
    

    
  }

  .change{

    justify-content:space-evenly;
    
  }
  .hamburger1, .hamburger2, .hamburger3 {
    width: 4vh;
    height: 5px;
    background-color: #38707D;
    margin: 0px 0;

    /* transition: 0.4s; */
    transition: 0.5s;
    z-index: 100;

  }

  .topnav {
    display: flex;
    flex-direction: column;
    
    background-color: transparent;
    overflow: visible;
    height: inherit;

  }



  .topnav a {
  background-color: #333;
  width: 100%;
  height: 50px;
  align-content: center;
  text-align: center;
  font-size: 25px;
  border-style: solid;
  border-color: #38707D;
  border-width: 1px;
  }

  .navList {
    display: none;
    flex-direction: column;
    margin-top: 55px;
    height: auto;
    

    /* diaplay none then flex */

  }

  .navList a {

    color: #f2f2f2;
    text-decoration: none;

  }

  .navList a:hover {

  }
  
  
  .navList a.active {

  }

  .hamburger1 {
    margin-top: 12px;
  }

  .hamburger2 {
    margin-top: 8px;
  }

  .hamburger3 {
    margin-top: 8px;
  }


}