canvas
{
    background-color: #FFFFFF;
    display: block;
    width: 100%;
    height: 100%;	
}

ul, li
{
	position: relative;
}

html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
  font-family: 'TrajanPro-Regular', Fallback, sans-serif;
}

@font-face
{
	font-family: 'TrajanPro-Regular';
	src: URL('TrajanPro-Regular.ttf') format('ttf');		
}

@keyframes blurAnim
{
	from { filter: blur(6.5rem);}
	to {filter: blur(0.0rem);}
}

.blurAnim
{
	width: 100%;
	height: 100%;
	position: absolute;
    animation-name: blurAnim;
    animation-duration: 1.3s;
    animation-delay: 1.75s;
    animation-fill-mode: forwards;
    filter: blur(6.5rem);
}    


.link{
	position: absolute;
	width: 40%;
	height: 15%;
	font-size: 5.75vw;
	text-align: center;
	z-index: 100;
	display:block;
	filter: blur(0rem);
	font-family: 'TrajanPro-Regular';
}

@keyframes firstName
{
	from { 	left: 1.0%;
			top: 33.0%;}
	to {	left: 36.25%;
			top: .5%;}
}

@keyframes lastName
{
	from { 	left: 4.0%;
			top: 44.5%;}
	to {	left: 52.5%;
			top: .50%;}
}

@keyframes firstNameReverse
{
	to { 	left: 1.0%;
			top: 33.0%;}
	from {	left: 33.0%;
			top: .5%;}
}

@keyframes lastNameReverse
{
	to { 	left: 4.0%;
			top: 44.5%;}
	from {	left: 52.0%;
			top: .50%;}
}



.name
{
	position: absolute;
	width: 20%;
	height: 10%;
	font-size: 6.75vw; 
	text-align: left;
	z-index: 100;
	display:block;
	filter: blur(0rem);
	color: white;
	font-family: 'TrajanPro-Regular';
}

.firstAnim
{
	position: absolute;
    animation-name: firstName;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

.lastAnim
{
	position: absolute;
    animation-name: lastName;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

.firstAnimReverse
{
	position: absolute;
    animation-name: firstNameReverse;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

.lastAnimReverse
{
	position: absolute;
    animation-name: lastNameReverse;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

#first
{
	left: .5%;
	top: 31.0%;
}

#last
{
	left: 4.0%;
	top: 44.5%;
}

#devblog {
	left: 6.5%;
	top: 5.75%;
}

#github {
	left: 12.125%;
	top: 24.33%;
}

#project{
	left: 21.5%;
	top: 42.5%;
}

#resume {
	left: 13.5%;
	top: 60.5%;
}

#contact {
	left: 5.5%;
	top: 77.50%;
}


@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

#contactForm
{
	text-align: center;
	border: none;
	border-color: transparent;
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
}

.fadeIn
{
    animation-name: fadeIn;
    animation-duration: 2s;    
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

.fadeOut
{		
    animation-name: fadeOut;
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
}

fieldset
{
	padding: 0;
	margin: 0;
}

form
{
	display: block;
	margin-top: 0;
	margin-bottom: 0;
}

.cForm
{
	border: none transparent;
	border-color: transparent;
	width:100%;
	height:auto;
}

#contact-text
{
	color: #FFFFFF;
	font-size: 2.3vw;
	text-align: center;
	top: 19.0%;
	left: 37.5%;
	position: absolute;
}

#input-form
{
	position: absolute;
	width:100%;
	height:100%;
}


.input-text
{
	width:25%;
	height:2.5%;
	left: 20%;
	position:absolute;
	font-size: 2.3vw;	
	text-align: left;
	color: rgb(40,39,41);
	padding-right: 2.5%;
}

.contactInput
{
	width:25%;
	height:2.5%;
}

#input-submit, #input-back, input
{
	width:25%;
	height:2.5%;
	left: 20%;
	position:absolute;
	font-size: 2.3vw;	
	text-align: left;
	color: rgb(40,39,41);
/*
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
*/
	border: 2px solid #282828;
}

textarea
{
	width:25%;
	height:10%;
	left: 20%;
	position:absolute;
	font-size: 2.3vw;	
	text-align: left;
	color: rgb(40,39,41);

/*	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;*/

	border: 2px solid #73AD21;
}

#input-name-text
{
	top: 27.5%;
	left: 30%;
}
#input-name
{
	top:27.5%;
	left:37.5%;
	height: 4.5%;	
}


#input-email-text
{
	top:35%;
	left: 30.5%;
}
#input-email
{
	top:35%;
	left:37.5%;
	height: 4.5%;	
}

#input-subject-text
{
	top:42.5%;
	left: 28%;
}
#input-subject
{
	top:42.5%;
	left:37.5%;
	height: 4.5%;	
}

#input-message-text
{
	top:50%;
	left: 26.5%;
}
#input-message
{
	top:50%;
	left:37.5%;
	height: 22.5%;	
}


#input-submit
{
	top:75%;
	left: 40.0%;
	height: 10%;
	width: 20%;
	color:#D4D4D4;
	text-align: center;
	background-color: #282828
}

#input-back
{
	top:87.5%;
	left: 40.0%;
	height: 10%;
	width: 20%;
	color:#D4D4D4;
	text-align: center;
	background-color: #282828
}

#projectPageContainer
{
	width:100%;
	height:100%;
	position: absolute;
	display: none;
}
#projectPage
{
	width:100%;
	height:100%;
	position: absolute;
}

#goHomeButton
{
	position: absolute;
	width: 15%;
	height: 15%;
	top: 43.5%;
	left: 43.5%;
	z-index: 200;
	text-align: center;
	font-size: 1.5vw;
	color: rgb(225, 200, 218);

	display: block;
}

.center
{
	display: block;
	position: absolute;
	top:25%;
	left:25%;
	vertical-align: middle;
	text-align: center;
	font-size: 1.5vw;
	color: rgb(225, 200, 218);	
}

.projectClass
{
	width: 100%;
	height: 100%;
	text-align: center;
	color: #FF1616;
	position: relative;
}

.text
{
	width: 50%;
	height: 100%;
	position: relative;
	left: 25%;
	right: 25%;
	top: 25%;
	bottom: 25%;
	padding: 8px;
	text-align:center;

	word-wrap: break-word;
	/*text-overflow: ellipsis;
	white-space: nowrap;*/
  	overflow: hidden;
}

.title
{
	position: absolute;
	width: 100%;
	height: 60%;
	top: 35%;
	font-size: 5.75vw;	
	text-align: center;
	font-family: 'TrajanPro-Regular';
	color: rgb(240, 220, 215);
}

.subtitle
{
	position: absolute;
	width: 100%;
	height: 25%;
	top: 70%;
	font-size: 1.91vw;	
	text-align: center;
	font-family: 'TrajanPro-Regular';
	color: rgb(240, 220, 215);
}

.thumbnail
{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1;
}

img
{
	left: 2.5%;
	top: 7.5%;
	width: 95%;
	height: 85%;
	position: absolute;
}

#devBlogDisplay
{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;

}
#devblogBack
{
	background-color: rgb(40,39,41);
	top: 90%;
	left: 46.25%;
	width: 7.5%;
	height: 8.5%;
	color: white;
	position: absolute;

	font-size: 1.91vw;	
	font-weight: bold;
	outline: none;
	border: 0px;
}

#dbSubtitle
{
	top: 20%;
}

.blogLink
{
	text-align: center;
	margin: auto;
	position: absolute;
	width: 100%;
	height: 40%;
	margin: auto;

}
#posts
{
	width: 100%;
	height: 70%;
	top: 25%;
	/*left: 28%;*/
	margin: auto;
	text-align: center;
	position: absolute;
}
.postText
{
	position: absolute;
	width: 100%;
	height: 12.5%;
	top: 25%;
	font-size: 1.91vw;
	text-align: center;
	font-family: 'TrajanPro-Regular';
	color: rgb(240, 220, 215);
}

.postThumbnail
{
	position: absolute;
	top: 40%;
	left: 37.5%;	
	width: 25%;
	height: 100%;
}

#displayProject
{
	width: 100%;
	position: absolute;
	height: 100%;
}

.page
{
	position: absolute;
	
	width: 100%;
	height: 100%;	
	color: white;
	font-size: 1.15vw;
  	/*background-color: rgb(220,219,220);*/
  	background-color: rgb(40,39,41);
}

.pageTitle
{
	position: absolute;
	left: 25%;
	width: 50%;	
	height: 10%;
	top: 2.5%;
	font-size: 3.45vw;	
	font-weight: bold;
	text-align: center;
	font-family: 'TrajanPro-Regular';
	color: rgb(240, 220, 215);
}

.pageSubtitle
{
	position: absolute;
	left: 25%;
	width: 50%;	
	height: 10%;
	top: 16.5%;
	font-size: .9vw;	
	font-weight: bold;
	text-align: center;
	font-family: 'TrajanPro-Regular';
	color: rgb(240, 220, 215);
}

.pageText
{
	top: 21%;
	width:50%;
	left: 25%;
	height:50%;	
	position:absolute;
	font-size: .7667vw;
	text-align: left;
	color: white;

  	/*background-color: rgb(40,39,41);*/

  	outline: none;
	border: 0px solid #73AD21;

	resize: none;
	overflow-y: scroll;	
}
.pageContainer
{
	top: 5%;

	background-color: rgb(40,39,41);
	width:100%;
	height:30%;
	position:relative;
	margin-top: 7.5%;
}
.pageLinkContainer
{
	width:50%;
	height:100%;
	left: 25%;	
	position:relative;
	font-size: .7667vw;	
	text-align: left;
	color: white;

  	background-color: rgb(40,39,41);

  	outline: none;
	border: 0px solid #73AD21;

	resize: none;
}

.pageImageLinkContainer
{
	width: 100%;
	height: 50%;
	position:relative;
	margin: auto;
	background-color: rgb(40,39,41);
}
.pageImageLink
{	
	left: 37.5%;
	width: 25%;
	height: 100%;
	position:relative;
}

.pageImagesContainer
{
	top: 70.0%;
	margin: auto;
	width: 100%;
	height: 100%;
	position:relative;
	background-color: rgb(40,39,41);
}

.pageImage
{
	left: 12.5%;
	width: 75%;
	position:relative;
}

.projButton
{
	background-color: rgb(89,89,89);
	width: 7.5%;
	height: 8.75%;
	color: white;
	position: absolute;

	font-size: 2.0535vw;	
	font-weight: bold;
	outline: none;
	border: 0px;
}

#prevProject
{
	left: 12.5%;
	top: 35.5%;
}
#nextProject
{
	left: 80.5%;
	top: 35.5%;
}
#leaveProject
{
	width: 15%;
	height: 15.0%;	
}

#displayProjectContainer
{
	width: 100%;
	height: 100%;
	position: absolute;
	display: none;
}