/*--------------- START LOGO ANIMATION START ---------------*/

.start_logo img {
    position: absolute;
    z-index: 10;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    height: 300;
    animation: moveToCorner 1s;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes moveToCorner {
    from {
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        min-height: 300;
    }
    to {
        transform: translate(-50%, -50%);
        top: 48px;
        left: 48px;
        transform: scale(0.33);
        transform-origin: 0 0;
    }
}

@media (max-width: 992px) {

  @keyframes moveToCorner {
    from {
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        min-height: 300;
    }
    to {
        transform: translate(-50%, -50%);
        top: 36px;
        left: 36px;
        transform: scale(0.2);
        transform-origin: 0 0;
    }
}
}

@media (max-width: 360px) {

  @keyframes moveToCorner {
    from {
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        min-height: 300;
    }
    to {
        transform: translate(-50%, -50%);
        top: 36px;
        left: 36px;
        transform: scale(0.1);
        transform-origin: 0 0;
    }
}
}

/*--------------- START LOGO ANIMATION END ---------------*/


/*--------------- SUCCESS ANIMATION START ---------------*/

.wrapper, .checkmark__circle, .checkmark, .checkmark__check {
  padding:0;
  margin:0;
}

.wrapper {
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.checkmark__circle{
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}

.checkmark{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}

.checkmark__check{
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}

@keyframes stroke{
  100%{stroke-dashoffset: 0}
}

@keyframes scale{
  0%, 100%{transform: none}
  50%{transform: scale3d(1.1, 1.1, 1)}
}

@keyframes fill{
  100%{box-shadow: inset 0px 0px 0px 30px #7ac142}
}

#success_animation_contact{
  z-index: 5;
}

/*--------------- SUCCESS ANIMATION END ---------------*/

/*--------------- LOADING ANIMATION START ---------------*/

.lds-roller {
    display: inline-block;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
  }
  .lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(0, 0, 0);
    margin: -4px 0 0 -4px;
  }
  .lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
  }
  .lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
  }
  .lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
  }
  .lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
  }
  .lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
  }
  .lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
  }
  .lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
  }
  .lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
  }
  .lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
  }
  .lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
  }
  @keyframes lds-roller {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

/*--------------- LOADING ANIMATION END ---------------*/

/*--------------- WIGGLE ANIMATION START ---------------*/


@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(15deg);
  }
  25% {
    transform: rotateZ(-12deg);
  }
  30% {
    transform: rotateZ(12deg);
  }
  35% {
    transform: rotateZ(-9deg);
  }
  40% {
      transform: rotateZ(9deg);
  }
  45% {
  transform: rotateZ(-6deg);
  }
  50% {
      transform: rotateZ(6deg);
  }
  45% {
  transform: rotateZ(-6deg);
  }
  50% {
      transform: rotateZ(6deg);
  }
  55% {
  transform: rotateZ(-3deg);
  }
  60% {
      transform: rotateZ(3deg);
  }
  65%, 100% {
    transform: rotateZ(0);
  }
}

/*--------------- WIGGLE ANIMATION END ---------------*/