/**
 * -----------------------------------------------------------------------------
 * M A I N . C S S
 * -----------------------------------------------------------------------------
 * File Name:        public/assets/main.css
 * Description:      Main stylesheet for the project.
 * Author:           brandgrad°
 * Author URI:       https://www.brandgrad.com
 * Version:          1.0.0
 * Created:          2026-06-05
 * Last Updated:     2026-06-05
 *
 */
:root{
	--color-none           : transparent;
	--color-white          : rgb( 255, 255, 255 );
	--color-ceramic        : rgb( 239, 239, 239 );
	--color-champaign      : rgb( 224, 213, 187 );
	--color-crimson        : rgb( 231,  51,  49 );
	--color-granite        : rgb( 135, 145, 154 );
	--color-midnight       : rgb(  29,  36,  46 );
	--color-black          : rgb(   0,   0,   0 );

	--font-weight-regular  : 400;
	--font-weight-medium   : 500;
	--font-weight-semibold : 600;
	--font-weight-bold     : 700;
}

body.layout-debug * { border : 1px solid rgb(250,0,0) }
body.layout-debug * * { border : 1px solid rgb(200,50,0) }
body.layout-debug * * * { border : 1px solid rgb(150,100,0) }
body.layout-debug * * * * { border : 1px solid rgb(100,150,0) }
body.layout-debug * * * * * { border : 1px solid rgb(50,200,0) }
body.layout-debug * * * * * * { border : 1px solid rgb(0,250,0) }
body.layout-debug * * * * * * * { border : 1px solid rgb(0,200,50) }
body.layout-debug * * * * * * * * { border : 1px solid rgb(0,150,100) }
body.layout-debug * * * * * * * * * { border : 1px solid rgb(0,100,150) }
body.layout-debug * * * * * * * * * * { border : 1px solid rgb(0,50,200) }
body.layout-debug * * * * * * * * * * * { border : 1px solid rgb(0,0,250) }

/* =============================================================== *\

	TYPO & GENERAL STYLING

\* =============================================================== */

body{
	font-family : 'Poppins';
	font-size   : 16px;
	line-height : 1.5em;
	color       : var(--color-midnight);
	/*
	max-width   : 100%;
	overflow-x:hidden;
	*/
}

h1, .h1{
	font-size   : 2rem;
	line-height : 1.25em;
	font-weight : 500;
}
	@media screen and ( max-width : 560px )
	{
		h1, .h1{
			font-size   : 1.5rem;
			line-height : 1.25em;
			font-weight : 500;
		}
	}

p{
	margin      : 0px 0px 2.0em 0px;
	line-height : 2.0em;
}
p:last-child{
	margin-bottom : 0px;
}

p:has(+ ul),
p:has(+ ul){
	margin : 0px 0px 1.0em 0px;
}

ul,
ol{
	margin      : 0px 0px 2.0em 0px;
	padding     : 0px 0px 0px 20px;
}
	ul:last-child,
	ol:last-child{
		margin      : 0px 0px 0px 0px;
	}
ul li,
ol li{
	margin      : 0px 0px 1.0em 0px;
	line-height : 2.0em;
}
ol li::marker{
	font-weight : var( --font-weight-semibold );
}

a{
	color                     : var(--color-black);
	font-weight               : var(--font-weight-medium);
	text-decoration           : underline dashed var(--color-crimson);
	text-decoration-thickness : 2px;
	text-underline-offset     : 2px;
	transition                : all 250ms;
}
	a:hover{
		color                 : var(--color-crimson);
		text-underline-offset : 6px;
	}

a.link--simple{
	text-transform            : uppercase;
	text-decoration           : underline dashed transparent;
	text-decoration-thickness : 2px;
	text-underline-offset     : 2px;
}


.ui-link{
	text-decoration : none;
	font-size       : 1rem;
	font-weight     : var( --font-weight-semibold );
	color           : var( --color-midnight );
}
.ui-link--back{}


.color-red{
	color : var(--color-crimson) !important;
}

button, .button{
	font-weight      : var( --font-weight-bold );
	color            : var( --color-ceramic );
	background-color : var( --color-crimson );
	cursor           : pointer;
}

/* =============================================================== *\

	CUSTOM GRID

\* =============================================================== */

layout-container{
	display         : flex;
	flex-wrap       : wrap;
	justify-content : center;
	max-width       : 100%;
}
	layout-row{
		flex            : 0 0 1280px;
		width           : 1280px;
		
		flex            : 0 0 1000px;
		width           : 1000px;
		
		max-width       : calc( 100% - 40px );
		flex-wrap       : wrap;
		display         : flex;
		justify-content : space-between;
	}
		@media screen and ( max-width : 1280px )
		{
			layout-row{
				flex  : 0 0 calc( 100% - 40px - 40px );
				width : calc( 100% - 40px - 40px );
			}
		}


	layout-column{
		flex       : 1 0 0;
		max-width  : 100%;
		min-height : 1px;
		display : block;
	}

	[hide-on="mobile"]{}
	@media screen and ( max-width : 1280px )
	{
		[hide-on="mobile"]{ display : none !important; }
	}
	[hide-on="desktop"]{}
	@media screen and ( min-width : 1280px )
	{
		[hide-on="desktop"]{ display : none !important; }
	}

/* =============================================================== *\

	GENERAL LAYOUTS & CONTENT ELEMENTS

\* =============================================================== */

/* --------------------- *\
	NAVBAR
\* --------------------- */
#navbar{}
.navbar{
	position         : fixed;
	left             : 0px;
	top              : 0px;
	z-index          : 99;
	width            : 100%;
	max-width        : 100%;
	height           : var( --navbar-height );
	max-height       : var( --navbar-height );
	color            : var( --color-ceramic );
	background-color : var( --color-midnight );
}

	.navbar__spacer{
		display          : block;
		width            : 100%;
		max-width        : 100%;
		height           : var( --navbar-height );
		max-height       : var( --navbar-height );
		overflow         : hidden;

	}
	.navbar__container{
		display          : flex;
		height           : var( --navbar-height );
	}

	.navbar__column{}
	.navbar__column-logo{
		flex            : 1 1 190px;
		display         : flex;
		justify-content : flex-start;
		align-items     : center;
	}
	.navbar__column-menu{
		flex: 1 1 calc(100% - 190px);
	}

	.navbar__logo-link{
		display : inline-block;

	}
	.navbar__logo-link{
		color                     : var(--color-ceramic);
		font-weight               : var(--font-weight-semibold);
		text-decoration           : none;
		background-color          : transparent;
	}

	.navbar__logo-image{
		height     : 30px;
		width      : auto;
		transition : all 250ms;
	}
		.page-is-top.screen-is-desktop.logo-is-toggable .navbar__logo-image{
			transform  : translateY(50px);
			opacity    : 0;
		}
		.page-is-scrolled.screen-is-desktop.logo-is-toggable .navbar__logo-image{
			transform  : translateY(0px);
			opacity    : 1;
		}

	.navbar__mobile-wrapper{
		display         : flex;
		justify-content : flex-end;
		align-items     : center;
		height          : var( --navbar-height );
	}
		body:not(.offCanvas--shown) .icon-show-menu{
			display : inline;
		}
		body.offCanvas--shown .icon-show-menu{
			display : none;
		}
		
		body:not(.offCanvas--shown) .icon-close-menu{
			display : none;
		}
		body.offCanvas--shown .icon-close-menu{
			display : inline;
		}

	.navbar__button-mobile-menu{
		display      : block;
		width        : 35px;
		height       : 35px;
		aspect-ratio : 1/1;
		border       : none !important;
	}

	/* -- MAIN MENU */
	.navbar ul.main-menu{
		margin          : 0px 0px 0px 0px;
		padding         : 0px 0px 0px 0px;
		display         : flex;
		justify-content : flex-end;
		list-style      : none;
		height          : var( --navbar-height );
		max-height      : var( --navbar-height );
	}

	.navbar ul.main-menu *{
		color           : var( --color-ceramic );
		text-decoration : none;
	}

	.navbar ul.main-menu > li{
		position   : relative;
		display    : block;
		height     : var( --navbar-height );
		max-height : var( --navbar-height );
	}

	.navbar ul.main-menu > li > a {
		margin           : 0px 0px 0px 0px;
		padding          : 0px 15px 0px 15px;
		display          : block;
		height           : var( --navbar-height );
		max-height       : var( --navbar-height );
		line-height      : var( --navbar-height );
		font-size        : 1rem;
		text-transform   : uppercase;
		text-align       : center;
		font-weight      : var( --font-weight-medium );
		background-color : transparent;
		cursor           : pointer;
	}
		.navbar ul.main-menu > li > a:hover{
			background-color : var( --color-crimson );
		}
		.navbar ul.main-menu > li > a:hover i{
			color : var( --color-white ) !important;
		}

	/* -- SUBMENU */
	.main-menu__sub-menu{
		display          : none;
		position         : absolute;
		top              : var( --navbar-height );
		padding          : 10px 0px 80px 0px;
		/* -- does not work in Firefox, thanks Obama.
		left             : calc( attr(data-pos-x px) * -1 );
		padding-left     : calc( attr(data-pos-x px) *  1 );
		*/
		left             : calc( var(--pos-x) * -1 );
		padding-left     : calc( var(--pos-x) *  1 );
		width            : 100vw;
		max-width        : 100vw;
		overflow         : hidden;
		z-index          : 99;
		background-color : var(--color-black);
	}
		.navbar ul.main-menu > li:hover > .main-menu__sub-menu{ display : block; }

	.main-menu__sub-menu ul{
		margin          : 0px 0px 0px 0px;
		padding         : 0px 0px 0px 0px;
		list-style-type : none;
	}
	.main-menu__sub-menu ul > li{}
	.main-menu__sub-menu ul > li > a{
		display          : block;
		padding          : 6px 10px 6px 15px;
		background-color : transparent;
	}
		.main-menu__sub-menu ul > li > a:hover{
			background-color : var( --color-crimson );
		}
		.main-menu__sub-menu ul > li > a:hover i{
			color : var( --color-white ) !important;
		}
/* --------------------- *\
	OFFCANVAS /
	MOBILE MENU
\* --------------------- */
/* -- Off-Canvas Layer */
.offCanvas{
	position         : fixed;
	left             : 0px;
	top              : 0px;
	margin           : 0px 0px 0px 0px;
	padding          : 110px 40px 40px 40px;
	display          : flex;
	flex-direction   : column;
	justify-content  : space-between;
	width            : 100%;
	max-width        : 100%;
	height           : 100dvh;
	max-height       : 100dvh;
	z-index          : 90;
	background-color : var( --color-black );
	overflow         : hidden;

	/* -- Fly-in/-out Transition */
	transition       : transform 250ms, opacity 250ms;
	transform        : translateX( 100% );
	opacity          : 0;
}

	body.offCanvas--shown .offCanvas{
		transform : translateX( 0vw );
		opacity   : 1;
	}
	body.offCanvas--shown{
		max-width  : 100%;
		max-height : 100dvh;
		overflow   : hidden;
	}

	/* -- Mobile Menu */
	.mobileMenu{
		margin     : 0px 0px 0px 0px;
		padding    : 0px 0px 0px 0px;
		list-style : none;
	}

	.mobileMenu li{
		display : block;
	}

	.mobileMenu li a{
		display         : block;
		padding         : 10px 0px 10px 0px;
		font-weight     : var( --font-weight-semibold );
		color           : var( --color-ceramic );
		text-decoration : none;
		text-transform  : uppercase;
	}

	.mobileMenu__sub-menu li a{
		font-weight     : var( --font-weight-regular );
	}

	/* -- Mobile Language Switch */
	.mobileLanguageSwitch{
		margin     : 0px 0px 0px 0px;
		padding    : 0px 0px 0px 0px;
		list-style : none;
		display    : flex;
		color      : var( --color-ceramic );
	}

	.mobileLanguageSwitch .mobileLanguageSwitch__language,
	.mobileLanguageSwitch .mobileLanguageSwitch__divider{
		margin          : 0px 0px 0px 0px;
		padding         : 10px 20px 10px 0px;
		display         : block;
		color           : var( --color-ceramic );
		text-decoration : none;
		text-transform  : uppercase;
	}


/* --------------------- *\
	TOPIC SELECTION
\* --------------------- */
/* -- Desktop */
.topics-selection{
	margin          : 0px 0px 0px 0px;
	padding         : 0px 0px 0px 0px;
	list-style      : none;
	display         : flex;
	flex-wrap       : wrap;
	justify-content : flex-start;
	align-items     : center;
}
	@media screen and ( max-width : 820px )
	{
		.topics-selection{ display : none !important; }
	}

	.topics-selection__topic-wrapper{
		margin          : 0px 0px 0px 0px;
		padding         : 0px 0px 0px 0px;
	}
	.topics-selection__topic-link{
		margin          : 0px 0px 0px 0px;
		padding         : 1rem 0.5rem 1rem 0.5rem;
		display         : block;
		font-weight     : var( --font-weight-regular );
		text-transform  : uppercase;
		text-decoration : none;
	}
	.topics-selection__topic-wrapper:first-child .topics-selection__topic-link{
		padding-left : 0rem;
	}
	.topics-selection__topic-link.active{
		font-weight : var( --font-weight-semibold );
	}

	@media screen and ( max-width : 560px )
	{
		.topics-selection{
			display : block;
		}
		.topics-selection__topic-link{
			margin          : 0px 0px 0px 0px;
			padding         : 0.25rem 0.5rem 0.25rem 0.0rem;
			display         : block;
			max-width       : 100%;
		}
	}

/* -- Mobile */
.topics-selection-mobile{
	margin    : 0px 0px 1rem 0px;
	display   : none;
	width     : 100%;
	max-width : 100%;
}
	@media screen and ( max-width : 820px )
	{
		.topics-selection-mobile{ display : block; }
	}



/* --------------------- *\
	PAGINATION
\* --------------------- */
.pagination{
	margin          : 0px 0px 0px 0px;
	padding         : 0px 0px 0px 0px;
	list-style      : none;
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	width           : 100%;
	max-width       : 100%;
	text-align      : center;
}
	.pagination__previous-wrapper{}
	.pagination__previous-link{
		margin          : 0px 0px 0px 0px;
		padding         : 1rem 1rem 1rem 1rem;
		display         : block;
		width           : auto;
		text-align      : center;
		border          : 1px solid var(--color-white);
		text-decoration : none;
	}
	.pagination__next-wrapper{}
	.pagination__next-link{
		margin          : 0px 0px 0px 0px;
		padding         : 1rem 1rem 1rem 1rem;
		display         : block;
		width           : auto;
		text-align      : center;
		border          : 1px solid var(--color-white);
		text-decoration : none;
	}


	.pagination__pageselect-wrapper{}
	.pagination__pageselect-select{
		margin          : 0px 0px 0px 0px;
		padding-top     : 1rem;
		padding-bottom  : 1rem;
		width           : 75px;
		text-align      : center;
		appearance      : none;
		outline         : none;
		border          : 1px solid var(--color-white);
	}

/* --------------------- *\
	CONTACT ROW
\* --------------------- */
.contact-row{
	margin           : 0px 0px -2rem 0px;
	padding          : 32px 0px 85px 0px;
	color            : var( --color-ceramic );
	background-color : var( --color-midnight );
}
	.contact-row__inner-wrapper{}
	.contact-column{
		flex : 0 0 50%;
	}
		@media screen and ( max-width : 560px )
		{
			.contact-column{
				flex : 0 0 100%;
			}
		}
	.contact-row__logo-image{
		margin    : 0px 0px 45px 0px;
		padding   : 0px 0px 0px 0px;
		max-width : 280px;
	}

.contact-point{
	margin          : 0px 0px 16px 0px;
	padding         : 0px 0px 0px 0px;
	display         : flex;
	justify-content : flex-start;
	align-items     : flex-start;
}
	.contact-point__icon-column{
		flex : 0 0 32px;
	}
	.contact-point__text-column{
		flex : 1 1 calc( 100% - 32px );
	}
	.contact-point__icon-column *,
	.contact-point__icon-column a,
	.contact-point__text-column *,
	.contact-point__text-column a{
		font-size       : 1rem;
		color           : var( --color-ceramic );
		text-decoration : none;
	}

/* --------------------- *\
	NEWSLETTER
\* --------------------- */

/* -- NEWSLETTER */
.newsletter{
	margin           : 2rem 0px 0px 0px;
	background-color : var(--color-champaign);
}

/* -- -- NEWSLETTER COLUMNS */
.newsletter__column{
	display         : flex;
	justify-content : space-between;
}
	.newsletter__column-content{
		padding : 75px 0px 90px 0px;
		flex    : 0 0 calc( ( 6 / 12 ) * 100% );
		width   : calc( ( 6 / 12 ) * 100% );
	}
	.newsletter__column-form{
		padding : 200px 0px 90px 0px;
		flex    : 0 0 calc( ( 5 / 12 ) * 100% );
		width   : calc( ( 5 / 12 ) * 100% );
	}
		@media screen and ( max-width : 834px )
		{
			.newsletter__column{
				flex-wrap : wrap;
			}
			.newsletter__column-content{
				padding : 32px 0px 32px 0px;
				flex    : 0 0 calc( ( 12 / 12 ) * 100% );
				width   : calc( ( 12 / 12 ) * 100% );
			}
			.newsletter__column-form{
				padding : 0px 0px 32px 0px;
				flex    : 0 0 calc( ( 12 / 12 ) * 100% );
				width   : calc( ( 12 / 12 ) * 100% );
			}
		}


/* -- -- -- NEWSLETTER CONTENT */
.newsletter-content{
}
	.newsletter-content__title{
		font-size   : 2.25rem;
		line-height : 1.25em;
		font-weight : var( --font-weight-semibold );
	}
	.newsletter-content__copy{}


/* -- -- -- NEWSLETTER FORM */
.newsletter-form{
	display   : flex;
	flex-wrap : wrap;
}

	.newsletter-form__submit-message{
   		padding          : 1rem 1rem 1rem 1rem;
		display          : block;
    	max-width        : 100%;
    	border-radius    : 4px;
    	background-color : rgb(19, 130, 0);
    	color            : rgb(130, 130, 130);
	}
	.newsletter-form__submit-message.success{
    	background-color : rgb(19, 130, 0);
    	color            : rgb(255, 255, 255);
	} 
	.newsletter-form__submit-message.error{
		background-color : rgb(130, 0, 0);
    	color            : rgb(255, 255, 255);
	} 


	.newsletter-form__input{}
	.newsletter-form__input-firstname{}
	.newsletter-form__input-lastname{}
	.newsletter-form__input-email{}
	.newsletter-form__input-privacy{}
	.newsletter-form__button{}
	.newsletter-form__button-submit{}

		/* -- Validation States */
		.newsletter-form__input-firstname input.valid{
			border-left   : 1px solid green;
			border-top    : 1px solid green;
			border-bottom : 1px solid green;
		}
		.newsletter-form__input-firstname input.invalid{
			border-left   : 1px solid var(--color-crimson);
			border-top    : 1px solid var(--color-crimson);
			border-bottom : 1px solid var(--color-crimson);
		}
		.newsletter-form__input-lastname input.valid{
			border-right  : 1px solid green;
			border-top    : 1px solid green;
			border-bottom : 1px solid green;
		}
		.newsletter-form__input-lastname input.invalid{
			border-right  : 1px solid var(--color-crimson);
			border-top    : 1px solid var(--color-crimson);
			border-bottom : 1px solid var(--color-crimson);
		}
		.newsletter-form__input-email input.valid{
			border : 1px solid green;
		}
		.newsletter-form__input-email input.invalid{
			border : 1px solid var(--color-crimson);
		}
		.newsletter-form__input-privacy input.valid{
			border : 1px solid green;
		}
		.newsletter-form__input-privacy input.invalid{
			border : 1px solid var(--color-crimson);
		}

	.newsletter-form__input{
		margin   : 0px 0px 0px 0px;
		padding  : 0px 0px 0px 0px;
		display  : block;
		position : relative;
	}

	.newsletter-form__input-firstname,
	.newsletter-form__input-lastname{
		flex  : 0 0 50%;
		width : 50%;
	}
		@media screen and ( max-width : 560px )
		{
			.newsletter-form__input-firstname,
			.newsletter-form__input-lastname{
				flex  : 0 0 100%;
				width : 100%;
			}
		}

	.newsletter-form__input-email,
	.newsletter-form__input-privacy{
		flex  : 0 0 100%;
		width : 100%;
	}

	.newsletter-form__input-text label{
		margin           : 0px 0px 0px 0px;
		padding          : 0px 10px 0px 0px;
		display          : inline-block;
		font-size        : 0.75rem;
		font-weight      : var( --font-weight-semibold );
		opacity          : 0;
		transform        : translateX( 4px ) translateY( 20px );
		transition       : all 150ms;
		background-color : transparent;
	}
		.newsletter-form__input-text:has(input:focus) label{
			opacity   : 1;
			transform : translateX( 4px ) translateY( 0px );
		}
		.asterix{
			color : var( --color-crimson );
		}

	.newsletter-form__input input{
		margin           : 0px 0px 0px 0px;
		padding          : 4px 4px 4px 4px;
		display          : block;
		width            : 100%;
		height           : 38px;
		background-color : rgb( 244, 232, 206 );
		transition       : all 160ms;
		border : none;
		outline : none;
	}
		.newsletter-form__input-text:has(input:focus) input::placeholder{
			opacity : 0;
		}
		.newsletter-form__input input:focus{
			background-color : rgb( 239, 239, 238 );
		}

	.newsletter-form__input-privacy{
		margin          : 16px 0px 16px 0px;
		display         : flex;
		justify-content : space-between;
	}
	.newsletter-form__input-privacy input{
		flex    : 0 0 24px;
		display : block;
		width   : 24px;
		height  : 24px;
		cursor  : pointer;
	}
		.newsletter-form__input-privacy input:focus{
			box-shadow : 0px 0px 5px 1px var(--color-crimson);
		}

	.newsletter-form__input-privacy label{
		flex        : 0 0  calc( 100% - 24px - 16px );
		cursor      : pointer;
		font-size   : 0.75rem;
		line-height : 1.5em;
	}


	.newsletter-form__button-submit{
		margin           : 0px 0px 0px 0px;
		padding          : 4px 10px 4px 10px;
		height           : 38px;
		border           : 0px;
		outline          : 0px;
		font-size        : 1rem;
		font-weight      : var( --font-weight-semibold );
		text-transform   : uppercase;
		color            : var( --color-midnight );
		background-color : var( --color-champaign );
		transition       : all 160ms;
	}
		.newsletter-form__button-submit:hover{
			color            : var( --color-white );
			background-color : var( --color-crimson ); 
		}
		.newsletter-form__button-submit:hover i.color-red{
			color : var(--color-white) !important;
		}

/* --------------------- *\
	FOOTER
\* --------------------- */
.footer{
	background-color : var(--color-midnight);
}
	.footer__content{
		margin           : 0px 0px 0px 0px;
		padding          : 2rem 0px 2rem 0px;
		color            : var(--color-ceramic);
	}
	.footer__content p{
		margin : 0px 0px 0.5rem 0px;
	}
	.footer__content a{
		text-transform   : uppercase;
		text-decoration  : none;
		color            : var(--color-ceramic);
		cursor           : pointer;
	}
	.footer__logo-link{
		margin           : 0px 0px 2rem 0px;
		display          : inline-block;
	}
	.footer__logo-image{
		display : block;
		width   : 155px;
		height  : auto;
	}

	/* -- Footer Menu */
	ul.footer__menu{ 
		margin          : 4rem 0px 0px 0px;
		padding         : 0px 0px 0px 0px;
		list-style-type : none;
	}
	li.footer__menu-item{
		display : block;
		float:left;
	}
		@media screen and ( max-width : 560px )
		{
			li.footer__menu-item{
				float : none;
			}
		}

	a.footer__menu-link{
		margin  : 0px 0px 0px 0px;
		padding : 0px 0px 0px 0px;
		display : inline-block;
	}
		li.footer__menu-item:not(:last-child) a.footer__menu-link::after{
			content: '|';
			display : inline-block;
			padding : 0px 1rem 0px 1rem;
		}
		@media screen and ( max-width : 560px )
		{
			li.footer__menu-item:not(:last-child) a.footer__menu-link::after{
				content: '';
				display : none;
			}
		}
	
	/* -- Black Footer Bar */
	.footer__credit{
		margin           : 0px 0px 0px 0px;
		padding          : 0.5rem 0px 0.5rem 0px;
		color            : var(--color-ceramic);
		background-color : var(--color-black);
	}
	.footer__credit a{
		text-decoration  : none;
		color            : var(--color-ceramic);
	}

/* --------------------- *\
	POST HEAD
\* --------------------- */
.post-head{
	background-color :  var(--color-midnight);
}
	.post-head__row{}
	.post-head__column{
		padding : 40px 0px 40px 0px;
		flex    : 0 0  calc( ( 10/12 * 100 ) * 1% );
		width   : calc( ( 10/12 * 100 ) * 1% )
	}
	.post-head__meta{
		display         : flex;
		justify-content : flex-start;
		align-items     : center;
	}
		.post-head__meta-topics{
			padding          : 2px 24px 2px 12px;
			display          : flex;
			color            : var( --color-ceramic );
			background-color : var( --color-crimson );
			clip-path        : polygon(
									0 0,                      /* -- Top Left     */
									100% 0,                   /* -- Top Right    */
									calc( 100% - 22px ) 100%, /* -- Bottom Right */
									0% 100%                   /* -- Bottom Left  */
								);
		}

		a.meta-topic:not(:last-child){
			margin : 0px 12px 0px 0px;
		}
		img.meta-topic__icon{
			height : 16px;
			width  : auto;
		}

		.post-head__meta-date{
			margin    : 0px 0px 0px 12px;
			font-size : 0.7rem;
			color     : var( --color-granite );
		}

	.post-head__title{
		font-size   : 2.25rem;
		line-height : 1.25em;
		color       : var( --color-ceramic );
	}
		@media screen and ( max-width : 560px )
		{
			.post-head__title{
				font-size   : 1.5rem;
				line-height : 1.25em;
			}
		}


/* --------------------- *\
	POST (CONTENT) LAYOUT
\* --------------------- */
.post{
	margin : 2rem 0px 0px 0px;
}
	.post__row{
		justify-content: space-between;
	}
	.post__column{}
	.post__column-main{
		flex  : 0 0  calc( ( 7/12 * 100 ) * 1% );
		width : calc( ( 7/12 * 100 ) * 1% );
	}
	.post__column-sidebar{
		flex  : 0 0  calc( ( 3/12 * 100 ) * 1% );
		width : calc( ( 3/12 * 100 ) * 1% );
	}
	.post__authors-wrapper{}
		@media screen and ( max-width : 843px )
		{
			.post__column-main,
			.post__column-sidebar{
				flex  : 0 0 100%;
				width : 100%
			}
			.post__authors-wrapper{
				display         : flex;
				flex-wrap       : wrap;
				justify-content : space-between;
			}
			.post__authors-wrapper .author-card__outer-wrapper{
				flex  : 0 0 calc( 50% - 8px );
				width : calc( 50% - 8px )
			}
		}

		@media screen and ( max-width : 560px )
		{
			.post__authors-wrapper .author-card__outer-wrapper{
				flex  : 0 0 100%;
				width : 100%
			}
		}

	.post__column-main * {
		max-width : 100%;
	}

/* --------------------- *\
	Sharing Bar
\* --------------------- */
.sharing-bar{
	margin           : 3rem 0px 0px 0px;
	color            : var( --color-ceramic );
	background-color : var( --color-midnight );
}
	.sharing-bar__inner-wrapper{}
	.sharing-bar__social-link{
		padding : 10px 5px 10px 5px;
		display : inline-block;
		font-size : 1.5rem;
		color : var( --color-ceramic );
		text-decoration: none;
	}

/* --------------------- *\
	Related Posts
\* --------------------- */
.related-posts{
	margin : 0px 0px 0px 0px;
}
	.related-posts__inner-wrapper{
		justify-content : space-between;
		justify-content : flex-start;
	}
	.related-posts__item{
		margin  : 0px 8px 1rem 0px;
		display : flex;
		flex    : 0 0 calc( 33% - 8px );
		width   : calc( 33% - 8px );
	}
		@media screen and ( max-width : 843px )
		{
			.related-posts__item{
				flex  : 0 0 calc( 100% );
				width : calc( 100% );
			}
		}

	@media screen and ( min-width : 1280px )
	{
		.related-posts__item--large{
			flex    : 0 0 calc( 100% - 0px );
			width   : calc( 100% - 0px );
		}
	}

/* --------------------- *\
	Related Authors
\* --------------------- */		
layout-container.related-authors{}
	layout-row.related-authors__inner-wrapper{
		display         : flex;
		flex-wrap       : wrap;
		justify-content : flex-start;
	}
	layout-column.related-authors__item{
		flex      : 0 0 calc( 25% - 16px );
		width     : calc( 25% - 8px );
		display   : flex;
	}
		@media screen and ( min-width : 961px )
		{
			layout-column.related-authors__item:not(:nth-child(4n)){
				margin-right : 16px;
			}
		}
		@media screen and ( max-width : 960px ) and ( min-width : 831px ){
			layout-column.related-authors__item{
				flex      : 0 0 calc( 33% - 16px );
				width     : calc( 33% - 8px );
				display   : flex;
			}
			layout-column.related-authors__item:not(:nth-child(3n)){
				margin-right : 16px;
			}
		}
		@media screen and ( max-width : 830px ) and ( min-width : 521px ){
			layout-column.related-authors__item{
				flex      : 0 0 calc( 50% - 16px );
				width     : calc( 50% - 8px );
				display   : flex;
			}
			layout-column.related-authors__item:not(:nth-child(2n)){
				margin-right : 16px;
			}
		}
		@media screen and ( max-width : 521px ) {
			layout-column.related-authors__item{
				flex      : 0 0 calc( 100% - 0px );
				width     : calc( 100% - 0px );
				display   : flex;
			}
		}


/* --------------------- *\
	Author Card
\* --------------------- */
.author-card__outer-wrapper{
	margin              : 0px 0px 22px 0px;
	padding             : 0px 0px 0px 0px;
	display : flex;
}
.author-card{
	margin              : 0px 0px 0px 0px;
	padding             : 0px 0px 0px 0px;
	display             : block;
	color               : var( --color-ceramic );
	text-decoration     : none;
	background-color    : var( --color-midnight );
	background-image    : url('/public/assets/gfx/author-card-info-slate.svg');
	background-position : right bottom;
	background-repeat   : no-repeat;
	cursor              : pointer;
}
	.author-card:hover{
		color            : var( --color-white );
		background-color : var( --color-crimson );
	}

	.author-card__inner-wrapper{
		margin              : 0px 0px 0px 0px;
		padding             : 0px 0px 0px 0px;
	}
	.author-card__image{
		display      : block;
		aspect-ratio : 240/250;
		object-fit   : cover;
		width        : 100%;
		max-width    : 100%;
		height       : auto;
		transition   : filter 250ms;
		filter       : contrast(1.0);
	}
		.author-card:hover .author-card__image{
			filter       : contrast(1.2);
		}

	.author-card__profile{
		padding : 16px 22px 22px 22px;
		margin  : 0px 0px 0px 0px;
	}
	.author-card__name{
		margin      : 0px 0px 0px 0px;
		padding     : 0px 0px 0px 0px;
		font-size   : 1rem;
		line-height : 1.25rem;
		font-weight : var( --font-weight-semibold );
	}
	.author-card__expertise{
		margin     : 8px 0px 0px 0px;
		padding    : 0px 0px 0px 0px;
		list-style : none;
	}
	.author-card__expertise-item{
		margin      : 0px 0px 0px 0px;
		font-size   : 0.75rem;
		line-height : 1.50em;
		font-weight : var( --font-weight-regular );
		color       : var( --color-ceramic );
	}


/* --------------------- *\
	Post Card
\* --------------------- */
.post-card{
	margin           : 0px 0px 0px 0px;
	padding          : 0px 0px 0px 0px;
	display          : flex;
	max-width        : 100%;
	height           : 100%;
}
	.post-card__link-wrapper{
		display          : flex;
		flex-direction   : column;
		height           : 100%;
		color            : var(--color-ceramic);
		text-decoration  : none;
		background-color : var(--color-midnight);
	}
		.post-card__link-wrapper:hover{
			color            : var( --color-white );
			background-color : var( --color-crimson );
		}

	.post-card__thumb-wrapper{
		flex     : 0 0 200px;
		position : relative;
	}
	.post-card__thumb-categories{
		position         : absolute;
		left             : 0px;
		top              : 0px;
		z-index          : 10;
		margin           : 0px 0px 0px 0px;
		padding          : 2px 24px 2px 12px;
		width            : auto;
		background-color : var(--color-crimson);
		clip-path        : polygon(
								0 0,                      /* -- Top Left     */
								100% 0,                   /* -- Top Right    */
								calc( 100% - 22px ) 100%, /* -- Bottom Right */
								0% 100%                   /* -- Bottom Left  */
							);
	}
	.post-card__thumb-category{
		width : auto;
		height : 15px;
	}

	.post-card__thumb-image{
		display      : block;
		width        : 100%;
		max-width    : 100%;
		height       : 100%;
		max-height   : 100%;
		overflow     : hidden;
		object-fit   : cover;
		aspect-ratio : 324/182;

		transition : filter 250ms;
		filter     : contrast(1.0);
	}
		.post-card__link-wrapper:hover .post-card__thumb-image{
			filter : contrast(1.2);
		}

	.post-card__content{
		margin          : 0px 0px 0px 0px;
		padding         : 10px 20px 20px 20px;
		display         : flex;
		height          : 100%;
		flex-direction  : column;
		justify-content : space-between;
	}

	.post-card__date{
		font-size : 0.75rem;
		color     : var(--color-granite);
	}
		.post-card__link-wrapper:hover .post-card__date{
			color     : var(--color-ceramic);
		}

	.post-card__title{
		margin      : 0px 0px 30px 0px;
		font-size   : 1rem;
		line-height : 1.50em;
		font-weight : var(--font-weight-semibold);
		word-break  : break-word;
	}

	.post-card__authors{
		display         : flex;
		justify-content : flex-start;
		align-items     : center;
	}
	.post-card__authors-images{
		display : flex;
		margin  : 0px 12px 0px 0px;
	}


	.post-card__authors-image{
		display       : block;
		width         : 34px;
		height        : 34px;
		object-fit    : cover;
		aspect-ratio  : 1/1;
		border-radius : 100%;
    	border        : 2px solid var(--color-midnight);
	}
		.post-card__authors-image + .post-card__authors-image{
			margin-left : -10px;
		}

	.post-card__authors-names{
		font-size   : 0.75rem;
		line-height : 1.50em;
		word-break  : break-word;
	}
	.post-card__authors-name{
	}

/* --------------------- *\
	Post Card Large
\* --------------------- */
@media screen and ( min-width : 1280px )
{
	.post-card--large{}
	.post-card.post-card--large{
		flex : 1 1 100%;
	}
		
		.post-card--large .post-card__link-wrapper{
			flex           : 1 1 100%;
			display        : flex;
			flex-direction : row;
		}
		.post-card--large .post-card__thumb-wrapper{
			flex  : 0 0 calc( 50% - 0px );
			width : calc( 50% - 0px );
		}
		.post-card--large .post-card__content{
			flex  : 0 0 calc( 50% - 0px );
			width : calc( 50% - 0px );
		}
		
		.post-card--large .post-card__thumb-image{
			aspect-ratio: 494/240;
		}
		.post-card--large .post-card__title{
			font-size   : 1.125rem;
			line-height : 1.500em;
		}

}

/* --------------------- *\
	AUTHOR PAGE
\* --------------------- */
.author{}

	.author__inner-wrapper{
		
	}
	.author__column{
		flex  : 0 0 calc( 33% - 8px );
		width : calc( 33% - 8px );
	}
		@media screen and ( max-width : 1280px )
		{
			.author__column{
				flex  : 0 0 calc( 100% );
				width : calc( 100% );
			}
		}

	.author__column-image{}
	.author__column-infos{
		display         : flex;
		flex-direction  : column;
		justify-content : space-between;
	}
	.author__column-biography{}

	.author__image-wrapper{
		position  : relative;
		margin    : 0px 0px 0px 0px;
		padding   : 0px 0px 0px 0px;
		width     : 100%;
		max-width : 500px;
	}
	.author__image{
		width        : 100%;
		max-width    : 100%;
		height       : auto;
		aspect-ratio : 290/370;
		object-fit   : cover;
	}
	.author__image-caption{
		position   : absolute;
		width      : 100%;
		max-width  : 100%;
		font-size  : 0.75em;
		text-align : center;
		color      : var(--color-granite);
		transition : all 250ms;
		transform  : translateY( 1rem );
		opacity    : 0;
	}
		.author__image-wrapper:hover .author__image-caption{
			transform : translateY(0);
			opacity   : 1;
		}

	.author__name{
		margin      : 0px 0px 22px 0px;
		padding     : 0px 0px 0px 0px;
		font-size   : 1.375rem;
		line-height : 1.5em;
	}

	.author__socials{
		display         : flex;
		justify-content : flex-start;
		align-items     : center;
		font-size       : 22px;
	}
		.author__social{
			margin          : 0px 0px 0px 0px;
			padding         : 0px 0px 0px 0px;
			display         : block;
			text-decoration : none;
			color           : var( --color-midnight );
		}
			.author__social:not(:last-child){
				margin-right : 22px;
			}


		.author__social--mail{}
		.author__social--linkedIn{}


	.author__expertise{}
	.author__expertise ul{
		padding: 0px 0px 0px 20px;
	}
	.author__expertise ul li{
		margin : 0px 0px 12px 0px;
	}
	.author__expertise ul li p {
		margin : 0px 0px 0px 0px;
	}

	.author__biography{}
	.author__biography ul{
		padding: 0px 0px 0px 20px;
	}
	.author__biography ul li{
		margin : 0px 0px 12px 0px;
	}
	.author__biography ul li p {
		margin : 0px 0px 0px 0px;
	}

		@media screen and ( max-width : 1280px )
		{
			.author__expertise,
			.author__biography{
				margin: 3rem 0 0 0;
			}
		}

/* =============================================================== *\

	CUSTOM LAYOUT BLOCKS

\* =============================================================== */

/* --------------------- *\
	BLOCK :: HERO HEADER
\* --------------------- */
.heroHeader{
	position   : relative;
	min-height : var(--height-desktop);
	overflow   : hidden;
}
	.heroHeader.heroHeader--isLogoHeader{}
	.heroHeader.heroHeader--isPageHeader{}

	.heroHeader .heroHeader__row{
		position   : absolute;
		z-index    : 10;
		min-height : var(--height-desktop);
	}

	.heroHeader .heroHeader__column{
		min-height : var(--height-desktop);
		color      : var(--color-ceramic);
	}
		@media screen and ( max-width : 1280px )
		{
			.heroHeader{
				min-height : var(--height-mobile);
			}
			.heroHeader .heroHeader__row{
				min-height : var(--height-mobile);
			}
			.heroHeader .heroHeader__column{
				min-height : var(--height-mobile);
			}
		}

		@media screen and ( max-width : 720px )
		{
			.heroHeader .heroHeader__row{
				padding   : 0px 0px 0px 0px;
				flex      : 0 0 calc( 100% - 0px - 0px );
    			width     : calc( 100% - 0px - 0px );
				max-width : 100%;
			}
			.heroHeader .heroHeader__column{
				padding: 0px 40px 0px 40px;
			}
		}


	.heroHeader__column-left{
		flex                : 0 0 75%;
		display             : flex;
		align-items         : center;
		background-image    : url('/public/assets/gfx/slant-right--midnight.svg');
		background-position : right top;
		background-size     : auto 100%;
	}
		@media screen and ( max-width : 1280px )
		{
			.heroHeader__column-left{
				flex        : 0 0 100%;
				align-items : flex-start;
			}
		}

	.heroHeader__content{
		width   : 95%;
		display : flow-root;
	}
		.heroHeader--isLogoHeader .heroHeader__content{
			width   : 100%;
		}

	.heroHeader__content p {
		margin   : 0px 0px 0px 0px;
		overflow : hidden;
	}
		.heroHeader__content p span.heroHeader__inline-headline{
			margin      : 150px 0px 16px 0px;
			position    : relative;
			top         : 6px;
			display     : block;
			font-size   : 2.25rem;
			line-height : 1.25em;
			font-weight : var( --font-weight-semibold );
		}
			@media screen and ( max-width : 720px )
			{
				.heroHeader__content p span.heroHeader__inline-headline{
					margin      : 0px 0px 0px 0px;
					font-size   : 1.5rem;
					line-height : 1.25em;
				}
			}
		.heroHeader--isLogoHeader .heroHeader__content p span.heroHeader__inline-copy{
			display     : block;
			font-size   : 2.00rem;
			line-height : 1.25em;
		}
		.heroHeader--isPageHeader .heroHeader__content p span.heroHeader__inline-copy{
			display     : block;
			font-size   : 1.00rem;
			line-height : 1.75em;
		}	
			@media screen and ( max-width : 820px ){
				.heroHeader--isLogoHeader .heroHeader__content p span.heroHeader__inline-copy{
					display     : block;
					font-size   : 1.00rem;
					line-height : 1.25em;
				}
				.heroHeader--isPageHeader .heroHeader__content p span.heroHeader__inline-copy{
					display     : none;
				}
			}

		.heroHeader__inline-cta{
			margin  : 2rem 0px 0px 0px;
			display : block;
			color   : var( --color-ceramic );
		}
		a.heroHeader__inline-cta-link{
			color          : var( --color-ceramic );
			text-transform : uppercase;
			text-decoration : none;
		}


	.heroHeader__content-slate{
		float   : right;
		height  : auto; 
		height  : var(--height-desktop);
		width   : auto;
		opacity : 0.0;
	}
	.heroHeader__content-logo{
		margin     : 50px 0px 50px 0px;
		display    : block;
		width      : 260px;
		height     : auto;
		transition : all 250ms;
		transform  : translateY(0px);
		opacity    : 1;
	}
		.page-is-top.screen-is-desktop .heroHeader__content-logo{
			transform  : translateY(0px);
			opacity    : 1;
		}
		.page-is-scrolled.screen-is-desktop .heroHeader__content-logo{
			transform  : translateY(-50px);
			opacity    : 0;
		}

		@media screen and ( max-width : 1280px )
		{
			.heroHeader__content{
				font-size   : 1.5em;
				line-height : 1.35em;
			}
			.heroHeader__content p {
				margin : 0px 0px 0px 0px;
			}
			.heroHeader__content-slate{
				margin : 0px 0px 0px 0px;
			}
			.heroHeader__content-logo{
				display : block;
				width   : 22%;
			}
		}
		@media screen and ( max-width : 720px )
		{
			.heroHeader__content{
				font-size   : 1.0em;
				line-height : 1.25em;
			}
			.heroHeader__content p {
				margin : 70px 0px 0px 0px;
			}
			.heroHeader__content-slate{
				margin : -70px 0px 0px 0px;
			}
			.heroHeader__content-logo{
				display : none;
			}
		}


.heroHeader::before{
	content          : '';
	display          : block;
	position         : absolute;
	left             : 0px;
	top              : 0px;
	width            : 33vw;
	min-height       : var(--height-desktop);
	z-index          : 1;
	background-color : var(--color-midnight);
}
	@media screen and ( max-width : 1280px )
	{
		.heroHeader::before{
			width      : 40px;
			min-height : var(--height-mobile);
		}
	}
	@media screen and ( max-width : 720px )
	{
		.heroHeader::before{
			width      : 0px;
			min-height : var(--height-mobile);
		}
	}

.heroHeader::after{
	content             : '';
	display             : block;
	position            : absolute;
	left                : 33vw;
	top                 : 0px;
	width               : 67vw;
	min-height          : var(--height-desktop);
	z-index             : 1;
	background-color    : var(--color-champaign);
	background-image    : var(--image-desktop-medium);
	background-size     : cover;
	background-position : left top;
}
	@media screen and ( max-width : 1280px )
	{
		.heroHeader::after{
			left       : 40px;
			width      : calc( 100% - 40px );
			min-height : var(--height-mobile);
		}
	}
	@media screen and ( max-width : 720px )
	{
		.heroHeader::after{
			left       : 0px;
			width      : calc( 100% - 0px );
			min-height : var(--height-mobile);
		}
	}

	/* -- RESPONSIVE BACKGROUND IMAGE --*/
	/*
	@media (max-width: 576px) {
		.heroHeader::after{ background-image : var(--image-phone) }
	}

	@media (max-width: 992px) {
		.heroHeader::after{ background-image : var(--image-tablet) }
	}

	@media (max-width: 1280px) {
		.heroHeader::after{ background-image : var(--image-desktop-small) }
	}

	@media (max-width: 1920px) {
		.heroHeader::after{ background-image : var(--image-desktop-medium) }
	}
	@media (max-width: 3000px) {
		.heroHeader::after{ background-image : var(--image-desktop-large) }
	}
	*/

/* --------------------- *\
	BLOCK :: Text Half Width
\* --------------------- */	

.textHalfWidth{
	margin : 32px 0px 16px 0px;
}
	.textHalfWidth__inner-wrapper{}
	.textHalfWidth__column{
		flex  : 0 0 calc( 50% - 0px );
		width : calc( 50% - 0px )
	}
	.textHalfWidth__column-content{}

	@media screen and ( max-width : 1280px )
	{
		.textHalfWidth__column{
			flex  : 0 0 calc( 100% - 0px );
			width : calc( 100% - 0px )
		}
	}

/* --------------------- *\
	BLOCK :: Testimonials
\* --------------------- */	
.testimonials-slideshow {
    margin                : 2rem 0px 0px 0px;
	padding               : 0px 0px 0px 0px;
    width                 : 100%;
    max-width             : 100%;
    box-sizing            : border-box;
	background-color      : var( --color-midnight );
	background-image      : url( '/public/assets/gfx/testimonials-slant.svg' );
	background-size       : 204px 242px;
	background-position   : left top;
}
	.testimonials-slideshow__slides-container {
		margin                : 0px 0px 0px 0px;
		padding               : 16px 65px 0px 255px;
		width                 : 100%;
		max-width             : 100%;
		display               : grid;
		grid-template-columns : 1fr;
		grid-template-rows    : 1fr;
		overflow              : hidden;
	}
		@media screen and ( max-width : 720px )
		{
			.testimonials-slideshow {
				background-size : 104px 123px
			}
			
			.testimonials-slideshow__slides-container{
				padding : 120px 12px 0px 16px;
			}
		}

	.testimonials-slideshow__item {
		grid-area       : 1 / 1 / 2 / 2;
		display         : flex;
		flex-direction  : column;
		justify-content : center;
		width           : 100%;
		opacity         : 0;
		visibility      : hidden;
		pointer-events  : none;
		transition      : opacity 0.4s ease, visibility 0.4s ease;
		box-sizing      : border-box;
	}
		.testimonials-slideshow__item.is-active {
			opacity        : 1;
			visibility     : visible;
			pointer-events : auto;
		}

		.testimonials-slideshow__item blockquote {
			margin      : 0px 0px 15px 0px;
			font-size   : 1.375rem;
			line-height : 1.750em;
			font-weight : var( --font-weight-regular );
			color       : var( --color-ceramic );
		}

		.testimonials-slideshow__item p {
			margin         : 0px 0px 0px 0px;
			font-size      : 1.000rem;
			line-height    : 1.375em;
			font-weight    : var( --font-weight-bold );
			text-transform : uppercase;
			color          : var( --color-ceramic );
		}

		.testimonials-slideshow__item cite {
			font-weight    : var( --font-weight-regular );
			text-transform : none;
			color          : var( --color-ceramic );
		}
			@media screen and ( max-width : 720px )
			{
				.testimonials-slideshow__item blockquote{
					font-size   : 1.0rem;
					line-height : 1.5em;
				}
			}


	.testimonials-slideshow__controls {
		margin     : 0px 0px 0px 0px;
		padding    : 0px 65px 0px 255px;
		text-align : left;
	}
		@media screen and ( max-width : 720px )
		{
			.testimonials-slideshow__controls{
				padding : 0px 12px 0px 16px;
			}
		}

		button.testimonials-slideshow__button{
			width            : 64px;
			height           : 64px;
			background-color : var( --color-midnight );
			border           : none;
			outline          : none;
			cursor           : pointer;
			transition       : all 250ms;
		}
			button.testimonials-slideshow__button:hover{
				color            : var( --color-white );
				background-color : var( --color-crimson );
			}
		.testimonials-slideshow__button-prev{}
		.testimonials-slideshow__button-next{}