.slides input {display:none; }

.slides {width:400px; height:275px; padding:0; margin:0 auto; /* <--Make Margin:0 0px; to move to top left */ display: block; position:relative;}

.scontainer {display:block; }

.slide {width: 400px; height:275px; display:block; position:absolute; top:0; opacity:0; transform: scale(0); transition: all .5s ease-in-out;}

.slide img {width:100%; height:100%;}

.button label {width:50px; /* <--Adjust size of Arrow Panels */ height:100%; display:none; position:absolute; top:0; opacity:0; transition:opacity .3s; z-index:8; cursor:pointer; text-align:center; line-height:250px; /* <-- To adjust arrows up, make value smaller */ font-size:100pt; /* <--Adjust Arrow Size */ font-family:arial, sans-serif; color:#666;  /* <--Change color of Arrows */}

.slide:hover + .button label { opacity:0.5;}

.button label:hover {opacity:1;}

.button .next {right:0;}

input:checked + .scontainer  .slide {opacity:1; transform:scale(1); transition:opacity .8s ease-in-out;}

input:checked + .scontainer .button label {display:block;}

.butdots {width:100%; height:12px; display:block; position:absolute; bottom:5px; text-align:center;}

.butdot {top:-5px; width:12px; height:12px; margin:0 8px; position:relative; border-radius:50%; display:inline-block; background-color:#789;}

.butdot:hover {cursor:pointer; background-color:#ff0;}

input#pic1:checked ~ .butdots label#picdot1,
input#pic2:checked ~ .butdots label#picdot2,
input#pic3:checked ~ .butdots label#picdot3,
input#pic4:checked ~ .butdots label#picdot4,
input#pic5:checked ~ .butdots label#picdot5,
input#pic6:checked ~ .butdots label#picdot6 
{background:rgba(0, 0, 0, 1);}