@charset "utf-8";
/* CSS Document */

/* ======================================================
   ÁLBUM FRACTAL 423px
   Cyberfractal - Fractales estáticos 2001
====================================================== */

/* CONTENEDOR GENERAL DEL ÁLBUM */
.album-contenedor-423 {
  width:423px;
  max-width:423px;
  margin:18px auto 0 auto;
  padding:10px 8px 14px 8px;
  box-sizing:border-box;
  text-align:center;
  background:#2f2f2f;
  overflow:visible;
  position:relative;
  z-index:5;
}

.album-contenedor-423,
.album-contenedor-423 * {
  box-sizing:border-box;
}

/* ======================================================
   TÍTULO / INTRO / PIE
====================================================== */

.album-titulo-423 {
  width:100%;
  margin:0 auto 12px auto;
  padding:8px 8px;
  box-sizing:border-box;

  text-align:center;
  color:#d6b85c;
  font-size:16px;
  line-height:1.3;
  letter-spacing:0.8px;

  border-top:1px solid rgba(214,184,92,0.45);
  border-bottom:1px solid rgba(214,184,92,0.45);
  background:rgba(0,0,0,0.18);

  text-shadow:
    0 0 6px rgba(214,184,92,0.65),
    0 0 12px rgba(214,184,92,0.25);
}

.album-subtitulo-423 {
  font-size:11px;
  color:#f0d98a;
  letter-spacing:1.2px;
}

.album-intro-423 {
  width:92%;
  margin:0 auto 12px auto;

  color:#e6e6e6;
  font-size:12px;
  line-height:1.45;
  text-align:justify;
}

.album-pie-423 {
  width:90%;
  margin:14px auto 0 auto;
  padding-top:8px;

  border-top:1px solid rgba(214,184,92,0.35);

  color:#d6b85c;
  font-size:11px;
  line-height:1.4;
  text-align:center;
}

/* ======================================================
   TABLA DEL ÁLBUM
====================================================== */

.album-fractal-423 {
  width:100%;
  max-width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  margin:0 auto;

  overflow:visible;
  position:relative;
  z-index:10;
}

.album-fractal-423 tr,
.album-fractal-423 td {
  overflow:visible;
}

.album-fractal-423 td {
  width:33%;
  padding:4px;
  text-align:center;
  vertical-align:top;
  position:relative;
  z-index:1;
}

.album-fractal-423 td:hover,
.album-fractal-423 td:focus-within {
  z-index:10000;
}

/* ======================================================
   ENLACES
====================================================== */

.album-fractal-423 a {
  display:inline-block;
  position:relative;
  text-decoration:none;
  cursor:zoom-in;
  outline:none;
  z-index:1;
}

.album-fractal-423 a:hover,
.album-fractal-423 a:focus {
  z-index:10000;
}

/* ======================================================
   MINIATURAS SIN RECORTE
====================================================== */

.album-fractal-423 img {
  display:block;
  width:120px;
  height:90px;
  margin:0 auto;

  object-fit:contain;
  background:#111;

  border:1px solid rgba(214,184,92,0.45);
  box-shadow:
    0 0 7px rgba(214,184,92,0.22);

  position:relative;
  z-index:1;

  cursor:zoom-in;

  transition:
    transform 0.28s ease,
    filter 0.28s ease,
    box-shadow 0.28s ease;

  -webkit-transition:
    -webkit-transform 0.28s ease,
    filter 0.28s ease,
    box-shadow 0.28s ease;
}

/* ======================================================
   DIRECCIÓN DE AMPLIACIÓN
====================================================== */

.album-fractal-423 td:nth-child(1) img {
  transform-origin:left center;
  -webkit-transform-origin:left center;
}

.album-fractal-423 td:nth-child(2) img {
  transform-origin:center center;
  -webkit-transform-origin:center center;
}

.album-fractal-423 td:nth-child(3) img {
  transform-origin:right center;
  -webkit-transform-origin:right center;
}

/* ======================================================
   AMPLIACIÓN EN LA MISMA PÁGINA
   PC: 1.85
   Celular: 1.55
====================================================== */

.album-fractal-423 a:hover img,
.album-fractal-423 a:focus img,
.album-fractal-423 img.fractal-ampliada {
  transform:scale(1.85);
  -webkit-transform:scale(1.85);

  z-index:9999;

  filter:brightness(1.24) contrast(1.05);

  box-shadow:
    0 0 14px rgba(214,184,92,0.85),
    0 0 26px rgba(214,184,92,0.45),
    0 0 40px rgba(0,0,0,0.90);
}

.album-fractal-423 img.fractal-ampliada {
  cursor:zoom-out;
}

/* ======================================================
   CAPTIONS OPCIONALES
====================================================== */

.album-fractal-423 .album-caption,
.album-fractal-423 .fractal-caption {
  display:block;
  width:120px;
  margin:4px auto 0 auto;
  padding:2px 3px;
  box-sizing:border-box;

  font-size:11px;
  line-height:1.25;
  color:#ff8a1c;
  text-align:center;

  background:rgba(0,0,0,0.22);
  border-top:1px solid rgba(214,184,92,0.25);

  text-shadow:
    0 0 4px rgba(255,120,20,0.55);
}

/* ======================================================
   AJUSTE PARA CELULAR
====================================================== */

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

  .album-contenedor-423 {
    width:100%;
    max-width:423px;
    padding-left:6px;
    padding-right:6px;
  }

  .album-fractal-423 td {
    padding:3px;
  }

  .album-fractal-423 img {
    width:110px;
    height:82px;
    object-fit:contain;
    background:#111;
  }

  .album-fractal-423 .album-caption,
  .album-fractal-423 .fractal-caption {
    width:110px;
    font-size:10px;
  }

  .album-fractal-423 a:hover img,
  .album-fractal-423 a:focus img,
  .album-fractal-423 img.fractal-ampliada {
    transform:scale(1.55);
    -webkit-transform:scale(1.55);
  }

}

/* ======================================================
   ÁLBUM GIF DINÁMICOS - AJUSTE COMPLEMENTARIO
====================================================== */

.album-gif-423 img {
  display:block;
  margin:0 auto;
  max-width:100%;
  height:auto;
  border:0;
}

.album-gif-423 td {
  overflow:visible;
}