*, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root{
    --gutter-10: 10px;
    --gutter-20: 20px;
    --gutter-5:  5px;
    --gutter-: 0;
}

.container{
    width: 100%;
    margin: 0 auto;
    padding-right: var(--gutter-10);
    padding-left: var(--gutter-10);
}
.row{
    display: flex;
    flex-wrap: wrap;
}
.row>*{
    width: 100%;
    padding-right: var(--gutter-10);
    padding-left: var(--gutter-10);
    margin-top: var(--gutter-5);
    margin-bottom: var(--gutter-5);
}



/* Extra Class Start */

.item-center{
    align-items: center;
}
.justify-center{
    justify-content: center;
}
.justify-start{
    justify-content: flex-start;
}
.justify-end{
    justify-content: flex-end;
}
.justify-around{
    justify-content: space-around;
}
.justify-between{
    justify-content: space-between;
}
.justify-evenly{
    justify-content: space-evenly;
}

.gutter-0{
    padding: var(--gutter-);
    margin: var(--gutter-);
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.text-left{
    text-align: left;
}
/* Extra Class End */


/* Container Layout Start*/


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

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

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

@media screen and (min-width: 1400px){
    .container{
        width: 1320px;
    }
}


/* Container Layout End*/


/* Column Layout Start */



@media (max-width: 767px) { 

    .col-sm-auto{flex:0 0 auto;width:auto}
    .col-sm-1{flex:0 0 auto;width:8.33333333%}
    .col-sm-2{flex:0 0 auto;width:16.66666667%}
    .col-sm-3{flex:0 0 auto;width:25%}
    .col-sm-4{flex:0 0 auto;width:33.33333333%}
    .col-sm-5{flex:0 0 auto;width:41.66666667%}
    .col-sm-6{flex:0 0 auto;width:50%}
    .col-sm-7{flex:0 0 auto;width:58.33333333%}
    .col-sm-8{flex:0 0 auto;width:66.66666667%}
    .col-sm-9{flex:0 0 auto;width:75%}
    .col-sm-10{flex:0 0 auto;width:83.33333333%}
    .col-sm-11{flex:0 0 auto;width:91.66666667%}
    .col-sm-12{flex:0 0 auto;width:100%}
    
    .offset-sm-0{margin-left:0}
    .offset-sm-1{margin-left:8.33333333%}
    .offset-sm-2{margin-left:16.66666667%}
    .offset-sm-3{margin-left:25%}
    .offset-sm-4{margin-left:33.33333333%}
    .offset-sm-5{margin-left:41.66666667%}
    .offset-sm-6{margin-left:50%}
    .offset-sm-7{margin-left:58.33333333%}
    .offset-sm-8{margin-left:66.66666667%}
    .offset-sm-9{margin-left:75%}
    .offset-sm-10{margin-left:83.33333333%}
    .offset-sm-11{margin-left:91.66666667%}


 }

@media (min-width: 768px) { 

    .col-md-auto{flex:0 0 auto;width:auto}
    .col-md-1{flex:0 0 auto;width:8.33333333%}
    .col-md-2{flex:0 0 auto;width:16.66666667%}
    .col-md-3{flex:0 0 auto;width:25%}
    .col-md-4{flex:0 0 auto;width:33.33333333%}
    .col-md-5{flex:0 0 auto;width:41.66666667%}
    .col-md-6{flex:0 0 auto;width:50%}
    .col-md-7{flex:0 0 auto;width:58.33333333%}
    .col-md-8{flex:0 0 auto;width:66.66666667%}
    .col-md-9{flex:0 0 auto;width:75%}
    .col-md-10{flex:0 0 auto;width:83.33333333%}
    .col-md-11{flex:0 0 auto;width:91.66666667%}
    .col-md-12{flex:0 0 auto;width:100%}

    .offset-md-0{margin-left:0}
    .offset-md-1{margin-left:8.33333333%}
    .offset-md-2{margin-left:16.66666667%}
    .offset-md-3{margin-left:25%}
    .offset-md-4{margin-left:33.33333333%}
    .offset-md-5{margin-left:41.66666667%}
    .offset-md-6{margin-left:50%}
    .offset-md-7{margin-left:58.33333333%}
    .offset-md-8{margin-left:66.66666667%}
    .offset-md-9{margin-left:75%}
    .offset-md-10{margin-left:83.33333333%}
    .offset-md-11{margin-left:91.66666667%}

 }


@media (min-width: 992px) { 

    .col-lg-auto{flex:0 0 auto;width:auto}
    .col-lg-1{flex:0 0 auto;width:8.33333333%}
    .col-lg-2{flex:0 0 auto;width:16.66666667%}
    .col-lg-3{flex:0 0 auto;width:25%}
    .col-lg-4{flex:0 0 auto;width:33.33333333%}
    .col-lg-5{flex:0 0 auto;width:41.66666667%}
    .col-lg-6{flex:0 0 auto;width:50%}
    .col-lg-7{flex:0 0 auto;width:58.33333333%}
    .col-lg-8{flex:0 0 auto;width:66.66666667%}
    .col-lg-9{flex:0 0 auto;width:75%}
    .col-lg-10{flex:0 0 auto;width:83.33333333%}
    .col-lg-11{flex:0 0 auto;width:91.66666667%}
    .col-lg-12{flex:0 0 auto;width:100%}

    .offset-lg-0{margin-left:0}
    .offset-lg-1{margin-left:8.33333333%}
    .offset-lg-2{margin-left:16.66666667%}
    .offset-lg-3{margin-left:25%}
    .offset-lg-4{margin-left:33.33333333%}
    .offset-lg-5{margin-left:41.66666667%}
    .offset-lg-6{margin-left:50%}
    .offset-lg-7{margin-left:58.33333333%}
    .offset-lg-8{margin-left:66.66666667%}
    .offset-lg-9{margin-left:75%}
    .offset-lg-10{margin-left:83.33333333%}
    .offset-lg-11{margin-left:91.66666667%}
 }


@media (min-width: 1200px) {
    .col-xl-auto{flex:0 0 auto;width:auto}
    .col-xl-1{flex:0 0 auto;width:8.33333333%}
    .col-xl-2{flex:0 0 auto;width:16.66666667%}
    .col-xl-3{flex:0 0 auto;width:25%}
    .col-xl-4{flex:0 0 auto;width:33.33333333%}
    .col-xl-5{flex:0 0 auto;width:41.66666667%}
    .col-xl-6{flex:0 0 auto;width:50%}
    .col-xl-7{flex:0 0 auto;width:58.33333333%}
    .col-xl-8{flex:0 0 auto;width:66.66666667%}
    .col-xl-9{flex:0 0 auto;width:75%}
    .col-xl-10{flex:0 0 auto;width:83.33333333%}
    .col-xl-11{flex:0 0 auto;width:91.66666667%}
    .col-xl-12{flex:0 0 auto;width:100%}

    .offset-xl-0{margin-left:0}
    .offset-xl-1{margin-left:8.33333333%}
    .offset-xl-2{margin-left:16.66666667%}
    .offset-xl-3{margin-left:25%}
    .offset-xl-4{margin-left:33.33333333%}
    .offset-xl-5{margin-left:41.66666667%}
    .offset-xl-6{margin-left:50%}
    .offset-xl-7{margin-left:58.33333333%}
    .offset-xl-8{margin-left:66.66666667%}
    .offset-xl-9{margin-left:75%}
    .offset-xl-10{margin-left:83.33333333%}
    .offset-xl-11{margin-left:91.66666667%}
  
}


@media (min-width: 1400px) { 

    .col-xxl-auto{flex:0 0 auto;width:auto}
    .col-xxl-1{flex:0 0 auto;width:8.33333333%}
    .col-xxl-2{flex:0 0 auto;width:16.66666667%}
    .col-xxl-3{flex:0 0 auto;width:25%}
    .col-xxl-4{flex:0 0 auto;width:33.33333333%}
    .col-xxl-5{flex:0 0 auto;width:41.66666667%}
    .col-xxl-6{flex:0 0 auto;width:50%}
    .col-xxl-7{flex:0 0 auto;width:58.33333333%}
    .col-xxl-8{flex:0 0 auto;width:66.66666667%}
    .col-xxl-9{flex:0 0 auto;width:75%}
    .col-xxl-10{flex:0 0 auto;width:83.33333333%}
    .col-xxl-11{flex:0 0 auto;width:91.66666667%}
    .col-xxl-12{flex:0 0 auto;width:100%}

    .offset-xxl-0{margin-left:0}
    .offset-xxl-1{margin-left:8.33333333%}
    .offset-xxl-2{margin-left:16.66666667%}
    .offset-xxl-3{margin-left:25%}
    .offset-xxl-4{margin-left:33.33333333%}
    .offset-xxl-5{margin-left:41.66666667%}
    .offset-xxl-6{margin-left:50%}
    .offset-xxl-7{margin-left:58.33333333%}
    .offset-xxl-8{margin-left:66.66666667%}
    .offset-xxl-9{margin-left:75%}
    .offset-xxl-10{margin-left:83.33333333%}
    .offset-xxl-11{margin-left:91.66666667%}

}