/*** DESKTOPS (X-LARGE SCREEN) *****************************************************/
@media (min-width: 1920px) {

}

/*** DESKTOPS (LARGE SCREEN) *****************************************************/
@media (min-width: 1600px) {

}

/*** NOTEBOOKS (MEDIUM SCREEN) *****************************************************/
@media (min-width: 1024px) {

}

/*** FROM TABLETS TO MOBILES *****************************************************/
@media (max-width: 1023px) {

  :root {
    /*** VIEWPORT HEIGHT ***/
    --viewportHeight: calc(var(--vh, 1vh) * 100);
  }
.anim-holder,
  .anim-holder2 {
    display: none;
  }

  body {
    height: 100vh; /* Fallback */
    height: var(--viewportHeight);
  }

  .imagenes-top-right .sombra {
    display: none;
  }

    .list {
    margin-top: 0.2rem;
    padding-top: 0;
  }

  .list_row {
    display: flex;
    flex-direction: column;
    gap: 0;
    color: #0202dc;
  }
 .row_year,
  .row_title {
    line-height: 0.3;
  }

  .row_year {
    font-size: var(--fontSizeMedium);
  }

  .row_title {
    font-size: var(--fontSizeMedium);
    padding-left: 0rem;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
  }

  .row_type {
     font-size: var(--fontSizeMedium);
  }
 .imagenes-top-right .texto {
    content: url("../media/blur-5.png");
    position: fixed;
    width: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.35;
    pointer-events: none;
  }

  .anim-holder {
    position: relative;
    grid-column: 1 / span 10;
    padding: calc(var(--spaceY) * 1) var(--spaceX);
  }
    /*** FOOTER ***/
  footer {
    position: fixed;
    bottom: 0;
    display: grid;
    grid-column: 1 / span 12;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--colGutter);
    justify-content: space-between;
    min-height: var(--footerHeight);
    font-size: var(--fontSizeSmall);
    padding: var(--spaceY) var(--spaceX);
  }

  nav.footer_menu,
  nav.footer_menu ul {
    display: contents;
    list-style: none;
    text-decoration: none;
  }

  .footer_item {
    list-style: none;
    text-decoration: none;
    font-size: var(--fontSizeSmall);
  }

  .footer1 {
    grid-column: 1 / span 2;
    position: relative;
    display: inline-block;
    padding: 0.25em 0.45em;
    font-size: var(--fontSizeSmall);
    color: var(--textColor);
    text-decoration: none;
  }

  .footer2 {
    grid-column: 3 / span 2;
  }

  .footer3 {
    grid-column: 10 / span 2;
  }

  footer a {
    text-decoration: none;
    color: var(--paletteViolet);
  }
}

/*** TABLETS, MOBILES (LANDSCAPE) *****************************************************/
@media (min-width: 481px) and (max-width: 1023px) {

  :root {
    --fontSizeSmall: 0.9rem;
    --fontSizeMedium: 0.9rem;
    --fontSizeLarge: 1rem;
  }

  .imagenes-top-right .sombra {
    display: none;
  }
  .anim-holder,
  .anim-holder2 {
    display: none;
  }

   .list {
    margin-top: 0.2rem;
    padding-top: 0;
  }

  .list_row {
    display: flex;
    flex-direction: column;
    gap: 0;
    color: #0202dc;
  }
    .row_year,
  .row_title {
    line-height: 0.3;
  }

  .row_year {
    font-size: var(--fontSizeMedium);
  }

  .row_title {
    font-size: var(--fontSizeMedium);
    padding-left: 0rem;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
  }

  .row_type {
    display: none;
  }

  .imagenes-top-right .texto {
    content: url("../media/blur-5.png");
    position: fixed;
    width: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.35;
    pointer-events: none;
  }
    /*** FOOTER ***/
  footer {
    position: fixed;
    bottom: 0;
    display: grid;
    grid-column: 1 / span 12;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--colGutter);
    justify-content: space-between;
    min-height: var(--footerHeight);
    font-size: var(--fontSizeSmall);
    padding: var(--spaceY) var(--spaceX);
  }

  nav.footer_menu,
  nav.footer_menu ul {
    display: contents;
    list-style: none;
    text-decoration: none;
  }

  .footer_item {
    list-style: none;
    text-decoration: none;
    font-size: var(--fontSizeSmall);
  }

  .footer1 {
    grid-column: 1 / span 2;
    position: relative;
    display: inline-block;
    padding: 0.25em 0.45em;
    font-size: var(--fontSizeSmall);
    color: var(--textColor);
    text-decoration: none;
  }

  .footer2 {
    grid-column: 3 / span 2;
  }

  .footer3 {
    grid-column: 10 / span 2;
  }

  footer a {
    text-decoration: none;
    color: var(--paletteViolet);
  }
}

/*** MOBILES (PORTRAIT) *****************************************************/
@media (max-width: 480px) {

  :root {
    --fontSizeSmall: 0.7rem;
    --fontSizeMedium: 0.9rem;
    --fontSizeLarge: 1rem;
  }

  .anim-holder,
  .anim-holder2 {
    display: none;
  }

  html,
  body {
    height: 100%;
  }

  ::selection {
    background: var(--paletteViolet);
    color: white;
  }

  ::-moz-selection {
    background: var(--paletteViolet);
    color: white;
  }

  .layout {
    display: flex;
    flex-direction: column;
  }

  .list {
    margin-top: 0.2rem;
    padding-top: 0;
  }

  .list_row {
    display: flex;
    flex-direction: column;
    gap: 0;
    color: #0202dc;
  }

  .row_year,
  .row_title {
    line-height: 0.3;
  }

  .row_year {
    font-size: var(--fontSizeMedium);
  }

  .row_title {
    font-size: var(--fontSizeMedium);
    padding-left: 0rem;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
  }

  .row_type {
    display: none;
  }

  .list_row:hover::before {
    opacity: 0;
  }

  .imagenes-top-right .sombra {
    display: none;
  }

  .imagenes-top-right .texto {
    content: url("../media/blur-5.png");
    position: fixed;
    width: 170%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
    z-index: 0;
    max-width: 170vw;
    max-height: 90vh;
    pointer-events: none;
  }

  .eje-vertical,
  .eje-vertical-sombra,
  .eje-horizontal,
  .eje-horizontal-sombra {
    display: none;
  }

  /*** FOOTER ***/
  footer {
    position: fixed;
    bottom: 0;
    display: grid;
    grid-column: 1 / span 12;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--colGutter);
    justify-content: space-between;
    min-height: var(--footerHeight);
    font-size: var(--fontSizeSmall);
    padding: var(--spaceY) var(--spaceX);
  }

  nav.footer_menu,
  nav.footer_menu ul {
    display: contents;
    list-style: none;
    text-decoration: none;
  }

  .footer_item {
    list-style: none;
    text-decoration: none;
    font-size: var(--fontSizeSmall);
  }

  .footer1 {
    grid-column: 1 / span 2;
    position: relative;
    display: inline-block;
    padding: 0.25em 0.45em;
    font-size: var(--fontSizeSmall);
    color: var(--textColor);
    text-decoration: none;
  }

  .footer2 {
    grid-column: 3 / span 2;
  }

  .footer3 {
    grid-column: 10 / span 2;
  }

  footer a {
    text-decoration: none;
    color: var(--paletteViolet);
  }
}