/**
 * establish our max-width based screen resolution breakpoints
 */
/**
 * set the maximum widht of a .container element
 */
/**
 * grid specifications
 */
/**
 * max order level
 */
/**
 * transition variables
 */
/**
 * font related
 */
/**
 * headings
 */
body {
  margin: 10px;
  font-family: verdana, tahoma, arial, sans-serif;
  font-size: 15px; }

section {
  border: 2px solid #ddd;
  padding: 5px;
  margin: 5px; }

#debug {
  position: fixed;
  top: 0;
  right: 0;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.15);
  border-bottom-left-radius: 5px;
  border: 2px dotted rgba(0, 0, 0, 0.5);
  border-width: 0 0 2px 2px; }
  @media (max-width: 639px) {
    #debug:before {
      content: 'xs: '; } }
  @media (min-width: 640px) and (max-width: 959px) {
    #debug:before {
      content: 'sm: '; } }
  @media (min-width: 960px) and (max-width: 1199px) {
    #debug:before {
      content: 'md: '; } }
  @media (min-width: 1200px) and (max-width: 1599px) {
    #debug:before {
      content: 'lg: '; } }
  @media (min-width: 1600px) and (max-width: 1920px) {
    #debug:before {
      content: 'xl: '; } }
  @media (min-width: 1921px) {
    #debug:before {
      content: 'xxl: '; } }

.flexi {
  border: 1px solid #a00; }
  .flexi > * {
    background-color: #efefef;
    border: 1px solid cyan;
    min-height: 50px; }
    .flexi > *:nth-child(odd) {
      background-color: #dfdfdf;
      border-color: magenta; }