/* CSS */


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

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

a{
	outline:none;
}

body{
	font-size: 16px;
	background: #68ddfc;
}

html{
	scroll-behavior: smooth;
}


/*-------------
* 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:90%;
	max-width:1200px;
	margin:auto;
	padding:0;
}




.newRow{
	margin:32px auto;
}

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

.textBlockB{
	width:80%;
}

.textBlockC{
	width:95%;
}


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

h1{
font-family: 'Montserrat', sans-serif;	
	font-weight: 500;
	text-transform:uppercase;
	color: #0b393b;
	font-size: 1.8em;
}

h2{
	font-family: 'Montserrat', sans-serif;	
	font-weight: 500;
	color: #0b393b;
	font-size: 1.4em;	
	line-height:1.5em;
	margin:18px 0 18px 0;
	
	}
	
	h2.darkTheme{
		color: #fff;
	}

h3{
	font-family: 'Montserrat', sans-serif;	
	font-weight: 600;
	color:#3c4043;
	font-size: 1.25em;	
	margin:0 0 0 0;
	line-height:1.4em;
	}

	h3.darkTheme{
		color: #83e3fc;
	}
	

h4{
	font-family: 'Montserrat', sans-serif;	
	font-weight: 600;
	color:#3c4043;
	font-size: 1.2em;	
	margin:0;
	line-height:1.4em;
	}

	h4.darkTheme{
		color: #83e3fc;
		font-weight:500;
	}
	

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



	.accent{
		color: #e96d08;
		font-weight:500;
	}
	
	.accentDarkTheme{
		color:#f285ad;
		font-weight:500;
	}
	.secondaryaccent{
		color:#706d6d;
	}
	
	
	a{ 
		text-decoration:underline;
		color:#3c4043;
		opacity:1;
		}
		
		a:hover{
			text-decoration:none;
		}
		
		a.darkTheme{
			color: #83e3fc;
		}
		

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

.darkBox{
	background: #202328;
}

.splash{
	display:flex;
}

a.secondaryAction{
	display:block;
	background:#fff;
	border:2px solid #e96d08;
	padding:12px;
	margin:32px auto;
	width:90%;
	color: #202124;
	font-size:.9em;
	font-family: 'Montserrat', 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:#fff;
		padding:12px;
		margin:32px 0;
		width:150px;
		color: #213739;
		font-size:1em;
		font-family: 'Montserrat', sans-serif;
		font-weight:600;
		text-transform:uppercase;
		text-align:center;
		text-decoration:none;
		border-radius:24px;
		cursor:pointer;
		}
	
		a.secondaryActionDarkTheme:hover{
			opacity.6;
		}
		
		
		.highlight{
			background: #83e3fc;
		}
		
		.heavy{
			font-weight:600;
		}
		

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

header{
	width:100%;
	background: #68ddfc;
	position:fixed;
	top:0; 
	left:0;
	z-index:10000;
}

h1#logo{
	font-family: 'Montserrat', sans-serif;
	text-transform:uppercase;
	font-weight:600;
	width:90%;
	color: #202124;
	font-size: 1.2em;
	text-align:center;
	margin:32px auto;
	padding:0;
}
	
	h1#logo a{
		text-decoration:none;
		opacity:1;
		}
		
		h1#logo a:hover{
			opacity:.8;
		}


nav{
	margin:32px 32px 0 0;
	padding:0;
	float:right;
	display:none;
}
	
	nav ul{
		display:none;	
		text-transform:uppercase;	
		margin:0;
		padding:0;
		}
		
		nav ul li{
				display:none;
			}
		
			nav ul li a{
				color: #202124;
				text-decoration:none;
			}
			
				nav ul li a:hover{
					opacity:.6;
				}
				
				nav ul li.resume{
					display:none;
				}
			    
				.dropShadow{
					box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2);
				    animation: fadeIn 1s;
				    -webkit-animation: fadeIn 1s;
				    -moz-animation: fadeIn 1s;
				    -o-animation: fadeIn 1s;
				    -ms-animation: fadeIn 1s;
				  }

				  @keyframes fadeIn {
				    0% {  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0); }
				    100% {  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2); }
				  }

				  @-moz-keyframes fadeIn {
  				    0% {  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0); }
  				    100% {  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2); }
				  }

				  @-webkit-keyframes fadeIn {
  				    0% {  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0); }
  				    100% {  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2); }
				  }

				  @-o-keyframes fadeIn {
  				    0% {  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0); }
  				    100% {  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2); }
				  }

				  @-ms-keyframes fadeIn {
  				    0% {  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0); }
  				    100% {  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2); }
				  }

				
/*--------------------
* Hero Section
*---------------------
*/	
				section#hero{
					background: #68ddfc url(../img/hero-bg.png) repeat-x;
				 	width:100%;	
				 	margin:0;
				 	padding: 32px 0;
				 }

				 section#hero article{
				 	width:75%;
				 	margin:auto;
					padding:0;
				 }
				 
				 section#hero aside{
				 	width:100%;
				 	margin:auto 0;
					padding:0;	
				 }
				 	section#hero img{
				 		margin:60px 0 0 0;
						padding:0;
				 		width:100%;
				 	}

				 	section#hero h2{
				 		margin:0 0 12px 0;
			 			font-weight:600;
						color:#20383a;
				 	}
	
				 	section#hero p{
						margin:0;
						padding:0;
						width:100%;
			 			font-weight:600;
						color:#20383a;
				 	}
					
					section#hero a{
						width:90%;
						margin:24px auto;
					}
	
	

	
/*----------------------
* Overview Section
*-----------------------
*/
	
section#overview{
	background:#fff;
	width:100%;	
	margin:0;
	padding: 32px 0 72px 0;
}

section#overview article{
	width:95%;
	margin:auto;
	padding-left:10px;
}
section#overview aside{
	width:100%;
	margin:auto;
}
	section#overview img{
		width:100%;
		margin:0;
		padding:0;

	}

	section#overview h2{
		width:80%;
		margin:18px auto;
	}
	
	section#overview h4{
		margin:18px 0 0 0;
	}
	
	
	section#overview p{
		margin:auto;
		width:80%;
	}
	
	section#overview a{
		width:90%;
		margin:0;
	}

	/*-------------------------
	* Pull Quote Section						
	*--------------------------
	*/

		section#pullQuote{
			background:#d3d8dc url('../img/pullquote-splash.png')no-repeat center top;
			background-size: 350%;
			padding:0 0 0 0;
		}
	 
	 
			section#pullQuote div#pullQuoteHero{
				width:100%;
				background-size:300%;
				margin:0;
				padding:32px 0;
			}
									

			section#pullQuote h2{
				margin: 64px auto;
				padding:32px;
				width:60%;
			    background: #fff;
			}
				
							 
/*----------------------
* Why Draw? Section
*-----------------------
*/
	
	section#why{
		background:#fff;
		width:100%;	
		margin:0;
		padding: 32px 0 72px 0;
		}

		section#why article{
			width:80%;
			margin:auto;
			padding: 0;
		}
		
		section#why aside{
			width:80%;
			margin:auto;
			}
			
			section#why img{
				width:100%;
				margin:0;
				padding:0;
			}

			section#why h2{
				margin:18px 0 32px 0;
			}
	
			section#why h4{
				margin:18px 0 0 0;
			}
	
	
			section#why p{
				margin:0 0 32px 0;
				width:100%;
			}
	
			section#why a{
				width:100%;
				margin:0;
			}


/*-------------------------
* Who Section						
*--------------------------
*/

section#who{
 	background:#d3d8dc url('../img/who-splash.png')no-repeat center top;
	background-size: 300%;
	padding:0 0 0 0;
	margin:0;
	}
	 
	section#who div#whoHero{
		width:100%;
		margin:0;
		padding:32px 0;
	}								

	section#who article{
		margin:32px auto;
		padding:32px;
		width:60%;
		background: #fff;
	}
	
	section#who h2{
		width:100%;
		margin:0 0 24px 0;
		
	}
	
	section#who ul{
		width:100%;
		margin:0 0 0 24px;
		padding:0;
		font-size:1em;
		float:none;
	}
	
	
	
	



/*------------------------
* Approach Section
*-------------------------
*/
	
section#approach{
	width:100%;
	margin:0;
	padding-bottom:72px;
	background:#fff;
}

	section#approach div#approachHero{
		display:none;
	}
	
	section#approach h2{
		margin:0 0 0 32px;
		width:80%;
		padding:72px 0 0 0;
	}
	
	
	section#approach h4{
		margin:0 0 18px 32px;
	}
	
	section#approach h4 a{
		text-decoration:none;
	}
	
	section#approach h4 a:hover{
		text-decoration:underline;
	}
	
	section#approach p{
		margin:0 0 32px 32px;
		width:80%;
	}
	
	section#approach div#articlesContainer{
		width:95%;
		padding:0 0 32px 0;
		margin:auto;
		}
	
		section#approach  img{
		margin:64px 0 32px 0;
		width:100%;
	 }
	
	
	

/*----------------------
* Why Draw? Section
*-----------------------
*/
	
	 	section#reviews{
	 		background:#e1e9ef;
	 		width:100%;	
	 		margin:0;
	 		padding: 32px 0 72px 0;
=	 		}

	 		section#reviews article{
	 			width:95%;
	 			margin:auto;
	 			padding-left:10px;
	 		}
		
	 		section#reviews aside{
	 			width:100%;
	 			margin:auto;
	 			}
			
	 			section#reviews img{
	 				width:100%;
	 				margin:0;
	 				padding:0;
					display:none;
	 			}

	 			section#reviews h2{
	 				margin:18px 0 32px 32px;
	 			}
	
	 			section#reviews h4{
	 				margin:18px 0 0 32px;
	 			}
	
	
	 			section#reviews p{
	 				margin:0 0 32px 32px;
	 				width:80%;
	 			}
	
	 			section#reviews a{
	 				width:90%;
	 				margin:0;
	 			}

				section#reviews .quote{
					font-style:italic;
				}
		
				section#reviews p.author{
					margin-bottom:64px;
					font-weight:600;
				}






/*----------------------
 * Author Section
 *-----------------------
 */
	
	
	 	section#author{
			background:#202328;
	 		width:100%;	
	 		margin:0;
	 		padding: 32px 0 72px 0;
	 	}

	 	section#author article{
	 		width:100%;
	 		margin:auto;
			padding-left:10px;
	 	}
	 	section#author aside{
	 		width:70%;
	 		margin:auto;
	 	}
	 		section#author aside img{
	 			margin:72px auto;
				padding:0;
	 			width:100%;
	 				}

	 		section#author h2{
	 			margin:18px 0 0 0;
	 		}
	
	 		section#author h4{
	 			margin:18px 0 0 0;
	 		}
	
	
	 		section#author p{
	 			margin:32px 0;
	 		}
	
	 		section#author a{
	 			width:90%;
	 			margin:0;
	 		}


/*------------------------
* Contact Section
*-------------------------
*/	


footer#contact{
	background:#000;
	width:100%;	
	margin:0;
	padding:72px 0 128px 0;
s	}
	
	footer#contact h2{
		margin:0 0 18px 18px;
	}
	
	footer#contact p{
		margin:0 0 0 18px;
	}

	footer#contact p 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;
		}