.hexagon-grid-container{display:flex;flex-wrap:wrap;width:60%;margin:0 auto;padding:0 0 60px;list-style:none}.hexagon{position:relative;width:180px;height:100.83px;background-color:#eaf8ff;margin:65px 2px 0;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:500;color:#fff;text-align:center;line-height:1.45}@media screen and (min-width:56.250em){.hexagon{background-color:#fff}}@media screen and (min-width:112.250em){.hexagon{background-color:#eaf8ff}}.hexagon.dark{background:#66c5ee}.hexagon.orange{background:#ff6a00}.hexagon.pink{background:#d3166f}.hexagon.purple{background:#9255a1}.hexagon.dark:hover,.hexagon.orange:hover,.hexagon.pink:hover,.hexagon.purple:hover{background:#f8f8f8;color:#66c5ee}.hexagon:before,.hexagon:after{content:"";position:absolute;width:0;border-left:90px solid transparent;border-right:90px solid transparent}.hexagon:before{bottom:100%;border-bottom:60.41px solid #eaf8ff}.hexagon:after{top:100%;width:0;border-top:60.41px solid #eaf8ff}@media screen and (min-width:56.250em){.hexagon:before{bottom:100%;border-bottom:60.41px solid #fff}.hexagon:after{top:100%;width:0;border-top:60.41px solid #fff}}@media screen and (min-width:112.250em){.hexagon:before{bottom:100%;border-bottom:60.41px solid #eaf8ff}.hexagon:after{top:100%;width:0;border-top:60.41px solid #eaf8ff}}.dark:before{bottom:100%;border-bottom:60.41px solid #66c5ee}.orange:before{bottom:100%;border-bottom:60.41px solid #ff6a00}.pink:before{bottom:100%;border-bottom:60.41px solid #d3166f}.purple:before{bottom:100%;border-bottom:60.41px solid #9255a1}.dark:hover:before,.orange:hover:before,.pink:hover:before,.purple:hover:before{bottom:100%;border-bottom:60.41px solid #f8f8f8}.dark:after{top:100%;width:0;border-top:60.41px solid #66c5ee}.orange:after{top:100%;width:0;border-top:60.41px solid #ff6a00}.pink:after{top:100%;width:0;border-top:60.41px solid #d3166f}.purple:after{top:100%;width:0;border-top:60.41px solid #9255a1}.dark:hover:after,.orange:hover:after,.pink:hover:after,.purple:hover:after{top:100%;width:0;border-top:60.41px solid #f8f8f8}.hexagon span.back{display:none;opacity:0;transition:opacity .4s all}.hexagon:hover span{display:none;opacity:0}.hexagon:hover span.back{display:block;opacity:1}@media(min-width:1920px){.hexagon-grid-container{width:1600px}.hexagon:nth-child(21n+9){margin-left:94px}}@media(max-width:1919px) and (min-width:1280px){.hexagon-grid-container{width:1100px}.hexagon:nth-child(14n+6){margin-left:94px}}@media(max-width:1279px) and (min-width:1024px){.hexagon-grid-container{width:960px}.hexagon:nth-child(12n+6){margin-left:94px}}@media(max-width:1023px) and (min-width:781px){.hexagon-grid-container{width:780px}.hexagon:nth-child(7n+5){margin-left:94px}}@media(max-width:780px) and (min-width:640px){.hexagon-grid-container{width:640px}.hexagon:nth-child(5n+4){margin-left:94px}}@media(max-width:639px){.hexagon-grid-container{width:320px}.hexagon:nth-child(2n+0){margin-left:94px}}