*
	{
	box-sizing: border-box;
	margin: 0px auto;
	padding: 0px;
	text-align: center;
	}
body 
	{
	font-size: 100%;
	background: #ffffff;
	font-family: sans-serif;
	overflow-y: scroll;
	}
img	
	{
	max-width:100%;
	}
button
	{
	background-color: #B0C4DE;	
	}
header
	{
	width:100%;
	background-color: #000000;
	display: block;
	color: #ffffff;
	position: fixed;
	z-index: 2;
	border-bottom: 2px solid #FFFFFF;
	top: 0;
	}
a
	{
	text-decoration: none;
	color: #ffffff;
	}
nav
	{
	width: 80%;
	text-align: center;
	font-size: 1.5em;
	}
.menu
	{
	display: inline-block;
	padding: .5rem 1rem;
	}
a:hover
	{
	color: #ffffff;
	text-decoration: underline;
	}
@media only screen and (max-width:950px)
	{
		nav
		{
		width: 100%;
		text-align: center;
		font-size: 1em;
		}	
	}
@media only screen and (max-width:840px)
	{
		#body{
		padding-top: 1rem;
		}	
	}
@media only screen and (max-width:744px)
	{
		#menuicon{
		display: none;
		margin-left: 1rem;
		}
		.menu{
		display: none;
		width: 30%;
		text-align: left;
		}
		#mainloc
		{
		margin: 2rem 0rem 2rem 0rem;
		font-size: 1em;
		}	
		#main h1
		{
		font-size: 3em;
		}
		#rsvpmodal{
		width: 90%;
		}
	}
@media only screen and (min-width:745px)
	{
		#menuicon{
		display: none;
		}
		.menu{
		display: inline-block;
		}
		#mobilecountdown
		{
		display: none;
		text-align: center;
		}
		#datep
		{
		display: block;
		}
		#rsvpmodal{
		width: 80%;
		}
	}
@media only screen and (max-width:480px)
	{
		#mobilecountdown{
		display: block;
		text-align: center;
		background-color: #000000;
		color: #ffffff;
		}
		#datep
		{
		display: none;
		}
		#day, #hour, #min, #sec,#daym, #hourm, #minm, #secm
		{
		font-size: 1em;
		}
		#datem div
		{
		border: 1px solid #ffffff;
		border-radius: .2rem;
		width: 3rem;
		height: 3rem;
		text-align: center;
		padding: 0.15rem;
		font-family: 'Great Vibes', cursive, sans-serif;}
		#mainloc
		{
		margin: 1rem 0rem 1rem 0rem;
		}
	}
@media only screen and (max-width:453px)
	{	.nameinput, .nameinputnojav{
		width: 98%;
		}
		.nameinputjav{
		width: 85%;
		}
	}
@media only screen and (min-width:454px)
	{	.nameinput, .nameinputnojav{
		width: 20rem;
		}
		.nameinputjav{
		width: 85%;
		max-width: 20rem;
		}
	}
@media only screen and (min-width:349px)
	{
		.photosub{
		width: 30%;
		min-width: 300px;
		}			
	}	
@media only screen and (max-width:350px)
	{
		.photosub{
		width: 90%;
		}			
	}	

/************************************* about ******************************************************/
#about
	{
	display: inline-block;
	padding: 1rem 5%;
	text-align: center;
	width: 90%;
	margin: auto;
	}
.photo
	{
	display: inline-block;
	width: 25%;
	vertical-align: middle;
	}

#abouttext
	{
	display: inline-block;
	width: 50%;
	vertical-align: middle;
	text-align: left;
	padding: 5%;
	}
#abouttext p
	{
	text-align: left;
	padding: 10px 0px;
	}
/********************************** work samples ***********************************************/
#sample
	{padding: 75px;}
#portfolio
	{
	background-color: #000000;
	color: #ffffff;
	text-align: left;
	}
.description
	{
	text-align: left;
	display: inline-block;
	width: 80%;
	padding: 10px 0px;
	}
.description h4
	{
	text-align: left;
	display: inline-block;
	}
#portfolio div div p
	{
	text-align: left;
	display: block;
	padding: 5px 0px;
	}
.portfoliodiv h2
	{
	text-align: left;
	width: 80%;
	padding: 20px 0px;
	}
hr
	{color: #ffffff;
	width: 80%;}
.portfoliodiv
	{text-align: center;}
.PhaseWrapper
	{
	display: block;
	width: 80%;
	padding: 50px 10px;
	}
.portfolioIcon
	{
	width: 100px;
	display: inline-block;
	vertical-align: middle;
	}
.portfolioIcon img
	{
	vertical-align: middle;
	text-align: left;
	display: inline-block;
	max-width: 100px;
	max-height:100px;
	}
.portfolioPhase
	{
	display: inline-block;
	width: 25%;
	text-align: left;
	vertical-align: middle;
	padding: 15px;
	margin: 0px 5%;
	}
.portfolioPhase h3
	{
	text-align: left;
	vertical-align: middle;
	}
.PhaseDescription
	{
	display: inline-block;
	width: 50%;
	vertical-align: middle;
	text-align: left;
	}
.PhaseDescription p
	{
	display: inline-block;
	margin: 0px 0px 15px 0px;
	}
.arrowicon
	{
	padding-right: 20%;
	}
.view, .viewf
	{
	margin: 20px 0px;
	padding: 10px;
	border: 1px solid #ffffff;
	border-radius: 250px;
	}
.view:hover, .viewf:hover
	{color: #000000;
	background-color: #FFFFFF;}
/********************************** contact me ***********************************************/
#contact
	{
	padding: 75px;
	}
#testimg, #contactme
	{
	display: inline-block;
	margin: 100px 0px;
	vertical-align: middle;
	}
#contactp
	{
	display: inline-block;
	width: 50%;
	padding: 10px;
	text-align: left;
	}
#email, #name, #message
	{
	width: 40%;
	display: block;
	border: 1px solid black;
	border-radius: 10px;
	height: 2em;
	text-align: left;
	}
#message
	{
	width: 40%;
	height: 5em;
	border: 1px solid black;
	border-radius: 10px;
	text-align: left;
	}
.label
	{display: block;
	margin: 100px 0px 50px 0px;
	text-align: left;}
#sub
	{
	border: 1px solid black;
	padding: 10px;
	border-radius: 10px;
	color: #ffffff;
	background-color: #000000;
	}