.bss-slides{
position: relative; display: block; line-height: 0;/*removes the gap if you put a border on the slideshow div*/
} figcaption {
line-height: 1.5; /* restores line-height to the child element*/
} .bss-slides:focus{
outline: 0;
} .bss-slides figure{
position: absolute; top: 0; width: 100%;
} .bss-slides figure:first-child{
position: relative;
} .bss-slides figure img{
opacity: 0; -webkit-transition: opacity 1.2s; transition: opacity 1.2s; -webkit-backface-visibility: hidden; backface-visibility: hidden;
} .bss-slides .bss-show{
z-index: 2;
} .bss-slides .bss-show img{
opacity: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative;
}
.bss-slides figcaption{
position: absolute; font-family: sans-serif; font-size: .8em; bottom: .75em; right: .35em; padding: .25em; color: #fff; background: #000; background: rgba(0,0,0, .25); border-radius: 2px; opacity: 0; -webkit-transition: opacity 1.2s; transition: opacity 1.2s;
} .bss-slides .bss-show figcaption{
z-index: 3; opacity: 1;
} .bss-slides figcaption a{
color: #fff;
} .bss-next, .bss-prev{
color: #fff; position: absolute; background: #000; background: rgba(0,0,0, .6); top: 50%; z-index: 4; font-size: 2em; margin-top: -1.2em; opacity: .3; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
} .bss-next:hover, .bss-prev:hover{
cursor: pointer; opacity: 1;
} .bss-next{
right: -1px; padding: 10px 5px 15px 10px; border-top-left-radius: 3px; border-bottom-left-radius: 3px;
} .bss-prev{
left: 0; padding: 10px 10px 15px 5px; border-top-right-radius: 3px; border-bottom-right-radius: 3px;
} .bss-fullscreen{
display: block; width: 32px; height: 32px; background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png); -webkit-background-size: contain; background-size: contain; position: absolute; top: 5px; left: 5px; cursor: pointer; opacity: .3;
} .bss-fullscreen:hover{
opacity: .8;
}
- -webkit-full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain;
}
- -moz-full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain;
}
- -ms-fullscreen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain;
}
- full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain;
}
- -webkit-full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain;
}
- -moz-full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain;
}
- -ms-fullscreen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain;
}
- fullscreen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain;
}