/* 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: 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;}
/* 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: 769px) {.flex768 {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 {
        background: url(img/newsurvey-bg.png) no-repeat center top;
        -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;}
}