Картинка поверх элементов

Добрый вечер!

При верстке столкнулся с такой проблемой, никак не могу вывести эту линию поверх всех элементов, так, чтобы это не перекрыло возможность взаимодействовать с блоком акций, то есть ховеры и т.д.

Как это реализовать? Заранее благодарен.

Верстка: http://smart-kids-shop.ru/dd/

Разметка:

<section class="akcii">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="akcia">
                    <img src="img/akcia.png" alt="">
                    <p class="title">АКЦИЯ!</p>
                    <div class="onhover">
                        <h3>СПОРТИВНАЯ МАМА</h3>
                        <hr>
                        <p>15 специальных тренировок для восстановления
                            после родов + 5 лимфодренажных массажа.
                            Программа рассчитана на 4 месяца с заморозкой</p>
                        <hr>
                        <h3>15.500 р.</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="akcia">
                    <img src="img/akcia.png" alt="">
                    <p class="title">АКЦИЯ!</p>
                    <div class="onhover">
                        <h3>СПОРТИВНАЯ МАМА</h3>
                        <hr>
                        <p>15 специальных тренировок для восстановления
                            после родов + 5 лимфодренажных массажа.
                            Программа рассчитана на 4 месяца с заморозкой</p>
                        <hr>
                        <h3>15.500 р.</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="akcia">
                    <img src="img/akcia.png" alt="">
                    <p class="title">АКЦИЯ!</p>
                    <div class="onhover">
                        <h3>СПОРТИВНАЯ МАМА</h3>
                        <hr>
                        <p>15 специальных тренировок для восстановления
                            после родов + 5 лимфодренажных массажа.
                            Программа рассчитана на 4 месяца с заморозкой</p>
                        <hr>
                        <h3>15.500 р.</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="akcia">
                    <img src="img/akcia.png" alt="">
                    <p class="title">АКЦИЯ!</p>
                    <div class="onhover">
                        <h3>СПОРТИВНАЯ МАМА</h3>
                        <hr>
                        <p>15 специальных тренировок для восстановления
                            после родов + 5 лимфодренажных массажа.
                            Программа рассчитана на 4 месяца с заморозкой</p>
                        <hr>
                        <h3>15.500 р.</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="line"></div>
<section class="cta">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h1>ЗАНИМАЙСЯ БЕСПЛАТНО!</h1>
                <hr>
                <p>Заполните заявку и наш менеджер свяжется с вами в течение 10 минут.</p>
            </div>
            <div class="col-md-6">
            </div>
        </div>
    </div>
</section>

CSS:

section.akcii {
  background: #202020;
  div.akcia {
    z-index: 194;
    cursor: pointer;
    max-width: 80%;
    display: block;
    margin: 0 auto;
    margin-top: 80px;
    margin-bottom: 80px;
    transition: 0.5s;
    background: -moz-linear-gradient(top, #ffe701 0%, #fcbf12 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffe701 0%,#fcbf12 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffe701 0%,#fcbf12 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe701', endColorstr='#fcbf12',GradientType=0 ); /* IE6-9 */
    &:hover {
      z-index: 194;
      opacity: 1;
      img {
        opacity: 0.15;
        transition: 0.5s;
      }
      p.title {
        opacity: 0;
        transition: 0.5s;
      }
      div.onhover {
        opacity: 1;
        transition: 0.5s;
      }
    }
    div.onhover {
      opacity: 0;
      position: absolute;
      text-align: center;
      max-width: 60%;
      top: 80px;
      left: 20%;
      color: #fff;
      transition: 1s;
      h3 {
        font-family: "GothaBol", sans-serif;
        font-size: 24px;
        letter-spacing: 3px;
      }
      hr {
        max-width: 40%;
      }
      p {
        font-size: 14.23px;
        font-family: "GothamR", sans-serif;
      }
    }
    img {
      width: 100%;
      display: inline;
      transition: 0.5s;
    }
    p.title {
      top: 250px;
      display: inline-block;
      position: absolute;
      color: #fff;
      font-size: 32.86px;
      font-family: "GothaBol", sans-serif;
      z-index: 1;
      left: 37%;
      top: 280px;
      letter-spacing: 3px;
      transition: 1s;
    }
  }
}
div.line {
  background: url("../img/line.png");
  position: absolute;
  background-repeat: no-repeat;
  top: 991px;
  width: 100%;
  height: 2581px;
  z-index: -1;
}

Необходим такой результат: