.container12{
  display: grid;
  grid-template-columns: repeat(13, 100px);
  grid-column-gap: 5px;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-left: 50px;
  width: 1440px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  
}

.item12{
  grid-column: span 2;
  width: 200px;
  padding: 0 0 231px 0;
  -o-transform: rotate(-60deg) skewY(30deg);
  -moz-transform: rotate(-60deg) skewY(30deg);
  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
  background: #fd005f;
  overflow: hidden;
  visibility: hidden;
  margin-top: -50px;
  
}

.item12:nth-child(13n+1){ grid-column-start: 1;}
.item12:nth-child(13n+2){ grid-column-start: 3;}
.item12:nth-child(13n+3){ grid-column-start: 5;}
.item12:nth-child(13n+4){ grid-column-start: 7;}
.item12:nth-child(13n+5){ grid-column-start: 9;}
.item12:nth-child(13n+6){ grid-column-start: 11;}
.item12:nth-child(13n+7){ grid-column-start: 13;}

.item12:nth-child(13n+8){ grid-column-start: 2;}
.item12:nth-child(13n+9){ grid-column-start: 4;}
.item12:nth-child(13n+10){ grid-column-start: 6;}
.item12:nth-child(13n+11){ grid-column-start: 8;}
.item12:nth-child(13n+12){ grid-column-start: 10;}
.item12:nth-child(13n){ grid-column-start: 12;}

.hexagon{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/1.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/1.png");
}

.hexagon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}




.hexagon1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/deproma1.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;
	

}
 
.hexagon1:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/deproma1.png");
}

.hexagon1:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}




.hexagon2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/fotona1.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon2:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/fotona1.png");
}

.hexagon2:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}


.hexagon3{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/miselj1.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon3:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/miselj1.png");
}

.hexagon3:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}





.hexagon4{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/elpro.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon4:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/elpro.png");
}

.hexagon4:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}



.hexagon5{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/1.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon5:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/1.png");
}

.hexagon5:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon6{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/uv1.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon6:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/uv1.png");
}

.hexagon6:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon7{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/edyn.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon7:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/edyn.png");
}

.hexagon7:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon8{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/aplast.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon8:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/aplast.png");
}

.hexagon8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon9{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/gf.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon9:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/gf.png");
}

.hexagon9:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon10{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/lisjak.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon10:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/lisjak.png");
}

.hexagon10:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon11{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/pod.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon11:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/pod.png");
}

.hexagon11:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon12{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/nuo.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon12:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/nuo.png");
}

.hexagon12:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon13{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/teks.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon13:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/teks.png");
}

.hexagon13:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}


.hexagon14{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/kor.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon14:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/kor.png");
}

.hexagon14:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
 
.hexagon22{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/kor.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon22:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/kor.png");
}

.hexagon22:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
 
.hexagon23{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/test1.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon23:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/test1.png");
}

.hexagon23:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
.hexagon30{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/mig.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon30:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/mig.png");
}

.hexagon30:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
 
 
.hexagon31{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/s3c.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon31:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/s3c.png");
}

.hexagon31:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon32{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/fanuc.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon32:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/fanuc.png");
}

.hexagon32:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon33{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/mep.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon33:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/mep.png");
}

.hexagon33:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon34{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/vina.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon34:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/vina.png");
}

.hexagon34:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon35{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/g6.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon35:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/g6.png");
}

.hexagon35:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon36{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/carnia.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon36:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/carnia.png");
}

.hexagon36:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon37{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/bur.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon37:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/bur.png");
}

.hexagon37:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon38{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/mali.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon38:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/mali.png");
}

.hexagon38:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon39{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/solid.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon39:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/solid.png");
}

.hexagon39:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon40{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/kopt.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon40:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/kopt.png");
}

.hexagon40:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon41{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/elpa.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon41:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/elpa.png");
}

.hexagon41:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon42{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/dimer.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon42:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/dimer.png");
}

.hexagon42:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon43{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/visal.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon43:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/visal.png");
}

.hexagon43:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon44{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/gut.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon44:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/gut.png");
}

.hexagon44:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon45{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/klan.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon45:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/klan.png");
}

.hexagon45:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon46{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/tip.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon46:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/tip.png");
}

.hexagon46:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon47{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/tehi.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon47:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/tehi.png");
}

.hexagon47:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon48{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/plasto.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon48:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/plasto.png");
}

.hexagon48:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon49{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/mezg.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon49:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/mezg.png");
}

.hexagon49:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon50{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/tehno.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon50:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/tehno.png");
}

.hexagon50:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon51{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/luznar.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon51:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/luznar.png");
}

.hexagon51:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon52{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/3dshark.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon52:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/3dshark.png");
}

.hexagon52:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon53{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/koped.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon53:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/koped.png");
}

.hexagon53:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon54{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/naklo.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon54:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/naklo.png");
}

.hexagon54:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

 
.hexagon60{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/naklo.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon60:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/naklo.png");
}

.hexagon60:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}




.hexagon61{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/lepleco.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon61:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/lepleco.png");
}

.hexagon61:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon62{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/printec.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon62:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/printec.png");
}

.hexagon62:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon63{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/sou.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon63:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/sou.png");
}

.hexagon63:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon64{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/scape.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon64:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/scape.png");
}

.hexagon64:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon65{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/cs1.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon65:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/cs1.png");
}

.hexagon65:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon66{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/hf.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon66:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/hf.png");
}

.hexagon66:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}

.hexagon67{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/vitra.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon67:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/vitra.png");
}

.hexagon67:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}






.hexagon68{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/ledluks.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon68:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/ledluks.png");
}

.hexagon68:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}




.hexagon69{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/kamm.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon69:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/kamm.png");
}

.hexagon69:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon70{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/dihta.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon70:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/dihta.png");
}

.hexagon70:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon71{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/hypex.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon71:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/hypex.png");
}

.hexagon71:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon72{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/feraprom.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon72:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/feraprom.png");
}

.hexagon72:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon73{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/mdm.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon73:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/mdm.png");
}

.hexagon73:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon74{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/opl.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon74:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/opl.png");
}

.hexagon74:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon75{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/stema.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon75:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/stema.png");
}

.hexagon75:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon76{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/tinex.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon76:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/tinex.png");
}

.hexagon76:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon77{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/valmar.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon77:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/valmar.png");
}

.hexagon77:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon78{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/chemplast.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon78:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/chemplast.png");
}

.hexagon78:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}












.hexagon79{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/mercis.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon79:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/mercis.png");
}

.hexagon79:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon80{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/ooz.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon80:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/ooz.png");
}

.hexagon80:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon81{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/paris.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon81:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/paris.png");
}

.hexagon81:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon82{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/videa.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon82:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/videa.png");
}

.hexagon82:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon83{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/cryo.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon83:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/cryo.png");
}

.hexagon83:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}
.hexagon84{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/honeycomb/moto.png");
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	opacity:0.8;

}
 
.hexagon84:hover {
  transition: 0.3s;
  opacity:1;
  background-image: url("../img/honeycomb/moto.png");
}

.hexagon84:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);

}












 
 
 
.item12 *{
    visibility: visible
}

/**** Responsive wizardry ****/

@media(max-width: 1500px){
  .container12{
    grid-template-columns: repeat(10, 100px);
    width: 1050px
  }
.item12:nth-child(9n+1){ grid-column-start: 1;}
.item12:nth-child(9n+2){ grid-column-start: 3;}
.item12:nth-child(9n+3){ grid-column-start: 5;}
.item12:nth-child(9n+4){ grid-column-start: 7;}
.item12:nth-child(9n+5){ grid-column-start: 9;}
.item12:nth-child(9n+6){ grid-column-start: 2;}
.item12:nth-child(9n+7){ grid-column-start: 4;}
.item12:nth-child(9n+8){ grid-column-start: 6;}
.item12:nth-child(9n){ grid-column-start: 8;}
}


@media(max-width: 1100px){
  .container12{
    grid-template-columns: repeat(8, 100px);
    width: 830px
  }
.item12:nth-child(7n+1){ grid-column-start: 1;}
.item12:nth-child(7n+2){ grid-column-start: 3;}
.item12:nth-child(7n+3){ grid-column-start: 5;}
.item12:nth-child(7n+4){ grid-column-start: 7;}
.item12:nth-child(7n+5){ grid-column-start: 2;}
.item12:nth-child(7n+6){ grid-column-start: 4;}
.item12:nth-child(7n){ grid-column-start: 6;}
}

@media(max-width: 850px){
  .container12{
    grid-template-columns: repeat(6, 100px);
    width: 620px
  }
.item12:nth-child(5n+1){ grid-column-start: 1;}
.item12:nth-child(5n+2){ grid-column-start: 3;}
.item12:nth-child(5n+3){ grid-column-start: 5;}
.item12:nth-child(5n+4){ grid-column-start: 2;}
.item12:nth-child(5n){ grid-column-start: 4;}
}

@media(max-width: 720px){
  .container12{
  grid-template-columns: repeat(4, 100px);
    width: 410px;
  }
  .item12:nth-child(3n+1){ grid-column-start: 1;}
  .item12:nth-child(3n+2){ grid-column-start: 3;}
  .item12:nth-child(3n){ grid-column-start: 2;}
}