.columna1 {
    height: 120vh;
    width: 98px;
    background: #2b2b2b;
    position: fixed;
    z-index: 1000;
}

.columna2 {
    height: 120vh;
    width: 111px;
    background: #2b2b2b;
    position: fixed;
    right: 0;
    z-index: 1000;
}

.content {
    z-index: 2000;
    COLOR: WHITE;    
    width: 100%;
    text-align: center;
    position: fixed;
    top: 2vh;
}

body {
    background: #353535;
    overflow: hidden;
  }
  .row {
    display: block;
    width: 100vw;
    height: 125px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: -35px;
    margin-left: -33px;
    --bs-gutter-x: -0.5rem;

  }
  .row .hexagon {
    position: relative;
    width: 100px;
    height: 57.74px;
    background-color: #2b2b2b;
    margin: 32.87px 2px;
    display: block;
    transition: all 0.2s linear;
  }
  .row .hexagon::after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    top: 100%;
    width: 0;
    border-top: 28.87px solid #2b2b2b;
    transition: all 0.2s linear;
  }
  .row .hexagon::before {
    content: "";
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    bottom: 100%;
    border-bottom: 28.87px solid #2b2b2b;
    transition: all 0.2s linear;
  }
  .row.row-moved {
    margin-left: 19px;
  }
  .cursor {
    width: 350px;
    height: 350px;
    border-radius: 100%;
    position: absolute;
    box-shadow: 2px -3px 41px -1px rgba(241, 196, 15, 0.64);
    z-index: 0;
    opacity: 0;
    background: linear-gradient(45deg, #e8f74d, #ff6600d9, #00ff66, #13ff13, #ad27ad, #bd2681, #6512b9, #ff3300de, #5aabde);
    background-size: 400%;
    animation: glower 20s linear infinite;
    filter: blur(40px);
  }
  @keyframes glower {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 400% 0;
    }
    100% {
      background-position: 0 0;
    }
  }
  

  /* **************************************** */
  *, *:after, *:before {
    box-sizing: inherit;
  }
  * {margin:0;padding:0;border: 0 none; position: relative;}
  :root {
    --sinSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    /* hexagon */
      --gap: 2vmin;
      --radio: calc(100vmin / 3);
      --width: calc(var(--radio) * .866);
      --height: var(--radio);
    /* colors */
      --negroO: #1d1f20;
      --negroM: #292f33;
      --negroC: rgba(68, 68, 72, 0.2);
      --gris: #999;
      --blancoS: #e1e8ed;
  }
  html {
    box-sizing: border-box;
    font-family: var(--sinSerif);
    font-size: 1rem;
    color: var(--gris)
  }
  body {
    background: var(--negroO);
    overflow-x: scroll;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-content: center;
    color: var(--gris);
  }
  /* Making the grid */
  section {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 2vmin;
    max-width: 100vmin;
    padding-left: 2vmin;
    margin: .5rem auto;
  }
  article {
    background: var(--negroC);
    width: var(--width); 
    height: var(--height);
    overflow: hidden;
    transition: 1s;
    clip-path: url(#hexa-v);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    filter: drop-shadow(0 0 1px #fff);
  }
  /* making the honeycomb */
  article:nth-of-type(1) {  
    grid-column: 2 / span 2;
    grid-row: 1;  
  }
  article:nth-of-type(2) {  
    grid-column: 4 / span 2;
    grid-row: 1;  
  }
  article:nth-of-type(3) {  
    grid-column: 1 / span 2;
    grid-row: 2;  
  }
  article:nth-of-type(4) {  
    grid-column: 3 / span 2;
    grid-row: 2;  
  }
  article:nth-of-type(5) {  
    grid-column: 5 / span 2;
    grid-row: 2;  
  }
  article:nth-of-type(6) {  
    grid-column: 2 / span 2;
    grid-row: 3;  
  }
  article:nth-of-type(7) {  
    grid-column: 4 / span 2;
    grid-row: 3;  
  }
  
  /* A small adjustment in the vertical */
  article:nth-of-type(-n+2) {
    margin-bottom: calc(var(--height) * -.2);
  }
  article:nth-of-type(n+6):nth-of-type(-n+7) {
    margin-top: calc(var(--height) * -.2);
  }
  
  /* Ornamentales */
  header {
    background: var(--negroM);
    font-size: calc(1rem + 2vmin);
    font-variant: small-caps;
  }
  h1 {
    font-size: inherit;
    font-weight: 100;
    letter-spacing: 3px;
    line-height: 1.5;
    text-align: center;
    box-shadow: inset 0 0 1px 1px var(--negroC);
  }
  figure {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    height: 100%;
    font-size: calc(1rem + 1vmin);
    line-height: 1.2;
    transition: .75s .05s;
    hyphens: auto;
    text-align: center;
  }
  img,
  [class*='svg-icon'] {
    background: #000;
    min-width: var(--radio);
    min-height: var(--radio);
    max-widt: var(--width);
    max-height: var(--height);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 0%;
    transition: 1s;
    clip-path: url(#hexagono);
    clip-path: inherit;
    z-index:  10;
  }
  article:hover img,
  article:hover [class*='svg-icon'] {
    transform: translate(-50%, -50%) rotateY(.25turn);
  }
  h2 {
    font-size: 100%;
    font-weight: 200;
    font-variant: small-caps;
    padding: 0 2vw;
  }
  figure p {
    font-size: 70%;
    line-height: 1.2;
    font-weight: 100;
    width: 100%;
  }
  a {
    display: block;
    color: var(--gris);
    text-decoration: none;
  }
  a:hover {
    color: var(--blancoS);
  }
  .rss figure {
    background: #fff;
  }
  svg {
      clip-rule: evenodd;
      fill-rule: evenodd;
      clip-rule: evenodd;
      image-rendering: optimizequality;
      shape-rendering: geometricprecision;
      text-rendering: geometricprecision;
  }
  [class*='-codepen'] {
    fill: #000;
  }
  [class*='-blogger'] {
    fill: #F38936;
  }
  [class*='-face'] {
    fill: #3B5998;
  }
  [class*='-gplus'] {
    fill: #DC4E41;
  }
  [class*='-twitter'] {
    fill: #1DA1F2;
  }
  [class*='-whatsa'] {
    fill: #25D366;
  }
  [class*='-wp'] {
    fill: #21759B;
  }
  @media only screen and (max-width: 450px) {
    figure p {display: none;}
    figure h2 {font-size: 1rem;}
  }



  .modal {
    z-index: 9999;
  }


  /* *************************************** */
/*
  #container { display:block; height: 100vh}
  @media only screen and (orientation:portrait){
     #container {  
           -webkit-transform: rotate(90deg);
           -moz-transform: rotate(90deg);
           -o-transform: rotate(90deg);
           -ms-transform: rotate(90deg);
           transform: rotate(90deg);
          }

  }
  @media only screen and (orientation:landscape){
     #container {  
           -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
           -o-transform: rotate(0deg);
           -ms-transform: rotate(0deg);
           transform: rotate(0deg);
          }
  }*/