.body {
  background-color: #005c81;
  padding: 0;
  margin: 0;
  font-family: arial;
}

* h2::selection, * li::selection {
  background-color: #d40f60;
  color: white;
}

* a::selection, * p::selection {
  background-color: #e79a32;
  color: white;
}

.header {
  background-color: rgb(11, 11, 11);
  position: fixed;
  height: 100%;
  width: 10vw;
  min-width: 2em;
  z-index: 1;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 20vh auto;
  grid-gap: 0;
}
.header__logo {
  background-color: rgb(11, 11, 11);
  background-image: url(../img/background/forest.jpg);
  background-size: cover;
  background-position: center;
}
.header__background {
  height: 100%;
  background-color: #d40f60;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
@media (max-width: 720px) {
  .header__background {
    background-color: rgba(212, 15, 97, 0.8431372549);
  }
}
.header__a {
  user-select: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
.header__img {
  object-fit: scale-down;
  width: 85%;
  height: 100%;
  transition: all 0.5s ease;
  filter: drop-shadow(0.2em 0.2em 0.1em black);
}
@media (max-width: 720px) {
  .header__img {
    width: 50%;
  }
}
.header__img:hover {
  transition: all 0.5s ease;
  scale: 1.2;
}
.header__button {
  background-color: rgb(11, 11, 11);
  color: #d40f60;
  display: none;
  border: none;
  width: 5em;
  height: 5em;
  border-radius: 10em;
  transition: all 0.5s ease;
}
.header__button:hover {
  transition: all 0.5s ease;
  background-color: #d40f60;
  color: rgb(11, 11, 11);
}
.header__button:active {
  transition: all 0.5s ease;
  background-color: #d40f60;
  color: rgb(11, 11, 11);
}
@media (max-width: 720px) {
  .header__button {
    display: block;
    position: absolute;
    top: 89%;
    left: 1em;
  }
}
.header__svg {
  width: 60%;
  height: 60%;
}

.nav {
  font-weight: bold;
}
.nav__ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  background-color: rgb(11, 11, 11);
  padding: 0;
  margin-top: 0;
  height: 100%;
}
.nav__li {
  height: 10%;
  width: 100%;
  list-style: none;
}
.nav__a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: white;
  transition: all 0.5s ease;
  font-size: 0.8em;
}
.nav__a:hover {
  transition: all 0.5s ease;
  background-color: #d40f60;
  font-size: 1em;
  text-shadow: 0.2em -0.2em 0.3em rgb(11, 11, 11);
}
.nav__a:active {
  transition: all 0.5s ease;
  background-color: #d40f60;
  font-size: 1em;
}

.main {
  background-color: #005c81;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-gap: 0;
}

.section {
  min-height: 100vh;
}
.section__container {
  margin-left: 10vw;
}
@media (max-width: 720px) {
  .section__container {
    margin-left: 0;
  }
}
.section__li {
  list-style: none;
}

.section--head {
  background-color: #005c81;
  background-image: url(../img/background/plastic_beach-1920x1080.png);
  background-position: center;
  background-size: cover;
  padding-top: 1.5em;
}

.section__container--head {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}

.section__head-info {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}
.section__head-title {
  user-select: none;
  width: 45vw;
  margin-left: 2em;
  filter: drop-shadow(1em 0em 0.5em white);
  transition: all 0.5s ease;
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.section__head-title:hover {
  transition: all 0.5s ease;
  filter: drop-shadow(5em 0em 1em #d40f60);
}
.section__head-img {
  user-select: none;
  bottom: 0em;
  right: 0em;
  position: absolute;
  height: 100%;
}
.section__head-icono {
  user-select: none;
  position: absolute;
  bottom: 0em;
  background-color: rgb(11, 11, 11);
  animation: icon-animation 1s ease infinite;
  transition: all 0.5s ease;
  text-shadow: 1px 2px 3px black;
}
.section__head-icono:hover {
  transition: all 0.5s ease;
  opacity: 0.8;
}

.section__img {
  user-select: none;
}
.section__img--head-title {
  filter: drop-shadow(5px 5px 1px #d40f60);
  transition: all 0.5s ease;
}
.section__img--head-title:hover {
  transition: all 0.5s ease;
  filter: drop-shadow(5px 5px 1px #d40f60);
}
.section__img--head-img {
  filter: drop-shadow(10px 10px 1px rgb(24, 24, 24));
}

.section__a--head-icono {
  font-size: 2em;
  color: #d40f60;
}
.section__a--head-icono:hover {
  color: white;
}

@keyframes icon-animation {
  0% {
    transform: translateY(2em);
  }
  25% {
    transform: translateY(0em);
  }
  100% {
    transform: translateY(2em);
  }
}
@keyframes pulse {
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  10% {
    transform: scale(1);
  }
}
.section--box1 {
  background-color: black;
}

.section__container--about {
  height: 100vh;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 45% 55%;
  grid-gap: 0;
}
@media (max-width: 960px) {
  .section__container--about {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 30% 70%;
    grid-gap: 0;
  }
}

.section__h2--info-text {
  color: #005c81;
  background-color: rgba(255, 255, 255, 0.8);
}
.section__h2--info-list {
  color: #E90832;
  background-color: rgba(255, 255, 255, 0.8);
}

.section__about-img {
  text-align: center;
  background: linear-gradient(#E90832, #000000);
  overflow: hidden;
}
@media (max-width: 720px) {
  .section__about-img {
    text-align: center;
  }
}
.section__about-info {
  height: 80%;
  width: 97%;
  box-shadow: 0em -1em 1em 0em black;
  z-index: 99;
  padding: 2em 1em;
  display: grid;
  grid-template-columns: 50% auto;
  grid-template-rows: auto;
  grid-gap: 2em;
}
@media (max-width: 960px) {
  .section__about-info {
    width: auto;
  }
}
@media (max-width: 720px) {
  .section__about-info {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    grid-gap: 1em;
  }
}

.section__info-text {
  padding: 0 1em;
  background-color: #005c81;
  color: white;
  text-align: center;
  box-shadow: 1em -1em 1px 0em rgba(0, 92, 129, 0.4745098039);
  transition: all 0.5s ease;
}
.section__info-text:hover {
  transition: all 0.5s ease;
  box-shadow: 0em 0em 0px 0em rgba(0, 92, 129, 0.4745098039);
}
.section__info-list {
  padding: 0 1em;
  background-color: #E90832;
  color: white;
  text-align: center;
  box-shadow: 1em -1em 1px 0em rgba(233, 8, 50, 0.662745098);
  transition: all 0.5s ease;
}
.section__info-list:hover {
  transition: all 0.5s ease;
  box-shadow: 0em 0em 1px 0em rgba(233, 8, 50, 0.662745098);
}

.section__ul--info-list {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.2em;
  flex-wrap: wrap;
}

.section__img--about-img {
  width: auto;
  height: 47vh;
  filter: drop-shadow(10px 1px 5px black);
}
@media (max-width: 720px) {
  .section__img--about-img {
    transform: translateY(-2em);
    object-fit: scale-down;
    width: 90vw;
  }
}

.section--box2 {
  background-color: #f84339;
}

.section__container--band {
  height: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  grid-gap: 0em;
  overflow: hidden;
}
@media (max-width: 960px) {
  .section__container--band {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 25% 25% 25% 25%;
    grid-gap: 0;
  }
}

.section__background-filter {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

.section__background {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  transition: all 1s ease;
}
.section__background--member-1:hover {
  background-image: url(../img/background/2D_background.png);
  background-size: cover;
  background-position: center;
  filter: drop-shadow(10px 10px 5px black);
}
.section__background--member-2:hover {
  background-image: url(../img/background/murdoc-background.png);
  background-size: cover;
  background-position: center;
  filter: drop-shadow(10px 10px 5px black);
}
.section__background--member-3:hover {
  background-image: url(../img/background/noodle_background.png);
  background-size: cover;
  background-position: center;
  filter: drop-shadow(10px 10px 5px black);
}
.section__background--member-4:hover {
  background-image: url(../img/background/russel_background-2.png);
  background-size: cover;
  background-position: center;
  filter: drop-shadow(10px 10px 5px black);
}

.section__member-name {
  font-size: calc(1em + 1.5vw);
}
.section__member--member-1 {
  background: linear-gradient(rgb(11, 11, 11), #005c81, rgb(11, 11, 11));
}
.section__member--member-2 {
  background: linear-gradient(rgb(11, 11, 11), #368986, rgb(11, 11, 11));
}
@media (max-width: 960px) {
  .section__member--member-2 {
    z-index: 1;
  }
}
.section__member--member-3 {
  background: linear-gradient(rgb(11, 11, 11), #d40f60, rgb(11, 11, 11));
  z-index: 1;
}
.section__member--member-4 {
  background: linear-gradient(rgb(11, 11, 11), #e79a32, rgb(11, 11, 11));
  z-index: 1;
}

.section__h2--member-1 {
  color: white;
  text-shadow: 5px 5px 5px rgb(11, 11, 11);
}
.section__h2--member-2 {
  color: white;
  text-shadow: 5px 5px 5px rgb(11, 11, 11);
}
.section__h2--member-3 {
  color: white;
  text-shadow: 5px 5px 5px rgb(11, 11, 11);
}
.section__h2--member-4 {
  color: white;
  text-shadow: 5px 5px 5px rgb(11, 11, 11);
}

.section__img--member-photo {
  height: 49.5vh;
  margin-top: 0.5em;
  filter: drop-shadow(10px 5px 1px black);
}
@media (max-width: 960px) {
  .section__img--member-photo {
    height: 24vh;
  }
}

.section--box3 {
  background-color: #e79a32;
}

.section__container--discography {
  height: 100%;
}

.section__album {
  height: 100%;
  margin: 0 5vw 0 5vw;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100%;
  grid-gap: 1em;
}
.section__album-img {
  padding: 1em;
}
.section__album-text {
  padding: 0 1em;
}

.section__album-background--album-0 {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  transform: translateX(-35em);
  transition: all 1s ease;
}
.section__album-background--album-0.activo {
  transform: translateX(0em);
  background-color: rgba(212, 15, 97, 0.937254902);
  transition: all 1s ease;
}
.section__album--album-0 {
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: auto 60%;
  grid-template-rows: 100vh;
  grid-gap: 0;
}
.section__album-text--album-0 {
  margin-right: 6vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  flex-wrap: nowrap;
}
.section__album-img--album-0 {
  background-image: url(../img/background/gorillaz-1.png);
  background-size: cover;
  padding: 0em;
}
@media (max-width: 720px) {
  .section__album-img--album-0 {
    width: 100%;
  }
}

.section__img--album {
  filter: drop-shadow(10px 10px 10px black);
  object-fit: scale-down;
  transition: all 1s;
}
.section__img--album:hover {
  transform: scale(1.05);
  transition: all 1s ease;
}

.album-text__h2 {
  font-size: 2.5em;
  text-shadow: 0.1em 0.1em 0.2em black;
}
.album-text__h2--album-0 {
  font-size: 4em;
  text-shadow: 0.3em -0.3em 1px #d40f60;
  transition: all 0.6s ease;
}
@media (max-width: 720px) {
  .album-text__h2--album-0 {
    font-size: 2.1em;
  }
}
.album-text__h2--album-0:hover {
  text-shadow: 0.1em -0.1em 1px #d40f60;
}
.album-text__ul {
  text-align: right;
}
.album-text__li {
  list-style: none;
}
.album-text__span {
  font-weight: bold;
}

.slide {
  background-size: cover;
  background-position: center;
}
.slide--album-0 {
  background-color: rgb(11, 11, 11);
  color: white;
}
.slide--album-1 {
  background-image: url(../img/background/arid-texture.jpg);
  color: white;
}
.slide--album-2 {
  background-image: url(../img/background/blue-texture.jpg);
  color: white;
}
.slide--album-3 {
  background-image: url(../img/background/rusty-texture.jpg);
  color: white;
}
.slide--album-4 {
  background-image: url(../img/background/rain_texture.jpg);
  color: white;
}
.slide--album-5 {
  background-image: url(../img/background/dark-texture.jpg);
  color: white;
}
.slide--album-6 {
  background-image: url(../img/background/mix-texture.jpg);
  color: white;
}
.slide--album-7 {
  background-image: url(../img/background/paint-texture.jpg);
  color: white;
}

.fp-controlArrow.fp-next, .fp-controlArrow.fp-prev {
  top: 96%;
}
@media (max-width: 720px) {
  .fp-controlArrow.fp-next, .fp-controlArrow.fp-prev {
    top: 93%;
  }
}

.fp-controlArrow.fp-next {
  right: 1em;
  border-width: 20px 0px 20px 20px;
  border-color: transparent transparent transparent #d40f60;
  filter: drop-shadow(0.2em 0.2em 0.1em black);
}
@media (max-width: 720px) {
  .fp-controlArrow.fp-next {
    right: 20vw;
  }
}
.fp-controlArrow.fp-next:hover {
  border-color: transparent transparent transparent rgba(212, 15, 97, 0.7215686275);
}
.fp-controlArrow.fp-next:active {
  border-color: transparent transparent transparent #d40f60;
}

.fp-controlArrow.fp-prev {
  left: 85vw;
  border-width: 20px 20px 20px 0;
  border-color: transparent #d40f60 transparent transparent;
  filter: drop-shadow(0.2em 0.2em 0.1em black);
}
@media (max-width: 720px) {
  .fp-controlArrow.fp-prev {
    left: 60vw;
  }
}
.fp-controlArrow.fp-prev:hover {
  border-color: transparent rgba(212, 15, 97, 0.7764705882) transparent transparent;
}
.fp-controlArrow.fp-prev:active {
  border-color: transparent #d40f60 transparent transparent;
}

.section--box4 {
  background-color: #005c81;
  background-image: url(../img/background/apartment.jpg);
  background-position: center;
  background-size: cover;
}

.section__h2--gallery-title {
  color: #d40f60;
  font-size: 3em;
  margin: 0.1em 1em;
}
.section__container--gallery {
  background-color: rgba(212, 15, 97, 0.8941176471);
  height: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 15vh 85vh;
  grid-gap: 0;
}
.section__buttons-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  gap: nowrap;
  flex-wrap: 0;
}
@media (max-width: 720px) {
  .section__buttons-nav {
    justify-content: center;
    gap: 3em;
  }
}
.section__button {
  color: #d40f60;
  background-color: rgb(11, 11, 11);
  font-size: 2.5em;
  border: 0;
  cursor: pointer;
  transition: all 0.5s ease;
}
.section__button:hover {
  opacity: 0.5;
  transition: all 0.5s ease;
  color: rgb(11, 11, 11);
  background-color: #d40f60;
}

.section__gallery-title {
  background-color: rgb(11, 11, 11);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0;
  flex-wrap: nowrap;
}
.section__gallery-content {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 90% 10%;
  grid-gap: 0;
}
@media (max-width: 720px) {
  .section__gallery-content {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 75% 25%;
    grid-gap: 0;
  }
}
.section__gallery-items {
  user-select: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}
@media (max-width: 480px) {
  .section__gallery-items {
    overflow-x: auto;
  }
}

.gallery-figureBox {
  padding-top: 1em;
  background-color: rgb(11, 11, 11);
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  cursor: zoom-in;
}
.gallery-figureBox:hover {
  transform: scale(1.1);
  transition: all 0.5s ease;
}
.gallery-figureBox__img {
  height: 60vh;
  width: 20em;
  object-fit: scale-down;
}
@media (max-width: 720px) {
  .gallery-figureBox__img {
    width: 16em;
    height: 45vh;
    object-fit: scale-down;
  }
}
.gallery-figureBox__figcaption {
  padding: 0.5em;
}
.gallery-figureBox__h3 {
  margin: 0em;
  color: white;
}

.gallery-figureBox.activo {
  background-color: rgba(0, 0, 0, 0.95);
  height: 105vh;
  width: 100vw;
  transform: translateY(-1em);
  position: absolute;
  transition: all 0.5s ease;
  cursor: default;
  z-index: 9999;
}

.gallery-figureBox__container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}

.gallery-figureBox__container.activo {
  transform: scale(1.5);
  object-fit: scale-down;
  transition: all 0.5s ease;
  cursor: zoom-out;
}
@media (max-width: 720px) {
  .gallery-figureBox__container.activo {
    transform: scale(1.3);
  }
}

.section__gallery-items.activo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  transition: all 0.5s ease;
}

.footer {
  background-color: rgb(24, 24, 24);
}

.footer__section {
  overflow: hidden;
}
.footer__section--info {
  height: 35vh;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 70% 30%;
  grid-gap: 0;
}
@media (max-width: 720px) {
  .footer__section--info {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 70% 30%;
    grid-gap: 0;
  }
}
.footer__section--background {
  height: 65vh;
  background-image: url(../img/background/gorillaz_baby-queen.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.footer__items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
.footer__title {
  color: white;
  font-size: 1em;
  background-color: rgb(11, 11, 11);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  flex-wrap: nowrap;
}

.footer__ul {
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1em;
  flex-wrap: nowrap;
}
.footer__li {
  list-style: none;
}
.footer__a {
  color: white;
  text-decoration: none;
}
.footer__a--personal-links {
  transition: all 0.5s ease;
}
.footer__a--personal-links:hover {
  transition: all 0.5s ease;
  color: #e79a32;
}
.footer__a--links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  background-color: rgb(11, 11, 11);
  height: 1.5em;
  width: 1.5em;
  font-size: 2em;
  transition: all 0.5s ease;
  animation-name: animation_background_links;
  animation-duration: 13s;
  animation-iteration-count: infinite;
}
.footer__a--links:hover {
  transition: all 0.5s ease;
  transform: translateY(-0.5em);
}
.footer__a--links:active {
  transition: all 0.5s ease;
  transform: translateY(-0.5em);
}

@keyframes animation_background_links {
  100% {
    color: #005c81;
    border: 2px solid #005c81;
  }
  80% {
    color: #d40f60;
    border: 2px solid #d40f60;
  }
  60% {
    color: #f84339;
    border: 2px solid #f84339;
  }
  40% {
    color: #e79a32;
    border: 2px solid #e79a32;
  }
  20% {
    color: #368986;
    border: 2px solid #368986;
  }
  0% {
    color: #E90832;
    border: 2px solid #E90832;
  }
}
@media screen and (max-width: 720px) {
  .header {
    background: transparent;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-gap: 0;
  }
  .header__logo {
    display: none;
  }
  .nav {
    width: 0vw;
    height: 100%;
    overflow: hidden;
    transition: all 1s ease;
  }
  .nav__ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    flex-wrap: nowrap;
  }
  .nav__a {
    color: white;
    font-size: 1.3em;
  }
  .nav.activo {
    width: 100vw;
    height: 100%;
  }
}
@media (max-width: 960px) {
  .section__head-info {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 20vh 80vh;
    grid-gap: 0;
  }
  .section__head-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    margin-left: 0;
  }
  .section__head-img {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    position: relative;
  }
  .section__img--head-title {
    object-fit: scale-down;
    width: 95%;
  }
  .section__img--head-img {
    transform: translateY(-1em);
    object-fit: scale-down;
    width: 95%;
    height: 90%;
  }
}
@media (max-width: 480px) {
  .section__head-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
  }
}
@media (max-width: 720px) {
  .section__album {
    height: 90%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 40vh 60vh;
    grid-gap: 0;
  }
}

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