@CHARSET "UTF-8";

.border1 { border:1px solid red; }

.transition {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.shadow {
    box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.2), 0 0px 18px 0 rgba(0, 0, 0, 0.19);
}

.shadow-02 {
    box-shadow: 0 -1px 9px 0 rgba(0, 0, 0, 0.2), 0 7px 9px 0 rgba(0, 0, 0, 0);
}

/* FLEX COLUNM */

.flex_col {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-direction: normal;
    flex-direction: column;
}

/* FLEX ROW */

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

.flex_row-end {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    justify-content: flex-end;
}

.flex_row-start {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    justify-content: flex-start;
}

.flex_row-around {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    justify-content: space-around;
}

.flex_row-between {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    justify-content: space-between;
}

/* FLEX REVERSE*/

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

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

/* FLEX กรณีอยู่ในแถวเดียวกัน ความสูงไม่เท่ากัน และจัดให้อยู่กึ่งกลาง ถ้าไม่มี middle จะทำให้
มีความสูงเท่ากันทั้งแถว */

.middle-item {
    align-items: center;
    -webkit-box-align: center;
}

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

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

/* FLEX WRAP คือเมื่อจอเล็กลง วัตถุจะตกลงมาบรรทัดล่างไหม หรือบีบอัด */

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

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