.q-layout-container{
  width: 100%;
  padding: 16px;
  margin-right: auto;
  margin-left: auto;
}
.q-layout-row{
  display: flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  -ms-flex-wrap:wrap;
}
.q-col-1,.q-col-2,
 .q-col-3, .q-col-4,
.q-col-5, .q-col-6,
.q-col-7, .q-col-8,
.q-col-9, .q-col-10,
.q-col-11,.q-col-12
 {
  flex-grow: 0;
  -ms-flex-grow:0;
  flex-shrink: 0;
  -ms-flex-shrink:0;
  position: relative;
  padding: 16px;
}

.q-col-sm-1,.q-col-sm-2,
.q-col-sm-3, .q-col-sm-4,
.q-col-sm-5, .q-col-sm-6,
.q-col-sm-7, .q-col-sm-8,
.q-col-sm-9, .q-col-sm-10
.q-col-sm-11,.q-col-sm-12,
.q-col-md-1,.q-col-md-2,
.q-col-md-3, .q-col-md-4,
.q-col-md-5, .q-col-md-6,
.q-col-md-7, .q-col-md-8,
.q-col-md-9, .q-col-md-10
.q-col-md-11,.q-col-md-12,
.q-col-lg-1,.q-col-lg-2,
.q-col-lg-3, .q-col-lg-4,
.q-col-lg-5, .q-col-lg-6,
.q-col-lg-7, .q-col-lg-8,
.q-col-lg-9, .q-col-lg-10
.q-col-lg-11,.q-col-lg-12,
.q-col-xl-1,.q-col-xl-2,
.q-col-xl-3, .q-col-xl-4,
.q-col-xl-5, .q-col-xl-6,
.q-col-xl-7, .q-col-xl-8,
.q-col-xl-9, .q-col-xl-10
.q-col-xl-11,.q-col-xl-12{
          position: relative;
          width: 100%;
          min-height: 1px;
padding: 16px;
      }

.q-col-1{
  -ms-flex-basis: 8.333333%;
  flex-basis:  8.333333%;
  max-width: 8.333333%;
}
.q-col-2{
  -ms-flex-basis: 16.666667%;
  flex-basis:  16.666667%;
  max-width: 16.666667%;
}
.q-col-3{
  -ms-flex-basis: 25%;
  flex-basis:  25%;
  max-width: 25%;
}
.q-col-4{
  -ms-flex-basis: 33.333333%;
  flex-basis:  33.333333%;
  max-width: 33.333333%;
}
.q-col-5{
  -ms-flex-basis:41.666667%;
  flex-basis:  41.666667%;
  max-width: 41.666667%;
}
.q-col-6{
  -ms-flex-basis: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
.q-col-7{
  -ms-flex-basis: 58.333333%;
  flex-basis: 58.333333%;
  max-width: 58.333333%;
}
.q-col-8{
  -ms-flex-basis: 66.666667%;
  flex-basis: 66.666667%;
  max-width: 66.666667%;
}
.q-col-9{
  -ms-flex-basis: 75%;
  flex-basis: 75%;
  max-width: 75%;
}
.q-col-10{
  -ms-flex-basis: 83.333333%;
  flex-basis: 83.333333%;
  max-width: 83.333333%;
}
.q-col-11{
  -ms-flex-basis: 91.666667%;
  flex-basis: 91.666667%;
  max-width: 91.666667%;
}
.q-col-12{
  -ms-flex-basis: 100%;
  flex-basis: 100%;
  max-width: 100%;
}

@media (min-width: 576px){

.q-col-sm-1{
  -ms-flex-basis: 8.333333%;
  flex-basis:  8.333333%;
  max-width: 8.333333%;
}
.q-col-sm-2{
  -ms-flex-basis: 16.666667%;
  flex-basis:  16.666667%;
  max-width: 16.666667%;
}
.q-col-sm-3{
  -ms-flex-basis: 25%;
  flex-basis:  25%;
  max-width: 25%;
}
.q-col-sm-4{
  -ms-flex-basis: 33.333333%;
  flex-basis:  33.333333%;
  max-width: 33.333333%;
}
.q-col-sm-5{
  -ms-flex-basis:41.666667%;
  flex-basis:  41.666667%;
  max-width: 41.666667%;
}
.q-col-sm-6{
  -ms-flex-basis: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
.q-col-sm-7{
  -ms-flex-basis: 58.333333%;
  flex-basis: 58.333333%;
  max-width: 58.333333%;
}
.q-col-sm-8{
  -ms-flex-basis: 66.666667%;
  flex-basis: 66.666667%;
  max-width: 66.666667%;
}
.q-col-sm-9{
  -ms-flex-basis: 75%;
  flex-basis: 75%;
  max-width: 75%;
}
.q-col-sm-10{
  -ms-flex-basis: 83.333333%;
  flex-basis: 83.333333%;
  max-width: 83.333333%;
}
.q-col-sm-11{
  -ms-flex-basis: 91.666667%;
  flex-basis: 91.666667%;
  max-width: 91.666667%;
}
.q-col-sm-12{
  -ms-flex-basis: 100%;
  flex-basis: 100%;
  max-width: 100%;
}
}

@media (min-width: 768px) {

.q-col-md-1{
  -ms-flex-basis: 8.333333%;
  flex-basis:  8.333333%;
  max-width: 8.333333%;
}
.q-col-md-2{
  -ms-flex-basis: 16.666667%;
  flex-basis:  16.666667%;
  max-width: 16.666667%;
}
.q-col-md-3{
  -ms-flex-basis: 25%;
  flex-basis:  25%;
  max-width: 25%;
}
.q-col-md-4{
  -ms-flex-basis: 33.333333%;
  flex-basis:  33.333333%;
  max-width: 33.333333%;
}
.q-col-md-5{
  -ms-flex-basis:41.666667%;
  flex-basis:  41.666667%;
  max-width: 41.666667%;
}
.q-col-md-6{
  -ms-flex-basis: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
.q-col-md-7{
  -ms-flex-basis: 58.333333%;
  flex-basis: 58.333333%;
  max-width: 58.333333%;
}
.q-col-md-8{
  -ms-flex-basis: 66.666667%;
  flex-basis: 66.666667%;
  max-width: 66.666667%;
}
.q-col-md-9{
  -ms-flex-basis: 75%;
  flex-basis: 75%;
  max-width: 75%;
}
.q-col-md-10{
  -ms-flex-basis: 83.333333%;
  flex-basis: 83.333333%;
  max-width: 83.333333%;
}
.q-col-md-11{
  -ms-flex-basis: 91.666667%;
  flex-basis: 91.666667%;
  max-width: 91.666667%;
}
.q-col-md-12{
  -ms-flex-basis: 100%;
  flex-basis: 100%;
  max-width: 100%;
}

}

@media (min-width: 992px) {

.q-col-lg-1{
  -ms-flex-basis: 8.333333%;
  flex-basis:  8.333333%;
  max-width: 8.333333%;
}
.q-col-lg-2{
  -ms-flex-basis: 16.666667%;
  flex-basis:  16.666667%;
  max-width: 16.666667%;
}
.q-col-lg-3{
  -ms-flex-basis: 25%;
  flex-basis:  25%;
  max-width: 25%;
}
.q-col-lg-4{
  -ms-flex-basis: 33.333333%;
  flex-basis:  33.333333%;
  max-width: 33.333333%;
}
.q-col-lg-5{
  -ms-flex-basis:41.666667%;
  flex-basis:  41.666667%;
  max-width: 41.666667%;
}
.q-col-lg-6{
  -ms-flex-basis: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
.q-col-lg-7{
  -ms-flex-basis: 58.333333%;
  flex-basis: 58.333333%;
  max-width: 58.333333%;
}
.q-col-lg-8{
  -ms-flex-basis: 66.666667%;
  flex-basis: 66.666667%;
  max-width: 66.666667%;
}
.q-col-lg-9{
  -ms-flex-basis: 75%;
  flex-basis: 75%;
  max-width: 75%;
}
.q-col-lg-10{
  -ms-flex-basis: 83.333333%;
  flex-basis: 83.333333%;
  max-width: 83.333333%;
}
.q-col-lg-11{
  -ms-flex-basis: 91.666667%;
  flex-basis: 91.666667%;
  max-width: 91.666667%;
}
.q-col-lg-12{
  -ms-flex-basis: 100%;
  flex-basis: 100%;
  max-width: 100%;
}
}
@media (min-width: 1200px){

.q-col-xl-1{
  -ms-flex-basis: 8.333333%;
  flex-basis:  8.333333%;
  max-width: 8.333333%;
}
.q-col-xl-2{
  -ms-flex-basis: 16.666667%;
  flex-basis:  16.666667%;
  max-width: 16.666667%;
}
.q-col-xl-3{
  -ms-flex-basis: 25%;
  flex-basis:  25%;
  max-width: 25%;
}
.q-col-xl-4{
  -ms-flex-basis: 33.333333%;
  flex-basis:  33.333333%;
  max-width: 33.333333%;
}
.q-col-xl-5{
  -ms-flex-basis:41.666667%;
  flex-basis:  41.666667%;
  max-width: 41.666667%;
}
.q-col-xl-6{
  -ms-flex-basis: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
.q-col-xl-7{
  -ms-flex-basis: 58.333333%;
  flex-basis: 58.333333%;
  max-width: 58.333333%;
}
.q-col-xl-8{
  -ms-flex-basis: 66.666667%;
  flex-basis: 66.666667%;
  max-width: 66.666667%;
}
.q-col-xl-9{
  -ms-flex-basis: 75%;
  flex-basis: 75%;
  max-width: 75%;
}
.q-col-xl-10{
  -ms-flex-basis: 83.333333%;
  flex-basis: 83.333333%;
  max-width: 83.333333%;
}
.q-col-xl-11{
  -ms-flex-basis: 91.666667%;
  flex-basis: 91.666667%;
  max-width: 91.666667%;
}
.q-col-xl-12{
  -ms-flex-basis: 100%;
  flex-basis: 100%;
  max-width: 100%;
}
}