/* 
    @author Marelo Cabral
    Criado com as classes básicas para usar FlexBox
    com ajustes para responsivo no código html.
    09.04.2019
    última atualização - 10.04.2019
*/

/* Extra Small devices (portrait phones, 576px and down) */
@media only screen and (max-width: 576px) {
    .mob-displayFlex {
        display: -webkit-box !important; /* OLD - iOS 6-, Safari 3.mob-1-6 */
        display: -moz-box !important; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox !important; /* TWEENER - IE 10 */
        display: -webkit-flex !important; /* NEW - Chrome */
        display: flex !important;
    }

    .mob-flexLinhas {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
    }

    .mob-flexColunas {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }

    .mob-flexCentralizado {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;

        -ms-flex-line-pack: center !important;
        align-content: center !important;

        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    .mob-flexItensStart {
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important;
    }

    .mob-flexItensEnd {
        -webkit-box-align: end !important;
        -ms-flex-align: end !important;
        align-items: flex-end !important;
    }

    .mob-flexItensBaseline {
        -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
        align-items: baseline !important;
    }

    .mob-flexItensCentralizado {
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    .mob-flexElementoCentralizado {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

    .mob-flexWrap {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
    }

    .mob-flexNoWrap {
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    }

    .mob-flexSpaceAround {
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important;
    }

    .mob-flexSpaceBetween {
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    }

    .mob-flexStart {
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    }

    .mob-flexEnd {
        -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
        justify-content: flex-end !important;
    }

    .mob-flexSelfStart {
        -ms-flex-item-align: start !important;
        align-self: flex-start !important;
    }

    .mob-flexSelfEnd {
        -ms-flex-item-align: end !important;
        align-self: flex-end !important;
    }

    .mob-flexSelfCenter {
        -ms-flex-item-align: center !important;
        align-self: center !important;
    }

    .mob-order-1{
        -webkit-order: 1 !important;
        order: 1 !important;
    }
    .mob-order-2{
        -webkit-order: 2 !important;
        order: 2 !important;
    }
    .mob-order-3{
        -webkit-order: 3 !important;
        order: 3 !important;
    }
    .mob-order-4{
        -webkit-order: 4 !important;
        order: 4 !important;
    }

}


/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 768px) {
    .mob-land-displayFlex {
        display: -webkit-box !important; /* OLD - iOS 6-, Safari 3.mob-land-1-6 */
        display: -moz-box !important; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox !important; /* TWEENER - IE 10 */
        display: -webkit-flex !important; /* NEW - Chrome */
        display: flex !important;
    }

    .mob-land-flexLinhas {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
    }

    .mob-land-flexColunas {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }

    .mob-land-flexCentralizado {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;

        -ms-flex-line-pack: center !important;
        align-content: center !important;

        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    .mob-land-flexItensStart {
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important;
    }

    .mob-land-flexItensEnd {
        -webkit-box-align: end !important;
        -ms-flex-align: end !important;
        align-items: flex-end !important;
    }

    .mob-land-flexItensBaseline {
        -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
        align-items: baseline !important;
    }

    .mob-land-flexItensCentralizado {
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    .mob-land-flexElementoCentralizado {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

    .mob-land-flexWrap {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
    }

    .mob-land-flexNoWrap {
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    }

    .mob-land-flexSpaceAround {
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important;
    }

    .mob-land-flexSpaceBetween {
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    }

    .mob-land-flexStart {
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    }

    .mob-land-flexEnd {
        -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
        justify-content: flex-end !important;
    }

    .mob-land-flexSelfStart {
        -ms-flex-item-align: start !important;
        align-self: flex-start !important;
    }

    .mob-land-flexSelfEnd {
        -ms-flex-item-align: end !important;
        align-self: flex-end !important;
    }

    .mob-land-flexSelfCenter {
        -ms-flex-item-align: center !important;
        align-self: center !important;
    }

    .mob-land-order-1{
        -webkit-order: 1 !important;
        order: 1 !important;
    }
    .mob-land-order-2{
        -webkit-order: 2 !important;
        order: 2 !important;
    }
    .mob-land-order-3{
        -webkit-order: 3 !important;
        order: 3 !important;
    }
    .mob-land-order-4{
        -webkit-order: 4 !important;
        order: 4 !important;
    }
}


/* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 992px) {
    .tab-displayFlex {
        display: -webkit-box !important; /* OLD - iOS 6-, Safari 3.tab-1-6 */
        display: -moz-box !important; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox !important; /* TWEENER - IE 10 */
        display: -webkit-flex !important; /* NEW - Chrome */
        display: flex !important;
    }

    .tab-flexLinhas {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
    }

    .tab-flexColunas {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }

    .tab-flexCentralizado {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;

        -ms-flex-line-pack: center !important;
        align-content: center !important;

        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    .tab-flexItensStart {
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important;
    }

    .tab-flexItensEnd {
        -webkit-box-align: end !important;
        -ms-flex-align: end !important;
        align-items: flex-end !important;
    }

    .tab-flexItensBaseline {
        -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
        align-items: baseline !important;
    }

    .tab-flexItensCentralizado {
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    .tab-flexElementoCentralizado {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

    .tab-flexWrap {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
    }

    .tab-flexNoWrap {
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    }

    .tab-flexSpaceAround {
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important;
    }

    .tab-flexSpaceBetween {
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    }

    .tab-flexStart {
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    }

    .tab-flexEnd {
        -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
        justify-content: flex-end !important;
    }

    .tab-flexSelfStart {
        -ms-flex-item-align: start !important;
        align-self: flex-start !important;
    }

    .tab-flexSelfEnd {
        -ms-flex-item-align: end !important;
        align-self: flex-end !important;
    }

    .tab-flexSelfCenter {
        -ms-flex-item-align: center !important;
        align-self: center !important;
    }

    .tab-order-1{
        -webkit-order: 1 !important;
        order: 1 !important;
    }
    .tab-order-2{
        -webkit-order: 2 !important;
        order: 2 !important;
    }
    .tab-order-3{
        -webkit-order: 3 !important;
        order: 3 !important;
    }
    .tab-order-4{
        -webkit-order: 4 !important;
        order: 4 !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .extra-displayFlex {
        display: -webkit-box !important; /* OLD - iOS 6-, Safari 3.extra-1-6 */
        display: -moz-box !important; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox !important; /* TWEENER - IE 10 */
        display: -webkit-flex !important; /* NEW - Chrome */
        display: flex !important;
    }

    .extra-flexLinhas {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
    }

    .extra-flexColunas {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }

    .extra-flexCentralizado {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;

        -ms-flex-line-pack: center !important;
        align-content: center !important;

        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    .extra-flexItensStart {
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important;
    }

    .extra-flexItensEnd {
        -webkit-box-align: end !important;
        -ms-flex-align: end !important;
        align-items: flex-end !important;
    }

    .extra-flexItensBaseline {
        -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
        align-items: baseline !important;
    }

    .extra-flexItensCentralizado {
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    .extra-flexElementoCentralizado {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

    .extra-flexWrap {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
    }

    .extra-flexNoWrap {
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    }

    .extra-flexSpaceAround {
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important;
    }

    .extra-flexSpaceBetween {
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    }

    .extra-flexStart {
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    }

    .extra-flexEnd {
        -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
        justify-content: flex-end !important;
    }

    .extra-flexSelfStart {
        -ms-flex-item-align: start !important;
        align-self: flex-start !important;
    }

    .extra-flexSelfEnd {
        -ms-flex-item-align: end !important;
        align-self: flex-end !important;
    }

    .extra-flexSelfCenter {
        -ms-flex-item-align: center !important;
        align-self: center !important;
    }

    .extra-order-1{
        -webkit-order: 1 !important;
        order: 1 !important;
    }
    .extra-order-2{
        -webkit-order: 2 !important;
        order: 2 !important;
    }
    .extra-order-3{
        -webkit-order: 3 !important;
        order: 3 !important;
    }
    .extra-order-4{
        -webkit-order: 4 !important;
        order: 4 !important;
    }
}