body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  font-family: "camingodos-web-1","camingodos-web-2";
  font-size: 11px;
  color: #fff;
  font-weight: 300;
  font-style: normal; }

.clear {
  clear: both; }

#wrap {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden; }

a, a:visited, img, a img, map, map area {
  border: none;
  outline: none;
  text-decoration: none;
  color: #fff;
  display: inline-block;
  padding-bottom: 4px; }

a:hover {
  border-bottom: 1px solid #fff;
  padding-bottom: 3px; }

h1 {
  font-family: "ff-enzo-web-1","ff-enzo-web-2";
  font-weight: 100;
  font-size: 70px;
  color: #ffdd00;
  line-height: 65px;
  margin: 0;
  padding: 0; }

h3, cite, .list {
  font-family: "madawaska-1","madawaska-2";
  font-size: 18px;
  font-weight: 300;
  font-style: normal;
  margin: 10px 0;
  display: block;
  padding: 0; }

h3 a, cite a {
  color: #fff; }

h4 {
  font-size: inherit;
  float: left;
  border-bottom: 1px dotted #fff;
  padding: 0;
  margin: 10px 0; }

cite:before {
  content: "- "; }

#loader {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 100; }
  #loader .top, #loader .bottom {
    width: 100%;
    height: 51%;
    background: #000;
    position: absolute; }
  #loader .top img, #loader .bottom img {
    position: absolute;
    width: 100%;
    display: block; }
  #loader .top .logo, #loader .bottom .logo {
    position: absolute;
    width: 99px;
    left: 50%;
    margin-left: -49.5px; }
  #loader .top {
    top: 0; }
    #loader .top img, #loader .top .logo {
      bottom: 0; }
  #loader .bottom {
    top: 50%; }
    #loader .bottom img, #loader .bottom .logo {
      top: 0; }
  #loader .bar {
    height: 10px;
    background: transparent url("../images/pill_grey.png") 0 0 repeat-x;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    width: 200%;
    left: 0; }

.header {
  width: 100%;
  height: 70px;
  position: absolute;
  z-index: 10;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.8); }
  .header #player {
    position: absolute;
    right: 10px;
    top: 20px;
    height: 30px;
    width: 90px; }
  .header #logos {
    width: 245px;
    height: 40px;
    position: absolute;
    left: 3%;
    top: 15px; }

.intro {
  width: 100%;
  height: 100%;
  background: transparent;
  position: absolute;
  top: 70px; }
  .intro .keyboard {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    margin-top: -235px;
    left: 50%;
    margin-left: -200px;
    background: transparent url("../images/keyboard.png") 50% 50% no-repeat;
    z-index: 11;
    text-align: center;
    color: #fff;
    cursor: pointer; }
    .intro .keyboard h1 {
      font-size: 38px;
      margin: 0; }
    .intro .keyboard p {
      margin: 0; }

.pill-nav {
  position: absolute;
  right: 25px;
  bottom: 25px;
  height: 10px;
  width: 500px;
  z-index: 50; }
  .pill-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%; }
    .pill-nav ul li {
      margin: 0;
      padding: 0;
      width: 23px;
      height: 10px;
      float: right;
      position: relative;
      cursor: pointer; }
      .pill-nav ul li .title {
        background: transparent url("../images/tip.png") 95% 100% no-repeat;
        display: none;
        white-space: nowrap;
        padding: 0 0 9px;
        position: absolute;
        color: #000;
        top: 0;
        right: 8px;
        text-transform: uppercase;
        font-size: 10px; }
        .pill-nav ul li .title div {
          line-height: 20px;
          padding: 0 10px;
          background: #ffdd00;
          width: auto; }
      .pill-nav ul li img {
        position: absolute;
        top: 0;
        display: block; }

.overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 10;
  top: 70px;
  background: transparent url("../images/overlay.png") 0 0 repeat; }

.cell {
  height: 125%;
  position: relative;
  width: 100%;
  background: #000 none 50% 0 no-repeat; }
  .cell .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    margin-left: -45px;
    margin-top: -45px; }
    .cell .play-button img {
      display: block; }
    .cell .play-button a:hover {
      text-decoration: none !important;
      border-bottom: none !important; }
  .cell .text {
    padding: 45px 0 0;
    background-image: url("../images/x.png");
    background-repeat: no-repeat;
    position: absolute;
    width: 275px; }
    .cell .text.large {
      width: 650px;
      left: 50%;
      margin-left: -325px; }
    .cell .text.wide {
      width: 650px; }
    .cell .text.no-x {
      padding-top: 0;
      background-image: none; }
    .cell .text.top {
      top: 15%; }
    .cell .text.bottom {
      bottom: 10%; }
    .cell .text.left {
      background-position: 2% 0;
      text-align: left;
      left: 10%; }
      .cell .text.left h4 {
        float: left; }
      .cell .text.left .download-link {
        padding-right: 12px;
        background: transparent url("../images/download_link.png") 100% 5px no-repeat; }
    .cell .text.right {
      background-position: 98% 0;
      text-align: right;
      right: 10%; }
      .cell .text.right h4 {
        float: right; }
      .cell .text.right .download-link {
        padding-left: 12px;
        background: transparent url("../images/download_link.png") 0 5px no-repeat; }
    .cell .text .download-link {
      color: #ffdd00;
      font-family: "madawaska-1","madawaska-2";
      font-weight: bold;
      font-size: 16px; }
    .cell .text.center {
      width: 380px;
      height: 300px;
      left: 50%;
      margin-left: -190px;
      text-align: left;
      margin-top: -120px;
      top: 50%; }
    .cell .text ul.list {
      list-style: none; }
      .cell .text ul.list li {
        margin: 10px 0;
        padding: 0; }
    .cell .text.left ul.list {
      margin: 20px 0 0 40px;
      padding: 5px 0 5px 10px;
      border-left: 1px solid #fff; }
    .cell .text.right ul.list {
      margin: 20px 40px 0 0;
      padding: 5px 10px 5px 0;
      border-right: 1px solid #fff; }
    .cell .text p.no-pad {
      padding: 0;
      margin: 0; }

.navigation .arrow {
  position: absolute;
  width: 30px;
  height: 30px;
  background: transparent none 50% 50% no-repeat; }
.navigation .box {
  position: absolute;
  z-index: 12;
  width: 50px;
  height: 50px;
  cursor: pointer; }
.navigation .up.box {
  top: 0;
  left: 50%;
  margin-left: -25px;
  /*background:transparent url('../images/gradient_up.png') 50% 0 no-repeat;*/ }
  .navigation .up.box .up.arrow {
    top: 0;
    left: 50%;
    margin-left: -15px;
    background-image: url("../images/arrow_up.png"); }
.navigation .down.box {
  bottom: 0;
  left: 50%;
  margin-left: -25px;
  /*background:transparent url('../images/gradient_down.png') 50% 100% no-repeat;*/ }
  .navigation .down.box .down.arrow {
    bottom: 0;
    left: 50%;
    margin-left: -15px;
    background-image: url("../images/arrow_down.png"); }
.navigation .left.box {
  top: 50%;
  left: 0;
  margin-top: -25px;
  /*background:transparent url('../images/gradient_left.png') 0 50% no-repeat;*/ }
  .navigation .left.box .left.arrow {
    top: 50%;
    left: 0;
    margin-top: -15px;
    background-image: url("../images/arrow_left.png"); }
.navigation .right.box {
  top: 50%;
  right: 0;
  margin-top: -25px;
  /*background:transparent url('../images/gradient_right.png') 100% 50% no-repeat;*/ }
  .navigation .right.box .right.arrow {
    top: 50%;
    right: 0;
    margin-top: -15px;
    background-image: url("../images/arrow_right.png"); }

.mask {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative; }

.grid {
  height: 100%;
  position: relative; }
  .grid .col {
    width: 100%;
    height: 400%;
    float: left; }
    .grid .col .cell {
      height: 25%;
      width: 100%;
      position: relative;
      background: transparent none 50% 50% no-repeat;
      overflow: hidden; }
      .grid .col .cell img.background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 0;
        display: block; }
        .grid .col .cell img.background.bottom {
          top: auto;
          bottom: 0; }

.social-links {
  position: absolute;
  left: 25px;
  bottom: 16px;
  width: 300px;
  height: 30px;
  text-align: left;
  z-index: 50; }
  .social-links span, .social-links iframe {
    display: block;
    float: left; }

.pp_overlay {
  display: none !important; }

.ppt {
  display: none !important; }
