/*! 
 *   Unlock Commerce
 *   Snippet Type: Backbone
 *   Snippet Name: Header & Footer Panel Groups
 *   Author: Shashank Agarwal
 *   Description: Used in Full width Menu, Tall Footer
 */


/* +++++++++++++++++++++++++++++ Header & Footer Panel Groups +++++++++++++++++++++++++++++ */

#main-menu .panel-group,
#footer .panel-group {
    margin: 0;
    padding: 0 15px;
}

    #main-menu .panel-group .panel,
    #footer .panel-group .panel,
    #footer .panel-group .panel .panel-heading,
    #footer .panel-group .panel .panel-heading,
    #footer .panel-group .panel .panel-body,
    #footer .panel-group .panel .panel-body {
        border-radius: 0;
        background: none;
        border: 0;
        padding-left: 0;
        padding-right: 0;
        color: inherit;
    }


#footer .panel-body ul {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    #main-menu li.full-width-dropdown ul li .panel-heading,
    #footer .panel-heading {
        padding: 10px 0;
    }

    #footer .panel .panel-heading {
        border: 0;
    }

      #main-menu .panel + .panel .panel-heading,
    #footer .panel + .panel .panel-heading,  #main-menu .panel .panel-body,
    #footer .panel .panel-body {
        border-top: 1px solid;
    }

    #main-menu .panel-group .panel
    {
        WIDTH:100%;
    }
}

@media screen and (min-width: 768px) {

    #main-menu .panel-group,
    #footer .panel-group {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        #main-menu .panel-group .panel,
        #footer .panel-group .panel {
            margin-bottom: 0;
            overflow: hidden;
            box-shadow: none;
            vertical-align: top;
            padding-right: 5px;
        }

    #main-menu .panel,
    #footer .panel {
        margin: 0;
    }

        #main-menu .panel:nth-of-type(5n + 1),
        #footer .panel:nth-of-type(5n + 1) {
            margin-left: 0;
        }
}

@media screen and (min-width:992px) {
    #main-menu .panel-group .panel,
    #footer .panel-group .panel {
        width: 20%;
       
    }
}

@media screen and (min-width:768px) and (max-width:991px) {
    #footer .panel-group .panel {
        width: 50%;
        
    }
}
@media screen and (max-width:991px)
{
    #main-menu .panel-group .panel{
        width:100%;
    }
    #main-menu .panel + .panel .panel-heading,  #main-menu .panel .panel-body
    {
        border-top:0 !important;
    }
    #main-menu .panel-group .panel
    {
        box-shadow:none;
    }
    
}