@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Merriweather:700|Muli:400,600,800|Roboto+Condensed:700');

body {
	color:#000;
	font-family: 'Muli', sans-serif;
	font-weight:400;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	overflow-x: hidden;
	padding: 0 0 0 0;
	-webkit-font-smoothing: antialiased;
}



a:link{
	color: #333;
	outline:none;
	text-decoration:none;
	border-bottom: 2px solid #fbe26c;
}
a:hover{
	color:#777;
}
a:visited{
	color: #000;
}
p{
	margin: 1.1rem 0;
}
.clearset {
	clear:both;
}

.shadow {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(102,102,102,0.45);
	-moz-box-shadow: 0px 0px 5px 0px rgba(102,102,102,0.45);
	box-shadow: 0px 0px 5px 0px rgba(102,102,102,0.45);
}
a.yellow-button{
	background-color:#fbe26c;
	border:none;
	color: #000;
	padding:8px;
	
}

/* MASTHEAD AND INTRO STYLES */

#masthead{
	margin-top:30px;
}

#masthead .title a{
	border:none;
	color:#000;
	text-decoration:none;
	
}
a.nav{
	border:none;
	color:#000;
	display: inline;
	float:right;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	font-weight:700;
	margin:10px 20px;
	text-transform: uppercase;
	}
a.nav:hover{
	color: #fbe26c;
	}
	
a.current{
	border:none;
	border-top: 10px solid #fbe26c;
	color:#000;
	display: inline;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	font-weight:700;
	margin:0 20px;
	padding:0;
	text-transform: uppercase;
	}
	
h1.title {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 24px;
	margin-top:4px;
	text-transform: uppercase;
	
}
h1.description{
	color:#777;
	font-family:'Muli', sans-serif;
	font-size: 33px;
	font-weight:600;
	padding: 30px 0 40px;
}

h4{
	font-weight:bold;
}
.annotation{
	font-size:12px;
	color:#666;
	margin-left:20px;
}

.section-break{
	background-color:#fbe26c;
	padding:20px 10px;
	font-size:20px;
	margin:20px 0 0;
}

@media only screen and (max-width: 765px) {
    h1.title {
	font-family: 'Roboto Condensed', sans-serif;
	font-size:21px;
	margin-top:2px;
	text-transform: uppercase;
	}
	a.nav{
		font-size:14px;
		margin:8px;
	}
	a.current{
		font-size:14px;
		margin:2px 8px;
		border-top: 6px solid #fbe26c;
	}
	h1.description{
	font-size: 20px;
	font-weight:600;
	padding: 30px 0;
	}

 }



/* PROJECT LAYERS */

.project h2{
	font-family: 'Merriweather', serif;
	font-size:36px;
	margin-top: 75px;
}
.project h3{
	font-size:24px;
	line-height:1.2em;
	margin:15px 0;
}

#subscription-project{
	background-image: url("/images/project-layers/subscription-layer-bg.png");
	background-color: #fbe26c;
	background-repeat: no-repeat;
	height:500px;
}
#audible-news {
	background-image: url("/images/project-layers/hwm-layer-bg.png");
	background-color:#68cdc9;
	background-repeat: no-repeat;
	background-position: right top;
	height:500px;
} 
#nav-layer {
	background-image: url("/images/project-layers/navigation-layer-bg.png");
	background-color:#e38066;
	background-repeat: no-repeat;
	height:500px;
} 
#business-card{
	background-image: url("/images/project-layers/business-card-layer.png");
	background-color:#fbe26c;
	background-repeat: no-repeat;
	background-position:left top;
	padding-bottom:30px;

}
#open-layer{padding:70px 0;}
#open-layer h2{margin-top:0;}
#skills {
	background-color:#e38066;
	padding:30px 0;
}
.contact-card{
	background-color:#faf7e9;
	border-radius:15px;
	margin:100px auto;
	padding:18px 0;
	text-align: center;
	max-width: 340px;
}
.contact-card p{
	margin:5px 0;
}
.contact-card a{
	border-bottom:none;
	color:#000;
}
.contact-card a:hover{
	border-bottom: 2px solid #fbe26c;
}
#subscription-project img {
 margin: 0 auto;
}

a.button-style{
	background-color: #fff;
	border:none;
	color:#000;
	display:block;
	margin-top:30px;
	padding:10px;
	text-align: center;
	width:100px;
	
}
a.button-style:hover{
	font-weight: bold;
}

@media only screen and (max-width: 767px) {
	.project h2{font-size:24px; margin-top:50px;}
	#subscription-project, #about-me, #audible-news, #nav-layer, #business-card {background-image:none; height:auto;}
	#business-card .contact-card{margin-top:20px; margin-bottom:20px;}
	#business-card h2{margin-top:25px;}
	
}

/* STORY STYLES */

#heading{
	padding:40px 0;
	margin:30px 0 40px 0;
}
.audible{
	background-image: url("/images/project-layers/hwm-layer-bg.png");
	background-color:#68cdc9;
	background-repeat: no-repeat;
	background-position:right 0;
	padding:40px;
}
.subscribe{
	background-image: url("/images/project-layers/subscription-story-bg.png");
	background-color: #fbe26c;
	background-repeat: no-repeat;
	background-position:right 0;
}
.navigation-ia {
	background-image: url("/images/project-layers/navigation-story-bg.png");
	background-color:#e38066;
	background-repeat: no-repeat;
	background-position:right 0;
} 

h1.story-title {
	font-family: 'Merriweather', serif;
	font-size:36px;
}

h2.sub-title{
	font-size: 24px;
}
#story-body{
	color:#000;
	font-size: 16px;
	line-height:1.5em;
	padding-bottom:150px;
}

#story-body h3{
	font-size:33px;
	margin-top:60px;
}
#story-body img{
	margin:0 auto;
	display:block;
}

h3.instory{
	display:block;
	line-height:1.2em;
	margin-top:60px;
}


.sidebar li {
	font-size:14px;
	color:#666;
	margin:5px 0 5px 10px;
	list-style-type: circle;
	
	}
#story-body img{
	margin:0 auto;
	text-align:center;}
	
ul.ux-list li{
	background-image: url('../images/orange-bullet.png');
	background-repeat: no-repeat;
	background-position: left 8px;
	margin:18px 0 18px 0px;
	padding:0 0 0 15px;
}
ul.ux-list{
	margin-bottom:30px;
}

/* ABOUT PAGE */



h1.about {
	color:#777;
	font-family:'Muli', sans-serif;
	font-size: 33px;
	font-weight:600;
	padding: 15px 0; 
}

h3.company{
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
}
h3.company span.coname{
	padding-right:3px;
}
h3.company span.timeline{
	padding-left:10px;
}
img.logo{
	margin:auto;
}
.contact{
	width:264px;
	margin:30px auto;		
}

a.img-circle{
	background-color:#cbc9a9;
	color:#fff;
	border:solid 1px #c4c2a6;
	display:block;
	font-size:1.3rem;
	float:left;
	height:40px;
	margin:0px 13px;
	padding:4px 2px;
	width:40px;
}
a.img-circle:hover{
	background-color:#c4c2a6;
}

.intro{
	height:500px;
	text-align:center;
}

.full-intro{
    margin:auto;
    padding-top:150px;
    text-align:center;
    width:800px;
}

#intro {
    background: url('../images/background_main.jpg')no-repeat 50% 0 fixed;
    height: 512px; 
    margin: 0 auto;
    width: 100%;
    position: relative;
}
#projects {
    background: url('../images/background_main.jpg')no-repeat 50% 0 fixed;
    height: auto; 
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    padding:0;
}
#resume {
   
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
 
    color: #fff;
}

.portfolio{
	background-color:#faf8f1;
	padding-bottom:30px;
}
.portfolio h2{
	border-bottom:0;
}
ul.skillset li {
	float:left;
	margin:5px 25px 5px 15px;
	list-style-type:disc;
	
}
.w-transparent, .tile-content{
	background: url('../images/white-transparent.png');
	padding: 10px 0;
}
.tile-content{
	border: solid 1px #ebe8de; 
	border-radius: 5px;
	padding:10px;
}
.tile-content h5 {
	text-transform: uppercase;
}

/* modal styles */
.modal-header{
	border-bottom: none;
}
.modal-header .close {
	margin-top: -10px;
}
.modal-dialog{
	background-color: #fff;
	width:95%;
}
.modal-content {
	border: none;
	border-radius: 0px;
	box-shadow:none;
	
}
.highlight{
	font-family: 'Merriweather', serif;
	color:#000;
}
ul.number-highlight li {
	float:left;
	padding:0 8px;

}
span.years-number{
	font-size: 45px;
	padding-right:8px;
}
span.highlight-text{
	font-size:20px;
	
}
/*  SMALL OVERRIDES   */
@media (min-width: 768px) and (max-width: 991px){
	.intro{height:400px;}
	
}

/*  X-SMALL OVERRIDES   */
@media (max-width:767px){
	h2{margin:0px;}
	#intro{background: url('../images/background_xs.jpg')no-repeat 50% top fixed; height:300px;}
	.full-intro{padding-top:40px; width:100%;}
	.portfolio{padding-bottom:10px;}

	/* h3.company span.coname{display:block;} */
	}