.pointy .callout .thumb > .inner,
.pointy .callout.top .thumb > .inner,
.pointy .callout.bottom .thumb > .inner,
.pointy .callout.overlay .thumb > .inner {
	height: calc(100% + var(--absOffsetAmount));
	
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
}
.pointy .callout.left .thumb > .inner,
.pointy .callout.right .thumb > .inner {
	width: calc(100% + var(--absOffsetAmount));
	height: 100%;
	
	transform: translate3d(var(--offsetAmount), 0, 0);
	-webkit-transform: translate3d(var(--offsetAmount), 0, 0);
	-moz-transform: translate3d(var(--offsetAmount), 0, 0);
}
@media (hover: hover) {
	.pointy .callout:hover .thumb > .inner,
	.pointy .callout.bottom:hover .thumb > .inner {
		transform: translate3d(0, var(--offsetAmount), 0);
		-webkit-transform: translate3d(0, var(--offsetAmount), 0);
		-moz-transform: translate3d(0, var(--offsetAmount), 0);
	}
	.pointy .callout.left:hover .thumb > .inner,
	.pointy .callout.right:hover .thumb > .inner {
		transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
	}
}








.pointy .callout article {
	--arrowOffset: 2rem;
	--negArrowOffset: -2rem;
	--halfArrowOffset: 1rem;
	--arrowAndHalfOffset: 3rem;
	--negArrowAndHalfOffset: -3rem;
	
	overflow: hidden;
	
	padding-top: calc(var(--vPadding) + var(--arrowAndHalfOffset));
	margin-top: var(--negArrowAndHalfOffset);
	
	clip-path: polygon(
		0% var(--arrowAndHalfOffset),
		50% var(--arrowAndHalfOffset),
		100% var(--arrowAndHalfOffset),
		100% 100%,
		0% 100%
	);
	
	transition: clip-path .3s ease-out;
	-webkit-transition: clip-path .3s ease-out;
	-moz-transition: clip-path .3s ease-out;
}
.pointy .callout.big article {
	--arrowOffset: 4rem;
	--negArrowOffset: -4rem;
	--halfArrowOffset: 2rem;
	--arrowAndHalfOffset: 6rem;
	--negArrowAndHalfOffset: -6rem;
}
.pointy .callout.left article {
	padding-top: var(--vPadding);
	padding-right: calc(var(--hPadding) + var(--arrowAndHalfOffset));
	margin-top: 0;
	margin-right: var(--negArrowAndHalfOffset);
	
	clip-path: polygon(
		0% 0%,
		calc(100% - var(--arrowAndHalfOffset)) 0%,
		calc(100% - var(--arrowAndHalfOffset)) 50%,
		calc(100% - var(--arrowAndHalfOffset)) 100%,
		0% 100%
	);
}
.pointy .callout.left.big article {
	clip-path: polygon(
		0% 0%,
		calc(100% - var(--arrowAndHalfOffset)) 0%,
		calc(100% - var(--halfArrowOffset)) 50%,
		calc(100% - var(--arrowAndHalfOffset)) 100%,
		0% 100%
	);
}
.pointy .callout.right article,
.pointy .callout.overlay article,
.pointy .callout.bigBtn article {
	padding-top: var(--vPadding);
	margin-top: 0;
	
	clip-path: none;
}
@media (hover: hover) {
	.pointy .callout:hover article {
		clip-path: polygon(
			0% var(--arrowOffset),
			50% 0,
			100% var(--arrowOffset),
			100% 100%,
			0% 100%
		);
	}
	.pointy .callout.left:hover article {
		clip-path: polygon(
			0% 0%,
			calc(100% - var(--arrowOffset)) 0%,
			100% 50%,
			calc(100% - var(--arrowOffset)) 100%,
			0% 100%
		);
	}
	.pointy .callout.right:hover article,
	.pointy .callout.overlay:hover article,
	.pointy .callout.bigBtn:hover article {
		clip-path: none;
	}
}

/* OVERLAY ARROW */
.pointy .callout article:after {
	content: "";
	
	background-color: var(--callout-shift);
	
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	
	width: 100%;
	height: calc(100% - var(--arrowOffset));
	
	clip-path: polygon(
		0% calc(100% + var(--arrowOffset)),
		50% 100%,
		100% calc(100% + var(--arrowOffset)),
		100% 200%,
		0% 200%
	);
	
	transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition-property: clip-path;
	-webkit-transition-property: clip-path;
	-moz-transition-property: clip-path;
}
.pointy .callout.left article:after,
.pointy .callout.right article:after {
	
	height: 100%;
	width: calc(100% - var(--arrowOffset));
	
	clip-path: polygon(
		-100% 0%,
		var(--negArrowOffset) 0%,
		0% 50%,
		var(--negArrowOffset) 100%,
		-100% 100%
	);
	
	transition-duration: .45s;
	-webkit-transition-duration: .45s;
	-moz-transition-duration: .45s;
}
.pointy .callout.big.left article:after,
.pointy .callout.big.right article:after {
	
	/*width: calc(100% - var(--halfArrowOffset));*/
	
	transition-duration: .3s;
	-webkit-transition-duration: .3s;
	-moz-transition-duration: .3s;
}
@media (hover: hover) {
	.pointy .callout:hover article:after {
		clip-path: polygon(
			0% var(--arrowOffset),
			50% 0%,
			100% var(--arrowOffset),
			100% 100%,
			0% 100%
		);
	}
	
	.pointy .callout.left:hover article:after,
	.pointy .callout.right:hover article:after {
		clip-path: polygon(
			0% 0%,
			calc(100% - var(--arrowOffset)) 0%,
			100% 50%,
			calc(100% - var(--arrowOffset)) 100%,
			0% 100%
		);
	}
}