body section.slideshow {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    height:100vh;
    margin:0 auto;
    visibility:hidden;
    overflow:hidden;
    }

body section.slideshow ul.navigation {
    position:absolute;
    display:block;
    width:640px;
    height:640px;
    padding:0;
    margin:0;
    left:-25%;
    top:50%;
    margin-top:-320px;
    z-index:10;
    }

body section.slideshow ul.navigation li.navigation-item {
    position:absolute;
    display: inline-block;
    overflow:hidden;
    width:120px;
    height:120px;
    padding:10px;
    text-align:center;
    cursor:pointer;
    border-radius:50%;
    transition: border0.6s ease-in-out;
    border: 1px solid #ffffff;
}

body section.slideshow ul.navigation li.navigation-item .rotate-holder {
    position:fixed;
    display:block;
    width:0;
    height:0;
    left:-9999px;
    top:-9999px;
}

body section.slideshow ul.navigation li.navigation-item .background-holder {
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    top:0;
    right:0;
    bottom:0;
    left:0;
    border-radius:50%;
    background-repeat:no-repeat;
    background-position:center center;   
    background-size: cover;
    opacity:1;
    visibility:visible;
    transition: opacity0.6s ease-in-out, visibility0.6s ease-in-out;
}
body section.slideshow ul.navigation li.navigation-item:hover .background-holder {
    opacity:0.75;
}
body section.slideshow ul.navigation li.navigation-item.active .background-holder {
    opacity:0;
    visibility:hidden;
}
body section.slideshow .detail {
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:8;
}
body section.slideshow .detail .detail-item {
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    top:0;
    right:0;
    bottom:0;
    left:0;
    opacity:0;
    visibility:hidden;
    transition: opacity0.3s ease-in-out, visibility0.3s ease-in-out;
}
body section.slideshow .detail .detail-item .headline {
    position:absolute;
    display:block;
    width:100%;
    max-width: calc(100% -480px);
    height:126px;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    overflow:visible;
    white-space:nowrap;
    box-sizing: border-box;
    z-index:2;
}
body section.slideshow .detail .detail-item .headline .letter {
    position:relative;
    display: inline-block;
    opacity:0;
    visibility:hidden;
    color:#FFFFFF;
    font-size:5rem;
    left:20%;
    line-height:110px;
    font-weight:900;
    font-kerning:none;
    white-space:nowrap;
    box-sizing: border-box;
    text-transform:uppercase;
}
body section.slideshow .detail .detail-item .background {
    position:absolute;
    display:block;
    width:100%;
    width: calc(100% +100px);
    height:100%;
    height: calc(100% +100px);
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow:visible;
    background-repeat:no-repeat;
    background-position:center center;    
    background-size: cover;
    z-index:1;
}
body section.slideshow .detail .detail-item .background::before {
    content:"";
    background: linear-gradient(toright,black 0%, rgba(0,0,0,0)90%);  
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:2;
}
body section.slideshow .detail .detail-item.active {
    opacity:1;
    visibility:visible;
}

@media screen and (max-width:2000px){
    body section.slideshow ul.navigation {
        left:-260px;}
}

@media screen and (min-width:768px) and (max-width: 1199px) {
    body section.slideshow ul.navigation {
        left:-320px;}
}

@media screen and (max-width:767px){
    body section.slideshow .detail .detail-item .headline .letter {
        font-size:3rem;
        left:10%;}
    body section.slideshow ul.navigation {
        left:-360px;}
}