.containnavtoggle {
  display: inline-block;
  cursor: pointer;
}

.bar1nav, .bar2nav, .bar3nav {
  width: 35px;
  height:4px;
  background-color:orangered;
  margin: 4px 0;
  transition: 0.4s;
  box-shadow:0px 0px 2px 1px black;
  border-radius:10px;
}

.changenavbar .bar1nav {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.changenavbar .bar2nav {opacity: 0;}

.changenavbar .bar3nav {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}























#navbarTopWeb 
{
  position:fixed;
  z-index:9000000050;
  width:100%;
  top:-130px;
  transition: top 1s;
  box-shadow:0px 1px 10px 0px black;
}


.naveDivItem
{
  transition:0.5s;
  letter-spacing:1px;
  font-size:11px;
}

.naveDivItem:hover
{
  box-shadow: 0px 6px 14px 1px rgba(0, 0, 0, 0.9), 0 6px 14px 1px rgba(0, 0, 0, 0.19);
  border-radius:5px;
  transition:0.5s;
  font-weight: bold;
}






















.progress-containerxx
{
  width: 100%;
  height:5px;
  background:white;
  position:fixed;
  z-index:9000000100;
  top:-160px;
  transition: top 1s;
}

.progress-barxx 
{
  height:5px;
  width: 0%;
  background: linear-gradient(to top, #008aff,#00ffe7);
  animation: animateScrollDivtoNav 5s linear infinite;
  border-radius:20px;
}

@keyframes animateScrollDivtoNav
{
  0%,100%
  {
    filter:hue-rotate(0deg);
  }

    50%
    {
      filter:hue-rotate(360deg);
    }
}