.dropdown {
  float: right;  
  display:flex;
    display:inline-flex;
    /* flex-direction: column; */
  
}

 .dropbtn {
  
	height:29px;  /* This is for height of the button*/
	cursor:pointer;  /*makes hand icon appear when pointer hovers over something */
  border: none;
  outline: none;
	/*width:600px;*/
	box-sizing:border-box;
	
  font-size: large;    
  /*border: none; */
  /*outline: none;*/

	font-family:Arial, Gotham, "Helvetica Neue", Helvetica, "sans-serif";
	
	white-space: nowrap;
	
	line-height: normal;
	/*vertical-align: text-top;*/
	/*font-weight: bold !important;*/
	/*z-index:700;*/
	background-size:auto;
  padding: 2px 4px 2px 4px;
  /*background-color: inherit; test color was #124D0B but set to inhereit */
	

  /*margin is not needed here becasue the button is enclosed into the navigation-item div and styling*/
  /*margin: 0px 4px 0px 0px;*/
  color: orange; /*color of the app launcher button is set in flaticon5.css, this is for the drop down arrow*/
 
  
	background-color: black; /* was inherit this is the color behing the area of the app launcher button*/
	
	
}



.dropbtn:hover {
  background-color:#0072c6; /*bubble behind app button on hover also for text in the drop down on hover...original was background-color: #23BB0C; this is the hover color around the text*/
  /*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   This controls the color off the app drop down button on hover !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
  /*color:#ff00ff!important;*/
/*background-size: 50px 25px;  this doesnt seem to make a difference */
border-radius: 5px;
border-width: 1px;

border-style:hidden; /*if you turn on "solid" it makes the the drop down box expand and contract as you move the mouseover*/
}

.dropdown .dropdown-content {
  /*display: block;*/
  /*display: grid;  */
  display:flex;
    /*display:inline-flex;*/
    flex-direction: column;
    /*flex-wrap: wrap;*/
    
    /*align-items:flex-start;*/
    opacity: 0;
    visibility: hidden;
    /*transition: visibility 1s;*/
   
  /* display: none;   */
  /*visibility: hidden; don't use visibility it will stay hidden in both states */
padding-top:5px;
/*position needs to be be fixed here for mobile view to work*/
  position: fixed;  
 /* background-color:green;   color of the dropdown box frame  was #ffffff by default*/
 background-color: inherit;
border-radius:5px;
  min-width: 150px;
  max-width: 250px;
  /*max-height: 100%;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
  /*a declared z-index is needed here to ensure the odrop down stays visible when in hoover*/
  z-index:1000000;
  top:15px;
  transition: 0.75s ease-out;
  
}


.dropdown-content .mi {
    display:flex;
  position:relative;
	/* color:#024873; */
color:white;
  	padding: 4px 3px 4px 1px;
  	text-decoration: none;
 
  		    	
  	text-align: left;
  	margin:8px 8px 8px 8px;
	
}



.dropdown-content .mi:hover {
  opacity:1;
  background-color:#0072c6;/* COLOR of bubble around link text in the dropdown for the mouseover effect...original was background-color: #780B78; */
  color:#ffffff; /* COLOR Of icons when mouse pointer hovers over each option */
	
	text-shadow:2px 2px 18px rgba(255,255,255,0.4);
	/*
	-webkit-text-stoke-color:#ffffff;
	-webkit-text-stroke-width:1px;
	*/
}



.dropdown-content .mi::before {
 
content:'';
/* color:#024873; */
color:#FF00FF;
position:absolute;


opacity: 0;
z-index: -1;
transition: 1.4s ease-out;


}

.dropdown-content .mi:hover::before {
  opacity: 1;
}



/*makes hand icon appear when pointer hovers over something */
/* 
.dropbtn:before {
  cursor:pointer;  
  border: none;
  outline: none;
	
  


	
}




.dropbtn:focus {

  
  pointer-events: none;

}
 */


/* show drop down (dd) content */
.dropbtn:focus .dropdown-content {

  
 
  /* z-index: 1000100; */
  position:fixed;
  visibility:visible;
   opacity:1;

}

/* mask to close menu by clicking on the button */

/* mask to close menu by clicking on the button */
.dropdown .db2 .dropbtn {
  position: absolute;
    top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     opacity: 0;  
  cursor: pointer;
  z-index: 10;
  display: none;
}
.dropdown:focus .db2 .dropbtn {
  display: flexbox;
}
.dropdown .db2 .dropbtn:focus .dropdown-content {
  outline: none;
  visibility: hidden;
  opacity: 0;
}



/*==============================================================================*/


  
  @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: 50%;
    padding: 3px 3px 8px 3px;
    font-size: 18px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    transition: 0.95s ease-out;
    position:fixed;
    top:55px;
  }
}