/* dd container */
  .dropdown {
    /*display: inline-block;*/
    /*position: relative;*/
    /*outline: none;*/
    background-color: #861cb9;
    margin: 10px;
  }
  
  /* button */
  .dropbtn {
    display: inline-block;
    padding: 12px 16px;
    color: white;
    cursor: pointer;
    background-color: #861cb9;
    transition: 0.35s ease-out;
  }
  
  .dropbtn:hover  {
    background-color: #691692;
  }
  
  /* dd content */
  .dropdown .dropdown-content {
    position: fixed;
    top: 0%;
    visibility: hidden;
    opacity: 0;
    z-index: 100000;
    /* background-color: #f7f7f7; */
    min-width: 120%;
    padding: 10px;
    font-size: 16px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    transition: 0.35s ease-out;
  }
  
  
  
  /* style link menu item */
  .dropdown-content .mi {
    display: block;
    color: black;
    padding: 8px 0;
    text-decoration: none;
    position: relative;
  }
  .dropdown-content .mi::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
    linear-gradient(
    90deg,
    rgba(240, 242, 244, 0) 0%,
    rgba(223, 223, 223, 1) 30%,
    rgba(240, 242, 244, 0) 100%
    );
    opacity: 0;
    z-index: -1;
    transition: 0.4s ease-out;
  }
  .dropdown-content .mi:hover::before {
      opacity: 1;
  }
  
  
  
  /* show dd content */
  .dropdown:focus .dropdown-content {
    outline: none;
    visibility: visible;
    opacity: 1;
    transform: translateY(20px); 
  }
  
  
  /* mask to close menu by clicking on the button */
   .dropdown .db2 {
    position: absolute;
      top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       opacity: 0;  
    cursor: pointer;
    z-index: 10;
    display: none;
  }
  .dropdown:focus .db2 {
    display: inline-block;
  }
  .dropdown .db2:focus .dropdown-content {
    outline: none;
    visibility: hidden;
    opacity: 0;
  }
  
  
  
  /* icon hamburger */
  /*.dropbtn::after {*/
  /*  content: "";*/
  /*  display: inline-block;*/
  /*  width: 15px;*/
  /*  height: 3px;*/
  /*  margin-left: 10px;*/
  /*  border-top: 2px solid #fff;*/
  /*  border-bottom: 7px double #fff;*/
  /*}*/