.onscroll-show{
	display: block;
	transition: 3s;
  background-color: var(--white);
}
.onscroll-hide{
	display: none;
	transition: 3s;
}



.fixed-top.scrolled {
  background-color: var(--white) !important;
  transition: background-color 200ms linear;
}



/* COLOR HUMBURGER BAR */

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(2, 25, 55)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar .navbar-toggler {
  color: rgba(0,0,0,0); 
  border-color: rgba(0,0,0,0);
  margin-top: 0px;
}

.navbar button:focus { outline: none; }



.__label{
  position: relative;
  right: 0;
  display:flex;
   flex-direction:column;
   width:40px;
   cursor:pointer;
 }
 
 .__label span{
   background: var(--white);
   border-radius:0px;
   height:4px;
   margin: 3px 0;
   transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
 
 }
 
 
 .__span:nth-of-type(1){
   width:100%;
   
 }
 
 .__span:nth-of-type(2){
   width:100%;
 }
 
 
 .__span:nth-of-type(3){
   width:100%;

  
 }
 
 
 input[type="checkbox"]{
   display:none;
 }
 
 
 input[type="checkbox"]:hover ~ span:nth-of-type(1){
   transform-origin:bottom;
   transform: translate(0px,0px);
   width: 100%;
 }
 
 
 input[type="checkbox"]:hover ~ span:nth-of-type(2){
   
   transform-origin:top;
   transform: translate(15px,0px);
   width: 70%;
   /* transform:rotatez(-45deg) */
 }
 
 
 input[type="checkbox"]:hover ~ span:nth-of-type(3){
   
   transform-origin:bottom;
   width:30%;
   /* transform: translate(30px,-11px) rotatez(45deg); */
 
 }

 .navbar {
  z-index: 999;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) !important;
 }
 
 .navbar2{
    position: absolute;
    bottom: 0;
 }

 .navbar-toggler:not(:disabled):not(.disabled){outline:none;}
 .__bottom-nav{
  width: 100%;
  

  top: 0;
 }

 
 .__bottom-nav nav{
  position: fixed;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%) !important;
  z-index: 98;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  background-color: rgb(0, 79, 45);
  padding:2px 10px;
 }


 .__bg-nav{ 
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) !important;
  z-index: 98;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  background-color: white;
  padding: 2px 10px;
  /* top: -10px; */
  height: 60px;
  width: 100px;
 }

 .navbar-brand{
  margin-top: -10px;
  background-color: var(--white);
  padding: 10px 20px 30px 20px;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 49% 100%, 49% 100%, 0 80%);
  position: relative;
  z-index: 100;
 }

 .navbar-brand {
  margin-right: 0px !important;
 }


 .navbar .__container-box{
  position: relative;
  width: 250px;
 }

 .navbar .__container-box .navbar-brand2{
  display: block;
  position: absolute;
  top: 0;
  margin-top: -10px;
  margin-left: -10px;
  background-color: var(--color1);
  padding: 10px 20px 40px 20px;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 49% 100%, 49% 100%, 0 80%);
  z-index: -0;
  width: 270px;
  height: 115px;
 }