/*----- Estilos Gerais -----*/
.sticky-slider-slide.recurso {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--textoGapMaior);
	align-items: center;
}

/*------ Recursos -----*/

#Recursos {
  width: 100vw !important;
  max-width: 100vw !important;
  display: grid;
  align-content: center;
  position: relative;
  min-height: 100vh;
  height: 100vh !important;
  min-height: 100dvh;
  height: 100dvh !important;
}

/*-- Primeira Coluna --*/
.sticky-slider-slide.recurso .colunaImagem {
	grid-area: 1 / 1 / 2 / 4;
}

/*-- Segunda Coluna --*/
.sticky-slider-slide.recurso .colunaTextos {
	grid-area: 1 / 4 / 2 / 6;
	display: grid;
	gap: var(--textoGapMaior);
	align-items: center;
	justify-content: flex-start;
	height: max-content;
}

/*- Ícone -*/
.sticky-slider-slide.recurso .colunaTextos .icone {
	max-width: 50px;
	max-height: max-content;
	display: block;
}

.sticky-slider-slide.recurso .colunaTextos .icone img {
	width: 100%;
	max-width: 100%;
	display: block;
}

.sticky-slider-slide.recurso .colunaTextos h3,
.sticky-slider-slide.recurso .colunaTextos p {
	color: white !important;
}

.sticky-slider-slide.recurso .colunaTextos h3 {
	font-size: var(--textH3) !important;
}

.sticky-slider-slide.recurso .colunaTextos p {
	font-size: var(--textPCard) !important;
}

/*--- Função carrossel ---*/
#Recursos .et_pb_code_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: initial;
	flex-direction: row;
}

#Recursos .et_pb_code_inner,
#Recursos .sticky-slider-slide.recurso {
	height: var(--AlturaMaximaSlides);
}

#Recursos .sticky-slider-slide.recurso {
	position: absolute;
}

#Recursos .sticky-slider-slide.recurso * {
	z-index: 1;
}

/*----- Progress bar -----*/

#Recursos .progress-bar {
	position: absolute;
	gap: 10px;
	display: flex;
	flex-direction: row;
	z-index: 99 !important;
	height: max-content;
	right: calc(var(--colunaTextosWidth));
	transform: translateX(100%);
	top: calc(100% - (var(--colunaTextosHeight) / 3)) !important;
}

#Recursos .bulletSpace {
	height: 8px !important;
}

#Recursos .progress-bar .progress-bullet {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: max-content;
}

#Recursos .progress-bar .progress-bullet:before {
	content: "";
	display: block;
	visibility: visible;
	opacity: 1;
	position: relative;
	width: 8px;
	height: 8px;
	background-color: #808080 !important;
	border-radius: 100% !important;
	transition: all .3s ease-in-out;
	opacity: .2 !important;
	border: 0 !important;
}

#Recursos .progress-bar .progress-bullet:after {
	display: none !important;
	content: none !important;
	opacity: 0 !important;
	visibility: 0 !important;
}

#Recursos .progress-bar .progress-bullet.active:before {
	background: #808080 !important;
	opacity: 1 !important;
}

/*--- Mobile ---*/

@media only screen and (max-width: 980px) {
	.sticky-slider-slide.recurso {
		grid-template-columns: repeat(1, 1fr) !important;
	}

	.sticky-slider-slide.recurso .colunaImagem {
		grid-area: 1 / 1 / 2 / 2 !important;
	}

	.sticky-slider-slide.recurso .colunaTextos {
		grid-area: 2 / 1 / 3 / 2 !important;
	}

	.sticky-slider-slide.recurso .colunaTextos {
		height: max-content;
		justify-items: center;
	}

	.sticky-slider-slide.recurso .colunaTextos p,
	.sticky-slider-slide.recurso .colunaTextos h3 {
		text-align: center;
	}

	body #Recursos .progress-bar {
		top: auto !important;
		bottom: 0 !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
	}

	#Recursos .f-carousel .recurso.f-carousel__slide {
		display: none !important;
	}

	#Recursos .f-carousel .recurso.f-carousel__slide:first-child {
		display: block !important;
	}

	#Recursos .f-carousel .f-carousel__viewport .recurso.f-carousel__slide {
		display: grid !important;
	}

	#Recursos .f-carousel {
		margin: 0 !important;
	}

	#Recursos {
		height: auto !important;
    min-height: auto !important;
    max-height: none !important;
	}

	#Recursos .sticky-slider-slide.recurso {
		position: relative !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
	}

	#Recursos .f-carousel .f-carousel__dots {
		padding: 0 !important;
    position: relative;
    top: auto;
    transform: none;
    bottom: auto;
	}

	#Recursos .f-carousel {
		flex-direction: column !important;
	}


}