/* =============================================================================
  CSS, MAIN
============================================================================= */
body {background-color:#030303;color:#b1b1b1; font-family: 'Roboto Condensed', sans-serif; font-size:100%;}

/* =============================================================================
  CSS, DEFAULT LINKS
============================================================================= */
a {text-transform:uppercase;}
a, a:visited { color: #f1f1f1; text-decoration: none!important; font-weight: bold; transition: color 200ms ease-out; }
a:hover, a:active { color: #deff00; transition: color 200ms ease-out; }

.active a, .active a:visited { color: #deff00; transition: color 200ms ease-out; }
a span { font-size: 10px; color: #888888; display: block; }
#main__menu li:hover i {color:#deff00; transition: color 200ms ease-out; }

sup {vertical-align: super;font-size:60%;color:#deff00;}

/* =============================================================================
  CSS, WIDTHS, SHADOWS
============================================================================= */
.w20 {width:20%;}
.w25 {width:25%;}
.w30 {width:30%;}
.w35 {width:35%;}
.w40 {width:40%;}
.w45 {width:45%;}
.w50 {width:50%;}
.w55 {width:55%;}
.w60 {width:60%;}
.w65 {width:65%;}
.w70 {width:70%;}
.w75 {width:75%;}
.w80 {width:80%;}
.w85 {width:85%;}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* =============================================================================
  CSS, BG VIDEO
============================================================================= */
.video-background { background: rgba(0,0,0,0.2); background-size: cover; position: fixed; top: 0; right: 0; bottom: 0; left: -580px; z-index: -99; }
.video-foreground,
.video-background iframe { position: absolute; top: 0; left: 0; width: 110%; height: 100%; pointer-events: none; }
#vidtop-content { top: 0; color: #fff; }
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.2); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }

@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}

@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}

@media all and (max-width: 980px) {
  #hive__x2 {width:600px!important;transition: width 200ms ease-out; }
}

@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}

@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
.hive__servers .items {display:block;}
}

/* =============================================================================
  CSS, CONTENT
============================================================================= */
#hive__x1 {position:fixed ;top:0;left:0;right:0;bottom:0;display:block;background:rgba(0,0,0,0.8);width:100%;height:100%;z-index:10;overflow:auto;}
#hive__x2 {width:980px;margin:100px auto;min-height:100px;text-align:center;z-index:20;position:relative;padding:0 0 200px 0;}

.enter__hive {position:fixed ;top:50px;left:50px;right:50px;bottom:50px;display:block;background:rgba(0,0,0,0.9);z-index:99;overflow:none;border-radius:20px;}
.enter__hive .enter__content {padding:100px;text-align:center;position:relative;}
.enter__hive .enter__content .enterBtn {margin:120px 0px;}
.enter__hive .enter__content .enterBtn a {letter-spacing:-3px;border-top:3px solid #888;padding:16px 0 0 0;font-size:34px;font-weight:600;}
.enter__hive .welcome__text {width:50%;margin:0 auto;}
.enter__hive .welcome__text ul {margin:40px auto;position:relative;display:block;height:128px;text-align:center;width:464px;}
.enter__hive .welcome__text ul li {float:left;margin:0 40px 0 0;}
.enter__hive .welcome__text ul li:last-child {margin:0;}
.enter__hive .welcome__text ul li img {opacity:0.5;width:128px;height:128px;transition: all 400ms ease; }
.enter__hive .welcome__text ul li:hover img {opacity:0.8;transition: all 400ms ease; }
.enter__hive .welcome__signature {font-family: 'Just Another Hand', cursive;color:#deff00;margin:100px auto 0 auto;font-size:28px;}
.enter__hive .welcome__signature div {color:#b1b1b1;font-size:14px;font-family: 'Roboto Condensed', sans-serif; width:100%;}
.enter__hive .welcome__title {letter-spacing:-2px;font-weight:700;width:50%;font-size:42px;color:#f1f1f1;border-bottom:3px solid #888;padding:0 0 16px 0;margin:0 auto 20px auto;text-transform:uppercase;}

.logo_main {font-size:174px;font-weight:700;letter-spacing:-14px;color:#fff;}

.social_main {margin:20px 0 100px 0;}
.social_main a {border-top:3px solid #888;padding:16px 0 0 0;font-size:34px;font-weight:bold;letter-spacing:-3px;}

.hive__spacer {text-align: center;margin: 300px 0 0 0;clear:both;height:1px;width:100%;}

.hive__scroll {margin:100px 0 40px 0;}
.hive__scroll img {opacity:0.3;}


.header {padding:10px 0px;border-bottom:3px solid #888;width:100%;margin: 0 0 20px 0;}
.header h1 {font-size:32px;color:#f1f1f1;text-transform:uppercase;font-weight:700;padding:10px 0px;}
.description {font-size:18px;font-weight:300;margin:20px 0 80px 0;}

.hive__servers {text-align:left;}
.hive__servers .items {display: flex;}
.hive__servers .items:last-child {margin:0;}
.hive__servers .item {float:left;flex: 1;text-align:center;padding:0 10px;position:relative;}
.hive__servers .item .item_header {padding:4px 0px;border-bottom:1px solid #888;width:100%;margin: 0 0 4px 0;}
.hive__servers .item .item_header h1 {font-size:22px;color:#f1f1f1;text-transform:uppercase;font-weight:700;padding:4px 0px;}
.hive__servers .item_icon {width:84px;height:84px;background:url(../img/icon_frame.png) no-repeat;text-align:center;font-size:40px;color:#deff00;line-height:80px;font-weight:700;margin:0 auto;}
.hive__servers .item_icon span {letter-spacing:-6px;width:auto;margin:0 0 0 -10px;}

.hive__vip {text-align:left;margin:180px 0 0 0;}
.hive__vip .items {display: flex;}
.hive__vip .items:last-child {margin:0;}
.hive__vip .mvp {background:rgba(255,255,255,0.05);border:1px solid #deff00!important;}
.hive__vip .item_content span {color:#deff00;}
.hive__vip .mvp .item_header h1 {color:#deff00;}
.hive__vip .mvp .buttons .button a {color:#deff00;background:rgba(0,0,0,0.4);}
.hive__vip .mvp .buttons .button a:hover {background:rgba(0,0,0,0.8);}
.hive__vip .item {position:relative;flex: 3;column-gap: 20px;text-align:center;padding:20px;border:1px solid #444444;margin:0 20px 0 0;border-radius:8px;}
.hive__vip .item .item_header {padding:4px 0px;border-bottom:1px solid #888;width:100%;margin: 0 0 4px 0;}
.hive__vip .item  h1 {font-size:32px;color:#f1f1f1;text-transform:uppercase;font-weight:700;padding:4px 0px;}
.hive__vip .item .item_content {font-size:12px;text-transform:uppercase;}
.hive__vip .item .badge {position:absolute; right:10px;top:-20px;}

.tabs {margin:0 0 40px 0;height:60px;}
.tabs:last-child {margin:0;}
.tabs .tab {float:left;padding:14px 20px; margin:0 20px 0 0;border-radius:14px;background:rgba(255,255,255,0.1);transition: all 200ms ease; }
.tabs .tab:hover {background:rgba(222,255,0,0.8);color:#030303;transition: all 200ms ease;cursor: pointer;}
.tabs .tab:hover h1, .tabs .tab:hover h2 {color:#030303;transition: all 200ms ease;}
.tabs .tab i {float:left;font-size:30px;color:#deff00;}
.tabs .active {background:rgba(222,255,0,0.8);}
.tabs .active i {color:#fff;}
.tabs .active h1, .tabs .active h2 {color:#030303;}
.tabs .active:hover {cursor:default;}
.tabs h1, .tabs h2 {margin:0 0 0 40px;}
.tabs h1 {font-size:20px;color:#fff;font-weight:700;text-transform:uppercase;}
.tabs h2 {font-size:12px;color:#fff;font-weight:300;text-transform:uppercase;}
.vip__2x {display:none;}
.vip__10x {display:none;}
.vip__1m {}

.hive__rules {text-align:left;margin:180px 0 0 0;}
.hive__rules ul.list li:hover {font-size:18px; }
.hive__footer {text-align:left;margin:180px 0 0 0;}
.hive__footer .header h1 {font-size:20px;}
.hive__footer .description {font-size:11px;text-transform:uppercase;}

.rules .list ul {margin:20px 0px;}
.rules .list ul li {color:#fff;padding:4px 4px 4px 8px;margin:0 0 8px 0;border-left:1px solid #888;text-align:left;font-weight:300;font-size:14px;}
.rules .list ul li:hover {font-size:18px;color:#deff00;transition: all 300ms ease;padding:2px 2px 3px 8px;border-left:1px solid #deff00;}
.rules .list ul li span {font-weight:700;}

.item .list ul {margin:20px 0px;}
.item .list ul li {color:#fff;padding:4px 4px 6px 4px;margin:0 0 4px 0;border-bottom:1px solid #888;text-align:left;font-weight:300;font-size:14px;}
.item .list ul li span {font-weight:700;}

.buttons {text-align:center;margin:30px 0px 0px 0px;}
.buttons .button a {padding:6px 12px;border-radius:6px;background:rgba(255,255,255,0.1);transition: all 200ms ease; }
.buttons .button a:visited {padding:6px 12px;border-radius:6px;background:rgba(255,255,255,0.1);transition: all 0.200ms ease; }
.buttons .button a:hover, .buttons .button a:active {background:rgba(222,255,0,0.8);color:#030303;transition: all 200ms ease; }

.soundbar {width:30px;text-align:center;margin:100px auto 20px auto;}
.equalizer {width:26px;height:30px;cursor:pointer;position:relative;}