@charset "utf-8";
/* CSS Document */

.flexbox {
  display: -webkit-box;   /* Chrome 4-20, Firefox 2-21, Safari 3.1-6.0 */
  display: -webkit-flex;  /* Chrome 21-27 */
  display: -moz-box;      /* Firefox 2-21 */
  display: -ms-flexbox;   /* IE9 */
  display: flex;
}

.inline-flexbox {
  display: -webkit-inline-box;   /* Chrome 4-20, Safari 3.1-6.0 */
  display: -webkit-inline-flex;  /* Chrome 21-27 */
  display: -moz-inline-box;      /* Firefox 2-21 */
  display: -ms-inline-flexbox;   /* IE9 */
  display: inline-flex;
}

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

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




.flexbox {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}


.boxA {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 200px;
      flex-basis: 200px;
}
.boxB {
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  padding: 0px;
  margin: 0px;
}

.boxC {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 200px;
      flex-basis: 200px;
}
.boxD {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 320px;
      flex-basis: 320px;
}




.boxE {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 320px;
      flex-basis: 320px;
}

.boxF {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 320px;
  flex-basis: 320px;
  align-self: flex-stat;
  padding-top: 10px;
  padding-left: 10px;
}