@charset "UTF-8";

/* Global Content Formatting and Styles */

body {background: #FFF ; margin: 0px; padding: 0px; 
    -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;}
}

body.show_mobile_nav {
    position: fixed;
    overflow: hidden;
}

.header_bar {height: 60px; width: 5000px; top: 0px; position: fixed; background: #484848 url(../images/bgstripes_small_2x.jpg) repeat-x 0px 0px ;background-size: 5px 60px; z-index:999; box-shadow: -10px 2px 6px #000000;}

#content_wrapper {
    height: auto;
    max-width: 100%;
    position: relative;  
}

.header_wrapper {
    width: 100%;
    z-index: 999;
}
-------
a.mobile_menu_button { 
    display: inline-block;
    height: 60px;
    width: 60px;
    position: fixed;
    background: url(../images/mobile_menu_120x120.png) no-repeat; background-size: 60px 60px; 
    z-index: 999;
    right: 0px; top: 0px;
}

.jk_logo {
    height: 27px;
    width: 270px;
    margin: 18px auto 0px auto;
    display: inline-block;
    position: relative;
    background: url(../images/jk_logo_small_2x.png) ; 
   }

background: url()

/*New mobile menu dropdown*/

.mobile_nav_header { position: relative;}
#toggle, .toggle { display: none; }
.mobile_nav > li { list-style: none; float:left;}

.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

.mobile_nav { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
.mobile_nav > li { display: block; width: 100%; margin: 0; }
.mobile_nav > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; z-index: 1; }
#toggle:checked ~ .mobile_nav { display: block; opacity: 1; z-index: 1; }

/*--------------------------------
 Presentation Styles (Editable)
---------------------------------*/
#mobile_nav_header {
	height: 1300px;
    width: 100%;
	background-color: #4f4e53;
    background: -moz-linear-gradient(#6e6d72, #4f4e53);
    background: -webkit-linear-gradient(#6e6d72, #4f4e53);
    left: 100%;
    margin-top: -20px;
    position: fixed; 
    transition: all .25s ease-in-out;
    z-index: 997; 
    display: block;
    list-style-type: none;
}

#mobile_nav_header.show_mobilenav {
	left: 0%;
    height: 1300px;
    transition: all .25s ease-in-out;
    display: block;
    z-index: 998;
    list-style-type: none;
}

#lightbox {
    z-index: 200;
    background-color: rgba(0,0,0,0.8);
    margin-top: -20px;
    margin-bottom: 0px;
    width: 1000px;
    height: 100%;
    position: fixed;
    display: none;
} 

.nav { 
	display: none;  
}

a.mobile_menu_button { 
    display: inline-block;
    height: 60px;
    width: 60px;
    position: fixed;
    background: url(../images/mobile_menu_120x120.png) no-repeat; background-size: 60px 60px; 
    z-index: 999;
    right: 5px; top: 0px;
}

#mobile_nav > li > a{
	color: #FFF;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: .5px;
    font-weight: 700;
    font-size: 2em;
    line-height: 1.5em;
    transition: all .4s ease-in-out;
    background-color: #4f4e53;
    background: -moz-linear-gradient(#6e6d72, #4f4e53);
    background: -webkit-linear-gradient(#6e6d72, #4f4e53);
    border-bottom: 1px solid #a8a9ae; 
    text-align: right;
    margin-right: 0px;
    margin-left: -40px;
    list-style-type: none;
    z-index: 999;
    padding: 10px 25px;
}

#mobile_nav {
		background: none; z-index: 999; margin-top: 0px;list-style-type: none;
	}

#mobile_nav > li > a:hover{
	color: #484848; 
    text-shadow: 1px 1px 3px #000000; 
    background-color: #6e6d72;
    background: -moz-linear-gradient(#a8a9ae, #6e6d72);
}

/*End new mobile menu dropdown*/

nav {display: none;
}

.name {display: none;
}

.graphic_design {display: none;
}

footer {display: none;}

.bottom_bar {display: none;}

.content {
    margin-top: 85px; width: 100%; margin-left: auto; margin-right: auto; height: auto;
}

.content_clear {width: 90%; height: auto; margin-bottom: 0px; margin: 0px auto 0px;}

.artwork_holder {height: auto; width: 100%; background: #33d333; z-index: 1; display: block; }

.arrows {width: 87%; height: auto; display: inline-block; float: none;}

#previous {margin-left: auto;}

#next {margin-right: auto;}

#artwork {height: auto; width: 96%; display: inline-block; z-index: 1; margin-left: auto; margin-right: auto; float: none;}

#artwork img.main1 {height: auto; width: 90%; margin-top: 0px;}

#artwork img.main3 {margin-top: 0px; float: none; width: 80%;}

#artwork img.main7 {margin-top: 0px; float: left; width: 100%; margin-bottom: 20px;}

#artwork img.secondary1 {width: 100%; float: right; margin-top: 10px;}

#artwork img.secondary2 {width: 100%; float: right; margin-top: 10px; clear: both;}

#artwork img.secondary4 {width: 100%; float: left; margin-top: 0px;}

#artwork img.secondary6 {width: 100%; float: right; margin-top: 10px; clear: both;}

#artwork img.secondary7 {width: 35%; float: right; margin-left: 10px; margin-top: -2px}

#artwork img.secondary8 {width: 50%; float: left; margin-bottom: 10px; margin-left: 0px; margin-top: 10px; margin-right: 20px;}

#artwork img.third8 {width: 45%; float: right; margin-bottom: 0px; margin-left: 0px; margin-top: 10px;}

#artwork img.fourth8 {width: 100%; float: left; margin-bottom: 0px; margin-left: -10px; margin-top: -10px; clear: both;}

#secondary_9_left {width: 100%; height: auto; float: left;}

#secondary_9_right {width: 100%; height: auto; float: right;}

#artwork img.secondary9_1 {width: 100%; height: auto; float: left; display: inline-block; margin-top: 5px; margin-bottom: 4px;}

#artwork img.secondary9_2 {width: 100%; height: auto; float: left; display: inline-block; margin-top: 5px; margin-bottom: 4px;}

#artwork img.secondary9_3 {width: 100%; height: auto; float: left; display: inline-block; margin-top: 5px; margin-bottom: 4px;}

#artwork img.secondary9_4 {width: 100%; height: auto; float: right; display: inline-block; margin-top: 5px; margin-bottom: 4px;}

#artwork img.secondary9_5 {width: 100%; height: auto; float: right; display: inline-block; margin-top: 5px; margin-bottom: 4px;}

#artwork img.secondary9_6 {width: 100%; height: auto; float: right; display: inline-block; margin-top: 5px; margin-bottom: 4px;}

.artwork_text1 {margin-top: 0px; width: 100%; float: left; text-align: left; display: inline-block;}

.artwork_text_2 {margin-top: 0px; float: left; width: 100%; text-align: left; display: inline-block; clear: both;}

.artwork_text_6 {margin-top: 0px; float: left; width: 100%; text-align: left; display: inline-block; clear: both;}

.artwork_text_9 {margin-top: 0px; float: left; width: 100%; text-align: left; display: inline-block; clear: both;}

#caption_secondary_2 {width: 100%; float: right; text-align: left; clear: both; margin-top: 20px;}

#caption_secondary_4 {width: 100%; float: left; text-align: left;}

#artwork img.secondary5_1 {width: 100%; height: auto; float: left; display: inline-block; margin-top: 5px;}

#artwork img.secondary5_2 {width: 100%; height: auto; float: left; display: inline-block; margin-top: 5px; margin-left: 0%; margin-right: 0%;}

#artwork img.secondary5_3 {width: 100%; height: auto; float: left; display: inline-block; margin-top: 5px;}

#caption_secondary_6 {width: 100%; float: right; text-align: left; clear: both; margin-top: 20px;}

.artwork_text_3 {margin-top: 0px; width: 100%; float: left; text-align: left; display: block; position: relative;}

.artwork_text_4 {margin-top: 0px; width: 100%; float: left; text-align:left; display: block;}

.artwork_text_5 {margin-top: 0px; padding-left: 20px; float: left; width: 95%; text-align: left; display: inline-block}

.artwork_text_7 {width:60%; float: left; text-align:left; display: block;}

.artwork_text_8 {margin-top: 0px; width: 100%; float: right; text-align:left; display: block;}


/* Artwork Menu Holder */

.artwork_menu_holder {height: auto; width: 100%; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; padding-bottom: 30px;}

.artwork_menu {width: 90%; margin-left: 5%; margin-right: 5%; margin-top: 20px;}

#contact {height: auto; width: 90%; display: inline-block; z-index: 1; text-align: center;}

/* About Me Section */

#about {height: auto; width: 90%; display: inline-block; z-index: 1; text-align: center;}

#about img.main1 {margin-top: 0px; margin-left: auto; margin-right: auto;}

.about_text1_header {margin-top: 0px; width: 100%; height: auto; margin-left: auto; margin-right: auto;;float: left; text-align: left; display: inline-block}

.about_text1 {margin-top: 0px; width: 100%; margin-left: auto; margin-right: auto; height: auto; float: left; text-align: left; display: inline-block; clear: both;}

.about_text2_header {margin-top: 20px; margin-bottom: 0px; margin-left: auto; margin-right: auto; width: 100%; height: auto; float: left; text-align: left; display: inline-block}

.about_text2 {margin-top: -12px; margin-bottom: 80px; margin-left: auto; margin-right: auto; width: 100%; height: auto; float: left; text-align: left; display: inline-block; }

.contact_text1_header {margin-top: 0px; width: 100%; height: auto; margin-left: auto; margin-right: auto;;float: left; text-align: left; display: inline-block}

.contact_text1 {margin-top: 0px; width: 100%; margin-left: auto; margin-right: auto; height: auto; float: left; text-align: left; display: inline-block; clear: both;}

.contact_text2_header {margin-top: 20px; margin-bottom: 0px; margin-left: auto; margin-right: auto; width: 100%; height: auto; float: left; text-align: left; display: inline-block}

.contact_text2 {margin-top: -12px; margin-bottom: 80px; margin-left: auto; margin-right: auto; width: 100%; height: auto; float: left; text-align: left; display: inline-block; }

/* Index Thumbnails */

#T1 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_cinelife.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block; }
#T1 .T1_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T1 .T1_text {width: 100%; font-size: 1.3em; float: left;}

#T2 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_cat_hunting.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block; }
#T2 .T2_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T2 .T2_text {width: 100%; font-size: 1.3em; float: left;}

#T3 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_chrysler.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block; }
#T3 .T3_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T3 .T3_text {width: 100%; font-size: 1.3em; float: left;}

#T4 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_velocity.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T4 .T4_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T4 .T4_text {width: 100%; font-size: 1.3em; float: left;}

#T5 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_ads.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T5 .T5_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T5 .T5_text {width: 100%; font-size: 1.3em; float: left;}

#T6 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_cp.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T6 .T6_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T6 .T6_text {width: 100%; font-size: 1.3em; float: left; left: 10px; bottom: 10px; }

#T7 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_gap.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T7 .T7_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T7 .T7_text {width: 100%; font-size: 1.3em; float: left;}

#T8 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_cat_usmc.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T8 .T8_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T8 .T8_text {width: 100%; font-size: 1.3em; float: left;}

#T9 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_trade.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T9 .T9_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T9 .T9_text {width: 100%; font-size: 1.3em; float: left;}

#T10 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_cat_foldout.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T10 .T10_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T10 .T10_text {width: 100%; font-size: 1.3em; float: left;}

#T11 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_logos.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T11 .T11_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T11 .T11_text {width: 100%; font-size: 1.3em; float: left;}

#T12 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_web.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T12 .T12_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T12 .T12_text {width: 100%; font-size: 1.3em; float: left;}

#T13 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_havoc.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T13 .T13_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T13 .T13_text {width: 100%; font-size: 1.3em; float: left;}

#T14 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_gf_vid.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T14 .T14_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T14 .T14_text {width: 100%; font-size: 1.3em; float: left;}

#T15 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_fce.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T15 .T15_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T15 .T15_text {width: 100%; font-size: 1.3em; float: left;}

#T16 {width: 30%; padding-bottom: 30%; height: 0; position: relative; text-align: left; transition: all .4s ease-in-out; background: url(../images/thumbs_hotsauce.jpg) #fff no-repeat; background-size: 100%; margin: 10px; display: inline-block;}
#T16 .T16_fade {width: 100%; height: 100%; float: left; padding: 0px;}
#T16 .T16_text {width: 100%; font-size: 1.3em; float: left;}

/* Artwork Page Menu Thumbnails */

#T1m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T1m .T1m_text {font-size: 1.2em;}

#T2m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T2m .T2m_text {font-size: 1.2em;}

#T3m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T3m .T3m_text {font-size: 1.2em;}

#T4m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T4m .T4m_text {font-size: 1.2em;}

#T5m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T5m .T5m_text {font-size: 1.2em;}

#T6m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T6m .T6m_text {font-size: 1.2em;}

#T7m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T7m .T7m_text {font-size: 1.2em;}

#T8m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T8m .T8m_text {font-size: 1.2em;}

#T9m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T9m .T9m_text {font-size: 1.2em;}

#T10m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T10m .T10m_text {font-size: 1.2em;}

#T11m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T11m .T11m_text {font-size: 1.2em;}

#T12m {width: 31.25%; padding-bottom: 31.25%; height: auto; margin: 1%; position: relative;}
#T12m .T12m_text {font-size: 1.2em;}