& {
    margin: 0px;
}
body {
    margin: 0;
    padding: 0;

}



.contenedor-grande {
    width: 100%;
  display: grid;
  justify-content: center;
padding: 0px 8vw 0px 8vw;
}
.contiene-titulo {
    font-family: "Playfair Display", serif;
    font-size: xx-large;
    font-weight: 900;
    font-style: italic;
    text-align: center;
    padding: 20px;
    margin: 0px;
    width: 100%;
}
.seccion-1 {
    background-color: rgb(135, 231, 255);
}
.contiene-verso {
    padding: 20px;
    font-family: "Source Code Pro", monospace;
    font-size: medium;
    font-weight: 400; 
    display: inline-block;
    width: 100%;   
}
.contiene-red {
    padding: 0px;
    font-family: "Source Code Pro", monospace;
    font-size: medium;
    font-weight: 400; 
    display: inline-block;
    width: 100%;   
}
.contiene-galeria {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto-fill minmax(100px, 1fr);
    grid-template-rows: min-content auto-fill minmax(100px, auto)  ;
    grid-template-areas:
    'artista artista'
    'video fotos';
    padding: 0px;
    gap: 0px;
}
.contiene-fotos-mesa {
    grid-area: fotos;
}

.mini-galeria  {
	max-width: 25%;
    margin-left: -5px;
    padding: 0px;
    border: 0px;
}
.contiene-fotos {
    grid-area: fotos;
    padding: 0px 10px 0px 5px;
}
.mini-galeria img   {
    width: 100%;

}
.mini-foto {
    width: 32.5%;
    gap: 0px;
    margin-left: -5px;
    padding: 0px;
    border: 0px;
}

.contiene-video-mesa {
    padding: 20px 0px 0px 15px;
    text-align: center;
}

.mini-foto img {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
@media (max-width: 680px) {
    .contiene-galeria {
        grid-template-columns: 1fr;
        grid-template-rows: min-content auto auto;
        grid-template-areas:
        'artista'
        'video'
        'fotos';
        justify-content: center;
    }
        .contiene-fotos-mesa {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .mini-galeria  {
        max-width: 300px;
    padding: 0px;
    border: 0px;
    }
    .contiene-fotos {
         display: flex;
        flex-wrap: wrap;
        justify-content: center;
}
    .mini-foto {
    width: 100%;
    max-width: 180px;
    }
}


@media (min-width: 680px) and  (max-width: 980px) {
    .mini-foto {
		width: 95%;
	}
    .contiene-fotos-mesa {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .mini-galeria  {
        width: 100%;
         max-width: 250px;
    }

}

.contiene-nombre-artista {
    grid-area: artista;
    padding: 10px;
    font-family: "Playfair Display", serif;
    font-size: x-large;
    font-weight: 800;
    font-style: italic;
}

.contiene-video {
    grid-area: video;
    padding-left: 10px;
	text-align: center;
}

.contiene-fotos-mesa {
    grid-area: fotos;
    padding: 0px 10px 0px 20px;
}




.bg-brenda {
  background-color: #e69583;
}
.bg-laura {
  background-color: #6083e8;
}
.bg-mara {
  background-color: #ddbd8e;
}
.bg-marce {
  background-color: rgb(239, 228, 82);
}
.bg-mery {
  background-color: rgb(147, 168, 103);
}
.bg-patri {
  background-color: rgb(232, 169, 209);
}
.bg-wen {
  background-color: #5de0e6;
}
.bg-clarito {
  padding-bottom: 20px;
}
.bg-sergio {
  padding: 50px 0px 0px 100px;
  background-color: #356bb3;
  color: white;
}

.ondebox {
  background-color: #356bb3;
}

.ondebox-1 {
  background-color: #87e7ff;
}
.ondebox-2 {
  background-color: #e69583;
}
.ondebox-3 {
  background-color: #6083e8;
}
.ondebox-4 {
  background-color: rgb(221, 189, 142);
}
.ondebox-5 {
  background-color: #efe452;
}
.ondebox-6 {
  background-color: #93a867;
}
.ondebox-7 {
  background-color: #e8a9d1;
}
.ondebox-8 {
  background-color: #5de0e6;
}
.onde {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}


/* Animation */

.parallaxonde > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallaxonde > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallaxonde > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallaxonde > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallaxonde > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .onde {
    height:40px;
    min-height:40px;
  }
}