/*
••••••••••••••••••••••••

Powered by Type & Grids™
www.typeandgrids.com

••••••••••••••••••••••••
*/

/*
Responsive grid is from Skeleton by Dave Gamache
www.getskeleton.com
*/

/*===================================================================================================
Contents
=====================================================================================================
	1) Reset & basics
	2) Basic styles
	3) Typography
	4) Links
	5) Lists
	6) Images and Video
	7) Buttons
	8) Forms
	9) Misc
	10) Base 960 grid
    11) Tablet (Portrait)
    12) Mobile (Portrait)
    13) Mobile (Landscape)
    14) Clearing
	15) Portfolio slider
	16) Site styles
	17) Media queries
	18) Print styles
*/

/*===================================================================================================
1) Reset & basics
===================================================================================================*/
	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;
}
	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; }

html {
       overflow-y: scroll;
}

/*===================================================================================================
2) Basic styles
===================================================================================================*/
	body {
		background: #fff;
		font: 14px/21px Helvetica, Arial, sans-serif;
		color: #444;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
		
		-webkit-transition: background-color 0.8s ease-out;
		-moz-transition: background-color 0.8s ease-out;
		-o-transition: background-color 0.8s ease-out;
		transition: background-color 0.8s ease-out;
	}

/*===================================================================================================
3) Typography
===================================================================================================*/
	h1, h2, h3, h4, h5, h6 {
		color: #222;
		font-family: Georgia, Arial, sans-serif;
		font-weight: normal; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
	h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
	h3 { font-size: 28px; line-height: 34px; margin-bottom: 6px; }
	h4 { font-size: 21px; line-height: 30px; margin-bottom: 12px; }
	h5 { font-size: 17px; line-height: 24px; }
	h6 { font-size: 14px; line-height: 21px; }
	.subheader { color: #777; }

	p { margin: 0 0 20px 0; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	em { font-style: italic; }
	strong { font-weight: bold; color: #333; }
	small { font-size: 80%; }

	blockquote, blockquote p { font-family: Georgia, Arial, sans-serif; font-size: 14px; line-height: 1.5; font-style: italic; }
	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
	blockquote cite { font-family: Arial, sans-serif; font-style: normal; font-weight: bold; display: block; padding-top: 8px; }
	blockquote cite:before { content: "\2014"; }
	/*blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }*/

	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
	
	.aboutList li {
		margin-bottom:8px;
		}

/*===================================================================================================
4) Links
===================================================================================================*/
	a, a:visited { color: #333; text-decoration: none; outline: 0; }
	a:hover, a:focus { color: #777;  text-decoration: none;}
	p a, p a:visited { line-height: inherit; text-decoration: none; }

/*===================================================================================================
5) Lists
===================================================================================================*/
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	ul ul, ul ol,
	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 6px; }
	li { line-height: 18px; margin-bottom: 12px; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }

/*===================================================================================================
6) Images
===================================================================================================*/
	img.scale-with-grid {
		max-width: 100%;
		height: auto; 
		}
	
	/* added this for special About profile pic */	
	.profilepic { 
		float: left;
		margin-right: 18px;
		margin-bottom: 12px;
		margin-top: 5px;
		}
		
	/* added this for special About profile pic*/	
	#detailView img {
		margin-bottom: 15px;
		}
		
	/* added this for special about page circle pics*/		
	#aboutheader {
		}
	
	#aboutheader img {
		float:left;
		margin-right:20px;
		}
		
	.aboutPic4 img {
		margin-right:0px !important
		}

	.video-container {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px; height: 0; overflow: hidden;
		margin-bottom:20px;
		}
	 
	.video-container iframe,
	.video-container object,
	.video-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}

	.video-container-size2 {
		position: relative;
		padding-bottom: 75%;
		padding-top: 30px; height: 0; overflow: hidden;
		margin-bottom: 20px;
		}
	 
	.video-container-size2 iframe,
	.video-container-size2 object,
	.video-container-size2 embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}
		
	.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom:20px !important; } 
	.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }	

/*===================================================================================================
7) Buttons
===================================================================================================*/
	.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		background: #eee; /* Old browsers */
		background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
		background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
		background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
		background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
		background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
		background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
	  border: 1px solid #aaa;
	  border-top: 1px solid #ccc;
	  border-left: 1px solid #ccc;
	  padding: 4px 12px;
	  -moz-border-radius: 3px;
	  -webkit-border-radius: 3px;
	  border-radius: 3px;
	  color: #444;
	  display: inline-block;
	  font-size: 11px;
	  font-weight: bold;
	  text-decoration: none;
	  text-shadow: 0 1px rgba(255, 255, 255, .75);
	  cursor: pointer;
	  /*margin-bottom: 20px;*/
	  line-height: normal;
	  padding: 8px 10px;
	  font-family: Arial, sans-serif; }

	.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
		color: #222;
		background: #ddd; /* Old browsers */
		background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
		background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
		background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
		background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
		background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
		background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
	  border: 1px solid #888;
	  border-top: 1px solid #aaa;
	  border-left: 1px solid #aaa; }

	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
		border: 1px solid #666;
		background: #ccc; /* Old browsers */
		background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
		background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
		background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
		background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
		background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
		background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }

	.button.full-width,
	button.full-width,
	input[type="submit"].full-width,
	input[type="reset"].full-width,
	input[type="button"].full-width {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center; }

	/* Fix for odd Mozilla border & padding issues */
	button::-moz-focus-inner,
	input::-moz-focus-inner {
    border: 0;
    padding: 0;
	}

/*===================================================================================================
8) Forms
===================================================================================================*/
	form {
		margin-bottom: 20px; }
	fieldset {
		margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px Arial, sans-serif;
		color: #444;
		margin: 0;
		width: 210px;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
	select {
		padding: 0; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 60px; }
	label,
	legend {
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select {
		width: 220px; }
	input[type="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444; }

/*===================================================================================================
9) Misc
===================================================================================================*/
	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 10px !important; }
	.add-bottom { margin-bottom: 20px !important; }

	.contactme {
		text-align:center;
	
		}
	

/*===================================================================================================
10) Base 960 grid
===================================================================================================*/
    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
	
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .container .twelve.columns                  { width: 700px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 820px; }
    .container .fifteen.columns                 { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }

    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 60px;  }
    .container .offset-by-two                   { padding-left: 120px; }
    .container .offset-by-three                 { padding-left: 180px; }
    .container .offset-by-four                  { padding-left: 240px; }
    .container .offset-by-five                  { padding-left: 300px; }
    .container .offset-by-six                   { padding-left: 360px; }
    .container .offset-by-seven                 { padding-left: 420px; }
    .container .offset-by-eight                 { padding-left: 480px; }
    .container .offset-by-nine                  { padding-left: 540px; }
    .container .offset-by-ten                   { padding-left: 600px; }
    .container .offset-by-eleven                { padding-left: 660px; }
    .container .offset-by-twelve                { padding-left: 720px; }
    .container .offset-by-thirteen              { padding-left: 780px; }
    .container .offset-by-fourteen              { padding-left: 840px; }
    .container .offset-by-fifteen               { padding-left: 900px; }

/*===================================================================================================
11) Tablet (Portrait)
===================================================================================================*/
    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }

        .container .one.column,
        .container .one.columns                     { width: 28px; }
        .container .two.columns                     { width: 76px; }
        .container .three.columns                   { width: 124px; }
        .container .four.columns                    { width: 172px; }
        .container .five.columns                    { width: 220px; }
        .container .six.columns                     { width: 268px; }
        .container .seven.columns                   { width: 316px; }
        .container .eight.columns                   { width: 364px; }
        .container .nine.columns                    { width: 412px; }
        .container .ten.columns                     { width: 460px; }
        .container .eleven.columns                  { width: 508px; }
        .container .twelve.columns                  { width: 556px; }
        .container .thirteen.columns                { width: 604px; }
        .container .fourteen.columns                { width: 652px; }
        .container .fifteen.columns                 { width: 700px; }
        .container .sixteen.columns                 { width: 748px; }

        .container .one-third.column                { width: 236px; }
        .container .two-thirds.column               { width: 492px; }

        /* Offsets */
        .container .offset-by-one                   { padding-left: 48px; }
        .container .offset-by-two                   { padding-left: 96px; }
        .container .offset-by-three                 { padding-left: 144px; }
        .container .offset-by-four                  { padding-left: 192px; }
        .container .offset-by-five                  { padding-left: 240px; }
        .container .offset-by-six                   { padding-left: 288px; }
        .container .offset-by-seven                 { padding-left: 336px; }
        .container .offset-by-eight                 { padding-left: 384px; }
        .container .offset-by-nine                  { padding-left: 432px; }
        .container .offset-by-ten                   { padding-left: 480px; }
        .container .offset-by-eleven                { padding-left: 528px; }
        .container .offset-by-twelve                { padding-left: 576px; }
        .container .offset-by-thirteen              { padding-left: 624px; }
        .container .offset-by-fourteen              { padding-left: 672px; }
        .container .offset-by-fifteen               { padding-left: 720px; }
    }
	

/*===================================================================================================
12) Mobile (Portrait)
===================================================================================================*/
    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 300px; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }

    }

/*===================================================================================================
13) Mobile (Landscape)
===================================================================================================*/
    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px; }
    }

/*===================================================================================================
14) Clearing
===================================================================================================*/
    /* Self clearing goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }

/*===================================================================================================
15) Portfolio slider
===================================================================================================*/
	.portfolioSlider {	
		position:relative;
		
		/* Set width and height of slider here, in px, % or em */
		width: 600px;
		height: 300px;
		
		/* Used to prevent content "jumping" on page load - this property is removed when JavaScript is loaded and slider is instantiated */
		overflow: hidden;
	}

	/* Slides area */
	.portfolioSlider .portfolioWrapper {
		overflow:hidden;	
		position:relative;
		width:100%; 
		height:100%;
	}
	
	.portfolioSlider .portfolioSlide,
	.portfolioSlider .portfolioWrapper {
		/* Bakground behind slides  */
		
		background: #000000;
		/*
		background: -moz-linear-gradient(top, #111111 0%, #242424 100%); 	
		background: -webkit-linear-gradient(top, #111111 0%,#242424 100%); 
		background: -o-linear-gradient(top, #111111 0%,#242424 100%);
		background: -ms-linear-gradient(top, #111111 0%,#242424 100%); 	
		background: linear-gradient(top, #111111 0%,#242424 100%);
		*/
	}
	
	/* Slides holder, grabbing container */
	.portfolioSlider .portfolioSlidesContainer {
		position: relative;
		left: 0;
		top: 0 !important;
		list-style:none !important;
		margin:0 !important;
		padding:0 !important;
		border: 0 !important;
	}
	
	/* Slide item */
	.portfolioSlider .portfolioSlide {
		padding: 0 !important;
		margin: 0 !important;	
		border: 0 !important;
		list-style: none !important;
		position:relative;
		float:left;
		overflow:hidden;	
	}

	/* Arrow navigation */
	.portfolioSlider .arrow {	
		/*background:url(../img/controlsSprite.png) no-repeat 0 0;*/
		background-color: #C00;
		background-repeat: no-repeat;
		background-position: 0 0;
	
		/* Change arrow size here */
		width: 45px;
		height: 90px;
		top:50%;
		margin-top:-45px;
		cursor: pointer;
		display: block;
		position: absolute;		
		z-index:25;
	}
	
	.portfolioSlider .arrow:hover {
		
	}
	.portfolioSlider .arrow.disabled {
		
	}
	
	/* Left arrow */
	.portfolioSlider .arrow.left {
		background-position: top left;
		left: 0;	
	}
	
	/* Right arrow */
	.portfolioSlider .arrow.right {
		background-position: top right;
		right: 0;
	}
	
	/* Control navigation container (bullets or thumbs) */
	.portfolioSlider .portfolioControlNavOverflow {
		width:100%;
		overflow:hidden;
		position:absolute;
		margin-top:-20px;
		z-index:25;
	}
	/* This container is inside ".portfolioControlNavContainer"  
	   and is used for auto horizontal centering */
	.portfolioSlider .portfolioControlNavCenterer {	
		float: left;
		position: relative;
		left: -50%;
	}
	
	/* Control navigation container*/ 
	.portfolioSlider .portfolioControlNavContainer {
		float: left;
		position: relative;
		left: 50%;	
	}
	
	/* Scrollable thumbnails containers */
	.portfolioSlider .portfolioControlNavThumbsContainer {		
		left:0;
		position:relative;
	}
	
	.portfolioSlider .thumbsAndArrowsContainer {
		overflow:hidden;
		width: 100%;
		position: relative;
	}
	
	.portfolioSlider .portfolioControlNavOverflow.portfolioThumbs {	
		width: auto;
		position: relative;
		overflow: hidden;
		margin-top:4px;	
	}
	
	.portfolioSlider .portfolioControlNavOverflow a{	
		background:#0C0 none no-repeat scroll 0 0;
		width:20px;
		height:20px;	
		float:left;	
		cursor:pointer;	
		position:relative;
		display:block;
		text-indent: -9999px;	
	}
	
	/* Current control navigation item */
	.portfolioSlider .portfolioControlNavOverflow a.current {	
		background-color: #C00;	
	}
	
	/* Hover state navigation item */
	.portfolioSlider .portfolioControlNavOverflow a:hover {	
		background-color: #00C;
	}
	
	/* Thumbnails */
	.portfolioSlider .portfolioControlNavOverflow a.portfolioThumb{	
		/*background: none no-repeat 0 0;*/
		/*background-color: ;*/
		width:144px;
		height:60px;	
		/* thumbnails spacing, use margin-right only */	
		margin-right:4px;
	}
	
	.portfolioSlider .portfolioControlNavOverflow a.portfolioThumb.current {	
		background-position: -3px -3px  !important;
		border:3px solid #C00 !important;
		width:138px;
		height:54px;
	}
	
	.portfolioSlider .portfolioControlNavOverflow a.portfolioThumb:hover {	
		background-position: -3px -3px;	
		border:3px solid #00C;
		width:138px;
		height:54px;
	}
	
	.portfolioSlider .thumbsArrow {	
		width: 38px;
		height: 68px;	
		cursor: pointer;
		display: block;
		position: relative;		
		z-index: 25;
		background: #C99;
	}
	
	.portfolioSlider .thumbsArrow.left {	
		float: left;
	}
	
	.portfolioSlider .thumbsArrow.right {	
		float: right;
	}
	
	.portfolioSlider .thumbsArrow:hover  {
		
	}
	
	.portfolioSlider .thumbsArrow.disabled {
		
	}
	
	/* Captions container */
	.portfolioSlider .portfolioCaption {
		z-index:20;
		display:block;
		position:absolute;	
		left:0;
		top:0;
		/*font: normal normal normal 1em/1.5em Georgia, serif;
		color:#FFF;		*/
	}
	
	/* Caption item */
	.portfolioSlider .portfolioCaptionItem {
		position:absolute;	
		left:0;
		top:0;
		margin: 0;
		padding: 0;
	}
	
	/* Loading screen */
	.portfolioSlider .portfolioLoadingScreen {
		background:#FFF;
		width:100%;
		height:100%;
		position:absolute;
		z-index:99;	
	}
	
	/* Loading screen text ("Loading...") */
	.portfolioSlider .portfolioLoadingScreen p {		
		width:100%;
		position:absolute;	
		margin:0 auto;
		top: 45%;
		text-align:center;
	}
	
	/* Single slide image preloader */
	.portfolioSlider .portfolioPreloader {	
		position: absolute;
		width: 30px;
		height: 30px;
		left: 50%;
		top: 50%;
		margin-left: -12px;
		margin-top: -12px;	
		z-index: 0;	
		background-image: url(slider_assets/preloader.gif);
	}
	
	.portfolioSlider .grab-cursor{cursor:move;}
	.portfolioSlider .grab-cursor{cursor:url("slider_assets/grab.png") 8 8,-moz-grab;}
	.portfolioSlider .grab-cursor{*cursor:url(slider_assets/grab.cur);}
	.portfolioSlider .grab-cursor{cursor:move\0/;} /* ie8 hack */
	
	.portfolioSlider .grabbing-cursor{cursor:move;}
	.portfolioSlider .grabbing-cursor{cursor:url("slider_assets/grabbing.png") 8 8,-moz-grabbing;}
	.portfolioSlider .grabbing-cursor{*cursor:url(slider_assets/grabbing.cur);}
	
	/* Cursor used if mouse dragging is disabled */
	.portfolioSlider .auto-cursor{cursor:auto;}
	
	.portfolioSlider .portfolioHtmlContent {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.portfolioSlider .non-draggable {
		cursor: auto;
	}
	
	.portfolioSlider .fade-container .portfolioSlide{
		position: absolute;
		left: 0;
		top: 0;
		list-style-type: none;
		margin: 0;
		padding: 0;
		z-index: 10;
	}
	
	.portfolioSlider .portfolioImage {
		max-width:none;
		margin:0;
		padding: 0 !important;
		border: 0 !important;	
	}

	/* Customization */
	.projectThumbnail {
		cursor: pointer;	
	}
	
	.project img.thumbnailImage {
		max-width: 100%;
		height: auto;
		cursor: pointer;
	}
	
	.portfolioSlider {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;
		z-index: 10;
	}
	
	.portfolioSliderData {
		display: none;
		overflow: hidden;
	}
	
	.portfolioSlidesContainer {
		display: block;
	}
	
	.first-img-preloader {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 12;
		background: #000;
		/*background: rgba(0,0,0,1.0);*/
		/*filter:inherit;*/
	}
	
	.preloader-graphics {
		position: relative;
		width: 30px;
		height: 30px;
		left: 50%;
		top: 50%;
		margin-left: -12px;
		margin-top: -12px;	
		z-index: 0;	
		background-image: url(slider_assets/preloader.gif);
	}

/*===================================================================================================
16) Site styles
===================================================================================================*/
h1 { font-size: 48px; line-height: 1.2; }
h2 { font-size: 36px; line-height: 1.2; }
h3 { font-size: 24px; line-height: 1.2; }
h4 { font-size: 18px; line-height: 1.2; }
h5 { font-size: 14px; line-height: 1.2; }
h6 { font-size: 12px; line-height: 1.2; }

.currentPage, button.currentPage:hover {
	color: #bbb;
	cursor: default;
}

button.currentPage:hover {
	cursor: auto;
}

#sitePreloader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 2;
}

#preloaderImage {
	width: 30px;
	margin: 100px auto;
}

header {
	padding-top: 80px;
	border-top: 3px solid #000;
}

#logo, #logoDetailView {
	float: left;
	cursor: pointer;
}

#logo img, #logoDetailView img {
	margin-top: 0px;
	margin-bottom:8px;
	margin-left: -36px;
	float:left;
}

#logo h1, #logoDetailView h1 {
	font-family: Georgia, Arial, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 36px;
	line-height: 1.5;
	letter-spacing: -0.05em;
	text-rendering: optimizeLegibility;
}

#logo h2, #logoDetailView h2 {
	font-family: Georgia, Arial, sans-serif;
	font-weight: normal;
    font-style: italic;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.07em;
	text-rendering: optimizeLegibility;
	margin-top: -23px;
}

a, button {
	-webkit-transition: color 0.2s ease-out;
	-moz-transition: color 0.2s ease-out;
	-o-transition: color 0.2s ease-out;
	transition: color 0.2s ease-out;
}

a, a:visited {
	color: #333;
}

a:hover, a:active, a:focus, #heroNav a:hover, #heroNav a:visited:hover, #heroNav a:active, #heroNav a:focus, #formSubmit:hover, .contentModule a:hover, .contentModule a:visited:hover, .contentModule a:active, .contentModule a:focus { color: #777777; } {
	color: #888;
}

nav {
	list-style: none;
	float: right;
	padding-top: 45px;
	margin-bottom: -30px;
	padding-bottom: 20px;
}

nav ul li {
	display: inline;
	padding-left: 26px;
}

nav ul li:first-child {
	padding-left: 0px;
}

nav ul li a, nav ul li a:visited, nav ul li button, nav ul li span {
	font-family: Arial, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0;
	text-rendering: auto;
	text-decoration: none;
}

nav ul li button, .projectNav button {
	background: none;
	border: none;
	text-shadow: none;
	padding: 0;
}

nav ul li button {
	margin-bottom: 0px;
}

nav ul li button:hover, .projectNav button:hover {
	background: none;
	border: none;
}

nav ul li button:hover, nav ul li button:active, nav ul li button:focus, nav ul li a:hover, nav ul li a:active, nav ul li a:focus {
	color: #888;
	outline: 0;
}

#overview {
	padding-bottom: 10px;	
}

#overview h3 {
	font-family: Georgia, Arial, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 36px;
	line-height: 1.2;
	letter-spacing: -0.04em;
	text-rendering: auto;
	color: #333;
	margin-top: -7px;
	margin-bottom: 22px;	
}

.project {
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}

.projectThumbnail {
	max-width: 100%;
	height: 100%;
}

.projectThumbnail img {
	display: block;
}

.projectThumbnailHover {
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.8);
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 10;
}

.projectThumbnailHover h4 {
	font-family: Georgia, Arial, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.05em;
	text-rendering: auto;
	color: #fff;
	position: absolute;
	margin-top: 40px;
	display: none;
}

.projectThumbnailHover h5 {
	font-family: Arial, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0;
	text-rendering: auto;
	color: #fff;
	position: absolute;
	padding-top: 69px;
	display: none;
}

.projectInfo {
	overflow: hidden;
}

.projectInfo h4 {
	font-family: Arial, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: -0.05em;
	text-rendering: auto;
	color: #444;
	padding-top: 12px;
	padding-bottom: 8px;
	margin-bottom: 4px;
	float: left;
}

.projectNav {
	font-family: Arial, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0;
	text-rendering: auto;
	color: #444;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	height: 29px;
	margin-bottom: 9px;
	padding-top: 4px;
	margin-top: 38px;
}

.projectNavCounter {
	font-family: Arial, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 12px;
	letter-spacing: 0;
	text-rendering: auto;
	color: #444;
	font-size: 12px;
	padding-top: 11px;
	float: right;
	text-align: right;
}

.projectNavClose button, .projectNavButtons button, .projectNavEnlarge button {
	font-family: Arial, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 11px;
	line-height: 1.2;
	text-rendering: auto;
	color: #444;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	text-decoration: none;
}

.projectNav button:hover, .projectNav button:active, .projectNav button:focus {
	color: #777;
	outline: 0;
}

.projectNavInactive, button.projectNavInactive, button.projectNavInactive:hover, button.projectNavInactive:active {
	color: #ccc;
	text-decoration: none;
	cursor: auto;
}

.projectNavEnlarge {
	float: left;
	/*padding-left: 1px;*/
	padding-top: 5px;
	padding-top: 7px\9; /* IE adjustment */
	width: auto;
}

.projectNavClose {
	float: right;
	padding-top: 5px;
	padding-top: 7px\9; /* IE adjustment */
}

.projectNavButtons {
	padding-top: 5px;
	padding-top: 7px\9; /* IE adjustment */
	text-align: center;
}

/* Tweak positioning slightly in Firefox */
@-moz-document url-prefix() {
	.projectNavEnlarge, .projectNavClose, .projectNavButtons {
		padding-top: 7px;
	}
}

.projectInfo, .linedList {
	border-bottom: 3px solid #ddd;
}

.projectInfo p:nth-of-type(1) {
	margin-top: 9px;
}

.projectInfo p:nth-last-child(2) {
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
}

#about p, #about blockquote {
	margin-bottom: 24px;
}

p strong, .projectInfo strong {
	color: #444;
}

p, .projectInfo p, .projectInfo li {
	font-family: Arial, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0;
	text-rendering: auto;
}

.projectInfo ul {
	margin-top: -8px;
	margin-bottom: 7px;
}

.projectInfo p + ul {
	margin-top: -20px;
}

.projectInfo li, .linedList li {
	border-top: 1px solid #ddd;
	margin-top: 6px;
	margin-bottom: -1px;
	padding-top: 6px;
	padding-bottom: 0px;
}

.projectInfo li:first-child {
	border-top: none;
}

.projectInfo li:last-child {
	margin-bottom: -2px;
}

.linedList {
	padding-bottom: 7px;
}

#about img, #detailView img {
	max-width: 100%;
	height: auto;
}

/* added to give separation between project image rows */
#detailViewImages hr {    
	margin-bottom: 60px; 
	}

/* added to style project detail list */
.projectDetailList {
	border-left: 1px solid #D9D9D9;
	padding-left: 10px;
	}

#detailViewImages {
	/*text-align: center*/;
}

#detailViewBack {
	font-size: 12px;
	font-weight: bold;
	margin-top: -18px;
}

#detailViewBack a {
	text-decoration: none;
}

footer {
	margin-top: 0px;
	margin-bottom: 40px;
	text-align:center;
}

footer h3 {
	margin-bottom: 20px;
}


footer p {
	font-family: Arial, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0;
	text-rendering: auto;
	color: #333;	
}

.video {
	margin-bottom: 30px;
}

#faq p:first-child, #heroNav a, #heroNav a:visited, .contentModule a, .contentModule a:visited {
	color: #333333;
}

#formField {
	border: 1px solid #555555;
	margin: 0;
	width: 200px;
	height: 20px;
	display: inline;
	font-family: Arial, sans-serif;
	font-weight: normal;
    font-style: normal;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}

#formSubmit {
	display: inline;
	padding-bottom: 0;
	margin-bottom: 0;
	border: none;
	background: none;
	padding-left: 5px;
	font-family: Arial, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.09em;
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: auto;
	text-shadow: none;
	-webkit-transition: color 0.2s ease-out;
	-moz-transition: color 0.2s ease-out;
	-o-transition: color 0.2s ease-out;
	transition: color 0.2s ease-out;
}

#formField, #content #heroNav ul li, #footerLinks li, #heroNav, .contentModule {
	border-color: #dddddd;
}

#formSubmit, #formField {
	color: #444444;
}

#formField {
	background: #fff;
}

#formField:focus {
	background: #fff;
}

#content img {
	max-width: 100%;
	height: auto;
}

#hero {
	margin-top: -15px;
	margin-bottom: -1px;
}

#heroNav {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid;
	border-bottom: 1px solid;
	margin-bottom: 26px;
}

#content #heroNav ul li {
	display: inline;
	padding-left: 12px;
	margin-left: 0;
	border-right: 1px solid;
	padding-right: 15px;
}

#content #heroNav ul li:last-child {
	border-right: none;
	padding-right: 0;
	margin-right: 0;
}

#heroNav ul li:first-child {
	padding-left: 0;
	margin-left: 0;
}

#heroNav ul {
	text-align: center;
	margin-bottom: 18px;
}

#heroNav a {
	font-family: Arial, sans-serif;
	font-weight: bold;
    font-style: normal;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: underline;
	text-transform: none;
	text-rendering: auto;
}

#content ul li {
	list-style-type: disc;
	margin-left: 30px;
	margin-bottom: 10px;
}

.contentModule ul, .contentModule ol {
	padding-top: 8px;
}

#footer h3 { margin-bottom:20px;}

#footer ul { padding-bottom:40px}

#footerLinks li {
	font-weight: bold;
	font-size: 14px;
	display: inline;
	padding-left: 12px;
	margin-left: 0;
	border-right: 1px solid;
	padding-right: 15px;
}

#footerLinks li:first-child {
	padding-left: 0;
}


#footerLinks li:last-child {
	border-right: none;
}

.contentModule {
	margin-bottom: 22px;
	padding-bottom: 6px;
	border-bottom: 1px solid;
}

.contentModule p {
	margin-top: 10px;
	margin-bottom: 15px;
	line-height: 1.4;
}

.contentModule li:first-child, .contentModule p:first-child {
	margin-top: -3px;
}

.contentModule:last-child {
	border-bottom: none;
}

#faq p {
	margin-top: -5px;
}

#faq p:first-child {
	font-weight: bold;
	margin-top: 0px;
	line-height: 1.2;
}

code {
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	background: #fff;
	color: #000;
	text-shadow: none;
	padding-top: 5px;
	padding-bottom: 5px;
}

.thumbnailMask {
	/*background-image: url("../images/masks/rounded.png");*/
	/*
	Disable pointer events to allow swipe navigation - needed to use a svg instead of a div since no versions of IE support pointer events on divs
	*/
	pointer-events: none;
	width: 460px;
	height: 284px;
	position: absolute;
	z-index: 24;
	left: 301px;
	top: -222px;
}

/*===================================================================================================
17) Media queries
===================================================================================================*/
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		nav ul li a, nav ul li button, nav ul li span, #detailViewBack {
			font-size: 14px;
		}
		
		nav {
			padding-top: 45px;
		}
		
		.thumbnailMask {
			background-size: 364px 224px;
		}
		
	}

	/* Tablet portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
		.projectThumbnailHover h4 {
			font-size: 18px;
		}
		
		.projectThumbnailHover h5 {
			font-size: 11px;
			padding-top: 63px;
		}
		
		#heroNav a {
			font-size: 14px;
		}
		
		#footerLinks li {
			font-size: 13px;
		}
		
	}

	/* All mobile sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		#logo h1, #logoDetailView h1 {
			font-size: 30px;
			line-height: 1.1;
		}
		
		#logo h2, #logoDetailView h2 {
			margin-top: -12px;
		}
		
		header {
			padding-top: 40px;
		}
		
		nav {
			float: left;
			clear: both;
			width: 100%;
			border-top: 1px solid #ddd;
			padding-top: 10px;
			padding-bottom: 0px;
			margin-bottom: -10px;
		}
		
		#overview {
			padding-bottom: 0 !important;
			margin-bottom: 0 !important;
		}
		
		.project {
			margin-bottom: 30px;
		}
		
		footer p {
			font-size: 12px;
		}
		
		#content #heroNav ul li {
			display: block;
			padding-left: 0;
			margin-left: 0;
			border-right: none;
			line-height: 2.0;
		}
		
		#heroNav ul {
			text-align: left;
		}
		
		#footerLinks li {
			display: block;
			padding-left: 0;
			margin-left: 0;
			border-right: none;
			padding-bottom: 8px;
			margin-top:10px;
		}
		
		#footerLinks ul {
			text-align: left;
		}
		
		/* Add back border to last child of first column */
		.eight:nth-child(4n) .contentModule:last-child, .eight:nth-of-type(1) .contentModule:last-child {
			border-bottom: 1px solid #dddddd;
			
		}
		
		.thumbnailMask {
			background-size: 420px 259px;
		}
		
	}

	/* Mobile landscape size to tablet portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
	}

	/* Mobile portrait size to mobile landscape size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		header {
			padding-top: 40px; text-align:center;
		}
		
		#logo, #logoDetailView {
			float:none !important;
		}
		
		#logo h1, #logoDetailView h1 {
			font-size: 30px;
			
		}
		
		#logo h2, #logoDetailView h2 {
			font-size: 14px;
			margin-top: -10px;
		}
		
		#overview h3 {
			font-size: 24px;	
		}
		
		#overview {
			padding-bottom: 15px !important;
		}
		
		.projectThumbnailHover h4 {
			font-size: 14px;
		}
		
		.projectThumbnailHover h5 {
			font-size: 11px;
			padding-top: 58px;
		}
		
		.thumbnailMask {
			background-size: 300px 185px;
		}
		
		.AboutPics {
			text-align:center;
		}
		
		.AboutPics img {
			float:none !important;
			display:block !important;
			margin-left:auto !important;	
			margin-right:auto !important;
		}
		
/*		.profilepic {
		float: left;
		margin-right: 10px;
		margin-bottom: 8px;
		margin-top: 5px;
		}*/
		
		footer h3 { font-size:18px; }
		
		footer p {font-size:11px !important }
		
	}

/*===================================================================================================
18) Print
===================================================================================================*/
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}