.carousel {position: relative;}
.carousel-inner {position: relative; overflow: hidden; width: 100%; padding: 14px;}
.carousel-open:checked + .carousel-item {position: static; opacity: 100;}
.carousel-item {position: absolute; opacity: 0;
    /*
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
    */
}
.carousel-item img {display: block; height: auto; max-width: 100%;}
.carousel-control {background: rgba(0, 0, 0, 0.40); border-radius: 50%; color: #fff; cursor: pointer; display: none; font-size: 40px; font-weight: bold; height: 40px; line-height: 35px; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); cursor: pointer; -ms-transform: translate(0, -50%); transform: translate(0, -50%); text-align: center; width: 40px; z-index: 10; user-select: none;}
.carousel-control.prev {left: 2%;}
.carousel-control.next {right: 2%;}
.carousel-control:hover {background: rgba(0, 0, 0, 0.8); color: #aaaaaa;}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3,
#carousel-4:checked ~ .control-4, 
#carousel-5:checked ~ .control-5, 
#carousel-6:checked ~ .control-6, 
#carousel-7:checked ~ .control-7, 
#carousel-8:checked ~ .control-8, 
#carousel-9:checked ~ .control-9, 
#carousel-10:checked ~ .control-10, 
#carousel-11:checked ~ .control-11, 
#carousel-12:checked ~ .control-12 
{display: block;}