/**
 * 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
 */
.slider{
  position: relative;
}

/*
  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
 */
.slider-list {
  position: relative;
  overflow: hidden;
  height:100%;
}

/*
  This is the item element

  By default, they are all hidden and
  positioned absolute
  I recommend always having .current
  in your markup by default (probably on the first element)
 */
.slider-item {
  visibility: hidden;
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
}
.slider-item picture img{
    height: 100%;
    object-fit: cover;
    object-position: center;
    font-family: 'object-fit: cover; object-position: center;';
}

/*
  This is the current item element

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

.Wallop--fade .hidePrevious,
.Wallop--fade .hideNext {
 visibility: visible;
 display:inherit;
 -webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
 animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

/*
 In order to fade out properly we need to make sure
 that the item that is going to be the previous one
 has a higer z-index that the next one
*/
.Wallop--fade .hidePrevious,
.Wallop--fade .hideNext { z-index: 2; }
.Wallop--fade .showPrevious,
.Wallop--fade .showNext { z-index: 1; }

/*==========  FADE ANIMATIONS  ==========*/
@-webkit-keyframes fadeOut {
 100% {
   opacity: 0;
   visibility: hidden;
 }
}
@keyframes fadeOut {
 100% {
   opacity: 0;
   visibility: hidden;
 }
}

/**
 * wallop--fold.css
 *
 * @fileoverview Fold animation for wallop
 *
 * @author Pedro Duarte
 * @author http://pedroduarte.me/wallop
 */
 .Wallop--fold .slider-list {
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
  }
  
  .Wallop--fold .showPrevious,
  .Wallop--fold .showNext {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  .Wallop--fold .showPrevious {
    -webkit-transform-origin: center left;
    transform-origin: center left;
    -webkit-animation: foldFromLeft 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
    animation: foldFromLeft 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
    z-index: 2;
  }
  
  .Wallop--fold .showNext {
    -webkit-transform-origin: center right;
    transform-origin: center right;
    -webkit-animation: foldFromRight 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
    animation: foldFromRight 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
    z-index: 1;
  }
  
  .Wallop--fold .hidePrevious,
  .Wallop--fold .hideNext {
    visibility: visible;
    display:inherit;
  }
  
  @-webkit-keyframes foldFromLeft {
    0% {
      -webkit-transform: rotateY(-90deg);
      transform: rotateY(-90deg);
    }
  }
  
  @keyframes foldFromLeft {
    0% {
      -webkit-transform: rotateY(-90deg);
      transform: rotateY(-90deg);
    }
  }
  
  @-webkit-keyframes foldFromRight {
    0% {
      -webkit-transform: rotateY(90deg);
      transform: rotateY(90deg);
    }
  }
  
  @keyframes foldFromRight {
    0% {
      -webkit-transform: rotateY(90deg);
      transform: rotateY(90deg);
    }
  }
  /**
 * wallop--slide.css
 *
 * @fileoverview Slide animation for wallop
 *
 * @author Pedro Duarte
 * @author http://pedroduarte.me/wallop
 */

/* the 10ms animation-delay fixed some weird rendering issues with iPhone */
.Wallop--slide .showPrevious {
    -webkit-animation: slideFromLeft 350ms 10ms linear both;
    animation: slideFromLeft 350ms 10ms linear both;
  }
  
  .Wallop--slide .showNext {
    -webkit-animation: slideFromRight 350ms 10ms linear both;
    animation: slideFromRight 350ms 10ms linear both;
  }
  
  .Wallop--slide .hidePrevious,
  .Wallop--slide .hideNext {
    visibility: visible;
    display:inherit;
  }
  
  .Wallop--slide .hidePrevious {
    -webkit-animation: slideToLeft 350ms 10ms linear both;
    animation: slideToLeft 350ms 10ms linear both;
  }
  
  .Wallop--slide .hideNext {
    -webkit-animation: slideToRight 350ms 10ms linear both;
    animation: slideToRight 350ms 10ms linear both;
  }
  
  @-webkit-keyframes slideFromLeft {
    0% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  }
  
  @keyframes slideFromLeft {
    0% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  }
  
  @-webkit-keyframes slideFromRight {
    0% {
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  }
  
  @keyframes slideFromRight {
    0% {
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  }
  
  @-webkit-keyframes slideToLeft {
    99% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  }
  
  @keyframes slideToLeft {
    99% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  }
  
  @-webkit-keyframes slideToRight {
    99% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  }
  
  @keyframes slideToRight {
    99% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  }