#testimonials {
	--bg-color-basic: #D5ED99;
	--bg-color-hover: #BCD5E4;
	--text-color: #364A67;
}

/*-----------------------------------------------------------------------------------------------*/

#testimonials > .controls {
	padding: 1px 10px;
	
	--mask-image: linear-gradient(to right, transparent 0px, #000 10px, #000 calc(100% - 10px), transparent 100%);
	
	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
#testimonials > .controls .swiper-slide {
	display: flex; height: 46px;
	flex-direction: row; width: auto;
	justify-content: flex-start;
	align-items: stretch;
	padding: 3px;
	column-gap: 3px;
	
	background-color: #FFF;
	border-radius: 23px;
}
#testimonials > .controls .swiper-slide > .control {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0 25px;
	
	background-color: var(--bg-color-basic);
	border-radius: 20px;
	
	cursor: pointer;
	
	transition: background-color .2s ease-out;
}
#testimonials > .controls .swiper-slide > .control > span {
	font-weight: 500;
	font-size: 15px;
	color: var(--text-color);
}
#testimonials > .controls .swiper-slide > .control.current,
#testimonials > .controls .swiper-slide > .control:hover {
	background-color: var(--bg-color-hover);
}
@media (min-width: 900px)	 { #testimonials > .controls { margin-bottom: 65px; } }
@media (max-width: 899.99px) { #testimonials > .controls { margin-bottom: 35px; } }

/*-----------------------------------------------------------------------------------------------*/

#testimonials > .testimonials {
	color: #000;
	padding: 0 20px;
}
#testimonials > .testimonials .testimonial {
	overflow: hidden;
	align-self: flex-end;
	
	border: solid 1px rgba(255,255,255,.9);
	border-radius: 30px;
}

#testimonials > .testimonials .testimonial.slide-odd { height: 280px; }
#testimonials > .testimonials .testimonial.slide-even { height: 380px; }
#testimonials > .testimonials .testimonial.slide-even:before {
	content: '';
	position: absolute; top: 45px; right: 35px;
	display: block; height: 70px; width: 75px;
	
	background-image: url("../../images/accents/accent-bubble.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	
	animation: bubble-float var(--dur) ease-in-out var(--delay) infinite;
}
#testimonials > .testimonials .testimonial.slide-even.slide-1:before { --dur: 4.0s; --delay:  0.0s; --rotate: -5deg; }
#testimonials > .testimonials .testimonial.slide-even.slide-2:before { --dur: 4.2s; --delay: -1.5s; --rotate:  0deg; }
#testimonials > .testimonials .testimonial.slide-even.slide-3:before { --dur: 3.8s; --delay: -3.0s; --rotate:  5deg; }
@keyframes bubble-float {
	0%	 { transform: translateY( 10px) rotate(var(--rotate, 0deg)); }
	50%	 { transform: translateY(-10px) rotate(var(--rotate, 0deg)); }
	100% { transform: translateY( 10px) rotate(var(--rotate, 0deg)); }
}

#testimonials > .testimonials .testimonial.slide-1 { background-image: linear-gradient(to bottom, #D5ED99, #BCD5E4); }
#testimonials > .testimonials .testimonial.slide-2 { background-image: linear-gradient(to bottom, #BCD5E4, #BCD5E4); }
#testimonials > .testimonials .testimonial.slide-3 { background-image: linear-gradient(to bottom, #FFFFFF, #FFFFFF); }


#testimonials > .testimonials .testimonial > .scrollable {
	position: absolute; top: 0; left: 0;
	height: 100%; width: 100%; overflow: auto;
	padding: 0 30px 150px;
	
    -webkit-mask-image: var(--mask-image);
    mask-image: var(--mask-image);
}
#testimonials > .testimonials .testimonial.slide-even > .scrollable {
	padding-top: 150px;
	--mask-image: linear-gradient(to bottom, transparent 125px, #000 150px, #000 calc(100% - 150px), transparent calc(100% - 120px));
}
#testimonials > .testimonials .testimonial.slide-odd > .scrollable {
	padding-top: 50px;
	--mask-image: linear-gradient(to bottom, transparent 25px, #000 50px, #000 calc(100% - 150px), transparent calc(100% - 120px));
}
#testimonials > .testimonials .testimonial > .scrollable > .content {
	min-height: 100%;
	
	line-height: 20px;
	font-size: 16px;
	font-weight: 500;
}
#testimonials > .testimonials .testimonial > .scrollable > .content:before { content: '« '; }
#testimonials > .testimonials .testimonial > .scrollable > .content:after { content: ' »'; }

#testimonials > .testimonials .testimonial > .credits {
	position: absolute; bottom: 30px; left: 30px;
	display: grid; width: calc(100% - 60px);
	grid-template-areas:
		"avatar	name	partner"
		"avatar	title	partner";
	grid-template-rows: auto auto;
	column-gap: 10px;
	row-gap: 5px;
}
#testimonials > .testimonials.members .testimonial > .credits { grid-template-columns: 65px auto 25px; }
#testimonials > .testimonials.clients .testimonial > .credits { grid-template-columns: 65px auto 65px; }
#testimonials > .testimonials .testimonial > .credits > .avatar {
	grid-area: avatar;
	align-self: center;
	position: relative;
	height: 65px; width: 65px;
	padding: 2px;
	
	isolation: isolate;
}
#testimonials > .testimonials .testimonial > .credits > .avatar:before {
	content: '';
	position: absolute; top: 0; left: 0; z-index: -1;
	display: block; height: 100%; width: 100%;
	
	background-image: linear-gradient(to bottom, #D6FFBB, #BCD5E4);
	border-radius: 50%;
}
#testimonials > .testimonials .testimonial > .credits > .avatar > .media-element {
	overflow: hidden;
	border-radius: 50%;
}
#testimonials > .testimonials .testimonial > .credits > .partner {
	grid-area: partner;
	align-self: center;
	height: 65px; width: 65px;
}
#testimonials > .testimonials .testimonial > .credits > .partner img { object-fit: contain; }
#testimonials > .testimonials .testimonial > .credits > .name {
	grid-area: name;
	align-self: flex-end;
	
	font-size: 16px;
	font-weight: 500;
}
#testimonials > .testimonials .testimonial > .credits > .title {
	grid-area: title;
	align-self: flex-start;
	
	line-height: 130%;
	font-size: 14px;
}
@media (min-width: 900px) {
	#testimonials > .testimonials > .swiper-pagination { display: none; }
}
@media (max-width: 899.99px) {
	#testimonials > .testimonials { padding-bottom: 36px; }
	
	#testimonials > .testimonials > .swiper-scrollbar {
		--swiper-scrollbar-bottom: 0;
		--swiper-scrollbar-sides-offset: 30px;
		--swiper-scrollbar-size: 6px;
		
		--swiper-scrollbar-bg-color: rgba(255,255,255,.1);
		--swiper-scrollbar-drag-bg-color: var(--bg-color-basic);
		--swiper-scrollbar-border-radius: 3px;
	}
}
@media (min-width: 360px) {
	#testimonials > .testimonials .testimonial { width: 320px; }
}