/* https://codepen.io/yic666kr/pen/JLNzXb */


  
  



.menu   {
    z-index:1000000; 
    font-weight:bold; 
    font-size:0.8em; 
    width:200px; 
    background:#f1f1f1;  
    position:fixed;
    top:20px;
    left:17%; 
    text-align:center; 
    font-size:12px; }
.menu ul    {
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    list-style-image: none; }
.menu li    {
    display: block;   
    padding:15px 0 15px 0; 
    border-bottom:#dddddd 1px solid;    }
.menu li:hover  {
    display: block;    
    background:#ffffff; 
    padding:15px 0 15px 0; 
    border-bottom:#dddddd 1px solid;    }
.menu ul li a   { 
    text-decoration:none;  
    margin: 0px; 
    color:#666; }
.menu ul li a:hover {  
    color: #666; 
    text-decoration:none;}
.menu a {
    text-decoration:none; 
    color:#666;}
.menu a:hover   {
    text-decoration:none; 
    color:#666;}

.cross{
    background:none;
    position:fixed;
    top:10px;
    left:13%;
    padding:7px 15px 0px 15px;
    color:#999;
    border:0;
    font-size:3em;
    line-height:65px;
    font-weight:bold;
    cursor:pointer;
    outline:none;
    z-index:1000000;
}

#overlay    {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
  }
  .flex {
    width: 100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center; 
  }
  .overlay-inner{
    padding:10px 60px;
    background-color:#FFF;
    text-align:left;
    width:65%;
    height:80%;
    margin-left:30%;
    overflow: auto;
  }
  #open-btn, #close-btn{
    display:block;
    margin:20px auto;
    padding:10px 30px;
    background-color:#eee;
    border:solid #ccc 1px;
    cursor: pointer;
  }