/*
Theme Name: MongolDude
Theme URI: http://mongoldude.com
Description: A custom designed hand-drawn comic book theme for MongolDude.com.
Author: Colton James Wiscombe
Version: 1.0
Tags: mongoldude, comic, green, orange, yellow, hand-drawn
*/

@font-face {
    font-family: 'KomikaHandRegular';
    src: url('fonts/komikahand-webfont.eot');
    src: url('fonts/komikahand-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/komikahand-webfont.woff') format('woff'),
         url('fonts/komikahand-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KomikaTextKapsRegular';
    src: url('fonts/komikatextkaps-webfont.eot');
    src: url('fonts/komikatextkaps-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/komikatextkaps-webfont.woff') format('woff'),
         url('fonts/komikatextkaps-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KomikaAxisRegular';
    src: url('fonts/komikax_-webfont.eot');
    src: url('fonts/komikax_-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/komikax_-webfont.woff') format('woff'),
         url('fonts/komikax_-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KomikaTextTightRegular';
    src: url('fonts/komtxtt_-webfont.eot');
    src: url('fonts/komtxtt_-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/komtxtt_-webfont.woff') format('woff'),
         url('fonts/komtxtt_-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* HTML RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video	{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 FIX */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section	{ display: block; }


/* PAGE ATTRIBUTES */
*			{ margin: 0; padding: 0; }
html		{ height: 100%; }							
body		{ background: #fff url(images/tabletop-bg.jpg); padding: 8px 0 25px 0; font: 14px "Helvetica Neue", Helvetica, Serif; line-height: 24px; }
html,
body		{ overscroll-behavior-y: none; overscroll-behavior-x: none; }
ul 			{ list-style: none; }
ol			{ list-style: lower-alpha; }
h1 			{ font-size: 48px; line-height: 72px; font-weight: bold; }
h2 			{ font-size: 36px; line-height: 48px; font-weight: bold; }
h3 			{ font-size: 24px; line-height: 48px; font-weight: bold; }
h4 			{ font-size: 21px; line-height: 24px; font-weight: bold; }
h5 			{ font-size: 18px; line-height: 24px; font-weight: bold; }
h6			{ font-size: 16px; line-height: 24px; font-weight: bold; }
p 			{ font-size: 14px; line-height: 24px; margin-bottom: 24px; }
a 			{ color: #ff5600; text-decoration: none; outline: none; cursor: pointer; }
a:hover 	{ color: #ff5600; text-decoration: underline; outline: none; cursor: pointer; }
a:active	{ position: relative; top: 1px; outline: none; cursor: pointer; }
a img 		{ border: 0; outline: none; cursor: pointer; }
img			{ line-height: 0px; }
table 		{ border-collapse: collapse; border-spacing: 0px; }
input		{ outline: none; }
strong		{ font-weight: bold; }
em			{ font-style: italic; }


/* UNIVERSAL */
.wrapper		{ background: #fff; margin: 0 auto 0 auto; padding: 5px 5px 0 5px; width: 938px; border: #000 1px solid; position: relative; overflow: hidden; box-shadow: 0 0 5px #000; -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; -o-box-shadow: 0 0 5px #000; -khtml-box-shadow: 0 0 5px #000; }
.inside			{ position: relative; overflow: hidden; }
.left			{ position: relative; float: left; }
.right			{ position: relative; float: right; }
.center			{ position: relative; margin-left: auto; margin-right: auto; }
.text-left		{ text-align: left; }
.text-right		{ text-align: right; }
.text-center	{ text-align: center; }
.bold			{ font-weight: bold; }
.italic			{ font-style: italic; }
.underline		{ text-decoration: underline; }
.uppercase		{ text-transform: uppercase; }
.lowercase		{ text-transform: lowercase; }


/* HEADER */
header					{ width: 938px; position: relative; overflow: hidden; }
#home					{ background: #67cc8e; width: 934px; height: 670px; border: #000 2px solid; position: relative; overflow: hidden; }
#home h1				{ text-indent: -9999px; width: 0px; height: 0px; overflow: hidden; }
#home h2				{ text-indent: -9999px; width: 0px; height: 0px; overflow: hidden; }
#home img				{ position: absolute; }
#header-bg				{ top: 0px; z-index: 0; }
#header-sunshine		{ top: 0px; z-index: 10; }
#header-title			{ top: 0px; z-index: 30; }
#header-img-container	{ width: 934px; height: 670px; position: absolute; z-index: 20px; }
#home-title				{ left: 661px; top: 504px; }
#default-header			{ background: #67cc8e; width: 934px; height: 166px; border: #000 2px solid; position: relative; overflow: hidden; cursor: pointer; }
#default-header h1		{ text-indent: -9999px; width: 0px; height: 0px; overflow: hidden; }
#default-header h2		{ text-indent: -9999px; width: 0px; height: 0px; overflow: hidden; }
nav						{ background: #595959; margin: 5px 0 5px 0; width: 934px; height: 46px; border: #000 2px solid; overflow: hidden; clear: both; }
nav ul					{ width: 932px; height: 46px; padding: 0 1px 0 1px; overflow: hidden; }
nav li					{ color: #000; font: 22px "KomikaTextKapsRegular", "Helvetica Neue", Helvetica, Serif; text-align: center; letter-spacing: 0.05em; line-height: 46px; width: 233px; position: relative; float: left; }
nav li.current a		{ color: #000; background: url(images/header/nav-buttons.png) left bottom no-repeat; }
nav li.current a:hover	{ color: #000; background: url(images/header/nav-buttons.png) left bottom no-repeat; }
nav a					{ color: #000; background: url(images/header/nav-buttons.png) left top no-repeat; display: block; }
nav a:hover				{ color: #fff; background: url(images/header/nav-buttons.png) right top no-repeat; text-decoration: none; }
nav a:active			{ top: 0px; }
#header-bottom			{ margin: 0 0 5px 0; overflow: hidden; clear: both; }
#header-divider			{ background: #67cc8e; width: 934px; height: 24px; border: #000 2px solid; }
#header-disclaimer		{ color: #000; font-size: 12px; text-align: center; line-height: 22px; margin: 0px; width: 938px; height: 0px; opacity: 0; overflow: hidden; } /* HOME PAGE = height: 22px; opacity: 1; */


/* GENERAL CONTENT */
#content		{ overflow: hidden; position: relative; clear: both; }
.caption		{ font: 17px "KomikaTextKapsRegular", "Helvetica Neue", Helvetica, Sans-Serif; line-height: 18px; background: #fff; padding: 5px; border: #000 2px solid; position: absolute; z-index: 100; }
.divider		{ background: #67cc8e url(images/divider.jpg) no-repeat; margin: 0 0 5px 0; width: 934px; height: 24px; border: #000 2px solid; clear: both; }
.comic-frame  	{ border: #000 2px solid; position: relative; z-index: 50; }
.comic-img		{ display: block; overflow: hidden; }
.frame-overlay	{ background: rgba(0,0,0,0.4); left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; position: absolute; } /* HOVER = opacity: 1; */
#no-script		{ margin: 70px 0 70px 0; width: 100%; overflow: hidden; }
#no-script p	{ font: 30px "Helvetica CY", "Helvetica Neue", Helvetica, Sans-Serif; text-align: center; font-weight: bold; margin-bottom: 10px; }
#no-script a	{ font: 28px "KomikaTextKapsRegular", "Helvetica Neue", Helvetica, Sans-Serif; }
#loader	 		{ margin: -24px 0 0 -24px; left: 50%; top: 50%; position: fixed; overflow: hidden; z-index: 5100; display: none; }
#img-cache		{ width: 0px; height: 0px; position: absolute; overflow: hidden; opacity: 0; z-index: 0; }


/* ABOUT PAGE */
#about 				{ overflow: hidden; position: relative; clear: both; }
#about-f1			{ margin: 0px; width: 591px; height: 331px; overflow: hidden; float: left; }
#about-f2			{ margin: 0 0 0 600px; width: 334px; height: 331px; overflow: hidden; }
#about-f3			{ margin: 5px 0 0 0; width: 934px; height: 150px; z-index: 60; }
#about-f3-img2		{ margin: -190px 0 0 28px; width: 188px; height: 177px; position: absolute; }
#about-f4			{ margin: 5px 0 0 0; width: 334px; height: 270px; float: left; }
#about-f5			{ margin: 5px 0 0 0; left: 5px; width: 591px; height: 270px; overflow: hidden; }
#about-f6			{ margin: 5px 0 0 0; width: 306px; height: 250px; float: left; }
#about-f7			{ margin: 7px 0 0 314px; width: 308px; height: 250px; border: 0px; position: absolute; z-index: 60; }
#about-f7-img2		{ margin: -276px 0 0 -42px; width: 378px; height: 273px; position: absolute; }
#about-f8			{ margin: 5px 0 0 628px; width: 306px; height: 250px; }
#about-f9 			{ margin: 5px 0 0 0; width: 934px; height: 160px; overflow: hidden; }
#about-f10			{ margin: 5px 0 5px 0; width: 355px; height: 527px; float: left; }
#about-f11			{ margin: 5px 0 0 364px; width: 570px; height: 161px; }
#about-f12			{ margin: 5px 0 5px 364px; width: 570px; height: 357px; overflow: hidden; }

#about-f1-cap		{ left: 0px; top: 0px; width: 106px; }
#about-f2-cap		{ left: 610px; top: 13px; width: 160px; padding: 0px; border: 0px; }
#about-f3-cap		{ left: 0px; top: 462px; height: 18px; }
#about-f5-cap		{ left: 772px; top: 499px; width: 152px; }
#about-f6-cap		{ left: 134px; top: 778px; width: 136px; }
#about-f7-cap		{ left: 315px; top: 765px; width: 86px; }
#about-f8-cap		{ left: 842px; top: 778px; width: 82px; }
#about-f9-cap		{ left: 0px; top: 1169px; height: 18px; }
#about-f10-cap		{ background: #ccc; left: 259px; top: 1199px; width: 130px; }
#about-f12-cap		{ left: 529px; top: 1615px; background: transparent; width: 388px; height: 106px; border: 0px; }

#about-info						{ margin: 0 10px 0 10px; padding: 0 5px 12px 5px; width: 908px; position: relative; overflow: hidden; clear: both; }
#about-info .question			{ position: relative; clear: both; z-index: 2; }
#about-info h4					{ font-size: 14px; line-height: 24px; font-weight: bold; text-transform: uppercase; cursor: pointer; }
#about-info h4:hover			{ color: #ff5600; }
#about-info h4 span				{ color: #ccc; width: 18px; position: relative; overflow: hidden; display: block; float: left; }
#about-info p					{ margin-bottom: 14px; }
#about-info .answer				{ margin: 0 20px 12px 20px; height: 0px; overflow: hidden; }
#about-info .left				{ background: #fff; padding: 7px 12px 0px 12px; width: 478px; overflow: hidden; }
#about-info .right				{ color: #fff; background: #777; padding: 7px 5px 0 5px; width: 350px; border-left: #000 2px solid; border-bottom: #000 2px solid; overflow: hidden; }
#about-info .right p			{ margin: 0 20px 10px 20px; border-bottom: #fff 2px solid; }
#about-info .right strong		{ color: #fff; text-transform: uppercase; }
#about-info .right ul			{ margin: 0 20px 0 20px; list-style-type: disc; }
#about-info .right ul li		{ margin-bottom: 12px; }
#about-info .giant-head			{ right: 0; bottom: 0; width: 477px; height: 501px; position: absolute; z-index: 0; }


/* EXPERIENCE PAGE */
#experience			{ overflow: hidden; position: relative; clear: both; }
.exp-section		{ overflow: hidden; position: relative; clear: both; }
.exp-section h3		{ text-indent: -9999px; height: 0px; overflow: hidden; }

#exp-work			{  }
#exp-work strong	{ font-weight: normal; }
#exp-work-f1		{ margin: 0px; width: 934px; height: 150px; }
#exp-work-f1-img2	{ margin: -145px 0 0 5px; width: 453px; height: 107px; position: absolute; }
#exp-work-f2		{ margin: 5px 5px 0 0; width: 542px; height: 310px; overflow: hidden; float: left; }
#exp-work-f2-img2	{ left: 132px; top: 320px; position: absolute; } /* HOVER = top: 20px; */
#exp-work-f3		{ margin: 5px 0 0 0; width: 383px; height: 310px; float: left; overflow: hidden; }
#exp-work-f4		{ margin: 5px 5px 0 0; width: 472px; height: 280px; float: left; }
#exp-work-f5		{ margin: 5px 0 0 0; width: 453px; height: 280px; float: left; }
#exp-work-f6		{ margin: 5px 5px 0 0; width: 420px; height: 280px; float: left; }
#exp-work-f7		{ margin: 5px 0 0 0; width: 508px; height: 284px; border: 0px; float: left; }
#exp-work-f7-img2	{ left: -21px; top: -137px; position: absolute; }
#exp-work-f8		{ margin: 5px 0 5px 0; width: 934px; height: 320px; float: left; overflow: hidden; background: #b4b4b4; }
#exp-work-f1-cap	{ left: 820px; top: 0px; width: 80px; }
#exp-work-f2-cap	{ left: 0px; top: 358px; width: 100px; }
#exp-work-f3-cap	{ left: 527px; top: 376px; width: 89px; }
#exp-work-f4-cap	{ left: 0px; top: 478px; height: 18px; }
#exp-work-f5-cap	{ left: 784px; top: 608px; width: 140px; }
#exp-work-f6-cap	{ left: 0px; top: 927px; width: 121px; }
#exp-work-f7-cap	{ left: 409px; top: 880px; width: 500px; height: 36px; }
#exp-work-f8-cap	{ left: 714px; top: 1056px; width: 210px; }

#exp-skills			{  }
#exp-skills-f1		{ margin: 0px; width: 934px; height: 150px; }
#exp-skills-f1-img2	{ margin: -141px 0 0 11px; width: 446px; height: 117px; position: absolute; }
#exp-skills-f2		{ margin: 5px 5px 0 0; width: 500px; height: 330px; float: left; overflow: hidden; background: #919191; }
#exp-skills-f3		{ margin: 5px 0 0 0; width: 425px; height: 330px; float: left; }
#exp-skills-f4		{ margin: 5px 5px 5px 0; width: 393px; height: 315px; float: left; }
#exp-skills-f5		{ margin: 5px 0 5px 0; width: 532px; height: 315px; float: left; overflow: hidden; }
#exp-skills-f1-cap	{ left: 685px; top: 13px; width: 150px; }
#exp-skills-f2-cap	{ text-indent: -9999px; background: transparent url(images/experience/super-hero-skills/html-ninja.png) no-repeat; left: 21px; top: 260px; width: 243px; height: 95px; border: 0px; overflow: hidden; }
#exp-skills-f3-cap	{ text-indent: -9999px; background: transparent url(images/experience/super-hero-skills/css-wizard.png) no-repeat; left: 483px; top: 366px; width: 243px; height: 69px; border: 0px; overflow: hidden; }
#exp-skills-f4-cap	{ text-indent: -9999px; background: transparent url(images/experience/super-hero-skills/javascript-avenger.png) no-repeat; left: 243px; top: 503px; width: 202px; height: 131px; border: 0px; overflow: hidden; }
#exp-skills-f5-cap	{ text-indent: -9999px; background: transparent url(images/experience/super-hero-skills/php-master.png) no-repeat; left: 670px; top: 663px; width: 209px; height: 103px; border: 0px; overflow: hidden; }

#exp-school			{  }
#exp-school-f1		{ margin: 0px; width: 934px; height: 150px; }
#exp-school-f1-img2	{ margin: -150px 0 0 10px; width: 403px; height: 114px; position: absolute; }
#exp-school-f2		{ margin: 5px 5px 5px 0; width: 660px; height: 330px; float: left; overflow: hidden; }
#exp-school-f3		{ margin: 5px 0 5px 0; width: 264px; height: 330px; float: left; }
#exp-school-f1-cap	{ left: 799px; top: 0px; width: 125px; }
#exp-school-f2-cap	{ left: 7px; top: 166px; width: 240px; }
#exp-school-f3-cap	{ left: 635px; top: 449px; height: 18px; }

#exp-footer							{ width: 938px; overflow: hidden; }
#machine							{ margin: 0 9px 20px 9px; width: 920px; height: 515px; position: relative; overflow: hidden; }
#machine .machine-animation			{ width: 920px; height: 515px; position: absolute; overflow: hidden; z-index: 1; }
#machine .caption					{ left: 8px; top: 454px; width: 480px; height: 36px; position: absolute; z-index: 3; }
#machine .machine-button			{ left: 692px; top: 313px; width: 138px; height: 78px; position: absolute; z-index: 4; cursor: pointer; }
#machine .machine-button a			{ text-indent: -9999px; background: url(images/experience/machine-button.png) 0px 0px no-repeat; width: 138px; height: 78px; position: absolute; }
#machine .machine-button a:hover	{ background-position: 0px -87px; }
#machine .machine-button a:active	{ background-position: 0px -175px; }


/* PORTFOLIO PAGE */
#portfolio					{ overflow: hidden; position: relative; clear: both; }
#thumb-container			{ overflow: hidden; }
.port-thumb					{ background: #ccc url(images/portfolio/thumb-bg.jpg); margin: 0 5px 5px 0; width: 305px; height: 370px; border: #000 2px solid; overflow: hidden; position: relative; float: left; }
.port-thumb:nth-child(3n+3)	{ margin-right: 1px; }
.port-thumb-color			{ width: 305px; height: 370px; position: absolute; overflow: hidden; z-index: 1; }
.port-thumb-color img 		{ top: 0px; position: relative; }
.port-thumb-bw				{ width: 305px; height: 370px; position: absolute; overflow: hidden; z-index: 2; }
.port-thumb-bw img 			{ top: -375px; position: relative; }
.port-viewed				{ background: rgba(0,0,0,0.5); width: 305px; height: 370px; position: absolute; opacity: 0; z-index: 3; } /* ON CLICK = opacity: 1; */
.port-viewed img 			{ left: 86px; top: 149px; position: absolute; }
.port-img-link				{ text-indent: -9999px; width: 305px; height: 370px; position: absolute; overflow: hidden; z-index: 4; }
.port-img-link span			{ width: 305px; height: 370px; display: block; cursor: pointer; }

#like-box					{ width: 938px; height: 0px; overflow: hidden; }

#project-container			{ left: 0px; top: 0px; width: 938px; height: 0px; position: absolute; overflow: hidden; z-index: 7000; }
.project 					{ left: 0px; top: 0px; width: 100%; overflow: hidden; position: absolute; opacity: 0; }
.project.is-active			{ opacity: 1; }
.project:after				{ clear: both;  }
.project-imgs				{ width: 623px; position: relative; float: left; overflow: hidden; }
.project-imgs ul 			{ overflow: hidden; }
.project-imgs li 			{ background: #000 url(images/portfolio/image-loader.gif) 50% 50% no-repeat; margin-bottom: 5px; border: #000 2px solid; position: relative; float: left; }
.project-imgs li.img-desc	{ color: #fff; font: 16px "Helvetica Neue", Helvetica, Sans-Serif; line-height: 24px; width: 603px; padding: 4px 8px 4px 8px; border: #289976 2px solid; }
.project-imgs li img 		{ margin: 0px; padding: 0px; display: block; opacity: 0; }
.project-info				{ background: #000; margin: 0 1px 5px 0; padding: 8px 12px 15px 12px; width: 281px; border: #289976 2px solid; position: relative; float: right; }
.project-info h3			{ color: #b1ff91; font: 32px "KomikaAxisRegular", "Helvetica Neue", Helvetica, Sans-Serif; font-weight: normal; text-align: center; text-shadow: rgba(40,153,118,0.6) 2px 4px 0px; -webkit-font-smoothing: antialiased; -webkit-transform: translate3d(0px, 0px, 0px); }
.project-info p 			{ color: #fff; font: 15px "Helvetica Neue", Helvetica, Sans-Serif; letter-spacing: -0.5px; line-height: 24px; margin-top: 24px; }
.project-info ul 			{ overflow: hidden; }
.project-info li 			{ color: #fff; font: 15px "Helvetica Neue", Helvetica, Sans-Serif; letter-spacing: -0.5px; text-transform: uppercase; width: 100%; position: relative; display: block; }
.project-info li em			{ color: #ff5600; font: 26px "KomikaTextTightRegular", "Helvetica Neue", Helvetica, Sans-Serif; font-weight: thin; letter-spacing: -0.2px; line-height: 26px; text-decoration: none; margin: -2px 0 7px 0; display: block; -webkit-font-smoothing: antialiased; -webkit-transform: translate3d(0px, 0px, 0px); }
.project-info li a 			{ color: #ff5600; font: 26px "KomikaTextTightRegular", "Helvetica Neue", Helvetica, Sans-Serif; font-weight: thin; letter-spacing: -0.2px; line-height: 26px; text-decoration: none; margin: -2px 0 7px 0; display: block; text-shadow: 0px 0px 0px #000; -webkit-font-smoothing: antialiased; -webkit-transform: translate3d(0px, 0px, 0px); }
.project-info li a:hover 	{ color: #ffe877; text-decoration: none; }
.project-nav				{ color: #ffe877; font: 26px "KomikaTextTightRegular", "Helvetica Neue", Helvetica, Sans-Serif; font-weight: thin; letter-spacing: -0.2px; line-height: 26px; text-align: center; margin-top: 24px; -webkit-font-smoothing: antialiased; -webkit-transform: translate3d(0px, 0px, 0px); }
.project-nav a 				{ color: #ffe877; text-decoration: none; }
.project-nav a:hover 		{ color: #ffe877; text-decoration: none; }
#project-close				{ background: url(images/portfolio/project-close.png) left top no-repeat; margin: 0 0 0 442px; left: 50%; top: 264px; width: 38px; height: 43px; position: absolute; display: none; z-index: 10000; cursor: pointer; }
#project-close:hover 		{ background-position: right top; }
#portfolio-overlay			{ background: rgba(0,0,0,0.7); left: 0px; top: 0px; width: 0px; height: 0px; position: absolute; opacity: 0; z-index: 5000; overflow: hidden; cursor: pointer; }

/* IMAGE-ONLY LIGHTBOX (vanilla JS portfolio overlay) */
.project.project-lightbox {
	width: 938px;
	position: relative;
	left: auto;
	top: auto;
	opacity: 1;
}

.project-lightbox-shell {
	width: 938px;
	position: relative;
	overflow: visible;
}

.project-lightbox-meta {
	background: #000;
	margin: 0 1px 6px 1px;
	padding: 10px 46px 10px 16px;
	border: #289976 2px solid;
	position: relative;
	min-height: 54px;
}

.project-lightbox-meta h3 {
	color: #b1ff91;
	font: 22px "KomikaAxisRegular", "Helvetica Neue", Helvetica, Sans-Serif;
	font-weight: normal;
	text-align: left;
	text-shadow: rgba(40,153,118,0.6) 2px 4px 0px;
	-webkit-font-smoothing: antialiased;
	-webkit-transform: translate3d(0px, 0px, 0px);
	line-height: 26px;
	margin: 0;
}

.project-lightbox-meta p {
	margin: 2px 0 0 0;
	color: #ddd;
	font: 11px "Helvetica Neue", Helvetica, Sans-Serif;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 14px;
}

.project-lightbox-counter {
	color: #ffe877;
	font-weight: bold;
}

.project-gallery {
	width: 938px;
	position: relative;
	overflow: hidden;
}

.project-gallery-item {
	background: #000 url(images/portfolio/image-loader.gif) 50% 50% no-repeat;
	margin: 0 0 6px 0;
	border: #000 2px solid;
	box-shadow: inset 0 0 0 2px #289976;
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.project-gallery-item img {
	margin: 0px;
	padding: 0px;
	display: block;
	opacity: 0;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: none;
}

.project-gallery-empty {
	color: #fff;
	background: #000;
	border: #289976 2px solid;
	margin: 0 1px 0 1px;
	padding: 28px 24px;
	width: auto;
	text-align: center;
}


/* PORTFOLIO SINGLE PAGE */
#single-list							{ overflow: hidden; }
#single-list .project 					{ left: 0px; top: 0px; width: 100%; overflow: hidden; position: inherit; opacity: 1; }
#single-list .project-imgs				{ width: 623px; position: relative; float: left; overflow: hidden; }
#single-list .project-imgs ul 			{ overflow: hidden; }
#single-list .project-imgs li 			{ background: #000; margin-bottom: 5px; border: #000 2px solid; position: relative; float: left; }
#single-list .project-imgs li.img-desc	{ color: #fff; font: 16px "Helvetica Neue", Helvetica, Sans-Serif; line-height: 24px; width: 603px; padding: 4px 8px 4px 8px; border: #289976 2px solid; }
#single-list .project-imgs li img 		{ margin: 0px; padding: 0px; display: block; }
#single-list .project-info				{ background: #555; margin: 0 1px 0 0; padding: 8px 12px 15px 12px; width: 281px; border: #000 2px solid; position: relative; float: right; }
#single-list .project-info h3			{ color: #b1ff91; font: 32px "KomikaAxisRegular", "Helvetica Neue", Helvetica, Sans-Serif; font-weight: normal; text-align: center; text-shadow: rgba(40,153,118,1) 2px 4px 0px; -webkit-font-smoothing: antialiased; -webkit-transform: translate3d(0px, 0px, 0px); }
#single-list .project-info p 			{ color: #000; font: 15px "Helvetica Neue", Helvetica, Sans-Serif; letter-spacing: -0.5px; line-height: 24px; margin-top: 24px; }
#single-list .project-info ul 			{ overflow: hidden; }
#single-list .project-info li 			{ color: #000; font: 15px "Helvetica Neue", Helvetica, Sans-Serif; letter-spacing: -0.5px; text-transform: uppercase; width: 100%; position: relative; display: block; }
#single-list .project-info li em		{ color: #ff5600; font: 26px "KomikaTextTightRegular", "Helvetica Neue", Helvetica, Sans-Serif; font-weight: thin; letter-spacing: -0.2px; line-height: 26px; text-decoration: none; margin: -2px 0 7px 0; display: block; text-shadow: 0px 0px 0px #555; -webkit-font-smoothing: antialiased; -webkit-transform: translate3d(0px, 0px, 0px); }
#single-list .project-info li a 		{ color: #ff5600; font: 26px "KomikaTextTightRegular", "Helvetica Neue", Helvetica, Sans-Serif; font-weight: thin; letter-spacing: -0.2px; line-height: 26px; text-decoration: none; margin: -2px 0 7px 0; display: block; text-shadow: 0px 0px 0px #555; -webkit-font-smoothing: antialiased; -webkit-transform: translate3d(0px, 0px, 0px); }
#single-list .project-info li a:hover 	{ color: #ffe877; text-decoration: none; text-shadow: 1px 1px 0px #999; }
 

/* CONTACT PAGE */
#contact				{ padding-right: 583px; width: 355px; min-height: 550px; overflow: hidden; position: relative; clear: both; }
#contact h3				{ font-size: 26px; line-height: 28px; margin: 10px 10px 0 10px; padding: 0 5px 0 5px; }
#contact h4				{ font-size: 14px; text-transform: uppercase; margin: 0 10px 6px 10px; padding: 0 5px 6px 5px; border-bottom: 2px solid #000; }
#contact p 				{ margin: 0 10px 6px 10px; padding: 0 5px 6px 5px; border-bottom: 1px solid #000; }
#social-media			{ margin: 24px 15px 12px 15px; overflow: hidden; }
#social-media li 		{ width: 50px; height: 50px; margin: 2px; position: relative; float: left; overflow: hidden; }
#social-media li a 		{ text-indent: -9999px; width: 50px; height: 50px; display: block; }
#facebook				{ background: url(images/contact/social-media.png) 0px 0px no-repeat; }
#linkedin				{ background: url(images/contact/social-media.png) -50px 0px no-repeat; }
#behance				{ background: url(images/contact/social-media.png) -100px 0px no-repeat; }
#apple					{ background: url(images/contact/social-media.png) -150px 0px no-repeat; }
#twitter				{ background: url(images/contact/social-media.png) -200px 0px no-repeat; }
#youtube				{ background: url(images/contact/social-media.png) -250px 0px no-repeat; }
#vimeo					{ background: url(images/contact/social-media.png) -300px 0px no-repeat; }
#skype					{ background: url(images/contact/social-media.png) -350px 0px no-repeat; }
#google					{ background: url(images/contact/social-media.png) -400px 0px no-repeat; }
#flickr					{ background: url(images/contact/social-media.png) -450px 0px no-repeat; }
#stumbleupon			{ background: url(images/contact/social-media.png) -500px 0px no-repeat; }
#delicious				{ background: url(images/contact/social-media.png) -550px 0px no-repeat; }
#digg					{ background: url(images/contact/social-media.png) -600px 0px no-repeat; }
#facebook:hover			{ background: url(images/contact/social-media.png) 0px -50px no-repeat; }
#linkedin:hover			{ background: url(images/contact/social-media.png) -50px -50px no-repeat; }
#behance:hover 			{ background: url(images/contact/social-media.png) -100px -50px no-repeat; }
#apple:hover			{ background: url(images/contact/social-media.png) -150px -50px no-repeat; }
#twitter:hover			{ background: url(images/contact/social-media.png) -200px -50px no-repeat; }
#youtube:hover			{ background: url(images/contact/social-media.png) -250px -50px no-repeat; }
#vimeo:hover			{ background: url(images/contact/social-media.png) -300px -50px no-repeat; }
#skype:hover			{ background: url(images/contact/social-media.png) -350px -50px no-repeat; }
#google:hover			{ background: url(images/contact/social-media.png) -400px -50px no-repeat; }
#flickr:hover 			{ background: url(images/contact/social-media.png) -450px -50px no-repeat; }
#stumbleupon:hover		{ background: url(images/contact/social-media.png) -500px -50px no-repeat; }
#delicious:hover 		{ background: url(images/contact/social-media.png) -550px -50px no-repeat; }
#digg:hover 			{ background: url(images/contact/social-media.png) -600px -50px no-repeat; }

#contact-form-container	{ margin-left: -90px; left: 50%; top: 277px; width: 575px; height: 570px; position: absolute; overflow: visible; opacity: 1; }
#contact-form-success	{ background: url(images/contact/send-success.png) no-repeat; width: 575px; height: 473px; position: absolute; overflow: hidden; }
#contact-form-success p { text-indent: -9999px; height: 0px; overflow: hidden; }
#contact-form 			{ background: url(images/contact/form-bg.png) no-repeat; margin: 2px 0 2px 2px; padding: 1px 9px 1px 1px; width: 556px; height: 467px; position: absolute; }
#contact-form h3		{ text-indent: -9999px; background: url(images/contact/form-title.jpg) no-repeat; width: 548px; height: 71px; overflow: hidden; }
#checkbox				{ margin-top: 5px; padding: 0 34px 0 34px; position: relative; }
#checkbox input[type=checkbox] 			{ background: transparent url(images/contact/checkbox.png) left no-repeat; margin-top: 5px; width: 35px; height: 36px; border: 0px; outline: none; cursor: pointer; position: relative; float: left; overflow: hidden; appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -khtml-appearance: none; }
#checkbox input[type=checkbox]:checked	{ background: transparent url(images/contact/checkbox.png) right no-repeat; }
#checkbox label			{ font: 17px "Helvetica CY", "Helvetica Neue", Helvetica, Sans-Serif; letter-spacing: -0.5px; margin: 7px 0 6px 0; width: 446px; position: relative; float: right; }
#checkbox strong		{ font-size: 24px; letter-spacing: -1px; font-weight: bold; }
#name 					{ padding: 0 40px 0 34px; position: relative; clear: both; }
#name input				{ font: 20px "KomikaHandRegular", "Helvetica Neue", Helvetica, Sans-Serif; text-transform: uppercase; line-height: 26px; background: transparent; padding: 0 15px 0 15px; width: 451px; height: 26px; border: 0px; }
#name label				{ font-size: 14px; line-height: 14px; text-transform: uppercase; margin: 0 0 4px 0; width: 100%; display: block; border-top: #000 1px solid; }
#email					{ padding: 0 40px 0 34px; position: relative; }
#email input			{ font: 20px "KomikaHandRegular", "Helvetica Neue", Helvetica, Sans-Serif; text-transform: uppercase; line-height: 26px; background: transparent; padding: 0 15px 0 15px; width: 451px; height: 26px; border: 0px; }
#email label			{ font-size: 14px; line-height: 14px; text-transform: uppercase; margin: 0 0 4px 0; width: 100%; display: block; border-top: #000 1px solid; }
#phone					{ padding: 0 40px 0 34px; position: relative; }
#phone input			{ font: 20px "KomikaHandRegular", "Helvetica Neue", Helvetica, Sans-Serif; text-transform: uppercase; line-height: 26px; background: transparent; padding: 0 15px 0 15px; width: 451px; height: 26px; border: 0px; }
#phone label			{ font-size: 14px; line-height: 14px; text-transform: uppercase; margin: 0 0 30px 0; width: 100%; display: block; border-top: #000 1px solid; }
#message				{ padding: 0 40px 0 34px; position: relative; }
#message textarea		{ font: 20px "KomikaHandRegular", "Helvetica Neue", Helvetica, Sans-Serif; text-transform: uppercase; line-height: 26px; background: transparent; padding: 16px 6px 4px 6px; width: 100%; height: 130px; border: #000 1px solid; outline: none; resize: none; border-radius: 0; -webkit-border-radius: 0; }
#message label			{ font-size: 14px; line-height: 14px; text-transform: uppercase; left: 38px; top: 3px; position: absolute; }
#captcha				{ height: 0px; overflow: hidden; }
#send-instructions		{ font-size: 12px; text-align: center; margin-top: -5px; padding: 0 40px 0 34px; position: relative; }
#contact-form-status	{ color: #000; font-size: 12px; text-align: center; margin: -2px 0 0 0; padding: 0 40px 0 34px; min-height: 18px; }
#send-button			{ text-indent: -9999px; background: transparent url(images/contact/send-bg.png) no-repeat; left: 340px; top: 471px; width: 62px; height: 23px; border: 0px; position: absolute; overflow: hidden; cursor: pointer; }
#send-arrow				{ background: url(images/contact/send-arrow.png) no-repeat; left: 280px; top: 486px; width: 52px; height: 34px; position: absolute; }


/* FOOTER */
footer						{ position: relative; opacity: 1; overflow: hidden; clear: both; }
#foot-banner				{ background: #67cc8e; width: 934px; height: 68px; border: #000 2px solid; }
#foot-banner span 			{ left: 324px; top: 2px; width: 290px; height: 68px; position: absolute; }
#foot-banner span a 		{ text-indent: -9999px; text-decoration: none; background: transparent; width: 290px; height: 68px; display: block; overflow: hidden; }
#foot-banner span a:hover 	{ text-decoration: none; background: transparent url(images/backtotop.jpg) no-repeat; }
#foot-banner span a:active	{ top: 0px; }
#sitemap					{ color: #000; font-size: 12px; text-align: left; line-height: 22px; margin: 0px; padding: 0 0 0 6px; width: 461px; height: 22px; position: relative; float: left; }
#sitemap a					{ color: #000; text-decoration: none; }
#sitemap a:hover			{ color: #ff5600; text-decoration: underline; }
#disclaimer					{ color: #000; font-size: 12px; text-align: right; line-height: 22px; margin: 0px; padding: 0 6px 0 0; width: 461px; height: 22px; position: relative; float: right; }
#disclaimer a				{ color: #000; text-decoration: none; }
#disclaimer a:hover			{ color: #ff5600; text-decoration: underline; }


/* Text-Select-Color: Mozilla based browsers */
::-moz-selection	{ background-color: #333; color: #fff; }

/* Text-Select-Color: Works in Safari */
::selection			{ background-color: #333; color: #fff; }

/* STATIC + VANILLA JS MIGRATION OVERRIDES */
#header-bg { z-index: 0; }
#header-sunlight { top: 0px; z-index: 10; }
#header-img-container { z-index: 20; }
#home-title { z-index: 25; }
#header-title { z-index: 30; }

#loader { opacity: 0; transition: opacity 180ms ease; display: block; pointer-events: none; }
#loader.is-visible { opacity: 1; }

#content {
	position: relative;
	z-index: 10;
	transition: height 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js #content > section.route-section {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
	transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js #content > section.route-section[hidden] {
	display: none;
}

.js #content > section.route-section.is-active {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.js #content > section.route-section.is-exiting {
	opacity: 0;
	transform: translate3d(0, -4px, 0);
}

.js #default-header[hidden] {
	display: none !important;
}

#header-bottom,
header {
	position: relative;
	z-index: 20;
}

#default-header {
	opacity: 0;
	transition: opacity 300ms ease;
}

#default-header.is-visible {
	opacity: 1;
}

#home {
	transition: height 560ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#home.is-collapsed {
	height: 166px;
	cursor: pointer;
}

#header-img-container {
	z-index: 20;
	transition: opacity 500ms ease;
}

#header-sunlight {
	transition: top 560ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

footer {
	transition: height 400ms ease, opacity 300ms ease;
}

.js footer:not(.is-visible) {
	height: 0px;
	opacity: 0;
}

.js footer.is-visible {
	height: 94px;
	opacity: 1;
}

.parallax-root {
	position: relative;
}

.parallax-layer {
	will-change: left, margin-left;
}

.port-thumb {
	cursor: pointer;
}

.port-thumb-bw {
	transition: opacity 150ms ease;
}

.port-thumb:hover .port-thumb-bw,
.port-thumb:focus .port-thumb-bw,
.port-thumb:focus-within .port-thumb-bw {
	opacity: 0;
}

.port-thumb:focus {
	outline: 2px solid #ff5600;
	outline-offset: -2px;
}

.port-thumb.is-viewed .port-viewed,
.port-thumb.is-viewing .port-viewed {
	opacity: 1;
}

#thumb-container {
	transition: opacity 250ms ease;
}

#like-box {
	transition: opacity 250ms ease;
}

#project-container {
	transition: opacity 180ms ease, transform 220ms ease;
}

#project-container.is-open {
	position: fixed;
	left: 50%;
	top: 86px;
	margin-left: -469px;
	width: 938px !important;
	height: auto !important;
	max-height: calc(100vh - 120px);
	overflow-x: hidden;
	overflow-y: auto;
	opacity: 1;
	pointer-events: auto;
	z-index: 9000;
	transform: translate3d(0, 0, 0);
}

.js #project-container {
	opacity: 0;
	pointer-events: none;
	transform: translate3d(0, 8px, 0);
}

.js #project-container.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
}

#portfolio-overlay {
	position: fixed;
	inset: 0;
	width: auto !important;
	height: auto !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
	background: rgba(0,0,0,0.58);
}

#portfolio-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

#project-close {
	position: fixed;
	left: 50%;
	top: 24px;
	margin-left: 402px;
	display: block;
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
}

#project-close.is-open {
	opacity: 1;
	pointer-events: auto;
}

body.project-lightbox-open {
	overflow: hidden;
}

body.project-lightbox-open #project-close {
	top: 94px;
	margin-left: 418px;
}

.project-nav a.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.js #contact-form-container {
	position: fixed;
	z-index: 4900;
	opacity: 0;
	pointer-events: none;
	transition: opacity 250ms ease;
}

.js #contact-form-container.is-visible {
	opacity: 1;
	pointer-events: auto;
}

#contact-form {
	left: 0px;
	top: 0px;
	transform: rotate(0deg);
	transform-origin: 78% 90%;
	transition: transform 1s ease, left 2.5s ease, top 1.8s ease, opacity 200ms ease;
}

#contact-form.is-submitting {
	opacity: 0.85;
}

#contact-form-status.is-error {
	color: #b31212;
}

#contact-form-status.is-success {
	color: #0c5f2f;
}

.js #contact-form-container.is-sent {
	overflow: visible;
}

.js #contact-form-container.is-sent #contact-form {
	left: 3000px;
	top: 1000px;
	transform: rotate(20deg);
}

#send-arrow {
	transition: transform 120ms ease;
}

#send-arrow.is-wiggling {
	transform: translate3d(9px, -4px, 0);
}

.port-thumb-error {
	display: flex;
	align-items: center;
	justify-content: center;
}

.port-thumb-error .port-img-link {
	text-indent: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
}

.port-thumb-error .port-img-link span {
	width: auto;
	height: auto;
	display: inline;
	cursor: default;
	font: 18px "KomikaTextKapsRegular", "Helvetica Neue", Helvetica, Sans-Serif;
	color: #000;
}

@media (prefers-reduced-motion: reduce) {
	#content,
	#home,
	#header-img-container,
	#header-sunlight,
	footer,
	#portfolio-overlay,
	#project-close,
	#thumb-container,
	#like-box,
	#project-container,
	#contact-form,
	#contact-form-container,
	#loader,
	.parallax-layer,
	#send-arrow {
		transition: none !important;
		animation: none !important;
	}
}