body { padding:0; margin:0; position:fixed; top:0; bottom:0; left:0; right:0; font-family:'Myriad Pro','lucida sans',univers,sans-serif; color:#8c8c8c; 
       background:#edeff2; overflow:hidden; -webkit-overflow-scrolling:touch; }
//edeff2
*:focus {outline:0;}
h1, h2, h3, h4, h5 { font-family:'Century Gothic','Apple Gothic',AppleGothic,'URW Gothic L','Avant Garde',Futura,san-serif; text-transform:uppercase; margin:0; }
h1 { font-size:1.5em; font-weight:normal; color:black; }
#details h1 { font-size:2em; }
h2 { font-size:1em; }
p { font-size:1em; }
a { color:#8c8c8c; }
a img { border:none; }

#header { width:100%; background:#444; border-bottom:1px solid #222; }
#logo { display:inline-block; }
#logo img { height:3.3em; }
#contact { float:right; }
#contact p { font-size:.85em; margin:.75em; display:inline-block; float:left; }
#contact img { border:1px solid #444; float:right; margin:.25em .25em 0 0; width:3em; height:3em; }
#contact img.linkedin { border:1px solid #9999ff; }
#contact img:active { border-color:#ccc; }
.nav { position:absolute; top:8em; bottom:8em; margin-top:2.5em; }
.nav > div { display:table; height:100%; }
.nav > div > div { display:table-cell; vertical-align:middle; text-align:center; }
.nav .arrow { width:3em; }
.nav.left { left:0; }
.nav.right { right:0; }
.nav img { width:1.7em; padding:6em .5em 6em .5em; cursor:pointer; }
.detail_info { display:none; position:absolute; width:100%; text-align:center; font-size:1.5em; line-height:2.5em; bottom:0; 
              color:#999; border-top:1px solid #999; background:#e4e4e4; transition:all .25s; cursor:pointer; user-select:none; -webkit-user-select:none; -moz-user-select:none; }
#thumbs, #details { display:none; position:absolute; top:4.5em; bottom:0; width:100%; overflow:hidden; }
#thumb_pages, #detail_pages { position:absolute; top:0; bottom:0; width:100%; overflow:hidden; }
.nav_indicator { position:absolute; width:100%; bottom:.5em; text-align:center; overflow:hidden; }
.nav_indicator > span { border-radius:50%; background:#8c8c8c; display:inline-block; width:.5em; height:.5em; font-size:2em;
                     line-height:.9em; color:white; margin:.25em; cursor:pointer; }
.nav_indicator > span.selected { background:#cb2323; }
.nav_indicator > span > span { display:none; }
#details .nav_indicator { display:table; bottom:0; border-top:1px solid #666; background:#8c8c8c; }
#details .nav_indicator > span { display:table-cell; margin:0; border-radius:0; height:.6em; }
.thumb_page { position:absolute; top:0; bottom:2.5em; width:100%; display:none; }
.thumb_page.selected { display:block; }
.thumb_page > div { display:table; width:100%; height:100%; }
.thumb_page > div > div { display:table-cell; width:100%; height:100%; vertical-align:middle; }
.thumb_table { display:table; margin:auto; }
.thumb_table > div { display:table-cell; vertical-align:top; text-align:left; }
.thumb_table > div > div { display:block; }
.thumb_table > div > div.size_1 { display:inline-block; vertical-align:top; }
.thumb p { font-size:.8em; }
.detail_page { position:absolute; top:.5em; bottom:2.5em; left:3.5em; right:3.5em; }
.detail_page h1 { text-align:left; margin-bottom:.25em; }
.detail_page h1 span { font-size:.6em; color:#aaa; white-space:nowrap; }

.page_header { position:absolute; top:0; }
#thumbs .page_header { left:3em; }
#details .page_header { top:.35em; right:3em; }
.page_header p { margin:0; }
.page_header img { width:1.75em; padding:.5em; cursor:pointer; }
.thumb_wrapper { height:9em; padding:.5em; }
.size_1 { width:9.25em; }
.size_2 { width:19.5em; }
.size_4 { height:19em; width:19.5em; }
.thumb { position:relative; width:100%; height:100%; text-align:left; cursor:pointer; opacity:0; transition:all .5s; }
.thumb_title { display:none; background:#666 url('../images/thumb_title_bg.png') center repeat-y; height:2.25em; 
            border:1px solid #444; text-align:left; padding:.5em 0 .5em 1em; 
            background: -webkit-gradient(linear, left top, right top, from(#646464), to(#808080));
            background: -webkit-linear-gradient(left, #646464, #808080);
            background: -moz-linear-gradient(left, #646464, #808080);
            background: -ms-linear-gradient(left, #646464, #808080);
            background: -o-linear-gradient(left, #646464, #808080);
            }
.thumb h2 { color:#edeff2; }
.thumb_title p { color:#181818; margin:0; }
.thumb_image { height:9em; overflow:hidden; border:1px solid #222; background:#b4b4b4; }
.size_4 .thumb_image { height:19em; }
.thumb_image img { min-width:100%; min-height:100%; }
.thumb_full { height:100%; }
.thumb_full.white h2 { color:#1e1e1e; }
.thumb_full.gray h2 { color:#edeff2; }
.thumb_full > div { padding:.5em 0 .5em 0; font-size:.95em; }
.thumb_full img { position:absolute; top:1px; left:0; margin:2.25em 0 0 -1px; height:5em; width:4.5em; border-radius:0 2.5em 2.5em 0; 
                border:1px solid #c8c8c8; background:#edeff2; border-left:0; }
.thumb_full.red img { border-color:#aa0303; }
.thumb_full.gray img { border-color:#1e1e1e; }
.thumb_full p { text-align:center; padding-left:2.25em; font-size:1.6em; margin-top:.6em; }

.detail_page > div { position:absolute; border:1px solid #545454; top:3em; bottom:0; overflow:hidden; }
.detail_description { background:#545454 url('../images/detail_description_bg.png') center repeat-y; width:28%; 
            background: -webkit-gradient(linear, left top, right top, from(#404040), to(#707070));
            background: -webkit-linear-gradient(left, #404040, #707070);
            background: -moz-linear-gradient(left, #404040, #707070);
            background: -ms-linear-gradient(left, #404040, #707070);
            background: -o-linear-gradient(left, #404040, #707070);
            }
.detail_description h2, .detail_content h2 { font-weight:normal; font-size:1.4em; margin:.75em 1em .75em 1em; }
.detail_content h2 { font-family:'Myriad Pro','lucida sans',univers,sans-serif; text-transform:none; font-size:1.8em; margin:.58em .58em .25em .87em; }
.detail_description h2, .detail_description p { color:#edeff2; }
.detail_description p, .detail_content p { margin:0; padding:0 1.5em .75em 1.5em; }
.detail_description p.role { font-size:1em; background:#282828; color:#afafaf; margin:0 0 1.25em 0; padding:.5em 1.4em .5em 1.4em; }
.detail_content { width:70%; right:0; background:#545454; text-align:center; }
.detail_content a img { border:none; }
.detail_content { min-height:50%; }
.detail_content img, .detail_content iframe { min-width:100%; min-height:100%; }
.detail_content img.center { margin-left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); }
.detail_content.white p { color:#666; }
.detail_narrow { position:relative; margin-left:50%; margin-right:-50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); max-width:30em; }
#detail_interaction { background:white url('../images/detail_bg_interface.png') bottom center no-repeat; }
#detail_interaction .col { text-align:left; }
#detail_graphicdesign { background:#cc1111 url('../images/detail_bg_graphic.png') bottom right no-repeat; }
#detail_graphicdesign h2 { text-align:left; }
.detail_box { position:absolute; text-align:left; max-width:30em; left:0; bottom:4em; }
#detail_dev { background:#5b5b5b url('../images/detail_bg_dev.png') bottom right no-repeat; }
#detail_dev h2 { text-align:left; }
.detail_box { position:absolute; text-align:left; max-width:30em; left:0; bottom:4em; }
#detail_dev img { width:100%; }
.col { display:inline-block; width:45%; vertical-align:top; }
.red { background:#cc1111 url('../images/thumb_bg_red.png') center repeat-y; border:1px solid #aa0303; color:#edeff2; 
            background: -webkit-gradient(linear, left top, right top, from(#bd1919), to(#d92d2d));
            background: -webkit-linear-gradient(left, #bd1919, #d92d2d);
            background: -moz-linear-gradient(left, #bd1919, #d92d2d);
            background: -ms-linear-gradient(left, #bd1919, #d92d2d);
            background: -o-linear-gradient(left, #bd1919, #d92d2d);
            }
.white { background:white; border:1px solid #c8c8c8; color:#cb2323; }
.gray { background:#5b5b5b url('../images/thumb_bg_gray.png') center repeat-y; border:1px solid #1e1e1e; color:#edeff2; 
            background: -webkit-gradient(linear, left top, right top, from(#404040), to(#707070));
            background: -webkit-linear-gradient(left, #404040, #707070);
            background: -moz-linear-gradient(left, #404040, #707070);
            background: -ms-linear-gradient(left, #404040, #707070);
            background: -o-linear-gradient(left, #404040, #707070);
            }

.portrait .thumb_table { width:100%; }
.portrait .thumb_page, .portrait .detail_page { left:0; right:0; bottom:3.5em; overflow:hidden; }
.portrait .thumb_wrapper { padding:1.5% 2.5% 1.5% 2.5%; }
.portrait .size_1, .portrait .size_1 img { width:45%; }
.portrait .size_2, .portrait .size_2 img, .portrait .size_4 img { width:95%; }
.portrait .size_4 { width:95%; }
.thumb_full > div { padding:.5em 1em .5em 2em; }
.portrait .thumb_full img { height:5em; width:4.5em; }
.portrait .detail_narrow { max-width:100%; }
.portrait .detail_page h1 { margin-left:.5em; width:90%; }
.portrait .detail_page h1 span { display:none; }
.portrait .detail_description { top:100%; width:100%; transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s; }
.portrait .detail_description.show { top:3.5em; width:100%; }
.portrait .detail_description h2 { margin-bottom:0; margin-left:.75em; }
.portrait .detail_description .role { background:none; padding-top:0; padding-bottom:0; padding-left:1.1em; }
.portrait .detail_description .description { padding:0 1em 1em .9em; }
.portrait .detail_content { position:relative; top:.5em; width:100%; }
.portrait .detail_content h2 { margin-left:.7em; }
.portrait .detail_content p { padding-left:1em; }
.portrait .detail_content img { width:140%; height:auto; min-height:initial; margin-bottom:-.25em; }
.portrait .full_detail_content { min-height:90%; }
.portrait .full_detail_content h2 { min-height:75%; }
.portrait #details .page_header { right:.75em; }
.portrait .nav_indicator { padding:1em 0 .5em 0; bottom:0; border-top:1px solid #999; background:#e4e4e4; }
.portrait .nav { bottom:0; }
.portrait .nav .arrow { font-size:1.75em; position:absolute; bottom:0; width:2.5em; height:2.25em; color:white; 
    user-select:none; -webkit-user-select:none; -moz-user-select:none; }
.portrait .nav .arrow.left { left:0; }
.portrait .nav .arrow.right { right:0; }
.portrait .nav img { width:.7em; padding:0 .5625em 0 .5625em; transform:translateY(-.1em); -webkit-transform:translateY(-.1em); -moz-transform:translateY(-.1em); }
.portrait .nav .left img { padding-left:.25em; }
.portrait .nav .right img { padding-right:.25em; }
.portrait .nav > div > div { vertical-align:bottom; }
.portrait p { font-size:1.125em; }
.portrait .detail_box { bottom:.5em; }
.portrait .col { width:95%; }
.portrait .col h2 { margin:0; margin-left:.25em; }
.portrait .col h2:first-child { margin-top:.5em; }
.portrait .col p { padding-left:.33em; }
.portrait .ixd { font-size:.8em; }
.portrait #detail_dev img { width:125%; margin-left:-2em; }
.portrait .detail_info { display:block; }
.portrait .detail_page .detail_content { border-left:none; border-right:none; }