:root {
    --gridbase: 1280px;
}
.container {
    padding:100px 0px;
    margin: 0px auto;
    width:95%;
    max-width: var(--gridbase);
}

.row {
    display:flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    align-content: stretch;
}

.row > div {
    box-sizing:border-box;
    margin:1%;
}

.span12 {width:98%;}
.span6 {width:48%;}

.span9 {width:73%;}
.span3 {width:23%;}

.span8 {width:64.6%}
.span4 {width:31.3%;}

.span7 {width:56.3%;}
.span5 {width:39.6%}

.span10 {width:81.3%}
.span2 {width:14.66%;}

.span1 {width:6.33%;}

/* add media queries here as needed */

@media screen and (max-width:1024px) {
 .span10, .span6, .span9, .span3, .span8, .span4, .span7, .span5, .span2, .span1 {width:48%;}
}


@media screen and (max-width:800px) {
.span10, .span6, .span9, .span3, .span8, .span4, .span7, .span5, .span2, .span1 {width:98%;}
}