@charset "UTF-8";

/* Global Content Formatting and Styles */


.content_wrapper {
    height: auto;
    max-width: 100%;
    margin: 0px auto auto auto;
    position: relative;  
}

.header_wrapper {
    width: 800px;
    top: 0px;
}


.jk_logo {
    height: 80px;
    width: 310px;
    margin: 0px;
    left:30px;
    display: inline-block;
    background: url(../images/jk_logo.png);
    text-align: center;
    position: relative;
    float: center;
}

nav {height: 80px;
    overflow: hidden;
    width: auto;
    text-align: left;
    display: inline-block;
    z-index: 2;
    margin-top: 28px;
    background-color: none;
    line-height: 20px;
    float: right;
    position: fixed;
}

nav a {
    color: #FFF;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: .5px;
    font-weight: 700;
    font-size: 1.2em;
    padding-top: 4px;
    padding-left: 20px;
    transition: all .4s ease-in-out;
    float: left;
}

footer {width: 100%;}

.footertext {width: 100%;
    margin: 4px auto 0px 0px;
    }

.copyright {margin: 0px 0px 0px 0px;}

.email {margin: 0px 20px 0px 15px;}

.linkedin {margin: 0px 0px 0px 0px;}

.content {
    width: 90%;
    margin-top: 145px; margin-left: auto; margin-right: auto;
    position: relative;
}

.content_clear {width: 90%; margin-top: auto; }

.artwork_holder {height: auto; width: 100%; position: absolute;}

#artwork {height: auto; width: 100%; display: block; position: relative;}

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

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

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

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

#artwork img.primary9_1 {float: left; display: inline-block; margin-bottom: 4px;}

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

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

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

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

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

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

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

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

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

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

.artwork_text_3 {margin-top: 80px; width: 35%; float: left; text-align:left; display: block;}

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

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

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


/* Artwork Menu Holder */

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

.artwork_menu {width: 100%; clear: both; position: relative; margin-left: auto; margin-right: auto;}

#contact {width: 100%;}

/* About Me Section */

#about {width: 100%;}

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

.about_text1_header {margin-left: 0px;}

.about_text1 {width: 45%;}

.about_text2_header {width: 45%; margin-top: -38px;}

.about_text2 {width: 45%;}

/* 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: 22.125%; padding-bottom: 22.125%; height: auto; margin: 10px; position: relative;}
#T1m .T1m_text {font-size: 1.2em;}

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

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

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

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

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

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

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

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

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

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

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