@font-face {
  font-family: PragatiRegular;
  src: url(PragatiNarrow-Regular.ttf);
}
@font-face {
  font-family: PragatiBold;
  src: url(PragatiNarrow-Bold.ttf);
}
@font-face {
  font-family: Belligerent;
  src: url(belligerent.ttf);
}





/* ----- Main ----- */
body {
  background-color:#101010;
  background-image: url(../images/website_background.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size:100%;
  color:#e0e0e0;
}



/* ----- Navigator ----- */	
.navbar.bg-dark{
	background-color: #000 !important;
	height:80px;
	padding:0;
		border: 0px solid #000;
	font-family:PragatiRegular;
	-webkit-filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.8));
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.8));

}

#navigator-space {
	z-index: 100;
	width: 100%
	}
.static-top {
	position: absolute;
	top: 0px;
	}
.stick-top {
	position: fixed;
	top: 0px;
	}
#navigator-space .navbar .container {
	padding:0 16px;
	margin-right: auto;
	margin-left: auto;
}
ul .dropdown-menu {
	background-color: #000;
	border: none;
	border-radius: 0 0 16px 16px;
}
ul.navbar-nav {
padding-left:16px;
background-color:#000;
border-radius: 0 0 32px 32px;
}

.nav-link  {
	font-size: 1.8rem;

}

.dropdown-menu a{
	display:block;
	padding: 16px;
	color:#919aa1;
	
}
.dropdown-menu a:hover{
	text-decoration:none;
	color:#FFF;
	background-color:rgba(0,0,0,0);
}
.dropdown-item {
	font-size: 1.2rem;
}
.nav-link .dropdown-item:hover{
	background-color:rgba(0,0,0,0);
}
#navigator-margin {
	
	height:128px;
}
.navbar-toggler {
border:6px solid #000;
background-color:#000;
}
.navbar-toggler:hover {
	border:6px solid #f8bf00;
	background-color:#000;
}

.navbar-toggler:focus
{
	border:6px solid #f8bf00;
    background-color:#f8bf00;
}


.navbar-toggler:focus
{
    outline: none;
    box-shadow: none;
}
	
	
#trailer-video {
	display: flex;
	width: 100%;
	height: 100%;
	min-height:480px;
	flex-direction: column;
	overflow: hidden;
	
	-webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
	border: 0;
	border-radius: 32px;
}


#button-steam {
	float:right;
	padding:10px 34px;
	background-color: #101010;
	border-radius:32px;
	text-decoration:none;
	font-family:PragatiRegular;
	font-size:2.0rem;
	color: #e0e0e0;
	border:6px solid #101010;
		
		-webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
}
#button-steam:hover {
	border:6px solid #f8bf00;
}
#logo-steam
{
	margin-left:10px;
	width:210px;
	height:64px;
}

strong {
  color: #f8bf00;
}

a {
	text-decoration:none;
}

ul {
	list-style:none;

}
p  {
	text-align: justify;

}
br {
	margin-bottom:8px;
}
h2 {
	font-family:PragatiRegular;
	font-size:2.0rem;
	letter-spacing: 1px;
}


.social-logo {
	display:inline-block;
	width: 64px;
	height: 64px;
	margin-left:12px;
	margin-top:18px;
	float:left;
		-webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
}


#discord-logo {

	transition: transform .3s; 
	background: url(../images/social_icons.png) -128px 0px;
	background-size:320px 320px;
	transform: scale(1.1); 
}
#discord-logo:hover {
	transform: scale(1.2); 
	background: url(../images/social_icons.png) 64px 0px;
	background-size:320px 320px;
}

#facebook-logo {
	transition: transform .3s; 
	background: url(../images/social_icons.png) -128px -64px;
	background-size:320px 320px;
	transform: scale(1.1);
}
#facebook-logo:hover {
	transform: scale(1.2); 
	background: url(../images/social_icons.png) 64px -64px;
	background-size:320px 320px;
}

#twitter-logo {
	transition: transform .3s; 
	background: url(../images/social_icons.png) -128px -128px;
	background-size:320px 320px;
	transform: scale(1.1);
}
#twitter-logo:hover {
	transform: scale(1.2); 
	background: url(../images/social_icons.png) 64px -128px;
	background-size:320px 320px;;
}
#youtube-logo {
	transition: transform .3s; 
	background: url(../images/social_icons_2.png) -128px 0px;
	background-size:320px 320px;
	transform: scale(1.1); 
}
#youtube-logo:hover {
	transform: scale(1.2); 
	background: url(../images/social_icons_2.png) 64px 0px;
	background-size:320px 320px;
}


#rebellion-text {
	font-family:Belligerent;
	text-align:right;
	font-size:3rem;
	text-align: center;
	margin-top:32px;
}


#footer-row {
	margin-top:64px;
	padding-top:24px;
	padding-bottom:64px;
background-color:#101010;
border:0;

}

#logo-katharsis {
	width:96px;
	height:96px;
	float:right;
}


.btn-sur5 {
	float:right;
	padding:10px 34px;
	background-color: #101010;
	border-radius:32px;
	text-decoration:none;
	font-family:PragatiRegular;
	font-size:2.0rem;
	color: #e0e0e0;
	border:6px solid #101010;
		
		-webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
}

label {
  margin-top: 8px;
  margin-bottom: 8px;
}

.form-control {
		-webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
}

.btn-sur5 {
	float:right;
	padding:10px 34px;
	background-color: #101010;
	border-radius:32px;
	text-decoration:none;
	font-family:PragatiRegular;
	font-size:2.0rem;
	color: #e0e0e0;
	border:6px solid #101010;
		
		-webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
}
.btn-sur5:hover {
	background-color: #101010;
	border:6px solid #f8bf00;
}
.btn-sur5:active {
	background-color: #f8bf00;
}


.float-right {
	float:right;
}
#QA {
	 --bs-accordion-border-radius: 16px;
	 --bs-accordion-inner-border-radius: 16px;
}
.accordion-header{
  background-color:#101010;
  border-radius: 16px;
}

.accordion-item {
  border: 0px;
  font-size:1rem;
  margin-bottom: 8px;
  border-radius: 16px;
}
.accordion-button {

	border:6px solid #101010;
	border-radius: 16px;
	background-color:#101010;
	color:#FFF;
}
.accordion-button:hover {
	border:6px solid #f8bf00;
}

.accordion-button:not(.collapsed) {
	 background-color: #f8bf00;
	 color:#101010;
	 border: 0px;
	 box-shadow: none;
	 border-radius: 16px 16px 0px 0px;
}
.accordion-button a {
	color:#101010;
}
.accordion-body {
	background-color:#101010;
	color:#FFF;
     border-radius: 0px 0px 16px 16px;
}

.img-sur5 {
	border: 0;
	 border-radius: 32px;
		-webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
		transition: all 0.1s ease-in-out;
}


.figure-sur5 img {
width: 100%;
height: 100%;
}

.figure-sur5  {
position: relative;
	 overflow: hidden;
	 border-radius: 32px;
	 
}

 .figure-sur5 .img-sur5:hover {

	transform: scale(1.05,1.05)
}



.figure-sur5  figcaption{
position: absolute;
bottom: 16px;
right: 24px;
color:#e0e0e0;
  text-shadow: 2px 2px 2px #000000;
}