/**
 * Display Breakpoints
 *
 * Examples:
 * - .xs only displayed for xs screens
 * - .xsn only displayed for screens s-xl
 */
/* xs: portrait phone */
@media screen and                         (max-width:  480px) {
    .xsn:not(.xs),.s:not(.xs),.m:not(.xs),.l:not(.xs),.xl:not(.xs) {display:none !important;}
}
/* s: landscape phone, portrait tablet */
@media screen and (min-width:  481px) and (max-width:  720px) {
    .xs:not(.s),.sn:not(.s),.m:not(.s),.l:not(.s),.xl:not(.s) {display:none !important;}
}
/* m: landscape tablet */
@media all   and (min-width:  721px) and (max-width:  1080px) {
    .xs:not(.m),.s:not(.m),.mn:not(.m),.l:not(.m),.xl:not(.m) {display:none !important;}
}
/* l: laptop */
@media screen and (min-width:  1081px) and (max-width: 1620px) {
    .xs:not(.l),.s:not(.l),.m:not(.l),.ln:not(.l),.xl:not(.l) {display:none !important;}
}
/* xl: desktop */
@media screen and (min-width: 1621px) {
    .xs:not(.xl),.s:not(.xl),.m:not(.xl),.l:not(.xl),.xln:not(.xl) {display:none !important;}
}
/**
 * Standard flexboxes
 */
.fc,
.fr {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    align-content: stretch;
}
.fc {
    flex-flow: column wrap;
}
.fr {
    flex-flow: row wrap;
}
.fc > *,
.fr > * {
    flex: 1 1 auto;
}
.fw0 {
    flex-wrap: nowrap;
}
.fg0 {
    flex-grow: 0;
}
.fs0 {
    flex-shrink: 0;
}
/**
 * Quick styling
 */
.b0 {
    border:0;
}
.p0 {
    padding:0;
}
.m0 {
    margin:0;
}