/*#region flex*/
.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-1 {
    flex: 1;
}

.flex-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

    .flex-container > div {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

.flex-row {
    display: flex;
    -webkit-flex-direction: row;
  
    flex-direction: row;
}

    .flex-row > div {
        display: flex;
    }

.flex-row-reverse {
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

    .flex-row > div {
        display: flex;
    }

.flex-column {
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.flex-column-reverse {
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
.flex-column-reverse > div {
    display: flex;
}


    .flex-column > div {
        display: flex;
    }

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

/*Flex align - Vertical*/
.flex-align-baseline {
    -webkit-align-items: baseline;
    align-items: baseline;
}

    .flex-align-baseline > div {
        -webkit-align-items: baseline;
        align-items: baseline;
    }

.flex-align-center {
    -webkit-align-items: center;
    align-items: center;
}

/*.flex-align-center > div {
        -webkit-align-items: center;
        align-items: center;
    }*/

.flex-align-start {
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

    .flex-align-start > div {
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

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

    .flex-align-end > div {
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

/*Flex content - Horizontal*/
.flex-content-start {
    -webkit-justify-content: flex-start !important;
    justify-content: flex-start !important;
}

    .flex-content-start > div {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

.flex-content-center {
    -webkit-justify-content: center !important;
    justify-content: center !important;
}

    .flex-content-center > div {
        -webkit-justify-content: center;
        justify-content: center;
    }

.flex-content-space-around {
    -webkit-justify-content: space-around !important;
    justify-content: space-around !important;
}

/*.flex-content-space-around > div {
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }*/

.flex-content-space-between {
    -webkit-justify-content: space-between !important;
    justify-content: space-between !important;
}

    .flex-content-space-between > div {
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

.flex-content-end {
    -webkit-justify-content: flex-end !important;
    justify-content: flex-end !important;
}

    .flex-content-end > div {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

.flex-grow-1 {
    flex-grow: 1;
}

.flex-grow-2 {
    flex-grow: 2;
}

.flex-grow-3 {
    flex-grow: 3;
}

.flex-grow-4 {
    flex-grow: 4;
}

/*Flex All in*/

.flex-center {
    -webkit-justify-content: center !important;
    justify-content: center !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    -ms-flex-pack: center;
}

    .flex-center > div {
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
    }

.flex-end {
    -webkit-justify-content: flex-end !important;
    justify-content: flex-end !important;
    -webkit-align-items: flex-end !important;
    align-items: flex-end !important;
}

    .flex-end > div {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

.flex-space-around {
    -webkit-justify-content: space-around !important;
    justify-content: space-around !important;
    -webkit-align-items: space-around !important;
    align-content: space-around !important;
}

    .flex-space-around > div {
        -webkit-justify-content: space-around;
        justify-content: space-around;
        -webkit-align-items: space-around;
        align-content: space-around;
    }

.flex-space-between {
    -webkit-justify-content: space-between !important;
    justify-content: space-between !important;
    -webkit-align-items: space-between !important;
    align-content: space-between !important;
}

    .flex-space-between > div {
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: space-between;
        align-content: space-between;
    }

.flex-stretch {
    align-content: stretch !important;
}

    .flex-stretch > div {
        align-content: stretch;
    }


/*Flex width*/
.flex-5 {
    width: 5%;
}

.flex-7 {
    width: 7%;
}

.flex-10 {
    width: 10%;
}

.flex-15 {
    width: 15%;
}

.flex-20 {
    width: 20%;
}

.flex-25 {
    width: 25%;
}

.flex-30 {
    width: 30%;
}

.flex-35 {
    width: 35%;
}

.flex-40 {
    width: 40%;
}

.flex-45 {
    width: 45%;
}
.flex-48 {
    width: 48%;
}

.flex-50 {
    width: 50%;
}

.flex-55 {
    width: 55%;
}

.flex-60 {
    width: 60%;
}

.flex-65 {
    width: 65%;
}

.flex-70 {
    width: 70%;
}

.flex-75 {
    width: 75%;
}

.flex-80 {
    width: 80%;
}

.flex-80-important {
    width: 80% !important;
}

.flex-85 {
    width: 85%;
}

.flex-90 {
    width: 90%;
}

.flex-95 {
    width: 95%;
}

.flex-100 {
    width: 100%;
}

.flex-max-width-100 {
    max-width: 100%;
}

/*Flex height*/
.flex-height-10 {
    height: 10%;
}

.flex-height-20 {
    height: 20%;
}

.flex-height-30 {
    height: 30%;
}

.flex-height-40 {
    height: 40%;
}

.flex-height-50 {
    height: 50%;
}

.flex-height-60 {
    height: 60%;
}

.flex-height-70 {
    height: 70%;
}

.flex-height-80 {
    height: 80%;
}

.flex-height-90 {
    height: 90%;
}

.flex-height-100 {
    height: 100%;
}

.flex-height-640{
    height: 640px;
}

.flex-width-270{
    width: 270px;
}

.flex-hinherit {
    height: inherit;
}

/*Flex margin*/

.flex-margin-end {
    margin-left: auto;
}
  /*#endregion flex*/

/*extention*/
.flex-flilped-image-right > div {
    display: flex;
}
@media screen and (min-width: 768px) {

     .flex-50-desktop{
         width:50% !important;
     }

    .flex-45-desktop {
        width: 45% !important;
    }

    .flex-flilped-image-right {
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
    }

    .flex-row-desktop{
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
    }


}


@media screen and (max-width: 768px) {
    .flex-flilped-image-right {
        display: flex;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    .flex-column-xs {
        display: flex;
        -webkit-flex-direction: column !important;
        flex-direction: column !important;
    }
    .flex-column-reverse-xs {
        display: flex;
        -webkit-flex-direction: column-reverse !important;
        flex-direction: column-reverse !important;
    }
    .flex-column-xs {
        display: flex;
        -webkit-flex-direction: column !important;
        flex-direction: column !important;
    }
    .flex-100-xs{
        width:100%!important;
    }
    .flex-90-xs {
        width: 90% !important;
    }
    .flex-height-50-xs{
        height:50% !important;
    }
    .flex-height-60-xs {
        height: 60% !important;
    }
    .flex-height-40-xs {
        height: 40% !important;
    }

}

@media screen and (max-width: 450px) {
    .flex-height-60 {
        height: auto;
    }
}

/*#endregion flex*/