@keyframes slideFromRight {
  0% {
    transform: translateX(20%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideFromTop {
  0% {
    transform: rotateX(20deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: RotateX(0);
    opacity: 1;
  }
}
@keyframes slideFromRight {
  0% {
    transform: translateX(20%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideFromTop {
  0% {
    transform: rotateX(20deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: RotateX(0);
    opacity: 1;
  }
}
*::-webkit-scrollbar {
  width: 7px;
}
*::-webkit-scrollbar-thumb {
  background-color: #7e7e7e;
  border-radius: 10px;
}
* {
  font-family: roboto_condensedregular, Arial, Helvetica, sans-serif;
}

body {
  background: url(../img/home/bg.jpg);
  background-color: #1a1a1d !important;
  background-repeat: no-repeat;
  background-size: 130%;
  background-position: center -40px;
  color: #FFFFFF;
}
@media (max-width: 359.98px) {
  body {
    background-position: center 46px;
  }
}
@media (min-width: 360px) and (max-width: 767.98px) {
  body {
    background-position: center 0;
  }
}
@media (min-width: 1200px) {
  body {
    background-position: center -85px;
    background-size: auto;
  }
}
@media (min-width: 768px) {
  body .title {
    padding: 0 2px;
  }
}
body a:hover, body a:active, body a:link, body a:visited {
  text-decoration: none;
  color: #FFFFFF;
}
body .card {
  background-color: #008000;
  font-size: 1.1em;
  border: 0;
}
body .card .fundo-escuro {
  background-image: linear-gradient(to bottom, transparent, #000000);
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 0.7;
  border-bottom-left-radius: 3.2px;
  border-bottom-right-radius: 3.2px;
}
body .card:hover {
  box-shadow: 0 0 20px rgb(42, 42, 42);
  transition: 0.2s;
}
@media (max-width: 991.98px) {
  body .card:hover {
    border: none;
  }
}
body .card p {
  color: #FFFFFF;
}
body .fundo-escuro-bg {
  background-image: linear-gradient(to bottom, #000000, #1a1a1d);
  height: 100%;
  width: 100%;
  position: fixed;
  opacity: 0.7;
  z-index: -1;
  top: 0;
}
@media (max-width: 767.98px) {
  body .col-3, body .col-4, body .col-6, body .col-9, body .col-12 {
    padding: 0 15px 0 15px !important;
  }
}
body .container {
  padding: 0 15px 0 15px !important;
}
body .pl-2px {
  padding-left: 2px !important;
}
body .pr-2px {
  padding-right: 2px !important;
}
body .col-md-1, body .col-md-2, body .col-md-3, body .col-md-6 {
  padding: 0 2px;
}
body .col-md-1 {
  min-width: 12.5%;
}
@media (min-width: 768px) {
  body .col-md-1, body .col-md-3, body .col-md-4 {
    padding: 0 15px 0 2px;
  }
}

@keyframes slideFromRight {
  0% {
    transform: translateX(20%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideFromTop {
  0% {
    transform: rotateX(20deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: RotateX(0);
    opacity: 1;
  }
}
header .perfil img {
  width: 60px;
  height: 60px;
  border-radius: 50px;
  box-shadow: 0 0 15px rgb(42, 42, 42);
}
header .perfil .gamertag {
  position: absolute;
  margin: -53px 73px;
}
header .perfil .gamertag i {
  font-size: 15px;
}
@media (max-width: 359.98px) {
  header .perfil .gamertag i {
    font-size: 12px;
  }
}
header #microphone, header #batery, header #horario {
  font-size: 18px;
}

@keyframes slideFromRight {
  0% {
    transform: translateX(20%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideFromTop {
  0% {
    transform: rotateX(20deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: RotateX(0);
    opacity: 1;
  }
}
.recentes {
  margin-top: 120px;
  color: #000000;
  margin-bottom: 7rem;
  animation: 1s ease-out 0s 1 slideFromRight;
  transform: translateX(20%, 0%);
}
@media (max-width: 767.98px) {
  .recentes {
    margin-bottom: 5rem;
  }
}
.recentes p {
  font-size: 1rem;
}
.recentes .card-principal {
  height: 287px;
  background-image: url(../img/home/box1.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 45% center;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .recentes .card-principal p {
    font-size: 16px;
  }
}
.recentes .card-secundario {
  height: 150px;
}
@media (max-width: 767.98px) {
  .recentes .card-secundario {
    margin: 10px 0;
    height: 100px;
  }
}
.recentes .card-secundario i {
  font-size: 64px;
  color: #FFFFFF;
}
@media (max-width: 359.98px) {
  .recentes .card-secundario i {
    font-size: 38px;
  }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .recentes .card-secundario i {
    font-size: 45px;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .recentes .card-secundario i {
    font-size: 50px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .recentes .card-secundario p {
    font-size: 13px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .recentes .card-secundario p {
    font-size: 13px;
  }
}
.recentes .descricao {
  background-color: #3f3f3f;
  margin: 0;
  padding: 5px 10px 5px 10px;
  opacity: 0;
  transition: opacity 0.5s;
  border-bottom-left-radius: 3.2px;
  border-bottom-right-radius: 3.2px;
}
@media (max-width: 767.98px) {
  .recentes .descricao {
    opacity: 1;
    font-size: 14px;
  }
}
.recentes .card:hover .descricao {
  opacity: 1;
}
.recentes .box3 {
  background-image: url(../img/home/box3-md.jpg);
  background-repeat: no-repeat;
  background-size: 115%;
  background-position: center 73%;
}
@media (max-width: 767.98px) {
  .recentes .box3 {
    background-size: 120%;
    background-position: top;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .recentes .box3 {
    background-size: 120%;
    background-position: center -16px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .recentes .box3 {
    background-position: center -42px;
    background-size: 172%;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .recentes .box3 {
    background-position: center -52px;
    background-size: 150%;
  }
}
.recentes .box4 {
  background-image: url(../img/home/box4.jpg);
  background-repeat: no-repeat;
  background-size: 133%;
  background-position: center;
  margin: 0;
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .recentes .box4 {
    background-position: center;
    background-size: 100%;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .recentes .box4 {
    background-position: center -77px;
    background-size: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .recentes .box4 {
    background-position: center;
    background-size: 160%;
    background-repeat: repeat;
  }
}
.recentes .box6 {
  background-image: url(../img/home/box6.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .recentes .box6 {
    background-image: url(../img/home/box6-sm.jpg);
    background-position: center top;
    background-size: 190%;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .recentes .box6 {
    background-image: url(../img/home/box6-sm.jpg);
    background-position: center top;
    background-size: 170%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .recentes .box6 {
    background-position: 52% center;
  }
}
@media (min-width: 992px) {
  .recentes .box6 {
    background-position: center;
  }
}
.recentes .box7 {
  background-image: url(../img/home/box7.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center -45px;
  margin: 0;
}
@media (max-width: 359.98px) {
  .recentes .box7 {
    background-image: url(../img/home/box7-sm.jpg);
    background-position: center top;
    background-size: 100%;
  }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .recentes .box7 {
    background-position: center 78%;
    background-size: 100%;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .recentes .box7 {
    background-image: url(../img/home/box7-sm.jpg);
    background-position: center;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .recentes .box7 {
    background-position: center;
  }
}
@media (min-width: 992px) {
  .recentes .box7 {
    background-position: center -10px;
  }
}
.recentes .edge {
  background-color: #1E90FF;
  margin: 0;
}
.recentes .biblioteca,
.recentes .anuncio1,
.recentes .anuncio2,
.recentes .atividade-recente {
  height: 120px;
}
.recentes .biblioteca i,
.recentes .anuncio1 i,
.recentes .anuncio2 i,
.recentes .atividade-recente i {
  font-size: 64px;
  color: #FFFFFF;
}
@media (max-width: 767.98px) {
  .recentes .atividade-recente.pr-2px {
    padding-right: 15px !important;
  }
}
.recentes .atividade-recente .card {
  height: 120px;
  background-image: url(../img/home/anuncio1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}
.recentes .atividade-recente img {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  box-shadow: 0 0 15px rgb(42, 42, 42);
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .recentes .atividade-recente img {
    width: 30px;
    height: 30px;
  }
}
.recentes .atividade-recente p {
  z-index: 1;
}
@media (max-width: 767.98px) {
  .recentes .with-gold.pr-2px {
    padding-right: 15px !important;
  }
}
.recentes .with-gold .card {
  height: 120px;
  background-image: url(../img/home/anuncio3.jpg);
  background-repeat: no-repeat;
  background-size: 170%;
  background-position: 85% -22px;
}
@media (max-width: 767.98px) {
  .recentes .with-gold .card {
    background-size: 150%;
    background-position: center -40px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .recentes .with-gold .card {
    background-size: 215%;
    background-position: center -12px;
  }
}
.recentes .with-gold img {
  width: 17%;
  float: right;
}
@media (max-width: 767.98px) {
  .recentes .with-gold img {
    width: 15%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .recentes .with-gold img {
    width: 20%;
  }
}
.recentes .with-gold p {
  z-index: 1;
}
@media (max-width: 767.98px) {
  .recentes .anuncio.pr-2px {
    padding-right: 15px !important;
  }
}
.recentes .anuncio .card {
  height: 120px;
  background-image: url(../img/home/anuncio2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .recentes .anuncio .card {
    background-size: cover;
    background-position: center -60px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .recentes .anuncio .card {
    background-size: cover;
    background-position: center 70%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .recentes .anuncio .card {
    background-size: 131%;
  }
}
.recentes .anuncio .card p {
  color: #FFFFFF;
  z-index: 1;
}
.recentes .anuncio p {
  color: #7e7e7e;
}
.recentes .pr-2px {
  padding: 0 0 0 2px;
}
@media (max-width: 767.98px) {
  .recentes .pr-2px {
    padding-left: 15px !important;
  }
}
.recentes .pl-2px {
  padding: 0 2px 0 0;
}
@media (max-width: 767.98px) {
  .recentes .pl-2px {
    padding-right: 15px !important;
  }
}

@keyframes slideFromRight {
  0% {
    transform: translateX(20%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideFromTop {
  0% {
    transform: rotateX(20deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: RotateX(0);
    opacity: 1;
  }
}
.pins {
  margin-bottom: 7rem;
  animation: 1.5s ease-out 0s 1 slideFromRight;
}
.pins p {
  font-size: 1rem;
}
.pins .card {
  font-size: 1.1em;
  border: 0;
}
.pins .descricao {
  background-color: #3f3f3f;
  margin: 0;
  bottom: 0;
  opacity: 0;
  width: 100%;
  padding: 5px 10px;
  position: absolute;
  transition: opacity 0.5s;
  border-bottom-left-radius: 3.2px;
  border-bottom-right-radius: 3.2px;
}
@media (max-width: 767.98px) {
  .pins .descricao {
    opacity: 1;
    font-size: 14px;
    padding: 5px;
  }
}
@media (min-width: 768px) {
  .pins .descricao {
    font-size: 16px;
  }
}
.pins .card:hover .descricao {
  opacity: 1;
}
.pins .sub-card {
  height: 101px;
}
.pins .sub-card i {
  font-size: 50px;
}
.pins .groups {
  height: 210px;
}
.pins .groups i {
  transform: rotate(45deg);
}
.pins i {
  font-size: 74px;
}
.pins .pin1 {
  background-image: url(../img/pins/pin1.jpg);
  background-repeat: no-repeat;
  background-size: 150%;
  background-position: center;
}
@media (max-width: 359.98px) {
  .pins .pin1 {
    background-size: cover;
    background-position: center -18px;
  }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .pins .pin1 {
    background-size: cover;
    background-position: center -18px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .pins .pin1 {
    background-size: cover;
    background-position: center -26px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pins .pin1 {
    background-size: 164%;
  }
}
.pins .pin2 {
  background-image: url(../img/pins/pin2.jpg);
  background-repeat: no-repeat;
  background-size: 230%;
  background-position: center;
}
@media (max-width: 359.98px) {
  .pins .pin2 {
    background-size: 230px;
    background-position: center -77px;
  }
}
@media (min-width: 360px) and (max-width: 767.98px) {
  .pins .pin2 {
    background-size: 260px;
    background-position: center -95px;
  }
}
.pins .pin3 {
  background-image: url(../img/pins/pin3.jpg);
  background-size: 100%;
  background-position: center;
}
@media (max-width: 359.98px) {
  .pins .pin3 {
    background-size: 84px;
    background-position: center -15px;
  }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .pins .pin3 {
    background-size: 100px;
    background-position: center -18px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .pins .pin3 {
    background-position: center -25px;
    background-repeat: no-repeat;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .pins .pin3 {
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 1200px) {
  .pins .pin3 {
    background-size: 120px;
    background-position: center;
  }
}
.pins .pin4 {
  background-image: url(../img/pins/pin4.jpg);
  background-size: 170%;
  background-position: center;
}
@media (max-width: 359.98px) {
  .pins .pin4 {
    background-size: 125px;
    background-position: center -153px;
  }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .pins .pin4 {
    background-size: 124px;
    background-position: center -150px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .pins .pin4 {
    background-size: 160px;
    background-position: center -45px;
  }
}
.pins .pin5 {
  background-image: url(../img/pins/pin5.jpg);
  background-size: 120%;
  background-position: center;
}
@media (max-width: 359.98px) {
  .pins .pin5 {
    background-image: url(../img/pins/pin5-xxs.jpg);
    background-size: 140px;
    background-position: center -30px;
  }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .pins .pin5 {
    background-size: cover;
    background-position: center -17px;
    background-repeat: no-repeat;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .pins .pin5 {
    background-position: center -40px;
  }
}
.pins .pin6 {
  background-image: url(../img/pins/pin6.png);
  background-size: 140%;
  background-position: center;
}
@media (max-width: 359.98px) {
  .pins .pin6 {
    background-size: 90px;
    background-position: center -7px;
  }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .pins .pin6 {
    background-size: 110px;
    background-position: center -20px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .pins .pin6 {
    background-position: center -50px;
  }
}
.pins .pin7 {
  background-image: url(../img/pins/pin7.jpg);
  background-size: 120%;
  background-position: center;
}
@media (max-width: 359.98px) {
  .pins .pin7 {
    background-size: 104px;
    background-position: center -20px;
  }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .pins .pin7 {
    background-size: 104px;
    background-position: center -20px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .pins .pin7 {
    background-size: 75%;
    background-position: center -15px;
  }
}
.pins .pin8 {
  background-image: url(../img/pins/pin8.png);
  background-size: 170px;
  background-position: center;
}
@media (max-width: 359.98px) {
  .pins .pin8 {
    background-size: 120px;
    background-position: center -33px;
  }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .pins .pin8 {
    background-size: 115px;
    background-position: center -33px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .pins .pin8 {
    background-size: 150px;
    background-position: center -40px;
  }
}
.pins .edge {
  background-color: #1E90FF;
}
.pins .pin10 {
  background-image: url(../img/pins/pin10.png);
  background-size: 170%;
  background-position: center -15px;
}
@media (max-width: 359.98px) {
  .pins .pin10 {
    background-size: 180px;
    background-position: center -37px;
  }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .pins .pin10 {
    background-size: 200px;
    background-position: center -45px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .pins .pin10 {
    background-size: 200%;
    background-position: center -60px;
  }
}
@media (min-width: 768px) {
  .pins .pin10 {
    background-size: 300px;
    background-position: center -60px;
  }
}
.pins .pin11 {
  background-image: url(../img/pins/pin11.jpg);
  background-size: 175%;
  background-position: center -1px;
}
@media (max-width: 359.98px) {
  .pins .pin11 {
    background-position: center -17px;
  }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .pins .pin11 {
    background-size: cover;
    background-position: center -4px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .pins .pin11 {
    background-size: 100%;
    background-position: center -7px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .pins .pin11 {
    background-size: 185px;
    background-position: center -10px;
  }
}
.pins .pin12 {
  background-image: url(../img/pins/pin12.jpg);
  background-size: 120%;
  background-position: center;
}
@media (max-width: 359.98px) {
  .pins .pin12 {
    background-image: url(../img/pins/pin12-xxs.jpg);
    background-size: cover;
    background-position: center -15px;
  }
}
@media (min-width: 360px) and (max-width: 767.98px) {
  .pins .pin12 {
    background-size: 155px;
    background-position: center -40px;
  }
}
@media (min-width: 768px) {
  .pins .col-lg-3 {
    padding-right: 15px !important;
  }
}

@keyframes slideFromRight {
  0% {
    transform: translateX(20%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideFromTop {
  0% {
    transform: rotateX(20deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: RotateX(0);
    opacity: 1;
  }
}
.store {
  margin-bottom: 7rem;
  animation: 2s ease-out 0s 1 slideFromRight;
}
.store .card-store {
  height: 210px;
}
.store .card-store i {
  font-size: 74px;
}
.store .tendencia1 {
  height: 122%;
  background-image: url(../img/store/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media (max-width: 767.98px) {
  .store .tendencia1 {
    height: 235px;
  }
}
.store .tendencia1 p {
  z-index: 1;
  font-size: 1rem;
}
.store .tendencia2 {
  height: 60%;
  background-image: url(../img/store/banner1-2.jpg);
  background-repeat: no-repeat;
  background-size: 140%;
  background-position: center -55px;
}
@media (max-width: 767.98px) {
  .store .tendencia2 {
    height: 235px;
    background-size: 568px;
    background-position: 46% bottom;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .store .tendencia2 {
    background-size: 400px;
    background-position: 48% -60px;
  }
}
.store .tendencia2 p {
  z-index: 1;
  font-size: 1rem;
}
.store .tendencia3 {
  height: 60%;
  background-image: url(../img/store/banner2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media (max-width: 767.98px) {
  .store .tendencia3 {
    height: 100%;
    background-size: 270%;
    background-position: left top;
  }
}
.store .tendencia3 p {
  z-index: 1;
  font-size: 1rem;
}
.store .card .sub-card p {
  padding: 15px 10px;
  margin: 0;
  font-size: 15px;
}
.store .card .sub-card p i {
  font-size: 20px;
  width: 25px;
  height: 2rem;
  float: left;
  text-align: center;
  margin-right: 7px;
}
.store .pr-2px {
  padding: 0 0 0 2px;
}
@media (max-width: 767.98px) {
  .store .pr-2px {
    padding-left: 15px !important;
  }
}
.store .pl-2px {
  padding: 0 2px 0 0;
}
@media (max-width: 767.98px) {
  .store .pl-2px {
    padding-right: 15px !important;
  }
}

@keyframes slideFromRight {
  0% {
    transform: translateX(20%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideFromTop {
  0% {
    transform: rotateX(20deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: RotateX(0);
    opacity: 1;
  }
}
.gamepass {
  margin-bottom: 7rem;
  animation: 2.5s ease-out 0s 1 slideFromRight;
}
.gamepass .card-gamepass {
  background-image: url(../img/gamepass/bg.jpg);
  background-repeat: no-repeat;
  background-size: 135%;
  background-position: center -70px;
  height: 210px;
}
@media (max-width: 991.98px) {
  .gamepass .card-gamepass {
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .gamepass .card-gamepass {
    background-position: center -45px;
  }
}
.gamepass .card-gamepass i {
  font-size: 74px;
}
.gamepass .card-gamepass p {
  font-size: 1rem;
}
.gamepass .banner1 {
  height: 122%;
  background-image: url(../img/gamepass/banner1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
@media (max-width: 767.98px) {
  .gamepass .banner1 {
    height: 235px;
  }
}
.gamepass .banner1 p {
  z-index: 1;
  font-size: 1rem;
}
.gamepass .banner2 {
  height: 60%;
  background-image: url(../img/gamepass/banner2.jpg);
  background-repeat: no-repeat;
  background-size: 135%;
  background-position: 60% -41px;
}
@media (max-width: 767.98px) {
  .gamepass .banner2 {
    height: 300px;
    background-size: cover;
    background-position: 85%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .gamepass .banner2 {
    background-size: 187%;
    background-position: 90% -20px;
  }
}
.gamepass .banner2 p {
  z-index: 1;
  font-size: 1rem;
}
.gamepass .banner3 {
  height: 60%;
  background-image: url(../img/gamepass/banner3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media (max-width: 767.98px) {
  .gamepass .banner3 {
    height: 300px;
    background-size: cover;
    background-position: center;
  }
}
.gamepass .banner3 p {
  z-index: 1;
  font-size: 1rem;
}
.gamepass .banner4 {
  height: 100%;
  background-image: url(../img/gamepass/banner4.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
@media (max-width: 767.98px) {
  .gamepass .banner4 {
    height: 200px;
  }
}
.gamepass .banner4 p {
  z-index: 1;
  font-size: 1rem;
}
.gamepass .banner5 {
  height: 100%;
  background-image: url(../img/gamepass/banner5.jpg);
  background-repeat: no-repeat;
  background-size: 120%;
  background-position: left -10px;
}
@media (max-width: 767.98px) {
  .gamepass .banner5 {
    height: 300px;
    background-size: cover;
    background-position: 52%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .gamepass .banner5 {
    background-size: cover;
    background-position: center;
  }
}
.gamepass .banner5 p {
  z-index: 1;
  font-size: 1rem;
}
.gamepass .card .sub-card p {
  padding: 15px 10px;
  margin: 0;
  font-size: 15px;
}
.gamepass .card .sub-card p i {
  font-size: 20px;
  width: 25px;
  height: 2rem;
  float: left;
  text-align: center;
  margin-right: 7px;
}
.gamepass .pr-2px {
  padding: 0 0 0 2px;
}
.gamepass .pl-2px {
  padding: 0 2px 0 0;
}

@keyframes slideFromRight {
  0% {
    transform: translateX(20%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideFromTop {
  0% {
    transform: rotateX(20deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: RotateX(0);
    opacity: 1;
  }
}
footer {
  background-color: #111111;
  bottom: 0;
  font-size: 12px;
  color: #7e7e7e;
  animation: 3s ease-out 0s 1 slideFromTop;
}
footer span a:nth-child(2) i:hover {
  color: #1E90FF;
}
footer a i {
  transition: 0.7s;
  color: #7e7e7e;
  font-size: 18px;
}
footer a i:hover {
  transform: translateY(-0.3rem);
  color: #FFFFFF;
}
footer a:link, footer :visited, footer :hover, footer :active {
  text-decoration: none;
}
footer #base {
  font-size: 10px;
}

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