/* Estilo do overlay */
#overlay {
    display: none;
    position: fixed;
	z-index: 9999999999999999999999999999 !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Escurecer a tela */
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Animação suave */
}

/* Estilo da popup */
#popup 
{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999999999999999999999999999999999999999 !important;
    
    transform: translate(-50%, -50%); /* Centraliza a popup */
    opacity: 0;
    transition: opacity 0.5s ease; /* Animação suave */
    width: auto; /* Ajusta a largura conforme o conteúdo */
    max-width: 80%; /* Largura máxima da popup */
    min-width: 40%; /* Largura mínima da popup */
}

/* Ajuste para as imagens dentro da popup */
#popup img 
{
    width: 500px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Botão de fechar */
button 
{
    padding: 10px 20px;
    background-color: #B01317;
    color: white;
    border: none;
    border-radius: 5px 5px 0px 0px;
    cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 auto !important;
}

button:hover {
    background-color:rgba(139,10,13,1.00);
}

@media screen and (max-width:900px) 
{
	#popup 
	{
		max-width: 100%; /* Largura máxima da popup */
		min-width: 100%; /* Largura mínima da popup */
		transform:none;
		top: 2%;
		left: 0px;
		padding:8px;
	}
	
	#popup img 
	{
		width: 100% !important;
	}
}