body {
  margin: 0;
}
.is--splashscreen {
	--font: Helvetica, Arial, sans-serif;
	--text-color: #414042;
	--logo-color: #7E8083;
	--margin: 20px;
	--half-margin: 10px;
	background: white;
	position: absolute;
	z-index: 1000;
	overflow: hidden;
	min-height: 100vh;
	min-width: 100vw;
	display: grid;
	grid-template-areas:
		". . ."
		". center ."
		". . ."
	;
}
.splashscreen--center {
	all: initial;
	grid-area: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/*MS Edge Browser only */
@supports (-ms-ime-align: auto) {
  .splashscreen--center {
        grid-area: auto;
  }
}

.splashscreen--logo{
	margin: var(--margin);
	margin-bottom: var(--half-margin);
	width: auto;
	height: 60px;
}
.splashscreen--title {
	all: initial;
	font-family: var(--font);
	font-size: 30px;
	color: var(--text-color);
	margin: var(--half-margin) var(--margin);
	display: block;
	font-weight: 300;
}
.splashscreen--animation-container {
  border: 3px solid #7e8083;
	box-shadow: 0px 0px 10px 0px #7e8083 inset;
  height: 15px;
  width: 30vw;
  max-width: 330px; 
	min-width: 200px;
	margin: var(--half-margin) var(--margin);
  border-radius: 50px; 
  background: lightgrey;
}
.splashscreen--animation-bar {
  box-sizing: border-box;
  background: var(--primary-color);
  display: block;
  border-radius: 50px;
  height: 100%;
}
.splashscreen--animation {
	width: 15px;
	animation: progress-bar 5s;
  width: 90%;
}
@keyframes progress-bar {
	0% {width: 15px;}
  100% {width: 90%;}
}
.splashscreen--message-container {
	margin: var(--margin);
	margin-top: var(--half-margin);
}
.splashscreen--done,
.splashscreen--message {
	font-weight: 100;
  font-size: 16px;
	font-family: var(--font);
	color: var(--text-color);
	display: block;
	text-align: center;
	line-height: 1.5;
}
.splashscreen--message__fade-out {
  animation: message-fade-out .5s;
  opacity: 0;
}
@keyframes message-fade-out {
  from {opacity: 1;}
  to {opacity: 0;}
}
.splashscreen--message__fade-in {
  animation: message-fade-in .5s;
  opacity: 1;
}
@keyframes message-fade-in {
  from {opacity: 0;}
  to {opacity: 1;}
}
.splashscreen__transition-effect {
	animation: fade-out 1s;
	opacity: 0;
}
@keyframes fade-out {
	from {
			opacity: 1;
	}
	to {
			opacity: 0;
	}
}