/* 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    margin: 0;
    border: #EEE;
    user-select: none;
} */

.thumbnail-slider{
    width: 50%;
    height: 32vw;
    margin: 60px auto;
    position: relative;
    perspective: 1400px;
    transform-style: preserve-3d;
}

.thumbnail-slider label,
.thumbnail-slider label img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: transform 400ms ease;
}

input[type = radio]{
    width: 18px;
    height: 18px;
    position: relative;
    top: 108%;
    left: 50%;
    transform: translateX(-83px);
    margin: 0 15px 0 0;
    cursor: pointer;
    opacity: 0.4;
}

input[type=radio]:checked{
    opacity: 1;
}


/* Active Slide */

#s1:checked ~ #slide1,
#s2:checked ~ #slide2,
#s3:checked ~ #slide3,
#s4:checked ~ #slide4,
#s5:checked ~ #slide5{
    box-shadow: 0 13px 26px rgba(0,0,0,0.3),
                0 12px 6px rgba(0,0,0,0.2);
    transform: translate3d(0%, 0, 0px);
}


#s1:checked ~ #slide2,
#s2:checked ~ #slide3,
#s3:checked ~ #slide4,
#s4:checked ~ #slide5,
#s5:checked ~ #slide1{
    box-shadow: 0 6px 10px rgba(0,0,0,0.3),
                0 2px 2px rgba(0,0,0,0.2);
    transform: translate3d(20%, 0, -100px);
}



#s1:checked ~ #slide3,
#s2:checked ~ #slide4,
#s3:checked ~ #slide5,
#s4:checked ~ #slide1,
#s5:checked ~ #slide2{
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
                
    transform: translate3d(40%, 0, -250px);
}


#s1:checked ~ #slide4,
#s2:checked ~ #slide5,
#s3:checked ~ #slide1,
#s4:checked ~ #slide2,
#s5:checked ~ #slide3{
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
                
    transform: translate3d(-40%, 0, -250px);
}


#s1:checked ~ #slide5,
#s2:checked ~ #slide1,
#s3:checked ~ #slide2,
#s4:checked ~ #slide3,
#s5:checked ~ #slide4{
    box-shadow: 0 6px 10px rgba(0,0,0,0.3),
                0 2px 2px rgba(0,0,0,0.2);
                
    transform: translate3d(-20%, 0, -100px);
}

@media(max-width:768px){
    .thumbnail-slider{
        width: 65%;
        height: 50vw;
    }
    .heading{
        font-size: 20px;
    }
}