@charset "utf-8";
/* IMPORTANT: children of qGrid container must not be separated by whitespace */ 

.qGridStrict1,
.qGridStrict2,
.qGridStrict3,
.qGridStrict4,
.qGridStrict5,
.qGridStrict6 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.qGrid1,
.qGrid2,
.qGrid3,
.qGrid4,
.qGrid5,
.qGrid6 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1em;
    width: calc( 100% + 1em );
}

.qGridTwoThirds{
    width: 66.6%;
}

.qGridHalf{
    width: 50%;
}

.qGridThird{
    width: 33.3%;
}

.qGridCenter{
    margin: 0 auto;
}

.qGridStrict1 > *,
.qGridStrict2 > *,
.qGridStrict3 > *,
.qGridStrict4 > *,
.qGridStrict5 > *,
.qGridStrict6 > * {
    margin-bottom: 0;
}
.qGrid1 > *,
.qGrid2 > *,
.qGrid3 > *,
.qGrid4 > *,
.qGrid5 > *,
.qGrid6 > * {
    margin-left: 1em;
    margin-bottom: 1em;
}
.qGridStrict1 > * {
    flex: 0 0 100%;
}
.qGridStrict2 > * {
    flex: 0 0 50%;
}
.qGridStrict2 > .span2on2,
.qGridStrict2 > .span2 {
    flex: 0 0 100%;
}
.qGridStrict3 > * {
    flex: 0 0 33.3%;
}
.qGridStrict3 > .span2on3,
.qGridStrict3 > .span2 {
    flex: 0 0 66.6%;
}
.qGridStrict3 > .span3on3,
.qGridStrict3 > .span3 {
    flex: 0 0 100%;
}
.qGridStrict4 > * {
    flex: 0 0 25%;
}
.qGridStrict4 > .span2on4,
.qGridStrict4 > .span2 {
    flex: 0 0 50%;
}
.qGridStrict4 > .span3on4,
.qGridStrict4 > .span3 {
    flex: 0 0 75%;
}
.qGridStrict4 > .span4on4,
.qGridStrict4 > .span4 {
    flex: 0 0 100%;
}
.qGridStrict5 > * {
    flex: 0 0 20%;
}
.qGridStrict6 > * {
    flex: 0 0 15%;
}
.qGridStrict5 > .span2on5,
.qGridStrict5 > .span2 {
    flex: 0 0 40%;
}
.qGridStrict5 > .span3on5,
.qGridStrict5 > .span3 {
    flex: 0 0 60%;
}
.qGridStrict5 > .span4on5,
.qGridStrict5 > .span4 {
    flex: 0 0 80%;
}
.qGridStrict5 > .span5on5,
.qGridStrict5 > .span5 {
    flex: 0 0 100%;
}
.qGrid1 > * {
    flex: 0 0 calc( 100% - 1em );
    max-width: calc( 100% - 1em );
}
.qGrid2 > * {
    flex: 0 0 calc( 50% - 1em );
    max-width: calc( 50% - 1em );
}
.qGrid2 > .span2on2,
.qGrid2 > .span2 {
    flex: 0 0 calc( 100% - 1em );
    max-width: calc( 100% - 1em );
}
.qGrid3 > * {
    flex: 0 0 calc( 33.3% - 1em );
    max-width: calc( 33.3% - 1em );
}
.qGrid3 > .span2on3,
.qGrid3 > .span2 {
    flex: 0 0 calc( 66.6% - 1em );
    max-width: calc( 66.6% - 1em );
}
.qGrid3 > .span3on3,
.qGrid3 > .span3 {
    flex: 0 0 calc( 100% - 1em );
    max-width: calc( 100% - 1em );
}
.qGrid4 > * {
    flex: 0 0 calc( 25% - 1em );
    max-width: calc( 25% - 1em );
}
.qGrid4 > .span2on4,
.qGrid4 > .span2 {
    flex: 0 0 calc( 50% - 1em );
    max-width: calc( 50% - 1em );
}
.qGrid4 > .span3on4,
.qGrid4 > .span3 {
    flex: 0 0 calc( 75% - 1em );
    max-width: calc( 75% - 1em );
}
.qGrid4 > .span4on4,
.qGrid4 > .span4 {
    flex: 0 0 calc( 100% - 1em );
    max-width: calc( 100% - 1em );
}

.qGrid4 > .span1-3rd {
    flex: 0 0 calc( 33.33% - 1em );
    max-width: calc( 33.33% - 1em );
}
.qGrid4 > .span2-3rd {
    flex: 0 0 calc( 66.66% - 1em );
    max-width: calc( 66.66% - 1em );
}

.qGrid4 > .span1-5th {
    flex: 0 0 calc( 20% - 1em );
    max-width: calc( 20% - 1em );
}

.qGrid4 > .span2-5th {
    flex: 0 0 calc( 40% - 1em );
    max-width: calc( 40% - 1em );
}

.qGrid4 > .span3-5th {
    flex: 0 0 calc( 60% - 1em );
    max-width: calc( 60% - 1em );
}

.qGrid4 > .span4-5th {
    flex: 0 0 calc( 80% - 1em );
    max-width: calc( 80% - 1em );
}

.qGrid5 > * {
    flex: 0 0 calc( 20% - 1em );
    max-width: calc( 20% - 1em );
}
.qGrid5 > .span2on5,
.qGrid5 > .span2 {
    flex: 0 0 calc( 40% - 1em );
    max-width: calc( 40% - 1em );
}
.qGrid5 > .span3on5,
.qGrid5 > .span3 {
    flex: 0 0 calc( 60% - 1em );
    max-width: calc( 60% - 1em );
}
.qGrid5 > .span4on5,
.qGrid5 > .span4 {
    flex: 0 0 calc( 80% - 1em );
    max-width: calc( 80% - 1em );
}
.qGrid5 > .span5on5,
.qGrid5 > .span5 {
    flex: 0 0 calc( 100% - 1em );
    max-width: calc( 100% - 1em );
}
/* 2 col -> 1 col */
@media screen and (max-width:600px){
    .qGridStrict2:not(.no1col) > *,
    .qGridStrict2:not(.no1col) > .span1,
    .qGridStrict2:not(.no1col) > .span2,
    .qGridStrict2:not(.no1col) > .span1on2,
    .qGridStrict2:not(.no1col) > .span2on2 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid2:not(.no1col) > *,
    .qGrid2:not(.no1col) > .span1,
    .qGrid2:not(.no1col) > .span2,
    .qGrid2:not(.no1col) > .span1on2,
    .qGrid2:not(.no1col) > .span2on2 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict2 > .span0on1,
    .qGrid2 > .span0on1 {
        display: none;
    }
}
/* 3 col -> 2 col */
@media screen and (max-width:750px){
    .qGridStrict3:not(.no2col) > *,
    .qGridStrict3:not(.no2col) > .span1on3,
    .qGridStrict3:not(.no2col) > .span2on3,
    .qGridStrict3:not(.no2col) > .span3on3,
    .qGridStrict3:not(.no2col) > .span1on2 {
        flex-basis: 50%;
        max-width: 50%;
    }
    .qGridStrict3:not(.no2col) > .span2,
    .qGridStrict3:not(.no2col) > .span2on2
    .qGridStrict3:not(.no2col) > .span3{
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid3:not(.no2col) > *,
    .qGrid3:not(.no2col) > .span1on3,
    .qGrid3:not(.no2col) > .span2on3,
    .qGrid3:not(.no2col) > .span3on3,
    .qGrid3:not(.no2col) > .span1on2 {
        flex-basis: calc( 50% - 1em );
        max-width: calc( 50% - 1em );
    }
    .qGrid3:not(.no2col) > .span2,
    .qGrid3:not(.no2col) > .span2on2
    .qGrid3:not(.no2col) > .span3{
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict3 > .span0on2,
    .qGrid3 > .span0on2 {
        display: none;
    }
}
/* 3 col -> 1 col */
@media screen and (max-width:500px){
    .qGridStrict3:not(.no1col) > *,
    .qGridStrict3:not(.no1col) > .span1,
    .qGridStrict3:not(.no1col) > .span2,
    .qGridStrict3:not(.no1col) > .span3,
    .qGridStrict3:not(.no1col) > .span1on3,
    .qGridStrict3:not(.no1col) > .span1on3,
    .qGridStrict3:not(.no1col) > .span2on3,
    .qGridStrict3:not(.no1col) > .span3on3,
    .qGridStrict3:not(.no1col) > .span1on2,
    .qGridStrict3:not(.no1col) > .span2on2 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid3:not(.no1col) > *,
    .qGrid3:not(.no1col) > .span1,
    .qGrid3:not(.no1col) > .span2,
    .qGrid3:not(.no1col) > .span3,
    .qGrid3:not(.no1col) > .span1on3,
    .qGrid3:not(.no1col) > .span1on3,
    .qGrid3:not(.no1col) > .span2on3,
    .qGrid3:not(.no1col) > .span3on3,
    .qGrid3:not(.no1col) > .span1on2,
    .qGrid3:not(.no1col) > .span2on2 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict3 > .span0on1,
    .qGrid3 > .span0on1 {
        display: none;
    }
}
/* 4 col -> 3 col */
@media screen and (max-width:800px){
    .qGridStrict4:not(.no3col) > *,
    .qGridStrict4:not(.no3col) > .span1on3 {
        flex-basis: 33.3%;
        max-width: 33.3%;
    }
    .qGridStrict4:not(.no3col) > .span2,
    .qGridStrict4:not(.no3col) > .span2on3 {
        flex-basis: 66.6%;
        max-width: 66.6%;
    }
    .qGridStrict4:not(.no3col) > .span3,
    .qGridStrict4:not(.no3col) > .span3on3,
    .qGridStrict4:not(.no3col) > .span4 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid4:not(.no3col) > *,
    .qGrid4:not(.no3col) > .span1on3 {
        flex-basis: calc( 33.3% - 1em );
        max-width: calc( 33.3% - 1em );
    }
    .qGrid4:not(.no3col) > .span2,
    .qGrid4:not(.no3col) > .span2on3 {
        flex-basis: calc( 66.6% - 1em );
        max-width: calc( 66.6% - 1em );
    }
    .qGrid4:not(.no3col) > .span3,
    .qGrid4:not(.no3col) > .span3on3,
    .qGrid4:not(.no3col) > .span4 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict4 > .span0on3,
    .qGrid4 > .span0on3{
        display: none;
    }
}
/* 4 col -> 2 col */
@media screen and (max-width:600px){
    .qGridStrict4:not(.no2col) > *,
    .qGridStrict4:not(.no2col) > .span1on2,
    .qGridStrict4:not(.no2col) > .span1on3,
    .qGridStrict4:not(.no2col) > .span2on3,
    .qGridStrict4:not(.no2col) > .span3on3 {
        flex-basis: 50%;
        max-width: 50%;
    }
    .qGridStrict4:not(.no2col) > .span2,
    .qGridStrict4:not(.no2col) > .span2on2,
    .qGridStrict4:not(.no2col) > .span3,	
    .qGridStrict4:not(.no2col) > .span4 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid4:not(.no2col) > *,
    .qGrid4:not(.no2col) > .span1on2,
    .qGrid4:not(.no2col) > .span1on3,
    .qGrid4:not(.no2col) > .span2on3,
    .qGrid4:not(.no2col) > .span3on3 {
        flex-basis: calc( 50% - 1em );
        max-width: calc( 50% - 1em );
    }
    .qGrid4:not(.no2col) > .span2,
    .qGrid4:not(.no2col) > .span2on2,
    .qGrid4:not(.no2col) > .span3,	
    .qGrid4:not(.no2col) > .span4 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict4 > .span0on2,
    .qGrid4 > .span0on2 {
        display: none;
    }
}
/* 4 col -> 1 col */
@media screen and (max-width:500px){
    .qGridStrict4:not(.no1col) > *,
    .qGridStrict4:not(.no1col) > .span1,
    .qGridStrict4:not(.no1col) > .span2,
    .qGridStrict4:not(.no1col) > .span3,
    .qGridStrict4:not(.no1col) > .span4,
    .qGridStrict4:not(.no1col) > .span1on3,
    .qGridStrict4:not(.no1col) > .span1on3,
    .qGridStrict4:not(.no1col) > .span2on3,
    .qGridStrict4:not(.no1col) > .span3on3,
    .qGridStrict4:not(.no1col) > .span1on2,
    .qGridStrict4:not(.no1col) > .span2on2 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid4:not(.no1col) > *,
    .qGrid4:not(.no1col) > .span1,
    .qGrid4:not(.no1col) > .span2,
    .qGrid4:not(.no1col) > .span3,
    .qGrid4:not(.no1col) > .span4,
    .qGrid4:not(.no1col) > .span1on3,
    .qGrid4:not(.no1col) > .span1on3,
    .qGrid4:not(.no1col) > .span2on3,
    .qGrid4:not(.no1col) > .span3on3,
    .qGrid4:not(.no1col) > .span1on2,
    .qGrid4:not(.no1col) > .span2on2 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict4 > .span0on1,
    .qGrid4 > .span0on1 {
        display: none;
    }
}
/* 5 col -> 4col */
@media screen and (max-width:850px){
    .qGridStrict5:not(.no4col) > *,
    .strict.flexgrd5:not(.no4col) > .span1on4 {
        flex-basis: 25%;
        max-width: 25%;
    }
    .qGridStrict5:not(.no4col) > .span2,
    .qGridStrict5:not(.no4col) > .span2on4 {
        flex-basis: 50%;
        max-width: 50%;
    }
    .qGridStrict5:not(.no4col) > .span3,
    .qGridStrict5:not(.no4col) > .span3on4 {
        flex-basis: 75%;
        max-width: 75%;
    }
    .qGridStrict5:not(.no4col) > .span4,
    .qGridStrict5:not(.no4col) > .span4on4,
    .qGridStrict5:not(.no4col) > .span5 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid5:not(.no4col) > *,
    .qGrid5:not(.no4col) > .span1on4 {
        flex-basis: calc( 25% - 1em );
        max-width: calc( 25% - 1em );
    }
    .qGrid5:not(.no4col) > .span2,
    .qGrid5:not(.no4col) > .span2on4 {
        flex-basis: calc( 50% - 1em );
        max-width: calc( 50% - 1em );
    }
    .qGrid5:not(.no4col) > .span3,
    .qGrid5:not(.no4col) > .span3on4 {
        flex-basis: calc( 75% - 1em );
        max-width: calc( 75% - 1em );
    }
    .qGrid5:not(.no4col) > .span4,
    .qGrid5:not(.no4col) > .span4on4,
    .qGrid5:not(.no4col) > .span5 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict5 > .span0on4,
    .qGrid5 > .span0on4 {
        display: none;
    }
}
/* 5 col -> 3 col */
@media screen and (max-width:700px){
    .qGridStrict5:not(.no3col) > *,
    .qGridStrict5:not(.no3col) > .span1on3 {
        flex-basis: 33.3%;
        max-width: 33.3%;
    }
    .qGridStrict5:not(.no3col) > .span2,
    .qGridStrict5:not(.no3col) > .span2on3 {
        flex-basis: 66.6%;
        max-width: 66.6%;
    }
    .qGridStrict5:not(.no3col) > .span3,
    .qGridStrict5:not(.no3col) > .span3on3,
    .qGridStrict5:not(.no3col) > .span4,
    .qGridStrict5:not(.no3col) > .span5 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid5:not(.no3col) > *,
    .qGrid5:not(.no3col) > .span1on3 {
        flex-basis: calc( 33.3% - 1em );
        max-width: calc( 33.3% - 1em );
    }
    .qGrid5:not(.no3col) > .span2,
    .qGrid5:not(.no3col) > .span2on3 {
        flex-basis: calc( 66.6% - 1em );
        max-width: calc( 66.6% - 1em );
    }
    .qGrid5:not(.no3col) > .span3,
    .qGrid5:not(.no3col) > .span3on3,
    .qGrid5:not(.no3col) > .span4,
    .qGrid5:not(.no3col) > .span5 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict5 > .span0on3,
    .qGrid5 > .span0on3 {
        display: none;
    }
}
/* 5 col -> 2 col */
@media screen and (max-width:550px){
    .qGridStrict5:not(.no2col) > *,
    .qGridStrict5:not(.no2col) > .span1on2,
    .qGridStrict5:not(.no2col) > .span1on3,
    .qGridStrict5:not(.no2col) > .span2on3,
    .qGridStrict5:not(.no2col) > .span3on3 {
        flex-basis: 50%;
        max-width: 50%;
    }
    .qGridStrict5:not(.no2col) > .span2,
    .qGridStrict5:not(.no2col) > .span2on2,
    .qGridStrict5:not(.no2col) > .span3,	
    .qGridStrict5:not(.no2col) > .span4,
    .qGridStrict5:not(.no2col) > .span5 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid5:not(.no2col) > *,
    .qGrid5:not(.no2col) > .span1on2,
    .qGrid5:not(.no2col) > .span1on3,
    .qGrid5:not(.no2col) > .span2on3,
    .qGrid5:not(.no2col) > .span3on3 {
        flex-basis: calc( 50% - 1em );
        max-width:  calc( 50% - 1em );
    }
    .qGrid5:not(.no2col) > .span2,
    .qGrid5:not(.no2col) > .span2on2,
    .qGrid5:not(.no2col) > .span3,	
    .qGrid5:not(.no2col) > .span4,
    .qGrid5:not(.no2col) > .span5 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict5 > .span0on2,
    .qGrid5 > .span0on2 {
        display: none;
    }
}
/* 5 col -> 1 col */
@media screen and (max-width:450px){
    .qGridStrict5:not(.no1col) > *,
    .qGridStrict5:not(.no1col) > .span1,
    .qGridStrict5:not(.no1col) > .span2,
    .qGridStrict5:not(.no1col) > .span3,
    .qGridStrict5:not(.no1col) > .span4,
    .qGridStrict5:not(.no1col) > .span5,
    .qGridStrict5:not(.no1col) > .span1on3,
    .qGridStrict5:not(.no1col) > .span1on3,
    .qGridStrict5:not(.no1col) > .span2on3,
    .qGridStrict5:not(.no1col) > .span3on3,
    .qGridStrict5:not(.no1col) > .span1on2,
    .qGridStrict5:not(.no1col) > .span2on2 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid5:not(.no1col) > *,
    .qGrid5:not(.no1col) > .span1,
    .qGrid5:not(.no1col) > .span2,
    .qGrid5:not(.no1col) > .span3,
    .qGrid5:not(.no1col) > .span4,
    .qGrid5:not(.no1col) > .span5,
    .qGrid5:not(.no1col) > .span1on3,
    .qGrid5:not(.no1col) > .span1on3,
    .qGrid5:not(.no1col) > .span2on3,
    .qGrid5:not(.no1col) > .span3on3,
    .qGrid5:not(.no1col) > .span1on2,
    .qGrid5:not(.no1col) > .span2on2 {
        flex-basis: calc( 100% - 1em );
        max-width:  calc( 100% - 1em );
    }
    .qGridStrict5 > .span0on1,
    .qGrid5 > .span0on1 {
        display: none;
    }
}

/* 6 col -> 4col */
@media screen and (max-width:850px){
    .qGridStrict6:not(.no4col) > *,
    .strict.flexgrd5:not(.no4col) > .span1on4 {
        flex-basis: 25%;
        max-width: 25%;
    }
    .qGridStrict6:not(.no4col) > .span2,
    .qGridStrict6:not(.no4col) > .span2on4 {
        flex-basis: 50%;
        max-width: 50%;
    }
    .qGridStrict6:not(.no4col) > .span3,
    .qGridStrict6:not(.no4col) > .span3on4 {
        flex-basis: 75%;
        max-width: 75%;
    }
    .qGridStrict6:not(.no4col) > .span4,
    .qGridStrict6:not(.no4col) > .span4on4,
    .qGridStrict6:not(.no4col) > .span5 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid6:not(.no4col) > *,
    .qGrid6:not(.no4col) > .span1on4 {
        flex-basis: calc( 25% - 1em );
        max-width: calc( 25% - 1em );
    }
    .qGrid6:not(.no4col) > .span2,
    .qGrid6:not(.no4col) > .span2on4 {
        flex-basis: calc( 50% - 1em );
        max-width: calc( 50% - 1em );
    }
    .qGrid6:not(.no4col) > .span3,
    .qGrid6:not(.no4col) > .span3on4 {
        flex-basis: calc( 75% - 1em );
        max-width: calc( 75% - 1em );
    }
    .qGrid6:not(.no4col) > .span4,
    .qGrid6:not(.no4col) > .span4on4,
    .qGrid6:not(.no4col) > .span5 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict6 > .span0on4,
    .qGrid6 > .span0on4 {
        display: none;
    }
}
/* 6 col -> 3 col */
@media screen and (max-width:700px){
    .qGridStrict6:not(.no3col) > *,
    .qGridStrict6:not(.no3col) > .span1on3 {
        flex-basis: 33.3%;
        max-width: 33.3%;
    }
    .qGridStrict6:not(.no3col) > .span2,
    .qGridStrict6:not(.no3col) > .span2on3 {
        flex-basis: 66.6%;
        max-width:  66.6%;
    }
    .qGridStrict6:not(.no3col) > .span3,
    .qGridStrict6:not(.no3col) > .span3on3,
    .qGridStrict6:not(.no3col) > .span4,
    .qGridStrict6:not(.no3col) > .span5 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid6:not(.no3col) > *,
    .qGrid6:not(.no3col) > .span1on3 {
        flex-basis: calc( 33.3% - 1em );
        max-width: calc( 33.3% - 1em );
    }
    .qGrid6:not(.no3col) > .span2,
    .qGrid6:not(.no3col) > .span2on3 {
        flex-basis: calc( 66.6% - 1em );
        max-width: calc( 66.6% - 1em );
    }
    .qGrid6:not(.no3col) > .span3,
    .qGrid6:not(.no3col) > .span3on3,
    .qGrid6:not(.no3col) > .span4,
    .qGrid6:not(.no3col) > .span5 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict6 > .span0on3,
    .qGrid6 > .span0on3 {
        display: none;
    }
}
/* 6 col -> 2 col */
@media screen and (max-width:550px){
    .qGridStrict6:not(.no2col) > *,
    .qGridStrict6:not(.no2col) > .span1on2,
    .qGridStrict6:not(.no2col) > .span1on3,
    .qGridStrict6:not(.no2col) > .span2on3,
    .qGridStrict6:not(.no2col) > .span3on3 {
        flex-basis: 50%;
        max-width: 50%;
    }
    .qGridStrict6:not(.no2col) > .span2,
    .qGridStrict6:not(.no2col) > .span2on2,
    .qGridStrict6:not(.no2col) > .span3,	
    .qGridStrict6:not(.no2col) > .span4,
    .qGridStrict6:not(.no2col) > .span5 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid6:not(.no2col) > *,
    .qGrid6:not(.no2col) > .span1on2,
    .qGrid6:not(.no2col) > .span1on3,
    .qGrid6:not(.no2col) > .span2on3,
    .qGrid6:not(.no2col) > .span3on3 {
        flex-basis: calc( 50% - 1em );
        max-width: calc( 50% - 1em );
    }
    .qGrid6:not(.no2col) > .span2,
    .qGrid6:not(.no2col) > .span2on2,
    .qGrid6:not(.no2col) > .span3,	
    .qGrid6:not(.no2col) > .span4,
    .qGrid6:not(.no2col) > .span5 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict6 > .span0on2,
    .qGrid6 > .span0on2 {
        display: none;
    }
}
/* 6 col -> 1 col */
@media screen and (max-width:450px){
    .qGridStrict6:not(.no1col) > *,
    .qGridStrict6:not(.no1col) > .span1,
    .qGridStrict6:not(.no1col) > .span2,
    .qGridStrict6:not(.no1col) > .span3,
    .qGridStrict6:not(.no1col) > .span4,
    .qGridStrict6:not(.no1col) > .span5,
    .qGridStrict6:not(.no1col) > .span1on3,
    .qGridStrict6:not(.no1col) > .span1on3,
    .qGridStrict6:not(.no1col) > .span2on3,
    .qGridStrict6:not(.no1col) > .span3on3,
    .qGridStrict6:not(.no1col) > .span1on2,
    .qGridStrict6:not(.no1col) > .span2on2 {
        flex-basis: 100%;
        max-width: 100%;
    }
    .qGrid6:not(.no1col) > *,
    .qGrid6:not(.no1col) > .span1,
    .qGrid6:not(.no1col) > .span2,
    .qGrid6:not(.no1col) > .span3,
    .qGrid6:not(.no1col) > .span4,
    .qGrid6:not(.no1col) > .span5,
    .qGrid6:not(.no1col) > .span1on3,
    .qGrid6:not(.no1col) > .span1on3,
    .qGrid6:not(.no1col) > .span2on3,
    .qGrid6:not(.no1col) > .span3on3,
    .qGrid6:not(.no1col) > .span1on2,
    .qGrid6:not(.no1col) > .span2on2 {
        flex-basis: calc( 100% - 1em );
        max-width: calc( 100% - 1em );
    }
    .qGridStrict6 > .span0on1,
    .qGrid6 > .span0on1 {
        display: none;
    }
  
}


@media only screen and (max-width: 768px) {
    .qGridCenter {
        margin: unset;
        margin-left: -1em;
    }

    .qGridThird,
    .qGridTwoThirds,
    .qGridHalf{
        width: calc( 100% + 1em );
    }
}