/* Given that this is my portfolio site and is a one-pager,
        I'm going to skip an extra file-load and let it all hang loose.
        Normally I'd put this in main.css. Enjoy reading my css :P */

        /* Normalize */
        html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background:transparent;}a:active,a:hover{outline:0;}abbr[title]{border-bottom:1px dotted;}dfn{font-style:italic;}h1{font-size:2em;margin:.67em 0;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:1em 40px;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],/* 1 */
        input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;}b,strong,optgroup{font-weight:700;}pre,textarea{overflow:auto;}button::-moz-focus-inner,input::-moz-focus-inner,legend{border:0;padding:0;}

        .mobileOnly {display: none !important;}

        /* Generic styles */
        html {overflow:hidden; color: #ccc; font-family: 'Open Sans', verdana, sans-serif; font-weight:300; font-size: 1.15em; line-height: 1.2em;}
        html, body { background:#222;}
        html, body, #container, .fullHeight {margin:0; padding:0; height:100%;}
        *, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box;}
        h1, h2, h3, h4, h5 {font-family: 'Open Sans', sans-serif; font-weight: 200; margin:0; line-height: 1.2em; color:#eee;}
        h1 {font-size:3em;}
        h2 {font-size:2.2em;}
        h3 {font-size:1.6em; font-weight:400; font-style: italic; color:#B96363;}
        strong {color:#fff; font-weight:500;}
        a {font-weight:500; color:#00BFFF; text-decoration: none;}
        a:hover {text-decoration: underline; color:#22E4FF;}
        a:active {color:#1D96BE;}
        ul {margin:1.5em 0; padding:0 0 0 1.2em;}
        li {margin:0 0 1em 0;}
        li:last-child {margin-bottom:0;}

        /* Clearfixes for floats */
        .clearfix:before, .clearfix:after {content: " ";display: table;}
        .clearfix:after {clear: both;}

        /* Common layout classes */
        body .fullHeight {-webkit-transition: height .3s ease-in-out;transition: height .3s ease-in-out; -webkit-transition: height .3s ease-in-out; transition: height .3s ease-in-out;}
        body .fullWidth {width:100%;}
        body .full {width:100%; height:100%;}
        body .halfw {height:100%; width:50%; min-width:600px;}
        body .goldw {width:61.8%;}
        body .rel {position: relative;}
        body .abs {position:absolute; top:0; left:0;}
        body .right {left:auto; right:0;}
        body .bottom {top:auto; bottom:0;}
        body .before:before, body .after:after {content:""; display: block; position: absolute; top:0; left:0;}
        body .full.rel {overflow: auto;}
        body .visiHide {top:-100000px; left:-100000px; width:1px; height:1px;}
         body .slide, body .arrow, body .noSelect, body .noSelect * {-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}

        /* Standard transition classes */
        body .transBefore100:before, body .transAfter100:after, body .trans100 {-webkit-transition: all .1s ease-in-out;transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out;}
        body .transBefore200:before, body .transAfter200:after, body .trans200 {-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
        body .transBefore:before, body .transAfter:after, body .trans {-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}

        /* Common styling classes */
        .cover {background-position:center top; background-repeat:no-repeat; background-size:cover;}
        .icon {display: block; width:32px; height:32px; background:url(../img/sprite.png) 0 0 no-repeat; opacity:.7; cursor: pointer; cursor: hand;}
        .spr {background:url(../img/sprite.png) 0 0 no-repeat;}
        body .icon:hover {opacity: 1;}
        .padder {padding:10%;}

        /* Across all panels */
        body .navSet {right:8px;}
        body .arrows {right:18px;}
        body .navSet {z-index: 100; top:8px; width:70px; height:70px; padding:10px;}
        body .navSet.hover, body.on1.fullHeight .navSet {width:370px;}
        body.on1.fullHeight .navset {width:200px;}
        body .navSet .icon {position:absolute; top:0; width:50px; height:50px;}
        body .arrows {z-index: 100; bottom:18px;}
        body .arrows .icon {margin:10px;}
        .icon.resume {background-position:9px 9px;}
        .icon.linkedin {background-position:-41px 9px;}
        .icon.facebook {background-position:-91px 9px;}
        .icon.email {background-position:-141px 9px;}
        .icon.hamburger {background-position:-39px -37px;}
        .icon.arrowUp {background-position:3px -43px; opacity:.7;  -webkit-transform: scale(1);  -ms-transform: scale(1);  transform: scale(1); z-index: 2;}
        .icon.arrowDown {background-position:3px -83px; opacity:.7;  -webkit-transform: scale(1);  -ms-transform: scale(1);  transform: scale(1); z-index: 2;}
         .icon.arrowUp:active, .icon.arrowUp.active {-webkit-transform:translate(0, -1px) scale(.97);-ms-transform:translate(0, -1px) scale(.97);transform:translate(0, -1px) scale(.97); opacity:1;}
         .icon.arrowDown:active, .icon.arrowDown.active {-webkit-transform:translate(0, 1px) scale(.97);-ms-transform:translate(0, 1px) scale(.97);transform:translate(0, 1px) scale(.97); opacity:1;}
         .icon.arrowUp.active, .icon.arrowDown.active { -webkit-transition-duration:0s; transition-duration:0s;}
         body.on1 .icon.arrowUp.active, body.on11 .icon.arrowDown.active { -webkit-transition-duration:.3s; transition-duration:.3s;}

        body.on1 .icon.arrowUp, body.on1 .icon.arrowUp:active, body.on1 .icon.arrowUp.active {opacity:0; -webkit-transform: rotate3d(1, 0, 0, 180deg) translateY(-10px); transform: rotate3d(1, 0, 0, 180deg) translateY(-10px); z-index: 1; -webkit-transform-origin: 50% 96%; -ms-transform-origin: 50% 96%; transform-origin: 50% 96%;}
        body.on12 .icon.arrowDown, body.on12 .icon.arrowDown:active, body.on12 .icon.arrowDown.active {opacity:0; -webkit-transform: rotate3d(1, 0, 0, -180deg) translateY(10px); transform: rotate3d(1, 0, 0, -180deg) translateY(10px); z-index: 1; -webkit-transform-origin: 50% -4%; -ms-transform-origin: 50% -4%; transform-origin: 50% -4%;}

        /* Broad panel sequencing */
        .panel {position: absolute; width:100%; height: 100%; top: 0; opacity: 0;}
        .panel.bg {opacity:1;}
        body .textContent {z-index: 4;}

        /* Icon popout animations */
        .showing .navSet .icon {-webkit-animation: iconsOut .4s ease-in-out; animation: iconsOut .4s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
        .on1.fullHeight .navSet .icon, .showing .navSet.hover .icon {

            -webkit-animation: iconsIn .4s ease-in-out;
            animation: iconsIn .4s ease-in-out;

            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        /* Portfolio menu popout animations */
        .showing .navSet .menu {-webkit-animation: menuOut .4s ease-in-out; animation: menuOut .4s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
        .on1.fullHeight .navSet .menu, .showing .navSet.hover .menu {
            -webkit-animation: menuIn .4s ease-in-out;
            animation: menuIn .4s ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

         .showing .navSet .icon.blockClick {position: absolute; top: 0; right: 0; width: 50px; height: 50px; background:none; -webkit-animation:none; animation:none;}
         .showing .navSet.hover .icon.blockClick {-webkit-animation: blockClick .5s linear; animation: blockClick .5s linear; }
         .on1.fullHeight .navSet .icon.blockClick {display:none;}
        @-webkit-keyframes blockClick
        {
            0%   {-webkit-transform:scale(1);transform:scale(1);}
             99% {-webkit-transform:scale(1);transform:scale(1);}
            100% {-webkit-transform:scale(0);transform:scale(0);}
        }
        @keyframes blockClick
        {
            0%   {-webkit-transform:scale(1);transform:scale(1);}
             99% {-webkit-transform:scale(1);transform:scale(1);}
            100% {-webkit-transform:scale(0);transform:scale(0);}
        }

         .menu {position:absolute; top:-1px; right:-30px; padding:10px 15px; font-weight:400; font-size: 14px;}
         .menuInner {background: rgba(255,255,255,.7); border-radius:3px; padding:5px 10px; color:#000; width:120px;}
         .menuInner:hover {background:#fff; cursor:pointer; cursor:hand;}
         .menuInner:active {background:#ccc; -webkit-transition-duration:.1s; transition-duration:.1s;}
        .on1.fullHeight .menu, .showing .navSet.hover .menu {right:200px;}
        .on1.fullHeight .icon.resume, .showing .navSet.hover .resume {right:150px;}
        .on1.fullHeight .icon.linkedin, .showing .navSet.hover .linkedin {right:100px;}
        .on1.fullHeight .icon.facebook, .showing .navSet.hover .facebook {right:50px;}
        .on1.fullHeight .icon.email, .showing .navSet.hover .email {right:0px;}
        .on1.fullHeight .icon.hamburger, .showing .navSet.hover .hamburger {right:0px;}
        body #container .menu {-webkit-animation-delay:.0s; animation-delay:.0s; -webkit-transition-delay:.0s; transition-delay:.0s;}
        body #container .icon.resume {-webkit-animation-delay:.03s; animation-delay:.03s; -webkit-transition-delay:.03s; transition-delay:.03s;}
        body #container .icon.linkedin {-webkit-animation-delay:.06s; animation-delay:.06s; -webkit-transition-delay:.06s; transition-delay:.06s;}
        body #container .icon.facebook {-webkit-animation-delay:.09s; animation-delay:.09s; -webkit-transition-delay:.09s; transition-delay:.09s;}
        body #container .icon.email {-webkit-animation-delay:.12s; animation-delay:.12s; -webkit-transition-delay:.12s; transition-delay:.12s;}
        body.on1.fullHeight .navSet .icon, .showing .navSet.hover .icon {opacity:.7;}
        body.on1.fullHeight .navSet .icon:hover, .showing .navSet.hover .icon:hover {opacity:1; }
        body .navSet .icon {opacity:0; }
        .icon.resume,
        .icon.linkedin,
        .icon.facebook,
        .icon.email {right:0px;}
        @-webkit-keyframes menuOut
        {
            0%   {top:-1px;}
            20%   {top:-25px; -webkit-transform:scale(1.1); transform:scale(1.1);}
             50% {opacity:1;}
            100% {top:-1px; -webkit-transform:scale(0); transform:scale(0); opacity:0;}
        }
        @keyframes menuOut
        {
            0%   {top:-1px;}
            20%   {top:-25px; -webkit-transform:scale(1.1); transform:scale(1.1);}
             50% {opacity:1;}
            100% {top:-1px; -webkit-transform:scale(0); transform:scale(0); opacity:0;}
        }
        @-webkit-keyframes menuIn
        {
            0% {top:-1px; -webkit-transform:scale(0); transform:scale(0); opacity:0;}
            20%   {top:-25px; -webkit-transform:scale(1.1); transform:scale(1.1);}
             50% {opacity:1;}
            100%   {top:-1px; -webkit-transform:scale(1); transform:scale(1);}
        }
        @keyframes menuIn
        {
            0% {top:-1px; -webkit-transform:scale(0); transform:scale(0); opacity:0;}
            20%   {top:-25px; -webkit-transform:scale(1.1); transform:scale(1.1);}
             50% {opacity:1;}
            100%   {top:-1px; -webkit-transform:scale(1); transform:scale(1);}
        }
        @-webkit-keyframes iconsOut
        {
            0%   {top:0; opacity:1;}
            20%   {top:-20px; -webkit-transform:scale(1.1); transform:scale(1.1);}
            100% {top:0; -webkit-transform:scale(0); transform:scale(0); opacity:0;}
        }
        @keyframes iconsOut
        {
            0%   {top:0; opacity:1;}
            20%   {top:-20px; -webkit-transform:scale(1.1); transform:scale(1.1);}
            100% {top:0; -webkit-transform:scale(0); transform:scale(0); opacity:0;}
        }
        @-webkit-keyframes iconsIn
        {
            0% {top:0; -webkit-transform:scale(0); transform:scale(0);}
            20%   {top:-20px; -webkit-transform:scale(1.1); transform:scale(1.1);}
            100%   {top:0; -webkit-transform:scale(1); transform:scale(1);}
        }
        @keyframes iconsIn
        {
            0% {top:0; -webkit-transform:scale(0); transform:scale(0);}
            20%   {top:-20px; -webkit-transform:scale(1.1); transform:scale(1.1);}
            100%   {top:0; -webkit-transform:scale(1); transform:scale(1);}
        }

        /* Treat the hamburger icon differently */
        body.on1 .navSet .icon.all {opacity:1;}
        body.on1.fullHeight .navSet .icon.all, .showing .navSet.hover .icon.all {opacity:0;}
        body .navSet .icon.all {opacity:0; right:0px;}
        body #container .icon.all {-webkit-animation: hamburgerIn .4s ease-in-out; animation: hamburgerIn .4s ease-in-out; -webkit-animation-delay:.15s; animation-delay:.15s; -webkit-transition-delay:.15s; transition-delay:.15s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
        body.on1.fullHeight #container .icon.all, body.showing #container .navSet.hover .icon.all {-webkit-animation: hamburgerOut .4s ease-in-out; animation: hamburgerOut .4s ease-in-out;}

        @-webkit-keyframes hamburgerOut
        {
            0%   {opacity:.7; top:0; right:0px; -webkit-transform:scale(1); transform:scale(1);}
            100%   {opacity:0; top:-20px; right:2px; -webkit-transform:scale(0); transform:scale(0);}
        }

        @keyframes hamburgerOut
        {
            0%   {opacity:.7; top:0; right:0px; -webkit-transform:scale(1); transform:scale(1);}
            100%   {opacity:0; top:-20px; right:2px; -webkit-transform:scale(0); transform:scale(0);}
        }
        @-webkit-keyframes hamburgerIn
        {
            0%   {opacity:0; top:-13px; right:6px; -webkit-transform:scale(1.1); transform:scale(1.1);}
            100%   {opacity:.7; top:0; right:0px; -webkit-transform:scale(1); transform:scale(1);}
        }
        @keyframes hamburgerIn
        {
            0%   {opacity:0; top:-13px; right:6px; -webkit-transform:scale(1.1); transform:scale(1.1);}
            100%   {opacity:.7; top:0; right:0px; -webkit-transform:scale(1); transform:scale(1);}
        }


        /* Animate bouncing arrow icon to hint scrolling */
        body.on1.out0 .icon.arrowDown {
              -webkit-animation-name: scrollHint;
              animation-name: scrollHint;
              -webkit-animation-duration: 2s;
              animation-duration: 2s;
              -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
              -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
        }
@-webkit-keyframes scrollHint {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1) translate3d(0px,0px,0px);
    transform: scale3d(1, 1, 1) translate3d(0px,0px,0px);
  }
  5% {
    opacity: 0.6;
    -webkit-transform: scale3d(1, 1, 1) translate3d(0px,-3px,0px);
    transform: scale3d(1, 1, 1) translate3d(0px,-3px,0px);
  }

  10% {
    -webkit-transform: scale3d(1, 1, 1) translate3d(0px,-4px,0px);
    transform: scale3d(1, 1, 1) translate3d(0px,-4px,0px);
  }

  20% {
    opacity: 1;
    -webkit-transform: scale3d(.9, .9, .9) translate3d(0px,10px,0px);
    transform: scale3d(.9, .9, .9) translate3d(0px,10px,0px);
  }

  30% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px,0px,0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px,0px,0px);
  }

  40% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  50% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes scrollHint {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1) translate3d(0px,0px,0px);
    transform: scale3d(1, 1, 1) translate3d(0px,0px,0px);
  }

  5% {
    opacity: 0.6;
    -webkit-transform: scale3d(1, 1, 1) translate3d(0px,-3px,0px);
    transform: scale3d(1, 1, 1) translate3d(0px,-3px,0px);
  }

  10% {
    -webkit-transform: scale3d(1, 1, 1) translate3d(0px,-4px,0px);
    transform: scale3d(1, 1, 1) translate3d(0px,-4px,0px);
  }

  20% {
    opacity: 1;
    -webkit-transform: scale3d(.9, .9, .9) translate3d(0px,10px,0px);
    transform: scale3d(.9, .9, .9) translate3d(0px,10px,0px);
  }

  30% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px,0px,0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px,0px,0px);
  }

  40% {
    -webkit-transform: scale3d(.97, .97, .97) translate3d(0px,0px,0px);
    transform: scale3d(.97, .97, .97) translate3d(0px,0px,0px);
  }

  50% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
        /* Panels outside of 1 step should be taken out of browser paint calculations
        .panel {display: none;}
        .on0 .p1, .on1 .p1, .on2 .p1,
        .on1 .p2, .on2 .p2, .on3 .p2, .on4 .p2,
        .on2 .p3, .on3 .p3, .on4 .p3,
        .on3 .p4, .on4 .p4, .on5 .p4, .on6 .p4,
        .on4 .p5, .on5 .p5, .on6 .p5,
        .on5 .p6, .on6 .p6, .on7 .p6, .on8 .p6,
        .on6 .p7, .on7 .p7, .on8 .p7,
        .on7 .p8, .on8 .p8, .on9 .p8 {
            display: block;
        } */
        .panel {display: none;}
        .on1 .p1,
        .on2 .p2, .on3 .p2,
        .on4 .p4, .on5 .p4,
        .on6 .p6, .on7 .p6,
        .on8 .p8, .on9 .p8,
        .on10 .p10, .on11 .p10 {
            display: block;
        }


        /* Fadein bg panels */
        .fadeIn {
            top:-1000%; left:-1000%; z-index:3;
            -webkit-animation: pOpacity .3s ease-in-out;
                    animation: pOpacity .3s ease-in-out;

            -webkit-animation-delay: 0;
            animation-delay: 0;

            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
        }
        @-webkit-keyframes pOpacity
        {
            0%   {top:0; left:0; opacity:0; }
            100% {top:0; left:0; opacity:1;}
        }
        @keyframes pOpacity
        {
            0%   {top:0; left:0; opacity:0; }
            100% {top:0; left:0; opacity:1;}
        }

        /* Keep the image around during new fade-in */
        .fadeOut {top:0; left:0; opacity:1; z-index: 2; display:block;
            /* animation: pOpacityOut .3s ease-in-out 0 1; */

            /*
            animation: pOpacityOut .7s linear 0 1;
            animation-fill-mode: forwards;
            */
            top:0; left:0; opacity:1;
        }
        @-webkit-keyframes pOpacityOut
        {
            0%   {top:0; left:0; opacity:1;}
            99%   {top:0; left:0; opacity:1;}
            100% {top:0; left:0; opacity:0;}
        }
        @keyframes pOpacityOut
        {
            0%   {top:0; left:0; opacity:1;}
            99%   {top:0; left:0; opacity:1;}
            100% {top:0; left:0; opacity:0;}
        }

        /* Slide in and fadein text */
        .on1 .textContent .p1,
        .on2 .textContent .p2,
        .on3 .textContent .p3,
        .on4 .textContent .p4,
        .on5 .textContent .p5,
        .on6 .textContent .p6,
        .on7 .textContent .p7,
        .on8 .textContent .p8,
        .on9 .textContent .p9,
        .on10 .textContent .p10,
        .on11 .textContent .p11 {
            top:-1000%; left:-1000%; z-index:3;

            -webkit-animation: fadeIn .5s ease-in-out;
                    animation: fadeIn .5s ease-in-out;

            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;

            -webkit-animation-delay: 0;
            animation-delay: 0;

            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
        }

        .on1 .textContent .p1,
        .out1.up2 .textContent .p2 {
            -webkit-animation-delay:.6s;
                    animation-delay:.6s;
         }
        @-webkit-keyframes slideUp
        {
            0%   {top:0;  left:0; opacity:0; }
            100% {top:0; left:0; opacity:1;}
        }
        @keyframes slideUp
        {
            0%   {top:0;  left:0; opacity:0; }
            100% {top:0; left:0; opacity:1;}
        }
        @-webkit-keyframes slideDown
        {
            0%   {top:0;  left:0; opacity:0; }
            100% {top:0;  left:0; opacity:1;}
        }
        @keyframes slideDown
        {
            0%   {top:0;  left:0; opacity:0; }
            100% {top:0;  left:0; opacity:1;}
        }
        @-webkit-keyframes fadeIn
        {
            0%   {top:0;  left:0; opacity:0; }
            100% {top:0;  left:0; opacity:1;}
        }
        @keyframes fadeIn
        {
            0%   {top:0;  left:0; opacity:0; }
            100% {top:0;  left:0; opacity:1;}
        }

        /* Slide out and fadeout text */
        .out1 .textContent .p1,
        .out2 .textContent .p2,
        .out3 .textContent .p3,
        .out4 .textContent .p4,
        .out5 .textContent .p5,
        .out6 .textContent .p6,
        .out7 .textContent .p7,
        .out8 .textContent .p8,
        .out9 .textContent .p9,
        .out10 .textContent .p10,
        .out11 .textContent .p11 {
            display:block;
            top:-1000%; left:-1000%; z-index:2;

            -webkit-animation: basicFadeOut .5s ease-in-out;
                    animation: basicFadeOut .5s ease-in-out;
            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;

            -webkit-animation-delay: 0;
            animation-delay: 0;

            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
        }
        @-webkit-keyframes basicFadeOut
        {
            0% {top:0; left:0; opacity:1;}
            100%   {top:0; left:0; opacity:0; }
        }
        @keyframes basicFadeOut
        {
            0% {top:0; left:0; opacity:1;}
            100%   {top:0; left:0; opacity:0; }
        }

        /* Text content panel */

        .textContent {
            /* background-image:url(../img/me-content-bg.png); */
            background:rgba(0,0,0,.85);
            opacity: 0;
             -webkit-transform:translateX(0);
                     -ms-transform:translateX(0);
                 transform:translateX(0);

            -webkit-animation: textContentReveal .3s ease-in-out;
                    animation: textContentReveal .3s ease-in-out;

            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;


            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;

            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
        }
         body .textContent.right {right:0px;}
         body.tucked.tuckPeek .textContent.right {right:10px;}

        @-webkit-keyframes textContentReveal
        {
            0%   {opacity:0;}
            100% {opacity:1;}
        }

        @keyframes textContentReveal
        {
            0%   {opacity:0;}
            100% {opacity:1;}
        }

        /* Loading panel */
        .showing #container {display:block !important;}
        .showing #loaderView {display:none;}
        .loading #container {display:none;}
        .loading #loaderView {display:block;}
        body.startDelay .bg {opacity:0; -webkit-transition-delay:-10s; -o-animation-delay:-10s; -webkit-transition-delay:-10s; transition-delay:-10s;} /* don't show other panel animations on load */
        body.startDelay .me.bg {opacity:1;}
        .out1 .bg.cover, .on1 .bg.cover {-webkit-animation-delay:.4s; animation-delay:.4s;}

        /**
         * Document defaults
         */

        /* The loader container */
        body .loader {display: none;}
        body.startDelay .loader {display: block;}
        body.startDelay #navSet {opacity:0;}
        .loader {position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin-top: -200px; margin-left: -200px;}
            .loadingMsg {text-align: center; width:100%; margin-top:189px; position: absolute; text-transform: uppercase; font-size:11px; font-weight:900; color:#444;}
            .loader .noOverflow {overflow:hidden !important;}
            .loader .full.rel.addedRotation {overflow: visible;  -webkit-animation: rotate 3.2s linear infinite;  animation: rotate 3.2s linear infinite;}
                .dot {position: absolute; top:50%; left:50%; z-index: 10; width: 0; height: 0; border-radius: 40px; overflow: visible; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%;}
                .dot.d1 {-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
                .dot.d2 {-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg);}
                .dot.d3 {-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg);}
                .dot.d4 {-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
                .dot.d5 {-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg);}
                .dot.d6 {-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg);}
                .dot.d7 {-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
                .dot.d8 {-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg);}
                .dot.d9 {-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg);}
                .dot.d10 {-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);}
                .dot.d11 {-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg);}
                .dot.d12 {-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg);}
                  .dot:after {content: ""; width: 10px; height: 10px; background: #000; display: block; margin-top: 50px; border-radius:50px; -webkit-animation: anim 1.2s cubic-bezier(.6,0,.4,1) infinite; animation: anim 1.2s cubic-bezier(.6,0,.4,1) infinite;}
                  .dot.d12:after {-webkit-animation-delay:0s; animation-delay:0s;}
                  .dot.d11:after {-webkit-animation-delay:-.1s; animation-delay:-.1s;}
                  .dot.d10:after {-webkit-animation-delay:-.2s; animation-delay:-.2s;}
                  .dot.d9:after {-webkit-animation-delay:-.3s; animation-delay:-.3s;}
                  .dot.d8:after {-webkit-animation-delay:-.4s; animation-delay:-.4s;}
                  .dot.d7:after {-webkit-animation-delay:-.5s; animation-delay:-.5s;}
                  .dot.d6:after {-webkit-animation-delay:-.6s; animation-delay:-.6s;}
                  .dot.d5:after {-webkit-animation-delay:-.7s; animation-delay:-.7s;}
                  .dot.d4:after {-webkit-animation-delay:-.8s; animation-delay:-.8s;}
                  .dot.d3:after {-webkit-animation-delay:-.9s; animation-delay:-.9s;}
                  .dot.d2:after {-webkit-animation-delay:-1s; animation-delay:-1s;}
                  .dot.d1:after {-webkit-animation-delay:-1.1s; animation-delay:-1.1s;}

                    @-webkit-keyframes rotate {
                        0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
                        100% {-webkit-transform:rotate(-360deg);transform:rotate(-360deg);}
                    }

                    @keyframes rotate {
                        0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
                        100% {-webkit-transform:rotate(-360deg);transform:rotate(-360deg);}
                    }
                    @-webkit-keyframes anim {
                        0% {height:10px; width:10px; opacity:0; margin-top: 50px;}
                        5% {opacity: 1;}
                        20% {height:60px; width:15px; opacity:1;}
                        50% {opacity: 1;}
                        100% {height:0px; width:6px; opacity:0; margin-top: 50px;}
                    }
                    @keyframes anim {
                        0% {height:10px; width:10px; opacity:0; margin-top: 50px;}
                        5% {opacity: 1;}
                        20% {height:60px; width:15px; opacity:1;}
                        50% {opacity: 1;}
                        100% {height:0px; width:6px; opacity:0; margin-top: 50px;}
                    }

        /* 1st Panel - "me" */
        .me.bg {background-color:#5E2E26; background-image:url(../img/me-bg.jpg); background-position:30% top;}
        .me .infoBlock {top:15%; padding:0 10%;}

        /* 1st Panel out */
        @-webkit-keyframes bounceOutRight {
          0% {
            -webkit-transform: translateX(0);
                    transform: translateX(0);
          }

          20% {
            opacity: 1;
            -webkit-transform: translateX(-20px);
                    transform: translateX(-20px);
          }

          100% {
            opacity: 0;
            -webkit-transform: translateX(2000px);
                    transform: translateX(2000px);
          }
        }
        @keyframes bounceOutRight {
          0% {
            -webkit-transform: translateX(0);
                    transform: translateX(0);
          }

          20% {
            opacity: 1;
            -webkit-transform: translateX(-20px);
                    transform: translateX(-20px);
          }

          100% {
            opacity: 0;
            -webkit-transform: translateX(2000px);
                    transform: translateX(2000px);
          }
        }

        @keyframes bounceOutRight {
          0% {
            -webkit-transform: translateX(0);
                    transform: translateX(0);
          }

          20% {
            opacity: 1;
            -webkit-transform: translateX(-20px);
                    transform: translateX(-20px);
          }

          100% {
            opacity: 0;
            -webkit-transform: translateX(2000px);
                    transform: translateX(2000px);
          }
        }

        .navSet.x {
          -webkit-animation-duration: 1s;
                  animation-duration: 1s;
          -webkit-animation-fill-mode: both;
                  animation-fill-mode: both;
          -webkit-animation-name: bounceOutRight;
                  animation-name: bounceOutRight;
        }


        /* 2nd Panel - "Google"
        .me.bg {background-color:#5E2E26; background-image:url(../img/me-bg.jpg); background-position:30% top;}
        .goog.bg {background-color:#000;  background-image:url(../img/goog8.jpg); }
        .goog .infoBlock {top:15%; padding:0 10%;}
        body.on2 div.leftHalf .leftSideBorder,
        body.on2 div.leftHalf .textBlock {display: none;}
        body.on2 div.leftHalf {cursor: default;}
        */

        /* All panels */
        .panel .infoBlock {top:15%; padding:0 10%; width:100%;}
        .linkOut .midifyBlock {margin-top:0;}
        div.slideInfo {width: 80%;}
        .slideBlock {-webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0)}

        /* Panel tucks - todo(bbarros), test if min-width:50% is necessary */
        body.tucked .textContent  { -webkit-transform:translateX(100%); -ms-transform:translateX(100%); transform:translateX(100%); /* min-width:50%; */ max-width:50%; width:50%;}
        body.tucked .addShadow:before {width:4px; left:-4px;}
        body.tucked .slideBlock .controls {display:block;}


        /* 2nd Panel - "goog" */
        .expeditions.bg {background-color:#281B15; background-image:url(../img/expeditions-bg.jpg); background-position:30% top;}
        .expeditions .content {background-image:url(../img/expeditions-content-bg.png);}
        #expeditionsSlideBlock .controls {opacity:1;}

        /* 2nd Panel - "goog" */
        .goog.bg {background-color:#281B15; background-image:url(../img/goog-bg.jpg); background-position:30% top;}
        .goog .content {background-image:url(../img/me-content-bg.png);}
        #googSlideBlock .controls {opacity:1;}

        /* 2nd Panel - "mm" */
        .mm.bg {background-color:#281B15; background-image:url(../img/mm-bg.jpg); background-position:30% top;}
        .mm .content {background-image:url(../img/me-content-bg.png);}
        #mmSlideBlock .controls {opacity:1;}

        /* 4th Panel - "hl" */
        .hl.bg {background-color:#414953; background-image:url(../img/hl-bg2.png); background-position:30% top;}
        .hl .content {background-image:url(../img/me-content-bg.png);}


        /* 6th Panel - "tf" */
        .tf.bg {background-color:#414953; background-image:url(../img/tf-bg.jpg); background-position:30% top;}
        .tf .content {background-image:url(../img/me-content-bg.png);}


        /* 8th Panel - "misc" */
        .misc.bg {background-color:#414953; background-image:url(../img/misc-bg.jpg); background-position:30% top;}
        .misc .content {background-image:url(../img/me-content-bg.png);}

        /* 10th Panel - "cv" */
        .cv.bg {background-color:#303030; padding-right:90px;}
        .on10 .cv.bg {background-color:#ccc;}
        .cv.bg .content {background-color:#303030;}
        .cv.bg > .rel {background-color:#fff;}
        .on13 .blockScroll {display: none;}
        .on13 .p12 .rel.full {overflow:hidden;}

        /* Textarea of cv */
        .cv textarea, .cv input, .cv button {width:100%; border-radius:3px; border:none; padding:6px 10px; margin-top:10px; background:rgba(255,255,255,.8); color:#555; font-weight: 500; font-size: 14px;}
        .cv textarea:hover, .cv input:hover, .cv button:hover,
        .cv textarea:active, .cv input:active, .cv button:active,
        .cv textarea:focus, .cv input:focus, .cv button:focus {background:rgba(255,255,255,.9); color:#333;}
        .cv textarea:focus, .cv input:focus, .cv button:focus {color:#222; background:#fff;}
        .cv button:hover, .cv button:active, .cv button:focus {color:#111;}
        .cv textarea {height:200px;}
        .cv button {width:auto; font-weight:700; color:#444;}
        ::-webkit-input-placeholder {color:#666;}
        :-moz-placeholder {color:#666;}
        ::-moz-placeholder {color:#666;}
        :-ms-input-placeholder {color:#666;}

        /* Sliding panel */
        #loaderView {height: 100%;}

        .midifyBlock{height:100%;width:100%;position:absolute;text-align:center; margin-top:-15px;}
        .midifyBlock:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-.25em;}
        .tucked .textContent .textRecover {position:absolute; top:0; left:-30px; height:100%; width:40px; z-index:10; cursor:pointer;}
        .centered{display:inline-block;vertical-align:middle; z-index:2;}

        .slideHolder {overflow: hidden; background-color:rgba(0, 0, 0, 0.3);  box-shadow:6px 6px 0 rgba(0,0,0,.3);}
        .slide {opacity:0; width:100%; height:100%;}
        .btnFrame {background:#222;}
            .infoBlurb {opacity:0; position:absolute; bottom:0; left:0; width:100%; padding:5px 20px 10px 20px; background:rgba(0,0,0,.9); color:#ccc; font-size:15px; text-align: left; line-height:1.2em;
                -webkit-transition:.3s all ease-in-out;
                        transition:.3s all ease-in-out;
                -webkit-transform: scaleY(.95) translateY(20px);
                        -ms-transform: scaleY(.95) translateY(20px);
                    transform: scaleY(.95) translateY(20px);
                -webkit-transform-origin:0% 100%;
                        -ms-transform-origin:0% 100%;
                    transform-origin:0% 100%; /* Chrome, Safari, Opera */
            }
            .slideHolder:hover .infoBlurb {opacity:1; padding:15px 20px 20px 20px; -webkit-transform: scaleY(1) translateY(0); -ms-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0);}
            .slideTitle {font-weight:400; color:#eee; display:inline-block;}
            .slideTitle:after {content:"\2022"; color:rgba(255,255,255,.3); display:inline-block; margin:0 4px 0 8px;}

        /* .slide .full {width: auto;} */

        .controls .arrow {width:38px; height: 53px; margin-top:-50px; top:50%; cursor: pointer; cursor: hand;}
        .controls .leftArrow {left:-45px; background-position: 0 -132px;}
        .controls .rightArrow {right:-50px; background-position: 0 -210px;}

        .controls .leftArrow.overIcon {background-position: -49px -132px;}
        .controls .leftArrow.overIcon:hover {background-position: -99px -132px;}
        .controls .leftArrow.overIcon:active, .controls .leftArrow.overIcon.active {background-position: -149px -132px;}
        .onFirst .leftArrow.overIcon {opacity:0; cursor: default;}

        .controls .rightArrow.overIcon {background-position: -49px -211px;}
        .controls .rightArrow.overIcon:hover {background-position: -99px -211px;}
        .controls .rightArrow.overIcon:active, .controls .rightArrow.overIcon.active {background-position: -149px -211px;}
        .onLast .rightArrow.overIcon {opacity:0; cursor: default;}

        .controls .arrow.overIcon:active, .controls .arrow.overIcon.active {-webkit-transform:translate(0px, 1px) scale(.98); -ms-transform:translate(0px, 1px) scale(.98); transform:translate(0px, 1px) scale(.98);}

        .outro {top:0; left:0; opacity:1; z-index: 2;
            /*
            animation: pOpacityOut .3s ease-in-out 0 1;
            animation-fill-mode: forwards;
            */

        }
        .slideHolder .slide.active {top:-1000%; left:-1000%; z-index:3;
                    -webkit-animation: slideLeft .3s ease-in-out;
                            animation: slideLeft .3s ease-in-out;

                    -webkit-animation-fill-mode: forwards;
                            animation-fill-mode: forwards;

                    -webkit-animation-delay: 0;
                    animation-delay: 0;

                    -webkit-animation-iteration-count: 1;
                    animation-iteration-count: 1;

        }
        .slideHolder[dir="prev"] .slide.active {top:-1000%; left:-1000%; z-index:10;
                    -webkit-animation: slideRight .3s ease-in-out;
                            animation: slideRight .3s ease-in-out;
                    -webkit-animation-fill-mode: forwards;
                            animation-fill-mode: forwards;

                    -webkit-animation-delay: 0;
                    animation-delay: 0;

                    -webkit-animation-iteration-count: 1;
                    animation-iteration-count: 1;
        }
        body.scrolling .slideHolder .slide.active {-webkit-animation-delay:-1s; animation-delay:-1s;}

        @-webkit-keyframes slideLeft
        {
            0%   {top:0; left:0; -webkit-transform:translate(10%,0); transform:translate(10%,0); opacity:0; }
            100% {top:0; left:0; -webkit-transform:translate(0,0); transform:translate(0,0); opacity:1;}
        }

        @keyframes slideLeft
        {
            0%   {top:0; left:0; -webkit-transform:translate(10%,0); transform:translate(10%,0); opacity:0; }
            100% {top:0; left:0; -webkit-transform:translate(0,0); transform:translate(0,0); opacity:1;}
        }
        @-webkit-keyframes slideRight
        {
            0%   {top:0; left:0; -webkit-transform:translate(-10%,0); transform:translate(-10%,0); opacity:0; }
            100% {top:0; left:0; -webkit-transform:translate(0,0); transform:translate(0,0); opacity:1;}
        }
        @keyframes slideRight
        {
            0%   {top:0; left:0; -webkit-transform:translate(-10%,0); transform:translate(-10%,0); opacity:0; }
            100% {top:0; left:0; -webkit-transform:translate(0,0); transform:translate(0,0); opacity:1;}
        }

        /* Set correct z-index order for overlapping fadeouts going leftward */
        .slideHolder[dir="prev"] .slide[step="1"].outro {z-index:9;}
        .slideHolder[dir="prev"] .slide[step="2"].outro {z-index:8;}
        .slideHolder[dir="prev"] .slide[step="3"].outro {z-index:7;}
        .slideHolder[dir="prev"] .slide[step="4"].outro {z-index:6;}
        .slideHolder[dir="prev"] .slide[step="5"].outro {z-index:5;}
        .slideHolder[dir="prev"] .slide[step="6"].outro {z-index:4;}
        .slideHolder[dir="prev"] .slide[step="7"].outro {z-index:3;}
        .slideHolder[dir="prev"] .slide[step="8"].outro {z-index:2;}
        .slideHolder[dir="prev"] .slide[step="9"].outro {z-index:1;}



        div[onslide="1"] span[step="1"] .bouncer,
        div[onslide="2"] span[step="2"] .bouncer,
        div[onslide="3"] span[step="3"] .bouncer,
        div[onslide="4"] span[step="4"] .bouncer,
        div[onslide="5"] span[step="5"] .bouncer,
        div[onslide="6"] span[step="6"] .bouncer,
        div[onslide="7"] span[step="7"] .bouncer,
        div[onslide="8"] span[step="8"] .bouncer,
        div[onslide="9"] span[step="9"] .bouncer
        {border-bottom: 1px solid #fff; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.4); opacity:.8;
            -webkit-animation: bouncer .2s ease-in-out;
                    animation: bouncer .2s ease-in-out;

            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        @-webkit-keyframes bouncer {
          0% {
            -webkit-transform: perspective(400px) scale(1);
                    transform: perspective(400px) scale(1);
          }

          20% {
            -webkit-transform: perspective(400px) scale(1.1);
                    transform: perspective(400px) scale(1.1);
          }

          100% {
            -webkit-transform: perspective(400px) scale(1);
                    transform: perspective(400px) scale(1);
          }
        }

        @keyframes bouncer {
          0% {
            -webkit-transform: perspective(400px) scale(1);
                    transform: perspective(400px) scale(1);
          }

          20% {
            -webkit-transform: perspective(400px) scale(1.1);
                    transform: perspective(400px) scale(1.1);
          }

          100% {
            -webkit-transform: perspective(400px) scale(1);
                    transform: perspective(400px) scale(1);
          }
        }


        div[onslide="1"] span[step="1"] .bouncer.btn,
        div[onslide="2"] span[step="2"] .bouncer.btn,
        div[onslide="3"] span[step="3"] .bouncer.btn,
        div[onslide="4"] span[step="4"] .bouncer.btn,
        div[onslide="5"] span[step="5"] .bouncer.btn,
        div[onslide="6"] span[step="6"] .bouncer.btn,
        div[onslide="7"] span[step="7"] .bouncer.btn,
        div[onslide="8"] span[step="8"] .bouncer.btn,
        div[onslide="9"] span[step="9"] .bouncer.btn
        {
text-shadow: none;
background: rgba(255, 255, 255, 0.7);
border-color: rgba(255, 255, 255, 0);
color: #000;}


        body .slideNav {bottom:18px; font-size:14px;}
        .slideNav .holder {margin:10px; color:#ccc; cursor: pointer; cursor: hand;}
        .slideNav .holder .bouncer { font-weight: 300; color: #fff; opacity:.7;}
		.slideNav .bouncer, .slideNav .spacer {padding:0 2px;}
        html.Safari.Macintosh .slideNav .holder .bouncer {font-weight:400;}
        .btn {border: 1px solid rgba(255,255,255,.6); color: rgba(255, 255, 255, 0.8);}
        .slideNav .holder .bouncer.btn {padding: 7px 10px; border-radius: 3px;}
        .previewBtn { padding: 4px 8px; font-size: 12px; border-radius: 3px; float: right; margin: 0 -6px 4px 20px; cursor: pointer; cursor: hand;}
        .btn:hover, .slideNav .holder .bouncer.btn:hover {text-shadow:none; background:rgba(255, 255, 255, 0.7); border-color:rgba(255, 255, 255, 0); color:#000;}
        .btn:active, .slideNav .holder .bouncer.btn:active {background:#fff; border-color:#fff;}

        .slideNav .holder .bouncer:hover {color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.4); opacity:1;}
        .slideNav .holder .bouncer:active, .slideNav .holder .bouncer.active {color:#ccc; opacity:.9;}
        .visHide {visibility: hidden;}


            body .leftHalf {width:100%; height:100%; position:absolute; top:0; left:0; z-index: 4; text-align:center; display:none; opacity:0;}
            body .textBlock {height:auto; top:100%; width:50%;}
            body .hoverContainer {cursor:pointer; cursor:hand;}
            body .hoverContainer .leftSideBorder {border:0px solid rgba(0,0,0,.5); border-right:8px solid rgba(0,0,0,0);}
            body .hoverContainer:hover .leftSideBorder { border:8px solid rgba(0, 0, 0, 0.3);}
            body .hoverContainer .clickToExpand {display:inline-block; font-size:17px; color:rgba(255, 255, 255, 0.8); font-weight:200; top:100%; padding:10px 20px 13px 20px; background:rgba(0,0,0,.4);}
            body .hoverContainer:hover .textBlock {top:90%;}
            body .hoverContainer:hover .textBlock .clickToExpand:hover {background:rgba(0,0,0,.5); color:rgba(255, 255, 255, 1); cursor:pointer; cursor:hand;}

            body.on2 .leftHalf,
            body.on4 .leftHalf,
            body.on6 .leftHalf,
            body.on8 .leftHalf,
            body.on10 .leftHalf,
            body.on12 .leftHalf,
            body.out2.scrolling .leftHalf,
            body.out4.scrolling .leftHalf,
            body.out6.scrolling .leftHalf,
            body.out8.scrolling .leftHalf,
            body.out10.scrolling .leftHalf,
            body.out12.scrolling .leftHalf {display:block; opacity:1;}

            body.out2.scrolling .leftHalf,
            body.out4.scrolling .leftHalf,
            body.out6.scrolling .leftHalf,
            body.out8.scrolling .leftHalf,
            body.out10.scrolling .leftHalf,
            body.out12.scrolling .leftHalf {opacity:0; width:100%;}

            /* Remove border hover when lefthalf becomes less than that */
            @media screen and (max-width: 1199px){
                body .leftHalf {text-align: left; width:100%;}
                body .hoverContainer .leftSideBorder {border:0 solid rgba(0,0,0,0);}
            }




                .menu .label {white-space: nowrap;}

                .btnToggle {display:inline-block; vertical-align: middle; border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 6px solid rgba(0,0,0,.5); position: absolute; top: 13px; right: 10px;}

                .bubTopArrow {display:inline-block; vertical-align: middle; text-align: center;; border-left: 8px solid rgba(0, 0, 0, 0); border-right: 8px solid rgba(0, 0, 0, 0); border-bottom: 6px solid rgba(255, 255, 255, 0.9); top: 9px; left:30px; position:absolute;}

                .menu .item {padding:3px 10px; margin:0 -10px; border:1px solid rgba(255,255,255,0); border-left:none; border-right:none; cursor:pointer; cursor:hand;}
                .menu .item:hover,
                body.on2 .item[pagenum="2"],
                body.on3 .item[pagenum="2"],
                body.on4 .item[pagenum="4"],
                body.on5 .item[pagenum="4"],
                body.on6 .item[pagenum="6"],
                body.on7 .item[pagenum="6"],
                body.on8 .item[pagenum="8"],
                body.on9 .item[pagenum="8"],
                body.on10 .item[pagenum="10"],
                body.on11 .item[pagenum="10"]
                 {background:#fff; border-color: rgba(0,0,0,0.15);}

                @-webkit-keyframes flipInX {
                  0% {
                    -webkit-transform: perspective(400px) rotateX(90deg) scale(1.1, 0) translateY(-60%);
                            transform: perspective(400px) rotateX(90deg) scale(1.1, 0) translateY(-60%);
                    -webkit-transform: perspective(400px) rotateX(90deg);
                            transform: perspective(400px) rotateX(90deg);
                    opacity: 0;
                    top:-30px
                  }
                  20% {opacity:0;}

                  100% {
                    -webkit-transform: perspective(400px) rotateX(0deg) scale(1, 1) translateY(0%);
                            transform: perspective(400px) rotateX(0deg) scale(1, 1) translateY(0%);
                    -webkit-transform: perspective(400px) rotateX(0deg);
                            transform: perspective(400px) rotateX(0deg);
                    opacity: 1;
                    top:30px
                  }
                }

                @keyframes flipInX {
                  0% {
                    -webkit-transform: perspective(400px) rotateX(90deg) scale(1.1, 0) translateY(-60%);
                            transform: perspective(400px) rotateX(90deg) scale(1.1, 0) translateY(-60%);
                    -webkit-transform: perspective(400px) rotateX(90deg);
                            transform: perspective(400px) rotateX(90deg);
                    opacity: 0;
                    top:-30px
                  }
                  20% {opacity:0;}

                  100% {
                    -webkit-transform: perspective(400px) rotateX(0deg) scale(1, 1) translateY(0%);
                            transform: perspective(400px) rotateX(0deg) scale(1, 1) translateY(0%);
                    -webkit-transform: perspective(400px) rotateX(0deg);
                            transform: perspective(400px) rotateX(0deg);
                    opacity: 1;
                    top:30px
                  }
                }

                @-webkit-keyframes flipOutX {
                  0% {
                    -webkit-transform: perspective(400px) rotateX(0deg) scale(1, 1) translateY(0%);
                            transform: perspective(400px) rotateX(0deg) scale(1, 1) translateY(0%);
                    opacity: 1;
                    top:30px
                  }
                  80% {opacity:0;}
                  100% {
                    -webkit-transform: perspective(400px) rotateX(90deg) scale(1.1, 0) translateY(-60%);
                            transform: perspective(400px) rotateX(90deg) scale(1.1, 0) translateY(-60%);
                    opacity: 0;
                    top:-30px
                  }
                }

                @keyframes flipOutX {
                  0% {
                    -webkit-transform: perspective(400px) rotateX(0deg) scale(1, 1) translateY(0%);
                            transform: perspective(400px) rotateX(0deg) scale(1, 1) translateY(0%);
                    opacity: 1;
                    top:30px
                  }
                  80% {opacity:0;}
                  100% {
                    -webkit-transform: perspective(400px) rotateX(90deg) scale(1.1, 0) translateY(-60%);
                            transform: perspective(400px) rotateX(90deg) scale(1.1, 0) translateY(-60%);
                    opacity: 0;
                    top:-30px
                  }
                }

                body .menuList {opacity:0; top:30px; left:-10px; padding:15px 10px 10px 10px;
                  -webkit-backface-visibility: visible !important;
                  -webkit-transform-origin:50% 35%;
                          -ms-transform-origin:50% 35%;
                      transform-origin:50% 35%; /* Chrome, Safari, Opera */
                    -webkit-animation: flipOutX .3s ease-out;
                            animation: flipOutX .3s ease-out;

                    -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
                }

                body .active .menuList {
                  -webkit-animation: flipInX .3s ease-out;
                          animation: flipInX .3s ease-out;

                    -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
                }

                body .menuListInner {width:120px; background:rgba(255, 255, 255, 0.9); border-radius:3px; padding:7px 10px; color:#000; box-shadow:0px 2px 2px rgba(0,0,0,.2);}



        /* Stepped panel sequencing */
        @media screen and (max-device-width: 480px){
            html { font-size: 1.5em;}
            .halfw {width:100%; min-width: 0;}
        }


        /* Small-height screen adjustments */
        @media screen and (max-height: 640px){
            body #navSet.hover {background:rgba(0,0,0,.8); border-radius:5px;}
            body #navSet {background:rgba(0,0,0,0);}
            .panel .infoBlock {padding-right:20%; top:40px;}
        }
        body.tucked #navSet.hover {background:rgba(0,0,0,.8); border-radius:5px;}


    /* Painful Firefox Animation Fixes (temporary) */
    .Firefox #navSet .menu {opacity:0;}
    .Firefox #navSet.hover .menu, .Firefox #navSet.hover .menu {display:block;}
    .Firefox body #container .icon.all {animation:none; opacity:.7; top:0; right:0px; transform:scale(1);}
    .Firefox body #container .hover .icon.all, .Firefox body #container .hover .icon.blockClick {animation:none; opacity:0; transform:scale(0) !important;}
    .Firefox #textContent {transition:transform .3s ease-out;}
    @media screen and (min-height: 641px){
        .Firefox body.on1 #container .icon.all {display:none;}
        .Firefox body.on1 #navSet .menu, .Firefox body #navSet.hover .menu {opacity:1; animation:none;}
    }

    /* Safari font weight fixes */
    html.Safari.Macintosh {font-weight:400;}