/*//// 		General							////////////////////////////////////////////////////////////////////////////////////////////*/
/*{{{*/ 
*{
	outline:0;
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
	/*-webkit-user-select: none;*/
}

img
{
	border:0;
}

::selection
{
	background: #1fb6e3;
}

::-moz-selection
{
	background: #1fb6e3;
}

@font-face
{
	font-family:Comic;
	src:url('../fonts/comic_serif.otf') format('opentype');
}

html, body
{
	width:100%;
	height:100%;
}

html
{
	text-rendering: optimizeLegibility;
}

body
{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:300;
	font-size:14pt;
	margin:0;
	position:relative;
	overflow-x:hidden;
	background-color:#E4EBF8;
	-webkit-font-smoothing:antialiased;
}

a
{
	text-decoration:none;
}

.hr
{
	height:30px;
	background-image:url(../images/bg3.png);
}

.clear
{
	clear:both;
}

.fade
{
	-moz-transition-property: opacity;
	-moz-transition-duration: .8s;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: .8s;
	-o-transition-property: opacity;
	-o-transition-duration: .8s;
	transition-property: opacity;
	transition-duration: .8s;
}

.fade:hover
{
	opacity:.7;
}

img.logo
{
	z-index:1;
	float:left;
	width:230px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-115px;
	margin-top:-115px;
	cursor:pointer;
}

/*
div.stripes
{
	position:relative;
	width:100%;
	height:6px;
	background-image:url(../images/stripes.png);
}
*/

/*}}}*/

/*//// 		Navigation						////////////////////////////////////////////////////////////////////////////////////////////*/
/*{{{*/
div.line
{
	position:relative;
	width:100%;
	height:20px;
	visibility:hidden;
}

div.line.fixed
{
	position:fixed;
	top:0;
	z-index:5;
	visibility:visible;
}

div.navigation
{
	position:fixed;
	z-index:5;
	width:auto;
	top:0;
	right:5%;
	padding:0 15px;
	background-color:#E4EBF8;
	color:black;
}

div.line.light, div.navigation.light
{
	background-color:#E4EBF8;
	color:black;
}

div.line.dark, div.navigation.dark
{
	background-color:#20232B;
	color:white;
}

div.navigation a
{
	font-family:'Arvo';
	font-size:17px;
	font-weight:400;
	text-align:center;
	cursor:pointer;
	position:relative;
	display:inline-block;
	padding:15px 0 22px 0;
	margin-right:20px;
	border-top:3px solid #3f6397;
	line-height:0;
	margin-top:13px;
}

div.navigation a.first
{
	border:0;
	margin-left:6px;
	width:16px;
	text-indent:-9999px;
	background-repeat:no-repeat !important;
}

div.navigation.light a
{
	color:#000;
}

div.navigation.dark a
{
	color:#fff;
}

div.navigation.light a.first
{
	background-image:url(../images/arrow-up-black.png) !important;
}

div.navigation.dark a.first
{
	background-image:url(../images/arrow-up-white.png) !important;
}

div.navigation a.last
{
	margin-right:0;
}

div.navigation a.active
{
	margin-top:-5px;
	border-top-width:5px;
}
/*}}}*/

/*//// 		Headings						////////////////////////////////////////////////////////////////////////////////////////////*/
/*{{{*/
h1, h2, h3, h4, h5, h6
{
	font-family: 'Arvo', serif;
	text-align:center;
}

.center
{
	text-align:center;
}

h1
{
	font-size:43pt;
	color:#fafafa;
	font-weight:400;
	letter-spacing:2px;
	width:auto;
	display:inline-block;
	padding:15px 75px;
	margin-top:-100px;
	position:relative;
	top:-45px;
	background-color:#2B3741;
	text-transform:uppercase;
	text-shadow:1px 2px 1px #444;
	font-smooth:always;
	box-shadow: 
	#292929 1px 1px,
    #292929 2px 2px,
    #292929 3px 3px,
    #292929 4px 4px,
    #292929 5px 5px,
    #292929 6px 6px,
    #292929 7px 7px,
    #292929 8px 8px,
    #292929 9px 9px,
    #292929 10px 10px;
}

h1.dark
{
	box-shadow: 
	#000 1px 1px,
    #000 2px 2px,
    #000 3px 3px,
    #000 4px 4px,
    #000 5px 5px,
    #000 6px 6px,
    #000 7px 7px,
    #000 8px 8px,
    #000 9px 9px,
    #000 10px 10px;
}

.cursive
{
	font-family:'Yellowtail';
	color:#fff;
	margin-bottom:5px;
	display:inline-block;
	font-size:26pt;
}

h3
{
	font-size:23px;
	text-transform:uppercase;
	margin:30px 0 20px 0;
	text-align:left;
	letter-spacing:1px;
}

h4
{
	font-weight:300;
	font-family:'Source Sans Pro';
	font-size:20pt;
	text-align:left;
}
/*}}}*/

/*//// 		Font Weights					////////////////////////////////////////////////////////////////////////////////////////////*/
/*{{{*/
.w300
{
	font-weight:300;
}

.w400
{
	font-weight:400;
}

.w500
{
	font-weight:400;
}

.w600
{
	font-weight:600;
}

.w700
{
	font-weight:700;
}
/*}}}*/

/*//// 		All Panels						////////////////////////////////////////////////////////////////////////////////////////////*/
/*/*{{{*/
div.panel
{
	padding:6% 0 2% 0;
	width:100%;
	position:relative;
	text-align:center;
}

div.panel div.header
{
	position:relative;
	padding:25px 0;
	height:53px;
}

div.panel div.box
{
	/*
	min-width:960px;
	max-width:1200px;
	*/
	padding:50px;
	width:70%;
	position:relative;
	margin:0 auto;
	z-index:2;
	text-align:left;
}

div.box ul
{
	padding:0;
	margin:0;
	margin-left:20px;
}

div.box ul li
{
	list-style-type:square;
}

div.box ul li span
{
	color:#000;
}

a.button
{
	background-color: #20B6E4;
	display: inline-block;
	box-shadow: 
	#292929 1px 1px, 
	#292929 2px 2px, 
	#292929 3px 3px, 
	#292929 4px 4px, 
	#292929 5px 5px;
	padding:10px 20px;
	cursor:pointer;
	color:#fff;
	font-size:16pt;
	margin-left:15px;
}

a.button:hover
{
	background-color:#19ABD8;
}

a.button:active
{
	margin-top:2px;
	box-shadow: none;

}

/*/*}}}*/

/*//// 		Panel 1							////////////////////////////////////////////////////////////////////////////////////////////*/
/*{{{*/
div#panel1
{
	background: url(../images/panel1.png);
	background-repeat:no-repeat;
	background-size: cover;
	background-position: bottom center;
	height:100%;
	z-index:1;
	padding:0 !important;
}

div#panel1 div.resume-holder
{
	position:absolute;
	bottom:15%;
	width:100%;
}
/*}}}*/

/*//// 		Panel 2							////////////////////////////////////////////////////////////////////////////////////////////*/
/*{{{*/
div#panel2
{
	padding-top:7%;
}

div#panel2 div.box
{
	color:#f3f3f3;
	background-color:#14161A;
}

html.disable-effects div#panel2
{
	margin-top:0 !important;
}

html.disable-effects div#panel2 div.box
{
	margin-top:0 !important;
}

div#panel2 h1
{
	background-color:#20B6E4;
}

div#panel2 h4
{
	margin:0;
}

div#panel2 div.skills
{
	width:45%;
	float:left;
}

div#panel2 div.experience
{
	width:50%;
	float:left;
	line-height:25px;
	padding-left:5%;
}

div#panel2 div.experience a
{
	color:#20b5e4;
}

div#panel2 div.practices, div#panel2 div.otherskills
{
	float:left;
	width:45%;
}

div#panel2 div.practices
{
	width:45%;
	padding-left:5%;
}
/*}}}*/

/*//// 		Skills Progress Bars			////////////////////////////////////////////////////////////////////////////////////////////*/
/*{{{*/

div.bars
{
	width:100%;
	position:relative;
}

div.bars div.bar
{
	background-color:#ccc;
	padding:4px;
	margin-bottom:15px;
}

div.bars span
{
	margin-left:5px;
	color:#fff;
	font-weight:300;
	font-size:11pt;
	display:none;
}

div.bars div.inner
{
	padding:2px;
	background-color:#333;
	width:0;
	height:22px;
}

div.bars div.hidden
{
	display:none;
}

div.bar0 div.inner
{
	background-color:#166841;
}

div.bar1 div.inner
{
	background-color:#164968;
}

div.bar2 div.inner
{
	background-color:#46556D;
}

div.bar3 div.inner
{
	background-color:#603F6D;
}

div.bar4 div.inner
{
	background-color:#306674;
}

div.bar5 div.inner
{
	background-color:#6D4348;
}

div.bar6 div.inner
{
	background-color:#406D9B;
}

/*}}}*/
	
/*//// 		Panel 3							////////////////////////////////////////////////////////////////////////////////////////////*/
/*{{{*/
div#panel3
{
}

div#panel3 h1
{
	background-color:#70497F;
}

div#panel3 h3
{
	text-align:left;
	margin-top:40px;
}

div#panel3 h4
{
	margin:0;
}

div#panel3 div.box
{
	background-color:#fff;
}

div#panel3 div.applications
{
	width:48%;
	float:left;
}

div#panel3 div.websites
{
	width:48%;
	float:left;
	padding-left:4%;
}
/*}}}*/

/*//// 		Panel 4							////////////////////////////////////////////////////////////////////////////////////////////*/
/*{{{*/
div#panel4
{
	z-index:1;
}

div#panel4 h1
{
	background-color:#115C94;
}

div#panel4 h3
{
	text-align:left;
}

div#panel4 h4
{
	margin:0;
}

div#panel4 div.box
{
	width:75%;
}
/*}}}*/

/*//// 		Gallery							////////////////////////////////////////////////////////////////////////////////////////////*/
/*{{{*/
div.gallery
{
	position:relative;
	width:100%;
	height:100%;
	margin-top:-30px;
	text-align:center;
}

div.gallery div.holder
{
	display:inline-block;
	width:330px;
	margin:0 10px;
	margin-top:20px;
	vertical-align:top;
}

div.gallery div.desc
{
	text-align:left;
}

div.gallery div.desc a
{
	text-decoration:underline;
}

div.gallery div.image
{
	display:inline-block;
	width:100%;
	height:220px;
	overflow:hidden;
	position:relative;
	z-index:10;
	text-align:center;
	box-shadow: 
	#292929 1px 1px,
    #292929 2px 2px,
    #292929 3px 3px,
    #292929 4px 4px,
    #292929 5px 5px,
    #292929 6px 6px,
    #292929 7px 7px;
}

div.gallery div.image.long
{
	width:620px;
}

div.gallery div.image img.thumb
{
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	cursor:pointer;
}

div.gallery div.image img.magnifying-glass
{
	position:absolute;
	width:64px;
	height:64px;
	top:25%;
	left:50%;
	margin-left:-32px;
	z-index:3;
	display:none;
}

div.gallery div.image div.vcenter
{
	position:relative;
	z-index:1;
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

div.gallery div.image div.overlay
{
	position:absolute;
	height:270%;
	width:150%;
	background-color:#115C94;
	top:-260%;
	right:-140%;
	transform:rotate(-40deg);
	-moz-transform:rotate(-40deg);
	-webkit-transform:rotate(-40deg);
	-o-transform:rotate(-40deg);
	z-index:2;
}

div.gallery div.image div.label
{
	display:inline-block;
	color:#fff;
	position:relative;
	z-index:3;
	font-size:20pt;
	font-weight:300;
	top:25px;
}

div.gallery div.image div.label span
{
	display:none;
}

div.gallery div.image div.hover-overlay
{	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:4;
	cursor:pointer;
	background-image:url(../images/trans-pixel.png);
}

div.exit-fullscreen
{
	z-index:1001;
    position:fixed;
	display:none;
	padding:15px;
	background-color:#000;
	opacity:.85;
	font-weight:300;
	font-size:25pt;
	color:#fff;
	width:400px;
	height:50px;
	text-align:center;
	left:50%;
	top:50%;
	margin-top:-25px;
	margin-left:-200px;
	cursor:pointer;
}


/*}}}*/

/*//// 		Panel 5							////////////////////////////////////////////////////////////////////////////////////////////*/
/*{{{*/
div#panel5
{
	background-color:#20232B;
	min-height:100%;
	z-index:0;
}

div#panel5 h1
{
	background-color:#884A51;
	margin-bottom:-25px;
}


div#panel5 div.box
{
	width:60%;
}


div#panel5 h4
{
	color:#fff;
	margin:10px 0;
}

div#panel5 .cursive
{
	font-size:30pt;
	margin-left:15px;
}

div#panel5 form
{
	margin:0 auto;
	background-color:#0e0e0e;
	padding:20px;
	padding-top:10px;
}

div#panel5 form p
{
	line-height:40px;
}

div#panel5 form label
{
	text-transform:uppercase;
	font-family:arvo;
	font-size:15pt;
	font-weight:700;
	color:#fff;
}

div#panel5 form input, div#panel5 form textarea
{
	font-family: 'Source Sans Pro';
	font-size:13pt;
	font-weight:300;
	padding:14px;
	background-color:#1E1E1F;
	border:0;
	width:97%;
	color:#fff;
	-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
	-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
	-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
	-o-transition: border linear 0.2s, box-shadow linear 0.2s;
	transition: border linear 0.2s, box-shadow linear 0.2s;
}

div#panel5 form input[type!="submit"]:focus, div#panel5 form textarea:focus
{
	padding:14px;
	border-color: #f3f3f3 !important;
	outline: 0 !important;
	outline: thin dotted 9 !important;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(230, 230, 230, 0.6) !important;
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(230, 230, 230, 0.6) !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 7px rgba(230, 230, 230, 0.6) !important;

}

div#panel5 form textarea
{
	resize:none;
	height:100px;
	overflow:hidden;
}

div#panel5 form a.button.submit
{
	background-color: #884A51;
	display: inline-block;
	box-shadow: #060606 1px 1px, #060606 2px 2px, #060606 3px 3px, #060606 4px 4px, #060606 5px 5px;
	padding:10px 20px;
	cursor:pointer;
	color:#fff;
	font-size:16pt;
	position:relative;
	margin-left:0;
}

div#panel5 form a.button.submit:hover
{
	background-color:#6D3A40;
}

div#panel5 form a.button.submit:active
{
	margin-top:0;
	top:2px;
}

div.message
{
	display:none;
	padding:8px 15px;
	margin:15px 0;
	font-size: 13pt;
	line-height: 17pt;
	font-weight: 300;
	color:#000;
}

div.message.success
{
	background-color:#8DDDB7;
	border:4px solid #559676;
}

div.message.error
{
	background-color: #DD9FA9;
	border:4px solid #745151;
}
/*}}}*/