/*------------------------------------------------DESKTOP------------------------------------------------*/



div.WIP {

    background-color: yellow;

    padding: 5px;

    z-index: 999;

}



div.WIP h1{

    font-family: Arial, Helvetica, sans-serif;

    margin: 0;

    text-align: center;

}



body {

    margin: 0;

    anchor-name: --bodyAnchor;

}



header {

    display: flex;

    padding: 10px 20px;

    background-color: lightgray;

}



main {

    display: flex;

    flex-direction: column;

    padding: 10px;

    width: auto;

}



footer {

    display: flex;

    padding: 10px 20px;

    background-color: lightgray;

    justify-content: center;

}



a {

    color: black;

    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;

}



h4 {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

}



p {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

}



label {

    font-family: Arial, Helvetica, sans-serif;

}



@keyframes opacity {

    from {opacity: 0;}

    to {opacity: 1;}

}



@keyframes height {

    from {height: 0;}

    to {height: fit-content;}

}



/*-----------------------HEADER-----------------------*/



div.navMenuMobile {

    display: none;

}



div.logoTitolo {

    display: flex;

    width: auto;

}



div.logoTitolo a {

    display: flex;

    height: 100%;

}



div.logoTitolo a img#Logo {

    height: 64px;

    width: 64px;

    transition: transform 0.5s;

}



div.logoTitolo a img#Logo:hover {

    transform: scale(1.1);

}



div.logoTitolo a h4 {

    display: inline;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 2rem;

    margin: auto 0 auto 16px;

    color: #100ECD;

    transition: transform 0.5s;

}



div.logoTitolo a h4:hover {

    transform: scale(1.05);

}



div.navMenu {

    display: flex;

    margin-left: auto;

}



div.dropDown {

    display: inline-block;

    padding: 10px 0 10px 0;

    margin: auto 0 auto 24px;

}



div.dropDown a.dropDownBtn {

    display: inline;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 1.3rem;

    margin: 0;

    color: #100ECD;

    transition: color 0.25s;

}



div.dropDown a.dropDownBtn:hover {

    color: #6c8cb4;

}



div.dropDownContent {

    display: none;

    position: absolute;

    background-color: #f1f1f1;

    border-radius: 5px;

    width: fit-content;

    box-shadow: 5px 5px 7px lightgray;

}



div.dropDown:hover div.dropDownContent {

    display: block;

    margin-top: 10px;

    animation-name: opacity;

    animation-duration: 0.5s;

}



div.dropDownContent a {

    display: block;

    padding: 12px 16px;

    line-height: 1.5;

    color: #100ECD;

}



div.dropDownContent a:hover {

    background-color: #ddd;

    color: #1a38b0;

}



div.navMenu a.contatti {

    display: block;

    height: min-content;

    margin: auto 0 auto 24px;

    color: #100ECD;

    transition: color 0.25s;

}



div.navMenu a.chiSiamo {

    display: block;

    height: min-content;

    margin: auto 0 auto 0;

    color: #100ECD;

    text-align: center;

    width: fit-content;

    transition: color 0.25s;

}



div.navMenu a:hover {

    color: #6c8cb4;

}



div.navMenu a h6 {

    font-size: 1.3rem;

    margin: 0;

}



/*-----------------------MAIN-----------------------*/



div.separator {

    height: 4vh;

    display: block;

    display: flex;

}



div.separator hr {

    width: 75vw;

    border-style: double;

    align-self: center;

}



div.containerImpianti {

    display: flex;

    width: 100%;

    height: fit-content;

    justify-content: center;

}



div.impianti {

    width: 75vw;

    height: 100%;

}



div.impiantiTitolo {

    margin-bottom: 30px;

}



div.impiantiTitolo h4 {

    text-align: center;

    font-size: 2rem;

    color: #100ECD;

    text-decoration: underline;

    font-style: italic;

}



div.impiantiContent {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-between;

    align-content: space-between;

    height: 100%;

}



div.impiantiContentChild {

    display: flex;

    flex-direction: column;

    width: 30%;

    background-color: white;

    box-shadow: 5px 5px 7px lightgray;

    border-radius: 5px;

    transition: transform 0.5s;

    margin-bottom: 15px;

}



div.impiantiContentChild:hover {

    transform: scale(1.1);

}



div.impiantiContentChild img {

    display: inline;

    width: 100%;

    border-radius: 5px 5px 0 0;

    

}



div.impiantiContentChild p {

    text-align: center;

    font-size: 1.2rem;

    margin: 5% 5%;

}



#Elettrici {

    background-color: lightskyblue;

}



#Automazione {

    background-color: lightgreen;

}



#Allarme {

    background-color: lightgoldenrodyellow;

}



#Videosorveglianza {

    background-color: plum;

}



#Domotici {

    background-color: lightgray;

}



#Antincendi {

    background-color: orange;

}



div.containerServizi {

    display: flex;

    width: 100%;

    height: fit-content;

    justify-content: center;

}



div.servizi {

    width: 75vw;

    height: 100%;

}



div.serviziTitolo {

    margin-bottom: 30px;

}



div.serviziTitolo h4 {

    text-align: center;

    font-size: 2rem;

    color: #100ECD;

    text-decoration: underline;

    font-style: italic;

}



div.serviziContent {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-between;

    align-content: space-between;

    height: 95%;

}



div.serviziContentChild {

    display: flex;

    flex-direction: column;

    width: 30%;

    background-color: white;

    box-shadow: 5px 5px 7px lightgray;

    border-radius: 5px;

    transition: transform 0.5s;

    margin-bottom: 15px;

}



div.serviziContentChild:hover {

    transform: scale(1.1);

}



div.serviziContentChild img {

    display: inline;

    width: 100%;

    border-radius: 5px 5px 0 0;

}



div.serviziContentChild p {

    text-align: center;

    font-size: 1.2rem;

    margin: 5% 5%;

}



div.containerPartners {

    display: flex;

    width: 100%;

    height: fit-content;

    justify-content: center;

}



div.partners {

    width: 75vw;

    height: 100%;

}



div.partnersTitolo {

    margin-bottom: 30px;

}



div.partnersTitolo h4 {

    text-align: center;

    font-size: 2rem;

    color: #100ECD;

    text-decoration: underline;

    font-style: italic;

}



div.partnersContent {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-between;

    align-content: space-evenly;

    height: 85%;

}



div.partnersContentChild {

    display: flex;

    flex-direction: column;

    width: 30%;

    background-color: white;

    border-radius: 5px;

    transition: transform 0.5s;

    margin-bottom: 15px;

}



div.partnersContentChild:hover {

    transform: scale(1.1);

}



div.partnersContentChild img {

    display: inline;

    width: 100%;

    border-radius: 5px;

    

}



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



div.footerContent {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    width: 100%;

    padding: 10vh 0;

}



div.footerInfo {

    display: flex;

    flex-direction: column;

    padding: 3vh 2vw;

    background-color: #a6a6a6;

    border-radius: 5px;

    box-shadow: 5px 5px 7px #858585;

    width: 20%;

}



div.footerInfoTitolo {

    margin-bottom: 5px;

}



div.footerInfoTitolo h4 {

    text-align: center;

    font-size: 2rem;

    color: #100ECD;

}



div.footerInfoContent {

    line-height: 1.5;

    text-align: center;

    color: #100ECD;

}



div.footerOrariFeriali {

    margin: 10px 0 10px 0;

}



div.footerContatti {

    display: flex;

    flex-direction: column;

    padding: 3vh 2vw;

    background-color: #a6a6a6;

    border-radius: 5px;

    box-shadow: 5px 5px 7px #858585;

    width: 30%;

}



div.footerContattiTitolo {

    text-align: center;

    font-size: 2rem;

    color: #100ECD;

}



div.footerContattiContent {

    line-height: 1.5;

    text-align: center;

    margin: 2vh 0;

    color: #100ECD;

}



div.footerMail {

    margin: 10px 0 10px 0;

}



div.footerSocial {

    display: flex;

    flex-direction: column;

    padding: 3vh 2vw;

    background-color: #a6a6a6;

    border-radius: 5px;

    box-shadow: 5px 5px 7px #858585;

    width: 20%;

}



div.footerSocialTitolo {

    text-align: center;

    font-size: 2rem;

    color: #100ECD;

}



div.footerSocialContent {

    display: flex;

    flex-direction: column;

    justify-content: space-around;

    height: 80%;

}



div.footerSocialContent div.socialContent {

    display: flex;

    justify-content: center;

}



div.footerSocialContent div.socialContent a {

    color: #100ECD;

    transition: color 0.25s, transform 0.5s;

}



div.footerSocialContent div.socialContent a:hover {

    color: #6c8cb4;

    transform: scale(1.1);

}



div.footerSocialContent div.socialContent i {

    margin-right: 5px;

}



div.footerSocialContent p {

    display: inline;

}



/*------------------------------------------------TABLET------------------------------------------------*/



@media (max-width: 1024px) {



    header {

        height: 48px;

    }

    

    /*-----------------------HEADER-----------------------*/



    div.logoTitolo a img#Logo {

        width: 48px;

        height: 48px;

    }

    

    div.logoTitolo a h4 {

        font-size: 1.5rem;

    }



}



/*------------------------------------------------MOBILE------------------------------------------------*/



@media (max-width: 767px) {



    header {

        padding: 8px;

        height: 32px;

    }



    main {

        padding: 5px 10px;

    }



    footer {

        padding: 8px;

    }



    /*-----------------------HEADER-----------------------*/



    div.logoTitolo a img#Logo {

        width: 32px;

        height: 32px;

    }



    div.logoTitolo a h4 {

        margin-left: 8px;

        font-size: 1.25rem;

    }



    div.navMenu {

        display: none;

    }



    div.navMenuMobile {

        display: inline-block;

        margin: 0 0 0 auto;

        width: 32px;

        height: 32px;

    }



    input.checker {

        display: none;

    }



    label.navMenuMobileButton {

        position: relative;

        margin: 0 0 0 auto;

        cursor: pointer;

        width: 32px;

        height: 32px;

        z-index: 11;

        font-size: 28px;

        padding: 0 12%;

    }



    div.dropDownMobile {

        position: absolute;

        position-anchor: --bodyAnchor;

        top: anchor(top);

        right: anchor(right);

        display: none;

        z-index: 2;

        width: 100vw;

        height: fit-content;

        background-color: white;

        border-radius: 5px 0 5px 5px;

        box-shadow: 5px 5px 7px lightgray;

    }



    input.checker:checked + label.navMenuMobileButton + div.dropDownMobile {

        display: flex;

    }



    div.dropDownContentMobile {

        display: flex;

        flex-direction: column;

        width: 90%;

        height: 85%;

        margin: 8px auto 16px auto;

    }



    div.dropDownContentMobile a {

        margin-top: 8px;

        color: #100ECD

    }



    div.dropDownContentMobile label {

        color: #100ECD

    }



    div.impiantiMenuMobile {

        margin-top: 8px;

    }



    div.navMenuMobile img.pointerDown {

        width: 8px;

        height: 6px;

        margin: 4.6px 0 2px 0;

    }



    div.navMenuMobile img.pointerUp {

        display: none;

        width: 8px;

        height: 6px;

        margin: 4.6px 0 2px 0;

    }



    div.dropDownMobileImpianti {

        display: none;

        position: relative;

        left: 12px;

        padding-left: 8px;

        margin: 4px 0;

        border-left: solid 1px #100ECD;

    }



    div.dropDownMobileImpianti a {

        margin: 4px 0;

    }



    input.checker:checked + label.impiantiMenuMobileButton + div.dropDownMobileImpianti {

        display: flex;

        flex-direction: column;

    }



    input.checker:checked + label.impiantiMenuMobileButton img.pointerUp {

        display: inline;

    }



    input.checker:checked + label.impiantiMenuMobileButton img.pointerDown {

        display: none;

    }



    div.serviziMenuMobile {

        margin-top: 8px;

    }



    div.dropDownMobileServizi {

        display: none;

        position: relative;

        left: 12px;

        padding-left: 8px;

        margin: 4px 0;

        border-left: solid 1px black;

    }



    div.dropDownMobileServizi a {

        margin: 4px 0;

    }



    input.checker:checked + label.serviziMenuMobileButton + div.dropDownMobileServizi {

        display: flex;

        flex-direction: column;

    }



    input.checker:checked + label.serviziMenuMobileButton img.pointerUp {

        display: inline;

    }



    input.checker:checked + label.serviziMenuMobileButton img.pointerDown {

        display: none;

    }



    /*-----------------------MAIN-----------------------*/



    div.separator {

        height: 1vh;

    }



    div.separator hr {

        width: 90vw;

    }



    div.impianti {

        width: 90vw;

    }



    div.impiantiTitolo {

        margin-bottom: 8px;

    }



    div.impiantiTitolo h4 {

        font-size: 1.2rem;

    }

    

    div.impiantiContentChild {

        width: 45%;

    }



    div.impiantiContentChild p {

        font-size: 0.8rem;

    }



    div.serviziTitolo h4 {

        font-size: 1.2rem;

    }



    div.servizi {

        width: 90vw;

    }



    div.serviziContentChild p {

        font-size: 0.8rem;

    }



    div.partnersTitolo h4 {

        font-size: 1.2rem;

    }



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



    div.footerContent {

        padding: 2vh 0;

        justify-content: space-between;

    }



    div.footerContent hr {

        margin: 0 2px;

    }



    div.footerInfo {

        padding: 1.5vh 1.5vw;

        width: 25%;

    }



    div.footerInfoTitolo h4 {

        font-size: 1.1rem;

    }



    div.footerOrari h4 {

        font-size: 0.8rem;

    }



    div.footerOrari p {

        font-size: 0.6rem;

    }



    div.footerContatti {

        padding: 1.5vh 1.5vw;

        width: 25%;

    }



    div.footerContattiTitolo h4 {

        font-size: 1.1rem;

    }



    div.footerSocial {

        padding: 1.5vh 1.5vw;

        width: 25%;

    }



    div.footerContattiContent p {

        font-size: 0.6rem;

    }



    div.footerSocialTitolo h4 {

        font-size: 1.1rem;

    }



    div.footerSocialContent a {

        font-size: 0.6rem;

    }



}