/*------------*/

.shootingStar{
  position: relative;
  top: 0;
  left: 0;
  z-index: 5;
}

.p{
  position: absolute;
  animation-name: particleAnimation;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}
@keyframes particleAnimation{
    0% {
        transform: translateX(250px) translateY(-250px);
        opacity: 100;
    }
    100% {
        transform: translateX(0px) translateY(0px);
        opacity: 0;
    }
}
.p::before{
    position: absolute;
    display: block;
    content: "";
    width: 250px;
    right: 1px;
    top: 0px;
    height: 3px;
    background: linear-gradient(to right, rgba(222,241,255,1) 5%,rgba(248,251,254,1) 100%);
    -webkit-transform: rotate(-45deg) translateX(50%);
    -ms-transform: rotate(-45deg) translateX(50%);
    transform: rotate(-45deg) translateX(50%);
}
.p-1{
  left: 60%;
  top: 100%;
}
.p-2{
  left: 35%;
  top: 35%;
  animation-delay: 6s;
}
.p-3{
  left: 0%;
  top: 80%;
  animation-delay: 8s;
}
.p-4{
  left: 10%;
  top: 80%;
  animation-delay: 2s;
}
.p-5{
  left: 20%;
  top: 100%;
  animation-delay: 4s;
}
.p-6{
  left: 60%;
  top: 70%;
  animation-delay: 7s;
}
.p-7{
  left: 90%;
  top: 45%;
  animation-delay: 10s;
}
.p-8{
  left: 2%;
  top: 48%;
}
.p-9{
  left: 90%;
  top: 95%;
  animation-delay: 2s;
}

/*------------*/

.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
       -o-transition: opacity .15s linear;
          transition: opacity .15s linear;
}
.fade.in {
  opacity: 1;
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

@media only screen and (max-width: 480px) {
.p-1,
.p-2,
.p-3,
.p-4{
  display: none;
}
}