.preloader {
	display: none;
}

/**
* SPECIAL: Materialize extension stuff
*/
/** Different headings for collapsible sections based on expanded vs collapsed */
ul.collapsible li .whenExpanded {
	display: none;
}
ul.collapsible li .whenCollapsed {
	display: inherit;
}
ul.collapsible li.active .whenExpanded {
	display: inherit;
}
ul.collapsible li.active .whenCollapsed {
	display: none;
}

/**
* SPECIAL: Materialize Reset Stuff
*/
/* Set default so inherit below will work properly */
article ul,
article ul li {
	list-style-type: disc !important;
}
article ul,
li {
	padding-left: inherit !important;
	list-style-type: inherit !important;
}
article ul {
	margin-left: 2em;
}
article ol {
	padding-inline-start: 20px;
}
/* set again */
ul.collapsible,
ul.collapsible li {
	padding-left: 0px !important;
	list-style-type: none !important;
}

/* Strange - they set <strong></strong> to 500, which is less than browser default. Let's reset it to browser default of 'bold' */
strong {
	font-weight: bold !important;
}

/* Disable materialize styling for Github gist embeds */
.gist tr {
	border-bottom: inherit;
}

/**
* Materialize Cards - Special Fixed Footers
*/
.card .fixed-footer {
	text-align: center;
	bottom: 0px;
	position: fixed;
	width: 100%;
	border-top: 1px solid black;
	margin-left: -24px !important;
	margin-bottom: -24px;
	padding-bottom: 0px;
}
.card .fixed-footer > .col {
	padding: 10px;
}
.card-content .fixed-footer {
	position: relative;
	width: calc(100% + 48px);
}
.card-reveal .closeButton {
	position: absolute;
	top: 10px;
	right: 10px;
	border: 1px solid black;
	border-radius: 3px;
}
.card-reveal .fixed-footer {
	margin-bottom: 0px;
}
.card .fixed-footer .col > .btn {
	width: 100%;
	padding: 0px 4px;
	overflow: hidden;
}
.card .fixed-footer .externalCodePageLink .externalCodePageLinkName {
	display: inline;
	max-width: 87%;
}
.card .fixed-footer .externalCodePageLink .externalCodePageLinkIcon {
	display: inline;
	max-width: 8%;
	margin-left: 5%;
}

/**
* Page Navigation
*/
.materializePaginationWrapper .pageNavBlock {
	margin: 4px 10px;
}

/**
* Hover Effects
*/
.hoverLinkOutlineThick:hover {
	outline-color: rgba(25, 0, 252, 0.5);
	outline-style: solid;
	outline-width: 20px;
	outline-offset: -10px;
}
.hoverLinkOutlineThin:hover {
	outline-color: rgba(25, 0, 252, 0.5);
	outline-style: solid;
	outline-width: 10px;
	outline-offset: 8px;
}
.jtzwpHoverable {
	transition:
		box-shadow 0.25s,
		-webkit-box-shadow 0.25s;
}
.purpleHoverable:hover {
	-webkit-box-shadow:
		0 8px 17px 0 rgba(25, 0, 252, 0.2),
		0 6px 20px 0 rgba(25, 0, 252, 0.19);
	box-shadow:
		0 8px 17px 0 rgba(25, 0, 252, 0.2),
		0 6px 20px 0 rgba(25, 0, 252, 0.19);
}

/**
* Commenting System - Generic
*/
.comments-area {
	width: 98%;
	margin-left: 1%;
	margin-bottom: 20px;
}

/**
* Commenting System - Wordpress
*/
#wordpress-comments {
	padding: 1px 12px;
	background-color: rgba(255, 255, 255, 0.65);
	border-radius: 10px;
}
#wordpress-comments .comment-reply-title {
	text-align: center;
	font-size: 30px;
}
#wordpress-comments .submit {
	margin-left: 20%;
}
#wordpress-comments .reply {
	margin-left: 10%;
	background-color: #f69087;
	border-radius: 30px;
	padding: 12px;
	text-align: center;
	max-width: 100px;
}
#wordpress-comments .reply > a {
	color: white !important;
}
#wordpress-comments .comment-list li.comment {
	padding: 20px 10px;
	background-color: rgba(255, 255, 255, 0.59);
	border-radius: 10px;
	list-style-type: none !important;
}
#wordpress-comments .children li {
	margin: 20px 0px;
}
#wordpress-comments label {
	color: #2e3641;
}

/**
* Business Card - Materialize Styled
*/
.businessCard {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	font-family: 'Inter', 'sans-serif';
	font-size: 1.1em;
	position: relative;
}
.businessCard .textWrapper a {
	text-underline-offset: 2px;
	text-decoration: underline;
}
.modal-content .businessCard {
	width: 80%;
}
.businessCard .fullName {
	font-weight: bolder;
	font-size: 2em;
}
.businessCard .jobTitle {
	font-style: italic;
	font-size: 1.3em;
}
.businessCard .profilePictureWrapper {
	overflow: hidden;
	border-radius: 50%;
	padding: 10px !important;
	border: 4px solid black;
	margin-top: 38%;
	background-color: white;
}
.businessCard .linksAndDetailsSection .rowJoinerWrapper {
	width: 34px;
	height: 15px;
	padding-left: 0.75rem;
	min-height: 1px;
	position: relative;
	text-align: center;
	float: left;
	margin-bottom: -1px;
	margin-top: -1px;
}
.businessCard .linksAndDetailsSection .rowJoiner {
	width: 50%;
	height: 100%;
	margin-left: auto;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
.businessCard .icon i {
	position: absolute;
	width: 24px;
	height: 24px;
	text-align: center;
	font-size: 24px;
}
.businessCard .linksAndDetailsSection .iconWrapper {
	display: inline-block;
	width: 34px;
	height: 31px;
	padding-top: 3px;
	padding-left: 4px;
	margin-right: 10px;
	border-radius: 8px;
	border: 1px solid black;
}
.businessCard .linksAndDetailsSection .textWrapper {
	display: inline-block;
}
.businessCard .iconsSolidBackground {
	background-color: black;
	color: white !important;
}
.businessCard .diagonals {
	position: absolute;
	height: 200%;
	width: 14px;
	top: -50%;
	right: 222px;
	border-left: 4px solid red;
	border-right: 4px solid red;
	transform: rotateZ(24deg);
	background-color: #38013d;
}
.portfolioHomepage .businessCard .diagonals,
.homepageUpper .businessCard .diagonals {
	display: none;
}
.portfolioHomepage .businessCard {
	color: black;
}
.businessCard > .card-panel {
	position: relative;
	background-color: unset;
}
.businessCard .background {
	width: 100%;
	position: absolute;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
	background-color: white;
}
.businessCard .ageWrapper {
	margin-top: 4px;
	font-size: medium;
	font-style: italic;
}
.businessCard .linksAndDetailsSection {
	min-height: 88px;
}
.businessCard .fixedUpperRightToolbar {
	position: absolute;
	right: 10px;
	top: 10px;
	display: none;
}
.modal-content .businessCard .fixedUpperRightToolbar {
	display: inherit;
}
@media (max-width: 600px) {
	.businessCard .profilePictureWrapper {
		margin-top: 0px;
	}
}
/**
* Modal version of business card
*/
.businessCardMaterializeModal {
	top: 10% !important;
	background-color: unset !important;
	max-width: 600px;
	width: 94% !important;
	min-height: 450px;
	overflow-y: hidden;
	display: none;
	box-shadow: unset !important;
}
.businessCardMaterializeModal .businessCard {
	width: 100%;
	margin-top: 0px;
	/* min-width: 500px; */
}
.businessCardMaterializeModal .card-panel {
	margin: unset !important;
}
.businessCardMaterializeModal .modal-content {
	padding: 0px;
}
.businessCardMaterializeModal .aboutMeCard {
	margin-bottom: 16px !important;
	padding: 12px 14px 5px 14px;
}
.businessCard .modal-close {
	color: grey;
}

/**
* Custom Tool Listings
*/
.customToolsListingsWrapper {
	background: rgba(255, 255, 255, 0.45);
	padding: 10px;
	border-radius: 8px;
	margin: 10px;
}
.customToolsMasonry {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}
.customToolListing .card-title {
	overflow-x: hidden;
	text-overflow: ellipsis;
}

/**
* Under construction page
*/
.underConstruction .iconWrapper {
	padding: 20px;
	border-radius: 51px;
	border: 10px solid white;
	width: 50%;
	min-width: 220px;
	max-width: 300px;
}

/**
* Dev Bar
*/
.devBar {
	width: 100%;
	position: fixed;
	bottom: -20px;
}

.onlyPrint {
	display: none;
}

@media print {
	.onlyPrint {
		display: inherit;
	}
	.noPrint {
		display: none !important;
	}
	#main {
		padding-top: 10px;
	}
	.entry-content,
	#main article {
		width: 100%;
		margin: 0px;
	}
	#main article {
		padding: 0px;
	}
	body {
		background-color: white;
	}
	.expandablePostDetailsSection .whenCollapsed {
		display: none !important;
	}
	.expandablePostDetailsSection .whenExpanded {
		display: inherit !important;
	}
	.expandablePostDetailsSection .collapsible-body {
		display: block !important;
	}
	.jtzwpShareButtons,
	.comment-respond,
	.entry-footer .edit-link {
		display: none !important;
	}
}

/**
* Main Materialize Breakpoints
*/
/** First breakpoint, .s */
@media only screen and (max-width: 600px) {
	.card .fixed-footer .s12 .btn,
	.card .fixed-footer .s12 i {
		font-size: x-large !important;
	}
	.card .fixed-footer .s6 .btn,
	.card .fixed-footer .s6 i {
		font-size: large !important;
	}
	/** Allow grid system to be used outside of .row or .col */
	.s12 {
		width: calc(100% / (12 / 12));
	}
	.s11 {
		width: calc(100% / (12 / 11));
	}
	.s10 {
		width: calc(100% / (12 / 10));
	}
	.s9 {
		width: calc(100% / (12 / 9));
	}
	.s8 {
		width: calc(100% / (12 / 8));
	}
	.s7 {
		width: calc(100% / (12 / 7));
	}
	.s6 {
		width: calc(100% / (12 / 6));
	}
	.s5 {
		width: calc(100% / (12 / 5));
	}
	.s4 {
		width: calc(100% / (12 / 4));
	}
	.s3 {
		width: calc(100% / (12 / 3));
	}
	.s2 {
		width: calc(100% / (12 / 2));
	}
	.s1 {
		width: calc(100% / (12 / 1));
	}
}
/** Second breakpoint, .m */
@media only screen and (min-width: 601px) {
	.card .fixed-footer .m6 .btn,
	.card .fixed-footer .m6 i {
		font-size: medium !important;
	}
	.card .fixed-footer > .col.m6 {
		padding: 4px 2px;
	}
	/** Allow grid system to be used outside of .row or .col */
	.m12 {
		width: calc(100% / (12 / 12));
	}
	.m11 {
		width: calc(100% / (12 / 11));
	}
	.m10 {
		width: calc(100% / (12 / 10));
	}
	.m9 {
		width: calc(100% / (12 / 9));
	}
	.m8 {
		width: calc(100% / (12 / 8));
	}
	.m7 {
		width: calc(100% / (12 / 7));
	}
	.m6 {
		width: calc(100% / (12 / 6));
	}
	.m5 {
		width: calc(100% / (12 / 5));
	}
	.m4 {
		width: calc(100% / (12 / 4));
	}
	.m3 {
		width: calc(100% / (12 / 3));
	}
	.m2 {
		width: calc(100% / (12 / 2));
	}
	.m1 {
		width: calc(100% / (12 / 1));
	}
}
/** Third breakpoint, .l */
@media only screen and (min-width: 992px) {
	/** Allow grid system to be used outside of .row or .col */
	.l12 {
		width: calc(100% / (12 / 12));
	}
	.l11 {
		width: calc(100% / (12 / 11));
	}
	.l10 {
		width: calc(100% / (12 / 10));
	}
	.l9 {
		width: calc(100% / (12 / 9));
	}
	.l8 {
		width: calc(100% / (12 / 8));
	}
	.l7 {
		width: calc(100% / (12 / 7));
	}
	.l6 {
		width: calc(100% / (12 / 6));
	}
	.l5 {
		width: calc(100% / (12 / 5));
	}
	.l4 {
		width: calc(100% / (12 / 4));
	}
	.l3 {
		width: calc(100% / (12 / 3));
	}
	.l2 {
		width: calc(100% / (12 / 2));
	}
	.l1 {
		width: calc(100% / (12 / 1));
	}
}
/** Fourth breakpoint, .xl */
@media only screen and (min-width: 1200px) {
	/** Allow grid system to be used outside of .row or .col */
	.xl12 {
		width: calc(100% / (12 / 12));
	}
	.xl11 {
		width: calc(100% / (12 / 11));
	}
	.xl10 {
		width: calc(100% / (12 / 10));
	}
	.xl9 {
		width: calc(100% / (12 / 9));
	}
	.xl8 {
		width: calc(100% / (12 / 8));
	}
	.xl7 {
		width: calc(100% / (12 / 7));
	}
	.xl6 {
		width: calc(100% / (12 / 6));
	}
	.xl5 {
		width: calc(100% / (12 / 5));
	}
	.xl4 {
		width: calc(100% / (12 / 4));
	}
	.xl3 {
		width: calc(100% / (12 / 3));
	}
	.xl2 {
		width: calc(100% / (12 / 2));
	}
	.xl1 {
		width: calc(100% / (12 / 1));
	}
}