.menu-boxes {
    @extend %clearfix;
    display: none;
    list-style: none;
    margin: 0;

    li {
        @include float-span(6);

        &:nth-child(2n+2) {
            @include float-span(6, 'last');
        }
    }

    a {
        display: block;
        position: relative;
        @include box-sizing('border-box');
        margin: 0 16px 16px 0;
        padding: 16px 0;
        height: 120px;
        color: #FFF;
        text-align: center;
        font-size: 18px;

        .frontside {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            @include box-sizing('border-box');
            padding: 16px 0;
            background: $red;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            @include transition-property(all);
            @include transition-duration(0.3s);
        }

        .backside {
            @extend .frontside;
            @include transform(rotateY(-180deg));
            background: darken($red, 20%);
        }

        &:hover {
            .frontside {
                @include transform(rotateY(-180deg));
            }

            .backside {
                @include transform(rotateY(0));

                .text {
                    position: absolute;
                    left: 0;
                    top: 50%;
                    @include transform(translateY(-50%));
                    padding: 0 8px;
                }

                .icon {
                    color: lighten($red, 20%);
                }
            }
        }
    }

    .icon {
        display: block;
        font-size: 300%;
        margin-bottom: 8px;
    }
}