.btn-up {
  position: fixed;
  background-color: #143E7C; /* 11325c */
  right: 20px;
  bottom: 20px;
  border-radius: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-in-out;
  width: 52px;
  height: 52px;
  opacity: 0.9;
}

.btn-up::before {
  content: "";
  width: 40px;
  height: 40px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  background-image: url('data:image/svg+xml;utf8,<svg data-name="1-Arrow Up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m26.71 10.29-10-10a1 1 0 0 0-1.41 0l-10 10 1.41 1.41L15 3.41V32h2V3.41l8.29 8.29z"/></svg>');position: absolute;width: 16px;height: 16px; -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */ filter: invert(100%);
}

.btn-up_hide {
  display: none;
}

.btn-up_hiding {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
	.btn-up:hover {
	background-color: #446A9C; /* 336699 */
	opacity: 0.4;
	transform: translateY(5px);
	}
}