@import url(https://fonts.googleapis.com/css?family=Capriola);
* {margin: 0; padding: 0; border: none; position: relative;
}
*, *::before, *::after {box-sizing: inherit;}

body {
 background-color: hsl(93, 65%, 76%);
 background-image: repeating-linear-gradient(30deg, transparent, transparent 50px, rgba(99, 49, 139, 0.6) 50px, rgba(99, 49, 139,.6) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 116px, rgba(0,0,0,.4) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.4) 169px, rgba(0,0,0,.4) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.4) 182px, transparent 232px),
 repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(99, 49, 139, 0.6) 50px, rgba(99, 49, 139,.6) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 116px, rgba(0,0,0,.4) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.4) 169px, rgba(0,0,0,.4) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.4) 182px, transparent 232px),
 repeating-linear-gradient(150deg, transparent, transparent 50px, rgba(99, 49, 139, 0.6) 50px, rgba(99, 49, 139,.6) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 116px, rgba(0,0,0,.4) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.4) 169px, rgba(0,0,0,.4) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.4) 182px, transparent 232px)
 ,repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);
/*    background-color: rgb(232, 248, 213);
background-image: repeating-linear-gradient(90deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
  hsla(83, 75%, 49%, 0) 10px, hsla(83, 75%, 49%, 0) 35px, hsla(83, 75%, 49%, 0.5) 35px, hsla(83, 75%, 49%, 0.5) 40px,
  hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
  hsla(83, 75%, 49%, 0.6) 60px, hsla(83, 75%, 49%, 0.6) 70px, hsla(83, 75%, 49%, 0.6) 70px, hsla(83, 75%, 49%, 0.6) 80px,
  hsla(276, 68%, 62%, 0) 80px, hsla(276, 68%, 62%, 0) 90px, hsla(83, 75%, 49%, 0.5) 90px, hsla(83, 75%, 49%, 0.5) 110px,
  hsla(83, 75%, 49%, 0) 110px, hsla(83, 75%, 49%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
  ),
  repeating-linear-gradient(30deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
  hsla(83, 75%, 49%, 0) 10px, hsla(83, 75%, 49%, 0) 35px, hsla(83, 75%, 49%, 0.5) 35px, hsla(83, 75%, 49%, 0.5) 40px,
  hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
  hsla(83, 75%, 49%, 0.6) 60px, hsla(83, 75%, 49%, 0.6) 70px, hsla(83, 75%, 49%, 0.6) 70px, hsla(83, 75%, 49%, 0.6) 80px,
  hsla(276, 68%, 62%, 0) 80px, hsla(276, 68%, 62%, 0) 90px, hsla(83, 75%, 49%, 0.5) 90px, hsla(83, 75%, 49%, 0.5) 110px,
  hsla(83, 75%, 49%, 0) 110px, hsla(83, 75%, 49%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
  ),
repeating-linear-gradient(150deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(83, 75%, 49%, 0) 10px, hsla(83, 75%, 49%, 0) 35px, hsla(83, 75%, 49%, 0.5) 35px, hsla(83, 75%, 49%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(83, 75%, 49%, 0.6) 60px, hsla(83, 75%, 49%, 0.6) 70px, hsla(83, 75%, 49%, 0.6) 70px, hsla(83, 75%, 49%, 0.6) 80px,
hsla(276, 68%, 62%, 0) 80px, hsla(276, 68%, 62%, 0) 90px, hsla(83, 75%, 49%, 0.5) 90px, hsla(83, 75%, 49%, 0.5) 110px,
hsla(83, 75%, 49%, 0) 110px, hsla(83, 75%, 49%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
); */
}
.hexagon {
   width: 100px;
   height: 200px;
   overflow: hidden;
   visibility: hidden;
   transform: rotate(120deg);
   display: inline-block;
   list-style-type: none;
   }
.hexagon-in1 {
   display: block;
   overflow: hidden;
   width: 100%;
   height: 100%;
   transform: rotate(-60deg);
   text-decoration: none;
   }
.hexagon-in2 {
   display: block;
   width: 100%;
   height: 100%;
   background-image: url(https://3.bp.blogspot.com/-ngRcjH2o1Z8/UDjvxZrbpYI/AAAAAAAABMU/QDFNiStAbZ4/s1600/fractal25.jpg);
   overflow: hidden;
   visibility: visible;
   line-height: 200px;
   font-family: 'Capriola', sans-serif;
   font-size: 2em;
   color: #fff;
   text-shadow: 1px 1px #000;
   transform: rotate(-60deg);
   transition: 1.5s ease-out;
   }

   .hexagonx2 {
    width: 250px;
    height: 290px;
    overflow: hidden;
    visibility: hidden;
    transform: rotate(120deg);
    display: inline-block;
    list-style-type: none;
    }
 .hexagon-in1x2 {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transform: rotate(-60deg);
    text-decoration: none;
    }
 .hexagon-in2x2 {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("hexaint-elemx.png");
    background-repeat:no-repeat;
    background-size: 100%;
    background-position: center;
    overflow: hidden;
    visibility: visible;
    line-height: 50px;
    font-family: 'Capriola', sans-serif;
    font-size: 2em;
    color: #fff;
    text-shadow: 1px 1px #000;
    transform: rotate(-60deg);
    transition: 1.5s ease-out;
    }
   .seaelem {
      position: absolute;
      top: -300px;
      animation-timing-function: ease-out; 
      width: 250px;
      height: 290px;
   }
   .seaelem .hexagon-in2x2:hover {
      background-image: url('hexaint-elemx-hov.png');
     }
   h1 {
       position: absolute:
       top: 100px;
   }
   .seaelem h5{
      font-size: 2em;
   }
   .seaelem b{
      font-size: 2em;
   }
   .etiquetanombre{
      z-index: 20;
      position: absolute;
      border: 2px solid rgb(169, 230, 56);
      border-radius: 50vh;
      background: white;
      font-size: 50%;
      height: 8%;
      width: 50%;
      left: 45%;
      top: 70%;
      overflow: hidden;
   }
   .etiquetanombre h5{
      position: absolute;
      left: 10%;
      height: 80%;
      bottom: 10%;
   }
   .etiquetaprecio{
      z-index: 20;
      position: absolute;
      border: 2px solid rgb(169, 230, 56);
      border-radius: 50vh;
      background: white;
      font-size: 50%;
      height: 8%;
      width: 25%;
      right: -2%;
      top: 60%;
      overflow: hidden;
   }
   .etiquetaprecio b{
      position: absolute;
      left: 10%;
      height: 80%;
      top: 10%;
   }
        .hexagoni {
         position: absolute;
         top: 7.2%;
         left: 1.4%;
         width: 75%;
         height: 75%;
         overflow: hidden;
         visibility: hidden;
         transform: rotate(120deg);
         display: inline-block;
         list-style-type: none;
         }
      .hexagon-in1i {
         display: block;
         overflow: hidden;
         width: 100%;
         height: 100%;
         transform: rotate(-60deg);
         text-decoration: none;
         }
      .hexagon-in2i {
         -webkit-mask-image: url("hexamasc.svg");
         -webkit-mask-size: 100% 100%;
         display: block;
         width: 100%;
         height: 100%;
         background: blue;
         overflow: hidden;
         visibility: visible;
         line-height: 40%;
         font-family: 'Capriola', sans-serif;
         font-size: 2em;
         color: #fff;
         text-shadow: 1px 1px #000;
         transform: rotate(-60deg);
         transition: 1.5s ease-out;
         }
         /* 										  <img src='marcoimghov.png' width='100%' height='auto' class='marcoimghov'> */
/*          .marcoimghov {
            display: block;
            z-index: 30;
            opacity: 0.5;
         } */

           @keyframes llegahexelem {
            0%   {top: var(--top0)}
            100% {top: var(--topf)}
          } 

li:nth-child(1) span {
   background-position: -15px center;
 }
li:nth-child(2) span {
   background-position: -115px center;
 }
li:nth-child(3) span {
   background-position: -215px center;
 }
li:nth-child(4) span {
   background-position: -315px center;
 }
li:nth-child(5) span {
   background-position: -415px center;
 }

.hexagon-in2:hover {
   background-position: -565px center;
   color: #FCE001;
 }
ul {text-align: center;}