@charset "UTF-8";
/*MIXINS*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

@font-face {
  font-family: Action man;
  src: url(../assets/font/action_man/Action_Man.ttf); }

@font-face {
  font-family: Made soulmaze;
  src: url(../assets/font/made_soulmaze/soulmaze.otf); }

a {
  text-decoration: none; }

html {
  scroll-padding-top: calc(4.5rem - 1px); }

body {
  letter-spacing: 0.0625em;
  background-color: var(--color-background);
  font-family: var(--textos-font-family); }

h1 {
  text-align: center; }

:root {
  --textos-font-family: Action man;
  --titulo-font-family:Made soulmaze;
  --color-primary:#fffd51;
  --color-secundary:#ff6000;
  --color-font: rgb(232, 232, 232);
  --color-background:black; }

/*----- Preloader -----*/
#loading {
  height: 100vh; }

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9.375rem;
  height: 9.375rem;
  background: transparent;
  border: 0.1875rem solid #3c3c3c;
  border-radius: 50%;
  text-align: center;
  line-height: 9.375rem;
  font-family: sans-serif;
  font-size: 1.25rem;
  color: #fff000;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  text-shadow: 0 0 0.625rem #fff000;
  box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.5); }

.ring:before {
  content: '';
  position: absolute;
  top: -0.1875rem;
  left: -0.1875rem;
  width: 100%;
  height: 100%;
  border: 0.1875rem solid transparent;
  border-top: 0.1875rem solid #fff000;
  border-right: 0.1875rem solid #fff000;
  border-radius: 50%;
  animation: animateC 2s linear infinite; }

.loading_span {
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  width: 50%;
  height: 0.25rem;
  background: transparent;
  transform-origin: left;
  animation: animate 2s linear infinite; }

.loading_span:before {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff000;
  top: -0.375rem;
  right: -0.5rem;
  box-shadow: 0 0 1.25rem #fff000; }

@keyframes animateC {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes animate {
  0% {
    transform: rotate(45deg); }
  100% {
    transform: rotate(405deg); } }

/*----- TEXTOS -----*/
.h1 {
  font-size: 0px; }

/* -- Titulo -- */
.text--big {
  font-family: var(--titulo-font-family);
  color: var(--color-primary);
  font-size: 4rem;
  margin-bottom: 2rem;
  margin-left: -0.5rem;
  text-shadow: 0.1875rem 0.1875rem 0.125rem #0e0e0e;
  /*rgba(100, 100, 111, 0.2) 0rem 0.4375rem 1.8125rem 0rem;*/ }

.titulo {
  font-family: var(--titulo-font-family);
  font-size: 2.7rem;
  color: var(--color-primary);
  margin-bottom: 3rem;
  font-weight: 700;
  line-height: 6.875rem;
  text-align: center; }

.titulo_personajes {
  font-family: var(--titulo-font-family);
  font-size: 5rem;
  color: var(--color-primary);
  text-shadow: 3px 4px 8px #000000; }

/* -- Texto parrafos -- */
.textos-general {
  font-family: var(--textos-font-family);
  font-size: 1.4rem;
  text-align: start;
  max-width: 100%;
  margin: auto;
  color: var(--color-font);
  /* ------- 1110px ------*/
  /* ------- 991px ------*/
  /* ------- 850px ------*/
  /* ------- 490px ------*/
  /* ------- 420px ------*/
  /* ------- 350px ------*/ }
  @media (max-width: 1345px) {
    .textos-general {
      font-size: 1.2rem; } }
  @media (max-width: 991px) {
    .textos-general {
      font-size: 1.4rem; } }
  @media (max-width: 850px) {
    .textos-general {
      font-size: 1.6rem; } }
  @media (max-width: 850px) {
    .textos-general {
      font-size: 16px; } }
  @media (max-width: 420px) {
    .textos-general {
      font-size: 16px; } }
  @media (max-width: 350px) {
    .textos-general {
      font-size: 13px; } }

/* -- Texto voz -- */
.text--sub {
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-top: 1rem;
  text-align: justify;
  font-family: var(--textos-font-family); }
  @media (max-width: 998px) {
    .text--sub {
      margin-top: 1.5rem; } }

.amarillo {
  color: var(--color-primary); }

/* ------------ MENU ----------*/
.logo img {
  width: 12rem;
  /* ------- 991px ------*/ }
  @media (max-width: 991px) {
    .logo img {
      width: 14rem; } }

/*Background y color*/
#mainNav {
  min-height: 3.5rem;
  background-color: #000000;
  padding: 0rem 2rem 0rem 2rem;
  /* ------- 991px ------*/ }
  #mainNav:hover {
    background-color: #000000; }
  @media (max-width: 991px) {
    #mainNav {
      padding: 0rem; } }

/*Menu hamburguesa*/
#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.75rem;
  color: #ffffff;
  border: 1px solid #bcbbbb; }

#mainNav .navbar-toggler:focus {
  outline: none; }

/*Menu complemento*/
#mainNav .navbar-brand {
  color: #000;
  font-weight: 700;
  padding: 0.9rem 0; }

#mainNav .navbar-nav .nav-item:hover {
  color: fade(#fff, 80%);
  outline: none;
  background-color: transparent; }

#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
  outline: none;
  background-color: transparent; }

@media (min-width: 992px) {
  #mainNav {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out; }
  #mainNav .navbar-brand {
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.5); }
  /*Menu link color ytamaño letra*/
  #mainNav .nav-link {
    transition: none;
    padding: 2rem 1.5rem;
    color: white;
    font-size: 1.3rem; }
  #mainNav .nav-link:hover {
    color: rgba(255, 255, 255, 0.75); }
  #mainNav .nav-link:active {
    color: #fff; }
  /*Menu color scroll*/
  #mainNav.navbar-shrink {
    background: linear-gradient(0deg, black 0%, #101011 0%, black 100%); }
  #mainNav.navbar-shrink .navbar-brand {
    color: white; }
  #mainNav.navbar-shrink .nav-link {
    color: white;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 0.25rem solid transparent; }
  #mainNav .nav-link:hover {
    color: white; }
  #mainNav.navbar-shrink .nav-link:hover {
    color: var(--color-primary); }
  #mainNav.navbar-shrink .nav-link:active {
    color: var(--color-primary); }
  #mainNav.navbar-shrink .nav-link.active {
    color: var(--color-primary);
    outline: none;
    border-bottom: 0.25rem solid var(--color-primary); } }

@media (max-width: 991px) {
  .nav-item {
    padding: 1rem;
    border-bottom: solid #0d0d0d; }
  .nav-link {
    color: var(--color-font);
    font-size: 16px;
    padding-top: 1.5rem; }
  .nav-link:hover {
    color: var(--color-primary); } }

/*Link queda activo dependiendo de la pagina donde se encuentre*/
.link_activo {
  color: yellow;
  font-size: 1.3rem; }
  @media (max-width: 998px) {
    .link_activo {
      font-size: 16px; } }

/* -------------- Footer -------------*/
.footerPages {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000000;
  padding: 3rem; }
  .footerPages .footerLogo {
    width: 18rem; }
    .footerPages .footerLogo img {
      width: 100%; }

.footer_index {
  margin-top: 3rem;
  margin-bottom: 6rem; }

/*---Botones con los iconos de las redes----*/
.war-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; }

.war-btn button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  margin: 0 2.5rem;
  font-size: 3rem;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  transition: 0.2s; }

.war-btn button:hover {
  font-size: 3.5rem;
  transform: scale(1.09);
  background-color: #ff8000; }

@keyframes pulse {
  0% {
    opacity: 0;
    transform: scale(0); }
  20% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.war-btn button::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  z-index: -1;
  animation: pulse 1.5s infinite;
  transform: scale(1.5);
  font-size: 3rem; }

.bg1, .bg1::before {
  background: var(--color-secundary); }

.bg3, .bg3::before {
  background: var(--color-secundary); }

.bg5, .bg5::before {
  background: var(--color-secundary); }

.me {
  margin: 1.5625rem;
  text-align: center;
  font-family: sans-serif; }

.me a {
  font-size: 0.9375rem;
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  background: #010101;
  padding: 0.625rem;
  border-radius: 0.5rem;
  transition: all 0.3s; }

.me a:hover {
  color: #fff;
  background: #FFA200;
  transition: all easy 0.3s; }

/* ------- 1350px ------*/
@media (max-width: 1350px) {
  .footer_index {
    margin-top: 1rem;
    margin-bottom: 4rem; }
  .svg-inline--fa {
    font-size: 3rem; } }

/* ------- 1200px ------*/
@media (max-width: 1200px) {
  .footer_index {
    margin-top: 1rem;
    margin-bottom: 4rem; } }

/* ------- 991px ------*/
@media (max-width: 991px) {
  .footer_index {
    margin-top: 2rem; } }

/* ------- 850px ------*/
@media (max-width: 850px) {
  .botones_pages {
    margin-top: 3rem; }
  .footerPages {
    display: flex;
    flex-direction: column; } }

/* ------- 300px ------*/
@media (max-width: 300px) {
  .footer_index {
    flex-wrap: nowrap; } }

/*Spinner*/
/* -------------- Portada --------------- */
.portada-container {
  height: 100vh;
  width: 100vw;
  border-bottom: solid black;
  overflow: hidden;
  /* ------- 850px ------*/ }
  @media (max-width: 850px) {
    .portada-container {
      height: 84vh; } }
  .portada-container .portada-img {
    background: url(../assets/portadas/portada_home.jpg);
    background-size: cover;
    animation: background-move 5s  linear alternate;
    height: 100vh;
    /* ------- 1350 ------ */
    /* ------- 850px ------*/ }
    @media (max-width: 1350px) {
      .portada-container .portada-img {
        background-size: cover;
        background-position: center;
        height: 90vh; } }
    @media (max-width: 850px) {
      .portada-container .portada-img {
        background: url(../assets/portadas/portada_home_responsive.jpg);
        background-size: cover;
        background-position: center;
        animation: background-move 5s  linear alternate;
        height: 80vh; } }

@keyframes background-move {
  0% {
    transform: scale(1.5, 1.5); }
  50% {
    transform: scale(1, 1); }
  100% {
    transform: scale(1, 1); } }
    .portada-container .portada-img .portada-sombra {
      height: 100vh;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.415) 75%, #000 100%);
      display: flex;
      justify-content: center;
      align-items: end;
      padding-bottom: 3rem;
      /* ------- 850px ------*/ }
      @media (max-width: 850px) {
        .portada-container .portada-img .portada-sombra {
          height: 80vh; } }
      .portada-container .portada-img .portada-sombra .portada-caja_container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        --animate-duration: 8s; }
        .portada-container .portada-img .portada-sombra .portada-caja_container p {
          font-family: var(--textos-font-family);
          font-size: 1.4rem;
          line-height: 2rem;
          text-align: center;
          max-width: 100%;
          margin: auto;
          color: var(--color-font);
          text-shadow: #090000 0.1em 0.1em 0.2em; }
        .portada-container .portada-img .portada-sombra .portada-caja_container img {
          width: 43.75rem;
          /* ------- 850px ------*/ }
          @media (max-width: 850px) {
            .portada-container .portada-img .portada-sombra .portada-caja_container img {
              width: 30rem; } }

/* ------------------ Trailer ------------------ */
.trailer-section {
  padding: 4rem 5rem 8rem 5rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 13, 18, 0.7) 75%, #000000 100%);
  /* ------- 1200 ------ */
  /* ------- 420px ------*/
  /* ------- 350px ------*/ }
  @media (max-width: 1200px) {
    .trailer-section {
      width: 100%; } }
  @media (max-width: 420px) {
    .trailer-section {
      padding: 4rem 5rem 7rem 5rem; } }
  @media (max-width: 350px) {
    .trailer-section {
      padding: 4rem 5rem 4rem 5rem; } }
  .trailer-section .trailer-container {
    margin: auto;
    /*--- Iframe video --*/ }
    .trailer-section .trailer-container .video {
      height: 70vh;
      width: 80vw;
      padding-top: 3rem;
      /* ------- 1200 ------ */
      /* ------- 991px ------*/
      /* ------- 850px ------*/
      /* ------- 420px ------*/
      /* ------- 350px ------*/
      /* ------- 300px ------*/ }
      .trailer-section .trailer-container .video iframe {
        width: 100%;
        height: 100%; }
      @media (max-width: 1200px) {
        .trailer-section .trailer-container .video {
          height: 60vh;
          width: 100%; } }
      @media (max-width: 991px) {
        .trailer-section .trailer-container .video {
          height: 45vh; } }
      @media (max-width: 850px) {
        .trailer-section .trailer-container .video {
          height: 40vh; } }
      @media (max-width: 420px) {
        .trailer-section .trailer-container .video {
          height: 30vh;
          width: 100%; } }
      @media (max-width: 350px) {
        .trailer-section .trailer-container .video {
          padding-top: 0rem;
          height: 25vh; } }
      @media (max-width: 300px) {
        .trailer-section .trailer-container .video {
          height: 18vh; } }

/* ------------------- Banner -------------------*/
.imgbanner img {
  width: 100vw; }

/* ---------------------- Sinopsis ---------------------- */
.sinopsis-section {
  padding: 0rem 3rem 5rem 3rem;
  background: linear-gradient(to bottom, black 0%, rgba(15, 15, 15, 0.415) 75%, #000000 100%);
  color: var(--color-font); }
  .sinopsis-section .sinopsis_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 6rem;
    text-align: center;
    padding-top: 4rem;
    /* ------- 991px ------*/
    /* ------- 490px ------*/
    /* BOTONES (leer comic/ver serie) */
    /* ------- 850 ------*/ }
    @media (max-width: 991px) {
      .sinopsis-section .sinopsis_container {
        margin-top: 6rem; } }
    @media (max-width: 490px) {
      .sinopsis-section .sinopsis_container {
        margin-top: 5rem; } }
    .sinopsis-section .sinopsis_container .sinopsis-caja {
      width: 45vw;
      padding-top: 4rem;
      /* ------- 850px ------*/ }
      @media (max-width: 850px) {
        .sinopsis-section .sinopsis_container .sinopsis-caja {
          padding-top: 0rem;
          width: 100%; } }
      .sinopsis-section .sinopsis_container .sinopsis-caja .sinopsis_texto-container {
        margin-bottom: 4rem;
        padding: 0rem 2rem 0rem 2rem;
        /* ------- 1200 ------*/ }
        @media (max-width: 1200px) {
          .sinopsis-section .sinopsis_container .sinopsis-caja .sinopsis_texto-container {
            padding: 0rem 1rem 0rem 1rem; } }
    .sinopsis-section .sinopsis_container .sinopsis_texto-container2 {
      padding: 0rem 2rem 0rem 2rem; }
    .sinopsis-section .sinopsis_container .nuevo_boton {
      display: flex;
      justify-content: space-between;
      padding: 2rem; }
      .sinopsis-section .sinopsis_container .nuevo_boton .boton_a {
        width: 40%;
        /*Codigo botones*/ }
    .sinopsis-section .sinopsis_container .sinopsis-img {
      width: 45vw;
      display: flex;
      justify-content: center;
      align-items: center;
      /* ------- 850px ------*/
      /* ------- 420px ------*/ }
      @media (max-width: 850px) {
        .sinopsis-section .sinopsis_container .sinopsis-img {
          width: 100vw;
          height: 40%;
          margin-top: 4rem; } }
      @media (max-width: 420px) {
        .sinopsis-section .sinopsis_container .sinopsis-img {
          margin-top: 4rem; } }
    .sinopsis-section .sinopsis_container .sinopsis-img1 {
      width: 80%;
      height: 100%;
      -webkit-transition: all .9s ease;
      /* Safari y Chrome */
      -moz-transition: all .9s ease;
      /* Firefox */
      -o-transition: all .9s ease;
      /* IE 9 */
      -ms-transition: all .9s ease;
      /* Op
      /* ------- 850px ------*/
      /* ------- 420px ------*/ }
      @media (max-width: 850px) {
        .sinopsis-section .sinopsis_container .sinopsis-img1 {
          width: 50%; } }
      @media (max-width: 420px) {
        .sinopsis-section .sinopsis_container .sinopsis-img1 {
          width: 60%; } }
      .sinopsis-section .sinopsis_container .sinopsis-img1:hover {
        -webkit-transform: scale(1.09);
        -moz-transform: scale(1.09);
        -ms-transform: scale(1.09);
        -o-transform: scale(1.09);
        transform: scale(1.09); }
    .sinopsis-section .sinopsis_container .poster_responsive {
      display: none; }
      @media (max-width: 850px) {
        .sinopsis-section .sinopsis_container .poster_responsive {
          display: block; } }
    @media (max-width: 850px) {
      .sinopsis-section .sinopsis_container .poster_none {
        display: none; } }

.bubbly-button {
  text-shadow: #090000 0.1em 0.1em 0.2em;
  font-family: var(--textos-font-family);
  display: inline-block;
  font-size: 1.3em;
  padding: .8em;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ff6200e5;
  color: #fff;
  border-radius: 4px;
  border: solid #fffc5145;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(255, 145, 1, 0.621); }
  .bubbly-button:hover {
    background-color: #ff8000; }
  .bubbly-button:focus {
    outline: 0; }
  .bubbly-button:before, .bubbly-button:after {
    position: absolute;
    content: '';
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat; }
  .bubbly-button:before {
    display: none;
    top: -75%;
    background-image: radial-gradient(circle, var(--color-secundary) 20%, transparent 20%), radial-gradient(circle, transparent 20%, var(--color-secundary) 20%, transparent 30%), radial-gradient(circle, var(--color-secundary) 20%, transparent 20%), radial-gradient(circle, var(--color-secundary) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--color-secundary) 15%, transparent 20%), radial-gradient(circle, var(--color-secundary) 20%, transparent 20%), radial-gradient(circle, var(--color-secundary) 20%, transparent 20%), radial-gradient(circle, var(--color-secundary) 20%, transparent 20%), radial-gradient(circle, var(--color-secundary) 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%; }
  .bubbly-button:after {
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle, var(--color-secundary) 20%, transparent 20%), radial-gradient(circle, var(--color-secundary) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--color-secundary) 15%, transparent 20%), radial-gradient(circle, var(--color-secundary) 20%, transparent 20%), radial-gradient(circle, var(--color-secundary) 20%, transparent 20%), radial-gradient(circle, var(--color-secundary) 20%, transparent 20%), radial-gradient(circle, var(--color-secundary) 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%; }
  .bubbly-button:active {
    transform: scale(0.9);
    box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2); }

.bubbly-button.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards; }

.bubbly-button.animat:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards; }

@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%; } }

@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%; } }

/*Dissable*/
.bubbly-button-dissable {
  text-shadow: #090000 0.1em 0.1em 0.2em;
  font-family: var(--textos-font-family);
  text-align: center;
  display: inline-block;
  font-size: 1.3em;
  padding: .8em;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fb8a44e5;
  color: #fff;
  border-radius: 4px;
  border: solid #fffc5145;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(255, 145, 1, 0.621); }

/* ---------------------- REDES -----------------------*/
.section-redes {
  margin-top: 4rem;
  /* ------- 1200 ------*/
  /*imagen responsive de redes (se oculta en desktop, se activa en responsive)*/ }
  .section-redes .redes_mail {
    color: white;
    text-align: center;
    margin: .5rem; }
  @media (max-width: 1200px) {
    .section-redes {
      margin-top: 4rem; } }
  .section-redes .redes-img-bg {
    height: 100vh;
    margin-top: 4rem;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.154) 0%, rgba(0, 0, 0, 0.035) 75%, #000000e4 100%), url(../../assets/home/redes-img.jpg);
    background-size: cover;
    display: flex;
    justify-content: end;
    align-items: self-start;
    /* ------- 1200 ------*/
    /* ------- 420 ------*/ }
    @media (max-width: 1200px) {
      .section-redes .redes-img-bg {
        margin-top: 0rem;
        background: #000;
        height: 40vh; } }
    @media (max-width: 420px) {
      .section-redes .redes-img-bg {
        height: 22vh; } }
    .section-redes .redes-img-bg .caja_redes {
      display: flex;
      justify-content: center;
      flex-direction: column;
      width: 40%;
      padding-top: 1rem;
      /* ------- 1200 ------*/
      /*---Logo Shirox redes----*/ }
      @media (max-width: 1200px) {
        .section-redes .redes-img-bg .caja_redes {
          align-items: center;
          width: 100%;
          padding-top: 2rem; } }
      @media (max-width: 420px) {
        .section-redes .redes-img-bg .caja_redes {
          padding-top: 0rem; }
          .section-redes .redes-img-bg .caja_redes p {
            font-size: 1.3rem; } }
      .section-redes .redes-img-bg .caja_redes .img_shirox {
        margin: auto;
        width: 30vw;
        /* ------- 1200px ------*/ }
        @media (max-width: 1200px) {
          .section-redes .redes-img-bg .caja_redes .img_shirox {
            width: 25vw; } }
  .section-redes .redes-img_rsp {
    display: none;
    /* ------- 1200 ------*/ }
    @media (max-width: 1200px) {
      .section-redes .redes-img_rsp {
        height: 68%;
        display: block; }
        .section-redes .redes-img_rsp img {
          height: 100%;
          width: 100%; } }

/*---- Personajes seccion ------*/
.textos-personajes {
  font-size: 1.3rem;
  color: white; }

.portada_personajes {
  height: 100vh;
  width: 100vw;
  overflow: hidden; }
  .portada_personajes .portada_personajes-img {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.415) 75%, #000 100%), url(../assets/portadas/portada_personajes.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
    animation: background-move 5s  linear alternate;
    display: flex;
    justify-content: center;
    align-items: center; }
    .portada_personajes .portada_personajes-img .portada_personajes-textos .container {
      display: flex;
      justify-content: center; }
    .portada_personajes .portada_personajes-img .portada_personajes-textos .chevron {
      position: absolute;
      width: 2.1rem;
      height: 0.48rem;
      bottom: -10rem;
      opacity: 0;
      transform: scale(0.3);
      animation: move-chevron 3s ease-out infinite; }
    .portada_personajes .portada_personajes-img .portada_personajes-textos .chevron:first-child {
      animation: move-chevron 3s ease-out 1s infinite; }
    .portada_personajes .portada_personajes-img .portada_personajes-textos .chevron:nth-child(2) {
      animation: move-chevron 3s ease-out 2s infinite; }
    .portada_personajes .portada_personajes-img .portada_personajes-textos .chevron:before,
    .portada_personajes .portada_personajes-img .portada_personajes-textos .chevron:after {
      content: '';
      position: absolute;
      top: 0;
      height: 100%;
      width: 50%;
      background: #ffffff; }
    .portada_personajes .portada_personajes-img .portada_personajes-textos .chevron:before {
      left: 0;
      transform: skewY(30deg); }
    .portada_personajes .portada_personajes-img .portada_personajes-textos .chevron:after {
      right: 0;
      width: 50%;
      transform: skewY(-30deg); }

@keyframes move-chevron {
  25% {
    opacity: 1; }
  33.3% {
    opacity: 1;
    transform: translateY(2.28rem); }
  66.6% {
    opacity: 1;
    transform: translateY(3.12rem); }
  100% {
    opacity: 0;
    transform: translateY(4.8rem) scale(0.5); } }

/*------------------- Slider ------------------*/
.slider_container {
  position: relative;
  min-height: 100vh; }

/*- Botones con personajes para mover slider -*/
.slider_botones {
  display: flex;
  width: 100%;
  justify-content: center; }

.slider__navi {
  position: absolute;
  display: flex;
  justify-content: space-around;
  top: 90%;
  width: 60%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  z-index: 999; }

.slider__navi a {
  display: block;
  height: 6.25rem;
  border-radius: 100%;
  width: 6.25rem;
  margin: 1.875rem 0;
  text-indent: -624.9375rem;
  box-shadow: none;
  border: none;
  background-image: url(../assets/personajes/marcos_personaje.jpg);
  background-size: contain; }

.slider__navi a:nth-child(2) {
  background-image: url(../assets/personajes/randal_personaje.jpg); }

.slider__navi a:nth-child(3) {
  background-image: url(../assets/personajes/vale_personaje.jpg); }

.slider__navi a:nth-child(4) {
  background-image: url(../assets/personajes/roby_personaje.jpg); }

.slider__navi a:nth-child(5) {
  background-image: url(../assets/personajes/victor_personaje.jpg); }

.slider__navi a:nth-child(6) {
  background-image: url(../assets/personajes/kuren_personaje.jpg); }

.slider__navi a:nth-child(7) {
  background-image: url(../assets/personajes/chicaParaguas_personaje.jpg); }

.slider__navi a.active {
  border: solid white;
  box-shadow: rgba(0, 0, 0, 0.56) 0rem 1.375rem 4.375rem 0.25rem; }

/*----- Contenedores de personajes ----*/
.flex__container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  height: 100vh;
  width: 100%;
  z-index: 1; }

.flex__container.flex--active {
  z-index: 2; }

/*--------- Textos ---------*/
/* -- Nombre difuminado -- */
.text__background {
  font-family: var(--titulo-font-family);
  position: absolute;
  left: 64px;
  bottom: -3.75rem;
  color: rgba(0, 0, 0, 0.05);
  font-size: 144px;
  font-weight: 700; }

/*------------- Flex items-----------*/
.flex__item {
  height: 100vh;
  color: rgba(255, 255, 255, 0.696);
  transition: transform 0.1s linear; }

.flex__item--left {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  width: 65%;
  transform-origin: left bottom;
  transition: transform 0.1s linear 0.4s;
  opacity: 0;
  position: relative;
  overflow: hidden; }

.flex__item--right {
  width: 35%;
  transform-origin: right center;
  transition: transform 0.1s linear 0s;
  opacity: 0; }

.flex--preStart .flex__item--left,
.flex--preStart .flex__item--right,
.flex--active .flex__item--left,
.flex--active .flex__item--right {
  opacity: 1; }

/*--------- Colores cajas de los personajes --------*/
/* --- Marcos --- */
.flex--marcos .flex__item--left {
  background: #d15a1f; }

.flex--marcos .flex__item--right {
  background: #000000; }

/* --- Randal  ---*/
.flex--randal .flex__item--left {
  background: #a27709; }

.flex--randal .flex__item--right {
  background: #020202; }

/* --- Vale --- */
.flex--vale .flex__item--left {
  background: #791d65; }

.flex--vale .flex__item--right {
  background: #020202; }

/* --- Roby ---*/
.flex--roby .flex__item--left {
  background: #476089; }

.flex--roby .flex__item--right {
  background: #020202; }

/* --- Victor ---*/
.flex--victor .flex__item--left {
  background: #8e0702; }

.flex--victor .flex__item--right {
  background: #020202; }

/* --- Kuren --- */
.flex--kuren .flex__item--left {
  background: #02798e; }

.flex--kuren .flex__item--right {
  background: #020202; }

/* --- NUEVO --- */
.flex--nuevo .flex__item--left {
  background: #e10b1d; }

.flex--nuevo .flex__item--right {
  background: #020202; }

/*---------- Imagenes -----------*/
.flex__content {
  margin-left: 5rem;
  width: 55%;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 0.2s linear 0.2s, opacity 0.1s linear 0.2s; }

.personajes_img {
  position: absolute;
  bottom: 11rem;
  right: 15%;
  box-shadow: rgba(0, 0, 0, 0.25) 0rem 3.375rem 3.4375rem, rgba(0, 0, 0, 0.12) 0rem -0.75rem 1.875rem, rgba(0, 0, 0, 0.12) 0rem 0.25rem 0.375rem, rgba(0, 0, 0, 0.17) 0rem 0.75rem 0.8125rem, rgba(0, 0, 0, 0.09) 0rem -0.1875rem 0.3125rem;
  max-height: 35vw;
  border-radius: 100%;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.43s 0.6s, transform 0.4s 0.65s cubic-bezier(0, 0.88, 0.4, 0.93); }

/* Animate-START point */
.flex__container.animate--start .flex__content {
  transform: translate3d(0, -200%, 0);
  opacity: 0; }

.flex__container.animate--start .personajes_img {
  transform: translate3d(-12.5rem, 0, 0);
  opacity: 0; }

/* Animate-END point */
.flex__container.animate--end .flex__item--left {
  transform: scaleY(0); }

.flex__container.animate--end .flex__item--right {
  transform: scaleX(0); }

.flex__container.animate--end .flex__content {
  transform: translate3d(0, 200%, 0);
  opacity: 0; }

.flex__container.animate--end .personajes_img {
  transform: translate3d(12.5rem, 0, 0);
  opacity: 0; }

.personajes_responsive {
  display: none; }

/* ---------------------------- Media queries -------------------------- */
/* ------- 1374 ------ */
@media (max-width: 1374px) {
  /*img slider*/
  .personajes_img {
    bottom: 15.375rem; }
  /* Footer*/
  .footerPages .redesContainer {
    width: 35%; } }

/* ------- 1346 ------ */
@media (max-width: 1346px) {
  /*  --- Silder --- */
  .slider_container {
    min-height: 82vh; }
  .flex__container {
    height: 82vh; }
  .flex__item {
    height: 82vh; }
  /*img slider*/
  .personajes_img {
    bottom: 10.375rem; } }

/* ------- 1100 ------ */
@media (max-width: 1120px) {
  .textos-personajes {
    font-size: 1.2rem; }
  /*img slider*/
  .personajes_img {
    bottom: 13.375rem; }
  /*Slider botones*/
  .slider__navi {
    width: 65%; } }

/* ------- 998 ------ */
@media (max-width: 998px) {
  .textos-personajes {
    font-size: 1.5rem;
    text-align: center; }
  .slider_container {
    display: none; }
  /*Personajes*/
  .personajes_responsive {
    display: block; }
    .personajes_responsive .personajes_responsive-cajas {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5rem 8rem;
      box-shadow: rgba(0, 0, 0, 0.25) 0rem 3.375rem 3.4375rem, rgba(0, 0, 0, 0.12) 0rem -0.75rem 1.875rem, rgba(0, 0, 0, 0.12) 0rem 0.25rem 0.375rem, rgba(0, 0, 0, 0.17) 0rem 0.75rem 0.8125rem, rgba(0, 0, 0, 0.09) 0rem -0.1875rem 0.3125rem; }
      .personajes_responsive .personajes_responsive-cajas img {
        height: 25rem;
        border-radius: 100%;
        margin-bottom: 5rem;
        margin-top: 2rem;
        box-shadow: rgba(0, 0, 0, 0.25) 0rem 3.375rem 3.4375rem, rgba(0, 0, 0, 0.12) 0rem -0.75rem 1.875rem, rgba(0, 0, 0, 0.12) 0rem 0.25rem 0.375rem, rgba(0, 0, 0, 0.17) 0rem 0.75rem 0.8125rem, rgba(0, 0, 0, 0.09) 0rem -0.1875rem 0.3125rem; }
      .personajes_responsive .personajes_responsive-cajas .text--normal {
        font-size: 1.5rem; }
      .personajes_responsive .personajes_responsive-cajas .text--sub {
        font-size: 1.5rem;
        color: var(--color-primary); } }

/* ------- 850px ------*/
@media (max-width: 850px) {
  .personajes_responsive .personajes_responsive-cajas {
    padding: 5rem; } }

/* ------- 690px ------*/
@media (max-width: 690px) {
  .portada_personajes {
    height: 100vh; }
    .portada_personajes .portada_personajes-img {
      height: 100%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.415) 75%, #000 100%), url(../assets/personajes_responsive.jpeg);
      background-size: cover;
      background-position: center; }
      .portada_personajes .portada_personajes-img .portada_personajes-textos .titulo_personajes {
        display: none; }
      .portada_personajes .portada_personajes-img .portada_personajes-textos .container {
        display: none; } }

/* ------- 490px ------*/
@media (max-width: 490px) {
  .portada_personajes {
    height: 80vh; }
  .personajes_responsive .personajes_responsive-cajas {
    padding: 5rem 3rem; }
  .text--big {
    font-size: 4rem; } }

/* ------- 390px ------*/
@media (max-width: 390px) {
  .portada_personajes {
    height: 80vh; } }

.portada_especiales {
  height: 350px;
  width: 1440px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../../assets/banner_transformado.png); }

.texto_especiales {
  font-size: 1.2rem; }

.especiales_section {
  padding: 4.5rem;
  background-image: url(../assets/desenfocada/image1.jpg);
  background-size: cover;
  background-position: center; }

.especiales_article {
  display: flex;
  justify-content: space-between;
  border-radius: 16px;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.466);
  margin-bottom: 4rem;
  margin-top: 6rem; }
  .especiales_article .especiales_img {
    border-radius: 16px;
    padding: 2rem;
    color: #c1c1c1;
    background-color: rgba(0, 0, 0, 0.868);
    width: 35%; }
    .especiales_article .especiales_img img {
      width: 100%;
      height: auto;
      border-radius: 16px;
      margin-bottom: 2rem; }
    .especiales_article .especiales_img .especiales_textos-fichaTecnica {
      list-style: none;
      font-size: 16px;
      padding: 0; }
      .especiales_article .especiales_img .especiales_textos-fichaTecnica .especiales_textos-fichaTitulo {
        font-weight: 800;
        color: #cccccc; }
      .especiales_article .especiales_img .especiales_textos-fichaTecnica .especiales_textos-fichaSpan {
        font-weight: 800;
        color: #cccccc; }
  .especiales_article .especiales_article-text {
    padding: 4rem;
    background-color: rgba(0, 0, 0, 0.868);
    width: 62%;
    border-radius: 16px; }
    .especiales_article .especiales_article-text .h2_especiales {
      font-family: Made soulmaze;
      color: #fffd51;
      font-size: 2.5rem;
      margin-bottom: 4rem; }
    .especiales_article .especiales_article-text .especiales_textos .especiales_textos-sinopsis {
      color: white;
      margin-bottom: 2rem; }
      .especiales_article .especiales_article-text .especiales_textos .especiales_textos-sinopsis p {
        text-align: left; }

.especiales_img-responsive {
  border-radius: 16px;
  padding: 2rem;
  color: #c1c1c1;
  background-color: rgba(0, 0, 0, 0.868);
  width: 100%;
  display: none; }
  .especiales_img-responsive img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    margin-bottom: 2rem; }

/* ---------------------------- Media queries -------------------------- */
/* ------- 998 ------ */
@media (max-width: 998px) {
  .especiales_section {
    padding: .5rem; }
  .especiales_article {
    flex-wrap: wrap;
    margin: 4rem 2rem 2rem;
    background-color: black;
    padding: 0rem; }
  .especiales_article .especiales_article-text {
    width: 100%; }
  .especiales_article .especiales_img {
    display: flex;
    justify-content: center;
    width: 100%; }
    .especiales_article .especiales_img img {
      width: 40%;
      margin-bottom: 0rem; }
    .especiales_article .especiales_img .especiales_textos-fichaTecnica {
      margin-left: 3rem; } }

/* ------- 690px ------*/
@media (max-width: 690px) {
  .especiales_article .especiales_article-text {
    padding: 2rem; } }

/* ------- 490px ------*/
@media (max-width: 490px) {
  .especiales_article {
    padding: 0rem;
    margin: 1rem 0rem; }
  .especiales_section {
    padding: 2rem; }
  .texto_especiales {
    font-size: 1.5rem; }
  .especiales_article .especiales_img .especiales_textos-fichaTecnica {
    font-size: 1.5rem; }
    .especiales_article .especiales_img .especiales_textos-fichaTecnica .especiales_textos-fichaTitulo {
      font-size: 1.5rem; }
  .especiales_article .especiales_img .especiales_textos-fichaTecnica .especiales_textos-fichaSpan {
    font-size: 1.5rem; } }

/* ------- 390px ------*/
@media (max-width: 390px) {
  .texto_especiales {
    font-size: 1.3rem; }
  .especiales_textos-fichaTecnica li {
    font-size: 1.3rem; } }

.capitulos_portada {
  height: 20vh;
  background-color: rgba(134, 132, 132, 0.519);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black; }

.capitulos_listado {
  background-image: url(../assets/desenfocada/image1.jpg);
  background-size: cover;
  background-position: center;
  padding: 4.5rem; }

.capitulos_listado-container {
  display: flex;
  justify-content: space-around;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.466);
  border-radius: 1 rem;
  margin-top: 6rem; }
  .capitulos_listado-container .descripcion_cap {
    background-color: rgba(0, 0, 0, 0.938);
    color: white;
    width: 25rem;
    border-radius: 4px;
    padding: 2.5rem;
    height: 46.875rem; }
    .capitulos_listado-container .descripcion_cap img {
      width: 100%;
      margin-bottom: 3rem; }
    .capitulos_listado-container .descripcion_cap p {
      text-align: left; }

.titulo_card-cap {
  color: white;
  font-size: 1.6rem;
  line-height: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem; }

.small {
  font-size: 1.0625rem;
  line-height: 1.25rem;
  color: white;
  text-align: none; }

.cardiflex {
  display: flex; }

.card1 {
  display: block;
  position: relative;
  max-width: 800px;
  background-color: #000000;
  border-radius: 0.25rem;
  padding: 1.375rem 0.875rem;
  margin: 0rem 0.75rem 0.75rem 0.75rem;
  text-decoration: none;
  z-index: 0;
  overflow: hidden; }
  .card1 img {
    width: 10rem;
    height: 10rem; }
  .card1 .card1_text {
    margin-left: 2rem;
    width: 30rem;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .card1 .card1_text p {
      color: #ff6000;
      font-size: 1.4rem; }
  .card1:hover {
    background: #ff62008f; }
  .card1:hover p {
    color: #000000; }
  .card1:hover img {
    transform: scale(1.2); }

.card1:hover .small {
  transition: all 0.3s ease-out;
  color: rgba(255, 255, 255, 0.8); }

.card1:hover .titulo_card-cap {
  transition: all 0.3s ease-out;
  color: #ffffff; }

/* ------- MEDIA QUERIES ------*/
@media (max-width: 1070px) {
  .capitulos_listado {
    padding: 6rem 0 0 0; }
  .capitulos_listado-container {
    margin-top: 0rem; } }

@media (max-width: 990px) {
  .capitulos_listado {
    padding: 0; }
  .capitulos_listado-container {
    flex-wrap: wrap-reverse; }
  .capitulos_listado-container .descripcion_cap {
    width: 100%;
    height: 0%;
    display: flex;
    margin-bottom: 2rem; }
    .capitulos_listado-container .descripcion_cap img {
      margin-bottom: 0rem;
      width: 30vw;
      height: 100%; }
    .capitulos_listado-container .descripcion_cap .descripcion_cap-textos {
      margin-left: 3rem; }
      .capitulos_listado-container .descripcion_cap .descripcion_cap-textos p {
        font-size: 1.2rem; }
  .card1 {
    max-width: 100%; }
    .card1 .card1_text {
      width: 100%;
      max-width: 100vw; }
  .capitulos_listado-cap {
    width: 100%; } }

@media (max-width: 700px) {
  .capitulos_listado-container .descripcion_cap {
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.9rem; }
    .capitulos_listado-container .descripcion_cap .descripcion_cap-textos {
      text-align: center;
      margin-top: 2rem;
      margin-left: 0rem; }
  .card1 {
    padding: 1rem; }
    .card1 .card1_text {
      width: 100%;
      max-width: 100vw; } }

@media (max-width: 420px) {
  .capitulos_listado-container .descripcion_cap .descripcion_cap-textos p {
    font-size: 1.6rem;
    text-align: center;
    margin: 1rem; }
  .capitulos_listado-container .descripcion_cap .descripcion_cap-textos h3 {
    font-size: 2.5rem; }
  .capitulos_listado-container .descripcion_cap img {
    margin-bottom: 0rem;
    width: 50vw;
    height: 100%; }
  .titulo_card-cap {
    font-size: 1.8rem;
    line-height: 2rem; }
  .small {
    font-size: 1.3rem; } }

.capitulosGenHeader {
  padding: 1rem 2.5rem;
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #131313; }
  .capitulosGenHeader .capitulosGenHeader-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    color: white; }
    .capitulosGenHeader .capitulosGenHeader-div h1 {
      font-size: 1.4rem; }
  .capitulosGenHeader .capitulos_flechaBack {
    color: white;
    font-size: 1.875rem; }
    .capitulosGenHeader .capitulos_flechaBack:hover {
      transform: translateX(-10px); }

.capitulosGenerales_sectionContainer {
  margin-top: 0.625rem; }
  .capitulosGenerales_sectionContainer .pagina {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1f1f1f; }
    .capitulosGenerales_sectionContainer .pagina img {
      height: 100%; }

/* Botonera*/
.botonera_slider {
  overflow: hidden;
  position: fixed;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.894);
  padding: .5rem 0px; }

.botonera_slider-container {
  display: flex;
  transition: transform 0.5s ease-in-out; }

.botonera_slider-caja {
  flex-shrink: 0;
  width: 100%; }

.botonera_slider-lista {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

/* PAGINATION */
.pagination {
  display: flex;
  text-align: center;
  justify-content: center;
  user-select: none; }

.pagination li {
  padding: 1.1875rem;
  font-size: 1.125rem;
  background-color: #303030;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.3em;
  box-shadow: 0 0.3125rem 1.5625rem rgba(1, 1, 1, 0.3);
  text-decoration: none;
  color: #fff; }

.pagination .btn-pag {
  color: black;
  background-color: #dd7e43;
  border-radius: 6.25rem;
  cursor: pointer;
  width: 2rem;
  height: 2rem; }

.pagination .btn-pag:hover {
  transform: translateX(5px); }

.current-page {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  text-decoration: none; }

.current-page:hover,
.dots:hover {
  transform: translateY(-5px); }

.pagination .link-active {
  background: #ff6000; }

.pagination li.disable {
  background: #ccc; }

.fa-arrow-right {
  font-size: 1rem; }

.fa-arrow-left {
  font-size: 1.4rem; }

/*Especiales*/
.capitulosGenerales_especiales {
  padding-top: 3.5rem; }
  .capitulosGenerales_especiales .pagina {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1f1f1f; }
    .capitulosGenerales_especiales .pagina img {
      height: 100%;
      width: 50%; }

/*MEDIA QUERIES*/
@media (max-width: 810px) {
  .capitulosGenHeader .capitulosGenHeader-div h1 {
    font-size: 1.6rem; }
  .capitulosGenHeader {
    padding: 1.5rem 2.5rem; }
  .capitulosGenerales_sectionContainer .pagina img {
    width: 100vw; }
  .capitulosGenerales_sectionContainer .pagina {
    height: 100%; }
  .pagination .link-active {
    background-color: #303030; }
  .botonera_slider-container {
    display: none; }
  .fa-arrow-right {
    font-size: 2rem; }
  .fa-arrow-left {
    font-size: 1.6rem; }
  .capitulosGenerales_especiales .pagina img {
    width: 70%; } }

@media (max-width: 490px) {
  .capitulosGenHeader .capitulosGenHeader-div h1 {
    font-size: 2rem; }
  .capitulosGenHeader {
    padding: 1.5rem 2.5rem; }
  .pagination li {
    font-size: 1.7rem;
    padding: 1.7rem; }
  .fa-arrow-right {
    font-size: 2rem; }
  .fa-arrow-left {
    font-size: 2rem; }
  /*Especiales*/
  .capitulosGenerales_especiales {
    padding-top: 4rem; }
    .capitulosGenerales_especiales .pagina img {
      width: 100%; } }

/* ----------------------- PAGINA 404 --------------------------*/
.notfound {
  height: 100vh; }

.notfound_logo {
  padding-left: 2rem;
  padding-top: 1rem; }

.notfound_logo img {
  width: 14rem; }

.notfound_container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 86vh;
  width: 98%; }

.notfound_container img {
  width: 100%;
  height: 100%; }

.notfound_img {
  width: 50%;
  height: 100%; }

.notfound_Caja {
  color: var(--color-font);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%; }

.notfound_Caja h1 {
  font-family: var(--titulo-font-family);
  font-size: 2.9rem;
  margin-bottom: 2rem;
  color: var(--color-primary); }

.notfound_Caja h2 {
  font-size: 2rem;
  margin-bottom: 2rem; }

.notfound_Caja p {
  font-size: 1.5rem;
  margin-bottom: 2rem; }

.notfound_botones {
  display: flex;
  justify-content: center; }

.bton_404 {
  width: 100%; }

/* ---------------------------- Media queries -------------------------- */
/* ------- 1200 ------ */
@media (max-width: 1200px) {
  /*BOTONES Redes*/
  .war-btn {
    margin-top: 1rem;
    margin-bottom: 4rem; }
  .botones {
    margin: 3rem 0rem 3rem 0rem; }
  /*404*/
  .notfound_img {
    width: 56%;
    height: 85%; }
  .notfound_Caja {
    text-align: center; } }

/* ------- 1000px ------*/
@media (max-width: 1000px) {
  /*Redes*/
  .war-btn {
    margin-top: 2rem; }
  /*404*/
  .notfound_Caja {
    width: 80%; }
  .notfound_container {
    display: flex;
    flex-direction: column; }
  .notfound_container img {
    width: 100%;
    height: 100%; }
  .notfound_img {
    width: 50%;
    height: 50%; } }

/* ------- 850px ------*/
@media (max-width: 850px) {
  /*404*/
  .notfound_container img {
    width: 100%;
    height: 100%; }
  .notfound_img {
    width: 60%;
    height: 40%; } }

/* ------- 490px ------*/
@media (max-width: 490px) {
  /*404*/
  .notfound_container img {
    width: 100%;
    height: 100%; }
  .notfound_img {
    width: 70%;
    height: 40%; } }

/* ------- 420px ------*/
@media (max-width: 420px) {
  /*Botones*/
  .boton_a {
    width: 45%; }
  .bubbly-button {
    font-size: 15px;
    padding: .8em; }
  .redes-img-bg {
    height: 13vh; }
  .redes-img-bg {
    height: 20vh; }
  /*404*/
  .notfound_img {
    width: 80%;
    height: 40%; }
  .bton_404 {
    font-size: 13px;
    padding: 1em;
    width: 100%; } }

/* ------- 350px ------*/
@media (max-width: 350px) {
  /*Botones*/
  .nuevo_boton {
    flex-wrap: wrap; }
  .bubbly-button {
    font-size: 13px;
    padding: .7em; }
  .redes-img-bg {
    height: 13vh; }
  .bton_404 {
    font-size: 13px;
    padding: 1em;
    width: 100%; }
  /*404*/
  .notfound_container {
    height: 70vh; }
  .notfound_Caja h1 {
    margin-bottom: 1.3rem; }
  .notfound_Caja h2 {
    margin-bottom: 2rem; }
  .notfound_Caja p {
    margin-bottom: 2rem; }
  .notfound_img {
    width: 80%;
    height: 30%; } }

/* ------- 300px ------*/
@media (max-width: 300px) {
  .nuevo_boton {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 0rem; }
  .boton_a {
    width: 150px; }
  .bubbly-button {
    font-size: 13px;
    padding: .7em; }
  .redes-img-bg {
    height: 16vh; }
  .war-btn {
    flex-wrap: nowrap; } }

/* ---------------------------- Media queries -------------------------- */
/* ------- 1200 ------ */
@media (max-width: 1200px) {
  * {
    font-size: 14px; } }

/* ------- 991px ------*/
@media (max-width: 991px) {
  * {
    font-size: 13px; }
  .fixed-top {
    position: unset; } }

/* ------- 850px ------*/
@media (max-width: 850px) {
  * {
    font-size: 12px; } }

/* ------- 490px ------*/
@media (max-width: 490px) {
  * {
    font-size: 11px; } }

/* ------- 420px ------*/
@media (max-width: 420px) {
  * {
    font-size: 9px; } }

/* ------- 350px ------*/
@media (max-width: 350px) {
  * {
    font-size: 9px; } }

/* ------- 300px ------*/
@media (max-width: 300px) {
  * {
    font-size: 8px; } }