html, body {
	padding: 0;
	margin: 0;
	overflow: hidden;
	
	background: #000000;
	color: white;
}

html, body, canvas {
	touch-action: none;
	touch-action-delay: none;
}

#notSupportedWrap {
	margin: 2em auto 1em auto;
	width: 75%;
	max-width: 45em;
	border: 2px solid #aaa;
	border-radius: 1em;
	padding: 2em;
	background-color: #f0f0f0;
	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	color: black;
}

#notSupportedTitle {
	font-size: 1.8em;
}

.notSupportedMessage {
	font-size: 1.2em;
}

.notSupportedMessage em {
	color: #888;
}

#content-loading {
	z-index: 100;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
}

.dash {
	margin: 0 15px;
	width: 35px;
	height: 15px;
	border-radius: 8px;
	background: #FF2CBD;
	box-shadow: 0 0 10px 0 #FECDFF;
}

.uno {
	margin-right: -18px;
	transform-origin: center left;
	animation: spin 3s linear infinite;  
}

.dos {
	transform-origin: center right;
	animation: spin2 3s linear infinite;
	animation-delay: .2s;
}

.tres {
	transform-origin: center right;
	animation: spin3 3s linear infinite;
	animation-delay: .3s;
}

.cuatro {
	transform-origin: center right;
	animation: spin4 3s linear infinite;
	animation-delay: .4s;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(360deg);
	}
	30% {
		transform: rotate(370deg);
	}
	35% {
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes spin2 {
	0% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(0deg);
	}
	30% {
		transform: rotate(-180deg);
	}
	35% {
		transform: rotate(-190deg);
	}
	40% {
		transform: rotate(-180deg);
	}
	78% {
		transform: rotate(-180deg);
	}
	95% {
		transform: rotate(-360deg);
	}
	98% {
		transform: rotate(-370deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

@keyframes spin3 {
	0% {
		transform: rotate(0deg);
	}
	27% {
		transform: rotate(0deg);  
	}
	40% {
		transform: rotate(180deg);
	}
	45% {
		transform: rotate(190deg);
	}
	50% {
		transform: rotate(180deg);
	}
	62% {
		transform: rotate(180deg);
	}
	75% {
		transform: rotate(360deg);
	}
	80% {
		transform: rotate(370deg);
	}
	85% {
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes spin4 {
	0% {
		transform: rotate(0deg);
	}
	38% {
		transform: rotate(0deg);
	}
	60% {
		transform: rotate(-360deg);
	}
	65% {
		transform: rotate(-370deg);
	}
	75% {
		transform: rotate(-360deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}