/* Property: display
  Description: This defines a flex container; inline or block depending on the given value. 
  It enables a flex context for all its direct children..
  Apply to: Container */
.flex {display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}
/* Property: flex-direction
  Description: This establishes the main-axis, thus defining the direction flex items are placed in the flex container.
  Apply to: Container */
.flex-row {-moz-box-direction:normal; -webkit-box-direction:row; -webkit-box-orient:horizontal; -webkit-flex-direction:row; -ms-flexbox-direction:row; -ms-flex-direction:row; flex-direction:row;}
.flex-rowreverse {-moz-box-direction:normal; -webkit-box-direction:row-reverse; -webkit-box-orient:horizontal; -webkit-flex-direction:row-reverse; -ms-flexbox-direction:row-reverse; -ms-flex-direction:row-reverse; flex-direction:row-reverse;}
.flex-col {-moz-box-direction:column; -webkit-box-direction:column; -webkit-box-orient:vertical; -webkit-flex-direction:column; -ms-flexbox-direction:column; -ms-flex-direction:column; flex-direction:column;}
/* Property: flex-wrap
  Description: By default, flex items will all try to fit onto one line.
  You can change that and allow the items to wrap as needed with this property.
  Apply to: Container */
.flex-wrap    {-moz-box-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flexbox-wrap:wrap; -ms-flex-wrap: wrap; flex-wrap:wrap;}
.flex-nowrap  {-moz-box-wrap:nowrap; -webkit-box-wrap:nowrap; -webkit-flex-wrap:nowrap; -ms-flexbox-wrap:nowrap; -ms-flex-wrap:nowrap; flex-wrap:nowrap;}
/* Property: align-items
  Description: This defines the default behaviour for how flex items are laid out along the cross axis on the current line.
  Apply to: Container */
.vCenter  {-webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; align-items:center;}
.vStart   {-webkit-align-items:flex-start; -moz-align-items:flex-start; -ms-align-items:flex-start; align-items:flex-start;}
.vEnd     {-webkit-align-items:flex-end; -moz-align-items:flex-end; -ms-align-items:flex-end; align-items:flex-end;}
.vcEnd     {-webkit-align-content:flex-end; -moz-align-content:flex-end; -ms-align-content:flex-end; align-content:flex-end;}
.vStretch {-webkit-align-items:stretch; -moz-align-items:stretch; -ms-align-items:stretch; align-items:stretch;}
.vbaseline{-webkit-align-items:baseline; -moz-align-items:baseline; -ms-align-items:baseline; align-items:baseline;}
/* Property: justify-content
  Description: This defines the alignment along the main axis. 
  It helps distribute extra free space left over when either all the flex items on a line are inflexible, 
  or are flexible but have reached their maximum size
  Apply to: Container */
.hCenter  {-webkit-box-pack:justify; -webkit-justify-content:center; -ms-flex-pack:justify; -moz-box-pack:justify; justify-content:center;}
.hAround  {-webkit-box-pack:justify; -webkit-justify-content:space-around; -ms-flex-pack:justify; -moz-box-pack:justify; justify-content:space-around;}
.hBetween {-webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; -moz-box-pack:justify; justify-content:space-between;}
.hStart   {-webkit-box-pack:justify; -webkit-justify-content:flex-start; -ms-flex-pack:justify; -moz-box-pack:justify; justify-content:flex-start;}
.hEnd     {-webkit-box-pack:justify; -webkit-justify-content:flex-end; -ms-flex-pack:justify; -moz-box-pack:justify; justify-content:flex-end;}
/*
  mobile flex
  Property: display (media queries)
  Description: This defines a flex container; inline or block depending on the screen resolution. 
  Apply to: Container
*/
.fGrow1 {flex-grow: 1;}
.fGrow2 {flex-grow: 2;}

/*min-width*/
@media screen and (min-width: 980px) {.flex980 {display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}
@media screen and (min-width: 960px) {.flex960 {display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}
@media screen and (min-width: 800px) {.flex800 {display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}
@media screen and (min-width: 768px) {.flex768 {display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}
@media screen and (min-width: 640px) {.flex640 {display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}
@media screen and (min-width: 600px) {.flex600 {display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}
@media screen and (min-width: 568px) {.flex568 {display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}
@media screen and (min-width: 480px) {.flex480 {display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}
@media screen and (min-width: 320px) {.flex320 {display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}

/*max-width*/
@media screen and (max-width: 800px) {.flex800max {display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}
@media screen and (max-width: 768px) {
  .hAround768 {-webkit-box-pack: justify; -webkit-justify-content: space-around; -ms-flex-pack: justify; -moz-box-pack: justify; justify-content: space-around;}
}

@media screen and (max-width: 640px) {
  .hAround640 {-webkit-box-pack: justify; -webkit-justify-content: space-around; -ms-flex-pack: justify; -moz-box-pack: justify; justify-content: space-around;}
  .hCenter640 {-webkit-box-pack: justify; -webkit-justify-content: center; -ms-flex-pack: justify; -moz-box-pack: justify; justify-content: center;}
  .vCenter640 {-webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center;}
  .flex-col {-moz-box-direction: column; -webkit-box-direction: column; -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flexbox-direction: column; -ms-flex-direction: column; flex-direction: column;}
}

@media screen and (max-width: 480px) {
  .hAround480 {-webkit-box-pack: justify; -webkit-justify-content: space-around; -ms-flex-pack: justify; -moz-box-pack: justify; justify-content: space-around;}
  .hCenter480 {-webkit-box-pack: justify; -webkit-justify-content: center; -ms-flex-pack: justify; -moz-box-pack: justify; justify-content: center;}
  .vCenter480 {-webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center;}
  .flex-col {-moz-box-direction: column; -webkit-box-direction: column; -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flexbox-direction: column; -ms-flex-direction: column; flex-direction: column;}
}