.hexagon { position: relative; overflow: hidden; visibility: hidden; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); cursor: pointer; width: 196.66667px; height: 393.33333px; margin: -108.33333px 5px; }
.hexagon .hexagon-in1 { overflow: hidden; width: 100%; height: 100%; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); }
.hexagon .hexagon-in1 .hexagon-in2 { width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50%; background-color: #6a6a62; visibility: visible; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); position: relative; overflow: hidden; }
.hexagon .hexagon-in1 .hexagon-in2 h1, .hexagon .hexagon-in1 .hexagon-in2 h2, .hexagon .hexagon-in1 .hexagon-in2 h3, .hexagon .hexagon-in1 .hexagon-in2 h4, .hexagon .hexagon-in1 .hexagon-in2 h5 { color: #fff; text-decoration: none; }
.hexagon .hexagon-in1 .hexagon-in2 .border-box { border-bottom-color: #6a6a62; }
.hexagon .hexagon-in1 .hexagon-in2 > img { position: absolute; left: 0; top: 81.23317px; height: 230.867px; z-index: 1; }
.hexagon .hexagon-in1 .hexagon-in2 > img.fx { -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
.hexagon.animated img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
.hexagon:first-child,.hexagon:nth-child(8n-2) { margin-left: 108.33333px; }
.hexagon:hover .hover-effect { left: 0; }

.hover-effect { position: absolute; width: 100%; height: 100%; top: 0; left: 100%; z-index: 5; display: table; vertical-align: middle; transition: 0.3s; background-color: rgba(238, 101, 87, 0.9); text-decoration: none; text-shadow: none; }
.hover-effect .table-row .table-cell .border-bottom-white { width: 60%; }
.hover-effect .text-caption { font-size: 18px; }

.display-table { display: table; vertical-align: middle; }
.table-row { display: table-row; vertical-align: middle; }
.table-cell { display: table-cell; vertical-align: middle; padding: 0 10px; }
.invisible { opacity: 0; }

/* -------------------------------------------------------------- */
/* --- REPSONSE 980px ------------------------------------------- */
/* -------------------------------------------------------------- */
@media only screen and (max-width: 1200px) { .port-hex-wrap { width: 868px; }
  .hexagon:nth-child(7n) { margin-left: 128px; display: none; } }

/* -------------------------------------------------------------- */
/* --- REPSONSE 768px -------------------------------------------- */
/* -------------------------------------------------------------- */
@media only screen and (max-width: 992px) { .port-hex-wrap { width: 620px; }
  .hexagon:nth-child(7n) { margin-left: 4px; }
  .hexagon:nth-child(5n) { margin-left: 128px; }

/* -------------------------------------------------------------- */
/* --- REPSONSE 440px ------------------------------------------- */
/* -------------------------------------------------------------- */
@media only screen and (max-width: 768px) { .port-hex-wrap { width: 496px; }
  .hexagon:nth-child(5n) { margin-left: 4px; }
  .hexagon:nth-child(4n) { margin-left: 128px; }
  .hexagon:nth-child(7n) { margin-left: 128px; }

/* -------------------------------------------------------------- */
/* --- REPSONSE 300px ------------------------------------------- */
/* -------------------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 480px) { .port-hex-wrap { width: 246px; }
  .hexagon { margin: -98px 4px !important; }
  .hexagon:nth-child(4n) { margin-left: 128px; }
  .hexagon:nth-child(7n) { margin-left: 128px; } }