/*******************
ESTILOS GENERALES
*******************/
* {
  margin: 0;
  padding: 0; }

header {
  position: sticky;
  top: 0;
  background-color: transparent;
  z-index: 1050; }

body {
  background-color: black;
  font-family: 'Fugaz One', cursive;
  color: white; }

.footer {
  width: 100%;
  height: auto;
  max-width: 1520px; }

/*******************
TAMANOS
*******************/
.tamanoPortada {
  width: 100%;
  height: auto;
  max-width: 1520px; }

.tamanoLogo {
  width: 100%;
  height: auto;
  max-width: 600px; }

.cancionTamano {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 50px;
  padding: 2rem; }

.tamanosFotos {
  width: 100%;
  height: auto;
  max-width: 450px;
  border-radius: 2px; }

@media only screen and (max-width: 650px) {
  .tamanoLogo {
    width: 300px;
    height: auto; }
  .tamanosFotos {
    width: 300px;
    height: 150px;
    margin: 30px; } }

@media only screen and (max-width: 500px) {
  .tamanoLogo {
    width: 200px;
    height: auto; } }

/******************
ESTILOS DE TEXTO
******************/
.titulos {
  font-family: 'Fugaz One', cursive;
  color: lightgrey;
  font-size: 7vw;
  margin: 50px;
  text-transform: uppercase;
  text-align: center; }

.titulos:hover {
  color: #044672; }

.tour {
  font-family: 'Stalinist one', cursive;
  color: #c60000;
  font-size: 6vw;
  text-align: center; }

.parrafos {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5vw; }

.parrafos-2 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: bold; }

.parrafos-2:hover {
  background-color: #000000; }

.parrafos-3 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5vw; }

.subtexto {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2vw; }

@media only screen and (max-width: 991px) {
  .titulos {
    font-size: 10vw;
    margin: 20px; }
  .tour {
    margin-bottom: 20px; }
  .parrafos {
    font-size: 3vw; }
  .parrafos-2 {
    font-size: 3vw; }
  .parrafos-3 {
    font-size: 1.5vw; }
  .subtexto {
    font-size: 4vw;
    text-align: center;
    justify-content: center; } }

@media only screen and (max-width: 650px) {
  .parrafos {
    font-size: 4vw;
    text-align: center; }
  .parrafos-3 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.5vw; }
  .subtexto {
    font-size: 5vw;
    text-align: center; } }

@media only screen and (max-width: 600px) {
  .parrafos-3 {
    font-family: 'Roboto', sans-serif;
    font-size: 4vw; } }

/******************
LIBRERIA DE COLORES
******************/
.colorUno {
  background-color: white; }

.colorDos {
  background-color: #e11624; }

.colorTres {
  background-color: #c60000; }

.colorCuatro {
  background-color: #470a0a; }

.colorCinco {
  background-color: #b52e2b; }

.colorSeis {
  background-color: #46433f; }

.colorSiete {
  background-color: #1a161a; }

.colorOcho {
  background-color: #000000; }

.transparente {
  background-color: transparent; }

.gradiente-1 {
  background: linear-gradient(transparent 30%, #470a0a); }

.gradiente-2 {
  background: linear-gradient(#470a0a 30%, transparent); }

.gradiente-3 {
  background: linear-gradient(transparent, #470a0a 50%, transparent); }

.gradiente-4 {
  background: linear-gradient(transparent, #46433f 50%, transparent); }

.sombra {
  box-shadow: 0 0 5px 5px #130263; }

/*********************
CSS DEL INDEX
*********************/
#eventos {
  background-image: url(../fondoIndex2.png);
  background-size: cover;
  background-repeat: no-repeat; }
  #eventos .eventos__lista {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 3vw; }
    #eventos .eventos__lista .loc, #eventos .eventos__lista .lugar {
      padding: 1rem; }
    #eventos .eventos__lista .lugar::after {
      content: "................................."; }
    #eventos .eventos__lista .fecha {
      padding: 1rem; }

/*********************
CSS MIEMBROS
**********************/
#carrusel {
  padding: 1rem; }

#historia {
  background-image: url(../img/otro_conciero_samurai.png);
  background-repeat: no-repeat;
  background-size: cover; }

#miembros {
  padding: 1rem; }

/*********************
CSS MUSICA
*********************/
#cancion {
  padding: 1rem; }

/*********************
   CSS MEDIA
 *********************/
#fotos {
  padding: 1rem; }
  #fotos .galeria {
    margin: 5px;
    width: 100%;
    height: auto;
    transition: all 1s; }
  #fotos .galeria:hover {
    transform: scale(0.95); }
  #fotos .galeria img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    border-color: white;
    border-width: 5rem; }
  #fotos .desc {
    padding: 15px;
    text-align: center; }

#videos {
  padding: 1rem; }
  #videos .video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden; }
    #videos .video iframe {
      position: absolute;
      width: 100%;
      height: 100%; }

/**********************
CSS CONTACTO
**********************/
#revolucion {
  background-image: url(../img/fondoUnete.jpg);
  background-repeat: no-repeat; }

#mensaje {
  background-color: #b52e2b; }

#formulario {
  padding: 3rem; }

#mapa {
  padding: 1rem; }

/********************
TRANSFORMACIONES Y ANIMACIONES
*********************/
.trans {
  transition: all 0.5s; }

.trans:hover {
  transform: scale(0.9); }

[data-aos="flip-left"] {
  position: relative;
  z-index: -1; }

[data-aos="fade-left"] {
  position: relative;
  z-index: -1; }

[data-aos="fade-right"] {
  position: relative;
  z-index: -1; }

/*********************
MEDIA QUERIES
*********************/
@media only screen and (max-width: 991px) {
  /********************
        INDEX
********************/
  #eventos .eventos__lista {
    display: block;
    text-align: center;
    justify-content: center;
    text-transform: uppercase;
    padding: 1rem; }
    #eventos .eventos__lista .loc, #eventos .eventos__lista .lugar {
      padding: 0rem; }
    #eventos .eventos__lista .lugar {
      padding: 0rem; }
    #eventos .eventos__lista .lugar::after {
      display: none; }
    #eventos .eventos__lista .fecha {
      padding: 0rem; } }