// Scroltop
.scroltop {
	background: var(--bs-secondary);
	bottom: 30px;
	color: #fff !important;
	cursor: pointer;
	opacity: 0;
	height: 50px;
	line-height: 50px;
	margin: 0;
	position: fixed;
	#{$dz-pos-right}: 30px;
	text-align: center;
	width: 50px;
	z-index: 999;
	box-shadow: 0px 10px 20px 0 rgba(0,0,0,0.2);
	border:0;
	border-radius: 50%;
	transform: translateY(100px);
	@include transitionMedium;
	
	&.show{
		transform: translateY(0);
		opacity: 1;
	}
	&:hover i{
		-webkit-animation: scrollTop 0.8s forwards;
		-moz-animation: scrollTop 0.8s forwards;
		animation: scrollTop 0.8s forwards;
	}
	@include respond('phone'){
		width: 35px;
		height: 35px;
		line-height: 35px;
		right: 15px;
	}
}
.icon-up i{
	display:inline-block;
}
@-webkit-keyframes scrollTop {
	49% {
		-webkit-transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes scrollTop {
	49% {
		-moz-transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes scrollTop {
	49% {
		transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}