.hamburger {
	position:						fixed;
	top:							2.5em;
	right:							2.5em;
	display:						inline-block;
	cursor:							pointer;
	width:							32px;
	height:							32px;
	background-color:				rgb(140, 140, 140);
	z-index:						9999;
}

.hamburger-inner {
	display:						inline-block;
	cursor:							pointer;
	width:							30px;
	height:							30px;
	background-color:				rgb(210, 210, 210);
}

.line {
	display:						block;
	position:						relative;
	transition:						transform 0.7s ease;
	height:							2px;
	width:							24px;
	background-color:				rgb(5, 5, 5);
	margin-top:						5px;
	margin-left:					4px;
}


.line:nth-child(1) {
	top:							3px;
}

.line:nth-child(2) {
	top:							3px;
	transition-delay:				0.1s;
}

@keyframes move-and-rotate {
	0% {
		transform:					translateY(0px);
	}

	80% {
		transform:					translateY(7px);
	}

	100% {
		transform:					translateY(7px) rotate(45deg);
	}
}

@keyframes move-and-rotate-reverse {
	0% {
		transform:					translateY(7px) rotate(45deg);
	}

	20% {
		transform:					translateY(7px);
	}

	100% {
		transform:					translateY(0px);
	}
}

.line:nth-child(3) {
	top:							3px;
	transition-delay:				0.1s;
}

.animate-forward .line:nth-child(1) {
	animation:						move-and-rotate 0.2s forwards;
}

.animate-reverse .line:nth-child(1) {
	animation:						move-and-rotate-reverse 0.2s forwards;
}

.active .line:nth-child(2) {
	transform:						rotate(45deg);
}


.active .line:nth-child(3) {
	transform:						translateY(-7px) rotate(-45deg);
}

.menu {
	position:						fixed;
	transform:						translateY(-200vh);
	transition:						transform 0.5s;
	width:							100vw;
	height:							100vh;
	left:							0;
	top:							0;
	z-index:						9;
	list-style:						none;
	text-align:						right;
	margin:							0;
	padding-top:					0;
	background-color:				rgb(250, 250, 250);
}

.menu-item {
	display:						flex;
	font-size:						1.25em;
	line-height:					1.8em;
	align-items:					center;
	justify-content:				flex-end;
	margin-right:					1.5em;
}

.show-menu {
	transform:						translateY(0);
	padding-top:					20vh;
}

.email-button {
	display:						inline-block;
	padding:						1em 4em;
	background-color:				rgb(255, 255, 255);
	color:							rgb(0, 0, 0);
	text-decoration:				none;
	font-weight:					bold;
	border-radius:					10px;
	border:							2px solid black;
}

.email-button:hover {
	background-color:				rgb(0, 0, 0);
	color:							white;
	border:							2px solid white;
}

/* Title text */
.dropdown-button-home, .dropdown-button-contact, .dropdown-button-client-portal, .dropdown-button-faq {
	margin-top:						auto;
	margin-bottom:					auto;
	font-family:					"Verdana", sans-serif;
	width:							14vw;
	height:							3.0em;
	font-size:						.7em;
	border:							none;
	margin-left:					.05em;
	margin-right:					.05em;
	background-color:				rgb(0, 0, 0, 0.0);
	transition:						background-color 0.2s ease-in-out;
	display:						flex;
	justify-content:				center;
	align-items:					center;
	height:							100%;
}

.dropdown-menu {
	display:						inline-block;
}

.dropdown-content {
	display:						block;
	min-width:						160px;
	overflow:						hidden;
	max-height:						0;
	transition:						max-height 0.2s linear 0.2s;
	padding-top:					10px;
}

body {
	display:						block;
	font-family:					"Verdana", sans-serif;
	font-size:						1.2em;
	margin:							0;
	overflow-x:						hidden;
	background-color:				rgb(254, 254, 254);
}

.fixed-top {
	display:						flex;
	font-size:						1.5em;
	border:							none;
	justify-content:				center;
	min-height:						6em;
	max-height:						6em;
	min-width:						100%;
	max-width:						100%;
	overflow-x:						hidden;
	overflow-y:						hidden;
	margin:							0;
	top:							0;
	left:							0;
}


h1 {
	font-size:						2em;
	text-align:						center;
	font-family:					"Verdana", sans-serif;
	margin-top:						0;
}

h2 {
	font-size:						1.5em;
	margin-top:						0;
}

.opening-paragraph {
	margin-left:					15em; 
	margin-right:					15em; 
	margin-top:						0em; 
	margin-bottom:					0em;
}

.table-row {
	display:						grid;
	grid-template-columns:			65% 35%;
	grid-column-gap:				5em;
	grid-row-gap:					4em;
	margin-left:					15em;
	margin-right:					15em;
}

.table-cell-wide {
	display:						block;
	margin:							0;
	width:							100%;
	margin-top:						5em;
}

.table-cell,.table-cell-reverse {
	display:						block;
	margin:							0;
	width:							100%;
}

.main-body {
	background-color:				rgb(190, 190, 250);
	width:							100%;
	margin:							0;
	line-height:					1.95em;
}

.spacer {
	height:							6em;
}

.spacer-half {
	height:							3em;
}

.logo-container {
	display:						inline-block;
	width:							100%;
	margin:							auto;
	background-color:				rgb(250, 250, 250);
}

.threec-logo {
	content:						url('../data/3c_logo.webp');
	height:							5em;
	width:							auto;
	margin-bottom:					0;
	margin-top:						0;
	margin-left:					auto;
	margin-right:					auto;
	align-items:					center;
	display:						block;
}

.threec-profile {
	content:						url('../data/3c_profile_pic.webp');
	width:							16vw;
	height:							auto;
	display:						block;
	margin:							auto;
	margin-left:					0;
	padding-top:					5em;
}

.threec-office-inside1 {
	content:						url('../data/3c_office_inside1.webp');
	width:							16vw;
	height:							auto;
	display:						block;
	margin:							auto;
	margin-left:					0;
}

.threec-office-inside2 {
	content:						url('../data/3c_office_inside2.webp');
	display:						block;
	height:							24vw;
	width:							auto;
	margin-left:					0;
	margin-right:					auto;
	padding-top:					5em;
}

.threec-outdoor-office {
	content:						url('../data/3c_office_outside1.webp');
	width:							20vw;
	height:							auto;
	display:						block;
	margin:							auto;
	margin-left:					0;
}

.footer {
	background-color:				rgb(252, 252, 252);
	text-align:						center;
	margin-left:					0;
	margin-right:					0;
}

.desktop-heading {
	display:						none;
	margin:							auto;
	justify-content:				right;
	font-size:						1.2em;
}

@media screen and (max-width: 100rem) {
	.desktop-heading {
		display:					none;
	}
}

/*
* Switch to desktop
*/
@media screen and (min-width: 95rem) {
	.hamburger {
		display:					none;
	}
	
	.desktop-heading {
		display:					flex;
	}
}

@media screen and (max-width: 90rem) {
	body {
		font-size:					1.25em;
	}

	h1 {
		font-size:					1.75em;
	}

	.table-row {
		grid-auto-flow:				row;
		grid-template-columns:		2fr;
		margin:						auto;	
		width:						80vw;
	}

	.table-cell,.table-cell-reverse,.opening-paragraph,.table-cell-wide {
		margin-left:				auto;
		margin-right:				auto;
		width:						80vw;
		margin-top:					0;
		margin-bottom:				1em;
	}

	.threec-office-inside2,.threec-outdoor-office {
		margin:						auto;
		height:						30vw;
		width:						auto;
		padding:					0;
	}

	.threec-office-inside1,.threec-profile {
		margin:						auto;
		width:						35vw;
		height:						auto;
		padding-top:				0;
	}

	.table-cell-reverse {
		order:						1;
	}
}

@media screen and (max-width: 40rem) {
	body {
		font-size:					1em;
	}

	h1 {
		font-size:					1.5em;
	}

	.table-row {
		width:						99vw;
	}

	.threec-office-inside1,.threec-profile {
		margin:						auto;
		width:						50vw;
	}

	.threec-office-inside2,.threec-outdoor-office {
		margin:						auto;
		width:						70vw;
		height:						auto;
		margin-left:				auto;
		margin-right:				auto;

	}

	.footer {
		text-align:					left;
	}

	.spacer-half {
		height:						2em;
	}

	.threec-logo {
		content:					url('../data/3c_logo_mobile.webp');
	}

	.threec-profile {
		content:					url('../data/3c_profile_pic_mobile.webp');
	}

	.threec-office-inside1 {
		content:					url('../data/3c_office_inside1_mobile.webp');
	}

	.threec-office-inside2 {
		content:					url('../data/3c_office_inside2_mobile.webp');
	}

	.threec-outdoor-office {
		content:					url('../data/3c_office_outside1_mobile.webp');
	}
}