.scroll-btn {
	display: block;
	position: fixed;
	width: 40px;
	height: 64px;
	z-index: 1;
	border-radius: 32px;
	border: 2px solid rgba(247, 229, 205, 0.5);
	background: transparent;
	padding: 0;
	bottom: 2vw;
	right: 2vw;
	cursor: pointer;
	transform: scale(.9);
	transition: all .2s;
	pointer-events: none;
	user-select: none;
    animation: bounce 1.5s infinite;
}

.scroll-btn .scroll-btn__sign {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	color: rgba(255, 255, 255, .33);
	transform: translate(-50%, -150%);
	opacity: 1;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .1em;
	overflow: hidden;
	background-clip: text;
    color: rgb(247, 229, 205);
	background-image: linear-gradient(110deg, rgba(0, 0, 0, .00001) 10%, burlywood 10%, burlywood 20%, rgba(0, 0, 0, .00001) 20%, rgba(0, 0, 0, .00001) 100%);
	background-repeat: no-repeat;
	background-size: 200% 200%;
	background-position: 50% 0%;
	animation: slide 4s infinite 1s;
	transition: all .2s;
	pointer-events: none;
}

.scroll-btn .scroll-btn__arrow {
	display: block;
	position: absolute;
	top: 12px;
	left: calc(50% - 2px);
	width: 4px;
	height: 12px;
	border-radius: 2px;
	background: #eee;
	transition: all .2s;
	animation: bounce-down 2s infinite 1s;
}

.scroll-btn .scroll-btn__arrow:before,
.scroll-btn .scroll-btn__arrow:after {
	display: block;
	content: '';
	position: absolute;
	width: 100%;
	height: 60%;
	border-radius: 2px;
	background: #eee;
	transform-origin: 2px 2px;
	transition: transform .2s;
	transform: rotate(0);
}


.scroll-btn._top {
    height: 44px;
	width: 44px;
	pointer-events: auto;
}

.scroll-btn._top .scroll-btn__sign {
	transform: translate(-50%, -100%) scale(.5);
	opacity: 0;
	animation: none;
}

.scroll-btn._top .scroll-btn__arrow {
	top: calc(50% - 7px);
	height: 15px;
	animation: none;
}

.scroll-btn._top .scroll-btn__arrow:before {
	transform: rotate(45deg);
}

.scroll-btn._top .scroll-btn__arrow:after {
	transform: rotate(-45deg);
}

.scroll-btn:hover {
	transform: scale(1);
}

.scroll-btn._top:hover .scroll-btn__arrow {
	animation: bounce-up 2s infinite 1s;
}


@keyframes bounce-down {
  0%, 20%, 80%, 100% {
    transform: translateY(0);
  }
	
  40% {
    transform: translateY(-30%);
  }
	
	50% {
		transform: translateY(15%);
	}
	
  60% {
    transform: translateY(-15%);
  }
}

@keyframes bounce-up {
  0%, 20%, 80%, 100% {
    transform: translateY(0);
  }
	
  40% {
    transform: translateY(30%);
  }
	
	50% {
		transform: translateY(-15%);
	}
	
  60% {
    transform: translateY(15%);
  }
}

@keyframes slide {
	0% {
		background-position: 50% 0%;
	}
	
	25% {
		background-position: -100% 0%;
	}
	
	100% {
		background-position: -100% 0%;
	}
}