.#{$prefix}-container-fluid{
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    &.#{$prefix}-no-gap{
        padding-left: 0;
        padding-right: 0;
    }
}

.#{$prefix}-container{
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    @include media(lg){
        max-width: 1250px;
        margin: auto;
    }
    &.#{$prefix}-no-gap{
        padding-left: 0;
        padding-right: 0;
    }
}

.site-content{
    padding: 30px 15px 60px;
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
    @include media(lg){
        max-width: 1250px;
        margin: auto;
    }
}

#primary,
#secondary{
    flex: 0 0 100%;
    max-width: 100%;
    @include media(lg){
        padding-left: 15px;
        padding-right: 15px;
    }
    
}
#primary{
    @include media(lg){
        flex: 0 0 70%;
        max-width: 70%;
    }
}
#secondary{
    @include media(lg){
        flex: 0 0 30%;
        max-width: 30%;
    }
    
}
.widget-area{
    .theiaStickySidebar{
        @include media(xs){
            display: flex;
            flex-wrap: wrap;
        }
    }
    .widget{
        @include media(xs){
            flex: 0 0 calc(50% - 15px);
            max-width: calc(50% - 15px);
            margin-left: 7.5px;
            margin-right: 7.5px;
        }
        @include media(lg){
            flex: 0 0 100%;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
        }
    }
}

.no-sidebar{
    #primary{
        flex: 0 0 100%;
        max-width: 100%;
    }
    #secondary{
        display: none;
    }
}
.right-sidebar{
    #primary{
        order: 1;

    }
    #secondary{
        order: 2;
    }
}
.left-sidebar{
    #primary{
        order: 2;

    }
    #secondary{
        order: 1;
    }
}
.#{$prefix}-row,
.#{$prefix}-d-flex{
    display: flex;
    flex-wrap: wrap;
}
.#{$prefix}-row{
    margin-left: -10px;
    margin-right: -10px;
}

.#{$prefix}-col{
    padding-left: 10px;
    padding-right: 10px;
    flex: 0 0 100%;
    max-width: 100%;
    &.#{$prefix}-no-gap{
        padding-left: 0;
        padding-right: 0;
    }
}
.#{$prefix}-col-half{
    flex: 0 0 50%;
    max-width: 50%;
}
.#{$prefix}-col-xs-6{
    @include media(xs){
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.#{$prefix}-col-sm-6{
    @include media(sm){
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.#{$prefix}-col-md-4{
    @include media(md){
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
}
.#{$prefix}-col-md-6{
    @include media(md){
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.#{$prefix}-col-md-8{
    @include media(md){
        flex: 0 0 66.67%;
        max-width: 66.67%;
    }
}
.#{$prefix}-col-lg-3{
    @include media(lg){
        flex: 0 0 25%;
        max-width: 25%;
    }
}
.#{$prefix}-col-lg-4{
    @include media(lg){
        flex:  0 0 33.33%;
        max-width: 33.33%;
    }
}
.#{$prefix}-col-lg-5{
    @include media(lg){
        flex: 0 0 41.66%;
        max-width: 41.66%;
    }
}
.#{$prefix}-col-lg-6{
    @include media(lg){
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.#{$prefix}-col-lg-7{
    @include media(lg){
        flex: 0 0 58.33%;
        max-width: 58.33%;
    }
}
.#{$prefix}-col-lg-8{
    @include media(lg){
        flex:  0 0 66.67%;
        max-width: 66.67%;
    }
}
.#{$prefix}-col-lg-9{
    @include media(lg){
        flex: 0 0 75%;
        max-width: 75%;
    }
}