Caroufredsel not visible in Firefox

Question

Can anyone tell me why caroufredsel (#imagec) is not visible in Firefox? It should overlap the #mainimg and remain at the bottom of the #wrapper div. It appears in all other browsers. If I put top: 0; in the CSS for #imagec it does appear and stay attached to the top of #wrapper but if I give top any other number #imagec is no longer visible.

    $(document).ready(function() {
      var firstimg = "images/1.bmp"
      $('#mainimg').attr("src", firstimg);
      carousel();
    });

    function carousel() {
      $('#imagec').carouFredSel({
        align: "center",
        auto: true,
        items: {
          visible: 5,
          height: '60%'
        },
        responsive: true,
        width: '100%',
        height: '60%',
        scroll: {
          items: 1,
          duration: 2000,
          timeoutDuration: 0,
          easing: 'linear',
          pauseOnHover: 'immediate'
        }
      });
    }

    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      display: -webkit-box;
      display: inline-flex;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      position: relative;
    }

    #wrapper {
      width: 65%;
      height: auto;
      position: relative;
      overflow: hidden;
      border: 10px double black;
    }

    #mainimg {
      position: relative;
    }

    #imagec {
      padding-top: 8px;
      position: absolute;
      bottom: 0;
      z-index: 1001;
    }

    #imagec div {
      float: left;
      display: block;
    }

    #imagec div img {
      border: none;
      -webkit-box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.5);
      box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.5);
      -webkit-transition: box-shadow 0.5s, -webkit-box-shadow 0.5s;
      transition: box-shadow 0.5s, -webkit-box-shadow 0.5s;
    }

    #imagec div img:hover {
      -webkit-box-shadow: 0px 5px 6px 0px rgba(200, 200, 200, 0.5);
      box-shadow: 0px 5px 6px 0px rgba(200, 200, 200, 0.5);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>

<div id="title">
  <strong>Photography & Design</strong>
</div>
<ul id="main">
  <li class="main" id="start">Portfolio
    <ul id="second">
      <li><a href="#">Portraits</a>
      </li>
      <li><a href="#">Fashion</a>
      </li>
      <li><a href="#">Events</a>
      </li>
      <li><a href="#">Weddings</a>
      </li>
      <li class="last"><a href="#">Designs</a>
      </li>
    </ul>
  </li>
  <li class="main">Blog</li>
  <li class="main">Contact</li>
  <li class="main" id="end">About</li>
</ul>
<div id="wrapper">
  <img src="" id="mainimg" width="100%" height="auto">
  <div id="imagec">
    <div>
      <img class='smallimg' src='images/1.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/2.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/3.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/4.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/5.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/6.bmp' width='75%'>
    </div>
    <div>
      <img class='smallimg' src='images/7.bmp' width='75%'>
    </div>
  </div>
</div>

Answer 1

The issue was in the CSS in case anyone has this problem in the future. Caroufredsel adds a wrapper and I had to override "top" and add some things to the #imagec div.

CSS

.caroufredsel_wrapper {
  top: auto !important;
}
#imagec {
  padding-top: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  margin: auto;
  padding: 0;
  z-index: 1001;
}