/* Стили для подложки */
.overlay {
   
   /* Скрываем подложку  */
   opacity: 0;
   visibility: hidden;
   
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background-color: rgba(0, 0, 0, .5);
   z-index: 20;
   transition: .3s all;
}


/* Стили для модальных окон */

.modal {
   background: url('../images/background.jpg');
   /* Скрываем окна  */
   opacity: 0;
   visibility: hidden;
   
   
   /*  Установаем ширину окна  */
   width: 90%;
   max-width: 820px;
  
   /*  Центрируем и задаем z-index */
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 30; /* Должен быть выше чем у подложки*/
   
   /*  Побочные стили   */
   box-shadow: 0 3px 10px 5.5px rgba(0, 0, 0, .5); 
   text-align: center;
   padding: 30px;
   border-radius: 3px;
   transition: 0.3s all;
}


/* Стили для активных классов подложки и окна */

.modal.active,
.overlay.active{
   opacity: 1;
   visibility: visible;
}


/* Стили для кнопки закрытия */

.modal__cross {
   position: absolute;
   top: -55px;
   right: -55px;
   fill: #444;
   cursor: pointer;
   background-size: cover;
}
/*.close {
    width: 45px;
    height: 45px;
    border: 3px solid black;
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
}
.close:after, .close:before {
    content: '';
    width: 4px;
    height: 95%;
    background-color: black;
    position: absolute;
    border-radius: 3px;
    top: 1px;
    left: 1.5px;
}
.close:after {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg); 
   -moz-transform: rotate(45deg); 
   -ms-transform: rotate(45deg); 
   -o-transform: rotate(45deg);
}
.close:before {
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg); 
   -ms-transform: rotate(-45deg); 
   -o-transform: rotate(-45deg);
}

*/