/* CSS Document */

.star-five {
  margin: 50px 0;
  position: relative;
  display: block;
  color: white;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid white;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
.star-five:before {
  border-bottom: 80px solid white;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
.star-five:after {
  position: absolute;
  display: block;
  color: white;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid white;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: rotating 24s linear infinite;
	z-index: 100;
	transition:all 300ms ease
}
.rotatingfast {
  animation: rotating 4s linear infinite;
	z-index: 100;
	transition:all 300ms ease
}

#star1{position:absolute; left:-40px; bottom:-500px; opacity:0.2}
#star2{position: absolute; top:-40px; right:-30px; opacity: 0.2}

#star2.star-five{color:teal; border-bottom-color: yellow}
#star2.star-five:before{color:teal; border-bottom-color: yellow}
#star2.star-five:after{color:teal; border-bottom-color: yellow}

.fa-star{color:orange}