#fullscreen-brewboard.sliding-puzzle{font-family:'Pangolin',Arial,Helvetica,sans-serif;font-weight:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;color:#dedede;background:#222;background-size:cover;background-repeat:no-repeat;background-position:center;} #fullscreen-brewboard.sliding-puzzle .page .brews{max-height:90%;margin:0 2%;display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:25px;} #fullscreen-brewboard.sliding-puzzle .page .brew{box-shadow:rgba(0, 0, 0, 0.25) 0px 54px 55px,rgba(0, 0, 0, 0.12) 0px -12px 30px,rgba(0, 0, 0, 0.12) 0px 4px 6px,rgba(0, 0, 0, 0.17) 0px 12px 13px,rgba(0, 0, 0, 0.09) 0px -3px 5px;background-image:url('/t/sliding-puzzle/brew-bg.jpg');background-repeat:no-repeat;background-size:cover;border:1px solid #333;text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);padding:25px 0 20px 35px;position:relative;align-items:stretch;box-sizing:border-box;height:440px;display:grid;grid-template-columns:1fr auto 80px;grid-template-areas:"id id packaging" "name name name" "style style glass" "ibu pricing glass" "abv pricing glass";grid-template-rows:74px auto 1fr 45px 65px;align-items:center;} #fullscreen-brewboard.sliding-puzzle .page .brew.long-identifier .id{font-family:'Pangolin',Arial,Helvetica,sans-serif;font-weight:normal;font-size:40px;overflow:hidden;color:#aaa;} #fullscreen-brewboard.sliding-puzzle .page .brew .glass{grid-area:glass;overflow:hidden;text-align:left;align-self:end;} #fullscreen-brewboard.sliding-puzzle .page .brew .glass svg{width:60px;} #fullscreen-brewboard.sliding-puzzle .page .brew .id{grid-area:id;font-size:66px;font-weight:bold;font-family:'Oswald',Arial,Helvetica,sans-serif;} #fullscreen-brewboard.sliding-puzzle .page .brew .id .swatch{width:40px;height:40px;display:block;border-radius:50%;} #fullscreen-brewboard.sliding-puzzle .page .brew .id,
#fullscreen-brewboard.sliding-puzzle .page .brew .name,
#fullscreen-brewboard.sliding-puzzle .page .brew .abv,
#fullscreen-brewboard.sliding-puzzle .page .brew .style,
#fullscreen-brewboard.sliding-puzzle .page .brew .pricing{overflow:hidden;} #fullscreen-brewboard.sliding-puzzle .page .brew .packaging{padding:20px;z-index:100;grid-area:packaging;align-self:stretch;background-position:right 15px top;background-repeat:no-repeat;background-size:65px;opacity:.7;} #fullscreen-brewboard.sliding-puzzle .page .brew .packaging.bottle{background-image:url('/i/icon-bottle-w.svg');} #fullscreen-brewboard.sliding-puzzle .page .brew .packaging.can{background-image:url('/i/icon-can-w.svg');} #fullscreen-brewboard.sliding-puzzle .page .brew .packaging.keg{background-image:url('/i/icon-keg-w.svg');} #fullscreen-brewboard.sliding-puzzle .page .brew .packaging.cask{background-image:url('/i/icon-cask-w.svg');} #fullscreen-brewboard.sliding-puzzle .page .brew .name{grid-area:name;align-self:end;font-size:50px;line-height:1.2;max-height:130px;font-weight:bold;font-family:'Oswald','Kreon','Lobster',Arial,Helvetica,sans-serif;padding-right:30px;text-transform:uppercase;letter-spacing:1px;} #fullscreen-brewboard.sliding-puzzle .page .brew .srm{display:none;} #fullscreen-brewboard.sliding-puzzle .page .brew .abv{grid-area:abv;font-size:50px;font-family:'oswald',Arial,Helvetica,sans-serif;padding-bottom:15px;} #fullscreen-brewboard.sliding-puzzle .page .brew .pricing{grid-area:pricing;align-self:end;font-size:38px;color:#ead9a5;font-family:'oswald',Arial,Helvetica,sans-serif;padding-bottom:15px;text-align:right;max-width:350px;max-height:154px;line-height:1.3;} #fullscreen-brewboard.sliding-puzzle .page .brew .pricing div{display:inline-block;} #fullscreen-brewboard.sliding-puzzle .page .brew .pricing div .size{padding-right:12px;} #fullscreen-brewboard.sliding-puzzle .page .brew .pricing div:after{content:" / ";white-space:pre;} #fullscreen-brewboard.sliding-puzzle .page .brew .pricing div:last-child{padding-right:0;} #fullscreen-brewboard.sliding-puzzle .page .brew .pricing div:last-child:after{content:"";} #fullscreen-brewboard.sliding-puzzle .page .brew .style{grid-area:style;align-self:start;font-size:38px;color:#aaa;} #fullscreen-brewboard.sliding-puzzle .page .brew .ibu{grid-area:ibu;font-size:38px;color:#aaa;} #fullscreen-brewboard.sliding-puzzle .logo{padding:0;margin:0;width:120px;height:95px;overflow:hidden;position:absolute;top:10px;left:2%;z-index:100;background-repeat:no-repeat;background-size:contain;background-position:right center;} #fullscreen-brewboard.sliding-puzzle .logo img{width:100%;margin:auto;vertical-align:middle;} #fullscreen-brewboard.sliding-puzzle .logo + .board-name{padding-left:165px;margin-top:10px;} #fullscreen-brewboard.sliding-puzzle .logo + .board-name h1{margin-left:5px;line-height:90px;vertical-align:middle;} #fullscreen-brewboard.sliding-puzzle .board-name{width:100%;text-align:center;background-color:#222;opacity:0.8;margin-bottom:15px;margin-top:0;background:-moz-linear-gradient(top,rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0) 100%);background:-webkit-linear-gradient(top,rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0) 100%);background:linear-gradient(to bottom,rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000',endColorstr='#00000000',GradientType=0);} #fullscreen-brewboard.sliding-puzzle .board-name h1{box-sizing:border-box;color:#fff;font-size:38px;text-align:left;font-weight:normal;line-height:90px;position:relative;margin:0 auto auto 5%;text-transform:uppercase;letter-spacing:3px;} #fullscreen-brewboard.sliding-puzzle .in-page-qr{position:absolute;bottom:120px;right:2%;width:360px;height:380px;} #fullscreen-brewboard.sliding-puzzle .in-page-qr::after{content:'BrewBoard to go';font-size:32px;color:#fff;margin-bottom:20px;text-align:center;width:360px;display:block;background:-moz-linear-gradient(bottom,rgba(0, 0, 0, 0.8) 0%,rgba(0, 0, 0, 0) 100%);background:-webkit-linear-gradient(bottom,rgba(0, 0, 0, 0.8) 0%,rgba(0, 0, 0, 0) 100%);background:linear-gradient(to top,rgba(0, 0, 0, 0.8) 0%,rgba(0, 0, 0, 0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000',endColorstr='#00000000',GradientType=0);} #fullscreen-brewboard.sliding-puzzle .in-page-qr img{filter:invert(100%);} #fullscreen-brewboard.sliding-puzzle.black .brew,
#fullscreen-brewboard.sliding-puzzle.cement .brew,
#fullscreen-brewboard.sliding-puzzle.lava .brew{background:rgba(0, 0, 0, 0.5);background-image:none;} #fullscreen-brewboard.sliding-puzzle.black{background-image:url('/t/sliding-puzzle/bg-blackboard.jpg');background-position:bottom;} #fullscreen-brewboard.sliding-puzzle.cement{background-image:url('/t/sliding-puzzle/bg-cement.jpg');} #fullscreen-brewboard.sliding-puzzle.lava{background-image:url('/t/sliding-puzzle/bg-lava.jpg');} #fullscreen-brewboard.sliding-puzzle.lava .brew{border:1px solid #846d6d;background:rgba(0, 0, 0, 0.7);} #fullscreen-brewboard.sliding-puzzle.earthy{background-image:url('/t/sliding-puzzle/bg-earthy.jpg');} #fullscreen-brewboard.sliding-puzzle.garden{background-image:url('/t/sliding-puzzle/bg-garden.jpg');} #fullscreen-brewboard.sliding-puzzle.malt{background-image:url('/t/sliding-puzzle/bg-malt.jpg');} #fullscreen-brewboard.sliding-puzzle.oswald .page .brew .name{font-family:'oswald',Arial,Helvetica,sans-serif;} #fullscreen-brewboard.sliding-puzzle.kreon .page .brew .name{font-family:'kreon',Arial,Helvetica,sans-serif;} #fullscreen-brewboard.sliding-puzzle.kreon .page .brew .id{font-family:'kreon',Arial,Helvetica,sans-serif;} #fullscreen-brewboard.sliding-puzzle.kreon .page .brew .abv{font-family:'kreon',Arial,Helvetica,sans-serif;font-weight:bold;} #fullscreen-brewboard.sliding-puzzle.lobster .page .brew .name{font-family:'Lobster',Arial,Helvetica,sans-serif;text-transform:capitalize;max-height:130px;} #fullscreen-brewboard.sliding-puzzle.lobster .page .brew .id{font-family:'Lobster',Arial,Helvetica,sans-serif;text-transform:capitalize;} #fullscreen-brewboard.sliding-puzzle.lobster .page .brew.long-identifier .id{font-family:'Pangolin',Arial,Helvetica,sans-serif;} .theme-configurator #configuration-holder .font-choice .choices label{font-size:18px;} .font-choice .oswald{font-family:'oswald',Arial,Helvetica,sans-serif;} .font-choice .kreon{font-family:'kreon',Arial,Helvetica,sans-serif;} .font-choice .lobster{font-family:'lobster',Arial,Helvetica,sans-serif;}