#seccioncarrusel{
    position: absolute;
    top: 100px;
    width: 100%;
}
.container__slider{
	width: 90%;
	max-width: 900px;
	margin: auto;/*se centra el contenedor*/
	overflow: hidden;/*para mirar solo una imagen y ocultar el resto*/
	/*estilos adicionales al contenedor*/
	box-shadow: 0 0 0 10px #fff,/*corde y color del borde*/
				0 15px 50px;/*sombra adicional*/
	position: relative;/*para que queden flotando los botones <  > en las imagenes*/
	top: 20px;
}
.slider{
	background-color: #fff;/*color de fondo del slider*/
	display: flex;
	width: 400%;
	height: 400px;
	/*cuando entre a programar slider.js*/
	margin-left: -100%;/*esto es para pasar las flechas al segundo elemento, */
}
.slider__section{
	width: 100%;
}
.slider__img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;/*las imagenes pueden tener cualquier tamaño para que se vean bien usamos este atributo*/
}
.slider__btn{
	position: absolute;
	width: 40px;/*ancho  40px*/
	height: 40px;/*alto 40px*/
	background: rgba(255, 255, 255, 0.7);
	top: 50%;
	transform: translateY(-50%);
	font-size: 30px;/*grande de los <>*/
	font-weight: bold;/*los ponemos en negrita*/
	font-family: monospace;/*se hacen mas elegantes achataditos*/
	text-align: center;/*se centra los <> en su contenedor*/
	border-radius: 50%; /*queda redondito*/
	cursor: pointer;/*para la manito o paresca boton*/
}
.slider__btn:hover{
	background-color:black;
	color: #fff;

}
.slider__btn__left{
	left: 10px;/*10px lado izquierdo*/
}
.slider__btn__right{
	right: 10px;/*10px del lado derecho*/
}
#contepuntos{
	display: flex;/*poner uno alado de la otro*/
	position: absolute;
	width: 40px;/*ancho  40px*/
	height: 40px;/*alto 40px*/
	background:red;
	top: 0%;
	/*left: 50%;
/*transform: translateX(50%);*/
	font-size: 30px;/*grande de los <>*/
	font-weight: bold;/*los ponemos en negrita*/
	font-family: monospace;/*se hacen mas elegantes achataditos*/
	text-align: center;/*se centra los <> en su contenedor*/
   }
.punto1{
	padding-left: 50px;
	background-color: black;
    border-radius: 10%; /*queda redondito*/
}
.punto2{
	padding-left: 50px;
	background-color: black;
	border-radius: 10%; /*queda redondito*/
}
.punto3{
	padding-left: 50px;
	background-color: black;
	border-radius: 10%; /*queda redondito*/
}