.image-background
{
  filter: blur(0px);

  animation: ease-in-out blurTransition 0.7s;
}

@keyframes blurTransition
{
  from
  {
    filter: blur(07px)
  }

  to
  {
    filter: blur(0px)
  }
}



/* GEOMETRIC CIRCLE */


.circle { 
    width: 13.3vw;
    height: 13.3vw; 
    -moz-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    border-radius: 100%;
    position: absolute;
    z-index: 2;
    top: 10%;
    right: 1.4%;
    background: #fff;
    box-shadow: .4em 0 4em rgba(0, 0, 0, .2);

    animation: ease-in-out transitionCircle 0.9s;
  }


  @keyframes transitionCircle
  {
      from{
          background: #50b4f2;
          top: 50%
      }

      to
      {
          top: 10%;
          background: #fff;
      }
  }