/*
Theme Name: Personalizzato Il Diavolo Veste... Ordine
Theme URI: 
Author: Michael Ricciu
Author URI: https://wordpress.org
Description: Questo tema è statoc reato esclusivamente per il sito IlDiavoloVeste...Ordine
Version: 1.0
-----------------------------------------------------------------------------------------
*/
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: "Playfair Display", serif;
}

body{
    background-color: rgb(164, 143, 122);
}

.spaziatore{
    height: 10dvh;
}
/*----------------INIZIO HEADER----------------*/
header{
    position: fixed;
    height: 10vh;
    width: 100%;
    padding: 0px 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(90, 56, 11, 0);
    -webkit-backdrop-filter:blur(20px);
            backdrop-filter:blur(20px);
    z-index: 1000;
}

header .contenitore-logo{
    height: 90%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

header .contenitore-logo .logo{
    height:100%;
}

header .contenitore-logo .logo_link{
    display: block;

}

header .menu-menu-container{
    height: 100%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;

}

header .menu-menu-container .menu {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    list-style: none;

}

header .menu-menu-container .menu .menu-item a{
    height: 100%;
    width: 100%;
    padding: 0px 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 1.5rem;
    font-weight: 400;
    transition: 0.3s ease;
}

header .menu-menu-container .menu .menu-item a:hover{
    color: rgb(218, 206, 32);
    background-color: rgba(27, 27, 27, 0.349);
    box-shadow: 0px 0px 3px rgb(0, 0, 0);

}
/*----------------FINE HEADER----------------*/

/*----------------INIZIO FOOTER----------------*/
footer{
    height: 40vh;
    width: 100%;
    padding: 12px;
    display: flex;
    align-items: center;
    background-color: rgb(114, 93, 71);
    -webkit-backdrop-filter:blur(3px);
            backdrop-filter:blur(3px);
}

footer .footer-container{
    padding: 12px;
    
}

footer .footer-container_1{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
}


footer .footer-container_1 .footer-container_logo{
    height: 40%;
    width: 100%;
    display: flex;
    justify-content: center;
}

footer .footer-container_1 .footer-container_logo .footer-logo{
    height: 100%;
}

footer .footer-container_1 .footer-utilita{
    width: 100%;
}

footer .footer-container_1 .footer-utilita .footer-links_social{
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 96px;
}

footer .footer-container_1 .footer-utilita .footer-links_social .link_riferimento{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    transition: 0.4s ease;

}
footer .footer-container_1 .footer-utilita .footer-links_social .link_riferimento:hover{
    transform: scale(1.1);
}

footer .footer-container_1 .footer-utilita .footer-links_social .link_riferimento .footer-link_social_icona{
    width: 30%;

}

footer .footer-container_2{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: center;
}

footer .footer-container_2 .footer-dati{
    color: white;
}

footer .footer-container_2 .footer-informazioni_legali{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

footer .footer-container_2 .footer-informazioni_legali .footer_informazione_legale{
    text-decoration: none;
    color: white;
}

.sotto_footer{
    font-family: 'inter', sans-serif;
    text-align: center;
    color: white;
    background-color: rgb(114, 93, 71);
}


/*----------------FINE FOOTER----------------*/


.hamburgher {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1100;
}

.bar {
    width: 30px;
    height: 3px;
    background-color: white;
    transition: 0.3s;
}

@media screen and (max-width: 1024px) {
/*----------------INIZIO HEADER TABLET----------------*/
    header {
        justify-content: space-between;
        padding: 0 20px;
    }

    .hamburgher {
        display: flex;
        width: 10%;
    }

    header .contenitore-logo { 
        width: auto; 
    }

    header .menu-menu-container {
        position: fixed;
        display: flex;
        right: -100%;
        top: 10vh;
        height: 90dvh;
        width: 100%;
        background-color: rgba(31, 31, 31, 0.938); 
        flex-direction: column;
        transition: 0.4s ease-in-out;
        z-index: 1000; 
        transform: translateZ(0);
    }

    header .menu-menu-container.is-open {
        width: 100%;
        right: 0;
    }

    header .menu-menu-container .menu {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

     header .menu-menu-container .menu .menu-item {
        width: 100%;
        padding: 0px;
        margin: 0px;
     }

    header .menu-menu-container .menu .menu-item a {
        padding: 24px;
        font-size: 2rem;
    }
    
    .hamburgher.is-open .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .hamburgher.is-open .bar:nth-child(2) { opacity: 0; }
    .hamburgher.is-open .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    /*----------------FINE HEADER TABLET----------------*/

    /*----------------INIZIO FOOTER TABLET----------------*/

    footer{
        height: auto;
        width: 100%;
        padding: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgb(114, 93, 71);
        -webkit-backdrop-filter:blur(3px);
                backdrop-filter:blur(3px);
    }

    footer .footer-container{
        padding: 12px;
    }

    footer .footer-container_1{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-content: center;
        gap: 12px;
    }


    footer .footer-container_1 .footer-container_logo{
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    footer .footer-container_1 .footer-container_logo .footer-logo{
        width: 80%;
        height: 100%;
    }

    footer .footer-container_1 .footer-utilita{
        width: 100%;

    }

    footer .footer-container_1 .footer-utilita .footer-links_social{
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        gap: 26px;
    }

    footer .footer-container_1 .footer-utilita .footer-links_social .link_riferimento{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: white;
        transition: 0.4s ease;
    }
    
    footer .footer-container_1 .footer-utilita .footer-links_social .link_riferimento:hover{
        transform: scale(1.1);
    }

    footer .footer-container_1 .footer-utilita .footer-links_social .link_riferimento .footer-link_social_icona{
        width: 30%;

    }

    footer .footer-container_2{
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-content: center;
        gap: 24px;
    }

    footer .footer-container_2 .footer-dati{
        width: 100%;
        font-size: 1.1rem;
        color: white;
    }

    footer .footer-container_2 .footer-informazioni_legali{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    footer .footer-container_2 .footer-informazioni_legali .footer_informazione_legale{
        text-decoration: none;
        color: white;
    }

    .sotto_footer{
        font-family: 'inter', sans-serif;
        text-align: center;
        font-size: 0.7rem;
        color: white;
        background-color: rgb(114, 93, 71);
    }

}

/*----------------FINE FOOTER TABLET----------------*/


@media screen and (max-width: 768px){
    body{
        overflow-x: hidden;
    }

    header {
        height: 10vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }

    header .contenitore-logo {
        width: 80%;
        display: flex;
        align-items: center;
    }

    header .contenitore-logo img {
        max-height: 8vh;
        width: auto;
        -o-object-fit: contain;
           object-fit: contain;
    }

    .hamburgher {
        width: 20%;
        display: flex;
        justify-content: flex-end; 
    }

    header .contenitore-logo { 
        width: auto; 
    }

    header .menu-menu-container {
        position: fixed;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
        right: -100%;
        top: 10vh;
        top: 10dvh;
        height:90vh;
        height: 90dvh;
        background-color: rgba(31, 31, 31, 0.938); 
        -webkit-transition: 0.4s ease-in-out; 
        -o-transition: 0.4s ease-in-out; 
        transition: 0.4s ease-in-out;
        z-index: 1000;
        visibility: hidden;
    }

    header .menu-menu-container.is-open {
        width: 100%;
        right: 0;
        visibility: visible;
    }

    header .menu-menu-container .menu {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;
    }

    header .menu-menu-container .menu .menu-item {
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    header .menu-menu-container .menu .menu-item a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 24px;
        font-size: 2rem;
    }

}