/* Flex-Layout */
.flexContainer {
    display: flex;
    flex-wrap: wrap;
}
.flexContainer.centeredContainer {justify-content: center;}
.flexContainer.justify_spread {justify-content: space-between;}

.flexItem {
    flex: 1 1 auto;
}
.flexItemNoGrowth {
    flex: 0 1 auto;
}
.flexItemNoShrink {
    flex: 1 0 auto;
}

/* Grid-Layout */
.ui-g {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.ui-g-nopad {padding: 0;}
.ui-g-pad {padding: 0.5em;}

.ui-g-1, .ui-g-2, .ui-g-3, .ui-g-4, .ui-g-5, .ui-g-6, .ui-g-7, .ui-g-8, .ui-g-9, .ui-g-10, .ui-g-11, .ui-g-12 {
    float: left;
    box-sizing: border-box;
}
.ui-g-0 {width: 0;}
.ui-g-1 {width: 8.3333%;}
.ui-g-2 {width: 16.66666667%;}
.ui-g-3 {width: 25%;}
.ui-g-4 {width: 33.33333333%;}
.ui-g-5 {width: 41.66666667%;}
.ui-g-6 {width: 50%;}
.ui-g-7 {width: 58.33333333%}
.ui-g-8 {width: 66.66666667%;}
.ui-g-9 {width: 75%;}
.ui-g-10 {width: 83.3333%;}
.ui-g-11 {width: 91.66666667%}
.ui-g-12 {width: 100%;}

/* Responsive Grid (mittlere Screensize), ca. 640px */
@media screen and (min-width:40.063em) {
    .ui-md-nopad {padding: 0;}
    .ui-md-pad {padding: 0.5em;}
    .ui-md-0 {width: 0;}
    .ui-md-1 {width: 8.33333333%}
    .ui-md-2 {width: 16.66666667%}
    .ui-md-3 {width: 25%}
    .ui-md-4 {width: 33.33333333%}
    .ui-md-5 {width: 41.66666667%}
    .ui-md-6 {width: 50%}
    .ui-md-7 {width: 58.33333333%}
    .ui-md-8 {width: 66.66666667%}
    .ui-md-9 {width: 75%}
    .ui-md-10 {width: 83.33333333%}
    .ui-md-11 {width: 91.66666667%}
    .ui-md-12 {width: 100%}
}

/* Responsive Grid (hohe Screensize), ca. 1024px */
@media screen and (min-width:64.063em) {
    .ui-lg-nopad {padding: 0;}
    .ui-lg-pad {padding: 0.5em;}
    .ui-lg-0{width: 0}
    .ui-lg-1{width: 8.33333333%}
    .ui-lg-2{width: 16.66666667%}
    .ui-lg-3{width: 25%}
    .ui-lg-4{width: 33.33333333%}
    .ui-lg-5{width: 41.66666667%}
    .ui-lg-6{width: 50%}
    .ui-lg-7{width: 58.33333333%}
    .ui-lg-8{width: 66.66666667%}
    .ui-lg-9{width: 75%}
    .ui-lg-10{width: 83.33333333%}
    .ui-lg-11{width: 91.66666667%}
    .ui-lg-12{width: 100%}
}