/* Стили для подложки */

.overlay {

    /* Скрываем подложку  */
    opacity: 0;
    visibility: hidden;
 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 20;
    transition: .3s all;
 }
 
 
 /* Стили для модальных окон */
 
 .modal {
 
    /* Скрываем окна  */
    opacity: 0;
    visibility: hidden;
 
 
    /*  Установаем ширину окна  */
    width: 100%;
    max-width: 500px;
 
    /*  Центрируем и задаем z-index */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30; /* Должен быть выше чем у подложки*/
 
    /*  Побочные стили   */
    box-shadow: 0 3px 10px -.5px rgba(0, 0, 0, .2);
    text-align: center;
    padding: 30px;
    border-radius: 3px;
    background-color: #fff;
    transition: 0.3s all;
 }
 
 /* Стили для кнопки закрытия */
 
 .modal__cross {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 20px;
    right: 20px;
    fill: #444;
    cursor: pointer;
 }

.modal.active, .overlay.active{
   opacity: 1;
   visibility: visible;
}