Q:

Text always moving behind slider

I'm having an issue with some text that I want to put in a container below a slider always appearing behind the slider.  I've tried different options in CSS but I can't seem to get the text moving. 
Here is the example of the project: Example
Below you can find the html/css on jsfiddle
The text should appear in the div A3L_slogan.  I've tried using margins, but that doesn't make it responsive am I right? 
To say it in short.  The text should appear below the carousel in the center of the page. 
Hope anyone can point me in the right direction or help me out

body {
  width: 100%;
  margin: 0;
  font-family: 'open sans', sans-serif;
  zoom: 1;
}

header {
  padding: 20px 0;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
  padding: 0 20px;
  margin: 0 auto;
}
.logo-box {
  float: left;
  margin-right: 20px;
}
.logo-box a {
  outline: none;
  display: block;
}
.logo-box img {display: block;}
nav {
  overflow: hidden;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0px 10px 0px 0px;
  float: right;
}
nav li {
  display: inline-block;
  margin-left: 25px;
  height: 70px;
  line-height: 70px;
  transition: .5s linear;
}
nav a {
  text-decoration: none;
  display: block;
  position: relative;
  color: #868686;
  text-transform: uppercase;
}
nav a:after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 15px;
  background: #868686;
  transition: width .5s linear;
}
nav a:hover:after {width: 100%;}

@media screen and (max-width: 660px) {
  header {text-align: center;}
  .logo-box {
    float: none;
    display: inline-block;
    margin: 0 0 16px 0;
  }
  ul {float: none;}
  nav li:first-of-type {margin-left: 0;}
}
@media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
  display: block;
  margin: 0;
  height: 40px;
  line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}

#slide {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position:fixed;
  width:100%;
  height:600px;
}
.slide1 {
  background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg) no-repeat center center fixed;
}
.slide2 {
  background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png) no-repeat center center fixed;
}
.slide3 {
  background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg) no-repeat center center fixed;
}
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(function () {
    $('.fadein div:gt(0)').hide();
    setInterval(function () {
      $('.fadein :first-child').fadeOut().next('div').fadeIn().end().appendTo('.fadein');
    }, 3500);
  });
    </script>


  </head>
  <body>
    <header>
      <div class="container">
        <div class="logo-box">
          <a href="/">
            <img src="images/logo.png">
          </a>
        </div>
          <nav>
            <ul>
              <li><a href="">Forums</a></li>
              <li><a href="">Rules</a></li>
              <li><a href="">Monetization</a></li>
              <li><a href="">Sign-up</a></li>
              <li><a href="">Staff</a></li>
           </ul>
        </nav>
      </div>
    </header>
    <div class="fadein">
       <div id="slide"class="slide1"></div>
       <div id="slide"class="slide2"></div>
       <div id="slide"class="slide3"></div>
    </div>
    <div class="A3L_Slogan">
      <div class="slogan_title">
        Hardcore Roleplay Community
      </div>
    </div>
  </body>
</html>

A:

#slide {
position: fixed; 
}

to 
#slide{
position: relative;
}

and the flow of the markup styling will be fixed.  and you shouldn't use multiple ids slide with the same name in your markup it's very bad and will cause a hell of problems in the nearest future. 
update:
As discussed in the comments, a better solution is to remove the duplicated divs and using img tags plus applying changes on js and css to avoid flickering and overflow-x. https://codepen.io/anon/pen/eeymgo

