body {
	margin: 0;
	padding: 0;
	/* width: fit-content; */
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

h1, h2, h3, h4 {
	font-family: 'Tw Cen MT';
	font-weight: 100;
}
h1 {
	font-size: xxx-large;
}
h2 {
	font-size: xx-large;
}
h3 {
	font-size: x-large;
}
h4 {
	font-size: large;
}

.purple, .purple:active, .purple:visited {

}
.lightpurple, .lightpurple a, .lightpurple, a.lightpurple:active, a.lightpurple:visited, .lightpurple a:hover, .lightpurple a:visited, .lightpurple a {
	color: #afafc6;
}
.darkgray {
	color: #767676;
}
.gray {
	color: #b2b2b2;
}

#btn-linkedin {
	display: flex;
	border: 1px solid #0a66c2;
	color: #0a66c2;
	height: 25px;
	border-radius: 5px;
	padding: 4px 10px;
	margin: 10px auto;
	width: fit-content;
	cursor: pointer;
	text-decoration: none;
}
#btn-linkedin:hover {
	background-color: #dddee0;

}
#btn-linkedin svg {
	fill: #0a66c2;
	margin-right: 7px;
	height: 25px;
	max-height: 25px;
	width: 25px;
}
#btn-linkedin span {
	line-height: 25px;
}
#header {
	background-image: url('blue_top_banner.png');
	height: 40px;
	padding: 15px;
	border-bottom: 1px solid purple;
	display: flex;
	color: #9695af;
	transition: 0.2s;
	position: fixed;
	width: 100%;
	z-index: 1;
}
#headerSpacer {
	height: 56px;
	transition: 0.2s;
}
#header.smallHeader:not(.expanded) #headerSpacer {
	height: 56px;
}
#header.smallHeader:not(.expanded) {
	height: 25px;
}
#header.smallHeader {
	opacity: 0.95;
}
#header.small1:not(.expanded) { opacity: 0.95; height: 40px;}
#header.small2:not(.expanded) { opacity: 0.95; height: 36px;}
#header.small3:not(.expanded) { opacity: 0.95; height: 32px;}
#header.small4:not(.expanded) { opacity: 0.95; height: 28px;}
#header.small5:not(.expanded) { opacity: 0.95; height: 25px;}

#headerMenu {
	display: flex;
	margin-left: 50px;
	/* margin-right: auto; */
	margin-top: auto;
	font-size: large;

	
}
#headerMenu input {
	display: block;
	width: 40px;
	height: 32px;
	position: absolute;
	top: -7px;
	left: -5px;
	
	cursor: pointer;
	
	opacity: 0; /* hide this */
	z-index: 2; /* and place it over the hamburger */
	
	-webkit-touch-callout: none;
}
#headerMenu span {
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	
	background: #cdcdcd;
	border-radius: 3px;
	
	z-index: 1;
	
	transform-origin: 4px 0px;
	
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				opacity 0.55s ease;

}
#headerMenu ul {
	display: flex;
	list-style-type: none;
	position: fixed;
    top: 5px;
    left: 250px;
}
#headerMenu li {
	padding-left: 20px;
	padding-right: 20px;
	cursor: pointer;
	text-decoration: none;
	
}
#headerMenu a {
	color: #9695af;
	text-decoration: none;
	font-size: large;
}
#headerMenu a:visited {
	color: #9695af;
} 
#headerMenu > ul u {
	text-decoration: underline double;
}
#headerMenu a:hover {
	color: #FF6500;
}
#headerMenu span {
	display: none;
}
@media (max-width: 767px) {
	#headerMenu {
		display: block;
		position: fixed;
		top: 23px;
		right: 30px;
		
		z-index: 1;
		
		-webkit-user-select: none;
		user-select: none;
	}
	#headerMenu span {
		display: block;
	}
	#headerMenu span:hover {
		background-color: orange;
	}
	#headerMenu ul {
		display: none;
		flex-direction: column;
		background-image: linear-gradient(135deg, #210236, black 40%, black 80%, #210236 100%);
		border-top: 1px solid purple;
		padding-left: 0;
		position: fixed;
		left: 0;
		top: 52px;
		width: 100%;
		height: calc(100% - 52px);
	}
	#header.expanded ul{
		display: flex;
	}
	#headerMenu > ul u {
		text-decoration: none;
		font-weight: bold;
	}
	#headerMenu li {
		padding-top: 15px;
		padding-bottom: 15px;
	}		
	#headerMenu li:hover {
		background-color: #542302;
	}
	#headerMenu a {
		font-size: xx-large;
	}
	#headerMenu a:hover {
		color: #9695af;
	}
}

#gregsenne_logo {
	max-width: 225px;
	min-width: 225px;
	transition: 0.5s;
}
.smallHeader #gregsenne_logo {
	/* margin-right: 25px; */
	/* max-width: 200px; */
	/* min-width: 200px; */
}

.gregTags {
	margin-top: 20px;
	margin-bottom: 20px;
}
.gregTag {
	display: inline-block;
	border: 1px solid #666;
	border-radius: 3px;
	padding: 4px 7px;
	margin: 4px;
	width: fit-content;
}


#greg1 {
	display: flex;
	min-height: 400px;
	
}
#greg1 > div {
	margin-right: 20px;
}

#greg1 > img {
	height: 440px;
	width: 395px;
}
@media (max-width: 395px) {
	#greg1 > img { 
		width: 100%;
		height: auto;
	}
}

#greg1_text {
	max-width: 1000px;
}

#greg1_text h1 {
	text-align: center;
	color: #FF6500;
}
#greg1_text h2 {
	text-align: center;
	color: #434242;
}

@media (max-width: 950px) {
	#greg1 {
		flex-direction: column-reverse;
	}
	#greg1 > div {
		margin-left: 20px;
	}
}

#greg1_name {
	text-align: center;
	display: flex;
	justify-content: center;
	margin-top: 50px;
	margin-bottom: 40px;
    font-size: xxx-large;
    font-family: 'Tw Cen MT';
}
@media (max-width: 400px) {
	#greg1_name {
		font-size: xx-large;
	}
}
@media (max-width: 300px) {
	#greg1_name {
		font-size: x-large;
	}
}

#greg1_name span {
	/* top: 20px; */
	opacity: 0;
	color: #FF6500;
	display: inline-block;
	animation: jump 0.2s ease forwards normal;
	position: relative;
}
#greg1_name span:nth-child(1) { animation-delay: 0.2s; }
#greg1_name span:nth-child(2) { animation-delay: 0.3s; }
#greg1_name span:nth-child(3) { animation-delay: 0.4s; }
#greg1_name span:nth-child(4) { animation-delay: 0.5s; }
#greg1_name span:nth-child(5) { animation-delay: 0.6s; }
#greg1_name span:nth-child(6) { animation-delay: 0.7s; }
#greg1_name span:nth-child(7) { animation-delay: 0.8s; }
#greg1_name span:nth-child(8) { animation-delay: 0.9s; }
#greg1_name span:nth-child(9) { animation-delay: 1s; }
#greg1_name span:nth-child(10) { animation-delay: 1.1s; }
#greg1_name span:nth-child(11) { animation-delay: 1.2s; }
#greg1_name span:nth-child(12) { animation-delay: 1.3s; }
#greg1_name span:nth-child(13) { animation-delay: 1.4s; }
#greg1_name span:nth-child(14) { animation-delay: 1.5s; }
#greg1_name span:nth-child(15) { animation-delay: 1.6s; }
#greg1_name span:nth-child(16) { animation-delay: 1.7s; }
#greg1_name span:nth-child(17) { animation-delay: 1.8s; }
#greg1_name span:nth-child(18) { animation-delay: 1.9s; }
#greg1_name span:nth-child(19) { animation-delay: 2s; }
#greg1_name span:nth-child(20) { animation-delay: 2.1s; }

@keyframes jump {
	0%  { opacity: 0; }
	10% { opacity: 10%; }
	20% { opacity: 20%; }
	30% { opacity: 30%; }
	40% { opacity: 40%; }
	50%{
		top: -10px;
		opacity: 50%
	}
	60% { opacity: 60%; }
	70% { opacity: 70%; }
	80% { opacity: 80%; }
	90% { opacity: 90%; }
	100% {
		top: 0px;
		opacity:100%
	}
}

#gregDesigner {
	background-color: #1c1c1c;
	color: #fff;
	padding-left: 10px;
	min-height: 400px;
	background-image: url('black_curve_transition.jpg');
    background-position: bottom;
    background-size: 100% 222px;
    background-repeat: no-repeat;
    padding-bottom: 120px;
	
}



#gregDesigner h1 {
	margin-top:0px;
	margin-bottom: 0px;
	padding-top: 10px;
}
#gregDesigner h3 {
	color: #FF6500;
	font-family:'Times New Roman', Times, serif;
	font-style: italic;
	margin-bottom: 20px;
	margin-top: 10px;
}
#gregDev {
	margin-top: -70px;
	padding-left: 10px;
	padding-right: 10px;
}
@media (max-width: 1000px) {
	#gregDesigner {
		padding-bottom: 150px;
	}
	#gregDev {
		margin-top: -30px;
	}
}
@media (max-width: 600px) {
	#gregDesigner {
		padding-bottom: 180px;
	}
	#gregDev {
		margin-top: -20px;
	}
}
#gregDev h1 {
	text-align: right;
	margin-top: 0px;
	margin-right: 10px;
	padding-top: 10px;
	width: 100%;
	/* text-align: right; */
}
#gregDev h3.childA {
	margin-bottom: 0px;
	text-align: center;
	color: #6d49c6;
	font-weight: bold;
}
#gregDev h3.childB {
	margin-top: 0px;
	text-align: center;
	color: #7b7688;
}
#gregDev .gregTags {
	text-align: right;
	
}
#gregDev .gregTag:hover {
	border-color: #6d49c6;
	color: #6d49c6;
	cursor: default;
}
#gregDev .gregTags:hover {
	cursor: default;
}
#gregDev ul {
	text-align: left;
}
#gregDev li {
	margin-bottom: 10px;
}

#gregManager {
	background-color: #330c91;
	background-image: url('PurpleVSbackground.jpeg');
	background-size: cover;
	color: #fff;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}
#gregManager h1 {
	margin-top: 0px;
	padding-top: 10px;
	width: 100%;
	text-align: center;
}
#gregManager h2 {
	margin-bottom: 20px;
}
#gregManager h3 {
	text-align: center;
	color: #41a1b3;
}
#gregManager_logos {
	text-align: center;
	margin-top: 20px;
}

#gregMentor {
	padding-left: 20px;
	padding-right:20px;
}

#gregAbout {

    background-image: linear-gradient(180deg, #000 0px, transparent 40px), 
					  linear-gradient(165deg, #633402, #ab5802 60px, transparent 160px);

}
#gregAbout > * {
	padding-left: 20px;
	padding-right: 20px;
}

#gregAbout > h1 {
	margin-top: 0;
	padding-top: 20px;
}

#gregAbout .items {
	display: flex;
	flex-direction: column;
	padding-left: 50px;
	padding-right: 50px;
	width: fit-content;
}
#gregAbout .item {
	display: flex;
	text-decoration: none;
	/* margin: 20px 50px; */
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid gray;
	border-radius: 10px;
	padding: 12px 20px;

	cursor: pointer;
	color: #333;
}
#gregAbout .item:hover {
	background-color: #dddee0;
	color: #333;
}
#gregAbout .item:visited {
	color: #333;
}

#gregAbout .item > svg {
	width: 40px;
	height: 40px;
	max-height: 40px;
	margin-right: 15px;
}
#gregAbout .item  h4 {
	font-size: larger;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 0px;
}


#footer {
	background-color: black;
	color: white;
	padding: 20px;
}

#footer .item {
	display: flex;
	margin-bottom: 45px;
}
#footer .item svg {
	width: 30px;
	height: 30px;
	max-width: 30px;
	margin-right: 15px;
	fill: #9a6606;
}
#footer .item a {
	text-decoration: none;
}

#footer .item a, #footer .item a:visited {
	color: #8a8a8a;
}
#footer .item a:hover {
	color: #9a6606;
}

#gregContact {
	background-color: black;
	color: white;
	margin-top: 20px;
	padding: 20px;
}
#gregContact h2 {
	margin-top: 0px;
	margin-bottom: 15px;
}
#gregContact .item {
	display: flex;
	margin-left: 30px;
	margin-bottom: 15px;
}
#gregContact .item svg {
	width: 30px;
	height: 30px;
	max-width: 30px;
	margin-right: 15px;
	fill: white;
}
#gregContact .item.ohio {
	margin-top: 50px;
	margin-bottom: 60px;
}
#gregContact .item.ohio svg {
	width: 90px;
	height: 90px;
	max-width: 90px;
	
}


#ohio {
	width: 100px;
	max-width: 100px;
	fill: white;
}



#exp_header {
	min-height: 60px;
	padding: 20px 15px 70px 15px;
	background-color: rgb(0, 0, 0);
	color: #eee;
	background-image: linear-gradient(5deg, green, black 20%);

}

#exp_header h1 {
	margin: 0;
}
#ribbit_logo {
	fill: #1EC677;
	width: 300px;
}
#exp_ribbit {

}
#exp_ribbit_header {
	padding: 20px 10px 10px 30px;
	background-image: linear-gradient(170deg, green, black 146px);
}
#exp_ribbit .positions {
	padding: 30px 10px 10px 10px;
	background-image: linear-gradient(180deg, black, transparent 30px);
}

.position {
	margin-left: 20px;
}
.position:not(:last-of-type) {
	margin-bottom: 40px;
}
.position_date {
	margin-bottom: 20px;
}
#cfs_logo {
	width: 300px;
}
#cfs_logo .cls-1 {
	fill: #23772d;
}
#cfs_logo .cls-2 {
	fill: #231f20;
}
#exp_cfs {
	margin-top: 40px;
}
#exp_cfs_header {
	border-top: 8px double green;
    padding: 20px 10px 10px 30px;
    background: linear-gradient(180deg, #666, transparent 80px);
}
#exp_cfs .positions {
	padding: 30px 10px 10px 10px;
}
#exp_lng {
	margin-top: 40px;
}
#exp_lng_header {
	border-top: 8px double #e8171f;
	padding: 20px 10px 10px 30px;
}
#lng_logo {
	width: 300px;
}
#exp_lng .positions {
	padding: 30px 10px 10px 10px;
}
#exp_free {
	margin-top: 40px;
	background: linear-gradient(135deg, #3b0080, black);
	color: white;
	padding-bottom: 100px;
}
#exp_free_header {
	border-top: 8px double purple;
	padding: 20px 10px 10px 30px;
}
#exp_free_header h1 {
	margin: 0px;
}
#exp_free h2 {
	margin: 0;
}
#exp_free .positions {
	padding: 30px 10px 10px 10px;
}
#exp_free .highlight {
	color: orange;
	margin-bottom: 20px;
	font-style: italic;
	font-family: 'Times New Roman', Times, serif;
}



#credHeader {
	min-height: 60px;
	padding: 20px 15px 70px 15px;
	background-color: rgb(0, 0, 0);
	color: #eee;
	
    background-image: 
		linear-gradient(180deg, transparent, transparent 90%, white), 
		linear-gradient(45deg, transparent, #006eff 100%), 
		linear-gradient(155deg, #0ac500, transparent 30%);


}
#credHeader > div {
	font-size: larger;
}

#aap {
	display: flex;
	padding: 30px 20px;
}
#aapLogo {
	width: 400px;
	margin-top: 20px;
	margin-right: 30px;
}
@media (max-width: 400px) {
	#aapLogo {
		width: 100%;
	}
}
#psm {
 	display: flex;
	padding: 30px 20px;	
}
#psmLogo {
	margin-right: 30px;
	width: 200px;
	max-width: 200px;
	height: 200px;

}
#sinclair {
	display: flex;
	padding: 30px 20px;
	margin-bottom: 50px;
}
#sinclairLogo {
	width: 250px;
	min-height: 186px;
	margin-top: 20px;
	margin-right: 30px;
}
@media (max-width: 899px) {
		#aap, #psm, #sinclair {
			flex-direction: column;
		}
		#psmLogo, #aapLogo, #sinclairLogo {
			margin-left: auto;
			margin-right: auto;
		}
}