.carousel {
	margin: 25px 0 25px 0;
	height: 380px;
	background-color: #fcfcfc;
  border-radius: 7px; 
	overflow: hidden
}

.carousel ul {
	position: relative;
	height: 100%;
	margin: 0;
}

.carousel ul input {
	display: none;
}

.carousel li {
	display: block;
}

.carousel .slide-image {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	opacity: 0;
	transition: all .7s ease-in-out;
}

.carousel .slide-image img {
	border: none;
	margin: 0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%); 
	width: 100%; 
	height: 100%
}

.carousel .carousel-controls {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	font-size: 100px;
	color: #fff;
}

.carousel .carousel-controls label {
	display: none;
	position: absolute;
	opacity: 0;
	transition: opacity .2s;
	cursor: pointer;
	height: 100%;
	z-index: 2;
}

.carousel .carousel-controls label span {
top: 50%;
  position: absolute;
  color: #999;
  left: 10px;
  height: 50px;
  transform: translateY(-50%);
}

.carousel .carousel-controls .next-slide span {
	right: 10px;
}

.carousel .slide-image:hover+.carousel-controls label {
	opacity: 0.5;
}

.carousel .carousel-controls label:hover {
	opacity: 1 !important;
}

.carousel .carousel-controls .prev-slide {
	width: 49%;
	text-align: left;
	left: 0;
}

.carousel .carousel-controls .next-slide {
	width: 49%;
	text-align: right;
	right: 0;
}

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

.carousel li input:checked~.carousel-controls label {
	display: block;
	opacity: .6;
}

.carousel li input:checked+.nav label {
	display: block;
}

.article .carousel ul li {
	margin-bottom: 0;
	position: initial;
	padding-left: 0;
	width: 100%;
	height: 100%;
}

.article .carousel ul li::before {
	display: none
}

@media screen and (max-width: 551px) {
	
	.article .carousel {
		
		max-height: 240px;
	}
}