:root {

  --max-width: 100%;



  --medium-width: 900px;



  --content-width: 688px;



  --padding: 25px;



  --border-radius: 3px;



  --header-height: 60px;



  --color-00: #000000;



  --color-01: #4f402e;



  --color-02: #06212b;



  --color-03: #c6cacc;



  --color-04: #a08f7b;



  --color-05: #d9cdc0;



  --color-06: #aca093;



  --color-07: #8e7969;



  --color-08: #c6cacc44;



  --color-09: #d6d0c9;



  --color-10: #504b46;



  --color-99: #fafafa;

}



.layers-ending {

  position: relative;

}



.layers-ending::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image: linear-gradient(

    to bottom,

    transparent,

    var(--color-99) 13%

  );

  z-index: 10;

  pointer-events: none;

}



html {

  scroll-behavior: smooth;

}



body.blocked {

  overflow: hidden;



  height: 100%;

}



.ed-page {

  overflow: visible;

}



.ed-page * {

  font-family: "Petrona";



  margin: 0;



  padding: 0;



  position: relative;



  min-width: 0;



  box-sizing: border-box;



  line-height: 130%;



  font-size: 1rem;

}



.ed-page a,

span,

label,

strong {

  color: inherit;



  font-size: inherit;



  font-weight: inherit;

}



.ed-page strong {

  font-weight: bold;

}



.ed-page ul {

  margin: 15px 20px;

}



.ed-page ol {

  margin: 15px 20px;

}



.ed-page img,

iframe,

article {

  max-width: 100%;

}



.ed-page h1,

h2,

h3,

h4,

h5,

h6 {

  line-height: 120%;

}



.ed-page p {

  line-height: 140%;

}



.ed-page section,

article,

header,

footer {

  width: 100%;

}



.display-none {

  display: none !important;

}



.shadow-ee {

  position: relative;

}



.shadow-ee::before,

.shadow-ee::after {

  position: absolute;



  content: "";



  left: 0;



  width: 100%;



  height: 8%;



  pointer-events: none;



  z-index: 5;

}



.shadow-ee::before {

  top: 0;



  background: linear-gradient(180deg, #fff 0%, rgba(250, 250, 250, 0) 100%);

}



.shadow-ee::after {

  bottom: 0;



  background: linear-gradient(0deg, #fff 0%, rgba(250, 250, 250, 0) 100%);

}



.cover-bg {

  background-repeat: no-repeat;



  background-position: center center;



  background-size: cover;

}



.cover-bg::before {

  background-repeat: no-repeat;



  background-position: center center;



  background-size: cover;

}



.cover-bg::after {

  background-repeat: no-repeat;



  background-position: center center;



  background-size: cover;

}



.ronin-section {

  width: 100%;



  max-width: 100dvw;



  margin: 0 auto;



  padding: 50px 0;

}



.ronin-container {

  max-width: var(--max-width);



  margin: 0 auto;

}



.ronin-content {

  max-width: var(--content-width);



  margin: 0 auto;



  padding: 0 var(--padding);



  transition: padding 0.3s;

}



.ed-title {

  font-family: "Bebas Neue";



  font-size: clamp(2.6rem, 8dvw, 2.8rem);



  font-weight: 700;



  margin: 0 0 50px;



  line-height: 110%;

}



.ed-description p {

  font-size: 1rem;



  font-weight: 400;



  margin: 0 0 25px;



  line-height: 130%;

}



.ed-description p.capital {

  margin-top: 40px;

}



.ed-description p.capital::first-letter {

  font-size: 98px;

}



.ed-description p a {

  font-weight: 700;



  text-decoration: underline;

}



.ed-leyenda {

  font-size: 20px;



  font-weight: 700;



  margin: 15px auto;



  max-width: var(--content-width);



  line-height: 110% !important;



  padding: var(--padding);

}



header.topbar {

  padding: 0;



  height: var(--header-height);

}



header.inverted-background {

  background-image: linear-gradient(0deg, transparent, #0008);



  border-bottom: none;

}



header.topbar.mini:not(.inverted-background) {

  background-color: #fafafa;

}



header.topbar.bg-ocre:not(.inverted-background) {

  background-color: var(--color-09);

}



.first-soundwave {

  stroke: gray;

}



.second-soundwave {

  stroke: gray;

}



@keyframes firstSoundwaveAnimation {

  0% {

    stroke: gray;

  }



  25% {

    stroke: black;

  }



  70% {

    stroke: black;

  }



  100% {

    stroke: gray;

  }

}



@keyframes secondSoundwaveAnimation {

  0% {

    stroke: gray;

  }



  25% {

    stroke: gray;

  }



  70% {

    stroke: black;

  }



  100% {

    stroke: gray;

  }

}



.bar,

.bar-spacing {

  transition: transform 0.3s ease;



  transform-origin: center;



  transform-box: fill-box;



  transform: scale(0.9);



  stroke: black;



  stroke-width: 2;

}



.unmuted {

  .bar,

  .bar-spacing {

    transform: scale(0);

  }



  .first-soundwave {

    animation: firstSoundwaveAnimation 2s infinite;

  }



  .second-soundwave {

    animation: secondSoundwaveAnimation 2s infinite;

  }

}



@keyframes scrollBlink {

  0%,

  100% {

    opacity: var(--start-opacity, 1);

  }



  50% {

    opacity: 0;

  }

}



.scroll-down-helper {

  display: flex;



  flex-direction: column;



  gap: 0.5rem;

}



.scroll-down-helper svg {

  animation: scrollBlink 1.5s infinite;

}



.scroll-down-helper svg:nth-child(1) {

  --start-opacity: 0.2;



  animation-delay: 0s;

}



.scroll-down-helper svg:nth-child(2) {

  --start-opacity: 0.4;



  animation-delay: 0.25s;

}



.scroll-down-helper svg:nth-child(3) {

  --start-opacity: 1;



  animation-delay: 0.5s;

}



/*============================================================================*/



@keyframes raiTopFadeIn {

  0% {

    opacity: 0;



    transform: translate(0, -50px);

  }



  80% {

    opacity: 1;



    transform: translate(0, 0);

  }



  100% {

    opacity: 1;

  }

}



@keyframes raiBottomFadeIn {

  0% {

    opacity: 0;



    transform: translate(0, 50px);

  }



  80% {

    opacity: 1;



    transform: translate(0, 0);

  }



  100% {

    opacity: 1;

  }

}



*[class*="rai-"] {

  opacity: 0;

}



.rai-bottom.item-on {

  animation: raiBottomFadeIn 2s;



  opacity: 1;



  animation-fill-mode: both;

}



.rai-top.item-on {

  animation: raiTopFadeIn 2s;



  opacity: 1;



  animation-fill-mode: both;

}



.ronin-debug {

  display: block;



  position: fixed;



  top: 15px;



  right: 15px;



  background-color: #eee;



  padding: 15px;



  border-radius: 10px;



  z-index: 9999;



  width: 180px;



  height: auto;

}



.ronin-debug h3 {

  font-size: 0.9rem;



  margin: 0 0 5px;

}



.ronin-debug p {

  font-size: 0.8rem;



  margin: 0 0 5px;



  text-align: right;

}



.ronin-debug .value {

  display: inline-block;



  text-align: right;



  min-width: 50px;

}



.absolute-100 {

  display: block;



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;

}



picture {

  display: flex;

}



picture.placeholder {

  background-color: #ddd;

}



picture.placeholder img {

  opacity: 0;

}



.medium-width picture {

  max-width: var(--medium-width);



  margin: 0 auto;

}



.full-width picture {

  width: var(--max-width);



  margin: 0 auto;

}



.full-width picture img {

  width: var(--max-width);



  margin: 0 auto;

}



/*============================================================================*/



@keyframes dibujarTopTitle {

  50% {

    stroke-dashoffset: 0;



    stroke-width: 0;

  }



  100% {

    stroke-dashoffset: 0;



    fill: #fff;



    stroke: transparent;

  }

}



@keyframes sizeTopTitle {

  100% {

    max-width: 200px;

  }

}



#rsl_top {

  padding: 0;



  height: 800dvh;

}



#rsl_top .rs-items-bg {

  position: sticky;



  top: 0;



  left: 0;



  width: 100%;



  height: 100dvh;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/img/cabecera-lina-b.webp");

}



#rsl_top .rs-items-bg::before {

  z-index: 90;



  transition: 1s;



  opacity: 0;



  content: "";



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 20%;



  background-image: linear-gradient(

    0deg,

    transparent 0%,



    #0008 20%,



    #000c 100%

  );

}



#rsl_top .rs-items-bg::after {

  z-index: 90;



  transition: 1s;



  opacity: 0;



  content: "";



  position: absolute;



  bottom: 0;



  left: 0;



  width: 100%;



  height: 20%;



  background-image: linear-gradient(

    180deg,

    transparent 0%,



    #0008 20%,



    #000c 100%

  );

}



#rsl_top .rs-item-bg {

  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/img/cabecera-lina-b.webp?v45");

}



#rsl_top.video-ended .rs-items-bg::before {

  transition: 1s;



  opacity: 0.7;

}



#rsl_top.video-ended .rs-items-bg::after {

  transition: 1s;



  opacity: 0.7;

}



#rsl_top .rs-item-bg:nth-child(1) {

  z-index: 30;

}



#rsl_top .rs-item-bg:nth-child(2) {

  z-index: 10;

}



#rsl_top .rs-item-bg:nth-child(3) {

  z-index: 20;

}



#rsl_top .rs-item-bg:nth-child(4) {

  z-index: 40;

}



#rsl_top .rs-item-bg:nth-child(5) {

  z-index: 50;

}



#rsl_top .rs-item-bg:nth-child(5)::before {

  transition: 1s;



  opacity: 0;

}



#rsl_top .rs-item-bg:nth-child(5)::after {

  transition: 1s;



  opacity: 0;

}



#rsl_top .rs-item-bg {

  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  transition: 0.5s 1s;



  opacity: 0;

}



#rsl_top .rs-item-bg.item-on {

  transition: 1s;



  opacity: 1;

}



#rsl_top .rsl-top-video video {

  transition: 0.5s;



  opacity: 1;



  object-fit: cover;

}



#rsl_top .rs-item-bg.rsa-item-on {

  transition: 0.5s;



  opacity: 1;

}



#rsl_top .ronin-container {

  position: sticky;



  z-index: 50;



  top: 0;



  margin-top: -100dvh;



  left: 0;



  width: 100%;



  height: 100dvh;



  display: grid;



  place-items: center;

}



#rsl_top .ronin-content {

  max-width: 872px;

}



#rsl_top .ed-title path {

  stroke: #fff;



  stroke-width: 4;



  fill: transparent;



  stroke-dashoffset: 1200;



  stroke-dasharray: 1200;



  animation: dibujarTopTitle 1.2s linear forwards;

}



#rsl_top .ed-title path:nth-child(1) {

  animation-delay: 0.5s;

}



#rsl_top .ed-title path:nth-child(2) {

  animation-delay: 0.75s;

}



#rsl_top .ed-title path:nth-child(3) {

  animation-delay: 1s;

}



#rsl_top .ed-title path:nth-child(4) {

  animation-delay: 1.25s;

}



#rsl_top .ed-title path:nth-child(5) {

  animation-delay: 1.5s;

}



#rsl_top .ed-title path:nth-child(6) {

  animation-delay: 1.75s;

}



#rsl_top .ed-title path:nth-child(7) {

  animation-delay: 2s;

}



#rsl_top .ed-title path:nth-child(8) {

  animation-delay: 2.25s;

}



#rsl_top .scroll-down {

  transition: 1s;



  opacity: 0;



  max-height: 0;



  overflow: hidden;



  z-index: 10;



  text-align: center;



  position: absolute;



  bottom: 0;



  left: 0;



  width: 100%;

}



#rsl_top .scroll-down-image {

  display: grid;



  justify-content: center;

}



#rsl_top .scroll-down-title {

  font-family: "Open Sans";



  opacity: 0.8;



  font-size: 0.7rem;



  margin: 20px 0 50px;



  text-transform: uppercase;



  color: var(--color-99);



  opacity: 0.8;



  text-transform: uppercase;

}



#rsl_top .info-top {

  transition: 1s;



  opacity: 0;



  max-height: 0;



  overflow: hidden;



  position: absolute;



  top: calc(var(--header-height) + 25px);



  left: calc(50% - 60px);



  text-align: center;



  width: 120px;

}



#rsl_top .info-top-title {

  font-family: "Open Sans";



  opacity: 0.8;



  font-size: 0.6rem;



  margin: 0 0 10px;



  text-transform: uppercase;



  color: var(--color-99);



  opacity: 0.8;



  text-transform: uppercase;

}



#rsl_top .mute-button {

  width: 50px;



  aspect-ratio: 1;



  display: grid;



  place-items: center;



  margin: 0 auto;



  background-color: #fafafa;



  border-radius: 50%;



  cursor: pointer;



  user-select: none;

}



#rsl_top .mute-button::after {

  content: "";



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  z-index: 10;

}



#rsl_top .info-bottom {

  z-index: 20;



  transition: 1s;



  opacity: 0;



  max-height: 0;



  overflow: hidden;



  position: absolute;



  bottom: 25px;



  left: calc(50% - 150px);



  text-align: center;



  width: 300px;

}



#rsl_top .info-bottom-button {

  transition: 0.5s;



  font-family: "Open Sans";



  display: inline-block;



  text-transform: uppercase;



  min-width: 100px;



  font-size: 0.7rem;



  padding: 10px 15px;



  border-radius: 100px;



  border: 1px solid #fffc;



  color: #fffc;



  text-align: center;



  margin: 0 0 25px;



  cursor: pointer;



  user-select: none;

}



#rsl_top .info-bottom-button:hover {

  transition: 0.5s;



  color: #000;



  background-color: #fafafa;

}



#rsl_top .info-bottom-title {

  font-family: "Open Sans";



  opacity: 0.8;



  font-size: 0.6rem;



  margin: 0 0 15px;



  text-transform: uppercase;



  color: var(--color-99);



  opacity: 0.8;



  text-transform: uppercase;

}



#rsl_top .ed-title {

  transition: 1s;



  opacity: 0;



  max-height: 0;



  overflow: hidden;



  margin: 0 auto;

}



#rsl_top .ed-title svg {

  transition: 1s;



  opacity: 0;



  margin: 100px auto 15px;



  max-width: 100%;



  height: auto;



  display: block;



  animation: sizeTopTitle 1.8s ease-in-out 2s forwards;

}



#rsl_top .ed-subtitle {

  transition: 1s;



  opacity: 0;



  max-height: 0;



  overflow: hidden;



  animation-duration: 2s;



  text-align: center;



  color: var(--color-99);



  max-width: 680px;



  margin: 0 auto;

}



#rsl_top .ed-subtitle h1 {

  transition: 1s;



  opacity: 0;



  display: block;



  font-family: "Bebas Neue";



  font-size: clamp(2.4rem, 8dvw, 3.2rem);



  color: var(--color-99);



  font-weight: 500;



  margin: 0 0 15px;



  line-height: 100%;

}



#rsl_top .ed-description {

  transition: 1s;



  opacity: 0;



  max-height: 0;



  overflow: hidden;



  margin: 25px 0 0;



  animation-duration: 2s;



  max-width: 620px;



  margin: 0 auto;

}



#rsl_top .ed-description h2 {

  font-size: 1rem;



  margin: 0 0 15px;



  line-height: 130%;



  color: var(--color-99);



  font-weight: 500;



  text-align: center;

}



#rsl_top .rsl-top-date {

  opacity: 0;



  max-height: 0;



  overflow: hidden;



  text-align: center;



  color: var(--color-99);



  transition: 0.3s;



  animation-delay: 3s;



  animation-duration: 2s;

}



#rsl_top .date {

  text-align: center;

}



#rsl_top .date-txt {

  display: inline-block;



  font-family: "Bebas Neue";



  font-size: clamp(1.5rem, 8dvw, 1.5rem);



  font-weight: 500;



  color: var(--color-99);

}



#rsl_top .date-txt span {

  font-size: inherit;



  font-family: inherit;

}



#rsl_top .date-txt span.mes {

  /*font-family: 'Petrona';*/



  font-family: inherit;

}



#rsl_top .block {

  display: grid;



  place-items: center;

}



#rsl_top .hour {

  display: flex;



  max-width: 130px;



  margin: 0 auto;



  flex-direction: row;



  flex-wrap: wrap;



  gap: 5px;



  justify-content: center;

}



#rsl_top .hour-txt {

  display: inline-block;



  font-family: "Bebas Neue";



  font-size: clamp(1.8rem, 8dvw, 2rem);



  font-weight: 500;



  line-height: 100%;



  color: var(--color-99);

}



#rsl_top .date-data {

  transition: 0.3s;



  opacity: 1;

}



#rsl_top .audio-top {

  transition: 1s;



  opacity: 0;



  max-height: 0;



  overflow: hidden;



  text-align: center;



  margin: 0;

}



#rsl_top .audio-top * {

  transition: 1s;



  opacity: 1;

}



#rsl_top .audio-top-title {

  color: var(--color-99);



  margin: 0 0 20px;

}



#rsl_top .audio-top-image {

  margin: 20px 0;

}



#rsl_top .audio-top-image img {

  width: 100%;



  height: 50px;



  object-fit: cover;



  object-position: center center;

}



#rsl_top .audio-top-description {

  color: var(--color-99);



  margin: 20px 0 0;



  min-height: 110px;

}



#rsl_top .audio-top-description #audio_top_text_01 {

  font-weight: 900;

}



#rsl_top .audio-top-description i {

  color: inherit;



  font-style: italic;

}



#rsl_top.step-1 .rs-item-bg:nth-child(1),

#rsl_top.step-2 .rs-item-bg:nth-child(1),

#rsl_top.step-3 .rs-item-bg:nth-child(1) {

  opacity: 1;

}



#rsl_top.step-1 .ed-title,

#rsl_top.step-2 .ed-title,

#rsl_top.step-3 .ed-title,

#rsl_top.step-4 .ed-title {

  transition: 1.5s;



  opacity: 1;



  max-height: 500px;

}



#rsl_top.step-1 .ed-title svg,

#rsl_top.step-2 .ed-title svg,

#rsl_top.step-3 .ed-title svg,

#rsl_top.step-4 .ed-title svg {

  transition: 1s;



  opacity: 1;

}



#rsl_top.step-1 .rsl-top-date,

#rsl_top.step-2 .rsl-top-date,

#rsl_top.step-3 .rsl-top-date,

#rsl_top.step-4 .rsl-top-date {

  transition: 1s;

  opacity: 1;

  max-height: 300px;

}



#rsl_top.step-1.video-ended .scroll-down,

#rsl_top.step-2 .scroll-down,

#rsl_top.step-4 .scroll-down {

  transition: 1s;

  opacity: 1;

  max-height: 500px;

}



/* NEW */

#rsl_top.step-5 .scroll-down {

  max-height: initial !important;

  opacity: 1 !important;

}

/* NEW */



#rsl_top.step-1 .ronin-content {

  padding-bottom: 20dvh;

}



#rsl_top.step-2 .ronin-content {

  padding-bottom: 20dvh;

}



#rsl_top.step-2 .rs-items-bg::before {

  transition: 1s;



  opacity: 1;



  height: 30%;

}



#rsl_top.step-2 .rs-items-bg::after {

  transition: 1s;



  opacity: 1;



  height: 30%;

}



#rsl_top.step-3 .info-top {

  transition: 1s;



  opacity: 1;



  max-height: 500px;

}



#rsl_top.step-3 .info-bottom {

  transition: 1s;



  opacity: 1;



  max-height: 500px;

}



#rsl_top.step-3 .rs-items-bg::before {

  transition: 1s;



  opacity: 1;



  height: 55%;

}



#rsl_top.step-3 .rs-items-bg::after {

  transition: 1s;



  opacity: 1;



  height: 55%;

}



#rsl_top.step-3 .audio-top {

  transition: 1.5s;



  opacity: 1;



  max-height: 500px;



  margin: 30px 0 0;

}



#rsl_top.step-3 .audio-top * {

  transition: 1.5s;



  opacity: 1;

}



#rsl_top.step-4 .rs-items-bg:nth-child(1) video {

  transition: 0.5s;



  opacity: 0;

}



#rsl_top.step-4 .ronin-content {

  padding-bottom: 10dvh;

}



#rsl_top.step-4 .rs-items-bg::before {

  transition: 1s;



  opacity: 1;



  height: 50%;

}



#rsl_top.step-4 .rs-items-bg::after {

  transition: 1s;



  opacity: 1;



  height: 50%;

}



#rsl_top.step-5 .rs-items-bg:nth-child(1) video {

  transition: 0.5s;



  opacity: 0;

}



.scroll-down svg {

  fill: none;

}



#rsl_top.step-5 .rs-items-bg::before {

  transition: 2s;

  opacity: 0;

}



#rsl_top.step-5 .rs-items-bg::after {

  transition: 2s;



  opacity: 0;

}



#rsl_top.step-5 .rs-item-bg:nth-child(5)::before {

  transition: 2s;



  opacity: 0.5;



  content: "";



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 20%;



  background-image: linear-gradient(

    180deg,

    var(--color-04) 0%,



    transparent 100%

  );

}



#rsl_top.step-5 .rs-item-bg:nth-child(5)::after {

  transition: 2s;



  opacity: 0.5;



  content: "";



  position: absolute;



  bottom: 0;



  left: 0;



  width: 100%;



  height: 20%;



  background-image: linear-gradient(

    180deg,

    transparent 0%,



    var(--color-04) 100%

  );

}



#rsl_top.step-5 .ed-subtitle {

  transition: 2s 1s;



  opacity: 1;



  max-height: 500px;



  margin: 25px auto;

}



#rsl_top.step-5 .ed-subtitle h1 {

  transition: 2s 1s;



  opacity: 1;

}



#rsl_top.step-5 .ed-description {

  transition: 2s 2s;



  opacity: 1;



  max-height: 500px;

}



#rsl_top.step-5 .ed-description p {

  transition: 2s 2s;



  opacity: 1;

}



#rsl_layers {

  padding: 0;



  --layer-height: 50dvh;



  --layer-gap: 13dvh;



  margin-top: -50px;



  mask-image: linear-gradient(

    0deg,

    #000 0%,



    #000 calc(100% - 50px),

    transparent 100%

  );

}



#rsl_layers .layers-content {

  padding: 0 0 13dvh;

}



#rsl_layers .layer {

  opacity: 1 !important;



  height: 50dvh;



  margin-bottom: -15dvh;



  position: sticky;



  top: 0;



  background-position: center bottom;



  display: grid;



  place-items: flex-end flex-start;

}



#rsl_layers .layer-gap {

  height: 100dvh;

}



#rsl_layers .layer:nth-child(1) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 1.2) - var(--layer-height)

  );



  z-index: 9;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-1.webp");

}



#rsl_layers .layer:nth-child(2) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 2.2) - var(--layer-height)

  );



  z-index: 8;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-2.webp");

}



#rsl_layers .layer:nth-child(3) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 3.2) - var(--layer-height)

  );



  z-index: 7;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-3.webp");

}



#rsl_layers .layer:nth-child(4) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 4.2) - var(--layer-height)

  );



  z-index: 6;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-4.webp");

}



#rsl_layers .layer:nth-child(5) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 5.2) - var(--layer-height)

  );



  z-index: 5;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-5.webp");

}



#rsl_layers .layer:nth-child(6) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 6.2) - var(--layer-height)

  );



  z-index: 4;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-6.webp");

}



#rsl_layers .layer:nth-child(7) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 7.2) - var(--layer-height)

  );



  z-index: 3;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-7.webp");

}



#rsl_layers .creditos {

  z-index: 10;



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;

}



#rsl_layers .creditos-content {

  width: 100%;



  max-width: 900px;



  margin: calc(var(--header-height) + 100px) auto;



  position: sticky;



  top: calc(var(--header-height) + 100px);

}



#rsl_layers .group {

  padding: 25px;

}



#rsl_layers .group-content {

  width: 200px;



  text-align: center;



  margin: 0;

}



#rsl_layers .group-title {

  display: block;



  color: var(--color-10);



  font-size: 1rem;



  font-weight: 700;

}



#rsl_layers .name {

  display: block;



  color: var(--color-10);



  font-size: 1.1rem;



  font-weight: 800;

}



#rsl_layers .group:nth-child(1) {

  animation-delay: 0s;

}



#rsl_layers .group:nth-child(2) {

  animation-delay: 0.4s;

}



#rsl_layers .group:nth-child(3) {

  animation-delay: 0.8s;

}



#rsl_layers .group:nth-child(4) {

  animation-delay: 1.2s;

}



#rsl_layers .group:nth-child(1) .group-content {

  margin-left: 0;

}



#rsl_layers .group:nth-child(2) .group-content {

  margin-left: calc(35% - 100px);

}



#rsl_layers .group:nth-child(3) .group-content {

  margin-left: calc(61% - 100px);

}



#rsl_layers .group:nth-child(4) .group-content {

  margin-left: calc(100% - 200px);

}



#rsl_timer {

  background-image: linear-gradient(0deg, transparent 0%, var(--color-99) 100%);



  padding: 0;



  --timer-width: 160px;



  transition: 0.3s;



  opacity: 1;



  z-index: 888;



  position: sticky;



  top: var(--header-height);

}



#rsl_timer .ronin-container {

  margin: 0 auto;



  display: grid;

}



#rsl_timer .ronin-content {

  padding: 0;



  display: grid;

}



#rsl_timer .date {

  text-align: center;



  background-color: #fafafa;



  padding: 3px 5px;

}



#rsl_timer .date-txt {

  display: inline-block;



  font-family: "Bebas Neue";



  font-size: 0.9rem;



  font-weight: 500;



  color: #000;

}



#rsl_timer .date-txt span {

  font-size: inherit;



  font-family: inherit;

}



#rsl_timer .date-txt span.mes {

  font-family: "Petrona";

}



#rsl_timer .block {

  display: grid;



  place-items: center;

}



#rsl_timer .hour {

  display: flex;



  max-width: 80px;



  margin: 0 auto;



  flex-direction: row;



  flex-wrap: wrap;



  gap: 5px;



  justify-content: center;



  background-color: #fafafa;



  padding: 0 5px 3px;

}



#rsl_timer .hour-txt {

  display: inline-block;



  font-family: "Bebas Neue";



  font-size: 1.5rem;



  font-weight: 500;



  line-height: 100%;



  color: #000;

}



#rsl_timer .date-data {

  transition: 0.3s;



  opacity: 1;

}



#rsl_intro {

  padding: clamp(50px, 10dvw, 90px) 0;

}



#rsl_barranco {

  padding: clamp(50px, 10dvw, 90px) 0 0;

}



#rsl_barranco .ed-image::before {

  z-index: 5;



  content: "";



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 15%;



  background-image: linear-gradient(0deg, transparent 0%, var(--color-99) 100%);

}



#rsl_barranco .ed-image::after {

  z-index: 5;



  content: "";



  position: absolute;



  bottom: 0;



  left: 0;



  width: 100%;



  height: 15%;



  background-image: linear-gradient(0deg, var(--color-99) 0%, transparent 100%);

}



#rsl_barranco .ed-description {

  margin: 50px 0;

}



#rsl_barranco .ed-title {

  margin: 50px 0 0;

}



@keyframes caudal {

  0% {

    background-position: 2000px bottom;

  }



  100% {

    background-position: 0 bottom;

  }

}



@keyframes caudal2 {

  0% {

    background-position: 0 bottom;

  }



  100% {

    background-position: 2000px bottom;

  }

}



#rsl_medidor {

  padding: 0;

}



#rsl_medidor .rs-items-bg {

  position: sticky;



  top: var(--header-height);



  overflow: hidden;



  left: 0;



  width: 100%;



  height: calc(100dvh - var(--header-height));



  z-index: 1001;

}



#rsl_medidor .rs-items-bg .caudal-container {

  position: absolute;



  width: 100%;



  height: 100%;



  top: 0;



  left: 0;

}



#rsl_medidor .rs-items-bg .waves {

  transition: 1.5s;



  opacity: 0.5;



  position: absolute;



  width: 100%;



  height: 100%;



  bottom: calc(-100% - 10px);



  left: 0;

}



#rsl_medidor .rs-items-bg .wave {

  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/wave-texture.webp?v1");



  position: absolute;



  bottom: 0;



  left: 0;



  height: 100%;



  width: 100%;



  background-size: 2000px 100%;



  background-position: center top;



  background-repeat: repeat-x;

}



#rsl_medidor .rs-items-bg .wave:nth-child(1) {

  opacity: 1;



  z-index: 50;



  bottom: 0;



  animation: caudal 30s linear infinite;

}



#rsl_medidor .rs-items-bg .wave:nth-child(2) {

  opacity: 0.75;



  z-index: 40;



  bottom: 20px;



  animation: caudal2 4s linear infinite;

}



#rsl_medidor .rs-items-bg .wave:nth-child(3) {

  opacity: 0.5;



  z-index: 30;



  bottom: 40px;



  animation: caudal 2s linear infinite;

}



#rsl_medidor .rs-items-bg .wave:nth-child(4) {

  opacity: 0.25;



  z-index: 20;



  bottom: 60px;



  animation: caudal2 2s linear infinite;

}



#rsl_medidor .rs-items-bg .chart-container {

  mix-blend-mode: multiply;



  z-index: 90;



  position: absolute;



  top: var(--header-height);



  left: 0;



  width: 100dvw;



  max-width: 100%;



  height: calc(100% - 15px);

}



#rsl_medidor .rs-items-bg .chart {

  transition: 0.5s;



  position: absolute;



  top: 20px;



  left: 15px;



  width: calc(100% - 30px);



  height: calc(100% - 80px);



  border: 1px solid var(--color-03);



  border-top: none;

}



#rsl_medidor.no-chart .rs-items-bg .chart {

  transition: 0.5s;



  opacity: 0;

}



#rsl_medidor .rs-items-bg .legend {

  position: absolute;



  top: -35px;



  right: 0;



  color: var(--color-03);



  font-weight: 600;

}



#rsl_medidor .rs-items-bg .level {

  text-align: right;



  height: 20%;



  color: var(--color-03);

}



#rsl_medidor .rs-items-bg .level::after {

  content: "";



  position: absolute;



  top: 0;



  left: 0;



  width: calc(100% - 60px);



  border-top: 1.5px dashed var(--color-08);

}



#rsl_medidor .rs-items-bg .level span {

  font-family: "Bebas Neue";



  font-weight: 500;



  display: inline-block;



  padding-right: 20px;



  top: -13px;

}



#rsl_medidor .rs-items-bg .level span::after {

  content: "";



  position: absolute;



  top: 50%;



  right: 0;



  width: 10px;



  height: 2px;



  background-color: var(--color-03);

}



#rsl_medidor .rs-items {

  z-index: 10;



  mix-blend-mode: multiply;

}



#rsl_medidor .rs-items .rs-item {

  padding: 0;



  display: grid;



  place-items: center;

}



#rsl_medidor .rs-items .rs-item-content {

  width: 100%;

}



#rsl_medidor .rs-items .rs-item:nth-child(1) {

  height: auto;



  margin-top: -50dvh;

}



#rsl_medidor .rs-items .rs-item:nth-child(1) .image {

  margin: clamp(50px, 10dvw, 90px) 0;

}



#rsl_medidor .rs-items .rs-item:nth-child(2) .image {

  margin: clamp(50px, 10dvw, 90px) 0;

}



#rsl_medidor .rs-items .rs-item:nth-child(2) .image-2 {

  margin: clamp(50px, 10dvw, 90px) 0;

}



#rsl_medidor .rs-items .rs-item:nth-child(3) {

  padding-bottom: 0;

}



#rsl_medidor .rs-items .rs-item:nth-child(3) .image {

  margin: clamp(50px, 10dvw, 90px) 0;

}



#rsl_medidor .rs-items .rs-item:nth-child(3) .image:last-child {

  margin: clamp(50px, 10dvw, 90px) 0;

}



#rsl_medidor .rs-items .rs-item:nth-child(4) .image-1 {

  margin: clamp(50px, 10dvw, 90px) 0;

}



#rsl_medidor .rs-items .rs-item:nth-child(4) .image-2 {

  margin: clamp(50px, 10dvw, 90px) 0 0;

}



#rsl_sedimentos {

  padding: clamp(50px, 10dvw, 90px) 0;



  --layer-height: 50dvh;



  --layer-gap: 13dvh;



  background-color: var(--color-09);

}



#rsl_sedimentos::before {

  z-index: 1005;



  content: "";



  position: absolute;



  top: -100px;



  left: 0;



  width: 100%;



  height: 100px;



  background-image: linear-gradient(0deg, var(--color-09) 0%, transparent 100%);

}



#rsl_sedimentos .layers {

  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  opacity: 0.7;



  transform: rotate(180deg);



  overflow: hidden;

}



#rsl_sedimentos .layer {

  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: var(--layer-height);

}



#rsl_sedimentos .ronin-container {

  z-index: 10;

}



#rsl_sedimentos .layer:nth-child(1) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 1.2) - var(--layer-height)

  );



  z-index: 9;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-1.webp");

}



#rsl_sedimentos .layer:nth-child(2) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 2.2) - var(--layer-height)

  );



  z-index: 8;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-2.webp");

}



#rsl_sedimentos .layer:nth-child(3) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 3.2) - var(--layer-height)

  );



  z-index: 7;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-3.webp");

}



#rsl_sedimentos .layer:nth-child(4) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 4.2) - var(--layer-height)

  );



  z-index: 6;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-4.webp");

}



#rsl_sedimentos .layer:nth-child(5) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 5.2) - var(--layer-height)

  );



  z-index: 5;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-5.webp");

}



#rsl_sedimentos .layer:nth-child(6) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 6.2) - var(--layer-height)

  );



  z-index: 4;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-6.webp");

}



#rsl_sedimentos .layer:nth-child(7) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 7.2) - var(--layer-height)

  );



  z-index: 3;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-7.webp");

}



.grid video {

  object-fit: cover;



  object-position: center;



  display: block;



  width: 100%;



  height: 100%;

}



.grid img {

  object-fit: cover;



  object-position: center;



  display: block;



  width: 100%;



  height: 100%;

}



.grid .block {

  padding: 20px;

}



.grid .block-location {

  z-index: 5;



  font-weight: 700;



  display: inline-block;



  background-color: #0000005e;



  color: var(--color-99);



  padding: 3px 10px 2px;

}



.grid .block-time {

  z-index: 5;



  font-family: "Bebas Neue";



  font-weight: 500;



  display: inline-block;



  background-color: #0000005e;



  color: var(--color-99);



  padding: 1px 10px 2px;

}



#rsl_mosaico {

  padding: 0;

}



#rsl_mosaico .ronin-container {

  z-index: 1;



  max-width: 100%;

}



#rsl_mosaico .ronin-content {

  max-width: 100%;



  padding: 0;

}



#rsl_mosaico .grid {

  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 0;

}



#rsl_mosaico .block {

  background-color: #0004;



  height: calc(100dvw / 4 * 1.6);



  overflow: hidden;

}



#rsl_mosaico .block:nth-child(6n + 3),

#rsl_mosaico .block:nth-child(6n + 4) {

  grid-column: span 2;

}



#rsl_mosaico .grid-over-container {

  transition: 1s opacity, z-index 0s 1s;



  opacity: 1;



  z-index: 5;



  position: absolute;



  width: 100%;



  max-width: 100dvw;



  height: 100%;



  top: 0;



  left: 0;

}



#rsl_mosaico .grid-over-container.hidden {

  transition: 1s opacity, z-index 0s 1s;



  opacity: 0;



  z-index: 0;

}



#rsl_mosaico .grid-over-content {

  max-width: 100dvw;



  width: 900px;

}



#rsl_mosaico .grid-over {

  display: grid;



  place-items: center;



  margin-top: calc(100dvw / 2 * 1.6);



  position: sticky;



  width: 100%;



  /* antes: height: calc(100dvh - var(--header-height)); */



  /* antes: top: var(--header-height); */



  top: 0;



  height: 100dvh;

}



#rsl_mosaico .grid-over::before {

  content: "";



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  background-image: linear-gradient(0deg, #000c 0%, #0008 50%, #000c 100%);

}



#rsl_mosaico .info-top {

  transition: 1s;



  position: absolute;



  top: calc(var(--header-height) + 25px);



  left: calc(50% - 60px);



  text-align: center;



  width: 120px;

}



#rsl_mosaico .info-top-title {

  font-family: "Open Sans";



  opacity: 0.8;



  font-size: 0.6rem;



  margin: 0 0 10px;



  text-transform: uppercase;



  color: var(--color-99);



  opacity: 0.8;



  text-transform: uppercase;

}



#rsl_mosaico .mute-button-bottom {

  width: 50px;



  aspect-ratio: 1;



  display: grid;



  place-items: center;



  margin: 0 auto;



  background-color: #fafafa;



  border-radius: 50%;



  cursor: pointer;



  user-select: none;

}



#rsl_mosaico .mute-button-bottom::after {

  content: "";



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  z-index: 10;

}



#rsl_mosaico .info-bottom {

  z-index: 20;



  position: absolute;



  bottom: 25px;



  left: calc(50% - 150px);



  text-align: center;



  width: 300px;

}



#rsl_mosaico .info-bottom-button {

  transition: 0.5s;



  font-family: "Open Sans";



  display: inline-block;



  text-transform: uppercase;



  min-width: 100px;



  font-size: 0.7rem;



  padding: 10px 15px;



  border-radius: 100px;



  border: 1px solid #fffc;



  color: #fffc;



  text-align: center;



  margin: 0 0 25px;



  cursor: pointer;



  user-select: none;

}



#rsl_mosaico .info-bottom-button:hover {

  transition: 0.5s;



  color: #000;



  background-color: #fafafa;

}



#rsl_mosaico .info-bottom-title {

  font-family: "Open Sans";



  opacity: 0.8;



  font-size: 0.6rem;



  margin: 0 0 15px;



  text-transform: uppercase;



  color: var(--color-99);



  opacity: 0.8;



  text-transform: uppercase;

}



#rsl_mosaico .audio-bottom {

  text-align: center;



  margin: 0;



  padding: 15px;



  width: 100%;

}



#rsl_mosaico .audio-bottom-title {

  color: var(--color-99);



  margin: 0 0 20px;

}



#rsl_mosaico .audio-bottom-image {

  margin: 35px 0;

}



#rsl_mosaico .audio-bottom-image img {

  width: 100%;



  height: 50px;



  object-fit: cover;



  object-position: center center;

}



#rsl_mosaico .audio-bottom-description {

  color: var(--color-99);



  margin: 20px 0 0;



  min-height: 110px;

}



#rsl_mosaico .audio-bottom-description #audio_bottom_text_01 {

  font-weight: 900;

}



#rsl_mosaico .audio-bottom-description i {

  color: inherit;



  font-style: italic;

}



#rsl_zonas {

  padding: clamp(50px, 10dvw, 90px) 0 clamp(50px, 10dvw, 50px);



  background-color: var(--color-05);



  margin-bottom: -5px;

}



#rsl_zonas .ed-description {

  margin: 50px 0;

}



#rsl_afectados {

  padding: clamp(50px, 10dvw, 90px) 0 0;



  background-color: var(--color-09);

}



#rsl_afectados .parallax {

  margin: clamp(50px, 10dvw, 90px) 0 0;

}



#rsl_afectados .ed-image {

  margin: clamp(50px, 10dvw, 90px) 0;

}



#rsl_antes_despues {

  padding: clamp(50px, 10dvw, 90px) 0 0;



  background-color: var(--color-09);

}



#rsl_antes_despues .grid {

  margin: 0;



  max-width: 100%;



  padding: 0;



  display: grid;



  grid-template-columns: repeat(4, 1fr);

}



#rsl_antes_despues .block {

  background-color: #0004;



  height: calc(100dvw / 4 * 1.6);



  overflow: hidden;

}



#rsl_antes_despues .block:nth-child(7n + 2) {

  grid-column: span 2;

}



#rsl_ayudas {

  padding: clamp(50px, 10dvw, 90px) 0;



  background-color: var(--color-09);

}



#rsl_ayudas .ed-image {

  margin: clamp(50px, 10dvw, 90px) 0;

}



#rsl_que {

  padding: clamp(50px, 10dvw, 90px) 0;



  --layer-height: 50dvh;



  --layer-gap: 13dvh;



  overflow: hidden;

}



#rsl_que::after {

  z-index: 5;



  content: "";



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100px;



  background-image: linear-gradient(0deg, transparent 0%, var(--color-09) 100%);

}



#rsl_que .layers {

  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  opacity: 0.7;

}



#rsl_que .layer {

  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: var(--layer-height);

}



#rsl_que .ronin-container {

  z-index: 10;

}



#rsl_que .layer:nth-child(1) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 3.2) - var(--layer-height)

  );



  z-index: 9;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-1.webp");

}



#rsl_que .layer:nth-child(2) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 4.2) - var(--layer-height)

  );



  z-index: 8;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-2.webp");

}



#rsl_que .layer:nth-child(3) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 5.2) - var(--layer-height)

  );



  z-index: 7;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-3.webp");

}



#rsl_que .layer:nth-child(4) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 6.2) - var(--layer-height)

  );



  z-index: 6;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-4.webp");

}



#rsl_que .layer:nth-child(5) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 7.2) - var(--layer-height)

  );



  z-index: 5;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-5.webp");

}



#rsl_que .layer:nth-child(6) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 8.2) - var(--layer-height)

  );



  z-index: 4;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-6.webp");

}



#rsl_que .layer:nth-child(7) {

  top: calc(

    var(--header-height) + (var(--layer-gap) * 9.2) - var(--layer-height)

  );



  z-index: 3;



  background-image: url("https://s2.elespanol.com/upload/arte/especiales/dana/assets/images/texture-layer-7.webp");

}



#rsl_que .image-2 {

  margin: clamp(50px, 10dvw, 90px) 0;

}



/*============================================================================*/



@media only screen and (max-width: 400px) {

  #rsl_layers .group-content {

    margin: 0 auto !important;

  }

}



@media only screen and (max-width: 600px) {

  #rsl_layers .group:nth-child(2) .group-content {

    margin-left: calc(41% - 100px);

  }



  #rsl_layers .group:nth-child(3) .group-content {

    margin-left: calc(58% - 100px);

  }



  #rsl_medidor {

    --padding: 45px;

  }



  #rsl_medidor .rs-items-bg .legend {

    top: -25px;

  }



  #rsl_medidor .rs-items-bg .legend span {

    font-size: 0.9rem;



    letter-spacing: -1px;

  }



  #rsl_medidor .rs-items-bg .level::after {

    display: none;

  }



  #rsl_medidor .rs-items-bg .level span {

    top: 2px;



    padding-right: 3px;

  }



  #rsl_medidor .rs-items-bg .level span::after {

    width: 3px;



    top: calc(50% - 15px);

  }



  #rsl_mosaico .grid {

    grid-template-columns: repeat(2, 1fr);

  }



  #rsl_mosaico .block {

    height: calc(100dvw / 2 * 1.6);

  }



  #rsl_mosaico .grid-over {

    margin-top: calc(100dvw * 1.6);

  }



  #rsl_antes_despues .grid {

    grid-template-columns: repeat(2, 1fr);

  }



  #rsl_antes_despues .block:nth-child(1) {

    order: 1;

  }



  #rsl_antes_despues .block:nth-child(2) {

    order: 3;

  }



  #rsl_antes_despues .block:nth-child(3) {

    order: 2;

  }



  #rsl_antes_despues .block:nth-child(4) {

    order: 4;

  }



  #rsl_antes_despues .block:nth-child(5) {

    order: 5;

  }



  #rsl_antes_despues .block:nth-child(6) {

    order: 6;

  }



  #rsl_antes_despues .block:nth-child(7) {

    order: 7;

  }



  #rsl_antes_despues .block:nth-child(8) {

    order: 8;

  }



  #rsl_antes_despues .block:nth-child(9) {

    order: 10;

  }



  #rsl_antes_despues .block:nth-child(10) {

    order: 9;

  }



  #rsl_antes_despues .block:nth-child(11) {

    order: 11;

  }



  #rsl_antes_despues .block:nth-child(12) {

    order: 12;

  }



  #rsl_antes_despues .block:nth-child(13) {

    order: 13;

  }



  #rsl_antes_despues .block:nth-child(14) {

    order: 14;

  }



  #rsl_antes_despues .block:nth-child(15) {

    order: 15;

  }



  #rsl_antes_despues .block:nth-child(16) {

    order: 17;

  }



  #rsl_antes_despues .block:nth-child(17) {

    order: 16;

  }



  #rsl_antes_despues .block {

    height: calc(100dvw / 2 * 1.6);

  }

}



@media only screen and (min-width: 600px) and (max-width: 900px) {

  #rsl_mosaico .grid {

    display: grid;



    grid-template-columns: repeat(2, 1fr);

  }



  #rsl_mosaico .block {

    background-color: #0004;



    height: calc(100dvw / 2 * 1.6);

  }



  #rsl_antes_despues .grid {

    grid-template-columns: repeat(2, 1fr);

  }



  #rsl_mosaico .grid-over {

    margin-top: calc(100dvw * 1.6);

  }



  #rsl_antes_despues .block:nth-child(1) {

    order: 1;

  }



  #rsl_antes_despues .block:nth-child(2) {

    order: 3;

  }



  #rsl_antes_despues .block:nth-child(3) {

    order: 2;

  }



  #rsl_antes_despues .block:nth-child(4) {

    order: 4;

  }



  #rsl_antes_despues .block:nth-child(5) {

    order: 5;

  }



  #rsl_antes_despues .block:nth-child(6) {

    order: 6;

  }



  #rsl_antes_despues .block:nth-child(7) {

    order: 7;

  }



  #rsl_antes_despues .block:nth-child(8) {

    order: 8;

  }



  #rsl_antes_despues .block:nth-child(9) {

    order: 10;

  }



  #rsl_antes_despues .block:nth-child(10) {

    order: 9;

  }



  #rsl_antes_despues .block:nth-child(11) {

    order: 11;

  }



  #rsl_antes_despues .block:nth-child(12) {

    order: 12;

  }



  #rsl_antes_despues .block:nth-child(13) {

    order: 13;

  }



  #rsl_antes_despues .block:nth-child(14) {

    order: 14;

  }



  #rsl_antes_despues .block:nth-child(15) {

    order: 15;

  }



  #rsl_antes_despues .block:nth-child(16) {

    order: 17;

  }



  #rsl_antes_despues .block:nth-child(17) {

    order: 16;

  }



  #rsl_antes_despues .block {

    height: calc(100dvw / 2 * 1.6);

  }

}