html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
h7,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
ol,
ul {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0;
animation: esconderTexto 1s;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
html,
body {
position: relative;
overflow-x: hidden
}
body {
width: 100%;
background-color: #0f0202c2;
font-family: open sans, sans-serif;
font-size: 14px;
color: rgb(221, 221, 221);
min-height: 100vh;
}
html,body {
background-color: #030916de;
width:100vw;
height: 100vh;
margin: 0;
}
#videoBG {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position:fixed;
z-index: -1;
}
.banner {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.banner video {
position: fixed;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
}
.banner .content {
position: relative;
z-index: 1;
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.banner .content h1 {
margin: 0;
padding: 0;
font-size: 5.5em;
text-transform: uppercase;
color: #ffff;
}
.banner .content p {
font-size: 1.5em;
color: #ffff;
}
.banner .content img {
width: 40px;
height: 40px;
}
a {
transition: all .3s ease;
color: #d8d0cc;
text-decoration: none
}
a:hover {
text-decoration: none
}
p {
margin-bottom: 20px
}
h1,
h2,
h3 {
color: #ffdda9;
margin-bottom: 20px;
line-height: 1.3;
font-family: Cinzel, sans-serif;
letter-spacing: 2px
}
h1 {
font-size: 20px
}
h2 {
font-size: 20px
}
h3 {
font-size: 16px
}
table {
width: 100%
}
table tr {
background-color: #040b16
}
table td {
border-collapse: collapse;
padding: 10px 18px;
border: 1px solid #1b1c20;
color: #fff;
font-size: 14px;
text-align: center;
}
table thead td {
background-color: #041225;
text-align: left;
}
img {
max-width: 100%
}
caption {
margin-bottom: 15px
}
select {
background: #040609;
width: 100%;
border: 1px solid #36383a;
color: #fff;
padding: 17px 40px 17px 15px;
position: relative;
color: #fff;
font-size: 16px;
-webkit-appearance: none;
background-image: url(../images/select-icon.png);
background-position: right 10px center;
background-repeat: no-repeat;
-moz-appearance: none;
text-indent: .01px;
text-overflow: '';
-ms-appearance: none;
appearance: none !important;
transition: .3s;
cursor: pointer
}
select:hover {
border: 1px solid #fc9162;
box-shadow: 0 0 10px 0 rgba(252, 142, 98, .6), inset 0 0 10px 0 rgba(252, 142, 98, .6)
}
input,
textarea {
background: #091b22c5;
border: 1px solid #153a3f;
color: #fff;
padding: 10px 15px;
position: relative;
font-size: 16px;
transition: .3s;
width: 100%;
font-family: open sans, sans-serif
}
input:hover,
textarea:hover {
border: 1px solid #62e5fc;
box-shadow: 0 0 10px 0 rgba(98, 195, 252, 0.6), inset 0 0 10px 0 rgba(80, 249, 255, 0.6)
}
textarea {
min-height: 120px
}
.downloadbts {
justify-content: center;
align-items: center;
cursor: pointer;
display: grid;
z-index: 1;
margin: 5px;
}
.downloadbts img {
margin: 10px;
filter: contrast(105%) brightness(85%);
box-shadow: 0 10px 15px 4px rgba(0, 0, 0, .3);
transition: 1s;
}
.downloadbts img:hover {
filter: contrast(100%) brightness(115%);
box-shadow: 0 0 10px 0 rgba(32, 44, 51, 0.6), inset 0 0 10px 0 rgba(80, 249, 255, 0.6);
transition: 0.3s;
}
button,
.button {
background: none;
height: 18px;
}
button:hover,
.button:hover {
background: none;
filter: brightness(10%);
height: 18px;
border: none;
}
.button {
display: inline;
text-decoration: none;
line-height: 5px;
height: 18px;
}
.download-torrent {
background: url(../images/button-blue.png) no-repeat
}
.button-blue {
background: url(../images/button-blue.png) no-repeat
}
.big-button-blue {
background: url(../images/button-blue-big.jpg) no-repeat;
background-size: cover;
width: 346px;
height: 58px;
font-size: 18px;
box-shadow: 0 0 20px 5px rgba(42, 87, 255, .2)
}
:focus {
outline: none
}
::-webkit-input-placeholder {
color: #656565
}
::-moz-placeholder {
color: #656565
}
:-moz-placeholder {
color: #656565
}
:-ms-input-placeholder {
color: #656565
}
.wrapper {
width: 1200px;
padding: 0 25px;
margin: 0 auto;
}
.flex {
display: flex;
flex-wrap: wrap
}
.flex-c {
display: flex;
align-items: center;
flex-wrap: wrap
}
.flex-s {
display: flex;
justify-content: space-between;
flex-wrap: wrap
}
.flex-s-c {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap
}
.flex-c-c {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap
}
.bright:hover {
filter: brightness(120%)
}
.logo-mini {
background: url(../images/logo-mini.png) no-repeat;
width: 60px;
height: 60px;
top: 0;
margin-top: -5px;
}
.branco{
color: #ffffff;
font-size: 16px;
font-weight: 400;
}
.verde{
color: #68ffd9;
font-size: 16px;
font-weight: 400;
}
.azul{
color: #6da0ff;
font-size: 16px;
font-weight: 400;
}
.roxo{
color: #803bff;
font-size: 16px;
font-weight: 400;
}
.gold{
color: #ffc956;
font-size: 16px;
font-weight: 400;
}
.branco2{
color: #ffffff;
font-size: 15px;
font-weight: 700;
}
.verde2{
color: #68ffd9;
font-size: 15px;
font-weight: 700;
}
.gold2{
color: #ffc956;
font-size: 15px;
font-weight: 700;
}
.laranja2{
color: #ff6600;
font-size: 15px;
font-weight: 700;
}
.branco1 {
color: #ffffff;
font-size: 13.5px;
font-weight: 400;
}
.gold1{
color: #ffc956;
font-size: 13.5px;
font-weight: 400;
}
.laranja1{
color: #ff6600;
font-size: 13.5px;
font-weight: 400;
}
.verde1 {
color: #68ffd9;
font-size: 13.5px;
font-weight: 400;
}
.azul1{
color: #6da0ff;
font-size: 13.5px;
font-weight: 400;
}
.roxo1{
color: #803bff;
font-size: 13.5px;
font-weight: 400;
}
.logo-mini:hover{
background: url(../images/logo-mini2.png) no-repeat;
transform: scale(110%);
}
.topPanel {
justify-content: center;
position: fixed;
width: 100%;
background: linear-gradient(rgba(12, 21, 29, 0.95), rgba(3, 7, 10, 0.904));
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .2);
top: 0;
left: 0;
right: 0;
transition: .3s;
z-index: 20
}
.topPanel-wrapper {
width: 100%;
margin: 0 auto;
position: relative;
justify-content: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}
.nav li {
display: inline-block;
position: relative;
cursor: pointer
}
.nav li:first-child a {
color: #fff
}
.nav li a {
color: #ffffff;
font-family: Cinzel, sans-serif;
font-size: 16px;
display: block;
height: 60px;
padding: 0 30px;
line-height: 60px;
position: relative;
z-index: 1
}
.nav li ul {
position: absolute;
left: 0;
top: calc(100%);
background: rgba(0, 7, 44, 0.836);
padding: 25px 0;
min-width: 200px;
display: none
}
.nav li ul li {
display: block
}
.nav li ul li:after {
content: "";
position: absolute;
background: url(../images/drop-menu-hover.png) no-repeat;
width: 308px;
height: 133px;
left: -46px;
top: 0;
margin-top: -47px;
opacity: 0;
transition: .3s
}
.nav li ul li a {
font-size: 16px;
padding: 15px 50px;
height: auto;
line-height: 1;
color: #fcedc0 !important;
background-image: url(../images/drop-menu-icon.png);
background-position: left -20px center;
background-repeat: no-repeat
}
.dropdown-menu {
display: none;
animation: .3s opas linear
}
.dropdown-toggle.active {
color: #00ff40
}
.nav li:hover a {
color: #00ff40 !important;
transform: scale(120%)
}
.nav li ul li:hover:after {
opacity: 1
}
.nav li ul li:hover a {
color: #00ff40 !important;
padding: 15px 0 15px 70px;
background-position: left 50px center
}
.nav .sub-menu a {
padding: 0 55px 0 35px
}
.nav .sub-menu li a {
padding: 15px 50px
}
.sub-menu:before {
content: "";
position: absolute;
background: url(../images/drop-icon.png) no-repeat;
width: 12px;
height: 8px;
top: 50%;
margin-top: -4px;
right: 25px
}
.sign-in {
padding-right: 30px;
color: #ffffff;
font-family: Cinzel, sans-serif;
font-size: 16px;
display: block;
height: 60px;
line-height: 60px;
position: relative;
z-index: 1
}
.sign-in:hover {
color: #00ff40 !important;
transform: scale(120%)
}
.sign-in:hover:after {
filter: brightness(140%)
}
.topPanel.topPanel-fixed {
background: rgba(7, 10, 17, .95);
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .2)
}
.topPanel.topPanel-fixed .nav li:hover {
background: rgba(57, 255, 20, 0.15); /* hijau neon transparan */
box-shadow: inset 0 0 8px rgba(57, 255, 20, 0.3); /* glow lembut di dalam */
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.topPanel.topPanel-fixed .dropdown-toggle.active {
background: rgba(0, 0, 0, .95)
}
.topPanel.topPanel-fixed .topPanel-wrapper {
border-bottom: 0
}
.yellow-light {
background: url(../images/talismaredbkp4.png);
width: 456px;
height: 456px;
top: -460px;
left: 134px;
position: absolute;
animation: 60s p-prev linear infinite;
filter: brightness(130%);
}
@keyframes p-next {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(180deg)
}
100% {
transform: rotate(360deg)
}
}
@keyframes p-prev {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(-180deg)
}
100% {
transform: rotate(-360deg)
}
}
.hand-animation {
position: absolute;
left: 50%;
margin-left: -125px;
top: 230px
}
.light-hand {
background: url(../images/light-hand.html);
width: 350px;
height: 350px;
position: absolute;
top: 0;
left: 0;
animation: 20s light-hand linear infinite;
opacity: .7
}
.rune-hand {
background: url(../images/rune-hand.html);
width: 350px;
height: 350px;
position: absolute;
top: 0;
left: 0;
animation: 15s rune-hand linear infinite;
opacity: .8
}
@keyframes light-hand {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(-180deg)
}
100% {
transform: rotate(-360deg)
}
}
@keyframes rune-hand {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(180deg)
}
100% {
transform: rotate(360deg)
}
}
.sparks>div {
position: absolute
}
.sparks .spark_1 {
background: url(../images/spark_1.png) no-repeat;
width: 764px;
height: 313px;
right: 550px;
bottom: -120px;
transform: scale(.6);
animation: spark-1 4s linear infinite;
animation-delay: 1s
}
@keyframes spark-1 {
0% {
bottom: -320px;
transform: scale(.6);
opacity: 1
}
25% {
bottom: -240px;
transform: scale(.7);
opacity: 1
}
50% {
bottom: -160px;
transform: scale(.8);
opacity: 1
}
75% {
bottom: -80px;
transform: scale(.9);
opacity: .5
}
to {
bottom: 0;
transform: scale(1);
opacity: 0
}
}
.sparks .spark_2 {
background: url(../images/spark_2.png) no-repeat;
width: 149px;
height: 335px;
right: 780px;
bottom: -320px;
transform: scale(.6);
animation: spark-1 4s linear infinite;
animation-delay: 1s
}
.sparks .spark_3 {
background: url(../images/spark_3.png) no-repeat;
width: 128px;
height: 165px;
right: 530px;
bottom: -140px;
transform: scale(.6);
animation: spark-3 4s linear infinite;
animation-delay: 1s
}
@keyframes spark-3 {
0% {
bottom: -140px;
-webkit-transform: scale(.6);
transform: scale(.6);
opacity: 1
}
25% {
bottom: -80px;
-webkit-transform: scale(.7);
transform: scale(.7);
opacity: 1
}
50% {
bottom: -20px;
-webkit-transform: scale(.8);
transform: scale(.8);
opacity: 1
}
75% {
bottom: 40px;
-webkit-transform: scale(.9);
transform: scale(.9);
opacity: .5
}
to {
bottom: 100px;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
.sparks .spark-big {
background: url(../images/spark_4.png) no-repeat;
width: 794px;
height: 176px;
right: 550px;
bottom: -180px;
transform: scale(.6);
animation: spark-5 4s linear infinite
}
@keyframes spark-5 {
0% {
bottom: -180px;
transform: scale(.6);
opacity: 1
}
25% {
bottom: -120px;
transform: scale(.7);
opacity: 1
}
50% {
bottom: -60px;
transform: scale(.8);
opacity: 1
}
75% {
bottom: 0;
transform: scale(.9);
opacity: .5
}
to {
bottom: 60px;
transform: scale(1);
opacity: 0
}
}
.sparks2>div {
position: absolute;
}
.sparks2 .spark_1 {
background: url(../images/spark_1.png) no-repeat;
width: 764px;
height: 313px;
right: -200px;
bottom: -120px;
transform: scale(.6);
animation: spark-1 4s linear infinite;
animation-delay: 1s
}
@keyframes spark-1 {
0% {
bottom: -320px;
transform: scale(.6);
opacity: 1
}
25% {
bottom: -240px;
transform: scale(.7);
opacity: 1
}
50% {
bottom: -160px;
transform: scale(.8);
opacity: 1
}
75% {
bottom: -80px;
transform: scale(.9);
opacity: .5
}
to {
bottom: 0;
transform: scale(1);
opacity: 0
}
}
.sparks2 .spark_2 {
background: url(../images/spark_2.png) no-repeat;
width: 149px;
height: 335px;
right: 30px;
bottom: -320px;
transform: scale(.6);
animation: spark-1 4s linear infinite;
animation-delay: 2s
}
.sparks2 .spark_3 {
background: url(../images/spark_3.png) no-repeat;
width: 128px;
height: 165px;
right: 80px;
bottom: -140px;
transform: scale(.6);
animation: spark-3 4s linear infinite;
animation-delay: 2s
}
@keyframes spark-3 {
0% {
bottom: -140px;
-webkit-transform: scale(.6);
transform: scale(.6);
opacity: 1
}
25% {
bottom: -80px;
-webkit-transform: scale(.7);
transform: scale(.7);
opacity: 1
}
50% {
bottom: -20px;
-webkit-transform: scale(.8);
transform: scale(.8);
opacity: 1
}
75% {
bottom: 40px;
-webkit-transform: scale(.9);
transform: scale(.9);
opacity: .5
}
to {
bottom: 100px;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
.sparks2 .spark-big {
background: url(../images/spark_4.png) no-repeat;
width: 794px;
height: 176px;
right: -200px;
bottom: 0px;
transform: scale(.6);
animation: spark-5 4s linear infinite
}
@keyframes spark-5 {
0% {
bottom: -180px;
transform: scale(.6);
opacity: 1
}
25% {
bottom: -120px;
transform: scale(.7);
opacity: 1
}
50% {
bottom: -60px;
transform: scale(.8);
opacity: 1
}
75% {
bottom: 0;
transform: scale(.9);
opacity: .5
}
to {
bottom: 60px;
transform: scale(1);
opacity: 0
}
}
header {
height: 600px;
width: 100%;
position: relative
}
.logo {
position: absolute;
top: 220px;
left: 0
}
.online {
position: absolute;
bottom: 45px;
}
.onlineReg {
padding-top: 10px
}
.onlineBlock {
background: url(../images/online-img.html) bottom center no-repeat;
width: 300px;
height: 250px;
text-align: center;
font-size: 16px;
color: #fff;
letter-spacing: 3px;
font-family: Cinzel, sans-serif;
padding-left: 3px;
padding-top: 66px;
position: relative;
z-index: 2
}
.onlineBlock span {
display: block;
font-size: 48px;
color: #00ff40;
letter-spacing: 8px;
padding-top: 3px;
text-shadow: 0 0 20px rgba(255, 118, 18, .7)
}
.onlineReg-block {
width: 107px;
min-height: 120px;
text-align: center;
color: #fff;
font-size: 12px;
font-family: Cinzel, sans-serif;
padding-top: 95px;
letter-spacing: 1px
}
.onlineReg-block span {
display: block;
color: #00ff40;
font-size: 18px;
margin-bottom: 5px;
letter-spacing: 2px
}
.onlineReg-block-player {
background: url(../images/online-sprite.html) top left -3px no-repeat
}
.onlineReg-block-clans {
background: url(../images/online-sprite.html) top right -3px no-repeat
}
.block-50 {
width: calc(50% - 13px);
height: 300px;
box-shadow: 0 10px 10px 10px rgba(0, 0, 0, .2)
}
.block-501 {
width: 395px;
height: 215px;
box-shadow: 0 10px 10px 10px rgba(0, 0, 0, .2)
}
.swiper-news-pagination2 {
position: absolute;
background: url(../images/slider-arrow-bg.png) no-repeat;
width: 108px;
height: 40px;
right: 0px;
bottom: 0px;
z-index: 3;
transform: scale(80%);
}
.swiper-news-pagination2 .swiper-button-prev {
background: url(../images/left.png) no-repeat;
width: 24px;
height: 28px;
top: 50%;
margin-top: -14px;
filter: drop-shadow(0px 0px 20px #529dc8)
}
.swiper-news-pagination2 .swiper-button-prev:after {
display: none
}
.swiper-news-pagination2 .swiper-button-next {
background: url(../images/right.png) no-repeat;
width: 24px;
height: 28px;
top: 50%;
margin-top: -14px;
filter: drop-shadow(0px 0px 20px #c88052)
}
.swiper-news-pagination2 .swiper-button-next:after {
display: none
}
.swiper-news-pagination2 .swiper-pagination2 {
color: #fff;
font-size: 12px;
bottom: 13px
}
.swiper-news-pagination2 .swiper-pagination2 .swiper-pagination-current {
color: #cc9c54
}
.swiper-container {
width: 100%;
height: 100%;
filter: drop-shadow(0px 0px 25px #000000)
}
.swiper-news .swiper-slide img {
max-width: 100%;
height: 100%
}
.swiper-news .swiper-slide .swiper-news_info {
opacity: 0;
transition: 1.5s
}
.swiper-news .swiper-slide.swiper-slide-active .swiper-news_info {
opacity: 1
}
.swiper-news_info {
width: 561px;
height: 245px;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
padding: 0 0 35px 50px;
display: flex;
align-items: flex-end;
flex-wrap: wrap;
align-content: flex-end;
font-family: Cinzel, sans-serif
}
.swiper-news_info span {
display: block;
width: 100%;
background: linear-gradient(#00ff15, #ffffff);
-webkit-background-clip: text;
color: transparent;
font-size: 50px;
filter: drop-shadow(0px 0px 20px rgb(90, 52, 29));
display: block;
margin-bottom: 15px;
font-weight: 550;
line-height: 1;
width: 350px
}
.swiper-news_info p {
color: #00ff37;
font-size: 22px;
width: 350px;
margin-bottom: 0;
filter: drop-shadow(0px 0px 25px #000000)
}
.swiper-news-pagination {
position: absolute;
background: url(../images/slider-arrow-bg.png) no-repeat;
width: 108px;
height: 40px;
right: 35px;
bottom: 35px;
z-index: 3
}
.swiper-news-pagination .swiper-button-prev {
background: url(../images/left.png) no-repeat;
width: 24px;
height: 28px;
top: 50%;
margin-top: -14px;
filter: drop-shadow(0px 0px 20px #529dc8)
}
.swiper-news-pagination .swiper-button-prev:after {
display: none
}
.swiper-news-pagination .swiper-button-next {
background: url(../images/right.png) no-repeat;
width: 24px;
height: 28px;
top: 50%;
margin-top: -14px;
filter: drop-shadow(0px 0px 20px #c88052)
}
.swiper-news-pagination .swiper-button-next:after {
display: none
}
.swiper-news-pagination .swiper-pagination {
color: #fff;
font-size: 12px;
bottom: 13px
}
.swiper-news-pagination .swiper-pagination .swiper-pagination-current {
color: #cc9c54
}
/* Kontainer logo */
.logos {
/* gambar selalu utuh */
background: url("../images/rulebreaker.png") no-repeat center center;
background-size: contain;
/* ukuran aman-responsif */
width: 100%;
max-width: 400px;
aspect-ratio: 400 / 450; /* otomatis hitung tinggi */
height: auto; /* kalau browser lama abaikan aspect-ratio */
display: block;
margin: 0 auto; /* tetap center */
filter: brightness(100%);
/* OFFSET POSISI — atur di sini */
--dx: -350px; /* geser horizontal (+ kanan, – kiri) */
--dy: +100px; /* geser vertikal (+ bawah, – atas) */
transform: translate(var(--dx), var(--dy));
/* transisi halus saat digeser */
transition: transform .25s ease;
}
/* fallback jika browser belum dukung aspect-ratio */
@supports not (aspect-ratio: 1){
.logos { height: 450px; } /* atau set manual sesuai kebutuhan */
}
/* Utilitas cepat via class (opsional) */
.logos.up { --dy: -20px; }
.logos.down { --dy: 20px; }
.logos.left { --dx: -20px; }
.logos.right { --dx: 20px; }
.botoestop {
display: block;
position: absolute;
left:63.5%;
top: 85px;
}
.download-button {
background: url(../images/download.png) no-repeat;
width: 415px;
height: 116px;
display: block;
font-size: 30px;
color: #fff;
font-family: Cinzel, sans-serif;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
padding: 30px 0 0 135px;
filter: brightness(140%);
margin-top: 7px;
}
.buttond:hover {
background: url(../images/download-hover2.png) no-repeat;
width: 415px;
height: 116px;
display: block;
font-size: 30px;
color: #fff;
font-family: Cinzel, sans-serif;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
padding: 30px 0 0 145px;
}
.buttonp:hover {
background: url(../images/painel-hover2.png) no-repeat;
width: 415px;
height: 116px;
display: block;
font-size: 30px;
color: #fff;
font-family: Cinzel, sans-serif;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
padding: 30px 0 0 145px;
}
.buttonc:hover {
background: url(../images/cadastro-hover2.png) no-repeat;
width: 415px;
height: 116px;
display: block;
font-size: 30px;
color: #fff;
font-family: Cinzel, sans-serif;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
padding: 30px 0 0 145px;
}
.download-button span {
display: block;
font-size: 15px;
color: #ffffff;
font-family: Cinzel, sans-serif;
text-transform: none;
}
.cadastro-button {
background: url(../images/cadastro.png) no-repeat;
width: 415px;
height: 116px;
display: block;
font-size: 30px;
color: #fff;
font-family: Cinzel, sans-serif;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
padding: 30px 0 0 135px;
filter: brightness(140%);
margin-top: 7px;
}
.cadastro-button span {
display: block;
font-size: 15px;
color: #ffffff;
font-family: Cinzel, sans-serif;
text-transform: none;
}
.painel-button {
background: url(../images/painel.png) no-repeat;
width: 415px;
height: 116px;
display: block;
font-size: 30px;
color: #fff;
font-family: Cinzel, sans-serif;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
padding: 30px 0 0 135px;
filter: brightness(140%);
margin-top: 7px;
}
.painel-button span {
display: block;
font-size: 15px;
color: #ffffff;
font-family: Cinzel, sans-serif;
text-transform: none;
}
.donate-button {
background: url(../images/donate.png) no-repeat;
width: 415px;
height: 116px;
display: block;
font-size: 30px;
color: #fff;
font-family: Cinzel, sans-serif;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
padding: 30px 0 0 135px;
filter: brightness(140%);
margin-top: 7px;
}
.donate-button span {
display: block;
font-size: 15px;
color: #ffffff;
font-family: Cinzel, sans-serif;
text-transform: none;
}
.buttonb:hover {
background: url(../images/donate-hover2.png) no-repeat;
width: 415px;
height: 116px;
display: block;
font-size: 30px;
color: #fff;
font-family: Cinzel, sans-serif;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
padding: 30px 0 0 145px;
}
.more-downloads a {
color: #fff;
font-size: 12px;
letter-spacing: 1px;
display: block;
margin: 0 20px;
padding: 10px 0 10px 22px;
opacity: .4
}
.more-downloads a:hover {
opacity: 1
}
.more-downloads span {
opacity: .4
}
.windows {
background: url(../images/windows-icon.png) left center no-repeat
}
.mac {
background: url(../images/apple-icon.html) left center no-repeat
}
main {
position: relative;
z-index: 4;
min-height: 500px
}
.newsBlock {
background: url(../images/news-home-bg.png) no-repeat;
padding: 20px 35px;
filter: drop-shadow(0px 0px 25px #000000)
}
.h2-title {
align-items: flex-end;
margin-bottom: 25px
}
.h2-title2 {
align-items: flex-end;
margin-bottom: 20px
}
.h2-title2 {
align-items: flex-end;
margin-bottom: 20px
}
.h2-title span {
position: relative;
text-transform: uppercase;
color: #ffffff;
font-size: 18px;
font-family: Cinzel, sans-serif;
display: block;
padding-left: 25px;
}
.h2-title5 {
align-items: flex-end;
margin-bottom: 20px;
margin-left: 50px;
}
.h2-title5 span {
position: relative;
text-transform: uppercase;
color: #ffffff;
font-size: 18px;
font-family: Cinzel, sans-serif;
display: block;
padding-left: 25px;
}
.h2-title5 span:before {
content: "";
position: absolute;
background: url(../images/title-icon.png) no-repeat;
width: 26px;
height: 26px;
left: -5px;
top: 50%;
margin-top: -13px;
filter: drop-shadow(0px 0px 10px #ff8800)
}
.h2-title span:before {
content: "";
position: absolute;
background: url(../images/title-icon.png) no-repeat;
width: 26px;
height: 26px;
left: -5px;
top: 50%;
margin-top: -13px;
filter: drop-shadow(0px 0px 10px #ff8800)
}
.h2-title2 span {
position: relative;
text-transform: uppercase;
color: #ffffff;
font-size: 18px;
font-family: Cinzel, sans-serif;
display: block;
padding-left: 25px;
margin-bottom: -5px;
top: -10px;
}
.h2-title2 span:before {
content: "";
position: absolute;
background: url(../images/title-icon.png) no-repeat;
width: 26px;
height: 26px;
left: -5px;
top: 50%;
margin-top: -13px;
filter: drop-shadow(0px 0px 10px #ff8800)
}
.h2-title5 a {
color: #696868;
font-size: 12px
}
.h2-title a {
color: #696868;
font-size: 14px;
}
.h2-title a:hover {
color: #fff
}
.newsLink {
font-size: 14px;
color: rgb(255, 255, 255);
letter-spacing: 3px;
text-transform: uppercase;
transition: .3s;
position: relative;
padding: 10px 0 5px 35px;
background: url(../images/title-icon.png) left 6px top 6px no-repeat
}
.newsLink:after {
content: "";
background: url(../images/news-hover.png) no-repeat;
position: absolute;
width: 64px;
height: 178px;
right: -60px;
top: 50%;
margin-top: -89px;
opacity: 0
}
.newsLink-info span {
font-size: 14px;
color: rgb(255, 255, 255);
font-family: Cinzel, sans-serif;
font-weight: 400;
letter-spacing: 3px;
}
.newsLink-info span2 {
font-size: 14px;
color: rgb(255, 155, 5);
font-family: Cinzel, sans-serif;
font-weight: 400;
letter-spacing: 3px;
}
.newsLink-info :hover {
font-size: 14px;
color: rgb(255, 188, 101);
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
}
.newsLink-info a {
display: block;
color: #fcedc0;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 300px;
padding: 1px 0
}
.newsLink-more {
color: #d7faff;
display: block;
position: relative;
padding-right: 20px
}
.newsLink-more span {
opacity: 0;
transition: .3s
}
.newsLink-more:after {
content: "";
position: absolute;
background: url(../images/h-right.html) no-repeat;
width: 8px;
height: 12px;
right: 0;
top: 50%;
margin-top: -6px;
transition: .3s
}
.newsLink:hover:after {
opacity: 1
}
.newsLink:hover .newsLink-info a {
color: #fff;
text-decoration: underline
}
.newsLink:hover .newsLink-more span {
opacity: 1
}
.newsLink:hover .newsLink-more:after {
background: url(../images/right.png) no-repeat;
width: 24px;
height: 28px;
margin-top: -14px;
right: -20px;
filter: drop-shadow(0px 0px 10px #ff2a00)
}
.rightBodyLinks {
position: fixed;
right: 0;
top: 30%;
background: rgba(0, 0, 0, .95);
padding: 3px 5px 7px;
z-index: 8
}
.rightBodyLinks a {
display: block;
text-align: center;
color: #fcedc0;
font-family: Cinzel, sans-serif;
font-size: 14px;
margin: 8px 0
}
.rightBodyLinks a span {
display: block;
background-image: url(../images/right-panel-bg.html);
width: 70px;
height: 70px;
position: relative;
transition: .3s
}
.rightBodyLinks a span img {
position: absolute
}
.rightBodyLinks a:hover span {
background-image: url(../images/right-panel-bg-hover.html)
}
.r-wiki span img {
bottom: 18px;
left: 18px
}
.r-shop span img {
bottom: 18px;
left: 17px
}
.r-forum span img {
bottom: 18px;
left: 18px
}
.line {
display: block;
background: url(../images/line.png) center no-repeat;
width: 100%;
overflow-x: hidden;
height: 86px
}
.line3 {
display: block;
background: #4d62633f;
width: 100%;
overflow-x: hidden;
height: 1px
}
.line4 {
display: block;
background: #2164682c;
width: 100%;
overflow-x: hidden;
height: 1px;
margin: 10px
}
.logomicro {
justify-content: center;
display: block;
background: url(../images/rbmini.png) center no-repeat;
width: 100%;
overflow-x: hidden;
height: 76px;
margin-top: -15px;
}
.copy {
text-align: center;
display: block;
margin-top: 15px;
}
.mainHomeBlockindx {
justify-content: center;
width: 100%;
}
.mainHomeBlock>div {
height: 610px
}
.mainHomeBlockindx>div {
height: 700px;
margin: 5px;
}
.blockHome {
justify-content: center;
background: url(../images/block-top-bg.jpg) center top no-repeat,
url(../images/block-bottom-bg.jpg) center bottom no-repeat;
background-color: #06190A; /* hijau gelap pekat */
box-shadow: 0 10px 15px 4px rgb(0, 0, 0);
padding: 35px;
width: 364px;
margin: 10px;
}
.blockHome2 {
justify-content: center;
background: url(../images/block-top-bg2.jpg) center top no-repeat,
url(../images/block-bottom-bg2.jpg) center bottom no-repeat;
background-color: #041407; /* hijau gelap pekat */
box-shadow: 0 0px 15px 4px rgba(0, 0, 0, 0.884);
padding: 25px;
width: 520px;
}
.blockHome3 {
justify-content: center;
background: url(../images/block-top-bg.jpg) center top no-repeat,
url(../images/block-bottom-bg.jpg) center bottom no-repeat;
background-color: #06190A; /* hijau gelap pekat */
box-shadow: 0 0px 15px 4px rgba(0, 0, 0, 0.884);
padding: 25px;
width: 340px;
}
.facebook12 {
background-color: #0A1A0A; /* hijau gelap */
box-shadow: 0 10px 15px 4px rgba(0, 0, 0, .3);
}
.h2-title-table2 {
border-bottom: 1px solid #133013; /* garis hijau gelap */
padding-bottom: 15px;
position: relative;
}
.h2-title-table {
border-bottom: 1px solid #133013; /* garis hijau gelap */
padding-bottom: 25px;
position: relative;
}
.tabTable-block {
display: none
}
.tabTable-block.active {
display: block
}
.tabTable {
margin-right: -12px
}
.tabTable-button {
cursor: pointer;
display: inline-block;
margin: 0 12px;
position: relative
}
.tabTable-button:after {
content: "";
position: absolute;
width: 50%;
margin-left: -25%;
height: 1px;
background: #fff;
left: 50%;
bottom: -26px;
opacity: 0
}
.tabTable-button.active {
color: #fff
}
.tabTable-button.active:after {
opacity: 1
}
.tableBlock-title {
background: url(../images/top-table-bg.png) repeat-x,
linear-gradient(180deg, #0A1F0A 0%, #041407 100%); /* hijau gelap gradasi */
height: 36px;
padding: 0 17px;
display: flex;
align-items: center;
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2),
inset 0 0 10px rgba(57, 255, 20, 0.15); /* glow hijau lembut */
margin-bottom: 10px;
width: 100%;
}
.tableBlock-title span {
color: #696868;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
display: block
}
.tableBlock-title_player {
width: 62%
}
.tableBlock-title_level {
width: 17%;
text-align: center
}
.tableBlock-title_score {
width: 21%;
text-align: right
}
.tableBlock-content-1 {
background-image: url(../images/barra1.png);
left: -35px;
display: flex;
width: 100%;
height: 100%;
text-align: left;
position: relative;
height: 67px;
width: 364px;
padding-bottom: 1px;
transition: 0.3s;
transform:scale(97%);
filter: brightness(100%);
}
.tableBlock-content-1 span{
left: 47px;
bottom: -20px;
display: flex;
text-align: left;
position: relative;
height: 67px;
width: 304px;
padding-bottom: 1px;
}
.tableBlock-content-1:hover {
background-image: url(../images/barra1-1.png);
filter: brightness(140%);
transform:scale(100%);
transition: 0.3s;
left: 25;
}
.tableBlock-content-2 {
background-image: url(../images/barra2.html);
left: -35px;
display: flex;
width: 100%;
height: 100%;
position: relative;
height: 67px;
width: 364px;
padding-bottom: 1px;
transition: 0.3s;
transform:scale(97%);
filter: brightness(100%);
}
.tableBlock-content-2 span{
left: 47px;
bottom: -20px;
display: flex;
position: relative;
height: 67px;
width: 364px;
padding-bottom: 1px;
}
.tableBlock-content-2:hover {
background-image: url(../images/barra2-1.html);
filter: brightness(140%);
transform:scale(100%);
transition: 0.3s;
left: 25;
}
.tableBlock-content-3 {
background-image: url(../images/barra3.html);
left: -35px;
display: flex;
width: 100%;
height: 100%;
position: relative;
height: 67px;
width: 364px;
padding-bottom: 1px;
transition: 0.3s;
transform:scale(97%);
filter: brightness(100%);
}
.tableBlock-content-3 span{
left: 47px;
bottom: -20px;
display: flex;
position: relative;
height: 67px;
width: 364px;
padding-bottom: 1px;
}
.tableBlock-content-3:hover {
background-image: url(../images/barra3-1.html);
filter: brightness(140%);
transform:scale(100%);
transition: 0.3s;
left: 25;
}
.tableBlock-content-4 {
background-image: url(../images/barra4.html);
left: -35px;
display: flex;
width: 100%;
height: 100%;
position: relative;
height: 67px;
width: 364px;
padding-bottom: 1px;
transition: 0.3s;
transform:scale(97%);
filter: brightness(100%);
}
.tableBlock-content-4 span{
left: 47px;
bottom: -20px;
display: flex;
position: relative;
height: 67px;
width: 364px;
padding-bottom: 1px;
}
.tableBlock-content-4:hover {
background-image: url(../images/barra4-1.html);
filter: brightness(140%);
transform:scale(100%);
transition: 0.3s;
left: 25;
}
.tableBlock-conten_name {
font-family: Cinzel, sans-serif;
font-size: 20px;
font-weight: 200;
width: 100%;
display: flex !important;
align-items: center;
text-align: center;
color: rgb(255, 255, 255);
line-height: 1.2;
text-shadow: 0px 0px 10px rgb(0, 0, 0);
left: 0px;
}
.tableBlock-conten_name img {
width: 22px;
height: 22px;
border-radius: 50%;
position: relative;
box-shadow:
0 5px 5px 0 rgba(0, 0, 0, .4), /* shadow hitam asli */
0 0 6px rgba(57, 255, 20, 0.6), /* glow hijau neon */
0 0 10px rgba(57, 255, 20, 0.4); /* glow hijau lebih lebar */
margin-right: 12px;
}
.tableBlock-conten_name a {
color: #fff;
position: relative;
bottom: 20;
}
.tableBlock-conten_lvl {
width: 17%;
justify-content: center;
color: #a97fff
}
.tableBlock-conten_scr {
width: 21%;
justify-content: flex-end;
color: #ffdda9
}
.color-purple {
color: #a97fff
}
.color-blue {
color: #4990df
}
.color-green {
color: #4ac08d
}
.color-yellow {
color: #e0a45e
}
.all-button {
text-align: center;
margin-top: 25px
}
.tablePopup {
position: absolute;
background: #000;
padding: 15px 25px;
width: 215px;
z-index: 10;
right: calc(100% + 15px);
top: -40px;
display: none
}
.tablePopup:after {
content: '';
position: absolute;
right: -20px;
top: 36px;
border: 10px solid transparent;
border-left: 10px solid #000
}
.tablePopup-title {
font-size: 12px;
color: #fff;
font-weight: 600;
display: block;
text-align: center;
margin-bottom: 18px
}
.tablePopup-ava {
text-align: center;
margin-bottom: 18px
}
.tablePopup-ava img {
width: 75px;
height: 75px;
border-radius: 50%
}
.tablePopup-block {
display: flex;
justify-content: space-between;
margin-bottom: 18px
}
.tablePopup-block:last-child {
margin-bottom: 18px
}
.tablePopup-block span {
display: block
}
.tablePopup-block span:first-child {
color: #8485a4
}
.tablePopup-block span:last-child {
text-align: right
}
.tableBlock-conten_name a:hover .tablePopup {
display: block;
animation: .5s opas linear
}
.forumBlock-content {
margin-top: -15px
}
.forumBlock {
display: flex;
border-bottom: 1px solid rgba(255, 255, 255, .1);
padding: 15px 0
}
.forumBlock-ava {
width: 55px
}
.forumBlock-ava img {
width: 36px;
height: 36px;
border-radius: 50%;
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .5)
}
.forumBlock-text {
width: calc(100% - 55px)
}
.forumBlock-text_link {
color: #fcedc0;
font-size: 13px;
display: block;
margin-bottom: 10px;
line-height: 1.2
}
.forumBlock-text_link:hover {
color: #fff;
text-decoration: underline
}
.forumBlock-text_info {
font-size: 11px;
display: flex
}
.forumBlock-text_info-nick {
margin-right: 10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
max-width: 90px;
padding: 1px 0
}
.forumBlock-text_info-nick a {
color: #686868
}
.forumBlock-text_info-nick a:hover {
color: #fff
}
.forumBlock-text_info-date {
margin-left: 10px
}
.forumBlock-text_info-comments {
margin-left: 20px;
background: url(../images/comment-icon.png) left center no-repeat;
padding-left: 15px
}
.admin-group {
color: #6579fe !important
}
.admin-group:hover {
color: #fff !important
}
.socHome {
width: 300px
}
.socHome2 {
width: 270px;
}
.socButton {
width: 300px;
height: 87px;
display: flex;
align-items: center;
align-content: center;
flex-wrap: wrap;
font-size: 30px;
color: #fff;
font-family: Cinzel, sans-serif;
font-weight: 700;
padding-left: 110px;
position: relative;
margin-bottom: 10px;
left: -3px;
box-shadow: 0 10px 15px 4px rgba(0, 0, 0, .3);
}
.socButton:hover {
padding-left: 120px
}
.socButton span {
display: block;
width: 100%;
color: #fcedc0;
font-size: 13px;
font-weight: 400;
font-family: open sans, sans-serif;
margin-top: 5px
}
.socButton:before {
content: "";
position: absolute;
left: 40px;
top: 50%
}
.socButton.socWpp {
background: url(../images/wpp.jpg) no-repeat
}
.socButton.socWpp:before {
background: url(../images/wpp-icon.png) no-repeat;
width: 54px;
height: 50px;
margin-top: -25px
}
.socButton.socTwitch {
background: url(../images/twitch.jpg) no-repeat
}
.socButton.socTwitch:before {
background: url(../images/twitch-icon.png) no-repeat;
width: 54px;
height: 50px;
margin-top: -25px
}
.socButton.socYoutube {
background: url(../images/yt.jpg) no-repeat
}
.socButton.socYoutube:before {
background: url(../images/youtub-icon.png) no-repeat;
width: 54px;
height: 38px;
margin-top: -19px
}
.socButton.socDiscord {
background: url(../images/ds.jpg) no-repeat;
}
.socButton.socDiscord:before {
background: url(../images/discord-icon.png) no-repeat;
width: 54px;
height: 42px;
margin-top: -21px
}
.socButton.socFacebook {
background: url(../images/fb.jpg) no-repeat
}
.socButton.socFacebook:before {
background: url(../images/facebook-icon.png) no-repeat;
width: 54px;
height: 50px;
margin-top: -25px
}
.socButton.socInsta {
background: url(../images/insta.jpg) no-repeat
}
.socButton.socInsta:before {
background: url(../images/instaic.png) no-repeat;
width: 54px;
height: 50px;
margin-top: -25px
}
.socBlock {
background:
linear-gradient(rgba(0, 30, 0, 0.55), rgba(0, 20, 0, 0.85)), /* lapisan hijau gelap */
url(../images/soc-block.jpg) no-repeat;
width: 365px;
height: 187px;
position: relative;
box-shadow: 0 10px 15px 4px rgba(0, 0, 0, .3),
inset 0 0 15px rgba(57, 255, 20, 0.25); /* glow hijau lembut */
}
.socBlock:after {
content: "";
position: absolute;
left: 50%;
width: 1px;
height: 130px;
top: 50%;
margin-top: -65px;
background-color: rgba(57, 255, 20, 0.25); /* hijau neon transparan */
}
.socBlock-button {
text-align: center;
width: 50%;
height: 100%;
padding: 20px;
font-size: 30px;
color: #fff;
font-family: Cinzel, sans-serif;
font-weight: 700;
position: relative;
padding-top: 100px
}
.socBlock-button span {
display: block;
width: 100%;
color: #fcedc0;
font-size: 13px;
font-weight: 400;
font-family: open sans, sans-serif;
margin-top: 5px
}
.socBlock-button:before {
content: "";
position: absolute;
width: 93px;
height: 93px;
top: 10px;
left: 50%;
margin-left: -46px;
transition: .3s
}
.socBlock-button.socBlock-guides:before {
background: url(../images/guides-icon.html) no-repeat
}
.socBlock-button.socBlock-forum:before {
background: url(../images/forum-icon.html) no-repeat
}
.socBlock-button:hover:before {
top: 0
}
.bigSlider {
position: relative
}
.bigSlider:after {
content: "CLASSES";
color: #161d2f;
font-size: 122px;
font-family: Cinzel, sans-serif;
position: absolute;
top: -35px;
left: 140px;
letter-spacing: 10px;
opacity: .2
}
.slider-for {
width: 100%;
background: url(../images/big-slider-bg.html) center top 50px no-repeat;
z-index: 2;
position: relative
}
.slider-for:before {
content: "";
position: absolute;
background: url(../images/line.png) no-repeat;
width: 1148px;
height: 86px;
left: 50%;
margin-left: -574px;
top: 10px
}
.tabs-content {
display: none;
opacity: 0
}
.tabs-content.active {
display: block;
opacity: 1;
animation: 1s opas linear
}
.slideTabs {
position: relative
}
.slideContent {
position: relative;
padding: 120px 120px 70px 140px;
height: 700px
}
.hero-logo {
position: absolute;
left: -10px;
top: 65px
}
.slide-hero {
position: absolute;
right: 0;
top: 0;
z-index: 1
}
.slide-tabs-caption {
position: absolute;
display: flex;
z-index: 3;
transform: rotate(-90deg);
top: 280px;
left: -10px
}
.slide-tabs-caption li {
margin: 0 15px;
cursor: pointer
}
.slide-tabs-caption .active {
color: rgb(0, 204, 255)
}
.slideInfo {
position: relative;
z-index: 2
}
.slideInfo-name {
color: #fff;
font-size: 60px;
display: block;
font-family: Cinzel, sans-serif;
letter-spacing: 5px;
margin-bottom: 40px;
text-transform: uppercase
}
.slideInfo-text {
color: rgb(221, 221, 221);
width: 100%;
max-width: 500px;
font-size: 12.5px;
font-style: italic;
line-height: 1.4;
margin-bottom: 45px
}
.slideInfo-stats {
max-width: 580px
}
.slideInfo-stats_title {
color: #cc7954;
font-size: 18px;
font-family: Cinzel, sans-serif;
text-transform: uppercase;
margin-bottom: 20px;
display: block
}
.stats {
padding: 10px 0;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
margin-right: 20px
}
.stats span {
display: block
}
.stats-name {
color: #fff;
font-size: 12px;
font-weight: 600;
width: 80px
}
.stats-bar {
width: 140px;
background: rgba(255, 255, 255, .1);
height: 3px;
margin-right: 15px
}
.stats-bar span {
width: 0%;
height: 3px;
position: relative;
transition: 3s
}
.stats-bar span:after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 8px;
height: 3px
}
.stats-number {
font-size: 12px;
width: 30px
}
.stat-green {
color: #46c022
}
.stat-green span {
background: linear-gradient(to right, #1e3621, #4fee20)
}
.stat-green span:after {
box-shadow: 0 0 10px 1px #20ee3b
}
.stat-top {
color: #22c0b3
}
.stat-top span {
background: linear-gradient(to right, #2b8888, #20c5ee)
}
.stat-top span:after {
box-shadow: 0 0 10px 1px #20d6ee
}
.stat-red {
color: #cf4721
}
.stat-red span {
background: linear-gradient(to right, #451b15, #cf3e14)
}
.stat-red span:after {
box-shadow: 0 0 10px 1px #cf3e14
}
.stat-yellow {
color: #cd8c21
}
.stat-yellow span {
background: linear-gradient(to right, #332615, #cf8914)
}
.stat-yellow span:after {
box-shadow: 0 0 10px 1px #cf8914
}
@keyframes opas {
0% {
display: none;
opacity: 0
}
1% {
display: block;
opacity: 0
}
100% {
display: block;
opacity: 1
}
}
.slick-active .slideFor .stats-bar span {
width: 100%
}
.hero_3 {
right: 0
}
.bigSlider .slick-arrow {
width: 150px;
height: 150px;
font-size: 0;
position: absolute;
top: 50%;
margin-top: -75px;
box-shadow: none
}
.bigSlider .slick-arrow:hover {
filter: brightness(100%)
}
.bigSlider .slick-arrow.slick-prev {
background: url(../images/slick-left.jpg) no-repeat;
left: -85px
}
.bigSlider .slick-arrow.slick-next {
background: url(../images/slick-right.jpg) no-repeat;
right: -85px
}
.slideNav {
cursor: pointer;
transition: .3s
}
.slideNav-img{
background: url(../images/hero-slider-mini-bg.html) center no-repeat;
width: 120px;
height: 120px;
position: relative;
margin: 0 auto;
transition: .3s
}
.slideNav-img img {
position: absolute;
bottom: 0;
transition: .3s
}
.slideNav-text {
text-align: center;
color: #fcedc0;
font-size: 16px;
font-family: Cinzel, sans-serif;
position: relative;
top: -10px;
transition: .3s
}
.slider-nav {
width: 100%;
max-width: 1050px;
margin: 0 auto;
margin-top: -180px;
margin-left: -20px;
z-index: 5
}
.slider-nav:before {
content: "";
position: absolute;
background: url(../images/hero-border.html) no-repeat;
width: 1000px;
height: 257px;
left: 50%;
margin-left: -420px;
top: -100px
}
.bigSlider .slick-center .slideNav-img {
background: url(../images/hero-slider-mini-hover-bg.html) center no-repeat;
filter: drop-shadow(0px 0px 25px rgba(255, 133, 63, 0.7))
}
.bigSlider .slick-center .slideNav-img img {
transform: scale(1.3)
}
.bigSlider .slick-center .slideNav-text {
font-size: 20px;
top: 5px
}
.sliderGallery {
position: relative;
margin-top: -10px;
margin-bottom: 30px
}
.slider-nav .slick-track {
height: 180px;
padding-top: 30px
}
.sliderGallery .slick-list {
padding: 20px 0;
max-width: 900px;
margin: 0 auto
}
.sliderGallery .slick-arrow {
justify-content: center;
width: 65px;
height: 65px;
font-size: 0;
position: absolute;
top: 50%;
margin-top: -32px;
filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.5));
transition: .3s;
box-shadow: none
}
.sliderGallery .slick-arrow:hover {
width: 93px;
height: 93px;
margin-top: -46px
}
.sliderGallery .slick-arrow.slick-prev {
background: url(../images/c-left.html) no-repeat;
margin-left: 20%
}
.sliderGallery .slick-arrow.slick-prev:hover {
background: url(../images/c-left-hover.html) no-repeat;
margin-left: 19%
}
.sliderGallery .slick-arrow.slick-next {
background: url(../images/c-right.png) no-repeat;
margin-left: 76.4%
}
.sliderGallery .slick-arrow.slick-next:hover {
background: url(../images/c-right-hover.png) no-repeat;
margin-left: 75.7%
}
.sliderImg img {
width: 220px;
height: 145px;
transition: .3s;
margin: 0 auto
}
.sliderImg img:hover {
transform: scale(1.1);
box-shadow: 20px 0 15px 1px rgba(0, 0, 0, .5), -20px 0 15px 1px rgba(0, 0, 0, .5)
}
footer {
background: linear-gradient(
rgba(0, 20, 0, 0.925), /* hijau gelap pekat di atas */
rgba(0, 40, 0, 0.979) /* hijau lebih pekat di bawah */
);
box-shadow: 20px 0 15px 1px rgba(0, 0, 0, .5),
-20px 0 15px 1px rgba(0, 0, 0, .5);
padding: 35px 0;
}
.fb13 {
transform: scale(40%);
}
.footerMenu-block {
width: 25%;
}
.f-menu li a {
position: relative;
margin-left: 90px;
color: #fff;
opacity: .3;
display: block;
background: url(../images/menu-f-icon.png) left center no-repeat;
padding: 5px 0 5px 12px
}
.f-menu2 li a {
margin-left: 90px;
color: #fff;
opacity: .5;
display: grid;
padding: 3px;
width: 30px;
}
.f-menu2 li a:hover {
opacity: 1
}
.f-menu3 li a:hover {
opacity: 1
}
.f-menu li a:hover {
opacity: 1
}
.e-mail {
padding-top: 11px;
margin-bottom: 30px
}
.e-mail p {
margin-bottom: 14px;
color: #fff;
opacity: .3
}
.e-mail a {
color: #fff
}
.e-mail a:hover {
text-decoration: underline
}
.f-soc-icons {
display: inline;
}
.f-soc-icons a {
display: inline-block;
align-items: flex-end;
width: 30px;
opacity: .3;
margin: 5px;
}
.f-soc-icons a:hover {
opacity: 1;
}
.f-soc-icons .fb2 {
margin-top: 5px;
}
.f-soc-icons .ds {
margin-top: 5px;
}
.f-soc-icons .insta {
margin-top: 5px;
}
.f-soc-icons .yt {
margin-top: 5px;
}
.f-soc-icons .twt {
margin-top: 5px;
}
.playments img {
opacity: 0.4
}
.imgequips img {
position: relative;
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.39)
}
.copy span {
color: #fff;
opacity: .3
}
.copy a {
color: #fff;
opacity: 1
}
.copy a:hover {
text-decoration: underline
}
.f-text {
text-transform: uppercase;
font-size: 10px;
line-height: 1.3;
color: #fff;
opacity: .3
}
.modal_div {
justify-content: center;
width: 100%;
min-height: 478px;
max-width: 400px;
background: url(../images/modal-bg.png) center bottom no-repeat;
background-color: rgba(8, 18, 24, 0.849);
position: fixed;
margin-top: 60px;
align-items: center;
left: 39%;
display: none;
opacity: 0;
z-index: 35;
padding: 50px 60px;
box-shadow: 0 10px 20px 1px rgba(0, 0, 0, 0.507)
}
.modal_div .modal_close {
width: 56px;
height: 56px;
position: absolute;
top: -28px;
right: -28px;
cursor: pointer;
display: block;
background: url(../images/close-icon.png) no-repeat;
transition: .3s;
filter: drop-shadow(0px 10px 14px rgba(0, 0, 0, 0.6))
}
.modal_div .modal_close:hover {
filter: brightness(120%)
}
#overlay {
z-index: 30;
position: fixed;
background-color: #070a11;
opacity: .8;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none
}
.modalTitle {
color: #ffffff;
font-size: 32px;
font-family: Cinzel, sans-serif;
display: block;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
margin-bottom: 30px;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .7);
}
.enterButtons {
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
margin-bottom: 30px
}
.enterButtons a {
display: flex;
align-items: center;
width: 346px;
height: 58px;
font-size: 18px;
font-weight: 700;
font-family: Cinzel, sans-serif;
line-height: 1.3;
padding-left: 85px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .7);
letter-spacing: 2px
}
.facebook-button {
background: url(../images/facebook-button.html) left no-repeat;
color: #fff;
margin-bottom: 15px
}
.google-button {
background: url(../images/google-button.html) left no-repeat;
color: #000;
text-shadow: none !important
}
.fieldGroup {
position: relative;
margin: 20px 0
}
.fieldGroup input {
width: 100%;
height: 100%
}
.fieldGroup span {
position: absolute;
color: #ffffff;
font-size: 12px;
z-index: 1;
display: block;
padding: 5px;
background: #0b3035d8;
left: 10px;
top: -12px;
border: 1px solid #153a3f;
}
.fieldGroup:hover span {
color: #a8a8a8;
}
.enter {
padding-top: 10px
}
.enterLinks p {
margin-bottom: 0;
margin: 5px 0
}
.enterLinks a {
font-size: 14px
}
.enterLinks a:hover {
color: #fff
}
.forgot {
color: #696868;
margin-bottom: 6px
}
.sign {
color: #fcedc0;
text-decoration: underline
}
.btn {
position: fixed;
top: 12px;
left: 20px;
z-index: 15;
transition: .3s
}
.btn span {
display: block;
width: 25px;
height: 3px;
background: #fff;
margin: 5px 0;
opacity: .8;
border-radius: 2px;
transition: .3s;
position: relative
}
.btn.active {
left: 270px;
top: 20px
}
.btn.active span:nth-child(1) {
transform: rotate(45deg);
top: 8px
}
.btn.active span:nth-child(2) {
display: none
}
.btn.active span:nth-child(3) {
transform: rotate(-45deg)
}
.main {
display: flex;
justify-content: space-between;
margin-bottom: 190px
}
aside {
max-width: 365px;
width: 100%
}
aside>div {
margin-bottom: 15px
}
aside>div:last-child {
margin-bottom: 0
}
.content {
width: calc(100% - 365px - 25px);
box-shadow: 0 10px 15px 4px rgba(0, 0, 0, .3);
background: url(../images/content-top-bg.jpg) center top repeat-x, url(../images/content-bottom-bg.jpg) center bottom repeat-x;
background-color: #040f1d;
padding: 35px;
}
.content-page {
color: #feffff;
line-height: 1.6
}
.content-page a {
color: #ffdda9;
text-decoration: none
}
.content-page a:hover {
color: #696868
}
.content-page p {
margin-bottom: 25px
}
.h2-title-content {
border-bottom: 1px solid rgba(255, 255, 255, 0.411);
padding-bottom: 25px;
line-height: 1
}
.h2-title-content2 {
border-bottom: 1px solid rgba(79, 101, 156, 0.247);
padding-bottom: 5px;
line-height: 1
}
.h2-title-content a {
color: #fff;
text-decoration: none;
position: relative;
}
.h2-title-content a:after {
content: "";
position: absolute;
width: 50%;
margin-left: -25%;
height: 1px;
background: #fff;
left: 50%;
bottom: -26px
}
.page-date {
font-size: 13px;
color: #fcedc0
}
.page-date span {
font-weight: 600;
font-size: 18px
}
.downloadBlock-content {
padding-top: 40px;
padding-bottom: 20px
}
.downloadBlock {
background: url(../images/down-block-bg.jpg) center no-repeat;
background-size: cover;
max-width: 560px;
width: 100%;
padding: 40px 80px 55px;
margin: 0 auto;
margin-bottom: 30px;
text-decoration: none
}
.downloadBlock-title {
display: block;
color: #ffdda9;
font-size: 18px;
font-weight: 600;
text-align: center;
margin-bottom: 35px
}
.downloadBlock-title span {
color: #fff
}
.downloadBlock-text {
color: #fff;
line-height: 1.3;
text-align: center;
margin-bottom: 35px
}
.downloadBlock-button {
text-align: center
}
.d-button {
display: block;
width: 155px;
height: 105px;
text-align: center;
padding-top: 78px;
font-size: 13px;
font-weight: 600
}
.d-button.googleButton {
background: url(../images/google-img.html) center top 20px no-repeat;
background-color: #453b90;
color: #fff
}
.d-button.dropboxButton {
background: url(../images/dropbox-img.html) center top 20px no-repeat;
background-color: #1a2535;
color: #696868
}
.d-button:hover {
transform: scale(1.1);
color: #fff
}
.drivers {
margin-bottom: 80px
}
.drivers span {
display: block;
text-align: center;
color: #ffdda9;
font-size: 15px;
margin-bottom: 20px
}
.mirror-title {
color: #ffdda9;
font-size: 15px;
font-weight: 600;
display: block;
text-align: center;
margin-bottom: 60px
}
.mirrorBlock {
text-align: center;
margin-bottom: 65px
}
.mirrorBlock p {
color: #fff;
font-weight: 600;
margin-bottom: 20px
}
.mirrorBlock p span {
color: #a97fff
}
.acc {
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
margin-bottom: 30px
}
.acc-title {
display: block;
text-align: center;
color: #ffdda9;
font-size: 15px;
font-weight: 600;
margin-bottom: 15px
}
.fieldGroup-input {
background: #040609;
border: 1px solid #36383a;
color: #fff;
padding: 10px 15px;
position: relative;
font-size: 16px;
transition: .3s
}
.accBlock-content {
width: calc(50% - 15px)
}
.formGroup {
position: relative;
margin-top: 15px;
padding-bottom: 15px
}
.formGroup input {
padding: 15px
}
.formGroup div {
padding: 15px
}
.formGroup span {
position: absolute;
color: #696868;
font-size: 11px;
z-index: 1;
display: block;
padding: 5px;
background: url(../images/span-bg-input.jpg) center repeat-x;
left: 10px;
top: -10px;
display: block;
transition: .3s
}
.formGroup:hover span {
color: #fc9162;
text-shadow: 1px 1px 10px #fc9162, -1px -1px 10px #fc9162
}
.formGroup:hover div {
border: 1px solid #fc9162;
box-shadow: 0 0 10px 0 rgba(252, 142, 98, .6), inset 0 0 10px 0 rgba(252, 142, 98, .6)
}
.change-button {
text-align: center;
padding: 40px 0
}
.support {
border-bottom: 1px solid rgba(255, 255, 255, .1);
padding-bottom: 60px
}
.supportButton {
width: 50%;
text-align: center
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
width: calc(100% + 15px)
}
.block-6 {
width: 50%;
padding: 0 15px
}
.heroLeft-img {
height: 310px;
background: radial-gradient(#282240, #08090e 70%);
margin-bottom: 15px;
text-align: center
}
.heroLeft-button button,
.heroLeft-button .button {
width: 100%
}
.heroName {
font-family: Cinzel, sans-serif;
font-size: 30px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
background-color: #030508;
width: 100%;
height: 81px;
margin-bottom: 20px
}
.heroflex {
display: flex;
justify-content: space-between;
margin-bottom: 20px
}
.flexBlock {
width: calc(50% - 1px);
display: flex;
align-items: center;
justify-content: center;
height: 81px;
background-color: #030508;
color: #a97fff;
font-size: 30px;
position: relative;
border: 1px solid #3f4045
}
.flexBlock b {
font-weight: 400;
font-size: 14px;
display: block;
margin-left: 5px;
padding-top: 12px
}
.flexBlock .flexBlock-sp {
position: absolute;
top: 0;
left: 0;
height: 21px;
margin-top: -11px;
width: 100%;
display: flex;
justify-content: center;
z-index: 1
}
.flexBlock .flexBlock-sp span {
color: #fff;
font-size: 11px;
text-transform: uppercase;
display: inline-block;
padding: 0 10px;
height: 21px;
line-height: 21px;
background: url(../images/span-bg.jpg) repeat-x
}
.flexBlock-flag {
border: none
}
.flexBlock-lvl {
border: none;
background: #090b11
}
.hero {
margin-bottom: 50px
}
.heroInfo {
margin-bottom: 50px
}
.heroInfo-title {
text-align: center;
color: #a9dfff;
font-weight: 600;
font-size: 15px;
margin-bottom: 30px
}
.heroInfo-row {
display: flex;
justify-content: space-between;
background-color: #0d0f17;
margin-bottom: 2px
}
.heroInfo-row span {
padding: 17px;
color: #fff
}
.heroInfo-row span:last-child {
color: #a97fff
}
.flexBlock-guild {
background-color: #090b10;
border: none;
font-size: 20px
}
.flexBlock-guild b {
padding-top: 6px
}
.infoTitle {
display: block;
text-align: center;
color: #ffdda9;
font-size: 18px;
padding-top: 15px;
padding-bottom: 30px
}
.t-button {
display: flex;
align-items: center;
justify-content: center;
background: url(../images/transfer-button.html) no-repeat;
max-width: 469px;
width: 100%;
height: 87px;
margin: 0 auto;
margin-bottom: 15px;
cursor: pointer;
transition: .3s;
color: #fff;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px
}
.t-button:hover {
filter: brightness(120%)
}
.ticketTitle {
margin-bottom: 25px
}
.ticketTitle-number {
color: #ffdda9;
font-size: 18px;
font-family: Cinzel, sans-serif;
text-transform: uppercase;
margin: 10px
}
.ticketTitle-number span {
display: block;
color: #fff;
font-size: 12px;
padding-top: 5px
}
.table-row {
margin-right: -35px;
margin-left: -35px
}
.tableTicket thead tr {
background: url(../images/top-table-bg.png) repeat-x
}
.tableTicket thead tr td {
color: #696868;
font-size: 10px;
padding: 13px 12px;
white-space: nowrap
}
.tableTicket thead tr td:first-child {
padding: 13px 0 13px 30px
}
.tableTicket thead tr td:last-child {
padding: 13px 30px 13px 12px
}
.tableTicket thead tr td:nth-child(2) {
padding: 13px 12px 13px 0
}
.tableTicket tbody tr td {
padding: 16px 12px;
border-bottom: 1px solid #030508;
border-top: 1px solid #12141e;
line-height: 1.3
}
.tableTicket tbody tr td:first-child {
padding: 16px 0 16px 30px
}
.tableTicket tbody tr td:last-child {
padding: 16px 30px 16px 12px
}
.tableTicket tbody tr td:nth-child(2) {
padding: 16px 12px 16px 0;
white-space: nowrap
}
.tableTicket tbody tr td:nth-child(3) {
white-space: nowrap
}
.tableTicket tbody tr td:nth-child(4) {
background: #1a182a;
text-align: center
}
.message-button {
border: 2px solid #a97fff;
color: #a97fff;
text-transform: uppercase;
padding: 12px 18px;
display: block;
cursor: pointer;
transition: .3s;
white-space: nowrap;
text-align: center
}
.message-button:hover {
background: #a97fff;
color: #fff
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 40px 0
}
.pagination .number {
display: flex;
align-items: center;
justify-content: center;
background: url(../images/row.png) no-repeat;
width: 93px;
height: 93px;
position: relative;
z-index: 1;
margin: 0 -2px;
font-weight: 600;
color: #707280;
filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.4))
}
.pagination .number.pag:after {
content: '';
width: 24px;
height: 28px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -14px
}
.pagination .number.pag-prev:after {
background: url(../images/left.png) no-repeat;
margin-left: -15px
}
.pagination .number.pag-next:after {
background: url(../images/right.png) no-repeat;
margin-left: -11px
}
.pagination .number.active {
color: #fff;
background: url(../images/row-hover.png) no-repeat
}
.pagination .number:hover {
color: #fff;
background: url(../images/row-hover.png) no-repeat
}
.chatBlock {
display: flex;
padding: 20px 0
}
.chatBlock-ava {
width: 85px;
display: flex
}
.chatBlock-ava img {
width: 60px;
height: 60px;
border-radius: 50%
}
.chatBlock-content {
width: calc(100% - 85px);
background: #21212f;
box-shadow: 0 10px 20px 5px rgba(0, 0, 0, .3);
padding: 25px;
position: relative
}
.chatBlock-content_name {
color: #a27af5;
margin-bottom: 15px
}
.chatBlock-content_text {
line-height: 1.4;
margin-bottom: 15px;
color: #fff
}
.chatBlock-content_date {
color: #6a6a87;
font-weight: 600;
font-size: 12px
}
.chatBlock-content:before {
content: "";
position: absolute;
right: 100%;
top: 23px;
border: 10px solid transparent;
border-right: 10px solid #21212f
}
.chatBlock-content textarea {
background: #1a1a26;
border: 1px solid #1a1a26;
display: block;
margin-bottom: 25px;
min-height: 120px
}
.chatBlock-content textarea:hover {
border: 1px solid #fc9162
}
.chatBlock-user {
flex-direction: row-reverse
}
.chatBlock-user .chatBlock-ava {
justify-content: flex-end
}
.chatBlock-user .chatBlock-content {
text-align: right;
background: #1e253d
}
.chatBlock-user .chatBlock-content:before {
right: auto;
left: 100%;
border-left: 10px solid #1e253d;
border-right: none
}
.chatBlock-user .chatBlock-content_name {
color: #4a92c0
}
.form {
width: 100%;
max-width: 330px;
margin: 0 auto
}
.form button,
.form .button {
width: 100%;
max-width: 330px;
margin-top: 15px
}
.topTitle {
color: #ffdda9;
font-family: Cinzel, sans-serif;
font-size: 18px;
text-transform: uppercase;
margin-bottom: 20px
}
.toptext {
color: #ffffff;
font-family: Cinzel, sans-serif;
font-size: 18px;
text-align: left;
}
.toptext5 {
color: rgb(255, 246, 234);
font-family: Cinzel, sans-serif;
font-size: 18px;
line-height: 1.2;
text-align: left;
}
.toptext7 {
color: rgb(73, 219, 255);
font-family: Cinzel, sans-serif;
font-size: 18px;
line-height: 1.2;
text-align: left;
}
.toptext6 {
color: rgb(255, 233, 205);
font-size: 13px;
line-height: 1.2;
}
.toptext8 {
color: rgb(121, 246, 255);
font-size: 13px;
line-height: 1.3;
}
.toptext9 {
color: rgb(221, 221, 221);
font-size: 13px;
line-height: 1.3;
font-weight: 100;
}
.toptext10 {
color: rgb(255, 82, 82);
font-size: 13px;
line-height: 1.3;
}
.toptext11 {
color: rgb(78, 190, 255);
font-size: 13px;
line-height: 1.3;
}
.bottt {
font-size: 17px;
color: rgb(208, 255, 253);
font-family: Cinzel, sans-serif;
height: 10px;
letter-spacing: 3px;
padding-left: 0px;
transition: 0.3s;
animation: esconderTexto 1s;
cursor: pointer;
}
.bottt:hover {
font-size: 17px;
color: rgb(255, 255, 255);
font-family: Cinzel, sans-serif;
letter-spacing: 3px;
text-align: center;
transition: 0.3s;
cursor: pointer;
padding-left: 10px;
}
.bottt2 {
font-size: 22px;
color: rgb(255, 198, 132);
font-family: Cinzel, sans-serif;
animation: esconderTexto 1s;
font-weight: 300;
letter-spacing: 2px;
padding-left: 0px;
transition: 0.3s;
}
.bottt2:hover {
font-size: 22px;
color: rgb(255, 235, 212);
font-family: Cinzel, sans-serif;
letter-spacing: 2px;
cursor: pointer;
padding-left: 15px;
transition: 0.3s;
}
.bottt2 span {
position: relative;
font-size: 24px;
font-family: Cinzel, sans-serif;
display: block;
padding-left: 25px;
margin-bottom: -5px;
top: -10px;
font-weight: 500;
}
.bottt2 span:before {
content: "";
position: absolute;
background: url(../images/title-icon2.png) no-repeat;
width: 28px;
height: 26px;
font-weight: 500;
left: -5px;
top: 50%;
margin-top: -13px;
padding-left: 10px;
filter: drop-shadow(0px 0px 10px #ff8800)
}
.bottt3 {
font-size: 17px;
color: rgb(91, 195, 255);
font-family: Cinzel, sans-serif;
height: 10px;
letter-spacing: 3px;
padding-left: 0px;
transition: 0.3s;
animation: esconderTexto 1s;
cursor: pointer;
}
.bottt3:hover {
font-size: 17px;
color: rgb(173, 215, 255);
font-family: Cinzel, sans-serif;
letter-spacing: 3px;
text-align: center;
transition: 0.3s;
cursor: pointer;
padding-left: 10px;
}
.bottt4 {
font-size: 17px;
color: rgb(255, 91, 91);
font-family: Cinzel, sans-serif;
height: 10px;
letter-spacing: 3px;
padding-left: 0px;
transition: 0.3s;
animation: esconderTexto 1s;
cursor: pointer;
}
.bottt4:hover {
font-size: 17px;
color: rgb(255, 173, 173);
font-family: Cinzel, sans-serif;
letter-spacing: 3px;
text-align: center;
transition: 0.3s;
cursor: pointer;
padding-left: 10px;
}
.bottt5 {
font-size: 17px;
color: rgb(240, 240, 240);
font-family: Cinzel, sans-serif;
height: 10px;
letter-spacing: 3px;
padding-left: 0px;
transition: 0.3s;
animation: esconderTexto 1s;
cursor: pointer;
}
.bottt5:hover {
font-size: 17px;
color: rgb(255, 255, 255);
font-family: Cinzel, sans-serif;
letter-spacing: 3px;
text-align: center;
transition: 0.3s;
cursor: pointer;
padding-left: 10px;
}
.bottt6 {
font-size: 30px;
color: rgb(255, 224, 184);
font-family: Cinzel, sans-serif;
height: 600px;
letter-spacing: 3px;
}
.conteudoguia{
display: none;
}
.conteudoguia{
display: none;
}
.toptext2 {
color: rgb(255, 233, 205);
font-size: 14px;
line-height: 1.2;
}
.toptext4 {
color: rgb(255, 233, 205);
font-size: 15px;
font-family: Cinzel, sans-serif;
line-height: 1.2;
text-transform:none;
}
.toptext3 {
color: rgb(194, 194, 194);
font-size: 12px;
}
.conteudotxt1 {
color: #ffffff;
font-family: Cinzel, sans-serif;
font-size: 20px;
}
.texto0 {
color: rgb(255, 225, 169);
width: 100%;
max-width: 400px;
font-size: 15px;
line-height: 2;
margin-bottom: 45px
}
.texto1 {
color: rgb(255, 255, 255);
width: 100%;
max-width: 500px;
font-size: 13.3px;
font-style: italic;
line-height: 1.4;
margin-bottom: 45px
}
.texto2 {
color: rgb(176, 255, 238);
width: 100%;
max-width: 100px;
font-size: 13px;
line-height: 1.5;
margin-bottom: 45px
}
.texto21 {
color: rgb(176, 255, 238);
width: 100%;
max-width: 100px;
font-size: 14px;
line-height: 1.5;
margin-bottom: 45px
}
.texto22 {
color: rgb(53, 255, 97);
width: 100%;
max-width: 400px;
font-size: 15px;
line-height: 1.8;
margin-bottom: 45px
}
.texto22:hover {
color: rgb(87, 255, 123);
width: 100%;
max-width: 400px;
font-size: 15px;
line-height: 1.8;
transition: 0.3s;
text-shadow: 0 0 2px #ffffff94
}
.texto23 {
color: rgb(136, 144, 255);
width: 100%;
max-width: 400px;
font-size: 15px;
line-height: 1.8;
margin-bottom: 45px
}
.texto23:hover {
color: rgb(136, 144, 255);
width: 100%;
max-width: 400px;
font-size: 15px;
line-height: 1.8;
transition: 0.3s;
text-shadow: 0 0 2px #ffffff94
}
.texto24 {
color: rgb(255, 203, 136);
width: 100%;
max-width: 400px;
font-size: 15px;
line-height: 1.8;
margin-bottom: 45px
}
.texto24:hover {
color: rgb(255, 203, 136);
width: 100%;
max-width: 400px;
font-size: 15px;
line-height: 1.8;
transition: 0.3s;
text-shadow: 0 0 2px #ffffff94
}
.texto25 {
color: rgb(136, 191, 255);
width: 100%;
max-width: 400px;
font-size: 15px;
line-height: 1.8;
margin-bottom: 45px
}
.texto25:hover {
color: rgb(136, 188, 255);
width: 100%;
max-width: 400px;
font-size: 15px;
line-height: 1.8;
transition: 0.3s;
text-shadow: 0 0 2px #ffffff94
}
.caixa0 {
display: none;
}
.caixa1 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa2 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa3 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa4 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa2 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa6 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa7 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa8 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa9 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa10 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa11 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa12 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa13 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa14 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa15 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa16 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa17 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa18 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa19 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa20 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa21 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa22 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa23 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa24 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa25 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa26 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa27 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa28 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa29 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa30 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa31 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa32 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa33 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa34 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa35 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa36 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
.caixa37 img {
box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.329)
}
@keyframes esconderTexto {
0% {
opacity: 0;
}
80% {
opacity: 1;
}
}
.caixa0 {
display: none;
animation: esconderTexto 1s;
}
.caixa1 {
display: none;
animation: esconderTexto 1s;
}
.caixa2 {
display: none;
animation: esconderTexto 1s;
}
.caixa3 {
display: none;
animation: esconderTexto 1s;
}
.caixa4 {
display: none;
animation: esconderTexto 1s;
}
.caixa5 {
display: none;
animation: esconderTexto 1s;
}
.caixa6 {
display: none;
animation: esconderTexto 1s;
}
.caixa7 {
display: none;
animation: esconderTexto 1s;
}
.caixa8 {
display: none;
animation: esconderTexto 1s;
}
.caixa9 {
display: none;
animation: esconderTexto 1s;
}
.caixa10 {
display: none;
animation: esconderTexto 1s;
}
.caixa11 {
display: none;
animation: esconderTexto 1s;
}
.caixa12 {
display: none;
animation: esconderTexto 1s;
}
.caixa13 {
display: none;
animation: esconderTexto 1s;
}
.caixa14 {
display: none;
animation: esconderTexto 1s;
}
.caixa15 {
display: none;
animation: esconderTexto 1s;
}
.caixa16 {
display: none;
animation: esconderTexto 1s;
}
.caixa17 {
display: none;
animation: esconderTexto 1s;
}
.caixa18 {
display: none;
animation: esconderTexto 1s;
}
.caixa19 {
display: none;
animation: esconderTexto 1s;
}
.caixa20 {
display: none;
animation: esconderTexto 1s;
}
.caixa21 {
display: none;
animation: esconderTexto 1s;
}
.caixa22 {
display: none;
animation: esconderTexto 1s;
}
.caixa23 {
display: none;
animation: esconderTexto 1s;
}
.caixa24 {
display: none;
animation: esconderTexto 1s;
}
.caixa25 {
display: none;
animation: esconderTexto 1s;
}
.caixa26 {
display: none;
animation: esconderTexto 1s;
}
.caixa27 {
display: none;
animation: esconderTexto 1s;
}
.caixa28 {
display: none;
animation: esconderTexto 1s;
}
.caixa29 {
display: none;
animation: esconderTexto 1s;
}
.caixa30 {
display: none;
animation: esconderTexto 1s;
}
.caixa31 {
display: none;
animation: esconderTexto 1s;
}
.caixa32 {
display: none;
animation: esconderTexto 1s;
}
.caixa33 {
display: none;
animation: esconderTexto 1s;
}
.caixa34 {
display: none;
animation: esconderTexto 1s;
}
.caixa35 {
display: none;
animation: esconderTexto 1s;
}
.caixa36 {
display: none;
animation: esconderTexto 1s;
}
.caixa37 {
display: none;
animation: esconderTexto 1s;
}
.texto3 {
color: rgb(255, 255, 255);
width: 100%;
max-width: 400px;
font-size: 13.3px;
line-height: 1.3;
}
.texto4 {
color: rgb(255, 225, 169);
width: 100%;
font-size: 18px;
line-height: 1.4;
margin-bottom: 45px
}
.rankingTable td {
white-space: nowrap;
padding: 15px 10px
}
.rankingTable td:first-child {
padding: 15px 0 15px 35px
}
.rankingTable td:last-child {
padding: 15px 35px 15px 10px;
text-align: right
}
.rankingTable thead tr {
background: #1a1d2d
}
.rankingTable thead tr td {
color: #908585;
font-size: 15px;
text-transform: uppercase;
padding: 20px 10px
}
.rankingTable thead tr td:first-child {
padding: 20px 0 20px 35px
}
.rankingTable thead tr td:last-child {
padding: 20px 35px 20px 10px
}
.rankingTable tbody tr {
transition: .3s;
background-image: url(../images/hover-big.html);
background-position: center top -100px;
background-repeat: no-repeat
}
.rankingTable tbody tr:nth-child(even) {
background-color: #13131e
}
.rankingTable tbody tr:nth-child(odd) {
background-color: #1a1b25
}
.rankingTable tbody tr:hover {
background-position: center top -2px
}
.rankingTable tbody tr td {
color: #696868
}
.rankingTable tbody tr td:nth-child(1) {
font-size: 13px
}
.rankingTable tbody tr td:nth-child(2) {
font-size: 12px;
color: #cbff3f;
text-shadow: 0 0 8px #82e700
}
.rankingTable tbody tr td:nth-child(3) {
font-weight: 600;
color: #fff
}
.rankingTable tbody tr td:nth-child(4) {
display: flex;
align-items: center
}
.rankingTable tbody tr td:nth-child(4) img {
margin-right: 15px;
width: 24px;
height: 24px;
border-radius: 50%
}
.rankingTable tbody tr td:nth-child(6) {
font-size: 13px;
text-align: right
}
.rankingTable tbody tr td:nth-child(6) span {
color: #f08d2f
}
.register header {
height: 530px
}
.mainRegister {
max-width: 980px;
width: 100%;
position: relative;
margin: 0 auto;
display: flex;
justify-content: center
}
.blockR {
width: 100%;
max-width: 480px;
margin: 13px
}
.regBlock {
background: url(../images/modal-bg.png) center bottom no-repeat;
background-color: #030508;
padding: 50px 65px;
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .2)
}
.regBlock .modalTitle {
margin-bottom: 50px
}
.regBlock .fieldGroup {
margin: 0 0 55px
}
.regBlock .enterLinks {
display: flex;
margin-left: -8px;
margin-bottom: 40px
}
.regBlock .enterLinks p {
margin: 0 8px
}
.s-server {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: #030508;
margin-bottom: 25px
}
.s-server li {
background: url(../images/ch-bg.html) no-repeat;
height: 54px;
width: 56px;
display: flex;
justify-content: center;
align-items: center;
color: #ffdda9;
font-family: Cinzel, sans-serif;
cursor: pointer;
padding-right: 2px;
margin: 12px 8px;
transition: .3s;
position: relative
}
.s-server li:before {
content: "";
position: absolute;
background: radial-gradient(#2b3492, #141941);
width: 34px;
height: 34px;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -17px;
margin-left: -18px;
transition: .3s;
opacity: 0
}
.s-server li:hover:before {
opacity: 1
}
.s-server li.active:before {
opacity: 1
}
.s-server li span {
position: relative;
z-index: 1
}
.s-acc {
background: url(../images/modal-bg.png) center bottom no-repeat;
background-color: #030508;
padding: 35px 65px;
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .2);
height: 100%
}
element.style {
position: absolute;
top: 0px;
width: 0px;
height: 0px;
}
.check-container {
display: block;
position: relative;
width: 19px;
height: 19px;
cursor: pointer;
user-select: none
}
.h3-title {
display: block
}
.check-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 19px;
width: 19px;
background-color: #030508
}
.checkmark:after {
content: "";
position: absolute;
display: none
}
.check-container input:checked~.checkmark:after {
display: block
}
.check-container .checkmark:after {
background: url(../images/check.html) no-repeat;
left: 4px;
top: 5px;
width: 12px;
height: 9px
}
.check-container-close .checkmark:after {
background: url(../images/check-close.html) no-repeat;
left: 5px
}
.select-acc_check {
display: flex
}
.select-acc_check label {
margin-right: 9px
}
.select-acc {
background: url(../images/top-table-bg.png) repeat-x;
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 18px;
color: #fff;
font-size: 12px;
font-weight: 600;
margin-bottom: 9px
}
.select-acc:last-child {
margin-bottom: 0
}
#payment-box {
padding: 40px;
margin: 20px;
border: #e4e4e4 1px solid;
display: inline-block;
text-align: center;
border-radius: 3px
}
#pay_now {
padding: 10px 30px;
background: #09f;
border: #038fec 1px solid;
border-radius: 3px;
color: #fff;
width: 100%;
cursor: pointer
}
.txt-title {
margin: 25px 0 0;
color: #4e4e4e
}
.txt-price {
margin-bottom: 20px;
color: #08926c;
font-size: 1.1em
}
/* PILLS */
.mytabs {
justify-content: center;
display: flex;
flex-wrap: wrap;
max-width: 1000px;
margin-top: -26px;
margin-bottom: -10px;
margin: 0 auto;
padding: 20px;
}
.mytabs input[type="radio"] {
display: none;
}
.mytabs label {
padding-top: 20px;
flex-wrap: wrap;
font-size: 20px;
text-align: center;
color: rgb(255, 255, 255);
font-family: Cinzel, sans-serif;
width: 200px;
height: 60px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
transform:scale(90%);
transition: 0.3s;
margin-right: 5px;
margin-bottom: 5px;
}
.mytabs .tab {
flex-wrap: wrap;
background: rgba(46, 46, 46, 0);
order: 1;
display: none;
}
.mytabs .tab h2 {
font-size: 3em;
padding-left: 15px;
}
.mytabs input[type='radio']:checked + label + .tab {
display: block;
margin-left: -10px;
}
.mytabs input[type="radio"]:hover + label {
transform:scale(100%);
transition: 0.3s;
filter: brightness(120%);
}
.mytabs input[type="radio"]:checked + label {
width: 200px;
height: 60px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
transform:scale(100%);
transition: 0.3s;
filter: brightness(120%);
}
.toptxt {
color: rgb(255, 255, 255);
font-size: 20px;
text-align: center;
}
.bot1 {
background: url(../images/bot1.png);
}
.bot2 {
background: url(../images/bot2.png);
}
.bot3 {
background: url(../images/bot3.png);
}
.bot4 {
background: url(../images/bot4.png);
}
.bot5 {
background: url(../images/bot5.png);
}
.bot6 {
background: url(../images/bot6.png);
}
.discord12 {
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
height: 650px;
justify-content: center;
box-shadow: 0 0px 15px 4px rgba(0, 0, 0, 0.884);
}