html, body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  scroll-behavior: smooth;
}

body {
  background: url("bodyBG.jpg") no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}

*:not(html):not(body) {
  box-sizing: border-box;
}
*:not(html):not(body)::-webkit-scrollbar {
  width: 8px;
}
*:not(html):not(body)::-webkit-scrollbar-thumb {
  background: #00a7b1;
}
*:not(html):not(body)::-webkit-scrollbar-track {
  background: transparent;
}

a:hover {
  text-decoration: none;
}
a.clear {
  text-decoration: none;
}
a.block {
  display: block;
}

.disabled--grayscale {
  filter: grayscale(100%);
}

.backToTop {
  display: none;
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  z-index: 999999999;
  background-color: #fff;
  background-image: url("arrow_up.png");
  background-repeat: no-repeat;
  background-size: 50% auto;
  background-position: center center;
  border-radius: 50%;
  cursor: pointer;
}
.backToTop:hover {
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.logo {
  background-image: url("logo.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  width: 500px;
  height: 500px;
  transition: all 0.3s ease-in-out;
  position: relative;
  z-index: 79;
}
.logo--main {
  margin-top: -160px;
  width: 520px;
}
.logo--footer {
  width: 180px;
  height: 180px;
}

.button {
  background: linear-gradient(to bottom, #00a0a0 0%, #006066 100%);
  color: #fff;
  text-align: center;
  padding: 7px 5px;
  border-radius: 3px;
  border: 1px solid #007068;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.5);
  display: block;
  min-width: 150px;
  margin: 0 5px;
  flex: 1;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px !important;
  letter-spacing: 1px;
  transition: all 0.3s ease-in-out;
}
.button:hover {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.47);
}
.button:active {
  border: 1px solid transparent;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  text-shadow: none;
}

.bodyContainer {
  background: rgba(255, 255, 255, 0.7);
  padding: 40px 20px;
  min-height: calc(100vh - 420px - 71px);
}
.bodyContainer__content {
  max-width: 1420px;
  margin: 0 auto;
  overflow-wrap: break-word;
  overflow: auto;
}
.bodyContainer input[type=submit],
.bodyContainer input[type=button],
.bodyContainer button {
  background: linear-gradient(to bottom, #00a0a0 0%, #006066 100%);
  color: #fff;
  text-align: center;
  padding: 7px 5px;
  border-radius: 3px;
  border: 1px solid #007068;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.5);
  display: block;
  min-width: 150px;
  margin: 0 5px;
  flex: 1;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px !important;
  letter-spacing: 1px;
  transition: all 0.3s ease-in-out;
  margin: 5px 0;
}
.bodyContainer input[type=submit]:hover,
.bodyContainer input[type=button]:hover,
.bodyContainer button:hover {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.47);
}
.bodyContainer input[type=submit]:active,
.bodyContainer input[type=button]:active,
.bodyContainer button:active {
  border: 1px solid transparent;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  text-shadow: none;
}
.bodyContainer div.mce-btn {
  border: 1px solid #b3b3b3;
  border-color: transparent transparent transparent transparent;
  position: relative;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background: white;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.bodyContainer div.mce-btn.mce-active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #555c66;
  color: white;
  border-color: transparent;
}
.bodyContainer div.mce-btn button {
  padding: 4px 6px;
  font-size: 14px;
  line-height: 20px;
  *line-height: 16px;
  cursor: pointer;
  color: #595959;
  text-align: center;
  overflow: visible;
  -webkit-appearance: none;
  min-width: 0;
  background: transparent;
  border: none;
  display: inline-block;
  box-shadow: none;
}

.animation {
  transform: translateZ(0, 0, 0);
}
.animation--rotate {
  animation: 1s ease infinite pulse;
}
@keyframes pulse {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex > * {
  text-align: center;
}

.user__name {
  color: #fff;
  font-size: 23px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  text-shadow: 0 1px rgba(0, 0, 0, 0.57);
  padding: 0 7px;
  cursor: pointer;
}
.user__info {
  width: calc(100% - 14px);
  margin: 3px 7px;
  padding: 7px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.user__infoToggler {
  display: none;
}
.user__info th {
  text-align: left;
}
.user__info td {
  text-align: right;
}

.menuTop {
  position: fixed;
  z-index: 900;
  top: 0;
  left: 0;
  height: 75px;
  width: 100%;
  background-color: #103133;
  background-image: linear-gradient(to bottom, #164446 0%, #164446 50%, rgba(22, 68, 70, 0) 51%, rgba(255, 255, 255, 0) 100%);
}
.menuTopBG {
  background-image: url("menu/menuTopBG.png");
  background-repeat: repeat-x;
  width: 100%;
  height: inherit;
  mix-blend-mode: overlay;
  opacity: 0.2;
  position: absolute;
  top: 0;
  z-index: 300;
}
.menuTop__toggler {
  width: 50px;
  height: inherit;
  padding: 8px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  position: absolute;
  z-index: 400;
  transform: translateX(-150%);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.menuTop__toggler span {
  background: #fff;
  width: 100%;
  height: 5px;
  margin: 3px;
  border-radius: 5px;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menuTop__toggler:not(.menuTop__toggler--toggled):hover span:nth-child(1) {
  transform: rotate(45deg) translateY(-3px) translateX(4px);
}
.menuTop__toggler:not(.menuTop__toggler--toggled):hover span:nth-child(2) {
  width: 130%;
  margin-left: -30%;
}
.menuTop__toggler:not(.menuTop__toggler--toggled):hover span:nth-child(3) {
  transform: rotate(-45deg) translateY(3px) translateX(4px);
}
.menuTop__toggler--toggled span:nth-child(1) {
  transform: rotate(-45deg) translateY(-3px) translateX(-4px);
}
.menuTop__toggler--toggled span:nth-child(2) {
  width: 130%;
}
.menuTop__toggler--toggled span:nth-child(3) {
  transform: rotate(45deg) translateY(3px) translateX(-4px);
}
.menuTop__link {
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "Cinzel", serif;
  margin: 0 15px;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  position: relative;
}
.menuTop__link a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  width: 100%;
}
.menuTop__link:hover {
  color: #fff;
  text-shadow: 0 0 5px #dd9310;
}
.menuTop__linkContainer {
  position: relative;
  z-index: 301;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s 0.1s ease-in;
}
.menuTop__linkSubmenus {
  background: #0b1818;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  flex-direction: column;
  display: none;
  position: absolute;
  padding: 5px 0;
  bottom: 0;
  left: 50%;
  max-height: calc(100vh - 300px);
  overflow: auto;
  transform: translateY(100%) translateX(-50%);
}
.menuTop__linkSubmenusItem {
  text-shadow: none;
  padding: 10px 0;
  width: 150px !important;
  display: block;
}
.menuTop__link:hover .menuTop__linkSubmenus {
  display: flex;
}
.menuSide {
  width: 108px;
  height: 466px;
  background: #044c51;
  box-shadow: inset 0 0 1px #0e2c2e, inset 0 0 10px rgba(255, 255, 255, 0.5), 0 0 5px rgba(2, 41, 43, 0.8);
  position: fixed;
  z-index: 300;
  top: 50vh;
  left: 0;
  transform: translateY(-50%) translateX(-100%);
  transition: all 0.3s ease-in-out;
}
.menuSide--toggled {
  transform: translateY(-50%) translateX(0%);
}
.menuSide__toggler {
  width: 20px;
  height: 50px;
  background: #02373a;
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0 0 2px 0px #837251;
  border: 1px solid #02373a;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.menuSide__toggler:hover {
  background: #03494d;
}
.menuSide__link {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.menuSide__link:hover {
  color: #fff;
  filter: drop-shadow(0 0 5px #dd9310);
}
.menuSide__linkContainer {
  width: 107px;
  height: 464px;
  background-image: url("menu/menuSideBorder.png");
  background-repeat: no-repeat;
  position: absolute;
  z-index: 302;
  top: 1px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.menuSide__icon {
  width: 100%;
  display: block;
  min-height: 31px;
  background-repeat: no-repeat;
  background-position: center;
  margin: 5px auto;
}
.menuSide__icon--home {
  background-image: url("menu/home.png");
}
.menuSide__icon--vote {
  background-image: url("menu/vote.png");
  height: 47px;
}
.menuSide__icon--rankings {
  background-image: url("menu/rankings.png");
  height: 39px;
}
.menuSide__icon--market {
  background-image: url("menu/market.png");
  height: 40px;
}
.menuSide__icon--support {
  background-image: url("menu/support.png");
  height: 41px;
}
.menuSideBG {
  width: 100%;
  height: 100%;
  background-image: url("menu/menuSideBG.png");
  background-repeat: no-repeat;
  mix-blend-mode: overlay;
  position: absolute;
  opacity: 0.5;
  top: 0;
  left: 0;
  z-index: 301;
}

.section {
  width: 100%;
  max-width: inherit;
  margin: 0 auto;
  position: relative;
}
.section__heading {
  filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.569)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.569)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.568));
}
.section__headingText {
  background: linear-gradient(#fff, #d6d6d6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 10px;
  font-family: "Cinzel", serif;
  font-weight: bold;
  margin: 0 auto;
  text-align: center;
  font-size: 38px;
}
.section__subheading {
  letter-spacing: 2.5px;
  font-size: 17px;
  text-align: center;
  text-transform: uppercase;
}

.main {
  position: relative;
  min-height: 100vh;
  max-width: 1920px;
  margin: 0 auto;
  padding-top: 75px;
}
.mainSection {
  height: 946px;
  overflow: hidden;
  background: url("main/mainBG.jpg") no-repeat center top;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}
.mainSection__persona {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: inherit;
  top: 130px;
  left: 250px;
  right: 250px;
  margin: 0 auto;
  z-index: 78;
  transition: all 0.3s ease-in-out;
}
.mainSection__persona--1 {
  background-image: url("main/persona1.png");
  width: 780px;
  height: 962px;
  left: initial;
  top: 150px;
  right: 380px;
}
.mainSection__persona--2 {
  background-image: url("main/persona2.png");
  width: 904px;
  height: 998px;
  right: initial;
}
.mainSection__personaContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 500px;
  height: 100%;
}
.mainSection__status {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  width: 203px;
  color: #fff;
  font-size: 15px;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
  padding: 17px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 79;
}
.mainSection__statusItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mainSection__statusContainer {
  position: absolute;
  top: 27px;
  right: 52px;
}
.mainSection__statusPlayersCount {
  font-size: 21px;
}
.mainSection__statusServer {
  text-transform: uppercase;
  color: #ff8a00;
}
.mainSection__statusServer--online {
  color: #00ff36;
}
.mainSection__panel {
  width: 494px;
  height: 216px;
  position: relative;
  z-index: 80;
  margin-right: -74.1px;
  filter: drop-shadow(10px 0px 5px rgba(14, 44, 46, 0.48));
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  transition: all 0.3s ease-in-out;
}
.mainSection__panel:last-child {
  margin-right: 0;
  filter: drop-shadow(10px 0px 5px rgba(14, 44, 46, 0));
}
.mainSection__panel--download {
  z-index: 95;
}
.mainSection__panel--link2 {
  width: 559px;
}
.mainSection__panelContent {
  margin: 0 auto;
  position: absolute;
  left: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: calc(100% - 70px * 2);
}
.mainSection__panelContent a {
  color: #fff;
  font-size: 14px;
}
.mainSection__panelContainer {
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
}
.mainSection__panelBox {
  background-color: #c0773c;
  background-image: linear-gradient(135deg, rgba(61, 44, 25, 0) 0%, rgba(61, 44, 25, 0.65) 100%);
  width: 100%;
  height: 100%;
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0 100%);
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715);
}
.mainSection__panelBox--login {
  background-color: #00a6af;
  background-image: linear-gradient(135deg, rgba(61, 44, 25, 0) 0%, rgba(61, 44, 25, 0.65) 100%);
}
.mainSection__panelBox--link2 {
  position: relative;
  height: 100%;
  background-color: #00a6af;
  background-image: linear-gradient(25deg, rgba(61, 44, 25, 0) 0%, rgba(61, 44, 25, 0.65) 100%), linear-gradient(110deg, black 0%, rgba(0, 0, 0, 0) 118px);
  clip-path: polygon(70px 0, 100% 0%, 100% 100%, 35px 100%);
}
.mainSection__panelBox--link2Second {
  background-image: linear-gradient(25deg, rgba(61, 44, 25, 0) 0%, rgba(61, 44, 25, 0.65) 100%), linear-gradient(110deg, black 0%, rgba(0, 0, 0, 0) 58px);
  clip-path: polygon(35px 0, 100% 0%, 100% 100%, 0px 100%);
}
.mainSection__panelBox__heading {
  font-family: "Bebas Neue";
  font-weight: bold;
  font-style: italic;
  font-size: 50px;
  text-transform: uppercase;
}
.mainSection__panelBox__subheading {
  font-size: 13px;
  text-transform: uppercase;
  margin-top: -5px;
}
.mainSection__panelBox__textContainer {
  position: absolute;
  top: 17px;
  left: 90px;
  color: #fff;
  z-index: 100;
}
.mainSection__panelBox__textContainer--right {
  left: 310px;
}
.mainSection__panelBoxContainer {
  width: 100%;
  height: 50%;
  position: relative;
}
.mainSection__panelBG {
  background: url("main/buttonBG.png") no-repeat center;
  mix-blend-mode: overlay;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}
.mainSection__panelBG--link2 {
  background-size: cover;
}
.mainSection__inputBox {
  width: 355px;
  height: 40px;
  border: 0;
  color: #484848;
  clip-path: polygon(14px 0, 100% 0%, calc(100% - 14px) 100%, 0 100%);
  padding: 0 20px;
  text-align: right;
  outline: 0;
  margin: 3px auto;
  box-shadow: inset 0px 0 5px rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(110deg, black 0%, rgba(0, 0, 0, 0) 18px), linear-gradient(-70deg, black 0%, rgba(0, 0, 0, 0) 28px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top left, top right -10px;
  transition: all 0.3s ease-in-out;
}
.mainSection__inputBox:first-child {
  margin-left: 16px;
}
.mainSection__inputBoxContainer {
  filter: drop-shadow(1px -1px 0px rgba(86, 93, 93, 0.3)) drop-shadow(-1px 1px 0px rgba(86, 93, 93, 0.3)) drop-shadow(1px 1px 0px rgba(86, 93, 93, 0.3)) drop-shadow(-1px -1px 0px rgba(86, 93, 93, 0.3)) drop-shadow(-1px 1px 0px rgba(35, 159, 166, 0.3)) drop-shadow(1px -1px 0px rgba(35, 159, 166, 0.3)) drop-shadow(1px 1px 0px #239fa6) drop-shadow(-1px -1px 0px #239fa6);
}
.mainSection__inputButton {
  background: #21bbc3;
  color: #fff;
  font-family: "Bebas Neue";
  font-weight: bold;
  font-style: italic;
  font-size: 36.69px;
  width: 173px;
  height: 52px;
  clip-path: polygon(15px 0, 100% 0%, calc(100% - 15px) 100%, 0 100%);
  border: 0;
  transition: all 0.3s ease-in-out;
  padding-right: 12px;
}
.mainSection__inputButton:hover {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}
.mainSection__inputCheckbox {
  display: inline-block;
  width: 27px;
  height: 19px;
  background: #fff;
  border: 0;
  clip-path: polygon(7px 0, 100% 0%, calc(100% - 7px) 100%, 0 100%);
  margin-right: 15px;
}
.mainSection__inputCheckboxLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin-bottom: 10px;
}
.mainSection__inputCheckboxLabel:hover {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.mainSection__inputCheckboxOriginal {
  display: none;
}
.mainSection__inputCheckboxOriginal:checked + span {
  filter: drop-shadow(0px 0px 3px #dd9310);
}
.mainSection__inputCheckboxOriginal:checked + span span {
  background: #dd9310;
}
.mainSection__inputContainer {
  display: flex;
  margin-top: 17px;
}
.mainSection__inputContainer a:hover {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.mainSection__inputContainerLeft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.persona {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 98;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.persona--main1 {
  background-image: url("main/1.png");
  background-repeat: no-repeat;
  background-position: center top;
  width: 267px;
  height: 170px;
  left: initial;
  right: 0px;
}
.persona--main2 {
  background-image: url("main/2.png");
  background-repeat: no-repeat;
  background-position: center top;
  width: 253px;
  height: 126px;
  left: 58px;
}

.smallPanel {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99998;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  clip-path: polygon(70px 0, 100% 0%, 100% 100%, 35px 100%);
}
.smallPanel:hover ~ .mainSection__panelBox {
  background-color: #17ced8;
}
.smallPanel:hover ~ .persona--main1 {
  right: 15px;
}
.smallPanel:hover ~ .persona--main2 {
  left: 73px;
}
.smallPanel--Second {
  clip-path: polygon(35px 0, 100% 0%, 100% 100%, 0px 100%);
}

.panel__download {
  display: block;
  height: inherit;
  width: inherit;
  position: relative;
  z-index: 82;
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0 100%);
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.panel__download:hover ~ .panel__downloadChest {
  top: -60px;
}
.panel__download:hover ~ .panel__downloadHeading {
  filter: drop-shadow(0px 0px 2px rgba(221, 147, 16, 0.9)) drop-shadow(0px 2px 0px rgba(14, 44, 46, 0.8));
}
.panel__download:hover ~ .panel__downloadSubheading {
  text-shadow: 0 0 5px white;
}
.panel__download:hover ~ .mainSection__panelBox {
  background-color: #ae5716;
}
.panel__downloadChest {
  background-image: url("main/chest.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  width: 220px;
  height: 215px;
  position: absolute;
  right: 50px;
  top: -50px;
  transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
}
.panel__downloadHeading {
  font-family: "Bebas Neue";
  font-weight: bold;
  font-style: italic;
  font-size: 75.73px;
  filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.69)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.68));
  position: absolute;
  left: 50px;
  bottom: 50px;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.panel__downloadHeadingText {
  background: linear-gradient(#fff, #d6d6d6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 10px;
}
.panel__downloadSubheading {
  font-size: 17px;
  color: #fff;
  position: absolute;
  left: 60px;
  bottom: 40px;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.noticeBtn__next, .noticeBtn__prev {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-size: 50px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
  z-index: 999;
  cursor: pointer;
}
.noticeBtn__next:hover, .noticeBtn__prev:hover {
  color: white;
}
.noticeBtn__next:before, .noticeBtn__prev:before {
  content: "<";
  padding: 20px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease-in-out;
}
.noticeBtn__next:hover:before, .noticeBtn__prev:hover:before {
  background: rgba(0, 0, 0, 0.8);
}
.noticeBtn__next {
  right: 0;
  left: initial;
  transform: translateX(50%) scaleX(-1);
}
.noticeSection {
  min-height: 622px;
  background-color: #080c0c;
  background-image: url("notice/top.png"), url("notice/bottom.png");
  background-position: top center, bottom center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 15px -5px rgba(8, 12, 12, 0.68), 0 -10px 15px -5px rgba(8, 12, 12, 0.68), inset 0 3px 5px -5px rgba(33, 187, 195, 0.8), inset 0 -3px 5px -5px rgba(33, 187, 195, 0.8);
  z-index: 130;
  padding: 27px;
  overflow: hidden;
}
.noticeSection a {
  color: unset;
  text-decoration: none;
}
.noticeSection__item {
  position: relative;
  background: rgba(0, 0, 0, 0.96);
  border: 1px solid rgba(33, 187, 195, 0.9);
  margin: 5px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.noticeSection__itemContainer {
  position: relative;
  max-width: 1420px;
  min-height: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.noticeSection__itemContainer_base {
  position: absolute;
  bottom: 0;
}
.noticeSection__itemContainerGroup {
  display: none;
  justify-content: space-around;
  padding-top: 27px;
  width: 100%;
}
.noticeSection__itemContainerGroup--active {
  display: flex;
}
.noticeSection__item:hover .noticeSection__itemImage:after {
  background-position: center bottom 0px;
}
.noticeSection__item:hover {
  box-shadow: 0 0 25px rgba(33, 187, 195, 0.9);
}
.noticeSection__itemImage {
  width: 429px;
  height: 466px;
  background: url("notice/sample.png");
  background-position: center top;
  background-size: cover;
  margin: 6px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.noticeSection__itemImage:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 50%, black 100%);
  background-position: center bottom -100px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}
.noticeSection__itemFrame {
  width: inherit;
  height: inherit;
  /* background-image: url('notice/frame.png'), linear-gradient(rgba(0,0,0,0.5) 20%, rgba(0,0,0,1) 100%);
   background-position: 1px 1px, top left;
   background-repeat: no-repeat;
   */
  background-color: rgba(0, 0, 0, 0.38);
  background-image: url("notice/tl_frame.png"), url("notice/tr_frame.png"), url("notice/bl_frame.png"), url("notice/br_frame.png"), url("notice/horizontal_frame.png"), url("notice/horizontal_frame.png"), url("notice/vertical_frame.png"), url("notice/vertical_frame.png");
  background-position: top 1px left 1px, top 1px right 1px, bottom 1px left 1px, bottom 1px right 1px, top 1px left 38px, bottom 1px left 38px, top 28px left 1px, top 28px right 1px, top left;
  background-repeat: no-repeat;
  background-size: 37px 27px, 37px 27px, 37px 27px, 37px 27px, calc(100% - 38px * 2) 3px, calc(100% - 38px * 2) 3px, 4px calc(100% - 28px * 2), 4px calc(100% - 28px * 2);
  cursor: pointer;
  position: relative;
  z-index: 20;
}
.noticeSection__itemInformation {
  color: #fff;
  position: absolute;
  bottom: 35px;
  left: 35px;
  right: 35px;
}
.noticeSection__itemTitle {
  font-weight: 700;
  font-size: 22px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  margin-bottom: 15px;
}
.noticeSection__itemSummary {
  max-height: 250px;
  font-size: 14px;
  line-height: 16px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  -webkit-mask-image: linear-gradient(black 70%, transparent 100%);
  mask-image: linear-gradient(black 0%, transparent 100%);
}
.noticeSection__itemReadmore {
  position: absolute;
  bottom: 0;
  text-align: center;
  padding: 10px 5px;
  border-radius: 5px;
  background: #055d63;
  width: 100%;
  text-transform: uppercase;
  font-size: 12px;
}
.noticeSection__pagination {
  width: 112px;
  height: 20px;
  position: absolute;
  right: 22px;
  top: -32px;
  user-select: none;
}
.noticeSection__paginationItem {
  width: 40px;
  height: 20px;
  background: #a36d0e;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  clip-path: polygon(15px 0, 100% 0%, calc(100% - 15px) 100%, 0 100%);
  margin-right: -10px;
  user-select: none;
  cursor: pointer;
}
.noticeSection__paginationItem:hover, .noticeSection__paginationItem--active {
  background: #27b8c1;
}

.statisticsSection {
  background: rgba(255, 255, 255, 0.8);
  min-height: 389px;
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.statisticsSection .section__heading {
  filter: none;
}
.statisticsSection .section__headingText {
  background: linear-gradient(#086c72, #064f53);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 33px;
  text-transform: uppercase;
}
.statisticsSectionItems {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.statistics__item {
  width: 288px;
  height: 232px;
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0 100%);
  background-color: #086c72;
  background-repeat: no-repeat;
  position: relative;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  margin: 20px 10px;
}
.statistics__item--1 {
  background-image: url("statistics/1.png");
  background-position: right -77px top -14px;
}
.statistics__item--1:hover {
  background-position: right -57px top -14px;
}
.statistics__item--2 {
  background-image: url("statistics/2.png");
  background-position: right -51px top -14px;
}
.statistics__item--2:hover {
  background-position: right -31px top -14px;
}
.statistics__item--3 {
  background-image: url("statistics/3.png");
  background-position: right -50px top -8px;
}
.statistics__item--3:hover {
  background-position: right -30px top -8px;
}
.statistics__item--4 {
  background-image: url("statistics/4.png");
  background-position: right -37px top -13px;
}
.statistics__item--4:hover {
  background-position: right -17px top -13px;
}
.statistics__item--5 {
  background-image: url("statistics/5.png");
  background-position: right -74px top -9px;
}
.statistics__item--5:hover {
  background-position: right -54px top -9px;
}
.statistics__itemTitle {
  font-family: "Cinzel", serif;
  font-size: 19px;
  font-weight: 500px;
  line-height: 19px;
  color: #fff;
  text-shadow: 2px 2px #086c72;
  width: 128px;
  position: absolute;
  left: calc(15% + 12px);
  top: 27px;
}
.statistics__itemTitle--zeny {
  width: 70px;
}
.statistics__itemNumber {
  font-family: "Bebas Neue", sans-serif;
  font-size: 48.78px;
  color: #fff;
  text-shadow: 1px 1px #086c72;
  font-weight: 700;
  position: absolute;
  left: -15px;
  bottom: 10px;
  background-color: rgba(8, 108, 114, 0.5);
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0 100%);
  padding: 0 15%;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.statistics__itemContainer {
  position: relative;
  filter: drop-shadow(10px 8px 0px #dd9310);
  transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.statistics__itemContainer:hover {
  filter: drop-shadow(7px 8px 0px #dd9310);
}

.rankingSection {
  background: url("ranking/bg.jpg") no-repeat center top;
  background-size: cover;
  color: #fff;
}
.rankingSection .section__heading {
  filter: none;
}
.rankingSection .section__headingText {
  text-transform: uppercase;
}
.rankingSection__text {
  font-family: "Cinzel", serif;
  font-size: 25px;
  margin-top: 30px;
  text-align: center;
}
.rankingSection__text--bold {
  font-weight: bold;
}
.rankingSection .woeSection {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 60px;
  transition: all 0.3s ease-in-out;
}
.rankingSection .woeSection__left {
  order: 1;
}
.rankingSection .woeSection__right {
  order: 3;
}
.rankingSection .woeSection__center {
  order: 2;
  margin-bottom: 30px;
}
.rankingSection .woeSection__countdownContainer {
  width: 100%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 120px;
  transition: all 0.3s ease-in-out;
}
.rankingSection .woeSection__countdownContainer .rankingSection__text {
  text-transform: uppercase;
  letter-spacing: 5px;
  margin: 0;
  margin-bottom: 12px;
}
.rankingSection .woeSection__countdownBox {
  display: flex;
  justify-content: space-evenly;
  width: 500px;
  margin-bottom: 30px;
}
.rankingSection .woeSection__countdownItem {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.rankingSection .woeSection__countdownItemValue {
  font-size: 74.72px;
}
.rankingSection .woeSection__countdownItemCaption {
  font-size: 17px;
  text-transform: uppercase;
}
.rankingSection .woeSection__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.rankingSection .woeSection__itemEmblem {
  width: 24px;
  height: 24px;
  margin: auto;
  transform: translateX(-5px);
}
.rankingSection .woeSection__itemFlag {
  background: url("ranking/woeFlag.png") no-repeat center;
  width: 272px;
  height: 327px;
  display: flex;
  transform: translateX(5px);
  position: relative;
  z-index: 120;
}
.rankingSection .woeSection__itemInformation {
  margin-top: -40px;
  position: relative;
  z-index: 121;
}
.rankingSection .woeSection__itemBox {
  background: url("ranking/woeBox.png") no-repeat center top;
  width: 338px;
  height: 55px;
  display: flex;
  justify-content: space-around;
  padding: 0 17px;
  align-items: center;
  margin-bottom: 9px;
}
.rankingSection .woeSection__itemBox span {
  text-align: center;
}
.rankingSection .pvpSection {
  margin: 15px auto;
}
.rankingSection .pvpSection__player {
  width: 133px;
  height: 133px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateX(1px);
}
.rankingSection .pvpSection__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.rankingSection .pvpSection__itemContainer {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 35px;
}
.rankingSection .pvpSection__itemType {
  height: 245px;
  width: 249px;
  position: relative;
}
.rankingSection .pvpSection__itemType--master {
  background: url("ranking/master.png") no-repeat center top;
}
.rankingSection .pvpSection__itemType--sem {
  background: url("ranking/sem.png") no-repeat center top 18px;
}
.rankingSection .pvpSection__itemType--ygg {
  background: url("ranking/ygg.png") no-repeat center top 6px;
}
.rankingSection .pvpSection__itemTypeText {
  margin-bottom: 50px;
  margin-top: -65px;
  z-index: 130;
}
.rankingSection .pvpSection__itemPlayer {
  text-align: center;
  margin-bottom: 15px;
}
.rankingSection .pvpSection__itemPlayerName {
  font-size: 25px;
  font-weight: bold;
  text-transform: uppercase;
}
.rankingSection .pvpSection__itemPlayerClass {
  font-size: 17px;
}
.rankingSection .pvpSection__itemStats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 188px;
}
.rankingSection .pvpSection__itemStatsIcon {
  width: 59px;
  flex-shrink: 0;
}
.rankingSection .pvpSection__itemStatsIcon--kills {
  background: url("ranking/kill.png") no-repeat center;
  height: 59px;
}
.rankingSection .pvpSection__itemStatsIcon--deaths {
  background: url("ranking/death.png") no-repeat center;
  height: 60px;
}
.rankingSection .pvpSection__itemStatsInfo {
  width: 110px;
  padding: 15px;
}
.rankingSection .pvpSection__itemStatsInfoTitle {
  margin: 0;
  font-weight: bold;
}
.rankingSection .pvpSection__itemStatsInfoValue {
  font-size: 35px;
  font-weight: bold;
  margin-top: -9px;
}
.rankingSection .pvpSection__itemStatsInfoValue--kills {
  color: #0193f4;
}
.rankingSection .pvpSection__itemStatsInfoValue--deaths {
  color: #ff0000;
}
.rankingSection .rebirthSection {
  min-height: 453px;
  background: url("ranking/rebirthBG.jpg") no-repeat center top;
  background-size: cover;
  border-top: 1px solid rgba(39, 184, 193, 0.468);
  border-bottom: 1px solid rgba(39, 184, 193, 0.468);
  box-shadow: inset 0 0 50px black, inset 0 0 15px black, 0 -30px 30px -30px rgba(39, 184, 193, 0.468), 0 30px 30px -30px rgba(39, 184, 193, 0.468);
  display: flex;
  flex-direction: column;
  padding: 36px 0;
}
.rankingSection .rebirthSection .section__headingText {
  margin-bottom: 33px;
  font-size: 34px;
}
.rankingSection .rebirthSection__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  position: relative;
}
.rankingSection .rebirthSection__itemContainer {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 1125px;
  margin: 0 auto;
}
.rankingSection .rebirthSection__itemPlayer {
  width: 234px;
  height: 234px;
  background: url("ranking/rebirthPlayer.png") no-repeat center;
  position: relative;
  display: flex;
}
.rankingSection .rebirthSection__itemPlayerImage {
  width: 119px;
  height: 119px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  margin: auto;
}
.rankingSection .rebirthSection__itemName {
  font-size: 25px;
  font-weight: 700;
}
.rankingSection .rebirthSection__itemClass {
  font-size: 17px;
}
.rankingSection .rebirthSection__itemRank {
  width: 63px;
  height: 48px;
  background-position: bottom center;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  margin: 0 auto;
}
.rankingSection .rebirthSection__itemRank--1 {
  background-image: url("ranking/star1.png");
}
.rankingSection .rebirthSection__itemRank--2 {
  background-image: url("ranking/star2.png");
  transform: translateX(1px);
}
.rankingSection .rebirthSection__itemRank--3 {
  background-image: url("ranking/star3.png");
  transform: translateX(1px);
}

.informationSection {
  min-height: 334px;
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
}
.informationSection .section__heading {
  filter: drop-shadow(0px 1px 0px rgba(255, 255, 255, 0.8)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2569)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.2568));
}
.informationSection .section__headingText {
  text-align: left;
  background: linear-gradient(#086c72, #064f53);
  -webkit-background-clip: text;
  background-clip: text;
}
.informationSection__container {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: inherit;
  width: 100%;
}
.informationSection__containerLeft {
  background-image: url("information/persona2.png"), url("information/persona1.png"), url("information/persona3.png");
  background-repeat: no-repeat;
  background-position: left calc(50%) bottom -20px, left calc(50% - 177px) bottom -20px, left calc(50% + 127px) bottom -20px;
  width: 50%;
  height: 100%;
  min-height: inherit;
  -webkit-mask-image: linear-gradient(black 50%, transparent 100%);
  mask-image: linear-gradient(black 0%, transparent 100%);
}
.informationSection__containerRight {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 50%;
  height: 100%;
  padding: 10px;
}
.informationSection__subcontainer {
  display: flex;
  padding-left: 10px;
}
.informationSection__subcontainerItem {
  padding: 20px;
  padding-left: 0px;
}

.jobClassesSection {
  min-height: 920px;
  padding: 30px 0;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 130px white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.jobClassesSection__subheading {
  margin-bottom: 65px;
  height: 20px;
}
.jobClassesSection__circle {
  height: 494px;
  width: 494px;
  background: url("jobClasses/circle.png") no-repeat center;
  transform: rotate(0);
  transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.jobClassesSection__persona {
  height: 494px;
  width: 494px;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center center;
}
.jobClassesSection__container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 494px;
}
.jobClassesSection__containerCenter {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  order: 2;
}
.jobClassesSection__containerCenter:hover .jobClassesSection__circle {
  transform: rotate(360deg);
}
.jobClassesSection__containerLeft {
  order: 1;
  width: 700px;
  display: flex;
  justify-content: flex-end;
  align-content: center;
  flex-wrap: wrap;
}
.jobClassesSection__containerRight {
  order: 3;
  width: 700px;
  display: flex;
  transform: rotate(0);
  justify-content: flex-start;
  align-content: center;
  flex-wrap: wrap;
}
.jobClassesSection__containerRight:hover {
  transform: rotate(360deg);
}
.jobClassesSection__job {
  flex: 0 0 130px;
  /* explanation below */
  margin: 15px;
  width: 100px;
  height: 150px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0);
  transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
  cursor: pointer;
}
.jobClassesSection__job:hover, .jobClassesSection__job--active {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 2px white, inset 0 0 5px white;
}
.jobClassesSection__jobImage {
  width: 74px;
  height: 99px;
  background-position: center top;
  background-repeat: no-repeat;
}
.jobClassesSection__jobImage--assassincross {
  background-image: url("jobClasses/assassincross.png");
}
.jobClassesSection__jobImage--blacksmith {
  background-image: url("jobClasses/blacksmith.png");
}
.jobClassesSection__jobImage--champion {
  background-image: url("jobClasses/champion.png");
}
.jobClassesSection__jobImage--clowngypsy {
  background-image: url("jobClasses/clowngypsy.png");
}
.jobClassesSection__jobImage--creator {
  background-image: url("jobClasses/creator.png");
}
.jobClassesSection__jobImage--gunslinger {
  background-image: url("jobClasses/gunslinger.png");
}
.jobClassesSection__jobImage--highpriest {
  background-image: url("jobClasses/highpriest.png");
}
.jobClassesSection__jobImage--highwizard {
  background-image: url("jobClasses/highwizard.png");
}
.jobClassesSection__jobImage--taekwon {
  background-image: url("jobClasses/taekwon.png");
}
.jobClassesSection__jobImage--lordknight {
  background-image: url("jobClasses/lordknight.png");
}
.jobClassesSection__jobImage--ninja {
  background-image: url("jobClasses/ninja.png");
}
.jobClassesSection__jobImage--paladin {
  background-image: url("jobClasses/paladin.png");
}
.jobClassesSection__jobImage--professor {
  background-image: url("jobClasses/professor.png");
}
.jobClassesSection__jobImage--sniper {
  background-image: url("jobClasses/sniper.png");
}
.jobClassesSection__jobImage--soullinker {
  background-image: url("jobClasses/soullinker.png");
}
.jobClassesSection__jobImage--stalker {
  background-image: url("jobClasses/stalker.png");
}
.jobClassesSection__jobName {
  width: 100%;
  height: 20px;
  margin: 0 auto;
}
.jobClassesSection__text {
  width: 494px;
  margin: auto;
  margin-top: 40px;
  font-size: 11px;
  text-align: center;
}
.jobClassesSection .section__heading {
  filter: drop-shadow(0px 1px 0px rgba(255, 210, 137, 0.569)) drop-shadow(0px 1px 1px rgba(255, 210, 137, 0.569)) drop-shadow(0px 1px 5px rgba(255, 210, 137, 0.568));
}
.jobClassesSection .section__headingText {
  background: linear-gradient(to bottom, #f1a936 0%, #cc8400 100%);
  -webkit-background-clip: text;
}

.gallerySection {
  background: rgba(0, 0, 0, 0.5);
  min-height: 454px;
  box-shadow: inset 0 0 30px black;
}
.galleryContainer__item {
  background-position: center center;
  background-size: cover;
  width: 526px;
  height: 454px;
  position: relative;
  outline: 0;
}
.galleryContainer__item span, .galleryContainer__item a {
  display: block;
  width: inherit;
  height: inherit;
  position: absolute;
  outline: 0;
  left: 0;
  top: 0;
  z-index: 500;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  background-position: center top 0%;
  background-repeat: no-repeat;
  transition: all 0.15s ease-in-out;
}
.galleryContainer__item span:hover, .galleryContainer__item a:hover {
  box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.3);
  background-position: center top 454px;
}
.galleryContainer .slick-prev, .galleryContainer .slick-next {
  width: 100px;
  height: 100%;
  position: absolute;
  z-index: 400;
  border: 0;
  left: 0;
  top: 0;
  font-size: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  background-position: -100px 0;
  background-color: transparent;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  outline: 0;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.galleryContainer .slick-prev:after, .galleryContainer .slick-next:after {
  content: "<";
  outline: 0;
  font-size: 72px;
  font-weight: 900;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  width: inherit;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  opacity: 0.5;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.galleryContainer .slick-prev:hover, .galleryContainer .slick-next:hover {
  background-position: 0 0;
}
.galleryContainer .slick-prev:hover:after, .galleryContainer .slick-next:hover:after {
  opacity: 1;
}
.galleryContainer .slick-next {
  transform: scaleX(-1);
  left: initial;
  right: 0;
}

.footerSection {
  background-image: url("footer/footerBG.jpg");
  background-position: center center;
  height: 416px;
  overflow: hidden;
}
.footerSection__container {
  max-width: 1680px;
  width: 100%;
  height: 100%;
  min-height: inherit;
  margin: 0 auto;
  position: relative;
}
.footerSection__persona {
  background-image: url("footer/footerPersona.png");
  background-position: center;
  background-repeat: no-repeat;
  width: 572px;
  height: 411px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.6s ease-in-out;
}
.footerSection__content {
  width: inherit;
  height: inherit;
  max-width: inherit;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 40px 0;
  transition: all 0.4s ease-in-out;
}
.footerSection__row {
  max-width: 1080px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  transition: all 0.4s ease-in-out;
}
.footerSection__divider {
  height: 3px;
  width: 100%;
  padding-top: 3px;
  max-width: 1475px;
  margin-right: 45px;
  background: #2a2a2a;
  transition: all 0.4s ease-in-out;
}
.footerSection__copyright {
  color: #fff;
}
.footerSection__copyright--orange {
  color: #ffaf15;
}
.footerSection__social {
  width: 339px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: all 0.4s ease-in-out;
}
.footerSection__button {
  display: inline-block;
  width: 40px;
  height: 40px;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.footerSection__button--whatsapp {
  background: url("footer/whatsapp.png") no-repeat center;
}
.footerSection__button--facebook {
  background: url("footer/facebook.png") no-repeat center;
}
.footerSection__button--discord {
  background: url("footer/discord2.png") no-repeat center;
}
.footerSection__button--youtube {
  background: url("footer/youtube.png") no-repeat center;
}
.footerSection__button--rennc {
  background: url("footer/rennc.png") no-repeat center;
  width: 81px;
  height: 88px;
}
.footerSection__button:hover {
  opacity: 0.5;
}
.footerSection__menu {
  font-family: "Bebas Neue";
  font-size: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px;
}
.footerSection__menuLink {
  color: #fff;
  text-decoration: none;
  font-weight: 300;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.footerSection__menuLink:hover {
  color: #fff;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}
.footerSection__otherInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.footerSection__gepard {
  width: 114px;
  height: 76px;
  background: url("footer/gepard.png") no-repeat center;
  margin: 0 17px;
}
.footerSection__gravity {
  width: 228px;
  height: 54px;
  background: url("footer/gravity.png") no-repeat center;
  margin: 0 17px;
}

@media (max-width: 1600px) {
  .statistics__itemContainer {
    margin: 0 -30px;
  }

  .footerSection__persona {
    width: 25vw;
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }
}
@media (max-width: 1462px) {
  .persona {
    background-size: cover !important;
    width: 175px !important;
  }
  .persona--main2 {
    left: 30px;
  }

  .panel__downloadChest {
    width: 160px;
  }
  .panel__downloadHeading {
    font-size: 65px;
  }
  .panel__downloadSubheading {
    left: 60px;
  }

  .smallPanel:hover ~ .persona--main2 {
    left: 45px;
  }

  .mainSection__inputBox {
    width: 315px;
    clip-path: polygon(12px 0, 100% 0%, calc(100% - 12px) 100%, 0 100%);
  }
  .mainSection__inputBox:first-child {
    margin-left: 14px;
  }
  .mainSection__inputButton {
    width: 153px;
  }
  .mainSection__inputCheckbox {
    clip-path: polygon(6px 0, 100% 0%, calc(100% - 6px) 100%, 0 100%);
  }
  .mainSection__inputCheckboxLabel {
    font-size: 14px;
  }
  .mainSection__inputContainer {
    margin-left: -7px;
  }
  .mainSection__panel--link2, .mainSection__panel--download, .mainSection__panel--login {
    width: 450px;
  }
  .mainSection__panelBox__textContainer--right {
    left: 216px;
  }

  .footerSection__persona {
    position: absolute;
    bottom: 0;
    left: -600px;
  }
  .footerSection__content {
    align-items: center;
    text-align: center;
  }
  .footerSection__divider {
    margin-right: auto;
  }
  .footerSection__menu {
    padding: 0 10px;
  }
  .footerSection__menuLink {
    font-size: 20px;
    margin: 0 10px;
  }

  .noticeSection__itemImage {
    width: calc(30vw - 30px);
  }
}
@media (max-width: 1220px) {
  .smallPanel:hover ~ .persona--main2 {
    left: 45px;
  }

  .mainSection__inputBox {
    width: 24.82vw;
  }
  .mainSection__inputButton {
    width: 11.54vw;
  }
  .mainSection__inputCheckbox {
    margin-right: 0.8vw;
  }

  .rankingSection .woeSection {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 60px 10px;
  }
  .rankingSection .woeSection__left, .rankingSection .woeSection__right {
    width: 50%;
  }
  .rankingSection .woeSection__left {
    order: 2;
  }
  .rankingSection .woeSection__right {
    order: 3;
  }
  .rankingSection .woeSection__center {
    order: 1;
    width: 100%;
  }

  .jobClassesSection__containerCenter {
    display: none;
  }
  .jobClassesSection__text {
    display: none;
  }
}
@media (max-width: 1100px) {
  .user__name {
    text-align: left;
    margin: 7px 0;
  }
  .user__info {
    display: none;
    background: none;
    color: #1a1a1a !important;
    font-size: 14px !important;
    margin: 0;
    width: 100%;
  }
  .user__info td {
    padding: 0 7px;
  }
  .user__infoToggler {
    display: block;
  }

  .persona {
    background-size: 100% !important;
    height: 100% !important;
    width: 267px !important;
  }
  .persona--main1 {
    background-position: right 0 top -30px;
    right: 0px;
  }
  .persona--main2 {
    background-position: left 0 top -20px;
    left: 20px;
    width: 200px !important;
  }

  .panel__download {
    width: 100%;
    clip-path: none;
  }
  .panel__download:hover ~ .panel__downloadChest {
    top: -10px;
  }
  .panel__downloadChest {
    height: 108px !important;
    top: 0;
    right: 10px;
  }
  .panel__downloadHeading {
    font-size: 65px;
    left: 0;
    bottom: 25px;
  }
  .panel__downloadSubheading {
    left: 15px;
    bottom: 15px;
  }

  .smallPanel {
    clip-path: none !important;
  }
  .smallPanel:hover ~ .persona--main2 {
    left: 33px;
  }

  .mainSection__inputBox {
    width: 48%;
    clip-path: none;
    background-image: none;
    margin: 0 !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7), 0 0 5px #239fa6;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
  .mainSection__inputBoxContainer {
    display: flex;
    justify-content: space-between;
    filter: none;
  }
  .mainSection__inputButton {
    width: 13.64vw;
    min-width: 100px;
    font-size: 20px;
    height: 30px;
    clip-path: none;
    padding: 0;
  }
  .mainSection__inputCheckbox {
    margin-right: 0.8vw;
  }
  .mainSection__inputCheckboxLabel {
    margin-bottom: 0;
    margin-right: 10px;
  }
  .mainSection__inputContainer {
    margin-top: 8px;
    justify-content: space-around;
  }
  .mainSection__inputContainerLeft {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .mainSection__inputContainerLeft a {
    margin: 5px;
  }
  .mainSection__panel {
    height: 108px;
    width: 50%;
    margin-right: 0;
  }
  .mainSection__panel--link2 {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
  }
  .mainSection__panel--login {
    margin-right: 0px;
    filter: none;
  }
  .mainSection__panelBG {
    background-size: cover;
  }
  .mainSection__panelBox {
    clip-path: none;
  }
  .mainSection__panelBox--link2 {
    background-image: linear-gradient(25deg, rgba(61, 44, 25, 0) 0%, rgba(61, 44, 25, 0.65) 100%), linear-gradient(110deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 118px);
  }
  .mainSection__panelBox--link2Second {
    background-image: linear-gradient(25deg, rgba(61, 44, 25, 0) 0%, rgba(61, 44, 25, 0.65) 100%), linear-gradient(250deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 118px);
  }
  .mainSection__panelBoxContainer {
    height: 100%;
  }
  .mainSection__panelBox__textContainer {
    left: 3.55vw;
    text-shadow: 0 1px 0 #033134, 0 1px 5px #033134, 0 1px 3px #033134, 0 0 3px #033134;
  }
  .mainSection__panelBox__textContainer--right {
    left: initial;
    right: 3.55vw;
  }
  .mainSection__panelContainer {
    flex-wrap: wrap;
  }
  .mainSection__panelContent {
    width: 100%;
    position: relative;
    left: 0;
    padding: 20px;
  }

  .informationSection__container {
    width: 100%;
    flex-direction: column;
  }
  .informationSection__containerLeft, .informationSection__containerRight {
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 900px) {
  .flex {
    flex-direction: column;
  }

  .menuTop__toggler {
    transform: translateX(0%);
  }
  .menuTop__toggler--toggled {
    transform: translateX(0%);
  }
  .menuTop__togglerContainer {
    width: 300px;
    height: inherit;
    position: relative;
    z-index: 999;
  }
  .menuTop__link {
    padding: 15px;
    margin: 0;
    width: 100%;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    flex-direction: column;
    align-items: flex-start;
    flex: 0;
    height: auto;
  }
  .menuTop__link a {
    max-height: 50px;
    display: block;
  }
  .menuTop__link:hover {
    text-shadow: 0 0 5px #dd9310;
    background: rgba(221, 147, 16, 0.3);
  }
  .menuTop__linkContainer {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 300px;
    height: 100vh;
    background: #02393d;
    padding-bottom: 100px;
    margin: 0;
    overflow-y: scroll;
    transform: translateX(-150%);
  }
  .menuTop__linkContainer--toggled {
    transform: translateX(0%);
  }
  .menuTop__linkSubmenus {
    background: transparent;
    flex-direction: column;
    display: flex;
    position: static;
    padding: 10px;
    margin-left: 10px;
    left: initial;
    transform: none;
    max-height: initial;
    overflow: initial;
    width: 100%;
  }
  .menuTop__linkSubmenusItem {
    display: block;
    width: 100% !important;
    padding: 10px;
  }
  .menuTop__link:hover .menuTop__linkSubmenus {
    display: flex;
  }

  .mainSection__persona {
    opacity: 0;
  }
  .mainSection__status {
    background: none;
    width: auto;
    margin-bottom: 0px;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .mainSection__statusItem {
    margin: 0 5px;
  }
  .mainSection__statusItem span {
    margin: 0 5px;
    flex-shrink: 0;
  }
  .mainSection__statusContainer {
    position: absolute;
    top: 0;
    right: initial;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .noticeSection__itemContainer {
    flex-direction: column;
  }
  .noticeSection__itemContainerGroup {
    flex-direction: column;
  }
  .noticeSection__itemImage {
    width: calc(100% - 12px);
  }
  .noticeSection__itemFrame {
    width: 100%;
  }
  .noticeSection__pagination {
    position: relative;
    right: initial;
    top: initial;
    text-align: center;
  }
}
@media (max-width: 730px) {
  .rankingSection__text--bold {
    margin-top: 0;
    margin-bottom: 30px;
  }
  .rankingSection .woeSection {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 60px 10px;
  }
  .rankingSection .woeSection__left, .rankingSection .woeSection__right {
    width: 100%;
  }
  .rankingSection .woeSection__left {
    order: 2;
  }
  .rankingSection .woeSection__right {
    order: 3;
  }
  .rankingSection .woeSection__center {
    order: 1;
    width: 100%;
  }
  .rankingSection .woeSection__countdownBox {
    width: 100%;
  }
  .rankingSection .woeSection__countdownItemValue {
    font-size: 10vw;
  }
  .rankingSection .woeSection__countdownItemCaption {
    font-size: 3vw;
  }
  .rankingSection .woeSection__itemFlag {
    background-size: 100% auto;
    width: 80.26vw;
    max-width: 272px;
  }
  .rankingSection .woeSection__itemInformation {
    transform: scale(0.9);
  }
  .rankingSection .woeSection__itemBox {
    padding: 0 0px;
  }
  .rankingSection .pvpSection__item {
    margin: 30px 0;
  }
  .rankingSection .pvpSection__itemContainer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .rankingSection .rebirthSection__item {
    width: 100%;
    margin: 10px 0;
  }
  .rankingSection .rebirthSection__itemContainer {
    flex-direction: column;
  }
}
@media (max-width: 685px) {
  .logo--main {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 82.5vw;
    height: 80vw;
  }
  .logo--footer {
    width: 23vw;
    height: 23vw;
  }

  .mainSection__panel {
    width: 100%;
  }
  .mainSection__panel--link2 {
    height: 216px;
    width: 100%;
    flex-direction: column;
  }
  .mainSection__panelBoxContainer {
    height: 50%;
  }

  .statisticsSectionItems {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .statistics__item {
    width: 100%;
    height: 132px;
    clip-path: none;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: initial;
  }
  .statistics__itemTitle {
    width: 100%;
    position: relative;
    left: initial;
    top: initial;
    z-index: 10;
    margin-top: 15px;
  }
  .statistics__itemNumber {
    background: none;
    clip-path: none;
    padding: 0;
    position: relative;
    left: initial;
    top: initial;
    margin-top: 10px;
  }
  .statistics__itemContainer {
    width: 100%;
    background-color: #086c72;
    background-image: linear-gradient(135deg, rgba(200, 153, 71, 0) 0%, rgba(200, 153, 71, 0) 18%, #c89947 100%);
    background-position: center right -120px;
    background-repeat: no-repeat;
    filter: none !important;
  }
  .statistics__itemContainer:hover {
    background-position: center right 0px;
  }

  .informationSection__subcontainer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .footerSection__gravity {
    width: 33vw;
    height: 7.88vw;
    background: url("footer/gravity.png") no-repeat center;
    background-size: contain;
    margin: 0 17px;
  }
}
.loader--ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.loader--ripple div {
  position: absolute;
  border: 4px solid rgba(0, 0, 0, 0.5);
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loader--ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
.loader--ripple--white div {
  border: 4px solid rgba(255, 255, 255, 0.5);
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}

/*# sourceMappingURL=final.css.map */