@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
/* ==========================================================================
   Utils
   ========================================================================== */
.browsehappy {
  margin: 0;
  background: #ccc;
  padding: 2em; }

/* ==========================================================================
   Generig Tags
   ========================================================================== */
html, body {
  height: 100%;
  font-size: 0.9em;
  font-family: "Oxygen Mono", sans-serif; }

a {
  color: #999999; }

a:hover {
  color: #333333; }

img {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit; }

h1,
.h1 {
  font-size: 30px; }

h2,
.h2 {
  font-size: 26px;
  margin-bottom: 25px; }

h3,
.h3 {
  font-size: 20px; }

h4,
.h4 {
  font-size: 18px;
  font-weight: bold; }

h5,
.h5 {
  font-size: 14px; }

h6,
.h6 {
  font-size: 12px; }

/* ==========================================================================
   Pages General
   ========================================================================== */
.page-container {
  position: relative;
  text-align: center;
  padding-bottom: 10%; }

.page-container .row {
  margin-right: 0;
  margin-left: 0; }

.modal {
  text-align: left; }

.bg-paper {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  margin: 0 auto;
  padding-left: 5%;
  padding-right: 5%;
  box-shadow: none; }

@media (max-width: 767px) {
  .bg-paper {
    display: none; } }
/* ==========================================================================
   Menu
   ========================================================================== */
.menu-container {
  position: fixed;
  z-index: 200;
  opacity: 0.8;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  border-top: 2px solid #eeeeee; }

.menu-container a {
  color: #0d0d0d; }

.menu-container a:hover {
  color: #737373; }

@media print {
  .menu-container {
    position: static; } }
.menu-links, .menu-credits {
  margin: 10px auto; }

.menu-credits {
  font-size: 0.8em; }

.menu-container ul {
  padding: 0;
  margin: 0; }

.menu-container li {
  display: inline-block;
  margin: 0 10px; }

/* ==========================================================================
   Home
   ========================================================================== */
.home-img {
  padding-left: 5%;
  padding-right: 5%;
  box-shadow: none; }

/* ==========================================================================
   interactive
   ========================================================================== */
.interactive-container {
  padding-bottom: 10%; }

.interactive-container .row {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 18%; }

.interactive-container .btns-row {
  padding-top: 200px; }

.interactive-container img {
  box-shadow: none; }

.interactive-container .jp-jplayer {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }

@media (max-width: 991px) {
  .interactive-container {
    background: url("../../img/bg-paper-tile.jpg") 0 0 repeat;
    padding-bottom: 20%; }

  .interactive-container .row {
    padding-top: 5%; }

  .interactive-container .btns-row {
    padding-top: 0; }

  .interactive-container .bg-paper {
    display: none; }

  .interactive-container .jp-video-sm {
    padding-bottom: 5%; } }
/* ==========================================================================
   installation
   ========================================================================== */
.installation-container {
  width: 100%;
  height: 100%;
  background: url("../../img/bg-paper-tile.jpg") 0 0 repeat; }

.installation-fixed {
  position: fixed;
  left: 50%;
  top: 0;
  margin-left: -483px; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-container .row {
  padding-left: 13%;
  padding-right: 13%;
  padding-top: 7%; }

.gallery-container .btns-gallery img {
  margin: 0 auto 6% auto; }

.modal-dialog {
  width: 80%; }

.modal-header {
  padding: 5px 10px 0 10px;
  border: none; }

.modal-body {
  padding: 5px 10px 10px 10px; }

@media (max-width: 767px) {
  .gallery-container {
    background: url("../../img/bg-paper-tile.jpg") 0 0 repeat;
    padding-bottom: 20%; }

  .gallery-container .row {
    padding-top: 5%; } }
/* ==========================================================================
   About
   ========================================================================== */
.about-container .row {
  padding: 20% 12% 0 12%; }

.about-container img {
  margin: 0 auto; }

@media (max-width: 767px) {
  .about-container {
    background: url("../../img/bg-paper-tile.jpg") 0 0 repeat;
    padding-bottom: 20%; }

  .about-container .row {
    padding-top: 5%; }

  .about-container .row div {
    padding-bottom: 4%; } }
.about-btn p {
  text-align: center; }

/* ==========================================================================
   About Text
   ========================================================================== */
.about-text-container .bg-paper {
  position: fixed; }

.about-text {
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  width: 90%;
  height: 800px;
  margin: 5% 0 0 10%;
  padding: 0 10% 40px 0;
  overflow-y: auto;
  text-align: left;
  background: url("../../img/trans.png") 0 0 repeat; }

.about-text-container h4 {
  margin-bottom: 5px; }

.about-nav {
  position: absolute;
  top: 75%;
  right: 8.5%;
  font-size: 0.8em; }

.about-nav a {
  vertical-align: middle; }

.about-nav .txt {
  margin: 0 0 0 8px; }

@media (max-width: 767px) {
  .about-text-container {
    min-height: 100%;
    background: url("../../img/bg-paper-tile.jpg") 0 0 repeat;
    padding-bottom: 20%; }

  .about-text {
    width: 90%;
    margin: 5% 5% 0 5%;
    padding: 0 0 0 0;
    height: auto; }

  .about-nav {
    position: static;
    text-align: right;
    margin: 20px 5% 0 0; }

  .about-nav a {
    text-align: left; }

  .about-text-container .about-scroll {
    display: none; } }
/* ==========================================================================
   Buttons
   ========================================================================== */
a.btn-centred {
  margin: 0 auto; }

a.btn-audio-play, a.btn-audio-pause, a.btn-full-screen, a.btn-restore-screen {
  display: block;
  width: 50px;
  height: 50px;
  text-indent: -9999px;
  cursor: pointer; }

a.btn-audio-play {
  background: url("../../img/btns.png") 0 -50px no-repeat; }

a.btn-audio-play:hover {
  background: url("../../img/btns.png")-50px -50px no-repeat; }

a.btn-audio-pause {
  background: url("../../img/btns.png") 0 0px no-repeat; }

a.btn-audio-pause:hover {
  background: url("../../img/btns.png")-50px 0px no-repeat; }

a.btn-full-screen {
  background: url("../../img/btns.png") 0 -100px no-repeat; }

a.btn-full-screen:hover {
  background: url("../../img/btns.png")-50px -100px no-repeat; }

a.btn-restore-screen {
  background: url("../../img/btns.png") 0 -150px no-repeat; }

a.btn-restore-screen:hover {
  background: url("../../img/btns.png")-50px -150px no-repeat; }

a.btn-video-play, a.btn-video-pause {
  display: block;
  width: 236px;
  height: 132px;
  background: url("../../img/trans.png") 0 0 repeat;
  text-indent: -9999px; }

a.btn-video-play:hover {
  background: url("../../img/video-play.png") 68px 16px no-repeat; }

a.btn-video-pause:hover {
  background: url("../../img/video-pause.png") 68px 16px no-repeat; }

a.btn-scroll-up, a.btn-scroll-down, a.btn-back {
  display: inline-block;
  width: 26px;
  height: 26px;
  text-indent: -9999px;
  cursor: pointer; }

a.btn-scroll-up {
  background: url("../../img/btns.png") 0 -200px no-repeat; }

a.btn-scroll-up:hover {
  background: url("../../img/btns.png")-26px -200px no-repeat; }

a.btn-scroll-down {
  background: url("../../img/btns.png") 0 -226px no-repeat; }

a.btn-scroll-down:hover {
  background: url("../../img/btns.png")-26px -226px no-repeat; }

a.btn-back {
  background: url("../../img/btns.png") 0 -252px no-repeat; }

a.btn-back:hover {
  background: url("../../img/btns.png")-26px -252px no-repeat; }

/* ==========================================================================
   Video
   ========================================================================== */
/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.jplayer.org
 *
 * Copyright (c) 2010-2012 Happyworm Ltd
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 */
div.jp-video-sm, a.jp-video-sm {
  position: relative;
  width: 236px;
  margin: 0 auto; }

div.jp-video-lg {
  position: relative;
  width: 966px;
  margin: 0 auto; }

div.jp-video-full {
  /* Rules for IE6 (full-screen) */
  width: 480px;
  height: 270px;
  /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
  position: static !important;
  position: relative; }

/* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */
div.jp-video-full div div {
  z-index: 1000; }

div.jp-video-full div.jp-jplayer {
  top: 0;
  left: 0;
  position: fixed !important;
  position: relative;
  /* Rules for IE6 (full-screen) */
  overflow: hidden; }

div.jp-video-full div.jp-gui {
  position: fixed !important;
  position: static;
  /* Rules for IE6 (full-screen) */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
  /* 1 layer above the others. */ }

.jp-no-solution {
  position: absolute;
  top: 0;
  left: 50%;
  width: 236px;
  height: 132px;
  padding-top: 10%;
  margin-left: -118px;
  font-size: 1em;
  background-color: #eeeeee;
  border: 2px solid #999999;
  display: none; }

.jp-no-solution a {
  color: #999999; }

.jp-no-solution span {
  font-size: 1em;
  display: block;
  text-align: center;
  font-weight: bold; }

.video-controls-holder {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100; }