/*Mobile*/
@media only screen and (max-width: 600px) {
    #tf_banner{
        background: url(../images/transmissao_fisica/imagem_1.png);
        background-repeat: no-repeat;
        height: 40vh;
        background-size: 100vw 40vh;
    }

    #tf_imagem_2{
        background: url(../images/transmissao_fisica/imagem_2.png);
        background-repeat: no-repeat;
        height: 187px;
        margin-bottom: 20px;
    }

    #tf_imagem_3{
        background: url(../images/transmissao_fisica/imagem_3.png);
        background-repeat: no-repeat;
        height: 187px;
        margin-bottom: 20px;
    }

    #tf_imagem_4{
        background: url(../images/transmissao_fisica/imagem_4.png);
        background-repeat: no-repeat;
        height: 187px;
        margin-bottom: 20px;
    }
}

/*Tablet portrait*/
@media only screen and (min-width: 601px) and (max-width: 1023px) {
    #tf_banner{
        background: url(../images/transmissao_fisica/imagem_1-tablet.png);
        background-repeat: no-repeat;
        height: 40vh;
        background-size: 100vw 40vh;
    }
    /*Setor 2. Inverte a posição dos elementos para atender os requisitos do design*/
    #tf_setor_2{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        /* optional */
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
    #tf_imagem_2{
        /*Reposiciona a imagem jogando ela para baixo*/
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;

        background: url(../images/transmissao_fisica/imagem_2-tablet.png);
        background-repeat: no-repeat;
        height: 350px;
        margin-bottom: 20px;
    }
    .tf_setor_2>.texto{
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
    }
    /*Setor 3. Configura ele para inverter as divs*/
    #tf_setor_3{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        /* optional */
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
    #tf_imagem_3{
        /*Reposiciona a imagem jogando ela para baixo*/
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;

        background: url(../images/transmissao_fisica/imagem_3-tablet.png);
        background-repeat: no-repeat;
        height: 350px;
        margin-bottom: 20px;
    }
    .tf_setor_3>.texto{
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
    }
    /*Setor 4*/
    #tf_imagem_4{
        background: url(../images/transmissao_fisica/imagem_4-tablet.png);
        background-repeat: no-repeat;
        height: 350px;
        margin-bottom: 20px;
    }
}

/*Desktop and tablet landscape*/
@media only screen and (min-width: 1024px) {
    #tf_banner{
        background: url(../images/transmissao_fisica/imagem_1-desktop.png);
        background-repeat: no-repeat;
        height: 300px;
        background-size: 100% auto;
    }
    /*Setor 2*/
    #tf_setor_2{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        flex-wrap: nowrap;
        flex-direction:row-reverse;
        padding: 100px 0px 100px 20vw;
    }
    #tf_setor_2 .texto{
        width: 30%;
        margin-right: 100px;
        vertical-align: top;
    }
    #tf_imagem_2{
        background: url(../images/transmissao_fisica/imagem_2-desktop.png);
        background-repeat: no-repeat;
        margin-bottom: 20px;
        width: 50vw;
        height: calc(50vw / 1.55);
        background-size: auto 100%;
        vertical-align: top;
        margin-top: 100px;
    }

    /*Setor 3*/
    #tf_setor_3{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        flex-wrap: nowrap;
        flex-direction:row;
        padding: 100px 20vw 100px 0px;
    }
    #tf_setor_3 .texto{
        width: 30%;
        vertical-align: top;
    }
    #tf_imagem_3{
        background: url(../images/transmissao_fisica/imagem_3-desktop.png);
        background-repeat: no-repeat;
        margin-bottom: 20px;
        width: 50vw;
        height: calc(50vw / 1.55);
        background-size: auto 100%;
        vertical-align: top;
        margin-top: 100px;
        margin-right: 100px;
    }

    /*Setor 4*/
    #tf_setor_4{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        flex-wrap: nowrap;
        flex-direction:row-reverse;
        padding: 100px 0px 100px 20vw;
    }
    #tf_setor_4 .texto{
        width: 30%;
        margin-right: 100px;
        vertical-align: top;
    }
    #tf_imagem_4{
        background: url(../images/transmissao_fisica/imagem_4-desktop.png);
        background-repeat: no-repeat;
        margin-bottom: 20px;
        width: 50vw;
        height: calc(50vw / 1.55);
        background-size: auto 100%;
        vertical-align: top;
        margin-top: 100px;
    }
}