.hex-menu .hm-container {
position:relative;
background-color:#6c6c6c;
display:inline-block;
width:100%;
clip-path: polygon(0 50%, 40px 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 40px 100%);
margin-bottom:10px;
height:80px;
transition:0.25s;
}
.hex-menu .hm {
position: absolute;
width:100%;
text-align:center;
color:#FFFFFF;
text-transform: uppercase;
top: 30%;
left: 0;
right: 0;
}
.hex-menu .hm-container img {
display:none;
}
@media only screen and (min-width: 767px) {
.hex-menu {
position: relative;
width:100%;
padding-bottom:40%;
}
.hex-menu .hm-container {
position: absolute;
width:calc(33.3% - 10px);
clip-path: polygon(0% 30%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 0% 70%);
height:auto;
}
.hex-menu .hm-dummy{
margin-top: 115%; /* width to height ratio. */
}
.hex-menu {
padding-bottom:40%;
}
.hex-menu .hm p {
padding:5px 5px
}
.hm-padding {
padding-top:78%; // adjust to menu size.
}
.hex-menu .hm-container img {
display: inline;
}
.hex-menu .hm-sm-col1 {left: 0%;}
.hex-menu .hm-sm-col2 {left: 33.3%;}
.hex-menu .hm-sm-col3 {left: 66.6%;}
.hex-menu .hm-sm-row1 {top: 0%; margin-left:0%;}
.hex-menu .hm-sm-row2 {top: 66.67%; margin-left:16.67%;}
.hex-menu .hm-sm-row3 {top: 133.33%; margin-left:0%;}
.hex-menu .hm-sm-row4 {top: 200%; margin-left:16.67%;}
.hex-menu .hm-sm-row5 {top: 266.67%; margin-left:0%;}
.hex-menu .hm-sm-row6 {top: 333.33%; margin-left:16.67%;}
.hex-menu .hm-sm-row7 {top: 400%; margin-left:0%;}
.hex-menu .hm-sm-row8 {top: 466.66%; margin-left:16.67%;}
}
@media only screen and (min-width: 1024px) {
.hex-menu .hm-container {
width:calc(20% - 10px);
}
.hex-menu .hm p {
padding:0 20px
}
.hm-padding {
padding-top:15%; // adjust to menu size.
}
.hex-menu .hm-lg-col1 {left: 0%;}
.hex-menu .hm-lg-col2 {left: 20%;}
.hex-menu .hm-lg-col3 {left: 40%;}
.hex-menu .hm-lg-col4 {left: 60%;}
.hex-menu .hm-lg-col5 {left: 80%;}
.hex-menu .hm-lg-row1 {top: 0%; margin-left:0%;}
.hex-menu .hm-lg-row2 {top: 40%; margin-left:10%;}
.hex-menu .hm-lg-row3 {top: 80%; margin-left:0%;}
.hex-menu .hm-lg-row4 {top: 120%; margin-left:10%;}
.hex-menu .hm-lg-row5 {top: 160%; margin-left:0%;}
}
.hex-menu .hm-container:hover {
background-color:#193763;
}