/*//////////////////////////////////////////////////
////                                            ////
////	Who: 	James Bruckner                  ////
////	What: 	Portfolio website CSS	        ////
////	When: 	May 15, 2013 - Now              ////
////                                            ////
//////////////////////////////////////////////////*/

/* 	
	Recurring colors:
	Active - #6ae0ff
	Apps - #efb46c;
	Games - #a5bf6e
	Websites - #b492cc
*/

/* Fonts */
@font-face {
    font-family: 'Amble Light';
    src: url('../fonts/Amble-LightItalic-webfont.eot');
    src: url('../fonts/Amble-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-LightItalic-webfont.woff') format('woff'),
         url('../fonts/Amble-LightItalic-webfont.ttf') format('truetype'),
         url('../fonts/Amble-LightItalic-webfont.svg#AmbleLightItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Amble Light';
    src: url('../fonts/Amble-Light-webfont.eot');
    src: url('../fonts/Amble-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-Light-webfont.woff') format('woff'),
         url('../fonts/Amble-Light-webfont.ttf') format('truetype'),
         url('../fonts/Amble-Light-webfont.svg#AmbleLight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Amble';
    src: url('../fonts/Amble-Italic-webfont.eot');
    src: url('../fonts/Amble-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-Italic-webfont.woff') format('woff'),
         url('../fonts/Amble-Italic-webfont.ttf') format('truetype'),
         url('../fonts/Amble-Italic-webfont.svg#AmbleItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Amble';
    src: url('../fonts/Amble-Regular-webfont.eot');
    src: url('../fonts/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-Regular-webfont.woff') format('woff'),
         url('../fonts/Amble-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Amble-Regular-webfont.svg#AmbleRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Amble';
    src: url('../fonts/Amble-Bold-webfont.eot');
    src: url('../fonts/Amble-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-Bold-webfont.woff') format('woff'),
         url('../fonts/Amble-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Amble-Bold-webfont.svg#AmbleBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
/* CSS Reset */ 
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}h1,h2,h3,h4,h5,h6{font-weight:normal;}
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
a{text-decoration:none;}
img{-ms-interpolation-mode: bicubic;}
svg:not(:root) { overflow: hidden; }
/* Masonry Classes */
.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.3s;
     -moz-transition-duration: 0.3s;
      -ms-transition-duration: 0.3s;
       -o-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

.masonry {
  -webkit-transition-property: width, height;
     -moz-transition-property: width, height;
      -ms-transition-property: width, height;
       -o-transition-property: width, height;
          transition-property: width, height;
}

.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


/*----------------------------------
////////////////////////////////////
//		      Mobile	          //
////////////////////////////////////
----------------------------------*/
/*--------------------
		GENERAL 
--------------------*/
html
{
	background-color:#222;
}
body
{
	font-family:'Amble', Tahoma, Geneva, Verdana, Arial, sans-serif;
	font-size:16px;
	background-image:url(../img/grain.jpg);
	background-repeat:repeat;
	text-rendering: optimizeLegibility;
}
div[role="wrapper"]
{
	width:100%;
	overflow:hidden;
	position:relative;
	border-top: .5em solid #222;
}
::selection {
	background: #6ae0ff; /* Safari */
	}
::-moz-selection {
	background: #6ae0ff; /* Firefox */
}
::-webkit-selection {
	background: #6ae0ff; /* Firefox */
}

/*--------------------
	 MAIN HEADER 
--------------------*/
header[role="main"]
{
	width:100%;
	height:3em;
	padding-top:.5em;
	background-color:#222;
}
#logo, #page-title
{
	font-size:1.6em;
	float:left;
}
#logo
{
	font-size: .75em;
	width: 20em;
	height: 5em;
	margin: -0.5em 0 -1em 1.5em;
	text-indent: -100%;
	overflow: hidden;
	background-image: url(../img/logo.png);
	background-repeat: no-repeat;
	background-size: auto 60%;
	background-position: left;
}
#logo:hover
{
	background-image:url(../img/logo-blue.png);
}
#logo a
{
	display: block;
	width: 100%;
	height: 100%;
}
header[role="main"] nav[role="navigation"]
{
	text-align:left;
}

/*-------------------- 
   Main Navigation 
--------------------*/
/* Menu button */
#open-nav 
{
	display:block;
	float:right;
	width:auto;
	height:3em;
	overflow:hidden;
	white-space:nowrap;
	/* background-image: url(../img/menu.svg); */
	background-repeat:no-repeat;
	background-size:100% auto;
	position: absolute;
	top: .5em;
	right: .5em;
}
/* Close Menu Button*/
#close-nav
{
	text-align: center;
	display: block;
	height: 2.9em;
	position: absolute;
	top: 0;
	right: .5em;
	z-index: 12;
}
/* Since they need to be in the same spot, 
the open/close nav share some styles */
#open-nav img, #close-nav img
{
	height:100%;
	width:auto;
}
#page-title
{
	width:100%;
	height:1.5em;
	padding:1em 5% 0 0;
	z-index:11;
	text-align:center;
	color:#c1c1c1;
}
#main-nav
{
	display:none;
	width: 100%;
	position: fixed;
	top: 0em;
	z-index:10;
	background-color:#222;
	border-top: .5em solid #222;
}
#main-nav.active{
	display:block;
}
#main-nav ul
{	
	clear:both;
}
/* Show and hide navigation */
#main-nav:not(:target)
{
	
}
#main-nav:target
{
	display:block;
}
/* Nav Links */
#main-nav ul{ overflow:hidden; }
#main-nav ul li
{
	border-top: 0.1em solid #777;
}
#main-nav ul a
{
	display:block;
	padding:.7em 0 .7em 7%;
	width:93%;
	height:100%;
	color:#c1c1c1;
	text-decoration:none;
	transition:none;
}
#main-nav ul a:hover
{
	color:#fff;
	background-color:#777;
}
#main-nav ul a.active
{
	padding:.7em 0 .7em 7%;
	border-left: .5em solid #6ae0ff;
	color: #6ae0ff;
}

/*-------------------- 
		CONTENT 
--------------------*/
/* General */
div[role="main"]
{
	width:100%;
	line-height:2.8em;
	clear:both;
	padding-bottom:1em;
	/* background-color:#eee; */
}
h1.page-title
{
	font-size: 1.8em;
	position: relative;
	padding: .5em .6em 0 .6em;
	font-weight: bold;
	color: #888;
	text-shadow: 0 .05em #fff, 0 -.05em #777;
}

/*-------------------- 
       Home Page 
--------------------*/
/* Intro */
#intro
{
	font-size:2em;
	line-height:1.6em;
	text-align:center;
	padding:1.3em .3em .3em .3em;
	margin-bottom:1em;
}
#intro > a
{
	color:#6ae0ff;
	font-weight:bold;
	text-decoration:none;
	/* text-shadow: -0.07em 0.1em #444; */
}
#intro > strong a { color: #222; }
#intro > a.web { color:#b492cc; }
#intro > a.games { color:#a5bf6e; }
#intro > a.apps { color:#efb46c; }
#intro > a:hover
{
	background-color:#6ae0ff;
	color:#222;
	/* text-shadow: -0.07em 0.1em #eee; */
}
#intro #popup-title{ display:none; }

/* Home Banner */
#home-banner-title
{
	font-size: 1.5em;
	position: relative;
	padding: .5em .6em 0 .6em;
	font-weight: bold;
	color: #222;
	text-align:center;
}
#home-banner
{
	line-height: 1.6em;
	margin-bottom:2em;
	background-color:#222;
	font-size:1.3em;
	overflow:hidden;
	background-size:cover;
	background-image:url(../img/projects/astrobomber-banner.jpg);
}
#background-image 
{ 
	padding:1em 0 .5em 0;
	width:100%;
	background-color:#222; 
}
#home-banner #background-image > a
{
	display:block;
	line-height:0;
	border: .05em solid #ddd;
	width: -moz-calc(100% - 2.1em);
    width: -webkit-calc(100% - 2.1em);
    width: calc(100% - 2.1em);
	margin: 0 0 .5em 1em;
}
#home-banner #background-image > a > img
{
	width:100%;
	height:auto;
}
#home-banner #background-image .under-image-text
{
	font-size: 0.6em;
	font-family: 'Amble Light';
	display: block;
	width: -moz-calc(100% - 2em);
    width: -webkit-calc(100% - 2em);
	width: calc(100% - 2em);
	margin-bottom:1em;
	float: left;
	text-align: center;
	line-height: 0;
	color: #ccc;
	text-decoration:none;
}
#home-banner .banner-nav
{
	
	width:60%;
	color:#ccc;
	padding: 0 0 1em 0;
	margin: 0 auto;
}
#home-banner .banner-nav-piece 
{ 
	display:none;
}
#home-banner .banner-nav.active, #home-banner .banner-nav:hover
{
	display:block;
	color:#6ae0ff;
}
#home-banner .banner-nav-piece img
{
	display:none;
}
#home-banner .banner-nav > h2
{
	text-align:center;
	margin-top:1.4em;
}
#home-banner .banner-nav > p
{
	font-size: .7em;
	text-align: center;
	line-height: 1em;
}
/* Arrows */
.prev-img
{
	float:left;
	margin-left:1em;
	height:3em;
	opacity:.5;
	cursor:pointer;
}
.next-img
{
	float:right;
	margin-right:1em;
	height:3em;
	opacity:.5;
	cursor:pointer;
}
.next-img:hover, .prev-img:hover
{
	/*transition: .3s ease;*/
	-webkit-animation: arrows 2s ease;
	-moz-animation: arrows 2s ease;
	-ms-animation: arrows 2s ease;
	animation: arrows 2s ease;
	
}
@-webkit-keyframes arrows
{
	0% {opacity: .5;}
	50% {opacity: 1;}
	100% {opacity: .5;}
}
@-moz-keyframes arrows
{
	0% {opacity: .5;}
	50% {opacity: 1;}
	100% {opacity: .5;}
}
@-ms-keyframes arrows
{
	0% {opacity: .5;}
	50% {opacity: 1;}
	100% {opacity: .5;}
}
@keyframes
{
	0% {opacity: .5;}
	50% {opacity: 1;}
	100% {opacity: .5;}
}
.next-img img, .prev-img img
{
	height:100%;
}
.slider-arrow, .dots, .caption
{
	display:none;
}
#home-banner .more{display:none;}

/* Coding Blurb */
#coding-blurb
{
	font-size: 2em;
	line-height: 1.6em;
	text-align: center;
	padding: 1.3em .3em .3em .3em;
	margin-bottom: 2em;
	background-image: url(../img/languages.png);
	background-repeat: no-repeat;
	background-position: center center;	
	background-size:auto 100%;
}
.monospace-font
{
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
}
.script-font
{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
}
#coding-blurb h1{
	marin-bottom:1em;
}
#coding-blurb p
{
	font-size:.6em;
	text-align:right;
}
#coding-blurb a
{
	font-family:'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
	color:#222;
	height:100%;
	width:100%;
	display:block;
	float:right;
	padding-right: 2em;
	background-image:url(../img/arrow-right.png);
	background-position:right;
	background-repeat:no-repeat;
	background-size: auto 70%;
}
#coding-blurb a:hover { background-image:url(../img/arrow-right-hover.png); }

/*-------------------- 
    Portfolio Page 
--------------------*/
.portfolio-piece
{
	width: -moz-calc(100% - 2.1em);
    width: -webkit-calc(100% - 2.1em);
    width: calc(100% - 2.1em);
	margin:auto auto 2em 1.05em;
	float:left;
}
.portfolio-piece > img
{
	width: -moz-calc(100% - .05em);
    width: -webkit-calc(100% - .05em);
    width: calc(100% - .05em);
	height:auto;
	border:.1em solid #777;
	cursor:pointer;
}
/* Preview Title Text + Detail Title Text*/
.portfolio-piece h2, .portfolio-piece info h2, .portfolio-piece-info h3
{
	font-size: 1.6em;
	position: relative;
	margin: -2.5em 0 0 0;
	padding: .5em 0 .3em 1em;
	line-height: 1em;
	color: #fff;
	text-shadow: 0 .1em #000;
	font-weight: bold;
	background-color: rgba(0,0,0,.8);
	letter-spacing: 0.05em;
	cursor:pointer;
}
.filter-options
{
	width: -moz-calc(100% - 2.1em);
    width: -webkit-calc(100% - 2.1em);
    width: calc(100% - 2.1em);
	margin:0 auto 1em auto;
	overflow:hidden;
}
.filter-options li
{
	width:25%;
	float:left;
	text-align:center;
	list-style:none;
	border-right: .1em solid #333;
}
.filter-options li:nth-child(4)
{
	border-right:none;
	margin-right:-.3em;
}
.filter-options li a
{
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
	color:#323232;
	background-color:#c1c1c1;
	cursor:pointer;
}
.filter-options li a.active, .filter-options li a:hover
{
	background-color:#6ae0ff;
}
.filter-options li a.app.active, .filter-options li a.app:hover{background-color:#efb46c;}
.filter-options li a.game.active, .filter-options li a.game:hover{background-color:#a5bf6e;}
.filter-options li a.website.active, .filter-options li a.website:hover{background-color:#b492cc;}

/*----------------------
 Portfolio Piece Detail 
----------------------*/
.portfolio-piece-info
{
	display:none;
	position:relative;
	margin-top:-1.2em;
	padding:2.5em 0 1em 0;
	color:#c1c1c1;
	background-color:#222;
}
.portfolio-piece-info h2
{
	margin-top:0;
	margin-bottom:.5em;
	padding-bottom:0;
	padding-top:.5em;
	background:none;
	text-shadow:none;
	cursor:auto;
}
.portfolio-piece-info p
{
	padding:0 1.6em;
	margin-bottom:1.5em;
	line-height: 1.8em;
}
.portfolio-piece-info a.launch-site
{
	display: block;
	margin: .5em 1.5em 1em 1.5em;
	border: .1em solid #fff;
	font-weight: bold;
	color: #333;
	text-shadow: 0 0.1em #fff;
	background-color: #6ae0ff;
	text-decoration: none;
	text-align: center;
	letter-spacing: 0.12em;
	clear:both;
	cursor:pointer;
}

/* My duties/I used */
.portfolio-piece-info .portfolio-skills-module
{
	width:50%;
	float:left;
	padding-left:.5em;
	margin-right: -.5em;
	margin-bottom:1em;
}
.portfolio-piece-info h3
{
	font-size:1.2em;
	background:none;
	text-shadow:none;
	margin:0;
	cursor:auto;
}
.portfolio-piece-info ul
{
	
	margin-bottom:1em;
}
.portfolio-piece-info li
{  
	margin:0 1.5em;
	line-height: 1.7em;
}

/* Back to top / close box */
.portfolio-piece-info .back-to-top
{
	width:2.5em;
	margin:auto;
	padding:1em 0 0 0;
	clear:both;
}
.portfolio-piece-info .close-info
{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 4em;
	line-height:0;
	cursor:pointer;
	z-index: 15;
}
.portfolio-piece-info .close-info img
{
	width:100%;
	height:auto;
}
/* Decoration triangle overlaying portfolio piece image when expanded */
.triangle-up
{
	position: absolute;
	top: -.95em;
	height: 1em;
	left:10%;
}
.launch-site-large, .meta-piece-description
{
	display:none;
}
figure
{
	display:none;
}

/*----------------------
 		Resume
----------------------*/
h1.resume
{ 
	float:left;
	margin-bottom:.5em;
}
#download-resume
{
	display:block;
	margin: 1.1em auto 2em 1em;
	padding: .5em 1.5em;
	line-height: 1.8em;
	position: static;
	width: calc(100% - 5em);
	text-align:center;
	clear:both;
}

section.portfolio-module
{
	margin:0 1em 1em 1em;
	overflow:hidden;
	clear:both;
	line-height: 1.4em;
	font-family:'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
}
section.portfolio-module h2
{
	font-size:1.2em;
	font-weight:bold;
	font-family:'Amble', Tahoma, Geneva, Verdana, Arial, sans-serif;
	margin:0;
}
section.portfolio-module h3
{
	font-weight:bold;
	font-family:'Amble', Tahoma, Geneva, Verdana, Arial, sans-serif;
}
section.portfolio-module h4
{
	font-style:italic;
}
section.portfolio-module .submodule
{
	width:50%;
	float:left;
}
section.portfolio-module aside.date
{
	margin-bottom:1em;
}
section.portfolio-module aside.date:last-of-type
{
	margin-bottom:1em;
}
/*----------------------
 		About
----------------------*/
#about-pic
{
	text-align:center;
}
#about-pic img
{
	width:50%;
}
.about > h2
{
	font-size: 1.5em;
	margin: 0 .6em 2em .6em;
	text-align:center;
}
.about .about-details
{
	clear:both;
}
.about .about-details > section
{
	margin:0 1em;
	float: left;
	width:-webkit-calc(100% - 2em);
	width:-moz-calc(100% - 2em);
	width:calc(100% - 2em);
	line-height:2em;
	margin-bottom:5em;
}
.about .about-details > section.about-graph
{
	text-align:center;
	margin-bottom:3em;
}
.about .about-details > section.about-graph img
{
	width:70%;
	padding:3em;
}
.about .about-details h2
{
	font-size: 1.2em;
	font-weight: bold;
	font-family: 'Amble', Tahoma, Geneva, Verdana, Arial, sans-serif;
	margin: 0;
}
.about .about-details > section p
{
	margin-bottom:1em;
	font-family:'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
}

/*----------------------
 		Contact
----------------------*/
.contact h2
{
	margin:0 1em;
}
form.contact
{
	font-family:'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
	margin:0 1em;
}
form.contact *:focus
{
	background-color: #6ae0ff;
	box-shadow: inset 0 0 .5em #999, 0 0 .5em #999;
	border: 1px solid #777 !important;
	outline:none;
	color:#222;
}
form.contact input[type="text"], form.contact textarea
{
	display:block;
	padding: .6em 1em .8em 1em;
	margin-bottom:1em;
	width: -moz-calc(100% - 2em);
    width: -webkit-calc(100% - 2em);
	width:calc(100% - 2em);
	color:#222;
	border:1px solid #aaa;
	font-size:.9em;
	font-family:'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
}
form.contact input[type="text"]
{
	margin-top:0;
}
form.contact textarea
{
	height:20em;
	border:1px solid #aaa;
	color:#222;
}
form.contact input[type="submit"]
{
	padding: .6em 1em .8em 1em;
	margin-bottom:1em;
	width: 30%;
	font-size: .75em;
}
h2.email-success
{
	background-color: #4c6;
	width: -moz-calc(100% - 3.9em);
    width: -webkit-calc(100% - 3.9em);
	width:calc(100% - 3.9em);
	padding: 0 1em;
	margin-bottom:1em;
}
/* Email Error and Arrow */
form.contact .email-error
{
	color: #eee;
	background-color: #c44;
	line-height: 1.5em;
	padding: .5em 1em;
	margin: 0 0 -1px 0;
	display: block;
	position: relative;
	width: -moz-calc(100% - 1.85em);
    width: -webkit-calc(100% - 1.85em);
	width:calc(100% - 1.85em);
	box-shadow: 0 1px 1px #aaa;
}
form.contact .email-error:after{
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #c44;
	border-width: .8em;
	right: 1em;
}

/*--------------------
	    FOOTER 
--------------------*/
footer
{
	font-size:0.7em;
	clear:both;
	padding:2em 0 1.5em 0;
	text-align:center;
	color:#6ae0ff;
	background-color:#222;
	line-height:1.5em;
}
footer a{
	color:#6ae0ff;
}
.back-to-top
{
	display:block;
	margin:auto auto 1em auto;
	width:4em;
}
.back-to-top img
{
	width:100%;
	height:auto;
}

/*--------------------
	    MISC 
--------------------*/
.button
{
	color: #222;
	text-shadow:0 .1em #eee;
	background-color: #6ae0ff;
	border:1px solid #ccc;
	border-top: 1px solid #aaa;
	border-bottom:1px solid #fff;
	cursor:pointer;
}
.button:hover
{
	color: #6ae0ff;
	background-color: #222;
	text-shadow:none;
}
.button:focus
{
	outline:none;
	background-color:#222;
	color:#6ae0ff;
	text-shadow:none;
	box-shadow: inset 0 0 .5em #6ae0ff;
}
strong
{
	font-weight:bold;
}
#clear-node
{
	clear:both;
	width:100%;
}

/* Other pages */
#intro.error h2
{
	margin-bottom:1em;
}
#error-link, #error-alt
{
	font-family: 'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
	display: block;
	font-size: .5em;
	line-height: 2.5em;
}
#error-link a
{
	padding: .5em;
	background-color:#222;
	color: #6ae0ff;
}
#error-link a:hover
{
	color:#222;
	background-color:#6ae0ff;
}

/*----------------------------------
////////////////////////////////////
//		   Small Tablet	          //
////////////////////////////////////
----------------------------------*/
@media all and (min-width: 40em)
{	
	/* Intro */
	#intro
	{
		font-size:3em;
		padding: 1.8em .3em .3em .3em;
	}
	
	/* Home Banner */
	#home-banner-title
	{
		font-size: 1.8em;
		text-align:left;
	}
	#home-banner
	{
		padding:0;
		position:relative;
		border:none;
		background-color:transparent;
	}
	.banner-nav, .prev-img, .next-img, #home-banner .banner-nav-piece img 
	{ 
		display:none; 
	}
	/* home banner image */
	#background-image 
	{ 
		background-color:transparent; 
		padding:0;
	}
	#home-banner #background-image > a
	{
		display:none;
	}
	#home-banner #background-image > a:first-child
	{
		display: block;
		margin: 0;
		padding: 0;
		height: 100%;
		position: absolute;
		opacity: 0;
		width: -moz-calc(70% - 2.1em);
		width: -webkit-calc(70% - 2.1em);
		width: calc(70% - 2.1em);
	}
	#home-banner .under-image-text
	{
		position:absolute;
	}
	/* home banner pieces */
	#home-banner #banner-information
	{
		font-size:1em;
		float:right;
		width:11em;
		overflow:hidden;
		background-color: #777;
		line-height: 1.2em;
		margin-right:-1px;
	}
	#home-banner .banner-nav-piece
	{
		display:block;
		width:100%;
		float:left;
		clear:left;
		padding: 1.4em 0 1.35em 0;
		margin-bottom: 1px;
		background-color: #222;
		color:#ccc;
		cursor:pointer;
	}
	#home-banner .banner-nav-piece.active, #home-banner .banner-nav-piece:hover
	{
		color:#6ae0ff;
		border-right:1em solid #6ae0ff;
		width: -moz-calc(101% - 1em);
    	width: -webkit-calc(101% - 1em);
		width:calc(101% - 1em);
	}
	#home-banner .banner-nav-piece h2
	{
		line-height:1.1em;
		padding-left: 1.1em;
		width: -moz-calc(100% - 1em);
    	width: -webkit-calc(100% - 1em);
		width: calc(100% - 1em);
	}
	#home-banner .banner-nav-piece p
	{
		font-family:'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
		font-size:.7em;
		padding-left: 1.5em;
		width: -moz-calc(100% - 1em);
    	width: -webkit-calc(100% - 1em);
		width: calc(100% - 1em);
	}
	#home-banner #background-image > a.under-image-text
	{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 15em;
		background-color: rgba(20,20,20,.9);
		display: block;
		height: 3em;
		margin: 0;
		padding: 0;
		line-height: 3em;
	}
	#home-banner .more
	{
		font-family:'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
		display:block;
		float: left;
		clear:left;
		font-size: .7em;
		line-height: 3em;
		background-color: #222;
		width: 101%;
	}
	#home-banner .more a
	{
		height: 100%;
		width: 91%;
		padding-left:10%;
		display: block;
		color:#ccc;
		background-image: url(../img/arrow-right.png);
		background-position:90%;
		background-repeat:no-repeat;
		background-size:auto 65%;
	}
	#home-banner .more a:hover
	{
		background-color:#6ae0ff;
		color:#222;
		background-image: url(../img/arrow-right-hover.png);
	}
	/* Slider colors hover/active */
	#home-banner .banner-nav-piece.active.web, #home-banner .banner-nav-piece.web:hover{ color:#b492cc; }
	#home-banner .banner-nav-piece.active.game, #home-banner .banner-nav-piece.game:hover{ color:#a5bf6e; }
	#home-banner .banner-nav-piece.active.app, #home-banner .banner-nav-piece.app:hover{ color:#efb46c; }
	#home-banner .banner-nav-piece.web{border-color:#b492cc;}
	#home-banner .banner-nav-piece.game{border-color:#a5bf6e;}
	#home-banner .banner-nav-piece.app{border-color:#efb46c;}
	
	/* Coding blurb */
	#coding-blurb { 
		padding: 2em .3em 1.5em .3em;
	}
	#coding-blurb h1
	{
		font-size: 1.8em;
		line-height: 1.6em;
	}
	
	/* Portfolio Pieces */
	.portfolio-piece
	{
		/* .05 for each border, adding to a total of .2 (half of the 1 column) */
		width: -moz-calc(50% - 2.05em);
    	width: -webkit-calc(50% - 2.05em);
		width: calc(50% - 2.05em);
		margin: 0 1em 2em 1em;
		float: left;
	}
	.portfolio-piece:nth-child(even) .portfolio-piece-info, div[role="main"] .portfolio-piece.evenColumn .portfolio-piece-info
	{
		margin: .8em 0 0 -moz-calc(-100% - 2.05em);
		margin: .8em 0 0 -webkit-calc(-100% - 2.05em);
		margin: .8em 0 0 calc(-100% - 2.05em);
	}
	.portfolio-piece:nth-child(odd) .portfolio-piece-info, div[role="main"] .portfolio-piece.oddColumn .portfolio-piece-info
	{
		margin: .8em -moz-calc(-100% - 2.05em) 0 0;
		margin: .8em -webkit-calc(-100% - 2.05em) 0 0;
		margin: .8em calc(-100% - 2.05em) 0 0;
		z-index:2;
	}
	.portfolio-piece:nth-child(even) .triangle-up, div[role="main"] .portfolio-piece.evenColumn .triangle-up
	{
		top: -1.45em;
		height: 1.5em;
		right: 20%;
		left: auto;
	}
	.portfolio-piece:nth-child(odd) .triangle-up,  div[role="main"] .portfolio-piece.oddColumn .triangle-up
	{
		top: -1.45em;
		height: 1.5em;
		left:20%;
		right:auto;
	}
	
	/* Overlay */
	#overlay
	{
		display:none;
		opacity:0;
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-color:rgba(0,0,0,.6);
		z-index:100;
		text-align:center;
	}
	#overlay .container
	{
		position: relative;
		margin: 5% auto;
		display: inline-block;
		max-width: 80%;
		max-height: 80%;
	}
	#overlay .container .close
	{
		position:absolute;
		top:0;
		right:0;
		width:3em;
		z-index:2;
		cursor:pointer;
	}
	#overlay .container .content
	{
		background-color: #ccc;
		line-height:0;
		box-shadow: 0 0 .5em #000;
		position:relative;
	}
	#overlay .container .content span
	{
		display:block;
	}
	#overlay .container .content span > *
	{
		box-shadow: 0 0 1em #000;
		max-height: 100%;
		max-width: 100%;
	}
	
	/* About */
	#about-pic
	{
		text-align: center;
		float: right;
		width: 50%;
	}
	#about-pic img { 
		width:100%; 
		margin-right:.6em; 
	}
	.about > h2
	{
		margin-top:2em;
		line-height:2em;
	}
	.about .about-details
	{
		padding-top:2em;
	}
	.about .about-details > section
	{
		width:-webkit-calc(50% - 2em);
		width:-moz-calc(50% - 2em);
		width:calc(50% - 2em);
		float:left;
		clear:right;
	}
	
	/* Resume */
	#download-resume 
	{
		display: block;
		text-align: center;
		height: 1.6em;
		float: left;
		margin-top: 1.1em;
		line-height: 1.8em;
		padding: 0 1.5em;
		position: relative;
		top:0;
		left:0;
		width:auto;
		border-left: none;
		margin-left: 1.5em;
		clear:none;
	}
	#download-resume:after, #download-resume:before {
		transition: .3s ease;
		right: 100%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}
	
	#download-resume:after {
		border-color: rgba(136, 183, 213, 0);
		border-right-color: #6ae0ff;
		border-width: .75em;
		top: 40%;
		margin-top: -.6em;
		transition:.2s ease-out
	}
	#download-resume:before {
		border-color: rgba(194, 225, 245, 0);
		border-right-color: #ccc;
		border-width: .86em;
		top: 62%;
		margin-top: -1em;
	}
	#download-resume:hover:after
	{
		border-right-color:#222;
	}
}

/*----------------------------------
////////////////////////////////////
//	       Larger Tablet		  //
////////////////////////////////////
----------------------------------*/
@media all and (min-width:50em)
{
	/* Intro */
	#intro {
		padding: 1.8em 2.5em .8em 2.5em;
	}
	 
	/* Home Banner */
	#home-banner{
		padding-left:.7em;
	}
	#home-banner{
		margin:0 1em 1em 1em;
	}
	#home-banner #banner-information {
		font-size: 1.2em;
	}
	
	/* Coding Blurb */
	#coding-blurb {
		padding: 2em 3em 1.5em 3em;
	}
	
	
	/* About */
	.about > h2
	{
		font-size: 1.8em;
		margin-top: 3em;
		line-height: 2em;
	}
}

/*----------------------------------
////////////////////////////////////
//	 Slightly Larger Tablet		  //
////////////////////////////////////
----------------------------------*/
@media all and (min-width:60em)
{
	/* About */
	.about > h2
	{
		font-size: 2.3em;
		margin-top: 3em;
		line-height: 2em;
	}
}

/*----------------------------------
////////////////////////////////////
//		   Small Desktop		  //
//			  1280px+			  //
////////////////////////////////////
----------------------------------*/
@media all and (min-width: 75em)
{
	/*////////////////////
		   GENERAL 
	////////////////////*/
	body
	{
		border-top: .5em solid #222;
	}
	div[role="wrapper"]
	{
		/*width: 67%;*/
		max-width:75%;
		position:relative;
		margin:auto;
		overflow:visible;
		border-top:none;
		min-height: 25em;
	}
	div[role="main"]
	{
		width:67%;
		float:right;
	}
	#logo
	{
		font-size: .75em;
		width: 20em;
		height: 5em;
		margin: -1em 0 0 16%;
		text-indent: -100%;
		overflow: hidden;
		background-image: url(../img/logo.png);
		background-repeat: no-repeat;
		background-size: auto 60%;
		background-position: left;
	}
	h1.page-title,
	{
		padding-right:0;
	}
	 
	/*-------------------- 
	   Main Navigation 
	--------------------*/
	#wrapper #main-nav
	{
		width:17%;
		font-size:1em;
		font-family:'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
		display:block;
		position: fixed;
		top: 10em;
		left: 16.5%;
		background-color:transparent;
		border:none;
	}
	#page-title, #open-nav, #close-nav
	{
		display:none;
	}
	nav#main-nav[role="navigation"] ul li { border:none; }
	nav#main-nav[role="navigation"] ul li a
	{
		padding:.6em 0 .6em 40%;
		width:60%;
		border:none;
		background-color:transparent;
		color:#222;
	}
	nav#main-nav[role="navigation"] ul li a.active, nav#main-nav[role="navigation"] ul li a:hover
	{
		padding:.6em 0 .6em 40%;
		border-left:none;
		background-color:#222;
		color:#6ae0ff;
	}
	nav#main-nav[role="navigation"] ul li a:focus
	{
		outline:none;
		background-color:#222;
		color:#6ae0ff;
	}
	
	/*////////////////////
		     HOME 
	////////////////////*/
	/* Intro */
	#intro
	{
		font-size:2.2em;
		padding: 2.3em 0em 1.2em 0em;
		margin-bottom:1em;
		border-bottom: .05em solid #fff;
		position:relative;
	}
	#intro strong{ position:relative; }
	#intro strong a{ padding-top:1em; }
	/* above intro text description */
	#intro #popup-title
	{
		transition: .3s ease-out;
		display:block;
		font-size: .5em;
		width: 18em;
		line-height: 1em;
		padding: .7em .1em .6em .1em;
		font-family: 'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
		color: #6ae0ff;
		letter-spacing: -.1em;
		background-color:#222;
		text-align: center;
		position: absolute;
		left: 1em;
		top: -3em;
		cursor:pointer;
		-moz-border-radius: .5em;
		-webkit-border-radius: .5em;
		border-radius: .5em;
		-webkit-animation: intro 1s; 
		-moz-animation:    intro 1s;
		-o-animation:      intro 1s; 
		animation:         intro 1s;
	}
	#intro #popup-title:before
	{
		content:"Interactive Developer & Designer";
	}
	#intro #popup-title:after{
		transition: .3s ease-out;
		top: 100%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-top-color: #222;
		border-width: .7em;
		left: 1em;
	}
	#intro #popup-title:hover, #intro strong:hover #popup-title
	{
		background-color:#6ae0ff;
		color:#222;
		border-top:1px solid #2cbadf;
	}
	#intro #popup-title:hover:before, #intro strong:hover #popup-title:before
	{
		content:"See what I'm all about!";
	}
	#intro #popup-title:hover:after, #intro strong:hover #popup-title:after
	{
		border-top-color: #6ae0ff;
	}
	
	/* Animation */
	@-webkit-keyframes intro {
	  0%   { opacity: 0; top:0;}
	  100% { opacity: 1; top:-3em;}
	}
	@-moz-keyframes intro {
	  0%   { opacity: 0; top:0;}
	  100% { opacity: 1; top:-3em;}
	}
	@-o-keyframes intro {
	  0%   { opacity: 0; top:0;}
	  100% { opacity: 1; top:-3em;}
	}
	@keyframes intro {
	  0%   { opacity: 0; top:0;}
	  100% { opacity: 1; top:-3em;}
	}
	
	/* Two toned seperators */
	#intro:before{
		content:""; 
		display:block; 
		position:absolute;
		left:0; 
		right:0; 
		bottom:0; 
		border-bottom: 1px solid #ddd;
	}
	#coding-blurb:before{
		content:""; 
		display:block; 
		position:absolute;
		left:0; 
		right:0; 
		top:0; 
		border-top: .05em solid #fff;
	}
	
	/* Home Banner */
	#home-banner
	{
		margin-bottom:3em;
	}
	#home-banner #banner-information
	{
		transition:none;
		font-size:.85em;
	}
	#home-banner .under-image-text 
	{
		width:10em;
	}
	#home-banner .banner-nav-piece
	{ 
		margin:0;
		position:relative; 
	}
	/* Border on all elements but the last*/
	#home-banner .banner-nav-piece:before
	{
		content:""; 
		display:block; 
		position:absolute;
		left:0; 
		right:0; 
		bottom:0;
		border-bottom: 1px solid #777;
	}
	
	/* Home Banner */
	#home-banner #background-image > a:first-child
	{
		width: -moz-calc(70% - 2.1em);
		width: -webkit-calc(70% - 2.1em);
		width: calc(70% - 2.1em);
	}
	
	/* Coding blurb */
	#coding-blurb { 
		position:relative; 
		background-image:none;
		margin:0 0 5em 0;
		padding:2em 0;
		border-top: 1px solid #ddd;
	}
	
	#coding-blurb h1
	{
		font-size:1.5em;
		line-height:1.5em;
		width: -moz-calc(100% - 2em);
    	width: -webkit-calc(100% - 2em);
		width: calc(100% - 2em);
		padding: .8em 1em 2em 1em;
		background-image: url(../img/languages.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% auto;
	}
	#coding-blurb p
	{
		font-size:.8em;
		text-align:right;
		margin-top: -3em;
		
	}
	#coding-blurb a
	{
		background-size: auto 80%;
	}
	
	/*////////////////////
		   PORTFOLIO 
	////////////////////*/
	/* General */
	#content
	{
		min-height:40em;
	}
	ul.filter-options
	{
		margin:0 0 1em 1em;
		width: -moz-calc(100% - 1em);
    	width: -webkit-calc(100% - 1em);
		width: calc(100% - 1em);
	}
	#portfolio-pieces-container
	{
		margin-left:0em;
		margin-bottom:5em;
	}
	.portfolio-piece
	{
		margin:0 -1em 1em 1em;
		width: -moz-calc(33% - .9em);
    	width: -webkit-calc(33% - .9em);
		width:calc(33% - .9em);
	}
	.portfolio-piece > h2
	{
		font-size:1em;
		margin: -2.65em 0 0 0;
		padding: .3em 0 .2em .5em;
		font-family: 'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
		font-weight:normal;
		text-shadow:none;
	}
	
	/* Expanded Portfolio Piece */
	.portfolio-piece.active
	{
		width: -moz-calc(100% - 1.05em);
    	width: -webkit-calc(100% - 1.05em);
		width: calc(100% - 1.05em);
	}
	.portfolio-piece.active > img, .portfolio-piece.active > a, .triangle-up
	{
		display:none;
	}
	
	/*///////////////////////////
	    Right-side information
	///////////////////////////*/
	.portfolio-piece.active .portfolio-piece-info
	{
		width: 50%;
		float: right;
		margin: 0;
		padding: 0;
	}
	/* Title + Description */
	.portfolio-piece.active .portfolio-piece-info h2
	{
		margin:.3em 0 0 .5em;
		padding: 1em 0 0 0;
		color: #6ae0ff;
		line-height: 0;
	}
	.portfolio-piece.active .portfolio-piece-info p, .portfolio-piece.active .portfolio-piece-info ul, .meta-piece-description
	{
		font-family: 'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
	}
	.meta-piece-description
	{
		font-size: .75em;
		margin-left: 1em;
		display: block;
	}
	.portfolio-piece .app {color:#efb46c;}
	.portfolio-piece .game {color:#a5bf6e;}
	.portfolio-piece .website {color:#b492cc;}
	.portfolio-piece.active .portfolio-piece-info p
	{
		margin: 0;
		padding: 0 .8em .8em .8em;
		line-height:1.5em;
		font-size: .9em;
	}
	/* Launch Buttons */
	.launch-site-large
	{
		font-size: .9em;
		float:right;
		display: block;
		margin:0 .5em 1em 0;
		padding: .2em .5em 0 .5em;
		border-radius: .2em;
		border: 0.1em solid #000;
		box-shadow: inset 1px 1px #333, 1px 1px #333;
		line-height: 2em;
	}
	.portfolio-piece.active  a.launch-site{display:none;}
	/* Skills + duties */
	.portfolio-piece.active .portfolio-skills-module
	{
		width: -moz-calc(50% - .8em);
    	width: -webkit-calc(50% - .8em);
		width: calc(50% - .8em);
		padding:.7em 0 0 1.2em;
		clear:right;
		margin-bottom:0;
		border-top: 1px solid #555;
		position:relative;
	}
	/* Borders */
	.portfolio-piece.active .portfolio-skills-module:first-of-type
	{
		border-right:1px solid #555;
		padding:.7em 0 0 .7em;
		width: -moz-calc(50% - .7em);
    	width: -webkit-calc(50% - .7em);
		width: calc(50% - .7em);
	}
	.portfolio-piece.active .portfolio-skills-module:before
	{
		content: "";
		display: block;
		position: absolute;
		left: 1px;
		right: 0px;
		top: -2px;
		bottom: 0;
		border-top: 1px solid #000;
		
	}
	.portfolio-piece.active .portfolio-skills-module:first-of-type:before
	{
		border-right: 1px solid #000;
	}
	.portfolio-piece.active .portfolio-piece-info h3
	{
		color: #6ae0ff;
		padding:0;
	}
	.portfolio-piece.active .portfolio-piece-info li
	{
		line-height: 1.4em;
		margin:0;
	}
	
	/*///////////////////////////
	      left-side Slider
	///////////////////////////*/
	.portfolio-piece.active figure
	{
		display:block;
		width:50%;
		float:left;
		background-size:cover;
		transition: height 0;
		/*can't highlight*/
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.portfolio-piece .expand-image
	{
		opacity: 0;
		transition: .2s ease-out;
		content: "";
		position: absolute;
		top: .5em;
		left: .5em;
		width: 2em;
		height: 2em;
		cursor: pointer;
		border-radius: .3em;
		background-image: url(../img/magnifying-glass.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-color: #222;
		background-size: 60%;
	}
	.portfolio-piece.active figure:hover .expand-image
	{
		opacity:.8;
	}
	.portfolio-piece.active .slider-arrow
	{
		display:block;
		height:3em;
		width:2em;
		background-color:rgba(20,20,20,.75);
		background-repeat:no-repeat;
		background-position:center;
		cursor:pointer;
		position:absolute;
		top:40%;
	}
	.slider-arrow.prev
	{
		background-image:url(../img/slider-arrow-prev.png);
		left:0;
	}
	.slider-arrow.next
	{
		background-image:url(../img/slider-arrow-next.png);
		right:50%;
	}
	.portfolio-piece.active .dots
	{
		display:block;
		position: absolute;
		overflow:hidden;
		bottom: 2em;
		left: 0;
		width: 50%;
		height: 1em;
		padding-top: .2em;
		font-size: .8em;
		text-align: center;
		line-height: 1.5em;
		/*can't highlight*/
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.dots .dots-bg
	{
		display: inline;
		padding: .5em 1em 0 1em;
		background-color: rgba(20,20,20,.9);
	}
	.dots .dot
	{
		width: 1.5em;
		height: 1em;
		display: inline-block;
		background-image: url(../img/dot.png);
		background-size: auto 70%;
		background-repeat:no-repeat;
		background-position:center;
		cursor:pointer;
	}
	.dots .dot.active, .dots .dot:hover
	{
		background-image:url(../img/dot-active.png);
	}
	.portfolio-piece.active aside.caption
	{
		display:hidden;
		font-family: 'Amble Light', Tahoma, Geneva, Verdana, Arial, sans-serif;
		font-size: .8em;
		height:2em;
		color:#ccc;
		position: absolute;
		bottom: 0;
		padding-left: .5em;
		width:50%;
		line-height: 2em;
		background-color:rgba(20,20,20,.9);
		/*can't highlight*/
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.portfolio-piece.active aside.caption.active
	{
		display:block;
	}
	
	
	/* Hide footer arrow */
	footer .back-to-top
	{
		display:none;
		margin:0;
	}
	
	/* 
	Masonry fade
	Can't set opacity of element directly otherwise Masonry won't recognise it as visible 
	*/
	.faded > img
	{
		transition:.3s ease;
		opacity:.6;
	}
	.faded > h2
	{
		transition:.3s ease;
		opacity:.7;
	}
	.faded:hover > img, .faded:hover > h2
	{ 
		transition:.3s ease; 
		opacity:1; 
	}
	
	
	/* About */
	.about > h2
	{
		font-size: 1.5em;
	}
	
	/* Other pages */
	#content.error
	{
		padding-left: 37%;
		float:none;
	}
}

/*----------------------------------
////////////////////////////////////
//		   Medium Desktop		  //
////////////////////////////////////
----------------------------------*/
@media all and (min-width: 85em)
{
	/* About */
	.about > h2
	{
		/*font-size: 1.5em;*/
	}
}

/*----------------------------------
////////////////////////////////////
//		   Large Desktop		  //
//			  1920px+			  //
////////////////////////////////////
----------------------------------*/
@media all and (min-width: 100em)
{
	/* Intro */
	#intro{
		font-size:3.5em;
		border-bottom: 1px solid #fff;
	}
	#intro:before{
		border-bottom: 1px solid #ccc;
	}
	#intro #popup-title{
		font-size:.4em;
	}
	
	/* Home Banner */
	#home-banner #banner-information{
		font-size: 1.2em;
	}
	#home-banner .banner-nav-piece:before
	{
		border-bottom: 1px solid #777;
	}
	
	/* Coding blurb */
	#coding-blurb{
		padding-top:0;
	}
	#coding-blurb h1 { 
		font-size: 2em;
		padding: 2em 1em 2em 1em;
	}
	
	/* About */
	.about > h2
	{
		font-size: 2em;
	}
	
	/*Other Pages*/
	#wrapper.error
	{
		margin-left: 37%;
		float: none;
	}
}




@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
/* retina rules here */
}

.no-css { display:none; }