.bg-gradient-blue-red {
    background: #5856d6;
    background: -moz-linear-gradient(left, #5856d6 0%, #ff3b30 100%);
    background: -webkit-linear-gradient(left, #5856d6 0%,#ff3b30 100%);
    background: linear-gradient(to right, #5856d6 0%,#ff3b30 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5856d6', endColorstr='#ff3b30',GradientType=1 ); 
}
.bg-gradient-blue-light {
    background: #007aff;
    background: -moz-linear-gradient(left, #007aff 0%, #5ac8ff 100%);
    background: -webkit-linear-gradient(left, #007aff 0%,#5ac8ff 100%);
    background: linear-gradient(to right, #007aff 0%,#5ac8ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007aff', endColorstr='#5ac8ff',GradientType=1 );
}
.bg-gradient-red-light {
    background: #ff3b30;
    background: -moz-linear-gradient(left, #ff3b30 0%, #ff2d55 100%);
    background: -webkit-linear-gradient(left, #ff3b30 0%,#ff2d55 100%);
    background: linear-gradient(to right, #ff3b30 0%,#ff2d55 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3b30', endColorstr='#ff2d55',GradientType=1 );
}

.hue-gradient {
    color: #2467ec;
    background-image: -webkit-linear-gradient(90deg,#00deff 5%,#0f50fb 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.box-hue-gradient {
    background-image: -webkit-linear-gradient(90deg,#00deff,#0f50fb);
}
.hue-gradient, .box-hue-gradient {
    -webkit-animation: hue 60s infinite linear;
}
@-webkit-keyframes hue {
    from { -webkit-filter: hue-rotate(0deg);}
    to { -webkit-filter: hue-rotate(-360deg);}
}
.animated {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}
.duration-7-5sec {
    -webkit-animation-duration: .75s;
            animation-duration: .75s;
}
.duration-5sec {
    -webkit-animation-duration: 5s;
            animation-duration: 5s;
}
.duration-3sec {
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
}

@-webkit-keyframes bounce {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}
@keyframes bounce {
    from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }
    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}
.bounce {
    -webkit-animation-name: bounce;
            animation-name: bounce;
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}

@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}
.bounceInDown {
    -webkit-animation-name: bounceInDown;
            animation-name: bounceInDown;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeIn {
    from { opacity: 0;}
    to {opacity: 1;}
}
.fadeIn {
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
}
.fadeIn.delay-05sec {
    -webkit-animation-delay: .5s;
            animation-delay: .5s;
}
.fadeIn.delay-1sec {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}
.fadeIn.delay-2sec {
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}
.fadeIn.delay-3sec {
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
}
.fadeIn.delay-4sec {
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
}
.fadeIn.delay-5sec {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}

.arrow {
    position: fixed; right: 20px; bottom: 20px; z-index: 999;
    width: 45px; height: 45px;
    padding: 30px 15px 0 15px;
}
    .arrow span, 
    .arrow span:before, 
    .arrow span:after { 
        position: absolute;
        bottom: 0%; left: 26%;
        width: 20px; height: 20px;
    }
    .arrow span:before, 
    .arrow span:after { 
        content: " ";
        opacity: 0;
        margin: -10px 0 0 -7px;
        border-top: 2px solid #ff0084;
        border-left: 2px solid #ff0084;
        border-right: 0;
        border-bottom: 0;
        -webkit-animation-duration: 4s;
                animation-duration: 4s;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }
    .arrow span { 
        border: 0;
        text-indent: -9999px;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
    }
    .arrow span:before { 
        -webkit-animation-name: arrow;
                animation-name: arrow;
    }
    .arrow span:after {
        -webkit-animation-name: arrow2;
                animation-name: arrow2;
        -webkit-animation-delay: 2s;
                animation-delay: 2s;
    }
@keyframes arrow {
    0% { opacity: 0; }
    50% { opacity: 1;}
    100% {
        opacity: 0;
        -webkit-transform: translate(-15px, -15px);
                transform: translate(-15px, -15px);
    }
}
@keyframes arrow2 {
    0% { opacity: 0; }
    50% { opacity: 1;}
    100% {
        opacity: 0;
        -webkit-transform: translate( -15px, -15px);
                transform: translate( -15px, -15px);         
    }
}

.loading,
.loading:before,
.loading:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: loading-01 1.8s infinite ease-in-out;
  animation: loading-01 1.8s infinite ease-in-out;
}
.loading {
  font-size: 10px;
  margin: 80px auto;
  position: absolute; top: 40%; left: 0; right: 0; z-index: 99;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loading:before,
.loading:after {
  content: '';
  position: absolute;
  top: 0;
}
.loading:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loading:after {
  left: 3.5em;
}
@-webkit-keyframes loading-01 {
  0%,
  80%,
  100% {
    background: #5856d6;
    
    
  }
  40% {
    background: #ff3b30;
    
    
  }
}
@keyframes loading-01 {
  0%,
  80%,
  100% {
    background: #5856d6;
    
  }
  40% {
    background: #ff3b30;
    
  }
}