/* Imports */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
@import url(root.min.css);
@import url(no-strap.css);
@import url(helpers.css);
@import url(lootboxe.min.css);

/*==============================
    Resets
==============================*/
*,
*::before {
  outline: none;
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background-color: var(--grey-1);
  border-radius: 7px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--orange-2);
  border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--light-grey-2);
}

a,
a.nav-link,
a.nav-link:focus {
  color: inherit;
  text-decoration: none;
}

a:hover,
a.nav-link:hover {
  color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  list-style-type: none;
}

p,
ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/*==============================
    Corpo
==============================*/
body {
  background: url(../images/cover_down_page.jpg) no-repeat #191919 center top;
  font-family: var(--source-sans);
  font-size: 0.9rem;
  color: #e2e2e2;
  position: relative;
}

body::before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(25, 25, 25, 1) 69%,
    rgba(25, 25, 25, 0.5) 81%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: -1;
  content: "";
}

/*==============================
    Componentes
==============================*/

/* Navbar */
.navbar {
  width: 100%;
  padding: 0;
  background-color: rgb(5 5 5 / 39%);
  font-weight: 450;
  position: relative;
  z-index: 3;
}

/* Fixando navbar por scroll */
.fixed {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/* Navbar lista */
.navbar-nav {
  gap: 10px;
}

.navbar-nav .nav-item {
  padding: 18px 0;
}

.navbar .navbar-nav a.nav-link:hover {
  color: var(--light-orange-1);
}

/* small logo */
.brand_small_logo {
  max-width: 60px;
  margin-right: 25px;
}

/* Logo Maior */
a.brand {
  width: max-content;
  position: relative;
  top: 100px;
  margin: auto;
  display: block;
}

/* Header */
.header {
  height: 400px;
}

/* Breadcrumb */
.breadcrumb {
  padding: 15px;
  background-color: var(--dark-grey-1);
  margin-bottom: 0;
}

.ajax-container {
  max-width: 1100px;
  min-height: 689px;
  margin: auto;
}

/*==============================
    Plug-ins
==============================*/

/* Posts */

.posts {
  background-color: var(--grey-blocks-bg);
  position: relative;
}

/*==============================
     Primeira postagem 
==============================*/

.posts .post:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: 90px;
  border-bottom: 1px solid var(--border-color-grey-1);
}

/* Capa da postagem */
.posts .post:first-child #cover_post {
  width: 100%;
  height: 100%;
  position: absolute;
}

.posts .post:first-child #cover_post::before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background: linear-gradient(
    to top,
    rgb(52 52 52) 0%,
    rgb(52 52 52 / 50%) 100%,
    rgba(255, 255, 255, 0) 100%
  );
  content: "";
}

/* imagem  */
.posts .post:first-child #cover_post img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
}

/* informações da postagem */
.post .post_preview {
  margin-left: 30px;
}

/* Titulo  da postagem */
.post:first-child .post_preview .post_title {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.3rem;
}

.post:first-child .post_preview .post_title .badge {
  font-size: 0.84rem !important;
}

.post:first-child .post_info {
  height: 100%;
  display: flex;
}

.post:first-child .post_info a {
  align-self: flex-end;
  margin-bottom: 14px;
  margin-right: 15px;
}

/* Data */
.post:first-child .post_info .post_date {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  position: absolute;
  top: -39px;
  right: 15px;
  background-color: var(--grey-blocks-bg);
  border: 1px solid var(--grey-1);
  box-shadow: var(--soft-shadow);
  text-align: center;
  padding-top: 6px;
  line-height: 28px;
}

.post:first-child .post_info .post_date p {
  font-size: 1.2rem;
  font-family: var(--philosopher);
}

.post:first-child .post_info .post_date span {
  color: var(--light-orange-2);
  font-size: 1.4rem;
  font-family: var(--philosopher);
}

/* Capsulando capa e informações para primeira postagem */
.post .post_preview,
.post .post_info {
  position: relative;
  z-index: 2;
}

/*==============================
     Demais postagens
==============================*/

.posts .post:nth-child(n + 2) {
  display: flex;
  padding: 13px 0;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color-grey-1);
  background: none !important;
}

/* Ocultando capa para os demais posts */
.posts .post:nth-child(n + 2) #cover_post {
  display: none;
}

/* Titlu */
.posts .post:nth-child(n + 2) .post_title {
  display: flex;
  align-items: center;
  gap: 17px;
}

.posts .post:nth-child(n + 2) .post_title a {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Data */
.posts .post:nth-child(n + 2) .post_date {
  font-size: 0.82rem;
  color: #cacaca;
  margin-right: 30px;
}

/* Removendo capa e descrição para demais posts */
.posts .post:nth-child(n + 2) .post_cover,
.posts .post:nth-child(n + 2) .post_body {
  display: none;
}

/*==============================
    informações & Equipe
==============================*/
.team_list {
  max-height: 285px;
  height: 100%;
}

.team_list div > ul {
  max-height: 185px;
}

/*==============================
    Slides e Video
==============================*/

/* Slides */
.slider-container,
.sy-box {
  position: relative;
}
.slider-container .sy-box .sy-pager {
  background-color: var(--black-opacity-50);
  position: absolute;
  padding: 10px;
  bottom: 0;
  z-index: 10;
}

/* Paginação */
.sy-box .sy-pager li {
  width: 0.9rem;
  height: 0.9rem;
  background-color: var(--grey-1);
}
.sy-pager li,
.sy-box .sy-pager li a {
  border-radius: 0;
}
.sy-pager li.sy-active a {
  background: var(--btn-degrade-1);
  box-shadow: inset 0 1px 1px #ffe6b0dc;
  filter: drop-shadow(0 0 10px rgb(173, 89, 21));
}

/* Video */
.hp_video {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 56.25%;
}

/*==============================
    Top Players
==============================*/
.top_players {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.top_players .top_players_wrap {
  min-width: 212px;
  width: 100%;
  background-color: var(--grey-blocks-bg);
  position: relative;
}

.top_players .top_players_wrap::before {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.2;
  pointer-events: none;
  content: "";
}

.top_players .top_players_wrap table thead {
  color: var(--border-grey-1);
  background: var(--black-opacity-50);
}

.top_players .top_players_wrap table thead tr th {
  padding: 0 10px;
}

/* Quando ranking único */
.single_top_player.top_players_wrap {
  max-width: 202px;
  min-width: 257px;
  min-height: 200px;
}

/* nome do jogador */
#top_name {
  display: block;
  max-width: 85px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Avatar do jogador */
.single_top_player.top_players_wrap #top_avatar,
.single_top_player.top_players_wrap #top_guild {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 70%);
  box-shadow: var(--soft-shadow);
  border: 1px solid var(--grey-1);
}

/* Capa espelho de fundo */
.single_top_player.top_players_wrap .card-cover {
  max-height: 100px;
  overflow: hidden;
  object-fit: cover;
}

.card-cover .card-img,
.card-cover .card-svg {
  position: relative;
  filter: blur(4px);
  top: -50px;
  opacity: 0.5;
}

.top_players_wrap .special_badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 110%);
}

/*==============================
    Top Clasess
==============================*/
.top_class .class_item {
  max-width: 202px;
  position: relative;
  border: 1px solid var(--border-color-grey-1);
}

/* Degrade de fundo */
.top_class .class_item::before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgb(20, 20, 20) 0%,
    rgba(14, 14, 14, 0.5) 50%,
    rgba(8, 8, 8, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
  content: "";
}

.top_class .class_item #cover_class {
  pointer-events: none;
}

/* ajustando imagem de cada classe */
.top_class .class_item img {
  max-width: 100%;
  opacity: 0.7;
}

.class_item .class_item_info {
  top: 70px;
  z-index: 10;
  margin: auto;
}

/*==============================
    Market
==============================*/

/* Market Offer */

.market_offers .card_wrap {
  max-width: 202px;
  min-height: 200px;
  perspective: 1000px;
}

.market_offers .offer_item {
  width: 100%;
  height: 100%;
  background: url(../images/plugins/market/texture_grunge_1.png)
    var(--dark-grey-1);
  border-radius: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: var(--border-color-grey-1);
  transform-style: preserve-3d;
  transition: transform 0.5s;
  transform: rotateY(0deg);
  box-shadow: 0 11px 15px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.market_offers .card_wrap:hover .offer_item {
  -webkit-transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.market_offers .offer_item::before {
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.507) 0%,
    rgba(0, 0, 0, 0) 100%,
    rgba(0, 0, 0, 1) 50%
  );
  pointer-events: none;
  content: "";
}

/* sweep */
.market_offers .offer_item::after {
  width: 20px;
  height: 500px;
  background-color: #ffffff71;
  position: absolute;
  right: -100px;
  top: -150px;
  transform: rotate(35deg);
  z-index: 10;
  content: "";
}

.market_offers .offer_item:hover::after {
  animation: sweepEffect 3s cubic-bezier(0.165, 0.84, 0.44, 1);
  filter: drop-shadow(0 0 15px #fff);
}

/* Animação sweep */
@keyframes sweepEffect {
  0% {
    right: -100px;
  }
  100% {
    right: 500px;
  }
}

.offer_item_details {
  padding: 20px;
  text-align: center;
}

.offer_item_name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

.offer_item_price {
  margin-bottom: 10px;
}

.offer_item_seller {
  font-size: 14px;
  color: #888;
}

.market_offers .offer_item .offer_item_pic {
  position: relative;
  align-self: center;
}

/* Imagem do item */
.market_offers .offer_item .offer_item_pic img {
  display: block;
  margin: auto;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.5));
}

.offer_item .offer_item_name {
  color: #fff;
  text-align: center;
  text-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 35px;
  z-index: 2;
}

.offer_item .offer_item_price,
.offer_item .offer_item_seller {
  position: absolute;
}

/* Preço do item */
.offer_item .offer_item_price {
  bottom: 10px;
}

/* vendedor */
.offer_item .offer_item_seller {
  top: 5px;
  right: 10px;
  color: var(--light-grey-1);
}

.offer_item .offer_item_seller {
  min-width: 70px;
  padding: 0 4px;
  font-size: 0.8rem;
  text-align: center;
  border-radius: 11px;
  border: 1px solid var(--light-grey-2);
  background-color: var(--dark-grey-1);
}

/*==============================
   Castle Siege
==============================*/

.siege_event {
  width: 100%;
  height: 300px;
  display: flex;
  position: relative;
  overflow: hidden;
  background: url(../images/bg_cs.png) no-repeat;
  background-size: 100%;
  border: 1px solid var(--border-color-grey-1);
}

/* sombra degrade */
.siege_event::after {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgb(31 31 31) 0%,
    rgba(0, 0, 0, 0) 100%,
    rgb(25 25 25) 100%
  );
  content: "";
}

/* Titulo */
.siege_event .siege_title {
  width: inherit;
  text-align: center;
  position: absolute;
  top: 15px;
  z-index: 1;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
}

.siege_event .siege_title h2 {
  text-transform: uppercase;
  font-weight: bolder;
}

.siege_event .siege_wrap {
  width: inherit;
  height: max-content;
  align-self: flex-end;
  bottom: 30px;
  position: relative;
  z-index: 1;
}

/* Siege resultados */
.siege_event .siege_result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.siege_event .siege_wrap_text {
  text-align: center;
  max-width: max-content;
  min-width: 100px;
}

.siege_result .siege_text {
  max-width: 100px;
}

/* Guild picture */
.siege_event .siege_result svg {
  border-radius: 7px;
  border: 1px solid var(--dark-grey-opacity-2);
}

.siege_event .siege_next_battle,
.siege_result .siege_text {
  background-color: var(--dark-grey-1);
  border: 1px solid var(--dark-grey-opacity-2);
  border-radius: 11px;
  text-align: center;
}

.siege_event .siege_next_battle {
  margin: 10px auto;
  max-width: 250px;
  width: 100%;
}

/*==============================
   War devias
==============================*/
.war_devias {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  background: url(../images/war_bg.png) no-repeat;
  background-size: 100%;
  border: 1px solid var(--border-color-grey-1);
  position: relative;
}

/* sombra degrade */
.war_devias::after {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgb(31 31 31) 0%,
    rgba(0, 0, 0, 0) 100%,
    rgb(25 25 25) 100%
  );
  content: "";
}

.war_devias::before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(31, 31, 31, 0.5) 0%,
    rgba(0, 0, 0, 0) 100%,
    rgb(25 25 25) 100%
  );
  content: "";
}

.war_devias .war_devias_title {
  width: 100%;
  text-align: center;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.767);
  position: absolute;
  z-index: 1;
  top: 15px;
}

.war_devias .war_devias_title h2 {
  text-transform: uppercase;
  font-weight: bolder;
}

.war_devias .war_next_battle {
  max-width: 250px;
  width: 100%;
  background-color: var(--dark-grey-1);
  border: 1px solid var(--dark-grey-opacity-2);
  border-radius: 11px;
  text-align: center;
  position: relative;
  margin: 10px 0;
  z-index: 1;
}

.war_devias .war_devias_wrap .war_text {
  width: 100px;
}

.war_devias .war_devias_wrap .war_guild svg {
  border-radius: 7px;
  border: 1px solid var(--dark-grey-opacity-2);
}

/*==============================
   Rei do Mu
==============================*/
.rei_mu {
  height: 100%;
  display: flex;
  position: relative;
  border: 1px solid var(--border-color-grey-1);
  overflow: hidden;
}

/* Imagem de fundo */
.rei_mu::before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 50px;
  background: url(../images/kingmu_bg.png) no-repeat var(--dark-grey-1);
  opacity: 0.9;
  z-index: 1;
  background-size: 100%;
  content: "";
}

.rei_mu::after {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgb(33 32 32) 24%,
    rgb(33 32 32 / 26%) 100%,
    rgb(32 32 32) 100%
  );
  position: absolute;
  top: 0;
  content: "";
  z-index: 1;
}

.rei_mu .rei_mu_title {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 15px;
  z-index: 2;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
}

.rei_mu .rei_mu_title h2 {
  text-transform: uppercase;
  font-weight: bolder;
}

.rei_mu_result {
  width: 100%;
  height: max-content;
  display: flex;
  align-self: flex-end;
  margin-bottom: 30px;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 15px;
  z-index: 2;
  padding: 0 8px;
}

.rei_mu_result .rei_mu_wrap_text {
  max-width: 105px;
}

.rei_mu_result .rei_mu_text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding: 0 15px;
  background-color: var(--dark-grey-1);
  border: 1px solid var(--dark-grey-opacity-2);
  border-radius: 50rem;
}

/* Avatar do jogador */
.rei_mu_result img#rei_mu_avatar {
  width: 64px;
  height: 64px;
  border-radius: 7px;
  border: 1px solid var(--light-grey-2);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.726));
}

/*==============================
   Eventos
==============================*/

.col_events {
  max-height: 400px;
  height: 100%;
  overflow: hidden;
  padding: calc(10px - -10px);
  background-color: var(--dark-grey-1);
}

.col_events .custom_list {
  max-height: 313px;
  padding-right: 8px;
}

.col_events select {
  margin-bottom: 10px;
}

/* Switch input */
.col_events .custom_list .switch-slider {
  background-color: var(--dark-grey-3);
  border: 1px solid var(--dark-grey-opacity-2);
}

input:checked + .switch-slider {
  background-color: var(--orange-1) !important;
}

/* Float button  */
.float_button {
  width: 150px;
  position: fixed;
  top: 250px;
  right: 15px;
  z-index: 30;
}

.float_button button {
  width: 50px;
  height: 50px;
  border-radius: 7px;
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s ease;
  margin: 7px 0;
  float: right;
}

.float_button > button:hover {
  width: 150px;
}

.float_button > button span {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.float_button > button:hover span {
  opacity: 1;
}

.float_button > button:hover .icon {
  margin-right: 10px;
}

.float_button > button:hover .text {
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  opacity: 1;
}

.float_button > button .float_button-content {
  display: flex;
  align-items: center;
}

.float_button-content .icon {
  color: var(--orange-3);
  font-size: 1.3rem;
  margin: auto;
  transition: margin-right 0.3s ease;
}

.float_button-content .text {
  font-size: 1.1rem;
  color: var(--orange-3);
  opacity: 0;
  display: none;
  flex-direction: column;
  align-items: flex-start;
}

/*==============================
     Webshops
==============================*/
.shops .item_shop .card {
  min-height: 256px;
  max-height: 256px;
}

.item_shop .card .badge-solds {
  position: absolute;
  top: 10px;
  right: 10px;
}

.shops .item_shop .image {
  margin: auto;
}

.shops .item_shop .image img {
  max-width: 150px;
  width: 100%;
  filter: drop-shadow(15px 3px 10px rgba(0, 0, 0, 0.459));
}

/* badge de quantidade */
.badge-quantity {
  position: absolute;
  left: 50%;
  top: 0;
  padding: 5px 30px;
  font-size: 0.9rem;
  box-shadow: 0 1px 0 1px var(--dark-grey-opacity-1);
  transform: translate(-50%, -50%);
  background-color: var(--main-bg-grey);
}

/*==============================
     Workshop
==============================*/

/* 
  Inventório 
  Seleção de personagens 
*/

.characters {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.characters .character {
  max-width: 100px;
  height: auto;
  position: relative;
}

.characters .character.active .character-avatar::before {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
  border: 2px solid var(--light-orange-2);
  border-radius: 0.2rem;
  filter: drop-shadow(0 0 10px var(--light-orange-2));
  content: "";
}

.character .character-name {
  text-align: center;
}

/*==============================
  Rifas
==============================*/

.raffle-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--dark-grey-1);
  border-radius: 0.5rem;
}

.raffle-numbers a.number,
.raffle-numbers .number.my {
  width: 35px;
  height: 35px;
  border-radius: 10rem;
  text-align: center;
  line-height: 35px;
  background-color: var(--dark-grey-2);
}

.raffle-numbers a.number:hover,
.raffle-numbers a.number.active,
.raffle-numbers .number.my {
  background-color: var(--light-orange-1);
  border: 1px solid var(--white-opacity-2);
  filter: drop-shadow(0 0 10px rgb(173, 89, 21));
  box-shadow: inset 0 2px 1px #ffe6b0dc;
}

.character .character .character-avatar img {
  width: 100%;
  height: 100%;
}

/*==============================
   Página de Rankings
==============================*/

/* marcado de filtro de pesquisa */
.highlight {
  box-shadow: inset 0 0 1px 2px #ffa500;
  border-radius: 5px;
}

/*==============================
   Página de Perfil de personagens
==============================*/

/* Avatar */
.profile-character {
  position: relative;
}

.profile-character .profile-mark {
  position: absolute;
  left: -5px;
  bottom: -5px;
}

.profile-character .profile-mark svg {
  border-radius: 50rem;
}

/*==============================
   Streamer Plugin Float
==============================*/

.streamers__online {
  background: var(--purple-1);
}

.streamers__title {
  background: #ebf4f0;
  color: var(--purple-1);
}

a.streamers__title:hover {
  color: initial;
}

.streamers__streamer-name {
  background: #ebf4f0;
  color: var(--purple-1);
}

/* Footer */
.footer {
  display: flex;
  height: 250px;
  position: relative;
  z-index: 10;
}

.footer .container {
  position: relative;
  z-index: 10;
}

.footer::before {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgb(25 25 25) 20%,
    rgb(25 25 25) 17%,
    rgb(255 255 255 / 0%) 109%
  );
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 0;
  content: "";
}

.footer::after {
  width: 100%;
  height: 100%;
  background: url(../images/footer_bg.jpg) top center no-repeat;
  background-size: cover;
  opacity: 1;
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
}