@charset "utf-8";
/* CSS Document */


        h1 {
            text-align: center;
            color: #556b2f;
            margin-bottom: 30px;
        }

/*        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 20px )); /* Colonne responsive */
/*            gap: 20px;
            max-width: 1200px;
            margin: 0 auto; /* Centra la galleria */
        }

/*        .photo-item {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            text-align: center;
            padding-bottom: 15px; /* Spazio sotto il testo */
/*            display: flex;
            flex-direction: column; /* Impila gli elementi verticalmente */
/*            align-items: center; /* Centra orizzontalmente gli elementi all'interno */
        }*/
table.main {}
 tr.row {}
 td.cell {}
 div.block {}
 div.paragraph {}
 .font0 { font:11pt Book Antiqua, serif; }
 .font1 { font:12pt Book Antiqua, serif; }
 .font2 { font:13pt Book Antiqua, serif; }
 .font3 { font:25pt Book Antiqua, serif; }
 .font4 { font:9pt Century Gothic, serif; }
 .font5 { font:10pt Times New Roman, serif; }
 .font6 { font:12pt Times New Roman, serif; }


.photo-item img.photo {
            width: 100%;
            height: auto;
            display: block; /* Rimuove lo spazio extra sotto l'immagine */
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
        }

        .photo-item p {
            margin: 5px 0; /* Spazio ridotto tra i paragrafi */
            padding: 0 15px; /* Padding laterale per il testo */
        }

        /* Stili per i testi cliccabili (attivatori del pop-up) */
        .popup-trigger {
            cursor: pointer;
            color: #007bff; /* Colore blu per indicare che è un link */
            text-decoration: none; /* Rimuove la sottolineatura di default per i link */
            font-weight: bold;
            transition: color 0.2s ease-in-out;
        }

        .popup-trigger:hover {
            color: #0056b3; /* Colore più scuro al passaggio del mouse */
            text-decoration: underline; /* Aggiunge sottolineatura al hover */
        }

        /* Stili per l'overlay che scurisce lo sfondo */
        .modal-overlay {
            display: none; /* Nascosto di default */
            position: fixed; /* Posizionamento fisso rispetto alla viewport */
            z-index: 999; /* Sopra tutto il resto, ma sotto il pop-up */
            left: 0;
            top: 0;
            width: 100%; /* Copre l'intera larghezza */
            height: 100%; /* Copre l'intera altezza */
            background-color: rgba(0, 0, 0, 0.7); /* Sfondo nero semi-trasparente */
        }

        /* Stili per il contenitore del Pop-up */
        .modal {
            display: none; /* Nascosto di default */
            position: fixed; /* Posizionamento fisso rispetto alla viewport */
            z-index: 1000; /* Sopra l'overlay */
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); /* Centra il pop-up sia orizzontalmente che verticalmente */
            width: 90%; /* Larghezza del pop-up (regola a tuo piacimento) */
            max-width: 700px; /* Larghezza massima */
            background-color: #fff; /* Sfondo bianco del pop-up */
            border-radius: 10px; /* Bordi arrotondati */
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* Ombra più pronunciata */
            animation: fadeIn 0.3s forwards; /* Animazione di comparsa */
            max-height: 90vh; /* Altezza massima 90% della viewport height */
            overflow-y: auto; /* Aggiunge scroll se il contenuto è troppo lungo */
            padding: 25px; /* Padding interno */
            box-sizing: border-box; /* Include padding e border nella larghezza/altezza */
        }

        /* Stili per il contenuto del Pop-up */
        .modal-content {
            position: relative; /* Per posizionare il bottone di chiusura */
        }
        
        .modal-content h2, .modal-content h3 {
            color: #333;
            margin-top: 0;
            margin-bottom: 15px;
            text-align: center;
        }

        .modal-content p {
            line-height: 1.6;
            margin-bottom: 10px;
            text-align: justify; /* Testo giustificato per una migliore leggibilità */
        }

        /* Stili specifici per le parti del rosario nel pop-up */
        .modal-content p b, .modal-content p i {
            color: #333; /* Rimuovi il colore rosso di default se non lo vuoi */
        }
        .modal-content p i[style*="AB410A"] { /* Stile specifico per il colore che avevi */
            color: #AB410A;
        }


        /* Stili per il bottone di chiusura */
        .close-button {
            color: #aaa;
            font-size: 32px; /* Dimensione maggiore */
            font-weight: bold;
            position: absolute;
            top: 5px; /* Più vicino all'angolo */
            right: 15px;
            cursor: pointer;
            transition: color 0.2s ease-in-out;
        }

        .close-button:hover,
        .close-button:focus {
            color: #777; /* Colore più scuro al hover */
            text-decoration: none;
        }

        /* Animazione per la comparsa del pop-up */
        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, -60%); }
            to { opacity: 1; transform: translate(-50%, -50%); }
        }

        /* Quando il pop-up è attivo */
        .modal.active, .modal-overlay.active {
            display: block;
        }

        /* Nasconde i div con il contenuto del pop-up quando non sono attivi */
        .popup-content-hidden {
            display: none;
        }