﻿.local-quicklinks-dgray {
    background-color: #3a3b3e;
}

    .local-quicklinks-dgray ul {
        max-width: 1236px;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        list-style: none;
        background-color: #3a3b3e;
    }

        .local-quicklinks-dgray ul li {
            text-align: center;
            background-color: #3a3b3e;
            -webkit-box-flex: 1;
            -ms-flex: 1 1 100%;
            flex: 1 1 100%;
            flex-shrink: 1;
            flex-grow: 1;
            flex-basis: 100%;
        }

            .local-quicklinks-dgray ul li a {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                height: 100%;
                padding-top: .5em;
                padding-right: .5em;
                padding-bottom: 1em;
                padding-left: .5em;
                text-align: center;
            }

                .local-quicklinks-dgray ul li a:hover, .local-quicklinks-dgray ul li a:focus {
                    background-color: #a0a39f;
                    -webkit-box-shadow: inset 0 -4px 0 0 #747673;
                    box-shadow: inset 0 -4px 0 0 #747673;
                }

                    .local-quicklinks-dgray ul li a:hover .local-quicklink-icon, .local-quicklinks-dgray ul li a:focus .local-quicklink-icon {
                        border: 2px solid #fff;
                        background-color: #fff;
                    }

                        .local-quicklinks-dgray ul li a:hover .local-quicklink-icon svg g, .local-quicklinks-dgray ul li a:focus .local-quicklink-icon svg g {
                            fill: #747673 !important;
                        }

                .local-quicklinks-dgray ul li a:focus {
                    outline: auto 5px -webkit-focus-ring-color;
                    outline: auto 5px Highlight;
                }

                .local-quicklinks-dgray ul li a .local-quicklink-icon {
                    width: 100%;
                    height: 60px;
                    color: #fff;
                    border: 2px solid rgba(255, 255, 255, .2);
                    border-radius: 50%;
                    max-width: 60px;
                    max-height: 60px;
                    margin: 0 auto .5em;
                    position: relative;
                }

                    .local-quicklinks-dgray ul li a .local-quicklink-icon svg {
                        width: 30px;
                        height: 30px;
                        padding: 0;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        -webkit-transform: translate(-50%, -50%);
                        -ms-transform: translate(-50%, -50%);
                        transform: translate(-50%, -50%);
                    }

                        .local-quicklinks-dgray ul li a .local-quicklink-icon svg g {
                            fill: white;
                        }

        .local-quicklinks-dgray ul span {
            margin: 0 auto;
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: .25px;
            line-height: 1.35;
        }

@media screen and (min-width:30em) and (max-width:40em) {
    .local-quicklinks-dgray ul li {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 50%;
    }
}

@media screen and (min-width:40em) {

    .local-quicklinks-dgray ul li {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;
    }
}
