html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul, nav { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }

/* ==|== Styles ===============================================================
   Author: Nathan Gordon
   ========================================================================== */

/* ==|== Typography ========================================================= */

.helv-thin { font-family:'HelveticaNeueW02-ThinCn_674417'; }
.helv-bold { font-family:'HelveticaNeueW02-77BdCn_694066'; }
.helv-ultra { font-family:'Helvetica W02 Ultra Cm'; }


@font-face {
    font-family: 'icons';
    src:url('../font/20-elements.eot');
    src:url('../font/20-elements.eot?#iefix') format('embedded-opentype'),
        url('../font/20-elements.woff') format('woff'),
        url('../font/20-elements.ttf') format('truetype'),
        url('../font/20-elements.svg#20_elements') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icons { font-family: 'icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; }


/* ==|== Common =========================================================== */

html { height: 100%; }
body { height: 100%; overflow: hidden; font-family:'HelveticaNeueW02-ThinCn_674417'; }

* { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

.slide2,
.timeline,
.scene canvas { opacity: 0; visibility: hidden; }

.loader,
.center,
.timeline,
.scene canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* ==|== Intro =========================================================== */

.loader { text-align: center; color: #333; text-transform: uppercase; background: #fff; }
.center { height: 200px; margin: auto; }
.loader .logo { font-size: 5em; }    
.loader .tagline { margin-top: 30px; text-transform: uppercase; letter-spacing: 10px; font-size: 14px; }
.twenty { font-size: 280px; margin-bottom: 10px; margin-top: -90px; }
.fwa-logo { font-size: 68px; }

/* ==|== Scene =========================================================== */

.scene canvas { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; }
.scene canvas:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; }

.timeline-prompt { position: absolute; bottom: 0; right: 0; margin: 20px; padding: 10px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.2em; font-size: 20px;}
.timeline-prompt span { font-size: 12px; position: relative; top: -0.3em; }
.fwa-prompt { position: absolute; bottom: 0; left: 0; margin: 20px; padding: 10px; font-size: 14px; cursor: pointer;}
.move-prompt { position: absolute; bottom: 0; left: 50%; margin: 0 0 30px -100px; width: 200px; text-align: center; text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px;}

/* ==|== Timeline =========================================================== */

.timeline { background: #fff; text-align: center; overflow-y: scroll; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

.timeline .timeline-close { z-index: 2; cursor: pointer; position: fixed; top: 20px; right: 40px; width: 32px; height: 32px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.timeline .timeline-close::after { position: absolute; content: ""; width: 1px; height: 32px; background: #000; left: 16px; top: 0; }
.timeline .timeline-close::before { position: absolute; content: ""; width: 32px; height: 1px; background: #000; left: 0; top: 16px; }

.timeline .un-logo { font-size: 5em; margin: 60px 0; }
.timeline .un-logo a { color: #000; }
.timeline h1 { text-transform: uppercase; letter-spacing: 10px; font-size: 14px; }

.timeline .timeline-items { position: relative; margin: 60px auto 200px; }
.timeline .timeline-items .line { position: absolute; width: 1px; height: 100%; left: 50%; top: 0; background: #d9d9d9; }

.timeline .timeline-items h3 { position: relative; font-size: 24px; letter-spacing: 2px; padding: 20px 0; width: 300px; margin: 0 auto; }
.timeline .timeline-items span { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: #FFF; display: block; line-height: 40px; }

.timeline .timeline-items ul li { position: relative; width: 50%; box-sizing: border-box; margin: 30px 0; text-transform: uppercase; }
.timeline .timeline-items ul li::after { content: "•"; font-size: 20px; position: absolute; top: 0; margin-top: -3px; width: 12px; text-align: center;}
.timeline .timeline-items ul li:nth-child(odd), .timeline .timeline-items ul li.left { text-align: right; padding-right: 60px; }
.timeline .timeline-items ul li:nth-child(even), .timeline .timeline-items ul li.right { text-align: left; padding-left: 60px; margin-left: 50%; }
.timeline .timeline-items ul li:nth-child(odd)::after, .timeline .timeline-items ul li.left::after { right: -6.5px; }
.timeline .timeline-items ul li:nth-child(even)::after, .timeline .timeline-items ul li.right::after { left: -5.5px; }

.timeline .timeline-items ul li a { color: #000; display: inline-block; }
.timeline .timeline-items ul li a h2 { font-size: 16px; letter-spacing: 4px; margin-bottom: 5px; }
.timeline .timeline-items ul li a p { font-size: 14px; letter-spacing: 2px; }