@font-face {
    font-family: 'spotbox-light';
    src: url('spotbox-light.eot');
    src: url('spotbox-light.eot?#iefix') format('embedded-opentype'),
         url('spotbox-light.woff2') format('woff2'),
         url('spotbox-light.woff') format('woff'),
         url('spotbox-light.ttf') format('truetype'),
         url('spotbox-light.svg#sukhumvit_setthin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'spotbox-text';
    src: url('spotbox-text.eot');
    src: url('spotbox-text.eot?#iefix') format('embedded-opentype'),
         url('spotbox-text.woff2') format('woff2'),
         url('spotbox-text.woff') format('woff'),
         url('spotbox-text.ttf') format('truetype'),
         url('spotbox-text.svg#sukhumvit_settext') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

h1            {font-size:70px;}
h2            {font-size:4.5vw;line-height:4.5vw;padding-bottom:10px;}
h3            {font-size:3.0vw;line-height:3.1vw;padding-bottom:10px;}

.head          {font-family:spotbox-light;position:fixed;top:0;left:0;right:0;height:70px;background:rgba(255,255,255,.5);overflow:hidden;transition:top .6s;}
.head > a      {display:block;position:absolute;left:15px;top:10px;height:50px;width:50px;}
.head svg      {width:100%;height:100%;}

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

.root .head    {top:-80px}

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 .over        {bottom:55%;}
.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;} 

#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:50px;height:50px;top:50%;opacity:0;transition:opacity .4s;cursor:pointer;}

.playlist > .left     {transform:translateY(-50%);-webkit-transform: translateY(-50%);left:5px}
.playlist > .right    {transform:translateY(-50%) rotate(-180deg);-webkit-transform: translateY(-50%) rotate(-180deg);right:5px}
.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 .scroll > *::before       {position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:.4;content:""}

.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;}
.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.in .nav        {opacity:1;}
.playlist.in > a         {opacity:.4;}
.playlist.last > a.right {opacity: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;}

a.play         {position:absolute;left:50%;top:50%;width:50%;height:50%;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);background:url(http://www.be-at.tv/v1/1.06/play_large.png) no-repeat center;opacity:.5;transition:opacity .4s;}
a.play:hover   {opacity:.8;}

#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:900px) {
  h1 {font-size:40px;}
  h2 {font-size:9vw;line-height:9.1vw;}
  h3 {font-size:6.5vw;line-height:6.6vw;}

  .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;}
}