/* ----------------------------------------------
	Joel's Portfolio Dot Com
	Joel's Styles v.0.0.6 
	Hand Coded by Joel OCT 2014
	© joel :: joelsportfolio.com
---------------------------------------------- */
/*
	#Base Styles
		  #Type
		  #Buttons
		  #Color
		
	#Layout
	
	#Page
	
	#Plugins
	
	#Media

*/


/* #Base Styles
---------------------------------------------- */
/* Disable User Selects */
* {
	outline:none;
/*	-webkit-user-select: none;
	 -khtml-user-select: none;
	   -moz-user-select: none;
		 -o-user-select: none;
		 	user-select: none;
*/}

/* Constrain full width images */
img { max-width: 100%; }

body { overflow-x:hidden; }

span.seperator { display:block; margin:0; }

.hide { opacity:0; display:none;}

/* #Typography 
---------------------------------------------- */

/* Header Styles */

.title {display: block;} /*added to fix bug in footer menu*/

.overlay {opacity:0;} /* hide overlay until js init ready */

.overlay .title, .overlay .subhead{
	font-size:24px;
	line-height:36px;
	text-align:center;
	text-shadow: 0px 1px 4px rgba(100,100,100,0.5);
	text-transform:none;
}
.overlay .title, 
#gallery .title {
	font-size:38px;
	line-height:48px;
	text-transform:uppercase;
}

#gallery .title {
font-weight: 100;
letter-spacing: 2pt;
text-shadow: black 1px 0px 1px;
color: #F4F4F4;
/*font-size: 24px;*/
margin: 2em 0 1.5em 0;
text-align:center;
}

#gallery #menu {
	text-transform:uppercase;
	text-align:center;
}

/*article h1, article h2 {text-shadow:#fff 1px 2px 2px; text-transform:capitalize;}*/

/* Body Styles */
.body-copy { text-align:center; text-shadow:#FFF 0px 1px 1px;}
.body-copy a { color:#0095CD; text-transform:none;}

.content .text-block a {font-size:21px; text-transform:none; }

figcaption, figcaption a { line-height:28px; font-size:18px; max-width:500px; margin:0 auto; }
figcaption a { text-transform:none; text-decoration:underline;}


#skills header h1, 
#skills header h2, 
#skills ul { text-shadow:none; text-transform:none; }

/* #Color
---------------------------------------------- */
hr,
.content h1, 
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.content p, 
.content ul,
.content li,
.content figcaption,
.display .text-block { color:rgb(106,106,106); }

.content a,
.content figcaption a,
.content .subhead { color:#0095cd; }

body { background-color:#F4F4F4; }

#main-footer { background-color:#1C1C1C; }


.overlay { color:white; }

.overlay .text-block,
.overlay .image-block { background-color:rgba(44,44,44,0.44); }

#main-footer, 
#main-footer a { color:rgb(88,88,88); }

#main-footer a:hover { color:white; }

#menu,
#skills header h1, 
#skills header h2, 
#skills ul, 
#skills ul li { color:#F4F4F4; }

.bgdark { background-color:#1c1c1c; }
.bglite { background-color:#F4F4F4; }
.bgblue,
a.action { background-color:#0095cd; }
a.action:hover, { background-color:#1c1c1c; }

/* Gradients
---------------------------------------------- */
.gradient-1 {
  	background-color:#EBEBEB;
    background-image:linear-gradient(top, #A8A8A8 0%, #EBEBEB 62%);
	background-image: -moz-linear-gradient(top, #A8A8A8 0%, #EBEBEB 62%, #A8A8A8);	
    background-image:-webkit-linear-gradient(top, #A8A8A8 0%, #EBEBEB 62%);
    background-image:-ms-linear-gradient(top, #A8A8A8 0%, #EBEBEB 62%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A8A8A8),
        color-stop(0.62, #EBEBEB),
    );
    /*background-attachment:fixed;*/
}
.gradient-2 {
	background-color:#EBEBEB;
	background-image: linear-gradient(top, #A8A8A8 0%, #EBEBEB 62%, #BBBBBB 100%);
	background-image: -o-linear-gradient(top, #A8A8A8 0%, #EBEBEB 62%, #BBBBBB 100%);
	background-image: -moz-linear-gradient(top, #A8A8A8 0%, #EBEBEB 62%, #BBBBBB 100%);
	background-image: -webkit-linear-gradient(top, #A8A8A8 0%, #EBEBEB 62%, #BBBBBB 100%);
	background-image: -ms-linear-gradient(top, #A8A8A8 0%, #EBEBEB 62%, #BBBBBB 100%);
	
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #A8A8A8),
		color-stop(0.62, #EBEBEB),
		color-stop(1, #BBBBBB)
	);
	
	/*background-attachment:fixed;*/
}

.gradient-3 {
	background-color:#1C1C1C;
	background-image: linear-gradient(top, #1C1C1C 0%, #F4F4F4 100%);
	background-image: -o-linear-gradient(top, #1C1C1C 0%, #F4F4F4 100%);
	background-image: -moz-linear-gradient(top, #1C1C1C 0%, #F4F4F4 100%);
	background-image: -webkit-linear-gradient(top, #1C1C1C 0%, #F4F4F4 100%);
	background-image: -ms-linear-gradient(top, #1C1C1C 0%, #F4F4F4 100%);
	
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #1C1C1C),
		color-stop(1, #F4F4F4)
	);
	
	/*background-attachment:fixed;*/
}

.gradient-4 {
	background-color:#1C1C1C;
	background-image: linear-gradient(top, #0095CD 0%, #1C1C1C 100%);
	background-image: -o-linear-gradient(top, #0095CD 0%, #1C1C1C 100%);
	background-image: -moz-linear-gradient(top, #0095CD 0%, #1C1C1C 100%);
	background-image: -webkit-linear-gradient(top, #0095CD 0%, #1C1C1C 100%);
	background-image: -ms-linear-gradient(top, #0095CD 0%, #1C1C1C 100%);
	
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #0095CD),
		color-stop(1, #1C1C1C)
	);
	
	/*background-attachment:fixed;*/
}

/* #Layout
---------------------------------------------- */

/* Grid Block Definitions
---------------------------------------------- */
.grid-2 { float:left; width:40%; margin:0 5%;}
.grid-3 { float:left; width:33.333%; margin:0; padding: 0 3.333%;}
.grid-4 { float:left; width:20%; margin:0 2.5%; min-width:12em;}

/* Position
---------------------------------------------- */
.right {float:right;}
.left {float:left;}
.clear {clear: both;}
.center {text-align: center; margin: 0 auto;}
.column { float: left; }

.page-title { text-indent:-9999px; position:absolute; }
.indent { text-indent:-9999px;}

/* Header
---------------------------------------------- */

#header,
#header .hero,
#header .slide,
#header .overlay {
	position:absolute;
}
#header {
	width:100%;
	top:0;
	z-index:10000;
}
#header .hero {
	z-index:-1;
}

#home #header .hero { z-index:0; }

#header .overlay {
	z-index:1;
	top:0;
	width:37.5%;
	margin:0;
	padding:0;
	
	-webkit-box-shadow: 10px -50px 70px rgba(0, 0, 0, 0.4);
	   -moz-box-shadow: 10px -50px 70px rgba(0, 0, 0, 0.4);
		-ms-box-shadow: 10px -50px 70px rgba(0, 0, 0, 0.4);	   
		 -o-box-shadow: 10px -50px 70px rgba(0, 0, 0, 0.4);
			box-shadow: 10px -50px 70px rgba(0, 0, 0, 0.4);

}
#header .overlay .image-block {
	padding:3.75em 0 1.875em 0;
	text-align:center;
}
#header .overlay .text-block {
	padding:22em 1.875em 0 1.875em;			
}
#header .overlay .text-block p {
	padding: 0 60px;
	margin: 10px 0;
}
#header .overlay,
#header .overlay .text-block {
	min-height:62.5em;
	max-height:62.5em;
	overflow:hidden;
}
#header .overlay .button {
	margin:40px auto 0px auto;
}

.display {
	width:100%;
	height:auto;
	min-height:75em; /* 1200px */
	margin:0;
	padding:0;
}

/* Wrappers 
---------------------------------------------- */
#page section {
	clear:both;
	position:relative;
	z-index:10001;
}

.wrapper,
.column-wide,
.content .list-block {min-width:960px;}

.column-max { width:100%; text-align:center; }
.column-max img {max-width:100%;}

#home .column-wide {min-width:1068px;}

.content .text-block {
	text-align:justify;
}
.content .list-block {
	padding: 4em 0;
}
.content p,
.content ul { margin:1em 0; }
.content p:first-child { margin:4em 0 0 0; }

.content {
	padding: 4em 0 45em 0;
}

.column-wide {
	max-width:66.667%;
	margin: 0 auto;
}
.content .text-block {
	padding: 0 2.5% 0 0;
	margin: 0 0 0 2.5%;
}
.content .text-block.left { width: 50%; }
.content .image-block.right { max-width:45%; }



/* #Page Sections
---------------------------------------------- */
#page { margin-top:62.5em; }

#resume {
	display:block; 
	position:relative; 
	height:auto;
	z-index:1;
}
#resume .page {
	display: block; 
	margin:0 auto; 
	max-width:1275px;
}
#resume .page a {
	display: block;
	position: relative;
	padding: 0.5em 1em;
	margin-top: 2em;	
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-family: sans-serif;
	font-size: 2em;
	color: #A0A0A0;
}

#resume .page a:hover {
	color:#0091dc;
}

#projects #header {
	z-index:auto !important;
	min-height:0;
}

#projects #page {
	background:#1C1C1C;
	/*margin-top:62.5em;*/
	margin-top:0;
}
#projects #page section { z-index:1; }
#projects .portfolio-content {
	background:url(img/bkgd-grain-grey.png);
	padding:0.625em 0 0.625em 3.125em;
}

#projects .portfolio-content .portfolio-item {
	display:inline-block;
	padding:1.875em 0;
}

#projects .portfolio-content .section-title { 
	text-transform:uppercase; 
	font-weight:100; 
	letter-spacing:2pt; 
	text-shadow:#000 1px 0px 1px; 
	color:#f6f6f6; 
	font-size:24px; 
	padding:0.625em 0;
}

#ads #header .overlay .text-block {min-height:0px;}
#ads #header .overlay .image-block {padding:0; min-height:33.333em; text-align:left;}
#ads #header .logo {padding:10%;}
#ads #header .logo img { width:80%; }

#ads #intro { padding:0 0 45em 0;  }
#ads #intro .image-block { margin-top:3.75em; text-align:center; }

#northpark #intro {padding: 4em 0 65em 0;}
#northpark #intro .image-block { margin:-12em 0 0 0; text-align:center; }
#northpark #intro .addy {  margin:-16em 0 0 0; }
#northpark #intro .logos {  margin:1em 0 0 0; }
#northpark #intro .image-block figcaption { margin-top:-4em; padding:0 10%; }

#northpark #header .overlay .text-block,
#pigment #header .overlay .text-block { padding-top:0.9375em; }

#pigment #intro .image-block { margin:-12em 0 0 0; text-align:center; }

span.cogs {
	display:block;
	background:url(img/gears.png) 80% 100% no-repeat;
	width:100%; 
	min-height:26.25em;
	margin-top:-30em;
}
#ads span.cogs {
	margin-top:-15em;
}
#northpark span.cogs {
	background:url(img/gears.png) 75% 100% no-repeat;
}

/* Default Home Hero Slide Settings Before JS */
#home.default .slide { opacity: 1; left:0; }

#projects {min-height:80em; padding:0;}

#joel #page {margin-top: -64px;}
#joel .text-block { text-align:center;}

#home #featured a {min-height:370px;}
#featured .title { margin:4px 0;}

.featured-text {
	display:block;
	clear:both;
	text-align:center;
	margin:0 1em;
	padding:1em;
}

#skills {max-width:none; min-width: 90em; padding: 4em 16.667% 80em 16.667%;}
#skills header { text-align:left; margin:4em auto 2em auto; }
#skills .graphic {margin-left:-2em;}

/* Gallery Section */

#gallery { max-width:100%; min-width:980px; min-height:70em; background:url(img/bkgd-grain-grey.png); }
		
#gallery aside {
	width:38.196448768%; /* 1/3 phi */
	/*margin-left: 66.667%;
	min-height: 62.5em;
	border:red solid 1px;*/
}

#gallery .project-viewer {
	width:61.803551232%; /* 2/3 phi */
	position:relative;
}

#gallery .project-viewer .portfolio-item {
	position:absolute;
	margin-right: 16.667%;
	top:0;
	opacity:0;
	-webkit-transition: all 444ms ease;
	   -moz-transition: all 444ms ease;
		-ms-transition: all 444ms ease;
		 -o-transition: all 444ms ease;
			transition: all 444ms ease;	
}
#gallery .project-viewer .portfolio-item.visible {opacity:1; } /* .visible to show/hide in JS */
#gallery .project-viewer .portfolio-item.active { opacity:1; } /* .active to show/hide in JS */

#gallery .project-viewer .portfolio-item .image-block {
	position: relative;
	text-align: center;
	margin:11.5em 2em 0 2em;
}

#gallery .project-viewer .portfolio-item .title { text-align:center; }

#gallery .text-block {
	padding: 0 2em;
	text-align:justify;
}
#gallery .project-viewer #Email.portfolio-item .image-block {
	margin:4em 2em 0 2em;
	max-height:45em;
	overflow:hidden;
}
#gallery .project-viewer #Email.portfolio-item .image-block img { max-height:45em;} 


/* Details Section */

#details .text-block {
	padding:0 0 0 2em;
	margin:0 2em 0 0;
}
#details .list-block ul { padding-left:16px;  line-height:1.5em; }
#details .list-block li { list-style-image:url(img/bullet.png); margin-bottom:0.75em; }



#flow { 
	clear:both;
	width:100%;
	padding: 0 0 15em 0;
}

/* Featured Section */

#featured {padding:2em 0;}
	
#featured .nav-block {

	position:relative;
	min-height:24em;
	min-width:360px;
	
}

#featured .nav-block a .title {
	
	font-size:16px;
	line-height:20px;
	color:#F4F4F4;

}

#featured .nav-block.left {

	background:url(img/nav-arrow-left-white.png) no-repeat 0 50%;

}

#featured .nav-block.left .title {
	text-align:left;
	position:absolute;
	left:45px;
	top:45%;
}

#featured .nav-block.left img {
	padding:5em 0 0 90px;	
}


#featured .nav-block.right {

	background:url(img/nav-arrow-right-white.png) no-repeat 100% 50%;

}

#featured .nav-block.right .title {
	text-align:right;
	position:absolute;
	right:45px;
	top:45%;
}

#featured .nav-block.right img {
	padding:5em 90px 0 0;	
}


#featured .nav-block.top {

	background:url(img/nav-arrow-up-white.png) no-repeat 50% 0%;

}

#featured .nav-block.top .title {
	text-align:center;
	position:relative;
	top:50px;
	display:block;
}

#featured .nav-block.top img {
	padding:4em 0 0 0;
	margin:0 auto;
	display:block;
}

#featured .grid-2 {
	
	float:none;
	display:inline-block;
	width:auto !important;
	max-width:40%;
	margin:0 4%;

}

/*Homepage Intro Section*/
#intro .col-2 {
	width: auto;
	min-width: 48%;
	max-width: 48%;
	display: inline-block;
	height: auto;
	padding: 0;
	margin: 0 0.8%;
	vertical-align:top;
}
#icon-nav,
#page.wrapper {min-width:1480px;}

#joel-nav img {

	padding:0;

}

#main-footer .footer-credit { padding: 0 0 3em 0; }

/* Page Plugins
---------------------------------------------- */
/* Joels Hero Fader Styles
---------------------------------------------- */
/*
	Hides hero images at start, 
	then display on load using JS
*/
.overlay img,
.joels-hero-fader img {
	max-width:none;
	opacity:0;
}
.overlay img,
.joels-hero-fader img.zenified,
.joels-simple-fader img.zenified { opacity:1; }
.joels-simple-fader img.zenified { position:absolute; }

/* Page Graphics
---------------------------------------------- */
#featured img {
	padding-top:4em;
}
#featured img.tall {
	padding:2em 0;	
}


/* SVG Graphics */
.graphic.large { width:100%; min-height:512px; max-height:512px; }
.graphic { min-width:256px; min-height:256px; }


/* Footer
---------------------------------------------- */
#main-footer {
	display:block;
	min-height:5em;
	padding-top:2em;
	text-align:center;
	background-color:#1c1c1c;
	border-top:ridge 2px #585858;
}


/* #Nav
---------------------------------------------- */
#main-nav {
	position:fixed;
	z-index:1000;
	top:0;
	right:0;
}
#main-nav a {
	display:block;
	min-width:64px;
	min-height:64px;
	max-width:64px;
	min-height:64px;
	overflow:hidden;
	text-indent:-9999px;
	background-color:#000;
	margin:0 0 1px;
}

#home-btn { background-image:url(img/nav-icon-home.png)}
#joel-btn { background-image:url(img/nav-icon-joel.png)}
#portfolio-btn { background-image:url(img/nav-icon-grid.png)}
#info-btn { background-image:url(img/nav-icon-info.png)}

/* Icon Navigation
---------------------------------------------- */
#icon-nav { background-color:#1c1c1c; padding: 0; margin:0; }
#icon-nav #joel-nav .grid-5 {display:inline-block; max-width:18%; padding:1.25em;}
#icon-nav #joel-nav a {

	color: #585858;
	font-size: 0.8em;
	
	-webkit-transition: all 0.3s;
}
#icon-nav #joel-nav a:hover {
	color:#f4f4f4;	
}
#icon-nav #joel-nav .title {
	font-family: 'Shadows Into Light Two', sans-serif;	
}
/* #Buttons 
---------------------------------------------- */
.button {
	background-color: #0095CD;
	color: #F4F4F4;
	padding: 12px 18px;
	margin: 0 auto;
	clear: both;
	display: block;
	width: 50%;
	text-align: center;
	-webkit-border-radius:6px;
	   -moz-border-radius:6px;
	    -ms-border-radius:6px;
	     -o-border-radius:6px;
	   		border-radius:6px;	
}
.button:hover {
	background-color:#F4F4F4;
	color:#0095CD;
}

#action{
	display:block;
	background:#1c1c1c;
	padding: 10em 0;
}
#action .button {
	display:block;
	clear:both;
	background:#1c1c1c; 
	width: 66.67%;
	min-width:12.5%;
	max-width:720px;
	padding: 1em;
	margin: 0 auto;
	cursor: pointer;
	
	border:1px solid #ccc;
	
	-webkit-border-radius: 0.75em;
	   -moz-border-radius: 0.75em;
		-ms-border-radius: 0.75em;
		 -o-border-radius: 0.75em;
			border-radius: 0.75em;
	
	-webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.75);
	   -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.75);
		-ms-box-shadow: 0 0 2em rgba(0, 0, 0, 0.75);	   
		 -o-box-shadow: 0 0 2em rgba(0, 0, 0, 0.75);
			box-shadow: 0 0 2em rgba(0, 0, 0, 0.75);
			
	font-size: 34px;
	text-transform: uppercase;
	text-align:center;
	color: #F4F4F4;
	background-color:#0095CD;
}
#action .button:hover {
	color: #0095CD;
	background-color:#F4F4F4;
	border:solid 1px #F4F4F4;
}



/* Sizes
---------------------------------------------- */
.full {
	max-width: 100%;
	min-width: 100%;
	width: auto;
	height: auto;
}
.medium {
	max-width: 66.67%;
	min-width: 66.67%;
	width: auto;
	height: auto;
}
.small {
	max-width: 33.33%;
	min-width: 33.33%;
	width: auto;
	height: auto;
}


/* #Animation Effects
---------------------------------------------- */


/* #Media
---------------------------------------------- */
.cinema-size #header,
.ginormous-hd #header { overflow:hidden; min-height:62.5em; }

/*.cinema-size #header.hero { background-image:url(../images/hero/header-print-ads-lg.jpg); min-height:62.5em; }

.standard-size #header.hero,
.tablet-portrait #header.hero,
.tablet-landscape #header.hero { background-image:url(../images/hero/header-print-ads-md.jpg); min-height:31.25em; }

.mobile-portait #header.hero,
.mobile-landscape #header.hero { background-image:url(../images/hero/header-print-ads-sm.jpg); min-height:15.625em; }*/

.ginormous-hd #hero1 .overlay { background:url(../images/hero/header-print-ads-ginormous-hd-blur.jpg) no-repeat; }
.ginormous-hd #hero2 .overlay { background:url(../images/hero/header-northpark-ginormous-hd-blur.jpg) no-repeat; }
.ginormous-hd #hero3 .overlay { background:url(../images/hero/header-pigment-ginormous-hd-blur.jpg) no-repeat; }

.cinema-size #hero1 .overlay { background:url(../images/hero/header-print-ads-large-cinema-blur.jpg) no-repeat; }
.cinema-size #hero2 .overlay { background:url(../images/hero/header-northpark-large-cinema-blur.jpg) no-repeat; }
.cinema-size #hero3 .overlay { background:url(../images/hero/header-pigment-large-cinema-blur.jpg) no-repeat; }

/* ==============================THESE STILL NEED TO BE CREATED AND POLISHED=================================== */
.standard-size #hero1 .overlay { background:url(../images/hero/header-print-ads-standard-blur.jpg) no-repeat; }
.standard-size #hero2 .overlay { background:url(../images/hero/header-northpark-standard-blur.jpg) no-repeat; }
.standard-size #hero3 .overlay { background:url(../images/hero/header-pigment-standard-blur.jpg) no-repeat; }

.tablet-portrait #hero1 .overlay { background:url(../images/hero/header-print-ads-md-blur.jpg) no-repeat; }
.tablet-portrait #hero2 .overlay { background:url(../images/hero/header-northpark-md-blur.jpg) no-repeat; }
.tablet-portrait #hero3 .overlay { background:url(../images/hero/header-pigment-md-blur.jpg) no-repeat; }

.mobile-landscape #hero1 .overlay { background:url(../images/hero/header-print-ads-sm-blur.jpg) no-repeat; }
.mobile-landscape #hero2 .overlay { background:url(../images/hero/header-northpark-sm-blur.jpg) no-repeat; }
.mobile-landscape #hero3 .overlay { background:url(../images/hero/header-pigment-sm-blur.jpg) no-repeat; }

.mobile-portait #hero1 .overlay { background:url(../images/hero/header-print-ads-sm-blur.jpg) no-repeat; }
.mobile-portait #hero2 .overlay { background:url(../images/hero/header-northpark-sm-blur.jpg) no-repeat; }
.mobile-portait #hero3 .overlay { background:url(../images/hero/header-pigment-sm-blur.jpg) no-repeat; }

@media screen and (max-width: 480px) {
	
	
}
@media screen and (min-width:481px) and (max-width: 1200px) {
	
	
}
@media screen and (min-width:1201px){



}


/* CLEAN & SORT THESE STYLES BELOW FOR JOEL'S PROJECT AJAX BOX */

/* ----------------------------------------------
	Joel's Portfolio Dot Com
	Joel's AjaxBox JS Styles v.0.0.7e
	Hand Coded by Joel OCT 2014
	© joel :: joelsportfolio.com
---------------------------------------------- */
/*
	v.0.0.7e changes:
	• Fix/Adjust Print Callateral Section
	• Added Logo Section
	
	v.0.0.7d changes:
	• Fix/Adjust Retouching Boxes
	
	v.0.0.7c changes:
	•  project details to skinny column stacked on right side
	•  added classes for .wide .tall img
	•  added classes for each separate section [.advertising, .print .direct-mail, etc]
	
*/
#joels-ajax-bkgd {
	width:100%;
	height:100%;
	background:none;
	display:block;
	z-index:0;
	position:fixed;
	top:0;
	left:0;
	background-color:#1c1c1c;
	opacity:0.9;
	-webkit-transition: all 350ms ease;
	   -moz-transition: all 350ms ease;
	    -ms-transition: all 350ms ease;
	     -o-transition: all 350ms ease;
			transition: all 350ms ease;		
}
#joels-ajax-box {
	display:none;
	opacity:0;
	z-index:9998;
	position:fixed;
	left:5%;
	top:5%;

	width:90%;
	height:90%;
	
	/*
	width:61.803%;
	min-height:61.803%;
	*/
	
	
	
	/*top:16.6667%;
	left:19.0985%;
	width:61.803%;
	height:66.6667%;*/
	
	/*max-height:61.803%;
	min-height:61.803%;*/
	
	/*min-width:580px;*/
	/*min-height:580px;*/	
	
/*
	background:#1c1c1c;
	
	-webkit-box-shadow: 0px 0px 50px #000;
	   -moz-box-shadow: 0px 0px 50px #000;
	    -ms-box-shadow: 0px 0px 50px #000;
		 -o-box-shadow: 0px 0px 50px #000;
		 	box-shadow: 0px 0px 50px #000;
*/
	
	-webkit-transition: all 350ms ease;
	   -moz-transition: all 350ms ease;
	    -ms-transition: all 350ms ease;
	     -o-transition: all 350ms ease;
			transition: all 350ms ease;	
}

/*.active class added in showAjaxBox() function*/
#joels-ajax-wrapper.active #joels-ajax-bkgd { z-index:1; }
#joels-ajax-wrapper.active #joels-ajax-box{
	opacity:1;
	-webkit-transition: all 333ms ease-in-out;
	   -moz-transition: all 333ms ease-in-out;
	    -ms-transition: all 333ms ease-in-out;
	     -o-transition: all 333ms ease-in-out;
			transition: all 333ms ease-in-out;	
}

/*.static class added in app pages*/
#joels-ajax-wrapper.static #joels-ajax-box{ opacity:1; position:absolute;}


#close-ajax-box {
	position: fixed;
	display: block;
	right:24px;
	top: 4px;
	width: 38px;
	height: 38px;
	padding: 16px 0 0 0;
	margin-top: 12px;
	z-index:10001;
	cursor: pointer;
	
	background: #222;
	color: #666;
	font-family: Arial;
	font-size: 32px;
	font-weight: 400;
	text-align: center;
	line-height: 1px;
	
	border: solid 2px #666;
	
	-webkit-border-radius: 32px;
	   -moz-border-radius: 32px;
	    -ms-border-radius: 32px;
	     -o-border-radius: 32px;
	        border-radius: 32px;
}
#close-ajax-box:hover{
	color: #CCC;
	border-color: red;
	-webkit-transition: all 150ms ease-in-out;
	   -moz-transition: all 150ms ease-in-out;
	    -ms-transition: all 150ms ease-in-out;
	     -o-transition: all 150ms ease-in-out;
			transition: all 150ms ease-in-out;

}
#next-ajax-box,
#prev-ajax-box {
	display: block;
	min-width: 75px;
	width: 6%;
	height: 100px;
	margin-top: 25%;
	position: absolute;
	background-repeat: no-repeat;
	opacity: 0.88;
	filter: alpha(opacity = 88);
	-moz-opacity: 0.88;
	zoom: 1;
	z-index: 9999;
	cursor:pointer;
	
	background-image:url(img/big_transparent.gif); /* transparent bkgd fix for Internet Explorer 6. */
	background-repeat: repeat;
	background-position: center center;
	
}
#next-ajax-box {	
	right: -6%;	
	background: url(img/arrow_right.png) no-repeat center center;
	-webkit-box-shadow: 10px 0px 50px #000;
	   -moz-box-shadow: 10px 0px 50px #000;
	    -ms-box-shadow: 10px 0px 50px #000;
		 -o-box-shadow: 10px 0px 50px #000;
		 	box-shadow: 10px 0px 50px #000;
			
	-webkit-border-radius: 2em 0 0 2em;
	   -moz-border-radius: 2em 0 0 2em;
		-ms-border-radius: 2em 0 0 2em;
		 -o-border-radius: 2em 0 0 2em;
			border-radius: 2em 0 0 2em;
			
}
#next-ajax-box:hover { }
#next-ajax-box.disabled { cursor:default; opacity:0.1; }
#prev-ajax-box {
	left: -6%;
	background: url(img/arrow_left.png) no-repeat center center;	
	-webkit-box-shadow: 10px 0px 50px #000;
	   -moz-box-shadow: 10px 0px 50px #000;
	    -ms-box-shadow: 10px 0px 50px #000;
		 -o-box-shadow: 10px 0px 50px #000;
		 	box-shadow: 10px 0px 50px #000;
			
	-webkit-border-radius: 0 2em 2em 0;
	   -moz-border-radius: 0 2em 2em 0;
		-ms-border-radius: 0 2em 2em 0;
		 -o-border-radius: 0 2em 2em 0;
			border-radius: 0 2em 2em 0;
}
#prev-ajax-box:hover { }
#prev-ajax-box.disabled { 
	cursor:default; 
	opacity:0.08;
	filter: alpha(opacity = 08);
	-moz-opacity: 0.08;
}

/* Multi-Slide Styles
---------------------------------------------- */
/* Thumbnail Icon List
---------------------------------------------- */
#thumbnails {
	display:inline;
	width: auto;
	margin:0;
	padding: 1% 0;
	z-index:10;
	line-height:0;
	border:none;
	text-align:left;
}
#thumbnails li { display:inline-block; padding: 2em 0 0 0; }
#thumbnails a {display:inline-block; opacity:0.33; } /* dim when not selected */
#thumbnails a.selected { opacity:1; cursor:default; } /* on when selected */
#thumbnails a.selected img { border:1px solid #777; } /* show border when selected */

#thumbnails img {
	max-width:100%;
	max-height:7em;
}


/* Project Page Styles
---------------------------------------------- */
#joels-ajax-content {
	width:100%;
	height:100%;	
}

#joels-ajax-box img {	
	padding:5%;
	background:#1c1c1c;
	border:1px solid #000;
	
	-webkit-box-shadow: 0px 0px 50px #000;
	   -moz-box-shadow: 0px 0px 50px #000;
	    -ms-box-shadow: 0px 0px 50px #000;
		 -o-box-shadow: 0px 0px 50px #000;
		 	box-shadow: 0px 0px 50px #000;	
}

/* Portfolio Item Content
---------------------------------------------- */
.portfolio-item-content .portfolio-image {
	width:62.8%;
	margin:0 0 5% 0;
	padding:0;
	float:left;
	text-align: center; 
}
.portfolio-item-content .portfolio-image img { /* width:100%; height:auto; */ }

/* 	Portfolio Item FlipBook
	ADDED 3/12/2015 Object Class to control embeded Flash FlipBooks
---------------------------------------------- */

.flipbook {background-color:#1c1c1c;}

.flipbook .portfolio-item-content .title-block {
	padding-top: 7.5%;	
}

.portfolio-item-content .portfolio-object {
	
	width: 62.8%;
	margin: -5% 2.5% 0 2.5%;
	padding: 0;
	float: left;
	text-align: center;
	
	max-width: 900px;

}

/*=========================================================================*/
/*DISABLED: 3/4/2015: testing w/h dimmensions for each type: wide, tall, square, default*/
/*.portfolio-image img,
.portfolio-image img.wide,
#joels-ajax-box.direct-mail .portfolio-image img,
#joels-ajax-box.packaging .portfolio-image img,
#joels-ajax-box.logo .portfolio-image img { width:90%; height:auto; }*/
/*=========================================================================*/

/*================================================ USE FOR TALL/SQUARE IMAGES*/ 
.portfolio-image img.tall, 
.portfolio-image img.square { width:auto; min-height:90%; max-height:90%; }

/*================================================ USE FOR WIDE IMAGES*/
.portfolio-image img.wide { min-width:90%; max-width:90%; height: auto; }
/*=========================================================================*/

/* Advertising Section
---------------------------------------------- */
#joels-ajax-box.advertising img { }

/* Collateral Section
---------------------------------------------- */
#joels-ajax-box.collateral img { }

/* Direct Mail Section
---------------------------------------------- */
#joels-ajax-box.direct-mail img { padding:0; }

/* Packaging Section
---------------------------------------------- */
#joels-ajax-box.packaging img { }

/* Retouching Section
---------------------------------------------- */
#joels-ajax-box.retouching {
	/*display:block;
	opacity:1;
	z-index:9999;
	position:fixed;
	left:5%;
	top:5%;

	width:90% !important;
	height:auto !important;*/
}

#joels-ajax-box.retouching img {	
	padding:5%;
	background:#1c1c1c;
	border:1px solid #000;
	
	-webkit-box-shadow: 0px 0px 50px #000;
	   -moz-box-shadow: 0px 0px 50px #000;
	    -ms-box-shadow: 0px 0px 50px #000;
		 -o-box-shadow: 0px 0px 50px #000;
		 	box-shadow: 0px 0px 50px #000;
	
}
#joels-ajax-box.retouching .portfolio-item-content { padding:0; margin:0; }

.photo-retouching-box.wide { margin: 0 10%;}
.photo-retouching-box.tall { margin: 0 33.33%; }

.photo-retouching-box.wide img,
.photo-retouching-box.tall img { max-height:100%; max-width:100%; width:100%; min-width:100%; height:auto; }

.after, .zoom-after {
	position: absolute;	
	max-width:100%; 
	max-height:100%; 
	z-index: 1;
}
.before, .zoom-before {
	position: absolute; 
	max-width:100%;
	max-height:100%;
}

.photo-retouching-box {cursor:pointer;}
.photo-retouching-box p, .dialog {
	font-size:15pt;
	text-transform:uppercase;
	text-align:center;	
	/*letter-spacing:0.16em;*/
	color:#777; 
	opacity:0.77; 
	background-color:#1c1c1c;
	border: solid 2px #777;
	-webkit-border-radius: 1em;
	   -moz-border-radius: 1em;
		-ms-border-radius: 1em;
		 -o-border-radius: 1em;
			border-radius: 1em;							
}

.photo-retouching-box p {
	display:none;  /* hidden at start: show on load using js */	
	padding: 0.5em;
	margin: -5% 38% 0 38%;
}
.dialog {
	display: block;
	position: fixed;
	z-index: 2;
	left: 35.5%;
	top: 15%;
	width: 60%;
	margin-left: -15%;
	padding: 0.5em 1em;
}

.photo-retouching-box.tall .photo-retouching-box p {
	margin: -15% 38% 0 38%;
}
.photo-retouching-box.tall .dialog {
	left: 52.25%;
	width: 30%;
}
/*

.dialog {	
	display: block;
	position: absolute;
	z-index: 2;
	padding: 1% 2.5%;
	top: 90px;
}

.photo-retouching-box.wide .dialog {
	min-width: 50%;
	left: 45%;
	margin-left: -15%;
}
.photo-retouching-box.tall .dialog {
	min-width: 50%;
	left: 45%;
	margin-left: -17.5%;
}

*/

/*	
	NEW styles added for updated Photo Retouch Controller *2015* 
	********************************
	CLEAN UP BEFORE FINAL PRODUCTION
	********************************
*/

	/*override previous styles*/
	#joels-ajax-box img,
	#joels-ajax-box.retouching img {padding:0;}
	
	.photo-retouching-box.wide {position:relative; margin: 0 10%;}
	.photo-retouching-box.tall {position:relative; margin: 0 33.33%;}			

	.after, .zoom-after {z-index:1;}
	.before, .zoom-before {z-index:1;}
	
	/*new styles*/
	.over {z-index:2; position:absolute;}
	.over img {background:none !important; box-shadow:none !important;}
	.over.active {display:none;}
	.info {z-index:3;}			

	#retouch-control-bar {
		display:block;
		position:fixed;
		bottom:0;
		width:100%;
		height:6.25em; /*100px*/
		max-height:100px;
		background:#000;
		border:none;
		margin:0;
		padding:0.625em 1.25em;
		z-index:10000;
		vertical-align:top;
	}
	#retouch-control-bar .controls {
		display:block;
		margin:0 auto;
		text-align:center;
	}
	#retouch-control-bar .control-button,
	#retouch-control-bar .control-icon {
		display:inline-block;
		height:5em; /*80px*/
		width:auto;
		min-height:80px; /*80px*/
		max-height:80px; /*80px*/
		margin:0 15px;
		padding:0;
		background:none;
		border:none;
		cursor:pointer;
		vertical-align:middle;
		/*border: solid 1px red;*/
	}

	#retouch-control-bar .control-button {				
		color:#777;
		font-family: 'Shadows Into Light Two', sans-serif;
		font-size:2.5em; /*30px*/
		text-transform: uppercase;
		text-align:left;
		
	}
	#retouch-control-bar .control-button:hover {
		-webkit-transition: all 333ms ease;
		   -moz-transition: all 333ms ease;
			-ms-transition: all 333ms ease;
			 -o-transition: all 333ms ease;
				transition: all 333ms ease;
	}
	
	#retouch-control-bar .control-button.active,
	#retouch-control-bar .control-button.active:hover {color:#FFF;}

	#retouch-control-bar .control-icon {
		min-width:50px;
		max-width:50px;
		min-height:50px;
		max-height:50px;
		overflow:hidden;
		padding:0;
	}
	
	.control-before-dot,
	.control-after-dot,
	.control-toggle,
	.control-zoom-icon,
	.control-info-icon {
		background-image:url(img/retouch-control-sprite.png) !important;
		background-repeat: no-repeat !important;
	}
	
	.control-before-dot,
	.control-after-dot {background-position: 0px 0px !important;}
	.control-before-dot.active,
	.control-after-dot.active {background-position: -50px 0px !important;}
	
	.control-toggle {background-position: 0px -50px !important;}
	.control-toggle:hover{background-position: -100px -50px !important;}
	.control-toggle:active{background-position: -50px -50px !important;}
	
	.control-zoom-icon {background-position: 0px -100px !important;}
	.control-zoom-icon:hover{background-position: -100px -100px !important;}
	.control-zoom-icon:active{background-position: -50px -100px !important;}
	
	.control-zoom-icon.active{background-position: -100px -150px !important;}
	.control-zoom-icon.active:hover{background-position: -100px -150px !important;}
	.control-zoom-icon.active:active{background-position: -50px -150px !important;}
	 
	.control-info-icon {background-position: 0px -200px !important;}
	.control-info-icon.active{background-position: -100px -200px !important;}
	
	
/* Email Section
---------------------------------------------- */

#joels-ajax-box.email {
	top: 1%;
	height: 98%;
	
}

#joels-ajax-box.email iframe,
#joels-ajax-box.flash iframe {
	display: block;
	width: 50%;
	height: 100%;
	min-width: 680px;
	margin: 0 25%;
	padding:0.5%;
	background:#1c1c1c;
	border:1px solid #000;
	
	-webkit-box-shadow: 0px 0px 50px #000;
	   -moz-box-shadow: 0px 0px 50px #000;
	    -ms-box-shadow: 0px 0px 50px #000;
		 -o-box-shadow: 0px 0px 50px #000;
		 	box-shadow: 0px 0px 50px #000;
}	
#joels-ajax-box.flash iframe {
	width:80%;
	max-height:100%;
	margin:0 10%;
	overflow:hidden;
}	

/* Banner Section
---------------------------------------------- */
#joels-ajax-box.banner {
	top: 25%;
}

#joels-ajax-box.banner iframe {
	width: 100%;
	height: 100%;
	margin: 0;
}


/* Website Section
---------------------------------------------- */
#joels-ajax-box.web {
	background: #1C1C1C;
}

#joels-ajax-box.web iframe {
	width: 90%;
	height: 90%;
	margin: 5%;
	min-width: 960px;
}



/* UPDATED STYLES=======================================  */

.portfolio-item img {min-width:300px; height:auto;}

.portfolio-item.selected { background-color:#000;}
.portfolio-item:hover { background-color:#2a2a2a;}

.portfolio-item-content {
	color:#f6f6f6;
	padding:0 1%;
}

.portfolio-item-content .title-block {
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 100;
	letter-spacing: 2pt;
	text-shadow: black 1px 0px 1px;	
	margin: 0 0 10px 0;
	padding: 2.5% 0 0 0;
}
.portfolio-item-content .subtitle { font-size: 12px; line-height:2em; text-transform:uppercase; color:#777; padding: 1em 0 0 0; }

.portfolio-item-content .text-block,
.portfolio-item-content .detail { font-size: 14px; line-height:24px; padding: 4px 0 1em 0;}

.portfolio-item-content .detail-row {display:block;}
.portfolio-item-content .detail {display:inline-block;}
.portfolio-item-content div {vertical-align:top;}

.portfolio-item-content ul {font-size: 14px; line-height:24px; padding:0 0 1em 18px; }
.portfolio-item-content li {list-style:circle; list-style-image:url(img/bullet.png); }


.portfolio-item-content .detail { padding-bottom: 1em;}

/*.portfolio-item-content .portfolio-details a  {color:#0095cd;}*/

.portfolio-item-content .text-block { border-bottom:1px solid #777; }
.portfolio-item-content .detail-row { border-top:1px solid #777; }

#view-more.button {
	width:auto;
	clear:none;
	padding:1em 0;
	margin-top:2em;
	cursor:pointer;
}

/* Responsive Wrapper */
.portfolio-item-content .title-block,
.portfolio-item-content .subtitle,
.portfolio-item-content .text-block,
.portfolio-item-content .detail-row,
#view-more.button {margin-left:62.8%; /*phi:ratio*/}

.portfolio-item-content .detail-row .subtitle {margin-left:0;}

.portfolio-item-content .detail-row.col-1 div:first-child, 
.portfolio-item-content .detail-row.col-2 div:first-child,
.portfolio-item-content .detail-row.col-3 div {width:32.9%;}


/* Media Query */
@media screen and (max-width:640px){
	
	.portfolio-item-content {margin:10%;}
	
	.portfolio-item-content .portfolio-image {
		width:100%;
		height:auto;
		margin:0;
		float:none;
		clear:both;
	}
	
	#thumbnails {
		float:none; 
		width:100%; 
		margin:5% 0;
	}
	.portfolio-item-content .title-block {padding: 0.5em 0;}
	.portfolio-item-content .title-block,
	.portfolio-item-content .subtitle,
	.portfolio-item-content .text-block,
	.portfolio-item-content ul,
	.portfolio-item-content .detail-row {margin:0;}
	
	.portfolio-item-content .detail-row.col-2 div:first-child {width:100%; padding:0 0 1em 0; border-bottom:1px solid #777;}	
	.portfolio-item-content .detail-row.col-3 div {width:auto; padding: 0 1em;}	
	.portfolio-item-content .detail-row.col-3 div:first-child,
	.portfolio-item-content .detail-row.col-3 div:last-child {padding:0;}
	
	
}

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

.portfolio-item-content .detail-row,
#view-more.button {margin-left:0; clear:both;}

}