/* CSS Document */
/* =) */
*{margin:0; padding:0;}
	img{border:0; float:left; position:relative;}
	div, article, section{float:left; position:relative;}


/* Variaveis do componente ------------------------------------------------------------------------------------- */

:root{
	
	--width-carousel: 100%; /* Defina a largura do carousel */
	--height-carousel: 400px;  /* Defina a altura do carousel */
	
	--margin-slide: 16px; /* Defina o espaço entre os slides, defina zero se não tiver espaço */
	--width-slide: 310px; /* Defina a largura de cada slide */
	--height-slide: var(--height-carousel); /* Defina a altura de cada slide */
	
	--size-arrows: 50px;  /* Defina a altura das seta de transição */
}



/* Classes do componente ---------------------------------------------------------------------------------------- */

.slideshow{width:var(--width-carousel); height:var(--height-carousel); overflow:hidden;}


	/* Setas de transição */
	.arrows{position:absolute; z-index:2; width:92%; margin-top:calc((var(--height-carousel) / 2) - (var(--size-arrows) / 2)); justify-content:space-between; display:flex; padding:0 4%;}

		.arrow-left, .arrow-right{width:var(--size-arrows); height:var(--size-arrows); background:#FFF; color:#000; border-radius:100%; text-align:center; cursor:pointer; background-size:24px; background-repeat:no-repeat; background-position:center; transition:.2s;}
		.arrow-left:hover, .arrow-right:hover{opacity:.9;}
		.arrow-left{background-image:url("../img/arrow-left.svg");} .arrow-right{background-image:url("../img/arrow-right.svg");}


	/* Carrossel e slides */
	.slide-wrapper{z-index:1; width:var(--width-carousel); height:var(--height-carousel); -webkit-animation:slide 9s ease infinite;}

		.slide{position:absolute; width:var(--width-slide); height:var(--height-slide); background-position:left center; background-repeat:no-repeat; padding-right:var(--margin-slide); background-size:calc(var(--width-slide) - var(--margin-slide)) var(--height-slide);}

			/* Posicionamento dos slides. Caso tenha mais slides no carrossel, aumente aqui */
			.slide:nth-child(1){left:calc(var(--width-slide) * 0)}
			.slide:nth-child(2){left:calc(var(--width-slide) * 1)}
			.slide:nth-child(3){left:calc(var(--width-slide) * 2)}
			.slide:nth-child(4){left:calc(var(--width-slide) * 3)}
			.slide:nth-child(5){left:calc(var(--width-slide) * 4)}
			.slide:nth-child(6){left:calc(var(--width-slide) * 5)}
			.slide:nth-child(7){left:calc(var(--width-slide) * 6)}
			.slide:nth-child(8){left:calc(var(--width-slide) * 7)}
			.slide:nth-child(9){left:calc(var(--width-slide) * 8)}
			.slide:nth-child(10){left:calc(var(--width-slide) * 9)}

		/* Estilo de texto dos slides */
		p.legenda{position:absolute; bottom:8px; left:8px; color:#FFF;}