.sub-section-nav{
    @include flexbox();
    @include flex-direction(row);
    @include flex-wrap(wrap);
    margin:0 0 0 -50px;
    width:auto;
    padding:15px 0;

    @media (max-width: 990px) {
        padding:15px 0;
    }

    @media (max-width: 600px) {
        padding:10px 0;
    }

    .sub-section{
        padding-bottom:10px;
        width: calc(100% * (1/3) - 51px);
        margin:15px 0 0 50px;
        border:0;

        @media (max-width: 1200px) {
            width: calc(100% * (1/2) - 51px);
        }

        @media (max-width: 600px) {
            width: 100%;
        }

        .sub-section-heading{
            border-bottom:5px solid $border-color;
            margin:0 0 15px;
            padding-bottom:10px;
            font-size:24px;

            @media (max-width: 767px) {
                font-size:19px;
            }
        }

        .list{
            li{
                margin-bottom: 15px;

                a{
                    text-decoration:none;

                    &:hover{
                        text-decoration:underline;
                    }
                }
            }
        }

    }
}

//no flexbox fallback - sub-section
.no-flexbox .sub-section-nav {
    .sub-section{
        float:left;
    }
    .sub-section:nth-child(4){
        @media (min-width: 990px){
            clear:both;
        }
    }
    .sub-section:nth-child(3){
        @media (min-width: 767px) and (max-width: 990px){
            clear:both;
        }
    }
}

//sub-section panel
.sub-section-nav.panels{
    margin: -15px 0 0 -15px;

    .sub-section{
        @include panel();
        width: calc(100% * (1/4) - 16px);
        margin: 15px 0 0 15px;
        background:$border-color;

        @media (max-width: 990px) {
            width: calc(100% * (1/2) - 16px);
        }

        @media (max-width: 767px) {
            width: calc(100%);
        }

        a{
            .sub-section-heading{
                border-bottom:5px solid $border-color;
                margin:0 0 15px;
                padding-bottom:10px;
                font-size:24px;
                border:0;
                margin-bottom:10px !important;
                @media (max-width: 767px) {
                    font-size:19px;
                }
                
            }
        }

        .list.list-nav{
            li{
                a{
                    text-decoration:underline;
                }
            }
        }

        li.contact{
            margin:20px 0 0 !important;
        }
    }
}

.sub-section h4{
    margin-bottom:5px !important;
}

.col-md-8{
    .sub-section-nav.panels{
        .sub-section{
            width: calc(100% * (1/2) - 16px);

            @media (max-width: 767px) {
                width: calc(100%);
            }
        }
    }
}

.sub-section-heading + .list-nav{
    margin-bottom:20px;
}

//sub section sp styling for summary links
.sub-section-heading{
    border-bottom:5px solid $border-color;
    margin:30px 0 15px;
    padding-bottom:10px;
    font-size:24px;

    @media (max-width: 767px) {
        font-size:19px;
        margin:20px 0 15px;
    }
}

//subsection no flex
.no-flexbox .sub-section-nav {
    margin:0;
    .sub-section{
        width:100%;
        margin:15px 0;
    }
}