#popup {
 display: table;
 position: fixed; top: 0; left: 0;
 z-index: 100;
 height: 100%;
 width: 100%;
 visibility: hidden;
 animation: animaciya 1s 5s forwards; /* 5s - это количество секунд по истечении которых появляется сообщение */ 
 cursor: pointer;
}
@keyframes animaciya { 
 from {visibility: hidden;} 
 to {visibility: visible;} 
}
#popup figure {
 display: table-cell;
 vertical-align: middle;
}
#popup div, #popup figcaption, #popup figure:before {
 max-width: 100%; /* максимальная ширина */ 
 margin: 0 auto;
 border-style: solid; 
 border-color: rgb(61, 193, 185);
 background: #fff;
}
#popup figure:before { /* стиль кнопки "закрыть" */ 
 content: "Понятно";
 display: block;
 padding: 0 1%;
 border-width: 4px 4px 0 4px;
 border-radius: 5px 5px 0 0;
 text-align: right;
 color: rgb(61, 193, 185);
}
#popup div, #popup figcaption {
 padding: 1%;
 cursor: default;
}
#popup figcaption {
 position: relative;
 border-width: 0 4px 0 4px;
 font-size: 150%;
 text-transform: uppercase;
 color: rgb(100,100,100);
}
#popup div {
 border-width: 0 4px 4px 4px;
 border-radius: 0 0 5px 5px;
}