/*!
 * Bootstrap v3.4.0 (https://getbootstrap.com/)
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */


.margin-bottom-10,
.margin-bottom-100,
.margin-bottom-15,
.margin-bottom-20,
.margin-bottom-25,
.margin-bottom-30,
.margin-bottom-35,
.margin-bottom-40,
.margin-bottom-45,
.margin-bottom-5,
.margin-bottom-50,
.margin-bottom-55,
.margin-bottom-60,
.margin-top-10,
.margin-top-100,
.margin-top-15,
.margin-top-20,
.margin-top-25,
.margin-top-30,
.margin-top-35,
.margin-top-40,
.margin-top-45,
.margin-top-5,
.margin-top-50,
.margin-top-55,
.margin-top-60 {
    clear: both
}

.spinner-wrapper {
	position: fixed;
	z-index: 999999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    background-color: black;
    box-shadow: 0px 0px 7px 1px rgb(0 0 0 / 50%);

}

.spinner {
	position: absolute;
	top: 50%; /* centers the loading animation vertically one the screen */
	left: 50%; /* centers the loading animation horizontally one the screen */
	width: 3.75rem;
	height: 1.25rem;
	margin: -0.625rem 0 0 -1.875rem; /* is width and height divided by two */ 
	text-align: center;
}

.spinner > div {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 100%;
	background-color: rgb(22, 134, 179);
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); }
	40% { -webkit-transform: scale(1.0); }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
	}
}


:root {
    --neutral-color: #777;
    --primary-color: #04a6e1;
    --secondary-color: #22edfc;
    --font-color: #aaaaaa;
    --font-color-a: #cccccc;
    --font-color-a-hover: #ffffff;
    --bg-color: #ffffff;
    --bg-color-opposite: #000000;
    --bg-color-shadow-1: rgba(0,0,0,0.1);
    --bg-color-shadow-3: rgba(0,0,0,0.3);
    --bg-color-shadow-5: rgba(0,0,0,0.5);
    --bg-color-shadow-7: rgba(0,0,0,0.7);
    --bg-color-shadow-8: rgba(0,0,0,0.8);
    --bg-color-shadow-9: rgba(0,0,0,0.9);
    --bg-main-banner: url(../images/bg-site-2-1.jpg) center top no-repeat;
    --logo-main-banner: url(../images/logo.png) no-repeat;
    --bg-footer: url(../images/light/bg-footer.jpg) center bottom no-repeat;
    --bg-content: url(../images/light/bg-content.jpg) center top no-repeat;
    --bg-content-box: rgba(250, 250, 250, 0.3);
}

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #28a745;
    --bs-teal: #20c997;
    --bs-cyan: #17a2b8;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #28a745;
    --bs-info: #17a2b8;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #343a40;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

#main-banner {
    background: var(--bg-main-banner);
    background-size: cover;
    width: 100%;
    height: 1000px;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto;
    place-content: center;
}

#main-banner .container {
  padding-top: 55px;
}

#main-banner a {
  background: var(--logo-main-banner);
  position: inherit;
  left: 0;
  right: 0;
  width: 700px;
  height: 290px;
} 

#main-banner a:before {
  background: var(--logo-main-banner);
  position: absolute;
  content: "";
  width: 700px;
  height: 290px;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.3);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;

}

#main-banner a:hover:before{
  opacity: .6;
  transform: scale(1);
}
#main-banner .animated-1 {
  -webkit-animation: animated-down-up 2s ease-in-out infinite alternate-reverse both;
  animation: animated-down-up 2s ease-in-out infinite alternate-reverse both;
}
#main-banner .animated-2 {
  -webkit-animation: animated-up-down 2s ease-in-out infinite alternate-reverse both;
  animation: animated-up-down 2s ease-in-out infinite alternate-reverse both;
}

#main-banner .animated-2 {
    -webkit-animation: animated-up-down 2s ease-in-out infinite alternate-reverse both;
    animation: animated-up-down 2s ease-in-out infinite alternate-reverse both;
}

.img-fluid {
    max-width: 500px;
    height: auto;
}
img, svg {
    vertical-align: middle;
}

[data-aos][data-aos][data-aos-delay="500"].aos-animate, body[data-aos-delay="500"] [data-aos].aos-animate {
    transition-delay: .5s;
}
[data-aos^=zoom][data-aos^=zoom].aos-animate {
    opacity: 1;
    transform: translateZ(0) scale(1);
}
[data-aos][data-aos][data-aos-delay="500"], body[data-aos-delay="500"] [data-aos] {
    transition-delay: 0;
}
[data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease;
}
[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {
    transition-duration: 1s;
}
[data-aos^=zoom][data-aos^=zoom] {
    opacity: 0;
    transition-property: opacity,transform;
}
[data-aos=zoom-in] {
    transform: scale(.6);
}
@media (min-width: 992px) {
    .order-lg-2 {
        order: 2!important;
    }
}
.order-1 {
    order: 1!important;
}
@media (min-width: 992px) {
    .col-lg-6 {
        flex: 0 0 auto;
        width: 75%;
    }
}

.align-items-center {
    align-items: center!important;
}
.d-flex {
    display: flex!important;
}
section {
    overflow: hidden;
}

body.header-fixed-space {
    padding-top: 0px
}

.wrapper {
    /* background: #010101; */
}

@media (min-width:320px) {
    .container.menu {
        width: 100%;
    }
    .container.default {
        width: 1000px;
    }
}

@media (min-width:512px) {
    .container.menu {
        width: 100%;
    }
    .container.default {
        width: 1000px;
    }
}

@media (min-width:768px) {
    .container.default,
    .container.menu {
        width: 980px;
    }
}

@media (min-width:992px) {
    .container.default,
    .container.menu {
        width: 980px;
    }
}

@media (min-width:1200px) {
    .container.default,
    .container.menu {
        width: 1000px
    }
}

@media only screen and (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

.loader,
.loader:after,
.loader:before {
    background: #687074;
    -webkit-animation: skin 1s infinite ease-in-out;
    animation: skin 1s infinite ease-in-out;
    width: 1em;
    height: 4em
}

.loader:after,
.loader:before {
    position: absolute;
    top: 0;
    content: ""
}

.fadeIn,
.layer-template,
.loader {
    position: relative;
}

.loader:before {
    left: -1.5em
}

.loader {
    text-indent: -9999em;
    margin: 2em auto;
    font-size: 7px;
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s
}

.loader:after {
    left: 1.5em;
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s
}

@-webkit-keyframes skin {
    0%,
    100%,
    80% {
        box-shadow: 0 0 #687074;
        height: 4em
    }
    40% {
        box-shadow: 0 -2em #687074;
        height: 5em
    }
}

@keyframes skin {
    0%,
    100%,
    80% {
        box-shadow: 0 0 #687074;
        height: 4em
    }
    40% {
        box-shadow: 0 -2em #687074;
        height: 5em
    }
}

.panel-adjust {
    height: 41px
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 1s;
    animation-name: fadeIn;
    animation-duration: 1s
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.layer-template {
    border-bottom: 0px solid dodgerblue;
}

.layer-template a.layer-logo {
    margin-top: 75px;
    height: 60px
}
    .main,
.sidebar {
    float: left
}
.main.content {
    margin: 0;
}
.sidebar.left {
    margin-right: 10px;
    width: 278px
}
.sidebar.right {
    margin-left: 10px;
    width: 278px
}
section.slideshow {
    width: 100%;
    margin-bottom: 10px
}
section.slideshow div#slider {
    padding: 8px 8px 10px;
    /* background: rgba(255, 255, 0, .1); */
    border: 1px solid #1f9c97;
	-moz-box-shadow:    inset 0 0 10px #231b05;
	-webkit-box-shadow: inset 0 0 10px #231b05;
	box-shadow:         inset 0 0 10px #231b05;
}
section.slideshow div#slider div.fluxslider div.surface {
    width: 100%;
    border: 0px solid #A17E0A;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -ms-box-sizing: content-box;
    box-sizing: content-box
}
section.slideshow div#slider div.fluxslider ul.pagination {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -ms-box-sizing: content-box;
    box-sizing: content-box;
    padding: 10px 0!important;
    overflow: hidden
}
section.slideshow div#slider div.fluxslider ul.pagination li {
    text-indent: 10000px;
    height: 8px;
    width: 8px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    background: #ccc;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .1)
}
section.slideshow div#slider div.fluxslider ul.pagination li.current {
    background: rgba(0, 0, 0, .6)
}

.headline {
    display: block;
    border-bottom: 1px #e4e9f0
}
.headline h2,
.headline h3,
.headline h4 {
    margin: 0 0 -2px;
    padding-bottom: 5px;
    display: inline-block;
    border-bottom: 2px solid rgb(0 100 100)
}
.bn-donation,
.bn-download,
.bn-register {
    display: block;
    height: 70px;
    width: 100%
}
.margin-bottom-5 {
    margin-bottom: 5px!important
}
.margin-bottom-10 {
    margin-bottom: 10px!important
}
.margin-bottom-15 {
    margin-bottom: 15px!important
}
.margin-bottom-20 {
    margin-bottom: 20px!important
}
.margin-bottom-25 {
    margin-bottom: 25px!important
}
.margin-bottom-30 {
    margin-bottom: 30px!important
}
.margin-bottom-35 {
    margin-bottom: 35px!important
}
.margin-bottom-40 {
    margin-bottom: 40px!important
}
.margin-bottom-45 {
    margin-bottom: 45px!important
}
.margin-bottom-50 {
    margin-bottom: 50px!important
}
.margin-bottom-55 {
    margin-bottom: 55px!important
}
.margin-bottom-60 {
    margin-bottom: 60px!important
}
.margin-bottom-70 {
    margin-bottom: 70px!important
}
.margin-bottom-80 {
    margin-bottom: 80px!important
}
.margin-bottom-90 {
    margin-bottom: 90px!important
}
.margin-bottom-100 {
    margin-bottom: 100px!important
}
.margin-top-5 {
    margin-top: 5px!important
}
.margin-top-10 {
    margin-top: 10px!important
}
.margin-top-15 {
    margin-top: 15px!important
}
.margin-top-20 {
    margin-top: 20px!important
}
.margin-top-25 {
    margin-top: 25px!important
}
.margin-top-30 {
    margin-top: 30px!important
}
.margin-top-35 {
    margin-top: 35px!important
}
.margin-top-40 {
    margin-top: 40px!important
}
.margin-top-45 {
    margin-top: 45px!important
}
.margin-top-50 {
    margin-top: 50px!important
}
.margin-top-55 {
    margin-top: 55px!important
}
.margin-top-60 {
    margin-top: 60px!important
}
.margin-top-70 {
    margin-top: 70px!important
}
.margin-top-80 {
    margin-top: 80px!important
}
.margin-top-90 {
    margin-top: 90px!important
}
.margin-top-100 {
    margin-top: 100px!important
}
.tbl-color-light {
    background: #fcfcfc
}
.no-padding {
    padding: 0!important
}
.bn-register {
    background: url(../images/bn-register.png) no-repeat
}
.bn-register:hover {
    background-position: 0 -70px
}
.bn-download {
    background: url(../images/bn-download.png) no-repeat
}
.bn-download:hover {
    background-position: 0 -70px
}
.bn-donation {
    background: url(../images/bn-donation.png) no-repeat
}
.bn-donation:hover {
    background-position: 0 -70px
}
.status {
    background: url(../images/sprite-status.png) no-repeat;
    display: inline;
    height: 16px;
    width: 32px;
    padding-right: 21px;
	font-size: 12px;
}
.status-text {
	font-size: 14px;
}
.status.online {
    background-position: 0 -16px
}
.status.offline {
    background-position: 0 1px
}
.fancy-collapse-panel .panel-default>.panel-heading {
    padding: 0
}
.fancy-collapse-panel .panel-heading a {
    padding: 12px 10px 12px 15px;
    display: inline-block;
    width: 100%;
    position: relative;
    text-decoration: none
}
.fancy-collapse-panel .panel-heading a:after {
    font-family: FontAwesome;
    content: "\f150";
    position: absolute;
    left: 15px;
    font-size: 18px;
    font-weight: 200;
    top: 50%;
    line-height: 1;
    margin-top: -9.5px;
}
.fancy-collapse-panel .panel-heading a.collapsed:after {
    content: "\f151";
    margin-top: -9.5px;
}
.well.well-content {
    padding: 20px 50px;
    border-radius: 90px;
}
.btn-100 {
    width: 100px
}
.btn-200 {
    width: 200px
}
.footer {
	background-color: #0a1127; 
    margin-top: 100px;
}
.footer p {
    text-align: center;
}

.footer .social-media a {
    display: inline-block;
    background-color: #3c9ef3;
    color: var(--bg-color);
    font-size: 18px;
    line-height: 1;
    padding: 8px 0;
    margin-right: 4px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    -webkit-transition: all 0.9s;
    -o-transition: all 0.9s;
    transition: all 0.9s;
}
table {
    background-color: transparent !important;
}


#left_menu li a {
	background-image:url(../images/menbutt.png);
	display:block;
	padding:10px;
	color:#ddd;
	padding-left:20px;
}

#left_menu a img {
    margin-right:10px;
}

#left_menu li a:hover {
	background-image:url(../images/menbutt.png);
	color:#fff;
	padding-left:30px;
}

.marquee {
    position: relative;
    overflow: hidden;
    --offset: 20vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));
}

.marquee__inner {
    width: fit-content;
    display: flex;
    position: relative;
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 5s linear infinite;
    animation-play-state: paused;
}

.marquee span {
    padding: 0 2vw;
}

.marquee:hover .marquee__inner {
    animation-play-state: running;
}

@keyframes marquee {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
    }

    100% {
        transform: translate3d(var(--move-final), 0, 0);
    }
}


.download {
    background-image: url('../images/war.jpg');
}

.download:hover {
    background-image: url('../images/img-coral-race.jpg');
}

.info-server {
    background-color: #0c3977;
}

.info-serverstatus {
    color: white;
    border-radius: 5px;
    border: 1px solid;
    padding-left: 15px;
    padding-right: 15px;
}

.off {
    background-color: red;
}

.on {
    background-color: #77b300;
}

.tooltips {
    position: relative;
}
  
.tooltips .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    box-shadow: 0px 0px 7px 1px rgb(0 0 0 / 50%);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    display: block;
    position: absolute;
    z-index: 1;
}
  
.tooltips:hover .tooltiptext {
    visibility: visible;
}

.tooltip-relative {
    position: relative;
    }