*,
::before,
::after{
    box-sizing: border-box;
}

.container{
    width: 100%;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
}

.container-fluid{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
}


.page-container{
    width: 100%;
    padding: 0 8% 8% 8%;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
}

/* grid System */

.row{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: 100%;
    margin-bottom:2% ;
}

.row1{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: 100%;
}


.col-1,.col-2,.col-3,
.col-4,.col-5,.col-6,
.col-7,.col-8,.col-9,
.col-10,.col-11,.col-12,
.col,[class*="col"]{
    width: 100%;
    height: 100%;
    max-width: 100%;
    /* padding-left: 15px;
    padding-right: 15px; */
}



@media (min-width:576px){
    .container{
        max-width: 540px;
    }

    .row .col-1-sm{
        flex:0 0 calc(100%/12);
    }
    
    .row .col-2-sm{
        flex:0 0 calc(100%/6);
    }
    
    .row .col-3-sm{
        flex:0 0 calc(100%/4);
    }
    
    .row .col-4-sm{
        flex:0 0 calc(100%/3);
    }
    
    .row .col-5-sm{
        flex:0 0 calc(100%/(12/5));
    }
    
    .row .col-6-sm{
        flex:0 0 calc(100%/2);
    }
    
    .row .col-7-sm{
        flex:0 0 calc(100%/(12/7));
    }
    
    .row .col-8-sm{
        flex:0 0 calc(100%/1.5);
    }
    
    .row .col-9-sm{
        flex:0 0 calc(100%/(12/9));
    }
    
    .row .col-10-sm{
        flex:0 0 calc(100%/1.2);
    }

    .row .col-11-sm{
        flex:0 0 calc(100%/(12/11));
    }

    .row .col-12-sm{
        flex:0 0 calc(100%/1);
    }

    
    
}

@media (min-width:768px){
    .container{
        max-width: 720px;
    }

    .row .col-1-md{
        flex:0 0 calc(100%/12);
    }
    
    .row .col-2-md{
        flex:0 0 calc(100%/6);
    }
    
    .row .col-3-md{
        flex:0 0 calc(100%/4);
    }
    
    .row .col-4-md{
        flex:0 0 calc(100%/3);
    }
    
    .row .col-5-md{
        flex:0 0 calc(100%/(12/5));
    }
    
    .row .col-6-md{
        flex:0 0 calc(100%/2);
    }
    
    .row .col-7-md{
        flex:0 0 calc(100%/(12/7));
    }
    
    .row .col-8-md{
        flex:0 0 calc(100%/1.5);
    }
    
    .row .col-9-md{
        flex:0 0 calc(100%/(12/9));
    }
    
    .row .col-10-md{
        flex:0 0 calc(100%/1.2);
    }

    .row .col-11-md{
        flex:0 0 calc(100%/(12/11));
    }

    .row .col-12-md{
        flex:0 0 calc(100%/1);
    }

    
}

@media (min-width:992px){
    .container{
        max-width: 960px;
    }

    .row .col-1-lg{
        flex:0 0 calc(100%/12);
    }
    
    .row .col-2-lg{
        flex:0 0 calc(100%/6);
    }
    
    .row .col-3-lg{
        flex:0 0 calc(100%/4);
    }
    
    .row .col-4-lg{
        flex:0 0 calc(100%/3);
    }
    
    .row .col-5-lg{
        flex:0 0 calc(100%/(12/5));
    }
    
    .row .col-6-lg{
        flex:0 0 calc(100%/2);
    }
    
    .row .col-7-lg{
        flex:0 0 calc(100%/(12/7));
    }
    
    .row .col-8-lg{
        flex:0 0 calc(100%/1.5);
    }
    
    .row .col-9-lg{
        flex:0 0 calc(100%/(12/9));
    }
    
    .row .col-10-lg{
        flex:0 0 calc(100%/1.2);
    }

    .row .col-11-lg{
        flex:0 0 calc(100%/(12/11));
    }

    .row .col-12-lg{
        flex:0 0 calc(100%/1);
    }

}

@media (min-width:1200px){
    .container{
        max-width: 1140px;
    }

    .row .col-1-xl{
        flex:0 0 calc(100%/12);
    }
    
    .row .col-2-xl{
        flex:0 0 calc(100%/6);
    }
    
    .row .col-3-xl{
        flex:0 0 calc(100%/4);
    }
    
    .row .col-4-xl{
        flex:0 0 calc(100%/3);
    }
    
    .row .col-5-xl{
        flex:0 0 calc(100%/(12/5));
    }
    
    .row .col-6-xl{
        flex:0 0 calc(100%/2);
    }
    
    .row .col-7-xl{
        flex:0 0 calc(100%/(12/7));
    }
    
    .row .col-8-xl{
        flex:0 0 calc(100%/1.5);
    }
    
    .row .col-9-xl{
        flex:0 0 calc(100%/(12/9));
    }
    
    .row .col-10-xl{
        flex:0 0 calc(100%/1.2);
    }

    .row .col-11-xl{
        flex:0 0 calc(100%/(12/11));
    }

    .row .col-12-xl{
        flex:0 0 calc(100%/1);
    }



}