#pageContainer #portfolioPageContent {
	width: 750px;
	text-align: center;
	margin-top: 4em;
}



#portfolioPageContent .section {
	margin: 2em 0 4em 0;
	padding: 0 10%;
	text-align: left;
}



#portfolioPageContent h1.header .icon {
	vertical-align: baseline;
}



#aboutMeSection {
	margin-bottom: 1em !important;
}

#technologiesSection {
	margin-bottom: 2em;
}

.techSkillzContainer {
	position: relative;
	border-radius: 3px;
	border-top-left-radius: 0;
	padding: 0.5em 2em 2em;
	width: 100%;
	margin-bottom: 6px;

	-webkit-transition: width 0.15s ease-in-out;
    -moz-transition: width 0.15s ease-in-out;
    -o-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;

	-webkit-transition: "box-shadow" 0.15s ease-in-out;
    -moz-transition: "box-shadow" 0.15s ease-in-out;
    -o-transition: "box-shadow" 0.15s ease-in-out;
    transition: "box-shadow" 0.15s ease-in-out;
}

.techSkillzContainer:hover {
	width: calc(100% + 0.5em);
	box-shadow: 3px 3px 5px -1px #999;
}

.techSkillzContainer > h4 {
	position: absolute;
	rotate: -90deg;
	padding: 0.25em 0.5em;
}


.techSkillzContainer.expert {
	background-color: #ffdcef;
}

.techSkillzContainer.expert > h4 {
	background-color: #ffdcef;
	top: 22px;
	left: -48px;
}

.techSkillzContainer.advanced {
	background-color: #e0e8ff;
}

.techSkillzContainer.advanced > h4 {
	background-color: #e0e8ff;
	top: 36px;
	left: -62px;
}


.techSkillzContainer.intermediate {
	background-color: #fffee0;
}

.techSkillzContainer.intermediate > h4 {
	background-color: #fffee0;
	top: 49px;
	left: -76px;
}


.techSkillzContainer.beginner {
	background-color: #d9ffd2;
}

.techSkillzContainer.beginner > h4 {
	background-color: #d9ffd2;
	top: 32px;
	left: -59px;
}

.techSkillzContainer > ul,
.techSkillzContainer > ul > li {
	list-style-type: none;
}

.techSkillzContainer > ul {
	padding-left: 0;
}

.techSkillzContainer > ul > li {
	padding: 0.35em 0;
	position: relative;
}

.techSkillzContainer ul .icon:not(.corner) {
	padding-right: 1.5em;
}


.techSkillzContainer .regexSymbol {
	font-size: 1.5em;
	font-weight: bolder;
	padding-right: 0.35em;
}

.techSkillzContainer > ul ul {
	list-style-type: "- ";
	padding-inline-start: 3.5em;
}


.techSkillzContainer .text-superscript {
	font-size: 0.8em;
	vertical-align: text-bottom;
}

.jsLogoIcon {
	position: relative;
	z-index: 1;
}

.jsLogoIcon::after {
	content: "";
    height: 10px;
    width: 14px;
    background-color: black;
    position: absolute;
    top: 8px;
    left: 3px;
    z-index: -1;
}

.customLogoIcon,
#jqueryIconContainer {
	margin: 0;
	padding: 0 1px 0 0;
	display: inline;
	vertical-align: text-top;
}

.customLogoIcon > img,
#jqueryIconContainer > img {
	height: 18px;
	width: 18px;
	margin: 0;
}


#FomanticUIIconContainer {
	margin-right: 0.5em;
}


#FomanticUIIconContainer > img {
	height: 15px;
	width: 15px;
}


#doublePlusIcon {
	display: inline-block;
	margin-right: 1em;
	text-shadow: none;
}

#doublePlusIcon * {
	text-shadow: none;
}





#workSection > .header {
	margin-bottom: 2em;
}




#educationSection .item {
	text-align: center;
	margin: 1.5em 0;
	border-radius: 4px;
	padding: 1em;
	/* background-color: rgba(137,32,52,0.2); */
	color: #333;
}

#educationSection .item:hover {
	color: #000;
}

#educationSection .item.vcsu:hover {
	background-color: rgba(137, 32, 52, 0.2);
}

#educationSection .item.mstate:hover {
	background-color: rgba(0, 45, 98, 0.2);
}

#educationSection .item.lbs:hover {
	background-color: rgba(122, 22, 20, 0.2);
}

#educationSection .item.ndsu:hover {
	background-color: rgba(0, 72, 51, 0.2);
}

#educationSection .item.jhs:hover {
	background-color: rgba(0, 38, 178, 0.2);
}


#educationSection .spacer {
	width: calc(60%);
	height: 1px;
	border-top: 1px solid var(--lab-purple-alpha-point50);
	margin: 0 20%;
}


#mailgunLogo {
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.75em;
}

#composerLogoContainer {
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.6em;
	margin-left: -3px;
}

#composerLogoContainer > img {
	height: 32px;
}



#progressLogoContainer {
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.9em;
    margin-left: -2px;
}

#progressLogoContainer > img {
	height: 24px;
}




@media only screen and (max-device-width: 480px) {

	#portfolioPageContent h1.header {
		white-space: normal;
	}

	#portfolioPageContent h1.header::before,
	#portfolioPageContent h1.header::after {
		width: auto;
	}

}




@media only screen and (max-device-width: 480px) {

	#portfolioPageContent {
		padding: 2em 0.5em !important;
	}

    #portfolioPageContent .section {
		padding-right: 1em;
	}

}