/****MEDIA****/
/************************************************************************************
*                                   OBSERVAÇÕES                                     *
*  Para a construção e organização do CSS, o código foi dividido de forma a         *
*  representar suas "ÁREAS" e "SUB_ÁREAS" de acordo com o template e o tema.        *
*                                                                                   *
*  Para buscar a área determinada, utilize o símbolo da tralha "#" antes do         *
*  nome do item desejado.                                                           *
*                                                                                   *
*  Este arquivo possui as seguintes ÁREAS:                                          *
*    -> #AREA: TELA COM LARGURA MENOR QUE 1240 PIXELS                               *
*         - #SUB_AREA: CABEÇALHO                                                    *
*         - #SUB_AREA: CATEGORIAS                                                   *
*    -> #AREA: TELA COM LARGURA MENOR QUE 1000 PIXELS                               *
*         - #SUB_AREA: CABEÇALHO                                                    *
*         - #SUB_AREA: CATEGORIAS                                                   *
*    -> #AREA: TELA COM LARGURA MENOR QUE 778 PIXELS                                *
*         - #SUB_AREA: CABEÇALHO                                                    *
*         - #SUB_AREA: CATEGORIAS                                                   *
*                                                                                   *
*  Havendo necessidade de adicionar novas ÁREAS, favor inserí-las neste documento   *
*************************************************************************************
                 FOLHA DE ESTILO DAS VARIAÇÕES DE RESOLUÇÃO TEMA 1
*************************************************************************************/
/*OBS: Leva-se em consideração a largura do scroll do navegador para a definição do limite do @MEDIA*/


/************************************************************************************
#AREA: TELA COM LARGURA MENOR QUE 1240 PIXELS
************************************************************************************/
@media only screen and (max-width: 1240px)
{
    /*************
    #SUB: CABECALHO
    *************/


    /*NOVO*/
    .conteudoTopoCabecalho, .conteudoCabecalho
    {
        width: 980px;
    }

    .buscaCabecalho
    {
        width: 460px;
    }

    .boxDetalhesCarrinho
    {
        left: -34px;
    }

    .containerItensTodosOsDepartamentos
    {
        width: 980px;
    }
    /*FIM NOVO*/

    /*************
    #SUB: CATEGORIAS
    *************/
    .conteudoCategorias
    {
        width: 810px;
    }

    .itemConteudoCategorias
    {
        padding: 0;
        width: 161px;
    }

    .itemConteudoCategorias:nth-child(1n+6)
    {
        display: none;
    }

    /*Inicio Menu Invertido*/
    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+4):hover ul li ul
    {
        left: -231px;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+4) ul li:hover
    {
        border-left: none;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+4) ul li:hover a
    {
        margin-right: 5px;
        -webkit-transition: all 0.2s ease 0s;
                transition: all 0.2s ease 0s;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+4) ul li ul li:hover a
    {
        margin-right: 10px;
        -webkit-transition: all 0.2s ease 0s;
                transition: all 0.2s ease 0s;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+4) ul
    {
        left: auto;
        right: 0;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+4) li a
    {
        text-align: right;
        width: 100%;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+4) li a p
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
                justify-content: flex-end;
    }
    /*Fim Menu Invertido*/
}

/************************************************************************************
#AREA: TELA COM LARGURA MENOR QUE 1000 PIXELS
************************************************************************************/
@media only screen and (max-width: 1000px)
{
    /*************
   #SUB: CABECALHO
   *************/
    /*NOVO*/
    .conteudoTopoCabecalho, .conteudoCabecalho
    {
        width: 760px;
    }

    .conteudoCabecalho
    {
        position: relative;
    }

    .buscaCabecalho
    {
        margin-top: 70px;
        width: 460px;
    }

    .boxDetalhesCarrinho
    {
        left: -34px;
    }

    .carrinhoCabecalho
    {
        position: absolute;
        right: 5px;
        top: 30px;
    }

    .containerItensTodosOsDepartamentos
    {
        width: 756px;
    }
    .containerLogoCabecalho
    {
        margin-top:0;
    }
    /*FIM NOVO*/

    /*************
    #SUB: CATEGORIAS
    *************/
    .conteudoCategorias
    {
        width: 607px;
    }

    .conteudoTodasCategorias
    {
        width: 152px;
    }

    .itemConteudoCategorias
    {
        width: 150px;
    }

    .itemConteudoCategorias:nth-child(1n+5)
    {
        display: none;
    }

    /*Inicio Menu Invertido*/
    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+3):hover ul li ul
    {
        left: -231px;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+3) ul li:hover
    {
        border-left: none;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+3) ul li:hover a
    {
        margin-right: 5px;
        -webkit-transition: all 0.2s ease 0s;
                transition: all 0.2s ease 0s;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+3) ul li ul li:hover a
    {
        margin-right: 10px;
        -webkit-transition: all 0.2s ease 0s;
                transition: all 0.2s ease 0s;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+3) ul
    {
        left: auto;
        right: 0;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+3) li a
    {
        text-align: right;
        width: 100%;
    }

    .conteudoCategorias ul li.itemConteudoCategorias:nth-child(n+3) li a p
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }


    .itemConteudoCategorias p
    {
        font-size:1.5rem;
    }
    /*Fim Menu Invertido*/
}


/************************************************************************************
#AREA: TELA COM LARGURA MENOR QUE 960 PIXELS
************************************************************************************/
@media only screen and (max-width: 960px)
{
    .conteudoTodasCategorias
    {
        width: 152px;
    }

    .conteudoCategorias
    {
        width: 600px;
    }

    .itemConteudoCategorias
    {
          width: 148px;
    }


}

/************************************************************************************
#AREA: TELA COM LARGURA MENOR QUE 778 PIXELS
************************************************************************************/
@media only screen and (max-width: 778px)
{

    /*************
    #SUB_AREA: CABECALHO
    *************/
    .conteudoCabecalhoResolucaoMaior
    {
        display: none;
    }

    .conteudoCabecalhoResolucaoMenor
    {
        display: block;
    }

    /*LOGOTIPO*/
    .logotipoCabecalho
    {
        display: none;
    }

    /*CATEGORIAS*/
    .boxCategorias
    {
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
        padding: 0 34px;
        width: auto;
    }

    .boxCategorias h4
    {
        color: #fff;
        font-size: 2.2rem;
    }

    .setaExibirDepartamentosCategorias
    {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fff;
        height: 0;
        width: 0;
    }

}