/* Leaflet More Markers icon styles */

.lmm-icon {
  border: 2px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-size: 31px;
  font-weight: bold;
  height: 50px;
  left: -25px;
  line-height: unset;
  min-width: 50px;
  padding: 0;
  position: absolute;
  text-align: center;
  top: -38px;
}

/* With small appended makes .lmm-icon smaller. */
.lmm-icon.small {
  font-size: 18px;
  height: 30px;
  min-width: 30px;
  left: -15px;
  top: -23px;
}
/* Corresponds to default size, as set above for .lmm-icon */
.lmm-icon.medium {
  font-size: 31px;
  height: 50px;
  min-width: 50px;
  left: -25px;
  top: -38px;
}
/* With large appended makes .lmm-icon larger. */
.lmm-icon.large {
  font-size: 64px;
  height: 100px;
  min-width: 100px;
  left: -51px;
  top: -80px;
}

/* Puts a black circle around the icon. */
.lmm-icon.circle-black {
  background-color: rgba(0, 0, 0, .15);
  border: 2px solid #111;
  border-radius: 50%;
}
.lmm-icon.circle-black.small {
  border: 1px solid #111;
}
/* Puts a red circle around the icon. */
.lmm-icon.circle-red {
  background-color: rgba(255, 0, 0, .15);
  border: 2px solid red;
  border-radius: 50%;
}
.lmm-icon.circle-red.small {
  border: 1px solid red;
}
/* Puts a white circle around the icon. */
.lmm-icon.circle-white {
  background-color: rgba(255, 255, 255, .2);
  border: 2px solid white;
  border-radius: 50%;
}
.lmm-icon.circle-white.small {
  border: 1px solid white;
}

/* Vertical positioning for Bootstrap Icons. */
[class*="lmm-icon large bi-"]::before,
[class*="lmm-icon medium bi-"]::before,
[class*="lmm-icon small bi-"]::before,
[class*="lmm-icon bi-"]::before {
  line-height: unset !important;
}
/* Vertical positioning for Font Awesome. */
.lmm-icon.fas,
.lmm-icon.far,
.lmm-icon.fal,
.lmm-icon.fad,
.lmm-icon.fab {
  line-height: unset;
}
/* Vertical positioning for Line Awesome. */
.lmm-icon.la {
  line-height: unset;
}

/* Adds a pulsating animation to the icon and its circle, if any. */
.pulse {
  animation: pulse 1.5s ease infinite;
}
@keyframes pulse {
    0% { transform: scale(.1, .1); }
   50% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1, 1.1); }
}

/* Adds an infinite jump animation to the icon and its circle, if any. */
.jump {
  animation: jump 2s ease-in-out infinite forwards;
}
/* Adds a 5-jump animation to the icon and its circle, if any. */
.jump-5 {
  animation: jump 2s ease-in-out 5 forwards;
  /*animation-timing-function: cubic-bezier(0.28, 0.84, 0.40, 1);*/
}
/* Inspired by https://css-tricks.com/making-css-animations-feel-natural */
@keyframes jump {
   0%, 100% { }
  10% { transform: scale(1.15, .85) translateY(0);    }
  30% { transform: scale(.85, 1.15) translateY(-80%); }
  50% { transform: scale(1.10, .90) translateY(0);    }
  57% { transform: scale(1, 1)      translateY(-10%); }
  67% { transform: translateY(0); }
}

/* Adds a rocking animation to the icon and its circle, if any. */
.rock {
  animation: rock 2.5s ease infinite forwards;
  transform-origin: 50% 40%;
}
/* Inspired by http://www.javascriptkit.com/dhtmltutors/css3-animation-swing.shtml */
@keyframes rock {
  0%, 100% { transform: rotate(+15deg); }
  50% { transform: rotate(-5deg); }
}

.bumpy-road {
  transform-origin: 50% 0;
  animation: bumpy-road 2.5s ease-in-out infinite forwards;
}
@keyframes bumpy-road {
    0% { transform: rotateX(0); }
    5% { transform: rotateX(15deg);  }
   10% { transform: rotateX(0); }
   15% { transform: rotateX(15deg); }
   20% { transform: rotateX(0); }
   25% { transform: rotateX(15deg); }
   30% { transform: rotateX(0);  }
   35% { transform: rotateX(15deg);  }
   40% { transform: rotateX(0);  }
   45% { transform: rotateX(15deg); }
   50% { transform: rotateX(0); }
   55% { transform: rotateX(15deg); }
   60% { transform: rotateX(0); }
   65% { transform: rotateX(15deg); }
   70% { transform: rotateX(0); }
   75% { transform: rotateX(15deg); }
   80% { transform: rotateX(0); }
   85% { transform: rotateX(15deg); }
   90% { transform: rotateX(0); }
   92% { transform: scale(1.05, .95); }
   96% { transform: rotateX(15deg) translateY(-27%) scale(.95, 1.05); }
  100% { transform: rotateX(0) translateY(0) scale(1, 1); }
}

/* Adds an infinite jump animation to the icon and its circle, if any. */
.somersault {
  animation: somersault 3s linear infinite forwards;
}
/* Inspired by https://css-tricks.com/making-css-animations-feel-natural */
@keyframes somersault {
    0% { }
   10% { transform: scale(1.15, .85) translateY(+12%); }
   25% { transform: scale(.85, 1.15) translateY(-60%); }
   30% { transform: scale(1, 1)      translateY(-80%) rotate( -90deg); }
   40% { transform: scale(1, 1)      translateY(-80%) rotate(-270deg); }
   45% { transform: scale(1, 1)      translateY(-60%) rotate(-360deg); }
   53% { transform: translateY(0)    rotate(-360deg); }
   60% { transform: scale(1.05, .95) translateY(-5%)  rotate(-360deg); }
   68% { transform: scale(1, 1)      translateY(0)    rotate(-360deg); }
  100% { transform: rotate(-360deg); }
}

/* Permanently flips from a left-to-right orientation to a right-to-left orientation. */
.flip-1 {
  animation: flip 0.5s ease-in-out 1 forwards;
}
@keyframes flip-1 {
    0% { }
  100% { transform: rotateY(180deg) }
}

/* Waits a few seconds then drops the marker from the "sky" into its position. */
.sky-drop {
  animation: sky-drop 5s linear 1 forwards;
  transform-origin: 50% 100%;
}
@keyframes sky-drop {
    0% { transform: scale(.5, .5) translateY(-700%); opacity: 0; }
   60% { transform: scale(.5, .5) translateY(-700%); opacity: 0; }
   70% { transform: scale(.8, 1.2) translateY(0) rotate(+14deg); opacity: 1 }
   73% { transform: scale(1.2, .8) translateY(+10%) rotate(+5deg); }
   78% { transform: scale(1.1, .9) translateY(-17%) translateX(4%) rotate(-12deg); }
   84% { transform: scale(1, 1) translateY(0) rotate(0); }
  100% { }
}