/* https://www.w3schools.com/howto/howto_js_dropdown.asp */

/**************************************************************/
/*  THe strategy for the menu drop down is to create ans display
    the menu button and the menu contents. The menu button is 
    displayed all the time in the top-right of the screen. The
    menu content is off the visible screen on the top-right. 
    When the user clicks on the menu button, the menu content
    is slide to the left making it visible, covering the menu
    button. 
/**************************************************************/

/* Note: 1rem = 16px */

/**************************************************************/
/* .dropdown is the DIV that contains the 3 horizontal lines  */
/**************************************************************/

.dropdown {  
    float: right;
    //position: relative;
    display: inline-block;
    font: 100% calibri, sans-serif;                       // 40px calibri, sans-serif;

    font-size: 100%;                                      // 40px;
    position: fixed; top: 0rem; right: 0rem;              // fixed; top: 0px; right: 0px; 
    z-index: 2;
}

.dropdown a:hover   

{
	background-color: #9f9f9f; // #ddd;
	color: black;
}

.dropdown a      

{
	transition: 0.3s;
}

/**************************************************************/
/* .dropbtn and .dropbtn2 is the DIV that contains the horizontal line     */
/**************************************************************/

.dropbtn {      

    background-color: #808080; // gray #4CAF50;
    color: white;
    padding: 0.7rem;                                      // 16px;
    font-size: 100%;                                      // 40px;
    border: none;
    cursor: pointer;
    z-index: 2;
}

.dropbtn2 {   
    cursor: pointer;
    z-index: 2;
	width: 2rem;                                       // 70px;
	height: 0.1rem;                                    // 6px;
	background-color: white;
	margin: 0.3rem 0;                                  // 11px 0;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #808080; // gray #3e8e41;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #808080; // gray #f1f1f1;
    min-width: 31rem;                                // 500px;
    box-shadow: 0rem 0.5rem 0rem 1rem;               // 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 0;
    z-index: 2;
    font: 2.8rem calibri, sans-serif;                // 45px calibri, sans-serif;
    font-size: 2.8rem;                               // 45px;
    max-height: calc(100vh - 6.9rem);                // 110px);
    overflow-y: auto;
    cursor: pointer;

}

.dropdown-content a {
    color: white; //black;
    font: 2.8rem calibri, sans-serif;                // 45px calibri, sans-serif;
    font-size: 2.8rem;                               // 45px;
    padding: 0.6rem 0.9rem;                          // 10px 14px;
    text-decoration: none;
    display: block;
    transition: 0.3s;
}

.show {display:block;}

.dropdown-menu-header {
	color: white;
	margin-left: 1rem; 
	padding-top: 2rem; 
	font-size: 140%;
}

.dropdown-menu-item {
	margin-left: 1.5rem;
}

/******************************************************/
/* USED  */
/******************************************************/

.dropdown-contentSlide {
    //height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 2; /* Stay on top */
    //top: 100; /* Stay at the top */
    top: 0; /* Stay at the top */
    //left: 0;
    right: 0;
     background-color: #808080; // gray #f1f1f1;
    //background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    //padding-top: 60px; /* Place content 60px from the top */
    padding-top: 0px; /* Place content 60px from the top */
    padding-bottom: 100px; /* Place content 60px from the top */
    transition: 0.15s; /* 0.5 second transition effect to slide in the sidenav */
    font: 45px calibri, sans-serif;
    font-size: 45px;
    max-height: calc(100vh - 110px); // this will enable scrolling
    //max-height: 930px;
    overflow-y: auto;
    //cursor: pointer;

}

.dropdown-contentSlide a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    //font-size: 25px;
    //color: #818181;
    display: block;
    transition: 0.3s;

    color: white; //black;
    font: 45px calibri, sans-serif;
    font-size: 45px;
}

.dropdown-contentSlide a:hover {
    //color: #f1f1f1;
	color: black;
}
.dropdown-contentSlide .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 50px;
    margin-left: 50px;
}

/**************************************************************/
/* .dropdown-contentSlide2 is the DIV tha contains menu items */
/**************************************************************/

.dropdown-contentSlide2 {
    width: 14em;                                      // 11em;
    position: fixed; /* Stay in place */
    z-index: 2; /* Stay on top */
    top: 0; /* Stay at the top */
    right: -14em;                                   //-11.0em;
    background-color: #808080; // gray #f1f1f1;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 0rem;                                 // 0px; /* Place content 60px from the top */
    padding-bottom: 0rem;                              // 100px; /* Place content 60px from the top */
    transition: 0.15s; /* 0.5 second transition effect to slide in the sidenav */
    font: 80% calibri, sans-serif;                    // 45px calibri, sans-serif;
    font-size: 80%;                                   // 45px;
    max-height: calc(100vh - 3rem);                    // calc(100vh - 110px); // this will enable scrolling
    overflow-y: auto;

}

.dropdown-contentSlide2 a {
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;             //  8px 8px 8px 32px;
    text-decoration: none;
    display: block;
    transition: 0.3s;

    color: white; //black;
    font: 130% calibri, sans-serif;                   // 45px calibri, sans-serif;
    font-size: 130%;                                  // 45px;
}

.dropdown-contentSlide2 a:hover {
	color: black;
}
.dropdown-contentSlide2 .closebtn {
    position: absolute;
    top: 0;
    right: 1.0rem;                                    // 25px;
    font-size: 140%;                                   // 50px;
    margin-left: 140%;                                // 50px;
}