.icon-play-unicode:before {
    content: "\EA1C";
}
#loading-gui {
    color: #fff;
	display: block;
	z-index: 10;
	position: absolute;
	width: 100%;
	/*height: calc(100vh + 60px);*/
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	font-family: 'Open Sans';
	text-align: center;
	pointer-events: none;
	opacity: 1;
	transition: opacity 2s;
}
#loading-gui.fadeOut {
	opacity: 0;
	pointer-events: none
}
body.preloadcontent #loading-gui { transition: opacity 0.5s; }

#loading-gui.fadeOut * {
	pointer-events: none!important
}

#loading-header {
	font-family: 'Open Sans';
	position: absolute;
	bottom: 75%;
	z-index: 15;
	color: #fff;
	text-align: center;
	padding: 0 10%;
	width: 100%;
	/* left: 50%;
	-webkit-transform: translate(-50%, 50%);
	transform: translate(-50%, 50%);
	*/
	font-size: 40px;
	font-weight: 100;
	text-shadow: 0 0 10px #0f1011
}

@media only screen and (max-height:487px) {
	#loading-header {
		font-size: 6vh
	}
}

@media only screen and (max-aspect-ratio:3/2) {
	#loading-header {
		font-size: calc(3vw + 2vh)
	}
}

#loading-gui h2 {
	font-family: 'Open Sans';
	font-size: 16pt;
	font-weight: 100;
	opacity: 1;
	transition: opacity .5s
}

#loading-gui h2.fadeOut {
	opacity: 0;
	pointer-events: none
}

#loading-gui h2.fadeOut * {
	pointer-events: none!important
}

#loading-gui .icon-play-unicode {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-40%, -50%);
	transform: translate(-40%, -50%);
	font-family: mp-font;
	font-size: 42px;
	text-shadow: 0 0 10px #0f1011;
	pointer-events: auto;
	cursor: pointer
}
#loading-gui form {
	pointer-events: auto;
}
#loading-gui input, #loading-gui button {
	font-size: 1.75em;
	background: rgba(0,0,0,.75);
	padding: 10px;
	color: #fff;
	border: 1px solid #fff;
}

#loading-gui #loading-powered-by {
	position: absolute;
	bottom: 7%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

#loading-gui .loading-label {
    font-size: 10px;
    line-height: 22px;
    letter-spacing: 1.7px;
    /*font-family: IBM Plex Sans;*/
    font-weight: 500;
    color: #f5f4f3;
    text-transform: uppercase;
    text-shadow: 0 0 40px rgb(0 0 0 / 20%);
}

#loading-gui #loading-powered-by #loading-mp-logo {
    width: 150px;
    height: 33px;
}

body.isFree #loading-gui #loading-powered-by #loading-mpembed-logo {
	display: inline-block;
	width: 150px;
	height: 33px;
	background-image: url(/show/img/logo/logo_mpembed_poweredby.png);
}

#loading-gui #loading-logo {
	position: absolute;
	bottom: calc(5vh + 60px);
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 138px;
	height: 44px;
	opacity: 0;
	transition: opacity .5s
}

#loading-gui #loading-logo.fadeIn {
	opacity: 1;
	pointer-events: auto
}

@media only screen and (max-width:600px) {
	#loading-gui #loading-logo {
		width: 25vw;
		height: auto
	}
}

#loading-gui #model-thumbnail {
	position: absolute;
	height: 100%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

#loading-gui #tint {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .5s;
}

#loading-gui #tint:hover {
	background-color: rgba(0, 0, 0, .75)
}

#loading-gui #tint.fadeIn {
	opacity: 1;
	/* pointer-events: auto; */
	pointer-events: none
}

#loading-gui #loading-presented-by {
	font-family: 'Open Sans';
	position: absolute;
	width: 100%;
	top: 60%;
	font-weight: 100;
	word-wrap: break-word;
	opacity: /* 0 */ 1;
	transition: opacity .5s
	color: #fff;
	pointer-events: auto;
}

#loading-gui #loading-presented-by.fadeIn {
	opacity: 1;
	pointer-events: auto;
}

#loading-gui #loading-presented-by div {
	text-transform: uppercase
}

#loading-gui #loading-presented-by h3 {
	font-weight: 100;
	font-size: 34px;
	font-family: 'Open Sans';
	margin: 0
}

@media only screen and (max-height:487px) {
	#loading-gui #loading-presented-by {
		-webkit-transform: scale(.7);
		transform: scale(.7)
	}
}

#loading-gui #circleLoader {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

@media only screen and (max-height:487px) {
	#loading-gui #circleLoader {
		-webkit-transform: translate(-50%, -40%) scale(.7);
		transform: translate(-50%, -40%) scale(.7)
	}
}

body.pw #loader-cont {
	display: none !important;
}
#loginform {
	display: none;
}
body.pw #loginform {
	display: block;
}
#loading-gui #circleLoader #loader-cont {
	display: block;
	height: 100px;
	width: 100px;
	cursor: pointer;
	margin: 0 auto;
	box-shadow: 0 0 5px rgba(0, 0, 0, .8);
	border-radius: 100%;
	position: relative;
	pointer-events: auto;
}

#loading-gui #circleLoader #loader-cont:after {
	position: absolute;
	display: block;
	width: 89px;
	height: 89px;
	top: 6px;
	left: 6px;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, .8);
	content: attr(data-status);
	color: #fff;
	text-align: center;
	border-radius: 100%;
	line-height: 92px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, .8)
}

#loading-gui #circleLoader #loader-cont.en-US {
	font-size: 18px
}

#loading-gui #circleLoader #loader-cont.es-MX {
	font-size: 16px
}

#loading-gui #circleLoader #loader-cont.fr-FR {
	font-size: 14px
}

#loading-gui #circleLoader #loader-cont #svg circle {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0s linear;
	stroke: #fff;
	stroke-width: 4px
}

#loading-gui #circleLoader #loader-cont #svg #bar {
	stroke: #4bcdfc
}

#loading-gui #loading-background {
	position: fixed;
	width: 100%;
	height: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-color: #000;
	pointer-events: auto;
	opacity: 1;
	transition: opacity .5s
}

#loading-gui #loading-background.fadeOut {
	opacity: 0;
	pointer-events: none
}

#loading-gui #loading-background.fadeOut * {
	pointer-events: none!important
}

#loading-gui.quickstart #loading-presented-by {
	position: fixed;
	top: 25%;
	text-shadow: 0 0 10px #0f1011;
	pointer-events: none
}

#loading-gui.quickstart #loading-logo {
	position: fixed;
	bottom: 20%;
	width: 150px;
	height: auto;
	pointer-events: none
}