.callout {
	
	--callout-overlay: transparent;
	
	--scaleAmount: 1.2;
	
	--offsetAmount: -.5rem;
	--absOffsetAmount: .5rem;
	--doubleOffsetAmount: -1rem;
	--absDoubleOffsetAmount: 1rem;
	
	color: var(--callout-text);
	text-align: center;
	font-size: var(--content-size);
	
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
	
	overflow: visible;/* for tags */
	
	position: relative;
	top: 0;
	left: 0;
	
	margin-bottom: var(--itemSpacing);
}
.callout.big {
	--offsetAmount: -1rem;
	--absOffsetAmount: 1rem;
}
.callout.overlay {
	--callout-overlay: var(--callout-shift);
	--offsetAmount: -.5rem;
	--absOffsetAmount: .5rem;
}
.callout.top,
.callout.top > a,
.callout.top > a:visited,
.callout.top > a:active,
.callout.top > a:hover {
	flex-direction: column-reverse;
	-webkit-flex-direction: column-reverse;
	-moz-flex-direction: column-reverse;
}
.callout.left,
.callout.left > a,
.callout.left > a:visited,
.callout.left > a:active,
.callout.left > a:hover {
	flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	-moz-flex-direction: row-reverse;
}
.callout.right,
.callout.right > a,
.callout.right > a:visited,
.callout.right > a:active,
.callout.right > a:hover {
	flex-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
}

.callout > a,
.callout > a:visited,
.callout > a:active,
.callout > a:hover {
	color: var(--callout-text);
	
	flex-grow: 1;
	-webkit-flex-grow: 1;
	-moz-flex-grow: 1;
	
	width: 100%;
	
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
	
	cursor: pointer;
}









.callout .thumb {
	
	flex-shrink: 0;
	-webkit-flex-shrink: 0;
	-moz-flex-shrink: 0;
	
	width: 100%;
	height: 10rem;
	
	overflow: hidden;
	
	position: relative;
	top: 0;
	left: 0;
	z-index: 5;
	
	transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition-property: height;
	-webkit-transition-property: height;
	-moz-transition-property: height;
}
.callout.overlay .thumb {
	position: absolute;
	
	height: 100%;
}
.callout.left .thumb,
.callout.right .thumb {
	flex-basis: 25%;
	-webkit-flex-basis: 25%;
	-moz-flex-basis: 25%;
	
	width: 25%;
	height: 100%;
}
.callout.big.left .thumb,
.callout.big.right .thumb {
	flex-basis: 50%;
	-webkit-flex-basis: 50%;
	-moz-flex-basis: 50%;
	
	width: 50%;
}

.callout .thumb > .loader {
	z-index: 1;
	
	--overlay: transparent;
}

.callout .thumb > .overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 7;
	
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	
	width: 100%;
	height: 100%;
	
	background-color: var(--callout-overlay);
}

.callout .thumb > header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	
	width: 100%;
	height: 100%;
	
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
}

.callout .thumb > img {
	
	--offsetAmount: var(--doubleOffsetAmount);
	--absOffsetAmount: var(--absDoubleOffsetAmount);
	
	/*
	background-size: cover;
	background-position: center center;
	background-blend-mode: normal multiply normal;
	*/
	object-fit: cover;
	
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	
	width: 100%;
	height: 100%;
	
	transform: scale3d(1, 1, 1);
	-webkit-transform: scale3d(1, 1, 1);
	-moz-transform: scale3d(1, 1, 1);
	
	transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition-property: transform;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
}
@media (hover: hover) {
	.callout:hover .thumb > img {
		transform: scale3d(var(--scaleAmount), var(--scaleAmount), 1);
		-webkit-transform: scale3d(var(--scaleAmount), var(--scaleAmount), 1);
		-moz-transform: scale3d(var(--scaleAmount), var(--scaleAmount), 1);
	}
}

.callout .thumb .loader.overlay {
	background-color: var(--body-shift);
}

.callout .thumb .icon_overlay {
	background-color: var(--body-shift);
	
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	
	width: 100%;
	height: 100%;
	
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
}
.callout .thumb .icon_overlay i {
	font-size: 3rem;
}









/*
CALLOUT ARTICLE
*/
.callout article {
	
	--vPadding: 2rem;
	--hPadding: 2rem;
	
	background-color: var(--callout);
	
	position: relative;
	top: 0;
	left: 0;
	z-index: 10;
	
	flex-grow: 1;
	-webkit-flex-grow: 1;
	-moz-flex-grow: 1;
	
	padding: var(--vPadding) var(--hPadding);
	
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
}
.callout.left article,
.callout.right article {
	--vPadding: 1.5rem;
}
.callout.big.left article,
.callout.big.right article {
	--vPadding: 2rem;
}
.callout.overlay article {
	background-color: transparent;
}
.callout.bigBtn article {
	
	justify-content: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
}


.callout article > * {
	
	position: relative;
	top: 0;
	left: 0;
	z-index: 5;
	
	width: 100%;
}

.callout article header,
.callout article .content {
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	
	transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition-property: transform;
	-webkit-transition-property: transform;
	-moz-transition-property: transform;
}
@media (hover: hover) {
	.callout:hover article header,
	.callout:hover article .content {
		transform: translate3d(0, var(--offsetAmount), 0);
		-webkit-transform: translate3d(0, var(--offsetAmount), 0);
		-moz-transform: translate3d(0, var(--offsetAmount), 0);
	}
}

/* HEADER */
.callout article header {
	/*padding-bottom: .75rem;
	border-bottom: 2px dotted #fff;*/
	margin-bottom: .75rem;
}
.callout article header:last-child {
	/*padding-bottom: 0;
	border-bottom: 0;*/
	margin-bottom: 0;
}

/* MAIN CONTENT */
.callout article .content {
	
	padding-top: .75rem;
	border-top: 2px dotted #fff;
	margin-bottom: 2rem;
	
	flex-grow: 1;
	-webkit-flex-grow: 1;
	-moz-flex-grow: 1;
	
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
}
.callout article .content:first-child {
	padding-top: 0;
	border-top: 0;
}
.callout article .content:last-child,
.callout.left article .content:last-child,
.callout.right article .content:last-child,
.callout.overlay article .content:last-child {
	margin-bottom: 2rem;
}
.callout.left article .content,
.callout.right article .content,
.callout.overlay article .content,
.callout.bigBtn article .content {
	flex-grow: 0;
	-webkit-flex-grow: 0;
	-moz-flex-grow: 0;
}
.callout.left article .content,
.callout.right article .content {
	margin-bottom: .5rem;
}
.callout.big.left article .content,
.callout.big.right article .content {
	margin-bottom: 2rem;
}
.callout.overlay article .content {
	margin-bottom: 1rem;
}

.callout article h1 {
	font-size: 1.75rem;
	
	margin-bottom: 0;
}
.callout.big article h1 {
	font-size: var(--h1-size-big);
}

.callout article h2 {
	
}

.callout.lineclamp article p,
.callout.lineclamp article figcaption,
.callout.lineclamp article .content {
	
	--lineNum: 6;
	
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: var(--lineNum);
	line-clamp: var(--lineNum);
	-webkit-box-orient: vertical;
}
.callout.lineclamp .thumb + article p,
.callout.lineclamp .thumb + article figcaption,
.callout.lineclamp .thumb + article .content {
	--lineNum: 3;
}

/* CONTENT ICON */
.callout article i.fa-solid {
	font-size: 3rem;
	margin-bottom: 1rem;
	
	
}

/* CALLOUT ICON */
.callout article .icon {
	position: absolute;
	top: 50%;
	left: auto;
	right: 4rem;
	
	width: auto;
	
	opacity: .1;
	
	font-size: 4rem;
	
	transform: translate3d(0, -50%, 0) rotate(-30deg);
	-webkit-transform: translate3d(0, -50%, 0) rotate(-30deg);
	-moz-transform: translate3d(0, -50%, 0) rotate(-30deg);
}

/* PROMPT */
.callout article .prompt {
	/*margin: 2rem 0 0 0;*/
	margin-bottom: 0;
	
	font-weight: 700;
	text-align: center;
	
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
}
.callout.left article .prompt,
.callout.right article .prompt {
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
	
	text-align: right;
	
	/*margin-top: .5rem;*/
}
.callout.big.left article .prompt,
.callout.big.right article .prompt {
	justify-content: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	
	text-align: center;
	
	/*margin-top: 2rem;*/
}

/* PROMPT LABEL */
.callout article .prompt .label {
	position: relative;
	top: 0;
	left: 0;
	
	display: inline-block;
}

.callout article .prompt .label:before {
	content: "";
	
	position: absolute;
	bottom: -.5rem;
	left: 0;
	
	width: 0;
	height: 2px;
	
	background-color: var(--callout-text);
	
	transition: width .3s ease-out;
	-webkit-transition: width .3s ease-out;
	-moz-transition: width .3s ease-out;
}
@media (hover: hover) {
	.callout:hover article .prompt .label:before {
		width: 100%;
	}
}

/* PROMPT ICON */
.callout article .prompt i {
	font-size: 1.25rem;
	
	margin-bottom: 0;
	margin-left: .5rem;
}








/*
CALLOUT TAG
*/
.callout .tag {
	position: absolute;
	top: 2rem;
	left: calc(-1rem + 1px);
	right: auto;
	z-index: 15;
	
	padding: .25rem 2rem;
	
	font-size: 1rem;
	color: #000;
	text-transform: uppercase;
	
	background-color: var(--focus);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.callout .tag.right {
	left: auto;
	right: -1rem;
}
.callout .tag:after {
	content: "";
	
	width: 0;
	height: 0;
	
	position: absolute;
	top: 100%;
	left: 0;
	right: auto;
	
	border-style: solid;
	border-width: 0 1rem 1rem 0;
	border-color: transparent var(--focus-alt) transparent transparent;
}
.callout .tag.right {
	left: auto;
	right: 0;
	
	border-width: 1rem 1rem 0 0;
	border-color: var(--focus-alt) transparent transparent transparent;
}