/* main menu bar, including title and menu items/icon ------------ */
.menu-bar {
  display: flex;
  position: relative;  /* static;  */
  justify-content: space-between; /*  flex-start*/
  align-items: center;
  width: 100%;
  height: 80px;
  background-color:rgb(0, 66, 89);  /*  (0,66,89) medium blue-green */
}

#menu-bar-home-page {
  justify-content:flex-end;
}

/* menu items: drop-down  ---------------------------------------------- */

/* Hide the links inside the menu (except for logo/home) */
.menu-dropdown  { /* > #dropdown-links */
	/* display: none; */ /* hide drop-down menu until icon is clicked */
	
	/* overflow: hidden; */
  
  /* SUCCESS ...changed from relative to absolute ... makes drop-down menu overlap text */
  /* PROBLEM ... menu items are transparent */
  /* absolute: positions properly and overlaps ... but, transparent */
  /* relative: positions properly              ... but, displaces text */

  display: flex;
  flex-direction: column;
  
  /* SOLUTION ... STYLE THE INDIVIDUAL <LI> ELEMENTS TO SPECIFY A BACKGROUND COLOR AND WIDTH */
  
  /* position the drop-down menu on the right side of the menu bar, */
  /* below the hamburger icon area */
  position: absolute;
  top:100%;   /* aligns top of drop-down menu with bottom of parent (menu-bar) */
  right: 0px;

  z-index: 2;  /* needed to bring menu items forward | Use 2 to bring it in front of the call to action "BUY ART" label */
  
  /* to make drop-down menu a specific width, ... */ 
  /* ... delete this width ... */ 
  /* ... and set the width in the links (#dropdown-links a) */
  width: 100%;
}

.dropdown-links ul {
  /* width:100%; */
}

/* THIS IS REQUIRED TO ELIMINATE THE TRANSPARENCY PROBLEM */
.dropdown-links li {
  /* background-color IS REQUIRED TO ELIMINATE THE TRANSPARENCY PROBLEM */
  background-color: #999; 
  list-style: none;
  text-align: center; /* aligns items horizontally */
}

/* Style navigation menu links */
.dropdown-links a {
  color: #FFF;
  padding: 12px 20px;
  text-decoration: none;
  display: block;
  z-index: 1;
}

.dropdown-links a:hover {
  /* Add a grey background color on mouse-over */
  background-color: #666;
  color: #FFF;
  /* add  line inside bottom of gray bar */
  box-shadow: inset 0px -4px 0px 0px #FC0; 
  transition: 0.2s;
}

/* give keyboard navigation the same hover experience as using a mouse. */
.dropdown-links a:focus {
  /* Add a grey background color on mouse-over */
  background-color: #666;
  color: #FFF;
  /* add  line inside bottom of gray bar */
  box-shadow: inset 0px -4px 0px 0px #FC0; 
  transition: 0.2s;
}

/* Style the active link (or home/logo) */
.dropdown-links a:active {
  background-color: #BBB;
  color: white;
}


  
  
/* menu items: text along top menu bar --------------------------- */
.menu-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.menu-text > li {
  display: inline;
  list-style: none;
  margin-left: 12px;
  margin-right: 12px;
  color: #666; */ /* dark gray */ /* #EEE; */ /* light gray */
}

.menu-text > li:first-of-type {
  margin-left: 24px;
}
.menu-text > li:last-of-type {
  margin-right: 24px;
}

.menu-text > li a:hover {
  /* place line below menu text item           */
  /* white space below text is part of the text image */
  box-shadow:0px 4px 0px 0px #FC0;  
  transition: 0.2s;
}

/* give keyboard navigation the same hover experience as using a mouse. */
.menu-text > li a:focus {
  /* place line below menu text item           */
  /* white space below text is part of the text image */
  box-shadow:0px 4px 0px 0px #FC0;  
  transition: 0.2s;
}

/* give keyboard navigation the same hover experience as using a mouse. */
.menu-text > li a:active {
  /* place line below menu text item           */
  /* white space below text is part of the text image */
  box-shadow:0px 4px 0px 0px #FC0;  
  transition: 0.2s;
}

/*
box-shadow notes:

1    Horizontal offset of the shadow, 
     positive means the shadow will be on the right of the box, 
	 negative offset will put the shadow on the left of the box.
2    Vertical offset of the shadow, 
     negative one means the box-shadow will be above the box, 
	 positive one means the shadow will be below the box.
3    Blur radius (optional), 
     if set to 0 the shadow will be sharp, 
	 the higher the number, the more blurred it will be.
4    Spread radius (optional), 
     positive values increase the size of the shadow, 
	 negative values decrease the size. 
	 Default is 0 (the shadow is same size as blur).
5    Color

*/

/* end ----------------------------------------------------------- */


/* hamburger menu icon ... animated ------------------------------ */

/* menu-icon background area */
.menu-icon {
  display: flex;
  position:relative; /* TEST ... trying to get dropdown under the hamburger menu icon */
  justify-content: center;  /* aligns items horizontally */
  align-items: center;      /* aligns items vertically   */
  
  cursor: pointer;
  width: 80px;  
  height: 100%; 
  /* background-color: #666; */ /* dark gray */
  background-color:rgb(0, 66, 89); /*  (0,66,89) medium blue-green */
}

.menu-icon:hover {
  /* background-color: #999; */ /*  medium gray */
  background-color:rgb(51, 117, 140); /*  (0,66,89) lightened 20% medium blue-green */
  transition: 0.2s;
}

/* change background-color when clicked ... */      /* THIS DOESN'T WORK */
/* hold that way until clicked again */                
.change .menu-icon {
  background-color: #999;
}

/* container for hamburger menu icon */
/* attributes in parent center this both horizontally and vertically */
.bar-container {
  width: 35px;
  height: 25px;
}

/* hamburger icon is made up of four bars,                     */
/* with the center one made from two overlapping bars ...      */
/* ... bar mid-a and mid-b overlap to appear as a single bar   */
/* until the icon is clicked, then they both appear as an "X". */
.bar {
  width: 35px;
  height: 5px;
  background-color: #FFF; /* color of bars */
}

.bar-top {
  transition: 0.2s;
}

.bar-mid-a {
  margin-top: 5px;
  transition: 0.4s;
}

.bar-mid-b {
  margin-top: -5px;
  transition: 0.4s;
}

.bar-bottom {
  margin-top: 5px;
  transition: 0.2s;
}

.change .bar-top {
  opacity: 0.0;
  -webkit-transform: translate(0px, 10px);
  transform: translate(0px, 10px);
}

.change .bar-mid-a {
  -webkit-transform: rotate(45deg) translate(0px, 0px);
  transform: rotate(45deg) translate(0px, 0px);
}

.change .bar-mid-b {
  -webkit-transform: rotate(-45deg) translate(0px, 0px);
  transform: rotate(-45deg) translate(0px, 0px);
}

.change .bar-bottom {
  opacity: 0;
  -webkit-transform: translate(0px, -10px);
  transform: translate(0px, -10px);
}
/* end ----------------------------------------------------------- */




/* MEDIA QUERIES ------------------------------------------------- */

/* PORTRAIT Narrow (Mobile) Styles */
/* was @media only screen and (max-width: 800px) and (orientation: portrait) */
@media only screen and (min-width: 1px) {
  /* hide on browser refresh */
  .menu-dropdown {
	display: none;
  }

  /* hide text menu */
  .menu-text {
	display: none;
  }
  
} /* end Narrow (Mobile) Styles */




/* Medium width (Tablet) Styles */
/* min width determined by title + menu-icon */
/* was @media only screen and (min-width: 800px) and (max-width: 1200px) */
@media only screen and (min-width: 800px) {
  .menu-bar {
    justify-content: center;
	flex-direction:column;
	justify-content:space-around;
	height:140px;
  }
  
  #menu-bar-home-page {
    justify-content:space-around;
	height:80px;
  }
  
  /* hide menu icon (hamburger) */
  .menu-icon {
	display: none;
  }
  
  .menu-dropdown {
	display: none;
  }
  
  .menu-text {
	/* NOTE: THERE IS A PARTICULAR WIDTH (600px) */
    /* WHERE NEITHER MENU IS VISIBLE (menu-text, nor menu-icon) */
	display:flex; /* FIXES THE PROBLEM */
	
	position: relative;
	justify-content: center;  /* flex-start; */  /* aligns items horizontally */
	align-items: center;      /* aligns items vertically */
  }
  
} /* end Medium width (Tablet) Styles */




/* Wide (Desktop) Styles */
/* min width determined by title + menu-text */
@media only screen and (min-width: 1200px) {  
  .menu-bar {
    justify-content: center;
	flex-direction:row;
	justify-content:space-between;
	height:80px;
  }  
 
  /* hide menu icon (hamburger */
  .menu-icon {
	display: none;
  }

  .menu-dropdown {
	display: none;
  }
  
  .menu-text {
	display:flex;
	position: relative;
	justify-content: center;  /* flex-start; */  /* aligns items horizontally */
	align-items: center;      /* aligns items vertically   */
  }
  
} /* end Wide (Desktop) Styles */