@font-face {
    font-family: 'whitney-lightregular';
    src: url('../fonts/whitney-light/whitneylight-webfont.eot');
    src: url('../fonts/whitney-light/whitneylight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/whitney-light/whitneylight-webfont.woff') format('woff'),
         url('../fonts/whitney-light/whitneylight-webfont.ttf') format('truetype'),
         url('../fonts/whitney-light/whitneylight-webfont.svg#whitney-lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'whitney-lightregular';
		src: url('../fonts/whitney-light/whitneylight-webfont.svg') format('svg');
	}
}
@font-face {
    font-family: 'whitney-mediumregular';
    src: url('../fonts/whitney-medium/whitneymedium-webfont.eot');
    src: url('../fonts/whitney-medium/whitneymedium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/whitney-medium/whitneymedium-webfont.woff') format('woff'),
         url('../fonts/whitney-medium/whitneymedium-webfont.ttf') format('truetype'),
         url('../fonts/whitney-medium/whitneymedium-webfont.svg#whitney-lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'whitney-mediumregular';
		src: url('../fonts/whitney-medium/whitneymedium-webfont.svg#whitney-lightregular') format('svg');
	}
}


html {
	height:100%;
}


body {
	/* 	Formula...  desired px / parent px = size in ems	*/
	font-size: 100%; /* 1em, 16px */
	margin:0;
	padding:0;
	height:100%;
	-webkit-font-smoothing: antialiased;
	font-family: 'whitney-lightregular';
	color:#484E5F;
	/*opacity:0;*/
	transition: opacity 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
}

	body:before {
		content:"";
		display:block;
		background-image:url(../img/intro-background4.jpg);
		background-size:cover;
		background-position: center;
		width:100%;
		height:100%;
		position:fixed;
		z-index:1;
	}

	body.no-scroll {
		overflow:hidden;
	}


strong {
	font-family: 'whitney-mediumregular';
	font-weight:normal;
}

.dont-break {
	white-space: nowrap;
}


#site-navigation {
	position:fixed;
	top:0;
	font-size: 0.95em;
	font-weight:normal;
	display:none;
	width:100%;
	height:3.6em;
	padding:0 2.3em 0 0;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;  
	box-sizing: border-box;
	z-index:1000000;
	overflow:hidden;
	display:none;
	background:#fff;
	opacity:0.96;
	-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
	#site-navigation:before {
		content:'';
		display:block;
		width:2.368421052631579em;
		height:2.368421052631579em;
		top:50%;
		left:2em;
		position:absolute;
		margin-top:-1.184210526315789em;
		background-image:url('../img/logo.svg');
		background-repeat:no-repeat;
		background-size:2.368421052631579em;
		border-radius: 0.3em;
	}

	#site-navigation ul {
		padding: 0;
		margin: 1.3em 0 0 0;
		list-style-type: none;
		overflow:hidden;
		float:right;
	}
		#site-navigation ul li {
			padding: 0;
			margin: 0 0 0 2.3em;
			float:left;
		}
		#site-navigation ul li a {
			color:#111;
			text-decoration: none;
			text-transform: uppercase;
		}

	#site-navigation .hamburger {
		display:none;
	}



#introduction {
	color:#fff;
	background-image:url('../img/bg-filter-green5.png');
	background-color:transparent;
	width:100%;
	padding:0 2em;
	height:97%;
	font-size:3.125em; /* 50px */
	text-align:center;
	position:relative;
	overflow:hidden;
	z-index:20;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;  
	box-sizing: border-box; 
}

	#introduction .inner {
		display: -webkit-flexbox;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		height:100%;
	}

		#introduction span {
			display:block;
			width: 100%;
			max-width:18em; /* 870px */
			margin:0 auto;
			line-height:1.1em;
			text-shadow: 1px 1px 1px #000;
			position:relative;
		}
			#introduction span.fade {
				opacity:1;
			}

		#introduction nav {
			margin-top:1.2em;
			overflow:hidden;
			text-align:center;
		}
			#introduction a.button {
				color:inherit;
				border:2px solid;
				display:inline-block;
				padding:1em;
				text-decoration:none;
				text-transform: uppercase;
				font-size:0.35em;
				font-weight:bold;
				width:7.5em;
				line-height:0.55em;
				margin:0 1em;
			}

	#read-more {
		color:#fff;
		font-size:0.25em; /* 12px */
		text-decoration:none;
		text-transform: uppercase;
		display:block;
		width:30em;
		height:3.2em;
		position:absolute;
		bottom:1em;
		left:50%;
		margin-left:-15em;
		background-image:url(../img/arrow.png);
		background-repeat: no-repeat;
		background-position: 50% bottom;
		background-color:transparent;
		opacity:0.8;
	}

		#read-more.hover {
			opacity:1;
		}


#about-me {
	background-color:#FBFCFC;
	overflow:hidden;
	position: relative;
	z-index:10;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;  
	box-sizing: border-box; 
}

	#personal-statement {
		width:100%;
		max-width:65.625em !important; /* 1050px */
		margin:11em auto;
		position:relative;
		display:block;
		padding:0 2em;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;  
		box-sizing: border-box; 
	}
		#personal-statement img {
			position:absolute;
			border-radius:100%;
			border:0.95em solid transparent;
			left:0;
			top:0;
			width:100%;
			max-width:18em;
			transition: border 1s ease-in-out;
			-webkit-transition: border 1s ease-in-out;
			-moz-transition: border 1s ease-in-out;
			-ms-transition: border 1s ease-in-out;
			-o-transition: border 1s ease-in-out;
			-webkit-box-sizing: border-box; 
			-moz-box-sizing: border-box;  
			box-sizing: border-box; 
		}
			#personal-statement img.border {
				border-color:#ECEEEE;
			}

		#personal-statement .text-holder {
			padding-left:20em; /* 350px */
		}

			#personal-statement h1 {
				font-size: 2.5em; 
				font-weight:normal;
				margin:0 0 0.7em 0;
			}

			#personal-statement p {
				font-size:1.25em; 
				line-height:1.5em;
			}

	#services { 
		padding:3em 1em;
		max-width:none !important;
		text-align:center;
		background-color: #F1F3F3; 
		border-top: 1px solid #D6D6D6;
		position:relative;
		display:block;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;  
		box-sizing: border-box;
		-webkit-box-shadow:inset 0 0 6px -4px #111111;
		box-shadow:inset 0 0 6px -4px #111111;
	}

		#services ul {
			max-width:65.625em !important; /* 1050px */
			padding:0;
			margin:0 auto;
			list-style-type: none;
			overflow:hidden;
		}

			#services li {
				padding:0 1em;
				margin:0;
				float:left;
				width:25%;
				text-align: center;
				-webkit-box-sizing: border-box; 
				-moz-box-sizing: border-box;  
				box-sizing: border-box;
				line-height:1.4em;
			}

				#services h2 {
					font-size:1.2em;
					text-transform: uppercase;
				}
				#services img {
					opacity:0.8;
				}
				#services p {
					font-size: 0.9375em;
					text-align:justify;
				}



#projects {
	z-index:2;
	position:relative;
}

#projects-intro {
	color:#fff;
	background-image:url('../img/bg-filter-black3.png');
	width:100%;
	padding:2.5em 0 3.5em 0;
	font-size:3.125em; /* 50px */
	text-align:center;
	position:relative;
	overflow:hidden;
	z-index:1;
	text-shadow: 1px 1px 1px #000;
}
		/*
			Hack to create triangle at bottom of intro.
			https://stackoverflow.com/a/19214522
		*/
		#projects-intro:before {
		    content:"";
		    position: absolute;
		    left: -0.5em;
		    width: 50%;
		    height: 1em; /* 50px */
		    bottom: 0;
		    background-color: #FBFCFC;
		    -webkit-transform: skew(45deg);
		    -moz-transform: skew(45deg);
		    -o-transform: skew(45deg);
		    -ms-transform: skew(45deg);
		    transform: skew(45deg);
		}
		#projects-intro:after {
		    content:"";
		    position: absolute;
		    right: -0.5em;
		    width: 50%;
		    height: 1em; /* 50px */
		    bottom: 0;
		    background-color: #FBFCFC;
		    -webkit-transform: skew(-45deg);
		    -moz-transform: skew(-45deg);
		    -o-transform: skew(-45deg);
		    -ms-transform: skew(-45deg);
		    transform: skew(-45deg);
		}

	#projects-intro h2 {
		font-weight:normal;
		font-size:1.25em;
		line-height:1em;
		margin:0;
	}

	#projects-intro q {
		font-size:0.33em;
		font-family:serif;
		font-style: italic;
		position:relative;
	}
		#projects-intro a {
			color:inherit;
			text-decoration: none
		}
		#projects-intro-quote  {
			position:absolute;
			top:3.2em;
			left:0;
			text-align:center;
			width:100%;
			font-family: 'whitney-mediumregular';
			font-size: 0.6em;
			font-style: normal;
		}
			#projects-intro-quote span {
				display:inline-block;
				background-color:rgba(255,255,255,0.7);
				color:#484E5F;
				text-shadow: none;
				padding:0.5em 0.8em 0.4em 0.8em;
				border-radius: 0.3em;
				position:relative;
			}
				#projects-intro-quote span:before{
				    border: solid;
				    border-color: rgba(255,255,255,0.7) transparent;
				    border-width: 0px 8px 8px 8px;
				    top: -8px;
				    content: "";
				    left: 50%;
				    margin-left:-8px;
				    position: absolute;
				    z-index: 99;
				}

#projects article {
	background-color: #FBFCFC;
	padding:4.2em 2em;
	width:100%;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;        
	position: relative;
	z-index:1;
	overflow:hidden;
}
	#projects article:first-of-type {
		padding-top:6.5em;
	}
	#projects article:last-of-type {
		padding-bottom:9.5em;
	}

	#projects .article-inner {
		margin:0 auto;
		overflow:hidden;
		max-width:65.625em; 
		position:relative;
		z-index:10;
		background-color:#FBFCFC;
	}

		#projects article img {
			width:57%;
		}

		#projects article .text-holder {
			width:35%;
		}

		#projects article.left img,
		#projects article.right .text-holder {
			float:left;			
		}

		#projects article.right img ,
		#projects article.left .text-holder {
			float:right;			
		}

			#projects article h2 {
				font-size: 2.35em; 
				font-weight:normal;	
				margin-top:0;
			}

			#projects article p {
				font-size:1.1em;
			}

			.button {
				font-family: 'whitney-mediumregular';
				display:inline-block;
				color:#fff;
				margin-top:1.1em;
				padding:0.6em 0.85em;
				text-decoration:none;
				font-size:1.05em;
				line-height:1.15em;
				text-align: center;
				border-radius: 0.2em;
				transition: background 0.2s ease-in-out;
				-webkit-transition: background 0.2s ease-in-out;
				-moz-transition: background 0.2s ease-in-out;
				-ms-transition: background 0.2s ease-in-out;
				-o-transition: background 0.2s ease-in-out;
				position:relative;
			}


		#my-college-v2 h2,
		.more-details-outer.my-college-v2 h3,
		.more-details-outer.my-college-v2 h4,
		.more-details-outer.my-college-v2 p a,
		#my-cpd h2,
		.more-details-outer.my-cpd h3,
		.more-details-outer.my-cpd h4,
		.more-details-outer.my-cpd p a {
			color:#AF3D82;
		}
		
		#my-college-v2 .button,
		.more-details-outer.my-college-v2 .navbar .button,
		#my-cpd .button,
		.more-details-outer.my-cpd .navbar .button {
			background-color:#AF3D82;
			box-shadow: 0px 3px 0px 0px #75184F;
		}
			#my-college-v2 .button:hover,
			.more-details-outer.my-college-v2 .navbar .button:hover,
			#my-cpd .button:hover,
			.more-details-outer.my-cpd .navbar .button:hover {
				background-color: #9E3271;
			}
				.more-details-outer.my-college-v2 .navbar .button.back:before,
				.more-details-outer.my-cpd .navbar .button.back:before {
					background-color:#75184F;
				}


		#quick-mark h2,
		.more-details-outer.quick-mark h3,
		.more-details-outer.quick-mark h4,
		.more-details-outer.quick-mark p a {
			color:#1C9D81;
		}
		

		#quick-mark .button,
		.more-details-outer.quick-mark .navbar .button {
			background-color:#2D9583;
			box-shadow: 0px 3px 0px 0px #176255 !important;
		}
			#quick-mark .button:hover,
			.more-details-outer.quick-mark .navbar .button:hover {
				background-color: #178672;
			}
				.more-details-outer.quick-mark .navbar .button.back:before {
					background-color:#176255;
				}


		#my-college h2,
		.more-details-outer.my-college h3,
		.more-details-outer.my-college h4,
		.more-details-outer.my-college p a {
			color:#138DE9;
		} 
		#my-college .button,
		.more-details-outer.my-college .navbar .button {
			background-color:#0082E7;
			box-shadow: 0px 3px 0px 0px #055898;
		}
			#my-college .button:hover,
			.more-details-outer.my-college .navbar .button:hover {
				background-color: #0073CC;
			}
				.more-details-outer.my-college .navbar .button.back:before {
					background-color:#055898;
				}




		/* More Details sections */

		.more-details-outer {
			position:fixed;
			top:0;
			bottom:0;
			left:0;
			right:0;
			z-index:1000000000;
			overflow:auto;
			background-color:#FBFCFC;
		}

			.more-details-container {
				display:none;
				position:absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				overflow:auto;
				-webkit-box-sizing: border-box; 
				-moz-box-sizing: border-box;    
				box-sizing: border-box; 
				padding:4em 1.15em 0 1.15em;
			}

				.more-details-container h3 {
					font-size:2.5em;
					margin-top:0;
					margin-bottom:0.45em;
				}
				.more-details-container h4 {
					font-size:1.8em;
					margin-top:0;
					margin-bottom:0.7em;
				}
				.more-details-container h4.sub {
					font-size:1.4em;
					margin-top:1.5em;
					margin-bottom:0.7em;
				}

				.more-details-container p a {
					text-decoration: none;
				}
					.more-details-container p a:after {
						display:inline-block;
						content:'\279A';
						width:13px;
						height:13px;
						margin-left:4px;
						font-size:1em;
						position:relative;
						top:-3px;
						opacity:0.6;
					}
				.more-details-container p a:hover {
					border-bottom: 1px dashed;
				}

				.more-details-container .tags {
					list-style-type:none;
					margin:0 0 2em 0;
					padding:0;
					overflow:hidden;
				}
					.more-details-container .tags li {
						margin:0 0.8em 0.8em 0;
						padding:0.7em 1.1em 0.7em 0.9em;
						float:left;
						font-family: 'whitney-mediumregular';
						font-size:0.65em;
						color:#7A7F8E;
						background-color:#EEEFF0;
						text-transform: uppercase;
						border-radius: 0.4em;
					}
					.more-details-container .tags li:before{
					content:'\2714';
					margin-right:0.5em;
					color:#9396A0;
					/*float:left;*/
				}

				.more-details-container .gallery {
					list-style-type:none;
					/*margin:0 0 4em 0;*/
					padding:0;
				}
					.more-details-container .gallery li {
						margin-bottom:1em;
					}
					.more-details-container .gallery li a {
						padding:1em;
						background-color:#EEEFF0;
						-webkit-box-sizing: border-box; 
						-moz-box-sizing: border-box;  
						box-sizing: border-box;
						border:1px solid #E9EAEB; 
						border-radius: 0.3em;
						overflow:hidden;
						display:block;
						font-family: 'whitney-mediumregular';
						font-size:0.8em;
						color:#7A7F8E;
						color:inherit;
						text-decoration: none;
						text-align:center;
						transition: background 0.2s ease-in-out;
						-webkit-transition: background 0.2s ease-in-out;
						-moz-transition: background 0.2s ease-in-out;
						-ms-transition: background 0.2s ease-in-out;
						-o-transition: background 0.2s ease-in-out;
					}
						.more-details-container .gallery li a:hover {
							background-color:#E9EAEB;
						}
						.more-details-container .gallery li img {
							margin-bottom:0.7em;
							border-radius: 0.3em;
						}

					.more-details-container li b {
						font-family: 'whitney-mediumregular';
						font-weight:normal;
					}

				.more-details-container img {
					width:100%;
				}

				.more-details-container p {
					font-size:1.1em;
				}

				.more-details-container img.intro-image {
					width:45%;
					float:right;
				}

				.more-details-container .detail li {
					margin-bottom:0.5em;
				}

			.more-details-outer .navbar {
				position:fixed;
				top:0;
				left:0;
				right:0;
				font-size: 0.95em;
				font-weight:normal;
				display:block;
				padding:0.9em 2.3em 0.9em 0;
				-webkit-box-sizing: border-box; 
				-moz-box-sizing: border-box;  
				box-sizing: border-box; 
				overflow:hidden;
				background:#fff;
				background-size: 3px;
				opacity:0.96;
				border-bottom:1px solid #aaa;
			}

			.more-details-outer .navbar .button {
				
				margin: 0 0 0 2.3em;
			}
				.more-details-outer .navbar .button:hover {
					
				}

				.more-details-outer .navbar .button.back {
					padding-left:2.6em;
				}
					.more-details-outer .navbar .button.back:before {
						content:"";
						display:block;
						position:absolute;
						left:0;
						top:0;
						bottom:0;
						width:2em;
						background-image:url(../img/button-back-arrow.png);
						background-repeat:no-repeat;
						background-position:50%;
						border-radius: 0.2em 0 0 0.2em;
					}

			/* BASIC GRID */
			.row {
				overflow:hidden !important;
				margin:0 auto 4em auto;
				width:100%;
				max-width:78.125em !important; /* 1250px */
			}
			.row.lessmargin {
				margin:0 auto 2.5em auto;
			}
				.col {
					float: left;
					-webkit-box-sizing: border-box; 
					-moz-box-sizing: border-box;    
					box-sizing: border-box; 
					padding:0 1.15em;
					margin:0;
				}
				.grid1.col {
					float:none !important;
					margin:0 auto 1em auto;
				}
				.grid2 .col,
				.grid2.col {
					width: 50%;
				}
				.grid4 .col,
				.grid4.col {
					width: 25%;
				}
				.grid5 .col,
				.grid5.col {
					width: 20%;
				}




footer {
	background-color:#2D2E2E;
	background-size:cover;
	color:#FFFFFF;
	padding:5.5em 0 0 0;
	width:100%;
	position: relative;
	z-index:1;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;  
	box-sizing: border-box;   
}

	footer h2 {
		font-size: 3.5em; 
		font-weight:normal;
		margin:0 0 0.4em 0;
		text-align:center;
		padding-left:0.8em;
		padding-right:0.8em;
	}

		footer h2 span {
			color:#6CD2BF;
		}

	footer p {
		text-align:center;
		font-size:1.2em;
		margin-bottom:2.4em;
	}

	#contact {
		width:90%;
		max-width:43.75em; /* 700px */
		margin:0 auto;
		overflow:hidden;
		background-color:#1E1E1E;
		position:relative;
	}

		#contact .LI-profile-badge {
			background-color:#fff;
			position:absolute;
			top:0;
			left:0;
			right:50%;
			bottom:0;
			padding:0;
			-webkit-box-sizing: border-box; 
			-moz-box-sizing: border-box;    
			box-sizing: border-box;   
		}

		#contact  .LI-badge-container.horizontal.light {
			box-shadow:none !important;
			width:100%;
		}

		#contact-details {
			color:#fff;
			padding:3.5em 2.7em;
			margin:0;
			list-style-type: none;
			float:right;
			width:50%;
			-webkit-box-sizing: border-box; 
			-moz-box-sizing: border-box;    
			box-sizing: border-box;        
			overflow:hidden;
			font-style: normal;
		}
			#contact-details li {
				margin:0.05em 0;
				padding:0;
				display:block;
				line-height:1em;
				font-size:1.05em;
			}
				#contact-details li a {
					color:#FFFFFF;
					display:block;
					text-decoration: none;
					padding:0.35em 0 0.35em 0.5em;
					overflow:hidden;
					border-radius: 0.2em;
					transition: background 0.1s ease-in-out;
					-webkit-transition: background 0.1s ease-in-out;
					-moz-transition: background 0.1s ease-in-out;
					-ms-transition: background 0.1s ease-in-out;
					-o-transition: background 0.1s ease-in-out;
				}
				#contact-details li a:hover {
					background-color:#2B2B2B;
				}

					#contact-details li a:before {
						content:"";
						display:inline-block;
						width:1.75em;
						height:1.75em;
						margin-right:0.85em;
						vertical-align: middle;
						background-position:50%;
						background-repeat: no-repeat;
					}

						#contact-details li.email a:before {
							background-color:#32AC97;
							background-image:url(../img/email-contact-icon.png);
						} 
						#contact-details li.facebook a:before {
							background-color:#537ABC;
							background-image:url(../img/facebook-contact-icon.png);
						} 
						#contact-details li.twitter a:before {
							background-color:#5D8FAE;
							background-image:url(../img/twitter-contact-icon.png);
						} 
						#contact-details li.linkedin a:before {
							background-color:#1284C7;
							background-image:url(../img/linkedin-contact-icon.png);
						} 

	#copyright {
		width:100%;
		text-align:center;
		font-size:0.75em;
		padding:0.9em 0 0.8em 0; 
		margin-top:8.5em;
		background-color:#1E1E1E;
		clear:both;
	}
		#copyright a {
			display:inline-block;
			color:inherit;
			text-decoration: none;
			transition: background 0.1s ease-in-out;
			-webkit-transition: background 0.1s ease-in-out;
			-moz-transition: background 0.1s ease-in-out;
			-ms-transition: background 0.1s ease-in-out;
			-o-transition: background 0.1s ease-in-out;
			padding:0.3em 0.4em 0.3em 0.3em;
			border-radius: 0.3em
		}

		#copyright a:hover {
			background-color:#2B2B2B;
		}

	







/*	-------------------------------------
	 Finally Some Responsive Breakpoints
	-------------------------------------  */

	@media only screen and (max-width: 1080px) {

		#about-me,
		#projects,
		footer {
			font-size:90%;
		}

		#copyright {
			font-size:0.8em;
		}

		#projects article img {
			width:50%;
		}

		#projects article .text-holder {
			width:45%;
		}
		#personal-statement .text-holder {
			padding-left:20em; /* 350px */
		}

	}




	@media only screen and (max-width: 950px) {

		#personal-statement img {
			left:2em;
		}

		#personal-statement .text-holder {
			padding-left:19.5em; /* 350px */
		}

		.grid1.col {
			float:none !important;
			margin:0 auto 1em auto;
		}
		.grid2 .col,
		.grid2.col {
			width: 50%;
		}
		.grid4 .col,
		.grid4.col {
			width: 33%;
		}
		.grid5 .col,
		.grid5.col {
			width: 50%;
		}

		.more-details-container img.intro-image {
			display:none;
		}

		.more-details-container .intro-text {
			float:none;
			width:100%;
		}

	}





	@media only screen and (max-width: 900px) {

		#introduction {
			font-size:2.5em; /* 50px */
		}

		#personal-statement h1 {
		    font-size: 2.2em;
		}

		#projects-intro h2 {
		    font-size: 1em;
		}

		#projects article h2 {
		    font-size: 2em;
		}

		footer h2 {
		    font-size: 3em;
		}
		#read-more {
			display: none
		}

	}





	/* This is where things need to be positioned above/below rather than side/side... */

	@media only screen and (max-width: 850px) {


		#projects article img,
		#projects article .text-holder  {
			float:none !important;
			margin: 0px auto;
			display: block;
			width:100%;
			clear:both;
		}

		#projects article img {
			max-width:40em;
			margin-bottom:3.5em !important;
		}

		#projects article .text-holder {
			max-width:40em;
			margin-bottom:2em;
		}

		#services li {
			padding:0 2em;
			margin:1em 0;
			width:50%;
		}

	}





	@media only screen and (max-width: 800px) {

		#personal-statement {
			margin:8em 0;
		}

		#personal-statement img {
			position:relative;
			top:0;
			left:0;
			max-width:20em;
			display:block;
			margin:0 auto 5em auto;
		}

		#personal-statement .text-holder {
			padding: 0 1em;
		}




	}




	@media only screen and (max-width: 675px) {

		/* RESPONSIVE MENU */

		#site-navigation {
			display:block;
			overflow:visible;
		}
			#site-navigation:before {
				left:1.3em;
			}

		#site-navigation .hamburger {
			width:1.8em;
			height:1.8em;
			display:block;
			position:absolute;
			right:1.3em;
			top:50%;
			margin-top:-0.9em;
			background:url(../img/hamburger.png);
			opacity:0.6;
			cursor:pointer;
		}

			#site-navigation ul {
				display:none;
				position:absolute;	
				right:1.5em;
				top:2.3em;
				left:1.5em;
				overflow:hidden;
				padding:0;
				background:#fff;
				-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
				-webkit-border-bottom-right-radius: 0.5em;
				-webkit-border-bottom-left-radius: 0.5em;
				-moz-border-radius-bottomright: 0.5em;
				-moz-border-radius-bottomleft: 0.5em;
				border-bottom-right-radius: 0.5em;
				border-bottom-left-radius: 0.5em;
			}

			#site-navigation ul li {
				float:none;
				margin:0;
				padding:0;
				border-top:1px solid #ededed;
			}
			#site-navigation ul li a {
				padding:1.2em 0 1.2em 2em;
				width:100%;
				-webkit-box-sizing: border-box; 
				-moz-box-sizing: border-box;  
				box-sizing: border-box; 
				display: block;
			}


		footer {
			overflow:hidden;
			text-align: center;
		}

		#contact {
			width:auto !important;
			margin:0 auto;
			display:inline-block;
			text-align: left
		}
		#contact-details {
			float:none;
			width:100%;
		}
		#google-map,
		#contact .LI-profile-badge {
			display:none;
		}

		#introduction {
			font-size:2em; /* 50px */
		}

		#personal-statement h1 {
		    font-size: 2em;
		}

		#projects-intro h2 {
		    font-size: 0.8em;
		}

		footer h2 {
		    font-size: 2.8em;
		}

		/* BASIC GRID */
		.grid1.col {
			float:none !important;
			margin:0 auto 1em auto;
		}
		.grid2 .col,
		.grid2.col {
			width: 100%;
		}
		.grid4 .col,
		.grid4.col {
			width: 50%;
		}
		.grid5 .col,
		.grid5.col {
			width: 50%;
		}

		#introduction {
			padding: 0px 1em;
		}

		#personal-statement {
			padding: 0px 1em;
		}

		#services li {
		    padding: 0px 1em;
		}

	}





	@media only screen and (max-width: 600px) {

		#services li {
			width:100%;
		}

	}





	@media only screen and (max-width: 350px) {

		#introduction {
			height:70%;
		}

		#projects-intro {
			padding:2em 0 3em 0;
		}

		#copyright {
			margin-top:4em;
		}

	}