/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
#categories main#layout-content section.layout-section#front {
    height: 220px;
}

    #categories main#layout-content section.layout-section#front > .section-center {}

        #categories main#layout-content section.layout-section#front > .section-center > h1 {
            position: relative;
            float: left;
            width: 100.0%;
            margin: 0;
            font-size: 40px;
            text-align: center;
            text-transform: uppercase;
        }

        @media (max-width: 768px) {
            #categories main#layout-content section.layout-section#front > .section-center > h1 {
                position: relative;
                float: left;
                width: 100.0%;
                margin: 0;
                font-size: 45px;
                font-weight: 500;
                text-align: center;
                text-transform: uppercase;

            }
        }

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
#categories main#layout-content section.layout-section#all {}

    #categories main#layout-content section.layout-section#all .all-grid {
        position: relative;
        float: left;
        width: 100.0%;
        margin-top: 90px;
        display: grid;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -ms-flex-align: stretch;
        align-items: stretch;
        grid-gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

        #categories main#layout-content section.layout-section#all .all-grid a {
            cursor: pointer;
        }

        @media (max-width: 640px) {
            #categories main#layout-content section.layout-section#all .all-grid a {
                grid-column-end: span 3;
            }
        }

        @media (min-width: 641px) {
            #categories main#layout-content section.layout-section#all .all-grid a {
                grid-column-end: span 1;
            }
        }

            #categories main#layout-content section.layout-section#all .all-grid a .all-grid-column {
                position: relative;
                float: left;
                width: 100.0%;
                height: 200px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                overflow: hidden;
            }

                #categories main#layout-content section.layout-section#all .all-grid a .all-grid-column .all-grid-column-image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    -webkit-transition-property: all;
                    -moz-transition-property: all;
                    -ms-transition-property: all;
                    -o-transition-property: all;
                    transition-property: all;
                    -webkit-transition-duration: 0.32s;
                    -moz-transition-duration: 0.32s;
                    -ms-transition-duration: 0.32s;
                    -o-transition-duration: 0.32s;
                    transition-duration: 0.32s;
                    -webkit-transition-timing-function: initial;
                    -moz-transition-timing-function: initial;
                    -ms-transition-timing-function: initial;
                    -o-transition-timing-function: initial;
                    transition-timing-function: initial;
                    -webkit-transition-delay: 0s;
                    -moz-transition-delay: 0s;
                    -ms-transition-delay: 0s;
                    -o-transition-delay: 0s;
                    transition-delay: 0s;
                }

                #categories main#layout-content section.layout-section#all .all-grid a:hover .all-grid-column .all-grid-column-image {
                    top: -40px;
                    left: -40px;
                    bottom: -40px;
                    right: -40px;
                    -webkit-filter: grayscale(100.0%);
                    filter: grayscale(100.0%);
                }

                #categories main#layout-content section.layout-section#all .all-grid a .all-grid-column .all-grid-column-image:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    background-image: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0.6) 0.0%, rgba(0, 0, 0, 0.4) 100.0%);
                    background-image: -moz-linear-gradient(to top, rgba(0, 0, 0, 0.6) 0.0%, rgba(0, 0, 0, 0.4) 100.0%);
                    background-image: -ms-linear-gradient(to top, rgba(0, 0, 0, 0.6) 0.0%, rgba(0, 0, 0, 0.4) 100.0%);
                    background-image: -o-linear-gradient(to top, rgba(0, 0, 0, 0.6) 0.0%, rgba(0, 0, 0, 0.4) 100.0%);
                    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0.0%, rgba(0, 0, 0, 0.4) 100.0%);
                    -webkit-transition-property: background;
                    -moz-transition-property: background;
                    -ms-transition-property: background;
                    -o-transition-property: background;
                    transition-property: background;
                    -webkit-transition-duration: 0.32s;
                    -moz-transition-duration: 0.32s;
                    -ms-transition-duration: 0.32s;
                    -o-transition-duration: 0.32s;
                    transition-duration: 0.32s;
                    -webkit-transition-timing-function: initial;
                    -moz-transition-timing-function: initial;
                    -ms-transition-timing-function: initial;
                    -o-transition-timing-function: initial;
                    transition-timing-function: initial;
                    -webkit-transition-delay: 0s;
                    -moz-transition-delay: 0s;
                    -ms-transition-delay: 0s;
                    -o-transition-delay: 0s;
                    transition-delay: 0s;
                }

                #categories main#layout-content section.layout-section#all .all-grid a:hover .all-grid-column .all-grid-column-image:after {
                    background-color: rgba(0, 0, 0, 0.4);
                }

                #categories main#layout-content section.layout-section#all .all-grid a .all-grid-column .all-grid-column-name {
                    position: absolute;
                    top: 50.0%;
                    width: 100.0%;
                    margin: 0;
                    font-size: 26px;
                    font-weight: 700;
                    text-align: center;
                    text-transform: uppercase;
                    color: rgba(255, 255, 255, 1);
                    -webkit-transform: translateY(-50.0%);
                    -moz-transform: translateY(-50.0%);
                    -ms-transform: translateY(-50.0%);
                    -o-transform: translateY(-50.0%);
                    transform: translateY(-50.0%);
                }