@keyframes opacity {
	from {
		opacity: 0.1;
	}
	to {
		opacity: 0.95;
	}
}

/*GALLLERY*/
.primary__gallery, 
.primary__galleryB, 
.primary__galleryC, 
.primary__galleryD {
    position: relative;
    width: 100%;
    max-width: 2200px;
    height: auto;
    margin: 1em auto;
    overflow: hidden;
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.primary__gallery--content, 
.primary__gallery--contentB,
.primary__gallery--contentC,
.primary__gallery--contentD {
	display: flex;
	max-width: 1200px;
	width: 100%;
	height: 450px;
	margin: 2em .4em;
	padding: 10px 30px;
		overflow: hidden;
		align-items: center;
		justify-content: space-between;
		gap: 1.5em;
}


.gallery__content--titulo,
.gallery__content--tituloB,
.gallery__content--tituloC,
.gallery__content--tituloD {
	display: flex;
	flex-direction: column;
	max-width: 250px;
	max-height: 370px;
	gap: 1.1em;
	cursor: default;
	overflow-y: scroll;
	scrollbar-width: none;
	scrollbar-gutter: auto;
}

.gallery__content--titulo .content__primary, 
.gallery__content--tituloB .content__primary,
.gallery__content--tituloC .content__primary,
.gallery__content--tituloD .content__primary {
	position: relative;
	font-size: clamp(10px, 4vw, 20px);
	font-weight: 700;
	text-transform: uppercase;
	color: #771100;
	text-align: center;
}

.gallery__content--titulo .content__secondary,
.gallery__content--tituloB .content__secondary,
.gallery__content--tituloC .content__secondary,
.gallery__content--tituloD .content__secondary {
	font-size: clamp(8px, 2.5vw, 14px);
	font-weight: 500;
	color: #303030;
	width: 100%;
	text-align: justify;
	margin: 0 auto;

}

.primary__gallery--wrapper {
	display: flex;
	position: relative;
	flex-direction: column;
	cursor: default;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	place-content: center;
}

.button__sliders,
.button__slidersB,
.button__slidersC,
.button__slidersD {
	display: flex;
	position: relative;
	top: 0;
	width: 100%;
	height: fit-content;
	z-index: 4000;
	margin: .6em;
	justify-content: center;
	gap: 0.7em;
}

.slide, .slideA, .slideB, 
.slideC, .slideD, .slideE,
.slideF, .slideG, .slideH, 
.slideI {
/*	display: flex;*/
	position: relative;
/*	bottom: 0;*/
/*	border: none;*/
	background: none;
	width: 50px;
	height: auto;
/*	padding: 4em;*/
	border: 3px solid #2b2b2b;
	cursor: pointer;
	padding: 0;
}

.slide:hover, .slideA:hover, .slideB:hover,
.slideC:hover, .slideD:hover, .slideE:hover,
.slideF:hover, .slideG:hover, .slideH:hover,
.slideI:hover {
	filter: drop-shadow(1px 1px 10px #2b2b2b);
}

.gallery__item, 
.gallery__itemB,
.gallery__itemC,
.gallery__itemD {
	position: relative;
	isolation: isolate;
	display: flex;
	width: 100%;
	height: 100%;
	padding: .5em;
	opacity: 1;
	overflow: hidden;
	transition: opacity 0.25s;
	margin-bottom: 20px;
	justify-content: center; 
	border-radius: .4em;
	margin: 0 auto;
}

.gallery__item:hover,
.gallery__itemB:hover,
.gallery__itemC:hover,
.gallery__itemD:hover {
	opacity: 1;
	transition: opacity 0.3s;
}

.gallery__item:not(:hover), 
.gallery__itemB:not(:hover),
.gallery__itemC:not(:hover),
.gallery__itemD:not(:hover)    {
	opacity: 0.95;
	transition: opacity 0.30s;
}

.item__image {
	display: block;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: .4em;
	padding: .2em;
	animation: opacity 3s 1;
	filter: drop-shadow(2px 2px 7px #303030);
}

.prev,
.prevB,
.prevC,
.prevD {
	display: block;
	position: absolute;
	border: none;
	background: none;
	left: 20%;
	top: 50%;
	margin: 1em;
	padding: .9em .3em;
	color: #30303000;
	z-index: 5000;
	background-color: #1c1c1c00;
}

.prev:hover,
.prevB:hover,
.prevC:hover,
.prevD:hover {
	filter: drop-shadow(4px 6px 5px #ececec8c);
	cursor: pointer;
	opacity: 1;
}

.next,
.nextB,
.nextC,
.nextD {
	display: block;
	position: absolute;
	border: none;
	background: none;
	right: 20%;
	top: 50%;
	margin: 1em;
	padding: .9em .3em;
	color: #30303000;
	z-index: 5000;
	background-color: #1c1c1c00;
}

.next:hover,
.nextB:hover,
.nextC:hover,
.nextD:hover {
	filter: drop-shadow(4px 6px 5px #ececec8c);
	cursor: pointer;
	opacity: 1;
}

.item__description {
	align-self: flex-end;
	color: #fff;
	margin: 0 auto;
}

.item__name {
	font-size: 1.5rem;
	background: linear-gradient(90deg,#303030,#0001);
	padding: 0.2em 15px;
}

.item__role {
	display: flex;
	flex-direction: column;
	font-size: 0.8rem;
	background: linear-gradient(90deg,#303030,#0003);
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
	gap: .2em;
	padding: 0 15px;
}

.item__name,
.item__role {
	opacity: 1;
	transition: opacity 0.25s, transform 0.3s;
	transition-delay: .35s;
}

.content__secondary {
	.ale {
		font-weight: 900;
		color: #008000;
	}
	p {
		padding: 0;
	}
}

@media (width <= 768px) {
	.primary__gallery {
		display: block;
	}

	.primary__gallery--content, 
	.primary__gallery--contentB, 
	.primary__gallery--contentC, 
	.primary__gallery--contentD {
		display: block;
		/*flex-direction: column;*/
		height: fit-content;
	}

	.gallery__content--titulo, 
	.gallery__content--tituloB, 
	.gallery__content--tituloC, 
	.gallery__content--tituloD {
		max-width: 100%;
		overflow-y: hidden;
/*	scrollbar-width: thin;*/
	}

	.button__sliders,
	.button__slidersB,
	.button__slidersC,
	.button__slidersD {
		gap: 1em;
		justify-content: center;
	}
	.slide, .slideA, .slideB, 
	.slideC, .slideD, .slideE,
	.slideF, .slideG, .slideH, 
	.slideI {
		max-width: 5px;
		border-radius: 50%;
		padding: 0;
	}
	.card {
/*		border: 1px solid black;*/
		max-width: 900px;
		height: auto;
		margin: 0 auto;
		padding: .3em;
	}

	.card-body .form__main {
		display: flex;
		position: relative;
		justify-content: center;
		max-width: 600px;
		height: auto;
	}
	.form__main div{
		display: flex;
		position: relative;
		justify-content: center;
		max-width: 600px;
		height: auto;
	}

	.prev,
	.prevB,
	.prevC,
	.prevD {
/*		display: block;*/
		color: #303030;
		background-color: #1c1c1c8c;
		padding: .5em 0;
		left: 0;
	}

	.next,
	.nextB,
	.nextC,
	.nextD {
		color: #303030;
		background-color: #1c1c1c8c;
		padding: .5em 0;
		right: 0;
	}

	.gallery__item, 
	.gallery__itemB,
	.gallery__itemC,
	.gallery__itemD {
		width: 100%;
		height: 500px;
		min-width: auto;
	}
	.primary__gallery--wrapper {
		width: 100%;

/*		grid-auto-columns: 25rem;*/
	}
}