#video-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 20px;
  
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}

#video-wrapper .height-wrapper {
  position: relative;
  height: 360px;
  width: 640px;
          
  -webkit-transition: height .4s;
     -moz-transition: height .4s;
      -ms-transition: height .4s;
       -o-transition: height .4s;
          transition: height .4s;
}

.choose #video-wrapper .label {
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  height: auto;
  max-height: 90%;
  width: 100%;
  padding: 5%;
  /* color: rgba(255, 255, 255, 0); */
  background-color: #DDD;
  border-radius: 50% 50% 0px 0px;
  
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  text-shadow: 0px 0px 1px #585858;
  
  -webkit-transform: translate(0%, -11px);
     -moz-transform: translate(0%, -11px);
      -ms-transform: translate(0%, -11px);
       -o-transform: translate(0%, -11px);
          transform: translate(0%, -11px);
  
  -webkit-transition: -webkit-transform .2s;
     -moz-transition:    -moz-transform .2s;
      -ms-transition:     -ms-transform .2s;
       -o-transition:      -o-transform .2s;
          transition:         transform .2s;
  
  overflow: hidden;
}

.choose #video-wrapper .label.strict {
  left: 3%;
  width: 84%;
  color: #FFF;
  
  background-color: #D60000;
  background-image: url(../images/props/blend.png);
  background-repeat: no-repeat;
  background-size: 100% 50%;
  
  border-radius: 0px;
  text-shadow: 0px 0px 10px #000;
          
  -webkit-transition: background-color .8s -webkit-transform .2s;
     -moz-transition: background-color .8s    -moz-transform .2s;
      -ms-transition: background-color .8s     -ms-transform .2s;
       -o-transition: background-color .8s      -o-transform .2s;
          transition: background-color .8s         transform .2s;
}

.red    .label.strict           { background-color: #d60000; }
.red    .two .label.strict      { background-color: #ff6262 !important; }
.red    .three .label.strict    { background-color: #a21f13 !important; }

.green  .label.strict         { background-color: #a0d600 !important; }
.green  .two .label.strict    { background-color: #d7ff62 !important; }
.green  .three .label.strict  { background-color: #72a213 !important; }

.blue   .label.strict          { background-color: #0067d6 !important; }
.blue   .two .label.strict     { background-color: #62adff !important; }
.blue   .three .label.strict   { background-color: #134ca2 !important; }

.brown  .label.strict         { background-color: #d68b00 !important; }
.brown  .two .label.strict    { background-color: #ffc862 !important; }
.brown  .three .label.strict  { background-color: #a27b13 !important; }

.violet .label.strict        { background-color: #a400d6 !important; }
.violet .two .label.strict   { background-color: #da62ff !important; }
.violet .three .label.strict { background-color: #8c13a2 !important; }

#video-wrapper .current .label, #video-wrapper .label {
  display: none;
}

.choose #video-wrapper div:hover > .label {
  -webkit-transform: translate(0%, -100%);
     -moz-transform: translate(0%, -100%);
      -ms-transform: translate(0%, -100%);
       -o-transform: translate(0%, -100%);
          transform: translate(0%, -100%);
  
  max-height: initial;
}

.height-wrapper .current .covery {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  
  z-index: 10;
}

.height-wrapper .cover {
  display: none;
}

.choose .height-wrapper .cover {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  
  -webkit-box-shadow: 10px 10px 90px 10px #FFF inset;
     -moz-box-shadow: 10px 10px 90px 10px #FFF inset;
      -ms-box-shadow: 10px 10px 90px 10px #FFF inset;
       -o-box-shadow: 10px 10px 90px 10px #FFF inset;
          box-shadow: 10px 10px 90px 10px #FFF inset;
  
  cursor: pointer;
  z-index: 10;
}
/* TODO: tidy up */
.choose .height-wrapper .cover:hover {
  -webkit-box-shadow: 0px 0px 0px -1px #FFF inset;
     -moz-box-shadow: 0px 0px 0px -1px #FFF inset;
      -ms-box-shadow: 0px 0px 0px -1px #FFF inset;
       -o-box-shadow: 0px 0px 0px -1px #FFF inset;
          box-shadow: 0px 0px 0px -1px #FFF inset;
          
  -webkit-transition: -webkit-box-shadow .3s;
     -moz-transition:    -moz-box-shadow .3s;
      -ms-transition:     -ms-box-shadow .3s;
       -o-transition:      -o-box-shadow .3s;
          transition:         box-shadow .3s;
}

#video-wrapper .current, #video-wrapper .height-wrapper iframe, .credits {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: #333;
  background-size: cover;
  background-position: 50% 50%;
  
  -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.7);
     -moz-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.7);
      -ms-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.7);
       -o-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.7);
          box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.7);
  /*
  -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.7), 0px 0px 0px 1000px rgba(0, 0, 0, 0);
     -moz-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.7), 0px 0px 0px 1000px rgba(0, 0, 0, 0);
      -ms-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.7), 0px 0px 0px 1000px rgba(0, 0, 0, 0);
       -o-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.7), 0px 0px 0px 1000px rgba(0, 0, 0, 0);
          box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.7), 0px 0px 0px 1000px rgba(0, 0, 0, 0);
          
  -webkit-transition: -webkit-box-shadow 3s;
     -moz-transition:    -moz-box-shadow 3s;
      -ms-transition:     -ms-box-shadow 3s;
       -o-transition:      -o-box-shadow 3s;
          transition:         box-shadow 3s;
          */
  overflow: hidden;
  opacity: 1;
  z-index: 5;
}

.credits > div {
  position: absolute;
  display: block;
  width: 100%;
  min-height: 100%;
  top: 0%;
  left: 0px;
}

.credits .text {
  top: 100%;
  color: #FFF;
  text-align: center;
  line-height: 25px;
  
  -webkit-animation: scroll 25s linear infinite;
     -moz-animation: scroll 25s linear infinite;
      -ms-animation: scroll 25s linear infinite;
       -o-animation: scroll 25s linear infinite;
          animation: scroll 25s linear infinite;
}

.credits .text + div {
  -webkit-box-shadow: 0px 0px 60px 65px #222 inset;
     -moz-box-shadow: 0px 0px 60px 65px #222 inset;
      -ms-box-shadow: 0px 0px 60px 65px #222 inset;
       -o-box-shadow: 0px 0px 60px 65px #222 inset;
          box-shadow: 0px 0px 60px 65px #222 inset;
}

.credits b {
  line-height: 50px;
}

#current.current {
  background-image: url(../images/surrogates/1.png);
}

/*
.play #video-wrapper .current.immediat {
  -webkit-transition: -webkit-box-shadow .1s !important;
     -moz-transition:    -moz-box-shadow .1s !important;
      -ms-transition:     -ms-box-shadow .1s !important;
       -o-transition:      -o-box-shadow .1s !important;
          transition:         box-shadow .1s !important;
}

.play #video-wrapper.lightsoff .current {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.7), 0px 0px 0px 1000px rgba(0, 0, 0, 0.75);
     -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.7), 0px 0px 0px 1000px rgba(0, 0, 0, 0.75);
      -ms-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.7), 0px 0px 0px 1000px rgba(0, 0, 0, 0.75);
       -o-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.7), 0px 0px 0px 1000px rgba(0, 0, 0, 0.75);
          box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.7), 0px 0px 0px 1000px rgba(0, 0, 0, 0.75);
          
  -webkit-transition: -webkit-box-shadow 3s 5s;
     -moz-transition:    -moz-box-shadow 3s 5s;
      -ms-transition:     -ms-box-shadow 3s 5s;
       -o-transition:      -o-box-shadow 3s 5s;
          transition:         box-shadow 3s 5s;
}
*/
#video-wrapper .invoir {
  /*display: none;*/
  position: fixed;
  opacity: 1;
  right: -1000%;
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  
  z-index: 1;
}

.play #video-wrapper .one,
.play #video-wrapper .two,
.play #video-wrapper .three,
.play #video-wrapper .four {
  opacity: 0;
  height: 0px;
  width: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  left: 1000%;
  right: -1000%;
  
  overflow: hidden;
}

#video-wrapper .loading {
  background-image: url(../images/loader.gif);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 7%;
  background-color: #000;
}

#video-wrapper .loading > div:first-child {
  background-image: none;
}

#video-wrapper .one   > div:first-child,
#video-wrapper .two   > div:first-child,
#video-wrapper .three > div:first-child,
#video-wrapper .four  > div:first-child {
  position: relative;
  height: 100%;
  background-image: url(../images/video.png);
  background-size: cover;
  background-position: 50% 50%;
  
  z-index: 1;
}

.choose #video-wrapper .single .one,
.choose #video-wrapper .double .one,
.choose #video-wrapper .double .two,
.choose #video-wrapper .triple .one,
.choose #video-wrapper .triple .two,
.choose #video-wrapper .triple .three,
.choose #video-wrapper .quad .one,
.choose #video-wrapper .quad .two,
.choose #video-wrapper .quad .three,
.choose #video-wrapper .quad .four {
  position: absolute;
  background-color: white;
  height: 30%;
  width: 30%;
  bottom: -10px;
  margin-top: -64px;
  /* border: 1px solid #000; */
  /*
  -webkit-box-shadow: 0px 0px 20px 6px #FFF;
     -moz-box-shadow: 0px 0px 20px 6px #FFF;
      -ms-box-shadow: 0px 0px 20px 6px #FFF;
       -o-box-shadow: 0px 0px 20px 6px #FFF;
          box-shadow: 0px 0px 20px 6px #FFF;
          */
  -webkit-transition: opacity .8s;
     -moz-transition: opacity .8s;
      -ms-transition: opacity .8s;
       -o-transition: opacity .8s;
          transition: opacity .8s;
  
  /* overflow: hidden; */
  opacity: 1;
  z-index: 20;
}

.choose #video-wrapper .one:hover,
.choose #video-wrapper .two:hover,
.choose #video-wrapper .three:hover,
.choose #video-wrapper .four:hover {
  /*
  -webkit-box-shadow: 0px 0px 0px 9px #FFF, 0px 0px 0px 10px #000;
     -moz-box-shadow: 0px 0px 0px 9px #FFF, 0px 0px 0px 10px #000;
      -ms-box-shadow: 0px 0px 0px 9px #FFF, 0px 0px 0px 10px #000;
       -o-box-shadow: 0px 0px 0px 9px #FFF, 0px 0px 0px 10px #000;
          box-shadow: 0px 0px 0px 9px #FFF, 0px 0px 0px 10px #000;
          */
  -webkit-box-shadow: 0px 0px 0px 1px #FFF;
     -moz-box-shadow: 0px 0px 0px 1px #FFF;
      -ms-box-shadow: 0px 0px 0px 1px #FFF;
       -o-box-shadow: 0px 0px 0px 1px #FFF;
          box-shadow: 0px 0px 0px 1px #FFF;
          /* TODO: border */
}

.choose #video-wrapper .quad .one,
.choose #video-wrapper .quad .two,
.choose #video-wrapper .triple .one,
.choose #video-wrapper .double .one {
  left: -50px;
}

.choose #video-wrapper .triple .two,
.choose #video-wrapper .single .one {
  left: 50%;
  
  -webkit-transform: translate(-50%, 0);
     -moz-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
       -o-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

.choose #video-wrapper .quad .four,
.choose #video-wrapper .quad .three,
.choose #video-wrapper .triple .three,
.choose #video-wrapper .double .two {
  right: -50px;
}

.choose #video-wrapper .quad .three,
.choose #video-wrapper .quad .two {
  bottom: 45%;
}

#progress-bar, #progress-bar div {
  display: block;
  height: 1px;
}

#progress-bar {
  position: relative;
  top: -1px;
  left: 0px;
  width: auto;
  z-index: 10;
  
  -webkit-transition: opacity .3s, width 1s linear;
     -moz-transition: opacity .3s, width 1s linear;
      -ms-transition: opacity .3s, width 1s linear;
       -o-transition: opacity .3s, width 1s linear;
          transition: opacity .3s, width 1s linear;
  
  opacity: 0;
}

#progress-bar.credits {
  -webkit-animation: progress 25s infinite;
     -moz-animation: progress 25s infinite;
      -ms-animation: progress 25s infinite;
       -o-animation: progress 25s infinite;
          animation: progress 25s infinite;
  
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}

.play div:hover + #progress-bar {
  opacity: 1;
}

#progress-bar.disable {
  display: none;
}

#progress-bar div {
  position: absolute;
}

#progress-bar div:nth-child(1) {
  right: -2px;
  top: -1px;
  height: 3px;
  width: 3px;
  border-radius: 50%;
}

#progress-bar div:nth-child(2) {
  right: -2px;
  top: 0px;
  width: 10%;
  background-color: transparent;
}

#progress-bar div:nth-child(3) {
  right: 10%;
  top: 0px;
  width: 5%;
  background-color: transparent;
}

.red #progress-bar {
  background-color: #AC0000;
  
  -webkit-box-shadow: 0px 0px 7px 0px #F00, 0px 0px 7px 0px #FFF;
     -moz-box-shadow: 0px 0px 7px 0px #F00, 0px 0px 7px 0px #FFF;
      -ms-box-shadow: 0px 0px 7px 0px #F00, 0px 0px 7px 0px #FFF;
       -o-box-shadow: 0px 0px 7px 0px #F00, 0px 0px 7px 0px #FFF;
          box-shadow: 0px 0px 7px 0px #F00, 0px 0px 7px 0px #FFF;
}
.red #progress-bar div:nth-child(1) {
  background-color: rgba(255, 0, 0, .6);
  
  -webkit-box-shadow: 0px 0px 5px 0px #F00, 0px 0px 5px 0px #FFF;
     -moz-box-shadow: 0px 0px 5px 0px #F00, 0px 0px 5px 0px #FFF;
      -ms-box-shadow: 0px 0px 5px 0px #F00, 0px 0px 5px 0px #FFF;
       -o-box-shadow: 0px 0px 5px 0px #F00, 0px 0px 5px 0px #FFF;
          box-shadow: 0px 0px 5px 0px #F00, 0px 0px 5px 0px #FFF;
}
.red #progress-bar div:nth-child(2) {
  -webkit-box-shadow: 0px 0px 8px 0px #F00, 0px 0px 9px 0px #FFF;
     -moz-box-shadow: 0px 0px 8px 0px #F00, 0px 0px 9px 0px #FFF;
      -ms-box-shadow: 0px 0px 8px 0px #F00, 0px 0px 9px 0px #FFF;
       -o-box-shadow: 0px 0px 8px 0px #F00, 0px 0px 9px 0px #FFF;
          box-shadow: 0px 0px 8px 0px #F00, 0px 0px 9px 0px #FFF;
}
.red #progress-bar div:nth-child(3) {
  -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
     -moz-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
      -ms-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
       -o-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
          box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
}


.green #progress-bar {
  background-color: #00AC00;
  
  -webkit-box-shadow: 0px 0px 7px 0px #0F0, 0px 0px 7px 0px #FFF;
     -moz-box-shadow: 0px 0px 7px 0px #0F0, 0px 0px 7px 0px #FFF;
      -ms-box-shadow: 0px 0px 7px 0px #0F0, 0px 0px 7px 0px #FFF;
       -o-box-shadow: 0px 0px 7px 0px #0F0, 0px 0px 7px 0px #FFF;
          box-shadow: 0px 0px 7px 0px #0F0, 0px 0px 7px 0px #FFF;
}
.green #progress-bar div:nth-child(1) {
  background-color: rgba(0, 255, 0, .6);
  
  -webkit-box-shadow: 0px 0px 5px 0px #0F0, 0px 0px 5px 0px #FFF;
     -moz-box-shadow: 0px 0px 5px 0px #0F0, 0px 0px 5px 0px #FFF;
      -ms-box-shadow: 0px 0px 5px 0px #0F0, 0px 0px 5px 0px #FFF;
       -o-box-shadow: 0px 0px 5px 0px #0F0, 0px 0px 5px 0px #FFF;
          box-shadow: 0px 0px 5px 0px #0F0, 0px 0px 5px 0px #FFF;
}
.green #progress-bar div:nth-child(2) {
  -webkit-box-shadow: 0px 0px 8px 0px #0F0, 0px 0px 9px 0px #FFF;
     -moz-box-shadow: 0px 0px 8px 0px #0F0, 0px 0px 9px 0px #FFF;
      -ms-box-shadow: 0px 0px 8px 0px #0F0, 0px 0px 9px 0px #FFF;
       -o-box-shadow: 0px 0px 8px 0px #0F0, 0px 0px 9px 0px #FFF;
          box-shadow: 0px 0px 8px 0px #0F0, 0px 0px 9px 0px #FFF;
}
.green #progress-bar div:nth-child(3) {
  -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 255, 0, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
     -moz-box-shadow: 0px 0px 8px 0px rgba(0, 255, 0, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
      -ms-box-shadow: 0px 0px 8px 0px rgba(0, 255, 0, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
       -o-box-shadow: 0px 0px 8px 0px rgba(0, 255, 0, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
          box-shadow: 0px 0px 8px 0px rgba(0, 255, 0, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
}


.blue #progress-bar {
  background-color: #4545EE;
  
  -webkit-box-shadow: 0px 0px 7px 0px #00F, 0px 0px 7px 0px #FFF;
     -moz-box-shadow: 0px 0px 7px 0px #00F, 0px 0px 7px 0px #FFF;
      -ms-box-shadow: 0px 0px 7px 0px #00F, 0px 0px 7px 0px #FFF;
       -o-box-shadow: 0px 0px 7px 0px #00F, 0px 0px 7px 0px #FFF;
          box-shadow: 0px 0px 7px 0px #00F, 0px 0px 7px 0px #FFF;
}
.blue #progress-bar div:nth-child(1) {
  background-color: rgba(0, 0, 255, .6);
  
  -webkit-box-shadow: 0px 0px 5px 0px #00F, 0px 0px 5px 0px #FFF;
     -moz-box-shadow: 0px 0px 5px 0px #00F, 0px 0px 5px 0px #FFF;
      -ms-box-shadow: 0px 0px 5px 0px #00F, 0px 0px 5px 0px #FFF;
       -o-box-shadow: 0px 0px 5px 0px #00F, 0px 0px 5px 0px #FFF;
          box-shadow: 0px 0px 5px 0px #00F, 0px 0px 5px 0px #FFF;
}
.blue #progress-bar div:nth-child(2) {
  -webkit-box-shadow: 0px 0px 8px 0px #00F, 0px 0px 9px 0px #FFF;
     -moz-box-shadow: 0px 0px 8px 0px #00F, 0px 0px 9px 0px #FFF;
      -ms-box-shadow: 0px 0px 8px 0px #00F, 0px 0px 9px 0px #FFF;
       -o-box-shadow: 0px 0px 8px 0px #00F, 0px 0px 9px 0px #FFF;
          box-shadow: 0px 0px 8px 0px #00F, 0px 0px 9px 0px #FFF;
}
.blue #progress-bar div:nth-child(3) {
  -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 255, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
     -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 255, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
      -ms-box-shadow: 0px 0px 8px 0px rgba(0, 0, 255, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
       -o-box-shadow: 0px 0px 8px 0px rgba(0, 0, 255, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
          box-shadow: 0px 0px 8px 0px rgba(0, 0, 255, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
}


.brown #progress-bar {
  background-color: #D68B00;
  
  -webkit-box-shadow: 0px 0px 7px 0px #DFA63D, 0px 0px 7px 0px #FFF;
     -moz-box-shadow: 0px 0px 7px 0px #DFA63D, 0px 0px 7px 0px #FFF;
      -ms-box-shadow: 0px 0px 7px 0px #DFA63D, 0px 0px 7px 0px #FFF;
       -o-box-shadow: 0px 0px 7px 0px #DFA63D, 0px 0px 7px 0px #FFF;
          box-shadow: 0px 0px 7px 0px #DFA63D, 0px 0px 7px 0px #FFF;
}
.brown #progress-bar div:nth-child(1) {
  background-color: rgba(223, 166, 61, .6);
  
  -webkit-box-shadow: 0px 0px 5px 0px #DFA63D, 0px 0px 5px 0px #FFF;
     -moz-box-shadow: 0px 0px 5px 0px #DFA63D, 0px 0px 5px 0px #FFF;
      -ms-box-shadow: 0px 0px 5px 0px #DFA63D, 0px 0px 5px 0px #FFF;
       -o-box-shadow: 0px 0px 5px 0px #DFA63D, 0px 0px 5px 0px #FFF;
          box-shadow: 0px 0px 5px 0px #DFA63D, 0px 0px 5px 0px #FFF;
}
.brown #progress-bar div:nth-child(2) {
  -webkit-box-shadow: 0px 0px 8px 0px #DFA63D, 0px 0px 9px 0px #FFF;
     -moz-box-shadow: 0px 0px 8px 0px #DFA63D, 0px 0px 9px 0px #FFF;
      -ms-box-shadow: 0px 0px 8px 0px #DFA63D, 0px 0px 9px 0px #FFF;
       -o-box-shadow: 0px 0px 8px 0px #DFA63D, 0px 0px 9px 0px #FFF;
          box-shadow: 0px 0px 8px 0px #DFA63D, 0px 0px 9px 0px #FFF;
}
.brown #progress-bar div:nth-child(3) {
  -webkit-box-shadow: 0px 0px 8px 0px rgba(223, 166, 61, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
     -moz-box-shadow: 0px 0px 8px 0px rgba(223, 166, 61, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
      -ms-box-shadow: 0px 0px 8px 0px rgba(223, 166, 61, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
       -o-box-shadow: 0px 0px 8px 0px rgba(223, 166, 61, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
          box-shadow: 0px 0px 8px 0px rgba(223, 166, 61, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
}


.violet #progress-bar {
  background-color: #a400d6;
  
  -webkit-box-shadow: 0px 0px 7px 0px #b93ddf, 0px 0px 7px 0px #FFF;
     -moz-box-shadow: 0px 0px 7px 0px #b93ddf, 0px 0px 7px 0px #FFF;
      -ms-box-shadow: 0px 0px 7px 0px #b93ddf, 0px 0px 7px 0px #FFF;
       -o-box-shadow: 0px 0px 7px 0px #b93ddf, 0px 0px 7px 0px #FFF;
          box-shadow: 0px 0px 7px 0px #b93ddf, 0px 0px 7px 0px #FFF;
}
.violet #progress-bar div:nth-child(1) {
  background-color: rgba(185, 61, 223, .6);
  
  -webkit-box-shadow: 0px 0px 5px 0px #b93ddf, 0px 0px 5px 0px #FFF;
     -moz-box-shadow: 0px 0px 5px 0px #b93ddf, 0px 0px 5px 0px #FFF;
      -ms-box-shadow: 0px 0px 5px 0px #b93ddf, 0px 0px 5px 0px #FFF;
       -o-box-shadow: 0px 0px 5px 0px #b93ddf, 0px 0px 5px 0px #FFF;
          box-shadow: 0px 0px 5px 0px #b93ddf, 0px 0px 5px 0px #FFF;
}
.violet #progress-bar div:nth-child(2) {
  -webkit-box-shadow: 0px 0px 8px 0px #b93ddf, 0px 0px 9px 0px #FFF;
     -moz-box-shadow: 0px 0px 8px 0px #b93ddf, 0px 0px 9px 0px #FFF;
      -ms-box-shadow: 0px 0px 8px 0px #b93ddf, 0px 0px 9px 0px #FFF;
       -o-box-shadow: 0px 0px 8px 0px #b93ddf, 0px 0px 9px 0px #FFF;
          box-shadow: 0px 0px 8px 0px #b93ddf, 0px 0px 9px 0px #FFF;
}
.violet #progress-bar div:nth-child(3) {
  -webkit-box-shadow: 0px 0px 8px 0px rgba(185, 61, 223, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
     -moz-box-shadow: 0px 0px 8px 0px rgba(185, 61, 223, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
      -ms-box-shadow: 0px 0px 8px 0px rgba(185, 61, 223, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
       -o-box-shadow: 0px 0px 8px 0px rgba(185, 61, 223, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
          box-shadow: 0px 0px 8px 0px rgba(185, 61, 223, 0.4), 0px 0px 9px 0px rgba(255, 255, 255, 0.78);
}

@-webkit-keyframes scroll {
  0%    {
          top: 70%;
          opacity: 0;
          -webkit-transform: translate(0,  0);
             -moz-transform: translate(0,  0);
              -ms-transform: translate(0,  0);
               -o-transform: translate(0,  0);
                  transform: translate(0,  0);
        }
  10%   { opacity: 1; }
  90%   { opacity: 1; }
  100%  {
          top: 0;
          opacity: 0;
          -webkit-transform: translate(0, -80%);
             -moz-transform: translate(0, -80%);
              -ms-transform: translate(0, -80%);
               -o-transform: translate(0, -80%);
                  transform: translate(0, -80%);
        }
}
@-moz-keyframes scroll {
  0%    {
          top: 70%;
          opacity: 0;
          -webkit-transform: translate(0,  0);
             -moz-transform: translate(0,  0);
              -ms-transform: translate(0,  0);
               -o-transform: translate(0,  0);
                  transform: translate(0,  0);
        }
  10%   { opacity: 1; }
  90%   { opacity: 1; }
  100%  {
          top: 0;
          opacity: 0;
          -webkit-transform: translate(0, -80%);
             -moz-transform: translate(0, -80%);
              -ms-transform: translate(0, -80%);
               -o-transform: translate(0, -80%);
                  transform: translate(0, -80%);
        }
}
@-ms-keyframes scroll {
  0%    {
          top: 70%;
          opacity: 0;
          -webkit-transform: translate(0,  0);
             -moz-transform: translate(0,  0);
              -ms-transform: translate(0,  0);
               -o-transform: translate(0,  0);
                  transform: translate(0,  0);
        }
  10%   { opacity: 1; }
  90%   { opacity: 1; }
  100%  {
          top: 0;
          opacity: 0;
          -webkit-transform: translate(0, -80%);
             -moz-transform: translate(0, -80%);
              -ms-transform: translate(0, -80%);
               -o-transform: translate(0, -80%);
                  transform: translate(0, -80%);
        }
}
@-o-keyframes scroll {
  0%    {
          top: 70%;
          opacity: 0;
          -webkit-transform: translate(0,  0);
             -moz-transform: translate(0,  0);
              -ms-transform: translate(0,  0);
               -o-transform: translate(0,  0);
                  transform: translate(0,  0);
        }
  10%   { opacity: 1; }
  90%   { opacity: 1; }
  100%  {
          top: 0;
          opacity: 0;
          -webkit-transform: translate(0, -80%);
             -moz-transform: translate(0, -80%);
              -ms-transform: translate(0, -80%);
               -o-transform: translate(0, -80%);
                  transform: translate(0, -80%);
        }
}
@keyframes scroll {
  0%    {
          top: 70%;
          opacity: 0;
          -webkit-transform: translate(0,  0);
             -moz-transform: translate(0,  0);
              -ms-transform: translate(0,  0);
               -o-transform: translate(0,  0);
                  transform: translate(0,  0);
        }
  10%   { opacity: 1; }
  90%   { opacity: 1; }
  100%  {
          top: 0;
          opacity: 0;
          -webkit-transform: translate(0, -80%);
             -moz-transform: translate(0, -80%);
              -ms-transform: translate(0, -80%);
               -o-transform: translate(0, -80%);
                  transform: translate(0, -80%);
        }
}


@-webkit-keyframes progress {
  0%   { width: 0%;   }
  100% { width: 100%; }
}
@-moz-keyframes progress {
  0%   { width: 0%;   }
  100% { width: 100%; }
}
@-ms-keyframes progress {
  0%   { width: 0%;   }
  100% { width: 100%; }
}
@-o-keyframes progress {
  0%   { width: 0%;   }
  100% { width: 100%; }
}
@keyframes progress {
  0%   { width: 0%;   }
  100% { width: 100%; }
}