/* **************************************************/
.svgs .vector-icon{
    position: absolute;
}
.svgs .ruler{
    top: 2rem;
    right: 52%;
}

.svgs .paper-plane{
    top: 6rem;
    right: 25%;
    transform: rotate(142deg);
}
.svgs .question{
    top: 16rem;
    right: 14%;
    transform: rotate(40deg);
}
.svgs .cloud-stroke{
    bottom: 20rem;
    right: 14%;
    transform: rotate(335deg);
}
.svgs .chat{
    bottom: 10rem;
    left: 34%;
}

.svgs .cloud-fill{
    top: 16rem;
    left: 14%;
    transform: rotate(336deg);
}

#puzzleAnimationSymptoms svg{
    width: 600px !important;
    height: 600px !important;
}
/* Ruler icon */

 @-webkit-keyframes animate-svg-fill-2 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  @keyframes animate-svg-fill-2 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  .svg-elem-ruler-1.animate {
    -webkit-animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
            animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
  }
  
  @-webkit-keyframes animate-svg-fill-3 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  @keyframes animate-svg-fill-3 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  .svg-elem-ruler-2.animate {
    -webkit-animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
            animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
  }
  
  @-webkit-keyframes animate-svg-fill-4 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  @keyframes animate-svg-fill-4 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  .svg-elem-ruler-3.animate {
    -webkit-animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
            animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
  }


/* Paper plane */

@-webkit-keyframes animate-svg-fill-5 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  @keyframes animate-svg-fill-5 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  .svg-elem-paper-plane-1.animate {
    -webkit-animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
            animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
  }
  
  @-webkit-keyframes animate-svg-fill-6 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  @keyframes animate-svg-fill-6 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  .svg-elem-paper-plane-2.animate {
    -webkit-animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
            animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
  }


  /* Question */

 @-webkit-keyframes animate-svg-stroke-1 {
    0% {
      stroke-dashoffset: 177.55258178710938px;
      stroke-dasharray: 177.55258178710938px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 177.55258178710938px;
    }
  }
  
  @keyframes animate-svg-stroke-1 {
    0% {
      stroke-dashoffset: 177.55258178710938px;
      stroke-dasharray: 177.55258178710938px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 177.55258178710938px;
    }
  }
  
  @-webkit-keyframes animate-svg-fill-7 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(253, 227, 218);
    }
  }
  
  @keyframes animate-svg-fill-7 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(253, 227, 218);
    }
  }
  
  .svg-elem-question-1.animate {
    -webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                         animate-svg-fill-7 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-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
  }
  
  @-webkit-keyframes animate-svg-stroke-2 {
    0% {
      stroke-dashoffset: 52.59831237792969px;
      stroke-dasharray: 52.59831237792969px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 52.59831237792969px;
    }
  }
  
  @keyframes animate-svg-stroke-2 {
    0% {
      stroke-dashoffset: 52.59831237792969px;
      stroke-dasharray: 52.59831237792969px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 52.59831237792969px;
    }
  }
  
  @-webkit-keyframes animate-svg-fill-8 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(253, 227, 218);
    }
  }
  
  @keyframes animate-svg-fill-8 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(253, 227, 218);
    }
  }
  
  .svg-elem-question-2.animate {
    -webkit-animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
                         animate-svg-fill-8 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-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
  }

  
/* Cloud Stroke */

@-webkit-keyframes ananimate-svg-fill-9 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  @keyframes ananimate-svg-fill-9 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  .svg-elem-cloud-stroke-1.animate {
    -webkit-animation: ananimate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
            animation: ananimate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
  }

  /* Chat */

  @-webkit-keyframes animate-svg-stroke-3 {
    0% {
      stroke-dashoffset: 144.93576049804688px;
      stroke-dasharray: 144.93576049804688px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 144.93576049804688px;
    }
  }
  
  @keyframes animate-svg-stroke-3 {
    0% {
      stroke-dashoffset: 144.93576049804688px;
      stroke-dasharray: 144.93576049804688px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 144.93576049804688px;
    }
  }
  
  .svg-elem-chat-1.animate {
    -webkit-animation: animate-svg-stroke-3 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-3 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-4 {
    0% {
      stroke-dashoffset: 105.33407592773438px;
      stroke-dasharray: 105.33407592773438px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 105.33407592773438px;
    }
  }
  
  @keyframes animate-svg-stroke-4 {
    0% {
      stroke-dashoffset: 105.33407592773438px;
      stroke-dasharray: 105.33407592773438px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 105.33407592773438px;
    }
  }
  
  @-webkit-keyframes animate-svg-fill-10 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  @keyframes animate-svg-fill-10 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  .svg-elem-chat-2.animate {
    -webkit-animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
                         animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
            animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
                 animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
  }
  
  @-webkit-keyframes animate-svg-stroke-5 {
    0% {
      stroke-dashoffset: 93.29322814941406px;
      stroke-dasharray: 93.29322814941406px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 93.29322814941406px;
    }
  }
  
  @keyframes animate-svg-stroke-5 {
    0% {
      stroke-dashoffset: 93.29322814941406px;
      stroke-dasharray: 93.29322814941406px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 93.29322814941406px;
    }
  }
  
  @-webkit-keyframes animate-svg-fill-11 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  @keyframes animate-svg-fill-11 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(134, 115, 102);
    }
  }
  
  .svg-elem-chat-3.animate {
    -webkit-animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
                         animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
            animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
                 animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
  }

  /* Cloud Fill */

  @-webkit-keyframes animate-svg-fill-12 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(255, 255, 255);
    }
  }
  
  @keyframes animate-svg-fill-12 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(255, 255, 255);
    }
  }
  
  .svg-elem-cloud-fill-1.animate {
    -webkit-animation: animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
            animation: animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
  }
  
  @-webkit-keyframes animate-svg-fill-13 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(139, 131, 166);
    }
  }
  
  @keyframes animate-svg-fill-13 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(139, 131, 166);
    }
  }
  
  .svg-elem-cloud-fill-2.animate {
    -webkit-animation: animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
            animation: animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
  }
  
  @-webkit-keyframes anianimate-svg-fill-14 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(139, 131, 166);
    }
  }
  
  @keyframes anianimate-svg-fill-14 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(139, 131, 166);
    }
  }
  
  .svg-elem-cloud-fill-3.animate {
    -webkit-animation: anianimate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
            animation: anianimate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
  }
  
  @-webkit-keyframes animate-svg-fill-15 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(224, 238, 247);
    }
  }
  
  @keyframes animate-svg-fill-15 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(224, 238, 247);
    }
  }
  
  .svg-elem-cloud-fill-4.animate {
    -webkit-animation: animate-svg-fill-15 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
            animation: animate-svg-fill-15 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
  }
  
  @-webkit-keyframes animate-svg-fill-16 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(224, 238, 247);
    }
  }
  
  @keyframes animate-svg-fill-16 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(224, 238, 247);
    }
  }
  
  .svg-elem-cloud-fill-5.animate {
    -webkit-animation: animate-svg-fill-16 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
            animation: animate-svg-fill-16 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
  }

  @media (max-width: 991.9px) {
    #puzzleAnimationSymptoms svg {
      width: 100% !important;
      height: auto !important;
  }
  }