.my-navbar { 
	position: -webkit-sticky!Important; 
	position: sticky!Important;
	top: 0!Important; 
	z-index:1!Important;
	display:block;!Important;
	float:right;
	box-sizing:border-box;
	width:100%!Important; 
	height:40px!Important; 
	background-color: #000000!Important;  
	color:white!Important;
	padding:0 16px!Important;  
	overflow :hidden!Important; 
	align-self: flex-start;
	
}

@media screen and (max-width:600px){  
	.my-navbar { display:none; } 
}



/*  ////////////////   nav    ////////////////  */
.navi { 
	display:block;
	width:100%; height:40px; 
	background-color:orange;  
	padding:0 16px;  
	overflow: hidden;  
	position: -webkit-sticky;  position: sticky; top: 0;   }

a.navlink:link, a.navlink:visited {  
	display: inline-block; 
	padding: 12px 20px;	
	text-decoration:none; 
	color:black; 
	transition: 0.1s;}

a.navlink:hover, a.navlink:active {  
	text-decoration:none; 
	color:white; 
	background-color:black; }




ul.navbar-nav li a:hover , ul.nav li:hover {
  background-color: gray;
}







/*      glossy nav bar     */




.navbar2021 {
  position: relative;
  padding: 0.5rem 1rem;
   }

  .navbar2021::after {
    content: "";
    display: table;
    clear: both; }
  @media (min-width: 544px) {
    .navbar2021 {
      border-radius: 0.25rem; } }



.navbar2021-menu-glossy {
  float: right;
  border-radius: 0.25rem;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.8), inset 0 -1px rgba(255, 255, 255, 0.5);/*wow*/
  padding: 5px; 
  display: block;white-space: nowrap;
 }

  .navbar2021-menu-glossy::after {
    content: "";
    display: table;
    clear: both; }

  .navbar2021-menu-glossy .nav-item {
    float: right; }

    .navbar2021-menu-glossy .nav-item + .nav-item {
      margin-right: .25rem; }

  .navbar2021-menu-glossy .nav-link {
    display: block;
    text-transform: uppercase;
    font-size: 0.9rem;
    /*font-weight: 800;*/
    padding: 0.6em 1em;
    border-radius: 0 0.25rem 0.25rem 0 ; }

    .navbar2021-menu-glossy .nav-link:focus, 
    .navbar2021-menu-glossy .nav-link:hover {
      border-color: #eceeef #eceeef #ddd; }

    .navbar2021-menu-glossy .nav-link + .nav-link {
      border-radius: 0; }

    .navbar2021-menu-glossy .nav-link:last-child {
      border-radius:  0.25rem 0 0 0.25rem ; }

    .navbar2021-menu-glossy .nav-link.disabled, 
    .navbar2021-menu-glossy .nav-link.disabled:focus, 
    .navbar2021-menu-glossy .nav-link.disabled:hover {
      color: #818a91;
      background-color: transparent;
      border-color: transparent; }

  .navbar2021-menu-glossy .nav-link.active, 
  .navbar2021-menu-glossy .nav-link.active:focus, 
  .navbar2021-menu-glossy .nav-link.active:hover,
  .navbar2021-menu-glossy .nav-item.open .nav-link,
  .navbar2021-menu-glossy .nav-item.open .nav-link:focus,
  .navbar2021-menu-glossy .nav-item.open .nav-link:hover {
    color: #55595c;
    background-color: #fff;
    border-color: #ddd #ddd transparent; }

.navbar2021-glossy {
  background-color: #373a3c;
  box-shadow: 0 1px 1em rgba(0, 0, 0, 0.7); }
  .navbar2021-glossy .navbar2021-menu .nav-link {

    color: #ccc;
    /*text-shadow: 0px -1px 0px #2d2d2d, 0 0px 0 rgba(0,0,0, 1);*/  
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.8);
    background: -webkit-linear-gradient(#666666 0%, #363636 100%);
    background: -o-linear-gradient(#666666 0%, #363636 100%);
    background: linear-gradient(#666666 0%, #363636 100%); }

    .navbar2021-glossy .navbar2021-menu .nav-link:focus, 
    .navbar2021-glossy .navbar2021-menu .nav-link:hover {
      color: #FFF; }

  .navbar2021-glossy .navbar2021-menu .open > .nav-link, 
  .navbar2021-glossy .navbar2021-menu .open > .nav-link:focus, 
  .navbar2021-glossy .navbar2021-menu .open > .nav-link:hover,
  .navbar2021-glossy .navbar2021-menu .active > .nav-link,
  .navbar2021-glossy .navbar2021-menu .active > .nav-link:focus,
  .navbar2021-glossy .navbar2021-menu .active > .nav-link:hover,
  .navbar2021-glossy .navbar2021-menu .nav-link.open,
  .navbar2021-glossy .navbar2021-menu .nav-link.open:focus,
  .navbar2021-glossy .navbar2021-menu .nav-link.open:hover,
  .navbar2021-glossy .navbar2021-menu .nav-link.active,
  .navbar2021-glossy .navbar2021-menu .nav-link.active:focus,
  .navbar2021-glossy .navbar2021-menu .nav-link.active:hover {
    color: white;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 1.35em 0 rgba(225, 255, 255, 0.15);
    background: -webkit-linear-gradient(#e06850 50%, #c5371b 100%);
    background: -o-linear-gradient(#e06850 50%, #c5371b 100%);
    background: linear-gradient(#e06850 50%, #c5371b 100%); 
     }
  .navbar2021-glossy .navbar2021-brand {
    color: white; }

    .navbar2021-glossy .navbar2021-brand:focus, .navbar2021-glossy .navbar2021-brand:hover {
      color: white; 
      }
  @media (min-width: 544px) {
    .navbar2021-glossy {
      border-radius: 0; } }