.primary-content>div {
  display: none;
}

.exl-section-games {
  position: relative;
  color: white;
  overflow: hidden;
  text-align: center;
  padding: 180px 0 0;
  background-blend-mode: difference, normal;
}

.exl-section-games .bg_games {
  position: absolute;
  width: 100%;
  height: 548px;
  top: 110px;
  left: 0;
  z-index: -1;
  background-image: url(/templates/exit-lag/img/games/bg_games.png);
  background-size: cover;
  background-position: top center;
  opacity: .15;
  pointer-events: none;
}

.exl-section-games .bg_games::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(11, 12, 15, 0) 18%, #0B0C0F 75%);
}

.exl-section-games .container{
  padding: 0;
}

.exl-games-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 110px;
}

.exl-games-header div{
  font-family: Ubuntu;
  font-size: 20px;
  line-height: 30px;
}

.exl-games-header .subtitle {
  line-height: 1.5;
}

.exl-section-games .exl-filter-ordenation{
  margin-bottom: 40px;
  justify-content: space-between;
  gap: 16px;
}

.exl-section-games .exl-filter-ordenation ul{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.exl-section-games .exl-filter-ordenation ul li{
  color: var(--exl-footer-social-link);
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
}

.exl-section-games .exl-filter-ordenation ul li.active{
  border-radius: 8px;
  color: var(--exl-primary-red-500);
  border: 1px solid var(--exl-primary-red-500);
  background: var(--exl-primary-red-1000);
  box-shadow: 0px 1px 1px 0px rgba(18, 18, 18, 0.30);
}

.exl-section-games__background {
  position: absolute;
  width: 2000px;
  height: auto;
  left: 50%;
  margin-left: -1000px;
  z-index: -1;
  margin-top: -110px;
}
.card-img-top {
  height: 255px;
}
.exl-games-card {
  background-color: #1f1f1f;
  outline: none;
  border: none;
}
.exl-games-card-btn {
  font-size: 22px;
  line-height: 25px;
  margin-bottom: 0;
  color: #fff;
  display: flex;
  padding-left: 10px;
  margin-top: -40px;
}
.exl-sub-title {
  color: var(--exl-neutral-gray-300);
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 30px;
}
.exl-games-input-group {
  background: var(--exl-checkout-gray);
  padding: 13px 14px;
  border-radius: 8px;
  color: var(--exl-neutral-gray-500);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  position: relative;
}
.exl-games-input-group .exl-games-input::placeholder {
  color: var(--exl-neutral-gray-500);
}

.exl-games-input-group .exl-games-input {
  background: transparent;
  outline: none;
  border: none;
  width: 100%;
  color: white;
  font-size: 16px;
}

.exl-games-input-group .exl-games-button {
  background: transparent;
  outline: none;
  border: none;
  color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 3em;
}
.exl-games-button-plus {
  background: transparent;
  outline: none;
  border: none;
  color: white;
  width: 6rem;
  height: 6rem;
  font-size: 3rem;
  transition: all 0.2s;
}
.exl-games-button-plus:hover {
  color: var(--exl-accent);
}
.exl-games-section-promotion_banner {
  color: white;
  background: var(--exl-neutral-gray-900);
  text-align: center;
  padding: 65px 0;
}

.exl-games-promotion_banner-title {
  font-weight: 900;
  padding-right: 64px;
}

.exl-games-custom-select-filters {
  height: 100%;
  background-color: var(--exl-neutral-gray-600);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--exl-neutral-gray-600);
  border-radius: 8px;
}

.exl-games-custom-select-filters label{
  padding: 10px 16px;
}

.exl-games-custom-select-filters select{
  display: inline-block;
  min-width: 120px;
  height: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--exl-white-opacity-70);
  vertical-align: middle;
  background: var(--exl-checkout-gray) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><path d="M12 15.0358L17.2788 9.79285C17.6725 9.40238 18.3109 9.40238 18.7047 9.79285C19.0984 10.1833 19.0984 10.8164 18.7047 11.2068L12.7131 17.1567C12.3192 17.5473 11.6807 17.5473 11.2869 17.1567L5.29532 11.2068C4.90156 10.8164 4.90156 10.1833 5.29532 9.79285C5.68907 9.40238 6.32748 9.40238 6.72124 9.79285L12 15.0358Z" fill="%23878787"/></svg>') right 0.75rem center/24px 24px no-repeat;
  border: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.exl-games-color-clean-filter {
  color: white;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: underline;
}

.exl-games-color-clean-filter:hover {
  color: white;
}

.exl-games-a-link-title-game {
  color: #fff !important;
  text-decoration: none !important;
}

.games-content {
  position: relative;
  font-size: 18px;
  line-height: 30px;
  padding: 1rem 0;
}

.games-content .games-content__title{
  text-align: left;
  color: white;
  font-size: 32px;
  font-weight: 500;
  line-height: 34px;
  margin-bottom: 32px;
}

.games-content .el-row {
  position: relative;
  z-index: 3;
}
.games-content h1 {
  font-size: 38px;
  line-height: 42px;
  margin-bottom: 10px;
  color: dark-red;
}

.games-content p {
  margin-bottom: 30px;
}

.games-list {
  position: relative;
  z-index: 3;
}

.games-list .list {
  display: grid;
  width: 100%;
  margin: 0 auto;
  float: none;
  gap: 40px 32px;
  grid-template-columns: 1fr 1fr 1fr 1fr
}

.each-games {
  width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  max-height: 600px;
  max-width: 900px;
  border-radius: 6px;
}

.each-games:hover {
  text-decoration: none;
}

.each-games .icon-tooltip-platform {
  margin-top: 15px;
  margin-right: 10px;
  width: 33px;
  height: 33px;
  background-color: black;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-games {
  position: relative;
  margin-bottom: 15px;
}

.each-games .image-games img {
  display: block;
  width: 100%;
  height: auto !important;
  border-radius: 6px;
}

.each-games .image-games .click-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.each-games .image-games .click-icon .click {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: var(--exl-primary-red-500);
  padding: 10px;
  position: relative;
  z-index: 1;
  margin-bottom: -50px;
  opacity: 0;
  transition: all .5s ease;
}

.each-games .image-games .click-icon .click:before {
  content: '';
  position: absolute;
  width: 56px;
  height: 56px;
  background-color: var(--exl-primary-red-500);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 100%;
  opacity: 40%;
}

.each-games:hover .image-games .click-icon .click {
  margin-bottom: 0;
  opacity: 1;
}

.each-games .title-games {
  margin-bottom: 10px;
}

.each-games .title-games h3 {
  width: fit-content;
  height: fit-content;
  font-size: 18px;
  line-height: 1;
  color: white;
}
.each-games .title-games * {
  position: relative;
  z-index: 3;
}
.each-games .icon-platform-games {
  height: min-content;
  padding: 0px;
  margin: 0px;
  color: white;
}

.each-games .icon-platform-games h3 {
  font-size: 22px;
  line-height: 25px;
  margin-bottom: 0;
}
.each-games .icon-platform-games h2 {
  color: var(--exl-checkout-accent);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--black-opacity-800);
  margin: 0;
  font-size: 26px !important;
}
.each-games .icon-platform-games * {
  position: relative;
  z-index: 3;
}


.icon-platform-games {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 15px;
  color: white;
  top: 0;
  margin-right: 8px;
}
.icon-platform-games:before {
  content: '';
  bottom: 0;
  left: 0;
  right: 12px;
  top: 0;
  z-index: 1;
  position: absolute;
}
.icon-platform-games h3 {
  font-size: 22px;
  line-height: 25px;
  margin-bottom: 0;
}
.icon-platform-games h2 {
  font-size: 26px !important;
}
.icon-platform-games * {
  position: relative;
  z-index: 3;
}

.games-loading-svg {
  width: 100%;
  display: flex;
  justify-content: center;
}
.games-loading-svg svg {
  width: 300px;
  height: 350px;
  display: flex;
  margin: 50px;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

section#pagination-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 0;
  margin: 62px 0 55px;
  border-top: 1px solid var(--exl-checkout-accent);
}

section#pagination-container button{
  background: none;
  border: none;
  color: var(--exl-neutral-gray-100);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

section#pagination-container button:disabled,
section#pagination-container button[disabled]{
  color: var(--exl-neutral-gray-300);
}

section#pagination-container button:disabled svg path,
section#pagination-container button[disabled] svg path{
  stroke: var(--exl-neutral-gray-300);
}

section#pagination-container button.pagination-arrow.searching {
  background-color: var(--exl-primary-red-500);
  color: var(--exl-white);
  opacity: 1;
}

section#pagination-container #pagination{
  display: flex;
  gap: 6px;
}

section#pagination-container #pagination button {
  background: none;
  border: none;
  color: var(--exl-neutral-gray-300);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  padding: 5px 11px;
  border-radius: 4px;
}

section#pagination-container #pagination button.active {
  background-color: var(--exl-primary-red-500);
  color: var(--exl-white);
}

section#pagination-container #pagination button.pagination-divisor {
  background: none;
  color: var(--exl-primary-red-600);
}

.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.exl-game-not-found-text {
  display: none;
  padding-left: 32px;
  background-image: url('data:image/svg+xml,<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5429 6V10M10.5429 14H10.5535M20.0438 10C20.0438 14.9706 15.7901 19 10.5429 19C5.29569 19 1.04199 14.9706 1.04199 10C1.04199 5.02944 5.29569 1 10.5429 1C15.7901 1 20.0438 5.02944 20.0438 10Z" stroke="%23EC4046" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: left calc(0.375em + 0.05rem);
  color: var(--exl-neutral-gray-200);
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: justify;
}

.exl-game-not-found-text strong {
  font-weight: 700;
}

.exl-game-not-found-text a {
  color: var(--exl-neutral-gray-200);
  text-decoration: underline;
}

.exl-game-not-found-text a:hover {
  color: var(--exl-primary-red-500);
}

.exl-section-games__game-not-found .exl-games-input-group {
  color: white;
  background: var(--exl-primary-red-1000);
  border: 1px solid var(--exl-primary-red-700);
}

.exl-section-games__game-not-found .exl-games-input-group .exl-games-button svg path {
  stroke: white;
}

.exl-section-games__game-not-found .exl-game-not-found-text {
  display: block;
}

.exl-games-legal-notice > p > strong {
  color: #C6C8CB;
}

.exl-games-legal-notice > p {
  color: #878d97;
  width: 65%;
  margin: 0px auto 91px;
}

.exl-section-games .exl-filter-ordenation ul.filter__platforms {
  flex-wrap: nowrap;
  gap: 8px;
}

.exl-section-games .exl-filter-ordenation ul.filter__platforms li.platform {
  color: white;
  background: var(--exl-neutral-gray-800);
  border: 1px solid var(--exl-neutral-gray-700);
}

.exl-section-games .exl-filter-ordenation ul.filter__platforms li.platform:hover {
  background: var(--exl-neutral-gray-600);
}

.exl-section-games .exl-filter-ordenation ul.filter__platforms li.platform.active {
  background: var(--exl-primary-red-1000);
  border-color: var(--exl-primary-red-500);
}

.filter--container {
  gap: 8px;
}

@media (max-width: 1199px) {
  .exl-games-custom-select-filters select{
    width: inherit;
  }
}

@media (max-width: 1024px){
  .exl-games-custom-select-filters{
    width: 100%;
  }
  .exl-games-custom-select-filters label{
    text-wrap: nowrap;
  }
}

.more-games {
  width: 100%;
  font-size: 1rem;
  text-align: left;
  color: var(--exl-checkout-accent);
  display: flex;
  align-items: center;
  line-height: 1;
  text-decoration: none!important;
}

.more-games:hover {
  color: var(--exl-accent);
}

.more-games i {
  padding-left: 5px;
}

@media (max-width: 768px) {
  .games-content__title{
    text-align: center!important;
  }
  
  .games-list .list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 16px;
  }

  .each-games {
    max-width: calc(33% - 20px);
  }

  .each-games .title-games h3 {
    font-size: 16px;
    line-height: 1.2;
  }

  .form-row {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 10px;
    margin-right: 0;
    margin-left: 0;
  }

  .exl-section-games .row {
    margin-left: 0;
    margin-right: 0;
  }

  .exl-games-custom-select-filters {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .exl-section-games .exl-filter-ordenation {
    margin-bottom: 24px;
  }
 
  .exl-games-input-group-container,
  .exl-section-games .exl-filter-ordenation{
    padding: 0 10px;
  }

  .exl-section-games .exl-filter-ordenation ul{
    justify-content: space-evenly;
    gap: 16px;
  }

  .exl-games-input-group-container .exl-games-input-group input{
    padding-right: 40px;
  }

  .exl-games-section-promotion_banner {
    height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .exl-games-promotion_banner-title {
    padding-right: 0;
    margin-bottom: 64px;
    display: block;
    width: 100%;
  }
  #pagination-container #pagination{
    display: none!important;
  }

  .exl-section-games .exl-filter-ordenation ul.filter__platforms li.platform.windows {
    order: 3;
  }
}

@media (max-width: 575px) {
  .filter--container {
    gap: 32px;
    width: 100%;
  }

  .exl-section-games .exl-filter-ordenation ul.filter__platforms {
    width: 100%;
  }

  .exl-section-games .exl-filter-ordenation ul.filter__platforms li.platform {
    flex: 1 1 auto;
  }

  .each-games {
      max-width: calc(50% - 20px);
  }
}