.#{$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-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-wrap: wrap;
    @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%;
        @include media(lg){
            flex: 0 0 75%;
            max-width: 75%;
            margin-left: auto;
            margin-right: auto;
        }
    }
    #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%;
}
/********** Extra small screen************/ 
.#{$prefix}-col-xs-1{
    @include media(xs){
        flex: 0 0 8.33%;
        max-width: 8.33%
    }
}
.#{$prefix}-col-xs-2{
    @include media(xs){ 
        flex: 0 0 16.67%;
        max-width: 16.67%
    }
}
.#{$prefix}-col-xs-3{
    @include media(xs){
        flex: 0 0 25%;
        max-width: 25%;
    }
}
.#{$prefix}-col-xs-4{
    @include media(xs){
        flex: 0 0 33.33%;
        max-width: 33.33%
    }
}
.#{$prefix}-col-xs-5{
    @include media(xs){
        flex: 0 0 41.67%;
        max-width: 41.67%;
    }
}
.#{$prefix}-col-xs-6{
    @include media(xs){
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.#{$prefix}-col-xs-7{
    @include media(xs){
        flex: 0 0 58.33%;
        max-width: 58.33%;
    }
}
.#{$prefix}-col-xs-8{
    @include media(xs){
        flex: 0 0 66.67%;
        max-width: 66.67%;
    }
}
.#{$prefix}-col-xs-9{
    @include media(xs){
        flex: 0 0 75%;
        max-width: 75%;
    }
}
.#{$prefix}-col-xs-10{
    @include media(xs){
        flex: 0 0 83.33%;
        max-width: 83.33%;
    }
}
.#{$prefix}-col-xs-11{
    @include media(xs){
        flex: 0 0 91.67%;
        max-width: 91.67%;
    }
}
.#{$prefix}-col-xs-12{
    @include media(xs){
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*************Small screen***********/ 
.#{$prefix}-col-sm-1{
    @include media(sm){
        flex: 0 0 8.33%;
        max-width: 8.33%
    }
}
.#{$prefix}-col-sm-2{
    @include media(sm){ 
        flex: 0 0 16.67%;
        max-width: 16.67%
    }
}
.#{$prefix}-col-sm-3{
    @include media(sm){
        flex: 0 0 25%;
        max-width: 25%;
    }
}
.#{$prefix}-col-sm-4{
    @include media(sm){
        flex: 0 0 33.33%;
        max-width: 33.33%
    }
}
.#{$prefix}-col-sm-5{
    @include media(sm){
        flex: 0 0 41.67%;
        max-width: 41.67%;
    }
}
.#{$prefix}-col-sm-6{
    @include media(sm){
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.#{$prefix}-col-sm-7{
    @include media(sm){
        flex: 0 0 58.33%;
        max-width: 58.33%;
    }
}
.#{$prefix}-col-sm-8{
    @include media(sm){
        flex: 0 0 66.67%;
        max-width: 66.67%;
    }
}
.#{$prefix}-col-sm-9{
    @include media(sm){
        flex: 0 0 75%;
        max-width: 75%;
    }
}
.#{$prefix}-col-sm-10{
    @include media(sm){
        flex: 0 0 83.33%;
        max-width: 83.33%;
    }
}
.#{$prefix}-col-sm-11{
    @include media(sm){
        flex: 0 0 91.67%;
        max-width: 91.67%;
    }
}
.#{$prefix}-col-sm-12{
    @include media(sm){
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*************Medium screen***********/ 
.#{$prefix}-col-md-1{
    @include media(md){
        flex: 0 0 8.33%;
        max-width: 8.33%
    }
}
.#{$prefix}-col-md-2{
    @include media(md){ 
        flex: 0 0 16.67%;
        max-width: 16.67%
    }
}
.#{$prefix}-col-md-3{
    @include media(md){
        flex: 0 0 25%;
        max-width: 25%;
    }
}
.#{$prefix}-col-md-4{
    @include media(md){
        flex: 0 0 33.33%;
        max-width: 33.33%
    }
}
.#{$prefix}-col-md-5{
    @include media(md){
        flex: 0 0 41.67%;
        max-width: 41.67%;
    }
}
.#{$prefix}-col-md-6{
    @include media(md){
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.#{$prefix}-col-md-7{
    @include media(md){
        flex: 0 0 58.33%;
        max-width: 58.33%;
    }
}
.#{$prefix}-col-md-8{
    @include media(md){
        flex: 0 0 66.67%;
        max-width: 66.67%;
    }
}
.#{$prefix}-col-md-9{
    @include media(md){
        flex: 0 0 75%;
        max-width: 75%;
    }
}
.#{$prefix}-col-md-10{
    @include media(md){
        flex: 0 0 83.33%;
        max-width: 83.33%;
    }
}
.#{$prefix}-col-md-11{
    @include media(md){
        flex: 0 0 91.67%;
        max-width: 91.67%;
    }
}
.#{$prefix}-col-md-12{
    @include media(md){
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*************Large screen***********/ 
.#{$prefix}-col-lg-1{
    @include media(lg){
        flex: 0 0 8.33%;
        max-width: 8.33%
    }
}
.#{$prefix}-col-lg-2{
    @include media(lg){ 
        flex: 0 0 16.67%;
        max-width: 16.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.67%;
        max-width: 41.67%;
    }
}
.#{$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%;
    }
}
.#{$prefix}-col-lg-10{
    @include media(lg){
        flex: 0 0 83.33%;
        max-width: 83.33%;
    }
}
.#{$prefix}-col-lg-11{
    @include media(lg){
        flex: 0 0 91.67%;
        max-width: 91.67%;
    }
}
.#{$prefix}-col-lg-12{
    @include media(lg){
        flex: 0 0 100%;
        max-width: 100%;
    }
}