.webgl_checkbox {
  width: auto !important;
  margin-top: 20px !important; 
  display: inline-block;
  
}

.battledudes_link {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40vw;

  transform: translate(-50%, 0);
}

.battledudes_image {
  width: 100%;
}


@font-face {
  font-family: Karmatic;
  src: url(ka1.ttf);
}

canvas {
  cursor: url("crosshair.png") 16 16, crosshair !important;
}

#myProgress {
  position: absolute;
  bottom: 20px;
  right: 30px;
  width: 10%;
  background-color: #515151;
}

#myBar {
  background-color: #4CAF4F;
  text-align: center; /* To center it horizontally (if you want) */
  /*line-height: 30px; /* To center it vertically */
  color: white; 
  width: 100%;
  height: 18px;
  font-family: Karmatic;

}

#battlepoint-io_728x90 {
  max-width:100%;
  max-height:100%;
}

#gift_long {
  position: absolute;

  width: 728px;
  height: 90px;

  bottom: 5%;
  left: 50%;
  
  margin-left: -364px;

  background-color: white;
}

#gamemode-button-ffa {
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  -webkit-box-shadow: 1px 1px 4px #666666;
  -moz-box-shadow: 1px 1px 4px #666666;
  box-shadow: 1px 1px 4px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  background: #b22b2b;
  padding: 10px 25px 10px 25px;
  border: solid #000000 5px;
  text-decoration: none;
  margin: 10px;
  width: 125px;
}

#gamemode-button-ffa:hover {
  background: #ff6e6e;
  text-decoration: none;
}

#gamemode-button-teams {
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  -webkit-box-shadow: 1px 1px 4px #666666;
  -moz-box-shadow: 1px 1px 4px #666666;
  box-shadow: 1px 1px 4px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  background: #2b4bb2;
  padding: 10px 25px 10px 25px;
  border: solid #000000 5px;
  text-decoration: none;
  margin: 10px;
  width: 125px;
}

#gamemode-button-teams:hover {
  background: #4f90ff;
  text-decoration: none;
}

.gamemodes {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, 0);

}

.transparent {
  opacity: 0.7;
}

#game-container {
  position: absolute;
  width: 100%;
  height: 100%;

  cursor: default; 
}

.progress-bar {
  position: absolute;
  width: 40%;
  pointer-events: none;
  bottom: 5%;

  left: 50%;
  transform: translate(-50%, 0);

  opacity: 0.85;
}

#level-count {
  position: absolute;
  text-align: center;

  width: 50%;
  pointer-events: none;
  bottom: 5%;

  padding: 0px;

  left: 50%;
  transform: translate(-50%, 0);

  font-size: 18px;
  font-weight: 900;

}

#respawn-page {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  background: rgba(0, 0, 0, 0.55);
}

.respawn-box {
  position: absolute;
  width: 400px;

  top: 40%;
  left: 50%;
  margin: -150px 0 0 -200px;
}

.respawn-form {
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  height: 50px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.death-stats {
  position: relative;
  width: 400px;
  height: 200px;
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 1);
  bottom: 10%;
}

.death-stats-time {
  position: absolute;
  top: 65px;
  font-size: 32px;
  font-weight: 900;
  left: 50%;
  transform: translate(-50%, 0);
  border-style: solid;
  border-width: 2px;
  padding: 10px;

}

.death-stats-score {
  position: absolute;
  top: 175px;
  text-align: center;
  width: 100%;
  font-size: 32px;
  font-weight: 900;
}

.death-stats-time-title {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 16px;
  width: 100%;
  text-align: center;
}

#twitter-share-button-respawn {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translate(-50%, 0);
}

#loading-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  background: url('loadingScreen.png') no-repeat center center fixed;
  background-size: 100% 100%;

  font-family: Karmatic, 'Open Sans', sans-serif;
  font-size: 20px;
  color: #FFF;
  text-align: center;
}

.center-screen {
  position: absolute;
  top: 40%;
  left: 50%;

  transform: translate(-50%, -40%);

}

.bottom-screen {
  position: absolute;
  bottom: 20%;
  left: 50%;

  transform: translate(-50%, 0);
}

.update-message {
  position: absolute;
  top: 18%;
  right: 20%;
  width: 20%;
  height: 10%;
  text-align: center;
  font-family: Karmatic, 'Open Sans', sans-serif;
  font-size: 32px;
  letter-spacing: 4px;
  color: #D9D300;
  text-shadow: 2px 2px 8px #000000;
  transform: rotate(12deg);

}

.logo {
  position: absolute;
  width: 60%;
  left: 50%;
  top: 10%;

  margin: 0 0 0 -30%;

}

#login-page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

}

.login-box {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 400px;
  height: 400px;
  max-height: 400px !important;
  margin: -200px 0 0 -200px;
  text-align: center;
}

#disconnect-alert {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #FF0000;
  text-align: center;
  padding: 10px;
}

.leaderboard-self-score {
  position: relative;
  display: block;
  width: 10vw;
  height: 5vh;
  padding: 20px;
  text-align: center;
  top: 20px;

}

#self-score {
  font-family: Karmatic, 'Open Sans', sans-serif;
  font-size: 1.25vw;
  color: #FFF;
  text-align: center;
}

.leaderboard {
  position: absolute;
  top: 20px;
  right: 20px;
  pointer-events: none;
  width: 22vw;
  color: #FFFFFF;

  z-index: 2;
}

.leaderboard-player {
  position: relative;
  display: block;
  margin: 0 0 8px;
  padding: 0 90px 0 40px;
  height: 1.5vh;
  line-height: 20px;
  font-size: 1vw;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;

}

.leaderboard-header {
  color: rgba(256, 256, 256, 0.75);

}

.leaderboard-name {
  position: absolute;
  left: 50%;
  transform: translate(-60%, 0);
}

.player-rank {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.player-name {
  display: block;
  height: 20px;
  line-height: 20px;
}

.player-score {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
}


.login-form {
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  height: auto;
  padding: 40px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  
}

.login-form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: auto;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}

input[type=submit] {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;

  margin: 20px 0 0 0;

}

input[type=submit]:hover, input[type=button]:active, input[type=button]:focus {
  background: #43A047;
}

.skins-button {
	-moz-box-shadow:inset 0px 0px 7px 0px #29bbff;
	-webkit-box-shadow:inset 0px 0px 7px 0px #29bbff;
	box-shadow:inset 0px 0px 7px 0px #29bbff;
	background-color:#2dabf9;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	font-weight:bold;
	padding:13px 40px;
	text-decoration:none;
  text-shadow:1px 1px 1px #263666;
  
  margin: 20px;

}
.skins-button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
	background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
	background-color:#0688fa;
}
.skins-button:active {
	position:relative;
	top:1px;
}

.skin-display {
  width: 30px;
  height: 56px;
  left: 0;
  bottom: 0;
  margin: 0 0 -20px 0;

}

.skin-display-large {
  width: 60px;
  height: 112px;
  left: 0;
  bottom: 0;
  padding: 20px;
}

.skins-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 400px;
  margin: -200px 0 0 -260px;

  -moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;

  background: #000;
  background: rgba(73, 64, 64, 0.95)
}

.skins-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 3;
  background: rgba(188, 188, 188, 0.8);

}

#footer-middle {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

#footer-right {
  position: absolute;
  bottom: 10px;
  right: 10px;
  text-align: right;
  margin: 10px;
}

#footer-left {
  position: absolute;
  bottom: 10px;
  left: 10px;
  text-align: left;
  margin: 10px;
}

#footer-top-left {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 10px;
  text-align: center;
  text-decoration: none !important;
}

.nightpointFont {
  font-family: Karmatic, 'Open Sans', sans-serif !important;
  letter-spacing: 2px;
  text-decoration: none;
  margin: 10px;
  font-size: 16px;
  text-align: center;
}

.seeThrough {
  color: rgba(255, 255, 255, 0.80) !important;
}

.grey {
  color: rgba(255, 255, 255, 0.90) !important;
}

.discord-button {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 42px;
  height: 42px;
  cursor: pointer;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: url('discord-logo.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: contain;
  background-size: contain;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.youtube-button {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 42px;
  height: 42px;
  cursor: pointer;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: url('youtube-logo.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: contain;
  background-size: contain;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.more-games-button {
	-moz-box-shadow:inset 0px 0px 7px 0px #29bbff;
	-webkit-box-shadow:inset 0px 0px 7px 0px #29bbff;
	box-shadow:inset 0px 0px 7px 0px #29bbff;
	background-color:#2dabf9;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:12px 14px;
	text-decoration:none;
  text-shadow:1px 1px 0px #263666;
}

.more-games-button:hover {
	background-color:#0688fa;
}

.more-games-button:active {
	position:relative;
	top:1px;
}


#twitter-widget-0 {
  height: 50% !important;
  max-height: 400px !important;
}

.twitterList {
  position: absolute;
  width: 20%;
  height: 100%;
  left: 25%;

  top: 60%;
  margin: -200px 20% 0 -200px;
  text-align: center;

}

.pixelated {
  image-rendering: optimizeSpeed;           
  image-rendering: -moz-crisp-edges;         
  image-rendering: -webkit-optimize-contrast; 
  image-rendering: -o-crisp-edges;           
  image-rendering: pixelated;                 
  -ms-interpolation-mode: nearest-neighbor;  
}

.hyperlink {
  color: #000;
  text-decoration: none;
  margin: 10px;
  font-size: 14px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.featured-youtuber-text {
  font-size: 32px;
}

.white {
  color: #FFF
}

.copyright {
  color: #FFF;
  margin: 10px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
}

.hidden {
  display: none;
}

#graphics-settings {
  position: relative;
  top: -15px;
}

#graphics-settings label {
  display: inline-block;
  width: 90px;
  height: 20px;
  text-align: center;
  vertical-align: top;
  padding-top: 20px;
}

#graphics-settings input {
  display: block;
  margin: 0 auto -40px;
}

#google-ads-bottom {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  z-index: 3;
}

.block-right {
  position: absolute;
  width: 30%;
  height: 400px;
  left: 47%;
  top: 60%;
  max-width: 400px;

  transform: translate(70%, -50%);

  display: none;
  z-index: 1;
}

.block-center {
  position: absolute;
  pointer-events: all;
  width: 300px;
  height: 250px;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}

.ads-right {
  position: absolute;

  right: 5%;
  top: 50%;
  transform: translate(0%, -50%);

  z-index: 3;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ad-center {
  z-index: 3;

  pointer-events: all;
  width: 300px;
  height: 250px;

  margin: 0.5vw;

  background-color: whitesmoke;
}

.ads-left {
  position: absolute;
  height: 250px;
  width: 300px;

  left: 5%;
  top: 60%;
  transform: translate(0%, -50%);

  z-index: 3;

  background-color: whitesmoke;
}

.google-ads-respawn {
  position: absolute;
  width: 400px;
  height: 300px;
}

#background-ffa {
  background: url('background_ffa.jpeg') no-repeat center center fixed;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

#background-teams {
  background: url('background_teams.jpeg') no-repeat center center fixed;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.blurred {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.yellow {
  color: #FFC800
}

.bold {
  font-weight: bold;
}

body {
  background: #000;

  font-family: 'Open Sans', "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;      

  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  
  image-rendering: optimizeSpeed;           
  image-rendering: -moz-crisp-edges;         
  image-rendering: -webkit-optimize-contrast; 
  image-rendering: -o-crisp-edges;           
  image-rendering: pixelated;                 
  -ms-interpolation-mode: nearest-neighbor;  
  

}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  
}

@media screen and (max-width: 1500px) {
  .update-message {
    font-size: 24px;
  }
}

@media screen and (max-width: 1050px) {
  .twitterList {
    display: none;
  }
  
  .login-box {
    left: 40%;
  }

  .respawn-box {
    left: 40%;
  }

  .update-message {
    display: none;
  }

  #footer-top-left {
    display: none;
  }

  #highscores {
    display: none;
  }
}

@media screen and (max-width: 890px) {
  /* .ads-right {
    display: none;
  } */

  .block-right {
    display: none !important;
  }

}

@media screen and (max-height: 680px) {
  .gamemodes {
    top: 15%;
    z-index: 1;
  }

  .logo {
    top: 5%;
  }

  .update-message {
    display: none;
  }
}

@media screen and (max-height: 560px) {

  #google-ads-bottom {
    display: none !important;
  }

  .webgl_checkbox {
    display: none;
  }

  #graphics-settings {
    display: none;
  }

  /* .login-box {
    left: 50%;
    top: 75%;
  } */

  .twitterList {
    display: none;
  }

  #footer-right {
    display: none;
  }

  #footer-middle {
    display: none;
  }

  #footer-top-left {
    display: none;
  }
}

@media screen and (max-height: 500px) {
  /* .ads-right {
    display: none;
  } */

  .block-right {
    display: none !important;
  }
}

@media screen and (max-width: 860px) {
  /* .ads-right {
    display: none;
  }

  .block-right {
    display: none !important;
  }

  .login-box {
    left: 50%;
    top: 70%;
  }

  .respawn-box {
    left: 50%;
  } */
}

@media screen and (max-width: 700px) {
  .ads-right {
    display: none !important;
  }

  #google-ads-bottom {
    display: none !important;
  }

  .block-right {
    display: none !important;
  }

  .login-box {
    left: 50%;
    top: 75%;
  }

  .respawn-box {
    left: 50%;
  }
}

@media screen and (max-width: 700px) {
  #footer-left {
    display: none;
  }
}

@media screen and (max-height: 520px) {
  #ad_2 {
    display: none;
  }
}