@import "../../colors.css";

.page-template-page-tournament .content.content_top_margin_none {
  margin-top: -100px !important;
}

.page-template-page-templates .modal-backdrop {
  display: none !important;
}

.page-template-page-tournament .tournament.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  position: relative;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.page-template-page-tournament .tournament {
  opacity: 0;
  transform: translateY(-1000%);
  visibility: hidden;
  position: absolute;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

body.dark-mode .tournaments h3,
body.dark-mode .tournaments p {
  color: inherit !important;
}
body.dark-mode.page-template-page-tournament nav.main_menu > ul > li > a {
  color: var(--black) !important;
}

.navbar-nav {
  gap: 50px !important;
}

.navbar-nav .nav-item .nav-link {
  font-size: 16px !important;
  font-weight: 700;
  text-transform: uppercase;
  color: black !important;
  font-style: normal;
}

.navbar-brand img {
  height: 50px;
}

.tournaments {
  background-image: var(--bg-light-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
}

.tournament * {
  color: #fff;
  /*    text-shadow: 0px 0px 5px var(--boxshadow-dark-20);*/
}

.dark-mode .tournament * {
  color: #fff;
}

.dark-mode .example *,
.example * {
  color: #000;
}
.tournament .alert.alert-danger {
  color: #842029;
}
.tournament .modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.16);
  padding: 0px !important;
}
.tournament .modal .modal-dialog {
  margin: 20vh auto;
}

.page-template-page-tournament section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  transition: 0.5s linear all;
}

.page-template-page-tournament section:nth-child(1) {
  padding-top: 145px;
}

.page-template-page-tournament section .row {
  padding: 100px 0;
}

.dark-mode .tournaments {
  background-image: var(--bg-dark-url);
  background-attachment: fixed !important;
}

.tournament .text-animated:hover {
  transform: translate(0, -50px);
}

.tournament .text-animated {
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  color: var(--color-dark-gray);
  font-weight: bolder;
  font-family: system-ui;
}
/*
.tournament .badges {
    position: absolute !important;
    width: 400px !important;
    left: -14%;
    top: 0%;
    text-align: center !important;
    transform: rotate(-45deg) translate(-40px, -75px) translate3d(0, 0, 0);
    font-size: 2rem;
    text-transform: uppercase;
}

.tournament .badges .badge { 
    display:block;
    padding:20px 0;
}
.tournament .badges .badge.live-now{
    background: var(--background-km-green);
    color:#fff;
}

.tournament .badges .badge.concluded{
    background: var(--red);
}

.tournament .badges .badge.upcoming{
    background: var(--light-blue);
}
*/

.tournament .badges {
  /* position: absolute !important; */
  /* width: 400px !important; */
  /* left: -14%; */
  /* top: 0%; */
  text-align: center !important;
  /* transform: rotate(-45deg) translate(-40px, -75px) translate3d(0, 0, 0); */
  font-size: 2rem;
  text-transform: uppercase;
}

.tournament .badges .badge {
  display: block;
  padding: 15px 35px 30px;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
  color: #fff;
  position: absolute;
  transform: rotate(-45deg) translate(0, 0) translate3d(0, 0, 0);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 56.1%, 50.5% 100%, 0% 57.25%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 56.1%, 50.5% 100%, 0% 57.25%);
}
.tournament .badges .badge.live-now {
  animation-name: animation-live;
}

.tournament .badges .badge.concluded {
  animation-name: animation-concluded;
}

.tournament .badges .badge.upcoming {
  animation-name: animation-upcoming;
}
@-webkit-keyframes animation-live {
  0% {
    background-color: var(--background-km-green);
  }
  50.0% {
    background-color: #000;
  }
  100.0% {
    background-color: var(--background-km-green);
  }
}

@keyframes animation-live {
  0% {
    background-color: var(--background-km-green);
  }
  50.0% {
    background-color: #000;
  }
  100.0% {
    background-color: var(--background-km-green);
  }
}

@-webkit-keyframes animation-concluded {
  0% {
    background-color: var(--red);
  }
  50.0% {
    background-color: #000;
  }
  100.0% {
    background-color: var(--red);
  }
}

@keyframes animation-concluded {
  0% {
    background-color: var(--red);
  }
  50.0% {
    background-color: #000;
  }
  100.0% {
    background-color: var(--red);
  }
}
@-webkit-keyframes animation-upcoming {
  0% {
    background-color: var(--light-blue);
  }
  50.0% {
    background-color: #000;
  }
  100.0% {
    background-color: var(--light-blue);
  }
}

@keyframes animation-upcoming {
  0% {
    background-color: var(--light-blue);
  }
  50.0% {
    background-color: #000;
  }
  100.0% {
    background-color: var(--light-blue);
  }
}
.tournament .clockdiv {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
}
.tournament .clockdiv h5 {
  flex: 1 0 100%;
}

.tournament .clockdiv div {
  margin: 0 10px;
  flex: 0 0 50px;
}
.tournament.cd1 .parent-container-svg {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 45px;
}

.tournament.cd1 .parent-container-svg .bottom-div {
  position: absolute;
  /*   bottom: 105px;
    left: 38%;*/
  /* transform: translateX(-50%); */
  /* text-align: center; */
  display: flex;
  /* top: -93px; */
  margin-top: -90px;
}

.tournament.cd1 .parent-container-svg .bottom-div object.eyesObj,
img:not(.q_logo img) {
  filter: drop-shadow(0px 0px 3px var(--boxshadow-dark-30)) !important;
}

/*.tournament .modal-dialog{
    max-width:80% !important;
}*/

.modal .modal-dialog {
  max-width: 90%;
}

.tournament .btn .tournament,
.tournament.cd1 .badges .badge,
.tournament .grades {
  box-shadow: 0px 0px 3px var(--boxshadow-dark-30);
}

.bottom-div .eye {
  width: 80px;
  height: 100px;
  background-image: url(../images/new-tournament/aug-eye.png);
  /*    border-radius: 50%;*/
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  margin: 0px;
  background-size: contain;
}

.bottom-div .eye:first-child {
  margin-right: 14px;
}

@keyframes movePupil {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(10px, 0);
  }

  50% {
    transform: translate(10px, 10px);
  }

  75% {
    transform: translate(0, 10px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.tournament.cd1 .links a {
  font-weight: bolder;
}

.tournament.cd1 .links .btn,
.tournament.cd1 .links .btn-link {
  padding: 8px 15px !important;
  font-weight: bold;
  /* font-size: 1.3rem; */
}

.tournament.cd1 .links .btn {
  border-radius: 20px !important;
  /* border: 4px solid white !important; */
  padding: 10px 20px !important;
}

.tournament.cd1 .links .btn:before {
  border-radius: 30px !important;
}

.tournament.cd1 .links .btn-link {
  text-decoration-line: underline;
  text-underline-offset: 6px;
}

.tournament .grades {
  background: #a3d7e9;
  color: #000;
  padding: 14px 51px;
  font-weight: bolder;
  border-radius: 5px;
}

.card-container-svg {
  position: relative;
  /* display: inline-block; */
  display: flex;
  justify-content: center;
  /* margin-top: 150px; */
  width: 90% !important;
}

/*object.eyesObj {
   filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3)) !important;
}*/

.flip-card-front h3 {
  color: var(--white);
  font-size: 35px;
  font-family: system-ui;
  /* text-decoration: underline; */
  text-decoration-line: underline;
  text-underline-offset: 6px;
}

.swiper-3d {
  perspective: 5000px !important;
}

.swiper {
  width: 420px;
  height: 100%;

  /* Ensure the swiper container is tall enough */
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  height: 500px !important;
}

.swiper-3d .swiper-slide-shadow {
  background: none !important;
}

.flip-card {
  background-color: transparent;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  background-size: contain;
  background-repeat: no-repeat;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.flip-card-front {
  color: black;
}

.flip-card-back button {
  background: var(--white) !important;
  color: black !important;
  font-weight: bolder;
  width: 62% !important;
  font-size: 31px;
  border-radius: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.btn:before,
nav.main_menu ul li.menu-item-object-login a:before,
input[type="button"]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px !important;
  background: linear-gradient(
    45deg,
    var(--gradient-start-green),
    var(--gradient-end-green)
  ) !important;
  opacity: 0;
  transition: opacity 0.4s;
  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  z-index: -1;
}

.flip-card-back {
  background: url("../images/new-tournament/flip-card-back.png") !important;
  /* background-color: dodgerblue; */
  color: var(--white);
  transform: rotateY(180deg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.closedbtn {
  position: absolute;
  bottom: 10px;
  left: 20px;
  right: 20px;
}

.title_sub {
  font-size: 16px;
  font-weight: bolder;
  background: var(--background-km-green);
  padding: 10px;
}

.title_sub,
.disc_sub {
  text-align: center;
  padding: 5px;
  font-size: 12px;
  font-weight: bolder;
  line-height: 2;
}

.tournament-nav .month-details .description .subject {
  margin-bottom: 15px;
  line-height: 1;
  padding: 10px;
  background: var(--boxshadow-dark-5);
  text-align: center;
}

.lastdiv h3 {
  border-radius: 10px;
  font-weight: bold;
  color: var(--white);
  text-align: center;
  font-family: system-ui;
  display: inline-block;
  margin: auto;
  letter-spacing: 3px;
}

.lastdiv p {
  font-size: 14px;
  font-weight: bolder;
  padding: 0px 10px;
}

/* .performer {
    margin-bottom: 20px;
} */

.performer img {
  background: #662c8f;
  border: 5px solid #707070;
  border-radius: 50%;
}

.performer h5,
.performer p {
  margin-top: 10px;
}

@media only screen and (max-width: 1440px) {
  .swiper {
    width: 350px !important;
  }

  .swiper-slide {
    height: 427px !important;
  }

  .card-container-svg {
    position: relative;
    /* display: inline-block; */
    display: flex;
    justify-content: center;
    /* margin-top: 150px; */
    top: 40px;
    /* bottom: 26px; */
  }

  .flip-card-front h3 {
    position: relative;
    top: 22px;
  }

  .flip-card-back button {
    background: white !important;
    color: black !important;
    font-weight: bolder;
    width: 62% !important;
    font-size: 25px;
    border-radius: 10px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
  }
}

@media only screen and (max-width: 768px) and (min-width: 450px) {
  .row2 {
    flex-direction: column;
    align-items: center !important;
  }

  .side1 {
    width: 100% !important;
  }

  .lastdiv h3 {
    background: #1b1464;
    padding: 9px 163px;
    border-radius: 10px;
    font-weight: bold;
    color: var(--white);
    text-align: center;
    font-family: system-ui;
    display: inline-block;
    margin: auto;
    letter-spacing: 3px;
    font-size: 25px;
  }
}

@media only screen and (max-width: 768px) {
  .description {
    flex-direction: column !important;
  }

  .modal .modal-dialog {
    max-width: 60% !important;
  }
  .description .grade-1 {
    border: none !important;
  }

  .description .grade-2 {
    border: none !important;
  }

  .example {
    position: relative !important;
    left: 0 !important;
  }

  .tournament .badges .badge {
    position: relative;
    transform: none;
  }
}

/*tournament stats css*/

.timer_tournament {
  background: url(../images/new-tournament/stats_watch-min.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 20px;
}

.timer_tournament,
h5 {
  color: var(--white);
  font-weight: bolder;
}

@media only screen and (max-width: 992px) {
  .header_bottom,
  nav.mobile_menu {
    background-color: transparent !important;
  }

  .modal .modal-dialog {
    max-width: 90%;
  }
}

@-webkit-keyframes sway {
  0% {
    transform: rotate(0);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  10% {
    transform: rotate(-12deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  30% {
    transform: rotate(8deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  45% {
    transform: rotate(-4deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  60% {
    transform: rotate(2deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  70% {
    transform: rotate(-0.1deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  75% {
    transform: rotate(0.05deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    transform: rotate(0);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes sway {
  0% {
    transform: rotate(0);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  10% {
    transform: rotate(-12deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  30% {
    transform: rotate(8deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  45% {
    transform: rotate(-4deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  60% {
    transform: rotate(2deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  70% {
    transform: rotate(-0.1deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  75% {
    transform: rotate(0.05deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    transform: rotate(0);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: rotate(0);
  }
}

.example {
  max-width: 350px;
  display: inline-block;
  line-height: 1;
  padding: 15px 10px;
  margin: 25px 0 0 0;
  -webkit-animation: sway 5s linear infinite;
  animation: sway 5s linear infinite;
  transform-origin: 50% -32px;
  /*    background: linear-gradient(to right, #ca2e55 0%, #ca2e55 100%), linear-gradient(to right, #ca2e55 0%, #ca2e55 100%), linear-gradient(to right, #ca2e55 0%, #ca2e55 100%), linear-gradient(to right, #ca2e55 0%, #ca2e55 100%), radial-gradient(circle at 100% 100%, #ca2e55 0%, #ca2e55 44%, #fff 46%, #fff 55%, #ca2e55 57%, #ca2e55 70%, transparent 72%, transparent 100%), radial-gradient(circle at 0 100%, #ca2e55 0%, #ca2e55 44%, #fff 46%, #fff 55%, #ca2e55 57%, #ca2e55 70%, transparent 72%, transparent 100%), radial-gradient(circle at 0 0, #ca2e55 0%, #ca2e55 44%, #fff 46%, #fff 55%, #ca2e55 57%, #ca2e55 70%, transparent 72%, transparent 100%), radial-gradient(circle at 100% 0, #ca2e55 0%, #ca2e55 44%, #fff 46%, #fff 55%, #ca2e55 57%, #ca2e55 70%, transparent 72%, transparent 100%), linear-gradient(to top, #ca2e55 0%, #ca2e55 63%, #fff 65%, #fff 78%, #ca2e55 80%, #ca2e55 100%), linear-gradient(to bottom, #ca2e55 0%, #ca2e55 63%, #fff 65%, #fff 78%, #ca2e55 80%, #ca2e55 100%), linear-gradient(to left, #ca2e55 0%, #ca2e55 63%, #fff 65%, #fff 78%, #ca2e55 80%, #ca2e55 100%), linear-gradient(to left, #ca2e55 0%, #ca2e55 63%, #fff 65%, #fff 78%, #ca2e55 80%, #ca2e55 100%), linear-gradient(to right, #ca2e55 0%, #ca2e55 63%, #fff 65%, #fff 78%, #ca2e55 80%, #ca2e55 100%), linear-gradient(to right, #ca2e55 0%, #ca2e55 63%, #fff 65%, #fff 78%, #ca2e55 80%, #ca2e55 100%), radial-gradient(circle at 0 50%, transparent 0%, transparent 30%, #ca2e55 32%, #ca2e55 42%, #fff 44%, #fff 48%, #ca2e55 50%, #ca2e55 100%), radial-gradient(circle at 100% 50%, transparent 0%, transparent 30%, #ca2e55 32%, #ca2e55 42%, #fff 44%, #fff 48%, #ca2e55 50%, #ca2e55 100%), linear-gradient(to right, #ca2e55 0%, #ca2e55 100%);*/
  background: linear-gradient(to right, #fff 0%, #fff 100%),
    linear-gradient(to right, #fff 0%, #fff 100%),
    linear-gradient(to right, #fff 0%, #fff 100%),
    linear-gradient(to right, #fff 0%, #fff 100%),
    radial-gradient(
      circle at 100% 100%,
      #fff 0%,
      #fff 44%,
      #000000 46%,
      #000000 55%,
      #fff 57%,
      #fff 70%,
      transparent 72%,
      transparent 100%
    ),
    radial-gradient(
      circle at 0 100%,
      #fff 0%,
      #fff 44%,
      #000000 46%,
      #000000 55%,
      #fff 57%,
      #fff 70%,
      transparent 72%,
      transparent 100%
    ),
    radial-gradient(
      circle at 0 0,
      #fff 0%,
      #fff 44%,
      #000000 46%,
      #000000 55%,
      #fff 57%,
      #fff 70%,
      transparent 72%,
      transparent 100%
    ),
    radial-gradient(
      circle at 100% 0,
      #fff 0%,
      #fff 44%,
      #000000 46%,
      #000000 55%,
      #fff 57%,
      #fff 70%,
      transparent 72%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      #fff 0%,
      #fff 63%,
      #000000 65%,
      #000000 78%,
      #fff 80%,
      #fff 100%
    ),
    linear-gradient(
      to bottom,
      #fff 0%,
      #fff 63%,
      #000000 65%,
      #000000 78%,
      #fff 80%,
      #fff 100%
    ),
    linear-gradient(
      to left,
      #fff 0%,
      #fff 63%,
      #000000 65%,
      #000000 78%,
      #fff 80%,
      #fff 100%
    ),
    linear-gradient(
      to left,
      #fff 0%,
      #fff 63%,
      #000000 65%,
      #000000 78%,
      #fff 80%,
      #fff 100%
    ),
    linear-gradient(
      to right,
      #fff 0%,
      #fff 63%,
      #000000 65%,
      #000000 78%,
      #fff 80%,
      #fff 100%
    ),
    linear-gradient(
      to right,
      #fff 0%,
      #fff 63%,
      #000000 65%,
      #000000 78%,
      #fff 80%,
      #fff 100%
    ),
    radial-gradient(
      circle at 0 50%,
      transparent 0%,
      transparent 30%,
      #fff 32%,
      #fff 42%,
      #000000 44%,
      #000000 48%,
      #fff 50%,
      #fff 100%
    ),
    radial-gradient(
      circle at 100% 50%,
      transparent 0%,
      transparent 30%,
      #fff 32%,
      #fff 42%,
      #000000 44%,
      #000000 48%,
      #fff 50%,
      #fff 100%
    ),
    linear-gradient(to right, #fff 0%, #fff 100%);
  background-size: 3px 3px, 3px 3px, 3px 3px, 3px 3px, 16px 16px, 16px 16px,
    16px 16px, 16px 16px, calc(100% - 32px + 4px) 16px,
    calc(100% - 32px + 4px) 16px, 16px calc(50% - 32px), 16px calc(50% - 32px),
    16px calc(50% - 32px), 16px calc(50% - 32px), 32px 32px, 32px 32px,
    calc(100% - 32px + 4px) calc(100% - 32px);
  background-position: 0 calc(50% - 16px), 100% calc(50% - 16px),
    0 calc(50% + 16px), 100% calc(50% + 16px), 0 0, 100% 0, 100% 100%, 0 100%,
    calc(16px - 1px) 0, calc(16px - 1px) 100%, 0 16px, 0 calc(100% - 16px),
    100% 16px, 100% calc(100% - 16px), 0 50%, 100% 50%, calc(16px - 1px) 16px;
  background-repeat: no-repeat;
}

.example::before {
  content: "";
  height: 2px;
  width: 51%;
  position: absolute;
  top: -16px;
  left: 0;
  z-index: -1;
  transform: rotate(-15deg);
  /*    background: linear-gradient(to right, transparent 0%, transparent 13%, #ca2e55 15%, #fff 17%, #fff 100%);*/
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 13%,
    #fff 15%,
    #000 17%,
    #000 100%
  );
}

.example::after {
  content: "";
  height: 2px;
  width: 51%;
  position: absolute;
  top: -16px;
  right: 0;
  z-index: -1;
  transform: rotate(15deg);
  /*    background: linear-gradient(to left, transparent 0%, transparent 13%, #ca2e55 15%, #fff 17%, #fff 100%);*/
  background: linear-gradient(
    to left,
    transparent 0%,
    transparent 13%,
    #fff 15%,
    #000 17%,
    #000 100%
  );
}

.play_btn_tm {
  display: inline-grid;
}

/*Modal Changing*/

/* .description .grade-1 {
  border-right: 3px solid;
} */

/* .description .grade-1,
.grade-2,
.grade-4 {
  border-right: 3px solid;
} */

.fade {
  background-color: rgb(0 0 0 / 68%) !important;
}

.modal-body {
  padding: 0px !important;
}

.tournament-634 .bottom-div,
.tournament-635 .bottom-div {
  display: none !important;
}

.parent-container-svg {
  margin-top: 122px;
}

/* .description .grade-1,
.description .grade-2,
.description .grade-3 {

  width: 100%;
} */

html:has(body.modal-open) {
  overflow: hidden !important;
}

/* rope tournament css start*/
@import url("//fonts.googleapis.com/css?family=Montserrat");

.page-template-page-tournament .rope-view .row {
  padding: 0;
}
.rope-view * {
  font-family: "Montserrat";
}

.rope-view .tournament * {
  color: #6519b6;
  /* text-shadow: 0 0px 4px #ffffff; */
  font-weight: 800 !important;
}

.dark-mode .rope-view .tournament * {
  color: #fff;
  /* text-shadow: 0 0px 4px #6519b6; */
}
.rope-view .tournament .bottom-div {
  display: none !important;
}

.rope-view .tournament .clockdiv * {
  text-transform: uppercase;
}

/* .rope-view .tournament img {
  width: 250px;
} */

.stage_new {
  position: absolute;
}

#stage svg {
  width: 100%;
  height: 400px;
  display: block;
  overflow: visible;
}

#stage .circles {
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  transform-box: fill-box; /* important: SVG me box reference */
  transform-origin: center; /* center se zoom hoga */
}

#stage .circles:hover {
  cursor: url('<?php echo get_template_directory_uri() . "/inc/images/new-tournament/cursor-1.png"; ?>')
      16 16,
    pointer !important;
}
#stage .circles.active {
  transform: scale(1.8);
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.8));
}

#stage .circles.active .starglow {
  transform: scaleY(1) rotate(0deg);
  fill: #ffdd55;
  animation: star-glow 1s infinite alternate;
}

#stage .circles *:hover .starglow {
  transform: scaleY(1) rotate(0deg);
  fill: #ffdd55;
  animation: star-glow 1s infinite alternate;
}

.astronaut {
  position: absolute;
  animation: bounceAround 90s linear infinite;
  pointer-events: auto;
  z-index: -1;
  -webkit-user-drag: none;
  user-select: none;
}

.examplenew2 {
  display: flex;
  justify-content: center;
}

.examplenew2 .clockdiv span,
.examplenew2 .clockdiv h5,
.examplenew2 .clockdiv .smalltext {
  font-weight: 600;
  line-height: 1;
}
.examplenew2 .clockdiv .smalltext {
  font-size: 15px;
}

.examplenew2 .clockdiv span {
  font-size: 40px;
}

.examplenew2 .clockdiv h5 {
  padding: 10px;
  font-size: 24px;
}

.cd1 .btn {
  border-radius: 10px !important;
}

.tournament-632 .btnrope {
  background: #bfad39;
}
.tournament-633 .btnrope {
  background: #cd8e1d;
}

.tournament-634 .btnrope {
  background: #2eaea3;
}
.tournament-635 .btnrope {
  background: #dc2343;
}

.tournament-632 .btnrope,
.tournament-633 .btnrope,
.tournament-634 .btnrope,
.tournament-635 .btnrope {
  /* background: radial-gradient(#f9d700 0%, #dbc84b 50%, #f9d700 100%) !important; */
  /* background: linear-gradient(90deg, #f9d700, #57217e) !important; */

  color: var(--white) !important;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tournament-632 .btnrope:hover,
.tournament-633 .btnrope:hover,
.tournament-634 .btnrope:hover,
.tournament-635 .btnrope:hover {
  background: #6521bd;
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.tournament-633 .btnrope {
  /* background: radial-gradient(#ca9026 0%, #d89928 50%, #f4a311 100%) !important; */
  /* background: linear-gradient(90deg, #f4a210, #57217e) !important; */
}

.tournament-634 .btnrope {
  /* background: radial-gradient(#2ccdbf 0%, #51cec4 50%, #2ccdbf 100%) !important; */
  /* background: linear-gradient(90deg, #2ccdbf, #57217e) !important; */
}

.tournament-635 .btnrope {
  /* background: radial-gradient(#da2041 0%, #c5668f 0%, #da2041 100%) !important; */
  /* background: linear-gradient(90deg, #da2041, #57217e) !important; */
}

.dark-mode .rope-view .tournament.cd1 .links .btn {
  color: var(--black) !important;
}

.rope-view .tournament .badges .badge {
  padding: 5px 25px;
  position: relative;
  transform: none;
  clip-path: none;
  border: 2px solid;
  display: inline-block;
  box-shadow: none;
}

.rope-view .tournament .badges .badge.live-now {
  animation-name: animation-live-rope;
}

.rope-view .tournament .badges .badge.concluded {
  animation-name: animation-concluded-rope;
  /* margin-bottom: 120px; */
}

.rope-view .tournament .badges .badge.upcoming {
  animation-name: animation-upcoming-rope;
}

h1#model-FIRST {
  color: var(--black) !important;
  font-weight: bold;
}

.rope-modal .title_sub {
  color: var(--background-km-green);
  font-size: 20px !important;
  font-weight: bolder !important;
  border: 1px solid var(--background-km-green);
  padding: 1px !important;
  border-radius: 5px;
  background: var(--white);
}

.description .grade-4,
.grade-5 {
  width: 50% !important;
}

@keyframes bounceAround {
  0% {
    top: 0;
    left: 0;
    transform: rotate(0deg);
  }
  20% {
    top: 0;
    left: calc(100% - 120px);
    transform: rotate(90deg);
  }
  40% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
  } /* center */
  60% {
    top: calc(100% - 120px);
    left: calc(100% - 120px);
    transform: rotate(270deg);
  }
  80% {
    top: calc(100% - 120px);
    left: 0;
    transform: rotate(360deg);
  }
  100% {
    top: 0;
    left: 0;
    transform: rotate(450deg);
  }
}

@keyframes star-glow {
  0% {
    filter: drop-shadow(0 0 0px gold);
  }
  50% {
    filter: drop-shadow(0 0 15px gold);
  }
  100% {
    filter: drop-shadow(0 0 0px gold);
  }
}

@-webkit-keyframes animation-live-rope {
  0% {
    border-color: var(--background-km-green);
    color: var(--background-km-green);
  }
  50.0% {
    border-color: #fff;
    color: #fff;
  }
  100.0% {
    border-color: var(--background-km-green);
    color: var(--background-km-green);
  }
}

@keyframes animation-live-rope {
  0% {
    border-color: var(--background-km-green);
    color: var(--background-km-green);
  }
  50.0% {
    border-color: #fff;
    color: #fff;
  }
  100.0% {
    border-color: var(--background-km-green);
    color: var(--background-km-green);
  }
}

@-webkit-keyframes animation-concluded-rope {
  0% {
    border-color: var(--red);
    color: var(--red);
  }
  50.0% {
    border-color: #fff;
    color: #fff;
  }
  100.0% {
    border-color: var(--red);
    color: var(--red);
  }
}

@keyframes animation-concluded-rope {
  0% {
    border-color: var(--red);
    color: var(--red);
  }
  50.0% {
    border-color: #fff;
    color: #fff;
  }
  100.0% {
    border-color: var(--red);
    color: var(--red);
  }
}
@-webkit-keyframes animation-upcoming-rope {
  0% {
    border-color: var(--light-blue);
    color: var(--light-blue);
  }
  50.0% {
    border-color: #fff;
    color: #fff;
  }
  100.0% {
    border-color: var(--light-blue);
    color: var(--light-blue);
  }
}

@keyframes animation-upcoming-rope {
  0% {
    border-color: var(--light-blue);
    color: var(--light-blue);
  }
  50.0% {
    border-color: #fff;
    color: #fff;
  }
  100.0% {
    border-color: var(--light-blue);
    color: var(--light-blue);
  }
}

@media screen and (min-width: 800px) and (max-width: 1440px) {
  .tournament.cd1 .links .btn,
  .tournament.cd1 .links .btn-link {
    font-size: 1rem !important;
  }
}

@media screen and (max-width: 790px) {
  .rope-view .offset-1 {
    margin: 0px !important;
  }

  #stage .circles.active {
    transform: scale(1.6) !important;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) !important;
  }
}

@media screen and (max-width: 500px) {
  .rope-view .links {
    display: inline-block !important;
  }

  .rope-view .links .btn-syallabus {
    margin: 15px;
  }

  .examplenew2 .clockdiv .smalltext {
    font-size: 10px !important;
  }

  .examplenew2 .clockdiv span {
    font-size: 30px !important;
  }
  .tournament .clockdiv div {
    margin: 0px 5px !important;
  }

  .tournament .clockdiv {
    margin-top: 10px !important;
  }

  .rope-view #stage svg {
    height: auto;
  }
}

@media screen and (max-width: 375px) {
  .rope-view .tournament .badges .badge.concluded {
    margin-bottom: 0px !important;
  }

  .astronaut {
    width: 20%;
  }
}

/* rope tournament css end */

@media only screen and (max-width: 1440px) and (min-width: 1000px) {
  .example {
    left: 35%;
    font-size: 14px;
    /* width: 35%; */
    width: 70%;
  }
}

@media only screen and (max-width: 425px) {
  .swiper-slide {
    height: 427px !important;
  }

  .swiper-3d {
    perspective: 1006px !important;
  }

  .lastdiv h3 {
    background: #1b1464;
    padding: 9px 59px;
    border-radius: 10px;
    font-weight: bold;
    color: var(--white);
    text-align: center;
    font-family: system-ui;
    display: inline-block;
    margin: auto;
    letter-spacing: 3px;
    font-size: 16px;
  }

  .example {
    left: 37%;
    font-size: 14px;
  }
  .modal.show .modal-dialog {
    margin: auto;
    max-width: 80% !important;
  }

  .description .grade-1,
  .description .grade-2,
  .description .grade-3 {
    border-bottom: 2px solid black !important;
  }
  .swiper {
    width: 300px !important;
  }

  .flip-card-front h3 {
    position: relative;
    top: -25px;
  }
}