/* FLEX BOX */

    .d-flex {
        display: flex;
}
    .d-inline-flex {
        display: inline-flex;
} 

/*directions*/
.flex-row {flex-direction: row;}
.flex-row-reverse {flex-direction: row-reverse;}
.flex-column {flex-direction: column;}
.flex-column-reverse {flex-direction: column-reverse;}
  
/* justify content */
.justify-content-start {justify-content: flex-start;}
.justify-content-end {justify-content: flex-end;}
.justify-content-center {justify-content: center;}
.justify-content-between {justify-content: space-between;}
.justify-content-around {justify-content: space-around;}
.justify-content-evenly {justify-content: space-evenly;}
  
/* align items */
.align-items-start {align-items: flex-start;}
.align-items-end {align-items: flex-end;}
.align-items-center {align-items: center;}
.align-items-baseline {align-items: baseline;}
.align-items-stretch {align-items: stretch;}

/* align content */
.align-content-start {align-content: flex-start;}
.align-content-end {align-content: flex-end;}
.align-content-center {align-content: center;}
.align-content-space-around {align-content: space-around;}
.align-content-space-between {align-content: space-between;}
.align-content-stretch {align-content: stretch;}

/* align self */
.align-self-start {align-self: flex-start;}
.align-self-end {align-self: flex-end;}
.align-self-center {align-self: center;}
.align-self-baseline {align-self: baseline;}
.align-self-stretch {align-self: stretch;}
  
.flex-wrap {flex-wrap: wrap;}
.flex-nowrap {flex-wrap: nowrap;}
.flex-wrap-reverse {flex-wrap: wrap-reverse;}
.text-nowrap {white-space: nowrap;}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .flex-sm-wrap {flex-wrap: wrap !important;}
  .flex-sm-nowrap {flex-wrap: nowrap !important;}
  .flex-sm-wrap-reverse {flex-wrap: wrap-reverse !important;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .flex-md-wrap {flex-wrap: wrap !important;}
  .flex-md-nowrap {flex-wrap: nowrap !important;}
  .flex-md-wrap-reverse {flex-wrap: wrap-reverse !important;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .flex-lg-wrap {flex-wrap: wrap !important;}
  .flex-lg-nowrap {flex-wrap: nowrap !important;}
  .flex-lg-wrap-reverse {flex-wrap: wrap-reverse !important;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .flex-xl-wrap {flex-wrap: wrap !important;}
  .flex-xl-nowrap {flex-wrap: nowrap !important;}
  .flex-xl-wrap-reverse {flex-wrap: wrap-reverse !important;}
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .flex-xxl-wrap {flex-wrap: wrap !important;}
  .flex-xxl-nowrap {flex-wrap: nowrap !important;}
  .flex-xxl-wrap-reverse {flex-wrap: wrap-reverse !important;}
}
  
  .flex-grow-0 {flex-grow: 0;}
  .flex-grow-1 {flex-grow: 1;}
  .flex-shrink-0 {flex-shrink: 0;}
  .flex-shrink-1 {flex-shrink: 1;}

@media (min-width: 991px) { 
    .flex-md-row {
        display: flex;        
    }
}

@media (min-width: 576px) {
  .order-sm-0 {order: 0;}
  .order-sm-1 {order: 1;}
  .order-sm-2 {order: 2;}
  .order-sm-3 {order: 3;}
  .order-sm-4 {order: 4;}
  .order-sm-5 {order: 5;}
  .order-sm-first {order: -1;}
  .order-sm-last {order: 999;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .order-md-0 {order: 0;}
  .order-md-1 {order: 1;}
  .order-md-2 {order: 2;}
  .order-md-3 {order: 3;}
  .order-md-4 {order: 4;}
  .order-md-5 {order: 5;}
  .order-md-first {order: -1;}
  .order-md-last {order: 999;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .order-lg-0 {order: 0;}
  .order-lg-1 {order: 1;}
  .order-lg-2 {order: 2;}
  .order-lg-3 {order: 3;}
  .order-lg-4 {order: 4;}
  .order-lg-5 {order: 5;}
  .order-lg-first {order: -1;}
  .order-lg-last {order: 999;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .order-xl-0 {order: 0;}
  .order-xl-1 {order: 1;}
  .order-xl-2 {order: 2;}
  .order-xl-3 {order: 3;}
  .order-xl-4 {order: 4;}
  .order-xl-5 {order: 5;}
  .order-xl-first {order: -1;}
  .order-xl-last {order: 999;}
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .order-xxl-0 {order: 0;}
  .order-xxl-1 {order: 1;}
  .order-xxl-2 {order: 2;}
  .order-xxl-3 {order: 3;}
  .order-xxl-4 {order: 4;}
  .order-xxl-5 {order: 5;}
  .order-xxl-first {order: -1;}
  .order-xxl-last {order: 999;}
}

/* FLEX BOX END*/