/* A vertical TV: Fire TV can't rotate, so the stage turns itself. Inside the
   stage, 1vh is 1% of the poster's width and 100vw is its height. */
html,body{margin:0;height:100%;background:#000;overflow:hidden;cursor:none}
#stage{position:absolute;top:50%;left:50%;width:100vh;height:100vw;margin-left:-50vh;margin-top:-50vw;
  -webkit-transform:rotate(90deg);transform:rotate(90deg);background:#0b0908;color:#f7efe2;
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;overflow:hidden}
.flip #stage{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}
.slide{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;-webkit-transition:opacity .45s ease-in-out;transition:opacity .45s ease-in-out;-webkit-transform:translateZ(0);transform:translateZ(0)}
.slide.on{opacity:1}
.logo-slide img{position:absolute;top:50%;left:50%;width:82vh;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.photo{position:absolute;top:0;left:0;right:0;height:96vh;background-position:center;background-size:cover;background-repeat:no-repeat}
.photo:after{content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;background:-webkit-linear-gradient(top,rgba(11,9,8,0),#0b0908);background:linear-gradient(to bottom,rgba(11,9,8,0),#0b0908)}
.body{position:absolute;left:6vh;right:6vh;top:96vh;bottom:15vh}
.cat{font-size:2.7vh;font-weight:800;letter-spacing:.5vh;color:#f5b921;text-transform:uppercase}
.name{font-family:"Playfair Display",Georgia,serif;font-size:8.6vh;font-weight:800;line-height:1.08;margin:1.4vh 0 1.6vh}
.price{font-size:7vh;font-weight:800;color:#f5b921;margin-bottom:1.8vh}
.desc{font-size:3.1vh;line-height:1.35;color:#d8cdbc}
.board{position:absolute;left:6vh;right:6vh;top:8vh;bottom:15vh}
.board h2{font-family:"Playfair Display",Georgia,serif;font-size:10vh;font-weight:800;margin:0 0 4vh;color:#f5b921;line-height:1.05}
.row{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:baseline;align-items:baseline;
  border-bottom:.15vh solid rgba(247,239,226,.18);padding:2.1vh 0;font-size:3.9vh;font-weight:700}
.row b{color:#f5b921;font-weight:800;margin-left:3vh;white-space:nowrap}
#foot{opacity:0;-webkit-transition:opacity .45s;transition:opacity .45s;position:absolute;left:6vh;right:6vh;bottom:2.6vh;height:10.5vh;z-index:5;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
#foot.on{opacity:1}
#foot img{height:10.5vh;margin-right:3vh}
#foot p{margin:0;font-size:1.8vh;line-height:1.35;color:#cfc4b3}
@font-face{font-family:Montserrat;src:url(/fonts/montserrat-normal-latin.woff2) format("woff2");font-weight:100 900}
@font-face{font-family:"Playfair Display";src:url(/fonts/playfair-display-normal-latin.woff2) format("woff2");font-weight:400 900}

/* Hours screen */
.hours{position:absolute;left:7vh;right:7vh;top:12vh;text-align:center}
.hours img{width:62vh}
.hours h2{font-family:"Playfair Display",Georgia,serif;font-size:8.4vh;font-weight:800;line-height:1.08;margin:5vh 0 1vh}
.door{font-size:4.2vh;font-weight:800;letter-spacing:.5vh;color:#f5b921;text-transform:uppercase;margin-bottom:6vh}
.hrow{border-top:.15vh solid rgba(247,239,226,.22);padding:3.2vh 0}
.hday{font-size:3.6vh;font-weight:700;color:#d8cdbc;margin-bottom:.8vh}
.htime{font-size:6vh;font-weight:800;color:#f7efe2}
.hnote{border-top:.15vh solid rgba(247,239,226,.22);padding-top:4vh;margin:0;font-size:3.7vh;line-height:1.35;font-weight:700;color:#f5b921}
/* Ticker: the strip holds the games twice and travels exactly half its width */
#ticker{position:absolute;left:0;right:0;top:0;height:10.5vh;background:#15110e;border-bottom:.4vh solid #f5b921;overflow:hidden;z-index:6;display:none}
#ticker.on{display:block}
#strip{position:absolute;top:0;left:0;height:100%;white-space:nowrap;line-height:10.1vh;font-size:5vh;font-weight:800}
#strip.run{-webkit-animation:slide 60s linear infinite;animation:slide 60s linear infinite}
.tk{display:inline-block;padding:0 4vh;white-space:pre}
.tk i{font-style:normal;font-size:2.9vh;color:#0b0908;background:#f5b921;border-radius:.6vh;padding:.4vh 1vh;margin-right:1.6vh;vertical-align:.5vh}
.tk em{font-style:normal;color:#cfc4b3;font-weight:600;font-size:3.6vh;margin-left:1.8vh}
.tk.live em{color:#ff6b57}
@-webkit-keyframes slide{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(-50%)}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.has-ticker .photo{top:10.5vh}
.has-ticker .body{top:106.5vh}
.has-ticker .board{top:17vh}
.has-ticker .hours{top:17vh}
/* Big-play banner drops over the top of whatever is showing */
#banner{position:absolute;top:0;left:0;right:0;padding:4vh 4vh 3.4vh;text-align:center;z-index:9;-webkit-transform:translateY(-105%);transform:translateY(-105%);-webkit-transition:-webkit-transform .5s;transition:transform .5s}
#banner.on{-webkit-transform:translateY(0);transform:translateY(0)}
.btitle{font-family:"Playfair Display",Georgia,serif;font-size:7.4vh;font-weight:800;line-height:1.08}
.bsub{font-size:3.4vh;font-weight:700;margin-top:1.2vh;white-space:pre}