/* Reset =====================================================================*/
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: top;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol, ul {
    margin:0;
    list-style: none;
  }
  input, select, textarea{
    color:#666;
    border: 1px #CCC solid;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
/* Main ======================================================================*/
  html{
    width:100%;
    height:100%;
  }
  body{
    font-family:"Oswald",sans-serif;
    width:100%;
    height:100%;
    background:#474747 url('../img/iw-fuzz.gif');
    color:#777;
  }
  #wrapper{
    width:100%;
    height:100%;
    background: url('../img/iw-light-source.png') center -300px no-repeat;
  }
/* Content -------------------------------------------------------------------*/
  #content{
    width:700px;
    height:300px;
    margin-left:-350px;
    top:10%;
    left:50%;
    position:absolute;
  }
  #content-inside{
    text-align:center;
    padding:20px;
  }
  h1{
    padding:10px 0;
    font-size:50px;
    text-align: center;
    color: #222;
    text-align: center;
    color: #999;
    text-shadow: 0px 1px 5px #111;
  }
  h2{
    padding:10px 0;
    font-size:25px;
    text-align: center;
    color: #131313;
    text-shadow: 0px 1px 2px #666;
  }
  p{
    color:#666;
    margin-top:10px;
    border-radius:20px;
    padding:20px;
    line-height:20px;
    font-size:14px;
    background-color: #1C1C1C;
    text-shadow: 0px 1px 2px #000;
    box-shadow: 0px 1px 2px #666;
  }
  span.buldge{
    text-shadow: 0px 1px 2px #111;
    color:#777;
  }
/* Needle Animation ----------------------------------------------------------*/
  #gauge{
    margin:0 auto;
    width:260px;
    height:260px;
    background:url('../img/iw-gauge.png') no-repeat;
  }
  #needle{
    animation:rampup 3s;
    -moz-animation:rampup 3s; /*Firefox*/
    -webkit-animation:rampup 3s; /*Safari and Chrome*/
    -o-animation:rampup 3s; /*Opera*/
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    position:absolute;
    width:260px;
    height:260px;
    background:url('../img/iw-needle.png') no-repeat;
  }
  @keyframes rampup{
    from {transform: rotate(-160deg);}
    to {transform: rotate(90deg);}
  }
  @-moz-keyframes rampup /*Firefox*/{
    from {-moz-transform: rotate(-160deg);}
    to {-moz-transform: rotate(90deg);}
  }
  @-webkit-keyframes rampup /*Safari and Chrome*/{
    from {-webkit-transform: rotate(-160deg);}
    to {-webkit-transform: rotate(90deg);}
  }
  @-o-keyframes rampup /*Opera*/{
    from {-o-transform: rotate(-160deg);}
    to {-o-transform: rotate(90deg);}
  }
/* Big X Animation -----------------------------------------------------------*/
  #bigx{
    margin:0 auto;
    width:300px;
    height:300px;
    background:url('../img/iw-bigx.png') no-repeat;
    animation:bigx 1s;
    -moz-animation:bigx 1s; /*Firefox*/
    -webkit-animation:bigx 1s; /*Safari and Chrome*/
    -o-animation:bigx 1s; /*Opera*/
  }
  @keyframes bigx{
    from {transform: scale(.8,.8);}
    to {transform: scale(1,1);}
  }
  @-moz-keyframes bigx /*Firefox*/{
    from {-moz-transform: scale(.8,.8);}
    to {-moz-transform: scale(1,1);}
  }
  @-webkit-keyframes bigx /*Safari and Chrome*/{
    from {-webkit-transform: scale(.8,.8);}
    to {-webkit-transform: scale(1,1);}
  }
  @-o-keyframes bigx /*Opera*/{
    from {-o-transform: scale(.8,.8);}
    to {-o-transform: scale(1,1);}
  }
/* Cog Animation -----------------------------------------------------------*/
  #cogs{
    margin:0 auto;
    width:381px;
    height:234px;
    background:url('../img/iw-cog-shadow.png') center bottom no-repeat;
  }
  .gear {
      position:absolute;
      background:url('../img/iw-cog.png') center bottom no-repeat;
      height:244px;
      width:244px;
      display:block;
      float: none;
      text-align: center;
      -moz-animation-timing-function: linear;
      -moz-animation-iteration-count: infinite;
      -moz-animation-direction: normal;
      -moz-animation-delay: 0;
      -moz-animation-play-state: running;
      -moz-animation-fill-mode: forwards;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: normal;
      -webkit-animation-delay: 0;
      -webkit-animation-play-state: running;
      -webkit-animation-fill-mode: forwards;
      -o-animation-timing-function: linear;
      -o-animation-iteration-count: infinite;
      -o-animation-direction: normal;
      -o-animation-delay: 0;
      -o-animation-play-state: running;
      -o-animation-fill-mode: forwards;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-delay: 0;
      animation-play-state: running;
      animation-fill-mode: forwards;
  }
    #gear1 {
      -moz-animation-name: ckw;
      -moz-animation-duration: 10s;
      -webkit-animation-name: ckw;
      -webkit-animation-duration: 10s;
      -o-animation-name: ckw;
      -o-animation-duration: 10s;
      animation-name: ckw;
      animation-duration: 10s;
    }
    #gear2 {
      -moz-animation-name: cckw;
      -moz-animation-duration: 10s;
      -webkit-animation-name: cckw;
      -webkit-animation-duration: 10s;
      -o-animation-name: cckw;
      -o-animation-duration: 10s;
      animation-name: cckw;
      animation-duration: 10s;
    }
  @-webkit-keyframes ckw {
      0% {
          -webkit-transform: translate(0, -28px) scale(.85,.85) rotate(0deg);
      }
      100% {
          -webkit-transform: translate(0, -28px) scale(.85,.85) rotate(360deg);
      }
  }
  @-moz-keyframes ckw {
      0% {
          -moz-transform: translate(0, -28px) scale(.85,.85) rotate(0deg);
      }
      100% {
          -moz-transform: translate(0, -28px) scale(.85,.85) rotate(360deg);
      }
  }
  @-o-keyframes ckw {
      0% {
          -o-transform: translate(0, -28px) scale(.85,.85) rotate(0deg);
      }
      100% {
          -o-transform: translate(0, -28px) scale(.85,.85) rotate(360deg);
      }
  }
  @keyframes ckw {
      0% {
          transform: translate(0, -28px) scale(.85,.85) rotate(0deg);
      }
      100% {
          transform: translate(0, -28px) scale(.85,.85) rotate(360deg);
      }
  }
  @-webkit-keyframes cckw {
      0% {
          -webkit-transform: translate(180px, -53px) scale(.72,.72) rotate(322deg);
      }
      100% {
          -webkit-transform: translate(180px, -53px) scale(.72,.72) rotate(-38deg);
      }
  }
  @-moz-keyframes cckw {
      0% {
          -moz-transform: translate(180px, -53px) scale(.72,.72) rotate(322deg);
      }
      100% {
          -webkit-transform: translate(180px, -53px) scale(.72,.72) rotate(-38deg);
      }
  }
  @-o-keyframes cckw {
      0% {
          -o-transform: translate(180px, -53px) scale(.72,.72) rotate(322deg);
      }
      100% {
          -o-transform: translate(180px, -53px) scale(.72,.72) rotate(-38deg);
      }
  }
  @keyframes cckw {
      0% {
          transform: translate(180px, -53px) scale(.72,.72) rotate(322deg);
      }
      100% {
          transform: translate(180px, -53px) scale(.72,.72) rotate(-38deg);
      }
  }