@-webkit-keyframes sinfade{0%{opacity:1;-ms-filter:none;filter:none}
50%{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}
100%{opacity:1;-ms-filter:none;filter:none}
}@font-face{font-family:'tstar_twregular';src:url("../assets/fonts/tstar_tw-regular-webfont.eot");src:url("../assets/fonts/tstar_tw-regular-webfont.ttf") format('truetype'),url("../assets/fonts/tstar_tw-regular-webfont.eot?#iefix") format('embedded-opentype'),url("../assets/fonts/tstar_tw-regular-webfont.woff") format('woff'),url("../assets/fonts/tstar_tw-regular-webfont.svg#tstar_twregular") format('svg');font-weight:normal;font-style:normal}
html,body,iframe{margin:0;padding:0;width:100%;height:100%;overflow:hidden;position:absolute;border:none;left:0;top:0;font-family:'tstar_twregular';color:#fff}
iframe{background-color:#000;-webkit-transform-origin:0 0 0;-moz-transform-origin:0 0 0;-o-transform-origin:0 0 0;-ms-transform-origin:0 0 0;transform-origin:0 0 0;-webkit-transition:opacity 1s ease;-moz-transition:opacity 1s ease;-o-transition:opacity 1s ease;-ms-transition:opacity 1s ease;transition:opacity 1s ease;pointer-events:none}
body{background-color:#000;-webkit-perspective:1000px;-moz-perspective:1000px;-ms-perspective:1000px;perspective:1000px;}
body.live #ui{display:none}
#paperjs-canvas{width:100%;height:100%;background-color:#18181b;display:none;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;-o-transition:opacity 0.5s ease-out;-ms-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;position:absolute;}
#paperjs-canvas.off{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}
#paperjs-canvas.on{opacity:1;-ms-filter:none;filter:none}
.nofocus #paperjs-canvas{opacity:.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50)}
#curtain{width:100%;height:0;position:absolute;z-index:999;background:#50757d;-webkit-transition:height 1.5s cubic-bezier(0.875, 0.155, 0.535, 0.985), opacity 2s, background-color 1s;-moz-transition:height 1.5s cubic-bezier(0.875, 0.155, 0.535, 0.985), opacity 2s, background-color 1s;-o-transition:height 1.5s cubic-bezier(0.875, 0.155, 0.535, 0.985), opacity 2s, background-color 1s;-ms-transition:height 1.5s cubic-bezier(0.875, 0.155, 0.535, 0.985), opacity 2s, background-color 1s;transition:height 1.5s cubic-bezier(0.875, 0.155, 0.535, 0.985), opacity 2s, background-color 1s;}
#curtain .halo{width:100%;height:100%;text-align:center;background:url("../assets/ui/light.png") center center no-repeat;-webkit-transition:opacity 1.5s;-moz-transition:opacity 1.5s;-o-transition:opacity 1.5s;-ms-transition:opacity 1.5s;transition:opacity 1.5s;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-animation:none;-moz-animation:none;-o-animation:none;-ms-animation:none;animation:none}
#curtain.down{height:100%}
#curtain.off{background-color:#000;}
#curtain.off .halo{opacity:1;-ms-filter:none;filter:none}
#curtain.bulbs,#timeline > a.bulbs{background-color:#50757d}
#curtain.tiroirs,#timeline > a.tiroirs{background-color:#5f2633}
#curtain.birds,#timeline > a.birds{background-color:#79795f}
#curtain.tribal,#timeline > a.tribal{background-color:#ccccbe}
#curtain.lockers,#timeline > a.lockers{background-color:#832945}
#curtain.thorns,#timeline > a.thorns{background-color:#3a5b60}
#curtain.stripes,#timeline > a.stripes{background-color:#897173}
#curtain.books,#timeline > a.books{background-color:#898976}
#curtain.tech,#timeline > a.tech{background-color:#2a2a2d}
#ui.inactive > *{pointer-events:none}
#ui #info{position:absolute;left:5%;top:5%;z-index:998;text-transform:uppercase;}
#ui #info h1{margin:0;color:#a6a67a;font-size:16px}
#ui #info h2{color:#dbdbdb;margin-top:8px;font-size:14px}
@media screen and (max-width: 640px){#ui #info{width:300px}
#ui #info h1{font-size:13px}
#ui #info h2{font-size:10px;margin-top:4px}
}#ui #timeline{display:block;height:60px;position:absolute;bottom:0;list-style-type:none;margin:0;padding-top:20px;padding:0;white-space:nowrap;-webkit-transition:bottom 0.5s ease-out;-moz-transition:bottom 0.5s ease-out;-o-transition:bottom 0.5s ease-out;-ms-transition:bottom 0.5s ease-out;transition:bottom 0.5s ease-out;-webkit-transition-delay:.6s;-moz-transition-delay:.6s;-o-transition-delay:.6s;-ms-transition-delay:.6s;transition-delay:.6s;}
#ui #timeline > a{display:inline-block;position:relative;width:20px;height:40px;top:40px;opacity:.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);-webkit-transition:top 0.3s ease-out, background-color 0.3s ease-out;-moz-transition:top 0.3s ease-out, background-color 0.3s ease-out;-o-transition:top 0.3s ease-out, background-color 0.3s ease-out;-ms-transition:top 0.3s ease-out, background-color 0.3s ease-out;transition:top 0.3s ease-out, background-color 0.3s ease-out;}
#ui #timeline > a:hover{opacity:1;-ms-filter:none;filter:none;top:30px;}
#ui #timeline > a:hover::before{content:attr(data-content);color:#fff;-webkit-transform:translate(-50%,-35px);-moz-transform:translate(-50%,-35px);-o-transform:translate(-50%,-35px);-ms-transform:translate(-50%,-35px);transform:translate(-50%,-35px);text-decoration:none;position:absolute;padding-left:20px;font-size:14px}
#ui #timeline > a.on{top:20px;opacity:1;-ms-filter:none;filter:none;background-color:#fff}
#ui.inactive #timeline{bottom:-60px}
#ui .arrow{width:30px;height:59px;position:absolute;top:50%;margin-top:-30px;cursor:pointer;-webkit-transition:left 0.5s ease-out, right 0.5s ease-out;-moz-transition:left 0.5s ease-out, right 0.5s ease-out;-o-transition:left 0.5s ease-out, right 0.5s ease-out;-ms-transition:left 0.5s ease-out, right 0.5s ease-out;transition:left 0.5s ease-out, right 0.5s ease-out;-webkit-transition-delay:.4s,.5s;-moz-transition-delay:.4s,.5s;-o-transition-delay:.4s,.5s;-ms-transition-delay:.4s,.5s;transition-delay:.4s,.5s;}
#ui .arrow.left{background:url("../assets/ui/arrow_left.png");left:5%}
#ui .arrow.right{background:url("../assets/ui/arrow_right.png");right:5%}
#ui .arrow:hover{opacity:.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50)}
@media screen and (max-width: 640px){#ui .arrow{-webkit-transform:scale(.5,.5);-moz-transform:scale(.5,.5);-o-transform:scale(.5,.5);-ms-transform:scale(.5,.5);transform:scale(.5,.5)}
}#ui.inactive .arrow.left{left:-30px}
#ui.inactive .arrow.right{right:-30px}
#ui #sound{width:20px;height:18px;position:absolute;right:5%;top:5%;-webkit-transition:top 0.5s ease-out;-moz-transition:top 0.5s ease-out;-o-transition:top 0.5s ease-out;-ms-transition:top 0.5s ease-out;transition:top 0.5s ease-out;background:url("../assets/ui/sound.png");cursor:pointer;}
#ui #sound.off{width:12px}
@media screen and (max-width: 640px){#ui #sound{display:none}
}#ui.inactive #sound{top:-23px}
#ui #help{width:20px;height:18px;position:absolute;right:5%;top:5%;margin-right:50px;-webkit-transition:top 0.8s ease-out;-moz-transition:top 0.8s ease-out;-o-transition:top 0.8s ease-out;-ms-transition:top 0.8s ease-out;transition:top 0.8s ease-out;background:url("../assets/ui/help.png");cursor:pointer;}
@media screen and (max-width: 640px){#ui #help{display:none}
}#ui.inactive #help{top:-23px}
.quad{position:absolute;width:80px;height:80px;margin-left:-40px;margin-top:-40px;left:0;top:0;-webkit-border-radius:40px;border-radius:40px;}
.quad:hover{background-color:rgba(0,0,255,0.6)}
#about{position:absolute;width:1000px;height:680px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background:#17171a url("../assets/ui/setup_photo.jpg") no-repeat;padding:30px;padding-left:500px;left:50%;top:50%;margin-left:-500px;margin-top:-340px;z-index:999;}
#about.inactive{display:none}
#about h1{margin-top:0;color:#a6a67a;font-size:18px}
#about h2{text-transform:uppercase;font-size:16px;line-height:18px;margin-top:22px;margin-bottom:0}
#about p{font-size:14px;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80);line-height:18px}
#about a{color:#a6a67a;text-decoration:none}
