@import url('https://fonts.googleapis.com/css2?family=Aldrich&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Istok+Web:ital,wght@0,400;0,700;1,400;1,700&family=Orbitron:wght@400..900&display=swap');
@import url("fontawesome-all.min.css");

div.container {
	width: 800px;
}

p { font-size: 16px; }
li { font-size: 16px }

html, body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

body {
  background-color: black;
  /*background-image: url('images/bg.jpg'); 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;*/
  color: white;
  padding-top: 15px;
}
.list-group {
  box-shadow: 0px 11px 23px 5px rgba(0, 0, 0, 0.34);
}
.list-group-item {
  border: 1 1 1 1;
  border-color: rgba(255, 255, 255, 0.3);
  background: linear-gradient(130deg, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
  //filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000', GradientType=1);
     background-color: rgba(0, 0, 0, 0.6);

}
.btn-toolbar {
  margin-top: 10px;
}
img {
  float: right;
  margin: 6px;
  margin-top: 3px;
  margin-left: 10px;
  border: 1px solid white;
  opacity: 1.0;

}
/* ==== SOME BOOTSTRAP MODS/STYLING ==== */
.btn-default {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.2);
}
.img-rounded,
.btn,
.label {
  border-radius: 6px;
}
.btn {
  padding: 6px 18px;
}
a {
  color: #8888FF;
}
.dropdown-menu > li > a {
  color: #cccccc;
}
.dropdown-menu {
  background-color: rgba(0, 0, 0, 0.8);
}
.dropdown-menu .divider {
  background-color: #555;
}
body {
  /* GRADIENT BG */
  /* ff3.6+ */
  /* safari4+,chrome */
  /* safari5.1+,chrome10+ */
  /* opera 11.10+ */
  /* ie10+ */
  //background: linear-gradient(45deg, #FFFFFF 0%, #C7C7C7 100%);
  /* w3c */
  //filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000', GradientType=1);
  /* ie6-9 */
}
/* ==== FONTS ==== */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aX8.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM73w5aX8.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVc.ttf) format('truetype');
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  padding-bottom: 12px;
}
html,
body {
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased !important;
}
.active a {
  color: #999999;
}

/* Wrapper */

	@-moz-keyframes wrapper {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes wrapper {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-ms-keyframes wrapper {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes wrapper {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	#wrapper {
		-moz-animation: wrapper 3s forwards;
		-webkit-animation: wrapper 3s forwards;
		-ms-animation: wrapper 3s forwards;
		animation: wrapper 3s forwards;
		height: 100%;
		left: 0;
		opacity: 0;
		position: relative;
		top: 0;
		width: 100%;
	}


* BG */

	#bg {
		-moz-animation: bg 60s linear infinite;
		-webkit-animation: bg 60s linear infinite;
		-ms-animation: bg 60s linear infinite;
		animation: bg 60s linear infinite;
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	/* Set your background with this */

		background: #050707 url("./images/bg.jpg") bottom left;
		background-repeat: repeat-x;
		height: 100%;
		left: 0;
		opacity: 1;
		position: fixed;
		top: 0;
	}

	@-moz-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	#bg {
		background-size: 2250px auto;
		width: 6750px;
	}

  

@keyframes scrollBg {
  from {
    background-position: 0 100%;
  }
  to {
    background-position: -2250px 100%;
  }
}

.scroll-bg {
  background: #050707 url("./images/bg.jpg") bottom left repeat-x;
  background-size: 2250px auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: scrollBg 90s linear infinite;
  
  /* crucial for scroll: */
  z-index: 0;
 
  pointer-events: none;
}

#wrapper {
  position: relative;
  z-index: 1;
}