/**********************************************************************************

    Project Name: JFK Scroll Top jquery plugin
    Project Description: The JQuery plugin for scroll to top animation.
    File Name: jfk-icon.css
    Author: fullstackdev
    Author URI: 
    Version: 1.2
    
************************************************************************************/
/*================================================
=            Style for scrolling icon            =
================================================*/
.jfk-scrollTop i {
  box-sizing: border-box;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 54px;
  height: 54px;
  text-align: center;
  line-height: 48px;
  font-size: 38px;
  background: #4d4d4d;
  color: #fff;
  cursor: pointer;
  display: none;
  z-index: 9999;
}

.jfk-right-bottom i {
  bottom: 20px;
  right: 20px;
}

.jfk-center-bottom i {
  bottom: 20px;
  right: 50%;
  transform: translateX(27px);
}

.jfk-left-bottom i {
  bottom: 20px;
  left: 20px;
}

.jfk-right-top i {
  top: 20px;
  right: 20px;
}

.jfk-center-top i {
  top: 100px;
  right: 50%;
  transform: translateX(27px);
}

.jfk-left-top i {
  top: 20px;
  left: 20px;
}

.jfk-border i {
  line-height: 46px;
  border: 2px solid #18bc9c;
  background: #fff;
  color: #18bc9c;
}

.jfk-border i:after {
  content: '';
  display: block;
  opacity: 0;
  position: absolute;
  top: -8px;
  left: -8px;
  width: 64px;
  height: 64px;
  border: 1px solid #aaa;
  transform: scale(0.8);
  transition: 0.3s all;
  box-sizing: content-box;
}

.jfk-border i:hover:after {
  opacity: 0.8;
  transform: scale(1);
}

.jfk-round i {
  border-radius: 50%;
}

.jfk-round i:after {
  border-radius: 50%;
}

.jfk-color-animation i {
  animation: colorAnimation 18s ease-out  infinite alternate;
}

@keyframes colorAnimation {
  0% {
    border: 2px solid #18bc9c;
    background-color: #18bc9c;
    color: #fff;
  }
  15% {
    border: 2px solid #59abe3;
    background-color: #59abe3;
    color: #fff;
  }
  30% {
    border: 2px solid #A0D36E;
    background-color: #A0D36E;
    color: #000;
  }
  45% {
    border: 2px solid #FACB47;
    background-color: #FACB47;
    color: #000;
  }
  60% {
    border: 2px solid #e74c3c;
    background-color: #e74c3c;
    color: #000;
  }
  75% {
    border: 2px solid #d2527d;
    background-color: #d2527d;
    color: #fff;
  }
  90% {
    border: 2px solid #A9071E;
    background-color: #A9071E;
    color: #fff;
  }
}