.bar2 {
  height: 10px;
  margin-bottom: 10px;
  background:black;
  overflow: hidden;
  position: absolute;
  width: 49.95%;
  right: 1%;
  border:thin;
  border-right:0px;  
  border-color:yellow;
  bottom: 220px

}


/* following rule is for hiding Stack Overflow's console */
.as-console-wrapper{ display: none !important;}


/* Directions Button */
.dirbtn {
  display: inline-block;
  background: -webkit-linear-gradient(top, lightgray, black);
  border: 0.4vmin solid #999;
  border-style:groove;
  border-radius: 0.6vmin;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 0.1vmin 0.1vmin black;
  font-weight:600;
  font-size: 1.75vmin;
  color:white;
  padding-left:0.5vmin;
  padding-right:0.5vmin;
  padding-top:0.1vmin;
  margin: 0px;
  width:auto;
  min-width:15vmin;
  height:2vh;
  max-height:2vmin;
  line-height:2vmin;
  position:absolute;
  bottom:30%;
  left:10%;
  opacity: .2;
  transition: opacity 30s;

  -webkit-animation: fadeout 15s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout 15s; /* Firefox < 16 */
        -ms-animation: fadeout 15s; /* Internet Explorer */
         -o-animation: fadeout 15s; /* Opera < 12.1 */
            animation: fadeout 15s;  
  
    -webkit-animation: fadein 15s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 15s; /* Firefox < 16 */
        -ms-animation: fadein 15s; /* Internet Explorer */
         -o-animation: fadein 15s; /* Opera < 12.1 */
            animation: fadein 15s;
  z-index:9;          
}

.dirbtn.active {
  border-color:black;
  background: #E9E9E9;
  color:black;
}
 
.dirbtn:hover {
 background: -webkit-linear-gradient(top, lightyellow, lightpink);
 color:black;
 text-shadow: 0.1vmin 0.1vmin silver;
 visibility:visible;
 opacity: 1;
 transition: opacity 2s;

}




/* Dropdown Button */
.dropbtn {
  content:"Directions";
  display: inline-block;
  background: -webkit-linear-gradient(top, lightgray, black);
  border: 0.3vmin solid #999;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 0.1vmin 0.1vmin black;
  font-weight: 700;
  font-size: 1.5vmin;
  color:white;
  padding-left:1.5vmin;
  padding-right:1.5vmin;
  padding-top:0.15vminx;
  margin: 0.1vmin;
  border-radius: 0.6vmin;
  width:auto;
  max-width:20vmin;
  height:3vmin;
  
  
}

.dropbtn.active {
  
  border-style:groove;
  background: -webkit-linear-gradient(top, lightyellow, lightpink);
  color:black
}
 
.dropbtn:hover {
  visibility:visible
}



/* The container <div> - needed to position the dropdown content */
.dropdownL {  
  position:relative;
  display: inline-block;
  width:auto;
  float:right;
  right: 1%;
  top:0%;
  text-align: center;
  z-index: 11;
  cursor:move;
  color:red;
  font-weight:500;
}




/* Dropdown Content (Hidden by Default) */

.dropdownL-content {
  position:absolute;
  display: none;  
  background: -webkit-linear-gradient(top, black, silver);  
  height:25vmin;
  width:98%; 
  left:1%;
  top:-27.5vmin;
  overflow-y: scroll;
  z-index:11;
  border-radius: 1.5vmin;
  border: .25vmin;
  border-color:red;

}
  
  

/* Links inside the dropdown */

.dropdownL-content a {
  color: white;  
  display:inline-block;
  border: 0.15vmin;
  border-style:groove;
  border-radius: 0.25vmin;
  border-color:transparent;  
  padding-left:0.15vmin; 
  padding-right: 0.15vmin;
  margin-right:0.25vmin;
  min-width: 10vmin;

  
}

/* Change color of dropdown links on hover */

.dropdownL-content a:hover {
  color:black;
  background: -webkit-linear-gradient(top, lightyellow, lightpink);
  text-shadow: 0.1vmin 0.1vmin silver;
  border-color:lime;
  


}

/* Show the dropdown menu on hover */

.dropdownL:hover .dropdownL-content {
  display:inline-block;
  position:relative;

}





/* Change the background color of the dropdown button when the dropdown content is shown  */

.dropdownL:hover .dropbtn {
  background: -webkit-linear-gradient(top, lightyellow, lightpink);
  text-shadow: 0.1vmin 0.1vmin silver;
  height:2.5vmin;
  color: black;
  border: 0.4vmin;
  border-radius: 0.6vmin;
  border-color:black;
  border-style:double;
}



/* The container <div> - needed to position the dropdown content */
.dropdownR {  
  position:relative;
  display: inline-block;
  width:auto;
  float:right;
  right: 1%;
  top:0%;
  text-align: center;
  vertical-align:bottom;
  z-index: 11;
  cursor:move;
  color:red;
  font-weight:500;
}


/* Dropdown Content (Hidden by Default) */

.dropdownR-content {
  position:absolute;
  display: none;  
  background: -webkit-linear-gradient(top, black, silver);  
  height:25vmin;
  width:98%; 
  left:1.75%;
  right:0.25%;
  top:-27.5vmin;
  overflow-y: scroll;
  z-index:11;
  border-radius: 1.5vmin;
  border: .25vmin;
  border-color:red;
}
  
  

/* Links inside the dropdown */

.dropdownR-content a {
  color: white;  
  border: 0.15vmin;
  border-style:groove;
  border-radius: 0.25vmin;
  border-color:transparent;  
  padding-left:0.15vmin; 
  padding-right: 0.15vmin;
  margin-right:0.25vmin;
  margin-top:0.25vmin;
  margin-bottom:0.25vmin;
  min-width: 14vmin;
  display:inline-block;
  
}

/* Change color of dropdown links on hover */

.dropdownR-content a:hover {
  color:black;
  background: -webkit-linear-gradient(top, lightyellow, lightpink);
  text-shadow: 0.1vmin 0.1vmin silver;
  border-color:lime;


}

/* Show the dropdown menu on hover */

.dropdownR:hover .dropdownR-content {
  display: block;
  position:relative;
  
}





/* Change the background color of the dropdown button when the dropdown content is shown  */

.dropdownR:hover .dropbtn {
  background: -webkit-linear-gradient(top, lightyellow, lightpink);
  text-shadow: 0.1vmin 0.1vmin silver;
  height:2.5vmin;
  
  color: black;
  border: 0.4vmin;
  border-radius: 0.6vmin;
  border-color:black;
  border-style:double;
}




/*// dropup ////*/





/* The container <div> - needed to position the dropdown content */
.dropupL {  
  position:relative;
  display: inline-block;
  width:auto;
  float:right;
  right: 1%;
  top:0%;
  text-align: center;
  padding-top:4px;
  padding-bottom:4px;
  padding-right:6px;
  padding-left: 6px;
  z-index: 1;
  border: 4px;
  border-radius: 6px;
  border-color:yellow;
  cursor:move;
  color:red
}




/* Dropdown Content (Hidden by Default) */

.dropupL-content {
  position:absolute;
  display: none;  
  background: -webkit-linear-gradient(top, black, silver);  
  width:auto;
  max-width: 150px;
  height:100px;
  overflow:scroll;
  border: 2px;
  border-radius: 4px;
  padding:2px;
  margin: 2px;
  left:10%
  
}
  
  

/* Links inside the dropdown */

.dropupL-content a {
  color: white;
  padding: 4px 4px;
  text-decoration: blink;
  display: block;
  border: 4px;
  border-radius: 4px;
  border-color:white

  
}

/* Change color of dropdown links on hover */

.dropupL-content a:hover {
  color:black;
  border-color: black;
  background: -webkit-linear-gradient(top, lightyellow, lightpink);
  text-shadow: 1px 1px silver;
  font-weight:500;
  border-color:yellow;
  border-style:groove;


}

/* Show the dropdown menu on hover */

.dropupL:hover .dropdownL-content {
  display: block;
  position:relative;

}





/* Change the background color of the dropdown button when the dropdown content is shown  */

.dropupL:hover .dropbtn {
  background: -webkit-linear-gradient(top, lightyellow, lightpink);
  text-shadow: 1px 1px silver;
  min-width: 150px;
  color: black;
  border: 6px;
  border-radius: 6px;
  border-color:black;
}



/* The container <div> - needed to position the dropdown content */
.dropup {  
  position: relative;
  display: inline-block;
  
}




/* Dropdown Content (Hidden by Default) */

.dropup-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  bottom: 50px;
  z-index: 1;  
}
  
  

/* Links inside the dropdown */

.dropup-content a {
  color: white;
  padding: 4px 4px;
  text-decoration: blink;
  display: block;
  border: 4px;
  border-radius: 4px;
  border-color:white

  
}

/* Change color of dropdown links on hover */

.dropup-content a:hover {
  color:black;
  border-color: black;
  background: -webkit-linear-gradient(top, lightyellow, lightpink);
  text-shadow: 1px 1px silver;
  font-weight:500;
  border-color:yellow;
  border-style:groove;


}

/* Show the dropdown menu on hover */

.dropup:hover .dropdownR-content {
  display: block;
  position:relative;

}





/* Change the background color of the dropdown button when the dropdown content is shown  */

.dropup:hover .dropbtn {
  background: -webkit-linear-gradient(top, lightyellow, lightpink);
  text-shadow: 1px 1px silver;
  min-width: 150px;
  color: black;
  border: 6px;
  border-radius: 6px;
  border-color:black;
}