h1 {

    text-align: center;
}

.nav__breadcrumb {
    display: none;
}

.btn {
    border-radius: 0;
    border-width: 2px;
}

.categories-outer {
    max-width: 1600px;
    padding: 2rem;
    margin: 0 auto;
}

ul#categories {
    justify-content: center;
}

    ul#categories li {
        
        margin: 0.5rem;
        max-width: 450px;
        width: 100%;
        height: 250px;
        flex: 1 1 calc(33% - 12px);
        overflow: hidden;
        position: relative;
        border: solid 1px #ccc;
        box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
        border-radius:5px;
    }

        ul#categories li .child {
            width: 100%;
            height: 100%;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

            ul#categories li .child:hover {
                -ms-transform: scale(1.1);
                -moz-transform: scale(1.1);
                -webkit-transform: scale(1.1);
                -o-transform: scale(1.1);
                transform: scale(1.1);
            }


        ul#categories li .child > a {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: start;
            z-index: 2;
            flex-wrap: nowrap;
            flex-direction: column;
            color: white;
            text-decoration: none;
            transition: 0.2s;
        }

        ul#categories li a:hover {
            /*background: rgba(0,0,0,0.85);*/
            /*background: rgba(0,0,0,0.5);*/
        }

        ul#categories li div.name {
            height: 70%;
            align-items: start;
            flex-wrap: nowrap;
            flex-direction: column;
            color: white;
            font-family: Figtree, gotham-bold;
            /*font-family: gotham-bold;*/
            margin-top: 0px;
            background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
            width: 100%;
            text-align: center;
            padding: 30px 1rem 0 1rem;
        }
        

        ul#categories li div.desc {
            height: 5rem;
            display: flex;
            align-items: start;
            justify-content: center;
            flex-wrap: nowrap;
            flex-direction: column;
            color: white;
        }




        ul#categories li div.name > span {
            font-size: 1.95rem;
            font-weight: bold;
            /*text-transform: uppercase;*/
            text-align: center;
            line-height: 1.85rem;
            align-items: start;
        }

        ul#categories li div.desc > span {
            font-size: 1.2rem;
            font-weight: normal;
            text-align: center;
            line-height: 1;
        }

        ul#categories li div.button {
            position: absolute;
            left: 20px;
            right: 20px;
            bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
            flex-direction: column;
        }

            ul#categories li div.button .btn {
                background-color: var(--gold);
                background-color: var(--faded-maroon);
                color: var(--dark-maroon);
                color: #fff;
                font-size: 1.1rem;
                padding: 0.5rem 1.5rem;
                border: solid 2px #fff;
            }


            ul#categories li .btn {
            }



@media (max-width: 960px){

    ul#categories li {
        flex: 1 1 210px;
        margin: 0.25rem;
        height: 180px;
    }

        ul#categories li div.name {
            padding: 1rem 1rem;
        }

            ul#categories li div.name > span {
                font-size: 1.25rem;
                line-height: 1;
            }

        ul#categories li div.button {
            bottom: 20px;
        }

            ul#categories li div.button .btn {
                font-size: 0.85rem;
            }

}

@media (max-width: 767px) {

    ul#categories li {
        flex: 0 0 100%;
        margin: 0.5rem 0;
        height: 120px;
        max-width: 100%;
    }

        ul#categories li .child > a {
            flex-direction: row;
            background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
        }

        ul#categories li div.name {
            height: 100%;
            align-items: start;
            flex-wrap: nowrap;
            width: 65%;
            padding: 0 0 0 1rem;
            display: flex;
            justify-content: center;
            align-items: start;
            background-image: none;
            text-shadow:none;
        }

            ul#categories li div.name > span {
                font-size: 1.35rem;
                font-weight: bold;
                /*text-transform: uppercase;*/
                text-align: center;
                line-height: 1;
            }

        ul#categories li div.button {
            position: initial;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            flex-wrap: nowrap;
            flex-direction: column;
            background-image: none;
            height: 100%;
            flex: 1 1 auto;
            padding-right: 1rem;
        }

}


@media (max-width: 500px) {

    ul#categories li div.button{
        padding-right: 0;
    }


    ul#categories li {
        height: 130px;
        margin: 0.5rem 0;
    }

        ul#categories li > a {
            background-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
        }

        ul#categories li div.name {
            padding: 1.2rem;
            justify-content: start;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            text-shadow: 1px 1px #585353;
        }

        ul#categories li div.button {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
            flex-direction: column;
            background-image: none;
            height: auto;
            flex: 0 0 100%;
            bottom: 0.5rem;
            left: 0;
            right: 0;
            width: 100%;
        }

}




    /*@media (max-width: 1100px){

    ul#categories li{
        flex: 0 0 320px;
    }


    ul#categories li div.name > span {
        font-size: 1.8rem;
    }
}


@media (max-width: 575px){
    ul#categories li{
        flex: 0 0 100%;
    }
}*/