.container-all{
	margin-left: 10px;
	position : relative;
	max-width: 1920px;
	width: 100%;
	border-radius: 6px;
	overflow: hidden;
}


.slide{
	display: flex;
	transform: translate3d(0, 0 , 0);
	transition: all 600ms;
	animation-name: autoplay;
	animation-duration: 50s;
	animation-direction: alternate;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;

}

.slide-1{
	display: flex;
	transform: translate3d(0, 0 , 0);
	transition: all 600ms;
	animation-name: autoplayer;
	animation-duration: 50s;
	animation-direction: alternate;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
}

.item-slide{
	position: relative;
	display:flex;
	flex-direction: column;
	flex-shrink:0;
	flex-grow: 0;
	max-width: 100%;
}

.pagination{
	position: absolute;
	bottom: 20px;
	left: 0;
	display: flex;
	/*flex-wrap: wrap;*/
	align-items: center;
	justify-content: center;
	width: 100%;
}

.pagination-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 2px solid black;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.5);
	margin: 0 10px;
	text-align: center;
}

.pagination-item:hover {
	transform: scale(2);
}

.pagination-item img{
	display: inline-block;
	max-width: none;
	height: 100%;
	transform: scale(1);
	opacity: 0;
	transition: all 300ms;
}

.pagination-item:hover img{
	opacity: 1;
	transform: scale(1);	
}

input[id="1"]:checked ~ .slide{
	animation:none;
	transform: translate3d(0,0,0);
}


input[id="1"]:checked ~ .pagination .pagination-item[for="1"]{
	background: #fff;
}

input[id="2"]:checked ~ .slide{
	animation:none;
	transform: translate3d(calc(-100%*1),0,0);
}


input[id="2"]:checked ~ .pagination .pagination-item[for="2"]{
	background: #fff;
}

input[id="3"]:checked ~ .slide{
	animation:none;
	transform: translate3d(calc(-100%*2),0,0);
}


input[id="3"]:checked ~ .pagination .pagination-item[for="3"]{
	background: #fff;
}

@keyframes autoplay{
	30%{
		transform: translate3d(calc(-100%*0),0,0);
	}
	60%{
		transform: translate3d(calc(-100%*1),0,0);
	}
	100%{
		transform: translate3d(calc(-100%*2),0,0);
	}
}


@keyframes autoplayer{
	20%{
		transform: translate3d(calc(-100%*0),0,0);
	}
	40%{
		transform: translate3d(calc(-100%*1),0,0);
	}
	60%{
		transform: translate3d(calc(-100%*2),0,0);
	}
	80%{
		transform: translate3d(calc(-100%*3),0,0);
	}
	100%{
		transform: translate3d(calc(-100%*4),0,0);
	}
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	.container-all{
		margin-left: 0px;
		margin-top: 15px;
		position : relative;
		width: 110%;
		border-radius: 6px;
		overflow: hidden;
	}

}

@media only screen 
and (min-device-width : 481px) 
and (max-device-width : 760px){
	.container-all{
		margin-left: 0px;
		margin-top: 15px;
		position : relative;
		width: 90%;
		border-radius: 6px;
		overflow: hidden;
	}

}

@media only screen 
and (min-device-width : 761px) 
and (max-device-width : 1023px){
	.container-all{
		margin-left: 70px;
		margin-top: 25px;
		position : center;
		width: 80%!important;
		border-radius: 6px;
		overflow: hidden;

	}

}

@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 1366px){
	.container-all{
		margin-left: 20px!important;
		margin-right: 20px;
		border-radius: 6px;
		overflow: hidden;
	}
}