/**
 * wallop.css
 *
 * @fileoverview Default styles for wallop – recommended
 *
 * @author Pedro Duarte
 * @author http://pedroduarte.me/wallop
 */

/*
  This is the top-level selector

  It should be relative positioned
  to allow the children to be positioned absolutely
  relative to this
 */
.Wallop {
  position: relative;
  text-align: center;
}

/*
  This element groups all the items, but not the buttons

  It's a recommendation but it's very likely
  you'll want to hide any overflow from the items
  Especially when doing animations such as scale
 */
.Wallop-list {
  position: relative;
  overflow: hidden;
  z-index:0;
}

/*
  This is the item element

  By default, they are all hidden and
  positioned absolute
  I recommend always having .Wallop-item--current
  in your markup by default (probably on the first element)
 */
.Wallop-item {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/*
  This is the current item element

  All we do here, is make it visible again reset
  the position to static. Could also be relative
 */
.Wallop-item--current {
  visibility: visible;
  position: relative;
}

.Wallop-buttonPrevious {
    left: 1pc;
}

.Wallop-buttonNext::before, .Wallop-buttonPrevious::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    text-indent: 0;
    font-size: 25px;
    line-height: 0;
    z-index:99999;
}

.Wallop-buttonPrevious::before {
    content: "\276E";
}

.Wallop-buttonNext::before {
    content: "\276F";
}

.Wallop-buttonNext::before, .Wallop-buttonPrevious::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    text-indent: 0;
    font-size: 25px;
    line-height: 0;
}

.Wallop-buttonNext {
    right: 1pc;
}

.Wallop-buttonNext, .Wallop-buttonPrevious {
    border: none;
    webkit-appearance: none;
    background: hsla(0,0%,100%,.6);
    width: 40px;
    height: 40px;
    border-radius: 20px;
    text-indent: -9999px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    box-shadow: 0px 0 5px 1px rgba(0,0,0,0.5);
}