/* ==========================================================================
   #Back to Top styles - start
   ========================================================================== */

#qodef-back-to-top {
	position: fixed;
	width: 85px;
	height: 85px;
	right: 25px;
	bottom: 90px;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 10000;
	mix-blend-mode: difference;

	.qodef-back-to-top-icon {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: $heading-font;
		width: 100%;
		height: 100%;
		font-size: 10px;
		line-height: 1em;
		font-weight: 700;
		color: #fff;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		background-color: transparent;
		border: 1px solid #fff;
		border-radius: 50%;
		overflow: hidden;
		transition: $color-transition, $background-color-transition, $border-color-transition;

		* {
			display: block;
			line-height: inherit;
		}
	}

	svg {
		display: block;
		width: 18px;
		height: auto;
		fill: currentColor;
	}

	&:hover {

		.qodef-back-to-top-icon {
			color: #000;
			background-color: #fff;
		}
	}

	&.qodef--off {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.15s ease, visibility .0s .15s;
	}

	&.qodef--on {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease;
	}
}

/* ==========================================================================
   #Back to Top styles - end
   ========================================================================== */