/* ********************************************************************************** *
   ****************************        CSS RESET        *****************************
   ********************************************************************************** */
 /*  
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* ********************************************************************************** *
   *******************************        FONTS        ******************************
   ********************************************************************************** */
   
@font-face {
	font-family: 'ChaparralPro';
	src: url('../fonts/chaparralpro-regular.eot'); /* IE9 compatible */
	src: url('../fonts/chaparralpro-regular.eot?#iefix') format('embedded-opentype'), /* IE6 - IE8 */
		 url('../fonts/chaparralpro-regular.woff2') format('woff2'), /* Modern browsers */
		 url('../fonts/chaparralpro-regular.woff') format('woff'), /* Reasonbaly modern browsers */
		 url('../fonts/chaparralpro-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/chaparralpro-regular.svg#svgFontName') format('svg'); /* Legacy iOS */
	
}

/* ********************************************************************************** *
   *******************************       SITE-WIDE     ******************************
   ********************************************************************************** */
   
a { 
	color: inherit; 
	display: block;
} 

a:link, a:visited {
	text-decoration: none;
}
   
h1 {
	font-family: 'Didact Gothic', sans-serif;
	color: #1E6D74;
	font-size: 48px; font-size: 3.0rem; /* 48/16 px */
	text-align: center;
	position: relative;
	top: -10px; top: -.625rem; /* 10/16 px */
}	

h2 {
	font-family: 'Didact Gothic', sans-serif;
	color: #5EC4CD;
	font-size: 24px; font-size: 1.5rem; /* 24/16 px */
	line-height: 60px; line-height: 3.8125rem; /* 60/16 px */
	text-align: center;
}

h3 {
	font-family: 'Didact Gothic', sans-serif;
	color: inherit;
	font-size: 24px; font-size: 1.5rem; /* 24/16 px */
	line-height: 60px; line-height: 3.8125rem; /* 60/16 px */
	text-align: center;
}

p {
	font-family: 'ChaparralPro', sans-serif;
	font-size: 16px; font-size: 1rem; /* 16/16 px */
	line-height: 20px; line-height: 1.25rem; /* 20/16 px */
	padding: 16px; padding: 1rem; /* 16/16 px */
	text-align: left;
}

.inlineAnchor {
	display: inline;
	color: blue;
}

strong {
	font-weight: bold;
	font-size: 18px; font-size: 1.125rem; /* 20/16 px */
}

/* ********************************************************************************** *
   *******************************       HEADER        ******************************
   ********************************************************************************** */
   
.header {
	background-color: 	#5EC4CD;
	text-align: center;
	position: relative;
}

#logoWrapper {
	margin-left: auto;
	margin-right: auto;
}

.navMenu {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	height: 220px; height: 13.75rem; /* 220/16 px */
}

.navItem {
	height: 50px; height: 3.125rem; /* 50/16 px */
	line-height: 50px; line-height: 3.125rem; /* 50/16 px */
	background-color: #015C65;
	color: #77cdd5;
	margin: 3px;
	font-family: 'Didact Gothic', sans-serif;
	font-size: 32px; font-size: 2rem; /* 32/16 px */ 
	text-align: center;
}

.navItem:hover {
	color: #d8f1f3;
}

.social {
	padding-top: 5%;
	padding-bottom: 5%;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.icon {
	width: 100%;
}

.anchor {
	display: inline-block;
	width: 15%;
}
	
/* ********************************************************************************** *
   *******************************       HOME PAGE     ******************************
   ********************************************************************************** */
   
 .subHeading {
	background-color: #5EC4CD;
	color: #1E6D74;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
 }
 
 .subHeadingWelcome {
	background-color: #FF7800;
	color: #ffc7b3;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
 }
 
 .contentItem {
	text-align: center;
 }
 
 .contentInnerItem {
	text-align: center;
 }
 
 .contentWrapper { 
	max-width: 1325px;
	margin-left: auto;
	margin-right: auto;
}

.circleWrapper {
	padding-top: 5%;
	padding-bottom: 5%;
}

.circleDisplay {
	vertical-align: middle;
}

#circle1 { width:  64px; }
#circle2 { width:  50px; }
#circle3 { width:  40px; }
#circle4 { width:  25px; }
 
/* ********************************************************************************** *
   *******************************   SHOWCASE PAGE     ******************************
   ********************************************************************************** */
 
 .galleria { 
	width:290px;
	height: 200px; 
	background: #000; 
	margin-left: auto;
	margin-right: auto;
}

/* ********************************************************************************** *
   *******************************      ABOUT PAGE     ******************************
   ********************************************************************************** */
   
.skillList {
	
	list-style-type: disc;
	padding-left: 10%;
}

.skillList li {
	text-align: left;	
	display: list-item;
	font-family: 'ChaparralPro', sans-serif;
	font-size: 16px; font-size: 1rem; /* 16/16 px */
	line-height: 20px; line-height: 1.25rem; /* 20/16 px */
}

.experienceList li {
	margin-bottom: 15px;
}	

/* ********************************************************************************** *
   *******************************    CONTACT PAGE     ******************************
   ********************************************************************************** */

.contactDetailWrapper {
	
	padding-top: 5%;
	padding-bottom: 5%;
	padding-left: 5%;
	width: 100%;
}

.spanWrapper {
	padding: 10px; padding: .625rem; /* 10/16 px */
}

.contactDetailHeading {
	font-family: 'Didact Gothic', sans-serif;
	color: #01454C;
	font-size: 24px; font-size: 1.5rem; /* 24/16 px */ 
	padding-left: 10px; padding: .625rem; /* 10/16 px */
	cursor: pointer;
}

.contactDetail {
	font-family: 'Didact Gothic', sans-serif;
	color: #028E9B;
	font-size: 16px; font-size: 1rem; /* 16/16 px */ 
	padding-left: 10px; padding: .625rem; /* 10/16 px */
	display: none;
}

.contactDetailArrow {
	font-family: 'Didact Gothic', sans-serif;
	color: #01454C;
	font-size: 16px; font-size: 1rem; /* 16/16 px */ 
	display: inline-block;
	position: relative;
	top: -2px;
	cursor: pointer;
}

.contactDetailArrowHidden {
	font-family: 'Didact Gothic', sans-serif;
	color: white;
	font-size: 16px; font-size: 1rem; /* 16/16 px */ 
	display: inline-block;
	position: relative;
	top: -2px;
	display: none;
}
   
   
#formBorder {
	background-color: #028E9B;
	border: 1px solid #1E6D74;
	padding: 20px;
}
	
#formHeading {
	font-family: 'Didact Gothic', sans-serif;
	background-color: #5EC4CD;
	color: #14494E;
	border: 1px solid #14494E;
	font-size: 130%;
	padding: 10px;
	margin-left: 20px;
	
}
	
.formPlaceHolder {
	padding: 5px;
}
	
.formLabel {
	display: inline-block;
	width: 120px;
	text-align: left;
	font-family: 'ChaparralPro', sans-serif;
	font-size: 16px; font-size: 1rem; /* 16/16 px */
	line-height: 20px; line-height: 1.25rem; /* 20/16 px */
	font-weight: bold;
	vertical-align: top;
	color: #02343A;
}
	
.formInput {
	text-align: left;
	min-width: 200px;
	border: 1px solid #434343;
	padding: 5px;
}
	
.formInput:hover {
	/* Glowing effect */
	/* Reference: http://css-tricks.com/snippets/css/glowing-blue-input-highlights/ */
	box-shadow: 0 0 10px rgba(20,73,78, 1);
    -webkit-box-shadow: 0 0 10px rgba(20,73,78, 1); 
    -moz-box-shadow: 0 0 10px rgba(20,73,78, 1);
    border:1px solid rgba(20,73,78, 1); 
}
	
.formInput:focus {
	/* Glowing effect */
	/* Reference: http://css-tricks.com/snippets/css/glowing-blue-input-highlights/ */
	outline: none;
	box-shadow: 0 0 10px rgba(20,73,78, 1);
    -webkit-box-shadow: 0 0 10px rgba(20,73,78, 1); 
    -moz-box-shadow: 0 0 10px rgba(20,73,78, 1);
    border:1px solid rgba(20,73,78, 1); 
	}
	
#textArea {
		border: 1px solid #434343;
		padding: 5px;
		resize: vertical;
		text-align: left;
		min-width: 200px;
}
	
.textAreaLabel {
	
}
		
#textArea:hover {
	/* Glowing effect */
	/* Reference: http://css-tricks.com/snippets/css/glowing-blue-input-highlights/ */
	box-shadow: 0 0 10px rgba(20,73,78, 1);
    -webkit-box-shadow: 0 0 10px rgba(20,73,78, 1); 
    -moz-box-shadow: 0 0 10px rgba(20,73,78, 1);
    border:1px solid rgba(20,73,78, 1); 
}
	
#textArea:focus {
	/* Glowing effect */
	/* Reference: http://css-tricks.com/snippets/css/glowing-blue-input-highlights/ */
	outline: none;
	box-shadow: 0 0 10px rgba(20,73,78, 1);
    -webkit-box-shadow: 0 0 10px rgba(20,73,78, 1); 
    -moz-box-shadow: 0 0 10px rgba(20,73,78, 1);
    border:1px solid rgba(20,73,78, 1); 
}
	

	
#form {
	z-index: 0;
	position: relative;
	width: 400px;
	padding-bottom: 50px;
	display: none;
	margin-left: auto;
	margin-right: auto;
}

#formContainer {
	vertical-align: top;
	margin-right: 50px;
}
	
#buttonHolder {
	float: right;
	padding: 5px;
}
	
.button {
	font-family: 'ChaparralPro', sans-serif;
	font-size: 16px; font-size: 1rem; /* 16/16 px */
	line-height: 20px; line-height: 1.25rem; /* 20/16 px */
	padding: 5px;
	background-color: #5EC4CD;
	color: #14494E;
	border: 1px solid #14494E;
}
	
.button:hover {
	/* Glowing effect */
	/* Reference: http://css-tricks.com/snippets/css/glowing-blue-input-highlights/ */
	cursor: pointer;
	box-shadow: 0 0 10px rgba(20,73,78, 1);
    -webkit-box-shadow: 0 0 10px rgba(20,73,78, 1); 
    -moz-box-shadow: 0 0 10px rgba(20,73,78, 1);
    border:1px solid rgba(20,73,78, 1); 
}
	
.button:focus {
	outline:0;
}

 
 /* ********************************************************************************** *
    *******************************       FOOTER        ******************************
    ********************************************************************************** */
	
.footer {
	background-color: #015C65;
	color: #028E9B;
	font-weight: bold;
	font-family: 'ChaparralPro', sans-serif;
	font-size: 16px; font-size: 1rem; /* 16/16 px */
	line-height: 30px; line-height: 1.875rem; /* 30/16 px */
	padding: 10px; padding: 0.625rem; /* 10/16 px */
	margin-top: 20px; margin-top: 1.25rem; /* 20/16 px */
}

/* ********************************************************************************** *
   *******************************       SITEMAP       ******************************
   ********************************************************************************** */
   
#sitemapHolder {
	padding-left: 15%;
	cursor: pointer;
}
   
.inline {
	display: inline-block;
}

.sitemapImg {
	width: 80%;
	vertical-align: middle;
}

#map1 {
	vertical-align: middle;
}

#subPage {
	padding-left: 5%;
	display: none;
}

/* ********************************************************************************** *
   *******************************    MEDIA QUERIES    ******************************
   ********************************************************************************** */
   
@media screen and (min-width: 480px) {
	.contactDetailWrapper { width: 400px; margin-left: auto; margin-right: auto; padding-left: 0px;}
	.galleria { width:470px; height: 324px; }
	.social { width: 50% }
	#circle1 { width:  96px; }
	#circle2 { width:  75px; }
	#circle3 { width:  60px; }
	#circle4 { width:  38px; }
	#form { display: block !important; }
	.contactDetailHeading { font-size: 32px; font-size: 2rem; /* 32/16 px */ }
	.contactDetail { font-size: 20px; font-size: 1.25rem; /* 32/16 px */ }
	.contactDetailArrow { font-size: 20px; font-size: 1.25rem; /* 32/16 px */ }	
	.contactDetailArrowHidden {	font-size: 20px; font-size: 1.25rem; /* 32/16 px */ } 
}

@media screen and (min-width: 600px) {
	.galleria { width:590px; height: 406px; }
	.social { width: 40% }
}
   
@media screen and (min-width: 768px) {
	.contentItem { width: 50%; float: left; clear: none;}
	.contentItemTop { width: 100%; float: none; clear: both; }
	.footer { clear: both; }
	h2 { padding-top: 20px; padding-top: 1.25rem; /* 20/16 px */ }
	#logoWrapper { width: 600px;  width: 37.5rem; /* 500/16 px */ position: absolute; top: 50%; left: 50%; -ms-transform: translateY(-50%) translateX(-50%); 
																										   -webkit-transform: translateY(-50%) translateX(-50%);
																										   -moz-transform: translateY(-50%) translateX(-50%); 
																										   -o-transform: translateY(-50%) translateX(-50%); 
																										   transform: translateY(-50%) translateX(-50%); }
	h1 { font-size: 60px; font-size: 3.75rem; /* 60/16 px */ }
	header { height: 200px; height: 12.5rem; /* 200/16 px */ }
	.social { width: 20%; position: absolute; right: 0px; top: 20px; top:  1.25rem; /* 20/16 px */ padding-top: 0%; padding-left: 0%; padding-bottom: 0%; }
	.icon {	width: 100%; }
	.navItem { width: calc(25% - 6px); float: left; } /* There appears to be a bug in the css3 W3C validator relating to this calc amount. It is confirmed to be working */
	.contentWrapper { width: 90%; }
	.navMenu { width: 90%; height: 70px; }
	.galleria { width:658px; height: 453px; }
	.circleWrapper { padding-top: 20%; }
	.footerArticle { padding-left: 15%; }
	.subHeadingContact { width: 50%; }
}

@media screen and (min-width: 1024px) {
	.homeImage { padding-bottom: 10px; padding-bottom: 0.625rem; /* 20/10 px */ }
	.contentWrapper { width: 80%; }
	.navMenu { width: 80%; }
	.galleria { width:758px; height: 522px; }
	#circle1 { width:  128px; }
	#circle2 { width:  100px; }
	#circle3 { width:  80px; }
	#circle4 { width:  50px; }
	
}

@media screen and (min-width: 1200px) {
	.contentItem { width: 50%; float: left; clear: none;}
	.contentItemTop { width: 100%; float: none; clear: both; }
	.contentItemRight { /*padding-top: 75px; padding-top: 4.675rem;*/  /* 75/16 */ } 
	.footer { clear: both; }
	.contentWrapper { width: 70%; }
	.navMenu { width: 70%; }
	.galleria { width:850px; height: 586px; }
}