html
{
	height:100%;
	overflow:auto;
}

body
{
	margin:0px;
	font-family: 'Gudea', sans serif;
	color:#000;
	
}

#navigation
{
	text-align:center;
}

#header
{
	color:#fff;
	text-align:center;
	padding-bottom:260px;
	padding-top:240px;
	background:url('images/bokeh_r.jpg') 50% 0 no-repeat fixed;
	position:relative;
	top:0px;
	
}

#menu
{
	position:fixed;
	width:100%;
	margin-top:0px;
	background-color:#111;
	z-index:999;
}

#menu_ul { display:table; width:100%; margin:0px; padding:7px 0px 6px 0px; text-transform:uppercase; font-weight:bold; font-size:0.9em;  }
#menu_ul li { display:table-cell; list-style-type:none; display:inline-block; padding:0px 68px 0px 68px; }
#menu_ul li a { display:block; color:#fff; text-decoration:none; opacity:0.4; }


.black
{
	background-color:#fff;
}



h1
{
	font-size:6.7em;
	margin-bottom:0px;
	margin-top:0px;
	position:relative;
	top:0px;
}

h2
{
	font-size:1.8em;
	margin-top:0px;
	margin-bottom:10px;
	padding-bottom:6px;
	border-bottom:1px solid #fff;
	margin:auto;
	width:540px;
	position:relative;
	top:0px;
}

.parallax-text
{
	display:inline-block;
	position:relative;
	top:0px;
}

h3
{
	font-size:1.8em;
	margin-top:0.7em;
	margin-bottom:0.7em;

}

h4
{
	font-size:2.2em;
	margin-top:0.2em;
	margin-bottom:0.7em;
	text-align:left;

}

.underlines { border-bottom:2px solid #000; }

h5
{
	margin-top:0px;
	margin-bottom:15px;
	font-size:1.1em;
}

h6
{
	margin-top:0px;
	margin-bottom:8px;
	font-size:1.2em;
}

hr { border-top:1px solid #ddd; border-bottom:0px; width:100%; }


#section-introduction
{
	background-color:#fff;
	padding:10px 0px;
	border-bottom:1px solid #f6ff00;
	height:640px;
}

#intro
{
	float:left;
	width:100%;
	margin-right:15px;
}

#intro-left
{
	float:left;
	width:650px;
	margin-right:15px;
}

#section-portfolio
{
	background-color:#fff;
	padding:10px 0px;
	border-bottom:1px solid #f6ff00;
	height:730px;
	clear:both;
}

#section-portfolio a, #section-skills a, #section-themachinestarts a
{
	color:#000;
	text-decoration:none;
	-webkit-transition:color 200ms ease-in;
-moz-transition:color 200ms ease-in;
-o-transition:color 200ms ease-in;
transition:color 200ms ease-in;
}

#section-portfolio a:hover, #section-skills a:hover, #section-themachinestarts a:hover
{
	color:#f5075b;
	-webkit-transition:color 200ms ease-in;
-moz-transition:color 200ms ease-in;
-o-transition:color 200ms ease-in;
transition:color 200ms ease-in;
}





#port1 { width:320px; float:left; margin-right:40px; margin-top:50px; }
#port2 { width:320px; float:right; margin-top:140px; }

#section-skills
{
	background-color:#fff;
	height:290px;
	padding-top:10px;
	border-bottom:1px solid #f6ff00;
}

#skills-left
{
	float:left;
	width:655px;
	margin-right:15px;
	margin-top:20px;
}


#skills-left .simplebullets { float:left; width:300px; margin:10px 0px 0px 25px; padding:0px; }

#skills-chart { display:table; list-style-type:none; width:300px; margin:90px 0px 0px 0px; padding:0px; }

#skills-chart li {  width:100%; background-color:#dbf5fb; border-bottom:8px solid #fff; color:#fff; font-weight:bold; padding:0px; }

#skills-chart .filled { display:inline-block; background-color:#06a6ce; padding:4px 0px 0px 10px; height:28px; margin:0px; border-right:5px solid #fff; }

#skills-chart .msoffice .filled { width:84%; }
#skills-chart .photoshop .filled { width:75%; }
#skills-chart .socialmedia .filled { width:70%; }
#skills-chart .indesign .filled { width:69%; }
#skills-chart .html5 .filled { width:65%; }
#skills-chart .php .filled { width:62%; }
#skills-chart .javascript .filled { width:58%; }
#skills-chart .audioed .filled { width:51%; }

#section-contact
{
	color:#fff;
	clear:both;
	height:430px;
	background:url('images/bokeh_footer.jpg') no-repeat;
	background-position:left bottom;
	background-size:2200px;
	position:relative;
	top:0px;
	padding-top:10px;
}

#contact
{
	width:540px;
	float:right;
	margin-top:35px;
}

#contact-exp
{
	float:left;
	margin-top:40px;
	width:380px;
}

#contact-exp a { color:#fff; }

#section-themachinestarts
{
	background-color:#fff;
	padding:10px 0px 0px 0px;
	height:700px;
}


#iphone
{
	padding-top:20px;
}

#iphone-img
{
	padding:0px 0px 40px 0px;
	float:left;
	margin-right:0px;
	z-index:1;
	position:relative;
	
}

#tms-scroll
{
	z-index:99;
	position:absolute;
	margin-left:27px;
	margin-top:100px;
	width:248px;
	height:399px;
	background:url('images/tms-scroll.png');
	background-repeat:no-repeat;
	background-position:0% 0%;

}

#tms-text
{
	width:640px;
	float:right;
	
}

#tweet
{
	width:80%;
	margin:auto;

}


#section-footer
{
	clear:both;
	background:url('images/bg-sq-black-trans-45.png');
	height:80px;
	position:absolute;
	width:100%;
	bottom:0px;
	font-size:0.9em;

}

#section-footer a { color:#fff; }

#section-contact h3
{
	margin-top:0em;
	margin-bottom:0em;
}

#footer-content
{
	
	padding-top:25px;
}

#footer-content p { margin-top:0px; }

#footer-icons
{
	
	float:right;
}

.p2
{
	margin-top:40px;
	-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;

}

.p3-first-char {
  color: #000;
  float: left;
  line-height:38px;
  font-size: 40px;
  padding-top: 2px;
  padding-right: 1px;
  padding-left: 0px;
  padding-bottom: 0px;
}

.p3
{
	-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

	width:100%;

}

.underline { text-decoration:underline !important; }

#scoops { padding:0px; margin:0px; }
#scoops li { list-style-type:none; }

.inner_wrap
{

	width:1000px;
	margin:auto;
}


.credit { font-style:italic; font-size:0.8em; text-align:center; color:#888; }

#col_wrap
{
	margin-top:30px;
	padding-top:0px;
	width:100%;
	float:right;	
	text-align:center; 
}

#col_wrap img { margin-top:10px; }

.cols
{
	margin-bottom:120px;
	text-align:center;
}



.headlines
{
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    font-size:1em;

}


.headlines2
{
	float:right;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    font-size:1em;
    margin: 10px;
	width:620px;
	height:380px;

}

.headline_wrap
{
    width: 300px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
	text-align:left;
	font-size:100%;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}



.label 
{
	background-color:#f6ff00;
	padding:10px 15px 10px 15px;
	color:#000;
	font-weight:bold;
	font-size:1em;
	font-family: 'Gudea', sans serif;
	position:relative;
	top:-20px;
	border-radius:5px;

}

#special 
{
	width:300px;
	height:200px;
	float:left;
}

.center { text-align:center; }

.form-col
{
	float:left;
	width:270px;

}

form { padding:0px; margin:0px; }

.form-col input { width:18em; height:1.7em; background:url('images/bg-sq-black-trans.png'); color:#aaa; border:1px solid #777; border-radius:4px; }

.form-col textarea { width:18em; height:6.5em; background:url('images/bg-sq-black-trans.png'); color:#aaa; border:1px solid #777; border-radius:4px; font-family: 'Gudea', sans serif; }

.send { display:block; position:relative; top:10px; padding:6px 0px; width:10em;  background:#111; border:1px solid #777; border-radius:4px; color:#888; font-family: 'Gudea', sans serif; font-weight:bold; font-size:0.9em;
-webkit-transition:color 200ms ease-in;
-moz-transition:color 200ms ease-in;
-o-transition:color 200ms ease-in;
transition:color 200ms ease-in; }
.send:hover { color:#fff; 
-webkit-transition:color 200ms ease-in;
-moz-transition:color 200ms ease-in;
-o-transition:color 200ms ease-in;
transition:color 200ms ease-in; }

.form-col p { margin-bottom:0.1em; }

#result { width:200px;  margin:auto; border-radius:10px; border:1px solid #777; padding:15px; margin-top:60px; }
#result a { color:#fff; }

.fadeIn {  display:none; }


/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/

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

body { font-size:95%; }

#menu_ul li { padding:0% 6%; }

#header { background-image:url('images/bokeh_r_smaller.jpg'); padding-top:170px; padding-bottom:170px; }

#section-introduction { height:auto; padding-bottom:30px; }
#section-introduction:before, #section-introduction:after { content:""; display:table; }
#section-introduction:after { clear:both; }

#section-portfolio { height:auto; }

#section-skills { height:auto; }
#section-skills:before, #section-skills:after { content:""; display:table; }
#section-skills:after { clear:both; }

#section-themachinestarts { height:auto; }

#section-contact { height:auto; padding-bottom:130px; }
#section-contact:before, #section-contact:after { content:""; display:table; }
#section-contact:after { clear:both; }

.inner_wrap { width:90%; padding:0% 3%; }

h1 { font-size:6.4em; }

h2 { font-size:2.5em; width:690px; }

h3 { font-size:1.5em; }

.p2 { width:100%; }


.credit { margin-top:0em; margin-bottom:2em; }

#intro-left, #intro { float:none; width:100%; }
#col_wrap { float:none; margin:auto; width:30%;}
#col_wrap img { margin-top:10px; margin-bottom:20px; width:100%; }

.headline_wrap { width:32%; }

#skills-left { width:65%; margin-bottom:60px; }

#skills-left .simplebullets { width:45%; margin-left:5%; }

#skills-chart { width:30%; margin-top:70px; }

#section-skills { height:auto; padding-bottom:30px; }
#section-skills img { display:none; }

#tms-text { width:65%; margin-bottom:30px; }

#iphone-img { width:30%; }
#iphone-img img { width:100%; }
#tms-scroll { width:100%; display:none; }

#contact-exp { float:none; margin:auto; width:60%; }

#contact { float:none; margin:auto; width:60%; }
.form-col { width:46%; padding:0% 2%; }
#contact input { width:100%; }
#contact textarea { width:100%; }
.send { width:40% !important; margin:auto; }

#footer-content { text-align:center; }

.p2 { margin-top:20px;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2; }

.p3 { -moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2; }

}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/

/* MENU FIX */

@media screen and (max-width:850px), only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {

h1 { font-size:5.3em; }

h2 { font-size:1.7em; width:470px; }

#menu_ul li { padding:0% 5%; }

.headline_wrap { width:98%; margin:auto; display:block; }

}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:700px), only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {

h1 { font-size:4.3em; }

#menu_ul li { font-size:1em; padding:0% 4%; }

#header { padding-top:150px; padding-bottom:150px; }


#intro-left, #intro { width:100%; float:none; }

#col_wrap { display:none; }

.p2 { -moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1; }

.p3:first-child:first-letter {
  color: #000;
  float: none;
  font-size: 100%;
  line-height: 100%;
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;
}

.p3 { -moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1; }


#skills-left { float:none; width:100%; }
#skills-left .simplebullets { margin-bottom:50px; }

#skills-chart { display:none; }

#iphone-img { display:none; }
#tms-text { width:100%; }

#contact-exp { width:100%; }
#contact { width:100%; }

}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/

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

body { font-size:85%; }

#menu { position:relative; }
#menu_ul { padding:0px; font-size:1em; }
#menu_ul li { display:block; border-bottom:1px solid #222; padding:5px 0px; }

#header { padding:80px 0px; }

.headline_wrap { width:100%; }

.label { padding:5px 10px; }

h1 { font-size:3.3em; }

h2 { width:260px; font-size:1em; }


#skills-left .simplebullets { width:90%; float:none; }

}