body {
	font-family: 'Open Sans', sans-serif;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	clear: both;
	position: relative;
}

h1 {
	margin: 0;
	padding: 10px;
	font-size: 4vw;
}

footer {
	background-color: #1f1f1f;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px 0;
	margin: 0;
	height: 6rem;
}

img {
	vertical-align: middle;
}

a {
	color: #ad4322;
	transition: 0.5s;
}

a:hover {
	color: #fda238;
}

.wholePage {
	position: relative;
	min-height: 100vh;
}

.pageContent {
	padding-bottom: 9rem;
}

.homefadein {
  animation: fadeIn 2.5s;
  -webkit-animation: fadeIn 2.5s;
  -moz-animation: fadeIn 2.5s;
  -o-animation: fadeIn 2.5s;
  -ms-animation: fadeIn 2.5s;
}

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

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

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

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

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

.header {
	background-color: #2b293a;
	color: white;
}

.navbar {
	background-color: #ad4322;
	color: #fda238;
	padding: 10px 0;
	width: 100%;
}

.navbar a {
	text-align: center;
	transition: 0.5s;
	margin: 0;
	text-decoration: none;
	color: inherit;
}

.navbar a:hover {
	background-color: #fda238;
	color: #ad4322;
	margin: 0;
}

.navbar a.active {
	background-color: #ffffff;
}

.navitem {
	padding: 10px 3%;
	width: 20vw;
}

.welcome {
	margin: 20px;
	font-size: 24pt;
	text-align: center;
}

.myname {
	margin: 20px;
	font-size: 36pt;
	text-align: center;
}

.mainbody {
	margin: 20px;
	font-size: 12pt;
	text-align: center;
	width: 50%;
	margin: auto;
	padding-bottom: 20pt;
}

.schedule {
	width: 75vw;
	display: block;
	margin: 0 auto;
	height: 275pt;
}

.history {
	align-items: center;
	margin: 0 auto;
	width: 50%;
}

.historyTitle a {
	color: #6a6975;
}

.historyTitle a:hover{
	color: #2b293a;
}

.history a{
	color: #2b293a;
}

.history a:hover {
	color: #6a6975;
}

.historyTitle {
	font-size: 20pt;
	margin: 0;
	padding-bottom: 5pt;
}

.positionTitle {
	font-size: 18pt;
	margin: 0;
}

.duration {
	font-size: 28pt;
	margin: 0;
	color: blue;
}

.associated {
	align-items: center;
	margin: 0 auto;
	width: 50%;
	padding-left: 100pt;
	padding-top: 0;
	padding-bottom: 0;
}

.thin {
	padding: 0;
	margin: 0;
}

.seperator {
	padding: 5pt 0;
}

.projectLink {
	align-items: center;
	margin: 0 auto;
	width: 55%;
	padding-bottom: 18pt;
	font-size: 14pt;
}

.projectLink a {
	text-decoration: none;
	font-size: 22pt;
}

.projectLinkTBD {
	align-items: center;
	margin: 0 auto;
	width: 55%;
	padding-bottom: 20pt;
	font-size: 14pt;
}

.projectLinkTBD a {
	text-decoration: none;
	font-size: 22pt;
}

.projectLinkTBD a:hover {
	color: #ad4322;
}

.associated a {
	text-decoration: none;
}

.right{
    float:right;
}

.left{
    float:left;
}

.academic {
	align-items: center;
	margin: 0 auto;
	width: 55%;
}

.princeton {
	font-size: 56pt;
	margin: 0;
}

.classYear {
	font-size: 42pt;
	margin: 0;
}

.major {
	font-size: 36pt;
	margin: 0;
}

.minor {
	font-size: 14pt;
	margin: 0;
}

.gpa {
	font-size: 12pt;
	margin: 5pt 0;
}

.cv {
	margin: 10pt auto;
	display: block;
	width: 50vw;
	height: 70vw;
}

.puter {
	margin: 10pt auto;
	display: block;
	width: 50vw;
	height: 27vw;
}

footer p {
	padding: 0 5pt;
}

footer a {
	text-decoration: none;
	color: inherit;
	transition: 0.5s;
}

footer a:hover {
	color: #fda238;
}

.header a {
	text-decoration: none;
	color: inherit;
}

.header a:hover {
	color: #87ceeb;
}

.comparison {
	align-items: center;
	margin: 0 auto;
	width: 60%;
}

.videopaper {
	align-items: center;
	margin: 0 auto;
	width: 60%;
}

.researchpaper {
	align-items: center;
	margin: 0;
	display: inline-block;
	width: 48%;
	height: 52.75vw;
	padding: 0;
}

.researchvideo {
	align-items: center;
	margin: 0;
	display: inline-block;
	width: 50%;
	height: 52.75vw;
	padding: 0;
}

.frbpapers {
	align-items: center;
	margin: 10pt auto;
	display: block;
	width: 40%;
	height: 40vw;
	padding: 0;
	
}

.cardiffpaper {
	align-items: center;
	margin: 10pt auto;
	display: block;
	width: 48%;
	height: 40vw;
	padding: 0;
	
}

.cardiffvideo {
	align-items: center;
	margin: 10pt auto;
	display: block;
	width: 66vw;
	height: 37.125vw;
	padding: 0;
}

.cardiffposter {
	align-items: center;
	margin: 10pt auto;
	display: block;
	width: 66vw;
	height: 52vw;
	padding: 0;	
}

video {
	width: 60vw;
}

/* START OF THE GALLERY */
.container {
  position: relative;
  width: 20vw;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}