.slider{
    width: 640px;
    height: 500px;
    position: relative;
    margin: 0 auto;
}
.slider input[type=radio]{
    display: none;
}

ul.imgs{
    padding: 0;
    margin: 0;
}
ul.imgs li{
    position: absolute;
    left: 640px;
    transition-delay: 1s;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 30px;
	/*height: 212px;*/
	height: 168px;
}
ul.imgs li img{
    border-radius: 30px;
    border: 5px solid rgba(0,0,0,0.3);
}

.bullets{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /*bottom: 20px;*/
	bottom: 50px;
    z-index: 6;
}
.bullets label{
    display: inline-block;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.55);
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.slider input[type=radio]:nth-child(1):checked~.bullets>label:nth-child(1){
    background-color: #1abc9c;
}
.slider input[type=radio]:nth-child(2):checked~.bullets>label:nth-child(2){
    background-color: #1abc9c;
}
.slider input[type=radio]:nth-child(3):checked~.bullets>label:nth-child(3){
    background-color: #1abc9c;
}
.slider input[type=radio]:nth-child(4):checked~.bullets>label:nth-child(4){
    background-color: #1abc9c;
}

/* 1 */
.slider input[type=radio]:nth-child(1):checked~ul.imgs>li:nth-child(1){
    left: 0px;
   	z-index:5;
    transition: 0.75s;
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}
.slider input[type=radio]:nth-child(1):checked~ul.imgs>li:nth-child(2){
    left: 90px;
  	z-index:4;
    transition: 0.75s;
    transform: scale(0.9);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}
.slider input[type=radio]:nth-child(1):checked~ul.imgs>li:nth-child(3){
    left: 170px;
  	z-index:3;
    transition: 0.75s;
    transform: scale(0.8);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}
.slider input[type=radio]:nth-child(1):checked~ul.imgs>li:nth-child(4){
    left: 230px;
   	z-index:2;
    transition: 0.75s;
    transform: scale(0.7);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}

/* 2 */
.slider input[type=radio]:nth-child(2):checked~ul.imgs>li:nth-child(1){
	left: -90px;
  	z-index:4;
    transition: 0.75s;
    transform: scale(0.9);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}
.slider input[type=radio]:nth-child(2):checked~ul.imgs>li:nth-child(2){
 	left: 0px;
  	z-index:5;
    transition: 0.75s;   
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}
.slider input[type=radio]:nth-child(2):checked~ul.imgs>li:nth-child(3){
	left: 90px;
  	z-index:4;
    transition: 0.75s;
    transform: scale(0.9);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);

}
.slider input[type=radio]:nth-child(2):checked~ul.imgs>li:nth-child(4){
	left: 170px;
   	z-index:3;
    transition: 0.75s;
    transform: scale(0.8);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
	left: 230px;
    z-index:2;
}

/* 3 */
.slider input[type=radio]:nth-child(3):checked~ul.imgs>li:nth-child(1){
	left: -170px;
  	z-index:3;
    transition: 0.75s;
    transform: scale(0.8);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}
.slider input[type=radio]:nth-child(3):checked~ul.imgs>li:nth-child(2){
    left: -90px;
  	z-index:4;
    transition: 0.75s;
    transform: scale(0.9);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}
.slider input[type=radio]:nth-child(3):checked~ul.imgs>li:nth-child(3){
	left: 0px;
  	z-index:5;
    transition: 0.75s;
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}
.slider input[type=radio]:nth-child(3):checked~ul.imgs>li:nth-child(4){
    left: 90px;
   	z-index:4;
    transition: 0.75s;
    transform: scale(0.9);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}


/* 4 */
.slider input[type=radio]:nth-child(4):checked~ul.imgs>li:nth-child(1){
    left: -230px;
  	z-index:2;
    transition: 0.75s;
    transform: scale(0.7);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}
.slider input[type=radio]:nth-child(4):checked~ul.imgs>li:nth-child(2){
    left: -170px;
  	z-index:4;
    transition: 0.75s;
    transform: scale(0.8);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}
.slider input[type=radio]:nth-child(4):checked~ul.imgs>li:nth-child(3){
    left: -90px;
  	z-index:4;
    transition: 0.75s;
    transform: scale(0.9);
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}
.slider input[type=radio]:nth-child(4):checked~ul.imgs>li:nth-child(4){
    left: 0px;
  	z-index:5;
    transition: 0.75s;
    box-shadow: 14px -5px 35px -21px rgba(0,0,0,0.66);
}

/*mobile version*/
@media screen and (max-width:650px){
	/* 1 */
	.slider input[type=radio]:nth-child(1):checked~ul.imgs>li:nth-child(1){
	    left:0% !important;
		width:100%;
		box-shadow: 14px -5px 35px -21px rgba(0,0,0,0);
	}
	.slider input[type=radio]:nth-child(1):checked~ul.imgs>li:nth-child(2){
	    left:6% !important;
		transform: scale(1.0) !important;
		margin-top: -10px !important;
		width: 100%;
		box-shadow: 14px -5px 35px -21px rgba(0,0,0,0);
	}
	.slider input[type=radio]:nth-child(1):checked~ul.imgs>li:nth-child(3){
	    left:12% !important;
		transform: scale(1.0) !important;
		margin-top:-20px !important;
		width: 100%;
		box-shadow: 14px -5px 35px -21px rgba(0,0,0,0);
	}
	.slider input[type=radio]:nth-child(1):checked~ul.imgs>li:nth-child(4){
	    left: 125px !important; 
	}
	
	/* 2 */
	.slider input[type=radio]:nth-child(2):checked~ul.imgs>li:nth-child(1){
		left:-6% !important;
		transform: scale(1.0) !important;
		margin-top: 10px !important;
		width: 100%;
		box-shadow: 14px -5px 35px -21px rgba(0,0,0,0);  
	}
	.slider input[type=radio]:nth-child(2):checked~ul.imgs>li:nth-child(2){
	    left:0% !important;
		width:100%;
		box-shadow: 14px -5px 35px -21px rgba(0,0,0,0);
	}
	
	.slider input[type=radio]:nth-child(2):checked~ul.imgs>li:nth-child(3){
		left:6% !important;
		transform: scale(1.0) !important;
		margin-top:-10px !important;
		width: 100%;
		box-shadow: 14px -5px 35px -21px rgba(0,0,0,0);
	}
	.slider input[type=radio]:nth-child(2):checked~ul.imgs>li:nth-child(4){
		left: 95px !important;  
	}
	
	/* 3 */
	.slider input[type=radio]:nth-child(3):checked~ul.imgs>li:nth-child(1){
	    left:-12% !important;
		transform: scale(1.0) !important;
		margin-top: 20px !important;
		width: 100%;
		box-shadow: 14px -5px 35px -21px rgba(0,0,0,0);
	}
	.slider input[type=radio]:nth-child(3):checked~ul.imgs>li:nth-child(2){
	    left:-6% !important;
		transform: scale(1.0) !important;
		margin-top: 10px !important;
		width:100%;
		box-shadow: 14px -5px 35px -21px rgba(0,0,0,0);
	}
	.slider input[type=radio]:nth-child(3):checked~ul.imgs>li:nth-child(3){
	    left:0% !important;
		width: 100%;
		box-shadow: 14px -5px 35px -21px rgba(0,0,0,0);
	}
	.slider input[type=radio]:nth-child(3):checked~ul.imgs>li:nth-child(4){
	   	left: 65px !important;
	}
	
	
	/* 4 */
	.slider input[type=radio]:nth-child(4):checked~ul.imgs>li:nth-child(1){
	    left: -55px !important;
	}
	.slider input[type=radio]:nth-child(4):checked~ul.imgs>li:nth-child(2){
	    left: -25px !important;
	}
	.slider input[type=radio]:nth-child(4):checked~ul.imgs>li:nth-child(3){
		left: 5px !important;
	}
	.slider input[type=radio]:nth-child(4):checked~ul.imgs>li:nth-child(4){
		left: 35px !important;
	}
}	