/* Properties for the Parent - flex container */

/* display: flex | inline-flex; */

.container{
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

.inline-container{
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}

/* flex-direction: row(default) | row-reverse | column | column-reverse; */

.dir-row{
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -webkit-flex-direction: row;
     -ms-flex-direction: row;
         flex-direction: row;
}

.dir-row-reverse{
 -webkit-box-orient: horizontal;
 -webkit-box-direction: reverse;
 -webkit-flex-direction: row-reverse;
     -ms-flex-direction: row-reverse;
         flex-direction: row-reverse;
}

.dir-column{
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
     -ms-flex-direction: column;
         flex-direction: column;
}

.dir-column-reverse{
 -webkit-box-orient: vertical;
 -webkit-box-direction: reverse;
 -webkit-flex-direction: column-reverse;
     -ms-flex-direction: column-reverse;
         flex-direction: column-reverse;
}

/* flex-wrap: nowrap(default) | wrap | wrap-reverse; */

.nowrap{
 -webkit-flex-wrap: nowrap;
     -ms-flex-wrap: nowrap;
         flex-wrap: nowrap;
}

.wrap{
 -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
}

.wrap-reverse{
 -webkit-flex-wrap: wrap-reverse;
     -ms-flex-wrap: wrap-reverse;
         flex-wrap: wrap-reverse;
}

/* 
   flex-flow: flex-direction || flex-wrap 
   flex-flow : row nowrap; (default)
*/

.flow-row-wrap{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row; 
  -webkit-flex-wrap: wrap; 
      -ms-flex-wrap: wrap; 
          flex-wrap: wrap;
}

.flow-row-nowrap{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row; 
  -webkit-flex-wrap: nowrap; 
      -ms-flex-wrap: nowrap; 
          flex-wrap: nowrap;
}

.flow-row-wrap-reverse{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row; 
  -webkit-flex-wrap: wrap-reverse; 
      -ms-flex-wrap: wrap-reverse; 
          flex-wrap: wrap-reverse;
}

.flow-row-reverse-wrap{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; 
  -webkit-flex-wrap: wrap; 
      -ms-flex-wrap: wrap; 
          flex-wrap: wrap;
}

.flow-row-reverse-nowrap{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; 
  -webkit-flex-wrap: nowrap; 
      -ms-flex-wrap: nowrap; 
          flex-wrap: nowrap;
}

.flow-row-reverse-wrap-reverse{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; 
  -webkit-flex-wrap: wrap-reverse; 
      -ms-flex-wrap: wrap-reverse; 
          flex-wrap: wrap-reverse;
}

.flow-column-wrap{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; 
  -webkit-flex-wrap: wrap; 
      -ms-flex-wrap: wrap; 
          flex-wrap: wrap;
}

.flow-column-nowrap{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; 
  -webkit-flex-wrap: nowrap; 
      -ms-flex-wrap: nowrap; 
          flex-wrap: nowrap;
}

.flow-column-wrap-reverse{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; 
  -webkit-flex-wrap: wrap-reverse; 
      -ms-flex-wrap: wrap-reverse; 
          flex-wrap: wrap-reverse;
}

.flow-column-reverse-wrap{
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse; 
  -webkit-flex-wrap: wrap; 
      -ms-flex-wrap: wrap; 
          flex-wrap: wrap;
}

.flow-column-reverse-nowrap{
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse; 
  -webkit-flex-wrap: nowrap; 
      -ms-flex-wrap: nowrap; 
          flex-wrap: nowrap;
}

.flow-column-reverse-wrap-reverse{
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse; 
  -webkit-flex-wrap: wrap-reverse; 
      -ms-flex-wrap: wrap-reverse; 
          flex-wrap: wrap-reverse;
}

/*  justify-content: flex-start(default) | flex-end | center | space-between | space-around; */

.justify-content-start{
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
}

.justify-content-end{
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
       -ms-flex-pack: end;
           justify-content: flex-end;
}

.justify-content-center{
   -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
}

.justify-content-space-between{
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
}

.justify-content-space-around{
   -webkit-justify-content: space-around;
       -ms-flex-pack: distribute;
           justify-content: space-around;
}

/*  align-items: flex-start | flex-end | center | baseline | stretch(default); */

.align-items-start{
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.align-items-end{
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.align-items-center{
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.align-items-baseline{
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.align-items-stretch{
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

 /* align-content: flex-start | flex-end | center | space-between | space-around | stretch(default); */

.align-content-start{
 -webkit-align-content: flex-start;
     -ms-flex-line-pack: start;
         align-content: flex-start;
}

.align-content-end{
 -webkit-align-content: flex-end;
     -ms-flex-line-pack: end;
         align-content: flex-end;
}

.align-content-center{
 -webkit-align-content: center;
     -ms-flex-line-pack: center;
         align-content: center;
}

.align-content-space-between{
 -webkit-align-content: space-between;
     -ms-flex-line-pack: justify;
         align-content: space-between;
}

.align-content-space-around{
 -webkit-align-content: space-around ;
     -ms-flex-line-pack: space-around ;
         align-content: space-around ;
}

.align-content-stretch{
 -webkit-align-content: stretch;
     -ms-flex-line-pack: stretch;
         align-content: stretch;
}

/* Properties for the children - flex items */

/* Order */ 

.order-1{
 -webkit-box-ordinal-group: 2;
 -webkit-order: 1;
     -ms-flex-order: 1;
         order: 1;
}

.order-2{
 -webkit-box-ordinal-group: 3;
 -webkit-order: 2;
     -ms-flex-order: 2;
         order: 2;
}

.order-3{
 -webkit-box-ordinal-group: 4;
 -webkit-order: 3;
     -ms-flex-order: 3;
         order: 3;
}

.order-4{
 -webkit-box-ordinal-group: 5;
 -webkit-order: 4;
     -ms-flex-order: 4;
         order: 4;
}

.order-5{
 -webkit-box-ordinal-group: 6;
 -webkit-order: 5;
     -ms-flex-order: 5;
         order: 5;
}

.order-6{
 -webkit-box-ordinal-group: 7;
 -webkit-order: 6;
     -ms-flex-order: 6;
         order: 6;
}

.order-7{
 -webkit-box-ordinal-group: 8;
 -webkit-order: 7;
     -ms-flex-order: 7;
         order: 7;
}

.order-8{
 -webkit-box-ordinal-group: 9;
 -webkit-order: 8;
     -ms-flex-order: 8;
         order: 8;
}

.order-9{
 -webkit-box-ordinal-group: 10;
 -webkit-order: 9;
     -ms-flex-order: 9;
         order: 9;
}

.order-10{
 -webkit-box-ordinal-group: 11;
 -webkit-order: 10;
     -ms-flex-order: 10;
         order: 10;
}

.order-1{
 -webkit-box-ordinal-group: 2;
 -webkit-order: 1;
     -ms-flex-order: 1;
         order: 1;
}

/* flex-grow: <number>; (default 0 ) */

.grow-0{
 -webkit-box-flex: 0;
 -webkit-flex-grow: 0;
     -ms-flex-positive: 0;
         flex-grow: 0;
}

.grow-1{
 -webkit-box-flex: 1;
 -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
         flex-grow: 1;
}

.grow-2{
 -webkit-box-flex: 2;
 -webkit-flex-grow: 2;
     -ms-flex-positive: 2;
         flex-grow: 2;
}

.grow-3{
 -webkit-box-flex: 3;
 -webkit-flex-grow: 3;
     -ms-flex-positive: 3;
         flex-grow: 3;
}

.grow-4{
 -webkit-box-flex: 4;
 -webkit-flex-grow: 4;
     -ms-flex-positive: 4;
         flex-grow: 4;
}

.grow-5{
 -webkit-box-flex: 5;
 -webkit-flex-grow: 5;
     -ms-flex-positive: 5;
         flex-grow: 5;
}

/* flex-shrink: <number>; (default 1) */

.shrink-0{
 -webkit-flex-shrink: 0;
     -ms-flex-negative: 0;
         flex-shrink: 0;
}

.shrink-1{
 -webkit-flex-shrink: 1;
     -ms-flex-negative: 1;
         flex-shrink: 1;
}

.shrink-2{
 -webkit-flex-shrink: 2;
     -ms-flex-negative: 2;
         flex-shrink: 2;
}

.shrink-3{
 -webkit-flex-shrink: 3;
     -ms-flex-negative: 3;
         flex-shrink: 3;
}

.shrink-4{
 -webkit-flex-shrink: 4;
     -ms-flex-negative: 4;
         flex-shrink: 4;
}

.shrink-5{
 -webkit-flex-shrink: 5;
     -ms-flex-negative: 5;
         flex-shrink: 5;
}

/* flex-basis: <length> | auto;  (default auto) */

.basis-auto{
 -webkit-flex-basis : auto;
     -ms-flex-preferred-size : auto;
         flex-basis : auto;
}

.basis-0{
 -webkit-flex-basis : 0;
     -ms-flex-preferred-size : 0;
         flex-basis : 0;
}

.basis-25{
 -webkit-flex-basis : 25%;
     -ms-flex-preferred-size : 25%;
         flex-basis : 25%;
}

.basis-33{
 -webkit-flex-basis : 33.3333%;
     -ms-flex-preferred-size : 33.3333%;
         flex-basis : 33.3333%;
}

.basis-50{
 -webkit-flex-basis : 50%;
     -ms-flex-preferred-size : 50%;
         flex-basis : 50%;
}

.basis-100{
 -webkit-flex-basis : 100%;
     -ms-flex-preferred-size : 100%;
         flex-basis : 100%;
}

/* 
 flex: none | [ flex-grow flex-shrink flex-basis ] 
 flex-shrink and flex-basis are optional. Default is 0 1 auto.
*/

.flex-initial{
 -webkit-box-flex: 0;
 -webkit-flex: 0 1 auto;
     -ms-flex: 0 1 auto;
         flex: 0 1 auto;
}

.flex-auto{
 -webkit-box-flex: 1;
 -webkit-flex: 1 1 auto;
     -ms-flex: 1 1 auto;
         flex: 1 1 auto;
}

.flex-none{
 -webkit-box-flex: 0;
 -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
         flex: 0 0 auto;
}

.flex-equal{
 -webkit-box-flex: 1;
 -webkit-flex: 1;
     -ms-flex: 1;
         flex: 1; 
}

.flex-0-1-0{
 -webkit-box-flex: 0;
 -webkit-flex: 0 1 0;
     -ms-flex: 0 1 0;
         flex: 0 1 0;
}

.flex-0-1-20{
 -webkit-box-flex: 20%;
 -webkit-flex: 0 1 20%;
     -ms-flex: 0 1 20%;
         flex: 0 1 20%;
}

.flex-0-1-25{
 -webkit-box-flex: 25%;
 -webkit-flex: 0 1 25%;
     -ms-flex: 0 1 25%;
         flex: 0 1 25%;
}

.flex-0-1-50{
 -webkit-box-flex: 0;
 -webkit-flex: 0 1 50%;
     -ms-flex: 0 1 50%;
         flex: 0 1 50%;
}

.flex-0-1-100{
 -webkit-box-flex: 0;
 -webkit-flex: 0 1 100%;
     -ms-flex: 0 1 100%;
         flex: 0 1 100%;
}

.flex-1-1-0{
 -webkit-box-flex: 1;
 -webkit-flex: 1 1 0;
     -ms-flex: 1 1 0;
         flex: 1 1 0;
}

.flex-1-1-0per{
 -webkit-box-flex: 1;
 -webkit-flex: 1 1 0%;
     -ms-flex: 1 1 0%;
         flex: 1 1 0%;
}

.flex-1-1-50{
 -webkit-box-flex: 1;
 -webkit-flex: 1 1 50%;
     -ms-flex: 1 1 50%;
         flex: 1 1 50%;
}

.flex-1-1-100{
 -webkit-box-flex: 1;
 -webkit-flex: 1 1 100%;
     -ms-flex: 1 1 100%;
         flex: 1 1 100%;
}

.flex-1-0-0{
 -webkit-box-flex: 1;
 -webkit-flex: 1 0 0;
     -ms-flex: 1 0 0;
         flex: 1 0 0;
}

.flex-1-0-50{
 -webkit-box-flex: 1;
 -webkit-flex: 1 0 50%;
     -ms-flex: 1 0 50%;
         flex: 1 0 50%;
}

.flex-1-0-100{
 -webkit-box-flex: 1;
 -webkit-flex: 1 0 100%;
     -ms-flex: 1 0 100%;
         flex: 1 0 100%;
}

/* align-self: auto | flex-start | flex-end | center | baseline | stretch; */

.align-self-auto{
 -webkit-align-self: auto;
     -ms-flex-item-align: auto;
         align-self: auto;
}

.align-self-start{
 -webkit-align-self: flex-start;
     -ms-flex-item-align: start;
         align-self: flex-start;
}

.align-self-end{
 -webkit-align-self: flex-end;
     -ms-flex-item-align: end;
         align-self: flex-end;
}

.align-self-center{
 -webkit-align-self: center;
     -ms-flex-item-align: center;
         align-self: center;
}

.align-self-baseline{
 -webkit-align-self: baseline;
     -ms-flex-item-align: baseline;
         align-self: baseline;
}

.align-self-stretch{
 -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
         align-self: stretch;
}