<!-- TRUCK -->
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 400 400" xml:space="preserve">
    
      <style>.s0{fill:none;stroke-width:4;stroke:#003A57;}.s1{fill:#FFF;stroke-width:4;stroke:#003A57;}</style>
  
     <circle class="iconBackground" cx="200" cy="200" r="190"/>
      
      <path d="M244 260 358 260 358 204 314 186 306 150 244 150 244 260 58 260 58 108 244 108 244 150" class="truck s0" id="truck"/>
      <circle cx="116" cy="260" r="24" class="truck s1" id="truck"/>
      <circle cx="284" cy="260" r="24" class="truck s1" id="truck"/>
      
      <circle class="iconContainer" cx="200" cy="200" r="190"/>

    <defs><mask id="iconClip">
       <rect width="100%" height="100%" fill="white"/>
       <circle cx="200" cy="200" r="195"/>
    </mask></defs>

  
      <circle id="truck-donut" cx="200" cy="200" r="250" mask="url(#iconClip)" fill="#dde7e0"/>

</svg>

<!-- RINGS -->
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 400 400" xml:space="preserve">
  
    <circle class="iconBackground" cx="200" cy="200" r="190"/>
    <circle class="ring-right" cx="300" cy="230" r="70" style="fill:none;stroke-miterlimit:10;stroke-width:4;stroke:#003A57"/>
    <circle class="ring-left" cx="100" cy="230" r="70" style="fill:none;stroke-miterlimit:10;stroke-width:4;stroke:#003A57"/>
    <polyline class="ring-left" points="102,160 140,119 127,104 73,104 57,119 94,160" style="fill:none;stroke-miterlimit:10;stroke-width:4;stroke:#003A57"/>
    <line class="ring-sparkle" x1="103" y1="100" x2="72" y2="76" style="fill:#FFFFFF;stroke:#003A57;stroke-width:2;stroke-miterlimit:10"/>
    <line class="ring-sparkle" x1="142" y1="90" x2="142" y2="52" style="fill:#FFFFFF;stroke:#003A57;stroke-width:4;stroke-miterlimit:10"/>
    <line class="ring-sparkle" x1="184" y1="100" x2="214" y2="76" style="fill:#FFFFFF;stroke:#003A57;stroke-width:2;stroke-miterlimit:10"/>


    <circle class="iconContainer" cx="200" cy="200" r="190"/>

    <defs><mask id="iconClip">
       <rect width="100%" height="100%" fill="white"/>
       <circle cx="200" cy="200" r="195"/>
    </mask></defs>

    <circle id="ring-donut" cx="200" cy="200" r="250" mask="url(#iconClip)" fill="#dde7e0"/>

  </svg>  



<!-- ANGEL -->

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 400 400" xml:space="preserve">

    <circle class="iconBackground" cx="200" cy="200" r="190"/>
    <path class="angel angel-prep angel-wing-left" style="fill:#FFFFFF;stroke:#223D57;stroke-width:4;stroke-miterlimit:10;" d="M201 180H60C60 230 123 256 201 256V180z"/>
    <path class="angel angel-prep angel-wing-right" style="fill:#FFFFFF;stroke:#223D57;stroke-width:4;stroke-miterlimit:10;" d="M200 180h140c0 51 -63 77 -140 77V180z"/>
    <circle class="angel angel-prep angel-head" style="fill:none;stroke:#223D57;stroke-width:4;stroke-miterlimit:10;" cx="200" cy="142" r="38"/>
    <path class="angel angel-prep angel-body" style="fill:#FFFFFF;stroke:#223D57;stroke-width:4;stroke-miterlimit:10;" d="M265 340c0 -88 -29 -160 -65 -160s-65.1 71.8 -65 160H265z"/>
      
    <ellipse class="halo angel-prep" style="fill:none;stroke:#223D57;stroke-width:4;stroke-miterlimit:10;" cx="200" cy="77" rx="46" ry="16"/>
  
    <circle class="iconContainer" cx="200" cy="200" r="190"/>

    <defs><mask id="iconClip">
       <rect width="100%" height="100%" fill="white"/>
       <circle cx="200" cy="200" r="195"/>
    </mask></defs>

    <circle id="angel-donut" cx="200" cy="200" r="250" mask="url(#iconClip)" fill="#dde7e0"/>

  </svg>


<!-- REVIEWS -->

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 400 400" xml:space="preserve">
    
      <style>.s0{fill:none;stroke-width:4;stroke:#003A57;}.s1{fill:#FFF;stroke-width:4;stroke:#003A57;}</style>
  
    <circle class="iconBackground" cx="200" cy="200" r="190"/>
  
    <polygon class="speech-bubble" style="fill:#FFFFFF;stroke:#223D57;stroke-width:4;stroke-miterlimit:10;" points="84,304 143,252 330,252 330,115 69,115 69,252 84,252"/>
    <polygon class="star star-1" style="fill:#FFFFFF;stroke:#223D57;stroke-width:2;stroke-miterlimit:10;" points="104,196 92,202 94,188 84,179 98,177 104,164 111,177 124,179 114,188 117,202"/>
    <polygon class="star star-2" style="fill:#FFFFFF;stroke:#223D57;stroke-width:2;stroke-miterlimit:10;" points="153,196 141,202 143,188 133,179 147,177 153,164 160,177 173,179 163,188 166,202"/>
    <polygon class="star star-3" style="fill:#FFFFFF;stroke:#223D57;stroke-width:2;stroke-miterlimit:10;" points="189,202 191,188 181,179 195,177 201,164 207,177 221,179 211,188 213,202 201,196"/>
    <polygon class="star star-4" style="fill:#FFFFFF;stroke:#223D57;stroke-width:2;stroke-miterlimit:10;" points="249,196 237,202 239,188 229,179 243,177 249,164 255,177 269,179 259,188 261,202"/>
    <polygon class="star star-5" style="fill:#FFFFFF;stroke:#223D57;stroke-width:2;stroke-miterlimit:10;" points="297,196 284,202 287,188 277,179 291,177 297,164 303,177 317,179 307,188 309,202"/>

  
      <circle class="iconContainer" cx="200" cy="200" r="190"/>

    <defs><mask id="iconClip">
        <rect width="100%" height="100%" fill="white"/>
        <circle cx="200" cy="200" r="195"/>
      </mask></defs>
 
      <circle id="review-donut" cx="200" cy="200" r="250" mask="url(#iconClip)" fill="#dde7e0"/>

  </svg>
body {
  background-color: #dde7e0;
  text-align: center;
  width: 100%;
  margin: 20% auto; }

svg {
  margin: 0 3%;
  display: inline-block;
  width: 15%;
  max-width: 150px; }

.iconContainer {
  fill: none;
  stroke-width: 14;
  stroke: #0085BA; }

.iconBackground {
  fill: #ffffff;
  stroke-width: 14;
  stroke: #0085BA; }

/* TRUCK */
.truck-init {
  -webkit-animation: drive 1.5s 0.5 ease;
  -moz-animation: drive 1.5s 0.5 ease;
  animation: drive 1.5s 0.5 ease; }

.truck-hover {
  -webkit-animation: drive-hover 1.5s 1.5 ease;
  -moz-animation: drive-hover 1.5s 1.5 ease;
  animation: drive-hover 1.5s 1.5 ease;
  -webkit-animation-delay: -0.75s;
  -moz-animation-delay: -0.75s;
  animation-delay: -0.75s; }

/* RINGS */
.ring-left {
  opacity: 0; }

.ring-left-init {
  -webkit-animation: move-ring-left 1s forwards ease;
  -moz-animation: move-ring-left 1s forwards ease;
  animation: move-ring-left 1s forwards ease;
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
  opacity: 0; }

.ring-right {
  opacity: 0; }

.ring-right-translate {
  -webkit-transform: translate(-45px, 0px);
  -moz-transform: translate(-45px, 0px);
  -ms-transform: translate(-45px, 0px);
  -o-transform: translate(-45px, 0px);
  transform: translate(-45px, 0px);
  opacity: 1; }

.ring-right-init {
  -webkit-animation: move-ring-right 1s forwards ease;
  -moz-animation: move-ring-right 1s forwards ease;
  animation: move-ring-right 1s forwards ease;
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
  opacity: 0; }

.ring-sparkle {
  stroke-dasharray: 40;
  stroke-dashoffset: 40; }

.ring-sparkle-init {
  -webkit-animation: ring-sparkle 0.2s 1.2s linear forwards;
  -moz-animation: ring-sparkle 0.2s 1.2s linear forwards;
  animation: ring-sparkle 0.2s 1.2s linear forwards; }

.ring-sparkle-hover {
  -webkit-animation: ring-sparkle 0.2s linear forwards;
  -moz-animation: ring-sparkle 0.2s linear forwards;
  animation: ring-sparkle 0.2s linear forwards; }

/* ANGEL */
.angel-prep {
  opacity: 0; }

.angel-head-init {
  -webkit-animation: angel-float-up 1.5s 1 ease;
  -moz-animation: angel-float-up 1.5s 1 ease;
  animation: angel-float-up 1.5s 1 ease;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s; }

.angel-body-init {
  -webkit-animation: angel-float-up 1.5s 1 ease;
  -moz-animation: angel-float-up 1.5s 1 ease;
  animation: angel-float-up 1.5s 1 ease;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s; }

.angel-wing-right-init {
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-animation: angel-wing-r-reveal 1.5s 1 ease;
  -moz-animation: angel-wing-r-reveal 1.5s 1 ease;
  animation: angel-wing-r-reveal 1.5s 1 ease;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s; }

.angel-wing-right-hover {
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-animation: angel-wing-r-hover 1.5s 1 ease;
  -moz-animation: angel-wing-r-hover 1.5s 1 ease;
  animation: angel-wing-r-hover 1.5s 1 ease; }

.angel-wing-left-init {
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -o-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
  -webkit-animation: angel-wing-l-reveal 1.5s 1 ease;
  -moz-animation: angel-wing-l-reveal 1.5s 1 ease;
  animation: angel-wing-l-reveal 1.5s 1 ease;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s; }

.angel-wing-left-hover {
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -o-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
  -webkit-animation: angel-wing-l-hover 1.5s 1 ease;
  -moz-animation: angel-wing-l-hover 1.5s 1 ease;
  animation: angel-wing-l-hover 1.5s 1 ease; }

.halo-init {
  -webkit-animation: halo-float-down 1.5s 1 ease;
  -moz-animation: halo-float-down 1.5s 1 ease;
  animation: halo-float-down 1.5s 1 ease;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s; }

.halo-hover {
  -webkit-animation: halo-float 1.5s 1 ease;
  -moz-animation: halo-float 1.5s 1 ease;
  animation: halo-float 1.5s 1 ease; }

/* REVIEWS */
.speech-bubble {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  stroke-dasharray: 870;
  stroke-dashoffset: 870; }

.speech-bubble-init {
  -webkit-animation: speech-bubble-scale 1s forwards ease;
  -moz-animation: speech-bubble-scale 1s forwards ease;
  animation: speech-bubble-scale 1s forwards ease;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s; }

.star {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  stroke-dasharray: 140;
  stroke-dashoffset: 140; }

.star-1-init {
  -webkit-animation: star-scale 0.3s forwards ease;
  -moz-animation: star-scale 0.3s forwards ease;
  animation: star-scale 0.3s forwards ease;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s; }

.star-2-init {
  -webkit-animation: star-scale 0.3s forwards ease;
  -moz-animation: star-scale 0.3s forwards ease;
  animation: star-scale 0.3s forwards ease;
  -webkit-animation-delay: 2.1s;
  -moz-animation-delay: 2.1s;
  animation-delay: 2.1s; }

.star-3-init {
  -webkit-animation: star-scale 0.3s forwards ease;
  -moz-animation: star-scale 0.3s forwards ease;
  animation: star-scale 0.3s forwards ease;
  -webkit-animation-delay: 2.2s;
  -moz-animation-delay: 2.2s;
  animation-delay: 2.2s; }

.star-4 {
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-timing-function: ease; }

.star-4-scale {
  stroke-dashoffset: 140; }

.star-4-init {
  -webkit-animation: star-4-scale 0.3s forwards ease;
  -moz-animation: star-4-scale 0.3s forwards ease;
  animation: star-4-scale 0.3s forwards ease;
  -webkit-animation-delay: 2.3s;
  -moz-animation-delay: 2.3s;
  animation-delay: 2.3s; }

.star-4-hover {
  stroke-dashoffset: 0;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-timing-function: ease; }

.star-5 {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-timing-function: ease; }

.star-5-hover {
  stroke-dashoffset: 0;
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-timing-function: ease; }

/*
.star-4-hover {
  @include animation(star-4-hover 2s forwards ease);
  @include animation-delay(0s);
}


.star-5-hover {
  @include animation(star-5-hover 1s forwards ease);
  @include animation-delay(.5s);
}
*/
/* KEYFRAMES */
@keyframes drive {
  0% {
    -webkit-transform: translate(-350px, 0px);
    -moz-transform: translate(-350px, 0px);
    -ms-transform: translate(-350px, 0px);
    -o-transform: translate(-350px, 0px);
    transform: translate(-350px, 0px); }
  50% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px); }
  100% {
    -webkit-transform: translate(350px, 0px);
    -moz-transform: translate(350px, 0px);
    -ms-transform: translate(350px, 0px);
    -o-transform: translate(350px, 0px);
    transform: translate(350px, 0px); } }
@keyframes drive-hover {
  0% {
    -webkit-transform: translate(-350px, 0px);
    -moz-transform: translate(-350px, 0px);
    -ms-transform: translate(-350px, 0px);
    -o-transform: translate(-350px, 0px);
    transform: translate(-350px, 0px); }
  50% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px); }
  100% {
    -webkit-transform: translate(350px, 0px);
    -moz-transform: translate(350px, 0px);
    -ms-transform: translate(350px, 0px);
    -o-transform: translate(350px, 0px);
    transform: translate(350px, 0px); } }
@keyframes move-ring-left {
  0% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 0; }
  100% {
    -webkit-transform: translate(45px, 0px);
    -moz-transform: translate(45px, 0px);
    -ms-transform: translate(45px, 0px);
    -o-transform: translate(45px, 0px);
    transform: translate(45px, 0px);
    opacity: 1; } }
@keyframes move-ring-right {
  0% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 0; }
  100% {
    -webkit-transform: translate(-45px, 0px);
    -moz-transform: translate(-45px, 0px);
    -ms-transform: translate(-45px, 0px);
    -o-transform: translate(-45px, 0px);
    transform: translate(-45px, 0px);
    opacity: 1; } }
@keyframes ring-sparkle {
  0% {
    stroke-dashoffset: 120;
    opacity: 1; }
  50% {
    stroke-dashoffset: 80;
    opacity: 1; }
  100% {
    stroke-dashoffset: 40;
    opacity: 1; } }
@keyframes halo-float-down {
  0% {
    -webkit-transform: translate(0px, -80px);
    -moz-transform: translate(0px, -80px);
    -ms-transform: translate(0px, -80px);
    -o-transform: translate(0px, -80px);
    transform: translate(0px, -80px); }
  100% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px); } }
@keyframes halo-float {
  0% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px); }
  50% {
    -webkit-transform: translate(0px, -5px);
    -moz-transform: translate(0px, -5px);
    -ms-transform: translate(0px, -5px);
    -o-transform: translate(0px, -5px);
    transform: translate(0px, -5px); }
  100% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px); } }
@keyframes angel-float-up {
  0% {
    -webkit-transform: translate(0px, 350px);
    -moz-transform: translate(0px, 350px);
    -ms-transform: translate(0px, 350px);
    -o-transform: translate(0px, 350px);
    transform: translate(0px, 350px); }
  100% {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px); } }
@keyframes angel-wing-r-reveal {
  0% {
    -webkit-transform: translate(0px, 350px) rotate(90deg);
    -moz-transform: translate(0px, 350px) rotate(90deg);
    -ms-transform: translate(0px, 350px) rotate(90deg);
    -o-transform: translate(0px, 350px) rotate(90deg);
    transform: translate(0px, 350px) rotate(90deg); }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    -moz-transform: translate(0px, 0px) rotate(0deg);
    -ms-transform: translate(0px, 0px) rotate(0deg);
    -o-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg); } }
@keyframes angel-wing-r-hover {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg); }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); } }
@keyframes angel-wing-l-reveal {
  0% {
    -webkit-transform: translate(0px, 350px) rotate(-90deg);
    -moz-transform: translate(0px, 350px) rotate(-90deg);
    -ms-transform: translate(0px, 350px) rotate(-90deg);
    -o-transform: translate(0px, 350px) rotate(-90deg);
    transform: translate(0px, 350px) rotate(-90deg); }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    -moz-transform: translate(0px, 0px) rotate(0deg);
    -ms-transform: translate(0px, 0px) rotate(0deg);
    -o-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg); } }
@keyframes angel-wing-l-hover {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg); }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); } }
@keyframes speech-bubble-scale {
  0% {
    stroke-dashoffset: 870; }
  100% {
    stroke-dashoffset: 0; } }
@keyframes star-scale {
  0% {
    stroke-dashoffset: 140; }
  100% {
    stroke-dashoffset: 0; } }
@keyframes star-4-scale {
  0% {
    stroke-dashoffset: 140; }
  100% {
    stroke-dashoffset: 140; } }
@keyframes star-4-hover {
  0% {
    stroke-dashoffset: 70; }
  33% {
    stroke-dashoffset: 0; }
  66% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: 70; } }
@keyframes star-5-hover {
  0% {
    stroke-dashoffset: 140; }
  50% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: 140; } }

/*# sourceMappingURL=main.css.map */
View Compiled 
// ADDING INITIAL ANIMATION

$(function() {
  $(".truck").addClass("truck-init");
});

$("#ring-donut").queue(function() {
  $(".ring-right").addClass("ring-right-init"),
  $(".ring-left").addClass("ring-left-init"),
    $(".ring-sparkle").addClass("ring-sparkle-init");
});

$("#angel-donut").queue(function() {
  $(".halo").addClass("halo-init"),
  $(".angel-head").addClass("angel-head-init"),
  $(".angel-body").addClass("angel-body-init"),
  $(".angel-wing-right").addClass("angel-wing-right-init"),
  $(".angel-wing-left").addClass("angel-wing-left-init");
});

$("#review-donut").queue(function() {
  $(".speech-bubble").addClass("speech-bubble-init"),
  $(".star-1").addClass("star-1-init"),
  $(".star-2").addClass("star-2-init"),
  $(".star-3").addClass("star-3-init"),
  $(".star-4").addClass("star-4-init"),
  $(".star-5").addClass("star-5-init");
});


// TRUCK HOVER ANIMATION

$("#truck-donut").mouseenter(function(){
  if($(".truck").hasClass("truck-init")) {
    return;
  }
  else{
    $(".truck").addClass("truck-hover")
  }
});

$(".truck").on(
    "animationend MSAnimationEnd webkitAnimationEnd oAnimationEnd",
    function() {
        $(this).removeClass("truck-hover truck-init");
});



// RING HOVER ANIMATION

$("#ring-donut").mouseenter(function(){
  if($(".ring-right").hasClass("ring-right-init")) {
    return;
  }
  else{
    $(".ring-sparkle").addClass("ring-sparkle-hover")
    }
});

$(".ring-sparkle").on(
    "animationend MSAnimationEnd webkitAnimationEnd oAnimationEnd",
    function() {
        $(this).removeClass("ring-sparkle-hover ring-sparkle-init");
});

$(".ring-right").on(
    "animationend MSAnimationEnd webkitAnimationEnd oAnimationEnd",
    function() {
        $(this).removeClass("ring-right-init"),
        $(this).addClass("ring-right-translate");
});


// ANGEL HOVER ANIMATION

$("#angel-donut").mouseenter(function(){
  if($(".halo").hasClass("halo-init")) {
    return;
  }
  else{
    $(".halo").addClass("halo-hover"),
    $(".angel-wing-right").addClass("angel-wing-right-hover"),
    $(".angel-wing-left").addClass("angel-wing-left-hover");
    console.log($('.halo').hasClass('halo-init'));
    }
});

$(".halo").on(
    "animationstart MSAnimationStart webkitAnimationStart oAnimationStart",
    function() {
    $(".halo").removeClass("angel-prep");
 });

$(".halo").on(
    "animationend MSAnimationEnd webkitAnimationEnd oAnimationEnd",
    function() {
    $(".halo").removeClass("halo-hover halo-init");
 });

$(".angel-head").on(
    "animationstart MSAnimationStart webkitAnimationStart oAnimationStart",
    function() {
    $(".angel-head").removeClass("angel-prep");
 });

$(".angel-body").on(
    "animationstart MSAnimationStart webkitAnimationStart oAnimationStart",
    function() {
    $(".angel-body").removeClass("angel-prep");
 });

$(".angel-wing-right").on(
    "animationstart MSAnimationStart webkitAnimationStart oAnimationStart",
    function() {
    $(".angel-wing-right").removeClass("angel-prep");
 });


$(".angel-wing-right").on(
    "animationend MSAnimationEnd webkitAnimationEnd oAnimationEnd",
    function() {
    $(".angel-wing-right").removeClass("angel-wing-right-hover angel-wing-right-init");
 });

$(".angel-wing-left").on(
    "animationstart MSAnimationStart webkitAnimationStart oAnimationStart",
    function() {
    $(".angel-wing-left").removeClass("angel-prep");
 });

$(".angel-wing-left").on(
    "animationend MSAnimationEnd webkitAnimationEnd oAnimationEnd",
    function() {
    $(".angel-wing-left").removeClass("angel-wing-left-hover angel-wing-left-init");
});


// REVIEW HOVER ANIMATION

$("#review-donut").mouseenter(function(){
  if($(".star-4").hasClass("star-4-init")) {
    return;
  }
  else{
    $(".star-4").addClass("star-4-hover")
    $(".star-5").addClass("star-5-hover")
  }
});

$("#review-donut").mouseout(function(){
    if($(".star-4").hasClass("star-4-init")) {
        return;
    }
    else{
    $(".star-4").removeClass("star-4-hover")
    $(".star-5").removeClass("star-5-hover")
    }
});

$(".star-4").on(
    "animationend MSAnimationEnd webkitAnimationEnd oAnimationEnd",
    function() {
      $(".star-4").addClass("star-4-scale")
        $(this).removeClass("star-4-hover star-4-init");
});

$(".star-5").on(
    "animationend MSAnimationEnd webkitAnimationEnd oAnimationEnd",
    function() {
        $(this).removeClass("star-5-hover star-5-init");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
  2. http://julian.com/research/velocity/build/jquery.velocity.min.js