.cursor {
  display: block;
  position: absolute;
  width: 36px;
  height: 60px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 28 28' version='1.1' viewBox='0 0 28 28' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='8.2 20.9 8.2 4.9 19.8 16.5 13 16.5 12.6 16.6' fill='%23fff'/%3E%3Cpolygon points='17.3 21.6 13.7 23.1 9 12 12.7 10.5' fill='%23fff'/%3E%3Crect transform='matrix(.9221 -.3871 .3871 .9221 -5.7605 6.5909)' x='12.5' y='13.6' width='2' height='8'/%3E%3Cpolygon points='9.2 7.3 9.2 18.5 12.2 15.6 12.6 15.5 17.4 15.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  transition: top .15s ease-out, left .15s ease-out;

  pointer-events: none;
  user-select: none;
}

/* ====== *
  Source:  https://github.com/codrops/ClickEffects/blob/master/css/component.css
* ======= */
.cursor::after {
  position: absolute;
  margin: -35px 0 0 -35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  content: '';
  opacity: 0;
  pointer-events: none;
  user-select: none;
  box-shadow: inset 0 0 0 35px rgba(111,148,182,0);
}

.cursor.clicked::after {
  -webkit-animation: click-animation 0.5s ease-out forwards;
  animation: click-animation 0.5s ease-out forwards;
}

@-webkit-keyframes click-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.4, 0.4, 1);
    transform: scale3d(0.4, 0.4, 1);
  }
  80% {
    box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
    opacity: 0.1;
  }
  100% {
    box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
  }
}

@keyframes click-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.4, 0.4, 1);
    transform: scale3d(0.4, 0.4, 1);
  }
  80% {
    box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
    opacity: 0.1;
  }
  100% {
    box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
  }
}

.cursor.clickedMobile::after {
	-webkit-animation: anim-effect-sanja 1s ease-out forwards;
	animation: anim-effect-sanja 1s ease-out forwards;
}

@-webkit-keyframes anim-effect-sanja {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	25% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes anim-effect-sanja {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	25% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

.cursor.shaking {
    width: 45px;
    height: 75px;
    -webkit-animation: shaking 0.3s linear;
    animation: shaking 0.3s linear;
    animation-iteration-count: 2;
}

@keyframes shaking {
    0% {
        transform: translate(60px, -60px);
    }
    25% {
        transform: translate(-60px, 60px);
    }
    50% {
        transform: translate(60px, -60px);
    }
    75% {
        transform: translate(-60px, 60px);
    }
    100% {
        transform: translate(60px, -60px);
    }
}