Проблема с затемнением сайта при открытии модального окна

Доброго времени суток. У меня проблема в том, что при открытии модального окна, а именно при плавном затемнении заднего фона сайта. Блочный элемент картинки затемняется только тогда, когда плавность заканчивается. Объяснил как смог, только учусь верстке. Попробовал z-index, не помогает, помогает только если изменить позицию с relative на static, но тогда вся конструкция слетит. Вот код:
.secition-about {
height: 640px;
background: url(Project-1/01-Картинка-фона.jpg) center/cover no-repeat;
position: relative;
margin-bottom: 20px;
z-index: 5;
}

.secition-about__block {
width: 420px;
height: 190px;
background: linear-gradient(180deg, rgba(244, 213, 178, 0.8) 0%, rgba(234, 156, 65, 0.8) 100%);
position: absolute;
top: 54%;
left: 50%;
text-align: center;
padding-top: 15px;
}
Два объекта, которые не затемняются при плавном переходе.

 .popup-fade {
	display: none;
}

.popup-fade:before {
	content: '';
	background: #000;
	position: fixed; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	opacity: 0.7;
	z-index: 10000;
}

.popup {
	position: fixed;
	top: 20%;
	left: 50%;
	padding: 20px;
	width: 360px;
	margin-left: -200px;
	background: #fff;
	border: 1px solid orange;
	border-radius: 4px; 
	z-index: 99999;
	opacity: 1;
} 

А это само модальное окно. Заранее спасибо!