/* dd container */
  .dropdown {
    /*display: inline-block;*/
    /*position: absolute;*/
    /*outline: none;*/
     /* #861cb9 is a purple color */
    /*background-color: #861cb9; */
     /* if you say backgound-color is inherit in the .dropdown-content it will also color .dropdown-content */
    background-color: orange; 
   
    /*margin: 10px;*/
  }
  
  /* button */
  .dropbtn {
    display: inline-block;
    padding: 12px 16px;
    color: white;
    cursor: pointer;
    /*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   No it does not THIS FORCES THE COLOR OF THE APP ICON ON HOVER !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
    /*background-color: #861cb9;*/
    transition: 0.85s ease-out;
  }
  
  .dropbtn:hover  {
    background-color: #691692;
  }
  
  /* dd content */
  .dropdown .dropdown-content {
    /*position: fixed;  fixed for apan*/
    position: absolute;
    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: 2.15s 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;*/
  /*}*/
  
  
   /*8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888*/
  
  
  
  
  @media screen and (max-width: 670px) {
    
    .dropdown {
 position:absolute;
 /*margin:0px;*/
}


.dropdown .dropdown-content {
     font-family:Arial, Gotham, "Helvetica Neue", Helvetica, "sans-serif";
	font-weight: bold;
	white-space: nowrap;
	
	line-height: normal;


    /* background-color: #f7f7f7; */
    min-width: 150%;
    padding: 3px 3px 8px 3px;
    font-size: 18px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    transition: 0.35s ease-out;
    position:absolute;
    top:25px;
  }


  }