<commit_before>* {
	margin: 0 auto;
	padding: 0;
}

body {
	background: #ecf0f5;
}

ul, li {
	list-style: none;
}

.slide {
	height: 100vh;
}

.slide li {
	width: 100%;
	z-index: 1;
	top: 50%;
	overflow: hidden;
	margin-top: -250px;
	position: absolute;
	transition: .3s z-index linear;
	z-index: 1;
	perspective: 300px;
}

.slide-item {
	padding: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: all ease-out .2s;
	transform: translateX(300%);
	visibility: hidden;
}

.slide-circle {
	background: #fff;
	width: 28rem;
	height: 28rem;
	border-radius:100%;
	box-shadow: 0 0 1px #fff;
	position: relative;
	z-index: 2;
}

.slide img {
	margin: 1.4rem 0;
	max-width: 100%;
}

.slide p {
	color: #666;
	font-family: "PT Sans", arial;
	width: 100%;
	text-align: center;
	margin-top: 2rem;
	opacity: 0;
	transform: translateX(3rem);
	transition: all linear .3s;
	font-size: 20px;
	text-transform: uppercase;;
}

.slide-price {
	color: #000;
}

.prev, .next {
	display: block;
	-webkit-transform:scale(0.7);
	position: absolute;
	top: 50%;
	cursor: pointer;
	z-index: 1;
	margin-top: -15rem;
}

.prev {
	left: -246px;
}

.next {
	right: -246px;
}

.slide-controll {
	position: fixed;
	top: 3rem;
	right: -5rem;
	cursor: pointer;
}

.slide-controll polyline {
	transition: linear .2s all;
}

.slide-controll:hover polyline{
	stroke: #464653!important;
}

/* ----------------------------- Slides Passados ----------------------------- */
#slide-1:checked ~ ul li:nth-of-type(4) .slide-item, #slide-1:checked ~ ul li:nth-of-type(3) .slide-item,
#slide-2:checked ~ ul li:nth-of-type(1) .slide-item,
#slide-2:checked ~ ul li:nth-of-type(4) .slide-item, #slide-3:checked ~ ul li:nth-of-type(1) .slide-item,
#slide-3:checked ~ ul li:nth-of-type(2) .slide-item, #slide-4:checked ~ ul li:nth-of-type(3) .slide-item,
#slide-4:checked ~ ul li:nth-of-type(3) .slide-item{
	transform:translateX(-300%) translateZ(-170px);
	visibility: hidden;
}

/* ----------------------------- Próximos Slides ----------------------------- */
#slide-3:checked ~ ul li:nth-of-type(4) .slide-item, #slide-4:checked ~ ul li:nth-of-type(1) .slide-item,
#slide-2:checked ~ ul li:nth-of-type(3) .slide-item {
	transform:translateX(300%) translateZ(-170px);
	visibility: hidden;
}

/* ----------------------------- Animação de checado  ----------------------------- */
#slide-1:checked ~ ul li:nth-of-type(1), #slide-2:checked ~ ul li:nth-of-type(2), #slide-3:checked ~ ul li:nth-of-type(3),
#slide-4:checked ~ ul li:nth-of-type(4){
	z-index: 2;
}

#slide-1:checked ~ ul li:nth-of-type(1) p, #slide-2:checked ~ ul li:nth-of-type(2) p, #slide-3:checked ~ ul li:nth-of-type(3) p,
#slide-4:checked ~ ul li:nth-of-type(4) p{
	transform: translateX(0);
	opacity: 1;
	transition-delay: .3s;
}

#slide-1:checked ~ ul li:nth-of-type(1) .slide-item, #slide-2:checked ~ ul li:nth-of-type(2) .slide-item,
#slide-3:checked ~ ul li:nth-of-type(3) .slide-item, #slide-4:checked ~ ul li:nth-of-type(4) .slide-item{
	transform:translateX(0);
	visibility: visible;
}

#slide-1:checked ~ ul li:nth-of-type(1) .next, #slide-2:checked ~ ul li:nth-of-type(2) .next,
#slide-3:checked ~ ul li:nth-of-type(3) .next, #slide-4:checked ~ ul li:nth-of-type(4) .next{
	animation: controllScale .3s ease-in-out 1;
	animation-fill-mode: forwards;
}
<commit_msg>Add opacity in controlls of example<commit_after>* {
	margin: 0 auto;
	padding: 0;
}

body {
	background: #ecf0f5;
}

ul, li {
	list-style: none;
}

.slide {
	height: 100vh;
}

.slide li {
	width: 100%;
	z-index: 1;
	top: 50%;
	overflow: hidden;
	margin-top: -250px;
	position: absolute;
	transition: .3s z-index linear;
	z-index: 1;
	perspective: 300px;
}

.slide-item {
	padding: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: all ease-out .2s;
	transform: translateX(300%);
	visibility: hidden;
}

.slide-circle {
	background: #fff;
	width: 28rem;
	height: 28rem;
	border-radius:100%;
	box-shadow: 0 0 1px #fff;
	position: relative;
	z-index: 2;
}

.slide img {
	margin: 1.4rem 0;
	max-width: 100%;
}

.slide p {
	color: #666;
	font-family: "PT Sans", arial;
	width: 100%;
	text-align: center;
	margin-top: 2rem;
	opacity: 0;
	transform: translateX(3rem);
	transition: all linear .3s;
	font-size: 20px;
	text-transform: uppercase;;
}

.slide-price {
	color: #000;
}

.prev, .next {
	display: block;
	-webkit-transform:scale(0.7);
	position: absolute;
	top: 50%;
	cursor: pointer;
	z-index: 1;
	margin-top: -15rem;
}

.prev {
	left: -246px;
}

.next {
	right: -246px;
}

.slide-controll {
	position: fixed;
	top: 3rem;
	right: -5rem;
	cursor: pointer;
	opacity: 0;
}

.slide-controll polyline {
	transition: linear .2s all;
}

.slide-controll:hover polyline{
	stroke: #464653!important;
}

/* ----------------------------- Slides Passados ----------------------------- */
#slide-1:checked ~ ul li:nth-of-type(4) .slide-item, #slide-1:checked ~ ul li:nth-of-type(3) .slide-item,
#slide-2:checked ~ ul li:nth-of-type(1) .slide-item,
#slide-2:checked ~ ul li:nth-of-type(4) .slide-item, #slide-3:checked ~ ul li:nth-of-type(1) .slide-item,
#slide-3:checked ~ ul li:nth-of-type(2) .slide-item, #slide-4:checked ~ ul li:nth-of-type(3) .slide-item,
#slide-4:checked ~ ul li:nth-of-type(3) .slide-item{
	transform:translateX(-300%) translateZ(-170px);
	visibility: hidden;
}

/* ----------------------------- Próximos Slides ----------------------------- */
#slide-3:checked ~ ul li:nth-of-type(4) .slide-item, #slide-4:checked ~ ul li:nth-of-type(1) .slide-item,
#slide-2:checked ~ ul li:nth-of-type(3) .slide-item {
	transform:translateX(300%) translateZ(-170px);
	visibility: hidden;
}

/* ----------------------------- Animação de checado  ----------------------------- */
#slide-1:checked ~ ul li:nth-of-type(1), #slide-2:checked ~ ul li:nth-of-type(2), #slide-3:checked ~ ul li:nth-of-type(3),
#slide-4:checked ~ ul li:nth-of-type(4){
	z-index: 2;
}

#slide-1:checked ~ ul li:nth-of-type(1) p, #slide-2:checked ~ ul li:nth-of-type(2) p, #slide-3:checked ~ ul li:nth-of-type(3) p,
#slide-4:checked ~ ul li:nth-of-type(4) p{
	transform: translateX(0);
	opacity: 1;
	transition-delay: .3s;
}

#slide-1:checked ~ ul li:nth-of-type(1) .slide-controll, #slide-2:checked ~ ul li:nth-of-type(2) .slide-controll, #slide-3:checked ~ ul li:nth-of-type(3) .slide-controll, #slide-4:checked ~ ul li:nth-of-type(4) .slide-controll {
	opacity: 1;
}

#slide-1:checked ~ ul li:nth-of-type(1) .slide-item, #slide-2:checked ~ ul li:nth-of-type(2) .slide-item,
#slide-3:checked ~ ul li:nth-of-type(3) .slide-item, #slide-4:checked ~ ul li:nth-of-type(4) .slide-item{
	transform:translateX(0);
	visibility: visible;
}

#slide-1:checked ~ ul li:nth-of-type(1) .next, #slide-2:checked ~ ul li:nth-of-type(2) .next,
#slide-3:checked ~ ul li:nth-of-type(3) .next, #slide-4:checked ~ ul li:nth-of-type(4) .next{
	animation: controllScale .3s ease-in-out 1;
	animation-fill-mode: forwards;
}

{'fraction_non_alphanumeric': 0.2301405219386292, 'fraction_numerical': 0.04531115572125036, 'mean_word_length': 3.1394658753709197, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3096257', 'n_tokens_mistral': 3082, 'n_tokens_neox': 2908, 'n_words': 599}