body {
	margin: 0;
}

.loader {
	background-color: #2d2d32;
	height: 100vh;
	width: 100vw;
	min-height: 38em;
}

.loader--hide {
	opacity: 0;
	display: none;
}

.loader img {
	position: absolute;
	top: 10%;
	left: calc(50% - 12em);
	left: 50%;
	transform: translateX(-50%);

	width: 24em;
	height: 24em;
}

.welcome-progress-bar-container {
	width: 20em;
	position: absolute;
	top: calc(15% + 24em);
	left: 50%;
	transform: translateX(-50%);
}

.v-progress-linear {
	background: 0 0;
	margin: 1rem 0;
	overflow: hidden;
	position: relative;
	width: 100%;
	/* s */
	height: 3px;
}

.primary {
	background-color: #2db84c !important;
	border-color: #2db84c !important;
}

.v-progress-linear__background {
	bottom: 0;
	left: 0;
	position: absolute;
	top: 0;
	transition: .3s ease-in;
	/* s */
	height: 3px;
	opacity: 0.3;
	width: 100%;
	border-radius: 2px;
}

.v-progress-linear__bar,
.v-progress-linear__bar__determinate {
	height: inherit;
	transition: .2s;
}

.v-progress-linear__bar {
	position: relative;
	width: 100%;
	z-index: 1;
}

.v-progress-linear__bar__indeterminate .long,
.v-progress-linear__bar__indeterminate .short {
	bottom: 0;
	height: inherit;
	left: 0;
	position: absolute;
	top: 0;
	width: auto;
	will-change: left, right;
}

div.v-progress-linear__bar__indeterminate--active .long {
	animation: h;
	animation-duration: 2.2s;
	animation-iteration-count: infinite;
}

div.v-progress-linear__bar__indeterminate--active .short {
	animation: i;
	animation-duration: 2.2s;
	animation-iteration-count: infinite;
}

/* 
@keyframes h {
	100% {
		transform: rotate(1turn);
	}
} */

@keyframes h {
	0% {
		left: -90%;
		right: 100%;
	}
	60% {
		left: -90%;
		right: 100%;
	}
	100% {
		left: 100%;
		right: -35%;
	}
}

@keyframes i {
	0% {
		left: -200%;
		right: 100%;
	}
	60% {
		left: 107%;
		right: -8%;
	}
	100% {
		left: 107%;
		right: -8%;
	}
}

@media only screen and (max-width: 600px) {
	.welcome-progress-bar-container {
		width: 16em;
		top: calc(20% + 18em);
	}
	.loader img {
		top: 15%;
		width: 18em;
		height: 18em;
	}
}