/*------------------------------------------------------------------------------*/
/*style-theme*/

/*menu-panel*/
.menu-panel {
  position: fixed;
  left: 0;
  z-index: 1102;
  width: 100%;
  height: calc(100% - 72px);
  background-color: var(--color-dark);
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: visibility 0ms, opacity 320ms ease;
  transform: translate3d(0, 0, 0);
}
@media (min-width: 768px) {
  .menu-panel {
    overflow-y: auto;
  }
}
@media (min-width: 1920px) {
  .menu-panel {
    height: calc(100% - 100px);
  }
}
.site-header--top ~ .menu-panel {
  bottom: 0;
}
@media (max-width: 782px) {
  .admin-bar .site-header--top ~ .menu-panel {
    height: calc(100% - 46px - 72px);
  }
}
.site-header--bottom ~ .menu-panel {
  top: 0;
}
.site-wrapper--has-menu-overlay .menu-panel {
  visibility: visible;
  opacity: 1;
}
.site-wrapper--has-menu-overlay .menu-panel__content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity ease 320ms, transform ease 800ms;
}
.menu-panel__top-bar {
  color: var(--color-light);
}
@media (max-width: 767.98px) {
  .menu-panel__top-bar {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-dark);
    transform: translate3d(100%, 0, 0);
    transition: transform ease 440ms 0ms;
    z-index: 1;
  }
  .menu-panel__top-bar.toggled {
    transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 768px) {
  .menu-panel__top-bar {
    display: flex;
    width: 100%;
    height: 115px;
    border-bottom: 1px solid hsla(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l), 0.375);
  }
}
@media (max-width: 767.98px) {
  .menu-panel__top-bar, .menu-panel__mobile-bar {
    height: calc(100vh - 72px);
    overflow-y: auto;
  }
}
.menu-panel__content {
  width: 100%;
  display: flex;
  padding: 78px 72px;
  opacity: 0;
  transform: translateY(1rem);
  transition-duration: 0;
}
.menu-panel__content .row + .row {
  margin-top: 3rem;
}
@media (min-width: 992px) {
  .menu-panel__content .row + .row {
    margin-top: 80px;
  }
}
@media (min-width: 1920px) {
  .menu-panel__content .row + .row {
    margin-top: 100px;
  }
}
.menu-panel__navigation, .menu-panel__widget-area {
  width: 50%;
  padding-left: 15px;
  padding-right: 15px;
}


/* Common styles of menus */
.dl-menuwrapper {
  margin-top: -45px;
  padding-top: 45px;
  width: 100%;
  float: left;
  position: relative;
  perspective: 1000px;
  perspective-origin: 50% 200%;
}
.dl-menuwrapper .dl-menu,
.dl-menuwrapper .dl-submenu,
.dl-menuwrapper .dl-submenu:not(.dl-megamenu) ul {
  padding: 0;
}
.dl-menuwrapper ul {
  list-style: none;
  transform-style: preserve-3d;
  padding-left: 0;
  margin-left: 0;
}
.dl-menuwrapper li {
  position: relative;
  /* Hide the inner submenus */
}
.dl-menuwrapper li a {
  display: inline-block;
  position: relative;
  padding: 14px 12px 14px 0;
  font-size: 2.875rem;
  line-height: 1;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--color-light);
  outline: none;
}
@media (min-width: 1920px) {
  .dl-menuwrapper li a {
    padding: 19px 18px 19px 0;
    font-size: 4rem;
  }
}
.dl-menuwrapper li a:hover {
  color: var(--color-primary);
}
.dl-menuwrapper li.item-has-btn--primary > a {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.dl-menuwrapper li.active > a {
  color: var(--color-primary);
}
.dl-menuwrapper li .dl-submenu {
  display: none;
}
.dl-menuwrapper .dl-menu {
  margin: 5px 0 0 0;
  position: absolute;
  width: 100%;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0px);
  backface-visibility: hidden;
}
.dl-menuwrapper .badge {
  margin-left: 0.3em;
}

/*
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link.
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
  display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
  display: block;
}

.dl-menu.dl-subview li.dl-subviewopen > .dl-megamenu {
  display: flex;
  flex-wrap: wrap;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
  position: absolute;
  width: 100%;
  top: 50px;
  left: 0;
  margin: 0;
}

.dl-submenu li a {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 1rem;
}
@media (min-width: 1920px) {
  .dl-submenu li a {
    padding-top: 17px;
    padding-bottom: 17px;
    font-size: 1.375rem;
  }
}

.dl-subviewopen > .dl-submenu.dl-megamenu li {
  display: block !important;
}

.dl-submenu .dl-back {
  margin-bottom: 38px;
  flex-basis: 100%;
}
@media (min-width: 1920px) {
  .dl-submenu .dl-back {
    margin-bottom: 53px;
  }
}
.dl-submenu .dl-back a {
  font-size: 2rem;
  color: var(--color-secondary);
}
@media (min-width: 1920px) {
  .dl-submenu .dl-back a {
    font-size: 2.875rem;
  }
}
.dl-submenu .dl-back a:hover {
  color: var(--color-light);
}
.dl-submenu .dl-back a:hover svg {
  fill: var(--color-light);
}
.dl-submenu .dl-back svg {
  width: 0.25em;
  height: 0.4375em;
  vertical-align: middle;
  margin-right: 0.125em;
  margin-bottom: 0.09375em;
  fill: var(--color-secondary);
  transition: 300ms fill ease;
}

.dl-toggle {
  position: relative;
  top: -7px;
  display: inline-block;
  width: 16px;
  height: 16px;
}
@media (min-width: 1920px) {
  .dl-toggle {
    top: -10px;
    width: 22px;
    height: 22px;
  }
}
.dl-submenu .dl-toggle {
  top: 7px;
  left: -6px;
  width: 8px;
  height: 8px;
}
@media (min-width: 1920px) {
  .dl-submenu .dl-toggle {
    top: 10px;
    left: -8px;
    width: 10px;
    height: 10px;
  }
}
.dl-toggle:after, .dl-toggle:before {
  position: absolute;
  content: "";
  background-color: var(--color-primary);
}
.dl-toggle:before {
  top: 0;
  left: 6px;
  width: 4px;
  height: 16px;
  transition: opacity 300ms ease;
}
@media (min-width: 1920px) {
  .dl-toggle:before {
    left: 9px;
    height: 22px;
  }
}
.dl-submenu .dl-toggle:before {
  left: 3px;
  width: 2px;
  height: 8px;
}
@media (min-width: 1920px) {
  .dl-submenu .dl-toggle:before {
    left: 4px;
    height: 10px;
  }
}
.dl-toggle:after {
  top: 6px;
  left: 0;
  width: 16px;
  height: 4px;
}
@media (min-width: 1920px) {
  .dl-toggle:after {
    top: 9px;
    width: 22px;
  }
}
.dl-submenu .dl-toggle:after {
  top: 3px;
  width: 8px;
  height: 2px;
}
@media (min-width: 1920px) {
  .dl-submenu .dl-toggle:after {
    top: 4px;
    width: 10px;
  }
}
a:hover ~ .dl-toggle:before {
  opacity: 0;
}

.dl-menu.dl-subview .dl-toggle {
  display: none;
}
.dl-menu .dl-subviewopen .dl-submenu > li > .dl-toggle {
  display: inline-block;
}

/*info box*/
.info-box__label, .info-box__content {
  font-weight: bold;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.info-box__label {
  font-size: 0.75rem;
  line-height: 1em;
  color: var(--color-info);
}
.menu-panel .info-box__label {
  font-size: 0.6875rem;
  color: #787d9d;
}
@media (min-width: 1920px) {
  .menu-panel .info-box__label {
    font-size: 0.875rem;
  }
}
.info-box__content {
  font-size: 0.875rem;
}
@media (min-width: 1920px) {
  .menu-panel .info-box__content {
    font-size: 1.125rem;
  }
}
.menu-panel .info-box__content,
.menu-panel .info-box__content a,
.menu-panel .info-box__content a[href^="mailto:"] {
  color: var(--color-light);
}
.info-box__content a:hover {
  opacity: 0.7;
}
* + .info-box {
  margin-top: 31px;
}
@media (min-width: 1920px) {
  * + .info-box {
    margin-top: 36px;
  }
}
.menu-panel * + .info-box {
  margin-top: 25px;
}
.menu-panel .info-box + .info-box {
  margin-top: 19px;
}
@media (min-width: 1920px) {
  .info-box + .info-box {
    margin-top: 25px;
  }
}

.info-box--content {
  margin-bottom: 30px;
}
@media (min-width: 1920px) {
  .info-box--content .info-box__label {
    font-size: 0.875rem;
  }
}
@media (min-width: 1920px) {
  .info-box--content .info-box__content {
    margin-top: -3px;
  }
}
.info-box--content .info-box__content a {
  color: var(--color-body);
}
@media (min-width: 1920px) {
  .info-box--content .info-box__content a[href^="mailto:"] {
    font-size: 1.125rem;
  }
}
.info-box--content .info-box__content + .info-box__label {
  margin-top: 30px;
}



/*widget__title */
.widget__title {
  margin-bottom: 30px;
  font-size: 1.25rem;
}
.menu-panel .widget__title {
  color: var(--color-light);
}
@media (min-width: 1920px) {
  .menu-panel .widget__title {
    font-size: 1.75rem;
    margin-bottom: 1.5em;
  }
}
.menu-panel .widget__content {
  font-size: 0.875rem;
  color: var(--color-body-dark);
}
@media (min-width: 1920px) {
  .menu-panel .widget__content {
    font-size: 1rem;
    line-height: 1.625em;
  }
}

/*.social-menu*/

.social-menu {
  padding-left: 0;
  list-style: none;
}
.social-menu li {
  display: inline-block;
}

/*social-menu--default*/
.social-menu--default {
  margin-bottom: 0;
}
.player-info-detail__label + .social-menu--default {
  margin-top: 1px;
}
.info-box + .social-menu--default {
  margin-top: 20px;
}
.social-menu--default li {
  display: inline-block;
}
.social-menu--default li a:before {
  color: var(--color-primary);
}
@media (min-width: 1920px) {
  .menu-panel .social-menu--default li a {
    font-size: 20px;
  }
}
.social-menu--default li a:hover {
  opacity: 0.8;
}
.social-menu--default li + li {
  margin-left: 17px;
}
@media (min-width: 1920px) {
  .social-menu--default li + li {
    margin-left: 50px;
  }
  .player-info-page .social-menu--default li + li {
    margin-left: 40px;
  }
}
.menu-panel .social-menu--default li + li {
  margin-left: 24px;
}
@media (min-width: 1920px) {
  .menu-panel .social-menu--default li + li {
    margin-left: 40px;
  }
}
/*socialnetworks*/
.social-menu a[href*="facebook.com"]::before {
  content: "\f09a";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}
.social-menu a[href*="instagram.com"]::before {
  content: "\f16d";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}
.social-menu a[href*="tiktok.com"]::before {
  content: "\e07b";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}
.social-menu a[href*="twitter.com"]::before,
.social-menu a[href*="x.com"]::before {
  content: "\e61b";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}
.social-menu a[href*="vimeo.com"]::before {
  content: "\f40a";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}
.social-menu a[href*="twitch.tv"]::before {
  content: "\f1e8";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}
.social-menu a[href*="whatsapp.com"]::before,
.social-menu a[href*="wa.me"]::before {
  content: "\f232";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}
.social-menu a[href*="youtube.com"]::before {
  content: "\f167";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

/*animation*/

/* Animation classes for moving out and in */
.dl-menu.dl-animate-out-1 {
animation: MenuAnimOut1 0.4s;
}

.dl-menu.dl-animate-out-2 {
animation: MenuAnimOut2 0.3s ease-in-out;
}

.dl-menu.dl-animate-out-3 {
animation: MenuAnimOut3 0.4s ease;
}

.dl-menu.dl-animate-out-4 {
animation: MenuAnimOut4 0.4s ease;
}

.dl-menu.dl-animate-out-5 {
animation: MenuAnimOut5 0.4s ease;
}

@keyframes MenuAnimOut1 {
50% {
  transform: translateZ(-250px) rotateY(30deg);
}
75% {
  transform: translateZ(-372.5px) rotateY(15deg);
  opacity: 0.5;
}
100% {
  transform: translateZ(-500px) rotateY(0deg);
  opacity: 0;
}
}
@keyframes MenuAnimOut2 {
100% {
  transform: translateX(-100%);
  opacity: 0;
}
}
@keyframes MenuAnimOut3 {
100% {
  transform: translateZ(300px);
  opacity: 0;
}
}
@keyframes MenuAnimOut4 {
100% {
  transform: translateZ(-300px);
  opacity: 0;
}
}
@keyframes MenuAnimOut5 {
100% {
  transform: translateY(40%);
  opacity: 0;
}
}
.dl-menu.dl-animate-in-1 {
animation: MenuAnimIn1 0.3s;
}

.dl-menu.dl-animate-in-2 {
animation: MenuAnimIn2 0.3s ease-in-out;
}

.dl-menu.dl-animate-in-3 {
animation: MenuAnimIn3 0.4s ease;
}

.dl-menu.dl-animate-in-4 {
animation: MenuAnimIn4 0.4s ease;
}

.dl-menu.dl-animate-in-5 {
animation: MenuAnimIn5 0.4s ease;
}

@keyframes MenuAnimIn1 {
0% {
  transform: translateZ(-500px) rotateY(0deg);
  opacity: 0;
}
20% {
  transform: translateZ(-250px) rotateY(30deg);
  opacity: 0.5;
}
100% {
  transform: translateZ(0px) rotateY(0deg);
  opacity: 1;
}
}
@keyframes MenuAnimIn2 {
0% {
  transform: translateX(-100%);
  opacity: 0;
}
100% {
  transform: translateX(0px);
  opacity: 1;
}
}
@keyframes MenuAnimIn3 {
0% {
  transform: translateZ(300px);
  opacity: 0;
}
100% {
  transform: translateZ(0px);
  opacity: 1;
}
}
@keyframes MenuAnimIn4 {
0% {
  transform: translateZ(-300px);
  opacity: 0;
}
100% {
  transform: translateZ(0px);
  opacity: 1;
}
}
@keyframes MenuAnimIn5 {
0% {
  transform: translateY(40%);
  opacity: 0;
}
100% {
  transform: translateY(0);
  opacity: 1;
}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
  animation: SubMenuAnimIn1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
  animation: SubMenuAnimIn2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
  animation: SubMenuAnimIn3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
  animation: SubMenuAnimIn4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
  animation: SubMenuAnimIn5 0.4s ease;
}

@keyframes SubMenuAnimIn1 {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes SubMenuAnimIn2 {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes SubMenuAnimIn3 {
  0% {
    transform: translateZ(-300px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0px);
    opacity: 1;
  }
}
@keyframes SubMenuAnimIn4 {
  0% {
    transform: translateZ(300px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0px);
    opacity: 1;
  }
}
@keyframes SubMenuAnimIn5 {
  0% {
    transform: translateZ(-200px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}
.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
  animation: SubMenuAnimOut1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
  animation: SubMenuAnimOut2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
  animation: SubMenuAnimOut3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
  animation: SubMenuAnimOut4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
  animation: SubMenuAnimOut5 0.4s ease;
}
@keyframes SubMenuAnimOut1 {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(50%);
    opacity: 0;
  }
}
@keyframes SubMenuAnimOut2 {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes SubMenuAnimOut3 {
  0% {
    transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    transform: translateZ(-300px);
    opacity: 0;
  }
}
@keyframes SubMenuAnimOut4 {
  0% {
    transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    transform: translateZ(300px);
    opacity: 0;
  }
}
@keyframes SubMenuAnimOut5 {
  0% {
    transform: translateZ(0);
    opacity: 1;
  }
  100% {
    transform: translateZ(-200px);
    opacity: 0;
  }
}

/*------------------------------------------------------------------------------*/
/*custom*/