/* @override http://johnmartz.com/css/pluto/styles.css */

/* @override http://johnmartz.com/css/pluto/styles.css */





::selection {
	color: white;
	background: #f63 ;
}




hr {
	border-color: silver;
}

body.blog .container, body.rnd .container {
	max-width: 970px;
}

body {
	background-color: #e9e9e9;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

body.white {
	background-color: white;
}

body.white .section_top {
	background-color: #e9e9e9;
}


.section_bottom {
	padding-bottom: 1em;
}

.section-heading a {
	color: black;
}

.section-heading a:hover {
	color: silver;
}

.blognav a:hover {
	color: silver;
}


h1, h2, h3, h4, h5 {
	font-family: "brandon-grotesque";
	font-weight: bold;
	text-transform: uppercase;
	color: black;
}

h2.section-heading {
	margin-top: 0;
}

.content h2 + p {
	padding-top: 1em;
}

a.read_more {
font-family: "brandon-grotesque";
font-weight: bold;
text-transform: uppercase;
	background-color: #f63;
	color: white;
	padding: 10px;
	display: inline-block;
	border-radius: 5px;
    
}

a.read_more:after {
	content: " →";
}

a.read_more:hover {
	color: white;
	background-color: silver;
}

/* @group Front Page */

div.jumbotron {
xmargin-top: 1em;
margin-bottom: 4em;
xbackground-color: white;
	
}

div.homepage {
	xpadding-top: 2em;
}

img.small-avatar {
	max-width: 100px;
	margin: auto;
	margin-bottom: 1em;
}

div.updates {
	padding-bottom: 2em;
}

img.feature_image {
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
	xmargin-top: 2em;
	margin-bottom: 2em;
}

div.update_item {
	padding-bottom: 2em;
	margin-bottom: 1em;
	font-size: 1.15em;
	xborder-bottom: 1px solid silver;
}

div.update_item + div.update_item {
padding-top: 1em;
	
}

.update_item p {
	max-width: 550px;
	margin: auto;
	padding-bottom: 1em;
}


div.updates h1 {
	font-size: 2em;
	color: #f63;
	padding-bottom: 1em;
	margin-top: 0;
}

div.updates h2 {
	font-size: 1.6em;
	max-width: 400px;
	margin: auto;
	color: ;
	margin-top: 0;
	text-align: center;
}


p.update_date {
	color: silver;
	text-align: center;
	padding-top: 1em;
}

div.homeside_item {
	padding-bottom: 4em;
	
}

div.homeside_item h4 {
	font-size: 1.2em;
	margin-top: 0;
}

ul#homeside_quicklinks {
	display: inline;
	list-style: none;
	padding: 0;
}

ul#homeside_quicklinks li a {
	font-weight: bold;
}


p.quicklink_date {
	margin-bottom: 0;
	color:  silver;
}

ul.sociallist {
padding: 0;
clear: both;
margin-top: 1em;
	text-align: center;
}

ul.sociallist li {
	display: inline;
}

ul.sociallist a {
	display: inline-block;
	width: 24px;
	height: 24px;
	text-indent: -9999px;
	opacity: 0.25;
	margin-right: .2em;
}

ul.sociallist a:hover {
	opacity: 1;
}

ul.sociallist a.twitter {
	background-image: url("/images/glyphicons_pro/glyphicons_social/png/social-32-twitter.png");
}

ul.sociallist a.facebook {
	background-image: url("/images/glyphicons_pro/glyphicons_social/png/social-31-facebook.png");
}

ul.sociallist a.pinterest {
	background-image: url("/images/glyphicons_pro/glyphicons_social/png/social-1-pinterest.png");
}

ul.sociallist a.instagram {
	background-image: url("/images/glyphicons_pro/glyphicons_social/png/social-33-instagram.png");
}

ul.sociallist a.flickr {
	background-image: url("/images/glyphicons_pro/glyphicons_social/png/social-36-flickr.png");
}

ul.sociallist a.tumblr {
	background-image: url("/images/glyphicons_pro/glyphicons_social/png/social-9-tumblr.png");
}

/* @end */

/* @group Header elements */



h2.breadcrumbs {
	padding-top: 0;
	margin-top: 0;
	text-align: center;

	padding-bottom: 1.5em;
	font-size: 1em;
	color: silver;
	font-weight: normal;
	font-style: normal;
}

h2.breadcrumbs a {
	color: s;
}

h2.breadcrumbs a:hover {
	color: silver;
}

h2.breadcrumbs .youarehere {
	font-weight: bold;
	color: black;
}

.logo h1 {
	display: none;
}

/* @end */

/* @group Footer */

.footer {
	text-align: center;
	padding-bottom: 3em;
	padding-top: 2em;
	color: silver;
	}

/* @end */

/* @group Comics */

.comic_content img {
	max-width: 100%;
}

.comic_content {
	text-align: center;
}

.comic_cover img {
	max-width: 100%;
}

.comic_item {
	padding-bottom: 2em;
}


.comic_item h3:hover {
color: #ff6633;	
}



.comic_item img {
	max-width: 100%;
		-webkit-transition: -webkit-transform 0.3s ease;
	-moz-transition: -moz-transform 0.3s ease;
	-o-transition: -o-transform 0.3s ease;
	transition: transform 0.3s ease;
}

.comic_item img:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transform: scale(1.05);
}

.comics p.paginate {
	text-align: center;
}

body.faq h3 {
	font-size: 1.25em;
}

div.machinegum {
	padding-bottom: 2em;
}

div.machinegum div.comic_card {
	padding-bottom: 0;
	padding-top: 0;
}

div.machinegum div.comic_card + div.comic_card {
	padding-top: 6em;
}

.comic_card img {
	max-width: 100%;
	padding: 10px;
}

.comic_info h3 {
	margin-top: 0;
}

.comics .paginate {
	padding-top: 2em;
}


/* @end */

/* @group Books */

.griditem {
	width: 100%;
	padding-left: 2em;
	padding-right: 2em;
	padding-bottom: 2em;
}

.griditem_meta h2 {
	font-size: 1.25em;
}


.book-row blockquote {
	border-color: white;
	background-color: #efefef;
	font-size: 1em;
}

.book-row blockquote footer {
	font-size:1em;
}

.book-row {
	padding-bottom: 4em;
}

.book-row h3 a{
	color: black;
}

img.book-interior {
	padding-bottom: 2em;
	margin-left: auto;
	margin-right: auto;
}

img.book-cover {
	width: 100%;
}

span.buyme {
	background-color: silver;
	padding: 10px;
	border-radius: 10px ;
	font-family: "brandon-grotesque";
	font-weight: bold;
	text-transform: uppercase;
	color: white;
	margin-right: 8px;
}

.purchase-links {
	padding-top: 1em;
}

/* @end */

/* @group Portfolio */

.fullsize_image {
	text-align: center;
	padding-bottom: 2em;
}

.fullsize_image img {
	max-width: 100%;
	padding-bottom: 2em;
}


/* @end */

/* @group Fonts Page */

img.fonts-samples, img.fonts-free {
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 2em;
}

/* @end */

/* @group About */

.about-portrait img {
	width: 100%;
	border-radius: 600px;
	margin-bottom: 3em;
}

.about-portrait {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

ul.socialmedia {
	padding: 0;
}

ul.socialmedia li {
	list-style: none;
	padding-bottom: .5em;
	display: inline-block;
	width: 49%;
}


ul.socialmedia li a {
	display: block;
	min-height: 24px;
	padding-left: 30px;
	background-repeat: no-repeat;
	color: silver;
}

ul.socialmedia li a:hover {
	color: black;
}

ul.socialmedia li.twitter a {
	background-image:url(images/social/Twitter/24.png);
}

ul.socialmedia li.tumblr a {
	background-image:url(images/social/Tumblr/24.png);
}

ul.socialmedia li.instagram a {
	background-image:url(images/social/Instagram/24.png);
}

ul.socialmedia li.flickr a {
	background-image:url(images/social/Flickr/24.png);
}

ul.socialmedia li.facebook a {
	background-image:url(images/social/Facebook/24.png);
}

ul.socialmedia li.youtube a {
	background-image:url(images/social/YouTube/24.png);
}

ul.socialmedia li.vimeo a {
	background-image:url(images/social/Vimeo/24.png);
}

ul.socialmedia li.dribbble a {
	background-image:url(images/social/Dribbble/24.png);
}






/* @end */

/* @group Masonry Portfolio */

div#folio {
	clear: both;
	text-align:center;

	
}

.item {
	width: 50%;
	padding: 0 15px 30px;
}

div.masonry {
	margin-left: -15px;
	margin-right: -15px;
}

.item img {
	max-width: 100%;
}


div.item img, img.zoomzoom,  a.griditem img {
	max-width: 100%;
		-webkit-transition: -webkit-transform 0.3s ease;
	-moz-transition: -moz-transform 0.3s ease;
	-o-transition: -o-transform 0.3s ease;
	transition: transform 0.3s ease;
}

div.item img:hover, img.zoomzoom:hover, a.griditem:hover img {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transform: scale(1.05);
}






/* @end */

/* @group folio nav */

.worknav {
	text-align: center;	
	padding-bottom: 2em;
	font-family: "brandon-grotesque";
	font-weight: bold;
	text-transform: uppercase;
}

.worknav ul {
padding: 0;
line-height: 55px;
}

.worknav ul li {
	display: inline;
	padding-left: 5px;
	padding-right: 5px;
}


.worknav ul li a {
	color: silver;
	padding: 10px;
	border-radius: 5px;
	background-color: #efefef;
}

.worknav ul li a:hover {
	background-color: white;
}

.worknav ul.illustration li.illustration a,
body.illustration li.illustration a,
.worknav ul.comics li.comics a,
.worknav ul.books li.books a,
.worknav ul.animation li.animation a,
body.animation li.animation a,
.worknav ul.fonts li.fonts a {
	color: white;
	font-weight: bold;
	background-color: #f63;
}

/* @end */

/* @group Tumblr Blogs */

.mainmedia p {
	display: none;
}

.affixme .section-heading {
	font-size: 1.5em;
}

.affix {
	position: relative;
}

.mainmedia img, .textcontent iframe {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.mainmedia img, .mainmedia iframe {
	border-radius: 3px 3px 0 0;
}

.like_button iframe {
	width: 25px;
}



.card {
	font-size: .85em;
	font-family: "courier-prime", "Courier New", Courier, mono;
	background-color: white;
	width: 100%;
	
}

.card {
	margin-bottom: 2em;
	box-shadow: 0px 0px 50px #e2e2e2;
	

}

.blogpost:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
	
}

.card blockquote {
	font-size: 1em;
	border-color: #f63;
	color: gray;
	font-style: italic;
	border-left-width: 3px;
}

.card blockquote em {
	font-style: normal;
}

div.link .glyphicon {
	float: right;
	margin-left: 1em;
	margin-bottom: .25em;
}

div.link div.panel.panel-primary .panel-heading {
	background-color: silver;
	border: none;
	border-radius: 3px;
}

div.panel {
	border: none;
}

div.link div.panel.panel-primary .panel-heading:hover {
	background-color: #ff6633;
}


a.tumblr-link h3 {
	color: white;
	font-weight: bold;
}

.panel-heading a h3 {
	padding: 0;
	margin: 0;
}

h2.tagtitle {
	margin-top: 1em;
	margin-bottom: 2em;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	color: gray;
}

span.tagpage {
	font-weight: bold;
	color: black;
}

.sidebar {
	padding-bottom: 2em;
	text-align: center;
}

img.rndlogo {
display: none;
	width: 100px;

}


.card img {
	max-width: 100%;
}

.card .textcontent {
	padding: 1.5em;
}

.card .postmeta {
	border-top: 1px solid #e9e9e9;
	margin-top: 2em;
	padding-top: 2em;
	float: left;
	clear: both;
	width:  100%;
}

img.photoset+img.photoset {
	margin-top: 1em;
	border-radius: 0
}

/* @end */

a {
	color: #ff6633;
	font-weight: bold;
}

a:hover {
	color: silver;
}

a, a:hover {
	text-decoration:none;
}

.mainnav a:hover, .mainnav li.current a:hover {
	color: #ff6633;
}

body.home .mainnav li.home a,
body.about .mainnav li.about a ,
body.work .mainnav li.work a,
body.illustration .mainnav li.work a ,
body.mgum .mainnav li.mgum a{
	color: black;
}

img.johnmartzlogo:hover {
	opacity: .5;
}


a.btn.reblog {
	color: white;
	background-color: silver;
	border:  none;
	font: bold 1em "brandon-grotesque";
	text-transform: uppercase;
	letter-spacing: .1em;
	float: left;
	margin-right: 1em;
	margin-top: 1em;
}

a.btn.reblog:hover {
	background-color: #ff6633;
}

.header {
	float: left;
	padding-bottom: 1em;
	padding-top: 2em;
	border-bottom: 1px solid silver;
	width: 100%;
	z-index: 1;
}

body.white .header {
	border: none;
}

.section_bottom {
	padding-top: 3em;
}

body.blog .section_bottom {
	padding-top: 0;
}

.header .logo {
	margin-right: auto;
	margin-left: auto;
	padding: 0;
	text-align: center;
}

.logo img {
	width: 170px;
	
}

.logo img:hover{
	
}


.header h1 {
	padding: 0;
	margin: 0;
}

.header .mainnav {

	font-size: 1em;
}

.mainnav ul {
	font: bold 1em "brandon-grotesque";
	text-transform: uppercase;
	list-style: none;
	padding: 1em 0 0;
	text-align: center;

}

.mainnav ul li {
	padding-bottom: .25em;
	display: inline;
	padding-left: .5em;
	padding-right: .5em;
}

.mainnav a {
	color: #f63;
}


body.about .mainnav li.about a,
body.work .mainnav li.work a,
body.mgum .mainnav li.mgum a,
body.blog .mainnav li.current a,
body.rnd .mainnav li.current a{
	color: black;
}

.mainnav a:hover {
	color: silver;
}

.card {
	float: left;
	border-radius: 3px;
}

.tumblr-bits {
	float: left;
}

.date {

	color: silver;
}

div.tags {
color: silver;
}

div.tags a {
	color: silver;
}

div.tags a:hover {
	color: #ff6633;
}

div.tags ul li {
	padding-right: 1em;
}

.blognav {
	text-align: center;
	clear: both;
	padding-top: 1em;
	padding-bottom: 1em;
}

.blognav a {
	font: bold 1.5em "brandon-grotesque";
	text-transform: uppercase;
	padding-right: .5em;
	padding-left: .5em;
	color: black;
}

li.comicdate {
	font: bold 1.5em "brandon-grotesque";
	text-transform: uppercase;
	color: silver;	
	position: relative;
	bottom: 4px;
}

.blognav a.archive {
	color: #ff6633;
}

.blognav a.archive:hover {
	color: silver;
}

.blogpost .mainquote {
	xfont: 1.5em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;	
	margin-bottom: 1em;
	xtext-indent: -.65em;
	
}


.quotestart, .quoteend,.mainquote {
	float: left;
}

.quotesource::before {
	content: "— ";
}

.quotesource {
	clear: both;
}


.reblog_button, .like_button {
	float: left;
	margin-right: 1em;
	position: relative;
	top: 5px;
	margin-top: 1em;
}


.fb-like {
	padding-bottom: 1em;
}

div.textcontent h2:first-of-type {
	margin-top: 0;
}

a.griditem h2 {
color: black;
}

a.griditem:hover h2 {
	color: #ff6633;
}

a.griditem .griditem_meta p {
	color: silver;
}

a.griditem:hover .griditem_meta p {
	color: gray;
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

.griditem {
	width: 33%;
	}



.item {
	width: 33.33%;	
}


ul.socialmedia li {
	width: 24%;
}

.about-portrait {
width: 90%;
margin: 0;
}

.content {
	float: right;
	
}

img.rndlogo {
	display: block;
	padding-bottom: 1em;
}

h2.breadcrumbs {
	padding-bottom: 1.5em;
	font-size: 1.25em;
}


.mainmedia img {
	padding: 0;
}

.card {
	font-size: 1em;
	padding: 0em;
	width: 100%;
}

.card .textcontent {
	padding: 2em;
}

.date {	
	width: 25%;
	float: left;
}

div.tags {
	float: right;
	width: 75%;
	text-align: right;
}

div.tags ul li {
	padding-right: 0;
	padding-left: 1em;
}



.card {
	margin-bottom: 4em;
}


.logo {
	float: left;
}

.mainnav {
	float: right;
}

.mainnav ul {
	text-align: right;
	font-size: 1.25em;
	padding: 0;
}

.affixme .section-heading {
	font-size: 1.25em;
}

.header {
	padding-top: 3em;
	padding-bottom: 2em;
}

.section_bottom {
	padding-top: 3em;
}

body.blog .section_bottom {
	padding-top: 3em;
}

.mainnav ul li {
	padding-left: 1em;
	padding-right: 0em;
}

.blogpost .mainquote {
	xtext-indent: -.65em;
}

.blognav a {
	font-size: 2em;
}


.sidebar 
{
	text-align:left
}

img.rndlogo {
	width: 150px;
}

div.affix {
	position: fixed;
	width: 187px;
	top: 0;
}





 }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

.griditem {
	width: 25%;
	}

.item {
	width: 33.33%;
}

.masonry {
	margin-left: -20px;
	margin-right: -20px;
}



.mainmedia img, .mainmedia iframe {
	border-radius: 0;
}


.section-heading {
	font-size: 2em;
}


div.affix {
	width: 242px;
	position: fixed;
}

.card {
	padding: 2em;
}

img.rndlogo {
	width: 200px;
}

.card .textcontent {
	padding: 3em;
}

.affixme .section-heading {
	font-size: 1.5em;
}

}




/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

ul.socialmedia li {
	width: 19%;
}

.item {
	width: 25%;
}

div.affix, .sidebar {
	width: 220px;
}

xx.mainmedia img {
	padding: 3em 3em 0;
}

xx.card {
	padding: 3em;
}

.affixme .section-heading {
	font-size: 1.5em;
}

h2.breadcrumbs {
	xpadding-bottom: 2.5em;
}

 }