* {border: 0; margin:0; padding:0;}
html { repeat; background-color: #FFFFFF; font-family: "Verdana", "Arial";}

.webgl-content * {position: absolute; width: 100%; height: 100%; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}

#loading-content {
	z-index: 10000;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #3F794A;
	overflow:hidden;
	background: url(background.png);
}

.hud-intro .hud-intro-social .btn-discord, .hud-respawn .hud-respawn-social .btn-discord {
    background-image: url('//lordz.io/images/discord-icon.png');
}

.hud-intro .hud-intro-social .btn-twitter, .hud-respawn .hud-respawn-social .btn-twitter {
    background-image: url('//lordz.io/images/twitter-icon.png');
}

.hud-intro .hud-intro-social .btn-facebook, .hud-respawn .hud-respawn-social .btn-facebook {
    background-image: url('//lordz.io/images/facebook-icon.png');
}

.hud-intro .hud-intro-social .btn-youtube, .hud-respawn .hud-respawn-social .btn-youtube {
    background-image: url('//lordz.io/images/youtube-icon.png');
}

* {
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn {
    position: relative;
    display: inline-block;
    top: 0;
    height: 36px;
    line-height: 36px;
    padding: 0 20px;
    background: #444;
    color: #eee;
    border: 0;
    font-size: 14px;
    vertical-align: top;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 4px 0 #333;
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
}

.btn:hover, .btn:active {
    background-color: #555;
    color: #fff;
}

.btn:active {
    top: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.btn-green {
    background-color: #47950d;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 4px 0 #358300;
}

.btn-green:hover, .btn-green:active {
    background-color: #64b820;
}

.btn-red {
    background-color: #b3353c;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 4px 0 #a1232a;
}

.btn-red:hover, .btn-red:active {
    background-color: #cb575b;
}

.btn-blue {
    background-color: #1d8dee;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 4px 0 #0b7bdc;
}

.btn-blue:hover, .btn-blue:active {
    background-color: #4fa7ee;
}

.btn-purple {
    background-color: #7237e4;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 4px 0 #6025d2;
}

.btn-purple:hover, .btn-purple:active {
    background-color: #8259e4;
}

.btn-twitter {
    background-color: #1b95e0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 4px 0 #0983ce;
}

.btn-twitter:hover, .btn-twitter:active {
    background-color: #0c7abf;
}

.btn-facebook {
    background-color: #4267b2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 4px 0 #3055a0;
}

.btn-facebook:hover, .btn-facebook:active {
    background-color: #365899;
}

.btn-google {
    background-color: #dd4b39;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 4px 0 #cb3927;
}

.btn-google:hover, .btn-google:active {
    background-color: #ba3f31;
}

.btn-discord {
    background-color: #7289da;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 4px 0 #6077c8;
}

.btn-discord:hover, .btn-discord:active {
    background-color: #5a6db0;
}

.btn-youtube {
    background-color: #e52d27;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 4px 0 #d31b15;
}

.btn-youtube:hover, .btn-youtube:active {
    background-color: #ba2521;
}

.hud {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.hud .hud-bottom-left {
    display: flex;
    position: absolute;
    bottom: 20px;
    left: 20px;
    flex-direction: column-reverse;
}

.hud .hud-bottom-left > * {
    margin: 20px 0 0;
}

.hud-intro .hud-intro-corner-bottom-left, .hud-respawn .hud-respawn-corner-bottom-left {
    position: fixed;
    bottom: 20px;
    left: 20px;
    text-align: left;
}

.hud-intro .hud-intro-social, .hud-respawn .hud-respawn-social {
    width: 240px;
    line-height: 24px;
    font-size: 14px;
    color: #777;
}

.hud-intro .hud-intro-social .btn, .hud-respawn .hud-respawn-social .btn {
    display: block;
    float: left;
    margin: 0 10px 0 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}

.hud-intro .hud-intro-more-games {
	position: relative;
	bottom: 5px;
    line-height: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hud-intro .hud-intro-more-games a {
    display: inline-block;
    padding: 0 20px;
    line-height: 40px;
    background: #8473d4;
    color: #eee;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
}

.hud-intro .hud-intro-more-games a:hover, .hud-intro .hud-intro-more-games a:active {
    background: #675aa6;
}