:root{
--gutter: 15px;
--col-1: 8.3333%;
--col-2: 16.6666%;
--col-3: 25%;
--col-4: 33.3333%;
--col-5: 41.6666%;
--col-6: 50%;
--col-7: 58.3333%;
--col-8: 66.6666%;
--col-9: 75%;
--col-10: 83.3333%;
--col-11: 91.6666%;
--col-12: 100%;
} .container{
max-width:1400px;
margin:0 auto;
padding-left:var(--gutter);
padding-right:var(--gutter);
} .row{
display:flex;
flex-wrap:wrap;
margin-left:calc(var(--gutter) * -1);
margin-right:calc(var(--gutter) * -1);
} [class*="col-"]{
box-sizing:border-box;
padding-left:var(--gutter);
padding-right:var(--gutter);
flex:0 0 100%;
max-width:100%;
} .col-xs-1  { flex-basis:var(--col-1);  max-width:var(--col-1); }
.col-xs-2  { flex-basis:var(--col-2);  max-width:var(--col-2); }
.col-xs-3  { flex-basis:var(--col-3);  max-width:var(--col-3); }
.col-xs-4  { flex-basis:var(--col-4);  max-width:var(--col-4); }
.col-xs-5  { flex-basis:var(--col-5);  max-width:var(--col-5); }
.col-xs-6  { flex-basis:var(--col-6);  max-width:var(--col-6); }
.col-xs-7  { flex-basis:var(--col-7);  max-width:var(--col-7); }
.col-xs-8  { flex-basis:var(--col-8);  max-width:var(--col-8); }
.col-xs-9  { flex-basis:var(--col-9);  max-width:var(--col-9); }
.col-xs-10 { flex-basis:var(--col-10); max-width:var(--col-10); }
.col-xs-11 { flex-basis:var(--col-11); max-width:var(--col-11); }
.col-xs-12 { flex-basis:var(--col-12); max-width:var(--col-12); } @media (min-width:576px){
.col-sm-1  { flex-basis:var(--col-1);  max-width:var(--col-1); }
.col-sm-2  { flex-basis:var(--col-2);  max-width:var(--col-2); }
.col-sm-3  { flex-basis:var(--col-3);  max-width:var(--col-3); }
.col-sm-4  { flex-basis:var(--col-4);  max-width:var(--col-4); }
.col-sm-5  { flex-basis:var(--col-5);  max-width:var(--col-5); }
.col-sm-6  { flex-basis:var(--col-6);  max-width:var(--col-6); }
.col-sm-7  { flex-basis:var(--col-7);  max-width:var(--col-7); }
.col-sm-8  { flex-basis:var(--col-8);  max-width:var(--col-8); }
.col-sm-9  { flex-basis:var(--col-9);  max-width:var(--col-9); }
.col-sm-10 { flex-basis:var(--col-10); max-width:var(--col-10); }
.col-sm-11 { flex-basis:var(--col-11); max-width:var(--col-11); }
.col-sm-12 { flex-basis:var(--col-12); max-width:var(--col-12); }
} @media (min-width:768px){
.col-md-1  { flex-basis:var(--col-1);  max-width:var(--col-1); }
.col-md-2  { flex-basis:var(--col-2);  max-width:var(--col-2); }
.col-md-3  { flex-basis:var(--col-3);  max-width:var(--col-3); }
.col-md-4  { flex-basis:var(--col-4);  max-width:var(--col-4); }
.col-md-5  { flex-basis:var(--col-5);  max-width:var(--col-5); }
.col-md-6  { flex-basis:var(--col-6);  max-width:var(--col-6); }
.col-md-7  { flex-basis:var(--col-7);  max-width:var(--col-7); }
.col-md-8  { flex-basis:var(--col-8);  max-width:var(--col-8); }
.col-md-9  { flex-basis:var(--col-9);  max-width:var(--col-9); }
.col-md-10 { flex-basis:var(--col-10); max-width:var(--col-10); }
.col-md-11 { flex-basis:var(--col-11); max-width:var(--col-11); }
.col-md-12 { flex-basis:var(--col-12); max-width:var(--col-12); }
} @media (min-width:1024px){
.col-lg-1  { flex-basis:var(--col-1);  max-width:var(--col-1); }
.col-lg-2  { flex-basis:var(--col-2);  max-width:var(--col-2); }
.col-lg-3  { flex-basis:var(--col-3);  max-width:var(--col-3); }
.col-lg-4  { flex-basis:var(--col-4);  max-width:var(--col-4); }
.col-lg-5  { flex-basis:var(--col-5);  max-width:var(--col-5); }
.col-lg-6  { flex-basis:var(--col-6);  max-width:var(--col-6); }
.col-lg-7  { flex-basis:var(--col-7);  max-width:var(--col-7); }
.col-lg-8  { flex-basis:var(--col-8);  max-width:var(--col-8); }
.col-lg-9  { flex-basis:var(--col-9);  max-width:var(--col-9); }
.col-lg-10 { flex-basis:var(--col-10); max-width:var(--col-10); }
.col-lg-11 { flex-basis:var(--col-11); max-width:var(--col-11); }
.col-lg-12 { flex-basis:var(--col-12); max-width:var(--col-12); }
} @media (min-width:1200px){
.col-xl-1  { flex-basis:var(--col-1);  max-width:var(--col-1); }
.col-xl-2  { flex-basis:var(--col-2);  max-width:var(--col-2); }
.col-xl-3  { flex-basis:var(--col-3);  max-width:var(--col-3); }
.col-xl-4  { flex-basis:var(--col-4);  max-width:var(--col-4); }
.col-xl-5  { flex-basis:var(--col-5);  max-width:var(--col-5); }
.col-xl-6  { flex-basis:var(--col-6);  max-width:var(--col-6); }
.col-xl-7  { flex-basis:var(--col-7);  max-width:var(--col-7); }
.col-xl-8  { flex-basis:var(--col-8);  max-width:var(--col-8); }
.col-xl-9  { flex-basis:var(--col-9);  max-width:var(--col-9); }
.col-xl-10 { flex-basis:var(--col-10); max-width:var(--col-10); }
.col-xl-11 { flex-basis:var(--col-11); max-width:var(--col-11); }
.col-xl-12 { flex-basis:var(--col-12); max-width:var(--col-12); }
} .no-gutter .row{ margin-left:0; margin-right:0; }
.no-gutter [class*="col-"]{ padding-left:0; padding-right:0; }
.col-auto { flex:0 0 auto; max-width:none; } .col      { flex:1 1 0;  min-width:0; }