/* Compliance Knowledge Hub :: Front-end */

.ck-section {
	--ck-hs: 1;
	--ck-bs: 1;
	--ck-per: var( --ck-per-set, 6 );
	--ck-image-s: 1;
	--ck-image-h: calc( var( --ck-image-h-set, 244px ) * var( --ck-image-s ) );
	--ck-gutter: calc( ( var( --ck-canvas, 1440px ) - var( --ck-content, 1200px ) ) / 2 );

	width: 100%;
	padding: var( --ck-pad-y, 60px ) 0;
	margin-bottom: var( --ck-gap-bottom, 0px );
	background-color: var( --ck-section-bg, #FFFFFF );
	font-family: 'Google Sans', sans-serif;
	box-sizing: border-box;
}
.ck-section * { box-sizing: border-box; }

.ck-container {
	max-width: var( --ck-canvas, 1440px );
	margin: 0 auto;
	padding: 0 var( --ck-gutter );
}

/* Theme reset guards */
.ck-section h2,
.ck-section h3,
.ck-section p { margin: 0; padding: 0; }
.ck-section h2,
.ck-section h3 { font-family: inherit; letter-spacing: 0; }
.ck-section a { box-shadow: none; text-decoration: none; }
.ck-section button {
	font: inherit;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.ck-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* Headline block */

.ck-head { text-align: center; }

.ck-heading {
	font-family: 'Anybody', sans-serif !important;
	font-weight: 700;
	line-height: 1.025;
	text-transform: uppercase;
	color: var( --ck-heading, #333333 );
	font-size: max( 24px, calc( var( --ck-heading-fs, 40px ) * var( --ck-hs ) ) );
}

.ck-subtitle {
	font-style: italic;
	font-weight: 400;
	line-height: 1.25;
	color: var( --ck-subtitle, #333333 );
	font-size: max( 14px, calc( var( --ck-subtitle-fs, 20px ) * var( --ck-hs ) ) );
}

.ck-head .ck-intro {
	max-width: var( --ck-intro-w, 982px );
	margin: 20px auto 0;
	font-weight: 400;
	line-height: 1.25;
	color: var( --ck-intro, #9F9F9F );
	font-size: max( 13px, calc( var( --ck-intro-fs, 20px ) * var( --ck-bs ) ) );
}

/* The slider */

.ck-slider {
	position: relative;
	margin-top: 30px;
}

.ck-viewport {
	overflow: hidden;
	padding: 6px;
	margin: -6px;
}

.ck-track {
	display: flex;
	align-items: stretch;
	gap: var( --ck-gap, 20px );
	will-change: transform;
	transition: transform .6s cubic-bezier( .22, .8, .26, 1 );
}

.ck-card {
	flex: 0 0 calc( ( 100% - ( ( var( --ck-per, 3 ) - 1 ) * var( --ck-gap, 20px ) ) ) / var( --ck-per, 3 ) );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var( --ck-card-bg, #FFFFFF );
	border: 1px solid var( --ck-card-border, #E5E5E5 );
	border-radius: var( --ck-card-radius, 20px );
}

.ck-shot {
	flex: 0 0 auto;
	width: 100%;
	height: var( --ck-image-h, 244px );
	overflow: hidden;
	background: #F1F2F5;
}
.ck-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ck-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 14px var( --ck-card-pad, 20px ) var( --ck-card-pad, 20px );
}

.ck-date {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	line-height: 1.25;
	color: var( --ck-date, #9F9F9F );
	font-size: max( 12px, calc( var( --ck-date-fs, 16px ) * var( --ck-bs ) ) );
}
.ck-cal { flex: 0 0 auto; width: 20px; height: 20px; }

.ck-title {
	font-weight: 500;
	line-height: 1.286;
	color: var( --ck-title, #333333 );
	font-size: max( 12px, calc( var( --ck-title-fs, 14px ) * var( --ck-bs ) ) );
}

.ck-btn {
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --ck-btn-min, 157px );
	min-height: var( --ck-btn-h, 46px );
	padding: 0 24px;
	border-radius: var( --ck-btn-radius, 13px );
	font-weight: 600;
	line-height: 1.28;
	white-space: nowrap;
	color: var( --ck-btn-text, #FFFFFF );
	font-size: max( 13px, calc( var( --ck-btn-fs, 18px ) * var( --ck-hs ) ) );
	background-image: linear-gradient( 90deg, var( --ck-btn-from, #2663EB ) 0%, var( --ck-btn-to, #773DED ) 100% );
	transition: transform .2s ease, box-shadow .2s ease;
}
.ck-body .ck-title {
	margin-top: 11px;
	margin-bottom: 18px;
}

.ck-btn:hover,
.ck-btn:focus {
	color: var( --ck-btn-text, #FFFFFF );
	transform: translateY( -2px );
	box-shadow: 0 10px 22px rgba( 37, 99, 235, .28 );
}

.ck-btn--idle { cursor: default; }
.ck-btn--idle:hover { transform: none; box-shadow: none; }

/* Grab and drag */
.ck-viewport.is-grabbable { cursor: grab; touch-action: pan-y; }
.ck-viewport.is-grabbing { cursor: grabbing; }
.ck-viewport.is-grabbing,
.ck-viewport.is-grabbing * { user-select: none; -webkit-user-select: none; }
.ck-viewport img,
.ck-viewport a { -webkit-user-drag: none; }

/* Arrows */
.ck-section .ck-arrow {
	position: absolute;
	top: calc( var( --ck-image-h, 244px ) * .82 );
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --ck-arrow-size, 40px );
	height: var( --ck-arrow-size, 40px );
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --ck-arrow-bg, #F8F4FF );
	color: var( --ck-arrow-color, #773EED );
	cursor: pointer;
	transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.ck-arrow:hover { transform: scale( 1.08 ); box-shadow: 0 6px 16px rgba( 119, 62, 237, .18 ); }
.ck-arrow svg { width: 24px; height: 24px; }
.ck-arrow-prev { left: calc( var( --ck-arrow-size, 40px ) * -.55 ); }
.ck-arrow-next { right: calc( var( --ck-arrow-size, 40px ) * -.55 ); }
.ck-arrow:disabled { opacity: 0; pointer-events: none; transform: none; }

/* REVEAL - "the aperture" */

.ck-js .ck-rv { opacity: 0; }

/* Headline */
.ck-js .ck-rv--rise.ck-rv-in {
	animation: ck-rise .7s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( var( --ck-rv-i, 0 ) * 85ms );
}
@keyframes ck-rise {
	0% { opacity: 0; transform: translate3d( 0, 20px, 0 ); filter: blur( 4px ); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: translate3d( 0, 0, 0 ); filter: none; }
}

/* The aperture */
.ck-js .ck-slider.ck-rv-in { opacity: 1; }

.ck-card { --ck-turn: calc( var( --ck-rv-i, 0 ) * 130ms ); }

.ck-js .ck-slider .ck-card { opacity: 0; }
.ck-js .ck-slider.ck-rv-in .ck-card {
	animation: ck-card-in .5s ease both;
	animation-delay: var( --ck-turn );
}
@keyframes ck-card-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.ck-js .ck-slider .ck-shot img { clip-path: circle( 0% at 50% 50% ); }
.ck-js .ck-slider.ck-rv-in .ck-shot img {
	animation: ck-aperture .8s cubic-bezier( .3, .8, .3, 1 ) both;
	animation-delay: var( --ck-turn );
}
@keyframes ck-aperture {
	0% {
		clip-path: circle( 0% at 50% 50% );
		filter: brightness( 1.15 );
	}
	100% {
		clip-path: circle( 75% at 50% 50% );
		filter: brightness( 1 );
	}
}

.ck-js .ck-slider .ck-date,
.ck-js .ck-slider .ck-title,
.ck-js .ck-slider .ck-btn { opacity: 0; }
.ck-js .ck-slider.ck-rv-in .ck-date {
	animation: ck-settle .45s ease both;
	animation-delay: calc( var( --ck-turn ) + 340ms );
}
.ck-js .ck-slider.ck-rv-in .ck-title {
	animation: ck-settle .45s ease both;
	animation-delay: calc( var( --ck-turn ) + 420ms );
}
.ck-js .ck-slider.ck-rv-in .ck-btn {
	animation: ck-settle .45s ease both;
	animation-delay: calc( var( --ck-turn ) + 520ms );
}
@keyframes ck-settle {
	0%   { opacity: 0; transform: translate3d( 0, 10px, 0 ); }
	100% { opacity: 1; transform: translate3d( 0, 0, 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.ck-js .ck-rv,
	.ck-js .ck-rv.ck-rv-in,
	.ck-js .ck-slider .ck-card,
	.ck-js .ck-slider .ck-date,
	.ck-js .ck-slider .ck-title,
	.ck-js .ck-slider .ck-btn {
		opacity: 1;
		transform: none;
		filter: none;
		animation: none !important;
	}
	.ck-js .ck-slider .ck-shot img { clip-path: none; animation: none !important; }
	.ck-track, .ck-card, .ck-btn, .ck-arrow { transition: none !important; }
}

/* Breakpoints */

@media ( max-width: 1439px ) {
	.ck-section { --ck-gutter: clamp( 40px, 6vw, 120px ); }
	.ck-arrow-prev { left: 6px; }
	.ck-arrow-next { right: 6px; }
}

@media ( max-width: 1200px ) {
	.ck-section { --ck-hs: .9; --ck-bs: .95; }
}

@media ( max-width: 1024px ) {
	.ck-section { --ck-hs: .82; --ck-bs: .92; --ck-per: 2; --ck-image-s: .86; padding: 48px 0; }
}

@media ( max-width: 700px ) {
	.ck-section { --ck-hs: .7; --ck-bs: .95; --ck-per: 1; --ck-image-s: .9; }
}

@media ( max-width: 600px ) {
	.ck-section { --ck-gutter: 20px; padding: 40px 0; }
}

@media ( max-width: 400px ) {
	.ck-section { --ck-hs: .64; --ck-bs: .9; --ck-gutter: 16px; }
}