/* color bar & stripes */
.color-bar {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 10px;
  overflow: hidden;
}
.color-bar:before,
.color-bar:after {
  position: absolute;
  z-index: -1;
  display: block;
  width: 50%;
  height: 10px;
  content: " ";
}

.color-bar:before {
  top: 0;
  left: 0;
  background-color: #57B25F;
}
.color-bar:after {
  top: 0;
  right: 0;
  background-color: #ED9F2D;
}
.color-bar .stripes {
  margin: 0 auto;
  width: 1024px;
  height: 10px;
  background-color: #ED9F2D;
  overflow: hidden;
}
.color-bar .stripes div {
  height: 10px;
  float: left;
}
.color-bar .stripes .first-strip {
  width: 8px;
  background-color: #57B25F;
}
.color-bar .stripes .second-strip {
  width: 41px;
  background-color: #98C7EB;
}
.color-bar .stripes .third-strip {
  width: 45px;
  background-color: #0091D2;
}
.color-bar .stripes .fourth-strip {
  width: 26px;
  background-color: #00A0DC;
}
.color-bar .stripes .fifth-strip {
  width: 31px;
  background-color: #4955A5;
}
.color-bar .stripes .sixth-strip {
  width: 35px;
  background-color: #B369AB;
}
.color-bar .stripes .seventh-strip {
  width: 35px;
  background-color: #B62270;
}
.color-bar .stripes .eighth-strip {
  width: 32px;
  background-color: #ED0C6E;
}
.color-bar .stripes .ninth-strip {
  width: 35px;
  background-color: #ED174C;
}
.color-bar .stripes .tenth-strip {
  width: 32px;
  background-color: #FFEB95;
}
.color-bar .stripes .eleventh-strip {
  width: 11px;
  background-color: #ED9F2D;
}