:root {
    --couleur0:#fff;
    --couleur5:#E6F5FF;
    --couleur10:#1D7CB9;
    --couleur15:#003399;
    --couleur20:#000;
    --couleurRed:#ff3333;

    --border2:1px;
    --border3:2px;

    --radius5:5px;
}

html {font-size: 16px;}

body {
    margin:0 auto 0 auto;
    background-color:var(--couleur0);
    cursor:default;
    font-weight:normal;
    font-family:Verdana,sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height:1.7;
}

a {color:var(--couleur15); cursor:pointer; text-decoration: none;}
a:hover {color: var(--couleur10); cursor:pointer; text-decoration:underline;}

.a_secondaire {text-decoration:none;}

img{border:0;}

.sommaire {font-weight:bold;}

iframe{border-width:0px;}

p {padding:0px 10px 0px 10px; text-align:justify;}
ins {text-transform:capitalize; text-decoration:underline;}
del {text-decoration:line-through; color:var(--couleur10);}

ul, ol {padding-right: 10px;}
li {text-align: justify; margin: 10px 0;}

table {padding:0 10px;}
table tbody {vertical-align: top;}
table th {width: 33%; padding:10px;}
table td {width: 33%; padding:10px; text-align:justify;}

.alert {border: 1px solid red; background-color: pink; padding: 0 5px; margin: 10px; text-align: justify;}
.note {border: 1px solid black; background-color: #ccc; padding: 0 5px; margin: 10px; text-align: justify;}

.container {
    display: flex;
    flex-wrap: wrap;
  }
.cadre {width:100%;}

.resultats {padding:0px;}

.resultat_0 {min-height:50px; border-style:solid; border-color:var(--couleur5); padding:10px; margin-top:10px;}
.resultat_1 {min-height:50px; border-style:solid; border-color:var(--couleur5); padding:15px 10px 15px 10px; margin-top:10px;}

.all_dl {background-color: #ecfebf; border:1px; border-style:solid; border-color:var(--couleur5); padding:10px; margin-top:10px; text-align: center;}

.cadre_droite_search {margin:10px 10px 10px 0; padding:0px 10px 10px 10px; float:right; width:200px; border-radius:var(--radius5); border-style:solid; border-width:var(--border2); border-color:var(--couleur10); background-color:var(--couleur5); text-align:center;}

.cadre_droite_pub {margin-right:10px; margin-bottom:10px; padding:0px 10px 10px 10px; float:right; width:200px; text-align:center;}

.publicite {line-height:0; clear:both; text-align:center; text-align:-webkit-center; padding: 10px 0 0 0; max-height:40vh;}

.haut_q {height: 26px; margin:0; padding:4px 7px 4px 7px; vertical-align: middle; border-color:var(--couleurRed); background-color: #FFEFEF;}
.haut_v {height: 26px; margin:0; padding:4px 5px; vertical-align: middle; cursor:pointer; border-color:var(--couleurRed); background-color:#ffbcbc; color:white;}
.index_q {font-size: large; margin:0; padding:4px 7px 4px 7px; border-color:var(--couleurRed); background-color: #FFEFEF;}
.droit_q {width:150px;}
.haut_q:focus, .index_q:focus {outline: none; border-color:#FF0000; background-color: #fff;}

.signature {text-align:right; clear:both;}

.degrade {background-color: var(--couleur10); color:var(--couleur0); padding:1px 10px 1px 10px; margin:0px;}

.navbar-toggle {padding:0; margin:0;}

.actualite {
    text-align: center;
    background-color:var(--couleur5);
    color:var(--couleurRed);
    padding:3px 10px 3px 10px;
    margin: 0px 5px;
    border-radius: 0 0 var(--radius5) var(--radius5);
    border-style:solid;
    border-width: 0 var(--border2) var(--border2) var(--border2);
    border-color:var(--couleur10);}
.actualite a {color:var(--couleur10);}

ariane {
    padding: 15px 0 0 0;
    margin: 0 0 -15px 10px;
    display: block;}
ariane::before {content: "< "; font-weight: bold; }

h1 {font-variant-caps: petite-caps; font-size:1.8em; padding:15px 0; color:#001954; margin:0px 10px 0px 10px;}

h2, .h2 {font-variant-caps: petite-caps; font-size:1.6em; padding:10px 10px; color:#081b43; clear:both; margin:30px 0 20px 0;}

h3 {font-variant-caps: petite-caps; font-size:1.4em; padding:5px 10px; color:#162443; clear:both; margin:20px 0 15px 0;}
h3::before {content: "› ";}

h4 {font-variant-caps: petite-caps; font-size:1.2em; padding:5px 15px; color:#242e42; clear:both; margin:10px 0 15px 0;}
h4::before {content: "o ";}

h5 {font-variant-caps: petite-caps; font-size:1em; padding:5px 20px; color:#242e42; clear:both; margin:5px 0 0 0;}
h5::before {content: "- ";}

.h_centree {text-align:center; clear:none;}

.menu {color:var(--couleur0); line-height:0.9; float:left;-webkit-font-smoothing: auto;}
.menu a {color:var(--couleur0); text-decoration:none; padding-left:10px; padding-right:10px;}
.menu a:hover {text-decoration:underline;}

.menu ul{margin:0; padding:0;}
.menu li{list-style-type:none; display:inline; white-space:nowrap;}

.menuBoutique {
    color: var(--couleurRed);
    font-weight: bold;
    text-shadow:
        var(--couleur0) 1px 0px 1px,
        var(--couleur0) 0px -1px 1px,
        var(--couleur0) -1px 0px 1px,
        var(--couleur0) -0px 1px 1px; 
}

input, select, button, textarea {
    font-weight:normal;
    padding:2px 5px 2px 5px;
    margin:1px;
    background-color:var(--couleur0);
    border-radius:var(--radius5);
    border-width:var(--border2);
    border-style:solid;
    border-color:var(--couleur10);
    color:var(--couleur20);
}
input:hover, select:hover, button:hover, textarea:hover {filter: brightness(1.1);}
input[type="submit"], input[type="radio"], label, button {cursor:pointer;}

/* Masquer le bouton radio d'origine */
input[type=radio]{display:none;}
/* Affichage par defaut du bouton radio personnalise */
input[type=radio] + label:before {background:var(--couleur0);
border:var(--border2) solid var(--couleur10);
border-radius:50%;
margin-top:-3px;
margin-right:6px;
display:inline-block;
vertical-align:middle;
content:'';
width:10px;
height:10px;}
input[type=radio]:hover + label:before {background:var(--couleur10);
box-shadow:inset 0px 0px 0px 2px var(--couleur10);}
/* Affichage du bouton radio personnalise quand il est selectionne */
input[type=radio]:checked + label:before {background:var(--couleur10);
border-color:var(--couleur10);
box-shadow:inset 0px 0px 0px 2px var(--couleur0);}

.search_v {background-color:transparent; line-height:0; border:0; vertical-align: middle;}

.description {text-align:justify;}

.play {cursor:pointer;}

.tag {padding:4px 10px 4px 10px;
margin:2px;
text-align:center;
border-color:var(--couleur10);
display:inline-block;
border-radius:var(--radius5);
border-style:solid;
border-width:var(--border2);
z-index:2;}
.tag:hover {background-color:var(--couleur5);}
.tag a:hover {text-decoration:none;}

.telecharger {
    cursor:pointer;
    background-color:var(--couleurRed);
    color:white;
    padding:3px 4px;
    margin-top:10px;
    border-radius:var(--radius5);
    border: var(--border2) solid var(--couleurRed);
}

.proposition {padding:4px 10px 4px 10px;
margin:2px;
text-align:center;
border-color:var(--couleur10);
display:inline-block;
border-radius:var(--radius5);
border-style:solid;
border-width:var(--border2);
z-index:2;
min-width:250px;}
.proposition:hover {background-color:var(--couleur5);}
.proposition a:hover {text-decoration:none;}
.proposition_plus {padding:4px 10px 4px 10px;
margin:2px;
text-align:center;
display:inline-block;
z-index:2;}

.tagm {padding:0 3px 0 3px;
margin:0 -3px 0 -3px;
border-width:0;}

.numerodepage_all {text-align:center;
padding:10px 0 10px 0;}
.numerodepage {padding:4px 8px 4px 8px;
margin:2px;
display:inline-block;
border-radius:var(--radius5);
font-weight:bold;}
.numerodepage_off {border-style:solid;
border-width:var(--border2);
background-color:var(--couleur5);
border-color:var(--couleur10);
color:var(--couleur15);}
.numerodepage_on {border-style:solid;
border-width:var(--border2);
background-color:var(--couleur5);
border-color:var(--couleur10);
color:var(--couleur15);}
.numerodepage_down {border-style:solid;
border-width:var(--border2);
background-color:#E6E6E6;
border-color:#999;
color:#999;}


.question {
    overflow:hidden;
    padding-right:10px;
    padding-left:10px;
    padding-top:15px;
}
.avatar-flou {
    width:50px;
    height:50px;
    margin-right:10px;
    float:left;
    border-radius:50%;
    border: solid;
    border-width: 1px;
}
.reponse {
    overflow:hidden;
    padding-top:5px;
    padding-left:30px;
}
.avatar-joseph-sardin {
    width:40px;
    height:40px;
    margin-right:10px;
    float:left;
    border-radius:50%;
    border: solid;
    border-width: 1px;
}
.quest-ou-rep {padding-top:5px; text-align: justify;}

.drapeau-avatar {margin-left:-60px;
position:absolute;
margin-top:0px;
line-height:0;
float:left;
opacity:1;}

.video {padding:4px;
margin:2px;
text-align:center;
border-color:var(--couleur10);
display:inline-block;
border-radius:var(--radius5);
border-style:solid;
border-width:var(--border2);
z-index:2;}

.photo {
    margin:10px;
}

.videoYoutube {
    border-width:var(--border2);
    border-style:solid;
    border-color:var(--couleur10);
    border-radius:var(--radius5);
    margin:10px;
}

.photo_detail {transform:rotate(0deg);}
.mySlides {display:none; text-align:center;}
.button_mySlides {
    cursor:pointer;
    font-size: large;
    width: 40px;
    height: 40px;
    margin: 10px 0 0 0;
}

.polaroid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

figure {
    position:relative;
    line-height:0;
    margin:0px 15px 10px 15px;
    transform: rotate(0.5deg);
    clear: both;
    display: inline-block;
    position: relative;
    border: 1px solid #ccc;
    padding: 10px;
    background: #fff;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
}
figure .photo {margin:0px;}
figcaption {
    position:relative;
    padding:0;
    text-align:center;
    width:100%;
    line-height:1.6;
    margin-top: 10px;
    font-style:italic;
}

.don {text-align:center;}

.top {position:fixed;
cursor:pointer;
display: none;
line-height:0px;
right:0px;
bottom:0px;
z-index:1;
text-align:center;
margin:5px;
border-color:var(--couleur10);
border-radius:var(--radius5);
border-style:solid;
border-width:var(--border2);
background-color:var(--couleur0);}
.top:hover {background-color:var(--couleur5);}
.top a:hover {text-decoration:none;}

.choixlangue {
    position: absolute;
    right:0;
    cursor:pointer;
    padding:0 5px 0 0;
}
.choixlangue_vif {
    color:var(--couleurRed);
    font-weight: bold;
    border-radius:var(--radius5); border-style:solid; border-width:var(--border2); border-color:var(--couleurRed);
    padding:0 2px 0 2px;
}

.reseauxSociaux img {
    width: 25px;
    height: 25px;
    padding: 0 4px;
    transform: rotate(5deg);
}

.infobulle {
    text-decoration: none;
    position: relative;
    cursor: help;
    color: var(--couleur10);
}

.infobulle a {
    text-decoration: none;
    color: var(--couleur10);
    cursor: help;
}

.infobulle span {
    display: none;
}

.infobulle span img {
    display: block; /* Rend l'image un élément de bloc */
    margin: 0 auto; /* Centre horizontalement l'image */
    max-width: 100%; /* Assure que l'image ne dépasse pas la largeur du conteneur */
    height: auto; /* Maintient les proportions de l'image */
}


.infobulle:hover {
    background: none;
    text-decoration: none;
}

.infobulle:hover span {
    z-index: 1;
    width: 400px; /* Largeur fixe confortable */
    max-width: 90vw; /* Limite à 90% de la largeur de l'écran */
    background-color: var(--couleur5);
    color: var(--couleur20);
    display: block;
    position: fixed; /* Positionnement fixe pour centrer par rapport à la page */
    top: 50%; /* Centrer verticalement sur la page */
    left: 50%; /* Centrer horizontalement sur la page */
    transform: translate(-50%, -50%); /* Centrage parfait en X et en Y */
    padding: 10px;
    border-color: var(--couleur10);
    border-radius: var(--radius5);
    border-style: solid;
    border-width: var(--border2);
    word-wrap: break-word;
    box-sizing: border-box; /* Inclut le padding et les bordures dans la largeur totale */
    white-space: normal; /* Permet de revenir à la ligne pour les textes longs */
    text-align: justify; /* Justifie le texte dans l'infobulle */
}

/* Ajustement pour petits écrans */
@media (max-width: 768px) {
    .infobulle:hover span {
        width: 90vw; /* Largeur de l'infobulle sur petits écrans */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); /* Toujours centré */
    }
}



.fr {padding-left:20px;
background-image:url(/images/dr-fr.gif);
background-position:left;
background-repeat:no-repeat;}
.en {padding-left:20px;
background-image:url(/images/dr-en.gif);
background-position:left;
background-repeat:no-repeat;}


.box {padding:0;
margin:2px;
text-align:center;
border-color:var(--couleur10);
display:inline-block;
border-radius:var(--radius5);
border-style:solid;
border-width:var(--border2);
z-index:2;
line-height:0;}
.box:hover {background-color:var(--couleur5);}
.box a:hover {text-decoration:none;}

.atmo_resultat {border-width:var(--border2);
border-style:solid;
border-color:var(--couleur10);
border-radius:var(--radius5);
margin:10px;
height:250px;

text-align:center;
display:inline-block;

background-position:center;
background-size:cover;
background-repeat:no-repeat;}


.jeu_liens {
padding:4px 10px 4px 10px;
margin:2px;
text-align:center;
font-size:1em;
border-color:var(--couleur10);
display:inline-block;
font-weight:normal;
background-color:var(--couleur0);
border-radius:var(--radius5);
border-width:var(--border2);
border-style:solid;
cursor:pointer;
z-index:2;}
.jeu_liens:hover {background-color:var(--couleur5);}
.jeu_liens a:hover {text-decoration:none;}

.jeu_input {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:var(--couleur10);
padding:4px 10px 4px 10px;
margin:2px;
text-align:center;
font-size:1em;
border-color:var(--couleur10);
display:inline-block;
font-weight:normal;
background-color:var(--couleur0);
border-radius:var(--radius5);
border-width:var(--border2);
border-style:solid;
cursor:pointer;
z-index:2;
background-color:var(--couleur5);
text-decoration:none;}
.jeu_input:hover {color:var(--couleur10);}


.prix {
    text-align:center;
    font-size:2.5em;
    margin:15px 0 15px 0;
    font-weight: bold;
    text-shadow: -1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc;
}
.ajoutPanier {
    text-align:center;
    margin:15px 0 15px 0;
}

.zoom:active {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5);
    z-index: 3;
}

.twAudessus {
  /* Le trame de fond */
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  display: none;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(1px);
}

.twAudessus a {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}

.twAudessus img {
  border-radius:var(--radius5);
  max-height: 90vh;
  max-width: 90vw;
  text-align: center;
  background: var(--couleur0);
  box-shadow: 0px 0px 10px #000;
}

.twAudessus:target {display: table;}

.cadre_concours {margin-right:auto; margin-left:auto; padding:0px 10px 20px 10px; width:300px; border-radius:var(--radius5); border-style:solid; border-width:var(--border2); border-color:var(--couleur10); background-color:var(--couleur5); text-align:center;}

.conseilsPerso {
    text-align: center;
    background: var(--couleur5);
}

.evenement {
    position:absolute;
}


.responsive_1 { width: 300px; height: 250px; }
@media(min-width: 500px) { .responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive_1 { width: 728px; height: 90px; } }

.mini_don {margin-left:550px; top:0; position:absolute; cursor:pointer;}

.cc {margin-left:540px; top:54px; position:absolute; transform:rotate(-3deg);}


.illustrationFigure {text-align: center; float: none;}
.illustrationImg {max-width: 100%;}

.categorie {padding:4px 10px 4px 10px;
margin:2px;
text-align:center;
border-color:var(--couleur10);
display:inline-block;
border-radius:var(--radius5);
border-style:solid;
border-width:var(--border2);
z-index:2;
min-width: 250px;}
.categorie:hover {background-color:var(--couleur5);}
.categorie a:hover {text-decoration:none;}
.categorie img {width: 75px;}

.numero {
    font-style: italic;
    font-size: smaller;
}
.numero::before {
    content: "#";
    font-size:smaller;
}
.numero::after {
    content: "";
    font-size:smaller;
}

pre {
    margin:0px 10px;
    padding:10px;
    background-color: #666;
    color:white;
    overflow-x:auto;
    cursor: text;
}

.references {
    height: 110px;
    overflow-x: auto;
    white-space: nowrap;
    text-align: center;
}
.reference {
    display: inline-block;
    width: 100px;
    margin: 0 10px;
}

.scratch {
    width: 480px;
    height: 360px;
}
  

@media all and (max-width:950px) /* MOBILE */
{
    body {
        font-size:0.9em;
        width: 100%;
    }
    
    .m {float:none;}
    .md {float:none;}
    .d {display:none;}

    .q {width:170px;}

    h1 {font-size:1.4em;}
    h2 {font-size:1.2em;}
    h3 {font-size:1em;}
    h4 {font-size:1em;}
    h5 {font-size:1em;}
    h6 {font-size:1em;}

    .degrade {height:42px;}

    .cadre_duo {width:100%;}

    .rechercheAvancee {
    text-align:center;
    }

    .resultats {display:inline-block;
    clear:both;
    width:100%;
    margin:0px;}

    .resultat_0 {border-width:1px 0;}
    .resultat_1 {border-width:1px 0;}

    .cadre_droite_detail {margin-left:10px;
    margin-right:10px;
    padding:0px 10px 0px 10px;
    border-radius:var(--radius5);
    border-style:solid;
    border-width:var(--border2);
    border-color:var(--couleur10);
    background-color:var(--couleur5);
    text-align:center;
    clear:both;
    margin-right:10px;
    max-width:300px;}


    .publicite1 {padding:5px 0px 5px 0px;
    border-top-style:dashed;
    border-top-width:1px;
    border-top-color:#666;
    border-bottom-style:dashed;
    border-bottom-width:1px;
    border-bottom-color:#666;
    margin:10px 0 0 0;}

    .actualite {
        font-size:0.85em;
    }

    .ciseaux3 {
        margin-left:20px;
        position:absolute;
        margin-top:-3px;
        line-height:0;
        float:left;max-height: 90vh;
        max-width: 90vw;
        width: 100%;
    }
    
    .haut_q {border-width:var(--border3);}
    .haut_v {margin: 0 0 0 5px; border-width:2px;}
    .index_q {border-width:var(--border3); width: 75%;}


    .polaroid-container {
        margin: 15px 0 0 0;
    }

    .photo {
        max-width:280px;
        max-height:280px;
    }
    
    .photographie {
        max-width:280px;
    }

    .videoYoutube {
        width:280px;
    }

    .button_mySlides {width:40px;height:40px;}

    figure {
        float:none;
        max-width:280px;
        text-align:center;
        margin-left:auto;
        margin-right:auto;
    }

    .menu {float:right; margin-top:8px; color:var(--couleur10);}
    .menu a {color:var(--couleur10);}
    .menu li {display:block;
    line-height:2;}
    .menu nav, .menu ul, .menu li {width:100%;
    margin:0;
    padding:0;}
    .menu nav {background-color:var(--couleur5);
    border-color:var(--couleur10);
    border-radius:0 0 10px 10px;
    border-style:solid;
    border-width:0 2px 2px 2px;}
    .menu li {padding: 4px 0 4px 0;}

    .choixlangue {
        background-color: white;
    }

    .reseauxSociaux {text-align: center;}

    .atmo_resultat {width:280px;}

    .cadre_droite_detail_m {display:inline-block; z-index:2;}

    .twAudessus:target {display:none;}

    .categorie img {width: 50px;}
}



@media all and (min-width: 951px) /* ORDINATEUR (951px, sinon c'est ni Mobile ni Desktop) */
{
    html {background-color:var(--couleur5); height:100%;} /* background-color:#E6E6E6; OU background:url("/images/background2.png") repeat; */

    body {
        width:900px;
        min-height:100%;
        border-left-style:dashed;
        border-left-width:1px;
        border-left-color:#666;
        border-right-style:dashed;
        border-right-width:1px;
        border-right-color:#666;
        padding:0 5px 0 5px;
        font-size:0.8em;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
    }

    .degrade {height:34px; border-radius:var(--radius5);}

    .haut_q {border-width:var(--border3) 0 var(--border3) var(--border3); border-top-right-radius:0; border-bottom-right-radius:0;}
    .haut_v {border-top-left-radius:0; border-bottom-left-radius:0; margin: 0 -4px 0 0; border-width:var(--border3) var(--border3) var(--border3) 1px; border-left-style: dashed;}
    .index_q {border-width:var(--border3); width: 50%;}

    .actualite {
        font-size:0.9em;
    }

    .ciseaux1 {top:25vh; position:fixed; text-align:right; margin-left:893px; z-index: 1; transform: rotate(90deg);} /* Droite */
    .ciseaux2 {bottom:10vh; position:fixed; margin-left:-18px; z-index: 1; transform: rotate(90deg);} /* Gauche */
    .decoupez {bottom:60vh; position:fixed; margin-left:-115px; font-size:0.8em; width: 200px; z-index: 1; transform: rotate(-90deg);}
    .ciseaux1.d img, .ciseaux2.d img { transition: transform 0.3s ease;}

    .m {display:none;}

    .q {width:200px;}

    .cadre_duo {flex: 1 1 50%;}

    .rechercheAvancee {
    text-align:left;
    }

    .h1_search {width:644px;}

    .resultats {width:644px; margin:0px 10px 0px 10px; float:left;}

    .resultat_0 {border-width:1px;border-radius:var(--radius5);}
    .resultat_1 {border-width:1px;border-radius:var(--radius5);}

    .cadre_droite_detail {margin-left:10px; margin-right:10px; padding: 0px 10px 0px 10px; float:right; width:300px; border-radius:var(--radius5); border-style:solid; border-width:var(--border2); border-color:var(--couleur10); background-color:var(--couleur5); text-align:center; transform:rotate(1deg);}

    .publicite1 {
    background-color:#E6E6E6;
    padding:5px;
    border-style:dashed;
    border-width:1px;
    border-radius:var(--radius5);
    border-color:#666;
    margin:10px 0 10px 0;
    }

    .ciseaux3 {position:absolute; margin-top:-4px; line-height:0; float:left; z-index:1;} /* Haut et Bas */

    .photo {
        max-width:350px;
        max-height:350px;
    }
    
    .photographie {
        max-width:400px;
    }

    .videoYoutube {
        width:560px;
        height:315px;
    }


    figure {
        float:right;
        clear: both;
    }

    .menu {float:right; margin-top:4px;}

    .langue {
        width:900px;
        position:absolute;
    }

    .reseauxSociaux {
        margin-left: 800px;
        top:5px;
        position:absolute;
        cursor:pointer;
        text-align:right;
        padding:0;
    }

    .error {padding:0;}

    .atmo_resultat {width:450px;}
}


.gallery {
flex-wrap: wrap;
text-align: center;
}

.gallery img {
cursor: zoom-in;
}

.lightbox {
cursor: zoom-out;
backdrop-filter: blur(1px);
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.4);
justify-content: center;
align-items: center;
z-index: 3;
}

.lightbox img {
transform: rotate(1deg);
display: block;
margin: auto;
max-width: 90%;
max-height: 90%;
padding: 10px;
background-color: white;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);
}