/*---------------- general styles -------------------------*/
 body {
	  background-color: #f5e7dc;
	  font-family: 'Marvel', "Helvetica", Helvetica, Arial, sans-serif;	
	  color: #252525;
	  font-weight: 400;
	  line-height: 1.2rem;
  }

h1, h2, h3, h4, h5, h6 {
   font-family: 'Marvel', "Helvetica", Helvetica, Arial, sans-serif;	
   color: #252525;
   font-weight: 600;
}

h2, h3 {
	  	 line-height: 2;
  }
  
 .bold {
	 font-weight: 600;
 }
 
 a {
	 color: #483234;
	 padding: 0.5rem;
	 -webkit-border-radius: 5px;
	 -moz-border-radius: 5px;
	 border-radius: 5px;
 }
 
  a:hover, a:active {
	color: #fff;
	transition: all 0.5s ease;
	background-color: rgba(72, 50, 52, 0.32);
	padding: 0.5rem;
    -webkit-border-radius: 5px;
	-moz-border-radius:5px;
	border-radius:5px;	
	
 }
  
/*----------------- hero styles --------------------------*/ 
  
 .hero {	 
	 background: url(../images/hero-bkg.jpg) center no-repeat;
	 height: 800px;
	 position: relative;
	 z-index: 1;
	 max-width: 100%;
 }	
 
 .hero div.teaser {
	 margin-top: 10rem;
	 background-color: rgba(72, 50, 52, 0.32);
	 display: block;
	 width: 30rem;
	 text-align: left;
	 padding: 0.5rem 1rem 1rem 0;
 }
 
  .hero div.teaser h1 {
	 color: white;
	 text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.28);	 
	 text-align: left;
	 padding-left: 1.5rem;
	 margin: 0;
	 line-height: 1;
	 padding-top: 1rem;
  }
  
   .hero div.teaser p {
	 color: white;
	 text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.28);
	 padding-left: 1.5rem;
	 font-size: 1.5rem;
	 margin: 0;
	 line-height: 1;
	 padding-bottom: 1rem;	 
  }
 
/*----------------- navigation styles --------------------------*/ 

nav {
	background-color: rgba(72, 50, 52, 0.32);
	margin-top: -1rem;
    margin-bottom: 0;
	display: block;
	position: relative;
	z-index: 2;
	line-height: 1rem;
	width: 100%;
	padding: 2rem 0 1rem 0;

}

nav ul {
	padding-top: 0;
	display: block;	
	height: auto;
}

nav ul li {
	display: inline;	
}
 
nav ul li > a {
    color: #483234;
	font-family: 'Marvel', "Helvetica", Helvetica, Arial, sans-serif;	
	background: none;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.28);
	font-size: 1.5rem;
}
 
nav ul li > a:hover, a:active {
	color: #ffffff;
	background: none;
}

nav ul li:hover > a {	
	color: #483234;
	background: none;
}

.top-bar-section ul li > a {
	color: #483234;
	font-family: 'Marvel', "Helvetica", Helvetica, Arial, sans-serif;	
	background: none;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.28);
	font-size: 1.5rem;
    padding: 0 1rem;	
	background: none;

}

.top-bar-section ul li > a:hover, a:active {
	color: #ffffff;
	font-family: 'Marvel', "Helvetica", Helvetica, Arial, sans-serif;	
	background: none;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.28);
    padding: 0 1rem;
	font-size: 1.5rem;
	background: none;
	line-height: 1rem;
}
	
	

/*----------------- home styles --------------------------*/ 
  
.home {	 
	 padding-top: 2em;
	 padding-bottom: 2em;
	 border-bottom: 1px solid rgba(236, 216, 201, 1);
	 margin-top: 2em;
	 margin-bottom: 2em;
 }	
 
.home p {
	  	 font-size: 1.5rem;
  }
  
.home .genericon-code:before { 
		content: "\f462"; 
		font-size: 4.3rem; 
		color: #483234; 
		line-height: 1; 
		padding-right: 0.2rem;
	}
	
	
/*----------------- work styles --------------------------*/ 
  
 .work {	 
	 padding-top: 0;
	 padding-bottom: 3em;
	 border-bottom: 1px solid rgba(236, 216, 201, 1);
	 margin-top: 2em;
	 margin-bottom: 2em;
 }	
 
 .work p {
	  	 padding-top: 1rem;
		 font-size: 1.3rem;
		 clear: both;
  }
  
.work .genericon-heart:before { 
		content: '\f461'; 
		font-size: 4.3rem; 
		color: #483234; 
		line-height: 1; 
		padding-right: 0.2rem;
	}
	
.work h4 {
	    background-color: rgba(72, 50, 52, 0.32);
		color: white;
		display: block;
		width: 30rem;
		height: 3rem;
		text-align: right;
		padding: 0.5rem 1rem 1rem 0;
		float: right;
		font-weight: 700;
		margin-top: -0.5rem;
		position: relative;
		z-index: 2;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.28);
}

.work h3 {
	 padding-top: 2em;
	 border-top: 1px solid rgba(236, 216, 201, 1);
}

.work h3.first {
	border-top: none;
}

.work img {
		position: relative;
		z-index: 1;
		width: 100%;
}
	  
/*----------------- work styles --------------------------*/ 
  
 .about {	 
	 padding-top: 0;
	 padding-bottom: 6em;
	 border-bottom: 1px solid rgba(236, 216, 201, 1);
	 margin-top: 2em;
	 margin-bottom: 2em;
 }	
 
 .about p.me {
	  	 font-size: 1.3rem;
  }
    
.about .genericon-standard:before { 
		content: '\f100'; 
		font-size: 4.3rem; 
		color: #483234; 
		line-height: 1; 
		padding-right: 0.2rem;
	}
	
.about .genericon-star:before { 
		content: '\f512'; 
		font-size: 2.2rem; 
		color: #483234; 
		line-height: 1.5; 
		padding-right: 0.2rem;
	}

.about img {
		padding-bottom: 0.5rem;
}
	
/*----------------- contact styles --------------------------*/ 
  
 .contact {	 
	 padding-top: 0;
	 padding-bottom: 4em;
	 border-bottom: 1px solid rgba(236, 216, 201, 1);
	 margin-top: 2em;
	 margin-bottom: 2em;
	 text-align: center;
 }	
 
  .contact p {
	  	 font-size: 1.5rem;
  }
  
.contact .genericon-mail:before { 
		content: '\f410'; 
		font-size: 4.3rem; 
		color: #483234; 
		line-height: 1; 
		padding-right: 0.2rem;
	}	
	
/*----------------- footer styles --------------------------*/ 
  
 .footer {	 
	 padding-top: 0;
	 padding-bottom: 4em;
	 margin-top: 2em;
 }	
 
 .footer p {
		 text-align: center;
  }
  
.footer ul {
	text-align: center;
	}
	
.footer ul li {
	display: inline;
	padding: 0 1.5rem;
	font-size: 1.5rem;
	}
	
.footer ul li a {
	font-weight: 700;
}
/*----------------- media queries styles --------------------------*/ 

@media only screen and (max-width: 40em) /* Define mobile styles */ { 

 .hero div.teaser {
	 width: 18rem;
 	}
 	
  .hero div.teaser p {
	 font-size: 1rem;
	 line-height: 1.2;
  }
 	
 
.top-bar-section ul li > a {
    padding: 0 0.5rem;

    }
 
}