html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}


/*Page styles*/
body {
	
	
	line-height: 1.6em;
	color: #373737;
	font-family: 'Avenir', Arial, sans-serif;
	font-size:1em;
	
	

	}



h1{

	color:#478c5c;/*medium green*/
	font-size: 2em;
	font-weight:bold;
	padding-top: 0.5em;
	padding-bottom: .5em;


	
	
}
h2{
	
	color:#373737;/*muted black*/
	font-size:1.6em;
	font-weight:bold;
	padding: 20px 0px 10px 0px;
}

h3{
	color: #373737;
	font-weight:bold;
	font-size: 1.4em;
	padding: 15px 0px 10px 0px;
}

p{
	text-align:left;
	/*text-justify:inter-word;*/
	padding-top: 0.2em;
	padding-bottom: 0.2em ;
	padding-right:3em;

}

footer{
	float:left;
	width:100%;
	background-color: #373737;
	padding: 3em 5% 25px 5%;
	margin-top: 100px;
	margin-right: 20%;
	

}

/*.footerpar{
	text-align:center;
	color:white;
	
}*/
.footericon1{
	margin-right:0.5em;
	padding-bottom:0.2em;
}

.footericon2{
	margin-left:0.7em;
	padding-top:0.6em;
	
}


.projectimg{
	max-width:100%;
	border-style:solid;
	border-color:#e6e6e6;
	border-width:1px;
}

.img{
	max-width: 100%;
}
/*end of page styles*/

/*individul project page styles*/
.aside{
	float:left;
	padding: 1.5em 4em 4.5em 4.5em;
	
}
.box2{
	float:right;
	width: 60%;	
	
	
}

.containercontent{
	margin:10%;
}

/*end of project page styles*/

/*contact page styles*/

/*form modified from tutorial from w3 schools https://www.w3schools.com/howto/howto_css_contact_form.asp*/
/* Style inputs with type="text", select elements and textareas */
/*input[type=text], select, textarea {
  width: 100%; 
  padding: 12px; 
  border: 1px solid #C0B283; 
  background-color:#f4f4f4;
  border-radius: 4px;
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical */
}

/* Style the submit button with a specific background color etc */
/*input[type=submit] {
  background-color: #dcd0c0;
  color: #373737;
  font-weight:bold;
  padding: 14px 22px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float:right;
}*/

/* When moving the mouse over the submit button, add a darker green color */
/*input[type=submit]:hover {
  background-color: #45a049;
}*/

/* Add a background color and some padding around the form */
.contactform {
  border-radius: 5px;
  background-color: white;
  padding: 2em;
  float:right;
  width:60%;
}

.titlecontact{
	padding-top:0.3em;
	padding-bottom:10px;
}
.button2{
background-color: #dcd0c0;
color: #373737;
margin-top:1em;
font-weight:bold;
padding: 10px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
float:right;
text-decoration:none;
}

/*end of contact page styles*/

/*about page styles*/

.button{
background-color: #bacc81;
color: #373737;
margin-top:3.2em;
font-weight:bold;
padding: 14px 22px;
border: none;
border-radius: 4px;
cursor: pointer;
float:left;
text-decoration:none;
}

/*end of about page styles*/


	
/*links style*/
	

.emaillink:link, .emaillink:visited{
		color:#dee0b8;
		font-style:italic;
		text-decoration: underline;
	}

.emaillink:focus, .emaillink:hover, .emaillink:active{
		color:#bacc81;
	}


/* End of link styles*/

/*hamburger styles*/

.ham{
	width: 40px;
	height: 7px;
	background-color: #373737;
	margin: 8px 0;	
}
	
	
@media(min-width: 1000px){
	/*navigation*/


	/*Navigation modified from tutorial from http://andornagy.com/css-dropdown-menu/.*/

	nav {
	
	}
	.container{
		margin-top:10%;
	
	}
	.logo{
		margin-top:5%;
		margin-left:15%;
	}

	nav ul  {
		padding:0;
	  	margin-right: 14%;
		list-style: none;
		position:relative;
	

		}
	
	nav ul li {
		float:right;
		display:inline-block;
		font-size:1.3em;
		border-bottom: 0.3em solid #373737;
		padding-bottom: 0em;
	

		}

	nav a {
		display:block;
		padding:0 3.3em 0 1em;
		color: #373737;/*muted black*/
		text-decoration:none;
		font-weight:bold;
		line-height: 2.2em;
	
	}

	/*nav a:hover { 
		background-color: #dcd0c0; 
	}*/

	/* Hide Dropdowns by Default */
	nav ul ul {
		display: none;
		position: absolute; 
		top: 2em; /* the height of drop down */
	}
	
	/* Display Dropdowns on Hover */
	nav ul li:hover > ul {
		display:list-item;
	
	}

	nav ul li:hover{
		background-color:#dee0b8;
	}
	nav ul ul li:hover{
		background-color: #bacc81; /* darker light green */
	}
	
	/* First Tier Dropdown */
	nav ul ul li {
		font-size:0.7em;
		width:12em;
		float:none;
		position: relative;
		display: list-item;
		background-color:#dee0b8;/* light green*/
		border-bottom: 0px;
		color: #373737;
		z-index:1000;

	}

	/* Second, Third and more Tiers	*/
	nav ul ul ul li {
		position: relative;
		top:-2em;
		width:15em;
		left:12em;
		font-size:1em;
		border-bottom: 0px;
		color: #373737;
		border-left: 1px solid #373737;
		z-index:2000;

	}
	/*end of navigation*/
	
	.ham{
		display:none;
	}
	/*slider used from W3 schools*/
	.w3-content.w3-section{
		display:none;
	}
	
	.description1{
		display:none;
	}
	
	.title1{
		display: none;
	}
	.aside2{
		display: none;
	}
	
	.mobiletitle{
		display:none;
	}
	
}
	
@media (max-width: 1000px) and (min-width:600px){
		
		h1 {
			font-size :2em;
		}
		
		h3 {
			margin-bottom: 0px;
		}
		
		a.btn{
			font-size: 0.9em;
		}
		
		nav { 
			position: static;
			padding: 20px 15px;
			width: 25em;
			
		}
		
		nav ul, 
		nav ul ul,
		nav ul ul ul {
			display: block;
			position: static;
			background-color:#dee0b8;
			margin-top: 1em;
				
		
		}
		
		nav > ul {
			padding: 0;
		}
		
		nav > ul> li {
			float: none; 
			margin-top:25px;
		}
		
		/*nav ul li:hover{
			background-color:white;
		}*/
		
		nav ul li a {
			width: 25em;
			display:block;
			margin: 8px 10px;
			padding: 8px 15px;
			color: #373737;/*muted black*/
			font-weight: bolder;
			text-decoration:none;
			
		}
		
		nav ul ul li a{
			margin-left:30px;
			color: #373737;/*muted black*/
			font-weight: bold;
		}
		
		nav ul ul ul li a {
			margin-left: 60px;
			color: #373737;/*muted black*/
		}
		
		
		.banner{
			display:none;
		}
		
		.banner2{
			display:none;
		}
		
		.enhanced #menu {
			max-height: 0;
			overflow: hidden;
		}
		.enhanced #menu.open {
			max-height: 75em;
		}
		.button{
		background-color:#dee0b8;
		color: #373737;
		font-weight:bold;
		padding: 14px 22px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		text-decoration:none;
		}
		
		.aside{
			float:none;
			padding: 1.5em 4em 4.5em 4.5em;
	
		}
		.box2{
			float:none;
			width: 60%;	
	
	
		}

		.containercontent{
			margin:10%;
		}
		
		.w3-content.w3-section{
			display: block;
			margin-left: auto;
			margin-right: auto;
			width: 50%;
		}
		
		
		.description{
			display:none;
		}
		
		.title{
			display: none;
		}
		
		.logo{
			display: block;
			  margin-left: 40%;
			  margin-right: 40%;
			  margin-top:5%;
			  width: 50%;
		}
		#projectimg{
			max-width:100%;
			border-style:solid;
			border-color:#e6e6e6;
			border-width:1px;
		}
		.contactform{
			display:none;
		}
		
	
}

@media (max-width: 600px){
		
		h1 {
			font-size :2em;
			line-height:1em;
		}
		
		h3 {
			margin-bottom: 0px;
		}
		
		a.btn{
			font-size: 0.9em;
		}
		
		nav { 
			position: static;
			padding: 20px 15px;
			width: auto;
			z-index:2000;
		}
		
		nav ul, 
		nav ul ul,
		nav ul ul ul {
			display: block;
			position: static;
			background-color:#dee0b8;
			margin-top: 1em;
				
		
		}
		
		nav > ul {
			padding: 0;
		}
		
		nav > ul> li {
			float: none; 
			margin-top:25px;
		}
		
		/*nav ul li:hover{
			background:white;
		}*/
		
		nav ul li a {
			width: auto;
			display:block;
			margin: 8px 10px;
			padding: 8px 15px;
			color: #373737;/*muted black*/
			font-weight: bolder;
			text-decoration:none;
			
			
		}
		
		nav ul ul li a{
			margin-left:30px;
			color: #373737;/*muted black*/
			font-weight: bold;
		}
		
		nav ul ul ul li a {
			margin-left: 60px;
			color: #373737;/*muted black*/
		}
		
		
		.banner{
			display:none;
		}
		
		.enhanced #menu{
			max-height: 0;
			overflow: hidden;
		}
		.enhanced #menu.open {
			max-height: 75em;
		}
		
		.button{
		background-color: #dcd0c0;
		color: #373737;
		font-weight:bold;
		padding: 14px 22px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		text-decoration:none;
		}
		
		.description{
			display:none; 
	
		}
		.title{
			display:none;
		}
		
		
		.box3{
			float:right;
			width:60%;
		}
		
		.logo{
			display:block;
			margin-left:30%;
			margin-right:40%;
			margin-top:5%;
			width:50%;
		}
		
	
		#projectimg{
			max-width:100%;
			border-style:solid;
			border-color:#e6e6e6;
			border-width:1px;
		}
		
		.projectimg{
			max-width:100%;
			border-style:solid;
			border-color:#e6e6e6;
			border-width:1px;
			
		}
		
		.contactform{
			display:none;
		}
		.headshot{
			max-width:100%;
		}
}