/* slides */
#slideshow
{

	margin: 0px auto;
  
	width: 100%;
	max-height:788px;
	position:relative;
}

.slide
{
  position:absolute;
  width: auto;
  height: 100%;  
  opacity: 0;
}

.slide:first-child
{
	opacity: 1;
}

/* fade-out & fade-in */
@-webkit-keyframes fadeOut 
{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-moz-keyframes fadeOut 
{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fadeOut 
{
	0% {opacity: 1;}
	100% {opacity: 0;}
}


@-webkit-keyframes fadeIn 
{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes fadeIn 
{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn 
{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.fade-out
{
	-webkit-animation-name: fadeOut;
  -webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-name: fadeOut;
	animation-duration: 2s;
  animation-fill-mode: forwards;
}

.fade-in
{
	-webkit-animation-name: fadeIn;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-name: fadeIn;
	animation-duration: 1s;
  animation-fill-mode: forwards;
}


/* selector buttons */
#btns-wrapper
{
	width: 15px;
  min-width: 15px;
  text-align: center;
  position:relative;
  left:92%;
  top:-500px;
}

.selector-btn
{
	display: inline-block;
	vertical-align: middle;
  
  width: 15px;
	height: 15px;
	border-radius: 50%;
  padding: 0;
  
	border: 1px solid #fff;
	background-color: #fff;
  
  cursor: pointer;
  
  transition: background;
  transition-duration: 0.3s;
  transition-timing-function: linear;
}

.selector-btn:focus
{
  outline: none;
}

.selected-btn
{
	background-color:#FF0;
}

/* progress bar */
.prog-bar /* always static */
{
	display: inline-block;
  vertical-align: middle;
	width: 2px;
	height: 20px;
	background-color: #fff;
}

.prog-bar span /* animated with js */
{
  display: block;
  height: 100%;
  background-color: #fff;
}