/*BOOTSTRAP OVERWRITE!!!*/


body {
        background-color: black;
          color: white;
        }


        ul,ol {
          list-style: none;
        }

        a {
          text-decoration: none;
          color: white;
        }

        a:hover {
          text-decoration: underline;
          color: #999;
        }


        .nav {

          color:white;
          font-weight:bold;
          font-family:"proxima-nova",'Helvetica Neue',Helvetica,sans-serif;
        }
.breadcrumb {
            padding: 8px 15px;
    margin: 0 0 20px;
    list-style: none;
    background-color: rgba(0, 0, 0, .25);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    }

    .bg-dark {

      background-color: #111 !important; 
      line-height: 1 !important;
   /*   border-style: dotted;
    border-width: 1px;
    border-color:white;*/

    }
    .jumbotron {
      padding: 0 !important;
      line-height: 1 !important;
      background-color: rgba(0, 0, 0, .25) !important;
    }

         .page-wrap {
                position:relative;
                width: 100%;
                height: 100%;
                /*margin-left: -25%;*/
                background-color: #000;
                /*z-index: 4000;*/


            }

            #page-content {
                width: 100%;
                height: 100%;


            }

            .img-wrap{

              position: relative;
              background-color: black;
              width: 800px;
              height: auto;
              left: 50%;
              margin-left: -400px;
              /*z-index: 5000;*/

            }

            .form-signin {
              position: fixed;
              top: 10em;
              left: 10em;
              z-index:1000;


            }



        /* RADIO */

        .audioplayer {
          position: fixed;
          top: 5px;
          right:-300px;
          /*margin: 10px 0;*/
          height: 2.5em;
          width: 480px;
          /*height: 47px;*/
   
  z-index:10000;
}

 .audioplayer-mini
  {
    width: 2.5em; /* 40 */
    margin: 0 auto;
  }
  .audioplayer > div
  {
    position: absolute;
    right: 0;
  }
  .audioplayer-playpause
  {
    width: 2.5em; /* 40 */
    height: 100%;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    left: 0;
  }

    .audioplayer-mini .audioplayer-playpause
    {
      width: 100%;
    }
    .audioplayer-playpause:hover,
    .audioplayer-playpause:focus
    {
      background-color: #222;
    }
    .audioplayer-playpause a
    {
      display: block;
    }
    .audioplayer:not(.audioplayer-playing) .audioplayer-playpause a
    {
      width: 0;
      height: 0;
      border: 0.5em solid transparent; /* 8 */
      border-right: none;
      border-left-color: #fff;
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -0.5em 0 0 -0.25em; /* 8 4 */
    }
    .audioplayer-playing .audioplayer-playpause a
    {
      width: 0.75em; /* 12 */
      height: 0.75em; /* 12 */
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -0.375em 0 0 -0.375em; /* 6 */
    }
      .audioplayer-playing .audioplayer-playpause a:before,
      .audioplayer-playing .audioplayer-playpause a:after
      {
        width: 40%;
        height: 100%;
        background-color: #fff;
        content: '';
        position: absolute;
        top: 0;
      }
      .audioplayer-playing .audioplayer-playpause a:before
      {
        left: 0;
      }
      .audioplayer-playing .audioplayer-playpause a:after
      {
        right: 0;
      }
  .audioplayer-time
  {
    width: 4.375em; /* 70 */
    height: 100%;
    line-height: 2.375em; /* 38 */
    text-align: center;
    text-decoration: none;
    z-index: 2;
    top: 0;
  }
    .audioplayer-time-current
    {
      border-left: 1px solid #111;
      border-left-color: rgba( 0, 0, 0, .25 );
      left: 2.5em; /* 40 */
    }
    .audioplayer-time-duration
    {

      right: 2.5em; /* 40 */
    }
      .audioplayer-novolume .audioplayer-time-duration
      {
        border-right: 0;
        right: 0;
      }
  .audioplayer-bar
  {
    height: 0.875em; /* 14 */
    background-color: #000;
    cursor: pointer;
    z-index: 1;
    top: 50%;
    right: 6.875em; /* 110 */
    left: 6.875em; /* 110 */
    margin-top: -0.438em; /* 7 */
  }
    .audioplayer-novolume .audioplayer-bar
    {
      right: 4.375em; /* 70 */
    }
    .audioplayer-bar div
    {
      width: 0;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .audioplayer-bar-loaded
    {
      background-color: #333;
      z-index: 1;
    }
    .audioplayer-bar-played
    {
      background: #ffffff;
      z-index: 2;
    }
  .audioplayer-volume
  {

    display: none;
    /*width: 2.5em;*/ /* 40 */
    /*height: 100%;
    border-left: 1px solid #111;
    border-left-color: rgba( 0, 0, 0, .25 );
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    right: 0;*/
  }
    .audioplayer-volume:hover,
    .audioplayer-volume:focus
    {
      background-color: #222;
    }
    .audioplayer-volume-button
    {
      width: 100%;
      height: 100%;
    }
      .audioplayer-volume-button a
      {
        width: 0.313em; /* 5 */
        height: 0.375em; /* 6 */
        background-color: #fff;
        display: block;
        position: relative;
        z-index: 1;
        top: 42%;
        left: 30%;
      }
        .audioplayer-volume-button a:before,
        .audioplayer-volume-button a:after
        {
          content: '';
          position: absolute;
        }
        .audioplayer-volume-button a:before
        {
          width: 0;
          height: 0;
          border: 0.5em solid transparent; /* 8 */
          border-left: none;
          border-right-color: #fff;
          z-index: 2;
          top: 50%;
          right: -0.25em;
          margin-top: -0.5em; /* 8 */
        }
        .audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after
        {
          /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
          width: 0.313em; /* 5 */
          height: 0.313em; /* 5 */
          border: 0.25em double #fff; /* 4 */
          border-width: 0.25em 0.25em 0 0; /* 4 */
          left: 0.563em; /* 9 */
          top: -0.063em; /* 1 */
          -webkit-border-radius: 0 0.938em 0 0; /* 15 */
          -moz-border-radius: 0 0.938em 0 0; /* 15 */
          border-radius: 0 0.938em 0 0; /* 15 */
          -webkit-transform: rotate( 45deg );
          -moz-transform: rotate( 45deg );
          -ms-transform: rotate( 45deg );
          -o-transform: rotate( 45deg );
          transform: rotate( 45deg );
        }
    .audioplayer-volume-adjust
    {
      height: 6.25em; /* 100 */
      cursor: default;
      position: absolute;
      left: 0;
      right: -1px;
      top: -9999px;
      background: #222;
    }
      .audioplayer-volume:not(:hover) .audioplayer-volume-adjust
      {
        opacity: 0;
      }
      .audioplayer-volume:hover .audioplayer-volume-adjust
      {
        top: auto;
        bottom: 100%;
      }
      .audioplayer-volume-adjust > div
      {
        width: 40%;
        height: 80%;
        background-color: #333;
        cursor: pointer;
        position: relative;
        z-index: 1;
        margin: 30% auto 0;
      }
        .audioplayer-volume-adjust div div
        {
          width: 100%;
          height: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          background: #1ba1e2;
        }
    .audioplayer-novolume .audioplayer-volume
    {
      display: none;
    }




  .audioplayer *,
  .audioplayer *:before,
  .audioplayer *:after
  {
    -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    transition: color .25s ease, background-color .25s ease, opacity .5s ease;
  }

            .audioplayer-time-duration { 
                display:none;
            }

            .audioplayer-time-current{ 
                display:none;
            }

            .audioplayer-bar{ 
                display:none;
            }


#radio-title {
    width: 360px;
    height: 47px;
    /*margin: 50px auto auto auto;*/
    float: right;
    margin-right: 497px;
    /*border: solid;*/
    z-index:10000;
}



.playbutton {
    height: 60px;
    width: 60px;
    border: none;
    float: left;
    outline: none;
}

.play {
    background: url('../images/play.png');
}

.pause {
    background: url('http://www.alexkatz.me/codepen/images/pause.png');
}

.play,
.pause {
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.timeline {
    width: 400px;
    height: 20px;
    margin-top: 20px;
    float: left;
    border-radius: 15px;
    background: rgba(0, 0, 0, .3);
}

.playhead {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-top: 1px;
    background: rgba(0, 0, 0, 1);
    cursor: pointer;
}


/*RADIO SLUT*/



         /* Special class on .container surrounding .navbar, used for positioning it into place. */
    .navbar-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 6000;
      margin-top: 0px;
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    }
    .navbar-wrapper .navbar {

    }

    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
      border: 0;
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
         -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }

    /* Downsize the brand/project name a bit */
    .navbar .brand {
      padding: 15px 15px 16px; /* Increase vertical padding to match navbar links */
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
      padding: 14px 1px;
    }

    /* Offset the responsive button for proper vertical alignment */
    .navbar .btn-navbar {
      margin-top: 10px;
    }

    #metadata_nav {
    position: fixed;
    top: 220px;
    right: 100px;
    /*z-index: 1000;*/
}

.institution_nav {
position: absolute;
width: 50%;
top: 200px;
left: 100px;
z-index: 1000;

}

.stream_wrap {
  position:absolute;
  top:15px;
  left: 75px;
}

#radio-src {
  position:absolute;

  top: 15px;
  right: 0px;
}

.sh-wrap {
position:fixed;

  top: 20px;
  right: 62px;
  z-index:4000;
}
.audio_wrap  { 
                position:absolute;
                top: 10px;
                right: 20px;
            }

            .cc_streaminfo {
              display: block;
              position:fixed;
              width: 980px;

              text-align: left;
overflow: hidden;
/*text-overflow: ellipsis;*/
white-space: nowrap;
              left: 200px;
              padding-right: 350px;
  top: 22px;
  z-index:4000;
            }


            @media screen and (max-width: 1366px) {
            .cc_streaminfo  {
                display: none;
            }
            
        }

.button {

      
     border:none; 
     padding:0!important;
     font: inherit;
     /*border is optional*/
     -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
     cursor: pointer;
}


.archive_nav {
  background-color:rgba(0,0,0,0)!important;
  background-image: url("../images/nav/a_1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center; 
  border-style: none;
  width: 250%;
  height: 75%;
  max-width: 750px;

}

.archive_nav:hover,
.archive_nav:focus { 
    background-image: url("../images/nav/a_2.png");
}

.hospital_nav {
  background-color:rgba(0,0,0,0)!important;
  background-image: url("../images/nav/h_1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center; 
  border-style: none;
  width: 250%;
  height: 75%;
  max-width: 750px;

}



.hospital_nav:hover,
.hospital_nav:focus { 
    background-image: url("../images/nav/h_2.png");
}

.prison_nav {
  background-color:rgba(0,0,0,0)!important;
  background-image: url("../images/nav/p_1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center; 
  border-style: none;
  width: 250%;
  height: 75%;
  max-width: 750px;
}

.prison_nav:hover,
.prison_nav:focus { 
    background-image: url("../images/nav/p_2.png");
}

.university_nav {
  background-color:rgba(0,0,0,0)!important;
  background-image: url("../images/nav/u_1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center; 
  border-style: none;
  width: 250%;
  height: 75%;
  max-width: 750px;

}

.university_nav:hover,
.university_nav:focus { 
    background-image: url("../images/nav/u_2.png");
}


@media screen and (max-width: 768px) {
            .archive_nav {
                width: 500%;
  height: 75%;
            }

            .hospital_nav  {
                width: 500%;
  height: 75%;
            }

            .prison_nav {
                width: 500%;
  height: 75%;
            }

            .university_nav {
                width: 500%;
  height: 75%;
            }


            .institution_nav {

              top: 100px;
              left: 50px;
            }
            
        }


/* ================================================== 
BACKDROP SLIDESHOW */

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -3000;
    
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
  -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/backdrop/Forside01.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/backdrop/Forside02.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/backdrop/Forside03.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/backdrop/Forside04.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/backdrop/Forside05.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/backdrop/Forside01.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
.cb-slideshow li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
  opacity: 1;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}




/* BACKDROP SLIDESHOW SLUT
================================================== */

/* 
 _____   _           _         _                        _                  
|_   _| | |         | |       | |                      | |                 
  | |   | |__   __ _| |_ ___  | |_ ___  _ __ ___   __ _| |_ ___   ___  ___ 
  | |   | '_ \ / _` | __/ _ \ | __/ _ \| '_ ` _ \ / _` | __/ _ \ / _ \/ __|
 _| |_  | | | | (_| | ||  __/ | || (_) | | | | | | (_| | || (_) |  __/\__ \
 \___/  |_| |_|\__,_|\__\___|  \__\___/|_| |_| |_|\__,_|\__\___/ \___||___/

Oh nice, welcome to the stylesheet of dreams. 
It has it all. Classes, ID's, comments...the whole lot:)
Enjoy responsibly!
@ihatetomatoes

*/

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
p {
    line-height: 1.33em;
    color: #aaa;
}
h1 {
    color: #EEEEEE;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50001;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    z-index: 5001;
}

#loader-hpua {

    display: block;
    position: relative;
    background-image: url("../images/hpua-spinner.png");
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;

    z-index: 5001;


}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #e74c3c;

        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #f9c922;

        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    @-webkit-keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #000000;
        z-index: 5000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    
    .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;
    }

    .loaded #hpua-spinner {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;
    }
    
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {
        display: none;
    }
    .no-js h1 {
        color: #222222;
    }

    #content {
        margin: 0 auto;
        padding-bottom: 50px;
        width: 80%;
        max-width: 978px;
    }  






/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* 
  Ok so you have made it this far, that means you are very keen to on my code. 
  Anyway I don't really mind it. This is a great way to learn so you actually doing the right thing:)
  Follow me @ihatetomatoes
*/


#spinner-wrapper {
    position:absolute;
    top: 50%;
    left: 50%;
    margin-left: -117px;
    margin-top: -15px;
    z-index: 10000;
}

 #inTurnFadingTextG{
    width:234px;
    margin:auto;
}

.inTurnFadingTextG{
    color:rgb(0,0,0);
    font-family:Arial;
    font-size:24px;
    text-decoration:none;
    font-weight:normal;
    font-style:normal;
    float:left;
    animation-name:bounce_inTurnFadingTextG;
        -o-animation-name:bounce_inTurnFadingTextG;
        -ms-animation-name:bounce_inTurnFadingTextG;
        -webkit-animation-name:bounce_inTurnFadingTextG;
        -moz-animation-name:bounce_inTurnFadingTextG;
    animation-duration:2.09s;
        -o-animation-duration:2.09s;
        -ms-animation-duration:2.09s;
        -webkit-animation-duration:2.09s;
        -moz-animation-duration:2.09s;
    animation-iteration-count:infinite;
        -o-animation-iteration-count:infinite;
        -ms-animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -moz-animation-iteration-count:infinite;
    animation-direction:normal;
        -o-animation-direction:normal;
        -ms-animation-direction:normal;
        -webkit-animation-direction:normal;
        -moz-animation-direction:normal;
}

#inTurnFadingTextG_1{
    animation-delay:0.75s;
        -o-animation-delay:0.75s;
        -ms-animation-delay:0.75s;
        -webkit-animation-delay:0.75s;
        -moz-animation-delay:0.75s;
}
#inTurnFadingTextG_2{
    animation-delay:0.9s;
        -o-animation-delay:0.9s;
        -ms-animation-delay:0.9s;
        -webkit-animation-delay:0.9s;
        -moz-animation-delay:0.9s;
}
#inTurnFadingTextG_3{
    animation-delay:1.05s;
        -o-animation-delay:1.05s;
        -ms-animation-delay:1.05s;
        -webkit-animation-delay:1.05s;
        -moz-animation-delay:1.05s;
}
#inTurnFadingTextG_4{
    animation-delay:1.2s;
        -o-animation-delay:1.2s;
        -ms-animation-delay:1.2s;
        -webkit-animation-delay:1.2s;
        -moz-animation-delay:1.2s;
}
#inTurnFadingTextG_5{
    animation-delay:1.35s;
        -o-animation-delay:1.35s;
        -ms-animation-delay:1.35s;
        -webkit-animation-delay:1.35s;
        -moz-animation-delay:1.35s;
}
#inTurnFadingTextG_6{
    animation-delay:1.5s;
        -o-animation-delay:1.5s;
        -ms-animation-delay:1.5s;
        -webkit-animation-delay:1.5s;
        -moz-animation-delay:1.5s;
}
#inTurnFadingTextG_7{
    animation-delay:1.64s;
        -o-animation-delay:1.64s;
        -ms-animation-delay:1.64s;
        -webkit-animation-delay:1.64s;
        -moz-animation-delay:1.64s;
}
#inTurnFadingTextG_8{
    animation-delay:1.79s;
        -o-animation-delay:1.79s;
        -ms-animation-delay:1.79s;
        -webkit-animation-delay:1.79s;
        -moz-animation-delay:1.79s;
}
#inTurnFadingTextG_9{
    animation-delay:1.94s;
        -o-animation-delay:1.94s;
        -ms-animation-delay:1.94s;
        -webkit-animation-delay:1.94s;
        -moz-animation-delay:1.94s;
}
#inTurnFadingTextG_10{
    animation-delay:2.09s;
        -o-animation-delay:2.09s;
        -ms-animation-delay:2.09s;
        -webkit-animation-delay:2.09s;
        -moz-animation-delay:2.09s;
}




@keyframes bounce_inTurnFadingTextG{
    0%{
        color:rgb(0,0,0);
    }

    100%{
        color:rgb(255,255,255);
    }
}

@-o-keyframes bounce_inTurnFadingTextG{
    0%{
        color:rgb(0,0,0);
    }

    100%{
        color:rgb(255,255,255);
    }
}

@-ms-keyframes bounce_inTurnFadingTextG{
    0%{
        color:rgb(0,0,0);
    }

    100%{
        color:rgb(255,255,255);
    }
}

@-webkit-keyframes bounce_inTurnFadingTextG{
    0%{
        color:rgb(0,0,0);
    }

    100%{
        color:rgb(255,255,255);
    }
}

@-moz-keyframes bounce_inTurnFadingTextG{
    0%{
        color:rgb(0,0,0);
    }

    100%{
        color:rgb(255,255,255);
    }
}
.sound-if {

    color:#fff;
}


/* ================================================== 
LOADING SPLASH */


/* LOADING SPLASH SLUT
================================================== */