/* --------- Text Styles ---------*/

body {
	font-family: 'Roboto', sans-serif;
	margin: 0px;
	padding: 0px;
	border: 0px;
	position: relative;
}

a {
	color: #EA7A77;
	font-weight: 500;
	text-decoration: none;
}

a:hover {
	color: #9E2535;
}

.active-page {
	color: #9E2535;
	border-bottom: 1.5px solid #EA7A77;
}

.active-page:hover {
	color: #EA7A77;
}

h1 {	/*index page -- header/tagline*/
	color: #EA7A77;
	font-weight: 500;
	font-size: 1.15em; /*browser default is 16pt*/
}

.head-tag {
	color: #848484;
	font-weight: 400;
	font-size: 1em;
}

h2 {	/*index page -- item header names*/
	font-size: 1.12em;
	color: #000;
	margin-bottom: 0;
}

h3 {	/*portfolio project pages -- page header + section headers*/
	font-size: 1.4em;
	color: #9E2535;
	font-weight: 500;
	text-align: center;
	padding: .5em 0;
}

h4 {	/*portfolio project pages -- page tagline + section subheaders*/
	font-size: 1em;
	color: #EA7A77;
	font-weight: 400;
	margin-top: 1.33em;
	margin-bottom: 0;
}

h5 {	/*index page -- section headers*/
	color: #9E2535;
	font-weight: 700;
	font-size: 1.4em;
	text-transform: uppercase;
	letter-spacing: .02rem;
	text-align: center;
	margin: 0;
	padding: .4em 0 .2em;
}

.keyword-light {
	font-weight: 500;
	color: #EA7A77;
}

.keyword-heavy {
	font-weight: 700;
	color: #000;
}

.page-title {	
	font-size: 1.6em;
	text-align: center;
	margin: 0;
	padding: .25em 0;
}

.page-tagline {
	margin: 0;
	text-align: center;
}

.section-head {
	text-align: left;
	margin: 0 0;
	padding: 0 0;
}

.section-subhead {
	font-size: 1.2em;
	margin-top: 2em;
	margin-bottom: .75em;
	text-transform: uppercase;
	font-weight: 500;
}

p {
	font-size: .9em;
	line-height: 1.7;
	color: #000;
	font-weight: 400;
	margin-top: .25em;
}

.inline-bullet-list {
	font-size: .9em;
	line-height: 1.8;
}

.footer-links {
	margin: .5em 0;
}

.footer-links a {
	font-size: 1.1em;
	color: #9E2535;
}

.footer-links a:hover {
	color: #FFF;
}

.copyright {
	font-size: .75em;
	margin: .5em 0;
}

.primary-text ul {
	padding-left: 1em;
}

.artifact-img img {
	margin: .25em 0 .75em;
}

.artifact-caption {
	font-size: .8em;
	font-weight: 400;
	font-style: italic;
	text-align: center;
	line-height: 1.4;
}


/* --------- Layout Containers ---------*/

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.container {
	flex-grow: 1;
}

.container,
.footer-content {
	display: flex;
	flex-direction: column;
	margin: 0 16px;
}

.primary-text {
	margin: 1em 10px .75em;
}

.navbar {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 25px;
	margin-bottom: 0;
}

.main-content,
.main-content-text {
	display: flex;
	flex-direction: column;
}

.section-divider-top,
.section-divider {
	margin-bottom: 1.75em;
}

.section-divider {
	margin-top: 2.5em;
}

.section-line {
	border-top: 1.5px solid #B8B8B8;
}

.intro {
	padding: 18px 0 25px;
	text-align: center;
}

/*.archive-intro {
	margin-bottom: 30px;
	text-align: center;
}*/

.page-header {
	width: 100%;
	margin: 1.5em 0 1em 0;
}

.thumbnail {
	text-align: center;
	margin-bottom: 3em;
	background-color: #FCFCFC;
	box-shadow: 0 4px 2px rgba(0, 0, 0, 0.12);
}

.thumbnail:hover {
	opacity: .65;
}

.footer {
	background-color: rgba(234, 122, 119, 0.4);
	text-align: center;
	width: 100%;
	flex-shrink: 0;
	padding: 2em 0;
	margin-top: 4em;
}

.iframe-container,
.video-container {
	position: relative;
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1.5em;
	padding-bottom: 56.25%;
}

.iframe-container iframe,
.video-container video { 
	position: absolute; 
	top:0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

.walkthrough-gif {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	height: auto;
}

.test-border {
	border: 2px solid pink;
}

.walkthrough-gif img { /*vertical stretching issues on tablet, set height value instead of width to fix*/
	/*width: 60%;*/
	object-fit: contain;
	height: 50vh;
}

/* --------- Layout Items ---------*/

.nav-links {
	display: flex;
	list-style-type: none;
	margin: 15px 0 10px;
	padding:0;
}

.nav-links li {
	margin: 0 15px;
	text-align: center;
}

.nav-links li a {
	text-transform: uppercase;
}

.nav-links li a:hover {
	border-bottom: 1.5px solid #EA7A77;
}

.thumbnail img,
.thumbnail-archive img,
.about-photo img,
.cover-img img,
.artifact-img img {
	object-fit: cover;
	width: 100%;
}

.thumbnail img {
	height: 300px;
}

.cover-img {
	margin: 1.1em 0;
}

.about-photo img {
	margin-top: 1em;
	margin-bottom: .5em;
}

.thumbnail p {
	margin: .15em 0 1em 0;
}

.extra-img-space {
	margin-bottom: 1.5em;
}


/* --------- Archive Image Overlay Effect ---------*/

/*.thumbnail-archive {
 	position: relative;
}

.overlay-archive {
	position: absolute;
	top: 55%;
	bottom: 0;
	left: 0;
	right: 0;
	height: 55px;
	width: 100%;
	opacity: 1;
	background-color: rgba(0,0,0,.8);
}

.thumbnail-archive:hover .overlay-archive {
	opacity: 1;
}

.overlay-text {
	color: white;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}
*/



/* --------- MEDIA QUERIES ---------*/
/* --------- MEDIA QUERIES ---------*/
/* --------- MEDIA QUERIES ---------*/


@media only screen and (min-width: 768px) {   /* Tablet size screens */


	/* --------- Text Styles */

	.primary-text p,
	.inline-bullet-list {
		font-size: 1em;
		line-height: 2;
	}

	.footer-links a {
		font-size: 1.1em;
	}

	.page-head {
		font-size: 1.5em;
	}

	.head-tag {
		font-size: 1.25em;
	}

	.intro p {
		font-size: 1em;
	}

	.page-title {
		font-size: 1.7em;
	}

	.section-head {
		font-size: 1.6em;
	}

	.section-subhead {
		font-size: 1.3em;
	}

	.artifact-caption {
		font-size: .9em;
	}

	h5 {
		font-size: 1.5em;
		text-align: left;
	}


	/* --------- Layout Containers */

	.container,
	.footer-content {
		margin: 0 auto;
		width: 734px;
	}

	.main-content,
	.main-content-text {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
/*		margin: 0 auto;  --  adds left/right margin on UX design section in Firefox*/
	}

	.main-content-text {
		width: 650px;  /*originally set to 550px*/
		margin: 0 auto;
	}

	.logo {
		width: 255px;
	}

	.navbar {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 0;
		padding-top: 0;
		height: 100px;
	}

	.nav-links {
		margin: 0 0 15px 0;
	}

	.thumbnail {
		width: 48%;
	}

	.thumbnail img {
		height: 250px;
	}

	.footer-content {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.intro {
		padding: 0 30px 35px;
	}

	.primary-text {
		/*margin: 0 0;*/
	}

	.section-divider {
		margin-top: 3em;
	}

	.walkthrough-gif img {
		/*width: 40%;*/
	}

}


@media only screen and (min-width: 1100px) {   /* desktop/laptop size screens */

	/* --------- Text Styles */

	.page-head {
		font-size: 1.75em;
	}

	.head-tag {
		font-size: 1.5em;
	}

	.intro p {
		font-size: 1.25em;
	}

	.page-title {
		font-size: 2em;
	}

	.page-tagline {
		font-size: 1.25em;
	}

	.artifact-caption {
		font-size: 1em;
	}

	.copyright {
		font-size: .8em;
	}

	h5 {
		font-size: 1.65em;
		padding-top: .45em;
	}


	/* --------- Layout Containers */

	.container,
	.footer-content {
		width: 1200px;
	}

	.main-content-text {
		justify-content: center;
		width: 780px;
	}


/*---- temp here while Green Bites is disabled ----*/
	.main-content {
		/*justify-content: center;*/
	}

	.thumbnail {
		width: 31%; /*width setting stays even when Green Bites is re-enabled*/
		/*margin: 0 .8em 2em; *//*remove when Green Bites is enabled again*/
	}
/*-----*/


	.about-image img {
		height: 600px;
	}

	.intro {
		padding: 10px 30px 42px;
	}

	.section-divider-top,
	.section-divider {
		margin-bottom: 2.25em;
	}

	.walkthrough-gif {
		flex-wrap: nowrap;
	}

	.walkthrough-gif img {
		/*width: 33%;*/
	}

	.footer {
		margin-top: 4.5em;
	}

}