h1,h2,h3,h4,h5,p,b{
  color: #f3f9f8;
}
h2{
  font-size: 40px;
}
h5{
  font-size: 24px;
}
.title{
  padding-top: 2%;
}
.img{
  background-image: url("../img/background.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top;
}

.icon{
  width: 115px;
  padding-bottom: 130px;
}

/*!
 * Icon Hexagon
 */

#hive {
  position: relative;
  margin: 50px auto;
  width: 567px;
  height: 599px;
}
.hex span{
  position:absolute;
  left:12.5px;
  top:55px;
  display:block;
  text-align:center;
  vertical-align:top;
  line-height:84px;
  height:90px;
  width:90px;
  z-index:100000;
  pointer-events:none;
}
.hex {
  word-break: break-all;
  color: #f5f8f8;
  height: 200px;
  width: 115px;
  display: inline-block;
  position: relative;
  background-color: transparent;
  margin: 0px -1px -4px 54px;
  border-top: solid 1px #f5f8f8;
  border-bottom: solid 1px #f5f8f8;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: inset 0px 20px 20px -20px #f5f8f8, inset 0px -20px 20px -20px #f5f8f8;
  padding-top: 50px;
  cursor:pointer;
  transform-style:preserve-3d;
  font-size:90px;
  transition: all .1s ease-in-out;
}

.hex:hover {
  transform: scale(1.25,1.25) rotateY(5deg)  rotateX(-5deg);
  animation-fill-mode: forwards;
  z-index:1000;
}

.hex:hover:after,
.hex:hover:before{
}


.hex:first-child,
.hex:nth-child(3),
.hex:nth-child(4),
.hex:nth-child(6) {
  top: 100px;
}

.hex:last-child {
  /* margin: 0px 226px; */
}

.hex:before,
.hex:after {
  content: '';
  height: 100%;
  width: 100%;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 0px;
  transform-origin: center center;
  background-color: inherit;
  border-top: inherit;
  border-bottom: inherit;
  box-sizing: inherit;
  border-radius: inherit;
  box-shadow: inherit;
}

.hex:before {
  transform: rotateZ(60deg);
  z-index: 10;
}

.hex:after {
  transform: rotateZ(-60deg);
  z-index: 15;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   text-align: center;
}


@media only screen and  (max-width: 768px) {
  .title{
    margin-top: 40px;
  }
  .img{
    background-size: 500%;
  }
  .lok{
    padding-top: 0px;
  }
  .hex {
    word-break: break-all;
    color: #f5f8f8;
    height: 128px;
    width: 74px;
    display: inline-block;
    position: relative;
    background-color: transparent;
    margin: 0px 0px -5px 32px;
    border-top: solid 1px #f5f8f8;
    border-bottom: solid 1px #f5f8f8;
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: inset 0px 20px 20px -20px #f5f8f8, inset 0px -20px 20px -20px #f5f8f8;
    padding-top: 50px;
    cursor:pointer;
    transform-style:preserve-3d;
    font-size:90px;
    transition: all .1s ease-in-out;
  }
  #hive {
    position: relative;
    margin: 50px auto;
    width: 369px;
    height: 390px;
  }
  .hex:first-child,
  .hex:nth-child(3),
  .hex:nth-child(4),
  .hex:nth-child(6) {
    top: 64px;
  }

  .icon{
    width: 87px;
    padding-bottom: 0px;
    margin: -32px 0px 0px -5px;
    position: absolute;
  }

}