@import url(https://fonts.googleapis.com/css?family=Righteous);
body {overflow-x: hidden; background-color: #DBC04F;}

.slideshow{
clear: both;
position: relative;
display: block;
width: 90%;
height: auto;
max-width: 663px;
margin: 5% auto;
}

.slideshow:focus{
 outline: 0;
}

figure{
  position: absolute;
  top: 0;
  width: 100%;
}

figure:first-child{
  position: relative;
}

figure img{
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slideshow .bss-show{
  z-index: 2;
}

.slideshow .bss-show img{
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative; 
}

.slideshow .bss-show {
  z-index: 3;
  opacity: 1;
}

.next, .prev{
font-family: 'Righteous', cursive;
color: rgba(255,255,255, .90);
position: absolute;
top: 44%;
z-index: 4;
font-size: 2em;
padding: 5px;
opacity: .7;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: .05em;
}
.prev{
left: .05em;
}

/* ==================================================================
   media queries
   ============================================================= */

@media screen and (min-width: 320px) {
    .next, .prev {font-size: 2.5em;}
}

@media screen and (min-width: 450px) {
    .next, .prev {font-size: 3em;}
}

@media screen and (min-width: 540px) {
    .next, .prev {font-size: 4em; top: 47%;}
}