/* ── Font Alice self-hosted (nessuna richiesta a Google) ── */
@font-face {
  font-family: 'Alice';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/alice-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alice';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/alice-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --arrow-padding: 1vw;
    --viso_corpo_card_img_size_px: 150px;
    --viso_corpo_card_img_size_vw: 50vw;
}



body {
    background-color: #F9F5F6;
    /* background-color: #000000; */
    font-family: 'Alice', serif;
    margin: 10px;
}

#title_div {
    color: #ff80ae;
    /* #f579a6; */
    /* #ff80ae */
    /* #ef3378 */
    /* #f096b7 */
    margin: auto;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

#title_div p {
    margin-top: 0px;
    margin-bottom: 0px;
}

h1 {
    padding: 20px;
    border: 7px solid;
    border-radius: 50%;
    display: inline-flex;
    font-weight: bold;
}

h2 {
    font-weight: bold;
}

/* Modifico la dimensione della width del title_div e del font-size dell'h1
 * per rendere responsive il logo fittizio */
@media (min-width: 401px){
    #title_div {
        width: 380px;
    }
}
@media (min-width: 341px) and (max-width: 400px){
    #title_div {
        width: 320px;
    }

    h1 {
        font-size: 1.6rem;
    }
}
@media (max-width: 340px){
    #title_div {
        width: 280px;
    }

    h1 {
        font-size: 1.4rem;
    }
}

.list_padding {
    padding-left: 40px;
    padding-right: 20px;
}

/* Per rimuovere l'highlight che si crea su dispositivi touch quando si preme su dei pulsanti */
* {
    -webkit-tap-highlight-color: transparent;
}


/*  -------------------------   */
/*          BARRA MENU          */
/*  -------------------------   */
.menu_bar_div {
    color: #8238c2;
    background-color: #F8E8EE;
    padding: 0px;
    font-size: 1rem;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}


/*  Display pc / laptop / ipad  */
@media (min-width: 950px){
    .menu_button_div{
        /* Per non mostrare il pulsante menu nella navigation bar quando ho uno schermo piu' grande di 481px */
        display: none;
    }

    .phone_nav_bar_div {
        display: none;
    }

    .laptop_nav_bar_div {
        display: flex;
        justify-content: center;
    }

    .laptop_ul {
        list-style: none;
        padding: 0px;   /* per mantenere centrati i box rispetto al div */
        margin: 0px 50px;
        text-align: center;
    }

    .laptop_ul a {
        /* display: inline-block; e' necessario per far funzionare correttamente width: fit-content;
        in modo tale da non estendere ad una width maggiore rispetto a quella dell'elemento
        la link reference dell'anchor tag */
        display: inline-block;
        width: fit-content;
        text-decoration: none;
        color: #8238c2;
        -webkit-tap-highlight-color: transparent;   /* Per non far comparire il background blue dell'anchor tag */
    }

    .laptop_ul li {
        display: inline-block;
        padding: 10px 20px;
        margin: 0px;
    }
    
    @media(pointer: fine){
        .laptop_ul li:hover{
            color: #F9F5F6;
            background-color: #A555EC;
            /* background-color: #bd8de6; e' un colore piu' pastello*/
            cursor: pointer;
            border-radius: 5px;
        }

        /* .laptop_ul li:hover a {
            color: #F9F5F6;
        } */
    }

}


/*  Display Cellulari   */
@media (max-width: 950px){
    /* Per non mostrare la lista menu nella navigation bar quando ho uno schermo piu' piccolo di 480px */
    .laptop_nav_bar_div{
        display: none;
    }

    .laptop_ul {
        display: none;
    }

    .menu_bar_div {
        padding: 10px 10px;
        /* Uso z-index: 2; per mantenere il div del .menu_bar_div al di sopra sia del .navbar_background sia del .content_div*/
        z-index: 3;
    }

    .navbar_background {
        background-color: #F9F5F6;
        /* background-color: #000000; */
        width: 100vw;
        /* height: 50px; */
        visibility: hidden;
        /* Uso z-index: 1; per mantenere il div del .navbar_background al di sotto di quello del .menu_bar_div MA al di sopra del .content_div */
        z-index: 2;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
    }

    .menu_button_div {
        padding: 2px 4px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid #A555EC;
        position: relative;
    }

    /* pointer: fine -> per non applicare queste proprieta' a dispositivi touch */
    @media(pointer: fine){
        .menu_button_div:hover{
            background-color: #A555EC;
            cursor: pointer;
        }
    
        .menu_button_div:hover > .menu_button_line {
            background-color: #F8E8EE;
        }
    }

    
    .menu_button_line {
        background-color: #A555EC;
        height: 2px;
        width: 30px;
        margin: 0;
        padding: 0;
        margin-top: 6px;
        margin-bottom: 6px;
        margin-left: auto;
        margin-right: auto;
    }


    .menu_top_line {
        /* -moz-transition: transform 1s;
        -webkit-transition: transform 1s;
        -o-transition: transform 1s; */
        transform-origin: center;
        transform: translate(0, 8px) rotateZ(45deg);
        transition: transform 500ms;
    }

    .menu_bottom_line {
        transform-origin: center;
        transform:  translate(0, -8px) rotateZ(-45deg); 
        transition: transform 500ms;
    }

    .menu_center_line {
        opacity: 0;
        transition: opacity 500ms;
    }

    /* _X -> proprieta' da applicare quando il pulsante MENU diventa una X per chiudere il menu a tendina */
    .menu_top_line_X {
        transform-origin: center;
        /* translate(0, 0) -> permette di farlo tornare alla posizione iniziale */
        transform: translate(0, 0);
        transition: transform 500ms;
    }

    .menu_bottom_line_X {
        transform-origin: center;
        /* translate(0, 0) -> permette di farlo tornare alla posizione iniziale */
        transform:  translate(0, 0);
        transition: transform 500ms;
    }

    .menu_center_line_X {
        opacity: 1;
        transition: opacity 500ms;
    }

    .phone_nav_bar_div {
        width: fit-content;
        /* Imposto una height pari al 100% della visible height in modo tale da occupare tutta la schermata con la phone_nav_bar_div */
        height: 100vh;
        margin: 5px 0px 0px 0px;
    }

    .phone_ul {
        list-style: none;
        text-align: start;
        font-size: 1.2rem;
        padding-inline-start: 0px;
        padding: 0px;
        margin: 0px;
    }

    .phone_ul a {
        /* display: block; e' necessario per far funzionare correttamente width: fit-content;
        in modo tale da non estendere ad una width maggiore rispetto a quella dell'elemento
        la link reference dell'anchor tag */
        display: block;
        width: fit-content;
        text-decoration: none;
        color: #8238c2;
        -webkit-tap-highlight-color: transparent;   /* Per non far comparire il background blue dell'anchor tag */
    }

    .phone_ul li {
        padding: 5px 5px;
        width: fit-content;
    }

    /* pointer: fine -> per non applicare queste proprieta' a dispositivi touch */
    @media(pointer: fine){
    /* uguale a .laptop_ul li:hover */
        .phone_ul li:hover{
            color: #F9F5F6;
            background-color: #A555EC;
            cursor: pointer;
        }

        /* Per cambiare il colore del testo dell'anchor tag quando si è sui bordi del <li> element */
        /* .phone_ul li:hover a {
            color: #F9F5F6;
        } */
    }



}


/*  ---------------------------     */
/*  ---------------------------     */
/*  ---------------------------     */
/*  ---------------------------     */
/*  ---------------------------     */

/*  ---------------------------     */
/*  ---------------------------     */
/*           Generali               */
/*  ---------------------------     */
/*  ---------------------------     */
.section_div {
    text-align: center;
    padding-bottom: 3vw;
}

.section_div h2 {
    margin: 0px;
    padding: calc(min(3vw, 10px));
    font-size: 2.5rem;
    /* display: inline-flex; */
}

.section_div p {
    margin-bottom: 0px;
    padding: 0px 20px;
}

.content_div {
    background-color: #FDCEDF;
    color: #8238c2;
    /* Uso z-index: 0; per mantenere il div del contenuto al di sotto di quello del .menu_bar_div e del .navbar_background */
    /* z-index: 0; */
}

.text_justify {
    text-align: justify;
    max-inline-size: 900px;
    margin: auto;
}

.p_justify {
    margin-left: 2vw;
    margin-right: 2vw;
    text-align: justify;
    margin: auto;
}

.centered_ul {
    display: inline-block;
    text-align: left;
}



/*  ---------------------------     */
/*  ---------------------------     */
/*      Trattamenti mani            */
/*  ---------------------------     */
/*  ---------------------------     */
.mani_ul {
    list-style: none;
    padding: 0px; /* per mantenere centrati i box rispetto al div */
    display: inline-block;
}

.mani_ul li{
    padding: 5px;
    font-size: 1rem;
    font-weight: bold;
}

.mani_ul a {
    /* text-decoration: none; */
    color: #8238c2;
}


.immagini{
    /* display: inline-flexbox; */
    /*  max-inline-size mi serve a settare la dimensione massima dell'intero
        contenitore delle immagini: volendo al max 4 immagini considero la
        width di ogni img pari a 150px*4 = 600px a cui sommo i 10px*4 di padding
    */
    max-inline-size: 700px;
    /* margin: auto; Posiziono al centro dello schermo il contenitore */
    margin: auto;
    padding: 20px 0px;
}

.immagini img{
    height: 150px;
    width: 150px;
    padding: 10px;
}


/*  ---------------------------     */
/*  ---------------------------     */
/*            Contatti              */
/*  ---------------------------     */
/*  ---------------------------     */
.img_svg {
    padding-right: 3px;
}

.orari_apertura_ul {
    display: inline-block;
}

.orari_apertura_ul {
    width: 250px;
    padding: 0;
}

.orari_apertura_ul li {
    justify-content: space-between;
    display: flex;
}

.phone_contacts_ul {
    list-style: none;
    padding: 0;
}

.phone_contacts_ul a {
    color: #8238c2;
}

svg {
    padding-right: 10px;
}

.contact_icon {
    margin: 10px;
}

.map-image{
    padding: 50px;
    display: flex;
    justify-content: center;
}


/*  ---------------------------     */
/*  ---------------------------     */
/*             Viso                 */
/*  ---------------------------     */
/*  ---------------------------     */
.trattamento_singolo {
    background-color: #F9F5F6;
    margin: auto;
    width: 250px; 
    /* max-width: 600px; */
    height: 350px;
    border: 2px solid #A555EC;
    border-radius: 20px;
}

.cards_trattamento_singolo_div {
    margin: auto;   /* Per mantenere il tutto al centro */
    width: fit-content;
    display: grid;
    row-gap: 20px;
    column-gap: 20px;
}

.find_more_button {
    background-color: #F8E8EE;
    color: #8238c2;
    border: 2px solid #A555EC;
    border-radius: 5px;
    font-size: 1rem;
}

/* pointer: fine -> per non applicare queste proprieta' a dispositivi touch */
@media(pointer: fine){
    .find_more_button:hover{
        background-color: #A555EC;
        color: #F8E8EE;
        cursor: pointer;
    }
}

@media (max-width: 600px) {
    .cards_trattamento_singolo_div {
        /* Solo 1 colonna */
        grid-template-columns: 1fr;
    }
}

@media (min-width: 601px) and (max-width: 1200px){
    .cards_trattamento_singolo_div {
        /* 2 colonne */
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1201px) {
    .cards_trattamento_singolo_div {
        /* 4 colonne */
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.shape4Plus_div {
    max-inline-size: 900px;
    margin: auto;
}

.shape4Plus_div a {
    color: #8238c2;
}

.card_viso_corpo_div {
    margin: auto;   /* Per mantenere il tutto al centro */
    width: fit-content;
    display: grid;
    row-gap: 10px;
    column-gap: 10px;
}

.card_viso_corpo {
    width: fit-content;
    max-width: 400px;
}

@media (max-width: 800px) {
    .card_viso_corpo_div {
        /* Solo 1 colonna */
        grid-template-columns: 1fr;
    }
}

@media (min-width: 801px){
    .card_viso_corpo_div {
        /* 2 colonne */
        grid-template-columns: 1fr 1fr;
    }

    /* card_viso_corpo_img serve solamente per prendere sia viso_corpo_img_div sia viso_corpo_double_img_div */
    /* Con questo CSS selector sto selezionando tutti i div che hanno class = "card_viso_corpo_img" e che si trovano all'interno di un div con class = "card_viso_corpo" */
    .card_viso_corpo > div.card_viso_corpo_img {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);        /* Serve per centrare il div considerando left: 50% */
    }

    .big_height {
        min-height: 740px;
        position: relative;
    }
    
    .small_height {
        min-height: 550px;
        position: relative;
    }
}

.card_viso_corpo h3 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0px;
}

.card_viso_corpo p {
    padding: 0px 20px;
    margin-top: 5px;
}

.card_viso_corpo ul {
    padding: 0px 40px;
}

.card_viso_corpo li {
    margin: 5px 0px;
}

.viso_corpo_img_div {
    width: fit-content;
    border: 10px solid #8238c2;
    border-radius: 50%;
    margin: auto;       /* Per mettere l'immagine al centro */
    background-color: #F8E8EE;
    margin-bottom: 20px;
}

/* Ricordarsi di ritagliare tutte le immagini con Paint3D tramite una proporzione 1:1 */
.viso_corpo_img_div img {
    width: min(var(--viso_corpo_card_img_size_px), var(--viso_corpo_card_img_size_vw));
    height: min(var(--viso_corpo_card_img_size_px), var(--viso_corpo_card_img_size_vw));
    border-radius: 50%;     /* Per inserire l'immagine direttamente come se fosse in un cerchio */
    margin: 20px;
}

.viso_corpo_double_img_div {
    width: fit-content;
    border: 10px solid #8238c2;
    border-radius: 50%;
    margin: auto;       /* Per mettere l'immagine al centro */
    background-color: #F8E8EE;
    margin-bottom: 20px;
}

.bioradiolift_div {
    width: min(var(--viso_corpo_card_img_size_px), var(--viso_corpo_card_img_size_vw));
    height: min(var(--viso_corpo_card_img_size_px), var(--viso_corpo_card_img_size_vw));
    border-radius: 50%;     /* Per inserire l'immagine direttamente come se fosse in un cerchio */
    margin: 20px;
}

.viso_corpo_double_img {
    width: min(calc(var(--viso_corpo_card_img_size_px) * 2/3), calc(var(--viso_corpo_card_img_size_vw) * 2/3));
    height: min(calc(var(--viso_corpo_card_img_size_px) * 2/3), calc(var(--viso_corpo_card_img_size_vw) * 2/3));
    border-radius: 50%;     /* Per inserire l'immagine direttamente come se fosse in un cerchio */
}

.top_image {
    position: relative;
    left: min(calc(var(--viso_corpo_card_img_size_px) / 3), calc(var(--viso_corpo_card_img_size_vw) / 3));
    z-index: 1;
}

.bottom_image {
    position: relative;
    bottom: min(calc(var(--viso_corpo_card_img_size_px) / 3), calc(var(--viso_corpo_card_img_size_vw) / 3));
    left: 10px;
}


/* Immagini risultati dei trattamenti viso e corpo */
.result_image_div{
    width: fit-content;
}

.result_image_div p {
    width: 300px;
    height: 60px;       /* Altezza inserita per avere le immagini tutte allineate indipendentemente dalla lunghezza del contenuto del <p> element */
    margin-bottom: 10px;
}

.result_image {
    width: 300px;
}

@media (max-width: 355px) {
    .trattamento_singolo {
        width: 90vw;
    }

    .result_image_div p {
        width: 70vw;
    }
    
    .result_image {
        width: 70vw;
    }
}

.go_up_button_div {
    width: 32px;
    height: 32px;
    border: 2px solid #A555EC;
    border-radius: 50%;
    position: absolute;
    right: 10px;        /* Se si cambia bisogna cambiare anche in $(".go_up_button_div") in header_navbar.js */
    top: 10px;          /* Se si cambia bisogna cambiare anche in $(".go_up_button_div") in header_navbar.js */
    visibility: hidden;
    z-index: 4;     /* Per avere il pulsante Go Up sopra il div delle immagini della home, il quale occupa tutta la larghezza della window quindi creava problemi nel premere il pulsante */
}

.go_up_button_div svg {
    padding-right: 0px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}


/* pointer: fine -> per non applicare queste proprieta' a dispositivi touch, in quanto la 
proprieta' di hover ha dei problemi con i dispositivi touch screen */
@media(pointer: fine){
    .go_up_button_div:hover{
        cursor: pointer;
        background-color: #A555EC;
    }

    .go_up_button_div:hover svg {
        fill: #F8E8EE;
    }
}

/*  ---------------------------     */
/*  ---------------------------     */
/*             Trucco               */
/*  ---------------------------     */
/*  ---------------------------     */
.trucco {
    width: min(80vw, 900px);
    margin: auto;
}

.trucco_images {
    /* max-inline-size: 900px; */
    /* margin: auto; Posiziono al centro dello schermo il contenitore */
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.trucco_images img {
    padding-top: min(2vw, 10px);
    padding-bottom: min(2vw, 10px);
}

.single {
    /* Non togliere width */
    width: min(80vw, 900px);
}

.double_div {
    /* Non togliere width */
    width: min(80vw, 900px);
    display: inline-block;
}

.double {
    width: min(30vw, 300px);
    padding-left: min(5vw, 10px);
    padding-right: min(5vw, 10px);
}

.section_div.trucco p.p_justify {
    /* Aggiunto per sovrascrivere il .section_div p che inserisce un padding di 50px ad ogni lato. Con questa sovrascrittura il contenuto di <p> occupa la stessa width delle immagini inserite sotto ad esso. */
    padding-left: 0px;
    padding-right: 0px;
}


/*  ---------------------------     */
/*  ---------------------------     */
/*             Centro               */
/*  ---------------------------     */
/*  ---------------------------     */

.carousel_container {
    margin: 20px;   /* Per mantenere anche un margin laterale con display width piccola (es. mobile phone) */
    padding: 0;
    position: relative;
}

.centro_img {
    width: 100%;
    max-width: 900px;

    object-fit: cover;
    aspect-ratio: 16/9;
}

/* Imposto di default tutte le immagini con display: none, successivamente aggiungo nel index.html la classe .slide_active
   in modo tale da rendere visibile solamente una immagine */
.slide_img {
    display: none;
}

.slide_active {
    display: block;
}

.div_button_arrow {
    max-width: 900px;
    height: fit-content;
    margin: auto;
}

.arrow {
    border: solid #F9F5F6;
    border-width: 0 0.5vw 0.5vw 0;
    display: inline-block;
    padding: min(var(--arrow-padding), 15px);
    /* Per rendere trasparente la restante parte del quadrato uso una opacity: 0 tramite rgba(0, 0, 0, 0) */
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    -webkit-tap-highlight-color: transparent;
}


/* pointer: fine -> per non applicare queste proprieta' a dispositivi touch, in quanto la 
proprieta' di hover ha dei problemi con i dispositivi touch screen */
@media(pointer: fine){
    /* Per mantenere il cursore di tipo pointer e la freccia colorata quando col cursore vado sulla freccia */
    .arrow:hover {
        cursor: pointer;
        border-color: rgba(166, 84, 237, 1);
    }

    /* Per far comparire il cursore pointer quando col cursore entro nel circle */
    .circle:hover {
        cursor: pointer;
    }

    /* Per cambiare il colore della freccia quando col cursore vado all'interno del circle */
    .circle:hover button {
        border-color: rgba(166, 84, 237, 1);        
    }
}

.left {
    top: 50%;
    left: 60%;
    transform: translateY(-50%) translateX(-60%) rotate(135deg);
    -webkit-transform: translateY(-50%) translateX(-60%) rotate(135deg);
}


.right {
    top: 50%;
    right: 60%;
    transform: translateY(-50%) translateX(60%) rotate(-45deg);
    -webkit-transform: translateY(-50%) translateX(60%) rotate(-45deg);
}

.circle {
    position: absolute;
    width: 100%;
    max-width: min(100px, 8vw);
    height: 100%;
    max-height: min(100px, 8vw);
    background-color: rgba(0, 0, 0, 0.5);
    border: hidden 1px #000000;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);        /* Serve per centrare il div considerando left: 50% */
}

#left_circle {
    left: calc(50% - 450px);    /* 900px / 2 dove 900px e' la max-inline-size */
}

#right_circle {
    right: calc(50% - 450px);   /* 900px / 2 dove 900px e' la max-inline-size */
}

@media (max-width: 960px) {
    #left_circle {
        left: 0;
    }

    #right_circle {
        right: 0;
    }
}

.slide_indicator {
    width: min(5vw, 30px);
    height: min(5vw, 30px);
    margin-top: min(5vw, 5px);
    margin-left: 5px;
    margin-right: 5px;
    background-color: #F9F5F6;
    border: hidden; 
    border-radius: 50%;
}

/* pointer: fine -> per non applicare queste proprieta' a dispositivi touch, in quanto la 
proprieta' di hover ha dei problemi con i dispositivi touch screen */
@media(pointer: fine){
    .slide_indicator:hover {
        cursor: pointer;
        background-color: #A555EC;
    }
}



/*  ---------------------------     */
/*  ---------------------------     */
/*        Listino Prezzi            */
/*  ---------------------------     */
/*  ---------------------------     */
.header_title {
    font-size: 1.5rem;
    text-align: center;
}

.price_tables_div {
    margin: auto;   /* Per mantenere il tutto al centro */
    width: fit-content;
    /* height: 800px;  Per non avere tutte le righe troppo compatte. Da modificare se si aggiungono altre righe */
    display: grid;
    row-gap: 30px;
    column-gap: 50px;
}

@media (max-width: 950px) {
    .price_tables_div {
        /* Solo 1 colonna */
        grid-template-columns: 1fr;
    }
}

@media (min-width: 951px){
    .price_tables_div {
        /* 2 colonne */
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 500px 500px;    /* Per non avere le righe tutte ammassate. Da modificare se si aggiungono nuove righe per ogni table */
    }
}

.price_table {
    /* padding-left & padding-right sono necessari per mantenere un po' di spazio nel caso di display molto stretto, ossia con una width molto piccola, altrimenti la scritta andrebbe a ridosso dei bordi dello schermo */
    padding-left: 10px;
    padding-right: 10px;
    /* border-collapse: collapse; */
    border-spacing: 0;
}

.left_align {
    text-align: left;
    /* padding-right: 30px;    Per inserire uno spazio tra un <td> e un altro */
}

.right_align {
    text-align: right;
}









/*  ---------------------------     */
/*  ---------------------------     */
/*            Video                 */
/*  ---------------------------     */
/*  ---------------------------     */

.div_video_horizontal {
    margin: 20px;
    aspect-ratio: 16/9;
}

.div_video_vertical {
    margin: 20px;
}

.video_vertical {
    max-width: 400px;
    object-fit: cover;
    aspect-ratio: 9/16 !important;
}

video {
    width: 100%;
    max-width: 860px;

    object-fit: cover;
}

/*  ---------------------------     */
/*  ---------------------------     */
/*  ---------------------------     */
/*  ---------------------------     */

/* footer */
#footer_div {
    color: #F9F5F6;
    background-color: #F195B7;
    text-align: center;
    font-size: 0.8rem;
    padding: 15px;
    clear: both;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.footer_p {
    margin-block-start: 0px;
    margin-bottom: 5px;
}


/* Cookies */
#cookie-banner {
    position: fixed;
    /* width: 50%   +   left: 25%
    -> mi permette di avere una larghezza del div del 50% e di metterlo al centro */
    /* width: 80%; */
    left: 8%;
    height: fit-content;
    bottom: 40%;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    /* display: none; */
}

#cookie-banner p {
    margin: 10px;
}

#cookie-banner button {
    background-color: #007bff;
    color: #fff;
    border-style: none;
    border-radius: 10px;
    padding: 5px 10px;
    cursor: pointer;
}

@media (pointer: fine) {
    #cookie-banner button:hover {
        background-color: #0056b3;
    }
}

.div-post {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px 20px 0px;
    padding-bottom: 3vw
}

.div-post img {
    width: 100%;
    max-width: 900px;
    margin: 5px 0;
}