@charset "utf-8";
/* CSS Document */

/*
 * Globals
 */
 
:root {
	--primary-color: rgba( 19, 30, 48, 1);
	--secondary-color:#ffd249;
	--satory-color:rgba(69, 97, 212);
	--devius-color:rgba(255, 210, 73);
	--freiheit-color:rgba(147, 23, 23);
}

::-webkit-scrollbar {width: 9px;}
::-webkit-scrollbar-track {background: #555;}
::-webkit-scrollbar-thumb {background: #999;}

/*
 * Preload
 */
 
 .preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: var(--primary-color);
  z-index: 9999;
}

.preloader__image {
  position: relative;
  top: 38%;
  left: 38%;
  width: 24%;
  height: 24%;
}

.loaded_hiding .preloader {
  transition: 0.3s opacity;
  opacity: 0;
}

.loaded .preloader {
  display: none;
}


/* Custom default button */
.btn {
	border-radius: 4rem;
	margin-top: 1px;
	font-weight:800;
    padding: 0.8rem 2.5rem;
	transition: 0.5s;
}

.btn-lg { 
  font-size: 2rem;
}

.btn-sm { padding: 0.25rem 1rem; }

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  text-shadow: none; /* Prevent inheritance from `body` */
}

.btn-primary, .btn-primary:focus { 
  color: var(--primary-color);
  border: 2px solid #fff;
  background-color:#fff;
}

.lang:hover > a, 
.login:hover > a { 
  color: #666!important; 
}

.btn-primary:hover{
  color: var(--primary-color)!important;
  background-color: var(--secondary-color)!important;
  border: 2px solid var(--secondary-color)!important;
}

.btn-primary:focus {
	color: var(--primary-color);
	outline: none;
    box-shadow: 0 0 0 3px var(--secondary-color);
}

.btn-secondary {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
}
.btn-secondary:hover {
  color: #fff;
  background-color: transparent;
  border: 2px solid var(--secondary-color);
}


.btn-light {
  color:var(--primary-color);
  background-color: #fff;
  border-color: #fff;
}
.btn-light:hover {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}

.btn-check:focus + .btn-secondary, .btn-secondary:focus {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
  box-shadow: 0 0 0 0.1rem rgba(130, 138, 145, 0.5);
}
.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #565e64;
  border: 0;
}
.btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: none;
}


.btn-data{
	position:relative;
	z-index:1;
	border-radius: .5rem;
	background-color:var(--primary-color);
	border:#fff solid 2px;
	color:#fff!important;
	transition:.7s;
	width:70%;
	white-space:normal;
}

.btn-data:hover{ background-color: #fff; color:var(--primary-color)!important; }

.btn-data:hover, btn-data:checked + btn-data:focus, .btn-data:active + .btn-data:focus, .btn-data:active:focus, .btn-data.active:focus, .btn-data.dropdown-toggle.show:focus{
	border-color:var(--secondary-color)!important;
	box-shadow: none;
	width: 90%;
}

.data{ 
    margin: -.5rem auto!important;
	z-index:0;
	width:100%;
	-webkit-transform: scaleY(0);
	-ms-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
}

.btn-data:active ~ .data,
.btn-data:focus ~ .data,
.data:hover {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
}


/*
 * Base structure
 */

@font-face {
    src: url(../fonts/Mont-Black.ttf); 
    src: url(../fonts/Mont-Bold.ttf);
    src: url(../fonts/Mont-ExtraLight.ttf);
    src: url(../fonts/Mont-Heavy.ttf);	
    src: url(../fonts/Mont-Light.ttf);	
    src: url(../fonts/Mont-Regular.ttf);
    src: url(../fonts/Mont-SemiBold.ttf);	
    src: url(../fonts/Mont-Thin.ttf);
    src: url(../fonts/BeaufortforLOL-Bold.woff.ttf);
}

body {
  font-family: Mont, Verdana, Geneva, sans-serif; 
  background-color: var(--primary-color)!important;
  background: url(../img/bg.jpg) no-repeat;
  background-size: cover;
  background-position: top center;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, p.logo {
   font-family: BeaufortforLOL, Georgia, 'Times New Roman', Times, serif;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, p{
	text-shadow: 1px 1px 5px black;
}

p { font-weight:500; }
.lead { font-size: 1.3rem}


ul.info > li {
  color: var(--secondary-color);
  margin-bottom:.5rem;
 }
ul.info > li > p { margin:0; padding:0; }

main hr {
	background-color: rgba(255, 255, 255, .3);
}

.cover-container {
  max-width: 42em;
  margin:auto;
}

.overlay {
    position: relative;
    min-height: 90vh;
    display: block;
}

hr { background: var(--secondary-color); opacity: 1;} 

a { 
  color: var(--secondary-color);
  transition: 0.3s;
}
a:hover { color: #fff; }


#toTop {
  width:60px;
  height:60px;
  border:none;
  position:fixed;
  z-index:999;
  bottom:.5rem; 
  right:.5rem;
  cursor:pointer;
  display:block;
  background:url(../img/up.svg) no-repeat;
  background-size: cover;
  opacity: .7;
  transition: 0.3s;
}

#toTop:hover, .btn-close:hover{
	opacity: 1;
 /*   filter: invert(0%) sepia(77%) saturate(2055%) hue-rotate(318deg) brightness(105%) contrast(105%);	*/
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(200%);
	transition-timing-function: ease-out;
}


/*
 * Carousel
 */

.carousel-indicators [data-bs-target] {
  width: 20px;
  height: 20px;
  border-radius: 50%; 
  margin-bottom: -2rem;
}

.carousel-indicators .active {
  background-color:var(--secondary-color);
}

.carousel-item { height: 40rem; }

.carousel-control-prev-icon {
    background-image: url(../img/arrow.svg);
	width:70px;
	height:70px;
}

.carousel-control-next-icon {
    background-image: url(../img/arrow.svg);
	width:70px;
	height:70px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform:rotate(180deg);
}

.msg, .no-overflow-header{
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	display: box;
	word-wrap: break-word;
	-webkit-box-orient: vertical;
	box-orient: vertical;
}


.no-overflow-header{
	-ms-line-clamp: 2;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.msg{
	-ms-line-clamp: 5;
	-webkit-line-clamp: 5;
	line-clamp: 5;
}

.date{
	color:rgba(255, 210, 73, 1)!important;
}

.satory-msg-bg .msg-header{
	background-color:rgba(69, 97, 212, .5);
}

.devius-msg-bg .msg-header{
   background: rgba(255, 210, 73, .7);

}

.freiheit-msg-bg .msg-header{
   background: rgba(147, 23, 23, .6);
}

.satory-msg-bg, .devius-msg-bg, .freiheit-msg-bg{
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 5px;
}

.satory-msg-bg{
   background: rgba(69, 97, 212, .2);
}

.devius-msg-bg{
   background: rgba(255, 210, 73, .2);

}

.freiheit-msg-bg{
   background: rgba(147, 23, 23, .2);
}


 
/*
 * TEXT
 */ 

.txt-highlight { color: var(--secondary-color); }
 

/*
 * Header
 */
.navbar{
	position:relative;
	z-index: 999;
	display:block;	
}


.bg-dark { 
	 background-color: rgba(19, 30, 48, 1)!important; 
  }
  
.navbar-nav {
  font-weight:800;
}

.navbar-dark .navbar-nav .nav-link {
	color:#fff;
}


/*.nav-link:hover{color:var(--primary-color)!important; background-color:#FFF;}*/

.fullmenu {
	 background-color: rgba(19, 30, 48, 1); 
	-webkit-box-shadow: 2px 1px 0px 2px rgba(255, 210, 73, 1));
    -moz-box-shadow: 2px 1px 0px 2px rgba(255, 210, 73, 1);
     box-shadow: 2px 1px 0px 2px rgba(255, 210, 73, 1);
	 margin-left: -8.8rem;
	 margin-top: -.5rem;
	 padding: .5rem;
}

/*.dropdown-menu { 
  border-radius:0!IMPORTANT;
}

.nav-item > .dropdown { width: 20%!important; }*/

.dropdown-item { font-size: .9em; font-weight:600; }
.dropdown-item:hover { color:#000;background-color:var(--secondary-color); }


.angle-dark {
  position: absolute;
  z-index:999;
  float: left;
  margin: 0 -13.65rem;
  width: 0; 
  height: 0;
  border-top: 78px solid var(--primary-color);
  border-left: 78px solid transparent;
}
.angle-yellow {
  position: absolute;
  z-index:99;
  float: left;
  margin: 0 -13.65rem;
  width: 0; 
  height: 0;
  border-top: 81px solid var(--secondary-color);
  border-left: 78px solid transparent;
}

/*
.navbar:before{
  content: "";
  position: absolute;
  z-index:-100;
  background:url(../img/angle-before.svg) no-repeat;
  width: 200px;
  height: 78px;
  left:-13.2rem;
 top:-1px;
}*/

.fullmenu:after{
  content: "";
  position: absolute;
  z-index:99;
  background:url(../img/menu-right.svg) no-repeat;
  width: 310px;
  height: 78px;
  right:-10.825rem;
  top:-1px;
}


.navbar-dark .navbar-toggler-icon{
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") }
	
.navbar-dark .navbar-toggler {
    color: rgba(255, 210, 73, 1);
    border-color: rgba(255, 255, 255, .1);
}

.login {   
    /*background: rgba(255, 210, 73, 1);*/
    position: absolute;
    z-index:999;
    top: -1px;
    right: -3.4rem;
	padding: 0 0 0 .7rem;
}

.login > a { color: var(--primary-color)!important; }

.login .dropdown-toggle:after{ color: var(--primary-color)!important; }

/*
.log_bg {
  position: absolute;
  z-index:-1000;
  top: 0;
  right: -20px;
  width: 100px; 
  height: 60px;
  transform: skew(-48deg);
  background: rgba(255, 210, 73, 1);
}*/

.register {
    position: absolute;
    z-index:990;
    bottom: 12px;
    right: -.35rem;
	/*background: rgba(19, 30, 48, 1);*/
	padding: 0 0 0 .7rem;
}
/*
.register:after {
  content: "";
  position: absolute;
  z-index:-100;
  margin: -2.5rem 4.10rem;
  width: 0; 
  height: 0;
  border-top: 40px solid var(--primary-color);
  border-right: 39px solid transparent;
}*/

.lang { 
    color: #000; 
    position: absolute;
    z-index:999;
    top: -3px;
    right: -9.55rem;
	padding: 0 -.9rem;
	font-size: .9em;
}

/*
.lang_bg {
  position: absolute;
  z-index:-9999;
  top: 0;
  right: -.5rem;
  width: 86px; 
  height: 34px;
  transform: skew(-48deg);
  background: #fff;	
	
}*/


.dropdown-toggle {
	margin-right: .5rem;
}

.dropdown-toggle.show::after{
	content: "−";
}

.dropdown-toggle::after {
	width: 0px;
	height: 0px;
	background: var(--secondary-color);
    content: "+";
    border: none;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	color:var(--secondary-color);
	vertical-align: 0;
}
/*
.dropdown-menu.show!important{ 
	-webkit-transform: scaleY(1);
	-ms-transform: scaleY(1);
	transform: scaleY(1);
}

.dropdown-menu!important{
	-webkit-transform: scaleY(0);
	-ms-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
}*/


/* Stream */

.stream {
	margin-left: 1rem;
	margin-right: -.8rem;
	margin-top: .2rem;
}


.offline {
    position: absolute;
	border-radius: 50%;
    height: 14px;
    opacity: 20%;
    width: 14px;
	margin: .25rem -.35rem;
    background: radial-gradient(circle at 15% 30%, red, darkred); 
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
}

@keyframes pulsate {
    0% {
      transform: scale(.1);
      opacity: 20%;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2);
      opacity: 20%;
    }
}


.online {
	position: absolute;
	border-radius: 50%;
    height: 14px;
    opacity: 20%;
    width: 14px;
	margin: .25rem -.35rem;
    background: radial-gradient(circle at 15% 30%, lightgreen, darkgreen); 
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
}

@keyframes pulsate {
    0% {
      transform: scale(.1);
      opacity: 20%;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2);
      opacity: 20%;
    }
}

.streams > hr {
	margin: 0 1rem 1rem 1rem;
}

.streams .row a{
	text-decoration:none;
	color: rgba(255, 255, 255);
}

.streams .row a:hover{
	text-decoration:none;
	color: var(--secondary-color);
}

.streams img {
	padding: 1rem 0;
}


.streams img {
	width: 100%;
	height: auto;
}

.streams p {
	text-align:left;
}

.streams small{
    color: rgba(255, 255, 255, .7);
}

.strm-view:after{
	content: "•";
    margin: 0 4px;
}

/*
 * Chat
 */

.chat {
	position: fixed;
	z-index:99;
	bottom: 2.95rem;
    right: 5.5rem;
    width: 7.5rem;
    height: 3.5rem;
}
 
.chat .dropdown-toggle, .chat .btn {
	height: 3rem;
	border-radius: .5rem;
	border:#fff solid 3px;
	color:#fff!important;
	transition:.7s;
	white-space:normal;	
	cursor:pointer;
	display:block;
	text-decoration: blink;
    background-color: #0b182c;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 32px;
}

.chat .dropdown-toggle{
    z-index: 999;
    position: relative;
    padding: 0.3rem 1.5rem 0.5rem 1.2rem;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 21px;
}

.chat .data .btn{ 
   float: left;
   padding: .5rem .9rem;
}

.chat .btn:hover{ background-color: #fff; color:var(--primary-color)!important; }

.chat .btn:hover, 
.chat .btn:checked + .chat .btn:focus, 
.chat .btn:active + .chat .btn:focus, 
.chat .btn:active:focus, 
.chat .btn.active:focus, 
.chat .btn.show:focus{
	border-color:var(--secondary-color)!important;
	/* box-shadow: none; */
	transform:scaleX(110%);
}

.chat .dropdown-menu { border:none; }

.chat .data{
	z-index:0;
	background-color: transparent;
	padding:0;
	margin: .1rem 0!important;
	width: 50rem;
	height: 35rem;
}


/* 	СТИЛИ ДЛЯ ЛЕВОГО БАРА С СОЦСЕТЯМИ */

.SocialsMenu__cont_Left {
    position: fixed;
    z-index: 10;
    right: 1rem;
    top: 50%;
    margin-top: -230px;
    padding: 153px 0;
    width: 25px;
    height: 173px;
}
.SocialsMenu__cont_Left:after {
    bottom: 15px;
    transform: rotate(180deg);
}
.SocialsMenu__cont_Left:before {
    top: -10px;
}
.SocialsMenu__cont_Left:after, .SocialsMenu__cont_Left:before {
    content: "";
    position: absolute;
    left: 5px;
    width: 15px;
    height: 123px;
    background: url(https://ru.4gstatic.com/v1.0.332/ec8ad5899f0c444e81ee56ce40bb4d90.svg);
    background-size: 15px 123px;
	bottom: -163px;
}
.SocialsMenu__link {
    font-size: 0;
    display: block;
    width: 25px;
    height: 25px;
    margin-bottom: 18px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 20px;
    transition: opacity .2s ease-in-out;
    outline: none;
}

.Icon__Icon {
    display: inline-block;
}

.Icon__Icon svg {
    display: block;
}

.Icon__theme-dark {
    fill: #fff;
}

.SocialsMenu__link+.SocialsMenu__link {
    margin-top: 8px;
}
.SocialsMenu__link:focus, .SocialsMenu__link:hover {
    opacity: .5;
}




/* 
 * First screen 
 */

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
	font-size: 3.5rem;
  }
}

.logo { 
    max-width: 90%;
 	transition: 0.5s;
 }

.logo:hover {
	filter: brightness(150%);
	transition-timing-function: ease-out;
}

.x1-server, .x5-server, .x20-server {
  position:relative;
  display:block;
  width: 152px; 
  height: 156px;
  padding: 1.5rem;
  transform:scale(95%,95%);
  z-index:9;
}

.x1-server:hover, .x5-server:hover, .x20-server:hover {
  transform:scale(105%,105%);
}

.serverIdicator span{
	font-size:2rem;
	font-weight:700;
	letter-spacing: .05rem;
}

.x20-server {
	line-height: 1.3;
}

.serverIdicator a{
	color: #fff;
	text-decoration:none;
	font-weight:500;
	position:relative;
	top: 0;
    left:0;
}
.serverIdicator a:hover{
	color: var(--secondary-color);
}

.x1-server {
  background: url(../img/x1_bg.png) no-repeat;
  background-size:contain;	
} 

.x5-server { 
  background: url(../img/x5_bg.png) no-repeat;
  color: var(--primary-color)!important;
  background-size:contain;

}
.x5-server:hover{ color: #fff!important; } 

.x20-server { 
  background: url(../img/x20_bg.png) no-repeat;
  background-size:contain;
} 

.bowl {
  position: relative;
  top: -110%;
  left:-22%;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  box-shadow: inset 0 -5px 0 0 rgba(19, 30, 48 0.5), inset 0 -20px 5px 0 rgba(19, 30, 48 0.2), inset -15px 0 5px 0 rgba(19, 30, 48, 0.1), inset 15px 0 5px 0 rgba(19, 30, 48 0.1);
  background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(19, 30, 48 0.65) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(19, 30, 48 0.65) 100%);
  background: radial-gradient(ellipse at center, rgba(19, 30, 48, 0) 0%, rgba(19, 30, 48 0) 76%, rgba(19, 30, 48 0.65) 100%);
    transform:scale(86%,86%);
  z-index:-2;
}
.bowl:before {
  left:0;
  overflow: hidden;
  border-radius: 50%;
  content: "";
  box-shadow: inset 0 -5px 0 0 rgba(19, 30, 48, 0.2), inset 0 -20px 5px 0 rgba(19, 30, 48, 0.07), inset -15px 0 5px 0 rgba(19, 30, 48, 0.05), inset 15px 0 5px 0 rgba(19, 30, 48, 0.05);
  background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 60%, rgba(19, 30, 48, 0.65) 81%, black 100%);
  background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 60%, rgba(19, 30, 48,, 0.65) 81%, #131e30 100%);
  background: radial-gradient(ellipse at center, rgba(19, 30, 48, 0) 0%, rgba(19, 30, 48, 0) 60%, rgba(19, 30, 48, 0.65) 81%, #131e30 100%);
  position: absolute;
  width: 150px;
  height: 150px;
  z-index: 1;
}
.bowl:after{ 
  position:absolute;
  top:0;
  left:0;
  background: url(../img/x1_bg.png) no-repeat;
  background-size:contain;	
  width: 300px; 
  height: 300px;
}


.bowl .inner {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.65) 100%);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.bowl .inner:before {
  content: "";
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  position: absolute;
  right: 40%;
  top: 60%;
  z-index: 1;
}
.bowl .inner:after {
  content: "";
  width: 20px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  position: absolute;
  right: 30%;
  top: 15%;
  transform: rotate(-20deg);
  z-index: 1;
}
.bowl .fill {
  -webkit-animation-name: fillAction;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.2, 0.6, 0.8, 0.4);
  -webkit-animation-duration: 4s;
  -webkit-animation-fill-mode: forwards;
}
.bowl .waveShape {
  -webkit-animation-name: waveAction;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: .7s;
  width: 300px;
  height: 150px;
  
}

.x1-server .bowl .waveShape { fill: var(--satory-color); }

.x5-server .bowl .waveShape { fill: var(--devius-color); }

.x20-server .bowl .waveShape { fill: var(--freiheit-color); }
.x20-server .bowl{
  top: -115%;
  left:-25%;
}

@-webkit-keyframes fillAction {
  0% {
    -webkit-transform: translate(0, 150px);
  }
  100% {
    -webkit-transform: translate(0, 10px);
  }
}
@-webkit-keyframes waveAction {
  0% {
    -webkit-transform: translate(-150px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}







/* Servers */

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    border-color: #999 #999 #fff;
	opacity:1;
    color: #fff;
	font-weight:600;
}

.nav-link.active{ padding:.7rem 2rem; }

.nav-tabs .nav-link {
    margin-bottom: -1px;
	opacity: .6;
    border: 1px solid rgba(255, 255, 255, .5);
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    color: #fff;
	transition:.7s;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    transition:.7s;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-color: #fff!important; opacity: 1!important; }

#satory-tab{
	background: #4561d4;
}

#devius-tab{
	background: var(--secondary-color);
	color:var(--primary-color);
}

#freiheit-tab{
	background: #931717;
}

.description{
	  overflow: hidden;
	  min-height: 25rem;
}


.description-satory, .description-devius, .description-freiheit{
  box-shadow: inset 0 0 3rem 2rem rgba(19, 30, 48, 1)!important;
}

.description-satory{
  background: url(../img/x1-satory_bg.jpg) no-repeat;
  background-size: cover;
  background-position: top;
  box-shadow: inset 0 0 3rem 3rem rgba(19, 30, 48, 1)!important;  
}

.description-devius{
  background: url(../img/x5-devius_bg.jpg) no-repeat;
  background-size: cover;
  background-position: top;
  box-shadow: inset 0 0 3rem 3rem rgba(19, 30, 48, 1)!important;  
}

.description-freiheit{
  background: url(../img/x20-freiheit_bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 3rem 3rem rgba(19, 30, 48, 1)!important;
}


/* News & Forum */
.news{
  background: url(../img/news_bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 3rem 3rem rgba(19, 30, 48, 1)!important;
}

img.news{
	width: 100%;
	height:auto;
	border-radius: 5px 5px 0 0;
}


.forum{
  background: url(../img/forum_bg.jpg) no-repeat;
  background-size: cover;
  background-position: top;
  box-shadow: inset 0 0 3rem 3rem rgba(19, 30, 48, 1)!important;
}

img.forum {
	width: 140px;
	height:140px;
    border-radius: 50%;
	background:var(--secondary-color);
}


.forum .msg-header{
	margin: 1.5rem -1.5rem;
}


/*  
 * Footer
 */
 
 p.logo {
   text-align: center;
   color: #fff;
   font-size: 1.3rem;
}

/*
 * Modals
 */
 
.modal-header, .modal-footer {
	border:none;
}

.btn-close {
    color: #fff;
    background: url(../img/free-icon-cancel-button-1502.svg) center/2.1em auto no-repeat;
    border-radius: 50%;
	opacity:1;
	margin-right:.2rem!important;
	margin-top:-2rem!important;
	transition: 0.3s;
}

.modal .bg-dark{
	background-color:rgba(19, 30, 48, .9)!important;
}

#serversModalToggle .satory-msg-bg{
	background:url(../img/x1-satory_bg.jpg) no-repeat center;
	background-size:cover;
	box-shadow: inset 0 0 100rem 100rem rgba(69, 97, 212, .1)!important;
}

#serversModalToggle .devius-msg-bg{
	background:url(../img/x5-devius_bg.jpg) no-repeat top left;
	background-size:cover;
	box-shadow: inset 0 0 100rem 100rem rgba(255, 210, 73, .1)!important;
}

#serversModalToggle .freiheit-msg-bg{
	background:url(../img/x20-freiheit_bg.jpg) no-repeat bottom right;
	background-size:cover;
	box-shadow: inset 0 0 100rem 100rem rgba(44, 26, 40, .7)!important;
}

#satoryModalToggle .modal-body .bg-primary{
	background-color:rgba(69, 97, 212, .3)!important;
}


#deviusModalToggle .modal-body .bg-primary{
	background-color:rgba(255, 210, 73, .1)!important;
}


#freiheitModalToggle .modal-body .bg-primary{
	background-color:rgba(147, 23, 23, .3)!important;
}



/*
 * Screen-related sizes
 */
 
@media screen
and (min-device-width : 280px)
and (max-device-width : 800px){
	.x1-server, .x5-server, .x20-server{
       transform:scale(50%,50%);
	   margin:-2.4rem;
	}
	.x1-server:hover, .x5-server:hover, .x20-server:hover {
       transform:scale(60%,60%);
    }
}

@media (min-device-width: 280px) 
and ( max-device-height: 800px )
and (orientation: landscape){
	body{
     background: url(../img/bg.jpg) no-repeat;
     background-size: cover;
     background-position: top center;
    }
  .logo{ 
	 max-width: 50%;
   }
   .chat .data{
	width: 32rem;
	height: 13rem;
   }
}


@media (min-width: 280px) and (orientation: portrait){
   .chat .data{
	width: 22.5rem;
	height: 26rem;
   }
}

@media (min-width: 280px)
and (max-width: 992px){
	body{
	  background: url(../img/l2Satory_BG_vert.jpg) 100% no-repeat;
	  background-size:cover;
	  background-position:top center;
    }
}

@media (min-width: 992px)
and (orientation: landscape){
	main { 
	  position:relative;
	  top: -6rem;
	 }
	
	.parallax {
	  width: 100%;
	  height: 102vh;
	  position: relative;
	  background-image: url('../img/parallax_bg.jpg');
	  background-repeat: no-repeat;
	  background-position:top center;
	  background-size:cover;
	  z-index:0;
	  overflow: hidden;
	  -o-transition: all 0.5s ease-in;
	  -moz-transition: all 0.5s ease-in;
	  -webkit-transition: all 0.5s ease-in;
	  transition: all 0.5s ease-in;
	}
	
	.overlay:nth-of-type(1){
		position: absolute;
		top:6rem;
	}
	
	.parallax__layer {
	  position: absolute;
	  background-repeat: no-repeat;
	}
	.parallax__layer:nth-of-type(2) {
	  background-image: url('../img/parallax-cat.png');
	  z-index:-5;  
	  width: 110%;
	  height: 115%;
	  background-position: 80% 110%;
	  background-size:30%;
	  /*-webkit-animation: shake 10s linear infinite;
	  animation: shake 10s linear infinite;*/
	}
	.parallax__layer:nth-of-type(3) {
	  background-image: url('../img/parallax-human.png');
	  z-index:-6;  
	  width: 105%;
	  height: 105%;
	  background-position: 101% 20%;
	  background-size:32%;
	}
	.parallax__layer:nth-of-type(4) {
	  background-image: url('../img/parallax_elf.png');
	  z-index:-6;
	  width: 110%;
	  height: 110%;
	  background-size:41%;
	  background-position: -7% 215%;  
	}
	.parallax__layer:nth-of-type(5) {
	  background-image: url('../img/parallax_darkelf.png');
	  z-index:-7;  
	  width: 102%;
	  height: 102%;
	  background-size:52%;
	  background-position: -15% 100%;  
	}
	.parallax__layer:nth-of-type(6) {
	  background-image: url('../img/parallax_kamael.png');
	  z-index:-8;
	  background-size:22%;
	  width: 102%;
	  height: 102%;
	  background-position: 57% 196%;
	}
	
	.parallax__layer:nth-of-type(7) {
	  background-image: url('../img/parallax_human-knight.png');
	  z-index:-9;
	  background-size:10%;
	  width: 100.2%;
	  height: 100.2%;
	  background-position: 37% 81%;
	}


	/*@-webkit-keyframes shake {
	  0%   { -webkit-transform: translateY(0); }
	  50%  { -webkit-transform: translateY(-100px); }
	  100% { -webkit-transform: translateY(0); }  
	}
	  
	  @keyframes shake {
	  0%   { transform: translateY(0); }
	  50%  { transform: translateY(-100px); }
	  100% { transform: translateY(0); }
    }*/
	
}