.hexagon{position:relative;width:200px;min-width:200px;height:115.47px;border-left:solid 8px #fff;border-right:solid 8px #fff;margin:57.74px 10px;text-align:center;flex-direction:column;display:inline-block;color:#fff;font-size:21px;font-weight:600;opacity:.8;transition:transform .9s}.hexagon:before,.hexagon:after{content:"";position:absolute;z-index:1;width:142px;height:141.42px;transform:scaleY(.5774) rotate(-45deg);background-color:inherit;left:21px}.hexagon:before{top:-71px;border-top:solid 11px #fff;border-right:solid 11px #fff}.hexagon:after{bottom:-71px;border-bottom:solid 11px #fff;border-left:solid 11px #fff}.hexagon:hover{background-color:orange;border-color:orange;color:#fff;position:relative;opacity:1;transform:scale(1.05)}.hexagon:hover:before,.hexagon:hover:after{border-color:orange}.hexagon span{display:flex;position:absolute;font-weight:600;width:184px;height:154px;z-index:2;padding-left:auto;padding-right:auto;background:inherit;background-color:transparent;flex-direction:column-reverse;align-items:center;justify-content:center;top:-20px;bottom:auto}.hexagon span:hover{background-color:transparent}.hexagon span:hover:before,.hexagon span:hover:after{background-color:transparent}@media (max-width: 768px){.hexagon:before,.hexagon:after{display:none}.hexagon{height:156px;border:solid 8px #fff;margin:10px;width:90%;min-width:none}.hexagon span{width:100%;height:156px;position:none;margin:auto;top:auto;bottom:auto}}