/* General Formatting */

body, html {
	height: 100%;
	background-color: #fbfbfb;
}

p {
	font-family: 'Lato', sans-serif;
}

/* Parallax Scrolling Effect
Reference: https://www.w3schools.com/howto/howto_css_parallax.asp
///////////////////////////////
*/

.parallax {
	/* Image Used */
	background-image: url('../img/Kinderdijk_Background.JPG');
	 /* Full height */
	min-height: 100%;
}

.parallax2 {
	/* Image Used */
	background: url('../img/Kinderdijk_Divider.JPG');
	/* Photo Size */
	min-height: 200px;
}

.parallax3 {
	/* Image Used */
	background: url('../img/City_Background.JPG');
	/* Photo Size */
	min-height: 100%;
}

.parallaxMinerva {
	/* Image Used */
	background-image: url('../img/Sky_Background.jpg');
	/* Photo Size */
	min-height: 100%;
}

.parallaxDivider {
	/* Image Used */
	background: url('../img/Kinderdijk_Divider_Dark.JPG');
	/* Photo Size */
	min-height: 200px;
}

.parallax, .parallax2, .parallax3, .parallaxMinerva, .parallaxDivider {
	position: relative;
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Turn off parallax scrolling for all tablets and phones.*/
@media only screen and (max-device-width: 1366px) {
  .parallax, .parallax2, .parallax3, .parallaxMinerva, .parallaxDivider {
    background-attachment: scroll;
  }
}

/* Welcome
///////////////////////////////
*/
/*.indexBorder {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
	margin: 1em;
	padding: 1em;
	outline: 5px solid #fbfbfb;
	outline-offset: -5px;
	text-align: center;
}*/

.Welcome {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 1em;
	padding: 1em;
	outline: 5px solid #fbfbfb;
	outline-offset: -5px;
	text-align: center;
}

.WelcomeText {
	font-family: 'Indie Flower', cursive;
	font-size: 2.5em;
	color: #fbfbfb;
	line-height: 1em;
}

.WelcomeName {
	font-family: 'Indie Flower', cursive;
	font-size: 4em;
	color: #fbfbfb;
}

.WelcomeEllipse {
	font-family: 'Indie Flower', cursive;
	font-size: 4em;
	color: #fbfbfb;
	line-height: 0;
}

/* Profile
///////////////////////////////
*/
.container {
	width: 100%;
}

.Profile {
	width: 100%;
	padding: 1em;
	display: table;
	background-color: #fbfbfb;
}

* {
	box-sizing: border-box;
}

.ProfilePic {
	float: left;
	width: 40%;
	padding: 1em;
	min-height: 480px;
	display: table-cell;
	vertical-align: middle;
}

.ProfileContent {
	float: left;
	width: 60%;
	padding: 1em;
	min-height: 480px;
	display: table-cell;
	vertical-align: middle;
}

.ResponsiveRow:after {
	content: "";
	clear: both;
}

.SectionTitle {
	font-family: 'Indie Flower', cursive;
	font-size: 4em;
	color: #323C3C;
	text-align: center;
	line-height: 1em;
}

.SectionUnderline {
	width: 5em;
	border-top: 0.1em solid #BEBFB0;
}

.avatar {
	width: 80%;
	border-radius: 50%;
	vertical-align: middle;
	display: table-cell;
	margin: auto;
}

.ImgSm {
	display: none;
}

.details {
	text-align: center;
}

.highlight {
	font-weight: 800;
	color: #a78d64;
}

.highlightLink:hover {
	color: #323c3c;
}

@media (max-width: 1300px) {
	.ProfilePic {
		width: 100%;
		min-height: 0;
	}

	.ProfileContent{
		width: 100%;
		min-height: 0;;
	}

	.ImgSm {
		display: table-cell;
	}

	.ImgLg {
		display: none;
	}

	.avatar {
		width: 14em;
		height: 14em;
	}

	.Profile .content {
		padding: 0;
		margin: 0;
	}

	.SectionTitle {
		font-size: 3em;
	}

}

/* Resume
///////////////////////////////
*/

.Resume {
	padding: 1em;
	padding-top: 2em;
	width: 100%;
	position: relative;
	background-color: #2e373d;
}

.SectionTitleDark {
	font-family: 'Indie Flower', cursive;
	font-size: 4em;
	color: #BEBFB0;
	text-align: center;
	line-height: 1em;
}

.SectionSubTitleDark {
	font-family: 'Indie Flower', cursive;
	font-size: 2em;
	color: #BEBFB0;
	line-height: 1em;
	width: 100%;
}

.Dark {
	font-family: 'Lato', sans-serif;
	color: #fbfbfb;
}

@media (max-width: 1300px) {
	.SectionTitleDark {
		font-size: 3em;
	}
}

/* Work Experience Timeline
// Reference: https://codepen.io/chriswrightdesign/pen/XJzNBN/
*/

.line {
	display: inline-block;
}

.JobTitle {
	font-family: 'Lato', sans-serif;
	font-size: 1.5em;
	color: #fbfbfb;
}

.JobCompany {
	font-family: 'Lato', sans-serif;
	font-size: 1.5em;
	color: #fbfbfb;
	font-style: italic;
}

.JobDates {
	font-family: 'Lato', sans-serif;
	font-size: 0.8em;
	color: #bebfbd;
	opacity: 0.8;
	font-style: italic;
	float: right;
}

.VolunteerTitle {
	font-family: 'Lato', sans-serif;
	font-size: 1.5em;
	color: #fbfbfb;
}


.VolunteerCompany {
	font-family: 'Lato', sans-serif;
	font-size: 1.5em;
	color: #fbfbfb;
	font-style: italic;
}

.VolunteerDates {
	font-family: 'Lato', sans-serif;
	font-size: 0.8em;
	color: #bebfbd;
	opacity: 0.8;
	font-style: italic;
}

.JobDescription {
	font-family: 'Lato', sans-serif;
	color: #fbfbfb;
}

.highlightDark {
	font-weight: 800;
	color: #BEBFB0;
}

.highlightDarkLink:hover {
	color: #fbfbfb;
}

.highlightSkill {
	font-weight: 800;
	color: #2e373d;
	background-color: #BEBFB0;
	padding: 8px 12px;
	border-radius: 4px;
	border: solid 1px #BEBFB0;
	line-height: 2.7em;
}

/* Publications
///////////////////////////////
*/

.Publication {
	padding: 1em;
	padding-top: 2em;
	position: relative;
	width: 100%;
	background-color: #fbfbfb;
}

.PublicationTitle {
	font-family: 'Lato', sans-serif;
	color: #fbfbfb;
	font-size: 2em;
	line-height: 1em;
	width: 100%;
	color: #323C3C;
}

.PublicationPlace {
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.PublicationCitation {
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.PublicationItem {
	font-family: 'Lato', sans-serif;
	font-size: .75em;
	line-height: 1em;
}

.referenceLink {
	font-family: 'Lato', sans-serif;
	font-style: italic;
	font-weight: 800;
	line-height: 1em;
	color: #a78d64;
}

.referenceLink:hover {
	color: #323c3c;
}

/* Project Details
///////////////////////////////
*/
/* Return Button */
.FloatButton {
	position: fixed;
	width: 100px;
	height: 60px;
	bottom: 40px;
	right: 40px;
	background-color: #BEBFB0;
	color: #2e373d;
	border-radius: 50px;
	text-align: center;
	box-shadow: 0px 6px #999;
	z-index: 5;
}

.FloatButton:hover {
	background-color: #2e373d;
	color: #BEBFB0;
}

.FloatButton:active {
	background-color: #2e373d;
	color: #BEBFB0;
	box-shadow: 0 3px #999;
	transform: translateY(3px);
}

.my-float{
	margin-top: 22px;
}

/* Title */
.Welcome2 {
	margin: 1em;
	padding: 1em;
	text-align: center;
}

.ProjectWelcome {
	margin: 0 auto;
	padding-top: 3em;
	padding: 1em;
	text-align: center;
	max-width: min(80%, 900px);
}

.ProjectWelcomeText {
	font-family: 'Indie Flower', cursive;
	font-size: 4em;
	color: #fbfbfb;
	line-height: 1em;
}

.ProjectWelcomeEllipse {
	font-family: 'Indie Flower', cursive;
	font-size: 4em;
	color: #fbfbfb;
	line-height: 0;
}

.ProjectIntro {
	font-family: 'Lato', sans-serif;
	color: #fbfbfb;
	font-size: 1.1em;
}

/* Empathize */
.Persona {
	width: 100%;
	min-height: 100%;
	padding: 1em;
	display: table;
	background-color: #fbfbfb;
}

.PersonaContent {
	text-align: center;
	margin: 0px auto;
	padding: 1em;
}

.avatarPersona {
	width: 50%;
	border-radius: 50%;
	vertical-align: middle;
	display: table-cell;
	margin: auto;
	padding: 1em;
}

.PersonaName {
	font-family: 'Indie Flower', cursive;
	font-size: 2em;
	color: #323C3C;
	line-height: 1em;
	width: 100%;
}

.PersonaDescription {
	text-align: center;
	padding-left: 1em;
	padding-right: 1em;
}

/* Define */
.Define {
	padding: 1em;
	padding-top: 2em;
	width: 100%;
	position: relative;
	background-color: #2e373d;
	min-height: 100%;
}

.DefineContent {
	margin: 0 auto;
	text-align: center;
	max-width: min(80%, 900px);
}

.DefineDescription {
	padding-top: 1em;
	font-family: 'Lato', sans-serif;
	color: #fbfbfb;
}

.noBullet {
	list-style-type: none;
}

.stat {
	font-size: 1.5em;
	color: #BEBFB0;
	font-weight: 1000;
}

.emphasis {
	font-weight: 1000;
	font-size: 1.2em;
}

.References, .Reference {
	font-size: 0.8em;
	text-align: left;
	color: #BEBFB0;
}

.Reference:hover {
	font-size: 0.8em;
	text-align: left;
	color: #BEBFB0;
	text-decoration: underline;
}

/* Ideate */
/* Note: This section uses a lot of the emphathize/persona formatting */
.IdeaSubTopic {
	font-weight: 1000;
	text-align: left;
}

.IdeaContent {
	text-align: center;
	margin: 0px auto;
	padding-left: 2em;
	padding-right: 2em;
	padding-bottom: 2em;
	padding-top: 1em;
	max-width: 90;
}

.IdeaDescription {
	text-align: left;
	padding-left: 1em;
	padding-right: 1em;
}

.bulletIndent {
	margin-left: 20px;
}

/* Prototype */
.Prototype {
	margin: 1em;
	padding: 1em;
	text-align: center;
}

.PrototypeDemo {
	padding-top: 1em;
}

/* Contact
///////////////////////////////
*/
.Contact {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
	margin: 1em;
	padding: 1em;
	outline: 5px solid #fbfbfb;
	outline-offset: -5px;
	text-align: center;
}

.fas, .fab {
	font-family: 'Lato', sans-serif;
	color: #323C3C;
	font-size: 4em;
	vertical-align: middle;
}

.fas:hover, .fab:hover {
	-webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

.contactRow {
	display: block;
	margin: 0 auto;
}

.contactInfo {
	font-family: 'Lato', sans-serif;
	color: #FBFBFB;
	font-size: 3em;
	vertical-align: middle;
	line-height: 2em;
}

.contactLink {
	font-family: 'Lato', sans-serif;
	color: #FBFBFB;
	padding: 1em;
}

.contactLink:hover {
	color: #BEBFB0;
	font-weight: 800;
}


/* Font Options
///////////////////////////////
font-family: 'Lato', sans-serif;
font-family: 'Indie Flower', cursive;
*/