/*animation css start here*/
@-webkit-keyframes circle {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@keyframes circle {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
  }

}

@keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
  }

}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }

}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }

}

@-webkit-keyframes black_btn {
  0% {
    -webkit-transform: translate(10px, 10px);
    transform: translate(10px, 10px);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

}

@keyframes black_btn {
  0% {
    -webkit-transform: translate(10px, 10px);
    transform: translate(10px, 10px);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

}

@-webkit-keyframes yellow_btn {
  0% {
    -webkit-transform: translate(-20px, 10px);
    transform: translate(-20px, 10px);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

}

@keyframes yellow_btn {
  0% {
    -webkit-transform: translate(-20px, 10px);
    transform: translate(-20px, 10px);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

}

@-webkit-keyframes pink_btn {
  0% {
    -webkit-transform: translate(10px, -20px);
    transform: translate(10px, -20px);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

}

@keyframes pink_btn {
  0% {
    -webkit-transform: translate(10px, -20px);
    transform: translate(10px, -20px);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

}

@-webkit-keyframes lightblue_btn {
  0% {
    -webkit-transform: translate(-20px, -20px);
    transform: translate(-20px, -20px);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

}

@keyframes lightblue_btn {
  0% {
    -webkit-transform: translate(-20px, -20px);
    transform: translate(-20px, -20px);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

}

@-webkit-keyframes white_btn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

}

@keyframes white_btn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

}

@-webkit-keyframes scale_btn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center;
    transform-origin: center;
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(300);
    transform: scale(300);
    -webkit-transform-origin: center;
    transform-origin: center;
  }

}

@keyframes scale_btn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center;
    transform-origin: center;
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(300);
    transform: scale(300);
    -webkit-transform-origin: center;
    transform-origin: center;
  }

}

@-webkit-keyframes scale_btn_back {
  0% {
    opacity: 1;
    -webkit-transform: scale(300);
    transform: scale(300);
    -webkit-transform-origin: center;
    transform-origin: center;
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center;
    transform-origin: center;
  }

}

@keyframes scale_btn_back {
  0% {
    opacity: 1;
    -webkit-transform: scale(300);
    transform: scale(300);
    -webkit-transform-origin: center;
    transform-origin: center;
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center;
    transform-origin: center;
  }

}

@-webkit-keyframes white_btn_back {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transform-origin: center;
    transform-origin: center;
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: center;
    transform-origin: center;
  }

}

@keyframes white_btn_back {
  0% {
    opacity: 1;
    transform: scale(1.1);
    transform-origin: center;
  }

  100% {
    opacity: 1;
    transform: scale(0);
    transform-origin: center;
  }

}

@-webkit-keyframes color_hover_transition {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 2400% 0;
  }

}

@-moz-keyframes color_hover_transition {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 2400% 0;
  }

}

@-o-keyframes color_hover_transition {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 2400% 0;
  }

}

@keyframes color_hover_transition {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 2400% 0;
  }

}
@-webkit-keyframes gradient {
  0% {
    background-position: 10% 70%;
  }

  50% {
    background-position: 80% 100%;
  }

  100% {
    background-position: 60% 50%;
  }

}

@keyframes gradient {
  0% {
    background-position: 10% 70%;
  }

  50% {
    background-position: 80% 100%;
  }

  100% {
    background-position: 60% 50%;
  }

}
@-webkit-keyframes gradientbtn {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradientbtn {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.expanded .btn-click li:nth-child(1) {
  -webkit-animation: black_btn;
  animation: black_btn;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -moz-animation-delay: 0s;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  -moz-animation-iteration-count: 2;
  animation-direction: alternate-reverse;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.expanded .btn-click li:nth-child(2) {
  -webkit-animation: yellow_btn;
  animation: yellow_btn;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.expanded .btn-click li:nth-child(3) {
  -webkit-animation: pink_btn;
  animation: pink_btn;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.expanded .btn-click li:nth-child(4) {
  -webkit-animation: lightblue_btn;
  animation: lightblue_btn;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.expanded .btn-click .white.open {
  -webkit-animation: white_btn 1s;
  animation: white_btn 1s;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
  animation-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.expanded .scale.open {
  -webkit-animation: scale_btn 1.1s;
  animation: scale_btn 1.1s;
  -webkit-animation-timing-function: cubic-bezier(0.36, 0.88, 0.47, 0.82);
  animation-timing-function: cubic-bezier(0.36, 0.88, 0.47, 0.82);
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.closemanu .scale {
  -webkit-animation: scale_btn_back 1.4s;
  animation: scale_btn_back 1.4s;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
  animation-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.closemanu .btn-click .white {
  -webkit-animation: white_btn_back 1.5s;
  animation: white_btn_back 1.5s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.arrow-animated {
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

.rotate {
  -webkit-animation: rotation  5000ms infinite linear;
  animation: rotation  5000ms infinite linear;
  -webkit-animation-duration: 5000ms;
  animation-duration: 5000ms;
}

.section_one.pp-section .banner-title {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

/*animation css end here*/