.carrocel {
	box-sizing: border-box;
	margin-bottom: 30rem;
}

.produtos-servicos {
	width: 1000px;
	position: relative;
	margin: auto;
}

.produto {
	text-align: center;
	/*max-width: 600px;*/
	height: 40rem;
	margin: auto;
	display: none;
	margin-bottom: 30px;
}

.produto h3 {
	margin-bottom: 10rem;
	font-size: 6rem;
	font-weight: 200;
	padding-bottom: 2rem;
	border-bottom: 2px solid rgba(188,190,192,1);
	color: rgba(188,190,192,1);
}

.produto p{
	margin: auto;
	font-size: 2rem;
	max-width: 800px;
}

.anterior, .proximo {
	cursor: pointer;
	position: absolute;
	text-align: center;
	padding-top: 10px;
	height: 45px;
	width: 45px;
	background-color: rgba(255, 255, 255, .3);
	border-radius: 50%;
	bottom: 0;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: .4s ease;
}

.anterior {
	left: 10%;
}

.proximo {
	right: 10%;
}

.anterior:hover, .proximo:hover {
	background-color: rgba(255, 255, 255, .8);
	color: black;
}

.ind {
	cursor: pointer;
	background-color: rgba(255, 255, 255, .3);
	display: inline-block;
	height: 5px;
	width: 5rem;
	margin: 0 5px 0 0;
}

.ind:hover, .ativo{
	background-color: rgba(255, 255, 255, .9);
}

.fade {
	animation-name: fade;
	animation-duration: 0.5s;
}

@keyframes fade {
	from {
		opacity: .2;
		transform: translateY(-5rem)
	}
	to {
		opacity: 1;
		transform: translateX(0)}
}

@media (max-width: 1100px) {
	.produtos-servicos {
		width: 90%;
	}

	.ind {
		width: 4rem;
	}
}

@media (max-width: 650px) {
	.ind {
		width: 15px;
		height: 15px;
		border-radius: 50%;
	}

	.produto {
		height: 50rem;
	}
}

@media (max-width: 450px) {
	.ind {
		width: 7px;
		height: 7px;
	}

	.produtos-servicos {
		width: 80%;
	}

	.produto h3 {
		font-size: 4rem;
		font-weight: 200;
	}
}