/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css (minified) */
hr,img{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,hr,main,menu,nav,section,summary{display:block}pre,textarea{overflow:auto}body,fieldset{margin:0}fieldset,hr,legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:1px;border-top:1px solid #ccc;margin:1em 0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{border:0}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}
/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ (minified) */
html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.hidden{display:none!important}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}@media print{blockquote,img,pre,tr{page-break-inside:avoid}*,:after,:before,:first-letter,:first-line{background:0 0!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999}thead{display:table-header-group}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}


/***** My custom CSS *****/


body {
	margin: 0;
	padding: 0;
	background-color: #101010;
	color: #FFF;
}

a {
	color: #b3d4fc;
}

img {
	max-width: 100%;
	height: auto;
}

/***** Email Obfuscation *****/
/* https://spencermortensen.com/articles/email-obfuscation/#text-display */

div.email > span:nth-child(2) {
	display: none;
}

/***** Gallery *****/


.gallery-wrapper{
	padding: 1em;
	background-color: #202020;
	text-align: center;

	/* border: 1px solid; */
}

.grid-container{
	margin: 0 auto;
	padding: 0.5em;
	max-width: 1320px;
}

.thumbnail-grid-sq {
	display: flex;
	flex-wrap: wrap;
}

.thumbnail-grid-sq a {
	/* 3 per row */
	width: 32.29%;
	height: auto;
	padding: 0.5%;

	@media only screen and (min-width: 640px) {
		/* 5 per row */
		width: 19.5%;
		padding: 0.25%;
	}

	@media only screen and (min-width: 992px) {
		/* 8 per row */
		width: 12%;
		padding: 0.25%;
	}
}

.thumbnail-grid-sq a img {
	min-width: 100%;
	height: auto;
}

.thumbnail-grid-rec {
	display: flex;
	flex-wrap: wrap;
}

.thumbnail-grid-rec a {
	/* 2 per row */
	width: 49%;
	height: auto;
	padding: 0.5%;

	@media only screen and (min-width: 640px) {
		/* 3 per row */
		width: 32.82%;
		padding: 0.25%;
	}

	@media only screen and (min-width: 992px) {
		/* 5 per row */
		width: 19.5%;
		padding: 0.25%;
	}
}

.thumbnail-grid-rec a img {
	min-width: 100%;
	height: auto;
}


/***** Header *****/


.navbar {
	background-color: #101010;
	color: #96969a;
	padding: 10px 16px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.navbar a {
	color: #96969a;
}

.navbar a:hover {
	color: #FFF;
}

.navbar-menu-button {
	width: 30px;
	flex-shrink: 0;
}

.breadcrumb-links {
	flex: 80%;
	text-align: left;
	margin-left: 1em;

	@media only screen and (max-width: 991px) {
		display: none;
  }
}

.page-nav {
	flex: 40%;
	display: flex;
  justify-content: flex-end;
	
	@media only screen and (min-width: 992px) {
		display: none;
  }
}

.page-nav-btn {
	display: inline-block;
	border: 1px solid black;
	border-top-color: #424242;
  border-left-color: #424242;
	border-radius: 5px;
  width: 32px;
  height: 32px;
  margin-left: 6px;
}

a.page-nav-btn:hover {
	background-color: #424242;
}

.arrow-left {
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #96969a;
  margin: 5px;
  margin-left: 8px;
}

a.page-nav-btn:hover .arrow-left {
	border-right: 10px solid #FFF;
}

.arrow-right {
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #96969a;
  margin: 5px;
  margin-left: 12px;
}

a.page-nav-btn:hover .arrow-right {
	border-left: 10px solid #FFF;
}


/***** Navbar Expanded *****/


#navbar-expanded {
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #101010;
	width: 200px;
	padding: 1em;
	padding-top: 12px;
}

#navbar-expanded a {
	color:  #FFF;
	text-decoration: none;
}

#navbar-expanded ul {
	list-style-type: none;
	padding-left: 0
}

#navbar-expanded ul li {
	padding: 0.75em;
  font-size: 1.25em;
}

.navbar-close-button {
	width: 30px;
	background-color: #101010;
}


/***** Footer *****/


.page-nav.bottom {
	justify-content: center;
	align-items: center;
}

.page-nav.bottom .page-nav-btn {
	height: 60px;
	width: 120px;
}

.page-nav.bottom .arrow-left {
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 20px solid #96969a;
	margin: 10px;
  margin-left: 50px;
}

.page-nav.bottom a.page-nav-btn:hover .arrow-left {
	border-right: 20px solid #FFF;
}

.page-nav.bottom .arrow-right {
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #96969a;
	margin: 10px;
  margin-left: 50px;
}

.page-nav.bottom a.page-nav-btn:hover .arrow-right {
	border-left: 20px solid #FFF;
}

.page-nav.bottom .page-number {
	font-size: 1.5em;
  padding: 1em;
}

.page-nav-btn.disabled {
	border-color: #424242;
}

.page-nav-btn.disabled .arrow-left {
	border-right-color: #424242;
}

.page-nav-btn.disabled .arrow-right {
	border-left-color: #424242;
}

.pointer {
  border: solid #949494;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  margin: 0 4px 1px;
}

.pointer.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/***** Page *****/


.body-wrapper {
	@media only screen and (min-width: 992px) {
		display:  flex;
	}
}

.page-wrapper{
	background-color: #202020;
	text-align: center;
	padding-bottom: 2em;

	@media only screen and (min-width: 992px) {
		display: flex;
		justify-content: space-between;
	}
}

.sidebar-container {
	width: 100%;

	@media only screen and (min-width: 992px) {
		width: 400px;
		flex-shrink: 0;
	}
}

.sidebar {
	background-color: black;
	border-radius: 10px;
	text-align: left;
	padding: 2em;
	margin: 1em;

	@media only screen and (min-width: 992px) {
		margin-left: 0;
	}
}

.sidebar h1 {
	line-height: 1.25em;
	margin: 0;
}

.body-page-nav {
	opacity: 0.3;
	flex-grow: 1;
	min-width: 40px;

	@media only screen and (max-width: 991px) {
		display: none;
	}
}

.body-page-nav.disabled{
	opacity: 0;
}

a.body-page-nav:hover {
	opacity: 1;
}

.body-page-nav.left .nav-arrow {
	position: fixed;
	top: 50%;
	left: 1.25em;
	background-image: url("../images/nav-arrow-left.png");
	background-repeat: no-repeat;
  background-size: cover;
	height: 30px;
	width: 18px;
}

.body-page-nav.right .nav-arrow {
	position: fixed;
	top: 50%;
	right: 1.25em;
	background-image: url("../images/nav-arrow-right.png");
	background-repeat: no-repeat;
  background-size: cover;
	height: 30px;
	width: 18px;
}

.page-wrapper.has-sidebar .body-page-nav.right .nav-arrow {
	right: 420px;
}



/***** Comic Page *****/


.comic-page {
	text-align: center;
}

.comic-page img {
	max-width: 100%;
	height: auto;
}


/***** Art Page *****/

/*.page-wrapper {
	padding-top: 1em;
}*/

.art-piece {
	padding-bottom: 1em;

	@media only screen and (min-width: 992px) {
		padding: 1em 0;
	}
}


/***** Portfolio *****/

.portfolio .portfolio-roles {
	margin-top: -20px;
}

@media only screen and (min-width: 640px) {
	.portfolio-heading {
		text-align: left;
	}
}