/* For demo purposes only */

.demo { position: relative; width: 100%; height: 100%; }
.demo .tag { vertical-align: bottom; }
.demo .text-block p:nth-of-type(2) { text-align: center; margin-top: 10px; }
.demo .text-block p:nth-of-type(3) { text-align: center; margin: 12px 0; }
.demo .text-block .button { margin: 0 4px; }
.demo .pagination { margin-top: -10px; }
.demo .js, .demo-thanks { display: none; }

@media (min-device-width: 1024px) {
  ::-webkit-scrollbar { display: none; }
  body::-webkit-scrollbar { display: inherit; width: 12px; }
  body::-webkit-scrollbar-track { background: transparent; border: 0; }
  body::-webkit-scrollbar-thumb { background: #888; border: 3px solid #333; border-radius: 6px; }
  body { background: #333; overflow: hidden; }
  .demo { position: absolute; top: 50%; left: 50%; width: 320px; height: 480px; margin: -260px 0 0 -160px; overflow: hidden; border-radius: 2px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
  body:before, body:after { display: block; position: absolute; left: 0; right: 0; line-height: 50px; text-align: center; text-shadow: 0 1px 2px black; }
  /*body:before { content: 'mySugr Companion Manual'; top: 50%; margin-top: -310px; font-size: 16px; font-weight: 500; color: #eee; }*/
  /*body:after { content: 'Best viewed in the mySugr Companion App.'; bottom: 50%; margin-bottom: -270px; font-size: 14px; color: #ccc; }*/

  .demo-thanks { display: block; position: absolute; z-index: 1000; bottom: 0; left: 30px; right: 30px; margin: 0; padding: 4px 0 8px; line-height: 42px; font-size: 14px; color: #ccc; text-align: center; text-shadow: 0 1px 2px black; background: #333; box-shadow: 0 0 10px #333; }
  .demo-thanks a { color: #eee; text-decoration: underline; }
}

@media (min-device-width: 1024px) and (max-height: 620px) {
  body { overflow-y: scroll; }
  .demo, body:before, body:after { position: relative; top: auto; bottom: auto; left: auto; right: auto; margin: 0 auto; }
  body:after { margin-bottom: 40px; }
}