* {
  margin: 0;
  padding: 0
}

ul {
  list-style: none
}

a {
  text-decoration: none
}

body {
  background: url(../img/bg-v2.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  margin-top: 71px;
  position: relative;
  z-index: -10;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  scroll-behavior: smooth;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Ajusta opacidad a gusto */
  z-index: -10; /* ⬅️ Más bajo que 1000, pero encima del fondo */
  pointer-events: none;
}

.section {
  background: rgba(255, 255, 255, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 25px 40px 25px 40px;
  position: relative;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  z-index: 1
}

.news, .woe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: white;
  padding: 20px 40px;
  border-top: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
  z-index: 10
}

.slider-container {
  position: relative;
  max-width: 1280px;
  width: 100%;
  height: 300px;
  overflow: visible;
  background-color: transparent;
  margin: 0 auto
}

.slide {
  display: none;
  width: 100%;
  height: 300px;
  color: #3a5274;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center
}
.slide.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-animation: fadeIn 1s ease-in-out;
  animation: fadeIn 1s ease-in-out
}

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

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

.slide-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
  height: auto
}

.slide-content img {
  max-width: 100%;
  height: auto
}

@-webkit-keyframes rotateFromBottom {
0% {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  opacity: 0
}
100% {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1
}
}

@keyframes rotateFromBottom {
0% {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  opacity: 0
}
100% {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1
}
}

.slide-content button {
  color: #686868;
  font-weight: 500;
  letter-spacing: -1px;
  font-size: 16px;
  width: 200px;
  height: 111px;
  border: none;
  cursor: pointer;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative
}

.nuvem-left {
  background: url(../img/nuvem-left.png);
  width: 100%;
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-animation: rotateFromBottom 1.5s ease;
  animation: rotateFromBottom 1.5s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.nuvem-right {
  background: url(../img/nuvem.png);
  width: 100%;
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-animation: rotateFromBottom 1.5s ease;
  animation: rotateFromBottom 1.5s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.slide-content button:hover {
  color: #915bc6;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s
}

.slide-content button i {
  margin-right: 5px;
  color: #ffb3ab
}

.slider-controls {
  position: absolute;
  left: 50%;
  bottom: -10px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  z-index: 10
}

.slider-controls button {
  padding: 10px 20px;
  background-color: #7b6ea9;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0,0, 0.5);
  /*box-shadow: 0 5px 20px rgba(0, 0,0, 0.5);*/
  color: white;
  border: none;
  cursor: pointer;
  z-index: 1000
}

.slider-controls button:hover {
  background-color: #915bc6
}

.shadow {
  -webkit-box-shadow: 0 -8px 20px rgba(0, 0,0, 0.6);
  box-shadow: 0 -8px 20px rgba(0, 0,0, 0.6)
}

.tittle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #915bc6;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 1.4em;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px
}

.sub-tittle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #333;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  letter-spacing: -1px;
  margin-bottom: 10px
}

.divisor-tittle {
  width: 100px;
  height: 1px;
  background: #dbdbdb;
  bottom: 0
}

.category-tittle {
  color: #333;
  font-size: 1.2em;
  font-weight: 500;
  text-transform: uppercase
}

.tittle strong, .category-tittle strong {
  color: #915bc6
}

.section-bg {
  position: relative
}

.section-bg img {
  position: absolute;
  bottom: 0;
  left: 0
}

#infor {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 40px
}

.status, .infor-geral, .numbers-acc-guild-perso {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  padding: 20px;
  gap: 10px
}

.status span, .numbers-acc-guild-perso span {
  font-size: 1.2em;
  font-weight: 500;
  color: #333
}

.infor-geral {
  text-align: left
}

.infor-geral li {
  color: #333;
  margin-bottom: 5px
}

.infor-geral li span {
  font-weight: 500;
  color: #333
}

.infor-geral li i {
  color: green;
  margin-right: 5px
}

.view-all {
  text-align: center;
  margin-top: 10px
}

.view-all a {
  color: #915bc6;
  font-weight: 500;
  font-size: 17px
}

.view-all a:hover {
  color: #ffb3ab;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s
}

.tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 5px;
  margin-top: 20px;
  gap: 1px
}

.tab-button {
  padding: 10px 20px;
  background-color: #ffb3ab;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px 4px 0px 0px;
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  -o-transition: background-color 0.3s ease, transform 0.3s ease;
  transition: background-color 0.3s ease, transform 0.3s ease;
  transition: background-color 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease
}

.tab-button.active, .tab-button:hover {
  background-color: #915bc6
}

.tab-content {
  display: none;-ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease
}

.tab-content.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1
}

.news .item {
  background: url(../img/bgnews.png) no-repeat center;
  background-size: cover;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 280px;
  min-width: 280px;
  height: 250px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 15px rgba(58, 82, 116, 0.6);
  box-shadow: 0 1px 15px rgba(58, 82, 116, 0.6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto
}

.news .item:hover {
  -webkit-animation: pulse 2s infinite;
  animation: pulse 2s infinite
}

.news .cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 10px
}

.news .label {
  font-weight: bold;
  font-size: 13px;
  margin: 10px 0;
  color: white
}

.news .label i {
  color: #ffb3ab
}

.news .date {
  margin-top: 10px;
  font-size: 0.9em;
  color: #525252
}

.news .content .title h3 {
  margin: 5px 0;
  color: white
}

.news .content .description {
  height: 120px;
  font-size: 1em;
  color: #70767e
}

.news-slider {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%
}

.news-slide {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 280px;
  padding: 10px;
  margin: 5px
}

.news-slider:empty, .guild-slide:empty {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.slick-news-next:hover, .slick-news-prev:hover, .slick-ranking-next:hover, .slick-ranking-prev:hover, .slick-woe-next:hover, .slick-woe-prev:hover {
  color: #915bc6;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s
}

.infor-complementares {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.one-infor, .two-infor {
  margin-top: 50px;
  padding: 5px;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 350px;
  height: auto;
  color: #525252
}

.one-infor-tittle {
  color: #ffb3ab;
  font-weight: 500
}

.container-responsive {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto
}

.ranking-pvp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center
}

.img-left {
  position: absolute;
  bottom: 40px;
  right: 300px
}

.img-right {
  position: absolute;
  bottom: 40px;
  left: 300px
}

.ranking-slider {
  overflow: hidden;
  width: 60%;
  position: relative
}

.ranking-slide {
  max-width: 33.33%;
  height: 220px;
  margin: 25px 15px;
  background: white;
  -webkit-box-shadow: 0 2px 15px rgba(58, 82, 116, 0.6);
  box-shadow: 0 2px 15px rgba(58, 82, 116, 0.6);
  padding: 10px;
  border-radius: 5px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.primeiro-colocado, .iconeranking {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.iconeranking {
  gap: 30px
}

.class-image {
  width: 50px;
  height: 94px;
  overflow: hidden;
  display: inline-block;
  position: relative
}

.class-image img {
  width: 100px;
  height: 94px;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out
}

.class-image.male img {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0)
}

.class-image.female img {
  -webkit-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  transform: translateX(-50px)
}

.ranking-slide p {
  font-weight: 500;
  margin: 0;
  padding: 5px 0
}

.categoryposition {
  padding: 4px;
  font-size: 1em;
  color: #333
}

.categoryname {
  color: #ffb3ab
}

.woe-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.guild-flag {
  background: url(../img/castle-flag.png) no-repeat center;
  height: 162px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.guild-flag img {
  position: relative;
  top: 15%
}

.guild-slider {
  overflow: hidden;
  width: 60%;
  position: relative
}

.guild-slide {
  height: 280px;
  margin: 25px 15px;
  background: white;
  -webkit-box-shadow: 0 2px 15px rgba(58, 82, 116, 0.6);
  box-shadow: 0 2px 15px rgba(58, 82, 116, 0.6);
  padding: 10px;
  border-radius: 5px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.guild-info {
  padding: 5px
}

.guild-slider .slick-slide {
  text-align: center;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.slick-pvp, .slick-woe, .slick-news {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 10px
}

.slick-ranking-next, .slick-ranking-prev, .slick-woe-prev, .slick-woe-next, .slick-news-next, .slick-news-prev {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #7b6ea9;
  font-size: 30px;
  margin: 0 10px
}

.footer {
  height: 234px;
  max-width: 100%;
  background: url(../img/bg-footer-2.png) no-repeat;
  background-size: cover;
  position: relative;
  -webkit-box-shadow: 0 -8px 20px rgba(58, 82, 116, 0.6);
  box-shadow: 0 -8px 20px rgba(58, 82, 116, 0.6);
  border-top: 1px solid #333;
  z-index: 1
}

.footer-bgcontent {
  width: 100%;
  height: 234px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: rgba(2, 2,2, 0.5);
  overflow: hidden;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.responsive-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  justify-content: center; /* centra horizontal */
  align-items: center     /* centra vertical */
}

.footerlogo, .copyright, .right-section {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1
}

.copyright {
  color: white;
  text-align: center;
  padding: 30px 0
}

.copyright strong a {
  color: #ffb3ab
}

.footerlogo {
  margin-left: 30px
}

.footerlogo a, .social a {
  color: white;
  opacity: 0.9
}

.right-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  /*justify-content: flex-end;*/
  margin-right: 40px;
  justify-content: center;
  align-items: center
}

.social a {
  color: #ffb3ab;
  font-size: 1.8em;
  margin: 0 5px
}

.social a:hover {
  color: #915bc6;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s
}

.gepard {
  position: relative;
  /*margin-top: -30px;*/
  opacity: 0.8
}

#backToTop {
  font-size: 1.6em;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: rgba(0, 0,0, 0.7);
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  -webkit-animation: pulse 2s infinite;
  animation: pulse 2s infinite
}

#backToTop:hover {
  background-color: #555
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 100, 100, 0.8);
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.reveal-right, .reveal-left, .reveal-top, .reveal-list li {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0)
}

.progress-bar {
  width: 30%;
  height: 10px;
  background-color: #5b457b;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #5b457b
}

.progress {
  width: 0;
  height: 100%;
  background-color: #ffffff;
  -webkit-transition: width 0.2s ease-in-out;
  -o-transition: width 0.2s ease-in-out;
  transition: width 0.2s ease-in-out
}

.main-content {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease
}

.main-content.loaded {
  opacity: 1
}

.submenuclass {
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.submenuclasscont {
  font-size: 15px;
  background: rgba(255, 255, 255, 0.8);
  width: 90%;
  padding: 15px;
  margin: 5px 0;
  border-radius: 4px;
  -webkit-box-shadow: 0 8px 20px rgba(58, 82, 116, 0.6);
  box-shadow: 0 8px 20px rgba(58, 82, 116, 0.6)
}

.submenuclass a {
  color: #444444;
  padding: 0px 2px
}

.submenuclass a:hover {
  color: #6a5acd;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

.closebtn {
  position: absolute;
  top: 0;
  right: 10px;
  color: white;
  font-size: 20px;
  cursor: pointer
}

.php-alert {
  text-align: center;
  padding: 20px;
  background-color: black;
  color: white;
  opacity: 1;
  -webkit-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
  border-radius: 4px;
  position: fixed;
  bottom: 10%;
  right: 5%;
  z-index: 1000
}

@-webkit-keyframes pulse {
0% {
  -webkit-transform: scale(1);
  transform: scale(1)
}
50% {
  -webkit-transform: scale(1.05);
  transform: scale(1.05)
}
100% {
  -webkit-transform: scale(1);
  transform: scale(1)
}
}

@keyframes pulse {
0% {
  -webkit-transform: scale(1);
  transform: scale(1)
}
50% {
  -webkit-transform: scale(1.05);
  transform: scale(1.05)
}
100% {
  -webkit-transform: scale(1);
  transform: scale(1)
}
}

.message {
  background: rgba(255, 255, 255, 0.8);
  color: red;
  text-align: center
}

.container-flux {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 60vh;
  background: rgba(255, 255, 255, 0.8);
  color: #535353
}

.content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: left;
  -ms-flex-align: left;
  align-items: left
}

.newsDiv {
  background: rgba(255, 255, 255, 0.8);
  width: 90%;
  padding: 15px;
  margin-bottom: 40px;
  border-radius: 4px;
  -webkit-box-shadow: 0 8px 20px rgba(58, 82, 116, 0.6);
  box-shadow: 0 8px 20px rgba(58, 82, 116, 0.6)
}

.align-text h3, .align-text p {
  text-align: center
}

h2 {
  color: #ffb3ab;
  font-weight: 500;
  font-size: 1.2rem;
  margin-bottom: 5px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.newsDiv h4 {
  color: #555;
  font-size: 1.2rem;
  margin-bottom: 10px
}

.newsCont {
  padding-bottom: 10px;
  border-radius: 5px;
  margin-bottom: 30px;
  color: #fff;
  border-bottom: 1px solid #dbdbdb
}

.newsCont p {
  color: #555;
  font-size: 1rem
}

.newsDate {
  color: #555;
  font-weight: 500;
  display: block;
  margin-bottom: 10px
}

.news_link {
  color: #fab13d;
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
  text-transform: uppercase;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease
}

.news_link:hover {
  color: #555
}

input {
  padding: 7px;
  border-radius: 4px;
  border: 1px solid #ccc;
  -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  -o-transition: border-color 0.3s, box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s
}

select {
  padding: 6px;
  border-radius: 4px;
  color: #333;
  border: 1px solid #ccc
}

input:focus, select:focus {
  border-color: #fab13d;
  -webkit-box-shadow: 0 0 5px rgba(250, 168, 15, 0.5);
  box-shadow: 0 0 5px rgba(250, 168, 15, 0.5);
  outline: none
}

.empty-cart-message {
  background: white
}

.textarea textarea {
  width: 400px;
  height: 200px
}

.AccountsViewForm, .low-AccountsViewForm {
  font-size: 12px;
  margin: 20px 0;
  padding: 15px;
  border-radius: 4px;
  color: #555;
  border: 1px solid #d8d8d8
}

.low-AccountsViewForm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.low-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline
}

.low-field-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 10px
}

.low-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-left: 10px
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 10px
}

.field {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 calc(20% - 10px);
  flex: 1 1 calc(20% - 10px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.field label {
  margin-bottom: 5px;
  font-weight: 500;
  color: #555
}

.field input[type="text"] {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 60%
}

.field select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 68%
}

input[type="submit"], input[type="button"] {
  margin-top: 20px;
  padding: 10px 20px;
  background: #ffb3ab;
  color: white;
  border: none;
  cursor: pointer
}

input[type="submit"]:hover, input[type="button"]:hover {
  background: #6a5acd
}

.note a {
  color: #6a5acd
}

.newsDiv a {
  color: #6a5acd
}

.submitOut input[type="submit"], .low-AccountsViewForm input[type="submit"], .low-AccountsViewForm input[type="button"], .AccountsViewForm input[type="submit"], .AccountsViewForm input[type="button"], .generic-form-table input[type="submit"], .generic-form-table button[type="submit"], .vertical-table input[type="submit"], .horizontal-table input[type="submit"], .generic-form-table input[type="button"] {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  background: #ffb3ab;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold
}

.AccountsViewForm input[type="submit"]:hover, .AccountsViewForm input[type="button"]:hover, .low-AccountsViewForm input[type="submit"]:hover, .low-AccountsViewForm input[type="button"]:hover {
  background: #555;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s
}

.table-respon {
  overflow-x: auto
}

/*
.vertical-table {
  width: 100%;
  margin: 20px auto;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0,0, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0,0, 0.1);
  border-radius: 10px;
  overflow: hidden
}
*/

.vertical-table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0,0, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0,0, 0.1);
  border-radius: 10px;
  overflow: hidden
}

.vertical-table tr {
  font-size: 12px
}

.vertical-table th, .vertical-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  color: #3a5274
}

.vertical-table th {
  background-color: #fab13d;
  color: #f6bf66;
  font-weight: bold
}

.vertical-table tr:nth-child(even) {
  background-color: #f6bf66
}

.vertical-table tr:hover {
  background-color: #ddd
}

.vertical-table caption {
  caption-side: top;
  font-size: 1.5em;
  margin: 10px;
  color: #f6bf66
}

.horizontal-table {
  font-size: 0.8em;
  width: 100%;
  margin: 20px auto;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0,0, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0,0, 0.1);
  border-radius: 4px;
  overflow: hidden
}

.horizontal-table th, .horizontal-table td {
  padding: 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  color: #3a5274
}

.horizontal-table th a {
  color: white
}

.vertical-table th, .vertical-table td, .generic-form-table th, .generic-form-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  color: #555
}

.vertical-table td a, .horizontal-table td a {
  color: #915bc6
}

.vertical-table th, .horizontal-table th {
  background-color: #7b6ea9;
  color: white;
  font-weight: bold
}

.vertical-table tr:nth-child(even), .horizontal-table tr:nth-child(even) {
  background-color: white
}

.vertical-table tr:hover, .horizontal-table tr:hover {
  background-color: #ddd
}

.vertical-table caption, .horizontal-table caption {
  caption-side: top;
  font-size: 1.5em;
  margin: 10px;
  color: #f6bf66
}

.linkdownload a {
  color: white;
  font-size: 17px;
  padding: 15px;
  background: #ffb3ab
}

.linkdownload i {
  color: #ffb3ab
}

.linkdownload a:hover {
  background: #6a5acd;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s
}

@media (max-width: 768px) {
.img-right {
  left: 0
}
.img-left {
  right: 0
}
body {
  margin-top: 62px
}
.container-flux {
  padding: 10px
}
h2 {
  font-size: 1.8rem
}
.newsDiv h4 {
  font-size: 1.2rem
}
.newsCont {
  padding: 10px
}
.footerlogo.reveal-top {
  display: none !important;
}
.responsive-footer {
  flex-direction: column !important;
}
.copyright.reveal-top {
  width: 90% !important;
  margin-left: -30px
}
}

@media (max-width: 1024px) {
.img-left {
  right: 0
}
.img-right {
  left: 0px
}
.ranking-slide {
  width: 280px;
  height: 220px;
  margin: 15px 15px
}
.news .content .description {
  height: 140px
}
.news .label {
  margin: 10px 0px
}
.slide-content button {
  width: 200px;
  height: 111px;
  font-size: 14px;
  margin-right: 10px
}
.dp-none {
  display: none
}
}

@media (max-width: 1280px) {
.img-left {
  right: 0px
}
.img-right {
  left: 0px
}
}

@media (max-width: 1366px) {
.img-left {
  right: 0px
}
.img-right {
  left: 0px
}
}

@media (max-width: 1440px) {
.img-left {
  right: 60px
}
.img-right {
  left: 60px
}
}

@media (max-width: 1600px) {
.img-left {
  right: 0px
}
.img-right {
  left: 0px
}
}

@media (max-width: 1680px) {
.img-left {
  right: 0px
}
.img-right {
  left: 0px
}
}