/*  Rotate Animation on Click 
 *  Author: Asif Mughal
 */
.img-container {
    display: block;
    margin: 15px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

/* Making Container image responsive */
.img-container img {
    width: 100%;
    height: auto;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
}

/* Container for Rotation buttons */
.btn-board {
    width: 100%;
    position: absolute;
    bottom: 0;
    bottom: -75px;
    left: 120px;
    display: block;
    box-sizing: border-box;
    padding: 0;
    text-align: left;
    z-index: 11;
}

/* Looking of rotate button*/
.rt-btn {
    padding: 5px;
    background: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    border: 0;
    outline: 0;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin: 0 3px;
    user-select: none;
}

/* button hover looking */
.rt-btn:hover {
    background: #16a085;
}


/* Hiding radio inputs */
input[name="rotate"] {
    display: none;
    opacity: 0;
}


/* -20 degree rotate image when rt20 radio checked */
#rt-110:checked~div+img {
    transform: rotate(-110deg);
    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

/* -20 degree rotate image when rt20 radio checked */
#rt-70:checked~div+img {
    transform: rotate(-70deg);
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}



/* -20 degree rotate image when rt20 radio checked */
#rt-60:checked~div+img {
    transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}



/* -20 degree rotate image when rt20 radio checked */
#rt-30:checked~div+img {
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}


/* -20 degree rotate image when rt20 radio checked */
#rt-25:checked~div+img {
    transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}



/* -20 degree rotate image when rt20 radio checked */
#rt-20:checked~div+img {
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}



/* -15 degree rotate image when rt20 radio checked */
#rt-15:checked~div+img {
    transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}


/* 20 degree rotate image when rt20 radio checked */
#rt20:checked~div+img {
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}


/* 60 degree rotate image when rt60 radio checked */
#rt60:checked~div+img {
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

/* 90 degree rotate image when rt90 radio checked */
#rt90:checked~div+img {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

/* 90 degree rotate image when rt90 radio checked */
#rt110:checked~div+img {
    transform: rotate(110deg);
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -ms-transform: rotate(110deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}



/* 180 degree rotate image when rt90 radio checked */
#rt160:checked~div+img {
    transform: rotate(160deg);
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
    -ms-transform: rotate(160deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


/* 180 degree rotate image when rt90 radio checked */
#rt180:checked~div+img {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/* 180 degree rotate image when rt90 radio checked */
#rt195:checked~div+img {
    transform: rotate(195deg);
    -webkit-transform: rotate(195deg);
    -moz-transform: rotate(195deg);
    -ms-transform: rotate(195deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/* 180 degree rotate image when rt90 radio checked */
#rt200:checked~div+img {
    transform: rotate(200deg);
    -webkit-transform: rotate(200deg);
    -moz-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/* 270 degree rotate image when rt90 radio checked */
#rt270:checked~div+img {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
}