/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .cabecalho .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5vw 8vw;
  }

  .invisivel{
    display: none;
  }

  .menu-container-tablet{
    width: 30%;
  }

  .logo-alura-dev{
    width: auto;
    height: auto;
  }

  .barra-pesquisa{
    width:50%;
    height: 35px;
    margin: 0 1rem;
  }

  .barra-pesquisa__invisivel{
    display: none;
  }

  .barra-pesquisa__largura-total{
    width: 100%;
  }

  .lupa-container{
    display: flex;
    justify-content: space-between;
    width: 65px;
  }

  .lupa{
    background-image: url("../../img/lupinha.png");
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
  }

  .lupaX{
    background-image: url("../../img/fechar-menu.png");
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
  }

  .abrir-menu{
    background-image: url("../../img/abrir-menu.png");
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    /*essa classe serve para quando menu estiver fechado, ter a imagem dos hamburgueres*/
  }

  .fechar-menu{
    background-image: url("../../img/fechar-menu.png");
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    /*essa classe serve para quando menu estiver fechado, ter a imagem de um "X"*/
  }

  .menu-hamburguer {
    display: inline;
    background-color: #2D415B;
    border-radius:8px;
    position:absolute;
    right:0;
    margin: 0 4vh; /*mesma margin do cabeçalho, para se manter alinhado a imagem do menu*/
    transition: linear 200ms;
  }

  .menu-hamburguer__open{
    height: 50vh;
    width: 250px;
  }

  .menu-hamburguer__close{
    height: 0;
    width: 0;
  }

  .menu-navegacao .container-menu{
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin:1rem 0 0 1rem;
  }

  .perfil-container{
    margin:1rem 0 0 1rem;
  }

  main{
    display: flex;
    flex-direction: column;
    margin: 1.5rem 0 0 0;
  }

  .invisivel{
    display: none;
  }

  .invisivel-desktop{
    display: inherit;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px)  and (max-width:991px){

  .cabecalho .container{
    display: flex;
    justify-content: space-between;
    margin: 5vw 8vw;
  }

  .invisivel{
    display: none;
  }

  .menu-container-tablet{
    width: 30%;
  }

  .logo-alura-dev{
    width: auto;
    height: auto;
  }

  .barra-pesquisa{
    width:50%;
    height: auto;
  }

  .abrir-menu{
    background-image: url("../../img/abrir-menux2.png");
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    /*essa classe serve para quando menu estiver fechado, ter a imagem dos hamburgueres*/
  }

  .fechar-menu{
    background-image: url("../../img/fechar-menux2.png");
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    /*essa classe serve para quando menu estiver fechado, ter a imagem de um "X"*/
  }

  .menu-hamburguer {
    display: inline;
    background-color: #2D415B;
    border-radius:8px;
    position:absolute;
    right:0;
    margin: 0 4vh; /*mesma margin do cabeçalho, para se manter alinhado a imagem do menu*/
    transition: linear 200ms;
  }

  .menu-hamburguer__open{
    height: 50vh;
    width: 250px;
  }

  .menu-hamburguer__close{
    height: 0;
    width: 0;
  }

  .menu-navegacao .container-menu{
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin:1rem 0 0 1rem;
  }

  .perfil-container{
    margin:1rem 0 0 1rem;
  }

  main{
    display: flex;
    flex-direction: column;
    margin: 1.5rem 0 0 0;
  }

  .invisivel{
    display: none;
  }

  .invisivel-desktop{
    display: inherit;
  }
}