#mainbox:after { 
	position: absolute;
	content: '';
	width: 32px;
	height: 32px;
	background: url('../img/arrow.png') no-repeat;
	background-size: 32px;
	right: -16px;
	top: 50%;
	transform: translateY(-50%);
}

.spin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 75px;
	height: 75px;
	border-radius: 50%;
	border: 4px solid #fff;
	background-color: #ff5722;
	color: #fff;
	box-shadow: 0 5px 20px #000;
	font-weight: bold;
	font-size: 22px;
	cursor: pointer;
}

@media (max-width: 1024px) {
  .spin {
    font-size: 16px !important;
  }
}

.spin:active {
	width: 70px;
	height: 70px;
	font-size: 20px;
}

#box {
	transition: all ease var(--spinDuration);
}

#mainbox.animate:after {
	animation: animateArrow 0.7s ease infinite;
}
@keyframes animateArrow {
	0% {right: -16px;}
	100% {right: -25px;}
}