@font-face {

    font-family: 'Helvetica';

    src: '../fonts/Helvetica.ttf';

    font-family: 'Helvetica Thin';

    src: '../font/Helvetica-Thin.ttf';

  }



html {

    margin: 0px;

    padding: 0px;

    width: 100%;

    height: 100%;

}



body {

    color: #3b3b3b;

    font-size: 1.0em;

    font-family: Helvetica;

    margin: 0px;

    padding: 0px;

    width: 100%;

    height: 100%;

    background-size: cover;

}



img {

    border: none;

}

/*** GENERAL ***/

h1 {

    margin: 0px auto;

    padding: 0px;

    font-weight: 700;

    font-style: normal;

    font-size: 2.5em;

}



h2 {

    margin: 0px;

    padding: 0px;

    font-weight: normal;

    font-style: normal;

    font-size: 1.5em;

}



h3 {

    margin: 0px;

    padding: 0px;

    font-weight: bold;

    font-style: normal;

    font-size: 1.2em;

    margin-top:20px;

}



a {

    color: #3b3b3b;

    text-decoration: none;

}



p {

    line-height: 1.7em;

}



ul

{

    list-style-type: disclosure-closed;
    
    padding-left: 20px;
    
    padding-right: 20px;   

}





#wrap {

    float: right;

    width: calc( 100% - 250px );

    min-height: 100%;

    position: relative;

}



body > img.bacgroundimage {

    z-index: 0;

    width: calc( 100% - 250px );

    left: 250px;

    top: 0px;

    height: 100%;

    opacity: 0.3;

    position: absolute;

    object-fit: cover;
    animation: fadeIn 2s;
    
    /*transition-property: opacity;
    transition-timing-function: ease-in-out;
    transition-duration: 2s;
    transition-delay: 0.5s;*/
    

}

@keyframes fadeIn {
  0% { opacity: 1; }
  100% { opacity: 0.3; }
}




/*body > img.bacgroundimage.endtransition {

    z-index: 0;

    width: calc( 100% - 250px );

    left: 250px;

    top: 0px;

    height: 100%;

    opacity: 0.3;

    position: absolute;

    object-fit: cover;
    transition-property: opacity;
    transition-timing-function: ease-in-out;
    transition-duration: 2s;
    

}*/

.container{ 

    font-family: 'Helvetica';

    text-align: center;

    font-size:15px;

    font-weight: 100;

    padding-left: 40px;

    padding-right: 40px;

}



.container-contact{

 display: flex;

    justify-content: center; /* or 'center' if you want them centered */

}

.container-sicurezza li{

    padding-bottom: 15px;

}

.container-sicurezza ul{

    padding-top: 20px;

}



.title-ufi{

    text-align: center;

    padding-left: 40px !important;
    
   
}



.container-ufi{

    display: flex;

    justify-content: center;

    margin-top: 20px ;

}

.container-ufi li{

    padding-bottom: 15px;

}





.contact a {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.contact{

    margin-top: 10vh;

}



#contact-email{

    margin-right: 15vh;

}



.material-symbols-outlined {

    font-size: 75px !important;

}



.icon-text{

    margin-top: 2vh;

    font-size: 20px;
    
    font-weight: bold;

}





/*** NAVIGATION ***/

a > img.logo 

{

    color: #3b3b3b;

    text-decoration: none;

    z-index: 500;

    position: absolute;

    top: 10px;

    left: calc( 50% - 90px );

}



#close-nav 

{

    display: none;

}



#web-nav {

    width: 300px;

    height: 100%;

    overflow: hidden;

    float: left;

    z-index: 20;

    position: fixed;

    left: 0px;

    /*min-height: 600px;*/

}



    #web-nav img.logo {

        margin: 10px auto 25px auto;

        display: block;

        width: 190px;

        height: 90px;

    }



    #web-nav #menu {

        color: #445F73;

        /* text-align: center; */

        list-style-type: none;

        /* margin-right: 40px; */

        /* float: right; */

        min-width:750px;

        background-color: #ffffff;

        padding: 20px;

        position: absolute;

        top: -15px;

        height: 100%;

        padding-top: 150px;

        /* width: 100%; */

        overflow: hidden;

    }



        #web-nav #menu a {

            text-decoration: none;

            text-transform: uppercase;

            color: #445f73;

        }



            #web-nav #menu a.active {

                color: #EDE06B;

            }



            #web-nav #menu a:hover {

                color: #EDE06B;

            }



        #web-nav #menu li {

            height: 35px;

            font-size: 0.9em;

        }



            #web-nav #menu .subs ul.link-subs {

                display: none;

                list-style-type: none;

                font-size: 0.5em;

                margin: 10px 0px 10px 0px;

                padding: 0px;

            }



            #web-nav #menu .subs ul.link-subs li {

                height: 20px;

                margin-top: 0px;

            }



        #web-nav #menu .subs:hover a.parent {

            color: #EDE06B;

        }



        #web-nav #menu .main-link:hover {

            cursor: pointer;

        }



        #web-nav #menu .subs.blog-menu.show-years {

            height: auto;

        }



        #web-nav #menu li.active a.parent {

            color: #EDE06B;

        }



        #web-nav #menu .subs.blog-menu.show-years ul.link-subs {

            display: block;

        }



        /* BELOW HAD HEIGHT AUTO on .show-subs, and DISPLAY BLOCK on .link-subs */

        #web-nav #menu .subs.work-menu.show-subs {

        }



        #web-nav #menu li.active a.parent {

            color: #EDE06B;

        }



        #web-nav #menu .subs.work-menu.show-subs ul.link-subs {

            display: none;

        }



    #web-nav #address {

        color: #fff;

        letter-spacing: 0.11em;

        font-size: 0.6em;

        text-transform: uppercase;

        text-align: left;

        list-style-type: none;

        position: absolute;

        bottom: 23px;

        left: 35px;

        padding: 0px;

        margin: 0px;

    }



        #web-nav #address li {

            height: 16px;

        }



#mobile-nav {

    display: none;

}



#mobile-expand {

    display: none;

}



/*** INDEX ***/

#highlight-content {

    color: #000000;
    
    text-align: center;    

    position: absolute;

    width: 100%;

}



    #highlight-content h1 {

        max-width: 80%;

        margin: 0px auto;

        text-transform: uppercase;

        padding: 0px;

        line-height: 1.2em;

        letter-spacing: 0.2em;
       

    }



    #highlight-content h3 {

        max-width: 80%;

        margin: 0px auto;

        padding: 0px;

        letter-spacing: 0.2em;

    }



        #highlight-content li {

            margin-top: 20px;

            text-align:left;

            font-weight:bold;

        }



        #highlight-content-home {

            top:150px;

            color: #000000;

            text-align: center;  
            
            position: absolute;

            width: 100%;

        }

        

            #highlight-content-home h1 {

                max-width: 80%;

                margin: 0px auto;

                text-transform: uppercase;

                padding: 0px;

                line-height: 1.2em;

                letter-spacing: 0.2em;

            }

        

            #highlight-content-home h3 {

                max-width: 80%;

                margin: 0px auto;

                padding: 0px;

                letter-spacing: 0.2em;

            }

        

            #highlight-content-home ul {

                list-style: none;
                
                text-align: center;
                
                margin: 0px !important;

            }



                #highlight-content-home li {

                    font-weight:bold;

                    margin-top: 20px;

                    /*font-size:1.5em;*/
                    
                    font-size: 20px;

                }





        #highlight-content-small {

            color: #000000;

            text-align: center;    

            position: absolute;

            width: 100%;

        }

        

            #highlight-content-small h1 {

                max-width: 80%;

                margin: 0px auto;

                text-transform: uppercase;

                padding: 0px;

                line-height: 0.8em;

                letter-spacing: 0.2em;

            }

        

            #highlight-content-small h3 {

                max-width: 80%;

                margin: 0px auto;

                padding: 0px;

                letter-spacing: 0.2em;

            }

        

                #highlight-content-small li {

                    text-align:left;

                    font-weight:bold;

                    font-size:0.8em;

                }



/** CSS STYLES AT A PAGE WIDTH OF 900 PIXELS *********************************/

/*****************************************************************************/



@media only screen and (max-width:900px) 

{

    #close-nav 

    {

        display:none;

        background-color: gray;

        z-index: 10000000000000000000000000000000000000;

        position: fixed;

        top: 15px;

        left: 15px;

    }



    body > img.bacgroundimage {

        z-index: 0;

        width: 100%;

        left: 0px;

        top: 0px;

        height: 100%;

        opacity:0.3;

        position: absolute;

        object-fit: cover;

        animation: fadeIn 2s;
        /*transition-property: opacity;
        transition-timing-function: ease-in-out;
        transition-duration: 2s;
        transition-delay: 0.5s;*/

    }



        /*body > img.bacgroundimage.endtransition {

            z-index: 0;

            width: 100%;

            top: 0px;

            left: 0px;

            height: 100%;

            opacity: 0.3;

            position: absolute;

            object-fit: cover;

            transition-property: opacity;
            transition-timing-function: ease-in-out;
            transition-duration: 2s;

        }*/



    /*** GENERAL ***/

    #wrap {

        width: 100%;

        float: none;

    }



        #wrap.connect {

            height: auto;

        }





    /*** NAVIGATION ***/

    #web-nav {

        display: none;

        width: 100%;

        height: 100%;

        overflow: hidden;

        float: left;

        z-index: 20;

        position: fixed;

        left: 0px;

    }

    #web-nav>a {

        display: none;

    }



    #mobile-nav {

        width: 100%;

        height: 70px;

        display: block;

        position: fixed;

        z-index: 50;

        top: 0px;

    }



        #mobile-nav img.logo {

            height: 40px;

            width: auto;

            margin: 18px 20px;

            left: calc( 50% - 50px);

        }



        #mobile-nav img.drop-nav {

            height: 42%;

            position: absolute;

            top: 31%;

            right: 20px;

            cursor: pointer;

        }



    #mobile-expand {

        height: 100%;

        width: 100%;

        position: fixed;

        z-index: 50;

        top: 0px;

        display: none;

        background-color: #999999cc;

    }



        #mobile-expand img.close {

            margin: 20px;

            cursor: pointer;

            position: absolute;

            right: 0px;

            z-index: 70;

        }



        #mobile-expand img.logo {

            height: 35px;

            width: auto;

            position: absolute;

            left: 0px;

            margin: 18px 20px;

        }



        #mobile-expand #menu {

            position: relative;

            float: right;

            margin-left: 0px;

            padding-left: 0px;

            text-transform: uppercase;

            color: #fff;

            font-size: 1.2em;

            list-style-type: none;

            text-align: right;

            margin-right: 30px;

            margin-top: 140px;

            position: relative;

        }



        #mobile-expand ul li .parent:hover {

            color: #EDE06B;

            cursor: pointer;

        }



        #mobile-expand ul a:hover {

            color: #EDE06B;

        }



    #web-nav #menu {

        color: #445F73;

        text-align: center;

        list-style-type: none;

        /* margin-right: 40px; */

        /* float: right; */

        min-width: 100%;

        background-color: #ffffff;

        padding: 20px;

        position: absolute;

        top: -15px;

        height: 100%;

        padding-top: 80px;

        width: 100%;

        overflow: hidden;

    }



    #highlight-content-home 

    {

        top:70px;

    }



    #hidden-nav {

        display: none;

        width: 0px;

        height: 100%;

        float: right;

        border-left: 1px solid #ccc;

        background-size: 160px auto;

    }



    #mobile-expand #menu .work-subs {

        list-style-type: none;

        position: absolute;

        top: 27px;

        right: -130px;

        text-align: left;

    }



    /*** INDEX ***/

    #highlight-content {

        color: #ffffff;

        text-align: center;

        top: 50%;

        position: absolute;

        width: 100%;

        background-color: #99999999;

    }



}