/*
Theme Name: Smash Pro
Description: Theme enfant du site Smash Pro
Author: Pierre Gorn Brunet - Smash Pro
Author URI: https://www.culture-games.com
Template: twentytwenty
Version: 0.1.0
*/
* {
  color: #ffffff;
}
body {
  font-family: 'Montserrat-Regular';
  letter-spacing: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
.faux-heading {
  letter-spacing: inherit;
}
section {
  padding: 0;
}
ul {
  margin: 0;
  list-style: none;
}
li {
  margin: 0;
}
@font-face {
  font-family: 'introRust-Base';
  src: url(../fonts/introrust-base.html) format('woff2'), url(../fonts/introrust-base.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat-Regular";
  src: url(../fonts/montserrat-regular.woff) format('woff'), url(../fonts/montserrat-regular.html) format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.wrapperCharacters {
  overflow: hidden;
  position: relative;
  background: #ffffff;
}
.introductionCharacters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #000000;
}
.informationsCharacters {
  display: flex;
  flex-wrap: wrap;
  padding-top: 96px;
  justify-content: center;
  background-color: #000000;
}
.middleCharacters {
  z-index: 2;
}
.movesCharacters {
  display: flex;
  flex-wrap: wrap;
  min-height: 500px;
  padding-top: 160px;
  justify-content: center;
  background-color: #ffffff;
}
.lastInfosCharacters {
  display: flex;
  flex-wrap: wrap;
  min-height: 500px;
  padding-top: 128px;
  padding-bottom: 48px;
  justify-content: center;
  background-color: #000000;
}
.headerSite {
  position: relative;
  color: #ffffff;
  background-color: #000000;
  border-bottom: 8px solid #ffd00d;
}
.headerSite .headerInnerSection {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.headerSite .headerInnerSection .headerTitlesWrapper {
  padding: 0;
}
.headerSite .headerInnerSection .headerTitlesWrapper .headerTitles {
  width: 256px;
}
.headerSite .headerInnerSection .headerTitlesWrapper .headerTitles .logoSmashProTips {
  width: 256px;
}
.headerSite .site-description {
  font-size: 0;
}
.headerSite .nav-toggle,
.headerSite .search-toggle {
  display: none;
}
.headerSite .header-navigation-wrapper,
.headerSite .primary-menu-wrapper {
  display: block;
  width: 100%;
}
.headerSite .header-navigation-wrapper .primary-menu,
.headerSite .primary-menu-wrapper .primary-menu {
  flex-wrap: wrap;
  margin-top: 16px;
  margin-left: 0;
  justify-content: center;
}
.headerSite .header-navigation-wrapper .primary-menu .menu-item,
.headerSite .primary-menu-wrapper .primary-menu .menu-item {
  display: flex;
  width: 50%;
  height: 48px;
  margin-left: 0;
  margin-top: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.headerSite .header-navigation-wrapper .primary-menu .menu-item.shopLinkMenu a,
.headerSite .primary-menu-wrapper .primary-menu .menu-item.shopLinkMenu a {
  color: #ffffff;
}
.headerSite .header-navigation-wrapper .primary-menu .menu-item.menu-item-859,
.headerSite .primary-menu-wrapper .primary-menu .menu-item.menu-item-859,
.headerSite .header-navigation-wrapper .primary-menu .menu-item.menu-item-4964,
.headerSite .primary-menu-wrapper .primary-menu .menu-item.menu-item-4964 {
  opacity: 0.5;
}
.headerSite .header-navigation-wrapper .primary-menu .menu-item.menu-item-859 a,
.headerSite .primary-menu-wrapper .primary-menu .menu-item.menu-item-859 a,
.headerSite .header-navigation-wrapper .primary-menu .menu-item.menu-item-4964 a,
.headerSite .primary-menu-wrapper .primary-menu .menu-item.menu-item-4964 a {
  cursor: inherit;
  pointer-events: none;
}
.headerSite .header-navigation-wrapper .primary-menu .menu-item a,
.headerSite .primary-menu-wrapper .primary-menu .menu-item a {
  font-family: 'introRust-Base';
  font-size: 20px;
  text-decoration: none;
  color: #ffd00d;
}
@media (min-width: 480px) {
  .headerSite .header-navigation-wrapper .primary-menu .menu-item a,
  .headerSite .primary-menu-wrapper .primary-menu .menu-item a {
    font-size: 24px;
  }
}
@media (min-width: 768px) {
  .headerSite .header-navigation-wrapper,
  .headerSite .primary-menu-wrapper {
    margin-right: 24px;
    align-self: flex-end;
  }
  .headerSite .headerInnerSection {
    flex-wrap: nowrap;
  }
  .headerSite .headerInnerSection .headerTitlesWrapper .headerTitles {
    margin: 0 0 0 24px;
  }
  .headerSite .headerInnerSection .headerTitlesWrapper .headerTitles .site-logo {
    margin: 0 0 0 24px;
  }
  .headerSite .header-navigation-wrapper .primary-menu,
  .headerSite .primary-menu-wrapper .primary-menu {
    margin-top: 0;
    justify-content: flex-end;
  }
  .headerSite .header-navigation-wrapper .primary-menu .menu-item,
  .headerSite .primary-menu-wrapper .primary-menu .menu-item {
    width: inherit;
    margin-left: 16px;
    margin-top: 8px;
  }
}
.wpml-ls {
  position: absolute;
  bottom: -42px;
  right: 16px;
  z-index: 100;
}
.wpml-ls.wpml-ls-legacy-list-horizontal .wpml-ls-item {
  margin-left: 24px;
}
.wpml-ls .wpml-ls-link {
  width: 48px;
  height: 48px;
  background-size: contain;
  background-color: #ffd00d;
  border: 4px solid #ffd00d;
  border-radius: 50%;
}
.wpml-ls .wpml-ls-link .wpml-ls-flag {
  display: none;
}
.wpml-ls .wpml-ls-native,
.wpml-ls .wpml-ls-display {
  display: none;
}
.wpml-ls .wpml-ls-item-en .wpml-ls-link {
  background-image: url('../images/pages/common/flags/en_GB.png');
}
.wpml-ls .wpml-ls-item-fr .wpml-ls-link {
  background-image: url('../images/pages/common/flags/fr_FR.png');
}
.wpml-ls .wpml-ls-item-es .wpml-ls-link {
  background-image: url('../images/pages/common/flags/es_ES.png');
}
.wpml-ls .wpml-ls-item-it .wpml-ls-link {
  background: green;
}
@media (min-width: 768px) {
  .wpml-ls {
    bottom: -32px;
  }
  .wpml-ls .wpml-ls-link {
    width: 32px;
    height: 32px;
  }
}
.navigationBackToHome {
  position: relative;
  z-index: 5;
  display: flex;
  padding: 12px 32px 0;
  font-size: 16px;
  text-transform: uppercase;
  justify-content: space-between;
}
.navigationBackToHome .backToHomeList {
  position: relative;
  padding-left: 20px;
  font-family: 'introRust-Base';
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
}
.navigationBackToHome .backToHomeList::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -6px;
  border-style: solid;
  border-width: 6px 10.4px 6px 0;
  border-color: transparent #ffd00d transparent transparent;
}
.modal {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #ffffff;
}
.modal.show {
  display: flex;
  position: fixed;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal .closeModal {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  font-size: 0;
  cursor: pointer;
}
.modal .closeModal:before,
.modal .closeModal:after {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 24px;
  height: 1px;
  background-color: #000000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.modal .closeModal:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.modal .msgModal {
  width: 100%;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: #000000;
  overflow: auto;
}
@media (min-width: 768px) {
  .modal.show {
    top: 50%;
    left: 50%;
    bottom: initial;
    right: initial;
    width: 600px;
    height: 600px;
    margin-top: -300px;
    margin-left: -300px;
    border-radius: 16px;
  }
}
.overlay {
  display: none;
  position: fixed;
  z-index: 500;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
}
.overlay.show {
  display: block;
}
.headerSite {
  border-bottom: 8px solid #ffffff;
}
.wpml-ls .wpml-ls-link {
  background-color: #ffffff;
  border-color: #ffffff;
}
.topCharacters {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  height: 512px;
  justify-content: center;
  align-content: flex-start;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position-x: calc(50% - 0px), 100%, center !important;
  background-position-y: bottom, center, center !important;
  background-size: 1000px 512px, 910px 512px, 100% !important;
  background-color: #000000;
}
.topCharacters .titleCharacters {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 48px;
  font-family: 'introRust-Base';
  letter-spacing: 1px;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
}
.topCharacters .titleCharacters .iconCharacters {
  width: 48px;
  margin-left: 8px;
}
.topCharacters .numberCharacters {
  text-shadow: black 0.1em 0.1em 0.2em;
}
.topCharacters .nameCharacters {
  text-align: center;
  text-shadow: black 0.1em 0.1em 0.2em;
}
.topCharacters .firstGame {
  position: relative;
  display: flex;
  width: 100%;
  height: 36px;
  margin-top: 13px;
  font-family: 'introRust-Base';
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background-color: #ffffff;
}
.topCharacters .firstGame::before,
.topCharacters .firstGame::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #ffffff;
}
.topCharacters .firstGame::after {
  top: inherit;
  bottom: -10px;
  height: 6px;
}
.topCharacters .firstGame .firstGameWording {
  display: none;
}
@media (min-width: 768px) {
  .topCharacters .nameCharacters {
    font-size: 48px;
    justify-content: flex-end;
  }
  .topCharacters .firstGame .firstGameWording {
    display: inline-block;
    margin-right: 5px;
    color: #ffffff;
  }
}
.firstGameBox {
  padding: 8px;
  background: #000000;
}
.firstGameBox .firstGame {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  height: 64px;
  margin: auto;
  font-size: 16px;
  font-family: 'introRust-Base';
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  background: #ffffff;
}
.firstGameBox .firstGame::before,
.firstGameBox .firstGame::after {
  content: '';
  position: absolute;
  left: -40px;
  width: 32px;
  height: 100%;
  background: #ffffff;
}
.firstGameBox .firstGame::after {
  left: inherit;
  right: -40px;
}
.firstGameBox .firstGame .boldLink {
  margin-left: 8px;
  color: #ffffff;
}
.firstGameBox .firstGame .borderLeft {
  position: absolute;
  left: -72px;
  top: 0;
  height: 48px;
  background: #000000;
}
.firstGameBox .firstGame .borderLeft::before,
.firstGameBox .firstGame .borderLeft::after {
  content: '';
  position: absolute;
  left: -40px;
  width: 8px;
  height: 100%;
  background: #ffffff;
}
.firstGameBox .firstGame .borderLeft::after {
  left: 0;
  width: 16px;
}
.firstGameBox .firstGame .firstGameWording {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: #ffffff;
}
.firstGameBox .firstGame .borderRight {
  position: absolute;
  right: -72px;
  top: 0;
  height: 48px;
  background: #000000;
}
.firstGameBox .firstGame .borderRight::before,
.firstGameBox .firstGame .borderRight::after {
  content: '';
  position: absolute;
  right: -40px;
  width: 8px;
  height: 100%;
  background: #ffffff;
}
.firstGameBox .firstGame .borderRight::after {
  right: 0;
  width: 16px;
}
@media (min-width: 456px) {
  .firstGameBox {
    height: 64px;
    padding: 8px;
    background: #000000;
  }
  .firstGameBox .firstGame {
    width: 540px;
    height: 48px;
  }
}
.presentationCharacters {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 32px;
  justify-content: center;
  background-color: #ffd00d;
  height: inherit;
  min-height: 230px;
  padding-bottom: 0;
}
.presentationCharacters .contentBox {
  max-width: 640px;
  padding: 60px 32px;
  font-size: 20px;
}
.statisticsCharacters {
  position: relative;
  min-height: 300px;
  padding-bottom: 100px;
}
.statisticsCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.statisticsCharacters .titleBox::before,
.statisticsCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.statisticsCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.statisticsCharacters .titleBox::before {
  background-image: url('../images/pages/characters/stats-title-top.png');
}
.statisticsCharacters .titleBox::after {
  background-image: url('../images/pages/characters/stats-title-bottom.png');
}
.statisticsCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  width: 100%;
  margin-top: 64px;
  align-items: center;
}
.statisticsCharacters .contentBox .statsChartWrapper {
  max-width: 376px;
  margin: 0 auto 32px;
}
.statisticsCharacters .contentBox .statsChartWrapper .statsChart {
  width: 320px !important;
  height: 320px !important;
}
@media (min-width: 768px) {
  .statisticsCharacters .contentBox {
    display: flex;
    width: 736px;
    margin: 64px auto 0;
    padding: 0;
    justify-content: space-evenly;
  }
  .statisticsCharacters .contentBox .statsChartWrapper {
    margin: initial;
  }
  .statisticsCharacters .contentBox .playFun {
    width: 352px;
  }
}
@media (min-width: 1260px) {
  .statisticsCharacters .contentBox {
    width: 1188px;
  }
  .statisticsCharacters .contentBox .playFun {
    width: 456px;
  }
}
.coachsCharacters {
  padding-bottom: 32px;
  min-height: 300px;
  background: #000000;
}
.coachsCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.coachsCharacters .titleBox::before,
.coachsCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.coachsCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.coachsCharacters .titleBox::before {
  background-image: url('../images/pages/characters/player-title-top.png');
}
.coachsCharacters .titleBox::after {
  background-image: url('../images/pages/characters/player-title-bottom.png');
}
.coachsCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  display: flex;
  max-width: 1188px;
  margin-top: 96px;
  justify-content: center;
}
.coachsCharacters .contentBox .coachs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 320px;
  justify-content: center;
}
.coachsCharacters .contentBox .wrapperImage {
  position: relative;
}
.coachsCharacters .contentBox .wrapperImage .coachsImage {
  width: 144px;
  border-radius: 72px;
}
.coachsCharacters .contentBox .wrapperImage .coachsFlag {
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 32px;
  width: 32px;
  background: #000000 url(../images/pages/common/flags/fr_FR.png);
  background-size: contain;
  border: 0 solid #000000;
  border-radius: 50%;
}
.coachsCharacters .contentBox .coachsName {
  width: 100%;
  margin: 16px;
  font-size: 28px;
  text-align: center;
  font-family: 'introRust-Base';
}
.coachsCharacters .contentBox .coachsLink {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0;
}
.characteristicsCharacters {
  min-height: 300px;
  padding-bottom: 100px;
  background-color: #000000;
}
.characteristicsCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.characteristicsCharacters .titleBox::before,
.characteristicsCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.characteristicsCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.characteristicsCharacters .titleBox::before {
  background-image: url('../images/pages/characters/characteristics-title-top.png');
}
.characteristicsCharacters .titleBox::after {
  background-image: url('../images/pages/characters/characteristics-title-bottom.png');
}
.characteristicsCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  margin: 0;
}
.characteristicsCharacters .contentBox .plus,
.characteristicsCharacters .contentBox .minus {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
.characteristicsCharacters .contentBox .plusArtwork,
.characteristicsCharacters .contentBox .minusArtwork {
  width: 280px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.characteristicsCharacters .contentBox .plusTitle,
.characteristicsCharacters .contentBox .minusTitle {
  position: relative;
  display: inline-flex;
  padding: 8px 16px;
  margin: 64px auto 32px;
  font-size: 26px;
  text-transform: uppercase;
  justify-content: center;
  text-align: center;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  margin-top: 0;
}
.characteristicsCharacters .contentBox .plusTitle::before,
.characteristicsCharacters .contentBox .minusTitle::before,
.characteristicsCharacters .contentBox .plusTitle::after,
.characteristicsCharacters .contentBox .minusTitle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  width: 12px;
  height: 6px;
  margin-top: -3px;
  background-color: #ffffff;
}
.characteristicsCharacters .contentBox .plusTitle::after,
.characteristicsCharacters .contentBox .minusTitle::after {
  right: -6px;
  left: inherit;
}
.characteristicsCharacters .contentBox .plusList,
.characteristicsCharacters .contentBox .minusList {
  margin: 0;
  text-align: left;
  list-style: none;
}
.characteristicsCharacters .contentBox .plusList .plusItem .item,
.characteristicsCharacters .contentBox .minusList .plusItem .item,
.characteristicsCharacters .contentBox .plusList .minusItem .item,
.characteristicsCharacters .contentBox .minusList .minusItem .item {
  position: relative;
  padding-left: 16px;
  font-size: 20px;
}
.characteristicsCharacters .contentBox .plusList .plusItem .item::before,
.characteristicsCharacters .contentBox .minusList .plusItem .item::before,
.characteristicsCharacters .contentBox .plusList .minusItem .item::before,
.characteristicsCharacters .contentBox .minusList .minusItem .item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 8px;
}
@media (min-width: 768px) and (max-width: 1259px) {
  .characteristicsCharacters .contentBox {
    display: flex;
    justify-content: center;
  }
  .characteristicsCharacters .contentBox .plus,
  .characteristicsCharacters .contentBox .minus {
    width: 376px;
  }
}
@media (min-width: 1260px) {
  .characteristicsCharacters {
    max-width: 380px;
  }
  .characteristicsCharacters .contentBox {
    padding: 0 24px 16px;
  }
}
.matchUpsCharacters {
  padding-bottom: 112px;
  min-height: 300px;
  background-color: #000000;
}
.matchUpsCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.matchUpsCharacters .titleBox::before,
.matchUpsCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.matchUpsCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.matchUpsCharacters .titleBox::before {
  background-image: url('../images/pages/characters/match-ups-title-top.png');
}
.matchUpsCharacters .titleBox::after {
  background-image: url('../images/pages/characters/match-ups-title-bottom.png');
}
.matchUpsCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  position: relative;
  margin-top: 40px;
  font-size: 20px;
}
.matchUpsCharacters .contentBox .explainPopin {
  display: inline-block;
  position: absolute;
  bottom: -56px;
  right: 8px;
  width: 40px;
  height: 40px;
  background: url(../../../../../../wp-content/themes/smashpro/assets/images/pages/characters/info.png);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 20px;
  cursor: pointer;
}
.matchUpsCharacters .contentBox .explainPopin:hover {
  background: url(../../../../../../wp-content/themes/smashpro/assets/images/pages/characters/info-hover.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.matchUpsCharacters .contentBox .positive,
.matchUpsCharacters .contentBox .negative {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
.matchUpsCharacters .contentBox .positiveTitle,
.matchUpsCharacters .contentBox .negativeTitle {
  position: relative;
  display: inline-flex;
  padding: 8px 16px;
  margin: 64px auto 32px;
  font-size: 26px;
  text-transform: uppercase;
  justify-content: center;
  text-align: center;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}
.matchUpsCharacters .contentBox .positiveTitle::before,
.matchUpsCharacters .contentBox .negativeTitle::before,
.matchUpsCharacters .contentBox .positiveTitle::after,
.matchUpsCharacters .contentBox .negativeTitle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  width: 12px;
  height: 6px;
  margin-top: -3px;
  background-color: #ffffff;
}
.matchUpsCharacters .contentBox .positiveTitle::after,
.matchUpsCharacters .contentBox .negativeTitle::after {
  right: -6px;
  left: inherit;
}
.matchUpsCharacters .contentBox .positiveList,
.matchUpsCharacters .contentBox .negativeList {
  position: relative;
  height: 48px;
  padding: 0 16px;
  margin-bottom: 16px;
}
.matchUpsCharacters .contentBox .positiveList::before,
.matchUpsCharacters .contentBox .negativeList::before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 184px;
  height: 2px;
  margin-top: -1px;
  margin-left: -92px;
  background: #ffffff;
}
.matchUpsCharacters .contentBox .positiveItem,
.matchUpsCharacters .contentBox .negativeItem {
  position: relative;
  display: inline-block;
  width: 48px;
}
.matchUpsCharacters .contentBox .positiveCom + .positiveList {
  margin-top: 16px;
}
.matchUpsCharacters .contentBox .negativeCom + .negativeList {
  margin-top: 16px;
}
@media (min-width: 768px) and (max-width: 1259px) {
  .matchUpsCharacters .contentBox {
    display: flex;
    justify-content: center;
  }
  .matchUpsCharacters .contentBox .positive,
  .matchUpsCharacters .contentBox .negative {
    width: 376px;
  }
}
@media (min-width: 1260px) {
  .matchUpsCharacters {
    max-width: 320px;
  }
  .matchUpsCharacters .contentBox {
    position: relative;
    padding: 0 24px 16px;
  }
  .matchUpsCharacters .contentBox .positive {
    height: 400px;
  }
  .matchUpsCharacters .contentBox::before,
  .matchUpsCharacters .contentBox::after {
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 2px;
    height: 640px;
    margin-top: -320px;
    background: #ffffff;
  }
  .matchUpsCharacters .contentBox::after {
    left: inherit;
    right: 0;
  }
}
.stagesCharacters {
  min-height: 300px;
  padding-bottom: 112px;
  background-color: #000000;
}
.stagesCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.stagesCharacters .titleBox::before,
.stagesCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.stagesCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.stagesCharacters .titleBox::before {
  background-image: url('../images/pages/characters/stage-title-top.png');
}
.stagesCharacters .titleBox::after {
  background-image: url('../images/pages/characters/stage-title-bottom.png');
}
.stagesCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  position: relative;
  max-width: 440px;
  padding: 0 0 16px;
  margin-top: 40px;
}
.stagesCharacters .contentBox .explainPopin {
  display: inline-block;
  position: absolute;
  bottom: -56px;
  right: 8px;
  width: 40px;
  height: 40px;
  background: url(../../../../../../wp-content/themes/smashpro/assets/images/pages/characters/info.png);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 20px;
  cursor: pointer;
}
.stagesCharacters .contentBox .explainPopin:hover {
  background: url(../../../../../../wp-content/themes/smashpro/assets/images/pages/characters/info-hover.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.stagesCharacters .contentBox .attractive,
.stagesCharacters .contentBox .unfavorable {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
.stagesCharacters .contentBox .attractiveTitle,
.stagesCharacters .contentBox .unfavorableTitle {
  position: relative;
  display: inline-flex;
  padding: 8px 16px;
  margin: 64px auto 32px;
  font-size: 26px;
  text-transform: uppercase;
  justify-content: center;
  text-align: center;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}
.stagesCharacters .contentBox .attractiveTitle::before,
.stagesCharacters .contentBox .unfavorableTitle::before,
.stagesCharacters .contentBox .attractiveTitle::after,
.stagesCharacters .contentBox .unfavorableTitle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  width: 12px;
  height: 6px;
  margin-top: -3px;
  background-color: #ffffff;
}
.stagesCharacters .contentBox .attractiveTitle::after,
.stagesCharacters .contentBox .unfavorableTitle::after {
  right: -6px;
  left: inherit;
}
.stagesCharacters .contentBox .attractiveList,
.stagesCharacters .contentBox .unfavorableList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.stagesCharacters .contentBox .attractiveList .plusItem,
.stagesCharacters .contentBox .unfavorableList .plusItem,
.stagesCharacters .contentBox .attractiveList .minusItem,
.stagesCharacters .contentBox .unfavorableList .minusItem {
  display: inline-flex;
  width: 200px;
  height: 100px;
  margin: 8px;
}
.stagesCharacters .contentBox .plusList,
.stagesCharacters .contentBox .minusList {
  margin: 24px 0 0;
  text-align: left;
  list-style: none;
}
.stagesCharacters .contentBox .plusList .plusItem .item,
.stagesCharacters .contentBox .minusList .plusItem .item,
.stagesCharacters .contentBox .plusList .minusItem .item,
.stagesCharacters .contentBox .minusList .minusItem .item {
  position: relative;
  padding-left: 16px;
  font-size: 20px;
}
.stagesCharacters .contentBox .plusList .plusItem .item::before,
.stagesCharacters .contentBox .minusList .plusItem .item::before,
.stagesCharacters .contentBox .plusList .minusItem .item::before,
.stagesCharacters .contentBox .minusList .minusItem .item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 8px;
}
@media (min-width: 768px) and (max-width: 1259px) {
  .stagesCharacters .contentBox {
    display: flex;
    max-width: 100%;
    justify-content: center;
  }
  .stagesCharacters .contentBox .attractive,
  .stagesCharacters .contentBox .unfavorable {
    width: 376px;
  }
  .stagesCharacters .contentBox .attractive .attractiveList .plusItem,
  .stagesCharacters .contentBox .unfavorable .attractiveList .plusItem,
  .stagesCharacters .contentBox .attractive .unfavorableList .plusItem,
  .stagesCharacters .contentBox .unfavorable .unfavorableList .plusItem,
  .stagesCharacters .contentBox .attractive .attractiveList .minusItem,
  .stagesCharacters .contentBox .unfavorable .attractiveList .minusItem,
  .stagesCharacters .contentBox .attractive .unfavorableList .minusItem,
  .stagesCharacters .contentBox .unfavorable .unfavorableList .minusItem {
    width: 168px;
    height: 84px;
  }
}
@media (min-width: 1260px) {
  .stagesCharacters {
    max-width: 488px;
  }
  .stagesCharacters .contentBox {
    max-width: 488px;
    margin: 0;
    padding: 0 24px 16px;
  }
}
.skillsCharacters {
  min-height: 300px;
  padding-bottom: 112px;
  background-color: #000000;
}
.skillsCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.skillsCharacters .titleBox::before,
.skillsCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.skillsCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.skillsCharacters .titleBox::before {
  background-image: url('../images/pages/characters/skills-title-top.png');
}
.skillsCharacters .titleBox::after {
  background-image: url('../images/pages/characters/skills-title-bottom.png');
}
.skillsCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  position: relative;
  max-width: 100%;
  padding: 0 0 16px;
  margin-top: 40px;
}
.skillsCharacters .contentBox .explainPopin {
  display: inline-block;
  position: absolute;
  bottom: -56px;
  right: 8px;
  width: 40px;
  height: 40px;
  background: url(../../../../../../wp-content/themes/smashpro/assets/images/pages/characters/info.png);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 20px;
  cursor: pointer;
}
.skillsCharacters .contentBox .explainPopin:hover {
  background: url(../../../../../../wp-content/themes/smashpro/assets/images/pages/characters/info-hover.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.skillsCharacters .contentBox .skillsList {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  margin: auto;
  justify-content: center;
}
.skillsCharacters .contentBox .skillsList .skillItem {
  display: inline-flex;
  width: 160px;
  height: 160px;
  margin: 8px;
}
.middleCharacters {
  position: absolute;
  left: -10%;
  display: flex;
  flex-wrap: wrap;
  width: 120%;
  height: 80px;
  font-family: 'introRust-Base';
  align-content: flex-start;
  background-color: #ffffff;
}
.middleCharacters::before {
  content: '';
  position: absolute;
  top: -64px;
  left: 0;
  right: 0;
  height: 64px;
  background-color: #000000;
}
.middleCharacters .wordingPartTipsPro {
  position: relative;
  display: flex;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  color: #000000;
}
.middleCharacters .wordingPartTipsPro::before,
.middleCharacters .wordingPartTipsPro::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #ffffff;
}
.middleCharacters .wordingPartTipsPro::after {
  top: inherit;
  bottom: -12px;
  height: 4px;
}
.featureCharacters {
  position: relative;
  width: 100%;
  padding-bottom: 100px;
}
.featureCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.featureCharacters .titleBox::before,
.featureCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.featureCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.featureCharacters .titleBox::before {
  top: -12px;
  background-image: url('../images/pages/characters/feature-title-top.png');
}
.featureCharacters .titleBox::after {
  bottom: -28px;
  background-image: url('../images/pages/characters/feature-title-bottom.png');
}
.featureCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  display: flex;
  flex-wrap: wrap;
  margin-top: 64px;
  justify-content: center;
  align-items: flex-start;
}
.featureCharacters .contentBox .wordingFeature {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  margin-top: 32px;
  margin-left: 0;
  justify-content: center;
  align-items: flex-start;
}
.featureCharacters .contentBox .wordingFeature .imageFeature {
  width: 100%;
}
.featureCharacters .contentBox .wordingFeature .imageFeature.desktop {
  display: none;
}
.featureCharacters .contentBox .wordingFeature .textFeature {
  overflow: auto;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: 100%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
}
.featureCharacters .contentBox .wordingFeature .textFeature .titleBoxFeature {
  margin: 0 0 8px;
  font-size: 32px;
  font-family: 'introRust-Base';
  text-align: center;
}
.featureCharacters .contentBox .wordingFeature .featureText {
  line-height: 24px;
  color: #000000;
}
@media (min-width: 768px) {
  .featureCharacters .contentBox {
    flex-wrap: inherit;
  }
  .featureCharacters .contentBox .wordingFeature {
    display: block;
    max-width: 736px;
    margin-top: 0;
  }
  .featureCharacters .contentBox .wordingFeature .textFeature {
    position: absolute;
    max-width: 320px;
  }
}
@media (min-width: 1260px) {
  .featureCharacters .contentBox .wordingFeature {
    max-width: 960px;
  }
  .featureCharacters .contentBox .wordingFeature .imageFeature {
    width: 100%;
  }
  .featureCharacters .contentBox .wordingFeature .imageFeature.desktop {
    display: block;
  }
  .featureCharacters .contentBox .wordingFeature .imageFeature.mobile {
    display: none;
  }
  .featureCharacters .contentBox .wordingFeature .textFeature {
    max-width: 400px;
  }
}
.pokemonsCharacters {
  position: relative;
  width: 100%;
  padding-bottom: 100px;
}
.pokemonsCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.pokemonsCharacters .titleBox::before,
.pokemonsCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.pokemonsCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.pokemonsCharacters .titleBox::before {
  top: -12px;
  background-image: url('../images/pages/characters/pokemon-title-top.png');
}
.pokemonsCharacters .titleBox::after {
  bottom: -28px;
  background-image: url('../images/pages/characters/pokemon-title-bottom.png');
}
.pokemonsCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  display: flex;
  flex-wrap: wrap;
  margin-top: 64px;
  justify-content: center;
  align-items: flex-start;
}
.pokemonsCharacters .contentBox .wordingFeature {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  margin-top: 32px;
  margin-left: 0;
  justify-content: center;
  align-items: flex-start;
}
.pokemonsCharacters .contentBox .wordingFeature .linkToPokemon {
  display: inline-flex;
  width: 250px;
  height: 250px;
  font-size: 0;
  background: url('../images/pages/characters/dracaufeu-selection.png');
}
.pokemonsCharacters .contentBox .wordingFeature .linkToPokemon.carapuce {
  background: url('../images/pages/characters/carapuce-selection.png');
}
.pokemonsCharacters .contentBox .wordingFeature .linkToPokemon.herbizarre {
  background: url('../images/pages/characters/herbizarre-selection.png');
}
@media (min-width: 768px) {
  .pokemonsCharacters .contentBox {
    flex-wrap: inherit;
  }
  .pokemonsCharacters .contentBox .wordingFeature {
    max-width: 768px;
    margin-top: 0;
  }
}
.aegisCharacters {
  position: relative;
  width: 100%;
  padding-bottom: 100px;
}
.aegisCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.aegisCharacters .titleBox::before,
.aegisCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.aegisCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.aegisCharacters .titleBox .wordingTitle {
  color: #000000;
}
.aegisCharacters .titleBox::before {
  top: -12px;
  background-image: url('../images/pages/characters/aegis-title-top.png');
}
.aegisCharacters .titleBox::after {
  bottom: -28px;
  background-image: url('../images/pages/characters/aegis-title-bottom.png');
}
.aegisCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  display: flex;
  flex-wrap: wrap;
  margin-top: 64px;
  justify-content: center;
  align-items: flex-start;
}
.aegisCharacters .contentBox .wordingFeature {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  margin-top: 32px;
  margin-left: 0;
  justify-content: center;
  align-items: flex-start;
}
.aegisCharacters .contentBox .wordingFeature .linkToAegis {
  display: inline-flex;
  width: 250px;
  height: 265px;
  font-size: 0;
  background: url('../images/pages/characters/pyra-selection.png');
}
.aegisCharacters .contentBox .wordingFeature .linkToAegis.mythra {
  background: url('../images/pages/characters/mythra-selection.png');
}
@media (min-width: 768px) {
  .aegisCharacters .contentBox {
    flex-wrap: inherit;
  }
  .aegisCharacters .contentBox .wordingFeature {
    max-width: 768px;
    margin-top: 0;
  }
}
.bestMovesCharacters {
  padding-bottom: 100px;
  min-height: 300px;
}
.bestMovesCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.bestMovesCharacters .titleBox::before,
.bestMovesCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.bestMovesCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.bestMovesCharacters .titleBox::before {
  top: -12px;
  background-image: url('../images/pages/characters/move-title-top.png');
}
.bestMovesCharacters .titleBox::after {
  bottom: -28px;
  background-image: url('../images/pages/characters/move-title-bottom.png');
}
.bestMovesCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  display: flex;
  max-width: 1188px;
  margin-top: 64px;
  justify-content: center;
}
.bestMovesCharacters .contentBox .moveSlide .moveName {
  margin: 16px auto;
  line-height: 40px;
  text-align: center;
}
.bestMovesCharacters .contentBox .moveSlide .moveText {
  margin-top: 24px;
  padding: 0 24px;
  line-height: 24px;
  color: #000000;
}
.bestMovesCharacters .contentBox .swipperWrapper {
  position: relative;
  width: 320px;
  min-height: 600px;
}
.bestMovesCharacters .contentBox .swipperWrapper .swiper-container {
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.bestMovesCharacters .contentBox .swipperWrapper .swiper-button-next,
.bestMovesCharacters .contentBox .swipperWrapper .swiper-button-prev {
  display: none;
  left: -72px;
  height: 64px;
  width: 64px;
  background: #ffffff;
  border: 1px solid #ffd00d;
  border-radius: 32px;
  outline: none;
}
.bestMovesCharacters .contentBox .swipperWrapper .swiper-button-next::after,
.bestMovesCharacters .contentBox .swipperWrapper .swiper-button-prev::after,
.bestMovesCharacters .contentBox .swipperWrapper .swiper-button-next::after,
.bestMovesCharacters .contentBox .swipperWrapper .swiper-button-prev::after {
  font-size: 24px;
  font-weight: 700;
  color: #ffd00d;
}
.bestMovesCharacters .contentBox .swipperWrapper .swiper-button-next {
  left: inherit;
  right: -72px;
}
.bestMovesCharacters .contentBox .swipperWrapper .swiper-pagination {
  display: flex;
  height: 24px;
  bottom: -40px;
  left: 50%;
  width: 128px;
  margin-left: -64px;
  align-items: center;
  justify-content: center;
}
.bestMovesCharacters .contentBox .swipperWrapper .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 4px;
  background: none;
  border: 1px solid #ffffff;
  opacity: 1;
}
.bestMovesCharacters .contentBox .swipperWrapper .swiper-pagination .swiper-pagination-bullet-active {
  background: #ffffff;
}
@media (min-width: 480px) {
  .bestMovesCharacters .contentBox .swipperWrapper .swiper-button-next,
  .bestMovesCharacters .contentBox .swipperWrapper .swiper-button-prev {
    display: flex;
  }
}
@media (min-width: 768px) {
  .bestMovesCharacters .contentBox .moveSlide {
    padding: 0 40px 0;
  }
  .bestMovesCharacters .contentBox .moveSlide .moveName {
    margin: 4px auto;
  }
  .bestMovesCharacters .contentBox .moveSlide .moveName .moveNameText {
    font-size: 28px;
  }
  .bestMovesCharacters .contentBox .moveSlide .moveText {
    padding: 0;
  }
  .bestMovesCharacters .contentBox .swipperWrapper {
    width: 640px;
    height: 600px;
  }
  .bestMovesCharacters .contentBox .swipperWrapper .swiper-button-prev {
    left: -32px;
  }
  .bestMovesCharacters .contentBox .swipperWrapper .swiper-button-next {
    left: inherit;
    right: -32px;
  }
}
.outOfShieldCharacters {
  padding-bottom: 100px;
  min-height: 300px;
}
.outOfShieldCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.outOfShieldCharacters .titleBox::before,
.outOfShieldCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.outOfShieldCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.outOfShieldCharacters .titleBox::before {
  background-image: url('../images/pages/characters/oos-title-top.png');
}
.outOfShieldCharacters .titleBox::after {
  background-image: url('../images/pages/characters/oos-title-bottom.png');
}
.outOfShieldCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 320px;
  max-width: 960px;
  padding: 0;
  margin: 64px auto 48px;
  justify-content: center;
  align-items: center;
  background: #ffffff;
}
.outOfShieldCharacters .contentBox .explainPopin {
  display: inline-block;
  position: absolute;
  bottom: -56px;
  right: 8px;
  width: 40px;
  height: 40px;
  background: url(../../../../../../wp-content/themes/smashpro/assets/images/pages/characters/info.png);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 20px;
  cursor: pointer;
}
.outOfShieldCharacters .contentBox .explainPopin:hover {
  background: url(../../../../../../wp-content/themes/smashpro/assets/images/pages/characters/info-hover.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.outOfShieldCharacters .contentBox .titlePart {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
}
.outOfShieldCharacters .contentBox .titlePart .titleSection {
  display: flex;
  flex: 1;
  margin: 0;
  padding: 8px 0;
  font-size: 26px;
  font-family: 'introRust-Base';
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background: #000000;
  cursor: pointer;
}
.outOfShieldCharacters .contentBox .titlePart .titleSection:hover {
  opacity: 0.8;
}
.outOfShieldCharacters .contentBox .titlePart .titleSection.active {
  color: red;
  background: #ffffff;
  cursor: initial;
}
.outOfShieldCharacters .contentBox .titlePart .titleSection.active:hover {
  opacity: 1;
}
.outOfShieldCharacters .contentBox .contentPart {
  display: flex;
  width: 100%;
}
.outOfShieldCharacters .contentBox .contentPart .fastOptiondWrapper,
.outOfShieldCharacters .contentBox .contentPart .safeOnShieldWrapper,
.outOfShieldCharacters .contentBox .contentPart .outOfShieldWrapper {
  display: none;
  flex-direction: column;
}
.outOfShieldCharacters .contentBox .contentPart .fastOptiondWrapper.active,
.outOfShieldCharacters .contentBox .contentPart .safeOnShieldWrapper.active,
.outOfShieldCharacters .contentBox .contentPart .outOfShieldWrapper.active {
  display: flex;
  width: 100%;
}
.outOfShieldCharacters .contentBox .outOfShield {
  flex: 1;
  max-width: 440px;
  margin-bottom: 32px;
  padding: 0 16px;
}
.outOfShieldCharacters .contentBox .outOfShieldName {
  position: relative;
  display: flex;
  width: 90%;
  height: 70px;
  margin: 16px auto;
  justify-content: center;
  align-items: center;
  background: #ffffff;
}
.outOfShieldCharacters .contentBox .outOfShieldName .outOfShieldNameText {
  display: inline-block;
  display: -webkit-box;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #000000;
}
.outOfShieldCharacters .contentBox .outOfShieldImage {
  width: 100%;
}
@media (min-width: 768px) {
  .outOfShieldCharacters .contentBox {
    width: 100%;
  }
  .outOfShieldCharacters .contentBox .titlePart {
    flex-direction: row;
  }
  .outOfShieldCharacters .contentBox .contentPart .fastOptiondWrapper,
  .outOfShieldCharacters .contentBox .contentPart .safeOnShieldWrapper,
  .outOfShieldCharacters .contentBox .contentPart .outOfShieldWrapper {
    flex-direction: row;
  }
  .outOfShieldCharacters .contentBox .outOfShieldName {
    margin: 4px auto;
  }
  .outOfShieldCharacters .contentBox .outOfShieldName .outOfShieldNameText {
    font-size: 18px;
  }
}
@media (min-width: 768px) and (max-width: 1259px) {
  .outOfShieldCharacters .contentBox {
    flex-direction: row;
  }
}
.bottomCharacters {
  position: absolute;
  left: -10%;
  display: flex;
  flex-wrap: wrap;
  width: 120%;
  height: 80px;
  margin-top: -54px;
  font-family: 'introRust-Base';
  align-content: flex-start;
  background-color: #ffffff;
}
.bottomCharacters::before {
  content: '';
  position: absolute;
  bottom: -64px;
  left: 0;
  right: 0;
  height: 64px;
  background-color: #000000;
}
.bottomCharacters .wordingPartBeforeLeaving {
  position: relative;
  display: flex;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  color: #000000;
}
.bottomCharacters .wordingPartBeforeLeaving::before,
.bottomCharacters .wordingPartBeforeLeaving::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #ffffff;
}
.bottomCharacters .wordingPartBeforeLeaving::after {
  top: inherit;
  bottom: -12px;
  height: 4px;
}
.lastAdviceCharacters {
  padding-bottom: 100px;
  min-height: 300px;
}
.lastAdviceCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.lastAdviceCharacters .titleBox::before,
.lastAdviceCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.lastAdviceCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.lastAdviceCharacters .titleBox::before {
  top: -12px;
  background-image: url('../images/pages/characters/advice-title-top.png');
}
.lastAdviceCharacters .titleBox::after {
  bottom: -28px;
  background-image: url('../images/pages/characters/advice-title-bottom.png');
}
.lastAdviceCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
}
.lastAdviceCharacters .contentBox .advice {
  max-width: 540px;
  margin: auto;
}
.lastAdviceCharacters .contentBox .adviceTitle {
  position: relative;
  padding: 5px;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid #ffffff;
  cursor: pointer;
}
.lastAdviceCharacters .contentBox .adviceTitle::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 0;
  height: 0;
  margin-top: -5px;
  margin-left: -8px;
  border-style: solid;
  border-width: 0 8px 10.4px 8px;
  border-color: transparent transparent #ffffff transparent;
  transform: rotate(180deg);
}
.lastAdviceCharacters .contentBox .adviceTitle.fold {
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.lastAdviceCharacters .contentBox .adviceTitle.fold::after {
  display: none;
}
.lastAdviceCharacters .contentBox .adviceTitle.fold + .adviceDetail {
  display: block;
}
.lastAdviceCharacters .contentBox .adviceDetail {
  position: relative;
  display: none;
  padding: 0 16px;
}
.lastAdviceCharacters .contentBox .adviceDetail::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -24px;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-style: solid;
  border-width: 0 8px 10.4px 8px;
  border-color: transparent transparent #ffffff transparent;
}
@media (min-width: 1260px) {
  .lastAdviceCharacters .contentBox {
    display: flex;
    width: 1188px;
    margin: 0 auto;
    padding: 0;
    justify-content: space-around;
  }
  .lastAdviceCharacters .contentBox .advice {
    width: 320px;
    margin: inherit;
  }
  .lastAdviceCharacters .contentBox .advice .adviceTitle {
    font-size: 24px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    cursor: inherit;
  }
  .lastAdviceCharacters .contentBox .advice .adviceTitle::before,
  .lastAdviceCharacters .contentBox .advice .adviceTitle::after {
    display: none;
  }
  .lastAdviceCharacters .contentBox .advice .adviceDetail {
    display: block;
  }
  .lastAdviceCharacters .contentBox .advice .adviceDetail::after {
    display: none;
  }
}
.playFunCharacters {
  position: relative;
  background-color: #000000;
}
.playFunCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.playFunCharacters .titleBox::before,
.playFunCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.playFunCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.playFunCharacters .titleBox::before {
  background-image: url('../images/pages/characters/fun-title-top.png');
}
.playFunCharacters .titleBox::after {
  background-image: url('../images/pages/characters/fun-title-bottom.png');
}
.playFunCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  position: relative;
  margin-top: 96px;
}
@media (min-width: 768px) {
  .playFunCharacters {
    width: 320px;
    padding-bottom: 100px;
  }
}
.goMoreCharacters {
  width: 100%;
  padding: 0 32px;
}
.goMoreCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.goMoreCharacters .titleBox::before,
.goMoreCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.goMoreCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.goMoreCharacters .titleBox::before {
  background-image: url('../images/pages/characters/more-title-top.png');
}
.goMoreCharacters .titleBox::after {
  background-image: url('../images/pages/characters/more-title-bottom.png');
}
.goMoreCharacters .contentBox {
  font-size: 24px;
  font-weight: 900;
  text-align: center;
}
.goMoreCharacters .contentBox .explainWording {
  display: inline-block;
  margin-top: 32px;
}
.goMoreCharacters .contentBox .moreInfosCharacters {
  display: flex;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 24px auto 0;
}
.goMoreCharacters .contentBox .discordLink,
.goMoreCharacters .contentBox .moreLink {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.goMoreCharacters .contentBox .wording {
  display: inline-flex;
  width: 224px;
}
.goMoreCharacters .contentBox .logo {
  width: 96px;
}
.goMoreCharacters .contentBox .link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 0;
}
.goMoreCharacters .contentBox .discordLink .logo {
  position: relative;
}
.goMoreCharacters .contentBox .discordLink .logo::before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 40px;
  margin-left: -24px;
  margin-top: -22px;
  background: #ffffff;
}
.goMoreCharacters .contentBox .discordLink .logo .goMoreDiscord {
  position: relative;
}
.goMoreCharacters .contentBox .moreInfosLink {
  width: 92%;
  margin: auto;
}
.goMoreCharacters .contentBox iframe {
  width: 100%;
  margin: 48px auto 0;
}
@media (min-width: 768px) {
  .goMoreCharacters .contentBox {
    /* with activation */
  }
  .goMoreCharacters .contentBox .discordLink,
  .goMoreCharacters .contentBox .moreLink {
    width: 50%;
  }
  .goMoreCharacters .contentBox iframe {
    width: 560px !important;
    height: 315px !important;
  }
  .goMoreCharacters .contentBox .rll-youtube-player {
    width: 560px !important;
    height: 315px !important;
    padding-bottom: 34%;
    margin: 24px auto 0;
  }
}
@media (min-width: 1200px) {
  .goMoreCharacters .contentBox .rll-youtube-player {
    display: inline-block;
  }
}
.helpCharacters {
  padding: 32px 0 0;
  min-height: 264px;
}
.helpCharacters .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  padding-top: 16px;
  margin: 0 auto 24px;
  font-size: 30px;
  font-weight: 400;
  font-family: 'introRust-Base';
  letter-spacing: 0.5px;
  justify-content: center;
  text-align: center;
}
.helpCharacters .titleBox::before,
.helpCharacters .titleBox::after {
  position: absolute;
  top: -16px;
  display: inline-block;
  content: '';
  width: 100px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.helpCharacters .titleBox::after {
  top: inherit;
  bottom: -32px;
  background-position: center top;
}
.helpCharacters .titleBox::before {
  top: -12px;
  background-image: url('../images/pages/characters/help-title-top.png');
}
.helpCharacters .titleBox::after {
  bottom: -28px;
  background-image: url('../images/pages/characters/help-title-bottom.png');
}
.helpCharacters .contentBox {
  margin: 96px auto 0;
  padding: 0 32px 16px;
  text-align: justify;
  display: flex;
  max-width: 1188px;
  margin-top: 64px;
  justify-content: center;
}
.helpCharacters .contentBox .help {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.helpCharacters .contentBox .helpNames {
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 16px;
  font-size: 28px;
  text-align: center;
  font-family: 'introRust-Base';
}
.helpCharacters .contentBox .helpNames a {
  position: relative;
  margin: 0 8px;
  color: #ffffff;
  text-decoration: underline;
}
.navigationBottom {
  display: flex;
  padding: 24px 32px;
  font-size: 16px;
  font-family: 'introRust-Base';
  text-transform: uppercase;
  justify-content: space-between;
  background: #000000;
}
.navigationBottom .backToHomeList,
.navigationBottom .backToTop {
  position: relative;
  color: #ffffff;
  cursor: pointer;
}
.navigationBottom .backToHomeList {
  padding-left: 20px;
  text-decoration: none;
}
.navigationBottom .backToHomeList::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -8px;
  border-style: solid;
  border-width: 8px 16.4px 8px 0;
  border-color: transparent #ffd00d transparent transparent;
}
.navigationBottom .backToTop {
  display: inline-flex;
  padding-right: 20px;
}
.navigationBottom .backToTop::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -8px;
  border-style: solid;
  border-width: 0 8px 16.4px 8px;
  border-color: transparent transparent #ffd00d transparent;
}
.modal .msgModal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footerSite {
  display: flex;
  min-height: 128px;
  align-items: flex-end;
  color: #ffd00d;
  background: #000000;
}
.footerSite .socialNetwork {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footerSite .socialNetwork .linkSocialNetwork {
  width: 64px;
  height: 64px;
  margin: 16px;
  background-color: #ffd00d;
  border-radius: 32px;
}
.footerSite .creditsFooter {
  display: flex;
  margin-bottom: 32px;
  justify-content: center;
}
.footerSite .creditsFooter .copyrightsFooter {
  color: #ffd00d;
}