#popup_menu {
/* само всплывающее окно , ширину и высоту Вы можете задать на свое усмотрение , но нет смысла задавать их слишком большими, иначе окно займет весь экран, кроме того следует обратить внимание на свойство margin-left отступ слева , чтобы окно находилось по центру экрана это свойство следует указывать из расчета ширина окна деленная на два плюс два пиксела , например для ширины окна 300px, margin-left будет равняться 152px  */
display: none;
width: 450px;
height:700px;
z-index: 20;
position: fixed;
top: 5%;
left: 60%;
margin-left: -352px;
overflow-y:auto;
color: #000;
background-color: #fff;
border: 10px solid #4E981B;
border-radius: 15px 15px 15px 15px;
}

#popup_link {
  display: none; 
  float: right;
  margin-right: 5px;  
  font-weight: 700;
  color: black;
  text-decoration: none;
  padding: .8em 1em calc(.8em + 3px);
  padding-top:2px;
  padding-bottom:4px;
  border-radius: 2px;
  transition: 0.1s;   
  opacity: 0.5;
  position: fixed;
}

#back_popup {
/* задний фон по умолчанию не виден, его цвет черный, он занимает всё пространство по высоте и ширине, его позиция фиксирована , то есть при скроллинге он никуда не денется */
display: none;
height:100%;
width:100%;
z-index:10;
position: fixed;
top:0px;
left:0px;
background:#000;
opacity: 0.6;
}

div.button6 {
  float: right;
  margin-top: 20px;  
  margin-right: 13px;  
  font-size: 30px;
  color: white;
  text-decoration: none;
  padding: .8em 1em calc(.8em + 3px);
  padding-top:5px;
  padding-bottom:9px;
  border: 2px solid #848484;
  border-radius: 2px;
  background-color: #7da7d9;
  transition: 0.1s;
  cursor: hand;
  width:80%;
} 
div.button6:hover { background: #4793ec; }
div.button6:active {
  background: #4793ec;
  box-shadow: 0 3px #4793ec inset;
}

.button6 img{
   float: right;margin-top: 3px;margin-right: -22px;
}