.container {
    &.#{$prefix}-no-space{
        padding-left: 0;
        padding-right: 0;
    }
    &.#{$prefix}-left-space{
        padding-left: 15px;
        padding-right: 0;
    }
    &.#{$prefix}-custom-container{
        max-width: 100%;
        @include media(lg){
            max-width: 1140px;
        }
    }
}
  
.#{$prefix}-d-flex{
    display: flex;
    flex-wrap: wrap;
}
.#{$prefix}-row{
    display: flex;
    flex-wrap: wrap;
    margin-left: -7.5px;
    margin-right: -7.5px;
}
.#{$prefix}-col,
.#{$prefix}-col-gap{
    padding-left: 7.5px;
    padding-right: 7.5px;
}
.twp-col-no-gap{
    padding-left: 0;
    padding-right: 0;
}
.twp-col{
    flex: 0 0 100%;
    max-width: 100%;
}
/** Xtra small screen**/ 
.#{$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-12{
    @include media(xs){
        flex: 0 0 100%;
        max-width: 100%;
    }
}
  
/**Small screen**/ 
.#{$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-12{
    @include media(sm){
        flex: 0 0 100%;
        max-width: 100%;
    }
}
  

/**Medium screen**/ 
.#{$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-12{
    @include media(md){
        flex: 0 0 100%;
        max-width: 100%;
    }
}
  
/**Large screen**/ 
.#{$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-12{
    @include media(lg){
        flex: 0 0 100%;
        max-width: 100%;
    }
}
  


.site-content{
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
    @include media(xs){
        width: 540px;
    }
    @include media(sm){
        width: 720px;
    }
    @include media(md){
        width: 960px;
    }
    @include media(lg){
        width: 1140px;
    }

}
.home{
    .site-content{
        width: 100%;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }
}
#primary{
    width: 100%;
    @include media(md){
        width: 70%;
    }
}
#secondary{
    width: 100%;
    @include media(md){
        width: 30%;
    }
    section{
        margin-top: 30px;
    }
    .container{
        padding: 0;
    }
    
}

.right-sidebar{
    #primary{
        float: left;
        padding-right: 7.5px;
        padding-left: 7.5px;
        @include media(md){
            padding-left: 0;
            padding-right: 15px;
        }
    }
    #secondary{
        float: left;
        padding-left: 7.5px;
        padding-right: 7.5px;
        @include media(md){
            padding-right: 0;
            padding-left: 15px;
        }
    }
}
.left-sidebar{
    #primary{
        float: right;
        padding-left: 7.5px;
        padding-right: 7.5px;
        @include media(sm){
            padding-right: 0;
            padding-left: 15px;
        }
    }
    #secondary{
        float: left;
        padding-right: 7.5px;
        padding-left: 7.5px;
        @include media(sm){
            padding-left: 0;
            padding-right: 15px;
        }
    }
}
.no-sidebar{
    #primary{
        width: 100%;
        padding-left: 7.5px;
        padding-right: 7.5px;
        @include media(md){
            padding-left: 0;
            padding-right: 0;
        }
    }
    #secondary{
       display: none;
    }
}