/*-----------------------------------------------------------------------------
	Name	    : Mouse scroll effect animation
	Description	: mouse scroll animation
	Author		: abcreativity
	Author URL	: https://abcreativity.pl/
	Created		: 01 September 2019
	License		: All Rights Reserved. Do Not Copy!
-------------------------------------------------------------------------------*/

.mouse-scroll {
    height: 50px;
    width: 36px;
    margin: 0 auto;
    margin-bottom: 1rem;
    -webkit-animation: mouse-downTop 2s infinite;
    animation: mouse-downTop 2s infinite;
}
/*animation from top to bottom and back*/
@-webkit-keyframes mouse-downTop {
 0%, 100% {
 -webkit-transform: translateY(0%);
 transform: translateY(0%);
}
 50% {
 -webkit-transform:translateY(0.3rem);
 transform: translateY(0.3rem);
}
}
@keyframes mouse-downTop {
 0%, 100% {
 -webkit-transform: translateY(0%);
 transform: translateY(0%);
}
 50% {
 -webkit-transform:translateY(0.3rem);
 transform: translateY(0.3rem);
}
}
.mouse-downTop {
    -webkit-animation-name: mouse-downTop;
    animation-name: mouse-downTop;
}
/* animation line outide */
.mouse-outside-hover .mouse-left, .mouse-outside-hover .mouse-right {
    stroke-width: 2px;
    stroke: #0db8ca;
    fill: transparent;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 66.23511505126953;
}
.mouse-outside-hover .mouse-left {
    stroke-dashoffset: -66.23511505126953;
}
.mouse-outside-hover .mouse-right {
    stroke-dashoffset: 66.23511505126953;
}
.mouse-scroll .mouse-outside-hover .mouse-left {
    -webkit-animation: mouseLeft-strokeDashoffset 2s infinite;
    animation: mouseLeft-strokeDashoffset 2s infinite;
}
.mouse-scroll .mouse-outside-hover .mouse-right {
    -webkit-animation: mouseRight-strokeDashoffset 2s infinite;
    animation: mouseRight-strokeDashoffset 2s infinite;
}
 @-webkit-keyframes mouseLeft-strokeDashoffset {
 0% {
 stroke-dashoffset:-66.23511505126953;
}
 50% {
 stroke-dashoffset:0;
}
 100% {
 stroke-dashoffset:66.23511505126953;
}
}
 @keyframes mouseLeft-strokeDashoffset {
 0% {
 stroke-dashoffset:-66.23511505126953;
}
 50% {
 stroke-dashoffset:0;
}
 100% {
 stroke-dashoffset:66.23511505126953;
}
}
.mouseLeft-strokeDashoffset {
    -webkit-animation-name: mouseLeft-strokeDashoffset;
    animation-name: mouseLeft-strokeDashoffset;
}
 @-webkit-keyframes mouseRight-strokeDashoffset {
 0% {
 stroke-dashoffset:66.23511505126953;
}
 50% {
 stroke-dashoffset:0;
}
 100% {
 stroke-dashoffset:-66.23511505126953;
}
}
@keyframes mouseRight-strokeDashoffset {
 0% {
 stroke-dashoffset:66.23511505126953;
}
 50% {
 stroke-dashoffset:0;
}
 100% {
 stroke-dashoffset:-66.23511505126953;
}
}
.mouseRight-strokeDashoffset {
    -webkit-animation-name: mouseRight-strokeDashoffset;
    animation-name: mouseRight-strokeDashoffset;
}
.mouse-outside-hover, .mouse-outside {
    position: absolute;
    top: 0;
    left: 0;
}
.mouse-outside-hover {
    z-index: 2;
}
/*mouse line - below*/
.mouse-outside {
    z-index: 1;
}
.mouse-outside .mouse-left, .mouse-outside .mouse-right {
    stroke-width: 2px;
    stroke: #FFF;
    fill: transparent;
    stroke-linejoin: round;
    stroke-linecap: round;
}
/* mouse middle */
.mouse-scroll .mouse-middle {
    width: 8px;
    height: 8px;
    border-radius: 10px;
    background: #0db8ca;
    position: absolute;
    top: 10px;
    left: 14px;
    -webkit-animation: mouseMiddle 2s linear infinite;
    animation: mouseMiddle 2s linear infinite;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}
 @-webkit-keyframes mouseMiddle {
0% {
 -webkit-transform: scale(1) translateY(0);
 transform: scale(1) translateY(0);
 opacity:1;
}
 47% {
 -webkit-transform: scale(0.5) translateY(50px);
 transform: scale(0.5) translateY(50px);
 opacity:0.8;
}
 50% {
 -webkit-transform: scale(0.5) translateY(50px);
 transform: scale(0.5) translateY(50px);
 opacity:0;
}
 60% {
 -webkit-transform: scale(0.5) translateY(15px);
 transform: scale(0.5) translateY(15px);
 opacity:0;
}
 100% {
 -webkit-transform: scale(1) translateY(0px);
 transform: scale(1) translateY(0px);
 opacity:1;
}
}
@keyframes mouseMiddle {
 0% {
 -webkit-transform: scale(1) translateY(0);
 transform: scale(1) translateY(0);
 opacity:1;
}
 47% {
 -webkit-transform: scale(0.5) translateY(50px);
 transform: scale(0.5) translateY(50px);
 opacity:0.8;
}
 50% {
 -webkit-transform: scale(0.5) translateY(50px);
 transform: scale(0.5) translateY(50px);
 opacity:0;
}
 60% {
 -webkit-transform: scale(0.5) translateY(15px);
 transform: scale(0.5) translateY(15px);
 opacity:0;
}
 100% {
 -webkit-transform: scale(1) translateY(0px);
 transform: scale(1) translateY(0px);
 opacity:1;
}
}
.mouseMiddle {
    -webkit-animation-name: mouseMiddle;
    animation-name: mouseMiddle;
}
/*scroll title*/
.banner-scroll-down .scroll-text {
    margin-bottom: 0.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    -webkit-animation: mouseText 2s linear infinite;
    animation: mouseText 2s linear infinite;
    text-align: center;
}
 @-webkit-keyframes mouseText {
 0% {
 color:#FFF;
}
/*
 25% {
 color:#FFF;
}
*/
 26% {
 color:#0db8ca;
}
 50% {
 color:#0db8ca;
}
       80% {
 color:#FFF;
}  
 100% {
 color:#FFF;
}
}
@keyframes mouseText {
 0% {
 color:#FFF;
}
/*
 25% {
 color:#FFF;
}
*/
 26% {
 color:#0db8ca;
}
 50% {
 color:#0db8ca;
}
   80% {
 color:#FFF;
}  
    
 100% {
 color:#FFF;
}
}
.mouseText {
    -webkit-animation-name: mouseText;
    animation-name: mouseText;
}