body {
	-webkit-font-smoothing: antialiased;
	background-color: #f7f7f7; 
}

h1 {
	/*font-family: 'Helvetica', 'Arial', sans-serif;*/
	line-height: 1.2;
	font-weight: 500;
	font-size: 2.5em;

} 

h2 {
	/*font-family: 'Helvetica', 'Arial', sans-serif;*/
	line-height: 1.2;
	font-weight: 500;
	font-size: 2.5em;
} 

h3 {
	/*font-family: 'Helvetica', 'Arial', sans-serif;*/
	font-size: 2em
} 

h4 {
	/*font-family: 'Helvetica', 'Arial', sans-serif;*/
	font-size: 1.5em
}

p, a {
	/*font-family: 'Helvetica', 'Arial', sans-serif;*/
	line-height: 1.6;
	margin: 0;
	font-size: 1.2em;
}

#hidden {
	display: none;
}

.site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.site-content {
	flex: 1;
}

/*Navigation*/

.navigation {
	position: -webkit-sticky;
	position: sticky;
	background-color: #f7f7f7;
	width: 100%;
	height: 55px;
	top: 0px;
	left: 0px;
	z-index: 3;
}

.master-nav-links {
	position: relative;
	display: inline-block;
	float: right;
	padding: 8px 0 12px 0;
	margin-right: -4px;
	list-style: none;
}

.nav-link {
	position: relative;
	display: inline-block;
	padding: 0px 16px;
	margin-right: -4px;
}

.nav-link a:hover::after {
	position: absolute;
	background-color: #50bd3c;
	width: 80%;
	height: 4px;
	bottom: -2px;
	left: 9%;
	content: '';
	z-index: -1;
	transition: 0.2s ease;
}

.nav-link a::after {
	position: absolute;
	background-color: #50bd3c;
	width: 80%;
	height: 0px;
	bottom: -2px;
	left: 9%;
	content: '';
	z-index: -1;
	transition: 0.2s ease;
}

.current-page a::after {
	position: absolute;
	background-color: #50bd3c;
	width: 80%;
	height: 4px;
	bottom: -2px;
	left: 9%;
	content: '';
	z-index: -1;
	transition: 0.2s ease;
}

.current-page {
	display: inline-block;
	position: relative;
	padding: 0px 16px;
	margin-right: -4px;
}

.current-page a {
	text-decoration: none;
	color: #50bd3c;
}

.current-page:hover a {
	text-decoration: none;
	color: #50bd3c;
}

.nav-link a {
	text-decoration: none;
	color: #666;
}

.nav-link:hover a {
	text-decoration: none;
	color: #50bd3c;
}

.nav-link a, .current-page a {
	font-family: 'Helvetica', 'Arial', sans-serif;
	line-height: 1.6;
	margin: 0;
	font-size: 1.5em;
}

/*Introduction*/

.hello p {
	margin-top: 4px;
	font-size: 1.4em;
}

.hello {
	margin-bottom: 80px;
	margin-top: 50px;
}

.hello-link {
	position: relative;
	display: inline-block;
	margin-right: 0px;
}

.hello-link a {
	font-family: 'Helvetica', 'Arial', sans-serif;
	line-height: 1.6;
	font-size: 1.4em;
	text-decoration: none;
	color: #50bd3c;
}

.hello-link:hover a {
	text-decoration: none;
	color: #50bd3c;
}

.hello-link a:hover::after {
	position: absolute;
	background-color: #50bd3c;
	width: 100%;
	height: 4px;
	bottom: 0px;
	left: 0;
	content: '';
	z-index: -1;
	transition: 0.2s ease;
}

.hello-link a::after {
	position: absolute;
	background-color: #50bd3c;
	width: 100%;
	height: 0px;
	bottom: 0px;
	left: 0;
	content: '';
	z-index: -1;
	transition: 0.2s ease;
}

.p-link {
	display: inline-block;
	position: relative;
	margin-right: 0px;
}

.p-link a {
	font-family: 'Helvetica', 'Arial', sans-serif;
	line-height: 1.6;
	margin: 0;
	font-size: 1.2em;
	text-decoration: none;
	color: #333;
}

.p-link a::after {
	position: absolute;
	background-color: #50bd3c;
	width: 100%;
	height: 2px;
	bottom: 0px;
	left: 0;
	content: '';
	z-index: -1;
	transition: 0.2s ease;
}

.p-link:hover a {
	text-decoration: none;
	color: #50bd3c;
	content: '';
	transition: 0.2s, ease;
}

.p-link a:hover::after {
	position: absolute;
	background-color: #50bd3c;
	width: 100%;
	height: 4px;
	bottom: 0px;
	left: 0;
	content: '';
	z-index: -1;
	transition: 0.2s ease;
}

/*Projects*/

.works-title {
	text-align: right;
	clear: both;
	margin-right: 30px;
	margin-bottom: 30px;
}

.works img {
 	margin-bottom: 40px;
}

.row.works {
	clear: both;
}

.main-image img {
    display: block;
  	max-width: 100%;
  	height: auto;
  	margin-bottom: 40px;
}

.fade {
    opacity: 1;
    -webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
}

.fade:hover {
    background-color: #50bd3c;
    opacity: 0.5;
}

.background {
    background: #f7f7f7;
}

/*Description*/

.hero {
  margin-top: 40px;
  }

.hero-box {
  display: flex;
  flex-wrap: wrap; 
  border-top: 2px solid #333;
  justify-content: space-between;
  
}
 
.hero-box p {
    margin: 0; 
}

.date {
  display: inline-block;
}

.role {
  display: inline-block;
  padding-right: 30px;
}

.category {
  display: inline-block;
  padding-right: 30px;
}

.hero-text {
  margin: 0 20px 30px 0;
}

.hero-text p {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 1.2em; 
}

.text-main {
  margin-bottom: 40px;
}

.text-caption {
  margin-bottom: 20px;
}

/* Footer Styles */

.footer {
  background-color: #f7f7f7;
  clear: both;
  padding: 20px 0px;
  margin-top: 10px;
  vertical-align: middle; 
}

.footer, .page-wrap:after {
  height: 5em;
}



.footer p, a {
  font-size: 1.2em;
}

.social {
  list-style: none;
  padding: 0;      
}

.social li {
  display: inline-block;
  width: 24%;      
  text-align: center;
}

#linkedin a:hover {
  color: #0976b4;
  text-decoration: none;
}

#twitter a:hover {
  color: #55acee;
  text-decoration: none;
}

#resume a:hover {
  color: #e52d27;
  text-decoration: none;
}

#tumblr a:hover {
  color: #35465c;
  text-decoration: none;
}

  .footer a {
  color: #666;
  text-decoration: none;
}

/*Media Queries*/

  @media screen and (max-width:1330px) {
    	

    .master-nav-links {
      display: flex;
      justify-content: center;
      margin-right: -4px;
      position: relative;
      list-style: none;
     }
    }

    @media (min-width: 992px) and (max-width: 1200px) {
	
	}

	@media (min-width: 768px) and (max-width: 992px) {
	  
	}

	@media (min-width: 600px) and (max-width: 768px) {
		
	  .hero-text {
        width: initial; 
      } 

      .footer {
		background-color: #f7f7f7;
		clear: both;
		padding: 20px 0;
		vertical-align: middle;
		height: auto;
	  }	

      .footer p {
  		text-align: center;
	  }

	}

	@media (min-width: 321px) and (max-width: 600px) {
		.container-fluid {
			padding: 0px;
		}

		.container {
			padding: 0px 30px;
		}

		.master-nav-links a {
			padding: 0px 0px;
		}

		.master-nav-links li {
			padding: 2px 16px;
		}

		.master-nav-links {
			width: 100%;
			margin: auto;
		}

		.navigation {
			height: 55px;
		}

		.hello {
			margin-bottom: 50px;
		}

		.hello h2 {
			font-size: 2em;
		}

		.hello p {
			font-size: 1.2em;
		}

		.works-title {
			font-size: 3em;
		}

		.footer {
			background-color: #f7f7f7;
			clear: both;
			padding: 20px 0;
			vertical-align: middle;
			height: auto;
		}	

		.footer p {
  		text-align: center;
		}	

		.social {
			display: flex;
			justify-content: space-around;
		}
	}

	@media (max-width: 320px) {
		.container-fluid {
			padding: 0px;
		}

		.container {
			padding: 0px 30px;
		}

		.master-nav-links a{
			padding: 0px 0px;
		}

		.master-nav-links li{
			padding: 2px 16px;
		}

		.master-nav-links {
			width: 100%;
			margin: auto;
		}

		.navigation {
			height: 55px;
		}

		.hello {
			margin-bottom: 50px;
		}
	
		.hello h2{
			font-size: 1.5em;
		}

		.hello p {
			font-size: 1em;
		}

		.works-title {
			font-size: 2.5em;
		}

		.footer {
			background-color: #f7f7f7;
			clear: both;
			padding: 20px 0;
			vertical-align: middle;
			height: auto;
		}	

		.footer p {
  		text-align: center;
		}	

		.social {
			display: flex;
			justify-content: space-around;
		}

	}