@font-face{ 
	font-family: 'WebSymbolsRegular';
	src: url('https://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot');
	src: url('https://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot?') format('embedded-opentype'),
	     url('https://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.woff') format('woff'),
	     url('https://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.ttf') format('truetype'),
	     url('https://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.svg') format('svg');
	}

#slideshow-wrap{
    display: block;
    height: 345px;
    min-width: 260px;
    max-width: 459px;
    margin: auto;
    border: 12px rgba(255,255,230,1) solid;
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    margin-top: 50px;
    position: relative;
}

#slideshow-inner{
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    overflow: hidden;
    position: relative;
}

#slideshow-inner>ul{
    list-style: none;
    height: 100%;
    width: 1100%;
    overflow: hidden;
    position: relative;
    left: 0px;
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

#slideshow-inner>ul>li{
    width: 9.09%;
    height: 345px;
    float: left;
    position: relative;
}

#slideshow-inner>ul>li>img{
    margin: auto;
    height: 100%;
}

#slideshow-wrap input[type=radio]{
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;
}

#slideshow-wrap label:not(.arrows):not(.show-description-label){
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color: rgba(200,200,200,1);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    transition: background-color .2s;
}

#slideshow-wrap label:not(.arrows):active{
    bottom: -46px;
}

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1]{
    background-color: rgba(100,100,100,1);
}

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2]{
    background-color: rgba(100,100,100,1);
}

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3]{
    background-color: rgba(100,100,100,1);
}

#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4]{
    background-color: rgba(100,100,100,1);
}

#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5]{
    background-color: rgba(100,100,100,1);
}

#slideshow-wrap input[type=radio]#button-6:checked~label[for=button-6]{
    background-color: rgba(100,100,100,1);
}

#slideshow-wrap input[type=radio]#button-7:checked~label[for=button-7]{
    background-color: rgba(100,100,100,1);
}

#slideshow-wrap input[type=radio]#button-8:checked~label[for=button-8]{
    background-color: rgba(100,100,100,1);
}

#slideshow-wrap input[type=radio]#button-9:checked~label[for=button-9]{
    background-color: rgba(100,100,100,1);
}

#slideshow-wrap input[type=radio]#button-10:checked~label[for=button-10]{
    background-color: rgba(100,100,100,1);
}

#slideshow-wrap input[type=radio]#button-11:checked~label[for=button-11]{
    background-color: rgba(100,100,100,1);
}

#slideshow-wrap label[for=button-1]{
    margin-left: -36px;
}

#slideshow-wrap label[for=button-2]{
    margin-left: -18px;
}

#slideshow-wrap label[for=button-3]{
    margin-left: 0px;
}

#slideshow-wrap label[for=button-4]{
    margin-left: 18px;
}

#slideshow-wrap label[for=button-5]{
    margin-left: 36px;
}

#slideshow-wrap label[for=button-6]{
    margin-left: 54px;
}

#slideshow-wrap label[for=button-7]{
    margin-left: 72px;
}

#slideshow-wrap label[for=button-8]{
    margin-left: 90px;
}

#slideshow-wrap label[for=button-9]{
    margin-left: 108px;
}

#slideshow-wrap label[for=button-10]{
    margin-left: 126px;
}

#slideshow-wrap label[for=button-11]{
    margin-left: 144px;
}

#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul{
    left: 0;
}

#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul{
    left: -100%;
}

#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul{
    left: -200%;
}

#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul{
    left: -300%;
}

#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul{
    left: -400%;
}

#slideshow-wrap input[type=radio]#button-6:checked~#slideshow-inner>ul{
    left: -500%;
}

#slideshow-wrap input[type=radio]#button-7:checked~#slideshow-inner>ul{
    left: -600%;
}

#slideshow-wrap input[type=radio]#button-8:checked~#slideshow-inner>ul{
    left: -700%;
}

#slideshow-wrap input[type=radio]#button-9:checked~#slideshow-inner>ul{
    left: -800%;
}

#slideshow-wrap input[type=radio]#button-10:checked~#slideshow-inner>ul{
    left: -900%;
}

#slideshow-wrap input[type=radio]#button-11:checked~#slideshow-inner>ul{
    left: -1000%;
}
label.arrows{
    font-family: 'WebSymbolsRegular';
    font-size: 30px; font-weight:bolder;
    color: rgb(0,0,0);
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: none;
    opacity: 0.7;
    cursor: pointer;
    z-index: 1000;
    background-color: transparent;
    transition: opacity .2s;
    text-shadow: 0px 0px 3px rgba(0,0,0,.8);
}

label.arrows:hover{
    opacity: 1;
}

label.arrows:active{
    margin-top: -23px;
}

input[type=radio]#button-1:checked~.arrows#arrow-2,
input[type=radio]#button-2:checked~.arrows#arrow-3,
input[type=radio]#button-3:checked~.arrows#arrow-4,
input[type=radio]#button-4:checked~.arrows#arrow-5,
input[type=radio]#button-5:checked~.arrows#arrow-6,
input[type=radio]#button-6:checked~.arrows#arrow-7,
input[type=radio]#button-7:checked~.arrows#arrow-8,
input[type=radio]#button-8:checked~.arrows#arrow-9,
input[type=radio]#button-9:checked~.arrows#arrow-10,
input[type=radio]#button-10:checked~.arrows#arrow-11{
    right: -55px;
    display: block;
}

input[type=radio]#button-2:checked~.arrows#arrow-1,
input[type=radio]#button-3:checked~.arrows#arrow-2,
input[type=radio]#button-4:checked~.arrows#arrow-3,
input[type=radio]#button-5:checked~.arrows#arrow-4,
input[type=radio]#button-6:checked~.arrows#arrow-5,
input[type=radio]#button-7:checked~.arrows#arrow-6,
input[type=radio]#button-8:checked~.arrows#arrow-7,
input[type=radio]#button-9:checked~.arrows#arrow-8,
input[type=radio]#button-10:checked~.arrows#arrow-9,
input[type=radio]#button-11:checked~.arrows#arrow-10{
    left: -55px;
    display: block;
    transform: scaleX(-1);
}

input[type=radio]#button-2:checked~.arrows#arrow-1{
    left: -18px;
}

input[type=radio]#button-3:checked~.arrows#arrow-2{
    left: -36px;
}

input[type=radio]#button-4:checked~.arrows#arrow-3{
    left: -54px;
}

input[type=radio]#button-5:checked~.arrows#arrow-4{
    left: -72px;
}

input[type=radio]#button-6:checked~.arrows#arrow-5{
    left: -90px;
}

input[type=radio]#button-7:checked~.arrows#arrow-6{
    left: -108px;
}

input[type=radio]#button-8:checked~.arrows#arrow-7{
    left: -126px;
}

input[type=radio]#button-9:checked~.arrows#arrow-8{
    left: -144px;
}

input[type=radio]#button-10:checked~.arrows#arrow-9{
    left: -162px;
}

input[type=radio]#button-11:checked~.arrows#arrow-10{
    left: -180px;
}
.description{
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    font-family: 'Yanone Kaffeesatz';
    z-index: 1000;
}

.description input{
    visibility: hidden;
}

.description label{
    font-family: 'WebSymbolsRegular';
    background-color: rgba(255,255,230,1);
    position: relative;
    left: -17px;
    top: 00px;
    width: 40px;
    height: 27px;
    display: inline-block;
    text-align: center;
    padding-top: 7px;
    border-bottom-right-radius: 15px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s;
    z-index: 5;
    color: rgb(20,20,20);
}



#slideshow-inner>ul>li:hover .description label{
    opacity: 1;
}

.description input[type=checkbox]:checked~label{
    opacity: 1;
}

.description .description-text{
    background-color: rgba(255,255,230,.5);
    padding-left: 45px;
    padding-top: 25px;
    padding-right: 15px;
    padding-bottom: 15px;
    position: relative;
    top: -35px;
    z-index: 4;
    opacity: 0;
    transition: opacity .2s;
    color: rgb(20,20,20);
}

.description input[type=checkbox]:checked~.description-text{
    opacity: 1;
}