body {
	/* margin: 0px;
	font-size: 16px;
	line-height: 22px;
	padding: 0px; */
	}

/* this is for the fake password */
	#lockedOverlay {
	  align-items: center;
	  background: #fff;
	  bottom: 0;
	  display: flex;
	  justify-content: center;
	  left: 0;
	  right: 0;
	  pointer-events: all;
	  position: fixed;
	  top: 0;
	  z-index: 10000;
	}

	.lockedOverlay--hide {
	  display: none !important;
	  pointer-events: none !important;
	}

	/* The container */
	.pwd__container {
	  display: block;
	  position: relative;
	  padding-left: 35px;
	  margin-bottom: 12px;
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}

	/* Hide the browser's default checkbox */
	.pwd__container input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	  height: 0;
	  width: 0;
	}

	/* Create a custom checkbox */
	.checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 25px;
	  width: 25px;
		border: 1px solid #E0E0E0;
	}

	/* On mouse-over, add a grey background color */
	.pwd__container:hover input ~ .checkmark {
	  background-color: #E0E0E0;
	}

	/* When the checkbox is checked, add a blue background */
	.pwd__container input:checked ~ .checkmark {
	  background-color: #000;
		border: none;
	}

	/* Create the checkmark/indicator (hidden when not checked) */
	.checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}

	/* Show the checkmark when checked */
	.pwd__container input:checked ~ .checkmark:after {
	  display: block;
	}

	/* Style the checkmark/indicator */
	.pwd__container .checkmark:after {
	  left: 9px;
	  top: 5px;
	  width: 5px;
	  height: 10px;
	  border: solid white;
	  border-width: 0 3px 3px 0;
	  -webkit-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  transform: rotate(45deg);
	}

/* this is for the rest of the site */

.header{
	margin: 0px 0px 32px 0px;

	-webkit-animation: fadeIn 1s ease-in; /* Safari, Chrome and Opera > 12.1 */
	 -moz-animation: fadeIn 1s ease-in; /* Firefox < 16 */
		-ms-animation: fadeIn 1s ease-in; /* Internet Explorer */
		 -o-animation: fadeIn 1s ease-in; /* Opera < 12.1 */
				animation: fadeIn 1s ease-in;
	}

.about__wrapper{
	padding: 40px 0;
	min-width: 288px;

	-webkit-animation: fadeIn 1s ease-in; /* Safari, Chrome and Opera > 12.1 */
	 -moz-animation: fadeIn 1s ease-in; /* Firefox < 16 */
		-ms-animation: fadeIn 1s ease-in; /* Internet Explorer */
		 -o-animation: fadeIn 1s ease-in; /* Opera < 12.1 */
				animation: fadeIn 1s ease-in;
				animation-fill-mode: backwards;
				/* animation-delay: 1.5s; */
	}

.about__wrapper-essay{
	min-width: 288px;
	max-width: 600px;
	padding-bottom: 16px;
	}

@keyframes fadeIn {
	0% { opacity: 0; }
	100%   { opacity: 1; }
	}

/* Firefox < 16 */
@-moz-keyframes fadeIn {
	0% { opacity: 0; }
	100%   { opacity: 1; }
	}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	100%   { opacity: 1; }
	}

/* Internet Explorer */
@-ms-keyframes fadeIn {
	0% { opacity: 0; }
	100%   { opacity: 1; }
	}

/* Opera < 12.1 */
@-o-keyframes fadeIn {
	0% { opacity: 0; }
	100%   { opacity: 1; }
	}

input[type=text] {
	  width: 288px;
	  padding: 16px;
	  margin: 8px 0;
	  display: inline-block;
	  border: 1px solid #E0E0E0;
	  box-sizing: border-box;
	}

input[type=text]:focus-visible {
	  border: 1px solid #000;
		outline: none;
	}

input[type=password] {
	  width: 288px;
	  padding: 16px;
	  margin: 8px 0;
	  display: inline-block;
	  border: 1px solid #E0E0E0;
	  box-sizing: border-box;
		letter-spacing:0.125em;
	}

input[type=password]:focus-visible {
		border: 1px solid #000;
		outline: none;
	}

button {
	  width: 288px;
	  background-color: #000;
	  color: white;
		text-align: left;
	  padding: 16px;
	  margin: 8px 0;
	  border: none;
	  cursor: pointer;
	}

	button:hover {
		background-color: #2D2D2D;
	}

.introduction__link{

	}

.introduction__text {
	color: rgba(0,0,0);
	margin-bottom:16px;

	-webkit-animation: fadeIn 1s ease-in; /* Safari, Chrome and Opera > 12.1 */
	 -moz-animation: fadeIn 1s ease-in; /* Firefox < 16 */
		-ms-animation: fadeIn 1s ease-in; /* Internet Explorer */
		 -o-animation: fadeIn 1s ease-in; /* Opera < 12.1 */
				animation: fadeIn 1s ease-in;
				animation-fill-mode: backwards;
				/* animation-delay: 1s; */
	}

.img-padding{
	padding-bottom: 40px;
	}

.main__nav{
	display: flex;
	flex-direction: row;
	padding: 0 0 64px;

	-webkit-animation: fadeIn 1s ease-in; /* Safari, Chrome and Opera > 12.1 */
	 -moz-animation: fadeIn 1s ease-in; /* Firefox < 16 */
		-ms-animation: fadeIn 1s ease-in; /* Internet Explorer */
		 -o-animation: fadeIn 1s ease-in; /* Opera < 12.1 */
				animation: fadeIn 1s ease-in;
	}

.main__nav-textLinks{
	display: inline-block;
	padding: 0 0 8px 0;
	text-decoration: none;
  transition: 0.5s;
  position: relative;
	}

	.main__nav-textLinks:after {
	  display: inline-block;
	  position: absolute;
	  content: "";
	  top: 100%;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background: #ECF0F1;
	  transform: scaleX(0);
	  transform-origin: right;
	  transition: transform 0.5s;
		}

	.main__nav-textLinks:hover{
	  color: #000;
		}

	.main__nav-textLinks:hover:after {
	  transform: scaleX(1);
	  transform-origin: left;
		}

	.main__nav-textLinks:active{
	  color: #ECF0F1;
		}

	.main__nav-textLinks-padding{
		padding: 0 24px 8px 0;
	}

.project__card-wrapper{
  min-height: 150px;
	}

.project__card{
	display: inline-block;
	padding-top: 32px;
	text-decoration: none;
  transition: 0.5s;
  position: relative;
	}

.project__card:after {
  display: inline-block;
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ECF0F1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;
	}

.project__card:hover{
  color: #000;
	}

.project__card:hover:after {
  transform: scaleX(1);
  transform-origin: left;
	}

.project__card:active{
  color: #ECF0F1;
	}

.project__card-header{
	margin: 0 0 8px;
	}

.project__card-shortDescription{
  margin: 0 0 8px;
	}

.project__header-description{
  padding-bottom: 24px;
	}

.project__image{
	max-width: 1296px;
	min-width: 288px;
	box-shadow: 0 8px 24px -8px rgb(0, 0, 0, .16);
	}

.project__image-caption{
  padding: 16px 0 40px;
	max-width: 1296px;
	min-width: 288px;
	}

.project__responsibility-list{
  margin:0;
	}

.text__links{
  color: rgba(0,0,0);
  text-decoration: none;
	}

.text__links-about{
  color: rgba(0,0,0);
  text-decoration: none;
	}

.text__links-about:hover{
  color: rgba(0,0,0,.5);
	}

.wrapper{
	display: flex;
	flex-direction: column;
	min-width: 288px;
  padding: 40px 16px;
	}

.wrapper__footer{
  border-top: solid 1px #000;
	padding-top: 40px;

	-webkit-animation: fadeIn 1s ease-in; /* Safari, Chrome and Opera > 12.1 */
	 -moz-animation: fadeIn 1s ease-in; /* Firefox < 16 */
		-ms-animation: fadeIn 1s ease-in; /* Internet Explorer */
		 -o-animation: fadeIn 1s ease-in; /* Opera < 12.1 */
				animation: fadeIn 1s ease-in;
	}

.wrapper__introduction{
	min-height: 350px;
	margin: 0;
  border-bottom: solid 1px #000;
	}

.wrapper__project-list{
	display: flex;
	flex-direction: column;
  padding: 0;
  list-style-type: none;

	-webkit-animation: fadeIn 1s ease-in; /* Safari, Chrome and Opera > 12.1 */
	 -moz-animation: fadeIn 1s ease-in; /* Firefox < 16 */
		-ms-animation: fadeIn 1s ease-in; /* Internet Explorer */
		 -o-animation: fadeIn 1s ease-in; /* Opera < 12.1 */
				animation: fadeIn 1s ease-in;
	}

.wrapper__project-page{
	border-top: solid 1px #000;
	display: flex;
	flex-direction: column;
  padding: 40px 0 0;
  list-style-type: none;
	}

.wrapper__project-highlights{
	padding: 40px 0 16px;
	}

.wrapper__project-essay{
	border-top: solid 1px #000;
	padding: 40px 0;
	min-width: 288px;
	}

.project__essay{
	min-width: 288px
	}

@media screen and (min-width: 768px) {

	.wrapper{
		padding: 40px 24px
		}

	.wrapper__introduction{
    top: 0;
		height: 400px;
		}

	.project__essay{
		max-width: 600px;
		}

}

@media screen and (min-width: 1024px) {

	.wrapper {
		margin: auto;
		max-width: 1440px;
		padding: 56px 32px;
  	}

	.wrapper__row{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		}

	.wrapper__project-essay{
		border-top: none;
		}

}