.scrollbutton {
	width: 60px;
	height: 60px;
	background-color: #009dd0;
	position: absolute;
	cursor: pointer;
	right: 250px;
	top: 0;
	z-index: 2;
}
.scrollbutton:before {
	transition: height .3s;
}
.scrollbutton:after {
	background-repeat: no-repeat;
	background-position: center;
	transition-duration: .3s;
}

.scrollbutton.up:before {
	content: '';
	position: absolute;
	background-color: #fff;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
}
.scrollbutton.up:hover:before {
	height: 100%;
}
.scrollbutton.up:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-image: url(/static/img/arrow-up-white.svg);
}
.scrollbutton.up:hover:after {
	background-image: url(/static/img/arrow-up-black.svg);
}
.scrollbutton.up .text {
	position: absolute;
	right: -90px;
	top: 24px;
	color: #fff;
	font-size: 14px;
	display: none;
}

.scrollbutton.down {
	width: 50px;
	height: 50px;
}
.scrollbutton.down:before {
	content: '';
	position: absolute;
	background-color: #fff;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
}
.scrollbutton.down:hover:before {
	height: 100%;
}
.scrollbutton.down:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(/static/img/arrow-down-white.svg);
}
.scrollbutton.down:hover:after {
	background-image: url(/static/img/arrow-down-black.svg);
}

@media screen and (max-width: 1024px) {
	.scrollbutton.up {
		right: 33px;
		width: 50px;
		height: 50px;
	}
}