/**
 * 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;
}

/*
  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;
}

/*
  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-item img {
	width: 100%;
}

.Wallop-buttonNext, .Wallop-buttonPrevious {
	border: none;
	

	border-radius: 20px;
	text-indent: -9999px;
	
	
	
	text-rendering: auto;
	color: initial;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	
	padding: 1px 6px;
	text-rendering: auto;
	color: initial;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	font: 13.3333px Arial;
	z-index: 50000;
}

.Wallop-buttonNext:focus, .Wallop-buttonPrevious:focus {
	outline: 0;
}

.Wallop-buttonNext:hover, .Wallop-buttonPrevious:hover {
	cursor: pointer;
	background: hsla(0, 0%, 100%, .85);
}

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

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





.Wallop--fade .Wallop-item--hidePrevious, .Wallop--fade .Wallop-item--hideNext
	{
	visibility: visible;
	-webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
		both;
	-moz-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
		both;
	-ms-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 .Wallop-item--hidePrevious, .Wallop--fade .Wallop-item--hideNext
	{
	z-index: 2;
}

.Wallop--fade .Wallop-item--showPrevious, .Wallop--fade .Wallop-item--showNext
	{
	z-index: 1;
}