/*
 * TUM Kitty — Content Slider styles
 * ---------------------------------------------------------------------------
 * A 3-up carousel with a zoomed centre slide. The "zoom" is produced by
 * scaling a background FRAME layer (.tum-slider__frame) while the content
 * layer (.tum-slider__content) is a sibling that is never scaled — so the box
 * appears to grow but the copy inside stays exactly the same size.
 *
 * The animation speed is driven by the --tk-scroll custom property, which the
 * JavaScript sets from the shortcode's scroll_time attribute, so the CSS never
 * needs to be regenerated per instance.
 *
 * No external CSS frameworks are used.
 * ---------------------------------------------------------------------------
 */

.testimonial_Sig {
    font-family: 'Coda';
    font-size: 20px;
    text-align: center;
    padding: 30px 0px 5px 0px;
    line-height: 28px;
		color:#B22830!important;
}

.testimonial_Copy {
		font-size:14px;
}



.is-center .tum-slider__content .testimonial_Box .testimonial_Copy {
		font-size:19px!important;
}



/* Root. Establishes the positioning context for the absolute nav arrows and
   the animation-speed custom property (overridden inline by the JS). */
.tum-slider {
	--tk-scroll: 600ms;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.tum-slider *,
.tum-slider *::before,
.tum-slider *::after {
	box-sizing: border-box;
}

/* The window through which slides are seen. Horizontal overflow is clipped so
   off-screen slides are hidden; vertical padding gives the scaled centre frame
   room to grow without being clipped. */
.tum-slider__viewport {
	overflow: hidden;
	width: 100%;
	padding: 26px 0;
}

/* The moving row of slides. Its translateX is animated by the JS; the
   transition duration comes from the --tk-scroll variable. */
.tum-slider__track {
	display: flex;
	align-items: stretch;
	transition: transform var(--tk-scroll) ease;
	will-change: transform;
}

/* A single slide. Width is set inline by the JS (viewport / slides-per-view);
   the CSS fallbacks below keep a sane 3-up (or 1-up on mobile) layout before
   the JS runs. Horizontal padding creates the gap between slide frames. */
.tum-slider__slide {
	position: relative;
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	padding: 0 8px;
	min-height: 120px;
}

/* The scaling "box" of the slide: background, border and shadow live here so
   that scaling this layer produces the zoom illusion without touching content.
   It is inset by the slide padding so gaps show between adjacent frames. */
.tum-slider__frame {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 8px;
	right: 8px;
	background: #ffffff;
	border: 1px solid #e2e4e7;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
	transform: scale(0.92);
	transform-origin: center center;
	transition: transform var(--tk-scroll) ease, box-shadow var(--tk-scroll) ease;
}

/* The centre slide's frame grows, creating the zoom. Content is a sibling and
   is unaffected. */
.tum-slider__slide.is-center .tum-slider__frame {
	transform: scale(1);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20);
}

/* The content layer sits above the frame at its natural size and never scales. */
.tum-slider__content {
	position: relative;
	z-index: 1;
	height: 100%;
	padding: 45px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.is-center .tum-slider__content {
	position: relative;
	z-index: 1;
	height: 100%;
	padding: 45px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.is-center .tum-slider__content {
	position: relative;
	z-index: 1;
	height: 100%;
    padding: 50px 60px; /* 25px extra top & bottom vs the sides' 45px. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Ensure common media inside a slide behaves responsively. */
.tum-slider__content img {
	max-width: 100%;
	height: auto;
}

/*
 * ---------------------------------------------------------------------------
 * Navigation arrows
 * ---------------------------------------------------------------------------
 * Positioned absolutely; their top / side inset come from inline styles set in
 * PHP from the admin card settings. translateY(-50%) vertically centres them on
 * the configured "top" value.
 */
.tum-slider__nav {
	position: absolute;
	z-index: 5;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	color: #1d2327;
	transition: background 0.2s ease, transform 0.2s ease;
}

.tum-slider__nav:hover {
	background: #ffffff;
}

.tum-slider__nav:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* Custom uploaded icon image. */
.tum-slider__nav img {
	max-width: 60%;
	max-height: 60%;
	display: block;
}

/* Built-in CSS chevron used when no icon image is uploaded. */
.tum-slider__chevron {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

.tum-slider__nav--prev .tum-slider__chevron {
	transform: rotate(135deg);
	margin-left: 4px;
}

.tum-slider__nav--next .tum-slider__chevron {
	transform: rotate(-45deg);
	margin-right: 4px;
}

/*
 * ---------------------------------------------------------------------------
 * Single mode (mode="single").
 * ---------------------------------------------------------------------------
 * Mirrors the mobile rules below but applies at every width: the JS pins
 * slides-per-view to 1, and here we provide the matching CSS fallback and drop
 * the centre-zoom so one full-width slide reads cleanly on all screens.
 */
.tum-slider--single .tum-slider__slide {
	flex-basis: 100%;
	max-width: 100%;
}

.tum-slider--single .tum-slider__frame,
.tum-slider--single .tum-slider__slide.is-center .tum-slider__frame {
	transform: scale(1);
}

/*
 * ---------------------------------------------------------------------------
 * Curved mode (mode="curved") — a 3D "cover-flow" cylinder.
 * ---------------------------------------------------------------------------
 * Driven by the cover-flow engine in content-slider.js (see initCoverflow).
 * The panels live on the surface of a virtual cylinder: each is turned to its
 * own angle (rotateY) and pushed out to the radius (translateZ) inside a
 * preserve-3d stage, so the whole thing reads as slides wrapped around a drum.
 * The JS assigns each panel a position class by its distance from the front:
 *
 *   .cf-pos-0   front  : faces the viewer, white, full size, on top
 *   .cf-pos-l1  left   : one step around the cylinder, grey, smaller
 *   .cf-pos-r1  right  : mirror of the left side
 *   .cf-pos-l2  / -r2  : two steps around, turned away and faded out (hidden)
 *
 * Advancing changes ONLY each panel's angle, so panels swing along the cylinder
 * ARC and always keep the same angular gap from their neighbours — they can
 * never overlap or drift sideways during the animation. The JS sets each panel's
 * px width and the box height; the knobs below control the look.
 *
 * NOTE: --cf-dir (1 or -1) flips which way the cylinder turns. --cf-angle is the
 * gap between panels; --cf-radius is the drum radius (bigger = more spread out).
 */
.tum-slider--curved {
	--cf-persp: 2400px;      /* Perspective distance; smaller = stronger 3D. */
	--cf-dir: -1;            /* Which way the cylinder turns: 1 or -1. Flip to reverse. */
	--cf-angle: 42deg;       /* Angle between neighbouring panels on the cylinder. */
	--cf-radius: 780px;      /* Cylinder radius (px). Bigger = panels spaced further apart. */
	--cf-side-scale: 0.5;    /* Extra shrink on side panels (on top of the perspective falloff). */
	--cf-side-height: 1.55;  /* Extra vertical scale on side/edge panels. */
	--cf-side-bg: #9cacb2;   /* Side/edge-panel background colour. */
	--cf-center-bg: #ffffff; /* Centre-panel background colour. */
}

/* The clip box also hosts the shared perspective for the cylinder, so every
   panel projects toward one vanishing point at the container centre (keeping the
   left and right sides true mirror images). Its height is set inline by the JS
   to the tallest panel. */
.tum-slider--curved .tum-slider__viewport {
	position: relative;
	overflow: hidden;
	padding: 0;
	perspective: var(--cf-persp);
	perspective-origin: 50% 50%;
}

/* The rotating "stage". preserve-3d keeps the panels in real 3D space, and
   pushing the stage back by one radius places the FRONT panel at depth 0 (its
   natural, unmagnified size) while the other panels curve away behind it. */
.tum-slider--curved .tum-slider__track {
	position: relative;
	display: block;
	height: 100%;
	transform-style: preserve-3d;
	transform: translateZ(calc(-1 * var(--cf-radius)));
}

/* Each panel is centred on the cylinder axis: left:0/right:0 + margin:auto
   horizontally centres the box (width set by the JS) so the panel's own centre
   is the rotation axis; top:0/bottom:0 fills the box height; content is
   vertically centred by the flexbox. */
.tum-slider--curved .tum-slider__slide {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 960px;
	padding: 0;
	display: flex;
	align-items: center;
	transform-origin: center center;
	transition: transform var(--tk-scroll) ease, opacity var(--tk-scroll) ease;
	backface-visibility: hidden;
}

/* The frame fills the whole panel (it IS the visible card) and carries the
   grey -> white colour fade as a panel moves in/out of the centre. */
.tum-slider--curved .tum-slider__frame {
	left: 0;
	right: 0;
	transform: none;
	background: var(--cf-side-bg);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	transition: background-color var(--tk-scroll) ease, box-shadow var(--tk-scroll) ease;
}

.tum-slider--curved .tum-slider__slide.is-center .tum-slider__frame {
	background: var(--cf-center-bg);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

/* Content sizes to its own text (the JS measures this to set the box height). */
.tum-slider--curved .tum-slider__content {
	height: auto;
}

/* ---- Position bands (classes toggled by the JS) -----------------------
 * Each panel sits on the cylinder at its own angle: rotateY turns it to that
 * angle and translateZ(radius) pushes it out to the surface (the stage's
 * translateZ(-radius) then brings the front panel to depth 0). Moving between
 * bands changes ONLY the angle, so a panel swings along the cylinder ARC — every
 * panel keeps the same angular gap from its neighbours for the whole animation,
 * so they can never overlap. The centre is at angle 0 (faces the viewer, full
 * size); ±1 sit one step around each way; ±2 are two steps around and hidden. */
.tum-slider--curved .tum-slider__slide.cf-pos-0 {
	transform: rotateY(0deg) translateZ(var(--cf-radius)) scale(1);
	opacity: 1;
}

.tum-slider--curved .tum-slider__slide.cf-pos-l1 {
	transform: rotateY(calc(-1 * var(--cf-angle) * var(--cf-dir))) translateZ(var(--cf-radius)) scaleX(var(--cf-side-scale)) scaleY(calc(var(--cf-side-scale) * var(--cf-side-height)));
	opacity: 1;
}

.tum-slider--curved .tum-slider__slide.cf-pos-r1 {
	transform: rotateY(calc(var(--cf-angle) * var(--cf-dir))) translateZ(var(--cf-radius)) scaleX(var(--cf-side-scale)) scaleY(calc(var(--cf-side-scale) * var(--cf-side-height)));
	opacity: 1;
}

.tum-slider--curved .tum-slider__slide.cf-pos-l2 {
	transform: rotateY(calc(-2 * var(--cf-angle) * var(--cf-dir))) translateZ(var(--cf-radius)) scaleX(var(--cf-side-scale)) scaleY(calc(var(--cf-side-scale) * var(--cf-side-height)));
	opacity: 0;
}

.tum-slider--curved .tum-slider__slide.cf-pos-r2 {
	transform: rotateY(calc(2 * var(--cf-angle) * var(--cf-dir))) translateZ(var(--cf-radius)) scaleX(var(--cf-side-scale)) scaleY(calc(var(--cf-side-scale) * var(--cf-side-height)));
	opacity: 0;
}

/* Suppress transitions during initial layout, resize, and wrap snaps. */
.tum-slider--curved.tum-slider--cf-noanim .tum-slider__slide {
	transition: none !important;
}

/* Mobile (JS toggles this at/below 640px): one full-width flat white slide. */
.tum-slider--curved.tum-slider--cf-mobile .tum-slider__slide {
	opacity: 0;
	pointer-events: none;
}

.tum-slider--curved.tum-slider--cf-mobile .tum-slider__slide.is-center {
	opacity: 1;
	pointer-events: auto;
	transform: rotateY(0deg) translateZ(var(--cf-radius)) scale(1);
}

/*
 * ---------------------------------------------------------------------------
 * Responsive: single-frame slideshow on mobile / narrow screens.
 * ---------------------------------------------------------------------------
 * The JS switches slides-per-view to 1 (setting slide widths inline); here we
 * provide the matching CSS fallback and disable the centre-zoom so a single
 * full-width slide reads cleanly.
 */
@media ( max-width: 782px ) {

	.tum-slider__slide {
		flex-basis: 100%;
		max-width: 100%;
	}

	/* No zoom differential when only one slide is visible. */
	.tum-slider__slide.is-center .tum-slider__frame {
		transform: scale(1);
	}

	.tum-slider__frame {
		transform: scale(1);
	}

	/* Curved mode is not affected by this 782px block — it runs its own
	   cover-flow engine and collapses to a single slide at 640px via the
	   .tum-slider--cf-mobile class (see the curved section above). */
}

/*
 * ---------------------------------------------------------------------------
 * Reduced motion: honour the visitor's OS preference by removing transitions.
 * The JS also disables autoplay in this case.
 * ---------------------------------------------------------------------------
 */
@media ( prefers-reduced-motion: reduce ) {

	.tum-slider__track,
	.tum-slider__slide,
	.tum-slider__frame,
	.tum-slider__content,
	.tum-slider__nav {
		transition: none !important;
	}
}