/**
 * Amine Craft CSS
 *
 * @file		style.css
 * @package		Amine Craft System
 * @version		2.4.0
 * @type		Transitional
 * @browsers	Windows: IE6+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://aminecraft.de
 * @copyright	2020 Amine Craft 
 */
body {
  width: 100%;
  background: url("img/body-bg-top.jpg") center top no-repeat, url("img/body-bg-bottom.jpg") center bottom no-repeat;
  background-color: #000000;
  font-family: 'Candara', Arial, sans-serif;
  font-size: 12px;
  color: #887676;
  line-height: 1.3;
}

a {
text-decoration:none;
transition: all 0.3s ease;
color: #fff;
}		
a:hover {
color:#FFF;
opacity:0.9;
}
a:focus {
outline:none;
}			
a img {
border:none;
padding-top: 10px;
margin-right: 5px;
}

p {
  margin-bottom: 15px;
}
h1, h2, h3 {
  color: #CCCCCC;
  margin-bottom: 20px;
  text-shadow: 0px 0px 10px #00ff0f, -1px -1px #000;
  line-height: 1.5;
  cursor:default;
}
h1:hover, h2:hover, h3:hover {
  color: #FFFFFF;
  margin-bottom: 20px;
  text-shadow: 0px 0px 10px #00ff0f, -1px -1px #000;
  line-height: 1.5;
  cursor:default;
}
h1 {
  font-size: 20px;
}
h2 {
  font-size: 18px;
}
h3 {
  font-size: 16px;
}
/*--Tooltip Styles--*/
.tip {
	color: #fff;
	background-color:#000000;
	font-size:14px;
	display:none; /*--Hides by default--*/
	padding:10px;
	position:absolute;	z-index:1000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	
}

/*--Tooltip Styles--*/
.tip2 {
	color: #fff;
	background-color:#000000;
	position: relative absolute;
	font-size:14px;
	display:none; /*--Hides by default--*/
	padding:10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	
}

/* Special Buttons ------------------------------*/
   
   a.sb-special {
      display:block;
      width:228px;
      height:58px;
      line-height:58px;
      text-indent:20px;
      text-transform:uppercase;
      text-shadow:0 0 3px #000, 0 1px 4px #000, 0 0 2px #000;
      color:#FFF;
      background:url("img/ui/sb.button.sprite.gif");
      margin-bottom:20px;
      font-weight:bold;
      opacity:0.8
   }
   
   	a.btn-green {background-position:top center;}
      
   	a.btn-orange {background-position:center;}
      
   	a.btn-purple {background-position:bottom center;}
   
         a.sb-special span {font-size:11px;font-weight:normal;}
         
            a.sb-special.btn-green span {color:#96ff91;}
            
            a.sb-special.btn-orange span {color:#ffcf91;}            
            
            a.sb-special.btn-purple span {color:#ff91fe;}            
	
/*---------------------------------------------------*/
button, .button {
  transition: all 0.3s ease;
  cursor: pointer;
  background: url("img/button-bg.jpg") center no-repeat;
  background-size: cover;
  border: none;
  color: #fff;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.8);
  font-family: 'Candara', Arial, sans-serif;
}
button:hover, .button:hover {
  -webkit-filter: hue-rotate(70deg) brightness(180%) contrast(150%);
  filter: hue-rotate(70deg) brightness(180%) contrast(150%);
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
  color: #afafaf;
}
.button-big {
  height: 50px;
  background-size: 100%;
  line-height: 50px;
  width: 129px;
  padding: 0px;
}
.button-small {
  background-size: 67px 26px;
  height: 26px;
  line-height: 26px;
  width: 67px;
  padding: 0px;
  font-size: 12px;
}
:focus {
  outline: none;
}
::-webkit-input-placeholder {
  color: #706f6f;
}
::-moz-placeholder {
  color: #706f6f;
}
:-moz-placeholder {
  color: #706f6f;
}
:-ms-input-placeholder {
  color: #706f6f;
}
.body-t {
  background: url("img/body-bg-top.jpg") center top no-repeat, url("img/body-bg-bottom.jpg") center bottom no-repeat;
}
.wrapper {
  width: 1280px;
  margin: 0 auto;
  position: relative;
}
.container {
  min-height: 600px;
  display: flex;
  justify-content: space-between;
}

/******************************* .glossymenu  *******************************/
.glossymenu{
margin: 2px 0;
width: 180px; /*width of menu*/
border-bottom-width: 0;
}

.glossymenu a.menuitem{
	background: url("img/navi/glossyback.gif") repeat-x bottom left;
	font: bold 12px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	color: white;
	display: block;
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	height:25px;
	padding: 10 0;
	padding-left: 5px;
	text-decoration: none;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;

}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: url("img/navi/glossyback2.gif");
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
background-image: url("img/navi/level1.jpg");
height:30px;
width: 180px;
font-size:10px"Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
display: block;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;

text-decoration: none;
padding: 10px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background-image: url("img/navi/leve2.jpg");
height:30px;
width: 180px;
font-size:10px"Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
display: block;
}

input {
  background: #151215;
  border: 1px solid #291d1f;
  color: #bda4a4;
  padding: 5px 6px;
  position: relative;
  animation-name: jssorramlicht;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
textarea {
  background: #151215;
  border: 1px solid #291d1f;
  color: #bda4a4;
  padding: 5px 6px;
  width:260px;
}

/** fieldset */
 fieldset
{
	border:1px solid #996600;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;	
	border-radius:8px;
	padding-top: 12px;
	margin-top: 10px;
}

legend {
  padding: 0.2em 0.5em;
  border:1px solid #996600;
  color:#FFFFFF;
  font-size:14px;
  text-align:center;
  }
 
 /** urbangreymenu */
.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url("img/arrowstop.gif") no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu .headerbar a{
text-decoration: none;
color: white;
display: block;
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}
/* Content ------------------------------------------*/

.content {
  width: 680px;
  background: #020801;
  position: relative;
  outline: 1px solid rgba(255, 255, 164, 0.1);
  line-height: 1.1;
  padding: 1px 5px 1px 5px;
}
.content img {
  max-width: 680px;
}
.content .page {
  padding: 25px;
}
.content:before {
  content: "";
  position: absolute;
  top: -85px;
  right: -45px;
  background: url("img/bush-img.png") no-repeat;
  width: 790px;
  height: 135px;
  z-index: 1;
}
.content-page {
  padding: 10px 10px 10px 10px;
  width: 660px;
}
.content-page img {
  max-width: 680px;
}
.content-page .content-title {
  margin: 0px -25px 25px -25px;
}
.content-page .content-title-top {
  margin: -35px -25px 25px -25px;
}
.content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url("img/content-title.jpg") repeat-x;
  position: relative;
  padding: 0px 25px 25px 25px;
  height: 63px;
}
.content-title h2 {
  margin-bottom: 0px;
  text-transform: uppercase;
  font-weight: normal;
}
.content-title a {
  text-decoration: none;
  position: relative;
  z-index: 2;
}
.tabs-block {
  margin-bottom: 25px;
}
.tabs-buttons {
  padding: 0px 25px;
  border-bottom: 1px solid #3d421b;
  margin-bottom: 25px;
}
.tabs-buttons a {
  margin-right: 50px;
  text-transform: uppercase;
  font-size: 16px;
  color: #c6ccad;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 20px 0px;
}
.tabs-buttons .active {
  color: #efef67;
}
.tabs-buttons .active:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin-left: -5px;
  width: 11px;
  height: 7px;
  background: url("img/tab-icon.png") no-repeat;
}
/* Header
-----------------------------------------------------------------------------*/
.header {
  position: relative;
  height: 843px;
}
.top-menu {
  text-align: center;
}
.top-menu .active a:before {
  content: "";
  background: #8eaa5b;
  position: absolute;
  height: 1px;
  width: 100%;
  top: 0px;
  left: 0px;
  box-shadow: 0px 3px 5px 0px rgba(142, 170, 91, 0.6);
  opacity: 1;
}
.top-menu li {
  display: inline-block;
  position: relative;
}
.top-menu li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  padding: 0px 30px;
  display: block;
  line-height: 69px;
  position: relative;
}
.top-menu li a:before {
  content: "";
  opacity: 0;
  transition: all 0.5s ease;
}
.top-menu li ul {
  position: absolute;
  padding: 25px 0px;
  min-width: 180px;
  margin-top: -10px;
  background: #0b080b;
  border: 1px solid #341f20;
  text-align: left;
  opacity: 0;
  left: -9996px;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.top-menu li ul li {
  display: block;
}
.top-menu li ul li a {
  line-height: 1.3;
  padding: 10px 25px;
}
.top-menu li ul li a:before {
  content: ">";
  opacity: 1;
  margin-right: 10px;
}
.top-menu li ul:before {
  border: 8px solid transparent;
  border-bottom-color: #341f20;
  position: absolute;
  left: 27%;
  bottom: 100%;
  content: '';
}
.top-menu li:hover a {
  color: #8eaa5b;
  text-shadow: 0px 0px 12px rgba(142, 170, 91, 0.3);
}
.top-menu li:hover a:before {
  content: "";
  background: #8eaa5b;
  position: absolute;
  height: 1px;
  width: 100%;
  top: 0px;
  left: 0px;
  box-shadow: 0px 3px 5px 0px rgba(142, 170, 91, 0.6);
  opacity: 1;
}
.top-menu li:hover ul {
  opacity: 1;
  left: 0px;
  transition: opacity 0.5s ease;
}
.top-menu li:hover ul li a {
  color: #fff;
}
.top-menu li:hover ul li a:hover {
  color: #8eaa5b;
  background: rgba(142, 170, 91, 0.1);
  box-shadow: 0px 3px 5px -3px rgba(142, 170, 91, 0.5), 0px -3px 10px -3px rgba(142, 170, 91, 0.5);
}
.top-menu li:hover ul li a:before {
  content: ">";
  opacity: 1;
  margin-right: 10px;
  position: relative;
  background: none;
  box-shadow: none;
}
.logo a {
	position: absolute;
	display: block;
	margin-left: 20px;
	margin-top: 19px;
	left: 366px;
	top: 46px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	height: 226px;
	width: 515px;
}
.server-block {
	background: url("img/server-bg.png") no-repeat;
	width: 300px;
	height: 55px;
	padding: 33px 20px 0px 20px;
	position: absolute;
	top: 276px;
	left: 296px;
}
.server-block2 {
	background: url("img/server-bg.png") no-repeat;
	width: 300px;
	height: 55px;
	padding: 33px 20px 0px 20px;
	position: absolute;
	top: 366px;
	left: 148px;
}
.server-block3 {
	background: url("img/server-bg.png") no-repeat;
	width: 300px;
	height: 55px;
	padding: 33px 20px 0px 20px;
	position: absolute;
	top: 275px;
	left: 700px;
}
.server-block4 {
	background: url("img/server-bg.png") no-repeat;
	width: 300px;
	height: 55px;
	padding: 33px 20px 0px 20px;
	position: absolute;
	top: 364px;
	left: 839px;
}
.server-block5 {
	background: url("img/server-bg.png") no-repeat;
	width: 300px;
	height: 55px;
	padding: 33px 20px 0px 20px;
	position: absolute;
	top: 454px;
	left: 0px;
}
.server-block6 {
	background: url("img/server-bg.png") no-repeat;
	width: 300px;
	height: 55px;
	padding: 33px 20px 0px 20px;
	position: absolute;
	top: 452px;
	left: 979px;
}

.slides-block1 {
	background: url("img/slides-block1.png") no-repeat;
	width: 1100px;
	height: 300px;
	padding: 33px 20px 0px 20px;
	position: absolute;
	top: 541px;
	left: 85px;
}
.circlestat {
  position: absolute;
  left: 106px;
  top: -4px;
}
.server-status {
  float: left;
  font-size: 14px;
  color: #aadd59;
  text-shadow: 0px 0px 8px #aadd59;
  padding: 10px 0px 10px 35px;
  margin-top: -10px;
  margin-left: 95px;
}
.server-status.online {
  background: url("img/online-icon.png") left no-repeat;
}
.server-status.offline {
  background: url("img/offline-icon.png") left no-repeat;
  color: #f53319;
  text-shadow: none;
}
.server-name {
  float: left;
  color: #aadd59;
  font-size: 13px;
}
.out-nav-block {
	position: absolute;
	bottom: 787px;
	display: flex;
	left: -175px;
}
.soc-block {
  margin-right: 130px;
}
.soc-block a {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  width: 28px;
  text-align: center;
  border: 1px solid rgba(240, 249, 225, 0.2);
  margin-right: 3px;
  box-shadow: 0px 3px 5px -2px rgba(170, 221, 89, 0.2), 0px -3px 5px -2px rgba(170, 221, 89, 0.2);
}
.soc-block a:nth-child(1) {
  background: url("img/soc-icons.png") -3px 5px no-repeat;
}
.soc-block a:nth-child(2) {
  background: url("img/soc-icons.png") -33px 5px no-repeat;
}
.soc-block a:nth-child(3) {
  background: url("img/soc-icons.png") -64px 5px no-repeat;
}
.soc-block a:hover {
  border-radius: 50%;
}
.lang-block {
  position: relative;
  padding-top: 8px;
}
.hide,
.hide + label ~ div {
  display: none;
}
.hide + label {
  margin: 0;
  padding: 0;
  color: #aadd59;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  position: relative;
  transition: all 0.4s ease;
}
.hide + label span {
  color: #fff;
}
.hide + label img {
  border: 1px solid rgba(152, 198, 80, 0.4);
  margin: 0px 0px -3px 5px;
}
.hide + label:hover {
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
}
.hide:checked + label {
  border-bottom: 0;
}
.hide:checked + label + div {
  display: block;
  position: absolute;
  background: #0b080b;
  border: 1px solid #341f20;
  padding: 18px 0px;
  min-width: 180px;
  animation: fade ease-in 0.5s;
  margin: 7px 0px 0px -53px;
}
.hide:checked + label + div:before {
  border: 6px solid transparent;
  border-bottom-color: #341f20;
  position: absolute;
  left: 40px;
  bottom: 100%;
  content: '';
}
.hide:checked + label + div span {
  display: block;
  color: #fff;
  font-size: 12px;
  padding: 6px 25px 6px 35px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.hide:checked + label + div span:hover {
  color: #8eaa5b;
  background: rgba(142, 170, 91, 0.1);
  box-shadow: 0px 3px 5px -3px rgba(142, 170, 91, 0.5), 0px -3px 10px -3px rgba(142, 170, 91, 0.5);
}
.hide:checked + label + div span:hover:before {
  content: ">";
  position: absolute;
  margin-left: -15px;
}
.hide + label:before {
  content: "";
  width: 7px;
  height: 4px;
  background: url("img/lang-icon.png") no-repeat;
  position: absolute;
  left: -10px;
  top: 6px;
  transform: rotate(-90deg);
}
.hide:checked + label:before {
  content: "";
  transform: rotate(0deg);
}
.download-block a {
  display: block;
  background: url("img/download-button-bg.jpg") no-repeat;
  height: 80px;
  padding-top: 42px;
  width: 289px;
  text-align: center;
  position: absolute;
  z-index: 2;
  right: 0px;
  bottom: 84px;
  text-decoration: none;
  font-size: 13px;
  color: #aadd59;
}
.download-block a:hover {
  box-shadow: 0px 0px 15px 0px #aadd59;
}
.download-block a span {
  display: block;
  font-size: 24px;
  color: #e7e8ad;
  text-shadow: 0px 0px 10px rgba(255, 255, 190, 0.5);
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 40px;
}
.download-block a p {
  position: relative;
  z-index: 2;
}
.download-block a:after {
  content: "";
  position: absolute;
  background: url("img/download-button.png") no-repeat;
  height: 69px;
  width: 222px;
  margin-left: -111px;
  left: 50%;
  bottom: -35px;
}
/* slidershow
-----------------------------------------------------------------------------*/
/*jssor slider loading skin spin css*/
        .jssorl-061-spin img {
            animation-name: jssorl-061-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-061-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

.jssora061 {display:block;position:absolute;cursor:pointer;}
.jssora061 .a {fill:none;stroke:#fff;stroke-width:360;stroke-linecap:round;}
.jssora061:hover {opacity:.8;}
.jssora061.jssora061dn {opacity:.5;}
.jssora061.jssora061ds {opacity:.3;pointer-events:none;}
.sparks-jssor {
  width: 500px;
  height: 250px;
  position: absolute;
  bottom: 33px;
  left: 386px;
}
.sparks-jssor-1 {
  animation-name: sparks-logo-1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 1s;
}
/* Animation
-----------------------------------------------------------------------------*/
.eyes {
  position: absolute;
  right: 513px;
  top: 168px;
  animation-name: eyes;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  opacity: 0;
}
.eyes span {
  width: 3px;
  height: 3px;
  display: inline-block;
  margin: 0px 3px;
  border-radius: 50%;
  background: #a0dbec;
  box-shadow: 0px 0px 7px 5px #a0dbec;
}
.eyes2 {
  position: absolute;
  right: 828px;
  top: 168px;
  animation-name: eyes;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  opacity: 0;
}
.eyes2 span {
  width: 3px;
  height: 3px;
  display: inline-block;
  margin: 0px 3px;
  border-radius: 50%;
  background: #a0dbec;
  box-shadow: 0px 0px 7px 5px #a0dbec;
}
@keyframes eyes {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.sparks-jssorram {
  background: url("img/ram.png") no-repeat;
  width: 539px;
  height: 288px;
  position: absolute;
  bottom: 15px;
  left: 369px;
  animation-name: jssorramlicht;
  animation-duration: 13s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
@keyframes jssorramlicht {
  0% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
  }
  14% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #ffffff);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #ffffff);
  }
  28% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #c4423b);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #c4423b);
  }
  42% {
     opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
  }
  68% {
     opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #ffffff);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #ffffff);
  }
  82% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #c4423b);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #c4423b);
  }
  100% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
  }
}

.text-sword {
  background: url("img/text_sword.png") no-repeat;
  width: 175px;
  height: 125px;
  position: absolute;
  bottom: 432px;
  left: 1208px;
  opacity: 0;
  animation-name: text-sword;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
@keyframes text-sword {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
  }
  28% {
    opacity: 0;
  }
  42% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #ffffff);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #ffffff);
  }
  68% {
    opacity: 0;
  }
  82% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #c4423b);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #c4423b);
  }
  100% {
    opacity: 0;
  }
}
.light-sword {
  width: 150px;
  height: 150px;
  position: absolute;
  bottom: 84px;
  left: 114px;
  opacity: 0;
}
.light-sword-1 {
  background: url("img/light_sword_1.png") right 0px bottom 0px no-repeat;
  animation-name: light-sword-1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.light-sword-2 {
  background: url("img/light_sword_2.png") right -30px bottom -30px no-repeat;
  animation-name: light-sword-2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 1s;
}
.light-sword-3 {
  background: url("img/light_sword_3.png") right 0px bottom 0px no-repeat;
  animation-name: light-sword-3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 2s;
}
@keyframes light-sword-1 {
  40% {
    background: url("img/light_sword_1.png") right 10px bottom 10px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/light_sword_1.png") right 20px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/light_sword_1.png") right 30px bottom 30px no-repeat;
    opacity: 0;
  }
}
@keyframes light-sword-2 {
  40% {
    background: url("img/light_sword_2.png") right -20px bottom -20px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/light_sword_2.png") right -10px bottom -10px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/light_sword_2.png") right 0px bottom 0px no-repeat;
    opacity: 0;
  }
}
@keyframes light-sword-3 {
  40% {
    background: url("img/light_sword_3.png") right 10px bottom 10px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/light_sword_3.png") right 20px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/light_sword_3.png") right 30px bottom 30px no-repeat;
    opacity: 0;
  }
}
/* sparks-logo
-----------------------------------------------------------------------------*/
.sparks-logo {
  background: url("img/sparks_logo.png") left bottom no-repeat;
  width: 600px;
  height: 100px;
  position: absolute;
  bottom: 674px;
  left: 341px;
}
.sparks-logo-1 {
  background: url("img/sparks_logo.png") left bottom no-repeat;
  animation-name: sparks-logo-1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 1s;
}
.sparks-logo-2 {
  background: url("img/sparks_logo.png") left bottom no-repeat;
  animation-name: sparks-logo-2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 2s;
}
.sparks-logo-3 {
  background: url("img/sparks_logo.png") left bottom no-repeat;
  animation-name: sparks-logo-3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 3s;
}

@keyframes sparks-logo-1 {
  0% {
    background: url("img/sparks_logo.png") left 10px bottom 10px no-repeat;
    opacity: 0;
  }
  40% {
    background: url("img/sparks_logo.png") left 10px bottom 10px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/sparks_logo.png") left 20px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_logo.png") left 30px bottom 30px no-repeat;
    opacity: 0;
  }
}
@keyframes sparks-logo-2 {
  0% {
    background: url("img/sparks_logo.png") left 0px bottom 10px no-repeat;
    opacity: 0;
  }
  40% {
    background: url("img/sparks_logo.png") left 0px bottom 10px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/sparks_logo.png") left 0px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_logo.png") left 0px bottom 30px no-repeat;
    opacity: 0;
  }
}
@keyframes sparks-logo-3 {
  0% {
    background: url("img/sparks_logo.png") left 0px bottom 10px no-repeat;
    opacity: 0;
  }
  40% {
    background: url("img/sparks_logo.png") left 0px bottom 10px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/sparks_logo.png") left 0px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_logo.png") left 0px bottom 30px no-repeat;
    opacity: 0;
  }
}
/* sparks-logo2
-----------------------------------------------------------------------------*/
.sparks-logo2 {
  background: url("img/sparks_logo.png") left bottom no-repeat;
  width: 600px;
  height: 80px;
  position: absolute;
  bottom: 549px;
  left: 341px;
}
.sparks-logo2-1 {
  background: url("img/sparks_logo.png") left bottom no-repeat;
  animation-name: sparks-logo2-1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 1s;
}
.sparks-logo2-2 {
  background: url("img/sparks_logo.png") left bottom no-repeat;
  animation-name: sparks-logo2-2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 2s;
}
.sparks-logo2-3 {
  background: url("img/sparks_logo.png") left bottom no-repeat;
  animation-name: sparks-logo2-3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 3s;
}

@keyframes sparks-logo2-1 {
  0% {
    background: url("img/sparks_logo.png") left 10px bottom 10px no-repeat;
    opacity: 0;
  }
  40% {
    background: url("img/sparks_logo.png") left 10px bottom 10px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/sparks_logo.png") left 20px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_logo.png") left 30px bottom 30px no-repeat;
    opacity: 0;
  }
}
@keyframes sparks-logo2-2 {
  0% {
    background: url("img/sparks_logo.png") left 0px bottom 10px no-repeat;
    opacity: 0;
  }
  40% {
    background: url("img/sparks_logo.png") left 0px bottom 10px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/sparks_logo.png") left 0px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_logo.png") left 0px bottom 30px no-repeat;
    opacity: 0;
  }
}
@keyframes sparks-logo2-3 {
  0% {
    background: url("img/sparks_logo.png") left 0px bottom 10px no-repeat;
    opacity: 0;
  }
  40% {
    background: url("img/sparks_logo.png") left 0px bottom 10px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/sparks_logo.png") left 0px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_logo.png") left 0px bottom 30px no-repeat;
    opacity: 0;
  }
}
/* sword
-----------------------------------------------------------------------------*/
.sword {
  background: url("img/sword.png") no-repeat;
  width: 175px;
  height: 125px;
  position: absolute;
  bottom: 190px;
  left: 230px;
  opacity: 0;
  animation-name: text-sword;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
@keyframes sword {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
  }
  28% {
    opacity: 0;
  }
  42% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #ffffff);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #ffffff);
  }
  68% {
    opacity: 0;
  }
  82% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #c4423b);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #c4423b);
  }
  100% {
    opacity: 0;
  }
}
/* sword2
-----------------------------------------------------------------------------*/
.sword2 {
  background: url("img/sword2.png") no-repeat;
  width: 175px;
  height: 125px;
  position: absolute;
  bottom: 190px;
  left: 885px;
  opacity: 0;
  animation-name: text-sword;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
@keyframes sword2 {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #4444dd);
  }
  28% {
    opacity: 0;
  }
  42% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #ffffff);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #ffffff);
  }
  68% {
    opacity: 0;
  }
  82% {
    opacity: 1;
    -webkit-filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #c4423b);
    filter: brightness(180%) contrast(180%) drop-shadow(0px 0px 4px #c4423b);
  }
  100% {
    opacity: 0;
  }
}
/* 
-----------------------------------------------------------------------------*/



.sparks-pet {
  background: url("img/sparks_pet.png") left bottom no-repeat;
  width: 150px;
  height: 150px;
  position: absolute;
  bottom: 180px;
  left: 260px;
}
.sparks-pet-1 {
  background: url("img/sparks_pet.png") left bottom no-repeat;
  animation-name: sparks-pet-1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.sparks-pet-2 {
  background: url("img/sparks_pet.png") left bottom no-repeat;
  animation-name: sparks-pet-2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 1s;
}
.sparks-pet-3 {
  background: url("img/sparks_pet.png") left bottom no-repeat;
  animation-name: sparks-pet-3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 2s;
}
@keyframes sparks-pet-1 {
  0% {
    background: url("img/sparks_pet.png") left 10px bottom 10px no-repeat;
    opacity: 0;
  }
  40% {
    background: url("img/sparks_pet.png") left 10px bottom 10px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/sparks_pet.png") left 20px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_pet.png") left 30px bottom 30px no-repeat;
    opacity: 0;
  }
}
@keyframes sparks-pet-2 {
  0% {
    background: url("img/sparks_pet.png") left 0px bottom 10px no-repeat;
    opacity: 0;
  }
  40% {
    background: url("img/sparks_pet.png") left 0px bottom 10px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/sparks_pet.png") left 0px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_pet.png") left 0px bottom 30px no-repeat;
    opacity: 0;
  }
}
@keyframes sparks-pet-3 {
  0% {
    background: url("img/sparks_pet.png") left 0px bottom 10px no-repeat;
    opacity: 0;
  }
  40% {
    background: url("img/sparks_pet.png") left 0px bottom 10px no-repeat;
    opacity: 0.5;
  }
  70% {
    background: url("img/sparks_pet.png") left 0px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_pet.png") left 0px bottom 30px no-repeat;
    opacity: 0;
  }
}
.sparks {
  background: url("img/sparks_pet.png") left bottom no-repeat;
  width: 100px;
  height: 150px;
  position: absolute;
  bottom: 250px;
  right: 100px;
  transform: scale(3);
}
.sparks-1 {
  background: url("img/sparks_pet.png") left bottom no-repeat;
  animation-name: sparks-1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.sparks-2 {
  background: url("img/sparks_pet.png") left bottom no-repeat;
  animation-name: sparks-2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 1s;
}
.sparks-3 {
  background: url("img/sparks_pet.png") left bottom no-repeat;
  animation-name: sparks-3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 2s;
}
@keyframes sparks-1 {
  0% {
    background: url("img/sparks_pet.png") left 10px bottom 10px no-repeat;
    opacity: 0;
  }
  60% {
    background: url("img/sparks_pet.png") left 10px bottom 10px no-repeat;
    opacity: 0.5;
  }
  80% {
    background: url("img/sparks_pet.png") left 20px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_pet.png") left 30px bottom 30px no-repeat;
    opacity: 0;
  }
}
@keyframes sparks-2 {
  0% {
    background: url("img/sparks_pet.png") left 0px bottom 10px no-repeat;
    opacity: 0;
  }
  60% {
    background: url("img/sparks_pet.png") left 0px bottom 10px no-repeat;
    opacity: 0.5;
  }
  80% {
    background: url("img/sparks_pet.png") left 0px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_pet.png") left 0px bottom 30px no-repeat;
    opacity: 0;
  }
}
@keyframes sparks-3 {
  0% {
    background: url("img/sparks_pet.png") left 10px bottom 10px no-repeat;
    opacity: 0;
  }
  60% {
    background: url("img/sparks_pet.png") left -10px bottom 10px no-repeat;
    opacity: 0.5;
  }
  80% {
    background: url("img/sparks_pet.png") left -20px bottom 20px no-repeat;
    opacity: 1;
  }
  100% {
    background: url("img/sparks_pet.png") left -30px bottom 30px no-repeat;
    opacity: 0;
  }
}
/* Left Sidebar
-----------------------------------------------------------------------------*/
.left-sidebar {
  width: 290px;
}
.sidebar-title {
  background: url("img/sidebar-title.jpg") no-repeat;
  height: 62px;
  line-height: 62px;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  margin-bottom: 8px;
}

.border {
  outline: 1px solid rgba(213, 120, 113, 0.1);
  background: #0b080b;
  padding-bottom: 15px;
  margin-bottom: 10px;
}
.box {
  border-top: 1px solid rgba(49, 56, 35, 0);
  border-bottom: 1px solid rgba(49, 56, 35, 0);
}
.box:hover {
  background: rgba(142, 170, 91, 0.1);
  border-top: 1px solid rgba(49, 56, 35, 0.5);
  border-bottom: 1px solid rgba(49, 56, 35, 0.5);
  box-shadow: 0px 4px 5px -1px rgba(49, 56, 35, 0.3), 0px -4px 5px -1px rgba(49, 56, 35, 0.3);
}
.login-block form button {
  float: right;
  width: 94px;
  height: 40px;
  line-height: 40px;
  padding: 0px;
}
.login-block form input {
  width: 160px;
  margin-bottom: 9px;
  azimuth:behind;
}
.login-block a {
  text-decoration: none;
}
.login-block .lost-block {
  margin-top: 5px;
}
.p-block {
  padding: 0px 10px;
}
.best-players {
  margin: 20px 0px 3px 0px;
}
.best-players li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.4s ease;
  padding: 0px 10px;
  font-size: 14px;
}
.best-players li .number {
  width: 24px;
}
.best-players li .ava {
  width: 32px;
}
.best-players li .nickname {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.best-players li .rating {
  width: 40px;
}
.best-players li img {
  margin-top: 5px;
  width: 16px;
  height: 16px;
  box-shadow: 0px 0px 10px 1px rgba(216, 122, 115, 0.3);
}
.best-players li:hover span {
  color: #8eaa5b;
}
.best-players li:hover img {
  box-shadow: 0px 0px 5px 0px rgba(116, 167, 16, 0.7);
}
.best-players li:hover .button {
  -webkit-filter: hue-rotate(70deg) brightness(180%) contrast(150%);
  filter: hue-rotate(70deg) brightness(180%) contrast(150%);
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0);
  color: #afafaf;
}
.guilds {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  padding: 15px 15px 12px 15px;
  color: #887676;
}
.guilds .guild-img {
  width: 55px;
}
.guilds .guild-img img {
  width: 40px;
  height: 40px;
  box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.4);
}
.guilds .guild-text {
  width: 150px;
}
.guilds .guild-text .guild-text-n {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
  color: #ffffff;
}
.guilds .guild-text span b {
  color: #b76762;
  text-decoration: underline;
  font-weight: normal;
}
.guilds .guild-comments {
  width: 50px;
  text-align: right;
}
.guilds:hover .guild-text .guild-text-n {
  color: #8eaa5b;
}
.guilds:hover .guild-text span {
  color: #375154;
}
.guilds:hover .guild-text span b {
  color: #78b2b7;
}
.guilds:hover .guild-comments {
  color: #8eaa5b;
  text-shadow: 0px 0px 7px #8eaa5b;
}
.guilds:hover .comment-icon {
  -webkit-filter: hue-rotate(100deg) brightness(150%) contrast(180%);
  filter: hue-rotate(100deg) brightness(150%) contrast(180%);
}
.comment-icon {
  background: url("img/comment-icon.png") no-repeat;
  width: 14px;
  height: 12px;
  display: inline-block;
  margin-bottom: -4px;
  margin-right: 3px;
}
/* Ts3 */
.ts3ssv, .ts3ssverror{
	background-color: #ffffff;
	width: 150px;
}

.ts3ssv, .ts3ssv *, .ts3ssverror{
	color: #00000;
	font-family: Verdana;
	font-size: 10px;
}

.ts3ssv label{
	border-bottom: 1px solid #aaaaaa;
}

.ts3ssvItem a{
	color: #000000;
}

.ts3ssvItem a:hover{
	background-color: #f6f6f6;
	color: #000099;
}

.ts3ssverror{
	color: #ff0000;
}

.ts3ssv, .ts3ssv *{
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

.ts3ssv{
	position: relative;
	overflow: hidden;
}

.ts3ssv label{
	display: block;
	padding: 2px 0;
}

.ts3ssvItem{
	margin-left: 16px;
	position: relative;
	white-space:nowrap;
}

.ts3ssvItem a{
	display: block;
	text-decoration: none;
}

.ts3ssvItem img{
	border: 0;
	vertical-align: middle;
	margin-right: 2px;
}

.ts3ssvFlags{
	position: absolute;
	right: 0;
	top: 0;
}

.ts3ssvServer{
	margin-left: 0;
}

#body{
    width:300px;
    background-color:transparent;
	font-family: arial;
    margin:0 auto 0 auto;
    padding:0;
}

#body ul, li{
    clear:both;
    line-height: 16px;
}

.refresh {
	color: #777;
	text-decoration: none;
	font-size: 11px;
}

.refresh:hover {
    color:#999;
}

#ip{
    color:#777;
    font-size:12px;
	font-weight: bold;
    text-decoration:none;
}

#ip:hover {
    color:#999;
}

.channel {
    color:#777;
    font-size:12px;
}

.channel img {
	padding-right:5px;
	padding-bottom:2px;
	float:left;
}

.player {
	color: #2e5c5c;
    font-size:12px;
}

.player img {
	padding-right:5px;
	padding-bottom:2px;
	float:left;
}

.servergroups h3 {
    color:#777;
    font-size:12px;
    margin-top:15px;
    margin-bottom:12px;
    padding:0;
}

.servergroups {
    color:#777;
    font-size:12px;
	padding-top:1px;
    width:50%;
    float:left;
}

.servergroups img {
	padding-right:10px;
	padding-bottom:5px;
	float:left;
}

.servergroups.icon, .channelgroups.icon {
	width:25px;
}

.channelgroups h3 {
    color:#777;
    font-size:12px;
    margin-top:15px;
    margin-bottom:12px;
    padding:0;
}

.channelgroups {
    color:#777;
    font-size:12px;
	padding-top:1px;
    width:100%;
}

.channelgroups.container {
    font-size:12px;
    width:50%;
    float:left;
}

.channelgroups img {
	padding-right:10px;
	padding-bottom:5px;
	float:left;
}
.status {
	clear:both;
	padding-top:1px;
}

.status h3 {
    color:#777;
    font-size:12px;
    margin-top:15px;
    margin-bottom:12px;
    padding:0;
}

.status_clear {
	clear:both;
	padding-top:1px;
}

.status table td {
    color:#777;
    font-size:12px;
    text-align:left;
    vertical-align:text-bottom; 
    margin-top:0;
    margin-bottom:0;
    padding-top:0;
    padding-bottom:0;
	width:40%;
}

.status img {
	padding-right:10px;
	padding-bottom:5px;
	float:left;
}

.error {
	color: #FF0000;
	font-family: Verdana;
	font-size: 14px;
	font-weight: bold;
    vertical-align:text-bottom; 
}

.leer {
    width:20px;
    float:left;
}

ul .channellist, ul .playerlist {
   list-style-type:none;
   padding-left:16px;
}

.iconcontainer{
   float:right;
}

.spacer_center {
    text-align: center;
}

.spacer_right {
    text-align: right;
}

.spacer_left {
    text-align: left;
}

.spacer_repeat {
    text-align: left;
    overflow: hidden;
}

/* Middle
-----------------------------------------------------------------------------*/
.border-top {
	border-top: 1px solid #1c1c1c;
	box-shadow: 0px -1px 0px #53323d;
	padding-top: 2px;
	margin-bottom: 70px;
}
.content img {
  max-width: 630px;
}
.content .page {
  padding: 25px;
}
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.tabs > .section {
  display: none;
  border-top: 1px solid #3c332a;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-top: none;
}
.tabs > input {
  display: none;
  position: absolute;
}
.tabs > label {
  display: inline-block;
  text-align: center;
  font-size: 16px;
  padding: 23px 27px;
  color: #3c332a;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.tabs > label:hover {
  color: #f8d69d;
  cursor: pointer;
}
.tabs > input:checked + label {
  color: #f8d69d;
  position: relative;
}
.tabs > input:checked + label:before {
  content: "";
  background: url("img/tab-icon.png") no-repeat;
  width: 11px;
  height: 7px;
  position: absolute;
  bottom: -1px;
  z-index: 1;
  left: 50%;
  margin-left: -5px;
}
#home:checked ~ #content-home,
#new:checked ~ #content-new,
#old:checked ~ #content-old,
#trailer:checked ~ #content-trailer,
#film:checked ~ #content-film {
  display: block;
}
.news-block {
  margin-bottom: 50px;
}
.first-news {
  margin-bottom: 20px;
}
.first-news .news-title {
  background: #0b080b;
  padding: 25px;
}
.first-news .news-title a {
  text-decoration: none;
  color: #f8d69d;
  font-size: 16px;
  text-transform: uppercase;
}
.first-news .news-title span {
  float: right;
  font-size: 14px;
}
.first-news .news-title span b {
  color: #f8d69d;
  font-weight: normal;
  font-size: 16px;
}
.first-news .news-img {
  outline: 1px solid rgba(60, 51, 42, 0.25);
  position: relative;
  box-shadow: 0px 5px 8px -1px rgba(0, 0, 0, 0.4);
}
.first-news .news-img img {
  display: block;
  width: 600px;
  max-width: 680px;
}
.first-news .news-img .news-img-info {
  background: linear-gradient(to right, rgba(38, 9, 10, 0.5), rgba(195, 173, 108, 0.5));
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0;
}
.first-news .news-img .news-img-info .read-more {
  float: right;
}
.first-news .news-img .news-img-info span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 25px;
  float: left;
  width: 450px;
  line-height: 50px;
  color: #f8d69d;
}
.news {
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  border-bottom: 1px dashed rgba(90, 87, 90, 0.1);
  font-family: Tahoma, Geneva, sans-serif;
  padding: 15px 0px 17px 25px;
}
.news .news-read-more {
  float: right;
  box-shadow: -10px 3px 10px 0px rgba(0, 0, 0, 0.4);
  margin-top: -16px;
  margin-left: 20px;
  opacity: 0;
  transition: all 0.3s ease;
}
.news span {
  color: #f8d69d;
}
.news:hover {
  background: #20171a;
  border-top: 1px solid #252025;
  border-bottom: 1px solid #252025;
}
.news:hover .news-read-more {
  opacity: 1;
}
.pagination {
  text-align: center;
}
.pagination a {
  text-decoration: none;
  color: #887676;
  font-size: 14px;
  padding: 4px 9px;
  border-radius: 2px;
  border: 1px solid rgba(142, 170, 91, 0);
}
.pagination .nav:hover {
  border: 1px solid rgba(142, 170, 91, 0.2);
  box-shadow: 0px 0px 7px 0px rgba(142, 170, 91, 0.2);
}
.pagination .active {
  border: 1px solid rgba(142, 170, 91, 0.2);
  box-shadow: 0px 0px 7px 0px rgba(142, 170, 91, 0.2);
}
/* Right Sidebar
-----------------------------------------------------------------------------*/
.right-sidebar {
  width: 290px;
}
.shop {
  height: 66px;
  padding: 16px 0px 16px 20px;
  position: relative;
}
.shop h3 {
  margin-bottom: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 150px;
  font-weight: normal;
}
.shop p {
  margin-bottom: 7px;
  color: #bec4a6;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 150px;
}
.shop:after {
  transition: all 0.5s ease;
}
.shop:hover:after {
  right: -40px;
}
.shop-one {
  background: url("img/shop-bg.jpg") 0px 0px no-repeat;
}
.shop-one:after {
  content: "";
  background: url("img/hero-one.gif") no-repeat;
  width: 141px;
  height: 111px;
  position: absolute;
  right: -10px;
  bottom: -4px;
}
.shop-two {
  background: url("img/shop-bg.jpg") 0px -98px no-repeat;
}
.shop-two:after {
  content: "";
  background: url("img/hero-two.gif") no-repeat;
  width: 141px;
  height: 93px;
  position: absolute;
  right: -10px;
  bottom: 0px;
}
.shop-three {
  background: url("img/shop-bg.jpg") 0px -196px no-repeat;
}
.shop-three:after {
  content: "";
  background: url("img/hero-three.gif") no-repeat;
  width: 141px;
  height: 93px;
  position: absolute;
  right: -10px;
  bottom: 0px;
}
.fast-links a {
  display: block;
  font-size: 14px;
  text-decoration: none;
  padding: 12px 25px;
  color: #fff;
}
.fast-links a:before {
  content: ">";
  margin-right: 8px;
}
.fast-links a:hover {
  color: #ffffa4;
}
.vote-f-us-block {
  padding-bottom: 20px;
}
.vote {
  height: 89px;
  width: 240px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #ffffa4;
  text-decoration: none;
  margin-top: 10px;
}
.vote span {
  display: block;
  width: 100%;
  padding: 10px 15px;
  transition: all 0.4s ease;
  background: linear-gradient(to right, rgba(152, 197, 116, 0.3), rgba(152, 197, 116, 0.05));
}
.vote:hover {
  transform: scale(1.1);
  box-shadow: 0px 0px 15px 0px rgba(142, 170, 91, 0.3);
}
.vote-title {
  margin-bottom: 20px;
}
.vote-one {
  background: url(img/vote-bg-1.jpg) no-repeat;
}
.vote-two {
  background: url(img/vote-bg-2.jpg) no-repeat;
}
.vote-three {
  background: url(img/vote-bg-3.jpg) no-repeat;
}
/* Footer
-----------------------------------------------------------------------------*/
.footer {
  height: 330px;
  position: relative;
}
.block-top {
  border-bottom: 1px solid rgba(183, 103, 98, 0.1);
  min-height: 100px;
  margin-bottom: 90px;
  position: relative;
}
#toTop {
  background: url("img/to-top.png") no-repeat;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  bottom: -20px;
  cursor: pointer;
  transition: all 0.4s ease;
}
#toTop:hover {
  -webkit-filter: brightness(150%);
  filter: brightness(150%);
}
.f-menu {
  text-align: center;
  margin-bottom: 15px;
}
.f-menu .active a {
  color: #b76762;
}
.f-menu li {
  display: inline-block;
  position: relative;
}
.f-menu li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  padding: 0px 30px;
  display: block;
  line-height: 69px;
  position: relative;
  color: #887676;
}
.f-menu li a:hover {
  color: #b76762;
}
.f-menu li a:before {
  content: "";
  opacity: 0;
  transition: all 0.5s ease;
}
.f-menu li ul {
  position: absolute;
  padding: 15px 0px;
  min-width: 180px;
  margin-top: -10px;
  background: #0b080b;
  border: 1px solid #341f20;
  text-align: left;
  opacity: 0;
  left: -9999px;
  transition: opacity 0.3s ease;
  bottom: 50px;
}
.f-menu li ul li {
  display: block;
}
.f-menu li ul li a {
  line-height: 1.3;
  padding: 5px 25px;
}
.f-menu li ul li a:before {
  content: ">";
  opacity: 1;
  margin-right: 10px;
}
.f-menu li ul:before {
  border: 8px solid transparent;
  border-top-color: #341f20;
  position: absolute;
  left: 27%;
  top: 100%;
  content: '';
}
.f-menu li:hover ul {
  opacity: 1;
  left: 0px;
  transition: opacity 0.5s ease;
}
.f-menu li:hover ul li a:hover {
  color: #8eaa5b;
  background: rgba(142, 170, 91, 0.1);
  box-shadow: 0px 3px 5px -3px rgba(142, 170, 91, 0.5), 0px -3px 10px -3px rgba(142, 170, 91, 0.5);
}
.f-menu li:hover ul li a:before {
  content: ">";
  opacity: 1;
  margin-right: 10px;
  position: relative;
  background: none;
  box-shadow: none;
}
.copy {
  text-align: center;
  color: #887676;
}
.copy a {
  text-decoration: none;
  color: #b76762;
}
.templstock {
  position: absolute;
  font-size: 5px;
  right: 0px;
}
.templstock a {
  color: #887676;
}
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}

.fancybox-skin {
	position: relative;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.fancybox-opened {
	z-index: 8030;
}

.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url('img/fancybox_sprite.png');
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('img/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url('img/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}

.fancybox-prev {
	left: 0;
}

.fancybox-next {
	right: 0;
}

.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}

.fancybox-prev span {
	left: 10px;
	background-position: 0 -36px;
}

.fancybox-next span {
	right: 10px;
	background-position: 0 -72px;
}

.fancybox-nav:hover span {
	visibility: visible;
}

.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url('img/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}

.fancybox-title-inside-wrap {
	padding-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}

/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min--moz-device-pixel-ratio: 1.5),
	   only screen and (min-device-pixel-ratio: 1.5){

	#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
		background-image: url('img/fancybox_sprite@2x.png');
		background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
	}

	#fancybox-loading div {
		background-image: url('img/fancybox_loading@2x.gif');
		background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
	}
}

.progress
{
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
}
.shadowblockmenu-v{
font: bold 14px Germand;
width: 190px; /* width of menu */
}

.shadowblockmenu-v ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}

.shadowblockmenu-v ul li{
margin:0;
padding:0;
}

.shadowblockmenu-v ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.shadowblockmenu-v ul li a:hover, .shadowblockmenu-v ul li a.selected{
color: black;
-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item  */
-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
}

/******************************* .tdunkel  *******************************/
.tdunkel {
  background:#666666;
}
/******************************* .gazet  *******************************/
.gazet {
  background-image:url(img/ui/gazet.png);
  color:#FF9900;
}
/******************************* .gazet  *******************************/
.gazet2 {
  background-image:url(img/ui/gazet2.png);
  color:#CC6600;
}
/******************************* .tmarkiert  *******************************/
.tmarkiert {
  background:#212121;
  color:#FFF;
}
table {
    border:0;
    margin:0 auto;
    
	font-size:11px;
	width:100%;
}

.thell { 
    background: #000000;
    color:#82828;
    padding:5px; 
    border-bottom: 1px dashed #565656; 
	
}
.bbfufu { 
    background: #FFFFFF;
    color:#000000;
    padding:5px; 
    border-bottom: 1px dashed #565656; 
}

.Bleeding {
	font-family: Bleeding;
	cursor:default;
}
.Arggotsc {
	font-family: Arggotsc;
	cursor:default;
}
.Blazed {
	font-family: Blazed;
	cursor:default;
}
.Minecrafter1 {
	font-family: Minecrafter1;
	cursor:default;
}
.Minecrafter2 {
	font-family: Minecrafter2;
	cursor:default;
}
.Minecrafter3 {
	font-family: Minecrafter3;
	cursor:default;
}
@font-face {
	font-family: Minecrafter3;
	src: url('font/Blox2.ttf');
}
@font-face {
	font-family: Bleeding;
	src: url('font/Bleeding_Cowboys.ttf');
}
@font-face {
	font-family: Arggotsc;
	src: url('font/Arggotsc.ttf');
}
@font-face {
	font-family: Blazed;
	src: url('font/Blazed.ttf');
	cursor:default;
}

@font-face {
	font-family: Minecrafter1;
	src: url('font/Minecrafter.Alt.ttf');
}
@font-face {
	font-family: Minecrafter2;
	src: url('font/Minecrafter.Reg.ttf');
	cursor:default;
}
/*********NW0*********/
.nw0 {
	background:url('img/news/allgemeinnw.png');
	width:100px;
	height:100px;
	cursor:default;
	
}
.nw0:hover {
	background:url('img/news/allgemeinnwh.png');
	width:100px;
	height:100px;
	cursor:default;
}
/*********NW1*********/
.nw1 {
	background:url('img/news/ankündigungnw.png');
	width:100px;
	height:100px;
	cursor:default;
	
}
.nw1:hover {
	background:url('img/news/ankündigungnwh.png');
	width:100px;
	height:100px;
	cursor:default;
}
/*********NW2*********/
.nw2 {
	background:url('img/news/eventnw.png');
	width:100px;
	height:100px;
	cursor:default;
	
}
.nw2:hover {
	background:url('img/news/eventnwh.png');
	width:100px;
	height:100px;
	cursor:default;
}
/*********NW3*********/
.nw3 {
	background:url('img/news/servernw.png');
	width:100px;
	height:100px;
	cursor:default;
	
}
.nw3:hover {
	background:url('img/news/servernwh.png');
	width:100px;
	height:100px;
	cursor:default;
}
/*********NW4*********/
.nw4 {
	background:url('img/news/wartungnw.png');
	width:100px;
	height:100px;
	cursor:default;
	
}
.nw4:hover {
	background:url('img/news/wartungnwh.png');
	width:100px;
	height:100px;
	cursor:default;
}
