* {
    margin: 0;
    padding: 0;
}
body {
    background: none;
   font-family: 'Roboto', sans-serif;
}

.hexagone-section {background: #124999; margin: 21px 0 0 0; padding: 60px 0 0 0;}
.hexagone-section .inside-hexa {max-width: 1100px; width: 100%; margin: 0 auto; padding: 30px 0 0;}

#hexGrid { display: flex; flex-wrap: wrap; width: 94%; margin: 0 auto 6%; overflow: hidden; font-size: 15px;list-style-type: none;}
.hex { position: relative; margin: 0 0 2px; visibility:hidden; outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */}
.hex::after{ content:''; display:block; padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */ }
.hexIn{ position: absolute; width:92%; padding-bottom: 107.851%; /* =  width / sin(60) */ margin:0 2%; overflow: hidden; visibility: hidden; outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
      -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
          transform: rotate3d(0,0,1,-60deg) skewY(30deg); }
.hexIn * { position: absolute; visibility: visible; outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */}
.hexLink { display:block; width: 100%; height: 100%; text-align: center; color: #fff; overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg); }
.hex img { left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto;
  -webkit-transform: rotate3d(0,0,0,0deg);
      -ms-transform: rotate3d(0,0,0,0deg);
          transform: rotate3d(0,0,0,0deg); }
.hex h1, .hex p { width: 100%; padding: 5%; box-sizing:border-box; background-color: rgba(0, 0, 0, 0.0); font-weight: 300; text-shadow: 4px 4px 8px #000000;
  -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
          transition:          transform .2s ease-out, opacity .3s ease-out; }
.hex h1 { bottom: 43%; padding-top:56%; font-size: 14px; font-weight: 500; z-index: 1;
  -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0); }
.hex h1::after { content: ''; position: absolute; bottom: 0; left: 45%; width: 10%; text-align: center; border-bottom: 1px solid #fff; display: none;}
.hex p { top: 57%; padding-bottom:50%;
  -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0); }

/*.hexLink:hover h1, .hexLink:focus h1,
.hexLink:hover p, .hexLink:focus p{
  -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0); }*/


/* .hexLink:hover h1, .hexLink:focus h1 {
  -webkit-transform:translate3d(0,-100%,0);
      -ms-transform:translate3d(0,-100%,0);
          transform:translate3d(0,-100%,0); }

 .hexLink:hover p, .hexLink:focus p{
  -webkit-transform:translate3d(0,100%,0);
      -ms-transform:translate3d(0,100%,0);
          transform:translate3d(0,100%,0); }   */       
.hexLink:hover h1, .hexLink:focus h1 {
    color: #fff;    
}
.hexLink {
    color: #fff;
    pointer-events: none;
    cursor: default;
}

/* .hex:nth-child(5) h1 {bottom: 38%;} */
.hex:nth-child(5) p {top: 62%;}

          

@media (min-width:1201px) { /* <- 5-4  hexagons per row */
#hexGrid{ padding-bottom: 4.4% }
.hex { width: 19.7%; /* = 100 / 5 */ }
.hex:nth-child(9n+6){ /* first hexagon of even rows */ margin-left:10.3%;  /* = width of .hex / 2  to indent even rows */ } 
}

@media(min-width: 1201px) {
    .hex:nth-child(13n+10) {margin-left: 20.5%;}
}

@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3  hexagons per row */ #hexGrid{ padding-bottom: 5.5% }
.hex { width: 25%; /* = 100 / 4 */ }
.hex:nth-child(7n+5){ /* first hexagon of even rows */ margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */ }
}

@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
#hexGrid{ padding-bottom: 7.4% }
.hex { width: 33.333%; /* = 100 / 3 */ }
.hex:nth-child(5n+4){ /* first hexagon of even rows */ margin-left:16.666%;  /* = width of .hex / 2  to indent even rows */}
}

@media (max-width: 600px) { /* <- 2-1  hexagons per row */
#hexGrid{ padding-bottom: 11.2% }
.hex { width: 50%; /* = 100 / 3 */ }
.hex:nth-child(3n+3){ /* first hexagon of even rows */ margin-left:25%;  /* = width of .hex / 2  to indent even rows */ }

}

@media (max-width: 400px) {
#hexGrid { font-size: 13px; } 
}

#share{ position:fixed; left:0; top:0; margin:1%; width:140px; z-index:1; }
#fork{ position:relative; display:block; color:#000; border:1px solid #000; padding:.5em 0 ;
    -webkit-transition: color .5s; transition: color .5s; overflow:hidden; text-decoration:none; text-align:center; z-index:1; }
#fork:before { content: ''; position: absolute; top: 0; left: 0; width: 130%; height: 100%; background: #000; z-index: -1; -webkit-transform-origin:0 0 ;
        -ms-transform-origin:0 0 ;
            transform-origin:0 0 ;
    -webkit-transform:translateX(-100%) skewX(-45deg);
        -ms-transform:translateX(-100%) skewX(-45deg);
            transform:translateX(-100%) skewX(-45deg);
    -webkit-transition: -webkit-transform .5s;
            transition: transform .5s; }
#fork:hover { color: #fff; }
#fork:hover:before { -webkit-transform: translateX(0) skewX(-45deg);
        -ms-transform: translateX(0) skewX(-45deg);
            transform: translateX(0) skewX(-45deg); }
.socials { float:left; width:33.33%; text-align:center; margin-top:0.7em; -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
    -webkit-transition: -webkit-filter .5s ease-out;
            transition:         filter .5s ease-out; }
.socials:hover{ -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.socials img{ width:60%; }

.hexa-text {text-align: center;}  
.hexa-text h1 {font-size: 25px; color: #fff; font-weight: normal; margin: 0 0 15px;}
.hexa-text p {font-size: 22px; color: #aac3e5; font-weight: 300; margin-bottom: 0;}




@media (min-width:320px) and (max-width:767px) { 
.hexagone-section {padding: 30px 0 0;}
.hexa-text {padding: 0 15px;}
.hex:nth-child(13n+10) {margin-left: 0;}
.hex h1 {bottom: 39%; padding-top: 63%;}
.hex p {top: 61%;}
.hex:nth-child(5) h1 {bottom: 24%;}
.hex:nth-child(5) p {top: 76%;}
}


@media (min-width:370px) and (max-width:450px) { 
.hex:nth-child(5) h1 {bottom: 30%;}
.hex:nth-child(5) p {top: 70%;}
}

@media (min-width:450px) and (max-width:600px) { 
.hex:nth-child(5) h1 {bottom: 38%;}
.hex:nth-child(5) p {top: 62%;}
}

@media (min-width:601px) and (max-width:680px) { 
.hex:nth-child(5) h1 {bottom: 30%;}
.hex:nth-child(5) p {top: 70%;}
}

@media (min-width:681px) and (max-width:767px) { 
.hex:nth-child(5) h1 {bottom: 38%;}
.hex:nth-child(5) p {top: 62%;}
}