/* 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;
	min-width:1100px;
}



/*-------------
* 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;
}



/* Two Equal Columns */
.twocol{
	width:50%;
	max-width:600px;
	float:left;
	margin:0;
	padding:0;
}

/* 3 Columns */
.threecol{
	width:33.3%;
	max-width:400px;
	float:left;
	margin:0;
	padding:0;
}

/* 2/3 Columns Width Container */
.twothirdscol{
	width:66.6%;
	max-width:800px;
	float:left;
	margin:0;
	padding:0;
}

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

.newRow{
	margin:32px auto;
}

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

.textBlockB{
	width:60%;
}

.textBlockC{
	width:75%;
}


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

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

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

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

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


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

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


		.accent{
			color:#e96d08;
		}
		
		.secondaryaccent{
			color:#706d6d;
		}
		
		a.primaryAction{
			display:block;
			background:#fff;
			border:2px solid #f98d02;
			padding:12px;
			margin:32px 0;
			width:250px;
			color: #202124;
			font-size:1em;
			font-family: 'Montserrat', sans-serif;
			text-transform:uppercase;
			text-align:center;
			text-decoration:none;
			border-radius:8px;
			cursor:pointer;
			}
	
			a.primaryAction:hover{
				background:#cbf0f8;
			}

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

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

h1#logo{
	font-family: 'Montserrat', sans-serif;
	text-transform:uppercase;
	font-weight: 600;
	color: #213739;
	font-size: 1.2em;
	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:36px 32px 0 32px;
	padding:0;
	float:right;
	}
	
	nav ul{
		display:flex;	
		text-transform:uppercase;	
		}
		
		nav ul li{
			color: #447383;
			font-family: 'Montserrat', sans-serif;
			font-weight:600;
			font-size:.8em;
			margin:0 18px 0 18px;
			text-indent:-5px;
			padding-top:3px;
			
			}
		
			nav ul li a{
				color: #213739;
				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:75px 0 0 0;
 		padding-top:32px;
 		padding-bottom:64px;
		
 	}

 		section#hero img{
 			float:left;
 			margin:0;
			padding:0;
 			width:100%;
 		}

 		section#hero h2{
 			margin:50% 0 32px 32px;
			color:#20383a;
			
 		}
	
 		section#hero p{
 			font-weight:600;
			color:#20383a;
 		}
	
	
 	 section#hero aside{
 	 	width:50%;
 	 	float:left;
		margin:auto;
 	 }
	 
	 section#hero article{
		 width:50%;
		 float:right;
	 }

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

	section#overview img{
		margin:0 0 0 32px;
		width:80%;
	}

	section#overview h2{
		margin:72px 0 32px 32px;
		font-weight:medium;
	}
	
 	section#hero article{
		 width:50%;
		 float:left;
 	}
	
	section#overview aside{
		width:50%;
		margin:auto;
		float:right;
	}
	
	
	
/*------------------------
* Pull Quote Section
*-------------------------
*/
	
  	 section#pullQuote{
		 background:#ccc url('../img/pullquote-splash.png')no-repeat;
   		 background-size: 100%;			
		 padding:48px 0 48px 0;
  		 }


   		section#pullQuote div#pullQuoteHero{
   			width:100%;
  			margin:0 0 72px 0;
			padding-top:32px
   		}
		

   		section#pullQuote h2{
   			margin: 72px 18px 72px 40%;
   			padding:64px;
			width:50%;
			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 72px 0;
		}

			section#why img{
				margin:120px 0 0 32px;
				width:80%;
			}

			section#why h2{
				margin:72px 0 32px 32px;
				font-weight:medium;
			}
	
		 	section#why article{
				 width:50%;
				 float:left;
		 	}
			
			section#why h4{
				margin:24px 0 0 32px;
				padding:0;
			}
			
			section#why p{
				margin-bottom:32px;
			}
	
			section#why aside{
				width:50%;
				margin:auto;
				float:right;
			}

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

	     section#who{
	   		 background:#d3d8dc url('../img/who-splash.png')no-repeat center top;
	      	 background-size:120%;			
	   		 padding:48px 0 48px 0;
	     	 }


	      		section#who div#whoHero{
	      			width:100%;
	     			margin:0 0 72px 0;
	   				padding-top:32px
	      		}
		
				section#who article{
	      			margin: 64px 18px 64px 40%;
	      			padding:64px;
	   				background:#fff;
	   				width:50%;
					box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.2);
				}

	      		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 0 0 0;
}

	section#approach div#approachHero{
		width:100%;
		display:none;
	}
	
	section#approach h2{
		margin:0 18px 0 18px;
		padding:32px 18px 0 18px;
	}
	
	
	
	section#approach article{
		float:left;
		width:45%;
		margin:64px 0 0 36px;
	}
	
	
	section#approach h4{
		margin:32px 18px 0 32px;
	}
	
	section#approach h4 a{
		text-decoration:none;
	}
	
	section#approach h4 a:hover{
		text-decoration:underline;
	}
	
	
	section#approach div#articlesContainer{
		width:100%;
		background:#fff;
		padding:72px 0 32px 0;
		}
	
		section#approach  img{
		margin:72px 18px 0 32px;
		object-fit:scale-down;
		width:90%; 
		display:flex;	
	 }






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

	 			section#reviews img{
	 				margin:120px 0 0 32px;
	 				width:80%;
	 			}

	 			section#reviews h2{
	 				margin:72px 0 32px 32px;
	 				font-weight:500;
	 			}
	
	 		 	section#reviews article{
	 				 width:50%;
	 				 float:left;
	 		 	}
			
	 			section#reviews h4{
	 				margin:24px 0 0 32px;
	 				padding:0;
	 			}
			
	 			section#reviews p{
	 				margin-bottom:18px;
					font-weight:500;
	 			}
				
				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:75%;
	 		}

	 		section#author h2{
				font-weight:500;
	 			margin:72px 0 32px 32px;
	 		}
		
	 		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{
		float:right;
		margin:0 0 0 18px;
		width:50px;
		
	}
	footer#contact aside img a{
		opacity:1;
	}
		footer#contact aside img a:hover{
			opacity:.8;
		}