/***************
Table of Contents

1. Reset
2. Layout Master elements
3. Typography Styles
4. Background & font color styles
5. Reusable padding and widths
6. Primary Navigation
7. JAVASCRIPT Styles
	a. Progress Bar (javascript)
	b. Shrink Header on Scroll (javascript)
8. Home page styles
9. Dress for Success styles
10. Austin Bouldering Project styles
11. About page styles
12. Contact page styles
13. Button styles
14. Back to top button
15. Footer styles

/* end table of contents */
/***************/

/***************
MEYER RESET
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Default Styles Below*/

/************************************
MASTER LAYOUT
************************************/

body {
	margin: auto 0;
}

img {
	width: 100%;
}

main {
}

html {
	scroll-behavior: smooth;
}
/************************************
COLORS
************************************/

html {
	color: #232323;

	--c-grn: rgb(230,242,238);
	--c-drk-grn: rgb(46,77,66);

	--c-lght-blu: #F2F7FC;
	--c-blu: rgb(92, 165, 252);
	--c-drk-blu: rgb(54,55,56);

	--c-lght-brwn: rgb(242,238,230);
	--c-drk-brwn: rgb(77,67,46);

	--c-prpl: rgb(232, 230, 242);
	--c-drk-prpl: rgb(51,46,77);

	--c-black: #232323;
}

/************************************
TYPOGRAPHY
************************************/
body {
	font-size: 16px;
}
html {
	font-family: objektiv-mk1, sans-serif;

	--f-primary: 'objektiv-mk2', sans-serif;
	--f-secondary: 'objektiv-mk1', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-secondary);
	line-height: 2;
	color: black;
}
h1 {
	font-size: 52px;
	font-weight: 700;
	text-transform: capitalize;
}
h2 {
	font-size: 48px;
	font-weight: 600;
}
h3 {
	font-size: 37px;
	font-weight: 600;
	text-transform: capitalize;
}
h4 {
	font-size: 28px;
	font-weight: 600;
}
h5 {
	font-size: 24px;
	font-weight: 600;
}
h6 {
	font-size: 1.3em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}
p {
	font-family: var(--f-primary), sans-serif;
	font-size: 16px;
	line-height: 1.8;
	padding-bottom: 2em;
	letter-spacing: .25px;
	font-weight: 300;
	color: #292a2c;
}
p strong {
	font-weight: 500;
}
li {
	padding: 2% 1%;
	font-family: var(--f-primary);
	line-height: 1.7;
}
@media screen and (min-width: 1600px) {
	p, li {
		font-size: 1.2em;
	}
}
a {
	text-decoration: none;
}
main a {
	color: #4d4dff;
	border-bottom: 1px solid #4d4dff;
}
strong {
	font-weight: 700;
}
blockquote {
	font-size: 1.7em;
	border-left: 3px solid var(--c-drk-prpl);
	line-height: 1.3;
	padding: 2% 0 2% 2%;
	font-family: var(--f-primary);
}
/************************************
TYPOGRAPHY styles
************************************/
.study-title, .study-sub-title {
	padding: 2%;
	text-align: center;
	margin: auto;
	line-height: 1.8;
	color: #2d3240;
}
.study-title {
	letter-spacing: -1px;
	font-weight: 700;
}
.study-sub-title {
	font-weight: 700;
	font-size: 1.2em;
	padding-bottom: 4%;
}
.body-lrg {
	font-size: 20px;
	font-weight: 700;
}
.body-2 {
	font-size: 14px;
}

.hghlght {
	 background: linear-gradient(0deg, rgba(246,65,47,.2) 50%, transparent 20%);
	 font-weight: 700;
}

/************************************
BACKGROUND & FONT COLOR styles
************************************/
.f-grn {
	color: var(--c-grn);
}
.f-drk-grn {
	color: var(--c-drk-grn);
}
.f-prpl {
	color: var(--c-prpl);
}
.f-drk-prpl {
	color: var(--c-drk-prpl);
}
.f-lght-blu {
	color: var(--c-lght-blu);
}
.f-blu {
	color: rgb(92, 165, 252);
}
.f-drk-blu {
	color: var(--c-drk-blu);
}
.f-drk-brn {
	color: var(--c-drk-brwn);
}

.bg-prpl {
	background-color: var(--c-prpl);
}
.bg-drk-prpl {
	background-color: var(--c-drk-prpl);
}
.bg-grn {
	background-color: var(--c-grn);
}
.bg-drk-grn {
	background-color: var(--c-drk-grn);
}
.bg-wht {
	background-color: white;
}
.bg-lght-blu {
	background-color: var(--c-lght-blu);
}
.bg-drk-blu {
	background-color: var(--c-drk-blu);
}
.bg-lght-gry {
	background-color: #f4f4f4;
}
.bg-lght-brwn {
	background-color: var(--c-lght-brwn);
}
/************************************
REUSABLE PADDING & WIDTHS
************************************/
.pddng-sml {
	padding: 1%;
	margin: 0 auto;
}
.pddng-mdm {
	padding: 4%;
	margin: 0 auto;
}
.pddng-lrg {
	padding: 8%;
	margin: 0 auto;
}
.tp-pddng-xl {
	padding: 12% 0 6% 0;
}

/************************************
PRIMARY NAVIGATION
************************************/
/* grid for nav bar */
.navigation-grid {
	background-color: transparent;
	display: grid;
	grid-template-columns: 30% 70%;
	align-items: center;
	padding: 1rem;
	grid-gap: 12px;
	margin: auto;
}
/* nav links */
.nav-links-wrapper {
	text-align: right;
}
.nav-links {
	color: black;
	font-family: var(--f-primary);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1px;
	margin-right: 1rem;
	text-decoration: none;
	padding: 1%;
}
/* logo */
.site-title {
	display: none;
	color: black;
	font-family: var(--f-primary);
	font-size: 1.25rem;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	line-height: 1.6;
	padding: 1%;
}
.site-title:hover, .nav-links:hover {
	color: #4d4dff;
	transition: 250ms ease-in;
}
/* mobile logo */
.site-icon img{
	display: inline;
	height: 65px;
	width: 65px;
	padding: 0 6%;
}
.site-icon img:hover {
	transform: scale(1.1);
	transition: 300ms;
}
/* navigation changes at 750px screen width */
@media only screen and (min-width: 750px) {
	.navigation-grid {
		grid-template-columns: 1fr 1fr;
		padding: 1rem 1.75rem;
	}
	.site-title {
		font-size: 1.7rem;
		font-weight: 700;
		display: block;
	}
	.nav-title-wrapper {
		text-align: left;
	}
	.hidden {
		display: none;
	}
	.site-icon {
		display: none;
	}
}

/********************************** 
JAVASCRIPT STYLES BELOW
**********************************/

/*******************************
PROGRESS BAR
********************************/
.scroll-indicator {
  position: fixed;
  top: 99px;
  z-index: 1;
  width: 100%;
  background-color: transparent;
}
/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  background: transparent;
}
/* The progress bar (scroll indicator) */
.progress-bar {
  height: 0.3rem;
  background: var(--c-blu);
  width: 0%;
}
@media screen and (min-width: 750px) {
	.scroll-indicator {
		top: 75px;
	}
}

/******************************
SHRINK HEADER ON SCROLL
********************************/
/* js header styles */
#header {
	background-color: white;
	color: inherit;
	position: fixed; 
	top: 0;
	width: 100%;
}
/* transition for my name on scroll */
#myName {
	transition: 200ms;
}
/* allows the <main> element to be pushed down with the new header */
.main-margin-top {
	margin-top: 8rem;
}
/* end javascript styles */

/********************************** 
HOME PAGE styles
**********************************/
.hm-pg-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 16px;
	margin: 0 auto;
	max-width: 1200px;
}
.proj {
	margin: 3%;
	border-radius: 10px;
}
.proj a {
	text-decoration: none;
	border-bottom: none;
}
.abt {
	background-color: #f5f5f5;
	color: black;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	padding: 3%;
}
.proj-text {
	padding: 2% 5% 5% 5%;
}
.proj p {
	padding-bottom: 0;
}
.proj span {
	font-size: 12px;
	font-family: var(--f-primary);
}
.proj-text h5 {
	font-size: 24px;
	font-weight: 700;
}
.proj-text p {
	font-weight: 400;
	margin-bottom: .9em;
}
.dfsa {
	background-color: var(--c-lght-blu);
}
.bala {
	background-color: var(--c-prpl);
}
.abp {
	background-color: var(--c-grn);
}
.tb {
	background-color: var(--c-lght-brwn);
}
.pill-dfsa, .pill-abp, .pill-tb, .pill-bala {
	display: none;
}
@media screen and (min-width: 850px) {
	.hm-pg-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/*
		grid-template-rows: repeat (12, 1fr);
		*/
		grid-gap: 24px;
		margin: 0 auto;
		max-width: 1200px;
	}
	.abt {
		grid-column: 1;
		grid-row: 1 / span 2;
		padding: 5%;
	}
	.pill-dfsa, .pill-abp, .pill-tb, .pill-bala {
		display: inline-block;
		margin: 10px 10px 0 0;
		padding: 6px 10px;
		font-weight: 600;
		border-radius: 20px;
	}
	.dfsa {
		grid-column: 2;
		grid-row: 1 / span 3;
	}
	.pill-dfsa {
		background-color: rgba(54,55,56,.1);
		color: var(--c-drk-blu);
	}
	.pill-bala {
		background-color: rgba(51,46,77,.1);
		color: var(--c-drk-prpl);
	}
	.bala {
		grid-column: 1;
		grid-row: 3 / span 2;
	}
	.abp {
		grid-column: 2;
		grid-row: 4 / span 2;
	}
	.pill-abp {
		color: var(--c-drk-grn);
		background-color: rgba(46,77,66,.1);
		color: #373638;
	}
	.tb {
		grid-column: 1;
		grid-row: 5 / span 3;
	}
	.pill-tb {
		color: var(--c-drk-brwn);
		background-color: rgb(77,67,46, .1);
	}
}
/* end home page styles */

/****************************************
DRESS FOR SUCCESS styles
****************************************/
.content2column {
	display: grid;
	padding: 3%;
	grid-template-columns: 1fr;
	margin: auto;
}
.content2column ul li {
	list-style-type: disc;
	margin-left: 3em;
	padding-left: 0;
	line-height: 1.5;
}
.content2column ul {
	padding: 2% 0;
}
.challenge {
	color: #9ba3b8;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}
.crd-srt-rght {
	align-self: center;
}
.section-title {
	padding: 6%;
	background-color: var(--c-lght-blu);
	margin: 0 auto;
	text-align: center;
}
@media screen and (min-width: 1400px) {
	.section-title {
		font-size: 47px;
	}
}
.content2column p {
	padding-bottom: 0;
}
@media screen and (min-width: 900px) {
	.content2column {
		grid-template-columns: 1fr 1fr;
		align-content: center;
		padding: 1% 4%;
		grid-gap: 4rem;
	}
	.content2column h3 {
		grid-column: 1 / span 2;
		align-self: end;
	}
	.width1000 {
		max-width: 1000px;
	}
	.paragraphs {
		line-height: 32px;
		color: #2d3240;
		font-family: 'Montserrat', sans-serif;
		letter-spacing: .5px;
		align-self: center;
	}
	.heading {
		grid-column: 1 / span 2;
	}
	.content2column .cntn-txt {
		align-self: center;
	}
}
.num-list {
	padding: 1% 5%;
}
.num-list li {
	list-style-type: decimal;
	padding-left: 3%;
	font-weight: 300;
}
@media screen and (min-width: 700px) {
	.num-list {
		padding: 3%;
		max-width: 600px;
	}
}

.two-two-grid {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0 auto;
	padding: 0 4% 4% 4%;
}
.two-two-grid h4 {
	text-transform: uppercase;
	font-size: 1.7em;
}
.sptlght-box-700-grn {
	border: 3px solid var(--c-drk-grn);
	border-radius: 1px;
	margin: 8% auto;
	max-width: 400px;
	padding: 2%;
	box-shadow: 16px 16px var(--c-grn);
}
.sptlght-box-400, .sptlght-box-700, .sptlght-box-200 {
	border: 3px solid var(--c-drk-prpl);
	border-radius: 1px;
	margin: 8% auto;
	max-width: 400px;
	padding: 2%;
	box-shadow: 16px 16px rgb(92, 165, 252);
}
.sptlght-box-700 {
	margin: 2%;
}
.insight-two-two {
	border: 3px solid var(--c-drk-prpl);
	border-radius: 1px;
	margin: 8% auto;
	padding: 2%;
	box-shadow: 16px 16px rgb(92, 165, 252);
}
.sptlght-box-400 p, .sptlght-box-200 p {
	font-weight: 700;
	font-size: 20px;
	padding-bottom: 0;
}
.sptlght-3-grid {
	display: grid;
	grid-template-columns: 1fr;
}

.two-img-grid {
	display: grid;
	grid-template-columns: 1fr;
	margin: auto;
}
@media screen and (min-width: 1000px) {
	.two-two-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 4fr 4fr;
		max-width: 1000px;
	}
	.two-two-grid h4 {
		grid-column: 1 / span 2;
		align-self: center;
	}
	.insight-two-two {
		grid-row: 3 / span 3;
		grid-column: 1 / span 2;
	}
	.sptlght-box-700, .sptlght-box-700-grn {
		min-width: 700px;
		margin: 3% auto;
	}
	.two-img-grid {
		grid-template-columns: 1fr 1fr;
		grid-gap: 16px;
		max-width: 1300px;
		padding: 0 3% 5% 3%;
	}
	.sptlght-box-200 {
		max-width: 200px;
		padding: 5%;
		font-weight: 700;
		font-size: 1.2em;
	}
	.sptlght-box-400 {
		padding: 4%;
		min-width: 400px;
	}
	.sptlght-3-grid {
		grid-template-columns: 1fr 1fr 1fr;
		max-width: 1000px;
		margin: auto;
		padding: 0 4% 6% 4%;
	}
	.sptlght-box-700-grn p {
		font-size: 20px;
	}
}
@media screen and (min-width: 1400px) {
	.sptlght-3-grid p {
		font-size: 22px;
	}
}
.img-flex {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	max-width: 1000px;
}
.img-flex img {
	padding: 2%;
	width: 300px;
}
#covid-proj-plan {
	padding-bottom: 6%;
}

.btns-half {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 0;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
.lft-btn, .rght-btn {
	opacity: .9;
	padding: 5%;
}
.lft-btn p, .rght-btn p {
	text-transform: uppercase;
	padding: 5% 5% 0 5%;
	color: lightgray;
}
.lft-btn h4, .rght-btn h4 {
	padding: 1% 5% 5% 5%;
	font-weight: 300;
	letter-spacing: 0;
	font-size: 1.9em;
	color: lightgray;
}
.left-btn {
	text-align: left;
}
.rght-btn {
	text-align: right;
}
.lft-btn:hover, .rght-btn:hover {
	background-color: black;
	transition: 300ms ease-in;
	opacity: 1;
}
@media screen and (min-width: 700px) {
	.btns-half {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
	}
	.lft-btn {
		grid-column: 1 / span 1;
		grid-row: 1;
	}
	.rght-btn {
		grid-column: 2 / span 1;
		grid-row: 1;
	}
}
/* */

.next-case-study {
	max-width: 1300px;
	text-align: right;
	margin: 1%;
	padding: 1% 8%;
	opacity: 0;
}
.next-case-study p {
	font-family: var(--f-secondary);
	text-transform: uppercase;
	margin: 0 auto;
	letter-spacing: 2px;
	border-bottom: none;
	padding-bottom: 0;
	color: black;
}
.next-case-study:hover {
	opacity: 1;
	transition: 300ms ease-in;
}

#figma {
	padding: 2%;
	margin: auto;
	max-width: 800px;
}

/****************************************
AUSTIN BOULDERING PROJECT styles
****************************************/
.grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 16px;
	margin: 16px;
}
/* tablet grid (600px - 840px) */
@media screen and (min-width: 600px) {
	.grid {
		grid-gap: 24px;
		margin: 24px auto;
		max-width: 550px;
	}
}

/* desktop grid (840px - 1600px) */
@media screen and (min-width: 840px) {
	.grid {
		grid-template-columns: repeat(12, 1fr);
		padding: 16px;
		max-width: 1000px;
		margin: 0 auto;
	}
	.col-3--8 {
		grid-column: 3 / span 8;
	}
	.full-spread-img {
		max-width: 1300px;
		margin: auto;
		padding: 1% 4% 4% 4%;
	}
	.full-width {
		grid-column: 1 / span 12;
	}
	#dfsa-one {
		grid-column: 2 / span 4;
	}
	#dfsa-two {
		grid-column: 7 / span 5;
	}
}

/* OVERVIEW */
.ovrvw-box{
	padding-left: 5%;
}
.ovrvw-box li {
	font-weight: 300;
	font-size: 14px;
}

/* Process */
.process {
	text-align: center;
	color: var(--c-lght-blu);
	padding: 4% 0;
	margin: 0 auto;
	letter-spacing: 1px;
}

/* usability testing */
.lft, .rght {
	padding: 10% 5%;
}
@media screen and (min-width: 800px) {
	.flx-spc-arnd {
		display: flex;
		justify-content: space-around;
		padding: 2% 0;
		align-items: center;
		margin: 0 auto;
		max-width: 1600px;
	}
	.lft {
		padding: 5% 3% 5% 5%;
	}
	.rght {
		padding: 5% 5% 5% 3%;
	}
}

/* USABILITY TESTING KEY RESULTS */
.key-results {
	padding: 3% 0;
}
.key-results h3 {
	text-align: center;
}
.results-title h3, .results-title h4 {
	text-align: center;
	text-transform: uppercase;
}
.results-title h5 {
	max-width: 800px;
	margin: auto;
	padding: 2%;
	font-size: 1.3em;
}
.results, .two-results, .results4 {
	display: grid;
	grid-template-columns: 1fr;
	font-weight: 400;
	padding: 8%;
	text-align: center;
}
.two-results p {
	padding-bottom: 0;
	font-weight: 500;
	font-size: 20px;
}
@media screen and (min-width: 600px) {
	.two-results {
		padding: 2% 8% 0 8%;
		font-size: 1.3em;
		text-align: left;
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		grid-gap: 14px;
		max-width: 900px;
		margin: 0 auto;
	}
	.two-results .finding {
		padding: 4%;
	}
}
.results p {
	padding: 1% 4% 4% 4%;
	font-weight: 500;
	font-size: 20px;
}

.finding, .insight {
	padding: 3%;
	margin: 3% auto;
	border-radius: 10px;
	max-width: 350px;
}
.finding {
	color: var(--c-drk-grn);
	font-weight: 700;
}
.insight {
	background-color: white;
	color: var(--c-drk-grn);
}

@media screen and (min-width: 1100px) {
	.results {
		grid-template-columns: 1fr 1fr 1fr;
		padding: 2% 6% 0 6%;
		font-size: 1.3em;
		text-align: left;
		max-width: 1400px;
		margin: auto;
	}
	.results p {
		padding: 3%;
		font-weight: 400;
	}
	.finding, .insight {
		margin: 3%;
		border-radius: 10px;
		max-width: 400px;
	}
	.results4 {
		grid-template-columns: repeat(4, 1fr);
		padding: 2%;
	}
	.results4 .finding {
		font-size: 1.3em;
		padding: 8%;
		text-align: left;
	}
	.results-title h4 {
		font-size: 1.7em;
		letter-spacing: 1px;
	}
}

/* SPOTLIGHTS */
.two-one-grid {
	display: grid;
	grid-template-columns: 1fr;
	margin: 1% auto;
	padding: 0 4% 1% 4%;
	max-width: 1000px;
}
.two-one-title {
	text-transform: uppercase;
	font-size: 1.8em;
	text-align: center;
	padding-top: 3%;
}

/* usability test results */
.grn-sptlght-box-400, #insight-bg {
	border: 3px solid var(--c-drk-grn);
	border-radius: 1px;
	padding: 4%;
	box-shadow: 16px 16px var(--c-grn);
}
.grn-sptlght-box-400 p, #insight-bg p {
	font-weight: 500;
}
.grn-sptlght-box-400 {
	margin: 6% auto;
}
#insight-bg {
	margin: 2% auto;
	max-width: 850px;
}
@media screen and (min-width: 850px) {
	.two-one-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: .2fr 1fr 1fr;
		max-width: 1000px;
		padding: 2% 0 5% 0;
	}
	.two-one-title {
		grid-column: 1 / span 2;
		grid-row: 1 / span 1;
		padding: 2%;
	}
	#insight-bg {
		grid-row: 3 / span 3;
		grid-column: 1 / span 2;
	}
	.grn-sptlght-box-400 {
		margin: 0;
		width: 400px;
		align-self: center;
		justify-self: center;
		height: 80%;
	}
	#insight-bg p, .grn-sptlght-box-400 p {
		font-size: 18px;
	}
}

/* INFORMATION ARCHITECTURE 60/40 GRID */
.sxty-frty-grid {
	display: grid;
	grid-template-columns: 1fr;
	padding: 5%;
}
@media screen and (min-width: 800px) {
	.sxty-frty-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 24px;
		margin: 24px;
		padding: 8% 5%;
	}
	.frty-half {
		padding: 13% 2%;
	}
}

/* images - flex pair */
.flex-pair {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 2%;
	padding: 2%;
}
.flex-one, .flex-two {
	margin: 2%;
	padding: 8%;
}
@media screen and (min-width: 800px) {
	.flex-pair {
		flex-wrap: nowrap;
	}
	.flex-one, .flex-two {
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: -1.31px 24.97px 26px 0px rgba(43,33,118,0.1);
		height: 500px;
		margin: 1%;
		padding: 3%;
	}
}

/* COMPETITIVE ANALYSIS / FULL-WIDTH GRID */
.basic-container, .basic-paragraph, .img-below-container {
	max-width: 700px;
	margin: 0 auto;
}
.basic-container {
	padding: 6% 5% 3% 5%;
}
.basic-paragraph {
	padding: 2% 8%;
}
.basic-container h3, .img-below-container h3 {
	padding-bottom: 16px;
}
.img-below-container {
	padding: 6% 8% 1% 8%;
}
.img-below-container p {
	padding-bottom: 0;
}
@media screen and (min-width: 800px) {
	.full-width-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 24px;	
		padding: 5% 3%;
		align-items: center;
	}
	.basic-container h5 {
		padding-bottom: 12px;
	}
}
@media screen and (min-width: 1600px) {
	.basic-container, .basic-paragraph, .img-below-container {
		max-width: 800px;
	}
}

/*research artifacts */

.research-imgs {
	max-width: 70%;
	margin: 0 auto;
	padding: 3%;
}

/* IDEATION IMAGES */
.img70width, .img80width {
	max-width: 90%;
	margin: 0 auto;
}
@media screen and (min-width: 600px) {
	.img70width, .img80width {
		max-width: 1200px;
	}
	#dfsa-task-table {
		max-width: 1000px;
	}
	.img70width img{
		padding-bottom: 2%;
	}
}

/* DETAILED DESIGN */
.detailed-design {
	background-color: var(--c-lght-blu);
	padding: 3%;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 16px;
	margin: 16px auto;
}

@media screen and (min-width: 800px) {
	.detailed-design {
		grid-template-columns: 1fr 1fr;
		padding: 8% 8% 4% 8%;
	}
	.detailed-design h4 {
		padding-left: 20%;
	}
}

.learnings {
	padding: 10%;
	max-width: 700px;
	margin: auto;
}
.learnings p {
	font-size: 1.2em;
}
/* */
.rght-half-video {
	padding: 13% 2%;
}

/*
end abp styles
*/

/**************************************************
about page STYLES
**************************************************/
.abt-grid, .other-stuff-grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
}
.abt-img {
	display: none;
}
.abt-txt {
	padding: 5%;
}
.abt-title {
	font-size: 2.3em;
	padding-bottom: 12px;
	text-transform: none;
	font-family: var(--f-primary);
}
.abt-img {
	max-width: 80%;
	justify-self: center;
}
.italic {
	font-style: italic;
}
.abt-txt a:hover {
	opacity: 50%;
	transition: 200ms ease-in-out;
}
@media screen and (min-width: 1000px) {
	.abt-grid {
		grid-template-columns: 1fr 1fr;
		max-width: 1000px;
		margin: auto;
		grid-gap: 16px;
		padding: 5% 2%;
	}
	.abt-img {
		display: block;
	}
	.abt-img, .abt-txt {
		padding: 1%;
	}
	.abt-txt p {
		padding-bottom: 12px;
	}
	.abt-img {
		justify-self: start;
	}
}
@media screen and (min-width: 700px) {
	.icon {
		display: inline-block;
		width: 20px;
		height: 20px;
		padding: 10px;
	}
	.icon a {
		text-decoration: none;
		border-bottom: none;
	}
	.icon a:hover {
		opacity: 60%;
		transition: 200ms ease-in-out;
	}
	#mail {
		padding-top: 9%;
	}
	#twitter {
		padding-top: 5%;
	}
}
/* end about styles */

/******************************************
CONTACT PAGE & Form Inputs
******************************************/
.contact {
	padding: 1rem;
}
.contact h1 {
	line-height: 1.5;
	margin: 2rem 0;
}
.contact a:hover {
	color: var(--c-black);
	transition: 300ms ease-in-out;
	border-bottom: 1px solid var(--c-black);
}
input, textarea, select {
	border: .0625rem solid var(--c-black);
	display: block;
	margin: .5rem 0 1.25rem 0;
}
input, textarea {
	border-radius: .2rem;
	padding: .75rem;
}
textarea {
	min-height: 10rem;
}
textarea:focus, input:focus, select:focus {
	border: .0625rem solid var(--c-black);
	outline: none;
}
textarea:active, input:active, select:active {
	transform: scale(1.002);
}
textarea[disabled], input[disabled], select[disabled] {
	background-color: lightgray;
	border: .0625rem solid var(--c-black);
	cursor: no-drop;
}
label {
	display: block;
	margin: 0 0 5px 0;
}
/* Screen size at 400px px */
@media screen and (min-width: 400px) {
	input, textarea, select {
		align-items: flex-start;
		display: flex;
		min-width: 90%;
	}
}
/* Screen size aat 550 px */
@media screen and (min-width: 550px) {
	input, textarea, select {
		min-width: 20rem;
	}
	.contact h1 {
		margin-top: 0;
	}
}
/* Screen size at 750 px */
@media screen and (min-width: 750px) {
	input, textarea, select {
		min-width: 90%;
	}
	.contact, .faq {
		align-items: start;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 5rem;
		max-width: 1100px;
		margin: 1rem auto;
	}
	.contact {
		padding: 5rem 3rem 3rem 3rem;
	}
	.faq {
		padding: 0rem 3rem 5rem 3rem;
	}
}
/* Large screen size at 1700 px */
@media screen and (min-width: 1700px) {
	input, textarea, select {
		min-width: 35rem;
		margin-bottom: 3rem;
	}
}
button, input[type="submit"] {
	background: var(--c-grn);
	border: 2px solid var(--c-grn);
	color: var(--c-drk-grn);
	font-weight: 500;
	cursor: pointer;
	display: block;
	font-family: var(--font-primary);
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 7rem;
	min-width: 8rem;
	padding: 10px 6px;
	text-transform: uppercase;
}
button:active, input[type="submit"]:active, .active {
	text-transform: uppercase;
}
button:hover, input[type="submit"]:hover, .hover {
	border: 2px solid var(--c-drk-grn);
	transition: 0.15s background-color linear, 0.1s color linear;
}
button:disabled, input[type="submit"]:disabled {
	background-color: var(--color-grey-light);
}
button:focus, input[type="submit"]:focus, .focus {
	transform: scale(1.02);
}
/****
FAQ styles
*****/
.qstn-container {
	min-height: 50px;
	margin: 2rem 0;
}
.question {
	border: 3px solid var(--c-drk-grn);
	color: var(--c-drk-grn);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 1rem 0;
	padding: 10px 1rem;
}
.question:hover {
	background-color: var(--c-grn);
	transition: 200ms ease-in-out;
	color: var(--c-drk-grn);
}
#hobbies, #books, #homeTown {
	display: none;
	margin: 2rem 0 2rem 0;
	padding: 1rem;
	background-color: var(--c-drk-grn);
}
#hobbies p, #books p, #homeTown p {
	color: white;
	font-weight: 500;
	padding-bottom: 0;
}
#books a {
	color: white;
	border-bottom: 1px solid white;
	margin-bottom: 1rem;
}
#books a:hover {
	color: var(--c-grn);
	border-bottom: none;
}
/* end contact styles */

/************************************
BUTTON STYLES
************************************/
.primary-btn {
	background-color: #ffd300;
	border: 2px solid #ffd300;
	color: black;
	font-family: var(--f-primary);
	border-radius: 50vh;
	font-weight: 500;
	padding: 13px 22px;
	margin: 1%;
	text-align: center;
	align-self: start;
	justify-self: center;
}

.primary-btn:hover {
	background-color: white;
	border: 2px solid #ffd300;
	transition: 200ms ease;
}

/*********
back to top 
***********/
#top {
	background-image: url('../images/rocket-favicon.png');
	position: fixed;
	display: flex;
	bottom: 6%;
	right: 3%;
	height: 55px;
	width: 55px;
	align-items: center;
	z-index: 1;
	text-decoration: none;
	border-bottom: none;
}
.top-txt {
	color: black;
	opacity: 0;
	font-weight: 700;
	position: relative;
	top: 19%;
	right: 22%;
	position: absolute;
	margin: 5%;
}
.top-txt:hover {
	opacity: 1;
	transition: 200ms;
}

#top:hover {
	transform: scale(1.1);
	transition: 200ms;
}

/**************************************************
FOOTER STYLES
**************************************************/

footer {
	background-color: #f6f7f9;
	width: 100%;
	margin: auto 0;
	padding: 0;
}
footer a {
	text-decoration: none;
	display: block;
	padding-bottom: 5%;
	line-height: 2;
	font-family: var(--f-primary);
	color: black;
	font-size: 14px;
}
footer a:hover {
	color: blue;
	font-style: italic;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: center;
	padding: 15%;
	text-align: center;
	max-width: 1200px;
	margin: auto;
}
.footer-nav {

}
.footer-contact {
	display: none;
}
@media screen and (min-width: 700px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		text-align: left;
		padding: 7% 15%;
		grid-gap: 24px;
		align-items: end;
	}
	.footer-contact {
		display: block;
	}
	.footer-nav {
		justify-self: center;
	}
	footer a {
		padding-bottom: 1em;
	}
	.footer-name {
		padding-bottom: 1.3em;
		letter-spacing: 2px;
		font-size: .9em;
		font-weight: 700;
		text-transform: uppercase;
	}
}
.centered-foot-grid {
	display: grid;
	grid-template-rows: 1fr 1fr;
	align-items: center;
	justify-content: center;
	padding: 6%;
	text-align: center;
	margin: 0 auto;
}
.centered-foot-grid p {
	text-align: center;
	font-size: 13px;
	padding-bottom: 0;
	align-self: center;
}
.icon-footer {
	margin: 0 auto;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 8% 0;
}
.icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	padding: 10px;
}
.icon a {
	text-decoration: none;
	border-bottom: none;
}
.icon-footer .icon:hover {
	opacity: .5;
	transition: 200ms;
}
.footer-contact .icon {
	justify-content: center;
}

/***************************************************
GRID PLAY
***************************************************/
.stdy-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 16px;
	
	margin: 16px auto;
}

.stdy {
  position: relative;
}
.stdy-img {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.stdy:hover .stdy-img {
  opacity: 0.3;
}
.stdy:hover .middle {
  opacity: 1;
}
.stdy-txt {
  color: white;
  font-size: 18px;
  font-family: var(--f-secondary);
  font-weight: 600;
  padding: 16px 32px;
}
.stdy-txt:hover {
	opacity: 1;
}
@media screen and (min-width: 700px) {
	.stdy-grid {
		grid-template-columns: 1fr 1fr;
		margin: 0 auto;
		padding: 1rem;
		align-items: center;
		justify-content: center;

		max-width: 800px;
	}
}
.hello {
	text-align: center;
	max-width: 800px;
	margin: auto;
}
.hello h1 {
	font-family: var(--f-secondary);
	font-size: 3rem;
}
#hello-abt {
	font-size: 19px;
	font-weight: 400;
	line-height: 2;
	padding: 2%;
}

/***************************************************
messing everything up
***************************************************/

.home-pg-intro {
	display: grid;
	grid-template-rows: 2fr 2fr 1fr;
	justify-content: center;
	height: 15%;
	flex-wrap: wrap;
	width: 85%;
	margin: 3% auto;
}
.home-pg-title {
	display: flex;
	justify-content: flex-start;
	padding: 2%;
	font-family: var(--f-tertiary);
}
#hand {
	display: none;
	max-width: 100px;
	padding-right: 3em;
}
.home-pg-txt {
	font-size: 1em;
	align-self: start;
	font-weight: 400;
}
@media screen and (min-width: 900px) {
	.home-pg-intro {
		width: 45%;
	}
	.home-pg-txt {
		font-size: 1.1em;
	}
	#hand {
		display: inline-block;
	}
}
.project-grid {
	display: grid;
	grid-template-columns: 1fr;
	max-width: 1200px;
	padding-bottom: 3rem;
	margin: auto;
	align-items: start;
}
.prjct {
	padding: 1rem 2rem 2.2rem 2rem;
	padding-bottom: 3.3rem;
	margin: 0 auto;
}
.prjct a {
	border-bottom: none;
}
.project-card-text {
	font-family: var(--font-primary);
	padding: 2% 0;
}
@media only screen and (min-width: 550px) {
	.project-grid {
		padding: 0 3rem 2rem 3rem;
	}

	.prjct{
		padding: 0rem 0rem 4.2rem 0rem;
	}
}

@media only screen and (min-width: 800px) {
	.project-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		padding: 0 1rem 1rem 1rem;
	}
	.prjct {
		padding: 0rem .5rem 4.2rem .5rem;
	}
	.project-card-text p {
		font-size: 15px;
		max-width: 500px;
	}
}

@media only screen and (min-width: 1000px) {
	.project-grid {
		padding: 0 2rem 4.2rem 2rem;
	}
}

@media only screen and (min-width: 1300px) {
	.project-grid {
		grid-template-columns: 600px 600px;
	}

	.prjct-1, .prjct-2, .prjct-3, .prjct-4 {
		padding: 0 1.5rem 4.2rem 1.5rem;

	}
}
.project-button, .prjct-btn-disabled {
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 2.5px;
	background-color: black;
	padding: 16px 16px;
	color: white;
	text-decoration: none;
	font-size: 13px;
	font-family: var(--f-primary);
}
.project-button:hover {
	opacity: 75%;
	transition: 200ms ease-in-out;
}
.prjct-btn-disabled {
	background-color: lightgray;
}