/* 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: #68ddfc;
}



/*-------------
* 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:100%;
	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: 'Montserrat', sans-serif;	
	font-weight: 500;
	text-transform:uppercase;
	color: #0b393b;
	font-size: 2.2em;
}

h2{
	font-family: 'Montserrat', sans-serif;	
	font-weight: 500;
	color: #0b393b;
	font-size: 1.5em;	
	line-height:1.6em;
	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 32px;
	line-height:1.4em;
	}

	h3.darkTheme{
		color: #83e3fc;
	}
	

h4{
	font-family: 'Montserrat', sans-serif;	
	font-weight:500;
	color:#3c4043;
	font-size: 1.2em;	
	margin:0 0 0 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.darkTheme{
			color: #83e3fc;
		}
		
		
		a:hover{
			text-decoration:none;
			opacity:.8;
		}
		
		

		ul{
			margin:0 0 18px 52px;
		}
		
		
		.highlight{
			background: #83e3fc;
		}
		
		.heavy{
			font-weight:600;
		}
		
/*------------------------
* 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 #e96d08;
	padding:12px;
	margin:32px 0;
	width:250px;
	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:#faefc7;
	}

	a.secondaryActionDarkTheme{
		display:block;
		background:#fff;
		padding:12px;
		margin:32px;
		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;
		}

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

header{
	width:100%;
	background: #68ddfc;
	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: 'Montserrat', sans-serif;
	text-transform:uppercase;
	font-weight:600;
	width:50%;
	color: #202124;
	font-size: 1em;
	margin:35px 32px 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: #e96d08;
			font-family: 'Montserrat', sans-serif;
			font-weight:600;
			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{
					opacity:.6;
				}
				
				nav ul li.resume{
					list-style:none;
					background:#fff;
					text-indent:5px;
					padding:3px 12px 3px 6px;
					display:block;
					background-size: 11px 11px;
					border-radius:18px;
				}
				
				
				.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  left bottom;
				 	width:100%;	
				 	margin:0;
				 	padding: 32px 0;
				 }

				 section#hero article{
				 	width:50%;
				 	margin:auto;
					padding:0;
				 	float:right;
				 }
				 section#hero aside{
				 	width:50%;
				 	margin:auto;
				 	float:left;
					padding:0;
					
					
				 }
				 	section#hero img{
				 		margin:60px 0 0 0;
						padding:0;
				 		width:100%;
				 	}

				 	section#hero h2{
				 		margin:50% 0 18px 24px;
			 			font-weight:600;
						color:#20383a;
				 	}
	
				 	section#hero p{
				 		margin:18px 0 0 24px;
						padding:0;
						width:70%;
			 			font-weight:600;
						color:#20383a;
				 	}
			
					section#hero p.extraSpace{
						margin-bottom:36px;
					}
	
/*----------------------
* Overview Section
*-----------------------
*/
	
section#overview{
	background:#fff;
	width:100%;	
	margin:0;
	padding:32px 0;
}

section#overview article{
	width:50%;
	margin:auto;
	float:left;
}
section#overview aside{
	width:50%;
	margin:auto;
	float:right;
}
	section#overview img{
		margin:0;
		width:100%;
	}

	section#overview h2{
		margin:124px 0 18px 0;
	}
	
	section#overview p{
		margin:18px 0 0 0;
	}

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

		   	 section#pullQuote{
	 			background:#d3d8dc url('../img/pullquote-splash.png')no-repeat;
	    		background-size: 100%;
	   		 	padding:0;
				margin:0;
		   		 }
	 
	 
		    		section#pullQuote div#pullQuoteHero{
		    			width:100%;
		   				margin:0;
						padding-top:32px
		    		}
				
					section#pullQuote article{
						width:80%;
						margin:auto;
					}
				
					section#pullQuote aside{
						width:80%;
						margin:auto;
					}
				
	
		    		section#pullQuote h2{
		    			margin: 64px 0 64px 30%;
		    			padding:32px;
						width:66%;
		   			    background: #fff;
						box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.2);
						
		    		}
				



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

section#why article{
	width:45%;
	margin:auto;
	float:left;
}
section#why aside{
	width:45%;
	margin:auto;
	float:right;
}
	section#why img{
		margin:30% 0 0 0;
		width:100%;
	}

	section#why h2{
		margin:124px 0 18px 0;
	}
	
	section#why h4{
		margin:18px 0 24px 0;
		padding:0;
	}
	
	section#why p{
		margin:18px 0 24px 0;
	}




	/*-----------------------
	* Who is this for? Section
	*------------------------
	*/
	

		   	 section#who{
		   		background:#d3d8dc url('../img/who-splash.png')no-repeat center top;
	    		background-size: 100%;
	   		 	padding:0;
				margin:0;
		   		 }
	 
	 
		    		section#who div#whoHero{
		    			width:100%;
		   				margin:0;
						padding:0;
		    		}
				
					section#who article{
						width:80%;
						margin:auto 0;
						padding:0;
						box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.2);
						
					}
					
				
					section#who aside{
						width:80%;
						margin:auto;
					}
				
					section#who article{
		    			margin: 64px 0 64px 30%;
		    			padding:32px;
		   			    background: #fff;
						width:66%;
					}
	
		    		section#who h2{
						width:100%;
						margin:0 0 24px 0;
						
		    		}
					
					section#who ul{
						width:100%;
						margin:0 0 0 24px;
						padding:0;
						font-size:1.5em;
						float:none;
					}
					
				


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

	section#approach div#approachHero{
		width:100%;
		display:none;

	}
	
	section#approach h2{
		margin:0;
		padding:0 0 0 0;
	}
	
	
	section#approach article{
		float:left;
		width:35%;
		margin:64px 0 0 36px;
	}
	
	section#approach h4{
		margin:32px 0 0 0;
	}
	
	section#approach h4 a{
		text-decoration:none;
	}
	
	section#approach h4 a:hover{
		text-decoration:underline;
	}
	
	
	section#approach div#articlesContainer{
		width:100%;
		padding:0 0 32px 0;
		margin:auto;
	}
		
	
		section#approach img{
		margin:65px 0 0 0;
		width:60%;
		float:left;
	 }
	
	



/*----------------------
* Reviews
*----------------------
*/
	
	 section#reviews{
	 	background:#fff;
	 	width:100%;	
	 	margin:0;
	 	padding:32px 0;
	 }

	 section#reviews article{
	 	width:50%;
	 	margin:auto;
	 	float:left;
	 }
	 section#reviews aside{
	 	width:45%;
	 	margin:auto;
	 	float:right;
	 }
	 	section#reviews img{
	 		margin:30% 0 0 0;
			padding:0;
	 		width:80%;
	 	}

	 	section#reviews h2{
	 		margin:124px 0 18px 0;
	 	}
	
	 	section#reviews h4{
	 		margin:18px 0 24px 0;
	 		padding:0;
	 	}
	
	 	section#reviews p{
	 		margin:18px 0 24px 0;
			font-weight:500;
			width:100%;
		}
		
		section#reviews .quote{
			font-style:italic;
		}
		
		section#reviews p.author{
			margin-bottom:64px;
		}

		section#reviews aside{
			width:50%;
			margin:auto;
			float:right;
		}







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

	 		section#author img{
	 			margin:30% 0 0 0;
	 			width:70%;
	 		}

	 		section#author h2 h4{
				font-weight:500;
	 			margin:72px 0 32px 0;
	 		}
		
	 		section#author p.extraSpace{
	 			margin-bottom:36px;
	 		}
		
	 	 section#author aside{
	 	 	width:48%;
	 	 	float:right;
			margin:auto;
	 	 }
		 
		 section#author article{
			 width:50%;
			 float:left;
		 }
	
				
				
/*------------------------
* Contact Section
*-------------------------
*/	


footer#contact{
	background:#000;
	width:100%;	
	margin:0;
	padding:72px 0 128px 0;
}
	
	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;
		}