/* Reset */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, img, ins, kbd, q, samp,
small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, 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;
}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ded6c3; margin: 1.3em 0; padding: 0; }
input, select { vertical-align: middle; }
body { font:16px/25px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif; *font-size:small; color:#8b8f92; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
a, a:hover, a:active { outline: none; }
sub, sup { font-size: 50%; line-height: 0; position: relative; }
sup { top: -0.9em; }
aside sup { font-size: 100%; top: -0.1em; margin-right: 2px;}
sub { bottom: -0.25em; }
pre {
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}
textarea { overflow: auto; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
   border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
a:link { -webkit-tap-highlight-color: rgba(0,0,0,0); }
button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }
select, input, textarea { color: #333; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }
.r { display: block; max-width: 100%; }

/* Layout */

html { background: #fff; }
html#home { background: #202223 url(../img/bg-loop.png); }
body { background: url(../img/body-bg.jpg) no-repeat 50% 0; }
body#work { background: url(../img/work-detail-bg.jpg) no-repeat 50% 0; }
body#work.open { background: url(../img/work-detail-open-bg.jpg) no-repeat 50% 0; }
body#office { background: url(../img/office-hours-bg.jpg) no-repeat 50% 0; }
body#gray { background: url(../img/office-bg.jpg) no-repeat 50% 0; }

.container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

section {
	max-width: 940px;
	margin: 0 auto;
	overflow: hidden;
}

.half {
	float: left;
	width: 50%;
}

.half.first {
	width: 45%;
	padding: 0 5% 0 0;
}

.third {
	position: relative;
	float: right;
	width: 36%;
}

.two-thirds { margin-right: 42%; }

@media only screen and (max-width: 768px) {
	.half,
	.half.first {
		float: none;
		width: 100%;
		padding: 0;
	}
	.third {
		float: none;
		width: 95%;
	}
	.two-thirds { margin: 0; }
}

/* Typography */

h2 {
	font: 300 72px/72px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #ffcc00;
	letter-spacing: -2px;
	margin: 0 0 25px;
}

h3 {
	font: 400 22px/26px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #575a5c;
	margin: 0 0 10px;
}

h4 {
	font: 600 14px/21px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #575a5c;
	margin: 0 0 10px;
	text-transform: uppercase;
}

p {
	font: 300 16px/26px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	margin: 0 0 40px;
	color: #8b8f92;
}

p strong {
	font-weight: 600;
	color: #575a5c;
}

p a {
	font-weight: 600;
	color: #00ccff;
	text-decoration: none;
}

.btn {
	display: inline-block;
	height: 43px;
	padding: 0 20px;
	font: 300 16px/43px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	background: #00ccff;
}

.btn:hover { background: #ffcc00; }

.btn.soon, .btn.soon:hover { background: #999; }

@media only screen and (max-width: 480px) {
	h2 { font: 300 40px/48px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif; }
}

/* Nav */

nav {
	position: relative;
	height: 180px;
	max-width: 1160px;
	padding: 0 20px 0 0;
	text-align: right;
	margin: 0 auto;
}

nav a {
	margin: 0 0 0 50px;
	font: 300 20px/180px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #fff;
	text-decoration: none;
	-webkit-transition-property: color;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: linear;
	-moz-transition-property: color;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: linear;
}

nav a:hover { color: #ffcc00; }

#nav-twitter,
#nav-github {
	display: inline-block;
	float: right;
	font-size: 16px;
	margin: 3px 0 0;
}

#nav-twitter { margin-left: 70px; }
#nav-github { margin-left: 15px; }

#logo a {
	position: absolute;
	top: 70px;
	left: 20px;
	display: block;
	width: 197px;
	height: 38px;
	margin: 0;
	text-align: left;
	text-indent: -9999em;
	background: url(../img/bold.png) no-repeat top left;
}
@media only screen and (max-width: 1024px) {
	#logo a { left: 50px; }
	nav { padding-right: 50px; }
}

@media only screen and (max-width: 767px) {
	nav {
		padding: 40px 0 0 0;
		height: 140px;
	}
	#logo a {
		top: 40px;
		left: 50%;
		margin-left: -98px;
	}
	nav { text-align: center; }
	nav a { margin: 0 0 0 20px; }
	#nav-work { margin: 0; }
	#nav-github,
	#nav-twitter { display: none; }
}

@media only screen and (max-width: 480px) {
	#nav-twitter, #nav-github { display: none; }
}

@media only screen and (-webkit-min-device-pixel-ratio : 1.5) {
    #logo a {
        background: url(../img/bold@2x.png) no-repeat top left;
        background-size: contain;
    }
}

/* Homepage Rules */

h1#home {
	max-width: 940px;
	margin: 0 auto;
	font: 100 72px/78px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #fff;
	text-align: center;
	padding: 120px;
	letter-spacing: -2px;
}

h1#home span { color: #ffcc00; }
h1#home span#d { color: #00ccff; }

#home-work {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 20px;
	overflow: hidden;
	z-index: 1;
}

#work-slider { margin-top: -1100px; }

.col {
	float: left;
	width: 31.2%;
	margin-left: 3.2%;
}

.col:nth-of-type(3n+1) { margin-left: 0 !important; }

.col img {
	display: block;
	max-width: 100%;
	margin-bottom: 40px;
	box-shadow: 0 0 10px rgba(0,0,0,.24);
}

.col img.no-bs { box-shadow: none; }

@media only screen and (max-width: 1024px) {
	#work-slider { margin-top: -800px; }
}

@media only screen and (max-width: 800px) {
	h1#home { padding: 80px; }
	#work-slider { margin-top: -650px; }
}


@media only screen and (max-width: 767px) {
	h1#home {
		font: 100 42px/48px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
		padding: 60px 120px;
	}
	.col {
		float: none;
		width: 100%;
		margin: 0;
	}
	.col img { margin: 0 auto 40px; }
}
@media only screen and (max-width: 480px) {
	h1#home { padding: 60px; }
	.col { margin: 0; }
	#work-slider { margin-top: -2500px; }
}

#more-bar {
	position: relative;
	display: block;
	width: 100%;
	height: 70px;
	padding: 127px 0 0;
	text-align: center;
	background: url(../img/more-bar-bg.png) repeat-x top left;
	z-index: 2;
	-webkit-backface-visibility: hidden;
	-webkit-transform:translate3d(0,0,0);
}

#more-bar img {
	-webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: .2s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: .2s;
    transform: translate3d(0,0,0);
}

#more-bar.done img { display: none; }

#more-bar.clicked img {
	-webkit-animation-name: rotate;
    -webkit-animation-duration: .2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: .2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(180deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(180deg);}
}

/* Homepage Content Rules */

#home-content {
	position: relative;
	background: #fff;
	z-index: 2;
	-webkit-backface-visibility: hidden;
	-webkit-transform:translate3d(0,0,0);
}

#home-content .container { padding: 135px 20px; }

.clients li {
	display: inline-block;
	width: 24%;
	font-weight: 300;
	font-size: 14px;
}

.clients li a {
	color: #00ccff;
	text-decoration: none;
}

.clients li img {
	display: block;
	margin: 0 auto;
}

hr {
	overflow: hidden;
	clear: left;
	margin: 0;
	border: 0;
	height: 11px;
	background: url(../img/divider.png) repeat-x top left;
}

#client-logos { margin: 0 0 30px; }



@media only screen and (max-width: 1024px) {
	#go-team-go { background-size: 100%; }
	.rdio { display: none; }
	#garrett { left: 10%; top: -30px; }
	#noah { left: 20%; }
	#sam { left: 60%; top: -30px;}
	#charlie { left: 70%; top: 150px; }
	#garretts-line {
		top: 55px;
		left: 50px;
		-webkit-transform:rotate(325deg);
		-moz-transform:rotate(325deg);
		-ms-transform:rotate(325deg);
	}

	#noahs-line {
		top: 195px;
		left: 95px;
		-webkit-transform:rotate(10deg);
		-moz-transform:rotate(10deg);
		-ms-transform:rotate(10deg);
	}

	#sams-line {
		top: 100px;
		left: 515px;
		-webkit-transform:rotate(315deg);
		-moz-transform:rotate(315deg);
		-ms-transform:rotate(315deg);
	}

	#charlies-line {
		top: 170px;
		left: 730px;
		-webkit-transform:rotate(140deg);
		-moz-transform:rotate(140deg);
		-ms-transform:rotate(140deg);
	}
	#sam h3 {
		position: relative;
		background: #fff;
		z-index: 1;
	}
}

@media only screen and (max-width: 1023px) {
	ul.clients li { width: 32%; }
}

@media only screen and (max-width: 480px) {
	ul.clients li { width: 49%; }
	#home-content .container { padding: 60px 20px; }
	#client-logos { display: none; }
}

/* Homepage Form Rules */

#hello-bold input[type=text] {
	display: block;
	width: 97%;
	height: 43px;
	margin: 0 0 15px;
	padding-left: 10px;
	font-size: 16px;
	font-family: 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	border-top: 1px solid #eee;
	border-left: 1px solid #efefef;
	border-right: 1px solid #efefef;
	border-bottom: 1px solid #f7f7f7;
	border-radius: 4px;
	-webkit-box-shadow:inset 0 1px 1px #efefef;
	-moz-box-shadow:inset 0 0 10px #000;
	box-shadow:inset 0 1px 1px #efefef;
	background: #fcfcfc;
}

#hello-bold textarea {
	display: block;
	width: 95%;
	height: 175px;
	margin: 0 0 15px;
	padding: 10px;
	border-top: 1px solid #eee;
	border-left: 1px solid #efefef;
	border-right: 1px solid #efefef;
	border-bottom: 1px solid #f7f7f7;
	border-radius: 4px;
	color: #575a5c;
	font-size: 16px;
	font-family: 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	resize: none;
	-webkit-box-shadow:inset 0 1px 1px #efefef;
	-moz-box-shadow:inset 0 0 10px #000;
	box-shadow:inset 0 1px 1px #efefef;
	background: #fcfcfc;
}

#hello-bold input[type=text]::-webkit-input-placeholder { color: #575a5c; }
#hello-bold input[type=text]::-moz-placeholder { color: #575a5c; }
#hello-bold input[type=text]:-ms-input-placeholder { color: #575a5c; }
#hello-bold textarea::-webkit-input-placeholder { color: #575a5c; }
#hello-bold textarea::-moz-placeholder { color: #575a5c; }
#hello-bold textarea:-ms-input-placeholder { color: #575a5c; }

#hello-bold input[type=submit] {
	border: none;
	padding-left: 40px;
	background: #00ccff url(../img/ico-airplane.png) no-repeat 14px 14px;
}

#hello-bold input[type=submit]:hover { background: #ffcc00 url(../img/ico-airplane.png) no-repeat 14px 14px; }

@media only screen and (-webkit-min-device-pixel-ratio : 1.5) {
	#hello-bold input[type=submit] {
		background: #00ccff url(../img/ico-airplane@2x.png) no-repeat 14px 14px;
		background-size: 18px 14px;
	}

	#hello-bold input[type=submit]:hover {
		background: #00b8e5 url(../img/ico-airplane@2x.png) no-repeat 14px 14px;
		background-size: 18px 14px;
	}
}

@media only screen and (max-width: 480px) {
	#hello-bold input[type=text] { width: 258px; }
	#hello-bold textarea { width: 258px; }
}

#contact-info {
	margin: 160px 0 0;
	padding: 60px 0 0 0;
	background: url(../img/bold-filled.png) no-repeat;
}

@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (max-width: 768px) {
	#contact-info {
		background: url(../img/bold-filled@2x.png) no-repeat;
		background-size: contain;
	}
}

#contact-info img {
	display: block;
	margin: 0 0 30px;
}

#contact-info p {
	font: 400 16px/20px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #969696;
}

/* Client Work */

#client section {
	position: relative;
	padding-bottom: 80px;
	z-index: 4;
}

#project-nav {
	position: relative;
	height: 29px;
	padding: 56px 190px 0;
	margin-bottom: 40px;
	max-width: 760px;
	text-align: center;
}

body.open #project-nav { margin-bottom: 22px; }

#project-nav a {
	color: #5c6063;
	font: 600 16px/18px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	-webkit-transition-property: color;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: linear;
	-moz-transition-property: color;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: linear;
}

#slider {
	position: absolute;
	width: 3380px; /* 260 * 13 */
	left: 50%;
}

#project-nav a:hover {
	color: #aaa;
	text-shadow: 0;
}

#prev-project {
	position: absolute;
	top: 60px;
	left: 100px;
	padding-left: 20px;
	background: url(../img/ico-left-arrow.png) no-repeat 0px 1px ;
}

#next-project {
	position: absolute;
	top: 60px;
	right: 100px;
	padding-right: 20px;
	background: url(../img/ico-right-arrow.png) no-repeat 100% 1px ;
}

#all-projects {
	padding-left: 20px;
	background: url(../img/ico-grid.png) no-repeat 0px 4px;
}

#project-list {
	position: relative;
	margin: 0 0 40px;
	padding: 0px 0 0 5px;
	height: 275px;
	overflow: hidden;
}

#project-carousel {
	width: 100%;
	overflow: hidden;
}

#projects {
	overflow: hidden;
	height: 223px;
}

#project-list ul {
	position: absolute;
	padding: 18px 0 0;
	margin: 0 0 0 -50%;
	width: 3380px;
	overflow: hidden;
	height: 257px;
}

#project-list ul li {
	position: relative;
	width: 260px;
	padding: 34px 0 0;
	display: inline;
	float: left;
	text-align: center;
}

#project-list ul li a {
	font: 400 16px/21px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	margin: 0 0 8px;
	color: #73777d;
	text-decoration: none;
	display: block;
	text-align: center;
}

#project-list ul li img {
	display: block;
	margin: 5px auto 0;
	opacity: .6;
	-webkit-transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-ms-transition: opacity .3s ease-in-out;
	transition: opacity .3s ease-in-out;
}

#project-list ul li.active a { color: #fff; }
#project-list ul li.active img,
#project-list ul li img:hover { opacity: 1; }

#slide-left,
#slide-right {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 289px;
	height: 275px;
	background: url(../img/project-nav-prev.png) no-repeat top left;
	z-index: 9999;
}

#slide-left {
	left: auto;
	right: 0;
	background: url(../img/project-nav-next.png) no-repeat top right;
}

#client-hero { position: relative; }
#client-hero img {
	position: relative;
	margin: 0 auto 40px;
	z-index: 3;
}

#white-out {
	position: absolute;
	height: 467px;
	left: 0;
	right: 0;
	top: 50%;
	background: #fff;
	z-index: 1;
}

#client-details {
	padding-top: 80px;
	padding-bottom: 80px;
}

#visit-site { margin: 70px 0 0; }
#circles { margin: 0 0 70px; }
#circles li {
	margin: 0 0 6px;
	font: 600 16px/26px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #575a5c;
	padding: 0 0 0 25px;
}

.ia { background: url(../img/ico-green-circle.png) no-repeat 0% 50%; }
.html { background: url(../img/ico-orange-circle.png) no-repeat 0% 50%; }
.rwd { background: url(../img/ico-blue-circle.png) no-repeat 0% 50%; }
.ee { background: url(../img/ico-purple-circle.png) no-repeat 0% 50%; }
.design { background: url(../img/ico-pink-circle.png) no-repeat 0% 50%; }
.laravel { background: url(../img/ico-black-circle.png) no-repeat 0% 50%; }

.quote em {
	float: left;
	margin: 15px 6px -5px 0;
	color: #ffcc00;
	font: 600 56px/16px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
}

#nice-client-things { margin-bottom: 80px; }

.two-thirds img.r { margin-bottom: 50px; }

.contact {
	margin-top: 80px;
	text-align: center;
}

.contact h3 {

	font: 400 19px/25px 'proxima-nova';
	color: #575a5c;
}

.contact a.btn {
	margin-left: 50px;
	text-transform: none;
}

video {
  width: 100%    !important;
  height: auto   !important;
}

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

	#project-nav {
		width: 100%;
		padding: 56px 0 0;
	}
	#prev-project { left: 20px; }
	#next-project { right: 20px; }
	.third img.r { display: none; }
	#circles {
		float: left;
		margin: 0 50px 0 0;
	}
	#visit-site { margin: 40px 0 20px; }
}


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

	#prev-project,
	#next-project,
	#slide-left,
	#slide-right { display: none; }
	#next-project { right: -9999em; }
	#prev-project { left: -9999em; }
	#circles { float: none; margin: 0; }
	#visit-site { margin: 70px 0; }
	.contact a.btn {
		display: block;
		width: 80px;
		margin: 20px auto 0;
	}

}

/* Office Hours */

#office-hours { height: 867px; }
#office-hours-details { margin: 367px 0 0 600px; }
#office-hours h1 { text-indent: -9999em; }
#office-hours h2 {
	font: 400 22px/26px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	margin: 0 0 55px;
	letter-spacing: 0;
	color: #575a5c;
}

#office-hours p {
	font: 400 16px/26px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #575a5c;
}

.btn-listen {
	display: inline-block;
	height: 43px;
	padding: 0 17px 0 43px;
	font: 400 16px/43px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #fff;
	text-decoration: none;
	border-radius: 3px;
	background: #575a5c url(../img/ico-play.png) no-repeat 17px 15px;
	-webkit-transition-property: background;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: linear;
	-moz-transition-property: background;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: linear;
	-webkit-backface-visibility: hidden;
}

.btn-listen:hover { background: #444 url(../img/ico-play.png) no-repeat 17px 15px; }

.btn-subscribe {
	display: inline-block;
	height: 39px;
	margin: 0 0 0 20px;
	padding: 0 17px 0 43px;
	font: 400 16px/39px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #575a5c;
	text-decoration: none;
	border: 2px solid #575a5c;
	border-radius: 3px;
	background: url(../img/ico-music.png) no-repeat 17px 10px;
	-webkit-transition-property: border;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: linear;
	-moz-transition-property: border;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: linear;
	-webkit-backface-visibility: hidden;
}

.btn-subscribe:hover { border-color: #ccc }

@media only screen and (max-width: 1024px) {
	#office-hours-details { margin: 367px 0 0 500px; }
}

@media only screen and (max-width: 768px) {
	#office-hours { height: auto; }
	#office-hours h1 {
		width: auto;
		height: 90px;
		margin: 70px auto 0;
		background: url(../img/office-hours-text.png) no-repeat top left;
		background-size: contain;
	}
	#office-hours-details { margin: 60px auto; }
	body#office { background: url(../img/office-bg.jpg) no-repeat 50% 0; }
}

@media only screen and (max-width: 480px) {
	#office-hours h1 {
		width: auto;
		height: 50px;
		margin: 70px auto 0;
		background: url(../img/office-hours-text.png) no-repeat top left;
		background-size: contain;
	}
	.btn-subscribe { margin: 20px 0 0; }
}

/* Footer */

footer {
	position: relative;
	height: 80px;
	padding: 65px 0 0;
	background: url(../img/footer-bg.png) repeat-x top left;
	z-index: 5;
}

footer span {
	float: right;
	font: 100 13px/13px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #bdc2c5;
}

footer a {
	color: #575a5c;
	text-decoration: none;
}

footer a.ss-icon {
	float: left;
	margin: 0 15px 0 0;
}

/* Blog */

.blog-post {
	position: relative;
	margin-bottom: 50px;
}

.blog-author {
	position: absolute;
	top: 0;
	left: 0;
	width: 220px;
}

.blog-author h5 {
	font: 300 13px/17px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #8b8f92;
}
.blog-author a {
	font: 600 13px/17px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #00ccff;
	text-decoration: none;
}

.post {
	margin: 0 0 0 23%;
}

.post a { color: #00ccff;}
.post img {
	display: block;
	max-width: 100%;
}

.post h1 {
	font: 300 72px/72px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	color: #ffcc00;
	letter-spacing: -2px;
	margin: 0 0 25px;
}

.post ul, .post ol {
	margin: 0 0 40px;
}

.post ul li, .post ol li {
	font-size: 16px;
	line-height: 26px;
	padding: 0 0 0 17px;
	margin: 0 0 20px;
	background: url(../img/blog-bullet.png) no-repeat 0px 8px;
}

.post blockquote {
	margin: 0 0 0 5%;
}

.post blockquote p {
	color: #999;
	font: 300 20px/31px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
}

.post blockquote cite {
	display: block;
	margin: 15px 0 0;
	font-style: normal !important;
}

@media only screen and (max-width: 767px) {
	.blog-author {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		margin: 50px 0 0;
		overflow: hidden;
	}

	.blog-author img {
		float: left;
		margin: 0 20px 0 0;
	}

	.blog-author h3 { padding: 10px 0 0; }
	.post { margin: 0; }
	.post h1 {
		font: 300 42px/52px 'proxima-nova', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	}
}

/* Prism Highlighter */

/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;


	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0 40px;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f8f8f8;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.builtin {
	color: #07a;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #a67f59;
	background: hsla(0,0%,100%,.5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}


.token.regex,
.token.important {
	color: #e90;
}

.token.important {
	font-weight: bold;
}

.token.entity {
	cursor: help;
}

pre.line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre.line-numbers > code {
	position: relative;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #999;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

	.line-numbers-rows > span {
		pointer-events: none;
		display: block;
		counter-increment: linenumber;
	}

		.line-numbers-rows > span:before {
			content: counter(linenumber);
			color: #999;
			display: block;
			padding-right: 0.8em;
			text-align: right;
		}