/* --------------------------
  Base
--------------------------- */


body {
  padding-top: 60px;
	background: #0f4e7a;
}

svg {
	margin: auto;
  display: block;
}


.badge {
  width: 33%
}

.threestars {
width: 23%;
margin-bottom: 100px;


}


h1 {
  text-align:center;
  font-family:roboto;
  color: white;

}


/* --------------------------
  Keyframes - First Element
--------------------------- */

@keyframes grow1 {

  0% {
    transform:scale(0);
  }

  30% {
    transform: scale(1.1);
  }

  60% {
    transform: scale(0.9);
  }
}



@keyframes turn {

  0% {
  transform: rotate(0) scale(0);
    opacity: 0;
  }

  60% {
    transform: rotate(375deg) scale(1.1);
  }

  80% {
    transform: rotate(355deg) scale(0.9);
  }

  100% {
    transform: rotate(360deg) scale(1);

  }

}



@keyframes pulse {

50% {
    transform: scale(1.08);
  }

}



/* --------------------------
  SVG Styles - First element
--------------------------- */

.badge * {
  transform-origin: 180px 180px;
}



.outer,
.inner,
.inline {

  animation: grow1 1s ease-out backwards;

}


.inner {
  animation-delay: .1s;

}

.inline {
  animation-delay: .15s;
}



.goldenstar {

animation: turn 1.1s .2s ease-out backwards;

}


.goldenstar circle {

animation: pulse 2s 2s;


}


  .goldenstar circle:nth-of-type(2) {
    animation-delay: 1.6s;
  }

  .goldenstar circle:nth-of-type(3) {
    animation-delay: 1.7s;
  }

  .goldenstar circle:nth-of-type(4) {
    animation-delay: 1.8s;
  }

  .goldenstar circle:nth-of-type(5) {
    animation-delay: 1.9s;
  }



h1 {

animation: grow .7s 1.5s ease-in backwards;


}





/* --------------------------
  Keyframes - Second Element
--------------------------- */

@keyframes slide {


  50% {
      transform: translate3d (0,-10px,0);
  }


  80% {
      transform: translate3d (0, 90px,0);
  }


  100% {
      transform: translate3d (0,10px,0);
  }
}




@keyframes grow {

  0% {
        transform: scale (1);
    }


  50% {
      transform: scale (1.15) rotate(-5deg);
      opacity: 1s;
      fill: #fdf097;
  }


  100% {
  transform: scale(1);
  }


}



@keyframes offset {


  60% {
      stroke-opacity: 1;
  }


  100% {

  stroke-dashoffset: 0;
  }


}





/* --------------------------
  SVG Styles - Second Element
--------------------------- */
.star * {

  transform-origin: 50% 50%;

}



.stars-bg {
  stroke-opacity: 0;
  stroke-dasharray: 815;
  stroke-dashoffset: 815;
  animation: offset 3s 2.2s linear forwards;

}


.star {
transform: translate3d(0,180px,0);
  animation: slide .5s forwards,
             grow 3s ease-out forwards;

}


.star:nth-of-type(1) {
animation-delay: .5s, 1.8s;

}

.star:nth-of-type(2) {
animation-delay: .0s, 1.5s;

}

.star:nth-of-type(3) {
animation-delay: .8s, 2s;
}