/***************************************************
 * Generated by SVG Artista on 1/9/2021, 2:57:14 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 5286.9521484375px;
    stroke-dasharray: 5286.9521484375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 5286.9521484375px;
    stroke-dasharray: 5286.9521484375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(13, 54, 75);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(13, 54, 75);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 7423.56640625px;
    stroke-dasharray: 7423.56640625px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 7423.56640625px;
    stroke-dasharray: 7423.56640625px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(13, 54, 75);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(13, 54, 75);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
                       animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
          animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
               animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 1607.742919921875px;
    stroke-dasharray: 1607.742919921875px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 1607.742919921875px;
    stroke-dasharray: 1607.742919921875px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(13, 54, 75);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(13, 54, 75);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
                       animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
          animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
               animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 1924.33349609375px;
    stroke-dasharray: 1924.33349609375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 1924.33349609375px;
    stroke-dasharray: 1924.33349609375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(13, 54, 75);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(13, 54, 75);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
                       animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
          animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
               animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}


@keyframes burgerTop {
  50% {
    transform: translateY(100%) rotate(-135deg) scaleY(0.5) ;
  }
  100% {
transform: translateY(275%) rotate(45deg) scaleY(0.2) scaleX(0.5);

  }
}

@keyframes burgerMiddle {
  50%{
    transform: scaleY(0.3) scaleX(0.5) rotate(360deg);
  }
  100% {
    transform:scaleY(0) scaleX(0) rotate(0deg);
  }
}

@keyframes burgerBottom {
  50% {
    transform: translateY(100%) rotate(225deg) scaleY(0.5);
  }
  100% {
    transform: translateY(-275%) rotate(-225deg) scaleY(0.2) scaleX(0.5);
  }
}

@keyframes burgerTopReverse {
  0% {  transform: translateY(275%) rotate(45deg) scaleY(0.2) scaleX(0.5);
    /* transform: translateY(200%) rotate(45deg); */
  }
  50% {transform: translateY(100%) rotate(-135deg) scaleY(0.5) ;
    /* transform: translateY(200%); */
  }
  100% {
    transform: none;
  }
}


@keyframes burgerMiddleReverse {
  0%{
      transform:scaleY(0) scaleX(0) rotate(0deg);
  }
  50%{
    transform: scaleY(0.3) scaleX(0.5) rotate(360deg);
  }
  100% {
  transform: none;
  }
}

@keyframes burgerBottomReverse {
  0% {transform: translateY(-275%) rotate(-225deg) scaleY(0.2) scaleX(0.5);
    /* transform: translateY(-200%) rotate(-45deg); */
  }
  50% {transform: translateY(100%) rotate(225deg) scaleY(0.5);
    /* transform: translateY(-200%); */
  }
  100% {
    transform: none;
  }
}