@font-face {
    font-family: 'STMicroSquareEx';
    src: url('/webfonts/STMicroSquareEx-Bold.woff2') format('woff2'),
        url('/webfonts/STMicroSquareEx-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'STMicroSquareEx';
    src: url('/webfonts/STMicroSquareEx.woff2') format('woff2'),
        url('/webfonts/STMicroSquareEx.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Isonorm';
    src: url('/webfonts/Isonorm.woff2') format('woff2'),
        url('/webfonts/Isonorm.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nasalization';
    src: url('/webfonts/Nasalization.woff2') format('woff2'),
         url('/webfonts/Nasalization.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SourceSansPro';
    src: url('/webfonts/SourceSansProLight.woff2') format('woff2'),
         url('/webfonts/SourceSansProLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SourceSansPro';
    src: url('/webfonts/SourceSansPro.woff2') format('woff2'),
         url('/webfonts/SourceSansPro.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SourceSansPro';
    src: url('/webfonts/SourceSansProSemibold.woff2') format('woff2'),
         url('/webfonts/SourceSansProSemibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SourceSansPro';
    src: url('/webfonts/SourceSansProBold.woff2') format('woff2'),
         url('/webfonts/SourceSansProBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Global settings */
body, div, p, h1, h2, h3, h4, h5, h6, li, td, input, textarea, select { font-family: "SourceSansPro", Verdana, Arial, Helvetica, sans-serif; }

/* Form settings */
input, textarea, select { border: 0; }
textarea { min-height: 120px; }
label { font-weight: 600; font-size: 20px; }
.input_text, .input_email, .input_textarea, .input_select { padding: 8px 10px; font-size: 20px; background-color: rgba(255,255,255,0.55); width: 100%; max-width: 640px; min-width: 300px; }
.input_submit { font-family: "Nasalization", Verdana, sans-serif; padding: 5px 8px 8px; font-size: 20px; background-color: rgba(255,255,255,0.15); border-radius: 4px; color: #fff; cursor: pointer; line-height: 100%; transition: background-color 0.6s; }
.input_submit:hover { background-color: rgba(255,255,255,0.3); }
.form_row { display: flex; flex-wrap: wrap; }
.form_row label { display: inline-block; min-width: 100px; padding-top: 10px; }

/* Sprite Sheet settings */
.ui_kce { display: inline-block; background: url(/images/kce_sprite_1x.png) no-repeat top left; width: 64px; height: 64px; background-size: 1100% 600%; transform: translateZ(0); backface-visibility: hidden; transition: filter 0.6s; }
.kce_settings { background-position: 10% 0; }
.kce_help { background-position: 20% 0; }
.kce_contact { background-position: 30% 0; }
.kce_feature { background-position: 40% 0; }
.kce_menu { background-position: 50% 0; }
.kce_next { background-position: 60% 0; }
.kce_prev { background-position: 60% 0; transform: rotate(180deg); }
.kce_more { background-position: 60% 0; transform: rotate(90deg); }
.kce_less { background-position: 60% 0; transform: rotate(270deg); }
.kce_html5 { background-position: 70% 0; }
.kce_css3 { background-position: 80% 0; }
.kce_js { background-position: 90% 0; }
.kce_umbraco { background-position: 100% 0; }

.kce_fb { background-position: 0 20%; }
.kce_tw { background-position: 10% 20%; }
.kce_in { background-position: 20% 20%; }
.kce_pt { background-position: 30% 20%; }

.kce_helpcenter { background-position: 40% 20%; }
.kce_gear { background-position: 50% 20%; }
.kce_sysreq { background-position: 60% 20%; }
.kce_email { background-position: 70% 20%; }
.kce_faq { background-position: 80% 20%; }
.kce_privacypolicy { background-position: 90% 20%; }
.kce_termsofuse { background-position: 100% 20%; }

.kce_winter { background-position: 0 40%; }
.kce_spring { background-position: 10% 40%; }
.kce_summer { background-position: 20% 40%; }
.kce_autumn { background-position: 30% 40%; }
.kce_history { background-position: 40% 40%; }
.kce_career { background-position: 50% 40%; }
.kce_education { background-position: 60% 40%; }
.kce_download { background-position: 70% 40%; }
.kce_zoom { background-position: 80% 40%; }
.kce_datetime { background-position: 90% 40%; }
.kce_getinfo { background-position: 100% 40%; }

.kce_browser_ie { background-position: 0 60%; }
.kce_browser_edge { background-position: 10% 60%; }
.kce_browser_firefox { background-position: 20% 60%; }
.kce_browser_chrome { background-position: 30% 60%; }
.kce_browser_safari { background-position: 40% 60%; }
.kce_browser_opera { background-position: 50% 60%; }
.kce_browser_generic { background-position: 60% 60%; }
.kce_platform_windows { background-position: 70% 60%; }
.kce_platform_macos { background-position: 80% 60%; }
.kce_platform_linux { background-position: 90% 60%; }
.kce_platform_android { background-position: 100% 60%; }

.kce_hobbies_music { background-position: 0 80%; }
.kce_hobbies_theater { background-position: 10% 80%; }
.kce_hobbies_gaming { background-position: 20% 80%; }
.kce_hobbies_anime { background-position: 30% 80%; }
.kce_hobbies_computers { background-position: 40% 80%; }
.kce_hobbies_travel { background-position: 50% 80%; }
.kce_hobbies_cactus { background-position: 60% 80%; }
.kce_hobbies_hamradio { background-position: 70% 80%; }
.kce_search { background-position: 90% 80%; }
.kce_close { background-position: 100% 80%; }

.kce_roadtrip_location { background-position: 0 100%;}
.kce_roadtrip_miles { background-position: 10% 100%;}
.kce_roadtrip_time { background-position: 20% 100%;}
.kce_roadtrip_fuel { background-position: 30% 100%;}
.kce_roadtrip_states { background-position: 40% 100%;}
.kce_roadtrip_capitol { background-position: 50% 100%;}
.kce_roadtrip_natpark { background-position: 60% 100%;}
.kce_roadtrip_natmon { background-position: 70% 100%;}
.kce_roadtrip_stpark { background-position: 80% 100%;}
.kce_roadtrip_photo { background-position: 90% 100%;}
.kce_roadtrip_slideshow { background-position: 100% 100%;}

.ui_kce_welcome { display: inline-block; background: url(../images/ch00_splash/welcome_sprite_1x.png) no-repeat top left; width: 128px; height: 128px; background-size: 400% 100%; transform: translateZ(0); }
.kce_welcome_jhp { background-position: 0 0 }
.kce_welcome_eps { background-position: 33.33% 0; }
.kce_welcome_mmc { background-position: 66.66% 0; }
.kce_welcome_laa { background-position: 100% 0; }

.ui_jhp_welcome { display: inline-block; background: url(../images/ch01_jhp/jhp_sprite_1x.png) no-repeat top left; width: 128px; height: 128px; background-size: 500% 100%; transform: translateZ(0); }
.jhp_welcome_about { background-position: 0 25% }
.jhp_welcome_resume { background-position: 25% 25%; }
.jhp_welcome_hobby { background-position: 50% 25%; }
.jhp_welcome_blog { background-position: 75% 25%; }
.jhp_welcome_roadtrip { background-position: 100% 25%; }

.ui_eps { display: inline-block; background: url(../images/ch02_eps/eps_sprite_1x.png) no-repeat top left; width: 64px; height: 64px; background-size: 1100% 600%; transform: translateZ(0); backface-visibility: hidden; }
.eps_brochure { background-position: 100% 0; }

.eps_music_piano { background-position: 0 0 }
.eps_music_worship { background-position: 10% 0; }
.eps_music_weddings { background-position: 20% 0; }
.eps_music_memorials { background-position: 30% 0; }
.eps_music_parties { background-position: 40% 0; }
.eps_music_events { background-position: 50% 0; }
.eps_music_accompany { background-position: 60% 0; }
.eps_music_auditions { background-position: 70% 0; }
.eps_music_recording { background-position: 80% 0; }
.eps_music_notes { background-position: 0 20%; }
.eps_music_transcription { background-position: 10% 20%; }
.eps_music_composition { background-position: 20% 20%; }
.eps_music_arrangement { background-position: 30% 20%; }
.eps_music_midi { background-position: 40% 20%; }
.eps_music_transpose { background-position: 50% 20%; }
.eps_music_audio { background-position: 60% 20%; }
.eps_music_extract { background-position: 70% 20%; }
.eps_music_scoring { background-position: 80% 20%; }

.eps_web_code { background-position: 0 40%; }
.eps_web_html { background-position: 10% 40%; }
.eps_web_scripts { background-position: 20% 40%; }
.eps_web_program { background-position: 40% 40%; }
.eps_web_database { background-position: 30% 40%; }
.eps_web_responsive { background-position: 50% 40%; }
.eps_web_imagery { background-position: 60% 40%; }
.eps_web_video { background-position: 70% 40%; }
.eps_web_cms { background-position: 80% 40%; }
.eps_web_consult { background-position: 0 60%; }
.eps_web_strategy { background-position: 10% 60%; }
.eps_web_hosting { background-position: 20% 60%; }
.eps_web_analytics { background-position: 30% 60%; }
.eps_web_searchpos { background-position: 40% 60%; }
.eps_web_maintenance { background-position: 50% 60%; }
.eps_web_training { background-position: 60% 60%; }
.eps_web_config { background-position: 70% 60%; }
.eps_web_emailsetup { background-position: 80% 60%; }

.eps_tech_chip { background-position: 0 80%; }
.eps_tech_devices { background-position: 10% 80%; }
.eps_tech_install { background-position: 20% 80%; }
.eps_tech_troubleshoot { background-position: 30% 80%; }
.eps_tech_network { background-position: 40% 80%; }
.eps_tech_wifi { background-position: 50% 80%; }
.eps_tech_updates { background-position: 60% 80%; }
.eps_tech_av { background-position: 70% 80%; }
.eps_tech_setup { background-position: 80% 80%; }

.eps_photo_camera { background-position: 0 100%; }
.eps_photo_landscape { background-position: 10% 100%; }
.eps_photo_portrait { background-position: 20% 100%; }
.eps_photo_macro { background-position: 30% 100%; }
.eps_photo_product { background-position: 40% 100%; }
.eps_photo_lifestyle { background-position: 50% 100%; }
.eps_photo_travel { background-position: 60% 100%; }
.eps_photo_nature { background-position: 70% 100%; }
.eps_photo_realestate { background-position: 80% 100%; }

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .ui_kce { background-image: url(/images/kce_sprite.png); width: 128px; height: 128px; background-size: 1100% 600%; }
    .ui_kce_welcome { background-image: url(/images/ch00_splash/welcome_sprite.png); width: 256px; height: 256px; background-size: 400% 100%; }
    .ui_jhp_welcome { background-image: url(/images/ch01_jhp/jhp_sprite.png); width: 256px; height: 256px; background-size: 500% 100%; }
    .ui_eps { background-image: url(/images/ch02_eps/eps_sprite.png); width: 128px; height: 128px; background-size: 1100% 600%; }
}

/* Optimized version for better performance */
body.optimized { background-image: none; }
body.optimized .parallax_bg { display: none !important; background: none !important; }

/* Unit formats */
.distance:after { content: " miles"; }
.distance.singular:after { content: "-mile"; }
.distance.metric:after,
.metric .distance:after { content: " km"; }
.volume:after { content: " gallons"; }
.volume.singular:after { content: "-gallon"; }
.volume.metric:after,
.metric .volume:after { content: " litres"; }
.volume.singular.metric:after,
.metric .volume.singular:after { content: "-litre"; }
.efficiency:after { content: " mpg"; }
.efficiency.metric:after,
.metric .efficiency { content: " km/litre"; }
.temp:after { content: "\00B0\0046"; }
.temp.metric:after,
.metric .temp:after { content: "\00B0\0043"; }
.speed:after { content: " mph"; }
.speed.metric:after,
.metric .speed:after { content: " km/h"; }
.length:after { content: " feet"; }
.length.singular:after { content: "-foot"; }
.length.short:after { content: " inches"; }
.length.singular.short:after { content: "-inch"; }
.length.metric:after { content: " meters"; }
.length.singular.metric:after,
.metric .length.singular:after { content: "-meter"; }
.length.short.metric:after,
.metric .length.short:after { content: " cm"; }

/* Audio Container & Equalizer styles */
.audio_container { position: absolute; }
.audio_container a { position: absolute; z-index: 2; bottom: 12px; left: 12px; display: block; opacity: 0.1; transition: opacity 0.5s; }
.audio_container a span { display: none; }
.audio_container p { position: absolute; bottom: 12px; width: 100px; left: 80px; font-size: 9px; color: #fff; opacity: 0; transition: opacity 0.5s; cursor: default; }
.equalizer-container { height: 20px; width: 72px; margin: 0; padding: 0; position: absolute; bottom: 32px; left: 80px; transition: opacity 0.5s; opacity: 0; }
.audio_container.playing a, .audio_container.playing p, .audio_container.playing .equalizer-container, .no-touchdevice div.audio_container a:hover { opacity: 1; }
.equalizer-column { height: 20px; width: 6px; float: left; margin: 0 1px 0 0; padding: 0; position: relative; list-style-type: none; }
.equalizer-column:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; transform-origin: bottom; transform: scale(1,1); background: #fff; animation: eq-bar 2s 0s ease-out alternate infinite; }
      
.equalizer-column:nth-child(1):after { animation-delay: 1s; }
.equalizer-column:nth-child(2):after { animation-delay: 0.5s; }
.equalizer-column:nth-child(3):after { animation-delay: 1.5s; }
.equalizer-column:nth-child(4):after { animation-delay: 0.25s; }
.equalizer-column:nth-child(5):after { animation-delay: 0.75s; }
.equalizer-column:nth-child(6):after { animation-delay: 1.25s; }
.equalizer-column:nth-child(7):after { animation-delay: 2s; }
.equalizer-column:nth-child(8):after { animation-delay: 0s; }
.equalizer-column:nth-child(9):after { animation-delay: 1.75s; }
.equalizer-column:nth-child(10):after { animation-delay: 2.25s; }

@keyframes eq-bar {
    0% { transform: scale(1,0.1); }
    10% { transform: scale(1,0.3); }
    20% { transform: scale(1,0.5); }
    30% { transform: scale(1,0.2); }
    40% { transform: scale(1,0.7); }
    50% { transform: scale(1,0.9); }
    60% { transform: scale(1,0.3); }
    70% { transform: scale(1,0.8); }
    80% { transform: scale(1,0.5); }
    90% { transform: scale(1,0.3); }
    100% { transform: scale(1,0.1); }
}
/*
@keyframes eq-bar {
    0% { height: 2px; }
    10% { height: 6px; }
    20% { height: 10px; }
    30% { height: 4px; }
    40% { height: 14px; }
    50% { height: 18px; }
    60% { height: 6px; }
    70% { height: 16px; }
    80% { height: 10px; }
    90% { height: 6px; }
    100% { height: 2px; }
}
*/