@font-face {
    font-family: 'ps';
    src: url('ps.eot?#iefix') format('embedded-opentype'),
         url('ps.otf')  format('opentype'),
	 url('ps.woff') format('woff'), 
         url('ps.ttf')  format('truetype'), 
         url('ps.svg#GothamRounded-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

body          {font-family:ps;padding:0;margin:0;color:#fff;}
a             {text-decoration:none;color:#fff}
p,td          {margin:0;padding:0;}
h1,h2,h3,h4   {font-weight:normal;margin:0;padding:0;font-family:ps;}
svg g         {fill:#fff}

h1            {font-size:70px;text-transform:uppercase;}
h2            {font-size:4.5vw;line-height:4.5vw;padding-bottom:10px;}
h3            {font-size:30px;line-height:35px;}
h4            {font-size:20px;line-height:25px;}

.head          {font-family:ps;position:fixed;top:0;left:0;right:0;height:100px;background:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,0));overflow:hidden;transition:top .4s}
.head > a      {display:block;position:absolute;left:20px;top:20px;bottom:20px;white-space:nowrap;font-size:34px;line-height:35px;}
.head > a span {display:block;font-size:16px;line-height:20px;}

.head svg      {width:100%;height:100%;}

.head ul a       {text-decoration:none;color:#fff;display:inline-block;letter-spacing:1px;}
.head ul         {position:absolute;top:35px;right:20px;bottom:35px;padding:0;margin:0;text-align:right;}
.head li         {display:inline-block;position:relative;padding-right:35px;font-size:18px;line-height:30px}
.head li::after  {position:absolute;right:0;top:0;bottom:0;width:35px;font-size:40px;text-align:center;content:"\2022";}
.head li:last-child        {padding:0;}
.head li:last-child::after {display:none;}

.root .head    {top:-100px}

main            {position:fixed;top:0;left:0;right:0;bottom:0;-webkit-overflow-scrolling:touch;overflow:hidden;}

.over           {position:absolute;bottom:50%;left:50%;white-space:normal;transform:translate(-50%,50%);-webkit-transform:translate(-50%,50%);text-align:center;}
section > .over {bottom:37px;transform:translateX(-50%);-webkit-transform:translateX(-50%);}

a.scroll        {position:absolute;left:50%;bottom:20px;letter-spacing:2px;text-align:center;transform:translateX(-50%);-webkit-transform: translateX(-50%);color:#fff;font-size:16px;opacity:.8;text-transform:uppercase;}
a.scroll svg    {width:70px;height:30px;display:block;}

.home              {height:100vh;overflow:hidden;}
.home svg          {width:30vh;height:30vh}
.home p            {font-size:20px;letter-spacing:6px;font-weight:normal;text-transform:uppercase;position:relative;display:inline-block;}
.home p::before,
.home p::after     {position:absolute;top:50%;width:60px;height:1px;background:#fff;content:""}
.home p::before    {right:-70px;}
.home p::after     {left:-70px;} 
.home .menu        {position:absolute;top:20px;left:20px;}
.home .menu ul     {padding:0;margin:0;list-style:none;margin-top:10px}
.home .menu a      {font-size:25px;line-height:32px;font-weight:normal;font-family:ps;}

.home h1 {margin:0;font-size:34px;line-height:35px;text-transform:inherit}
.home h2 {margin:0;font-size:16px;line-height:20px;text-transform:inherit}


#poster               {position:absolute;top:0;left:0;right:0;bottom:0;max-height:200vh;background:no-repeat center / cover;overflow:hidden;}
#poster video         {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 2s;}
#poster::after        {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);content:""}

.playlist             {display:block;position:relative;height:100vh;text-align:center;background:#000;}
.playlist > a         {position:absolute;width:60px;height:60px;top:50%;opacity:0;transition:opacity .4s,left .4s,right .4s;cursor:pointer;}

.playlist > .left     {transform:translateY(-50%);-webkit-transform: translateY(-50%);left:20px}
.playlist > .right    {transform:translateY(-50%) rotate(-180deg);-webkit-transform: translateY(-50%) rotate(-180deg);right:20px}
.playlist .scroll     {position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;overflow:hidden;white-space:nowrap;}
.playlist .scroll > * {display:inline-block;position:relative;width:100vw;height:100vh;background:no-repeat center / cover;vertical-align:middle;}
.playlist .action       {display:inline-block;padding:2px 20px;margin-top:20px;font-size:13px;text-transform:uppercase;background:rgba(0,0,0,.5);color:#fff;border:1px solid #fff;opacity:.8;transition:opacity .4;cursor:pointer;}

.playlist p             {border-top:1px solid white;padding-top:10px;font-size:15px;line-height:21px;}
.playlist p a           {display:inline-block;padding-top:3px;margin-bottom:3px;line-height:14px;border-bottom:1px dotted #fff;}

.playlist .nav              {position:absolute;bottom:10px;left:0;right:0;opacity:0;transition:opacity .4s;display:none;}
.playlist .nav a            {position:relative;background:rgba(255,255,255,0);cursor:pointer;display:inline-block;width:20px;height:6px;margin-right:2px;border:1px solid #fff;opacity:0.4;transition:opacity .4s;transition:opacity .4s, background .4s;}
.playlist .nav a:hover      {opacity:.8}
.playlist .nav a.selected   {background:rgba(255,255,255,1)}
.playlist .nav a:last-child {margin:0;}

.playlist video          {position:absolute;top:0;left:0;width:100%;height:100%;background:black;opacity:0;transition:opacity .4s}

.playlist.in .nav        {opacity:1;}
.playlist.in > a         {opacity:1;}
.playlist.last > a.right {opacity:0;pointer-events:none;}

.playlist section > div   {font-family:ps;position:absolute;bottom:0;left:0;right:0;height:60px;padding:20px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.8));overflow:hidden;text-align:left;transition:bottom .4s}
.playlist section[data-spot]:not([data-video]) {background-size:contain}

.playlist h3 {display:inline-block;text-align:left;}
.playlist h4 {display:inline-block;text-align:left;}

.progress     {position:absolute;height:11px;top:45px;left:30%;right:80px;opacity:0;transition:opacity .4s}
.progress > a {position:absolute;left:50px;right:50px;top:0;bottom:0;}
.progress > a:before {position:absolute;left:0;right:0;top:5px;height:1px;background:#999;content:""}
.progress .bar         {position:absolute;left:0;top:3px;bottom:3px;width:0;background:#fff;pointer-events:none;}
.progress span                {position:absolute;top:0;bottom:0;line-height:11px;font-weight:bold;}
.progress span:nth-of-type(1) {left:0}
.progress span:nth-of-type(2) {right:0}

a .tip         {visibility:hidden;font-size:13px;position:absolute;top:-32px;left:50%;pointer-events:none;transform:translateX(-50%);-webkit-transform: translateX(-50%);padding:0 8px;background:#fff;color:#000;border-radius:2px;white-space:nowrap;}
a .tip::before {position:absolute;bottom:-16px;left:50%;width:0;height:0;border:8px solid Transparent;border-top-color:#fff;transform:translateX(-50%);-webkit-transform: translateX(-50%);content:""}
a:hover .tip   {visibility:inherit;}

.playlist .pause,
.playlist .play         {float:left;margin-right:20px;width:60px;height:60px;background:url(play.svg) no-repeat center / contain;transition:opacity .4s;display:none;}
.playlist .pause        {background-image:url(pause.svg)}
.playlist [data-video] .pause,
.playlist [data-video] .play         {display:block;}


#video       {position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity 250ms;}
#video .back {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.8);}
#video .pos  {position:absolute;top:50%;left:50%;width:0;height:0;}

@media screen and (min-width:900px) {
  section   .over {max-width:650px;}
}

@media screen and (max-width:1025px) {
  .head li   {font-size:15px;}
}

@media screen and (max-width:900px) {
  h1 {font-size:40px;}
  h2 {font-size:9vw;line-height:9.1vw;}

  .head, .nav{display:none;}
  .home p    {font-size:16px;letter-spacing:4px;}

  section   .over {width:80vw;}
  section > .over {bottom:20px}
}

@media screen and (max-width:500px) {
  .home p         {font-size:14px;letter-spacing:1px;line-height:14px;}
  .home p::before {width:30px;right:-40px;}
  .home p::after  {width:30px;left:-40px;}
  .playlist > a     {display:none;}
  section .over   {width:90vw;}
}

.inactive.playing .head                   {top:-100px !important;}
.inactive.playing .playlist section > div {bottom:-100px !important;}
.inactive.playing .playlist > .left       {left:-50px}
.inactive.playing .playlist > .right      {right:-50px}