Текст сайта оказывается под слайдшоу. Как сделать чтобы текст был ПОСЛЕ слайдшоу?

Курсы Динамические стили элементов
1

Стили слайдшоу:
.wrapper {

margin: 0 auto;

overflow: hidden;

}

@keyframes fade {

0%{ opacity: 0; }

10%{ opacity: 1; }

20%{ opacity: 1; }

30%{ opacity: 1; }

40%{ opacity: 0; }

50%{ opacity: 0; }

60%{ opacity: 0; }

70%{ opacity: 0; }

80%{ opacity: 0; }

90%{ opacity: 0;}

100% { opacity: 0; }

}

.wrapper img {

position:absolute;

margin: 0 auto;

width: 100%;

height: 80%;

overflow: hidden;

opacity:0;

animation-name: fade;

animation-duration: 20s;

animation-iteration-count: infinite;

}

.wrapper img:nth-child(1) { animation-delay: 0s; }

.wrapper img:nth-child(2) { animation-delay: 5s; }

.wrapper img:nth-child(3) { animation-delay: 10s; }

.wrapper img:nth-child(4) { animation-delay: 15s; }

.info-wrap {

height: 100%;

text-align: center;

z-index: 10;

}

.info{

position: absolute;

top: 100%;

width: 100%;

transform: translateY(-50%);

padding-left: 0px;

margin-left: -150px;

z-index: 10;

}

h1 {

line-height: 1;

font-size: 90px;

margin: 45px 0;

color: aliceblue;

text-shadow: 1px 1px 2px black;

}

.wrapper p {

font-size: 35px;

text-shadow: 1px 1px 2px white;

letter-spacing: 1.5px;

}
html:

<div class="main-page">

    <?php include("_header.php") ?>

        <div class="wrapper">

            <div class="info-wrap">

                <div class="info">  

                    <h1>Салон краси Atmosphère</h1>

                    <p>Будь зіркою серед натовпу.</p>  

                </div>  

            </div>  

            <img src="images/slide/1.jpg">

            <img src="images/slide/2.jpg">

            <img src="images/slide/3.jpg">

            <img src="images/slide/4.jpg">     

        </div>