/* CSS */


/*----------
* Reset
*-----------
*/

p, ul, li, nav, h1, h2, h3, h4, h5, h6, div, header, body{
   margin:0;
   padding:0;
}

a{
	outline:none;
}

html{
	scroll-behavior: smooth;
}



body{
	font-size: 18px;
	background:#fff;
}



/*-------------
* Clearfix
*--------------
*/
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
	.clearfix {display:block;}
/* End hide from IE Mac */
	
	
	

/*---------------
* Layout Grid
*----------------
*/

/* Full Width Container */
.container{
	width:80%;
	max-width:1000px;
	margin:auto;
	padding:0;
}


.threeCol:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	
}

.onefifth{
	width:33%;
	max-width:240px;
	float:left;
	margin:0;
	padding:0;
}



.newRow{
	margin:32px auto;
}

/*--------------------
* Text Block Widths
*---------------------
*/
		
.textBlockA{
	width:95%;
}

.textBlockB{
	width:100%;
}

.textBlockC{
	width:70%;
}



/*---------------
* Fonts 
*----------------
*/

h1{
font-family: 'Roboto', sans-serif;	
	font-weight: 500;
	text-transform:uppercase;
	color: #202124;
	font-size: 2.2em;
}

h2{
	font-family: 'Roboto', sans-serif;	
	text-transform:uppercase;
	font-weight: 400;
	color: #202124;
	font-size: 1.7em;	
	margin:18px 0 18px 0;
	
	}
	
	h2.darkTheme{
		color: #efedee
	}

h3{
font-family: 'Roboto', sans-serif;	
	text-transform:uppercase;
	font-weight: 400;
	color: #d4145a;
	font-size: 1.4em;	
	margin:32px 0 18px 0;
	}

	h3.darkTheme{
		color: #f285ad;
	}
	

h4{
	font-family: 'Roboto', sans-serif;	
	font-weight: 500;
	color: #202124;
	font-size: 1.2em;	
	margin:0;
	line-height:1.4em;
	
	}

	h4.darkTheme{
		color: #fff;
	}
	

h5{
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	color: #80868B;
	font-size: 1em;	
	margin:9px 0 24px 0;
	
	}
	
	h5.darkTheme{
		color: #dadce0;
	}
	
p, ol, ul {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color:#3c4043;
	font-size: .9em;	
	margin:18px 0 0 0;
	line-height:1.5em;	
	}	
	
	
	.bodyDarkTheme{
		color: #dadce0;
	}	


	.accent{
		color:#d4145a;
		font-weight:500;
	}
	
	.accentDarkTheme{
		color:#f285ad;
		font-weight:500;
	}
	
	a{ 
		text-decoration:underline;
		color:#3c4043;
		opacity:1;
		}
		
		a:hover{
			text-decoration:none;
			opacity:.8;
		}
		
		a.linkDarkTheme{
			color:#33ccff;
		}

		ul{
			margin:0 0 18px 52px;
		}
/*------------------------
* Resuable Styles
*-------------------------
*/
		
.shadowBox{
	background: #fff;
	box-shadow: 1px 1px 10px 1px #999;
}

.darkBox{
	background: #202328;
}

.splash{
	display:flex;
}

a.secondaryAction{
	display:block;
	background:#fff;
	border:2px solid #33ccff;
	padding:12px;
	margin:32px 0;
	width:150px;
	color: #202124;
	font-size:.9em;
	font-family: 'Roboto', sans-serif;
	text-transform:uppercase;
	text-align:center;
	text-decoration:none;
	border-radius:8px;
	cursor:pointer;
	}
	
	a.secondaryAction:hover{
		background:#cbf0f8;
	}

	a.secondaryActionDarkTheme{
		display:block;
		background:#202124;
		border:2px solid #33ccff;
		padding:12px;
		margin:32px 0;
		width:150px;
		color: #fff;
		font-size:.9em;
		font-family: 'Roboto', sans-serif;
		text-transform:uppercase;
		text-align:center;
		text-decoration:none;
		border-radius:8px;
		cursor:pointer;
		}
	
		a.secondaryActionDarkTheme:hover{
			background:#265669;
		}

/*--------------------
* Header Elements
*---------------------
*/

header{
	width:100%;
	background: #fff;
	border-bottom: 1px solid #ccc;
	position:fixed;
	top:0; 
	left:0;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.3);
	z-index:10000;
	
}

h1#logo{
	font-family: 'Roboto', sans-serif;
	text-transform:uppercase;
	font-weight: 400;
	width:50%;
	color: #202124;
	font-size: 1em;
	margin:32px 0 16px 32px;
	padding:0;
	float:left;
	}
	
	
	h1#logo a{
		text-decoration:none;
		opacity:1;
		}
		
		h1#logo a:hover{
			opacity:.8;
		}
	

nav{
	margin:32px 32px 0 0;
	padding:0;
	float:right;
}
	
	nav ul{
		display:flex;	
		text-transform:uppercase;	
		margin:0;
		padding:0;
		}
		
		nav ul li{
			color: #d4145a;
			font-family: 'Roboto', sans-serif;
			font-weight:400;
			font-size:.8em;
			margin:0;
			padding:0;
			text-indent:-5px;
			display:none;
			}
		
			nav ul li a{
				color: #202124;
				text-decoration:none;
			}
			
				nav ul li a:hover{
					color:#d4145a;
				}
				
				nav ul li.resume{
					list-style:none;
					text-indent:5px;
					padding:0 18px 0 0;
					background: url('../img/nav-resume-icon.png') no-repeat right center; 
					display:block;
					background-size: 11px 11px;
					display:block;
				}
			    
/*--------------------
* Hero Section
*---------------------
*/	
section#hero{   	
	width:100%;
	height:340px;
	background:url('../img/hero-splash.jpg') no-repeat;
	background-position: top center;
	background-size: 200%;
	display:flex;
	margin:70px 0 0 0;
	}
	
	section#hero h1{
		margin:auto;
		padding: 20px;
		max-width:80%;
		text-align:center;
	}

	
/*----------------------
* About Section
*-----------------------
*/
	
section#about{
	background:#fff;
	width:100%;	
	margin:0;
	padding-top:32px;
}

section#about article{
	width:100%;
	margin:auto;
	padding-bottom:32px;
}
section#about aside{
	width:100%;
	margin:auto;
}
	section#about img{
		display:none;
	}

	section#about h2{
		margin:0;
	}
	
	section#about p{
		margin:32px 0;
		width:80%;
	}
	
	
	
/*----------------------
* About Section
*-----------------------
*/
	
	section#book{
		background:#fff;
		width:100%;	
		margin:0;
		padding-top:32px;
	}

	section#book article{
		width:100%;
		margin:auto;
		padding-bottom:32px;
	}
	section#book aside{
		width:100%;
		margin:auto;
	}
		section#book img{
			margin:36px 0;
		width:100%;
  		background:#a6eef8;
		
		}

		section#book h2{
			margin:0;
		}
	
		section#book p{
			margin:32px 0;
			width:70%;
		}
		section#book div.actions{
			width:500px;
			margin-top:0;
		}

		section#book div.actions a{
			float:left;
			margin-right:36px;
			margin-top:0;
			display:block;
		}

/*------------------------
* Publications Section
*-------------------------
*/
	
section#publications{
	width:100%;
	margin:0;
	background:#fff;
}

	section#publications div#publicationsHero{
		width:100%;
		height:120px;
		background:#d4d7dc url('../img/publications-splash.png') no-repeat;
		background-position: center center;
		background-size: 150%;
		display:flex;
	}
	
	section#publications h2{
		margin:0;
		padding:108px 0 0 0;
	}
	
	
	section#publications h4{
		margin:32px 0 0 0;
	}
	
	section#publications h4 a{
		text-decoration:none;
	}
	
	section#publications h4 a:hover{
		text-decoration:underline;
	}
	
	
	section#publications div#articlesContainer{
		width:100%;
		padding:0 0 32px 0;
		margin:auto;
		}
		
	
		section#publications img{
		margin:72px 0 0 0;
		width:45%;
		border:1px solid #ccc;
		float:left;
	 }
	
	
	section#publications article{
		float:left;
		width:50%;
		margin:36px 0 0 18px;
	}
	
/*------------------------
* Work Section
*-------------------------
*/	

	 section#work{
		 background:#202328;
	 }
	 
	 
 		section#work div#workHero{
 			width:100%;
 			height:280px;
 			background:url('../img/work-splash3.jpg')no-repeat;
 			background-position: top center;
 			background-size: 180%;
 			display:flex;
			margin:72px 0 72px 0;
			border-bottom:1px solid #333;	
			
 		}
		
		section#work article{
			width:100%;
			margin:auto;
		}
		
	
		section#work aside{
			width:100%;
			margin:auto;
		}
	
 		section#work h2{
 			margin: 72px 0 0 0;
			padding:18px;
			
			color: #fff;
 		}
		
		section#work h4{
			margin:36px 0 0 0;
		}
		
		
		section#work div#samplesContainer{
			width:100%;
			margin:0;
		}
	
			section#work div#samplesContainer img{
			margin:72px 0 0 0;
			width:100%;
		 }

		section#work div#samplesContainer p.credit {
			font-size:.8em;
			color:#80868b;
			margin: 4px 0 0 18px;
		}
	
		 
		 section#work h4#requestText{
			 width:100%;
			 margin:72px 0;
			 padding-top:36px;
			 border-top: 1px solid #333;
			 
		 }


/*------------------------
* Speaking Section
*-------------------------
*/	


		 section#speaking{
		 	background:#efedee;
		 	width:100%;	
		 	margin:0;
			padding:32px 0 0 0;
		 }
		 
		 section#speaking article{
		 	width:60%;
		 	margin:auto;
		 	float:left;
		 }
		 
		 section#speaking aside{
		 	width:40%;
		 	margin:auto;
		 	float:right;
			 
		 }
		 
		 section#speaking p{
			 width:80%;
		 }

		 	section#speaking h2{
		 		margin:36px auto;
				width:100%;
		 	}	
					
			section#speaking aside#speaking-venues{
				background:#fff;
				padding:0 0 48px 0;
				margin:108px auto;
			}
			
			section#speaking aside#speaking-venues h4{
				margin:32px auto;
				padding:18px 0 18px 0 ;
				border-bottom:1px solid #ccc;
				text-align:center;
				width:100%;
			}
			
			section#speaking aside#speaking-venues img{
				display:block;
				width:50%;
				margin:32px auto;
			}





/*-------------------------
* Awards & Press Section
*--------------------------
*/

	   	 section#awards{
	   		 background:#efedee;
			 padding:0 0 72px 0;
	   	 }
	 
	 
	    		section#awards div#awardsHero{
	    			width:100%;
	    			height:320px;
	    			background:url('../img/awards-splash.jpg')no-repeat;
	    			background-position: bottom, left;
	    			background-size: 150%;
	   				margin:0 0 72px 0;
					padding-top:32px
	    		}
				
				section#awards article{
					width:80%;
					margin:auto;
				}
				
				section#awards aside{
					width:80%;
					margin:auto;
				}
				
	
	    		section#awards h2{
	    			margin: 18px 18px 0 18px;
	    			padding:18px 18px 0 18px;
	   			    color: #fff;
	    		}
				
	    		section#awards p{
	    			margin: 9px 18px 18px 18px;
	    			padding:9px 18px 18px 18px;
					
	    		}
				
				section#awards div.darkTheme{
					background:#202328;
					margin:0;
					padding:0;
					
				}
				
				section#awards h4{
					margin:32px auto;
					width:80%;
					max-width:1200px;
				    padding:0 0 8px 32px;
					border-bottom:1px solid #ccc;

					
				}

				section#awards div.onefifth{
					padding:0 18px;
					margin:auto;
					width:25%;
				}


				
				section#awards img{
					padding:0;
					margin:18px auto;
					width:100%;
					margin:18px auto;
					
				}
				
				
/*------------------------
* Contact Section
*-------------------------
*/	


footer#contact{
	background:#202328;
	width:100%;	
	margin:0;
	padding:72px 0 128px 0;
	}
	
	footer#contact h2{
		margin:0 0 18px 18px;
	}
	
	footer#contact h4{
		margin:0 0 0 18px;
	}

	footer#contact h4 a{
		color:#33ccff;
	}
	
	footer p#legal {
		font-size:.8em;
		color:#80868b;
		margin: 18px 0 18px 18px;
	}
	
	footer#contact aside img{
		margin:36px 0 0 18px;
		width:50px;
		
	}
	footer#contact aside img a{
		opacity:1;
	}
		footer#contact aside img a:hover{
			opacity:.8;
		}