@media only screen and (max-width: 640px) {	
	.banner {
		justify-content: space-between;
	}

	#ham {
		display: initial;
		color: whitesmoke;
		z-index: 99;
	}
	
	.topNav {
		flex-direction: column;
		gap: 2rem;
		position: absolute;
		top: 0;
		right: 0;
		height: 100vh;
		width: 0;
		padding: 15vh 0;
		overflow: hidden;
		background-color: #131313;
		color: transparent;
		
		a {
			white-space: nowrap;
			color: inherit;
			transition: color 0.1s;
			font-size: 1.2rem;
			font-weight: 400;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-content: center;
			align-items: center;
			opacity: inherit;
		
			span {color: #656565; opacity: inherit;}
		}
	}
	
	.mobileNavCTA {
		display: inline;
		position: absolute;
		bottom: 7.5vh;
		align-self: center;
		
		.CTA {
			color: inherit;
			padding: 0.75rem 1.5rem;
			width: 80vw;
			a {margin: 0 auto; width: max-content; font-size: 1rem; font-weight: 500;}
			background-color: transparent;
		}
	}
	
	#mobileCTA {
		opacity: 0;
		transition: opacity 3s;
	}
	
	#mainNavLinks {
		flex-direction: column;
	}
	
	.desktopOnly {
		display: none !important;
	}
	
	/*#mobileCTALink:after {content: none;}*/
	
	:root {
		--header-row-gap: 5vh;
		--scroller-height: 4.5rem;
		--cont-padding-tb: 8vh;
	}
	
	.banner {padding: 0 5vw;}
	
	header {
		height: calc(100vh + var(--scroller-height));
		padding: 0 5vw;
		gap: 1.75vh var(--header-col-gap);
		grid-template-rows: var(--banner-height) 1fr auto auto auto auto /* calc(3 * var(--scroller-height)) */ var(--scroller-height);
		grid-template-columns: auto;
		grid-template-areas:
			'spacerTop'
			'heropic'
			'title'
			'desc'
			'heroCTA'
			'spacerBottom'
			/* 'scrollHead' */
			'scroller';
	}
	
	header:has(.subtitle) {
		gap: 1.75vh var(--header-col-gap);
		grid-template-rows: var(--banner-height) 1fr auto auto auto auto auto /* calc(3 * var(--scroller-height)) */ var(--scroller-height);
		grid-template-areas:
			'spacerTop'
			'heropic'
			'title'
			'subtitle'
			'desc'
			'heroCTA'
			'spacerBottom'
			/* 'scrollHead' */
			'scroller';
	}
	
	.title{
		justify-content: center;
		text-align: center;
		font-size: 2.75em;
		padding: 0;
	}
	
	.title:has(+ .subtitle) {
		margin-bottom: -6%;
	}
	
	.subtitle {
		justify-content: center;
		text-align: center;
		font-size: 1.75em;
		padding: 0;
	}
	
	.desc, .scrollHead, .heroCTA {
		justify-content: center;
		text-align: center;
		font-size: 0.9em;
		padding: 0;
		max-width: 100%;
	}
	
	.scrollHead {
		display: none;
	}
	
	.CTA {
		padding: 0.3rem 1.4rem;
		font-weight: 500;
		letter-spacing: 1.2px;
	}
	
	main {
		margin-top: var(--cont-padding-tb);
	}
	
	.nudeStd {
		grid-column: 2 / span 18;
	}

	.bleedOut, .bleedWide, .bleedFull {
		grid-column: 1 / -1;
	}

	.bleedIn {
		grid-column: 2 / span 18;
		padding: 0 5vw;
	}
	
	#ourTeam1 {
		display: none;
	}
	
	#ourTeam2 {
		display: grid;
		grid-template-rows: auto auto auto auto;
		grid-template-columns: 1fr;
		grid-template-areas:
			'threeTag'
			'threeColHeader'
			'cardLeft'
			'cardRight';
			
		.dirCard {justify-self: center !important;}
	}
	
	.split {
		grid-template-rows: auto;
		grid-template-columns: 1fr;
		grid-template-areas:
			'leftHalf'
			'rightHalf';
	}
	
	.flexSplit {flex-direction: column;}
	
	.threeCol {
		grid-template-rows: auto auto auto auto auto;
		grid-template-columns: 1fr;
		grid-template-areas:
			'threeTag'
			'threeColHeader'
			'cardLeft'
			'cardMid'
			'cardRight';
	}
	
	.cardLeft, .cardRight, .cardMid {height: 70vh;}
	
	.nudeThreeCol {
		grid-template-rows: auto auto auto auto auto;
		grid-template-columns: 1fr;
		grid-template-areas:
			'threeTag'
			'threeColHeader'
			'nudeCardLeft'
			'nudeCardMid'
			'nudeCardRight';
	}
	
	.nudeCardLeft, .nudeCardMid, .nudeCardRight {
		padding: 1rem 1rem;
	}
	
	#systemsTxt {padding: 1rem; h2 {margin-bottom: 1rem;}}	
	
	h2 {margin: 0;}
	
	#faqTag {display: none;}
	#faqHead, .blogTextHead {text-align: center;}
	
	h3.blogTextHead {
		margin-bottom: 1.5rem !important;
		margin-top: -0.6rem !important;
	}
	
	.blogText .heroCTA {
		align-items: center;
	}
	
	.blogCardCont {
		justify-content: center;
		width: 100% !important;
	}
	
	.blogCard {
		gap: calc(1 * var(--header-row-gap));
	}
	
	.newsColumns {
		column-count: 1;
	}
	
	.imgCentre {
		align-self: center !important;
		margin-bottom: 2rem;
	}
	
	.soleBio {
		justify-content: center;
	}
	
	.thin.blogCard {
		flex: 0 1 400px;
	}
	
	.reviewConveyor {
		animation: carousel 15s infinite linear;
	}
	
	.oneReview {
		flex: 0 0 18em;
		grid-template-columns: 1fr;
		border-radius: 0 0 20px 20px;
		grid-template-rows: auto auto auto auto 1fr auto auto;
		grid-template-areas:
			'industry'
			'ppic'
			'rvHdl'
			'rv'
			'nameSpace'
			'rvrName'
			'rvrPos';
	}
	
	.industry {width: calc(100% + 3rem + 4px); display: block;}
	.rvHdl {margin: 1rem auto; justify-self: center; text-align: center; h4 {font-size: 1.2em;}}
	.ppic {justify-self: center; margin-right: 0;}
	.rv {font-size: 0.95em; p {line-height: 1.3rem;}}
	.rvrName:after {content: none;}
	.rvrName {justify-self: right; color: #777;}
	.rvrPos {justify-self: right; color: #777;}
	.qteClose {display: none;}
	
	.logoGrid {
		margin: calc(2 * var(--header-row-gap)) 0 calc(2 * var(--header-row-gap)) 0;
	}
	
	footer {
		gap: 1rem;
		padding-top: 3rem;
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 800px) {
	.twoCol {
		grid-template-rows: repeat(auto, 14);
		grid-template-columns: 1fr;
		grid-template-areas:
			'threeTag'
			'twoColHeader'
			'before'
			'after';
		
		.before {
			grid-row: span 2;
		}	
		
		.after {
			margin: 0;
			padding: 0;
			border: none;
			grid-row: span 2;
		}
	}
}

@media only screen and (min-width: 640px) and (max-width: 1050px) {
	.banner {
		justify-content: space-between;
	}
	
	#ham {
		display: initial;
		color: whitesmoke;
		z-index: 99;
	}
	
	.topNav {
		flex-direction: column;
		gap: 2rem;
		position: absolute;
		top: 0;
		right: 0;
		height: 100vh;
		width: 0;
		padding: 15vh 0;
		overflow: hidden;
		background-color: #131313;
		color: transparent;
		
		a {
			white-space: nowrap;
			color: inherit;
			transition: color 0.1s;
			font-size: 1.2rem;
			font-weight: 400;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-content: center;
			align-items: center;
			opacity: inherit;
		
			span {color: #656565; opacity: inherit;}
		}
	}
	
	.mobileNavCTA {
		display: inline;
		position: absolute;
		bottom: 5vh;
		align-self: center;
		
		.CTA {
			color: inherit;
			padding: 0.75rem 1.5rem;
			width: 80vw;
			a {margin: 0 auto; width: max-content; font-size: 1rem; font-weight: 500;}
			background-color: transparent;
		}
	}
	
	#mobileCTA {
		opacity: 0;
		transition: opacity 3s;
	}
	
	#mainNavLinks {
		flex-direction: column;
	}
	
	.desktopOnly {
		display: none !important;
	}
	
	:root {
		--header-row-gap: 1.5vh;
		--scroller-height: 4.5rem;
		--cont-padding-tb: 5vh;
	}
	
	header {
		height: calc(100vh + var(--scroller-height));
		grid-template-rows: var(--banner-height) 1fr auto auto auto auto /* calc(3 * var(--scroller-height)) */ var(--scroller-height);
		grid-template-columns: 1fr;
		grid-template-areas:
			'spacerTop'
			'heropic'
			'title'
			'desc'
			'heroCTA'
			'spacerBottom'
			/* 'scrollHead' */
			'scroller';
	}
	
	header:has(.subtitle) {
		grid-template-rows: var(--banner-height) 1fr auto auto auto auto auto /* calc(3 * var(--scroller-height)) */ var(--scroller-height);
		grid-template-areas:
			'spacerTop'
			'heropic'
			'title'
			'subtitle'
			'desc'
			'heroCTA'
			'spacerBottom'
			/* 'scrollHead' */
			'scroller';
	}
	
	.title{
		margin-bottom: -3%;
		padding: 0;
	}
	
	.title{
		justify-content: center;
		text-align: center;
	}
	
	.title:has(+ .subtitle) {
		margin-bottom: -6%;
	}
	
	.subtitle {
		justify-content: center;
		text-align: center;
		padding: 0;
	}
	
	.desc, .scrollHead, .heroCTA {
		justify-content: center;
		text-align: center;
		font-size: 0.9em;
		padding: 0 15vw;
		max-width: 100%;
	}
	
	.scrollHead {
		display: none;
	}
	
	main {
		margin-top: var(--cont-padding-tb);
	}
	
	.nudeStd {
		grid-column: 3 / span 16;
	}

	.bleedOut {
		grid-column: 2 / span 18;
		padding: 0 5vw;
	}

	.bleedIn {
		grid-column: 3 / span 16;
		padding: 0 5vw;
	}

	.bleedWide {
		grid-column: 2 / span 18;
		padding: 0 5vw;
	}
	
	.bleedFull {
	}
	
	.nudeCardLeft, .nudeCardMid, .nudeCardRight {
		padding: 1rem 1rem;
	}
	.threeCol {
		grid-template-rows: auto auto auto auto auto;
		grid-template-columns: 1fr;
		grid-template-areas:
			'threeTag'
			'threeColHeader'
			'cardLeft'
			'cardMid'
			'cardRight';
		row-gap: calc(3 * var(--header-row-gap));
	}
	
	.cardLeft, .cardRight, .cardMid {
		height: 50vh;
		width: 70vw;
		justify-self: center;
		h4 {
			font-size: 1.5rem;
		}
	}
	/*
	*/
	
	.flexSplit {flex-direction: column;}
	
	#systemsDiv {max-width: 70vw;}
	
	#faqTag, #faqHead, .blogTextHead {margin: 0 auto !important;}
	h3.blogTextHead {
		margin-bottom: 1.5rem !important;
	}
	.blogText .heroCTA {align-items: center;}
	
	
	.imgCentre {
		align-self: center !important;
		margin-bottom: 2rem;
	}
	
	.soleBio {
		justify-content: center;
	}
	
	
	.thin.blogCard {
		flex: 0 1 45%;
	}
}