/* Versão mini tablet */
@media screen and (min-width:640px) and (max-width: 768px){
    .vitrine{
        max-width: 620px;
    }

}

/* Versão para tablet */

@media screen and (min-width:768px) and (max-width: 992px) {
    header{
        padding-right: 0;
    }
    header h1{
        font-size: 30px;
    }
    img{
        width: 230px;
    }
    #formulario-idioma{
        position: absolute;
        left: 80%;
        }

    .image-container {
        width: 230px; 
    }

    .vitrine{
        max-width: 740px;
    }
    
    .image-container img {
        display: inline-block;
        height: 230px; 
    }
    
  .image-container .overlay {
    width: 230px;
    height: 230px;
  }

    .image-container .overlay .text {
        font-size: 14px;
        font-family: 'Josefin Sans', sans-serif;
        font-weight: 300;
        margin: 5px;
    }


    .overlay h1{
        font-size: 16px;
    }

    .overlay p{
        margin: 5px;
    }

    .image-container .overlay .button-comprar {
        padding: 5px 10px;
    }
}

/* Versão para computador */

@media screen and (min-width: 992px) and (max-width: 1600px) {

    header{
        padding: 40px;
    }

    header h1{
        font-size: 30px;
    }
    img{
        width: 300px;
        height: 300px;
    }
    #formulario-idioma{
        position: absolute;
        left: 90%;
    }

    .image-container {
        width: 300px; 
    }

    .vitrine{
        max-width: 940px;
    }

    .image-container img {
        height: 300px; 
    }

    .image-container .overlay {
        width: 300px;
        height: 300px;

    }

    .image-container .overlay .text {
        font-size: 16px;
        font-family: 'Josefin Sans', sans-serif;
        font-weight: 300;
        margin: 10px;
    }

    .overlay p{
        margin: 10px;
    }

    .image-container .overlay .button-comprar {
        padding: 10px 20px;
    }
        
}

/* Versão para TV */

@media screen and (min-width: 1600px){

    *{
        font-size: 20px ;
    }
  
    header{
        padding: 30px 80px;
    }
    header h1{
        font-size: 40px;
    }

    p{
        font-size: 24px;
        margin: 20px;
    }

    .overlay h1{
        font-size: 30px;
    }


    img{
        width: 490px;
    
    }

    #formulario-idioma{
        position: absolute;
        left: 95%;
      }

      .image-container {
        display: inline-block;
        width: 490px; 
    }
    
    .vitrine{
        margin: auto; 
        max-width: 1519px;
    }
    
    .image-container img {
        height: 490px; 
    }
    
    .image-container .overlay {
        width: 490px;
        height: 490px;
    
    }
}